1

uni_applet/pageA/food/fondMap.vue

@@ -1,92 +1,109 @@
-
 <template>
-  <view>
-    <view class="map-container">
-      <map style="width: 100%; height: 100vh;" :show-location='true' ref="map" id="map" :latitude="latitude"
-        :longitude="longitude" :markers="marker" :scale="scale" @callouttap='callouttap' 
-        v-if="mapShow">
-        <view class="cover-view">
-          <view style="margin-top: 20rpx;" @click="onControltap">
-            <image class="cover-image" src="@/static/image/food/location.png"></image>
-            <view>定位</view>
-          </view>
-        </view>
-      </map>
-    </view>
-    <view class="search" :style="{top:topHeight+'px'}">
-      <searchBar @click="search" :city="city"></searchBar>
-    </view>
-    <cardList :stationList="markerIdClick" v-if="tag" style="position: fixed;top: 70%;"></cardList>
-    <tabbar :current="current"></tabbar>
-  </view>
+	<view>
+		<view class="map-container">
+			<map style="width: 100%; height: 100vh;" :show-location='true' ref="map" id="map" :latitude="latitude"
+				:longitude="longitude" :markers="marker" :scale="scale" @callouttap='callouttap' v-if="mapShow">
+				<view class="cover-view">
+					<view @click="onControltap">
+						<image class="cover-image" src="@/static/image/food/dw.png"></image>
+					</view>
+				</view>
+			</map>
+		</view>
+		<!-- <view class="search" :style="{top:topHeight+'px'}">
+			<searchBar @click="search" :city="city"></searchBar>
+		</view> -->
+		<cardList :stationList="markerIdClick" v-if="tag" style="position: fixed;top: 70%;"></cardList>
+		<tabbar :current="current"></tabbar>
+	</view>
 </template>
- 
+
 <script>
