xiangqinxiangmu/LiangZhiYUMao/pages/success-case/detail.vue

<template>
	<view class="case-detail-page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="navbar-title">成功案例详情</view>
			<view class="navbar-right"></view>
		</view>

		<!-- 案例封面 -->
		<view class="case-cover">
			<image :src="caseDetail.imageUrl || DEFAULT_IMAGES.couple" class="cover-image" mode="aspectFill"></image>
			<view class="cover-mask">
				<view class="success-badge">
					<text class="badge-icon">✓</text>
				</view>
			</view>
		</view>

		<!-- 案例信息 -->
		<view class="case-content">
			<view class="couple-names">{{ caseDetail.maleUserNickname }} & {{ caseDetail.femaleUserNickname }}</view>

			<view class="quote-section">
				<text class="quote-icon">"</text>
				<text class="quote-text">{{ caseDetail.quote || '我们的故事' }}</text>
				<text class="quote-icon">"</text>
			</view>

			<view class="info-section">
				<view class="info-item">
					<text class="info-icon">💑</text>
					<text class="info-label">结婚日期：</text>
					<text class="info-value">{{ formatDate(caseDetail.marriageDate) }}</text>
				</view>
				<view class="info-item" v-if="caseDetail.matchmakerName">
					<text class="info-icon">👩‍❤️‍👨</text>
					<text class="info-label">红娘：</text>
					<text class="info-value">{{ caseDetail.matchmakerName }}</text>
				</view>
			</view>

			<view class="divider"></view>

			<view class="story-section">
				<view class="section-title">💕 他们的爱情故事</view>
				<view class="story-text">{{ caseDetail.story || '这是一段美好的爱情故事...' }}</view>
			</view>

			<!-- 时间线 -->
			<view class="divider"></view>
			<view class="timeline-section" v-if="timeline && timeline.length > 0">
				<view class="section-title">📅 爱情时间线</view>
				<view class="timeline-list">
					<view class="timeline-item" v-for="(item, index) in timeline" :key="index">
						<view class="timeline-dot"></view>
						<view class="timeline-content">
							<view class="timeline-date">{{ formatDate(item.eventDate) }}</view>
							<view class="timeline-event">{{ item.eventDescription }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 照片墙 -->
			<view class="divider" v-if="images && images.length > 0"></view>
			<view class="photos-section" v-if="images && images.length > 0">
				<view class="section-title">📷 幸福瞬间</view>
				<view class="photos-grid">
					<image v-for="(img, index) in images" :key="index" :src="img.imageUrl"
						class="photo-item" mode="aspectFill" @click="previewImage(index)"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api.js'
	import { DEFAULT_IMAGES } from '@/config/index.js'

	export default {
		data() {
			return {
				caseNo: null,
				caseDetail: {
					maleUserNickname: '加载中',
					femaleUserNickname: '...'
				},
				timeline: [],
				images: [],
				DEFAULT_IMAGES
			}
		},

		onLoad(options) {
			if (options.caseNo) {
				this.caseNo = options.caseNo
				this.loadCaseDetail()
				this.loadTimeline()
			}
		},

		methods: {
			// 加载案例详情
			async loadCaseDetail() {
				try {
					const data = await api.successCase.getDetail(this.caseNo)
					if (data) {
						this.caseDetail = data
						// 如果有照片数据
						if (data.images) {
							this.images = data.images
						}
					}
				} catch (error) {
					console.error('加载案例详情失败:', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				}
			},

			// 加载时间线
			async loadTimeline() {
				try {
					const data = await api.successCase.getTimeline(this.caseNo)
					if (data) {
						this.timeline = data
					}
				} catch (error) {
					console.error('加载时间线失败:', error)
				}
			},

			// 格式化日期
            formatDate(dateStr) {
                if (!dateStr) return '未知日期'
                const date = this.$util && this.$util.parseDate ? this.$util.parseDate(dateStr) : new Date(String(dateStr).replace(/-/g,'/'))
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				return `${year}年${month}月${day}日`
			},

			// 预览图片
			previewImage(index) {
				const urls = this.images.map(img => img.imageUrl)
				uni.previewImage({
					urls: urls,
					current: index
				})
			},

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

<style lang="scss" scoped>
	.case-detail-page {
		min-height: 100vh;
		background-color: #FFF9F9;
		padding-top: 90rpx;
		padding-bottom: 40rpx;
	}

	/* 自定义导航栏 */
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		background-color: #E91E63;
		z-index: 999;

		.navbar-left,
		.navbar-right {
			width: 80rpx;
		}

		.back-icon {
			font-size: 40rpx;
			color: #FFFFFF;
			font-weight: bold;
		}

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

	/* 案例封面 */
	.case-cover {
		position: relative;
		width: 100%;
		height: 500rpx;

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

		.cover-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);

			.success-badge {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				width: 70rpx;
				height: 70rpx;
				background-color: #4CAF50;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);

				.badge-icon {
					color: #FFFFFF;
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}
	}

	/* 案例内容 */
	.case-content {
		padding: 30rpx;
		background-color: #FFFFFF;
		margin: 20rpx;
		border-radius: 20rpx;

		.couple-names {
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.quote-section {
			background: linear-gradient(135deg, #FFE5EE 0%, #FFF9F9 100%);
			padding: 30rpx;
			border-radius: 15rpx;
			margin-bottom: 30rpx;
			text-align: center;
			position: relative;

			.quote-icon {
				font-size: 50rpx;
				color: #E91E63;
				opacity: 0.3;
			}

			.quote-text {
				font-size: 28rpx;
				color: #666666;
				line-height: 1.8;
				font-style: italic;
				padding: 0 20rpx;
			}
		}

		.info-section {
			.info-item {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				font-size: 28rpx;

				.info-icon {
					font-size: 32rpx;
					margin-right: 10rpx;
				}

				.info-label {
					color: #666666;
				}

				.info-value {
					color: #333333;
					flex: 1;
				}
			}
		}

		.divider {
			height: 1rpx;
			background-color: #F0F0F0;
			margin: 30rpx 0;
		}

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 20rpx;
		}

		.story-text {
			font-size: 28rpx;
			color: #666666;
			line-height: 2;
			white-space: pre-wrap;
		}

		/* 时间线 */
		.timeline-section {
			.timeline-list {
				padding-left: 20rpx;

				.timeline-item {
					position: relative;
					padding-left: 50rpx;
					padding-bottom: 40rpx;

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

					&:not(:last-child)::before {
						content: '';
						position: absolute;
						left: 15rpx;
						top: 30rpx;
						bottom: 0;
						width: 2rpx;
						background-color: #FFD4E5;
					}

					.timeline-dot {
						position: absolute;
						left: 0;
						top: 5rpx;
						width: 30rpx;
						height: 30rpx;
						background-color: #E91E63;
						border-radius: 50%;
						border: 5rpx solid #FFE5EE;
					}

					.timeline-content {
						.timeline-date {
							font-size: 24rpx;
							color: #999999;
							margin-bottom: 10rpx;
						}

						.timeline-event {
							font-size: 28rpx;
							color: #333333;
							line-height: 1.6;
						}
					}
				}
			}
		}

		/* 照片墙 */
		.photos-section {
			.photos-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 15rpx;

				.photo-item {
					width: 100%;
					height: 200rpx;
					border-radius: 10rpx;
					background-color: #F5F5F5;
				}
			}
		}
	}
</style>