移动端实现拼团

记录拼团组件的开发历程，

需求分析：

1. 拼团时间段内，展示可拼团的人数，距离本期拼团结束的倒计时。
2. 非拼团时间，展示不可拼团页面，并且提示下一个拼团开始时间。
3. 拼团成功，拿到推送的数据，展示抽奖中页面3s，抽奖结果5s；再次判断是否在拼团时间内。
4. 拼团失败，距离本期拼团结束的倒计时为0时，进入拼团结束3s；再次判断是否在拼团时间内。

组件实现

处理拼团时间字段： timer: '7:01-12:00#13:00-18:00#19:02-22:09'。

把字段打散成数组，拿到hour与Minutes，set入new Date ，getTime之后去比较大小。得出是否在拼团时间，如果不在则继续找 到下一个拼团开始时间；

1. 首先判断是否在拼团时间段内，拿到数据后，再根据订单状态（拼团中，拼团成功，拼团失败）进入不同分支；
2. webscoket 接收到推送拼团成功的数据时，进入拼团成功；如果计时到‘00小时 00分钟 00秒’时还未有推送，则进入拼团失败。

1.拼团成功进入的方法

/**
 * 接收到推送成功消息时 
 * 1.显示抽奖中,2s后消失，
 * 2.显示中奖者，5s后拉取最新数据
 *  */ 
async successLottery() {
  this.lottery = true
  this.collageinterval = this.collageOrder.activityInterval
  await new Promise(resolve => { setTimeout(() => { this.lottery = false; resolve() }, 3000)}) // 先显示抽奖动画
  await new Promise(resolve => { // 5s 后进入下一轮抽奖拼团
    const t = setInterval(() => {
      this.collageinterval--
      if (this.collageinterval === 0){ 
        t && clearInterval(t)
        resolve()
      }
    }, 1000)})
  await this.$parent.$parent.init() // 拉取最新信息
  this.init() // 重置组件的数据
},

2.拼团失败的方法

/**
 * 未接收到推送成功消息时 
 * 1.先显示拼团结束,3s后消失，
 * 2.后拉取最新信息，进入非拼团状态
 *  */ 
async endLottery() {
  this.showEnd = true
  await new Promise(resolve => { setTimeout(() => { this.showEnd = false; resolve() },3000)}) // 先显示拼团结束
  this.$parent.$parent.init() // 拉取最新信息
},