gxwebsoft
/
template-10550
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

11

master
科技小王子 3 weeks ago
parent
e053062c7c
commit
e075046bae
2 changed files with 46 additions and 241 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 165
      src/pages/index/index.tsx
  2. 122
      src/shop/goodsDetail/index.tsx

165
src/pages/index/index.tsx
View File

@ -1,18 +1,13 @@
import Header from './Header'; import Header from './Header';
import BestSellers from './BestSellers'; import BestSellers from './BestSellers';
import Taro from '@tarojs/taro'; import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import {useShareAppMessage} from "@tarojs/taro" import {useShareAppMessage} from "@tarojs/taro"
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import {getShopInfo, loginByOpenId} from "@/api/layout";
import {TenantId} from "@/config/app";
import {saveStorageByLoginUser} from "@/utils/server";
import {getShopInfo} from "@/api/layout";
import {Sticky} from '@nutui/nutui-react-taro' import {Sticky} from '@nutui/nutui-react-taro'
import Menu from "./Menu"; import Menu from "./Menu";
import Banner from "./Banner"; import Banner from "./Banner";
import {checkAndHandleInviteRelation, hasPendingInvite} from "@/utils/invite"; import {checkAndHandleInviteRelation, hasPendingInvite} from "@/utils/invite";
import {showNetworkDiagnosis} from "@/utils/networkCheck";
import {BaseUrl} from "@/config/app";
import './index.scss' import './index.scss'
// import GoodsList from "./GoodsList"; // import GoodsList from "./GoodsList";
@ -20,38 +15,13 @@ import './index.scss'
function Home() { function Home() {
// 吸顶状态 // 吸顶状态
const [stickyStatus, setStickyStatus] = useState<boolean>(false) const [stickyStatus, setStickyStatus] = useState<boolean>(false)
// 页面加载状态
const [pageLoading, setPageLoading] = useState<boolean>(true)
// 初始化状态
const [initStatus, setInitStatus] = useState<{
shopInfo: boolean;
userAuth: boolean;
userLogin: boolean;
}>({
shopInfo: false,
userAuth: false,
userLogin: false
})
// 检查是否所有初始化都完成
const checkInitComplete = (newStatus: Partial<typeof initStatus>) => {
const updatedStatus = { ...initStatus, ...newStatus };
setInitStatus(updatedStatus);
const allComplete = Object.values(updatedStatus).every(status => status === true);
if (allComplete && pageLoading) {
console.log('✅ 所有初始化完成，隐藏加载状态');
setPageLoading(false);
Taro.hideLoading();
}
}
useShareAppMessage(() => { useShareAppMessage(() => {
// 获取当前用户ID，用于生成邀请链接 // 获取当前用户ID，用于生成邀请链接
const userId = Taro.getStorageSync('UserId'); const userId = Taro.getStorageSync('UserId');
return { return {
title: '时里院子市集',
title: '网宿小店 - 网宿软件',
path: userId ? `/pages/index/index?inviter=${userId}&source=share&t=${Date.now()}` : `/pages/index/index`, path: userId ? `/pages/index/index?inviter=${userId}&source=share&t=${Date.now()}` : `/pages/index/index`,
success: function () { success: function () {
console.log('首页分享成功'); console.log('首页分享成功');
@ -97,21 +67,14 @@ function Home() {
success: (res) => { success: (res) => {
if (res.authSetting['scope.userInfo']) { if (res.authSetting['scope.userInfo']) {
// 用户授权成功，可以获取用户信息 // 用户授权成功，可以获取用户信息
console.log('用户重新授权成功');
reload(); reload();
} else { } else {
// 用户拒绝授权，提示授权失败 // 用户拒绝授权，提示授权失败
console.log('用户拒绝授权');
checkInitComplete({ userLogin: true });
Taro.showToast({ Taro.showToast({
title: '授权失败', title: '授权失败',
icon: 'none' icon: 'none'
}); });
} }
},
fail: (error) => {
console.error('打开设置页面失败:', error);
checkInitComplete({ userLogin: true });
} }
}); });
}; };
@ -123,80 +86,14 @@ function Home() {
} }
const reload = () => { const reload = () => {
console.log('开始执行登录流程...');
Taro.login({
success: (res) => {
console.log('微信登录成功，code:', res.code);
// 调用后端登录接口
loginByOpenId({
code: res.code,
tenantId: TenantId
}).then(async data => {
console.log('后端登录成功:', data);
if (data) {
// 保存用户信息到本地存储
saveStorageByLoginUser(data.access_token, data.user);
// 标记登录完成
checkInitComplete({ userLogin: true });
Taro.showToast({
title: '登录成功',
icon: 'success',
duration: 2000
});
console.log('✅ 用户登录完成');
} else {
throw new Error('登录返回数据为空');
}
}).catch(error => {
console.error('后端登录失败:', error);
// 即使登录失败也标记为完成，避免一直加载
checkInitComplete({ userLogin: true });
Taro.showToast({
title: '登录失败，请重试',
icon: 'error',
duration: 3000
});
});
},
fail: (error) => {
console.error('微信登录失败:', error);
Taro.showToast({
title: '微信登录失败',
icon: 'error',
duration: 3000
});
}
});
}; };
useEffect(() => { useEffect(() => {
console.log('=== 首页初始化开始 ===');
// 显示加载提示
Taro.showLoading({
title: '加载中...',
mask: true
});
// 获取站点信息 // 获取站点信息
console.log('开始获取站点信息...');
getShopInfo().then((data) => {
console.log('站点信息获取成功:', data);
checkInitComplete({ shopInfo: true });
}).catch((error) => {
console.error('站点信息获取失败:', error);
// 即使失败也标记为完成，避免一直加载
checkInitComplete({ shopInfo: true });
// 显示错误提示
Taro.showToast({
title: '获取站点信息失败',
icon: 'error',
duration: 3000
});
});
getShopInfo().then(() => {
})
// 检查是否有待处理的邀请关系 - 异步处理，不阻塞页面加载 // 检查是否有待处理的邀请关系 - 异步处理，不阻塞页面加载
if (hasPendingInvite()) { if (hasPendingInvite()) {
@ -229,33 +126,17 @@ function Home() {
} }
// Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。 // Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
console.log('开始检查用户授权状态...');
Taro.getSetting({ Taro.getSetting({
success: (res) => { success: (res) => {
console.log('授权状态检查结果:', res.authSetting);
checkInitComplete({ userAuth: true });
if (res.authSetting['scope.userInfo']) { if (res.authSetting['scope.userInfo']) {
// 用户已经授权过，可以直接获取用户信息 // 用户已经授权过，可以直接获取用户信息
console.log('✅ 用户已经授权过，开始登录流程');
console.log('用户已经授权过，可以直接获取用户信息')
reload(); reload();
} else { } else {
// 用户未授权，需要弹出授权窗口 // 用户未授权，需要弹出授权窗口
console.log('❌ 用户未授权，显示授权弹窗');
console.log('用户未授权，需要弹出授权窗口')
showAuthModal(); showAuthModal();
// 即使未授权也标记登录为完成，避免一直加载
checkInitComplete({ userLogin: true });
} }
},
fail: (error) => {
console.error('获取授权状态失败:', error);
// 标记为完成，避免一直加载
checkInitComplete({ userAuth: true, userLogin: true });
Taro.showToast({
title: '获取授权状态失败',
icon: 'error',
duration: 3000
});
} }
}); });
// 获取用户信息 // 获取用户信息
@ -267,38 +148,6 @@ function Home() {
}); });
}, []); }, []);
// 如果还在加载中，显示加载页面
if (pageLoading) {
return (
<View className="flex flex-col items-center justify-center min-h-screen bg-gray-50 p-4">
<View className="text-center">
<View className="mb-6">
<View className="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-500 mx-auto"></View>
</View>
<View className="text-lg text-gray-700 mb-4">加载中...</View>
<View className="text-sm text-gray-500 mb-6 space-y-1">
<Text>站点信息: {initStatus.shopInfo ? '✅ 完成' : '⏳ 加载中'}</Text>
<Text>用户授权: {initStatus.userAuth ? '✅ 完成' : '⏳ 检查中'}</Text>
<Text>用户登录: {initStatus.userLogin ? '✅ 完成' : '⏳ 登录中'}</Text>
</View>
{/* 如果加载时间过长，显示帮助按钮 */}
<View className="space-y-3">
<View
className="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm"
onClick={() => showNetworkDiagnosis(BaseUrl)}
>
网络诊断
</View>
<View className="text-xs text-gray-400">
如果长时间无响应，请点击网络诊断
</View>
</View>
</View>
</View>
);
}
return ( return (
<> <>
<Sticky threshold={0} onChange={() => onSticky(arguments)}> <Sticky threshold={0} onChange={() => onSticky(arguments)}>

122
src/shop/goodsDetail/index.tsx
View File

@ -24,7 +24,6 @@ const GoodsDetail = () => {
const [specAction, setSpecAction] = useState<'cart' | 'buy'>('cart'); const [specAction, setSpecAction] = useState<'cart' | 'buy'>('cart');
// const [selectedSku, setSelectedSku] = useState<ShopGoodsSku | null>(null); // const [selectedSku, setSelectedSku] = useState<ShopGoodsSku | null>(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const router = Taro.getCurrentInstance().router; const router = Taro.getCurrentInstance().router;
const goodsId = router?.params?.id; const goodsId = router?.params?.id;
@ -118,57 +117,48 @@ const GoodsDetail = () => {
} }
}; };
// 重新加载数据的函数
const reloadData = async () => {
if (!goodsId) return;
setLoading(true);
setError(null);
try {
// 设置超时时间
const timeout = new Promise((_, reject) =>
setTimeout(() => reject(new Error('请求超时')), 10000)
);
useEffect(() => {
if (goodsId) {
setLoading(true);
// 加载商品详情 // 加载商品详情
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;
});
// 等待商品详情加载完成（带超时）
await Promise.race([goodsPromise, timeout]);
// 并行加载规格和SKU（不阻塞主要内容显示）
Promise.all([
listShopGoodsSpec({goodsId: Number(goodsId)} as any)
.then((data) => setSpecs(data || []))
.catch((error) => console.error("Failed to fetch goods specs:", 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);
})
.finally(() => {
setLoading(false);
});
listShopGoodsSku({goodsId: Number(goodsId)} as any)
.then((data) => setSkus(data || []))
.catch((error) => console.error("Failed to fetch goods skus:", error))
]);
// 加载商品规格
listShopGoodsSpec({goodsId: Number(goodsId)} as any)
.then((data) => {
setSpecs(data || []);
})
.catch((error) => {
console.error("Failed to fetch goods specs:", error);
});
} catch (error: any) {
console.error("Failed to fetch goods detail:", error);
setError(error.message || '加载失败，请重试');
} finally {
setLoading(false);
// 加载商品SKU
listShopGoodsSku({goodsId: Number(goodsId)} as any)
.then((data) => {
setSkus(data || []);
})
.catch((error) => {
console.error("Failed to fetch goods skus:", error);
});
} }
};
useEffect(() => {
reloadData();
}, [goodsId]); }, [goodsId]);
// 分享给好友 // 分享给好友
@ -196,42 +186,8 @@ const GoodsDetail = () => {
}; };
}); });
// 错误状态
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>
);
if (!goods || loading) {
return <div>加载中...</div>;
} }
return ( return (

Write Preview
Loading…
Cancel
Save