路段显示优化，并联调解决问题

common/apiurl.js

@@ -12,6 +12,8 @@ const apiurl = {
 	entranceUrl:'/payee/orderinfo/parkIn',
 	//车辆出场
 	getOutUrl:'/payee/orderinfo/parkLeave',
+	//获取收费员绑定路段列表 
+	bindRoadsUrl:'/payee/payeeinfo/bindRoads',
 	
 	//车辆出场
 	baiduOcrUrl:'/file/baidu/ocr',

common/config.js

@@ -1,5 +1,5 @@
-// const host = 'http://wx.hw.hongweisoft.com/parking';//本地
-const host = 'http://parking.pdzhtc.com';//正式
+const host = 'http://wx.hw.hongweisoft.com/parking';//本地
+// const host = 'http://parking.pdzhtc.com';//正式
 // const host = 'http://172.16.90.64:7000';
 const config = {
 	wxAppid:'wxbe90cc7c5233dd84',// wxAppid 

common/http.api.js

@@ -56,6 +56,8 @@ const install = (Vue, vm) => {
 	
 	let lockList = (params = {}) => vm.$u.get(apiurl.lockList + params.roadNo);
 	
+	let bindRoads = (params = {}) => vm.$u.post(apiurl.bindRoadsUrl,params);
+	
 	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
 	vm.$u.api = {
 		login,
@@ -84,7 +86,8 @@ const install = (Vue, vm) => {
 		payQuery,
 		appveriosn,
 		lockControl,
-		lockList
+		lockList,
+		bindRoads
 	};
 }
 

pages/index/index.vue

@@ -12,7 +12,7 @@
 						{{ theRoad.roadName || '暂无' }}
 					</view>
 				</view>
-				<view class="u-m-l-10 u-p-10" @click="openPage('/pages/roadlist/roadlist')">
+				<view class="u-m-l-10 u-p-10" @click="openRoad">
 					<u-icon name="arrow-right" color="rgba(255,255,255,.7)" size="28"></u-icon>
 				</view>
 			</view>	
@@ -80,10 +80,14 @@
 				noticeList:['智慧停车车主端V0.1版本发布','智慧停车PDA端V0.1版本发布'],
 				theRoad:[],
 				spaceInfo:new Object,
+				latitude:'',
+				longitude:'',
+				roadList:'',
+				list: ''
 			}
 		},
 		onLoad() {			
-			this.getLocation();
+			
 		},
 		onBackPress(options) {
 			 // uni.showModal({
@@ -96,6 +100,7 @@
 			 return true  
 		},
 		onShow() {
+			this.getLocation();
 			if(this.$store.state.vuex_hasLogin){
 				this.userInfo = this.$store.state.vuex_user;
 				this.theRoad = this.$store.state.vuex_user?.roadList?.[0]||[];
@@ -112,6 +117,19 @@
 			
 		},
 		methods: {
+			openRoad(){
+				//#ifdef APP-PLUS
+				let ALog = uni.requireNativePlugin("AndroidLog");
+				ALog.info({msg:'径度：err' + this.latitude});
+				//#endif
+				this.$u.route({
+					url: 'pages/roadlist/roadlist',
+					params: {
+						latitude:  this.latitude,
+						longitude: this.longitude,
+					}
+				});
+			},
 			speaks(msg){
 				speak.speakAction(msg)
 			},
@@ -125,11 +143,20 @@
 				
 			},
 			getLocation(){
+				let that = this;
 				uni.getLocation({
 					type:"gcj02",
 					success : function (res) {
 						var dst = '26.58751,106.78329';
 						var src = res.latitude + ',' + res.longitude;
+						that.latitude = res.latitude;
+						
+						//#ifdef APP-PLUS
+						let ALog = uni.requireNativePlugin("AndroidLog");
+						ALog.info({msg:'精度：err' + res.latitude});
+						//#endif
+						console.log('res.latitude', res.latitude)
+						that.longitude = res.longitude;
 						//#ifdef APP-PLUS
 						var locRet = location.distance(src, dst)
 						//#endif

pages/roadlist/roadlist.scss

@@ -16,10 +16,20 @@ page{
 			line-height: 42rpx;
 			margin-bottom: 6rpx;
 		}
-		.position,.distance{
+		.content{
+			display: flex;
+		.position{
 			font-size: 24rpx;
 			color: #969696;
 			line-height: 33rpx;
+			width: 80%;
 		}
+		.distance{
+			font-size: 24rpx;
+			color: #969696;
+			line-height: 33rpx;
+		}
+		}
+		
 	}
 }

pages/roadlist/roadlist.vue

@@ -11,8 +11,11 @@
 		<view class="road-list">
 			<view class="road-list-item" v-for="item in Roads" :key="item.id" @click="handleModifyRoad(item.id)">
 				<view class="name">{{item.roadName}}</view>
-				<view class="position">{{item.roadName}}</view>
-				<view class="distance">{{item.roadName}}</view>
+				<view class="content">
+					<view class="position">{{item.areaName}}</view>
+					<view class="distance">{{item.distance|kmUnit}}</view>
+				</view>
+				
 			</view>
 		</view>
 		
@@ -25,13 +28,31 @@
 		data(){
 			return{
 				Roads:[],
+				latitude:'',
+				longitude:'',
 			}
 		},
-		onLoad(){
-			this.Roads = this.$store.state.vuex_user?.roadList;
+		onLoad(page){
+			// this.Roads = this.$store.state.vuex_user?.roadList;
+			console.log('page', page)
+			this.latitude = page.latitude;
+			this.longitude = page.longitude;
 		},
 		onShow(){
-			
+			this.$u.api.bindRoads({latitude: this.latitude,longitude: this.longitude})
+			.then(res=>{
+				this.Roads = res.data.roadList;
+				// this.list=[];
+				// res.data.roadList.forEach(item=>{
+				// 	const obj = {
+				// 		roadName: item.roadName,
+				// 		areaName: item.areaName,
+				// 		distance: item.distance,
+				// 	}
+				// 	this.list.push(obj)
+				// 	console.log('obj',obj)
+				// });
+			});
 		},
 		methods:{
 			customBack(){

utils/filter.js

@@ -153,6 +153,20 @@ Vue.filter("filterPayStatus",function(status){
 	
 });
 
+//单位米m转换为单位千米km,提醒：传递参数不要带引号，如kmUnit('100')会返回0m。
+Vue.filter("kmUnit",function(m){
+	var v;
+	if(typeof m === 'number' && !isNaN(m)){
+		if (m >= 1000) {
+			v = (m / 1000).toFixed(2) + 'km'
+		} else {
+			v = m + 'm'
+		}
+	}else{
+		v = '0m'
+	}
+	return v;
+});