xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev' of http://git.online.zzfzyc.com/mp/EShop into dev

Browse Source
This commit is contained in:
li tong bao
2022-05-11 14:16:32 +08:00
parent 231423a03b d5622d5b0a
commit 72338bc637
94 changed files with 6491 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/swiper/index.module.scss → src/components/banner/index.module.scss
View File
src/components/banner/index.tsx
+51
View File
@@ -0,0 +1,51 @@
import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
import { goLink } from "@/common/common"
import {GetBannerList} from "@/api/banner"
import styles from './index.module.scss'
import { useEffect, useState } from "react"
type item = {title:string, img:string, url:string, id:number}
type params = {
list?: item[]
swiperOnClick?: (val: item) => void,
style?: Object
}
export default (props:params) => {
let {swiperOnClick, style = {}} = props
const [list, setList] = useState<any[]>([])
const {fetchData, state} = GetBannerList()
useEffect(() => {
getData()
}, [])
const getData = async () => {
const res = await fetchData()
setList(res.data.list)
}
return (
<View className={styles.swiper_con} style={style}>
<Swiper
className={styles.xswiper}
indicatorColor='#ccc'
indicatorActiveColor='#fff'
circular
indicatorDots
autoplay>
{
list?.map(item => {
return <SwiperItem key={item.id}>
<View className={styles.image_item} onClick={() => goLink(item.link)}>
<Image mode="aspectFill" src={item.prev_view_url}></Image>
</View>
</SwiperItem>
})
}
</Swiper>
</View>
)
}
src/components/bluetooth/LinkBlueTooth.tsx
+90
View File
@@ -0,0 +1,90 @@
import { View } from "@tarojs/components";
import { memo, useEffect, useMemo, useState } from "react";
import Taro from "@tarojs/taro";
import {useBluetooth} from "@/use/contextBlueTooth"
import SearchInput from "@/components/searchInput";
import Popup from "@/components/bluetooth/Popup"
import classnames from "classnames";
import styles from "./css/linkBlueTooth.module.scss"
export default memo(() => {
const {state, init, startScan, connect, disconnect} = useBluetooth()
useEffect(() => {
init()
}, [])
const [linkStatus, setLinkStatus] = useState(1)
useEffect(() => {
if(!state.available) {
setLinkStatus(1)
} else if(state.available&&state.connected?.name) {
setLinkStatus(3)
} else {
setLinkStatus(2)
}
console.log('aaa:::',state.connected)
}, [state.available, state.connected])
const linkName = useMemo(() => {
return state.connected?.localName||''
}, [state.connected])
//链接设备
const onLinkListen = (item) => {
if(!state.connected&&!state.connecting)
connect(item)
}
const [popupShow, setPopupShow] = useState(false)
//显示设备列表
const onFindDevice = () => {
if(linkStatus == 1) {
Taro.showToast({
title:'请打开蓝牙',
icon:'none'
})
} else {
setPopupShow(true)
onFindEven()
}
}
const onFindEven = () => {
if(!state.discovering&&!state.connected&&!state.connecting)
startScan()
}
//断开链接
const onDisconnect = () => {
disconnect()
setPopupShow(false)
}
return (
<>
<View className={styles.main}>
<SearchInput title="蓝牙设备" showIcon={true}>
<View className={styles.bluetooth_link} onClick={onFindDevice}>
<View className={classnames(styles.link_status, linkStatus == 3 &&styles.link_statused, linkStatus == 2&&styles.link_statused_no)}></View>
{
linkStatus == 1&&<View className={classnames(styles.link_name, styles.link_name_no)}>请开启蓝牙</View>||
linkStatus == 2&&<View className={classnames(styles.link_name,styles.link_name_no_link) }>未连接设备</View>||
linkStatus == 3&&<View className={classnames(styles.link_name)}>{linkName}</View>
}
</View>
</SearchInput>
<Popup
state={state}
show={popupShow}
onClose={() => setPopupShow(false)}
onLink={item => onLinkListen(item)}
onOff={onDisconnect}
onFind={onFindEven}
/>
</View>
</>
);
})
src/components/bluetooth/Popup.tsx
+73
View File
@@ -0,0 +1,73 @@
import { ScrollView, View } from "@tarojs/components"
import { memo, useEffect, useState } from "react"
import Loading from "@/components/loading"
import style from "./css/popup.module.scss"
interface params {
state: any,
show: Boolean,
onClose: (Boolean) => void,
onLink: (any) => void,
children?: React.ReactNode
onOff: () => void,
onFind: () => void,
}
export default memo(({state, show=false, onClose, onLink, onOff, onFind}:params) => {
const [popupShow, setPopupShow] = useState(show)
useEffect(() => {
setPopupShow(show)
}, [show])
const onCloseListener = () => {
onClose(false)
}
return (
<>
{
popupShow&&<View className={style.popup}>
<View className={style.content}>
<View className={style.title}>搜索设备</View>
<View className={style.list}>
<ScrollView scrollY className={style.scroll}>
{
(state.devices&&state.devices.length > 0)&&state?.devices.map(item => {
return (
<View className={style.item} onClick={() => onLink(item)}>
<View>{item.name}</View>
{
(!state.connecting&&!state.connected)&&<View >链接</View>||
(state.connecting&&item.deviceId == state.connecting.deviceId)&&<View className={style.link_ing}>正在链接...</View>||
(state.connected&&item.deviceId == state.connected.deviceId)&&<View className={style.link_success}>链接成功</View>
}
</View>
)
})||
<View className={style.noDevice}>
{
(!state.discovering)&& <>
<View>暂无设备,请按以下条件检查</View>
<View className={style.n_item}>1.请确保取色仪处于激活状态</View>
<View className={style.n_item}>2.请确保取色仪没有链接其他设备</View>
<View className={style.n_item}>3.请打开手机定位</View>
</>||
<View>设备搜索中</View>
}
</View>
}
</ScrollView>
</View>
{
state.connected&&<View className={`${style.footer} ${style.footer_off}`} onClick={onOff}>断开链接</View>||
(!state.connected&&state.discovering)&&<View className={`${style.footer} ${style.finding}`}>搜索中<Loading width={30} color='orange'/></View>||
<View className={style.footer} onClick={onFind}>重新搜索</View>
}
</View>
<View className={style.mask} onClick={onCloseListener}></View>
</View>
}
</>
)
})
src/components/bluetooth/css/linkBlueTooth.module.scss
+30
View File
@@ -0,0 +1,30 @@
.main{
.bluetooth_link{
display: flex;
align-items: center;
.link_status{
width: 12px;
height: 12px;
background: #f02409;
border-radius: 50%;
}
.link_statused{
background: #07C160;
}
.link_statused_no{
background: #f0ec09;
}
.link_name{
font-size: $font_size;
margin-left: 20px;
}
.link_name_no{
color: #f02409;
}
.link_name_no_link{
color: #f0ec09;
}
}
}
src/components/bluetooth/css/popup.module.scss
+90
View File
@@ -0,0 +1,90 @@
.popup{
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
.mask{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: fixed;
top:0;
left:0;
z-index: 9;
}
.content{
z-index: 99;
background-color: #fff;
width: 75vw;
height: 600px;
position: fixed;
top: 50%;
left: 50%;
border-radius: 20px;
transform: translateX(-50%) translateY(-50%);
display: flex;
flex-direction: column;
font-size: 28px;
.title{
text-align: center;
margin: 20px;
}
.list{
height: 480px;
padding: 0 20px;
.scroll{
height: 100%;
}
.item{
margin-bottom: 20px;
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #ccc;
padding: 15px 0;
color: #3b3b3b;
@mixin link{
font-size: 25px;
}
.link_success{
@include link;
color: green;
}
.link_ing {
color: orange;
}
}
.noDevice{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #a8a8a8;
.n_item{
width: 100%;
text-align: left;
margin-top: 20px;
padding: 0 30px;
box-sizing: border-box;
}
}
}
.footer{
text-align: center;
padding: 20px 0;
background-color: #f1f1f1;
border-radius: 0 0 10px 10px;
display: flex;
justify-content: center;
align-items: center;
}
.finding{
color: orange;
}
.footer_off{
color: red;
}
}
}
src/components/infiniteScroll/index.module.scss
+1
View File
@@ -1,6 +1,7 @@
.scroll_main{
height: 100%;
.infinite_scroll{
font-size: $font_size_medium;
color: $color_font_two;
src/components/infiniteScroll/index.tsx
+8 -6
View File
@@ -7,6 +7,7 @@ type Params = {
styleObj?: Object,
selfonScrollToLower?: () => void,
hasMore?: false|true,
moreStatus?: false|true,
children?: ReactNode,
lowerThresholdNum?: number,
selfOnScrollToUpper?:() => void
@@ -17,7 +18,7 @@ type Params = {
selfOnRefresherAbort?: () => void
paddingBottom?: number,
refresherTriggered?: true|false,
refresherEnabled?: true|false
refresherEnabled?: true|false,
}
export default memo(({
styleObj,
@@ -33,7 +34,8 @@ export default memo(({
lowerThresholdNum = 5,
paddingBottom = 0,
refresherTriggered = false,
refresherEnabled = false
refresherEnabled = false,
moreStatus = true
}: Params) => {
const scrollToLower = () => {
selfonScrollToLower?.()
@@ -73,16 +75,16 @@ export default memo(({
onRefresherRefresh = {() => refresherRefresh()}
onRefresherRestore = {() => refresherRestore()}
onRefresherAbort = {() => refresherAbort()}
refresherBackground ='#ccc'
refresherBackground ='#F8F8F8'
>
<View style={{paddingBottom:paddingBottom + 'rpx'}}>
{children}
<View className={style.infinite_scroll}>
{moreStatus&&<View className={style.infinite_scroll}>
{
hasMore&&<View className={style.loading_more}>加载中<DotLoading/></View>||
<View>没有更多了</View>
<View>没有更多数据了</View>
}
</View>
</View>}
</View>
<View className="common_safe_area_y"></View>
src/components/moveBtn/index.module.scss
+1
View File
@@ -12,6 +12,7 @@
display: flex;
justify-content: center;
align-items: center;
z-index:999;
.shop_icon{
font-size: 50px;
color: $color_main;
src/components/product/index.tsx
+13 -13
View File
@@ -3,27 +3,27 @@ import Taro from "@tarojs/taro"
import { goLink } from "@/common/common"
import styles from './index.module.scss'
type params = {
desStatus?: true|false
type Params = {
desStatus?: true|false,
productList?: any[]
}
export default ({desStatus = true}: params) => {
export default ({desStatus = true, productList = []}:Params) => {
return (
<View className={styles.products_list}>
{new Array(10).fill('').map(item => {
return <View className={styles.products_item} onClick={() => goLink('/pages/details/index?id=1')}>
{productList?.map(item => {
return <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
<View className={styles.item_img}>
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
<View className={styles.num}>230色</View>
<Image src={item.texture_url}/>
<View className={styles.num}>{item.product_color_count}色</View>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>0770#</text>21S单面平纹(食毛)</View>
<View className={styles.title}><text>{item.code}#</text>{item.name}</View>
<View className={styles.tag_list}>
<View className={styles.tag}>160cm</View>
<View className={styles.tag}>110g</View>
<View className={styles.tag}>{item.width}</View>
<View className={styles.tag}>{item.weight_density}</View>
</View>
<View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
{desStatus&&<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>}
<View className={styles.introduce}>{item.component}</View>
{desStatus&&<View className={styles.des}>{item.describe}</View>}
</View>
</View>
})}
src/components/search/index.module.scss
+2 -1
View File
@@ -20,6 +20,7 @@
border-radius: 50px;
padding: 0 60px;
box-sizing: border-box;
z-index:0;
&::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
font-size: 16px;
@@ -55,7 +56,7 @@
position: absolute;
left: 10px;
margin-right: 0;
z-index: 10;
}
.icon_out{
margin-right: 10px;
src/components/search/index.tsx
+19 -8
View File
@@ -2,7 +2,8 @@ import { Input, View } from "@tarojs/components";
import styles from "./index.module.scss"
import CloseBtn from "@/components/closeBtn"
import classnames from "classnames";
import { memo, useEffect, useState } from "react";
import { debounce } from "@/common/util";
import { memo, useEffect, useRef, useState } from "react";
type Params = {
clickOnSearch?: (val: string) => void
@@ -14,7 +15,8 @@ type Params = {
style?: Object,
showBtn?: false|true,
btnStyle?: Object,
btnTitle?: string
btnTitle?: string,
debounceTime?: number //防抖时间，不设默认为零
}
export default memo(({
@@ -24,17 +26,21 @@ export default memo(({
placeholder = '输入搜索内容',
showIcon = true,
showBtn = false,
style = {},
btnStyle = {},
placeIcon = 'inner',
btnTitle = '搜索'
btnTitle = '搜索',
debounceTime = 0
}:Params) => {
const [inputCon , setInputCon] = useState('')
const debounceTimeRef = useRef(0)
useEffect(() => {
debounceTimeRef.current = debounceTime
}, [debounceTime])
const onInputEven = (e) => {
const value = e.detail.value
setInputCon(value)
changeOnSearch?.(value)
changeData(value)
}
const clearInput = () => {
@@ -42,13 +48,18 @@ export default memo(({
changeOnSearch?.('')
}
const changeData = debounce((value) => {
setInputCon(value)
changeOnSearch?.(value)
}, debounceTimeRef.current)
const onSearch = () => {
clickOnSearch?.(inputCon)
}
return (
<>
<View className={styles.search_main} onClick={() => onSearch()} style={style}>
<View className={styles.search_main} onClick={() => clickOnSearch?.(inputCon)}>
<View className={styles.search_con}>
{showIcon&&<View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon=='inner'?styles.icon_inner:styles.icon_out)}></View>}
<Input placeholderStyle='color:#ABABAB; font-size:26rpx' className={classnames(placeIcon=='out'&&styles.input_out)} disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>
src/components/searchInput/index.module.scss
+37
View File
@@ -0,0 +1,37 @@
.searchInput_main{
display: flex;
align-items: center;
min-height: 62px;
padding: 10px 0;
border-bottom: 1px solid #F0F0F0;
.searchInput_title {
width: 150px;
min-height: 50px;
font-size: 28px;
border-right: 1px solid #F0F0F0;
color: $color_font_two;
margin-right: 20px;
padding-left: 20px;
display: flex;
align-items: center;
// &::before{
// content: "";
// height: 50px;
// width: 1px;
// background-color: #F0F0F0;
// }
}
.searchInput_con{
flex:1;
width: 100%;
input{
font-size: 26px;
}
}
.icon_more_self{
font-size: 28px;
color: $color_font_two;
}
}
src/components/searchInput/index.tsx
+48
View File
@@ -0,0 +1,48 @@
import { Input, View } from "@tarojs/components";
import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from "react";
import styles from './index.module.scss';
type Params = {
showIcon?: false|true,
disabled?: false|true,
placeholder?: string,
title?: string,
showTitle?: false|true,
showBorder?: false|true,
changeOnInput?: (string) => void,
clickOnInput?: () => void,
children?: ReactNode
}
export default memo((props: Params) => {
let {
showTitle = true,
title = '标题',
showIcon = false,
disabled = false,
placeholder = '请输入',
showBorder = true,
changeOnInput,
clickOnInput
} = props
let stylen = useMemo(() => {
if(!showBorder) {
return { borderBottom: 0 }
}
return {}
}, [showBorder])
console.log('searchInput::')
return (
<View className={styles.searchInput_main} style={stylen}>
{showTitle&&<View className={styles.searchInput_title}>{title}</View>}
<View className={styles.searchInput_con}>
{!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
||<View>{props.children}</View>
}
</View>
{showIcon&&<View className={`iconfont icon-jiantou ${styles.icon_more_self}`}></View>}
</View>
)
})
src/components/shopCart/index.tsx
+18 -14
View File
@@ -7,6 +7,8 @@ import InfiniteScroll from "@/components/infiniteScroll";
import styles from "./index.module.scss"
import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import { goLink } from "@/common/common";
import {GetShoppingCartApi} from "@/api/shopCart"
type param = {
show?: true|false,
@@ -19,21 +21,21 @@ export default ({show = false, onClose}: param) => {
setSelectIndex(index)
}
//获取数据
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
const {fetchData} = GetShoppingCartApi()
const getShoppingCart = async () => {
setLoading(true)
const {data} = await fetchData()
setList(data)
setLoading(false)
}
useEffect(() => {
if(!show) return
let lists:any[] = []
for(let i = 0; i < 20; i++) {
lists = [...lists, {
title:`${i}#薄荷绿`,
subtitle: '0770# 21S单面平纹(食毛)',
tag: '剪板',
select: i%2?true: false
}]
}
setList([...lists])
getShoppingCart()
}, [show])
useEffect(() => {
@@ -91,6 +93,8 @@ export default ({show = false, onClose}: param) => {
}
})
}
return (
<View className={styles.shop_cart_main}>
@@ -111,7 +115,7 @@ export default ({show = false, onClose}: param) => {
</View>
<View className={styles.con}>
{loading&&<LoadingCard/>}
{!loading&&list.length > 0&&<InfiniteScroll selfonScrollToLower={() => {console.log('触底了')}} paddingBottom={100}>
{!loading&&list.length > 0&&<InfiniteScroll refresherTriggered={true} refresherEnabled={true} selfonScrollToLower={() => {console.log('触底了')}} paddingBottom={100}>
<View className={styles.product_list}>
{list.map((item, index) => {
return <View key={index} className={styles.product_item}>
@@ -123,7 +127,7 @@ export default ({show = false, onClose}: param) => {
</View>
<View className={styles.des}>
<View className={styles.title}>{item.title}</View>
<View className={styles.subtitle}>0770# 21S单面平纹(食毛)</View>
<View className={styles.subtitle}>07703# 21S单面平纹(食毛)</View>
<View className={styles.tag}>剪板</View>
</View>
<View className={styles.count}>
@@ -134,7 +138,7 @@ export default ({show = false, onClose}: param) => {
})}
</View>
</InfiniteScroll>}
{!loading&&list.length > 0&&<View className={styles.empty}>
{!loading&&list.length == 0 &&<View className={styles.empty}>
<View className={styles.title}>暂未选择商品</View>
<View className={styles.btn}>去选购</View>
</View>}
@@ -149,7 +153,7 @@ export default ({show = false, onClose}: param) => {
<View className={styles.price_real}><text>￥</text>200</View>
<View className={styles.price_forecast}>预估金额</View>
</View>
<View className={styles.goPay}>
<View className={styles.goPay} onClick={() => goLink('/pages/order/index')}>
去结算
</View>
</View>
src/components/sideBar/index.tsx
+35 -22
View File
@@ -1,42 +1,57 @@
import { ScrollView, View } from "@tarojs/components"
import { memo, ReactNode, useRef, useState } from "react"
import { memo, ReactNode, useEffect, useRef, useState } from "react"
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { useReady } from "@tarojs/taro";
import InfiniteScroll from "../infiniteScroll";
type ListProps = {
title: string,
value: number
}
type Params = {
list?: ListProps[],
list?: any[],
defaultValue?: number|string,
children?: ReactNode,
height?: string,
heightItem?: number,
sideBarOnClick?: (ListProps) => void
sideBarOnClick?: (val:any) => void,
refresherTriggered?: true|false,
selfOnRefresherRefresh?: () => void
selfOnScrolltolower?: () => void,
hasMore?: true|false
}
export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClick, children, heightItem = 100}: Params) => {
export default memo(({list = [],
defaultValue = 0,
height='100vh',
sideBarOnClick,
children,
heightItem = 100,
refresherTriggered = false,
selfOnRefresherRefresh,
selfOnScrolltolower,
hasMore = true
}: Params) => {
let num_half = useRef(0)
const [selected, setSelected] = useState(defaultValue)
const [tabId, setTabId] = useState('')
useEffect(() => {
setSelected(defaultValue)
}, [defaultValue])
const init = () => {
const index = list?.findIndex(item => {
return item.value == defaultValue
return item.id == defaultValue
})
if(index !== -1) {
computeSelectTab(index)
}
}
const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
setSelected(item.value)
const clickEvent = ({item, index}: {item, index:number}) => {
setSelected(item.id)
sideBarOnClick?.(item)
computeSelectTab(index)
}
@@ -44,9 +59,10 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
const computeSelectTab = (index) => {
if((index + 1) > num_half.current) {
let num = index + 1 - num_half.current
setTabId(list[num].value.toString())
setTabId(list[num].id.toString())
} else {
setTabId(list[0].value.toString())
setTabId(list[0].id.toString())
}
}
@@ -65,10 +81,7 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
})
})
//触底事件
const onScrolltolower = () => {
console.log('触底了')
}
return (
<>
@@ -78,14 +91,14 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
list?.map((item, index) => {
return(
<View
className={classnames(styles.sideBar_select_title, {[styles.sideBar_select_title_select]:(selected == item.value)})}
className={classnames(styles.sideBar_select_title, {[styles.sideBar_select_title_select]:(selected == item.id)})}
onClick={() => clickEvent({item, index})}
id={`tab_${item.value}`}
key={item.value}
id={`tab_${item.id}`}
key={item.id}
style={{height:heightItem+'rpx'}}
>
<View className={styles.title_con}>
{item.title}
{item.name}
</View>
</View>
)
@@ -94,7 +107,7 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
<View className="common_safe_area_y"></View>
</ScrollView>
<View className={styles.sideBar_con}>
<InfiniteScroll selfonScrollToLower={() => onScrolltolower()}>
<InfiniteScroll hasMore={hasMore} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
{children}
</InfiniteScroll>
</View>
src/components/swiper/index.tsx
-52
View File
@@ -1,52 +0,0 @@
import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
import { goLink } from "@/common/common"
import Taro from "@tarojs/taro"
import styles from './index.module.scss'
type item = {title:string, img:string, url:string, id:number}
type params = {
list?: item[]
swiperOnClick?: (val: item) => void,
style?: Object
}
export default (props:params) => {
let {list = [], swiperOnClick, style = {}} = props
list = [
{
title:'数据',
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
url:'',
id:1
},
{
title:'数据',
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
url:'',
id:2
}
]
return (
<View className={styles.swiper_con} style={style}>
<Swiper
className={styles.xswiper}
indicatorColor='#ccc'
indicatorActiveColor='#fff'
circular
indicatorDots
autoplay>
{
list.map(item => {
return <SwiperItem key={item.id}>
<View className={styles.image_item} onClick={() => goLink(`/pages/classList/index?id=${item.id}`)}>
<Image mode="aspectFill" src={item.img}></Image>
</View>
</SwiperItem>
})
}
</Swiper>
</View>
)
}
src/components/tabs/index.module.scss
+16 -8
View File
@@ -1,20 +1,28 @@
.tabs_main{
display: flex;
width: 100%;
.tabs_scroll{
width: 100%;
display: flex;
white-space: nowrap;
border-bottom: 1px solid $color_font_two;
border-top: 1px solid $color_font_two;
height: 102px;
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
.tabs_item{
flex:1;
display: inline-block;
padding: 10px 20px;
height: 100%;
box-sizing: border-box;
position: relative;
font-size: 24rpx;
background-color: #F0F0F0;
border-radius: 24rpx;
min-width: 126rpx;
height: 46.93rpx;
text-align: center;
line-height: 46.93rpx;
color: #707070;
margin-right: 20px;
.tabs_item_con{
height: 100%;
display: flex;
src/components/tabs/index.tsx
+5 -4
View File
@@ -13,10 +13,12 @@ type Params = {
list?: ListProps[],
defaultValue?: number|string,
children?: ReactNode,
tabsOnClick?: (ListProps) => void
tabsOnClick?: (ListProps) => void,
style?:Object,
}
export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
export default memo(({list = [], defaultValue = 0, tabsOnClick, style={}}: Params) => {
const [selected, setSelected] = useState(defaultValue)
const [tabId, setTabId] = useState('')
@@ -46,8 +48,7 @@ export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
list.map((item, index) => {
return (
<View key={item.value} id={`tabs_${item.value}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
<View className={classnames(styles.tabs_item_con, {[styles.tabs_item_select]:selected == item.value})}>{item.title}</View>
{(selected == item.value) && <View className={styles.tabs_index}></View>}
<View className={classnames(styles.tabs_item_con, {[styles.tabs_item_select]:selected == item.value})}>{item.title}</View>
</View>
)
})