Skip to content

Commit d99fa8f

Browse files
author
dongxingbin
committed
'init'
1 parent ff9b83f commit d99fa8f

File tree

7 files changed

+170
-112
lines changed

7 files changed

+170
-112
lines changed

src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { MyPage } from '../pages/tabs-my/tabs-my';
1616
import { TabsPage } from '../pages/tabs/tabs';
1717
import { TutorialPage } from '../pages/tutorial/tutorial';
1818

19+
import { Authentication } from '../providers/authentication';
1920
import { Api } from '../providers/api';
2021
import { Items } from '../mocks/providers/items';
2122
import { Settings } from '../providers/settings';
@@ -90,6 +91,7 @@ export function provideSettings(storage: Storage) {
9091
TutorialPage
9192
],
9293
providers: [
94+
Authentication,
9395
Api,
9496
Items,
9597
User,

src/pages/tabs-my/tabs-my.html

Lines changed: 28 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,33 @@
88

99
<ion-content>
1010

11-
<form [formGroup]="form" *ngIf="settingsReady">
12-
<ion-list *ngIf="page == 'main'">
13-
<ion-item>
14-
<ion-label>{{ 'SETTINGS_OPTION1' | translate }}</ion-label>
15-
<ion-toggle formControlName="option1"></ion-toggle>
16-
</ion-item>
17-
18-
<ion-item>
19-
<ion-label>{{ 'SETTINGS_OPTION2' | translate }}</ion-label>
20-
<ion-input formControlName="option2"></ion-input>
21-
</ion-item>
22-
23-
<ion-item>
24-
<ion-label>{{ 'SETTINGS_OPTION3' | translate }}</ion-label>
25-
<ion-select formControlName="option3">
26-
<ion-option value="1" checked="true">1</ion-option>
27-
<ion-option value="2">2</ion-option>
28-
<ion-option value="3">3</ion-option>
29-
</ion-select>
30-
</ion-item>
31-
32-
<button ion-item [navPush]="subSettings" [navParams]="profileSettings">
33-
{{ 'SETTINGS_PROFILE_BUTTON' | translate }}
34-
</button>
35-
</ion-list>
36-
37-
<ion-list *ngIf="page == 'profile'">
38-
<ion-item>
39-
<ion-label>{{ 'SETTINGS_OPTION4' | translate }}</ion-label>
40-
<ion-input formControlName="option4"></ion-input>
41-
</ion-item>
42-
</ion-list>
43-
</form>
11+
<section class="userInfo">
12+
<ion-avatar item-start>
13+
<img [src]="profilePic" />
14+
</ion-avatar>
15+
<section class="userInfo_name">
16+
<h5>{{name}}</h5>
17+
</section>
18+
</section>
19+
20+
<ion-list no-border>
21+
22+
<ion-item>
23+
<ion-icon name='eye' item-left color="h"></ion-icon>
24+
我的关注
25+
</ion-item>
26+
<ion-item>
27+
<ion-icon name='star' item-left color="h"></ion-icon>
28+
我的收藏
29+
</ion-item>
30+
<ion-item>
31+
<ion-icon name='settings' item-left color="h"></ion-icon>
32+
设置
33+
</ion-item>
34+
<ion-item (click)="out();">
35+
<ion-icon name='exit' item-left color="h"></ion-icon>
36+
退出
37+
</ion-item>
38+
</ion-list>
4439

4540
</ion-content>

src/pages/tabs-my/tabs-my.scss

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,39 @@
1-
page-settings {
2-
1+
page-my {
2+
.userInfo {
3+
width: 100%;
4+
box-shadow: 0 0 4px #c4c6c8;
5+
padding: 4%;
6+
margin: 8px 0;
7+
overflow: hidden;
8+
background: #fff;
9+
img {
10+
width: 50px;
11+
height: 50px;
12+
border-radius: 999999px;
13+
float: left;
14+
}
15+
.userInfo_name {
16+
float: left;
17+
margin-left: 10px;
18+
}
19+
h5 {
20+
margin: 0 !important;
21+
line-height: 25px;
22+
color: #979797;
23+
}
24+
p {
25+
margin: 0 !important;
26+
line-height: 25px;
27+
color: #c4c4c4;
28+
}
29+
}
30+
ion-content {
31+
background-color: #f2f4f7 !important;
32+
}
33+
ion-list {
34+
box-shadow: 0 0 4px #c4c6c8;
35+
}
36+
.item-md {
37+
color: #797979 !important;
38+
}
339
}

src/pages/tabs-my/tabs-my.ts

Lines changed: 12 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import { Component } from '@angular/core';
2-
import { FormBuilder, FormGroup } from '@angular/forms';
32
import { NavController, NavParams } from 'ionic-angular';
4-
5-
import { Settings } from '../../providers/settings';
6-
73
import { TranslateService } from '@ngx-translate/core';
84

95
/**
@@ -17,79 +13,40 @@ import { TranslateService } from '@ngx-translate/core';
1713
})
1814
export class MyPage {
1915
// Our local settings object
20-
options: any;
21-
22-
settingsReady = false;
23-
24-
form: FormGroup;
16+
name:any='';
17+
profilePic: any='';
2518

26-
profileSettings = {
27-
page: 'profile',
28-
pageTitleKey: 'SETTINGS_PAGE_PROFILE'
29-
};
30-
31-
page: string = 'main';
19+
// page: string = 'main';
3220
pageTitleKey: string = 'SETTINGS_TITLE';
3321
pageTitle: string;
3422

35-
subSettings: any = MyPage;
3623

3724
constructor(public navCtrl: NavController,
38-
public settings: Settings,
39-
public formBuilder: FormBuilder,
4025
public navParams: NavParams,
4126
public translate: TranslateService) {
27+
this.init();
4228
}
4329

44-
_buildForm() {
45-
let group: any = {
46-
option1: [this.options.option1],
47-
option2: [this.options.option2],
48-
option3: [this.options.option3]
49-
};
50-
51-
switch (this.page) {
52-
case 'main':
53-
break;
54-
case 'profile':
55-
group = {
56-
option4: [this.options.option4]
57-
};
58-
break;
59-
}
60-
this.form = this.formBuilder.group(group);
61-
62-
// Watch the form for changes, and
63-
this.form.valueChanges.subscribe((v) => {
64-
this.settings.merge(this.form.value);
65-
});
30+
init() {
31+
this.name = '张三';
32+
this.profilePic = 'assets/img/ian-avatar.png';
6633
}
6734

68-
ionViewDidLoad() {
69-
// Build an empty form for the template to render
70-
this.form = this.formBuilder.group({});
71-
}
7235

7336
ionViewWillEnter() {
74-
// Build an empty form for the template to render
75-
this.form = this.formBuilder.group({});
76-
77-
this.page = this.navParams.get('page') || this.page;
37+
// this.page = this.navParams.get('page') || this.page;
7838
this.pageTitleKey = this.navParams.get('pageTitleKey') || this.pageTitleKey;
7939

8040
this.translate.get(this.pageTitleKey).subscribe((res) => {
8141
this.pageTitle = res;
8242
})
83-
84-
this.settings.load().then(() => {
85-
this.settingsReady = true;
86-
this.options = this.settings.allSettings;
87-
88-
this._buildForm();
89-
});
9043
}
9144

9245
ngOnChanges() {
9346
console.log('Ng All Changes');
9447
}
48+
49+
out() {
50+
// this.navCtrl.pop();
51+
}
9552
}

src/providers/api.ts

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,73 @@
1-
import { Injectable } from '@angular/core';
2-
import { Http, RequestOptions, URLSearchParams } from '@angular/http';
1+
import {Injectable} from '@angular/core';
2+
import {Http, Headers, RequestOptions, URLSearchParams, RequestOptionsArgs} from '@angular/http';
33
import 'rxjs/add/operator/map';
4+
import { BASE_URL } from './constant';
5+
import { Authentication } from './authentication';
46

57
/**
68
* Api is a generic REST Api handler. Set your API url first.
79
*/
810
@Injectable()
911
export class Api {
10-
url: string = 'https://example.com/api/v1';
12+
baseUrl: string = BASE_URL;
13+
language:any;
14+
headers:Headers;
1115

12-
constructor(public http: Http) {
16+
constructor(public http: Http, public authentication: Authentication) {
1317
}
1418

15-
get(endpoint: string, params?: any, options?: RequestOptions) {
16-
if (!options) {
17-
options = new RequestOptions();
18-
}
19-
20-
// Support easy query params for GET requests
21-
if (params) {
22-
let p = new URLSearchParams();
23-
for (let k in params) {
24-
p.set(k, params[k]);
19+
init() {
20+
this.language='en-US,en;q=0.5'; // q是权重系数,范围 0 =< q <= 1,q 值越大,请求越倾向于获得其“;”之前的类型表示的内容,若没有指定 q 值,则默认为1,若被赋值为0,则用于提醒服务器哪些是浏览器不接受的内容类型。
21+
if (localStorage.langKey) {
22+
const lang = localStorage.langKey;
23+
if (lang === 'zh') {
24+
this.language='zh-cn,zh;q=0.5';
2525
}
26-
// Set the search field if we have params and don't already have
27-
// a search field set in options.
28-
options.search = !options.search && p || options.search;
2926
}
27+
this.headers = new Headers({ 'Content-Type': 'application/json', 'charset': 'UTF-8','Accept-Language': this.language, 'Authorization': 'Bearer ' + this.authentication.getToken() });
28+
}
3029

31-
return this.http.get(this.url + '/' + endpoint, options);
30+
get(endpoint: string, paramMap?: any) {
31+
return this.http.get(this.baseUrl + '/' + endpoint, new RequestOptions({
32+
search: this.buildURLSearchParams(paramMap),
33+
headers: this.headers
34+
}));
3235
}
3336

3437
post(endpoint: string, body: any, options?: RequestOptions) {
35-
return this.http.post(this.url + '/' + endpoint, body, options);
38+
return this.http.post(this.baseUrl + '/' + endpoint, body, this.getOptions(options));
3639
}
3740

3841
put(endpoint: string, body: any, options?: RequestOptions) {
39-
return this.http.put(this.url + '/' + endpoint, body, options);
42+
return this.http.put(this.baseUrl + '/' + endpoint, body, this.getOptions(options));
4043
}
4144

4245
delete(endpoint: string, options?: RequestOptions) {
43-
return this.http.delete(this.url + '/' + endpoint, options);
46+
return this.http.delete(this.baseUrl + '/' + endpoint, this.getOptions(options));
4447
}
4548

4649
patch(endpoint: string, body: any, options?: RequestOptions) {
47-
return this.http.put(this.url + '/' + endpoint, body, options);
50+
return this.http.put(this.baseUrl + '/' + endpoint, body, this.getOptions(options));
51+
}
52+
53+
private getOptions(options): RequestOptionsArgs {
54+
if (!options) {
55+
options = new RequestOptions({
56+
headers: this.headers
57+
});
58+
return options;
59+
}
60+
}
61+
62+
private buildURLSearchParams(paramMap): URLSearchParams {
63+
let params = new URLSearchParams();
64+
if (!paramMap) {
65+
return params;
66+
}
67+
for (let key in paramMap) {
68+
let val = paramMap[key];
69+
params.set(key, val);
70+
}
71+
return params;
4872
}
4973
}

src/providers/authentication.ts

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/**
2+
* Created by DELL on 9/8/2017.
3+
*/
4+
import {Injectable} from '@angular/core';
5+
import {Http, RequestOptions, URLSearchParams, Response} from '@angular/http';
6+
import 'rxjs/add/operator/map';
7+
8+
@Injectable()
9+
export class Authentication {
10+
private token: string;
11+
private username: string;
12+
private userId: string;
13+
14+
constructor(private http: Http) {
15+
}
16+
17+
getToken() {
18+
const currentToken = localStorage.getItem('usertoken');
19+
if (currentToken) {
20+
this.token = currentToken;
21+
}
22+
return this.token;
23+
}
24+
25+
getUserName() {
26+
const currentUserName = localStorage.getItem('username');
27+
if (currentUserName) {
28+
this.username = currentUserName;
29+
}
30+
return this.username;
31+
}
32+
33+
getUserId() {
34+
const currentUserId = localStorage.getItem('userId');
35+
if (currentUserId) {
36+
this.userId = currentUserId;
37+
}
38+
return this.userId;
39+
}
40+
}

src/providers/constant.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/**
2+
* Created by DELL on 9/8/2017.
3+
*/
4+
export const BASE_URL = 'https://example.com/api/v1';

0 commit comments

Comments
 (0)