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

<template>
  <div>
    <el-dialog :title="payTitle" v-if="openPay" :visible="openPay" @close="payCancel" width="800px" append-to-body
      :destroy-on-close="true" center>
      <el-descriptions title="订单信息">
        <el-descriptions-item label="案件编号">{{
          formPayDetail.caseNum
        }}</el-descriptions-item>
        <el-descriptions-item label="申请人">{{
          formPayDetailAffiliate.applicationName || ''
        }}</el-descriptions-item>
        <!-- <el-descriptions-item label="案件标的">{{
          formPayDetail.caseSubjectAmount
        }}</el-descriptions-item> -->
        <el-descriptions-item label="申请人应缴费用">{{
          formPayDetail.feePayable
        }}</el-descriptions-item>
        <el-descriptions-item label="被申请人">{{
          formPayDetailAffiliate.respondentName
        }}</el-descriptions-item>
        <el-descriptions-item label="案件状态">
          <el-tag size="mini" type='danger' effect="dark">
            {{ formPayDetail.caseStatusName }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="驳回原因" v-if="formPayDetail.reason">
          <el-tag size="mini" type='danger' effect="dark">
            {{ formPayDetail.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="payTitle">{{ payMain }}</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="payCancel" round><span>取 消</span></el-button>
        <el-button @click="submitUpload" type="primary" :disabled="payFlagSubmit" 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: ["openPay", "payTitle", "formPayDetail", "payForm", "queryParams","payId","formPayDetailAffiliate"],
  data() {
    return {
      // key: value
      // 支付文字
      payMain: "",
      timer: null,
      paySelect: 1,//支付线上/线下
      fileList: [],
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      filedata: {
        annexType: 4,
      },
      submitForm:{
        payType:1,
        payOrderList:[],
        caseId:null
      },
      payFlagSubmit:true
    };
  },
  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
      });
      this.payFlagSubmit = false;
    },
    submitUpload() {
      if (this.fileList.length < 1) {
        this.$modal.msgError("请上传缴费凭证");
        return
      }
      this.submitForm.caseFlowId = this.formPayDetail.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.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 = "";
    },
  },
  watch:{
    openPay(val){
      if(val){
      this.submitForm.payOrderList = []
      this.paySelect = 1;
      this.fileList = [];
      this.filedata.id = this.payId;
      this.submitForm.caseId = this.payId;
      }
    }
  }
};
</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;
}

.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>