xinyi/chuangte_bike_newxcx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

支付、押金退款申请调整

Browse Source
This commit is contained in:
磷叶 2026-02-11 10:53:17 +08:00
parent c94e17007e
commit 1e2095aca6
7 changed files with 551 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
common/enums/pay.js Normal file
View File

@ -0,0 +1,8 @@
// 支付单状态
export const PayStatus = {
WAIT_PAY: {label: "待支付", value: "WAIT_PAY"},
PAYING: {label: "支付中", value: "PAYING"},
PAYED: {label: "已支付", value: "PAYED"},
CANCELED: {label: "已取消", value: "CANCELED"},
REFUNDED: {label: "转入退款", value: "REFUNDED"},
}

4
page_fenbao/huiyuan/huiyuanlist.vue
View File

@ -376,9 +376,9 @@
margin-right: 12rpx;
&.status-show {
background: rgb(209 222 218 / 30%);
background: rgba(209, 222, 218, 0.3);
color: #f2f5f4;
border: 1rpx solid rgb(238 247 244 / 50%);
border: 1rpx solid rgba(238, 247, 244, 0.5);
}
&.status-hide {

2
page_fenbao/tousu/shtsxq.vue
View File

@ -57,7 +57,7 @@
<!-- 对话区（基于 msgList 渲染） -->
<view class="chat" v-if="Array.isArray(msgList) && msgList.length">
<block v-for="(msg, idx) in msgList" :key="msg.id || idx">
<block v-for="(msg, idx) in msgList" :key="idx">
<!-- 系统消息：居中展示，无头像 -->
<view v-if="msg.type == 3" class="sys">
<view class="pill">

2
page_fenbao/tousu/yhtxxq.vue
View File

@ -57,7 +57,7 @@
<!-- 对话区（基于 msgList 渲染） -->
<view class="chat" v-if="Array.isArray(msgList) && msgList.length">
<block v-for="(msg, idx) in msgList" :key="msg.id || idx">
<block v-for="(msg, idx) in msgList" :key="idx">
<!-- 系统消息：居中展示，无头像 -->
<view v-if="msg.type == 3" class="sys">
<view class="pill">

15
page_user/yongche/orderxq.vue
View File

@ -169,10 +169,6 @@
</view>
</view>
</view>
<!-- 押金退还提示 -->
<view class="deposit-tip" v-if="shouldShowDepositTip">
<text class="tip-text">押金将在订单结束后6小时内退还</text>
</view>
</view>
<view class="qixing">
<view class="top">
@ -349,6 +345,9 @@
<view class="deposit-refund-fixed" v-if="info.status === 'FINISHED' && info.autoRefunded === false">
<view class="deposit-refund-btn" @click="openRefundModal">
申请退还押金
<view class="desc">
申请后，系统将在1-7个工作日原路退回
</view>
</view>
</view>
<view class="kfrens">
@ -1596,7 +1595,7 @@
.deposit-refund-btn {
width: 100%;
height: 88rpx;
line-height: 88rpx;
line-height: 50rpx;
text-align: center;
background: linear-gradient(135deg, #4C97E7 0%, #5BA8F0 100%);
color: #fff;
@ -1604,6 +1603,12 @@
font-weight: 600;
border-radius: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(76, 151, 231, 0.3);
.desc {
font-size: 22rpx;
color: #fff;
line-height: 38rpx;
font-weight: 400;
}
}
}
}

9
pages.json
View File

@ -85,6 +85,12 @@
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},{
"path": "pages/pay/active",
"style": {
"navigationBarTitleText": "收银台",
"enablePullDownRefresh": false
}
}
],
@ -303,7 +309,6 @@
"navigationStyle": "custom"
}
}
// 其他 userpages 目录下的页面...
]
},{
"root": "page_fenbao",
@ -512,7 +517,6 @@
"navigationStyle": "custom"
}
}
// 其他 userpages 目录下的页面...
]
},{
"root": "page_shanghu",
@ -876,7 +880,6 @@
"navigationStyle": "custom"
}
}
// 其他 userpages 目录下的页面...
]
}
],

523
pages/pay/active.vue Normal file
View File

