Skip to content

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

优化组件预览

parent 1de3ec8c
Show whitespace changes
Inline Side-by-side
Showing with 212 additions and 49 deletions
README.md
View file @ 1a0859f6
...@@ -28,6 +28,14 @@ taobao-mini-template ...@@ -28,6 +28,14 @@ taobao-mini-template
│ ├─ app.less │ ├─ app.less
│ ├─ components │ ├─ components
│ │ ├─ _base │ │ ├─ _base
│ │ │ ├─ ContainerFit
│ │ │ │ ├─ ContainerFit.jsx
│ │ │ │ ├─ ContainerFit.md
│ │ │ │ └─ ContainerFit.module.less
│ │ │ ├─ ContainerScroll
│ │ │ │ ├─ ContainerScroll.jsx
│ │ │ │ ├─ ContainerScroll.md
│ │ │ │ └─ ContainerScroll.module.less
│ │ │ ├─ Modal │ │ │ ├─ Modal
│ │ │ │ ├─ Modal.config.js │ │ │ │ ├─ Modal.config.js
│ │ │ │ ├─ Modal.jsx │ │ │ │ ├─ Modal.jsx
...@@ -39,54 +47,96 @@ taobao-mini-template ...@@ -39,54 +47,96 @@ taobao-mini-template
│ │ │ ├─ Popup.jsx │ │ │ ├─ Popup.jsx
│ │ │ └─ Popup.module.less │ │ │ └─ Popup.module.less
│ │ ├─ _miniprogram │ │ ├─ _miniprogram
│ │ │ ├─ game │ │ │ ├─ canvasComp
│ │ │ │ ├─ game.acss │ │ │ │ ├─ canvasComp.acss
│ │ │ │ ├─ game.axml │ │ │ │ ├─ canvasComp.axml
│ │ │ │ ├─ game.js │ │ │ │ ├─ canvasComp.js
│ │ │ │ ├─ game.json │ │ │ │ ├─ canvasComp.json
│ │ │ │ ├─ output.js │ │ │ │ ├─ output.js
│ │ │ │ └─ utils.js │ │ │ │ └─ utils.js
│ │ │ ├─ comBlank
│ │ │ │ ├─ comBlank.acss
│ │ │ │ ├─ comBlank.axml
│ │ │ │ ├─ comBlank.js
│ │ │ │ └─ comBlank.json
│ │ │ ├─ lottieAnimation │ │ │ ├─ lottieAnimation
│ │ │ │ ├─ lottieAnimation.acss │ │ │ │ ├─ lottieAnimation.acss
│ │ │ │ ├─ lottieAnimation.axml │ │ │ │ ├─ lottieAnimation.axml
│ │ │ │ ├─ lottieAnimation.js │ │ │ │ ├─ lottieAnimation.js
│ │ │ │ └─ lottieAnimation.json │ │ │ │ └─ lottieAnimation.json
│ │ │ ├─ lottieBlank
│ │ │ │ ├─ lottieBlank.acss
│ │ │ │ ├─ lottieBlank.axml
│ │ │ │ ├─ lottieBlank.js
│ │ │ │ └─ lottieBlank.json
│ │ │ └─ memberModal │ │ │ └─ memberModal
│ │ │ ├─ memberModal.acss │ │ │ ├─ memberModal.acss
│ │ │ ├─ memberModal.axml │ │ │ ├─ memberModal.axml
│ │ │ ├─ memberModal.js │ │ │ ├─ memberModal.js
│ │ │ └─ memberModal.json │ │ │ └─ memberModal.json
│ │ ├─ _tb_comps │ │ ├─ _tb_comps
│ │ │ ├─ Barrage
│ │ │ │ ├─ Barrage.md
│ │ │ │ ├─ HorizontalBarrage
│ │ │ │ │ ├─ Barrage.jsx
│ │ │ │ │ └─ Barrage.module.less
│ │ │ │ ├─ VerticalBarrage
│ │ │ │ │ ├─ VerticalBarrage.jsx
│ │ │ │ │ └─ VerticalBarrage.module.less
│ │ │ │ └─ index.js
│ │ │ ├─ BrowserLoading
│ │ │ │ ├─ BrowserLoading.jsx
│ │ │ │ ├─ BrowserLoading.module.less
│ │ │ │ └─ Browseroading.md
│ │ │ ├─ CountDown │ │ │ ├─ CountDown
│ │ │ │ ├─ CountDown.jsx │ │ │ │ ├─ CountDown.jsx
│ │ │ │ └─ CountDown.less │ │ │ │ ├─ CountDown.less
│ │ │ │ ├─ CountDown.md
│ │ │ │ └─ index.js
│ │ │ ├─ GoodsList │ │ │ ├─ GoodsList
│ │ │ │ ├─ GoodsList.jsx │ │ │ │ ├─ GoodsList.jsx
│ │ │ │ └─ GoodsList.module.less │ │ │ │ └─ GoodsList.module.less
│ │ │ ├─ GoodsTitle
│ │ │ │ ├─ GoodsTitle.jsx
│ │ │ │ └─ GoodsTitle.module.less
│ │ │ ├─ Input │ │ │ ├─ Input
│ │ │ ├─ LoadingBar
│ │ │ │ ├─ LoadingBar.jsx
│ │ │ │ └─ LoadingBar.module.less
│ │ │ ├─ Progress │ │ │ ├─ Progress
│ │ │ │ ├─ Progress.jsx │ │ │ │ ├─ Progress.jsx
│ │ │ │ └─ Progress.module.less │ │ │ │ └─ Progress.module.less
│ │ │ ├─ RankList │ │ │ ├─ Rank
│ │ │ │ ├─ RankList.jsx │ │ │ │ ├─ README.md
│ │ │ │ └─ RankList.module.less │ │ │ │ ├─ RankList
│ │ │ ├─ RankTitle │ │ │ │ │ ├─ RankList.jsx
│ │ │ │ ├─ RankTitle.jsx │ │ │ │ │ └─ RankList.module.less
│ │ │ │ └─ RankTitle.module.less │ │ │ │ ├─ RankTitle
│ │ │ │ │ ├─ RankTitle.jsx
│ │ │ │ │ └─ RankTitle.module.less
│ │ │ │ ├─ demo
│ │ │ │ │ └─ index.jsx
│ │ │ │ └─ index.js
│ │ │ ├─ RotateWheel
│ │ │ │ ├─ RotateWheel.jsx
│ │ │ │ ├─ RotateWheel.module.less
│ │ │ │ ├─ rotatewheel.drawio
│ │ │ │ └─ rotatewheel.md
│ │ │ ├─ ScrollXView │ │ │ ├─ ScrollXView
│ │ │ │ ├─ ScrollXView.jsx │ │ │ │ ├─ ScrollXView.jsx
│ │ │ │ ├─ ScrollXView.md
│ │ │ │ └─ ScrollXView.module.less │ │ │ │ └─ ScrollXView.module.less
│ │ │ └─ Swiper │ │ │ ├─ SwiperView
│ │ │ ├─ Swiper.jsx │ │ │ │ ├─ SwiperView.jsx
│ │ │ └─ Swiper.module.less │ │ │ │ ├─ SwiperView.less
│ │ │ │ └─ SwiperView.md
│ │ │ ├─ TitleImg
│ │ │ │ ├─ TitleImg.jsx
│ │ │ │ └─ TitleImg.module.less
│ │ │ └─ _Progress
│ │ │ ├─ ProgressContext
│ │ │ │ └─ index.jsx
│ │ │ ├─ ProgressNode
│ │ │ │ ├─ index.jsx
│ │ │ │ └─ index.module.less
│ │ │ ├─ README.md
│ │ │ ├─ demo
│ │ │ │ ├─ index.jsx
│ │ │ │ └─ index.module.less
│ │ │ ├─ index.jsx
│ │ │ └─ index.module.less
│ │ ├─ _tb_custom │ │ ├─ _tb_custom
│ │ │ └─ Test │ │ │ └─ Test
│ │ │ ├─ Test.jsx │ │ │ ├─ Test.jsx
...@@ -98,9 +148,11 @@ taobao-mini-template ...@@ -98,9 +148,11 @@ taobao-mini-template
│ │ ├─ DoHelpModal │ │ ├─ DoHelpModal
│ │ │ ├─ DoHelpModal.jsx │ │ │ ├─ DoHelpModal.jsx
│ │ │ └─ DoHelpModal.module.less │ │ │ └─ DoHelpModal.module.less
│ │ ├─ PrizeModal │ │ ├─ JackpotModal
│ │ │ ├─ PrizeModal.jsx │ │ │ ├─ JackpotModal.jsx
│ │ │ └─ PrizeModal.module.less │ │ │ ├─ JackpotModal.less
│ │ │ ├─ JackpotModal.md
│ │ │ └─ index.js
│ │ ├─ RuleModal │ │ ├─ RuleModal
│ │ │ ├─ RuleModal.jsx │ │ │ ├─ RuleModal.jsx
│ │ │ └─ RuleModal.module.less │ │ │ └─ RuleModal.module.less
...@@ -111,12 +163,24 @@ taobao-mini-template ...@@ -111,12 +163,24 @@ taobao-mini-template
│ │ └─ ThanksModal │ │ └─ ThanksModal
│ │ ├─ ThanksModal.jsx │ │ ├─ ThanksModal.jsx
│ │ └─ ThanksModal.module.less │ │ └─ ThanksModal.module.less
│ ├─ config.js │ ├─ config
│ │ ├─ browse.config.js
│ │ ├─ cart.config.js
│ │ ├─ collect.config.js
│ │ ├─ config.js
│ │ ├─ help.config.js
│ │ ├─ index.js
│ │ ├─ myPrize.config.js
│ │ ├─ order.config.js
│ │ └─ task.config.js
│ ├─ const.js │ ├─ const.js
│ ├─ hooks │ ├─ hooks
│ │ ├─ useAudio.js
│ │ ├─ useAudio.md
│ │ ├─ useAuth.js │ │ ├─ useAuth.js
│ │ ├─ useDebounce.js │ │ ├─ useDebounce.js
│ │ ├─ useLogin.js │ │ ├─ useLogin.js
│ │ ├─ useReceive.js
│ │ ├─ useRequest.js │ │ ├─ useRequest.js
│ │ ├─ useTasks.js │ │ ├─ useTasks.js
│ │ └─ useThrottle.js │ │ └─ useThrottle.js
...@@ -130,6 +194,10 @@ taobao-mini-template ...@@ -130,6 +194,10 @@ taobao-mini-template
│ │ │ ├─ index.config.js │ │ │ ├─ index.config.js
│ │ │ ├─ index.jsx │ │ │ ├─ index.jsx
│ │ │ └─ index.module.less │ │ │ └─ index.module.less
│ │ ├─ packageComs
│ │ │ └─ comsTest
│ │ │ ├─ comsTest.jsx
│ │ │ └─ comsTest.module.less
│ │ ├─ packageGame │ │ ├─ packageGame
│ │ │ └─ game │ │ │ └─ game
│ │ │ ├─ game.config.js │ │ │ ├─ game.config.js
...@@ -160,9 +228,26 @@ taobao-mini-template ...@@ -160,9 +228,26 @@ taobao-mini-template
│ ├─ store │ ├─ store
│ │ ├─ activityInfo.js │ │ ├─ activityInfo.js
│ │ ├─ index.js │ │ ├─ index.js
│ │ └─ loginInfo.js │ │ ├─ loginInfo.js
│ │ └─ userInfo.js
│ ├─ styles │ ├─ styles
│ │ ├─ animate.less
│ │ ├─ border.less
│ │ ├─ flex.less
│ │ ├─ form.less
│ │ ├─ gap.less
│ │ ├─ image.less
│ │ ├─ index.less
│ │ ├─ layout.less
│ │ ├─ others.less
│ │ ├─ page.less
│ │ ├─ position.less
│ │ ├─ text.less
│ │ ├─ utils.less
│ │ └─ var.less
│ ├─ taro-ui.scss
│ └─ utils │ └─ utils
│ ├─ audio.js
│ ├─ date.js │ ├─ date.js
│ ├─ mdProxy.js │ ├─ mdProxy.js
│ └─ util.js │ └─ util.js
......
c_client/src/app.config.js
View file @ 1a0859f6
export default { export default {
pages: [ pages: [
'pages/index/index', 'pages/index/index'
'pages/packageComs/comsTest/comsTest'
], ],
subPackages: [ subPackages: [
{ {
......
c_client/src/components/_tb_comps/Barrage/VerticalBarrage/VerticalBarrage.jsx
View file @ 1a0859f6
import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react' import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react'
import { View } from '@tarojs/components' import { View, Image } from '@tarojs/components'
import Taro, { useReady } from '@tarojs/taro' import Taro, { useReady } from '@tarojs/taro'
import styles from './VerticalBarrage.module.less' import styles from './VerticalBarrage.module.less'
...@@ -75,7 +75,10 @@ const VerticalBarrage = (props) => { ...@@ -75,7 +75,10 @@ const VerticalBarrage = (props) => {
{ {
barrageList.map((item, i) => ( barrageList.map((item, i) => (
<View key={`barrage-${i}`} id={`barrage_${i}`} className={barrageStyle(i)}> <View key={`barrage-${i}`} id={`barrage_${i}`} className={barrageStyle(i)}>
<View className={styles.text}>{item}</View> <View className={styles.itm}>
<Image src={item.avatar} className={styles.icon} />
<View className={styles.text}>{item.userNick}</View>
</View>
</View> </View>
)) ))
} }
......
c_client/src/components/_tb_comps/Barrage/VerticalBarrage/VerticalBarrage.module.less
View file @ 1a0859f6
.barrage-container { .barrage-container {
border: 1px solid red; // border: 1px solid red;
overflow: hidden; overflow: hidden;
} }
.barrage-box { .barrage-box {
z-index: 1; z-index: 1;
.itm {
display: flex;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 60px;
padding: 10px;
margin-top: 15px;
}
.icon {
width: 60px;
height: 60px;
border-radius: 50%;
}
.text { .text {
padding: 10px 0; padding: 10px 0;
color: #fff;
margin-left: 10px;
} }
} }
......
c_client/src/const.js
View file @ 1a0859f6
...@@ -24,9 +24,6 @@ export const CLOUD_OBJ = { ...@@ -24,9 +24,6 @@ export const CLOUD_OBJ = {
'2':'cloud://93FBC274B6B43CE37B0A70DF8C1AFA52/答题-音效.mp3', '2':'cloud://93FBC274B6B43CE37B0A70DF8C1AFA52/答题-音效.mp3',
'3':'cloud://B8F0BA22BBA74F8FEA261E1CC9D55355/欢呼声.mp3' '3':'cloud://B8F0BA22BBA74F8FEA261E1CC9D55355/欢呼声.mp3'
} }
/* /*
浏览页倒计时标识 浏览页倒计时标识
DEFAULT: 默认为空，不展示 DEFAULT: 默认为空，不展示
......
c_client/src/mock.js
View file @ 1a0859f6
...@@ -372,13 +372,46 @@ export const prizeList = [ ...@@ -372,13 +372,46 @@ export const prizeList = [
]; ];
export const BARRAGE_LIST = [ export const BARRAGE_LIST = [
'111', {
'222', avatar: '//yun.dui88.com/73953e47-55d4-4739-9618-1d1173b6430f.png',
'333', userNick: '用户昵称',
'444', },
'555', {
'666', avatar: '//yun.dui88.com/73953e47-55d4-4739-9618-1d1173b6430f.png',
'777', userNick: '用户昵称',
'888', },
'999' {
avatar: '//yun.dui88.com/73953e47-55d4-4739-9618-1d1173b6430f.png',
userNick: '用户昵称',
},
{
avatar: '//yun.dui88.com/73953e47-55d4-4739-9618-1d1173b6430f.png',
userNick: '用户昵称',
},
{
avatar: '//yun.dui88.com/73953e47-55d4-4739-9618-1d1173b6430f.png',
userNick: '用户昵称',
},
{
avatar: '//yun.dui88.com/73953e47-55d4-4739-9618-1d1173b6430f.png',
userNick: '用户昵称',
}
]
export const levelList = [
{
levelValue: 5
},
{
levelValue: 15
},
{
levelValue: 25
},
{
levelValue: 45
},
{
levelValue: 65
}
] ]
\ No newline at end of file
c_client/src/pages/packageComs/comsTest/comsTest.jsx
View file @ 1a0859f6
...@@ -4,8 +4,10 @@ import { useDidShow, useRouter, useDidHide, getApp } from '@tarojs/taro' ...@@ -4,8 +4,10 @@ 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, BARRAGE_LIST } from '@/mock' import { prizeList, BARRAGE_LIST, levelList } from '@/mock'
import { dateFormatter } from 'tbcc-sdk-ts/lib/utils/index' import { dateFormatter } from 'tbcc-sdk-ts/lib/utils/index'
import { navigateTo } from 'tbcc-sdk-ts/lib/core/tb'
import styles from './comsTest.module.less' import styles from './comsTest.module.less'
...@@ -125,7 +127,7 @@ export default function ComsTest(props) { ...@@ -125,7 +127,7 @@ export default function ComsTest(props) {
</View> </View>
<View className={styles['comp-view']}> <View className={styles['comp-view']}>
<View className={styles['comp-title']}>进度条</View> <View className={styles['comp-title']}>进度条</View>
<Demo /> <Demo levelList={levelList} />
</View> </View>
<View className={styles['comp-view']}> <View className={styles['comp-view']}>
<View className={styles['comp-title']}>排行榜</View> <View className={styles['comp-title']}>排行榜</View>
...@@ -140,7 +142,7 @@ export default function ComsTest(props) { ...@@ -140,7 +142,7 @@ export default function ComsTest(props) {
<View className={styles['comp-title']}>音频hooks</View> <View className={styles['comp-title']}>音频hooks</View>
<View className={styles['view']} onTap={playCurrentAudio}>play audio</View> <View className={styles['view']} onTap={playCurrentAudio}>play audio</View>
</View> </View>
<View className={styles['comp-view']} style={{ marginBottom: '0.5rem'}}> <View className={styles['comp-view']} style={{ marginBottom: '0.5rem', width: '4rem'}}>
<View className={styles['comp-title']}>竖向弹幕</View> <View className={styles['comp-title']}>竖向弹幕</View>
<VerticalBarrage dataList={BARRAGE_LIST} /> <VerticalBarrage dataList={BARRAGE_LIST} />
</View> </View>
...@@ -148,6 +150,14 @@ export default function ComsTest(props) { ...@@ -148,6 +150,14 @@ export default function ComsTest(props) {
<View onClick={() => containerRef.current?.scrollFixTop(600)} className={styles['btn-one']}>滚动指定位置</View> <View onClick={() => containerRef.current?.scrollFixTop(600)} className={styles['btn-one']}>滚动指定位置</View>
<View onClick={() => setPrizeModalVisible(true)} className={styles['btn-two']}>中奖弹窗</View> <View onClick={() => setPrizeModalVisible(true)} className={styles['btn-two']}>中奖弹窗</View>
<View onClick={() => navigateTo('/pages/packageGood/browseGoods/browseGoods?itemIds=617724147979,617724563528,617300295119')} className={styles['btn-three']}>浏览商品</View>
<View onClick={() => navigateTo('/pages/packageGood/collectGoods/collectGoods?itemIds=617724147979,617724563528,617300295119')} className={styles['btn-four']}>收藏商品</View>
<View onClick={() => navigateTo('/pages/packageGood/orderGoods/orderGoods?itemIds=617724147979,617724563528,617300295119')} className={styles['btn-five']}>下单商品</View>
<View onClick={() => navigateTo('/pages/packageGood/cartGoods/cartGoods?itemIds=617724147979,617724563528,617300295119')} className={styles['btn-six']}>加购商品</View>
</ContainerScroll> </ContainerScroll>
{ prizeModalVisible && <JackpotModal prizeItem={prizeItem} onClose={() => setPrizeModalVisible(false)} />} { prizeModalVisible && <JackpotModal prizeItem={prizeItem} onClose={() => setPrizeModalVisible(false)} />}
</> </>
......
c_client/src/pages/packageComs/comsTest/comsTest.module.less
View file @ 1a0859f6
...@@ -12,13 +12,15 @@ ...@@ -12,13 +12,15 @@
.pre-btn() { .pre-btn() {
width: 160px; width: 160px;
height: 40px; height: 40px;
border: 1px solid #000;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 22px; font-size: 22px;
position: absolute; position: absolute;
right: 0; right: 0;
background-color: antiquewhite;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
} }
.btn-one { .btn-one {
.pre-btn(); .pre-btn();
...@@ -28,3 +30,19 @@ ...@@ -28,3 +30,19 @@
.pre-btn(); .pre-btn();
top: 260px; top: 260px;
} }
.btn-three {
.pre-btn();
top: 320px;
}
.btn-four {
.pre-btn();
top: 380px;
}
.btn-five {
.pre-btn();
top: 440px;
}
.btn-six {
.pre-btn();
top: 500px;
}
\ 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