注册页面地图部分修改

shuishen

2022-02-26 7e3aabc15bd33959031ed07f14681ab2eedc3758

 pages/registerUser/registerUser.vue

@@ -21,21 +21,21 @@
               </u-radio>
            </u-radio-group>
         </u-form-item>
			

         <u-form-item v-show="jobValue == '有'" label="单位名称" prop="jobUnit" label-width="200" left-icon="home"
            :required="true">
            <u-input v-model="form.jobUnit" placeholder="请输入单位名称" />
         </u-form-item>
			

         <u-form-item v-show="jobValue == '有'" label="工作地点" prop="xq" left-icon="map-fill" label-width="200"
            :required="true">
            <u-input v-model="form.xq" type="select" placeholder="请选择工作地点" :border="true"
               @click="regionClick('工作地点')" />
               @click="regionClick()" />
         </u-form-item>
			

         <u-form-item label="居住地" prop="address" left-icon="map" label-width="200" :required="true">
            <u-input v-model="form.address" type="select" placeholder="请选择居住地" :border="true"
               @click="placeClick('居住地')" />
               @click="placeClick()" />
         </u-form-item>
         <u-form-item label="性别" label-width="200" left-icon="man">
            <u-radio-group v-model="form.sex">
@@ -66,24 +66,6 @@

      <u-button class="submit" @click="zc">
         注册</u-button>

      <map v-show="signLocation" id="SignLocationMap"
         style="position: fixed; left: 0; width: 100%; z-index: 99;"
         :style="{height: screenHeight + 'px', top: screenTop + 'px'}"
         @regionchange="regionChange" :latitude="latitude" :longitude="longitude" :scale="scale">

         <cover-view class="dingwBut">
            <cover-image class="location-log" src="../../static/img/location.png">
            </cover-image>
         </cover-view>

         <cover-view class="confirmBtn" @click="confirmChangeBtn">
            获取地址
         </cover-view>
      </map>

      <!-- <u-button @click="signLocation = true">dakai</u-button> -->
      <!-- <u-button class="submit" @click="submit">提交</u-button> -->
   </view>
</template>

@@ -116,22 +98,6 @@
         };

         return {
            // 设置高度, TOP值
            screenHeight: 0,
            screenTop: 0,
				
            // 记录地区获取居住地
            regionOrPlace: '',

            // 地图相关
            scale: 15, //缩放级别
            signLocation: false,
            latitude: 28.678983439095823,
            longitude: 115.84414205551147,
            mapLocationName: '',
            mapLocationLatitude: '',
            mapLocationLongitude: '',

            userConsent: false,
            jobValue: '无',
            jobList: [{
@@ -143,7 +109,6 @@
                  disabled: false
               }
            ],
            regionName: '',
            radioList: [{
                  name: '是',
                  disabled: false
@@ -360,13 +325,37 @@
               url: '/pages/registerUser/agreement?e=' + e
            });
         },
         regionClick(e) {
            this.regionOrPlace = e
            this.signLocation = true
         regionClick() {
            let that = this;

            //监听事件
            uni.$on('getLocation', (res) => {
               that.form.xq = res.mapLocationName
               this.form.workjurisdiction = res.regionID
               //清除监听，不清除会消耗资源
               uni.$off('getLocation');

            })

            uni.navigateTo({
               url: '/pages/registerUser/map'
            });
         },
         placeClick(e) {
            this.regionOrPlace = e
            this.signLocation = true
         placeClick() {
            let that = this;

            //监听事件
            uni.$on('getLocation', (res) => {
               that.form.address = res.mapLocationName
               this.form.jurisdiction = res.regionID
               //清除监听，不清除会消耗资源
               uni.$off('getLocation');

            })

            uni.navigateTo({
               url: '/pages/registerUser/map'
            });
         },
         zc() {
            if (this.userConsent == false) {
@@ -397,9 +386,9 @@
                     return

                  }
						

                  that.registerEvent()
						

                  // that.$refs.uForm.validate(valid => {
                  //    if (valid) {
                  //       var d = that.form;
@@ -415,7 +404,7 @@
            });

         },
			

         registerEvent() {
            var d = this.form;
            var url = this.$store.state.piAPI + '/zc/inster',
@@ -459,9 +448,9 @@
                  }, 2000);
               }
            });
				

         },
			

         depl() {
            this.show = true;
         },
@@ -472,81 +461,10 @@
            this.form.jsid = e[0].value

            this.show = false;
         },
         regionChange() { // 移动地图后重新获取门店
            var that = this
            uni.createMapContext('SignLocationMap', this).getCenterLocation({
               success: res => {
                  that.getLocationInfor(res.longitude, res.latitude)
               },
               fail: res => {
                  uni.showModal({
                     content: '获取位置失败',
                     showCancel: false
                  })
               }
            })
         },

         getLocationInfor(longitude, latitude) {
            var that = this
            var point = new plus.maps.Point(longitude, latitude);
            plus.maps.Map.reverseGeocode(
               point, {},
               function(event) {
                  var address = event.address; // 转换后的地理位置
                  var point = event.coord; // 转换后的坐标信息
                  var coordType = event.coordType; // 转换后的坐标系类型


                  that.mapLocationName = address
                  that.mapLocationLongitude = point.longitude
                  that.mapLocationLatitude = point.latitude

               },
               function(e) {}
            );
         },

         confirmChangeBtn() {
            var that = this
            if (this.mapLocationName == "") {
               this.getLocationInfor(this.longitude, this.latitude)
            }

            if (this.regionOrPlace == "工作地点") {
               this.form.xq = this.mapLocationName
            } else {
               this.form.address = this.mapLocationName
            }

            uni.request({
               url: that.$store.state.piAPI + '/jurisdiction/isOnArea',
               method: 'get',
               data: {
                  jd: that.mapLocationLongitude,
                  wd: that.mapLocationLatitude
               },
               success: (res) => {
                  if (this.regionOrPlace == "工作地点") {
                     this.form.workjurisdiction = res.data.data[0].id
                  } else {
                     this.form.jurisdiction = res.data.data[0].id
                  }
               }
            });

            this.signLocation = false
         }
      },
      onReady() {
         var that = this
         this.$refs.uForm.setRules(this.rules);
			
         uni.getSystemInfo({success: function (res) {
            that.screenHeight = res.windowHeight 
            that.screenTop = res.windowTop 
         }})
      },
      watch: {
         faceState() {
@@ -630,56 +548,5 @@
         margin: 0 10rpx;
         color: #103289;
      }
   }


   @keyframes StartJump {
      0% {
         transform: translateY(-22px);
      }

      50% {
         transform: translateY(-32px);
      }

      100% {
         transform: translateY(-22px);
      }
   }

   .dingwBut {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 999;
      transform: translateY(-22px);
   }

   .confirmBtn {
      width: 96px;
      height: 36px;
      line-height: 32px;
      position: absolute;
      top: auto;
      left: 0;
      right: 0;
      bottom: 18rpx;
      margin: auto;
      z-index: 999;
      text-align: center;

      background: #103289;
      color: #fff;

      border-radius: 5px;

   }
</style>