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 } = 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'
            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>