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

<template>
    <view class="feedback-page">
        <!-- 顶部banner -->
        <view class="banner">
            <image src="https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/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>
            <u-upload
                class="upload-image"
                :fileList="fileList"
                @on-choose-complete="afterRead"
                @delete="deletePic"
                :maxCount="5"
                :auto-upload="false"
                :previewFullImage="true"
                uploadText="点击上传"
            ></u-upload>
        </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>
import ENV_CONFIG from "@/.env.js";
// api前缀
const env = ENV_CONFIG[process.env.ENV_TYPE || "dev"];
export default {
    data() {
        return {
            showPicker: false,
            feedbackTypes: [],
            model: {
                type: "",
                content: "",
                images: [],
            },
            fileList: [],
            uploadSuccessList: [],
            rules: {
                type: [
                    {
                        required: true,
                        message: "请选择反馈类型",
                    },
                ],
                content: [
                    {
                        required: true,
                        message: "请输入反馈描述",
                    },
                    {
                        min: 10,
                        message: "描述不能少于10个字",
                    },
                ],
            },
        };
    },
    methods: {
        // 获取反馈类型选项
        getFeedbackTypes() {
            uni.$u.http
                .get("/token/common/getDictOptions?type=feedback_type")
                .then((res) => {
                    if (res.code === 200) {
                        this.feedbackTypes = res.data.map((item) => item.dictLabel);
                    } else {
                        uni.$u.toast("获取反馈类型失败");
                    }
                })
                .catch(() => {
                    uni.$u.toast("获取反馈类型失败");
                });
        },

        // 显示类型选择器
        showTypePicker() {
            this.showPicker = true;
        },

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

        // 上传图片
        afterRead(lists) {
            // 先检查token是否存在
            const token = uni.getStorageSync("token");

            const uploadTasks = lists.map((item) => {
                return new Promise((resolve, reject) => {
                    uni.uploadFile({
                        url: env.apiUrl + "/api/token/suggestion/imgUpload",
                        filePath: item.url,
                        name: "file",
                        header: {
                            Authorization: "Bearer " + token,
                        },
                        success: (res) => {
                            const result = JSON.parse(res.data);
                            if (result.code === 200 && result.data) {
                                resolve(result.data);
                            } else {
                                uni.$u.toast(result.msg || "上传失败");
                                reject(new Error(result.msg || "上传失败"));
                            }
                        },
                        fail: (err) => {
                            uni.$u.toast("上传失败");
                            reject(err);
                        },
                    });
                });
            });

            Promise.all(uploadTasks)
                .then((results) => {
                    this.uploadSuccessList = results.flat();
                    this.fileList = lists;
                    this.model.images = this.uploadSuccessList;
                })
                .catch((err) => {
                    console.error("Upload failed:", err);
                });
        },

        // 删除图片
        deletePic(event) {
            this.fileList.splice(event.index, 1);
            this.model.images.splice(event.index, 1);
            this.uploadSuccessList.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: "提交中",
            });

            // 构建提交参数
            const params = {
                reason: this.model.type,
                description: this.model.content,
                images: this.model.images,
            };

            // 调用提交接口
            uni.$u.http
                .post("/token/suggestion/submit", params)
                .then((res) => {
                    if (res.code === 200) {
                        uni.$u.toast("提交成功");
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 1500);
                    } else {
                        uni.$u.toast(res.msg || "提交失败");
                    }
                })
                .catch(() => {
                    uni.$u.toast("提交失败");
                })
                .finally(() => {
                    uni.hideLoading();
                });
        },
    },
    onLoad() {
        this.getFeedbackTypes();
    },
};
</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;
        }
    }

    .upload-image {
        .u-list-item {
            background: #ffffff !important;
        }
    }
}
</style>