代码优化

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,7 +22,10 @@ export default {
     }
   },
   data() {
-    return { disabled: false }
+    return {
+      disabled: false,
+      allchecked: this.value
+    }
   },
   computed: {
     variables() {
@@ -30,16 +33,15 @@ export default {
     },
     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 {

src/views/search/index.vue

@@ -1,27 +1,11 @@
 <template>
   <div class="search-container">
-    <div class="search-nav-bar">
-      <van-icon
-        size="16"
-        name="arrow-left"
-        style="padding: 12px 0 12px 12px"
-        @click="$router.back()"
-      />
-      <!--搜索栏-->
-      <van-search
+    <nav-bar
       v-model="searchText"
-        style="width: 100%"
-        show-action
-        placeholder="搜索商品名称"
-        @search="onSearch"
-        @focus="isResultShow = false"
-        @cancel="onCancel"
-      >
-        <template #action>
-          <div @click="onSearch">搜索</div>
-        </template>
-      </van-search>
-    </div>
+      :default-search="defaultSearch"
+      @handleSearch="handleSearch"
+      @handleFocus="handleFocus"
+    />
     <search-words v-if="searchText == ''" :hot-list="hotList" />
     <!--联想建议-->
     <search-suggestion v-else-if="searchText" :search-text="searchText" />
@@ -31,12 +15,14 @@
 <script>
 import { getHotList } from '@/api/search'
 import SearchWords from './modules/Words'
+import NavBar from './modules/NavBar'
 import SearchSuggestion from './modules/Suggest'
 export default {
   name: 'SearchIndex',
   components: {
     SearchSuggestion,
-    SearchWords
+    SearchWords,
+    NavBar
   },
   data() {
     return {
@@ -46,20 +32,10 @@ export default {
       isResultShow: false // 控制搜索结果的显示状态
     }
   },
-  methods: {
-    onSearch(val) {
-      // 展示搜索结果
-      this.isResultShow = true
-      this.$router.push({
-        path: '/search/list',
-        query: {
-          keyword: this.searchText
-        }
-      })
-    },
-    onCancel() {
-      this.$router.back()
+  mounted() {
+    this.getHot()
   },
+  methods: {
     getHot() {
       getHotList().then(res => {
         this.hotList = res.map.data
@@ -74,15 +50,14 @@ export default {
           keyword: value
         }
       })
+    },
+    handleFocus() {
+
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
-.search-nav-bar {
-  display: flex;
-  align-items: center;
-}
+<style scoped>
 </style>
 

src/views/search/list.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="search-list">
-    <nav-bar v-model="curSearchText" @handleSearch="handleSearch" />
-    <div v-if="searchText == curSearchText">
+    <nav-bar v-model="searchText" @handleSearch="handleSearch" @handleFocus="handleFocus" />
+    <div v-if="!focus">
       <filter-bar @changeGoods="changeGoods($event)" />
       <van-list
         v-model="loading"
@@ -26,7 +26,7 @@
       <van-empty v-if="list && list.length <=0 " description="没有搜索到商品" />
     </div>
     <!--联想建议-->
-    <search-suggestion v-else :search-text="curSearchText" />
+    <search-suggestion v-else :search-text="searchText" />
   </div>
 </template>
 
@@ -48,7 +48,7 @@ export default {
   data() {
     return {
       searchText: '',
-      curSearchText: '',
+      focus: false,
       list: [],
       pageSize: 10,
       pageNum: 1,
@@ -73,7 +73,6 @@ export default {
     })
     const { keyword } = this.$route.query
     this.searchText = keyword
-    this.curSearchText = keyword
     this.keyword = keyword
     this.getList()
   },
@@ -112,6 +111,9 @@ export default {
         }
       })
     },
+    handleFocus() {
+      this.focus = true
+    },
     changeGoods(val) {
       // 筛选
       if (val['search'] === 'filterNew') {

src/views/search/modules/FilterBar.vue

@@ -2,8 +2,6 @@
   <div class="search-filter">
     <van-dropdown-menu style="flex:1">
       <van-dropdown-item v-model="value1" :options="option1" @change="change1" />
-      <!-- <van-dropdown-item v-model="value2" :options="option2" />
-      <van-dropdown-item v-model="value3" :options="option3" /> -->
     </van-dropdown-menu>
     <div class="filter" @click="chageSales">
       <span style="font-size:15px;margin-right:2px">销量</span>

src/views/search/modules/NavBar.vue

@@ -13,6 +13,7 @@
       show-action
       clearable
       autofocus
+      @focus="onFocus"
       @search="onSearch"
       @cancel="onCancel"
     >
@@ -55,6 +56,9 @@ export default {
   //   }
   // },
   methods: {
+    onFocus() {
+      this.$emit('handleFocus')
+    },
     onSearch() {
       const key = this.keyword.trim() || this.defaultSearch.trim()
       if (!key) {
@@ -66,6 +70,7 @@ export default {
     },
     onCancel() {
       this.value = ''
+      this.$router.back()
     }
   }
 }

vue.config.js

@@ -112,5 +112,16 @@ module.exports = {
       // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
       config.optimization.runtimeChunk('single')
     })
+  },
+  css: {
+    loaderOptions: {
+      less: {
+        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
+        modifyVars: {
+          // 直接覆盖变量
+          'tabbar-item-icon-size': '24px'
+        }
+      }
+    }
   }
 }