feats: change time ticker component

.vscode/settings.json

+{
+  "editor.fontFamily": "'Cascadia Code', Consolas, 'Courier New', monospace"
+}

src/components/TimeTicker/index.jsx

 import Taro from '@tarojs/taro'
 import dayjs from 'dayjs'
-
-// 未开始
-const STATUS_READY = -1
-
-// 进行中
-const STATUS_PROCESSING = 0
-
-// 已结束
-const STATUS_OVER = 1
+import {
+  STATUS_READY,
+  STATUS_PROCESSING,
+  STATUS_OVER,
+  getPreText,
+  getTkText,
+  isFunction,
+} from './utils'
 
 export default class TimeTicker extends Taro.Component {
+  static options = {
+    addGlobalClass: true
+  }
 
   state = {
     status: STATUS_READY,
   timer = null
 
   componentWillMount() {
+    this.computeProps(this.props)
+  }
 
+  componentWillReceiveProps(nextProps) {
+    this.computeProps(nextProps)
+  }
 
+  componentWillUnmount() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
   }
 
   computeProps(props) {
 
     if (!t1 || !t2) {
       // 只设置了一个时间
-      targetTime = t1 ? dayjs(t1).valueOf() : dayjs(t2).valueOf()
-
-      if (now > targetTime) {
-        status = STATUS_OVER
-      } else if (now === targetTime) {
-        status = STATUS_PROCESSING
-      } else {
-        status = STATUS_READY
-      }
+      tmEnd = tmStart = t1 ? dayjs(t1).valueOf() : dayjs(t2).valueOf()
     } else {
       // 设置了时间区间
-      const dtStart = dayjs(t1).valueOf()
-      const dtEnd = dayjs(t2).valueOf()
-
-      if (dtStart > now) {
-        status = STATUS_READY
-        targetTime = dtStart
-      } else if (dtStart <= now && now < dtEnd) {
-        status = STATUS_PROCESSING
-        targetTime = dtEnd
-      } else {
-        status = STATUS_OVER
-        targetTime = dtEnd
-      }
+      tmStart = dayjs(t1).valueOf()
+      tmEnd = dayjs(t2).valueOf()
     }
 
-    this.setState({ status, targetTime }, this.startTimer.bind(this))
+    if (tmStart > now) {
+      status = STATUS_READY
+    } else if (tmStart <= now && now < tmEnd) {
+      status = STATUS_PROCESSING
+    } else {
+      status = STATUS_OVER
+    }
+
+    this.setState({ status, tmStart, tmEnd }, () => this.startTimer(props))
   }
 
-  startTimer = (props) => {
+  computeStatus(props) {
     const {
-      status,
-      targetTime,
-      interval = 1000,
       onStart,
       onProcess,
       onEnd,
     } = props || {}
 
-    if (this.timer) {
-      clearInterval(this.timer)
+    let {
+      status,
+      tmStart,
+      tmEnd,
+      preText,
+      tkText,
+    } = this.state
+
+    const now = dayjs().valueOf()
+    const diff = status === STATUS_READY ? tmStart - now : tmEnd - now
+
+    if (diff <= 0) {
+      if (status === STATUS_READY) {
+        status = tmStart === tmEnd ? STATUS_OVER : STATUS_PROCESSING
+        
+        if (isFunction(onStart)) {
+          [preText, tkText] = onStart()
+        }
+      } else {
+        status = STATUS_OVER
+        if (this.timer) {
+          clearInterval(this.timer)
+        }
+
+        if (isFunction(onEnd)) {
+          [preText, tkText] = onEnd()
+        }
+      }
+    } else {
+      if (isFunction(onProcess)) {
+        [preText, tkText] = onProcess(diff, status)
+      }
     }
 
-    this.timer = setInterval(() => {
-      const now = dayjs().valueOf()
-      const diff = targetTime - now
+    if (preText === undefined) {
+      preText = getPreText(diff, status)
+    }
+    
+    if (tkText === undefined) {
+      tkText = getTkText(diff, status)
+    }
 
+    this.setState({ status, preText, tkText })
+  }
 
+  startTimer = (props) => {
+    const { interval = 1000 } = props || {}
 
-    }, interval)
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
 
+    // 立即执行一次
+    this.computeStatus(props);
+    // 再循环执行
+    this.timer = setInterval(() => this.computeStatus(props), interval)
   }
 
-  render() {
-    
 
 
+  classNames = (...args) => {
+    return (args || []).reduce((cls, item) => {
+      return [].concat(cls).concat(item)
+    }, []).filter(x => x).join(' ')
+  }
+
+  render() {
+    const wrapperCls = this.classNames('tk-box', this.props.className)
+    const headerCls = this.classNames('tk-box-header', this.props.headerClass)
+    const bodyCls = this.classNames('tk-box-body', this.props.bodyClass)
+
+    return (
+      <View className={wrapperCls}>
+        {
+          this.state.preText &&
+          (<Text className={headerCls}>{this.state.preText}</Text>)
+        }        
+        {
+          this.state.tkText &&
+          (<Text className={bodyCls}>{this.state.tkText}</Text>)
+        }        
+      </View>
+    );
   }
 }

src/components/TimeTicker/utils.js

+
+import { formateLeftTime } from '@utils/tools'
+
+// 未开始
+export const STATUS_READY = -1
+
+// 进行中
+export const STATUS_PROCESSING = 0
+
+// 已结束
+export const STATUS_OVER = 1
+
+export function getPreText(tk, status) {
+  return status === STATUS_OVER ? '已结束' : `距离 ${status === STATUS_READY ? '开始' : '结束'} 还有: `
+}
+
+export function getTkText(tk, status) {
+  return status === STATUS_OVER ? '' : formateLeftTime(tk)
+}
+
+export function isFunction(fn) {
+  return typeof fn === 'function'
+}

src/pages/activity/detail/assemble.js

 import AchieveAvatar from '@components/achieveAvatar'
 import Poster from '@components/Poster'
 import FormIdCollector from '@components/formIdCollector'
+import TimeTicker from '@components/TimeTicker'
 import dayjs from 'dayjs'
 // import WxParse from '@components/wxParse/wxParse'
 // import getUserPhone from '@utils/getUserPhone'
     shares: [], // 分享设置
     posters: [],  // 海报设置
     posterTpls: [], // 海报模板
-    leftTime: 0,  // 剩余时间
-    ltTicker: undefined,  // 剩余时间计时器
     actState: ActBeforeStart,  // 活动本身状态
     groupState: undefined, // 发起拼团活动的状态
     isStarter: true, // 是否发起人
   }
 
   componentWillUnmount() {
-    this.stopTicker()
     this.state.pointRecordId && updatePoint(this.state.pointRecordId)
   }
 
-  componentDidShow() {
-    this.startTicker()
-  }
-
-  componentDidHide() {
-    this.stopTicker()
-  }
-
   // 初始化页面数据
   initPageData = () => {
     if (!this.state.detail.groupActivityId) {
     }
   }
 
-  // 启动 ticker
-  startTicker() {
-    if (this.state.ltTicker && !this.state.ltTicker.processing) {
-      this.state.ltTicker.start()
-    }
-  }
-
-  // 清除 ticker
-  stopTicker() {
-    if (this.state.ltTicker) {
-      this.state.ltTicker.stop()
-    }
-  }
-
 
    // 调起授权电话
    toggleGrantPhone = () => {
   toggleActionVisible = () => {
     const { actionSheetVisible } = this.state
 
-    if (this.state.ltTicker) {
-      actionSheetVisible ? this.startTicker() : this.stopTicker()
-    }
-
     this.setState({
       actionSheetVisible: !actionSheetVisible
     })
     }
   }
 
-  // 计时器更新剩余时间
-  getLeftTimeTicker(startDate, endDate) {
-    let processing = false
-    let ticker = undefined
-
-    const stop = () => {
-      ticker && clearInterval(ticker)
-      processing = false
-    }
-
-    const fn = () => {
-      const [actState, leftTime] = this.compActState(startDate, endDate)
-      this.setState({ actState, leftTime })
-
-      if (actState === ActFinished) {
-        stop()
-      }
-    }
-
-    const start = () => {
-      ticker = setInterval(fn, 1000)
-      processing = true
-    }
-
-    return {
-      start,
-      stop,
-      processing,
-    }
-  }
-
+  // 请求详情
   loadDetail() {
     let { id, recordId, ltTicker } = this.state
     const { userInfo } = this.props
 
     Taro.showLoading()
     getGroupDetail(id, recordId).then(res => {
-      this.stopTicker()
 
       const recordDetail = res.taShareRecord || {}
       let [actState, leftTime] = this.compActState(res.taShareActivity.startTime, res.taShareActivity.endTime)
         actState = ActFinished
       }
 
-      if (actState != ActFinished) {
-        ltTicker = this.getLeftTimeTicker(res.taShareActivity.startTime, res.taShareActivity.endTime)
-      }
-
       Taro.hideLoading()
       this.setState({
         detail: res.taShareActivity,
         loaded: true,
         isStarter: userInfo.person.personId === recordDetail.personId,
         actState,
-        leftTime,
-        ltTicker
-      }, () => this.startTicker())
+      })
 
       // Taro.setNavigationBarTitle({ title: res.taShareActivity.activityName })
 
     })
   }
 
