165 lines
3.5 KiB
Vue
165 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { defineComponent, onMounted, ref, watch } from 'vue'
|
|
import { PREFIX } from '../_constants'
|
|
|
|
interface SkuInfo {
|
|
name: string
|
|
id: number
|
|
active: boolean
|
|
disable: boolean
|
|
[props: string]: any
|
|
}
|
|
const props = defineProps({
|
|
sku: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['selectSku'])
|
|
|
|
const skuInfo = ref<SkuInfo[]>([])
|
|
|
|
watch(
|
|
() => props.sku,
|
|
(value) => {
|
|
skuInfo.value = [].slice.call(value)
|
|
},
|
|
{ deep: true },
|
|
)
|
|
|
|
onMounted(() => {
|
|
if (props.sku.length > 0)
|
|
skuInfo.value = [].slice.call(props.sku)
|
|
})
|
|
|
|
// 切换商品 Sku
|
|
function changeSaleChild(attrItem: any, index: any, parentItem: any, parentIndex: any) {
|
|
if (attrItem.checkFlag || attrItem.disable)
|
|
return
|
|
|
|
emit('selectSku', {
|
|
sku: attrItem,
|
|
skuIndex: index,
|
|
parentSku: parentItem,
|
|
parentIndex,
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
const componentName = `${PREFIX}-sku-select`
|
|
|
|
export default defineComponent({
|
|
name: componentName,
|
|
options: {
|
|
virtualHost: true,
|
|
addGlobalClass: true,
|
|
styleIsolation: 'shared',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view class="nut-sku-select">
|
|
<view v-for="(item, index) in skuInfo" :key="item.id" class="nut-sku-select-item">
|
|
<view class="nut-sku-select-item-title">
|
|
{{ item.name }}
|
|
</view>
|
|
<view class="nut-sku-select-item-skus">
|
|
<view
|
|
v-for="(itemAttr, itemAttrIndex) in item.list"
|
|
:key="itemAttr.name"
|
|
class="nut-sku-select-item-skus-sku"
|
|
:class="[{ active: !itemAttr.disable && itemAttr.active }, { disable: itemAttr.disable }]"
|
|
@click="changeSaleChild(itemAttr, itemAttrIndex, item, index)"
|
|
>
|
|
{{ itemAttr.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.nut-theme-dark {
|
|
.nut-sku {
|
|
&-select {
|
|
&-item {
|
|
&-title {
|
|
color: $dark-color;
|
|
}
|
|
|
|
&-skus {
|
|
&-sku {
|
|
color: $dark-color;
|
|
background: $dark-background2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nut-sku {
|
|
&-select {
|
|
&-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&-title {
|
|
height: 13px;
|
|
margin-bottom: $sku-spec-title-margin-bottom;
|
|
font-size: $sku-spec-title-font-size;
|
|
font-weight: $sku-spec-title-font-weight;
|
|
color: $sku-spec-title-color;
|
|
}
|
|
|
|
&-skus {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
&-sku {
|
|
flex-shrink: 0;
|
|
height: $sku-spec-height;
|
|
padding: $sku-spec-padding;
|
|
margin-right: $sku-spec-margin-right;
|
|
margin-bottom: 12px;
|
|
font-size: $sku-spec-font-size;
|
|
line-height: $sku-spec-line-height;
|
|
color: $sku-spec-color;
|
|
background: $sku-spec-background;
|
|
border: 1px solid rgb(242 242 242 / 100%);
|
|
border-radius: 15px;
|
|
|
|
&.active {
|
|
position: relative;
|
|
color: $primary-color;
|
|
background: transparent;
|
|
border: $sku-item-border;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
content: "";
|
|
background-color: $sku-item-active-bg;
|
|
border-radius: 15px;
|
|
opacity: 0.15;
|
|
}
|
|
}
|
|
|
|
&.disable {
|
|
color: $text-color;
|
|
text-decoration: $sku-item-disable-line;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|