Android 饿了么添加购物车动画饿了么获取购物车

转载

imking 2024-01-31 00:07:53

文章标签 Android 饿了么添加购物车动画 ico 字符串数据 文章分类 Android 移动开发

效果图：

Android 饿了么添加购物车动画饿了么获取购物车_字符串

食物列表添加

本方法使用的是父组件作为中间组件进行传值

<i class="iconfont iconjian" @click.stop="foodSubstract(menu, f, m)" v-show="menu.foodNum"></i>
<span v-show="menu.foodNum">{{menu.foodNum}}</span>
<i class="iconfont iconadd1" @click.stop="foodAdd(menu, f, m)"></i>
// 添加食物
foodAdd (menu, cIndex, fIndex) {
  this.foodCates[cIndex].cateNum++
  this.foodList[cIndex].menuItems[fIndex].foodNum++
  let foodItem = {
    // 传下标，方便后面反向操作快速定位
    cIndex: cIndex,
    fIndex: fIndex,
    foodName: menu.foodName,
    newPrice: menu.foodPrice,
    oldPrice: menu.foodOldPrice,
    foodNum: 1
  }
  this.$emit('addFoodItem', foodItem)
}

// 父组件购物车对象
 curOderList: {
  orderList: [],
  totalNum: 0,
  totalPrice: 0,
  totalOldPrice: 0
}

// 父组件接收并添加入购物车
foodItemAdd (food) {
  if(!this.curOderList.orderList.find(order => order.foodName == food.foodName)) {
    this.curOderList.orderList.push(food)
  }else {
    for(let i = 0; i < this.curOderList.orderList.length; i++) {
      if(this.curOderList.orderList[i].foodName == food.foodName) {
        this.curOderList.orderList[i].foodNum ++
      }
    }
  }
  this.curOderList.totalNum++
  this.curOderList.totalPrice += food.newPrice
  this.curOderList.totalOldPrice += food.oldPrice
}

购物车添加

// 父组件反向操作食物组件的状态数据
itemSubstract: '',
itemAdd: ''
// 父组件通过props将curOderList对象传给子组件
// 购物车子组件渲染部分略过
// 购物车反向操作食物列表
<i class="iconfont iconjian" @click="substractItem(food)"></i>
{{food.foodNum}}
<i class="iconfont iconadd1" @click="addItem(food)"></i>
// 通过子传父的方式，告知父组件状态更新
addItem (food) {
  this.$emit('addItem', food)
}
// 父组件更新函数
addItem (food) {
  /*
	itemAdd是将要反向传给食物列表组件的数据，此处使用字符串拼接（一是为了方便一次性传值，因为vue的diff算法是要数据发生改变才会更新，但是如果写成对象而不是字符串来传值的话，watch就无法检测到itemAdd的变化，直接用字符串也会出现两次都是传同一个字符的情况，所以后面加上当前的Date.now()时间戳就可以很好的解决这个问题），最后再食物列表组件通过watch来监视数据的变化进行相关更新
  */
  this.itemAdd = `${food.cIndex}-${food.fIndex}-${Date.now()}`
  this.foodItemAdd(food)
}
// 食物列表组件
// watch里监视
itemSubstract (newVal) {
  if(newVal) {
    this.reverseFoodSubstract(newVal)
  }
},

itemAdd (newVal) {
  if(newVal) {
    this.reverseFoodAdd(newVal)
  }
}

// 更新函数和字符串拆分函数
// 反向单个增加食物
reverseFoodAdd (key) {
  /*
 	一开始直接传对应的index，就是为了此处能够快速定位到foodCates和foodList，而无需重新遍历，以提高性能
  */
  this.foodCates[this.getStrKey(key, 0)].cateNum++
  this.foodList[this.getStrKey(key, 0)].menuItems[this.getStrKey(key, 1)].foodNum++
},
// 获取字符串关键字
getStrKey (str, i) {
  return str.split('-')[i]
}