dy-admin-manager/src/views/productService/model/serviceModel.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="platformServeName" label="产品名称">
      </el-table-column>
      <el-table-column align="center" label="学员上限">
        <template slot-scope="scope">
          {{ scope.row.studentUpLimit | numberFormat }}人
        </template>
      </el-table-column>
      <el-table-column align="center" label="付费模式">
        <template slot-scope="scope">
          {{ scope.row.expiryUnit | memberEnumType }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="num" 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.value | 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" :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'
import { tenantInfoRePay } from '../api'
import { getTenantId } from '@/utils/auth'
export default {
  props: ["value", "tenantInfo"],
  components: { payment },
  data() {
    return {
      payForm: {
        payType: null,
      },
      pay_channel: null, //支付渠道
      selectStudentMoney: 0, // 选中学生金额
      payMentVisible: false,
      codeUrl: null,
      orderNo: null,
      tableList: []
    };
  },
  async mounted() {
    if(this.value) {
      const { contractPrice, originalPrice, ...res } = this.tenantInfo
      this.tableList = [{
        ...res,
        num: this.value,
        rechargeAmount: this.value * originalPrice,
        value: this.value * contractPrice
      }]
    }
  },
  methods: {
    onMemberPay() {
      this.$refs.payForm.validate(async (_) => {
        if(_) {
          try {
            console.log(this.value, 'this.value')
            const res = await tenantInfoRePay({ id: getTenantId(), val: this.value })
            // console.log(res)
            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=tenant'
            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>