{"version":3,"file":"s-select-sku.js","sources":["../../../../../../src/sheep/components/s-select-sku/s-select-sku.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC9jb21wb25lbnRzL3Mtc2VsZWN0LXNrdS9zLXNlbGVjdC1za3UudnVl"],"sourcesContent":["<template>\r\n  <!-- 规格弹窗 -->\r\n  <su-popup :show=\"show\" round=\"10\" @close=\"emits('close')\">\r\n    <!-- SKU 信息 -->\r\n    <view class=\"ss-modal-box bg-white ss-flex-col\">\r\n      <view class=\"modal-header ss-flex ss-col-center\">\r\n        <view class=\"header-left ss-m-r-30\">\r\n          <image\r\n            class=\"sku-image\"\r\n            :src=\"state.selectedSku.picUrl || goodsInfo.picUrl\"\r\n            mode=\"aspectFill\"\r\n          />\r\n        </view>\r\n        <view class=\"header-right ss-flex-col ss-row-between ss-flex-1\">\r\n          <view class=\"goods-title ss-line-2\">{{ goodsInfo.name }}</view>\r\n          <view class=\"header-right-bottom ss-flex ss-col-center ss-row-between\">\r\n            <view class=\"ss-flex\">\r\n              <view class=\"price-text\">\r\n                {{ fen2yuan(state.selectedSku.price || goodsInfo.price) }}\r\n              </view>\r\n            </view>\r\n            <view class=\"stock-text ss-m-l-20\">\r\n              {{ formatStock('exact', state.selectedSku.stock || goodsInfo.stock) }}\r\n            </view>\r\n          </view>\r\n        </view>\r\n      </view>\r\n\r\n      <!-- 属性选择 -->\r\n      <view class=\"modal-content ss-flex-1\">\r\n        <scroll-view scroll-y=\"true\" class=\"modal-content-scroll\" @touchmove.stop>\r\n          <view class=\"sku-item ss-m-b-20\" v-for=\"property in propertyList\" :key=\"property.id\">\r\n            <view class=\"label-text ss-m-b-20\">{{ property.name }}</view>\r\n            <view class=\"ss-flex ss-col-center ss-flex-wrap\">\r\n              <button\r\n                class=\"ss-reset-button spec-btn\"\r\n                v-for=\"value in property.values\"\r\n                :class=\"[\r\n                  {\r\n                    'ui-BG-Main-Gradient': state.currentPropertyArray[property.id] === value.id,\r\n                  },\r\n                  {\r\n                    'disabled-btn': value.disabled === true,\r\n                  },\r\n                ]\"\r\n                :key=\"value.id\"\r\n                :disabled=\"value.disabled === true\"\r\n                @tap=\"onSelectSku(property.id, value.id)\"\r\n              >\r\n                {{ value.name }}\r\n              </button>\r\n            </view>\r\n          </view>\r\n          <view class=\"buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40\">\r\n            <view class=\"label-text\">购买数量</view>\r\n            <su-number-box\r\n              :min=\"1\"\r\n              :max=\"state.selectedSku.stock\"\r\n              :step=\"1\"\r\n              v-model=\"state.selectedSku.goods_num\"\r\n              @change=\"onNumberChange($event)\"\r\n            />\r\n          </view>\r\n        </scroll-view>\r\n      </view>\r\n\r\n      <!-- 操作区 -->\r\n      <view class=\"modal-footer border-top\">\r\n        <view class=\"buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center\">\r\n          <button class=\"ss-reset-button add-btn ui-Shadow-Main\" @tap=\"onAddCart\">\r\n            加入购物车\r\n          </button>\r\n          <button class=\"ss-reset-button buy-btn ui-Shadow-Main\" @tap=\"onBuy\">立即购买</button>\r\n        </view>\r\n      </view>\r\n    </view>\r\n  </su-popup>\r\n</template>\r\n\r\n<script setup>\r\nimport { computed, reactive, watch } from 'vue'\r\nimport sheep from '@/sheep'\r\nimport { formatStock, convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods'\r\n\r\nconst emits = defineEmits(['change', 'addCart', 'buy', 'close'])\r\nconst props = defineProps({\r\n  goodsInfo: {\r\n    type: Object,\r\n    default() {},\r\n  },\r\n  show: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n})\r\n\r\nconst state = reactive({\r\n  selectedSku: {}, // 选中的 SKU\r\n  currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号\r\n})\r\n\r\nconst propertyList = convertProductPropertyList(props.goodsInfo.skus)\r\n\r\n// SKU 列表\r\nconst skuList = computed(() => {\r\n  const skuPrices = props.goodsInfo.skus\r\n  for (const price of skuPrices) {\r\n    price.value_id_array = price.properties.map((item) => item.valueId)\r\n  }\r\n  return skuPrices\r\n})\r\n\r\nwatch(\r\n  () => state.selectedSku,\r\n  (newVal) => {\r\n    emits('change', newVal)\r\n  },\r\n  {\r\n    immediate: true, // 立即执行\r\n    deep: true, // 深度监听\r\n  },\r\n)\r\n\r\n// 输入框改变数量\r\nfunction onNumberChange(e) {\r\n  if (e === 0) return\r\n  if (state.selectedSku.goods_num === e) return\r\n  state.selectedSku.goods_num = e\r\n}\r\n\r\n// 加入购物车\r\nfunction onAddCart() {\r\n  if (state.selectedSku.id <= 0) {\r\n    sheep.$helper.toast('请选择规格')\r\n    return\r\n  }\r\n  if (state.selectedSku.stock <= 0) {\r\n    sheep.$helper.toast('库存不足')\r\n    return\r\n  }\r\n\r\n  emits('addCart', state.selectedSku)\r\n}\r\n\r\n// 立即购买\r\nfunction onBuy() {\r\n  if (state.selectedSku.id <= 0) {\r\n    sheep.$helper.toast('请选择规格')\r\n    return\r\n  }\r\n  if (state.selectedSku.stock <= 0) {\r\n    sheep.$helper.toast('库存不足')\r\n    return\r\n  }\r\n  emits('buy', state.selectedSku)\r\n}\r\n\r\n// 改变禁用状态：计算每个 property 属性值的按钮，是否禁用\r\nfunction changeDisabled(isChecked = false, propertyId = 0, valueId = 0) {\r\n  let newSkus = [] // 所有可以选择的 sku 数组\r\n  if (isChecked) {\r\n    // 情况一：选中 property\r\n    // 获得当前点击选中 property 的、所有可用 SKU\r\n    for (const price of skuList.value) {\r\n      if (price.stock <= 0) {\r\n        continue\r\n      }\r\n      if (price.value_id_array.indexOf(valueId) >= 0) {\r\n        newSkus.push(price)\r\n      }\r\n    }\r\n  } else {\r\n    // 情况二：取消选中 property\r\n    // 当前所选 property 下，所有可以选择的 SKU\r\n    newSkus = getCanUseSkuList()\r\n  }\r\n\r\n  // 所有存在并且有库存未选择的 SKU 的 value 属性值 id\r\n  let noChooseValueIds = []\r\n  for (const price of newSkus) {\r\n    noChooseValueIds = noChooseValueIds.concat(price.value_id_array)\r\n  }\r\n  noChooseValueIds = Array.from(new Set(noChooseValueIds)) // 去重\r\n\r\n  if (isChecked) {\r\n    // 去除当前选中的 value 属性值 id\r\n    const index = noChooseValueIds.indexOf(valueId)\r\n    noChooseValueIds.splice(index, 1)\r\n  } else {\r\n    // 循环去除当前已选择的 value 属性值 id\r\n    state.currentPropertyArray.forEach((currentPropertyId) => {\r\n      if (currentPropertyId.toString() !== '') {\r\n        return\r\n      }\r\n      // currentPropertyId 为空是反选 填充的\r\n      const index = noChooseValueIds.indexOf(currentPropertyId)\r\n      if (index >= 0) {\r\n        // currentPropertyId 存在于 noChooseValueIds\r\n        noChooseValueIds.splice(index, 1)\r\n      }\r\n    })\r\n  }\r\n\r\n  // 当前已选择的 property 数组\r\n  let choosePropertyIds = []\r\n  if (!isChecked) {\r\n    // 当前已选择的 property\r\n    state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {\r\n      if (currentPropertyId !== '') {\r\n        // currentPropertyId 为空是反选 填充的\r\n        choosePropertyIds.push(currentValueId)\r\n      }\r\n    })\r\n  } else {\r\n    // 当前点击选择的 property\r\n    choosePropertyIds = [propertyId]\r\n  }\r\n\r\n  for (const propertyIndex in propertyList) {\r\n    // 当前点击的 property、或者取消选择时候，已选中的 property 不进行处理\r\n    if (choosePropertyIds.indexOf(propertyList[propertyIndex].id) >= 0) {\r\n      continue\r\n    }\r\n    // 如果当前 property id 不存在于有库存的 SKU 中，则禁用\r\n    for (const valueIndex in propertyList[propertyIndex].values) {\r\n      propertyList[propertyIndex].values[valueIndex].disabled =\r\n        noChooseValueIds.indexOf(propertyList[propertyIndex].values[valueIndex].id) < 0 // true 禁用 or false 不禁用\r\n    }\r\n  }\r\n}\r\n\r\n// 当前所选属性下，获取所有有库存的 SKU 们\r\nfunction getCanUseSkuList() {\r\n  const newSkus = []\r\n  for (const sku of skuList.value) {\r\n    if (sku.stock <= 0) {\r\n      continue\r\n    }\r\n    let isOk = true\r\n    state.currentPropertyArray.forEach((propertyId) => {\r\n      // propertyId 不为空，并且，这个 条 sku 没有被选中，则排除\r\n      if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) {\r\n        isOk = false\r\n      }\r\n    })\r\n    if (isOk) {\r\n      newSkus.push(sku)\r\n    }\r\n  }\r\n  return newSkus\r\n}\r\n\r\n// 选择规格\r\nfunction onSelectSku(propertyId, valueId) {\r\n  // 清空已选择\r\n  let isChecked = true // 选中 or 取消选中\r\n  if (\r\n    state.currentPropertyArray[propertyId] !== undefined &&\r\n    state.currentPropertyArray[propertyId] === valueId\r\n  ) {\r\n    // 点击已被选中的，删除并填充 ''\r\n    isChecked = false\r\n    state.currentPropertyArray.splice(propertyId, 1, '')\r\n  } else {\r\n    // 选中\r\n    state.currentPropertyArray[propertyId] = valueId\r\n  }\r\n\r\n  // 选中的 property 大类\r\n  const choosePropertyId = []\r\n  state.currentPropertyArray.forEach((currentPropertyId) => {\r\n    if (currentPropertyId !== '') {\r\n      // currentPropertyId 为空是反选 填充的\r\n      choosePropertyId.push(currentPropertyId)\r\n    }\r\n  })\r\n\r\n  // 当前所选 property 下，所有可以选择的 SKU 们\r\n  const newSkuList = getCanUseSkuList()\r\n\r\n  // 判断所有 property 大类是否选择完成\r\n  if (choosePropertyId.length === propertyList.length && newSkuList.length) {\r\n    newSkuList[0].goods_num = state.selectedSku.goods_num || 1\r\n    state.selectedSku = newSkuList[0]\r\n  } else {\r\n    state.selectedSku = {}\r\n  }\r\n\r\n  // 改变 property 禁用状态\r\n  changeDisabled(isChecked, propertyId, valueId)\r\n}\r\n\r\nchangeDisabled(false)\r\n// TODO 芋艿：待讨论的优化点：1）单规格，要不要默认选中；2）默认要不要选中第一个规格\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n \r\n// 购买\r\n.buy-box {\r\n  padding: 10rpx 0;\r\n\r\n  .add-btn {\r\n    width: 356rpx;\r\n    height: 80rpx;\r\n    color: var(--ui-BG-Main);\r\n    background-color: var(--ui-BG-Main-light);\r\n    border-radius: 40rpx 0 0 40rpx;\r\n  }\r\n\r\n  .buy-btn {\r\n    width: 356rpx;\r\n    height: 80rpx;\r\n    color: #fff;\r\n    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));\r\n    border-radius: 0 40rpx 40rpx 0;\r\n  }\r\n\r\n  .score-btn {\r\n    width: 100%;\r\n    height: 80rpx;\r\n    margin: 0 20rpx;\r\n    color: #fff;\r\n    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));\r\n    border-radius: 40rpx;\r\n  }\r\n}\r\n\r\n.ss-modal-box {\r\n  max-height: 1000rpx;\r\n  border-radius: 30rpx 30rpx 0 0;\r\n\r\n  .modal-header {\r\n    position: relative;\r\n    padding: 80rpx 20rpx 40rpx;\r\n\r\n    .sku-image {\r\n      width: 160rpx;\r\n      height: 160rpx;\r\n      border-radius: 10rpx;\r\n    }\r\n\r\n    .header-right {\r\n      height: 160rpx;\r\n    }\r\n\r\n    .close-icon {\r\n      position: absolute;\r\n      top: 10rpx;\r\n      right: 20rpx;\r\n      font-size: 46rpx;\r\n      opacity: 0.2;\r\n    }\r\n\r\n    .goods-title {\r\n      font-size: 28rpx;\r\n      font-weight: 500;\r\n      line-height: 42rpx;\r\n    }\r\n\r\n    .score-img {\r\n      width: 36rpx;\r\n      height: 36rpx;\r\n      margin: 0 4rpx;\r\n    }\r\n\r\n    .score-text {\r\n      font-family: OPPOSANS;\r\n      font-size: 30rpx;\r\n      font-weight: 500;\r\n      color: $red;\r\n    }\r\n\r\n    .price-text {\r\n      font-family: OPPOSANS;\r\n      font-size: 30rpx;\r\n      font-weight: 500;\r\n      color: $red;\r\n\r\n      &::before {\r\n        font-size: 30rpx;\r\n        font-weight: 500;\r\n        color: $red;\r\n        content: '￥';\r\n      }\r\n    }\r\n\r\n    .stock-text {\r\n      font-size: 26rpx;\r\n      color: #999999;\r\n    }\r\n  }\r\n\r\n  .modal-content {\r\n    padding: 0 20rpx;\r\n\r\n    .modal-content-scroll {\r\n      max-height: 600rpx;\r\n\r\n      .label-text {\r\n        font-size: 26rpx;\r\n        font-weight: 500;\r\n      }\r\n\r\n      .buy-num-box {\r\n        height: 100rpx;\r\n      }\r\n\r\n      .spec-btn {\r\n        min-width: 100rpx;\r\n        height: 60rpx;\r\n        padding: 0 30rpx;\r\n        margin-right: 10rpx;\r\n        margin-bottom: 10rpx;\r\n        font-size: 26rpx;\r\n        color: #434343;\r\n        background: #f4f4f4;\r\n        border-radius: 30rpx;\r\n      }\r\n\r\n      .disabled-btn {\r\n        font-weight: 400;\r\n        color: #c6c6c6;\r\n        background: #f8f8f8;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/components/s-select-sku/s-select-sku.vue'\nwx.createComponent(Component)"],"names":["reactive","convertProductPropertyList","computed","watch","sheep"],"mappings":"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"}