94 lines
2.5 KiB
JavaScript
94 lines
2.5 KiB
JavaScript
import React from 'react'
|
|
import { Image, Text, View } from '@tarojs/components'
|
|
import './index.scss'
|
|
import TabbarAction from '@/components/action';
|
|
import { Infiniteloading } from '@nutui/nutui-react-taro';
|
|
import { useEffect } from 'react';
|
|
import { useState } from 'react';
|
|
import { mallList } from '../../utils/api';
|
|
import Taro from '@tarojs/taro';
|
|
|
|
|
|
function Index() {
|
|
const limit = 10
|
|
const [list, setList] = useState([])
|
|
const [total, setTotal] = useState(0)
|
|
const [page, setPage] = useState(1)
|
|
const [hasMore, setHasMore] = useState(true)
|
|
|
|
useEffect(() => {
|
|
if (page < 1) {
|
|
return
|
|
}
|
|
fetchList(page)
|
|
|
|
}, [page])
|
|
|
|
const fetchList = async (page) => {
|
|
const offset = (page - 1) * limit
|
|
const res = await mallList('mall', offset, limit)
|
|
|
|
if (!res) return
|
|
if (res.items?.length + list.length >= res.total) {
|
|
setHasMore(false)
|
|
}
|
|
setList(res.items)
|
|
setTotal(res.total)
|
|
}
|
|
|
|
|
|
// 跳转
|
|
const navDetailFn = (id) => {
|
|
Taro.navigateTo({
|
|
url: `/pages/goods-detail/index?id=${id}`
|
|
})
|
|
}
|
|
|
|
return (
|
|
<View className='home-container'>
|
|
<View className='home-title'>首页</View>
|
|
<TabbarAction />
|
|
<View className='home-body' id="customScroll">
|
|
<Infiniteloading
|
|
containerId="customScroll"
|
|
useWindow={false}
|
|
loadTxt="loading"
|
|
loadMoreTxt={<View></View>}
|
|
loadIcon='loading'
|
|
hasMore={hasMore}
|
|
onLoadMore={(x) => {
|
|
setPage(p => p + 1)
|
|
x()
|
|
}}
|
|
>
|
|
<View className='goods-container '>
|
|
{
|
|
list.map(item => {
|
|
return <View className='goods-item' key={item.id} onClick={() => {
|
|
navDetailFn(item.id)
|
|
}}>
|
|
<View className='goods-item-image'>
|
|
<Image src={item.cover_image} />
|
|
</View>
|
|
<View className='goods-item-name line-clamp-2'>
|
|
{item.name}
|
|
</View>
|
|
{/* <View className='goods-item-desc line-clamp-2 '>
|
|
这个是商品的介绍
|
|
</View> */}
|
|
<View className='goods-item-price'>
|
|
<Text className='goods-item-price-sale'>¥{item.price}</Text>
|
|
{/* <Text className='goods-item-price-origin'>原价888</Text> */}
|
|
</View>
|
|
</View>
|
|
})
|
|
}
|
|
</View>
|
|
</Infiniteloading>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default Index
|