1

c_client/src/api.js

@@ -38,6 +38,9 @@ const apiList = {
   getCollectGoodsList: 'getCollectGoodsList',
   getItemListByItemIds: 'getItemListByItemIds',
   updateEnamePrizeReceived: 'updateEnamePrizeReceived', // 会员权益领取
+  getRotatePrizeListInfo:'getRotatePrizeListInfo',//获取奖品列表接口,暂未实现
+  drawRotatePrize:'drawRotatePrize',//大转盘抽奖接口,暂未实现
+
 }
 
 // 生成API

c_client/src/components/_tb_comps/RotateWheel/RotateWheel.jsx

@@ -38,15 +38,30 @@ const RotateWheel = (props) => {
 
     useEffect(()=>{
         computePosition()
-    },[])
+    },[prizeList])
+
+    /**
+     * @description 获取奖品列表
+     */
+    // const getPrizeListInfo = async () => {
+    //     const {success,data,code,message} = await API.getRotatePrizeListInfo().catch((res)=>{
+    //         showToast({title:res?.message ? res?.message : '网络异常，请稍后再试'})
+    //     })
+    //     if(success && data){
+    //         const {list} = data;
+    //         // setPrizelist(list)
+    //         computePosition(list)
+    //     }
+    // }
 
     /**
      * @description 计算奖品位置，旋转角度
      */
     const computePosition =  () => {
+        if(!prizeList,length) return;
         let centerX,centerY,color,rotate;
         /* 获取每块奖品的中心位置 */
-        prizelist.forEach((ele, i)=>{
+         prizelist.forEach((ele, i)=>{
             if (i % 2 == 0) {
                 color = '#527aff';
               } else {
@@ -85,13 +100,14 @@ const RotateWheel = (props) => {
      */
     const drawPrize = useThrottle( async() => {
 
-        // const {success,data,message,code} = await API.drawLotteryPrize().catch((res)=>{
-        //     showToast(res?.message ? res?.message : '')
+        // const {success,data,message,code} = await API.drawRotatePrize().catch((res)=>{
+        //     showToast({title:res?.message ? res?.message : '网络异常，请稍后再试'})
         // });
         // if(success && data){
-
+        //     const {prizeId,id} = data;
         // }
 
+        // test
         let prizeId = Math.floor(Math.random() * prizelist.length) + 100;
         startRotation(prizeId)
         setTimeout(() => {

c_client/src/components/_tb_comps/RotateWheel/rotatewheel.md

@@ -19,4 +19,32 @@
 ##### 出参
 |    配置项    |   类型   |    描述     |  默认值  |  备注  |
 | :--------   | :-----:  | :--------: | :-----:  | :---:|
-| callback    |   Function   |    回调函数   |  /  |抽中奖品后的回调方法,后续的弹窗处理|
\ No newline at end of file
+| callback    |   Function   |    回调函数   |  /  |抽中奖品后的回调方法,后续的弹窗处理|
+
++ 使用
+```jsx
+import RotateWheel from '@/components/_tb_comps/RotateWheel/RotateWheel'
+
+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-out',
+  nodeInfo:{
+      width:100,
+      height:100
+  },
+  showWay:'negative',//positive/negative
+  isShowPrizeName:true
+}
+
+export const Index = () => {
+    return(
+        <RotateWheel {...rotateConfig} callback={()=>{}} />
+    )
+}
+
+```
\ No newline at end of file