修改部分代码比较乱和包月切换车牌

pages/center/index.vue

@@ -1,249 +1,276 @@
 <template>
-	<view>
-		<u-navbar title-color="#fff" :custom-back="customBack" :border-bottom="false" back-icon-color="#CCE8FF" :background="{background: '#008CFF' }" title="我的"></u-navbar>
-		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 u-p-t-30">
-			<view class="u-m-r-24" @click="clickHead">
-				<u-avatar :src="userInfo.headImgUrl || userInfo.avatar||pic" size="140"></u-avatar>
-			</view>
-			<view class="u-flex-1" @click="login($store.state.vuex_hasLogin)">
-				<view class="u-font-18 u-p-b-20">{{ userInfo.nickname || userInfo.userName || '请登录' }}</view>
-				<view class="u-font-14">手机号:{{ userInfo.mobile || '暂无' }}</view>
-			</view>
-			<!-- <view class="u-m-l-10 u-p-10">
-				<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
-			</view> -->
-		</view>
+  <view>
+		<!-- ===================================== tabbar ===================================== -->
+    <u-navbar
+      title-color="#fff"
+      :custom-back="customBack"
+      :border-bottom="false"
+      back-icon-color="#CCE8FF"
+      :background="{ background: '#008CFF' }"
+      title="我的"
+    ></u-navbar>
 		
-		<view class="u-m-t-20">
-			<u-cell-group>	
-			<!-- 	<u-cell-item title="贵州银行支付" @click="guizhouPay()">
-					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodecheliang"></u-icon>
-				</u-cell-item> -->
-				<u-cell-item title="我的车辆" @click="openPage('pages/myCars/myCars')">
+		<!-- ===================================== 头像 ===================================== -->
+    <view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 u-p-t-30">
+      <view class="u-m-r-24" @click="clickHead">
+        <u-avatar :src="pic" size="140"></u-avatar>
+        <!-- <u-avatar :src="userInfo.headImgUrl || userInfo.avatar || pic" size="140"></u-avatar> -->
+      </view>
+      <view class="u-flex-1" @click="login($store.state.vuex_hasLogin)">
+        <!-- <view class="u-font-18 u-p-b-20">{{ userInfo.nickname || userInfo.userName || '请登录' }}</view> -->
+        <view class="u-font-18 u-p-b-20">{{ userInfo.mobile || '请登录' }}</view>
+        <view class="u-font-14">手机号:{{ userInfo.mobile || '暂无' }}</view>
+      </view>
+    </view>
+
+    <view class="u-m-t-20">
+      <u-cell-group>
+        <!-- <u-cell-item title="贵州银行支付" @click="guizhouPay()">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodecheliang"></u-icon>
-				</u-cell-item>
-				<u-cell-item title="停车记录" @click="openPage('pages/center/order/order')">
-					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tingchejilu"></u-icon>
-				</u-cell-item>
-			</u-cell-group>
-		</view>
-		<view class="u-m-t-20">
-			<u-cell-group>
-				<!-- <u-cell-item title="充值" @click="openPage('pages/myCars/myCars')">
+        </u-cell-item>-->
+        <u-cell-item title="我的车辆" @click="openPage('pages/myCars/myCars', true)">
+          <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodecheliang"></u-icon>
+        </u-cell-item>
+        <u-cell-item title="停车记录" @click="openPage('pages/center/order/order')">
+          <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tingchejilu"></u-icon>
+        </u-cell-item>
+      </u-cell-group>
+    </view>
+		
+    <view class="u-m-t-20">
+      <u-cell-group>
+        <!-- <u-cell-item title="充值" @click="openPage('pages/myCars/myCars')">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="chongzhi"></u-icon>
-				</u-cell-item> -->
-				<u-cell-item title="包月" @click="openPage('pages/center/monthly/monthly')">
-					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="baoyue"></u-icon>
-				</u-cell-item>
-				<!-- <u-cell-item title="提现" @click="openPage('pages/center/order/order')">
+        </u-cell-item>-->
+        <u-cell-item title="包月" @click="openPage('pages/center/monthly/monthly')">
+          <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="baoyue"></u-icon>
+        </u-cell-item>
+        <!-- <u-cell-item title="提现" @click="openPage('pages/center/order/order')">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tixian"></u-icon>
-				</u-cell-item> -->
-				<!-- <u-cell-item title="退款" @click="openPage('pages/center/order/order')">
+        </u-cell-item>-->
+        <!-- <u-cell-item title="退款" @click="openPage('pages/center/order/order')">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tuikuan"></u-icon>
-				</u-cell-item> -->
-				<!-- <u-cell-item title="账单记录" @click="openPage('pages/center/order/order')">
+        </u-cell-item>-->
+        <!-- <u-cell-item title="账单记录" @click="openPage('pages/center/order/order')">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="zhangdanjilu"></u-icon>
-				</u-cell-item> -->
-			</u-cell-group>
-		</view>
-	<!-- 	<view class="u-m-t-20">
+        </u-cell-item>-->
+      </u-cell-group>
+    </view>
+		
+    <!-- <view class="u-m-t-20">
 			<u-cell-group>
 				<u-cell-item title="我的优惠" @click="openPage('pages/myCars/myCars')">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodeyouhui"></u-icon>
 				</u-cell-item>
 			</u-cell-group>
-		</view> -->
-	<!-- 	<view class="u-m-t-20">
+    </view>-->
+    <!-- <view class="u-m-t-20">
 			<u-cell-group>
 				<u-cell-item title="发票管理" @click="openPage('pages/center/invoice/invoice')">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="fapiaoguanli"></u-icon>
 				</u-cell-item>
 			</u-cell-group>
-		</view> -->
-		<view class="u-m-t-20">
-			<u-cell-group>
-				<u-cell-item title="消息中心" @click="openPage('pages/message/message', true)">
-					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="xiaoxi"></u-icon>
-					<u-badge type="success" :count="messageNum" :offset="[35, 60]"></u-badge>
-				</u-cell-item>
-			</u-cell-group>
-		</view>
-		<view class="u-m-t-20 u-m-b-40">
-			<u-cell-group>
-				<u-cell-item title="拨打客服电话" @click="phoneCall(phoneNo)">
-					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="dianhua"></u-icon>
-				</u-cell-item>
-			</u-cell-group>
-		</view>
+    </view>-->
 		
-		<!-- <view class="u-m-t-20">
+    <view class="u-m-t-20">
+      <u-cell-group>
+        <u-cell-item title="消息中心" @click="openPage('pages/message/message', true)">
+          <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="xiaoxi"></u-icon>
+          <u-badge type="success" :count="messageNum" :offset="[38, 80]"></u-badge>
+        </u-cell-item>
+      </u-cell-group>
+    </view>
+    <view class="u-m-t-20 u-m-b-40">
+      <u-cell-group>
+        <u-cell-item title="拨打客服电话" @click="phoneCall(phoneNo)">
+          <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="dianhua"></u-icon>
+        </u-cell-item>
+      </u-cell-group>
+    </view>
+
+    <!-- <view class="u-m-t-20">
 			<u-cell-group>
 				<u-cell-item icon="phone" title="手机号登录" @click="openPage('/pages/center/phoneLogin/phoneLogin')"></u-cell-item>
 			</u-cell-group>
-		</view> -->
-		<!-- 登出提示-->
-		<u-modal
-			v-model="logoutPop"
-			:title-style="{color: '#404040'}"
-			title="登出提示"
-			:show-confirm-button="true"
-			confirm-text="确认"
-			:confirm-style="{backgroundColor: '#3397FA', color: '#fff'}"
-			:show-cancel-button="true"
-			cancel-text="取消"
-			@cancel="logoutPop = false"
-			:cancel-style="{backgroundColor: '#EBF1FF', color: '#3397FA'}"
-			@confirm="loginOut">
-			<view class="slot-content">
-				<view class="pay-tips">你确认退出登录吗?</view>
-			</view>
-		</u-modal>
-		<u-toast ref="uToast" />
-	</view>
+    </view>-->
+		
+    <!-- ===================================== 登出提示 ===================================== -->
+    <u-modal
+      v-model="logoutPop"
+      :title-style="{ color: '#404040' }"
+      title="登出提示"
+      :show-confirm-button="true"
+      confirm-text="确认"
+      :confirm-style="{ backgroundColor: '#3397FA', color: '#fff' }"
+      :show-cancel-button="true"
+      cancel-text="取消"
+      @cancel="logoutPop = false"
+      :cancel-style="{ backgroundColor: '#EBF1FF', color: '#3397FA' }"
+      @confirm="loginOut"
+    >
+      <view class="slot-content">
+        <view class="pay-tips">你确认退出登录吗?</view>
+      </view>
+    </u-modal>
+    <u-toast ref="uToast" />
+  </view>
 </template>
 
 <script>
