Dialogue

src/components/Adult/inputModules/ArticleTemChs/index.vue

@@ -142,6 +142,8 @@ export default {
         name: "课文",
         model: 1,
         pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
+        mp3_list: [],
+        img_list: [],
         article: "",
         detail: [],
         wordTime: [

src/components/Adult/inputModules/DialogueArticleChs/index.vue

@@ -218,6 +218,8 @@ export default {
         name: "课文",
         model: 1,
         pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
+        mp3_list: [],
+        img_list: [],
         article: "",
         roleList: [],
         detail: [],

src/components/Adult/preview/DialogueArticleViewChs/NormalModelChs.vue

@@ -1,7 +1,12 @@
 <!--  -->
 <template>
   <div class="NNPE-ArticleView" v-if="curQue">
-    <div v-if="curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
+    <div
+      class="aduioLine-box"
+      v-if="
+        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url
+      "
+    >
       <AudioLine
         :mp3="curQue.mp3_list[0].url"
         :getCurTime="getCurTime"
@@ -10,25 +15,30 @@
     </div>
     <template v-if="resArr.length > 0">
       <div class="NPC-sentences-list">
+        <div class="NPC-article-empty">
+          <div class="empty-left"></div>
+          <div class="empty-right"></div>
+        </div>
         <div
-          :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
+          :class="[
+            'NNPE-detail',
+            item.isTitle ? 'NNPE-detail-title' : '',
+            curTime >= item.timeList[0].bg &&
+            curTime <= item.timeList[item.timeList.length - 1].ed
+              ? 'active'
+              : '',
+          ]"
           v-for="(item, index) in resArr"
           :key="'detail' + index"
         >
-          <div
-            :class="[
-              'article-content',
-              index == 0 ? 'paraFirst' : '',
-              index == resArr.length - 1 ? 'paraLast' : '',
-            ]"
-          >
+          <div class="article-content">
             <RoleChs :curRole="item.roleDetail" />
             <div class="wordsList-box">
               <img
                 :src="articleImg[index]"
                 v-if="articleImg[0] && index == 0"
               />
-              <div>
+              <div :style="{ background: item.roleDetail.color.bg }">
                 <div
                   class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
@@ -53,9 +63,12 @@
                           <span
                             class="NNPE-chs"
                             :class="[
-                              curTime >= item.timeList[pItem.sentIndex].bg &&
+                              curTime >=
+                                item.timeList[pItem.sentIndex].wordsResultList[
+                                  pItem.wordIndex
+                                ].wordBg &&
                               curTime <= item.timeList[pItem.sentIndex].ed
-                                ? 'active'
+                                ? 'wordActive'
                                 : '',
                             ]"
                             >{{ pItem.chs }}</span
@@ -69,9 +82,12 @@
                             class="NNPE-chs"
                             style="text-align: left"
                             :class="[
-                              curTime >= item.timeList[pItem.sentIndex].bg &&
+                              curTime >=
+                                item.timeList[pItem.sentIndex].wordsResultList[
+                                  pItem.wordIndex
+                                ].wordBg &&
                               curTime <= item.timeList[pItem.sentIndex].ed
-                                ? 'active'
+                                ? 'wordActive'
                                 : '',
                             ]"
                             >{{ item.wordsList[pIndex + 1].chs }}</span
@@ -90,9 +106,12 @@
                         <span
                           class="NNPE-chs"
                           :class="[
-                            curTime >= item.timeList[pItem.sentIndex].bg &&
+                            curTime >=
+                              item.timeList[pItem.sentIndex].wordsResultList[
+                                pItem.wordIndex
+                              ].wordBg &&
                             curTime <= item.timeList[pItem.sentIndex].ed
-                              ? 'active'
+                              ? 'wordActive'
                               : '',
                             pItem.padding ? 'padding' : '',
                           ]"
@@ -114,10 +133,17 @@
               <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
             </div>
           </div>
-          <div class="remarkBox" :class="index == 0 ? 'remark72' : 'remark40'">
+          <div class="remarkBox remark-top">
             <RemarkChs :remarkDetail="item.remarkDetail" />
           </div>
         </div>
+        <div class="NPC-article-empty NPC-article-empty-bottom">
+          <div class="empty-left"></div>
+          <div class="empty-right"></div>
+        </div>
+        <div class="dia-article-record">
+          <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" />
+        </div>
       </div>
     </template>
   </div>