@ -0,0 +1,523 @@
<template>
<view class="pay-page">
<!-- 加载状态 -->
<view v-if="loading" class="loading-container">
<u-loading mode="circle" size="60"></u-loading>
<text class="loading-text">加载中...</text>
</view>
<!-- 支付内容 -->
<view v-else-if="payInfo" class="pay-content">
<!-- 已支付状态 -->
<view v-if="payInfo.status === PayStatus.PAYED.value" class="pay-result-section">
<view class="result-icon success">
<u-icon name="checkmark" size="60" color="#fff"></u-icon>
</view>
<view class="result-text">支付成功</view>
<view class="result-desc">{{ countDown > 0 ? countDown + 's 后自动关闭' : '即将关闭...' }}</view>
</view>
<!-- 已取消/过期状态 -->
<view v-else-if="payInfo.status === PayStatus.CANCELED.value" class="pay-result-section">
<view class="result-icon fail">
<u-icon name="close" size="60" color="#fff"></u-icon>
</view>
<view class="result-text">支付单已关闭</view>
<view class="result-desc hint-desc">请重新发起支付</view>
<view class="close-btn" @click="exitMiniProgram">关闭小程序</view>
</view>
<!-- 待支付 / 支付中：展示待支付内容 -->
<view v-else class="pay-main">
<!-- 金额展示 -->
<view class="amount-section">
<text class="amount-label">支付金额</text>
<view class="amount-value-row">
<text class="amount-currency">¥</text>
<text class="amount-value">{{ payInfo.amount }}</text>
</view>
</view>
<!-- 订单信息 -->
<view class="info-section">
<view class="info-item" v-if="payInfo.description">
<text class="info-label">订单描述</text>
<text class="info-value">{{ payInfo.description }}</text>
</view>
</view>
<!-- 支付按钮 -->
<view class="btn-section">
<button
class="pay-btn"
:class="{ disabled: paying }"
@click="handlePay"
:disabled="paying"
>
<u-icon v-if="!paying" name="weixin-fill" size="36" color="#fff" style="margin-right: 12rpx;"></u-icon>
{{ paying ? '支付中...' : '微信支付' }}
</button>
</view>
</view>
</view>
<!-- 错误状态 -->
<view v-else class="error-container">
<view class="error-icon">
<u-icon name="info-circle" size="80" color="#ccc"></u-icon>
</view>
<view class="error-text">{{ errorMsg || '支付单不存在' }}</view>
<button class="retry-btn" @click="loadPayDetail">重试</button>
</view>
</view>
</template>
<script>
import { PayStatus } from '@/common/enums/pay';
export default {
data() {
return {
loading: true,
paying: false,
payNo: '',
redirect: '',
payInfo: null,
errorMsg: '',
countDown: 3,
countDownTimer: null,
PayStatus // 暴露给模板使用
}
},
onLoad(options) {
console.log('支付页面参数：', options)
this.payNo = options.no || ''
this.redirect = options.redirect ? decodeURIComponent(options.redirect) : ''
if (this.payNo) {
this.loadPayDetail()
} else {
this.loading = false
this.errorMsg = '缺少支付单号'
}
},
onUnload() {
if (this.countDownTimer) {
clearInterval(this.countDownTimer)
this.countDownTimer = null
}
},
methods: {
/**
* 加载支付单详情
*/
loadPayDetail() {
this.loading = true
this.errorMsg = ''
this.$u.get('/app/pay/detail', { no: this.payNo }).then(res => {
if (res.code === 200 && res.data) {
this.payInfo = res.data
// 已支付成功，启动倒计时自动关闭
if (res.data.status === PayStatus.PAYED.value) {
this.startCountDown()
}
} else {
this.errorMsg = res.msg || '获取支付单失败'
}
}).catch(error => {
console.error('获取支付单失败', error)
this.errorMsg = '网络错误，请重试'
}).finally(() => {
this.loading = false
})
},
/**
* 刷新支付单信息
*/
refreshPayInfo() {
this.$u.put('/app/pay/refreshPayResult', { no: this.payNo });
},
/**
* 点击支付按钮：根据支付单状态决定调用激活支付还是重新支付
*/
handlePay() {
if (this.paying) return
this.paying = true
// 1. 获取微信登录 code
uni.login({
provider: 'weixin',
success: (loginRes) => {
const loginCode = loginRes.code
if (!loginCode) {
uni.showToast({ title: '获取登录信息失败', icon: 'none' })
this.paying = false
return
}
// 2. 根据支付单状态选择接口
const isRepay = this.payInfo.status === PayStatus.PAYING.value
const apiUrl = isRepay ? '/app/pay/repay' : '/app/pay/activePay'
console.log('this.payInfo', this.payInfo, 'isRepay', isRepay)
this.$u.put(apiUrl, {
no: this.payNo,
loginCode: loginCode,
appType: '1'
}).then(res => {
if (res.code !== 200) {
uni.showToast({ title: res.msg || '支付失败', icon: 'none' })
this.paying = false
return
}
const payData = res.data
if (!payData || !payData.payParams) {
uni.showToast({ title: '获取支付参数失败', icon: 'none' })
this.paying = false
return
}
// 3. 用返回的新支付单信息覆盖当前数据
if (payData.pay) {
this.payInfo = payData.pay
if (payData.pay.no) {
this.payNo = payData.pay.no
}
}
// 4. 调起微信支付
const payParams = payData.payParams
wx.requestPayment({
timeStamp: payParams.timeStamp,
nonceStr: payParams.nonceStr,
package: payParams.packageVal,
signType: payParams.signType,
paySign: payParams.paySign,
success: () => {
// 支付回调成功，刷新获取最新状态
this.refreshPayInfo();
this.handleSuccess();
},
fail: () => {
// 支付失败/取消，也刷新获取最新状态（可能实际已成功）
this.refreshPayInfo()
},
complete: () => {
this.paying = false
}
})
}).catch(error => {
console.error('支付接口调用失败', error)
uni.showToast({ title: '支付失败，请重试', icon: 'none' })
// 接口失败也刷新一下支付单状态
this.refreshPayInfo()
this.paying = false
})
},
fail: () => {
uni.showToast({ title: '微信登录失败', icon: 'none' })
this.paying = false
}
})
},
handleSuccess() {
this.payInfo.status = PayStatus.PAYED.value;
this.startCountDown();
},
/**
* 启动倒计时，自动关闭小程序
*/
startCountDown() {
this.countDown = 3
this.countDownTimer = setInterval(() => {
this.countDown--
if (this.countDown <= 0) {
clearInterval(this.countDownTimer)
this.countDownTimer = null
this.exitMiniProgram()
}
}, 1000)
},
/**
* 退出小程序
*/
exitMiniProgram() {
// #ifdef MP-WEIXIN
wx.exitMiniProgram({
success: () => {
console.log('已退出小程序')
},
fail: () => {
console.log('退出小程序失败')
}
})
// #endif
}
}
}
</script>
<style lang="scss" scoped>
.pay-page {
width: 100%;
min-height: 100vh;
background: #f5f5f5;
display: flex;
flex-direction: column;
// 自定义导航栏
.nav-bar {
width: 100%;
background: #fff;
padding-top: var(--status-bar-height);
.nav-bar-inner {
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
.nav-title {
font-size: 34rpx;
font-weight: 600;
color: #333;
}
}
}
// 加载状态
.loading-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 200rpx;
.loading-text {
margin-top: 20rpx;
font-size: 28rpx;
color: #999;
}
}
// 支付内容
.pay-content {
flex: 1;
display: flex;
flex-direction: column;
}
// 结果展示（已支付/已取消）
.pay-result-section {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 100rpx 60rpx;
.result-icon {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32rpx;
&.success {
background: #07c160;
}
&.fail {
background: #ee0a24;
}
}
.result-text {
font-size: 36rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.result-desc {
font-size: 26rpx;
color: #999;
&.hint-desc {
margin-top: 12rpx;
color: #666;
line-height: 1.6;
}
}
.close-btn {
margin-top: 48rpx;
width: 60%;
height: 80rpx;
line-height: 80rpx;
background: #fff;
color: #666;
border-radius: 40rpx;
font-size: 28rpx;
font-weight: 500;
border: none;
text-align: center;
&:active {
background: #e8e8e8;
transform: scale(0.98);
}
}
}
// 待支付主内容
.pay-main {
flex: 1;
display: flex;
flex-direction: column;
padding: 40rpx 30rpx;
}
// 金额展示区域
.amount-section {
background: #fff;
border-radius: 24rpx;
padding: 60rpx 40rpx;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
.amount-label {
font-size: 28rpx;
color: #999;
margin-bottom: 20rpx;
}
.amount-value-row {
display: flex;
align-items: baseline;
.amount-currency {
font-size: 40rpx;
font-weight: 600;
color: #333;
margin-right: 8rpx;
}
.amount-value {
font-size: 72rpx;
font-weight: 700;
color: #333;
line-height: 1;
}
}
}
// 订单信息区域
.info-section {
background: #fff;
border-radius: 24rpx;
padding: 8rpx 32rpx;
margin-bottom: 60rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 28rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.info-label {
font-size: 28rpx;
color: #999;
flex-shrink: 0;
}
.info-value {
font-size: 28rpx;
color: #333;
text-align: right;
margin-left: 20rpx;
word-break: break-all;
}
}
}
// 支付按钮区域
.btn-section {
margin-top: auto;
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
.pay-btn {
width: 100%;
height: 96rpx;
background: #07c160;
color: #fff;
border-radius: 48rpx;
font-size: 32rpx;
font-weight: 600;
border: none;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
&:active {
background: #06ad56;
transform: scale(0.98);
}
&.disabled {
background: #ccc;
}
}
}
// 错误状态
.error-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 200rpx 60rpx;
.error-icon {
margin-bottom: 24rpx;
}
.error-text {
font-size: 28rpx;
color: #999;
margin-bottom: 40rpx;
text-align: center;
}
.retry-btn {
padding: 20rpx 80rpx;
background: #07c160;
color: #fff;
border-radius: 40rpx;
font-size: 28rpx;
border: none;
&:active {
opacity: 0.8;
}
}
}
}
</style>