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-table
        style="width: 100%; margin-bottom: 15px;"
        :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>

      <el-form-item
        prop="checked"
        :rules="[
          { required: true, message: '请阅读并同意协议', trigger: 'change' }
        ]"
      >
        <el-checkbox v-model="payForm.checked" @change="onCheckChange">
        </el-checkbox>
        <span
          style="color: #606266; padding-left: 5px;cursor: pointer;"
          @click="onCheckBox"
          >我已阅读并同意</span
        >
        <span
          @click.stop="onLookContract"
          style="color: #01C1B5;cursor: pointer;"
          >《产品及服务协议》</span
        >
      </el-form-item>
    </el-form>

    <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="lookVisible"
      width="415px"
      append-to-body
    >
      <previewProtocol
        @close="lookVisible = false"
        :look="true"
        :fileContent="fileContent"
        v-if="lookVisible"
      />
    </el-dialog>

    <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";
import previewProtocol from "@/views/tenantSetting/model/previewProtocol";
import { tenantInfoRePay, getContract } from "../api";
import { getTenantId } from "@/utils/auth";
export default {
  props: ["value", "tenantInfo"],
  components: { payment, previewProtocol },
  data() {
    return {
      payForm: {
        payType: null,
        checked: null
      },
      fileContent: null,
      lookVisible: false,
      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: {
    onCheckChange() {
      if (!this.payForm.checked) {
        this.payForm.checked = null;
      }
    },
    onCheckBox() {
      if (this.payForm.checked) {
        this.payForm.checked = null;
      } else {
        this.payForm.checked = true;
      }
    },
    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)
            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=tenant" +
              "&tenantId=" +
              tenantId +
              "&returnUrl=" +
              returnUrl +
              "&notifyUrl=" +
              notifyUrl;
            console.log(this.codeUrl, "codeUrl");
            this.payMentVisible = true;
          } catch (e) {}
        }
      });
    },
    onClose(done) {
      this.onPaymentClose(false, done);
    },
    async onLookContract() {
      // 如果有协议则不需要重新请求
      if (!this.fileContent) {
        try {
          const tenantId = this.$helpers.tenantId;
          const res = await getContract({
            id: tenantId,
            type: 1,
            renewCount: this.value
          });
          this.fileContent = res.data;
        } catch (e) {}
      }
      this.lookVisible = true;
    },
    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>