mall-app-t/pages/product/components/propertyList.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>