jobslink-user-clent/pageMy/setUserBase/complain.vue

<template>
    <view class="app_cotainer">
        <u--form labelPosition="left" :fromData="fromData" :model="fromData" :rules="rules" ref="uForm">
            <u-form-item label="投诉标题:" prop="complaintTitle" labelWidth="90" borderBottom>
                <u--input v-model="fromData.complaintTitle" border="surround" placeholder="请输入投诉标题"></u--input>
            </u-form-item>
            <u-form-item label="投诉对象:" prop="complaintObject" labelWidth="90" borderBottom>
                <u--input v-model="fromData.complaintObject" border="surround" placeholder="请输入投诉对象"></u--input>
            </u-form-item>

            <u-form-item label="投诉分类:" prop="complaintType" labelWidth="90" borderBottom>
                <u-picker @confirm="confirm" :show="showclassEnum" @cancel="showclassEnum = false"
                    :columns="classColumns"></u-picker>
                <u-button class="picker_flag" @click="showclassEnum = true"
                    :style="[{color: fromData.complaintType ? '' : '#c0c4cc'}, {paddingLeft: `10px`}]">
                    {{fromData.complaintType || '请选择分类'}}
                </u-button>
            </u-form-item>
            </u-form-item><u-form-item label="投诉内容:" prop="complaintContent" labelWidth="80" borderBottom>
                <u--textarea v-model="fromData.consultContent" placeholder="请输入投诉内容"></u--textarea>
            </u-form-item>
            <u-form-item label="投诉联系人:" prop="complaintName" labelWidth="90" borderBottom>
                <u--input v-model="fromData.complaintName" border="surround" placeholder="请输入投诉人"></u--input>
            </u-form-item>
            <u-form-item label="联系电话:" prop="complaintPhone" labelWidth="90" borderBottom>
                <u--input v-model="fromData.complaintPhone" border="surround" placeholder="请输入11位电话号码"></u--input>
            </u-form-item>
        </u--form>
        <view class="btn_add">
            <u-button type="primary" size="large" text="发送信件" @click="addComplaint"></u-button>
        </view>
    </view>
</template>

<script>
    import {
        dateFormat
    } from '@/untils/format.js'
    import {
        addSuperviseComplaintInfo
    } from '@/api/content'
    const formData = {
        complaintTitle: '',
        complaintObject: '',
        complaintType: '',
        complaintName: '',
        complaintPhone: '',
    }
    const classColumns = [
        ['一般投诉', '较难投诉', '困难投诉', '特殊投诉']
    ]
    const classEnum = {
        '一般投诉': 1,
        '较难投诉': 2,
        '困难投诉': 3,
        '特殊投诉': 4,
    }
    const rules = {
        'complaintTitle': {
            type: 'string',
            required: true,
            message: '请填写投诉标题',
            trigger: ['blur', 'change']
        },
        'complaintObject': {
            type: 'string',
            required: true,
            message: '请填写咨询对象',
            trigger: ['blur', 'change']
        },
        'complaintType': {
            type: 'string',
            required: true,
            message: '请填投诉类型',
            trigger: ['blur', 'change']
        },
        'complaintName': {
            type: 'string',
            required: true,
            message: '请填写投诉人',
            trigger: ['blur', 'change']
        },
        'complaintPhone': {
            type: 'string',
            required: true,
            pattern: /^1[3-9]{1}\d{9}/,
            message: '请填写联系方式',
            trigger: ['blur', 'change']
        },


    }
    export default {
        data() {
            return {
                fromData: Object.assign({}, formData),
                rules: Object.assign({}, rules),
                classColumns,
                showclassEnum: false,
                isNext: true,
            };
        },
        onLoad() {},
        computed: {},
        methods: {
            confirm(item) {
                const {
                    value
                } = item
                this.fromData.complaintType = value[0]
                this.showclassEnum = false
            },
            addComplaint() {
                if (this.isNext) {
                    this.isNext = false
                } else {
                    return
                }
                this.$refs.uForm.validate().then(async (res) => {
                    let params = {
                        ...this.fromData,
                        complaintType: classEnum[this.fromData.complaintType]
                    }
                    uni.showLoading({
                        title: '请求中'
                    })
                    let resData = await addSuperviseComplaintInfo(params)
                    uni.hideLoading()
                    if (resData.data?.code === 200) {
                        uni.$u.toast(resData.data.msg)
                        this.$api.sleep(1000).then(() => {
                            uni.navigateBack(1)
                        })
                    }
                }).catch((errors) => {
                    this.isNext = true
                    this.$api.msg('请输入完整信件信息')
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .app_cotainer {
        padding: 24rpx;

        .picker_flag {
            // border: 0;
            // height: auto;
            display: flex;
            justify-content: flex-start;
            padding: 0;
        }

        .reply_info {}

        .btn_add {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 110rpx;
            background-color: $uni-bg-color-grey;
            padding: 24rpx 24rpx calc(10px + env(safe-area-inset-bottom) / 2) 24rpx;
            text-align: center;
            line-height: 110rpx;
        }
    }
</style>