-	import getUrlParams from "../../utils/getUrlParams.js";
-	export default {
-		data() {
-			return {
-				// 默认头像
-				pic: '/static/img/default-avatar.png',
-				// 用户信息
-				userInfo: [],
-				code: null,
-				phoneNo: '16608538666',
-				logoutPop: false,
-				messageNum: 0
-			}
-		},
-		onLoad() {
-			this.getMsgNum()
-		},
-		onShow() {
-			if(this.$store.state.vuex_hasLogin){
-				this.userInfo = this.$store.state.vuex_user;
-				if(this.$store.state.vuex_wxinfo){
-					this.userInfo = Object.assign(this.userInfo,this.$store.state.vuex_wxinfo);
-				}
-			}else{
-				this.userInfo = [];
-			};
-			let locationLocaturl = window.location.search;
-			this.code = getUrlParams(locationLocaturl, "code");
-			if (this.code&&!this.$store.state.vuex_wxinfo.openId){
-				this.handleGetWXInfo(this.code)
-			};
-		},
-		methods: {
-			openPage(path, flag) {
-				this.$u.route({ 
-					url: path
-				})
-				if (flag) {
-					uni.setStorage({
-					    key: 'messageBack',
-					    data: 'pages/center/index'
-					})
-				}
-			},
-			// 获取消息未读条数
-			getMsgNum() {
-				this.$u.api.getIndexData()
-				.then(res=>{
-					if (res.code === 200) {
-						let num = 0
-						if (res.data.news) {
-							res.data.news.forEach(item => {
-								if (item.readFlag == 0) {
-									num += 1
-								}
-							})
-						}
-						this.messageNum = num
-					} else {
-						this.$refs.uToast.show({
-							title: res.msg,
-							type: 'error'
-						})
-					}
-				})
-				.catch(err => {
-					this.$refs.uToast.show({
-						title: '系统错误!',
-						type: 'error'
-					})
-				})
-			},
-			//登录判断
-			login(status){
-				console.log('this.$store.state.vuex_hasLogin',this.$store.state.vuex_hasLogin);
-				if(!status){
-					this.$u.route({
-						url: 'pages/center/phoneLogin/phoneLogin'
-					});
-				}
-			},
-			customBack(){
-				this.$u.route({
-					type:'switchTab',
-					url: 'pages/index/index'
-				});
-			},
-			phoneCall(phone){
-				uni.makePhoneCall({
-				    phoneNumber: phone
-				});
-			},
-			loginOut() {
-				// this.$store.state.vuex_hasLogin = false
-				// this.$store.state.vuex_wxinfo = null
-				// this.$store.state.vuex_token = ''
-				// this.$store.state.vuex_user = null
-				this.$u.vuex('vuex_hasLogin', false);
-				this.$u.vuex('vuex_wxinfo', null);
-				this.$u.vuex('vuex_token', '');
-				this.$u.vuex('vuex_user', null);
-				this.userInfo = []
-				this.code = ''
-				localStorage.clear()
-				setTimeout(() => {
-					this.logoutPop = false
-					uni.navigateTo({
-						url: '/pages/center/phoneLogin/phoneLogin'
-					})
-				}, 500)
-			},
-			clickHead() {
-				if (this.$store.state.vuex_hasLogin) {
-					this.logoutPop = true
-				}
-			}
-		}
-	}
+import getUrlParams from '../../utils/getUrlParams.js'
+export default {
+  data() {
+    return {
+      // 默认头像
+      pic: '/static/img/default-avatar.png',
+      // 用户信息
+      userInfo: [],
+      code: null,
+      phoneNo: '16608538666',
+      logoutPop: false,
+      messageNum: 0
+    }
+  },
+  onLoad() {},
+  onShow() {
+		this.getMsgNum()
+    if (this.$store.state.vuex_hasLogin) {
+      this.userInfo = this.$store.state.vuex_user;
+      if (this.$store.state.vuex_wxinfo) {
+        this.userInfo = Object.assign(this.userInfo, this.$store.state.vuex_wxinfo);
+      }
+    } else {
+      this.userInfo = [];
+    };
+    // let locationLocaturl = window.location.search;
+    // this.code = getUrlParams(locationLocaturl, "code");
+    // if (this.code && !this.$store.state.vuex_wxinfo.openId) {
+    //   this.handleGetWXInfo(this.code)
+    // };
+  },
+  methods: {
+		/**
+		 * 打开新页面
+		 * @param {String} path 跳转路径
+		 * @param {flag} flag 返回存储标识
+		 * */
+    openPage(path, flag) {
+      this.$u.route({
+        url: path
+      })
+      if (flag) {
+        uni.setStorage({
+          key: 'messageBack',
+          data: 'pages/center/index'
+        })
+      }
+    },
+    // 获取消息未读条数
+    getMsgNum() {
+      this.$u.api.getIndexData()
+        .then(res => {
+          if (res.code === 200) {
+            let num = 0
+            if (res.data.news) {
+              res.data.news.forEach(item => {
+                if (item.readFlag == 0) {
+                  num += 1
+                }
+              })
+            }
+            this.messageNum = num
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'error'
+            })
+          }
+        })
+        .catch(err => {
+          this.$refs.uToast.show({
+            title: '系统错误!',
+            type: 'error'
+          })
+        })
+    },
+    //登录判断
+    login(status) {
+      console.log('this.$store.state.vuex_hasLogin', this.$store.state.vuex_hasLogin);
+      if (!status) {
+        this.$u.route({
+          url: 'pages/center/phoneLogin/phoneLogin'
+        });
+      }
+    },
+		// tabbar 返回
+    customBack() {
+      this.$u.route({
+        type: 'switchTab',
+        url: 'pages/index/index'
+      });
+    },
+		// 拨打电话
+    phoneCall(phone) {
+      uni.makePhoneCall({
+        phoneNumber: phone
+      });
+    },
+		// 登出
+    loginOut() {
+      this.$u.vuex('vuex_hasLogin', false);
+      this.$u.vuex('vuex_wxinfo', null);
+      this.$u.vuex('vuex_token', '');
+      this.$u.vuex('vuex_user', null);
+      this.userInfo = []
+      this.code = ''
+      localStorage.clear()
+      setTimeout(() => {
+        this.logoutPop = false
+        uni.navigateTo({
+          url: '/pages/center/phoneLogin/phoneLogin'
+        })
+      }, 500)
+    },
+		// 点击头像
+    clickHead() {
+      if (this.$store.state.vuex_hasLogin) {
+        this.logoutPop = true
+      }
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-page{background-color: $my-page-bg-color;}
-.user-box{
-	position: relative;
-	background-color: $my-main-color;
-	color: #fff;
-	&:after{
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		content: '';
-		background: url(../../static/img/center-top-bg.png) no-repeat;
-		background-position: -90rpx 0;
-		width: 305rpx;
-		height: 145rpx;
-		z-index: 999;
-	}
+page {
+  background-color: $my-page-bg-color;
+}
+.user-box {
+  position: relative;
+  background-color: $my-main-color;
+  color: #fff;
+  &:after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    content: "";
+    background: url(../../static/img/center-top-bg.png) no-repeat;
+    background-position: -90rpx 0;
+    width: 305rpx;
+    height: 145rpx;
+    z-index: 999;
+  }
+}
+.u-avatar {
+  border: 10rpx solid #4caeff;
 }
-.u-avatar{border: 10rpx solid #4CAEFF;}
 .u-cell-box /deep/ .u-cell__left-icon-wrap,
-.u-cell-box /deep/ .custom-icon
-{color: $my-main-color;margin-right: 10rpx;}
-.pay-tips {text-align: center;margin: 30rpx 0;}
+.u-cell-box /deep/ .custom-icon {
+  color: $my-main-color;
+  margin-right: 10rpx;
+}
+.pay-tips {
+  text-align: center;
+  margin: 30rpx 0;
+}
 </style>

pages/center/order/order.vue

@@ -65,15 +65,26 @@
                 <view class="order-center">
                   <view class="order-center-item">订单编号：{{ orderItem.orderId }}</view>
                   <view class="order-center-item">入场时间：{{ orderItem.inTime }}</view>
-                  <view
-                    class="order-center-item"
-                    v-if="orderItem.orderStatus !== 1"
-                  >出场时间：{{ orderItem.outTime }}</view>
+				  <view
+				    class="order-center-item"
+				    v-if="orderItem.orderStatus == 1 && orderItem.outTime"
+				  >预计出场时间：{{orderItem.outTime}}</view>
+				  <view
+				    class="order-center-item"
+				    v-if="orderItem.orderStatus !== 1"
+				  >出场时间：{{ orderItem.outTime }}</view>
                   <view
                     class="order-center-item"
                     v-if="orderItem.orderStatus !== 1"
                   >停留时间：{{ orderItem.duration }}</view>
-                  <view class="order-center-item">
+				  <view
+					class="order-center-item"
+					v-if="orderItem.orderStatus == 1"
+				  >
+				    预计金额：
+				    <span class="pay-amount">{{ orderItem.payAmount }}</span>
+				  </view>
+                  <view class="order-center-item" v-else>
                     应付金额：
                     <span class="pay-amount">{{ orderItem.payAmount }}</span>
                   </view>

pages/center/order/orderDetails/orderDetails.vue

@@ -114,29 +114,46 @@ export default {
       // 订单列表,一般长度为1的数组
       orderList: [],
 	  // 重定向页面
-	  jumpUrl: location.href
+	  jumpUrl: location.href + '&type=open'
     }
   },
   onLoad (page) {
     const orderId = page?.orderId
-    uni.showLoading({
-      title: '加载中',
-      mask: true
-    })
-    setTimeout(() => {
-      if (orderId) {
-        this.orderId = orderId
-        this.handleGetOrderinfo(orderId)
-      }
-    }, 1000)
+	// 该标识判断是否是从支付完成页面回调回来
+	const openFlag = page?.type
+	if (orderId) {
+		this.orderId = orderId
+		// 如果标识存在,证明需要执行轮询判断支付状态,否则直接查询
+		if (openFlag && openFlag === 'open') {
+			this.handleGetOrderinfo(orderId, openFlag)
+			let time = 0
+			this.timer = setInterval(() => {
+				time ++
+				this.handleGetOrderinfo(orderId, openFlag)
+				// 超过60s直接清除轮询
+				if (time === 60) {
+					clearInterval(this.timer)
+				}
+			}, 1000)
+		} else {
+			this.handleGetOrderinfo(orderId)
+		}
+	}
   },
   methods: {
-    handleGetOrderinfo (orderId) {
+	/**
+	 * 通过订单id去获取订单信息
+	 * */
+    handleGetOrderinfo (orderId, openFlag) {
       this.$u.api.getOrderDetail({ id: orderId })
         .then(res => {
           if (res.code === 200) {
-            uni.hideLoading()
             this.orderInfo = res.data
+			if (openFlag === 'open') {
+				if (res.data.payStatus === 1 || res.data.payStatus === 3) {
+					clearInterval(this.timer)
+				}
+			}
           } else {
             this.$refs.uToast.show({
               title: res.msg,
@@ -189,6 +206,11 @@ export default {
         return ''
       }
     }
+  },
+  destroyed() {
+	  if (this.timer) {
+		  clearInterval(this.timer)
+	  }
   }
 }
 </script>

pages/handleMonthly/handleMonthly.vue

@@ -7,7 +7,7 @@
 				<u-icon name="arrow-down" color="#7B7B7B" size="30"></u-icon>
 			</view>
 		</view>
-		<u-select v-model="isShowCarLicense" :list="carLicenseList" @confirm="carLicenseListConfirm"></u-select>
+		<u-select v-model="isShowCarLicense" :list="carLicenseList" :default-value="carLicenseDefaultValue" @confirm="carLicenseListConfirm"></u-select>
 		<view class="handle-monthly-item">
 			<view>车辆信息</view>
 			<view>{{form.carLicense.value | verifyStatusFilter}}</view>
@@ -102,17 +102,19 @@
 				label:"",
 				payWayPop: false,
 				jumpUrl: undefined,
-				monthlyContent: ''
+				monthlyContent: '',
+				carLicenseDefaultValue: [0]
 			}
 		},
 		onLoad (page) {
 			this.getSysterms(0)
-			if (page.roadNo) {
+			if (page.vehicleNo && page.vehicleNo) {
 				this.roadNo = page.roadNo;
-				this.getMonthInfo(this.roadNo);
-			}
-			if (page.vehicleNo) {
 				this.vehicleNo = page.vehicleNo
+				this.getMonthInfo(this.roadNo, this.vehicleNo);
+			} else if (page.roadNo) {
+				this.roadNo = page.roadNo;
+				this.getMonthInfo(this.roadNo);
 			}
 			const baseUrl = window.location.href.split('#')[0]
 			let jumpUrl = baseUrl + '#/pages/center/monthly/monthly'
@@ -189,16 +191,18 @@
 			},
 			carLicenseListConfirm (item) {
 				this.form.carLicense = item[0]
+				this.vehicleNo = item[0].label
+				this.getMonthInfo(this.roadNo, this.vehicleNo)
 			},
-			getMonthInfo(roadNo){
-				this.$u.api.monthInfo({roadNo: this.roadNo})
+			getMonthInfo(roadNo, vehicleNo){
+				this.$u.api.monthInfo({roadNo: roadNo, vehicleNo: vehicleNo})
 				.then(res => {
 					if (res.code === 200){
 						this.lastActiveDate = res.data.lastActiveDate;
 						this.form.monthAmount=res.data.monthAmount;
 						this.carLicenseList = [];
 						let vehicleNoItem = null
-						res.data.vehicleList.forEach(item => {
+						res.data.vehicleList.forEach((item, index) => {
 							const obj = {
 								value: item.energyType,
 								label: item.vehicleNo,
@@ -206,6 +210,7 @@
 							}
 							if (this.vehicleNo == item.vehicleNo) {
 								vehicleNoItem = obj
+								this.carLicenseDefaultValue = [index]
 							}
 							this.carLicenseList.push(obj)
 						});

pages/index/index.scss

@@ -80,6 +80,9 @@ page{background-color: $my-page-bg-color;}
 			font-size: 22rpx;
 			font-weight: 500;
 			color: #787878;
+			display: inline-block;
+			width: 160rpx;
+			text-align: right;
 		}
 		.nosign{
 			width: 100%;
@@ -112,7 +115,7 @@ page{background-color: $my-page-bg-color;}
 	}
 	.pending-order-body-left{
 		.car-number{
-			margin-bottom: 11rpx;
+			margin-bottom: 20rpx;
 			font-size: 30rpx;
 			font-weight: 600;
 			color: #3A3A3A;

pages/index/index.vue

@@ -1,462 +1,555 @@
 <template>
-	<view>
-		<!-- <u-navbar :is-back='false' :border-bottom="false" :background="{ background: '#008CFF' }" title=""></u-navbar> -->
-		<view class="header-bar">
-			<view class="city" @click="handleCitySelect">
-				<view class="city-name">{{city}}</view>
-				<u-icon name="arrow-down" color="#fff" size="32"></u-icon>
-			</view>
-			<u-search placeholder="搜索停车点" :show-action="false" @search="handleSearch" v-model="keyword"></u-search>
-			<!-- <u-icon class="scan" name="scan" color="#fff" size="48" @click="$refs.uToast.show({title: '建设中'})"></u-icon> -->
-		</view>
-		
-		<u-swiper :list="bannerList" border-radius="0" mode="none" @click="swiperClick"></u-swiper>
-		
-		<u-city-select v-model="cityOpen" @city-change="cityChange" :areaCode='["52", "5201"]' ></u-city-select>
-		
-		<view class="notice-bar-wrap u-flex" v-if="noticeList.length >= 1" @click="openPage('pages/message/message', true)">
-			<u-icon custom-prefix="custom-icon" size="50" name="xiaoxi" color="#008CFF"></u-icon>
-			<u-notice-bar
-				class="u-flex-1"
-				mode="vertical"
-				:autoplay="true"
-				:list="noticeList" 
-				:volume-icon="false" 
-				bg-color="#fff" 
-				color="#727272"
-				:more-icon="true"></u-notice-bar>
-		</view>
-		<u-card :show-head="false" :show-foot="false" border-radius="16" margin="20rpx 40rpx" padding="30">
-			<view class="content-nav" slot="body">
-				<view class="content-nav-item" @click="openPage('pages/payLists/payLists')">
+  <view>
+		<!-- ===================================== 搜索栏 ===================================== -->
+    <view class="header-bar">
+      <view class="city" @click="handleCitySelect">
+        <view class="city-name">{{ city }}</view>
+        <u-icon name="arrow-down" color="#fff" size="32"></u-icon>
+      </view>
+			<u-search
+				placeholder="搜索停车点"
+				:show-action="false"
+				@search="handleSearch"
+				v-model="keyword"
+			></u-search>
+      <!-- <u-icon class="scan" name="scan" color="#fff" size="48" @click="$refs.uToast.show({title: '建设中'})"></u-icon> -->
+    </view>
+	
+		<!-- ===================================== 轮播图 ===================================== -->
+    <u-swiper
+			:list="bannerList"
+			border-radius="0"
+			mode="none"
+			@click="swiperClick"
+		></u-swiper>
+	
+		<!-- ===================================== 城市选择器 ===================================== -->
+    <u-city-select
+			v-model="cityOpen"
+			@city-change="cityChange"
+			:areaCode='["52", "5201"]'
+		></u-city-select>
+	
+		<!-- ===================================== 滚动信息栏 ===================================== -->
+    <view
+      class="notice-bar-wrap u-flex"
+      v-if="noticeList.length >= 1"
+      @click="openPage('pages/message/message', true)"
+    >
+      <u-icon custom-prefix="custom-icon" size="50" name="xiaoxi" color="#008CFF"></u-icon>
+      <u-notice-bar
+        class="u-flex-1"
+        mode="vertical"
+        :autoplay="true"
+        :list="noticeList"
+        :volume-icon="false"
+        bg-color="#fff"
+        color="#727272"
+        :more-icon="true"
+      ></u-notice-bar>
+    </view>
+	
+		<!-- ===================================== 宫格菜单 ===================================== -->
+    <u-card
+      :show-head="false"
+      :show-foot="false"
+      border-radius="16"
+      margin="20rpx 40rpx"
+      padding="30"
+    >
+      <view class="content-nav" slot="body">
+				<view
+					class="content-nav-item"
+					v-for="(grid, index) in gridList"
+					:key="'g-' + index"
+					@click="openPage(grid.url, true)"
+				>
 					<view class="content-nav-item-icon-wrap">
-						<u-image src="../../static/img/index-content-nav-01.png" width="95rpx" height="95rpx" mode="heightFix"></u-image>
+					  <u-image
+					    :src="grid.imageUrl"
+					    :width="grid.width || '95rpx'"
+					    :height="grid.height || '95rpx'"
+					    :mode="grid.mode || 'heightFix'"
+					  ></u-image>
 					</view>
-					<view class="content-nav-item-icon-text">停车缴费</view>
+					<view class="content-nav-item-icon-text">{{grid.title}}</view>
 				</view>
-				<view class="content-nav-item" @click="openPage('pages/favourableActivity/favourableActivity')">
-					<view class="content-nav-item-icon-wrap">
-						<u-image src="../../static/img/index-content-nav-02.png" width="95rpx" height="95rpx" mode="heightFix"></u-image>
-					</view>
-					<view class="content-nav-item-icon-text">优惠活动</view>
-				</view>
-				<view class="content-nav-item" @click="openPage('pages/myCars/myCars')">
-					<view class="content-nav-item-icon-wrap">
-						<u-image src="../../static/img/index-content-nav-03.png" width="95rpx" height="95rpx" mode="heightFix"></u-image>
-					</view>
-					<view class="content-nav-item-icon-text">车辆管理</view>
-				</view>
-				<view class="content-nav-item" @click="openPage('pages/searchparking/searchparking')">
-					<view class="content-nav-item-icon-wrap">
-						<u-image src="../../static/img/index-content-nav-04.png" width="95rpx" height="95rpx" mode="heightFix"></u-image>
-					</view>
-					<view class="content-nav-item-icon-text">我的停车</view>
-				</view>
-			</view>
-		</u-card>
-		
-		<view class="empty-data-box" v-if="!orderList || orderList.length < 1">
-			<u-empty text="暂无停车信息" mode="list"></u-empty>
-		</view>
-		<template v-for="(item, index) in orderList">
-			<u-card :show-foot="false" border-radius="16" margin="20rpx 40rpx" padding="30">
-				<view class="pending-order-head" slot="head">
-					<view class="pending-order-head-left"><b>P</b>{{item.roadName}}</view>
-					<view class="pending-order-head-right" @click="onRoadInfo(item)"><u-icon class="arrow-down" name="arrow-down" size="32" color="#aaa"></u-icon></view>
-				</view>
-				<view class="pending-order-body" slot="body">
-					<view class="pending-order-body-nav">
-						<view class="nav-item nav-manual" @click="orderNavclick()" :class="{active:orderNav==0}">手动缴费</view>
-						<view class="nav-item nav-auto" @click="orderNavclick()" :class="{active:orderNav==1}">无感支付</view>
-					</view>
-					<view class="pending-order-body-wrap" v-show="orderNav==0">
-						<view class="pending-order-body-left">
-							<view class="car-number">{{item.vehicleNo}}</view>
-							<view class="item-cell">
-								<span class="pending-order-body-left-label">入场时间：</span>
-								<span>{{item.inTime}}</span>
-							</view>
-							<view class="item-cell">
-								<span class="pending-order-body-left-label">出场时间：</span>
-								<!-- <span>{{item.outTime}}</span> -->
-								<span>计时中</span>
-							</view>
-							<view class="item-cell">
-								<span class="pending-order-body-left-label">预计金额：</span>
-								<span>{{item.payAmount}}</span>
-							</view>
-							<!-- <view class="item-cell">
-								<span class="pending-order-body-left-label">出场时间:</span>
-								<span>{{item.outTime||'停放中'}}</span>
-							</view>
-							<view class="item-cell">
-								<span class="pending-order-body-left-label">停留时间:</span>
-								<span>{{item.duration||'停放中'}}</span>
-							</view>
-							<view class="item-cell cost">
-								<span class="pending-order-body-left-label">停车费用:</span>
-								<span>
-									<span class="number" v-if="item.payAmount">￥{{item.payAmount}}</span>
-									<span class="number" v-else>停放中</span>
-								</span>
-							</view> -->
-						</view>
-						<view class="pending-order-body-right">
-							<view class="order">停车泊位:{{item.spaceName}}</view>
-						</view>	
-						<view class="go-pay-wrap">
-							<view class="go-pay" @click="goPay(item.id)">出场缴费</view>
-						</view>
-					</view>
-					<view class="pending-order-body-wrap" v-show="orderNav==1">
-						<view v-if="contractStatus==0" class="nosign">
-							<view class="nosign1">您的车牌未签约贵州银行无感支付</view>
-							<view class="nosign2">请下载贵州银行手机银行app进行签约</view>
-						</view>
-						<view v-if="contractStatus==1" class="sign">
-							<view class="sign1">您已签约贵州银行无感支付</view>
-							<view class="sign2">停车出场时将默认使用无感支付进行支付</view>
-						</view>
-					</view>
-				</view>
-			</u-card>
-		</template>
-		<view class="promotion-box">
-			<view class="promotion-title">
-				<text>优惠活动</text>
-			</view>
-			<view class="promotion-banner">
-				<u-swiper
-					:list="promotionBannerList"
-					@click="promotionBannerClick"
-					height="221"></u-swiper>
-			</view>
-		</view>
-		
-		<u-modal 
-			v-model="bindCarShow" 
-			title="绑定车牌号" 
-			:show-cancel-button="true" 
-			confirm-text="去绑定" 
-			content="首次使用请先绑定您的车牌"
-			@confirm="$u.route({url:'pages/myCars/myCars'})"></u-modal>
-			
-		<u-popup class="popup-order-details" v-model="showOrderDetails" mode="center" width="90%" border-radius="20">
-			<view class="popup-order-details-til">停车场信息</view>
-			<view class="popup-order-details-con">
-				<dl><dt>路段名称：</dt> <dd>{{popupOrderDetails.roadName}}</dd></dl>
-				<dl><dt>路段编码：</dt><dd>{{popupOrderDetails.roadNo}}</dd></dl>
-				<dl><dt>联系人：</dt><dd>{{popupOrderDetails.manager}} </dd></dl>
-				<dl><dt>联系电话：</dt><dd  @click="phoneCall(popupOrderDetails.telephone)">{{popupOrderDetails.telephone}}</dd></dl>
-			</view>
-			<view class="popup-order-details-footer" @click="closeOrderDetails">
-				知道了
-			</view>
-		</u-popup>
-		<!-- 支付方式 -->
-		<PaymentMethod
-			:payWayPop="payWayPop"
-			:curOrderList="curOrderList"
-			:jumpUrl="jumpUrl"
-			@closePaymentMethod="closePaymentMethod"></PaymentMethod>
-		<u-toast ref="uToast" />
-	</view>
-</template>
+      </view>
+    </u-card>
 
-<script>
-	import getUrlParams from "../../utils/getUrlParams.js";
-	import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
-	export default {
-		components: {
-			PaymentMethod
-		},
-		data() {
-			return {
-				city: '贵州省',
-				keyword:'',
-				bannerList:[
-					{
-						image: require('@/static/img/index-banner01.png')
-					}
-				],
-				orderList:[],
-				cityOpen:false,
-				pendingOrder:[],
-				code: null,//微信code
-				orderNav:'',//手动,无感
-				bindCarShow:false,//绑定车询问弹窗
-				showOrderDetails:false,//是否线上订单细节
-				popupOrderDetails:[],
-				noticeList:[],
-				// 优惠活动广告图
-				promotionBannerList: [
-					{
-						id: 1,
-						image: '/static/img/promotion-banner-1.png',
-						title: '1分钱停车'
-					},
-					{
-						id: 2,
-						image: '/static/img/promotion-banner-2.png',
-						title: '八折停车'
-					}
-				],
-				contractStatus:'',
-				vehicleId:'',
-				recordList:[],
-				// 支付方式弹框
-				payWayPop: false,
-				// 订单号
-				curOrderList: [],
-				latLongItude:{},
-				jumpUrl: ''
-			}
-		},
-		onShow() {
-			this.handleGetIndexData();
-			this.getLocation();
-			let locationLocaturl = window.location.search;
-			this.code = getUrlParams(locationLocaturl, "code");
-			if(this.code&&!this.$store.state.vuex_wxinfo.openId){this.handleGetWXInfo(this.code)};
-			const href = location.href.split('#')
-			this.jumpUrl = href[0] + '#/pages/center/order/order'
-		},
-		methods: {
-			// 定位
-			getLocation(){
-				const that = this;
-				if(navigator.geolocation){
-				//判断是否有这个对象
-					navigator.geolocation.getCurrentPosition(function(pos){
-						console.log("经度："+pos.coords.longitude+"纬度："+pos.coords.latitude);
-						that.latLongItude = {latitude: pos.coords.latitude,longitude:pos.coords.longitude};
-						that.latitude = pos.coords.latitude;
-						that.longitude = pos.coords.longitude;
-						that.getCityNameByLonLat(that.latLongItude)
-					},function(err){
-						// 错误处理
-						switch(err.code) {
-							case 1: 
-								alert("位置服务被拒绝。");
-							break;
+		<!-- ===================================== 无停车信息 ===================================== -->
+    <view class="empty-data-box" v-if="!orderList || orderList.length < 1">
+      <u-empty text="暂无停车信息" mode="list"></u-empty>
+    </view>
+	
+		<!-- ===================================== 停车列表 ===================================== -->
+    <template v-for="(item, index) in orderList">
+      <u-card
+        :show-foot="false"
+        border-radius="16"
+        margin="20rpx 40rpx"
+        padding="30">
+        <view class="pending-order-head" slot="head">
+          <view class="pending-order-head-left">
+            <b>P</b>
+            {{ item.roadName }}
+          </view>
+          <view class="pending-order-head-right" @click="  onRoadInfo(item)">
+            <u-icon class="arrow-down" name="arrow-down" size="32" color="#aaa"></u-icon>
+          </view>
+        </view>
+        <view class="pending-order-body" slot="body">
+          <view class="pending-order-body-nav">
+            <view
+              class="nav-item nav-manual"
+              @click="orderNavclick()"
+              :class="{ active: orderNav == 0 }"
+            >手动缴费</view>
+            <view
+              class="nav-item nav-auto"
+              @click="orderNavclick()"
+              :class="{ active: orderNav == 1 }"
+            >无感支付</view>
+          </view>
+          <view class="pending-order-body-wrap" v-show="orderNav == 0">
+            <view class="pending-order-body-left">
+              <view class="car-number">{{ item.vehicleNo }}</view>
+              <view class="item-cell">
+                <span class="pending-order-body-left-label">入场时间：</span>
+                <span>{{ item.inTime }}</span>
+              </view>
+              <view class="item-cell">
+                <span class="pending-order-body-left-label">预计出场时间：</span>
+                <span>{{item.outTime}}</span>
+              </view>
+              <view class="item-cell">
+                <span class="pending-order-body-left-label">预计金额：</span>
+                <span>{{ item.payAmount }}</span>
+              </view>
+              <!-- <view class="item-cell">
+                <span class="pending-order-body-left-label">出场时间:</span>
+                <span>{{item.outTime||'停放中'}}</span>
+              </view>
+              <view class="item-cell">
+                <span class="pending-order-body-left-label">停留时间:</span>
+                <span>{{item.duration||'停放中'}}</span>
+              </view>
+              <view class="item-cell cost">
+                <span class="pending-order-body-left-label">停车费用:</span>
+                <span>
+                  <span class="number" v-if="item.payAmount">￥{{item.payAmount}}</span>
+                  <span class="number" v-else>停放中</span>
+                </span>
+              </view>-->
+            </view>
+            <view class="pending-order-body-right">
+              <view class="order">停车泊位:{{ item.spaceName }}</view>
+            </view>
+            <view class="go-pay-wrap">
+              <view class="go-pay" @click="  goPay(item.id)">出场缴费</view>
+            </view>
+          </view>
+          <view class="pending-order-body-wrap" v-show="orderNav == 1">
+            <view v-if="contractStatus == 0" class="nosign">
+              <view class="nosign1">您的车牌未签约贵州银行无感支付</view>
+              <view class="nosign2">请下载贵州银行手机银行app进行签约</view>
+            </view>
+            <view v-if="contractStatus == 1" class="sign">
+              <view class="sign1">您已签约贵州银行无感支付</view>
+              <view class="sign2">停车出场时将默认使用无感支付进行支付</view>
+            </view>
+          </view>
+        </view>
+      </u-card>
+    </template>
+	
+		<!-- ===================================== 优惠活动 ===================================== -->
+    <view class="promotion-box">
+      <view class="promotion-title">
+        <text>优惠活动</text>
+      </view>
+      <view class="promotion-banner">
+        <u-swiper :list="promotionBannerList" @click="  promotionBannerClick" height="221"></u-swiper>
+      </view>
+    </view>
 
-							case 2: 
-								alert("暂时获取不到位置信息。");
-							break;
+		<!-- ===================================== 绑定车牌号弹框 ===================================== -->
+    <u-modal
+      v-model="bindCarShow"
+      title="绑定车牌号"
+      :show-cancel-button="true"
+      confirm-text="去绑定"
+      content="首次使用请先绑定您的车牌"
+      @confirm="$u.route({ url: 'pages/myCars/myCars' })"
+    ></u-modal>
 
-							case 3:
-								alert("获取信息超时。");
-							break;
+		<!-- ===================================== 停车场信息弹框 ===================================== -->
+    <u-popup
+      class="popup-order-details"
+      v-model="showOrderDetails"
+      mode="center"
+      width="90%"
+      border-radius="20"
+    >
+      <view class="popup-order-details-til">停车场信息</view>
+      <view class="popup-order-details-con">
+        <dl>
+          <dt>路段名称：</dt>
+          <dd>{{ popupOrderDetails.roadName }}</dd>
+        </dl>
+        <dl>
+          <dt>路段编码：</dt>
+          <dd>{{ popupOrderDetails.roadNo }}</dd>
+        </dl>
+        <dl>
+          <dt>联系人：</dt>
+          <dd>{{ popupOrderDetails.manager }}</dd>
+        </dl>
+        <dl>
+          <dt>联系电话：</dt>
+          <dd @click="phoneCall(popupOrderDetails.telephone)">{{ popupOrderDetails.telephone }}</dd>
+        </dl>
+      </view>
+      <view class="popup-order-details-footer" @click="closeOrderDetails">知道了</view>
+    </u-popup>
+    
+		<!-- ===================================== 支付方式弹框 ===================================== -->
+    <PaymentMethod
+      :payWayPop="payWayPop"
+      :curOrderList="curOrderList"
+      :jumpUrl="jumpUrl"
+      @closePaymentMethod="closePaymentMethod"
+    ></PaymentMethod>
+    <u-toast ref="uToast" />
+  </view>
+</template>
 
-							default:
-								alert("未知错误。");
-							break;
-						}
-					})
-				}else{
-					console.log("当前系统不支持GPS API")
-				};
-			},
-			// 通过经纬度获取地区详细信息
-			getCityNameByLonLat({longitude,latitude} = {}){
-				let that = this;
-				uni.showLoading({
-				    title: '加载中',
-					mask:true
-				});
-				let str =  `output=jsonp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL&location=${latitude},${longitude}`;
-				this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/?'+ str, {}).then(res=>{
-				  uni.hideLoading();
-				  if(res.status == 0){
-					  if (res.result.ad_info) {
-						  that.city = res.result.ad_info.district
-					  }
-				  }
-				})
-			},
-			// 轮播图点击
-			swiperClick(item) {
-				this.$u.route({
-					url: 'pages/bannerDetails/bannerDetails',
-					params: {
-						id: this.bannerList[item].id
-					}
-				})
-			},
-			// 切换无感和手动
-			orderNavclick(){
-				uni.showLoading({
-				    title: '加载中'
-				})
-				this.$u.api.feePay({vehicleId: this.recordList[1]})
-					.then( res=>{
-						if(res.code == 200){
-							this.handleGetIndexData()
-						}
-						uni.hideLoading()
-					})
-			},
-			/**
-			 * 跳转页面
-			 * path 跳转路径
-			 * flag 是否存储
-			 * */
-			openPage(path, flag) {
-				this.$u.route({ 
-					url: path
-				})
-				if (flag) {
-					uni.setStorage({
-					    key: 'messageBack',
-					    data: 'pages/index/index'
-					})
-				}
-			},
-			// 搜索
-			handleSearch(){
-				uni.reLaunch({
-				    url: `/pages/parkingLists/parkingLists?keyword=${this.keyword}`
-				})
-			},
-			// 城市选择
-			handleCitySelect(){
-				this.cityOpen = true;				
-			},
-			// 城市选择下拉变化
-			cityChange(e){
-				if (e.area) {
-					this.city = e.area.label;
-				} else if (e.city) {
-					this.city = e.city.label;
-				} else {
-					this.city = e.province.label;
+<script>
+import getUrlParams from '../../utils/getUrlParams.js'
+import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
+export default {
+  components: {
+    PaymentMethod
+  },
+  data () {
+    return {
+			// 城市选择框
+			cityOpen: false,
+			// 选中城市
+      city: '贵州省',
+			// 搜索框值
+      keyword: '',
+			// 轮播图
+      bannerList: [
+        {
+          image: require('@/static/img/index-banner01.png')
+        }
+      ],
+			// 订单列表
+      orderList: [],
+			// 微信code
+      code: null,
+			// 手动,无感
+      orderNav: '',
+			// 绑定车询问弹窗
+      bindCarShow: false,
+			// 是否线上订单细节
+      showOrderDetails: false,
+			// 订单详情
+      popupOrderDetails: [],
+			// 消息列表
+      noticeList: [],
+      // 优惠活动广告图
+      promotionBannerList: [
+        {
+          id: 1,
+          image: '/static/img/promotion-banner-1.png',
+          title: '1分钱停车'
+        },
+        {
+          id: 2,
+          image: '/static/img/promotion-banner-2.png',
+          title: '八折停车'
+        }
+      ],
+			// 签约状态
+      contractStatus: '',
+      vehicleId: '',
+      recordList: [],
+      // 支付方式弹框
+      payWayPop: false,
+      // 订单号
+      curOrderList: [],
+			// 当前位置经纬度
+      latLongItude: {},
+			// 跳转地址
+      jumpUrl: '',
+			// 宫格菜单列表
+			gridList: [
+				{
+					url: 'pages/payLists/payLists',
+					imageUrl: '../../static/img/index-content-nav-01.png',
+					title: '停车缴费'
+				},
+				{
+					url: 'pages/favourableActivity/favourableActivity',
+					imageUrl: '../../static/img/index-content-nav-02.png',
+					title: '优惠活动'
+				},
+				{
+					url: 'pages/myCars/myCars',
+					imageUrl: '../../static/img/index-content-nav-03.png',
+					title: '车辆管理'
+				},
+				{
+					url: 'pages/searchparking/searchparking',
+					imageUrl: '../../static/img/index-content-nav-04.png',
+					title: '我的停车'
 				}
-			},
-			// 获取首页数据
-			handleGetIndexData(){
-				uni.showLoading({
-				    title: '加载中'
-				})
-				this.$u.api.getIndexData()
-				.then(res=>{
-					if (res.code === 200) {
-						// 轮播
-						const bannerList = []
-						const banner = res.data?.advs
-						banner.forEach(item => {
-							const obj = {
-								image: item.bannerUrl,
-								id: item.id,
-								name: item.name,
-								content: item.content
-							}
-							bannerList.push(obj)
-						})
-						if (bannerList.length > 0) {
-							this.bannerList = bannerList
-						}
-						// 是否有绑定车牌: 没有则通过弹框去绑定
-						let vehicleList = res.data?.vehicleList??[]
-						if(vehicleList.length === 0){
-							this.bindCarShow = true;
-						}
-						// 无感和手动
-						const enableFeepay = []
-						res.data.orderList.forEach(item => {
-							if (item.enableFeepay) {
-								enableFeepay.push(item.enableFeepay);
-							} else {
-								enableFeepay.push(0);
-							}
-							enableFeepay.push(item.vehicleId);
-							if (item.contractStatus) {
-								enableFeepay.push(item.contractStatus);
-							} else {
-								enableFeepay.push(0);
-							}
-						})
-						this.recordList=enableFeepay;
-						this.orderNav = enableFeepay[0];
-						this.contractStatus=enableFeepay[2];
-						this.orderList = res.data.orderList;
-						// 消息提示
-						const newsList = []
-						const news = res.data?.news??[]
-						news.forEach(item => {
-							newsList.push(item.content)
-						})
-						this.noticeList = newsList;
-						uni.hideLoading()
-					} else {
-						this.$refs.uToast.show({
-							title: res.msg,
-							type: 'error'
-						})
-						uni.hideLoading()
-					}
-				}).catch(err=>{
-					this.$refs.uToast.show({
-						title: '系统异常',
-						type: 'error'
-					})
-					uni.hideLoading()
-				});
-			},
-			// 去支付,选择支付方式
-			goPay(orderId){
-				this.payWayPop = true
-				this.curOrderList = []
-				this.curOrderList.push(orderId)
-			},
-			// 获取路段详情
-			onRoadInfo(item){
-				this.$u.api.roadInfoById({
-					id:item.roadId,
-				})
-					.then(res=>{
-						this.popupOrderDetails=res.data;
-						this.showOrderDetails = true;
-					}).catch(err=>{
-						this.$refs.uToast.show({
-							title: '系统异常',
-							type: 'error'
-						})
-					});
-			},
-			// 关闭路段详情弹框
-			closeOrderDetails(){
-				this.showOrderDetails = false;
-			},
-			// 打电话
-			phoneCall(phone){
-				uni.makePhoneCall({
-				    phoneNumber: phone
-				});
-			},
-			/**
-			 * 点击优惠活动的广告图
-			 * */
-			promotionBannerClick(cur) {
-				this.promotionBannerList.forEach((item, index) => {
-					if (cur === index) {
-						this.$u.route({
-							url:'pages/favourableActivity/favourableActivity',
-							params: {
-								title: item.title,
-								id: item.id
-							}
-						})
-					}
-				})
-			},
-			// 关闭支付弹框
-			closePaymentMethod() {
-				this.payWayPop = false
-			}
-		}
-	}
+			]
+    }
+  },
+  onShow () {
+    this.handleGetIndexData()
+    this.getLocation()
+    const locationLocaturl = window.location.search
+    this.code = getUrlParams(locationLocaturl, 'code')
+    if (this.code && !this.$store.state.vuex_wxinfo.openId) { this.handleGetWXInfo(this.code) };
+    const href = location.href.split('#')
+    this.jumpUrl = href[0] + '#/pages/center/order/order'
+  },
+  methods: {
+    // 定位
+    getLocation () {
+      const that = this
+      if (navigator.geolocation) {
+        // 判断是否有这个对象
+        navigator.geolocation.getCurrentPosition(function (pos) {
+          that.latLongItude = { latitude: pos.coords.latitude, longitude: pos.coords.longitude }
+          that.latitude = pos.coords.latitude
+          that.longitude = pos.coords.longitude
+          that.getCityNameByLonLat(that.latLongItude)
+        }, function (err) {
+          // 错误处理
+          switch (err.code) {
+            case 1:
+              alert('位置服务被拒绝。')
+              break
+            case 2:
+              alert('暂时获取不到位置信息。')
+              break
+            case 3:
+              alert('获取信息超时。')
+              break
+            default:
+              alert('未知错误。')
+              break
+          }
+        })
+      } else {
+				alert('当前系统不支持GPS API')
+      };
+    },
+    // 通过经纬度获取地区详细信息
+    getCityNameByLonLat ({ longitude, latitude } = {}) {
+      const that = this
+      uni.showLoading({
+        title: '加载中',
+        mask: true
+      })
+      const str = `output=jsonp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL&location=${latitude},${longitude}`
+      this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/?' + str, {}).then(res => {
+        uni.hideLoading()
+        if (res.status == 0) {
+          if (res.result.ad_info) {
+            that.city = res.result.ad_info.district
+          }
+        }
+      })
+    },
+    // 轮播图点击
+    swiperClick (item) {
+      this.$u.route({
+        url: 'pages/bannerDetails/bannerDetails',
+        params: {
+          id: this.bannerList[item].id
+        }
+      })
+    },
+    // 切换无感和手动
+    orderNavclick () {
+      uni.showLoading({
+        title: '加载中'
+      })
+      this.$u.api.feePay({ vehicleId: this.recordList[1] })
+        .then(res => {
+          if (res.code == 200) {
+            this.handleGetIndexData()
+          }
+          uni.hideLoading()
+        })
+    },
+    /**
+     * 跳转页面
+     * path 跳转路径
+     * flag 是否存储
+     * */
+    openPage (path, flag) {
+      this.$u.route({
+        url: path
+      })
+      if (flag) {
+        uni.setStorage({
+          key: 'messageBack',
+          data: 'pages/index/index'
+        })
+      }
+    },
+    // 搜索
+    handleSearch () {
+      uni.reLaunch({
+        url: `/pages/parkingLists/parkingLists?keyword=${this.keyword}`
+      })
+    },
+    // 城市选择
+    handleCitySelect () {
+      this.cityOpen = true
+    },
+    // 城市选择下拉变化
+    cityChange (e) {
+      if (e.area) {
+        this.city = e.area.label
+      } else if (e.city) {
+        this.city = e.city.label
+      } else {
+        this.city = e.province.label
+      }
+    },
+    // 获取首页数据
+    handleGetIndexData () {
+      uni.showLoading({
+        title: '加载中'
+      })
+      this.$u.api.getIndexData()
+        .then(res => {
+          if (res.code === 200) {
+            // 轮播
+            const bannerList = []
+            const banner = res.data?.advs
+            banner.forEach(item => {
+              const obj = {
+                image: item.bannerUrl,
+                id: item.id,
+                name: item.name,
+                content: item.content
+              }
+              bannerList.push(obj)
+            })
+            if (bannerList.length > 0) {
+              this.bannerList = bannerList
+            }
+            // 是否有绑定车牌: 没有则通过弹框去绑定
+            const vehicleList = res.data?.vehicleList ?? []
+            if (vehicleList.length === 0) {
+              this.bindCarShow = true
+            }
+            // 无感和手动
+            const enableFeepay = []
+            res.data.orderList.forEach(item => {
+              if (item.enableFeepay) {
+                enableFeepay.push(item.enableFeepay)
+              } else {
+                enableFeepay.push(0)
+              }
+              enableFeepay.push(item.vehicleId)
+              if (item.contractStatus) {
+                enableFeepay.push(item.contractStatus)
+              } else {
+                enableFeepay.push(0)
+              }
+            })
+            this.recordList = enableFeepay
+            this.orderNav = enableFeepay[0]
+            this.contractStatus = enableFeepay[2]
+            this.orderList = res.data.orderList
+            // 消息提示
+            const newsList = []
+            const news = res.data?.news ?? []
+            news.forEach(item => {
+              newsList.push(item.content)
+            })
+            this.noticeList = newsList
+            uni.hideLoading()
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'error'
+            })
+            uni.hideLoading()
+          }
+        }).catch(err => {
+          this.$refs.uToast.show({
+            title: '系统异常',
+            type: 'error'
+          })
+          uni.hideLoading()
+        })
+    },
+    // 去支付,选择支付方式
+    goPay (orderId) {
+      this.payWayPop = true
+      this.curOrderList = []
+      this.curOrderList.push(orderId)
+    },
+    // 获取路段详情
+    onRoadInfo (item) {
+      this.$u.api.roadInfoById({
+        id: item.roadId
+      })
+        .then(res => {
+          this.popupOrderDetails = res.data
+          this.showOrderDetails = true
+        }).catch(err => {
+          this.$refs.uToast.show({
+            title: '系统异常',
+            type: 'error'
+          })
+        })
+    },
+    // 关闭路段详情弹框
+    closeOrderDetails () {
+      this.showOrderDetails = false
+    },
+    // 打电话
+    phoneCall (phone) {
+      uni.makePhoneCall({
+        phoneNumber: phone
+      })
+    },
+    /**
+     * 点击优惠活动的广告图
+     * */
+    promotionBannerClick (cur) {
+      this.promotionBannerList.forEach((item, index) => {
+        if (cur === index) {
+          this.$u.route({
+            url: 'pages/favourableActivity/favourableActivity',
+            params: {
+              title: item.title,
+              id: item.id
+            }
+          })
+        }
+      })
+    },
+    // 关闭支付弹框
+    closePaymentMethod () {
+      this.payWayPop = false
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-	@import "./index.scss";
+@import "./index.scss";
 </style>

pages/message/message.vue

@@ -56,10 +56,10 @@
 				uni.getStorage({
 				    key: 'messageBack',
 				    success: (res) => {
-						this.$u.route({
-							type: 'switchTab',
-							url: res.data
-						})
+							this.$u.route({
+								type: 'switchTab',
+								url: res.data
+							})
 				    }
 				})
 			},

pages/myCars/myCars.vue

@@ -69,15 +69,17 @@
 		onLoad(){
 			this.handlegetMycars();
 		},
-		// onShow() {
-		// 	this.handlegetMycars();
-		// },
 		methods:{
 			customBack(){
-				this.$u.route({
-					type:'switchTab',
-					url: 'pages/index/index'
-				});
+				uni.getStorage({
+				    key: 'messageBack',
+				    success: (res) => {
+							this.$u.route({
+								type: 'switchTab',
+								url: res.data
+							})
+				    }
+				})
 			},
 			// 获取车辆列表
 			handlegetMycars(){

pages/parkingLists/parkingLists.vue

@@ -1,15 +1,16 @@
 <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
+<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
+			@change="searchInputChange"
+		></u-search>
+    <u-icon
 			v-if="!searchContent&&isShowSearchParking==false"
 			class="icon"
 			name="list"
@@ -17,8 +18,9 @@
 			color="#ffffff"
 			placeholder-color="#B5B5B5"
 			search-icon-color="#B3B3B3"
-			@click="listIconClick"></u-icon>
-			<u-icon
+			@click="listIconClick"
+		></u-icon>
+    <u-icon
 			v-if="searchContent||isShowSearchParking==true"
 			class="icon"
 			name="close"
@@ -26,412 +28,409 @@
 			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="parking-current-address" v-if="nearParkingFlag">
-			<swiper class="swiper"
+			@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="parking-current-address" v-if="nearParkingFlag">
+    <swiper class="swiper"
 			:current="swiperCurrent"
 			:indicator-dots="false"
 			:autoplay="false"
 			previous-margin="30rpx"
 			next-margin="30rpx"
-			@change="swiperChange">
-				<swiper-item v-for="(item, index) in nearParkingList" :key="index + 'n'">
-					<view class="swiper-item">
-						<view @click="clickSearchParking(item)">{{item.roadName}}</view>
-						<view>{{item.areaName}}</view>
-						<view class="swiper-item-font">
-							<view>
-								<text>空闲车位</text>
-								<text class="yellow-font">{{item.spaceIdle}}</text>
-							</view>
-							<view v-if="item.monthAmount">
-								<text>包月费用</text>
-								<text class="yellow-font">{{item.monthAmount}}元</text>
-							</view>
-							<view>
-								<text>距离</text>
-								<text>{{item.distance|kmUnit}}</text>
-							</view>
-						</view>
-						<view class="swiper-item-button">
-							<button type="default" @click="navigation(item.latitude, item.longitude)">导航</button>
-							<button
-							type="default"
-							:disabled="!item.monthAmount"
-							:class="{'disabled': !item.monthAmount}"
-							@click="createMonth(item)">办理包月</button>
-						</view>
-						<view @click="lookParkingRule(item)">
-							<text>点击查看停车规则</text>
-							<u-icon name="arrow-right"></u-icon>
-						</view>
-					</view>
-				</swiper-item>
-			</swiper>
-		</view>
-		<view class="parking-address-list" v-if="isShowSearchParking">
-			<view
+			@change="swiperChange"
+		>
+      <swiper-item v-for="(item, index) in nearParkingList" :key="index + 'n'">
+        <view class="swiper-item">
+          <view @click="clickSearchParking(item)">{{item.roadName}}</view>
+          <view>{{item.areaName}}</view>
+          <view class="swiper-item-font">
+            <view>
+              <text>空闲车位</text>
+              <text class="yellow-font">{{item.spaceIdle}}</text>
+            </view>
+            <view v-if="item.monthAmount">
+              <text>包月费用</text>
+              <text class="yellow-font">{{item.monthAmount}}元</text>
+            </view>
+            <view>
+              <text>距离</text>
+              <text>{{item.distance|kmUnit}}</text>
+            </view>
+          </view>
+          <view class="swiper-item-button">
+            <button type="default" @click="navigation(item.latitude, item.longitude)">导航</button>
+            <button
+            type="default"
+            :disabled="!item.monthAmount"
+            :class="{'disabled': !item.monthAmount}"
+            @click="createMonth(item)">办理包月</button>
+          </view>
+          <view @click="lookParkingRule(item)">
+            <text>点击查看停车规则</text>
+            <u-icon name="arrow-right"></u-icon>
+          </view>
+        </view>
+      </swiper-item>
+    </swiper>
+  </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)"></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>
+			@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)"></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 Map from '@/js_sdk/ms-openMap/openMap.js';
-	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: {}
-			}
-		},
-		onLoad(page){
-			this.getLocation()
-			if (page.keyword) {
-				this.searchContent = page.keyword
-				this.searchInputChange(page.keyword)
-			}
-		},
-		methods:{
-			/* 
-			 * 查询输入框发生变化
-			 * 
-			 * */
-			searchInputChange (value) {
-				// 为空时关闭搜索列表
-				if (value === '') {
-					this.isShowSearchParking = false
-				}
-				this.isShowParkingDetail = false
-				this.getNearRoadsl()
-			},
-			getLocation(){
-				let that = this;
-				console.log("请求定位")
-				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',
-					})
-				};
-				
-				// uni.getLocation({
-				// 	type:"gcj02",
-				// 	success : function (res) {
-				// 		console.log("定位返回信息:", res);
-				// 		that.latitude = res.latitude;
-				// 		that.longitude = res.longitude;
-				// 		that.currentPosition.latitude = res.latitude
-				// 		that.currentPosition.longitude = res.longitude
-				// 		that.loading = false
-				// 		that.getNearRoadsl()
-				// 	},
-				// 	fail: function(res){
-				// 		this.$refs.uToast.show({
-				// 			title: res,
-				// 			type: 'error',
-				// 		})
-				// 	}
-				// })
-				
-			},
-			/**
-			  * 导航 
-			  * */
-			navigation (latitude, longitude) {
-				this.currentPositionHover = {
-					latitude: latitude,
-					longitude: longitude
-				}
-				this.mapSelect = true
-				// 腾讯地图用webview
-				// uni.navigateTo({
-				//   url: '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:'+latitude+','+longitude+'&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
-				// })
-				/* 组件多地图调用 */
-				// this.nearParkingFlag = false
-				// var options = {
-				//     destination:{  // 导航终点点坐标和名称
-				//         latitude: latitude,
-				//         longitude: longitude,
-				//         name: "终点"
-				//     },
-				//     mapId: "map" // map 组件的 id (微信小程序端必传)
-				// }
-				// Map.navigation(options)
-			},
-			// 多地图选择
-			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'
-						})
-						// 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'
-						// })
-						break;
-					case '百度地图':
-					let bdOriginPoint = qqMapTransBMap(this.currentPosition.longitude,this.currentPosition.latitude);//起点坐标
-					let bdCurrPoint = qqMapTransBMap(this.currentPositionHover.longitude,this.currentPositionHover.latitude);//终点坐标
-					let baiduMap = 'https://map.baidu.com/mobile/webapp/index/index/foo=bar/vt=map';
-					console.log('bdpoint',bdOriginPoint);
-					console.log('bdCurrPoint',bdCurrPoint);
-					let bdurl = `https://api.map.baidu.com/direction?origin=latlng:${bdOriginPoint.lat},${bdOriginPoint.lng}|name:起点&destination=latlng:${bdCurrPoint.lat},${bdCurrPoint.lng}|name:终点&mode=driving&output=html&src=webapp.baidu.openAPIdemo`;
-						console.log('百度地图theurl',bdurl);
-						window.location.href = baiduMap;
-						// uni.navigateTo({
-						//   url: `/pages/parkingLists/map_web_view/map_web_view?url=${encodeURIComponent(`http://api.map.baidu.com/direction?origin=latlng:${this.latitude},${this.longitude}|name:起点&destination=latlng:${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}|name:终点&mode=driving&output=html&src=webapp.baidu.openAPIdemo`)}`
-						// })
-						break;
-					case '高德地图':
-					let 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`;
-					 console.log('高德地图theurl',gdurl);
-					 window.location.href = gdurl;
-					 // window.open(url, "_blank", "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
-						// uni.navigateTo({
-						//   url: `/pages/parkingLists/map_web_view/map_web_view?url=${encodeURIComponent(`//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`)}`
-						// })
-						break;
-					
-				}
-			},
-			clearSearchInput () {
-				this.searchContent = '';
-				this.isShowSearchParking = false;
-				this.getNearRoadsl()
-			},
-			/**
-			 * lon,lat 为当前选中点的经纬度
-			 * 默认首个点放大 如果有传入经纬度则对应的点放大
-			 * */
-			getNearRoadsl(lon, lat){
-				// await this.getLocation();
-				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)
-							let 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)
-			},
-			/* 
-			 *地址发生变化
-			 * 
-			 * */
-			swiperChange (item) {
-				let 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)
-			},
-			/**
-			  * 点击单个停车场看详情
-			  * item 为选中项参数
-			  * */
-			clickSearchParking (item) {
-				console.log('clickSearchParking',item)
-				// this.parkingDetailData = item
-				// this.isShowParkingDetail = true
-				// this.latitude = item.latitude
-				// this.longitude = item.longitude
-				// this.getNearRoadsl(item.longitude, item.latitude)
-				// setTimeout(() => {
-				// 	this.isShowSearchParking = false
-				// }, 500)
-				// this.scale = 18
-				this.$u.route({
-					url: 'pages/parkingInformation/parkingInformation',
-					params:{
-						roadInfo:JSON.stringify(item) 
-					}
-				})
-			},
-			/**
-			 * 跳转停车标准页面
-			 * {roadNo} 路段编码
-			  * */
-			lookParkingRule (item) {
-				this.$u.route({
-					url: 'pages/chargeStandard/chargeStandard',
-					params: {
-						roadNo: item.roadNo
-					}
-				})
-			},
-			/*搜索右侧按钮点击
-			*/
-		   listIconClick(){
-			   this.isShowSearchParking = true;
-			   this.nearParkingFlag = false;
-			   this.searchParkingList = this.nearParkingList;
-			   // this.getNearRoadsl();
-		   },
-			createMonth(item){
-				this.$u.route({
-					url: 'pages/handleMonthly/handleMonthly',
-					params: {
-						roadNo:item.roadNo
-					}
-				});
-			}
-		}
-	}
+import Map from '@/js_sdk/ms-openMap/openMap.js'
+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: {}
+    }
+  },
+  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.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) {
+      this.currentPositionHover = {
+        latitude: latitude,
+        longitude: longitude
+      }
+      this.mapSelect = true
+      // 腾讯地图用webview
+      // uni.navigateTo({
+      //   url: '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:'+latitude+','+longitude+'&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
+      // })
+      /* 组件多地图调用 */
+      // this.nearParkingFlag = false
+      // var options = {
+      //     destination:{  // 导航终点点坐标和名称
+      //         latitude: latitude,
+      //         longitude: longitude,
+      //         name: "终点"
+      //     },
+      //     mapId: "map" // map 组件的 id (微信小程序端必传)
+      // }
+      // Map.navigation(options)
+    },
+    // 多地图选择
+    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'
+          })
+          // 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'
+          // })
+          break
+        case '百度地图':
+          const bdOriginPoint = qqMapTransBMap(this.currentPosition.longitude, this.currentPosition.latitude) // 起点坐标
+          const bdCurrPoint = qqMapTransBMap(this.currentPositionHover.longitude, this.currentPositionHover.latitude) // 终点坐标
+          const baiduMap = 'https://map.baidu.com/mobile/webapp/index/index/foo=bar/vt=map'
+          const bdurl = `https://api.map.baidu.com/direction?origin=latlng:${bdOriginPoint.lat},${bdOriginPoint.lng}|name:起点&destination=latlng:${bdCurrPoint.lat},${bdCurrPoint.lng}|name:终点&mode=driving&output=html&src=webapp.baidu.openAPIdemo`
+          console.log('百度地图theurl', bdurl)
+          window.location.href = baiduMap
+          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`
+          console.log('高德地图theurl', gdurl)
+          window.location.href = gdurl
+          // window.open(url, "_blank", "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
+          // uni.navigateTo({
+          //   url: `/pages/parkingLists/map_web_view/map_web_view?url=${encodeURIComponent(`//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`)}`
+          // })
+          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 2021-08-10
+     * @param {Object} item 为选中项参数
+     * @returns {any}
+     */
+    clickSearchParking (item) {
+      this.$u.route({
+        url: 'pages/parkingInformation/parkingInformation',
+        params: {
+          roadInfo: JSON.stringify(item)
+        }
+      })
+    },
+    /**
+     * 跳转停车标准页面
+     * @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) {
+      this.$u.route({
+        url: 'pages/handleMonthly/handleMonthly',
+        params: {
+          roadNo: item.roadNo
+        }
+      })
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-	.wrap{margin-top: 20vh;}
-	@import url("./parkingLists.scss");
+.wrap{margin-top: 20vh;}
+@import url("./parkingLists.scss");
 </style>

pages/payLists/payLists.vue

@@ -33,16 +33,17 @@
 		</view>
 		<!-- 缴费提示-->
 		<u-modal
-		v-model="payTipsPop"
-		:title-style="{color: '#404040'}"
-		title="缴费提示"
-		:show-confirm-button="true"
-		confirm-text="立即缴费"
-		:confirm-style="{backgroundColor: '#3397FA', color: '#fff'}"
-		:show-cancel-button="true"
-		cancel-text="取消"
-		:cancel-style="{backgroundColor: '#EBF1FF', color: '#3397FA'}"
-		@confirm="payTipsPopConfirm">
+			v-model="payTipsPop"
+			:title-style="{color: '#404040'}"
+			title="缴费提示"
+			:show-confirm-button="true"
+			confirm-text="立即缴费"
+			:confirm-style="{backgroundColor: '#3397FA', color: '#fff'}"
+			:show-cancel-button="true"
+			cancel-text="取消"
+			:cancel-style="{backgroundColor: '#EBF1FF', color: '#3397FA'}"
+			@confirm="payTipsPopConfirm"
+		>
 			<view class="slot-content">
 				<view class="pay-tips">
 					<text>{{payTipsItem.num}}</text>场停车欠费，共

pages/paymentMethod/paymentMethod.vue

@@ -73,6 +73,9 @@
 			 * @param {String} deviceNo 设备编号(只有车位锁部分有)
 			 * */
 			gyBankPay() {
+				uni.showLoading({
+				    title: '加载中'
+				});
 				const params = {
 					orderList: this.curOrderList,
 					deviceNo: this.deviceNo,
@@ -88,6 +91,7 @@
 							type: 'info',
 						});
 						setTimeout(() => {
+							uni.hideLoading();
 							location.reload()
 						}, 1000)
 					}
@@ -107,6 +111,9 @@
 			 * 最后再调起微信支付
 			 * */
 			wechatPay() {
+				uni.showLoading({
+				    title: '加载中'
+				});
 				// const openId = this.$store.state.vuex_wxinfo.openId
 				// if (openId) {
 				// 	this.getWXPay(this.curOrderList, this.deviceNo)
@@ -166,6 +173,7 @@
 						if (res.code === 200) {
 							location.href = res.data.qrCodeUrl
 						} else {
+							uni.hideLoading()
 							this.$refs.uToast.show({
 								title: res.msg,
 								type: 'error',