mall-app-t/pages/product/components/propertyList.vue

130 lines
2.8 KiB
Vue
Raw Normal View History

2024-06-04 18:43:13 +08:00
<template>
2024-06-06 02:20:25 +08:00
<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>
2024-06-04 18:43:13 +08:00
</template>
<script setup>
import { ref, computed, defineEmits, defineProps, defineExpose } from 'vue'
2024-06-05 18:58:12 +08:00
import peach from '@/peach'
2024-06-06 02:20:25 +08:00
import { cloneDeep } from 'lodash';
2024-06-04 18:43:13 +08:00
/**
* todo 底部高度配置
*/
const props = defineProps({
2024-06-06 02:20:25 +08:00
modelValue: {
default: () => [],
required: true,
type: Array,
},
goodsPropertyList: {
default: () => [],
required: true,
type: Array,
},
2024-06-04 18:43:13 +08:00
})
2024-06-06 02:20:25 +08:00
const nowGoodsPropertyList = ref([])
const emit = defineEmits(['update:modelValue', 'confirm'])
2024-06-04 18:43:13 +08:00
const propertyListPopupRef = ref()
const onClosePopup = () => {
2024-06-06 02:20:25 +08:00
propertyListPopupRef.value.close()
2024-06-04 18:43:13 +08:00
}
function chooseProperty(item) {
2024-06-06 02:20:25 +08:00
item.checked = !item.checked
2024-06-04 18:43:13 +08:00
}
function onConfirmPopup() {
2024-06-06 02:20:25 +08:00
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()
2024-06-04 18:43:13 +08:00
}
function onOpen() {
2024-06-06 02:20:25 +08:00
nowGoodsPropertyList.value = cloneDeep(props.goodsPropertyList)
propertyListPopupRef.value.open('bottom')
2024-06-04 18:43:13 +08:00
}
defineExpose({
2024-06-06 02:20:25 +08:00
onOpen,
2024-06-04 18:43:13 +08:00
})
</script>
<style lang="scss" scoped>
.property-list {
2024-06-06 02:20:25 +08:00
.popup-content {
height: 500rpx;
padding: 40rpx;
display: flex;
flex-wrap: wrap;
gap: 20rpx;
justify-content: flex-start;
2024-06-04 18:43:13 +08:00
2024-06-06 02:20:25 +08:00
.property-item {
text-align: center;
line-height: 60rpx;
height: 60rpx;
padding: 0 10px;
border-radius: 10px;
background-color: var(--ui-BG-4);
2024-06-04 18:43:13 +08:00
}
2024-06-06 02:20:25 +08:00
.active {
color: #fff;
background-color: var(--ui-BG-Main);
2024-06-04 18:43:13 +08:00
}
2024-06-06 02:20:25 +08:00
}
.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;
}
2024-06-04 18:43:13 +08:00
}
</style>