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" @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 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"
			:jumpUrl="jumpUrl"
			@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: 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;

							case 2: 
								alert("暂时获取不到位置信息。");
							break;

							case 3:
								alert("获取信息超时。");
							break;

							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;
				}
			},
			// 获取首页数据
			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
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>