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

<template>
	<view class="">
		<view class="header">
			<view class="city Medium">
				<view class="select-city" @click="loadCity">{{city}}</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<u-search input-align="left" @change="searchAddress" :show-action="false" height="70" placeholder="请输入位置信息"
				v-model="addressName"></u-search>
			<!-- 	<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.name}}
				</view>
			</view>

		</view>
		<view>
			<view v-html="item.name" v-for="(item,index) in searchList" :key="index">
				<!-- {{item.name}} -->
			</view>

		</view>

	</view>
</template>

<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
		import amap from '@/js_sdk/js-amap/amap-wx.130.js'
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				searchList: [],
				nowRegion: {},
				addressName: "",
				isposition: false,
				isIos: true,
				address: "定位失败,请点击重新定位",
				city: '北京',
				list: [],
				position: '',
				addressObj: {},
				seconds: 3,
				po_tips: '重新定位',
				seach: {
					latitude: 39.92,
					longitude: 116.46,
				}
			}
		},
		onShow() {
			let that = this
			uni.getStorage({
				key: 'nowRegion',
				success: (res) => {
					console.log("nowRegion", res.data)
					that.nowRegion = res.data
					this.seach.longitude = res.data.longitude
					this.seach.latitude = res.data.latitude
					that.city = res.data.positionName.cityName
					// console.log("city", that.city)
					uni.removeStorage({
						key: 'nowRegion'
					})
				},
			})
		},
		onLoad(e) {debugger
			var p1 = [116.434027, 39.941037];
			var p2 = [116.461665, 39.941564];
			// 返回 p1 到 p2 间的地面距离，单位：米
			var dis = amap.GeometryUtil.distance(p1, p2);
			console.log("dis",dis)
			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',
						geocode: true,
						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
				});
			},
			//设置搜索关键字颜色
			getStringColorReplace(val, val1) {
				for (let j = 0; j < val.length; j++) {
					var replaceString = '<view style="color:red' + ';">' + val1 + "</view>";
					val[j].name = val[j].name.replace(RegExp(val1, 'g'), replaceString);
				}

			},
			// 关键字搜索
			searchAddress(val) {
				console.log(1222)
				let parameters = {
					key: 'dd701d394d116b50268dc16470ddd615',
					keywords: val,
					region: this.city,
					page_size: 25
				}
				uni.request({
					url: 'https://restapi.amap.com/v5/place/text',
					data: parameters,
					success: (res) => {
						console.log(res.data);
						this.searchList = res.data.pois
						this.getStringColorReplace(res.data.pois, val)


					}
				});
			},
			// 搜索
			// searchAddress(val) {
			// 	// console.log(val)
			// 	let that = this;
			// 	console.log("search", that.seach)
			// 	uni.chooseLocation({
			// 		latitude: that.seach.latitude,
			// 		longitude: that.seach.longitude,
			// 		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)
			// 			this.position = res.name
			// 			uni.setStorage({
			// 				key: 'SearchList_key',
			// 				data: that.list
			// 			});
			// 			uni.setStorage({
			// 				key: 'setLocaltion',
			// 				data: res,
			// 				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>