Mediation-Frontend/src/views/caseManagement/components/respondentPay.vue

<template>
    <div>
      <el-dialog :title="resPayTitle" v-if="openResPay" :visible="openResPay" @close="payCancel" width="800px" append-to-body
        :destroy-on-close="true" center>
        <el-descriptions title="订单信息">
          <el-descriptions-item label="案件编号">{{
            formResPayDetail.caseNum
          }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{
            formResPay.applicationName || ''
          }}</el-descriptions-item>
          <!-- <el-descriptions-item label="案件标的">{{
            formResPayDetail.caseSubjectAmount
          }}</el-descriptions-item> -->
          <el-descriptions-item label="被申请人应缴费用">{{
            formResPayDetail.feePayable
          }}</el-descriptions-item>
          <el-descriptions-item label="被申请人">{{
            formResPay.respondentName
          }}</el-descriptions-item>
          <el-descriptions-item label="案件状态">
            <el-tag size="mini" type='danger' effect="dark">
              {{ formResPayDetail.caseStatusName }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="驳回原因" v-if="formResPayDetail.reason">
            <el-tag size="mini" type='danger' effect="dark">
              {{ formResPayDetail.reason }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <div class="paySelectType">
          <el-radio-group v-model="paySelect" @input="changPayType">
            <el-radio :label="0">线上支付</el-radio>
            <el-radio :label="1">线下支付</el-radio>
          </el-radio-group>
        </div>
        <div class="payupload">
          <span>上传支付凭证：</span>
          <div class="uploadBtn">
            <el-upload class="upload-demo" ref="upload" :action="UploadUrl()" :headers="headers" :data="filedata"
              :on-preview="handlePreview" :on-remove="handleRemove" :on-change="beforeUpload"  :on-success="handlSuccess" :file-list="fileList"
             >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </div>
        </div>
        <div class="payType" v-if="paySelect == 0">
          <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="resPayTitle">{{ payMain }}</div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="payCancel" class="endbutton" round><span>取 消</span></el-button>
          <el-button @click="submitUpload" class="endbutton" type="primary" round><span>确认缴费</span></el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { casePay, confirmPayDig } from "@/api/pay/pay";
  import QRCode from "qrcodejs2";
  import { getToken } from "@/utils/auth";
  export default {
    props: ["openResPay", "resPayTitle", "formResPayDetail", "resPayForm", "queryParams","resPayId","formResPay"],
    data() {
      return {
        // key: value
        // 支付文字
        payMain: "",
        timer: null,
        paySelect: 1,//支付线上/线下
        fileList: [],
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        filedata: {
          annexType: 9,
        },
        submitForm:{
          payType:1,
          payOrderList:[],
          caseId:null
        }
      };
    },
    methods: {
      UploadUrl() {
        return window.location.origin + "/API/common/upload";
      },
      //选择支付方式(线上,线下)
      changPayType(data) {
        if(data == 1){
          document.getElementById("qrcodeImg").innerHTML = "";
          this.payMain = ""
        }
        this.submitForm.payType = data;
      },
      beforeUpload(flie, fileList) {
        this.fileList = fileList;
      },
      // 文件上传成功
      handlSuccess(res, file) {
        this.submitForm.payOrderList.push({
          annexId: res.annexId,
          annexName:res.annexName
        });
      },
      submitUpload() {
        if (this.fileList.length < 1) {
          this.$modal.msgError("请上传缴费凭证");
          return
        }
        this.submitForm.caseFlowId = this.formResPayDetail.caseFlowId;
        confirmPayDig(this.submitForm).then(res=>{
          this.$modal.msgSuccess("成功");
          this.payCancel()
          this.$emit("getList", this.queryParams);
        })
      },
      handleRemove(file, fileList) {
        (this.submitForm.payOrderList = []),
        fileList.forEach((item) => {
            this.submitForm.payOrderList.push({ annexId:item.response.data.annexId,annexName:item.response.data.annexName });
          });
      },
      handlePreview(file) {
      },
      // 生成二维码
      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.resPayForm.feePayable == 0 || !this.resPayForm.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.resPayForm.feePayable * 100,
          caseId: this.resPayForm.caseId,
          tradeType: "native",
          platform: payType,
        }).then((res) => {
          this.paySrc = res.data.code_url;
          this.qrcode(this.paySrc);
        });
      },
      payCancel() {
        this.$emit("paycancelRes");
        this.payMain = "";
      },
    },
    watch:{
      openResPay(val){
        if(val){
        this.submitForm.payOrderList = []
        this.paySelect = 1;
        this.fileList = [];
        this.filedata.id = this.resPayId;
        this.submitForm.caseId = this.resPayId;
        }
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .payType {
    height: 80px;
    line-height: 80px;
    display: flex;
  
    .icon-weixinzhifu {
      font-size: 24px;
      color: #27a56f;
      margin-right: 15px;
    }
  
    .icon-zhifubao {
      font-size: 24px;
      color: #1d76cc;
    }
  }
  
  .paySelectType {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .payupload {
    display: flex;
  
    .uploadBtn {}
  }
  
  .payImg {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .resPayTitle {
    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>