@@ -128,13 +154,15 @@ import { timeStrToSen } from "@/utils/index";
 import AudioLine from "../AudioLine.vue";
 import RoleChs from "./RoleChs.vue";
 import RemarkChs from "./RemarkChs.vue";
+import Soundrecord from "../Soundrecord.vue";
 export default {
   name: "DialogueNormalModelChs",
-  props: ["curQue"],
+  props: ["curQue", "colorBox"],
   components: {
     AudioLine,
     RoleChs,
     RemarkChs,
+    Soundrecord,
   },
   data() {
     return {
@@ -154,6 +182,7 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    handleWav() {},
     getCurTime(curTime) {
       this.curTime = curTime * 1000;
     },
@@ -223,8 +252,18 @@ export default {
     //获取角色
     getRole(dItem) {
       let roleIndex = dItem.roleIndex;
-      let resArr = this.curQue.roleList.filter((item) => item.id == roleIndex);
-      return resArr[0];
+      let resObj = null;
+      let roleList = JSON.parse(JSON.stringify(this.curQue.roleList));
+      for (let i = 0; i < roleList.length; i++) {
+        let item = roleList[i];
+        if (item.id == roleIndex) {
+          resObj = item;
+          resObj.color = this.colorBox[i];
+          break;
+        }
+      }
+
+      return resObj;
     },
     //判断是否有padding
     judgePad(sItem, wItem, curIndex) {
@@ -283,6 +322,38 @@ export default {
 .NNPE-ArticleView {
   width: 100%;
   .NPC-sentences-list {
+    .NPC-article-empty {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      > div {
+        height: 24px;
+        &.empty-left {
+          width: 553px;
+          box-sizing: border-box;
+          border-right: 1px rgba(0, 0, 0, 0.1) solid;
+        }
+        &.empty-right {
+          flex: 1;
+        }
+      }
+      &-bottom {
+        > div {
+          height: 40px;
+        }
+      }
+    }
+    .dia-article-record {
+      width: 100%;
+      border-top: 1px solid rgba(0, 0, 0, 0.1);
+      .luyin-box {
+        justify-content: start;
+        padding: 8px 12px;
+        height: 40px;
+        width: 280px;
+        justify-content: flex-start;
+      }
+    }
   }
   .NNPE-detail {
     clear: both;
@@ -290,21 +361,20 @@ export default {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
+    &.active {
+      background: rgba(0, 0, 0, 0.06);
+    }
     .article-content {
       width: 553px;
       box-sizing: border-box;
       border-right: 1px rgba(0, 0, 0, 0.1) solid;
-      padding: 8px 23px;
-      &.paraFirst {
-        padding-top: 32px;
-      }
+      padding: 8px 0px 8px 23px;
       &.paraLast {
-        padding-bottom: 32px;
+        padding-bottom: 24px;
       }
     }
     .NNPE-words {
       float: left;
-      padding: 0 0px 8px 0px;
       &-box {
         float: left;
         > span {
@@ -328,6 +398,9 @@ export default {
             &.active {
               background: rgba(60, 200, 99, 0.2);
             }
+            &.wordActive {
+              color: #de4444;
+            }
           }
           &.padding {
             padding: 0 3px;
@@ -361,6 +434,9 @@ export default {
           &.active {
             background: rgba(60, 200, 99, 0.2);
           }
+          &.wordActive {
+            color: #de4444;
+          }
         }
         &.padding {
           padding: 0 3px;
@@ -397,7 +473,7 @@ export default {
         float: left;
         border: 1px solid rgba(0, 0, 0, 0.1);
         box-sizing: border-box;
-        padding: 8px 12px 0px 12px;
+        padding: 8px 12px 8px 12px;
         border-radius: 8px;
       }
       > img {
@@ -414,8 +490,8 @@ export default {
     &.remark72 {
       padding-top: 72px;
     }
-    &.remark40 {
-      padding-top: 40px;
+    &.remark-top {
+      padding-top: 44px;
     }
   }
 }

src/components/Adult/preview/DialogueArticleViewChs/RoleChs.vue

@@ -1,9 +1,12 @@
 <!--  -->
 <template>
   <div class="role-rItem" v-if="curRole">
-    <span v-if="curRole.role" class="adult-book-input-roleText">{{
-      curRole.role
-    }}</span>
+    <span
+      v-if="curRole.role"
+      class="adult-book-input-roleText"
+      :style="{ background: this.curRole.color.touxiang }"
+      >{{ curRole.role }}</span
+    >
     <img
       v-else
       :src="curRole.img_list[0] && curRole.img_list[0].url"
@@ -72,16 +75,21 @@ export default {
   align-items: center;
   .adult-book-input {
     &-roleText {
-      width: 40px;
-      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 36px;
+      height: 36px;
       background: #a7a7a7;
       border-radius: 100%;
       text-align: center;
-      line-height: 40px;
+      line-height: 20px;
+      font-size: 20px;
+      color: #ffffff;
     }
     &-roleImg {
-      width: 40px;
-      height: 40px;
+      width: 36px;
+      height: 36px;
     }
   }
   .pinyin {
@@ -89,15 +97,14 @@ export default {
     font-size: 14px;
     line-height: 22px;
     color: rgba(0, 0, 0, 0.85);
-    margin-right: 8px;
+    margin-right: 4px;
     margin-left: 8px;
   }
   .chs {
     font-family: "FZJCGFKTK";
     font-size: 16px;
     line-height: 24px;
-    color: #000000;
-    margin-right: 16px;
+    color: rgba(0, 0, 0, 0.85);
   }
 }
 </style>

src/components/Adult/preview/DialogueArticleViewChs/index.vue

@@ -49,6 +49,7 @@
         :wordFontsize="wordFontsize"
         :bodyLeft="bodyLeft"
         :bodyWidth="bodyWidth"
+        :colorBox="colorBox"
         v-if="!showPhrases && !showPractice && !showWord"
       />
       <PhraseModel
@@ -56,12 +57,14 @@
         :titleFontsize="titleFontsize"
         :wordFontsize="wordFontsize"
         :NNPENewWordList="NNPENewWordList"
+        :colorBox="colorBox"
         v-if="showPhrases"
       />
       <Practice
         :curQue="curQue"
         :titleFontsize="titleFontsize"
         :wordFontsize="wordFontsize"
+        :colorBox="colorBox"
         v-if="showPractice"
       />
       <WordModel
@@ -71,6 +74,7 @@
         :bodyLeft="bodyLeft"
         :bodyWidth="bodyWidth"
         :NNPENewWordList="NNPENewWordList"
+        :colorBox="colorBox"
         v-if="showWord"
       />
     </div>
@@ -98,6 +102,7 @@ export default {
       wordFontsize: 16, // 文章内容字号初始值
       bodyLeft: 0,
       bodyWidth: 0,
+      resColorArr: [],
       colorBox: [
         {
           touxiang: "#72B51D",
@@ -153,6 +158,7 @@ export default {
   mounted() {
     console.log("我是文章预览");
     console.log(this.curQue);
+
     this.$nextTick(() => {
       this.bodyLeft = this.$refs.ArticleViewbody.getBoundingClientRect().left;
     });

src/components/Adult/preview/Soundrecord.vue

@@ -13,7 +13,7 @@
           selectIndex || selectIndex == 0 ? 'record-black' : '',
         ]"
         v-if="type && type == 'normal'"
-        >{{isPlaying?'-':''}}{{ handleDateTime(recordtime) }}</span
+        >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span
       >
       <div class="line" v-if="type && type == 'normal'"></div>
       <div
@@ -72,7 +72,7 @@
           microphoneStatus ? 'record-ing' : '',
           selectIndex || selectIndex == 0 ? 'record-black' : '',
         ]"
-        >{{isPlaying?'-':''}}{{ handleDateTime(recordtime) }}</span
+        >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span
       >
       <el-select
         v-model="selectIndex"
@@ -143,19 +143,19 @@ export default {
         this.recorder.start();
         this.microphoneStatus = true;
         this.recordtime = 0;
-        this.isPlaying = false
+        this.isPlaying = false;
         clearInterval(_this.timer);
         _this.timer = setInterval(() => {
           _this.recordtime++;
         }, 1000);
         this.$emit("handleParentPlay");
         let obj = {
-            name: "新录音" + _this.recordFile,
-            id: _this.recordFile + Math.round(Math.random()*10),
-          };
-          _this.recordList.push(obj);
-          _this.recordFile++;
-          _this.selectIndex = _this.recordList.length - 1;
+          name: "新录音" + _this.recordFile,
+          id: _this.recordFile + Math.round(Math.random() * 10),
+        };
+        _this.recordList.push(obj);
+        _this.recordFile++;
+        _this.selectIndex = _this.recordList.length - 1;
       } else {
         this.hasMicro = "normal";
         this.recorder.stop();
@@ -178,20 +178,20 @@ export default {
         var reader = new window.FileReader();
         reader.readAsDataURL(wav);
         reader.onloadend = function () {
-            _this.recordList[_this.selectIndex].wavData = reader.result
-            _this.recordList[_this.selectIndex].toltime = Math.floor(toltime)
-            _this.recordList[_this.selectIndex].fileSize = fileSize
-        //   if (
-        //     (_this.type && _this.type == "normal") ||
-        //     (_this.type && _this.type == "mini")
-        //   ) {
-            _this.wavblob = _this.recordList[_this.selectIndex].wavData;
-        //   }
+          _this.recordList[_this.selectIndex].wavData = reader.result;
+          _this.recordList[_this.selectIndex].toltime = Math.floor(toltime);
+          _this.recordList[_this.selectIndex].fileSize = fileSize;
+          //   if (
+          //     (_this.type && _this.type == "normal") ||
+          //     (_this.type && _this.type == "mini")
+          //   ) {
+          _this.wavblob = _this.recordList[_this.selectIndex].wavData;
+          //   }
         };
       }
     },
     playmicrophone(totalTimes) {
-        this.isPlaying = true
+      this.isPlaying = true;
       if (this.selectIndex || this.selectIndex == 0) {
         let totalTime = totalTimes;
         let _this = this;
@@ -271,7 +271,8 @@ export default {
     handleDelete() {
       if (this.selectIndex || this.selectIndex == 0) {
         this.recordList.splice(this.selectIndex, 1);
-        this.selectIndex = this.recordList.length>1?this.recordList.length-1:null;
+        this.selectIndex =
+          this.recordList.length > 1 ? this.recordList.length - 1 : null;
         this.hasMicro = "";
         this.recordtime = 0;
       }
@@ -292,14 +293,14 @@ export default {
     let _this = this;
     _this.audio.addEventListener("play", function () {
       _this.changeStatus("active");
-      _this.isPlaying = true
+      _this.isPlaying = true;
     });
     _this.audio.addEventListener("pause", function () {
       _this.changeStatus("normal");
     });
     _this.audio.addEventListener("ended", function () {
       _this.changeStatus("normal");
-      _this.isPlaying = false
+      _this.isPlaying = false;
     });
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -340,12 +341,12 @@ export default {
       background-size: 100%;
     }
   }
-  .line{
-      width: 1px;
-      height: 16px;
-      background: rgba(0, 0, 0, 0.85);
-      opacity: 0.2;
-      margin-left: 8px;
+  .line {
+    width: 1px;
+    height: 16px;
+    background: rgba(0, 0, 0, 0.85);
+    opacity: 0.2;
+    margin-left: 8px;
   }
   .record {
     width: 24px;
@@ -359,10 +360,10 @@ export default {
         no-repeat;
       background-size: 16px;
     }
-    &.active:hover{
-        background: url("../../../assets/newImage/common/luyin-stop.png") center
+    &.active:hover {
+      background: url("../../../assets/newImage/common/luyin-stop.png") center
         no-repeat;
-        background-size: 16px;
+      background-size: 16px;
     }
   }
   .record-time {
@@ -408,14 +409,13 @@ export default {
     }
     .el-input__inner {
       height: 24px;
-      line-height: 24px;
-      background: #f2f2f2;
+      line-height: 22px;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      box-sizing: border-box;
       border-radius: 4px;
-      padding: 3px 4px;
-      border: none;
+      padding: 0px 11px;
       font-size: 14px;
-      line-height: 18px;
-      color: #000;
+      color: rgba(0, 0, 0, 0.85);
     }
     .el-input {
       .el-select__caret {

src/views/adultInput.vue

@@ -434,6 +434,13 @@ export default {
       fn_type: "",
       cur_fn_data: null, //当前模块的数据结构
       cur_page_queIsEdit: [], //当前页数的某个题
+      org_question_list: [
+        {
+          name: "tab1",
+          title: "第1页",
+          cur_fn_data: [],
+        },
+      ], //总的数据列表
       question_list: [
         {
           name: "tab1",
@@ -578,9 +585,12 @@ export default {
       let data = {
         id,
       };
+      console.log(this.question_list);
       getContent(MethodName, data)
         .then((res) => {
-          this.question_list = JSON.parse(res.content);
+          this.question_list = res.content
+            ? JSON.parse(res.content)
+            : JSON.parse(JSON.stringify(this.org_question_list));
           this.cur_page_que_index =
             this.question_list[this.tabIndex].cur_fn_data.length - 1;
         })