代码优化

src/components/Tabbar/index.vue

@@ -4,7 +4,7 @@
       <van-tabbar v-model="active" :active-color="variables.theme" :fixed="false" route>
         <van-tabbar-item :to="{name: 'Home'}" icon="wap-home">首页</van-tabbar-item>
         <van-tabbar-item :to="{name: 'Category'}" icon="bars">分类</van-tabbar-item>
-        <van-tabbar-item :to="{name: 'Cart'}" icon="shopping-cart">购物车</van-tabbar-item>
+        <van-tabbar-item :to="{name: 'Cart'}" icon="shopping-cart" :badge="totalCartNum">购物车</van-tabbar-item>
         <van-tabbar-item :to="{name: 'User'}" icon="manager">我的</van-tabbar-item>
       </van-tabbar>
     </div>
@@ -14,16 +14,36 @@
 
 <script>
 import variables from '@/styles/variables.scss'
+import { getCartGoodsCount } from '@/api/cart'
 
 export default {
   data() {
     return {
-      active: 0
+      active: 0,
+      count: 0
     }
   },
   computed: {
     variables() {
       return variables
+    },
+    totalCartNum() {
+      if (this.count === 0) {
+        return ''
+      } else {
+        return this.count <= 99 ? this.count : 99
+      }
+    }
+  },
+  mounted() {
+    this.getCartGoodsCount()
+  },
+  methods: {
+    getCartGoodsCount() {
+      getCartGoodsCount().then(res => {
+        const { count } = res.map
+        this.count = count
+      }).catch(e => {})
     }
   }
 }

src/utils/request.js

@@ -50,7 +50,7 @@ service.interceptors.response.use(
         return
       }
       // 订单轮询
