fix(wxapp): 修复首页分享链接白屏问题
- 添加邀请关系处理的超时保护,避免长时间等待 - 优化 API调用流程,增加错误处理机制 - 改进页面加载逻辑,确保主要内容优先显示 - 新增失败重试计数,防止无限重试 - 清理邀请参数缓存,避免重复处理
This commit is contained in:
@@ -24,6 +24,7 @@ const GoodsDetail = () => {
|
||||
const [specAction, setSpecAction] = useState<'cart' | 'buy'>('cart');
|
||||
// const [selectedSku, setSelectedSku] = useState<ShopGoodsSku | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const router = Taro.getCurrentInstance().router;
|
||||
const goodsId = router?.params?.id;
|
||||
|
||||
@@ -117,48 +118,57 @@ const GoodsDetail = () => {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (goodsId) {
|
||||
setLoading(true);
|
||||
// 重新加载数据的函数
|
||||
const reloadData = async () => {
|
||||
if (!goodsId) return;
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// 设置超时时间
|
||||
const timeout = new Promise((_, reject) =>
|
||||
setTimeout(() => reject(new Error('请求超时')), 10000)
|
||||
);
|
||||
|
||||
// 加载商品详情
|
||||
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);
|
||||
});
|
||||
const goodsPromise = 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);
|
||||
}
|
||||
return res;
|
||||
});
|
||||
|
||||
// 加载商品规格
|
||||
listShopGoodsSpec({goodsId: Number(goodsId)} as any)
|
||||
.then((data) => {
|
||||
setSpecs(data || []);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to fetch goods specs:", error);
|
||||
});
|
||||
// 等待商品详情加载完成(带超时)
|
||||
await Promise.race([goodsPromise, timeout]);
|
||||
|
||||
// 加载商品SKU
|
||||
listShopGoodsSku({goodsId: Number(goodsId)} as any)
|
||||
.then((data) => {
|
||||
setSkus(data || []);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to fetch goods skus:", error);
|
||||
});
|
||||
// 并行加载规格和SKU(不阻塞主要内容显示)
|
||||
Promise.all([
|
||||
listShopGoodsSpec({goodsId: Number(goodsId)} as any)
|
||||
.then((data) => setSpecs(data || []))
|
||||
.catch((error) => console.error("Failed to fetch goods specs:", error)),
|
||||
|
||||
listShopGoodsSku({goodsId: Number(goodsId)} as any)
|
||||
.then((data) => setSkus(data || []))
|
||||
.catch((error) => console.error("Failed to fetch goods skus:", error))
|
||||
]);
|
||||
|
||||
} catch (error: any) {
|
||||
console.error("Failed to fetch goods detail:", error);
|
||||
setError(error.message || '加载失败,请重试');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
reloadData();
|
||||
}, [goodsId]);
|
||||
|
||||
// 分享给好友
|
||||
@@ -186,8 +196,42 @@ const GoodsDetail = () => {
|
||||
};
|
||||
});
|
||||
|
||||
if (!goods || loading) {
|
||||
return <div>加载中...</div>;
|
||||
// 错误状态
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen p-4">
|
||||
<div className="text-center">
|
||||
<div className="text-6xl mb-4">😵</div>
|
||||
<div className="text-lg font-medium mb-2">页面加载失败</div>
|
||||
<div className="text-gray-500 mb-6">{error}</div>
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
className="bg-blue-500 text-white px-6 py-2 rounded-lg"
|
||||
onClick={reloadData}
|
||||
>
|
||||
重新加载
|
||||
</button>
|
||||
<button
|
||||
className="bg-gray-500 text-white px-6 py-2 rounded-lg ml-3"
|
||||
onClick={() => Taro.navigateBack()}
|
||||
>
|
||||
返回上页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 加载状态 - 使用更好的加载UI
|
||||
if (loading || !goods) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
|
||||
<div className="text-gray-600">正在加载商品信息...</div>
|
||||
<div className="text-sm text-gray-400 mt-2">请稍候</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user