zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tijiao

Browse Source
This commit is contained in:
始于初见
2025-11-26 17:48:27 +08:00
parent 1244226bde
commit 862bb8e84e
2 changed files with 65 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/index.js
View File

@@ -19,8 +19,8 @@ const service = axios.create({
// baseURL: 'https://submission.tmrjournals.com/', //正式 记得切换 // baseURL: 'https://submission.tmrjournals.com/', //正式 记得切换
// baseURL: 'http://www.tougao.com/', //测试本地 记得切换 // baseURL: 'http://www.tougao.com/', //测试本地 记得切换
// baseURL: 'http://192.168.110.110/tougao/public/index.php/', // baseURL: 'http://192.168.110.110/tougao/public/index.php/',
// baseURL: '/api', //本地 baseURL: '/api', //本地
baseURL: '/', //正式 // baseURL: '/', //正式
}); });

105
src/components/page/components/pendingPayment/success.vue
View File

@@ -1,28 +1,42 @@
<template> <template>
<div class="success-box" v-if="articleInfo&&(articleInfo.state==0||articleInfo.state==1)"> <div class="success-box" v-if="articleInfo && (articleInfo.state == 0 || articleInfo.state == 1)">
<div :class="{'payment-success': articleInfo.state==1, 'payment-failed': articleInfo.state==0}"> <div :class="{ 'payment-success': articleInfo.state == 1, 'payment-failed': articleInfo.state == 0 }">
<div style="display: flex; align-items: center; margin-bottom: 10px"> <div style="display: flex; align-items: center; margin-bottom: 10px">
<h2 style="margin: 0 auto; display: flex; align-items: center"> <h2 style="margin: 0 auto; display: flex; align-items: center">
<img v-if="articleInfo.state==1" src="@/assets/img/success.png" alt="" style="margin-right: 20px; width: 128px; height: 128px" /> <img
<img v-if="articleInfo.state==0" src="@/assets/img/error.png" alt="" style="margin-right: 20px; width: 128px; height: 128px" /> v-if="articleInfo.state == 1"
{{ articleInfo.state==1 ? 'Payment Successful' : 'Payment Failed' }} src="@/assets/img/success.png"
</h2> alt=""
style="margin-right: 20px; width: 128px; height: 128px"
/>
<img
v-if="articleInfo.state == 0"
src="@/assets/img/error.png"
alt=""
style="margin-right: 20px; width: 128px; height: 128px"
/>
{{ articleInfo.state == 1 ? 'Payment Successful' : 'Payment Failed' }}
</h2>
</div> </div>
<p v-if="articleInfo.state==1">Thank you for your payment. Your order has been successfully processed.</p> <p v-if="articleInfo.state == 1">Thank you for your payment. Your order has been successfully processed.</p>
<p v-else>We are sorry, but your payment has failed. Please try again.</p> <p v-else>We are sorry, but your payment has failed. Please try again.</p>
<!-- <p> <!-- <p>
Article ID: Article ID:
<span style="color: #333; font-weight: 600"> {{ articleInfo.order_sn }}</span> <span style="color: #333; font-weight: 600"> {{ articleInfo.order_sn }}</span>
</p> --> </p> -->
<p v-if="articleInfo.state==1"> <p v-if="articleInfo.state == 1">
Total Amount: <span style="color: #ff5000"></span Total Amount: <span style="color: #ff5000"></span
><span style="color: #ff5000; font-size: 24px; line-height: 24px">{{ formatAmount(total) }} <span class="" style="font-size: 20px;">{{ articleInfo.paystation.currency }}</span></span> ><span style="color: #ff5000; font-size: 24px; line-height: 24px"
>{{ formatAmount(total) }} <span class="" style="font-size: 20px">{{ articleInfo.currency }}</span></span
>
</p> </p>
<!-- <p>Payment Method: {{ paymentMethod }}</p> --> <!-- <p>Payment Method: {{ paymentMethod }}</p> -->
<p v-if="articleInfo.state==1">You will receive an email confirmation shortly.</p> <p v-if="articleInfo.state == 1">You will receive an email confirmation shortly.</p>
<button @click="goBack" :class="articleInfo.state==1?'btn-success':'btn-danger'">Continue Operation</button> <button @click="goBack" :class="articleInfo.state == 1 ? 'btn-success' : 'btn-danger'">Continue Operation</button>
<p :style="articleInfo.state==1?'color:#67c23a':'color:#F56C6C'" style="font-size: 13px; line-height: 40px">Automatically jump after {{ hideSec }} seconds</p> <p :style="articleInfo.state == 1 ? 'color:#67c23a' : 'color:#F56C6C'" style="font-size: 13px; line-height: 40px">
Automatically jump after {{ hideSec }} seconds
</p>
</div> </div>
</div> </div>
</template> </template>
@@ -33,7 +47,7 @@ export default {
return { return {
alertShow: true, alertShow: true,
urlList: { urlList: {
detail: 'api/Preaccept/getPreacceptPayment', detail: 'api/Order/PaystationLookup',
createdOrder: 'api/Order/creatArticleOrder' createdOrder: 'api/Order/creatArticleOrder'
}, },
articleInfo: {}, articleInfo: {},
@@ -41,26 +55,25 @@ export default {
total: '', total: '',
articleId: this.$route.query.id, articleId: this.$route.query.id,
dingshi: null, dingshi: null,
hideSec: 5 hideSec: 10
}; };
}, },
created() { created() {
this.getDetail(); this.getDetail();
}, },
mounted() { mounted() {
this.hideAlert();
}, },
methods: { methods: {
hideAlert() { hideAlert() {
this.dingshi = setInterval(() => { this.dingshi = setInterval(() => {
this.hideSec -= 1; this.hideSec -= 1;
if (this.hideSec == 1) { if (this.hideSec == 1) {
this.goBack(); this.goBack();
return false return false;
} }
// console.log(this.hideSec) // console.log(this.hideSec)
}, 1000); }, 1000);
}, },
formatAmount(amount) { formatAmount(amount) {
@@ -80,15 +93,24 @@ export default {
.then((res) => { .then((res) => {
console.log('res at line 191:', res); console.log('res at line 191:', res);
if (res.code == 0) { if (res.code == 0) {
this.hideAlert();
setTimeout(() => { setTimeout(() => {
if (res.data.result == 'success') {
this.articleInfo = res.data.paystation;
this.articleInfo.state = 1;
this.total = Number(this.articleInfo.amount / 100);
} else if (res.data.result == 'fail') {
this.articleInfo.state = 0;
this.$forceUpdate();
}
loading.close(); loading.close();
this.articleInfo = res.data.order;
this.total = Number(res.data.order.paystation.amount / 100);
}, 1000); }, 1000);
} else {
loading.close();
this.$message.error(res.msg);
} }
}).catch(() => { })
.catch(() => {
loading.close(); loading.close();
}); });
}, },
@@ -112,9 +134,9 @@ export default {
this.$router.replace({ name: 'success' }); this.$router.replace({ name: 'success' });
this.$router.push({ this.$router.push({
path: '/PreIngested', path: '/PreIngested',
query:{ query: {
id: id id: id
} }
}); });
// } // }
// //
@@ -144,7 +166,7 @@ export default {
background-color: #fff; background-color: #fff;
border: 1px solid #fcc3c3; border: 1px solid #fcc3c3;
border-radius: 16px; border-radius: 16px;
color: #F56C6C; color: #f56c6c;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
width: 600px; width: 600px;
} }
@@ -159,7 +181,7 @@ p {
button { button {
padding: 10px 20px; padding: 10px 20px;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
@@ -167,20 +189,19 @@ button {
margin-top: 20px; margin-top: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 按钮添加阴影效果 */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 按钮添加阴影效果 */
} }
.btn-success{ .btn-success {
background-color: #00c286; background-color: #00c286;
} }
.btn-danger{ .btn-danger {
background-color: #F56C6C; background-color: #f56c6c;
} }
.btn-success:hover{ .btn-success:hover {
background-color: #00c286; background-color: #00c286;
} }
.btn-danger:hover{ .btn-danger:hover {
background-color: #F56C6C; background-color: #f56c6c;
} }
button:hover { button:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 按钮悬停时的阴影效果 */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 按钮悬停时的阴影效果 */
} }
.success-box { .success-box {