add:组件测试

c_client/src/components/_base/Modal/Modal.jsx

 import React, { useState } from 'react'
 import Overlay from '../Overlay/Overlay'
 import styles from './modal.module.less'
-
+import classnames from 'classnames'
+import {View,Text} from '@tarojs/components'
 export default function Modal(props) {
   const { closePostion = 'top-right', onClose = () => { }, top = '40%', hideCloseButton = false, closeOnClickOverlay = false, closePos = { right: 0, top: -30 } } = props
 

c_client/src/components/_tb_comps/Rank/RankList/RankList.module.less

@@ -9,9 +9,10 @@
 }
 .scroll-item {
     .flex-row-space();
-    .wh(100%,66px);
+    .wh(100%,70px);
     background-color: #F7F0E6;
     border: 1px solid #ECDBC0;
+    box-sizing: border-box;
 }
 .scroll-item__rank {
     width: 33%;

c_client/src/components/_tb_comps/RotateWheel/RotateWheel.jsx

@@ -29,8 +29,6 @@ const RotateWheel = props => {
   const [prizelist, setPrizelist] = useState(prizeList);
   /* 平分角度 */
   const [angle, setAngle] = useState(oneTurn / divideNum);
-  /* my.createAniamation */
-  const [myAnimation, setMyAnimation] = useState();
   /* 展示奖品列表 */
   const [show, setShow] = useState(false);
   /* 转动一圈时的角度值 */
@@ -164,23 +162,6 @@ const RotateWheel = props => {
     setRotateInOneTurn(oneturnAngle);
   };
 
-  // my.createAnimation 旋转动画rot:旋转角度，timegap:旋转时间
-  // const animateRotation = (rot, timegap) => {
-  //     var animation = my.createAnimation({
-  //       transformOrigin: "center center",
-  //       duration: 5000,
-  //       timeFunction: "ease-out",
-  //       delay: 0
-  //     })
-  //     console.log('animation',animation);
-
-  //     animation.rotate(rot).step();
-  //     setMyAnimation(animation.export())
-  //     setTimeout(() => {
-  //         setMyAnimation()
-  //     }, 5000);
-  // }
-
   return (
     <View
       className={styles["rotate"]}
@@ -201,7 +182,6 @@ const RotateWheel = props => {
             ? `all ${ani.option.timeFunction} ${ani.option.duration}ms`
             : ""
         }}
-        // animation={myAnimation}
       >
         {show &&
           prizelist.length &&

c_client/src/components/_tb_comps/RotateWheel/rotatewheel.md

-**记事本打开**
+**记事本打开((cmd + k) + v)** 
 
 ##### 大转盘配置项入参
 

c_client/src/components/_tb_modal/JackpotModal/JackpotModal.jsx

@@ -20,7 +20,11 @@ const JackpotModal = (props) => {
       const prizeId = prizesData.id || prizesData._id
       const type = prizesData.type
       const result = await getReceive({ prizeId, type })
-      if (result) {
+      if(result && !result.isVip){
+        commonToast(result.message)
+        // TODO 非会员  积分领取   入会处理
+
+      } else {
         commonToast(result.message)
       }
     } else {

c_client/src/const.js

@@ -25,62 +25,7 @@ export const CLOUD_OBJ = {
   '3':'cloud://B8F0BA22BBA74F8FEA261E1CC9D55355/欢呼声.mp3'
 }
 
-/* 测试数据mock */
-export const prizeList = [
-  {
-    image:
-      "https://yun.duiba.com.cn/spark/assets/240121a7e7e10a66ad0cfa99a8b3ba9631fc7855.png",
-      name:'商品描述商品描述商品描述商品描述商品描述1',
-      content:'商品描述商品描述商品描述商品描述商品描述1',
-      hasBtn:true
-  },
-  {
-    image:
-      "https://yun.duiba.com.cn/spark/assets/f9160b053f525455503ea58ae6b43bacea400362.png",
-      name:'商品描述商品描述商品描述商品描述商品描述2',
-      content:'商品描述商品描述商品描述商品描述商品描述2'
 
-  },
-  {
-    image:
-      "https://yun.duiba.com.cn/spark/assets/28b868b5da81ebd28a4eb14291a8ac287937221c.png",
-      name:'商品描述商品描述商品描述商品描述商品描述3',
-      content:'商品描述商品描述商品描述商品描述商品描述3'
-  },
-  {
-    image:
-      "https://yun.duiba.com.cn/spark/assets/3c305fb907bbebb85ad392cb959fbe62200c407f.png",
-      name:'商品描述商品描述商品描述商品描述商品描述4',
-      content:'商品描述商品描述商品描述商品描述商品描述4'
-
-  },
-  {
-    image:
-      "https://yun.duiba.com.cn/spark/assets/28b868b5da81ebd28a4eb14291a8ac287937221c.png",
-      name:'商品描述商品描述商品描述商品描述商品描述5',
-      content:'商品描述商品描述商品描述商品描述商品描述5'
-  },
-  {
-    image:
-      "https://yun.duiba.com.cn/spark/assets/3c305fb907bbebb85ad392cb959fbe62200c407f.png",
-      name:'商品描述商品描述商品描述商品描述商品描述6',
-      content:'商品描述商品描述商品描述商品描述商品描述6'
-
-  },
-  {
-    image:
-      "https://yun.duiba.com.cn/spark/assets/554a90eee5a31ae7628950907974bdee2da8c01e.png",
-      name:'商品描述商品描述商品描述商品描述商品描述7',
-      content:'商品描述商品描述商品描述商品描述商品描述7'
-
-  },
-  {
-    image:
-      "https://yun.duiba.com.cn/spark/assets/554a90eee5a31ae7628950907974bdee2da8c01e.png",
-      name:'商品描述商品描述商品描述商品描述商品描述8',
-      content:'商品描述商品描述商品描述商品描述商品描述8'
-  }
-];
 
 /* 
   浏览页倒计时标识

c_client/src/hooks/useReceive.js

 import { useCallback } from 'react'
 import { checkIsMember } from 'tbcc-sdk-ts/lib/utils'
 import tbccTs from 'tbcc-sdk-ts'
-import { PRIZE_TYPE } from '@/const'
+import { PRIZE_TYPE } from '@/config/myPrize.config'
 
 const { getUserAddress } = tbccTs.tb
 
@@ -15,14 +15,16 @@ const useReceive = (config) => {
     if (!isVip) {
       return {
         message: '需加入会员才能领取成功哦',
-        state: 'error'
+        state: 'error',
+        isVip:isVip
       }
     }
     const { success, data } = await receiveEnamePrize({ id })
     if (success && data) {
       return {
         message: '领取成功',
-        state: 'success'
+        state: 'success',
+        isVip: true
       }
     }
   }, [checkIsMember, receiveEnamePrize])
@@ -33,7 +35,8 @@ const useReceive = (config) => {
     if (success && data) {
       return {
         message: '领取成功',
-        state: '领取成功'
+        state: '领取成功',
+        isVip: true
       }
     }
   }, [receiveEnamePrize])
@@ -47,12 +50,15 @@ const useReceive = (config) => {
     if (success && data) {
       return {
         message: '领取成功',
-        state: 'success'
+        state: 'success',
+        isVip: true
+
       }
     } else {
       return {
         message: errorMessage,
-        state: 'error'
+        state: 'error',
+        isVip: true
       }
     }
   }, [receiveObjectPrize])
@@ -66,7 +72,9 @@ const useReceive = (config) => {
     if (!userAddress) {
       return {
         message: errorMessage,
-        state: 'error'
+        state: 'error',
+        isVip: true
+
       }
     }
     const { name, telNumber, provinceName, cityName, cityCode, countyName, detailInfo, streetName } = userAddress || {}

c_client/src/mock.js

@@ -87,7 +87,7 @@ export const TASK_DATA = [
 export const RANK_LIST = [
     {
         rank: 1,
-        userNick: '用户昵称',
+        userNick: '用户昵称用户昵称用户昵称',
         hotValue: 98882892
     },
     {
@@ -119,6 +119,31 @@ export const RANK_LIST = [
         rank: 7,
         userNick: '用户昵称',
         hotValue: 98882892
+    },
+    {
+        rank: 8,
+        userNick: '用户昵称',
+        hotValue: 98882892
+    },
+    {
+        rank: 9,
+        userNick: '用户昵称',
+        hotValue: 98882892
+    },
+    {
+        rank: 10,
+        userNick: '用户昵称',
+        hotValue: 98882892
+    },
+    {
+        rank: 11,
+        userNick: '用户昵称',
+        hotValue: 98882892
+    },
+    {
+        rank: 12,
+        userNick: '用户昵称',
+        hotValue: 98882892
     }
 ]
 
@@ -344,4 +369,16 @@ export const prizeList = [
         content:'商品描述商品描述商品描述商品描述商品描述8'
   
     }
-];
+];
\ No newline at end of file
+
+export const BARRAGE_LIST = [
+    '111',
+    '222',
+    '333',
+    '444',
+    '555',
+    '666',
+    '777',
+    '888',
+    '999'
+]
\ No newline at end of file

c_client/src/pages/index/index.jsx

@@ -11,23 +11,13 @@ import RuleModal from '@/components/_tb_modal/RuleModal/RuleModal'
 import DoHelpModal from '@/components/_tb_modal/DoHelpModal/DoHelpModal'
 import TasksModal from '@/components/_tb_modal/TasksModal/TasksModal'
 import CountDown from '@/components/_tb_comps/CountDown'
+import JackpotModal from '@/components/_tb_modal/JackpotModal'
 import styles from './index.module.less'
 import tbcc from 'tbcc-sdk-ts'
 import { useEffect } from 'react'
 const { navigateTo, openDetail, showSharePanel } = tbcc.tb
 const { getImgShareUrl, checkIsMember, validateActivityStatus } = tbcc.utils
 
-import {useAudio} from '@/hooks/useAudio'
-import {CLOUD_OBJ, BGMUSIC_URL} from '@/const'
-
-import ScrollXView from '@/components/_tb_comps/ScrollXView/ScrollXView'
-
-import SwiperView from '@/components/_tb_comps/SwiperView/SwiperView'
-
-import RotateWheel from '@/components/_tb_comps/RotateWheel/RotateWheel'
-
-import {prizeList} from '@/const'
-
 const INDEX_CONFIG = {
   bg: '', // 背景 cloud://C4015B7CEC23CF013A78247E2852524F//火箭待机小球抖动.json
   ruleButton: '', // 规则按钮
@@ -36,50 +26,6 @@ const INDEX_CONFIG = {
   taskButton: '' // 任务按钮
 }
 
-const rotateConfig = {
-  bg: 'https://yun.duiba.com.cn/spark/assets/8b6e920ffd09fab8f9ac2de09f9154879f4d0607.png',
-  ratio: 0.65,
-  radius: 300,
-  circles: 4,
-  divideNum: 8,
-  duration: 5000,
-  timeFunction:'ease-in-out',
-  nodeInfo:{
-      width:100,
-      height:100
-  },
-  imgInfo:{width:80,height:80},
-  showWay:'negative',//positive/negative
-  isShowPrizeName:true,
-  prizeNameWidthRatio:1.2
-}
-
-const SCROLLXVIEW_CONFIG = {
-  prizeList: [], 
-  containerWidth : 200, 
-  containerHeight : 200,
-  imgWidth:120,
-  imgHeight:120,
-  isShowPrizeName:true,
-  prizeInCenterNum:3,
-  marginRight:26,
-  backgroundColor:'#E7E7EF',
-  backgroundImage:''
-}
-
-const swiper_config = {
-    easingFunction:`linear`,
-    circular:true,
-    autoplay:false,
-    vertical:false,
-    duration:1000,
-    interval:1500,
-    disableTouch:false,
-    swiperGroup:{width:300,height:300,overflow:''},
-    swiperContent:{width:250,height:300,backgroundColor:'#fff',backgroundImage:'',borderRadius:25},
-    imgContent:{width:200,height:200},
-    textContent:{width:240,height:60}
-}
 
 function Index() {
   const app = getApp()
@@ -91,6 +37,9 @@ function Index() {
   const [ ruleModalVisible, setRuleModalVisible ] = useState(false)
   const [ tasksModalVisible, setTasksModalVisible ] = useState(false)
   const [updateFlag, setUpdateFlag] = useState(1)
+
+  const [prizeModalVisible,setPrizeModalVisible] = useState(false)
+
   // 分享图
   const SHARE_IMG = useRef('')
   // 助力弹窗类型
@@ -98,15 +47,9 @@ function Index() {
   // 助力弹窗标识
   const showHelp = useRef(false)
 
-  /* 背景音乐 */
-  const {playAudio,musicUrl,setOpenStatus,openStatus} = useAudio(BGMUSIC_URL.MUSIC,true)
+  
 
-  const playCurrentAudio = () => {
-    setOpenStatus(!openStatus)
-    // playAudio(()=>{
-    //   onHandleIndex('prize')
-    // })
-  }
+  
 
   const fetchActivityInfo = async() => {
     const { success, data } = await API.getActivityBaseInfoById()
@@ -129,12 +72,12 @@ function Index() {
     // })
   },[])
   // 授权登录完成
-  useLogin(async (info) => {
-    console.warn(info)
-    console.warn(loginInfo)
-    handleVisibleModal(info)
-    // setUpdateFlag(1)
-  })
+  // useLogin(async (info) => {
+  //   console.warn(info)
+  //   console.warn(loginInfo)
+  //   handleVisibleModal(info)
+  //   // setUpdateFlag(1)
+  // })
   // 查看是否有助力信息
   const getShareInfo = async () => {
     const { success, data } = await API.getShareInfo()
@@ -212,18 +155,22 @@ function Index() {
 
       <View className={styles.bemember} onTap={() => setMemberVisible(true)}>入会</View>
 
-      {/* 奖品查看左右滑动 */}
-      {/* <ScrollXView {...SCROLLXVIEW_CONFIG} prizeList={prizeList} /> */}
-
-      {/* swiper左右滑动 */}
-      <View className='view' onTap={playCurrentAudio}>play audio</View>
+      <View className={styles['prize_modal_btn']} onTap={()=>setPrizeModalVisible(true)}>中奖弹窗</View>
 
-      {/* <SwiperView   swiperList={prizeList} /> */}
 
+      {/* 中奖弹窗 */}
+      {
+        prizeModalVisible &&
+          <JackpotModal 
+            closePostion='bottom'
+            bg=''
+            width='500'
+            height='500'
+            top='45%'
+            onClose={() => setPrizeModalVisible(false)}
+          />
 
-      {/* 大转盘 */}
-      {/* <RotateWheel {...rotateConfig} callback={()=>{}} /> */}
-
+      }
 
       {
         tasksModalVisible &&

c_client/src/pages/preComp/preComp.jsx

@@ -4,7 +4,7 @@ import { useDidShow, useRouter, useDidHide, getApp } from '@tarojs/taro'
 import API from '@/api'
 import { useLogin, useLoginFromShare } from '@/hooks/useLogin'
 import { useActivityInfoModel, useLoginInfoModel } from '@/store'
-import { prizeList } from '@/mock'
+import { prizeList, BARRAGE_LIST } from '@/mock'
 
 import styles from './preComp.module.less'
 
@@ -24,6 +24,15 @@ import RankTitle from '@/components/_tb_comps/Rank/RankTitle/RankTitle'
 
 import RankList from '@/components/_tb_comps/Rank/RankList/RankList'
 
+import Demo from '@/components/_tb_comps/_Progress/demo' 
+
+import Countdown from '@/components/_tb_comps/CountDown/CountDown'
+
+// import Demo from '@/components/_tb_comps/Rank/demo/index'
+
+
+import { VerticalBarrage } from '@/components/_tb_comps/Barrage'
+
 
 const rotateConfig = {
     bg: 'https://yun.duiba.com.cn/spark/assets/8b6e920ffd09fab8f9ac2de09f9154879f4d0607.png',
@@ -70,6 +79,14 @@ const swiper_config = {
     textContent:{width:300,height:60}
 }
 export default function PreComp(props) {
+
+    /* 背景音乐 */
+  const {playAudio,musicUrl,setOpenStatus,openStatus} = useAudio(BGMUSIC_URL.MUSIC,true)
+
+  const playCurrentAudio = () => {
+    setOpenStatus(!openStatus)
+  }
+
     return(
         <ContainerFit hasFitPsd={true}>
             <View className={styles['scroll-view']}>
@@ -83,6 +100,24 @@ export default function PreComp(props) {
                 {/* swiper左右滑动 */}
                 <SwiperView swiperList={prizeList} />
             </View>
+
+            {/* 排行榜 进度条 */}
+            <Demo />
+
+            {/* 倒计时 */}
+            <View 
+                className={styles['view']} 
+                style={{
+                    marginTop:`${300/100}rem`
+                }}
+            >
+                {/* <CountDown targetTime="2021-10-01 10:00:00" /> */}
+                <View className={styles['view']} onTap={playCurrentAudio}>play audio</View>
+            </View>
+
+            {/* 竖向弹幕 */}
+            <VerticalBarrage dataList={BARRAGE_LIST} />
+
         </ContainerFit>
     )
 }
\ No newline at end of file