book-hi/pages-mine/components/book-list.vue

<template>
    <view class="book-list">
        <view class="header-info flex-a flex-j-b mb-20">
            <text class="common-title">共20本</text>
            <view class="common-text" @click="showRules">
                <text class="mr-10">卖书审核规则</text>
                <u-icon name="question-circle-fill" size="36" top="4rpx" color="#333"></u-icon>
            </view>
        </view>

        <detail-book-item :book="item" v-for="(item, index) in books" :key="index"
            v-if="isExpanded || (index < 3 && !isExpanded)"></detail-book-item>


        <!-- 添加底部展开/收起按钮 -->
        <view class="expand-btn" @click="toggleExpand">
            <text>{{ isExpanded ? '收起' : '查看全部' }}</text>
            <u-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" size="24" color="#666"></u-icon>
        </view>
    </view>
</template>

<script>
import detailBookItem from './detail-book-item.vue';
export default {
    components: {
        detailBookItem
    },
    name: 'book-list',
    data() {
        return {
            isExpanded: false
        }
    },
    props: {
        books: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        showRules() {
            console.log('showRules');
        },
        toggleExpand() {
            this.isExpanded = !this.isExpanded;
        }
    }
}
</script>

<style lang="scss" scoped>
.book-list {
    background: #FFFFFF;
    padding: 20rpx 30rpx;
    margin: 30rpx;
    border-radius: 10rpx;
    box-sizing: border-box;

    .expand-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        font-size: 28rpx;
        color: #333;

        height: 88rpx;
        background: #F8F8F8;
        border-radius: 10rpx;

        .u-icon {
            margin-left: 8rpx;
        }
    }

}
</style>