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

add:新增优化功能

Browse Source
This commit is contained in:
ISFP_T
2026-01-12 10:30:40 +08:00
parent be01fb211e
commit dbf7fa0c95
8 changed files with 426 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/order/detail.vue
+385 -145
View File
@@ -2,26 +2,44 @@
<view class="order-detail-container">
<!-- 顶部标题 -->
<view class="page-header">
<view class="header-title">{{ getOrderStatusText() }}</view>
<view class="header-desc">{{ getStatusDesc() }}</view>
<view class="header-top">
<view class="header-left">
<view class="header-title">{{ getOrderStatusText() }}</view>
<view class="header-desc">{{ getStatusDesc() }}</view>
</view>
<view class="header-right" v-if="orderInfo.orderStatus === 'in_used'">
<view class="device-no-eject-btn" @click="handleDeviceNoEject">
<image src="/static/power_no_popout.png" class="device-no-eject-icon" mode="aspectFit"></image>
<text class="device-no-eject-text">{{ $t('order.deviceNoEject') }}</text>
</view>
</view>
</view>
</view>
<!-- 订单信息卡片 -->
<view class="info-card">
<view class="info-row">
<view class="info-col">
<view class="info-value-wrapper">
<text class="info-value-large">{{ getUsedTimeDisplay().number }}</text>
<text class="info-value-unit">{{ getUsedTimeDisplay().unit }}</text>
<view class="info-left">
<view class="info-col">
<view class="info-value-wrapper">
<text class="info-value-large">{{ getUsedTimeDisplay().number }}</text>
<text class="info-value-unit">{{ getUsedTimeDisplay().unit }}</text>
</view>
<view class="info-label">{{ getUsedTimeLabel() }}</view>
</view>
<view class="info-col">
<view class="info-value-wrapper">
<text class="info-value-large">{{ getOrderFee() }}</text>
<text class="info-value-unit">{{ $t('unit.yuan') }}</text>
</view>
<view class="info-label">{{ $t('order.totalAmount') }}</view>
</view>
<view class="info-label">{{ getUsedTimeLabel() }}</view>
</view>
<view class="info-col">
<view class="info-value-wrapper">
<text class="info-value-large">{{ getOrderFee() }}</text>
<text class="info-value-unit">{{ $t('unit.yuan') }}</text>
<view class="info-right" v-if="orderInfo.orderStatus === 'in_used'">
<view class="return-reminder-btn" @click="handleReturnReminderSubscribe">
<uv-icon name="bell" size="20" color="#FFF"></uv-icon>
<text class="return-reminder-text">{{ $t('order.returnReminder') }}</text>
</view>
<view class="info-label">{{ $t('order.totalAmount') }}</view>
</view>
</view>
<!-- <view class="fee-rule">
@@ -81,9 +99,9 @@
</view>
<!-- 转为自用提示 - 在使用中状态时显示 -->
<view v-if="orderInfo.orderStatus === 'in_used'" class="convert-tip" @click="handleConvertToOwned">
<!-- <view v-if="orderInfo.orderStatus === 'in_used'" class="convert-tip" @click="handleConvertToOwned">
{{ $t('order.convertToOwn') }}
</view>
</view> -->
<!-- 底部操作栏 -->
<view class="bottom-bar">
@@ -121,10 +139,9 @@
<view v-else class="action-btn primary" @click="quickReturn">
{{ $t('order.quickReturn') }}
</view>
<!-- 宝未弹出按钮 - 放在最后 -->
<view class="bottom-icon-btn" @click="handleDeviceNoEject">
<image src="/static/complaint.png" class="icon" mode="aspectFit"></image>
<text>{{ $t('order.deviceNoEject') }}</text>
<!-- 不想还了转为自用按钮 -->
<view class="action-btn convert-btn" @click="handleConvertToOwnedWithMaxFee">
{{ $t('order.convertToOwnWithMaxFee') }}
</view>
</template>
@@ -154,6 +171,33 @@
<view class="action-btn primary full-width" @click="goToHome">{{ $t('order.backToHome') }}</view>
</template>
</view>
<!-- 转为自用确认弹窗 -->
<uv-popup
ref="convertToOwnPopup"
mode="center"
round="20"
:overlay="true"
:closeOnClickOverlay="false"
:safeAreaInsetBottom="false"
>
<view class="convert-to-own-popup">
<view class="popup-header">
<text class="popup-title">{{ $t('order.convertToOwnWithMaxFeeTitle') }}</text>
</view>
<view class="popup-content">
<text class="popup-text">{{ $t('order.convertToOwnWithMaxFeeConfirm') }}</text>
</view>
<view class="popup-actions">
<view class="popup-btn cancel-btn" @click="closeConvertToOwnPopup">
{{ $t('order.convertToOwnCancelBtn') }}
</view>
<view class="popup-btn confirm-btn" @click="confirmConvertToOwn">
{{ $t('order.convertToOwnConfirmBtn') }}
</view>
</view>
</view>
</uv-popup>
</view>
</template>
@@ -164,7 +208,8 @@
queryById,
cancelOrder,
reportDeviceNoEject,
convertToOwned
convertToOwned,
closeWithMaxFee
} from '@/config/api/order.js'
import {
addUserFeedback
@@ -220,6 +265,7 @@
const showExpressAction = ref(false)
const countdownTimer = ref(null)
const feeRuleText = ref('5.0元/60分钟 前15分钟内归还免费 不足60分钟按60分钟计费 封顶99元 持续计费至99元视为买断')
const convertToOwnPopup = ref(null)
// 判断订单是否已完成
const isOrderCompleted = () => {
return orderInfo.value.orderStatus === 'used_done' ||
@@ -524,11 +570,25 @@
}
}
// 从订单详情页角度不再主动移除订单监控
// 订单监控的生命周期完全交给全局 orderMonitor，在订单真正完成时自动移除
// 从订单监控中移除订单
const removeFromOrderMonitor = () => {
// 保留函数以兼容已有调用，但不再从全局监控中删除订单
console.log('removeFromOrderMonitor 调用：已不再从全局监控中移除订单，交由 orderMonitor 在订单完成时处理')
if (orderInfo.value.orderId && $orderMonitor) {
try {
$orderMonitor.removeOrder({
orderId: orderInfo.value.orderId
})
console.log('订单已从监控队列移除:', orderInfo.value.orderId)
} catch (error) {
console.error('从监控队列移除订单失败:', error)
}
}
// 清除本地缓存的 activeOrderId
try {
uni.removeStorageSync('activeOrderId')
console.log('已清除本地缓存的 activeOrderId')
} catch (error) {
console.error('清除 activeOrderId 缓存失败:', error)
}
}
// 处理订单完成事件
@@ -665,13 +725,18 @@
deviceId.value = orderData.deviceNo
}
// 如果订单已完成，从监控中移除
if (isOrderCompleted()) {
removeFromOrderMonitor()
console.log('订单已完成，已从监控队列移除')
}
// 如果订单状态从 'in_used' 变为其他状态，清理所有定时器
if (oldStatus === 'in_used' && orderInfo.value.orderStatus !== 'in_used') {
console.log('订单状态已从使用中变为:', orderInfo.value.orderStatus, '，清理所有定时器')
clearTimer()
clearStatusCheckTimer()
clearExpressCountdown()
removeFromOrderMonitor()
// 显示订单完成提示
if (orderInfo.value.orderStatus === 'used_done' || orderInfo.value.orderStatus === 'used_down') {
@@ -721,25 +786,30 @@
}
}
// 无论当前订单状态如何，只要进入订单详情页，就把当前订单交给全局订单监控
// 根据订单状态决定是否添加到监控队列
if (orderInfo.value.orderId) {
uni.setStorageSync('activeOrderId', orderInfo.value.orderId)
// 添加/更新到监控队列
try {
if ($orderMonitor) {
$orderMonitor.removeOrder({
orderId: orderInfo.value.orderId
})
$orderMonitor.addOrder({
orderId: orderInfo.value.orderId
}, 'detail')
console.log('订单已添加到监控队列(无论当前状态):', orderInfo.value.orderId, '当前状态:', orderInfo.value.orderStatus)
} else {
console.warn('$orderMonitor 未定义，无法添加订单到监控队列')
// 如果订单已完成，从监控中移除
if (isOrderCompleted()) {
removeFromOrderMonitor()
console.log('订单已完成，已从监控队列移除:', orderInfo.value.orderId, '当前状态:', orderInfo.value.orderStatus)
} else {
// 订单未完成，添加到监控队列
uni.setStorageSync('activeOrderId', orderInfo.value.orderId)
try {
if ($orderMonitor) {
$orderMonitor.removeOrder({
orderId: orderInfo.value.orderId
})
$orderMonitor.addOrder({
orderId: orderInfo.value.orderId
}, 'detail')
console.log('订单已添加到监控队列:', orderInfo.value.orderId, '当前状态:', orderInfo.value.orderStatus)
} else {
console.warn('$orderMonitor 未定义，无法添加订单到监控队列')
}
} catch (error) {
console.error('添加订单到监控队列失败:', error)
}
} catch (error) {
console.error('添加订单到监控队列失败:', error)
}
}
} else {
@@ -905,96 +975,99 @@
})
}
// 处理"宝未弹出"反馈
// 处理"宝未弹出" - 跳转到反馈页面
const handleDeviceNoEject = () => {
uni.showModal({
title: $t('order.deviceNoEjectTitle'),
content: $t('order.deviceNoEjectConfirm'),
confirmText: $t('common.confirm'),
cancelText: $t('common.cancel'),
success: async (res) => {
if (res.confirm) {
try {
uni.showLoading({
title: $t('common.submitting')
})
// 调用反馈API提交工单
const feedbackData = {
type: 'device_issue',
content: `订单号：${orderInfo.value.orderNo}\n设备号：${deviceId.value}\n问题：充电宝未弹出`,
phone: orderInfo.value.phone || '',
orderId: orderInfo.value.orderId,
orderNo: orderInfo.value.orderNo
}
const result = await addUserFeedback(feedbackData)
if (result.code === 200) {
uni.hideLoading()
uni.showToast({
title: $t('order.deviceNoEjectSuccess'),
icon: 'success',
duration: 3000
})
} else {
throw new Error(result.msg || $t('order.deviceNoEjectFailed'))
}
} catch (error) {
uni.hideLoading()
uni.showToast({
title: error.message || $t('order.deviceNoEjectFailed'),
icon: 'none',
duration: 2000
})
}
}
}
uni.navigateTo({
url: '/pages/feedback/index?selectedType=0'
})
}
// 处理"转为自用"
const handleConvertToOwned = () => {
uni.showModal({
title: $t('order.convertToOwnTitle'),
content: $t('order.convertToOwnConfirm'),
confirmText: $t('common.confirm'),
cancelText: $t('common.cancel'),
success: async (res) => {
if (res.confirm) {
try {
uni.showLoading({
title: $t('common.processing')
})
const result = await convertToOwned(orderInfo.value.orderId)
if (result.code === 200) {
uni.hideLoading()
uni.showToast({
title: $t('order.convertToOwnSuccess'),
icon: 'success',
duration: 2000
})
// 刷新订单详情
setTimeout(() => {
getOrderDetails()
}, 2000)
} else {
throw new Error(result.msg || $t('order.convertToOwnFailed'))
}
} catch (error) {
uni.hideLoading()
uni.showToast({
title: error.message || $t('order.convertToOwnFailed'),
icon: 'none',
duration: 2000
})
// 处理"归还提醒" - 授权微信通知
const handleReturnReminderSubscribe = async () => {
try {
// 订阅微信通知
await new Promise((resolve, reject) => {
uni.requestSubscribeMessage({
tmplIds: ['euJmQA2FjRFPZVSM4Z6U96i2eLRiGTLy3E3qMjIoYYY'],
success: (subscribeRes) => {
console.log('订阅消息success回调', subscribeRes)
resolve(subscribeRes)
},
fail: (subscribeErr) => {
console.log('订阅消息fail回调', subscribeErr)
// 订阅失败不影响主流程
resolve(subscribeErr)
}
}
})
})
uni.showToast({
title: '订阅成功',
icon: 'success',
duration: 2000
})
} catch (error) {
console.log('订阅消息异常', error)
uni.showToast({
title: '订阅失败，请稍后重试',
icon: 'none',
duration: 2000
})
}
}
// 处理"不想还了转为自用"（按最高费用）
const handleConvertToOwnedWithMaxFee = () => {
try {
convertToOwnPopup.value && typeof convertToOwnPopup.value.open === 'function' && convertToOwnPopup.value.open()
} catch (e) {
console.error('打开弹窗失败', e)
}
}
// 关闭转为自用弹窗
const closeConvertToOwnPopup = () => {
try {
convertToOwnPopup.value && typeof convertToOwnPopup.value.close === 'function' && convertToOwnPopup.value.close()
} catch (e) {
console.error('关闭弹窗失败', e)
}
}
// 确认转为自用
const confirmConvertToOwn = async () => {
try {
closeConvertToOwnPopup()
uni.showLoading({
title: $t('common.processing')
})
const result = await closeWithMaxFee(orderInfo.value.orderNo)
if (result.code === 200) {
uni.hideLoading()
uni.showToast({
title: $t('order.convertToOwnWithMaxFeeSuccess'),
icon: 'success',
duration: 2000
})
// 刷新订单详情
setTimeout(() => {
getOrderDetails()
}, 2000)
} else {
throw new Error(result.msg || $t('order.convertToOwnWithMaxFeeFailed'))
}
})
} catch (error) {
uni.hideLoading()
uni.showToast({
title: error.message || $t('order.convertToOwnWithMaxFeeFailed'),
icon: 'none',
duration: 2000
})
}
}
// 生命周期钩子
@@ -1079,6 +1152,16 @@
.page-header {
margin-bottom: 30rpx;
.header-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.header-left {
flex: 1;
}
.header-title {
font-size: 48rpx;
font-weight: bold;
@@ -1090,6 +1173,42 @@
font-size: 28rpx;
color: #999;
}
.header-right {
display: flex;
align-items: center;
height:100%;
text-align: center;
}
.device-no-eject-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// padding: 12rpx 20rpx;
// background: #E8F5E9;
// border-radius: 12rpx;
// border: 2rpx solid #07c160;
min-width: 120rpx;
.device-no-eject-icon {
width: 68rpx;
height: 68rpx;
margin-bottom: 4rpx;
}
.device-no-eject-text {
font-size: 26rpx;
color: #07c160;
font-weight: 500;
}
&:active {
opacity: 0.8;
}
}
}
// 订单信息卡片
@@ -1102,36 +1221,72 @@
.info-row {
display: flex;
justify-content: space-between;
// margin-bottom: 20rpx;
// justify-content: space-between;
align-items: center;
// gap: 20rpx;
.info-col {
.info-left {
flex: 1;
text-align: center;
display: flex;
// justify-content: space-between;
align-items: center;
.info-value-wrapper {
display: flex;
align-items: baseline;
justify-content: center;
margin-bottom: 8rpx;
.info-col {
width: 200rpx;
// flex: 1;
// text-align: center;
.info-value-large {
font-size: 48rpx;
font-weight: bold;
color: #333;
line-height: 1;
.info-value-wrapper {
display: flex;
align-items: baseline;
// justify-content: center;
margin-bottom: 8rpx;
.info-value-large {
font-size: 36rpx;
font-weight: bold;
color: #333;
line-height: 1;
}
.info-value-unit {
font-size: 24rpx;
color: #666;
margin-left: 4rpx;
}
}
.info-value-unit {
.info-label {
font-size: 24rpx;
color: #666;
margin-left: 4rpx;
color: #999;
}
}
}
.info-label {
font-size: 24rpx;
color: #999;
.info-right {
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
.return-reminder-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 12rpx 24rpx;
background: #3EAB64;
border-radius: 50rpx;
border: 2rpx solid #3EAB64;
.return-reminder-text {
font-size: 24rpx;
color: #fff;
font-weight: 500;
}
&:active {
opacity: 0.8;
}
}
}
}
@@ -1316,6 +1471,91 @@
opacity: 0.8;
}
}
&.convert-btn {
background: #fff;
color: #07c160;
border: 2rpx solid #07c160;
flex: 1;
&:active {
opacity: 0.8;
}
}
}
}
}
/* 转为自用确认弹窗样式 */
.convert-to-own-popup {
width: 640rpx;
max-width: 86vw;
background: #ffffff;
border-radius: 24rpx;
padding: 40rpx 40rpx 0;
box-sizing: border-box;
overflow: hidden;
.popup-header {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24rpx;
.popup-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
}
}
.popup-content {
padding: 0 0 40rpx;
box-sizing: border-box;
text-align: left;
.popup-text {
font-size: 28rpx;
color: #666;
line-height: 1.8;
text-align: left;
display: block;
width: 100%;
}
}
.popup-actions {
display: flex;
border-top: 1rpx solid #f0f0f0;
margin-left: -40rpx;
margin-right: -40rpx;
.popup-btn {
flex: 1;
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
box-sizing: border-box;
&.cancel-btn {
color: #666;
border-right: 1rpx solid #f0f0f0;
&:active {
background-color: #f5f5f5;
}
}
&.confirm-btn {
color: #07c160;
font-weight: 600;
&:active {
background-color: #f0f9f4;
}
}
}
}
}