Merge branch 'NPC-lhd'

src/components/Adult/Preview.vue

@@ -70,6 +70,9 @@
                 <template v-if="itemss.data.type == 'inputItem_chs'">
                   <SentenceInput :curQue="itemss.data" />
                 </template>
+                <template v-if="itemss.data.type == 'NumberCombination_chs'">
+                  <NumberSelectHasRecord :curQue="itemss.data" />
+                </template>
               </template>
             </div>
           </div>
@@ -91,6 +94,7 @@ import Ligature from "./preview/Ligature.vue";
 import InputHasRecord from "./preview/InputHasRecord.vue"; // 输入加录音
 import TextInputRecord from "./preview/TextInputRecord.vue"; // 文本+输入+录音
 import SentenceInput from "./preview/SentenceInput.vue"; // 输入选项
+import NumberSelectHasRecord from "./preview/NumberSelectHasRecord.vue" // 数字组合
 export default {
   name: "preview",
   components: {
@@ -105,6 +109,7 @@ export default {
     InputHasRecord,
     TextInputRecord,
     SentenceInput,
+    NumberSelectHasRecord,
   },
   props: ["context", "fatherName"],
   data() {
@@ -275,10 +280,11 @@ export default {
     }
     .NNPE-tableList {
       background: #fff;
-      padding: 12px 8px;
       border-radius: 8px;
+      padding: 0;
       &.NNPE-tableList-hasBg {
         background: #f3f3f3;
+        padding: 12px 8px;
       }
       .NNPE-tableList-tr {
         display: flex;

src/components/Adult/preview/InputHasRecord.vue

@@ -5,7 +5,9 @@
           <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>
-              <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" v-if="items.record"/>
+              <div v-if="items.record" class="luyin-inner">
+                  <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box"/>
+              </div>
           </div>
       </div>
   </div>
@@ -54,6 +56,9 @@ export default {
         background: #fff;
         overflow: hidden;
         margin: 8px 0 16px 0;
+        >div.luyin-inner{
+            border-top: 1px solid rgba(0, 0, 0, 0.1);
+        }
     }
     p{
         font-size: 16px;
@@ -62,10 +67,11 @@ export default {
         margin: 0 4px;
     }
     .luyin-box{
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
         justify-content: start;
-        padding: 4px 12px;
+        padding: 4px 8px;
         height: 40px;
+        width: 280px;
+        justify-content: flex-start;
     }
 }
 </style>

src/components/Adult/preview/NumberSelectHasRecord.vue

@@ -0,0 +1,202 @@
+<!--  -->
+<template>
+  <div class="Big-Book-prev-Textdes" v-if="curQue">
+      <div class="left-con">
+          <ul>
+              <li v-for="(item,index) in curQue.option" :key="index" :class="[selectCon.indexOf(index)>-1?'active':'']" @click="handleClick(item,index)">
+                  {{item.con}}
+              </li>
+          </ul>
+          <a :class="['sureBtn',selectCon.length>0?'active':'']" @click="handleSure">确认</a>
+      </div>
+      <div class="right-con">
+          <ul>
+              <li v-for="(item,index) in rightList" :key="index">
+                  <span v-for="(items,indexs) in item" :key="indexs">
+                      {{items}}
+                  </span>
+                  <Soundrecord @handleWav="handleWav" type="mini" class="luyin-box" />
+              </li>
+          </ul>
+          <a :class="['clearBtn']" @click="handleClean" v-if="rightList.length>0">清空</a>
+      </div>
+  </div>
+</template>
+
+<script>
+import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
+export default {
+  components: {Soundrecord},
+  props: ["curQue"],
+  data() {
+    return {
+        rightList: [],
+        selectConIndex: [], // 选择内容的索引
+        selectCon: [], // 选择内容
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+      handleWav(data) {
+        
+      },
+    // 点击字
+    handleClick (word,index) {
+        if (this.selectConIndex.indexOf(index) > -1) {
+            this.selectConIndex.splice(this.selectConIndex.indexOf(index), 1)
+            this.selectCon.splice(this.selectConIndex.indexOf(index), 1)
+        } else {
+            this.selectConIndex.push(index)
+            this.selectCon.push(index)
+        }
+    },
+    // 点击确定按钮
+    handleSure(){
+        let flag = false
+        this.rightList.forEach((item, index) => {
+            if (item.toString() == this.selectCon.toString()) {
+                flag = true
+                return false
+            }
+        })
+        if (flag) {
+            this.$message.warning('已选择过相同选项');
+        }else{
+            this.rightList.push(this.selectCon)
+        }
+        this.selectConIndex = []
+        this.selectCon = []
+    },
+    // 清空
+    handleClean(){
+        this.rightList = []
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前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{
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+   .left-con{
+       background: #FFFFFF;
+       border: 1px solid rgba(0, 0, 0, 0.1);
+       border-radius: 8px;
+       padding: 16px 25px 72px 25px;
+       position: relative;
+       width: 324px;
+       margin-right: 16px;
+       box-sizing: border-box;
+       ul{
+           display: flex;
+           flex-flow: wrap;
+           li{
+                padding: 8px;
+                min-width: 52px;
+                background: #FFFFFF;
+                border: 1px solid rgba(0, 0, 0, 0.1);
+                box-sizing: border-box;
+                border-radius: 8px;
+                font-family: 'FZJCGFKTK';
+                text-align: center;
+                font-size: 24px;
+                line-height: 150%;
+                color: #000000;
+                margin: 8px;
+                cursor: pointer;
+                &.active{
+                    background: #F7F7F7;
+                    border: 1px solid #00C84B;
+                }
+           }
+       }
+       .sureBtn{
+            position: absolute;
+            bottom: 24px;
+            right: 34px;
+            width: 64px;
+            height: 32px;
+            background: #D8D8D8;
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            box-sizing: border-box;
+            border-radius: 8px;
+            color: #FFFFFF;
+            font-size: 16px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            &.active{
+                background: #3EC65C;
+
+            }
+       }
+   }
+   .right-con{
+        background: #F8F8F8;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        border-radius: 8px;
+        position: relative;
+        width: 440px;
+        ul{
+            display: flex;
+            flex-flow: wrap;
+            padding: 16px 15px 72px 15px;
+        }
+        li{
+            display: flex;
+            align-items: center;
+            background: #FFFFFF;
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            box-sizing: border-box;
+            border-radius: 8px;
+            padding: 8px 7px 8px 15px;
+            margin: 8px;
+            span{
+                font-size: 24px;
+                line-height: 150%;
+                color: #000000;
+                font-family: 'FZJCGFKTK';
+            }
+            .luyin-box{
+                width: 68px;
+                height: 32px;
+                border: 1px solid rgba(0, 0, 0, 0.1);
+                border-radius: 8px;
+                margin-left: 4px;
+            }
+        }
+        .clearBtn{
+            position: absolute;
+            bottom: 24px;
+            right: 34px;
+            width: 64px;
+            height: 32px;
+            background: #32A5D8;
+            box-sizing: border-box;
+            border-radius: 8px;
+            color: #FFFFFF;
+            font-size: 16px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+   }
+}
+</style>

src/components/Adult/preview/Soundrecord.vue

@@ -13,8 +13,9 @@
           selectIndex || selectIndex == 0 ? 'record-black' : '',
         ]"
         v-if="type && type == 'normal'"
-        >{{ handleDateTime(recordtime) }}</span
+        >{{isPlaying?'-':''}}{{ handleDateTime(recordtime) }}</span
       >
+      <div class="line" v-if="type && type == 'normal'"></div>
       <div
         :class="['playBack', hasMicro]"
         @click="
@@ -31,16 +32,6 @@
         :class="['record', microphoneStatus ? 'active' : '']"
         @click="microphone"
       ></div>
-      <div
-        :class="['playBack', hasMicro]"
-        @click="
-          playmicrophone(
-            selectIndex || selectIndex == 0
-              ? recordList[selectIndex].toltime
-              : ''
-          )
-        "
-      ></div>
       <el-select
         v-model="selectIndex"
         placeholder="无录音"
@@ -55,6 +46,16 @@
         >
         </el-option>
       </el-select>
+      <div
+        :class="['playBack', hasMicro]"
+        @click="
+          playmicrophone(
+            selectIndex || selectIndex == 0
+              ? recordList[selectIndex].toltime
+              : ''
+          )
+        "
+      ></div>
       <a
         :class="['record-delete', hasMicro ? 'record-delete-has' : '']"
         @click="handleDelete"
@@ -71,7 +72,7 @@
           microphoneStatus ? 'record-ing' : '',
           selectIndex || selectIndex == 0 ? 'record-black' : '',
         ]"
-        >{{ handleDateTime(recordtime) }}</span
+        >{{isPlaying?'-':''}}{{ handleDateTime(recordtime) }}</span
       >
       <el-select
         v-model="selectIndex"
@@ -127,6 +128,7 @@ export default {
       selectIndex: null, // 选中的录音索引
       oldIndex: null, // 存储播放录音索引
       playtime: 0, // 播放时间
+      isPlaying: false,
     };
   },
   computed: {},
@@ -141,23 +143,31 @@ export default {
         this.recorder.start();
         this.microphoneStatus = true;
         this.recordtime = 0;
+        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;
       } else {
-        // this.hasMicro = "normal";
+        this.hasMicro = "normal";
         this.recorder.stop();
         clearInterval(_this.timer);
-        if (
-          (this.type && this.type == "normal") ||
-          (this.type && this.type == "mini")
-        ) {
-          this.hasMicro = "normal";
-        } else {
-          this.recordtime = 0;
-        }
+        // if (
+        //   (this.type && this.type == "normal") ||
+        //   (this.type && this.type == "mini")
+        // ) {
+        //   this.hasMicro = "normal";
+        // } else {
+        //   this.recordtime = 0;
+        // }
         let toltime = this.recorder.duration; //录音总时长
         let fileSize = this.recorder.fileSize; //录音总大小
         //录音结束，获取取录音数据
@@ -168,26 +178,20 @@ export default {
         var reader = new window.FileReader();
         reader.readAsDataURL(wav);
         reader.onloadend = function () {
-          let obj = {
-            name: "新录音" + _this.recordFile,
-            wavData: reader.result,
-            toltime: Math.floor(toltime),
-            fileSize: fileSize,
-            id: _this.recordFile + String(toltime),
-          };
-          _this.recordList.push(obj);
-          _this.recordFile++;
-          if (
-            (_this.type && _this.type == "normal") ||
-            (_this.type && _this.type == "mini")
-          ) {
-            _this.selectIndex = _this.recordList.length - 1;
+            _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
       if (this.selectIndex || this.selectIndex == 0) {
         let totalTime = totalTimes;
         let _this = this;
@@ -267,7 +271,7 @@ export default {
     handleDelete() {
       if (this.selectIndex || this.selectIndex == 0) {
         this.recordList.splice(this.selectIndex, 1);
-        this.selectIndex = null;
+        this.selectIndex = this.recordList.length>1?this.recordList.length-1:null;
         this.hasMicro = "";
         this.recordtime = 0;
       }
@@ -288,12 +292,14 @@ export default {
     let _this = this;
     _this.audio.addEventListener("play", function () {
       _this.changeStatus("active");
+      _this.isPlaying = true
     });
     _this.audio.addEventListener("pause", function () {
       _this.changeStatus("normal");
     });
     _this.audio.addEventListener("ended", function () {
       _this.changeStatus("normal");
+      _this.isPlaying = false
     });
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -334,6 +340,13 @@ export default {
       background-size: 100%;
     }
   }
+  .line{
+      width: 1px;
+      height: 16px;
+      background: rgba(0, 0, 0, 0.85);
+      opacity: 0.2;
+      margin-left: 8px;
+  }
   .record {
     width: 24px;
     height: 24px;
@@ -344,7 +357,12 @@ export default {
     &.active {
       background: url("../../../assets/newImage/common/luyin-active.png") center
         no-repeat;
-      background-size: 100%;
+      background-size: 16px;
+    }
+    &.active:hover{
+        background: url("../../../assets/newImage/common/luyin-stop.png") center
+        no-repeat;
+        background-size: 16px;
     }
   }
   .record-time {
@@ -383,7 +401,7 @@ export default {
 <style lang="scss">
 .NNPE-Book-record {
   .el-select {
-    width: 128px;
+    flex: 1;
     height: 24px;
     &.proSelect {
       width: 78px;

src/components/Adult/preview/TextInputRecord.vue

@@ -131,6 +131,7 @@ export default {
                 width: 292px;
                 height: 40px;
                 margin-left: 8px;
+                padding: 0 8px;
             }
         }
     }