englishread-front/components/BookList.vue

<template>
    <view class="book-list">
        <view v-for="(book, index) in list" :key="index" class="book-item" @click="goToDetail(book)">
            <view class="book-cover">
                <image :src="book.booksImg" mode="aspectFill"></image>
            </view>
            <view class="book-info">
                <view class="book-title">{{ book.booksName }}</view>
                <view class="book-author">{{ book.booksAuthor }}</view>
                <view class="book-meta">
                    <view class="book-duration">
                        <image src="/static/play-icon.png" mode="aspectFill" class="book-icon"></image>
                        <text>{{ book.duration }}</text>
                    </view>
                    <view class="book-membership" :class="classMap[book.vipInfo.title]">
                        {{ book.vipInfo.title }}
                    </view>
                </view>
            </view>
        </view>
        <uv-loading-icon text="加载中" textSize="30rpx" v-if="isLoading"></uv-loading-icon>
        <uv-empty v-else-if="list.length === 0"></uv-empty>
    </view>
</template>

<script>
export default {
    name: 'BookList',
    props: {
        list: {
            type: Array,
            default: () => []
        },
        isLoading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // 类型映射表
            classMap: {
                '蕾朵会员': 'book-membership-premium',
                '盛放会员': 'book-membership-vip',
                '萌芽会员': 'book-membership-basic',
            }
        }
    },
    methods: {
        goToDetail(book) {
            uni.navigateTo({
                url: '/subPages/home/directory?id=' + book.id
            })
        }
    }
}
</script>

<style scoped lang="scss">
.book-list {
    display: flex;
    flex-direction: column;
    gap: 32rpx;
}

.book-item {
    display: flex;
    align-items: center;
    background: #F8F8F8;
    height: 212rpx;
    gap: 16rpx;
    border-radius: 16rpx;
    padding: 0rpx 16rpx;

    &:last-child {
        border-bottom: none;
    }

    .book-cover {
        width: 136rpx;
        height: 180rpx;
        border-radius: 16rpx;
        overflow: hidden;
        margin-right: 16rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .book-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .book-title {
        font-size: 32rpx;
        font-weight: 600;
        color: $primary-text-color;
        line-height: 48rpx;
        letter-spacing: 0;
        margin-bottom: 12rpx;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .book-author {
        font-size: 24rpx;
        color: $secondary-text-color;
        margin-bottom: 16rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .book-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .book-duration {
        display: flex;
        align-items: center;
        font-size: 22rpx;
        color: #999;

        .book-icon {
            width: 18rpx;
            height: 18rpx;
        }

        text {
            margin-left: 8rpx;
        }
    }

    .book-membership {
        padding: 8rpx 16rpx;
        border-radius: 8rpx;
        font-size: 24rpx;
        color: #211508;
        flex-shrink: 0;
    }
}

.book-membership-premium {
    background: #E9F1FF;
    border: 2rpx solid #C4DAFF
}

.book-membership-vip {
    background: #FFF4E9;
    border: 2rpx solid #FFE2C4
}

.book-membership-basic {
    background: #FFE9E9;
    border: 2rpx solid #FFDBC4
}
</style>