You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
176 lines
3.3 KiB
176 lines
3.3 KiB
<template>
|
|
<view class="page">
|
|
<view class="submit-unit">
|
|
<view class="title">
|
|
颜色选择
|
|
</view>
|
|
<view class="list">
|
|
<view :class="{act : colorIndex == index}"
|
|
v-for="(item, index) in colorList"
|
|
@click="selectUnit(item, index, 0)" :key="index">
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="submit-unit">
|
|
<view class="title">
|
|
尺寸选择
|
|
</view>
|
|
<view class="list">
|
|
<view
|
|
:class="{act : sizeIndex == index,
|
|
del : getUnitClassDel(item, index)}"
|
|
v-for="(item, index) in sizeList"
|
|
@click="selectUnit(item, index, 1)" :key="index">
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
let defaultKey = '默认'
|
|
export default {
|
|
props : {
|
|
list : {
|
|
default : []
|
|
},
|
|
},
|
|
computed : {
|
|
unitMap(){
|
|
let map = {}
|
|
|
|
this.list.forEach(n => {
|
|
|
|
let color = n.colour || defaultKey
|
|
let title = n.title || defaultKey
|
|
|
|
let key = color + ':' + title
|
|
|
|
n.unitKeyName = color + ',' + title
|
|
|
|
map[key] = n
|
|
})
|
|
|
|
return map
|
|
},
|
|
// 尺寸列表
|
|
sizeList(){
|
|
return [...new Set(this.list.map(n => n.title || defaultKey))]
|
|
},
|
|
// 颜色列表
|
|
colorList(){
|
|
return [...new Set(this.list.map(n => n.colour || defaultKey))]
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
unitKey : '',
|
|
colorIndex : 0,
|
|
sizeIndex : 0,
|
|
}
|
|
},
|
|
mounted() {
|
|
if(!this.unitKey && this.list.length > 0){
|
|
this.selectUnit(this.colorList[0], 0, 0)
|
|
}
|
|
},
|
|
methods: {
|
|
selectUnit(item, index, type){
|
|
if(type == 0){
|
|
let color = this.colorList[index]
|
|
for(let key in this.unitMap){
|
|
if(key.startsWith(color)){
|
|
this.unitKey = key
|
|
break
|
|
}
|
|
}
|
|
}else{
|
|
// 判断是否有货
|
|
if(this.getUnitClassDel(item, index, type)){
|
|
return
|
|
}
|
|
let color = this.colorList[this.colorIndex]
|
|
let size = this.sizeList[index]
|
|
this.unitKey = color + ':' + item
|
|
}
|
|
this.updateIndexAll()
|
|
this.$emit('selectUnit', this.unitMap[this.unitKey])
|
|
},
|
|
getUnitClassDel(item, index, type){
|
|
let key = this.colorList[this.colorIndex] + ':' + item
|
|
return !this.unitMap[key]
|
|
},
|
|
// 更新索引
|
|
updateIndexAll(){
|
|
let key = this.unitKey
|
|
|
|
this.colorList.forEach((n, i) => {
|
|
if(key.startsWith(n + ':')){
|
|
this.colorIndex = i
|
|
}
|
|
})
|
|
this.sizeList.forEach((n, i) => {
|
|
if(key.endsWith(':' + n)){
|
|
this.sizeIndex = i
|
|
}
|
|
})
|
|
},
|
|
setUnitById(id){
|
|
for(let key in this.unitMap){
|
|
if(this.unitMap[key].id == id){
|
|
this.unitKey = key
|
|
}
|
|
}
|
|
this.updateIndexAll()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page{
|
|
.submit-unit {
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 22rpx;
|
|
|
|
.act {
|
|
color: $uni-color;
|
|
border: 1px solid $uni-color;
|
|
background-color: #F9E7DE;
|
|
}
|
|
|
|
.del{
|
|
opacity: 0.3;
|
|
&::after{
|
|
content: '【无货】';
|
|
}
|
|
}
|
|
|
|
view {
|
|
border-radius: 15rpx;
|
|
width: 320rpx;
|
|
background-color: #eee;
|
|
border: 1px solid #eee;
|
|
margin: 10rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 15rpx 0;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|