0. 项目目录

1. 欢迎页的实现
2. 程序第一次运行实现
3. 注册的实现
4. 登陆的实现
5. 首页的实现
6. 店铺设置的实现
7. 商品分类浏览的实现
8. 编辑商品分类的实现
9. 新增商品的实现
10. 商品管理的实现

---

---

# 写于2020.12.18 
# 还有点小问题 样式不是很平整，舒展；侧菜单 名字默认不会变
# 实属不易，望赞鼓励

---

1. 任务要求

1.1 修改应用程序的主题颜色
把应用程序的主色调（primary）改为#FF6A3C，改变标题栏、按钮等组件的颜色。

1.2 首页的详细需求
用户场景： 用户登录成功后或者5天之前有登录过，应用程序进入首页。可以查看今天、过去7天和本月的销售
总额，查看与昨天、去年同期（7天和月份）销售数据比较的涨幅情况，通过不同的颜色快速了解企业的销售状
况。用户可以点击相应的图标快速地进入常用的页面。

1.3 左侧菜单的详细需求

2. 为应用的UI创建自定义调色板

修改应用程序的主色调。

1. 访问Ionic官网提供的颜色生成器颜色生成器链接。 2. 在primary输入框中输入#FF6A3C。更新颜色的十六进制值，检查右侧的演示应用程序进行确认。
2. 将生成的代码直接复制（primary）并粘贴到Ionic项目中。把–ion-color-primary-contrast的值改为
   #ffffff，把–ion-color-primary-contrast-rgb的值改为255,255,255。
   CSS变量的修改参考下面的代码：
   src\theme\variables.scss

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming//** Ionic CSS Variables **/
:root {/** primary **/--ion-color-primary: #FF6A3C;--ion-color-primary-rgb: 255,106,60;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255,255,255;--ion-color-primary-shade: #e05d35;--ion-color-primary-tint: #ff7950;/** secondary **/--ion-color-secondary: #3dc2ff;--ion-color-secondary-rgb: 61, 194, 255;--ion-color-secondary-contrast: #ffffff;--ion-color-secondary-contrast-rgb: 255, 255, 255;--ion-color-secondary-shade: #36abe0;--ion-color-secondary-tint: #50c8ff;/** tertiary **/--ion-color-tertiary: #5260ff;--ion-color-tertiary-rgb: 82, 96, 255;--ion-color-tertiary-contrast: #ffffff;--ion-color-tertiary-contrast-rgb: 255, 255, 255;--ion-color-tertiary-shade: #4854e0;--ion-color-tertiary-tint: #6370ff;/** success **/--ion-color-success: #2dd36f;--ion-color-success-rgb: 45, 211, 111;--ion-color-success-contrast: #ffffff;--ion-color-success-contrast-rgb: 255, 255, 255;--ion-color-success-shade: #28ba62;--ion-color-success-tint: #42d77d;/** warning **/--ion-color-warning: #ffc409;--ion-color-warning-rgb: 255, 196, 9;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0ac08;--ion-color-warning-tint: #ffca22;/** danger **/--ion-color-danger: #eb445a;--ion-color-danger-rgb: 235, 68, 90;--ion-color-danger-contrast: #ffffff;--ion-color-danger-contrast-rgb: 255, 255, 255;--ion-color-danger-shade: #cf3c4f;--ion-color-danger-tint: #ed576b;/** dark **/--ion-color-dark: #222428;--ion-color-dark-rgb: 34, 36, 40;--ion-color-dark-contrast: #ffffff;--ion-color-dark-contrast-rgb: 255, 255, 255;--ion-color-dark-shade: #1e2023;--ion-color-dark-tint: #383a3e;/** medium **/--ion-color-medium: #92949c;--ion-color-medium-rgb: 146, 148, 156;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255, 255, 255;--ion-color-medium-shade: #808289;--ion-color-medium-tint: #9d9fa6;/** light **/--ion-color-light: #f4f5f8;--ion-color-light-rgb: 244, 245, 248;--ion-color-light-contrast: #000000;--ion-color-light-contrast-rgb: 0, 0, 0;--ion-color-light-shade: #d7d8da;--ion-color-light-tint: #f5f6f9;
}@media (prefers-color-scheme: dark) {/** Dark Colors* -------------------------------------------*/body {--ion-color-primary: #428cff;--ion-color-primary-rgb: 66,140,255;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255,255,255;--ion-color-primary-shade: #3a7be0;--ion-color-primary-tint: #5598ff;--ion-color-secondary: #50c8ff;--ion-color-secondary-rgb: 80,200,255;--ion-color-secondary-contrast: #ffffff;--ion-color-secondary-contrast-rgb: 255,255,255;--ion-color-secondary-shade: #46b0e0;--ion-color-secondary-tint: #62ceff;--ion-color-tertiary: #6a64ff;--ion-color-tertiary-rgb: 106,100,255;--ion-color-tertiary-contrast: #ffffff;--ion-color-tertiary-contrast-rgb: 255,255,255;--ion-color-tertiary-shade: #5d58e0;--ion-color-tertiary-tint: #7974ff;--ion-color-success: #2fdf75;--ion-color-success-rgb: 47,223,117;--ion-color-success-contrast: #000000;--ion-color-success-contrast-rgb: 0,0,0;--ion-color-success-shade: #29c467;--ion-color-success-tint: #44e283;--ion-color-warning: #ffd534;--ion-color-warning-rgb: 255,213,52;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0,0,0;--ion-color-warning-shade: #e0bb2e;--ion-color-warning-tint: #ffd948;--ion-color-danger: #ff4961;--ion-color-danger-rgb: 255,73,97;--ion-color-danger-contrast: #ffffff;--ion-color-danger-contrast-rgb: 255,255,255;--ion-color-danger-shade: #e04055;--ion-color-danger-tint: #ff5b71;--ion-color-dark: #f4f5f8;--ion-color-dark-rgb: 244,245,248;--ion-color-dark-contrast: #000000;--ion-color-dark-contrast-rgb: 0,0,0;--ion-color-dark-shade: #d7d8da;--ion-color-dark-tint: #f5f6f9;--ion-color-medium: #989aa2;--ion-color-medium-rgb: 152,154,162;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0,0,0;--ion-color-medium-shade: #86888f;--ion-color-medium-tint: #a2a4ab;--ion-color-light: #222428;--ion-color-light-rgb: 34,36,40;--ion-color-light-contrast: #ffffff;--ion-color-light-contrast-rgb: 255,255,255;--ion-color-light-shade: #1e2023;--ion-color-light-tint: #383a3e;}/** iOS Dark Theme* -------------------------------------------*/.ios body {--ion-background-color: #000000;--ion-background-color-rgb: 0,0,0;--ion-text-color: #ffffff;--ion-text-color-rgb: 255,255,255;--ion-color-step-50: #0d0d0d;--ion-color-step-100: #1a1a1a;--ion-color-step-150: #262626;--ion-color-step-200: #333333;--ion-color-step-250: #404040;--ion-color-step-300: #4d4d4d;--ion-color-step-350: #595959;--ion-color-step-400: #666666;--ion-color-step-450: #737373;--ion-color-step-500: #808080;--ion-color-step-550: #8c8c8c;--ion-color-step-600: #999999;--ion-color-step-650: #a6a6a6;--ion-color-step-700: #b3b3b3;--ion-color-step-750: #bfbfbf;--ion-color-step-800: #cccccc;--ion-color-step-850: #d9d9d9;--ion-color-step-900: #e6e6e6;--ion-color-step-950: #f2f2f2;--ion-toolbar-background: #0d0d0d;--ion-item-background: #000000;--ion-card-background: #1c1c1d;}/** Material Design Dark Theme* -------------------------------------------*/.md body {--ion-background-color: #121212;--ion-background-color-rgb: 18,18,18;--ion-text-color: #ffffff;--ion-text-color-rgb: 255,255,255;--ion-border-color: #222222;--ion-color-step-50: #1e1e1e;--ion-color-step-100: #2a2a2a;--ion-color-step-150: #363636;--ion-color-step-200: #414141;--ion-color-step-250: #4d4d4d;--ion-color-step-300: #595959;--ion-color-step-350: #656565;--ion-color-step-400: #717171;--ion-color-step-450: #7d7d7d;--ion-color-step-500: #898989;--ion-color-step-550: #949494;--ion-color-step-600: #a0a0a0;--ion-color-step-650: #acacac;--ion-color-step-700: #b8b8b8;--ion-color-step-750: #c4c4c4;--ion-color-step-800: #d0d0d0;--ion-color-step-850: #dbdbdb;--ion-color-step-900: #e7e7e7;--ion-color-step-950: #f3f3f3;--ion-item-background: #1e1e1e;--ion-toolbar-background: #1f1f1f;--ion-tab-bar-background: #1f1f1f;--ion-card-background: #1e1e1e;}
}

3. 左侧菜单

3.1 显示用户信息

从本地存储中获取之前保存过的用户基本信息，显示店铺名和手机号。请修改下面的代码，使用插值表达式{{}}
展示相关数据。界面参考下面的代码：
src\app\app.component.html

<ion-app><ion-split-pane contentId="main-content"><ion-menu contentId="main-content" type="overlay"><ion-content><ion-list><ion-item color="medium"><ion-label><ion-text><h2>{{username}}</h2></ion-text><p>{{phone}}</p></ion-label><ion-badge slot="end" color="primary">会员版</ion-badge></ion-item></ion-list>

高级版还是会员版自己看
src\app\app.component.ts

  initializeApp() {this.platform.ready().then(() => {this.statusBar.styleDefault();this.splashScreen.hide();});const user = this.localStorageService.get('User', null);if (user != null){this.username = '****';this.phone = user.phone;}}

****为默认名字

3.2 实现左侧菜单的界面

3.2.1 在构造函数中修改pages的初始化代码
在组件类中修改appPages数组，数组成员中添加icon属性，用来表示图标的名字
src\app\app.component.ts

  public appPages = [{ title: '开店论坛', url: '/home', icon: 'chatbox' },{ title: '手机橱窗', url: '/home', icon: 'create' },{ title: '邀请有礼', url: '/home', icon: 'git-merge' },{ title: '资金账户', url: '/home', icon: 'cash' },{ title: '反馈建议', url: '/home', icon: 'cash' },{ title: '帮助中心', url: '/home', icon: 'cash' },];

3.2.2 使用ngFor显示数组属性
以下代码可以从原有的AppComponent中获得，无需调整。
src\app\app.component.html

        <ion-list id="labels-list"><ion-menu-toggle auto-hide="false" *ngFor="let p of appPages"><ion-item [routerDirection]="'root'" [routerLink]="[p.url]"><ion-icon slot="start" [name]="p.icon"></ion-icon><ion-label>{{p.title}}</ion-label></ion-item></ion-menu-toggle></ion-list>

3.3 进入店铺（系统）设置

点击左下角的设置按钮，页面跳转到系统设置页。参考之前的任务使用样式表设置按钮的位置，固定在界面的
左下角。
src\app\app.component.html

<ion-menu-toggle auto-hide="false"><ion-button color="" fill="clear" href="setting"><ion-icon slot="start" name='settings'></ion-icon>设置</ion-button></ion-menu-toggle>

3.4 禁用菜单

有些页面是不能带菜单的，例如登录页、注册页等，但目前所有的页面都是带了菜单。要限制用户使用菜单，
首先工具栏上面不放ion-menu-button。但这么做还不够，因为用户可以通过向右滑动的操作，显示出菜单。
可以通过MenuController的enable方法禁用菜单。在组件类的构造函数中依赖注入MenuController，添加下面两个方法
src\app\pages\passport\basepage.ts

import { MenuController } from '@ionic/angular';export class BasePage {// 基类 控制左侧菜单在有的页面不出来constructor(public menuController: MenuController) {}ionViewWillEnter() {this.menuController.enable(false);}ionViewDidLeave() {this.menuController.enable(true);}
}

BasePage名字自己起，后面哪个页面需要控制菜单，再继承这个类

4. 首页

在ion-toolbar元素中设置颜色，并添加以ion-buttons子元素。
src\pages\home\home.html

<ion-header><ion-toolbar color="primary"><ion-buttons slot="start"><ion-menu-button></ion-menu-button></ion-buttons><ion-title>首页</ion-title><ion-buttons slot="end"><ion-button><ion-icon slot="icon-only" name="calendar"></ion-icon></ion-button><ion-button><ion-icon slot="icon-only" name="notifications"></ion-icon></ion-button></ion-buttons></ion-toolbar>
</ion-header>

4.1 展示销售统计数据

• 在home组件类中，添加一个类型为数组的属性（sales），数组中的成员是个对象（含title、content、previous、current）。添加sale.service，在服务中添加getSales方法，随机生成6个数字，分别表示昨天、今天、7天、去年同期7天、本月和去年同期月份的销售数据。根据需求使用对应的颜色和图标表示数据的变化。
• 差额的值大于0，应用.greater样式。差额的值小于等于0，应用.less-equal样式。
• 请调整相关文字字体（font-size）的大小。

1. 使用grid布局，1行3列，并使用ngFor。
src\app\pages\home\home.page.html

<ion-grid><ion-row><ion-col *ngFor="let s of sales"><h6>{{s.title}}</h6><h4><span>{{564.678 | number:'1.2-2'}}元</span></h4><p>{{s.content}}<span [ngClass]="{'less-equal':s.current - s.previous <= 0,'greater':s.current - s.previous > 0}">{{s.current - s.previous}}</span>&nbsp;<ng-container [ngSwitch]="minus(s.current, s.previous)"><ion-icon name="arrow-up" color="danger" *ngSwitchCase="1"></ion-icon><ion-icon name="arrow-forward" color="success" *ngSwitchCase="0"></ion-icon><ion-icon name="arrow-down" color="success" *ngSwitchCase="-1"></ion-icon></ng-container></p></ion-col></ion-row></ion-grid>

2. 在样式中使用success和danger这两种颜色。
虽然在工程中可以找到success和danger这两种颜色的16进
制或者rgb，但是下面这种写法不建议使用，虽然也可以达到要求。后期开发中如果修改了success或者
danger的颜色，还需要回来修改样式，可维护性较差。

 .less-equal{color: var(--ion-color-success, #10dc60);}.greater{color: var(--ion-color-danger, #f04141);}

3. 相应ts
使用三个方向箭头图标（arrow-up、arrow-forward、arrow-down）表示数据的变化。可以使用多种方式实现，例如，在组件类中添加一个方法用于拼接出图标的名称。也可以使用之前任务中用到的ngIf。为了学习ngSwitch指令的用法，这里用NgSwitch、NgSwitchCase 和 NgSwitchDefault实现，当然解决起来麻烦了点。在组件类中添加minus方法。
src\app\pages\home\home.page.ts

  minus(current: number, previous: number): number {const result = current - previous;if (result > 0) {return 1;} else if (result === 0) {return 0;} else {return -1;}}

  /*** 获取随机数字*/public getRandomNumber(): number {return Math.floor(Math.random() * 1000);}/*** 生成数据*/public getSales() {for (let i = 0; i < 3; i++) {const sale = {title: this.titles[i],content: this.contents[i],previous: this.getRandomNumber(),current: this.getRandomNumber(),};this.sales.push(sale);}}

4.2 添加常用功能的快捷图标

4.2.1 添加相关的样式。

src\app\pages\home\home.scss

.less-equal{color: var(--ion-color-success, #10dc60);}.greater{color: var(--ion-color-danger, #f04141);}.grid {border-right: 1px solid #ececec;border-bottom: 1px solid #ececec;.grid-item {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 25vw;border-top: 1px solid #ececec;border-left: 1px solid #ececec;div {margin-top: 9px;text-align: center;}}}

4.2.2 调整页面

src\app\pages\home\home.page.html

  <ion-grid><ion-row class="grid"><ion-col size="3" *ngFor="let item of list"><div class="grid-item" *ngIf="!item.disable" routerLink={{item.url}}><ion-icon size="large" name="{{item.icon}}"></ion-icon><img src="./assets/img/{{item.image}}.png" alt="图片飞走了" style="transform:scale(0.6) "><div>{{item.text}}</div></div></ion-col></ion-row></ion-grid>

src\app\pages\home\home.page.ts

public getList() {this.list =[{ text: '新增商品', image: 'add_salse', url: '/product/product/add', disable: false },{ text: '新增会员', image: 'add_user', url: '/home', disable: false },{ text: '收账记录', image: 'sales_account', url: '/home', disable: false },{ text: '支出管理', image: 'a_note', url: '/home', disable: false },{ text: '商品管理', image: 'sales_management', url: '/product/product/list', disable: false },{ text: '会员管理', image: 'user_management', url: '/home', disable: false },{ text: '查询销售', image: 'shop_management', url: '/home', disable: false },{ text: '商品分类', image: 'analysis', url: '/product/category/list', disable: false },{ text: '供应商管理', image: 'gongying_more', url: '/home', disable: false },{ text: '挂单', image: 'guandan_more', url: '/home', disable: false },{ text: '高级功能', image: 'image_addsales', url: '/home', disable: false },];}

5. 部分主要代码展示

ts:随机数版

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-home',templateUrl: './home.page.html',styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {// 销售数据sales = [];titles = ['今天', '7天', '本月'];contents = ['比昨日', '比同期', '比同期'];// 列表数据list = [];constructor() {// 初始化数据this.getSales();// 初始化列表this.getList();}ngOnInit() {}/*** 生成数据*/public getSales() {for (let i = 0; i < 3; i++) {const sale = {title: this.titles[i],content: this.contents[i],previous: this.getRandomNumber(),current: this.getRandomNumber(),};this.sales.push(sale);}}/*** 获取功能列表*/public getList() {this.list =[{ text: '新增商品', image: 'add_salse', url: '/product/product/add', disable: false },{ text: '新增会员', image: 'add_user', url: '/home', disable: false },{ text: '收账记录', image: 'sales_account', url: '/home', disable: false },{ text: '支出管理', image: 'a_note', url: '/home', disable: false },{ text: '商品管理', image: 'sales_management', url: '/product/product/list', disable: false },{ text: '会员管理', image: 'user_management', url: '/home', disable: false },{ text: '查询销售', image: 'shop_management', url: '/home', disable: false },{ text: '商品分类', image: 'analysis', url: '/product/category/list', disable: false },{ text: '供应商管理', image: 'gongying_more', url: '/home', disable: false },{ text: '挂单', image: 'guandan_more', url: '/home', disable: false },{ text: '高级功能', image: 'image_addsales', url: '/home', disable: false },];}/*** 获取随机数字*/public getRandomNumber(): number {return Math.floor(Math.random() * 1000);}/***** @param {number} current 当前销售数据* @param {number} previous 前期销售数据* @returns {number} 1 增长 0 持平 -1 减少* @memberof HomePage*/minus(current: number, previous: number): number {const result = current - previous;if (result > 0) {return 1;} else if (result === 0) {return 0;} else {return -1;}}}

ts:真实数据版 换几个函数

 constructor(private sale: SaleService,private menuController: MenuController) {this.sales = [{title : '今日', content : '比昨日', previous : this.sale.getSales(), current : this.sale.getSales()},{title : '七日', content : '比同期', previous : this.sale.getSales(), current : this.sale.getSales()},{title : '本月', content : '比同期', previous : this.sale.getSales(), current : this.sale.getSales()}];}

html

<ion-header><ion-toolbar color="primary"><ion-buttons slot="start"><ion-menu-button></ion-menu-button></ion-buttons><ion-title>首页</ion-title><ion-buttons slot="end"><ion-button><ion-icon slot="icon-only" name="calendar"></ion-icon></ion-button><ion-button><ion-icon slot="icon-only" name="notifications"></ion-icon></ion-button></ion-buttons></ion-toolbar>
</ion-header><ion-content><img src="./assets/img/androidbanner.png" alt="图片飞走了"><ion-grid><ion-row><ion-col *ngFor="let s of sales"><h6>{{s.title}}</h6><h4><span>{{564.678 | number:'1.2-2'}}元</span></h4><p>{{s.content}}<span [ngClass]="{'less-equal':s.current - s.previous <= 0,'greater':s.current - s.previous > 0}">{{s.current - s.previous}}</span>&nbsp;<ng-container [ngSwitch]="minus(s.current, s.previous)"><ion-icon name="arrow-up" color="danger" *ngSwitchCase="1"></ion-icon><ion-icon name="arrow-forward" color="success" *ngSwitchCase="0"></ion-icon><ion-icon name="arrow-down" color="success" *ngSwitchCase="-1"></ion-icon></ng-container></p></ion-col></ion-row></ion-grid><ion-grid><ion-row class="grid"><ion-col size="3" *ngFor="let item of list"><div class="grid-item" *ngIf="!item.disable" routerLink={{item.url}}><ion-icon size="large" name="{{item.icon}}"></ion-icon><img src="./assets/img/{{item.image}}.png" alt="图片飞走了" style="transform:scale(0.6) "><div>{{item.text}}</div></div></ion-col></ion-row></ion-grid><XXX-copyright [bottom]="'20px'"></XXX-copyright>
</ion-content>

XXX-copyright 自己Logo 好像有带你问题
要再模块里同时导入Share模块，才能显示Logo,

6. 产品展示