wx_mp_option/src/pages/opinion/index.vue

<template>
    <view class="content">
        <!-- 意见收集 -->
        <template v-if="!isSuccess">
            <up-form
                labelPosition="top"
                :model="opinionModel"
                ref="opinionModelRef"
                :rules="opinionRules"
                labelWidth="auto"
                class="opinion-form"
            >
                <up-form-item label="姓名" prop="userName">
                    <up-input
                        v-model="opinionModel.userName"
                        class="input-content"
                        placeholder="填写姓名"
                        clearable
                    />
                </up-form-item>
                <up-form-item label="电话" prop="userPhone">
                    <up-input
                        v-model="opinionModel.userPhone"
                        class="input-content"
                        placeholder="填写电话"
                        clearable
                    />
                </up-form-item>
                <!-- <up-form-item label="意见归属单位/部门" prop="userCompany">
                    <up-input
                        v-model="opinionModel.unit"
                        class="input-content"
                        placeholder="填写归属单位/部门"
                        clearable
                    />
                </up-form-item> -->
                <up-form-item label="意见" prop="options" required>
                    <up-textarea
                        v-model="opinionModel.options"
                        placeholder="请输入内容"
                        class="input-content"
                        :maxlength="500"
                        count
                        style="max-height: 500px; overflow-y: auto"
                        height="300px"
                        clearable
                    >
                    </up-textarea>
                </up-form-item>

                <up-form-item label="附件(最多上传5张图片)">
                    <up-upload
                        name="1"
                        multiple
                        :maxCount="5"
                        accept="image"
                        @delete="deletePic"
                        :fileList="fileList"
                        @afterRead="afterRead"
                    />
                </up-form-item>

                <up-form-item>
                    <up-button
                        type="primary"
                        text="提交意见"
                        style="margin-top: 30rpx"
                        @tap="onSubmitOptions"
                    />
                </up-form-item>
            </up-form>
        </template>

        <template v-else>
            <view class="success-container">
                <up-icon name="checkbox-mark" color="#2979ff" size="80" bold="true"></up-icon>
                <text class="success">提交成功</text>
                <text class="thanks">感谢您宝贵的意见</text>
            </view>
            <view style="width: 100vw">
                <up-button
                    type="primary"
                    text="返回"
                    @tap="onContinueFill"
                    style="width: 95%; margin: 30rpx auto"
                />
                <!-- <up-button
                    text="退出"
                    :plain="true"
                    type="primary"
                    @tap="onExit"
                    style="width: 95%; margin: 0 auto"
                /> -->
            </view>
        </template>

        <up-modal
            :show="showModal"
            title="温馨提示"
            content="是否确认退出？"
            showCancelButton
            @confirm="onConfirm"
        />
    </view>
</template>

<script setup>
import { submitOptionsApi } from '@/services/options.js'
import { ref } from 'vue'

// 表单数据源
const opinionModel = ref({
    userName: '',
    userPhone: '',
    unit: '',
    options: '',
})

const fileList = ref([])

const opinionRules = ref({
    // userName: [
    //     {
    //         type: 'string',
    //         required: true,
    //         message: '请填写姓名',
    //         trigger: ['blur', 'change'],
    //     },
    //     {
    //         pattern: /^[\u4e00-\u9fa5]{2,6}$/,
    //         // 正则检验前先将值转为字符串
    //         transform(value) {
    //             return String(value)
    //         },
    //         message: '请填写正确的姓名',
    //     },
    // ],
    // userPhone: [
    //     {
    //         type: 'string',
    //         required: true,
    //         message: '请填写电话',
    //         trigger: ['blur', 'change'],
    //     },

    //     {
    //         pattern: /^1[3-9]\d{9}$/,
    //         // 正则检验前先将值转为字符串
    //         transform(value) {
    //             return String(value)
    //         },
    //         message: '请填写正确的手机号码',
    //     },
    // ],
    options: [
        {
            type: 'string',
            required: true,
            message: '请填写意见',
            trigger: ['blur', 'change'],
        },
        {
            max: 500,
            message: '字数不能超过500',
        },
    ],
})

// 表单实例
const opinionModelRef = ref(null)

// 是否提交成功
const isSuccess = ref(false)

// 提示弹框
const showModal = ref(false)

// 提交按钮
const onSubmitOptions = () => {
    opinionModelRef.value
        .validate()
        .then(async (valid) => {
            if (valid) {
                console.log('opinionModel.value', opinionModel.value)
                const res = await submitOptionsApi(opinionModel.value)

                if (res.code === 0) {
                    uni.$u.toast('提交成功')
                    isSuccess.value = true
                    opinionModel.value.options = ''
                    opinionModel.value.userPhone = ''
                    opinionModel.value.userName = ''
                    opinionModel.value.unit = ''
                } else {
                    uni.$u.toast(res.msg + '提交失败')
                }
            }
        })
        .catch(() => {
            // 处理验证错误
        })
}

// 继续填写
const onContinueFill = () => {
    isSuccess.value = false
}
// 退出
const onExit = () => {
    showModal.value = true
}

// 确认退出
const onConfirm = () => {
    uni.redirectTo({ url: '/pages/index/index' })
}

// 删除图片
const deletePic = (event) => {
    fileList.value.splice(event.index, 1)
}

// 新增图片
const afterRead = async (event) => {
    console.log('event', event)
    let lists = [].concat(event.file)
    let fileListLen = fileList.value.length
    lists.map((item) => {
        fileList.value.push({
            ...item,
            status: 'uploading',
            message: '上传中',
        })
    })
    for (let i = 0; i < lists.length; i++) {
        const result = await uploadFilePromise(lists[i].url)
        let item = fileList.value[fileListLen]
        fileList.value.splice(fileListLen, 1, {
            ...item,
            status: 'success',
            message: '',
            url: result,
        })
        fileListLen++
    }
}

const uploadFilePromise = (url) => {
    return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
            url: 'http://192.168.2.21:7001/upload',
            filePath: url,
            name: 'file',
            formData: {
                user: 'test',
            },
            success: (res) => {
                setTimeout(() => {
                    resolve(res.data.data)
                }, 1000)
            },
        })
    })
}
</script>

<style lang="scss" scoped>
.content {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f5f5f5;
    overflow-y: auto;
}
::v-deep .opinion-form {
    width: 90%;
    height: auto;
}

.input-content {
    background-color: #fff;
}

.success-container {
    width: 100vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 120rpx 0;
    background-color: #fff;
    box-sizing: border-box;

    .success {
        font-weight: bold;
        font-size: 16px;
    }

    .thanks {
        font-size: 13px;
        padding: 10rpx 0;
        color: #848181;
    }
}
</style>