收费标准页面进行调整

pages/chargeStandard/chargeStandard.vue

@@ -1,8 +1,8 @@
 <template>
-	<!-- 收费标准 -->
-	<view class="charge">
-		<view class="charge-rules-container" v-for="(item, index) in chargeRulesInfo" :key="index">
-			<!-- <view class="charge-list">
+  <!-- 收费标准 -->
+  <view class="charge">
+    <view class="charge-rules-container" v-for="(item, index) in chargeRulesInfo" :key="index">
+      <!-- <view class="charge-list">
 				<view class="charge-list-item">
 					<view>2.5元/小时</view>
 					<view>收费标准</view>
@@ -16,38 +16,42 @@
 					<view>封顶金额</view>
 				</view>
 			</view> -->
-			<view class="charge-rules-list">
-				<view class="charge-rule-list-header">
-					<view class="charge-type">
-						<text v-if="item.feePeriod ==1">节假日规则</text>
-						<text v-else>非节假日规则</text>
-					</view>
-					<view class="charge-time">
-						<view>免费时长<text>{{item.freeTime}}分钟内</text></view>
-						<view v-if="item.topAmt">封顶金额<text>{{item.topAmt}}元</text></view>
-						<view v-else>无封顶金额</view>
-					</view>
-				</view>
-				<view class="charge-rules" v-for="(type, tIndex) in item.list" :key="tIndex">
-					<view v-if="type.list[0].amt || type.list[1].amt" class="charge-rules-box">
-						<view v-if="type.vehicleType == 0">小车</view>
-						<view v-if="type.vehicleType == 1">大车</view>
-						<view v-if="type.vehicleType == 2">超大型车</view>
-						<view v-if="type.vehicleType == 3">摩托车</view>
-						<view v-if="type.vehicleType == 4">非机动车</view>
-						<view v-if="type.vehicleType == 5">其他</view>
-						<view class="charge-rules-right">
-							<view v-for="(time, tIndex) in type.list" :key="tIndex">
-								<text>{{time.beginTime.substring(0, 5)}}-{{time.beginTime > time.endTime ? '次日': ''}}{{time.endTime.substring(0, 5)}}</text>
-								<text>{{time.amt}}元/小时</text>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="charge-instructions">
-			<!-- <view class="charge-instructions-title">相关说明</view>
+      <view class="charge-rules-list">
+        <view class="charge-rule-list-header">
+          <view class="charge-type">
+            <text v-if="item.feePeriod == 1">节假日规则</text>
+            <text v-else>非节假日规则</text>
+          </view>
+          <view class="charge-time">
+            <view
+              >免费时长<text>{{ item.freeTime || 0 }}分钟内</text></view
+            >
+            <view v-if="item.topAmt"
+              >封顶金额<text>{{ item.topAmt || 0 }}元</text></view
+            >
+            <view v-else>无封顶金额</view>
+          </view>
+        </view>
+        <view class="charge-rules" v-for="(type, tIndex) in item.list" :key="tIndex">
+          <view v-if="type.list[0].amt || type.list[1].amt" class="charge-rules-box">
+            <view v-if="type.vehicleType == 0">小车</view>
+            <view v-if="type.vehicleType == 1">大车</view>
+            <view v-if="type.vehicleType == 2">超大型车</view>
+            <view v-if="type.vehicleType == 3">摩托车</view>
+            <view v-if="type.vehicleType == 4">非机动车</view>
+            <view v-if="type.vehicleType == 5">其他</view>
+            <view class="charge-rules-right">
+              <view v-for="(time, tIndex) in type.list" :key="tIndex">
+                <text>{{ time.beginTime.substring(0, 5) }}-{{ time.beginTime > time.endTime ? '次日' : '' }}{{ time.endTime.substring(0, 5) }}</text>
+                <text>{{ time.amt }}元/小时</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="charge-instructions">
+      <!-- <view class="charge-instructions-title">相关说明</view>
 			<view class="charge-instructions-item">1、全天任何时段，封停必须扫码；</view>
 			<view class="charge-instructions-item">2、停车5分钟未扫码启动缴费程序，将按违法停车处罚；</view>
 			<view class="charge-instructions-item">3、停车时间在30分钟内不收费；超过30分钟按1小时收费；</view>
@@ -62,141 +66,139 @@
 				<view>监督电话</view>
 				<view>0851-8888888</view>
 			</view> -->
-			<u-parse :html="chargeContent"></u-parse>
-		</view>
-	</view>
+      <u-parse :html="chargeContent"></u-parse>
+    </view>
+  </view>
 </template>
 
 <script>
