Merge branch 'lhd'

# Conflicts:
#	src/views/book/courseware/preview/components/new_word/components/WordPhraseDetail.vue

src/api/app.js

@@ -108,3 +108,7 @@ export async function fileUpload(
 export function GetStaticResources(MethodName, data) {
   return http.post(`/GCLSFileServer/ServiceInterface?MethodName=${MethodName}`, data);
 }
+
+export function GetBookWebSIContent (MethodName, data) {
+  return http.post(`/GCLSBookWebSI/ServiceInterface?MethodName=${MethodName}`, data);
+}

src/views/book/courseware/create/components/question/new_word/NewWord.vue

@@ -16,11 +16,7 @@
         </el-table-column>
         <el-table-column fixed prop="new_word" label="生词/短语" width="110">
           <template slot-scope="scope">
-            <RichText
-              v-model="scope.row.new_word"
-              :inline="true"
-              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
-            />
+            <el-input v-model="scope.row.new_word"></el-input>
           </template>
         </el-table-column>
         <el-table-column prop="mp3_list" label="读音" width="200">
@@ -54,11 +50,7 @@
         </el-table-column>
         <el-table-column prop="pinyin" label="拼音" width="110">
           <template slot-scope="scope">
-            <RichText
-              v-model="scope.row.pinyin"
-              :inline="true"
-              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
-            />
+            <el-input v-model="scope.row.pinyin"></el-input>
           </template>
         </el-table-column>
         <el-table-column prop="cixing" label="词性" width="110">

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -62,22 +62,17 @@
                     </template>
                     <div v-else style="width: 16px; height: 16px; margin-left: 8px"></div>
                   </div>
-                  <template
-                    v-if="
-                      data.property.pinyin_position &&
-                      (data.property.pinyin_position == 'top' || data.property.pinyin_position == 'bottom')
-                    "
-                  >
+                  <template v-if="sItem.pinyin_site && (sItem.pinyin_site == 'top' || sItem.pinyin_site == 'bottom')">
                     <div class="NPC-word-tab-box">
                       <span
-                        v-if="data.property.pinyin_position == 'top'"
+                        v-if="sItem.pinyin_site == 'top'"
                         class="NPC-word-tab-common NPC-word-tab-pinyin"
                         v-html="sItem.pinyin"
                       >
                       </span>
                       <span class="NPC-word-tab-common NPC-word-tab-word" v-html="sItem.new_word"> </span>
                       <span
-                        v-if="data.property.pinyin_position == 'bottom'"
+                        v-if="sItem.pinyin_site == 'bottom'"
                         class="NPC-word-tab-common NPC-word-tab-pinyin"
                         v-html="sItem.pinyin"
                       >
@@ -92,14 +87,14 @@
                   </template>
                   <template v-else>
                     <span
-                      v-if="!data.property.pinyin_position || data.property.pinyin_position == 'front'"
+                      v-if="!sItem.pinyin_site || sItem.pinyin_site == 'first'"
                       class="NPC-word-tab-common NPC-word-tab-pinyin"
                       v-html="sItem.pinyin"
                     >
                     </span>
                     <span class="NPC-word-tab-common NPC-word-tab-word" v-html="sItem.new_word"> </span>
                     <span
-                      v-if="data.property.pinyin_position == 'back'"
+                      v-if="sItem.pinyin_site == 'last'"
                       class="NPC-word-tab-common NPC-word-tab-pinyin"
                       v-html="sItem.pinyin"
                     >
@@ -124,9 +119,9 @@
                       @handleWav="handleWav"
                     />
                   </span>
-                  <!-- <span v-if="isEnable(data.property.is_has_infor)">
+                  <span v-if="isEnable(data.property.is_has_infor)">
                     <img src="@/assets/detail-icon.png" class="detail-icon" @click="showDetail(sItem)" />
-                  </span> -->
+                  </span>
                   <div v-if="sItem.collocation" class="collocation">
                     <span>搭配：</span><b v-html="sItem.collocation"></b>
                   </div>
@@ -141,20 +136,20 @@
             </ul>
           </div>
         </el-collapse-transition>
-        <!-- <div class="practiceBox" v-if="detailShow">
-      <WordPhraseDetail
-        :data="data"
-        :changeDetailIndex="changeDetailIndex"
-        :closeWord="closeWordShow"
-        :detailIndex="detailIndex"
-        :optionRes="optionRes"
-        :themeColor="themeColor"
-        :currentTreeID="currentTreeID"
-        :bg="data && data.bg ? data.bg : null"
-        :ed="data && data.ed ? data.ed : null"
-        type="newWordDetail"
-      />
-    </div> -->
+        <div class="practiceBox" v-if="detailShow">
+          <WordPhraseDetail
+            :data="dataWord"
+            :changeDetailIndex="changeDetailIndex"
+            :closeWord="closeWordShow"
+            :detailIndex="detailIndex"
+            :optionRes="optionRes"
+            :themeColor="'red'"
+            :currentTreeID="courseware_id"
+            :bg="dataWord && dataWord.bg ? dataWord.bg : null"
+            :ed="dataWord && dataWord.ed ? dataWord.ed : null"
+            type="newWordDetail"
+          />
+        </div>
         <audio ref="newwordAudio"></audio>
       </div>
     </div>
@@ -168,15 +163,17 @@ import PreviewMixin from '../common/PreviewMixin';
 import SoundRecord from '../../common/SoundRecord.vue';
 import AudioLine from '../voice_matrix/components/AudioLine.vue';
 import { GetFileURLMap } from '@/api/app';
+import WordPhraseDetail from './components/WordPhraseDetail.vue';
 
 export default {
   name: 'NewWordPreview',
   components: {
     SoundRecord,
     AudioLine,
+    WordPhraseDetail,
   },
   mixins: [PreviewMixin],
-  // inject: ['courseware_id'],
+  inject: ['courseware_id'],
   data() {
     return {
       data: getNewWordData(),
@@ -515,7 +512,7 @@ export default {
         }
 
         .NPC-word-tab-pinyin {
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
 
           // white-space: nowrap;
           font-size: 12px;
@@ -535,7 +532,7 @@ export default {
         }
 
         .NPC-word-tab-word {
-          font-family: 'FZJCGFKTK';
+          font-family: '楷体';
           font-size: 16px;
           white-space: nowrap;
 
@@ -624,7 +621,7 @@ export default {
           > b,
           > div b {
             flex: 1;
-            font-family: 'robot', 'FZJCGFKTK', 'alabo';
+            font-family: 'robot', '楷体', 'alabo';
             font-size: 16px;
             font-weight: 400;
             line-height: 24px;

src/views/book/courseware/preview/components/new_word/components/Strockplayredline.vue

@@ -0,0 +1,134 @@
+<!--  -->
+<template>
+  <div class="strockplay-redInner">
+    <div v-if="playStorkes" :class="['strock-play-box']" @click="playHanzi">
+      <SvgIcon icon-class="hanzi-strock-play" class="strock-play-btn" />
+    </div>
+    <div class="character-target-box">
+      <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
+      <div :id="targetDiv" :ref="targetDiv" class="character-target-div"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetStaticResources } from '@/api/app';
+const HanziWriter = require('hanzi-writer');
+export default {
+  components: {},
+  props: ['targetDiv', 'Book_text', 'playStorkes', 'strokeColor', 'wordNum', 'themeColor'],
+  data() {
+    return {
+      writer: null,
+    };
+  },
+  computed: {},
+  watch: {
+    targetDiv: {
+      handler: function (val, oldVal) {
+        if (val != oldVal) {
+          let _this = this;
+          _this.$nextTick(() => {
+            _this.initHanziwrite();
+          });
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+  },
+  //方法集合
+  methods: {
+    initHanziwrite() {
+      let _this = this;
+      _this.writer = null;
+      //var ren = require("hanzi-writer-data/国");
+      _this.writer = HanziWriter.default.create(_this.targetDiv, _this.Book_text, {
+        charDataLoader: function (char, onComplete) {
+          let MethodName = 'hz_resource_manager-GetHZStrokesContent';
+          let data = {
+            hz: char,
+          };
+          GetStaticResources(MethodName, data).then((res) => {
+            onComplete(res);
+          });
+        },
+        padding: 5,
+        showOutline: true,
+        strokeColor: _this.strokeColor ? _this.strokeColor : '#000',
+      });
+    },
+    playHanzi(event) {
+      let _this = this;
+      _this.writer.animateCharacter();
+      event.stopPropagation();
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
+    _this.$nextTick(() => {
+      _this.initHanziwrite();
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.strockplay-redInner {
+  position: relative;
+  box-sizing: border-box;
+  width: 128px; // 444px
+  height: 128px; // 480px
+}
+
+.character-target-div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.character-target-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.character-target-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: #dedede;
+}
+
+.strock-play-box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 11px;
+  height: 11px;
+  color: #e81b1b;
+  cursor: pointer;
+}
+</style>

src/views/book/courseware/preview/components/new_word/components/WordPhraseDetail.vue

@@ -12,13 +12,13 @@
               /> -->
               <img
                 style="margin-right: 8px"
-                src="../../../../assets/icon/Left-16-normal-Black.png"
+                src="@/assets/word_detail/Left-16-normal-Black.png"
                 alt=""
                 @click="lastDetail"
                 v-if="!notshowNext"
               />
               <img
-                src="../../../../assets/icon/Right-16-normal-Black.png"
+                src="@/assets/word_detail/Right-16-normal-Black.png"
                 alt=""
                 @click="nextDetail"
                 v-if="!notshowNext"
@@ -27,12 +27,12 @@
             <img
               style="margin-right: 0"
               @click="closeWordShow"
-              src="../../../../assets/icon/Cross-16-normal-Black.png"
+              src="@/assets/word_detail/Cross-16-normal-Black.png"
               alt=""
             />
           </div>
         </div>
-        <div class="wordDetail">
+        <div class="wordDetail" v-if="data.new_word_str">
           <div
             :class="[
               'bwc-Strockplay',
@@ -45,7 +45,7 @@
                 :key="conItem + detailIndex + conindex"
                 :Book_text="conItem"
                 :playStorkes="true"
-                :targetDiv="'bwcHanziIntp' + conItem + detailIndex + conindex"
+                :targetDiv="'bwcHanziIntp' + conItem + conindex"
                 :wordNum="data.new_word_str.length"
                 :themeColor="themeColor"
               />
@@ -66,7 +66,7 @@
           </p>
           <div class="wordInfor">
             <div class="yinpin">
-              <span class="pinyintext"> {{ data.pinyin.toLowerCase() }}</span>
+              <span class="pinyintext" v-html="data.pinyin.toLowerCase()"></span>
               <template v-if="data.newWordMp3">
                 <Audio :mp3="data.newWordMp3" :themeColor="themeColor" :bg="bg" :ed="ed" />
               </template>
@@ -77,7 +77,7 @@
                 <Audio :mp3="data.mp3Url" :themeColor="themeColor" :bg="bg" :ed="ed" />
               </template>
             </div>
-            <p class="jieshu" v-for="(fy, i) in data.definition_list" :key="i" v-html="fy"></p>
+            <p class="jieshu" v-html="data.definition_list"></p>
           </div>
         </div>
         <div class="zhedie-white">
@@ -155,9 +155,8 @@
 
 <script>
 import Strockplayredline from './Strockplayredline.vue';
-import Audio from './AudioRed.vue';
-import { getContent, getHZChineseInfo, getContentFile } from '../../../../api/ajax';
-import html2canvas from 'html2canvas';
+import Audio from '../../voice_matrix/components/AudioRed.vue';
+import { GetBookWebSIContent } from '@/api/app';
 
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -215,9 +214,9 @@ export default {
         const _this = this;
         if (val) {
           _this.initData();
-          if (_this.type == 'newWordDetail') {
-            _this.getChineseInfo();
-          }
+          // if (_this.type == 'newWordDetail') {
+          //   _this.getChineseInfo();
+          // }
         }
       },
       // 深度观察监听
@@ -226,50 +225,6 @@ export default {
   },
   //方法集合
   methods: {
-    downloadImage() {
-      var cutArea = $('.cut-area');
-      let dom = $('.liju_main');
-      let dataURL = '';
-      html2canvas(dom[0]).then((canvas) => {
-        {
-          // 将生成的 canvas 放入到 dom 中, 这里可以做画布操作
-          cutArea.append(canvas);
-          // 将操作完成的画布转化为 base64 编码的文件
-          dataURL = canvas.toDataURL('image/png');
-          // 将文件设置到下载区, 点击就能下载了
-          const a = document.createElement('a');
-          a.download = '例句.png';
-          a.href = dataURL;
-          a.click();
-          window.URL.revokeObjectURL(dataURL);
-          a.remove();
-        }
-      });
-    },
-    sortEvent(index, key) {
-      this.sortIndex = index;
-      if (this.lijuIndex == 0) {
-        this.CurrentList = JSON.parse(JSON.stringify(this.allList[key]));
-      } else if (this.lijuIndex == 1) {
-        this.CurrentList = JSON.parse(JSON.stringify(this.list1[key]));
-      } else if (this.lijuIndex == 2) {
-        this.CurrentList = JSON.parse(JSON.stringify(this.list2[key]));
-      } else if (this.lijuIndex == 3) {
-        this.CurrentList = JSON.parse(JSON.stringify(this.list3[key]));
-      }
-    },
-    // 切换模式
-    cutPattern(index) {
-      if (index == this.lijuPatternIndex) {
-        return;
-      }
-      this.lijuPatternIndex = index;
-      if (this.lijuPatternIndex == 1) {
-        this.sortEvent(0, 'sentence_list_sort_left');
-      } else {
-        this.cutLiju(this.lijuIndex, true);
-      }
-    },
     // 切换 例句
     cutLiju(index, type) {
       if (index == this.lijuIndex && !type) {
@@ -324,6 +279,7 @@ export default {
     // 下一个单词详情
     nextDetail() {
       let _this = this;
+
       if (_this.detailIndex == _this.optionRes.length - 1) {
         this.$message.warning('当前已经是最后一个了 ');
         return;
@@ -336,7 +292,7 @@ export default {
       this.loading3 = true;
       let Mname = 'book-courseware_manager-GetCoursewareWordExampleSentenceList_Sort';
       // 获取本课的 本教材的 本套的 的例句
-      getContent(Mname, {
+      GetBookWebSIContent(Mname, {
         courseware_id: this.currentTreeID, // 课件id
         word: this.data.new_word, //生词
         search_scope: 0, //检索范围0 本课件  1本教材 2本套
@@ -387,7 +343,7 @@ export default {
             //   this.list1.sentence_list_sort_right
             // );
           }
-          getContent(Mname, {
+          GetBookWebSIContent(Mname, {
             courseware_id: this.currentTreeID, // 课件id
             word: this.data.new_word, //生词
             search_scope: 1, //检索范围0 本课件  1本教材 2本套
@@ -431,7 +387,7 @@ export default {
                 // );
               }
 
-              getContent(Mname, {
+              GetBookWebSIContent(Mname, {
                 courseware_id: this.currentTreeID, // 课件id
                 word: this.data.new_word, //生词
                 search_scope: 2, //检索范围0 本课件  1本教材 2本套
@@ -670,6 +626,14 @@ export default {
       // }</span>`;
     },
     initData() {
+      // 去掉生词里的标点
+      let new_word_str = '';
+      for (let i = 0; i < this.data.new_word.length; i++) {
+        if (/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(this.data.new_word[i])) {
+          new_word_str += this.data.new_word[i];
+        }
+      }
+      this.data.new_word_str = new_word_str;
       this.viewIntp();
     },
     handleChangeTab(flag) {
@@ -680,10 +644,10 @@ export default {
       let data = {
         query: _this.data.new_word,
       };
-      getHZChineseInfo(data).then((res) => {
-        _this.dataDetail = res.data.result;
-        _this.handleChineseDetail();
-      });
+      // getHZChineseInfo(data).then((res) => {
+      //   _this.dataDetail = res.data.result;
+      //   _this.handleChineseDetail();
+      // });
     },
     // 处理数据
     handleChineseDetail() {
@@ -697,11 +661,11 @@ export default {
                 if (itemss.key == 'pronunciation') {
                   // 音频
                   let Mname = 'tool-TextToVoiceFile';
-                  getContentFile(Mname, {
-                    text: this.word.detail.new_word,
-                  }).then((res) => {
-                    _this.mp3Url = res.file_url;
-                  });
+                  // getContentFile(Mname, {
+                  //   text: this.word.detail.new_word,
+                  // }).then((res) => {
+                  //   _this.mp3Url = res.file_url;
+                  // });
                   // _this.data.mp3Url = itemss.objects[0]["@value"]
                   //   ? itemss.objects[0]["@value"]
                   //   : "";
@@ -714,16 +678,7 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 去掉生词里的标点
-    let new_word_str = '';
-    for (let i = 0; i < this.data.new_word.length; i++) {
-      if (/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(this.data.new_word[i])) {
-        new_word_str += this.data.new_word[i];
-      }
-    }
-    this.data.new_word_str = new_word_str;
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
@@ -860,7 +815,7 @@ export default {
       .bwc-tolength {
         padding: 40px 0;
         margin: 0 37px 16px 0;
-        font-family: "FZJCGFKTK";
+        font-family: '楷体';
         font-size: 30px;
         line-height: 1.5;
         color: #404040;
@@ -992,14 +947,14 @@ export default {
 
             > :nth-child(1) {
               margin-right: 6px;
-              font-family: 'FZJCGFKTK';
+              font-family: '楷体';
               line-height: 24px;
               text-align: right;
             }
 
             p {
               margin: 0;
-              font-family: 'FZJCGFKTK';
+              font-family: '楷体';
               font-size: 16px;
               line-height: 24px;
               color: rgba(0, 0, 0, 85%);
@@ -1153,7 +1108,7 @@ export default {
                 height: 22px;
                 margin-left: 16px;
                 overflow: hidden;
-                font-family: 'FZJCGFKTK';
+                font-family: '楷体';
                 font-size: 14px;
                 font-weight: 400;
                 line-height: 22px;
@@ -1286,7 +1241,6 @@ export default {
     .zhedie-white {
       .topTitle {
         box-sizing: border-box;
-        box-sizing: border-box;
         height: 40px;
         background: #fff !important;
         border: 1px solid rgba(0, 0, 0, 10%);
@@ -1301,7 +1255,6 @@ export default {
     .zhedie-white {
       .topTitle {
         box-sizing: border-box;
-        box-sizing: border-box;
         height: 40px;
         background: #fff !important;
         border: 1px solid rgba(0, 0, 0, 10%);
@@ -1316,7 +1269,6 @@ export default {
     .zhedie-white {
       .topTitle {
         box-sizing: border-box;
-        box-sizing: border-box;
         height: 40px;
         background: #fff !important;
         border: 1px solid rgba(0, 0, 0, 10%);