shuhi-app/pages/book/components/feedbackPopup.vue

<template>
    <u-popup mode="center" :show="show" @close="handleCancel" :closeOnClickOverlay="false">
        <view class="popup-container">
            <u-form
                ref="formRef"
                :model="formData"
                :rules="rules"
                labelPosition="top"
                labelWidth="100%"
                error-type="toast"
            >
                <!-- 反馈信息 -->
                <u-form-item label="反馈图书信息" prop="feedbackContent" :borderBottom="true">
                    <u-input
                        v-model="formData.feedbackContent"
                        type="textarea"
                        placeholder="请输入反馈信息"
                        height="100"
                    ></u-input>
                </u-form-item>

                <!-- 图片上传 -->
                <u-form-item label="上传照片" prop="imgUrl" :borderBottom="false">
                    <cy-upload v-model:filename="formData.imgUrl" multiple :maxCount="4" :loading="loading">
                        <view class="upload-slot">
                            <u-icon name="plus" size="30"></u-icon>
                            <text class="upload-text">上传照片</text>
                        </view>
                    </cy-upload>
                </u-form-item>
            </u-form>

            <!-- 按钮组 -->
            <view class="button-group">
                <u-button type="info" text="取消" :plain="true" @click="handleCancel" :disabled="submitting"></u-button>
                <u-button type="primary" text="确认" @click="handleConfirm" :loading="submitting" :disabled="loading"></u-button>
            </view>
        </view>
    </u-popup>
</template>

<script setup>
import cyUpload from "@/components/cy-upload/index.vue";
import { ref, reactive } from "vue";

const show = ref(false);
const emit = defineEmits(["submit"]);

// 表单引用
const formRef = ref(null);

// 提交状态
const submitting = ref(false);

// 上传状态
const loading = ref(false);

// 表单数据
const formData = reactive({
    feedbackContent: "",
    imgUrl: [],
    isbn: "",
});

// 表单验证规则
const rules = {
    feedbackContent: [
        {
            required: true,
            message: "请输入反馈信息",
            trigger: ["blur", "change"],
        },
    ],
};

//打开
function open(data) {
    show.value = true;
    formData.isbn = data.isbn;
}

// 取消操作
function handleCancel() {
    resetForm();
    show.value = false;
}

// 确认操作
async function handleConfirm() {
    // 表单验证
    formRef.value?.validate().then((res) => {
        submitting.value = true;

        let data = JSON.parse(JSON.stringify(formData));
        data.imgUrl = data.imgUrl.join(",");
        uni.$u.http
            .post("/app/feedback/add", data)
            .then((res) => {
                if (res.code == 200) {
                    // 提交成功
                    uni.showToast({
                        title: "反馈已提交",
                        icon: "success",
                    });

                    // 触发提交事件
                    emit("submit", formData);
                    show.value = false;
                } else {
                    uni.$u.toast(res.msg);
                }
            })
            .finally(() => {
                submitting.value = false;
            });
    });
}

// 重置表单
function resetForm() {
    formData.feedbackContent = "";
    formData.imgUrl = "";
    formRef.value?.resetFields();
}

defineExpose({
    open,
});
</script>

<style lang="scss" scoped>
:deep(.u-popup__content) {
    border-radius: 12px;
}

.popup-container {
    width: 640rpx;
    background-color: #ffffff;
    border-radius: 12rpx;
    padding: 30rpx;

    :deep(.u-form) {
        .u-form-item {
            &__body {
                padding: 20rpx 0;
            }

            &__body__left__content {
                padding-bottom: 8rpx;
            }
        }
    }

    .upload-slot {
        width: 160rpx;
        height: 160rpx;
        border: 2rpx dashed #dcdfe6;
        border-radius: 8rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .upload-text {
            font-size: 24rpx;
            color: #909399;
            margin-top: 10rpx;
        }
    }

    .button-group {
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;
        padding: 0 20rpx;

        :deep(.u-button) {
            width: 45%;
            border-radius: 8rpx;
        }
    }
}
</style>