-	import getUrlParams from './../../utils/getUrlParams.js'
-	export default {
-		data() {
-			return {
-				roadNo: '',
-				info: {
-					freeTime: '',
-					topAmt: ''
-				},
-				chargeRulesInfo: [],
-				// 收费标准说明
-				chargeContent: ''
-			}
-		},
-		onLoad() {
-			let locationLocaturl = window.location.hash
-			const roadNo = getUrlParams(locationLocaturl, "roadNo"); // 截取roadId
-			if (roadNo) {
-				this.roadNo = roadNo
-				this.getSysterms(3)
-				this.getChargeRulesInfo(roadNo)
-			} else {
-				uni.showToast({
-				    title: '参数丢失,返回上一个页面',
-				    duration: 2000,
-					icon: 'none',
-					mask: true
-				})
-			}
-		},
-		onShow() {
-			
-		},
-		methods: {
-			/**
-			  * 获取收费标准
-			  * {roadNo} 路段
-			  * */
-			getChargeRulesInfo (roadNo) {
-				this.$u.api.roadChargeRule({
-					roadNo: roadNo
-				})
-					.then(res => {
-						if (res.code === 200) {
-							// 数据整合后
-							let chargeRulesArr = []
-							for (let i = 0; i < res.data.length; i++) {
-								let item = res.data[i]
-								this.info.freeTime = res.data[0].freeTime
-								this.info.topAmt = res.data[0].topAmt
-								const obj = {
-									feeName: item.feeName,
-									feeNo: item.feeNo,
-									feePeriod: item.feePeriod,
-									feeStep: item.feeStep,
-									feeType: item.feeType,
-									freeTime: item.freeTime,
-									topAmt: item.topAmt,
-									id: item.id,
-									list: [],
-									repeatList: [] // 用来检验已存在
-								}
-								for (let j = 0; j < item.vehicleRules.length; j++) {
-									let jItem = item.vehicleRules[j]
-									const obj1 = {
-										amt: jItem.amt,
-										beginTime: jItem.beginTime,
-										endTime: jItem.endTime,
-										vehicleFeeNo: jItem.vehicleFeeNo,
-										vehicleType: jItem.vehicleType,
-										list: []
-									}
-									if (obj.repeatList.indexOf(jItem.vehicleType) === -1) {
-										obj.repeatList.push(jItem.vehicleType)
-										obj1.list.push(jItem)
-									} else {
-										for (let k = 0; k < item.vehicleRules.length; k++) {
-										  if (obj1.vehicleType === item.vehicleRules[k].vehicleType) {
-											obj1.list.push(item.vehicleRules[k])
-											obj.list.push(obj1)
-										  }
-										}
-									}
-								}
-								// 存在重复,去除重复操作
-								let obj2 = {}
-								obj.list = obj.list.reduce((cur,next) => {
-								    obj[next.vehicleType] ? "" : obj[next.vehicleType] = true && cur.push(next);
-								    return cur;
-								},[])
-								chargeRulesArr.push(obj)
-							}
-							this.chargeRulesInfo = chargeRulesArr
-						} else {
-							uni.showToast({
-							    title: `${res.msg}`,
-							    duration: 3000,
-								icon: 'none',
-								mask: true
-							})
-						}
-					})
-			},
-			/**
-			 * 获取收费标准
-			 * */
-			getSysterms(termsType) {
-				this.$u.api.getSysterms({
-						termsType: Number(termsType)
-					})
-					.then(res => {
-						if (res.code === 200) {
-							this.chargeContent = res.data?.content
-						} else {
-							this.$refs.uToast.show({
-								title: res.msg,
-								type: 'error',
-							})
-						}
-					})
-					.catch(err => {
-						this.$refs.uToast.show({
-							title: '系统错误!',
-							type: 'error',
-						})
-					})
-			}
-		}
-	}
+export default {
+  data() {
+    return {
+      roadNo: '',
+      info: {
+        freeTime: '',
+        topAmt: ''
+      },
+      chargeRulesInfo: [],
+      // 收费标准说明
+      chargeContent: ''
+    };
+  },
+  onLoad(page) {
+    const { roadNo } = page;
+    if (roadNo) {
+      this.roadNo = roadNo;
+      this.getSysterms(3);
+      this.getChargeRulesInfo(roadNo);
+    } else {
+      uni.showToast({
+        title: '参数丢失,返回上一个页面',
+        duration: 2000,
+        icon: 'none',
+        mask: true
+      });
+    }
+  },
+  onShow() {},
+  methods: {
+    /**
+     * 获取收费标准
+     * {roadNo} 路段
+     * */
+    getChargeRulesInfo(roadNo) {
+      this.$u.api
+        .roadChargeRule({
+          roadNo: roadNo
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            // 数据整合后
+            let chargeRulesArr = [];
+            for (let i = 0; i < res.data.length; i++) {
+              let item = res.data[i];
+              this.info.freeTime = res.data[0].freeTime;
+              this.info.topAmt = res.data[0].topAmt;
+              const obj = {
+                feeName: item.feeName,
+                feeNo: item.feeNo,
+                feePeriod: item.feePeriod,
+                feeStep: item.feeStep,
+                feeType: item.feeType,
+                freeTime: item.freeTime,
+                topAmt: item.topAmt,
+                id: item.id,
+                list: [],
+                repeatList: [] // 用来检验已存在
+              };
+              for (let j = 0; j < item.vehicleRules.length; j++) {
+                let jItem = item.vehicleRules[j];
+                const obj1 = {
+                  amt: jItem.amt,
+                  beginTime: jItem.beginTime,
+                  endTime: jItem.endTime,
+                  vehicleFeeNo: jItem.vehicleFeeNo,
+                  vehicleType: jItem.vehicleType,
+                  list: []
+                };
+                if (obj.repeatList.indexOf(jItem.vehicleType) === -1) {
+                  obj.repeatList.push(jItem.vehicleType);
+                  obj1.list.push(jItem);
+                } else {
+                  for (let k = 0; k < item.vehicleRules.length; k++) {
+                    if (obj1.vehicleType === item.vehicleRules[k].vehicleType) {
+                      obj1.list.push(item.vehicleRules[k]);
+                      obj.list.push(obj1);
+                    }
+                  }
+                }
+              }
+              // 存在重复,去除重复操作
+              let obj2 = {};
+              obj.list = obj.list.reduce((cur, next) => {
+                obj[next.vehicleType] ? '' : (obj[next.vehicleType] = true && cur.push(next));
+                return cur;
+              }, []);
+              chargeRulesArr.push(obj);
+            }
+            this.chargeRulesInfo = chargeRulesArr;
+          } else {
+            uni.showToast({
+              title: `${res.msg}`,
+              duration: 3000,
+              icon: 'none',
+              mask: true
+            });
+          }
+        });
+    },
+    /**
+     * 获取收费标准
+     * */
+    getSysterms(termsType) {
+      this.$u.api
+        .getSysterms({
+          termsType: Number(termsType)
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            this.chargeContent = res.data?.content;
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'error'
+            });
+          }
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: '系统错误!',
+            type: 'error'
+          });
+        });
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>

