lanan-repair/pages/home/active.vue

<template>
  <view class="container">
    <v-navigation-bar title-color="#333" background-color="#fff" title="活动列表">
    </v-navigation-bar>
    <view class="body">
        <view class="card" :title="item.name"  v-for="(item, index) in activeList" :key="index">
          <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>
        </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 {getUserInfoRequest} from "@/utils/common.js";
import {getToken,setUserInfo} from '@/utils/auth.js'
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{
      console.log("已登录")
      this.getUserInfos()
    }
  },
  onLoad(data) {
    this.getActive()
  },
  methods: {
    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 getUserInfos() {
      await getUserInfoRequest()
      await this.getActive()
    },
    //查询营销活动列表
    async getActive() {
      this.customInfo = JSON.parse(uni.getStorageSync('customerInfo'))
      const data = {
        cusId: this.customInfo.id
      }
      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:'支付成功'
				  })
				this.getUserInfos()
			  }
			   // 支付成功后的回调函数， 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
      })
    }
  }
}
</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 0;

    display: flex;
    flex-direction: column;
    row-gap: 20rpx;

    overflow: auto;
	
	.card {
		background-color: #fff;
		margin: 0 32rpx;
		padding: 30rpx;
		border-radius: 12rpx;
		
		display: flex;
		flex-direction: column;
		row-gap: 10rpx;
		
	}

  }
}

</style>