manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/components/common/foldingPanel.vue

<template>
  <div class="w-full fold">
    <div class="foldingTheHead" @click="handleBox" :style="`background-color: ${bgColor}`">
      <div class="flex items-center">
        <van-icon name="play" class="text-size-in expandAndCollapseIcon" color="#FF8B32" :style="selStatus ? 'transform: rotate(90deg);' : 'transform: rotate(0deg);'" />
        <div class="text-[#FF8B32] pl-1">{{ title }}</div>
      </div>
      <slot name="foldingRight"></slot>
    </div>
    <div class="container">
      <div :class="selClassName">
        <slot name="foldContainer"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useLifecycle } from "@hooks/useCommon.js";

const props = defineProps({
  bgColor: {
    type: String,
    default: '#FFEFE2'
  },
  title: {
    type: String,
    default: '标题'
  }
})

useLifecycle({
  load: () => {
    // 添加加载逻辑
  }
});

const selClassName = ref(['sel-menu', 'expand'])
const selStatus = ref(true)

const handleBox = () => {
  if (selStatus.value) {
    selClassName.value.pop()
    selStatus.value = false
  } else {
    selClassName.value.push('expand')
    selStatus.value = true
  }
}
</script>

<style scoped lang="scss">
.fold {
  margin-bottom: 10px;
  .foldingTheHead {
    min-height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 16px 7px 12px;
  }

  .container {
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;

    // 折叠样式
    .sel-menu {
      width: 100%;
      overflow: hidden;
      cursor: pointer;
      transition: max-height 0.5s linear;
      position: relative;
    }

    .sel-menu {
      max-height: 0;
    }

    .expand {
      max-height: 800px;
    }
  }

  .expandAndCollapseIcon {
    transition: 0.5s ease-in-out;
  }
}
</style>