yiliangyiyun-app/pages/grain_pulse/position/position.vue

<template>
	<view class="">
		<view class="header">
			<view class="city Medium">
				<text class="select-city" @click="loadCity">{{city}}</text>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<u-search input-align="left" :disabled="true" @click="searchAddress" :show-action="false" height="70"
				placeholder="请输入位置信息" v-model="addressName"></u-search>
		</view>
		<view class="header2">
			<view class="header2-tip Regular">
				当前定位
			</view>
			<view class="header2-content">
				<view class="left Medium">
					<u-icon name="arrow-down"></u-icon>
					<view class="">{{address}}</view>
					<view class="" v-if="isposition">{{text}}</view>
				</view>
				<view class="reposition Regular" @click="reloadPosition">{{po_tips}}</view>
			</view>

		</view>

		<view class="position-list Regular">
			<view class="search">
				<view>最近搜索</view>
				<u-icon name="trash-fill" color="#AFB3BF" size="28" @click="delList"></u-icon>
			</view>
			<view class="search-list">
				<view v-for="(item,index) in list" class="search-list-item" @click="toHome(item)">
					{{item}}
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				addressName: "",
				isposition: false,
				isIos: true,
				address: "定位失败,请点击重新定位",
				city: '营口市',
				list: [],
				position: '',
				addressObj: {},
				seconds: 3,
				po_tips: '重新定位',
			}
		},
		onLoad(e) {
			if (e.city) {
				this.city = e.city
			}
			let that = this
			uni.getStorage({
				key: 'SearchList_key',
				success: function(res) {
					that.list = res.data
				}
			});
			this.getLocation()
			// 获取定位
			// this.utils.getLocation().then(function(res) {
			// 	debugger
			// 	console.log("定位信息",res)
			// 	this.city = res.address.city
			// 	this.address = res.address.poiName
			// 	console.log('city',this.city)
			// 	console.log('poiName',this.address)
			// 	if (res.errMsg != "getLocation:ok") {
			// 		// 定位权限未开启，引导设置
			// 		uni.showModal({
			// 			title: '温馨提示',
			// 			content: '您已拒绝定位,请开启',
			// 			confirmText: '去设置',
			// 			success(res) {
			// 				if (res.confirm) {
			// 					//打开授权设置
			// 					this.utils.openSetting()
			// 				}
			// 			}
			// 		})
			// 	}
			// })
		},
		methods: {
			// 删除最近搜索
			delList() {
				uni.setStorage({
					key: 'SearchList_key',
					data: []
				});
			},
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						console.log('获取位置数据：', res);
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						//拼接当前定位回显地址
						// #ifdef APP-PLUS
						let _address = res.address
						that.city = _address.city
						that.address = _address.province + _address.city + _address.district + _address.poiName
						console.log(that.address)
						// #endif
					}
				});
			},
			// 重新定位
			reloadPosition() {
				var that = this
				that.po_tips = '定位中...'
				let countdown = setInterval(() => {
					that.seconds--;
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							// #ifdef APP-PLUS
							let _address = res.address
							that.city = _address.city
							that.longitude = res.longitude
							that.latitude = res.latitude
							that.address = _address.province + _address.city + _address.district +
								_address.poiName
							// #endif
						}
					});
					if (that.seconds <= 0) {
						that.seconds = 3
						that.po_tips = '重新定位'
						clearInterval(countdown);
					}
				}, 1000);
			},
			openSetting() {
				// App跳转系统的设置界面
				// #ifdef APP-PLUS
				uni.getSystemInfo({
					success(res) {
						if (res.platform == 'ios') { //IOS
							plus.runtime.openURL("app-settings://");
						} else if (res.platform == 'android') { //安卓
							let main = plus.android.runtimeMainActivity();
							let Intent = plus.android.importClass("android.content.Intent");
							let mIntent = new Intent('android.settings.ACTION_SETTINGS');
							main.startActivity(mIntent);
						}
					}
				});
				// #endif
			},
			// 跳转ios权限界面
			judgeIosPermission: function(permisionID) {
				var result = permision.judgeIosPermission(permisionID)
				console.log(result);
				var strStatus = (result) ? "已" : "未"
				uni.showModal({
					content: permisionID + '权限' + strStatus + "获得授权",
					showCancel: false
				});
			},
			// 跳转安卓权限界面
			async requestAndroidPermission(permisionID) {
				var result = await permision.requestAndroidPermission(permisionID)
				var strStatus
				if (result == 1) {
					strStatus = "已获得授权"
				} else if (result == 0) {
					strStatus = "未获得授权"
				} else {
					strStatus = "被永久拒绝权限"
				}
				uni.showModal({
					content: permisionID + strStatus,
					showCancel: false
				});
			},
			// 搜索
			searchAddress(val) {
				// console.log(val)
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						console.log(res)
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						that.list.push(res.name)
						this.position = res.name
						uni.setStorage({
							key: 'SearchList_key',
							data: that.list
						});
						uni.setStorage({
							key: 'setLocaltion',
							data: res.name,
							success() {
								uni.switchTab({
									url: "../home"
								});
							}

						})
					}
				});

			},
			// 切换城市
			loadCity() {
				uni.navigateTo({
					url: "../selectCity/selectCity"
				})
			},
			toHome(item) {
				console.log("跳转首页")
				uni.setStorage({
					key: 'setLocaltion',
					data: item,
					success() {
						uni.switchTab({
							url: "../home",
							success(e) {
								console.log(e)

							}
						});
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-content {
		padding-left: 170rpx;
	}

	.header {
		position: relative;
		display: flex;
		background: white;
		padding: 20rpx;

		.city {
			top: 0;
			bottom: 0;
			left: 50rpx;
			margin: auto;
			position: absolute;
			display: flex;
			align-items: center;

			.select-city {
				margin-right: 4rpx;
			}

		}
	}

	.header2 {
		background: white;
		border-radius: 0 0 20rpx 20rpx;
		padding: 0 20rpx 34rpx 20rpx;

		.header2-tip {
			font-size: 28rpx;
			color: #AFB3BF;
		}

		.header2-content {
			font-size: 32rpx;
			color: #333333;
			display: flex;
			justify-content: space-between;
			margin-top: 12rpx;

			.left {
				display: flex;
			}

			.reposition {
				font-size: 28rpx;
				color: #22C572;
			}
		}
	}

	.position-list {
		margin-top: 20rpx;
		background: white;
		border-radius: 20rpx 20rpx 0 0;
		padding: 10rpx;


	}

	.search {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.search-list {
		padding: 20rpx;
	}

	.search-list-item {
		display: inline-block;
		background: #F5F6F9;
		border-radius: 32rpx;
		padding: 16rpx 24rpx;
		margin: 0 20rpx 20rpx 0;
	}
</style>