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

对接api

Browse Source
This commit is contained in:
cheng
2022-05-09 10:03:33 +08:00
parent e7a130533d
commit 4c46c6e22d
16 changed files with 243 additions and 184 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/infiniteScroll/index.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ export default memo(({
{moreStatus&&<View className={style.infinite_scroll}>
{
hasMore&&<View className={style.loading_more}>加载中<DotLoading/></View>||
<View>没有更多了</View>
<View>没有更多数据了</View>
}
</View>}
</View>
src/components/product/index.tsx
+12 -12
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 => {
{productList.map(item => {
return <View className={styles.products_item} onClick={() => goLink('/pages/details/index?id=1')}>
<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/sideBar/index.tsx
+25 -22
View File
@@ -1,24 +1,23 @@
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 = [],
@@ -28,7 +27,9 @@ export default memo(({list = [],
children,
heightItem = 100,
refresherTriggered = false,
selfOnRefresherRefresh
selfOnRefresherRefresh,
selfOnScrolltolower,
hasMore = true
}: Params) => {
let num_half = useRef(0)
@@ -36,17 +37,21 @@ export default memo(({list = [],
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)
}
@@ -54,9 +59,10 @@ export default memo(({list = [],
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())
}
}
@@ -75,10 +81,7 @@ export default memo(({list = [],
})
})
//触底事件
const onScrolltolower = () => {
console.log('触底了')
}
return (
<>
@@ -88,14 +91,14 @@ export default memo(({list = [],
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>
)
@@ -104,7 +107,7 @@ export default memo(({list = [],
<View className="common_safe_area_y"></View>
</ScrollView>
<View className={styles.sideBar_con}>
<InfiniteScroll selfonScrollToLower={() => onScrolltolower()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
<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>
)
}