输入+录音

src/components/Adult/preview/InputHasRecord.vue

@@ -1,15 +1,119 @@
 <!--  -->
 <template>
-  <div class="Big-Book-prev-Textdes InputHasRecord" v-if="curQue">
-      <div v-for="(items, indexs) in curQue.option" :key="indexs">
-          <p v-if="items.con">{{items.con}}</p>
-          <div class="inputInner">
-              <el-input :class="['textarea',items.record?'':'textareaNoRecord']" type="textarea" v-model="textareaCon" placeholder="输入"></el-input>
-              <div v-if="items.record" class="luyin-inner">
-                  <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box"/>
-              </div>
-          </div>
-      </div>
+  <div class="Big-Book-prev-Textdes InputHasRecord NPC-zhedie" v-if="curQue">
+      <template v-if="curQue.guide">
+          <el-collapse v-model="wordShow">
+                <el-collapse-item name="1">
+                    <template #title>
+                    <div class="topTitle">
+                        <div class="NPC-top-left">
+                        <span class="NPC-topTitle-text">{{ curQue.guide }}</span>
+                        </div>
+                        <div class="NPC-top-right">
+                        <span class="NPC-top-right-text">{{
+                            wordShow.indexOf("1") != -1 ? "收起" : "展开"
+                        }}</span>
+                        <img
+                            v-if="wordShow.indexOf('1') != -1"
+                            src="../../../assets/NPC/down.png"
+                            alt=""
+                        />
+                        <img
+                            v-else
+                            class="rotate"
+                            src="../../../assets/NPC/down.png"
+                            alt=""
+                        />
+                        </div>
+                    </div>
+                    </template>
+                    <div
+                    class="NPC-word-list"
+                    v-if="curQue.option && curQue.option.length > 0"
+                    >
+                        <h2 v-if="curQue.title">{{curQue.title}}</h2>
+                        <div v-for="(items, indexs) in curQue.option" :key="indexs">
+                            <div class="item-content">
+                                    <b class="xuhao" v-if="items.number">{{items.number}}</b>
+                                    <template v-if="items.detail.wordsList.length==0">
+                                        <p :class="['content-con',items.font]" v-if="items.detail.sentence">{{items.detail.sentence}}</p>
+                                    </template>
+                                    <template v-else>
+                                        <div class="con-box">
+                                            <div :class="['con-item',indexCon===0?'con-item-0':'']" v-for="(itemCon,indexCon) in items.detail.resArr" :key="indexCon" v-show="itemCon.isShow">
+                                                <template v-if="items.detail.wordsList[indexCon + 1] && items.detail.wordsList[indexCon + 1].chs && chsFhList.indexOf(items.detail.wordsList[indexCon + 1].chs) > -1">
+                                                    <div class="synthesis-box">
+                                                        <div>
+                                                            <span class="pinyin">{{itemCon.pinyin}}</span>
+                                                            <span class="hanzi content-con">{{itemCon.chs}}</span>
+                                                        </div>
+                                                        <div style="text-align: left">
+                                                            <span class="pinyin">{{items.detail.wordsList[indexCon + 1].pinyin}}</span>
+                                                            <span class="hanzi content-con">{{items.detail.wordsList[indexCon + 1].chs}}</span>
+                                                        </div>
+                                                    </div>
+                                                    
+                                                </template>
+                                                <template v-else>
+                                                    <span class="pinyin">{{itemCon.pinyin}}</span>
+                                                    <span class="hanzi content-con">{{itemCon.chs}}</span>
+                                                </template>
+                                            </div>
+                                            </div>
+                                    </template>
+                                </div>
+                            <div class="inputInner">
+                                <el-input :class="['textarea',items.record?'':'textareaNoRecord']" type="textarea" v-model="textareaCon" placeholder="输入"></el-input>
+                                <div v-if="items.record" class="luyin-inner">
+                                    <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box"/>
+                                </div>
+                            </div>
+                        </div>
+                </div>
+                </el-collapse-item>
+            </el-collapse>
+      </template>
+      <template v-else>
+            <h2 v-if="curQue.title" style="margin-top:0">{{curQue.title}}</h2>
+            <div v-for="(items, indexs) in curQue.option" :key="indexs">
+                <div class="item-content">
+                        <b class="xuhao" v-if="items.number">{{items.number}}</b>
+                        <template v-if="items.detail.wordsList.length==0">
+                            <p :class="['content-con',items.font]" v-if="items.detail.sentence">{{items.detail.sentence}}</p>
+                        </template>
+                        <template v-else>
+                            <div class="con-box">
+                                <div :class="['con-item',indexCon===0?'con-item-0':'']" v-for="(itemCon,indexCon) in items.detail.resArr" :key="indexCon" v-show="itemCon.isShow">
+                                    <template v-if="items.detail.wordsList[indexCon + 1] && items.detail.wordsList[indexCon + 1].chs && chsFhList.indexOf(items.detail.wordsList[indexCon + 1].chs) > -1">
+                                        <div class="synthesis-box">
+                                            <div>
+                                                <span class="pinyin">{{itemCon.pinyin}}</span>
+                                                <span class="hanzi content-con">{{itemCon.chs}}</span>
+                                            </div>
+                                            <div style="text-align: left">
+                                                <span class="pinyin">{{items.detail.wordsList[indexCon + 1].pinyin}}</span>
+                                                <span class="hanzi content-con">{{items.detail.wordsList[indexCon + 1].chs}}</span>
+                                            </div>
+                                        </div>
+                                        
+                                    </template>
+                                    <template v-else>
+                                        <span class="pinyin">{{itemCon.pinyin}}</span>
+                                        <span class="hanzi content-con">{{itemCon.chs}}</span>
+                                    </template>
+                                </div>
+                                </div>
+                        </template>
+                    </div>
+                <div class="inputInner">
+                    <el-input :class="['textarea',items.record?'':'textareaNoRecord']" type="textarea" v-model="textareaCon" placeholder="输入"></el-input>
+                    <div v-if="items.record" class="luyin-inner">
+                        <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box"/>
+                    </div>
+                </div>
+            </div>
+      </template>
+      
   </div>
 </template>
 
