lanan-repair/pages-home/home/active.vue

<template>
  <view class="container">
    <v-navigation-bar title-color="#333" background-color="#fff" title="活动列表">
    </v-navigation-bar>
    <view class="body">
      <uni-card :title="item.name"  v-for="item in activeList">
        <text class="uni-body">{{ item.remark }}</text>
        <view slot="actions" class="card-actions">
          <picker v-if="item.type=='kkyl'" @change="bindPickerChange" :value="index" :range="array">
            <button type="primary">参加</button>
          </picker>
          <view v-if="item.type=='zcyl'">
            <button @click="joinAct(item)" v-if="item.isJoin!='1'" type="primary">参加</button>
            <button @click="joinAct(item)" v-if="item.isJoin=='1'" disabled type="primary">参加</button>
          </view>
          <view v-if="item.type=='czyl'">
            <button @click="joinCzylActPrex(item)" type="primary">参加</button>
          </view>
        </view>
      </uni-card>
      <view style="text-align: center" v-if="activeList.length==0">
        <image class=""  src="@/static/images/nothing.png" ></image>
      </view>
    </view>
    <view>
      <!-- 输入框示例 -->
      <uni-popup ref="inputDialog" type="dialog">
        <uni-popup-dialog ref="inputClose"  mode="input" title="充值" value=""
                          placeholder="请输入充值金额" @confirm="dialogInputConfirm"></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>

</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
import request from "@/utils/request";
import {getToken,getUserInfo} from '@/utils/auth'
export default {
  components: {
    VNavigationBar,
  },
  data() {
    return {
      //可以点击
      canClick:true,
      value:"",
      index:0,
      array:[],
      couponList:[],
      orderInfo:{},
      customInfo: {},
      activeList: [],
      //开卡有礼活动id
      kkylActId:"",
      //充值有礼活动id
      czylActId:"",
      //充值金额
      topUpAmount:0.0,
      tabList: [{
        value: 0,
        title: '礼包券'
      },
        {
          value: 1,
          title: '卡包'
        }
      ],
      activeKey: 0
    };
  },
  onShow(data) {
    if(!getToken()){
      uni.reLaunch({
        url: '/pages/login/login'
      })
    }else{
      //直接取缓存中的用户信息
      this.customInfo = JSON.parse(getUserInfo())
    }
  },
  onLoad(data) {

  },
  methods: {
    preventKeyboard(e) {
      // 阻止键盘弹出
      e.preventDefault();
      // 将焦点移除，这样就不会有键盘弹出
      e.target.blur();
    },
    isNumber(value) {
      return /^\d+(\.\d+)?$/.test(value);
    },
    dialogInputConfirm(val) {
      if(this.isNumber(val)){
        console.log(val)
        this.topUpAmount = val
        //充值下单
        this.joinCzylAct()
        // 关闭窗口后，恢复默认内容
        this.$refs.inputDialog.close()
      }else{
        uni.showToast({
          title: '请输入数字！',
          icon: 'none'
        })
      }
    },
    bindPickerChange(e){
      this.index = e.detail.value
      console.log("index",this.index)
      this.joinKkylAct()
    },
    //查询营销活动列表
    async getActive() {
      this.activeList=[]
      this.couponList=[]
      this.array=[]
      const data = {
        cusId: this.customInfo.id,
        isNow:'1'
      }
      await request({
        url: '/userClient/customer/activeList',
        method: 'get',
        params:data
      }).then((res) => {
        this.activeList = res.data
        for(var i = 0; i < this.activeList.length; i++) {
          if(this.activeList[i].type=="kkyl"){
            this.kkylActId = this.activeList[i].id
            request({
              url: "/userClient/customer/getActive",
              method: "get",
              params:{id:this.activeList[i].id}
            }).then((res) => {
              if(res.data.hasOwnProperty("couponList")&&res.data.couponList.length>0){
                this.couponList = res.data.couponList
                for(var i = 0; i < res.data.couponList.length; i++) {
                  var coupon = res.data.couponList[i]
                  this.array.push(coupon.name+"("+coupon.amount+")")
                }
                this.$forceUpdate()
              }
            })
          }
        }
      })

    },
    /**
     * 参加注册活动
     * @param item
     * @returns {Promise<void>}
     */
    async joinAct(item) {
      if(this.canClick){
        this.canClick = false
        let dataObj = {}
        dataObj.cusId = this.customInfo.id
        dataObj.activeId = item.id
        await request({
          url: "/userClient/customer/attendActive",
          method: "POST",
          data: dataObj
        }).then((res) => {
          this.getActive()
          uni.showToast({
            title: '礼包领取成功！',
            icon: 'none'
          })
          this.canClick = true
          console.log(res);
        })
      }
    },
    /**
     * 参加开卡有礼活动
     * @returns {Promise<void>}
     */
    async joinKkylAct(){
      let dataObj = {}
      dataObj.cusId = this.customInfo.id
      dataObj.activeId = this.kkylActId
      dataObj.accountType='01'
      dataObj.selectCoupon=[this.couponList[this.index]]
      await request({
        url: "/userClient/customer/attendActive",
        method: "POST",
        data:dataObj
      }).then((res) => {
        console.log(res);
        //拿到开卡有礼订单 TODO  对接支付
        this.orderInfo = res.data
        this.goPay(this.orderInfo)

      })
    },
    async goPay(data) {
      let that = this
      await request({
        url: '/userClient/pay/toPay',
        method: 'get',
        params: {orderId: data.id}
      }).then((ress) => {
        wx.requestPayment({
          timeStamp: ress.data.timeStamp, // 时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间
          nonceStr: ress.data.nonceStr, // 随机字符串，长度为32个字符以下。
          package: ress.data.package, // 统一下单接口返回的 prepay_id 参数值，格式如“prepay_id=*”
          signType: ress.data.signType, // 签名算法类型，默认为 MD5，支持RSA等其他加密算法
          paySign: ress.data.paySign, // 签名，详见签名生成算法
          success: function (res) {
            console.log('成功',res);
            if( res.errMsg = 'requestPayment:ok'){
              uni.showToast({
                title:'支付成功'
              })
            }
            // 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
          },

        })
      })
    },
    /**
     * 充值有礼前置方法
     * @returns {Promise<void>}
     */
    async joinCzylActPrex(item){
      this.$refs.inputDialog.open()
      this.czylActId = item.id
    },
    /**
     * 充值有礼
     * @returns {Promise<void>}
     */
    async joinCzylAct(){
      let dataObj = {}
      dataObj.cusId = this.customInfo.id
      dataObj.activeId = this.czylActId
      dataObj.accountType='01'
      dataObj.topUpAmount=this.topUpAmount
      await request({
        url: "/userClient/customer/attendActive",
        method: "POST",
        data:dataObj
      }).then((res) => {
        console.log(res);
        //拿到充值有礼订单 TODO  对接支付
        this.orderInfo = res.data
		this.goPay(this.orderInfo)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #F0F1F5;

  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    height: 0;
    box-sizing: border-box;
    padding: 30rpx 32rpx;
    display: flex;
    flex-direction: column;
    row-gap: 20rpx;

    overflow: auto;

  }
}

</style>