vist_go_uniApp/pages/index/indexNew.vue

<template>
	<view class="container">
		<!-- 固定顶部导航栏 -->
		<view class="fixed-header" :class="{'show-fixed': showFixed}">
			<view class="status_bar" :style="{height: statusBarHeight + 'px'}">
				<view class="top_view"></view>
			</view>
			<view class="nav-content">
				<view class="left-section">
					<view class="logo-container">
						<image class="logo-image"
							src="https://ndtk.tos-cn-guangzhou.volces.com/uploads/156adea827104e38ae0e25ec4701ecfe.jpg"
							mode="aspectFit"></image>
						<text class="logo-text">宏匠</text>
					</view>
				</view>
				<view class="right-section">
					<view class="fixed-search-bar" @click="goSearch">
						<view class="search-icon-wrapper">
							<image class="search-icon" src="/static/images/search.png"></image>
						</view>
						<view class="search-input">搜索</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 原始顶部导航栏 -->
		<view class="header">
			<view class="status_bar" :style="{height: statusBarHeight + 'px'}">
				<view class="top_view"></view>
			</view>
			<view class="header-content">
				<view class="logo-section">
					<view class="logo-container">
						<image class="logo-image"
							src="https://ndtk.tos-cn-guangzhou.volces.com/uploads/156adea827104e38ae0e25ec4701ecfe.jpg"
							mode="aspectFit"></image>
						<text class="logo-text">宏匠</text>
					</view>
					<view class="sub-title">传承千年唐卡艺术</view>
				</view>
				<view class="search-bar" @click="goSearch">
					<view class="search-icon-wrapper">
						<image class="search-icon" src="/static/images/search.png"></image>
					</view>
					<view class="search-input">寻找心仪的唐卡</view>
				</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="swiper-section">
			<view class="swiper-container">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="800"
					indicator-color="rgba(139,69,19,0.3)" indicator-active-color="#8B4513">
					<swiper-item v-for="(item, index) in bannerList" :key="index" @click="handleBannerClick(item)">
						<image class="swiper-image" :src="item.image" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 爆款产品 -->
		<view class="hot-section">
			<view class="hot-header">
				<text class="hot-title">🔥 爆款唐卡</text>
				<view class="hot-decoration"></view>
			</view>
			<view class="hot-grid">
				<view class="hot-item" v-for="(item, index) in menuList" :key="index" @click="goCategory(item)">
					<view class="hot-icon-wrapper">
						<image class="hot-icon" :src="item.image" mode="aspectFit"></image>
						<view class="hot-badge">热</view>
						<view class="hot-glow"></view>
					</view>
					<text class="hot-name">{{item.title}}</text>
				</view>
			</view>
		</view>

		<!-- 成为代理商品 -->
		<view class="product-section agent-section">
			<view class="section-header">
				<view class="section-title">
					<text class="title-text">代理专享</text>
					<view class="title-decoration">
						<view class="decoration-line"></view>
						<image class="decoration-symbol" src="/static/images/zhuwang.png" mode="aspectFit"></image>
						<view class="decoration-line"></view>
					</view>
				</view>
				<view class="section-subtitle">传承千年工艺，开启艺术创业之路</view>
			</view>

			<view class="product-list">
				<view class="product-item agent-item" v-for="(item, index) in agentProducts" :key="index"
					@click="goDetail(item.id)">
					<view class="product-image-container">
						<image class="product-image" :src="item.images" mode="aspectFill"></image>
						<view class="agent-badge">代理专享</view>
					</view>
					<view class="product-content">
						<view class="product-name">{{item.name}}</view>
						<view class="product-meta">
							<view class="update-time">{{item.spec}}</view>
							<view class="sold-count">已售{{item.soldCount}}件</view>
						</view>
						<view class="product-footer">
							<view class="price-section">
								<text class="price-symbol">¥</text>
								<text class="price-value">{{item.price}}</text>
							</view>
							<view class="buy-btn agent-btn" @click.stop="goDetail(item.id)">
								<text class="buy-text">申请代理</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 精选商品 -->
		<view class="product-section selected-section">
			<view class="section-header">
				<view class="section-title">
					<text class="title-text">精选唐卡</text>
					<view class="title-decoration">
						<view class="decoration-line"></view>
						<image class="decoration-symbol" src="/static/images/zhuwang.png" mode="aspectFit"></image>
						<view class="decoration-line"></view>
					</view>
				</view>
				<view class="section-subtitle">匠心之作，艺术臻品</view>
			</view>

			<view class="selected-product-grid">
				<view class="selected-product-card" v-for="(item, index) in selectedProducts" :key="index"
					@click="goDetail(item.id)">
					<view class="selected-product-image-wrapper">
						<image class="selected-product-image" :src="item.images" mode="aspectFill"></image>
						<view class="selected-product-badge" v-if="item.soldCount > 100">热销</view>
					</view>
					<view class="selected-product-info">
						<view class="selected-product-name">{{item.name}}</view>
						<view class="selected-product-desc">{{item.spec}}</view>
						<view class="selected-product-meta">
							<view class="rating">
								<text class="rating-star">★</text>
								<text class="rating-value">{{ item.productAvg.toFixed(1) }}</text>
							</view>
							<view class="selected-sold-count">已售{{item.soldCount}}件</view>
						</view>
						<view class="selected-product-footer">
							<view class="selected-price-section">
								<text class="selected-price-symbol">¥</text>
								<text class="selected-price-value">{{item.price}}</text>
							</view>
							<view class="selected-buy-btn" @click.stop="goDetail(item.id)">
								<text class="selected-buy-text">立即购买</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多按钮 -->
			<view class="load-more-section" v-if="selectedHasMore && selectedProducts.length > 0">
				<view class="load-more-btn" @click="loadMoreSelectedProducts" :class="{'loading': isLoading}">
					<text v-if="!isLoading">查看更多</text>
					<text v-else>加载中...</text>
				</view>
			</view>

			<!-- 没有更多数据提示 -->
			<view class="no-more-tip" v-if="!selectedHasMore && selectedProducts.length > 0">
				<text>~ 已经到底啦 ~</text>
			</view>
		</view>

		<!-- 底部装饰 -->
		<view class="bottom-decoration">
			<view class="decoration-pattern"></view>
		</view>

		<!-- 邀请弹框 -->
		<view class="invitation-modal" v-if="showInvitationModal" @click="closeInvitationModal">
			<view class="modal-content" @click.stop="">
				<view class="modal-header">
					<text class="modal-title">🎉 邀请通知</text>
					<view class="close-btn" @click="closeInvitationModal">✕</view>
				</view>

				<view class="modal-body">
					<view class="inviter-info">
						<image class="inviter-avatar" :src="inviterInfo.avatar || '/static/images/avatar.png'"
							mode="aspectFill"></image>
						<view class="inviter-details">
							<text class="inviter-name">{{ inviterInfo.account || '好友' }}</text>
							<text class="inviter-desc">邀请您成为下级用户</text>
						</view>
					</view>

					<view class="invitation-desc">
						<text class="desc-text" v-if="isLogin">接受邀请后，您将成为该用户的下级。</text>
						<text class="desc-text" v-else>接受邀请后，您将成为该用户的下级。请先登录以完成邀请接受。</text>
					</view>
				</view>

				<view class="modal-footer">
					<button class="reject-btn" @click="rejectInvitation">拒绝</button>
					<button class="accept-btn" @click="acceptInvitation">
						<text v-if="isLogin">接受邀请</text>
						<text v-else>登录并接受</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		carouselQueryAll,
		wxLogin,
		getIndexMenu,
		getNewProducts,
		getAgentProducts,
		getSelectedProducts,
		userLogin,
		getMemberDetail,
		getIndexMemberDetail,
		acceptInvitation,
		rejectInvitation,
		getPendingInvitations
	} from '@/config/api.js';
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import {
		shareImg
	} from '@/common/config.js'
	export default {
		data() {
			return {
				bannerList: [],
				menuList: [],
				agentProducts: [], // 代理商品列表
				selectedProducts: [], // 精选商品列表
				selectedParams: {
					current: 1,
					size: 6,
					name: ''
				},
				selectedTotal: 0, // 精选商品总数
				selectedHasMore: true, // 是否还有更多精选商品
				params: {
					current: 1,
					size: 10,
					name: '',
					sort: '',
					arrow: ''
				},
				isLoading: false, // 是否正在加载
				noMoreData: false, // 是否没有更多数据
				showFixed: false, // 是否显示固定顶部
				scrollTop: 0, // 当前滚动位置
				statusBarHeight: 0,
				// 邀请相关
				showInvitationModal: false, // 是否显示邀请弹框
				inviterInfo: {}, // 邀请人信息
				inviterId: null, // 邀请人ID
				hasProcessedUrlInvitation: false, // 是否已处理URL中的邀请
			}
		},
		computed: {
			...mapGetters(['isLogin'])
		},
		onLoad(options) {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			// 计算导航栏总高度 (状态栏 + 导航栏实际高度)
			this.navTotalHeight = this.statusBarHeight + 90; // 状态栏 + 导航栏高度

			// 处理邀请参数
			console.log('页面加载参数:', options);
			if (options.inviter) {
				console.log('发现邀请人ID:', options.inviter);
				this.inviterId = options.inviter;
			}

			this.refresh();
		},
		// 微信小程序分享配置
		onShareAppMessage() {
			return {
				title: `邀请您加入宏匠唐卡`,
				path: `/pages/index/indexNew`,
				imageUrl: shareImg // 分享图片，需要添加
			}
		},
		onShareTimeline(res) {
			let that = this;
			let shareInfo = store.state.vuex_shareInfo;
			let query = shareInfo.query;
			//携带当前页面资源ID参数
			let currentPage = getCurrentPages()[getCurrentPages().length - 1];
			let options = currentPage.options;
			if (JSON.stringify(options) != '{}' && options.id) {
				query += `&id=${options.id}`;
			}

			return {
				title: shareInfo.title,
				query: query,
				imageUrl: shareImg,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				},
				complete() {}
			}
		},
		onShow() {
			console.log('onShow 触发，当前 inviterId =', this.inviterId);
			// #ifdef H5
			this.login()
			// #endif

			// 检查是否有邀请
			this.checkInvitation();
		},

		onReady() {
			console.log('onReady 触发，当前 inviterId =', this.inviterId);
			// 页面渲染完成后也检查一次邀请，确保弹框能正常显示
			setTimeout(() => {
				console.log('onReady 延时触发 checkInvitation，当前 inviterId =', this.inviterId);
				this.checkInvitation();
			}, 500);
		},
		onPullDownRefresh() {
			this.refresh()
			uni.stopPullDownRefresh();
		},
		onPageScroll(e) {
			// 获取当前滚动位置
			this.scrollTop = e.scrollTop;
			// 当滚动超过200时显示固定顶部
			this.showFixed = this.scrollTop > 200;
		},

		methods: {

			...mapActions(['setToken', 'setUserInfo']),
			refresh() {
				this.getShufflingList();
				this.getMenuList();
				this.getProductList();
			},
			// 获取菜单列表
			getMenuList() {
				getIndexMenu().then(res => {
					if (res.code === 200) {
						// 按sort字段排序
						console.log(res.data)
						this.menuList = res.data.sort((a, b) => a.sort - b.sort);
					}
				})
			},

			getShufflingList() {
				carouselQueryAll().then(res => {
					if (res.code === 200) {
						this.bannerList = res.data;
					}
				});
			},

			goSearch() {
				uni.navigateTo({
					url: '/packageShop/pages/search/index?type=1'
				});
			},
			login() {
				let params = {
					username: "USER082927",
					grant_type: "web",
					memberId: "1957060037088083973"

				}
				userLogin(params).then((loginData) => {
					uni.setStorageSync('access_token', loginData.access_token);
					uni.setStorageSync('refresh_token', loginData.refresh_token);
					uni.setStorageSync('user', loginData);

					this.$store.commit('isLogin', true);
					this.$store.commit('refresh_token', loginData.refresh_token);
				})
			},
			goCategory(item) {
				if (!item) return;

				switch (item.dataType) {
					case 0: // 普通页面路径
						if (item.path) {
							uni.navigateTo({
								url: item.path
							});
						}
						break;

					case 1: // 文章内容
						if (item.id) {
							uni.navigateTo({
								url: '/packageShop/pages/article/detail?id=' + item.id
							});
						}
						break;

					case 2: // 底部导航栏路径
						if (item.path) {
							uni.switchTab({
								url: item.path
							});
						}
						break;

					default:
						console.log('未知的跳转类型');
				}
			},

			handleBannerClick(item) {
				if (item.path) {
					uni.navigateTo({
						url: item.path
					});
				}
			},

			handleLogin() {
				uni.navigateTo({
					url: '/packageUser/pages/login/index'
				});
			},

			/**
			 * 加载代理商品列表
			 */
			loadAgentProducts() {
				getAgentProducts({}).then(res => {
					if (res.code === 200) {
						// 处理代理商品数据
						this.agentProducts = res.data.filter(item => item.shelfLife === 1).map(item => ({
							id: item.id,
							images: item.images,
							name: item.name,
							spec: `库存：${item.stock}`,
							updateTime: item.updateTime.split(' ')[0].replace(/-/g, '月').substring(5) +
								'日',
							price: item.price,
							soldCount: item.salesTotal,
							productType: item.productType,
							productAvg: parseFloat(item.productAvg) || 0
						}));
					} else {
						uni.showToast({
							title: res.msg || '获取代理商品失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('获取代理商品失败:', err);
					uni.showToast({
						title: '获取代理商品失败',
						icon: 'none'
					});
				});
			},

			/**
			 * 加载精选唐卡商品列表
			 */
			loadSelectedProducts(loadMore = false) {
				if (!loadMore) {
					uni.showLoading({
						title: '加载中...'
					});
				}

				getSelectedProducts(this.selectedParams).then(res => {
					if (res.code === 200) {
						const productList = res.data.records.filter(item => item.shelfLife === 1).map(item => ({
							id: item.id,
							images: item.images,
							name: item.name,
							spec: `库存：${item.stock}`,
							updateTime: item.updateTime.split(' ')[0].replace(/-/g, '月').substring(5) +
								'日',
							price: item.price,
							soldCount: item.salesTotal,
							productType: item.productType,
							productAvg: parseFloat(item.productAvg) || 0
						}));

						if (loadMore) {
							// 加载更多，追加数据
							this.selectedProducts = [...this.selectedProducts, ...productList];
						} else {
							// 初始加载或刷新
							this.selectedProducts = productList;
						}

						// 更新分页信息
						this.selectedTotal = res.data.total;
						this.selectedHasMore = this.selectedParams.current < res.data.pages;
					} else {
						uni.showToast({
							title: res.msg || '获取精选商品失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('获取精选商品失败:', err);
					uni.showToast({
						title: '获取精选商品失败',
						icon: 'none'
					});
				}).finally(() => {
					if (!loadMore) {
						uni.hideLoading();
					}
				});
			},

			/**
			 * 加载更多精选商品
			 */
			loadMoreSelectedProducts() {
				if (!this.selectedHasMore || this.isLoading) {
					return;
				}

				this.isLoading = true;
				this.selectedParams.current++;
				this.loadSelectedProducts(true);

				setTimeout(() => {
					this.isLoading = false;
				}, 1000);
			},

			/**
			 * 获取商品列表（入口方法）
			 */
			getProductList() {
				// 并行加载代理商品和精选商品
				this.loadAgentProducts();
				this.loadSelectedProducts();
			},

			// 跳转到商品详情页
			goDetail(id) {
				uni.navigateTo({
					url: '/packageShop/pages/detail/index?id=' + id
				});
			},

			// 检查邀请
			async checkInvitation() {
				console.log('开始检查邀请, inviterId:', this.inviterId);

				// 1. 优先检查URL参数中的邀请人ID（分享链接方式）
				if (this.inviterId && !this.hasProcessedUrlInvitation) {
					console.log('处理URL中的邀请人ID:', this.inviterId);
					const urlInviterId = this.inviterId;
					this.hasProcessedUrlInvitation = true; // 标记已处理，避免重复处理
					await this.showInvitationDialog(urlInviterId, 'share');
					return; // 处理了分享链接邀请就不再检查其他邀请
				}

				// 2. 检查本地存储中是否有待处理的邀请
				const pendingInvitation = uni.getStorageSync('pendingInvitation');
				console.log('本地存储的待处理邀请:', pendingInvitation);
				if (pendingInvitation && pendingInvitation.inviterId) {
					await this.showInvitationDialog(pendingInvitation.inviterId, 'local');
					uni.removeStorageSync('pendingInvitation');
					return;
				}

				// 3. 查询后端是否有待处理的邀请记录（账号邀请方式）
				await this.checkPendingInvitationsFromServer();
			},

			// 查询后端待处理邀请记录
			async checkPendingInvitationsFromServer() {
				try {
					// 获取当前用户信息
					const currentUser = uni.getStorageSync('user');

					console.log('当前用户信息:', currentUser ? currentUser.account : '未登录'); // 调试日志
					if (!currentUser || !currentUser.account) {
						console.log('用户未登录，跳过查询后端邀请');
						return;
					}

					// 检查是否已有推荐人
					if (currentUser.parentId) {
						console.log('用户已有推荐人，跳过查询邀请', currentUser);
						return;
					}

					console.log('查询后端待处理邀请记录...');
					const res = await getPendingInvitations();

					if (res.code === 200 && res.data && res.data.length > 0) {
						console.log('发现待处理邀请:', res.data);
						// 取第一个待处理的邀请（按时间倒序，最新的在前面）
						const latestInvitation = res.data[0];
						await this.showInvitationDialog(latestInvitation.inviterId, 'server', latestInvitation);
					} else {
						console.log('没有待处理的邀请记录');
					}
				} catch (error) {
					console.error('查询待处理邀请失败:', error);
				}
			},

			// 显示邀请弹框
			async showInvitationDialog(inviterId, source = 'unknown', invitationData = null) {
				try {
					console.log(`显示邀请弹框 - 来源: ${source}, 邀请人ID: ${inviterId}`);

					// 获取当前用户信息
					const currentUser = uni.getStorageSync('user');
					console.log('当前用户信息:', currentUser); // 调试日志

					// 检查用户是否已有推荐人（仅在用户已登录时检查）
					if (currentUser && currentUser.account && currentUser.parentId) {
						console.log('用户已有推荐人，不显示邀请弹框');
						return; // 已有推荐人，不显示邀请弹框
					}

					// 如果用户未登录，保存邀请信息到本地存储，但仍然显示邀请弹框
					if (!currentUser || !currentUser.account) {
						console.log('用户未登录，保存邀请信息到本地存储并显示邀请弹框');
						uni.setStorageSync('pendingInvitation', {
							inviterId
						});
					}

					// 先设置邀请者ID，确保后续操作能够使用
					this.inviterId = inviterId;
					console.log('设置 this.inviterId =', this.inviterId);

					// 如果是从服务器查询的邀请，直接使用已有的邀请人信息
					if (source === 'server' && invitationData) {
						this.inviterInfo = {
							id: invitationData.inviterId,
							account: invitationData.inviterAccount,
							avatar: invitationData.inviterAvatar
						};
						this.showInvitationModal = true;
						console.log('显示邀请弹框成功 (server)');
						return;
					}

					// 其他情况需要查询邀请人信息
					const res = await getMemberDetail(inviterId);

					if (res.code === 200) {
						this.inviterInfo = res.data;
						this.showInvitationModal = true;
						console.log('显示邀请弹框成功 (api success)');
					} else {
						console.log('获取邀请人信息失败:', res.msg);
						// 即使获取邀请人信息失败，也显示一个默认的邀请弹框
						this.inviterInfo = {
							id: inviterId,
							account: '好友',
							avatar: '/static/images/avatar.png'
						};
						this.showInvitationModal = true;
						console.log('使用默认信息显示邀请弹框 (api failed)');
					}
				} catch (error) {
					console.error('获取邀请人信息失败:', error);
					// 出现错误时也显示一个默认的邀请弹框
					this.inviterInfo = {
						id: inviterId,
						account: '好友',
						avatar: '/static/images/avatar.png'
					};
					this.inviterId = inviterId;
					this.showInvitationModal = true;
					console.log('使用默认信息显示邀请弹框 (error)');
				}
			},

			// 接受邀请
			async acceptInvitation() {
				try {
					console.log('开始接受邀请，当前 this.inviterId =', this.inviterId);

					// 检查用户是否已登录
					const currentUser = uni.getStorageSync('user');
					console.log(currentUser, "当前用户信息")
					if (!currentUser || !currentUser.account) {
						// 用户未登录，跳转到登录页面
						console.log('用户未登录，跳转到登录页面，保存 inviterId =', this.inviterId);
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						});

						// 保存邀请信息，登录后继续处理
						uni.setStorageSync('pendingInvitation', {
							inviterId: this.inviterId
						});

						// 关闭弹框
						this.closeInvitationModal();

						// 跳转到登录页面
						setTimeout(() => {
							uni.navigateTo({
								url: '/packageUser/pages/login/index'
							});
						}, 500);
						return;
					}

					// 用户已登录，直接处理邀请
					console.log('用户已登录，准备调用 acceptInvitation API，inviterId =', this.inviterId);

					if (!this.inviterId) {
						console.error('邀请者ID为空，无法接受邀请');
						uni.showToast({
							title: '邀请信息错误',
							icon: 'none'
						});
						return;
					}

					uni.showLoading({
						title: '处理中...'
					});
					console.log('调用 acceptInvitation API，参数 inviterId =', this.inviterId);
					const res = await acceptInvitation(this.inviterId);

					if (res.code === 200) {
						// 先隐藏加载遮罩
						uni.hideLoading();

						// 更新本地用户信息
						const userInfo = uni.getStorageSync('user') || {};
						userInfo.parentId = this.inviterId;
						uni.setStorageSync('user', userInfo);

						// 成功接受邀请后清空邀请ID
						this.closeInvitationModal(true);

						// 延迟显示成功提示，确保弹框关闭后再显示
						setTimeout(() => {
							this.showSuccessMessage();
						}, 200);
					} else {
						uni.hideLoading();
						setTimeout(() => {
							uni.showToast({
								title: res.msg || '操作失败',
								icon: 'none',
								duration: 2000,
								mask: true
							});
						}, 100);
					}
				} catch (error) {
					console.error('接受邀请失败:', error);
					uni.hideLoading();
					setTimeout(() => {
						uni.showToast({
							title: '操作失败',
							icon: 'none',
							duration: 2000,
							mask: true
						});
					}, 100);
				}
			},

			// 拒绝邀请
			async rejectInvitation() {
				try {
					// 先隐藏邀请弹框，避免z-index冲突
					const tempInviterId = this.inviterId;
					const tempInviterInfo = this.inviterInfo;
					this.showInvitationModal = false;

					const res = await uni.showModal({
						title: '确认拒绝',
						content: '确定要拒绝这个邀请吗？'
					});

					if (res.confirm) {
						uni.showLoading({
							title: '处理中...'
						});

						const result = await rejectInvitation(tempInviterId);

						if (result.code === 200) {
							uni.showToast({
								title: '已拒绝邀请',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: result.msg || '操作失败',
								icon: 'none'
							});
						}

						// 拒绝成功后清除数据
						this.closeInvitationModal(true);
					} else {
						// 用户取消拒绝，恢复邀请弹框
						this.inviterId = tempInviterId;
						this.inviterInfo = tempInviterInfo;
						this.showInvitationModal = true;
					}
				} catch (error) {
					console.error('拒绝邀请失败:', error);
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},

			// 显示成功消息（针对手机端优化）
			showSuccessMessage() {
				console.log('显示邀请接受成功消息');

				// 获取系统信息判断环境
				const systemInfo = uni.getSystemInfoSync();
				console.log('当前环境:', systemInfo.platform);

				// 优先尝试使用 showToast
				try {
					uni.showToast({
						title: '邀请接受成功',
						icon: 'success',
						duration: 2500,
						mask: true,
						success: () => {
							console.log('showToast 成功显示');

						},
						fail: (err) => {
							console.error('showToast 失败:', err);
							// 如果 showToast 失败，则使用 showModal 作为备选
							this.showSuccessModal();
						}
					});
				} catch (error) {
					console.error('showToast 异常:', error);
					// 异常情况下使用 showModal
					this.showSuccessModal();
				}
			},

			// 备选成功提示方法
			showSuccessModal() {
				console.log('使用 showModal 显示成功消息');
				uni.showModal({
					title: '成功',
					content: '邀请接受成功！',
					showCancel: false,
					confirmText: '知道了',
					success: (res) => {
						console.log('showModal 成功显示');
						try {
							uni.vibrateShort({});
						} catch (e) {
							console.log('振动反馈不支持或失败');
						}
					}
				});
			},

			// 关闭邀请弹框
			closeInvitationModal(clearInviterId = false) {
				this.showInvitationModal = false;
				this.inviterInfo = {};
				if (clearInviterId) {
					this.inviterId = null;
				}
			}
		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}



	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 999;
	}

	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #F5E6D3 0%, #E2D1C3 100%);
		position: relative;
	}

	.container::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background:
			radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.15) 0%, transparent 25%),
			radial-gradient(circle at 75% 75%, rgba(139, 69, 19, 0.1) 0%, transparent 25%),
			radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.08) 0%, transparent 30%);
		pointer-events: none;
		z-index: 0;
		animation: mysticOrbs 12s ease-in-out infinite;
	}

	.container::after {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image:
			url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="mystic" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="%23A67C52" opacity="0.1"/><circle cx="10" cy="10" r="0.5" fill="%23FFD700" opacity="0.08"/><circle cx="30" cy="30" r="0.5" fill="%23FFD700" opacity="0.08"/></pattern></defs><rect width="100" height="100" fill="url(%23mystic)"/></svg>');
		opacity: 0.2;
		pointer-events: none;
		z-index: 0;
		animation: mysticPattern 18s linear infinite;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(135deg, #9C6644 0%, #7E4F2D 100%);
		padding: 0;
		position: relative;
		overflow: hidden;
		border-bottom: 1rpx solid rgba(255, 215, 0, 0.1);
	}

	.fixed-header {
		background: linear-gradient(135deg, #9C6644 0%, #7E4F2D 100%);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		transform: translateY(-100%);
		transition: transform 0.3s ease-in-out;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(156, 102, 68, 0.3);
		border-bottom: 1rpx solid rgba(255, 215, 0, 0.1);
	}

	.fixed-header.show-fixed {
		transform: translateY(0);
	}

	.fixed-header::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		right: -50%;
		bottom: -50%;
		background:
			radial-gradient(circle at 30% 50%, rgba(255, 215, 0, 0.25) 0%, transparent 60%),
			radial-gradient(circle at 70% 50%, rgba(255, 215, 0, 0.2) 0%, transparent 60%),
			radial-gradient(circle at 50% 30%, rgba(255, 215, 0, 0.15) 0%, transparent 50%);
		opacity: 0.9;
		animation: headerAura 15s ease-in-out infinite;
		transform-origin: center;
	}

	.fixed-header::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="sacred" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M20 5 L35 20 L20 35 L5 20 Z" fill="none" stroke="rgba(255,215,0,0.15)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23sacred)"/></svg>');
		opacity: 0.4;
		animation: sacredPattern 15s linear infinite;
		pointer-events: none;
	}

	.nav-content {
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		position: relative;
		z-index: 1;
	}

	.left-section {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.logo-container {
		display: flex;
		align-items: center;
		margin-left: 24rpx;
		flex-shrink: 0;
		white-space: nowrap;
	}

	.logo-image {
		height: 60rpx;
		width: 60rpx;
		position: relative;
		z-index: 1;
		border-radius: 50%;
		display: block;
		border: 2rpx solid rgba(255, 215, 0, 0.3);
	}

	.logo-text {
		font-size: 36rpx;
		color: #FFD700;
		font-weight: 600;
		font-family: 'KaiTi', '楷体', serif;
		margin-left: 12rpx;
		letter-spacing: 2rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		white-space: nowrap;
	}

	.right-section {
		flex: 2;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 200rpx;
		/* 增加右侧padding，为胶囊按钮预留更多空间 */
	}

	.fixed-search-bar {
		width: 300rpx;
		/* 限制搜索框宽度 */
		height: 64rpx;
		display: flex;
		align-items: center;
		background: rgba(255, 248, 231, 0.95);
		border: 2rpx solid rgba(139, 69, 19, 0.2);
		border-radius: 32rpx;
		padding: 0 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(139, 69, 19, 0.15);
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;
		position: relative;
		margin-right: 20rpx;
		/* 添加右侧间距 */
	}

	.fixed-search-bar::before {
		content: '';
		position: absolute;
		top: 2rpx;
		left: 2rpx;
		right: 2rpx;
		bottom: 2rpx;
		border: 1rpx solid rgba(139, 69, 19, 0.1);
		border-radius: 30rpx;
		pointer-events: none;
	}

	.fixed-search-bar:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(139, 69, 19, 0.2);
	}

	.search-icon-wrapper {
		width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12rpx;
	}

	.search-icon {
		width: 28rpx;
		height: 28rpx;
		opacity: 0.6;
	}

	.search-input {
		font-size: 26rpx;
		color: #A67C52;
		flex: 1;
	}

	.header::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		right: -50%;
		bottom: -50%;
		background:
			radial-gradient(circle at 30% 50%, rgba(255, 215, 0, 0.2) 0%, transparent 60%),
			radial-gradient(circle at 70% 50%, rgba(255, 215, 0, 0.15) 0%, transparent 60%),
			radial-gradient(circle at 50% 30%, rgba(255, 215, 0, 0.1) 0%, transparent 50%);
		opacity: 0.8;
		animation: headerAura 15s ease-in-out infinite;
		transform-origin: center;
	}

	.header::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="sacred" width="30" height="30" patternUnits="userSpaceOnUse"><path d="M15 5 L25 15 L15 25 L5 15 Z" fill="none" stroke="rgba(255,215,0,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23sacred)"/></svg>');
		opacity: 0.3;
		animation: sacredPattern 15s linear infinite;
		pointer-events: none;
	}

	.header-content {
		position: relative;
		z-index: 1;
		padding: 0rpx 30rpx 30rpx;
	}

	.logo-section {
		margin-bottom: 20rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.logo-section .logo-container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 12rpx;
		margin-left: 24rpx;
	}

	.logo-section .logo-image {
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
		display: block;
		object-fit: cover;
		border: 2rpx solid rgba(255, 215, 0, 0.3);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.logo-section .logo-text {
		font-size: 48rpx;
		font-family: 'KaiTi', '楷体', serif;
		white-space: nowrap;
		color: #FFD700;
		font-weight: 700;
		margin-left: 16rpx;
		letter-spacing: 3rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.sub-title {
		font-size: 28rpx;
		color: rgba(255, 215, 0, 0.8);
		margin-top: 12rpx;
		font-weight: 300;
		letter-spacing: 1rpx;
		margin-left: 24rpx;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background: rgba(255, 248, 231, 0.95);
		border: 2rpx solid rgba(139, 69, 19, 0.2);
		border-radius: 50rpx;
		padding: 20rpx 30rpx;
		box-shadow: 0 8rpx 32rpx rgba(139, 69, 19, 0.15);
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;
		position: relative;
	}

	.search-bar::before {
		content: '';
		position: absolute;
		top: 4rpx;
		left: 4rpx;
		right: 4rpx;
		bottom: 4rpx;
		border: 1rpx solid rgba(139, 69, 19, 0.1);
		border-radius: 46rpx;
		pointer-events: none;
	}

	.search-bar:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 16rpx rgba(139, 69, 19, 0.2);
	}

	.search-icon-wrapper {
		width: 48rpx;
		height: 48rpx;
		background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(139, 69, 19, 0.3);
	}

	.search-icon {
		width: 28rpx;
		height: 28rpx;
		filter: brightness(0) invert(1);
	}

	.search-input {
		flex: 1;
		font-size: 30rpx;
		color: #8B4513;
		font-weight: 400;
	}

	/* 轮播图 */
	.swiper-section {
		margin: 20rpx 20rpx 0;
		position: relative;
	}

	.swiper-container {
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(139, 69, 19, 0.12);
		position: relative;
	}

	.swiper-container::before {
		content: '';
		position: absolute;
		top: 4rpx;
		left: 4rpx;
		right: 4rpx;
		bottom: 4rpx;
		border: 1rpx solid rgba(255, 215, 0, 0.2);
		border-radius: 16rpx;
		pointer-events: none;
		z-index: 2;
	}

	.swiper {
		width: 100%;
		height: 280rpx;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	/* 分类导航 */
	.category-section {
		margin: 20rpx 20rpx;
		background: rgba(255, 248, 231, 0.9);
		border: 1rpx solid rgba(139, 69, 19, 0.1);
		border-radius: 20rpx;
		padding: 24rpx 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(139, 69, 19, 0.08);
		backdrop-filter: blur(10rpx);
		position: relative;
	}

	.category-section::before {
		content: '';
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		right: 10rpx;
		bottom: 10rpx;
		border: 1rpx solid rgba(139, 69, 19, 0.1);
		border-radius: 20rpx;
		pointer-events: none;
	}

	.category-header {
		text-align: center;
		margin-bottom: 30rpx;
		position: relative;
	}

	.category-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #8B4513;
		position: relative;
		display: inline-block;
		padding: 0 40rpx;
	}

	.category-title::before,
	.category-title::after {
		content: '❈';
		color: #8B4513;
		opacity: 0.6;
		font-size: 24rpx;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.category-title::before {
		left: 0;
	}

	.category-title::after {
		right: 0;
	}

	.category-decoration {
		width: 100rpx;
		height: 2rpx;
		background: linear-gradient(90deg, transparent, #8B4513, transparent);
		margin: 16rpx auto 0;
	}

	.category-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		position: relative;
		z-index: 1;
	}

	.category-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: all 0.3s ease;
	}

	.category-item:active {
		transform: scale(0.95);
	}

	.category-icon-wrapper {
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
		border: 2rpx solid #FFD700;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 12rpx;
		box-shadow: 0 8rpx 24rpx rgba(139, 69, 19, 0.3);
		transition: all 0.3s ease;
	}

	.category-item:active .category-icon-wrapper {
		transform: scale(0.9);
		box-shadow: 0 4rpx 12rpx rgba(139, 69, 19, 0.4);
	}

	.category-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.category-name {
		font-size: 24rpx;
		color: #8B4513;
		font-weight: 500;
		text-align: center;
	}

	/* 爆款产品 */
	.hot-section {
		margin: 20rpx 20rpx;
		background: linear-gradient(135deg, rgba(255, 248, 231, 0.95) 0%, rgba(255, 235, 205, 0.95) 100%);
		border: 2rpx solid rgba(139, 69, 19, 0.15);
		border-radius: 24rpx;
		padding: 30rpx 20rpx;
		box-shadow: 0 12rpx 40rpx rgba(139, 69, 19, 0.12);
		backdrop-filter: blur(10rpx);
		position: relative;
		overflow: hidden;
	}

	.hot-section::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="hot-pattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%23A67C52" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23hot-pattern)"/></svg>');
		opacity: 0.3;
		pointer-events: none;
	}

	.hot-header {
		text-align: center;
		margin-bottom: 30rpx;
		position: relative;
		z-index: 1;
	}

	.hot-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #8B4513;
		text-shadow: 0 2rpx 4rpx rgba(139, 69, 19, 0.2);
		position: relative;
		display: inline-block;
		padding: 0 40rpx;
		animation: hotTitleGlow 3s ease-in-out infinite;
	}

	.hot-title::before,
	.hot-title::after {
		content: '❈';
		color: #8B4513;
		opacity: 0.6;
		font-size: 24rpx;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.hot-title::before {
		left: 0;
	}

	.hot-title::after {
		right: 0;
	}

	.hot-decoration {
		width: 100rpx;
		height: 2rpx;
		background: linear-gradient(90deg, transparent, #8B4513, transparent);
		margin: 16rpx auto 0;
	}

	.hot-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		position: relative;
		z-index: 1;
	}

	.hot-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: all 0.3s ease;
	}

	.hot-item:active {
		transform: scale(0.95);
	}

	.hot-icon-wrapper {
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
		border: 3rpx solid #FFD700;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 12rpx;
		box-shadow: 0 8rpx 24rpx rgba(139, 69, 19, 0.3);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		animation: mysticPulse 3s ease-in-out infinite;
	}

	.hot-icon-wrapper::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: conic-gradient(from 0deg,
				transparent 0deg,
				rgba(255, 215, 0, 0.1) 45deg,
				rgba(255, 215, 0, 0.3) 90deg,
				rgba(255, 215, 0, 0.1) 135deg,
				transparent 180deg,
				rgba(255, 215, 0, 0.05) 225deg,
				rgba(255, 215, 0, 0.2) 270deg,
				rgba(255, 215, 0, 0.05) 315deg,
				transparent 360deg);
		transform: rotate(0deg);
		transition: all 0.3s ease;
		animation: mysticRotate 6s ease-in-out infinite;
	}

	.hot-item:active .hot-icon-wrapper {
		transform: scale(0.9);
		box-shadow: 0 4rpx 12rpx rgba(139, 69, 19, 0.4);
		animation: hotClick 0.3s ease-out;
	}

	.hot-item:active .hot-icon-wrapper::before {
		transform: rotate(45deg) translateX(100%);
	}

	.hot-glow {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 140rpx;
		height: 140rpx;
		background: radial-gradient(circle,
				rgba(255, 215, 0, 0.4) 0%,
				rgba(255, 215, 0, 0.2) 30%,
				rgba(255, 215, 0, 0.1) 60%,
				transparent 80%);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		animation: hotGlow 3s ease-in-out infinite alternate;
		pointer-events: none;
		z-index: 0;
		filter: blur(2rpx);
	}

	@keyframes mysticPulse {
		0% {
			box-shadow: 0 8rpx 24rpx rgba(139, 69, 19, 0.3);
			transform: scale(1);
		}

		25% {
			box-shadow: 0 8rpx 24rpx rgba(139, 69, 19, 0.3), 0 0 20rpx rgba(255, 215, 0, 0.3);
			transform: scale(1.02);
		}

		50% {
			box-shadow: 0 8rpx 24rpx rgba(139, 69, 19, 0.3), 0 0 30rpx rgba(255, 215, 0, 0.5);
			transform: scale(1.05);
		}

		75% {
			box-shadow: 0 8rpx 24rpx rgba(139, 69, 19, 0.3), 0 0 25rpx rgba(255, 215, 0, 0.4);
			transform: scale(1.03);
		}

		100% {
			box-shadow: 0 8rpx 24rpx rgba(139, 69, 19, 0.3);
			transform: scale(1);
		}
	}

	@keyframes mysticRotate {
		0% {
			transform: rotate(0deg);
		}

		25% {
			transform: rotate(90deg);
		}

		50% {
			transform: rotate(180deg);
		}

		75% {
			transform: rotate(270deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes hotGlow {
		0% {
			opacity: 0.4;
			transform: translate(-50%, -50%) scale(0.9);
		}

		50% {
			opacity: 0.7;
			transform: translate(-50%, -50%) scale(1.1);
		}

		100% {
			opacity: 0.5;
			transform: translate(-50%, -50%) scale(1.0);
		}
	}

	@keyframes hotClick {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(0.85);
		}

		100% {
			transform: scale(0.9);
		}
	}

	@keyframes hotTitleGlow {

		0%,
		100% {
			text-shadow: 0 2rpx 4rpx rgba(139, 69, 19, 0.2);
		}

		50% {
			text-shadow: 0 2rpx 4rpx rgba(139, 69, 19, 0.2), 0 0 10rpx rgba(255, 215, 0, 0.6);
		}
	}

	@keyframes mysticOrbs {

		0%,
		100% {
			transform: scale(1) rotate(0deg);
		}

		25% {
			transform: scale(1.1) rotate(90deg);
		}

		50% {
			transform: scale(0.9) rotate(180deg);
		}

		75% {
			transform: scale(1.05) rotate(270deg);
		}
	}

	@keyframes mysticPattern {
		0% {
			transform: translateX(0px) translateY(0px);
		}

		100% {
			transform: translateX(-40px) translateY(-40px);
		}
	}

	@keyframes headerAura {
		0% {
			transform: scale(1) rotate(0deg);
			opacity: 0.8;
		}

		25% {
			transform: scale(1.1) rotate(5deg);
			opacity: 0.9;
		}

		50% {
			transform: scale(1.15) rotate(0deg);
			opacity: 1;
		}

		75% {
			transform: scale(1.1) rotate(-5deg);
			opacity: 0.9;
		}

		100% {
			transform: scale(1) rotate(0deg);
			opacity: 0.8;
		}
	}

	@keyframes sacredPattern {
		0% {
			transform: translateX(0px) translateY(0px) rotate(0deg);
		}

		100% {
			transform: translateX(-30px) translateY(-30px) rotate(360deg);
		}
	}

	.hot-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		z-index: 1;
		position: relative;
	}

	.hot-badge {
		position: absolute;
		top: 5rpx;
		right: 8rpx;
		background: linear-gradient(135deg, #FF6B35 0%, #FF9A56 100%);
		color: #fff;
		font-size: 18rpx;
		padding: 4rpx 8rpx;
		border-radius: 10rpx;
		font-weight: 600;
		z-index: 2;
		box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.4);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
	}

	.hot-name {
		font-size: 24rpx;
		color: #8B4513;
		font-weight: 500;
		text-align: center;
		line-height: 1.3;
	}

	/* 商品区域通用样式 */
	.product-section {
		margin: 0 20rpx 40rpx;
	}

	.section-header {
		text-align: center;
		margin-bottom: 30rpx;
		position: relative;
		padding: 30rpx 0;
	}

	.section-header::before,
	.section-header::after {
		content: '';
		position: absolute;
		height: 2rpx;
		width: 60rpx;
		background: linear-gradient(90deg, transparent, #8B4513, transparent);
		top: 50%;
		transform: translateY(-50%);
	}

	.section-header::before {
		left: 20%;
	}

	.section-header::after {
		right: 20%;
	}

	.section-title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 12rpx;
	}

	.title-text {
		font-size: 36rpx;
		font-weight: 700;
		color: #8B4513;
		margin: 0 20rpx;
		position: relative;
		display: inline-block;
	}

	.title-decoration {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.decoration-line {
		width: 40rpx;
		height: 2rpx;
		background: linear-gradient(90deg, #8B4513, #654321);
	}

	.decoration-symbol {
		width: 30rpx;
		height: 30rpx;
		opacity: 0.8;
	}

	.section-subtitle {
		font-size: 26rpx;
		color: #A67C52;
		font-weight: 300;
	}

	/* 代理商品列表 */
	.agent-section {
		background: rgba(255, 248, 231, 0.5);
		border-radius: 24rpx;
		padding: 20rpx;
		margin: 0 20rpx 40rpx;
		border: 1rpx solid rgba(139, 69, 19, 0.1);
	}

	.product-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.product-item {
		background: rgba(255, 248, 231, 0.95);
		border: 1rpx solid rgba(139, 69, 19, 0.1);
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 32rpx rgba(139, 69, 19, 0.08);
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;
		position: relative;
	}

	.product-item::before {
		content: '';
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		right: 10rpx;
		bottom: 10rpx;
		border: 1rpx solid rgba(139, 69, 19, 0.1);
		border-radius: 16rpx;
		pointer-events: none;
		z-index: 1;
	}

	.product-item:active {
		transform: translateY(-4rpx);
		box-shadow: 0 12rpx 40rpx rgba(139, 69, 19, 0.12);
	}

	.product-image-container {
		position: relative;
		width: 100%;
		height: 280rpx;
		overflow: hidden;
	}

	.product-image {
		width: 100%;
		height: 100%;
		transition: transform 0.3s ease;
	}

	.product-item:active .product-image {
		transform: scale(1.05);
	}

	.agent-badge {
		position: absolute;
		top: 16rpx;
		right: 16rpx;
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		color: #8B4513;
		font-size: 22rpx;
		padding: 6rpx 12rpx;
		border-radius: 12rpx;
		font-weight: 600;
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		z-index: 2;
	}

	.product-content {
		padding: 20rpx;
		position: relative;
		z-index: 2;
	}

	.product-name {
		font-size: 28rpx;
		color: #8B4513;
		font-weight: 600;
		line-height: 1.4;
		margin-bottom: 8rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.product-desc {
		font-size: 24rpx;
		color: #A67C52;
		margin-bottom: 12rpx;
	}

	.product-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.update-time {
		font-size: 22rpx;
		color: #999;
	}

	.sold-count {
		font-size: 22rpx;
		color: #999;
	}

	.product-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.price-section {
		display: flex;
		align-items: baseline;
	}

	.price-symbol {
		font-size: 24rpx;
		color: #8B4513;
		font-weight: 600;
	}

	.price-value {
		font-size: 32rpx;
		color: #8B4513;
		font-weight: 700;
	}

	.buy-btn {
		background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
		padding: 12rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #FFD700;
		box-shadow: 0 4rpx 12rpx rgba(139, 69, 19, 0.3);
		transition: all 0.3s ease;
	}

	.agent-btn {
		background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
		border: 1rpx solid #FFD700;
		box-shadow: 0 4rpx 12rpx rgba(139, 69, 19, 0.3);
	}

	.buy-btn:active {
		transform: scale(0.95);
		box-shadow: 0 2rpx 8rpx rgba(139, 69, 19, 0.4);
	}

	.agent-btn:active {
		box-shadow: 0 2rpx 8rpx rgba(139, 69, 19, 0.4);
	}

	.buy-text {
		font-size: 24rpx;
		color: #FFD700;
		font-weight: 500;
	}

	/* 精选商品网格 */
	.selected-section {
		background: rgba(255, 248, 231, 0.3);
		border-radius: 24rpx;
		padding: 20rpx;
		margin: 0 20rpx 40rpx;
		border: 1rpx solid rgba(139, 69, 19, 0.1);
	}

	.selected-product-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.selected-product-card {
		background: rgba(255, 248, 231, 0.95);
		border: 1rpx solid rgba(139, 69, 19, 0.1);
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 32rpx rgba(139, 69, 19, 0.08);
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;
		position: relative;
	}

	.selected-product-card::before {
		content: '';
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		right: 10rpx;
		bottom: 10rpx;
		border: 1rpx solid rgba(139, 69, 19, 0.1);
		border-radius: 16rpx;
		pointer-events: none;
		z-index: 1;
	}

	.selected-product-card:active {
		transform: translateY(-4rpx);
		box-shadow: 0 12rpx 40rpx rgba(139, 69, 19, 0.12);
	}

	.selected-product-image-wrapper {
		position: relative;
		width: 100%;
		height: 280rpx;
		overflow: hidden;
	}

	.selected-product-image {
		width: 100%;
		height: 100%;
		transition: transform 0.3s ease;
	}

	.selected-product-card:active .selected-product-image {
		transform: scale(1.05);
	}

	.selected-product-badge {
		position: absolute;
		top: 16rpx;
		right: 16rpx;
		background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
		border: 1rpx solid #FFD700;
		color: #FFD700;
		font-size: 22rpx;
		padding: 6rpx 12rpx;
		border-radius: 12rpx;
		font-weight: 500;
		z-index: 2;
	}

	.selected-product-info {
		padding: 20rpx;
		position: relative;
		z-index: 2;
	}

	.selected-product-name {
		font-size: 28rpx;
		color: #8B4513;
		font-weight: 600;
		line-height: 1.4;
		margin-bottom: 8rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.selected-product-desc {
		font-size: 24rpx;
		color: #A67C52;
		margin-bottom: 12rpx;
	}

	.selected-product-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.rating {
		display: flex;
		align-items: center;
		gap: 4rpx;
	}

	.rating-star {
		font-size: 24rpx;
		color: #FFD700;
	}

	.rating-value {
		font-size: 22rpx;
		color: #666;
		font-weight: 500;
	}

	.selected-sold-count {
		font-size: 22rpx;
		color: #999;
	}

	.selected-product-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.selected-price-section {
		display: flex;
		align-items: baseline;
	}

	.selected-price-symbol {
		font-size: 24rpx;
		color: #8B4513;
		font-weight: 600;
	}

	.selected-price-value {
		font-size: 32rpx;
		color: #8B4513;
		font-weight: 700;
	}

	.selected-buy-btn {
		background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
		padding: 12rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #FFD700;
		box-shadow: 0 4rpx 12rpx rgba(139, 69, 19, 0.3);
		transition: all 0.3s ease;
	}

	.selected-buy-btn:active {
		transform: scale(0.95);
		box-shadow: 0 2rpx 8rpx rgba(139, 69, 19, 0.4);
	}

	.selected-buy-text {
		font-size: 24rpx;
		color: #FFD700;
		font-weight: 500;
	}

	/* 底部装饰 */
	.bottom-decoration {
		height: 60rpx;
		background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
		margin: 0 20rpx;
		border-radius: 20rpx 20rpx 0 0;
		opacity: 0.1;
		position: relative;
		overflow: hidden;
	}

	.bottom-decoration::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="endless-knot-bottom" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M10 0L20 10L10 20L0 10z" fill="none" stroke="rgba(255,215,0,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23endless-knot-bottom)"/></svg>');
		opacity: 0.2;
	}

	/* 邀请弹框样式 */
	.invitation-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99999;
		backdrop-filter: blur(5rpx);
	}

	.modal-content {
		width: 600rpx;
		max-width: 90vw;
		background: linear-gradient(135deg, rgba(255, 248, 231, 0.98) 0%, rgba(255, 235, 205, 0.98) 100%);
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 20rpx 60rpx rgba(139, 69, 19, 0.3);
		border: 2rpx solid rgba(255, 215, 0, 0.3);
		position: relative;
		animation: modalSlideIn 0.3s ease-out;
	}

	.modal-content::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="modal-pattern" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="1" fill="%23A67C52" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23modal-pattern)"/></svg>');
		opacity: 0.3;
		pointer-events: none;
	}

	.modal-header {
		background: linear-gradient(135deg, #9C6644 0%, #7E4F2D 100%);
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 1;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #FFD700;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.close-btn {
		width: 48rpx;
		height: 48rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #FFD700;
		font-weight: 600;
		transition: all 0.3s ease;
	}

	.close-btn:active {
		background: rgba(255, 255, 255, 0.3);
		transform: scale(0.9);
	}

	.modal-body {
		padding: 40rpx 30rpx;
		position: relative;
		z-index: 1;
	}

	.inviter-info {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 20rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(139, 69, 19, 0.1);
	}

	.inviter-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		border: 3rpx solid #FFD700;
		box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
	}

	.inviter-details {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.inviter-name {
		font-size: 32rpx;
		font-weight: 700;
		color: #8B4513;
		margin-bottom: 8rpx;
	}

	.inviter-desc {
		font-size: 26rpx;
		color: #A67C52;
	}

	.invitation-desc {
		background: rgba(255, 255, 255, 0.6);
		border-radius: 16rpx;
		padding: 24rpx;
		border-left: 4rpx solid #8B4513;
	}

	.desc-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
	}

	.modal-footer {
		padding: 0 30rpx 30rpx;
		display: flex;
		gap: 20rpx;
		position: relative;
		z-index: 1;
	}

	.reject-btn,
	.accept-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: 600;
		border: none;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 16rpx rgba(139, 69, 19, 0.2);
	}

	.reject-btn {
		background: rgba(255, 255, 255, 0.9);
		color: #999;
		border: 2rpx solid rgba(153, 153, 153, 0.3);
	}

	.reject-btn:active {
		background: rgba(255, 255, 255, 0.7);
		transform: scale(0.98);
	}

	.accept-btn {
		background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
		color: #FFD700;
		border: 2rpx solid #FFD700;
		box-shadow: 0 4rpx 16rpx rgba(139, 69, 19, 0.3), 0 0 20rpx rgba(255, 215, 0, 0.2);
	}

	.accept-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(139, 69, 19, 0.4);
	}

	@keyframes modalSlideIn {
		0% {
			opacity: 0;
			transform: scale(0.8) translateY(-50rpx);
		}

		100% {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}

	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.selected-product-grid {
			grid-template-columns: 1fr;
		}

		.category-grid {
			grid-template-columns: repeat(3, 1fr);
		}

		.category-item {
			width: 120rpx;
		}

		.modal-content {
			width: 90vw;
		}

		.modal-footer {
			flex-direction: column;
		}

		.reject-btn,
		.accept-btn {
			width: 100%;
		}
	}

	/* 加载更多按钮样式 */
	.load-more-section {
		display: flex;
		justify-content: center;
		padding: 40rpx 20rpx;
	}

	.load-more-btn {
		background: linear-gradient(135deg, #8B4513, #A0522D);
		color: white;
		padding: 24rpx 60rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-weight: 600;
		box-shadow: 0 8rpx 24rpx rgba(139, 69, 19, 0.2);
		transition: all 0.3s ease;
		text-align: center;
		min-width: 200rpx;
	}

	.load-more-btn.loading {
		background: linear-gradient(135deg, #999, #bbb);
		color: #666;
	}

	.load-more-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 12rpx rgba(139, 69, 19, 0.3);
	}

	/* 没有更多数据提示样式 */
	.no-more-tip {
		display: flex;
		justify-content: center;
		padding: 30rpx 20rpx;
		color: #999;
		font-size: 26rpx;
	}
</style>