You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2165 lines
64 KiB
2165 lines
64 KiB
<template>
|
|
<view class="book-container">
|
|
<!-- 自定义顶部导航栏 -->
|
|
<uv-status-bar></uv-status-bar>
|
|
<view class="custom-navbar" :class="{ 'navbar-hidden': !showNavbar }">
|
|
<uv-status-bar></uv-status-bar>
|
|
<view class="navbar-content">
|
|
<view class="navbar-left" @click="goBack">
|
|
<uv-icon name="arrow-left" size="20" color="#262626"></uv-icon>
|
|
</view>
|
|
<view class="navbar-title">{{ currentPageTitle }}</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Swiper内容区域 -->
|
|
<swiper
|
|
class="content-swiper"
|
|
:current="currentPage - 1"
|
|
@change="onSwiperChange"
|
|
>
|
|
<swiper-item
|
|
v-for="(page, index) in bookPages"
|
|
:key="index"
|
|
class="swiper-item"
|
|
>
|
|
<view class="content-area" @click="toggleNavbar">
|
|
|
|
<!-- 会员限制页面 -->
|
|
<view v-if="!isMember && pagePay[index] === 'Y'" class="member-content">
|
|
<text class="member-title">{{ pageTitles[index] }}</text>
|
|
<view class="member-button" @click="unlockBook">
|
|
<text class="member-button-text">升級會員解鎖</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 图片卡片页面 -->
|
|
<view class="card-content" v-else-if="pageTypes[index] === '1'">
|
|
<view class="card-line">
|
|
<image :src="configParamContent('highlight_icon')" class="card-line-image" mode="aspectFill" />
|
|
<text class="card-line-text">划线重点</text>
|
|
</view>
|
|
<view v-for="(item, itemIndex) in page" :key="itemIndex">
|
|
<image class="card-image" v-if="item && item.type === 'image'" :src="item.imageUrl" mode="aspectFill"></image>
|
|
<view class="english-text-container clickable-text" v-else-if="item && item.type === 'text' && item.language === 'en' && item.content" @click.stop="handleTextClick(item.content, item, index)">
|
|
<text
|
|
v-for="(token, tokenIndex) in splitEnglishSentence(item.content)"
|
|
:key="tokenIndex"
|
|
|
|
:class="['english-token', { 'clickable-word': token.isWord && findWordDefinition(token.text) }]"
|
|
@tap="token.isWord && findWordDefinition(token.text) ? handleWordClick(token.text) : null"
|
|
user-select
|
|
>{{ token.text }}</text>
|
|
</view>
|
|
<view v-else-if="item && item.type === 'text' && item.language === 'zh' && item.content" @click.stop="handleTextClick(item.content, item, index)">
|
|
<text class="chinese-text clickable-text" user-select>{{ item.content }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else>
|
|
<view v-for="(item, itemIndex) in page" :key="itemIndex">
|
|
<!-- 文本页面 -->
|
|
<view v-if="item && item.type === 'text' && item.content" class="text-content" >
|
|
<view :class="{ 'text-highlight': isTextHighlighted(page, itemIndex) }" @click.stop="handleTextClick(item.content, item, index)">
|
|
<text
|
|
class="content-text clickable-text"
|
|
user-select
|
|
>
|
|
{{ item.content }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 文本页面 -->
|
|
<view v-else-if="item.type === 'image'" class="image-container">
|
|
<image class="content-image" :src="item.imageUrl" mode="aspectFill"></image>
|
|
</view>
|
|
|
|
<!-- 视频页面 -->
|
|
<view v-else-if="item.type === 'video'" class="video-content">
|
|
<video :src="item.video" class="video-player" controls :poster="item.poster"></video>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
|
|
<!-- 自定义底部控制栏 -->
|
|
<view class="custom-tabbar" :class="{ 'tabbar-hidden': !showNavbar }">
|
|
<!-- 音频控制栏组件 -->
|
|
<AudioControls
|
|
:current-page="currentPage"
|
|
:course-id="courseId"
|
|
:voice-id="voiceId"
|
|
:book-pages="bookPages"
|
|
:is-text-page="isTextPage"
|
|
@previous-page="previousPage"
|
|
@next-page="nextPage"
|
|
@audio-state-change="onAudioStateChange"
|
|
@highlight-change="onHighlightChange"
|
|
ref="audioControls"
|
|
/>
|
|
|
|
|
|
<view style="background-color: #fff;position: relative;z-index: 100" >
|
|
<view class="tabbar-content">
|
|
<view class="tabbar-left">
|
|
<view class="tab-button" @click="toggleCoursePopup">
|
|
<image src="/static/课程图标.png" class="tab-icon" />
|
|
<text class="tab-text">课程</text>
|
|
</view>
|
|
<view class="tab-button" @click="toggleSound">
|
|
<image src="/static/音色切换图标.png" class="tab-icon" />
|
|
<text class="tab-text">音色切换</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tabbar-right">
|
|
<view class="page-controls">
|
|
<view class="page-numbers">
|
|
<view
|
|
v-for="(page, index) in bookPages"
|
|
:key="index"
|
|
class="page-number"
|
|
:class="{ 'active': (index + 1) === currentPage }"
|
|
@click="goToPage(index + 1)"
|
|
>
|
|
{{ index + 1 }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uv-safe-bottom></uv-safe-bottom>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 课程选择弹出窗 -->
|
|
<uv-popup
|
|
mode="bottom"
|
|
ref="coursePopup"
|
|
round="32rpx"
|
|
bg-color="#f8f8f8"
|
|
>
|
|
<view class="course-popup">
|
|
<view class="popup-header">
|
|
<view>
|
|
<uv-icon name="arrow-down" color="black" size="20"></uv-icon>
|
|
</view>
|
|
<view class="popup-title">课程</view>
|
|
<view class="popup-title" @click="toggleSort">
|
|
倒序
|
|
</view>
|
|
</view>
|
|
<view class="course-list">
|
|
<view
|
|
v-for="(course, index) in displayCourseList"
|
|
:key="course.id"
|
|
class="course-item"
|
|
:class="{ 'active': course.id === currentCourse }"
|
|
@click="selectCourse(course.id)"
|
|
>
|
|
<view class="course-number " :class="{ 'highlight': course.id === currentCourse }">{{ String(course.index).padStart(2, '0') }}</view>
|
|
<view class="course-content">
|
|
<view class="course-english" :class="{ 'highlight': course.id === currentCourse }">{{ course.english }}</view>
|
|
<view class="course-chinese" :class="{ 'highlight': course.id === currentCourse }">{{ course.chinese }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
|
|
<!-- 释义弹出窗 -->
|
|
<uv-popup
|
|
mode="bottom"
|
|
|
|
ref="meaningPopup"
|
|
round="32rpx"
|
|
bg-color="#FFFFFF"
|
|
:overlay="true"
|
|
>
|
|
<view class="meaning-popup" v-if="currentWordMeaning">
|
|
<view class="meaning-header">
|
|
<view class="close-btn" @click="closeMeaningPopup">
|
|
<text class="close-text">关闭</text>
|
|
</view>
|
|
<view class="meaning-title">释义</view>
|
|
<view style="width: 80rpx;"></view>
|
|
</view>
|
|
|
|
<view class="meaning-content">
|
|
<image class="meaning-image" src="/static/默认图片.png" mode="aspectFill"></image>
|
|
|
|
<view class="word-info">
|
|
<view class="word-main">
|
|
<text class="word-text">{{ currentWordMeaning.word }}</text>
|
|
</view>
|
|
<view class="phonetic-container">
|
|
<uv-icon
|
|
name="volume-fill"
|
|
size="16"
|
|
color="#007AFF"
|
|
class="speaker-icon"
|
|
@click="repeatWordAudio"
|
|
></uv-icon>
|
|
<text class="phonetic-text">{{ currentWordMeaning.phonetic }}</text>
|
|
</view>
|
|
<view class="word-meaning">
|
|
<text class="part-of-speech">{{ currentWordMeaning.partOfSpeech }}</text>
|
|
<text class="meaning-text">{{ currentWordMeaning.meaning }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="knowledge-gain">
|
|
<view class="knowledge-header">
|
|
<image src="/static/知识收获图标.png" class="knowledge-icon" mode="aspectFill" />
|
|
<text class="knowledge-title">知识收获</text>
|
|
</view>
|
|
<text class="knowledge-content">{{ currentWordMeaning.knowledgeGain }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import AudioControls from './AudioControls.vue'
|
|
|
|
export default {
|
|
components: {
|
|
AudioControls
|
|
},
|
|
data() {
|
|
return {
|
|
isMember: false,
|
|
memberId: '',
|
|
voiceId: null,
|
|
courseId: '',
|
|
showNavbar: true,
|
|
currentPage: 1,
|
|
currentCourse: 1, // 当前课程索引
|
|
currentWordMeaning: null, // 当前显示的单词释义
|
|
isReversed: false, // 是否倒序显示
|
|
// 文本高亮相关
|
|
currentHighlightIndex: -1, // 当前高亮的文本索引
|
|
wordAudioCache: {}, // 單詞語音緩存
|
|
currentWordAudio: null, // 當前播放的單詞音頻實例
|
|
courseIdList: [],
|
|
bookTitle: '',
|
|
courseList: [
|
|
|
|
],
|
|
|
|
// 二维数组 代表每个页面
|
|
bookPages: [
|
|
|
|
],
|
|
// 存储每个页面的标题
|
|
pageTitles: [],
|
|
// 存储每个页面的type信息
|
|
pageTypes: [],
|
|
// 存储每个页面的单词释义数据
|
|
pageWords: [],
|
|
// 存储每个页面的付费状态
|
|
pagePay: [],
|
|
}
|
|
},
|
|
computed: {
|
|
displayCourseList() {
|
|
return this.isReversed ? [...this.courseList].reverse() : this.courseList;
|
|
},
|
|
// 判断当前页面是否为文字类型
|
|
isTextPage() {
|
|
// 如果是卡片页面（type为'1'），不显示音频控制栏
|
|
if (this.currentPageType === '1') {
|
|
return false;
|
|
}
|
|
|
|
const currentPageData = this.bookPages[this.currentPage - 1];
|
|
// currentPageData是一个数组 其中的一个元素的type是text就会返回true
|
|
return currentPageData && currentPageData.some(item => item.type === 'text');
|
|
},
|
|
|
|
|
|
// 动态页面标题
|
|
currentPageTitle() {
|
|
return this.pageTitles[this.currentPage - 1] || this.bookTitle;
|
|
},
|
|
|
|
// 当前页面类型
|
|
currentPageType() {
|
|
return this.pageTypes[this.currentPage - 1] || '';
|
|
},
|
|
|
|
// 当前页面的单词释义数据
|
|
currentPageWords() {
|
|
return this.pageWords[this.currentPage - 1] || [];
|
|
}
|
|
},
|
|
methods: {
|
|
// 獲取用戶會員信息 判斷是否和傳參傳過來的會員id相同
|
|
async getMemberInfo(){
|
|
const memberRes = await this.$api.member.getUserMemberInfo()
|
|
if (memberRes.code === 200) {
|
|
this.isMember = memberRes.result.map(item => item.memberId).includes(this.memberId)
|
|
console.log('isMember:', this.isMember);
|
|
}
|
|
|
|
},
|
|
|
|
// 处理AudioControls组件的事件
|
|
onAudioStateChange(audioState) {
|
|
// 更新高亮状态
|
|
this.currentHighlightIndex = audioState.currentHighlightIndex;
|
|
},
|
|
|
|
// 处理文本点击事件
|
|
handleTextClick(textContent, item, pageIndex) {
|
|
console.log('点击文本:', textContent);
|
|
console.log('textContent类型:', typeof textContent);
|
|
console.log('textContent是否为undefined:', textContent === undefined);
|
|
console.log('完整item对象:', item);
|
|
console.log('item.content:', item ? item.content : 'item为空');
|
|
console.log('当前页面索引:', this.currentPage);
|
|
console.log('点击的页面索引:', pageIndex);
|
|
console.log('当前页面数据:', this.bookPages[this.currentPage - 1]);
|
|
console.log('页面数据长度:', this.bookPages[this.currentPage - 1] ? this.bookPages[this.currentPage - 1].length : '页面不存在');
|
|
|
|
// 检查是否点击的是当前页面
|
|
if (pageIndex !== undefined && pageIndex !== this.currentPage - 1) {
|
|
console.log('点击的不是当前页面，忽略点击事件');
|
|
return;
|
|
}
|
|
|
|
// 验证参数有效性
|
|
if (!item) {
|
|
console.error('handleTextClick: item参数为空');
|
|
uni.showToast({
|
|
title: '数据错误，请刷新页面',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 如果textContent为undefined，尝试从item中获取
|
|
if (!textContent && item && item.content) {
|
|
textContent = item.content;
|
|
console.log('从item中获取到content:', textContent);
|
|
}
|
|
|
|
// 最终验证textContent
|
|
if (!textContent || typeof textContent !== 'string' || textContent.trim() === '') {
|
|
console.error('handleTextClick: 无效的文本内容', textContent);
|
|
uni.showToast({
|
|
title: '文本内容无效',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 检查是否有音频控制组件的引用
|
|
if (!this.$refs.audioControls) {
|
|
console.log('音频控制组件未找到');
|
|
uni.showToast({
|
|
title: '音频控制组件未准备好',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 检查当前页面是否为文本页面
|
|
if (!this.isTextPage) {
|
|
console.log('当前页面不是文本页面');
|
|
uni.showToast({
|
|
title: '当前页面不支持音频播放',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 调用AudioControls组件的播放指定音频方法
|
|
const success = this.$refs.audioControls.playSpecificAudio(textContent);
|
|
|
|
if (success) {
|
|
console.log('成功播放指定音频段落');
|
|
} else {
|
|
console.log('播放指定音频段落失败');
|
|
}
|
|
},
|
|
|
|
onHighlightChange(highlightData) {
|
|
// 兼容旧格式（直接传递索引）和新格式（传递对象）
|
|
if (typeof highlightData === 'number') {
|
|
// 旧格式：直接是索引
|
|
this.currentHighlightIndex = highlightData;
|
|
} else if (typeof highlightData === 'object' && highlightData !== null) {
|
|
// 新格式：包含详细信息的对象
|
|
this.currentHighlightIndex = highlightData.highlightIndex;
|
|
|
|
// 可以在这里处理分段音频的额外信息
|
|
if (highlightData.isSegmented) {
|
|
console.log('分段音频高亮:', {
|
|
highlightIndex: highlightData.highlightIndex,
|
|
segmentIndex: highlightData.segmentIndex,
|
|
startIndex: highlightData.startIndex,
|
|
endIndex: highlightData.endIndex,
|
|
currentText: highlightData.currentText
|
|
});
|
|
}
|
|
} else {
|
|
// 清除高亮
|
|
this.currentHighlightIndex = -1;
|
|
}
|
|
},
|
|
|
|
|
|
// 获取音色列表 拿第一个做默认的音色id
|
|
async getVoiceList() {
|
|
const voiceRes = await this.$api.music.list()
|
|
if(voiceRes.code === 200){
|
|
this.voiceId = voiceRes.result[0].voiceType
|
|
console.log('获取默认音色ID:', this.voiceId);
|
|
}
|
|
},
|
|
toggleNavbar() {
|
|
this.showNavbar = !this.showNavbar
|
|
},
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
toggleCoursePopup() {
|
|
if (this.$refs.coursePopup) {
|
|
this.$refs.coursePopup.open()
|
|
}
|
|
// console.log('123123123');
|
|
|
|
},
|
|
toggleSort() {
|
|
this.isReversed = !this.isReversed
|
|
},
|
|
selectCourse(courseId) {
|
|
this.currentCourse = courseId
|
|
if (this.$refs.coursePopup) {
|
|
this.$refs.coursePopup.close()
|
|
}
|
|
// 这里可以添加切换课程的逻辑
|
|
// console.log('选择课程:', courseId)
|
|
this.getCourseList(courseId)
|
|
},
|
|
showWordMeaning() {
|
|
if (this.$refs.meaningPopup) {
|
|
this.$refs.meaningPopup.open()
|
|
}
|
|
},
|
|
closeMeaningPopup() {
|
|
if (this.$refs.meaningPopup) {
|
|
this.$refs.meaningPopup.close()
|
|
}
|
|
this.currentWordMeaning = null
|
|
},
|
|
|
|
// 将英文句子分割成单词数组
|
|
splitEnglishSentence(sentence) {
|
|
// 使用正则表达式分割句子，保留标点符号
|
|
const tokens = sentence.match(/\b\w+\b|[^\w\s]/g) || [];
|
|
return tokens.map((token, index) => ({
|
|
text: token,
|
|
index: index,
|
|
isWord: /\b\w+\b/.test(token), // 判断是否为单词
|
|
hasDefinition: false // 是否有释义，稍后会设置
|
|
}));
|
|
},
|
|
|
|
// 查找单词释义
|
|
findWordDefinition(word) {
|
|
const currentPageWords = this.pageWords[this.currentPage - 1] || [];
|
|
// 不区分大小写匹配
|
|
return currentPageWords.find(wordData =>
|
|
wordData.word.toLowerCase() === word.toLowerCase()
|
|
);
|
|
},
|
|
|
|
async playWordAudio(word) {
|
|
try {
|
|
console.log('開始播放單詞語音:', word);
|
|
|
|
// 停止當前播放的單詞語音
|
|
if (this.currentWordAudio) {
|
|
this.currentWordAudio.destroy();
|
|
this.currentWordAudio = null;
|
|
}
|
|
|
|
// 調用語音轉換API
|
|
const audioRes = await this.$api.music.textToVoice({
|
|
text: word,
|
|
voiceType: this.voiceId
|
|
});
|
|
|
|
console.log('單詞語音API響應:', audioRes);
|
|
|
|
// 檢查響應並播放音頻
|
|
if (audioRes && audioRes.result && audioRes.result.url) {
|
|
// 新格式：使用返回的url字段
|
|
const audioUrl = audioRes.result.url;
|
|
|
|
// 創建並播放音頻
|
|
const audio = uni.createInnerAudioContext();
|
|
audio.src = audioUrl;
|
|
|
|
audio.onPlay(() => {
|
|
console.log('開始播放單詞語音:', word);
|
|
});
|
|
|
|
audio.onEnded(() => {
|
|
console.log('單詞語音播放完成:', word);
|
|
audio.destroy();
|
|
if (this.currentWordAudio === audio) {
|
|
this.currentWordAudio = null;
|
|
}
|
|
});
|
|
|
|
audio.onError((error) => {
|
|
console.error('單詞語音播放失敗:', error);
|
|
audio.destroy();
|
|
if (this.currentWordAudio === audio) {
|
|
this.currentWordAudio = null;
|
|
}
|
|
uni.showToast({
|
|
title: '語音播放失敗',
|
|
icon: 'none'
|
|
});
|
|
});
|
|
|
|
// 保存當前音頻實例並播放
|
|
this.currentWordAudio = audio;
|
|
audio.play();
|
|
} else {
|
|
console.error('單詞語音請求失敗:', audioRes);
|
|
uni.showToast({
|
|
title: '語音播放失敗',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('播放單詞語音異常:', error);
|
|
uni.showToast({
|
|
title: '語音播放失敗',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
|
|
|
|
|
|
// 重複播放單詞語音（用於釋義彈窗中的揚聲器圖標）
|
|
repeatWordAudio() {
|
|
if (this.currentWordMeaning && this.currentWordMeaning.word) {
|
|
console.log('重複播放單詞語音:', this.currentWordMeaning.word);
|
|
this.playWordAudio(this.currentWordMeaning.word);
|
|
} else {
|
|
console.warn('沒有當前單詞可以播放');
|
|
}
|
|
},
|
|
|
|
// 处理单词点击事件
|
|
handleWordClick(word) {
|
|
const definition = this.findWordDefinition(word);
|
|
console.log('查找单词:', word, '释义:', definition);
|
|
|
|
// 獲取單詞的讀音
|
|
if (word) {
|
|
this.playWordAudio(word);
|
|
}
|
|
|
|
if (definition) {
|
|
this.currentWordMeaning = {
|
|
word: definition.word,
|
|
phonetic: definition.soundmark || '',
|
|
partOfSpeech: '', // 可以根据需要添加词性
|
|
meaning: definition.paraphrase || '',
|
|
knowledgeGain: definition.knowledge || ''
|
|
};
|
|
this.showWordMeaning();
|
|
} else {
|
|
console.log('未找到单词释义:', word);
|
|
}
|
|
},
|
|
|
|
// 计算音频总时长
|
|
async calculateTotalDuration() {
|
|
let totalDuration = 0;
|
|
for (let i = 0; i < this.currentPageAudios.length; i++) {
|
|
const audio = this.currentPageAudios[i];
|
|
|
|
// 優先使用API返回的時長信息
|
|
if (audio.duration && audio.duration > 0) {
|
|
console.log(`使用API返回的時長 ${i + 1}:`, audio.duration, '秒');
|
|
totalDuration += audio.duration;
|
|
continue;
|
|
}
|
|
|
|
// 如果沒有API時長信息，嘗試獲取音頻時長
|
|
try {
|
|
const duration = await this.getAudioDuration(audio.url);
|
|
audio.duration = duration;
|
|
totalDuration += duration;
|
|
console.log(`獲取到音頻時長 ${i + 1}:`, duration, '秒');
|
|
} catch (error) {
|
|
console.error('获取音频时长失败:', error);
|
|
// 如果无法获取时长，根據文字長度估算（更精確的估算）
|
|
const textLength = audio.text.length;
|
|
// 假設每分鐘可以讀150-200個字符，這裡用180作為平均值
|
|
const estimatedDuration = Math.max(2, textLength / 3); // 每3個字符約1秒
|
|
audio.duration = estimatedDuration;
|
|
totalDuration += estimatedDuration;
|
|
console.log(`估算音頻時長 ${i + 1}:`, estimatedDuration, '秒 (文字長度:', textLength, ')');
|
|
}
|
|
}
|
|
this.totalTime = totalDuration;
|
|
console.log('音频总时长:', totalDuration, '秒');
|
|
},
|
|
|
|
// 获取音频时长
|
|
getAudioDuration(audioUrl) {
|
|
return new Promise((resolve, reject) => {
|
|
const audio = uni.createInnerAudioContext();
|
|
audio.src = audioUrl;
|
|
|
|
let resolved = false;
|
|
|
|
// 监听音频加载完成事件
|
|
audio.onCanplay(() => {
|
|
console.log('音频可以播放，duration:', audio.duration);
|
|
if (!resolved && audio.duration && audio.duration > 0) {
|
|
resolved = true;
|
|
resolve(audio.duration);
|
|
audio.destroy();
|
|
}
|
|
});
|
|
|
|
// 监听音频元数据加载完成事件
|
|
audio.onLoadedmetadata = () => {
|
|
console.log('音频元数据加载完成，duration:', audio.duration);
|
|
if (!resolved && audio.duration && audio.duration > 0) {
|
|
resolved = true;
|
|
resolve(audio.duration);
|
|
audio.destroy();
|
|
}
|
|
};
|
|
|
|
// 监听音频时长更新事件
|
|
audio.onDurationChange = () => {
|
|
console.log('音频时长更新，duration:', audio.duration);
|
|
if (!resolved && audio.duration && audio.duration > 0) {
|
|
resolved = true;
|
|
resolve(audio.duration);
|
|
audio.destroy();
|
|
}
|
|
};
|
|
|
|
// 如果以上方法都無法獲取時長，嘗試播放一小段來獲取時長
|
|
audio.onPlay(() => {
|
|
console.log('音频开始播放，duration:', audio.duration);
|
|
if (!resolved) {
|
|
setTimeout(() => {
|
|
if (!resolved && audio.duration && audio.duration > 0) {
|
|
resolved = true;
|
|
resolve(audio.duration);
|
|
audio.destroy();
|
|
}
|
|
}, 100); // 播放100ms後檢查時長
|
|
}
|
|
});
|
|
|
|
audio.onError((error) => {
|
|
console.error('音频加载失败:', error);
|
|
if (!resolved) {
|
|
resolved = true;
|
|
reject(error);
|
|
audio.destroy();
|
|
}
|
|
});
|
|
|
|
// 設置較長的超時時間，並在超時前嘗試播放
|
|
setTimeout(() => {
|
|
if (!resolved) {
|
|
console.log('嘗試播放音頻以獲取時長');
|
|
audio.play();
|
|
}
|
|
}, 1000);
|
|
|
|
// 最終超時處理
|
|
setTimeout(() => {
|
|
if (!resolved) {
|
|
console.warn('獲取音頻時長超時，使用默認值');
|
|
resolved = true;
|
|
reject(new Error('获取音频时长超时'));
|
|
audio.destroy();
|
|
}
|
|
}, 5000);
|
|
});
|
|
},
|
|
|
|
// 音频控制方法
|
|
togglePlay() {
|
|
if (this.currentPageAudios.length === 0) {
|
|
uni.showToast({
|
|
title: '当前页面没有音频内容',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.isPlaying) {
|
|
this.pauseAudio();
|
|
} else {
|
|
this.playAudio();
|
|
}
|
|
},
|
|
|
|
// 播放音频
|
|
playAudio() {
|
|
if (this.currentPageAudios.length === 0) return;
|
|
|
|
// 如果没有当前音频实例或者需要切换音频
|
|
if (!this.currentAudio || this.currentAudio.src !== this.currentPageAudios[this.currentAudioIndex].url) {
|
|
this.createAudioInstance();
|
|
}
|
|
|
|
this.currentAudio.play();
|
|
this.isPlaying = true;
|
|
// 更新高亮状态
|
|
this.updateHighlightIndex();
|
|
},
|
|
|
|
// 暂停音频
|
|
pauseAudio() {
|
|
if (this.currentAudio) {
|
|
this.currentAudio.pause();
|
|
}
|
|
this.isPlaying = false;
|
|
// 暂停时清除高亮
|
|
this.currentHighlightIndex = -1;
|
|
},
|
|
|
|
// 创建音频实例
|
|
createAudioInstance() {
|
|
// 销毁之前的音频实例
|
|
if (this.currentAudio) {
|
|
this.currentAudio.destroy();
|
|
}
|
|
|
|
// 優先使用微信原生API以支持playbackRate
|
|
let audio;
|
|
if (typeof wx !== 'undefined' && wx.createInnerAudioContext) {
|
|
console.log('使用微信原生音頻API');
|
|
audio = wx.createInnerAudioContext();
|
|
} else {
|
|
console.log('使用uni-app音頻API');
|
|
audio = uni.createInnerAudioContext();
|
|
}
|
|
audio.src = this.currentPageAudios[this.currentAudioIndex].url;
|
|
|
|
// 在音頻可以播放時檢測playbackRate支持
|
|
audio.onCanplay(() => {
|
|
console.log('🎵 音頻可以播放，開始檢測playbackRate支持');
|
|
this.checkPlaybackRateSupport(audio);
|
|
|
|
// 檢測完成後，設置用戶期望的播放速度
|
|
setTimeout(() => {
|
|
if (this.playbackRateSupported) {
|
|
console.log('設置播放速度:', this.playSpeed);
|
|
audio.playbackRate = this.playSpeed;
|
|
|
|
// 驗證設置結果
|
|
setTimeout(() => {
|
|
console.log('最終播放速度:', audio.playbackRate);
|
|
if (Math.abs(audio.playbackRate - this.playSpeed) > 0.01) {
|
|
console.log('⚠️ 播放速度設置可能未生效');
|
|
} else {
|
|
console.log('✅ 播放速度設置成功');
|
|
}
|
|
}, 50);
|
|
} else {
|
|
console.log('❌ 當前環境不支持播放速度控制');
|
|
}
|
|
}, 50);
|
|
});
|
|
|
|
// 音频事件监听
|
|
audio.onPlay(() => {
|
|
console.log('音频开始播放');
|
|
this.isPlaying = true;
|
|
});
|
|
|
|
audio.onPause(() => {
|
|
console.log('音频暂停');
|
|
this.isPlaying = false;
|
|
});
|
|
|
|
audio.onTimeUpdate(() => {
|
|
this.updateCurrentTime();
|
|
});
|
|
|
|
audio.onEnded(() => {
|
|
console.log('当前音频播放结束');
|
|
this.onAudioEnded();
|
|
});
|
|
|
|
audio.onError((error) => {
|
|
console.error('音频播放错误:', error);
|
|
this.isPlaying = false;
|
|
uni.showToast({
|
|
title: '音频播放失败',
|
|
icon: 'none'
|
|
});
|
|
});
|
|
|
|
this.currentAudio = audio;
|
|
},
|
|
|
|
// 更新当前播放时间
|
|
updateCurrentTime() {
|
|
if (!this.currentAudio) return;
|
|
|
|
let totalTime = 0;
|
|
// 计算之前音频的总时长
|
|
for (let i = 0; i < this.currentAudioIndex; i++) {
|
|
totalTime += this.currentPageAudios[i].duration;
|
|
}
|
|
// 加上当前音频的播放时间
|
|
totalTime += this.currentAudio.currentTime;
|
|
|
|
this.currentTime = totalTime;
|
|
|
|
// 如果不是正在拖動滑動條，則同步更新滑動條的值
|
|
if (!this.isDragging) {
|
|
this.sliderValue = this.currentTime;
|
|
}
|
|
|
|
// 更新当前高亮的文本索引
|
|
this.updateHighlightIndex();
|
|
},
|
|
|
|
// 更新高亮文本索引
|
|
updateHighlightIndex() {
|
|
if (!this.isPlaying || this.currentPageAudios.length === 0) {
|
|
this.currentHighlightIndex = -1;
|
|
return;
|
|
}
|
|
|
|
// 根据当前播放的音频索引设置高亮
|
|
this.currentHighlightIndex = this.currentAudioIndex;
|
|
console.log('更新高亮索引:', this.currentHighlightIndex, '当前音频索引:', this.currentAudioIndex);
|
|
},
|
|
|
|
// 判断当前文本是否应该高亮
|
|
isTextHighlighted(page, index) {
|
|
// 只有当前页面且是文本类型才可能高亮
|
|
if (page !== this.bookPages[this.currentPage - 1]) return false;
|
|
|
|
// 计算当前页面中text类型元素的索引
|
|
let textIndex = 0;
|
|
for (let i = 0; i <= index; i++) {
|
|
if (page[i].type === 'text') {
|
|
if (i === index) {
|
|
const shouldHighlight = textIndex === this.currentHighlightIndex;
|
|
if (shouldHighlight) {
|
|
console.log('高亮文本:', textIndex, '当前高亮索引:', this.currentHighlightIndex);
|
|
}
|
|
return shouldHighlight;
|
|
}
|
|
textIndex++;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
// 音频播放结束处理
|
|
onAudioEnded() {
|
|
if (this.currentAudioIndex < this.currentPageAudios.length - 1) {
|
|
// 播放下一个音频
|
|
this.currentAudioIndex++;
|
|
this.playAudio();
|
|
} else {
|
|
// 所有音频播放完毕
|
|
if (this.isLoop) {
|
|
// 循环播放
|
|
this.currentAudioIndex = 0;
|
|
this.playAudio();
|
|
} else {
|
|
// 停止播放
|
|
this.isPlaying = false;
|
|
this.currentTime = this.totalTime;
|
|
this.currentHighlightIndex = -1;
|
|
}
|
|
}
|
|
},
|
|
toggleLoop() {
|
|
this.isLoop = !this.isLoop;
|
|
},
|
|
|
|
toggleSpeed() {
|
|
// 檢查是否支持播放速度控制
|
|
if (!this.playbackRateSupported) {
|
|
uni.showToast({
|
|
title: '當前設備不支持播放速度控制',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
const currentIndex = this.speedOptions.indexOf(this.playSpeed);
|
|
const nextIndex = (currentIndex + 1) % this.speedOptions.length;
|
|
const oldSpeed = this.playSpeed;
|
|
this.playSpeed = this.speedOptions[nextIndex];
|
|
|
|
console.log(`播放速度切換: ${oldSpeed}x -> ${this.playSpeed}x`);
|
|
|
|
// 如果当前有音频在播放，更新播放速度
|
|
if (this.currentAudio) {
|
|
const wasPlaying = this.isPlaying;
|
|
const currentTime = this.currentAudio.currentTime;
|
|
|
|
// 設置新的播放速度
|
|
this.currentAudio.playbackRate = this.playSpeed;
|
|
|
|
// 如果正在播放，需要重啟播放才能使播放速度生效
|
|
if (wasPlaying) {
|
|
this.currentAudio.pause();
|
|
setTimeout(() => {
|
|
this.currentAudio.seek(currentTime);
|
|
this.currentAudio.play();
|
|
}, 50);
|
|
}
|
|
|
|
console.log('音頻實例播放速度已更新為:', this.currentAudio.playbackRate);
|
|
|
|
// 顯示速度變更提示
|
|
uni.showToast({
|
|
title: `播放速度: ${this.playSpeed}x`,
|
|
icon: 'none',
|
|
duration: 1000
|
|
});
|
|
}
|
|
},
|
|
|
|
// 滑動條值實時更新 (@input 事件)
|
|
onSliderInput(value) {
|
|
// 在拖動過程中實時更新顯示的時間，但不影響實際播放
|
|
if (this.isDragging) {
|
|
// 可以在這裡實時更新顯示時間，讓用戶看到拖動到的時間點
|
|
// 但不改變實際的 currentTime，避免影響播放邏輯
|
|
console.log('實時更新滑動條值:', value);
|
|
}
|
|
},
|
|
|
|
// 滑動條拖動過程中的處理 (@changing 事件)
|
|
onSliderChanging(value) {
|
|
// 第一次觸發 changing 事件時，暫停播放並標記為拖動狀態
|
|
if (!this.isDragging) {
|
|
if (this.isPlaying) {
|
|
this.pauseAudio();
|
|
console.log('開始拖動滑動條，暫停播放');
|
|
}
|
|
this.isDragging = true;
|
|
}
|
|
|
|
// 更新滑動條的值，但不改變實際播放位置
|
|
this.sliderValue = value;
|
|
console.log('拖動中，滑動條值:', value);
|
|
},
|
|
|
|
// 滑動條拖動結束的處理 (@change 事件)
|
|
onSliderChange(value) {
|
|
console.log('滑動條變化，跳轉到位置:', value, '是否為拖動:', this.isDragging);
|
|
|
|
// 如果不是拖動狀態（即單點），需要先暫停播放
|
|
if (!this.isDragging && this.isPlaying) {
|
|
this.pauseAudio();
|
|
console.log('單點滑動條，暫停播放');
|
|
}
|
|
|
|
// 重置拖動狀態
|
|
this.isDragging = false;
|
|
this.sliderValue = value;
|
|
|
|
// 跳轉到指定位置，但不自動恢復播放
|
|
this.seekToTime(value, false);
|
|
|
|
console.log('滑動條操作完成，保持暫停狀態，需要手動點擊播放');
|
|
},
|
|
|
|
// 跳轉到指定時間
|
|
seekToTime(targetTime, shouldResume = false) {
|
|
if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
|
|
console.log('沒有音頻數據，無法跳轉');
|
|
return;
|
|
}
|
|
|
|
// 確保目標時間在有效範圍內
|
|
targetTime = Math.max(0, Math.min(targetTime, this.totalTime));
|
|
console.log('跳轉到時間:', targetTime, '秒', '總時長:', this.totalTime, '是否恢復播放:', shouldResume);
|
|
|
|
let accumulatedTime = 0;
|
|
let targetAudioIndex = -1;
|
|
let targetAudioTime = 0;
|
|
|
|
// 找到目標時間對應的音頻片段
|
|
for (let i = 0; i < this.currentPageAudios.length; i++) {
|
|
const audioDuration = this.currentPageAudios[i].duration || 0;
|
|
console.log(`音頻片段 ${i}: 時長=${audioDuration}, 累計時間=${accumulatedTime}, 範圍=[${accumulatedTime}, ${accumulatedTime + audioDuration}]`);
|
|
|
|
if (targetTime >= accumulatedTime && targetTime <= accumulatedTime + audioDuration) {
|
|
targetAudioIndex = i;
|
|
targetAudioTime = targetTime - accumulatedTime;
|
|
break;
|
|
}
|
|
accumulatedTime += audioDuration;
|
|
}
|
|
|
|
// 如果沒有找到合適的音頻片段，使用最後一個
|
|
if (targetAudioIndex === -1 && this.currentPageAudios.length > 0) {
|
|
targetAudioIndex = this.currentPageAudios.length - 1;
|
|
targetAudioTime = this.currentPageAudios[targetAudioIndex].duration || 0;
|
|
console.log('使用最後一個音頻片段作為目標');
|
|
}
|
|
|
|
console.log('目標音頻索引:', targetAudioIndex, '目標音頻時間:', targetAudioTime);
|
|
|
|
if (targetAudioIndex === -1) {
|
|
console.error('無法找到目標音頻片段');
|
|
return;
|
|
}
|
|
|
|
// 如果需要切換到不同的音頻片段
|
|
if (targetAudioIndex !== this.currentAudioIndex) {
|
|
console.log(`切換音頻片段: ${this.currentAudioIndex} -> ${targetAudioIndex}`);
|
|
this.currentAudioIndex = targetAudioIndex;
|
|
this.createAudioInstance();
|
|
|
|
// 等待音頻實例創建完成後再跳轉
|
|
this.waitForAudioReady(() => {
|
|
if (this.currentAudio) {
|
|
this.currentAudio.seek(targetAudioTime);
|
|
this.currentTime = targetTime;
|
|
console.log('切換音頻並跳轉到:', targetAudioTime, '秒');
|
|
|
|
// 如果拖動前正在播放，則恢復播放
|
|
if (shouldResume) {
|
|
this.currentAudio.play();
|
|
this.isPlaying = true;
|
|
console.log('恢復播放狀態');
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
// 在當前音頻片段內跳轉
|
|
if (this.currentAudio) {
|
|
this.currentAudio.seek(targetAudioTime);
|
|
this.currentTime = targetTime;
|
|
console.log('在當前音頻內跳轉到:', targetAudioTime, '秒');
|
|
|
|
// 如果拖動前正在播放，則恢復播放
|
|
if (shouldResume) {
|
|
this.currentAudio.play();
|
|
this.isPlaying = true;
|
|
console.log('恢復播放狀態');
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// 等待音頻實例準備就緒
|
|
waitForAudioReady(callback, maxAttempts = 10, currentAttempt = 0) {
|
|
if (currentAttempt >= maxAttempts) {
|
|
console.error('音頻實例準備超時');
|
|
return;
|
|
}
|
|
|
|
if (this.currentAudio && this.currentAudio.src) {
|
|
// 音頻實例已準備好
|
|
setTimeout(callback, 50); // 稍微延遲確保完全準備好
|
|
} else {
|
|
// 繼續等待
|
|
setTimeout(() => {
|
|
this.waitForAudioReady(callback, maxAttempts, currentAttempt + 1);
|
|
}, 100);
|
|
}
|
|
},
|
|
|
|
// 初始檢測播放速度支持（不依賴音頻實例）
|
|
checkInitialPlaybackRateSupport() {
|
|
try {
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
console.log('初始檢測 - 系統信息:', systemInfo);
|
|
|
|
// 檢查基礎庫版本 - playbackRate需要2.11.0及以上
|
|
const SDKVersion = systemInfo.SDKVersion || '0.0.0';
|
|
const versionArray = SDKVersion.split('.').map(v => parseInt(v));
|
|
const isVersionSupported = versionArray[0] > 2 ||
|
|
(versionArray[0] === 2 && versionArray[1] > 11) ||
|
|
(versionArray[0] === 2 && versionArray[1] === 11 && versionArray[2] >= 0);
|
|
|
|
if (!isVersionSupported) {
|
|
this.playbackRateSupported = false;
|
|
console.log(`初始檢測 - 基礎庫版本過低 (${SDKVersion})，需要2.11.0及以上才支持播放速度控制`);
|
|
return;
|
|
}
|
|
|
|
// Android 6以下版本不支持
|
|
if (systemInfo.platform === 'android') {
|
|
const androidVersion = systemInfo.system.match(/Android (\d+)/);
|
|
if (androidVersion && parseInt(androidVersion[1]) < 6) {
|
|
this.playbackRateSupported = false;
|
|
console.log('初始檢測 - Android版本過低，需要Android 6及以上才支持播放速度控制');
|
|
return;
|
|
}
|
|
}
|
|
|
|
// 檢查微信原生API是否可用
|
|
if (typeof wx === 'undefined' || !wx.createInnerAudioContext) {
|
|
console.log('初始檢測 - 微信原生API不可用，可能影響playbackRate支持');
|
|
} else {
|
|
console.log('初始檢測 - 微信原生API可用');
|
|
}
|
|
|
|
// 如果通過基本檢測，暫時設為支持，等音頻實例創建後再詳細檢測
|
|
this.playbackRateSupported = true;
|
|
console.log('初始檢測 - 基本條件滿足，等待音頻實例檢測');
|
|
|
|
} catch (error) {
|
|
console.error('初始檢測播放速度支持時出錯:', error);
|
|
this.playbackRateSupported = false;
|
|
}
|
|
},
|
|
|
|
// 檢查播放速度控制支持
|
|
checkPlaybackRateSupport(audio) {
|
|
try {
|
|
// 檢查基礎庫版本和平台支持
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
console.log('系統信息:', systemInfo);
|
|
console.log('平台:', systemInfo.platform);
|
|
console.log('基礎庫版本:', systemInfo.SDKVersion);
|
|
console.log('系統版本:', systemInfo.system);
|
|
|
|
// 根據uni-app文檔，微信小程序需要基礎庫2.11.0+才支持playbackRate
|
|
const SDKVersion = systemInfo.SDKVersion || '0.0.0';
|
|
const versionArray = SDKVersion.split('.').map(v => parseInt(v));
|
|
const isVersionSupported = versionArray[0] > 2 ||
|
|
(versionArray[0] === 2 && versionArray[1] > 11) ||
|
|
(versionArray[0] === 2 && versionArray[1] === 11 && versionArray[2] >= 0);
|
|
|
|
console.log('基礎庫版本檢查:', {
|
|
version: SDKVersion,
|
|
parsed: versionArray,
|
|
supported: isVersionSupported
|
|
});
|
|
|
|
if (!isVersionSupported) {
|
|
this.playbackRateSupported = false;
|
|
console.log(`❌ 基礎庫版本不支持 (${SDKVersion})，微信小程序需要2.11.0+才支持playbackRate`);
|
|
return;
|
|
}
|
|
|
|
// Android平台需要6.0+版本支持
|
|
if (systemInfo.platform === 'android') {
|
|
const androidVersion = systemInfo.system.match(/Android (\d+)/);
|
|
console.log('Android版本檢查:', androidVersion);
|
|
if (androidVersion && parseInt(androidVersion[1]) < 6) {
|
|
this.playbackRateSupported = false;
|
|
console.log(`❌ Android版本不支持 (${androidVersion[1]})，需要Android 6+才支持playbackRate`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// 檢查音頻實例是否支持playbackRate
|
|
console.log('🔍 音頻實例檢查:');
|
|
console.log('- playbackRate初始值:', audio.playbackRate);
|
|
console.log('- playbackRate類型:', typeof audio.playbackRate);
|
|
|
|
// 嘗試設置並檢測是否真正支持
|
|
const testRate = 1.25;
|
|
const originalRate = audio.playbackRate || 1.0;
|
|
|
|
try {
|
|
audio.playbackRate = testRate;
|
|
console.log('- 設置測試速度:', testRate);
|
|
console.log('- 設置後的值:', audio.playbackRate);
|
|
|
|
// 檢查設置是否生效
|
|
if (Math.abs(audio.playbackRate - testRate) < 0.01) {
|
|
this.playbackRateSupported = true;
|
|
console.log('✅ playbackRate功能正常');
|
|
} else {
|
|
this.playbackRateSupported = false;
|
|
console.log('❌ playbackRate設置無效，可能不被支持');
|
|
}
|
|
|
|
} catch (error) {
|
|
this.playbackRateSupported = false;
|
|
console.log('❌ playbackRate設置出錯:', error);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('檢查播放速度支持時出錯:', error);
|
|
this.playbackRateSupported = false;
|
|
}
|
|
},
|
|
|
|
// 上一个音频
|
|
previousAudio() {
|
|
// 如果正在加载音频，禁止切换
|
|
if (this.isAudioLoading) {
|
|
return;
|
|
}
|
|
|
|
if (this.currentPageAudios.length === 0) return;
|
|
|
|
if (this.currentAudioIndex > 0) {
|
|
this.currentAudioIndex--;
|
|
if (this.isPlaying) {
|
|
this.playAudio();
|
|
}
|
|
}
|
|
},
|
|
|
|
// 下一个音频
|
|
nextAudio() {
|
|
// 如果正在加载音频，禁止切换
|
|
if (this.isAudioLoading) {
|
|
return;
|
|
}
|
|
|
|
if (this.currentPageAudios.length === 0) return;
|
|
|
|
if (this.currentAudioIndex < this.currentPageAudios.length - 1) {
|
|
this.currentAudioIndex++;
|
|
if (this.isPlaying) {
|
|
this.playAudio();
|
|
}
|
|
}
|
|
},
|
|
|
|
async previousPage() {
|
|
if (this.currentPage > 1) {
|
|
this.currentPage--;
|
|
// 获取对应页面的数据（如果还没有获取过）
|
|
if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
|
|
await this.getBookPages(this.courseIdList[this.currentPage - 1]);
|
|
}
|
|
|
|
// 通知音频控制组件重置状态
|
|
if (this.$refs.audioControls) {
|
|
this.$refs.audioControls.resetAudioState();
|
|
}
|
|
}
|
|
},
|
|
async nextPage() {
|
|
if (this.currentPage < this.bookPages.length) {
|
|
this.currentPage++;
|
|
// 获取对应页面的数据（如果还没有获取过）
|
|
if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
|
|
await this.getBookPages(this.courseIdList[this.currentPage - 1]);
|
|
}
|
|
|
|
// 通知音频控制组件重置状态
|
|
if (this.$refs.audioControls) {
|
|
this.$refs.audioControls.resetAudioState();
|
|
}
|
|
}
|
|
},
|
|
toggleSound() {
|
|
console.log('音色切换')
|
|
uni.navigateTo({
|
|
url: '/subPages/home/music?voiceId=' + this.voiceId
|
|
})
|
|
},
|
|
unlockBook() {
|
|
console.log('解锁全书')
|
|
// 这里可以跳转到会员页面或者调用解锁接口
|
|
uni.navigateTo({
|
|
url: '/subPages/member/recharge'
|
|
})
|
|
},
|
|
async goToPage(page) {
|
|
this.currentPage = page
|
|
console.log('跳转到页面:', page)
|
|
// 获取对应页面的数据（如果还没有获取过）
|
|
if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
|
|
await this.getBookPages(this.courseIdList[this.currentPage - 1]);
|
|
}
|
|
|
|
// 通知音频控制组件处理页面切换
|
|
if (this.$refs.audioControls) {
|
|
// 检查当前页面是否有预加载的音频缓存
|
|
const hasPreloadedAudio = this.$refs.audioControls.checkAudioCache(this.currentPage);
|
|
|
|
if (hasPreloadedAudio) {
|
|
// 如果有预加载的音频，直接播放
|
|
console.log(`第${this.currentPage}页音频已预加载，自动播放`);
|
|
this.$refs.audioControls.autoPlayCachedAudio();
|
|
} else {
|
|
// 如果没有预加载的音频，重置状态
|
|
this.$refs.audioControls.resetAudioState();
|
|
}
|
|
}
|
|
},
|
|
async onSwiperChange(e) {
|
|
this.currentPage = e.detail.current + 1
|
|
// 获取对应页面的数据（如果还没有获取过）
|
|
if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
|
|
await this.getBookPages(this.courseIdList[this.currentPage - 1]);
|
|
}
|
|
|
|
// 通知音频控制组件处理页面切换
|
|
if (this.$refs.audioControls) {
|
|
// 检查当前页面是否有预加载的音频缓存
|
|
const hasPreloadedAudio = this.$refs.audioControls.checkAudioCache(this.currentPage);
|
|
|
|
if (hasPreloadedAudio) {
|
|
// 如果有预加载的音频，直接播放
|
|
console.log(`第${this.currentPage}页音频已预加载，自动播放`);
|
|
this.$refs.audioControls.autoPlayCachedAudio();
|
|
} else {
|
|
// 如果没有预加载的音频，重置状态
|
|
this.$refs.audioControls.resetAudioState();
|
|
}
|
|
}
|
|
},
|
|
async getCourseList(id) {
|
|
const res = await this.$api.book.coursePage({
|
|
id: id
|
|
})
|
|
if (res.code === 200) {
|
|
this.courseIdList = res.result.map(item => item.id)
|
|
// 初始化二维数组 换一种方式
|
|
this.bookPages = this.courseIdList.map(() => [])
|
|
// 初始化标题数组
|
|
this.pageTitles = this.courseIdList.map(() => '')
|
|
// 初始化页面类型数组
|
|
this.pageTypes = this.courseIdList.map(() => '')
|
|
// 初始化页面单词数组
|
|
this.pageWords = this.courseIdList.map(() => [])
|
|
// 通知音频控制组件重置状态
|
|
if (this.$refs.audioControls) {
|
|
this.$refs.audioControls.resetAudioState();
|
|
}
|
|
// 初始化第一页
|
|
if (this.courseIdList.length > 0) {
|
|
await this.getBookPages(this.courseIdList[0])
|
|
// 预加载后续几页的内容（异步执行，不阻塞当前页面显示）
|
|
this.preloadNextPages()
|
|
}
|
|
}
|
|
},
|
|
async getBookPages(id) {
|
|
const res = await this.$api.book.coursesPageDetail({
|
|
id: id
|
|
})
|
|
if (res.code === 200) {
|
|
// 使用$set确保响应式更新
|
|
const rawPageData = JSON.parse(res.result.content)
|
|
console.log('获取到的原始页面数据:', rawPageData)
|
|
|
|
// 过滤掉无效的数据项
|
|
const filteredPageData = rawPageData.filter(item => {
|
|
return item && typeof item === 'object' && (item.type || item.content)
|
|
})
|
|
console.log('过滤后的页面数据:', filteredPageData)
|
|
|
|
// 确保当前页面存在
|
|
if (this.currentPage - 1 < this.bookPages.length) {
|
|
this.$set(this.bookPages, this.currentPage - 1, filteredPageData)
|
|
// 保存页面标题
|
|
this.$set(this.pageTitles, this.currentPage - 1, res.result.title || '')
|
|
// 保存页面类型
|
|
this.$set(this.pageTypes, this.currentPage - 1, res.result.type || '')
|
|
// 保存页面单词释义数据
|
|
this.$set(this.pageWords, this.currentPage - 1, res.result.words || [])
|
|
// 保存页面付费状态
|
|
this.$set(this.pagePay, this.currentPage - 1, res.result.pay || 'N')
|
|
}
|
|
}
|
|
},
|
|
// 获取课程列表
|
|
async getCoursePageList (bookId) {
|
|
const res = await this.$api.book.course({
|
|
id: bookId
|
|
})
|
|
if (res.code === 200) {
|
|
this.courseList = res.result.records
|
|
// 打上序列号
|
|
this.courseList = this.courseList.map((item, index) => ({
|
|
...item,
|
|
index,
|
|
}))
|
|
}
|
|
},
|
|
|
|
// 清理音频缓存
|
|
clearAudioCache() {
|
|
this.audioCache = {};
|
|
console.log('音频缓存已清理');
|
|
},
|
|
|
|
// 清理單詞語音緩存
|
|
clearWordAudioCache() {
|
|
this.wordAudioCache = {};
|
|
console.log('單詞語音緩存已清理');
|
|
},
|
|
|
|
// 限制缓存大小，保留最近访问的页面
|
|
limitCacheSize(maxSize = 10) {
|
|
const cacheKeys = Object.keys(this.audioCache);
|
|
if (cacheKeys.length > maxSize) {
|
|
// 删除最旧的缓存项
|
|
const keysToDelete = cacheKeys.slice(0, cacheKeys.length - maxSize);
|
|
keysToDelete.forEach(key => {
|
|
delete this.audioCache[key];
|
|
});
|
|
console.log('缓存大小已限制，删除了', keysToDelete.length, '个缓存项');
|
|
}
|
|
},
|
|
|
|
// 预加载后续页面内容
|
|
async preloadNextPages() {
|
|
try {
|
|
console.log('开始预加载后续页面内容');
|
|
|
|
// 优化策略：只预加载接下来的2-3页内容，避免过多请求
|
|
const preloadCount = Math.min(3, this.courseIdList.length - 1); // 预加载3页或剩余页数
|
|
|
|
// 串行预加载，避免并发请求过多
|
|
for (let i = 1; i <= preloadCount; i++) {
|
|
if (i < this.courseIdList.length && this.bookPages[i].length === 0) {
|
|
try {
|
|
console.log(`预加载第${i + 1}页内容`);
|
|
await this.preloadSinglePage(this.courseIdList[i], i);
|
|
|
|
// 每页之间间隔800ms，给服务器更多缓冲时间
|
|
if (i < preloadCount) {
|
|
await new Promise(resolve => setTimeout(resolve, 800));
|
|
}
|
|
} catch (error) {
|
|
console.error(`预加载第${i + 1}页失败:`, error);
|
|
// 继续预加载下一页
|
|
}
|
|
}
|
|
}
|
|
|
|
console.log('页面内容预加载完成');
|
|
|
|
// 延迟1.5秒后再通知AudioControls组件开始预加载音频，避免接口冲突
|
|
setTimeout(() => {
|
|
if (this.$refs.audioControls) {
|
|
this.$refs.audioControls.startPreloadAudio();
|
|
}
|
|
}, 1500);
|
|
|
|
} catch (error) {
|
|
console.error('预加载页面内容失败:', error);
|
|
}
|
|
},
|
|
|
|
// 预加载单个页面
|
|
async preloadSinglePage(courseId, pageIndex) {
|
|
try {
|
|
const res = await this.$api.book.coursesPageDetail({
|
|
id: courseId
|
|
});
|
|
|
|
if (res.code === 200) {
|
|
const rawPageData = JSON.parse(res.result.content);
|
|
const filteredPageData = rawPageData.filter(item => {
|
|
return item && typeof item === 'object' && (item.type || item.content);
|
|
});
|
|
|
|
// 使用$set确保响应式更新
|
|
this.$set(this.bookPages, pageIndex, filteredPageData);
|
|
this.$set(this.pageTitles, pageIndex, res.result.title || '');
|
|
this.$set(this.pageTypes, pageIndex, res.result.type || '');
|
|
this.$set(this.pageWords, pageIndex, res.result.words || []);
|
|
this.$set(this.pagePay, pageIndex, res.result.pay || 'N');
|
|
|
|
console.log(`第${pageIndex + 1}页内容预加载完成`);
|
|
}
|
|
} catch (error) {
|
|
console.error(`预加载第${pageIndex + 1}页失败:`, error);
|
|
throw error;
|
|
}
|
|
},
|
|
|
|
// 自動加載第一頁音頻並播放
|
|
async autoLoadAndPlayFirstPage() {
|
|
try {
|
|
console.log('開始自動加載第一頁音頻');
|
|
|
|
// 確保當前是第一頁且是文字頁面
|
|
if (this.currentPage === 1 && this.isTextPage) {
|
|
console.log('當前是第一頁文字頁面，開始加載音頻');
|
|
|
|
// 加載音頻
|
|
await this.getCurrentPageAudio();
|
|
|
|
// 檢查是否成功加載音頻
|
|
if (this.currentPageAudios && this.currentPageAudios.length > 0) {
|
|
console.log('音頻加載成功，getCurrentPageAudio已經自動播放第一個音頻');
|
|
// getCurrentPageAudio方法已經處理了第一個音頻的播放，這裡不需要再次調用playAudio
|
|
} else {
|
|
console.log('第一頁沒有音頻數據');
|
|
}
|
|
} else {
|
|
console.log('當前頁面不是第一頁文字頁面，跳過自動播放');
|
|
}
|
|
} catch (error) {
|
|
console.error('自動加載和播放音頻失敗:', error);
|
|
}
|
|
},
|
|
},
|
|
async onLoad(args) {
|
|
// 监听音色切换事件，传递给AudioControls组件处理
|
|
uni.$on('selectVoice', (voiceId) => {
|
|
console.log('音色切換:', this.voiceId, '->', voiceId);
|
|
this.voiceId = voiceId;
|
|
|
|
// 清理單詞語音資源
|
|
this.clearWordAudioCache();
|
|
if (this.currentWordAudio) {
|
|
this.currentWordAudio.destroy();
|
|
this.currentWordAudio = null;
|
|
}
|
|
})
|
|
|
|
this.courseId = args.courseId
|
|
this.memberId = args.memberId
|
|
|
|
// 先获取点进来的课程的页面列表
|
|
await Promise.all([this.getCourseList(this.courseId), this.getCoursePageList(args.bookId), this.getMemberInfo(), this.getVoiceList()])
|
|
|
|
// 页面加载完成后，通知AudioControls组件自动加载第一页音频
|
|
this.$nextTick(() => {
|
|
if (this.$refs.audioControls) {
|
|
this.$refs.audioControls.autoLoadAndPlayFirstPage();
|
|
}
|
|
});
|
|
},
|
|
|
|
|
|
|
|
// 页面卸载时清理资源
|
|
onUnload() {
|
|
uni.$off('selectVoice')
|
|
// 清理單詞語音資源
|
|
if (this.currentWordAudio) {
|
|
this.currentWordAudio.destroy();
|
|
this.currentWordAudio = null;
|
|
}
|
|
// 清理單詞語音緩存
|
|
this.clearWordAudioCache();
|
|
|
|
// 通知AudioControls组件清理资源
|
|
if (this.$refs.audioControls) {
|
|
this.$refs.audioControls.destroyAudio();
|
|
}
|
|
},
|
|
|
|
// 页面隐藏时暂停音频
|
|
onHide() {
|
|
// 通知AudioControls组件暂停音频
|
|
if (this.$refs.audioControls) {
|
|
this.$refs.audioControls.pauseOnHide();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.book-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #F8F8F8;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.custom-navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #F8F8F8;
|
|
z-index: 1000;
|
|
transition: transform 0.3s ease;
|
|
|
|
&.navbar-hidden {
|
|
transform: translateY(-100%);
|
|
}
|
|
}
|
|
|
|
.navbar-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx 32rpx;
|
|
// padding-top: calc(20rpx + var(--status-bar-height, 0));
|
|
height: 60rpx;
|
|
}
|
|
|
|
.navbar-left,
|
|
.navbar-right {
|
|
width: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.navbar-right {
|
|
|
|
justify-content: flex-end;
|
|
flex: 1;
|
|
}
|
|
|
|
.navbar-title {
|
|
transform: translateX(-50rpx);
|
|
flex: 1;
|
|
text-align: center;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #262626;
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
.content-swiper {
|
|
flex: 1;
|
|
height: calc(100vh - 100rpx);
|
|
// margin-top: 100rpx;
|
|
margin-bottom: 100rpx;
|
|
}
|
|
|
|
.swiper-item {
|
|
height: 100%;
|
|
}
|
|
|
|
.content-area {
|
|
flex: 1;
|
|
padding: 0 40rpx;
|
|
padding-top: 100rpx;
|
|
// background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.card-content {
|
|
background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32rpx;
|
|
height: 1172rpx;
|
|
margin-top: 20rpx;
|
|
border-radius: 32rpx;
|
|
// height: 100%;
|
|
padding: 40rpx;
|
|
// margin: 0
|
|
border: 1px solid #FFFFFF;
|
|
box-sizing: border-box;
|
|
.card-line {
|
|
display: flex;
|
|
align-items: center;
|
|
// margin-bottom: 20rpx;
|
|
}
|
|
|
|
.card-line-image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.card-line-text {
|
|
font-family: PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
line-height: 48rpx;
|
|
color: #3B3D3D;
|
|
}
|
|
|
|
.card-image {
|
|
width: 590rpx;
|
|
height: 268rpx;
|
|
border-radius: 24rpx;
|
|
// margin-bottom: 20rpx;
|
|
}
|
|
.english-text {
|
|
display: block;
|
|
font-family: PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
line-height: 48rpx;
|
|
color: #3B3D3D;
|
|
// margin-bottom: 16rpx;
|
|
}
|
|
|
|
.english-text-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.english-token {
|
|
font-family: PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
line-height: 48rpx;
|
|
color: #3B3D3D;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.clickable-word {
|
|
background: $primary-color;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.clickable-word:hover {
|
|
background-color: rgba(0, 122, 255, 0.1);
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.chinese-text {
|
|
display: block;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
line-height: 48rpx;
|
|
color: #4F4F4F;
|
|
}
|
|
}
|
|
|
|
/* 会员限制页面样式 */
|
|
.member-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 90%;
|
|
background-color: #F8F8F8;
|
|
padding: 40rpx;
|
|
margin: -40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.member-title {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 40rpx;
|
|
line-height: 1;
|
|
color: #6f6f6f;
|
|
text-align: center;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.member-button {
|
|
width: 670rpx;
|
|
height: 72rpx;
|
|
background: #06DADC;
|
|
border-radius: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.member-button-text {
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.video-content {
|
|
width: 100vw;
|
|
margin: 200rpx -40rpx 0;
|
|
height: 500rpx;
|
|
background-color: #FFFFFF;
|
|
// padding: 40rpx;
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.video-player{
|
|
width: 670rpx;
|
|
margin: 0 auto;
|
|
height: 376rpx;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.text-content {
|
|
width: 100vw;
|
|
background-color: #F6F6F6;
|
|
height: 100%;
|
|
padding: 40rpx;
|
|
margin: -40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.content-text {
|
|
font-family: PingFang SC;
|
|
// font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #3B3D3D;
|
|
line-height: 48rpx;
|
|
letter-spacing: 0;
|
|
text-align: justify;
|
|
word-break: break-all;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.clickable-text {
|
|
cursor: pointer;
|
|
|
|
|
|
&:active {
|
|
background-color: rgba(6, 218, 220, 0.1);
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
|
|
.text-highlight {
|
|
background-color: $primary-color;
|
|
// color: #fff;
|
|
// padding: 8rpx 16rpx;
|
|
// border-radius: 8rpx;
|
|
// box-shadow: 0 2rpx 8rpx rgba(6, 218, 220, 0.3);
|
|
}
|
|
|
|
.custom-tabbar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
// background-color: #fff;
|
|
border-top: 1rpx solid #EEEEEE;
|
|
z-index: 1000;
|
|
transition: transform 0.3s ease;
|
|
|
|
&.tabbar-hidden {
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
|
|
.tabbar-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24rpx 62rpx;
|
|
// z-index: 100;
|
|
// position: relative;
|
|
// background-color: #fff;
|
|
// padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|
height: 88rpx;
|
|
}
|
|
|
|
.tabbar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 35rpx;
|
|
}
|
|
|
|
.tab-button {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.tab-icon {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
}
|
|
|
|
.tab-text {
|
|
font-family: PingFang SC;
|
|
// font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
line-height: 24rpx;
|
|
}
|
|
|
|
.tabbar-right {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.page-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.page-numbers {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
overflow-x: auto;
|
|
max-width: 400rpx;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.page-number {
|
|
min-width: 84rpx;
|
|
height: 58rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 100rpx;
|
|
font-family: PingFang SC;
|
|
// font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #3B3D3D;
|
|
background-color: transparent;
|
|
border: 1px solid #3B3D3D;
|
|
transition: all 0.3s ease;
|
|
|
|
&.active {
|
|
border: 1px solid $primary-color;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
/* 课程弹出窗样式 */
|
|
.course-popup {
|
|
padding: 0 32rpx;
|
|
max-height: 80vh;
|
|
}
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
border-bottom: 2rpx solid #EEEEEE
|
|
// margin-bottom: 40rpx;
|
|
}
|
|
|
|
.popup-title {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: #181818;
|
|
}
|
|
|
|
|
|
.course-list {
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.course-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
padding-top: 24rpx;
|
|
padding-right: 8rpx;
|
|
padding-bottom: 24rpx;
|
|
padding-left: 8rpx;
|
|
|
|
border-bottom: 1px solid #EEEEEE;
|
|
cursor: pointer;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.course-number {
|
|
width: 80rpx;
|
|
font-family: PingFang SC;
|
|
// font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #999;
|
|
&.highlight {
|
|
color: $primary-color;
|
|
}
|
|
// margin-right: 24rpx;
|
|
}
|
|
|
|
.course-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.course-english {
|
|
font-family: PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
line-height: 44rpx;
|
|
color: #252545;
|
|
margin-bottom: 8rpx;
|
|
|
|
&.highlight {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
.course-chinese {
|
|
font-size: 28rpx;
|
|
line-height: 48rpx;
|
|
color: #3B3D3D;
|
|
&.highlight {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
/* 释义弹窗样式 */
|
|
.meaning-popup {
|
|
// width: 670rpx;
|
|
background-color: #FFFFFF;
|
|
// border-radius: 32rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.meaning-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 32rpx;
|
|
border-bottom: 2rpx solid #EEEEEE;
|
|
}
|
|
|
|
.close-btn {
|
|
width: 80rpx;
|
|
}
|
|
|
|
.close-text {
|
|
font-family: PingFang SC;
|
|
font-size: 32rpx;
|
|
color: #8b8b8b;
|
|
}
|
|
|
|
.meaning-title {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: #181818;
|
|
}
|
|
|
|
.meaning-content {
|
|
padding: 32rpx;
|
|
}
|
|
|
|
.meaning-image {
|
|
width: 670rpx;
|
|
height: 268rpx;
|
|
border-radius: 24rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.word-info {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.word-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.word-text {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 40rpx;
|
|
color: #181818;
|
|
}
|
|
|
|
.phonetic-container{
|
|
display: flex;
|
|
gap: 24rpx;
|
|
align-items: center;
|
|
|
|
.speaker-icon {
|
|
cursor: pointer;
|
|
transition: opacity 0.2s ease;
|
|
padding: 8rpx;
|
|
border-radius: 8rpx;
|
|
|
|
&:hover {
|
|
opacity: 0.7;
|
|
background-color: rgba(0, 122, 255, 0.1);
|
|
}
|
|
}
|
|
|
|
.phonetic-text {
|
|
font-family: PingFang SC;
|
|
font-size: 28rpx;
|
|
color: #262626;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
}
|
|
|
|
.word-meaning {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.part-of-speech {
|
|
font-family: PingFang SC;
|
|
font-size: 28rpx;
|
|
color: #262626;
|
|
}
|
|
|
|
.meaning-text {
|
|
font-family: PingFang SC;
|
|
font-size: 28rpx;
|
|
color: #181818;
|
|
flex: 1;
|
|
}
|
|
|
|
.knowledge-gain {
|
|
background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
|
|
border-radius: 24rpx;
|
|
padding: 32rpx 40rpx;
|
|
}
|
|
|
|
.knowledge-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.knowledge-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.knowledge-title {
|
|
font-family: PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
color: #3B3D3D;
|
|
}
|
|
|
|
.knowledge-content {
|
|
font-family: PingFang SC;
|
|
font-size: 28rpx;
|
|
color: #4f4f4f;
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
|
|
</style>
|