add new key

zhangzengfei

2021-09-16 38430ddb8612fce15a2f1c940f9bd57d4da3e70b

 pages/index/index.vue

@@ -1,383 +1,383 @@
<template>

   <view class="content">

      <view class="header_bg">

         <uniNavBar title="北京市育英中学" class="header-bar" background-color="transparent" right-icon="contact" color="#fff"

          @clickRight="toMine">

         </uniNavBar>

         <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>

</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:'',

         }

      },

      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

      },

      onReady(){

			
      },

      onLoad() {

			
      },

      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/s6/weather/now?location=beijing&key=618660daa2144e1094ce8d2ef90516d4',

               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">

   .content {

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      position: relative;

		
      .header_bg {

         width: 100%;

         height: 500rpx;

         background: url(../../static/index/u3.jpg) no-repeat;

         background-size: 100% 100%;

         background-position: left top;	
         .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: 240rpx;

            padding: 58rpx 70rpx 0;

            border-radius: 5rpx;

            background-color: rgba(255, 255, 255, .5);

            color: #006699;

				
            &[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;



               .weather-info {

                  display: flex;

                  align-items: center;

                  margin-right: 10rpx;

                  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;

               .dimension {

                  font-size: 40rpx;

                  &[v-cloak] {

                     display: none !important;

                  }

               }

               .cube {

                  width: 44rpx;

                  height: 60rpx;

                  border-radius: 5rpx;

                  margin-right: 14rpx;

                  background-color: #fff;

                  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;

   }

<template>
   <view class="content">
      <view class="header_bg">
         <uniNavBar title="北京市育英中学" class="header-bar" background-color="transparent" right-icon="contact" color="#fff"
          @clickRight="toMine">
         </uniNavBar>
         <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>
</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:'',
         }
      },
      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
      },
      onReady(){
			
      },
      onLoad() {
			
      },
      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/s6/weather/now?location=beijing&key=618660daa2144e1094ce8d2ef90516d4',
               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">
   .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
		
      .header_bg {
         width: 100%;
         height: 500rpx;
         background: url(../../static/index/u3.jpg) no-repeat;
         background-size: 100% 100%;
         background-position: left top;	
         .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: 240rpx;
            padding: 58rpx 70rpx 0;
            border-radius: 5rpx;
            background-color: rgba(255, 255, 255, .5);
            color: #006699;
				
            &[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;

               .weather-info {
                  display: flex;
                  align-items: center;
                  margin-right: 10rpx;
                  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;
               .dimension {
                  font-size: 40rpx;
                  &[v-cloak] {
                     display: none !important;
                  }
               }
               .cube {
                  width: 44rpx;
                  height: 60rpx;
                  border-radius: 5rpx;
                  margin-right: 14rpx;
                  background-color: #fff;
                  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;
   }
</style>