自身项目中签到功能实现逻辑

遇到一个实现活动签到的功能开发，小节一下开发思路

• 后端返回一个活动日期，例如：’2023-02-23‘

• 返回当天的开始时间和结束时间两个字段， 例如：’9:00‘ 和 ’10:00‘

• 要求：签到状态默认是未签到，要求在活动开始之前活动是不可签到的（也就是在活动详情页面不可签到）

• 列表页活动状态

  • 

• 对应详情页面

  • 

• 实现思路

  • 将后端返回的活动日期与开始和结束时间进行拼接组成一个时间，这样就拿到了活动开始和结束的完整时间，将两个时间转换成时间戳
  • 再获取当前时间的时间戳
  • 三个时间戳进行比较得到一个状态标识，之后就可以去控制签到按钮的签到功能逻辑以及自身的样式内容等

• 代码实现

• ​
  huoDongArr.forEach(item => {
      const startTime = item.f_12955 + ' ' + item.kaishishijian
      const endTime = item.f_12955 + ' ' + item.jieshushijian
      item.startTime = startTime
      item.endTime = endTime
      item.huoDongStatus = this.handleTime(startTime, endTime) // 设置活动状态字段
  }
                     
  // 对时间进行处理
  handleTime(startTime, endTime) {
      const startStampt = new Date(startTime).getTime();
      const endStampt = new Date(endTime).getTime();
      const nowStampt = new Date().getTime()
      if (nowStampt < startStampt) {
          return 0 // 未开始
      } else if (nowStampt >= startStampt && nowStampt <= endStampt) {
          return 1 // 进行中
      } else if (nowStampt > endStampt) {
          return 2 // 已结束
      }
  }