分类：静态

htmldev/cps/src/router/index.js

@@ -144,7 +144,7 @@ const routes = [
     }
   },
   {
-    path: '/category',
+    path: '/category', // 分类
     component: _import('views/category/index'),
     children: [
       {

htmldev/cps/src/views/category/index/index.vue

@@ -1,30 +1,58 @@
 <template>
   <div
     class="category-container">
+    <!--商家-->
+    <div class="business-list">
+      <van-tabs
+        v-model="businessValue"
+        :color="'#ee0a24'"
+        :title-active-color="'#FFF'"
+        :title-inactive-color="'#8A8A8A'"
+        :background="'#fff'"
+        ref="fbtBusinessList">
+        <van-tab
+          v-for="index in 10"
+          :key="index">
+          <template #title>
+            <img src="" alt="">
+            <i>选项</i>
+          </template>
+        </van-tab>
+      </van-tabs>
+    </div>
+    <!--分类-->
     <div
       class="cate-header">
       <van-tabs
         v-model="cateValue"
-        :color="'#ee0a24'"
-        :background="'#fff'">
+        :color="'#F09E38'"
+        :title-active-color="'#333333'"
+        :title-inactive-color="'#515151'"
+        :background="'#fff'"
+        ref="fbtCateList">
         <van-tab
-          v-for="index in 8"
+          v-for="index in 10"
           :key="index">
           <template #title>
-            <van-icon
-              name="more-o"/>
-            选项
+            {{ index % 2 === 0 ? '选项选项' : '选项' }}
           </template>
-          内容 {{ index }}
         </van-tab>
       </van-tabs>
       <van-dropdown-menu
         class="fbt-van-dropdown-menu">
         <van-dropdown-item
-          title="筛选"
-          ref="item">
-          <p>111</p>
-          <p>222</p>
+          ref="fbtCateDropdownMenu">
+          <template #title>
+            <van-icon name="arrow-down"/>
+          </template>
+          <ul>
+            <li
+              :class="{'active': i === cateValue}"
+              v-for="i in 10"
+              :key="i"
+              @click="onConfirm(i)">选项选项{{ i }}
+            </li>
+          </ul>
         </van-dropdown-item>
       </van-dropdown-menu>
     </div>
@@ -35,7 +63,7 @@
 </template>
 
 <script>
-import { Tab, Tabs, Button, Icon, DropdownMenu, DropdownItem, Toast } from 'vant'
+import { Tab, Tabs, Button, DropdownMenu, DropdownItem, Icon, Toast } from 'vant'
 import { apiCateList } from './api/api'
 
 export default {
@@ -43,13 +71,14 @@ export default {
   components: {
     'van-tabs': Tabs,
     'van-tab': Tab,
-    'van-icon': Icon,
     'van-dropdown-menu': DropdownMenu,
     'van-dropdown-item': DropdownItem,
+    'van-icon': Icon,
     'van-button': Button
   },
   data () {
     return {
+      businessValue: 'jd',
       cateValue: 0
     }
   },
@@ -57,6 +86,10 @@ export default {
     if (!this.$route.meta.isUseCache) {
       this.fetchCateList()
     }
+    setTimeout(() => {
+      this.$refs.fbtBusinessList.resize()
+      this.$refs.fbtCateList.resize()
+    }, 500)
     this.$route.meta.isUseCache = false
   },
   methods: {
@@ -69,6 +102,12 @@ export default {
           Toast(msg)
         }
       } catch (e) {}
+    },
+    onConfirm (val) {
+      this.cateValue = val
+      this.$nextTick(() => {
+        this.$refs.fbtCateDropdownMenu.toggle()
+      })
     }
   }
 }
@@ -84,21 +123,128 @@ export default {
   width: 100%;
 }
 
+.business-list {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+
+  ::v-deep .van-tabs__nav--line {
+    .van-tab {
+      width: 75px;
+      padding: 0;
+
+      &--active {
+
+        .van-tab__text {
+          background: #EA483F !important;;
+        }
+      }
+
+      .van-tab__text {
+        display: flex;
+        align-items: center;
+        width: 67px;
+        height: 23px;
+        padding: 0 12px;
+        background: #F3F3F3;
+        border-radius: 12px;
+
+        img {
+          width: 16px;
+          height: 16px;
+          margin-right: 3px;
+          background: pink;
+        }
+
+        i {
+          font-size: 11px;
+          color: inherit;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+    }
+
+    .van-tabs__line {
+      display: none;
+    }
+  }
+}
+
 .cate-header {
   position: relative;
   left: 0;
   top: 0;
   width: 100%;
 
+  ::v-deep .van-tabs {
+    width: calc(100% - 42px);
+
+    .van-tabs__nav--line {
+      .van-tab {
+        &--active {
+
+          .van-tab__text {
+            font-size: 16px !important;
+            font-weight: bold;
+          }
+        }
+
+        .van-tab__text {
+          font-size: 13px;
+        }
+      }
+    }
+  }
+
   .fbt-van-dropdown-menu {
     position: absolute;
     right: 0;
     top: 0;
-    width: 100px;
+    width: 42px;
+    height: 100%;
+
+    ::v-deep .van-dropdown-menu__bar {
+      height: 100%;
+      box-shadow: none;
 
-    ::v-deep .van-dropdown-menu__title {
-      &::after {
-        visibility: hidden;
+      .van-dropdown-menu__title {
+        &::after {
+          visibility: hidden;
+        }
+      }
+    }
+
+    ul {
+      display: flex;
+      flex-flow: row wrap;
+      align-content: flex-start;
+      width: 375px;
+      min-height: 177px;
+      background: #F8F8F8;
+      padding: 12px 0 2px;
+
+      li {
+        width: 75px;
+        height: 24px;
+        margin-left: 15px;
+        margin-bottom: 10px;
+        border-radius: 12px;
+        color: #515151;
+        background: #ECECEC;
+        font-size: 12px;
+        line-height: 24px;
+        text-align: center;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+        &.active {
+          color: #FFFFFF;
+          background: #EA483F;
+        }
       }
     }
   }