79 lines
2.3 KiB
Vue
79 lines
2.3 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(item)"
|
||
|
:class="['item', item.checked ? 'active' : '']"
|
||
|
>{{ sitem.name }}</view
|
||
|
>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</template>
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script setup>
|
||
|
import { defineProps, ref, computed } from 'vue'
|
||
|
|
||
|
const props = defineProps({
|
||
|
modelValue: {
|
||
|
type: Array,
|
||
|
default: () => [],
|
||
|
},
|
||
|
goodsPropertyList: {
|
||
|
type: Array,
|
||
|
default: () => [],
|
||
|
},
|
||
|
})
|
||
|
|
||
|
function chooseProperty(item) {
|
||
|
item.checked = !item.checked
|
||
|
}
|
||
|
</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>
|