修复已知问题

src/shop/goodsDetail/index.tsx

@@ -1,70 +1,193 @@
 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 {Image, Divider, Badge} from "@nutui/nutui-react-taro";
+import {ArrowLeft, Headphones, Share, Cart} from "@nutui/icons-react-taro";
+import Taro, {useShareAppMessage, useShareTimeline} from "@tarojs/taro";
+import {RichText, View} from '@tarojs/components'
 import {ShopGoods} from "@/api/shop/shopGoods/model";
 import {getShopGoods} from "@/api/shop/shopGoods";
-import './index.scss'
+import {Swiper} from '@nutui/nutui-react-taro'
+import {wxParse} from "@/utils/common";
+import "./index.scss";
 
 const GoodsDetail = () => {
   const [goods, setGoods] = useState<ShopGoods | null>(null);
+  const [files, setFiles] = useState<any[]>([]);
   const router = Taro.getCurrentInstance().router;
   const goodsId = router?.params?.id;
 
   useEffect(() => {
     if (goodsId) {
-      getShopGoods(Number(goodsId)).then(res => {
-        setGoods(res);
-      }).catch(error => {
-        console.error("Failed to fetch goods detail:", error);
-      });
+      getShopGoods(Number(goodsId))
+        .then((res) => {
+          // 处理富文本内容，去掉图片间距
+          if (res.content) {
+            res.content = wxParse(res.content);
+          }
+          setGoods(res);
+          if (res.files) {
+            const arr = JSON.parse(res.files);
+            arr.length > 0 && setFiles(arr);
+          }
+
+        })
+        .catch((error) => {
+          console.error("Failed to fetch goods detail:", error);
+        });
     }
   }, [goodsId]);
 
+  // 分享给好友
+  useShareAppMessage(() => {
+    return {
+      title: goods?.name || '精选商品',
+      path: `/shop/goodsDetail/index?id=${goodsId}`,
+      imageUrl: goods?.image, // 分享图片
+      success: function (res: any) {
+        console.log('分享成功', res);
+        Taro.showToast({
+          title: '分享成功',
+          icon: 'success',
+          duration: 2000
+        });
+      },
+      fail: function (res: any) {
+        console.log('分享失败', res);
+        Taro.showToast({
+          title: '分享失败',
+          icon: 'none',
+          duration: 2000
+        });
+      }
+    };
+  });
+
+  // 分享到朋友圈
+  useShareTimeline(() => {
+    return {
+      title: `${goods?.name || '精选商品'} - 云上商店`,
+      path: `/shop/goodsDetail/index?id=${goodsId}`,
+      imageUrl: goods?.image
+    };
+  });
+
   if (!goods) {
     return <div>加载中...</div>;
   }
 
   return (
-    <div className={'py-0'}>
-      <div className={'flex flex-col justify-between items-center rounded-lg px-2'}>
-        <div className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}>
-          <Image src={goods.image} mode={'scaleToFill'}
-                 radius="10px 10px 0 0" height="300"/>
-          <div className={'flex flex-col p-2 rounded-lg'}>
-            <div>
-              <div className={'car-no text-sm'}>{goods.name} #{goods.goodsId}</div>
-              <div className={'flex justify-between text-xs py-1'}>
-                <span className={'text-orange-500'}>丰江桥佛手瓜面，非油炸，Q弹爽口，营养丰</span>
-                <span className={'text-gray-400'}>已售 {goods.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={"py-0"}>
+      <div
+        className={
+          "fixed z-10 bg-white flex justify-center items-center font-bold shadow-sm opacity-70"
+        }
+        style={{
+          borderRadius: "100%",
+          width: "32px",
+          height: "32px",
+          top: "50px",
+          left: "10px",
+        }}
+        onClick={() => Taro.navigateBack()}
+      >
+        <ArrowLeft size={14}/>
+      </div>
+      <div className={
+        "fixed z-10 bg-white flex justify-center items-center font-bold shadow-sm opacity-90"
+      }
+           style={{
+             borderRadius: "100%",
+             width: "32px",
+             height: "32px",
+             top: "50px",
+             right: "110px",
+           }}>
+        <Badge value={8} top="-2" right="2">
+          <div style={{display: 'flex', alignItems: 'center'}}>
+            <Cart size={16}/>
+          </div>
+        </Badge>
+      </div>
+      {
+        files.length > 0 && (
+          <Swiper defaultValue={0} indicator height={'350px'}>
+            {files.map((item) => (
+              <Swiper.Item key={item}>
+                <Image width="100%" height={'100%'} src={item.url} mode={'scaleToFill'}/>
+              </Swiper.Item>
+            ))}
+          </Swiper>
+        )
+      }
+      {
+        files.length == 0 && (
+          <Image
+            src={goods.image}
+            mode={"scaleToFill"}
+            radius="10px 10px 0 0"
+            height="300"
+          />
+        )
+      }
+      <div
+        className={"flex flex-col justify-between items-center rounded-lg px-2"}
+      >
+        <div
+          className={
+            "flex flex-col rounded-lg bg-white shadow-sm w-full mt-2"
+          }
+        >
+          <div className={"flex flex-col p-2 rounded-lg"}>
+            <>
+              <div className={'flex justify-between'}>
                 <div className={'flex text-red-500 text-xl items-baseline'}>
                   <span className={'text-xs'}>￥</span>
                   <span className={'font-bold text-2xl'}>{goods.price}</span>
                 </div>
-                <div className={'buy-btn'} onClick={() => Taro.navigateTo({url: '/shop/orderConfirm/index?goodsId=' + goods.goodsId})}>
-                  <div className={'cart-icon'}><Cart size={20} className={'mx-4 mt-2'} /></div>
-                  <div className={'text-white pl-4 pr-5'}>购买</div>
+                <span className={"text-gray-400 text-xs"}>已售 {goods.sales}</span>
+              </div>
+              <div className={'flex justify-between items-center'}>
+                <div className={'goods-info'}>
+                  <div className={"car-no text-lg"}>
+                    {goods.name}
+                  </div>
+                  <div className={"flex justify-between text-xs py-1"}>
+                <span className={"text-orange-500"}>
+                  {goods.comments}
+                </span>
+                  </div>
                 </div>
+                <button
+                  className={'flex flex-col  justify-center items-center text-gray-500 px-1 gap-1 text-nowrap whitespace-nowrap'}
+                  open-type="share"><Share
+                  size={20}/>
+                  <span className={'text-xs'}>分享</span>
+                </button>
               </div>
-              <div className={'py-2'}>
-                <h3>商品详情</h3>
-                <div dangerouslySetInnerHTML={{ __html: goods.content || '' }} />
-              </div>
-            </div>
+            </>
           </div>
         </div>
+        <div className={"mt-2 py-2"}>
+          <Divider>商品详情</Divider>
+          <RichText nodes={goods.content || '内容详情'}/>
+        </div>
+      </div>
+      {/*底部购买按钮*/}
+      <div className={'fixed bg-white w-full bottom-0 left-0 pt-4 pb-10'}>
+        <View className={'btn-bar flex justify-between items-center'}>
+          <div className={'flex justify-center items-center mx-4'}>
+            <button open-type="contact" className={'flex items-center'}>
+              <Headphones size={18} style={{marginRight: '4px'}}/>咨询
+            </button>
+          </div>
+          <div className={'buy-btn mx-4'}>
+            <div className={'cart-add px-4 text-sm'}
+                 onClick={() => Taro.showToast({title: '加入购物车成功', icon: 'success'})}>加入购物车
+            </div>
+            <div className={'cart-buy pl-4 pr-5 text-sm'}
+                 onClick={() => Taro.navigateTo({url: '/shop/orderConfirm/index'})}>立即购买
+            </div>
+          </div>
+        </View>
       </div>
     </div>
   );