|
|
@@ -1,17 +1,10 @@
|
|
|
<template>
|
|
|
- <div
|
|
|
- v-if="height"
|
|
|
- class="Module"
|
|
|
- :style="{
|
|
|
- height: height,
|
|
|
- maxHeight: height,
|
|
|
- }"
|
|
|
- >
|
|
|
+ <div class="Module">
|
|
|
<div class="module-inner">
|
|
|
- <div class="top" v-if="data">
|
|
|
+ <div class="top" v-if="detail">
|
|
|
<div class="operation">
|
|
|
<div>
|
|
|
- <img
|
|
|
+ <!-- <img
|
|
|
style="margin-right: 8px"
|
|
|
src="../../assets/Left-16-normal-Black.png"
|
|
|
alt=""
|
|
|
@@ -23,7 +16,7 @@
|
|
|
alt=""
|
|
|
@click="nextDetail"
|
|
|
v-if="!notshowNext"
|
|
|
- />
|
|
|
+ /> -->
|
|
|
<img
|
|
|
@click="closeWordShow"
|
|
|
src="../../assets/Cross-16-normal-Black.png"
|
|
|
@@ -32,16 +25,16 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="wordDetail">
|
|
|
- <p class="word">{{ data.new_word }}</p>
|
|
|
- <div class="yinpin" v-if="data.pinyin">
|
|
|
- <span> /{{ data.pinyin }}/</span>
|
|
|
+ <p class="word">{{ detail.new_word.new_word }}</p>
|
|
|
+ <div class="yinpin" v-if="detail.new_word.pinyin">
|
|
|
+ <span> /{{ detail.new_word.pinyin }}/</span>
|
|
|
<img
|
|
|
@click="palyAudio('deafult')"
|
|
|
:src="playBtn == 'deafult' ? voicePlaySrc : voicePauseSrc"
|
|
|
alt=""
|
|
|
v-if="
|
|
|
- data.mp3_list &&
|
|
|
- data.mp3_list.length > 0 &&
|
|
|
+ detail.new_word.mp3_list &&
|
|
|
+ detail.new_word.mp3_list.length > 0 &&
|
|
|
playWord == 'deafult' &&
|
|
|
voiceSrc
|
|
|
"
|
|
|
@@ -50,27 +43,35 @@
|
|
|
@click="palyAudio('deafult')"
|
|
|
:src="voicePauseSrc"
|
|
|
alt=""
|
|
|
- v-else-if="data.mp3_list && data.mp3_list.length > 0"
|
|
|
+ v-else-if="
|
|
|
+ detail.new_word.mp3_list && detail.new_word.mp3_list.length > 0
|
|
|
+ "
|
|
|
/>
|
|
|
<audio
|
|
|
- v-if="data.mp3_list && data.mp3_list.length > 0"
|
|
|
+ v-if="
|
|
|
+ detail.new_word.mp3_list && detail.new_word.mp3_list.length > 0
|
|
|
+ "
|
|
|
id="deafult"
|
|
|
- :src="data.mp3_list[0].id"
|
|
|
+ :src="detail.new_word.mp3_list[0].id"
|
|
|
></audio>
|
|
|
</div>
|
|
|
- <p class="jieshu" v-for="(fy, i) in data.definition_list" :key="i">
|
|
|
+ <p
|
|
|
+ class="jieshu"
|
|
|
+ v-for="(fy, i) in detail.new_word.definition_list"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
<template v-if="fy.indexOf('. ') > -1">
|
|
|
<i>{{ fy.substring(0, fy.indexOf(". ") + 2) }}</i>
|
|
|
<span
|
|
|
>{{ fy.substring(fy.indexOf(". ") + 2, fy.length)
|
|
|
}}{{
|
|
|
- i == data.definition_list.length - 1 ? "" : "；"
|
|
|
+ i == detail.new_word.definition_list.length - 1 ? "" : "；"
|
|
|
}}</span
|
|
|
>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<span>{{
|
|
|
- i == data.definition_list.length - 1 ? fy : fy + "；"
|
|
|
+ i == detail.new_word.definition_list.length - 1 ? fy : fy + "；"
|
|
|
}}</span>
|
|
|
</template>
|
|
|
</p>
|
|
|
@@ -78,14 +79,10 @@
|
|
|
<div class="zhedie">
|
|
|
<div v-if="list1 && list1.length > 0">
|
|
|
<div class="topTitle">
|
|
|
- <span>本课例句（{{list1.length}}）</span>
|
|
|
+ <span>本课例句（{{ list1.length }}）</span>
|
|
|
<span @click="handleChangeTab('wordShow')"
|
|
|
>{{ wordShow ? "收起" : "展开" }}
|
|
|
- <img
|
|
|
- v-if="wordShow"
|
|
|
- src="../../assets/down-black.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <img v-if="wordShow" src="../../assets/down-black.png" alt="" />
|
|
|
<img
|
|
|
v-else
|
|
|
class="rotate"
|
|
|
@@ -99,8 +96,7 @@
|
|
|
<div v-for="(item, i) in list1" :key="i">
|
|
|
<div>{{ i + 1 }}.</div>
|
|
|
<div style="flex: 1">
|
|
|
- <p v-html="item.res">
|
|
|
- </p>
|
|
|
+ <p v-html="item.res"></p>
|
|
|
<p class="p2">
|
|
|
来源：{{ item.source_courseware_name_path }}
|
|
|
</p>
|
|
|
@@ -111,7 +107,7 @@
|
|
|
</div>
|
|
|
<div v-if="list2 && list2.length > 0">
|
|
|
<div class="topTitle">
|
|
|
- <span>本书例句（{{list2.length}}）</span>
|
|
|
+ <span>本书例句（{{ list2.length }}）</span>
|
|
|
<span @click="handleChangeTab('wordShow2')"
|
|
|
>{{ wordShow2 ? "收起" : "展开" }}
|
|
|
<img
|
|
|
@@ -132,7 +128,7 @@
|
|
|
<div v-for="(item, i) in list2" :key="i">
|
|
|
<div>{{ i + 1 }}.</div>
|
|
|
<div style="flex: 1">
|
|
|
- <p v-html="item.res">
|
|
|
+ <p v-html="item.res"></p>
|
|
|
<p class="p2">
|
|
|
来源：{{ item.source_courseware_name_path }}
|
|
|
</p>
|
|
|
@@ -143,7 +139,7 @@
|
|
|
</div>
|
|
|
<div v-if="list3 && list3.length > 0">
|
|
|
<div class="topTitle">
|
|
|
- <span>本套教材例句（{{list3.length}}）</span>
|
|
|
+ <span>本套教材例句（{{ list3.length }}）</span>
|
|
|
<span @click="handleChangeTab('wordShow3')"
|
|
|
>{{ wordShow3 ? "收起" : "展开" }}
|
|
|
<img
|
|
|
@@ -164,7 +160,7 @@
|
|
|
<div v-for="(item, i) in list3" :key="i">
|
|
|
<div>{{ list3.length + i + 1 }}.</div>
|
|
|
<div style="flex: 1">
|
|
|
- <p v-html="item.res">
|
|
|
+ <p v-html="item.res"></p>
|
|
|
<p class="p2">
|
|
|
来源：{{ item.source_courseware_name_path }}
|
|
|
</p>
|
|
|
@@ -175,34 +171,32 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="bottom" v-if="data && data.endata">
|
|
|
+ <div class="bottom" v-if="dictDetail">
|
|
|
<div class="from">
|
|
|
来自网易有道<img
|
|
|
@click="closeWordShow"
|
|
|
src="../../assets/Cross-16-normal-Black.png"
|
|
|
alt=""
|
|
|
- v-if="!data"
|
|
|
+ v-if="!dictDetail"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="wordDetail">
|
|
|
<p class="word">
|
|
|
- {{
|
|
|
- data.endata && data.endata["query"]
|
|
|
- ? data.endata["query"]
|
|
|
- : data.new_word
|
|
|
- }}
|
|
|
+ {{ dictDetail["query"] }}
|
|
|
</p>
|
|
|
<div class="yinpin">
|
|
|
<div class="yinpin-box">
|
|
|
<span>英 </span>
|
|
|
- <span v-if='data.endata["uk-phonetic"]'> /{{ data.endata["uk-phonetic"] }}/</span>
|
|
|
+ <span v-if="dictDetail['uk-phonetic']">
|
|
|
+ /{{ dictDetail["uk-phonetic"] }}/</span
|
|
|
+ >
|
|
|
<img
|
|
|
@click="palyAudio('Y')"
|
|
|
:src="playBtn == 'Y' ? voicePlaySrc : voicePauseSrc"
|
|
|
alt=""
|
|
|
v-if="
|
|
|
- data.endata &&
|
|
|
- data.endata['uk-sound'] &&
|
|
|
+ dictDetail &&
|
|
|
+ dictDetail['uk-sound'] &&
|
|
|
playWord == 'Y' &&
|
|
|
voiceSrc
|
|
|
"
|
|
|
@@ -211,20 +205,22 @@
|
|
|
@click="palyAudio('Y')"
|
|
|
:src="voicePauseSrc"
|
|
|
alt=""
|
|
|
- v-else-if="data.endata && data.endata['uk-sound']"
|
|
|
+ v-else-if="dictDetail"
|
|
|
/>
|
|
|
- <audio id="Y" :src="data.endata['uk-sound']"></audio>
|
|
|
+ <audio id="Y" :src="dictDetail['uk-sound']"></audio>
|
|
|
</div>
|
|
|
<div>
|
|
|
<span>美 </span>
|
|
|
- <span v-if='data.endata["us-phonetic"]'> /{{ data.endata["us-phonetic"] }}/</span>
|
|
|
+ <span v-if="dictDetail['us-phonetic']">
|
|
|
+ /{{ dictDetail["us-phonetic"] }}/</span
|
|
|
+ >
|
|
|
<img
|
|
|
@click="palyAudio('M')"
|
|
|
:src="playBtn == 'M' ? voicePlaySrc : voicePauseSrc"
|
|
|
alt=""
|
|
|
v-if="
|
|
|
- data.endata &&
|
|
|
- data.endata['us-sound'] &&
|
|
|
+ dictDetail &&
|
|
|
+ dictDetail['us-sound'] &&
|
|
|
playWord == 'M' &&
|
|
|
voiceSrc
|
|
|
"
|
|
|
@@ -233,12 +229,12 @@
|
|
|
@click="palyAudio('M')"
|
|
|
:src="voicePauseSrc"
|
|
|
alt=""
|
|
|
- v-else-if="data.endata && data.endata['us-sound']"
|
|
|
+ v-else-if="dictDetail && dictDetail['us-sound']"
|
|
|
/>
|
|
|
- <audio id="M" :src="data.endata['us-sound']"></audio>
|
|
|
+ <audio id="M" :src="dictDetail['us-sound']"></audio>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="jieshu" v-for="(fy, i) in data.endata.part" :key="i">
|
|
|
+ <div class="jieshu" v-for="(fy, i) in dictDetail.part" :key="i">
|
|
|
<i>
|
|
|
{{ fy.part }}
|
|
|
</i>
|
|
|
@@ -255,19 +251,11 @@
|
|
|
<script>
|
|
|
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
-import { LearnWebSI, getContent } from "@/api/ajax";
|
|
|
+import { getBookWebContent, getLearnWebContent } from "@/api/ajax";
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
components: {},
|
|
|
- props: [
|
|
|
- "data",
|
|
|
- "curQue",
|
|
|
- "changeDetailIndex",
|
|
|
- "closeWord",
|
|
|
- "detailIndex",
|
|
|
- "notshowNext",
|
|
|
- "currentTreeID"
|
|
|
- ],
|
|
|
+ props: ["closeWord", "collId", "currentTreeID"],
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
@@ -285,6 +273,9 @@ export default {
|
|
|
voicePauseSrc: require("../../assets/play-red.png"),
|
|
|
voicePlaySrc: require("../../assets/icon-voice-play-red.png"),
|
|
|
collFlag: false,
|
|
|
+ loading: false,
|
|
|
+ detail: null,
|
|
|
+ dictDetail: null,
|
|
|
};
|
|
|
},
|
|
|
// 计算属性 类似于data概念
|
|
|
@@ -347,28 +338,27 @@ export default {
|
|
|
let Mname =
|
|
|
"book-courseware_manager-GetCoursewareWordExampleSentenceList";
|
|
|
// 获取本课的 本教材的 本套的 的例句
|
|
|
- getContent(Mname, {
|
|
|
+ getBookWebContent(Mname, {
|
|
|
courseware_id: this.currentTreeID, // 课件id
|
|
|
- word: this.data.new_word, //生词
|
|
|
+ word: this.detail.new_word.new_word, //生词
|
|
|
search_scope: 0, //检索范围0 本课件 1本教材 2本套
|
|
|
is_contain_word_variants: false,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.loading1 = false;
|
|
|
this.list1 = this.handleExample(res.sentence_list);
|
|
|
- console.log(this.list1);
|
|
|
- getContent(Mname, {
|
|
|
+ getBookWebContent(Mname, {
|
|
|
courseware_id: this.currentTreeID, // 课件id
|
|
|
- word: this.data.new_word, //生词
|
|
|
+ word: this.detail.new_word.new_word, //生词
|
|
|
search_scope: 1, //检索范围0 本课件 1本教材 2本套
|
|
|
is_contain_word_variants: false,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.loading2 = false;
|
|
|
this.list2 = this.handleExample(res.sentence_list);
|
|
|
- getContent(Mname, {
|
|
|
+ getBookWebContent(Mname, {
|
|
|
courseware_id: this.currentTreeID, // 课件id
|
|
|
- word: this.data.new_word, //生词
|
|
|
+ word: this.detail.new_word.new_word, //生词
|
|
|
search_scope: 2, //检索范围0 本课件 1本教材 2本套
|
|
|
is_contain_word_variants: false,
|
|
|
})
|
|
|
@@ -390,46 +380,82 @@ export default {
|
|
|
},
|
|
|
// 处理例句高亮数据
|
|
|
handleExample(list) {
|
|
|
- let _this = this;
|
|
|
- // let list1Ora = JSON.parse(JSON.stringify(_this.data.list1))
|
|
|
- list = list.map((item,index) =>{
|
|
|
- let position_str = []
|
|
|
- let sentence = JSON.parse(JSON.stringify(item.sentence))
|
|
|
- let res = ""
|
|
|
- for(let i=0;i<item.position_list.length;i++){
|
|
|
- let part1 = "";
|
|
|
- let part2 = "";
|
|
|
- let part3 = "";
|
|
|
- if(item.position_list.length>1){
|
|
|
- if(i==0){
|
|
|
- part1 = sentence.substring(0, item.position_list[i].begin);
|
|
|
- part2 = sentence.substring(item.position_list[i].begin,item.position_list[i].end);
|
|
|
- part3 = sentence.substring(item.position_list[i].end,item.position_list[i+1].begin)
|
|
|
- }else if(i==item.position_list.length-1){
|
|
|
- part1 = "";
|
|
|
- part2 = sentence.substring(item.position_list[i].begin,item.position_list[i].end);
|
|
|
- part3 = sentence.substring(item.position_list[i].end)
|
|
|
- }else{
|
|
|
- part1 = "";
|
|
|
- part2 = sentence.substring(item.position_list[i].begin,item.position_list[i].end);
|
|
|
- part3 = sentence.substring(item.position_list[i].end,item.position_list[i+1].begin)
|
|
|
- }
|
|
|
- }else{
|
|
|
- part1 = sentence.substring(0, item.position_list[i].begin);
|
|
|
- part2 = sentence.substring(item.position_list[i].begin,item.position_list[i].end);
|
|
|
- part3 = sentence.substring(item.position_list[i].end)
|
|
|
- }
|
|
|
- res += part1 + '<span style="color:#DE4444;">' + part2 + "</span>" + part3;
|
|
|
+ let _this = this;
|
|
|
+ // let list1Ora = JSON.parse(JSON.stringify(_this.data.list1))
|
|
|
+ list = list.map((item, index) => {
|
|
|
+ let position_str = [];
|
|
|
+ let sentence = JSON.parse(JSON.stringify(item.sentence));
|
|
|
+ let res = "";
|
|
|
+ for (let i = 0; i < item.position_list.length; i++) {
|
|
|
+ let part1 = "";
|
|
|
+ let part2 = "";
|
|
|
+ let part3 = "";
|
|
|
+ if (item.position_list.length > 1) {
|
|
|
+ if (i == 0) {
|
|
|
+ part1 = sentence.substring(0, item.position_list[i].begin);
|
|
|
+ part2 = sentence.substring(
|
|
|
+ item.position_list[i].begin,
|
|
|
+ item.position_list[i].end
|
|
|
+ );
|
|
|
+ part3 = sentence.substring(
|
|
|
+ item.position_list[i].end,
|
|
|
+ item.position_list[i + 1].begin
|
|
|
+ );
|
|
|
+ } else if (i == item.position_list.length - 1) {
|
|
|
+ part1 = "";
|
|
|
+ part2 = sentence.substring(
|
|
|
+ item.position_list[i].begin,
|
|
|
+ item.position_list[i].end
|
|
|
+ );
|
|
|
+ part3 = sentence.substring(item.position_list[i].end);
|
|
|
+ } else {
|
|
|
+ part1 = "";
|
|
|
+ part2 = sentence.substring(
|
|
|
+ item.position_list[i].begin,
|
|
|
+ item.position_list[i].end
|
|
|
+ );
|
|
|
+ part3 = sentence.substring(
|
|
|
+ item.position_list[i].end,
|
|
|
+ item.position_list[i + 1].begin
|
|
|
+ );
|
|
|
}
|
|
|
- item.res = res;
|
|
|
- return item
|
|
|
- })
|
|
|
- return list;
|
|
|
+ } else {
|
|
|
+ part1 = sentence.substring(0, item.position_list[i].begin);
|
|
|
+ part2 = sentence.substring(
|
|
|
+ item.position_list[i].begin,
|
|
|
+ item.position_list[i].end
|
|
|
+ );
|
|
|
+ part3 = sentence.substring(item.position_list[i].end);
|
|
|
+ }
|
|
|
+ res +=
|
|
|
+ part1 + '<span style="color:#DE4444;">' + part2 + "</span>" + part3;
|
|
|
+ }
|
|
|
+ item.res = res;
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ return list;
|
|
|
+ },
|
|
|
+ getMyCollection() {
|
|
|
+ this.loading = true;
|
|
|
+ let Mname = "order-collection_manager-GetMyCollection";
|
|
|
+ let data = {
|
|
|
+ id: this.collId,
|
|
|
+ };
|
|
|
+ getLearnWebContent(Mname, data).then((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ this.detail = res;
|
|
|
+ if (res.new_word.definition_dictionary_json) {
|
|
|
+ let dictDetail = JSON.parse(res.new_word.definition_dictionary_json);
|
|
|
+ this.dictDetail = dictDetail.data;
|
|
|
+ console.log(this.dictDetail);
|
|
|
+ }
|
|
|
+ this.viewIntp();
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
- this.viewIntp();
|
|
|
+ this.getMyCollection();
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {
|
|
|
@@ -461,14 +487,6 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
/* @import url(); 引入css类 */
|
|
|
.Module {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- max-height: 100% !important;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- z-index: 999;
|
|
|
- background: rgba(0, 0, 0, 0.33);
|
|
|
- overflow-y: scroll;
|
|
|
.module-inner {
|
|
|
// position: fixed;
|
|
|
// top: 0%;
|
|
|
@@ -497,8 +515,8 @@ export default {
|
|
|
> :nth-child(3) {
|
|
|
margin-right: 16px;
|
|
|
}
|
|
|
- > :last-child{
|
|
|
- margin-right: 0;
|
|
|
+ > :last-child {
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
|
gcj