dy-admin-manager/src/views/productService/model/rechargeModel.vue

<template>
  <div class="chioseWrap">
    <el-form :inline="true" ref="payForm" :model="payForm">
      <el-form-item
        prop="payType"
        :rules="[
          { required: true, message: '请选择支付方式', trigger: 'change' }
        ]"
      >
        <el-select
          v-model.trim="payForm.payType"
          style="width: 180px"
          clearable
          filterable
          placeholder="请选择支付方式"
        >
          <el-option label="支付宝支付" value="alipay_qr"></el-option>
          <el-option label="微信支付" value="wx_pub"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table
      style="width: 100%"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      :data="tableList"
    >
      <el-table-column align="center" prop="name" label="产品名称">
      </el-table-column>
      <el-table-column align="center" label="充值金额（元）">
        <template slot-scope="scope">
          {{ scope.row.rechargeAmount | hasMoneyFormat }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="支付价格（元）">
        <template slot-scope="scope">
          <span style="color: red;">{{
            scope.row.amount | hasMoneyFormat
          }}</span>
        </template>
      </el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer">
      <el-button @click="$listeners.close()">取 消</el-button>
      <el-button @click="onMemberPay" type="primary">确 定</el-button>
    </span>

    <el-dialog
      title="支付二维码"
      :visible.sync="payMentVisible"
      :before-close="onClose"
      v-if="payMentVisible"
      width="500px"
      append-to-body
    >
      <payment
        :tableList="tableList"
        :orderNo="orderNo"
        v-on="$listeners"
        :codeUrl="codeUrl"
        @close="onPaymentClose"
      />
    </el-dialog>
  </div>
</template>
<script>
import { recharge } from "../api";
import { vaildStudentUrl } from "@/utils/validate";
import payment from "@/views/productService/model/payment";
export default {
  props: ["amount"],
  components: { payment },
  data() {
    return {
      payForm: {
        payType: null
      },
      pay_channel: null, //支付渠道
      selectStudentMoney: 0, // 选中学生金额
      payMentVisible: false,
      codeUrl: null,
      orderNo: null,
      tableList: []
    };
  },
  async mounted() {
    if (this.amount) {
      this.tableList = [
        {
          name: "云教室充值",
          rechargeAmount: this.amount,
          amount: this.amount
        }
      ];
    }
  },
  methods: {
    onMemberPay() {
      this.$refs.payForm.validate(async _ => {
        if (_) {
          try {
            const res = await recharge({ amount: this.amount });
            console.log(res.data.amount, res.data.orderNo);
            if (res.data.amount == 0 && res.data.orderNo) {
              this.$message.success("您已成功缴费");
              this.onPaymentClose(true);
              this.$listeners.getList();
              return;
            }
            const payForm = this.payForm;
            // // 二维码页面， 唤起支付页面
            const {
              orderNo,
              sign,
              amount,
              orderBody,
              orderSubject,
              tenantId,
              returnUrl,
              alipayAppId,
              wxAppId
            } = res.data.payMap;
            this.orderNo = orderNo;
            this.codeUrl =
              vaildStudentUrl() +
              "/#/payCenter?orderNo=" +
              orderNo +
              "&sign=" +
              sign +
              "&amount=" +
              amount +
              "&payType=" +
              payForm.payType +
              "&orderBody=" +
              orderBody +
              "&orderSubject=" +
              orderSubject +
              "&platform=tenantRecharge" +
              "&tenantId=" +
              tenantId +
              "&returnUrl=" +
              returnUrl +
              "&type=" +
              res.data.type +
              "&wxAppId=" +
              wxAppId +
              "&alipayAppId=" +
              alipayAppId;
            console.log(this.codeUrl, "codeUrl");
            this.payMentVisible = true;
          } catch (e) {}
        }
      });
    },
    onClose(done) {
      this.onPaymentClose(false, done);
    },
    onPaymentClose(hideTip = false, callBack) {
      if (hideTip) {
        this.payMentVisible = false;
        this.$emit("close");
        return;
      }
      this.$confirm(`是否支付完成？`, "提示", {
        confirmButtonText: "已完成支付",
        cancelButtonText: "未完成支付",
        type: "warning"
      })
        .then(async res => {
          if (typeof callBack == "function") {
            callBack();
          }
          this.payMentVisible = false;
        })
        .catch(e => {
          if (typeof callBack == "function") {
            callBack();
          }
          this.payMentVisible = false;
        });
    }
  }
};
</script>
<style lang="less" scoped>
.chioseWrap {
  font-size: 16px;
  > p {
    font-weight: 500;
    padding-bottom: 15px;
    span {
      color: red;
      padding: 0 3px;
    }
  }
}
.dialog-footer {
  text-align: right;
  display: block;
  padding-top: 15px;
}
</style>