Skip to content

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

优化组件预览

parent 1de3ec8c
Hide 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
│ ├─ app.less
│ ├─ components
│ │ ├─ _base
│ │ │ ├─ ContainerFit
│ │ │ │ ├─ ContainerFit.jsx
│ │ │ │ ├─ ContainerFit.md
│ │ │ │ └─ ContainerFit.module.less
│ │ │ ├─ ContainerScroll
│ │ │ │ ├─ ContainerScroll.jsx
│ │ │ │ ├─ ContainerScroll.md
│ │ │ │ └─ ContainerScroll.module.less
│ │ │ ├─ Modal
│ │ │ │ ├─ Modal.config.js
│ │ │ │ ├─ Modal.jsx
......@@ -39,54 +47,96 @@ taobao-mini-template
│ │ │ ├─ Popup.jsx
│ │ │ └─ Popup.module.less
│ │ ├─ _miniprogram
│ │ │ ├─ game
│ │ │ │ ├─ game.acss
│ │ │ │ ├─ game.axml
│ │ │ │ ├─ game.js
│ │ │ │ ├─ game.json
│ │ │ ├─ canvasComp
│ │ │ │ ├─ canvasComp.acss
│ │ │ │ ├─ canvasComp.axml
│ │ │ │ ├─ canvasComp.js
│ │ │ │ ├─ canvasComp.json
│ │ │ │ ├─ output.js
│ │ │ │ └─ utils.js
│ │ │ ├─ comBlank
│ │ │ │ ├─ comBlank.acss
│ │ │ │ ├─ comBlank.axml
│ │ │ │ ├─ comBlank.js
│ │ │ │ └─ comBlank.json
│ │ │ ├─ lottieAnimation
│ │ │ │ ├─ lottieAnimation.acss
│ │ │ │ ├─ lottieAnimation.axml
│ │ │ │ ├─ lottieAnimation.js
│ │ │ │ └─ lottieAnimation.json
│ │ │ ├─ lottieBlank
│ │ │ │ ├─ lottieBlank.acss
│ │ │ │ ├─ lottieBlank.axml
│ │ │ │ ├─ lottieBlank.js
│ │ │ │ └─ lottieBlank.json
│ │ │ └─ memberModal
│ │ │ ├─ memberModal.acss
│ │ │ ├─ memberModal.axml
│ │ │ ├─ memberModal.js
│ │ │ └─ memberModal.json
│ │ ├─ _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.jsx
│ │ │ │ └─ CountDown.less
│ │ │ │ ├─ CountDown.less
│ │ │ │ ├─ CountDown.md
│ │ │ │ └─ index.js
│ │ │ ├─ GoodsList
│ │ │ │ ├─ GoodsList.jsx
│ │ │ │ └─ GoodsList.module.less
│ │ │ ├─ GoodsTitle
│ │ │ │ ├─ GoodsTitle.jsx
│ │ │ │ └─ GoodsTitle.module.less
│ │ │ ├─ Input
│ │ │ ├─ LoadingBar
│ │ │ │ ├─ LoadingBar.jsx
│ │ │ │ └─ LoadingBar.module.less
│ │ │ ├─ Progress
│ │ │ │ ├─ Progress.jsx
│ │ │ │ └─ Progress.module.less
│ │ │ ├─ RankList
│ │ │ │ ├─ RankList.jsx
│ │ │ │ └─ RankList.module.less
│ │ │ ├─ RankTitle
│ │ │ │ ├─ RankTitle.jsx
│ │ │ │ └─ RankTitle.module.less
│ │ │ ├─ Rank
│ │ │ │ ├─ README.md
│ │ │ │ ├─ RankList
│ │ │ │ │ ├─ RankList.jsx
│ │ │ │ │ └─ RankList.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.jsx
│ │ │ │ ├─ ScrollXView.md
│ │ │ │ └─ ScrollXView.module.less
│ │ │ └─ Swiper
│ │ │ ├─ Swiper.jsx
│ │ │ └─ Swiper.module.less
│ │ │ ├─ SwiperView
│ │ │ │ ├─ SwiperView.jsx
│ │ │ │ ├─ 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
│ │ │ └─ Test
│ │ │ ├─ Test.jsx
......@@ -98,9 +148,11 @@ taobao-mini-template
│ │ ├─ DoHelpModal
│ │ │ ├─ DoHelpModal.jsx
│ │ │ └─ DoHelpModal.module.less
│ │ ├─ PrizeModal
│ │ │ ├─ PrizeModal.jsx
│ │ │ └─ PrizeModal.module.less
│ │ ├─ JackpotModal
│ │ │ ├─ JackpotModal.jsx
│ │ │ ├─ JackpotModal.less
│ │ │ ├─ JackpotModal.md
│ │ │ └─ index.js
│ │ ├─ RuleModal
│ │ │ ├─ RuleModal.jsx
│ │ │ └─ RuleModal.module.less
......@@ -111,12 +163,24 @@ taobao-mini-template
│ │ └─ ThanksModal
│ │ ├─ ThanksModal.jsx
│ │ └─ 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
│ ├─ hooks
│ │ ├─ useAudio.js
│ │ ├─ useAudio.md
│ │ ├─ useAuth.js
│ │ ├─ useDebounce.js
│ │ ├─ useLogin.js
│ │ ├─ useReceive.js
│ │ ├─ useRequest.js
│ │ ├─ useTasks.js
│ │ └─ useThrottle.js
......@@ -130,6 +194,10 @@ taobao-mini-template
│ │ │ ├─ index.config.js
│ │ │ ├─ index.jsx
│ │ │ └─ index.module.less
│ │ ├─ packageComs
│ │ │ └─ comsTest
│ │ │ ├─ comsTest.jsx
│ │ │ └─ comsTest.module.less
│ │ ├─ packageGame
│ │ │ └─ game
│ │ │ ├─ game.config.js
......@@ -160,9 +228,26 @@ taobao-mini-template
│ ├─ store
│ │ ├─ activityInfo.js
│ │ ├─ index.js
│ │ └─ loginInfo.js
│ │ ├─ loginInfo.js
│ │ └─ userInfo.js
│ ├─ 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
│ ├─ audio.js
│ ├─ date.js
│ ├─ mdProxy.js
│ └─ util.js
......
c_client/src/app.config.js
View file @ 1a0859f6
export default {
pages: [
'pages/index/index',
'pages/packageComs/comsTest/comsTest'
'pages/index/index'
],
subPackages: [
{
......
c_client/src/components/_tb_comps/Barrage/VerticalBarrage/VerticalBarrage.jsx
View file @ 1a0859f6
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 styles from './VerticalBarrage.module.less'
......@@ -75,7 +75,10 @@ const VerticalBarrage = (props) => {
{
barrageList.map((item, 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>
))
}
......
c_client/src/components/_tb_comps/Barrage/VerticalBarrage/VerticalBarrage.module.less
View file @ 1a0859f6
.barrage-container {
border: 1px solid red;
// border: 1px solid red;
overflow: hidden;
}
.barrage-box {
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 {
padding: 10px 0;
color: #fff;
margin-left: 10px;
}
}
......
c_client/src/const.js
View file @ 1a0859f6
......@@ -24,9 +24,6 @@ export const CLOUD_OBJ = {
'2':'cloud://93FBC274B6B43CE37B0A70DF8C1AFA52/答题-音效.mp3',
'3':'cloud://B8F0BA22BBA74F8FEA261E1CC9D55355/欢呼声.mp3'
}
/*
浏览页倒计时标识
DEFAULT: 默认为空，不展示
......
c_client/src/mock.js
View file @ 1a0859f6
......@@ -372,13 +372,46 @@ export const prizeList = [
];
export const BARRAGE_LIST = [
'111',
'222',
'333',
'444',
'555',
'666',
'777',
'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: '用户昵称',
},
{
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'
import API from '@/api'
import { useLogin, useLoginFromShare } from '@/hooks/useLogin'
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 { navigateTo } from 'tbcc-sdk-ts/lib/core/tb'
import styles from './comsTest.module.less'
......@@ -125,7 +127,7 @@ export default function ComsTest(props) {
</View>
<View className={styles['comp-view']}>
<View className={styles['comp-title']}>进度条</View>
<Demo />
<Demo levelList={levelList} />
</View>
<View className={styles['comp-view']}>
<View className={styles['comp-title']}>排行榜</View>
......@@ -140,7 +142,7 @@ export default function ComsTest(props) {
<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-view']} style={{ marginBottom: '0.5rem', width: '4rem'}}>
<View className={styles['comp-title']}>竖向弹幕</View>
<VerticalBarrage dataList={BARRAGE_LIST} />
</View>
......@@ -148,6 +150,14 @@ export default function ComsTest(props) {
<View onClick={() => containerRef.current?.scrollFixTop(600)} className={styles['btn-one']}>滚动指定位置</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>
{ prizeModalVisible && <JackpotModal prizeItem={prizeItem} onClose={() => setPrizeModalVisible(false)} />}
</>
......
c_client/src/pages/packageComs/comsTest/comsTest.module.less
View file @ 1a0859f6
......@@ -12,13 +12,15 @@
.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;
background-color: antiquewhite;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.btn-one {
.pre-btn();
......@@ -27,4 +29,20 @@
.btn-two {
.pre-btn();
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