GuangYuYuan-shanghu/src/pages/demo/apply.vue

<template>
    <view class="page-container">
        <u-navbar title="提交资料" :autoBack="true" placeholder border></u-navbar>

        <view class="form-content">
            <u--form ref="uForm" 
                labelWidth="auto" labelPosition="top" 
                :labelStyle="{ color: '#333', fontWeight: 500, marginBottom: '10rpx' }"
				:model="form" :rules="rules"
			>
                <view class="section-title">基本信息</view>
                <view class="card-box">
                    <u-form-item label="真实姓名" prop="cName">
                        <u-input v-model="form.cName" placeholder="请输入真实姓名" border="none" class="custom-input"></u-input>
                    </u-form-item>
                    <u-form-item label="性别" prop="nSex">
                        <u-radio-group v-model="form.nSex" activeColor="#00cba3">
                            <u-radio label="男" :name="1" customStyle="margin-right: 30px"></u-radio>
                            <u-radio label="女" :name="0"></u-radio>
                        </u-radio-group>
                    </u-form-item>
                    <u-form-item label="手机号" prop="cPhone">
                        <u-input v-model="form.cPhone" placeholder="请输入手机号" border="none" class="custom-input"></u-input>
                    </u-form-item>
                    <u-form-item label="入驻城市" prop="city" @click="show = true">
                        <u-input v-model="form.city" readonly placeholder="请选择城市" border="none"
                            class="custom-input"></u-input>
                    </u-form-item>
                    <u-form-item label="近期生活照" prop="cImgList">
                        <Upload
                            @fileList="onUpload($event, 'cImgList')"
                        />
                    </u-form-item>
                </view>

                <view class="section-title">详细信息</view>
                <view class="card-box">
                    <u-form-item label="昵称" prop="cNickName">
                        <u-input v-model="form.cNickName" placeholder="请输入昵称" border="none"
                            class="custom-input"></u-input>
                    </u-form-item>
                    <u-form-item label="头像" prop="cPortrait">
                        <Upload
                            :maxCount="1"
                            @fileList="onUpload($event, 'cPortrait')"
                        />
                    </u-form-item>
                    <u-form-item label="所在位置" prop="address" @click="onSelAddr">
                        <u-input v-model="address" readonly placeholder="请选择工作所在位置" border="none" class="custom-input"></u-input>
                    </u-form-item>
                    <u-form-item label="个人简介" prop="cJianjie">
                        <u--textarea v-model="form.cJianjie" placeholder="请输入个人简介" border="none"
                            class="custom-input"></u--textarea>
                    </u-form-item>
                </view>

                <view class="section-title">上传身份证正反面 <text class="sub-tip">*最多3张</text></view>
                <view class="card-box">
                    <Upload
                        :maxCount="3"
                        @fileList="onUpload($event, 'cSfzImg')"
                    />

                    <template v-if="0">
                        <view class="id-upload-row">
                            <Upload
                                name="idCardFront"
                                width="auto"
                                height="220rpx"
                                :maxCount="1"
                                @fileList="onUpload($event, 'idCardFront')"
                            >
                                <view class="upload-block" slot="content">
                                    <view class="icon-bg"><u-icon name="camera-fill" color="#fff" size="20"></u-icon></view>
                                    <text class="up-text">身份证人像面</text>
                                </view>
                            </Upload>
                            <Upload
                                name="idCardBack"
                                width="auto"
                                height="220rpx"
                                :maxCount="1"
                                @fileList="onUpload($event, 'idCardBack')"
                            >
                                <view class="upload-block" slot="content">
                                    <view class="icon-bg"><u-icon name="camera-fill" color="#fff" size="20"></u-icon></view>
                                    <text class="up-text">身份证国徽面</text>
                                </view>
                            </Upload>
                        </view>
                        <Upload
                            name="idCardHand"
                            width="auto"
                            height="220rpx"
                            :maxCount="1"
                            @fileList="onUpload($event, 'idCardHand')"
                        >
                            <view class="upload-block full-width" slot="content">
                                <view class="icon-bg"><u-icon name="camera-fill" color="#fff" size="20"></u-icon></view>
                                <text class="up-text">手持身份证照片</text>
                            </view>
                        </Upload>
                    </template>

                    <!-- 隐藏的表单项，用于校验图片 -->
                    <u-form-item prop="cSfzImg" style="display: none;"></u-form-item>
                </view>

                <view class="section-title">
                    上传资格证书 
                </view>
                <view class="card-box">
                    <Upload
                        :maxCount="1"
                        @fileList="onUpload($event, 'certification')"
                    />
                    <!-- 隐藏的表单项，用于校验图片 -->
                    <u-form-item prop="certification" style="display: none;"></u-form-item>
                </view>

                <view class="section-title">上传营业执照</view>
                <view class="card-box">
                    <Upload
                        :maxCount="1"
                        @fileList="onUpload($event, 'businessLicense')"
                    />
                    <!-- 隐藏的表单项，用于校验图片 -->
                    <u-form-item prop="businessLicense" style="display: none;"></u-form-item>
                </view>

                <view class="section-title">上传无犯罪证明</view>
                <view class="card-box">
                    <Upload
                        :maxCount="1"
                        @fileList="onUpload($event, 'noCrime')"
                    />
                    <!-- 隐藏的表单项，用于校验图片 -->
                    <u-form-item prop="noCrime" style="display: none;"></u-form-item>
                </view>

                <view class="section-title">上传承诺书信息</view>
                <view class="card-box">
                    <u-form-item label="承诺书" prop="commitment">
                        <Upload
                            accept="file"
                            :maxSize="10240"
                            :maxCount="2"
                            @fileList="onUpload($event, 'commitment')"
                        />
                    </u-form-item>
                    <u-form-item label="承诺录音" prop="recording">
                        <Upload
                            accept="file"
                            :maxSize="10240"
                            :maxCount="2"
                            @fileList="onUpload($event, 'recording')"
                        />
                    </u-form-item>
                    <u-form-item label="承诺录像" prop="videoRecording">
                        <Upload
                            accept="file"
                            :maxSize="51200"
                            :maxCount="2"
                            @fileList="onUpload($event, 'videoRecording')"
                        />
                    </u-form-item>
                </view>
            </u--form>

            <view class="footer-bar">
                <u-button text="提交" color="#1BD6CD" shape="circle"
                    customStyle=""
                    @click="onSubmit"
                ></u-button>
            </view>
        </view>

        <!-- 城市选择 -->
        <u-picker :show="show" :columns="[cityList]" keyName="label" 
            @cancel="show = false" @confirm="onSelect"
        ></u-picker>
    </view>
