新增：分类

htmldev/cps/src/api/request.js

@@ -55,7 +55,7 @@ request.interceptors.request.use(request => {
 
   // 因为微信开发者工具重复授权，本地开发时写死
   if (/^(0|192|10|localhost)/.test(domain)) {
-    request.headers.wechatToken = 'd34ca8724e9001d4f5ab44b6f4dcbcc7'
+    request.headers.wechatToken = '0f511bbe25f07797a92d7007acb76e2f'
   } else {
     request.headers.wechatToken = getCookieValue('fanbutingwechatToken')
   }

htmldev/cps/src/router/index.js

@@ -142,6 +142,30 @@ const routes = [
       isUseCache: false,
       keepAlive: false
     }
+  },
+  {
+    path: '/category',
+    component: _import('views/category/index'),
+    children: [
+      {
+        path: '',
+        name: 'CategoryIndex',
+        component: _import('views/category/index/index'),
+        meta: {
+          isUseCache: false,
+          keepAlive: true
+        }
+      },
+      {
+        path: '/detail',
+        name: 'CategoryDetail',
+        component: _import('views/category/detail/index'),
+        meta: {
+          isUseCache: false,
+          keepAlive: true
+        }
+      }
+    ]
   }
 ]
 

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

@@ -0,0 +1,13 @@
+<template>
+  <div>分类</div>
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <keep-alive>
+      <router-view v-if="$route.meta.keepAlive"/>
+    </keep-alive>
+    <router-view v-if="!$route.meta.keepAlive"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

htmldev/cps/src/views/category/index/api/api.js

@@ -0,0 +1,9 @@
+import request from '@/api/request'
+
+/**
+ * 类目/活动/频道接口
+ */
+export const apiCateList = () => request({
+  method: 'GET',
+  url: '/api/pdd/cate/list'
+})

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

@@ -0,0 +1,106 @@
+<template>
+  <div
+    class="category-container">
+    <div
+      class="cate-header">
+      <van-tabs
+        v-model="cateValue"
+        :color="'#ee0a24'"
+        :background="'#fff'">
+        <van-tab
+          v-for="index in 8"
+          :key="index">
+          <template #title>
+            <van-icon
+              name="more-o"/>
+            选项
+          </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>
+        </van-dropdown-item>
+      </van-dropdown-menu>
+    </div>
+    <van-button
+      type="primary" :to="'/category/detail'">去详情页
+    </van-button>
+  </div>
+</template>
+
+<script>
+import { Tab, Tabs, Button, Icon, DropdownMenu, DropdownItem, Toast } from 'vant'
+import { apiCateList } from './api/api'
+
+export default {
+  name: 'index',
+  components: {
+    'van-tabs': Tabs,
+    'van-tab': Tab,
+    'van-icon': Icon,
+    'van-dropdown-menu': DropdownMenu,
+    'van-dropdown-item': DropdownItem,
+    'van-button': Button
+  },
+  data () {
+    return {
+      cateValue: 0
+    }
+  },
+  activated () {
+    if (!this.$route.meta.isUseCache) {
+      this.fetchCateList()
+    }
+    this.$route.meta.isUseCache = false
+  },
+  methods: {
+    async fetchCateList () {
+      try {
+        const { status, data, msg } = await apiCateList()
+        if (status) {
+          console.log(data)
+        } else {
+          Toast(msg)
+        }
+      } catch (e) {}
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.category-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+}
+
+.cate-header {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+
+  .fbt-van-dropdown-menu {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100px;
+
+    ::v-deep .van-dropdown-menu__title {
+      &::after {
+        visibility: hidden;
+      }
+    }
+  }
+}
+</style>