uniapp-app/pages_course/course_review/course_review.vue

<template>
	<view class="review-page">
		<!-- 自定义导航栏 -->
		<view class="navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
				</view>
				<view class="nav-title">评价课程</view>
				<view class="nav-right"></view>
			</view>
		</view>

		<!-- 页面内容 -->
		<view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
			<!-- 星级评分区域 -->
			<view class="rating-section">
				<text class="rating-title">点击星星评分</text>
				<view class="stars-container">
					<view 
						class="star-item" 
						v-for="star in 5" 
						:key="star"
						@click="setRating(star)"
					>
						<uni-icons 
							:type="star <= currentRating ? 'star-filled' : 'star'" 
							size="48" 
							:color="star <= currentRating ? '#FFB800' : '#E0E0E0'"
						></uni-icons>
					</view>
				</view>
				<text class="rating-feedback">{{ ratingFeedback }}</text>
			</view>

			<!-- 评价输入区域 -->
			<view class="review-input-section">
				<textarea 
					class="review-textarea" 
					v-model="reviewContent"
					placeholder="在这里提交您对精品课的建议,帮助课程继续优化改进(300字以内)"
					maxlength="300"
					:show-confirm-bar="false"
				></textarea>
				<view class="word-count">
					<text class="count-text">{{ reviewContent.length }}/300</text>
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-section">
				<button class="submit-btn" @click="submitReview">提交</button>
			</view>

			<!-- 奖励信息 -->
			<view class="reward-info">
				<text class="reward-text">参与评价,您将获得积分商城88积分,"精彩评价"将再额外获得88积分哦</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const statusBarHeight = ref(0)
const navBarHeight = ref(88)
const currentRating = ref(0)
const reviewContent = ref('')
const ratingFeedback = ref('')

// 方法
const getSystemInfo = () => {
	const systemInfo = uni.getSystemInfoSync()
	statusBarHeight.value = systemInfo.statusBarHeight
	// #ifdef MP-WEIXIN
	navBarHeight.value = systemInfo.statusBarHeight + 44
	// #endif
	// #ifdef APP-PLUS
	navBarHeight.value = systemInfo.statusBarHeight + 44
	// #endif
}

const setRating = (rating) => {
	currentRating.value = rating
	updateRatingFeedback()
}

const updateRatingFeedback = () => {
	const feedbacks = {
		1: '差评,课程没有任何帮助',
		2: '一般,课程内容一般',
		3: '还行,课程有一定帮助',
		4: '不错,课程内容很好',
		5: '很好,课程非常棒'
	}
	ratingFeedback.value = feedbacks[currentRating.value] || ''
}

const submitReview = () => {
	if (currentRating.value === 0) {
		uni.showToast({
			title: '请先选择评分',
			icon: 'none'
		})
		return
	}
	
	if (!reviewContent.value.trim()) {
		uni.showToast({
			title: '请填写评价内容',
			icon: 'none'
		})
		return
	}
	
	// 提交评价
	uni.showLoading({
		title: '提交中...'
	})
	
	// 模拟提交
	setTimeout(() => {
		uni.hideLoading()
		uni.showToast({
			title: '评价提交成功',
			icon: 'success'
		})
		
		// 延迟返回上一页
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	}, 1000)
}

const goBack = () => {
	uni.navigateBack()
}

// 生命周期
onMounted(() => {
	getSystemInfo()
})
</script>

<style lang="scss">
.review-page {
	min-height: 100vh;
	background-color: #fff;
}

// 导航栏
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: #fff;
	border-bottom: 1rpx solid #e5e5e5;
	
	.nav-content {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		
		.nav-left, .nav-right {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.nav-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #FF4757;
		}
	}
}

.page-content {
	padding: 32rpx 24rpx;
}

// 星级评分区域
.rating-section {
	text-align: center;
	margin-bottom: 48rpx;
	
	.rating-title {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 32rpx;
	}
	
	.stars-container {
		display: flex;
		justify-content: center;
		gap: 16rpx;
		margin-bottom: 24rpx;
		
		.star-item {
			cursor: pointer;
		}
	}
	
	.rating-feedback {
		display: block;
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
	}
}

// 评价输入区域
.review-input-section {
	margin-bottom: 48rpx;
	
	.review-textarea {
		width: 100%;
		height: 300rpx;
		padding: 24rpx;
		background-color: #f8f9fa;
		border: 1rpx solid #e0e0e0;
		border-radius: 16rpx;
		font-size: 26rpx;
		color: #333;
		line-height: 1.6;
		resize: none;
		
		&::placeholder {
			color: #999;
			line-height: 1.8;
		}
	}
	
	.word-count {
		text-align: right;
		margin-top: 16rpx;
		
		.count-text {
			font-size: 22rpx;
			color: #999;
		}
	}
}

// 提交按钮
.submit-section {
	margin-bottom: 48rpx;
	
	.submit-btn {
		width: 100%;
		height: 88rpx;
		background-color: #20B2AA;
		color: #fff;
		border: none;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

// 奖励信息
.reward-info {
	text-align: center;
	
	.reward-text {
		font-size: 24rpx;
		color: #333;
		line-height: 1.5;
	}
}
</style>