Skip to content

T
taobao-mini-template
Commit 3753bb8b authored by wanghuan's avatar wanghuan
Browse files
Options

1

parent 4864b784
Show whitespace changes
Inline Side-by-side
Showing with 241 additions and 223 deletions
c_client/src/components/_tb_comps/RotateWheel/RotateWheel.jsx
View file @ 3753bb8b
import React,{useState, useEffect} from 'react' import React, { useState, useEffect } from "react";
import {View,Image,Text} from '@tarojs/components' import { View, Image, Text } from "@tarojs/components";
import styles from './RotateWheel.module.less' import styles from "./RotateWheel.module.less";
import {useThrottle} from '@/hooks/useThrottle' import { useThrottle } from "@/hooks/useThrottle";
import API from '@/api' import API from "@/api";
import { prizeList } from '@/mock' import { prizeList } from "@/mock";
import Taro,{showToast,redirectTo,navigateTo} from '@tarojs/taro' import Taro, { showToast, redirectTo, navigateTo } from "@tarojs/taro";
const oneTurn = 360; const oneTurn = 360;
const RotateWheel = (props) => { const RotateWheel = props => {
const { const {
bg='https://yun.duiba.com.cn/spark/assets/8b6e920ffd09fab8f9ac2de09f9154879f4d0607.png', containerInfo={width:600,height:600},
ratio=0.65, bg = "https://yun.duiba.com.cn/spark/assets/8b6e920ffd09fab8f9ac2de09f9154879f4d0607.png",
radius=300, ratio = 0.65,
circles=4, radius = 300,
divideNum=8, circles = 4,
duration=5000, divideNum = 8,
timeFunction='ease-out', duration = 5000,
nodeInfo={width:100,height:100}, timeFunction = "ease-out",
imgInfo={width:80,height:80}, nodeInfo = { width: 100, height: 100 },
showWay="negative", imgInfo = { width: 80, height: 80 },
isShowPrizeName=true, showWay = "negative",
prizeNameWidthRatio=1.2, isShowPrizeName = true,
callback=()=>{} prizeNameWidthRatio = 1.2,
callback = () => {}
} = props; } = props;
/* 奖品列表 */ /* 奖品列表 */
const [prizelist,setPrizelist] = useState(prizeList) const [prizelist, setPrizelist] = useState(prizeList);
/* 平分角度 */ /* 平分角度 */
const [angle,setAngle] = useState(oneTurn / divideNum) const [angle, setAngle] = useState(oneTurn / divideNum);
/* my.createAniamation */ /* my.createAniamation */
const [myAnimation,setMyAnimation] = useState() const [myAnimation, setMyAnimation] = useState();
/* 展示奖品列表 */ /* 展示奖品列表 */
const [show,setShow] = useState(false) const [show, setShow] = useState(false);
/* 转动一圈时的角度值 */ /* 转动一圈时的角度值 */
const [rotateInOneTurn,setRotateInOneTurn] = useState(0) const [rotateInOneTurn, setRotateInOneTurn] = useState(0);
/* 动画参数 */ /* 动画参数 */
const [ani,setAni] = useState({startFlag:false,option:{duration:duration,timeFunction:timeFunction,rotate:0}}) const [ani, setAni] = useState({
startFlag: false,
option: { duration: duration, timeFunction: timeFunction, rotate: 0 }
});
useEffect(()=>{ useEffect(() => {
computePosition() computePosition();
},[prizeList]) }, [prizeList]);
/** /**
* @description 获取奖品列表 * @description 获取奖品列表
...@@ -60,48 +63,55 @@ const RotateWheel = (props) => { ...@@ -60,48 +63,55 @@ const RotateWheel = (props) => {
* @description 计算奖品位置，旋转角度 * @description 计算奖品位置，旋转角度
*/ */
const computePosition = () => { const computePosition = () => {
if(!prizeList.length) return; if (!prizeList.length) return;
let centerX,centerY,color,rotate; let centerX, centerY, color, rotate;
/* 获取每块奖品的中心位置 */ /* 获取每块奖品的中心位置 */
prizelist.forEach((ele, i)=>{ prizelist.forEach((ele, i) => {
if (i % 2 == 0) { if (i % 2 == 0) {
color = '#527aff'; color = "#527aff";
} else { } else {
color = '#f13082' color = "#f13082";
} }
// 当前奖品左上角位置 // 当前奖品左上角位置
if(showWay === 'negative'){ if (showWay === "negative") {
centerX = radius - ratio * radius * (Math.sin((angle / 2 + angle * (i)) / 180 * Math.PI)); centerX =
centerY = radius - ratio * radius * (Math.cos((angle / 2 + angle * (i)) / 180 * Math.PI)); radius -
ratio * radius * Math.sin(((angle / 2 + angle * i) / 180) * Math.PI);
centerY =
radius -
ratio * radius * Math.cos(((angle / 2 + angle * i) / 180) * Math.PI);
rotate = -(angle / 2 + angle * i); rotate = -(angle / 2 + angle * i);
} else { } else {
centerX = radius - ratio * radius * (Math.sin((angle / 2 + angle * (-i)) / 180 * Math.PI)); centerX =
centerY = radius - ratio * radius * (Math.cos((angle / 2 + angle * (-i)) / 180 * Math.PI)); radius -
ratio * radius * Math.sin(((angle / 2 + angle * -i) / 180) * Math.PI);
centerY =
radius -
ratio * radius * Math.cos(((angle / 2 + angle * -i) / 180) * Math.PI);
// 旋转角度 // 旋转角度
rotate = -(angle / 2 + angle * (-i)); rotate = -(angle / 2 + angle * -i);
} }
ele.rotate = rotate ele.rotate = rotate;
ele.color = color ele.color = color;
// 奖品位置 // 奖品位置
let disleft = centerX - nodeInfo.width / 2; let disleft = centerX - nodeInfo.width / 2;
let distop = centerY - nodeInfo.height / 2; let distop = centerY - nodeInfo.height / 2;
ele.centerX = disleft ele.centerX = disleft;
ele.centerY = distop ele.centerY = distop;
ele.num = i; ele.num = i;
// 测试：设置奖品Id // 测试：设置奖品Id
ele.prizeId = 100 + i; ele.prizeId = 100 + i;
}) });
console.log('prizelist',prizelist); console.log("prizelist", prizelist);
setPrizelist(prizelist) setPrizelist(prizelist);
setShow(true) setShow(true);
} };
/** /**
* @description 抽奖 * @description 抽奖
*/ */
const drawPrize = useThrottle( async() => { const drawPrize = useThrottle(async () => {
// const {success,data,message,code} = await API.drawRotatePrize().catch((res)=>{ // const {success,data,message,code} = await API.drawRotatePrize().catch((res)=>{
// showToast({title:res?.message ? res?.message : '网络异常，请稍后再试'}) // showToast({title:res?.message ? res?.message : '网络异常，请稍后再试'})
// }); // });
...@@ -111,49 +121,48 @@ const RotateWheel = (props) => { ...@@ -111,49 +121,48 @@ const RotateWheel = (props) => {
// test // test
let prizeId = Math.floor(Math.random() * prizelist.length) + 100; let prizeId = Math.floor(Math.random() * prizelist.length) + 100;
startRotation(prizeId) startRotation(prizeId);
setTimeout(() => { setTimeout(() => {
// 弹出弹窗 // 弹出弹窗
callback && callback()//prizeInfo callback && callback(); //prizeInfo
}, duration + 1000); }, duration + 1000);
},duration) }, duration);
/** /**
* @description 根据奖品id开始旋转 * @description 根据奖品id开始旋转
* @param {*} prizeId 抽中的奖品id * @param {*} prizeId 抽中的奖品id
*/ */
const startRotation = (prizeId) => { const startRotation = prizeId => {
console.log('start'); console.log("start");
let rotateAngle; let rotateAngle;
let num; let num;
let oneturnAngle; let oneturnAngle;
prizelist.forEach((ele)=>{ prizelist.forEach(ele => {
if(ele.prizeId === prizeId){ if (ele.prizeId === prizeId) {
num = ele.num; num = ele.num;
} }
}) });
// 旋转角度 ( 旋转圈数 + 对应位置(0,7) ) * 平分角度 + 平分角度 / 2 // 旋转角度 ( 旋转圈数 + 对应位置(0,7) ) * 平分角度 + 平分角度 / 2
if(showWay === 'negative'){ if (showWay === "negative") {
rotateAngle = oneTurn * circles + num * angle + angle / 2; rotateAngle = oneTurn * circles + num * angle + angle / 2;
oneturnAngle = num * angle + angle / 2; oneturnAngle = num * angle + angle / 2;
} else { } else {
rotateAngle = oneTurn * circles + (prizelist.length - num) * angle + angle / 2; rotateAngle =
oneturnAngle = (prizelist.length - num) * angle + angle / 2 oneTurn * circles + (prizelist.length - num) * angle + angle / 2;
oneturnAngle = (prizelist.length - num) * angle + angle / 2;
} }
console.log('rotateAngle',rotateAngle, num, prizeId); console.log("rotateAngle", rotateAngle, num, prizeId);
/* 执行动画 */ /* 执行动画 */
setAni({ setAni({
startFlag:true, startFlag: true,
option:{ option: {
...ani.option, ...ani.option,
rotate:ani.option.rotate - rotateInOneTurn + rotateAngle rotate: ani.option.rotate - rotateInOneTurn + rotateAngle
}
})
setRotateInOneTurn(oneturnAngle)
} }
});
setRotateInOneTurn(oneturnAngle);
};
// my.createAnimation 旋转动画rot:旋转角度，timegap:旋转时间 // my.createAnimation 旋转动画rot:旋转角度，timegap:旋转时间
// const animateRotation = (rot, timegap) => { // const animateRotation = (rot, timegap) => {
...@@ -172,56 +181,72 @@ const RotateWheel = (props) => { ...@@ -172,56 +181,72 @@ const RotateWheel = (props) => {
// }, 5000); // }, 5000);
// } // }
return( return (
<> <View
<View className={`${styles['rotate_container']}`} className={styles["rotate"]}
style={{
width: `${containerInfo.width / 100}rem`,
height: `${containerInfo.height / 100}rem`,
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
<View
className={`${styles["rotate_container"]}`}
style={{ style={{
backgroundImage:`url(${bg})`, backgroundImage: `url(${bg})`,
transform:ani.startFlag ? `rotate(${ani.option.rotate}deg)` : '', transform: ani.startFlag ? `rotate(${ani.option.rotate}deg)` : "",
transition:ani.startFlag ? `all ${ani.option.timeFunction} ${ani.option.duration}ms` : '' transition: ani.startFlag
? `all ${ani.option.timeFunction} ${ani.option.duration}ms`
: ""
}} }}
// animation={myAnimation} // animation={myAnimation}
> >
{ {show &&
show && prizelist.length && prizelist.map((ele, i)=>{ prizelist.length &&
return( prizelist.map((ele, i) => {
return (
<View <View
className={styles['item']} className={styles["item"]}
style={{ style={{
// backgroundColor:`${ele?.color}`, // backgroundColor:`${ele?.color}`,
width:`${nodeInfo.width/100}rem`, width: `${nodeInfo.width / 100}rem`,
height:`${nodeInfo.height/100}rem`, height: `${nodeInfo.height / 100}rem`,
transform:`rotate(${ele?.rotate}deg)`, transform: `rotate(${ele?.rotate}deg)`,
top:`${ele.centerY/100}rem`, top: `${ele.centerY / 100}rem`,
left:`${ele.centerX/100}rem`, left: `${ele.centerX / 100}rem`,
position:'absolute' position: "absolute"
}} }}
key={'item'+i}> key={"item" + i}
{ >
isShowPrizeName && {isShowPrizeName && (
<View <View
className={styles['prize_name']} className={styles["prize_name"]}
style={{ style={{
width:`${prizeNameWidthRatio * 100}%`, width: `${prizeNameWidthRatio * 100}%`,
height:`${30/100}rem`, height: `${30 / 100}rem`
}} }}
>{ele.name}</View> >
} {ele.name}
<View className={styles['prize_img']} </View>
)}
<View
className={styles["prize_img"]}
style={{ style={{
backgroundImage:`url(${ele.image})`, backgroundImage: `url(${ele.image})`,
width:`${imgInfo.width/100}rem`, width: `${imgInfo.width / 100}rem`,
height:`${imgInfo.height/100}rem` height: `${imgInfo.height / 100}rem`
}} }}
></View> ></View>
</View> </View>
) );
}) })}
} </View>
<View className={styles["circle"]} onTap={drawPrize}>
draw
</View>
</View> </View>
<View className={styles['circle']} onTap={drawPrize}>draw</View> );
</> };
) export default RotateWheel;
}
export default RotateWheel
\ No newline at end of file
c_client/src/components/_tb_comps/RotateWheel/RotateWheel.module.less
View file @ 3753bb8b
.rotate{
margin: 0 auto;
}
.rotate_container{ .rotate_container{
width: 100%; width: 100%;
height: 100%; height: 100%;
......
c_client/src/pages/index/index.jsx
View file @ 3753bb8b
...@@ -215,17 +215,7 @@ function Index() { ...@@ -215,17 +215,7 @@ function Index() {
{/* 大转盘 */} {/* 大转盘 */}
<View className={styles['rotate']}
style={{
width:`${600/100}rem`,
height:`${600/100}rem`,
margin:`${100/100}rem auto`,
display:'flex',
justifyContent:'center',
alignItems:'center'
}} >
<RotateWheel {...rotateConfig} callback={()=>{}} /> <RotateWheel {...rotateConfig} callback={()=>{}} />
</View>
<View className='view' onTap={playCurrentAudio}>play audio</View> <View className='view' onTap={playCurrentAudio}>play audio</View>
......
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