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>￥{{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.useStoreDesc}}</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">{{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.effectiveDays }}天内有效
              </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 class="h-right-content flex-col justify-center ">
              <!--            <view class="btn">-->
              <!--              <text>立即领取</text>-->
              <!--            </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.salePrice}}</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="commitOrder" v-if="!isActivityCheck">立即参与</view>
      <view class="inBtn" v-else>已参与</view>
    </view>

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


  </view>
</template>

<script>
import myPay from '../../components/pay/pay';
export default {
  components: {
    myPay
  },
  data() {
    return {
      userInfo:{},
      subOrderNo:'',
      id:'',
      activity:{},
      requestStatus:false,
      isActivityCheck:true, //是否参与过该活动
    }
  },
  onLoad(e) {
    this.userInfo = uni.getStorageSync('userInfo')
    this.id = e.id
    console.log('上一个页面传递过来的活动ID',this.id)
    this.activityDetail()
    this.activityCheck()
  },
  methods: {

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

    },

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

    },


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

        if (this.requestStatus) {
          return;
        }
        this.requestStatus = true
        uni.showLoading({
          title: '加载中'
        });
        this.$api.commonGeneralOrder({
          orderType: 7,
          activityId: this.activity.id,
        }).then(res => {
          console.log('++++++++++++++++++订单提交+++++++++++', res)
            uni.hideLoading();
            this.subOrderNo = res.data.data.orderNo
            this.$refs.myPay.openPopup()
          this.requestStatus = false
        }).catch(err => {
          this.requestStatus = false
        })
      }
    },


    activityDetail(){
      this.$api.activityDetail({
        id:this.id,
      }).then(res=>{
        console.log(res)
        this.activity = res.data.data
        this.$set(this.activity)

      })
    },

    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>