小程序待支付倒計時的實現

1、遵循框架taro語法

 componentDidMount() {
    this.fetchInitData(); 
  }

fetchInitData = () => {

    let {
      id
    } = this.$router.params;
    console.warn('detail get id ', id)
    if (id) {
      this.props.dispatch({
        type: 'order/personOrderDetail',
        payload: {
          personOrderId: id
        }
      }).then((res) => {   // 請求返回的訂單創建時間
        const { personOrderCreateDate } = res.resultData;  // 訂單創建的時間
        if (res.resultCode === 200) {
          this.computedLastPayTime(personOrderCreateDate)
        }
      })
      
    }
  }

2、異步計時器函數 

computedLastPayTime = (createTime) => {
    let self = this;
    let lastPayTime = ''
    setInterval(function() {
      let startTime =new Date().getTime();   // 當前的時間戳
      let endTime = createTime + 60 * 60 * 1000;   // 訂單創建的時間和一個小時的時間戳，單位毫秒
      let lastTime  = Math.floor((endTime - startTime) / 1000);
      let int_minute;
      if (lastTime > 0) {
        int_minute = Math.floor(lastTime / 60);
        lastTime -= int_minute * 60;
        lastPayTime = int_minute + '分' + lastTime + '秒';
        self.setState({
          showcountdown: lastPayTime,   
        })
      } else {}
    }, 1000)
  }

3、在render 中渲染使用

   const { showcountdown } = this.state;   //獲取顯示的時間

 <View className="orderDetail-status-timeout" >{personOrderDetail.personOrderStatus === 1 ? `剩餘：${showcountdown}` : ''}</View>

4、效果圖