酒店支付倒计时

pages/hotel/orderdetails.vue

@@ -29,9 +29,9 @@
 							{{ orderStatus.text }}
 						</text>
 					</view>
-					<view class="RemainderBox">
+					<view class="RemainderBox" v-if="remainingSeconds&&orderData.directOrder.OrderStatus==1">
 						<text>剩余：</text>
-						<text>5分50秒</text>
+						<text>{{formattedTime}}</text>
 					</view>
 				</view>
 				<view class="orderIforRzBox row">
@@ -251,7 +251,7 @@
 					:disabled="submitCancel" :loading="submitCancel">
 					取消
 				</button>
-				<button v-if="orderData.model.OrderStatus==1" class="jz_OrderReNow" style="margin-left: 20rpx;"
+				<button v-if="orderData.model.OrderStatus==1&&!isExpired" class="jz_OrderReNow" style="margin-left: 20rpx;"
 					@click="payHotelOrder" :disabled="submit" :loading="submit">
 					立即支付
 				</button>
@@ -305,11 +305,20 @@
 				RatePlanList: null,
 				HotelMealTypes: [],
 				customer: {},
-				remainingTime: 10, // 初始倒计时时间（秒）
-				timerId: null,     // 定时器ID
-				isRunning: false,   // 状态标识（防止重复启动）
+				orderTime: null,
+				remainingSeconds: null, // 5分钟倒计时（秒）
+				isExpired: false,
+				countdownInterval: null,
+				currentTime: Date.now(),
 			};
 		},
+		computed: {
+			formattedTime() {
+				const minutes = Math.floor(this.remainingSeconds / 60/1000)
+				const seconds = this.remainingSeconds % 60%1000
+				return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+			}
+		},
 		created() {
 			this.Up = uni.getStorageSync("mall_UserInfo") ?
 				uni.getStorageSync("mall_UserInfo").UserPageType :
@@ -520,7 +529,24 @@
 							uni.hideLoading();
 							var tempData = res.data
 							this.orderData = tempData;
-							this.orderData.directOrder.CreateTime = this.$utils.formatDate(new Date(tempData.directOrder.CreateTime), 'yyyy-MM-dd hh:mm')
+
+							this.orderData.directOrder.CreateTime = this.$utils.formatDates(new Date(tempData.directOrder.CreateTime), 'yyyy-MM-dd hh:mm')
+							// 支付倒计时
+							if (tempData.directOrder.OrderStatus == 1) {
+								const now = Date.now();
+								const customStr = this.orderData.directOrder.CreateTime//'2025-05-12 10:17:00'
+								const [date, time] = customStr.split(' ')
+								const [year, month, day] = date.split('-')
+								const [hours, minutes, seconds] = time.split(':')
+								const parsedDate = new Date(year, month-1, day, hours, minutes, seconds)
+								this.orderTime = parsedDate.getTime()
+
+								const diff = this.orderTime + 5 * 60 * 1000 - now; // 5分钟倒计时
+								this.remainingSeconds = Math.max(diff, 0); // 确保不出现负数
+								// 启动倒计时
+								if(this.remainingSeconds) this.startCountdown()
+							}
+							
 
 							if (tempData.parmResult && tempData.parmResult.Success) {
 								this.RatePlanList = tempData.parmResult.Success.BookingDetails.Hotel.RatePlanList
@@ -542,17 +568,34 @@
 					}
 				);
 			},
+			clearInterval() {
+				if (this.countdownInterval) {
+					clearInterval(this.countdownInterval)
+					this.countdownInterval = null
+				}
+			},
+
+			handleTimeout() {
+				this.isExpired = true
+				if (this.submitCancel) return
+				let cancelMsg = {
+					OrderNo: this.orderData.directOrder.OrderNo,
+					ErpOrderId: this.orderData.model.OrderID,
+					OrderTypeStr: "Hotel", //订单类型为酒店
+					ConfirmID: "",
+					Amount: 0,
+				};
+				this.cancelOrder(cancelMsg)
+			},
+
 			startCountdown() {
-				if (this.isRunning) return;
-				this.isRunning = true;
-				this.timerId = setInterval(() => {
-					this.remainingTime--;
-					if (this.remainingTime <= 0) {
-						clearInterval(this.timerId);
-						this.isRunning = false;
-						this.submitCancel = false; // 时间耗尽回调
+				this.countdownInterval = setInterval(() => {
+					if (this.remainingSeconds > 0) {
+					this.remainingSeconds--
+					} else {
+					this.handleTimeout()
 					}
-				}, 1000);
+				}, 1000)
 			},
 			//未付款是初始化预定房型，餐型等，
 			initBookHotel() {

plugin/utils.js

@@ -237,6 +237,5 @@ export default {
 	VersionUpdate,
 	formatDates,
 	setAttatchParameter,
-	GetDateFewFaysLater,
-	formatDate
+	GetDateFewFaysLater
 }
\ No newline at end of file