需求:訂單列表頁,所有未付款訂單顯示倒計時 讨彼,30分鐘后自動解除
實現(xiàn):一個容器 完成所有訂單倒計時功能
第一步:創(chuàng)建容器
count_down? :剩余時間容器
Interval? :定時器容器
sign? : 為每個調(diào)用time方法的對象進(jìn)行標(biāo)記
第二步:創(chuàng)建方法
start :傳入的下單時間
length :當(dāng)前定時器 與 剩余時間插入的位置
箭頭處注意:如果使用注釋的方法,定時器每秒改變數(shù)組的時候送挑,視圖是不會更新的绑莺。(此為JavaScript語言限制) ----------------------? ? 此處需要使用splice,當(dāng)數(shù)組改變時視圖也會更新惕耕。
第三步:將所有未付款訂單傳入方法中
sign? :從0開始標(biāo)記(此標(biāo)記渲染時極為重要)
第四步:渲染
item.sign有值纺裁,則為標(biāo)記訂單,顯示倒計時
<!-- 以下代碼為v-for中代碼-->
v-if=" "處注意:如果不加? item.sign === 0 的判定 司澎,下標(biāo)為0的數(shù)據(jù)是不會渲染的欺缘。(0為假)
第五步:自行判定倒計時結(jié)束時,向服務(wù)器發(fā)起請求結(jié)束訂單