支付界面的vue前端实现

实现效果图，类似百度网盘会员充值界面。

( 此处只展示部分代码，用于思路的整理和提示，并不是以上效果实现的全部代码 )

---

支付功能的实现：

点击支付套餐选项和支付人数进行前端的总价显示：

套餐选项：

套餐选项列入一个数组payList内，通过接口获取后台数据，进行v-for循环获取参数，显示在前端。

data() {
  return {
    visible: false, //支付弹窗的显示&隐藏
    payList: [], //支付套餐信息
    payTimeIndex: 0, // 充值套餐的索引
    payTimeId: "", // 充值套餐的ID
    userList:[],//存储用户id
    money:0, //初始价格
    totalMoney:0, //实际价格
    money1:0, //差额
  };
},

<div v-for="(item,index) in payList" :key="item.id">
  <div
    style="cursor: pointer"
    @click="onClick(item,index)" :class="payTimeIndex == index?'changes':'change'"
  >
      <!--通过点击事件索引获取套餐选项item，判断套餐样式选择、以及为计算总价使用准备-->
    <div style="font-size: 16px;color: #333333;font-weight: 500">{{ item.name }}</div>
    <!--套餐名称-->
    <div style="color: #C79745;font-size: 24px;font-weight: 600">{{ '￥' + item.actualTotalAmount }}</div>
    <!--套餐实际付款价格-->
    <div style="text-decoration:line-through;color: #999999">{{ '￥' + item.totalAmount }}</div>
    <!--套餐原价-->
  </div>
</div>

此处是使用input样式进行购买人物的选择，input利用type模拟checkbox复选框，分别两个选项设置点击事件userClick(0) 和userClick(1) 获取点击状态。

<div style="display: flex;justify-content: center;align-content: center;">
  <div
    style="width: 240px;background-color: #FFFFFF;border-radius: 10px 0px 0px 10px;padding: 10px;text-align: center;">
    <input class="radio_type" type="checkbox" name="type" id="check1"
           style="top: -5px;padding-right: 20px" @click="userClick(0)"/>
    <label for="check1">
      <div style="font-size: 18px;font-weight: 400;padding-top: 10px;">{{ userInfo.customerName }}</div>
    </label>
  </div>

  <div style="width: 1px; height: 60px; background: gainsboro"></div>

  <div style="width: 240px;background-color: #FFFFFF;border-radius: 0px 10px 10px 0;padding: 10px;text-align: center;">
    <input class="radio_type" type="checkbox" name="type" id="check2" style="top: -5px;padding-right: 20px" @click="userClick(1)"/>
    <label for="check2">
      <div style="font-size: 18px;font-weght: 400;padding-top: 10px;">{{ userInfo.customerName }}</div>
    </label>
  </div>
</div>

<div style="justify-content: right;align-content: center;padding-top: 30px;padding-left: 460px"><img
  @click="onPay" :src="require('@/static/images/index/pay.png')"/></div>

onPay() {
  //人物至少选择一个，不可选择为空
  let flag = false;
  var checkbox = document.querySelectorAll('input[name= "type"]');
   // 把所有name为type的input标签全选注入到checkbox中去
  for (let i = 0; i < checkbox.length; i++) {
    if (checkbox[i].checked) {
      flag = true;
        // 当checkbox的checked属性存在时，则为以选中状态，flag = true
      break;
    }
  }
  if (!flag) {
    this.$warning({
      title: "提示",
      content: "至少选择一个!"
    });
    return;
  }
    // 此处支付状态为未粘贴付款二维码
  this.$warning({
    title: "提示",
    content: "暂时没有二维码!"
  });
},

userClick(id){
  let index = this.userList.indexOf(id)
  if(index > -1){
    this.userList.splice(index, 1)
  }else{
    this.userList.push(id)
  }
},

---

计算总价

公式：选中的套餐价格 * 选中购买的人数

深度监听userList状态，使用userList存储购买人员，userList.length为购买人数。

watch:{  //深度监听 跟踪支付套餐选择和支付人数
  userList:{
    deep:true,
    handler(){
      this.getMoney()
    }
  },
  payTimeId:{
    handler(){
      this.getMoney()
    }
  },
},

getMoney(){
  let money = 0;
  let totalMoney = 0;
    // payList存储的套餐信息
    money = this.payList[this.payTimeIndex].actualTotalAmount * this.userList.length;
    totalMoney = this.payList[this.payTimeIndex].totalAmount * this.userList.length;
    this.money = money; //初始总价
    this.totalMoney = totalMoney;  //实际总价
    this.money1 = this.totalMoney - this.money;  //总价差额
},