组件优化

c_client/src/api.js

@@ -43,10 +43,13 @@ const apiList = {
   getShareInfo: 'getShareInfo',
   getCollectGoods: 'getCollectGoods',
   updateEnamePrizeReceived: 'updateEnamePrizeReceived', // 会员权益领取
-  getRotatePrizeListInfo:'getRotatePrizeListInfo',//获取奖品列表接口,暂未实现
-  drawRotatePrize:'drawRotatePrize',//大转盘抽奖接口,暂未实现
+  getPrizeConfig: 'getPrizeConfig', // 获取奖品配置
+  drawRotatePrize:'drawLottery',//大转盘抽奖接口,暂未实现
   exchangePrize: 'exchangePrize', // 兑换奖品
   getUserInfo: 'getUserInfo', // 获取用户信息
+  getUserRankList: 'getUserRankList', // 获取排名列表
+  startGame: 'startGame', // 开始游戏
+  submitGame: 'submitGame', // 提交游戏
 }
 
 // 生成API

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

@@ -47,7 +47,7 @@ const RotateWheel = props => {
    * @description 获取奖品列表
    */
   // const getPrizeListInfo = async () => {
-  //     const {success,data,code,message} = await API.getRotatePrizeListInfo().catch((res)=>{
+  //     const {success,data,code,message} = await API.getPrizeConfig().catch((res)=>{
   //         showToast({title:res?.message ? res?.message : '网络异常，请稍后再试'})
   //     })
   //     if(success && data){

c_client/src/components/_tb_comps/SwiperView/SwiperView.jsx

@@ -25,9 +25,9 @@ const SwiperView = (props) => {
     duration=1000,
     interval=1500,
     disableTouch=false,
-    swiperGroup={width:300,height:300,overflow:'visible'},
-    swiperContent={width:250,height:300,backgroundColor:'#fff',backgroundImage:'',borderRadius:25},
-    imgContent={width:200,height:200},
+    swiperGroup={width:400,height:750,overflow:'visible'},
+    swiperContent={width:400,height:700,backgroundColor:'#fff',backgroundImage:'',borderRadius:25},
+    imgContent={width:300},
     textContent={width:200,height:60},
     showLeftRightBtn=true,
     
@@ -127,7 +127,7 @@ const SwiperView = (props) => {
       <View 
         className="scroll_container"
         style={{
-          width:`${700/100}rem`,
+          width:`${750/100}rem`,
           overflow:'hidden'
         }}
       >
@@ -154,8 +154,8 @@ const SwiperView = (props) => {
                 <View
                   className={`scroll_item ${i === currentIndex ? "current_item" : ""} ${useCustomAni(i)}`}
                   style={{
-                    width:`${swiperContent.width/100}rem`,
-                    height:`${swiperContent.height/100}rem`,
+                    width:`100%`,
+                    height:`100%`,
                     backgroundColor:`${ swiperContent.backgroundColor}`,
                     backgroundImage:`${ swiperContent.backgroundImage}`,
                     borderRadius:`${swiperContent.borderRadius/100}rem`
@@ -174,11 +174,8 @@ const SwiperView = (props) => {
                     {/* 单个swiper主要内容 */}
                     <Image 
                       className="img" 
-                      style={{
-                        width:`${imgContent.width/100}rem`,
-                        height:`${imgContent.height/100}rem`
-                      }} 
-                      src={item.image}></Image>
+                      style={{width:`${imgContent.width/100}rem`}}
+                      src={item.image} mode="widthFix"></Image>
                     {
                       item?.content &&
                       <View 

c_client/src/components/_tb_comps/SwiperView/SwiperView.less

@@ -51,29 +51,16 @@
     .swiper_group {
         margin: 0 auto;
         position: relative;
-
-      swiper-item {
-        width: 300px;
-        height: 300px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-
-          .image-property(cover, center center);
-
-          // border: 1px solid cyan;
-          // box-sizing: border-box;
-
-        }
         .scroll_item {
           // width: 300px;
           margin: 0 auto;
           position: relative;
           border-radius: 20px;
           .image-property(cover, top center);
-          
-
-
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
           
           .checkPic {
             width: 60px;
@@ -83,6 +70,16 @@
             right: 40px;
             top: 40px;
           }
+          .item_img_content {
+            width: 100%;
+            .img {
+              margin: 20px auto 10px;
+              width: 100%;
+              display: block;
+              border-radius: 20px;
+              background-repeat: no-repeat;
+              background-position: top center;
+            }
             .text_content{
               margin: 0 auto;
               box-sizing: border-box;
@@ -100,8 +97,9 @@
                 
               }
             }
+          }
           &.current_item {
-            
+            transform: scale(1.2);
             .item_img_content {
                 .img{}
                 .text_content{
@@ -109,7 +107,6 @@
                 }
             }
           }
-        }
 
           // &.item_left{
           //   transform: translateX(-300px);
@@ -127,56 +124,57 @@
     
         }
         
-}
+      }
 
+}
 
 @keyframes movein {
-from {
+  from {
     transform: perspective(1000px) translate3d(0,0,0) rotate3d(0, 1, 0, 25deg) scale(0.85);
     transform-style: preserve-3d;
     transform-origin: 45% center;
-}
-50%{
+  }
+  50%{
     transform: perspective(1000px) translate3d(0,20px,0) rotate3d(0, 1, 0, 25deg) scale(0.85);
     transform-style: preserve-3d;
     transform-origin: 45% center;
-}
-to {
+  }
+  to {
     transform: perspective(1100px) translate3d(0,0,0) rotate3d(0, 1, 0, 0deg) scale(1);
     transform-origin: 45% center;
     transform-style: preserve-3d;
-}
-}
+  }
+  }
 
 @keyframes moveout{
-from {
+  from {
     transform: perspective(1000px) rotate3d(0, 1, 0, 0deg) scale(1);
     transform-style: preserve-3d;
     transform-origin: 45% center;
-}
-50%{
+  }
+  50%{
     transform: perspective(1000px) rotate3d(0, 1, 0, 25deg) scale(1);
     transform-style: preserve-3d;
     transform-origin: 45% center;
-}
-to {
+  }
+  to {
     transform: perspective(1200px) rotate3d(0, 1, 0, 25deg) scale(0.85);
     transform-origin: 45% center;
     transform-style: preserve-3d;
-}
+  }
 }
 
 @keyframes scales {
-from{
+  from{
     transform: scale(1,1);
     transform-origin: center;
-}
-50%{
+  }
+  50%{
     transform: scale(1.1,1.1);
     transform-origin: center;
-}
-to{
+  }
+  to{
     transform: scale(1,1);
     transform-origin: center;
-}
+  }
 }