@@ -20,7 +124,9 @@ export default {
   props: ["curQue"],
   data() {
     return {
+        wordShow: ["1"],
         textareaCon: '', // 输入框
+        chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
     };
   },
   computed: {},
@@ -30,9 +136,39 @@ export default {
       handleWav(data) {
         
       },
+    // 处理数据
+    handleData(){
+        let _this = this
+        let curQue = JSON.parse(JSON.stringify(this.curQue));
+        curQue.option.forEach((dItem, dIndex) => {
+            let paraArr = []
+            dItem.detail.wordsList.forEach((sItem, sIndex) => {
+                this.mergeWordSymbol(dItem.detail.wordsList, sItem, sIndex);
+                let obj = {
+                    pinyin: sItem.pinyin,
+                    chs: sItem.chs,
+                    isShow: sItem.isShow,
+                };
+                paraArr.push(obj);
+            })
+            this.$set(_this.curQue.option[dIndex].detail,'resArr',paraArr)
+        })
+    },
+    //词和标点合一起
+    mergeWordSymbol(sItem, wItem, curIndex) {
+        let leg = sItem.length;
+        if (curIndex < leg - 1) {
+            if (this.chsFhList.indexOf(wItem.chs) > -1) {
+                wItem.isShow = false;
+            } else {
+                wItem.isShow = true;
+            }
+        }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
+      this.handleData()
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -50,6 +186,25 @@ export default {
 //@import url(); 引入公共css类
 .Big-Book-prev-Textdes{
     width: 100%;
+    h2{
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 150%;
+        color: #000000;
+        margin: 16px 0 8px 0;
+    }
+    b.xuhao{
+        background: #DE4444;
+        text-align: center;
+        width: 16px;
+        height: 16px;
+        color: #FFFFFF;
+        border-radius: 50%;
+        font-size: 12px;
+        font-family: 'robot';
+        line-height: 16px;
+        margin-right: 8px;
+    }
     .inputInner{
         border-radius: 8px;
         border: 1px solid rgba(0, 0, 0, 0.1);
@@ -60,11 +215,63 @@ export default {
             border-top: 1px solid rgba(0, 0, 0, 0.1);
         }
     }
-    p{
+    >p.content-con{
         font-size: 16px;
         line-height: 150%;
         color: #000000;
         margin: 0 4px;
+        font-family: 'FZJCGFKTK';
+        &.py{
+            font-family: 'GB-PINYINOK-B';  
+        }
+        &.en{
+            font-family: 'robot';  
+        }
+    }
+    .item-content{
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .content-con{
+            font-size: 20px;
+            line-height: 150%;
+            color: #000000;
+            font-family: 'FZJCGFKTK';
+            margin: 0;
+            &.pinyin{
+                font-family: 'GB-PINYINOK-B';  
+                font-size: 16px;
+            }
+            &.en{
+                font-family: 'robot';  
+                font-size: 16px;
+            }
+        }
+        .con-box{
+            display: flex;
+            flex-flow: wrap;
+            .con-item{
+                text-align: center;
+                padding: 0 3px;
+                &.con-item-0{
+                    text-align: left;
+                    padding-left: 0;
+                }
+            }
+            span{
+                display: block;
+            }
+            .pinyin{
+                font-family: 'GB-PINYINOK-B';
+                font-size: 16px;
+                line-height: 16px;
+                color: #000000;
+                height: 16px;
+            }
+            .synthesis-box{
+                display: flex;
+            }
+        }
     }
     .luyin-box{
         justify-content: start;
@@ -74,6 +281,68 @@ export default {
         justify-content: flex-start;
     }
 }
+.NPC-zhedie {
+  width: 780px;
+  margin-top: 16px;
+  .topTitle {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding-left: 24px;
+    padding-right: 16px;
+    .NPC-top-left {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      .NPC-topTitle-text {
+        font-size: 16px;
+        color: #fff;
+        font-weight: bold;
+        margin-right: 8px;
+      }
+    }
+    .NPC-top-right {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      &-text {
+        font-weight: normal;
+        font-size: 14px;
+        line-height: 16px;
+        color: #ffffff;
+      }
+    }
+    img {
+      width: 24px;
+      height: 24px;
+    }
+    .rotate {
+      animation-name: firstrotate;
+      animation-direction: 2s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+    }
+  }
+  .NPC-word-list {
+    padding: 0px 24px;
+  }
+}
+@keyframes firstrotate {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(180deg);
+  }
+}
+@keyframes huifuRotate {
+  0% {
+    transform: rotateZ(180deg);
+  }
+  100% {
+    transform: rotateZ(0deg);
+  }
+}
 </style>
 <style lang="scss">
 .InputHasRecord{