</template>

<script>
import {
    getCityList,
    getProjectList,
    getMerchantData,
} from '@/api/index';
import Upload from '@/components/upload/index.vue';
export default {
    components: {
        Upload
    },
    data() {
        return {
            form: {
                cName: '',
                nSex: 0,
            },
            rules: {
				city: [
					{
						required: true,
						message: '请选择城市',
						trigger: ['blur', 'change']
					}
				],
				cName: [
					{
						required: true,
						message: '请输入您的姓名',
						trigger: ['blur', 'change']
					}
				],
				cNickName: [
					{
						required: true,
						message: '请输入您的昵称',
						trigger: ['blur', 'change']
					}
				],
				cPhone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
                    {
                        pattern: /^1([3589]\d|4[01456879]|6[0-9]|7[0-8])\d{8}$/, 
                        message: '请输入正确的手机号格式', 
                        trigger: ['blur', 'change']
					}
				],
				address: [
					{
						required: true,
						message: '请选择位置',
						trigger: ['blur', 'change']
					}
				],
				cJianjie: [
					{
						required: true,
						message: '请填写您的简介',
						trigger: ['blur', 'change']
					}
				],
                cSfzImg: [{ required: true, message: '请上传身份证', trigger: ['change'] }],
                cImgList: [{ required: true, message: '最少上传一张生活照片', trigger: ['change'] }],
                cPortrait: [{ required: true, message: '请上传头像', trigger: ['change'] }],
				// 针对隐藏表单项的校验规则
				// idCardBack: [{ required: true, message: '请上传身份证国徽面', trigger: ['change'] }],
            },
            query: {},
            // 城市选择
            show: false,
            cityList: [],
        };
    },
    computed: {
        address() {
            return (this.form.address || '') + (this.form.name || '');
        }
    },
    onLoad(query) {
        this.query = query;
        if (query.id) this.getData();
        this.getCity();
    },
	onReady() {
		// 页面加载完成后为表单设置规则
		this.$refs.uForm.setRules(this.rules);
	},
    methods: {
        getData() {
            let params = {
                cOpenId: uni.getStorageSync('wx_copenid')
            }
            getMerchantData(params).then(res => {
                let data = res.data.data;
                this.form = data;
            });
        },
        getCity() {
            getCityList().then(res => {
                this.cityList = res.data.data.map(({
                    deptId,
                    deptName
                }) => ({
                    value: deptId,
                    label: deptName
                }))
            });
        },
        onSelAddr() {
            uni.chooseLocation({
                success: res => {
                    this.form.name = res.name;
                    this.form.address = res.address || res.name;
                    this.form.latitude = res.latitude;
                    this.form.longitude = res.longitude;
                }
            });
        },
        onSelect(e) {
            this.form = {
                ...this.form,
                city: e.value[0].label,
                deptId: e.value[0].value,
            }
            this.show = false;
        },
        // upload事件
        onUpload(e, t) {
            this.form[t] = e.map(item => item.url);
        },
        onSubmit() {
			this.$refs.uForm.validate().then(res => {
                let api = netStaffAdd;
                if (this.query.id) api = netStaffUpdate;
                api().then(ares => {
                    uni.$u.toast(ares.data.msg);
                    if (ares.data.code == 200) {
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 1000);
                    }
                });
			}).catch(errors => {
                console.log(errors)
                let f = errors.some(item => ['cSfzImg', 'certification', 'businessLicense', 'noCrime'].indexOf(item.field) !== -1);
				if (f) uni.$u.toast(errors[0].message);
			})
		}
    }
};
</script>

