diff --git a/src/pageB/svip/index.vue b/src/pageB/svip/index.vue
new file mode 100644
index 0000000..105e63f
--- /dev/null
+++ b/src/pageB/svip/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <view >
+    <view class="bg-hex-303133 flex  p-30rpx ">
+      <cu-avatar size="120" :src="user.avatar ? user.avatar : ''"></cu-avatar>
+      <view class="ml-20rpx mt-10rpx">
+        <image src="@/static/images/svip/no_svip.png" class="w-48rpx h-48rpx" mode=""></image>
+        <view class="text-hex-f5f5f5 text-22rpx mt-10rpx">您暂未开通会员</view>
+      </view>
+    </view>
+    <!--  -->
+    <view class="bg-white pb-40rpx">
+      <view class="p-30rpx text-32rpx ">尊享特权</view>
+      <view class="grid grid-cols-4  gap-30rpx">
+        <view class="flex items-center justify-center flex-col" v-for="(item,index) in 8 " :key="index">
+          <image src="@/static/images/user/share_friends.png" class="w-64rpx h-64rpx" mode=""></image>
+          <view class="mt-20rpx text-24rpx">会员折扣</view>
+        </view>
+      </view>
+    </view>
+    <!--  -->
+    <view class="bg-white mt-20rpx p-30rpx">
+      <!--  -->
+      <view class="grid grid-cols-3  gap-30rpx">
+        <view @click="choose(index)" :class="Index==index?'text-hex-f59e0b border-hex-f59e0b':'border-hex-F5F5F5'" class="rounded-15rpx py-50rpx flex items-center justify-center flex-col border border-solid " v-for="(item,index) in list" :key="index">
+         <view class="text-26rpx">{{item.name}}</view>
+         <view class="price-text text-34rpx font-medium mt-15rpx">{{item.money}}</view>
+         <view :class="Index==index?'text-hex-f59e0b':''" class="text-26rpx mt-15rpx text-hex-909399">{{item.time}}</view>
+        </view>
+      </view>
+      <!--  -->
+      <view class="mt-30rpx text-28rpx">
+        <view class="leading-40rpx">瞭男书店季卡</view>
+        <view class="leading-40rpx">咖啡饮品9折，书籍9折，免费咖啡饮品12杯</view>
+        <view class="leading-40rpx">通用现金卷100元 （有限期90天）</view>
+      </view>
+      <!--  -->
+      <view class="flex items-center mt-20rpx">
+        <u-checkbox v-model="checked" shape="circle" active-color="#f59e0b" size="28" icon-size="18"></u-checkbox>
+        <view class="text-22rpx -ml-15rpx mt-8rpx " >
+          已同意并阅读
+          <text class="text-hex-f59e0b">《平台协议》、</text>
+          <text class="text-hex-f59e0b">《价格说明》</text>
+        </view>
+      </view>
+      <!--  -->
+      <view class="w-full mt-30rpx h-88rpx bg-hex-404040 rounded-full text-center text-hex-f59e0b leading-88rpx text-32rpx">立即开通</view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        user: {},
+        list:[
+          {name:'年卡',money:'1288',time:'1年'},
+          {name:'季卡',money:'1288',time:'3月'},
+          {name:'月卡',money:'1288',time:'30天'}
+        ],
+        Index:0,
+        checked:true
+      };
+    },
+    methods:{
+      choose(e){
+        this.Index=e
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/pages.json b/src/pages.json
index c6bfe7d..568e365 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -271,8 +271,9 @@
     {
       "path": "pages/healthy/index",
       "style": {
-        "navigationBarTitleText": "健康首页",
-        "enablePullDownRefresh": false
+        "navigationBarTitleText": "文章分类",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "default"
       }
     },
     {
@@ -568,6 +569,14 @@
           "navigationBarTitleText": "订单详情",
           "enablePullDownRefresh": false
         }
+      },
+      {
+        "path": "svip/index",
+        "style": {
+          "navigationBarTitleText": "",
+          "enablePullDownRefresh": false,
+          "navigationStyle": "default"
+        }
       }
       ]
     }
diff --git a/src/pages/healthy/index.vue b/src/pages/healthy/index.vue
index 13e27c1..a31e3f0 100644
--- a/src/pages/healthy/index.vue
+++ b/src/pages/healthy/index.vue
@@ -1,95 +1,159 @@
 <template>
   <view>
-      <loading-view v-if="isFirstLoading"></loading-view>
-    <!-- 导航栏 -->
-    <u-navbar :border-bottom="false" :is-back="false"  :background="{ background: '#ffffff' }">
-      <view class="pl-base w-full">
-        <u-search @change="Change" @search="Search" placeholder="请输入内容" v-model="searchText" :show-action="false"></u-search>
-      </view>
-      <template #right>
-        <view class="mx-base relative" @tap="$u.routeAuth('/pages/news/index')">
-          <u-icon name="chat" size="48"></u-icon>
-          <block v-if="news_num>0">
-            <u-badge :is-dot="true" size="16" :offset="[0, 2]" class="badge"></u-badge>
-          </block>
-        </view>
-      </template>
-    </u-navbar>
+    <loading-view v-if="isFirstLoading"></loading-view>
+    <!-- 顶部tabbar -->
+    <view class="bg-white sticky top-0 z-9999">
+      <u-tabs :list="list" active-color="#378264" inactive-color="#808080" :current="id" @change="change"></u-tabs>
+    </view>
+    <mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+      :down="downOption" :up="upOption">
       <!-- 广告位 -->
-      <view   v-if="cpaceImage.image" @tap="jumpByOption(cpaceImage)" class="w-710rpx m-auto mt-base">
+      <view v-if="cpaceImage.image" @tap="jumpByOption(cpaceImage)" class="w-710rpx m-auto mt-base">
         <u-image border-radius="25rpx" width="100%" height="180rpx" :src="cpaceImage.image" :lazy-load="true"></u-image>
       </view>
-      <!-- 有数据 -->
-      <block v-if="dataList.length!=0" v-for="(item,index) in dataList" :key="index">
-        <view @tap="$u.route('/pages/healthy/healthy',{id:item.id})" class="box-show w-710rpx rounded-xs  h-340rpx mt-base m-auto " >
-          <image class="w-full h-full rounded-xs" :src="item.cover" ></image>
+      <!-- 列表 -->
+      <view @tap="jumpByOption(item)" v-for="(item,index) in dataList" :key="index"
+        class="w-710rpx p-base bg-white rounded-xs m-auto mt-base flex items-start justify-between">
+        <block v-if="item.cover">
+          <u-image border-radius="15rpx" width="250rpx" height="187rpx" :src="item.cover" :lazy-load="true"></u-image>
+        </block>
+        <view class="ml-base flex-1">
+          <view class="text-txBase  w-full h-80rpx leading-40rpx text-30rpx  two-ellipsis font-bold">{{item.title}}
+          </view>
+          <view class="text-txGray text-md mt-10rpx">{{item.created_at}}</view>
+          <view class="flex items-center justify-between mt-10rpx text-txGray text-md">
+            <view>积分: {{item.points}}</view>
+            <view class="flex items-center">
+              <u-icon :color="item.like_status ? '#378264' : ''" size="48"
+                :name="item.like_status ? 'thumb-up-fill' : 'thumb-up'"></u-icon>
+              <view class="ml-10rpx h-30rpx">{{item.likes}}</view>
+            </view>
+          </view>
         </view>
-      </block>
-      <!-- 没有数据 -->
-      <view v-if="dataList.length==0" class="flex items-center justify-center flex-col mt-80rpx">
-        <image  class="w-300rpx h-254rpx" mode="scaleToFill" src="/static/images/user/empty.png"></image>
-        <view class="mt-30rpx text-25rpx text-txGray">~ 空空如也 ~</view>
       </view>
+    </mescroll-body>
   </view>
 </template>
 
 <script>
