10. 数据模型——记录项

10.1 数据模型

10.2 记录项的类型操作模型及接口

10.2.1 操作模型

把食物或者运动的分类抽取出来

/**
 * 记录项类型
 */
export default class ItemCategory{
  /**
   * 类型id
   */
  id:number
  /**
   * 类型名称
   */
  name:ResourceStr

  constructor(id:number,name:ResourceStr) {
    this.id=id
    this.name=name
  }
}

10.2.2 接口

import ItemCategory from '../viewmodel/ItemCategory'

/**
 * 食物类型的枚举因为食物表的类型基本上是固定的没赋值情况下数组角标一致
 * 获取某一种食物类型只需要拿着枚举项的值作为角标就能取得数组对应的类型
 */
enum FoodCategoryEnum{
  /**
   * 主食
   */
  STAPLE,
  /**
   * 蔬果
   */
  FRUIT,
  /**
   * 肉蛋奶
   */
  MEAT,
  /**
   * 坚果
   */
  NUT,
  /**
   * 其它
   */
  OTHER,
}

/**
 * 食物类型数组
 */
let FoodCategories = [
  new ItemCategory(0, $r('app.string.staple')),
  new ItemCategory(1, $r('app.string.fruit')),
  new ItemCategory(2, $r('app.string.meat')),
  new ItemCategory(3, $r('app.string.nut')),
  new ItemCategory(4, $r('app.string.other_type')),
]

/**
 * 运动类型枚举
 */
enum WorkoutCategoryEnum {
  /**
   * 走路
   */
  WALKING,
  /**
   * 跑步
   */
  RUNNING,
  /**
   * 骑行
   */
  RIDING,
  /**
   * 跳操
   */
  AEROBICS,
  /**
   * 游泳
   */
  SWIMMING,
  /**
   * 打球
   */
  BALLGAME,
  /**
   * 力量训练
   */
  STRENGTH
}

/**
 * 运动类型数组
 */
let WorkoutCategories = [
  new ItemCategory(0, $r('app.string.walking_type')),
  new ItemCategory(1, $r('app.string.running')),
  new ItemCategory(2, $r('app.string.riding')),
  new ItemCategory(3, $r('app.string.aerobics')),
  new ItemCategory(4, $r('app.string.swimming')),
  new ItemCategory(5, $r('app.string.ballgame')),
  new ItemCategory(6, $r('app.string.strength')),
]

export {FoodCategories , WorkoutCategories , FoodCategoryEnum, WorkoutCategoryEnum}

10.3 记录项的操作模型及接口

10.3.1 操作模型

把食物或者运动某一类的里面的属性抽取出来

/**
 * 饮食记录中的记录项，可以是食物或运动
 */
export default class RecordItem{
  /**
   * id
   */
  id:number
  /**
   * 名称
   */
  name:ResourceStr
  /**
   * 图片
   */
  image:ResourceStr
  /**
   * 分类id
   */
  categoryId:number
  /**
   * 包含的卡路里
   */
  calorie:number
  /**
   * 单位
   */
  unit:ResourceStr
  /**
   * 碳水含量，单位（克）
   */
  carbon:number
  /**
   * 蛋白质含量，单位（克）
   */
  protein:number
  /**
   * 脂肪含量，单位（克）
   */
  fat:number

  constructor(id: number, name: ResourceStr, image: ResourceStr,
              categoryId:number,unit:ResourceStr,calorie:number,
              carbon:number=0,protein:number=0,fat:number=0) {
    this.id=id
    this.name=name
    this.image=image
    this.categoryId=categoryId
    this.unit=unit
    this.calorie=calorie
    this.carbon=carbon
    this.protein=protein
    this.fat=fat
  }

}

10.3.2 接口

