85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
<template>
|
|
<view class="property-detail">
|
|
<template v-for="item in goodsPropertyList" :key="item.id">
|
|
<view class="property-item ss-p-40 ss-gap-40" v-if="item.checked">
|
|
<view class="property-name ss-flex ss-gap-40 ss-m-b-20">
|
|
<view class="property-name-text">规格名</view>
|
|
<view class="property-name-value">{{ item.name }}</view>
|
|
</view>
|
|
<view class="property-value ss-flex ss-gap-40">
|
|
<view class="property-value-text">规格值</view>
|
|
<view class="property-value-value ss-flex ss-gap-10">
|
|
<view
|
|
v-for="sitem in item.propertyValues"
|
|
@tap="chooseProperty(sitem)"
|
|
:class="['item', sitem.checked ? 'active' : '']"
|
|
>{{ sitem.name }}</view
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits, ref, computed } from 'vue'
|
|
import { goodsPropertyList } from '../js/sku'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
goodsPropertyList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['changeSubProperty'])
|
|
|
|
function chooseProperty(item) {
|
|
item.checked = !item.checked
|
|
emit('changeSubProperty')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.property-detail {
|
|
.property-item {
|
|
margin: 0 40rpx 20rpx;
|
|
background-color: #f9f9f9;
|
|
border-radius: 10px;
|
|
|
|
.property-name {
|
|
.property-name-text {
|
|
color: #606266;
|
|
}
|
|
}
|
|
|
|
.property-value {
|
|
.property-value-text {
|
|
color: #606266;
|
|
}
|
|
|
|
.property-value-value {
|
|
.item {
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
height: 60rpx;
|
|
padding: 0 10px;
|
|
border-radius: 10px;
|
|
background-color: var(--ui-BG-4);
|
|
}
|
|
|
|
.active {
|
|
color: #fff;
|
|
background-color: var(--ui-BG-Main);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|