anmo-master/my/qiandao/index.vue

<template>
	<view class="qiandao">
		<view class="top-box">
			<view class="flex justify-between align-center">
				<view style="font-weight: bold;font-size: 32rpx;color: #222222;">当前位置</view>
				<view style="color: #1EDA94;font-size: 28rpx;" @click="gxAddress">更新位置</view>
			</view>
			<view style="font-size: 28rpx;color: #AAAAAA;margin-top: 20rpx;">{{address}}</view>
			<view style="width: 100%;height: 1rpx;background: #E6E6E6;margin-top: 30rpx;"></view>
			<view class="flex align-center justify-between margin-top">
				<view style="color: #1EDA94;font-size: 28rpx;" @click="openMap">手动设置</view>
				<view class="btn" @tap="openSave" v-if="address">签到</view>
				<view class="btn" @tap="openMap" v-if="!address">选择地址</view>
			</view>
		</view>

		<view class=" margin-top">
			<view class="text-lg text-bold">服务区域(半径1km)</view>

			<view style="position: fixed;left: 0;bottom: 0;width: 750rpx;">
				<map style="width: 100%; height: 86vh;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
		
		
		<view class="range-box">
			<image class="icon" src="/static/images/index/map.png" mode=""></image>
			<view class="text">
				服务区域(半径1km)
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				address: '',
				covers: [{
					latitude: '',
					longitude: '',
					iconPath: '../../static/images/address.png'
				}]
			}
		},
		onLoad() {
			let that = this
			uni.getLocation({
				type: 'gcj02',
				geocode: true, //设置该参数为true可直接获取经纬度及城市信息
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					console.log('当前位置的位置：' + JSON.stringify(res));
					uni.setStorageSync('longitude', res.longitude);
					uni.setStorageSync('latitude', res.latitude);
					that.latitude = res.latitude
					that.longitude = res.longitude
				}
			});
		},
		onShow() {
			this.checkOpenGPSServiceByAndroid();
		},
		methods: {
			//判断用户是否开启定位-暂时不用
			checkOpenGPSServiceByAndroid() {
				let that = this
				// 1、判断手机定位服务【GPS】 是否授权
				uni.getSystemInfo({
					success(res) {
						// console.log(res)
						let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启
						let locationAuthorized = res.locationAuthorized; //判断定位服务是否允许微信授权
						if (locationEnabled == false || locationAuthorized == false) {
							//手机定位服务（GPS）未授权
							uni.showModal({
								title: '提示',
								content: '当前未开启定位权限，请允许使用位置信息后再来操作吧！',
								showCancel: false, // 不显示取消按钮
								success() {
									uni.navigateBack({
										delta: 1, //返回层数，2则上上页
									})
								}
							})
						} else {
							//手机定位服务（GPS）已授权
							if (res.hostName == 'WeChat') {
								//2、判断微信小程序是否授权位置信息
								uni.getSetting({
									success(res) {
										let scopeUserLocation = res.authSetting["scope.userLocation"];
										if (scopeUserLocation) {
											// 微信小程序已授权位置信息
										} else {
											// 微信小程序未授权位置信息
											uni.showModal({
												title: '提示',
												content: '当前未开启定位权限，请在小程序设置中允许使用位置信息后再来操作吧！',
												showCancel: false, // 不显示取消按钮
												success() {
													uni.navigateBack({
														delta: 1, //返回层数，2则上上页
													})
												}
											})
										}
									},
									fail() {
										// 微信小程序未授权位置信息
										uni.showModal({
											title: '提示',
											content: '当前未开启定位权限，请在小程序设置中允许使用位置信息后再来操作吧！',
											showCancel: false, // 不显示取消按钮
											success() {
												uni.navigateBack({
													delta: 1, //返回层数，2则上上页
												})
											}
										})
									}
								});
							} else {
							}
						}
					},
					fail() {
						// 手机定位服务（GPS）未授权
						uni.showModal({
							title: '提示',
							content: '获取位置信息失败',
							showCancel: false, // 不显示取消按钮
							success() {
								uni.navigateBack({
									delta: 1, //返回层数，2则上上页
								})
							}
						})
					}
				});
			},
			gxAddress() {
				let that = this;
				if (!that.latitude || !that.longitude) {
					that.$queue.showToast("请在设置中打开定位权限后刷新小程序再来更新吧！")
					return;
				}
				let longitude = uni.getStorageSync('longitude');
				let latitude = uni.getStorageSync('latitude');
				let userId = uni.getStorageSync('userId')
				this.$queue.showLoading('更新中...')
				let data = {
					typeId: longitude,
					typeName: latitude,
					userId: userId
				}
				that.$Request.postJson('/app/message/insertArtificerLocation', data).then(
					res => {
						uni.hideLoading();
						if (res.code === 0) {
							that.$queue.showToast('更新成功！');
						}
					});
			},
			openSave() {
				this.$queue.showLoading('签到中...')
				if (!this.address) {
					uni.hideLoading();
					this.openMap();
					// this.$queue.showToast('请选择地址信息后进行签到！')
					return;
				}
				if (!this.latitude || !this.longitude) {
					this.$queue.showToast("请在设置中打开定位权限后刷新小程序再来更新吧！")
					return;
				}
				let data = {
					longitude: this.longitude,
					latitude: this.latitude,
					address: this.address,
					city: ''
				}
				this.$Request.postT('/app/artificer/signIn', data).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.$queue.showToast('签到成功！')
						setTimeout(d => {
							uni.navigateBack();
						}, 1000)
					} else {
						this.$queue.showToast(res.msg)
					}
				});
			},
			openMap() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.address = res.address
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		max-height: calc(100vh - 44px);
	}
	.qiandao {
		background: #F5F5F5;
		.top-box{
			padding: 90rpx 32rpx 20rpx;
			position: fixed;
			top: 0%;
			left: 0;
			z-index: 99;
			width: 100%;
			box-sizing: border-box;
			background: #fff;
			box-shadow: 0rpx 6rpx 20rpx 2rpx rgba(0,0,0,0.16);
			border-radius: 0rpx 0rpx 64rpx 64rpx;
			box-sizing: border-box;
		}
		.range-box{
			position: fixed;
			left: 88rpx;
			bottom: 184rpx;
			z-index: 99;
			width: 574rpx;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 20rpx 2rpx rgba(0,0,0,0.16);
			border-radius: 52rpx 52rpx 52rpx 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon{
				width: 48rpx;
				height: 48rpx;
			}
			.text{
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
			}
		}
	}

	.bg {
		background: #FFFFFF;

	}

	.btn {
		width: 156rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: #1EDA94;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>