<template>
|
<view>
|
<view class="topNav" :style="{height:navHeight+'px',paddingTop:statusBarHeight+'px'}">
|
<uni-icons class= "user-button" type="contact" size="26" color="#fff" @click="toMine"></uni-icons>
|
<view class="nav">
|
<text class="nav-title">北京市育英中学</text>
|
</view>
|
</view>
|
<view class="content">
|
<view class="header_bg">
|
<!--<div class="header-info">
|
<div class="left">
|
<div class="weather-info">
|
<image :src="`../../static/weather-icon/${curWeather.cond_code}.png`" mode="widthFix"></image>
|
|
<span class="desc">{{curWeather.cond_txt}}</span>
|
</div>
|
<div class="temperature" v-show="curWeather.tmp">
|
{{curWeather.tmp}}℃
|
</div>
|
</div>
|
<div class="right">
|
<span class="dimension" v-cloak v-if="dataReturn">{{isLimit?'今日限行':'今日不限行'}}</span>
|
<div class="cube" v-for="(i,index) in limitNum" :key="index">{{i}}</div>
|
</div>
|
</div>
|
-->
|
</view>
|
<view class="body">
|
<div class="card remain">
|
<div class="detail">
|
<image src="../../static/index/u21.png" mode="widthFix"></image>
|
<text class="remain-num">{{remainNum}}</text>
|
</div>
|
<div class="title" style="padding-top:20rpx;">当前剩余车位</div>
|
</div>
|
<div class="card parking-navigation">
|
<div class="detail">
|
<image src="../../static/index/u20.png" mode="widthFix"></image>
|
</div>
|
<div class="title">
|
<navigator url="/pages/parking/parking" hover-class="other-navigator-hover" class="nav-btn">
|
<span>找停车位</span>
|
<image src="../../static/index/right-arrow.png" ></image>
|
</navigator> |
|
<navigator url="/pages/gaode/gaode" hover-class="other-navigator-hover" class="nav-btn btn-gaode">
|
<span>学校车场导航</span>
|
<image src="../../static/index/right-arrow.png" ></image>
|
</navigator>
|
</div>
|
</div>
|
</view>
|
<!-- <view class="modal" v-if="update">
|
<div class="content">
|
<div class="title">发现新版本</div>
|
<div class="desc">
|
<p>版本 {{version}}</p>
|
<p>本次更新:</p>
|
<p >....</p>
|
</div>
|
</div>
|
</view> -->
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
nbTitle: '标题',
|
titleIcon: '/static/logo.png',
|
titleIconRadius: '20px',
|
subtitleText: 'subtitleText',
|
nbLoading: false,
|
nbFrontColor: '#fff',
|
nbBackgroundColor: 'transparent',
|
curWeather: {},
|
//limitNum: 17,
|
dataReturn: false,
|
isLimit: true,
|
limitNum: [],
|
remainNum: '',
|
update: false,
|
version:'',
|
timerId:'',
|
navHeight: '',
|
statusBarHeight: '',
|
}
|
},
|
computed: {
|
// nums() {
|
// return this.limitNum.toString().split('');
|
// }
|
},
|
mounted(){
|
console.log('mounted')
|
this.init();
|
// this.timerId = setInterval(()=>{
|
// console.log('timer')
|
// this.init();
|
// },30000)
|
},
|
onShow() {
|
console.log('show')
|
this.init();
|
this.timerId = setInterval(()=>{
|
console.log('timer')
|
this.init();
|
},30000)
|
},
|
onHide() {
|
clearInterval(this.timerId);
|
console.log('clear')
|
},
|
onReady(){
|
|
},
|
onBackPress(e){
|
console.log(e);
|
uni.showModal({
|
title: '提示',
|
content: '是否退出当前应用？',
|
success: function(res) {
|
if (res.confirm) {
|
// 退出当前应用，改方法只在App中生效
|
plus.runtime.quit();
|
} else if (res.cancel) {
|
console.log('用户点击取消');
|
}
|
}
|
});
|
return true
|
},
|
onLoad() {
|
let {
|
statusBarHeight,
|
system
|
} = uni.getSystemInfoSync()
|
this.statusBarHeight = statusBarHeight
|
this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44)
|
},
|
onPullDownRefresh(){
|
console.log("refresh");
|
this.init()
|
},
|
|
methods: {
|
init(){
|
// this.getWeatherInfo();
|
this.getRemainNum();
|
this.getLimitedNum();
|
uni.stopPullDownRefresh();
|
|
},
|
/*async getWeatherInfo(){
|
let res = await this.$api.syncRequest({
|
url:'https://free-api.heweather.net',
|
loading: true
|
});
|
this.curWeather = res.data.HeWeather6[0].now;
|
},*/
|
async getRemainNum(){
|
let res = await this.$api.syncRequest({
|
url: '/basic/api/car/statistic',
|
loading: true
|
});
|
this.remainNum = res.data.data.left;
|
},
|
async getLimitedNum(){
|
let res = await this.$api.syncRequest({
|
url: '/basic/api/car/restriction',
|
loading: true
|
});
|
|
if(res.data.success && res.data.data.isxianxing==1){
|
this.limitNum = res.data.data.xxWeiHao;
|
}else{
|
this.isLimit = false;
|
}
|
this.dataReturn = true;
|
},
|
toMine() {
|
uni.navigateTo({
|
url: '../mine/mine'
|
});
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.topNav {
|
height: 100rpx;
|
background-color: #2894FF;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
position: relative;
|
}
|
.nav {
|
font-size: 36rpx;
|
font-weight: 600;
|
color: #fff;
|
margin-right: 30rpx;
|
position: absolute;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
.nav-search input {
|
width: 60%;
|
height: 62rpx;
|
border-radius: 30rpx;
|
padding-left: 25rpx;
|
background-color: #f0f8ffa6;
|
box-sizing: border-box;
|
}
|
.placClass {
|
font-size: 24rpx;
|
color: #fff;
|
}
|
.content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
|
.header_bg {
|
width: 100%;
|
height: 500rpx;
|
background-image: url('../../static/index/u3.jpg');
|
background-size: cover;
|
background-position: center;
|
|
.header-bar {
|
/deep/.uni-navbar--border {
|
border-bottom: none;
|
}
|
/deep/.uni-navbar__header{
|
height: 76px;
|
line-height: 76px;
|
.uni-icons{
|
margin-top: 42rpx;
|
font-size: 54rpx!important;
|
}
|
}
|
/deep/.uni-nav-bar-text {
|
font-size: 38rpx;
|
line-height: 1;
|
margin-top: 40rpx;
|
}
|
}
|
|
.header-info {
|
margin: 0 auto;
|
width: 500rpx;
|
height: 260rpx;
|
padding: 58rpx 70rpx 0;
|
border-radius: 5rpx;
|
background-color: rgba(255, 255, 255, .5);
|
color: #006699;
|
flex-direction: column;
|
&[v-cloak] {
|
display: none;
|
}
|
// &::after{
|
// content: "";
|
// width:100%;
|
// height:100%;
|
// position: absolute;
|
// left:0;
|
// top:0;
|
// background: inherit;
|
// filter: blur(2px);
|
// }
|
.left {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 100%;
|
text-align: center;
|
|
.weather-info {
|
display: flex;
|
align-items: center;
|
margin-right: 10rpx;
|
max-height: 95rpx;
|
overflow: hidden;
|
image {
|
width: 90rpx;
|
}
|
|
.desc {
|
font-size: 44rpx;
|
line-height: 1;
|
margin-left: 14rpx;
|
}
|
}
|
|
.temperature {
|
font-size: 46rpx;
|
text-align: center;
|
margin-top: 10rpx;
|
margin-left: 10rpx;
|
}
|
}
|
|
.right {
|
display: flex;
|
justify-content: center;
|
margin-top: 10rpx;
|
width: 100%;
|
text-align: center;
|
.dimension {
|
font-size: 40rpx;
|
&[v-cloak] {
|
display: none !important;
|
}
|
}
|
.cube {
|
width: 44rpx;
|
height: 60rpx;
|
border-radius: 5rpx;
|
margin-right: 14rpx;
|
background-color: #f5f5f5;
|
color: #35ADA7;
|
line-height: 60rpx;
|
text-align: center;
|
font-size: 40rpx;
|
}
|
}
|
}
|
}
|
|
.body {
|
width: 750rpx;
|
padding: 10rpx 30rpx;
|
box-sizing: border-box;
|
|
.card {
|
height: 380rpx;
|
border-radius: 8rpx;
|
margin-top: 20rpx;
|
color: #fff;
|
|
&.remain {
|
background: linear-gradient(135deg, rgba(124, 206, 249, 1) 0%, rgba(124, 206, 249, 1) 0%, rgba(117, 144, 253, 1) 100%, rgba(117, 144, 253, 1) 100%);
|
}
|
|
&.parking-navigation {
|
background: linear-gradient(135deg, rgba(69, 218, 210, 1) 0%, rgba(69, 218, 210, 1) 0%, rgba(48, 211, 172, 1) 100%, rgba(48, 211, 172, 1) 100%);
|
}
|
|
.detail {
|
display: flex;
|
justify-content: center;
|
font-size: 130rpx;
|
line-height: 140rpx;
|
padding-top: 70rpx;
|
|
image {
|
width: 140rpx;
|
margin-right: 20rpx;
|
}
|
|
text {
|
line-height: 1;
|
font-weight: bold;
|
}
|
}
|
|
.title {
|
margin-top: 20rpx;
|
text-align: center;
|
navigator {
|
display: inline-block;
|
padding: 7rpx 10rpx 7rpx 20rpx;
|
margin: 0 16rpx;
|
font-size: 34rpx;
|
color: #45dad2;
|
background: #fff;
|
border-radius: 40rpx;
|
margin-top: 4rpx;
|
}
|
.nav-btn{
|
span{
|
vertical-align: top;
|
}
|
image{
|
width: 36rpx!important;
|
height: 36rpx;
|
vertical-align: top;
|
margin-top: 5rpx;
|
}
|
}
|
}
|
}
|
}
|
.modal{
|
width: 100%;
|
height: 100%;
|
background: rgba(0,0,0,0.3);
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: 100;
|
.content{
|
width: 70%;
|
height: 300rpx;
|
background: #fff;
|
.header{
|
height: 30rpx;
|
padding-left: 20rpx;
|
line-height: 30rpx;
|
}
|
.desc{
|
|
}
|
}
|
}
|
}
|
|
.text-area {
|
display: flex;
|
justify-content: center;
|
}
|
|
.user-button {
|
margin-right: auto;
|
}
|
</style>
|
