englishread-front/subPages/home/articleDetail.vue

<template>
    <view class="article-detail">
        <!-- 导航栏 -->
        <!-- #ifndef H5 -->
        <uv-navbar :placeholder="true" left-icon="arrow-left" :title="articleData.title || '文章详情'"
            @leftClick="goBack"></uv-navbar>
        <!-- #endif -->

        <!-- 文章内容 -->
        <view class="article-container" v-if="articleData.id">
            <!-- 文章标题 -->
            <view class="article-title">{{ articleData.title }}</view>

            <!-- 文章信息 -->
            <view class="article-info">
                <text class="article-time">{{ formatTime(articleData.createTime) }}</text>
                <!-- <text class="article-author">{{ articleData.createBy }}</text> -->
            </view>

            <!-- 文章内容 -->
            <view class="article-content">
                <uv-parse :content="content"/>
            </view>
        </view>

        <!-- 加载状态 -->
        <view class="loading-container" v-else-if="loading">
            <uv-loading-icon mode="circle"></uv-loading-icon>
            <text class="loading-text">加载中...</text>
        </view>

        <!-- 音频播放悬浮按钮 -->
        <view class="audio-float-button" v-if="hasAudio && articleData.id" @click="toggleAudio">
            <uv-icon :name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'" size="50"
                :color="isPlaying ? '#ff6b6b' : '#4CAF50'"></uv-icon>
        </view>

        <!-- 底部字幕展示 -->
        <!-- <view v-if="hasAudio && subtitlesJson.length > 0 && currentSubtitleText" class="subtitle-container">
            <text class="subtitle-text">{{ currentSubtitleText }}</text>
        </view> -->

    </view>
</template>

<script>
import audioManager from '@/utils/audioManager.js'
import { convertToSentences } from '@/utils/audioUtils.js'

