Skip to content

T
taobao-mini-template
Commit 6f277d2c authored by wanghuan's avatar wanghuan
Browse files
Options

add:组件测试

parent 129ec776
Show whitespace changes
Inline Side-by-side
Showing with 125 additions and 167 deletions
c_client/src/components/_base/Modal/Modal.jsx
View file @ 6f277d2c
import React, { useState } from 'react'
import Overlay from '../Overlay/Overlay'
import styles from './modal.module.less'
import classnames from 'classnames'
import {View,Text} from '@tarojs/components'
export default function Modal(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 @ 6f277d2c
......@@ -9,9 +9,10 @@
}
.scroll-item {
.flex-row-space();
.wh(100%,66px);
.wh(100%,70px);
background-color: #F7F0E6;
border: 1px solid #ECDBC0;
box-sizing: border-box;
}
.scroll-item__rank {
width: 33%;
......
c_client/src/components/_tb_comps/RotateWheel/RotateWheel.jsx
View file @ 6f277d2c
......@@ -29,8 +29,6 @@ const RotateWheel = props => {
const [prizelist, setPrizelist] = useState(prizeList);
/* 平分角度 */
const [angle, setAngle] = useState(oneTurn / divideNum);
/* my.createAniamation */
const [myAnimation, setMyAnimation] = useState();
/* 展示奖品列表 */
const [show, setShow] = useState(false);
/* 转动一圈时的角度值 */
......@@ -164,23 +162,6 @@ const RotateWheel = props => {
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 (
<View
className={styles["rotate"]}
......@@ -201,7 +182,6 @@ const RotateWheel = props => {
? `all ${ani.option.timeFunction} ${ani.option.duration}ms`
: ""
}}
// animation={myAnimation}
>
{show &&
prizelist.length &&
......
c_client/src/components/_tb_comps/RotateWheel/rotatewheel.md
View file @ 6f277d2c
**记事本打开**
**记事本打开((cmd + k) + v)**
##### 大转盘配置项入参
......
c_client/src/components/_tb_modal/JackpotModal/JackpotModal.jsx
View file @ 6f277d2c
......@@ -20,7 +20,11 @@ const JackpotModal = (props) => {
const prizeId = prizesData.id || prizesData._id
const type = prizesData.type
const result = await getReceive({ prizeId, type })
if (result) {
if(result && !result.isVip){
commonToast(result.message)
// TODO 非会员 积分领取 入会处理
} else {
commonToast(result.message)
}
} else {
......
c_client/src/const.js
View file @ 6f277d2c
......@@ -25,62 +25,7 @@ export const CLOUD_OBJ = {
'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 @ 6f277d2c
import { useCallback } from 'react'
import { checkIsMember } from 'tbcc-sdk-ts/lib/utils'
import tbccTs from 'tbcc-sdk-ts'
import { PRIZE_TYPE } from '@/const'
import { PRIZE_TYPE } from '@/config/myPrize.config'
const { getUserAddress } = tbccTs.tb
......@@ -15,14 +15,16 @@ const useReceive = (config) => {
if (!isVip) {
return {
message: '需加入会员才能领取成功哦',
state: 'error'
state: 'error',
isVip:isVip
}
}
const { success, data } = await receiveEnamePrize({ id })
if (success && data) {
return {
message: '领取成功',
state: 'success'
state: 'success',
isVip: true
}
}
}, [checkIsMember, receiveEnamePrize])
......@@ -33,7 +35,8 @@ const useReceive = (config) => {
if (success && data) {
return {
message: '领取成功',
state: '领取成功'
state: '领取成功',
isVip: true
}
}
}, [receiveEnamePrize])
......@@ -47,12 +50,15 @@ const useReceive = (config) => {
if (success && data) {
return {
message: '领取成功',
state: 'success'
state: 'success',
isVip: true
}
} else {
return {
message: errorMessage,
state: 'error'
state: 'error',
isVip: true
}
}
}, [receiveObjectPrize])
......@@ -66,7 +72,9 @@ const useReceive = (config) => {
if (!userAddress) {
return {
message: errorMessage,
state: 'error'
state: 'error',
isVip: true
}
}
const { name, telNumber, provinceName, cityName, cityCode, countyName, detailInfo, streetName } = userAddress || {}
......
c_client/src/mock.js
View file @ 6f277d2c
......@@ -87,7 +87,7 @@ export const TASK_DATA = [
export const RANK_LIST = [
{
rank: 1,
userNick: '用户昵称',
userNick: '用户昵称用户昵称用户昵称',
hotValue: 98882892
},
{
......@@ -119,6 +119,31 @@ export const RANK_LIST = [
rank: 7,
userNick: '用户昵称',
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
}
]
......@@ -345,3 +370,15 @@ export const prizeList = [
}
];
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 @ 6f277d2c
......@@ -11,23 +11,13 @@ 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'
import { useEffect } from 'react'
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 ScrollXView from '@/components/_tb_comps/ScrollXView/ScrollXView'
import SwiperView from '@/components/_tb_comps/SwiperView/SwiperView'
import RotateWheel from '@/components/_tb_comps/RotateWheel/RotateWheel'
import {prizeList} from '@/const'
const INDEX_CONFIG = {
bg: '', // 背景 cloud://C4015B7CEC23CF013A78247E2852524F//火箭待机小球抖动.json
ruleButton: '', // 规则按钮
......@@ -36,50 +26,6 @@ const INDEX_CONFIG = {
taskButton: '' // 任务按钮
}
const rotateConfig = {
bg: 'https://yun.duiba.com.cn/spark/assets/8b6e920ffd09fab8f9ac2de09f9154879f4d0607.png',
ratio: 0.65,
radius: 300,
circles: 4,
divideNum: 8,
duration: 5000,
timeFunction:'ease-in-out',
nodeInfo:{
width:100,
height:100
},
imgInfo:{width:80,height:80},
showWay:'negative',//positive/negative
isShowPrizeName:true,
prizeNameWidthRatio:1.2
}
const SCROLLXVIEW_CONFIG = {
prizeList: [],
containerWidth : 200,
containerHeight : 200,
imgWidth:120,
imgHeight:120,
isShowPrizeName:true,
prizeInCenterNum:3,
marginRight:26,
backgroundColor:'#E7E7EF',
backgroundImage:''
}
const swiper_config = {
easingFunction:`linear`,
circular:true,
autoplay:false,
vertical:false,
duration:1000,
interval:1500,
disableTouch:false,
swiperGroup:{width:300,height:300,overflow:''},
swiperContent:{width:250,height:300,backgroundColor:'#fff',backgroundImage:'',borderRadius:25},
imgContent:{width:200,height:200},
textContent:{width:240,height:60}
}
function Index() {
const app = getApp()
......@@ -91,6 +37,9 @@ function Index() {
const [ ruleModalVisible, setRuleModalVisible ] = useState(false)
const [ tasksModalVisible, setTasksModalVisible ] = useState(false)
const [updateFlag, setUpdateFlag] = useState(1)
const [prizeModalVisible,setPrizeModalVisible] = useState(false)
// 分享图
const SHARE_IMG = useRef('')
// 助力弹窗类型
......@@ -98,15 +47,9 @@ function Index() {
// 助力弹窗标识
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 { success, data } = await API.getActivityBaseInfoById()
......@@ -129,12 +72,12 @@ function Index() {
// })
},[])
// 授权登录完成
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()
......@@ -212,18 +155,22 @@ function Index() {
<View className={styles.bemember} onTap={() => setMemberVisible(true)}>入会</View>
{/* 奖品查看左右滑动 */}
{/* <ScrollXView {...SCROLLXVIEW_CONFIG} prizeList={prizeList} /> */}
<View className={styles['prize_modal_btn']} onTap={()=>setPrizeModalVisible(true)}>中奖弹窗</View>
{/* swiper左右滑动 */}
<View className='view' onTap={playCurrentAudio}>play audio</View>
{/* <SwiperView swiperList={prizeList} /> */}
{/* 大转盘 */}
{/* <RotateWheel {...rotateConfig} callback={()=>{}} /> */}
{/* 中奖弹窗 */}
{
prizeModalVisible &&
<JackpotModal
closePostion='bottom'
bg=''
width='500'
height='500'
top='45%'
onClose={() => setPrizeModalVisible(false)}
/>
}
{
tasksModalVisible &&
......
c_client/src/pages/preComp/preComp.jsx
View file @ 6f277d2c
......@@ -4,7 +4,7 @@ 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 } from '@/mock'
import { prizeList, BARRAGE_LIST } from '@/mock'
import styles from './preComp.module.less'
......@@ -24,6 +24,15 @@ import RankTitle from '@/components/_tb_comps/Rank/RankTitle/RankTitle'
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 { VerticalBarrage } from '@/components/_tb_comps/Barrage'
const rotateConfig = {
bg: 'https://yun.duiba.com.cn/spark/assets/8b6e920ffd09fab8f9ac2de09f9154879f4d0607.png',
......@@ -70,6 +79,14 @@ const swiper_config = {
textContent:{width:300,height:60}
}
export default function PreComp(props) {
/* 背景音乐 */
const {playAudio,musicUrl,setOpenStatus,openStatus} = useAudio(BGMUSIC_URL.MUSIC,true)
const playCurrentAudio = () => {
setOpenStatus(!openStatus)
}
return(
<ContainerFit hasFitPsd={true}>
<View className={styles['scroll-view']}>
......@@ -83,6 +100,24 @@ export default function PreComp(props) {
{/* 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>
)
}
\ 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