xiangqinxiangmu/LiangZhiYUMao/pages/astrology/zodiac.vue

<template>
	<view class="zodiac-page" :style="{ paddingTop: `calc(${statusBarHeight}px + 88rpx)` }">
		<view class="top-bar-bg" :style="{ height: `calc(${statusBarHeight}px + 88rpx)` }"></view>
		<!-- 自定义导航栏 -->
		<view class="custom-nav" :style="{ top: `${statusBarHeight}px` }">
			<view class="nav-left" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="nav-title">生肖配对</view>
			<view class="nav-right"></view>
		</view>

		<!-- 生肖配对选择区域 -->
		<view class="zodiac-selection-section" v-if="!hasResult">
			<view class="selection-card">
				<view class="card-title">💕 生肖配对测试</view>
				<view class="card-subtitle">看看你们的缘分指数有多高</view>
				
				<!-- 我的生肖选择 -->
				<view class="zodiac-picker-wrapper">
					<view class="picker-label">我的生肖</view>
					<picker mode="selector" :range="zodiacNames" :value="myZodiacIndex" @change="onMyZodiacChange">
						<view class="zodiac-display">
							<text class="zodiac-emoji">{{ myZodiacEmoji }}</text>
							<text class="zodiac-text">{{ myZodiac || '请选择' }}</text>
						</view>
					</picker>
				</view>

				<!-- 对方生肖选择 -->
				<view class="zodiac-picker-wrapper">
					<view class="picker-label">TA的生肖</view>
					<picker mode="selector" :range="zodiacNames" :value="targetZodiacIndex" @change="onTargetZodiacChange">
						<view class="zodiac-display">
							<text class="zodiac-emoji">{{ targetZodiacEmoji }}</text>
							<text class="zodiac-text">{{ targetZodiac || '请选择' }}</text>
						</view>
					</picker>
				</view>

				<button class="submit-btn" @click="handleSubmit" :disabled="!myZodiac || !targetZodiac">
					开始配对
				</button>
			</view>

			<!-- 装饰性生肖图标 -->
			<view class="zodiac-icons">
				<text class="zodiac-icon" v-for="(zodiac, index) in allZodiacs" :key="index">
					{{ zodiac.emoji }}
				</text>
			</view>
		</view>

		<!-- 配对结果 -->
		<view class="result-section" v-if="hasResult">
			<!-- 配对标题卡片 -->
			<view class="match-title-card">
				<view class="match-header">
					<view class="zodiac-pair">
						<text class="zodiac-emoji-large">{{ myZodiacEmoji }}</text>
						<text class="vs-text">💕</text>
						<text class="zodiac-emoji-large">{{ targetZodiacEmoji }}</text>
					</view>
					<view class="match-title">{{ myZodiac }} 💕 {{ targetZodiac }}</view>
					<view class="match-subtitle">{{ matchResult.title || '配对分析' }}</view>
				</view>
			</view>

			<!-- 配对分析 -->
			<view class="match-analysis-section" v-if="matchResult">
				<view class="section-title">💝 配对分析</view>
				<view class="analysis-card">
					<!-- 男性视角 -->
					<view class="perspective-item" v-if="matchResult.malePerspective">
						<view class="perspective-header">
							<text class="perspective-icon">👨</text>
							<text class="perspective-title">男生视角</text>
						</view>
						<text class="perspective-content">{{ matchResult.malePerspective }}</text>
					</view>
					
					<!-- 女性视角 -->
					<view class="perspective-item" v-if="matchResult.femalePerspective">
						<view class="perspective-header">
							<text class="perspective-icon">👩</text>
							<text class="perspective-title">女生视角</text>
						</view>
						<text class="perspective-content">{{ matchResult.femalePerspective }}</text>
					</view>
					
					<!-- 补充分析 -->
					<view class="perspective-item" v-if="matchResult.malePerspective2">
						<view class="perspective-header">
							<text class="perspective-icon">💭</text>
							<text class="perspective-title">深度分析</text>
						</view>
						<text class="perspective-content">{{ matchResult.malePerspective2 }}</text>
					</view>
					
					<view class="perspective-item" v-if="matchResult.femalePerspective2">
						<view class="perspective-header">
							<text class="perspective-icon">💖</text>
							<text class="perspective-title">感情建议</text>
						</view>
						<text class="perspective-content">{{ matchResult.femalePerspective2 }}</text>
					</view>
				</view>
			</view>

			<!-- 重新配对 -->
			<view class="retest-btn" @click="handleRetest">
				重新配对
			</view>

			<!-- 数据来源说明 -->
			<view class="data-source" :class="{'api-source': isAPIData}">
				<text class="source-icon">{{ isAPIData ? '✓' : 'ℹ️' }}</text>
				<view class="source-content">
					<text class="source-text">数据来源：{{ dataSourceText }}</text>
					<text class="source-time">更新时间：{{ updateTime }}</text>
				</view>
			</view>

			<!-- 免责声明 -->
			<view class="disclaimer">
				<view class="disclaimer-title">⚠️ 免责声明</view>
				<view class="disclaimer-text">
					本配对结果基于传统文化和民俗理论，仅供娱乐参考，不作为感情决策依据。
					每个人的性格和缘分是多方面因素综合作用的结果，建议理性对待配对内容。
					真正的幸福需要双方共同努力和经营。
				</view>
			</view>
		</view>

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

