外卖webAPP(三)

一，搭建商品详情信息页面

注；新建shop路由组件，然后点击点餐的路由子组件（shopgoods），点击评价的路由子组件（shopratings），点击商家的路由子组件（shopInfo），顶部有个固定组件（shopheader）

在views中新建shop组件，再建shopgoods子组件，shopratings, shopInfo子组件，然后在compoents中新建shopheader组件

配置路由组件

import Shop from '@/views/Shop/shop.vue'
import shopGoods from '@/views/Shop/shopGoods'
import shopInfo from '@/views/Shop/shopInfo'
import shopRatings from '@/views/Shop/shopRatings'


 {
    path: '/shop',
    component: Shop,
    children: [
      {
        path: '/shop/shopgoods',
        component: shopGoods
      },
      {
        path: '/shop/shopinfo',
        component: shopInfo
      },
      {
        path: '/shop/shopratings',
        component: shopRatings
      },
      {
        path:'',
        redirect: '/shop/goods'
      }
    ]
  }

在shop组件中

<template>
  <div>
    <ShopHeader></ShopHeader>

    <div class="item">
      <div class="tab-item">
        <router-link to="/shop/goods"> 点餐</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/shop/shopratings"> 评价</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/shop/shopinfo"> 商家</router-link>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import ShopHeader from '@/components/ShopHeader'
export default {
  name: 'Shop',
  data() {
    return {}
  },
  components: {
    ShopHeader
  }
}
</script>

<style scoped lang="stylus"></style>

1.1， mockjs模拟请求操作，组件获取数据

创建mock文件夹，创建data.json, mockServer.js(提供服务，模拟接口)    安装mockjs  npm  i  mockjs

mockServer.js 文件内容

/*
使用mockjs提供mock数据接口
 */
import Mock from 'mockjs'
import data from './data.json'

// 返回goods的接口
Mock.mock('/goods', { code: 0, data: data.goods })
// 返回ratings的接口
Mock.mock('/ratings', { code: 0, data: data.ratings })
// 返回info的接口
Mock.mock('/info', { code: 0, data: data.info })

// export default ???  不需要向外暴露任何数据, 只需要保存能执行即可

在入口文件main.js导入mock,   

import './mock/MockServer.js' // 加载mockServer即可

在 api文件夹中新建mockAjax.js, 二次封装关于mock的ajax

// 对axios的二次封装
import axios from 'axios'
const service = axios.create({
  
  timeout: 4000
})

// 请求拦截器
service.interceptors.request.use(config => {
  return config
})

// 响应拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    alert('请求出错' + error.message || '未知错误')
    //以后不允许用户继续处理： 中断promise链
    return new Promise(() => {}) //返回pending状态的promise 中断
  }
)

export default service

在api---index.js中，使用mock的接口去封装接口函数

import mockAjax from './mockAjax'

 * 获取商家信息
 */
export const reqShopInfo = () => mockAjax.get('/info')

/**
 * 获取商家评价数组
 */
export const reqShopRatings = () => mockAjax.get('/ratings')

/**
 * 获取商家商品数组
 */
export const reqShopGoods = () => mockAjax.get('/goods')

在vuex中发送请求，获取数据

  // 异步获取商家信息
  async getShopInfo({ commit }) {
    const result = await reqShopInfo()
    if (result.code === 0) {
      const info = result.data
      commit('RECEIVE_INFO', info)
    }
  },

  // 异步获取商家评价列表
  async getShopRatings({ commit }) {
    const result = await reqShopRatings()
    if (result.code === 0) {
      const ratings = result.data
      commit('RECEIVE_RATINGS', ratings)
    }
  },

  // 异步获取商家商品列表
  async getShopGoods({ commit }) {
    const result = await reqShopGoods()
    if (result.code === 0) {
      const goods = result.data
      commit('RECEIVE_GOODS', goods)
    }
  }

  RECEIVE_INFO(state, info) {
    state.info = info
  },

  RECEIVE_RATINGS(state, ratings) {
    state.ratings = ratings
  },

  RECEIVE_GOODS(state, goods) {
    state.goods = goods
  }

  goods: [], // 商品列表
  ratings: [], // 商家评价列表
  info: {}, // 商家信息