-      if (res.code === 5002) {
+      if (res.code === 5001) {
         return Promise.reject(new Error(res.msg || 'Error'))
       }
       Toast.fail(res.msg)

src/views/cart/index.vue

@@ -6,6 +6,7 @@
       :key="idx"
       :index="item.id"
       :num="item.number"
+      :max-num="item.maxNum"
       :thumb="item.picUrl"
       :title="item.goodsName"
       :desc="item.specifications.join(' ')"
@@ -17,9 +18,9 @@
       @handleDelete="handleDelete"
       @changeNum="changeNum"
     />
-    <Tabbar :amount="amount" :value="isAllSelect" @input="handleAllSelect" />
+    <Tabbar v-if="list && list.length > 0" :amount="amount" :value="isAllSelect" @input="handleAllSelect" />
     <Skeleton v-if="isSkeletonShow" />
-    <van-empty v-if="list && list.length <=0 " description="购物车里没有内容" />
+    <van-empty v-if="list && list.length <=0" description="小车大容量，喜欢的都加进来吧" />
   </div>
 </template>
 
@@ -88,14 +89,18 @@ export default {
     },
     // all select
     handleAllSelect(value) {
-      const data = this.list.map(item => {
+      this.list.filter(item => {
+        return item.maxNum >= item.number
+      }).map(item => {
         const data = { id: item.id, checked: value }
         updateCart(data).then(res => {
         }).catch(e => {})
         item.checked = value
         return item
       })
-      this.list = data
+      this.list.forEach((item, i) => {
+        this.$set(this.list, i, item)
+      })
     },
     // item delete
     handleDelete(idx) {
@@ -105,12 +110,16 @@ export default {
         duration: 0,
         forbidClick: true
       })
-
       deleteCart(idx).then(res => {
         this.$toast.clear()
         this.$toast.success('删除成功')
-        this.getList()
-      }).catch(e => {})
+        const index = this.list.findIndex(item => item.id === idx)
+        this.list.splice(index, 1)
+        this.list.forEach((item, i) => {
+          this.$set(this.list, i, item)
+        })
+        console.log(this.list)
+      }).catch(e => { console.log(e) })
     },
     changeNum(id, num) {
       let newval

src/views/cart/modules/Item.vue

@@ -3,11 +3,12 @@
     <van-checkbox
       v-model="checked"
       icon-size="18px"
+      :disabled="invalid"
       :checked-color="variables.theme"
-      style="padding:0 10px 0 16px"
+      style="padding:0 10px 0 16px; background-color: white;"
     />
-    <van-swipe-cell style="width:100%" :before-close="beforeClose">
-      <van-card :tag="tag" :price="price" :desc="desc" :title="title" :thumb="thumb">
+    <van-swipe-cell style="width:100%; background-color: white;" :before-close="beforeClose">
+      <van-card :price="price" :desc="desc" :title="title" :thumb="thumb">
         <!-- <template #tags>
           <van-tag
             v-for="(item,idx) in tags"
@@ -19,10 +20,12 @@
         </template> -->
         <template #footer>
           <van-stepper
-            :value="value"
-            :default-value="value"
-            theme="round"
-            button-size="20"
+            v-if="!invalid"
+            :value="num"
+            :default-value="num"
+            button-size="26px"
+            min="1"
+            :max="maxNumber"
             integer
             async-change
             @change="onChange"
@@ -34,6 +37,7 @@
       <template #right>
         <van-button square text="删除" type="danger" style="height:100%" />
       </template>
+      <div v-if="invalid" class="invalid">无货</div>
     </van-swipe-cell>
   </div>
 </template>
@@ -84,13 +88,18 @@ export default {
       type: Number,
       default: 0
     },
+    maxNum: {
+      type: Number,
+      default: 0
+    },
     isChecked: {
       type: Boolean,
       default: false
     }
   },
   data() {
-    return { value: this.num }
+    return {
+    }
   },
   computed: {
     variables() {
@@ -103,8 +112,27 @@ export default {
       set(val) {
         this.$emit('input', { val, idx: this.index })
       }
+    },
+    maxNumber() {
+      return this.maxNum > this.num ? this.maxNum : this.num
+    },
+    invalid() {
+      const valid = this.maxNum < this.num
+      return valid
     }
   },
+  watch: {
+    num: {
+      handler(n, o) {
+        console.log('watch:' + n + ' ' + o)
+      }
+    },
+    deep: true,
+    immediate: true
+  },
+  mounted() {
+    console.log('id:' + this.index + ' maxNum:' + this.maxNum + ' curNum:' + this.num)
+  },
   methods: {
     // position 为关闭时点击的位置
     // instance 为对应的 SwipeCell 实例
@@ -140,7 +168,7 @@ export default {
       // 注意此时修改 value 后会再次触发 change 事件
       changeNumber(this.index, value)
         .then((res) => {
-          this.value = value
+          this.curNum = value
           this.$emit('changeNum', this.index, Number(value))
         })
         .catch()
@@ -151,12 +179,31 @@ export default {
 
 <style lang="scss" scoped>
 .card__item {
+  position: relative;
   display: flex;
   flex-direction: row;
-  margin-bottom: 14px;
-
+  background-color: #f9f8f8;
+  padding: 0px 10px 15px 10px;
   .van-card__num {
     font-size: 16px;
   }
 }
+.van-card__footer {
+  position: absolute;
+  top: 150px;
+  left: -16px;
+}
+.invalid {
+  position: absolute;
+  width: 120px;
+  height: 120px;
+  text-align: center;
+  line-height: 120px;
+  border-radius: 50%;
+  background-color: #554f4f;
+  color: white;
+  top: 40px;
+  left: 60px;
+  filter: opacity(80%);
+}
 </style>

src/views/cart/modules/Tabbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <van-submit-bar :price="amount" button-text="去结算" :disabled="disabled" class="submit-bar" @submit="onSubmit">
+    <van-submit-bar :price="amount" button-text="去结算" :disabled="!canSubmit" class="submit-bar" @submit="onSubmit">
       <van-checkbox v-model="checked" icon-size="18px" :checked-color="variables.theme">全选</van-checkbox>
     </van-submit-bar>
     <div class="submit-bar-placeholder" style="width:100%;height:50px" />
@@ -22,24 +22,26 @@ export default {
     }
   },
   data() {
-    return { disabled: false }
+    return {
+      disabled: false,
+      allchecked: this.value
+    }
   },
   computed: {
     variables() {
       return variables
     },
     checked: {
       get() {
-        return this.value
+        return this.allchecked
       },
       set(val) {
+        this.allchecked = val
         this.$emit('input', val)
       }
-    }
-  },
-  watch: {
-    amount(newVal) {
-      this.disabled = newVal <= 0
+    },
+    canSubmit() {
+      return this.amount > 0
     }
   },
   methods: {

src/views/detail/modules/Description.vue

@@ -4,7 +4,7 @@
     <div class="main">
       <!-- <image-pic width="100%" fill="cover" :src="description" /> -->
       <div v-if="description" v-html="description" />
-      <div v-else style="text-align: center">
+      <div v-else style="text-align: center; padding: 15px 0px;">
         <p>无详情</p>
       </div>
     </div>

src/views/order/confirm/modules/ListItem.vue

@@ -122,13 +122,13 @@ export default {
           params: { orderSn: this.orderSn, actualPrice: this.actualPrice }
         })
       } catch (error) {
-        console.log('下单失败', error)
         setTimeout(async() => {
           this.retryCount--
           if (this.retryCount > 0) {
             await this.searchResult(this.orderSn)
           } else {
-            this.$toast.fail('抱歉，创建订单失败！')
+            console.log('下单失败', error)
+            this.$toast.fail(error.message)
           }
         }, this.retryInterval)
       }

src/views/order/detail/index.vue

@@ -24,9 +24,8 @@
         :key="goodsIndex"
         :title="goods.goodsName"
         :num="goods.number"
-        :price="goods.price"
+        :price="goods.price | yuan"
         :thumb="goods.picUrl"
-        @click.native="toOrderDetail(goods.goodsId)"
       >
         <div slot="desc">
           <div class="desc">
@@ -38,15 +37,6 @@
             >{{ spec }}</van-tag>
           </div>
         </div>
-        <template #footer>
-          <van-button
-            v-if="orderInfo.order_status == 401 && goods.comment == 0"
-            size="mini"
-            round
-            plain
-            @click.stop="commentGoods(goods.id, goods.goodsId)"
-          >去评价</van-button>
-        </template>
       </van-card>
     </div>
   </div>
@@ -97,13 +87,17 @@ export default {
   align-items: center;
 }
 .order-detail {
-  padding: 1vw 2vh;
+  padding: 10px 20px;
   > div:nth-child(-n + 10) {
     margin-top: 1vh;
   }
   van-card {
     margin-top: 2vh;
   }
+  .van-card {
+    background-color: #f9f8f8;
+    padding: 15px 20px;
+  }
   .van-card__header {
     text-align: right;
     .van-button {