xiangqinxiangmu/LiangZhiYUMao/pages/astrology/constellation-match.vue

<template>
	<view class="constellation-match-page">
		<!-- 自定义导航栏 -->
		<view class="custom-nav">
			<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="constellation-selection-section" v-if="!hasResult">
			<view class="selection-card">
				<view class="card-title">💕 星座配对测试</view>
				<view class="card-subtitle">看看你们的星座匹配度有多高</view>
				
				<!-- 我的星座选择 -->
				<view class="constellation-picker-wrapper">
					<view class="picker-label">我的星座</view>
					<picker mode="selector" :range="constellationNames" :value="myConstellationIndex" @change="onMyConstellationChange">
						<view class="constellation-display">
							<text class="constellation-emoji">{{ myConstellationEmoji }}</text>
							<text class="constellation-text">{{ myConstellation || '请选择' }}</text>
						</view>
					</picker>
				</view>

				<!-- 对方星座选择 -->
				<view class="constellation-picker-wrapper">
					<view class="picker-label">TA的星座</view>
					<picker mode="selector" :range="constellationNames" :value="targetConstellationIndex" @change="onTargetConstellationChange">
						<view class="constellation-display">
							<text class="constellation-emoji">{{ targetConstellationEmoji }}</text>
							<text class="constellation-text">{{ targetConstellation || '请选择' }}</text>
						</view>
					</picker>
				</view>

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

			<!-- 装饰性星座图标 -->
			<view class="constellation-icons">
				<text class="constellation-icon" v-for="(constellation, index) in allConstellations" :key="index">
					{{ constellation.emoji }}
				</text>
			</view>
		</view>

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

			<!-- 配对分数 -->
			<view class="score-section">
				<view class="section-title">💯 配对分数</view>
				<view class="score-card">
					<view class="score-main">
						<view class="score-circle" :style="{background: matchResult.scoreColor}">
							<text class="score-number">{{ matchResult.totalScore }}</text>
							<text class="score-unit">分</text>
						</view>
						<view class="score-level" :style="{background: matchResult.levelColor}">
							{{ matchResult.level }}
						</view>
					</view>
					<view class="score-breakdown">
						<view class="score-item" v-for="(item, index) in matchResult.scoreDetails" :key="index">
							<view class="score-item-header">
								<text class="score-item-icon">{{ item.icon }}</text>
								<text class="score-item-label">{{ item.label }}</text>
							</view>
							<view class="score-progress">
								<view class="progress-bar">
									<view class="progress-fill" :style="{width: item.score + '%', background: item.color}"></view>
								</view>
								<text class="progress-text">{{ item.score }}%</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- API专业分析 -->
			<view class="api-analysis-section" v-if="matchResult.apiGrade || matchResult.apiContent">
				<view class="section-title">🎯 专业分析</view>
				<view class="api-analysis-card">
					<!-- API评级 -->
					<view class="api-grade-item" v-if="matchResult.apiGrade">
						<view class="grade-header">
							<text class="grade-icon">⭐</text>
							<text class="grade-title">专业评级</text>
						</view>
						<text class="grade-content">{{ matchResult.apiGrade }}</text>
					</view>
					
					<!-- API详细内容 -->
					<view class="api-content-item" v-if="matchResult.apiContent">
						<view class="content-header">
							<text class="content-icon">📝</text>
							<text class="content-title">详细分析</text>
						</view>
						<text class="content-text">{{ matchResult.apiContent }}</text>
					</view>
				</view>
			</view>

			<!-- 配对分析 -->
			<view class="match-analysis-section">
				<view class="section-title">💝 深度解析</view>
				<view class="analysis-card">
					<!-- 优势分析 -->
					<view class="analysis-item" v-if="matchResult.advantages">
						<view class="analysis-header">
							<text class="analysis-icon">✨</text>
							<text class="analysis-title">配对优势</text>
						</view>
						<text class="analysis-content">{{ matchResult.advantages }}</text>
					</view>
					
					<!-- 挑战分析 -->
					<view class="analysis-item" v-if="matchResult.challenges">
						<view class="analysis-header">
							<text class="analysis-icon">⚠️</text>
							<text class="analysis-title">潜在挑战</text>
						</view>
						<text class="analysis-content">{{ matchResult.challenges }}</text>
					</view>
					
					<!-- 建议 -->
					<view class="analysis-item" v-if="matchResult.suggestions">
						<view class="analysis-header">
							<text class="analysis-icon">💡</text>
							<text class="analysis-title">相处建议</text>
						</view>
						<text class="analysis-content">{{ matchResult.suggestions }}</text>
					</view>
					
					<!-- 总结 -->
					<view class="analysis-item" v-if="matchResult.summary">
						<view class="analysis-header">
							<text class="analysis-icon">💖</text>
							<text class="analysis-title">配对总结</text>
						</view>
						<text class="analysis-content">{{ matchResult.summary }}</text>
					</view>
				</view>
			</view>

			<!-- 元素分析 -->
			<view class="element-analysis-section">
				<view class="section-title">🔥 元素分析</view>
				<view class="element-card">
					<view class="element-pair">
						<view class="element-item">
							<text class="element-name">{{ myConstellationInfo.element }}</text>
							<text class="element-desc">{{ getElementDescription(myConstellationInfo.element) }}</text>
						</view>
						<text class="element-vs">VS</text>
						<view class="element-item">
							<text class="element-name">{{ targetConstellationInfo.element }}</text>
							<text class="element-desc">{{ getElementDescription(targetConstellationInfo.element) }}</text>
						</view>
					</view>
					<view class="element-compatibility">
						<text class="compatibility-label">元素相容性</text>
						<text class="compatibility-result">{{ matchResult.elementCompatibility }}</text>
					</view>
				</view>
			</view>

			<!-- 星座特质对比 -->
			<view class="traits-comparison-section">
				<view class="section-title">🌟 特质对比</view>
				<view class="traits-card">
					<view class="traits-comparison">
						<view class="traits-column">
							<view class="traits-header">
								<text class="traits-emoji">{{ myConstellationEmoji }}</text>
								<text class="traits-name">{{ myConstellation }}</text>
							</view>
							<view class="trait-tag" v-for="(trait, index) in myConstellationInfo.traits" :key="index">
								{{ trait }}
							</view>
						</view>
						<view class="traits-column">
							<view class="traits-header">
								<text class="traits-emoji">{{ targetConstellationEmoji }}</text>
								<text class="traits-name">{{ targetConstellation }}</text>
							</view>
							<view class="trait-tag" v-for="(trait, index) in targetConstellationInfo.traits" :key="index">
								{{ trait }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 爱情指数预测 -->
			<view class="love-prediction-section">
				<view class="section-title">💕 爱情指数预测</view>
				<view class="prediction-grid">
					<view class="prediction-item" v-for="(item, index) in matchResult.lovePrediction" :key="index">
						<view class="prediction-icon-wrapper" :style="{background: item.bgColor}">
							<text class="prediction-icon">{{ item.icon }}</text>
						</view>
						<text class="prediction-label">{{ item.label }}</text>
						<text class="prediction-value">{{ item.value }}</text>
					</view>
				</view>
			</view>

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

			<!-- 数据来源说明 -->
			<view class="data-source" :class="{'api-source': matchResult.source === 'tianapi'}">
				<text class="source-icon">{{ matchResult.source === 'tianapi' ? '✓' : 'ℹ️' }}</text>
				<view class="source-content">
					<text class="source-text">数据来源：{{ matchResult.dataFrom || '星座占星学理论' }}</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 constellationUtil from '@/utils/constellation.js'

export default {
	data() {
		return {
			// 星座配对相关数据
			myConstellation: '',
			targetConstellation: '',
			myConstellationIndex: -1,
			targetConstellationIndex: -1,
			hasResult: false,
			matchResult: null,
			updateTime: '',
			
			// 星座信息
			myConstellationInfo: null,
			targetConstellationInfo: null,
			
			// 所有星座数据
			allConstellations: constellationUtil.getAllConstellations(),
			
			// 星座名称列表
			constellationNames: constellationUtil.getAllConstellations().map(c => c.name)
		}
	},

	computed: {
		// 我的星座emoji
		myConstellationEmoji() {
			return this.myConstellation ? constellationUtil.getConstellationEmoji(this.myConstellation) : '🔮'
		},
		
		// 对方星座emoji  
		targetConstellationEmoji() {
			return this.targetConstellation ? constellationUtil.getConstellationEmoji(this.targetConstellation) : '🔮'
		}
	},

	onLoad() {
		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}日`
		},

		// 我的星座选择
		onMyConstellationChange(e) {
			const index = e.detail.value
			this.myConstellationIndex = index
			this.myConstellation = this.constellationNames[index]
			this.myConstellationInfo = constellationUtil.getConstellationInfo(this.myConstellation)
		
		},
		
		// 对方星座选择
		onTargetConstellationChange(e) {
			const index = e.detail.value
			this.targetConstellationIndex = index
			this.targetConstellation = this.constellationNames[index]
			this.targetConstellationInfo = constellationUtil.getConstellationInfo(this.targetConstellation)
			
		},

		// 提交配对
		async handleSubmit() {
			if (!this.myConstellation || !this.targetConstellation) {
				uni.showToast({
					title: '请选择双方星座',
					icon: 'none'
				})
				return
			}

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

			try {
			
				
				// 生成配对结果
				this.matchResult = await this.generateMatchResult()
				
				this.hasResult = true
			

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

			} catch (error) {
				
				
				uni.showToast({
					title: '分析异常，请重试',
					icon: 'none',
					duration: 2000
				})
			} finally {
				uni.hideLoading()
			}
		},

		// 生成配对结果
		async generateMatchResult() {
			try {
				// 调用星座配对API（优先API，失败时使用本地数据）
				const matchData = await constellationUtil.getDetailedConstellationMatch(
					this.myConstellation, 
					this.targetConstellation
				)
				
				if (!matchData) {
					throw new Error('获取配对数据失败')
				}
				
				// 生成评分详情
				const scoreDetails = this.generateScoreDetails(matchData.totalScore)
				
				// 生成总结
				const summary = this.generateMatchSummary(matchData)
				
				return {
					title: matchData.title || `${this.myConstellation} × ${this.targetConstellation}`,
					totalScore: matchData.totalScore,
					level: matchData.level,
					levelColor: matchData.levelColor,
					scoreColor: matchData.scoreColor,
					scoreDetails: scoreDetails,
					advantages: matchData.advantages,
					challenges: matchData.challenges,
					suggestions: matchData.suggestions,
					summary: summary,
					elementCompatibility: matchData.elementCompatibility,
					lovePrediction: matchData.lovePrediction,
					// API特有数据
					apiGrade: matchData.apiGrade || '',
					apiContent: matchData.apiContent || '',
					source: matchData.source,
					dataFrom: matchData.dataFrom
				}
				
			} catch (error) {
				
				// 异常时使用本地算法
				return this.generateLocalMatchResult()
			}
		},
		
		// 生成本地配对结果（备用方案）
		generateLocalMatchResult() {
			const myInfo = this.myConstellationInfo
			const targetInfo = this.targetConstellationInfo
			
			// 计算基础匹配度
			const baseScore = this.calculateBaseScore(myInfo, targetInfo)
			
			// 生成详细分析
			const analysis = this.generateDetailedAnalysis(myInfo, targetInfo, baseScore)
			
			return {
				title: `${this.myConstellation} × ${this.targetConstellation}`,
				totalScore: baseScore.total,
				level: baseScore.level,
				levelColor: baseScore.levelColor,
				scoreColor: baseScore.scoreColor,
				scoreDetails: baseScore.details,
				advantages: analysis.advantages,
				challenges: analysis.challenges,
				suggestions: analysis.suggestions,
				summary: analysis.summary,
				elementCompatibility: analysis.elementCompatibility,
				lovePrediction: analysis.lovePrediction,
				apiGrade: '',
				apiContent: '',
				source: 'local',
				dataFrom: '星座占星学理论'
			}
		},
		
		// 生成评分详情
		generateScoreDetails(totalScore) {
			return [
				{
					label: '情感默契',
					icon: '💕',
					score: Math.min(totalScore + Math.floor(Math.random() * 10) - 5, 100),
					color: 'linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%)'
				},
				{
					label: '性格互补',
					icon: '🤝',
					score: Math.min(totalScore + Math.floor(Math.random() * 8) - 4, 100),
					color: 'linear-gradient(135deg, #2196F3 0%, #64B5F6 100%)'
				},
				{
					label: '沟通理解',
					icon: '💬',
					score: Math.min(totalScore + Math.floor(Math.random() * 12) - 6, 100),
					color: 'linear-gradient(135deg, #4CAF50 0%, #81C784 100%)'
				},
				{
					label: '长期发展',
					icon: '🌱',
					score: Math.min(totalScore + Math.floor(Math.random() * 6) - 3, 100),
					color: 'linear-gradient(135deg, #9C27B0 0%, #CE93D8 100%)'
				}
			]
		},
		
		// 生成配对总结
		generateMatchSummary(matchData) {
			const totalScore = matchData.totalScore
			const constellation1 = this.myConstellation
			const constellation2 = this.targetConstellation
			
			// 如果有API内容，优先使用
			if (matchData.apiContent) {
				return matchData.apiContent
			}
			
			// 否则使用本地生成的总结
			if (totalScore >= 90) {
				return `${constellation1}与${constellation2}的组合堪称天作之合，你们在各个方面都有着很好的默契，是令人羡慕的一对。只要继续保持这份美好，未来充满无限可能。`
			} else if (totalScore >= 80) {
				return `${constellation1}与${constellation2}是非常匹配的组合，你们能够互相理解和支持。虽然偶尔会有小摩擦，但总体来说是和谐美好的一对。`
			} else if (totalScore >= 70) {
				return `${constellation1}与${constellation2}的组合比较合适，需要双方多一些耐心和理解。通过磨合和沟通，你们能够建立稳定的关系。`
			} else if (totalScore >= 60) {
				return `${constellation1}与${constellation2}的组合需要更多努力，但这并不意味着不可能。只要双方都愿意为这份感情付出，就能克服困难。`
			} else {
				return `${constellation1}与${constellation2}的组合面临较大挑战，需要极大的包容和理解。不过，真爱面前没有不可能，关键在于是否愿意为对方改变。`
			}
		},

		// 计算基础匹配分数
		calculateBaseScore(myInfo, targetInfo) {
			// 元素相容性得分
			const elementScore = this.getElementCompatibilityScore(myInfo.element, targetInfo.element)
			
			// 性格互补性得分
			const personalityScore = this.getPersonalityCompatibilityScore(myInfo, targetInfo)
			
			// 传统匹配度得分
			const traditionalScore = this.getTraditionalCompatibilityScore(myInfo.name, targetInfo.name)
			
			// 综合计算
			const total = Math.round((elementScore * 0.3 + personalityScore * 0.4 + traditionalScore * 0.3))
			
			// 确定等级和颜色
			let level, levelColor, scoreColor
			
			if (total >= 90) {
				level = '天作之合'
				levelColor = 'linear-gradient(135deg, #FF6B9D 0%, #FFA5C6 100%)'
				scoreColor = 'linear-gradient(135deg, #FF6B9D 0%, #FFA5C6 100%)'
			} else if (total >= 80) {
				level = '非常匹配'
				levelColor = 'linear-gradient(135deg, #4CAF50 0%, #81C784 100%)'
				scoreColor = 'linear-gradient(135deg, #4CAF50 0%, #81C784 100%)'
			} else if (total >= 70) {
				level = '比较合适'
				levelColor = 'linear-gradient(135deg, #2196F3 0%, #64B5F6 100%)'
				scoreColor = 'linear-gradient(135deg, #2196F3 0%, #64B5F6 100%)'
			} else if (total >= 60) {
				level = '需要努力'
				levelColor = 'linear-gradient(135deg, #FF9800 0%, #FFB74D 100%)'
				scoreColor = 'linear-gradient(135deg, #FF9800 0%, #FFB74D 100%)'
			} else {
				level = '挑战较大'
				levelColor = 'linear-gradient(135deg, #9E9E9E 0%, #BDBDBD 100%)'
				scoreColor = 'linear-gradient(135deg, #9E9E9E 0%, #BDBDBD 100%)'
			}
			
			return {
				total: total,
				level: level,
				levelColor: levelColor,
				scoreColor: scoreColor,
				details: [
					{
						label: '情感默契',
						icon: '💕',
						score: Math.min(elementScore + 10, 100),
						color: 'linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%)'
					},
					{
						label: '性格互补',
						icon: '🤝',
						score: personalityScore,
						color: 'linear-gradient(135deg, #2196F3 0%, #64B5F6 100%)'
					},
					{
						label: '沟通理解',
						icon: '💬',
						score: Math.min(traditionalScore + 5, 100),
						color: 'linear-gradient(135deg, #4CAF50 0%, #81C784 100%)'
					},
					{
						label: '长期发展',
						icon: '🌱',
						score: Math.min(total - 5, 100),
						color: 'linear-gradient(135deg, #9C27B0 0%, #CE93D8 100%)'
					}
				]
			}
		},

		// 获取元素相容性得分
		getElementCompatibilityScore(element1, element2) {
			const compatibilityMatrix = {
				'火象': { '火象': 85, '土象': 65, '风象': 90, '水象': 45 },
				'土象': { '火象': 65, '土象': 80, '风象': 55, '水象': 95 },
				'风象': { '火象': 90, '土象': 55, '风象': 75, '水象': 70 },
				'水象': { '火象': 45, '土象': 95, '风象': 70, '水象': 85 }
			}
			
			return compatibilityMatrix[element1]?.[element2] || 70
		},

		// 获取性格相容性得分
		getPersonalityCompatibilityScore(myInfo, targetInfo) {
			// 基于传统星座配对理论的得分
			const isInBestList = myInfo.compatibility.best.includes(targetInfo.name)
			const isInGoodList = myInfo.compatibility.good.includes(targetInfo.name)
			const isInAvoidList = myInfo.compatibility.avoid.includes(targetInfo.name)
			
			if (isInBestList) return 95
			if (isInGoodList) return 80
			if (isInAvoidList) return 50
			
			return 70 // 中性匹配
		},

		// 获取传统配对得分
		getTraditionalCompatibilityScore(constellation1, constellation2) {
			// 反向查找，确保双向匹配
			const info1 = constellationUtil.getConstellationInfo(constellation1)
			const info2 = constellationUtil.getConstellationInfo(constellation2)
			
			let score1 = 70, score2 = 70
			
			if (info1.compatibility.best.includes(constellation2)) score1 = 95
			else if (info1.compatibility.good.includes(constellation2)) score1 = 80
			else if (info1.compatibility.avoid.includes(constellation2)) score1 = 50
			
			if (info2.compatibility.best.includes(constellation1)) score2 = 95
			else if (info2.compatibility.good.includes(constellation1)) score2 = 80
			else if (info2.compatibility.avoid.includes(constellation1)) score2 = 50
			
			return Math.round((score1 + score2) / 2)
		},

		// 生成详细分析
		generateDetailedAnalysis(myInfo, targetInfo, baseScore) {
			const myElement = myInfo.element
			const targetElement = targetInfo.element
			const totalScore = baseScore.total
			
			// 生成优势分析
			const advantages = this.generateAdvantages(myInfo, targetInfo, myElement, targetElement)
			
			// 生成挑战分析
			const challenges = this.generateChallenges(myInfo, targetInfo, myElement, targetElement)
			
			// 生成建议
			const suggestions = this.generateSuggestions(myInfo, targetInfo, totalScore)
			
			// 生成总结
			const summary = this.generateSummary(myInfo, targetInfo, totalScore)
			
			// 元素相容性描述
			const elementCompatibility = this.getElementCompatibilityDescription(myElement, targetElement)
			
			// 爱情指数预测
			const lovePrediction = this.generateLovePrediction(myInfo, targetInfo, totalScore)
			
			return {
				advantages,
				challenges,
				suggestions,
				summary,
				elementCompatibility,
				lovePrediction
			}
		},

		// 生成优势分析
		generateAdvantages(myInfo, targetInfo, myElement, targetElement) {
			const advantages = []
			
			// 基于元素的优势
			if (myElement === targetElement) {
				advantages.push('你们属于同一元素，有着相似的价值观和生活节奏')
			} else if (
				(myElement === '火象' && targetElement === '风象') ||
				(myElement === '风象' && targetElement === '火象')
			) {
				advantages.push('火象与风象的组合充满激情与创意，能够互相激发潜能')
			} else if (
				(myElement === '土象' && targetElement === '水象') ||
				(myElement === '水象' && targetElement === '土象')
			) {
				advantages.push('土象与水象的结合稳定而温馨，能够建立深厚的情感基础')
			}
			
			// 基于性格特质的优势
			const commonTraits = myInfo.traits.filter(trait => targetInfo.traits.includes(trait))
			if (commonTraits.length > 0) {
				advantages.push(`你们都具有${commonTraits.join('、')}的特质，容易产生共鸣`)
			}
			
			// 基于星座特性的优势
			if (myInfo.compatibility.best.includes(targetInfo.name)) {
				advantages.push('从传统占星学角度来看，你们是非常理想的配对组合')
			}
			
			return advantages.join('；') || '你们的组合有着独特的魅力，能够在相处中发现彼此的闪光点。'
		},

		// 生成挑战分析
		generateChallenges(myInfo, targetInfo, myElement, targetElement) {
			const challenges = []
			
			// 基于元素的挑战
			if (
				(myElement === '火象' && targetElement === '水象') ||
				(myElement === '水象' && targetElement === '火象')
			) {
				challenges.push('火象与水象的组合可能在表达方式上存在差异，需要更多理解')
			} else if (
				(myElement === '土象' && targetElement === '风象') ||
				(myElement === '风象' && targetElement === '土象')
			) {
				challenges.push('土象的稳重与风象的多变可能产生摩擦，需要找到平衡点')
			}
			
			// 基于避免列表的挑战
			if (myInfo.compatibility.avoid.includes(targetInfo.name)) {
				challenges.push('你们的性格差异较大，需要更多的耐心和包容来磨合')
			}
			
			// 通用挑战
			challenges.push('任何关系都需要双方的努力和妥协，保持开放的沟通很重要')
			
			return challenges.join('；')
		},

		// 生成建议
		generateSuggestions(myInfo, targetInfo, totalScore) {
			const suggestions = []
			
			if (totalScore >= 80) {
				suggestions.push('你们的匹配度很高，要珍惜这份缘分，在相处中保持真诚和理解')
			} else if (totalScore >= 60) {
				suggestions.push('通过增进了解和有效沟通，你们的关系会更加稳固')
			} else {
				suggestions.push('虽然挑战较大，但只要双方都愿意努力，任何困难都可以克服')
			}
			
			// 基于星座特性的建议
			suggestions.push(`理解${myInfo.name}的${myInfo.personality}和${targetInfo.name}的${targetInfo.personality}，互相欣赏对方的独特之处`)
			
			suggestions.push('记住，星座只是参考，真正的爱情需要用心经营')
			
			return suggestions.join('；')
		},

		// 生成总结
		generateSummary(myInfo, targetInfo, totalScore) {
			if (totalScore >= 90) {
				return `${myInfo.name}与${targetInfo.name}的组合堪称天作之合，你们在各个方面都有着很好的默契，是令人羡慕的一对。只要继续保持这份美好，未来充满无限可能。`
			} else if (totalScore >= 80) {
				return `${myInfo.name}与${targetInfo.name}是非常匹配的组合，你们能够互相理解和支持。虽然偶尔会有小摩擦，但总体来说是和谐美好的一对。`
			} else if (totalScore >= 70) {
				return `${myInfo.name}与${targetInfo.name}的组合比较合适，需要双方多一些耐心和理解。通过磨合和沟通，你们能够建立稳定的关系。`
			} else if (totalScore >= 60) {
				return `${myInfo.name}与${targetInfo.name}的组合需要更多努力，但这并不意味着不可能。只要双方都愿意为这份感情付出，就能克服困难。`
			} else {
				return `${myInfo.name}与${targetInfo.name}的组合面临较大挑战，需要极大的包容和理解。不过，真爱面前没有不可能，关键在于是否愿意为对方改变。`
			}
		},

		// 获取元素相容性描述
		getElementCompatibilityDescription(element1, element2) {
			const descriptions = {
				'火象火象': '同为火象星座，你们都充满激情和活力，能够互相理解对方的冲动和热情',
				'火象土象': '火象的激情与土象的稳重形成互补，但需要找到节奏的平衡点',
				'火象风象': '火象与风象的结合如同火遇风，能够互相激发，创造出更大的能量',
				'火象水象': '火象与水象的组合对比强烈，需要更多的理解和包容',
				'土象土象': '同为土象星座，你们都追求稳定和安全感，能够建立坚实的关系基础',
				'土象风象': '土象的踏实与风象的灵活可能产生分歧，需要相互学习和适应',
				'土象水象': '土象与水象的组合非常和谐，既有稳定性又有情感深度',
				'风象风象': '同为风象星座，你们都重视精神交流，思维活跃，有很多共同话题',
				'风象水象': '风象的理性与水象的感性形成有趣的对比，能够互相学习',
				'水象水象': '同为水象星座，你们情感丰富，能够深度理解彼此的内心世界'
			}
			
			const key = element1 + element2
			return descriptions[key] || descriptions[element2 + element1] || '你们的元素组合有着独特的化学反应'
		},

		// 生成爱情指数预测
		generateLovePrediction(myInfo, targetInfo, totalScore) {
			const baseScore = totalScore
			
			return [
				{
					label: '初见印象',
					icon: '👀',
					value: Math.min(baseScore + Math.floor(Math.random() * 10) - 5, 100) + '%',
					bgColor: 'linear-gradient(135deg, #FFB6C1 0%, #FFE4E1 100%)'
				},
				{
					label: '恋爱甜蜜度',
					icon: '🍯',
					value: Math.min(baseScore + Math.floor(Math.random() * 15) - 7, 100) + '%',
					bgColor: 'linear-gradient(135deg, #FF6B9D 0%, #FFA5C6 100%)'
				},
				{
					label: '长期稳定性',
					icon: '🏠',
					value: Math.min(baseScore + Math.floor(Math.random() * 8) - 4, 100) + '%',
					bgColor: 'linear-gradient(135deg, #4CAF50 0%, #81C784 100%)'
				},
				{
					label: '婚姻契合度',
					icon: '💍',
					value: Math.min(baseScore + Math.floor(Math.random() * 12) - 6, 100) + '%',
					bgColor: 'linear-gradient(135deg, #9C27B0 0%, #CE93D8 100%)'
				}
			]
		},

		// 获取元素描述
		getElementDescription(element) {
			const descriptions = {
				'火象': '热情、积极、冲动',
				'土象': '稳重、务实、踏实',
				'风象': '理智、灵活、善变',
				'水象': '感性、直觉、温柔'
			}
			return descriptions[element] || element
		},

		// 重新配对
		handleRetest() {
			this.hasResult = false
			this.myConstellation = ''
			this.targetConstellation = ''
			this.myConstellationIndex = -1
			this.targetConstellationIndex = -1
			this.matchResult = null
			this.myConstellationInfo = null
			this.targetConstellationInfo = null
		},

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

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

/* 自定义导航栏 */
.custom-nav {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 0 30rpx;
	background-color: #FFFFFF;
	border-bottom: 1rpx solid #F0F0F0;

	.nav-left {
		width: 80rpx;

		.back-icon {
			font-size: 40rpx;
			color: #333333;
		}
	}

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

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

/* 星座选择区域 */
.constellation-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;
		}

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

			.constellation-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;

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

				.constellation-text {
					font-size: 32rpx;
					color: #333333;
					font-weight: 500;
				}
			}
			
			&:active .constellation-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;
			}
		}
	}

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

		.constellation-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;
		
		.constellation-pair {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
			
			.constellation-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;
}

/* 配对分数 */
.score-section {
	margin-bottom: 40rpx;
	
	.score-card {
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
		
		.score-main {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #F0F0F0;

			.score-circle {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;

				.score-number {
					font-size: 48rpx;
					font-weight: bold;
					line-height: 1;
				}

				.score-unit {
					font-size: 24rpx;
					margin-top: 5rpx;
				}
			}

			.score-level {
				padding: 15rpx 40rpx;
				border-radius: 30rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: 600;
			}
		}

		.score-breakdown {
			.score-item {
				margin-bottom: 25rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.score-item-header {
					display: flex;
					align-items: center;
					margin-bottom: 12rpx;

					.score-item-icon {
						font-size: 28rpx;
						margin-right: 12rpx;
					}

					.score-item-label {
						font-size: 28rpx;
						color: #333333;
						font-weight: 500;
					}
				}

				.score-progress {
					display: flex;
					align-items: center;

					.progress-bar {
						flex: 1;
						height: 12rpx;
						background-color: #F0F0F0;
						border-radius: 6rpx;
						overflow: hidden;
						margin-right: 15rpx;

						.progress-fill {
							height: 100%;
							border-radius: 6rpx;
							transition: width 0.6s ease;
						}
					}

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

/* API专业分析 */
.api-analysis-section {
	margin-bottom: 40rpx;
	
	.api-analysis-card {
		background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%);
		border-radius: 24rpx;
		padding: 0;
		box-shadow: 0 6rpx 24rpx rgba(76, 175, 80, 0.15);
		overflow: hidden;
		border-left: 6rpx solid #4CAF50;
		
		.api-grade-item, .api-content-item {
			padding: 30rpx;
			border-bottom: 1rpx solid rgba(76, 175, 80, 0.1);
			
			&:last-child {
				border-bottom: none;
			}
			
			.grade-header, .content-header {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;
				
				.grade-icon, .content-icon {
					font-size: 32rpx;
					margin-right: 15rpx;
				}
				
				.grade-title, .content-title {
					font-size: 30rpx;
					color: #2E7D32;
					font-weight: 600;
				}
			}
			
			.grade-content, .content-text {
				font-size: 28rpx;
				color: #333333;
				line-height: 1.8;
				text-align: justify;
				margin-left: 47rpx;
			}
			
			.grade-content {
				color: #4CAF50;
				font-weight: 500;
			}
		}
	}
}

/* 配对分析 */
.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;
		
		.analysis-item {
			padding: 30rpx;
			border-bottom: 1rpx solid #F5F5F5;
			
			&:last-child {
				border-bottom: none;
			}
			
			.analysis-header {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;
				
				.analysis-icon {
					font-size: 32rpx;
					margin-right: 15rpx;
				}
				
				.analysis-title {
					font-size: 30rpx;
					color: #E91E63;
					font-weight: 600;
				}
			}
			
			.analysis-content {
				font-size: 28rpx;
				color: #333333;
				line-height: 1.8;
				text-align: justify;
				margin-left: 47rpx;
			}
		}
	}
}

/* 元素分析 */
.element-analysis-section {
	margin-bottom: 40rpx;
	
	.element-card {
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
		
		.element-pair {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			
			.element-item {
				flex: 1;
				text-align: center;
				
				.element-name {
					display: block;
					font-size: 32rpx;
					color: #E91E63;
					font-weight: 600;
					margin-bottom: 10rpx;
				}
				
				.element-desc {
					font-size: 24rpx;
					color: #666666;
				}
			}
			
			.element-vs {
				font-size: 28rpx;
				color: #999999;
				font-weight: 600;
				margin: 0 20rpx;
			}
		}
		
		.element-compatibility {
			background: linear-gradient(135deg, #F3E5F5 0%, #FFEEF5 100%);
			border-radius: 15rpx;
			padding: 25rpx;
			text-align: center;
			
			.compatibility-label {
				display: block;
				font-size: 24rpx;
				color: #9C27B0;
				margin-bottom: 10rpx;
			}
			
			.compatibility-result {
				font-size: 28rpx;
				color: #333333;
				line-height: 1.6;
			}
		}
	}
}

/* 特质对比 */
.traits-comparison-section {
	margin-bottom: 40rpx;
	
	.traits-card {
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
		
		.traits-comparison {
			display: flex;
			gap: 30rpx;
			
			.traits-column {
				flex: 1;
				
				.traits-header {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;
					
					.traits-emoji {
						font-size: 40rpx;
						margin-right: 10rpx;
					}
					
					.traits-name {
						font-size: 28rpx;
						color: #333333;
						font-weight: 600;
					}
				}
				
				.trait-tag {
					display: inline-block;
					background: linear-gradient(135deg, #E3F2FD 0%, #F0F8FF 100%);
					color: #2196F3;
					font-size: 22rpx;
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
					margin: 5rpx;
					border: 1rpx solid #2196F3;
				}
			}
		}
	}
}

/* 爱情指数预测 */
.love-prediction-section {
	margin-bottom: 40rpx;

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

		.prediction-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;
			border-radius: 15rpx;
			padding: 30rpx 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

			.prediction-icon-wrapper {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 15rpx;

				.prediction-icon {
					font-size: 40rpx;
				}
			}

			.prediction-label {
				font-size: 24rpx;
				color: #999999;
				margin-bottom: 8rpx;
			}

			.prediction-value {
				font-size: 28rpx;
				color: #333333;
				font-weight: 600;
			}
		}
	}
}

/* 重新配对 */
.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>