add:转盘优化

c_client/src/components/_tb_comps/BrowserLoading/BrowserLoading.jsx

@@ -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

@@ -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

@@ -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

 .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

@@ -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

@@ -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

@@ -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

 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()
   }, [])