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">
        <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>
    <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()
          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
      })
    },
    /**
     * 充值有礼前置方法
     * @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: 30 rpx 0;
    margin: 0 32 rpx;

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

    overflow: auto;

  }
}

</style>