Skip to content

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

browse,loadbar

parent ee648016
Show whitespace changes
Inline Side-by-side
Showing with 147 additions and 43 deletions
c_client/src/components/_tb_comps/BrowserLoading/BrowserLoading.jsx 0 → 100644
View file @ 6ea21b4f
import React, { useState, useEffect } from "react";
import { View, Image, Text } from "@tarojs/components";
import LoadingBar,{LOAD_TYPE} from "../LoadingBar/LoadingBar";
import styles from './BrowserLoading.module.less'
import {LOAD_OBJ} from '@/pages/packageGood/browseGoods/browseGoods'
const BrowserLoading = (props) => {
const {loadFlag,count} = props;
return (
<View className={styles["browse_loading"]}>
{loadFlag == LOAD_OBJ.NUMBER && (
<>
<View className={styles["count_img"]}>
<View className={styles["count_time"]}>{count}s</View>
</View>
</>
)}
{loadFlag == LOAD_OBJ.PICTURE && <LoadingBar type={LOAD_TYPE.TASK} />}
</View>
);
};
export default BrowserLoading;
c_client/src/components/_tb_comps/BrowserLoading/BrowserLoading.module.less 0 → 100644
View file @ 6ea21b4f
.browse_loading {
width: 200px;
height: 200px;
position: fixed;
right: 20px;
top: 400px;
border: 1px solid cyan;
box-sizing: border-box;
}
.count_img {
width: 100%;
height: 100%;
border: 1px solid rgb(47, 131, 99);
box-sizing: border-box;
background-image: url("//yun.dui88.com/7f705da9-5f16-4cf1-a239-3903c5c23995.png");
.image-property(contain, center center);
}
.count_time {
width: 100px;
height: 60px;
line-height: 60px;
margin: 40px auto 0;
border: 1px solid cyan;
box-sizing: border-box;
font-size: 40px;
font-weight: 600;
color: #000;
text-align: center;
}
c_client/src/components/_tb_comps/GoodsList/GoodsList.jsx
View file @ 6ea21b4f
......@@ -4,7 +4,9 @@ import classnames from 'classnames'
import tbccTs from 'tbcc-sdk-ts'
const { openDetail } = tbccTs.tb
import styles from './GoodsList.module.less'
import LoadingBar from '../LoadingBar/LoadingBar'
import BrowserLoading from '../BrowserLoading/BrowserLoading'
import {LOAD_OBJ} from '@/pages/packageGood/browseGoods/browseGoods'
function GoodsList(props) {
const {
......@@ -18,7 +20,7 @@ function GoodsList(props) {
img: '//yun.dui88.com/taobaomini/clientCTest/goods_img@2x.png'
},
color: '#181818',
loadFlag:"DEFAULT"
loadFlag:LOAD_OBJ.DEFAULT
},
onOpenDetail,
onCompleteTask,
......@@ -74,22 +76,7 @@ function GoodsList(props) {
}
{
task.loadFlag &&
<View className={styles['browse_loading']} >
{
task.loadFlag == 'NUMBER' &&
<>
<View className={styles['count_img']} >
<View className={styles['count_time']} >
{count}s
</View>
</View>
</>
}
{
task.loadFlag == 'PICTURE' &&
<LoadingBar />
}
</View>
<BrowserLoading loadFlag={task.loadFlag} count={count} />
}
</View>
</ScrollView>
......
c_client/src/components/_tb_comps/LoadingBar/LoadingBar.jsx
View file @ 6ea21b4f
import React,{useState, useEffect} from 'react'
import {View,Image,Text} from '@tarojs/components'
import styles from './LoadingBar.module.less'
export const LOAD_TYPE = {
'TASK':"TASK",
'NORMAL':"NORMAL"
}
const LoadingBar = (props) => {
const {
bg='https://yun.duiba.com.cn/spark/assets/5a725b9e4ebf436a0a92c6317a5a4e47d87c8c1f.png',
bgTop='https://yun.duiba.com.cn/spark/assets/ccc405e28a5140d3aff9dff27b97fa5fb6bd7ff5.png'
bgTop='https://yun.duiba.com.cn/spark/assets/ccc405e28a5140d3aff9dff27b97fa5fb6bd7ff5.png',
type='',
total=0,
current=0
} = props;
const [percent,setPercent] = useState(0);
useEffect(()=>{
showCurrentLoading();
},[])
/**
* @description 显示当前进度(进度条上没有其他内容)
*/
const showCurrentLoading = () => {
if(type == LOAD_TYPE.NORMAL){
let cur = current >= total ? toal : current;
setPercent((cur / total * 100).toFixed(1))
}
}
return(
<View className={styles['load_container']} >
<View className={styles['load_content']} >
<View className={styles['load_bg']} style={{backgroundImage:`url(${bg})`}} ></View>
<View className={styles['load_top']} style={{backgroundImage:`url(${bgTop})`}} ></View>
<View
className={`${styles['load_top']} ${type == LOAD_TYPE.TASK && 'loadAni'}`}
style={{
backgroundImage:`url(${bgTop})`,
clipPath:`${type==LOAD_TYPE.NORMAL && `inset(0% 0% 0% ${percent}%)`}`
}}
></View>
</View>
</View>
)
......
c_client/src/components/_tb_comps/LoadingBar/LoadingBar.module.less
View file @ 6ea21b4f
......@@ -14,7 +14,7 @@
background-size: cover;
background-repeat: no-repeat;
}
.load_top{
.loadAni{
animation: move 15s linear forwards;
}
}
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.jsx
View file @ 6ea21b4f
......@@ -2,9 +2,7 @@ import React, { useState, useEffect } from "react";
import { View, Image, Text, Swiper, SwiperItem } from "@tarojs/components";
import './SwiperView.less'
import tbcc from 'tbcc-sdk-ts'
const {navigateTo,commonToast,redirectTo,navigateBack} = tbcc.tb
import Taro,{showToast,redirectTo,navigateTo} from '@tarojs/taro'
export const EASING_WAYS = {
'DEFAULT':'default',
'LINEAR':'linear',
......@@ -19,14 +17,14 @@ const SwiperView = (props) => {
*/
const {
swiperList=[],
isSpecial=false,
isSpecial=true,
easingFunction=`${EASING_WAYS.LINEAR}`,
circular=true,
autoplay=true,
autoplay=false,
vertical=false,
duration=1000,
interval=1500,
disableTouch=true
disableTouch=false
} = props;
const [currentIndex, setCurrentIndex] = useState(0);
......@@ -52,7 +50,9 @@ const SwiperView = (props) => {
* @description 获取当前卡片详情之类
*/
const getCurrentDetail = (item) => {
commonToast('111')
showToast({
title:'111'
})
}
return (
......@@ -73,21 +73,32 @@ const SwiperView = (props) => {
swiperList.map((item, i) => (
<SwiperItem>
<View
className={`scroll_item ${i === currentIndex && isSpecial ? "current_item" : ""} ${useCustomAni(i)}
`}
className={`scroll_item ${i === currentIndex && isSpecial ? "current_item" : ""} ${useCustomAni(i)}`}
>
{i === currentIndex && (
{/* {i === currentIndex && (
<Image
className="checkPic"
src="https://yun.dui88.com/tebuXinYuan/checkGoods.png"
></Image>
)}
)} */}
<View className="item_img_content">
{/* 单个swiper主要内容 */}
<Image className="img" style={{width:`${400/100}rem`,height:`${240/100}rem`}} src={item.image}></Image>
<Image
className="img"
style={{
width:`${400/100}rem`,
height:`${240/100}rem`
}}
src={item.image}></Image>
{
item?.content &&
<View className='text_content' >
<View
className='text_content'
style={{
width:'100%',
height:`${160/100}rem`
}}
>
<View className='text' >{item.content}</View>
</View>
}
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.less
View file @ 6ea21b4f
......@@ -20,7 +20,6 @@
margin: 0 auto;
position: relative;
border-radius: 20px;
// background-image: url("https://yun.duiba.com.cn/4a45a818-7d3f-4a97-9fb6-a18c9f635520.png");
.image-property(cover, top center);
.checkPic {
width: 60px;
......@@ -40,8 +39,7 @@
background-position: top center;
}
.text_content{
width: 100%;
height: 160px;
margin: 0 auto;
box-sizing: border-box;
padding: 16px;
display: flex;
......@@ -69,7 +67,7 @@
line-height: 65px;
font-size: 26px;
animation: scales 2s infinite;
// animation: scales 2s infinite;
}
}
}
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.md 0 → 100644
View file @ 6ea21b4f
##### swiperView 滑动
| 配置项 | 类型 | 描述 | 默认值 | 备注 |
| :-------- | :-----: | :--------: | :-----: | :---:|
| swiperList | Array | 滑动数组 | [...] | / |
| disableTouch | Boolean | 是否可手动滑动 | false | true 可滑动 false 不可滑动 |
| autoplay | Boolean | 是否自动切换 | false |/|
| circular | Boolean | 是否采用衔接滑动| false |/|
| vertical | Boolean | 是否垂直切换| false |/|
| duration | Number | 滑动动画时长| 1000 |/|
| interval | Number | 自动切换时间间隔| 1500 |/|
| easingFunction|String | 缓动动画类型| linear |'default','linear' 'easeInCubic' 'easeOutCubic' 'easeInOutCubic'|
#### swiperList
```json
[
{
"image":"",//图片链接,图片宽高需要在less中修改
"content":"",//图片描述
"hasBtn":"",//注入数据(是否有按钮)
},
// ...
]
```
\ No newline at end of file
c_client/src/const.js
View file @ 6ea21b4f
......@@ -149,6 +149,7 @@ export const prizeList = [
"https://yun.duiba.com.cn/spark/assets/240121a7e7e10a66ad0cfa99a8b3ba9631fc7855.png",
name:'商品描述商品描述商品描述商品描述商品描述1',
content:'商品描述商品描述商品描述商品描述商品描述1',
hasBtn:true
},
{
image:
......
c_client/src/pages/index/index.jsx
View file @ 6ea21b4f
......@@ -189,10 +189,10 @@ function Index() {
{/* <ScrollXView prizeList={prizeList} /> */}
{/* swiper左右滑动 */}
{/* <SwiperView swiperList={prizeList} vertical={false} disableTouch={true} /> */}
{/* <SwiperView swiperList={prizeList} vertical={false} /> */}
{/* 大转盘 */}
<View className={styles['rotate']}
{/* <View className={styles['rotate']}
style={{
width:`${600/100}rem`,
height:`${600/100}rem`,
......@@ -202,7 +202,7 @@ function Index() {
alignItems:'center'
}} >
<RotateWheel {...rotateConfig} />
</View>
</View> */}
{
tasksModalVisible &&
......
c_client/src/pages/packageGood/browseGoods/browseGoods.jsx
View file @ 6ea21b4f
......@@ -8,7 +8,7 @@ import { TASK_CONFIG, BROSE_GOOD_TYPE } from '@/const'
import { commonToast } from 'tbcc-sdk-ts/lib/core/tb'
import styles from './browseGoods.module.less'
const loadObj = {
export const LOAD_OBJ = {
PICTURE:'PICTURE',
NUMBER:"NUMBER",
DEFAULT:""
......@@ -30,7 +30,7 @@ const browseConfig = {
img: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_img@2x.png'
},
color: '#181818',
loadFlag: loadObj.PICTURE
loadFlag: LOAD_OBJ.PICTURE
}
const list = [
......
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