Skip to content

T
taobao-mini-template
Commit 52d2d3a2 authored by mqf_0707's avatar mqf_0707
Browse files
Options

标准化api

parents 2dc09458 f0c7a7aa
Hide whitespace changes
Inline Side-by-side
Showing with 394 additions and 374 deletions
c_client/src/components/_base/Modal/Modal.jsx
View file @ 52d2d3a2
...@@ -3,7 +3,6 @@ import React, { useState } from 'react' ...@@ -3,7 +3,6 @@ import React, { useState } from 'react'
import Overlay from '../Overlay/Overlay' import Overlay from '../Overlay/Overlay'
import styles from './modal.module.less' import styles from './modal.module.less'
import classnames from 'classnames' import classnames from 'classnames'
export default function Modal(props) { export default function Modal(props) {
const { closePostion = 'top-right', onClose = () => { }, top = '40%', hideCloseButton = false, closeOnClickOverlay = false, closePos = { right: 0, top: -30 } } = props const { closePostion = 'top-right', onClose = () => { }, top = '40%', hideCloseButton = false, closeOnClickOverlay = false, closePos = { right: 0, top: -30 } } = props
......
c_client/src/components/_tb_comps/Rank/RankList/RankList.module.less
View file @ 52d2d3a2
...@@ -9,9 +9,10 @@ ...@@ -9,9 +9,10 @@
} }
.scroll-item { .scroll-item {
.flex-row-space(); .flex-row-space();
.wh(100%,66px); .wh(100%,70px);
background-color: #F7F0E6; background-color: #F7F0E6;
border: 1px solid #ECDBC0; border: 1px solid #ECDBC0;
box-sizing: border-box;
} }
.scroll-item__rank { .scroll-item__rank {
width: 33%; width: 33%;
......
c_client/src/components/_tb_comps/RotateWheel/RotateWheel.jsx
View file @ 52d2d3a2
...@@ -29,8 +29,6 @@ const RotateWheel = props => { ...@@ -29,8 +29,6 @@ const RotateWheel = props => {
const [prizelist, setPrizelist] = useState(prizeList); const [prizelist, setPrizelist] = useState(prizeList);
/* 平分角度 */ /* 平分角度 */
const [angle, setAngle] = useState(oneTurn / divideNum); const [angle, setAngle] = useState(oneTurn / divideNum);
/* my.createAniamation */
const [myAnimation, setMyAnimation] = useState();
/* 展示奖品列表 */ /* 展示奖品列表 */
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
/* 转动一圈时的角度值 */ /* 转动一圈时的角度值 */
...@@ -164,23 +162,6 @@ const RotateWheel = props => { ...@@ -164,23 +162,6 @@ const RotateWheel = props => {
setRotateInOneTurn(oneturnAngle); setRotateInOneTurn(oneturnAngle);
}; };
// my.createAnimation 旋转动画rot:旋转角度，timegap:旋转时间
// const animateRotation = (rot, timegap) => {
// var animation = my.createAnimation({
// transformOrigin: "center center",
// duration: 5000,
// timeFunction: "ease-out",
// delay: 0
// })
// console.log('animation',animation);
// animation.rotate(rot).step();
// setMyAnimation(animation.export())
// setTimeout(() => {
// setMyAnimation()
// }, 5000);
// }
return ( return (
<View <View
className={styles["rotate"]} className={styles["rotate"]}
...@@ -201,7 +182,6 @@ const RotateWheel = props => { ...@@ -201,7 +182,6 @@ const RotateWheel = props => {
? `all ${ani.option.timeFunction} ${ani.option.duration}ms` ? `all ${ani.option.timeFunction} ${ani.option.duration}ms`
: "" : ""
}} }}
// animation={myAnimation}
> >
{show && {show &&
prizelist.length && prizelist.length &&
......
c_client/src/components/_tb_comps/RotateWheel/rotatewheel.md
View file @ 52d2d3a2
**记事本打开** **记事本打开((cmd + k) + v)**
##### 大转盘配置项入参 ##### 大转盘配置项入参
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.jsx
View file @ 52d2d3a2
...@@ -4,7 +4,6 @@ import { View, Image, Text, Swiper, SwiperItem } from "@tarojs/components"; ...@@ -4,7 +4,6 @@ import { View, Image, Text, Swiper, SwiperItem } from "@tarojs/components";
import './SwiperView.less' import './SwiperView.less'
import Taro,{showToast,redirectTo,navigateTo} from '@tarojs/taro' import Taro,{showToast,redirectTo,navigateTo} from '@tarojs/taro'
// import {useCallbackState} from '@/hooks/useSyncState'
export const EASING_WAYS = { export const EASING_WAYS = {
'DEFAULT':'default', 'DEFAULT':'default',
'LINEAR':'linear', 'LINEAR':'linear',
...@@ -20,7 +19,7 @@ const SwiperView = (props) => { ...@@ -20,7 +19,7 @@ const SwiperView = (props) => {
const { const {
swiperList=[], swiperList=[],
easingFunction=`${EASING_WAYS.LINEAR}`, easingFunction=`${EASING_WAYS.LINEAR}`,
circular=true, circular=false,
autoplay=false, autoplay=false,
vertical=false, vertical=false,
duration=1000, duration=1000,
...@@ -34,7 +33,7 @@ const SwiperView = (props) => { ...@@ -34,7 +33,7 @@ const SwiperView = (props) => {
} = props; } = props;
const [currentIndex, setCurrentIndex] = useState(0); const [currentIndex, setCurrentIndex] = useState(1);
const indexref = useRef(0) const indexref = useRef(0)
...@@ -91,22 +90,25 @@ const SwiperView = (props) => { ...@@ -91,22 +90,25 @@ const SwiperView = (props) => {
const turnRound = ((type) => { const turnRound = ((type) => {
const motion = { const motion = {
[motionType.LEFT]:()=>{ [motionType.LEFT]:()=>{
if(indexref.current === 0) { setTimeout(() => {
setCurrentIndex(swiperList.length - 1) // setCurrentIndex((indexref.current==0) ? (swiperList.length - 1) : (indexref.current - 1))
indexref.current = swiperList.length - 1 // indexref.current = (indexref.current==0) ? (swiperList.length - 1) : (indexref.current - 1)
return; // console.log('left----',currentIndex,indexref.current);
}
setCurrentIndex(indexref.current - 1) if(currentIndex >= 1){
indexref.current = indexref.current - 1 setCurrentIndex(currentIndex - 1)
console.log('left----',currentIndex,indexref.current); }
}, 0);
}, },
[motionType.RIGHT]:()=>{ [motionType.RIGHT]:()=>{
setTimeout(() => { setTimeout(() => {
setCurrentIndex((indexref.current == (swiperList.length - 1)) ? 0 : (indexref.current + 1)) // setCurrentIndex((indexref.current == (swiperList.length - 1)) ? 0 : (indexref.current + 1))
// indexref.current = (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){
console.log('right----',currentIndex,indexref.current); setCurrentIndex(currentIndex + 1)
}
}, 0); }, 0);
} }
...@@ -119,82 +121,84 @@ const SwiperView = (props) => { ...@@ -119,82 +121,84 @@ const SwiperView = (props) => {
},[currentIndex]) },[currentIndex])
return ( return (
<View <View className="contain">
className="scroll_container"
style={{
width:`${650/100}rem`,
overflow:'hidden'
}}
>
<View className='left_btn' onTap={()=>turnRound('LEFT')}>&lt;&lt;</View> <View className='left_btn' onTap={()=>turnRound('LEFT')}>&lt;&lt;</View>
<Swiper
className="swiper_group" <View
current={currentIndex} className="scroll_container"
easingFunction={easingFunction}
onChange={swiperChange}
onTransition={(e) => onTransition(e)}
circular={circular}
vertical={vertical}
autoplay={autoplay}
duration={duration}
interval={interval}
disableTouch={disableTouch}
style={{ style={{
width:`${swiperGroup.width/100}rem`, width:`${700/100}rem`,
height:`${swiperGroup.height/100}rem`, overflow:'hidden'
overflow:`${swiperGroup.overflow}`
}} }}
> >
{swiperList.length && <Swiper
swiperList.map((item, i) => ( className="swiper_group"
<SwiperItem> current={currentIndex}
<View easingFunction={easingFunction}
className={`scroll_item ${i === currentIndex ? "current_item" : ""} ${useCustomAni(i)}`} onChange={swiperChange}
style={{ circular={circular}
width:`${swiperContent.width/100}rem`, vertical={vertical}
height:`${swiperContent.height/100}rem`, autoplay={autoplay}
backgroundColor:`${ swiperContent.backgroundColor}`, duration={duration}
backgroundImage:`${ swiperContent.backgroundImage}`, interval={interval}
borderRadius:`${swiperContent.borderRadius/100}rem` disableTouch={disableTouch}
}} style={{
onTap={()=>getCurrentDetail(item)} width:`${swiperGroup.width/100}rem`,
> height:`${swiperGroup.height/100}rem`,
{/* {i === currentIndex && ( overflow:`${swiperGroup.overflow}`
<Image }}
className="checkPic" >
src="https://yun.dui88.com/tebuXinYuan/checkGoods.png" {swiperList.length &&
></Image> swiperList.map((item, i) => (
)} */} <SwiperItem>
<View <View
className="item_img_content" className={`scroll_item ${i === currentIndex ? "current_item" : ""} ${useCustomAni(i)}`}
style={{
width:`${swiperContent.width/100}rem`,
height:`${swiperContent.height/100}rem`,
backgroundColor:`${ swiperContent.backgroundColor}`,
backgroundImage:`${ swiperContent.backgroundImage}`,
borderRadius:`${swiperContent.borderRadius/100}rem`
}}
onTap={()=>getCurrentDetail(item)}
> >
{/* 单个swiper主要内容 */} {/* {i === currentIndex && (
<Image <Image
className="img" className="checkPic"
style={{ src="https://yun.dui88.com/tebuXinYuan/checkGoods.png"
width:`${imgContent.width/100}rem`, ></Image>
height:`${imgContent.height/100}rem` )} */}
}} <View
src={item.image}></Image> className="item_img_content"
{ >
item?.content && {/* 单个swiper主要内容 */}
<View <Image
className='text_content' className="img"
style={{ style={{
width:`${textContent.width/100}rem`, width:`${imgContent.width/100}rem`,
height:`${textContent.height/100}rem`, height:`${imgContent.height/100}rem`
}} }}
> src={item.image}></Image>
<View className='text' >{item.content}</View> {
</View> item?.content &&
} <View
className='text_content'
style={{
width:`${textContent.width/100}rem`,
height:`${textContent.height/100}rem`,
}}
>
<View className='text' >{item.content}</View>
</View>
}
</View>
</View> </View>
</View> </SwiperItem>
</SwiperItem> ))}
))} </Swiper>
</Swiper>
</View>
<View className='right_btn' onTap={()=>turnRound('RIGHT')}>&gt;&gt;</View> <View className='right_btn' onTap={()=>turnRound('RIGHT')}>&gt;&gt;</View>
</View> </View>
); );
}; };
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.less
View file @ 52d2d3a2
.contain{
width: 100%;
position: relative;
}
.scroll_container{ .left_btn{
// width: 450px; width: 80px;
// overflow: hidden; height: 40px;
margin: 0 auto; display: flex;
// display: flex; position: absolute;
// justify-content: space-around; justify-content: center;
// align-items: center; align-items: center;
z-index: 1;
top: 50%;
transform: translateY(-50%);
border: 1px solid cyan;
box-sizing: border-box;
}
.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;
}
.scroll_container{
// width: 450px;
// overflow: hidden;
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
position: relative;
.swiper_group { .swiper_group {
margin: 0 auto; margin: 0 auto;
...@@ -22,32 +61,27 @@ ...@@ -22,32 +61,27 @@
.image-property(cover, center center); .image-property(cover, center center);
border: 1px solid cyan; // border: 1px solid cyan;
box-sizing: border-box; // box-sizing: border-box;
}
.scroll_item {
// width: 300px;
margin: 0 auto;
position: relative;
border-radius: 20px;
.image-property(cover, top center);
.checkPic {
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
right: 40px;
top: 40px;
} }
.item_img_content { .scroll_item {
width: 100%; // width: 300px;
.img { margin: 0 auto;
margin: 20px auto 10px; position: relative;
display: block; border-radius: 20px;
border-radius: 20px; .image-property(cover, top center);
background-repeat: no-repeat;
background-position: top center;
.checkPic {
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
right: 40px;
top: 40px;
} }
.text_content{ .text_content{
margin: 0 auto; margin: 0 auto;
...@@ -66,14 +100,14 @@ ...@@ -66,14 +100,14 @@
} }
} }
} &.current_item {
&.current_item {
.item_img_content {
.item_img_content { .img{}
.img{} .text_content{
.text_content{ .text{}
.text{} }
} }
} }
} }
...@@ -91,12 +125,11 @@ ...@@ -91,12 +125,11 @@
// transition: all 1s ease; // transition: all 1s ease;
// } // }
} }
}
} }
@keyframes movein { @keyframes movein {
from { from {
transform: perspective(1000px) translate3d(0,0,0) rotate3d(0, 1, 0, 25deg) scale(0.85); transform: perspective(1000px) translate3d(0,0,0) rotate3d(0, 1, 0, 25deg) scale(0.85);
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.md
View file @ 52d2d3a2
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
| swiperContent | Object | 单个swiperItem的宽高 |{width:250,height:300,backgroundColor:'#fff',borderRadius:25,backgroundImage:''}|/| | swiperContent | Object | 单个swiperItem的宽高 |{width:250,height:300,backgroundColor:'#fff',borderRadius:25,backgroundImage:''}|/|
| imgContent | Object | 图片宽高 |{width:200,height:200}|/| | imgContent | Object | 图片宽高 |{width:200,height:200}|/|
| textContent | Object | 文本宽高 |{width:300,height:60}|/| | textContent | Object | 文本宽高 |{width:300,height:60}|/|
| showLeftRightBtn | Boolean | 是否显示左右点击按钮|/|
#### swiperList数据 #### swiperList数据
```json ```json
......
c_client/src/components/_tb_modal/JackpotModal/JackpotModal.jsx
View file @ 52d2d3a2
...@@ -10,22 +10,28 @@ import useReceive from '@/hooks/useReceive' ...@@ -10,22 +10,28 @@ import useReceive from '@/hooks/useReceive'
const { receiveEnamePrize, receiveObjectPrize } = API const { receiveEnamePrize, receiveObjectPrize } = API
const { commonToast } = tbcc.tb const { commonToast } = tbcc.tb
const JackpotModal = (props) => { import {receivePrize} from '@/utils/prize'
const { onClose, top = '50%', bg = '', width = 300, height = 300, prizesData = {}, receive = false } = props
const prizeItem = {
image:'',
name:'',
type:'', // 奖品类型
id:'', // 奖品id
_id:'',
ename:'', // 会员权益
benefitType:'' // 会员权益
}
const [ getReceive ] = useReceive({ receiveEnamePrize, receiveObjectPrize }) const JackpotModal = (props) => {
const { onClose, top = '50%', bg = '', width = 300, height = 300, prizesData = {}, receive = false, prizeItem={}, showMember=()=>{} } = props
const handleClick = useThrottle(async() => { const handleClick = useThrottle(async() => {
if (receive) { const callObj = {
const prizeId = prizesData.id || prizesData._id vipCallback:()=>{showMember()},
const type = prizesData.type updateCallback:()=>{},
const result = await getReceive({ prizeId, type }) closeCallback:()=>{onClose()}
if (result) {
commonToast(result.message)
}
} else {
onClose()
} }
receivePrize(prizeItem,callObj);
}) })
return ( return (
......
c_client/src/const.js
View file @ 52d2d3a2
...@@ -25,62 +25,7 @@ export const CLOUD_OBJ = { ...@@ -25,62 +25,7 @@ export const CLOUD_OBJ = {
'3':'cloud://B8F0BA22BBA74F8FEA261E1CC9D55355/欢呼声.mp3' '3':'cloud://B8F0BA22BBA74F8FEA261E1CC9D55355/欢呼声.mp3'
} }
/* 测试数据mock */
export const prizeList = [
{
image:
"https://yun.duiba.com.cn/spark/assets/240121a7e7e10a66ad0cfa99a8b3ba9631fc7855.png",
name:'商品描述商品描述商品描述商品描述商品描述1',
content:'商品描述商品描述商品描述商品描述商品描述1',
hasBtn:true
},
{
image:
"https://yun.duiba.com.cn/spark/assets/f9160b053f525455503ea58ae6b43bacea400362.png",
name:'商品描述商品描述商品描述商品描述商品描述2',
content:'商品描述商品描述商品描述商品描述商品描述2'
},
{
image:
"https://yun.duiba.com.cn/spark/assets/28b868b5da81ebd28a4eb14291a8ac287937221c.png",
name:'商品描述商品描述商品描述商品描述商品描述3',
content:'商品描述商品描述商品描述商品描述商品描述3'
},
{
image:
"https://yun.duiba.com.cn/spark/assets/3c305fb907bbebb85ad392cb959fbe62200c407f.png",
name:'商品描述商品描述商品描述商品描述商品描述4',
content:'商品描述商品描述商品描述商品描述商品描述4'
},
{
image:
"https://yun.duiba.com.cn/spark/assets/28b868b5da81ebd28a4eb14291a8ac287937221c.png",
name:'商品描述商品描述商品描述商品描述商品描述5',
content:'商品描述商品描述商品描述商品描述商品描述5'
},
{
image:
"https://yun.duiba.com.cn/spark/assets/3c305fb907bbebb85ad392cb959fbe62200c407f.png",
name:'商品描述商品描述商品描述商品描述商品描述6',
content:'商品描述商品描述商品描述商品描述商品描述6'
},
{
image:
"https://yun.duiba.com.cn/spark/assets/554a90eee5a31ae7628950907974bdee2da8c01e.png",
name:'商品描述商品描述商品描述商品描述商品描述7',
content:'商品描述商品描述商品描述商品描述商品描述7'
},
{
image:
"https://yun.duiba.com.cn/spark/assets/554a90eee5a31ae7628950907974bdee2da8c01e.png",
name:'商品描述商品描述商品描述商品描述商品描述8',
content:'商品描述商品描述商品描述商品描述商品描述8'
}
];
/* /*
浏览页倒计时标识 浏览页倒计时标识
......
c_client/src/hooks/useReceive.js
View file @ 52d2d3a2
import { useCallback } from 'react' import { useCallback } from 'react'
import { checkIsMember } from 'tbcc-sdk-ts/lib/utils' import { checkIsMember } from 'tbcc-sdk-ts/lib/utils'
import tbccTs from 'tbcc-sdk-ts' import API from '@/api'
import { PRIZE_TYPE } from '@/const' import {receiveEnamePrize, receiveMemberEname, receiveObjectPrize } from 'tbcc-sdk-ts/lib/request/capiFn'
import { PRIZE_TYPE, BENEFIT_TYPE } from '@/config/myPrize.config'
const { getUserAddress } = tbccTs.tb
const useReceive = (config) => { const useReceive = (config) => {
const { receiveEnamePrize = () => { }, receiveObjectPrize = () => { } } = config const receivePrize = async(item, callbackObj={vipCallback:()=>{},updateCallback:()=>{},closeCallback:()=>{}}) => {
// 积分 const app = getApp();
const handleGetCredits = useCallback(async (id) => { const { activityId } = app
// 判断是否为会员 const { type, id, ename = '', benefitType } = item
const isVip = await checkIsMember()
console.log(isVip) const successMsg = '领取成功'
if (!isVip) { const errorMsg = '请求失败'
return {
message: '需加入会员才能领取成功哦', if(type === PRIZE_TYPE.CREDITS || (type === PRIZE_TYPE.ENAME && benefitType === BENEFIT_TYPE.MEMBER)) {
state: 'error' const isVip = await checkIsMember()
} if(!isVip) {
} commonToast('需加入会员才能领取成功哦', 2000, ()=>{callbackObj.vipCallback && callbackObj.vipCallback()})
const { success, data } = await receiveEnamePrize({ id }) return;
if (success && data) { }
return {
message: '领取成功',
state: 'success'
}
}
}, [checkIsMember, receiveEnamePrize])
// 优惠券
const handleGetEquity = useCallback(async (id) => {
const { success, data } = await receiveEnamePrize({ id })
if (success && data) {
return {
message: '领取成功',
state: '领取成功'
}
}
}, [receiveEnamePrize])
// 实物
const handleReceiveObjectPrize = useCallback(async (params) => {
let errorMessage = ''
const { success, data } = await receiveObjectPrize(params).catch(res => {
errorMessage = res && res.message
}) || {}
if (success && data) {
return {
message: '领取成功',
state: 'success'
}
} else {
return {
message: errorMessage,
state: 'error'
}
} }
}, [receiveObjectPrize]) const receiveFn = {
// 'update': async () => fetchMyPriceList(),
// 确认地址 [PRIZE_TYPE.ENAME]: async () => {
const handleChooseAddress = useCallback(async (id) => { if(benefitType === BENEFIT_TYPE.MEMBER) {
let errorMessage = '' await receiveMemberEname(API.receiveMemberEname,{params: { sellerId: config.sellerId, ename, id }, successMsg, errorMsg })
const userAddress = await getUserAddress().catch(err => { }else {
errorMessage = err && err.errorMessage await receiveEnamePrize(API.receiveEnamePrize, {params: { activityId, id }, successMsg, errorMsg })
}) }
if (!userAddress) { },
return { [PRIZE_TYPE.OBJECT]: async () => {
message: errorMessage, await receiveObjectPrize(API.receiveObjectPrize, {params: { activityId, id }, successMsg, errorMsg })
state: 'error' },
} [PRIZE_TYPE.CREDITS]: async () => {
} await receiveEnamePrize(API.receiveEnamePrize, {params: { activityId, id }, successMsg, errorMsg })
const { name, telNumber, provinceName, cityName, cityCode, countyName, detailInfo, streetName } = userAddress || {} }
const params = {
name,
phone: telNumber,
addressDetail: detailInfo,
cityCode,
city: cityName,
province: provinceName,
area: countyName,
streetName,
id
}
const result = await my.confirm({
title: '提示',
content: '确认使用该收货地址：' + name + telNumber + userAddress.duibaAddress.address,
confirmButtonText: '确定',
cancelButtonText: '取消'
})
if (result.confirm) {
return await handleReceiveObjectPrize(params)
} }
}, [getUserAddress]) await receiveFn[type]()
// 更新奖品列表
callbackObj.updateCallback && callbackObj.updateCallback();
// 导出的方法 callbackObj.closeCallback && callbackObj.closeCallback();
const exportFn = useCallback(async ({ type, prizeId }) => { }
// 领取优惠券
if (type === PRIZE_TYPE.ENAME) return await handleGetEquity(prizeId)
// 领取实物
if (type === PRIZE_TYPE.OBJECT) return await handleChooseAddress(prizeId)
// 领取积分
if (type === PRIZE_TYPE.CREDITS) return await handleGetCredits(prizeId)
}, [handleGetEquity, handleChooseAddress, handleGetCredits])
return [exportFn] return {
receivePrize
}
} }
export default useReceive export default useReceive
c_client/src/mock.js
View file @ 52d2d3a2
...@@ -87,7 +87,7 @@ export const TASK_DATA = [ ...@@ -87,7 +87,7 @@ export const TASK_DATA = [
export const RANK_LIST = [ export const RANK_LIST = [
{ {
rank: 1, rank: 1,
userNick: '用户昵称', userNick: '用户昵称用户昵称用户昵称',
hotValue: 98882892 hotValue: 98882892
}, },
{ {
...@@ -119,6 +119,31 @@ export const RANK_LIST = [ ...@@ -119,6 +119,31 @@ export const RANK_LIST = [
rank: 7, rank: 7,
userNick: '用户昵称', userNick: '用户昵称',
hotValue: 98882892 hotValue: 98882892
},
{
rank: 8,
userNick: '用户昵称',
hotValue: 98882892
},
{
rank: 9,
userNick: '用户昵称',
hotValue: 98882892
},
{
rank: 10,
userNick: '用户昵称',
hotValue: 98882892
},
{
rank: 11,
userNick: '用户昵称',
hotValue: 98882892
},
{
rank: 12,
userNick: '用户昵称',
hotValue: 98882892
} }
] ]
...@@ -344,4 +369,16 @@ export const prizeList = [ ...@@ -344,4 +369,16 @@ export const prizeList = [
content:'商品描述商品描述商品描述商品描述商品描述8' content:'商品描述商品描述商品描述商品描述商品描述8'
} }
]; ];
\ No newline at end of file
export const BARRAGE_LIST = [
'111',
'222',
'333',
'444',
'555',
'666',
'777',
'888',
'999'
]
\ No newline at end of file
c_client/src/pages/index/index.jsx
View file @ 52d2d3a2
...@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react' ...@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react'
import { View, Image } from '@tarojs/components' import { View, Image } from '@tarojs/components'
import Taro, { useShareAppMessage, useDidShow, getApp } from '@tarojs/taro' import Taro, { useShareAppMessage, useDidShow, getApp } from '@tarojs/taro'
import classnames from 'classnames' 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 { HELP_MODAL_TYPE } from '@/config/help.config'
import { useLogin, useLoginFromShare } from '@/hooks/useLogin' import { useLogin, useLoginFromShare } from '@/hooks/useLogin'
import { useActivityInfoModel, useLoginInfoModel } from '@/store' import { useActivityInfoModel, useLoginInfoModel } from '@/store'
...@@ -11,6 +11,7 @@ import RuleModal from '@/components/_tb_modal/RuleModal/RuleModal' ...@@ -11,6 +11,7 @@ import RuleModal from '@/components/_tb_modal/RuleModal/RuleModal'
import DoHelpModal from '@/components/_tb_modal/DoHelpModal/DoHelpModal' import DoHelpModal from '@/components/_tb_modal/DoHelpModal/DoHelpModal'
import TasksModal from '@/components/_tb_modal/TasksModal/TasksModal' import TasksModal from '@/components/_tb_modal/TasksModal/TasksModal'
import CountDown from '@/components/_tb_comps/CountDown' import CountDown from '@/components/_tb_comps/CountDown'
import JackpotModal from '@/components/_tb_modal/JackpotModal'
import styles from './index.module.less' import styles from './index.module.less'
import tbcc from 'tbcc-sdk-ts' import tbcc from 'tbcc-sdk-ts'
import { useEffect } from 'react' import { useEffect } from 'react'
...@@ -46,16 +47,6 @@ function Index() { ...@@ -46,16 +47,6 @@ function Index() {
// 助力弹窗标识 // 助力弹窗标识
const showHelp = useRef(false) const showHelp = useRef(false)
/* 背景音乐 */
const {playAudio,musicUrl,setOpenStatus,openStatus} = useAudio(BGMUSIC_URL.MUSIC,true)
const playCurrentAudio = () => {
setOpenStatus(!openStatus)
// playAudio(()=>{
// onHandleIndex('prize')
// })
}
const fetchActivityInfo = async() => { const fetchActivityInfo = async() => {
const { success, data } = await API.getActivityBaseInfoById() const { success, data } = await API.getActivityBaseInfoById()
if(success) { if(success) {
...@@ -71,7 +62,7 @@ function Index() { ...@@ -71,7 +62,7 @@ function Index() {
success && setUserInfo(data) success && setUserInfo(data)
} }
useEffect(() =>{ useEffect(() =>{
// fetchActivityInfo() fetchActivityInfo()
// getImgShareUrl('cloud://CEFE74AE67921906B5AF842150646D35/share.png').then(url => { // getImgShareUrl('cloud://CEFE74AE67921906B5AF842150646D35/share.png').then(url => {
// SHARE_IMG.current = url // SHARE_IMG.current = url
// }) // })
...@@ -157,18 +148,24 @@ function Index() { ...@@ -157,18 +148,24 @@ function Index() {
<View className={styles.bemember} onTap={() => setMemberVisible(true)}>入会</View> <View className={styles.bemember} onTap={() => setMemberVisible(true)}>入会</View>
{/* 奖品查看左右滑动 */} <View className={styles['prize_modal_btn']} onTap={()=>setPrizeModalVisible(true)}>中奖弹窗</View>
{/* <ScrollXView {...SCROLLXVIEW_CONFIG} prizeList={prizeList} /> */}
{/* swiper左右滑动 */}
<View className='view' onTap={playCurrentAudio}>play audio</View>
{/* <SwiperView swiperList={prizeList} /> */} {/* 中奖弹窗 */}
{
false &&
{/* 大转盘 */} <JackpotModal
{/* <RotateWheel {...rotateConfig} callback={()=>{}} /> */} closePostion='bottom'
bg=''
width='500'
height='500'
top='45%'
prizeItem={prizeItem}
showMember={()=>setMemberVisible(true)}
onClose={() => setPrizeModalVisible(false)}
/>
}
{ {
tasksModalVisible && tasksModalVisible &&
......
c_client/src/pages/packagePrize/myPrize/myPrize.jsx
View file @ 52d2d3a2
...@@ -12,6 +12,7 @@ import styles from './myPrize.module.less' ...@@ -12,6 +12,7 @@ import styles from './myPrize.module.less'
import { useDidHide, getApp } from '@tarojs/taro' import { useDidHide, getApp } from '@tarojs/taro'
import { receiveEnamePrize, receiveObjectPrize, receiveMemberEname } from 'tbcc-sdk-ts/lib/request/capiFn' import { receiveEnamePrize, receiveObjectPrize, receiveMemberEname } from 'tbcc-sdk-ts/lib/request/capiFn'
import config from '@/config/config' import config from '@/config/config'
import {receivePrize} from '@/utils/prize'
import { PRIZE_CONFIG, DRAW_STATUS, PRIZE_TYPE, BENEFIT_TYPE } from '@/config/myPrize.config' 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, enameStatus: _enameStatus, orderStatus, commonStatus } = PRIZE_CONFIG
...@@ -19,7 +20,6 @@ const objectStatus = { ..._objectStatus, ...commonStatus } ...@@ -19,7 +20,6 @@ const objectStatus = { ..._objectStatus, ...commonStatus }
const enameStatus = { ..._enameStatus, ...commonStatus } const enameStatus = { ..._enameStatus, ...commonStatus }
const { commonToast, navigateToOutside, setClipboard } = tbccTs.tb const { commonToast, navigateToOutside, setClipboard } = tbccTs.tb
import {useAudio} from '@/hooks/useAudio'
function Empty(blankTxt) { function Empty(blankTxt) {
return <View className={styles['my-prize-item__empty']}>{blankTxt}</View> return <View className={styles['my-prize-item__empty']}>{blankTxt}</View>
...@@ -33,8 +33,6 @@ function MyPrizeList() { ...@@ -33,8 +33,6 @@ function MyPrizeList() {
const [ memberVisible, setMemberVisible ] = useState(false) const [ memberVisible, setMemberVisible ] = useState(false)
const [ deliveryModalVisible, setDeliveryModalVisible ] = useState(false) const [ deliveryModalVisible, setDeliveryModalVisible ] = useState(false)
// const {openStatus,setOpenStatus} = useAudio(BGMUSIC_URL.MUSIC,true)
useEffect(() => { useEffect(() => {
fetchMyPriceList() fetchMyPriceList()
}, []) }, [])
...@@ -73,32 +71,16 @@ function MyPrizeList() { ...@@ -73,32 +71,16 @@ function MyPrizeList() {
return return
} }
// 执行奖品领取 // 执行奖品领取
const successMsg = '领取成功' receivePrize(item,{
if(type === PRIZE_TYPE.CREDITS || (type === PRIZE_TYPE.ENAME && benefitType === BENEFIT_TYPE.MEMBER)) { vipCallback:()=>{
const isVip = await checkIsMember() console.log('enter the vip callback function');
if(!isVip) { setMemberVisible(true)
commonToast('需加入会员才能领取成功哦', 2000, () => { setMemberVisible(true) })
return;
}
}
const receiveFn = {
'update': async () => fetchMyPriceList(),
[PRIZE_TYPE.ENAME]: async () => {
if(benefitType === BENEFIT_TYPE.MEMBER) {
await receiveMemberEname(API.updateEnamePrizeReceived,{params: { sellerId: config.sellerId, ename, id }, successMsg })
}else {
await receiveEnamePrize(API.receiveEnamePrize,{params: { activityId, id }, successMsg })
}
}, },
[PRIZE_TYPE.OBJECT]: async () => { updateCallback:()=>{
await receiveObjectPrize(API.receiveObjectPrize,{params: { activityId, id }, successMsg }) console.log('enter the update list callback function');
}, fetchMyPriceList()
[PRIZE_TYPE.CREDITS]: async () => {
await receiveEnamePrize(API.receiveEnamePrize,{params: { activityId, id }, successMsg })
} }
} });
await receiveFn[type]()
receiveFn['update']()
},2000) },2000)
// 入会插件 // 入会插件
const onClose = () => { const onClose = () => {
...@@ -158,7 +140,7 @@ function MyPrizeList() { ...@@ -158,7 +140,7 @@ function MyPrizeList() {
</View> </View>
</ContainerFit> </ContainerFit>
{deliveryModalVisible && <DeliveryModal prizeItem={currentPrize} task={PRIZE_CONFIG.logisticsImage} onClose={() => setDeliveryModalVisible(false)} />} {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/pages/preComp/preComp.jsx
View file @ 52d2d3a2
...@@ -4,7 +4,7 @@ import { useDidShow, useRouter, useDidHide, getApp } from '@tarojs/taro' ...@@ -4,7 +4,7 @@ import { useDidShow, useRouter, useDidHide, getApp } from '@tarojs/taro'
import API from '@/api' import API from '@/api'
import { useLogin, useLoginFromShare } from '@/hooks/useLogin' import { useLogin, useLoginFromShare } from '@/hooks/useLogin'
import { useActivityInfoModel, useLoginInfoModel } from '@/store' import { useActivityInfoModel, useLoginInfoModel } from '@/store'
import { prizeList } from '@/mock' import { prizeList, BARRAGE_LIST } from '@/mock'
import styles from './preComp.module.less' import styles from './preComp.module.less'
...@@ -24,6 +24,17 @@ import RankTitle from '@/components/_tb_comps/Rank/RankTitle/RankTitle' ...@@ -24,6 +24,17 @@ import RankTitle from '@/components/_tb_comps/Rank/RankTitle/RankTitle'
import RankList from '@/components/_tb_comps/Rank/RankList/RankList' import RankList from '@/components/_tb_comps/Rank/RankList/RankList'
import Demo from '@/components/_tb_comps/_Progress/demo'
import Countdown from '@/components/_tb_comps/CountDown/CountDown'
// import Demo from '@/components/_tb_comps/Rank/demo/index'
import JackpotModal from '@/components/_tb_modal/JackpotModal'
import { VerticalBarrage } from '@/components/_tb_comps/Barrage'
const rotateConfig = { const rotateConfig = {
bg: 'https://yun.duiba.com.cn/spark/assets/8b6e920ffd09fab8f9ac2de09f9154879f4d0607.png', bg: 'https://yun.duiba.com.cn/spark/assets/8b6e920ffd09fab8f9ac2de09f9154879f4d0607.png',
...@@ -70,19 +81,45 @@ const swiper_config = { ...@@ -70,19 +81,45 @@ const swiper_config = {
textContent:{width:300,height:60} textContent:{width:300,height:60}
} }
export default function PreComp(props) { export default function PreComp(props) {
/* 背景音乐 */
const {playAudio,musicUrl,setOpenStatus,openStatus} = useAudio(BGMUSIC_URL.MUSIC,true)
const playCurrentAudio = () => {
setOpenStatus(!openStatus)
}
return( return(
<ContainerFit hasFitPsd={true}> <ContainerFit hasFitPsd={true}>
<View className={styles['scroll-view']}> <View className={styles['scroll-view']}>
<ScrollXView prizeList={prizeList} /> {/* <ScrollXView prizeList={prizeList} /> */}
</View>
<View className={styles['comp-view']}>
{/* 大转盘 */}
{/* <RotateWheel /> */}
</View> </View>
<View className={styles['comp-view']}> <View className={styles['comp-view']}>
{/* swiper左右滑动 */} {/* swiper左右滑动 */}
<SwiperView swiperList={prizeList} /> <SwiperView swiperList={prizeList} />
</View> </View>
<View className={styles['comp-view']}>
{/* 大转盘 */} {/* 排行榜 进度条 */}
<RotateWheel /> {/* <Demo /> */}
{/* 倒计时 */}
<View
className={styles['view']}
style={{
marginTop:`${300/100}rem`
}}
>
{/* <Countdown targetTime="2021-10-01 10:00:00" /> */}
<View className={styles['view']} onTap={playCurrentAudio}>play audio</View>
</View> </View>
{/* 竖向弹幕 */}
{/* <VerticalBarrage dataList={BARRAGE_LIST} /> */}
</ContainerFit> </ContainerFit>
) )
} }
\ No newline at end of file
c_client/src/utils/prize.js 0 → 100644
View file @ 52d2d3a2
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