{"version":3,"sources":["webpack:///./src/views/goods/components/goods-tabs.vue?0fdf","webpack:///./src/views/goods/components/goods-comment.vue?8fd1","webpack:///./src/views/goods/components/goods-relevant.vue","webpack:///./src/views/goods/components/goods-relevant.vue?e56f","webpack:///./src/views/goods/index.vue?1544","webpack:///./src/views/goods/components/goods-warn.vue?9314","webpack:///./src/views/goods/components/goods-sales.vue?64f3","webpack:///./src/views/category/components/goods-item.vue?7232","webpack:///./src/views/goods/components/goods-comment-image.vue?dabf","webpack:///./src/views/goods/components/goods-detial.vue?0816","webpack:///./node_modules/core-js/modules/es.string.trim.js","webpack:///./src/views/goods/components/goods-relevant.vue?3386","webpack:///./src/views/goods/components/goods-name.vue?62f9","webpack:///./src/views/category/components/goods-item.vue","webpack:///./src/views/category/components/goods-item.vue?2a2f","webpack:///./src/views/goods/index.vue","webpack:///./src/views/goods/components/goods-image.vue","webpack:///./src/views/goods/components/goods-image.vue?7ba0","webpack:///./src/views/goods/components/goods-sales.vue","webpack:///./src/views/goods/components/goods-sales.vue?fae9","webpack:///./src/views/goods/components/goods-name.vue","webpack:///./src/views/goods/components/goods-name.vue?1d2a","webpack:///./src/views/goods/components/goods-tabs.vue","webpack:///./src/views/goods/components/goods-detial.vue","webpack:///./src/views/goods/components/goods-detial.vue?4304","webpack:///./src/views/goods/components/goods-comment.vue","webpack:///./src/views/goods/components/goods-comment-image.vue","webpack:///./src/views/goods/components/goods-comment-image.vue?bc0f","webpack:///./src/views/goods/components/goods-comment.vue?291a","webpack:///./src/views/goods/components/goods-tabs.vue?9bca","webpack:///./src/views/goods/components/goods-hot.vue","webpack:///./src/views/goods/components/goods-hot.vue?679a","webpack:///./src/views/goods/components/goods-warn.vue","webpack:///./src/views/goods/components/goods-warn.vue?1886","webpack:///./src/views/goods/index.vue?21e4","webpack:///./src/views/goods/components/goods-image.vue?856e","webpack:///./node_modules/core-js/modules/es.array.join.js","webpack:///./src/views/goods/components/goods-hot.vue?d94a","webpack:///./src/api/product.js","webpack:///./node_modules/core-js/internals/string-trim-forced.js","webpack:///./src/views/goods/components/goods-sku.vue?0fc3","webpack:///./src/views/goods/components/goods-sku.vue","webpack:///./src/vender/power-set.js","webpack:///./src/views/goods/components/goods-sku.vue?876a"],"names":["class","goodsId","sliders","name","props","type","String","default","setup","id","then","data","pageSize","pageCount","Math","ceil","result","length","i","value","push","slice","render","__scopeId","$","$trim","trim","forcedStringTrimMethod","target","proto","forced","this","alt","href","isLink","to","goods","picture","desc","price","Object","Boolean","loading","categories","images","mainPictures","changeSku","label","num","max","inventory","insertCart","style","ref","currIndex","largePosition","show","src","layerPosition","img","key","Array","left","top","backgroundPositionX","backgroundPositionY","elementX","elementY","isOutside","position","x","y","oldPrice","changeCity","fullLocation","provinceCode","cityCode","countyCode","userAddresses","defaultAddresss","find","item","isDefualt","activeName","commentCount","details","properties","pictures","commentInfo","salesCount","praisePercent","tags","title","currentTagIndex","changeTag","tagCount","changeSort","reqParams","sortField","commentList","member","avatar","formatNickname","nickname","score","formatSpecs","orderInfo","specs","content","createTime","praiseCount","total","changePagerFn","page-size","current-page","page","url","currImg","components","GoodsCommentImage","unshift","hasPictureCount","evaluateCount","tag","hasPicture","items","counts","immediate","reduce","p","c","nameValue","substr","newPage","GoodsDetial","GoodsComment","goodsList","GoodsItem","Number","types","1","2","3","route","params","script","GoodsRelevant","GoodsImage","GoodsSales","GoodsName","GoodsSku","GoodsTabs","GoodsHot","GoodsWarn","sku","skuId","currSku","store","attrsText","specsText","stock","dispatch","nowPrice","selected","isEffective","count","Message","text","newVal","path","IndexedObject","toIndexedObject","arrayMethodIsStrict","nativeJoin","join","ES3_STRINGS","STRICT_METHOD","separator","call","undefined","findGoods","request","findRelevantGoods","limit","findGoodsHot","findGoodsCommentInfo","findGoodsCommentList","fails","whitespaces","non","module","exports","METHOD_NAME","values","val","disabled","bwPowerSet","originalSet","subSets","numberOfCombinations","combinationIndex","subSet","setElementIndex","spliter","skus","pathMap","forEach","valueArr","map","valueName","valueArrPowerSet","arr","getSelectedValues","seletedVal","updateDisabledStatus","selectedValues","filter","initDefaultSelected","emit","valItem","validSelectedValues","v","skuIds"],"mappings":"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","file":"js/chunk-69f54bf4.812e67aa.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../../node_modules/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./goods-tabs.vue?vue&type=style&index=0&id=8f5c12d6&scoped=true&lang=less\"","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../../node_modules/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./goods-comment.vue?vue&type=style&index=0&id=11a3bb63&scoped=true&lang=less\"","<template>\n  <div class=\"goods-relevant\">\n    <div class=\"header\">\n      <i class=\"icon\" />\n      <span class=\"title\">{{goodsId?'同类商品推荐':'猜你喜欢'}}</span>\n    </div>\n    <!-- 此处使用改造后的xtx-carousel.vue -->\n    <XtxCarousel :sliders=\"sliders\" />\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue'\nimport { findRelevantGoods } from '@/api/product'\nexport default {\n  // 同类推荐，猜你喜欢\n  name: 'GoodsRelevant',\n  props: {\n    goodsId: {\n      type: String,\n      default: ''\n    }\n  },\n  setup (props) {\n    // 最终需要的数据是 sliders 提供给轮播图使用\n    // 数据结构：sliders = [[4个],[4个],[4个],[4个]]\n    const sliders = ref([])\n    findRelevantGoods({ id: props.goodsId }).then(data => {\n      // data.result 商品列表，数据结构 [16个]\n      // 将data.result数据赋值给sliders数据，保证数据结构正确\n      const pageSize = 4\n      const pageCount = Math.ceil(data.result.length / pageSize)\n      for (let i = 0; i < pageCount; i++) {\n        sliders.value.push(data.result.slice(pageSize * i, pageSize * (i + 1)))\n      }\n    })\n    return { sliders }\n  }\n}\n</script>\n\n<style scoped lang='less'>\n.goods-relevant {\n  background: #fff;\n  min-height: 460px;\n  margin-top: 20px;\n  .header {\n    height: 80px;\n    line-height: 80px;\n    padding: 0 20px;\n    .title {\n      font-size: 20px;\n      padding-left: 10px;\n    }\n    .icon {\n      width: 16px;\n      height: 16px;\n      display: inline-block;\n      border-top: 4px solid @xtxColor;\n      border-right: 4px solid @xtxColor;\n      box-sizing: border-box;\n      position: relative;\n      transform: rotate(45deg);\n      &::before {\n        content: \"\";\n        width: 10px;\n        height: 10px;\n        position: absolute;\n        left: 0;\n        top: 2px;\n        background: lighten(@xtxColor, 40%);\n      }\n    }\n  }\n}\n:deep(.xtx-carousel) {\n  height: 380px;\n  .carousel {\n    &-indicator {\n      bottom: 30px;\n      span {\n        &.active {\n          background: @xtxColor;\n        }\n      }\n    }\n    &-btn {\n      top: 110px;\n      opacity: 1;\n      background: rgba(0,0,0,0);\n      color: #ddd;\n      i {\n        font-size: 30px;\n      }\n    }\n  }\n}\n</style>\n","import { render } from \"./goods-relevant.vue?vue&type=template&id=9032cb82&scoped=true\"\nimport script from \"./goods-relevant.vue?vue&type=script&lang=js\"\nexport * from \"./goods-relevant.vue?vue&type=script&lang=js\"\n\nimport \"./goods-relevant.vue?vue&type=style&index=0&id=9032cb82&scoped=true&lang=less\"\nscript.render = render\nscript.__scopeId = \"data-v-9032cb82\"\n\nexport default script","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../node_modules/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./index.vue?vue&type=style&index=0&id=720f8111&scoped=true&lang=less\"","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../../node_modules/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./goods-warn.vue?vue&type=style&index=0&id=2d293123&lang=less&scoped=true\"","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../../node_modules/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./goods-sales.vue?vue&type=style&index=0&id=ca3db56a&scoped=true&lang=less\"","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../../node_modules/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./goods-item.vue?vue&type=style&index=0&id=3828c3be&scoped=true&lang=less\"","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../../node_modules/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./goods-comment-image.vue?vue&type=style&index=0&id=2174e057&scoped=true&lang=less\"","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../../node_modules/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./goods-detial.vue?vue&type=style&index=0&id=2c43c764&scoped=true&lang=less\"","'use strict';\nvar $ = require('../internals/export');\nvar $trim = require('../internals/string-trim').trim;\nvar forcedStringTrimMethod = require('../internals/string-trim-forced');\n\n// `String.prototype.trim` method\n// https://tc39.es/ecma262/#sec-string.prototype.trim\n$({ target: 'String', proto: true, forced: forcedStringTrimMethod('trim') }, {\n  trim: function trim() {\n    return $trim(this);\n  }\n});\n","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../../node_modules/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./goods-relevant.vue?vue&type=style&index=0&id=9032cb82&scoped=true&lang=less\"","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../../node_modules/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./goods-name.vue?vue&type=style&index=0&id=af785f8a&lang=less&scoped=true\"","<template>\n  <RouterLink v-if=\"isLink\" :to=\"`/product/${goods.id}`\" class='goods-item'>\n    <img v-lazy=\"goods.picture\" alt=\"\">\n    <p class=\"name ellipsis\">{{goods.name}}</p>\n    <p class=\"desc ellipsis\">{{goods.desc}}</p>\n    <p class=\"price\">&yen;{{goods.price}}</p>\n  </RouterLink>\n  <a v-else href=\"javascript:;\" class='goods-item'>\n    <img v-lazy=\"goods.picture\" alt=\"\">\n    <p class=\"name ellipsis\">{{goods.name}}</p>\n    <p class=\"desc ellipsis\">{{goods.desc}}</p>\n    <p class=\"price\">&yen;{{goods.price}}</p>\n  </a>\n</template>\n\n<script>\nexport default {\n  name: 'GoodsItem',\n  props: {\n    goods: {\n      type: Object,\n      default: () => ({})\n    },\n    isLink: {\n      type: Boolean,\n      default: true\n    }\n  }\n}\n</script>\n\n<style scoped lang='less'>\n.goods-item {\n  display: block;\n  width: 220px;\n  padding: 20px 30px;\n  text-align: center;\n  .hoverShadow();\n  img {\n    width: 160px;\n    height: 160px;\n  }\n  p {\n    padding-top: 10px;\n  }\n  .name {\n    font-size: 16px;\n  }\n  .desc {\n    color: #999;\n    height: 29px;\n  }\n  .price {\n    color: @priceColor;\n    font-size: 20px;\n  }\n}\n</style>\n","import { render } from \"./goods-item.vue?vue&type=template&id=3828c3be&scoped=true\"\nimport script from \"./goods-item.vue?vue&type=script&lang=js\"\nexport * from \"./goods-item.vue?vue&type=script&lang=js\"\n\nimport \"./goods-item.vue?vue&type=style&index=0&id=3828c3be&scoped=true&lang=less\"\nscript.render = render\nscript.__scopeId = \"data-v-3828c3be\"\n\nexport default script","<template>\n  <div class='xtx-goods-page'>\n    <div class=\"container\" v-if=\"!loading && goods\">\n      <!-- 面包屑 -->\n      <XtxBread>\n        <XtxBreadItem to=\"/\">首页</XtxBreadItem>\n        <XtxBreadItem :to=\"`/category/${goods.categories[1].id}`\">{{goods.categories[1].name}}</XtxBreadItem>\n        <XtxBreadItem :to=\"`/category/sub/${goods.categories[0].id}`\">{{goods.categories[0].name}}</XtxBreadItem>\n        <XtxBreadItem>{{goods.name}}</XtxBreadItem>\n      </XtxBread>\n      <!-- 商品信息 -->\n      <div class=\"goods-info\">\n        <div class=\"media\">\n          <GoodsImage :images=\"goods.mainPictures\" />\n          <GoodsSales />\n        </div>\n        <div class=\"spec\">\n          <GoodsName :goods=\"goods\" />\n          <!-- sku组件 skuId=\"1369155865461919746\" 测试选中 -->\n          <GoodsSku :goods=\"goods\" @change=\"changeSku\" />\n          <!-- 数量选择组件 -->\n          <XtxNumbox label=\"数量\" v-model=\"num\" :max=\"goods.inventory\" />\n          <!-- 按钮组件 -->\n          <XtxButton @click=\"insertCart()\" type=\"primary\" style=\"margin-top:20px\">加入购物车</XtxButton>\n        </div>\n      </div>\n      <!-- 商品推荐 -->\n      <GoodsRelevant :goodsId=\"goods.id\" />\n      <!-- 商品详情 -->\n      <div class=\"goods-footer\">\n        <div class=\"goods-article\">\n          <!-- 商品+评价 -->\n          <GoodsTabs />\n          <!-- 注意事项 -->\n          <GoodsWarn />\n        </div>\n        <!-- 24热榜+周热销榜 -->\n        <div class=\"goods-aside\">\n          <GoodsHot />\n          <GoodsHot :type=\"2\" />\n        </div>\n      </div>\n    </div>\n    <div v-else class=\"loading\"></div>\n  </div>\n</template>\n\n<script>\nimport GoodsRelevant from './components/goods-relevant'\nimport GoodsImage from './components/goods-image'\nimport GoodsSales from './components/goods-sales'\nimport GoodsName from './components/goods-name'\nimport GoodsSku from './components/goods-sku'\nimport GoodsTabs from './components/goods-tabs'\nimport GoodsHot from './components/goods-hot'\nimport GoodsWarn from './components/goods-warn'\nimport { nextTick, provide, ref, watch } from 'vue'\nimport { findGoods } from '@/api/product'\nimport { useRoute } from 'vue-router'\nimport { useStore } from 'vuex'\nimport Message from '@/components/library/Message'\nexport default {\n  name: 'XtxGoodsPage',\n  components: { GoodsRelevant, GoodsImage, GoodsSales, GoodsName, GoodsSku, GoodsTabs, GoodsHot, GoodsWarn },\n  setup () {\n    const { goods, loading } = useGoods()\n    const changeSku = (sku) => {\n      // 修改商品的现价原价库存信息\n      if (sku.skuId) {\n        goods.value.price = sku.price\n        goods.value.oldPrice = sku.oldPrice\n        goods.value.inventory = sku.inventory\n      }\n      // 记录选择后的sku，可能有数据，可能没有数据{}\n      currSku.value = sku\n    }\n\n    // 提供goods数据给后代组件使用\n    provide('goods', goods)\n\n    // 选择的数量\n    const num = ref(1)\n\n    // 加入购物车\n    const store = useStore()\n    const currSku = ref(null)\n    const insertCart = () => {\n      if (currSku.value && currSku.value.skuId) {\n        // id skuId name attrsText picture price nowPrice selected stock count isEffective\n        const { skuId, specsText: attrsText, inventory: stock } = currSku.value\n        const { id, name, price, mainPictures } = goods.value\n        store.dispatch('cart/insertCart', {\n          skuId,\n          attrsText,\n          stock,\n          id,\n          name,\n          price,\n          nowPrice: price,\n          picture: mainPictures[0],\n          selected: true,\n          isEffective: true,\n          count: num.value\n        }).then(() => {\n          Message({ type: 'success', text: '加入购物车成功' })\n        })\n      } else {\n        Message({ text: '请选择完整规格' })\n      }\n    }\n\n    return { goods, loading, changeSku, num, insertCart }\n  }\n}\n// 获取商品详情\nconst useGoods = () => {\n  // 出现路由地址商品ID发生变化，但是不会重新初始化组件\n  const goods = ref(null)\n  const route = useRoute()\n  const loading = ref(false)\n  watch(() => route.params.id, (newVal) => {\n    if (newVal && `/product/${newVal}` === route.path) {\n      loading.value = true\n      findGoods(route.params.id).then(data => {\n        // 让商品数据为null然后使用v-if的组件可以重新销毁和创建\n        goods.value = null\n        nextTick(() => {\n          goods.value = data.result\n          loading.value = false\n        })\n      })\n    }\n  }, { immediate: true })\n  return { goods, loading }\n}\n</script>\n\n<style scoped lang='less'>\n.loading {\n  height: 580px;\n  width: 1240px;\n  margin: 72px auto 20px;\n  background: rgba(255,255,255,.9) url(../../assets/images/loading.gif) no-repeat center;\n}\n.goods-info {\n  min-height: 600px;\n  background: #fff;\n  display: flex;\n  .media {\n    width: 580px;\n    height: 600px;\n    padding: 30px 50px;\n  }\n  .spec {\n    flex: 1;\n    padding: 30px 30px 30px 0;\n  }\n}\n.goods-footer {\n  display: flex;\n  margin-top: 20px;\n  .goods-article {\n    width: 940px;\n    margin-right: 20px;\n  }\n  .goods-aside {\n    width: 280px;\n    min-height: 1000px;\n  }\n}\n// .goods-tabs {\n//   min-height: 600px;\n//   background: #fff;\n// }\n// .goods-warn {\n//   min-height: 600px;\n//   background: #fff;\n//   margin-top: 20px;\n// }\n</style>\n","<template>\n  <div class=\"goods-image\">\n    <!-- 大图 -->\n    <div v-show=\"show\" class=\"large\" :style=\"[{backgroundImage:`url(${images[currIndex]})`},largePosition]\"></div>\n    <!-- 中图 -->\n    <div class=\"middle\" ref=\"target\">\n      <img :src=\"images[currIndex]\" alt=\"\">\n      <!-- 遮罩色块 -->\n      <div v-show=\"show\" class=\"layer\" :style=\"layerPosition\"></div>\n    </div>\n    <!-- 小图 -->\n    <ul class=\"small\">\n      <li v-for=\"(img,i) in images\" :key=\"img\" :class=\"{active:i===currIndex}\">\n        <img @mouseenter=\"currIndex=i\" :src=\"img\" alt=\"\">\n      </li>\n    </ul>\n  </div>\n</template>\n<script>\nimport { reactive, ref, watch } from 'vue'\nimport { useMouseInElement } from '@vueuse/core'\nexport default {\n  name: 'GoodsImage',\n  props: {\n    images: {\n      type: Array,\n      default: () => []\n    }\n  },\n  setup (props) {\n    // 当前预览图的索引\n    const currIndex = ref(0)\n\n    // 1. 是否显示遮罩和大图\n    const show = ref(false)\n    // 2. 遮罩的坐标(样式)\n    const layerPosition = reactive({\n      left: 0,\n      top: 0\n    })\n    // 3. 大图背景定位(样式)\n    const largePosition = reactive({\n      backgroundPositionX: 0,\n      backgroundPositionY: 0\n    })\n    // 4. 使用useMouseInElement得到基于元素左上角的坐标和是否离开元素数据\n    const target = ref(null)\n    const { elementX, elementY, isOutside } = useMouseInElement(target)\n    watch([elementX, elementY, isOutside], () => {\n      // 5. 根据得到数据设置样式数据和是否显示数据\n      show.value = !isOutside.value\n      // 计算坐标\n      const position = { x: 0, y: 0 }\n\n      if (elementX.value < 100) position.x = 0\n      else if (elementX.value > 300) position.x = 200\n      else position.x = elementX.value - 100\n\n      if (elementY.value < 100) position.y = 0\n      else if (elementY.value > 300) position.y = 200\n      else position.y = elementY.value - 100\n      // 给样式赋值\n      layerPosition.left = position.x + 'px'\n      layerPosition.top = position.y + 'px'\n      largePosition.backgroundPositionX = -2 * position.x + 'px'\n      largePosition.backgroundPositionY = -2 * position.y + 'px'\n    })\n\n    return { currIndex, show, layerPosition, largePosition, target }\n  }\n}\n</script>\n<style scoped lang=\"less\">\n.goods-image {\n  width: 480px;\n  height: 400px;\n  position: relative;\n  display: flex;\n  z-index: 500;\n  .large {\n    position: absolute;\n    top: 0;\n    left: 412px;\n    width: 400px;\n    height: 400px;\n    box-shadow: 0 0 10px rgba(0,0,0,0.1);\n    background-repeat: no-repeat;\n    background-size: 800px 800px;\n    background-color: #f8f8f8;\n  }\n  .middle {\n    width: 400px;\n    height: 400px;\n    background: #f5f5f5;\n    position: relative;\n    cursor: move;\n    .layer {\n      width: 200px;\n      height: 200px;\n      background: rgba(0,0,0,.2);\n      left: 0;\n      top: 0;\n      position: absolute;\n    }\n  }\n  .small {\n    width: 80px;\n    li {\n      width: 68px;\n      height: 68px;\n      margin-left: 12px;\n      margin-bottom: 15px;\n      cursor: pointer;\n      &:hover,&.active {\n        border: 2px solid @xtxColor;\n      }\n    }\n  }\n}\n</style>\n","import { render } from \"./goods-image.vue?vue&type=template&id=4e17a18a&scoped=true\"\nimport script from \"./goods-image.vue?vue&type=script&lang=js\"\nexport * from \"./goods-image.vue?vue&type=script&lang=js\"\n\nimport \"./goods-image.vue?vue&type=style&index=0&id=4e17a18a&scoped=true&lang=less\"\nscript.render = render\nscript.__scopeId = \"data-v-4e17a18a\"\n\nexport default script","<template>\n  <ul class=\"goods-sales\">\n    <li>\n      <p>销量人气</p>\n      <p>200+</p>\n      <p><i class=\"iconfont icon-task-filling\"></i>销量人气</p>\n    </li>\n    <li>\n      <p>商品评价</p>\n      <p>400+</p>\n      <p><i class=\"iconfont icon-comment-filling\"></i>查看评价</p>\n    </li>\n    <li>\n      <p>收藏人气</p>\n      <p>600+</p>\n      <p><i class=\"iconfont icon-favorite-filling\"></i>收藏商品</p>\n    </li>\n    <li>\n      <p>品牌信息</p>\n      <p>苏宁电器</p>\n      <p><i class=\"iconfont icon-dynamic-filling\"></i>品牌主页</p>\n    </li>\n  </ul>\n</template>\n\n<script>\nexport default {\n  name: 'GoodsSales'\n}\n</script>\n\n<style scoped lang='less'>\n.goods-sales {\n  display: flex;\n  width: 400px;\n  align-items: center;\n  text-align: center;\n  height: 140px;\n  li {\n    flex: 1;\n    position: relative;\n    ~ li::after {\n      position: absolute;\n      top: 10px;\n      left: 0;\n      height: 60px;\n      border-left: 1px solid #e4e4e4;\n      content: \"\";\n    }\n    p {\n      &:first-child {\n        color: #999;\n      }\n      &:nth-child(2) {\n        color: @priceColor;\n        margin-top: 10px;\n      }\n      &:last-child {\n        color: #666;\n        margin-top: 10px;\n        i {\n          color: @xtxColor;\n          font-size: 14px;\n          margin-right: 2px;\n        }\n        &:hover {\n          color: @xtxColor;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n</style>\n","import { render } from \"./goods-sales.vue?vue&type=template&id=ca3db56a&scoped=true\"\nimport script from \"./goods-sales.vue?vue&type=script&lang=js\"\nexport * from \"./goods-sales.vue?vue&type=script&lang=js\"\n\nimport \"./goods-sales.vue?vue&type=style&index=0&id=ca3db56a&scoped=true&lang=less\"\nscript.render = render\nscript.__scopeId = \"data-v-ca3db56a\"\n\nexport default script","<template>\n  <p class=\"g-name\">{{goods.name}}</p>\n  <p class=\"g-desc\">{{goods.desc}}</p>\n  <p class=\"g-price\">\n    <span>{{goods.price}}</span>\n    <span>{{goods.oldPrice}}</span>\n  </p>\n  <div class=\"g-service\">\n    <dl>\n      <dt>促销</dt>\n      <dd>12月好物放送，App领券购买直降120元</dd>\n    </dl>\n    <dl>\n      <dt>配送</dt>\n      <dd>\n        <b style=\"vertical-align: middle; padding-right: 5px;font-weight:normal\">至</b>\n        <XtxCity @change=\"changeCity\" :fullLocation=\"fullLocation\" />\n      </dd>\n    </dl>\n    <dl>\n      <dt>服务</dt>\n      <dd>\n        <span>无忧退货</span>\n        <span>快速退款</span>\n        <span>免费包邮</span>\n        <a href=\"javascript:;\">了解详情</a>\n      </dd>\n    </dl>\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue'\nexport default {\n  name: 'GoodName',\n  props: {\n    goods: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  setup (props) {\n    // 提供给后台的四项数据 (没登录)\n    const provinceCode = ref('110000')\n    const cityCode = ref('119900')\n    const countyCode = ref('110101')\n    const fullLocation = ref('北京市 市辖区 东城区')\n    // 取出用户收货地址中默认的地址给四个数据赋值 (已登录)\n    if (props.goods.userAddresses) {\n      const defaultAddresss = props.goods.userAddresses.find(item => item.isDefualt === 1)\n      if (defaultAddresss) {\n        provinceCode.value = defaultAddresss.provinceCode\n        cityCode.value = defaultAddresss.cityCode\n        countyCode.value = defaultAddresss.countyCode\n        fullLocation.value = defaultAddresss.fullLocation\n      }\n    }\n    // 城市选中事件处理函数\n    const changeCity = (result) => {\n      provinceCode.value = result.provinceCode\n      cityCode.value = result.cityCode\n      countyCode.value = result.countyCode\n      fullLocation.value = result.fullLocation\n    }\n    return { fullLocation, changeCity }\n  }\n}\n</script>\n\n<style lang=\"less\" scoped>\n.xtx-city {\n  vertical-align: middle;\n}\n.g-name {\n  font-size: 22px\n}\n.g-desc {\n  color: #999;\n  margin-top: 10px;\n}\n.g-price {\n  margin-top: 10px;\n  span {\n    &::before {\n      content: \"¥\";\n      font-size: 14px;\n    }\n    &:first-child {\n      color: @priceColor;\n      margin-right: 10px;\n      font-size: 22px;\n    }\n    &:last-child {\n      color: #999;\n      text-decoration: line-through;\n      font-size: 16px;\n    }\n  }\n}\n.g-service {\n  background: #f5f5f5;\n  width: 500px;\n  padding: 20px 10px 0 10px;\n  margin-top: 10px;\n  dl {\n    padding-bottom: 20px;\n    display: flex;\n    align-items: center;\n    dt {\n      width: 50px;\n      color: #999;\n    }\n    dd {\n      color: #666;\n      &:last-child {\n        span {\n          margin-right: 10px;\n          &::before {\n            content: \"•\";\n            color: @xtxColor;\n            margin-right: 2px;\n          }\n        }\n        a {\n          color: @xtxColor;\n        }\n      }\n    }\n  }\n}\n</style>\n","import { render } from \"./goods-name.vue?vue&type=template&id=af785f8a&scoped=true\"\nimport script from \"./goods-name.vue?vue&type=script&lang=js\"\nexport * from \"./goods-name.vue?vue&type=script&lang=js\"\n\nimport \"./goods-name.vue?vue&type=style&index=0&id=af785f8a&lang=less&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-af785f8a\"\n\nexport default script","<template>\n  <div class=\"goods-tabs\">\n    <nav>\n      <a\n        @click=\"activeName = 'GoodsDetial'\"\n        :class=\"{ active: activeName === 'GoodsDetial' }\"\n        href=\"javascript:;\"\n        >商品详情</a\n      >\n      <a\n        @click=\"activeName = 'GoodsComment'\"\n        :class=\"{ active: activeName === 'GoodsComment' }\"\n        href=\"javascript:;\"\n        >商品评价<span>({{goods.commentCount}})</span></a\n      >\n    </nav>\n    <!-- 切换内容的地方 其实两个组件-->\n    <!-- 在vue中动态的去切换组件其实可以使用动态组件component组件 -->\n    <!-- is属性用来决定component动态组件渲染为那个组件，组件的名称 -->\n    <!-- <GoodsDetial v-if=\"activeName === 'GoodsDetial'\" />\n    <GoodsComment v-if=\"activeName === 'GoodsComment'\" /> -->\n    <component :is=\"activeName\"></component>\n  </div>\n</template>\n<script>\nimport { ref, inject } from 'vue'\nimport GoodsDetial from './goods-detial'\nimport GoodsComment from './goods-comment'\nexport default {\n  name: 'GoodsTabs',\n  components: { GoodsDetial, GoodsComment },\n  setup () {\n    // activeName的值：GoodsDetial  GoodsComment\n    const activeName = ref('GoodsDetial')\n    // goods详情数据\n    const goods = inject('goods')\n    return { activeName, goods }\n  }\n}\n</script>\n<style scoped lang=\"less\">\n.goods-tabs {\n  min-height: 600px;\n  background: #fff;\n  nav {\n    height: 70px;\n    line-height: 70px;\n    display: flex;\n    border-bottom: 1px solid #f5f5f5;\n    a {\n      padding: 0 40px;\n      font-size: 18px;\n      position: relative;\n      > span {\n        color: @priceColor;\n        font-size: 16px;\n        margin-left: 10px;\n      }\n      &:first-child {\n        border-right: 1px solid #f5f5f5;\n      }\n      &.active {\n        &::before {\n          content: \"\";\n          position: absolute;\n          left: 40px;\n          bottom: -1px;\n          width: 72px;\n          height: 2px;\n          background: @xtxColor;\n        }\n      }\n    }\n  }\n}\n</style>\n","<template>\n  <div class=\"goods-detail\">\n    <!-- 属性 -->\n    <ul class=\"attrs\">\n      <li v-for=\"item in goods.details.properties\" :key=\"item.value\">\n        <span class=\"dt\">{{item.name}}</span>\n        <span class=\"dd\">{{item.value}}</span>\n      </li>\n    </ul>\n    <!-- 图片 -->\n    <img v-for=\"item in goods.details.pictures\" :key=\"item\" :src=\"item\" alt=\"\">\n  </div>\n</template>\n<script>\nimport { inject } from 'vue'\nexport default {\n  name: 'GoodsDetial',\n  setup () {\n    const goods = inject('goods')\n    return { goods }\n  }\n}\n</script>\n<style scoped lang=\"less\">\n.goods-detail {\n  padding: 40px;\n  .attrs {\n    display: flex;\n    flex-wrap: wrap;\n    margin-bottom: 30px;\n    li {\n      display: flex;\n      margin-bottom: 10px;\n      width: 50%;\n      .dt {\n        width: 100px;\n        color: #999;\n      }\n      .dd {\n        flex: 1;\n        color: #666;\n      }\n    }\n  }\n  > img {\n    width: 100%;\n  }\n}\n</style>\n","import { render } from \"./goods-detial.vue?vue&type=template&id=2c43c764&scoped=true\"\nimport script from \"./goods-detial.vue?vue&type=script&lang=js\"\nexport * from \"./goods-detial.vue?vue&type=script&lang=js\"\n\nimport \"./goods-detial.vue?vue&type=style&index=0&id=2c43c764&scoped=true&lang=less\"\nscript.render = render\nscript.__scopeId = \"data-v-2c43c764\"\n\nexport default script","<template>\n  <div class=\"goods-comment\">\n    <!-- 评价头部 -->\n    <div class=\"head\" v-if=\"commentInfo\">\n      <div class=\"data\">\n        <p><span>{{ commentInfo.salesCount }}</span><span>人购买</span></p>\n        <p><span>{{ commentInfo.praisePercent }}</span><span>好评率</span></p>\n      </div>\n      <div class=\"tags\">\n        <div class=\"dt\">大家都在说：</div>\n        <div class=\"dd\">\n          <a\n            v-for=\"(item,i) in commentInfo.tags\"\n            :key=\"item.title\"\n            href=\"javascript:;\"\n            :class=\"{active:currentTagIndex===i}\"\n            @click=\"changeTag(i)\"\n            >{{item.title}}（{{item.tagCount}}）</a\n          >\n        </div>\n      </div>\n    </div>\n    <div class=\"sort\" v-if=\"commentInfo\">\n      <span>排序：</span>\n      <a @click=\"changeSort(null)\" :class=\"{active:reqParams.sortField===null}\" href=\"javascript:;\">默认</a>\n      <a @click=\"changeSort('createTime')\" :class=\"{active:reqParams.sortField==='createTime'}\" href=\"javascript:;\">最新</a>\n      <a @click=\"changeSort('praiseCount')\" :class=\"{active:reqParams.sortField==='praiseCount'}\" href=\"javascript:;\">最热</a>\n    </div>\n    <!-- 评价列表 -->\n    <div class=\"list\" v-if=\"commentList\">\n      <div class=\"item\" v-for=\"item in commentList\" :key=\"item.id\">\n        <div class=\"user\">\n          <img :src=\"item.member.avatar\" alt=\"\">\n          <span>{{formatNickname(item.member.nickname)}}</span>\n        </div>\n        <div class=\"body\">\n          <div class=\"score\">\n            <i v-for=\"i in item.score\" :key=\"i+'s'\" class=\"iconfont icon-wjx01\"></i>\n            <i v-for=\"i in 5-item.score\" :key=\"i+'k'\" class=\"iconfont icon-wjx02\"></i>\n            <span class=\"attr\">{{formatSpecs(item.orderInfo.specs)}}</span>\n          </div>\n          <div class=\"text\">{{item.content}}</div>\n          <!-- 评论图片组件 -->\n          <GoodsCommentImage v-if=\"item.pictures.length\" :pictures=\"item.pictures\" />\n          <div class=\"time\">\n            <span>{{item.createTime}}</span>\n            <span class=\"zan\"><i class=\"iconfont icon-dianzan\"></i>{{item.praiseCount}}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- 分页组件 -->\n    <XtxPagination v-if=\"total\" @current-change=\"changePagerFn\" :page-size=\"reqParams.pageSize\" :current-page=\"reqParams.page\" />\n  </div>\n</template>\n<script>\nimport { inject, reactive, ref, watch } from 'vue'\nimport { findGoodsCommentInfo, findGoodsCommentList } from '@/api/product'\nimport GoodsCommentImage from './goods-comment-image'\nexport default {\n  name: 'GoodsComment',\n  components: { GoodsCommentImage },\n  setup () {\n    // 获取评价信息\n    const commentInfo = ref(null)\n    const goods = inject('goods')\n    findGoodsCommentInfo(goods.value.id).then((data) => {\n      data.result.tags.unshift({\n        title: '有图',\n        tagCount: data.result.hasPictureCount,\n        type: 'img'\n      })\n      data.result.tags.unshift({\n        title: '全部评价',\n        tagCount: data.result.evaluateCount,\n        type: 'all'\n      })\n      // 设置数据之前，tags数组前追加 有图tag  全部评价tag\n      commentInfo.value = data.result\n    })\n\n    // 激活tag\n    const currentTagIndex = ref(0)\n    const changeTag = (i) => {\n      currentTagIndex.value = i\n      // 点击tag的时候修改筛选条件\n      const tag = commentInfo.value.tags[i]\n      // 情况1：全部评价\n      // 情况2：有图\n      // 情况3：正常tag\n      if (tag.type === 'all') {\n        reqParams.hasPicture = null\n        reqParams.tag = null\n      } else if (tag.type === 'img') {\n        reqParams.hasPicture = true\n        reqParams.tag = null\n      } else {\n        reqParams.hasPicture = null\n        reqParams.tag = tag.title\n      }\n      // 重置页码1\n      reqParams.page = 1\n    }\n\n    // 点击排序\n    const changeSort = (sortField) => {\n      reqParams.sortField = sortField\n      // 重置页码1\n      reqParams.page = 1\n    }\n\n    // 准备筛选条件数据\n    const reqParams = reactive({\n      page: 1,\n      pageSize: 10,\n      hasPicture: null,\n      tag: null,\n      // 排序方式：praiseCount 热度  createTime 最新\n      sortField: null\n    })\n\n    // 初始化需要发请求，筛选条件发生改变发请求\n    const commentList = ref([])\n    const total = ref(0)\n    watch(reqParams, () => {\n      findGoodsCommentList(goods.value.id, reqParams).then(data => {\n        commentList.value = data.result.items\n        total.value = data.result.counts\n      })\n    }, { immediate: true })\n\n    // 定义转换数据的函数（对应vue2.0的过滤器）\n    const formatSpecs = (specs) => {\n      return specs.reduce((p, c) => `${p} ${c.name}：${c.nameValue}`, '').trim()\n    }\n    const formatNickname = (nickname) => {\n      return nickname.substr(0, 1) + '****' + nickname.substr(-1)\n    }\n\n    // 实现分页切换\n    const changePagerFn = (newPage) => {\n      reqParams.page = newPage\n    }\n\n    return { commentInfo, currentTagIndex, changeTag, reqParams, commentList, changeSort, formatSpecs, formatNickname, total, changePagerFn }\n  }\n}\n</script>\n<style scoped lang=\"less\">\n.goods-comment {\n  .head {\n    display: flex;\n    padding: 30px 0;\n    .data {\n      width: 340px;\n      display: flex;\n      padding: 20px;\n      p {\n        flex: 1;\n        text-align: center;\n        span {\n          display: block;\n          &:first-child {\n            font-size: 32px;\n            color: @priceColor;\n          }\n          &:last-child {\n            color: #999;\n          }\n        }\n      }\n    }\n    .tags {\n      flex: 1;\n      display: flex;\n      border-left: 1px solid #f5f5f5;\n      .dt {\n        font-weight: bold;\n        width: 100px;\n        text-align: right;\n        line-height: 42px;\n      }\n      .dd {\n        flex: 1;\n        display: flex;\n        flex-wrap: wrap;\n        > a {\n          width: 132px;\n          height: 42px;\n          margin-left: 20px;\n          margin-bottom: 20px;\n          border-radius: 4px;\n          border: 1px solid #e4e4e4;\n          background: #f5f5f5;\n          color: #999;\n          text-align: center;\n          line-height: 40px;\n          &:hover {\n            border-color: @xtxColor;\n            background: lighten(@xtxColor, 50%);\n            color: @xtxColor;\n          }\n          &.active {\n            border-color: @xtxColor;\n            background: @xtxColor;\n            color: #fff;\n          }\n        }\n      }\n    }\n  }\n  .sort {\n    height: 60px;\n    line-height: 60px;\n    border-top: 1px solid #f5f5f5;\n    border-bottom: 1px solid #f5f5f5;\n    margin: 0 20px;\n    color: #666;\n    > span {\n      margin-left: 20px;\n    }\n    > a {\n      margin-left: 30px;\n      &.active,\n      &:hover {\n        color: @xtxColor;\n      }\n    }\n  }\n    .list {\n    padding: 0 20px;\n    .item {\n      display: flex;\n      padding: 25px 10px;\n      border-bottom: 1px solid #f5f5f5;\n      .user {\n        width: 160px;\n        img {\n          width: 40px;\n          height: 40px;\n          border-radius: 50%;\n          overflow: hidden;\n        }\n        span {\n          padding-left: 10px;\n          color: #666;\n        }\n      }\n      .body {\n        flex: 1;\n        .score {\n          line-height: 40px;\n          .iconfont {\n            color: #ff9240;\n            padding-right: 3px;\n          }\n          .attr {\n            padding-left: 10px;\n            color: #666;\n          }\n        }\n      }\n      .text {\n        color: #666;\n        line-height: 24px;\n      }\n      .time {\n        color: #999;\n        display: flex;\n        justify-content: space-between;\n        margin-top: 5px;\n      }\n    }\n  }\n}\n</style>\n","<template>\n  <div class=\"goods-comment-image\">\n    <div class=\"list\">\n      <a :class=\"{active:currImg===url}\" @click=\"currImg=url\"  href=\"javascript:;\" v-for=\"url in pictures\" :key=\"url\">\n        <img :src=\"url\" alt=\"\">\n      </a>\n    </div>\n    <div class=\"preview\" v-if=\"currImg\">\n      <img :src=\"currImg\" alt=\"\">\n      <i @click=\"currImg=null\" class=\"iconfont icon-close-new\"></i>\n    </div>\n  </div>\n</template>\n<script>\nimport { ref } from 'vue'\nexport default {\n  name: 'GoodsCommentImage',\n  props: {\n    pictures: {\n      type: Array,\n      default: () => []\n    }\n  },\n  setup () {\n    const currImg = ref(null)\n    return { currImg }\n  }\n}\n</script>\n<style scoped lang=\"less\">\n.goods-comment-image {\n  .list {\n    display: flex;\n    flex-wrap: wrap;\n    margin-top: 10px;\n    a {\n      width: 120px;\n      height: 120px;\n      border:1px solid #e4e4e4;\n      margin-right: 20px;\n      margin-bottom: 10px;\n      img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n      }\n      &.active {\n        border-color: @xtxColor;\n      }\n    }\n  }\n}\n .preview {\n    width: 480px;\n    height: 480px;\n    border: 1px solid #e4e4e4;\n    background: #f8f8f8;\n    margin-bottom: 20px;\n    position: relative;\n    img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n    }\n    i {\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: 30px;\n      height: 30px;\n      background: rgba(0,0,0,0.2);\n      color: #fff;\n      text-align: center;\n      line-height: 30px;\n    }\n  }\n</style>\n","import { render } from \"./goods-comment-image.vue?vue&type=template&id=2174e057&scoped=true\"\nimport script from \"./goods-comment-image.vue?vue&type=script&lang=js\"\nexport * from \"./goods-comment-image.vue?vue&type=script&lang=js\"\n\nimport \"./goods-comment-image.vue?vue&type=style&index=0&id=2174e057&scoped=true&lang=less\"\nscript.render = render\nscript.__scopeId = \"data-v-2174e057\"\n\nexport default script","import { render } from \"./goods-comment.vue?vue&type=template&id=11a3bb63&scoped=true\"\nimport script from \"./goods-comment.vue?vue&type=script&lang=js\"\nexport * from \"./goods-comment.vue?vue&type=script&lang=js\"\n\nimport \"./goods-comment.vue?vue&type=style&index=0&id=11a3bb63&scoped=true&lang=less\"\nscript.render = render\nscript.__scopeId = \"data-v-11a3bb63\"\n\nexport default script","import { render } from \"./goods-tabs.vue?vue&type=template&id=8f5c12d6&scoped=true\"\nimport script from \"./goods-tabs.vue?vue&type=script&lang=js\"\nexport * from \"./goods-tabs.vue?vue&type=script&lang=js\"\n\nimport \"./goods-tabs.vue?vue&type=style&index=0&id=8f5c12d6&scoped=true&lang=less\"\nscript.render = render\nscript.__scopeId = \"data-v-8f5c12d6\"\n\nexport default script","<template>\n  <div class=\"goods-hot\">\n    <h3>{{title}}</h3>\n    <div v-if=\"goodsList\">\n      <GoodsItem v-for=\"item in goodsList\" :key=\"item.id\" :goods=\"item\" />\n    </div>\n  </div>\n</template>\n<script>\nimport GoodsItem from '@/views/category/components/goods-item'\nimport { computed, ref } from 'vue'\nimport { findGoodsHot } from '@/api/product'\nimport { useRoute } from 'vue-router'\nexport default {\n  name: 'GoodsHot',\n  components: { GoodsItem },\n  props: {\n    // 热榜类型\n    type: {\n      type: Number,\n      default: 1\n    }\n  },\n  setup (props) {\n    // 类型数据字典\n    const types = { 1: '24小时热销榜', 2: '周热销榜', 3: '总热销榜' }\n    const title = computed(() => {\n      return types[props.type]\n    })\n    // 发请求获取数据\n    const route = useRoute()\n    const goodsList = ref([])\n    findGoodsHot({ id: route.params.id, type: props.type }).then(data => {\n      goodsList.value = data.result\n    })\n    return { title, goodsList }\n  }\n}\n</script>\n<style scoped lang=\"less\">\n.goods-hot {\n  h3 {\n    height: 70px;\n    background: @helpColor;\n    color: #fff;\n    font-size: 18px;\n    line-height: 70px;\n    padding-left: 25px;\n    margin-bottom: 10px;\n    font-weight: normal;\n  }\n  :deep(.goods-item) {\n    background: #fff;\n    width: 100%;\n    margin-bottom: 10px;\n    img {\n      width: 200px;\n      height: 200px;\n    }\n    p {\n      margin: 0 10px;\n    }\n    &:hover {\n      transform: none;\n      box-shadow: none;\n    }\n  }\n}\n</style>\n","import { render } from \"./goods-hot.vue?vue&type=template&id=e4f0992c&scoped=true\"\nimport script from \"./goods-hot.vue?vue&type=script&lang=js\"\nexport * from \"./goods-hot.vue?vue&type=script&lang=js\"\n\nimport \"./goods-hot.vue?vue&type=style&index=0&id=e4f0992c&scoped=true&lang=less\"\nscript.render = render\nscript.__scopeId = \"data-v-e4f0992c\"\n\nexport default script","<template>\n  <!-- 注意事项 -->\n  <div class=\"goods-warn\">\n    <h3>注意事项</h3>\n    <p class=\"tit\">• 购买运费如何收取？</p>\n    <p>\n      单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费)\n    </p>\n    <br />\n    <p class=\"tit\">• 使用什么快递发货?</p>\n    <p>默认使用顺丰快递发货(个别商品使用其他快递）</p>\n    <p>配送范围覆盖全国大部分地区(港澳台地区除外）</p>\n    <br />\n    <p class=\"tit\">• 如何申请退货?</p>\n    <p>\n      1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；\n    </p>\n    <p>2.内裤和食品等特殊商品无质量问题不支持退货；</p>\n    <p>\n      3.退货流程：\n      确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；\n    </p>\n    <p>\n      4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。\n    </p>\n  </div>\n</template>\n<style lang=\"less\" scoped>\n.goods-warn {\n  margin-top: 20px;\n  background: #fff;\n  padding-bottom: 40px;\n  h3 {\n    height: 70px;\n    line-height: 70px;\n    border-bottom: 1px solid #f5f5f5;\n    padding-left: 50px;\n    font-size: 18px;\n    font-weight: normal;\n    margin-bottom: 10px;\n  }\n  p {\n    line-height: 40px;\n    padding: 0 25px;\n    color: #666;\n    &.tit {\n      color: #333;\n    }\n  }\n}\n</style>\n","import { render } from \"./goods-warn.vue?vue&type=template&id=2d293123&scoped=true\"\nconst script = {}\n\nimport \"./goods-warn.vue?vue&type=style&index=0&id=2d293123&lang=less&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-2d293123\"\n\nexport default script","import { render } from \"./index.vue?vue&type=template&id=720f8111&scoped=true\"\nimport script from \"./index.vue?vue&type=script&lang=js\"\nexport * from \"./index.vue?vue&type=script&lang=js\"\n\nimport \"./index.vue?vue&type=style&index=0&id=720f8111&scoped=true&lang=less\"\nscript.render = render\nscript.__scopeId = \"data-v-720f8111\"\n\nexport default script","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../../node_modules/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./goods-image.vue?vue&type=style&index=0&id=4e17a18a&scoped=true&lang=less\"","'use strict';\nvar $ = require('../internals/export');\nvar IndexedObject = require('../internals/indexed-object');\nvar toIndexedObject = require('../internals/to-indexed-object');\nvar arrayMethodIsStrict = require('../internals/array-method-is-strict');\n\nvar nativeJoin = [].join;\n\nvar ES3_STRINGS = IndexedObject != Object;\nvar STRICT_METHOD = arrayMethodIsStrict('join', ',');\n\n// `Array.prototype.join` method\n// https://tc39.es/ecma262/#sec-array.prototype.join\n$({ target: 'Array', proto: true, forced: ES3_STRINGS || !STRICT_METHOD }, {\n  join: function join(separator) {\n    return nativeJoin.call(toIndexedObject(this), separator === undefined ? ',' : separator);\n  }\n});\n","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../../node_modules/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./goods-hot.vue?vue&type=style&index=0&id=e4f0992c&scoped=true&lang=less\"","// 提供商品相关的API函数\nimport request from '@/utils/request'\n\n/**\n * 获取商品详情\n * @param {String} id - 商品ID\n */\nexport const findGoods = (id) => {\n  return request('/goods', 'get', { id })\n}\n\n/**\n * 获取相关推荐商品|猜你喜欢商品\n * @param {String} id - 商品ID，传入相关推荐，不传猜你喜欢\n * @param {Integer} limit - 商品数量\n */\nexport const findRelevantGoods = ({ id, limit = 16 }) => {\n  return request('/goods/relevant', 'get', { id, limit })\n}\n\n/**\n * 获取热销榜数据\n * @param {String} id - 商品ID\n * @param {Integer} limit - 商品数量\n * @param {Integer} type - 热销类型，1为24小时，2为周榜，3为总榜，默认为1\n */\nexport const findGoodsHot = ({ id, limit = 3, type = 1 }) => {\n  return request('/goods/hot', 'get', { id, limit, type })\n}\n\n/**\n * 查询商品评价信息\n * @param {String} id - 商品ID\n * @returns\n */\nexport const findGoodsCommentInfo = (id) => {\n  // return request(`/goods/${id}/evaluate`, 'get')\n  // axios 遇见 http https 开头的地址，不会加上基准地址\n  return request(`https://mock.boxuegu.com/mock/1175/goods/${id}/evaluate`, 'get')\n}\n\n/**\n * 查询商品评价列表\n * @param {String} id - 商品ID\n * @param {Object} params - 商品ID\n * @returns\n */\nexport const findGoodsCommentList = (id, params) => {\n  return request(`https://mock.boxuegu.com/mock/1175/goods/${id}/evaluate/page`, 'get', params)\n}\n","var fails = require('../internals/fails');\nvar whitespaces = require('../internals/whitespaces');\n\nvar non = '\\u200B\\u0085\\u180E';\n\n// check that a method works with the correct list\n// of whitespaces and has a correct name\nmodule.exports = function (METHOD_NAME) {\n  return fails(function () {\n    return !!whitespaces[METHOD_NAME]() || non[METHOD_NAME]() != non || whitespaces[METHOD_NAME].name !== METHOD_NAME;\n  });\n};\n","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../../node_modules/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./goods-sku.vue?vue&type=style&index=0&id=0fe429cd&scoped=true&lang=less\"","<template>\n  <div class=\"goods-sku\">\n    <dl v-for=\"item in goods.specs\" :key=\"item.id\">\n      <dt>{{item.name}}</dt>\n      <dd>\n        <template v-for=\"val in item.values\" :key=\"val.name\">\n          <img :class=\"{selected:val.selected,disabled:val.disabled}\" @click=\"changeSku(item,val)\" v-if=\"val.picture\" :src=\"val.picture\" :title=\"val.name\" >\n          <span :class=\"{selected:val.selected,disabled:val.disabled}\" @click=\"changeSku(item,val)\" v-else>{{val.name}}</span>\n        </template>\n      </dd>\n    </dl>\n  </div>\n</template>\n<script>\nimport powerSet from '@/vender/power-set'\nconst spliter = '★'\n// 得到一个路径字典对象\nconst getPathMap = (skus) => {\n  // 1. 得到所有的sku集合  props.goods.skus\n  // 2. 从所有的sku中筛选出有效的sku\n  // 3. 根据有效的sku使用power-set算法得到子集\n  // 4. 根据子集往路径字典对象中存储 key-value\n  const pathMap = {}\n  skus.forEach(sku => {\n    if (sku.inventory > 0) {\n      // 计算当前有库存的sku的子集\n      // 例如：[1,2,3] ==> [[1],[2],[3],[1,2],[1,3],[2,3],[1,2,3]]\n      // 可选值数组\n      const valueArr = sku.specs.map(val => val.valueName)\n      // 可选值数组 子集\n      const valueArrPowerSet = powerSet(valueArr)\n      // 遍历子集，往pathMap插入数据\n      valueArrPowerSet.forEach(arr => {\n        // 根据arr得到字符串的key，约定key是：['蓝色','美国'] ===> '蓝色★美国'\n        const key = arr.join(spliter)\n        // 给pathMap设置数据\n        if (pathMap[key]) {\n          pathMap[key].push(sku.id)\n        } else {\n          pathMap[key] = [sku.id]\n        }\n      })\n    }\n  })\n  return pathMap\n}\n// 获取已选中的值数组\nconst getSelectedValues = (specs) => {\n  const arr = []\n  specs.forEach(item => {\n    // 选中的按钮对象\n    const seletedVal = item.values.find(val => val.selected)\n    arr.push(seletedVal ? seletedVal.name : undefined)\n  })\n  return arr\n}\n// 更新按钮禁用状态\nconst updateDisabledStatus = (specs, pathMap) => {\n  // 1. 约定每一个按钮的状态由本身的disabled数据来控制\n  specs.forEach((item, i) => {\n    const selectedValues = getSelectedValues(specs)\n    item.values.forEach(val => {\n      // 2. 判断当前是否选中，是选中不用判断\n      if (val.selected) return\n      // 3. 拿当前的值按照顺序套入选中的值数组\n      selectedValues[i] = val.name\n      // 4. 剔除undefined数据，按照分隔符拼接key\n      const key = selectedValues.filter(value => value).join(spliter)\n      // 5. 拿着key去路径字典中查找是否有数据，有可以点击，没有就禁用（true）\n      val.disabled = !pathMap[key]\n    })\n  })\n}\n// 默认选中\nconst initDefaultSelected = (goods, skuId) => {\n  // 1. 找出sku的信息\n  // 2. 遍历每一个按钮，按钮的值和sku记录的值相同，就选中。\n  const sku = goods.skus.find(sku => sku.id === skuId)\n  goods.specs.forEach((item, i) => {\n    const val = item.values.find(val => val.name === sku.specs[i].valueName)\n    val.selected = true\n  })\n}\n\nexport default {\n  name: 'GoodsSku',\n  props: {\n    goods: {\n      type: Object,\n      default: () => ({})\n    },\n    skuId: {\n      type: String,\n      default: ''\n    }\n  },\n  setup (props, { emit }) {\n    const pathMap = getPathMap(props.goods.skus)\n    // 根据skuId初始化选中\n    if (props.skuId) {\n      initDefaultSelected(props.goods, props.skuId)\n    }\n    // ☆组件初始化：更新按钮禁用状态\n    updateDisabledStatus(props.goods.specs, pathMap)\n    // 1. 选中与取消选中，约定在每一个按钮都拥有自己的选中状态数据：selected\n    // 1.1 点击的是已选中，只需要取消当前的选中\n    // 1.2 点击的是未选中，把同一个规格的按钮改成未选中，当前点击的改成选中\n    const changeSku = (item, val) => {\n      // 当按钮是禁用的阻止程序运行\n      if (val.disabled) return\n      // 如果不是禁用正常运行\n      if (val.selected) {\n        val.selected = false\n      } else {\n        item.values.forEach(valItem => {\n          valItem.selected = false\n        })\n        val.selected = true\n      }\n      // ☆点击按钮时：更新按钮禁用状态\n      updateDisabledStatus(props.goods.specs, pathMap)\n      // 将你选择的sku信息通知父组件{skuId,price,oldPrice,inventory,specsText}\n      // 1. 选择完整的sku组合按钮，才可以拿到这些信息，提交父组件\n      // 2. 不是完整的sku组合按钮，提交空对象父组件\n      const validSelectedValues = getSelectedValues(props.goods.specs).filter(v => v)\n      if (validSelectedValues.length === props.goods.specs.length) {\n        // 完整\n        const skuIds = pathMap[validSelectedValues.join(spliter)]\n        const sku = props.goods.skus.find(sku => sku.id === skuIds[0])\n        emit('change', {\n          skuId: sku.id,\n          price: sku.price,\n          oldPrice: sku.oldPrice,\n          inventory: sku.inventory,\n          // 属性名：属性值 属性名1：属性值1 ... 这样的字符串\n          specsText: sku.specs.reduce((p, c) => `${p} ${c.name}：${c.valueName}`, '').trim()\n        })\n      } else {\n        // 不完整\n        // 父组件需要判断是否规格选择完整，不完整不能加购物车。\n        emit('change', {})\n      }\n    }\n    return { changeSku }\n  }\n}\n</script>\n<style scoped lang=\"less\">\n.sku-state-mixin () {\n  border: 1px solid #e4e4e4;\n  margin-right: 10px;\n  cursor: pointer;\n  &.selected {\n    border-color: @xtxColor;\n  }\n  &.disabled {\n    opacity: 0.6;\n    border-style: dashed;\n    cursor: not-allowed;\n  }\n}\n.goods-sku {\n  padding-left: 10px;\n  padding-top: 20px;\n  dl {\n    display: flex;\n    padding-bottom: 10px;\n    align-items: center;\n    dt {\n      width: 50px;\n      color: #999;\n    }\n    dd {\n      flex: 1;\n      color: #666;\n      line-height: 40px;\n      > img {\n        width: 50px;\n        height: 50px;\n        margin-bottom: 5px;\n        .sku-state-mixin ();\n      }\n      > span {\n        display: inline-block;\n        height: 30px;\n        line-height: 28px;\n        padding: 0 20px;\n        .sku-state-mixin ();\n      }\n    }\n  }\n}\n</style>\n","/**\n * Find power-set of a set using BITWISE approach.\n *\n * @param {*[]} originalSet\n * @return {*[][]}\n */\n export default function bwPowerSet(originalSet) {\n  const subSets = [];\n\n  // We will have 2^n possible combinations (where n is a length of original set).\n  // It is because for every element of original set we will decide whether to include\n  // it or not (2 options for each set element).\n  const numberOfCombinations = 2 ** originalSet.length;\n\n  // Each number in binary representation in a range from 0 to 2^n does exactly what we need:\n  // it shows by its bits (0 or 1) whether to include related element from the set or not.\n  // For example, for the set {1, 2, 3} the binary number of 0b010 would mean that we need to\n  // include only \"2\" to the current set.\n  for (let combinationIndex = 0; combinationIndex < numberOfCombinations; combinationIndex += 1) {\n    const subSet = [];\n\n    for (let setElementIndex = 0; setElementIndex < originalSet.length; setElementIndex += 1) {\n      // Decide whether we need to include current element into the subset or not.\n      if (combinationIndex & (1 << setElementIndex)) {\n        subSet.push(originalSet[setElementIndex]);\n      }\n    }\n\n    // Add current subset to the list of all subsets.\n    subSets.push(subSet);\n  }\n\n  return subSets;\n}","import { render } from \"./goods-sku.vue?vue&type=template&id=0fe429cd&scoped=true\"\nimport script from \"./goods-sku.vue?vue&type=script&lang=js\"\nexport * from \"./goods-sku.vue?vue&type=script&lang=js\"\n\nimport \"./goods-sku.vue?vue&type=style&index=0&id=0fe429cd&scoped=true&lang=less\"\nscript.render = render\nscript.__scopeId = \"data-v-0fe429cd\"\n\nexport default script"],"sourceRoot":""}