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, voucherPayApi } 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: 168,
        ...(this.idx === 5
          ? { number: this.customNum, payGrade: this.realityNum }
          : this.transferPriceList[this.idx]),
      };
      let res = await voucherOrderApi(obj);
      if (res.code == "") {
        // 结构出来需要的参数
        const {
          data: { orderId, money, orderSn },
        } = res;
        let payObj = {
          collageId: 0,
          money,
          orderId,
          orderFormid: orderSn,
          orderSn: "",
          type: 2,
          paymentMode: 4,
          huabeiPeriod: -1,
          purchaseMode: 1,
        };

        let { data } = await voucherPayApi(payObj);
        wx.openEmbeddedMiniProgram({
          appId: "wxef277996acc166c3",
          path: "pages/orderDetail/orderDetail",
          extraData: JSON.parse(data.package),
        });
        console.log({
          appId: "wxef277996acc166c3",
          path: "pages/orderDetail/orderDetail",
          extraData: JSON.parse(data.package),
        });
      }
    },
    //  修改激活态
    changeIdx(val) {
      this.idx = val;
    },

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

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