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" required>
                    <up-input
                        v-model="opinionModel.userName"
                        class="input-content"
                        placeholder="填写姓名"
                    />
                </up-form-item>
                <up-form-item label="电话" prop="userPhone" required>
                    <up-input
                        v-model="opinionModel.userPhone"
                        class="input-content"
                        placeholder="填写电话"
                    />
                </up-form-item>
                <up-form-item label="意见归属单位/部门" prop="userCompany">
                    <up-input
                        v-model="opinionModel.unit"
                        class="input-content"
                        placeholder="填写归属单位/部门"
                    />
                </up-form-item>
                <up-form-item label="意见" prop="options" required>
                    <up-textarea
                        v-model="opinionModel.options"
                        placeholder="请输入内容"
                        class="input-content"
                        style="min-height: 30vh"
                    />
                </up-form-item>

                <up-button
                    type="primary"
                    text="提交意见"
                    style="margin-top: 30rpx"
                    @tap="onSubmitOptions"
                ></up-button>
            </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'

console.log('submitOptionsApi', submitOptionsApi)

// 表单数据源
const opinionModel = ref({
    userName: '',
    userPhone: '',
    unit: '',
    options: '',
})
const opinionRules = ref({
    userName: {
        type: 'string',
        required: true,
        message: '请填写姓名',
        trigger: ['blur', 'change'],
    },
    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'],
    },
})

// 表单实例
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' })
}
</script>

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

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