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="out2" v-if="activity.couponList">
        <view class="flex-col ticket">
          <view class="flex-row justify-center title">
            <text>赠送优惠券</text>
          </view>
          <view v-for="(item,index) in activity.couponList">
            <view class="flex-row ticketList">
              <view class="row-list flex-row justify-start">
                <view class="h-text flex-col justify-center ">
                  <view class="money">
                    <text class="money" v-if="item.discountsType == 2">{{ item.discount }}折</text>
                    <text class="money" v-else>{{ `减` + item.discountsPrice }}</text>
                  </view>
                  <view class="desc">
                    <text>满{{ item.reachPrice }}可用</text>
                  </view>
                </view>
                <view class="h-center-content flex-col justify-around">
                  <view class="h-value">
                    <text>{{ item.name }}</text>
                  </view>
                  <view class="itemTitle">
                    使用次数：{{ item.degree }}
                  </view>
                  <view class="itemTitle">
                    <text v-if="item.validType == 1">领取后{{ item.effectiveDays }}天内有效</text>
                    <view v-else>
                      <view>使用期限：{{ item.startTime.substring(0, 10) }}</view>
                      <view> 至 {{ item.endTime.substring(0, 10) }}</view>
                    </view>
                  </view>
                  <view class="itemTitle 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 v-if="showRemarkId == item.id" class="remark" style="text-indent:unset">
              <view>
                可用门店:
                <text>{{ item.useStoreDesc }}</text>
              </view>
              <view>
                适用项目:
                <text>{{ item.useServiceDesc }}</text>
              </view>
              <view v-if="item.remark !=null">
                使用说明:
                <text>{{ item.remark }}</text>
              </view>
              <text v-else class="remarkText">该优惠券暂无使用说明</text>
            </view>
          </view>
        </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 v-for="(i,index) in activity.equityList">
            <view class="flex-row ticketList">
              <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.effectiveDays }}天内有效
                </view>
                <view class="itemTitle flex-row">
                  <text @click.stop="showRemark(i)">使用规则</text>
                  <u-icon v-if="i.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 v-if="showRemarkId == i.id" class="remark" style="text-indent:unset">
              <view>
                可用门店:
                <text>{{ i.useStoreDesc }}</text>
              </view>
              <view v-if="i.description !=null">
                使用说明:
                <text>{{ i.description }}</text>
              </view>
              <text v-else class="remarkText">该权益卡暂无使用说明</text>
            </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 v-if="!isShareMax" 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 {
      showRemarkId: '',
      userInfo: {},
      subOrderNo: '',
      id: '',
      storeId: '',
      userId: '',
      techNo: '',
      activity: {},
      requestStatus: false,
      isActivityCheck: true, //是否参与过该活动
      serviceObjectList: [],
      show: false,
      serviceObjectId: null,
      isShare: false,
      inviteUserId: null,
      inviteOrderId: null,
      isShareMax:false,
    }
  },

  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: {
    showRemark(item) {
      if (this.showRemarkId == item.id) {
        this.showRemarkId = ''

      } else {
        this.showRemarkId = item.id

      }
    },
    // 查询服务对像信息列表
    listServiceObject() {
      let serviceObjectList = []
      this.$api.listServiceObject(this.reqParm).then((res) => {
        if (this.isShare) {
          if (res.data.data.length === 0) {
            uni.showToast({
              duration: 2500,
              title: '当前账号没有服务对象,即将跳转服务对象绑定',
              icon: 'none',
            });
            setTimeout(() => {
              uni.hideToast();
              //关闭提示后跳转
              uni.navigateTo({
                url: '/myPages/serviceObjectFaceAuth/index'
              })
            }, 1500)
          }
        }

        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,
        inviteOrderId: this.inviteOrderId,
        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) {
            uni.showToast({
              duration: 3000,
              title: '当前链接已经超出最大分享次数',
              icon: 'none'
            });
            this.isShareMax = true
          }
        }
      })
    },

    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>