130 lines
2.8 KiB
Vue
130 lines
2.8 KiB
Vue
<template>
|
|
<view class="property-list">
|
|
<uni-popup type="bottom" ref="propertyListPopupRef" background-color="#fff">
|
|
<view class="popup-header">
|
|
<view class="button-cancel" @click="onClosePopup">取消</view>
|
|
<view class="button-link" @click="onConfirmPopup">确定</view>
|
|
</view>
|
|
<view class="popup-content">
|
|
<view v-for="item in nowGoodsPropertyList" :key="item.id"
|
|
:class="['property-item', item.checked ? 'active' : '']" @tap="chooseProperty(item)">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, defineEmits, defineProps, defineExpose } from 'vue'
|
|
import peach from '@/peach'
|
|
import { cloneDeep } from 'lodash';
|
|
|
|
/**
|
|
* todo 底部高度配置
|
|
*/
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
default: () => [],
|
|
required: true,
|
|
type: Array,
|
|
},
|
|
goodsPropertyList: {
|
|
default: () => [],
|
|
required: true,
|
|
type: Array,
|
|
},
|
|
})
|
|
|
|
const nowGoodsPropertyList = ref([])
|
|
|
|
const emit = defineEmits(['update:modelValue', 'confirm'])
|
|
|
|
const propertyListPopupRef = ref()
|
|
|
|
const onClosePopup = () => {
|
|
propertyListPopupRef.value.close()
|
|
}
|
|
|
|
function chooseProperty(item) {
|
|
item.checked = !item.checked
|
|
}
|
|
|
|
function onConfirmPopup() {
|
|
|
|
let result = nowGoodsPropertyList.value
|
|
.filter((item) => {
|
|
if (item.checked) {
|
|
return item.propertyValues.filter((sitem) => sitem.checked)
|
|
}
|
|
})
|
|
.map((item) => {
|
|
let children = item.propertyValues.filter((sitem) => sitem.checked).map((titem) => titem.id)
|
|
return {
|
|
id: item.id,
|
|
children: children,
|
|
}
|
|
})
|
|
|
|
|
|
peach.$store('trade').selectedProperty = result
|
|
emit('confirm')
|
|
emit('update:modelValue', result)
|
|
onClosePopup()
|
|
}
|
|
|
|
function onOpen() {
|
|
nowGoodsPropertyList.value = cloneDeep(props.goodsPropertyList)
|
|
propertyListPopupRef.value.open('bottom')
|
|
}
|
|
|
|
defineExpose({
|
|
onOpen,
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.property-list {
|
|
.popup-content {
|
|
height: 500rpx;
|
|
padding: 40rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
justify-content: flex-start;
|
|
|
|
.property-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);
|
|
}
|
|
}
|
|
|
|
.button-link {
|
|
color: #1892ea;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.button-cancel {
|
|
color: #888;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24rpx 38rpx 0;
|
|
}
|
|
}
|
|
</style>
|