novel-front-app/pages_order/comment/review.vue

<template>
    <view class="review-page">
        <!-- 顶部导航栏 -->
        <navbar title="写书评" leftClick @leftClick="$utils.navigateBack" />
        <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: ''
            },
            id: 0
        }
    },
    onLoad(options) {
        // 通过路由参数获取书名
        this.bookTitle = options.title || '未知书名'
        this.id = options.id || 0
        this.getDateil()
    },
    methods: {
        getDateil(){
            this.$fetch('getBookDetail', {
                id : this.id
            }).then(res => {
                this.bookTitle = res.name
            })
        },
        async submitReview() {
			
			if(this.$utils.verificationAll(this.form, {
				content : '请输入书评内容'
			})){
				return
			}
			
			await this.$fetch('saveComment', {
				bookId : this.id,
				content : this.form.content,
			})
			
			uni.showToast({
				title: '发布成功',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
        }
    }
}
</script>

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

.review-content {
    background: #fff;
    margin: 0 24rpx;
    margin-top: 24rpx;
    border-radius: 16rpx;
    padding: 32rpx 24rpx 24rpx 24rpx;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-bottom: 140rpx;

    .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>