add:swiper轮播

c_client/config/default.js

 export default {
-    hasCanvas: true, // 是否开启游戏模块自动注入dist
+    hasCanvas: false, // 是否开启游戏模块自动注入dist
     defaultPlugins: [
         [
             '@pluve/taro-plugin-mars', // taro暂时未支持阿里小程序自定义插件  需要引用插件的页面需配置

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

@@ -25,6 +25,8 @@ 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: '', // 规则按钮
@@ -67,15 +69,15 @@ const SCROLLXVIEW_CONFIG = {
 const swiper_config = {
     easingFunction:`linear`,
     circular:true,
-    autoplay:true,
+    autoplay:false,
     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}
+    textContent:{width:240,height:60}
 }
 
 function Index() {
@@ -96,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() => {
@@ -126,10 +128,10 @@ function Index() {
     // })
   },[])
   // 授权登录完成
-  useLogin(async (info) => {
-    handleVisibleModal(info)
-    // setUpdateFlag(1)
-  })
+  // useLogin(async (info) => {
+  //   handleVisibleModal(info)
+  //   // setUpdateFlag(1)
+  // })
   // 查看是否有助力信息
   const getShareInfo = async () => {
     const { success, data } = await API.getShareInfo()
@@ -211,13 +213,14 @@ function Index() {
       {/* <ScrollXView {...SCROLLXVIEW_CONFIG} prizeList={prizeList} /> */}
 
       {/* swiper左右滑动 */}
-      {/* <SwiperView {...swiper_config}  swiperList={prizeList} /> */}
+      <View className='view' onTap={playCurrentAudio}>play audio</View>
+
+      {/* <SwiperView   swiperList={prizeList} /> */}
 
 
       {/* 大转盘 */}
-      <RotateWheel {...rotateConfig} callback={()=>{}} />
+      {/* <RotateWheel {...rotateConfig} callback={()=>{}} /> */}
 
-      <View className='view' onTap={playCurrentAudio}>play audio</View>
 
       {
         tasksModalVisible &&

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