key值相关修改及优化；shopcart组件代码优化

src/components/food/food.vue

@@ -40,7 +40,7 @@
           <div class="rating-wrapper">
             <ul v-show="food.ratings && food.ratings.length">
               <li v-show="needShow(rating.rateType,rating.text)" v-for="rating in food.ratings"
-                  class="rating-item border-1px">
+                  class="rating-item border-1px" :key="rating.username">
                 <div class="user">
                   <span class="name">{{rating.username}}</span>
                   <img class="avatar" width="12" height="12" :src="rating.avatar">

src/components/goods/goods.vue

@@ -4,7 +4,7 @@
       <div class="menu-wrapper" ref="menuWrapper">
         <ul>
           <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}"
-              @click="selectMenu(index,$event)" ref="menuList">
+              @click="selectMenu(index,$event)" ref="menuList" :key="item.name">
           <span class="text border-1px">
             <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
           </span>
@@ -13,10 +13,10 @@
       </div>
       <div class="foods-wrapper" ref="foodsWrapper">
         <ul>
-          <li v-for="item in goods" class="food-list" ref="foodList">
+          <li v-for="item in goods" class="food-list" ref="foodList" :key="item.name">
             <h1 class="title">{{item.name}}</h1>
             <ul>
-              <li @click="selectFood(food,$event)" v-for="food in item.foods" class="food-item border-1px">
+              <li @click="selectFood(food,$event)" v-for="food in item.foods" class="food-item border-1px" :key="food.name">
                 <div class="icon">
                   <img width="57" height="57" :src="food.icon">
                 </div>

src/components/header/header.vue

@@ -43,7 +43,7 @@
               <div class="line"></div>
             </div>
             <ul v-if="seller.supports" class="supports">
-              <li class="support-item" v-for="(item,index) in seller.supports">
+              <li class="support-item" v-for="(item,index) in seller.supports" :key="item.description">
                 <span class="icon" :class="classMap[seller.supports[index].type]"></span>
                 <span class="text">{{seller.supports[index].description}}</span>
               </li>

src/components/ratings/ratings.vue

@@ -29,7 +29,7 @@
                     :ratings="ratings"></ratingselect>
       <div class="rating-wrapper">
         <ul>
-          <li v-for="rating in ratings" v-show="needShow(rating.rateType, rating.text)" class="rating-item">
+          <li v-for="rating in ratings" v-show="needShow(rating.rateType, rating.text)" class="rating-item" :key="rating.username">
             <div class="avatar">
               <img width="28" height="28" :src="rating.avatar">
             </div>
@@ -42,7 +42,7 @@
               <p class="text">{{rating.text}}</p>
               <div class="recommend" v-show="rating.recommend && rating.recommend.length">
                 <span class="icon-thumb_up"></span>
-                <span class="item" v-for="item in rating.recommend">{{item}}</span>
+                <span class="item" v-for="item in rating.recommend" :key="item">{{item}}</span>
               </div>
               <div class="time">
                 {{rating.rateTime | formatDate}}

src/components/seller/seller.vue

@@ -40,9 +40,9 @@
           <p class="content">{{seller.bulletin}}</p>
         </div>
         <ul v-if="seller.supports" class="supports">
-          <li class="support-item border-1px" v-for="(item,index) in seller.supports">
-            <span class="icon" :class="classMap[seller.supports[index].type]"></span>
-            <span class="text">{{seller.supports[index].description}}</span>
+          <li class="support-item border-1px" v-for="item in seller.supports" :key="item.description">
+            <span class="icon" :class="classMap[item.type]"></span>
+            <span class="text">{{item.description}}</span>
           </li>
         </ul>
       </div>
@@ -51,7 +51,7 @@
         <h1 class="title">商家实景</h1>
         <div class="pic-wrapper" ref="picWrapper">
           <ul class="pic-list" ref="picList">
-            <li class="pic-item" v-for="pic in seller.pics">
+            <li class="pic-item" v-for="pic in seller.pics" :key="pic">
               <img :src="pic" width="120" height="90">
             </li>
           </ul>
@@ -61,7 +61,7 @@
       <div class="info">
         <h1 class="title border-1px">商家信息</h1>
         <ul>
-          <li class="info-item" v-for="info in seller.infos">{{info}}</li>
+          <li class="info-item" v-for="info in seller.infos" :key="info">{{info}}</li>
         </ul>
       </div>
     </div>

src/components/shopcart/shopcart.vue

@@ -13,13 +13,13 @@
           <div class="desc">另需配送费￥{{deliveryPrice}}元</div>
         </div>
         <div class="content-right" @click.stop.prevent="pay">
-          <div class="pay" :class="payClass">
+          <div class="pay" :class="{enough:totalPrice>=minPrice}">
             {{payDesc}}
           </div>
         </div>
       </div>
       <div class="ball-container">
-        <div v-for="ball in balls">
+        <div v-for="(ball, index) in balls" :key="index">
           <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
             <div class="ball" v-show="ball.show">
               <div class="inner inner-hook"></div>
@@ -35,7 +35,7 @@
           </div>
           <div class="list-content" ref="listContent">
             <ul>
-              <li class="food" v-for="food in selectFoods">
+              <li class="food" v-for="food in selectFoods" :key="food.name">
                 <span class="name">{{food.name}}</span>
                 <div class="price">
                   <span>￥{{food.price*food.count}}</span>
@@ -129,13 +129,6 @@
           return '去结算';
         }
       },
-      payClass() {
-        if (this.totalPrice < this.minPrice) {
-          return 'not-enough';
-        } else {
-          return 'enough';
-        }
-      },
       listShow() {
         if (!this.totalCount) {
           this.fold = true;
@@ -318,8 +311,7 @@
           text-align: center
           font-size: 12px
           font-weight: 700
-          &.not-enough
-            background: #2b333b
+          background: #2b333b
           &.enough
             background: #00b43c
             color: #fff

src/components/star/star.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="star" :class="starType">
-    <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" key="index"></span>
+    <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" :key="itemClass+index"></span>
   </div>
 </template>