在shop组件中dispatch到vuex,

  mounted() {
    this.$store.dispatch('getShopInfo')
  }

1.2, 搭建shopHeader组件页面

首先dispatch到vuex中，获取info商家的数据

 mounted() {
    this.$store.dispatch('getShopInfo')
  },

 computed: {
    ...mapState(['info']),

顶部左侧的返回按钮，需要路由返回

  <div class="shop-header">
    <nav class="shop-nav" :style="{backgroundImage: `url(${info.bgImg})`}">
      <a class="back" @click="$router.back()">
        <i class="iconfont icon-arrow_left"></i>
      </a>

填充数据，关于a.b.c三级表达式获取不到值的问题

将颜色类名动态获取效果

 data() {
    return {
      supportClasses: ['activity-green', 'activity-red', 'activity-orange']
    }

报错提示

此时有两种解决方式

第一种：在他们的祖先元素，做个v-if判断即可

<div class="shop-header-discounts" v-if="info.supports" >
      <div class="discounts-left">
        <div class="activity" :class="supportClasses[info.supports[0].type]">
          <span class="content-tag">
            <span class="mini-tag">{{info.supports[0].name}}</span>
          </span>
          <span class="activity-content ellipsis">{{info.supports[0].content}}</span>
        </div>

 第二种，在vuex的getters中直接定义supports数据

const getters = {
  info: state => state.info || {},
  supports: state => state.info.supports || []
}

在shopHeader中获取数据

  computed: {
    ...mapState(['info']),
    ...mapGetters(['supports']),
    // 对于a.b.c三级表达式未取到值的做法
    supportOne() {
      return this.supports[0] ? this.supports[0] : {}
    }
  }

<div class="shop-header-discounts">
      <div class="discounts-left">
        <div class="activity" :class="supportClasses[supportOne.type]">
          <span class="content-tag">
            <span class="mini-tag">{{ supportOne.name }}</span>
          </span>
          <span class="activity-content ellipsis">{{
            supportOne.content
          }}</span>
        </div>

一共有两个下拉框，一个时品牌信息下拉框，一个时优惠下拉框

此时需要用到变量标识（布尔值），点击按钮，v-show 动态显示弹框

  data() {
    return {
      supportClasses: ['activity-green', 'activity-red', 'activity-orange'],
      shopShow: false,
       supportShow: false
    }

  <div class="shop-header-discounts"  @click="toggleSupportShow">

 <div class="shop-content" @click="toggleShopShow">

  <div class="activity-sheet" v-show="supportShow">
      <div class="activity-sheet-content">
        <h2 class="activity-sheet-title">优惠活动</h2>

<div class="shop-brief-modal" v-show="shopShow">
      <div class="brief-modal-content">
        <h2 class="content-title">
          <span class="content-tag">
            <span class="mini-tag">品牌</span>

 methods:{
     toggleShopShow () {
        this.shopShow = !this.shopShow
      },

      toggleSupportShow () {
        this.supportShow = !this.supportShow
      }

关闭按钮也需要点击事件

   <div class="mask-footer" >
          <span class="iconfont icon-close"  @click="toggleShopShow"></span>

<div class="activity-sheet-close" @click="toggleSupportShow">
          <span class="iconfont icon-close"></span>
        </div>

两个弹框需要一个过渡

样式

   .shop-brief-modal
      position fixed
      top 0
      left 0
      right 0
      bottom 0
      display flex
      justify-content center
      align-items center
      z-index 52
      flex-direction column
      color #333
      &.fade-enter-active,&.fade-leave-active
        transition opacity 1s
      &.fade-enter,&.fade-leave-to
        opacity 0
      .brief-modal-cover

弹框数据填充

 <transition name="fade">
      <div class="activity-sheet" v-show="supportShow">
        <div class="activity-sheet-content">
          <h2 class="activity-sheet-title">优惠活动</h2>
          <ul class="list">
            <li class="activity-item " v-for="(support, index) in supports" :key="support.type" :class="supportClasses[support.type]">
              <span class="content-tag">
                <span class="mini-tag">{{support.name}}</span>
              </span>
              <span class="activity-content"
                >{{support.content}}</span
              >
            </li>

1.3，shopgoods组件页面搭建

先dispatch到vuex中，获取数据

  mounted() {
    this.$store.dispatch('getShopGoods'）

  computed: {
    ...mapState(['goods'])
  }

数据填充到模板

实现2个列表滑动， 1.当前分类，  2.当滑动右侧列表时，更新当前分类

需要用到better-scroll第三方插件， http://ustbhuangyi.github.io/better-scroll/

https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html  （重要）

安装； npm install better-scroll -S  # 安装带有所有插件的 BetterScroll

引入，import BetterScroll from 'better-scroll'

better-scroll插件和swiper插件一样，需要先监视数据，然后在this,$nextTick()

需要传一个回调函数，只要vuex中数据获取到了，即可通知组件更新better-scroll的创建

<div class="menu-wrapper" ref="menuWrapper">
        <ul>
          <li
            class="menu-item current"
            v-for="(good, index) in goods"
            :key="index"
          >
            <span class="text bottom-border-1px">
              <img class="icon" :src="good.icon" v-if="good.icon" />
              {{ good.name }}
            </span>
          </li>
        </ul>
      </div>

.menu-wrapper为包裹容器的div

  mounted() {
    this.$store.dispatch('getShopGoods', () => {// 数据更新后执行
      this.$nextTick(() => { // 页面更新显示后执行
        new BetterScroll('.menu-wrapper')
        new BetterScroll('.foods-wrapper')
      })
    })
  },

  // 异步获取商家商品列表
  async getShopGoods({ commit },callback) {
    const result = await reqShopGoods()
    if (result.code === 0) {
      const goods = result.data
      commit('RECEIVE_GOODS', goods)
      // 数据更新了, 通知一下组件
      callback && callback()
    }
  }

 1.4，创建BetterScroll，给创建BetterScroll绑定滑动监听（scroll）,已经结束监听（scroll-End）,计算滚动的Y轴位置

 

 逻辑分析，滑动右侧食物的列表，自动定位到左侧食物类别的名称。。右侧每个li类别有个颜色类名current，我们计算一个索引变量（currentIndex），条件（tops，scrollY）

tops数组的findIndex（）遍历，条件，找到滚动在当前的位置是否在当前li和下一个li之间，找到li的索引值， 然后左侧食物类别，该currentIndex和模板遍历的li的index判断，

current类名是否生效。

 

1.获取右侧食物滑动的滚动的y轴位置，

2.获取每个右侧食物类别的高度（li）,将他们组成一个数组

3.计算滚动到当前位置时右侧食物类别（li）的索引，此时的索引就是左侧食物类别的索引

有个小bug,如果左侧食物快速滚动，右侧食物类别不会自动滚动，如要监听scrollEnd事件，让滚动强行停止，计算scrollY坐标

  data() {
    return {
      scrollY: 0,
      tops: []
     
    }
  },

  mounted() {
    this.$store.dispatch('getShopGoods', () => {
      // 数据更新后执行
      this.$nextTick(() => {
        // 页面更新显示后执行
        this._initScroll()
        this._initTops()
      })
    })
  },

  computed: {
    ...mapState(['goods']),
    currentIndex() {
      // 得到条件数据
      const { tops, scrollY } = this
      // 根据条件计算产生一个结果，计算鼠标的y轴位置在哪个li区间，返回的是符合条件的第一个索引
      const index = tops.findIndex((item, index) => {
        // scrollY>=当前top && scrollY<下一个top,  不能小于等于下一个
        return scrollY >= item && scrollY < tops[index + 1]
      })
      return index
    }
  },

  methods: {
    // 计算滚动后的位置
    _initScroll() {
      // 列表显示之后创建BetterScroll
      new BetterScroll('.menu-wrapper')
      this.foodsScroll = new BetterScroll('.foods-wrapper', {
        probeType: 2, // 因为惯性滑动不会触发
        click: true
      })

      // 给右侧列表绑定scroll监听，获取y轴坐标
      this.foodsScroll.on('scroll', ({ x, y }) => {
        // 绝对值
        this.scrollY = Math.abs(y)
        // console.log(x, this.scrollY)
      })

      // 给右侧列表绑定scroll结束的监听
      this.foodsScroll.on('scrollEnd', ({ x, y }) => {
        console.log('scrollEnd', x, y)
        this.scrollY = Math.abs(y)
      })
    },

    //计算li的top值，组成一个数组
    _initTops() {
      const tops = []
      let top = 0
      tops.push(top)
      // 找到所有分类的li，获取他们的top值
      const lis = this.$refs.foodsUl.getElementsByClassName('food-list-hook')
      // const lis = this.$refs.foodsUl.children
      // 伪数组转换成真数组
      Array.from(lis).forEach(item => {
        top += item.clientHeight
        tops.push(top)
      })

      this.tops = tops
      console.log(this.tops)
    }

模板，左侧食物类别名称

  <div class="menu-wrapper" ref="menuWrapper">
        <ul>
          <li
            class="menu-item"
            v-for="(good, index) in goods"
            :key="index"
            :class="{ current: index === currentIndex }"
          >
            <span class="text bottom-border-1px">
              <img class="icon" :src="good.icon" v-if="good.icon" />
              {{ good.name }}
            </span>
          </li>
        </ul>

右侧食物信息

  <div class="foods-wrapper" ref="foodsWrapper">
        <ul ref="foodsUl">
          <li
            class="food-list-hook"
            v-for="(good, index) in goods"
            :key="index"
          >

此时，滑动右侧食物的列表，自动定位到左侧食物类别的名称。

点击左侧食物类别名称，左侧的食物信息自动滑动到当前位置

  <div class="menu-wrapper" ref="menuWrapper">
        <ul>
          <li
            class="menu-item"
            v-for="(good, index) in goods"
            :key="index"
            :class="{ current: index === currentIndex }"
            @click="clickMenuItem(index)"
          >

    // 点击左侧食物类别名称，自动滑动右侧的食物信息
    clickMenuItem(index) {
      // 获取当前的食物信息位置
      const scrollY = this.tops[index]
      // 立即更新scrollY(让点击的分类项成为当前分类)
      this.scrollY = scrollY
      // 让左侧食物信息自动滚动到当前食物
      this.foodsScroll.scrollTo(0, -scrollY, 300)
    }

 1.5，在右侧食物信息中，将加减数量功能拆分一个组件CartControl，

 在shopGoods中定义子组件CartControl

    <ul ref="foodsUl">
          <li class="food-list-hook" v-for="(good, index) in goods" :key="index">
            <h1 class="title">{{good.name}}</h1>
            <ul>
              <li class="food-item bottom-border-1px" v-for="(food, index) in good.foods"
                  :key="index" @click="showFood(food)">
                <div class="icon">
                  <img width="57" height="57" :src="food.icon">
                </div>
                <div class="content">
                  <h2 class="name">{{food.name}}</h2>
                  <p class="desc">{{food.description}}</p>
                  <div class="extra">
                    <span class="count">月售{{food.sellCount}}份</span>
                    <span>好评率{{food.rating}}%</span>
                  </div>
                  <div class="price">
                    <span class="now">￥{{food.price}}</span>
                    <span class="old" v-if="food.oldPrice">￥{{food.oldPrice}}</span>
                  </div>
                  <div class="cartcontrol-wrapper">
                    <CartControl :food="food"/>
                  </div>

 在cartControl组件中，

1.页面渲染时，默认是没有商品数量的，food中没有count数量属性，此时，点击加减号按钮，需要dispatch到vuex中去，在vuex中更改数据count

需要用到Vue.set(),来动态绑定自定义属性。起初没有数量，默认是没有减号按钮的

2.判断是否是加减按钮，需要传递一个标识来判断，布尔值

 props: {
    food: Object
  },

<template>
  <div class="cartcontrol">
    <!-- 减号 -->
    <div class="iconfont icon-remove_circle_outline" v-if="food.count"  @click="updateFoodCount(false)"></div>
    <div class="cart-count" v-if="food.count">{{food.count}}</div>
    <!-- 加号 -->
    <div class="iconfont icon-add_circle" @click="updateFoodCount(true)"></div>
  </div>
</template>

 methods:{
    updateFoodCount(isAdd){
      // 分发到vuex,去更改food.count数量
      this.$store.dispatch('updateFoodCount',{food:this.food, isAdd})
    }
  }

在vuex中

// 同步更新food中的count值
  updateFoodCount({ commit }, { isAdd, food }) {
    // 判断加减
    if (isAdd) {
      commit('INCREMENT_FOOD_COUNT', food)
    } else {
      // 减号
      commit('DECREMENT_FOOD_COUNT', food)
    }
  }

  INCREMENT_FOOD_COUNT(state, food) {
    if(!food.count){ // 第一次增加判断,不然count是Nan
      // food.conut= 1 // 新增属性(没有数据绑定)
      /*
      对象
      属性名
      属性值
       */
      Vue.set(food,'count',1) // 让新增的属性也有数据绑定
    }else{
      food.count++
    }
    
  },

  DECREMENT_FOOD_COUNT(state, food) {
    if (food.count) {  // 只有有值才去减
      food.count--
    }
  }

3. 当点击加号按钮，然后点击减号数量，知道数量为0，那么减号和数量都会消失，v-if, 给减号的消失加一个动画，旋转向右消失

<template>
  <div class="cartcontrol">
    <transition name="move">
      <!-- 减号 -->
       <div class="iconfont icon-remove_circle_outline" v-if="food.count"  @click="updateFoodCount(false)"></div>
    </transition>
    
    <div class="cart-count" v-if="food.count">{{food.count}}</div>
    <!-- 加号 -->
    <div class="iconfont icon-add_circle" @click="updateFoodCount(true)"></div>
  </div>
</template>

 .icon-remove_circle_outline
     display: inline-block
     padding 6px
     line-height 24px
     font-size 24px
     color $green
     &.move-enter-active, &.move-leave-active
       transition all .3s
     &.move-enter, &.move-leave-to
       opacity 0
       transform translateX(15px) rotate(180deg)

1.6，食物信息弹框功能在shopGoods中定义子组件food

食物信息弹框功在shopGoods中定义子组件food，点击每个食物li,弹框，点击返回按钮，弹框消失

给子组件绑定一个监听事件，当子组件点击返回按钮，通知父组件，更改isFoodShow

 data() {
    return {
      scrollY: 0,
      tops: [],
      food:{},
      isFoodShow: false,

    }

    // 点击右侧每个食物，弹框
    showFood(food){
      // 数据赋值
      this.food = food
     this.isFoodShow = true
    },

在子组件food中，点击返回按钮，

  props:{
    food: Object
  },

  <div class="back" @click="toggleShow">
            <i class="iconfont icon-arrow_left"></i>
          </div>

  // 点击返回按钮
    toggleShow(){
      // 给父组件传递信息，让他修改变量isShowFood
      this.$emit('foodShow')
    }

父组件shopGoods

 // 子组件向父组件传递信息
    foodShow(){
      this.isFoodShow = false
    }

foods模板填充数据，也有一个加减数量的组件

    <div class="food">
      <div class="food-content">
        <div class="image-header">
          <img
           :src="food.image" 
          />
          <p class="foodpanel-desc">{{food.info}}</p>
          <div class="back" @click="toggleShow">
            <i class="iconfont icon-arrow_left"></i>
          </div>
        </div>
        <div class="content">
          <h1 class="title">{{food.name}}</h1>
          <div class="detail">
            <span class="sell-count">月售 {{food.sellCount}} 份</span>
            <span class="rating">好评率 {{food.rating}}%</span>
          </div>
          <div class="price">
            <span class="now">￥{{food.price}}</span>
            <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
          </div>
          <div class="cartcontrol-wrapper">
            <CartControl :food="food"></CartControl>
          </div>
        </div>
      </div>
      <div class="food-cover"  @click="toggleShow"></div>
    </div>

此时有个小bug,点击右侧食物列表的li的加号按钮，应该是出现加减号，以及数量，但是food弹框出现了

因为点击加号的时候(updateFoodCount)，事件冒泡出来了，传递到了li的点击事件showFood

解决方法；将点击加减号的click事件设置阻止冒泡

  <ul>
              <li
                class="food-item bottom-border-1px"
                v-for="(food, index) in good.foods"
                :key="index"
                @click="showFood(food)"
              >
                <div class="icon">
                  <img width="57" height="57" :src="food.icon" />
                </div>
                <div class="content">
                  <h2 class="name">{{ food.name }}</h2>
                  <p class="desc">{{ food.description }}</p>
                  <div class="extra">
                    <span class="count">月售 {{ food.sellCount }} 份</span>
                    <span>好评率 {{ food.rating }}%</span>
                  </div>
                  <div class="price">
                    <span class="now">￥{{ food.price }}</span>
                    <span class="old" v-if="food.oldPrice"
                      >￥{{ food.oldPrice }}</span
                    >
                  </div>
                  <div class="cartcontrol-wrapper">
                    <CartControl :food="food"></CartControl>
                  </div>
                </div>
              </li>

CartControl组件

<template>
  <div class="cartcontrol">
    <transition name="move">
      <!-- 减号 -->
       <div class="iconfont icon-remove_circle_outline" v-if="food.count"  @click="updateFoodCount(false)"></div>
    </transition>
    
    <div class="cart-count" v-if="food.count">{{food.count}}</div>
    <!-- 加号 -->
    <div class="iconfont icon-add_circle" @click="updateFoodCount(true)"></div>
  </div>
</template>

解决方式

<template>
  <div class="cartcontrol">
    <transition name="move">
      <!-- 减号 -->
       <div class="iconfont icon-remove_circle_outline" v-if="food.count"  @click.stop="updateFoodCount(false)"></div>
    </transition>
    
    <div class="cart-count" v-if="food.count">{{food.count}}</div>
    <!-- 加号 -->
    <div class="iconfont icon-add_circle" @click.stop="updateFoodCount(true)"></div>
  </div>

1.7，底部购物车功能实现shopCart, shopGoods的子组件

新建shopCart组件，功能逻辑

1.在vuex中自定义一个购物车商品空数组cartFoods，当点击食物添加按钮，此时需要将该food对象push到cartFood数组中

2.然后在vuex中getters中计算中食物总数量totalCount， 食物总价格totalPrice，

3.在shopCart中，从vuex获取info，totalCount，totalPrice

4.highlight类名只要有食物数量才会高亮，并且有才会显示， 右下角的的起送费有三种不同的文本，并且有个enough类名显示高亮，not-enough不显示高亮

判断依据是总价格是否大于最小的配送价格

5.点击食物减号，当见到食物数量为0，需要将当前food对象从cartFoods移除

 

vuex中state

 info: {}, // 商家信息
  cartFoods: [], // 购物车中食物的列表

vuex中getters

const getters = {
  info: state => state.info || {},
  supports: state => state.info.supports || [],
  totalCount: state =>
    state.cartFoods.reduce((pre, item) => pre + item.count, 0),

  // totalCount(state){
  //   return state.cartFoods.reduce((pre,item)=> pre + item.count, 0)
  // },

  totalPrice: state =>
    state.cartFoods.reduce((pre, item) => pre + item.count * item.price, 0)
}

 

 在shopCart获取

  computed: {
    ...mapGetters(['totalCount', 'totalPrice']),
    ...mapState(['info', 'cartFoods']),
    // 类名判断
    PayClass(){
      const {totalPrice} = this
      const {minPrice} = this.info
      return totalPrice < minPrice ? ' not-enough' : ' enough'
      
    },

    // 支付文本判断,等于0， 小于minPrice  大于minPrice
    PayText(){
      const {totalPrice} = this
      const {minPrice} = this.info
      if(totalPrice ===0){
        return `￥${minPrice}元起送`
      }else if(totalPrice < minPrice){
        return `还差${minPrice - totalPrice}元起送`
      }else{
        return `结算`
      }
    }

模板填充

<div class="shopcart">
      <div class="content">
        <div class="content-left">
          <div class="logo-wrapper">
            <div class="logo " :class="{ highlight :totalCount}">
              <i class="iconfont icon-shopping_cart " :class="{ highlight :totalCount}"></i>
            </div>
            <div class="num" v-if="totalCount">{{totalCount}}</div>
          </div>
          <div class="price " :class="{highlight: totalCount}">￥{{totalPrice}}</div>
          <div class="desc">另需配送费￥{{info.deliveryPrice}}元</div>
        </div>
        <div class="content-right">
          <div class="pay not-enough" :class="PayClass">
            {{PayText}}
          </div>
        </div>
      </div>

在vuex的添加和减少逻辑中，添加food,移除food

  INCREMENT_FOOD_COUNT(state, food) {
    if (!food.count) {
      // 第一次增加判断,不然count是Nan
      // food.conut= 1 // 新增属性(没有数据绑定)
      /*
      对象
      属性名
      属性值
       */
      Vue.set(food, 'count', 1) // 让新增的属性也有数据绑定
       // 将food添加到cartFoods中
      state.cartFoods.push(food)
    } else {
      food.count++
    }
  },

  DECREMENT_FOOD_COUNT(state, food) {
    if (food.count) {
      // 只有有值才去减
      food.count--
      if(food.count ===0){
        // 将food从cartFoods中移除，找到当前食物的索引
        state.cartFoods.splice(state.cartFoods.indexOf(food),1)
      }
    }
  }

 1.8, 购物车列表显示功能

点击购物车黑色方块，显示购物车列表，再次点击购物车黑色方块，清空按钮，外部的遮罩层购物车列表消失

 data() {
    return {
      isShow:false,
    }

 <div class="shopcart">
      <div class="content">
　　　　购物车黑色部分
        <div class="content-left" @click="toggleShow">

   <div class="shopcart-list" >
        <div class="list-header">
          <h1 class="title">购物车</h1>
          <span class="empty" @click="toggleShow">清空</span>
        </div>
        <div class="list-content" v-show="isShow">
          <ul>
            <li class="food" v-for="(cartFood, index) in cartFoods" :key="index">
              <span class="name">{{cartFood.name}}</span>
              <div class="price"><span>￥{{cartFood.price}}</span></div>
              <div class="cartcontrol-wrapper">
                <div class="cartcontrol">
                  <!-- 加减按钮 -->
                  <CartControl :food="cartFood"></CartControl>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
　　遮罩层，
    <div class="list-mask" @click="toggleShow"  v-show="isShow" ></div>

  methods:{
    toggleShow(){
      this.isShow = !this.isShow
    }

 1.9，此时会出现3个bug

1.当购物车列表的总数为0，弹框依然会存在，修改，当总数为0时，切换变量标识为false, 如果总数大于0，为true

2. 此时当购物车列表总数为0，弹框不会出现，当下一次添加食物数量，购物车弹框自动出来， 因为第一次的isShow为true,而且有数量了，就会自动出现购物车弹框

修改，当购物车数量为0，isShow设置为false即可

3. 当点击黑色方块时，在添加一个食物数量，购物车弹框自动出现，应为点击黑色方框，isShow为true, 改正，在点击toggleShow, 只要有数量才可以改变isShow状态

      <div class="shopcart-list" v-show="listShow">
        <div class="list-header" >
          <h1 class="title">购物车</h1>
          <span class="empty" @click="toggleShow">清空</span>
        </div>
        <div class="list-content" >
          <ul>
            <li class="food" v-for="(cartFood, index) in cartFoods" :key="index">
              <span class="name">{{cartFood.name}}</span>
              <div class="price"><span>￥{{cartFood.price}}</span></div>
              <div class="cartcontrol-wrapper">
                <div class="cartcontrol">
                  <!-- 加减按钮 -->
                  <CartControl :food="cartFood"></CartControl>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="list-mask" @click="toggleShow"  v-show="listShow" ></div>

  data() {
    return {
      isShow:false,
    }
  },

计算显示和影藏的标识

  // 购物车显示与影藏
    listShow(){
      if(this.totalCount ===0){ //总数量为0,关闭列表弹框
        //关闭最后一个食物后，让isShow为false,防止下一次再增加食物后，自动弹框
        this.isShow = false
        return false
      }

      // 总数量大于0
      return this.isShow
    }

 methods:{
    toggleShow(){
      // 只有当总数量大于0时切换
      if(this.totalCount){
        this.isShow = !this.isShow
      }
      
    }

1.10， 实现购物车列表的滚动功能

在购物车列表显示的时候创建scroll实例，注，必须创建单个实例scroll,不然对加减按钮有影响，需要判断之前是否有scroll实例

   // 购物车显示与影藏
    listShow(){
      if(this.totalCount ===0){ //总数量为0,关闭列表弹框
        //关闭最后一个食物后，让isShow为false,防止下一次再增加食物后，自动弹框
        this.isShow = false
        return false
      }

      if(this.isShow){
        this.$nextTick(()=>{
          // 实现BScroll的实例是一个单例
          if(!this.scroll){
            this.scroll =   new BScroll('.list-content',{
            click : true
            })
          }else{
            // 已经创建滚动实例了
            this.scroll.refresh() // 让滚动条刷新一下: 重新统计内容的高度

          }
        })

      }

      // 总数量大于0
      return this.isShow
    }

1.11，点击清空按钮，清空购物车的食物

在vuex中，清空每个food的count属性，清空cartFoods数组

   <div class="shopcart-list" v-show="listShow">
          <div class="list-header">
            <h1 class="title">购物车</h1>
            <span class="empty" @click="clearCart">清空</span>
          </div>

   // 点击清空按钮
    async clearCart() {
      let result = await this.$MessageBox
        .confirm('确定执行此操作?')
        .catch(error => error)
      if (result === 'confirm') {
        this.$store.dispatch('clearCart')
      } else if (result === 'cancel') {
        console.log('已取消')
      }
    }

clearCart({commit}){
    commit('CLEAR_CART')
  }

  CLEAR_CART(state){
    // 清除food中的count
    state.cartFoods.forEach((item) =>  Vue.delete(item, 'count'))  
    // 不行，自定义属性不能这样删除
    // state.cartFoods.forEach((item) =>  delete item.count)  
    // 移除购物车中所有购物项
    state.cartFoods = []
  }