Skip to content

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

wnf

parent 52d2d3a2
Hide whitespace changes
Inline Side-by-side
Showing with 447 additions and 391 deletions
c_client/config/default.js
View file @ d5f04b7a
export default {
hasCanvas: false, // 是否开启游戏模块自动注入dist
hasCanvas: true, // 是否开启游戏模块自动注入dist
defaultPlugins: [
[
'@pluve/taro-plugin-mars', // taro暂时未支持阿里小程序自定义插件 需要引用插件的页面需配置
......@@ -12,12 +12,12 @@ export default {
]
],
canvasPages: [
// {'root': 'pages/index/index.json', 'comRoot': 'components/_miniprogram/game/game'},
{'root': 'pages/packageGame/game/game.json', 'comRoot': 'components/_miniprogram/game/game'}
{'root': 'pages/packageGame/game/game.json', 'comRoot': 'components/_miniprogram/canvasComp/canvasComp'}, // 游戏组件
{'root': 'pages/index/index.json', 'comRoot': 'components/_miniprogram/lottieAnimation/lottieAnimation'} // Lottie组件
],// 引入cavas组件页面（更改canvas引用路径)
canvasComps: [// 拷贝相关页面和依赖到dist目录
{ from: 'minigame/node_modules', to: 'dist/node_modules'},
{ from: 'src/components/_miniprogram/game', to: 'dist/components/_miniprogram/game'}, // 游戏组建引入
{ from: 'src/components/_miniprogram/canvasComp', to: 'dist/components/_miniprogram/canvasComp'}, // 游戏组建引入
{ from: 'src/components/_miniprogram/lottieAnimation', to: 'dist/components/_miniprogram/lottieAnimation'}, // lottie 动画组件
{ from: 'src/lottie', to: 'dist/lottie'},// lottie json文件
]
......
c_client/src/api.js
View file @ d5f04b7a
......@@ -45,7 +45,8 @@ const apiList = {
updateEnamePrizeReceived: 'updateEnamePrizeReceived', // 会员权益领取
getRotatePrizeListInfo:'getRotatePrizeListInfo',//获取奖品列表接口,暂未实现
drawRotatePrize:'drawRotatePrize',//大转盘抽奖接口,暂未实现
exchangePrize: 'exchangePrize' // 兑换奖品
exchangePrize: 'exchangePrize', // 兑换奖品
getUserInfo: 'getUserInfo', // 获取用户信息
}
// 生成API
......
c_client/src/app.config.js
View file @ d5f04b7a
export default {
pages: [
'pages/index/index',
'pages/packageGood/browseGoods/browseGoods',
'pages/packageGood/collectGoods/collectGoods',
'pages/packageGood/orderGoods/orderGoods',
'pages/packageGood/cartGoods/cartGoods',
'pages/preComp/preComp'
'pages/index/index'
// 'pages/preComp/preComp'
],
subPackages: [
{
......@@ -28,6 +24,12 @@ export default {
"pages": [
'game/game'
]
},
{
"root": "pages/packageComs",
"pages": [
'comsTest/comsTest'
]
}
],
window: {
......
c_client/src/components/_base/ContainerFit/ContainerFit.md
View file @ d5f04b7a
......@@ -2,10 +2,10 @@
#### 入参
| 参数 | 描述 |
| 参数 | 类型 | 描述 |
| --- | --- | --- |
|bg|背景图（1624px),非必填|
|hasFitPsd|内容块是否对标设计稿（750px * 1624px）,非必填|
|bg| String |背景图（1624px),非必填|
|hasFitPsd| Boolean |内容块是否对标设计稿（750px * 1624px）,非必填|
#### 使用
``` jsx
......
c_client/src/components/_base/ContainerScroll/ContainerScroll.jsx 0 → 100644
View file @ d5f04b7a
import { ScrollView } from '@tarojs/components'
import React, { useState, useImperativeHandle, forwardRef } from 'react'
import { useThrottle } from '@/hooks/useThrottle'
import styles from './ContainerScroll.module.less'
const ContainerFit = forwardRef((props, ref) => {
const { } = props
// 滚动
const [scrollTop,setScrollTop] = useState(0)
// 滚动指定位置
useImperativeHandle(ref,() => ({ scrollFixTop }))
const scrollFixTop = (topFix) => {
setScrollTop(topFix)
}
// 滑动
const onScroll = useThrottle((e) => {
const { scrollTop: _scrollTop } = e.detail
setScrollTop(_scrollTop)
})
return (
<ScrollView className={styles['scroll-container']}
scrollY scrollTop={scrollTop}
onScroll={(e) => onScroll(e)}
onScrollToUpper={() => console.warn(1)}
scrollWithAnimation
trapScroll={false}
>
{props.children}
</ScrollView>
)
})
export default ContainerFit
\ No newline at end of file
c_client/src/components/_base/ContainerScroll/ContainerScroll.md 0 → 100644
View file @ d5f04b7a
### 滚动容器
#### 入参
| 参数 | 描述 |
| --- | --- |
|ref| ref实例),非必填|
#### 父组件设置滚动具体位置方案
``` jsx
// 滚动 600px
containerRef.current?.scrollFixTop(600)
```
#### 使用
``` jsx
import ContainerScroll from '@/components/_base/ContainerScroll/ContainerScroll'
const containerRef = createRef()
// ref实例
<ContainerFit ref={containerRef}>
</ContainerFit>
```
\ No newline at end of file
c_client/src/components/_base/ContainerScroll/ContainerScroll.module.less 0 → 100644
View file @ d5f04b7a
.scroll-container {
position: relative;
top: 0;
right: 0;
left: 0;
width: 100vw;
height: 100vh;
min-height: 100vh;
}
\ No newline at end of file
c_client/src/components/_miniprogram/lottieAnimation/lottieAnimation.js
View file @ d5f04b7a
import * as fyge from "fyge"
import * as fyge from "@/components/_miniprogram/canvasComp/node_modules/fyge"
import lottieData from '/lottie/index.js'
Component({
......@@ -42,7 +42,9 @@ Component({
//加载
console.warn(lottieData[type])
var l = stage.addChild(new fyge.Lottie(lottieData[type]))
l.play()
l.play(1, () => {
console.warn('动画播放结束')
})
// fyge.GlobalLoader.loadJson((s, json) => {
// console.warn(lottieData)
// var l = stage.addChild(new fyge.Lottie(lottieData))
......
c_client/src/components/_tb_comps/CountDown/old/CountDown.jsx deleted 100644 → 0
View file @ 52d2d3a2
import React, { useState, useEffect, useRef } from 'react'
import { View, Text } from '@tarojs/components'
import { useDidShow, useDidHide } from '@tarojs/taro'
import tbcc from 'tbcc-sdk-ts'
import './CountDown.less'
const { getServerTime } = tbcc.tb
export default function CountDown(props) {
const { endTime, startTime, onUpdate, type = 1, color = '#000', bgColor = 'transparent', fontSize = '26rpx', padding = '0' } = props
const [countDown, setCountDown] = useState(type === 1 ? ['00', ':', '00', ':', '00'] : ['00', '天', '00', '时', '00', '分', '00', '秒'])
const [nowTime, setNowTime] = useState(startTime || Date.now())
const countTimer = useRef(null)
const isAccessRender = useRef(false)
useEffect(() => {
countTimeFn()
return () => clearInterval(countTimer.current)
}, [endTime, nowTime])
useDidShow(() => {
if(isAccessRender.current) {
setNowTime(startTime || Date.now())
}
isAccessRender.current = true
})
const countTimeFn = async () => {
const _nowTime = await getServerTime()
let diffTime = endTime - (startTime || _nowTime)
countTimer.current = setInterval(() => {
if (diffTime > 1000) {
let day = Math.floor(diffTime / (3600 * 1000) / 24)
let hour = Math.floor((diffTime / 1000 / 3600) % 24)
let minute = Math.floor((diffTime / 1000 / 60) % 60)
let second = Math.floor(diffTime / 1000 % 60)
day = day < 10 ? '0' + day : day
hour = hour < 10 ? '0' + hour : hour
minute = minute < 10 ? '0' + minute : minute
second = second < 10 ? '0' + second : second
setCountDown(type === 1 ? [hour, ':', minute, ':', second] : [day, '天', hour, '时', minute, '分', second, '秒'])
diffTime -= 1000
} else {
setCountDown(type === 1 ? ['00', ':', '00', ':', '00'] : ['00', '天', '00', '时', '00', '分', '00', '秒'])
clearInterval(countTimer.current)
onUpdate && onUpdate()
}
}, 1000)
}
return (
<View className="count-down">
{
countDown.map((item, i) => {
return (
<Text className="count-down-time" key={i} style={{ backgroundColor: item !== ':' ? bgColor : 'transparent', fontSize, color, padding }}>{item}</Text>
)
})
}
</View>
)
}
\ No newline at end of file
c_client/src/components/_tb_comps/CountDown/old/CountDown.less deleted 100644 → 0
View file @ 52d2d3a2
.count-down {
display: flex;
align-items: center;
}
.count-down-time {
border-radius: 4rpx;
}
\ No newline at end of file
c_client/src/components/_tb_modal/JackpotModal/JackpotModal.jsx
View file @ d5f04b7a
import React from 'react'
import React, { useState } from 'react'
import { View, Text, Image } from '@tarojs/components'
import Modal from '@/components/_base/Modal/Modal'
import API from '@/api'
import tbcc from 'tbcc-sdk-ts'
import { useThrottle } from '@/hooks/useThrottle'
import './JackpotModal.less'
import useReceive from '@/hooks/useReceive'
const { receiveEnamePrize, receiveObjectPrize } = API
const { commonToast } = tbcc.tb
import {receivePrize} from '@/utils/prize'
import './JackpotModal.less'
const prizeItem = {
image:'',
......@@ -23,34 +16,65 @@ const prizeItem = {
}
const JackpotModal = (props) => {
const { onClose, top = '50%', bg = '', width = 300, height = 300, prizesData = {}, receive = false, prizeItem={}, showMember=()=>{} } = props
const { receivePrize } = useReceive({ successMsg: '奖品发放成功，请前往我的奖品处进行使用', errorMsg: '奖品发放失败，请前往我的奖品处进行处理' })
const { onClose, top = '50%', bg = '', width = 600, height = 700, receive = true, prizeItem={}, showMember=()=>{} } = props
const [ memberModalVisible, setMemberModalVisible ] = useState(false)
const handleClick = useThrottle(async() => {
// 如果跳转我的奖品页面
if(!receive) {
onClose && onClose()
return;
}
const callObj = {
vipCallback:()=>{showMember()},
vipCallback:()=>{
setMemberModalVisible(true)
},
updateCallback:()=>{},
closeCallback:()=>{onClose()}
}
receivePrize(prizeItem,callObj);
})
// 入会弹窗
const onAuthSuccess = async() => {
setMemberModalVisible(false)
handleClick()
}
const onAuthFail = () => {
setMemberModalVisible(false)
}
const closeMemberModal = () => {
setMemberModalVisible(false)
}
return (
<Modal onClose={onClose} top={top}>
<View className='jackpot_content' style={{ width: `${width / 100}rem`, height: `${height / 100}rem`, backgroundImage: `url(${bg})` }}>
<View className='title_box'>
<Text className='title'>恭喜您</Text>
</View>
<Text className='notify'>抽到了以下奖品</Text>
<View className='gift_box'>
<View className='gift'>
<Image src={prizesData?.image} />
<>
<Modal onClose={onClose} top={top}>
<View className='jackpot_content' style={{ width: `${width / 100}rem`, height: `${height / 100}rem`, backgroundImage: `url(${bg})` }}>
<View className='title_box'>
<Text className='title'>恭喜您</Text>
</View>
<Text className='notify'>抽到了以下奖品</Text>
<View className='gift_box'>
<View className='gift'>
<Image src={prizeItem?.image} />
</View>
<Text className='gift_name'>{prizeItem?.name}</Text>
</View>
<Text className='gift_name'>{prizesData?.name}</Text>
<View className='btn' onTap={handleClick}>领取奖励</View>
<Text className='hint'>奖品可在<Text className='hint_hot'>“我的奖品”</Text>中查看</Text>
</View>
<View className='btn' onTap={handleClick}>领取奖励</View>
<Text className='hint'>奖品可在<Text className='hint_hot'>“我的奖品”</Text>中查看</Text>
</View>
</Modal>
</Modal>
{
<member-modal
expend={memberModalVisible}
onClose={() => closeMemberModal()}
onAuthFail={onAuthFail}
onAuthSuccess={onAuthSuccess}
/>
}
</>
)
}
......
c_client/src/components/_tb_modal/JackpotModal/index.js
View file @ d5f04b7a
import JackpotModal from './JackpotModal'
import useReceive from '@/hooks/useReceive'
export { useReceive }
export default JackpotModal
c_client/src/components/_tb_modal/PrizeModal/PrizeModal.jsx deleted 100644 → 0
View file @ 52d2d3a2
import { View, Image, Text } from '@tarojs/components'
import React, { useState } from 'react'
import Modal from '@/components/_base/Modal/Modal'
import { useThrottle } from '@/hooks/useThrottle'
import styles from './PrizeModal.module.less'
import { BENEFIT_TYPE, PRIZE_TYPE } from '@/config/myPrize.config'
import { checkIsMember } from 'tbcc-sdk-ts/lib/utils'
import { commonToast, navigateToOutside } from 'tbcc-sdk-ts/lib/core/tb'
import { receiveEnamePrize, receiveObjectPrize, receiveMemberEname } from '@/utils/util'
import config from '@/config'
export default function PrizeModal(props) {
const { prize = {}, onClose = () => {}, } = props
const app = getApp()
const { image = '', name = '', id = '', type = 1, benefitType = 1, ename = '' } = prize
const [ memberModalVisible, setMemberModalVisible ] = useState(false)
const onRecivePrize = useThrottle(async () => {
const { activityId } = app
const successMsg = '奖品发放成功，请前往我的奖品处进行使用'
const errorMsg = '奖品发放失败，请前往我的奖品处进行处理'
if(type === PRIZE_TYPE.CREDITS || (type === PRIZE_TYPE.ENAME && benefitType === BENEFIT_TYPE.MEMBER)) {
const isVip = await checkIsMember()
if(!isVip) {
commonToast('加入会员才可领取哦')
setMemberModalVisible(true)
return;
}
}
const receiveFn = {
[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]()
onClose()
},2000)
// 入会弹窗
const onAuthSuccess = async() => {
setMemberModalVisible(false)
onRecivePrize()
}
const onAuthFail = () => {
setMemberModalVisible(false)
}
const closeMemberModal = () => {
setMemberModalVisible(false)
}
const onCloseModal = () => {
onClose && onClose()
}
return (
<>
<Modal hideCloseButton={false} onClose={onCloseModal} top={'50%'}>
<View className={styles['prize-container']}>
<View className={styles['prize-name']}>{'获得'+name+'奖品'}</View>
<View className={styles['prize-icon']}>
<Image src={image} className={styles['prize-icon-img']} />
</View>
<Image src={'//yun.duiba.com.cn/taobaomini/pike_call/prize_btn.png'} onClick={() => onRecivePrize()} className={styles['prize-btn']} />
<View className={styles['prize-desc']}>奖品可在我的奖品中查看</View>
</View>
</Modal>
{
memberModalVisible &&
<member-modal
onClose={() => closeMemberModal()}
onAuthFail={onAuthFail}
onAuthSuccess={onAuthSuccess}
/>
}
</>
)
}
\ No newline at end of file
c_client/src/components/_tb_modal/PrizeModal/PrizeModal.module.less deleted 100644 → 0
View file @ 52d2d3a2
.prize-container {
.wh(636px,890px);
.image('//yun.duiba.com.cn/taobaomini/pike_call/prize_bg.png');
position: relative;
.flex-col-bottom();
align-items: center;
}
.pos-row-center() {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0);
}
.prize-name {
font-size: 40px;
font-family: SourceHanSansSC;
font-weight: bold;
color: #473F39;
margin-bottom: 13px;
}
.prize-icon {
width: 287px;
height: 175px;
// background: #F2D6D3;
border-radius: 12px;
margin-bottom: 36px;
.flex-row-center();
}
.prize-icon-img {
.wh(175px,175px);
}
.prize-btn {
.wh(437px,101px);
margin-bottom: 11px;
}
.prize-desc{
font-size: 20px;
font-family: SourceHanSansSC;
font-weight: bold;
color: #676E6E;
margin-bottom: 60px;
}
\ No newline at end of file
c_client/src/components/_tb_modal/TasksModal/TasksModal.jsx
View file @ d5f04b7a
import { View, ScrollView, Image } from '@tarojs/components'
import React, { useState } from 'react'
import React, { useState, useRef } from 'react'
import { noopFn } from '@/utils/util'
import Popup from '@/components/_base/Popup/Popup'
import styles from './TasksModal.module.less'
......@@ -12,13 +12,20 @@ export default function TasksModal(props) {
const { onClose = noopFn } = props
const [ memberShopVisible, setMemberShopVisible ] = useState(false)
const { taskList, handleItem, fetchTaskList } = useTasks(props)
const checkItem = useRef(null)
const handleTask = (itm) => {
checkItem.current = itm
handleItem(itm,() => {
setMemberShopVisible(true)
})
}
const onCloseMemberModal = () => {
setMemberShopVisible(false)
}
const onAuthSuccess = () => {
setMemberShopVisible(false)
fetchTaskList()
checkItem.current && handleItem(checkItem.current)
}
const onAuthFail = () => {
setMemberShopVisible(false)
......@@ -39,15 +46,15 @@ export default function TasksModal(props) {
return (
<View className={styles['item']} key={'task_I' + i}>
<View className={styles['item__left']}>
<Image src={icons[item.taskType]} mode='widthFix' />
<Image src={icons[item.key]} mode='widthFix' />
</View>
<View className={styles['item__left-label']}>
<View className={styles['item__left-title']}>{item.title}</View>
<View className={styles['item__left-reward']}>{rewardMsg + item.rewards}</View>
<View className={styles['item__left-title']}>{item.name}</View>
<View className={styles['item__left-reward']}>{rewardMsg + item.reward}</View>
</View>
<View className={`${styles['list-item__right']} ${styles['item__status-' + item.status]}`} onClick={() => handleItem(item)}>
<View className={`${styles['list-item__right']} ${styles['item__status-' + item.status]}`} onClick={() => handleTask(item)}>
{
item.status === TASK_STATUS.WAIT_DO ? (doTxt[item.taskType] || '去完成') : commonTxt[item.status]
item.status === TASK_STATUS.WAIT_DO ? (doTxt[item.key] || '去完成') : commonTxt[item.status]
}
</View>
</View>
......@@ -59,7 +66,7 @@ export default function TasksModal(props) {
</View>
</View>
</Popup>
{memberShopVisible && <member-modal onClose={onCloseMemberModal} onAuthFail={onAuthFail} onAuthSuccess={onAuthSuccess} />}
{<member-modal expend={memberShopVisible} onClose={onCloseMemberModal} onAuthFail={onAuthFail} onAuthSuccess={onAuthSuccess} />}
</>
)
}
c_client/src/config/task.config.js
View file @ d5f04b7a
......@@ -56,6 +56,8 @@ export const TASK_CONFIG = {
},
successMsg: '领取成功，奖励值+',
rewardMsg: '抽盒次数+',
rewardsKey: 'totalHotValue',
browseGoodType: 'browseGoods',// 临时使用 browse ｜ browseGoods
isMock: false, // 是否使用mock数据
jumpType: 1, // 1 跳转浏览15s 才算完成 2 跳转即算完成
browseTime: 15, // 浏览时间
......
c_client/src/hooks/useReceive.js
View file @ d5f04b7a
import { useCallback } from 'react'
import { checkIsMember } from 'tbcc-sdk-ts/lib/utils'
import { commonToast } from 'tbcc-sdk-ts/lib/core/tb'
import API from '@/api'
import {receiveEnamePrize, receiveMemberEname, receiveObjectPrize } from 'tbcc-sdk-ts/lib/request/capiFn'
import { PRIZE_TYPE, BENEFIT_TYPE } from '@/config/myPrize.config'
import config from '@/config/config'
const useReceive = (config) => {
const useReceive = (props) => {
const { successMsg = '领取成功', errorMsg = '' } = props
const receivePrize = async(item, callbackObj={vipCallback:()=>{},updateCallback:()=>{},closeCallback:()=>{}}) => {
const app = getApp();
const { activityId } = app
const { type, 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()})
commonToast('需加入会员才能领取成功哦', 1000, ()=>{callbackObj.vipCallback && callbackObj.vipCallback()})
return;
}
}
const receiveFn = {
// 'update': async () => fetchMyPriceList(),
[PRIZE_TYPE.ENAME]: async () => {
if(benefitType === BENEFIT_TYPE.MEMBER) {
await receiveMemberEname(API.receiveMemberEname,{params: { sellerId: config.sellerId, ename, id }, successMsg, errorMsg })
......
c_client/src/hooks/useTasks.js
View file @ d5f04b7a
......@@ -10,7 +10,7 @@ import { SHOP_ID } from '@/const'
import config from '@/config/config'
import { TASK_CONFIG, ORDER_GOOD_TYPE, BROSE_GOOD_TYPE, TASK_STATUS, TASK_SHOW_TYPE } from '@/config/task.config'
const { jumpType, browseTime, showTaskType, browseType, orderType, successMsg, isMock = false } = TASK_CONFIG
const { jumpType, browseTime, showTaskType, browseType, orderType, successMsg, isMock = false, browseGoodType } = TASK_CONFIG
export function useTasks(props) {
const { onUpdate } = props
const app = getApp()
......@@ -23,8 +23,8 @@ export function useTasks(props) {
useDidShow(() => {
if (app.isFlashTask) {
app.isFlashTask = false
if (preBrowseTime.current && ((Date.now() - preBrowseTime.current) / 1000) >= browseTime && currentTaskType !== 'browseGoods') {
doCompleteTaskHandle(currentTaskType, true)
if (preBrowseTime.current && ((Date.now() - preBrowseTime.current) / 1000) >= browseTime && currentTaskType !== browseGoodType) {
doCompleteTaskHandle(currentTaskType)
preBrowseTime.current = null
} else if(preBrowseTime.current && ((Date.now() - preBrowseTime.current) / 1000) < browseTime) {
commonToast(`未达到${browseTime}秒~`)
......@@ -48,15 +48,24 @@ export function useTasks(props) {
const { success, data } = await API.getTaskList({ isVip })
if(success && data) {
const { list = [] } = data
setTaskList(list)
const _list = list.map(itm => {
return {
...itm,
rateType: itm?.rateType || itm?.taskRateType,
reward: itm?.reward || itm?.rewards,
key: itm?.key || itm?.taskType,
name: itm?.name || itm?.title,
}
})
setTaskList(_list)
}
}
// 点击任务项
const handleItem = useThrottle(async(item) => {
const { status, taskType } = item
const handleItem = useThrottle(async(item, callbackFn) => {
const { status, key } = item
const tapFn = {
[TASK_STATUS.WAIT_RECEIVE]: async() => {
const { success, data } = await API.receiveTask({ key: taskType, rewardsKey: 'totalHotValue' })
const { success, data } = await API.receiveTask({ key, rewardsKey: TASK_CONFIG.rewardsKey })
if (success && data) {
const { rewards } = data
commonToast(`${successMsg}${rewards}`)
......@@ -64,28 +73,35 @@ export function useTasks(props) {
onUpdate && onUpdate()
}
},
[TASK_STATUS.WAIT_DO]: () => completeTask(item)
[TASK_STATUS.WAIT_DO]: () => completeTask(item, callbackFn)
}
tapFn[status] && tapFn[status]()
})
// 完成任务处理
const completeTask = async(item) => {
const { taskType, url, itemIds, keepTime } = item
setCurrentTaskType(taskType)
const completeTask = async(item, callbackFn = () => {}) => {
const { key, url, itemIds, keepTime } = item
setCurrentTaskType(key)
const completeFn = {
member: () => setMemberShopVisible(true),
member: async () => {
const isVip = await checkIsMember()
if(!isVip) {
callbackFn()
return;
}
doCompleteTaskHandle(key,isVip)
},
invites: () => showSharePanel(),
follow: async () => {
// 已关注店铺直接完成任务
const isFollow = await checkShopFavoredStatus(config.sellerId)
if (isFollow) {
doCompleteTaskHandle(taskType)
doCompleteTaskHandle(key)
return;
}
// 未关注店铺直接关注并完成任务
const checkFollow = await favorShop(config.sellerId)
if(checkFollow) {
doCompleteTaskHandle(taskType)
doCompleteTaskHandle(key)
return;
}
},
......@@ -93,7 +109,7 @@ export function useTasks(props) {
jumpLink: async() => {
navigateToOutside(url)
if (jumpType === 2) {
doCompleteTaskHandle(taskType)
doCompleteTaskHandle(key)
} else {
app.isFlashTask = true
preBrowseTime.current = Date.now()
......@@ -117,19 +133,19 @@ export function useTasks(props) {
app.isFlashTask = true
navigateTo(`/pages/packageGood/collectGoods/collectGoods?itemIds=${itemIds}`)
},
sign: () => doCompleteTaskHandle(taskType),
sign: () => doCompleteTaskHandle(key),
share: () => {
showSharePanel();
setTimeout(() => {
doCompleteTaskHandle(taskType)
doCompleteTaskHandle(key)
}, 2000);
}
}
completeFn[taskType] && completeFn[taskType]()
completeFn[key] && completeFn[key]()
}
// 完成任务接口调用
const doCompleteTaskHandle = async(taskType) => {
const { success } = await API.completeTask({ key: taskType })
const doCompleteTaskHandle = async(key,isVip) => {
const { success } = await API.completeTask({ key, isVip })
if (success) {
await fetchTaskList()
}
......
c_client/src/pages/index/index.config.js
View file @ d5f04b7a
......@@ -4,6 +4,7 @@ export default {
allowsBounceVertical: 'NO',
enableShareAppMessage: true,
usingComponents: {
'member-modal': '../../components/_miniprogram/memberModal/memberModal'
'member-modal': '../../components/_miniprogram/memberModal/memberModal',
'canvas-comp': '../../../components/_miniprogram/comBlank/comBlank'
}
}
c_client/src/pages/index/index.jsx
View file @ d5f04b7a
......@@ -2,15 +2,15 @@ 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 { ACTIVITY_STATUS, SHARE_CONFIG } from '@/const.js'
import { SHARE_CONFIG } from '@/const.js'
import { HELP_MODAL_TYPE } from '@/config/help.config'
import { useLogin, useLoginFromShare } from '@/hooks/useLogin'
import { useActivityInfoModel, useLoginInfoModel } from '@/store'
import API from '@/api'
import ContainerFit from '@/components/_base/ContainerFit/ContainerFit'
import RuleModal from '@/components/_tb_modal/RuleModal/RuleModal'
import DoHelpModal from '@/components/_tb_modal/DoHelpModal/DoHelpModal'
import TasksModal from '@/components/_tb_modal/TasksModal/TasksModal'
import CountDown from '@/components/_tb_comps/CountDown'
import JackpotModal from '@/components/_tb_modal/JackpotModal'
import styles from './index.module.less'
import tbcc from 'tbcc-sdk-ts'
......@@ -19,6 +19,7 @@ const { navigateTo, openDetail, showSharePanel } = tbcc.tb
const { getImgShareUrl, checkIsMember, validateActivityStatus } = tbcc.utils
import {useAudio} from '@/hooks/useAudio'
import {CLOUD_OBJ, BGMUSIC_URL} from '@/const'
import { commonToast } from 'tbcc-sdk-ts/lib/core/tb'
......@@ -30,6 +31,12 @@ const INDEX_CONFIG = {
shareButton: '', // 分享按钮
taskButton: '' // 任务按钮
}
const prizeItem = {
id: "6115fc6a3075d9bde4b16a53",
image: "https://img.alicdn.com/imgextra/i4/353042333/O1CN012k7gbk1T6YigovFNu_!!353042333-0-isvtu.jpg",
type: 3,
name: '测试i奖品'
}
function Index() {
const app = getApp()
......@@ -40,6 +47,8 @@ function Index() {
const [ doHelpModalVisible, setDoHelpModalVisible ] = useState(false)
const [ ruleModalVisible, setRuleModalVisible ] = useState(false)
const [ tasksModalVisible, setTasksModalVisible ] = useState(false)
// 中奖弹窗
const [ prizeModalVisible, setPrizeModalVisible] = useState(false)
// 分享图
const SHARE_IMG = useRef('')
// 助力弹窗类型
......@@ -133,40 +142,43 @@ function Index() {
updateActInfo && fetchActivityInfo()
},
'rule': () => setRuleModalVisible(true),
'prize': () => {navigateTo('/pages/packagePrize/myPrize/myPrize')},
'game': () => navigateTo('/pages/packageGame/game/game')
'prize': () => {
navigateTo('/pages/packagePrize/myPrize/myPrize')
},
'game': () => navigateTo('/pages/packageGame/game/game'),
'comps': () => {
navigateTo('/pages/packageComs/comsTest/comsTest')
}
}
Fn[type]()
}
return (
<View className={styles.container} style={{ backgroundImage: `url(${INDEX_CONFIG.bg})`}}>
<View className={styles.rule} style={{ backgroundImage: `url(${INDEX_CONFIG.ruleButton})` }} onClick={() => setRuleModalVisible(true)}>活动规则</View>
<View className={styles.my_prize} style={{ backgroundImage: `url(${INDEX_CONFIG.myPrizeButton})` }} onClick={() => onHandleIndex('prize')}>我的奖品</View>
<View className={styles.tasks} style={{ backgroundImage: `url(${INDEX_CONFIG.taskButton})` }} onClick={() => setTasksModalVisible(true)}>任务</View>
<View className={styles.games} style={{ backgroundImage: `url(${INDEX_CONFIG.taskButton})` }} onClick={() =>onHandleIndex('game') }>游戏</View>
<View className={styles.bemember} onTap={() => setMemberVisible(true)}>入会</View>
<View className={styles['prize_modal_btn']} onTap={()=>setPrizeModalVisible(true)}>中奖弹窗</View>
<>
<ContainerFit hasFitPsd={true} bg={INDEX_CONFIG.bg}>
<View className={styles.rule} style={{ backgroundImage: `url(${INDEX_CONFIG.ruleButton})` }} onClick={() => setRuleModalVisible(true)}>活动规则</View>
<View className={styles.my_prize} style={{ backgroundImage: `url(${INDEX_CONFIG.myPrizeButton})` }} onClick={() => onHandleIndex('prize')}>我的奖品</View>
<View className={styles.tasks} onClick={() => setTasksModalVisible(true)}>任务</View>
<View className={styles.games} onClick={() =>onHandleIndex('game') }>游戏</View>
<View className={styles.bemember} onTap={() => setMemberVisible(true)}>入会</View>
<View className={styles.comps} onClick={() => onHandleIndex('comps')}>组件预览</View>
<View className={styles['prize_modal_btn']} onTap={()=>setPrizeModalVisible(true)}>中奖弹窗</View>
</ContainerFit>
{/* 中奖弹窗 */}
{
false &&
prizeModalVisible &&
<JackpotModal
closePostion='bottom'
bg=''
width='500'
height='500'
width='600'
height='700'
top='45%'
prizeItem={prizeItem}
showMember={()=>setMemberVisible(true)}
onClose={() => setPrizeModalVisible(false)}
/>
}
{
tasksModalVisible &&
<TasksModal
......@@ -198,7 +210,8 @@ function Index() {
/>
}
{<member-modal expend={memberVisible} sellerId={98563612} onClose={onClose} onAuthFail={onAuthFail} onAuthSuccess={onAuthSuccess} />}
</View>
{false && <canvas-comp />}
</>
)
}
......
c_client/src/pages/index/index.module.less
View file @ d5f04b7a
......@@ -23,41 +23,40 @@
.rule {
.index_button();
left: 20px;
top: 100px;
top: 228px;
}
.my_prize {
.index_button();
right: 20px;
top: 100px;
top: 228px;
}
.share {
.index_button();
right: 20px;
top: 180px;
top: 280px;
}
.bemember {
.index_button();
right: 20px;
top: 260px;
top: 340px;
}
.tasks {
.index_button();
right: 20px;
top: 340px;
top: 400px;
}
.games {
.index_button();
right: 20px;
top: 420px;
top: 460px;
}
.blank_content {
width: 100%;
height: 2500px;
background: #eee;
}
.rankModal {
.wh(750px,600px);
padding: 25px;
box-sizing: border-box;
background-color: #eee;
.comps {
.index_button();
right: 20px;
top: 520px;
}
.prize_modal_btn {
.index_button();
right: 20px;
top: 620px;
}
\ No newline at end of file
c_client/src/pages/preComp/preComp.jsx → c_client/src/pages/packageComs/comsTest/comsTest.jsx
View file @ d5f04b7a
import React, { useEffect, useState, useRef } from 'react'
import React, { useEffect, useState, useRef, createRef } from 'react'
import { View } from '@tarojs/components'
import { useDidShow, useRouter, useDidHide, getApp } from '@tarojs/taro'
import API from '@/api'
import { useLogin, useLoginFromShare } from '@/hooks/useLogin'
import { useActivityInfoModel, useLoginInfoModel } from '@/store'
import { prizeList, BARRAGE_LIST } from '@/mock'
import { dateFormatter } from 'tbcc-sdk-ts/lib/utils/index'
import styles from './preComp.module.less'
import styles from './comsTest.module.less'
import {useAudio} from '@/hooks/useAudio'
import {CLOUD_OBJ, BGMUSIC_URL} from '@/const'
import { CLOUD_OBJ, BGMUSIC_URL } from '@/const'
import ContainerFit from '@/components/_base/ContainerFit/ContainerFit'
import ContainerScroll from '@/components/_base/ContainerScroll/ContainerScroll'
import ScrollXView from '@/components/_tb_comps/ScrollXView/ScrollXView'
import SwiperView from '@/components/_tb_comps/SwiperView/SwiperView'
......@@ -28,11 +31,8 @@ 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'
......@@ -55,16 +55,16 @@ const rotateConfig = {
}
const SCROLLXVIEW_CONFIG = {
prizeList: [],
containerWidth : 200,
containerHeight : 200,
imgWidth:120,
imgHeight:120,
isShowPrizeName:true,
prizeInCenterNum:3,
marginRight:26,
backgroundColor:'#E7E7EF',
backgroundImage:''
prizeList: [],
containerWidth : 200,
containerHeight : 200,
imgWidth:120,
imgHeight:120,
isShowPrizeName:true,
prizeInCenterNum:3,
marginRight:26,
backgroundColor:'#E7E7EF',
backgroundImage:''
}
const swiper_config = {
......@@ -80,46 +80,76 @@ const swiper_config = {
imgContent:{width:200,height:200},
textContent:{width:300,height:60}
}
export default function PreComp(props) {
const prizeItem = {
id: "6115fc6a3075d9bde4b16a53",
image: "https://img.alicdn.com/imgextra/i4/353042333/O1CN012k7gbk1T6YigovFNu_!!353042333-0-isvtu.jpg",
type: 2,
name: '测试i奖品'
}
export default function ComsTest(props) {
/* 背景音乐 */
const {playAudio,musicUrl,setOpenStatus,openStatus} = useAudio(BGMUSIC_URL.MUSIC,true)
const [endTime, setEndTime] = useState('')
const [prizeModalVisible,setPrizeModalVisible] = useState(false)
const containerRef = createRef()
useEffect(() => {
const _endTime = dateFormatter(Date.now() + 10 * 24 * 60 * 60 * 1000,'yyyy-MM-dd hh:mm:ss')
setEndTime(_endTime)
})
const playCurrentAudio = () => {
setOpenStatus(!openStatus)
}
return(
<ContainerFit hasFitPsd={true}>
<View className={styles['scroll-view']}>
{/* <ScrollXView prizeList={prizeList} /> */}
</View>
<View className={styles['comp-view']}>
{/* 大转盘 */}
{/* <RotateWheel /> */}
</View>
<View className={styles['comp-view']}>
{/* swiper左右滑动 */}
<SwiperView swiperList={prizeList} />
</View>
{/* 排行榜 进度条 */}
{/* <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>
{/* 竖向弹幕 */}
{/* <VerticalBarrage dataList={BARRAGE_LIST} /> */}
</ContainerFit>
<>
<ContainerScroll ref={containerRef}>
<View className={styles['scroll-view']}>
<View className={styles['comp-title']}>滑动组件</View>
<ScrollXView prizeList={prizeList} />
</View>
<View className={styles['comp-view']}>
<View className={styles['comp-title']}>swiper左右滑动</View>
<SwiperView swiperList={prizeList} />
</View>
<View className={styles['comp-view']}>
<View className={styles['comp-title']}>大转盘</View>
<RotateWheel />
</View>
<View className={styles['comp-view']}>
<View className={styles['comp-title']}>进度条</View>
<Demo />
</View>
<View className={styles['comp-view']}>
<View className={styles['comp-title']}>排行榜</View>
<RankTitle />
<RankList />
</View>
<View className={styles['comp-view']}>
<View className={styles['comp-title']}>倒计时</View>
{endTime && <Countdown targetTime={endTime} showDay={true} />}
</View>
<View className={styles['comp-view']}>
<View className={styles['comp-title']}>音频hooks</View>
<View className={styles['view']} onTap={playCurrentAudio}>play audio</View>
</View>
<View className={styles['comp-view']} style={{ marginBottom: '0.5rem'}}>
<View className={styles['comp-title']}>竖向弹幕</View>
<VerticalBarrage dataList={BARRAGE_LIST} />
</View>
<View onClick={() => containerRef.current?.scrollFixTop(600)} className={styles['btn-one']}>滚动指定位置</View>
<View onClick={() => setPrizeModalVisible(true)} className={styles['btn-two']}>中奖弹窗</View>
</ContainerScroll>
{ prizeModalVisible && <JackpotModal prizeItem={prizeItem} onClose={() => setPrizeModalVisible(false)} />}
</>
)
}
\ No newline at end of file
c_client/src/pages/packageComs/comsTest/comsTest.module.less 0 → 100644
View file @ d5f04b7a
.scroll-view {
margin-top: 40px;
}
.comp-view {
margin-top: 50px;
width: 100%;
height: auto;
}
.comp-title {
margin: 80px 0 20px;
}
.pre-btn() {
width: 160px;
height: 40px;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
position: absolute;
right: 0;
}
.btn-one {
.pre-btn();
top: 100px;
}
.btn-two {
.pre-btn();
top: 160px;
}
\ No newline at end of file
c_client/src/pages/packageGame/game/game.config.js
View file @ d5f04b7a
......@@ -5,6 +5,6 @@ export default {
enableShareAppMessage: true,
usingComponents: {
'member-modal': '../../../components/_miniprogram/memberModal/memberModal',
'canvas-comp': '../../../components/_miniprogram/lottieBlank/lottieBlank'
'canvas-comp': '../../../components/_miniprogram/comBlank/comBlank'
}
}
\ No newline at end of file
c_client/src/pages/packageGame/game/game.jsx
View file @ d5f04b7a
import React, { useEffect, useState, useRef } from 'react'
import React, { useEffect, useState } from 'react'
import { View } from '@tarojs/components'
import { useDidShow, useRouter, useDidHide, getApp } from '@tarojs/taro'
import API from '@/api'
......@@ -25,7 +25,6 @@ function GamePage(props) {
const [ canvasVisible, setCanvasVisible] = useState(false)
const [ memberVisible,setMemberVisible] = useState(false)
const [updateFlag, setUpdateFlag] = useState(1)
const compRef = useRef(null)
useEffect(() =>{
// getImgShareUrl('cloud://2D60DC04FC1888AF6F865B88F0B2EBCC//share.png').then(res => {
......@@ -145,6 +144,7 @@ function GamePage(props) {
})
}
}
// 入会插件
const onClose = () => {
setMemberVisible(false)
}
......@@ -154,15 +154,14 @@ function GamePage(props) {
const onAuthFail = () => {
setMemberVisible(false)
}
const onTestHandle = () => {
const onTestHandle = (e) => {
setMemberVisible(true)
// onMessage({mpEvent: { data: { netName: 'mine.getAppData' }}})
}
return(
<View>
{ canvasVisible && <canvas-comp data={canvasData} onMessage={onMessage} updateFlag={updateFlag} />}
{ canvasVisible && <canvas-comp data={canvasData} onMessage={onMessage} updateFlag={updateFlag} />}
<View className={styles['test-box']} onClick={(e) => onTestHandle(e)}>入会按钮</View>
{memberVisible && <member-modal onClose={onClose} onAuthFail={onAuthFail} onAuthSuccess={onAuthSuccess} />}
{<member-modal expend={memberVisible} onClose={onClose} onAuthFail={onAuthFail} onAuthSuccess={onAuthSuccess} />}
</View>
)
}
......
c_client/src/pages/packagePrize/myPrize/myPrize.jsx
View file @ d5f04b7a
......@@ -6,14 +6,11 @@ import ContainerFit from '@/components/_base/ContainerFit/ContainerFit'
import TitleImg from '@/components/_tb_comps/TitleImg/TitleImg'
import tbccTs from 'tbcc-sdk-ts'
import { useThrottle } from '@/hooks/useThrottle'
import { checkIsMember } from 'tbcc-sdk-ts/lib/utils'
import { dateFormatter } from '@/utils/date'
import styles from './myPrize.module.less'
import { useDidHide, getApp } from '@tarojs/taro'
import { receiveEnamePrize, receiveObjectPrize, receiveMemberEname } from 'tbcc-sdk-ts/lib/request/capiFn'
import config from '@/config/config'
import {receivePrize} from '@/utils/prize'
import { PRIZE_CONFIG, DRAW_STATUS, PRIZE_TYPE, BENEFIT_TYPE } from '@/config/myPrize.config'
import useReceive from '@/hooks/useReceive'
import { PRIZE_CONFIG, DRAW_STATUS, PRIZE_TYPE } from '@/config/myPrize.config'
const { objectStatus: _objectStatus, enameStatus: _enameStatus, orderStatus, commonStatus } = PRIZE_CONFIG
const objectStatus = { ..._objectStatus, ...commonStatus }
......@@ -27,6 +24,7 @@ function Empty(blankTxt) {
function MyPrizeList() {
const app = getApp()
const { receivePrize } = useReceive({ successMsg: '领取成功', errorMsg: '' })
const [ myPrizeList, setMyPrizeList ] = useState([])
const [ expiredTime, setExpiredTime ] = useState('')
const [ currentPrize, setCurrentPrize ] = useState({})
......@@ -54,7 +52,7 @@ function MyPrizeList() {
// 领取奖品
const handleClick = useThrottle(async (item) => {
const { activityId } = app
const { type, drawStatus, useUrl = '', id, _id, ename = '', benefitType } = item
const { type, drawStatus, useUrl = '', itemId = '' } = item
// 领取前验证
if (drawStatus === DRAW_STATUS.SUCCESS) {
if (type === PRIZE_TYPE.OBJECT && PRIZE_CONFIG.hasLogistic) {
......@@ -81,7 +79,7 @@ function MyPrizeList() {
fetchMyPriceList()
}
});
},2000)
},1500)
// 入会插件
const onClose = () => {
setMemberVisible(false)
......
c_client/src/pages/preComp/preComp.module.less deleted 100644 → 0
View file @ 52d2d3a2
.scroll-view {
margin-top: 208px;
}
.comp-view {
margin-top: 50px;
width: 100%;
height: auto;
}
\ No newline at end of file
c_client/src/utils/prize.js deleted 100644 → 0
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