<style lang="scss" scoped>
.page-container {
    min-height: 100vh;
    padding-bottom: 130rpx;
    background-color: #f8f8f8;

    .form-content {
        padding: 24rpx;

        .section-title {
            font-size: 30rpx;
            font-weight: bold;
            margin: 30rpx 0 20rpx;
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 20rpx;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 6rpx;
                bottom: 6rpx;
                width: 6rpx;
                background-color: #00cba3;
                border-radius: 4rpx;
            }

            .sub-tip {
                font-size: 24rpx;
                color: #ff5e5e;
                font-weight: normal;
                margin-left: 10rpx;
            }
        }

        .card-box {
            background: #fff;
            border-radius: 16rpx;
            padding: 20rpx;
            margin-bottom: 20rpx;
        }

        .custom-input {
            background-color: #f5f6f8;
            border-radius: 8rpx;
            padding: 6rpx 20rpx !important;
        }
    }
}

/* 身份证上传样式 */
.id-upload-row {
    gap: 10rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
}

.upload-block {
    // width: 100%;
    height: 220rpx;
    background-color: #f9f9f9;
    border-radius: 12rpx;
    border: 1rpx dashed #eee;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;

    &.full-width {
        width: 100%;
        height: 240rpx;
    }

    .icon-bg {
        width: 60rpx;
        height: 60rpx;
        background-color: #00cba3;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16rpx;
    }

    .up-text {
        font-size: 24rpx;
        color: #666;
    }
}
</style>