add new key

zhangzengfei

2021-09-16 38430ddb8612fce15a2f1c940f9bd57d4da3e70b

 pages/mine/mine.vue

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

   <view class="content">

      <uniNavBar title="" status-bar="true" class="header-bar" background-color="rgba(11, 191, 113, 1)" left-icon="back" color="#fff" @clickLeft="goBack">

      </uniNavBar>

      <div class="user-info">

         <div class="avatar">

            <uni-icons type="contact" size="50" color="#fff"></uni-icons>

         </div>

         <div class="info">

            <p v-if="isLogin" class="phone">{{userInfo.phoneNum}}</p>

            <button v-else type="default" plain="true" size="mini" @click="login">注册登录</button>

         </div>

      </div>

      <div class="mine-menu">

         <uni-list>

             <uni-list-item title="我的车辆" :thumb="isLogin?'../../static/mine/greencar.png':'../../static/mine/bluecar.png'" @click="toMyCar"></uni-list-item>

            <!-- v-if="userInfo.isAdmin" -->

            <uni-list-item class="parkDetail" v-if="userInfo.isAdmin" title="查看车库详情" thumb="../../static/mine/parking.png" @click="toCheckParkDetail"></uni-list-item>

				
         </uni-list>

      </div>

      <div class="block-btn">

         <button type="default" plain="true" v-if="isLogin" @click="logout">退出登录</button>

      </div>

<template>
   <view class="content">
      <uniNavBar title="" status-bar="true" class="header-bar" background-color="rgba(11, 191, 113, 1)" left-icon="back" color="#fff" @clickLeft="goBack">
      </uniNavBar>
      <div class="user-info">
         <div class="avatar">
            <uni-icons type="contact" size="50" color="#fff"></uni-icons>
         </div>
         <div class="info">
            <p v-if="isLogin" class="phone">{{userInfo.phoneNum}}</p>
            <button v-else type="default" plain="true" size="mini" @click="login">注册登录</button>
         </div>
      </div>
      <div class="mine-menu">
         <uni-list>
             <uni-list-item title="我的车辆" :thumb="isLogin?'../../static/mine/greencar.png':'../../static/mine/bluecar.png'" @click="toMyCar"></uni-list-item>
            <!-- v-if="userInfo.isAdmin" -->
            <uni-list-item class="parkDetail" v-if="userInfo.isAdmin" title="查看车库详情" thumb="../../static/mine/parking.png" @click="toCheckParkDetail"></uni-list-item>
				
         </uni-list>
      </div>
      <div class="block-btn">
         <button type="default" plain="true" v-if="isLogin" @click="logout">退出登录</button>
      </div>
   </view>
</template>

