修改生字增加字段拼音位置

src/components/Adult/common/NewordPhraseModule.vue

@@ -30,6 +30,13 @@
           >
         </div>
         <div class="adult-book-input-item">
+          <span class="adult-book-lable">拼音位置：</span>
+             <el-radio-group v-model="curQueItem.pinyin_site">
+            <el-radio label="first">前面</el-radio>
+            <el-radio label="last">后面</el-radio>
+          </el-radio-group>
+        </div>
+        <div class="adult-book-input-item">
           <span class="adult-book-lable">词性：</span>
           <el-input
             placeholder="请输入词性"

src/components/Adult/inputModules/Neword.vue

@@ -92,6 +92,7 @@ export default {
               pinyin: "",
               img_list: [],
               mp3_list: [],
+              pinyin_site: "first", //拼音位置
             },
           ],
         ],
@@ -148,6 +149,13 @@ export default {
       if (!this.curQue.hasOwnProperty("titleBg")) {
         this.$set(this.curQue, "titleBg", "themeColor");
       }
+      let data = JSON.parse(JSON.stringify(this.curQue));
+      data.option.forEach((item) => {
+        if (!item[0].pinyin_site) {
+          item[0].pinyin_site = "first"; //拼音位置
+        }
+      });
+      this.curQue = JSON.parse(JSON.stringify(data));
     }
   },
   beforeCreate() {}, //生命周期 - 创建之前

src/components/Adult/inputModules/ToneSelect.vue

@@ -268,9 +268,7 @@ export default {
           numberArr.push(this.numberToChinese(i + 1));
         });
         for (let i = 0; i < this.curQue.detail.length; i++) {
-          verseList = verseList.concat(
-            `${numberArr[i]} ` + this.curQue.detail[i].pinyin
-          );
+          verseList = verseList.concat(this.curQue.detail[i].pinyin);
         }
         if (verseList.length > 0) {
           this.isWordTime = true;

src/components/Adult/preview/SelectTone.vue

@@ -1,59 +1,103 @@
 <!--  -->
 <template>
   <div class="Big-Book-prev-Textdes SelectTone" v-if="curQue">
-      <ul>
-          <li v-for="(item,index) in curQue.option" :key="index">
-              <Audio
-                    :mp3="
-                    item.mp3_list.length > 0 ? item.mp3_list[0].url : ''"
-                    :themeColor="themeColor"
-                    class="audio-play"
-                />
-                <div v-html="item.con" class="con"></div>
-                <a v-for="(itmes,indexs) in toneList" :key="indexs" :class="['tone-item',userSelect[index]===indexs?'active':'']" @click="handleClick(index,indexs)">
-                    <img :src="itmes">
-                </a>
-          </li>
-      </ul>
+    <div
+      class="aduioLine-box"
+      v-if="
+        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url
+      "
+    >
+      <AudioLine
+        audioId="sentenceListenAudio"
+        :mp3="curQue.mp3_list[0].url"
+        :getCurTime="getCurTime"
+        :themeColor="themeColor"
+        ref="audioLine"
+        @handleListenRead="handleListenRead"
+      />
+    </div>
+    <ul>
+      <li v-for="(item, index) in curQue.option" :key="index">
+        <a
+          :class="[
+            'play-btn',
+            curTime >= curQue.wordTime[index].bg &&
+            curTime < curQue.wordTime[index].ed &&
+            stopAudio
+              ? 'active'
+              : '',
+          ]"
+          @click="handleChangeTime(curQue.wordTime[index].bg)"
+        ></a>
+        <!-- <Audio
+          :mp3="item.mp3_list.length > 0 ? item.mp3_list[0].url : ''"
+          :themeColor="themeColor"
+          class="audio-play"
+        /> -->
+        <div v-html="item.con" class="con"></div>
+        <a
+          v-for="(itmes, indexs) in toneList"
+          :key="indexs"
+          :class="['tone-item', userSelect[index] === indexs ? 'active' : '']"
+          @click="handleClick(index, indexs)"
+        >
+          <img :src="itmes" />
+        </a>
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
 import Audio from "../preview/components/AudioRed.vue"; // 音频播放
