线上加载过慢问题
This commit is contained in:
hanchaobo
@@ -0,0 +1,259 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user