{"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=643ca586&scoped=true&lang=css&","dependencies":[{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/views/detail/Detail.vue","mtime":1618365820626},{"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:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCi5za3UgewogIHBvc2l0aW9uOiByZWxhdGl2ZTsKICB6LWluZGV4OiA5OTk5OwogIGhlaWdodDogMzAwcHg7CiAgd2lkdGg6IDMwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmMDA7Cn0KLmRldGFpbCB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBoZWlnaHQ6IDEwMHZoOwogIHBvc2l0aW9uOiByZWxhdGl2ZTsKfQojZGV0YWlsLW5hdiB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2RmMzgzMjsKICBjb2xvcjogI2ZmZjsKfQouY29udGVudCB7CiAgbGVmdDogMDsKICByaWdodDogMDsKICB0b3A6IDQ0cHg7CiAgYm90dG9tOiA1OHB4OwogIG92ZXJmbG93OiBoaWRkZW47CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5iYWNrdXAgewogIHotaW5kZXg6IDk7Cn0K"},{"version":3,"sources":["Detail.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4TA;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=\"totalScroll\"\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      @buy-clicked=\"bugthing\"\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\", // skuKeyStr：sku 组合列表（下方 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        // 键：skuKeyStr（sku 组合列表中当前类目对应的 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      \n  },\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: #df3832;\n  color: #fff;\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"]}]}