{"remainingRequest":"/Users/linhuakun/Downloads/coderlhk/codewhy/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/linhuakun/Downloads/coderlhk/codewhy/src/views/category/Category.vue?vue&type=style&index=0&id=5575d393&scoped=true&lang=css&","dependencies":[{"path":"/Users/linhuakun/Downloads/coderlhk/codewhy/src/views/category/Category.vue","mtime":1607666509054},{"path":"/Users/linhuakun/Downloads/coderlhk/codewhy/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/codewhy/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/codewhy/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/codewhy/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/codewhy/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgojY2F0ZWdvcnkgewogIGhlaWdodDogMTAwdmg7CiAgcG9zaXRpb246IHJlbGF0aXZlOwp9CgoubmF2LWJhciB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItdGludCk7CiAgZm9udC13ZWlnaHQ6IDcwMDsKICBjb2xvcjogI2ZmZjsKfQoKLmNvbnRlbnQgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICBsZWZ0OiAwOwogIHJpZ2h0OiAwOwogIHRvcDogNDRweDsKICBib3R0b206IDQ5cHg7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKICBkaXNwbGF5OiBmbGV4Owp9CgojaG9tZXsKICBoZWlnaHQ6IDEwMHZoOwogIGZsZXg6IDE7CiAgcG9zaXRpb246IHJlbGF0aXZlOwp9CgojdGFiLWNvbnRlbnQgewogIGxlZnQ6IDA7CiAgcmlnaHQ6IDA7CiAgdG9wOjA7CiAgYm90dG9tOiA0OXB4OwogIG92ZXJmbG93OiBoaWRkZW47CiAgcG9zaXRpb246IGFic29sdXRlOwp9CgoudGFiLWNvbnRyb2x7CiAgei1pbmRleDogMTAwOwogIGZsZXg6IDE7CiAgcG9zaXRpb246IHJlbGF0aXZlOwoKfQoK"},{"version":3,"sources":["Category.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwJA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA","file":"Category.vue","sourceRoot":"src/views/category","sourcesContent":["<template>\n  <div id=\"category\" >\n    <NavBar class=\"nav-bar\"><div slot=\"center\">商品分类</div></NavBar>\n    <div class=\"content\">\n    <TabMenu :categories=\"categories\"\n             @selectItem=\"selectItem\">\n\n    </TabMenu>\n      <div id=\"home\">\n        <scroll id=\"tab-content\"\n                :data=\"[categoryData]\"\n                ref=\"scroll\"\n                :probe-type=\"3\">\n          <tab-content-category :subcategories=\"showSubcategory\" ></tab-content-category>\n          <tab-control\n            :titles=\"['综合','新品','销量']\"\n            @tabClick=\"tabClick\"\n            ref=\"tabControl\"></tab-control>\n          <tab-content-detail :category-detail=\"showCategoryDetail\"></tab-content-detail>\n        </scroll>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n\n import TabMenu from \"@/views/category/childComps/TabMenu\";\n import TabContentDetail from \"@/views/category/childComps/TabContentDetail\";\n import TabContentCategory from \"@/views/category/childComps/TabContentCategory\";\n\n\n import Scroll from \"@/components/common/Scroll/Scroll\";\n import NavBar from \"@/components/common/navbar/NavBar\";\n import TabControl from \"@/components/content/tabControl/TabControl\";\n\n import {getCategory, getSubcategory,getCategoryDetail} from \"@/network/category\";\n import {POP, SELL, NEW} from \"@/common/const\"\n import {tabControlMixin,itemListenerMixin} from \"@/common/mixin\";\n\n export default {\n  name: \"Category\",\n  components:{\n    TabMenu,\n    TabContentDetail,\n    TabContentCategory,\n\n    Scroll,\n    NavBar,\n    TabControl,\n  },\n   mixins:[tabControlMixin,itemListenerMixin],\n  data(){\n    return{\n      categoryData:{\n      },\n      currentIndex:-1,\n      categories:[],\n      saveY:0,\n    }\n  },\n  created() {\n    this._getCategory()\n  },\n   computed:{\n     showSubcategory() {\n       //给小图片传值\n       if (this.currentIndex === -1) return {}\n       return this.categoryData[this.currentIndex].subcategories\n     },\n     showCategoryDetail() {\n       //40张商品数据传值\n       if (this.currentIndex === -1) return []\n       return this.categoryData[this.currentIndex].categoryDetail[this.currentType]\n     },\n   },\n  methods:{\n    _getCategory(){\n      //获取三种类型商品的数据\n      getCategory().then(res => {\n        this.categories = res.data.data.category.list\n        for (let i = 0; i < this.categories.length; i++) {\n          this.categoryData[i] = {\n            //subcategories表示子类图片，小型图片 subclass+category\n            subcategories: {},\n            categoryDetail: {\n              'pop': [],\n              'new': [],\n              'sell': []\n            }\n          }\n        }\n        //默认情况下index=0\n        this._getSubcategories(0)\n      })\n    },\n    _getSubcategories(index){\n\n      this.currentIndex=index;\n\n      const mailKey=this.categories[index].maitKey;\n\n      getSubcategory(mailKey).then(res=>{\n        //获取分类商品数据\n        this.categoryData[index].subcategories=res.data.data\n        //...表示多个参数\n        this.categoryData={...this.categoryData}\n        this._getCategoryDetail(POP)\n        this._getCategoryDetail(SELL)\n        this._getCategoryDetail(NEW)\n      })\n\n    },\n    _getCategoryDetail(type) {\n      // 1.获取请求的miniWallkey\n      const miniWallkey = this.categories[this.currentIndex].miniWallkey;\n      // 2.发送请求,传入miniWallkey和type\n      getCategoryDetail(miniWallkey, type).then(res => {\n        // 3.将获取的数据保存下来，下面40个商品展示\n        this.categoryData[this.currentIndex].categoryDetail[type] = res.data\n        this.categoryData = {...this.categoryData}\n      })\n    },\n    selectItem(index) {\n      switch (index) {\n        case 0:\n          this.currentType = 'pop'\n          break\n        case 1:\n          this.currentType = 'new'\n          break\n        case 2:\n          this.currentType = 'sell'\n          break\n      }\n      //三种类型的切换\n      this._getSubcategories(index)\n    }\n  },\n   activated(){\n     this.$refs.scroll.refresh()\n     this.$refs.scroll.scrollTo(0,this.saveY,0)\n   },\n   deactivated(){\n     this.saveY = this.$refs.scroll.getScrollY()\n     //判断当前哪个图片加载监听\n     this.$bus.$off('itemImgLoad',this.itemImgListener)\n   }\n}\n</script>\n\n<style scoped>\n#category {\n  height: 100vh;\n  position: relative;\n}\n\n.nav-bar {\n  background-color: var(--color-tint);\n  font-weight: 700;\n  color: #fff;\n}\n\n.content {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 44px;\n  bottom: 49px;\n  overflow: hidden;\n  display: flex;\n}\n\n#home{\n  height: 100vh;\n  flex: 1;\n  position: relative;\n}\n\n#tab-content {\n  left: 0;\n  right: 0;\n  top:0;\n  bottom: 49px;\n  overflow: hidden;\n  position: absolute;\n}\n\n.tab-control{\n  z-index: 100;\n  flex: 1;\n  position: relative;\n\n}\n\n</style>\n"]}]}