sulibao-mini/components/agent-ui/collapse/index.vue

<template>
    <!-- components/agent-ui/collapsibleCard/index.wxml -->
    <view class="collapse" :style="collapsedStatus && showBgColor ? 'background-color: #f5f5f5;' : ''">
        <view class="collapse-header" @tap="changeCollapsedStatus">
            <slot name="title"></slot>
            <image
                src="/static/components/agent-ui/imgs/arrow.svg"
                mode="aspectFill"
                :style="'width: 16px;height: 16px;transform: rotate(' + (collapsedStatus ? 0 : 180) + 'deg);'"
            />
        </view>
        <block v-if="collapsedStatus">
            <slot name="content"></slot>
        </block>
    </view>
</template>

<script>
// components/agent-ui/collapsibleCard/index.js
export default {
    data() {
        return {
            collapsedStatus: false
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        initStatus: {
            type: Boolean,
            default: false
        },
        showBgColor: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    /**
     * 组件的方法列表
     */
    methods: {
        attached() {
            this.setData({
                collapsedStatus: this.initStatus
            });
        },

        changeCollapsedStatus: function () {
            this.setData({
                collapsedStatus: !this.collapsedStatus
            });
        }
    },
    options: {
        multipleSlots: true
    },
    created: function () {}
};
</script>
<style>
/* components/agent-ui/collapsibleCard/index.wxss */
.collapse {
    border-radius: 8px;
    margin-bottom: 12px;
}
.collapse-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #f5f5f5;
    justify-content: space-between;
    padding: 18rpx 26rpx;
    border-radius: 8px;
}
</style>