326 lines
9.9 KiB
TypeScript
326 lines
9.9 KiB
TypeScript
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} from "@tarojs/taro";
|
||
import {RichText, View} from '@tarojs/components'
|
||
import {ShopGoods} from "@/api/shop/shopGoods/model";
|
||
import {getShopGoods} from "@/api/shop/shopGoods";
|
||
import {listShopGoodsSpec} from "@/api/shop/shopGoodsSpec";
|
||
import {ShopGoodsSpec} from "@/api/shop/shopGoodsSpec/model";
|
||
import {listShopGoodsSku} from "@/api/shop/shopGoodsSku";
|
||
import {ShopGoodsSku} from "@/api/shop/shopGoodsSku/model";
|
||
import {Swiper} from '@nutui/nutui-react-taro'
|
||
import navTo, {wxParse} from "@/utils/common";
|
||
import SpecSelector from "@/components/SpecSelector";
|
||
import "./index.scss";
|
||
import {useCart} from "@/hooks/useCart";
|
||
|
||
const GoodsDetail = () => {
|
||
const [goods, setGoods] = useState<ShopGoods | null>(null);
|
||
const [files, setFiles] = useState<any[]>([]);
|
||
const [specs, setSpecs] = useState<ShopGoodsSpec[]>([]);
|
||
const [skus, setSkus] = useState<ShopGoodsSku[]>([]);
|
||
const [showSpecSelector, setShowSpecSelector] = useState(false);
|
||
const [specAction, setSpecAction] = useState<'cart' | 'buy'>('cart');
|
||
// const [selectedSku, setSelectedSku] = useState<ShopGoodsSku | null>(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const router = Taro.getCurrentInstance().router;
|
||
const goodsId = router?.params?.id;
|
||
|
||
// 使用购物车Hook
|
||
const {cartCount, addToCart} = useCart();
|
||
|
||
// 处理加入购物车
|
||
const handleAddToCart = () => {
|
||
if (!goods) return;
|
||
|
||
if (!Taro.getStorageSync('UserId')) {
|
||
return Taro.showToast({
|
||
title: '请先登录',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
|
||
// 如果有规格，显示规格选择器
|
||
if (specs.length > 0) {
|
||
setSpecAction('cart');
|
||
setShowSpecSelector(true);
|
||
return;
|
||
}
|
||
|
||
// 没有规格，直接加入购物车
|
||
addToCart({
|
||
goodsId: goods.goodsId!,
|
||
name: goods.name || '',
|
||
price: goods.price || '0',
|
||
image: goods.image || ''
|
||
});
|
||
};
|
||
|
||
// 处理立即购买
|
||
const handleBuyNow = () => {
|
||
if (!goods) return;
|
||
|
||
if (!Taro.getStorageSync('UserId')) {
|
||
return Taro.showToast({
|
||
title: '请先登录',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
|
||
// 如果有规格，显示规格选择器
|
||
if (specs.length > 0) {
|
||
setSpecAction('buy');
|
||
setShowSpecSelector(true);
|
||
return;
|
||
}
|
||
|
||
// 没有规格，直接购买
|
||
navTo(`/shop/orderConfirm/index?goodsId=${goods?.goodsId}`, true);
|
||
};
|
||
|
||
// 规格选择确认回调
|
||
const handleSpecConfirm = (sku: ShopGoodsSku, quantity: number, action?: 'cart' | 'buy') => {
|
||
// setSelectedSku(sku);
|
||
setShowSpecSelector(false);
|
||
|
||
if (action === 'cart') {
|
||
// 加入购物车
|
||
addToCart({
|
||
goodsId: goods!.goodsId!,
|
||
skuId: sku.id,
|
||
name: goods!.name || '',
|
||
price: sku.price || goods!.price || '0',
|
||
image: goods!.image || '',
|
||
specInfo: sku.sku, // sku字段包含规格信息
|
||
}, quantity);
|
||
} else if (action === 'buy') {
|
||
// 立即购买
|
||
const orderData = {
|
||
goodsId: goods!.goodsId!,
|
||
skuId: sku.id,
|
||
quantity,
|
||
price: sku.price || goods!.price || '0'
|
||
};
|
||
navTo(`/shop/orderConfirm/index?orderData=${encodeURIComponent(JSON.stringify(orderData))}`, true);
|
||
} else {
|
||
// 默认情况：如果action未定义，默认为立即购买
|
||
const orderData = {
|
||
goodsId: goods!.goodsId!,
|
||
skuId: sku.id,
|
||
quantity,
|
||
price: sku.price || goods!.price || '0'
|
||
};
|
||
navTo(`/shop/orderConfirm/index?orderData=${encodeURIComponent(JSON.stringify(orderData))}`, true);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (goodsId) {
|
||
setLoading(true);
|
||
|
||
// 加载商品详情
|
||
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);
|
||
})
|
||
.finally(() => {
|
||
setLoading(false);
|
||
});
|
||
|
||
// 加载商品规格
|
||
listShopGoodsSpec({goodsId: Number(goodsId)} as any)
|
||
.then((data) => {
|
||
setSpecs(data || []);
|
||
})
|
||
.catch((error) => {
|
||
console.error("Failed to fetch goods specs:", error);
|
||
});
|
||
|
||
// 加载商品SKU
|
||
listShopGoodsSku({goodsId: Number(goodsId)} as any)
|
||
.then((data) => {
|
||
setSkus(data || []);
|
||
})
|
||
.catch((error) => {
|
||
console.error("Failed to fetch goods skus:", 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
|
||
});
|
||
}
|
||
};
|
||
});
|
||
|
||
if (!goods || loading) {
|
||
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",
|
||
}}
|
||
onClick={() => Taro.switchTab({url: `/pages/cart/cart`})}>
|
||
<Badge value={cartCount} 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'} lazyLoad={false}/>
|
||
</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={() => handleAddToCart()}>加入购物车
|
||
</div>
|
||
<div className={'cart-buy pl-4 pr-5 text-sm'}
|
||
onClick={() => handleBuyNow()}>立即购买
|
||
</div>
|
||
</div>
|
||
</View>
|
||
</div>
|
||
|
||
{/* 规格选择器 */}
|
||
{showSpecSelector && (
|
||
<SpecSelector
|
||
goods={goods!}
|
||
specs={specs}
|
||
skus={skus}
|
||
action={specAction}
|
||
onConfirm={handleSpecConfirm}
|
||
onClose={() => setShowSpecSelector(false)}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default GoodsDetail;
|