<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"></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="95rpx" height="95rpx" 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="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="$refs.uToast.show({title: '建设中'})">
<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>
<u-empty text="暂无停车信息" mode="list" class="u-m-t-80" v-if="!orderList||orderList.length<1"></u-empty>
<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="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>
`,
}
},
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(){
// 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',
type:'tab',
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>