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>
		<!-- 缴费方式-->
		<u-modal
		v-model="payWayPop"
		:title-style="{color: '#404040'}"
		title="缴费方式"
		:show-confirm-button="false"
		:show-cancel-button="false">
			<view class="slot-content">
				<view class="pay-way">
					<view class="pay-way-item" @click="gyBankPay">
						<image src="../../static/img/gy-bank-pay-icon.png" mode=""></image>
						<view>贵州银行</view>
					</view>
					<view class="pay-way-item" @click="wechatPay">
						<image src="../../static/img/wechat-pay-icon.png" mode=""></image>
						<view>微信支付</view>
					</view>
				</view>
				<button class="pay-way-close-btn" @click="payWayPop = false">关闭</button>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import getUrlParams from "../../utils/getUrlParams.js";
	export default {
		// components: {
		// 	citySelect
		// },
		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',
					});
				})
			},
		}
	}
</script>

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