export default {
    data() {
        return {
            articleId: '',
            articleData: {},
            loading: true,
            isPlaying: false,
            audioUrl: '',
            hasAudio: false,
            subtitlesJson: [],
            // 字幕同步相关
            currentSentenceIndex: -1,
            currentSubtitleText: '',
        }
    },
    computed: {
        content(){
            return this.articleData.content
        },
    },
    onLoad(options) {
        if (options.id) {
            this.articleId = options.id
            this.getArticleDetail()
        }
        
        // 绑定音频管理器事件监听
        this.bindAudioEvents()
    },

    onUnload() {
        // 页面卸载时清理音频资源和事件监听
        this.stopAudio()
        this.unbindAudioEvents()
    },

    methods: {
        // 绑定音频管理器事件监听
        bindAudioEvents() {
            audioManager.on('play', this.onAudioPlay)
            audioManager.on('pause', this.onAudioPause)
            audioManager.on('ended', this.onAudioEnded)
            audioManager.on('error', this.onAudioError)
            audioManager.on('timeupdate', this.onAudioTimeUpdate)
        },

        // 解绑音频管理器事件监听
        unbindAudioEvents() {
            audioManager.off('play', this.onAudioPlay)
            audioManager.off('pause', this.onAudioPause)
            audioManager.off('ended', this.onAudioEnded)
            audioManager.off('error', this.onAudioError)
            audioManager.off('timeupdate', this.onAudioTimeUpdate)
        },

        // 音频播放开始事件
        onAudioPlay(data) {
            if (data.audioType === 'article') {
                this.isPlaying = true
                console.log('文章音频开始播放')
            }
        },

        // 音频暂停事件
        onAudioPause(data) {
            if (data.audioType === 'article') {
                this.isPlaying = false
                console.log('文章音频暂停播放')
            }
        },

        // 音频播放结束事件
        onAudioEnded(data) {
            if (data.audioType === 'article') {
                this.isPlaying = false
                console.log('文章音频播放结束')
                // 清空字幕状态
                this.currentSentenceIndex = -1
                this.currentSubtitleText = ''
            }
        },

        // 音频播放错误事件
        onAudioError(data) {
            if (data.audioType === 'article') {
                this.isPlaying = false
                console.error('文章音频播放错误:', data.error)
                // 清空字幕状态
                this.currentSentenceIndex = -1
                this.currentSubtitleText = ''
                uni.showToast({
                    title: '音频播放失败',
                    icon: 'none'
                })
            }
        },

        // 音频时间更新事件（字幕同步）
        onAudioTimeUpdate({ audioType, currentTime }) {
            if (audioType !== 'article') return

            if (!this.subtitlesJson || this.subtitlesJson.length === 0) return

            // audioManager.currentTime 为秒，字幕时间为毫秒，这里统一为毫秒比较
            const curMs = Math.floor(currentTime * 1000)
            const sentences = this.subtitlesJson

            // 如果当前索引有效且还在范围内，直接使用当前句子
            if (this.currentSentenceIndex >= 0) {
                const cur = sentences[this.currentSentenceIndex]
                // 容忍度 80ms，避免边界抖动
                if (curMs >= cur.beginTime && curMs <= cur.endTime + 80) {
                    this.currentSubtitleText = cur.text
                    return
                }
            }

            // 否则扫描找到当前时间对应的句子
            let idx = -1
            for (let i = 0; i < sentences.length; i++) {
                const s = sentences[i]
                if (curMs >= s.beginTime && curMs <= s.endTime + 80) {
                    idx = i
                    break
                }
            }

            this.currentSentenceIndex = idx
            this.currentSubtitleText = idx >= 0 ? sentences[idx].text : ''
        },

        // 返回上一页
        goBack() {
            uni.navigateBack()
        },
        changeSubtitlesJson(articleData) {
            if (articleData.subtitlesJson) {
                try {
                    //[{"EndTime":480,"BeginTime":250,"Text":"语","BeginIndex":0,"EndIndex":1,"Phoneme":"yv3"}]
                    let json = JSON.parse(articleData.subtitlesJson)
                    
                    if (!Array.isArray(json) || json.length === 0) {
                        this.subtitlesJson = []
                        return
                    }
                    
                    // 将字级别数据转换为句子级别
                    const sentences = convertToSentences(json)
                    this.subtitlesJson = sentences
                    
                    console.log('转换后的句子数据:', sentences)
                } catch (error) {
                    console.error('解析字幕数据失败:', error)
                    this.subtitlesJson = []
                }
            } else {
                this.subtitlesJson = []
            }
        },
        chooseAudio(key = '501008') {
            let articleData = this.articleData?.audios?.[key]
            if (articleData) {
                // 获取第一个音频URL
                this.audioUrl = articleData.audioId
                // 处理字幕数据
                this.changeSubtitlesJson(articleData)
                this.hasAudio = true
            }
        },
        // 获取文章详情
        async getArticleDetail() {
            try {
                this.loading = true
                const res = await this.$api.home.getArticleDetail({ id: this.articleId })

                if (res.code === 200) {
                    this.articleData = res.result

                    // #ifdef H5
                    window.document.title = this.articleData.title || '文章详情'
                    // #endif

                    // 处理音频数据
                    this.chooseAudio()
                } else {
                    uni.showToast({
                        title: res.message || '获取文章详情失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.error('获取文章详情失败:', error)
                uni.showToast({
                    title: '网络错误，请重试',
                    icon: 'none'
                })
            } finally {
                this.loading = false
            }
        },

        // 切换音频播放状态
        toggleAudio() {
            if (!this.audioUrl) {
                console.error('音频URL为空')
                return
            }

            try {
                if (this.isPlaying) {
                    // 暂停音频
                    this.pauseAudio()
                } else {
                    // 播放音频
                    this.playAudio()
                }
            } catch (error) {
                console.error('音频播放切换异常:', error)
                this.isPlaying = false
            }
        },

        // 播放音频
        async playAudio() {
            if (!this.audioUrl) {
                console.error('音频URL为空')
                return
            }

            try {
                // 使用audioManager播放音频，指定音频类型为'article'
                await audioManager.playAudio(this.audioUrl, 'article')
                console.log('开始播放文章音频:', this.audioUrl)
            } catch (error) {
                console.error('音频播放异常:', error)
                this.isPlaying = false
                uni.showToast({
                    title: '音频播放失败',
                    icon: 'none'
                })
            }
        },

        // 暂停音频
        pauseAudio() {
            try {
                audioManager.pause()
                console.log('暂停文章音频')
            } catch (error) {
                console.error('暂停音频失败:', error)
            }
        },

        // 停止音频
        stopAudio() {
            try {
                audioManager.stopCurrentAudio()
                this.isPlaying = false
                console.log('停止文章音频')
                // 清空字幕状态
                this.currentSentenceIndex = -1
                this.currentSubtitleText = ''
            } catch (error) {
                console.error('停止音频失败:', error)
            }
        },

        // 格式化时间
        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>
.subtitle-container{
    position: fixed;
    bottom: 220rpx;
    left: 5%;
    width: 90%;
    text-align: center;
    background-color: bisque;
    border-radius: 10rpx;
}

.article-detail {
    min-height: 100vh;
    background: #fff;
}

.article-container {
    padding: 30rpx;
}

.article-title {
    font-size: 40rpx;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    margin-bottom: 30rpx;
}

.article-info {
    display: flex;
    align-items: center;
    gap: 30rpx;
    margin-bottom: 40rpx;
    padding-bottom: 30rpx;
    border-bottom: 1px solid #f0f0f0;

    .article-time {
        font-size: 26rpx;
        color: #999;
    }

    .article-author {
        font-size: 26rpx;
        color: #666;

        &::before {
            content: '作者：';
        }
    }
}

.article-content {
    font-size: 32rpx;
    line-height: 1.8;
    color: #333;

    // 富文本内容样式
    :deep(.rich-text) {
        p {
            margin-bottom: 20rpx;
            line-height: 1.8;
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: 8rpx;
            margin: 20rpx 0;
        }

        section {
            margin: 20rpx 0;
        }
    }
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400rpx;

    .loading-text {
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #999;
    }
}

// 音频播放悬浮按钮
.audio-float-button {
    position: fixed;
    right: 30rpx;
    bottom: 100rpx;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: all 0.3s ease;

    &:active {
        transform: scale(0.95);
    }

    // 添加呼吸动画效果
    &::before {
        content: '';
        position: absolute;
        top: -10rpx;
        left: -10rpx;
        right: -10rpx;
        bottom: -10rpx;
        border-radius: 50%;
        background: rgba(76, 175, 80, 0.2);
        animation: pulse 2s infinite;
        z-index: -1;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}
</style>