shuishen
2022-02-19 8d81203f0117ebe071ba2d25e9f3dda356c7b777
注册页
1 files modified
112 ■■■■■ changed files
pages/registerUser/registerUser.vue 112 ●●●●● patch | view | raw | blame | history
pages/registerUser/registerUser.vue
@@ -15,8 +15,8 @@
                <u-input v-model="form.obj" placeholder="请输入工作单位" />
            </u-form-item>
            <u-form-item label="辖区" prop="xq" left-icon="account-fill" label-width="200" :required="true">
                <u-input v-model="form.xq" type="select" placeholder="请选择辖区" :border="true" @click="deplxq" />
                <u-select v-model="showxq" mode="mutil-column-auto" :list="listxq" @confirm="confirmxq"></u-select>
                <u-input v-model="form.xq" type="select" placeholder="请选择辖区" :border="true" @click="mapShow = true" />
                <!-- <u-select v-model="showxq" mode="mutil-column-auto" :list="listxq" @confirm="confirmxq"></u-select> -->
            </u-form-item>
            <u-form-item label="性别" label-width="200" left-icon="man">
                <u-radio-group v-model="form.sex">
@@ -25,12 +25,26 @@
                    </u-radio>
                </u-radio-group>
            </u-form-item>
            <u-form-item label="是否人脸登录" label-width="240" left-icon="server-man">
                <u-radio-group v-model="radioValue">
                    <u-radio v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled">
                        {{item.name}}
                    </u-radio>
                </u-radio-group>
                (功能研发中)
            </u-form-item>
        </u-form>
        <div v-show="mapShow" style="position: fixed; bottom: 0; left: 0; width: 100%; height: 60%; z-index: 111; border-radius: 15px;">
            <map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="marker"
                :scale="scale" :polyline="polyline">
            </map>
        <div v-show="mapShow">
            <div class="login-map-bc" @click="mapShow = false">
            </div>
            <div class="login-map-content">
                <u-icon class="login-map-close" name="close" @click="mapShow = false"></u-icon>
                <map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="marker"
                    :scale="scale" :polyline="polyline">
                </map>
            </div>
        </div>
        <u-button @click="mapShow = true">打开</u-button>
@@ -46,6 +60,16 @@
    export default {
        data() {
            return {
                radioList: [{
                        name: '是',
                        disabled: false
                    },
                    {
                        name: '否',
                        disabled: false
                    }
                ],
                radioValue: '否',
                mapShow: false,
                latitude: 28.68, //纬度
                longitude: 115.85, //经度
@@ -102,13 +126,6 @@
                        froms: 'name',
                        requireds: true,
                        placeholder: '请输入姓名'
                    },
                    {
                        title: '身份证',
                        img: 'fingerprint',
                        froms: 'carId',
                        requireds: true,
                        placeholder: '请输入身份证'
                    },
                    {
                        title: '手机号',
@@ -222,20 +239,6 @@
                        // 可以单个或者同时写两个触发验证方式 
                        trigger: ['change', 'blur'],
                    }],
                    carId: [{
                            required: true,
                            message: '请输入身份证',
                            // 可以单个或者同时写两个触发验证方式
                            trigger: ['change', 'blur'],
                        },
                        {
                            validator: (rule, value, callback) => {
                                return this.$u.test.idCard(value);
                            },
                            message: '身份证号码不正确',
                            trigger: ['change', 'blur'],
                        }
                    ],
                    // phone: [{
                    //     required: false,
                    //     message: '请输入手机号',
@@ -298,19 +301,17 @@
                        console.log('当前位置的纬度:' + res.latitude);
                        that.latitude = res.latitude
                        that.longitude = res.longitude
                        that.marker = [
                            {
                                id: 0,
                                latitude: res.latitude, //纬度
                                longitude: res.longitude, //经度
                                iconPath: '/static/img/map/location.png', //显示的图标
                                rotate: 0, // 旋转度数
                                width: 20, //宽
                                height: 20, //高
                                title: '位置', //标注点名
                                alpha: 1, //透明度
                            }
                        ]
                        that.marker = [{
                            id: 0,
                            latitude: res.latitude, //纬度
                            longitude: res.longitude, //经度
                            iconPath: '/static/img/map/location.png', //显示的图标
                            rotate: 0, // 旋转度数
                            width: 20, //宽
                            height: 20, //高
                            title: '位置', //标注点名
                            alpha: 1, //透明度
                        }]
                    }
                })
            },
@@ -488,6 +489,35 @@
</script>
<style lang="scss" scoped>
    .login-map-bc {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 111;
        background: rgba(0, 0, 0, .3);
    }
    .login-map-content {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60%;
        z-index: 111;
        border-radius: 15px;
        overflow: hidden;
    }
    .login-map-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        z-index: 11;
    }
    .warp {
        display: flex;
        align-items: center;