<template>
|
<div class="woedPage">
|
<div class="wordMenu">
|
<el-tree
|
ref="catalogTree"
|
default-expand-all="true"
|
:expand-on-click-node="false"
|
:data="catalogueList"
|
:props="defaultProps"
|
current-node-key="2"
|
v-if="catalogueList.length > 0"
|
@node-click="handleNodeClick1"
|
>
|
</el-tree>
|
<div v-else>
|
<el-empty :image-size="60" description="暂无数据" />
|
</div>
|
</div>
|
<div class="wordContent">
|
<div class="tabs-box">
|
<div
|
:class="activeName == 'study' ? 'activeName tabs-Item' : 'tabs-Item'"
|
@click="handleClick('study')"
|
>
|
学习模式
|
</div>
|
<div
|
:class="activeName == 'recite' ? 'activeName tabs-Item' : 'tabs-Item'"
|
@click="handleClick('recite')"
|
>
|
背诵模式
|
</div>
|
</div>
|
<div class="lists-study" v-if="activeName == 'study'">
|
<div v-for="result in wordLists" :key="result">
|
<div class="list-title">{{ result.word }}</div>
|
<div class="list-con">
|
<div class="phone_con">
|
<div class="per-phone">
|
英 <span>/{{ result.ukPhone }}/</span
|
><img :src="sound" class="soundBtn hover" @click="soundWord(result.word)" />
|
</div>
|
<div class="per-phone">
|
美 <span>/{{ result.usPhone }}/</span
|
><img :src="sound" class="soundBtn hover" @click="soundWord(result.word)" />
|
</div>
|
</div>
|
<div class="trans">
|
<div v-for="item in result.trans" :key="item">
|
<div class="itemList">
|
<div class="pos">{{ item.pos }}.</div>
|
<div class="tranCn">{{ item.tranCn }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="lists-recite" v-if="activeName == 'recite'">
|
<div class="setting">
|
<el-select v-model="showData" placeholder="Select" style="width: 120px">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<img :src="setting" class="settingImg" />
|
</div>
|
<div class="list-box">
|
<div v-for="(result, index) in wordLists" :key="result" class="list-con">
|
<div class="list-title hover" @click="isShow = index">
|
<div class="" v-if="showData == 'newWord'">{{ result.word }}</div>
|
<div class="trans" v-if="showData == 'translation'">
|
<div v-for="item in result.trans" :key="item">
|
<div class="itemList">
|
<div class="pos">{{ item.pos }}.</div>
|
<div class="tranCn">{{ item.tranCn }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="boxCon" v-show="isShow == index">
|
<div class="word" v-if="showData == 'translation'">{{ result.word }}</div>
|
<div class="phone_con" >
|
<div class="per-phone">
|
英 <span>/{{ result.ukPhone }}/</span
|
><img :src="sound" class="soundBtn hover" @click="soundWord(result.word)" />
|
</div>
|
<div class="per-phone">
|
美 <span>/{{ result.usPhone }}/</span
|
><img :src="sound" class="soundBtn hover" @click="soundWord(result.word)" />
|
</div>
|
</div>
|
<div class="trans" v-if="showData == 'newWord'">
|
<div v-for="item in result.trans" :key="item">
|
<div class="itemList">
|
<div class="pos">{{ item.pos }}.</div>
|
<div class="tranCn">{{ item.tranCn }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { ref, reactive, watch, onMounted, inject } from 'vue'
|
import sound from '@/assets/images/operation/sound.png'
|
import setting from '@/assets/images/operation/setting.png'
|
import axios from 'axios'
|
const MG: any = inject('MG')
|
const props = defineProps<{ resourceUrl: string }>()
|
const activeName = ref('study')
|
const catalogueList = ref([])
|
const wordData = ref([])
|
const wordLists = ref([])
|
const showData = ref('newWord')
|
const isShow = ref(null)
|
const options = [
|
{
|
value: 'newWord',
|
label: '显示生词'
|
},
|
{
|
value: 'translation',
|
label: '显示译文'
|
}
|
]
|
onMounted(() => {
|
getWordListData()
|
})
|
|
const defaultProps = {
|
children: 'children',
|
label: 'label'
|
}
|
|
const getWordListData = () => {
|
console.log(props, 2)
|
axios
|
.get(props.resourceUrl + '/newWords.json')
|
.then(function (response) {
|
// 处理获取到的json数据
|
console.log(response.data, '单词')
|
catalogueList.value = response.data
|
wordData.value = response.data[0].children[0].words
|
getSearchResult()
|
})
|
.catch(function (error) {
|
console.log(error)
|
})
|
}
|
|
const handleNodeClick1 = (data) => {
|
wordData.value = []
|
isShow.value = null
|
if (data.words) {
|
wordData.value = data.words
|
}
|
console.log(wordData.value, 22)
|
getSearchResult()
|
}
|
|
const handleClick = (type) => {
|
activeName.value = type
|
}
|
|
const getSearchResult = () => {
|
let wordList = []
|
if (wordData.value.length > 0) {
|
wordData.value.forEach((item) => {
|
wordList.push({
|
word: item,
|
isFull: false
|
})
|
})
|
}
|
MG.edu.findWords(wordList).then((res) => {
|
console.log(res)
|
if (res.length > 0) {
|
wordLists.value = []
|
res.forEach((item) => {
|
console.log(item)
|
if (item[0]) {
|
wordLists.value.push({
|
word: item[0].word,
|
usPhone: item[0].usPhone,
|
ukPhone: item[0].ukPhone,
|
trans: JSON.parse(item[0].trans)
|
})
|
}
|
})
|
}
|
})
|
}
|
|
const soundWord = (word) => {
|
window.speechSynthesis.cancel()
|
const synth = window.speechSynthesis
|
const utterances = new SpeechSynthesisUtterance(word)
|
// utterances.lang = 'EN' // 设置语言为中文
|
synth.speak(utterances)
|
}
|
</script>
|
|
<style lang="less">
|
.woedPage {
|
height: 100%;
|
overflow-y: auto;
|
display: flex;
|
.wordMenu {
|
height: 100%;
|
width: 300px;
|
border-right: 1px solid #ececec;
|
.el-tree-node__label {
|
padding: 5px 0;
|
}
|
}
|
.wordContent {
|
padding: 10px 20px;
|
flex: 1;
|
.tabs-box {
|
width: 100%;
|
display: flex;
|
background: #f5f6f9;
|
border-radius: 10px;
|
padding: 5px;
|
.tabs-Item {
|
flex: 1;
|
text-align: center;
|
padding: 10px;
|
font-size: 16px;
|
border-radius: 7px;
|
cursor: pointer;
|
}
|
.activeName {
|
background: #fff;
|
}
|
}
|
.lists-study {
|
padding: 10px 0;
|
.list-title {
|
font-weight: bold;
|
padding: 10px;
|
|
}
|
.list-con {
|
padding: 10px 15px;
|
background: #f3faff;
|
border-radius: 5px;
|
.phone_con {
|
display: flex;
|
.per-phone {
|
margin-right: 20px;
|
align-items: center;
|
display: flex;
|
span {
|
padding: 0 10px;
|
}
|
}
|
.soundBtn {
|
width: 16px;
|
height: 14px;
|
}
|
}
|
.trans {
|
margin-top: 10px;
|
.itemList {
|
align-items: center;
|
display: flex;
|
margin: 10px 0;
|
.pos {
|
min-width: 30px;
|
padding:2px 5px;
|
line-height: 16px;
|
text-align: center;
|
background: rgba(90, 180, 246, 0.18);
|
border-radius: 11px;
|
font-family: FZQiTi-S14T, FZQiTi-S14T;
|
font-size: 16px;
|
color: #0093ff;
|
}
|
.tranCn {
|
padding-left: 10px;
|
flex: 1;
|
}
|
}
|
}
|
}
|
}
|
.lists-recite {
|
.setting {
|
padding: 10px 0;
|
text-align: right;
|
align-items: center;
|
display: flex;
|
justify-content: flex-end;
|
|
.settingImg {
|
height: 16px;
|
width: 16px;
|
margin-left: 10px;
|
}
|
}
|
.list-con {
|
padding: 10px 15px;
|
margin: 10px 0;
|
background: #f3faff;
|
border-radius: 5px;
|
.list-title {
|
div,.tranCn{
|
font-weight: bold;
|
}
|
}
|
.boxCon {
|
background: #fff;
|
border-radius: 5px;
|
padding: 10px;
|
margin-top: 10px;
|
.word{
|
font-weight: bold;
|
}
|
}
|
.phone_con {
|
display: flex;
|
margin-top:5px;
|
.per-phone {
|
margin-right: 20px;
|
align-items: center;
|
display: flex;
|
span {
|
padding: 0 10px;
|
}
|
}
|
.soundBtn {
|
width: 16px;
|
height: 14px;
|
}
|
}
|
.trans {
|
.itemList {
|
align-items: center;
|
display: flex;
|
margin: 10px 0;
|
.pos {
|
min-width: 30px;
|
padding:2px 5px;
|
line-height: 16px;
|
text-align: center;
|
background: rgba(90, 180, 246, 0.18);
|
border-radius: 11px;
|
font-family: FZQiTi-S14T, FZQiTi-S14T;
|
font-size: 16px;
|
color: #0093ff;
|
}
|
.tranCn {
|
padding-left: 10px;
|
flex: 1;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
