liuyg
2022-02-21 e3dcaeb0180a4e37347ac9ceb44c8a59ae7af37f
pages/registerUser/registerUser.vue
@@ -6,20 +6,17 @@
            <u-input v-model="form[item.froms]" :placeholder="item.placeholder" />
         </u-form-item>
         <u-form-item label="角色" prop="role" left-icon="account-fill" label-width="200" :required="true">
            <u-radio-group v-model="form.role" @change="radioGroupChange">
               <u-radio v-for="(item, index) in role" :key="index" :name="item.name" :disabled="item.disabled">
                  {{ item.name }}
               </u-radio>
            </u-radio-group>
            <u-input v-model="form.role" type="select" placeholder="请选择角色" :border="true" @click="depl" />
            <u-select v-model="show" mode="mutil-column-auto" :list="roleList" @confirm="radioGroupChange">
            </u-select>
         </u-form-item>
         <u-form-item label="组织机构" prop="obj" left-icon="account-fill" label-width="200" :required="true"
         <u-form-item label="工作单位" prop="obj" left-icon="account-fill" label-width="200" :required="true"
            v-if="xqShow">
            <u-input v-model="form.obj" type="select" placeholder="请选择组织机构" :border="true" @click="depl" />
            <u-select v-model="show" mode="mutil-column-auto" :list="listbm" @confirm="confirm"></u-select>
            <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="openLoginMap" />
            <!-- <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">
@@ -28,10 +25,38 @@
               </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>
      <view class="agree">
         注册即代表同意
         <text class="a">《用户协议》</text>
         和
         <text class="a">《隐私政策》</text>
      </view>
      <div class="login-map-bc" v-if="mapShow">
         <div @click="mapShow = false">
         </div>
         <div class="login-map-content">
            <u-icon class="login-map-close" name="close" @click="mapShow = false"></u-icon>
            <view style="width: 100%; height: 100%; position: absolute; ">
               <web-view :src="loginMapUrl"></web-view>
            </view>
         </div>
      </div>
      <u-button class="submit" @click="zc">
         下一步</u-button>
      <!-- <u-button class="submit" @click="submit">提交</u-button> -->
   </view>
</template>
@@ -39,7 +64,64 @@
<script>
   export default {
      data() {
         var validateUser = (rule, value, callback) => {
            var phone = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
            var identity =
               /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
            if (value.length <= 11) {
               if (phone.test(value)) {
                  return true
               } else {
                  return callback(new Error('手机号格式不正确'));
               }
            }
            if (value.length <= 18) {
               if (identity.test(value)) {
                  return true
               } else {
                  return callback(new Error('身份证号格式不正确'));
               }
            }
         };
         return {
            regionName: '',
            loginMapUrl: "",
            radioList: [{
                  name: '是',
                  disabled: false
               },
               {
                  name: '否',
                  disabled: false
               }
            ],
            radioValue: '否',
            mapShow: false,
            latitude: 28.68, //纬度
            longitude: 115.85, //经度
            scale: 12, //缩放级别
            polyline: [
               //    { //指定一系列坐标点,从数组第一项连线至最后一项
               //    points: [{
               //          latitude: 34.79977,
               //          longitude: 113.66072
               //       },
               //       {
               //          latitude: 34.795541,
               //          longitude: 113.681646
               //       },
               //    ],
               //    color: "#0000AA", //线的颜色
               //    width: 1, //线的宽度
               //    //     dottedLine:true,//是否虚线
               //    arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
               // },
            ],
            marker: [],
            show: false,
            showxq: false,
            xqShow: true,
@@ -52,14 +134,14 @@
                  img: 'man-add-fill',
                  froms: 'user',
                  requireds: true,
                  placeholder: '请输入帐号'
                  placeholder: '请输入身份证号或手机号'
               },
               {
                  title: '密码',
                  img: 'lock-fill',
                  froms: 'pass',
                  requireds: true,
                  placeholder: '请输入密码'
                  placeholder: '请输入6~16位密码'
               },
               {
                  title: '确认密码',
@@ -74,13 +156,6 @@
                  froms: 'name',
                  requireds: true,
                  placeholder: '请输入姓名'
               },
               {
                  title: '身份证',
                  img: 'fingerprint',
                  froms: 'carId',
                  requireds: true,
                  placeholder: '请输入身份证'
               },
               {
                  title: '手机号',
@@ -106,30 +181,6 @@
                  disabled: false
               },
            ],
            role: [{
                  name: '民警',
                  disabled: false
               },
               {
                  name: '群众',
                  disabled: false
               },
               {
                  name: '群防队伍',
                  disabled: false
               },
               // {
               //    name: '保安',
               //    disabled: false
               // },
            ],
            objList: [{
                  text: '赣州'
               },
               {
                  text: '南昌'
               }
            ],
            form: {
               user: '',
               pass: '',
@@ -146,19 +197,25 @@
            },
            rules: {
               user: [{
                  required: true,
                  message: '请输入账号',
                  // 可以单个或者同时写两个触发验证方式
                  /*
                   u-form提供的可直接调用的js验证,
                   具体有哪些可以观看官方文档,这里就不在赘述了。
                  */
                  validator: validateUser,
                  trigger: ['change', 'blur'],
               }],
               }, ],
               pass: [{
                  required: true,
                  message: '请输入密码',
                  message: '请输入6~16位密码',
                  // 可以单个或者同时写两个触发验证方式 
                  trigger: ['change', 'blur'],
               }, {
                  min: 6,
                  message: '密码不能少于6个字',
                  message: '密码不能少于6位',
                  trigger: ['change', 'blur']
               }, {
                  max: 16,
                  message: '密码不能超出16位',
                  trigger: ['change', 'blur']
               }],
               passTwo: [{
@@ -187,13 +244,7 @@
               }],
               obj: [{
                  required: true,
                  message: '请选择组织机构',
                  // 可以单个或者同时写两个触发验证方式
                  trigger: ['change', 'blur'],
               }],
               xq: [{
                  required: true,
                  message: '请选择辖区',
                  message: '请输入工作单位',
                  // 可以单个或者同时写两个触发验证方式 
                  trigger: ['change', 'blur'],
               }],
