xiangqinxiangmu/LiangZhiYUMao/pages/courses/detail.vue

<template>
	<view class="course-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="course-cover">
			<image :src="course.cover_image" class="cover-image" mode="aspectFill"></image>
			<view class="cover-mask">
				<view class="discount-tag" v-if="course.discount_rate">限时{{ course.discount_rate }}折</view>
			</view>
		</view>

		<!-- 课程信息 -->
		<view class="course-content">
			<view class="course-title">{{ course.name }}</view>

			<view class="teacher-info">
				<image :src="course.teacher_avatar || DEFAULT_IMAGES.avatar" class="teacher-avatar" mode="aspectFill"></image>
				<view class="teacher-detail">
					<text class="teacher-name">{{ course.teacher_name }}</text>
					<text class="teacher-desc">{{ course.teacher_desc || '资深情感导师' }}</text>
				</view>
			</view>

			<view class="course-stats">
				<view class="stat-item">
					<text class="stat-icon">👥</text>
					<text class="stat-text">{{ course.student_count || 0 }}人学习</text>
				</view>
				<view class="stat-item">
					<text class="stat-icon">⭐</text>
					<text class="stat-text">{{ course.rating || '5.0' }}分</text>
				</view>
				<view class="stat-item">
					<text class="stat-icon">📚</text>
					<text class="stat-text">{{ course.chapter_count || 0 }}个章节</text>
				</view>
			</view>

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

			<view class="description-section">
				<view class="section-title">课程介绍</view>
				<view class="description-text">{{ course.description || '暂无介绍' }}</view>
			</view>

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

			<view class="outline-section">
				<view class="section-title">课程大纲</view>
				<view class="outline-text">{{ course.outline || '敬请期待' }}</view>
			</view>
		</view>

		<!-- 底部购买按钮 -->
		<view class="bottom-bar">
			<view class="price-info">
				<text class="price-label">课程价格</text>
				<view class="price-value">
					<text class="price-symbol">¥</text>
					<text class="price-num">{{ course.price || 0 }}</text>
					<text class="original-price" v-if="course.original_price">¥{{ course.original_price }}</text>
					<text class="discount-text" v-if="course.discount_rate">{{ course.discount_rate }}折优惠</text>
				</view>
			</view>
			<view class="purchase-btn" :class="{ purchased: course.purchase_status === 1 }" @click="handlePurchase">
				<text class="btn-text">{{ course.purchase_status === 1 ? '已购买' : '立即购买' }}</text>
			</view>
		</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				courseId: null,
				course: {},
				DEFAULT_IMAGES
			}
		},

		onLoad(options) {
			console.log('精品课程详情页面加载, 参数:', options)
			
			if (options.id) {
				this.courseId = options.id
				console.log('课程ID:', this.courseId)
				// 根据ID设置对应的课程数据
				this.setCourseDataById(this.courseId)
				this.loadCourseDetail()
			} else {
				console.log('未传入课程ID，使用默认数据')
			}
			
			// 数据健康检查（确保页面显示正常）
			setTimeout(() => {
				this.checkDataHealth()
			}, 100)
		},

		methods: {
			// 根据ID设置课程数据
			setCourseDataById(courseId) {
				const courseData = {}
				
				const targetCourse = courseData[courseId]
				if (targetCourse) {
					this.course = {
						...this.course,
						...targetCourse,
						cover_image: DEFAULT_IMAGES.course,
						teacher_avatar: DEFAULT_IMAGES.avatar
					}
					console.log('设置课程数据:', this.course.name)
				}
			},
			
			// 加载课程详情
			async loadCourseDetail() {
				try {
					console.log('尝试从API加载课程详情:', this.courseId)
					const data = await api.course.getDetail(this.courseId)
					if (data) {
						this.course = data
						console.log('API课程详情加载成功')
					} else {
						console.log('API返回空数据，使用默认课程详情')
					}
				} catch (error) {
					console.error('加载课程详情失败:', error)
					console.log('API调用失败，保留默认课程详情数据')
					uni.showToast({
						title: '使用示例数据',
						icon: 'none',
						duration: 1500
					})
				}
			},

			// 处理购买
			handlePurchase() {
				// 检查是否已购买
				if (this.course.purchase_status === 1) {
					uni.showToast({
						title: '您已购买过此课程',
						icon: 'none'
					})
					return
				}
				
				uni.showModal({
					title: '确认购买',
					content: `确认购买"${this.course.name}"课程吗？\n价格：¥${this.course.price}`,
					success: async (res) => {
						if (res.confirm) {
							try {
								console.log('尝试购买课程:', this.courseId)
								// await api.course.purchase(this.courseId, {})
								
								// 模拟购买成功
								uni.showToast({
									title: '购买成功！',
									icon: 'success'
								})
								
								// 更新购买状态
								this.course.purchase_status = 1
								this.course.student_count = (this.course.student_count || 0) + 1
								
								setTimeout(() => {
									uni.showModal({
										title: '购买成功',
										content: '您已成功购买此课程，现在可以开始学习了！',
										showCancel: false,
										confirmText: '开始学习',
										success: (modalRes) => {
											if (modalRes.confirm) {
												// TODO: 跳转到课程学习页面
												uni.showToast({
													title: '学习功能开发中',
													icon: 'none'
												})
											}
										}
									})
								}, 1500)
							} catch (error) {
								console.error('购买失败:', error)
								uni.showToast({
									title: '购买失败，请重试',
									icon: 'none'
								})
							}
						}
					}
				})
			},

			// 返回
			goBack() {
				console.log('课程详情返回上一页')
				uni.navigateBack({
					fail: () => {
						// 返回失败时跳转到课程列表
						uni.navigateTo({
							url: '/pages/courses/list'
						})
					}
				})
			},
			
			// 数据健康检查
			checkDataHealth() {
				console.log('=== 精品课程详情页面数据健康检查 ===')
				console.log('courseId:', this.courseId)
				console.log('course:', this.course)
				console.log('DEFAULT_IMAGES:', this.DEFAULT_IMAGES)
				
				// 确保关键数据不为空
				if (!this.course.name || this.course.name === '加载中...') {
					this.course.name = '恋爱沟通技巧大师课'
				}
				if (!this.course.teacher_name) {
					this.course.teacher_name = '张情感老师'
				}
				if (!this.course.cover_image) {
					this.course.cover_image = this.DEFAULT_IMAGES.course
				}
			}
		}
	}
