优化获取经纬度页面

components/linzq-citySelect/linzq-citySelect.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="wrapper">
+	<div class="">
 		<div class="header">
 <!-- 			<view class="back_div">
 				<image class="back_img" @click="back_city()" src="../../static/img/login/logo@2x.png" mode=""></image>
@@ -96,7 +96,7 @@
 				showMask: false,
 				disdingwei: true,
 				Visit: [], //最近访问
-				position: '营口市',
+				position: '营口',
 				longitude: '', //经度
 				latitude: '', //纬度
 				seconds: 3,
@@ -192,7 +192,7 @@
 				}
 			},
 
-			back_city(item) {debugger
+			back_city(item) {
 				if (item) {
 					this.positionObj.positionName = item
 					this.$emit('back_city', this.positionObj);
@@ -237,7 +237,7 @@
 							that.positionObj = res;
 							that.longitude = res.longitude
 							that.latitude = res.latitude
-							that.position = res.address.city
+							// that.position = res.address.city
 						}
 					});
 					if (that.seconds <= 0) {

pages/grain_pulse/distribution/distribution.nvue

@@ -3,7 +3,7 @@
 		<view class="header">
 			<view class="now-location">
 				<u-icon name="map" size="36" class="icon"></u-icon>
-				<text class="text Medium title">{{address}}</text>
+				<text class="text Medium title">{{position.name}}</text>
 			</view>
 			<view class="selectType">
 				<picker @change="bindPickerChange" :value="index" :range="typeList">
@@ -169,10 +169,10 @@
 					scrollTop: 0
 				},
 				"isActive": false,
-				address: {},
+				position: {},
 				nowLocation: {
-					longitude: '',
-					latitude: ''
+					latitude: 39.9085,
+					longitude: 116.39747,
 				},
 				showType: false,
 				enterpriseList: [],
@@ -180,8 +180,6 @@
 				index: 0,
 				typeList: ['全部类型', '粮仓', '加工厂'],
 				title: 'map',
