Mini_Program/pages/audio-novel/audio-novel.vue

<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="header">
            <view class="back-btn" @click="goBack">
                <text class="back-icon">←</text>
            </view>
            <text class="header-title">有声小说</text>
            <view class="search-btn" @click="goToSearch">
                <text class="search-icon">🔍</text>
            </view>
        </view>
        
        <!-- 小说列表 -->
        <scroll-view class="audio-list-container" scroll-y>
            <view class="loading" v-if="isLoading">
                <text>加载中...</text>
            </view>
            
            <view class="empty" v-else-if="audioList.length === 0">
                <text>暂无有声小说</text>
            </view>
            
            <view 
                class="audio-item" 
                v-for="(audio, index) in audioList" 
                :key="audio.id || index"
                @click="goToAudioDetail(audio)"
            >
                <view class="cover-wrapper">
                    <image 
                        class="audio-cover" 
                        :src="audio.cover" 
                        mode="aspectFill"
                        :lazy-load="true"
                        @error="handleImageError(index)"
                    ></image>
                    <view class="play-icon-overlay">
                        <text class="play-icon">▶</text>
                    </view>
                </view>
                <view class="audio-info">
                    <text class="audio-title">{{ audio.title }}</text>
                    <text class="audio-desc">{{ audio.desc }}</text>
                    <text class="audio-author">{{ audio.author }}</text>
                </view>
                <button class="play-btn" @click.stop="handlePlay(audio)">
                    <text class="play-btn-text">播放</text>
                </button>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    import { getRecommendAudiobooks } from '../../utils/api.js'
    
    export default {
        data() {
            return {
                audioList: [],
                isLoading: false
            }
        },
        onLoad() {
            this.loadAudioList()
        },
        methods: {
            async loadAudioList() {
                this.isLoading = true
                try {
                    const res = await getRecommendAudiobooks(50)
                    if (res && res.code === 200 && Array.isArray(res.data)) {
                        this.audioList = res.data.map(item => ({
                            id: item.id,
                            title: item.title,
                            author: item.author || '',
                            desc: item.brief || item.desc || '',
                            cover: item.image || item.cover || 'https://picsum.photos/seed/audio-novel/200/300'
                        }))
                    } else {
                        this.audioList = []
                    }
                } catch (error) {
                    console.error('加载有声小说失败:', error)
                    this.audioList = []
                    uni.showToast({
                        title: '加载失败',
                        icon: 'none'
                    })
                } finally {
                    this.isLoading = false
                }
            },
            goBack() {
                uni.navigateBack({
                    delta: 1
                })
            },
            goToSearch() {
                uni.navigateTo({
                    url: '/pages/search/search'
                })
            },
            goToAudioDetail(audio) {
                if (!audio || !audio.id) {
                    uni.showToast({
                        title: '听书信息不完整',
                        icon: 'none'
                    })
                    return
                }
                uni.navigateTo({
                    url: `/pages/listen-detail/listen-detail?audiobookId=${audio.id}`
                })
            },
            handlePlay(audio) {
                if (!audio || !audio.id) {
                    uni.showToast({
                        title: '听书信息不完整',
                        icon: 'none'
                    })
                    return
                }
                this.goToAudioDetail(audio)
            },
            handleImageError(index) {
                if (this.audioList[index]) {
                    this.audioList[index].cover = `https://picsum.photos/seed/audio-novel-fallback${index}/200/300`
                }
            }
        }
    }
</script>

<style scoped>
    .container {
        width: 100%;
        height: 100vh;
        background-color: #FFFFFF;
        display: flex;
        flex-direction: column;
        padding-top: 30px;
        box-sizing: border-box;
    }
    
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 30rpx;
        background-color: #FFFFFF;
        border-bottom: 1rpx solid #F0F0F0;
    }
    
    .back-btn, .search-btn {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .back-icon {
        font-size: 40rpx;
        color: #333333;
        font-weight: bold;
    }
    
    .header-title {
        font-size: 34rpx;
        font-weight: bold;
        color: #333333;
    }
    
    .search-icon {
        font-size: 36rpx;
        color: #333333;
    }
    
    .audio-list-container {
        flex: 1;
        width: 100%;
    }
    
    .loading, .empty {
        text-align: center;
        padding: 60rpx 0;
        color: #999999;
        font-size: 30rpx;
    }
    
    .audio-item {
        display: flex;
        align-items: center;
        padding: 30rpx 30rpx;
        border-bottom: 1rpx solid #F0F0F0;
    }
    
    .cover-wrapper {
        position: relative;
        width: 160rpx;
        height: 220rpx;
        margin-right: 30rpx;
        flex-shrink: 0;
    }
    
    .audio-cover {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
        object-fit: cover;
        box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.12);
        background-color: #F5F5F5;
    }
    
    .play-icon-overlay {
        position: absolute;
        bottom: 10rpx;
        right: 10rpx;
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        background: rgba(0,0,0,0.6);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .play-icon {
        color: #FFFFFF;
        font-size: 26rpx;
        margin-left: 4rpx;
    }
    
    .audio-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10rpx;
    }
    
    .audio-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
    }
    
    .audio-desc {
        font-size: 26rpx;
        color: #666666;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    
    .audio-author {
        font-size: 24rpx;
        color: #999999;
    }
    
    .play-btn {
        background-color: #4CAF50;
        color: #FFFFFF;
        border: none;
        border-radius: 32rpx;
        padding: 12rpx 26rpx;
        font-size: 26rpx;
    }
    
    .play-btn::after {
        border: none;
    }
    
    .play-btn-text {
        color: #FFFFFF;
    }
</style>