parking_h5/pages/index/index.vue

<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"></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')">
			<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 class="content-nav-item-icon-wrap">
						<u-image src="../../static/img/index-content-nav-01.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/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"
			@closePaymentMethod="closePaymentMethod"></PaymentMethod>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import getUrlParams from "../../utils/getUrlParams.js";
	import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
	export default {
		components: {
			PaymentMethod
		},
		data() {
			return {
				city: '贵州省',
				keyword:'',
				bannerList:[
					{image: '/static/img/index-banner01.png',title: ''}
				],
				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:{}
			}
		},
		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)};
		},
		methods: {
			// 定位
			getLocation(){
				const that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					altitude: true,
					success: (res) => {
						that.latLongItude = {latitude: res.latitude,longitude:res.longitude};
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.getCityNameByLonLat(that.latLongItude)
					},
					fail: () => {
						console.log("获取经纬度失败");
					}
				})
			},
			// 通过经纬度获取地区详细信息
			getCityNameByLonLat({longitude,latitude} = {}){
				alert(latitude)
				alert(longitude)
				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){
					  console.log(res.result.ad_info)
					  if (res.result.ad_info) {
						  that.city = res.result.ad_info.district
					  }
				  }
				})
			},
			orderNavclick(){
				this.feePay()
			},
			feePay(){
				this.$u.api.feePay({vehicleId: this.recordList[1]})
				.then( res=>{
					if(res.code == 200){
						this.handleGetIndexData()
					}
				})
			},
			openPage(path) {
				console.log('path',path);
				this.$u.route({ 
					url: path
				})
			},
			// 搜索
			handleSearch(){
				console.log('this.keyword',this.keyword);
				uni.reLaunch({
				    url: `/pages/parkingLists/parkingLists?keyword=${this.keyword}`
				})
			},
			handleCitySelect(){
				this.cityOpen = true;				
			},
			cityChange(e){
				console.log('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(){
				this.$u.api.getIndexData()
				.then(res=>{
					if(res.data.vehicleList.length<1){
						this.bindCarShow = true;
					}
					const enableFeepay=[]
					res.data.orderList.forEach(item => {
						enableFeepay.push(item.enableFeepay);
						enableFeepay.push(item.vehicleId);
						enableFeepay.push(item.contractStatus);
					})
					this.recordList=enableFeepay;
					// this.vehicleId=enableFeepay.vehicleId;
					this.orderNav = enableFeepay[0];
					this.contractStatus=enableFeepay[2];
					console.log('recordList',this.recordList)
					this.orderList = res.data.orderList;
					const list = []
					res.data.news.forEach(item => {
						list.push(item.content)
					})
					this.noticeList = list;
				}).catch(err=>{
					// alert(err.msg);
					console.log('getIndexData err',err)
				});
			},
			// 去支付,选择支付方式
			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=>{
					// alert(err.msg);
					console.log('getIndexData err',err)
				});
			},
			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";
</style>