Skip to content

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

add:转盘优化

parent bb63845a
Hide whitespace changes
Inline Side-by-side
Showing with 59 additions and 39 deletions
c_client/src/components/_tb_comps/BrowserLoading/BrowserLoading.jsx
View file @ a3a88714
......@@ -2,19 +2,19 @@ import React, { useState, useEffect } from "react";
import { View, Image, Text } from "@tarojs/components";
import LoadingBar,{LOAD_TYPE} from "../LoadingBar/LoadingBar";
import styles from './BrowserLoading.module.less'
import {LOAD_OBJ} from '@/pages/packageGood/browseGoods/browseGoods'
import {BROWSE_COUNTDOWN_OBJ} from '@/const'
const BrowserLoading = (props) => {
const {loadFlag,count} = props;
return (
<View className={styles["browse_loading"]}>
{loadFlag == LOAD_OBJ.NUMBER && (
{loadFlag == BROWSE_COUNTDOWN_OBJ.NUMBER && (
<>
<View className={styles["count_img"]}>
<View className={styles["count_time"]}>{count}s</View>
</View>
</>
)}
{loadFlag == LOAD_OBJ.PICTURE && <LoadingBar type={LOAD_TYPE.TASK} />}
{loadFlag == BROWSE_COUNTDOWN_OBJ.PICTURE && <LoadingBar type={LOAD_TYPE.TASK} />}
</View>
);
};
......
c_client/src/components/_tb_comps/GoodsList/GoodsList.jsx
View file @ a3a88714
......@@ -5,8 +5,7 @@ import tbccTs from 'tbcc-sdk-ts'
const { openDetail } = tbccTs.tb
import styles from './GoodsList.module.less'
import BrowserLoading from '../BrowserLoading/BrowserLoading'
import {LOAD_OBJ} from '@/pages/packageGood/browseGoods/browseGoods'
import {BROWSE_COUNTDOWN_OBJ} from '@/const'
function GoodsList(props) {
const {
......@@ -20,7 +19,7 @@ function GoodsList(props) {
img: '//yun.dui88.com/taobaomini/clientCTest/goods_img@2x.png'
},
color: '#181818',
loadFlag:LOAD_OBJ.DEFAULT
loadFlag:BROWSE_COUNTDOWN_OBJ.DEFAULT
},
onOpenDetail,
onCompleteTask,
......
c_client/src/components/_tb_comps/RotateWheel/RotateWheel.jsx
View file @ a3a88714
......@@ -19,8 +19,10 @@ const RotateWheel = (props) => {
duration=5000,
timeFunction='ease-out',
nodeInfo={width:100,height:100},
imgInfo={width:80,height:80},
showWay="negative",
isShowPrizeName=true,
prizeNameWidthRatio=1.2,
callback=()=>{}
} = props;
/* 奖品列表 */
......@@ -58,7 +60,7 @@ const RotateWheel = (props) => {
* @description 计算奖品位置，旋转角度
*/
const computePosition = () => {
if(!prizeList,length) return;
if(!prizeList.length) return;
let centerX,centerY,color,rotate;
/* 获取每块奖品的中心位置 */
prizelist.forEach((ele, i)=>{
......@@ -186,7 +188,7 @@ const RotateWheel = (props) => {
<View
className={styles['item']}
style={{
backgroundColor:`${ele?.color}`,
// backgroundColor:`${ele?.color}`,
width:`${nodeInfo.width/100}rem`,
height:`${nodeInfo.height/100}rem`,
transform:`rotate(${ele?.rotate}deg)`,
......@@ -199,14 +201,18 @@ const RotateWheel = (props) => {
isShowPrizeName &&
<View
className={styles['prize_name']}
style={{width:'90%',height:`${30/100}rem`}}
>奖品名称奖品名称{i}</View>
style={{
width:`${prizeNameWidthRatio * 100}%`,
height:`${30/100}rem`,
}}
>{ele.name}</View>
}
<View className={styles['prize_img']}
style={{
backgroundImage:`url(${ele.image})`,
width:`${80/100}rem`,
height:`${80/100}rem`
width:`${imgInfo.width/100}rem`,
height:`${imgInfo.height/100}rem`
}}
></View>
</View>
......
c_client/src/components/_tb_comps/RotateWheel/RotateWheel.module.less
View file @ a3a88714
.rotate_container{
width: 100%;
height: 100%;
border: 1px solid cyan;
box-sizing: border-box;
// border: 1px solid cyan;
// box-sizing: border-box;
position: relative;
border-radius: 50%;
display: flex;
......@@ -18,21 +18,23 @@
transform-origin: center;
flex-direction: column;
border: 1px solid cyan;
box-sizing: border-box;
// border: 1px solid cyan;
// box-sizing: border-box;
.prize_name{
margin: 0 auto;
border: 1px solid cyan;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
// margin: 0 auto;
// border: 1px solid cyan;
// box-sizing: border-box;
// display: flex;
// justify-content: center;
// align-items: center;
text-align: center;
white-space: nowrap;
font-size: 18px;
text-overflow: ellipsis;
overflow: hidden;
}
.prize_img{
.image-property(cover, center center);
......
c_client/src/components/_tb_comps/RotateWheel/rotatewheel.md
View file @ a3a88714
......@@ -10,11 +10,12 @@
| divideNum | Number | 转盘划分为几等分 | 8 | 最少2等分|
| circles | Number | 转盘基本转动圈数 | 4 | / |
| duration | Number | 转盘持续时间 | 4000 | 毫秒 |
| timeFunction | String | 缓动动画方式 | 'ease-out' | TODO其他类型待补充 |
| nodeInfo | Object | 单个奖品区域大小 | {width:100,height:100} | 宽高各100px |
| timeFunction | String | 缓动动画方式 | 'ease-out' | 'ease-in-out', cubic-bezier(xx,xx,xx,xx) |
| nodeInfo | Object | 单个奖品区域大小 | {width:100,height:100} | 宽高100px |
| imgInfo | Object | 奖品图片大小 | {width:80,height:80} | 宽高80px |
| showWay | String | 奖品排列方式 | 'negative' |negative逆时针排列 positive顺时针排列|
| isShowPrizeName | Boolean | 是否展示奖品名称 | true | true展示 false不展示 |
<!-- | showNameMaxLength | Number | 奖品名称长度展示限制 | 8 | / | -->
| prizeNameWidthRatio | Number | 奖品名称容器宽度与nodeInfo宽度的比值 | 1.2 | 超过容器宽度则...省略 |
##### 出参
| 配置项 | 类型 | 描述 | 默认值 | 备注 |
......@@ -37,6 +38,10 @@ const rotateConfig = { //不传走默认配置
width:100,
height:100
},
imgInfo:{
width:80,
height:80
},
showWay:'negative',//positive/negative
isShowPrizeName:true
}
......
c_client/src/pages/index/index.jsx
View file @ a3a88714
......@@ -40,13 +40,15 @@ const rotateConfig = {
circles: 4,
divideNum: 8,
duration: 5000,
timeFunction:'ease-out',
timeFunction:'ease-in-out',
nodeInfo:{
width:100,
height:100
},
imgInfo:{width:80,height:80},
showWay:'negative',//positive/negative
isShowPrizeName:true
isShowPrizeName:true,
prizeNameWidthRatio:1.2
}
const SCROLLXVIEW_CONFIG = {
......@@ -81,9 +83,14 @@ function Index() {
const showHelp = useRef(false)
/* 背景音乐 */
// const {playAudio,musicUrl,setOpenStatus,openStatus} = useAudio(BGMUSIC_URL.MUSIC,true)
const {playAudio,musicUrl,setOpenStatus,openStatus} = useAudio(CLOUD_OBJ['1'])
const playCurrentAudio = () => {
// setOpenStatus(!openStatus)
playAudio(()=>{
onHandleIndex('prize')
})
}
const fetchActivityInfo = async() => {
const { success, data } = await API.getActivityBaseInfoById()
......@@ -184,7 +191,7 @@ function Index() {
updateActInfo && fetchActivityInfo()
},
'rule': () => setRuleModalVisible(true),
'prize': () => navigateTo('/pages/packagePrize/myPrize/myPrize'),
'prize': () => {navigateTo('/pages/packagePrize/myPrize/myPrize')},
'game': () => navigateTo('/pages/packageGame/game/game')
}
Fn[type]()
......@@ -219,6 +226,8 @@ function Index() {
<RotateWheel {...rotateConfig} callback={()=>{}} />
</View> */}
<View className='view' onTap={playCurrentAudio}>play audio</View>
{
tasksModalVisible &&
<TasksModal
......
c_client/src/pages/packageGood/browseGoods/browseGoods.jsx
View file @ a3a88714
......@@ -4,15 +4,11 @@ import GoodsTitle from '@/components/_tb_comps/GoodsTitle/GoodsTitle'
import GoodsList from '@/components/_tb_comps/GoodsList/GoodsList'
import { useDidShow, useRouter, useDidHide } from '@tarojs/taro'
import API from '@/api'
import { TASK_CONFIG, BROSE_GOOD_TYPE } from '@/const'
import { TASK_CONFIG, BROSE_GOOD_TYPE, BROWSE_COUNTDOWN_OBJ } from '@/const'
import { commonToast } from 'tbcc-sdk-ts/lib/core/tb'
import styles from './browseGoods.module.less'
export const LOAD_OBJ = {
PICTURE:'PICTURE',
NUMBER:"NUMBER",
DEFAULT:""
}
const browseConfig = {
taskType: 'browseGoods',
type: '01',
......@@ -30,7 +26,7 @@ const browseConfig = {
img: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_img@2x.png'
},
color: '#181818',
loadFlag: LOAD_OBJ.PICTURE
loadFlag: BROWSE_COUNTDOWN_OBJ.PICTURE
}
const list = [
......
c_client/src/pages/packagePrize/myPrize/myPrize.jsx
View file @ a3a88714
import React, { useState, useEffect } from 'react'
import { Image, ScrollView, View } from '@tarojs/components'
import API from '@/api'
import { DRAW_STATUS, PRIZE_TYPE, BENEFIT_TYPE } from '@/const'
import { DRAW_STATUS, PRIZE_TYPE, BENEFIT_TYPE, BGMUSIC_URL } from '@/const'
import DeliveryModal from '@/components/_tb_modal/DeliveryModal/DeliveryModal'
import tbccTs from 'tbcc-sdk-ts'
import { useThrottle } from '@/hooks/useThrottle'
......@@ -14,6 +14,7 @@ import config from '@/config/index'
const { commonToast, getUserAddress, navigateToOutside, setClipboard } = tbccTs.tb
const { getMyPrizeList } = API
import {useAudio} from '@/hooks/useAudio'
// 我的奖品配置项
const prizeConfig = {
......@@ -60,6 +61,8 @@ function MyPrizeList() {
const [ memberVisible, setMemberVisible ] = useState(false)
const [ deliveryModalVisible, setDeliveryModalVisible ] = useState(false)
// const {openStatus,setOpenStatus} = useAudio(BGMUSIC_URL.MUSIC,true)
useEffect(() => {
fetchMyPriceList()
}, [])
......
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