Skip to content

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

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

parent 6f277d2c
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 63 deletions
c_client/src/components/_tb_comps/SwiperView/SwiperView.jsx
View file @ 9621d902
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
View file @ 9621d902
......@@ -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
View file @ 9621d902
......@@ -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
View file @ 9621d902
......@@ -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
View file @ 9621d902
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
View file @ 9621d902
......@@ -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
View file @ 9621d902
......@@ -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 0 → 100644
View file @ 9621d902
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
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