Merge branch 'c_client_taro-pack' of...

Merge branch 'c_client_taro-pack' of http://gitlab2.dui88.com/qinhaitao/taobao-mini-template into c_client_taro-pack

c_client/src/components/_tb_comps/Barrage/HorizontalBarrage/Barrage.jsx

-import React from 'react'
+import React, { useState, useEffect, useCallback, useRef } from 'react'
 import { View, Text } from '@tarojs/components'
-import styles from './Barrage.module.less'
+import Taro from '@tarojs/taro'
 
-class Barrage extends React.Component {
-  constructor(props) {
-    super(props)
-    //  页面数据存储
-    this.state = {
-      barrageWay: [],
-      barrageList: []
-    }
-    this.timer = null
-  }
+import styles from './Barrage.module.less'
 
-  componentDidMount() {
-    this.createData()
-    const self = this
-    setTimeout(() => {
-      self.addBarrageListObj()
-    }, 200)
-  }
+const Barrage = props => {
+  const {
+    dataList = [
+      '1撒撒打算打算打算的',
+      '2撒撒打算打算打算的',
+      '3撒撒打算打算打算的',
+      '4撒撒打算打算打算的',
+      '5撒撒打算打算打算的',
+      '3撒撒打算打算打算的',
+      '3撒撒打算打算打算的',
+      '3撒撒打算打算打算的',
+      '3撒撒打算打算打算的',
+      '3撒撒打算打算打算的',
+      '3撒撒打算打算打算的',
+      '3撒撒打算打算打算的'
+    ],
+    interval = 5000,
+    width = 500,
+    trackCount = 1
+  } = props
 
-  componentWillUnmount() {
-    clearInterval(this.timer)
-  }
+  const [ barrageList, setBarrageList ] = useState([])
+  const [ animationData, setAnimationData ] = useState(null)
+  const timer = useRef(null)
+  const nowIndex = useRef(0)
 
-  createData() {
-    const { dataList, trackCount = 1 } = this.props
-    const Tracks = Array.from(
-      { length: trackCount },
-      (v, k) => (k + 1) * 40 - 40
-    )
-    this.setState({
-      barrageList: dataList.map((item, index) => ({
-        width: item.length * 17 + 5,
+  const createData = () => {
+    const Tracks = Array.from({ length: trackCount }, (v, k) => (k + 1) * 40 - 40)
+    // TODO   多轨道弹幕
+    setBarrageList(
+      dataList.map((item, index) => ({
         top: Tracks[index < Tracks.length ? index : index % trackCount],
-        time: 5,
         context: item
       }))
-    })
+    )
   }
 
-  /* *
-   * 因为从后台获取到的是全部的数据，所以要把数据分开，让每条数据有先后之分
-   * 每隔一秒往barrageList 数组插入一条数据
-   * */
-  addBarrageListObj() {
-    const self = this
-    const { barrageList, barrageWay } = this.state
-    let i = 0
-    this.timer = setInterval(function () {
-      barrageWay.push(barrageList[i])
-      self.setState({
-        barrageWay: barrageWay
+  const callback = useCallback(() => {
+    timer.current = setInterval(() => {
+      setAnimationData(
+        Taro.createAnimation()
+          .translateX(nowIndex.current === 0 ? 0 : (-width / 2) * nowIndex.current)
+          .step({
+            duration: nowIndex.current === 0 ? 0 : 1000
           })
-      i++
-      if (i === barrageList.length - 1) {
-        if (self.props.Infinite) {
-          i = 0
+          .export()
+      )
+      if (nowIndex.current < barrageList.length - 1) {
+        nowIndex.current = nowIndex.current + 1
       } else {
-          clearInterval(self.timer)
-        }
-      }
-    }, 1500)
+        nowIndex.current = 0
       }
+    }, interval + 1000)
+  }, [ barrageList, width ])
+
+  useEffect(() => {
+    callback()
+    return () => clearInterval(timer.current)
+  }, [ callback ])
+
+  useEffect(() => {
+    createData()
+    return () => {}
+  }, [])
 
-  render() {
-    const { barrageWay } = this.state
   return (
-      <View className={styles['barrage-fly']}>
-        {barrageWay.map((item, i) => {
-          if (!item?.context) return null
+    <View id='barrage_wrap' style={`width:${width / 100}rem`} className={styles['barrage-wrap']}>
+      <View id='barrage_container' animation={animationData} className={styles['barrage-fly']}>
+        {barrageList.map((item, index) => {
           return (
-            <View
-              key={i}
-              className={styles['barrage-textFly']}
-              style={`animation: ${styles.first} ${item.time}s linear  forwards; top: ${item.top}px`}
-            >
+            <View id={`barrage-${index}`} key={index} style={`width:${width / 100}rem`} className={styles['barrage-textFly']}>
               {/* 弹幕内容 */}
               <Text className={styles['barrage-text']}>{item.context}</Text>
             </View>
           )
         })}
       </View>
+    </View>
   )
-  }
 }
 
 export default Barrage

c_client/src/components/_tb_comps/Barrage/HorizontalBarrage/Barrage.module.less

+.barrage-wrap {
+  height: 64px;
+  border: 1px solid red;
+  overflow: hidden;
+}
+
 .barrage-fly {
   position: relative;
   height: 100%;
-  width: 700px;
   z-index: 3;
+  display: flex;
+}
 
-  .barrage-textFly {
-    position: absolute;
+.barrage-textFly {
+  flex-shrink: 0;
   height: 64px;
+  overflow: hidden;
   line-height: 64px;
   color: #f9c797;
   font-size: 32px;
-    padding-right: 30px;
-  }
+  padding: 0 10px;
+  box-sizing: border-box;
+  text-align: center;
+}
 
-  .barrage-text {
+.barrage-text {
   white-space: nowrap;
-  }
 }
 
 @keyframes first {

c_client/src/components/_tb_comps/SwiperView/SwiperView.jsx

@@ -20,16 +20,17 @@ const SwiperView = (props) => {
     isSpecial=true,
     easingFunction=`${EASING_WAYS.LINEAR}`,
     circular=true,
-    autoplay=false,
+    autoplay=true,
     vertical=false,
     duration=1000,
     interval=1500,
     disableTouch=false,
-    swiperGroup={width:300,height:400},
-    swiperContent={width:300,height:400},
+    swiperGroup={width:300,height:300,overflow:''},
+    swiperContent={width:250,height:300,backgroundColor:'#fff',backgroundImage:'',borderRadius:25},
     imgContent={width:200,height:200},
-    textContent={width:300,height:60},
-    showLeftRightBtn=true
+    textContent={width:200,height:60},
+    showLeftRightBtn=true,
+    
   } = props;
 
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -38,7 +39,7 @@ const SwiperView = (props) => {
    * @param {*} e 
    */
   const swiperChange = e => {
-    console.log("e", e);
+    // console.log("e", e);
     setCurrentIndex(e.detail.current);
   };
   
@@ -47,8 +48,12 @@ const SwiperView = (props) => {
    * @param {*} index 数组索引值
    * @returns 返回类名
    */
-  const useCustomAni = (index) => {
-    return `${currentIndex > 0 && currentIndex == index && 'move_in'} ${currentIndex - 1 == index && 'move_out'}`
+  const useCustomAni = (i) => {
+    return `${((currentIndex < i && ((i !== swiperList.length - 1)||currentIndex!==0)) || ((currentIndex === swiperList.length - 1) && i == 0 ))  
+              ? 'item_right' 
+              : 
+              (((currentIndex > i && (i !== 0 || currentIndex !== swiperList.length - 1)) || (currentIndex !== 0 && i !== swiperList.length - 1))  ? 'item_left' : 'item_middle')
+            }`
   }
 
   /**
@@ -60,9 +65,42 @@ const SwiperView = (props) => {
     })
   }
 
+  const motionType = {
+    LEFT:"LEFT",
+    RIGHT:"RIGHT"
+  }
+
+  /**
+   * @description 
+   */
+
+  const turnRound = (type) => {
+
+    const motion = {
+      [motionType.LEFT]:()=>{
+        setCurrentIndex(currentIndex==0 ? swiperList.length - 1 : (currentIndex - 1))
+      },
+      [motionType.RIGHT]:()=>{
+        setCurrentIndex(currentIndex == swiperList.length - 1 ? 0 : (currentIndex + 1))
+      }
+    }
+
+    motion[type]();
+  }
+
+  useEffect(()=>{
+    console.log('cur----',currentIndex);
+  },[currentIndex])
+
   return (
-    <View className="scroll_container">
-      {/* <View className='left_btn' >&lt;&lt;</View> */}
+    <View 
+      className="scroll_container"
+      style={{
+        width:`${650/100}rem`,
+        overflow:'hidden'
+      }}
+    >
+      {/* <View className='left_btn' onTap={()=>turnRound('LEFT')}>&lt;&lt;</View> */}
       <Swiper
         className="swiper_group"
         current={currentIndex}
@@ -76,7 +114,8 @@ const SwiperView = (props) => {
         disableTouch={disableTouch}
         style={{
           width:`${swiperGroup.width/100}rem`,
-          height:`${swiperGroup.height/100}rem`
+          height:`${swiperGroup.height/100}rem`,
+          overflow:`${swiperGroup.overflow}`
         }}
       >
         {swiperList.length &&
@@ -86,7 +125,10 @@ const SwiperView = (props) => {
                 className={`scroll_item ${i === currentIndex && isSpecial ? "current_item" : ""} ${useCustomAni(i)}`}
                 style={{
                   width:`${swiperContent.width/100}rem`,
-                  height:`${swiperContent.height/100}rem`
+                  height:`${swiperContent.height/100}rem`,
+                  backgroundColor:`${ swiperContent.backgroundColor}`,
+                  backgroundImage:`${ swiperContent.backgroundImage}`,
+                  borderRadius:`${swiperContent.borderRadius/100}rem`
                 }}
                 onTap={()=>getCurrentDetail(item)}
               >
@@ -96,7 +138,9 @@ const SwiperView = (props) => {
                     src="https://yun.dui88.com/tebuXinYuan/checkGoods.png"
                   ></Image>
                 )} */}
-                <View className="item_img_content">
+                <View 
+                  className="item_img_content"
+                >
                   {/* 单个swiper主要内容 */}
                   <Image 
                     className="img" 
@@ -112,7 +156,6 @@ const SwiperView = (props) => {
                       style={{
                         width:`${textContent.width/100}rem`,
                         height:`${textContent.height/100}rem`,
-                        padding:`${0/100}rem ${16/100}rem`
                       }}
                     >
                       <View className='text' >{item.content}</View>
@@ -124,7 +167,7 @@ const SwiperView = (props) => {
           ))}
       </Swiper>
       
-      {/* <View className='right_btn' >&gt;&gt;</View> */}
+      {/* <View className='right_btn' onTap={()=>turnRound('RIGHT')}>&gt;&gt;</View> */}
     </View>
   );
 };

c_client/src/components/_tb_comps/SwiperView/SwiperView.less

 
 .scroll_container{
-    width: 450px;
+    // width: 450px;
+    // overflow: hidden;
     margin: 0 auto;
-    overflow: hidden;
+    // display: flex;
+    // justify-content: space-around;
+    // align-items: center;
+
+    
 
     .swiper_group {
         margin: 0 auto;
-        overflow: hidden;
         position: relative;
+
         swiper-item {
           width: 300px;
+          height: 300px;
             display: flex;
             justify-content: center;
             align-items: center;
+
+            .image-property(cover, center center);
+
         }
         .scroll_item {
-          width: 300px;
+          // width: 300px;
           margin: 0 auto;
           position: relative;
           border-radius: 20px;
@@ -40,10 +49,18 @@
             .text_content{
               margin: 0 auto;
               box-sizing: border-box;
+
+              display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                text-overflow: ellipsis;
+                overflow: hidden;
               .text{
                 color: #232323;
                 text-align: center;
+                line-height: 30px;
                 font-size: 24px;
+                
               }
             }
           }
@@ -56,16 +73,24 @@
             }
           }
 
-          // &.move_in{
-          //   animation: movein 0.8s linear forwards;
+          // &.item_left{
+          //   transform: translateX(-300px);
+          //   transition: all 1s ease;
+
+          // }
+          // &.move_right{
+          //   transform: translateX(300px);
+          //   transition: all 1s ease;
           // }
-          // &.move_out{
-          //   animation: moveout 0.8s linear ;
+          // &.item_middle{
+          //   transform: translateX(0px);
+          //   transition: all 1s ease;
           // }
     
         }
         
       }
+
 }
 
 @keyframes movein {

c_client/src/components/_tb_comps/SwiperView/SwiperView.md

@@ -10,8 +10,8 @@
 | duration   |   Number   |  滑动动画时长| 1000 |/|
 | interval   |   Number   |  自动切换时间间隔| 1500 |/|
 | easingFunction|String   |  缓动动画类型| linear |'default','linear'  'easeInCubic'     'easeOutCubic'  'easeInOutCubic'|
-| swiperGroup   |   Object   | 整个swiper的宽高 |{width:300,height:400}|/|
-| swiperContent   |   Object   | 单个swiperItem的宽高 |{width:300,height:400}|/|
+| swiperGroup   |   Object   | 整个swiper的宽高 |{width:300,height:300,overflow:''}|/|
+| swiperContent   |   Object   | 单个swiperItem的宽高 |{width:250,height:300,backgroundColor:'#fff',borderRadius:25,backgroundImage:''}|/|
 | imgContent   |   Object   | 图片宽高 |{width:200,height:200}|/|
 | textContent   |   Object   | 文本宽高 |{width:300,height:60}|/|
 
@@ -31,9 +31,7 @@
 ```jsx
 import SwiperView from '@/components/_tb_comps/SwiperView/SwiperView'
 
-const swiperConfig = { //不传走默认配置
-    swiperList:[], 
-    isSpecial:true,
+const swiper_config = {//不传走默认配置
   easingFunction:`linear`,
   circular:true,
   autoplay:false,
@@ -41,11 +39,11 @@ const swiperConfig = { //不传走默认配置
   duration:1000,
   interval:1500,
   disableTouch:false,
-    swiperGroup:{width:300,height:400},
-    swiperContent:{width:300,height:400},
+  swiperGroup:{width:300,height:300,overflow:''},
+  swiperContent:{width:250,height:300,backgroundColor:'#fff',backgroundImage:'',borderRadius:25},
   imgContent:{width:200,height:200},
-    textContent:{width:300,height:60}
-  }
+  textContent:{width:240,height:60}
+}
 
 export const Index = () => {
   return(

c_client/src/hooks/useAudio.js

@@ -42,7 +42,7 @@
     */
    const playAudio = (callbackFn=()=>{}) => {
      console.log('musicUrl',musicUrl,'selfStatus',openStatus)
-      musicUrl && playBgMusic1(openStatus, musicUrl, callbackFn);
+      musicUrl && playBgMusic1(openStatus, musicUrl, callbackFn,isBgMusic);
    };
    return {
      playAudio,

c_client/src/hooks/useAudio.md

@@ -87,3 +87,24 @@ export const Other = () => {
     console.log('musicStatus----改变值----->>>>>>>>>>',musics);
   }
 ```
+
++ 背景音效后台关闭
+```jsx
+    const {openStatus,setOpenStatus} = useAudio(CLOUD_OBJ['2'],true)
+
+    useDidHide(()=>{
+        // 停止背景音乐
+        openStatus && setOpenStatus(false)
+    })
+
+    useDidShow(()=>{
+        // 播放背景音乐(缓存处理)
+        let musicStatus =  my.getStorageSync({ key: 'musicStatus' }).data;
+        if(musicStatus){
+            setOpenStatus(true)
+        }
+
+        // 非缓存 默认开启
+        setOpenStatus(true)
+    })
+```
\ No newline at end of file

c_client/src/pages/index/index.jsx

@@ -20,6 +20,14 @@ 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: '', // 规则按钮
@@ -28,6 +36,51 @@ 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()
   const { activityInfo, setActivityInfoAndStatus } = useActivityInfoModel()
@@ -45,13 +98,13 @@ function Index() {
   const showHelp = useRef(false)
 
   /* 背景音乐 */
-  const {playAudio,musicUrl,setOpenStatus,openStatus} = useAudio(CLOUD_OBJ['1'])
+  const {playAudio,musicUrl,setOpenStatus,openStatus} = useAudio(BGMUSIC_URL.MUSIC,true)
 
   const playCurrentAudio = () => {
-    // setOpenStatus(!openStatus)
-    playAudio(()=>{
-      onHandleIndex('prize')
-    })
+    setOpenStatus(!openStatus)
+    // playAudio(()=>{
+    //   onHandleIndex('prize')
+    // })
   }
 
   const fetchActivityInfo = async() => {
@@ -154,8 +207,19 @@ function Index() {
 
       <View className={styles.bemember} onTap={() => setMemberVisible(true)}>入会</View>
 
+      {/* 奖品查看左右滑动 */}
+      {/* <ScrollXView {...SCROLLXVIEW_CONFIG} prizeList={prizeList} /> */}
+
+      {/* swiper左右滑动 */}
       <View className='view' onTap={playCurrentAudio}>play audio</View>
 
+      {/* <SwiperView   swiperList={prizeList} /> */}
+
+
+      {/* 大转盘 */}
+      {/* <RotateWheel {...rotateConfig} callback={()=>{}} /> */}
+
+
       {
         tasksModalVisible &&
           <TasksModal

c_client/src/utils/audio.js

@@ -45,14 +45,9 @@ export const getSystemInfo = () => {
   });
 };
 
-let bgs = {};
-export const playBgMusic1 = async (
-  isOn,
-  src,
-  callbackFn = () => {},
-  loop = false
-) => {
-  //待测试
+let bgs = {
+}
+export const playBgMusic1 = async (isOn, src, callbackFn=()=>{}, loop=false) => {//待测试
 
 	for (let k in bgs) {
 		if (bgs[k].isOn) {
@@ -62,17 +57,17 @@ export const playBgMusic1 = async (
 	}
 
 	const key = src;
-  console.log("---------->>>>>>>>>>>>>ison", isOn);
+  console.log('---------->>>>>>>>>>>>>ison',isOn);
 	if (isOn) {
 		if (!bgs[key]) {
-      console.log("enter inner before the createAudio function", src, loop);
+            console.log('enter inner before the createAudio function',src,loop);
 			bgs[key] = createAudio({
 				src: src,
 				autoplay: true,
 				loop: loop /// TODO 暂时无效？2020.08.12 目前有效，但stop后还会跑数据，导致到音频结束到时间又自动播放
 			});
 
-      console.log("----------------src", src, bgs[key], "bgs[key]");
+            console.log('----------------src',src,bgs[key],'bgs[key]')
 
 			bgs[key].onPlay(() => {
 				bgs[key].isOn = true;
@@ -84,19 +79,16 @@ export const playBgMusic1 = async (
 
             const systemInfo = await getSystemInfo();
 
-      console.log(systemInfo, "systemInfo-------systemInfo");
+            console.log(systemInfo,'systemInfo-------systemInfo')
 
 			/// TODO监听结束，因为loop无效  2020.08.12 loop有效，这个操作是为了解决stop之后还会跑音频数据的问题
 			bgs[key].onEnded(() => {
 				if (bgs[key].isOn) {
                     // 判断自己记录的开关
-          if (systemInfo?.platform.includes("Android")) {
+                    if(systemInfo?.platform.includes('Android')){
                         // 安卓
                         bgs[key].play();
-          } else if (
-            systemInfo?.platform.includes("iOS") ||
-            systemInfo?.platform.includes("iPhone OS ")
-          ) {
+                    } else if(systemInfo?.platform.includes('iOS') || systemInfo?.platform.includes('iPhone OS ')){
                         // ios
                         bgs[key].isOn = false;
                     }
@@ -107,8 +99,9 @@ export const playBgMusic1 = async (
 			bgs[key].play();	// 安卓有时候autoplay好像莫得用
 			// console.log(src)
 			// bgs[key].isOn = true;	/// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
+
 		} else {
-      console.log("---------->>>>>>>>>>>>>not enter ");
+            console.log('---------->>>>>>>>>>>>>not enter ');
 
 			bgs[key].play();
 			// bgs[key].isOn = true;	/// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
@@ -117,7 +110,7 @@ export const playBgMusic1 = async (
 	} else {
 		if (bgs[key]) {
 			// bgs[key].pause();	/// pause 垃圾，不能用
-      console.log("test stop function is work or not");
+            console.log('test stop function is work or not')
 			bgs[key].stop();
 			// bgs[key].isOn = false;	/// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
             callbackFn && callbackFn();
@@ -125,4 +118,4 @@ export const playBgMusic1 = async (
             callbackFn && callbackFn();
         }
 	}
-};
+}
\ No newline at end of file