feat&fix：新增订单租借等待页面；调整订单快递归还前置条件

2025-10-08 03:15:07 +08:00
parent 8560ff778e
commit 6aba65a856
3 changed files with 353 additions and 22 deletions
@@ -84,7 +84,7 @@
 		{
 			"path": "pages/return/index",
 			"style": {
-				"navigationBarTitleText": "归还设备",
+				"navigationBarTitleText": "订单详情",
 				"navigationBarBackgroundColor": "#ffffff",
 				"navigationBarTextStyle": "black"
 			}
@@ -119,6 +119,14 @@
 				"navigationBarBackgroundColor": "#ffffff",
 				"navigationBarTextStyle": "black"
 			}
+		},
+		{
+			"path": "pages/waiting/index",
+			"style": {
+				"navigationBarTitleText": "设备弹出中",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
 		}
 	],
 	"globalStyle": {
@@ -118,7 +118,12 @@
 			<!-- 使用中状态显示归还相关操作 -->
 			<view v-if="orderInfo.orderStatus === 'in_used'" class="action-item secondary" @click="checkReturnStatus">
 				刷新状态</view>
-			<view v-if="orderInfo.orderStatus === 'in_used'" class="action-item primary" @click="goToHome">返回首页</view>
+			<view v-if="orderInfo.orderStatus === 'in_used' && !showExpressAction" class="action-item primary">
+				{{ formatHms(countdownRemaining) }} 后可发起快递归还
+			</view>
+			<view v-if="orderInfo.orderStatus === 'in_used' && showExpressAction" class="action-item primary" @click="expressRetrunOrder">
+				暂停计费，快递归还
+			</view>

 			<!-- 已完成状态显示查看详情和返回首页 -->
 			<view v-if="orderInfo.orderStatus === 'used_done' || orderInfo.orderStatus === 'used_down'"
@@ -138,7 +143,8 @@
 <script>
 	import {
 		queryById,
-		cancelOrder
+		cancelOrder,
+		getSystemConfig
 	} from '@/config/user.js'
 	import {
 		URL
@@ -170,7 +176,11 @@
 				maxStatusChecks: 30, // 最多检查30次
 				currentStatusChecks: 0,
 				statusCheckInterval: 5000, // 5秒检查一次
-				isPageActive: false // 跟踪页面是否活跃
+				isPageActive: false, // 跟踪页面是否活跃
+				// 倒计时与快递归还触发（默认4小时=14400秒，可被配置覆盖）
+				countdownRemaining: 14400,
+				showExpressAction: false,
+				countdownTimer: null
 			}
 		},
 		onLoad(options) {
@@ -207,6 +217,14 @@

 			// 注册全局订单完成事件监听器
 			uni.$on('orderCompleted', this.handleOrderCompleted)
+
+			// 获取系统配置，覆盖默认倒计时
+			this.loadSystemConfig().then(() => {
+				// 如果进入时就是使用中状态，启动倒计时
+				if (this.orderInfo.orderStatus === 'in_used') {
+					this.startExpressCountdown()
+				}
+			})
 		},
 		// 添加onHide生命周期，处理页面隐藏时的清理工作
 		onHide() {
@@ -217,6 +235,7 @@
 			// 清理所有计时器
 			this.clearTimer()
 			this.clearStatusCheckTimer()
+			this.clearExpressCountdown()

 			// 从全局订单监控服务中移除当前订单
 			this.removeFromOrderMonitor()
@@ -229,6 +248,7 @@
 			// 页面卸载时清除定时器
 			this.clearTimer()
 			this.clearStatusCheckTimer()
+			this.clearExpressCountdown()

 			// 从全局订单监控服务中移除当前订单
 			this.removeFromOrderMonitor()
@@ -237,6 +257,50 @@
 			uni.$off('orderCompleted', this.handleOrderCompleted)
 		},
 		methods: {
+			// 预留：加载系统配置，覆盖倒计时（单位：秒）
+			async loadSystemConfig() {
+				try {
+					const res = await getSystemConfig()
+					if (res && res.code === 200 && res.data && typeof res.data.expressReturnCountdownSeconds === 'number') {
+						const seconds = res.data.expressReturnCountdownSeconds
+						if (seconds > 0) {
+							this.countdownRemaining = seconds
+						}
+					}
+				} catch (e) {
+					// 后端未实现或网络错误时，沿用默认
+				}
+			},
+			// 启动快递归还倒计时
+			startExpressCountdown() {
+				this.clearExpressCountdown()
+				this.showExpressAction = false
+				// 使用当前设定的倒计时（可能已被系统配置覆盖）
+				this.countdownTimer = setInterval(() => {
+					if (!this.isPageActive) {
+						this.clearExpressCountdown()
+						return
+					}
+					if (this.orderInfo.orderStatus !== 'in_used') {
+						this.clearExpressCountdown()
+						return
+					}
+					if (this.countdownRemaining > 0) {
+						this.countdownRemaining -= 1
+					} else {
+						this.showExpressAction = true
+						this.clearExpressCountdown()
+					}
+				}, 1000)
+			},
+
+			// 清除倒计时
+			clearExpressCountdown() {
+				if (this.countdownTimer) {
+					clearInterval(this.countdownTimer)
+					this.countdownTimer = null
+				}
+			},
 			// 从订单监控服务中移除当前订单
 			removeFromOrderMonitor() {
 				if (this.orderInfo.orderId && this.$orderMonitor) {
@@ -359,6 +423,8 @@
 							this.startTimer()
 							// 启动状态检查定时器
 							this.startStatusCheckTimer()
+							// 启动快递归还倒计时
+							this.startExpressCountdown()

 							// 记录当前活跃订单ID
 							uni.setStorageSync('activeOrderId', this.orderInfo.orderId)
@@ -647,24 +713,10 @@
 				})
 			},
 			expressRetrunOrder() {
-				uni.showLoading();
-				setTimeout(() => {
-					uni.hideLoading();
-					uni.showModal({
-						title: '提示',
-						content: '计费暂停，是否前往填写归还信息',
-						confirmText: '立即前往',
-						cancelText: '稍后填写',
-						success: (res) => {
-							if (res.confirm) {
-								uni.navigateTo({
-									url: `/pages/expressReturn/addExpressReturn?orderId=${this.orderInfo.orderId}`
-								})
-							}
-						}
-					})
-				}, 3000)
-
+				// 触发快递归还申请：跳转到填写页（由填写页调用申请接口）
+				uni.navigateTo({
+					url: `/pages/expressReturn/addExpressReturn?orderId=${this.orderInfo.orderId}`
+				})
 			},

 			// 取消订单
