diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 1efe053..66324c9 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -179,8 +179,8 @@ function Home() { >( () => [ { key: 'recommend', title: '推荐', params: { recommend: 1 } }, - { key: '4476', title: '桶装水', params: { categoryId: 4476 } }, - { key: '4556', title: '水票套餐', params: { categoryId: 4556 } }, + // { key: '4476', title: '桶装水', params: { categoryId: 4476 } }, + // { key: '4556', title: '水票套餐', params: { categoryId: 4556 } }, // { key: '4557', title: '购机套餐', params: { categoryId: 4557 } }, // { key: '4477', title: '饮水设备', params: { categoryId: 4477 } }, ], @@ -290,7 +290,7 @@ function Home() { - Taro.navigateTo({ url: `/shop/category/index?id=4557` })}> + Taro.navigateTo({ url: `/shop/category/index?id=4560` })}> 政企采购专区 diff --git a/src/shop/category/components/GoodsList.scss b/src/shop/category/components/GoodsList.scss index e69de29..de245e8 100644 --- a/src/shop/category/components/GoodsList.scss +++ b/src/shop/category/components/GoodsList.scss @@ -0,0 +1,122 @@ + +.goods-grid { + margin-top: 18rpx; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 18rpx; +} + +.goods-card { + border-radius: 22rpx; + overflow: hidden; + background: #ffffff; + box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.06); +} + +.goods-card__imgWrap { + padding: 18rpx 18rpx 0; +} + +.goods-card__img { + width: 100%; + height: 280rpx; + border-radius: 18rpx; + background: #f4f4f4; +} + +.goods-card__body { + padding: 18rpx 18rpx 20rpx; +} + +.goods-card__title { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + font-size: 26rpx; + font-weight: 700; + color: #1c1c1c; + min-height: 72rpx; +} + +.goods-card__meta { + margin-top: 10rpx; + display: flex; + justify-content: space-between; + align-items: flex-end; + gap: 10rpx; +} + +.goods-card__sold { + font-size: 22rpx; + color: #9a9a9a; + white-space: nowrap; +} + +.goods-card__price { + display: flex; + align-items: baseline; + gap: 4rpx; + color: #27c86b; + white-space: nowrap; +} + +.goods-card__priceUnit { + font-size: 22rpx; + font-weight: 800; +} + +.goods-card__priceValue { + font-size: 36rpx; + font-weight: 900; +} + +.goods-card__actions { + margin-top: 16rpx; + display: flex; + gap: 14rpx; +} + +.goods-card__btn { + flex: 1; + height: 64rpx; + border-radius: 999rpx; + display: flex; + align-items: center; + justify-content: center; +} + +.goods-card__btn--ghost { + border: 2rpx solid rgba(32, 194, 106, 0.7); + background: #ffffff; +} + +.goods-card__btn--primary { + background: linear-gradient(90deg, #24d34c 0%, #6df09a 100%); +} + +.goods-card__btnText { + font-size: 24rpx; + font-weight: 700; + color: #18b85a; + white-space: nowrap; +} + +.goods-card__btnText--primary { + color: #ffffff; +} + +.buy-btn{ + height: 70px; + background: linear-gradient(to bottom, #1cd98a, #24ca94); + border-radius: 100px; + color: #ffffff; + display: flex; + align-items: center; + justify-content: space-around; + .cart-icon{ + background: linear-gradient(to bottom, #bbe094, #4ee265); + border-radius: 100px 0 0 100px; + height: 70px; + } +} diff --git a/src/shop/category/components/GoodsList.tsx b/src/shop/category/components/GoodsList.tsx index f84ae9e..742aa7b 100644 --- a/src/shop/category/components/GoodsList.tsx +++ b/src/shop/category/components/GoodsList.tsx @@ -1,51 +1,54 @@ import {Image} from '@nutui/nutui-react-taro' -import {Share} from '@nutui/icons-react-taro' import {View, Text} from '@tarojs/components' import Taro from '@tarojs/taro' import './GoodsList.scss' +import {ShopGoods} from "@/api/shop/shopGoods/model"; const GoodsList = (props: any) => { return ( <> - - - {props.data?.map((item: any, index: number) => { - return ( - - Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/> - - - {item.name} - - {item.comments} - 已售 {item.sales} - - - - - {item.price} - 会员价 - ¥{item.salePrice} - - - - Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/> - - Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}>购买 - - - + + + + {props.data?.map((item: ShopGoods) => ( + + + + Taro.navigateTo({ url: `/shop/goodsDetail/index?id=${item.goodsId}` }) + } + /> + + + + {item.name} + + 已购:{item.sales || 0}人 + + + {item.buyingPrice} + + + + + + Taro.navigateTo({ url: `/shop/goodsDetail/index?id=${item.goodsId}` }) + } + > + 立即购买 - ) - })} + + ))} diff --git a/src/shop/category/index.tsx b/src/shop/category/index.tsx index 7899e20..74845c3 100644 --- a/src/shop/category/index.tsx +++ b/src/shop/category/index.tsx @@ -1,7 +1,7 @@ import Taro from '@tarojs/taro' import GoodsList from './components/GoodsList' import {useShareAppMessage} from "@tarojs/taro" -import {Loading} from '@nutui/nutui-react-taro' +import {Loading,Empty} from '@nutui/nutui-react-taro' import {useEffect, useState} from "react" import {useRouter} from '@tarojs/taro' import './index.scss' @@ -21,7 +21,7 @@ function Category() { // 1.加载远程数据 const id = Number(params.id) const nav = await getCmsNavigation(id) - const shopGoods = await pageShopGoods({categoryId: id}) + const shopGoods = await pageShopGoods({categoryId: id, status: 0}) // 2.处理业务逻辑 setCategoryId(id) @@ -59,6 +59,12 @@ function Category() { ) } + if(list.length == 0){ + return ( + + ) + } + return ( <>