jobslink-user-clent/pages/recruit/subPage/enterpriceCertification/enterpriceCertification.vue

<template>
    <view class="">
        <view class="content">
            <u--form labelPosition="left" :model="formData" :rules="rules" ref="formOne">
                <view class="card">
                    <view class="card_title">企业信息</view>
                    <u-form-item label="企业名称" labelWidth="100" prop="comname" borderBottom ref="item1">
                        <u--input v-model="formData.comname" placeholder="请输入企业名称"></u--input>
                    </u-form-item>
                    <u-form-item label="统一信用代码" labelWidth="100" prop="companyTid" borderBottom ref="item1">
                        <u--input v-model="formData.companyTid" placeholder="请输入统一信用代码"></u--input>
                    </u-form-item>
                    <u-form-item label="法人姓名" labelWidth="100" prop="masterName" borderBottom ref="item1">
                        <u--input v-model="formData.masterName" placeholder="请输入法人姓名"></u--input>
                    </u-form-item>
                    <u-form-item label="法人身份证号" labelWidth="100" prop="masterIdentity" borderBottom ref="item1">
                        <u--input v-model="formData.masterIdentity" placeholder="请输入法人身份证号"></u--input>
                    </u-form-item>
                    <u-form-item label="所在地区" labelWidth="100" prop="cityId" borderBottom ref="item1"
                        @click="showAddress = true; hideKeyboard()">
                        <PickerList placeholder="请选择所在地区" :columns="dic.addressColumn" :visibel="showAddress"
                            v-model="formData.cityId" @cancel="showAddress = false">
                        </PickerList>
                    </u-form-item>
                    <u-form-item label="详细地址" labelWidth="100" prop="companyAddress" borderBottom ref="item1">
                        <u--input v-model="formData.companyAddress" placeholder="请输入详细地址"></u--input>
                    </u-form-item>
                    <u-form-item label="企业性质" labelWidth="100" prop="nature" borderBottom ref="item1"
                        @click="showJobCompanyNature = true; hideKeyboard()">
                        <PickerList placeholder="请选择企业性质" :columns="[dic.companyEnum]" :visibel="showJobCompanyNature"
                            v-model="formData.nature" @cancel="showJobCompanyNature = false">
                        </PickerList>
                    </u-form-item>
                    <u-form-item label="行业" labelWidth="100" prop="tradeId" borderBottom ref="item1"
                        @click="showjobCompanyIndustry = true; hideKeyboard()">
                        <PickerList placeholder="请选择行业" :columns="dic.tradeArr" labelName="name" valueName="id"
                            :visibel="showjobCompanyIndustry" v-model="formData.tradeId"
                            @cancel="showjobCompanyIndustry = false">
                        </PickerList>
                    </u-form-item>
                    <u-form-item label="企业介绍" labelWidth="100" labelPosition="top" prop="companyDesc" borderBottom
                        ref="item1">
                        <u--textarea v-model="formData.companyDesc" placeholder="请输入企业介绍" count
                            maxlength="200"></u--textarea>
                    </u-form-item>
                </view>
                <view class="card">
                    <view class="card_title">用户信息</view>
                    <u-form-item label="联系人" labelWidth="100" prop="manager" borderBottom ref="item1">
                        <u--input v-model="formData.manager" placeholder="请输入联系人"></u--input>
                    </u-form-item>
                    <u-form-item label="手机号码" labelWidth="100" prop="telphone" borderBottom ref="item1">
                        <u--input v-model="formData.telphone" placeholder="请输入手机号码"></u--input>
                    </u-form-item>
                </view>

                <view class="card">
                    <view class="card_title">相关资料</view>
                    <view class="card_content">
                        <u-form-item labelWidth="100" prop="identityUrl4Id">
                            <UploadIdNumber v-model="formData.identityUrl4Id" backImg="/static/img/idcard.png">
                            </UploadIdNumber>
                        </u-form-item>
                        <u-form-item labelWidth="100" prop="identityUrl5Id">
                            <UploadIdNumber v-model="formData.identityUrl5Id" backImg="/static/img/backidcard1.png">
                            </UploadIdNumber>
                        </u-form-item>
                        <u-form-item labelWidth="100" prop="authUrlId">
                            <UploadIdNumber v-model="formData.authUrlId" backImg="/static/img/idcard.png">
                            </UploadIdNumber>
                        </u-form-item>
                    </view>
                </view>

                <view class="card">
                    <u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
                    <u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button>
                </view>
            </u--form>
        </view>
    </view>
