Arbitrate-Frontend/src/views/caseManagement/components/payDialog.vue

<template>
  <div>
    <el-dialog
      :title="payTitle"
      :visible.sync="openPay"
      v-if="openPay"
      width="800px"
      append-to-body
      :destroy-on-close="true"
      center
    >
      <el-descriptions title="订单信息">
        <el-descriptions-item label="案件编号：">{{
          form.caseNum
        }}</el-descriptions-item>
        <el-descriptions-item label="申请人：">{{
          form.applicant
        }}</el-descriptions-item>
        <el-descriptions-item label="案件标的：">{{
          form.caseSubjectAmount
        }}</el-descriptions-item>
        <el-descriptions-item label="案件应缴费用：">{{
          form.feePayable
        }}</el-descriptions-item>
        <el-descriptions-item label="被申请人：">{{
          form.respondent
        }}</el-descriptions-item>
        <el-descriptions-item label="申请人仲裁诉求：">{{
          form.arbitratClaims
        }}</el-descriptions-item>
        <el-descriptions-item label="案件状态：">{{
          form.caseStatusName
        }}</el-descriptions-item>
      </el-descriptions>
      <div class="payType">
        <span>请选择支付方式：</span>
        <i class="iconfont icon-weixinzhifu" @click="pay(0)"></i>
        <i class="iconfont icon-zhifubao" @click="pay(1)"></i>
      </div>
      <div class="payImg">
        <div id="qrcodeImg"></div>
      </div>
      <div class="payTitle">{{ payMain }}</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="payCancel" class="endbutton"><span>取 消</span></el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { casePay } from "@/api/pay/pay";
import QRCode from "qrcodejs2";
export default {
  props: ["openPay", "payTitle", "form", "payForm"],
  data() {
    return {
      // key: value
      // 支付文字
      payMain: "",
    };
  },
  methods: {
    // 生成二维码
    qrcode(url) {
      // 前端根据 URL 生成微信支付二维码
      document.getElementById("qrcodeImg").innerHTML = "";
      return new QRCode("qrcodeImg", {
        width: 200,
        height: 200,
        text: url,
        colorDark: "#000",
        colorLight: "#fff",
      });
    },
    // 支付
    pay(val) {
      if (this.payForm.feePayable == 0 || !this.payForm.feePayable) {
        this.$message({
          message: "此案件无需缴费",
          type: "error",
        });
        return;
      }
      let payType = "";
      if (val == 0) {
        payType = "wxpay";
        this.payMain = "请使用微信扫二维码支付";
      } else if (val == 1) {
        payType = "alipay";
        this.payMain = "请使用支付宝扫二维码支付";
      }
      casePay({
        totalFee: this.payForm.feePayable * 100,
        caseId: this.payForm.caseId,
        tradeType: "native",
        platform: payType,
      }).then((res) => {
        this.paySrc = res.data.code_url;
        this.qrcode(this.paySrc);
      });
    },
    payCancel() {
      this.$emit("paycancelRow");
      this.payMain = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.payType {
  height: 80px;
  line-height: 80px;

  .icon-weixinzhifu {
    font-size: 24px;
    color: #27a56f;
    margin-right: 15px;
  }

  .icon-zhifubao {
    font-size: 24px;
    color: #1d76cc;
  }
}

.payImg {
  width: 100%;
  display: flex;
  justify-content: center;
}

.payTitle {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}
::v-deep .el-dialog {
  width: 800px;
  background: #ffffff;
  border-radius: 20px;
}
.endbutton {
  width: 154px;
  height: 37px;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 19px;
  span {
    width: 31px;
    height: 13px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #959595;
  }
}
</style>