pages/parkingLists/parkingLists.vue

@@ -1,413 +1,428 @@
 <template>
-	<view class="parking">
-		<view class="loading" v-show="loading">
-			<u-loadmore status="loading" icon-type="flower" :load-text="{ loading: '正在定位中...' }" />
-		</view>
-		<view class="parking-header">
-			<u-search placeholder="搜索停车场" v-model="searchContent" :show-action="false" @change="searchInputChange">
-			</u-search>
-			<u-icon v-if="!searchContent && isShowSearchParking == false" class="icon" name="list" size="44"
-				color="#ffffff" placeholder-color="#B5B5B5" search-icon-color="#B3B3B3" @click="listIconClick"></u-icon>
-			<u-icon v-if="searchContent || isShowSearchParking == true" class="icon" name="close" size="36"
-				color="#ffffff" placeholder-color="#B5B5B5" search-icon-color="#B3B3B3" @click="clearSearchInput">
-			</u-icon>
-		</view>
-		<view class="parking-map">
-			<map id="pagemap" style="width: 100%; height: calc(100vh - 240rpx)" :show-location="true"
-				:latitude="latitude" :longitude="longitude" @markertap="markertap" :enable-traffic="true"
-				:enable-zoom="true" :scale="scale" :markers="covers"></map>
-		</view>
-		<view class="address-box" :class="nearParkingObj.type == 'down' ? 'address-down' : 'address-up'"
-			v-if="nearParkingFlag">
-			<view class="address-box-down-icon" :class="{ 'up-icon': nearParkingObj.type === 'up' }" @click="pullDown">
-			</view>
-			<scroll-view scroll-y class="address-box-scroll"
-				:style="{ height: `calc(${nearParkingObj.height} - 76rpx)` }">
-				<view class="address-box-list">
-					<view class="address-box-list-item" v-for="(item, index) in nearParkingList" :key="index"
-						@click="positionAddress(item)">
-						<view class="abli-header">
-							<view class="abli-header-title">{{ item.roadName }} <text
-									class="abli-header-subtitle">{{ item.areaName }}</text></view>
-							<!-- <view class="abli-header-subtitle">{{ item.areaName }}</view> -->
-							<view class="abli-header-surplus">
-								<view class="abli-header-surplus-left">余位<text>{{ item.spaceIdle }}</text></view>
-								<view class="abli-header-surplus-right" :class="{ disabled: !item.monthAmount }"
-									@click="createMonth(item)">办理包月</view>
-							</view>
-						</view>
-						<view class="abli-bottom">
-							<view class="abli-bottom-left">
-								<view class="abli-bottom-left-navigation"
-									@click="navigation(item.latitude, item.longitude, item.areaName)">导航</view>
-								<view class="abli-bottom-left-distance">{{ item.distance | kmUnit }}</view>
-							</view>
-							<view class="abli-bottom-right" @click="lookParkingRule(item)">收费规则</view>
-						</view>
-					</view>
-				</view>
-			</scroll-view>
-		</view>
-		<view class="parking-address-list" v-if="isShowSearchParking">
-			<view class="parking-address-list-item" v-for="(item, index) in searchParkingList" :key="index + 's'"
-				@click="clickSearchParking(item)">
-				<view class="pali-left">
-					<view>{{ item.roadName }}</view>
-					<view>{{ item.areaName }}</view>
-				</view>
-				<view class="pali-right">
-					<image src="../../static/img/distance-icon.png" mode=""
-						@click.stop="navigation(item.latitude, item.longitude, item.areaName)"></image>
-					<view>路线</view>
-				</view>
-			</view>
-		</view>
-		<u-select v-model="mapSelect" :list="mapSelectList" @confirm="mapSelectConfirm"></u-select>
-		<map id="map" hidden="true"></map>
-		<u-toast ref="uToast" />
-	</view>
+  <view class="parking">
+    <view class="loading" v-show="loading">
+      <u-loadmore status="loading" icon-type="flower" :load-text="{ loading: '正在定位中...' }" />
+    </view>
+    <view class="parking-header">
+      <u-search placeholder="搜索停车场" v-model="searchContent" :show-action="false" @change="searchInputChange"> </u-search>
+      <u-icon
+        v-if="!searchContent && isShowSearchParking == false"
+        class="icon"
+        name="list"
+        size="44"
+        color="#ffffff"
+        placeholder-color="#B5B5B5"
+        search-icon-color="#B3B3B3"
+        @click="listIconClick"
+      >
+      </u-icon>
+      <u-icon
+        v-if="searchContent || isShowSearchParking == true"
+        class="icon"
+        name="close"
+        size="36"
+        color="#ffffff"
+        placeholder-color="#B5B5B5"
+        search-icon-color="#B3B3B3"
+        @click="clearSearchInput"
+      >
+      </u-icon>
+    </view>
+    <view class="parking-map">
+      <map
+        id="pagemap"
+        style="width: 100%; height: calc(100vh - 240rpx)"
+        :show-location="true"
+        :latitude="latitude"
+        :longitude="longitude"
+        @markertap="markertap"
+        :enable-traffic="true"
+        :enable-zoom="true"
+        :scale="scale"
+        :markers="covers"
+      ></map>
+    </view>
+    <view class="address-box" :class="nearParkingObj.type == 'down' ? 'address-down' : 'address-up'" v-if="nearParkingFlag">
+      <view class="address-box-down-icon" :class="{ 'up-icon': nearParkingObj.type === 'up' }" @click="pullDown"> </view>
+      <scroll-view scroll-y class="address-box-scroll" :style="{ height: `calc(${nearParkingObj.height} - 76rpx)` }">
+        <view class="address-box-list">
+          <view class="address-box-list-item" v-for="(item, index) in nearParkingList" :key="index" @click="positionAddress(item)">
+            <view class="abli-header">
+              <view class="abli-header-title"
+                >{{ item.roadName }} <text class="abli-header-subtitle">{{ item.areaName }}</text></view
+              >
+              <!-- <view class="abli-header-subtitle">{{ item.areaName }}</view> -->
+              <view class="abli-header-surplus">
+                <view class="abli-header-surplus-left"
+                  >余位<text>{{ item.spaceIdle }}</text></view
+                >
+                <view class="abli-header-surplus-right" :class="{ disabled: !item.monthAmount }" @click.stop="createMonth(item)">办理包月</view>
+              </view>
+            </view>
+            <view class="abli-bottom">
+              <view class="abli-bottom-left">
+                <view class="abli-bottom-left-navigation" @click.stop="navigation(item.latitude, item.longitude, item.areaName)">导航</view>
+                <view class="abli-bottom-left-distance">{{ item.distance | kmUnit }}</view>
+              </view>
+              <view class="abli-bottom-right" @click.stop="lookParkingRule(item)">收费规则</view>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <view class="parking-address-list" v-if="isShowSearchParking">
+      <view class="parking-address-list-item" v-for="(item, index) in searchParkingList" :key="index + 's'" @click="clickSearchParking(item)">
+        <view class="pali-left">
+          <view>{{ item.roadName }}</view>
+          <view>{{ item.areaName }}</view>
+        </view>
+        <view class="pali-right">
+          <image src="../../static/img/distance-icon.png" mode="" @click.stop="navigation(item.latitude, item.longitude, item.areaName)"></image>
+          <view>路线</view>
+        </view>
+      </view>
+    </view>
+    <u-select v-model="mapSelect" :list="mapSelectList" @confirm="mapSelectConfirm"></u-select>
+    <map id="map" hidden="true"></map>
+    <u-toast ref="uToast" />
+  </view>
 </template>
 
 <script>
