md
This commit is contained in:
linfso
parent
61ed03dbd0
commit
12ad242f63
@ -1,10 +1,36 @@
|
||||
<template>
|
||||
<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="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>
|
||||
<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;">
|
||||
@ -109,7 +135,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@ -118,16 +144,12 @@
|
||||
</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',
|
||||
// components: {OnlinePayQr,OnlinePayJsApi },
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
@ -137,11 +159,11 @@ export default {
|
||||
wxPayQrImageUrl:null,
|
||||
|
||||
isWx:false,
|
||||
payStatus:0,
|
||||
|
||||
loadingVisible: false,
|
||||
resultVisible: false,
|
||||
paymentSuccess: false,
|
||||
|
||||
errorMessage: '',
|
||||
wechatPaymentParams: null,
|
||||
// 表单参数
|
||||
@ -152,9 +174,11 @@ export default {
|
||||
created() {
|
||||
let code=this.$route.query.code;
|
||||
let state=this.$route.query.state;
|
||||
console.log("====>created==code=state=>",code,state);
|
||||
// console.log("====>created==code=state=>",code,state);
|
||||
if (code) {
|
||||
this.requestPayment(code,state);
|
||||
this.this.billNo=state;
|
||||
this.initPayOrder();
|
||||
}else{
|
||||
this.reset();
|
||||
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)
|
||||
.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();
|
||||
// console.log("===>this.settleBillItem==>",this.settleBillItem);
|
||||
} else {
|
||||
this.showPaymentResult(false, response.message || '获取账单失败');
|
||||
this.showPaymentResult(false, response.data.msg || '获取账单失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
this.loadingVisible = false;
|
||||
this.showPaymentResult(false, '网络错误，请稍后重试');
|
||||
console.error('获取账单失败:', error);
|
||||
// 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);
|
||||
});
|
||||
goToSapp(){
|
||||
let sappUrl="weixin://dl/business/?appid=wx52e07a62a2f80000&path=pages/post/post"
|
||||
window.location.href = sappUrl;
|
||||
|
||||
},
|
||||
handleWeixinPay(){
|
||||
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;
|
||||
},
|
||||
requestPayment(code,state) {
|
||||
@ -276,12 +286,9 @@ export default {
|
||||
settleBillNo: state
|
||||
})
|
||||
.then(response => {
|
||||
console.log("===>requestPayment==response=>",response);
|
||||
console.log("===>requestPayment==response.data=>",response.data);
|
||||
this.loadingVisible = false;
|
||||
if (response.data.code === 200) {
|
||||
this.wechatPaymentParams = response.data.data;
|
||||
console.log("===>wechatPaymentParams==wechatPaymentParams=>", this.wechatPaymentParams);
|
||||
this.invokeWechatPayment();
|
||||
} else {
|
||||
this.showPaymentResult(false, response.message || '获取支付参数失败');
|
||||
@ -330,11 +337,13 @@ export default {
|
||||
},
|
||||
verifyPaymentStatus() {
|
||||
this.loadingVisible = true;
|
||||
|
||||
// 调用后端API验证支付状态
|
||||
setTimeout(() => {
|
||||
// 实际项目中应该调用后端API验证支付状态
|
||||
// 这里使用模拟数据
|
||||
|
||||
// 调用接口查询是否成功
|
||||
|
||||
this.loadingVisible = false;
|
||||
this.showPaymentResult(true);
|
||||
}, 1500);
|
||||
@ -347,10 +356,9 @@ export default {
|
||||
handleResultAction() {
|
||||
this.resultVisible = false;
|
||||
if (this.paymentSuccess) {
|
||||
this.$router.push({ name: 'OrderSuccess', params: { orderId: this.orderInfo.orderId } });
|
||||
// this.$router.push({ name: 'OrderSuccess', params: { orderId: this.orderInfo.orderId } });
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生成微信授权URL
|
||||
* @param {string} redirectUri - 授权后重定向的URL
|
||||
@ -421,4 +429,43 @@ export default {
|
||||
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>
|
||||
Loading…
Reference in New Issue
Block a user