| | |
| | | <template #sku-header-price> |
| | | <div class="pro-sku-header"> |
| | | <div class="pro-sku-header-title">{{ goods.name }}</div> |
| | | <nut-price :price="goods.price" /> |
| | | <div class="pro-sku-header-spec">{{ currentSpecName }}</div> |
| | | <nut-price :price="goods.price" size="large" /> |
| | | </div> |
| | | </template> |
| | | <template #sku-header-extra> |
| | | <div></div> |
| | | </template> |
| | | </nut-sku> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { toThousand } from '@12333/utils'; |
| | | import { Goods, SkuItem } from './sku'; |
| | | import { Goods, SkuItem, SkuUtils } from './sku'; |
| | | import { computed } from 'vue'; |
| | | |
| | | defineOptions({ |
| | | name: 'Sku', |
| | |
| | | |
| | | const selectSku = (ss) => { |
| | | const { sku, skuIndex, parentSku, parentIndex } = ss; |
| | | console.log('sku: ', sku); |
| | | if (sku.disable) return false; |
| | | props.sku[parentIndex].list.forEach((s) => { |
| | | s.active = s.id == sku.id; |
| | |
| | | goods.value = { |
| | | ...goods.value, |
| | | skuId: sku.id, |
| | | price: toThousand(sku.price), |
| | | price: sku.price, |
| | | }; |
| | | }; |
| | | |
| | | const currentSpecName = computed(() => { |
| | | const spec = SkuUtils.getCurrentActiveSpec(props.sku); |
| | | if (spec) { |
| | | return spec.name ?? ''; |
| | | } |
| | | return ''; |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | |
| | | .pro-sku-header { |
| | | flex: 1; |
| | | min-height: 0; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | |
| | | .pro-sku-header-title { |
| | | color: boleGetCssVar('text-color', 'primary'); |
| | | } |
| | | |
| | | .pro-sku-header-spec { |
| | | color: boleGetCssVar('text-color', 'secondary'); |
| | | font-size: 26px; |
| | | } |
| | | } |
| | | |
| | | .nut-sku-content { |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | } |
| | | } |
| | | </style> |