uni-app實作訂單支付倒計時，不會随着傳回重新計時

uni-app實作訂單支付倒計時，不會随着傳回重新計時

uni-app實作訂單支付倒計時

最近開發時有一個倒計時功能，一開始使用uni-app中自帶的uni-countdown倒計時，可以實作普通倒計時，但是并不能滿足需求根據訂單支付時間倒計時10分鐘，每次重新整理會重新計時，為了解決這個問題我嘗試将獲得的支付時間傳入，取支付後的第十分鐘作為截止時間。

擷取下單時間

template中寫好一個定時器：

<uni-countdown v-if="item.orderStatu == 1" class="room-count" color="#FF5733" :show-day="false" :second="timeupSecond" @timeup="timeup(item.createTime)" />
				<text v-if="item.orderStatu == 1" class="room-count-txt">之後取消</text>
           

item.orderStatu == 1是待支付的狀态，:show-day="false"表示不顯示天數，timeupSecond是被綁定的時間值。

特别注意初始化timeupSecond時必須：

定時器方法

// 倒計時
			timeup(createTime) {
				    var that = this;
				    /**setInterval間歇調用 */
				    that.timer = setInterval(function () {
					//訂單下單時間
					var buy_time = createTime;
					//計算剩餘時間
					var time = (new Date(buy_time).getTime() + 10* 60 * 1000) - (new Date().getTime());
					if(time>0){
					  //計算剩餘的分鐘
					  var minutes = parseInt(time / 1000 / 60 % 60, 10);
					  //計算剩餘的秒數
					  var seconds = parseInt(time / 1000 % 60, 10);
					  that.timeupSecond=parseInt(time / 1000);
					  // console.log(that.timeupSecond)
					  //判斷分鐘和秒數小于10要在前面加個0.
					  if(minutes<10){
						minutes = '0' + minutes;
					  }
					  if (seconds < 10) {
						seconds = '0' + seconds;
					  }
					  var timer = minutes + ":" + seconds;
					}
				}, 1000);
				if(that.timeupSecond==0) {
					uni.showToast({
						title: '時間到'
					})
					this.getOrderPage()
				}
			},
           

timeup(createTime)裡的createTime是從訂單資訊中擷取的下單時間；

new Date(buy_time).getTime() + 10* 60 * 1000是設定倒計時的截止時間為下單10分鐘後；

timeupSecond把時間轉化成我需要的時間格式

如圖為最終效果：

重新整理或退出頁面重新進入并不會重新倒計時，會一直到截止時間該倒計時樣式會消失