angelo
/
web-base-h5
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(pay/success): 支付成功页面参数处理

This commit is contained in:
woody 2025-07-07 14:39:17 +08:00
parent b97b5aecf5
commit fd50c66b45
3 changed files with 167 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config/request.js
View File

@ -19,7 +19,7 @@ module.exports = vm => {
//#ifdef DEV_SERVER
console.log('DEV_SERVER')
config.baseURL = 'https://t-app.beida666.com/prod-api'
config.baseURL = 'http://t-app.beida666.com/prod-api'
//#endif
//#ifdef QA_SERVER

8
pages/pay/index.vue
View File

@ -964,11 +964,11 @@ export default {
let url, obj
// 银行卡
if (this.isBank) {
if (this.isBank == 'hf') {
if (this.isBank == PAY_TYPE.HUI_FU_BANK_CARD) {
url = api.payConfirmHf
} else if (this.isBank == 'jd') {
} else if (this.isBank == PAY_TYPE.JING_DONG_BANK_CARD) {
url = api.payConfirmJd
} else if (this.isBank == 'tl') {
} else if (this.isBank == PAY_TYPE.TONG_LIAN_BANK_CARD) {
url = api.payConfirmTl
}
obj = {
@ -1218,7 +1218,7 @@ export default {
getPayAuthToken(payChannel) {
return new Promise((resolve, reject) => {
const extParam = {
source: !!this.isRecharge,
isRecharge: !!this.isRecharge,
orderCode: this.orderCode,
specialArea: this.specialArea,
}

165
pages/pay/success.vue
View File

@ -4,7 +4,7 @@
<view class="status-bar"></view>
<!-- 成功状态区域 -->
<view class="success-section">
<view v-show="payStatus === 1" class="success-section">
<view class="success-icon-wrapper">
<view class="success-icon">
<text class="success-checkmark">✓</text>
@ -17,11 +17,31 @@
</view>
<view class="success-title">{{ paySuccessText }}</view>
<view v-if="isRecharge === undefined" class="success-subtitle"
<view
v-if="isRecharge === undefined && payStatus === 1"
class="success-subtitle"
>您的订单已支付完成</view
>
</view>
<!-- 查询中状态区域 -->
<view v-show="payStatus === 0" class="loading-section">
<view class="loading-icon-wrapper">
<view class="loading-icon">
<view class="loading-spinner">
<view class="spinner-dot dot1"></view>
<view class="spinner-dot dot2"></view>
<view class="spinner-dot dot3"></view>
</view>
</view>
<view class="loading-rings">
<view class="loading-ring ring1"></view>
<view class="loading-ring ring2"></view>
</view>
</view>
<view class="loading-title">支付查询中...</view>
<view class="loading-subtitle">请稍等，正在确认您的支付状态</view>
</view>
<!-- 操作按钮区域 -->
<view class="action-section">
<view class="button-group">
@ -57,6 +77,7 @@ export default {
orderCode: '',
specialArea: null,
isRecharge: undefined,
payStatus: 0,
}
},
computed: {
@ -74,8 +95,9 @@ export default {
onLoad(options) {
// 获取传递的参数
const extParam = JSON.parse(atob(options.extParam || '{}'))
console.log(extParam, '..extParam')
this.specialArea = extParam.specialArea
this.isRecharge = extParam.source
this.isRecharge = extParam.isRecharge
this.orderCode = extParam.orderCode || ''
if (this.orderCode) {
setTimeout(() => {
@ -107,6 +129,7 @@ export default {
pollingPayStatus(orderCode) {
payStatus({ businessCode: orderCode }).then(res => {
if (res.data == 1) {
this.payStatus = 1
clearTimeout(paySetTimeoutFlag)
if ([1, 7, 24].includes(Number(this.specialArea))) {
uni.showLoading({
@ -322,6 +345,134 @@ export default {
}
}
.spinner-dot {
position: relative;
width: 12rpx;
height: 12rpx;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.3);
}
.spinner-dot.dot1 {
animation: dotBlink 1.4s ease-in-out infinite;
}
.spinner-dot.dot2 {
animation: dotBlink 1.4s ease-in-out 0.2s infinite;
}
.spinner-dot.dot3 {
animation: dotBlink 1.4s ease-in-out 0.4s infinite;
}
.loading-section {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60rpx 40rpx 40rpx;
position: relative;
}
.loading-icon-wrapper {
position: relative;
margin-bottom: 40rpx;
}
.loading-icon {
width: 120rpx;
height: 120rpx;
background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
box-shadow: 0 8rpx 32rpx rgba(0, 91, 172, 0.4);
}
.loading-spinner {
position: relative;
width: 80rpx;
height: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.loading-rings {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.loading-ring {
position: absolute;
border: 2rpx solid #005bac;
border-radius: 50%;
opacity: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loading-ring.ring1 {
width: 140rpx;
height: 140rpx;
animation: loadingRipple 2s ease-out infinite;
}
.loading-ring.ring2 {
width: 180rpx;
height: 180rpx;
animation: loadingRipple 2s ease-out 0.8s infinite;
}
.loading-title {
font-size: 48rpx;
font-weight: 600;
color: #2c3e50;
margin-bottom: 16rpx;
text-align: center;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}
.loading-subtitle {
font-size: 28rpx;
color: #7f8c8d;
text-align: center;
line-height: 1.4;
opacity: 0.9;
}
@keyframes dotBlink {
0% {
opacity: 0.4;
}
50% {
opacity: 1;
}
100% {
opacity: 0.4;
}
}
@keyframes loadingRipple {
0% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(0.1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1);
}
}
// 暗黑模式适配
@media (prefers-color-scheme: dark) {
.success-page {
@ -335,6 +486,14 @@ export default {
.success-subtitle {
color: #a0aec0;
}
.loading-title {
color: #ffffff;
}
.loading-subtitle {
color: #a0aec0;
}
}
// 适配不同屏幕尺寸