From 7e3aabc15bd33959031ed07f14681ab2eedc3758 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 26 Feb 2022 23:53:37 +0800
Subject: [PATCH] 注册页面地图部分修改
---
pages/registerUser/registerUser.vue | 213 ++++++----------------------------
pages.json | 8 +
pages/registerUser/map.vue | 132 ++++++++++++++++++++++
3 files changed, 180 insertions(+), 173 deletions(-)
diff --git a/pages.json b/pages.json
index 8536089..5a8874d 100644
--- a/pages.json
+++ b/pages.json
@@ -26,6 +26,14 @@
}
},
{
+ "path": "pages/registerUser/map",
+ "name": "registerUserMap",
+ "style": {
+ "navigationStyle": "custom", // 隐藏系统导航栏
+ "navigationBarTextStyle": "white" // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一
+ }
+ },
+ {
"path": "pages/registerUser/idphoto",
"style": {
"navigationBarTitleText": "人脸识别",
diff --git a/pages/registerUser/map.vue b/pages/registerUser/map.vue
new file mode 100644
index 0000000..a02591f
--- /dev/null
+++ b/pages/registerUser/map.vue
@@ -0,0 +1,132 @@
+<template>
+ <view class="content">
+ <u-navbar height="44" :is-back="false" title="获取地址" title-color="#fff" :background="{background: '#103289'}">
+ <u-button class="slot-wrap" type="primary" size="mini" @click="returnPage">确定</u-button>
+ </u-navbar>
+ <map id="SignLocationMap"
+ style="position: absolute; left: 0; width: 100%; z-index: 99;"
+ :style="{height: screenHeight + '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>
+ </map>
+ </view>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ screenHeight: 0,
+ mapLocationName: '',
+ mapLocationLatitude: '',
+ mapLocationLongitude: '',
+
+ regionID: '',
+
+ latitude: 28.678983439095823,
+ longitude: 115.84414205551147,
+ scale: 15 //缩放级别
+ }
+ },
+ onReady() {
+ var that = this
+
+ uni.getSystemInfo({
+ success: function(res) {
+ console.log(res, 465)
+ that.screenHeight = res.windowHeight - 44
+ }
+ })
+ },
+ methods: {
+ 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) {}
+ );
+ },
+
+ returnPage() {
+ console.log(1)
+ var that = this
+ uni.$emit('getLocation', {
+ mapLocationName: that.mapLocationName,
+ regionID: that.regionID
+ });
+ //关闭当前窗口
+ uni.navigateBack({});
+ }
+
+ },
+ watch: {
+
+
+ }
+ };
+</script>
+</script>
+
+<style lang="scss" scoped>
+ .slot-wrap {
+ position: absolute;
+ top: 0;
+ left: auto;
+ right: 10px;
+ bottom: 0;
+ margin: auto;
+ color: #fff;
+ /* 如果您想让slot内容占满整个导航栏的宽度 */
+ /* flex: 1; */
+ /* 如果您想让slot内容与导航栏左右有空隙 */
+ /* padding: 0 30rpx; */
+ }
+
+ .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: 9999;
+ transform: translateY(-22px);
+ }
+
+</style>
diff --git a/pages/registerUser/registerUser.vue b/pages/registerUser/registerUser.vue
index 0fc39fc..0ba084c 100644
--- a/pages/registerUser/registerUser.vue
+++ b/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>
--
Gitblit v1.9.3