vue2-elm学习记录（Day11）

问题记录：

(1)
报错信息：
"(Emitted value instead of an instance of Error) <transition v-for="item in showMoveDot">: component lists rendered with v-for should have explicit keys."
意思是：在<transition>子元素上用v-for呈现的组件列表应该具有显式键。
修改：添加一个key

(2)
nextTick:nextTick涉及到vue中DOM的异步更新。
应用场景：
1>在created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
2>在数据变化前后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进vue.nextTick()的回调函数中。

效果实现：

飞入购物车效果

<section class="food_container" v-show="changeShowType=='food'">
    ...
    <!--底部加入购物车部分 s-->
    <section class="buy_cart_container">
        
        <!--(1)处加入购物车部分的代码-->
         <!--点击购物车展开加入购物车的商品详情 s-->
        <transition name="toggle-cart">
            <!--(2)处的代码-->
        </transition>
        <!--点击购物车展开加入购物车的商品详情 e-->
        <!--遮罩层 s showCartList显示购物车列表，默认值是false
        cartFoodList已加入购物车的商品列表,默认值是[]-->
            <transition name="fade" v-show="showCartList&&cartFoodList.length" @click="toggleCartList">   
            </transition>
        <!--遮罩层 e-->
    </section>
    <!--底部加入购物车部分 e-->
</section>

为方便查看结构，将代码进行分离
(1)处代码如下：

    <!--左侧：图标及商品个数 toggleCartList控制购物车商品列表以及遮罩层的显示和隐藏-->
    <section class="cart_icon_num" @click="toggleCartList">
        <!--cart_icon_activity>0时，红色标识出商品数量-->
        <div class="cart_icon_container" :class="{cart_icon_activity: totalPrice > 0, move_in_cart:receiveInCart}">
            <!--totalNum是已加入的商品数-->
            <span  class="cart_list_length">
                  {{totalNum}}
            </span>
            <!--绘制购物车图标-->
            <svg class="cart_icon">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-icon"></use>
            </svg>
        </div>
        <!--配送费-->
        <div class="cart_num">
            <!--totalPrice已选商品总价-->
            <div>￥{{totalPrice}}</div>
            <div>配送费￥{{deliveryFee}}</div>
        </div>
    </section>
    <!--右侧：去付款。minimumOrderAmount=最低起送价-总价格-->
    <section class="gotopay" :class="{gotopay_acitvity:minimumOrderAmount<=0}">
        <!--总价格<最低起送价的情况-->
        <span class="gotopay_button_style" v-if="minimumOrderAmount > 0">
            还差￥{{minimumOrderAmount}}起送
        </span>
        <!--总价格>最低起送价的情况，点击跳转到确认订单页面-->
         <router-link :to="{path:'/confirmOrder', query:{geohash, shopId}}"
                class="gotopay_button_style" v-else>
                去结算
         </router-link>
    </section>

(2)处的代码如下：

    <section class="cart_food_list" v-show="showCartList&&cartFoodList.length">
        <!--header s-->
         <header>
            <h4>购物车</h4>
            <!--点击清空购物车-->
            <div @click="clearCart">
                 <svg>
                   <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-remove"
                   </use>
                  </svg>
                  <span class="clear_cart">清空</span>
             </div>
          </header>
        <!--header e-->
        <!--已加入购物车中的食物 s-->
        <section class="cart_food_details" id="cartFood">
            <ul>
                <!--cartFoodList加入购物车的商品列表-->
                <li v-for="(item,index) in cartFoodList" :key="index" class="cart_food_li">
                    <div class="cart_list_num">
                        <p class="ellipsis">{{item.name}}</p>
                        <p class="ellipsis">{{item.specs}}</p>
                    </div>
                    <div class="cart_list_price">
                        <span>￥</span>
                        <span>{{item.price}}</span>
                    </div>
                    <!--增加数量的图标 s-->
                    <section class="cart_list_control">
                        <!--减号-->
                     <span @click="removeOutCart(item.category_id, item.item_id, item.food_id, item.name, item.price, item.specs)">
                       <svg>
                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
                       </svg>
                     </span>
                     <!--个数-->
                     <span class="cart_num">{{item.num}}</span>
                     <!--加号-->
                     <svg class="cart_add" @click="addToCart(item.category_id, item.item_id, item.food_id, item.name, item.price, item.specs)">
                       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
                     </svg>
                    </section>
                    <!--增加数量的图标 e-->
                </li>
            </ul>
        </section>
        <!--已加入购物车中的食物 e-->
    </section>

说明：
(1)遮罩层的显示
遮罩层显示条件，购物车商品列表cartFoodList不为空且showCartList(显示购物车列表)的值为true
toggleCartList方法，控制遮罩层的显示和隐藏以及购物车商品列表的显示和隐藏。
cartFoodList的数据格式如下：

(2)minimumOrderAmount：还差多少元起送。值为最低起送价减去价格。
(3)clearCart方法执行清空购物车的操作。
(4)
removeOutCart:移除一个商品
addToCart：向购物车中添加一个商品
removeOutCart(category_id, item_id, food_id, name, price, specs)
传入的参数：

       category_id-食品分类id
       item_id-食品id
       food_id-食品规格id
       name-食品名字
       price-食品价格
       specs-食品规格 

addToCart需要传入的参数同上。

参照项目地址：地址