xuePage.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <!-- 单词区 && 音标区:最多14位,超过换行 词根助记区:宽度不限,可以滚动-->
  2. <!-- 单音节最长:swimming 多音节最长:transportation -->
  3. <template>
  4. <view class="words-xue-box">
  5. <selectTypesVue activeSelect="1"></selectTypesVue>
  6. <view class="words-xue-body">
  7. <!-- 单词区 -->
  8. <view class="word-circle-box">
  9. <text v-for="(item,index) in activeWord.chaifen" :key="index">{{item}}</text>
  10. </view>
  11. <view class="word-block-box">
  12. <text v-for="(item,index) in activeWord.chaifen" :key="index">{{item}}</text>
  13. </view>
  14. <!-- 音标区 -->
  15. <view class="yb-play-box xue-yb-play-box">
  16. <yinbiaoTxtVue :yinbiao="activeWord.yinbiao"></yinbiaoTxtVue>
  17. <!-- 音频播放 -->
  18. <audioTwoVue :active-word="activeWord" @play-audio="handlePlay"></audioTwoVue>
  19. </view>
  20. <!-- 注释区 -->
  21. <view class="pin-words-explain-box xue-words-explain-box">
  22. <view class="words-explain-item" v-for="item in activeWord.jianyi" :key="item">{{item}}</view>
  23. </view>
  24. <!-- 详解触发 -->
  25. <view @click="goXiangjie" class="details-btn">详解 ></view>
  26. <!-- 音标拆分区 -->
  27. <view v-if="data.isPindu" class="word-block-box yb-block-box">
  28. <!-- pindu -->
  29. <audioThreeVue v-for="(item,index) in activeWord.pindu" :key="index" :YItem="item" @play-audio="handlePlay"></audioThreeVue>
  30. </view>
  31. <view v-else class="yj-block-box">
  32. <!-- yinjie -->
  33. <audioFourVue v-for="(item,index) in activeWord.yinjie" :key="index" :YItem="item" @play-audio="handlePlay"></audioFourVue>
  34. </view>
  35. <!-- 音标按钮 -->
  36. <view class="xue-change-btn-box">
  37. <view class="change-btn" :class="{active: data.isPindu}" @click="handlePindu"><text>自然拼读</text></view>
  38. <view class="change-btn" :class="{active: !data.isPindu}" @click="handleYinjie"><text>音节拆分</text></view>
  39. </view>
  40. <!-- 词根+实用口语 -->
  41. <view v-if="activeWord.cigenzhuji.length" class="details-content-box xue-details-content-box">
  42. <text class="details-title">词根助记</text>
  43. <scroll-view class="cg-item-list" scroll-x @touchmove.stop >
  44. <view class="cg-item-box" v-for="(item,index) in activeWord.cigenzhuji" :key="index" >
  45. <view class="cg-item">
  46. <view :class="{isEven: index% 2 !== 0 && index!==activeWord.cigenzhuji.length-1,isOdd: index% 2 === 0 && index!==activeWord.cigenzhuji.length-1}">{{item.en}}</view>
  47. <view>{{item.zn}}</view>
  48. </view>
  49. <view class="cg-symbol" v-if="index<activeWord.cigenzhuji.length-2">+</view>
  50. <view class="cg-symbol" v-if="index == activeWord.cigenzhuji.length - 2">=</view>
  51. </view>
  52. </scroll-view>
  53. </view>
  54. <!-- 实用语句 -->
  55. <view class="details-content-box xue-details-content-box">
  56. <text class="details-title">实用口语</text>
  57. <view v-for="(item,index) in activeWord.kouyu" :key="index" class="syky-content">
  58. <view class="details-en-content">
  59. <rich-text :nodes="highlightWord(item.en)"></rich-text>
  60. </view>
  61. <view class="details-cn-content">{{item.zn}}</view>
  62. </view>
  63. </view>
  64. </view>
  65. </view>
  66. </template>
  67. <script setup>
  68. import selectTypesVue from './selectTypes.vue';
  69. import audioTwoVue from './audioTwo.vue';
  70. import audioThreeVue from './audioThree.vue';
  71. import audioFourVue from './audioFour.vue';
  72. import yinbiaoTxtVue from "./yinbiaoTxt.vue"
  73. import {
  74. reactive,
  75. computed,
  76. } from 'vue';
  77. import {
  78. getUserIdentity,
  79. } from "@/utils/common.js"
  80. import * as httpApi from "@/api/word.js"
  81. import {
  82. audioPlayer,
  83. useAudioCache
  84. } from './useAudio.js';
  85. const emits = defineEmits(['play-audio'])
  86. const {
  87. cacheAudio,
  88. clearAudioCache
  89. } = useAudioCache();
  90. const data = reactive({
  91. isPlaying:false,
  92. isPindu:true,
  93. })
  94. const userCode = getUserIdentity();
  95. const props = defineProps({
  96. activeWord: { // 单词数据
  97. type: Object,
  98. },
  99. activeWords: {
  100. type: Array
  101. },
  102. pageData: {
  103. type: Object,
  104. },
  105. })
  106. const highlightWord = (text) => {
  107. if (!text || !props.activeWord.name){return text}
  108. const word = props.activeWord.name;
  109. const regex = new RegExp(word, 'gi');
  110. return text.replace(regex, (match) => {
  111. return `<span style="color: #3a7fe9;">${match}</span>`;
  112. });
  113. }
  114. async function handlePlay(opt) {
  115. emits('play-audio', opt)
  116. }
  117. function handlePindu() {
  118. data.isPindu = true
  119. }
  120. function handleYinjie() {
  121. data.isPindu = false
  122. }
  123. function goXiangjie() {
  124. uni.redirectTo({
  125. url: '/pages/newEnglish/components/xiangjie?jieId='+props.pageData.jieId+'&wordId='+props.pageData.activeId
  126. })
  127. }
  128. </script>
  129. <style>
  130. </style>