课文问题模板

src/components/Adult/Preview.vue

@@ -98,6 +98,9 @@
                 <template v-if="itemss.type == 'single_chs'">
                   <Single :curQue="itemss.data" />
                 </template>
+                <template v-if="itemss.type == 'text_problem_chs'">
+                  <TextProblem :curQue="itemss.data" />
+                </template>
               </template>
             </div>
           </div>
@@ -124,6 +127,7 @@ import NumberSelectHasRecord from "./preview/NumberSelectHasRecord.vue" // 数
 import SelectTone from './preview/SelectTone.vue' // 选择声调
 import Soduko from './preview/Soduko.vue' // 数独
 import Single from './preview/Single.vue' // 单选
+import TextProblem from './preview/TextProblem.vue' // 课文上方的问题 
 export default {
   name: "preview",
   components: {
@@ -143,6 +147,7 @@ export default {
     SelectTone,
     Soduko,
     Single,
+    TextProblem,
   },
   props: ["context", "fatherName"],
   data() {

src/components/Adult/preview/NewWordShow.vue

@@ -0,0 +1,52 @@
+<!--  -->
+<template>
+  <div class="Big-Book-prev-Textdes NewWordShow" v-if="curQue">
+      
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: ["curQue"],
+  data() {
+    return {
+        
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    // 处理数据
+    handleData(){
+        let _this = this
+        
+    },
+    
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.NewWordShow{
+    width: 100%;
+    padding: 8px 24px;
+    background: #F7F7F7;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    
+}
+</style>

src/components/Adult/preview/SentenceInput.vue

@@ -13,7 +13,7 @@
               <!-- 如果不是填空题 不替换 -->
               <template v-if="dataType.indexOf('sentence_input_chs')==-1">
                   <template v-if="items.detail.wordsList.length==0">
-                      <p :class="['content-con',items.en?'':'content-con-small']" v-if="items.detail.sentence">{{items.detail.sentence}}</p>
+                      <p :class="['content-con']" v-if="items.detail.sentence">{{items.detail.sentence}}</p>
                   </template>
                   <template v-else>
                       <div class="con-box">
@@ -64,11 +64,6 @@
           </template>
       </li>
     </ul>
-
-                <Soundrecord @handleWav="handleWav" type="mini" class="luyin-box" style="width:64px;border: 1px solid rgba(0, 0, 0, 0.1);border-radius: 8px;padding:0 12px;"/>
-                <Soundrecord @handleWav="handleWav" type="normal" class="luyin-box" style="width:129px;border: 1px solid rgba(0, 0, 0, 0.1);border-radius: 8px;padding:0 12px;"/>
-                <Soundrecord @handleWav="handleWav" type="pro" class="luyin-box" style="width:200px;border: 1px solid rgba(0, 0, 0, 0.1);border-radius: 8px;padding:0 12px;"/>
-                <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" style="width:280px;border: 1px solid rgba(0, 0, 0, 0.1);border-radius: 8px;padding:0 12px;"/>
   </div>
 </template>
 

src/components/Adult/preview/TextProblem.vue

@@ -0,0 +1,173 @@
+<!--  -->
+<template>
+  <div class="Big-Book-prev-Textdes Textproblem" v-if="curQue">
+      <h2 v-if="curQue.title">{{curQue.title}}</h2>
+      <ul>
+          <li v-for="(item,index) in curQue.option" :key="index">
+              <b v-if="item.number">{{item.number}}.</b>
+              <div class="content-right">
+                  <template v-if="item.detail.wordsList.length>0">
+                      <div class="con-box">
+                          <div :class="['con-item',indexCon===0?'con-item-0':'']" v-for="(itemCon,indexCon) in item.detail.resArr" :key="indexCon" v-show="itemCon.isShow">
+                              <template v-if="item.detail.wordsList[indexCon + 1] && item.detail.wordsList[indexCon + 1].chs && chsFhList.indexOf(item.detail.wordsList[indexCon + 1].chs) > -1">
+                                  <div class="synthesis-box">
+                                      <div>
+                                            <span class="pinyin" v-if="item.detail.pyPosition=='top'">{{itemCon.pinyin}}</span>
+                                            <span class="hanzi content-con">{{itemCon.chs}}</span>
+                                            <span class="pinyin" v-if="item.detail.pyPosition=='bottom'">{{itemCon.pinyin}}</span>
+                                        </div>
+                                        <div style="text-align: left">
+                                            <span class="pinyin" v-if="item.detail.pyPosition=='top'">{{item.detail.wordsList[indexCon + 1].pinyin}}</span>
+                                            <span class="hanzi content-con">{{item.detail.wordsList[indexCon + 1].chs}}</span>
+                                            <span class="pinyin" v-if="item.detail.pyPosition=='bottom'">{{item.detail.wordsList[indexCon + 1].pinyin}}</span>
+                                        </div>
+                                  </div>
+                                  
+                              </template>
+                              <template v-else>
+                                    <span class="pinyin" v-if="item.detail.pyPosition=='top'">{{itemCon.pinyin}}</span>
+                                    <span class="hanzi content-con">{{itemCon.chs}}</span>
+                                    <span class="pinyin" v-if="item.detail.pyPosition=='bottom'">{{itemCon.pinyin}}</span>
+                              </template>
+                          </div>
+                      </div>
+                  </template>
+                  <template v-else>
+                      <p class="hanzi content-con">
+                          {{item.detail.sentence}}
+                      </p>
+                  </template>
+              </div>
+          </li>
+      </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: ["curQue"],
+  data() {
+    return {
+        chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    // 处理数据
+    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() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.Textproblem{
+    width: 100%;
+    padding: 8px 24px;
+    background: #F7F7F7;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    h2{
+        margin: 16px 0 0;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+        color: #000000;
+    }
+    ul{
+        padding-top: 16px;
+        li{
+            display: flex;
+            margin-bottom: 16px;
+            b{
+                color: rgba(0, 0, 0, 0.85);
+                font-size: 16px;
+                line-height: 24px;
+                font-family: 'FZJCGFKTK';
+                margin-right: 4px;
+                font-weight: normal;
+            }
+            .content-right{
+                flex: 1;
+                .content-con{
+                    font-size: 16px;
+                    line-height: 24px;
+                    color: #000000;
+                    font-family: 'FZJCGFKTK';
+                    margin: 0;
+                    &.content-con-small{
+                        font-size: 16px;
+                    }
+                }
+                .con-box{
+                    display: flex;
+                    flex-flow: wrap;
+                    .con-item{
+                        text-align: center;
+                        padding: 0 1px;
+                        &.con-item-0{
+                            text-align: left;
+                            padding-left: 0;
+                        }
+                    }
+                    span{
+                        display: block;
+                    }
+                    .pinyin{
+                        font-family: 'GB-PINYINOK-B';
+                        font-size: 12px;
+                        line-height: 20px;
+                        color: #000000;
+                        height: 20px;
+                    }
+                    .synthesis-box{
+                        display: flex;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>