|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div
|
|
|
v-if="height"
|
|
|
- class="Module wordDetailChs"
|
|
|
+ class="wordDetailModule wordDetailChs"
|
|
|
:style="{
|
|
|
height: height,
|
|
|
maxHeight: height,
|
|
|
@@ -55,9 +55,10 @@
|
|
|
:key="'new_word_' + conindex"
|
|
|
>
|
|
|
<Strockplayredline
|
|
|
+ :key="conItem + detailIndex + conindex"
|
|
|
:Book_text="conItem"
|
|
|
:playStorkes="true"
|
|
|
- :targetDiv="'bwcHanziIntp' + detailIndex + conindex"
|
|
|
+ :targetDiv="'bwcHanziIntp' + conItem + detailIndex + conindex"
|
|
|
:wordNum="data.new_word.length"
|
|
|
:themeColor="themeColor"
|
|
|
/>
|
|
|
@@ -92,7 +93,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="zhedie-white">
|
|
|
- <div v-if="data.list1.length > 0">
|
|
|
+ <div v-if="list1 && list1.length > 0" v-loading="loading1">
|
|
|
<div class="topTitle">
|
|
|
<span>本课例句</span>
|
|
|
<span @click="handleChangeTab('wordShow')"
|
|
|
@@ -107,7 +108,7 @@
|
|
|
</div>
|
|
|
<el-collapse-transition>
|
|
|
<div class="liju" v-show="wordShow">
|
|
|
- <div v-for="(item, i) in data.list1" :key="i">
|
|
|
+ <div v-for="(item, i) in list1" :key="i">
|
|
|
<div>{{ i + 1 }}.</div>
|
|
|
<div>
|
|
|
<p v-html="item.res"></p>
|
|
|
@@ -119,7 +120,7 @@
|
|
|
</div>
|
|
|
</el-collapse-transition>
|
|
|
</div>
|
|
|
- <div v-if="data.list2.length > 0">
|
|
|
+ <div v-if="list2 && list2.length > 0" v-loading="loading2">
|
|
|
<div class="topTitle">
|
|
|
<span>本书例句</span>
|
|
|
<span @click="handleChangeTab('wordShow2')"
|
|
|
@@ -134,8 +135,8 @@
|
|
|
</div>
|
|
|
<el-collapse-transition>
|
|
|
<div class="liju" v-show="wordShow2">
|
|
|
- <div v-for="(item, i) in data.list2" :key="i">
|
|
|
- <div>{{ i + 1 }}.</div>
|
|
|
+ <div v-for="(item, i) in list2" :key="i">
|
|
|
+ <div>{{ list1.length + i + 1 }}.</div>
|
|
|
<div>
|
|
|
<p v-html="item.res"></p>
|
|
|
<p class="p2">
|
|
|
@@ -146,7 +147,7 @@
|
|
|
</div>
|
|
|
</el-collapse-transition>
|
|
|
</div>
|
|
|
- <div v-if="data.list3.length > 0">
|
|
|
+ <div v-if="list3 && list3.length > 0" v-loading="loading3">
|
|
|
<div class="topTitle">
|
|
|
<span>本套教材例句</span>
|
|
|
<span @click="handleChangeTab('wordShow3')"
|
|
|
@@ -160,8 +161,8 @@
|
|
|
</div>
|
|
|
<el-collapse-transition>
|
|
|
<div class="liju" v-if="wordShow3">
|
|
|
- <div v-for="(item, i) in data.list3" :key="i">
|
|
|
- <div>{{ data.list3.length + i + 1 }}.</div>
|
|
|
+ <div v-for="(item, i) in list3" :key="i">
|
|
|
+ <div>{{ list1.length + list2.length + i + 1 }}.</div>
|
|
|
<div>
|
|
|
<p>{{ item.sentence }}</p>
|
|
|
<p class="p2">
|
|
|
@@ -217,9 +218,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="module-bottom">
|
|
|
- <Intp :word="data" :themeColor="themeColor" />
|
|
|
- </div>
|
|
|
+ <Intp :word="data" :themeColor="themeColor" :type="type" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -228,6 +227,7 @@
|
|
|
import Strockplayredline from "./Strockplayredline.vue";
|
|
|
import Audio from "./AudioRed.vue";
|
|
|
import Intp from "./Intp.vue";
|
|
|
+import { getContent } from "@/api/ajax";
|
|
|
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
@@ -238,7 +238,6 @@ export default {
|
|
|
},
|
|
|
props: [
|
|
|
"data",
|
|
|
- "curQue",
|
|
|
"changeDetailIndex",
|
|
|
"closeWord",
|
|
|
"detailIndex",
|
|
|
@@ -246,6 +245,9 @@ export default {
|
|
|
"getWordLiju",
|
|
|
"optionRes",
|
|
|
"themeColor",
|
|
|
+ "isSuccess",
|
|
|
+ "currentTreeID",
|
|
|
+ "type",
|
|
|
],
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
@@ -256,8 +258,13 @@ export default {
|
|
|
wordShow2: true,
|
|
|
wordShow3: true,
|
|
|
list1: [],
|
|
|
+ list2: [],
|
|
|
+ list3: [],
|
|
|
isShow: false,
|
|
|
old_word: "",
|
|
|
+ loading1: false,
|
|
|
+ loading2: false,
|
|
|
+ loading3: false,
|
|
|
};
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
@@ -292,20 +299,63 @@ export default {
|
|
|
},
|
|
|
// 下一个单词详情
|
|
|
nextDetail() {
|
|
|
- if (this.detailIndex == this.optionRes.length - 1) {
|
|
|
+ let _this = this;
|
|
|
+ if (_this.detailIndex == _this.optionRes.length - 1) {
|
|
|
this.$message.warning("当前已经是最后一个了 ");
|
|
|
return;
|
|
|
}
|
|
|
- if (this.old_word != this.data.new_word) {
|
|
|
- this.isShow = false;
|
|
|
- setTimeout(() => {
|
|
|
- this.changeDetailIndex("next");
|
|
|
- this.getWordLiju();
|
|
|
- }, 50);
|
|
|
- }
|
|
|
+ _this.changeDetailIndex("next");
|
|
|
+ },
|
|
|
+ viewIntp() {
|
|
|
+ this.loading1 = true;
|
|
|
+ this.loading2 = true;
|
|
|
+ this.loading3 = true;
|
|
|
+ let Mname =
|
|
|
+ "book-courseware_manager-GetCoursewareWordExampleSentenceList";
|
|
|
+ // 获取本课的 本教材的 本套的 的例句
|
|
|
+ getContent(Mname, {
|
|
|
+ courseware_id: this.currentTreeID, // 课件id
|
|
|
+ word: this.data.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, {
|
|
|
+ courseware_id: this.currentTreeID, // 课件id
|
|
|
+ word: this.data.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, {
|
|
|
+ courseware_id: this.currentTreeID, // 课件id
|
|
|
+ word: this.data.new_word, //生词
|
|
|
+ search_scope: 2, //检索范围0 本课件 1本教材 2本套
|
|
|
+ is_contain_word_variants: false,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.loading3 = false;
|
|
|
+ this.list3 = this.handleExample(res.sentence_list);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading3 = false;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading2 = false;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading1 = false;
|
|
|
+ });
|
|
|
},
|
|
|
handleExample(list) {
|
|
|
- list.map((item, index) => {
|
|
|
+ list = list.map((item, index) => {
|
|
|
let b = item.begin_position;
|
|
|
let e = item.end_position;
|
|
|
let sent = item.sentence;
|
|
|
@@ -317,21 +367,12 @@ export default {
|
|
|
item.res = res;
|
|
|
return item;
|
|
|
});
|
|
|
+ return list;
|
|
|
},
|
|
|
+
|
|
|
initData() {
|
|
|
- // if (this.curQue) {
|
|
|
- // this.isShow = true;
|
|
|
- if (this.data.list1 && this.data.list1.length > 0) {
|
|
|
- this.handleExample(this.data.list1);
|
|
|
- }
|
|
|
- if (this.data.list2 && this.data.list2.length > 0) {
|
|
|
- this.handleExample(this.data.list2);
|
|
|
- }
|
|
|
- if (this.data.list3 && this.data.list3.length > 0) {
|
|
|
- this.handleExample(this.data.list3);
|
|
|
- }
|
|
|
- this.old_word = this.optionRes ? this.optionRes.new_word : "";
|
|
|
- //}
|
|
|
+ console.log(this.data);
|
|
|
+ this.viewIntp();
|
|
|
let Fathernode = document.getElementsByClassName(
|
|
|
"NPC-Big-Book-preview"
|
|
|
)[0];
|
|
|
@@ -369,22 +410,17 @@ export default {
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
/* @import url(); 引入css类 */
|
|
|
-.Module {
|
|
|
- position: fixed;
|
|
|
+.wordDetailModule {
|
|
|
width: 100%;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
z-index: 999;
|
|
|
background: rgba(0, 0, 0, 0.33);
|
|
|
overflow-y: scroll;
|
|
|
+
|
|
|
.module-inner {
|
|
|
- position: fixed;
|
|
|
- top: 0%;
|
|
|
- left: 50%;
|
|
|
- margin-left: -394px;
|
|
|
+ padding: 30px 0;
|
|
|
> div {
|
|
|
width: 788px;
|
|
|
- margin-left: 36px;
|
|
|
+ margin: 0 auto;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
|
|
|
border-radius: 8px;
|
|
|
@@ -486,8 +522,8 @@ export default {
|
|
|
margin-right: 8px;
|
|
|
word-break: normal;
|
|
|
}
|
|
|
- .content-voices{
|
|
|
- width: 16px;
|
|
|
+ .content-voices {
|
|
|
+ width: 16px;
|
|
|
}
|
|
|
}
|
|
|
}
|
guanchunjie