qimall/addons/Store/client/views/reserve-staff/add.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-attachment');
ComponentHelper::loadComponentView('com-image');
ComponentHelper::loadComponentView('com-map');
ComponentHelper::loadComponentView('com-qq-map');
?>
<style>
    .form-body {
        background-color: #fff;
        padding: 20px 68% 20px 0;
    }

    .button-item {
        margin-top: 12px;
        padding: 9px 25px;
    }

    .tip {
        margin-left: 10px;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        color: #ff4544;
        background-color: #FEF0F0;
        padding: 0 20px;
        border-radius: 5px;
    }
    .el-table th>.cell{
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }
    .el-dialog {
        border-radius:5px;
    }
    .el-dialog__header {
        background-color: #333;
        border-radius:5px 5px 0 0;
    }
    .el-dialog__title {
        color: #fff;
    }

    .search-form {
        padding: 30px 20px;
        background-color: #f4f7fb;
        display: flex;
    }
    .search-form .el-form-item {
        width: 60%;
        /* float: left; */
    }
    .claer {
        clear: both;
    }
    .el-dialog--center .el-dialog__body {
        padding: 15px 15px 20px;
    }
    .search-form .el-button {
        /* margin: 0 0 0 120px; */
        width: 100px;
    }
</style>
<section id="app" v-cloak>
    <el-card class="box-card" style="border:0" shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header" class="clearfix">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><span style="color: #409EFF;cursor: pointer"
                                          @click="$navigate({r:'store/client/reserve-staff/index'})">技师管理</span></el-breadcrumb-item>
                <el-breadcrumb-item>添加技师</el-breadcrumb-item>
            </el-breadcrumb>
            <span></span>
        </div>
        <div class="form-body">
            <el-form :model="form" :rules="rules" size="small" ref="form" label-width="130px"  v-loading="listLoading">

                <el-form-item label="用户昵称" prop="nickname" :rules="[{required: true, message: custom_text + '等级不能为空'}]">
                    <el-autocomplete size="small" style="width:320px" v-model="form.nickname" value-key="nickname"  :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="身份证正面">
                    <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="身份证反面">
                    <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" class="com-goods" label="资格证书">
                    <template v-if="form.qualification_certificate">
                        <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.qualification_certificate"> </com-image>
                            </com-attachment>
                            <el-button class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="delPic('qualification_certificate')"></el-button>
                        </div>
                    </template>

                    <template v-if="!form.qualification_certificate">
                        <com-attachment :multiple="false" :max="1" type="images" @selected="selectedImg($event, 'qualification_certificate')">
                            <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="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">
                    <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="">
                    <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">选择地址</el-button>
                        </com-qq-map>
                    </div>
                </template>
            </el-form>
        </div>
        <el-button type="warning" @click="$navigate({r:'store/client/reserve-staff/index'})" size="mini">
            取消
        </el-button>
        <el-button type="primary" style="margin-left:20px" @click="submitForm('form')" size="mini">
            保存
        </el-button>
    </el-card>
</section>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {

                keyword: '',
                listLoading: false,
                btnLoading: false,

                list:[],

                form: {
                    user_id: '',
                    level: '',
                    idcard: '',
                    idcard_front: '',
                    idcard_back: '',
                    address: '',
                    longitude: '',
                    latitude: '',
                    nickname: '',
                    name: '',
                    mobile: '',
                    qualification_certificate: '',
                    avatar: '',
                    age: '',
                    gender: 0,
                },
                rules: {},

                levels: [],
                custom_text: '',
                user: {
                    keyword: ''
                },
                lng_lat: '',
            };
        },
        methods: {
            submitForm(formName) {
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.btnLoading = true;
                        request({
                            params: {
                                r: 'store/client/reserve-staff/add'
                            },
                            method: 'post',
                            data: {
                                form: _this.form,
                            }
                        }).then(e => {
                            _this.btnLoading = false
                            if (e.data.code == 0) {
                                _this.drawer = false
                                _this.$message.success(e.data.msg)
                                this.page = 1;
                                _this.loadData()
                            } else {
                                _this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            _this.$message.error(e.data.msg);
                            _this.btnLoading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getLevels() {
                let _this = this;
                _this.btnLoading = true
                let basic_params = {
                    r: 'store/client/reserve-staff/get-levels',
                };
                request({
                    params: basic_params,
                    method: 'get',
                }).then(e => {
                    _this.btnLoading = false
                    _this.levels = e.data.data
                }).catch(e => {
                    console.log(e);
                });
            },
            loadData() {
                this.loading = true;
                let params = {
                    r: 'store/client/reserve-staff/add',
                };
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.custom_text = e.data.data.custom_text;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            querySearchAsync(queryString, cb) {
                this.user.keyword = queryString;
                this.getUser(cb);
            },
            getUser(cb) {
                request({
                    params: {
                        r: 'store/client/reserve-staff/search-user',
                        keyword: this.user.keyword
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        cb(res.data.data.list)
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            agentClick(row) {
                this.form.user_id = row.id
                this.form.nickname = row.nickname
                this.handleBlur();
            },
            mapEvent(e) {
                this.form.longitude = e.long;
                this.form.latitude = e.lat;
                this.form.address = e.address;
                this.lng_lat = e.lat + '-' + e.long;
            },
            handleClose() {

            },
            delPic(key) {
                this.form[key] = '';
            },
            selectedImg(e, key) {
                this.form[key] = e[0].url;

            },
            handleBlur(){
                request({
                    params: {
                        r: 'store/client/reserve-staff/check-staff-user',
                        user_id: this.form.user_id
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        this.form = res.data.data.user;
                        this.form.gender = this.form.gender.toString();
                        this.lng_lat = res.data.data.user.longitude+'-'+res.data.data.user.latitude;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            }



        },
        computed: {

        },
        mounted() {
            this.loadData();
            this.getLevels();
        }
    })
</script>