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,
            };
        },
        onLoad() {
        },
        computed: {
        },
        methods: {
            confirm(item) {
                const {value} = item
                this.fromData.complaintType = value[0]
                this.showclassEnum = false
            },
            addComplaint() {
                this.$refs.uForm.validate().then(async(res) => {
                    let params = {
                        ...this.fromData,
                        complaintType: classEnum[this.fromData.complaintType]
                    }
                    console.log(params)
                    let resData = await addSuperviseComplaintInfo(params)
                    if(resData.data?.code === 200) {
                        uni.$u.toast(resData.data.msg)
                    }
                }).catch((errors) => {
                    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>