pcwl_yancheng/uni-fans-score
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增多个页面及功能，优化用户体验

Browse Source 
在项目中新增了多个页面，包括押金页面、设备详情页面、反馈页面和帮助页面。同时，更新了订单支付和归还成功页面的逻辑，确保用户在支付和归还设备时能够获得清晰的反馈。优化了扫码和订单状态处理逻辑，提升了整体用户体验。
This commit is contained in:
8vd8
2025-04-16 18:26:02 +08:00
parent f96ff2b030
commit 431ceb4bdb
117 changed files with 1854 additions and 616 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/order/payment.vue
+145 -193
View File
@@ -49,21 +49,8 @@
</view>
</view>
<!-- 支付方式 -->
<view class="payment-methods">
<view class="card-title">支付方式</view>
<view
v-for="(method, index) in paymentMethods"
:key="index"
class="method-item"
:class="{ active: selectedMethod === index }"
@click="selectMethod(index)"
>
<view class="method-icon" :class="method.icon"></view>
<view class="method-name">{{ method.name }}</view>
<view class="method-check"></view>
</view>
</view>
<!-- 底部操作栏 -->
<view class="bottom-bar">
@@ -73,25 +60,14 @@
</view>
<button class="pay-btn" @click="handlePayment">立即支付</button>
</view>
<view class="back-btn" @click="navigateBack">
<text>返回设备详情</text>
</view>
methods: {
navigateBack() {
uni.redirectTo({
url: `/pages/device/detail?deviceId=${this.deviceId}`
})
}
}
</view>
</template>
<script>
import { queryById } from '@/config/user.js'
import {
URL
}from"@/config/url.js"
export default {
data() {
@@ -106,18 +82,7 @@ export default {
text: '等待支付',
desc: '请在15分钟内完成支付',
class: 'waiting'
},
paymentMethods: [
{
name: '微信支付',
icon: 'wechat'
},
{
name: '支付宝',
icon: 'alipay'
}
],
selectedMethod: 0
}
}
},
computed: {
@@ -163,10 +128,26 @@ export default {
const res = await queryById(this.orderId)
if (res.code === 200 && res.data) {
const orderData = res.data
// 处理创建时间，确保显示的是格式化后的时间
let formattedTime;
try {
// 如果orderData.createTime存在并且是有效的日期字符串/时间戳，则格式化它
if (orderData.createTime) {
formattedTime = this.formatTime(new Date(orderData.createTime));
} else {
// 如果createTime不存在，使用当前时间作为创建时间
formattedTime = this.formatTime(new Date());
}
} catch (e) {
console.error('时间格式化错误:', e);
formattedTime = this.formatTime(new Date());
}
this.orderInfo = {
orderNo: orderData.orderNo || orderData.orderId,
deviceNo: orderData.deviceNo,
createTime: orderData.createTime,
createTime: formattedTime,
phone: orderData.phone,
deposit: '99.00', // 假设押金固定为99元
amount: orderData.amount || this.packageInfo.price || '0.00'
@@ -191,11 +172,6 @@ export default {
}
},
// 选择支付方式
selectMethod(index) {
this.selectedMethod = index
},
// 处理支付
async handlePayment() {
try {
@@ -203,69 +179,35 @@ export default {
title: '处理中'
})
console.log('开始处理支付，订单号:', this.orderId)
// 调用后端支付API
// 调用后端创建微信支付订单接口
const res = await uni.request({
url: `${uni.getStorageSync('baseUrl') || 'http://127.0.0.1:8080'}/app/payment/${this.orderInfo.orderNo}`,
url: `${URL || 'http://127.0.0.1:8080'}/app/wx-payment/create/${this.orderInfo.orderNo}`,
method: 'GET',
header: {
'Authorization': 'Bearer ' + uni.getStorageSync('token'),
'Authorization': "Bearer " + uni.getStorageSync('token'),
'Clientid': uni.getStorageSync('client_id')
}
})
console.log('支付API返回结果:', res.data)
if (res.statusCode === 200 && res.data.code === 200) {
// 获取微信支付所需参数
const payParams = res.data.data
console.log('准备调用微信支付，参数:', payParams)
// 验证支付参数是否完整
if (!payParams.timeStamp || !payParams.nonceStr ||
!payParams.packageValue || !payParams.paySign) {
console.error('支付参数不完整:', payParams)
throw new Error('支付参数不完整，请联系客服')
}
// 调用微信支付API
uni.requestPayment({
provider: 'wxpay',
timeStamp: payParams.timeStamp,
nonceStr: payParams.nonceStr,
package: payParams.packageValue, // 后端返回的是packageValue字段
signType: payParams.signType || 'MD5',
paySign: payParams.paySign,
success: (payRes) => {
console.log('支付成功:', payRes)
uni.hideLoading()
// 支付成功后开始轮询订单状态
// 调用微信支付
await uni.requestPayment({
...payParams,
success: () => {
// 支付成功后轮询订单状态
this.pollOrderStatus()
},
fail: (err) => {
console.error('支付失败:', err)
uni.hideLoading()
// 用户取消支付的情况，不显示错误提示
if (err.errMsg === 'requestPayment:fail cancel') {
console.log('用户取消了支付')
return
}
uni.showToast({
title: err.errMsg || '支付失败',
icon: 'none'
})
},
complete: () => {
console.log('支付流程结束')
throw new Error('支付失败，请重试')
}
})
} else {
throw new Error(res.data?.msg || '支付请求失败')
throw new Error(res.data.msg || '创建支付订单失败')
}
} catch (error) {
console.error('支付处理错误:', error)
uni.hideLoading()
uni.showToast({
title: error.message || '支付失败',
@@ -274,35 +216,108 @@ export default {
}
},
// 发送租借指令
async sendRentCommand() {
try {
uni.showLoading({
title: '处理中'
})
// 调用发送租借指令的接口
const res = await this.sendRentRequest()
if (res.code === 200) {
uni.hideLoading()
uni.showToast({
title: '租借成功',
icon: 'success'
})
// 跳转到订单列表页面
setTimeout(() => {
uni.redirectTo({
url: `/pages/order/index?orderId=${this.orderId}`
})
}, 1500)
} else {
throw new Error(res.msg || '租借失败')
}
} catch (error) {
uni.hideLoading()
uni.showToast({
title: error.message || '租借失败',
icon: 'none'
})
}
},
// 发送租借请求
sendRentRequest() {
return new Promise((resolve, reject) => {
uni.request({
url: `${URL || 'http://127.0.0.1:8080'}/app/device/sendRentCommand`,
method: 'POST',
data: {
orderId: this.orderId
},
header: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': "Bearer " + uni.getStorageSync('token'),
'Clientid': uni.getStorageSync('client_id')
},
success(res) {
if (res.statusCode === 200) {
resolve(res.data)
} else {
reject(new Error('请求失败'))
}
},
fail(err) {
reject(err)
}
})
})
},
// 格式化时间
formatTime(date) {
const year = date.getFullYear()
const month = (date.getMonth() + 1).toString().padStart(2, '0')
const day = date.getDate().toString().padStart(2, '0')
const hour = date.getHours().toString().padStart(2, '0')
const minute = date.getMinutes().toString().padStart(2, '0')
return `${year}-${month}-${day} ${hour}:${minute}`
},
// 轮询订单状态
async pollOrderStatus() {
let retryCount = 0;
const maxRetries = 30; // 增加最大重试次数，允许更长时间检测
const interval = 2000; // 调整为2秒间隔
const maxRetries = 10;
const interval = 1000; // 1秒间隔
const checkStatus = async () => {
try {
// 使用queryById方法直接查询订单状态
const res = await queryById(this.orderId);
console.log('轮询订单状态结果:', res);
const res = await uni.request({
url: `${URL || 'http://127.0.0.1:8080'}/app/wx-payment/status/${this.orderInfo.orderNo}`,
method: 'GET',
header: {
'Authorization': "Bearer " + uni.getStorageSync('token'),
'Clientid': uni.getStorageSync('client_id')
}
});
if (res.code === 200 && res.data) {
const orderData = res.data;
// 检查订单是否已支付成功
if (orderData.orderStatus === 'IN_USED' ||
orderData.orderStatus === 'PAYMENT_SUCCESSFUL') {
console.log('支付成功，订单状态:', orderData.orderStatus);
// 显示弹出充电宝的提示
if (res.statusCode === 200 && res.data.code === 200) {
const orderData = res.data.data;
if (orderData.orderStatus === 'in_used') {
// 支付成功，订单已开始使用
uni.showToast({
title: '支付成功，充电宝已弹出',
icon: 'success',
duration: 2000
title: '支付成功',
icon: 'success'
});
// 延迟跳转到支付成功页面
setTimeout(() => {
uni.redirectTo({
url: `/pages/order/success?orderId=${this.orderId}`
url: `/pages/order/index?orderId=${this.orderId}`
});
}, 1500);
return;
@@ -311,39 +326,18 @@ export default {
if (retryCount < maxRetries) {
retryCount++;
console.log(`第${retryCount}次轮询，等待订单状态更新...`);
setTimeout(checkStatus, interval);
} else {
console.error('轮询订单状态超时');
uni.showModal({
title: '提示',
content: '订单状态查询超时，请在"我的订单"中查看订单状态',
showCancel: false,
success: function(res) {
if (res.confirm) {
uni.redirectTo({
url: '/pages/order/index'
});
}
}
});
throw new Error('订单状态查询超时');
}
} catch (error) {
console.error('查询订单状态失败:', error);
// 出错时继续轮询，不要中断
if (retryCount < maxRetries) {
retryCount++;
setTimeout(checkStatus, interval);
} else {
uni.showToast({
title: '查询订单状态失败',
icon: 'none'
});
}
uni.showToast({
title: error.message || '查询订单状态失败',
icon: 'none'
});
}
};
// 开始轮询
checkStatus();
},
}
@@ -469,72 +463,30 @@ export default {
}
}
.payment-methods {
.wechat-tip {
background: #fff;
border-radius: 24rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;
.method-item {
display: flex;
align-items: center;
padding: 30rpx 20rpx;
border-bottom: 1px solid #f5f5f5;
position: relative;
.method-icon {
width: 48rpx;
height: 48rpx;
margin-right: 20rpx;
&:last-child {
border-bottom: none;
}
&.active {
background: #F5F5F5;
.method-check {
background: #1976D2;
&::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 12rpx;
height: 12rpx;
background: #fff;
border-radius: 50%;
}
}
}
.method-icon {
width: 48rpx;
height: 48rpx;
margin-right: 20rpx;
&.wechat {
background: url('../../static/images/wechat.svg') no-repeat center/contain;
}
&.alipay {
background: url('../../static/images/alipay.svg') no-repeat center/contain;
}
}
.method-name {
flex: 1;
font-size: 28rpx;
color: #333;
}
.method-check {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
border: 2rpx solid #ddd;
position: relative;
&.wechat {
background: url('../../static/images/wechat.svg') no-repeat center/contain;
}
}
.method-text {
font-size: 28rpx;
color: #333;
font-weight: 500;
}
}
.bottom-bar {