加入我的的页面

src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ import {AlarmPage} from './alarm/alarm.page';
 import {RowPage} from './row/row.page';
 import {IndexPage} from './index/index.page';
 import {OtherPage} from './other/other.page';
+import {MinePage} from './mine/mine.page';
 
 const routes: Routes = [
     {
@@ -20,7 +21,8 @@ const routes: Routes = [
             {path: 'other', component: OtherPage},
             {path: 'alarm', component: AlarmPage},
             {path: 'row', component: RowPage},
-            {path: 'index', component: IndexPage}
+            {path: 'index', component: IndexPage},
+            {path: 'mine', component: MinePage}
         ]
     },
     {path: 'login', component: LoginPage}

src/app/app.module.ts

@@ -29,6 +29,7 @@ import {RowPage} from './row/row.page';
 import {IndexPage} from './index/index.page';
 import {OtherPage} from './other/other.page';
 import {SearchPage} from './search/search.page';
+import {MinePage} from './mine/mine.page';
 
 import {Api} from './service/api';
 import {Auth} from './service/auth';
@@ -52,7 +53,8 @@ import {Load} from './service/load';
         RowPage,
         IndexPage,
         OtherPage,
-        SearchPage
+        SearchPage,
+        MinePage
     ],
     entryComponents: [],
     imports: [

src/app/login/login.page.ts

@@ -29,11 +29,7 @@ export class LoginPage implements OnInit {
         this.api.login.login([req, (data) => {
             if (data.code === 1) {
                 window.localStorage.setItem('token', data.message);
-                this.tf.transfer({
-                    url: '/index',
-                    query: '',
-                    hash: ''
-                });
+                this.tf.transfer({url: '/index'});
                 this.mqtt.getUserInfo();
             } else {
                 this.api.presentMsgToast(data && data.message ? data.message : '登录失败');

src/app/mine/mine.page.html

+<div class="mainContent">
+  <div class="topBar">
+    <div class="top">
+      <div class="imgPart">
+        <img style="height: 100%" src="../../../assets/icon/favicon.png">
+      </div>
+      <div class="topRight">
+        <div class="rightTop">{{user.userName}}</div>
+        <div class="rightBottom">{{user.companyName}}</div>
+      </div>
+    </div>
+  </div>
+  <div class="middleCon">
+    <div class="line">
+      <div class="label">昵称</div>
+      <div class="text">{{user.nickName}}</div>
+    </div>
+    <div class="line">
+      <div class="label">邮箱</div>
+      <div class="text">{{user.email}}</div>
+    </div>
+    <div class="line">
+      <div class="label">手机号</div>
+      <div class="text">{{user.phone}}</div>
+    </div>
+  </div>
+  <div class="bottomBtn">
+    <ion-button mode="ios" color="primary" expand="block" class="button" (click)="loginOut()">退出登录</ion-button>
+  </div>
+</div>

src/app/mine/mine.page.scss

+.mainContent {
+  height: 100%;
+  overflow-y: auto;
+  font-size: 14px;
+}
+.topBar {
+  height: 25%;
+  padding-top: 15%;
+  background-color: lavender;
+
+  .top {
+    padding: 5% 8%;
+    .imgPart {
+      width: 100px;
+      height: 100px;
+      display: inline-block;
+      vertical-align: top;
+      text-align: center;
+    }
+    .topRight {
+      width: calc(100% - 110px);
+      display: inline-block;
+      height: 100px;
+      line-height: 40px;
+      font-size: 16px;
+      font-weight: 600;
+      padding-left: 10px;
+      text-align: center;
+      .rightTop {
+        border-bottom: 2px solid #cccccc;
+      }
+    }
+  }
+}
+
+.middleCon {
+  .line {
+    border-bottom: 2px solid #1890ff;
+    padding: 8% 25px 0 25px;
+
+    .label {
+      width: 35%;
+      display: inline-block;
+      height: 40px;
+      line-height: 40px;
+    }
+
+    .text {
+      width: 65%;
+      display: inline-block;
+      text-align: left;
+      height: 40px;
+      line-height: 30px;
+    }
+  }
+}
+
+.bottomBtn {
+  margin-top: 8%;
+  .button {
+    padding: 0;
+    margin: 0;
+    border-radius: 0;
+    background-color: #1890ff;
+  }
+}
+
+@media all and (orientation : landscape) {
+  .middleCon .line {
+    padding-top: 2%;
+  }
+  .bottomBtn {
+    margin-top: 2%;
+  }
+
+  .topBar {
+    height: 35%;
+    padding: 3% 0 0 0;
+    .top {
+      padding: 0 3%;
+    }
+  }
+}

src/app/mine/mine.page.ts

+import { Component, OnInit } from '@angular/core';
+import {Api} from '../service/api';
+import {Transfer} from '../service/transfer';
+
+@Component({
+  selector: 'v-mine',
+  templateUrl: './mine.page.html',
+  styleUrls: ['./mine.page.scss'],
+})
+export class MinePage implements OnInit {
+
+  user: any = {};
+
+  constructor(private api: Api, private tf: Transfer) {
+  }
+
+  ngOnInit() {
+    this.getSelfInfo();
+  }
+
+  getSelfInfo() {
+    this.api.user.getSelfInfo(['', (data) => {
+        if (data) {
+            this.user = data;
+        } else {
+            this.api.presentMsgToast(data && data.message ? data.message : '登录失败');
+        }
+    }]);
+  }
+
+  loginOut() {
+    this.api.login.logout(['', (data) => {
+        if (data) {
+            window.localStorage.removeItem('token');
+            this.tf.transfer({url: '/login'});
+        } else {
+            this.api.presentMsgToast(data && data.message ? data.message : '登录失败');
+        }
+    }]);
+  }
+}