ionic

发表于

ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import { Component } from '@angular/core';
import {  NavController, NavParams,ModalController,ViewController, LoadingController, ToastController } from 'ionic-angular';
import { LoginPage } from "../login/login";
import { UserPage } from "../user/user";
import { Storage } from "@ionic/storage";
import { BaseUi } from "../../common/baseui";
import { BookmarkPage } from "../bookmark/bookmark";
import { RestProvider } from "../../providers/rest/rest";
import {SettingProvider} from "../../providers/setting/setting";

/**
 * Generated class for the PersonalCenterPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-personal-center',
  templateUrl: 'personal-center.html',
})

export class PersonalCenterPage extends BaseUi{
  public notLogin : boolean = true;
  public logined : boolean = false;
  public bookmark:any;
  public font:string;
  public nick_name:string;
  public errorMessage:any;
  public url:string;
  selectedTheme: string;
  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public modalCtrl : ModalController,
              public viewCtrl:ViewController,
              public loadingCtrl: LoadingController,
              public toastCtrl: ToastController,
              public storage:Storage,
              public rest:RestProvider,
              public settings:SettingProvider) {
    super();
    this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
  }


  changeFonts(){
    this.storage.set('font',this.font);
  }
  showModal(){
    let modal = this.modalCtrl.create(LoginPage);
    modal.onDidDismiss(this.getUserInfo);
    modal.present();
  }

  showBookmark(){
    let modal = this.modalCtrl.create(BookmarkPage);
    modal.present();
  }

  ionViewDidEnter(){
    this.getUserInfo();
  }

  getUserInfo(){
    this.storage.get('user').then((f)=>{
      if(f){
        var loading = super.showLoading(this.loadingCtrl,'加载中...');
        this.rest.getUerInfo(f).subscribe((val)=>{
          loading.dismiss();
          if(val['status'] == 0){
            this.nick_name = val['msg']['nick_name'] ?  val['msg']['nick_name'] : f;
            this.url = val['msg']['upload_time'] ? 'http://111.231.54.181/static/uploads/headface/' + val['msg']['upload_time'] + '/' + val['msg']['url'] : './assets/imgs/avatar.jpg';
            this.notLogin = false;
            this.logined = true;
          }
        },
        error => {
          this.errorMessage = <any>error;
          this.notLogin = true;
          this.logined = false;
          loading.dismiss();
        });
      }
      else{
        this.notLogin = true;
        this.logined = false;
      }
    });
    //初始化字体
    this.storage.get('font').then((f)=>{
      if(f){
        this.font = f;
      }
      else{
        this.font = '0';
      }
    });
  }

  gotoUserPage(){
    this.navCtrl.push(UserPage);
  }

  toggleChangeTheme() {
    if (this.selectedTheme === 'dark-theme') {
      this.settings.setActiveTheme('light-theme');
    }
    else {
      this.settings.setActiveTheme('dark-theme');
    }
  }

}

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<ion-header>

  <ion-navbar>
    <ion-title>更多</ion-title>
    </ion-navbar>

</ion-header>

<ion-content>
  <ion-card *ngIf="notLogin">
    <ion-card-header text-center>
      登陆 sexybook,体验更多功能
    </ion-card-header>
    <ion-card-content text-center>
      <button ion-button outline small color="secondary" (click)="showModal()">登陆/注册</button>
    </ion-card-content>
  </ion-card>


  <ion-list *ngIf="logined">
    <button ion-item (click)="gotoUserPage()">
      <ion-avatar item-start>
        <img src="{{this.url}}" alt="">
      </ion-avatar>
      <h2>{{this.nick_name}}</h2>
    <p>查看个人主页或编辑简介</p>
    </button>
  </ion-list>

  <ion-list>
    <ion-list-header>
      设置
    </ion-list-header>
    <ion-item>
      <ion-icon name="eye" color="primary" item-start><ion-icon>
      <ion-label>夜间模式</ion-label>
    <ion-toggle (ionChange)="toggleChangeTheme()"></ion-toggle>
    </ion-item>

    <ion-item>
      <ion-icon name="resize" item-start color="danger"></ion-icon>
      <ion-label>字体大小</ion-label>
      <ion-select [(ngModel)]="font" cancelText="取消" okText="确定" (ngModelChange)="changeFonts()">
        <ion-option value="0">默认</ion-option>
        <ion-option value="1">中</ion-option>
        <ion-option value="2">大</ion-option>
      </ion-select>
    </ion-item>

    <button ion-item  (click)="showBookmark()">
      <ion-icon name="pricetag" item-start color="secondary"></ion-icon>
      <ion-label>我的书签</ion-label>
    </button>
  </ion-list>

  <ion-list>
    <ion-list-header>
      关于
    </ion-list-header>
    <ion-item>
      <ion-icon name="settings" item-start></ion-icon>
      <ion-label item-content>系统版本</ion-label>
      <p item-end>1.0.0</p>
    </ion-item>
  </ion-list>

</ion-content>