You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1 line
7.3 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

{"remainingRequest":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/linhuakun/Downloads/nodejs/codewhy/src/views/category/Category.vue?vue&type=style&index=0&id=1a0c5ce5&scoped=true&lang=css&","dependencies":[{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/src/views/category/Category.vue","mtime":1607666509054},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/nodejs/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"]}]}