From 2fa2537f1a138b465d864aeb6db781e9a40b3ffc Mon Sep 17 00:00:00 2001
From: h30830569 <30830569@qq.com>
Date: Tue, 17 May 2022 13:32:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=86=99=E5=85=85=E5=80=BC=E4=BC=9A=E5=91=98?=
 =?UTF-8?q?=E7=9A=84=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pageB/svip/index.vue           |   75 ++
 src/pages.json                     |   13 +-
 src/pages/healthy/index.vue        |  177 +++--
 src/pages/healthy/index1.vue       |  109 +++
 src/pages/me/me.vue                |    2 +-
 src/pages/sort/data.js             | 1087 ++++++++++++++++++++++++++++
 src/pages/sort/index.vue           |  518 +++++++------
 src/pages/sort/index1.vue          |  254 +++++++
 src/static/images/svip/no_svip.png |  Bin 0 -> 6112 bytes
 src/static/images/svip/svip.png    |  Bin 0 -> 6338 bytes
 src/style/index.scss               |    9 +-
 11 files changed, 1947 insertions(+), 297 deletions(-)
 create mode 100644 src/pageB/svip/index.vue
 create mode 100644 src/pages/healthy/index1.vue
 create mode 100644 src/pages/sort/data.js
 create mode 100644 src/pages/sort/index1.vue
 create mode 100644 src/static/images/svip/no_svip.png
 create mode 100644 src/static/images/svip/svip.png

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 0000000000000000000000000000000000000000..f47bd608a62e93e6bff8b810ab9a0d77a956c06f
GIT binary patch
literal 6112
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

literal 0
HcmV?d00001

diff --git a/src/static/images/svip/svip.png b/src/static/images/svip/svip.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea5e1d2637a9fb9917b18dc1cab8279466de9cd5
GIT binary patch
literal 6338
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

literal 0
HcmV?d00001

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