提交代码
This commit is contained in:
230
src/pages/index/BestSellers.tsx
Normal file
230
src/pages/index/BestSellers.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import {Image, Space, Tag, Divider} from '@nutui/nutui-react-taro'
|
||||
import {Cart} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {ShopGoods} from "@/api/shop/shopGoods/model";
|
||||
import {pageShopGoods} from "@/api/shop/shopGoods";
|
||||
import './BestSellers.scss'
|
||||
|
||||
const goodsList = [
|
||||
{
|
||||
goodsId: 1,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 2,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 3,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 4,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 5,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 6,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 7,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 8,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 9,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 10,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 11,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 12,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 13,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 14,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 15,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 16,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 17,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 18,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 19,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
},
|
||||
{
|
||||
goodsId: 20,
|
||||
code: '123456',
|
||||
goodsName: '【湾区认证】【百千万工程帮扶产品 通过远方320项检测 湾区认证 丰江桥佛手瓜面】独特风味低脂轻食便捷速食非油炸 720g/袋',
|
||||
unitName: '测试单位',
|
||||
sales: '1.2万',
|
||||
image: 'https://oss.wsdns.cn/20250622/84f4a3e981584b1fb8e4b3898aa07cb7.jpg'
|
||||
}
|
||||
]
|
||||
|
||||
const BestSellers = () => {
|
||||
const [list, setList] = useState<ShopGoods[]>([])
|
||||
const reload = () => {
|
||||
pageShopGoods({}).then(res => {
|
||||
setList(res?.list || []);
|
||||
})
|
||||
console.log(list)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className={'py-0'}>
|
||||
<div className={'flex flex-col justify-between items-center rounded-lg px-2'}>
|
||||
{goodsList?.map((item, index) => {
|
||||
return (
|
||||
<div key={index} className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}
|
||||
onClick={() => Taro.navigateTo({url: '/hjm/location?id=' + item.goodsId})}>
|
||||
<Image src={item.image} mode={'scaleToFill'}
|
||||
radius="10px 10px 0 0" height="180"/>
|
||||
<div className={'flex flex-col p-2 rounded-lg'}>
|
||||
<div>
|
||||
<div className={'car-no text-sm'}>{item.goodsName} #{item.goodsId}</div>
|
||||
<div className={'flex justify-between text-xs py-1'}>
|
||||
<span className={'text-orange-500'}>丰江桥佛手瓜面，非油炸，Q弹爽口，营养丰</span>
|
||||
<span className={'text-gray-400'}>已售 {item.sales}</span>
|
||||
</div>
|
||||
<Space>
|
||||
<Tag plain round background={'#ff0000'}>会客厅循环劵<Divider direction={'vertical'} style={{
|
||||
borderStyle: 'dashed', padding: '0',
|
||||
borderColor: '#fd8989', margin: '0 5px'
|
||||
}}/>每拍2减10元</Tag>
|
||||
<Tag plain round background={'#ff0000'}>会客厅专享<Divider direction={'vertical'} style={{
|
||||
borderStyle: 'dashed', padding: '0',
|
||||
borderColor: '#fd8989', margin: '0 5px'
|
||||
}}/>拍1减3元</Tag>
|
||||
</Space>
|
||||
<div className={'flex justify-between items-center py-2'}>
|
||||
<div className={'flex text-red-500 text-xl items-baseline'}>
|
||||
<span className={'text-xs'}>￥</span>
|
||||
<span className={'font-bold text-2xl'}>19.9</span>
|
||||
</div>
|
||||
<div className={'buy-btn'}>
|
||||
<div className={'cart-icon'}><Cart size={20} className={'mx-4 mt-2'} /></div>
|
||||
<div className={'text-white pl-4 pr-5'}>购买</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default BestSellers
|
||||
Reference in New Issue
Block a user