优化细节

src/shop/category/components/Banner.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+import { Swiper } from '@nutui/nutui-react-taro'
+import {CmsAd} from "@/api/cms/cmsAd/model";
+import {Image} from '@nutui/nutui-react-taro'
+import {getCmsAd} from "@/api/cms/cmsAd";
+
+const MyPage = () => {
+  const [item, setItem] = useState<CmsAd>()
+  const reload = () => {
+    getCmsAd(439).then(data => {
+      setItem(data)
+    })
+  }
+
+  useEffect(() => {
+    reload()
+  }, [])
+
+  return (
+    <>
+      <Swiper defaultValue={0} height={item?.height} indicator style={{ height: item?.height + 'px', display: 'none' }}>
+        {item?.imageList?.map((item) => (
+          <Swiper.Item key={item}>
+            <Image width="100%" height="100%" src={item.url} mode={'scaleToFill'} lazyLoad={false} style={{ height: item.height + 'px' }} />
+          </Swiper.Item>
+        ))}
+      </Swiper>
+    </>
+  )
+}
+export default MyPage

src/shop/category/components/GoodsList.tsx

@@ -0,0 +1,51 @@
+import {Image} from '@nutui/nutui-react-taro'
+import {Share} from '@nutui/icons-react-taro'
+import Taro from '@tarojs/taro'
+import './GoodsList.scss'
+
+
+const GoodsList = (props: any) => {
+
+  return (
+    <>
+      <div className={'py-3'}>
+        <div className={'flex flex-col justify-between items-center rounded-lg px-2'}>
+          {props.data?.map((item, index) => {
+            return (
+              <div key={index} className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}>
+                <Image src={item.image} mode={'aspectFit'} lazyLoad={false}
+                       radius="10px 10px 0 0" height="180"
+                       onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/>
+                <div className={'flex flex-col p-2 rounded-lg'}>
+                  <div>
+                    <div className={'car-no text-sm'}>{item.name}</div>
+                    <div className={'flex justify-between text-xs py-1'}>
+                      <span className={'text-orange-500'}>{item.comments}</span>
+                      <span className={'text-gray-400'}>已售 {item.sales}</span>
+                    </div>
+                    <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'}>{item.price}</span>
+                      </div>
+                      <div className={'buy-btn'}>
+                        <div className={'cart-icon'}>
+                          <Share size={20} className={'mx-4 mt-2'}
+                                 onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/>
+                        </div>
+                        <div className={'text-white pl-4 pr-5'}
+                             onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}>购买
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </>
+  )
+}
+export default GoodsList

src/shop/category/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '商品分类',
+  navigationBarTextStyle: 'black'
+})

src/shop/category/index.tsx

@@ -0,0 +1,78 @@
+import Taro from '@tarojs/taro'
+import GoodsList from './components/GoodsList'
+import {useShareAppMessage, useShareTimeline} from "@tarojs/taro"
+import {Loading} from '@nutui/nutui-react-taro'
+import {useEffect, useState} from "react"
+import {useRouter} from '@tarojs/taro'
+import './index.scss'
+import {pageShopGoods} from "@/api/shop/shopGoods"
+import {ShopGoods} from "@/api/shop/shopGoods/model"
+import {getCmsNavigation} from "@/api/cms/cmsNavigation";
+import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
+
+function Category() {
+  const {params} = useRouter();
+  const [categoryId, setCategoryId] = useState<number>(0)
+  const [loading, setLoading] = useState<boolean>(true)
+  const [nav, setNav] = useState<CmsNavigation>()
+  const [list, setList] = useState<ShopGoods[]>([])
+
+  const reload = async () => {
+    // 1.加载远程数据
+    const id = Number(params.id)
+    const nav = await getCmsNavigation(id)
+    const shopGoods = await pageShopGoods({categoryId: id})
+
+    // 2.处理业务逻辑
+    setCategoryId(id)
+    setNav(nav)
+    setList(shopGoods?.list || [])
+
+    // 3.设置标题
+    Taro.setNavigationBarTitle({
+      title: `${nav?.categoryName}`
+    })
+  };
+
+  useEffect(() => {
+    reload().then(() => {
+      setLoading(false)
+    })
+  }, []);
+
+  useShareTimeline(() => {
+    return {
+      title: `${nav?.categoryName}_时里院子市集`,
+      path: `/shop/category/index?id=${categoryId}`
+    };
+  });
+
+  useShareAppMessage(() => {
+    return {
+      title: `${nav?.categoryName}_时里院子市集`,
+      path: `/shop/category/index?id=${categoryId}`,
+      success: function (res) {
+        console.log('分享成功', res);
+      },
+      fail: function (res) {
+        console.log('分享失败', res);
+      }
+    };
+  });
+
+  if (loading) {
+    return (
+      <Loading className={'px-2 text-center'}>加载中</Loading>
+    )
+  }
+
+  return (
+    <>
+      <div className={'flex flex-col'}>
+        <GoodsList data={list} nav={nav}/>
+      </div>
+    </>
+  )
+}
+
+export default Category

src/shop/goodsDetail/index.tsx

@@ -129,7 +129,7 @@ const GoodsDetail = () => {
           <Swiper defaultValue={0} indicator height={'350px'}>
             {files.map((item) => (
               <Swiper.Item key={item}>
-                <Image width="100%" height={'100%'} src={item.url} mode={'scaleToFill'}/>
+                <Image width="100%" height={'100%'} src={item.url} mode={'scaleToFill'} lazyLoad={false}/>
               </Swiper.Item>
             ))}
           </Swiper>

src/shop/orderConfirm/index.tsx

@@ -64,7 +64,7 @@ const OrderConfirm = () => {
       <CellGroup>
         <Cell>
           <div className={'flex items-center'}>
-            <Image src={goods.image} width="80" height="80"/>
+            <Image src={goods.image} width="80" height="80" lazyLoad={false}/>
             <div className={'ml-2'}>
               <div className={'text-sm font-bold'}>{goods.name}</div>
               <div className={'text-red-500 text-lg'}>￥{goods.price}</div>

src/shop/orderDetail/index.tsx

@@ -91,7 +91,7 @@ const OrderDetail = () => {
         {orderGoodsList.map((item, index) => (
           <Cell key={index}>
             <div className={'flex items-center'}>
-              <Image src={item.goodsImage} width="80" height="80" />
+              <Image src={item.goodsImage} width="80" height="80" lazyLoad={false} />
               <div className={'ml-2'}>
                 <div className={'text-sm font-bold'}>{item.goodsName}</div>
                 <div className={'text-gray-500 text-xs'}>数量：{item.totalNum}</div>