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

<template>
	<view class="bazi-match-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<view class="navbar-title">八字配对</view>
				<view class="navbar-right"></view>
			</view>
		</view>

		<!-- 输入区域 -->
		<view class="input-section" v-if="!hasResult">
			<!-- 我的八字 -->
			<view class="section-card">
				<view class="section-title">👤 我的八字</view>
				<view class="my-bazi-info" v-if="myBaziData">
					<view class="bazi-display-mini">
						<view class="bazi-pillar-mini" v-for="(pillar, key) in myBaziData.baziAnalysis" :key="key" v-if="key !== 'analysis' && key !== 'birthInfo' && key !== 'baziString' && key !== 'rizhu' && key !== 'riganWuxing'">
							<view class="pillar-value-mini">
								<text class="gan-mini">{{ pillar.gan }}</text>
								<text class="zhi-mini">{{ pillar.zhi }}</text>
							</view>
						</view>
					</view>
					<view class="bazi-info-text">
						{{ myBaziData.baziAnalysis.baziString }}
					</view>
				</view>
				<view class="no-bazi" v-else>
					<text class="no-bazi-text">请先完成八字测算</text>
					<button class="go-bazi-btn" @click="goBaziTest">去测算八字</button>
				</view>
			</view>

			<!-- 对方八字 -->
			<view class="section-card">
				<view class="section-title">👥 对方八字</view>
				<view class="input-group">
					<view class="input-item">
						<text class="input-label">对方出生日期</text>
						<picker 
							mode="date" 
							:value="targetBirthDate"
							@change="onTargetDateChange"
							class="date-picker"
						>
							<view class="picker-display">
								{{ targetBirthDateDisplay }}
							</view>
						</picker>
					</view>
					
					<view class="input-item">
						<text class="input-label">对方出生时辰</text>
						<picker 
							:range="timeRanges"
							:value="targetTimeIndex"
							@change="onTargetTimeChange"
							class="time-picker"
						>
							<view class="picker-display">
								{{ targetTimeDisplay }}
							</view>
						</picker>
					</view>
				</view>
				
				<button class="match-btn" @click="startMatch" :disabled="!canMatch">
					开始配对
				</button>
			</view>
		</view>

		<!-- 结果区域 -->
		<view class="result-section" v-if="hasResult">
			<!-- 配对总览 -->
			<view class="match-overview-card">
				<view class="section-title">💕 配对结果</view>
				<view class="match-score-display">
					<view class="score-circle" :style="{background: matchResult.levelColor}">
						<text class="score-number">{{ matchResult.totalScore }}</text>
						<text class="score-unit">分</text>
					</view>
					<view class="match-level">{{ matchResult.level }}</view>
				</view>
				
				<view class="bazi-comparison">
					<view class="comparison-item">
						<text class="comparison-label">我的八字</text>
						<text class="comparison-bazi">{{ myBaziString }}</text>
					</view>
					<view class="vs-divider">VS</view>
					<view class="comparison-item">
						<text class="comparison-label">对方八字</text>
						<text class="comparison-bazi">{{ targetBaziString }}</text>
					</view>
				</view>
			</view>

			<!-- 详细配对分析 -->
			<view class="detailed-analysis-card">
				<view class="section-title">📊 详细分析</view>
				<view class="analysis-tabs">
					<view 
						class="tab-item"
						:class="{active: activeTab === tab.key}"
						v-for="tab in analysisTabs"
						:key="tab.key"
						@click="switchTab(tab.key)"
					>
						{{ tab.name }}
					</view>
				</view>
				
				<view class="tab-content">
					<!-- 日干配对 -->
					<view class="analysis-content" v-if="activeTab === 'rigan'">
						<view class="match-item">
							<view class="match-header">
								<text class="match-icon">🔮</text>
								<text class="match-title">日干配对</text>
								<text class="match-score">{{ matchResult.riganMatch.score }}分</text>
							</view>
							<text class="match-desc">{{ matchResult.riganMatch.description }}</text>
						</view>
					</view>
					
					<!-- 五行配对 -->
					<view class="analysis-content" v-if="activeTab === 'wuxing'">
						<view class="match-item">
							<view class="match-header">
								<text class="match-icon">⚡</text>
								<text class="match-title">五行配对</text>
								<text class="match-score">{{ matchResult.wuxingMatch.score }}分</text>
							</view>
							<text class="match-desc">{{ matchResult.wuxingMatch.description }}</text>
						</view>
					</view>
					
					<!-- 纳音配对 -->
					<view class="analysis-content" v-if="activeTab === 'nayin'">
						<view class="match-item">
							<view class="match-header">
								<text class="match-icon">🎵</text>
								<text class="match-title">纳音配对</text>
								<text class="match-score">{{ matchResult.nayinMatch.score }}分</text>
							</view>
							<text class="match-desc">{{ matchResult.nayinMatch.description }}</text>
						</view>
					</view>
					
					<!-- 生肖配对 -->
					<view class="analysis-content" v-if="activeTab === 'shengxiao'">
						<view class="match-item">
							<view class="match-header">
								<text class="match-icon">🐉</text>
								<text class="match-title">生肖配对</text>
								<text class="match-score">{{ matchResult.shengxiaoMatch.score }}分</text>
							</view>
							<text class="match-desc">{{ matchResult.shengxiaoMatch.description }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 配对优势 -->
			<view class="advantages-card">
				<view class="section-title">✨ 配对优势</view>
				<view class="advantages-list">
					<view 
						class="advantage-item" 
						v-for="(advantage, index) in matchResult.advantages" 
						:key="index"
					>
						<text class="advantage-icon">💝</text>
						<text class="advantage-text">{{ advantage }}</text>
					</view>
				</view>
			</view>

			<!-- 挑战与建议 -->
			<view class="challenges-card">
				<view class="section-title">⚠️ 需要注意</view>
				<view class="challenges-list">
					<view 
						class="challenge-item" 
						v-for="(challenge, index) in matchResult.challenges" 
						:key="index"
					>
						<text class="challenge-icon">🔍</text>
						<text class="challenge-text">{{ challenge }}</text>
					</view>
				</view>
			</view>

			<!-- 相处建议 -->
			<view class="suggestions-card">
				<view class="section-title">💡 相处建议</view>
				<view class="suggestions-list">
					<view 
						class="suggestion-item" 
						v-for="(suggestion, index) in matchResult.suggestions" 
						:key="index"
					>
						<text class="suggestion-icon">🌟</text>
						<text class="suggestion-text">{{ suggestion }}</text>
					</view>
				</view>
			</view>

			<!-- 配对总结 -->
			<view class="summary-card">
				<view class="section-title">📝 配对总结</view>
				<text class="summary-text">{{ matchResult.summary }}</text>
			</view>

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

<script>
import baziUtil from '@/utils/bazi.js'

export default {
	data() {
		return {
			// 我的八字数据
			myBaziData: null,
			
			// 对方输入数据
			targetBirthDate: '',
			targetBirthDateDisplay: '请选择对方出生日期',
			targetTimeIndex: 0,
			targetTimeDisplay: '子时 (23:00-01:00)',
			
			// 时辰选择器数据
			timeRanges: [
				'子时 (23:00-01:00)', '丑时 (01:00-03:00)', '寅时 (03:00-05:00)',
				'卯时 (05:00-07:00)', '辰时 (07:00-09:00)', '巳时 (09:00-11:00)',
				'午时 (11:00-13:00)', '未时 (13:00-15:00)', '申时 (15:00-17:00)',
				'酉时 (17:00-19:00)', '戌时 (19:00-21:00)', '亥时 (21:00-23:00)'
			],
			
			// 结果数据
			hasResult: false,
			matchResult: null,
			targetBaziData: null,
			
			// UI状态
			activeTab: 'rigan',
			analysisTabs: [
				{ key: 'rigan', name: '日干' },
				{ key: 'wuxing', name: '五行' },
				{ key: 'nayin', name: '纳音' },
				{ key: 'shengxiao', name: '生肖' }
			]
		}
	},
	
	computed: {
		// 是否可以开始配对
		canMatch() {
			return this.myBaziData && this.targetBirthDate
		},
		
		// 获取时辰对应的小时数
		targetSelectedHour() {
			const hourMap = [23, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21]
			return hourMap[this.targetTimeIndex]
		},
		
		// 我的八字字符串
		myBaziString() {
			return this.myBaziData ? this.myBaziData.baziAnalysis.baziString : ''
		},
		
		// 对方八字字符串
		targetBaziString() {
			return this.targetBaziData ? this.targetBaziData.baziString : ''
		}
	},
	
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 跳转到八字测算
		goBaziTest() {
			uni.navigateTo({
				url: '/pages/astrology/bazi'
			})
		},
		
		// 对方日期选择
		onTargetDateChange(e) {
			this.targetBirthDate = e.detail.value
			this.targetBirthDateDisplay = e.detail.value
		},
		
		// 对方时辰选择
		onTargetTimeChange(e) {
			this.targetTimeIndex = e.detail.value
			this.targetTimeDisplay = this.timeRanges[e.detail.value]
		},
		
		// 开始配对
		async startMatch() {
			if (!this.canMatch) {
				uni.showToast({
					title: '请完善配对信息',
					icon: 'none'
				})
				return
			}
			
			uni.showLoading({
				title: '配对分析中...',
				mask: true
			})
			
			try {
			
				
				// 计算对方八字
				const targetBirthDateObj = new Date(this.targetBirthDate + ' 12:00:00')
				const targetBaziData = baziUtil.calculateBaZi(targetBirthDateObj, this.targetSelectedHour)
				
				
				
				// 进行配对分析
				const matchAnalysis = baziUtil.analyzeBaziMatch(
					this.myBaziData.baziAnalysis,
					targetBaziData
				)
				
			
				
				// 保存结果
				this.targetBaziData = targetBaziData
				this.matchResult = matchAnalysis
				this.hasResult = true
				
				
				
				// 保存到本地存储
				uni.setStorageSync('baziMatchResult', {
					myBazi: this.myBaziData,
					targetBirthDate: this.targetBirthDate,
					targetTimeIndex: this.targetTimeIndex,
					targetBaziData: targetBaziData,
					matchResult: matchAnalysis,
					lastUpdate: new Date().getTime()
				})
				
			} catch (error) {
			
				uni.showToast({
					title: '配对分析异常，请重试',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 切换分析标签
		switchTab(tabKey) {
			this.activeTab = tabKey
		},
		
		// 重新配对
		resetMatch() {
			this.hasResult = false
			this.matchResult = null
			this.targetBaziData = null
			this.targetBirthDate = ''
			this.targetBirthDateDisplay = '请选择对方出生日期'
			this.targetTimeIndex = 0
			this.targetTimeDisplay = '子时 (23:00-01:00)'
		}
	},
	
	onLoad() {
		// 获取我的八字数据
		const currentBazi = uni.getStorageSync('currentBazi')
		if (currentBazi) {
			this.myBaziData = currentBazi
			
		} else {
			// 尝试从八字测算结果获取
			const baziResult = uni.getStorageSync('baziResult')
			if (baziResult && baziResult.baziData) {
				this.myBaziData = {
					baziAnalysis: baziResult.baziData,
					birthDate: baziResult.birthDate,
					timeIndex: baziResult.timeIndex
				}
			
			}
		}
		
		// 尝试恢复之前的配对结果
		const savedMatchResult = uni.getStorageSync('baziMatchResult')
		if (savedMatchResult && savedMatchResult.matchResult) {
			const timeDiff = new Date().getTime() - savedMatchResult.lastUpdate
			// 如果在1小时内，可以恢复结果
			if (timeDiff < 60 * 60 * 1000) {
				this.targetBirthDate = savedMatchResult.targetBirthDate
				this.targetBirthDateDisplay = savedMatchResult.targetBirthDate
				this.targetTimeIndex = savedMatchResult.targetTimeIndex
				this.targetTimeDisplay = this.timeRanges[savedMatchResult.targetTimeIndex]
				this.targetBaziData = savedMatchResult.targetBaziData
				this.matchResult = savedMatchResult.matchResult
				this.hasResult = true
				
			
			}
		}
	}
}
</script>

<style scoped>
.bazi-match-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #ff9a56 0%, #ff6b9d 100%);
	padding-bottom: 40rpx;
}

/* 自定义导航栏 */
.custom-navbar {
	background: rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.navbar-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 0 30rpx;
	padding-top: 40rpx;
}

.navbar-left {
	width: 80rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	font-size: 36rpx;
	color: #ffffff;
	font-weight: bold;
}

.navbar-title {
	flex: 1;
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
	color: #ffffff;
}

.navbar-right {
	width: 80rpx;
}

/* 输入区域 */
.input-section {
	padding: 40rpx 30rpx;
	padding-top: 168rpx;
}

.section-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
}

.section-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 30rpx;
	text-align: center;
}

/* 我的八字显示 */
.my-bazi-info {
	text-align: center;
}

.bazi-display-mini {
	display: flex;
	justify-content: center;
	gap: 20rpx;
	margin-bottom: 20rpx;
}

.bazi-pillar-mini {
	text-align: center;
}

.pillar-value-mini {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.gan-mini,
.zhi-mini {
	width: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	text-align: center;
	font-size: 28rpx;
	font-weight: bold;
	color: #ffffff;
	border-radius: 50%;
}

.gan-mini {
	background: linear-gradient(135deg, #FF6B9D 0%, #FFA5C6 100%);
}

.zhi-mini {
	background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
}

.bazi-info-text {
	font-size: 32rpx;
	color: #333333;
	font-weight: bold;
}

.no-bazi {
	text-align: center;
	padding: 60rpx 0;
}

.no-bazi-text {
	font-size: 32rpx;
	color: #999999;
	margin-bottom: 40rpx;
	display: block;
}

.go-bazi-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #ffffff;
	border: none;
	border-radius: 50rpx;
	height: 80rpx;
	padding: 0 60rpx;
	font-size: 32rpx;
	font-weight: bold;
}

/* 对方信息输入 */
.input-group {
	margin-bottom: 40rpx;
}

.input-item {
	margin-bottom: 30rpx;
}

.input-label {
	font-size: 32rpx;
	font-weight: bold;
	color: #666666;
	display: block;
	margin-bottom: 20rpx;
}

.date-picker,
.time-picker {
	width: 100%;
}

.picker-display {
	background: #f8f9fa;
	border: 2rpx solid #e9ecef;
	border-radius: 16rpx;
	padding: 24rpx 30rpx;
	font-size: 32rpx;
	color: #333333;
	text-align: center;
}

.match-btn {
	background: linear-gradient(135deg, #ff9a56 0%, #ff6b9d 100%);
	color: #ffffff;
	border: none;
	border-radius: 50rpx;
	height: 100rpx;
	font-size: 36rpx;
	font-weight: bold;
	width: 100%;
}

.match-btn[disabled] {
	background: #cccccc;
	color: #999999;
}

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

.match-overview-card,
.detailed-analysis-card,
.advantages-card,
.challenges-card,
.suggestions-card,
.summary-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
}

/* 配对总览 */
.match-score-display {
	text-align: center;
	margin-bottom: 40rpx;
}

.score-circle {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20rpx;
	color: #ffffff;
}

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

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

.match-level {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

/* 八字对比 */
.bazi-comparison {
	display: flex;
	align-items: center;
	padding: 30rpx;
	background: #f8f9fa;
	border-radius: 16rpx;
}

.comparison-item {
	flex: 1;
	text-align: center;
}

.comparison-label {
	font-size: 24rpx;
	color: #999999;
	margin-bottom: 10rpx;
	display: block;
}

.comparison-bazi {
	font-size: 28rpx;
	color: #333333;
	font-weight: bold;
}

.vs-divider {
	width: 80rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	color: #ff6b9d;
}

/* 分析标签 */
.analysis-tabs {
	display: flex;
	margin-bottom: 30rpx;
	background: #f0f0f0;
	border-radius: 16rpx;
	padding: 8rpx;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 20rpx;
	font-size: 28rpx;
	color: #666666;
	border-radius: 12rpx;
	transition: all 0.3s ease;
}

.tab-item.active {
	background: linear-gradient(135deg, #ff9a56 0%, #ff6b9d 100%);
	color: #ffffff;
	font-weight: bold;
}

/* 分析内容 */
.analysis-content {
	opacity: 1;
}

.match-item {
	padding: 30rpx;
	background: #f8f9fa;
	border-radius: 16rpx;
}

.match-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.match-icon {
	font-size: 28rpx;
	margin-right: 16rpx;
}

.match-title {
	flex: 1;
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.match-score {
	font-size: 30rpx;
	font-weight: bold;
	color: #ff6b9d;
}

.match-desc {
	font-size: 28rpx;
	color: #666666;
	line-height: 1.6;
}

/* 配对优势 */
.advantages-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.advantage-item {
	display: flex;
	align-items: flex-start;
	gap: 20rpx;
}

.advantage-icon {
	font-size: 28rpx;
	margin-top: 6rpx;
}

.advantage-text {
	flex: 1;
	font-size: 28rpx;
	color: #333333;
	line-height: 1.6;
}

/* 挑战列表 */
.challenges-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.challenge-item {
	display: flex;
	align-items: flex-start;
	gap: 20rpx;
}

.challenge-icon {
	font-size: 28rpx;
	margin-top: 6rpx;
	color: #ff6b9d;
}

.challenge-text {
	flex: 1;
	font-size: 28rpx;
	color: #333333;
	line-height: 1.6;
}

/* 建议列表 */
.suggestions-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.suggestion-item {
	display: flex;
	align-items: flex-start;
	gap: 20rpx;
}

.suggestion-icon {
	font-size: 28rpx;
	margin-top: 6rpx;
	color: #4CAF50;
}

.suggestion-text {
	flex: 1;
	font-size: 28rpx;
	color: #333333;
	line-height: 1.6;
}

/* 总结文本 */
.summary-text {
	font-size: 30rpx;
	color: #333333;
	line-height: 1.8;
	text-align: justify;
}

/* 重新配对按钮 */
.retest-btn {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	border: 2rpx solid rgba(255, 255, 255, 0.3);
	border-radius: 50rpx;
	height: 80rpx;
	line-height: 76rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	margin: 40rpx 30rpx;
}
</style>