Skip to content

T
taobao-mini-template
Commit 065b1888 authored by wanghuan's avatar wanghuan
Browse files
Options

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

parent 46995013
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2463 additions and 2545 deletions
c_client/src/components/_tb_comps/SwiperView/SwiperView.jsx 0 → 100644
View file @ 065b1888
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 0 → 100644
View file @ 065b1888
.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
View file @ 065b1888
......@@ -131,3 +131,50 @@ export const HELP_MODAL_SHOW = {
SHOW: 1, // 已弹
NOT_SHOW: 2, // 未弹
}
/* 背景音乐 应用：牧场消消乐有效，其他应用需要重新上传文件 */
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 0 → 100644
View file @ 065b1888
/**
* @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
View file @ 065b1888
......@@ -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
View file @ 065b1888
......@@ -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
View file @ 065b1888
......@@ -185,3 +185,74 @@ 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
c_client/yarn.lock
View file @ 065b1888
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment