注册页面地图部分修改

shuishen

2022-02-26 7e3aabc15bd33959031ed07f14681ab2eedc3758

注册页面地图部分修改

 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": "人脸识别",

 pages/registerUser/map.vue

New file
@@ -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>

 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>