index.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. <template>
  2. <view class="word-view-page" :style="{backgroundImage: 'url(' + courseBjFun() + ')'}">
  3. <view class="icon-title-navBar-box">
  4. <view @click="handleBack" class="nav-bar-icon"></view>
  5. <text class="nav-bar-title">学习</text>
  6. </view>
  7. <view class="ezy-tab-border">
  8. <template v-for="item in data.wordList">
  9. <mainCardVue :active-word="data.activeWord" :pageData="data" :active-words="activeWords"
  10. @play-audio="handlePlayAudio" @goXiangjie="goXiangjie" @swiper-change="handleSwiperChange"
  11. :is-playing="isAudioPlaying" v-if="item.id == data.activeId" :key="item.id">
  12. </mainCardVue>
  13. </template>
  14. </view>
  15. <view class="word-view-bottom">
  16. <view class="collect-btn" v-if="userCode != 'Visitor'" @click="handleShouCang">
  17. <icon :class="{active: data.collectFlag}"></icon>
  18. <view>收藏</view>
  19. </view>
  20. <view class="bottom-btn-box">
  21. <view class="word-view-btn" @click="prevWord" v-if="!isFirst&&isLearnRecord!=0">上一词</view>
  22. <view class="word-view-btn" @click="nextWord" v-if="!isLast&&isLearnRecord!=0">下一词</view>
  23. <view class="word-view-btn" v-if="isLast&&isLearnRecord!=0" @click="handleComplete">完成</view>
  24. </view>
  25. </view>
  26. <audioRightWrongVue></audioRightWrongVue>
  27. </view>
  28. </template>
  29. <script setup>
  30. import mainCardVue from "./components/mainCard.vue";
  31. import {
  32. ref,
  33. reactive,
  34. computed,
  35. nextTick
  36. } from "vue";
  37. import {
  38. onLoad
  39. } from "@dcloudio/uni-app";
  40. import * as httpApi from "@/api/word.js"
  41. import {
  42. getUserIdentity,
  43. } from "@/utils/common.js"
  44. import {
  45. useAudioCache,
  46. audioPlayer
  47. } from "./components/useAudio.js"
  48. import {
  49. getWordCancel
  50. } from "../../api/word";
  51. import audioRightWrongVue from "./components/audioRightWrong.vue";
  52. const userCode = getUserIdentity();
  53. const {
  54. cacheAudio,
  55. clearAudioCache
  56. } = useAudioCache();
  57. const AudioP = new audioPlayer();
  58. const isLearnRecord = ref(null)
  59. const isLearnStatus = ref(null)
  60. const isAudioPlaying = ref(false) // 音频播放状态
  61. // 监听音频播放事件
  62. uni.$on('danci-audio-play', (code) => {
  63. isAudioPlaying.value = true
  64. })
  65. uni.$on('danci-audio-ended', () => {
  66. isAudioPlaying.value = false
  67. })
  68. function handleSwiperChange(index) {
  69. return false
  70. if (isAudioPlaying.value) return; // 如果正在播放,不允许切换
  71. // 无论切换到哪个页面,都播放单词的主发音(yinpin)
  72. if (data.activeWord && data.activeWord.yinpin) {
  73. handlePlayAudio({
  74. url: data.activeWord.yinpin,
  75. code: 'swiper-auto-play'
  76. });
  77. }
  78. }
  79. function courseBjFun() {
  80. return 'static/images/course/course-cjdc-bj.png'
  81. }
  82. function chunkArray(arr, chunkSize) {
  83. const result = [];
  84. for (let i = 0; i < arr.length; i += chunkSize) {
  85. result.push(arr.slice(i, i + chunkSize));
  86. }
  87. return result;
  88. }
  89. const data = reactive({
  90. jieId: null, // 节/单元ID
  91. activeId: null, // 当前单词
  92. wordList: [], // 单词列表
  93. arrayList: [], // 整合数据
  94. activeWord: null, // 单词详情数据
  95. collectFlag: 0, // 收藏状态
  96. subjectId: null, // 学科ID
  97. levelId: null, // 等级
  98. typeId: null, // 类型
  99. tipFlag: null, // 提示
  100. youkeZhangId: null, // 章ID
  101. isLearnStatus: null, // 学习记录状态
  102. })
  103. onLoad(({
  104. jieId,
  105. wordId,
  106. subjectId,
  107. levelId,
  108. typeId,
  109. tipFlag,
  110. isLearnStatus,
  111. youkeZhangId
  112. }) => {
  113. data.jieId = jieId;
  114. isLearnRecord.value = jieId;
  115. data.activeId = wordId;
  116. data.isLearnStatus = isLearnStatus;
  117. data.subjectId = subjectId;
  118. data.levelId = levelId;
  119. data.typeId = typeId;
  120. data.tipFlag = tipFlag;
  121. data.youkeZhangId = youkeZhangId;
  122. // 获取单词列表数据
  123. initWordInfo();
  124. // 清理过期文件
  125. clearAudioCache();
  126. })
  127. // 是否是最后一题
  128. const isLast = computed(() => {
  129. if (!data.wordList.length) {
  130. return false
  131. }
  132. return data.activeId == data.wordList[data.wordList.length - 1].id;
  133. })
  134. const isFirst = computed(() => {
  135. if (!data.wordList.length) {
  136. return false
  137. }
  138. return data.activeId == data.wordList[0].id;
  139. })
  140. const activeWords = computed(() => {
  141. if (!data.activeId) {
  142. return null
  143. }
  144. return data.arrayList.find(item => item.some(cit => cit.id == data.activeId))
  145. })
  146. function nextWord() {
  147. const index = data.wordList.findIndex(item => item.id == data.activeId);
  148. if (index < data.wordList.length - 1) {
  149. if (userCode !== 'Visitor') {
  150. uni.redirectTo({
  151. url: `/pages/newEnglish/index?jieId=${data.jieId}&wordId=${data.wordList[index + 1].id }`
  152. })
  153. } else {
  154. uni.redirectTo({
  155. url: `/pages/newEnglish/index?jieId=${data.jieId}&wordId=${data.wordList[index + 1].id }&levelId=${data.levelId}&typeId=${data.typeId}&subjectId=${data.subjectId}&tipFlag=${data.tipFlag}&youkeZhangId=${data.youkeZhangId}`
  156. })
  157. }
  158. }
  159. }
  160. function prevWord() {
  161. const index = data.wordList.findIndex(item => item.id == data.activeId);
  162. if (index > 0) {
  163. if (userCode !== 'Visitor') {
  164. uni.redirectTo({
  165. url: `/pages/newEnglish/index?jieId=${data.jieId}&wordId=${data.wordList[index - 1].id }`
  166. })
  167. } else {
  168. uni.redirectTo({
  169. url: `/pages/newEnglish/index?jieId=${data.jieId}&wordId=${data.wordList[index - 1].id }&levelId=${data.levelId}&typeId=${data.typeId}&subjectId=${data.subjectId}&tipFlag=${data.tipFlag}&youkeZhangId=${data.youkeZhangId}`
  170. })
  171. }
  172. }
  173. }
  174. function handleBack() {
  175. // 返回单词列表
  176. if (userCode !== 'Visitor') {
  177. if (data.jieId == 0) {
  178. uni.redirectTo({
  179. url: `/pages/my/learnRecord?jieId=${data.jieId}&isLearnStatus=${data.isLearnStatus}&levelId=${data.levelId}&typeId=${data.typeId}&subjectId=${data.subjectId}&tipFlag=${data.tipFlag}&youkeZhangId=${data.youkeZhangId}`
  180. })
  181. } else {
  182. uni.redirectTo({
  183. url: `/pages/wordList/wordList?jieId=${data.jieId}`
  184. })
  185. }
  186. } else {
  187. const youkePageData = JSON.stringify({
  188. subjectId: data.subjectId,
  189. levelId: data.levelId,
  190. typeId: data.typeId,
  191. tipFlag: data.tipFlag,
  192. youkeZhangId: data.youkeZhangId,
  193. jieId: data.jieId
  194. })
  195. uni.redirectTo({
  196. url: `/pages/wordList/wordList?youkePageData=${youkePageData}`
  197. })
  198. }
  199. }
  200. function handleComplete() {
  201. // 返回岛
  202. if (userCode !== 'Visitor') {
  203. uni.redirectTo({
  204. url: `/pages/study/index`
  205. })
  206. } else {
  207. uni.redirectTo({
  208. url: `/pages/study/index?levelId=${data.levelId}&typeId=${data.typeId}&subjectId=${data.subjectId}&tipFlag=${data.tipFlag}&youkeZhangId=${data.youkeZhangId}&jieId=${data.jieId}`
  209. })
  210. }
  211. }
  212. function handleShouCang() {
  213. if (data.collectFlag == 1) {
  214. httpApi.getWordCancel({
  215. wordId: data.activeId
  216. }).then(res => {
  217. uni.showToast({
  218. title: '操作成功'
  219. })
  220. data.collectFlag = 0;
  221. })
  222. } else {
  223. httpApi.getWordShouCang({
  224. wordId: data.activeId
  225. }).then(res => {
  226. uni.showToast({
  227. title: '操作成功'
  228. })
  229. data.collectFlag = 1;
  230. })
  231. }
  232. }
  233. function initWordInfo() {
  234. if (userCode !== 'Visitor') {
  235. httpApi.getWordInfo({
  236. jieId: data.jieId,
  237. wordId: data.activeId
  238. }).then(res => {
  239. data.activeWord = res.data;
  240. data.wordList = res.data.danciList; // 单词组
  241. data.collectFlag = res.data.collectFlag; // 收藏状态
  242. if (data.wordList.length) {
  243. data.arrayList = chunkArray(data.wordList, 5); // 将1维单词数组转换为2维数组
  244. }
  245. // console.log('res.data',res.data)
  246. handleCacheAudio()
  247. // autoPlayAudio()
  248. })
  249. } else {
  250. httpApi.getCommonWordInfo({
  251. jieId: data.jieId,
  252. wordId: data.activeId
  253. }).then(res => {
  254. data.activeWord = res.data;
  255. data.wordList = res.data.danciList; // 单词组
  256. data.collectFlag = res.data.collectFlag; // 收藏状态
  257. if (data.wordList.length) {
  258. data.arrayList = chunkArray(data.wordList, 5); // 将1维单词数组转换为2维数组
  259. }
  260. handleCacheAudio()
  261. //autoPlayAudio()
  262. })
  263. }
  264. }
  265. // 新增自动播放功能
  266. const autoPlayAudio = async () => {
  267. // 等待数据加载完成
  268. await nextTick();
  269. // 检查是否有单词发音数据
  270. if (data.activeWord && data.activeWord.yinpin) {
  271. // 延迟500ms确保音频已缓存
  272. setTimeout(() => {
  273. handlePlayAudio({
  274. url: data.activeWord.yinpin,
  275. code: 'auto-play' // 特殊标记,区分自动播放
  276. });
  277. }, 500);
  278. }
  279. };
  280. function goXiangjie() {
  281. uni.redirectTo({
  282. url: `/pages/newEnglish/components/xiangjie?levelId=${data.levelId}&typeId=${data.typeId}&subjectId=${data.subjectId}&tipFlag=${data.tipFlag}&wordId=${data.activeId}&youkeZhangId=${data.youkeZhangId}&jieId=${data.jieId}`
  283. })
  284. }
  285. function handleCacheAudio() {
  286. const arr = []
  287. // yinpin
  288. arr.push(data.activeWord.yinpin);
  289. // yinjie
  290. data.activeWord.yinjie.forEach(item => {
  291. arr.push(item.yinpin)
  292. })
  293. // pindu
  294. data.activeWord.pindu.forEach(item => {
  295. arr.push(item.yinpin)
  296. })
  297. // 缓存音频
  298. arr.map(item => cacheAudio(item));
  299. // console.log('arr',arr)
  300. }
  301. async function handlePlayAudio({
  302. url,
  303. code
  304. }) {
  305. console.log('播放', url)
  306. console.log('播放', code)
  307. const cachedPath = await cacheAudio(url);
  308. if (cachedPath && cachedPath.includes('.mp3')) {
  309. // console.log('地址:', cachedPath)
  310. AudioP.play(cachedPath, code);
  311. } else {
  312. uni.showToast({
  313. title: '音频加载失败',
  314. icon: 'none'
  315. });
  316. }
  317. }
  318. </script>
  319. <style>
  320. </style>