import RecordItem from '../viewmodel/RecordItem'
import ItemCategory from '../viewmodel/ItemCategory'
import { FoodCategories, FoodCategoryEnum, WorkoutCategories, WorkoutCategoryEnum } from './ItemCategoryModel'
import GroupInfo from '../viewmodel/GroupInfo'
// import GroupInfo from '../viewmodel/GroupInfo'
//填所对应枚举，那枚举角标去数组里面取直接取出对应类型
const foods: RecordItem[] = [
  new RecordItem(0, '米饭',$r('app.media.rice'),FoodCategoryEnum.STAPLE, '碗',  209, 46.6, 4.7, 0.5),
  new RecordItem(1, '馒头',$r('app.media.steamed_bun'),FoodCategoryEnum.STAPLE, '个',  114, 24.0, 3.6, 0.6),
  new RecordItem(2, '面包',$r('app.media.bun'),FoodCategoryEnum.STAPLE, '个',  188, 35.2, 5.0, 3.1),
  new RecordItem(3, '全麦吐司',$r('app.media.toast'),FoodCategoryEnum.STAPLE, '片',  91, 15.5, 4.4, 1.3),
  new RecordItem(4, '紫薯',$r('app.media.purple_potato'),FoodCategoryEnum.STAPLE, '个',  163, 42.0, 1.6, 0.4),
  new RecordItem(5, '煮玉米',$r('app.media.corn'),FoodCategoryEnum.STAPLE, '根',  111, 22.6, 4.0, 1.2),
  new RecordItem(6, '黄瓜',$r('app.media.cucumber'),FoodCategoryEnum.FRUIT, '根',  29, 5.3, 1.5, 0.4),
  new RecordItem(7, '蓝莓',$r('app.media.blueberry'),FoodCategoryEnum.FRUIT, '盒',  71, 18.1, 0.9, 0.4),
  new RecordItem(8, '草莓',$r('app.media.strawberry'),FoodCategoryEnum.FRUIT, '颗',  14, 3.1, 0.4, 0.1),
  new RecordItem(9, '火龙果',$r('app.media.pitaya'),FoodCategoryEnum.FRUIT, '个',  100, 24.6, 2.2, 0.5),
  new RecordItem(10, '奇异果',$r('app.media.kiwi'),FoodCategoryEnum.FRUIT, '个',  25, 8.4, 0.5, 0.3),
  new RecordItem(11, '煮鸡蛋',$r('app.media.egg'),FoodCategoryEnum.MEAT, '个',  74, 0.1, 6.2, 5.4),
  new RecordItem(12, '煮鸡胸肉',$r('app.media.chicken_breast'),FoodCategoryEnum.MEAT, '克',  1.15, 0.011, 0.236, 0.018),
  new RecordItem(13, '煮鸡腿肉',$r('app.media.chicken_leg'),FoodCategoryEnum.MEAT, '克',  1.87, 0.0, 0.243, 0.092),
  new RecordItem(14, '牛肉',$r('app.media.beef'),FoodCategoryEnum.MEAT, '克',  1.22, 0.0, 0.23, 0.033),
  new RecordItem(15, '鱼肉',$r("app.media.fish"),FoodCategoryEnum.MEAT, '克',  1.04, 0.0, 0.206, 0.024),
  new RecordItem(16, '牛奶',$r("app.media.milk"),FoodCategoryEnum.MEAT, '毫升',  0.66, 0.05, 0.03, 0.038),
  new RecordItem(17, '酸奶',$r("app.media.yogurt"),FoodCategoryEnum.MEAT, '毫升',  0.7, 0.10, 0.032, 0.019),
  new RecordItem(18, '核桃',$r("app.media.walnut"),FoodCategoryEnum.NUT, '颗',  42, 1.2, 1.0, 3.8),
  new RecordItem(19, '花生',$r("app.media.peanut"),FoodCategoryEnum.NUT, '克',  3.13, 0.13, 0.12, 0.254),
  new RecordItem(20, '腰果',$r("app.media.cashew"),FoodCategoryEnum.NUT, '克',  5.59, 0.416, 0.173, 0.367),
  new RecordItem(21, '无糖拿铁',$r("app.media.coffee"),FoodCategoryEnum.OTHER, '毫升',  0.43, 0.044, 0.028, 0.016),
  new RecordItem(22, '豆浆',$r("app.media.soybean_milk"),FoodCategoryEnum.OTHER, '毫升',  0.31, 0.012, 0.030, 0.016),
]

const workouts: RecordItem[] = [
  new RecordItem(10000, '散步',$r('app.media.ic_walk'), WorkoutCategoryEnum.WALKING, '小时', 111),
  new RecordItem(10001, '快走',$r('app.media.ic_walk'), WorkoutCategoryEnum.WALKING, '小时',  343),
  new RecordItem(10002, '慢跑',$r('app.media.ic_running'), WorkoutCategoryEnum.RUNNING, '小时',  472),
  new RecordItem(10003, '快跑',$r('app.media.ic_running'), WorkoutCategoryEnum.RUNNING, '小时',  652),
  new RecordItem(10004, '自行车',$r('app.media.ic_ridding'), WorkoutCategoryEnum.RIDING, '小时',  497),
  new RecordItem(10005, '动感单车',$r('app.media.ic_ridding'), WorkoutCategoryEnum.RIDING, '小时',  587),
  new RecordItem(10006, '瑜伽',$r('app.media.ic_aerobics'), WorkoutCategoryEnum.AEROBICS, '小时',  172),
  new RecordItem(10007, '健身操',$r('app.media.ic_aerobics'), WorkoutCategoryEnum.AEROBICS, '小时',  429),
  new RecordItem(10008, '游泳',$r('app.media.ic_swimming'), WorkoutCategoryEnum.SWIMMING, '小时',  472),
  new RecordItem(10009, '冲浪',$r('app.media.ic_swimming'), WorkoutCategoryEnum.SWIMMING, '小时',  429),
  new RecordItem(10010, '篮球',$r('app.media.ic_basketball'), WorkoutCategoryEnum.BALLGAME, '小时',  472),
  new RecordItem(10011, '足球',$r('app.media.ic_football'), WorkoutCategoryEnum.BALLGAME, '小时',  515),
  new RecordItem(10012, '排球',$r("app.media.ic_volleyball"), WorkoutCategoryEnum.BALLGAME, '小时',  403),
  new RecordItem(10013, '羽毛球',$r("app.media.ic_badminton"), WorkoutCategoryEnum.BALLGAME, '小时',  386),
  new RecordItem(10014, '乒乓球',$r("app.media.ic_table_tennis"), WorkoutCategoryEnum.BALLGAME, '小时',  257),
  new RecordItem(10015, '哑铃飞鸟',$r("app.media.ic_dumbbell"), WorkoutCategoryEnum.STRENGTH, '小时',  343),
  new RecordItem(10016, '哑铃卧推',$r("app.media.ic_dumbbell"), WorkoutCategoryEnum.STRENGTH, '小时',  429),
  new RecordItem(10017, '仰卧起坐',$r("app.media.ic_sit_up"), WorkoutCategoryEnum.STRENGTH, '小时',  515),
]