-	import {
-		qqMapTransBMap
-	} from '../../utils/mapTrans.js';
-	export default {
-		data() {
-			return {
-				searchContent: '',
-				page_map: '',
-				loading: false,
-				latitude: 26.64969,
-				longitude: 106.636453,
-				scale: 16,
-				currentPosition: {
-					latitude: 26.64969,
-					longitude: 106.636453
-				},
-				covers: [],
-				// 附近列表是否显示
-				nearParkingFlag: false,
-				// 轮播选中
-				swiperCurrent: 0,
-				// 附近停车列表
-				nearParkingList: [],
-				// 是否显示停车场列表
-				isShowSearchParking: false,
-				// 搜索停车场列表
-				searchParkingList: [],
-				// 显示单个停车场数据
-				isShowParkingDetail: false,
-				// 单个停车场数据
-				parkingDetailData: {},
-				mapSelect: false,
-				mapSelectList: [{
-						value: '1',
-						label: '腾讯地图'
-					},
-					{
-						value: '2',
-						label: '百度地图'
-					},
-					{
-						value: '3',
-						label: '高德地图'
-					}
-				],
-				// 选中位置经纬度
-				currentPositionHover: {},
-				nearParkingObj: {
-					height: '60vh',
-					type: 'down'
-				}
-			};
-		},
-		onLoad(page) {
-			this.getLocation();
-			if (page.keyword) {
-				this.searchContent = page.keyword;
-				this.searchInputChange(page.keyword);
-			}
-		},
-		methods: {
-			/**
-			 * 查询输入框发生变化
-			 * @date 2021-08-10
-			 * @param {String} value
-			 */
-			searchInputChange(value) {
-				// 为空时关闭搜索列表
-				if (value === '') {
-					this.isShowSearchParking = false;
-				}
-				this.isShowParkingDetail = false;
-				this.getNearRoadsl();
-			},
-			/**
-			 * 获取定位
-			 * @date 2021-08-10
-			 * @returns {any}
-			 */
-			getLocation() {
-				const that = this;
-				console.log('请求定位');
-				// that.getNearRoadsl();
-				that.loading = true;
-				if (navigator.geolocation) {
-					// 判断是否有这个对象
-					navigator.geolocation.getCurrentPosition(function(pos) {
-						console.log('经度：' + pos.coords.longitude + '纬度：' + pos.coords.latitude);
-						that.latitude = pos.coords.latitude;
-						that.longitude = pos.coords.longitude;
-						that.currentPosition.latitude = pos.coords.latitude;
-						that.currentPosition.longitude = pos.coords.longitude;
-						that.loading = false;
-						that.getNearRoadsl();
-					});
-				} else {
-					this.$refs.uToast.show({
-						title: '当前系统不支持GPS API',
-						type: 'error'
-					});
-				}
-			},
-			/**
-			 * 导航
-			 * @date 2021-08-10
-			 * @param {Number} latitude
-			 * @param {Number} longitude
-			 * @returns {any}
-			 */
-			navigation(latitude, longitude, areaName) {
-				this.currentPositionHover = {
-					latitude,
-					longitude,
-					areaName
-				};
-				this.mapSelect = true;
-			},
-			// 多地图选择
-			mapSelectConfirm(item) {
-				const name = item[0].label;
-				switch (name) {
-					case '腾讯地图':
-						// uni.navigateTo({
-						//   url:
-						//     '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:' +
-						//     this.currentPositionHover.latitude +
-						//     ',' +
-						//     this.currentPositionHover.longitude +
-						//     '&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
-						// });
-						location.href =
-							`https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.currentPosition.latitude},${this.currentPosition.longitude}&to=${this.currentPositionHover.areaName}&tocoord=${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&policy=1&referer=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL`;
-						break;
-					case '百度地图':
-						location.href = `http://api.map.baidu.com/marker?location=
+export default {
+  data() {
+    return {
+      searchContent: '',
+      page_map: '',
+      loading: false,
+      latitude: 26.64969,
+      longitude: 106.636453,
+      scale: 16,
+      currentPosition: {
+        latitude: 26.64969,
+        longitude: 106.636453
+      },
+      covers: [],
+      // 附近列表是否显示
+      nearParkingFlag: false,
+      // 轮播选中
+      swiperCurrent: 0,
+      // 附近停车列表
+      nearParkingList: [],
+      // 是否显示停车场列表
+      isShowSearchParking: false,
+      // 搜索停车场列表
+      searchParkingList: [],
+      // 显示单个停车场数据
+      isShowParkingDetail: false,
+      // 单个停车场数据
+      parkingDetailData: {},
+      mapSelect: false,
+      mapSelectList: [
+        {
+          value: '1',
+          label: '腾讯地图'
+        },
+        {
+          value: '2',
+          label: '百度地图'
+        },
+        {
+          value: '3',
+          label: '高德地图'
+        }
+      ],
+      // 选中位置经纬度
+      currentPositionHover: {},
+      nearParkingObj: {
+        height: '60vh',
+        type: 'down'
+      }
+    };
+  },
+  onLoad(page) {
+    this.getLocation();
+    if (page.keyword) {
+      this.searchContent = page.keyword;
+      this.searchInputChange(page.keyword);
+    }
+  },
+  methods: {
+    /**
+     * 查询输入框发生变化
+     * @date 2021-08-10
+     * @param {String} value
+     */
+    searchInputChange(value) {
+      // 为空时关闭搜索列表
+      if (value === '') {
+        this.isShowSearchParking = false;
+      }
+      this.isShowParkingDetail = false;
+      this.getNearRoadsl();
+    },
+    /**
+     * 获取定位
+     * @date 2021-08-10
+     * @returns {any}
+     */
+    getLocation() {
+      const that = this;
+      console.log('请求定位');
+      // that.getNearRoadsl();
+      that.loading = true;
+      if (navigator.geolocation) {
+        // 判断是否有这个对象
+        navigator.geolocation.getCurrentPosition(function (pos) {
+          console.log('经度：' + pos.coords.longitude + '纬度：' + pos.coords.latitude);
+          that.latitude = pos.coords.latitude;
+          that.longitude = pos.coords.longitude;
+          that.currentPosition.latitude = pos.coords.latitude;
+          that.currentPosition.longitude = pos.coords.longitude;
+          that.loading = false;
+          that.getNearRoadsl();
+        });
+      } else {
+        this.$refs.uToast.show({
+          title: '当前系统不支持GPS API',
+          type: 'error'
+        });
+      }
+    },
+    /**
+     * 导航
+     * @date 2021-08-10
+     * @param {Number} latitude
+     * @param {Number} longitude
+     * @returns {any}
+     */
+    navigation(latitude, longitude, areaName) {
+      this.currentPositionHover = {
+        latitude,
+        longitude,
+        areaName
+      };
+      this.mapSelect = true;
+    },
+    // 多地图选择
+    mapSelectConfirm(item) {
+      const name = item[0].label;
+      switch (name) {
+        case '腾讯地图':
+          // uni.navigateTo({
+          //   url:
+          //     '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:' +
+          //     this.currentPositionHover.latitude +
+          //     ',' +
+          //     this.currentPositionHover.longitude +
+          //     '&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
+          // });
+          location.href = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.currentPosition.latitude},${this.currentPosition.longitude}&to=${this.currentPositionHover.areaName}&tocoord=${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&policy=1&referer=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL`;
+          break;
+        case '百度地图':
+          location.href = `http://api.map.baidu.com/marker?location=
 			${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&title=目的地&content=${this.currentPositionHover.areaName}
 			&output=html&src=webapp.baidu.openAPIdemo`;
-						break;
-					case '高德地图':
-						// const gdurl = `https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},起点&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},终点&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
-						// window.location.href = gdurl;
-						location.href =
-							`https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},我的位置&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},${this.currentPositionHover.areaName}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
-						break;
-				}
-			},
-			/**
-			 * 清空搜索框内容
-			 * @date 2021-08-10
-			 * @returns {any}
-			 */
-			clearSearchInput() {
-				this.searchContent = '';
-				this.isShowSearchParking = false;
-				this.getNearRoadsl();
-			},
-			/**
-			 * 默认首个点放大 如果有传入经纬度则对应的点放大
-			 * @date 2021-08-10
-			 * @param {Number} lon
-			 * @param {Number} lat
-			 * @returns {any}
-			 */
-			getNearRoadsl(lon, lat) {
-				this.$u.api
-					.nearRoadsl({
-						latitude: this.currentPosition.latitude,
-						longitude: this.currentPosition.longitude,
-						roadName: this.searchContent
-					})
-					.then((res) => {
-						const nearParkingList = []; // 附近停车场列表
-						this.covers = [];
-						res.data.forEach((item, index, arr) => {
-							if (item.latitude && item.longitude) {
-								nearParkingList.push(item);
-								const marker = {
-									latitude: item.latitude,
-									longitude: item.longitude,
-									id: String(index),
-									iconPath: require('./../../static/img/parking-icon.png'),
-									width: 20,
-									height: 25
-								};
-								// 选中经纬度图标变大
-								if (lon && lat) {
-									if (lon === item.longitude && lat === item.latitude) {
-										marker.width = 40;
-										marker.height = 50;
-									}
-								} else {
-									if (this.covers.length > 0) {
-										this.covers[0].width = 40;
-										this.covers[0].height = 50;
-									}
-								}
-								this.covers.push(marker);
-							}
-						});
-						this.nearParkingList = nearParkingList;
-						if (nearParkingList.length > 0) {
-							this.latitude = nearParkingList[0]?.latitude || this.currentPosition.latitude;
-							this.longitude = nearParkingList[0]?.longitude || this.currentPosition.longitude;
-						} else {
-							this.$refs.uToast.show({
-								title: '没有相关停车场信息',
-								type: 'warning'
-							});
-						}
-						this.nearParkingFlag = true;
-						if (this.searchContent) {
-							this.searchParkingList = nearParkingList;
-							this.isShowSearchParking = true;
-							this.nearParkingFlag = false;
-						}
-					})
-					.catch((err) => {
-						this.$refs.uToast.show({
-							title: err.msg,
-							type: 'error'
-						});
-					});
-			},
-			/**
-			 * 点击地图上的标记点触发
-			 **/
-			markertap(e) {
-				let lon, lat;
-				this.covers.forEach((item, index) => {
-					if (e.detail.markerId === item.id) {
-						lon = item.longitude;
-						lat = item.latitude;
-						this.swiperCurrent = index;
-					}
-				});
-				this.getNearRoadsl(lon, lat);
-			},
-			/**
-			 * 地址发生变化
-			 * @date 2021-08-10
-			 * @param {Object} item
-			 * @returns {any}
-			 */
-			swiperChange(item) {
-				const map = uni.createMapContext('pagemap');
-				map.moveToLocation({
-					longitude: this.nearParkingList[item.detail.current].longitude,
-					latitude: this.nearParkingList[item.detail.current].latitude
-				});
-				this.getNearRoadsl(this.nearParkingList[item.detail.current].longitude, this.nearParkingList[item.detail
-					.current].latitude);
-			},
-			/**
-			 * 点击单个地址
-			 * @date 2022-08-31
-			 * @param {any} item
-			 * @returns {any}
-			 */
-			positionAddress(item) {
-				const map = uni.createMapContext('pagemap');
-				map.moveToLocation({
-					longitude: item.longitude,
-					latitude: item.latitude
-				});
-				this.getNearRoadsl(item.longitude, item.latitude);
-			},
-			/**
-			 * 点击单个停车场看详情
-			 * @date 2021-08-10
-			 * @param {Object} item 为选中项参数
-			 * @returns {any}
-			 */
-			clickSearchParking(item) {
-				if (item.monthAmount) {
-					this.$u.route({
-						url: 'pages/parkingInformation/parkingInformation',
-						params: {
-							roadInfo: JSON.stringify(item),
-							longitude: this.currentPosition.longitude,
-							latitude: this.currentPosition.latitude
-						}
-					});
-				}
-			},
-			/**
-			 * 跳转停车标准页面
-			 * @date 2021-08-10
-			 * @param {Object} item
-			 * @returns {any}
-			 */
-			lookParkingRule(item) {
-				this.$u.route({
-					url: 'pages/chargeStandard/chargeStandard',
-					params: {
-						roadNo: item.roadNo
-					}
-				});
-			},
-			/**
-			 * 搜索右侧按钮点击
-			 **/
-			listIconClick() {
-				this.isShowSearchParking = true;
-				this.nearParkingFlag = false;
-				this.searchParkingList = this.nearParkingList;
-			},
-			/**
-			 * 跳转包月
-			 * @date 2021-08-10
-			 * @param {Object} item
-			 * @returns {any}
-			 */
-			createMonth(item) {
-				if (item.monthAmount) {
-					this.$u.route({
-						url: 'pages/handleMonthly/handleMonthly',
-						params: {
-							roadNo: item.roadNo
-						}
-					});
-				}
-			},
-			pullDown() {
-				if (this.nearParkingObj.height === '20vh') {
-					this.nearParkingObj.height = '60vh';
-					this.nearParkingObj.type = 'down';
-				} else {
-					this.nearParkingObj.height = '20vh';
-					this.nearParkingObj.type = 'up';
-				}
-			}
-		}
-	};
+          break;
+        case '高德地图':
+          // const gdurl = `https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},起点&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},终点&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
+          // window.location.href = gdurl;
+          location.href = `https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},我的位置&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},${this.currentPositionHover.areaName}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
+          break;
+      }
+    },
+    /**
+     * 清空搜索框内容
+     * @date 2021-08-10
+     * @returns {any}
+     */
+    clearSearchInput() {
+      this.searchContent = '';
+      this.isShowSearchParking = false;
+      this.getNearRoadsl();
+    },
+    /**
+     * 默认首个点放大 如果有传入经纬度则对应的点放大
+     * @date 2021-08-10
+     * @param {Number} lon
+     * @param {Number} lat
+     * @returns {any}
+     */
+    getNearRoadsl(lon, lat) {
+      this.$u.api
+        .nearRoadsl({
+          latitude: this.currentPosition.latitude,
+          longitude: this.currentPosition.longitude,
+          roadName: this.searchContent
+        })
+        .then((res) => {
+          const nearParkingList = []; // 附近停车场列表
+          this.covers = [];
+          res.data.forEach((item, index, arr) => {
+            if (item.latitude && item.longitude) {
+              nearParkingList.push(item);
+              const marker = {
+                latitude: item.latitude,
+                longitude: item.longitude,
+                id: String(index),
+                iconPath: require('./../../static/img/parking-icon.png'),
+                width: 20,
+                height: 25
+              };
+              // 选中经纬度图标变大
+              if (lon && lat) {
+                if (lon === item.longitude && lat === item.latitude) {
+                  marker.width = 40;
+                  marker.height = 50;
+                }
+              } else {
+                if (this.covers.length > 0) {
+                  this.covers[0].width = 40;
+                  this.covers[0].height = 50;
+                }
+              }
+              this.covers.push(marker);
+            }
+          });
+          this.nearParkingList = nearParkingList;
+          if (nearParkingList.length > 0) {
+            this.latitude = nearParkingList[0]?.latitude || this.currentPosition.latitude;
+            this.longitude = nearParkingList[0]?.longitude || this.currentPosition.longitude;
+          } else {
+            this.$refs.uToast.show({
+              title: '没有相关停车场信息',
+              type: 'warning'
+            });
+          }
+          this.nearParkingFlag = true;
+          if (this.searchContent) {
+            this.searchParkingList = nearParkingList;
+            this.isShowSearchParking = true;
+            this.nearParkingFlag = false;
+          }
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: err.msg,
+            type: 'error'
+          });
+        });
+    },
+    /**
+     * 点击地图上的标记点触发
+     **/
+    markertap(e) {
+      let lon, lat;
+      this.covers.forEach((item, index) => {
+        if (e.detail.markerId === item.id) {
+          lon = item.longitude;
+          lat = item.latitude;
+          this.swiperCurrent = index;
+        }
+      });
+      this.getNearRoadsl(lon, lat);
+    },
+    /**
+     * 地址发生变化
+     * @date 2021-08-10
+     * @param {Object} item
+     * @returns {any}
+     */
+    swiperChange(item) {
+      const map = uni.createMapContext('pagemap');
+      map.moveToLocation({
+        longitude: this.nearParkingList[item.detail.current].longitude,
+        latitude: this.nearParkingList[item.detail.current].latitude
+      });
+      this.getNearRoadsl(this.nearParkingList[item.detail.current].longitude, this.nearParkingList[item.detail.current].latitude);
+    },
+    /**
+     * 点击单个地址
+     * @date 2022-08-31
+     * @param {any} item
+     * @returns {any}
+     */
+    positionAddress(item) {
+      const map = uni.createMapContext('pagemap');
+      map.moveToLocation({
+        longitude: item.longitude,
+        latitude: item.latitude
+      });
+      this.getNearRoadsl(item.longitude, item.latitude);
+    },
+    /**
+     * 点击单个停车场看详情
+     * @date 2021-08-10
+     * @param {Object} item 为选中项参数
+     * @returns {any}
+     */
+    clickSearchParking(item) {
+      if (item.monthAmount) {
+        this.$u.route({
+          url: 'pages/parkingInformation/parkingInformation',
+          params: {
+            roadInfo: JSON.stringify(item),
+            longitude: this.currentPosition.longitude,
+            latitude: this.currentPosition.latitude
+          }
+        });
+      }
+    },
+    /**
+     * 跳转停车标准页面
+     * @date 2021-08-10
+     * @param {Object} item
+     * @returns {any}
+     */
+    lookParkingRule(item) {
+      this.$u.route({
+        url: 'pages/chargeStandard/chargeStandard',
+        params: {
+          roadNo: item.roadNo
+        }
+      });
+    },
+    /**
+     * 搜索右侧按钮点击
+     **/
+    listIconClick() {
+      this.isShowSearchParking = true;
+      this.nearParkingFlag = false;
+      this.searchParkingList = this.nearParkingList;
+    },
+    /**
+     * 跳转包月
+     * @date 2021-08-10
+     * @param {Object} item
+     * @returns {any}
+     */
+    createMonth(item) {
+      if (item.monthAmount) {
+        this.$u.route({
+          url: 'pages/handleMonthly/handleMonthly',
+          params: {
+            roadNo: item.roadNo
+          }
+        });
+      }
+    },
+    pullDown() {
+      if (this.nearParkingObj.height === '20vh') {
+        this.nearParkingObj.height = '60vh';
+        this.nearParkingObj.type = 'down';
+      } else {
+        this.nearParkingObj.height = '20vh';
+        this.nearParkingObj.type = 'up';
+      }
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-	.wrap {
-		margin-top: 20vh;
-	}
+.wrap {
+  margin-top: 20vh;
+}
 
-	@import './parkingLists.scss';
+@import './parkingLists.scss';
 </style>

utils/mapTrans.js

@@ -1,31 +1,31 @@
 // 将百度地图经纬度转换为腾讯/高德地图经纬度
 export function bMapTransQQMap(lng, lat) {
-    let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
-    let x = lng - 0.0065;
-    let y = lat - 0.006;
-    let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
-    let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
-    let lngs = z * Math.cos(theta);
-    let lats = z * Math.sin(theta);
-    
-    return {
-          lng: lngs,
-          lat: lats     
-    }  
+  let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
+  let x = lng - 0.0065;
+  let y = lat - 0.006;
+  let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
+  let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
+  let lngs = z * Math.cos(theta);
+  let lats = z * Math.sin(theta);
+
+  return {
+    lng: lngs,
+    lat: lats
+  };
 }
- 
+
 // 将腾讯/高德地图经纬度转换为百度地图经纬度
 export function qqMapTransBMap(lng, lat) {
-    let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
-    let x = lng;
-    let y = lat;
-    let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
-    let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
-    let lngs = z * Math.cos(theta) + 0.0065;
-    let lats = z * Math.sin(theta) + 0.006;
-   
-    return {
-          lng: lngs,
-          lat: lats 
-    } 
-}
+  let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
+  let x = lng;
+  let y = lat;
+  let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
+  let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
+  let lngs = z * Math.cos(theta) + 0.0065;
+  let lats = z * Math.sin(theta) + 0.006;
+
+  return {
+    lng: lngs,
+    lat: lats
+  };
+}