美团外卖-点击加菜和减菜加入购物车

1.1、点击加菜和减菜组件加入购物车

1. 使用Consume接收所有购物车数据
   2.加菜减菜之后提醒父组件更新Provide数据
   3.父组件更新Provide数据
   4.根据数量显示减菜按钮和数量元素

• 1.使用Consume接收所有购物车数据

// 加菜和减菜按钮组件
@Component
struct MTAddCut {
  @Consume
  cartList:FoodItem[]
  item:Partial<FoodItem> = {}
  // 获取要显示的数量
  getContent():number {
    // 一开始cartList为空，所以为undefined，所以要加?
    return this.cartList.find(obj => obj.id === this.item.id )?.count || 0
  }
  build() {
    Row({space:8}) {
      Row() {
        Image($r('app.media.ic_screenshot_line'))
          .width(10)
          .aspectRatio(1)
      }
      .width(16)
      .aspectRatio(1)
      .justifyContent(FlexAlign.Center)
      .backgroundColor('#fff')
      .borderRadius(4)
      .border({
        width:0.5,
        color:'#f8c74e'
      })
      .onClick(() => {
        addCutCart('cut', this.item as FoodItem)
      })
      .visibility(this.getContent() ? Visibility.Visible : Visibility.Hidden)
      // this.getContent表示函数，this.getContent()表示调用函数的返回结果
      Text(this.getContent().toString())
        .fontSize(14)
        .visibility(this.getContent() ? Visibility.Visible : Visibility.Hidden)
      Row() {
        Image($r('app.media.ic_public_add_filled'))
          .width(10)
          .aspectRatio(1)
      }
      .width(16)
      .aspectRatio(1)
      .justifyContent(FlexAlign.Center)
      .backgroundColor('#f8c74e')
      .borderRadius(4)
      .onClick(() => {
        addCutCart('add', this.item as FoodItem)
      })
    }
  }
}

• 2.加菜减菜之后提醒父组件更新Provide数据
  AppStorage.Set<string>("user_cart", JSON.stringify(list)) 提示父组件更新
  }

// 提供加减购物车的方法
// 既可以加菜又可以减菜
const addCutCart = (type:'add' | 'cut', item:FoodItem) => {
  const list = getCarts()
  const f = list.find(f => f.id === item.id)
  // AlertDialog.show({message:JSON.stringify(f || {} as FoodItem)})
  if (type === 'add') { // 加菜
    if (f) {
      // 找到了
      f.count++
    } else {
      item.count = 1
      list.unshift(item) // unshift在数组头部追加，push在数组尾部追加
    }
  } else { // 减菜
    if (f && f.count > 0) {
      f.count--
      if (f.count === 0) {
        const index = list.findIndex(ff => ff.id === item.id)
        // 移除菜品数据
        list.splice(index, 1)
      }
    }
  }
  // 不管list有没有发生了任何变化
  AppStorage.Set<string>("user_cart", JSON.stringify(list))
}

• 3.父组件更新Provide数据

父组件跟新cartList数据
 @StorageLink("user_cart")
  @Watch("updateCartJSON") // watch必须写在其他修饰符下面-watch第一次不生效
  cartJSON:string = ""
  @Provide
  cartList:FoodItem[] = []
  updateCartJSON() {
    // 此时更新我们的购物车数据
    this.cartList = getCarts() // 反序列化将字符串转成对象
  }

struct MeiTuan {
  @State showCart:boolean = false
  @State list:Category[] = [] // 生命数据结构
  @StorageLink("user_cart")
  @Watch("updateCartJSON") // watch必须写在其他修饰符下面-watch第一次不生效
  cartJSON:string = ""
  @Provide
  cartList:FoodItem[] = []
  updateCartJSON() {
    // 此时更新我们的购物车数据
    this.cartList = getCarts() // 反序列化将字符串转成对象
  }
  // 获取数据，将数据动态渲染
  aboutToAppear() { // 在组件初始化之后，在build之前去执行，只会执行一次
    // 获取美团餐饮数据
    this.getMTData()
    this.updateCartJSON()
  }
}

• 4.根据数量显示减菜按钮和数量元素

 // 获取要显示的数量
  getContent():number {
    // 一开始cartList为空，所以为undefined，所以要加?
    return this.cartList.find(obj => obj.id === this.item.id )?.count || 0
  }
 Text(this.getContent().toString())
        .fontSize(14)
        .visibility(this.getContent() ? Visibility.Visible : Visibility.Hidden)