book-hi/pages-mine/pages/feedback.vue

<template>
    <view class="feedback-page">
        <!-- 顶部banner -->
        <view class="banner">
            <image src="../static/feedback.png" mode="aspectFill" class="banner-img"></image>
            <text class="history-btn" @click="goToHistory">我的历史反馈</text>
        </view>

        <!-- 反馈类型区域 -->
        <view class="form-item type-section flex-a flex-j-b">
            <view class="label" style="margin-bottom: 0;">
                反馈类型
                <text class="required">*</text>
            </view>
            <view class="picker-box" @click="showTypePicker">
                <text :class="['picker-text', !model.type && 'placeholder']">
                    {{ model.type || '请选择反馈类型' }}
                </text>
                <u-icon name="arrow-right" color="#999" size="32" top="2rpx"></u-icon>
            </view>
        </view>

        <!-- 反馈描述区域 -->
        <view class="form-item content-section">
            <view class="label">
                反馈描述
                <text class="required">*</text>
            </view>
            <view class="textarea-box">
                <u-input type="textarea" v-model="model.content" placeholder="请输入不少于10个字的描述" :height="200"></u-input>
            </view>
        </view>

        <!-- 图片上传区域 -->
        <view class="form-item upload-section">
            <view class="label">上传图片(最多五张):</view>
            <view class="upload-box">
                <u-upload :file-list="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                    :max-count="5" :previewFullImage="true"></u-upload>
            </view>
        </view>

        <!-- 提交按钮 -->
        <view class="bottom-fixed-con">
            <button class="common-btn" @click="submit">提交</button>
        </view>

        <!-- 反馈类型选择器 -->
        <u-picker v-model="showPicker" :range="feedbackTypes" @confirm="onTypeConfirm" @cancel="showPicker = false"
            mode="selector"></u-picker>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showPicker: false,
            feedbackTypes: ['功能建议', '内容建议', '产品建议', '其他'],
            model: {
                type: '',
                content: '',
                images: []
            },
            fileList: [],
            rules: {
                type: [{
                    required: true,
                    message: '请选择反馈类型'
                }],
                content: [{
                    required: true,
                    message: '请输入反馈描述'
                }, {
                    min: 10,
                    message: '描述不能少于10个字'
                }]
            }
        }
    },
    methods: {
        // 显示类型选择器
        showTypePicker() {
            this.showPicker = true
        },

        // 类型选择确认
        onTypeConfirm(e) {
            this.model.type = e.value[0]
            this.showPicker = false
        },

        // 上传图片
        afterRead(event) {
            const {
                file
            } = event
            // 上传图片到服务器
            uni.uploadFile({
                url: 'your-upload-url',
                filePath: file.url,
                name: 'file',
                success: (res) => {
                    const response = JSON.parse(res.data)
                    if (response.code === 1) {
                        this.model.images.push(response.data.url)
                    }
                }
            })
        },

        // 删除图片
        deletePic(event) {
            this.model.images.splice(event.index, 1)
        },

        // 去历史记录
        goToHistory() {
            uni.navigateTo({
                url: '/pages/feedback-history/index'
            })
        },

        // 提交表单
        submit() {
            if (!this.model.type) {
                return uni.$u.toast('请选择反馈类型')
            }
            if (this.model.content.length < 10) {
                return uni.$u.toast('描述不能少于10个字')
            }

            // 提交表单
            uni.showLoading({
                title: '提交中'
            })
            // 这里调用提交接口
            setTimeout(() => {
                uni.hideLoading()
                uni.$u.toast('提交成功')
                setTimeout(() => {
                    uni.navigateBack()
                }, 1500)
            }, 1000)
        }
    }
}
</script>

<style lang="scss" scoped>
.feedback-page {
    min-height: 100vh;
    background: #F5F5F5;

    // banner样式保持不变
    .banner {
        position: relative;
        height: 230rpx;
        overflow: hidden;

        .banner-img {
            width: 100%;
            height: 100%;
        }

        .history-btn {
            position: absolute;
            right: 30rpx;
            top: 30rpx;
            background: rgba(56, 193, 72, 0.9);
            color: #FFFFFF;
            padding: 10rpx 20rpx;
            border-radius: 10rpx;
            font-size: 24rpx;
        }
    }

    // 表单项通用样式
    .form-item {
        background: #FFFFFF;
        margin: 20rpx;
        padding: 30rpx;
        border-radius: 12rpx;

        .label {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 20rpx;

            .required {
                color: #FF5B5B;
                margin-left: 4rpx;
            }
        }
    }

    // 反馈类型区域
    .type-section {
        position: relative;
        z-index: 1;

        .picker-box {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .picker-text {
                font-size: 28rpx;
                color: #333;

                &.placeholder {
                    color: #999;
                }
            }
        }
    }

    // 反馈描述区域
    .content-section {
        .textarea-box {
            background: #F8F8F8;
            border-radius: 8rpx;
            padding: 20rpx;
        }
    }
}
</style>