xiangqinxiangmu/LiangZhiYUMao/pages/index/index.vue

<template>
	<view class="home-page">
		<!-- 顶部状态栏 -->
		<view class="top-bar">
			<view class="logo">婚恋</view>
			<view class="msg-icon" @click="goToMessages">
				<text class="icon">🔔</text>
				<view v-if="unreadCount > 0" class="badge">{{ unreadCount }}</view>
			</view>
		</view>

		<!-- 个性化欢迎语 -->
		<!-- <view class="welcome-card" v-if="userInfo.nickname">
			<view class="welcome-content">
				<text class="welcome-text">你好，{{ userInfo.nickname }}！</text>
				<text class="match-info">今天有 <text class="highlight">{{ matchCount }}</text> 位新嘉宾和你匹配哦 ❤️</text>
			</view>
		</view> -->

		<!-- 轮播图 -->
		<view class="banner-section">
			<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="1000"
				:circular="true" indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#E91E63">
				<swiper-item v-for="(banner, index) in bannerList" :key="index">
					<view class="banner-item" @click="handleBannerClick(banner)">
						<image :src="banner.cover_image" class="banner-image" mode="aspectFill"
							:data-section="'banner'" :data-index="index"
							@error="handleImageError" @load="handleImageLoad"></image>
						<view class="banner-mask">
							<view class="banner-title">{{ banner.name }}</view>
							<view class="banner-subtitle" v-if="banner.subtitle">{{ banner.subtitle }}</view>
							<view class="banner-btn">查看更多</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 小喇叭公告栏 -->
		<view class="notice-bar">
			<text class="notice-icon">📢</text>
			<swiper class="notice-swiper" vertical :autoplay="true" :interval="3000" :duration="500"
				:circular="true">
				<swiper-item v-for="(notice, index) in noticeList" :key="index">
					<view class="notice-text">{{ notice.content }}</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 核心功能入口 -->
		<view class="function-grid">
			<view class="grid-item" v-for="(item, index) in functionList" :key="index" @click="handleFunctionClick(item)">
				<view class="grid-icon-wrapper" :style="{ background: item.gradient || item.bgColor || '#FFE5F1' }">
					<text class="grid-icon" :style="{ color: item.iconColor || '#333333' }">{{ item.icon }}</text>
				</view>
				<text class="grid-text">{{ item.name }}</text>
			</view>
		</view>

		<!-- 成功案例 -->
		<view class="section success-case-section" v-if="successCases && successCases.length > 0">
			<view class="section-header">
				<text class="section-title">💕 成功案例</text>
				<text class="section-more" @click="goToSuccessCaseList">查看更多 ></text>
			</view>
			<view class="success-case-grid">
				<view class="case-card" v-for="(caseItem, index) in successCases.slice(0, 2)" :key="index" 
					@click="handleSuccessCaseClick(caseItem)">
					<view class="case-image-wrapper">
						<image :src="caseItem.imageUrl || caseItem.image_url" class="case-image" mode="aspectFill"
							:data-section="'successCase'" :data-index="index"
							@error="handleImageError" @load="handleImageLoad"></image>
					</view>
					<view class="case-content">
						<view class="couple-names">{{ caseItem.maleUserNickname || caseItem.male_user_nickname }}&{{ caseItem.femaleUserNickname || caseItem.female_user_nickname }}</view>
						<view class="case-quote">{{ caseItem.quote || '我们通过平台找到了彼此❤️' }}</view>
						<view class="case-meta">
							<text class="marriage-date">相识于{{ formatMarriageDate(caseItem.marriageDate || caseItem.marriage_date) }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 平台活动 -->
		<view class="section activity-recommend-section" v-if="hotActivities && hotActivities.length > 0">
			<view class="section-header">
				<text class="section-title">🎉 平台活动</text>
				<text class="section-more" @click="goToActivityList">查看更多 ></text>
			</view>
			<view class="activity-scroll-container">
				<view class="activity-scroll-wrapper">
					<view class="activity-scroll-content">
						<!-- 第一组活动 -->
						<view class="activity-card-scroll" v-for="(activity, index) in hotActivities" :key="index" 
							@click="handleActivityClick(activity)">
							<view class="activity-image-wrapper">
								<image :src="activity.coverImage" class="activity-image" mode="aspectFill" 
									:data-section="'activity'" :data-index="index"
									@error="handleImageError" @load="handleImageLoad"></image>
								<view class="activity-status" v-if="activity.status === 1">报名中</view>
							</view>
							<view class="activity-info-static">
								<view class="activity-name-static">{{ activity.name }}</view>
								<view class="activity-time-static">{{ formatActivityTime(activity.startTime) }}</view>
							</view>
						</view>
						<!-- 第二组活动（用于无缝滚动） -->
						<view class="activity-card-scroll" v-for="(activity, index) in hotActivities" :key="index + 100" 
							@click="handleActivityClick(activity)">
							<view class="activity-image-wrapper">
								<image :src="activity.coverImage" class="activity-image" mode="aspectFill" 
									:data-section="'activity'" :data-index="index + 100"
									@error="handleImageError" @load="handleImageLoad"></image>
								<view class="activity-status" v-if="activity.status === 1">报名中</view>
							</view>
							<view class="activity-info-static">
								<view class="activity-name-static">{{ activity.name }}</view>
								<view class="activity-time-static">{{ formatActivityTime(activity.startTime) }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 今日缘分推荐 -->
		<view class="section fate-recommend-section">
			<view class="section-header">
				<text class="section-title">🌟 今日缘分</text>
				<text class="section-more" @click="goToRecommend">查看更多 ></text>
			</view>
			<view class="fate-cards">
				<view class="fate-card" v-for="(user, index) in todayRecommendUsers" :key="index" 
					@click="handleUserClick(user)">
					<view class="user-avatar-wrapper">
						<image :src="user.avatar" class="user-avatar" mode="aspectFill"
							:data-section="'todayRecommend'" :data-index="index"
							@error="handleImageError" @load="handleImageLoad"></image>
						<view class="online-status" v-if="user.isOnline"></view>
					</view>
					<view class="user-basic-info">
						<text class="user-nickname">{{ user.nickname }}</text>
						<text class="user-age-location">{{ user.age }}岁 · {{ user.city }}</text>
					</view>
					<view class="match-score">
						<text class="match-text">匹配度</text>
						<text class="match-percentage">{{ user.matchScore }}%</text>
					</view>
					<view class="user-tags">
						<text class="user-tag" v-for="(tag, tagIndex) in user.tags.slice(0, 2)" :key="tagIndex">
							{{ tag }}
						</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 个人魅力指数 -->
		<view class="section charm-index-section" v-if="userInfo.userId">
			<view class="charm-card">
				<view class="charm-header">
					<text class="charm-title">💖 个人魅力指数</text>
					<text class="charm-score">{{ charmIndex.totalScore }}</text>
				</view>
				<view class="charm-progress">
					<view class="progress-bar">
						<view class="progress-fill" :style="{ width: charmIndex.totalScore + '%' }"></view>
					</view>
					<text class="progress-text">超越了{{ charmIndex.beatPercentage }}%的用户</text>
				</view>
				<view class="charm-items">
					<view class="charm-item" v-for="(item, index) in charmIndex.items" :key="index">
						<text class="charm-item-label">{{ item.label }}</text>
						<view class="charm-item-progress">
							<view class="item-progress-bar">
								<view class="item-progress-fill" :style="{ width: item.score + '%' }"></view>
							</view>
							<text class="charm-item-score">{{ item.score }}%</text>
						</view>
					</view>
				</view>
				<view class="charm-tip">
					<text class="tip-text">💡 {{ charmIndex.tip }}</text>
				</view>
			</view>
		</view>

		<!-- 底部占位 -->
		<view class="bottom-placeholder"></view>

		<!-- 底部导航栏 -->
		<view class="tabbar">
			<view class="tabbar-item active" @click="switchTab('index')">
				<text class="tabbar-icon">🏠</text>
				<text class="tabbar-text">首页</text>
			</view>
			<view class="tabbar-item" @click="switchTab('plaza')">
				<text class="tabbar-icon">💕</text>
				<text class="tabbar-text">广场</text>
			</view>
			<view class="tabbar-item" @click="switchTab('recommend')">
				<text class="tabbar-icon">👍</text>
				<text class="tabbar-text">推荐</text>
			</view>
			<view class="tabbar-item" @click="switchTab('message')">
				<text class="tabbar-icon">💬</text>
				<text class="tabbar-text">消息</text>
				<view v-if="unreadCount > 0" class="tabbar-badge">{{ unreadCount }}</view>
			</view>
			<view class="tabbar-item" @click="switchTab('mine')">
				<text class="tabbar-icon">👤</text>
				<text class="tabbar-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api.js'
    import { formatTime, formatCountdown, isLoggedIn, goToLogin } from '@/utils/util.js'
	import { DEFAULT_IMAGES, ACTIVITY_TYPES } from '@/config/index.js'
	
	export default {
		data() {
			return {
				// 用户信息
				userInfo: {
					nickname: '小张',
					userId: null
				},
				matchCount: 3,
				unreadCount: 2,

				// 轮播图数据
				bannerList: [
					// {
					// 	id: 1,
					// 	name: '七夕单身派对',
					// 	subtitle: '仅剩5席',
					// 	cover_image: DEFAULT_IMAGES.banner,
					// 	type: 'activity',
					// 	targetId: 1
					// },
					// {
					// 	id: 2,
					// 	name: '情感沟通课',
					// 	subtitle: '限时5折',
					// 	cover_image: DEFAULT_IMAGES.banner,
					// 	type: 'course',
					// 	targetId: 1
					// },
					// {
					// 	id: 3,
					// 	name: '他们通过我们结婚了！',
					// 	subtitle: '查看更多成功案例',
					// 	cover_image: DEFAULT_IMAGES.banner,
					// 	type: 'case',
					// 	targetId: 1
					// }
				],

				// 公告数据
				noticeList: [
					// { id: 1, content: '【平台公告】本周成功牵手12对！红娘1对1服务限时8折！' },
					// { id: 2, content: '【活动预告】周末单身联谊活动开始报名啦！名额有限，先到先得！' },
					// { id: 3, content: '【好消息】恭喜会员小李和小王成功牵手，祝福他们！' }
				],

			// 功能入口
			functionList: [
				{ id: 1, name: '星命测算', icon: '💖', path: '/pages/astrology/index', bgColor: '#FF6B9D', iconColor: '#FFFFFF', gradient: 'linear-gradient(135deg, #FF6B9D 0%, #FF8EAB 100%)' },
				{ id: 2, name: '红娘列表', icon: '👤', path: '/pages/matchmakers/list', bgColor: '#6BC5F8', iconColor: '#FFFFFF', gradient: 'linear-gradient(135deg, #6BC5F8 0%, #87CEEB 100%)' },
				// { id: 3, name: '加入红娘', icon: '💕', path: '/pages/part-time-matchmaker/index', bgColor: '#9B7EDE', iconColor: '#FFFFFF', gradient: 'linear-gradient(135deg, #9B7EDE 0%, #B19CD9 100%)' },
				{ id: 4, name: '精品课程', icon: '📚', path: '/pages/courses/list', bgColor: '#FF8C42', iconColor: '#FFFFFF', gradient: 'linear-gradient(135deg, #FF8C42 0%, #FFA366 100%)' },
				{ id: 5, name: '今日缘分', icon: '💝', path: '/pages/recommend/index', bgColor: '#FF69B4', iconColor: '#FFFFFF', gradient: 'linear-gradient(135deg, #FF69B4 0%, #FF8CC8 100%)', needLogin: true },
				// { id: 6, name: '专属定制', icon: '🎁', path: '/pages/customize/index', bgColor: '#FFA500', iconColor: '#FFFFFF', gradient: 'linear-gradient(135deg, #FFA500 0%, #FFB84D 100%)' }
			],

				// 热门活动
				hotActivities: [],

				romanticImages: [
					'/static/romance/romance-1.svg',
					'/static/romance/romance-2.svg',
					'/static/romance/romance-3.svg',
					'/static/romance/romance-4.svg'
				],

				// 成功案例
				successCases: [],

				// VIP特权（保留但不在首页显示）
				vipPrivileges: [
					{ icon: '💎', text: '专属红娘服务' },
					{ icon: '⚡', text: '优先匹配推荐' },
					{ icon: '👑', text: '贵族身份标识' },
					{ icon: '🔒', text: '隐身访问模式' }
				],

				// 今日推荐用户
				todayRecommendUsers: [
					{
						id: 1,
						avatar: DEFAULT_IMAGES.avatar || 'https://via.placeholder.com/120',
						nickname: '温柔小姐姐',
						age: 26,
						city: '杭州',
						matchScore: 92,
						isOnline: true,
						tags: ['爱旅游', '读书控']
					},
					{
						id: 2,
						avatar: DEFAULT_IMAGES.avatar || 'https://via.placeholder.com/120',
						nickname: '阳光大男孩',
						age: 28,
						city: '上海',
						matchScore: 88,
						isOnline: false,
						tags: ['健身达人', '美食家']
					},
					{
						id: 3,
						avatar: DEFAULT_IMAGES.avatar || 'https://via.placeholder.com/120',
						nickname: '文艺青年',
						age: 25,
						city: '北京',
						matchScore: 85,
						isOnline: true,
						tags: ['音乐爱好者', '摄影师']
					}
				],

				// 个人魅力指数
				charmIndex: {
					totalScore: 75,
					beatPercentage: 68,
					items: [
						{ label: '资料完整度', score: 80 },
						{ label: '活跃度', score: 70 },
						{ label: '互动质量', score: 75 },
						{ label: '形象分数', score: 72 }
					],
					tip: '完善更多个人信息可提升魅力指数'
				},

				// 倒计时定时器
				countdownTimer: null,

				// 图片加载错误计数
				imageErrorCount: 0
			}
		},

		onLoad() {
			this.loadUserInfo()
			this.loadBannerData()
			this.loadNoticeData()
			this.loadTodayRecommend()
			this.loadCharmIndex()
			this.loadHotActivities()
			this.loadSuccessCases()
		},

		onUnload() {
			// 清理资源
		},

		methods: {
			// 加载用户信息
			loadUserInfo() {
				// 从本地存储或接口获取用户信息
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo) {
					this.userInfo = userInfo
					this.matchCount = Math.floor(Math.random() * 10) + 1
				}
			},

			// 加载轮播图数据
			async loadBannerData() {
				try {
					// 调用 API 获取轮播图数据
					const data = await api.home.getBanners()
					if (data && data.length > 0) {
						// 处理轮播图数据，确保字段格式正确
						this.bannerList = data.map(banner => ({
							...banner,
							cover_image: banner.cover_image || banner.coverImage || DEFAULT_IMAGES.banner,
							name: banner.name || banner.title || '',
							subtitle: banner.subtitle || '',
							type: banner.type || 'activity',
							targetId: banner.targetId || banner.id
						}))
					}
				} catch (error) {
					console.error('获取轮播图失败:', error)
					// 使用默认数据
				}
			},

			// 加载公告数据
			async loadNoticeData() {
				try {
					// 调用 API 获取公告数据
					const data = await api.home.getNotices()
					if (data && data.length > 0) {
						this.noticeList = data
					}
				} catch (error) {
					console.error('获取公告失败:', error)
					// 使用默认数据
				}
			},

			// 加载今日推荐
			async loadTodayRecommend() {
				try {
					// 调用 API 获取推荐用户
					const data = await api.recommend.getTodayUsers()
					if (data && data.length > 0) {
					    this.todayRecommendUsers = data
					}
				} catch (error) {
					console.error('获取推荐用户失败:', error)
				}
			},

			// 加载魅力指数
			async loadCharmIndex() {
				try {
					if (this.userInfo.userId) {
						// 调用 API 获取魅力指数
						// const data = await api.user.getCharmIndex(this.userInfo.userId)
						// if (data) {
						//     this.charmIndex = data
						// }
					}
				} catch (error) {
					console.error('获取魅力指数失败:', error)
				}
			},

			// 加载热门活动
			async loadHotActivities() {
				try {
					// 调用 API 获取热门活动
					const data = await api.activity.getList({
						type: 'hot',
						limit: 10
					})
					if (data && data.length > 0) {
						this.hotActivities = data.map((activity, index) => {
							const rawCover = this.validateImageUrl(activity.cover_image || activity.coverImage || activity.imageUrl || activity.image_url)
							return {
							...activity,
							coverImage: this.ensureRomanticCover(rawCover, index),
							name: activity.name || activity.title || '',
							startTime: activity.startTime || activity.start_time || activity.startDate || '',
							status: activity.status || 0
						}})
					} else {
						// 使用默认活动数据
						this.hotActivities = [
							{
								id: 1,
								name: '七夕单身派对',
								description: '浪漫七夕夜，遇见更好的ta',
								coverImage: this.getRomanticImage(0),
								startTime: '2024-02-14 19:00:00',
								location: '杭州西湖文化广场',
								price: 99,
								status: 1
							},
							{
								id: 2,
								name: '情人节主题聚会',
								description: '高端单身聚会，品味生活',
								coverImage: this.getRomanticImage(1),
								startTime: '2024-02-14 20:00:00',
								location: '上海外滩茶餐厅',
								price: 128,
								status: 1
							},
							{
								id: 3,
								name: '春日户外踏青',
								description: '拥抱春天，邂逅美好',
								coverImage: this.getRomanticImage(2),
								startTime: '2024-03-20 14:00:00',
								location: '苏州园林博物馆',
								price: 68,
								status: 1
							}
						]
					}
				} catch (error) {
					console.error('获取热门活动失败:', error)
					// 使用默认数据
					this.hotActivities = [
						{
							id: 1,
							name: '七夕单身派对',
							description: '浪漫七夕夜，遇见更好的ta',
							coverImage: DEFAULT_IMAGES.activity || 'https://images.unsplash.com/photo-1511632765486-a01980e01a18?w=750&h=400&fit=crop',
							startTime: '2024-02-14 19:00:00',
							location: '杭州西湖文化广场',
							price: 99,
							status: 1
						},
						{
							id: 2,
							name: '情人节主题聚会',
							description: '高端单身聚会，品味生活',
							coverImage: DEFAULT_IMAGES.banner || 'https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=750&h=360&fit=crop',
							startTime: '2024-02-14 20:00:00',
							location: '上海外滩茶餐厅',
							price: 128,
							status: 1
						},
						{
							id: 3,
							name: '春日户外踏青',
							description: '拥抱春天，邂逅美好',
							coverImage: DEFAULT_IMAGES.couple || 'https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?w=520&h=360&fit=crop',
							startTime: '2024-03-20 14:00:00',
							location: '苏州园林博物馆',
							price: 68,
							status: 1
						}
					]
				}
			},

			// 格式化活动时间
			formatActivityTime(timeStr) {
				if (!timeStr) return '时间待定'
				try {
					const date = new Date(timeStr)
					const month = date.getMonth() + 1
					const day = date.getDate()
					const hour = date.getHours()
					const minute = date.getMinutes()
					return `${month}月${day}日 ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
				} catch (error) {
					return '时间待定'
				}
			},

			// 加载成功案例
			async loadSuccessCases() {
				try {
					// 调用 API 获取成功案例列表
					const data = await api.successCase.getList({
						pageNum: 1,
						pageSize: 5
					})
					if (data && data.length > 0) {
						this.successCases = data.map(caseItem => ({
							...caseItem,
							image_url: this.validateImageUrl(caseItem.image_url || caseItem.imageUrl || DEFAULT_IMAGES.couple)
						}))
					} else {
						// 使用默认数据
						this.successCases = [
							{
								case_no: 'CASE001',
								male_user_nickname: '张先生',
								female_user_nickname: '李女士',
								image_url: DEFAULT_IMAGES.couple,
								quote: '从第一次咖啡约会到领证，只用了90天',
								marriage_date: '2024-08-20'
							},
							{
								case_no: 'CASE002',
								male_user_nickname: '王先生',
								female_user_nickname: '赵女士',
								image_url: DEFAULT_IMAGES.couple,
								quote: '感谢红娘的专业服务，让我们相遇相知',
								marriage_date: '2024-09-15'
							},
							{
								case_no: 'CASE003',
								male_user_nickname: '刘先生',
								female_user_nickname: '陈女士',
								image_url: DEFAULT_IMAGES.couple,
								quote: '缘分天注定，感恩平台让我们走到一起',
								marriage_date: '2024-10-01'
							}
						]
					}
				} catch (error) {
					console.error('获取成功案例失败:', error)
					// 使用默认数据
					this.successCases = [
						{
							case_no: 'CASE001',
							male_user_nickname: '张先生',
							female_user_nickname: '李女士',
							image_url: DEFAULT_IMAGES.couple,
							quote: '从第一次咖啡约会到领证，只用了90天',
							marriage_date: '2024-08-20'
						},
						{
							case_no: 'CASE002',
							male_user_nickname: '王先生',
							female_user_nickname: '赵女士',
							image_url: DEFAULT_IMAGES.couple,
							quote: '感谢红娘的专业服务，让我们相遇相知',
							marriage_date: '2024-09-15'
						}
					]
				}
			},

			// 格式化结婚日期
			formatMarriageDate(dateStr) {
				if (!dateStr) return '佳音渐近'
				try {
					const date = new Date(dateStr)
					const year = date.getFullYear()
					const month = date.getMonth() + 1
					const day = date.getDate()
					return `${year}年${month}月${day}日`
				} catch (error) {
					return '佳音渐近'
				}
			},

			// 跳转到VIP页面
			goToVip() {
				uni.navigateTo({
					url: '/pages/vip/index'
				})
			},

			// 跳转到活动列表
			goToActivityList() {
				uni.navigateTo({
					url: '/pages/activities/list'
				})
			},

			// 处理活动点击
			handleActivityClick(activity) {
				uni.navigateTo({
					url: `/pages/activities/detail?id=${activity.id}`
				})
			},

			// 跳转到成功案例列表
			goToSuccessCaseList() {
				uni.navigateTo({
					url: '/pages/success-case/list'
				})
			},

			// 处理成功案例点击
			handleSuccessCaseClick(caseItem) {
				const caseNo = caseItem.case_no || caseItem.caseNo
				uni.navigateTo({
					url: `/pages/success-case/detail?caseNo=${caseNo}`
				})
			},

			// 处理图片加载错误并回退到默认图
			handleImageError(e) {
				const failedSrc = e.detail ? e.detail.errMsg : '未知错误'
				const dataset = (e && e.target && e.target.dataset) ? e.target.dataset : {}
				const section = dataset.section
				const index = dataset.index
				
				console.warn('图片加载失败:', failedSrc, 'section:', section, 'index:', index)
				
				const fallbackMap = {
					banner: DEFAULT_IMAGES.banner,
					activity: DEFAULT_IMAGES.activity,
					successCase: DEFAULT_IMAGES.couple,
					todayRecommend: DEFAULT_IMAGES.avatar
				}
				
				const setFallback = (list, targetIndex, key, fallback, extraKeys = []) => {
					if (!Array.isArray(list) || list.length === 0) return
					const numIndex = Number(targetIndex)
					if (Number.isNaN(numIndex)) return
					const normalizedIndex = ((numIndex % list.length) + list.length) % list.length
					if (!list[normalizedIndex]) return
					this.$set(list[normalizedIndex], key, fallback)
					extraKeys.forEach(extraKey => this.$set(list[normalizedIndex], extraKey, fallback))
				}
				
				switch (section) {
					case 'banner':
						setFallback(this.bannerList, index, 'cover_image', fallbackMap.banner)
						break
					case 'activity':
						setFallback(this.hotActivities, index, 'coverImage', this.getRomanticImage(index))
						break
					case 'successCase':
						setFallback(this.successCases, index, 'image_url', fallbackMap.successCase, ['imageUrl'])
						break
					case 'todayRecommend':
						setFallback(this.todayRecommendUsers, index, 'avatar', fallbackMap.todayRecommend)
						break
					default:
						break
				}
			},

			// 处理图片加载成功
			handleImageLoad(e) {
				// 图片加载成功，重置错误计数
				this.imageErrorCount = 0
			},

			// 验证和处理图片URL
			validateImageUrl(url) {
				if (!url || url === 'null' || url === 'undefined') {
					return DEFAULT_IMAGES.activity || DEFAULT_IMAGES.banner || '/static/default-banner.jpg'
				}

				let cleanedUrl = String(url).trim()
				const httpIndex = cleanedUrl.indexOf('http')
				if (httpIndex > 0) {
					cleanedUrl = cleanedUrl.slice(httpIndex)
				}

				if (!cleanedUrl) {
					return DEFAULT_IMAGES.activity || DEFAULT_IMAGES.banner || '/static/default-banner.jpg'
				}
				
				// 如果是相对路径，添加协议和域名
				if (cleanedUrl.startsWith('/')) {
					// 检查是否是完整的服务器路径
					if (cleanedUrl.startsWith('/banners/') || cleanedUrl.startsWith('/activities/') || cleanedUrl.startsWith('/images/')) {
						return `http://115.190.125.125:9000${cleanedUrl}`
					}
					return `http://115.190.125.125:9000${cleanedUrl}`
				}
				
				// 如果已经是完整URL，直接返回
				if (cleanedUrl.startsWith('http://') || cleanedUrl.startsWith('https://')) {
					return cleanedUrl
				}
				
				// 其他情况返回默认图片
				return DEFAULT_IMAGES.activity || DEFAULT_IMAGES.banner || '/static/default-banner.jpg'
			},

			getRomanticImage(index = 0) {
				if (!this.romanticImages || this.romanticImages.length === 0) {
					return DEFAULT_IMAGES.activity || DEFAULT_IMAGES.banner || '/static/default-banner.jpg'
				}
				const idx = Math.abs(Number(index) || 0) % this.romanticImages.length
				return this.romanticImages[idx]
			},

			ensureRomanticCover(url, index = 0) {
				if (!url || url === DEFAULT_IMAGES.activity || url === DEFAULT_IMAGES.banner || url === '/static/default-banner.jpg') {
					return this.getRomanticImage(index)
				}
				return url
			},

			// 跳转到推荐页面
			goToRecommend() {
				uni.navigateTo({
					url: '/pages/recommend/index'
				})
			},

			// 处理用户点击
			handleUserClick(user) {
				uni.navigateTo({
					url: `/pages/profile/index?userId=${user.id}`
				})
			},

			// 格式化时间
			formatTime,

			// Banner点击
			handleBannerClick(banner) {
				if (banner.type === 'activity') {
					uni.navigateTo({
						url: `/pages/activities/detail?id=${banner.targetId}`
					})
				} else if (banner.type === 'course') {
					uni.navigateTo({
						url: `/pages/courses/detail?id=${banner.targetId}`
					})
				} else if (banner.type === 'case') {
					uni.navigateTo({
						url: '/pages/success-case/list'
					})
				}
			},

            // 功能入口点击
            handleFunctionClick(item) {
                // 今日缘分：直接跳转到专门的推荐页面
                 if (item && (item.id === 5 || item.name === '今日缘分' || item.name === '今日推荐')) {
                    console.log('点击今日缘分，跳转到专门页面')
                    uni.navigateTo({
                        url: '/pages/today-recommend/index',
                        success: () => {
                            console.log('跳转今日缘分页面成功')
                        },
                        fail: (err) => {
                            console.error('跳转今日缘分页面失败:', err)
                            uni.showToast({
                                title: '页面跳转失败',
                                icon: 'none'
                            })
                        }
                    })
                    return
                }
                // 检查是否需要登录
                if (item.needLogin && !isLoggedIn()) {
                    uni.navigateTo({
                        url: '/pages/page3/page3'
                    })
                    return
                }

				if (item.path) {
					let url = item.path
					if (item.query) {
						const queryStr = Object.keys(item.query).map(key => `${key}=${item.query[key]}`).join('&')
						url += '?' + queryStr
					}
					uni.navigateTo({
						url: url,
						fail: () => {
							uni.showToast({
								title: '功能开发中',
								icon: 'none'
							})
						}
					})
				}
			},


			// 跳转到消息中心
			goToMessages() {
				uni.navigateTo({
					url: '/pages/message/index',
					fail: () => {
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						})
					}
				})
			},


		// 切换Tab
		switchTab(tab) {
			if (tab === 'index') return

			const tabPages = {
				plaza: '/pages/plaza/index',
				recommend: '/pages/recommend/index',
				message: '/pages/message/index',
				mine: '/pages/mine/index'
			}

			if (tabPages[tab]) {
				uni.redirectTo({
					url: tabPages[tab]
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.home-page {
		min-height: 100vh;
		background: #F5F5F5;
		padding-bottom: 120rpx;
	}

	/* 顶部状态栏 */
	.top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 35rpx;
		background: #FFFFFF;
		border-bottom: 2rpx solid #E0E0E0;

		.logo {
			font-size: 38rpx;
			font-weight: 800;
			color: #E91E63;
		}

		.msg-icon {
			position: relative;
			width: 68rpx;
			height: 68rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFE5F1;
			border-radius: 50%;
			transition: all 0.2s ease;
			
			&:active {
				opacity: 0.8;
			}

			.icon {
				font-size: 44rpx;
			}

			.badge {
				position: absolute;
				top: -5rpx;
				right: -5rpx;
				min-width: 36rpx;
				height: 36rpx;
				line-height: 36rpx;
				padding: 0 8rpx;
				background: #FF6B6B;
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight: bold;
				border-radius: 18rpx;
				text-align: center;
			}
		}
	}

	/* 个性化欢迎语 */
	.welcome-card {
		margin: 25rpx 35rpx;
		padding: 35rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #E0E0E0;

		.welcome-content {
			display: flex;
			flex-direction: column;
			gap: 16rpx;

			.welcome-text {
				font-size: 34rpx;
				font-weight: 700;
				color: #333333;
				line-height: 1.3;
			}

			.match-info {
				font-size: 28rpx;
				color: #666666;
				line-height: 1.4;

				.highlight {
					color: #E91E63;
					font-weight: 800;
					font-size: 36rpx;
				}
			}
		}
	}

	/* 轮播图 */
	.banner-section {
		margin: 25rpx 35rpx;

		.banner-swiper {
			height: 480rpx;
			border-radius: 16rpx;
			overflow: hidden;
			border: 2rpx solid #E0E0E0;

			.banner-item {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;

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

				.banner-mask {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					padding: 35rpx;
					background: rgba(0, 0, 0, 0.6);
					color: #FFFFFF;

					.banner-title {
						font-size: 38rpx;
						font-weight: 800;
						margin-bottom: 12rpx;
						line-height: 1.2;
					}

					.banner-subtitle {
						font-size: 26rpx;
						margin-bottom: 24rpx;
					}

					.banner-btn {
						display: inline-block;
						padding: 12rpx 32rpx;
						background: #E91E63;
						border-radius: 8rpx;
						font-size: 26rpx;
						font-weight: 600;
						transition: all 0.2s ease;
						
						&:active {
							opacity: 0.8;
						}
					}
				}
			}
		}
	}

	/* 公告栏 */
	.notice-bar {
		display: flex;
		align-items: center;
		margin: 25rpx 35rpx;
		padding: 24rpx 30rpx;
		background: #FFF8E1;
		border-radius: 8rpx;
		border: 2rpx solid #FFD54F;
		border-left: 6rpx solid #FFC107;

		.notice-icon {
			font-size: 34rpx;
			margin-right: 24rpx;
		}

		.notice-swiper {
			flex: 1;
			height: 44rpx;

			.notice-text {
				font-size: 28rpx;
				color: #795548;
				line-height: 44rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: 500;
			}
		}
	}

	/* 功能入口 */
	.function-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 24rpx;
		margin: 10rpx 1rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #E0E0E0;

		.grid-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 14rpx;
			padding: 20rpx 12rpx;
			transition: all 0.3s ease;
			border-radius: 12rpx;

			&:active {
				transform: scale(0.95);
				opacity: 0.9;
			}

			.grid-icon-wrapper {
				width: 140rpx;
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 20rpx;
				position: relative;
				overflow: hidden;
				/* 外阴影 + 内阴影 - 增强立体感和深度感 */
				box-shadow: inset 0 2rpx 8rpx rgba(255, 255, 255, 0.3),
							0 10rpx 30rpx rgba(0, 0, 0, 0.2),
							0 4rpx 12rpx rgba(0, 0, 0, 0.15);
				transition: all 0.3s ease;

				/* 光泽效果 - 左上角强烈高光，模拟图片中的光泽 */
				&::before {
					content: '';
					position: absolute;
					top: -60%;
					left: -60%;
					width: 220%;
					height: 220%;
					background: linear-gradient(135deg, 
						rgba(255, 255, 255, 0.6) 0%, 
						rgba(255, 255, 255, 0.4) 15%, 
						rgba(255, 255, 255, 0.2) 30%, 
						rgba(255, 255, 255, 0.05) 50%, 
						transparent 70%);
					transform: rotate(45deg);
					pointer-events: none;
					z-index: 1;
					border-radius: 50%;
				}

				/* 底部深度阴影 - 增强立体感 */
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 40%;
					background: linear-gradient(to top, 
						rgba(0, 0, 0, 0.15) 0%, 
						rgba(0, 0, 0, 0.08) 50%, 
						transparent 100%);
					pointer-events: none;
					z-index: 1;
					border-radius: 0 0 20rpx 20rpx;
				}

				&:active {
					transform: scale(0.92);
					box-shadow: inset 0 2rpx 8rpx rgba(255, 255, 255, 0.2),
								0 6rpx 20rpx rgba(0, 0, 0, 0.25);
				}

				.grid-icon {
					font-size: 70rpx;
					position: relative;
					z-index: 2;
					/* 图标阴影 - 让图标更突出 */
					filter: drop-shadow(0 3rpx 8rpx rgba(0, 0, 0, 0.2));
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				}
			}

			.grid-text {
				font-size: 24rpx;
				font-weight: 600;
				color: #333333;
				text-align: center;
				line-height: 1.2;
			}
		}
	}

	/* 区块样式 */
	.section {
		margin: 40rpx 0;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 35rpx;
			margin-bottom: 25rpx;

			.section-title {
				font-size: 36rpx;
				font-weight: 800;
				color: #333333;
				border-left: 6rpx solid #E91E63;
				padding-left: 16rpx;
			}

			.section-more {
				font-size: 26rpx;
				color: #E91E63;
				font-weight: 600;
				transition: all 0.2s ease;
				
				&:active {
					opacity: 0.6;
				}
			}
		}
	}

	/* 平台活动展示区 */
	.activity-recommend-section {
		.activity-scroll-container {
			margin: 0 35rpx;
			overflow: hidden;
			position: relative;

			.activity-scroll-wrapper {
				width: 100%;
				overflow: hidden;

				.activity-scroll-content {
					display: flex;
					animation: activityScroll 30s linear infinite;
					gap: 20rpx;
					width: fit-content;

					&:hover {
						animation-play-state: paused;
					}

					.activity-card-scroll {
						flex-shrink: 0;
						width: 500rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						overflow: hidden;
						border: 2rpx solid #E0E0E0;
						transition: all 0.3s ease;

						&:active {
							transform: scale(0.98);
							opacity: 0.9;
						}

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

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

							.activity-status {
								position: absolute;
								top: 15rpx;
								right: 15rpx;
								padding: 6rpx 12rpx;
								background: #4CAF50;
								color: #FFFFFF;
								font-size: 22rpx;
								font-weight: 600;
								border-radius: 8rpx;
							}
						}

						.activity-info-static {
							padding: 20rpx;

							.activity-name-static {
								font-size: 28rpx;
								font-weight: 700;
								color: #333333;
								margin-bottom: 8rpx;
								line-height: 1.3;
							}

							.activity-time-static {
								font-size: 24rpx;
								color: #666666;
								line-height: 1.4;
							}
						}
					}
				}
			}
		}
	}

	@keyframes activityScroll {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-50%);
		}
	}

	/* 今日缘分推荐 */
	.fate-recommend-section {
		.fate-cards {
			display: flex;
			gap: 20rpx;
			padding: 0 35rpx;
			overflow-x: auto;
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}

			.fate-card {
				min-width: 320rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 25rpx;
				border: 2rpx solid #E0E0E0;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 15rpx;
				position: relative;
				transition: all 0.2s ease;

				&:active {
					background: #F5F5F5;
				}

				.user-avatar-wrapper {
					position: relative;

					.user-avatar {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						border: 3rpx solid #E0E0E0;
					}

					.online-status {
						position: absolute;
						bottom: 5rpx;
						right: 5rpx;
						width: 20rpx;
						height: 20rpx;
						background: #4CAF50;
						border-radius: 50%;
						border: 3rpx solid white;
					}
				}

				.user-basic-info {
					text-align: center;

					.user-nickname {
						font-size: 28rpx;
						font-weight: 700;
						color: #333333;
						display: block;
						margin-bottom: 5rpx;
					}

					.user-age-location {
						font-size: 24rpx;
						color: #666666;
					}
				}

				.match-score {
					display: flex;
					align-items: center;
					gap: 8rpx;
					padding: 8rpx 16rpx;
					background: #FFE5F1;
					border-radius: 8rpx;

					.match-text {
						font-size: 22rpx;
						color: #666666;
					}

					.match-percentage {
						font-size: 26rpx;
						font-weight: 700;
						color: #E91E63;
					}
				}

				.user-tags {
					display: flex;
					gap: 8rpx;
					flex-wrap: wrap;
					justify-content: center;

					.user-tag {
						font-size: 20rpx;
						color: #666666;
						background: #F5F5F5;
						padding: 6rpx 12rpx;
						border-radius: 8rpx;
						border: 1rpx solid #E0E0E0;
					}
				}
			}
		}
	}

	/* 个人魅力指数 */
	.charm-index-section {
		margin: 25rpx 35rpx;

		.charm-card {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 35rpx;
			border: 2rpx solid #E0E0E0;

			.charm-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 25rpx;

				.charm-title {
					font-size: 32rpx;
					font-weight: 800;
					color: #333333;
				}

				.charm-score {
					font-size: 48rpx;
					font-weight: 800;
					color: #E91E63;
				}
			}

			.charm-progress {
				margin-bottom: 30rpx;

				.progress-bar {
					width: 100%;
					height: 12rpx;
					background: #FFE5F1;
					border-radius: 6rpx;
					overflow: hidden;
					margin-bottom: 10rpx;

					.progress-fill {
						height: 100%;
						background: #E91E63;
						border-radius: 6rpx;
						transition: width 1s ease;
					}
				}

				.progress-text {
					font-size: 24rpx;
					color: #666666;
					text-align: center;
					display: block;
				}
			}

			.charm-items {
				display: flex;
				flex-direction: column;
				gap: 20rpx;
				margin-bottom: 25rpx;

				.charm-item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.charm-item-label {
						font-size: 26rpx;
						color: #666666;
						font-weight: 500;
					}

					.charm-item-progress {
						display: flex;
						align-items: center;
						gap: 12rpx;
						flex: 1;
						margin-left: 20rpx;

						.item-progress-bar {
							flex: 1;
							height: 8rpx;
							background: #FFE5F1;
							border-radius: 4rpx;
							overflow: hidden;

							.item-progress-fill {
								height: 100%;
								background: #E91E63;
								border-radius: 4rpx;
								transition: width 1s ease;
							}
						}

						.charm-item-score {
							font-size: 24rpx;
							color: #E91E63;
							font-weight: 600;
							min-width: 60rpx;
							text-align: right;
						}
					}
				}
			}

			.charm-tip {
				padding: 20rpx;
				background: #FFF8E1;
				border-radius: 8rpx;
				border: 2rpx solid #FFD54F;

				.tip-text {
					font-size: 24rpx;
					color: #666666;
					line-height: 1.5;
				}
			}
		}
	}

	/* 底部占位 */
	.bottom-placeholder {
		height: 30rpx;
	}

	/* 底部导航栏 */
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		background: #FFFFFF;
		border-top: 2rpx solid #E0E0E0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 999;

		.tabbar-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 18rpx 0;
			position: relative;
			transition: all 0.2s ease;
			
			&:active {
				background: #F5F5F5;
			}

			.tabbar-icon {
				font-size: 46rpx;
				margin-bottom: 8rpx;
				transition: all 0.2s ease;
			}

			.tabbar-text {
				font-size: 22rpx;
				color: #666666;
				font-weight: 500;
				transition: all 0.2s ease;
			}

			.tabbar-badge {
				position: absolute;
				top: 8rpx;
				right: 25%;
				min-width: 36rpx;
				height: 36rpx;
				line-height: 36rpx;
				padding: 0 8rpx;
				background: #FF6B6B;
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight: bold;
				border-radius: 18rpx;
				text-align: center;
			}

			&.active {
				background: #FFE5F1;
				
				.tabbar-text {
					color: #E91E63;
					font-weight: 700;
				}
			}
		}
	}

	/* 成功案例 */
	.success-case-section {
		.success-case-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;
			margin: 0 35rpx;

			.case-card {
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;
				border: 2rpx solid #E0E0E0;
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.98);
					opacity: 0.9;
				}

				.case-image-wrapper {
					width: 100%;
					height: 320rpx;
					position: relative;
					overflow: hidden;

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

				.case-content {
					padding: 20rpx;

					.couple-names {
						font-size: 28rpx;
						font-weight: 700;
						color: #333333;
						margin-bottom: 10rpx;
						line-height: 1.3;
					}

					.case-quote {
						font-size: 24rpx;
						color: #666666;
						line-height: 1.5;
						margin-bottom: 12rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.case-meta {
						.marriage-date {
							font-size: 22rpx;
							color: #999999;
							line-height: 1.4;
						}
					}
				}
			}
		}
	}

	@keyframes marquee {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-50%);
		}
	}
</style>