+import AudioLine from "../preview/AudioLine.vue";
+
 export default {
-  components: {Audio},
-  props: ["curQue","themeColor"],
+  components: { Audio, AudioLine },
+  props: ["curQue", "themeColor"],
   data() {
     return {
-        toneList: [
-            require('../../../assets/NPC/tone1.png'),
-            require('../../../assets/NPC/tone2.png'),
-            require('../../../assets/NPC/tone3.png'),
-            require('../../../assets/NPC/tone4.png'),
-            require('../../../assets/NPC/tone0.png')
-        ],
-        userSelect:[]
+      toneList: [
+        require("../../../assets/NPC/tone1.png"),
+        require("../../../assets/NPC/tone2.png"),
+        require("../../../assets/NPC/tone3.png"),
+        require("../../../assets/NPC/tone4.png"),
+        require("../../../assets/NPC/tone0.png"),
+      ],
+      userSelect: [],
+      curTime: "",
+      stopAudio: false,
     };
   },
   computed: {},
   watch: {},
   //方法集合
   methods: {
-      // 处理数据
-      handleData(){
-          let _this = this
-          _this.userSelect = []
-          _this.curQue.option.forEach(item => {
-              _this.userSelect.push('')
-          });
-      },
-      handleClick(index,indexs){
-          this.$set(this.userSelect,index,indexs)
-      }
+    // 处理数据
+    handleData() {
+      let _this = this;
+      _this.userSelect = [];
+      _this.curQue.option.forEach((item) => {
+        _this.userSelect.push("");
+      });
+    },
+    handleClick(index, indexs) {
+      this.$set(this.userSelect, index, indexs);
+    },
+    handleChangeTime(time) {
+      let _this = this;
+      _this.curTime = time;
+      _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
+    },
+    getCurTime(curTime) {
+      this.curTime = curTime * 1000;
+    },
+    handleListenRead(playFlag) {
+      this.stopAudio = playFlag;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -67,59 +111,112 @@ export default {
 </script>
 <style lang='scss' scoped>
 //@import url(); 引入公共css类
-.Big-Book-prev-Textdes{
-    width: 100%;
-    ul{
-        display: flex;
-        flex-flow: wrap;
-        justify-content: space-between;
-        align-items: flex-start;
-        li{
-            width: 363px;
-            background: #FFFFFF;
-            border: 1px solid rgba(0, 0, 0, 0.1);
-            box-sizing: border-box;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            padding: 8px 12px 8px 16px;
-            margin: 8px 0;
-            .audio-play{
-                width: 16px;
-                margin-right: 12px;
-            }
-            >div.con{
-                font-size: 16px;
-                line-height: 1.5;
-                flex: 1;
-                margin: 0;
-            }
-            a{
-                margin-left: 8px;
-                font-size: 0;
-                &.active{
-                    background: #98D1EB;
-                    border-radius: 4px;
-                }
-                img{
-                    width: 24px;
-                }
-            }
+.Big-Book-prev-Textdes {
+  width: 100%;
+  background: #f7f7f7;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  border-radius: 8px;
+  overflow: hidden;
+  ul {
+    display: flex;
+    flex-flow: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 24px 12px;
+
+    li {
+      width: 363px;
+      background: #ffffff;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      box-sizing: border-box;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      padding: 8px 12px 8px 16px;
+      margin: 8px 0;
+      .play-btn {
+        width: 16px;
+        height: 16px;
+        background: url("../../../assets/NPC/play-red.png") center no-repeat;
+        background-size: cover;
+        margin-right: 8px;
+
+        &.active {
+          background-image: url("../../../assets/NPC/icon-voice-play-red.png");
+          background-size: cover;
+        }
+      }
+      .audio-play {
+        width: 16px;
+        margin-right: 12px;
+      }
+      > div.con {
+        font-size: 16px;
+        line-height: 1.5;
+        flex: 1;
+        margin: 0;
+      }
+      a {
+        margin-left: 8px;
+        font-size: 0;
+        &.active {
+          background: #98d1eb;
+          border-radius: 4px;
+        }
+        img {
+          width: 24px;
+        }
+      }
+    }
+  }
+}
+.NPC-Big-Book-preview-green {
+  .Big-Book-prev-Textdes {
+    li {
+      b {
+        background: #24b99e;
+      }
+      .play-btn {
+        background: url("../../../assets/NPC/play-green.png") center no-repeat;
+        background-size: cover;
+        &.active {
+          background-image: url("../../../assets/NPC/icon-voice-play-green.png");
+          background-size: cover;
         }
+      }
     }
+  }
+}
+.NPC-Big-Book-preview-brown {
+  .Big-Book-prev-Textdes {
+    li {
+      b {
+        background: #bd8865;
+      }
+      .play-btn {
+        background: url("../../../assets/NPC/play-brown.png") center no-repeat;
+        background-size: cover;
+        &.active {
+          background-image: url("../../../assets/NPC/icon-voice-play-brown.png");
+          background-size: cover;
+        }
+      }
+    }
+  }
 }
 </style>
 <style lang="scss">
-.SelectTone.Big-Book-prev-Textdes{
-    ul{
-        li{
-            div.con{
-                margin: 0 ;
-                >p{
-                    margin: 0;
-                }
-            }
+.SelectTone.Big-Book-prev-Textdes {
+  ul {
+    li {
+      div.con {
+        margin: 0;
+        > p {
+          margin: 0;
         }
+      }
     }
+  }
 }
 </style>