</script>

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

	/* 自定义导航栏 */
	.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;
		}
	}

	/* 课程封面 */
	.course-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);
			padding: 30rpx;

			.discount-tag {
				display: inline-block;
				padding: 10rpx 20rpx;
				background: linear-gradient(135deg, #FF6B6B 0%, #FF9800 100%);
				color: #FFFFFF;
				font-size: 24rpx;
				font-weight: bold;
				border-radius: 30rpx;
			}
		}
	}

	/* 课程内容 */
	.course-content {
		padding: 30rpx;
		background-color: #FFFFFF;
		margin: 20rpx;
		border-radius: 20rpx;

		.course-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30rpx;
			line-height: 1.5;
		}

		.teacher-info {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.teacher-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.teacher-detail {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 5rpx;

				.teacher-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}

				.teacher-desc {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.course-stats {
			display: flex;
			justify-content: space-around;
			padding: 20rpx 0;
			background-color: #FFF9F9;
			border-radius: 15rpx;

			.stat-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10rpx;

				.stat-icon {
					font-size: 32rpx;
				}

				.stat-text {
					font-size: 24rpx;
					color: #666666;
				}
			}
		}

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

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

		.description-text,
		.outline-text {
			font-size: 28rpx;
			color: #666666;
			line-height: 1.8;
			white-space: pre-wrap;
		}
	}

	/* 底部购买按钮 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid #F0F0F0;
		z-index: 999;

		.price-info {
			flex: 1;

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

			.price-value {
				display: flex;
				align-items: baseline;
				color: #E91E63;
				font-weight: bold;

				.price-symbol {
					font-size: 28rpx;
				}

				.price-num {
					font-size: 40rpx;
				}

				.original-price {
					margin-left: 10rpx;
					font-size: 24rpx;
					color: #999999;
					text-decoration: line-through;
				}
				
				.discount-text {
					margin-left: 15rpx;
					font-size: 22rpx;
					color: #FF9800;
					background: rgba(255, 152, 0, 0.1);
					padding: 5rpx 12rpx;
					border-radius: 15rpx;
				}
			}
		}

		.purchase-btn {
			padding: 20rpx 60rpx;
			background: linear-gradient(135deg, #E91E63 0%, #FF6B6B 100%);
			border-radius: 50rpx;
			box-shadow: 0 8rpx 16rpx rgba(233, 30, 99, 0.3);
			transition: all 0.3s;

			.btn-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
			
			&.purchased {
				background: #4CAF50;
				box-shadow: 0 8rpx 16rpx rgba(76, 175, 80, 0.3);
				
				.btn-text {
					color: #FFFFFF;
				}
			}
			
			&:active {
				transform: scale(0.95);
			}
		}
	}
</style>