-  export default {
-    data() {
-      return {
-        mapShow: false,
-        topHeight: 20,
-        tag: false,
-        latitude: '', //纬度
-        longitude: '', //经度
-        scale: 12, //缩放级别
-        current: 1,
-        marker: [],
-        pageSize: 10,
-        pageNum: 1,
-        total: 0, // 总数据量
-        markerIdClick: [],
-        mapList: [],
-      }
-    },
-    async onLoad() {
-      // let userLocation = uni.getStorage({
-      //   key: 'userLocation'
-      // })
-      // await userLocation.then(data => {
-      //   let arr = data[1].data.split(',')
-      //   this.longitude = arr[0]
-      //   this.latitude = arr[1]
-      //   console.log(arr);
-      // })
-      this.getStationList()
-      const {
-        height,
-        top
-      } = uni.getMenuButtonBoundingClientRect();
-      this.topHeight = height + top + 13
-    },
-    methods: {
-     search(searchInp) {
-        console.log('search页面子向父传值', searchInp);
-      },
-      regionChange() {
-        this.tag = false
-        if (this.pageNum * this.pageSize >= this.total) return
-        this.pageNum++
-        this.getStationList()
-      },
-      //定位
-      onControltap() {
-        uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
-          latitude: this.latitude,
-          longitude: this.longitude,
-        });
-        console.log('定位');
-      },
-      //气泡点击事件
-      callouttap(e) {
-        let id = String(e.detail.markerId)
-        let arr = this.mapList.find(item => {
-          return item.stationId === id
-        })
-        this.markerIdClick = [arr]
-        this.tag = true
-      },
-	  getList(){
-		  return new Promise((resolve, reject) => {
-			this.$request.baseRequest('admin.tourism.foodInfo', 'foodList', {
+	import {
+		authorizedLocation
+	} from '@/util/util.js'
+	export default {
+		data() {
+			return {
+				mapShow: false,
+				topHeight: 20,
+				tag: false,
+				latitude: '', //纬度
+				longitude: '', //经度
+				scale: 12, //缩放级别
+				current: 1,
+				marker: [],
+				pageSize: 10,
+				pageNum: 1,
+				total: 0, // 总数据量
+				markerIdClick: [],
+				mapList: [],
+			}
+		},
+		async onLoad() {
+			this.isdingwei()
+			this.getStationList()
+			const {
+				height,
+				top
+			} = uni.getMenuButtonBoundingClientRect();
+			this.topHeight = height + top + 13
+		},
+		methods: {
+			isdingwei() {
+				authorizedLocation().then(res => {
+					let _obj = {}
+					if (res == '取消授权') {
+						//获取上一次，无上一次山海广场
+						let _place = uni.getStorageSync("LocationPlace")
+						if (_place && _place.latitude) {
+							_obj = {
+								latitude: _place.latitude,
+								longitude: _place.longitude
+							}
+						} else {
+							_obj = {
+								latitude: 40.22086204872,
+								longitude: 122.08338497727
+							}
+						}
+
+					} else {
+						_obj = {
+							latitude: res.latitude,
+							longitude: res.longitude
+						}
+					}
+					this.longitude = _obj.longitude
+					this.latitude = _obj.latitude
+
+				})
+			},
+			search(searchInp) {
+				console.log('search页面子向父传值', searchInp);
+			},
+			regionChange() {
+				this.tag = false
+				if (this.pageNum * this.pageSize >= this.total) return
+				this.pageNum++
+				this.getStationList()
+			},
+			//移动到当前位置
+			onControltap() {
+				uni.createMapContext("map", this).moveToLocation();
+			},
+			//气泡点击事件
+			callouttap(e) {
+				let id = String(e.detail.markerId)
+				let arr = this.mapList.find(item => {
+					return item.stationId === id
+				})
+				this.markerIdClick = [arr]
+				this.tag = true
+			},
+			getList() {
+				return new Promise((resolve, reject) => {
+					this.$request.baseRequest('admin.tourism.foodInfo', 'foodList', {
 						page: 1,
 						limit: 9999,
 					}, failres => {
@@ -95,111 +112,116 @@
 							title: failres.errmsg,
 							duration: 3000
 						});
-			
+
 					}).then(res => {
 						uni.hideLoading()
-						 resolve(res)
+						resolve(res)
+					})
+				})
+			},
+			async getStationList() {
+				console.log('发送请求前 打印用户经纬度', this.latitude, this.longitude);
+				const data = await this.getList()
+				console.log('queryStationInfos，信息列表显示总数据', data);
+				this.total = data.total
+				data.data.items.forEach(item => {
+					item.latitude = item.location.split(',')[0]
+					item.longitude = item.location.split(',')[1]
+					this.marker.push({
+						id: Number(item.id),
+						iconPath: '/static/image/food/location.png', //显示的图标
+						latitude: Number(item.latitude),
+						longitude: Number(item.longitude),
+						label:{
+							content:item.shopNames,
+							textAlign:"left",
+							x: Number(item.latitude),
+							y: Number(item.longitude),
+						},
+						width: 30,
+						height: 30,
+						// callout: { //气泡窗口 
+						// 	content: '空闲', //文本
+						// 	color: '#ffffff',
+						// 	fontSize: 15,
+						// 	borderRadius: 15,
+						// 	padding: '10',
+						// 	bgColor: '#406390',
+						// 	display: 'ALWAYS', //常显
+						// }
 					})
-		  })
-	  },
-      async getStationList() {
-        console.log('发送请求前 打印用户经纬度', this.latitude, this.longitude);
-        const data = await this.getList()
-		console.log('queryStationInfos，信息列表显示总数据', data);
-        this.total = data.total
-        data.data.items.forEach(item => {
-			item.latitude=item.location.split(',')[0]
-			item.longitude=item.location.split(',')[1]
-          this.marker.push({
-            id: Number(item.id),
-            iconPath: '/static/image/food/location.png', //显示的图标
-            latitude: Number(item.latitude),
-            longitude: Number(item.longitude),
-            width: 30, 
-            height: 30, 
-            callout: { //气泡窗口 
-              content: '空闲' , //文本
-              color: '#ffffff',
-              fontSize: 15, 
-              borderRadius: 15, 
-              padding: '10',
-              bgColor: '#406390', 
-              display: 'ALWAYS', //常显
-            }
-          })
-        })
-        this.mapShow = true
-        this.mapList = this.mapList.concat(data.data.items)
-        console.log(this.marker);
-        // for (let index in obj.list) {
-        //   let stationMarker = {
-        //     iconPath: '/static/images/mapStation.png', //显示的图标 
-        //     id: Number(index) || 0,
-        //     title: this.mapList[index].stationName || '',
-        //     latitude: Number(this.mapList[index].stationLat),
-        //     longitude: Number(this.mapList[index].stationLng),
-        //     width: 30, 
-        //     height: 30, 
-        //     callout: { //气泡窗口 
-        //       content: '空闲' + this.mapList[index].totalFree, //文本
-        //       color: '#ffffff', //文字颜色
-        //       fontSize: 15, //文本大小
-        //       borderRadius: 15, //边框圆角
-        //       padding: '10',
-        //       bgColor: '#406390', //背景颜色
-        //       display: 'ALWAYS', //常显
-        //     }
-        //   }
-        //   // console.log(stationMarker, 'stationMarker');
-        //   this.marker.push(stationMarker)
-        // }
-      }
-    }
-  }
+				})
+				this.mapShow = true
+				this.mapList = this.mapList.concat(data.data.items)
+				console.log(this.marker);
+				// for (let index in obj.list) {
+				//   let stationMarker = {
+				//     iconPath: '/static/images/mapStation.png', //显示的图标 
+				//     id: Number(index) || 0,
+				//     title: this.mapList[index].stationName || '',
+				//     latitude: Number(this.mapList[index].stationLat),
+				//     longitude: Number(this.mapList[index].stationLng),
+				//     width: 30, 
+				//     height: 30, 
+				//     callout: { //气泡窗口 
+				//       content: '空闲' + this.mapList[index].totalFree, //文本
+				//       color: '#ffffff', //文字颜色
+				//       fontSize: 15, //文本大小
+				//       borderRadius: 15, //边框圆角
+				//       padding: '10',
+				//       bgColor: '#406390', //背景颜色
+				//       display: 'ALWAYS', //常显
+				//     }
+				//   }
+				//   // console.log(stationMarker, 'stationMarker');
+				//   this.marker.push(stationMarker)
+				// }
+			}
+		}
+	}
 </script>
