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
14 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/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/views/detail/Detail.vue?vue&type=style&index=0&id=cac49146&scoped=true&lang=css&","dependencies":[{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/views/detail/Detail.vue","mtime":1617771144321},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCi5za3UgewogIHBvc2l0aW9uOiByZWxhdGl2ZTsKICB6LWluZGV4OiA5OTk5OwogIGhlaWdodDogMzAwcHg7CiAgd2lkdGg6IDMwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmMDA7Cn0KLmRldGFpbCB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBoZWlnaHQ6IDEwMHZoOwogIHBvc2l0aW9uOiByZWxhdGl2ZTsKfQojZGV0YWlsLW5hdiB7CiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKDI0NSwgMjQzLCAyNDMpOwogIGNvbG9yOiAjOTk5Owp9Ci5jb250ZW50IHsKICBsZWZ0OiAwOwogIHJpZ2h0OiAwOwogIHRvcDogNDRweDsKICBib3R0b206IDU4cHg7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKICBwb3NpdGlvbjogYWJzb2x1dGU7Cn0KLmJhY2t1cCB7CiAgei1pbmRleDogOTsKfQo="},{"version":3,"sources":["Detail.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyTA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Detail.vue","sourceRoot":"src/views/detail","sourcesContent":["<template>\n <div class=\"detail\">\n <DetailNewBar id=\"detail-nav\" @titleClick=\"titleClick\" ref=\"nav\" />\n <scroll\n class=\"content\"\n ref=\"scroll\"\n :probe-type=\"3\"\n :pull-up-load=\"true\"\n @pullingUp=\"loadMore\"\n @pullingDown=\"pullingDown\"\n @scrollw=\"contentScoll\"\n >\n <DetailSwiper :top-images=\"topImages\" />\n <DetailBaseInfo :goods=\"goods\" />\n <DetailCommentInfo ref=\"comment\" :comment-info=\"commentInfo\" />\n <DetailGoodsInfo\n ref=\"shopDetail\"\n :detail-info=\"detailInfo\"\n @detailImageload=\"detailImageload\"\n />\n <DetailParamInfo ref=\"Tip\" />\n </scroll>\n <detail-bottom-bar id=\"bottom-nav\" />\n <detail-bottom-bar\n class=\"bottom-nav\"\n @addToCart=\"selectshop\"\n @bugthing=\"selectshop\"\n />\n <van-sku\n v-model=\"skushow\"\n :sku=\"sku\"\n :goods=\"this.good\"\n :goods-id=\"goods_id\"\n :message-config=\"messageConfig\"\n @add-cart=\"addToCart\"\n v-if=\"this.skuisexit\"\n ref=\"sukRef\"\n />\n <back-top class=\"backup\" @click.native=\"backClick\" v-show=\"isShowBackTop\" />\n </div>\n</template>\n\n<script>\nimport DetailNewBar from \"@/views/detail/childComps/DetailNewBar\";\nimport DetailSwiper from \"@/views/detail/childComps/DetailSwiper\";\nimport DetailBaseInfo from \"@/views/detail/childComps/DetailBaseInfo\";\nimport DetailShopInfo from \"@/views/detail/childComps/DetailShopInfo\";\nimport DetailGoodsInfo from \"@/views/detail/childComps/DetailGoodsInfo\";\nimport DetailParamInfo from \"@/views/detail/childComps/DetailParamInfo\";\nimport DetailCommentInfo from \"@/views/detail/childComps/DetailCommentInfo\";\nimport DetailBottomBar from \"@/views/detail/childComps/DetailBottomBar\";\n\nimport backTop from \"@/components/content/backTop/backTop\";\nimport scroll from \"@/components/common/Scroll/Scroll\";\n\nimport { itemListenerMixin, backTopMixin } from \"@/common/mixin\";\nimport { debounce } from \"@/common/utils\";\n\nimport { getDetail } from \"@/network/detail\";\n\nexport default {\n name: \"Detail\",\n components: {\n DetailNewBar,\n DetailSwiper,\n DetailBaseInfo,\n DetailShopInfo,\n DetailGoodsInfo,\n DetailParamInfo,\n DetailCommentInfo,\n DetailBottomBar,\n\n backTop,\n scroll\n },\n mixins: [itemListenerMixin, backTopMixin],\n data() {\n return {\n skuisexit: true,\n iid: null,\n topImages: [],\n goods: {},\n shop: {},\n detailInfo: [],\n paramInfo: {},\n commentInfo: {},\n recommends: [],\n themeTopYs: [],\n getThemeTopY: null,\n currentIndex: 0,\n message: \"\",\n show: false,\n skushow: false,\n sku: {\n // 所有sku规格类目与其值的从属关系比如商品有颜色和尺码两大类规格颜色下面又有红色和蓝色两个规格值。\n // 可以理解为一个商品可以有多个规格类目,一个规格类目下可以有多个规格值。\n tree: [\n {\n k: \"规格\", // skuKeyName规格类目名称\n k_s: \"s1\", // skuKeyStrsku 组合列表(下方 list中当前类目对应的 key 值value 值会是从属于当前类目的一个规格值 id\n v: [\n {\n id: \"1\", // skuValueId规格值 id\n name: \"经典\", // skuValueName规格值名称\n imgUrl: \"\", // 规格类目图片,只有第一个规格类目可以定义图片\n previewImgUrl: \"\" // 用于预览显示的规格类目图片\n },\n {\n id: \"2\",\n name: \"原味\",\n imgUrl: \"\",\n previewImgUrl: \"\"\n }\n ],\n largeImageMode: true // 是否展示大图模式\n }\n ],\n // 所有 sku 的组合列表比如红色、M 码为一个 sku 组合红色、S 码为另一个组合\n list: [\n {\n id: 1314520, // skuId\n s1: \"1\", // 规格类目 k_s 为 s1 的对应规格值 id\n price: 100, // 价格(单位分)\n stock_num: 110, // 当前 sku 组合对应的库存\n goods_id: 946755,\n price: \"\",\n stock_num: 999 //库存\n },\n {\n id: 1314521, // skuId\n s1: \"2\", // 规格类目 k_s 为 s1 的对应规格值 id\n price: 100, // 价格(单位分)\n stock_num: 110, // 当前 sku 组合对应的库存\n goods_id: 946755,\n stock_num: 999\n }\n ],\n price: \"\", // 默认价格(单位元)\n stock_num: 999, // 商品总库存\n collection_id: 1314520, // 无规格商品 skuId 取 collection_id否则取所选 sku 组合对应的 id\n none_sku: false, // 是否无规格商品\n messages: [\n {\n // 商品留言\n datetime: \"0\", // 留言类型为 time 时,是否含日期。'1' 表示包含\n multiple: \"0\", // 留言类型为 text 时,是否多行文本。'1' 表示多行\n name: \"留言\", // 留言名称\n type: \"text\", // 留言类型,可选: id_no身份证, text, tel, date, time, email\n required: \"1\", // 是否必填 '1' 表示必填\n placeholder: \"\" // 可选值,占位文本\n }\n ],\n hide_stock: false // 是否隐藏剩余库存\n },\n good: {\n // 默认商品 sku 缩略图\n picture: \"\"\n },\n goods_id: \"1314520\",\n initialSku: {\n // 键skuKeyStrsku 组合列表中当前类目对应的 key 值)\n // 值skuValueId规格值 id\n s1: \"1\",\n // 初始选中数量\n selectedNum: 1\n // 初始选中的商品属性\n // 键属性id\n // 值属性值id列表\n },\n messageConfig: {\n initialMessages: {\n 留言: \"留言信息\"\n }\n }\n };\n },\n created() {\n // //home主页传入id\n this.iid = this.$route.params.id;\n // //数据的展示\n getDetail(this.iid).then(res => {\n const data = res.data.data;\n // //轮播图的切换\n this.topImages = data.topBanner;\n this.good.picture = this.topImages[0];\n\n this.sku.tree[0].v[0].imgUrl = this.topImages[0];\n this.sku.tree[0].v[0].previewImgUrl = this.topImages[0];\n this.sku.tree[0].v[1].imgUrl = this.topImages[1];\n this.sku.tree[0].v[1].previewImgUrl = this.topImages[1];\n // //商品介绍\n this.goods = data.shopMessage;\n this.sku.list[0].price = parseInt(this.goods.newprice) * 100;\n this.sku.list[1].price = parseInt(this.goods.newprice) * 100;\n this.sku.price = parseInt(this.goods.newprice);\n // //店铺名的展示\n this.shop = data.content;\n // //穿着展示\n this.detailInfo = data.special;\n // //商品推荐的展示\n // this.paramInfo = data.special\n this.commentInfo = data.comment;\n // 导航栏点击切换\n this.getThemeTopY = debounce(() => {\n this.themeTopYs = [];\n this.themeTopYs.push(0);\n this.themeTopYs.push(this.$refs.comment.$el.offsetTop);\n this.themeTopYs.push(this.$refs.shopDetail.$el.offsetTop);\n this.themeTopYs.push(this.$refs.Tip.$el.offsetTop);\n this.themeTopYs.push(Number.MAX_VALUE);\n }, 500);\n });\n },\n mounted() {},\n destroyed() {\n //无keep-live时activated无法使用\n this.$bus.$off(\"itemImgLoad\", this.itemImgListener);\n },\n methods: {\n //上拉图片加载\n detailImageload() {\n this.itemImgListener();\n this.getThemeTopY();\n },\n //导航栏点击切换\n titleClick(index) {\n this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 1000);\n },\n loadMore() {\n // this.getHomeGoods(this.currentType)\n this.$refs.scroll.refresh();\n },\n pullingDown() {\n this.pullingdown = true;\n setTimeout(() => {\n this.pullingdown = false;\n this.$refs.scroll.finishPullDown();\n }, 0);\n },\n //位置移动时导航栏跟着移动\n positionScroll(position) {\n const positionY = -position.y;\n let length = this.themeTopYs.length;\n for (let i = 0; i < length - 1; i++) {\n if (\n this.currentIndex !== i &&\n positionY >= this.themeTopYs[i] &&\n positionY < this.themeTopYs[i + 1]\n ) {\n this.currentIndex = i;\n this.$refs.nav.currentIndex = this.currentIndex;\n }\n }\n },\n //mixin混入回退顶部的按钮\n totalScroll(position) {\n this.positionScroll(position);\n this.contentScoll(position);\n },\n\n selectshop() {\n this.skushow = true;\n },\n\n //加入购物车\n addToCart() {\n this.skushow = true;\n //获取购物车需要展示的东西\n const product = {};\n product.image = this.topImages[0];\n product.title = this.goods.title;\n product.desc = this.goods.desc;\n product.price = this.goods.newprice;\n product.iid = this.iid;\n var ovanstepperinput = document.getElementsByClassName(\n \"van-stepper__input\"\n )[0];\n var n = ovanstepperinput.getAttribute(\"aria-valuenow\");\n product.add = parseInt(n);\n this.$store.dispatch(\"addCart\", product).then(res => {\n this.$toast.show(res, 2000);\n this.skushow = false;\n this.skuisexit = false;\n this.skuisexit = true;\n });\n },\n bugthing() {\n this.skushow = true;\n //获取购物车需要展示的东西\n const product = {};\n product.image = this.topImages[0];\n product.title = this.goods.title;\n product.desc = this.goods.desc;\n product.price = this.goods.newprice;\n product.iid = this.iid; \n var ovanstepperinput = document.getElementsByClassName(\n \"van-stepper__input\"\n )[0];\n var n = ovanstepperinput.getAttribute(\"aria-valuenow\");\n product.add = parseInt(n);\n this.$store.dispatch(\"addCart\", product).then(res => {\n this.$toast.show(res, 2000);\n this.skushow = false;\n this.skuisexit = false;\n this.skuisexit = true;\n this.$router.push(\"/cart\");\n });\n }\n }\n};\n</script>\n\n<style scoped>\n.sku {\n position: relative;\n z-index: 9999;\n height: 300px;\n width: 300px;\n background-color: #f00;\n}\n.detail {\n background-color: #ffffff;\n height: 100vh;\n position: relative;\n}\n#detail-nav {\n background-color: rgb(245, 243, 243);\n color: #999;\n}\n.content {\n left: 0;\n right: 0;\n top: 44px;\n bottom: 58px;\n overflow: hidden;\n position: absolute;\n}\n.backup {\n z-index: 9;\n}\n</style>\n"]}]}