time1 documentation
  1. Components
  2. ProfilePage

File

src/app/profile/profile.page.ts

Metadata

selector app-profile
styleUrls ./profile.page.scss
templateUrl ./profile.page.html

Index

Properties
Methods

Constructor

constructor(navCtrl: NavController)
Defined in src/app/profile/profile.page.ts:11
Parameters :
Name Type Optional
navCtrl NavController No

Methods

backup
backup()
Defined in src/app/profile/profile.page.ts:31
Returns : void
changeLanguage
changeLanguage()
Defined in src/app/profile/profile.page.ts:51
Returns : void
clearCache
clearCache()
Defined in src/app/profile/profile.page.ts:43
Returns : void
clearStats
clearStats()
Defined in src/app/profile/profile.page.ts:47
Returns : void
goToHelpPage
goToHelpPage()
Defined in src/app/profile/profile.page.ts:15
Returns : void
goToProfileInfo
goToProfileInfo()
Defined in src/app/profile/profile.page.ts:19
Returns : void
goToStatsReport
goToStatsReport()
Defined in src/app/profile/profile.page.ts:23
Returns : void
restore
restore()
Defined in src/app/profile/profile.page.ts:35
Returns : void
share
share()
Defined in src/app/profile/profile.page.ts:27
Returns : void
sync
sync()
Defined in src/app/profile/profile.page.ts:39
Returns : void

Properties

days
Type : number
Default value : 123
Defined in src/app/profile/profile.page.ts:11
nickname
Type : string
Default value : '用户昵称'
Defined in src/app/profile/profile.page.ts:10
 
import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.page.html',
  styleUrls: ['./profile.page.scss'],
})
export class ProfilePage {
  nickname: string = '用户昵称';
  days: number = 123; // 模拟数据，可根据实际情况修改

  constructor(private navCtrl: NavController) {}

  goToHelpPage() {
    this.navCtrl.navigateForward('/help');
  }

  goToProfileInfo() {
    this.navCtrl.navigateForward('/profile-info');
  }

  goToStatsReport() {
    this.navCtrl.navigateForward('/stats-report');
  }

  share() {
    // 分享功能实现
  }

  backup() {
    // 备份功能实现
  }

  restore() {
    // 恢复功能实现
  }

  sync() {
    // 云同步功能实现
  }

  clearCache() {
    // 清除缓存功能实现
  }

  clearStats() {
    // 清除统计数据功能实现
  }

  changeLanguage() {
    // 语言设置功能实现
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>我的</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="goToHelpPage()">
        <ion-icon name="help-circle-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item (click)="goToProfileInfo()">
      <ion-avatar slot="start">
        <img src="assets/img/avatar.png" alt="头像">
      </ion-avatar>
      <ion-label>
        <h2>{{nickname}}</h2>
        <p>已坚持打卡{{days}}天</p>
      </ion-label>
    </ion-item>
    
    <ion-item (click)="goToStatsReport()">
      <ion-label>统计报告</ion-label>
      <ion-icon slot="end" name="bar-chart-outline"></ion-icon>
    </ion-item>

    <ion-item (click)="share()">
      <ion-label>分享</ion-label>
      <ion-icon slot="end" name="share-social-outline"></ion-icon>
    </ion-item>

    <ion-item (click)="backup()">
      <ion-label>备份</ion-label>
      <ion-icon slot="end" name="cloud-upload-outline"></ion-icon>
    </ion-item>

    <ion-item (click)="restore()">
      <ion-label>恢复</ion-label>
      <ion-icon slot="end" name="cloud-download-outline"></ion-icon>
    </ion-item>

    <ion-item (click)="sync()">
      <ion-label>云同步</ion-label>
      <ion-icon slot="end" name="sync-outline"></ion-icon>
    </ion-item>

    <ion-item (click)="clearCache()">
      <ion-label>清除缓存</ion-label>
      <ion-icon slot="end" name="trash-bin-outline"></ion-icon>
    </ion-item>

    <ion-item (click)="clearStats()">
      <ion-label>清除统计数据</ion-label>
      <ion-icon slot="end" name="stats-chart-outline"></ion-icon>
    </ion-item>

    <ion-item (click)="changeLanguage()">
      <ion-label>语言设置</ion-label>
      <ion-icon slot="end" name="language-outline"></ion-icon>
    </ion-item>
  </ion-list>
<ion-content>

./profile.page.scss 

ion-item {
    --background: #ffffff;
    --color: #000000;
    --border-color: #f4f4f4;
    --border-width: 1px;
    --min-height: 50px;
    --padding-start: 10px;
    --padding-end: 10px;
    --inner-padding-start: 10px;
    --inner-padding-end: 10px;
    --inner-padding-top: 5px;
    --inner-padding-bottom: 5px;
  }
  
  ion-avatar img {
    width: 100%;
    height: auto;
    border-radius: 50%;
  }
  
  ion-label {
    h2 {
      font-size: 1.2em;
      margin: 0;
      padding: 0;
    }
    p {
      font-size: 0.9em;
      color: gray;
    }
  }
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""