- 
+
 <style scoped lang="scss">
-  /deep/ .uni-searchbar__box-search-input {
-    color: #fff !important;
-  }
- 
-  .search {
-    position: fixed;
-    width: 80%;
-  }
- 
-  .map-container {
-    margin-top: -40rpx;
-    position: relative;
-    overflow: hidden;
-    border-radius: 50rpx 50rpx 0 0;
- 
-    .cover-view {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      /* width: 80rpx;
+	/deep/ .uni-searchbar__box-search-input {
+		color: #fff !important;
+	}
+
+	.search {
+		position: fixed;
+		width: 80%;
+	}
+
+	.map-container {
+		margin-top: -40rpx;
+		position: relative;
+		overflow: hidden;
+		border-radius: 50rpx 50rpx 0 0;
+
+		.cover-view {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			/* width: 80rpx;
 			height: 160rpx; */
-      padding: 42rpx 22rpx;
-      color: #4F575F;
-      font-weight: 400;
-      background-color: #fff;
-      background-size: 120rpx 120rpx;
-      background-position: center center;
-      position: absolute;
-      top: 150rpx;
-      right: 32rpx;
-      border-radius: 15rpx;
- 
- 
-    }
- 
-    .cover-image {
-      display: inline-block;
-      width: 50rpx;
-      height: 50rpx;
- 
-    }
-  }
+			padding: 10rpx 15rpx;
+			color: #4F575F;
+			font-weight: 400;
+			background-color: #fff;
+			background-position: center center;
+			position: absolute;
+			    bottom: 300rpx;
+			    right: 30rpx;
+			border-radius: 20rpx;
+
+
+		}
+
+		.cover-image {
+			display: inline-block;
+			width: 40rpx;
+			height: 40rpx;
+
+		}
+	}
 </style>

uni_applet/pages/food/food.vue

@@ -373,20 +373,20 @@
 					that.totalPage = res.data.total;
 				})
 				if (that.handleList.length > 0) {
-					// for (var i = 0; i < that.handleList.length; i++) {
-
-					// 	that.handleList[i].latitude = that.handleList[i].location.split(',')[0]
-					// 	that.handleList[i].longitude = that.handleList[i].location.split(',')[1]
-					// 	var data = await that.getDistance(that.handleList[i].latitude, that.handleList[i].longitude)
-					// 	that.handleList[i].distance1 = JSON.parse(JSON.stringify(data.distance))
-					// 	that.handleList[i].distance = (data.distance / 1000).toFixed(2)
-					// 	if (that.handleList[i].label) {
-					// 		that.handleList[i].labels = that.handleList[i].label.split(",")
-					// 	}
-					// 	if(that.handleList[i].foodDishesInfoList){
-					// 		that.handleList[i].foodDishesInfoList = that.handleList[i].foodDishesInfoList.splice(0,3)
-					// 	}
-					// }
+					for (var i = 0; i < that.handleList.length; i++) {
+
+						that.handleList[i].latitude = that.handleList[i].location.split(',')[0]
+						that.handleList[i].longitude = that.handleList[i].location.split(',')[1]
+						// var data = await that.getDistance(that.handleList[i].latitude, that.handleList[i].longitude)
+						that.handleList[i].distance1 = JSON.parse(JSON.stringify(that.handleList[i].distance))
+						that.handleList[i].distance = (that.handleList[i].distance / 1000).toFixed(1)
+						if (that.handleList[i].label) {
+							that.handleList[i].labels = that.handleList[i].label.split(",")
+						}
+						if(that.handleList[i].foodDishesInfoList){
+							that.handleList[i].foodDishesInfoList = that.handleList[i].foodDishesInfoList.splice(0,3)
+						}
+					}
 					that.findList = that.handleList
 					
 				} else {
@@ -575,4 +575,7 @@
 			margin-left:20rpx !important;
 		}
 	}
+	.applet-colors-ditu{
+		font-size: 40rpx;
+	}
 </style>