Skip to content

T
taobao-mini-template
Commit 1663c492 authored by mqf_0707's avatar mqf_0707
Browse files
Options

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
parents 824d386b 3870608b
Hide whitespace changes
Inline Side-by-side
Showing with 350 additions and 199 deletions
c_client/src/components/_tb_comps/Barrage/HorizontalBarrage/Barrage.jsx
View file @ 1663c492
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
})
i++
if (i === barrageList.length - 1) {
if (self.props.Infinite) {
i = 0
} else {
clearInterval(self.timer)
}
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
})
.export()
)
if (nowIndex.current < barrageList.length - 1) {
nowIndex.current = nowIndex.current + 1
} else {
nowIndex.current = 0
}
}, 1500)
}
}, interval + 1000)
}, [ barrageList, width ])
useEffect(() => {
callback()
return () => clearInterval(timer.current)
}, [ callback ])
render() {
const { barrageWay } = this.state
return (
<View className={styles['barrage-fly']}>
{barrageWay.map((item, i) => {
if (!item?.context) return null
useEffect(() => {
createData()
return () => {}
}, [])
return (
<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
View file @ 1663c492
.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;
height: 64px;
line-height: 64px;
color: #f9c797;
font-size: 32px;
padding-right: 30px;
}
.barrage-textFly {
flex-shrink: 0;
height: 64px;
overflow: hidden;
line-height: 64px;
color: #f9c797;
font-size: 32px;
padding: 0 10px;
box-sizing: border-box;
text-align: center;
}
.barrage-text {
white-space: nowrap;
}
.barrage-text {
white-space: nowrap;
}
@keyframes first {
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.jsx
View file @ 1663c492
......@@ -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
View file @ 1663c492
.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;
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_out{
// animation: moveout 0.8s linear ;
// &.move_right{
// transform: translateX(300px);
// transition: all 1s ease;
// }
// &.item_middle{
// transform: translateX(0px);
// transition: all 1s ease;
// }
}
}
}
@keyframes movein {
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.md
View file @ 1663c492
......@@ -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,21 +31,19 @@
```jsx
import SwiperView from '@/components/_tb_comps/SwiperView/SwiperView'
const swiperConfig = { //不传走默认配置
swiperList:[],
isSpecial:true,
easingFunction:`linear`,
circular:true,
autoplay:false,
vertical:false,
duration:1000,
interval:1500,
disableTouch:false,
swiperGroup:{width:300,height:400},
swiperContent:{width:300,height:400},
imgContent:{width:200,height:200},
textContent:{width:300,height:60}
}
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}
}
export const Index = () => {
return(
......
c_client/src/hooks/useAudio.js
View file @ 1663c492
......@@ -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
View file @ 1663c492
......@@ -86,4 +86,25 @@ export const Other = () => {
let musics = my.getStorageSync({ key: 'musicStatus' }).data;
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
View file @ 1663c492
......@@ -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
View file @ 1663c492
......@@ -45,84 +45,77 @@ 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) {
bgs[k].stop();
}
// bgs[k].isOn = false; /// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
}
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]) {
console.log("enter inner before the createAudio function", src, loop);
bgs[key] = createAudio({
src: src,
autoplay: true,
loop: loop /// TODO 暂时无效？2020.08.12 目前有效，但stop后还会跑数据，导致到音频结束到时间又自动播放
});
const key = src;
console.log('---------->>>>>>>>>>>>>ison',isOn);
if (isOn) {
if (!bgs[key]) {
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;
});
bgs[key].onPlay(() => {
bgs[key].isOn = true;
});
bgs[key].onStop(() => {
bgs[key].isOn = false;
});
bgs[key].onStop(() => {
bgs[key].isOn = false;
});
const systemInfo = await getSystemInfo();
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")) {
// 安卓
bgs[key].play();
} else if (
systemInfo?.platform.includes("iOS") ||
systemInfo?.platform.includes("iPhone OS ")
) {
// ios
bgs[key].isOn = false;
}
delete bgs[key];
callbackFn && callbackFn();
}
});
bgs[key].play(); // 安卓有时候autoplay好像莫得用
// console.log(src)
// bgs[key].isOn = true; /// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
} else {
console.log("---------->>>>>>>>>>>>>not enter ");
/// 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];
callbackFn && callbackFn();
}
});
bgs[key].play(); // 安卓有时候autoplay好像莫得用
// console.log(src)
// bgs[key].isOn = true; /// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
bgs[key].play();
// bgs[key].isOn = true; /// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
callbackFn && callbackFn();
}
} 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事件
callbackFn && callbackFn();
} else {
callbackFn && callbackFn();
}
}
};
} else {
console.log('---------->>>>>>>>>>>>>not enter ');
bgs[key].play();
// bgs[key].isOn = true; /// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
callbackFn && callbackFn();
}
} 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事件
callbackFn && callbackFn();
} else {
callbackFn && callbackFn();
}
}
}
\ No newline at end of file
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