增加导航

README.md

@@ -3,6 +3,7 @@
 
 运行方式  uniapp正常运行方式
 
+[](https://modao.cc/app/QnMEBylTr46qjfunYwepmt#screen=skx8b581u08ldkv)
 
 ## 运行与安装
 建议使用uniapp的官方推荐开发工具HBuilder最新版本

package.json

@@ -32,34 +32,7 @@
  },
 "uni-app": {
 		"scripts": {
-			"test-platform": {
-				"title": "test",
-				"BROWSER": "Chrome",
-				"env": {
-					"UNI_PLATFORM": "h5",
-					"NODE_NAME": "test",
-					"branchParameter":"51team",
-					"envjs":""
-				},
-				"define": {
-					"CUSTOM-CONST": true,
-					"NODE_NAME_T": "test-TEAM51"
-				}
-			},
-			"production-platform": {
-				"title": "production",
-				"BROWSER": "Chrome",
-				"env": {
-					"UNI_PLATFORM": "h5",
-					"NODE_NAME": "production",
-					"branchParameter":"51team",
-					"envjs":""
-				},
-				"define": {
-					"CUSTOM-CONST": true,
-					"NODE_NAME_T": "production-TEAM51"
-				}
-			},
+			
 			"test-platform-youdian": {
 				"title": "test-youdian",
 				"BROWSER": "Chrome",

pages/charge/switchCharge.vue

@@ -16,11 +16,11 @@
 				<p  v-else >暂无充电站</p>
 				<p><span style="color: #1677ff;" @click="getPoint()">重新定位？</span></p>
 			</view>
-			<view class="chargeHead" v-if="stationList.length" >已为您查询附近2公里内的充电站</view>
+			<view class="chargeHead" v-if="stationList.length" >已为您查询附近2公里的充电站</view>
 			
 			<template v-for="(item,i) in stationList">
 				
-				<view class="chargeList-item " @click="stationIdSelect=item.id,stationShow=false,getList()" :class="{
+				<view class="chargeList-item " @click="selectStationBtn(item)" :class="{
 				
 			}" :key="i">
 		
@@ -30,12 +30,7 @@
 						<p>名称</p>
 						<span> {{item.name}}</span>
 					</view>
-					<view class="chargeList-item-row" v-if="false">
-						<u-icon name="shoujichongdian" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
-						<p>空闲</p>
-						<span>{{item.availableNumOfChannel}}</span>
-						
-					</view>
+					
 				<!-- 	<view class="chargeList-item-row">
 						<u-icon name="juli" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
 						<p>位置</p>
@@ -48,7 +43,10 @@
 					<span>{{item.address}}</span>
 				</view>
 				</view>
-			</template>
+			</template>
+			
+			<u-divider bg-color="#F2F4F4" v-if="recordsTotal&&stationList.length==recordsTotal"  border-color="#CFD2D5">已经到底了</u-divider>
+			
 		
 		</view>
 		
@@ -60,7 +58,9 @@
 				<p><span style="color: #1677ff;" @click="getPoint()">查询附近站点</span></p>
 			</view>
 			
-			<view class="chargeHead" v-if="list.length" >{{stationName}}<span @click="getPoint()">查询附近站点</span></view>
+			<view class="chargeHead2" v-if="list.length" >
+			<view>{{stationName}}</view>
+			<view class="chargeHead2span" @click="getPoint()">查询附近站点</view></view>
 			
 			<template v-for="(item,i) in list">
 				<view class="chargeList-item " @click="select=item.id,selectBtn()" :class="{
@@ -92,7 +92,14 @@
 					<span>荆鹏软件园1号充电桩</span>
 				</view> -->
 				</view>
-			</template>
+			</template>
+			<view style="
+    display: flex;
+" >
+				<u-button type="success" size="medium" @click="navigate" v-if="selectStation.id&&selectStation.latitude&&selectStation.longitude" >点击查看地图导航</u-button>
+			</view>
+			
+			
 
 		</view>
 	</view>
@@ -112,13 +119,16 @@
 				stationIdSelect: '',
 				stationShow: false,
 				select: '',
-				selectBtnId: '',
+				selectBtnId: '',
+				selectStation:{},
 				index: false,
 				stationName:'',
 				isReady:false,
 				isPoint:true,
 				longitude: 0,
-				latitude: 0,
+				latitude: 0,
+				pageIndex: 1,
+				recordsTotal: 0,
 			}
 		},
 		onLoad(op) {
@@ -133,15 +143,54 @@
 			if (op.index) {
 				this.index = true;
 			}
-			WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
+			WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode', 'openLocation']).then((res) => {
 				// //(res)
 				this.isReady=true;
 				
 			}).catch(error => {
 				//(res)
 			})