@@ -721,6 +773,15 @@
 					const remainingMins = mins % 60;
 					return remainingMins > 0 ? `${hours}小时${remainingMins}分钟` : `${hours}小时`;
 				}
+			},
+			// 格式化倒计时（秒）为 hh:mm:ss
+			formatHms(totalSeconds) {
+				if (typeof totalSeconds !== 'number' || totalSeconds < 0) return '00:00:00'
+				const hours = Math.floor(totalSeconds / 3600)
+				const minutes = Math.floor((totalSeconds % 3600) / 60)
+				const seconds = totalSeconds % 60
+				const pad = (n) => n.toString().padStart(2, '0')
+				return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
 			}
 		}
 	}
@@ -0,0 +1,262 @@
+<template>
+	<view class="waiting-container">
+		<view class="title">设备弹出中，请稍候</view>
+		<view class="progress-wrapper">
+			<view class="progress-circle">
+				<view class="progress-left">
+					<view class="progress-bar" :style="{ transform: 'rotate(' + leftRotateDeg + 'deg)' }"></view>
+				</view>
+				<view class="progress-right">
+					<view class="progress-bar" :style="{ transform: 'rotate(' + rightRotateDeg + 'deg)' }"></view>
+				</view>
+				<view class="progress-inner">
+					<text class="percent">{{ progress }}%</text>
+					<text class="hint">正在为您弹出设备</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="desc">若长时间未弹出，请联系现场工作人员或稍后重试</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref, onMounted, onUnmounted } from 'vue'
+	import { onLoad, onUnload } from '@dcloudio/uni-app'
+	import { getOrderByOrderNoScorePayStatus, cancelOrder } from '@/config/user.js'
+
+	const progress = ref(0)
+	const leftRotateDeg = ref(0)
+	const rightRotateDeg = ref(0)
+	const orderNo = ref('')
+	let progressTimer = null
+	let pollTimer = null
+	let timeoutTimer = null
+
+	const updateRotate = (val) => {
+		const safeVal = Math.max(0, Math.min(100, val))
+		if (safeVal <= 50) {
+			rightRotateDeg.value = safeVal * 3.6
+			leftRotateDeg.value = 0
+		} else {
+			rightRotateDeg.value = 180
+			leftRotateDeg.value = (safeVal - 50) * 3.6
+		}
+	}
+
+	const startProgress = () => {
+		// 视觉进度：平滑增长到 97%，等待真实状态成功后拉到 100%
+		progressTimer = setInterval(() => {
+			if (progress.value < 97) {
+				progress.value += 1
+				updateRotate(progress.value)
+			}
+		}, 120)
+	}
+
+	const stopAllTimers = () => {
+		if (progressTimer) {
+			clearInterval(progressTimer)
+			progressTimer = null
+		}
+		if (pollTimer) {
+			clearInterval(pollTimer)
+			pollTimer = null
+		}
+		if (timeoutTimer) {
+			clearTimeout(timeoutTimer)
+			timeoutTimer = null
+		}
+	}
+
+	const handleSuccess = () => {
+		progress.value = 100
+		updateRotate(progress.value)
+		setTimeout(() => {
+			uni.redirectTo({ url: '/pages/order/index' })
+		}, 400)
+	}
+
+	const handleFailure = async () => {
+		try {
+			if (orderNo.value) {
+				await cancelOrder({ orderId: orderNo.value })
+			}
+		} catch (e) {}
+		uni.showToast({ title: '设备租借失败，订单已取消', icon: 'none' })
+		setTimeout(() => {
+			uni.switchTab({ url: '/pages/index/index' })
+		}, 800)
+	}
+
+	const startPolling = () => {
+		pollTimer = setInterval(async () => {
+			try {
+				if (!orderNo.value) return
+				const res = await getOrderByOrderNoScorePayStatus(orderNo.value)
+				if (res && res.data) {
+					if (res.data.orderStatus == 'in_used') {
+						stopAllTimers()
+						handleSuccess()
+					} else if (res.data.orderStatus == 'waiting_for_payment') {
+						stopAllTimers()
+						handleFailure()
+					}
+				}
+			} catch (e) {
+				// 网络错误不立即失败，继续轮询
+			}
+		}, 1200)
+
+		// 超时保护：例如 60 秒
+		timeoutTimer = setTimeout(() => {
+			stopAllTimers()
+			uni.showToast({ title: '等待超时，请稍后重试', icon: 'none' })
+			setTimeout(() => {
+				uni.switchTab({ url: '/pages/index/index' })
+			}, 800)
+		}, 60000)
+	}
+
+	onLoad((query) => {
+		if (query && query.orderNo) {
+			orderNo.value = query.orderNo
+		}
+		startProgress()
+		startPolling()
+	})
+
+	onUnload(() => {
+		stopAllTimers()
+	})
+
+	onMounted(() => {
+		// 进入页面时初始化进度显示
+		updateRotate(progress.value)
+	})
+
+	onUnmounted(() => {
+		stopAllTimers()
+	})
+</script>
+
+<style lang="scss" scoped>
+	.waiting-container {
+		min-height: 100vh;
+		padding: 60rpx 40rpx;
+		background: #f5f7fa;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		animation: fade-in 0.25s ease;
+	}
+
+	.title {
+		font-size: 36rpx;
+		font-weight: 600;
+		color: #333;
+		margin-bottom: 40rpx;
+	}
+
+	.progress-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 40rpx 0;
+	}
+
+	.progress-circle {
+		position: relative;
+		width: 240rpx;
+		height: 240rpx;
+	}
+
+	/* 外层灰色轨道 */
+	.progress-circle::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		border: 16rpx solid #eaecef;
+		box-sizing: border-box;
+	}
+
+	/* 两个半圆容器，分别裁剪一半区域 */
+	.progress-left,
+	.progress-right {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	.progress-right {
+		clip: rect(0, 240rpx, 240rpx, 120rpx);
+	}
+
+	.progress-left {
+		clip: rect(0, 120rpx, 240rpx, 0);
+	}
+
+	/* 进度条（整圆），通过旋转配合父容器裁剪形成半圈填充 */
+	.progress-bar {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		border: 16rpx solid #07c160;
+		clip: rect(0, 120rpx, 240rpx, 0);
+		box-sizing: border-box;
+		transform: rotate(0deg);
+		transition: transform 0.12s linear;
+	}
+
+	/* 内层文案区域 */
+	.progress-inner {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 180rpx;
+		height: 180rpx;
+		border-radius: 50%;
+		background: #ffffff;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
+	}
+
+	.percent {
+		font-size: 44rpx;
+		font-weight: 700;
+		color: #07c160;
+	}
+
+	.hint {
+		margin-top: 8rpx;
+		font-size: 22rpx;
+		color: #999;
+	}
+
+	.desc {
+		margin-top: 20rpx;
+		font-size: 26rpx;
+		color: #666;
+		text-align: center;
+		line-height: 1.6;
+	}
+
+	@keyframes fade-in {
+		from { opacity: 0; transform: translateY(10rpx); }
+		to { opacity: 1; transform: translateY(0); }
+	}
+</style>
+