master
lion 4 months ago
parent 81b078d9cd
commit fb6607df7b

@ -51,7 +51,11 @@ const install = (Vue, vm) => {
}
} else if (res.data.errcode === 10002) {
// 订单待审核错误不显示toast让业务代码处理
return false
// uni.showToast({
// icon: "none",
// title: res.data.errmsg
// })
return res.data
} else {
uni.showToast({
icon: "none",

@ -121,13 +121,14 @@
<view class="qr-code">
<!-- 支付二维码 -->
<view v-if="myQrcode" style="border: 1px solid #ccc; padding: 10rpx;">
<view v-if="myQrcode" style="border: 1px solid #ccc; padding: 10rpx; position: relative;">
<!-- 显示图片可长按识别 -->
<image
v-if="qrcodeImagePath"
:src="qrcodeImagePath"
mode="aspectFit"
show-menu-by-longpress
:class="{ 'qrcode-disabled': qrcodeExpired }"
style="width: 400rpx; height: 400rpx; display: block; margin: 0 auto;"
></image>
<!-- Canvas 绘制使用 hide 属性隐藏但保持可渲染 -->
@ -145,6 +146,12 @@
}"
@complete="onQrcodeComplete"
></uqrcode>
<!-- 二维码失效遮罩层 -->
<view v-if="qrcodeExpired" class="qrcode-overlay" @click="regetQrcode">
<view class="reget-btn">
<text>重新获取</text>
</view>
</view>
</view>
<view v-else style="text-align: center; color: #999; padding: 40rpx;">
正在生成二维码...
@ -203,15 +210,17 @@
type="primary"
shape="circle"
@click="scrollToPayQr"
:disabled="payCooldownSeconds > 0"
class="pay-btn-large"
:custom-style="{
width: '100%',
height: '88rpx',
fontSize: '32rpx',
fontWeight: '500'
fontWeight: '500',
opacity: payCooldownSeconds > 0 ? 0.6 : 1
}"
>
立即支付
{{ payCooldownSeconds > 0 ? `支付成功,${payCooldownSeconds}秒后可再次支付` : '立即支付' }}
</u-button>
</view>
</view>
@ -231,6 +240,7 @@
return {
myQrcode: '',
qrcodeImagePath: '', //
qrcodeExpired: false, //
imgs: [],
orderId: '',
orderInfo: {},
@ -244,6 +254,9 @@
payTimer: null, //
isFromShare: false,
activeTab: 'qrcode', // tab: 'qrcode' 'pay'
paySuccessTime: null, //
payCooldownSeconds: 0, //
payCooldownTimer: null, //
}
},
onLoad(options) {
@ -266,6 +279,9 @@
//
this.stopPayCheck()
//
this.stopPayCooldown()
//
this.clearShareCache()
},
@ -357,6 +373,7 @@
this.stopPayCheck()
this.myQrcode = ''
this.qrcodeImagePath = ''
this.qrcodeExpired = false
return
}
// tab
@ -372,7 +389,17 @@
const res = await this.$u.api.accompanyPay({
no: no
})
if(res.errcode && res.errcode===10002){
//
this.qrcodeExpired = true
uni.showToast({
title: res.errmsg,
icon: 'none'
});
return;
}
//
this.qrcodeExpired = false
const result = res.result || res
if (result && result.code_url) {
this.myQrcode = result.code_url
@ -395,6 +422,12 @@
})
}
},
//
regetQrcode() {
if (this.orderInfo && this.orderInfo.no) {
this.getCode(this.orderInfo.no)
}
},
//
onQrcodeComplete(e) {
//
@ -428,6 +461,34 @@
this.payTimer = null
}
},
// 30
startPayCooldown() {
//
this.stopPayCooldown()
// 30
this.payCooldownSeconds = 30
this.paySuccessTime = Date.now()
//
this.payCooldownTimer = setInterval(() => {
this.payCooldownSeconds--
if (this.payCooldownSeconds <= 0) {
//
this.stopPayCooldown()
}
}, 1000) //
},
//
stopPayCooldown() {
if (this.payCooldownTimer) {
clearInterval(this.payCooldownTimer)
this.payCooldownTimer = null
}
this.payCooldownSeconds = 0
this.paySuccessTime = null
},
//
startPayCheck() {
//
@ -483,6 +544,7 @@
this.myQrcode = ''
this.qrcodeImagePath = ''
this.qrcodeExpired = false
//
this.getOrderDetailStaff(this.orderId)
},
@ -573,14 +635,30 @@
// qrcode tab
},
scrollToPayQr: async function() {
//
if (this.payCooldownSeconds > 0) {
uni.showToast({
title: `支付成功后${this.payCooldownSeconds}秒内不能重复支付`,
icon: 'none',
duration: 2000
})
return
}
// no
await this.getOrderDetailStaff(this.orderId)
try {
// 1. 使 no
const res = await this.$u.api.accompanyOrderPayParams({ no: this.orderInfo.no });
console.log("获取支付参数:",res)
console.log("获取支付参数:", res,res.errcode && res.errcode===10002);
if(res.errcode && res.errcode===10002){
uni.showToast({
title: res.errmsg,
icon: 'none'
});
return;
}
// config
const payConfig = res.config || res;
@ -596,6 +674,8 @@
uni.showToast({ title: '支付成功', icon: 'success' });
//
this.getOrderDetailStaff(this.orderId || this.orderInfo.id);
// 30
this.startPayCooldown();
},
fail: (err) => {
if (err.errMsg && err.errMsg.indexOf('cancel') > -1) {
@ -780,6 +860,38 @@
image {
width: 100%;
height: 100%;
&.qrcode-disabled {
filter: grayscale(100%);
opacity: 0.5;
}
}
.qrcode-overlay {
position: absolute;
top: 10rpx;
left: 10rpx;
right: 10rpx;
bottom: 10rpx;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
border-radius: 8rpx;
.reget-btn {
background: #1479ff;
color: #fff;
padding: 20rpx 40rpx;
border-radius: 40rpx;
font-size: 28rpx;
font-weight: 500;
cursor: pointer;
&:active {
opacity: 0.8;
}
}
}
}

@ -239,13 +239,14 @@
<view class="tab-content">
<!-- 付款二维码 Tab -->
<view v-if="activeTab === 'qrcode'" class="tab-panel">
<view class="qrcode-wrapper">
<view class="qrcode-wrapper" style="position: relative;">
<!-- 显示图片可长按识别 -->
<image
v-if="qrcodeImagePath"
:src="qrcodeImagePath"
mode="aspectFit"
show-menu-by-longpress
:class="{ 'qrcode-disabled': qrcodeExpired }"
style="width: 400rpx; height: 400rpx; display: block; margin: 0 auto;"
></image>
<!-- Canvas 绘制使用 hide 属性隐藏但保持可渲染 -->
@ -271,6 +272,12 @@
<view v-else style="text-align: center; color: #999; padding: 40rpx;">
正在生成二维码...
</view>
<!-- 二维码失效遮罩层 -->
<view v-if="qrcodeExpired && (qrcodeImagePath || payQrCode)" class="qrcode-overlay" @click="regetQrcode">
<view class="reget-btn">
<text>重新获取</text>
</view>
</view>
</view>
<view class="qrcode-tip">请使用微信扫码支付</view>
</view>
@ -282,15 +289,17 @@
type="primary"
shape="circle"
@click="scrollToPayQr"
:disabled="payCooldownSeconds > 0"
class="pay-btn-large"
:custom-style="{
width: '100%',
height: '88rpx',
fontSize: '32rpx',
fontWeight: '500'
fontWeight: '500',
opacity: payCooldownSeconds > 0 ? 0.6 : 1
}"
>
立即支付
{{ payCooldownSeconds > 0 ? `支付成功,${payCooldownSeconds}秒后可再次支付` : '立即支付' }}
</u-button>
</view>
</view>
@ -759,11 +768,15 @@
isShowPayPopup: false,
payQrCode: '', //
qrcodeImagePath: '', //
qrcodeExpired: false, //
payTimer: null, //
showPriceEdit: false,
editPrice: '',
showPayQrCode: false,
activeTab: 'qrcode', // tab: 'qrcode' 'pay'
paySuccessTime: null, //
payCooldownSeconds: 0, //
payCooldownTimer: null, //
};
},
onReady() {
@ -790,11 +803,12 @@
this.getList(option.type, option.site_id);
this.getHospital(option.site_id);
//
this.showPayQrCode = false;
this.payQrCode = '';
this.qrcodeImagePath = '';
this.activeTab = 'qrcode'; // tab
//
this.showPayQrCode = false;
this.payQrCode = '';
this.qrcodeImagePath = '';
this.qrcodeExpired = false;
this.activeTab = 'qrcode'; // tab
},
onUnload() {
//
@ -802,6 +816,8 @@
clearInterval(this.payTimer)
this.payTimer = null
}
//
this.stopPayCooldown()
},
methods: {
//
@ -819,16 +835,33 @@
},
async getDetail(id) {
console.log(id, this.orderId);
//
const wasShowingQrCode = this.showPayQrCode
const wasPayStatus = this.form.pay_status
const isQrcodeTab = this.activeTab === 'qrcode'
await this.$u.api
.accompanyOrderDetail({
id: id || this.orderId,
})
.then((res) => {
// pay_status
const realPayStatus = res.pay_status
for (const key in this.form) {
if (res.hasOwnProperty(key)) {
this.form[key] = res[key];
}
}
// tab
if (isQrcodeTab) {
this.showPayQrCode = true
this.form.pay_status = 1
} else if (wasShowingQrCode || wasPayStatus === 1) {
//
this.showPayQrCode = true
this.form.pay_status = 1
}
//
if (!this.form.quantity) {
this.form.quantity = 1;
@ -1045,13 +1078,25 @@
},
async payOrder(re) {
try {
const {
result
} = await this.$u.api.accompanyPay({
const res = await this.$u.api.accompanyPay({
no: re.no,
});
})
console.log("获取支付参数:", res,res.errcode && res.errcode===10002);
if(res.errcode && res.errcode===10002){
//
this.showPayQrCode = true
this.form.pay_status = 1
//
this.qrcodeExpired = true
uni.showToast({
title: res.errmsg,
icon: 'none'
});
return;
}
//
this.qrcodeExpired = false
const result = res.result
//
this.form.pay_status = 1
this.form.no = re.no
@ -1086,8 +1131,10 @@
// loading
uni.hideLoading()
//
this.startPayCheck()
// tab
if (this.activeTab === 'qrcode') {
this.startPayCheck()
}
} catch (err) {
console.log('支付错误:', err);
@ -1121,28 +1168,71 @@
}
},
//
stopPayCheck() {
if (this.payTimer) {
clearInterval(this.payTimer)
this.payTimer = null
}
},
//
startPayCheck() {
//
this.stopPayCheck()
// pay_status === 2 tab
// pay_status === 0 pay_status === 1
if (this.form.pay_status === 2 || this.activeTab !== 'qrcode') {
return
}
this.payTimer = setInterval(async () => {
// tab
if (this.activeTab !== 'qrcode' || this.form.pay_status === 2) {
this.stopPayCheck()
return
}
try {
const res = await this.$u.api.accompanyOrderDetail({
id: this.orderId
})
// pay_status === 1
if (res.pay_status === 1) {
clearInterval(this.payTimer)
this.payTimer = null
//
this.stopPayCheck()
//
this.showPayQrCode = false
this.payQrCode = ''
this.qrcodeImagePath = ''
this.qrcodeExpired = false
this.form.pay_status = 2
//
await this.getDetail(this.orderId)
uni.showToast({
title: '支付成功',
icon: 'success'
icon: 'success',
duration: 1500
})
// toast
setTimeout(() => {
uni.redirectTo({
url: `/package_sub/order/orderStaffDetail?id=${this.orderId}`
})
}, 1500)
} else if (res.pay_status === 0) {
// tab
// form.pay_status
// pay_status
this.showPayQrCode = true
// form.pay_status 1 0
}
// pay_status === 2
} catch (err) {
console.error('检查支付状态失败', err)
}
@ -1154,6 +1244,42 @@
if (this.payTimer) {
clearInterval(this.payTimer)
}
//
this.stopPayCooldown()
},
//
regetQrcode() {
if (this.form && this.form.no) {
this.payOrder({ no: this.form.no, time: this.form.created_at })
}
},
// 30
startPayCooldown() {
//
this.stopPayCooldown()
// 30
this.payCooldownSeconds = 30
this.paySuccessTime = Date.now()
//
this.payCooldownTimer = setInterval(() => {
this.payCooldownSeconds--
if (this.payCooldownSeconds <= 0) {
//
this.stopPayCooldown()
}
}, 1000) //
},
//
stopPayCooldown() {
if (this.payCooldownTimer) {
clearInterval(this.payCooldownTimer)
this.payCooldownTimer = null
}
this.payCooldownSeconds = 0
this.paySuccessTime = null
},
//
@ -1283,67 +1409,54 @@
// Tab
async switchTab(tab) {
// tab
if (this.activeTab === tab) {
return
}
// tab
const previousTab = this.activeTab
this.activeTab = tab
// tab
// tab
if (tab !== 'qrcode') {
this.stopPayCheck()
}
// tab
if (tab === 'qrcode') {
// URL
if (this.qrcodeImagePath || this.payQrCode) {
// 使 setTimeout UI
if (this.orderId) {
setTimeout(() => {
this.getDetail(this.orderId).catch(err => {
console.error('获取订单详情失败:', err)
})
}, 100)
}
return
}
//
if (this.orderId) {
// 使 $nextTick DOM
this.$nextTick(async () => {
//
await this.getDetail(this.orderId)
//
if (this.form.pay_status === 0 && this.form.no) {
try {
const payRes = await this.$u.api.accompanyPay({
no: this.form.no
})
const result = payRes.result || payRes
if (result && result.code_url) {
this.payQrCode = result.code_url
//
this.qrcodeImagePath = ''
}
} catch (error) {
console.error('获取二维码失败:', error)
uni.showToast({
icon: 'none',
title: '获取二维码失败'
})
}
}
})
}
this.showPayQrCode = true
this.form.pay_status = 1
}
// tab no
if (this.orderId) {
await this.getDetail(this.orderId)
}
// tab
if (tab === 'qrcode' && this.form.no) {
await this.payOrder({ no: this.form.no, time: this.form.created_at })
}
// tab
// form.no
},
//
scrollToPayQr: async function() {
//
if (this.payCooldownSeconds > 0) {
uni.showToast({
title: `支付成功后${this.payCooldownSeconds}秒内不能重复支付`,
icon: 'none',
duration: 2000
})
return
}
// getDetail
const wasShowingQrCode = this.showPayQrCode
const wasPayStatus = this.form.pay_status
// no
if (this.orderId) {
await this.getDetail(this.orderId)
// getDetail
if (wasShowingQrCode || wasPayStatus === 1) {
this.showPayQrCode = true
this.form.pay_status = 1
}
}
if (!this.form.no) {
@ -1359,8 +1472,21 @@
const res = await this.$u.api.accompanyOrderPayParams({
no: this.form.no
});
console.log("获取支付参数:", res);
console.log("获取支付参数:", res,res.errcode && res.errcode===10002);
if(res.errcode && res.errcode===10002){
// 使 getDetail
this.showPayQrCode = true
this.form.pay_status = 1
// tab
if (this.activeTab === 'qrcode') {
this.qrcodeExpired = true
}
uni.showToast({
title: res.errmsg,
icon: 'none'
});
return;
}
// config
const payConfig = res.config || res;
@ -1375,10 +1501,20 @@
success: () => {
uni.showToast({
title: '支付成功',
icon: 'success'
icon: 'success',
duration: 1500
});
//
this.getDetail();
// 30
this.startPayCooldown();
// toast
setTimeout(() => {
uni.redirectTo({
url: `/package_sub/order/orderStaffDetail?id=${this.orderId}`
})
}, 1500)
},
fail: (err) => {
if (err.errMsg && err.errMsg.indexOf('cancel') > -1) {
@ -2074,6 +2210,40 @@
width: 100%;
height: 100%;
}
image {
&.qrcode-disabled {
filter: grayscale(100%);
opacity: 0.5;
}
}
.qrcode-overlay {
position: absolute;
top: 20rpx;
left: 20rpx;
right: 20rpx;
bottom: 20rpx;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
border-radius: 8rpx;
.reget-btn {
background: #1479ff;
color: #fff;
padding: 20rpx 40rpx;
border-radius: 40rpx;
font-size: 28rpx;
font-weight: 500;
cursor: pointer;
&:active {
opacity: 0.8;
}
}
}
}
.qrcode-tip {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -148,6 +148,35 @@
width: 100%;
height: 100%;
}
.detail-page .payment-popup .qr-code image.qrcode-disabled.data-v-75de4fcc {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.5;
}
.detail-page .payment-popup .qr-code .qrcode-overlay.data-v-75de4fcc {
position: absolute;
top: 10rpx;
left: 10rpx;
right: 10rpx;
bottom: 10rpx;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
border-radius: 8rpx;
}
.detail-page .payment-popup .qr-code .qrcode-overlay .reget-btn.data-v-75de4fcc {
background: #1479ff;
color: #fff;
padding: 20rpx 40rpx;
border-radius: 40rpx;
font-size: 28rpx;
font-weight: 500;
cursor: pointer;
}
.detail-page .payment-popup .qr-code .qrcode-overlay .reget-btn.data-v-75de4fcc:active {
opacity: 0.8;
}
.detail-page .payment-popup .tips.data-v-75de4fcc {
text-align: center;
margin-bottom: 20rpx;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -514,6 +514,35 @@
width: 100%;
height: 100%;
}
.qrcode-section .qrcode-wrapper image.qrcode-disabled.data-v-6614d6de {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.5;
}
.qrcode-section .qrcode-wrapper .qrcode-overlay.data-v-6614d6de {
position: absolute;
top: 20rpx;
left: 20rpx;
right: 20rpx;
bottom: 20rpx;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
border-radius: 8rpx;
}
.qrcode-section .qrcode-wrapper .qrcode-overlay .reget-btn.data-v-6614d6de {
background: #1479ff;
color: #fff;
padding: 20rpx 40rpx;
border-radius: 40rpx;
font-size: 28rpx;
font-weight: 500;
cursor: pointer;
}
.qrcode-section .qrcode-wrapper .qrcode-overlay .reget-btn.data-v-6614d6de:active {
opacity: 0.8;
}
.qrcode-section .qrcode-tip.data-v-6614d6de {
font-size: 24rpx;
color: #999;

Loading…
Cancel
Save