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>
							</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" @click="$refs.uToast.show({title: '建设中'})">
			<view class="promotion-header u-flex u-row-between">
				<view class="promotion-header-til">优惠活动</view>
				<view class="promotion-header-con">去领取</view>
			</view>
			<view class="promotion-body">
				<view class="promotion-body-til">八折停车</view>
				<view class="promotion-body-con">从客户启用贵州银行行卡支付的第四个月开始，使用我行卡支付永久享受八折优惠（单日不限次数)...</view>
			</view>
		</view> -->
		<view class="promotion-box">
			<view class="promotion-title">
				<text>优惠活动</text>
			</view>
			<view class="promotion-banner">
				<!-- <swiper
					class="promotion-banner-swiper"
					:indicator-dots="true"
					indicator-color="rgba(170, 216, 255, 1)"
					indicator-active-color="#008CFF"
					:autoplay="true"
					:duration="500"
					mode="dot"
					:interval="3000"
					:circular="true">
					<swiper-item v-for="(item, index) in promotionBannerList" :key="'bannner' + index">
						<view class="promotion-banner-item">
							<image :src="item.image" mode=""></image>
						</view>
					</swiper-item>
				</swiper> -->
				<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();
			// this.getCityNameByLonLat({latitude: 26.301447, longitude: 105.743197})
			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: 'wgs84',
					geocode: 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} = {}){
				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);
				this.city = e.city.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
							}
						})
					}
				})
			},
			// gyBankPay() {
			// 	this.$u.api.payGzbank({orderList: this.curOrderList}).then(res=>{
			// 		let payUrl = res.data.url;
			// 		this.currentPayUrl=encodeURIComponent(res.data.url);
			// 		this.$u.route({
			// 			url: 'pages/payLists/pay',
			// 			params: {
			// 				currentPayUrl: this.currentPayUrl
			// 			}
			// 		});
			// 	}).catch(err=>{
			// 		this.$refs.uToast.show({
			// 			title: err.msg,
			// 			type: 'error',
			// 		});
			// 	});
			// },
			// // 微信支付
			// wechatPay() {
			// 	const openId = this.$store.state.vuex_wxinfo.openId
			// 	if (openId) {
			// 		this.getWXPay(this.curOrderList)
			// 	} else {
			// 		this.getCode()
			// 	}
			// },
			// async getWXPay(list){
			// 	let params = {
			// 		orderList: list,
			// 		openid: this.$store.state.vuex_wxinfo.openId
			// 	};
			// 	await this.$wxApi.config();
			// 	this.$pay.wechatPay(params).then(res =>{
			// 		if(res.code == 0){
			// 			// 成功
			// 			this.$u.route({
			// 				url:'/',
			// 			});
			// 		}else if(res.code == 1){
			// 			// 取消
			// 			// uni.redirectTo({
			// 			// 	url: '/pages/userCenter/myOrder/myOrder'
			// 			// })
			// 		}else if(res.code == 2){
			// 			this.$refs.uToast.show({
			// 				title: '支付失败，请检查!',
			// 				type: 'error',
			// 				// url: '/pages/user/index'
			// 			});
			// 		}
			// 	});
			// },
			// getCode () {
			// 	var local = window.location.href // 获取页面url
			// 	let locationLocaturl = window.location.search;
			// 	this.code = getUrlParams(locationLocaturl,"code"); // 截取code
			// 	if (this.code == null || this.code === '') { // 如果没有code，则去请求
			// 		window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`
			// 	} else {
			// 		this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
			// 	}
			// },
			// handleGetWXInfo (code) { // 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
			// 	let _this = this
			// 	this.$u.api.getWXInfo(code).then((res) => {
			// 		if (res.code === 200 ) {
			// 			this.$u.vuex('vuex_wxinfo', res.data);
			// 			// 继续支付
			// 			this.getWXPay(this.currentItem)
			// 		}
			// 	}).catch((err) => {
			// 		this.$refs.uToast.show({
			// 			title: err.msg,
			// 			type: 'error',
			// 		});
			// 	})
			// },
			// 关闭弹框
			closePaymentMethod() {
				this.payWayPop = false
			}
		}
	}
</script>

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