注册页

shuishen

2022-02-19 8d81203f0117ebe071ba2d25e9f3dda356c7b777

 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;