+  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
   import CartMixin from '@/pages/shop_cart/mixin';
   export default {
-    mixins: [CartMixin],
+    mixins: [MescrollMixin, CartMixin],
     data() {
       return {
-        isFirstLoading:true,
-        article_banner:[],//广告位图片
+        list: [{
+          name: '待收货'
+        }, {
+          name: '待付款'
+        }, {
+          name: '待评价',
+        }, {
+          name: '待收货'
+        }, {
+          name: '待付款'
+        }, {
+          name: '待评价',
+        }, {
+          name: '待收货'
+        }, {
+          name: '待付款'
+        }, {
+          name: '待评价',
+        }],
+        isFirstLoading: true,
+        article_banner: [], //广告位图片
         searchText: '',
-       
+        downOption: {
+          auto: false,
+        },
+        upOption: {
+          page: {
+            size: 20
+          },
+          noMoreSize: 1
+        },
         dataList: [], //获取到的数据
+        id: 0
       };
     },
     computed: {
-      cpaceImage(){
-        return this.article_banner.length>0?this.article_banner[0]:{}
+      height() {
+        const {
+          windowHeight,
+          statusBarHeight
+        } = this.$u.sys();
+        return windowHeight - statusBarHeight - 44 + 'px';
+      },
+      cpaceImage() {
+        return this.article_banner.length > 0 ? this.article_banner[0] : {}
       }
     },
-    onLoad() {
+    onLoad({
+      id
+    }) {
+      this.id = id
+      setTimeout(() => {
+        this.isFirstLoading = false
+      }, 300)
       this.getCpace()
-      this.getclassList()
+      uni.$on('isUp', ({
+        id
+      }) => {
+        this.dataList.forEach((item) => {
+          if (item.id == id) {
+            item.like_status = true;
+            item.likes += 1
+          }
+        })
+      })
     },
     methods: {
+      change(e) {
+        this.id = e
+      },
       //获取广告位
-      async getCpace(){
-        try{
+      async getCpace() {
+        try {
           let resDate = await this.$api.get('/v1/ads', {
             params: {
               keys: 'article_banner'
             }
           })
-          this.article_banner=resDate.article_banner
-        }catch(err){}
+          this.article_banner = resDate.article_banner
+        } catch (err) {} finally {}
       },
-     //获取文章分类
-    async getclassList(){
-     try{
-       const res=await this.$api.get(`/v1/articles/health-category`, {params: { key:this.searchText}})
-       this.dataList=res
-     }catch(err){}finally{
-       setTimeout(()=>{
-          this.isFirstLoading=false
-       },200)
-      
-     }
-    },
-      Search() {
-        this.getclassList()
+      downCallback() {
+        this.mescroll.resetUpScroll();
+        this.dataList = []
       },
-      Change(e) {
-        if (e == '')this.getclassList()
+      async upCallback(page) {
+        this.loadData(page);
+      },
+      loadData({
+        num,
+        size
+      }) {
+        let obj = {
+          category: this.id,
+          key: this.searchText,
+          page: num,
+          per_page: size
+        }
+        this.$api.get(`/v1/articles/by-category/${ this.id}`, {
+          params: obj
+        }).then(res => {
+          this.mescroll.endSuccess(res.data.length)
+          if (num == 1) this.dataList = [];
+          this.dataList = this.dataList.concat(res.data);
+        }).catch(err => {
+          this.mescroll.endErr()
+        })
       },
-      //跳转页面
       jumpByOption(e) {
         if (!!e.jump_link) {
           if (e.jump_type == 1) {
-             this.$u.route(e.jump_link);
+            this.$u.route(e.jump_link);
           } else if (e.jump_type == 2) {
             this.$u.route(`/pages/web_view/index?url=${e.jump_link}`);
           }
@@ -103,7 +167,4 @@
   .badge {
     @apply bg-badge;
   }
-  .box-show {
-    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);
-  }
 </style>
diff --git a/src/pages/healthy/index1.vue b/src/pages/healthy/index1.vue
new file mode 100644
index 0000000..13e27c1
--- /dev/null
+++ b/src/pages/healthy/index1.vue
@@ -0,0 +1,109 @@
+<template>
+  <view>
+      <loading-view v-if="isFirstLoading"></loading-view>
+    <!-- 导航栏 -->
+    <u-navbar :border-bottom="false" :is-back="false"  :background="{ background: '#ffffff' }">
+      <view class="pl-base w-full">
+        <u-search @change="Change" @search="Search" placeholder="请输入内容" v-model="searchText" :show-action="false"></u-search>
+      </view>
+      <template #right>
+        <view class="mx-base relative" @tap="$u.routeAuth('/pages/news/index')">
+          <u-icon name="chat" size="48"></u-icon>
+          <block v-if="news_num>0">
+            <u-badge :is-dot="true" size="16" :offset="[0, 2]" class="badge"></u-badge>
+          </block>
+        </view>
+      </template>
+    </u-navbar>
+      <!-- 广告位 -->
+      <view   v-if="cpaceImage.image" @tap="jumpByOption(cpaceImage)" class="w-710rpx m-auto mt-base">
+        <u-image border-radius="25rpx" width="100%" height="180rpx" :src="cpaceImage.image" :lazy-load="true"></u-image>
+      </view>
+      <!-- 有数据 -->
+      <block v-if="dataList.length!=0" v-for="(item,index) in dataList" :key="index">
+        <view @tap="$u.route('/pages/healthy/healthy',{id:item.id})" class="box-show w-710rpx rounded-xs  h-340rpx mt-base m-auto " >
+          <image class="w-full h-full rounded-xs" :src="item.cover" ></image>
+        </view>
+      </block>
+      <!-- 没有数据 -->
+      <view v-if="dataList.length==0" class="flex items-center justify-center flex-col mt-80rpx">
+        <image  class="w-300rpx h-254rpx" mode="scaleToFill" src="/static/images/user/empty.png"></image>
+        <view class="mt-30rpx text-25rpx text-txGray">~ 空空如也 ~</view>
+      </view>
+  </view>
+</template>
+
+<script>
+  import CartMixin from '@/pages/shop_cart/mixin';
+  export default {
+    mixins: [CartMixin],
+    data() {
+      return {
+        isFirstLoading:true,
+        article_banner:[],//广告位图片
+        searchText: '',
+       
+        dataList: [], //获取到的数据
+      };
+    },
+    computed: {
+      cpaceImage(){
+        return this.article_banner.length>0?this.article_banner[0]:{}
+      }
+    },
+    onLoad() {
+      this.getCpace()
+      this.getclassList()
+    },
+    methods: {
+      //获取广告位
+      async getCpace(){
+        try{
+          let resDate = await this.$api.get('/v1/ads', {
+            params: {
+              keys: 'article_banner'
+            }
+          })
+          this.article_banner=resDate.article_banner
+        }catch(err){}
+      },
+     //获取文章分类
+    async getclassList(){
+     try{
+       const res=await this.$api.get(`/v1/articles/health-category`, {params: { key:this.searchText}})
+       this.dataList=res
+     }catch(err){}finally{
+       setTimeout(()=>{
+          this.isFirstLoading=false
+       },200)
+      
+     }
+    },
+      Search() {
+        this.getclassList()
+      },
+      Change(e) {
+        if (e == '')this.getclassList()
+      },
+      //跳转页面
+      jumpByOption(e) {
+        if (!!e.jump_link) {
+          if (e.jump_type == 1) {
+             this.$u.route(e.jump_link);
+          } else if (e.jump_type == 2) {
+            this.$u.route(`/pages/web_view/index?url=${e.jump_link}`);
+          }
+        }
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .badge {
+    @apply bg-badge;
+  }
+  .box-show {
+    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);
+  }
+</style>
diff --git a/src/pages/me/me.vue b/src/pages/me/me.vue
index ad819e7..459abfd 100644
--- a/src/pages/me/me.vue
+++ b/src/pages/me/me.vue
@@ -36,7 +36,7 @@
               </view>
             </view>
             <view class="flex items-center justify-between mt-20rpx text-txBase text-lg">
-              <view class="flex-1" v-if="walletShow"
+              <view @tap="$u.routeAuth('/pageB/svip/index')" class="flex-1" v-if="walletShow"
                 >余额: <text class="font-medium">{{ balance.balance }}</text></view
               >
               <view class="w-200rpx flex-none">
diff --git a/src/pages/sort/data.js b/src/pages/sort/data.js
new file mode 100644
index 0000000..cb4f75a
--- /dev/null
+++ b/src/pages/sort/data.js
@@ -0,0 +1,1087 @@
+export default[
+   {
+      "name": "女装",
+      "foods": [
+          {
+            "name": "A字裙",
+            "key": "A字裙",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/1.jpg",
+            "cat": 10
+          },
+          {
+            "name": "T恤",
+            "key": "T恤",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/2.jpg",
+            "cat": 10
+          },
+          {
+            "name": "半身裙",
+            "key": "半身裙",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/3.jpg",
+            "cat": 10
+          },
+          {
+            "name": "衬衫",
+            "key": "衬衫",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/4.jpg",
+            "cat": 10
+          },
+          {
+            "name": "短裙",
+            "key": "短裙",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/5.jpg",
+            "cat": 10
+          },
+          {
+            "name": "阔腿裤",
+            "key": "阔腿裤",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/6.jpg",
+            "cat": 10
+          },
+          {
+            "name": "连衣裙",
+            "key": "连衣裙",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/7.jpg",
+            "cat": 10
+          },
+          {
+            "name": "妈妈装",
+            "key": "妈妈装",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/8.jpg",
+            "cat": 10
+          },
+          {
+            "name": "牛仔裤",
+            "key": "牛仔裤",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/9.jpg",
+            "cat": 10
+          },
+          {
+            "name": "情侣装",
+            "key": "情侣装",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/10.jpg",
+            "cat": 10
+          },
+          {
+            "name": "休闲裤",
+            "key": "休闲裤",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/11.jpg",
+            "cat": 10
+          },
+          {
+            "name": "雪纺衫",
+            "key": "雪纺衫",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/12.jpg",
+            "cat": 10
+          },
+          {
+            "name": "防晒衣",
+            "key": "防晒衣",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/13.jpg",
+            "cat": 10
+          },
+          {
+            "name": "礼服/婚纱",
+            "key": "礼服婚纱",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/14.jpg",
+            "cat": 10
+          }
+      ]
+   },
+   {
+    "name": "美食",
+    "foods": [
+        {
+          "name": "火锅",
+          "key": "火锅",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/1.jpg",
+          "cat": 6
+        },
+        {
+          "name": "糕点饼干",
+          "key": "糕点饼干",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/2.jpg",
+          "cat": 6
+        },
+        {
+          "name": "坚果果干",
+          "key": "坚果果干",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/3.jpg",
+          "cat": 6
+        },
+        {
+          "name": "酒类",
+          "key": "酒类",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/4.jpg",
+          "cat": 6
+        },
+        {
+          "name": "辣条",
+          "key": "辣条",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/5.jpg",
+          "cat": 6
+        },
+        {
+          "name": "大礼包",
+          "key": "大礼包",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/6.jpg",
+          "cat": 6
+        },
+        {
+          "name": "精品茗茶",
+          "key": "茶",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/7.jpg",
+          "cat": 6
+        },
+        {
+          "name": "休闲食品",
+          "key": "休闲食品",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/8.jpg",
+          "cat": 6
+        },
+        {
+          "name": "糖果巧克力",
+          "key": "糖果巧克力",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/9.jpg",
+          "cat": 6
+        },
+        {
+          "name": "方便速食",
+          "key": "方便速食",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/10.jpg",
+          "cat": 6
+        },
+        {
+          "name": "营养代餐",
+          "key": "营养代餐",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/11.jpg",
+          "cat": 6
+        },
+        {
+          "name": "粮油副食",
+          "key": "粮油",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/12.jpg",
+          "cat": 6
+        },
+        {
+          "name": "生鲜水果",
+          "key": "水果",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/13.jpg",
+          "cat": 6
+        },
+        {
+          "name": "饮品",
+          "key": "饮品",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/14.jpg",
+          "cat": 6
+        }
+        ]
+    },
+    {
+        "name": "美妆",
+        "foods": [
+            {
+                "name": "化妆刷",
+                "key": "化妆刷",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/1.jpg",
+                "cat": 3
+            },
+            {
+                "name": "粉底",
+                "key": "粉底",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/2.jpg",
+                "cat": 3
+            },
+            {
+                "name": "洗发护发",
+                "key": "洗发护发",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/3.jpg",
+                "cat": 3
+            },
+            {
+                "name": "美容工具",
+                "key": "美容工具",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/4.jpg",
+                "cat": 3
+            },
+            {
+                "name": "眼部护理",
+                "key": "眼部护理",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/5.jpg",
+                "cat": 3
+            },
+            {
+                "name": "眉妆",
+                "key": "眉妆",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/6.jpg",
+                "cat": 3
+            },
+            {
+                "name": "卸妆品",
+                "key": "卸妆品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/7.jpg",
+                "cat": 3
+            },
+            {
+                "name": "基础护肤",
+                "key": "基础护肤",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/8.jpg",
+                "cat": 3
+            },
+            {
+                "name": "眼妆",
+                "key": "眼妆",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/9.jpg",
+                "cat": 3
+            },
+            {
+                "name": "唇妆",
+                "key": "唇妆",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/10.jpg",
+                "cat": 3
+            },
+            {
+                "name": "面膜",
+                "key": "面膜",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/11.jpg",
+                "cat": 3
+            },
+            {
+                "name": "沐浴用品",
+                "key": "沐浴用品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/12.jpg",
+                "cat": 3
+            },
+            {
+                "name": "护肤套装",
+                "key": "护肤套装",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/13.jpg",
+                "cat": 3
+            },
+            {
+                "name": "防晒品",
+                "key": "防晒品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/14.jpg",
+                "cat": 3
+            },
+            {
+                "name": "美甲",
+                "key": "美甲",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/15.jpg",
+                "cat": 3
+            }
+
+        ]
+    },
+    {
+        "name": "居家日用",
+        "foods": [
+            {
+              "name": "垃圾袋",
+              "key": "垃圾袋",
+              "icon": "https://cdn.uviewui.com/uview/common/classify/4/1.jpg",
+              "cat": 4
+            },
+            {
+                "name": "纸巾",
+                "key": "纸巾",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/2.jpg",
+                "cat": 4
+            },
+            {
+                "name": "驱蚊用品",
+                "key": "驱蚊用品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/3.jpg",
+                "cat": 4
+            },
+            {
+                "name": "收纳神器",
+                "key": "收纳神器",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/4.jpg",
+                "cat": 4
+            },
+            {
+                "name": "厨房用品",
+                "key": "厨房用品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/5.jpg",
+                "cat": 4
+            },
+            {
+                "name": "厨房烹饪",
+                "key": "烹饪",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/6.jpg",
+                "cat": 4
+            },
+            {
+                "name": "衣物晾晒",
+                "key": "衣物晾晒",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/7.jpg",
+                "cat": 4
+            },
+            {
+                "name": "衣物护理",
+                "key": "衣物护理",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/8.jpg",
+                "cat": 4
+            },
+            {
+                "name": "宠物用品",
+                "key": "宠物用品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/9.jpg",
+                "cat": 4
+            },
+            {
+                "name": "医药保健",
+                "key": "医药",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/10.jpg",
+                "cat": 4
+            },
+            {
+                "name": "日用百货",
+                "key": "百货",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/11.jpg",
+                "cat": 4
+            },
+            {
+                "name": "清洁用品",
+                "key": "清洁",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/12.jpg",
+                "cat": 4
+            },
+            {
+                "name": "绿植园艺",
+                "key": "绿植",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/13.jpg",
+                "cat": 4
+            }
+        ]
+    },
+    {
+        "name": "男装",
+        "foods": [
+            {
+                "name": "爸爸装",
+                "key": "爸爸装",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/1.jpg",
+                "cat": 12
+            },
+            {
+                "name": "牛仔裤",
+                "key": "牛仔裤",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/2.jpg",
+                "cat": 12
+            },
+            {
+                "name": "衬衫",
+                "key": "衬衫",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/3.jpg",
+                "cat": 12
+            },
+            {
+                "name": "休闲裤",
+                "key": "休闲裤",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/4.jpg",
+                "cat": 12
+            },
+            {
+                "name": "外套",
+                "key": "外套",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/5.jpg",
+                "cat": 12
+            },
+            {
+                "name": "T恤",
+                "key": "T恤",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/6.jpg",
+                "cat": 12
+            },
+            {
+                "name": "套装",
+                "key": "套装",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/7.jpg",
+                "cat": 12
+            },
+            {
+                "name": "运动裤",
+                "key": "运动裤",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/8.jpg",
+                "cat": 12
+            },
+            {
+                "name": "马甲/背心",
+                "key": "马甲背心",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/9.jpg",
+                "cat": 12
+            },
+            {
+                "name": "POLO衫",
+                "key": "POLO衫",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/10.jpg",
+                "cat": 12
+            },
+            {
+                "name": "商务装",
+                "key": "商务装",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/11.jpg",
+                "cat": 12
+            }
+        ]
+    },
+    {
+        "name": "鞋品",
+        "foods": [
+            {
+                "name": "单鞋",
+                "key": "单鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/1.jpg",
+                "cat": 5
+            },
+            {
+                "name": "皮鞋",
+                "key": "皮鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/2.jpg",
+                "cat": 5
+            },
+            {
+                "name": "帆布鞋",
+                "key": "帆布鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/3.jpg",
+                "cat": 5
+            },
+            {
+                "name": "北京老布鞋",
+                "key": "北京老布鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/4.jpg",
+                "cat": 5
+            },
+            {
+                "name": "运动鞋",
+                "key": "运动鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/5.jpg",
+                "cat": 5
+            },
+            {
+                "name": "拖鞋",
+                "key": "拖鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/6.jpg",
+                "cat": 5
+            },
+            {
+                "name": "凉鞋",
+                "key": "凉鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/7.jpg",
+                "cat": 5
+            },
+            {
+                "name": "休闲鞋",
+                "key": "休闲鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/8.jpg",
+                "cat": 5
+            },
+            {
+                "name": "高跟鞋",
+                "key": "高跟鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/9.jpg",
+                "cat": 5
+            },
+            {
+                "name": "老人鞋",
+                "key": "老人鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/10.jpg",
+                "cat": 5
+            },
+            {
+                "name": "懒人鞋",
+                "key": "懒人鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/11.jpg",
+                "cat": 5
+            }
+        ]
+    },
+    {
+        "name": "数码家电",
+        "foods": [
+            {
+                "name": "数据线",
+                "key": "数据线",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/1.jpg",
+                "cat": 8
+            },
+            {
+                "name": "耳机",
+                "key": "耳机",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/2.jpg",
+                "cat": 8
+            },
+            {
+                "name": "生活家电",
+                "key": "家电",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/3.jpg",
+                "cat": 8
+            },
+            {
+                "name": "电风扇",
+                "key": "电风扇",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/4.jpg",
+                "cat": 8
+            },
+            {
+                "name": "电吹风",
+                "key": "电吹风",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/5.jpg",
+                "cat": 8
+            },
+            {
+                "name": "手机壳",
+                "key": "手机壳",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/6.jpg",
+                "cat": 8
+            },
+            {
+                "name": "榨汁机",
+                "key": "榨汁机",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/7.jpg",
+                "cat": 8
+            },
+            {
+                "name": "小家电",
+                "key": "小家电",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/8.jpg",
+                "cat": 8
+            },
+            {
+                "name": "数码电子",
+                "key": "数码",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/9.jpg",
+                "cat": 8
+            },
+            {
+                "name": "电饭锅",
+                "key": "电饭锅",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/10.jpg",
+                "cat": 8
+            },
+            {
+                "name": "手机支架",
+                "key": "手机支架",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/11.jpg",
+                "cat": 8
+            },
+            {
+                "name": "剃须刀",
+                "key": "剃须刀",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/12.jpg",
+                "cat": 8
+            },
+            {
+                "name": "充电宝",
+                "key": "充电宝",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/13.jpg",
+                "cat": 8
+            },
+            {
+                "name": "手机配件",
+                "key": "手机配件",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/14.jpg",
+                "cat": 8
+            }
+        ]
+    },
+    {
+        "name": "母婴",
+        "foods": [
+            {
+              "name": "婴童服饰",
+              "key": "衣服",
+              "icon": "https://cdn.uviewui.com/uview/common/classify/8/1.jpg",
+              "cat": 2  
+            },
+            {
+                "name": "玩具乐器",
+                "key": "玩具乐器",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/2.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "尿不湿",
+                "key": "尿不湿",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/3.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "安抚牙胶",
+                "key": "安抚牙胶",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/4.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "奶瓶奶嘴",
+                "key": "奶瓶奶嘴",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/5.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "孕妈用品",
+                "key": "孕妈用品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/6.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "宝宝用品",
+                "key": "宝宝用品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/7.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "婴童湿巾",
+                "key": "湿巾",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/8.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "喂养洗护",
+                "key": "洗护",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/9.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "婴童鞋靴",
+                "key": "童鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/10.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "口水巾",
+                "key": "口水巾",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/11.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "营养辅食",
+                "key": "营养",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/12.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "婴幼书籍",
+                "key": "书籍",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/13.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "婴儿车",
+                "key": "婴儿车",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/14.jpg",
+                "cat": 2  
+            }
+        ]
+    },
+    {
+        "name": "箱包",
+        "foods": [
+            {
+                "name": "单肩包",
+                "key": "单肩包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/1.jpg",
+                "cat": 0
+            },
+            {
+                "name": "斜挎包",
+                "key": "斜挎包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/2.jpg",
+                "cat": 0
+            },
+            {
+                "name": "女包",
+                "key": "女包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/3.jpg",
+                "cat": 0
+            },
+            {
+                "name": "男包",
+                "key": "男包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/4.jpg",
+                "cat": 0
+            },
+            {
+                "name": "双肩包",
+                "key": "双肩包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/5.jpg",
+                "cat": 0
+            },
+            {
+                "name": "小方包",
+                "key": "小方包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/6.jpg",
+                "cat": 0
+            },
+            {
+                "name": "钱包",
+                "key": "钱包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/7.jpg",
+                "cat": 0
+            },
+            {
+                "name": "旅行箱包",
+                "key": "旅行箱包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/8.jpg",
+                "cat": 0
+            },
+            {
+                "name": "零钱包",
+                "key": "零钱包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/9.jpg",
+                "cat": 0
+            },
+            {
+                "name": "手提包",
+                "key": "手提包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/10.jpg",
+                "cat": 0
+            },
+            {
+                "name": "胸包",
+                "key": "胸包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/11.jpg",
+                "cat": 0
+            }
+        ]
+    },
+    {
+        "name": "内衣",
+        "foods": [
+            {
+                "name": "袜子",
+                "key": "袜子",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/1.jpg",
+                "cat": 11
+            },
+            {
+                "name": "吊带背心",
+                "key": "吊带背心",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/2.jpg",
+                "cat": 11
+            },
+            {
+                "name": "抹胸",
+                "key": "抹胸",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/3.jpg",
+                "cat": 11
+            },
+            {
+                "name": "内裤",
+                "key": "内裤",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/4.jpg",
+                "cat": 11
+            },
+            {
+                "name": "文胸",
+                "key": "文胸",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/5.jpg",
+                "cat": 11
+            },
+            {
+                "name": "文胸套装",
+                "key": "文胸套装",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/6.jpg",
+                "cat": 11
+            },
+            {
+                "name": "打底塑身",
+                "key": "打底塑身",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/7.jpg",
+                "cat": 11
+            },
+            {
+                "name": "家居服",
+                "key": "家居服",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/8.jpg",
+                "cat": 11
+            },
+            {
+                "name": "船袜",
+                "key": "船袜",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/9.jpg",
+                "cat": 11
+            },
+            {
+                "name": "情侣睡衣",
+                "key": "情侣睡衣",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/10.jpg",
+                "cat": 11
+            },
+            {
+                "name": "丝袜",
+                "key": "丝袜",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/11.jpg",
+                "cat": 11
+            }
+        ]
+    },
+    {
+        "name": "文娱车品",
+        "foods": [
+            {
+                "name": "车市车品",
+                "key": "车市车品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/1.jpg",
+                "cat": 7
+            },
+            {
+                "name": "办公文具",
+                "key": "办公文具",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/2.jpg",
+                "cat": 7
+            },
+            {
+                "name": "考试必备",
+                "key": "考试必备",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/3.jpg",
+                "cat": 7
+            },
+            {
+                "name": "笔记本",
+                "key": "笔记本",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/4.jpg",
+                "cat": 7
+            },
+            {
+                "name": "艺术礼品",
+                "key": "礼品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/5.jpg",
+                "cat": 7
+            },
+            {
+                "name": "书写工具",
+                "key": "书写工具",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/6.jpg",
+                "cat": 7
+            },
+            {
+                "name": "车载电器",
+                "key": "车载电器",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/7.jpg",
+                "cat": 7
+            },
+            {
+                "name": "图书音像",
+                "key": "图书音像",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/8.jpg",
+                "cat": 7
+            },
+            {
+                "name": "画具画材",
+                "key": "画具画材",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/9.jpg",
+                "cat": 7
+            }
+        ]
+    },
+    {
+        "name": "配饰",
+        "foods": [
+            {
+                "name": "太阳镜",
+                "key": "太阳镜",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/1.jpg",
+                "cat": 0
+            },
+            {
+                "name": "皮带",
+                "key": "皮带",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/2.jpg",
+                "cat": 0
+            },
+            {
+                "name": "棒球帽",
+                "key": "棒球帽",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/3.jpg",
+                "cat": 0
+            },
+            {
+                "name": "手表",
+                "key": "手表",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/4.jpg",
+                "cat": 0
+            },
+            {
+                "name": "发饰",
+                "key": "发饰",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/5.jpg",
+                "cat": 0
+            },
+            {
+                "name": "项链",
+                "key": "项链",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/6.jpg",
+                "cat": 0
+            },
+            {
+                "name": "手饰",
+                "key": "手饰",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/7.jpg",
+                "cat": 0
+            },
+            {
+                "name": "耳环",
+                "key": "耳环",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/8.jpg",
+                "cat": 0
+            },
+            {
+                "name": "帽子丝巾",
+                "key": "帽子丝巾",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/9.jpg",
+                "cat": 0
+            },
+            {
+                "name": "眼镜墨镜",
+                "key": "眼镜墨镜",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/10.jpg",
+                "cat": 0
+            },
+            {
+                "name": "发带发箍",
+                "key": "发带发箍",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/11.jpg",
+                "cat": 0
+            }
+        ]
+    },
+    {
+        "name": "家装家纺",
+        "foods": [
+            {
+                "name": "家居饰品",
+                "key": "家居饰品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/1.jpg",
+                "cat": 0
+            },
+            {
+                "name": "凉席",
+                "key": "凉席",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/2.jpg",
+                "cat": 0
+            },
+            {
+                "name": "背枕靠枕",
+                "key": "靠枕",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/3.jpg",
+                "cat": 0
+            },
+            {
+                "name": "床上用品",
+                "key": "床上用品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/4.jpg",
+                "cat": 0
+            },
+            {
+                "name": "摆件",
+                "key": "摆件",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/5.jpg",
+                "cat": 0
+            },
+            {
+                "name": "四件套",
+                "key": "四件套",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/6.jpg",
+                "cat": 0
+            },
+            {
+                "name": "装饰品",
+                "key": "装饰品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/7.jpg",
+                "cat": 0
+            },
+            {
+                "name": "卫浴用品",
+                "key": "卫浴",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/8.jpg",
+                "cat": 0
+            },
+            {
+                "name": "家居家装",
+                "key": "家具",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/9.jpg",
+                "cat": 0
+            },
+            {
+                "name": "蚊帐",
+                "key": "蚊帐",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/10.jpg",
+                "cat": 0
+            },
+            {
+                "name": "墙纸贴纸",
+                "key": "墙纸",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/11.jpg",
+                "cat": 0
+            },
+            {
+                "name": "空调被",
+                "key": "空调被",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/12.jpg",
+                "cat": 0
+            }
+        ]
+    },
+    {
+        "name": "户外运动",
+        "foods": [
+            {
+                "name": "游泳装备",
+                "key": "游泳",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/1.jpg",
+                "cat": 0
+            },
+            {
+                "name": "泳镜",
+                "key": "泳镜",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/2.jpg",
+                "cat": 0
+            },
+            {
+                "name": "户外装备",
+                "key": "户外",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/3.jpg",
+                "cat": 0
+            },
+            {
+                "name": "健身服饰",
+                "key": "健身",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/4.jpg",
+                "cat": 0
+            },
+            {
+                "name": "泳衣",
+                "key": "泳衣",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/5.jpg",
+                "cat": 0
+            },
+            {
+                "name": "瑜伽垫",
+                "key": "瑜伽垫",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/6.jpg",
+                "cat": 0
+            },
+            {
+                "name": "瑜伽用品",
+                "key": "瑜伽",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/7.jpg",
+                "cat": 0
+            },
+            {
+                "name": "健身装备",
+                "key": "健身",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/8.jpg",
+                "cat": 0
+            },
+            {
+                "name": "球迷用品",
+                "key": "球迷",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/9.jpg",
+                "cat": 0
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/src/pages/sort/index.vue b/src/pages/sort/index.vue
index 4503018..39bd481 100644
--- a/src/pages/sort/index.vue
+++ b/src/pages/sort/index.vue
@@ -1,5 +1,6 @@
 <template>
-  <view>
+	<view class="u-wrap">
+		<!-- 顶部导航栏 -->
     <u-navbar :border-bottom="false" :is-back="false" :background="{ background: '#ffffff' }">
       <view class="pl-base w-full" @tap="$u.route('/pages/search/search')">
         <u-search disabled placeholder="搜索商品名称" :show-action="false"></u-search>
@@ -13,242 +14,289 @@
         </view>
       </template>
     </u-navbar>
-    <view class="rounded-b-md bg-white fixed top-0 left-0 w-full z-50">
-      <view class="w-full" :style="[{ height: StatusBar + 44 + 'px' }]"></view>
-      <u-tabs
-        class="cu-tabs w-full"
-        active-color="#378264"
-        inactive-color="#808080"
-        height="60"
-        bar-height="8"
-        :list="tabsList"
-        :is-scroll="true"
-        :current="tabsCurrent"
-        @change="tabChange"
-      ></u-tabs>
-      <view class="h-80rpx flex justify-between items-center px-40rpx">
-        <view class="text-txGray text-lg" :class="filterSort == '' ? 'text-primary' : ''" @tap="onChangeFilter('')">综合 </view>
-        <view
-          class="text-txGray text-lg flex items-center"
-          :class="filterSort == 'price' || filterSort == '-price' ? 'text-primary' : ''"
-          @tap="onPriceSort"
-        >
-          <text> 价格 </text>
-          <view>
-            <trigonometry :key="'a' + key" direction="up" :color="filterSort == 'price' ? '#378264' : '#808080'"> </trigonometry>
-            <trigonometry :key="'b' + key" direction="down" :color="filterSort == '-price' ? '#378264' : '#808080'"> </trigonometry>
-          </view>
-        </view>
-        <view
-          class="text-txGray text-lg flex items-center"
-          :class="filterSort == 'sales' || filterSort == '-sales' ? 'text-primary' : ''"
-          @tap="onSaleSort"
-        >
-          <text> 销量 </text>
-          <view>
-            <trigonometry :key="'c' + key" direction="up" :color="filterSort == 'sales' ? '#378264' : '#808080'"> </trigonometry>
-            <trigonometry :key="'d' + key" direction="down" :color="filterSort == '-sales' ? '#378264' : '#808080'"> </trigonometry>
-          </view>
-        </view>
-        <view class="text-txGray text-lg" :class="filterSort == 'release_at' ? 'text-primary' : ''" @tap="onChangeFilter('release_at')">上新</view>
-      </view>
-    </view>
-
-    <mescroll-body
-      :height="height"
-      :bottombar="false"
-      ref="mescrollRef"
-      @init="mescrollInit"
-      @down="downCallback"
-      @up="upCallback"
-      :down="downOption"
-      :up="upOption"
-    >
-      <view class="px-rowSm mt-20rpx pt-base" :style="[{ marginTop: 150 + 'rpx' }]">
-        <!-- <view class="grid grid-cols-2 gap-x-10rpx px-10rpx gap-y-20rpx">
-          <goods-item v-for="(item, index) in goods" :goods="item" :key="index"></goods-item>
-        </view> -->
-        <goods-list ref="uWaterfall" :list="goods"></goods-list>
-      </view>
-    </mescroll-body>
-  </view>
+		<view class="u-menu-wrap">
+			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
+			 :scroll-into-view="itemId">
+				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"
+				 @tap.stop="swichMenu(index)">
+					<text class="u-line-1">{{item.name}}</text>
+				</view>
+			</scroll-view>
+			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
+				<view class="page-view">
+					<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
+						<view class="item-title">
+							<text>{{item.name}}</text>
+						</view>
+            <!-- 广告位 -->
+            <view class="my-20rpx">
+              <image class="w-full h-200rpx" src="https://img1.baidu.com/it/u=1597761366,2823600315&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" mode="aspectFill"></image>
+            </view>
+						<view class="item-container">
+							<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
+								<image class="item-menu-image" :src="item1.icon" mode=""></image>
+								<view class="item-menu-name">{{item1.name}}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
 </template>
 <script>
-import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
-import CartMixin from '@/pages/shop_cart/mixin';
-export default {
-  mixins: [MescrollMixin, CartMixin],
-  data() {
-    return {
-      key: 0,
-      firstLoading: true,
-      tabsCurrent: 0,
-      tabsList: [],
-      filter: {
-        sort: '', //排序：price 价格，sales 销量，release_at 上架时间。示例：price 按价格升序，-price 按价格降序
-      },
-      downOption: {
-        // use: false,
-      },
-      upOption: {
-        auto: false,
-      },
-    };
-  },
-  computed: {
-    StatusBar() {
-      const { statusBarHeight } = this.$u.sys();
-      return statusBarHeight;
-    },
-    filterSort() {
-      return this.filter.sort;
-    },
-    goods() {
-      return this.tabsList[this.tabsCurrent]?.goods ?? [];
-    },
-    height() {
-      const { windowHeight, statusBarHeight } = this.$u.sys();
-      return windowHeight - statusBarHeight - 44 + 'px';
-    },
-  },
-  onShow() {
-    const params = uni.getStorageSync('/pages/sort/index') ?? '';
-    uni.removeStorageSync('/pages/sort/index');
-    this.id = params.id;
-    if (!!this.id && this.tabsList.length > 0) {
-      const index = this.tabsList?.findIndex(({ id }) => id == this.id);
-      if (index != this.tabsCurrent) {
-       setTimeout(()=>{
-           this.tabChange(index >= 0 ? index : 0);
-       },200)
-      }
-    }
-  },
-  methods: {
-    async downCallback() {
-      this.mescroll.resetUpScroll();
-    },
-    async upCallback(page) {
-      if (this.firstLoading) {
-        await this.getCategories();
-      }
-      this.getGoodsList(page);
-      this.firstLoading = false;
-    },
-    //改变筛选条件
-    onChangeFilter(type) {
-      if (type == this.filter.sort) return;
-      this.$u.throttle(() => {
-        this.$refs.uWaterfall.clear();
-        this.$nextTick(() => {
-          this.filter.sort = type;
-          this.mescroll.resetUpScroll();
-        });
-      });
-    },
-    //价格排序
-    onPriceSort() {
-      this.Refresh();
-      const type = this.filter.sort == 'price' ? '-price' : 'price';
-      this.onChangeFilter(type);
-    },
-    //销量排序
-    onSaleSort() {
-      this.Refresh();
-      const type = this.filter.sort == 'sales' ? '-sales' : 'sales';
-      this.onChangeFilter(type);
-    },
-    //刷新子组件
-    Refresh() {
-      this.$nextTick(() => {
-        this.key++;
-      });
-    },
-    // 切换
-    tabChange(index) {
-      this.filter.sort = '';
-      if (!this.tabsCurrent) this.tabsCurrent = 0;
-
-      this.$refs.uWaterfall.clear();
-    
-      this.$nextTick(() => {
-        console.log("=======");
-        console.log(index);
-        let preTab = this.tabsList[this.tabsCurrent];
-        preTab.y = this.mescroll.getScrollTop();
-        this.tabsCurrent = index;
-        
-        const curTab = this.tabsList[index];
-        if (!curTab.goods) {
-          this.mescroll.resetUpScroll();
-        } else {
-          this.mescroll.setPageNum(curTab.num + 1);
-          this.mescroll.endSuccess(curTab.curPageLen, curTab.hasNext);
-          this.$nextTick(() => {
-            this.mescroll.scrollTo(curTab.y, 0);
-          });
-        }
-      });
-    },
-    async getCategories() {
-      return new Promise((resolve, reject) => {
-        this.$api
-          .get('/v1/product/categories')
-          .then((resData) => {
-            resData.unshift({
-              icon: "",
-              id: -999,
-              name: "全部"
-            })
-            this.tabsList = resData.map((e) => {
-              return {
-                ...e,
-                num: 1,
-                y: 0,
-                curPageLen: 0,
-                hasNext: true,
-                goods: null,
-              };
-            });
-            if (!!this.id) {
-              const index = resData.findIndex(({ id }) => id == this.id);
-              this.tabChange(index >= 0 ? index : 0);
-            }
-            resolve(resData);
-          })
-          .catch((err) => {
-            reject(err);
-          });
-      });
-    },
-    async getGoodsList({ num, size }) {
-      let keyword = this.tabsList[this.tabsCurrent].id;
-      try {
-        const resData = await this.$api.get('/v1/product/products', {
-          params: {
-            sort: this.filter.sort,
-            per_page: size,
-            page: num,
-            category: keyword == -999 ? '' : keyword,
-          },
-        });
-        const { data } = resData;
-        let curTab = this.tabsList[this.tabsCurrent];
-        if (num === 1) curTab.goods = [];
-        curTab.goods = curTab.goods.concat(data);
-        curTab.num = num;
-        curTab.curPageLen = data.length;
-        curTab.hasNext = this.mescroll.optUp.hasNext;
-        this.mescroll.endSuccess(data.length, size == data.length);
-      } catch (error) {
-        this.mescroll.endErr();
-      }
-    },
-  },
-};
+	import classifyData from './data.js';
+	export default {
+		data() {
+			return {
+				scrollTop: 0, //tab标题的滚动条位置
+				oldScrollTop: 0,
+				current: 0, // 预设当前项的值
+				menuHeight: 0, // 左边菜单的高度
+				menuItemHeight: 0, // 左边菜单item的高度
+				itemId: '', // 栏目右边scroll-view用于滚动的id
+				tabbar: classifyData,
+				menuItemPos: [],
+				arr: [],
+				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
+				timer: null, // 定时器
+				
+			}
+		},
+		onLoad() {
+			
+		},
+		onReady() {
+			this.getMenuItemTop()
+		},
+		methods: {
+			// 点击左边的栏目切换
+			async swichMenu(index) {
+				if(this.arr.length == 0) {
+					await this.getMenuItemTop();
+				}
+				if (index == this.current) return;
+				this.scrollRightTop = this.oldScrollTop;
+				this.$nextTick(function(){
+					this.scrollRightTop = this.arr[index];
+					this.current = index;
+					this.leftMenuStatus(index);
+				})
+			},
+			// 获取一个目标元素的高度
+			getElRect(elClass, dataVal) {
+				new Promise((resolve, reject) => {
+					const query = uni.createSelectorQuery().in(this);
+					query.select('.' + elClass).fields({
+						size: true
+					}, res => {
+						// 如果节点尚未生成，res值为null，循环调用执行
+						if (!res) {
+							setTimeout(() => {
+								this.getElRect(elClass);
+							}, 10);
+							return;
+						}
+						this[dataVal] = res.height;
+						resolve();
+					}).exec();
+				})
+			},
+			// 观测元素相交状态
+			async observer() {
+				this.tabbar.map((val, index) => {
+					let observer = uni.createIntersectionObserver(this);
+					// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
+					// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
+					observer.relativeTo('.right-box', {
+						top: 0
+					}).observe('#item' + index, res => {
+						if (res.intersectionRatio > 0) {
+							let id = res.id.substring(4);
+							this.leftMenuStatus(id);
+						}
+					})
+				})
+			},
+			// 设置左边菜单的滚动状态
+			async leftMenuStatus(index) {
+				this.current = index;
+				// 如果为0，意味着尚未初始化
+				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
+					await this.getElRect('menu-scroll-view', 'menuHeight');
+					await this.getElRect('u-tab-item', 'menuItemHeight');
+				}
+				// 将菜单活动item垂直居中
+				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
+			},
+			// 获取右边菜单每个item到顶部的距离
+			getMenuItemTop() {
+				new Promise(resolve => {
+					let selectorQuery = uni.createSelectorQuery();
+					selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
+						// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
+						if(!rects.length) {
+							setTimeout(() => {
+								this.getMenuItemTop();
+							}, 10);
+							return ;
+						}
+						rects.forEach((rect) => {
+							// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
+							this.arr.push(rect.top - rects[0].top);
+							resolve();
+						})
+					}).exec()
+				})
+			},
+			// 右边菜单滚动
+			async rightScroll(e) {
+				this.oldScrollTop = e.detail.scrollTop;
+				if(this.arr.length == 0) {
+					await this.getMenuItemTop();
+				}
+				if(this.timer) return ;
+				if(!this.menuHeight) {
+					await this.getElRect('menu-scroll-view', 'menuHeight');
+				}
+				setTimeout(() => { // 节流
+					this.timer = null;
+					// scrollHeight为右边菜单垂直中点位置
+					let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
+					for (let i = 0; i < this.arr.length; i++) {
+						let height1 = this.arr[i];
+						let height2 = this.arr[i + 1];
+						// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
+						if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
+							this.leftMenuStatus(i);
+							return ;
+						}
+					}
+				}, 10)
+			}
+		}
+	}
 </script>
+
 <style lang="scss" scoped>
-.badge {
-  @apply bg-badge;
-}
+	.u-wrap {
+		height: calc(100vh);
+		/* #ifdef H5 */
+		height: calc(100vh - var(--window-top));
+		/* #endif */
+		display: flex;
+		flex-direction: column;
+	}
+
+	.u-search-box {
+		padding: 18rpx 30rpx;
+	}
+
+	.u-menu-wrap {
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+	}
+
+	.u-search-inner {
+		background-color: rgb(234, 234, 234);
+		border-radius: 100rpx;
+		display: flex;
+		align-items: center;
+		padding: 10rpx 16rpx;
+	}
+
+	.u-search-text {
+		font-size: 26rpx;
+		color: $u-tips-color;
+		margin-left: 10rpx;
+	}
+
+	.u-tab-view {
+		width: 200rpx;
+		height: 100%;
+	}
+	.u-tab-item {
+		height: 110rpx;
+		background: #f6f6f6;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 26rpx;
+		color: #444;
+		font-weight: 400;
+		line-height: 1;
+	}
+
+	.u-tab-item-active {
+		position: relative;
+		color: #000;
+		font-size: 30rpx;
+		font-weight: 600;
+		background: #fff;
+	}
+
+	.u-tab-item-active::before {
+		content: "";
+		position: absolute;
+		border-left: 4px solid $u-type-primary;
+		height: 32rpx;
+		left: 0;
+		top: 39rpx;
+	}
+
+	.u-tab-view {
+		height: 100%;
+	}
+
+	.right-box {
+		background-color: rgb(250, 250, 250);
+	}
+
+	.page-view {
+		padding: 16rpx;
+	}
+
+	.class-item {
+		margin-bottom: 30rpx;
+		background-color: #fff;
+		padding: 16rpx;
+		border-radius: 8rpx;
+	}
+
+	// .class-item:last-child {
+	// 	min-height: 100vh;
+	// }
+
+	.item-title {
+		font-size: 26rpx;
+		color: $u-main-color;
+		font-weight: bold;
+	}
+
+	.item-menu-name {
+		font-weight: normal;
+		font-size: 24rpx;
+		color: $u-main-color;
+	}
+
+	.item-container {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.thumb-box {
+		width: 33.333333%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		margin-top: 20rpx;
+	}
+
+	.item-menu-image {
+		width: 120rpx;
+		height: 120rpx;
+	}
 </style>
diff --git a/src/pages/sort/index1.vue b/src/pages/sort/index1.vue
new file mode 100644
index 0000000..4503018
--- /dev/null
+++ b/src/pages/sort/index1.vue
@@ -0,0 +1,254 @@
+<template>
+  <view>
+    <u-navbar :border-bottom="false" :is-back="false" :background="{ background: '#ffffff' }">
+      <view class="pl-base w-full" @tap="$u.route('/pages/search/search')">
+        <u-search disabled placeholder="搜索商品名称" :show-action="false"></u-search>
+      </view>
+      <template #right>
+        <view class="mx-base relative" @tap="$u.routeAuth('/pageA/news/index')">
+          <u-icon name="chat" size="48"></u-icon>
+          <block v-if="news_num > 0">
+            <u-badge :is-dot="true" size="16" :offset="[0, 2]" class="badge"></u-badge>
+          </block>
+        </view>
+      </template>
+    </u-navbar>
+    <view class="rounded-b-md bg-white fixed top-0 left-0 w-full z-50">
+      <view class="w-full" :style="[{ height: StatusBar + 44 + 'px' }]"></view>
+      <u-tabs
+        class="cu-tabs w-full"
+        active-color="#378264"
+        inactive-color="#808080"
+        height="60"
+        bar-height="8"
+        :list="tabsList"
+        :is-scroll="true"
+        :current="tabsCurrent"
+        @change="tabChange"
+      ></u-tabs>
+      <view class="h-80rpx flex justify-between items-center px-40rpx">
+        <view class="text-txGray text-lg" :class="filterSort == '' ? 'text-primary' : ''" @tap="onChangeFilter('')">综合 </view>
+        <view
+          class="text-txGray text-lg flex items-center"
+          :class="filterSort == 'price' || filterSort == '-price' ? 'text-primary' : ''"
+          @tap="onPriceSort"
+        >
+          <text> 价格 </text>
+          <view>
+            <trigonometry :key="'a' + key" direction="up" :color="filterSort == 'price' ? '#378264' : '#808080'"> </trigonometry>
+            <trigonometry :key="'b' + key" direction="down" :color="filterSort == '-price' ? '#378264' : '#808080'"> </trigonometry>
+          </view>
+        </view>
+        <view
+          class="text-txGray text-lg flex items-center"
+          :class="filterSort == 'sales' || filterSort == '-sales' ? 'text-primary' : ''"
+          @tap="onSaleSort"
+        >
+          <text> 销量 </text>
+          <view>
+            <trigonometry :key="'c' + key" direction="up" :color="filterSort == 'sales' ? '#378264' : '#808080'"> </trigonometry>
+            <trigonometry :key="'d' + key" direction="down" :color="filterSort == '-sales' ? '#378264' : '#808080'"> </trigonometry>
+          </view>
+        </view>
+        <view class="text-txGray text-lg" :class="filterSort == 'release_at' ? 'text-primary' : ''" @tap="onChangeFilter('release_at')">上新</view>
+      </view>
+    </view>
+
+    <mescroll-body
+      :height="height"
+      :bottombar="false"
+      ref="mescrollRef"
+      @init="mescrollInit"
+      @down="downCallback"
+      @up="upCallback"
+      :down="downOption"
+      :up="upOption"
+    >
+      <view class="px-rowSm mt-20rpx pt-base" :style="[{ marginTop: 150 + 'rpx' }]">
+        <!-- <view class="grid grid-cols-2 gap-x-10rpx px-10rpx gap-y-20rpx">
+          <goods-item v-for="(item, index) in goods" :goods="item" :key="index"></goods-item>
+        </view> -->
+        <goods-list ref="uWaterfall" :list="goods"></goods-list>
+      </view>
+    </mescroll-body>
+  </view>
+</template>
+<script>
+import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
+import CartMixin from '@/pages/shop_cart/mixin';
+export default {
+  mixins: [MescrollMixin, CartMixin],
+  data() {
+    return {
+      key: 0,
+      firstLoading: true,
+      tabsCurrent: 0,
+      tabsList: [],
+      filter: {
+        sort: '', //排序：price 价格，sales 销量，release_at 上架时间。示例：price 按价格升序，-price 按价格降序
+      },
+      downOption: {
+        // use: false,
+      },
+      upOption: {
+        auto: false,
+      },
+    };
+  },
+  computed: {
+    StatusBar() {
+      const { statusBarHeight } = this.$u.sys();
+      return statusBarHeight;
+    },
+    filterSort() {
+      return this.filter.sort;
+    },
+    goods() {
+      return this.tabsList[this.tabsCurrent]?.goods ?? [];
+    },
+    height() {
+      const { windowHeight, statusBarHeight } = this.$u.sys();
+      return windowHeight - statusBarHeight - 44 + 'px';
+    },
+  },
+  onShow() {
+    const params = uni.getStorageSync('/pages/sort/index') ?? '';
+    uni.removeStorageSync('/pages/sort/index');
+    this.id = params.id;
+    if (!!this.id && this.tabsList.length > 0) {
+      const index = this.tabsList?.findIndex(({ id }) => id == this.id);
+      if (index != this.tabsCurrent) {
+       setTimeout(()=>{
+           this.tabChange(index >= 0 ? index : 0);
+       },200)
+      }
+    }
+  },
+  methods: {
+    async downCallback() {
+      this.mescroll.resetUpScroll();
+    },
+    async upCallback(page) {
+      if (this.firstLoading) {
+        await this.getCategories();
+      }
+      this.getGoodsList(page);
+      this.firstLoading = false;
+    },
+    //改变筛选条件
+    onChangeFilter(type) {
+      if (type == this.filter.sort) return;
+      this.$u.throttle(() => {
+        this.$refs.uWaterfall.clear();
+        this.$nextTick(() => {
+          this.filter.sort = type;
+          this.mescroll.resetUpScroll();
+        });
+      });
+    },
+    //价格排序
+    onPriceSort() {
+      this.Refresh();
+      const type = this.filter.sort == 'price' ? '-price' : 'price';
+      this.onChangeFilter(type);
+    },
+    //销量排序
+    onSaleSort() {
+      this.Refresh();
+      const type = this.filter.sort == 'sales' ? '-sales' : 'sales';
+      this.onChangeFilter(type);
+    },
+    //刷新子组件
+    Refresh() {
+      this.$nextTick(() => {
+        this.key++;
+      });
+    },
+    // 切换
+    tabChange(index) {
+      this.filter.sort = '';
+      if (!this.tabsCurrent) this.tabsCurrent = 0;
+
+      this.$refs.uWaterfall.clear();
+    
+      this.$nextTick(() => {
+        console.log("=======");
+        console.log(index);
+        let preTab = this.tabsList[this.tabsCurrent];
+        preTab.y = this.mescroll.getScrollTop();
+        this.tabsCurrent = index;
+        
+        const curTab = this.tabsList[index];
+        if (!curTab.goods) {
+          this.mescroll.resetUpScroll();
+        } else {
+          this.mescroll.setPageNum(curTab.num + 1);
+          this.mescroll.endSuccess(curTab.curPageLen, curTab.hasNext);
+          this.$nextTick(() => {
+            this.mescroll.scrollTo(curTab.y, 0);
+          });
+        }
+      });
+    },
+    async getCategories() {
+      return new Promise((resolve, reject) => {
+        this.$api
+          .get('/v1/product/categories')
+          .then((resData) => {
+            resData.unshift({
+              icon: "",
+              id: -999,
+              name: "全部"
+            })
+            this.tabsList = resData.map((e) => {
+              return {
+                ...e,
+                num: 1,
+                y: 0,
+                curPageLen: 0,
+                hasNext: true,
+                goods: null,
+              };
+            });
+            if (!!this.id) {
+              const index = resData.findIndex(({ id }) => id == this.id);
+              this.tabChange(index >= 0 ? index : 0);
+            }
+            resolve(resData);
+          })
+          .catch((err) => {
+            reject(err);
+          });
+      });
+    },
+    async getGoodsList({ num, size }) {
+      let keyword = this.tabsList[this.tabsCurrent].id;
+      try {
+        const resData = await this.$api.get('/v1/product/products', {
+          params: {
+            sort: this.filter.sort,
+            per_page: size,
+            page: num,
+            category: keyword == -999 ? '' : keyword,
+          },
+        });
+        const { data } = resData;
+        let curTab = this.tabsList[this.tabsCurrent];
+        if (num === 1) curTab.goods = [];
+        curTab.goods = curTab.goods.concat(data);
+        curTab.num = num;
+        curTab.curPageLen = data.length;
+        curTab.hasNext = this.mescroll.optUp.hasNext;
+        this.mescroll.endSuccess(data.length, size == data.length);
+      } catch (error) {
+        this.mescroll.endErr();
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.badge {
+  @apply bg-badge;
+}
+</style>
diff --git a/src/static/images/svip/no_svip.png b/src/static/images/svip/no_svip.png
new file mode 100644
index 0000000..f47bd60
Binary files /dev/null and b/src/static/images/svip/no_svip.png differ
diff --git a/src/static/images/svip/svip.png b/src/static/images/svip/svip.png
new file mode 100644
index 0000000..ea5e1d2
Binary files /dev/null and b/src/static/images/svip/svip.png differ
diff --git a/src/style/index.scss b/src/style/index.scss
index 09b5e77..7c149c9 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -209,7 +209,8 @@ page {
   border-bottom: 1rpx solid #E5E5E5;
 }
 .border{
-  border: 1px solid !important;
+  border-width: 1px;
+  border-style: solid;
 }
 .inputHeight {
   border: 1rpx solid;
@@ -228,4 +229,10 @@ page {
  button::after{ border: none; }
  image{
    height: auto;
+ }
+ .price-text {
+   &::before {
+     content: '￥';
+     font-size: 60%;
+   }
  }
\ No newline at end of file