add:中奖弹窗修改，swiper添加按钮

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

-import React, { useState, useEffect,useRef } from "react";
+import React, { useState, useEffect,useRef, useMemo, useCallback } from "react";
 import { View, Image, Text, Swiper, SwiperItem } from "@tarojs/components";
 
 import './SwiperView.less'
 import Taro,{showToast,redirectTo,navigateTo} from '@tarojs/taro'
+
 export const EASING_WAYS = {
     'DEFAULT':'default',
     'LINEAR':'linear',
@@ -17,15 +18,14 @@ const SwiperView = (props) => {
      */
   const {
     swiperList=[], 
-    isSpecial=true,
     easingFunction=`${EASING_WAYS.LINEAR}`,
-    circular=true,
-    autoplay=true,
+    circular=false,
+    autoplay=false,
     vertical=false,
     duration=1000,
     interval=1500,
     disableTouch=false,
-    swiperGroup={width:300,height:300,overflow:''},
+    swiperGroup={width:300,height:300,overflow:'visible'},
     swiperContent={width:250,height:300,backgroundColor:'#fff',backgroundImage:'',borderRadius:25},
     imgContent={width:200,height:200},
     textContent={width:200,height:60},
@@ -34,12 +34,16 @@ const SwiperView = (props) => {
   } = props;
 
   const [currentIndex, setCurrentIndex] = useState(0);
+
+  const indexref = useRef(0)
+
   /**
    * @description onchange事件
    * @param {*} e 
    */
   const swiperChange = e => {
-    // console.log("e", e);
+    console.log("e", e);
+    console.log('swiperChange-----currentindex',currentIndex,indexref.current,e.detail.current);
     setCurrentIndex(e.detail.current);
   };
   
@@ -48,13 +52,13 @@ const SwiperView = (props) => {
    * @param {*} index 数组索引值
    * @returns 返回类名
    */
-  const useCustomAni = (i) => {
+  const useCustomAni =((i) => {
     return `${((currentIndex < i && ((i !== swiperList.length - 1)||currentIndex!==0)) || ((currentIndex === swiperList.length - 1) && i == 0 ))  
               ? 'item_right' 
               : 
               (((currentIndex > i && (i !== 0 || currentIndex !== swiperList.length - 1)) || (currentIndex !== 0 && i !== swiperList.length - 1))  ? 'item_left' : 'item_middle')
             }`
-  }
+  }) 
 
   /**
    * @description 获取当前卡片详情之类
@@ -74,19 +78,35 @@ const SwiperView = (props) => {
    * @description 
    */
 
-  const turnRound = (type) => {
-
+  const turnRound = ((e,type) => {
+    e.stopPropagation();
     const motion = {
       [motionType.LEFT]:()=>{
-        setCurrentIndex(currentIndex==0 ? swiperList.length - 1 : (currentIndex - 1))
+        setTimeout(() => {
+          // setCurrentIndex((indexref.current==0) ? (swiperList.length - 1) : (indexref.current - 1))
+          // indexref.current = (indexref.current==0) ? (swiperList.length - 1) : (indexref.current - 1)
+          // console.log('left----',currentIndex,indexref.current);
+
+          if(currentIndex >= 1){
+            setCurrentIndex(currentIndex - 1)
+          }
+          
+        }, 0);
       },
       [motionType.RIGHT]:()=>{
-        setCurrentIndex(currentIndex == swiperList.length - 1 ? 0 : (currentIndex + 1))
+        setTimeout(() => {
+          // setCurrentIndex((indexref.current == (swiperList.length - 1)) ? 0 : (indexref.current + 1))
+          // indexref.current = (indexref.current == (swiperList.length - 1)) ? 0 : (indexref.current + 1)
+          // console.log('right----',currentIndex,indexref.current);
+          if(currentIndex < swiperList.length - 1){
+            setCurrentIndex(currentIndex + 1)
+          }
+
+        }, 0);
       }
     }
-
     motion[type]();
-  }
+  }) 
 
   useEffect(()=>{
     console.log('cur----',currentIndex);
@@ -100,7 +120,7 @@ const SwiperView = (props) => {
         overflow:'hidden'
       }}
     >
-      {/* <View className='left_btn' onTap={()=>turnRound('LEFT')}>&lt;&lt;</View> */}
+      
       <Swiper
         className="swiper_group"
         current={currentIndex}
@@ -122,7 +142,7 @@ const SwiperView = (props) => {
           swiperList.map((item, i) => (
             <SwiperItem>
               <View
-                className={`scroll_item ${i === currentIndex && isSpecial ? "current_item" : ""} ${useCustomAni(i)}`}
+                className={`scroll_item ${i === currentIndex ? "current_item" : ""} ${useCustomAni(i)}`}
                 style={{
                   width:`${swiperContent.width/100}rem`,
                   height:`${swiperContent.height/100}rem`,
@@ -132,12 +152,13 @@ const SwiperView = (props) => {
                 }}
                 onTap={()=>getCurrentDetail(item)}
               >
-                {/* {i === currentIndex &&  (
-                  <Image
-                    className="checkPic"
-                    src="https://yun.dui88.com/tebuXinYuan/checkGoods.png"
-                  ></Image>
-                )} */}
+                {i === currentIndex && showLeftRightBtn &&  (
+                  <>
+                    <View className='left_btn' onTap={(e)=>turnRound(e,'LEFT')}>&lt;&lt;</View>
+                    <View className='right_btn' onTap={(e)=>turnRound(e,'RIGHT')}>&gt;&gt;</View>
+                  </>
+
+                )}
                 <View 
                   className="item_img_content"
                 >
@@ -167,7 +188,6 @@ const SwiperView = (props) => {
           ))}
       </Swiper>
       
-      {/* <View className='right_btn' onTap={()=>turnRound('RIGHT')}>&gt;&gt;</View> */}
     </View>
   );
 };

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

@@ -3,10 +3,10 @@
     // width: 450px;
     // overflow: hidden;
     margin: 0 auto;
-    // display: flex;
-    // justify-content: space-around;
-    // align-items: center;
-
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: relative;
     
 
     .swiper_group {
@@ -22,6 +22,9 @@
 
             .image-property(cover, center center);
 
+          // border: 1px solid cyan;
+          // box-sizing: border-box;
+
         }
         .scroll_item {
           // width: 300px;
@@ -29,6 +32,30 @@
           position: relative;
           border-radius: 20px;
           .image-property(cover, top center);
+          .left_btn,
+          .right_btn{
+            width: 80px;
+            height: 40px;
+            display: flex;
+            position: absolute;
+            justify-content: center;
+            align-items: center;
+            z-index: 1;
+            top: 50%;
+            transform: translateY(-50%);
+
+            border: 1px solid cyan;
+            box-sizing: border-box;
+          }
+          .left_btn{
+            left: 10px;
+          }
+          .right_btn{
+            right: 10px;
+          }
+
+
+
           .checkPic {
             width: 60px;
             height: 60px;
@@ -65,6 +92,7 @@
             }
           }
           &.current_item {
+            
             .item_img_content {
                 .img{}
                 .text_content{

c_client/src/components/_tb_comps/SwiperView/SwiperView.md

@@ -14,6 +14,7 @@
 | swiperContent   |   Object   | 单个swiperItem的宽高 |{width:250,height:300,backgroundColor:'#fff',borderRadius:25,backgroundImage:''}|/|
 | imgContent   |   Object   | 图片宽高 |{width:200,height:200}|/|
 | textContent   |   Object   | 文本宽高 |{width:300,height:60}|/|
+| showLeftRightBtn   |   Boolean   | 是否显示左右点击按钮|/|
 
 #### swiperList数据
 ```json

c_client/src/components/_tb_modal/JackpotModal/JackpotModal.jsx

@@ -10,26 +10,28 @@ import useReceive from '@/hooks/useReceive'
 const { receiveEnamePrize, receiveObjectPrize } = API
 const { commonToast } = tbcc.tb
 
-const JackpotModal = (props) => {
-  const { onClose, top = '50%', bg = '', width = 300, height = 300, prizesData = {}, receive = false } = props
+import {receivePrize} from '@/utils/prize'
 
-  const [ getReceive ] = useReceive({ receiveEnamePrize, receiveObjectPrize })
+const prizeItem = {
+  image:'',
+  name:'',
+  type:'', // 奖品类型
+  id:'', // 奖品id
+  _id:'',
+  ename:'', // 会员权益
+  benefitType:'' // 会员权益
+}
 
-  const handleClick = useThrottle(async() => {
-    if (receive) {
-      const prizeId = prizesData.id || prizesData._id
-      const type = prizesData.type
-      const result = await getReceive({ prizeId, type })
-      if(result && !result.isVip){
-        commonToast(result.message)
-        // TODO 非会员  积分领取   入会处理
+const JackpotModal = (props) => {
+  const { onClose, top = '50%', bg = '', width = 300, height = 300, prizesData = {}, receive = false, prizeItem={}, showMember=()=>{} } = props
 
-      } else {
-        commonToast(result.message)
-      }
-    } else {
-      onClose()
+  const handleClick = useThrottle(async() => {
+    const callObj = {
+      vipCallback:()=>{showMember()},
+      updateCallback:()=>{},
+      closeCallback:()=>{onClose()}
     }
+    receivePrize(prizeItem,callObj);
   })
 
   return (

c_client/src/config/config.js

 export default {
     env: 'test', // 云函数环境 test 测试环境 online 线上环境
     requestType: 'cloud', // cloud: 云函数, yapi: yapi 接口, ams: ams接口，tornadoAPI: 风驰台接口
-    cloudName: 'pkrqdb', // 主云函数项目名 CommonToC
+    cloudName: 'testNewS', // 主云函数项目名 CommonToC
     sellerId: '2207644377875',
     tornadoAPI: 'https://tornado.duibadev.com.cn/tbServer/api?db=db3000000038851072&proxyIp=172.16.130.158', // 新增：当requestType: 'tornadoAPI'时，找服务端提供地址
-    defaultActivityId: '611cd5f78e6a08bf202eeb7e' // 默认活动id
+    defaultActivityId: '610cff3f086e659a96b7336c' // 默认活动id
 }
\ No newline at end of file

c_client/src/pages/index/index.jsx

@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react'
 import { View, Image } from '@tarojs/components'
 import Taro, { useShareAppMessage, useDidShow, getApp } from '@tarojs/taro'
 import classnames from 'classnames'
-import { SHARE_CONFIG } from '@/const.js'
+import { ACTIVITY_STATUS, SHARE_CONFIG } from '@/const.js'
 import { HELP_MODAL_TYPE } from '@/config/help.config'
 import { useLogin, useLoginFromShare } from '@/hooks/useLogin'
 import { useActivityInfoModel, useLoginInfoModel } from '@/store'
@@ -26,6 +26,16 @@ const INDEX_CONFIG = {
   taskButton: '' // 任务按钮
 }
 
+const prizeItem = {
+  image:'',
+  name:'',
+  type:1, // 奖品类型
+  id:'', // 奖品id
+  _id:'',
+  ename:'', // 会员权益
+  benefitType:1 // 权益类型 1普通权益 2会员权益
+}
+
 
 function Index() {
   const app = getApp()
@@ -47,10 +57,6 @@ function Index() {
   // 助力弹窗标识
   const showHelp = useRef(false)
 
-  
-
-  
-
   const fetchActivityInfo = async() => {
     const { success, data } = await API.getActivityBaseInfoById()
     if(success) {
@@ -66,18 +72,18 @@ function Index() {
     success && setUserInfo(data)
   }
   useEffect(() =>{
-    // fetchActivityInfo()
+    fetchActivityInfo()
     // getImgShareUrl('cloud://CEFE74AE67921906B5AF842150646D35/share.png').then(url => {
     //   SHARE_IMG.current = url
     // })
   },[])
   // 授权登录完成
-  // useLogin(async (info) => {
-  //   console.warn(info)
-  //   console.warn(loginInfo)
-  //   handleVisibleModal(info)
-  //   // setUpdateFlag(1)
-  // })
+  useLogin(async (info) => {
+    console.warn(info)
+    console.warn(loginInfo)
+    handleVisibleModal(info)
+    // setUpdateFlag(1)
+  })
   // 查看是否有助力信息
   const getShareInfo = async () => {
     const { success, data } = await API.getShareInfo()
@@ -167,6 +173,8 @@ function Index() {
             width='500'
             height='500'
             top='45%'
+            prizeItem={prizeItem}
+            showMember={()=>setMemberVisible(true)}
             onClose={() => setPrizeModalVisible(false)}
           />
 

c_client/src/pages/packagePrize/myPrize/myPrize.jsx

@@ -12,6 +12,7 @@ import styles from './myPrize.module.less'
 import { getApp } from '@tarojs/taro'
 import { receiveEnamePrize, receiveObjectPrize, receiveMemberEname } from '@/utils/util'
 import config from '@/config/config'
+import {receivePrize} from '@/utils/prize'
 import { PRIZE_CONFIG, DRAW_STATUS, PRIZE_TYPE, BENEFIT_TYPE } from '@/config/myPrize.config'
 const { objectStatus: _objectStatus, enameStatus: _enameStatus, orderStatus, commonStatus } = PRIZE_CONFIG
 const objectStatus = { ..._objectStatus, ...commonStatus }
@@ -19,7 +20,7 @@ const enameStatus = { ..._enameStatus, ...commonStatus }
 
 const { commonToast, navigateToOutside, setClipboard } = tbccTs.tb
 const { getMyPrizeList } = API
-import {useAudio} from '@/hooks/useAudio'
+
 
 function Empty(blankTxt) {
   return <View className={styles['my-prize-item__empty']}>{blankTxt}</View>
@@ -33,8 +34,6 @@ function MyPrizeList() {
   const [ memberVisible, setMemberVisible ] = useState(false)
   const [ deliveryModalVisible, setDeliveryModalVisible ] = useState(false)
 
-  // const {openStatus,setOpenStatus} = useAudio(BGMUSIC_URL.MUSIC,true)
-
   useEffect(() => {
     fetchMyPriceList()
   }, [])
@@ -72,7 +71,20 @@ function MyPrizeList() {
         return
       }
       // 执行奖品领取
-      const successMsg = '领取成功'
+      receivePrize(item,{
+        vipCallback:()=>{
+          console.log('enter the vip callback function');
+          
+          setMemberVisible(true)
+        },
+        updateCallback:()=>{
+          console.log('enter the update list callback function');
+          
+          fetchMyPriceList()
+        }
+      });
+
+      /* const successMsg = '领取成功'
       if(type === PRIZE_TYPE.CREDITS || (type === PRIZE_TYPE.ENAME && benefitType === BENEFIT_TYPE.MEMBER)) {
         const isVip = await checkIsMember()
         if(!isVip) {
@@ -97,7 +109,10 @@ function MyPrizeList() {
         }
       }
      await receiveFn[type]()
-     receiveFn['update']()
+     receiveFn['update']() */
+
+
+
   },2000)
   // 入会插件
   const onClose = () => {
@@ -157,7 +172,7 @@ function MyPrizeList() {
         </View>
     </ContainerFit>
       {deliveryModalVisible && <DeliveryModal prizeItem={currentPrize} task={PRIZE_CONFIG.logisticsImage} onClose={() => setDeliveryModalVisible(false)} />}
-      {memberVisible && <member-modal onClose={onClose} onAuthFail={onAuthFail} onAuthSuccess={onAuthSuccess} />}
+      {<member-modal expend={memberVisible} onClose={onClose} onAuthFail={onAuthFail} onAuthSuccess={onAuthSuccess} />}
     </>
   )
 }

c_client/src/utils/prize.js

+
+import { PRIZE_CONFIG, DRAW_STATUS, PRIZE_TYPE, BENEFIT_TYPE } from '@/config/myPrize.config'
+import { checkIsMember } from 'tbcc-sdk-ts/lib/utils'
+import config from '@/config/config'
+import { receiveEnamePrize, receiveObjectPrize, receiveMemberEname } from '@/utils/util'
+import tbccTs from 'tbcc-sdk-ts'
+
+const { commonToast, navigateToOutside, setClipboard } = tbccTs.tb
+
+
+/**
+ * @description 领取奖品
+ * @param {*} item 
+ * @param {*} vipCallback 入会回调 
+ * @param {*} updateCallback 奖品页面更新列表回调 
+ * 
+ */
+import { getApp, setTabBarBadge } from '@tarojs/taro'
+
+export const receivePrize = async(item, callbackObj={vipCallback:()=>{},updateCallback:()=>{},closeCallback:()=>{}}) => {
+    const app = getApp();
+    const { activityId } = app
+    const { type, drawStatus, useUrl = '', id, _id, ename = '', benefitType } = item
+
+    const successMsg = '领取成功'
+    const errorMsg = '请求失败'
+
+    if(type === PRIZE_TYPE.CREDITS || (type === PRIZE_TYPE.ENAME && benefitType === BENEFIT_TYPE.MEMBER)) {
+        const isVip = await checkIsMember()
+        if(!isVip) {
+          commonToast('需加入会员才能领取成功哦', 2000, ()=>{callbackObj.vipCallback && callbackObj.vipCallback()})
+          return;
+        }
+    }
+
+    const receiveFn = {
+        // 'update': async () => fetchMyPriceList(),
+        [PRIZE_TYPE.ENAME]: async () => {
+          if(benefitType === BENEFIT_TYPE.MEMBER) {
+           await receiveMemberEname({params: { sellerId: config.sellerId, ename, id }, successMsg, errorMsg })
+          }else {
+            await receiveEnamePrize({params: { activityId, id }, successMsg, errorMsg })
+          }
+        },
+        [PRIZE_TYPE.OBJECT]: async () => {
+          await receiveObjectPrize({params: { activityId, id }, successMsg, errorMsg })
+        },
+        [PRIZE_TYPE.CREDITS]: async () => {
+          await receiveEnamePrize({params: { activityId, id }, successMsg, errorMsg })
+        }
+      }
+     await receiveFn[type]()
+    //  更新奖品列表
+     callbackObj.updateCallback && callbackObj.updateCallback();
+
+     callbackObj.closeCallback && callbackObj.closeCallback();
+}
\ No newline at end of file