+  handleTickerProcess = (status) => (tk, st) => {
+    if (this.state.actState === ActFinished) {
+      return ['活动已结束', null]
+    }
+
+    switch (status) {
+      case 'start':
+        this.setState({ actState: ActInProcess })
+        return ['活动马上开始', null];
+      case 'process':
+        return [(st === -1 ? '距活动开始' : '活动剩余时间')];
+      case 'end':
+        this.setState({ actState: ActFinished })
+        return ['活动已结束', null]
+    }
+  }
 
   render() {
     const {
       posterTpls,
       posters,
       qrCode,
-      leftTime,
-      ltTicker,
     } = this.state
 
     const { userInfo } = this.props
     return (
       <Block>
         {/* 生成海报 */}
-        {posterVisible && !ltTicker.processing &&
+        {posterVisible &&
           (
             <Poster configs={posterConfigs} onCancel={this.togglePosterVisible} onFinish={this.togglePosterVisible}></Poster>
           )
               <View className="detail-banner">
                 <Image mode="widthFix" src={transferImage(detail.mainImg)} className="detail-banner__img"></Image>
 
-                <View className="rest-time">
-                  <Text className="row-label">{actState === ActBeforeStart ? '距活动开始 :' : (actState === ActInProcess ? '活动剩余时间 :' : '')} </Text>
-                  <Text className="row-text">{actState != ActFinished ? formateLeftTime(leftTime) : '活动已结束'}</Text>
-                </View>
+                <TimeTicker
+                  className="rest-time"
+                  headerClass="row-label"
+                  bodyClass="row-text"
+                  timeRange={[detail.startTime, detail.endTime]}
+                  onStart={this.handleTickerProcess('start')}
+                  onEnd={this.handleTickerProcess('end')}
+                  onProcess={this.handleTickerProcess('process')}
+                />
+
                 {detail.successNum > 0 &&
                   <View className="success-num">
                     <View className="triangle"></View>

src/pages/activity/detail/assistance.js

 import AchieveAvatar from '@components/achieveAvatar'
 import Poster from '@components/Poster'
 import FormIdCollector from '@components/formIdCollector'
+import TimeTicker from '@components/TimeTicker'
 import dayjs from 'dayjs'
 // import WxParse from '@components/wxParse/wxParse'
 // import getUserPhone from '@utils/getUserPhone'
     shares: [], // 分享设置
     posters: [],  // 海报设置
     posterTpls: [], // 海报模板
-    leftTime: 0,  // 剩余时间
-    ltTicker: undefined,  // 剩余时间计时器
     actState: ActBeforeStart,  // 活动本身状态
     helpState: HelpInProcess, // 发起助力活动的状态
     isStarter: true, // 是否发起人
   }
 
   componentWillUnmount() {
-    this.stopTicker()
     this.state.pointRecordId && updatePoint(this.state.pointRecordId)
   }
 
-  componentDidShow() {
-    this.startTicker()
-  }
-
-  componentDidHide() {
-    this.stopTicker()
-  }
-
   // 初始化页面数据
   initPageData = () => {
     if (!this.state.detail.helpActivityId) {
     }
   }
 
-  // 启动 ticker
-  startTicker() {
-    if (this.state.ltTicker && !this.state.ltTicker.processing) {
-      this.state.ltTicker.start()
-    }
-  }
-
-  // 清除 ticker
-  stopTicker() {
-    if (this.state.ltTicker) {
-      this.state.ltTicker.stop()
-    }
-  }
-
   // 调起授权电话
   toggleGrantPhone = () => {
     const { userInfo: { person: { phone, tel } } } = this.props
   toggleActionVisible = () => {
     const { actionSheetVisible } = this.state
 
-    if (this.state.ltTicker) {
-      actionSheetVisible ? this.startTicker() : this.stopTicker()
-    }
-
     this.setState({
       actionSheetVisible: !actionSheetVisible
     })
     }
   }
 
-  // 计时器更新剩余时间
-  getLeftTimeTicker(startDate, endDate) {
-    let processing = false
-    let ticker = undefined
-
-    const stop = () => {
-      ticker && clearInterval(ticker)
-      processing = false
-    }
-
-    const fn = () => {
-      const [actState, leftTime] = this.compActState(startDate, endDate)
-      this.setState({ actState, leftTime })
-
-      if (actState === ActFinished) {
-        stop()
-      }
-    }
-
-    const start = () => {
-      ticker = setInterval(fn, 1000)
-      processing = true
-    }
-
-    return {
-      start,
-      stop,
-      processing,
-    }
-  }
-
   // 请求详情
   loadDetail() {
-    let { id, initiateId, ltTicker } = this.state
+    let { id, initiateId } = this.state
     const { userInfo } = this.props
 
     Taro.showLoading()
     getHelpDetail(id, initiateId).then(res => {
-      this.stopTicker()
-
       const initiateDetail = res.helpInitiateRecord || {}
       let [actState, leftTime] = this.compActState(res.helpActivity.startDate, res.helpActivity.endDate)
 
         actState = ActFinished
       }
 
-      if (actState != ActFinished) {
-        ltTicker = this.getLeftTimeTicker(res.helpActivity.startDate, res.helpActivity.endDate)
-      }
-
       Taro.hideLoading()
       this.setState({
         detail: res.helpActivity,
         loaded: true,
         isStarter: !initiateDetail.personId || userInfo.person.personId === initiateDetail.personId,
         actState,
-        leftTime,
+        // leftTime,
         isJoin: res.isJoin,
-        ltTicker
-      }, () => this.startTicker())
-
-      // Taro.setNavigationBarTitle({ title: res.helpActivity.title })
-
+      })
+      
       // WxParse.wxParse('article', 'html', res.desc, this.$scope, 0)
 
       savePoint({
     })
   }
 
+  handleTickerProcess = (status) => (tk, st) => {
+    if (this.state.actState === ActFinished) {
+      return ['活动已结束', null]
+    }
+
+    switch (status) {
+      case 'start':
+        this.setState({ actState: ActInProcess })
+        return ['活动马上开始', null];
+      case 'process':
+        return [(st === -1 ? '距活动开始' : '活动剩余时间')];
+      case 'end':
+        this.setState({ actState: ActFinished })
+        return ['活动已结束', null]
+    }
+  }
+
   render() {
     const {
       initiateId,
       posterTpls,
       posters,
       qrCode,
-      leftTime,
-      ltTicker,
     } = this.state
 
     const { userInfo } = this.props
     return (
       <View>
         {/* 生成海报 */}
-        {posterVisible && !ltTicker.processing &&
+        {posterVisible &&
           (
             <Poster configs={posterConfigs} onCancel={this.togglePosterVisible} onFinish={this.togglePosterVisible}></Poster>
           )
               <View className="detail-banner">
                 <Image mode="aspectFill" src={transferImage(detail.img)} className="detail-banner__img"></Image>
 
-                <View className="rest-time">
-                  <Text className="row-label">{actState === ActBeforeStart ? '距活动开始 :' : (actState === ActInProcess ? '活动剩余时间 :' : '')} </Text>
-                  <Text className="row-text">{actState != ActFinished ? formateLeftTime(leftTime) : '活动已结束'}</Text>
-                </View>
+                <TimeTicker
+                  className="rest-time"
+                  headerClass="row-label"
+                  bodyClass="row-text"
+                  timeRange={[detail.startDate, detail.endDate]}
+                  onStart={this.handleTickerProcess('start')}
+                  onEnd={this.handleTickerProcess('end')}
+                  onProcess={this.handleTickerProcess('process')}
+                />
+
                 {detail.successNum > 0 &&
 
                   <View className="success-num">