jje_uniapp/orderPages/activityDetail/activityDetail.vue

<template>
  <view class="flex-col page">

    <view class="flex-col content">
      <view class="out1">
        <view class="flex-col top">
          <view class="flex-row title">
            <text>{{ activity.title }}</text>
          </view>
          <view class="flex-row price">
            <text v-if="isShare">￥{{ activity.sharePrice }}</text>
            <text
                :style="{textDecorationLine:(isShare ?'line-through' :'none'),color:(isShare ? '#878787':''),  fontSize:(isShare ? '24rpx':'') }">
              ￥{{ activity.salePrice }}
            </text>

          </view>
          <view class="flex-row">
            <view class="activityKey ">
              <text>活动时间：</text>
            </view>
            <view>
              <text v-if="activity.valid == 2">{{ activity.validBeginTime.substring(0, 10) }} 至
                {{ activity.validEndTime.substring(0, 10) }}
              </text>
              <text v-else>长期有效</text>
            </view>
          </view>
          <view class="flex-row">
            <view class="activityKey">
              <text>活动门店：</text>
            </view>
            <view class="activityValue">
              <text>{{ activity.partStoreName }}</text>
            </view>
          </view>
          <view class="flex-row">
            <view class="activityKey ">
              <text>活动描述：</text>
            </view>
            <view class="activityValue">
              <text>{{ activity.description }}</text>
            </view>

          </view>
        </view>
      </view>
      <!--          <view class="out1">-->
      <!--            <view class="flex-col top1">-->
      <!--              <view class="flex-row justify-center title">-->
      <!--                <text>退款策略（模块标题）</text>-->
      <!--              </view>-->
      <!--              <view class="flex-row">-->
      <!--                <text>-->
      <!--                  活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述-->
      <!--                </text>-->
      <!--              </view>-->
      <!--            </view>-->
      <!--          </view>-->
      <view class="out2" v-if="activity.couponList">
        <view class="flex-col ticket">
          <view class="flex-row justify-center title">
            <text>赠送优惠券</text>
          </view>

          <view class="flex-row ticketList" v-for="(i,index) in activity.couponList">
            <view class="h-text flex-col justify-center ">
              <text class="money" v-if="i.discountsType == 2">{{ i.discount }}折</text>
              <text class="money" v-else>{{ i.discountsPrice }}</text>

              <text class="desc">满{{ i.reachPrice }}可用</text>
            </view>

            <view class="h-center-content flex-col justify-around">
              <view class="h-value">
                <text>{{ i.name }}</text>
              </view>
              <!--            <view class="ticketMsg">-->
              <!--              使用平台：-->
              <!--              <text>全平台</text>-->
              <!--            </view>-->
              <view class="ticketMsg">
                使用次数：{{ i.degree }}
              </view>
              <view class="ticketMsg">
                服务项目：{{ i.useServiceDesc }}
              </view>
              <view class="ticketMsg">
                <text v-if="i.validType == 1">领取后{{ i.effectiveDays }}天内有效</text>
                <view v-else>
                  <view>使用期限：{{ i.startTime.substring(0, 10) }} 至 {{ i.endTime.substring(0, 10) }}</view>
                </view>
              </view>

              <!--            <view class="ticketMsg flex-row">-->
              <!--              <text @click.stop="showRemark(item)">使用规则</text>-->
              <!--              <u-icon v-if="item.id == showRemarkId" name="arrow-down-fill" color="" size="12"></u-icon>-->
              <!--              <u-icon v-else name="play-right-fill" color="" size="12"></u-icon>-->
              <!--            </view>-->
            </view>
          </view>
        </view>

        <!--              <view class="flex-row justify-between link">-->
        <!--                <text>跳转一</text>-->
        <!--                <u-icon  name="arrow-right" color="" size="12"></u-icon>-->
        <!--              </view>-->

        <!--              <view class="flex-row justify-between link">-->
        <!--                <text>跳转一</text>-->
        <!--                <u-icon name="arrow-right" color="" size="12"></u-icon>-->
        <!--              </view>-->

      </view>
      <view class="out2" v-if="activity.equityList">
        <view class="flex-col ticket">
          <view class="flex-row justify-center title">
            <text>赠送权益卡</text>
          </view>

          <view class="flex-row ticketList" v-for="(i,index) in activity.equityList">
            <view class="h-text flex-col justify-center ">
              <text class="money">{{ i.faceValue }}</text>
              <text class="desc">权益价</text>
            </view>

            <view class="h-center-content flex-col justify-around">
              <view class="h-value">
                <text>{{ i.title }}</text>
              </view>
              <view class="ticketMsg">
                适用门店：{{ i.useStoreDesc || '' }}
              </view>
              <view class="ticketMsg">
                领取后{{ i.effectiveDays }}天内有效
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="out2" v-if="activity.rechargeList">
        <view class="flex-col ticket">
          <view class="flex-row justify-center title">
            <text>赠送储值卡</text>
          </view>

          <view class="flex-row ticketList" v-for="(i,index) in activity.rechargeList">
            <view class="h-text flex-col justify-center ">
              <text class="money">{{ i.reachPrice }}</text>
              <text class="desc">储值额度</text>
            </view>

            <view class="h-center-content flex-col justify-around">
              <view class="h-value">
                <text>{{ i.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="flex-row justify-center inBtnView">
      <view class="inBtn" @click="beforeCommitOrder" v-if="!isActivityCheck">立即参与</view>
      <view class="inBtn" v-else>已参与</view>
    </view>

    <myPay ref="myPay" :selectBlPay="userInfo.balance *1 >= totalAmount *1" :balance="userInfo.balance"
           :totalAmount="totalAmount" :lovePay="false" :blPay="false"
           :orderNo="subOrderNo" @payResult="payResult" @improperClose="improperClose"></myPay>

    <view>
      <u-picker :show="show" title="选择服务对象" :closeOnClickOverlay="true" @close="show = false"
                :columns="serviceObjectList"
                keyName="nickName" @cancel="show = false" @confirm="confirm"></u-picker>
    </view>

  </view>
</template>

<script>
import myPay from '../../components/pay/pay';

export default {
  components: {
    myPay
  },
  data() {
    return {
      userInfo: {},
      subOrderNo: '',
      id: '',
      storeId: '',
      userId: '',
      techNo: '',
      activity: {},
      requestStatus: false,
      isActivityCheck: true, //是否参与过该活动
      serviceObjectList: [],
      show: false,
      serviceObjectId: null,
      isShare: false,
      inviteUserId: null,
      inviteOrderId: null,
    }
  },

  computed: {
    totalAmount() {
      if (this.isShare) {
        return this.activity.sharePrice
      } else {
        return this.activity.salePrice
      }
    }
  },
  onLoad(e) {
    console.log(e)
    if (e.id) {
      this.id = e.id
      console.log('上一个页面传递过来的活动ID===>', this.id)
    }
    if (e.inviteUserId) {
      console.log(e)
      this.id = e.activityId
      this.inviteUserId = e.inviteUserId
      this.inviteOrderId = e.inviteOrderId
      this.isShare = true
    }
    // 扫技师端携带的参数，已存在缓存中
    let promotionParam = uni.getStorageSync('promotionParam')
    if (promotionParam) {
      console.log('获取到技师的二维码数据', promotionParam)
      this.storeId = promotionParam.storeId
      this.techNo = promotionParam.techNo
    } else {
      let storeParam = uni.getStorageSync('storeParam')
      // console.log('获取到门店的二维码数据',param)
      this.storeId = storeParam.storeId
    }

    if (e.q) {
      //扫店长端二维码进来的活动参数
      const q = decodeURIComponent(e.q)
      let a = q.split('?')
      let b = a[1].split('&')
      let param = {} //技师端分享过来的参数
      for (let i = 0; i < b.length; i++) {
        param[b[i].split('=')[0]] = b[i].split('=')[1]
      }
      this.id = param.activityId
      this.storeId = param.storeId
      this.techNo = ''
      console.log("扫店长端二维码进来的活动参数===》", param)
      uni.setStorageSync('storeParam', param)
      uni.removeStorageSync('promotionParam');
    }


    this.userInfo = uni.getStorageSync('userInfo')
    this.activityDetail()
    this.activityCheck()
    this.listServiceObject()
  },
  methods: {
    // 查询服务对像信息列表
    listServiceObject() {
      let serviceObjectList = []
      this.$api.listServiceObject(this.reqParm).then((res) => {
        res.data.data.forEach(i => {
          if (i.isSelf != 1) {
            serviceObjectList.push(i)
          }
        })
        this.serviceObjectList[0] = serviceObjectList

      })
    },

    //支付结果回调
    payResult(e) {
      console.log(e)
      if (e.payResult) {
        uni.showToast({
          duration: 2000,
          title: '支付成功!'
        });
        this.isActivityCheck = true
      } else {
        uni.showToast({
          duration: 2000,
          title: '支付失败!',
          icon: 'error'
        });
      }

    },

    //支付弹窗关闭回调
    improperClose() {

    },

    beforeCommitOrder() {
      if (this.activity.isAddServiceObject == 1) {
        this.show = true
      } else {
        this.commitOrder()
      }
    },

    confirm(e) {
      console.log(e)
      this.serviceObjectId = e.value[0].id
      this.show = false

      this.commitOrder()
    },

    //提交订单
    commitOrder() {
      // if (this.subOrderNo){
      //   this.$refs.myPay.openPopup()
      // }else {

      if (this.requestStatus) {
        return;
      }
      this.requestStatus = true
      uni.showLoading({
        title: '加载中'
      });
      this.$api.commonGeneralOrder({
        orderType: 7,
        serviceObjectId: this.serviceObjectId,
        activityId: this.activity.id,
        storeId: this.storeId,
        inviteUserId: this.inviteUserId,
        techNo: this.techNo
      }).then(res => {
        console.log('++++++++++++++++++订单提交+++++++++++', res)
        uni.hideLoading();
        this.subOrderNo = res.data.data.orderNo
        if (this.activity.salePrice * 1 > 0) {
          this.$refs.myPay.openPopup()
        } else {
          uni.showToast({
            duration: 2000,
            title: '活动参与成功!'
          });
          this.isActivityCheck = true
        }
        this.requestStatus = false
      }).catch(err => {
        this.requestStatus = false
      })
      // }
    },


    activityDetail() {
      console.log(this.id, '活动ID')
      const data = {
        id: this.id,
      }
      if (this.inviteUserId) {
        data.userId = this.inviteUserId
      }
      if (this.inviteOrderId) {
        data.inviteOrderId = this.inviteOrderId
      }
      this.$api.activityDetail(data).then(res => {
        console.log(res)
        this.activity = res.data.data
        this.$set(this.activity)
        if (this.isShare) {
          console.log(this.activity)
          if (this.activity.shareMax !== 0 && this.activity.shareMax < this.activity.shareCount) {
            this.isShare = false
            uni.showToast({
              duration: 3000,
              title: '已经超出最大分享次数',
              icon: 'none'
            });
          }
        }
      })
    },

    activityCheck() {
      this.$api.activityCheck({activityId: this.id,}).then(res => {
        console.log(res)
        this.isActivityCheck = res.data.data
      })
    }


  }
}
</script>


<style lang="scss" scoped>
@import '/common/css/common.css';
@import './index.rpx.scss';

</style>