增加倒计时组件

c_client/src/components/CountDown/CountDown.jsx

+import React, { useState, useEffect, useRef } from 'react'
+import { View, Text } from '@tarojs/components'
+import { useDidShow, useDidHide } from '@tarojs/taro'
+import tbcc from 'tbcc-sdk-ts'
+import './CountDown.less'
+const { getServerTime } = tbcc.tb
+
+export default function CountDown(props) {
+  const { endTime, startTime, onUpdate, type = 1, color = '#000', bgColor = 'transparent', fontSize = '26rpx', padding = '0' } = props
+  const [countDown, setCountDown] = useState(type === 1 ? ['00', ':', '00', ':', '00'] : ['00', '天', '00', '时', '00', '分', '00', '秒'])
+  const [nowTime, setNowTime] = useState(startTime || Date.now())
+  const countTimer = useRef(null)
+  const isAccessRender = useRef(false)
+
+  useEffect(() => {
+    countTimeFn()
+    return () => clearInterval(countTimer.current)
+  }, [endTime, nowTime])
+
+  useDidShow(() => {
+    if(isAccessRender.current) {
+      setNowTime(startTime || Date.now())
+    }
+    isAccessRender.current = true
+  })
+
+  const countTimeFn = async () => {
+    const _nowTime = await getServerTime()
+
+    let diffTime = endTime - (startTime || _nowTime)
+    countTimer.current = setInterval(() => {
+      if (diffTime > 1000) {
+        let day = Math.floor(diffTime / (3600 * 1000) / 24)
+        let hour = Math.floor((diffTime / 1000 / 3600) % 24)
+        let minute = Math.floor((diffTime / 1000 / 60) % 60)
+        let second = Math.floor(diffTime / 1000 % 60)
+        day = day < 10 ? '0' + day : day
+        hour = hour < 10 ? '0' + hour : hour
+        minute = minute < 10 ? '0' + minute : minute
+        second = second < 10 ? '0' + second : second
+        setCountDown(type === 1 ? [hour, ':', minute, ':', second] : [day, '天', hour, '时', minute, '分', second, '秒'])
+        diffTime -= 1000
+      } else {
+        setCountDown(type === 1 ? ['00', ':', '00', ':', '00'] : ['00', '天', '00', '时', '00', '分', '00', '秒'])
+        clearInterval(countTimer.current)
+        onUpdate && onUpdate()
+      }
+    }, 1000)
+  }
+
+  return (
+    <View className="count-down">
+      {
+        countDown.map((item, i) => {
+          return (
+            <Text className="count-down-time" key={i} style={{ backgroundColor: item !== ':' ? bgColor : 'transparent', fontSize, color, padding }}>{item}</Text>
+          )
+        })
+      }
+    </View>
+  )
+}
\ No newline at end of file

c_client/src/components/CountDown/CountDown.less

+.count-down {
+  display: flex;
+  align-items: center;
+}
+.count-down-time {
+  border-radius: 4rpx;
+}
\ No newline at end of file

c_client/src/pages/index/index.jsx

@@ -9,6 +9,7 @@ import API from '@/api'
 import RuleModal from '@/components/RuleModal/RuleModal'
 import DoHelpModal from '@/components/DoHelpModal/DoHelpModal'
 import TasksModal from '@/components/TasksModal/TasksModal'
+import CountDown from '@/components/CountDown/CountDown'
 import styles from './index.module.less'
 import tbcc from 'tbcc-sdk-ts'
 const { navigateTo } = tbcc.tb
@@ -72,14 +73,22 @@ function Index() {
 
   return (
     <View className={homeStyle} style={{ backgroundImage: `url(${INDEX_CONFIG.bg})`}}>
+      {/* <View className={styles['page-container__1206']}>
+        <View className={styles['page-container__1624']}>
+          <View className={styles['page-container__content']}>适配方案</View>
+        </View>
+      </View> */}
+      {/* <View className={styles['blank_content']}><text>{`弹窗后内容区禁止滑动方案{position: fixed}`}</text></View> */}
+      {/* <View className={styles.countTime}>
+        <CountDown endTime={(Date.now() + 3 * 60 * 60 * 1000)} fontSize={'20rpx'} color={'#1B5F7F'} onUpdate={() => updateFlash()} />
+      </View> */}
+
       <View className={styles.rule} style={{ backgroundImage: `url(${INDEX_CONFIG.ruleButton})` }} onTap={() => setRuleModalVisible(true)}>活动规则</View>
       <View className={styles.my_prize} style={{ backgroundImage: `url(${INDEX_CONFIG.myPrizeButton})` }} onTap={onGoMyPrizePage}>我的奖品</View>
       <View className={styles.share} style={{ backgroundImage: `url(${INDEX_CONFIG.shareButton})` }} onTap={onShare}>分享</View>
       <View className={styles.tasks} style={{ backgroundImage: `url(${INDEX_CONFIG.taskButton})` }} onTap={() => setTasksModalVisible(true)}>任务</View>
       <View className={styles.games} style={{ backgroundImage: `url(${INDEX_CONFIG.taskButton})` }} onTap={() => navigateTo('/pages/games/games')}>游戏</View>
 
-      <View className={styles['blank_content']}><text>{`dldlddddl\n212222222`}</text></View>
-
       <View className={styles.bemember} onTap={() => setMemberVisible(true)}>入会</View>
       {
         tasksModalVisible &&

c_client/src/pages/index/index.module.less

@@ -2,7 +2,43 @@
   width: 100%;
   min-height: 100vh;
   .image-property(cover, top center);
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+// 适配方案开始
+.page-container__1206 {
+  width: 750px;
+  height: 1206px;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: calc(-1206px / 2);
+}
+.page-container__1624 {
+  width: 750px;
+  min-height: 1624px;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: calc(-1624px / 2);
+}
+.page-container__content {
+  width: 200px;
+  height: 60px;
+  position: absolute;
+  left: 0;
+  top: 208px;
+  color: #fff;
+  background-color: #000;
+  text-align: center;
+  line-height: 60px;
 }
+// 适配方案结束
+
 .content_fixed {
   position: fixed;
 }