</template>

<script>
    import UploadIdNumber from './uploadIdNumber.vue';
    import dic from '@/common/dic.js'
    import PickerList from './pickerList.vue';
    import {
        addInviteCompanyAuth
    } from '@/api/userrecruit.js'
    import {
        mapState
    } from 'vuex'
    const rules = {
        comname: {
            type: 'string',
            required: true,
            message: '请输入企业名称',
            trigger: ['change']
        },
        companyTid: {
            type: 'string',
            required: true,
            message: '请输入统一信用代码',
            trigger: ['change']
        },
        masterName: {
            type: 'string',
            required: true,
            message: '请输入法人姓名',
            trigger: ['change']
        },
        masterIdentity: {
            type: 'string',
            required: true,
            pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/,
            message: '请输入法人身份证号',
            trigger: ['change']
        },
        cityId: {
            type: 'string',
            required: true,
            message: '请选择所在地区',
            trigger: ['change']
        },
        companyAddress: {
            type: 'string',
            required: true,
            message: '请输入详细地址',
            trigger: ['change']
        },
        nature: {
            type: 'string',
            required: true,
            message: '请选择企业性质',
            trigger: ['change']
        },
        tradeId: {
            type: 'string',
            required: true,
            message: '请选择行业',
            trigger: ['change']
        },
        companyDesc: {
            type: 'string',
            min: 20,
            required: true,
            message: '请输入企业介绍（最少20个字符）',
            trigger: ['change']
        },
        manager: {
            type: 'string',
            required: true,
            message: '请输入联系人',
            trigger: ['change']
        },
        telphone: {
            type: 'string',
            required: true,
            pattern: /^1[3-9]{1}[0-9]{9}$/,
            message: '请输入手机号码',
            trigger: ['change']
        },
        identityUrl4Id: {
            type: 'string',
            required: true,
            message: '请上传法人身份证（人像）',
            trigger: ['change']
        },
        identityUrl5Id: {
            type: 'string',
            required: true,
            message: '请上传法人身份证（国徽）',
            trigger: ['change']
        },
        authUrlId: {
            type: 'string',
            required: true,
            message: '请上传企业营业执照',
            trigger: ['change']
        },
    }
    export default {
        components: {
            UploadIdNumber,
            PickerList
        },
        data() {
            return {
                showAddress: false,
                showJobCompanyNature: false,
                showjobCompanyIndustry: false,
                dic,
                formData: {},
                rules
            };
        },
        computed: {
            ...mapState({
                authInfo: (state) => state.auth.authInfo,
                userInfo: (state) => state.user.userInfo
            }),
        },
        created() {
            this.formData.manager = this.authInfo.realName
            this.formData.idNumber = this.authInfo.idNumber
        },
        methods: {
            hideKeyboard() {
                uni.hideKeyboard()
            },
            async submit() {
                const _this = this
                this.$refs.formOne.validate().then(async (res) => {
                    let params = {
                        ..._this.formData,
                        nature: Number(_this.formData.nature),
                        cityId: Number(_this.formData.cityId),
                        tradeId: Number(_this.formData.tradeId),
                        manager: _this.authInfo.realName,
                        idNumber: _this.authInfo.idNumber
                    }
                    let resData = await addInviteCompanyAuth(params)
                    if (resData.data.code === 200) {
                        _this.$api.msg('已完成企业信息认证')
                        uni.navigateBack()
                    }
                }).catch(errors => {
                    console.log(errors)
                    _this.$api.msg('请完善内容')
                })

            },
            reset() {
                const _this = this
                uni.showModal({
                    content: '重置将清空表单，确定重置吗？',
                    success() {
                        _this.formData = {}
                    },
                })
            }
        },
    }
</script>

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

        .card {
            .card_title {
                font-weight: bold;
                margin-top: 20rpx;
            }

            .card_content {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }
    }
</style>