glt-taro/src/shop/goodsDetail/index.tsx

import {useEffect, useState} from "react";
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 {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) => {
          // 处理富文本内容，去掉图片间距
          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={
          "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>
                <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>
        </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>
  );
};

export default GoodsDetail;