选择声调

src/components/Adult/Preview.vue

@@ -67,12 +67,15 @@
                 <template v-if="itemss.data.type == 'recordHZ_inputPY_chs'">
                   <TextInputRecord :curQue="itemss.data" />
                 </template>
-                <template v-if="itemss.data.type == 'inputItem_chs'">
+                <template v-if="itemss.data.type == 'inputItem_chs'||itemss.data.type == 'sentence_input'||itemss.data.type == 'sentence_judge'">
                   <SentenceInput :curQue="itemss.data" />
                 </template>
                 <template v-if="itemss.data.type == 'NumberCombination_chs'">
                   <NumberSelectHasRecord :curQue="itemss.data" />
                 </template>
+                <template v-if="itemss.data.type == 'toneSelect_chs'">
+                  <SelectTone :curQue="itemss.data" />
+                </template>
               </template>
             </div>
           </div>
@@ -95,6 +98,7 @@ import InputHasRecord from "./preview/InputHasRecord.vue"; // 输入加录音
 import TextInputRecord from "./preview/TextInputRecord.vue"; // 文本+输入+录音
 import SentenceInput from "./preview/SentenceInput.vue"; // 输入选项
 import NumberSelectHasRecord from "./preview/NumberSelectHasRecord.vue" // 数字组合
+import SelectTone from './preview/SelectTone.vue' // 选择声调
 export default {
   name: "preview",
   components: {
@@ -110,6 +114,7 @@ export default {
     TextInputRecord,
     SentenceInput,
     NumberSelectHasRecord,
+    SelectTone,
   },
   props: ["context", "fatherName"],
   data() {

src/components/Adult/preview/SelectTone.vue

@@ -0,0 +1,122 @@
+<!--  -->
+<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 : ''"
+                    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"; // 音频播放
+export default {
+  components: {Audio},
+  props: ["curQue"],
+  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:[]
+    };
+  },
+  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)
+      }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.Big-Book-prev-Textdes{
+    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;
+            margin: 8px 0;
+            .audio-play{
+                width: 24px;
+                margin-right: 8px;
+            }
+            >div.con{
+                font-size: 16px;
+                line-height: 1.5;
+                flex: 1;
+                margin: 0;
+            }
+            a{
+                margin-left: 8px;
+                &.active{
+                    background: #98D1EB;
+                    border-radius: 4px;
+                }
+                img{
+                    width: 24px;
+                }
+            }
+        }
+    }
+}
+</style>
+<style lang="scss">
+.SelectTone.Big-Book-prev-Textdes{
+    ul{
+        li{
+            div.con{
+                margin: 0 ;
+                >p{
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
+</style>