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"></u-icon>
		</view>
		
		<u-swiper :list="bannerList" border-radius="0"></u-swiper>
		
		<u-city-select v-model="cityOpen" @city-change="cityChange" :areaCode='["52", "5201"]' ></u-city-select>
		
		<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/center/order/order')">
					<view class="content-nav-item-icon-wrap">
						<u-image src="../../static/img/index-content-nav-01.png" width="77rpx" height="75rpx" mode="heightFix"></u-image>
					</view>
					<view class="content-nav-item-icon-text">停车缴费</view>
				</view>
				<view class="content-nav-item" @click="$refs.uToast.show({title: '建设中'})">
					<view class="content-nav-item-icon-wrap">
						<u-image src="../../static/img/index-content-nav-02.png" width="77rpx" height="75rpx" 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="77rpx" height="75rpx" mode="heightFix"></u-image>
					</view>
					<view class="content-nav-item-icon-text">车辆管理</view>
				</view>
				<view class="content-nav-item" @click="$refs.uToast.show({title: '建设中'})">
					<view class="content-nav-item-icon-wrap">
						<u-image src="../../static/img/index-content-nav-04.png" width="77rpx" height="75rpx" mode="heightFix"></u-image>
					</view>
					<view class="content-nav-item-icon-text">我的停车</view>
				</view>
			</view>
		</u-card>

		<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"></u-icon></view>
				</view>
				<view class="pending-order-body" slot="body">
					<!-- <view class="pending-order-body-nav">
						<view class="nav-item nav-manual" @click="orderNav=0" :class="{active:orderNav==0}">手动缴费</view>
						<view class="nav-item nav-auto" @click="orderNav=1" :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="duration">
								<span class="pending-order-body-left-label">停车时长:</span>
								<span>{{item.duration}}</span>
							</view>
						</view>
						<view class="pending-order-body-right">
							<view class="order">订单号:{{item.id}}</view>
							<view class="cost">
								<span class="pending-order-body-left-label">停车费用:</span>
								<span>
									<span class="number">￥{{item.payAmount}}</span>
									元
								</span>
							</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>
				</view>
			</u-card>
		</template>
		
		
		<u-modal 
			v-model="bindCarShow" 
			title="绑定车牌号" 
			:show-cancel-button="true" 
			confirm-text="去绑定" 
			content="首次使用请先绑定您的车牌"
			@confirm="$u.route({url:'pages/myCars/myCars'})"></u-modal>
			
		<!-- 订单细节 -->
		<u-modal v-model="showOrderDetails" title="停车场信息" confirm-text="知道了" :title-style="{color: '#008CFF'}">
			<view class="slot-content">
				<rich-text class="orderDetails" :nodes="content"></rich-text>
			</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:0,//手动,无感
				bindCarShow:false,//绑定车询问弹窗
				showOrderDetails:false,//是否线上订单细节
				content:`
				<dl>
					<dt>车场名称：</dt>
					<dd>贵阳云岩区甜蜜小镇D18组团停车场</dd>
				</dl>
				<dl>
					<dt>免费时长：</dt>
					<dd>15分钟</dd>
				</dl>
				`,
				
			}
		},
		onLoad() {
			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(){
			// 	console.log("请求定位")
			// 	uni.getLocation({
			// 		type:"gcj02",
			// 		success : function (res) {
			// 			console.log("定位返回信息:", res)
			// 			alert(res.longitude + "," + res.latitude )
			// 		},
			// 		fail: function(res){
			// 			console.log("请求错误:", res)
			// 		}
			// 	})
			// },
			openPage(path) {
				console.log('path',path);
				this.$u.route({ 
					url: path
				})
			},
			handleSearch(){
				console.log('this.keyword',this.keyword);
				this.$u.route({
					url:'pages/parkingLists/parkingLists',
					params: {
						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;
					}
					this.orderList = res.data.orderList;
				}).catch(err=>{
					// alert(err.msg);
					console.log('getIndexData err',err)
				});
			},
			goPay(orderId){
				this.$u.route({
					url: 'pages/payPage/payPage',
					params: {
						orderId: orderId
					}
				});
			},			
			//
			onRoadInfo(item){
				this.$u.api.roadInfoById({id:item.roadId})
				.then(res=>{
					this.content = `
				   <dl><dt>路段名称：</dt> <dd>` + res.data.roadName + `</dd></dl>`
				+ `<dl><dt>路段编码：</dt><dd>` + res.data.roadNo + `</dd></dl>`
				+ `<dl><dt>联系人：</dt><dd>` + res.data.manager + `</dd></dl>`
				+ `<dl><dt>联系电话：</dt><dd>` + res.data.telephone + `</dd></dl>`;
				
					this.showOrderDetails = true;
				}).catch(err=>{
					// alert(err.msg);
					console.log('getIndexData err',err)
				});
			}

		}
	}
</script>

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