有預(yù)約消息效果，(41分鐘就是Math.floor取整結(jié)果)

沒有預(yù)約消息效果

<!-- 就診動(dòng)態(tài) begin-->
  <view class="medical-visits">
    <image src="https://xx/medical-visits.png" class="medical-img"></image>
    // 動(dòng)態(tài)信息用輪播圖展示
    <swiper wx:if="{{notifyArr.length > 1}}" 
      autoplay 
      circular 
      vertical 
      interval="10000" 
      display-multiple-items="2" 
      class="medical-scroll">
      <swiper-item class="medical-info" wx:for="{{notifyArr}}" wx:key="index">
        <text class="medical-interval">{{item.interval}}</text>
        <text class="medical-content">{{item.content}}</text>
      </swiper-item>
    </swiper>
    <view wx:elif="{{notifyArr.length == 1}}" class="medical-scroll">
      <view class="medical-info single">
        <text class="medical-interval">{{notifyArr[0].interval}}</text>
        <text class="medical-content">{{notifyArr[0].content}}</text>
      </view>
    </view>
    <view wx:else class="medical-scroll">
      <view class="medical-info single">
        <text class="medical-content">暫無(wú)就診動(dòng)態(tài)</text>
      </view>
    </view>
  </view>
  <!-- 就診動(dòng)態(tài) end-->

page({
  data:{
    notifyArr: [], // 就診動(dòng)態(tài)消息列表
    notifyRefreshTimer: null, // 刷新就診動(dòng)態(tài)消息列表定時(shí)器
  },

/**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
   */
  onShow: function () {
    // 每隔3秒刷新一次(根據(jù)需求自行設(shè)置)
    this.data.notifyRefreshTimer = setInterval(() => {
      this.getNotifyList()
    }, 30000)
  },

/**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
   */
  onHide: function () {
    clearInterval(this.data.notifyRefreshTimer)
  },

// 獲取就診動(dòng)態(tài)消息列表
  getNotifyList() {
    $http.request('/api/xxxx', {
      pageNo: 1,
      pageSize: 10
    }, 'GET').then(res => {
      if (res.success) {
        const notifyArr = res.data.data.map(item => {
          const fssj = new Date(item.fssj), 
          now = new Date()
          let interval = now - fssj  // 當(dāng)前時(shí)間 - 預(yù)約時(shí)間
          if(interval < 60 * 1000) {
            interval = '剛剛'
          } else if(interval < 60 * 60 * 1000) {
            // Math.floor()可以獲得一個(gè)數(shù)的整數(shù)部分，而不是四舍五入
            interval = Math.floor(interval / (60 * 1000)) + '分鐘前'
          } else if(interval < 24 * 60 * 60 * 1000) {
            interval = Math.floor(interval / (60 * 60 * 1000)) + '小時(shí)前'
          } else {
            interval = Math.floor(interval / (24 * 60 * 60 * 1000)) + '天前'
          }
          return {
            content: item.nr,
            interval
          }
        })
        this.setData({
          notifyArr
        })
      } else {
        this.setData({
          notifyArr: []
        })
        wx.showToast({
          title: res.message,
          icon: 'none'
        })
      }
    })
  },
})

.medical-visits{
  background: #FFFFFF;
  border-radius: 10rpx;
  margin: 85rpx 30rpx 0;
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
}
.medical-img{
  width: 63rpx;
  height: 66rpx;
  margin-right: 30rpx;
  border-right: 1rpx solid #DCDCDC;
  padding-right: 20rpx;
}

.medical-scroll{
  flex: 1;
  overflow: hidden;
  height: 90rpx;
}
.medical-info{
  height: 45rpx;
  display: flex;
  align-items: center;
}
.medical-info.single {
  height: 90rpx;
}
.medical-interval{
  font-size: 24rpx;
  border-radius: 8rpx;
  background: #FEEBD7;
  color: #FF8A00;
}
.medical-content{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 26rpx;
  color: #333333;
  padding-left: 20rpx;
}