<script>
import zodiacUtil from '@/utils/zodiac.js'
import zodiacEnhanced from '@/utils/zodiac-enhanced.js'

export default {
	data() {
		return {
			statusBarHeight: 0,
			// 生肖配对相关数据
			myZodiac: uni.getStorageSync("userInfo").animal,
			targetZodiac: '',
			myZodiacIndex: -1,
			targetZodiacIndex: -1,
			hasResult: false,
			matchResult: null,
			allZodiacs: [],
			updateTime: '',
			
			// 生肖名称列表
			zodiacNames: ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪']
		}
	},

	computed: {
		// 我的生肖emoji
		myZodiacEmoji() {
			return this.myZodiac ? zodiacUtil.getZodiacEmoji(this.myZodiac) : '🔮'
		},
		
		// 对方生肖emoji  
		targetZodiacEmoji() {
			return this.targetZodiac ? zodiacUtil.getZodiacEmoji(this.targetZodiac) : '🔮'
		},
		
		// 是否使用API数据
		isAPIData() {
			return this.matchResult?.source === 'tianapi'
		},
		
		// 数据来源文本
		dataSourceText() {
			if (this.isAPIData) {
				return '天行数据专业API'
			}
			return '传统生肖配对理论'
		}
	},

	onLoad() {
		// 获取状态栏高度（仅样式适配，无业务影响）
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight
				}
			})
		this.initData()
	},

	methods: {
		initData() {
			// 设置更新时间
			const date = new Date()
			const year = date.getFullYear()
			const month = parseInt(date.getMonth() + 1)
			const day = parseInt(date.getDate())
			this.updateTime = `${year}年${month}月${day}日`

			// 加载所有生肖
			this.allZodiacs = zodiacUtil.ZODIACS.map(name => ({
				name,
				emoji: zodiacUtil.getZodiacEmoji(name)
			}))
		},

		// 我的生肖选择
		onMyZodiacChange(e) {
			const index = e.detail.value
			this.myZodiacIndex = index
			this.myZodiac = this.zodiacNames[index]
		
		},
		
		// 对方生肖选择
		onTargetZodiacChange(e) {
			const index = e.detail.value
			this.targetZodiacIndex = index
			this.targetZodiac = this.zodiacNames[index]
			
		},

		// 提交配对
		async handleSubmit() {
			if (!this.myZodiac || !this.targetZodiac) {
				uni.showToast({
					title: '请选择双方生肖',
					icon: 'none'
				})
				return
			}

			// 显示加载中
			uni.showLoading({
				title: '配对分析中...',
				mask: true
			})

			try {
				
				// 调用天行数据配对API
				this.matchResult = await zodiacEnhanced.getZodiacMatch(this.myZodiac, this.targetZodiac)
				
				// 检查API结果并降级处理
				if (!this.matchResult) {
					
					this.matchResult = this.getLocalMatchResult()
					
					// 显示友好提示
					uni.showToast({
						title: '使用本地配对数据',
						icon: 'none',
						duration: 1500
					})
				} 
				
				this.hasResult = true
				

				// 保存到本地存储
				uni.setStorageSync('zodiacMatch', {
					myZodiac: this.myZodiac,
					targetZodiac: this.targetZodiac,
					result: this.matchResult,
					lastUpdate: new Date().getTime()
				})

			} catch (error) {
				
				
				// 兜底降级到本地数据
				this.matchResult = this.getLocalMatchResult()
				this.hasResult = true
				
				uni.showToast({
					title: '配对分析异常，使用本地数据',
					icon: 'none',
					duration: 2000
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 本地配对结果（当API失败时使用）
		getLocalMatchResult() {
			const myInfo = zodiacUtil.getZodiacInfo(this.myZodiac)
			const targetInfo = zodiacUtil.getZodiacInfo(this.targetZodiac)
			
			// 简单的配对逻辑
			const isBestMatch = myInfo.compatibility.best.includes(this.targetZodiac)
			const isGoodMatch = myInfo.compatibility.good.includes(this.targetZodiac)
			
			let analysisText = ''
			if (isBestMatch) {
				analysisText = `${this.myZodiac}和${this.targetZodiac}是非常般配的一对！你们在性格上互补，能够互相理解和支持。`
			} else if (isGoodMatch) {
				analysisText = `${this.myZodiac}和${this.targetZodiac}是比较和谐的组合，虽然偶有小摩擦，但总体来说相处愉快。`
			} else {
				analysisText = `${this.myZodiac}和${this.targetZodiac}需要更多的理解和包容，通过沟通和努力可以建立美好关系。`
			}
			
			return {
				title: `${this.myZodiac}💕${this.targetZodiac}`,
				malePerspective: analysisText,
				femalePerspective: '感情需要双方共同经营，真诚和理解是最重要的。',
				malePerspective2: `${this.myZodiac}的特点是${myInfo.personality}，建议在交往中发挥这些优势。`,
				femalePerspective2: `${this.targetZodiac}的特点是${targetInfo.personality}，了解对方的性格有助于更好相处。`,
				source: 'local',
				dataFrom: '传统生肖配对理论',
				updateTime: new Date().toLocaleString('zh-CN')
			}
		},

		// 获取生肖emoji
		getZodiacEmoji(zodiacName) {
			return zodiacUtil.getZodiacEmoji(zodiacName)
		},

		// 重新配对
		handleRetest() {
			this.hasResult = false
			this.myZodiac = ''
			this.targetZodiac = ''
			this.myZodiacIndex = -1
			this.targetZodiacIndex = -1
			this.matchResult = null
		},

		// 返回
		goBack() {
			uni.navigateBack({
				delta: 1
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.zodiac-page {
	min-height: 100vh;
	background: linear-gradient(180deg, #FFF9F9 0%, #FFFFFF 50%);
	padding-bottom: 40rpx;
}

// 状态栏+导航栏统一背景块
.top-bar-bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #FFFFFF; // 与原导航栏背景一致
	border-bottom: 1rpx solid #F0F0F0; // 保留原导航栏下边框
	z-index: 998; // 背景层，低于导航栏内容
}

/* 自定义导航栏 */
.custom-nav {
	position: fixed;
	left: 0;          // 必加：导航栏靠左对齐
	right: 0;         // 必加：导航栏靠右对齐（占满全屏宽度）
	top: 0;           // 补充：强制置顶，避免位置偏移
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 0 30rpx;
	z-index: 9999;    // 提高层级，确保不被任何元素遮挡
	background: #fff; // 临时加背景色，方便你确认导航栏位置（后续可保留）

	.nav-left {
		width: 80rpx;
		height: 88rpx;          // 让点击区域占满导航栏高度
		display: flex;
		align-items: center;    // 垂直居中
		justify-content: center;// 水平居中
		// 加点击反馈，确认可点击
		&:active {
			background-color: #f5f5f5;
		}

		.back-icon {
			font-size: 40rpx;
			// color: #E91E63; 
			// 已删除 background-color: #FFF0F5;
			padding: 10rpx 15rpx;
			border-radius: 8rpx;
			// 强制显示，避免字体问题导致不显示
			display: inline-block;
		}
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 34rpx;
		font-weight: 600;
		color: #333333;
	}

	.nav-right {
		width: 80rpx;
	}
}

/* 生肖选择区域 */
.zodiac-selection-section {
	padding: 60rpx 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.selection-card {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding: 60rpx 40rpx;
		box-shadow: 0 8rpx 30rpx rgba(233, 30, 99, 0.1);
		text-align: center;

		.card-title {
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 15rpx;
		}

		.card-subtitle {
			font-size: 26rpx;
			color: #999999;
			margin-bottom: 50rpx;
		}

		.zodiac-picker-wrapper {
			margin-bottom: 30rpx;
			text-align: left;
			
			.picker-label {
				font-size: 28rpx;
				color: #666666;
				margin-bottom: 15rpx;
			}

			.zodiac-display {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #F8F8F8;
				border-radius: 20rpx;
				padding: 25rpx 30rpx;
				border: 2rpx solid #E91E63;
				transition: all 0.3s;

				.zodiac-emoji {
					font-size: 40rpx;
					margin-right: 15rpx;
				}

				.zodiac-text {
					font-size: 32rpx;
					color: #333333;
					font-weight: 500;
				}
			}
			
			&:active .zodiac-display {
				background-color: #FFE5EE;
				transform: scale(0.98);
			}
		}

		.submit-btn {
			width: 100%;
			height: 90rpx;
			background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 600;
			border-radius: 45rpx;
			border: none;
			box-shadow: 0 8rpx 20rpx rgba(233, 30, 99, 0.3);

			&:disabled {
				opacity: 0.5;
			}

			&:active:not(:disabled) {
				opacity: 0.9;
			}
		}
	}

	.zodiac-icons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20rpx;
		margin-top: 50rpx;
		opacity: 0.3;

		.zodiac-icon {
			font-size: 48rpx;
			animation: float 3s ease-in-out infinite;

			&:nth-child(2n) {
				animation-delay: 0.5s;
			}

			&:nth-child(3n) {
				animation-delay: 1s;
			}
		}
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10rpx);
	}
}

/* 结果区域 */
.result-section {
	padding: 30rpx 25rpx 40rpx 25rpx;
}

/* 配对标题卡片 */
.match-title-card {
	background: linear-gradient(135deg, #FF6B9D 0%, #FFA5C6 100%);
	border-radius: 32rpx;
	padding: 60rpx 40rpx;
	text-align: center;
	box-shadow: 0 12rpx 40rpx rgba(233, 30, 99, 0.25);
	margin-bottom: 40rpx;

	.match-header {
		text-align: center;
		
		.zodiac-pair {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
			
			.zodiac-emoji-large {
				font-size: 120rpx;
			}
			
			.vs-text {
				font-size: 70rpx;
				margin: 0 30rpx;
			}
		}

		.match-title {
			font-size: 42rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin-bottom: 15rpx;
			letter-spacing: 2rpx;
		}

		.match-subtitle {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.9);
		}
	}
}

/* 通用标题 */
.section-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333333;
	margin-bottom: 25rpx;
	padding: 0 10rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* 配对分析 */
.match-analysis-section {
	margin-bottom: 40rpx;
	
	.analysis-card {
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 0;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
		
		.perspective-item {
			margin-bottom: 0;
			border-bottom: 1rpx solid #F5F5F5;
			
			&:last-child {
				border-bottom: none;
			}
			
			.perspective-header {
				display: flex;
				align-items: center;
				padding: 25rpx 30rpx 15rpx 30rpx;
				background: linear-gradient(135deg, #FFF9F9 0%, #FFFBFC 100%);
				
				.perspective-icon {
					font-size: 32rpx;
					margin-right: 15rpx;
				}
				
				.perspective-title {
					font-size: 30rpx;
					color: #E91E63;
					font-weight: 600;
				}
			}
			
			.perspective-content {
				font-size: 30rpx;
				color: #333333;
				line-height: 1.8;
				padding: 20rpx 30rpx 30rpx 30rpx;
				text-align: justify;
				background-color: #FFFFFF;
			}
		}
	}
}

/* 重新配对 */
.retest-btn {
	text-align: center;
	padding: 30rpx 40rpx;
	font-size: 30rpx;
	color: #666666;
	background-color: #F8F8F8;
	border-radius: 25rpx;
	margin: 20rpx 20rpx 30rpx 20rpx;
	border: 2rpx solid #E0E0E0;

	&:active {
		color: #E91E63;
		background-color: #FFF0F5;
		border-color: #E91E63;
	}
}

/* 数据来源说明 */
.data-source {
	display: flex;
	align-items: center;
	background-color: #E3F2FD;
	border-radius: 20rpx;
	padding: 25rpx 30rpx;
	margin-bottom: 30rpx;
	transition: all 0.3s;

	.source-icon {
		font-size: 32rpx;
		margin-right: 15rpx;
	}

	.source-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;

		.source-text {
			font-size: 28rpx;
			color: #1976D2;
			font-weight: 500;
		}

		.source-time {
			font-size: 24rpx;
			color: #64B5F6;
		}
	}

	// API数据特殊样式
	&.api-source {
		background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
		border-left: 6rpx solid #4CAF50;

		.source-icon {
			color: #4CAF50;
		}

		.source-text {
			color: #2E7D32;
		}

		.source-time {
			color: #66BB6A;
		}
	}
}

/* 免责声明 */
.disclaimer {
	background-color: #FFF3E0;
	border-radius: 20rpx;
	padding: 30rpx;
	border-left: 6rpx solid #FF9800;
	margin: 0 10rpx;

	.disclaimer-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #F57C00;
		margin-bottom: 20rpx;
	}

	.disclaimer-text {
		font-size: 26rpx;
		color: #666666;
		line-height: 2.0;
		text-align: justify;
	}
}

/* 底部占位 */
.bottom-placeholder {
	height: 60rpx;
}
</style>