englishread-front/components/articleList.vue

<template>
    <view class="article-section" v-if="articleList.length > 0">
        <view class="section-header">
            <text class="section-title">精选文章</text>
        </view>
        <view class="article-list">
            <view v-for="(article, index) in articleList" :key="article.id" class="article-item"
                @click="goArticleDetail(article)">
                <view class="article-content">
                    <view class="article-title">{{ article.title }}</view>
                    <view class="article-meta">
                        <!-- <view class="article-tag">精选</view> -->
                        <text class="article-time">{{ formatTime(article.createTime) }}</text>
                    </view>
                </view>
                <view class="article-arrow">
                    <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        articleList: {
            type: Array,
            default: () => []
        },
    },
    methods: {
        goArticleDetail(article) {
            uni.navigateTo({
                url: '/subPages/home/articleDetail?id=' + article.id
            })
        },
        formatTime(timeStr) {
            if (!timeStr) return ''

            // 处理iOS兼容性问题，将 "2025-10-23 16:36:43" 格式转换为 "2025/10/23 16:36:43"
            let formattedTimeStr = timeStr.replace(/-/g, '/')

            const date = new Date(formattedTimeStr)

            // 检查日期是否有效
            if (isNaN(date.getTime())) {
                console.warn('Invalid date format:', timeStr)
                return timeStr // 返回原始字符串
            }

            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            return `${year}-${month}-${day}`
        },
    }
}
</script>

<style lang="scss" scoped>
// 文章列表样式
.article-section {
    margin-top: 40rpx;
    padding: 0 30rpx;

    .article-scroll {
        white-space: nowrap;
    }

    .article-list {
        display: flex;
        flex-direction: column;
        padding: 0 20rpx;
        gap: 24rpx;

        .article-item {
            flex-shrink: 0;
            // width: 580rpx;
            height: 120rpx;
            background: #f8f9fa;
            border-radius: 16rpx;
            padding: 24rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.98);
                background: #f0f1f2;
            }

            .article-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 12rpx;

                .article-title {
                    font-size: 32rpx;
                    font-weight: 600;
                    color: $primary-text-color;
                    line-height: 1.4;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    word-break: break-word;
                }

                .article-meta {
                    display: flex;
                    align-items: center;
                    gap: 16rpx;

                    .article-tag {
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        color: #fff;
                        font-size: 20rpx;
                        padding: 4rpx 12rpx;
                        border-radius: 12rpx;
                        font-weight: 500;
                    }

                    .article-time {
                        font-size: 24rpx;
                        color: $secondary-text-color;
                    }
                }
            }

            .article-arrow {
                margin-left: 16rpx;
                opacity: 0.6;
            }
        }
    }
}

// 书本列表样式（从搜索页面复制）
.book-list-container {
    background: #fff;
    min-height: 50vh;
}

.book-list-results {
    padding: 32rpx;
    display: flex;
    flex-direction: column;
    gap: 32rpx;
}

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

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

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

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

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

    .book-list-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-list-author {
        font-size: 24rpx;
        color: $secondary-text-color;
        margin-bottom: 16rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

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

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

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

        text {
            margin-left: 8rpx;
        }
    }

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

.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>