116 lines
2.5 KiB
Vue
116 lines
2.5 KiB
Vue
<template>
|
||
<!-- 尺码选择：5 个按钮横排，选中态橙色边框+橙色文字（背景仍为浅灰）；不可用置灰 -->
|
||
<view class="size-wrap">
|
||
<text class="title">尺码</text>
|
||
|
||
<view class="size-list">
|
||
<view
|
||
v-for="(item, index) in list"
|
||
:key="index"
|
||
class="size-item"
|
||
:class="{ active: isSelected(item), disabled: !isEnabled(item) }"
|
||
@tap="selectSize(item)"
|
||
>
|
||
<text class="size-text">{{ itemName(item) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'SizeSelector',
|
||
props: {
|
||
// 支持两种格式：字符串数组 ['S','M','L'] 或 对象数组 [{name:'S',enabled:true}]
|
||
list: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
selected: {
|
||
type: [String, Number, Object],
|
||
default: ''
|
||
}
|
||
},
|
||
methods: {
|
||
itemName(item) {
|
||
if (item == null) return ''
|
||
if (typeof item === 'object') return item.name
|
||
return String(item)
|
||
},
|
||
isEnabled(item) {
|
||
if (item == null) return false
|
||
if (typeof item === 'object') return item.enabled !== false
|
||
return true
|
||
},
|
||
isSelected(item) {
|
||
const name = this.itemName(item)
|
||
const selName =
|
||
this.selected == null
|
||
? ''
|
||
: typeof this.selected === 'object'
|
||
? this.selected.name
|
||
: String(this.selected)
|
||
return name === selName
|
||
},
|
||
selectSize(item) {
|
||
if (!this.isEnabled(item)) return
|
||
this.$emit('select', this.itemName(item))
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.size-wrap {
|
||
padding: 30rpx 20rpx; /* 15px 10px */
|
||
background: #ffffff;
|
||
}
|
||
|
||
/* 标题 */
|
||
.title {
|
||
display: block;
|
||
font-size: 29rpx; /* 15px */
|
||
color: #000000;
|
||
line-height: 33rpx;
|
||
margin-bottom: 30rpx; /* 15px */
|
||
}
|
||
|
||
/* 尺码列表横排 */
|
||
.size-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12rpx; /* 6px */
|
||
}
|
||
|
||
/* 单个尺码按钮 44x34，圆角 4px，背景 #F7F7F7 */
|
||
.size-item {
|
||
width: 85rpx; /* 44px */
|
||
height: 65rpx; /* 34px */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f7f7f7;
|
||
border: 1rpx solid transparent;
|
||
border-radius: 8rpx; /* 4px */
|
||
}
|
||
|
||
/* 选中：橙色边框 + 橙色文字（背景保持 #F7F7F7） */
|
||
.size-item.active {
|
||
border-color: #ff6800;
|
||
}
|
||
/* 不可用：降低透明度且禁止点击 */
|
||
.size-item.disabled {
|
||
opacity: 0.4;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.size-text {
|
||
font-size: 25rpx; /* 13px */
|
||
color: #000000;
|
||
line-height: 33rpx;
|
||
}
|
||
.size-item.active .size-text {
|
||
color: #ff6800;
|
||
}
|
||
</style>
|