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>-->
    <uni-popup ref="popup" type="bottom">
      <view class="addService">
        <view class="popupTitle">
          <text>选择服务对象</text>
        </view>

        <scroll-view class="scrollY" scroll-y>
          <view class="flex-row objectItem" :class="{'vBackGround': selectServiceObjectIndex === index}"
                v-for="(item,index) in serviceObjectList" :key="index"
                @click="selectServiceObjectIndex = index">
            <image class="objectImage" :src="item.facePhotoUrl || '/static/ud4.png'"></image>
            <view class="flex-col objectName ">
              <text>{{ item.nickName }}</text>
            </view>
            <image v-if="selectServiceObjectIndex === index" class="vImage"
                   src="/static/index/xuanzhong.png"></image>
          </view>
        </scroll-view>

        <view class="flex-row justify-around">
          <view class="cancelButton" @click="closeSelectServiceObjectPopup">
            <text>取消</text>
          </view>
          <view class="confirmButton" @click="confirm(serviceObjectList[selectServiceObjectIndex])">
            <text>确定</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

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

export default {
  components: {
    myPay
  },
  data() {
    return {
      selectServiceObjectIndex:-1,
      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()
  },

  onShow() {
    this.userInfo = uni.getStorageSync('userInfo')
    this.listServiceObject()
  },

  methods: {
    showRemark(item) {
      if (this.showRemarkId == item.id) {
        this.showRemarkId = ''

      } else {
        this.showRemarkId = item.id

      }
    },
    getImgUrlByBannerOssId(items) {
      for (let i = 0; i < items.length; i++) {
        if (items[i].facePhoto) {
          this.$api.getImgUrlByOssId({ossId: items[i].facePhoto}).then(res => {
            items[i].facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
            this.$set(this.serviceObjectList, i, items[i])
          })
        }
      }
    },
    // 查询服务对像信息列表
    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

        this.$set(this.serviceObjectList, 0, serviceObjectList)
        this.getImgUrlByBannerOssId(this.serviceObjectList[0]);
        console.log('执行了+++++++++++++++++++', this.serviceObjectList)

        // if (this.isShare) {
        if (serviceObjectList.length === 0) {
          uni.showToast({
            duration: 2500,
            title: '当前账号没有服务对象,即将跳转服务对象绑定',
            icon: 'none',
          });
          setTimeout(() => {
            uni.hideToast();
            //关闭提示后跳转
            uni.navigateTo({
              url: '/myPages/serviceObjectFaceAuth/index'
            })
          }, 1500)
        }
        // }

      })
    },
    closeSelectServiceObjectPopup(){
      this.selectServiceObjectIndex = -1
      this.$refs.popup.close()
    },
    //支付结果回调
    payResult(e) {
      console.log(e)
      if (e.payResult) {
        uni.showToast({
          duration: 2000,
          title: '支付成功!'
        });
        this.isActivityCheck = true
        setTimeout(() => {
          uni.navigateTo({
            url: '/myPages/myActivity/myActivity'
          })
        }, 2000)
      } else {
        uni.showToast({
          duration: 2000,
          title: '支付失败!',
          icon: 'error'
        });
      }

    },

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

    },

    beforeCommitOrder() {
      if (!this.userInfo.phone) {
        uni.showModal({
          title: '温馨提示',
          content: '请先绑定手机号',
          success: res => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/myPages/setting/setting-telphone',
              })
            }
          }
        })
        return
      }

      if (this.activity.isAddServiceObject == 1) {
        // this.show = true
        this.$refs.popup.open()
      } else {
        this.commitOrder()
      }
    },

    confirm(e) {
      // console.log(e)
      // this.serviceObjectId = e.value[0].id
      console.log(e)
      if(!e){
        uni.showToast({
          duration: 2000,
          title: '请选择一个服务对象',
          icon: 'none'
        });
        return
      }
      this.serviceObjectId = e.id
      // this.show = false
      this.$refs.popup.close()
      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.isShare){
          if (this.activity.sharePrice * 1 > 0 ) {
            this.$refs.myPay.openPopup()
          } else {
            uni.showToast({
              duration: 2000,
              title: '活动参与成功!'
            });
            this.isActivityCheck = true
          }
        }else {
          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>