dy-admin-manager/src/views/resetTeaming/modals/giveMemberModel.vue

<template>
  <div class="chioseWrap">
    <p>
      您将为以下<span>{{ tableList.length }}</span
      >位学员激活云教练，激活金额<span>{{
        selectStudentMoney | moneyFormat
      }}</span
      >元
    </p>
    <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" prop="phone" label="手机号">
      </el-table-column>
      <el-table-column align="center" prop="type" label="云教练类型">
        <template slot-scope="scope">
          {{ scope.row.type | memberEnumType }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="time"
        label="数量"
      ></el-table-column>
      <el-table-column align="center" label="缴费金额(元)">
        <template slot-scope="scope">
          {{ scope.row.amount | hasMoneyFormat }}
        </template>
      </el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer">
      <el-button
        @click="
          $listeners.close();
          $listeners.getList();
        "
        >取 消</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
    >
      <giveMemberPayment
        :tableList="tableList"
        v-on="$listeners"
        :orderNo="orderNo"
        :codeUrl="codeUrl"
        @close="onPaymentClose"
      />
    </el-dialog>
  </div>
</template>
<script>
import { cloudPay } from "../api";
import { vaildStudentUrl } from "@/utils/validate";
import giveMemberPayment from "@/views/resetTeaming/modals/giveMemberPayment";
export default {
  props: ["tableList"],
  components: { giveMemberPayment },
  data() {
    return {
      payForm: {
        payType: null
      },
      pay_channel: null, //支付渠道
      selectStudentMoney: 0, // 选中学生金额
      payMentVisible: false,
      codeUrl: null,
      orderNo: null
    };
  },
  async mounted() {
    let tableList = this.tableList || [];
    for (let i of tableList) {
      this.selectStudentMoney += parseFloat(i.amount);
    }
  },
  methods: {
    onMemberPay() {
      this.$refs.payForm.validate(async _ => {
        if (_) {
          try {
            const res = await cloudPay(this.tableList);
            console.log(res);
            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,
              notifyUrl
            } = res.data.payMap;
            this.orderNo = orderNo;
            this.codeUrl =
              vaildStudentUrl() +
              "/#/payCenter?orderNo=" +
              orderNo +
              "&sign=" +
              sign +
              "&amount=" +
              amount +
              "&payType=" +
              payForm.payType +
              "&orderBody=" +
              orderBody +
              "&orderSubject=" +
              orderSubject +
              "&platform=cloudTeacherOrder" +
              "&tenantId=" +
              tenantId +
              "&returnUrl=" +
              returnUrl +
              "&notifyUrl=" +
              notifyUrl;
            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");
        this.$emit("getList");
        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>