template-10584/src/shop/goodsDetail/index.tsx

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 {getShopGoods} from "@/api/shop/shopGoods";
import './index.scss'

const GoodsDetail = () => {
  const [goods, setGoods] = useState<ShopGoods | null>(null);
  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);
      });
    }
  }, [goodsId]);

  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={'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>
                </div>
              </div>
              <div className={'py-2'}>
                <h3>商品详情</h3>
                <div dangerouslySetInnerHTML={{ __html: goods.content || '' }} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default GoodsDetail;