+		},
+		onReachBottom() {
+			if (this.stationList.length < this.recordsTotal) {
+				this.myLoadmore();
+			}
 		},
-		methods: {
+		methods: {
+			navigate() {
+				// x
+				// : 
+				// "112.276527"
+				// y
+				// : 
+				// "30.306427"
+				//console.log(item)
+				uni.showLoading({
+			
+				})
+				WxJsApi.openLocation({
+					latitude: this.selectStation.latitude, //目的地latitude
+					longitude: this.selectStation.longitude, //目的地longitude
+					name: this.selectStation.name,
+					address: this.selectStation.address,
+					scale: 15, //地图缩放大小，可根据情况具体调整
+					success(res) {
+						uni.hideLoading()
+					},
+					complete() {
+						//	uni.hideLoading()
+					}
+				});
+				// //('station'+JSON.stringify(_self.stationDetail.station))
+				// window.location.href = "https://uri.amap.com/marker?position=" + _self.stationDetail.station.longitude +
+				// 	"," + _self.stationDetail.station.latitude + "&name=" + _self.stationDetail.station.name;
+			
+			},
+			myLoadmore() {
+					
+				this.pageIndex += 1;
+				this.searchStationData()
+			},
 			getPoint() {
 				uni.showToast({
 					title: "定位中...请打开定位设置",
@@ -168,7 +217,11 @@
 					})
 				})
 			},
-			searchStationData(){
+			searchStationData(bl){
+				if (bl) {
+					this.stationList = [];
+					this.pageIndex = 1;
+				}
 				uni.showLoading({
 					title: "加载中",
 					mask: true,
@@ -176,13 +229,22 @@
 				
 				var data={
 					longitude: this.longitude,
-					latitude: this.latitude,
-					pageSize:50,
-					raidus:2,
+					latitude: this.latitude,
+					pageIndex:this.pageIndex,
+					pageSize:20,
+					radius:2,
 				}
 				API.chargingStationData(data).then((res) => {
-					this.stationList = res.data.data;
-					this.stationShow = true;
+					//this.stationList = res.data.data;
+					
+					this.stationList = [
+						...this.stationList,
+						...res.data.data
+					];
+					
+					this.stationShow = true;
+					this.recordsTotal = res.data.recordsTotal
+					
 					uni.hideLoading()
 				
 				}).catch(error => {
@@ -194,10 +256,10 @@
 			},
 			customBack() {
 				
-				if(this.stationShow&&this.stationId){
+				if(this.stationShow){
 					try{
 						this.stationShow=false
-						this.stationIdSelect=stationId
+						//this.stationIdSelect=this.stationId
 						this.getList()
 					}catch(e){
 						//TODO handle the exception
@@ -212,6 +274,12 @@
 					})
 				}
 				
+			},
+			selectStationBtn(item){
+				this.stationIdSelect=item.id
+				this.stationShow=false
+				this.selectStation=item
+				this.getList()
 			},
 			selectBtn() {
 				this.selectBtnId = this.select;
@@ -229,7 +297,8 @@
 				})
 
 				var data = {
-					//deviceId: this.select,
+					//deviceId: this.select,
+					pageIndex:this.pageIndex,
 					stationId: this.stationIdSelect,
 					pageSize: 50,
 				};
@@ -239,7 +308,6 @@
 					if(this.list.length){
 						this.stationName=this.list[0].stationName
 					}
-					this.recordsTotal = res.data.recordsTotal
 					uni.hideLoading()
 
 				}).catch(error => {
@@ -288,6 +356,18 @@
 			float: right;
 			color: #1677ff;
 		}
+	}
+	.chargeHead2{
+		padding:0 15px ;
+		margin-top: 10px;
+		    justify-content: space-between;
+		    display: flex;
+		.chargeHead2span{
+			float: right;
+			white-space: pre;
+			color: #1677ff;
+			    margin-left: 20px;
+		}
 	}
 
 	.chargeList-item {
@@ -306,7 +386,8 @@
 			}
 
 			p {
-				color: #999;
+				color: #999;
+				white-space: pre;
 				margin: 0 10px;
 			}
 		}

utils/wxJsApi.js

@@ -219,3 +219,13 @@ export function requestSubscribeMessage(sz) {
 	return promise;
 }
 
+
+
+//扫描二维码
+export function openLocation(obj) {
+ 
+	let promise = new Promise((resolve, reject) => {
+		wx.openLocation(obj)
+	});
+	return promise;
+}