-				latitude: 39.909,
-				longitude: 116.39742,
 				covers: [{
 					id: 0,
 					latitude: 39.9085,
@@ -193,16 +191,26 @@
 		onShow() {
 
 		},
-		onLoad() {
-			//获取当前位置
-			this.getLocation()
-			// var subnvue = uni.getSubNVueById('popup') // 获取nvue
-			// 	subnvue.show()  // 显示nvue
-			// uni.$on('popup', (data) => {
-			// 	console.log(data)
-			// })  
+		onLoad(e) {
+			this.position =  JSON.parse(e.position)
+			console.log("地点",this.position)
+			this.nowLocation.latitude = this.position.location.split(',')[1]
+			this.nowLocation.longitude = this.position.location.split(',')[0]
+			//获取标记点
+			this.getMarkers()
 		},
 		methods: {
+			getMarkers(){
+				//点击列表标记改变颜色，显示气泡提示
+				// this.$api.doRequest('get', '/settledCompanyInfo/selectSettledCompanyInfo', {
+				// 	pageSize: this.pageSize,
+				// 	currentPage: this.currentPage,
+				// }).then(res => {
+				// 	if (res.data.code == 200) {
+				// 		this.datalist = res.data.data.records
+				// 	}
+				// })
+			},
 			lineClick(){
 				this.isActive= !this.isActive
 				// this.isscroll = !this.isscroll

pages/grain_pulse/distribution/distribution.vue

@@ -1,74 +1,479 @@
 <template>
 	<view class="container">
-	<map 
-	
-	:latitude="latitude"
-	
-	:longitude="longitude"
-	
-	scale="11" 
-	
-	:markers="markers"
-	
-	:show-location="true"
-	
-	@markertap="markertap"
-	
-	@updated='mapUpdated'
-	
-	@tap='closeMapMarker'></map>
+		<view class="header">
+			<view class="now-location">
+				<u-icon name="map" size="36" class="icon"></u-icon>
+				<text class="text Medium title">{{position.name}}</text>
+			</view>
+			<view class="selectType">
+				<picker @change="bindPickerChange" :value="index" :range="typeList">
+					<text class="uni-input header-type">{{typeList[index]}}</text>
+				</picker>
+			</view>
+
+
+		</view>
+		<view class="uni-common-mt">
+			<view class="content">
+				<map class="map" @markertap="markertap" :latitude="nowLocation.latitude"
+					:longitude="nowLocation.longitude" :markers="covers" :enable-poi="true">
+				</map>
+			</view>
+		</view>
+		<view class="content2">
+			<view class="no-enterprise Regular" v-if="enterpriseList.length!=0">
+				附近暂无相关企业
+			</view>
+			<view class="warp">
+				<view class="line-style"  @click="lineClick">
+					<text class="top-line"></text>
+				</view>
+				<scroll-view :scroll-top="scrollTop" :scroll-y="isscroll" @scrolltoupper="upper" @scrolltolower="lower"
+					@scroll="scroll" :class="{'active':isActive}" class="scroll-style">
+					<view class="bottom-list-item">
+						<img class="left-img" src="/static/location.png" alt="">
+						<view class="middle">
+							<text class="title Medium">中天昊元粮库中天昊元粮库</text>
+							<text class="localtion Regular">辽宁省营口市鲅鱼圈区xx路108号</text>
+						</view>
+						<text class="line"></text>
+						<view class="right">
+							<img class="right-img" src="/static/location.png" alt="">
+							<text class="right-bottom Regular">500m</text>
+						</view>
+					</view>
+					<view class="bottom-list-item">
+						<img class="left-img" src="/static/location.png" alt="">
+						<view class="middle">
+							<text class="title Medium">中天昊元粮库中天昊元粮库</text>
+							<text class="localtion Regular">辽宁省营口市鲅鱼圈区xx路108号</text>
+						</view>
+						<text class="line"></text>
+						<view class="right">
+							<img class="right-img" src="/static/location.png" alt="">
+							<text class="right-bottom Regular">500m</text>
+						</view>
+					</view>
+					<view class="bottom-list-item">
+						<img class="left-img" src="/static/location.png" alt="">
+						<view class="middle">
+							<text class="title Medium">中天昊元粮库中天昊元粮库</text>
+							<text class="localtion Regular">辽宁省营口市鲅鱼圈区xx路108号</text>
+						</view>
+						<text class="line"></text>
+						<view class="right">
+							<img class="right-img" src="/static/location.png" alt="">
+							<text class="right-bottom Regular">500m</text>
+						</view>
+					</view>
+					<view class="bottom-list-item">
+						<img class="left-img" src="/static/location.png" alt="">
+						<view class="middle">
+							<text class="title Medium">中天昊元粮库中天昊元粮库</text>
+							<text class="localtion Regular">辽宁省营口市鲅鱼圈区xx路108号</text>
+						</view>
+						<text class="line"></text>
+						<view class="right">
+							<img class="right-img" src="/static/location.png" alt="">
+							<text class="right-bottom Regular">500m</text>
+						</view>
+					</view>
+					<view class="bottom-list-item">
+						<img class="left-img" src="/static/location.png" alt="">
+						<view class="middle">
+							<text class="title Medium">中天昊元粮库中天昊元粮库</text>
+							<text class="localtion Regular">辽宁省营口市鲅鱼圈区xx路108号</text>
+						</view>
+						<text class="line"></text>
+						<view class="right">
+							<img class="right-img" src="/static/location.png" alt="">
+							<text class="right-bottom Regular">500m</text>
+						</view>
+					</view>
+					<view class="bottom-list-item">
+						<img class="left-img" src="/static/location.png" alt="">
+						<view class="middle">
+							<text class="title Medium">中天昊元粮库中天昊元粮库</text>
+							<text class="localtion Regular">辽宁省营口市鲅鱼圈区xx路108号</text>
+						</view>
+						<text class="line"></text>
+						<view class="right">
+							<img class="right-img" src="/static/location.png" alt="">
+							<text class="right-bottom Regular">500m</text>
+						</view>
+					</view>
+					<view class="bottom-list-item">
+						<img class="left-img" src="/static/location.png" alt="">
+						<view class="middle">
+							<text class="title Medium">中天昊元粮库中天昊元粮库</text>
+							<text class="localtion Regular">辽宁省营口市鲅鱼圈区xx路108号</text>
+						</view>
+						<text class="line"></text>
+						<view class="right">
+							<img class="right-img" src="/static/location.png" alt="">
+							<text class="right-bottom Regular">500m</text>
+						</view>
+					</view>
+					<view class="bottom-list-item">
+						<img class="left-img" src="/static/location.png" alt="">
+						<view class="middle">
+							<text class="title Medium">中天昊元粮库中天昊元粮库</text>
+							<text class="localtion Regular">辽宁省营口市鲅鱼圈区xx路108号</text>
+						</view>
+						<text class="line"></text>
+						<view class="right">
+							<img class="right-img" src="/static/location.png" alt="">
+							<text class="right-bottom Regular">500m</text>
+						</view>
+					</view>
+					<view class="bottom-list-item">
+						<img class="left-img" src="/static/location.png" alt="">
+						<view class="middle">
+							<text class="title Medium">中天昊元粮库中天昊元粮库</text>
+							<text class="localtion Regular">辽宁省营口市鲅鱼圈区xx路108号</text>
+						</view>
+						<text class="line"></text>
+						<view class="right">
+							<img class="right-img" src="/static/location.png" alt="">
+							<text class="right-bottom Regular">500m</text>
+						</view>
+					</view>
+					<view class="bottom-list-item">
+						<img class="left-img" src="/static/location.png" alt="">
+						<view class="middle">
+							<text class="title Medium">中天昊元粮库中天昊元粮库</text>
+							<text class="localtion Regular">辽宁省营口市鲅鱼圈区xx路108号</text>
+						</view>
+						<text class="line"></text>
+						<view class="right">
+							<img class="right-img" src="/static/location.png" alt="">
+							<text class="right-bottom Regular">500m</text>
+						</view>
+					</view>
+				</scroll-view>
+
+			</view>
+
+		</view>
+
 	</view>
 </template>
 <script>
-	import amap from '@/js_sdk/js-amap/amap-wx.130.js'
+	// import amap from '@/js_sdk/js-amap/amap-wx.130.js'
 	export default {
 		data() {
 			return {
-				
+				isscroll: true,
+				scrollTop: 0,
+				old: {
+					scrollTop: 0
+				},
+				"isActive": false,
+				position: {},
+				nowLocation: {
+					latitude: 39.9085,
+					longitude: 116.39747,
+				},
+				showType: false,
+				enterpriseList: [],
+				// typeStr: '全部类型',
+				index: 0,
+				typeList: ['全部类型', '粮仓', '加工厂'],
+				title: 'map',
+				covers: [{
+					id: 0,
+					latitude: 39.9085,
+					longitude: 116.39747,
+					iconPath: '../../../static/img/location.png',
+				}]
 			}
 		},
 		onShow() {
 
 		},
-		onLoad() {
-			this.amapPlugin = new amap.AMapWX({
-			
-			key: this.mapKey  //该key 是在高德中申请的微信小程序key
-			
-			});
-			
-			this.amapPlugin.getRegeo({
-			
-			type: 'gcj02', //map 组件使用的经纬度是国测局坐标， type 为 gcj02
-			
-			success: function(res) {
-			
-			const latitude = res[0].latitude;
-			
-			const longitude = res[0].longitude;
-			
-			that.longitude = longitude;
-			
-			that.latitude = latitude;
-			
-			that.mapInfo=res[0];
-			
-			},
-			
-			fail: (res) => {
-			
-			console.log(JSON.stringify(res));
-			
+		onLoad(e) {
+			if(e.position){
+				this.position =  JSON.parse(e.position)
+				console.log("地点",this.position)
+				this.nowLocation.latitude = this.position.location.split(',')[1]
+				this.nowLocation.longitude = this.position.location.split(',')[0]
 			}
-			
-			});
+			//获取标记点
+			this.getMarkers()
 		},
 		methods: {
-	
+			getMarkers(){
+				//点击列表标记改变颜色，显示气泡提示
+				// this.$api.doRequest('get', '/settledCompanyInfo/selectSettledCompanyInfo', {
+				// 	pageSize: this.pageSize,
+				// 	currentPage: this.currentPage,
+				// }).then(res => {
+				// 	if (res.data.code == 200) {
+				// 		this.datalist = res.data.data.records
+				// 	}
+				// })
+			},
+			lineClick(){
+				this.isActive= !this.isActive
+				// this.isscroll = !this.isscroll
+			},
+			upper: function(e) {
+				console.log(e)
+			},
+			lower: function(e) {
+				console.log(e)
+			},
+			scroll: function(e) {
+				console.log(e)
+				this.old.scrollTop = e.detail.scrollTop
+			},
+			bindPickerChange: function(e) {
+				console.log('picker发送选择改变，携带值为', e.target)
+				this.index = e.detail.value
+			},
+			confirm() {
+				console.log('确定')
+				this.showType = false
+			},
+			cancel() {
+				console.log('取消')
+				this.showType = false
+			},
+			selectType() {
+				this.showType = true
+				console.log(1)
+			},
+			// typeConfirm(e) {
+			// 	console.log(e)
+			// 	this.typeStr = this.typeList[e[0]].name
+
+			// },
+			getLocation() {
+				let that = this;
+				// uni.getLocation({
+				// 	type: 'gcj02',
+				// 	geocode: true,
+				// 	success: function(res) {
+				// 		that.nowLocation.longitude = res.longitude
+				// 		that.nowLocation.latitude = res.latitude
+				// 		that.covers[0].longitude = res.longitude
+				// 		that.covers[0].latitude = res.latitude
+				// 		let _coverrsData = []
+				// 		for (let i = 0; i < 50; i++) {
+				// 			let _obj = {
+				// 				id: i,
+				// 				latitude: res.latitude += 0.00150,
+				// 				longitude: res.longitude + 0.00150,
+				// 				iconPath: '../../../static/img/location.png',
+				// 				width: 30,
+				// 				height: 30,
+				// 				callout: {
+				// 					content: '中天昊元粮库',
+				// 					color: '#333333',
+				// 					fontSize: 12,
+				// 					borderRadius: 20,
+				// 					padding: 4,
+				// 					bgColor: 'white',
+				// 					display: 'ALWAYS',
+				// 				},
+				// 			}
+				// 			_coverrsData.push(_obj)
+				// 		}
+				// 		that.covers = _coverrsData
+				// 		console.log('获取位置数据：', res);
+				// 		console.log('当前位置的经度：' + res.longitude);
+				// 		console.log('当前位置的纬度：' + res.latitude);
+				// 		//拼接当前定位回显地址
+
+				// 		// #ifdef APP-PLUS
+				// 		let _address = res.address
+				// 		that.address = _address.province + _address.city + _address.district + _address.poiName
+				// 		console.log(that.address)
+				// 		// #endif
+				// 	}
+				// });
+			},
+			markertap(e) {
+				console.log(e)
+				uni.showToast({
+					title: "点击id为" + e.detail.markerId + "的坐标",
+					icon: 'none',
+					duration: 2000
+				})
+			},
+			getLst() {
+				console.log("加载数据")
+			}
 
 		}
 	}
 </script>
 <style scoped>
-	
+	.active {
+		height: 583rpx!important;
+	}
+
+	.header {
+		flex-direction: row;
+		justify-content: space-between;
+		margin-bottom: 20rpx;
+		padding: 20rpx;
+	}
+
+	.title {
+		font-size: 32rpx;
+		font-weight: 500;
+		color: #333333;
+	}
+
+	.content {
+		width: 750px;
+		flex: 1;
+	}
+
+	.map {
+		height: 1350rpx;
+	}
+
+	.content2 {
+		position: fixed;
+		bottom: 0;
+		width: 750rpx;
+		flex: 1;
+		font-size: 34rpx;
+		background: white;
+		border-top-left-radius: 20rpx;
+		border-top-right-radius: 20rpx;
+	}
+
+	.warp {
+		/* 		flex-direction: row;
+		justify-content: center; */
+	}
+
+	.header-type {
+		font-size: 26rpx;
+		font-weight: 400;
+		color: #333333;
+	}
+
+	.alert {
+		flex: 1;
+	}
+
+	.select-alert {
+		background-color: green;
+		position: fixed;
+		bottom: 0;
+		width: 750rpx;
+		flex: 1;
+	}
+
+	.select-top {
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-around;
+		background: yellow;
+		height: 80rpx;
+	}
+
+
+	.select {
+		width: 750rpx;
+		flex: 1;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		background: white;
+	}
+
+	.cancel {
+		font-size: 24rpx;
+		color: white;
+		font-weight: bold;
+	}
+
+	.confirm {
+		font-size: 24rpx;
+		color: green;
+		font-weight: bold;
+	}
+
+	.select-item {
+		font-size: 24rpx;
+	}
+
+	.warp {}
+
+	.bottom-list-item {
+		flex-direction: row;
+		justify-content: space-between;
+		margin-bottom: 20rpx;
+		padding-bottom: 20rpx;
+		margin-top: 20rpx;
+		border-bottom: 1px solid #EEEEEE;
+	}
+
+	.left {}
+
+	.left-img {
+		width: 102rpx;
+		height: 106rpx;
+	}
+
+	.localtion {
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #AFB3BF;
+	}
+
+	.localtion {
+
+		flex-direction: column;
+	}
+
+	.right-img {
+		width: 21rpx;
+		height: 26rpx;
+		background: #AFB3BF;
+	}
+
+	.right {
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.middle {
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.warp {
+		padding: 20rpx;
+	}
+
+	.right-bottom {
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #AFB3BF;
+	}
+
+	.top-line {
+		width: 68px;
+		height: 8px;
+		background: #B4B7C3;
+		border-radius: 4px;
+		flex-direction: row;
+		margin-bottom: 30rpx;
+	}
+
+	.line-style {
+		flex-direction: row;
+		justify-content: center;
+	}
+
+	.scroll-style {
+		height: 130rpx;
+	}
 </style>

pages/grain_pulse/localtion/coordinate.nvue

@@ -8,10 +8,11 @@
 			</map>
 		</view>
 		<view class="bottom">
-			<text>
-				{{longitude}},{{latitude}}
-			</text>
-			<view class="" @click="config">确定</view>
+			<view class="bottom-left">
+				<text class="bottom-content">经度：{{longitude}}</text>
+				<text class="bottom-content">纬度：{{latitude}}</text>
+			</view>
+			<text class="config-btn" @click="config">确定</text>
 		</view>
 	</view>
 </template>
@@ -23,24 +24,21 @@
 				nowMapIndex: true,
 				phoneHeight: '', //屏幕高
 				phoneWidth: '', //屏幕宽
-				detail: {
-					longitude: '',
-					latitude: ''
-				},
 				nowLocation: {
-					longitude: '',
-					latitude: '',
+					longitude: 116.39747,
+					latitude: 39.9085,
 					address: '山海广场'
 				},
 				title: 'map',
 				latitude: 39.909,
 				longitude: 116.39742,
-				covers: [{
-					id: 0,
-					latitude: 39.9085,
-					longitude: 116.39747,
-					iconPath: '../../../static/img/location.png',
-				}]
+				// covers: [{
+				// 	id: 0,
+				// 	latitude: 39.9085,
+				// 	longitude: 116.39747,
+				// 	iconPath: '../../../static/img/location.png',
+				// }],
+				covers: []
 			}
 		},
 		onReady() {
@@ -54,9 +52,9 @@
 			});
 		},
 		computed: { //计算
-			nintyPercentScreenHeight() { //百分之九十的屏幕高
+			nintyPercentScreenHeight() { //百分之百的屏幕高
 				if (this.phoneHeight !== '' && this.phoneWidth !== '') {
-					return 750 / (this.phoneWidth) * (this.phoneHeight) * 0.9 + 'rpx'
+					return 750 / (this.phoneWidth) * (this.phoneHeight) + 'rpx'
 				} else {
 					return '1250rpx'
 				}
@@ -72,7 +70,7 @@
 			},
 		},
 		onLoad() {
-			this.getLocation()
+			// this.getLocation()
 		},
 		methods: {
 			getLocation() {
@@ -95,15 +93,25 @@
 				});
 			},
 			tap(e) {
+					let newmarker =[];
+							var id=1;
 				this.longitude = e.detail.longitude;
 				this.latitude = e.detail.latitude;
 				console.log(this.longitude)
 				console.log(this.latitude)
+				let maker= {
+					id: id++,
+					latitude: this.latitude,
+					longitude:this.longitude,
+					iconPath: '../../../static/img/location.png',
+				}
+				newmarker.push(maker)
+				this.covers = newmarker
 
 			},
-			config(){
+			config() {
 				uni.navigateTo({
-					
+
 				})
 			}
 		}
@@ -112,19 +120,23 @@
 
 <style scoped>
 	.content {
-flex: 1;
-width: 750rpx;
+		flex: 1;
+		width: 750rpx;
 	}
-	
+
 	.bottom {
-		width: 96%;
-		background: white;
 		position: fixed;
 		bottom: 54rpx;
-		left: 0;
+		left: 25rpx;
 		right: 0;
-		/* margin: auto; */
-		padding: 27rpx 37rpx;
+		width:700rpx;
+		background: white;
+		flex-direction: row;
+		flex: 1;
+		justify-content: space-between;
+		align-items: center;
+		padding: 22rpx 20rpx 22rpx 49rpx;
+		border-radius: 20rpx;
 	}
 
 	.title-style {
@@ -132,4 +144,17 @@ width: 750rpx;
 		font-weight: 500;
 		color: #333333;
 	}
+	.config-btn{
+		width: 144rpx;
+		height: 67rpx;
+		line-height: 67rpx;
+		background: #22C572;
+		border-radius: 10rpx;
+		color: white;
+		text-align: center;
+		font-size: 28rpx;
+	}
+	.bottom-content{
+		font-size: 28rpx;
+	}
 </style>

pages/grain_pulse/position/position.vue

@@ -7,8 +7,6 @@
 			</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">
@@ -22,10 +20,8 @@
 				</view>
 				<view class="reposition Regular" @click="reloadPosition">{{po_tips}}</view>
 			</view>
-
 		</view>
-
-		<view class="position-list Regular">
+		<view class="position-list Regular" v-if="addressName==''">
 			<view class="search">
 				<view>最近搜索</view>
 				<u-icon name="trash-fill" color="#AFB3BF" size="28" @click="delList"></u-icon>
@@ -37,9 +33,15 @@
 			</view>
 
 		</view>
-		<view>
-			<view v-html="item.name" v-for="(item,index) in searchList" :key="index">
-				<!-- {{item.name}} -->
+		<view class="search-content" v-if="addressName!=''">
+			<view v-for="(item,index) in searchList" :key="index" class="search-contnet-item" @click="addressClick(item)">
+				<view class="top">
+					<view v-html="item.newName" class="content"></view>
+					<view class="distance" v-if="address!='定位失败,请点击重新定位'">{{item.distance}}千米</view>
+				</view>
+				<view class="bottom">
+					{{item.adname}}{{item.address}}
+				</view>
 			</view>
 
 		</view>
@@ -49,7 +51,7 @@
 
 <script>
 	import permision from "@/js_sdk/wa-permission/permission.js"
-		import amap from '@/js_sdk/js-amap/amap-wx.130.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: {
@@ -92,12 +94,9 @@
 				},
 			})
 		},
-		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)
+		onLoad(e) {
+			// var p1 = [116.434027, 39.941037];
+			// var p2 = [116.461665, 39.941564];
 			let that = this
 			uni.getStorage({
 				key: 'SearchList_key',
@@ -106,31 +105,50 @@
 				}
 			});
 			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: {
+			addressClick(item){
+				this.list.push(item)
+				uni.setStorage({
+					key: 'SearchList_key',
+					data: this.list
+				});
+				uni.setStorage({
+					key: 'setLocaltion',
+					data: item,
+					success: (res) => {
+						uni.switchTab({
+							url:'../home'
+						})
+					},
+				
+				})
+				
+			},
+			// 排序
+			compare(property) {
+				return function(a, b) {
+					var value1 = a[property];
+					var value2 = b[property];
+					return value1 - value2;
+				}
+			},
+			// 经纬度计算距离
+			getDistance(lat1, lng1, lat2, lng2) {
+				lat2 = parseFloat(lat2)
+				lng2 = parseFloat(lng2)
+				console.log(lat1, lng1, lat2, lng2)
+				var radLat1 = lat1 * Math.PI / 180.0;
+				var radLat2 = lat2 * Math.PI / 180.0;
+				var a = radLat1 - radLat2;
+				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
+				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
+					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
+				s = s * 6378.137; // EARTH_RADIUS;
+				s = Math.round(s * 10000) / 10000;
+				console.log("计算结果", s, 'KM');
+				return s
+			},
 			// 删除最近搜索
 			delList() {
 				uni.setStorage({
@@ -150,8 +168,11 @@
 						//拼接当前定位回显地址
 						// #ifdef APP-PLUS
 						let _address = res.address
-						// that.city = _address.city
-						that.address = _address.province + _address.city + _address.district + _address.poiName
+						that.city = _address.city
+						that.seach.longitude = res.longitude
+						that.seach.latitude = res.latitude
+						that.address = _address.province + _address.city + _address.district + _address
+							.poiName
 						console.log(that.address)
 						// #endif
 					}
@@ -172,9 +193,10 @@
 							// #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 +
+							that.seach.longitude = res.longitude
+							that.seach.latitude = res.latitude
+							that.address = _address.province + _address.city + _address
+								.district +
 								_address.poiName
 							// #endif
 						}
@@ -231,11 +253,17 @@
 			},
 			//设置搜索关键字颜色
 			getStringColorReplace(val, val1) {
+				let _lat1 = this.seach.latitude
+				let _lng1 = this.seach.longitude
 				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);
+					var replaceString = '<view style="color:#22C572' + ';">' + val1 + "</view>";
+					val[j].newName = val[j].name.replace(RegExp(val1, 'g'), replaceString);
+					let _lat2 = val[j].location.split(',')[1];
+					let _lng2 = val[j].location.split(',')[0];
+					val[j].distance = this.getDistance(_lat1, _lng1, _lat2, _lng2)
 				}
