aike/emis-oms-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

md

Browse Source
This commit is contained in:
linfso 2025-06-20 08:32:18 +08:00
parent 14589b96b5
commit d60c5f431a
2 changed files with 280 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

269
src/views/openpage/onlinePay.vue
View File

@ -1,15 +1,127 @@
<template>
<div class="wechat-payment-container">
<div class="wechat-payment-container" style="background: #fff;padding: 1rem;">
<!-- <OnlinePayJsApi v-if="isWx"></OnlinePayJsApi> -->
<!-- <OnlinePayQr v-else></OnlinePayQr> -->
<div v-if="!isWx">请在微信浏览器中打开此页面进行支付</div>
<div >
<el-form id="payPage" v-if="settleBillItem!=null" ref="form" :model="form" size="mini" label-width="80px">
<el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
<el-col :span="24">
<div style="text-align:center">
<div style="display: inline-flex;" >
<span><img :src="shortLogo" style="width: 30px;height: 30px;margin-top: 0px;" /></span>
<span style="font-size: 20px;font-weight: bold;color: black;">探路供应链（江苏）有限公司</span>
</div>
<!-- <div v-if="!isWx" style="width:150px;margin: 0 auto;">
<img :src="wxPayQrImageUrl" width="100%" draggable="false"/>
</div>
<div v-if="!isWx" class="pay-title"><span style="color: black;font-size: 20px;">￥{{ settleBillItem.thisPayMoney }} </span></div>
<div v-if="!isWx" style="text-align: center;" >
<div>请使用微信[<span style="color:black;font-weight: bold;">24小时</span>]内完成支付</div>
</div> -->
</div>
</el-col>
<el-col :span="24">
<el-row :gutter="0" style="display: flex;flex-wrap: wrap;margin-top:10px">
<el-col :span="24">
<span class="item-label">账单编号:</span>
<span class="item-value" style="font-size:14px;font-weight: bold;">{{ settleBillItem.settleBillNo }}</span>
</el-col>
<!-- <el-col :span="12">
<span class="item-label">账单名称:</span><span class="item-value">{{ settleBillItem.settleBillName }}</span>
</el-col> -->
<el-col :span="24">
<span class="item-label">账单日期:</span><span class="item-value">{{ settleBillItem.createTime }}</span>
</el-col>
<el-col :span="12">
<span class="item-label">总票数:</span><span class="item-value">{{ settleBillItem.sendPieceSum }}</span>
</el-col>
<el-col :span="12">
<span class="item-label">总件数:</span><span class="item-value">{{ settleBillItem.pieceNumber }}</span>
</el-col>
<el-col :span="12">
<span class="item-label">结算重量:</span><span class="item-value">{{ settleBillItem.feeWeight }}KG</span>
</el-col>
<el-col :span="24">
<span class="item-label">应付金额:</span><span class="item-value">￥{{ settleBillItem.recMoney }}</span>
</el-col>
<el-col :span="12">
<span class="item-label">开票状态:</span>
<span class="item-value">
<span type="info" v-if="settleBillItem.openBillStatus==0">未开票</span>
<span type="info" v-if="settleBillItem.openBillStatus==1">已开票</span>
<span type="info" v-if="settleBillItem.openBillStatus==2">部分开票</span>
<span type="info" v-if="settleBillItem.openBillStatus==3">不开票</span>
<span type="info" v-if="settleBillItem.openBillStatus==4">已完成</span>
</span>
</el-col>
<!-- <el-col :span="12">
</el-col> -->
<el-col :span="12">
<span class="item-label">已付金额:</span><span class="item-value">￥{{ settleBillItem.recedMoney }}</span>
</el-col>
</el-row>
</el-col>
<el-col :span="24" v-for="item in settleBillItem.subBillList" :key="item.id">
<el-row :gutter="0" style="display: flex;flex-wrap: wrap;margin-top:10px">
<el-col :span="12">
<span class="item-label">运单号:</span><span class="item-value" style="font-size:14px;font-weight: bold;">{{ item.billCode }}</span>
</el-col>
<el-col :span="12">
<span class="item-label">寄件日期:</span><span class="item-value">{{ parseTime(item.waybillDetail.sendDate, '{y}-{m}-{d}') }}</span>
</el-col>
<el-col :span="12">
<span class="item-label">发件人:</span><span class="item-value">{{ item.waybillDetail.sendName }}</span>
</el-col>
<el-col :span="12">
<span class="item-label">快件类型:</span><span class="item-value">{{ item.waybillDetail.sendSiteName }}--{{ item.waybillDetail.dispatchUnderlingSiteName }}</span>
</el-col>
<el-col :span="12">
<span class="item-label">总运费:</span><span class="item-value">{{ item.waybillDetail.freight }} CNY</span>
</el-col>
<el-col :span="12" v-for="feeItem in item.feeitemList" :key="feeItem.id">
<span class="item-label">{{ feeItem.feeName }}:</span><span class="item-value">{{ feeItem.billFee }}{{feeItem.currency}}</span>
</el-col>
<el-col :span="12">
<span class="item-label">件数:</span><span class="item-value">{{ item.waybillDetail.parcelQty }}</span>
</el-col>
<el-col :span="12">
<span class="item-label">实际重量:</span><span class="item-value">{{ item.waybillDetail.billWeight }}KG</span>
</el-col>
<el-col :span="12">
<span class="item-label">产品类型:</span><span class="item-value">{{ item.waybillDetail.productTypeName }}</span>
</el-col>
<el-col :span="12">
<span class="item-label">寄件公司:</span><span class="item-value">{{ item.waybillDetail.sendCompany }}</span>
</el-col>
<el-col :span="24">
<span class="item-label">备注:</span><span class="item-value">{{ item.waybillDetail.remark }} {{ item.waybillDetail.feeRemark }}</span>
</el-col>
</el-row>
</el-col>
</el-row>
</el-form>
<div style="margin-bottom: 20px;">
<el-button type="primary" style="width: 100%;" @click="handleWeixinPay" >确认付款</el-button>
</div>
</div>
</div>
</template>
<script>
// import OnlinePayQr from '@/views/openpage/onlinePayQr.vue';
// import OnlinePayJsApi from '@/views/openpage/onlinePayJsApi.vue';
import axios from 'axios'
import shortLogoImg from '@/assets/logo/short_logo.png'
import { parseTime } from "@/utils/custom";
export default {
name: 'OnlinePay',
@ -17,16 +129,127 @@ export default {
components: {},
data() {
return {
shortLogo: shortLogoImg,
settleBillItem:null,
billNo:null,
wxPayQrImageUrl:null,
isWx:false,
loadingVisible: false,
resultVisible: false,
paymentSuccess: false,
errorMessage: '',
wechatPaymentParams: null
wechatPaymentParams: null,
// 表单参数
form: {},
};
},
created() {
this.reset();
this.initPayOrder();
},
methods: {
// 表单重置
reset() {
this.form = {
payScope:null,
params:{
billCodeStr:null,
},
payRelList:[],
id: null,
payId: null,
payType: null,
recType: null,
payMan: null,
payManCode: null,
settleBillNo: this.settleBillNo,
blAudit: null,
auditDate: null,
auditManCode: null,
auditSiteCode: null,
customerCode: null,
customerName: null,
payMoney: null,
payStatus: null,
payStatusDesc: null,
breakType: null,
breakReason: null,
breakEmpCode: null,
recManCode: null,
settleType: this.settleType,
refundDate: null,
refundManCode: null,
refundSeq: null,
refundMode: null,
refundMoney: null,
refundReason: null,
refundRemark: null,
refundOpManCode: null,
refundRegisterSiteCode: null,
refundRegisterManCode: null,
satisfyMoney: null,
satisfyReason: null,
allowanceMoney: null,
allowanceReason: null,
deductionMoney: null,
deductionReason: null,
otherMoney: null,
otherReason: null,
tradeDate: null,
remark: null,
delFlag: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
createSite: null,
updateSite: null
};
this.resetForm("form");
},
initPayOrder(){
this.billNo = this.$route.query.bid;
axios.get(process.env.VUE_APP_BASE_API+'/oms2c/common/getBillPayInfo?settleBillNo='+this.billNo)
.then(response => {
this.loadingVisible = false;
console.log("===>response==>",response);
if (response.data.code === 200) {
this.settleBillItem = response.data.data;
console.log("===>this.settleBillItem==>",this.settleBillItem);
// this.invokeWechatPayment();
} else {
this.showPaymentResult(false, response.message || '获取账单失败');
}
})
.catch(error => {
this.loadingVisible = false;
this.showPaymentResult(false, '网络错误，请稍后重试');
console.error('获取账单失败:', error);
});
},
initQrUrl(){
this.wxPayQrImageUrl = response.data;
axios.get(process.env.VUE_APP_BASE_API+'/oms2c/common/getBillPayInfo?settleBillNo='+this.billNo)
.then(response => {
this.loadingVisible = false;
console.log("===>response==>",response);
if (response.data.code === 200) {
this.settleBillItem = response.data.data;
} else {
this.showPaymentResult(false, response.message || '获取账单失败');
}
})
.catch(error => {
this.loadingVisible = false;
console.error('获取QR失败:', error);
});
},
handleWeixinPay(){
const ua = window.navigator.userAgent.toLowerCase();
if (!ua.match(/MicroMessenger/i)) {
this.isWx=false;
@ -34,7 +257,6 @@ export default {
const params = new URLSearchParams(window.location.search);
let code=params.get('code');
let state=params.get('code');
// 如果是微信回调，拉起微信支付
if (code) {
this.requestPayment(code,state);
@ -46,18 +268,17 @@ export default {
}
}
},
methods: {
requestPayment(code,state) {
this.loadingVisible = true;
// 调用后端API获取微信支付参数
this.$axios.post('/oms2c/common/sumbitWxPayByCode', {
axios.post(process.env.VUE_APP_BASE_API+'/oms2c/common/sumbitWxPayByCode', {
code: code,
state: state
})
.then(response => {
this.loadingVisible = false;
if (response.data.code === 200) {
this.wechatPaymentParams = response.data;
this.wechatPaymentParams = response.data.data;
this.invokeWechatPayment();
} else {
this.showPaymentResult(false, response.data.message || '获取支付参数失败');
@ -161,4 +382,40 @@ export default {
.wechat-payment-container {
padding-bottom: 80px;
}
.pay-dialog-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.pay-title {
font-size: 18px;
font-weight: 500;
color: #2e2f33;
text-align: center;
}
.pay-count{
color: #2962ff;
}
.item-label{
font-size: 12px;
color: #2e2f33;
}
.item-value{
font-size: 12px;
font-weight: 500;
color: #2e2f33;
}
</style>

3
src/views/openpage/onlinePayQr.vue
View File

@ -1,8 +1,7 @@
<template>
<div style="overflow: auto;">
123213
<!-- v-if="settleBillItem!=null" -->
<el-form id="payPage" ref="form" :model="form" size="mini" label-width="80px">
<el-form id="payPage" v-if="settleBillItem!=null" ref="form" :model="form" size="mini" label-width="80px">
<el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
<el-col :span="24">
<div style="text-align:center">