novel-front-app/pages_order/novel/Review.vue

<template>
	<view class="review-page">
		<!-- 顶部导航栏 -->
		<navbar title="写书评" :leftClick="true" @leftClick="goBack" />
		<view class="review-content">
			<view class="book-title-label">书本名称</view>
			<view class="book-title">《{{ bookTitle }}》</view>
			<view class="form-area flex-grow">
				<view class="form-label-row">
					<text class="required-star">*</text>
					<text class="form-label">书评内容</text>
				</view>
				<textarea v-model="form.content" class="review-textarea custom-placeholder full-textarea"
					placeholder="请输入书评内容" />
			</view>
		</view>
		<view class="review-footer">
			<view class="footer-divider"></view>
			<button class="submit-btn" @click="submitReview">发布</button>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	export default {
		components: {
			navbar
		},
		data() {
			return {
				bookTitle: '',
				form: {
					content: ''
				},
				rules: {
					content: [{
						required: true,
						message: '请输入书评内容',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad(options) {
			// 通过路由参数获取书名
			this.bookTitle = options.title || '未知书名'
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			submitReview() {
				this.$refs.reviewForm.validate().then(() => {
					// 提交逻辑，实际开发中可调用API
					uni.showToast({
						title: '发布成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}).catch(() => {})
			}
		}
	}
</script>

<style scoped lang="scss">
	.review-page {
		min-height: 100vh;
		background: #f8f8f8;
		display: flex;
		flex-direction: column;
		margin-top: -50rpx;
	}

	.review-content {
		background: #fff;

		margin: 24rpx 24rpx 0 24rpx;
		border-radius: 16rpx;
		padding: 32rpx 24rpx 24rpx 24rpx;
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
		padding-bottom: 140rpx;
		margin-top: calc(var(--status-bar-height, 0px) + 100rpx);
	}

	.flex-grow {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.book-title-label {
		color: #bdbdbd;
		font-size: 24rpx;
		margin-bottom: 4rpx;
	}

	.book-title {
		font-size: 28rpx;
		color: #222;
		margin-bottom: 36rpx;
		border-bottom: 1px solid #ededed;
		padding-bottom: 8rpx;
	}

	.form-area {
		margin-top: 18rpx;
	}

	.form-label-row {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.required-star {
		color: #e23d3d;
		font-size: 22rpx;
		margin-right: 4rpx;
		line-height: 1;
	}

	.form-label {
		color: #222;
		font-size: 26rpx;
		font-weight: 400;
	}

	.review-textarea {
		width: 100%;
		min-height: 320rpx;
		border: none;
		background: transparent;
		font-size: 28rpx;
		color: #333;
		resize: none;
		margin-top: 0;
		outline: none;
	}

	.review-textarea.custom-placeholder::placeholder {
		color: #d2d2d2;
		font-size: 26rpx;
	}

	.full-textarea {
		flex: 1;
		min-height: 0;
		max-height: none;
		box-sizing: border-box;
		margin-bottom: 0;
	}

	.review-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 90rpx;
		background: #fff;
		padding: 24rpx 32rpx 32rpx 32rpx;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.03);
		z-index: 10;
	}

	.footer-divider {
		width: 100%;
		height: 2rpx;
		background: #f2f2f2;
		margin-bottom: 24rpx;
	}

	.submit-btn {
		width: 100%;
		height: 80rpx;
		background: #0a225f;
		color: #fff;
		font-size: 30rpx;
		border-radius: 40rpx;
		font-weight: 500;
		letter-spacing: 2rpx;
	}
</style>