-
+				//排序
+				this.searchList.sort(this.compare("distance"))
 			},
 			// 关键字搜索
 			searchAddress(val) {
@@ -253,45 +281,9 @@
 						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({
@@ -400,4 +392,34 @@
 		padding: 16rpx 24rpx;
 		margin: 0 20rpx 20rpx 0;
 	}
+	.search-content{
+		border-radius: 20rpx 20rpx 0 0;
+		margin-top: 20rpx;
+		padding:10rpx 20rpx;
+		background: white;
+		.search-contnet-item{
+			border-bottom:1px solid #EEEEEE;
+			padding-bottom: 10rpx;
+			margin-top: 20rpx;
+			.top{
+				display: flex;
+				justify-content: space-between;
+				.content{
+					font-size: 28rpx;
+					font-weight: 400;
+				}
+				.distance{
+					font-size: 24rpx;
+					font-weight: 400;
+					color: #AFB3BF;
+				}
+			}
+			.bottom{
+				margin-top: 6rpx;
+				font-size: 24rpx;
+				font-weight: 400;
+				color: #AFB3BF;
+			}
+		}
+	}
 </style>

pages/grain_pulse/selectCity/selectCity.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="container">
+	<view class="">
 		<citySelect @back_city="back_city"></citySelect>
 	</view>
 </template>
@@ -25,7 +25,7 @@
 			});
 		},
 		methods: {
-			back_city(e) {debugger
+			back_city(e) {
 				if (e.positionName !== 'no') {
 					this.region = e.positionName.cityName 
 					// this.$refs.popupRef.close();