<script>

   // import uniList from "@/components/uni-list/uni-list.vue"

   // import uniListItem from "@/components/uni-list-item/uni-list-item.vue"



   export default{

      data(){

         return{

            isLogin: false,

            userInfo: {},

            clientid: ''

         }

      },

      mounted(){

         this.getUserInfo();

      },

      onBackPress(e){

         console.log(e);

         uni.navigateTo({

            url:'/pages/index/index'

         })

         return true

      },

      methods:{

         getUserInfo(){

		
            // if(localStorage.getItem('user')!='{}' && localStorage.getItem('user')){

            //    this.userInfo = JSON.parse(localStorage.getItem('user'));

            //    this.isLogin = true;

            // }

				
            try{

               let data = uni.getStorageSync('user');

               console.log(data);

               if(uni.getStorageSync('user') != '{}' && uni.getStorageSync('user')){

                  this.userInfo = JSON.parse(uni.getStorageSync('user'));

                  this.isLogin = true;

               }

            }catch(e){

               console.log(e);

            }

         },

         login(){

            //登录

            uni.navigateTo({

               url: '/pages/login/login'

            });

         },

         logout(){

            //#ifdef APP-PLUS

               // var info = plus.push.getClientInfo();

               // console.log(JSON.stringify(info));

               /* 5+  push 消息推送 ps:使用:H5+的方式监听，实现推送*/

               this.clientid = plus.push.getClientInfo().clientid

               if (!this.clientid) { //如果获取的cid为空，说明客户端向推送服务器注册还未完成，可以使用setTimeout延时重试。

                  setTimeout(() => {

                     this.clientid = plus.push.getClientInfo().clientid

                  }, 4000)

               }

               console.log(this.clientid)

               plus.push.addEventListener("click", function(msg) {

                  console.log("click:" + JSON.stringify(msg));

                  console.log(msg.payload);

                  console.log(JSON.stringify(msg));

                  //这里可以写跳转业务代码

               }, false);

               // 监听在线消息事件    
               plus.push.addEventListener("receive", function(msg) {

                  // plus.ui.alert(2);  
                  //这里可以写跳转业务代码

                  console.log("recevice:" + JSON.stringify(msg))

               }, false);

				
            //#endif

            let _this = this;

            uni.showModal({

               content:'确定要退出登录吗?',

               showCancel: true,

               cancelText: '取消',

               success(action){

                  if(action.confirm){

                     _this.$api.syncRequest({

                        url:`/basic/api/user/logout?cid=${_this.clientid}`

                     }).then(res=>{

                        if(res.data.success){

                           _this.isLogin = false;

                           _this.userInfo = {};

                           //localStorage.removeItem('user');

                           uni.removeStorageSync('user')

                           uni.showToast({

                              icon:'none',

                              title: res.data.data

                           });

                        }else{

                           uni.showToast({

                              icon:'none',

                              title: '退出失败，请稍后重试'

                           })

                        }

                     }).catch(err=>{

                        uni.showToast({

                           icon:'none',

                           title: '退出失败，请稍后重试'

                        })

                     })

                  }else if(action.cancel){

                     console.log('取消登出')

                  }

               },

               fail(){



               }

            });

         },

         goBack(){

            uni.navigateBack({

                delta: 1,

                animationType: 'pop-out',

                animationDuration: 200

            });

         },

         toMyCar(){

            if(this.isLogin && this.userInfo.plateNos && this.userInfo.plateNos.length>0){

               uni.navigateTo({

                  //url:'/pages/myCarList/myCarList'

                  url:'/pages/myCarListShow/myCarListShow'

               });

            }else if(this.isLogin && this.userInfo.plateNos && this.userInfo.plateNos.length==0){

               uni.navigateTo({

                  //url: '/pages/addCar/addCar'

                  url:'/pages/myCarListShow/myCarListShow'

               });

            }else if(!this.isLogin){

               uni.navigateTo({

                  url: '/pages/login/login'

               });

            }

				
         },

         toCheckParkDetail(){

            uni.navigateTo({

               url:'/pages/parkInfo/parkInfo'

            });

         }

      }

<script>
   // import uniList from "@/components/uni-list/uni-list.vue"
   // import uniListItem from "@/components/uni-list-item/uni-list-item.vue"

   export default{
      data(){
         return{
            isLogin: false,
            userInfo: {},
            clientid: ''
         }
      },
      mounted(){
         this.getUserInfo();
      },
      onBackPress(e){
         console.log(e);
         uni.navigateTo({
            url:'/pages/index/index'
         })
         return true
      },
      methods:{
         getUserInfo(){
		
            // if(localStorage.getItem('user')!='{}' && localStorage.getItem('user')){
            //    this.userInfo = JSON.parse(localStorage.getItem('user'));
            //    this.isLogin = true;
            // }
				
            try{
               let data = uni.getStorageSync('user');
               console.log(data);
               if(uni.getStorageSync('user') != '{}' && uni.getStorageSync('user')){
                  this.userInfo = JSON.parse(uni.getStorageSync('user'));
                  this.isLogin = true;
               }
            }catch(e){
               console.log(e);
            }
         },
         login(){
            //登录
            uni.navigateTo({
               url: '/pages/login/login'
            });
         },
         logout(){
            //#ifdef APP-PLUS
               // var info = plus.push.getClientInfo();
               // console.log(JSON.stringify(info));
               /* 5+  push 消息推送 ps:使用:H5+的方式监听，实现推送*/
               this.clientid = plus.push.getClientInfo().clientid
               if (!this.clientid) { //如果获取的cid为空，说明客户端向推送服务器注册还未完成，可以使用setTimeout延时重试。
                  setTimeout(() => {
                     this.clientid = plus.push.getClientInfo().clientid
                  }, 4000)
               }
               console.log(this.clientid)
               plus.push.addEventListener("click", function(msg) {
                  console.log("click:" + JSON.stringify(msg));
                  console.log(msg.payload);
                  console.log(JSON.stringify(msg));
                  //这里可以写跳转业务代码
               }, false);
               // 监听在线消息事件    
               plus.push.addEventListener("receive", function(msg) {
                  // plus.ui.alert(2);  
                  //这里可以写跳转业务代码
                  console.log("recevice:" + JSON.stringify(msg))
               }, false);
				
            //#endif
            let _this = this;
            uni.showModal({
               content:'确定要退出登录吗?',
               showCancel: true,
               cancelText: '取消',
               success(action){
                  if(action.confirm){
                     _this.$api.syncRequest({
                        url:`/basic/api/user/logout?cid=${_this.clientid}`
                     }).then(res=>{
                        if(res.data.success){
                           _this.isLogin = false;
                           _this.userInfo = {};
                           //localStorage.removeItem('user');
                           uni.removeStorageSync('user')
                           uni.showToast({
                              icon:'none',
                              title: res.data.data
                           });
                        }else{
                           uni.showToast({
                              icon:'none',
                              title: '退出失败，请稍后重试'
                           })
                        }
                     }).catch(err=>{
                        uni.showToast({
                           icon:'none',
                           title: '退出失败，请稍后重试'
                        })
                     })
                  }else if(action.cancel){
                     console.log('取消登出')
                  }
               },
               fail(){

               }
            });
         },
         goBack(){
            uni.navigateBack({
                delta: 1,
                animationType: 'pop-out',
                animationDuration: 200
            });
         },
         toMyCar(){
            if(this.isLogin && this.userInfo.plateNos && this.userInfo.plateNos.length>0){
               uni.navigateTo({
                  //url:'/pages/myCarList/myCarList'
                  url:'/pages/myCarListShow/myCarListShow'
               });
            }else if(this.isLogin && this.userInfo.plateNos && this.userInfo.plateNos.length==0){
               uni.navigateTo({
                  //url: '/pages/addCar/addCar'
                  url:'/pages/myCarListShow/myCarListShow'
               });
            }else if(!this.isLogin){
               uni.navigateTo({
                  url: '/pages/login/login'
               });
            }
				
         },
         toCheckParkDetail(){
            uni.navigateTo({
               url:'/pages/parkInfo/parkInfo'
            });
         }
      }
   }
</script>

<style lang="scss" scoped>

   /deep/uni-button{

      font-size: 16px;

   }

   // /deep/uni-image>div{

   //    background-position: 0% 3px!important;

   // }

   /deep/uni-image>div{

      background-position: 2px 6px!important;

      background-size: 86% 72%!important;

   }

   /deep/.parkDetail uni-image>div{

      background-position: 2px 3px!important;

      background-size: 86% 86%!important;

   }

   /deep/.uni-list-item__content-title{

      font-size: 16px;

   }

   /deep/.uni-list-item{

      padding: 0 30rpx;

      //border-bottom: 1rpx solid #eee;

   }

   /deep/.uni-list-item__container{

      //border-bottom: 1rpx solid #eee;

   }

   /deep/.uni-list-item__container:after{

      height: 0;

      background-color: transparent!important;

      border: none!important;

   }

   .content{

      .user-info{

         display: flex;

         height: 250rpx;

         padding-top: 30rpx;

         background-color: rgba(11, 191, 113, 1);

         .avatar{

            margin-left: 30rpx;

         }

         .info{

            font-size: 16px;

            button{

               margin: 20rpx 0 0 20rpx;

               color: #fff;

               border-color: #fff;

            }

            .phone{

               margin: 30rpx 0 0 16rpx;

               color: #fff;

            }

         }

      }

      .block-btn{

         padding: 30rpx;

      }

<style lang="scss" scoped>
   /deep/uni-button{
      font-size: 16px;
   }
   // /deep/uni-image>div{
   //    background-position: 0% 3px!important;
   // }
   /deep/uni-image>div{
      background-position: 2px 6px!important;
      background-size: 86% 72%!important;
   }
   /deep/.parkDetail uni-image>div{
      background-position: 2px 3px!important;
      background-size: 86% 86%!important;
   }
   /deep/.uni-list-item__content-title{
      font-size: 16px;
   }
   /deep/.uni-list-item{
      padding: 0 30rpx;
      //border-bottom: 1rpx solid #eee;
   }
   /deep/.uni-list-item__container{
      //border-bottom: 1rpx solid #eee;
   }
   /deep/.uni-list-item__container:after{
      height: 0;
      background-color: transparent!important;
      border: none!important;
   }
   .content{
      .user-info{
         display: flex;
         height: 250rpx;
         padding-top: 30rpx;
         background-color: rgba(11, 191, 113, 1);
         .avatar{
            margin-left: 30rpx;
         }
         .info{
            font-size: 16px;
            button{
               margin: 20rpx 0 0 20rpx;
               color: #fff;
               border-color: #fff;
            }
            .phone{
               margin: 30rpx 0 0 16rpx;
               color: #fff;
            }
         }
      }
      .block-btn{
         padding: 30rpx;
      }
   }
</style>