tf-business/user_module/voucherPrice/components/rechargePopup/index.vue

<template>
  <view class="rechargePopup-box">
    <view class="rechargePopup-title">
      <view>代金券充值</view>
      <view @click="cancel">取消</view>
    </view>
    <view class="rechargePopup-list">
      <view
        class="rechargePopup-item"
        v-for="(item, index) in transferPriceList"
        :key="index"
        :class="idx === index ? 'act' : ''"
        @click="changeIdx(index)"
      >
        <view>{{ item.number }}</view>
        <view>售价：{{ item.payGrade }}元</view>
      </view>
    </view>
    <view class="custom" :class="idx === 5 ? 'act' : ''" @click="changeIdx(5)">
      <view class="custom-left">自定义代金券</view>
      <view class="custom-input">
        <input type="number" v-model="customNum" />
      </view>
      <view class="custom-right">售价：{{ realityNum }}元</view>
    </view>
    <view class="immediately-btn" @click="getOrder">立即充值</view>
  </view>
</template>

<script>
import { voucherOrderApi } from "@/config/index.js";
export default {
  computed: {
    realityNum() {
      return this.customNum / 2;
    },
  },
  data() {
    return {
      //  激活态
      idx: "",
      //  转赠金额列表
      //  50, 100, 200, 1000, 2000, ""
      transferPriceList: [
        {
          number: "50",
          payGrade: "25",
        },
        {
          number: "100",
          payGrade: "50",
        },
        {
          number: "200",
          payGrade: "100",
        },
        {
          number: "1000",
          payGrade: "500",
        },
        {
          number: "2000",
          payGrade: "1000",
        },
        {
          number: "",
          payGrade: "",
        },
      ],
      customNum: "",
    };
  },
  methods: {
    //  提交订单
    async getOrder() {
      this.$showToast("功能正在开发....")
      return
      console.log(this.idx);
      if (this.idx === "") {
        this.$showToast("请选择充值金额");
        return;
      }
      let obj = {
        voucherId: 186,
        ...(this.idx === 5?{number: this.customNum,payGrade: this.realityNum,}: this.transferPriceList[this.idx]),
      };
      let res = await voucherOrderApi(obj);
      console.log(res);
    },
    //  修改激活态
    changeIdx(val) {
      this.idx = val;
    },

    //  取消按钮
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>