class ItemModel{

  getById(id: number, isFood: boolean = true){
    return isFood ? foods[id] : workouts[id - 10000]
  }
  //提供一个接口
   list(isFood: boolean = true): RecordItem[]{
     return isFood ? foods : workouts
   }

  listItemGroupByCategory(isFood: boolean = true){
    // 1.判断要处理的是食物还是运动
    let categories = isFood ? FoodCategories : WorkoutCategories
    let items = isFood ? foods: workouts
    // 2.创建空的分组
    let groups = categories.map(itemCategory => new GroupInfo(itemCategory, []))//map处理就是映射遍历前面数组中的每一个元素转成另一个元素
    // 3.遍历记录项列表，将食物添加到对应的分组
    items.forEach(item => groups[item.categoryId].items.push(item))//每项都有自己的类型枚举
    // 4.返回结果
    return groups
  }

}

let itemModel = new ItemModel()

export default itemModel as ItemModel

10.4 记录项内部数据模型

10.4.1 查询所有接口（首先知道是食物列表还是运动列表）

如果是true就返回定义好的食物数组否则返回运动数组

list(isFood: boolean = true): RecordItem[]{
     return isFood ? foods : workouts
   }

10.4.2 查询特定类型的食物或运动接口(按组查询)

 listItemGroupByCategory(isFood: boolean = true){
    // 1.判断要处理的是食物还是运动
    let categories = isFood ? FoodCategories : WorkoutCategories
    let items = isFood ? foods: workouts
    // 2.创建空的分组
    let groups = categories.map(itemCategory => new GroupInfo(itemCategory, []))//map处理就是映射遍历前面数组中的每一个元素转成另一个元素
    // 3.遍历记录项列表，将食物添加到对应的分组
    items.forEach(item => groups[item.categoryId].items.push(item))//每项都有自己的类型枚举
    // 4.返回结果
    return groups
  }

 

10.5 将tabBar变为动态的

首先需要有这样一个数组遍历数组生成一个个的tabBar这个数组中不仅包含tarBar信息还包含TabContent信息所以需要用对象封装

data =[
  { type : new ItemCategory(0,'主食'),items:[{},{},{}] }]

  我们需要这样的接口我们需要把它定义成类成为数据模型

export default class GroupInfo {
  type:ItemCategory
  items: RecordItem[]

  constructor(type:ItemCategory , items: RecordItem[]) {
    this.type = type
    this.items = items
  }
}//描述数组元素

 

10. 6 将Panel变为动态的

在我们点击点击那个时间的时候可以将整个Item传递给父组件然后再有父组件传递给ItemCard儿子

 .onClick(()=>this.showPanel(item))//传给父组件父组件再传给ItemCard儿子

在ItemIndex需要定义一个状态变量来记录

  @State item:RecordItem=null
  onPanelShow(item:RecordItem){
       this.amount=1
    this.value=''
      this.showPanel=true
    this.item=item
  }

在记录项卡片出如何没有传值的话会报错，所以需要增加一个判断（传对象需要使用$）

          if(this.item) {
            ItemCard({ amount: this.amount, item: $item })
          }

在ItemCard需要定义一个link

@Link item:RecordItem

在营养素这一栏运动没有碳水，蛋白质，脂肪这个三项，我们可以让食物数组，和运动数组的Id不一样借用Id来判断是食物还是运动

   if(this.item.id<10000) {
           this.NutrientInfo('碳水(克)', this.item.carbon)
           this.NutrientInfo('蛋白质(克)', this.item.protein)
           this.NutrientInfo('脂肪(克)', this.item.fat)
         }

10.7 遇到问题：

10.7.1 预览的时候食物的信息并还没有出现

在Tabs显示内容的时候没有把判断是食物还是运动传进去发现还是不行它还是显示未定义

ForEach(items,(item:RecordItem)在foreach循环的时候应该传之前定义好的食物数组

 TabContent(){
        this.TabContentBuilder(ItemModel.list(this.isFood))
      }

10.7.2 运动到导航栏不显示

运动类型太多了放不下来所以变成省略号Tabs属性中BarMode可以控制分布 

10.8 运行效果