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 13:38:19 +08:00
parent 61ed03dbd0
commit 12ad242f63
1 changed files with 85 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,36 @@
<template> <template>
<div class="wechat-payment-container" style="background: #fff;padding: 1rem;"> <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 v-if="!isWx">请在微信浏览器中打开此页面进行支付</div> -->
<!-- <div v-if="resultVisible&&!paymentSuccess">{{ errorMessage }}</div> -->
<div v-if="resultVisible" >
<!-- 失败状态提示 -->
<div v-if="resultVisible&&!paymentSuccess" class="text-center" >
<i class="el-icon-circle-check"></i>
<h1 style="font-size: 24px; color: #303133; margin-bottom: 10px;">支付失败</h1>
<p style="color: #606266; margin-bottom: 30px;">{{ errorMessage }}</p>
</div>
<div v-if="paymentSuccess" class="text-center">
<i class="el-icon-circle-check success-icon"></i>
<h1 style="font-size: 24px; color: #303133; margin-bottom: 10px;">支付成功</h1>
<p style="color: #606266; margin-bottom: 30px;">感谢您的支持，我们将竭诚为您服务</p>
</div>
<!-- 操作按钮 -->
<div class="action-buttons">
<el-button type="primary" @click="goToSapp">
确认
</el-button>
</div>
<!-- 辅助信息 -->
<div style="text-align: center; color: #909399; margin-top: 40px; font-size: 14px;">
<p>如有问题，请联系客服</p>
<p style="margin-top: 5px;">客服电话: 400-025-7080</p>
</div>
</div>
<div v-if="resultVisible">{{ errorMessage }}</div>
<div> <div>
<el-form id="payPage" v-if="settleBillItem!=null" 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-row :gutter="0" style="display: flex;flex-wrap: wrap;">
@ -109,7 +135,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<div style="margin-bottom: 20px;"> <div v-if="settleBillItem!=null&&payStatus==0" style="margin-bottom: 20px;">
<el-button type="primary" style="width: 100%;" @click="handleWeixinPay" >确认付款</el-button> <el-button type="primary" style="width: 100%;" @click="handleWeixinPay" >确认付款</el-button>
</div> </div>
</div> </div>
@ -118,16 +144,12 @@
</template> </template>
<script> <script>
// import OnlinePayQr from '@/views/openpage/onlinePayQr.vue';
// import OnlinePayJsApi from '@/views/openpage/onlinePayJsApi.vue';
import axios from 'axios' import axios from 'axios'
import shortLogoImg from '@/assets/logo/short_logo.png' import shortLogoImg from '@/assets/logo/short_logo.png'
import { parseTime } from "@/utils/custom"; import { parseTime } from "@/utils/custom";
export default { export default {
name: 'OnlinePay', name: 'OnlinePay',
// components: {OnlinePayQr,OnlinePayJsApi },
components: {}, components: {},
data() { data() {
return { return {
@ -137,11 +159,11 @@ export default {
wxPayQrImageUrl:null, wxPayQrImageUrl:null,
isWx:false, isWx:false,
payStatus:0,
loadingVisible: false, loadingVisible: false,
resultVisible: false, resultVisible: false,
paymentSuccess: false, paymentSuccess: false,
errorMessage: '', errorMessage: '',
wechatPaymentParams: null, wechatPaymentParams: null,
// 表单参数 // 表单参数
@ -152,9 +174,11 @@ export default {
created() { created() {
let code=this.$route.query.code; let code=this.$route.query.code;
let state=this.$route.query.state; let state=this.$route.query.state;
console.log("====>created==code=state=>",code,state); // console.log("====>created==code=state=>",code,state);
if (code) { if (code) {
this.requestPayment(code,state); this.requestPayment(code,state);
this.this.billNo=state;
this.initPayOrder();
}else{ }else{
this.reset(); this.reset();
const ua = window.navigator.userAgent.toLowerCase(); const ua = window.navigator.userAgent.toLowerCase();
@ -230,41 +254,27 @@ export default {
axios.get(process.env.VUE_APP_BASE_API+'/oms2c/common/getBillPayInfo?settleBillNo='+this.billNo) axios.get(process.env.VUE_APP_BASE_API+'/oms2c/common/getBillPayInfo?settleBillNo='+this.billNo)
.then(response => { .then(response => {
this.loadingVisible = false; this.loadingVisible = false;
console.log("===>response==>",response);
if (response.data.code === 200) { if (response.data.code === 200) {
this.settleBillItem = response.data.data; this.settleBillItem = response.data.data;
console.log("===>this.settleBillItem==>",this.settleBillItem); // console.log("===>this.settleBillItem==>",this.settleBillItem);
// this.invokeWechatPayment();
} else { } else {
this.showPaymentResult(false, response.message || '获取账单失败'); this.showPaymentResult(false, response.data.msg || '获取账单失败');
} }
}) })
.catch(error => { .catch(error => {
this.loadingVisible = false; this.loadingVisible = false;
this.showPaymentResult(false, '网络错误，请稍后重试'); this.showPaymentResult(false, '网络错误，请稍后重试');
console.error('获取账单失败:', error); // console.error('获取账单失败:', error);
}); });
}, },
initQrUrl(){ goToSapp(){
this.wxPayQrImageUrl = response.data; let sappUrl="weixin://dl/business/?appid=wx52e07a62a2f80000&path=pages/post/post"
axios.get(process.env.VUE_APP_BASE_API+'/oms2c/common/getBillPayInfo?settleBillNo='+this.billNo) window.location.href = sappUrl;
.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(){ handleWeixinPay(){
this.billNo = this.$route.query.bid; this.billNo = this.$route.query.bid;
const authUrl = this.generateAuthUrl("https://oms.tanex56.com/onlinePay","snsapi_base",this.billNo); const authUrl = this.generateAuthUrl("https://oms.tanex56.com/onlinePay/","snsapi_base",this.billNo);
window.location.href = authUrl; window.location.href = authUrl;
}, },
requestPayment(code,state) { requestPayment(code,state) {
@ -276,12 +286,9 @@ export default {
settleBillNo: state settleBillNo: state
}) })
.then(response => { .then(response => {
console.log("===>requestPayment==response=>",response);
console.log("===>requestPayment==response.data=>",response.data);
this.loadingVisible = false; this.loadingVisible = false;
if (response.data.code === 200) { if (response.data.code === 200) {
this.wechatPaymentParams = response.data.data; this.wechatPaymentParams = response.data.data;
console.log("===>wechatPaymentParams==wechatPaymentParams=>", this.wechatPaymentParams);
this.invokeWechatPayment(); this.invokeWechatPayment();
} else { } else {
this.showPaymentResult(false, response.message || '获取支付参数失败'); this.showPaymentResult(false, response.message || '获取支付参数失败');
@ -330,11 +337,13 @@ export default {
}, },
verifyPaymentStatus() { verifyPaymentStatus() {
this.loadingVisible = true; this.loadingVisible = true;
// 调用后端API验证支付状态 // 调用后端API验证支付状态
setTimeout(() => { setTimeout(() => {
// 实际项目中应该调用后端API验证支付状态 // 实际项目中应该调用后端API验证支付状态
// 这里使用模拟数据 // 这里使用模拟数据
// 调用接口查询是否成功
this.loadingVisible = false; this.loadingVisible = false;
this.showPaymentResult(true); this.showPaymentResult(true);
}, 1500); }, 1500);
@ -347,10 +356,9 @@ export default {
handleResultAction() { handleResultAction() {
this.resultVisible = false; this.resultVisible = false;
if (this.paymentSuccess) { if (this.paymentSuccess) {
this.$router.push({ name: 'OrderSuccess', params: { orderId: this.orderInfo.orderId } }); // this.$router.push({ name: 'OrderSuccess', params: { orderId: this.orderInfo.orderId } });
} }
}, },
/** /**
* 生成微信授权URL * 生成微信授权URL
* @param {string} redirectUri - 授权后重定向的URL * @param {string} redirectUri - 授权后重定向的URL
@ -421,4 +429,43 @@ export default {
color: #2e2f33; color: #2e2f33;
} }
.success-container {
max-width: 600px;
margin: 100px auto;
padding: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-radius: 8px;
}
.success-icon {
font-size: 64px;
color: #67c23a;
margin-bottom: 20px;
}
.order-info {
margin: 20px 0;
padding: 15px;
background-color: #f5f7fa;
border-radius: 4px;
}
.action-buttons {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 30px;
}
@media (max-width: 576px) {
.success-container {
margin: 30px 20px;
padding: 20px;
}
.action-buttons {
flex-direction: column;
gap: 10px;
}
.action-buttons .el-button {
width: 100%;
}
}
</style> </style>