@@ -203,26 +254,18 @@
                  // 可以单个或者同时写两个触发验证方式 
                  trigger: ['change', 'blur'],
               }],
               xq: [{
                  required: true,
                  message: '请选择辖区',
                  // 可以单个或者同时写两个触发验证方式
                  trigger: ['change', 'blur'],
               }],
               depts: [{
                  required: true,
                  message: '请输入姓名',
                  // 可以单个或者同时写两个触发验证方式 
                  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: '请输入手机号',
@@ -240,58 +283,183 @@
            faceState: -2,
            facebc: '#fff',
            faceco: '#000',
            faceMsg: ''
            faceMsg: '',
            roleList: [{
                  label: '民警',
                  value: 1417092295132561409
               },
               {
                  label: '治保会队伍',
                  value: 1424615693403414529
               },
               {
                  label: '内保干部队伍',
                  value: 1424615773594312705
               },
               {
                  label: '治安巡防队伍',
                  value: 1424615835435130881
               },
               {
                  label: '信息员队伍',
                  value: 1424615909959524354
               },
               {
                  label: '保安员队伍',
                  value: 1424615972718895106
               },
               {
                  label: '警务辅助队伍',
                  value: 1424616047083905026
               },
               {
                  label: '平安志愿者',
                  value: 1494565079268491266
               }
            ]
         };
      },
      onShow() {
         let that = this
         uni.$on('updateDataRegionName', function(data) {
            that.regionName = data
            that.form.xq = that.regionName
         })
      },
      methods: {
         handleMessage(name) {
            console.log(name)
            if (name.indexOf('区') != -1) {
               that.regionName = name.replace('区', '派出所');
            } else if (name.indexOf('县') != -1) {
               that.regionName = name.replace('县', '派出所');
            } else if (name.indexOf('市') != -1) {
               that.regionName = name.replace('市', '市派出所');
            }
         },
         openLoginMap() {
            var that = this
            uni.getLocation({
               type: 'wgs84',
               success: function(res) {
                  console.log('当前位置的经度:' + res.longitude);
                  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, //透明度
                  }]
                  var data = [{
                     "id": '100000',
                     "place": '无数据',
                     "state": '0',
                     "dtype": '0',
                     "size": '300',
                     "jd": res.longitude,
                     "wd": res.latitude
                  }]
                  uni.navigateTo({
                     url: '/pages/currentMap/currentMap?data=' + JSON.stringify(data)
                  })
                  // that.loginMapUrl =
                  //    'http://192.168.0.115:5500/leafletMapOur/loginMap/loginMap.html?data=' + data
                  // // that.loginMapUrl = 'http://223.82.109.183:2082/loginMap/loginMap.html?data=' + data
                  // that.mapShow = true
               }
            })
         },
         zc() {
            var that = this;
            this.$refs.uForm.validate(valid => {
               if (valid) {
                  var d = this.form;
                  uni.navigateTo({
                     url: '/pages/registerUser/idphoto?data= ' + encodeURIComponent(JSON.stringify(
                        d))
            uni.request({
               url: that.$store.state.piAPI + '/zc/inspect',
               method: 'GET',
               data: {
                  username: this.form.user
               },
               success: (res) => {
                  if (res.data.code == 400) {
                     uni.showToast({
                        title: res.data.msg,
                        icon: 'none',
                        duration: 2000
                     });
                     return
                  }
                  that.$refs.uForm.validate(valid => {
                     if (valid) {
                        var d = that.form;
                        uni.navigateTo({
                           url: '/pages/registerUser/idphoto?data= ' +
                              encodeURIComponent(JSON.stringify(
                                 d))
                        });
                     }
                  });
               }
            });
         },
         depl() {
            var that = this;
            uni.request({
               url: that.$store.state.piAPI + "/blade-system/dept/trees",
               method: 'get',
               success: (res) => {
                  var routerArr = res.data.data;
                  var arr = that.formatRoutes(routerArr);
                  var list = [];
                  if (that.deptXb != "") {
                     list.push(arr[that.deptXb]);
                     for (var i = 0; i < list.length; i++) {
                        list[i].children.unshift({
                           label: '--请选择--',
                           value: 0,
                           children: []
                        })
                        for (var j = 0; j < list[i].children.length; j++) {
                           list[i].children[j].children.unshift({
                              label: '--请选择--',
                              value: 0,
                           })
                        }
                     }
                     that.listbm = list;
                     that.show = true;
                  } else {
                     uni.showToast({
                        title: '请选择角色',
                        icon: "none",
                        duration: 1000
                     });
                  }
               }
            })
            that.show = true;
         },
         // depl() {
         //    var that = this;
         //    uni.request({
         //       url: that.$store.state.piAPI + "/blade-system/dept/trees",
         //       method: 'get',
         //       success: (res) => {
         //          var routerArr = res.data.data;
         //          var arr = that.formatRoutes(routerArr);
         //          var list = [];
         //          if (that.deptXb != "") {
         //             list.push(arr[that.deptXb]);
         //             for (var i = 0; i < list.length; i++) {
         //                list[i].children.unshift({
         //                   label: '--请选择--',
         //                   value: 0,
         //                   children: []
         //                })
         //                for (var j = 0; j < list[i].children.length; j++) {
         //                   list[i].children[j].children.unshift({
         //                      label: '--请选择--',
         //                      value: 0,
         //                   })
         //                }
         //             }
         //             that.listbm = list;
         //             that.show = true;
         //          } else {
         //             uni.showToast({
         //                title: '请选择角色',
         //                icon: "none",
         //                duration: 1000
         //             });
         //          }
         //       }
         //    })
         // },
         deplxq() {
            var that = this;
            uni.request({
@@ -319,19 +487,6 @@
                  that.showxq = true;
               }
            })
         },
         confirm(e) {
            var arr = "";
            var data = [];
            for (var i = 0; i < e.length; i++) {
               if (e[i].value != "0") {
                  arr += e[i].value + ",";
                  data.push(e[i]);
               }
            }
            var obj = arr.substr(0, arr.length - 1);
            this.form.obj = data[data.length - 1].label;
            this.form.objId = obj;
         },
         confirmxq(e) {
            var arr = "";
@@ -392,25 +547,13 @@
         dataChange(data) {
            console.log(data);
         },
         objCallback(index) {
            this.form.obj = this.objList[index].text;
         },
         // 选中任一radio时,由radio-group触发
         radioGroupChange(e) {
            this.xqShow = true;
            if (e == "群众") {
               this.xqShow = false;
               this.form.jsid = '1416225849858883585';
               this.form.objId = '1424616967934959617,1424617046523633666';
            } else if (e == "民警") {
               this.form.jsid = '1417092295132561409';
               this.deptXb = "0";
            } else if (e == "群防队伍") {
               this.deptXb = "1";
               this.form.jsid = '1372092102682521602';
            } else if (e == "保安") {
               this.form.jsid = '';
            }
            this.form.role = e[0].label
            this.form.jsid = e[0].value
            this.show = false;
         }
      },
      onReady() {
@@ -433,12 +576,47 @@
               this.faceMsg = '(服务连接失败!)';
            }
         }
      }
   };
</script>
</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: 100%;
      z-index: 222;
      border-radius: 15px 15px 0 0;
      overflow: hidden;
      iframe {
         border: none;
      }
   }
   .login-map-close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 20px;
      height: 20px;
      z-index: 11;
   }
   .warp {
      display: flex;
      align-items: center;
@@ -483,4 +661,17 @@
   .registerUser {
      padding: 0 1.2rem;
   }
   .agree {
      margin: 27rpx 95rpx 0;
      font-size: 22rpx;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #cacaca;
      line-height: 34rpx;
      .a {
         color: #000000;
      }
   }
</style>