playBg方法修改，添加useAudio，简单swiperx

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

+import React, { useState, useEffect } from "react";
+import { View, Image, Text, Swiper, SwiperItem } from "@tarojs/components";
+
+import './SwiperView.less'
+import tbcc from 'tbcc-sdk-ts'
+const {navigateTo,commonToast,redirectTo,navigateBack} = tbcc.tb
+
+export const EASING_WAYS = {
+    'DEFAULT':'default',
+    'LINEAR':'linear',
+    'EASEIN':'easeInCubic',
+    'EASEOUT':'easeOutCubic',
+    'EASEINOUT':'easeInOutCubic'
+}
+const SwiperView = (props) => {
+    /**
+     * @description swiperList
+     * {image,content,hasBtn}
+     */
+  const {
+    swiperList=[], 
+    isSpecial=false,
+    easingFunction=`${EASING_WAYS.LINEAR}`,
+    circular=true,
+    autoplay=true,
+    vertical=false,
+    duration=1000,
+    interval=1500,
+    disableTouch=true
+  } = props;
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  /**
+   * @description onchange事件
+   * @param {*} e 
+   */
+  const swiperChange = e => {
+    console.log("e", e);
+    setCurrentIndex(e.detail.current);
+  };
+  
+  /**
+   * @description 入场/出场动画
+   * @param {*} index 数组索引值
+   * @returns 返回类名
+   */
+  const useCustomAni = (index) => {
+    return `${currentIndex > 0 && currentIndex == index && 'move_in'} ${currentIndex - 1 == index && 'move_out'}`
+  }
+
+  /**
+   * @description 获取当前卡片详情之类
+   */
+  const getCurrentDetail = (item) => {
+    commonToast('111')
+  }
+
+  return (
+    <View className="scroll_container">
+      <Swiper
+        className="swiper_group"
+        current={currentIndex}
+        easingFunction={easingFunction}
+        onChange={swiperChange}
+        circular={circular}
+        vertical={vertical}
+        autoplay={autoplay}
+        duration={duration}
+        interval={interval}
+        disableTouch={disableTouch}
+      >
+        {swiperList.length &&
+          swiperList.map((item, i) => (
+            <SwiperItem>
+              <View
+                className={`scroll_item ${i === currentIndex && isSpecial ? "current_item" : ""} ${useCustomAni(i)}
+                `}
+              >
+                {i === currentIndex &&  (
+                  <Image
+                    className="checkPic"
+                    src="https://yun.dui88.com/tebuXinYuan/checkGoods.png"
+                  ></Image>
+                )}
+                <View className="item_img_content">
+                  {/* 单个swiper主要内容 */}
+                  <Image className="img" style={{width:`${400/100}rem`,height:`${240/100}rem`}} src={item.image}></Image>
+                  {
+                    item?.content &&
+                    <View className='text_content' >
+                      <View className='text' >{item.content}</View>
+                    </View>
+                  }
+                  {
+                    item?.hasBtn &&
+                    <View className='item_btn' >
+                      <View className='right_btn' onTap={()=>getCurrentDetail(item)}>按钮{i}</View>
+                    </View>
+                  }
+                </View>
+              </View>
+            </SwiperItem>
+          ))}
+      </Swiper>
+    </View>
+  );
+};
+export default SwiperView;

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

