qimall/addons/ReservationService/backend/views/user/edit.php

<el-drawer :title="(add ?'添加':'编辑') + custom_text" :show-close="false" :visible.sync="drawer" :direction="direction"
           :before-close="handleClose" size="500px">

    <div style=" height: auto; overflow-y: auto;">
    <el-form @submit.native.prevent v-loading="btnLoading" :model="form" :rules="rules" size="small" ref="form" label-width="130px">


        <el-form-item v-if="add" label="用户昵称" prop="nickname"
                      :rules="[{required: true, message: custom_text + '用户昵称不能为空'}]">
            <el-autocomplete size="small" style="width:320px" v-model="form.nickname" value-key="nickname" @keyup.enter.native="keyUp" :fetch-suggestions="querySearchAsync" placeholder="请输入用户昵称/id/手机号" @select="agentClick"></el-autocomplete>
        </el-form-item>

        <el-form-item :label="custom_text + '等级'" prop="level" :rules="[{required: true, message: custom_text + '等级不能为空'}]">
            <el-select style="width:320px" v-model="form.level" placeholder="请选择">
                <el-option v-for="item in levels" :key="item.level" :label="item.name" :value="item.level">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="身份证号" prop="idcard" :rules="[{required: true, message: '身份证号不能为空',trigger: 'blur'}]">
            <el-input class="width-300" v-model="form.idcard" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name" :rules="[{required: true, message: '姓名不能为空',trigger: 'blur'}]">
            <el-input class="width-300" v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile"
                      :rules="[{required: true, message: '联系电话不能为空',trigger: 'blur'}]">
            <el-input class="width-300" v-model="form.mobile" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender" :rules="[{required: true, message: '请选择性别',trigger: 'blur'}]">
            <el-radio v-model="form.gender" label="1">男</el-radio>
            <el-radio v-model="form.gender" label="2">女</el-radio>
        </el-form-item>

        <el-form-item label="年龄" prop="age" :rules="[{required: true, message: '年龄不能为空',trigger: 'blur'}]">
            <el-input class="width-300" v-model="form.age" placeholder="请输入年龄"  oninput="value=value.replace(/[^\d]/g,'')"></el-input>
        </el-form-item>

        <el-form-item prop="idcard_front" class="com-goods" label="身份证正面"
                      :rules="[{required: true,message: '请上传身份证正面'}]">
            <template v-if="form.idcard_front">
                <div style="margin-right: 20px;position: relative;display: inline-block;">
                    <com-attachment :multiple="false" :max="1" type="images">
                        <com-image mode="aspectFill" width="100px" height='100px' :src="form.idcard_front"> </com-image>
                    </com-attachment>
                    <el-button class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="delPic('idcard_front')"></el-button>
                </div>
            </template>

            <template v-if="!form.idcard_front">
                <com-attachment :multiple="false" :max="1" type="images" @selected="selectedImg($event, 'idcard_front')">
                    <el-tooltip class="item" effect="dark" content="建议尺寸:200px * 200px" placement="top">
                        <div flex="main:center cross:center" class="add-image-btn">
                            + 添加图片
                        </div>
                    </el-tooltip>
                </com-attachment>
            </template>
        </el-form-item>

        <el-form-item prop="idcard_back" class="com-goods" label="身份证反面"
                      :rules="[{required: true,message: '请上传身份证反面'}]">
            <template v-if="form.idcard_back">
                <div style="margin-right: 20px;position: relative;display: inline-block;">
                    <com-attachment :multiple="false" :max="1" type="images">
                        <com-image mode="aspectFill" width="100px" height='100px' :src="form.idcard_back"> </com-image>
                    </com-attachment>
                    <el-button class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="delPic('idcard_back')"></el-button>
                </div>
            </template>

            <template v-if="!form.idcard_back">
                <com-attachment :multiple="false" :max="1" type="images" @selected="selectedImg($event, 'idcard_back')">
                    <el-tooltip class="item" effect="dark" content="建议尺寸:200px * 200px" placement="top">
                        <div flex="main:center cross:center" class="add-image-btn">
                            + 添加图片
                        </div>
                    </el-tooltip>
                </com-attachment>
            </template>
        </el-form-item>
        <el-form-item prop="qualification_certificate" label="资格证书"
                      :rules="[{required: true,message: '请上传资格证书'}]">
            <draggable v-model="form.qualification_certificate" flex="dif:left" class="card-covers">
                <div class="card-coverimg" v-for="(item, index) in form.qualification_certificate">
                    <el-image class="elImages" style="width: 100px; height: 100px" :src="item"></el-image>
                    <el-button @click="delQualificationCertificatePic(index)" class="icon-close" type="primary"
                               size="mini" icon="el-icon-close" circle></el-button>
                </div>
                <com-attachment v-if="form.qualification_certificate.length < 9" :multiple="true" :max="9"
                                type="images" @selected="qualificationCertificatePic">
                    <el-tooltip class="item" effect="dark" content="建议尺寸:200px * 200px" placement="top">
                        <div flex="main:center cross:center" class="add-image-btn">
                            + 添加图片
                        </div>
                    </el-tooltip>
                </com-attachment>
            </draggable>
        </el-form-item>
        <el-form-item prop="avatar" class="com-goods" label="用户头像">
            <template v-if="form.avatar">
                <div style="margin-right: 20px;position: relative;display: inline-block;">
                    <com-attachment :multiple="false" :max="1" type="images">
                        <com-image mode="aspectFill" width="100px" height='100px' :src="form.avatar"> </com-image>
                    </com-attachment>
                    <el-button class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="delPic('avatar')"></el-button>
                </div>
            </template>

            <template v-if="!form.avatar">
                <com-attachment :multiple="false" :max="1" type="images" @selected="selectedImg($event, 'avatar')">
                    <el-tooltip class="item" effect="dark" content="建议尺寸:200px * 200px" placement="top">
                        <div flex="main:center cross:center" class="add-image-btn">
                            + 添加图片
                        </div>
                    </el-tooltip>
                </com-attachment>
            </template>
        </el-form-item>
        <el-form-item label="服务地址" prop="address" :rules="[{required: true, message: '服务地址不能为空'}]">
            <el-input class="width-300" v-model="form.address" v-mtfocus size="small" disabled placeholder="请输入服务地址" ></el-input>
        </el-form-item>
        <el-form-item label="经纬度" prop="" :rules="[{required: true}]">
            <el-input class="width-300" v-model="lng_lat" disabled></el-input>
        </el-form-item>
        <!-- 地图 start -->
        <template>
            <div style="padding-left:130px">
                <com-qq-map @map-submit="mapEvent" :address="form.address" :lat="form.latitude" :long="form.longitude">
                    <el-button type="primary" size="mini">选择地址</el-button>
                </com-qq-map>
            </div>
        </template>
    </el-form>
        <br/>
    <div >
        <div style=" display:flex;margin: auto;width: 150px;">
            <el-button type="warning" @click="handleClose" size="mini">
                取消
            </el-button>
            <el-button type="primary" style="margin-left:20px" @click="submitForm('form')" size="mini">
                保存
            </el-button>
        </div>
    </div>
    </div>
</el-drawer>