|
|
@@ -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>
|