+
+.scroll_container{
+    width: 450px;
+    margin: 300px auto 0;
+    overflow: hidden;
+
+    .swiper_group {
+        margin: 0 auto;
+        width: 450px;
+        overflow: visible;
+        position: relative;
+        swiper-item {
+            width: 450px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .scroll_item {
+          width: 400px;
+          margin: 0 auto;
+          position: relative;
+          border-radius: 20px;
+          // background-image: url("https://yun.duiba.com.cn/4a45a818-7d3f-4a97-9fb6-a18c9f635520.png");
+          .image-property(cover, top center);
+          .checkPic {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            position: absolute;
+            right: 40px;
+            top: 40px;
+          }
+          .item_img_content {
+            width: 100%;
+            // padding: 20px;
+            .img {
+              margin: 20px auto 0;
+              border-radius: 20px;
+              background-repeat: no-repeat;
+              background-position: top center;
+            }
+            .text_content{
+              width: 100%;
+              height: 160px;
+              box-sizing: border-box;
+              padding: 16px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              .text{
+                color: #232323;
+                text-align: center;
+                font-size: 24px;
+                padding: 16px;
+
+              }
+            }
+            .item_btn{
+              width: 100%;
+              .right_btn{
+                // background-image: url('https://yun.duiba.com.cn/spark/assets/33bc06a1be4bf250345e24900bc5719992328d4e.png');
+                // .image-property(cover, center center);
+                width: 200px;
+                height: 65px;
+                margin: 0 auto;
+                border-radius: 40px;
+                border: 2px solid rgb(79, 172, 118) ;
+                text-align: center;
+                line-height: 65px;
+                font-size: 26px;
+
+                animation: scales 2s infinite;
+              }
+            }
+          }
+          &.current_item {
+            .item_img_content {
+                .img{}
+                .text_content{
+                    .text{}
+                }
+                .item_btn{
+                    .right_btn{}
+                }
+            }
+          }
+
+          // &.move_in{
+          //   animation: movein 0.8s linear forwards;
+          // }
+          // &.move_out{
+          //   animation: moveout 0.8s linear ;
+          // }
+    
+        }
+        
+      }
+}
+
+@keyframes movein {
+  from {
+    transform: perspective(1000px) translate3d(0,0,0) rotate3d(0, 1, 0, 25deg) scale(0.85);
+    transform-style: preserve-3d;
+    transform-origin: 45% center;
+  }
+  50%{
+    transform: perspective(1000px) translate3d(0,20px,0) rotate3d(0, 1, 0, 25deg) scale(0.85);
+    transform-style: preserve-3d;
+    transform-origin: 45% center;
+  }
+  to {
+    transform: perspective(1100px) translate3d(0,0,0) rotate3d(0, 1, 0, 0deg) scale(1);
+    transform-origin: 45% center;
+    transform-style: preserve-3d;
+  }
+  }
+
+@keyframes moveout{
+  from {
+    transform: perspective(1000px) rotate3d(0, 1, 0, 0deg) scale(1);
+    transform-style: preserve-3d;
+    transform-origin: 45% center;
+  }
+  50%{
+    transform: perspective(1000px) rotate3d(0, 1, 0, 25deg) scale(1);
+    transform-style: preserve-3d;
+    transform-origin: 45% center;
+  }
+  to {
+    transform: perspective(1200px) rotate3d(0, 1, 0, 25deg) scale(0.85);
+    transform-origin: 45% center;
+    transform-style: preserve-3d;
+  }
+}
+
+@keyframes scales {
+  from{
+    transform: scale(1,1);
+    transform-origin: center;
+  }
+  50%{
+    transform: scale(1.1,1.1);
+    transform-origin: center;
+  }
+  to{
+    transform: scale(1,1);
+    transform-origin: center;
+  }
+}
\ No newline at end of file

c_client/src/const.js

@@ -130,4 +130,51 @@ export const HELP_MODAL_TYPE = {
 export const HELP_MODAL_SHOW = {
   SHOW: 1, // 已弹
   NOT_SHOW: 2, // 未弹
-}
+}
\ No newline at end of file
+/* 背景音乐 应用：牧场消消乐有效，其他应用需要重新上传文件 */
+export const BGMUSIC_URL = {
+  MUSIC:'cloud://FBE3C154661ACEEBA164E8B70B4D71E2/yoga bgm.mp3'
+}
+/* 点击音效 */
+export const CLOUD_OBJ = {
+  '1':'cloud://0BD38A1B739CCF6A552396F3FE2D5A09/开始-音效.mp3',
+  '2':'cloud://93FBC274B6B43CE37B0A70DF8C1AFA52/答题-音效.mp3',
+  '3':'cloud://B8F0BA22BBA74F8FEA261E1CC9D55355/欢呼声.mp3'
+}
+
+/* 测试数据mock */
+export const prizeList = [
+  {
+    image:
+      "//yun.duiba.com.cn/spark/assets/240121a7e7e10a66ad0cfa99a8b3ba9631fc7855.png",
+      name:'商品描述商品描述商品描述商品描述商品描述1',
+      content:'商品描述商品描述商品描述商品描述商品描述1',
+  },
+  {
+    image:
+      "//yun.duiba.com.cn/spark/assets/f9160b053f525455503ea58ae6b43bacea400362.png",
+      name:'商品描述商品描述商品描述商品描述商品描述2',
+      content:'商品描述商品描述商品描述商品描述商品描述2'
+
+  },
+  {
+    image:
+      "//yun.duiba.com.cn/spark/assets/28b868b5da81ebd28a4eb14291a8ac287937221c.png",
+      name:'商品描述商品描述商品描述商品描述商品描述3',
+      content:'商品描述商品描述商品描述商品描述商品描述3'
+  },
+  {
+    image:
+      "//yun.duiba.com.cn/spark/assets/3c305fb907bbebb85ad392cb959fbe62200c407f.png",
+      name:'商品描述商品描述商品描述商品描述商品描述4',
+      content:'商品描述商品描述商品描述商品描述商品描述4'
+
+  },
+  {
+    image:
+      "//yun.duiba.com.cn/spark/assets/554a90eee5a31ae7628950907974bdee2da8c01e.png",
+      name:'商品描述商品描述商品描述商品描述商品描述5',
+      content:'商品描述商品描述商品描述商品描述商品描述5'
+
+  }
+];
\ No newline at end of file

c_client/src/hooks/useAudio.js

+/**
+ * @description 音乐
+ */
+ import React, { useState, useEffect } from "react";
+ import { playBgMusic1 } from "@/utils/util";
+ const app = getApp();
+ 
+ /**
+  * @description 一个页面不能同时create两个音频文件
+  * @param {*} url cloud文件链接
+  * @param {*} isBgMusic 是否自动调用(背景音乐自动调用),非背景音乐(点击音效)手动调用
+  * @returns 
+  */
+ export const useAudio = (url, isBgMusic) => {
+   const [musicUrl, setMusicUrl] = useState();
+   const [openStatus,setOpenStatus] = useState(true);
+   useEffect(() => {
+     getMusicInfo();
+   }, []);
+
+   useEffect(()=>{
+    if(isBgMusic){
+        console.log('enter use audio function with bg music');
+        playAudio();
+    }
+   },[musicUrl,openStatus])
+
+   /**
+    * @description 获取音频url链接
+    */
+   const getMusicInfo = async () => {
+     const resultSrc = await app.cloud.file.getTempFileURL({ fileId: url });
+     console.log('resultSrc--------hook',resultSrc);
+     if (resultSrc[0]){
+       setMusicUrl(resultSrc[0].url);
+     } 
+   };
+   /**
+    * @description 播放音效
+    * @param {*} selfStatus 是否单独控制音效状态
+    */
+   const playAudio = (selfStatus = false) => {
+     console.log('musicUrl',musicUrl,'selfStatus',selfStatus)
+     if(!selfStatus){
+       selfStatus = openStatus
+     }
+     if(!musicUrl){
+       return
+     } else {
+       musicUrl && playBgMusic1(selfStatus, musicUrl, false);
+     }
+   };
+   return {
+     playAudio,
+     openStatus,
+     setOpenStatus,
+     musicUrl
+   };
+ };
+
+ 

c_client/src/pages/index/index.jsx

@@ -16,6 +16,13 @@ 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, prizeList} from '@/const'
+
+import ScrollXView from '@/components/_tb_comps/ScrollXView/ScrollXView'
+
+import SwiperView from '@/components/_tb_comps/SwiperView/SwiperView'
+
 const INDEX_CONFIG = {
   bg: '', // 背景 cloud://C4015B7CEC23CF013A78247E2852524F//火箭待机小球抖动.json
   ruleButton: '', // 规则按钮
@@ -24,6 +31,8 @@ const INDEX_CONFIG = {
   taskButton: '' // 任务按钮
 }
 
+
+
 function Index() {
   const { activityInfo, setActivityInfoAndStatus } = useActivityInfoModel()
   const { loginInfo } = useLoginInfoModel()
@@ -40,6 +49,11 @@ function Index() {
   // 助力弹窗标识
   const showHelp = useRef(false)
 
+  /* 背景音乐 */
+  const {playAudio,musicUrl,setOpenStatus,openStatus} = useAudio(BGMUSIC_URL.MUSIC,true)
+
+  
+
   const fetchActivityInfo = async() => {
     const { success, data } = await API.getActivityBaseInfoById()
     if(success) {
@@ -146,13 +160,19 @@ function Index() {
   }
 
   return (
-    <View className={homeStyle} style={{ backgroundImage: `url(${INDEX_CONFIG.bg})`}}>
+    <View className={homeStyle}>
       <View className={styles.rule} style={{ backgroundImage: `url(${INDEX_CONFIG.ruleButton})` }} onClick={() => setRuleModalVisible(true)}>活动规则</View>
       <View className={styles.my_prize} style={{ backgroundImage: `url(${INDEX_CONFIG.myPrizeButton})` }} onClick={() => onHandleIndex('prize')}>我的奖品</View>
       <View className={styles.tasks} style={{ backgroundImage: `url(${INDEX_CONFIG.taskButton})` }} onClick={() => setTasksModalVisible(true)}>任务</View>
       <View className={styles.games} style={{ backgroundImage: `url(${INDEX_CONFIG.taskButton})` }} onClick={() =>onHandleIndex('game') }>游戏</View>
 
       <View className={styles.bemember} onTap={() => setMemberVisible(true)}>入会</View>
+
+      {/* <ScrollXView prizeList={prizeList} /> */}
+
+      {/* swiper左右滑动 */}
+      <SwiperView  swiperList={prizeList} vertical={false} disableTouch={true} />
+
       {
         tasksModalVisible &&
           <TasksModal

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

@@ -8,6 +8,7 @@
   left: 0;
   right: 0;
   bottom: 0;
+  background-image: linear-gradient(45deg,#fbc2eb 10%, #a6c1ee);
 }
 .content_fixed {
   position: fixed;

c_client/src/utils/util.js

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