修改上传控件和预览效果 wordphase的播放音频暂停其它 图片控件的图片热区

src/components/Adult/inputModules/UploadControl.vue

@@ -49,16 +49,36 @@
         <img src="../../../assets/adult/red_remove.png" alt="" />
       </div>
     </div>
+    <template v-if="type == 'upload_control_preview_chs'">
+      <div class="adult-book-input-item">
+        <span class="adult-book-lable">下载：</span>
+        <el-radio-group v-model="curQue.is_upload" @change="forupdata">
+          <el-radio :label="true">需要</el-radio>
+          <el-radio :label="false">不需要</el-radio>
+        </el-radio-group>
+      </div>
+    </template>
+    <!-- <div class="adult-book-input-item" v-if="curQue.is_upload">
+        <span class="adult-book-lable">上传：</span>
+        <Upload
+          :changeFillId="changeuploda"
+          :datafileList="curQue.upload_list"
+          :accept="accept"
+          :filleNumber="1"
+        />
+      </div> -->
   </div>
 </template>
-
 <script>
 import UploadView from "../common/UploadView.vue";
+import Upload from "../common/Upload.vue";
+
 import pdf from "vue-pdf";
 export default {
   components: {
     UploadView,
     pdf,
+    Upload,
   },
   props: ["curQue", "changeCurQue", "type"],
   data() {
@@ -73,12 +93,15 @@ export default {
         name: "上传控件",
         title: "",
         fileList: [],
+        is_upload: false,
+        upload_list: [],
       },
       data_structure2: {
         type: "upload_control_preview_chs",
         name: "上传控件预览查看",
         title: "",
         fileList: [],
+        is_upload: false,
       },
       loading: false,
     };
@@ -87,12 +110,31 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    forupdata() {
+      this.$forceUpdate();
+    },
     remove() {
       // this.data = null;
       // this.curQue.data = null;
       // this.curQue.fileList = [];
       // this.$message.success("删除成功");
     },
+    changeuploda(fileList, item) {
+      const articleImgList = JSON.parse(JSON.stringify(fileList));
+      const articleImgRes = [];
+      articleImgList.forEach((item) => {
+        if (item.response) {
+          const obj = {
+            name: item.name,
+            url: item.response.file_info_list[0].file_url,
+            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
+            fileID: item.response.file_info_list[0].file_id,
+          };
+          articleImgRes.push(obj);
+        }
+      });
+      this.curQue.upload_list = JSON.parse(JSON.stringify(articleImgRes));
+    },
     changeFillId(fileList, item, index) {
       this.curQue.fileList = JSON.parse(JSON.stringify(fileList));
       if (fileList.length > 0) {
@@ -138,6 +180,15 @@ export default {
   created() {
     if (!this.curQue) {
       this.initcurQue();
+    } else {
+      if (!this.curQue.is_upload) {
+        this.curQue.is_upload = false;
+      }
+      if (this.type == "upload_control_chs") {
+        if (!this.curQue.upload_list) {
+          this.curQue.upload_list = [];
+        }
+      }
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）

src/components/Adult/preview/Picture.vue

@@ -1,98 +1,172 @@
 <!--  -->
 <template>
-    <div :class="['Big-Book-PictureBox']" v-if="curQue">
-        <!-- <ul class="Big-Book-PictureBox-item" v-for="(item,index) in curQue.queList" :key="index"> -->
-            <li v-for="(items,indexs) in curQue.option" :key="indexs"> 
-                <template v-if="ChildType!='image_gdcy'&& items.hanziSite=='top'">
-                    <div class="hanzi-box hanzi-box-top" v-if="items.pinyin||items.hanzi">
-                        <span v-if="items.pinyin&&(!items.pinyinSite||items.pinyinSite=='top')" class="pinyin">{{items.pinyin}}</span>
-                        <p v-if="items.hanzi">{{items.hanzi}}</p>
-                        <span v-if="items.pinyin&&(items.pinyinSite=='bottom')" class="pinyin">{{items.pinyin}}</span>
-                    </div>
-                </template>
-                <div v-for="(itemss,indexss) in items.img_list" :key="indexss">
-                    <el-image
-                        :src="itemss.url"
-                        fit="scale-down"
-                        class="img_url"
-                        @click="playmicrophone(items.mp3_list[0].url,'mp3')"
-                    >
-                        <div slot="placeholder" class="image-slot">
-                            <img src="../../../assets/common/icon-imgloading.png" />
-                        </div>
-                    </el-image>
-                </div>
-                
-                <template v-if="ChildType!='image_gdcy'&&(!items.hanziSite||items.hanziSite=='bottom')">
-                    <div class="hanzi-box" v-if="items.pinyin||items.hanzi">
-                        <span v-if="items.pinyin&&(!items.pinyinSite||items.pinyinSite=='top')" class="pinyin">{{items.pinyin}}</span>
-                        <p v-if="items.hanzi">{{items.hanzi}}</p>
-                        <span v-if="items.pinyin&&(items.pinyinSite=='bottom')" class="pinyin">{{items.pinyin}}</span>
-                    </div>
-                </template>
-                <template v-if="ChildType=='image_input'||ChildType=='image_input_three'||ChildType=='image_wordInput'">
-                    <input class="singleInput" v-model="userAnswer.input" placeholder="输入" @blur="handleInput('input')">
-                </template>
-                <!-- <input class="singleInput" placeholder="输入" @blur="handleInput(index,indexs)" v-if="fn_list_obj[index]&&fn_list_obj[index].indexOf('input')>-1"> -->
-                <!-- 补齐输入 -->
-                <template v-if="ChildType=='image_gdcy'">
-                    <div class="fill-box">
-                        <b v-if="items.hanzi">{{items.hanzi}}</b>
-                        <input v-model="userAnswer.input" placeholder="输入" @blur="handleInput('input')">
-                    </div>
-                </template>
-                <!-- 双输入 -->
-                <template v-if="ChildType=='image_dobleinput'">
-                    <div class="DoubleInput-box">
-                        <input placeholder="输入" @blur="handleInput('dInput',0)" v-model="userAnswer.dInput[0]">
-                        <input placeholder="输入" @blur="handleInput('dInput',1)" v-model="userAnswer.dInput[1]">
-                    </div>
-                </template>
-                <!-- 判断 -->
-                <template v-if="ChildType=='image_judge'">
-                    <div class="judge-box">
-                        <a :class="['right-btn',userAnswer.judge=='right'?'active':'']" @click="handleSelectJudge('right')"></a>
-                        <a :class="['error-btn',userAnswer.judge=='error'?'active':'']" @click="handleSelectJudge('error')"></a>
-                    </div>
-                </template>
-                <!-- 单选 -->
-                <template v-if="ChildType=='image_single'">
-                    <el-radio v-model="userAnswer.singleRadio" label="1"><span></span></el-radio>
-                </template>
-                <!-- 复选 -->
-                <template v-if="ChildType=='image_checkBox'">
-                    <el-checkbox v-model="userAnswer.singlechecked"><span></span></el-checkbox>
-                </template>
-                <!-- 三件套 -->
-                <div class="luyinVoice-box" v-if="items.mp3_list.length>0||fn_list_obj&&fn_list_obj.indexOf('image_record')>-1||items.RecordControl">
-                    <template v-if="items.mp3_list.length>0">
-                        <span :class="['voice',mp3Play]" @click="playmicrophone(items.mp3_list[0].url,'mp3')"></span>
-                    </template>
-                    <Soundrecord @handleWav="handleWav" :type="items.RecordControl?items.RecordControl:'normal'" class="luyin-box" :class="[items.RecordControl]" v-if="fn_list_obj.indexOf('image_record')>-1||items.RecordControl"/>
-                    <!-- <span :class="['luyin',microphoneStatus?'active':'']" @click="microphone"></span>
+  <div :class="['Big-Book-PictureBox']" v-if="curQue">
+    <!-- <ul class="Big-Book-PictureBox-item" v-for="(item,index) in curQue.queList" :key="index"> -->
+    <li v-for="(items, indexs) in curQue.option" :key="indexs">
+      <template v-if="ChildType != 'image_gdcy' && items.hanziSite == 'top'">
+        <div class="hanzi-box hanzi-box-top" v-if="items.pinyin || items.hanzi">
+          <span
+            v-if="
+              items.pinyin && (!items.pinyinSite || items.pinyinSite == 'top')
+            "
+            class="pinyin"
+            >{{ items.pinyin }}</span
+          >
+          <p v-if="items.hanzi">{{ items.hanzi }}</p>
+          <span
+            v-if="items.pinyin && items.pinyinSite == 'bottom'"
+            class="pinyin"
+            >{{ items.pinyin }}</span
+          >
+        </div>
+      </template>
+      <div v-for="(itemss, indexss) in items.img_list" :key="indexss">
+        <el-image
+          :src="itemss.url"
+          fit="scale-down"
+          class="img_url"
+          @click="playmicrophone(items.mp3_list[0].url, 'mp3')"
+        >
+          <div slot="placeholder" class="image-slot">
+            <img src="../../../assets/common/icon-imgloading.png" />
+          </div>
+        </el-image>
+      </div>
+
+      <template
+        v-if="
+          ChildType != 'image_gdcy' &&
+          (!items.hanziSite || items.hanziSite == 'bottom')
+        "
+      >
+        <div class="hanzi-box" v-if="items.pinyin || items.hanzi">
+          <span
+            v-if="
+              items.pinyin && (!items.pinyinSite || items.pinyinSite == 'top')
+            "
+            class="pinyin"
+            >{{ items.pinyin }}</span
+          >
+          <p v-if="items.hanzi">{{ items.hanzi }}</p>
+          <span
+            v-if="items.pinyin && items.pinyinSite == 'bottom'"
+            class="pinyin"
+            >{{ items.pinyin }}</span
+          >
+        </div>
+      </template>
+      <template
+        v-if="
+          ChildType == 'image_input' ||
+          ChildType == 'image_input_three' ||
+          ChildType == 'image_wordInput'
+        "
+      >
+        <input
+          class="singleInput"
+          v-model="userAnswer.input"
+          placeholder="输入"
+          @blur="handleInput('input')"
+        />
+      </template>
+      <!-- <input class="singleInput" placeholder="输入" @blur="handleInput(index,indexs)" v-if="fn_list_obj[index]&&fn_list_obj[index].indexOf('input')>-1"> -->
+      <!-- 补齐输入 -->
+      <template v-if="ChildType == 'image_gdcy'">
+        <div class="fill-box">
+          <b v-if="items.hanzi">{{ items.hanzi }}</b>
+          <input
+            v-model="userAnswer.input"
+            placeholder="输入"
+            @blur="handleInput('input')"
+          />
+        </div>
+      </template>
+      <!-- 双输入 -->
+      <template v-if="ChildType == 'image_dobleinput'">
+        <div class="DoubleInput-box">
+          <input
+            placeholder="输入"
+            @blur="handleInput('dInput', 0)"
+            v-model="userAnswer.dInput[0]"
+          />
+          <input
+            placeholder="输入"
+            @blur="handleInput('dInput', 1)"
+            v-model="userAnswer.dInput[1]"
+          />
+        </div>
+      </template>
+      <!-- 判断 -->
+      <template v-if="ChildType == 'image_judge'">
+        <div class="judge-box">
+          <a
+            :class="['right-btn', userAnswer.judge == 'right' ? 'active' : '']"
+            @click="handleSelectJudge('right')"
+          ></a>
+          <a
+            :class="['error-btn', userAnswer.judge == 'error' ? 'active' : '']"
+            @click="handleSelectJudge('error')"
+          ></a>
+        </div>
+      </template>
+      <!-- 单选 -->
+      <template v-if="ChildType == 'image_single'">
+        <el-radio v-model="userAnswer.singleRadio" label="1"
+          ><span></span
+        ></el-radio>
+      </template>
+      <!-- 复选 -->
+      <template v-if="ChildType == 'image_checkBox'">
+        <el-checkbox v-model="userAnswer.singlechecked"
+          ><span></span
+        ></el-checkbox>
+      </template>
+      <!-- 三件套 -->
+      <div
+        class="luyinVoice-box"
+        v-if="
+          items.mp3_list.length > 0 ||
+          (fn_list_obj && fn_list_obj.indexOf('image_record') > -1) ||
+          items.RecordControl
+        "
+      >
+        <template v-if="items.mp3_list.length > 0">
+          <span
+            :class="['voice', mp3Play]"
+            @click="playmicrophone(items.mp3_list[0].url, 'mp3')"
+          ></span>
+        </template>
+        <Soundrecord
+          @handleWav="handleWav"
+          :type="items.RecordControl ? items.RecordControl : 'normal'"
+          class="luyin-box"
+          :class="[items.RecordControl]"
+          v-if="fn_list_obj.indexOf('image_record') > -1 || items.RecordControl"
+        />
+        <!-- <span :class="['luyin',microphoneStatus?'active':'']" @click="microphone"></span>
                     <span :class="['play',hasMicro]" @click="playmicrophone(wavblob)"></span> -->
-                </div>
-            </li>
-        <!-- </ul> -->
-    </div>
+      </div>
+    </li>
+    <!-- </ul> -->
+  </div>
 </template>
 
 <script>
 import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
 import Recorder from "js-audio-recorder"; //录音插件
 export default {
-  components: { Soundrecord, },
-  props: ["curQue","ChildType"],
+  components: { Soundrecord },
+  props: ["curQue", "ChildType"],
   data() {
     return {
-      fn_list_obj: '',
+      fn_list_obj: "",
       answer: [],
       userAnswer: {
-          input:'', // 输入
-          dInput: ['',''], //双输入
-          judge:'',// 判断
-          singleRadio:'',
-          singlechecked: false,
+        input: "", // 输入
+        dInput: ["", ""], //双输入
+        judge: "", // 判断
+        singleRadio: "",
+        singlechecked: false,
       }, // 记录用户答题内容
       recorder: new Recorder({
         sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
@@ -104,7 +178,7 @@ export default {
       wavblob: null,
       audio: new window.Audio(),
       oldUrl: null, // 存储上个播放音频地址
-      mp3Play: '',// 音频播放
+      mp3Play: "", // 音频播放
     };
   },
   computed: {},
@@ -112,19 +186,19 @@ export default {
   //方法集合
   methods: {
     handleFnList() {
-      let obj = '';
-      this.curQue.fn_list.forEach(node=>{
-          if (node.isFn) {
-            obj += node.type + ','
-          } 
+      let obj = "";
+      this.curQue.fn_list.forEach((node) => {
+        if (node.isFn) {
+          obj += node.type + ",";
+        }
         // if(obj.indexOf('input')>-1){
         //     node.option.forEach((i)=>{
         //         userItem.push('')
         //     })
         // }
         // this.userAnswer.push(userItem)
-      })
-      this.fn_list_obj = obj
+      });
+      this.fn_list_obj = obj;
     },
     // 修改正确选项中得某一个为正确答案
     changAnswer(index, type) {
@@ -144,48 +218,48 @@ export default {
       }
     },
     // 去掉前后空格
-    handleInput(index,indexs){
-        if(indexs||indexs==0){
-            let res = this.userAnswer[index][indexs].trim()
-            this.$set(this.userAnswer[index],indexs,res)
-        }else{
-            this.userAnswer[index] = this.userAnswer[index].trim()
-        }
+    handleInput(index, indexs) {
+      if (indexs || indexs == 0) {
+        let res = this.userAnswer[index][indexs].trim();
+        this.$set(this.userAnswer[index], indexs, res);
+      } else {
+        this.userAnswer[index] = this.userAnswer[index].trim();
+      }
     },
-    playmicrophone (url,type) {
-        if(url){
-            let _this = this;
-            if (!this.audio.paused) {
-                this.audio.pause();
-                if(type=='mp3'){
-                    _this.mp3Play = ''
-                }
-            }else if( this.audio.paused && _this.oldUrl == url ){
-                _this.audio.play();
-                if(type=='mp3'){
-                    _this.mp3Play = 'active'
-                }
-            } else {
-                _this.audio.pause();
-                _this.audio.load();
-                if(type=='mp3'){
-                    _this.mp3Play = 'active'
-                    _this.audio.src = url
-                }
-                _this.oldUrl = url
-                _this.audio.play();
-            } 
+    playmicrophone(url, type) {
+      if (url) {
+        let _this = this;
+        if (!this.audio.paused) {
+          this.audio.pause();
+          if (type == "mp3") {
+            _this.mp3Play = "";
+          }
+        } else if (this.audio.paused && _this.oldUrl == url) {
+          _this.audio.play();
+          if (type == "mp3") {
+            _this.mp3Play = "active";
+          }
+        } else {
+          _this.audio.pause();
+          _this.audio.load();
+          if (type == "mp3") {
+            _this.mp3Play = "active";
+            _this.audio.src = url;
+          }
+          _this.oldUrl = url;
+          _this.audio.play();
         }
+      }
     },
     // 判断题选择
-    handleSelectJudge(obj){
-        this.userAnswer.judge = obj
+    handleSelectJudge(obj) {
+      this.userAnswer.judge = obj;
     },
     handleWav(data) {
-        this.userAnswer = []
-        this.userAnswer.push(data)
-        // this.getAnswer(this.userAnswer, this.queIndex);
-        this.cur.BookWavAnswerWav = [data]
+      this.userAnswer = [];
+      this.userAnswer.push(data);
+      // this.getAnswer(this.userAnswer, this.queIndex);
+      this.cur.BookWavAnswerWav = [data];
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -206,8 +280,8 @@ export default {
     }
     let _this = this;
     _this.audio.addEventListener("ended", function () {
-        _this.mp3Play = ''
-        _this.hasMicro = 'normal'
+      _this.mp3Play = "";
+      _this.hasMicro = "normal";
     });
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -221,205 +295,212 @@ export default {
 </script>
 <style lang='scss' scoped>
 //@import url(); 引入公共css类
-.Big-Book-PictureBox{
-    width: 100%;
-    margin-bottom: 24px;
-    // &.PictureBoxFlex{
-    //     display: flex;
-    //     justify-content: space-between;
-    //     .Big-Book-PictureBox-item{
-    //         width: 384px;
-    //     }
-    // }
-    // .Big-Book-PictureBox-item{
-    //     list-style: none;
-    //     background: #F3F3F3;
-    //     border-radius: 8px;
-    //     padding: 16px;
-    //     margin: 0;
-    //     display: flex;
-    //     flex-flow: wrap;
-        li{
-            list-style: none;
-            padding: 8px;
-            border-radius: 8px;
-            border: 1px solid rgba(0, 0, 0, 0.1);
-            background: #fff;
-            .hanzi-box{
-                margin-top: 8px;
-                &.hanzi-box-top{
-                    margin-top: 0px;
-                    margin-bottom: 8px;
-                }
-                >span.pinyin{
-                    display: block;
-                    text-align: center;
-                    font-family: 'GB-PINYINOK-B';
-                    font-size: 14px;
-                    line-height: 1.3;
-                    color: #000000;
-                }
-                >p{
-                    color: #000000;
-                    font-size: 16px;
-                    line-height: 150%;
-                    text-align: center;
-                    margin: 0;
-                    width: 100%;
-                    font-family: 'FZJCGFKTK';
-                }
-            }
-            input{
-                flex: 1;
-                width: 100%;
-                border: 1px solid rgba(0, 0, 0, 0.15);
-                box-sizing: border-box;
-                border-radius: 4px;
-                outline: none;
-                height: 32px;
-                padding: 4px 8px;
-                color: #000000;
-                text-align: center;
-                font-size: 16px;
-                line-height: 150%;
-                &.singleInput{
-                    margin-top: 8px;
-                }
-            }
-            .luyinVoice-box{
-                width: 100%;
-                margin-top: 8px;
-                display: flex;
-                -ms-flex-pack: justify;
-                align-items: center;
-                span{
-                    width: 24px;
-                    height: 24px;
-                    background-position: center;
-                    background-repeat: no-repeat;
-                    background-size: 24px;
-                    margin-right: 8px;
-                    cursor: pointer;
-                    &:first-child{
-                        margin-left: 0px;
-                    }
-                    &.voice{
-                        background-image: url('../../../assets/newImage/common/icon-voice-red.png');
-                    }
-                    &.active {
-                        background-image: url('../../../assets/newImage/common/icon-voice-play-red.png');
-                    }
-                    // &.luyin{
-                    //     background-image: url('../../../assets/newImage/common/luyin.png');
-                    //     &.active {
-                    //         background-image: url('../../../assets/newImage/common/luyin-active.png');
-                    //     }
-                    // }
-                    // &.play{
-                    //     background-image: url('../../../assets/newImage/common/luyin-play.png');
-                    //     &.normal {
-                    //         background-image: url('../../../assets/newImage/common/luyin-play-active.png');
-                    //     }
-                    //     &.stop {
-                    //         background-image: url('../../../assets/newImage/common/luyin-play-stop.png');
-                    //     }
-                    // }
-                }
-                .luyin-box{
-                    flex: 1;
-                    justify-content: start;
-                    padding: 0 12px;
-                    border: 1px solid rgba(0, 0, 0, 0.1);
-                    border-radius: 8px;
-                    &.mini{
-                        width: 64px;
-                    }
-                    &.normal{
-                        width:129px;
-                    }
-                    &.pro{
-                        width:200px;
-                    }
-                    &.promax{
-                        width:280px;
-                    }
-                }
-            }
-            .fill-box{
-                display: flex;
-                align-items: center;
-                margin-top: 8px;
-                b{
-                    margin-right: 8px;
-                    color: #000000;
-                    font-weight: normal;
-                    font-size: 16px;
-                }
-            }
-            .DoubleInput-box{
-                display: flex;
-                align-items: center;
-                margin-top: 8px;
-                >input:first-child{
-                    margin-right: 8px;
-                }
-            }
-            .el-radio,.el-checkbox{
-                width: 100%;
-                margin: 8px 0 0;
-                text-align: center;
-                height: 32px;
-                line-height: 32px;
-            }
-            .judge-box{
-                margin-top: 8px;
-                display: flex;
-                justify-content: center;
-                a{
-                    width: 70px;
-                    height: 32px;
-                    background: #F7F7F7 url('../../../assets/newImage/common/right-btn.png') center no-repeat;
-                    background-size: 24px;
-                    border-radius: 4px;
-                    border: 1px solid #F7F7F7;
-                    &:hover,&.active{
-                        background-color: #E5FFF0;
-                        border-color: #00C850;
-                    }
-                }
-                a.error-btn{
-                    background: #F7F7F7 url('../../../assets/newImage/common/error-btn.png') center no-repeat;
-                    background-size: 24px;
-                    margin-left: 4px;
-                    &:hover,&.active{
-                        background-color: #FFE5E5;
-                        border-color: #DE4444;
-                    }
-                }
-            }
+.Big-Book-PictureBox {
+  width: 100%;
+  margin-bottom: 24px;
+  // &.PictureBoxFlex{
+  //     display: flex;
+  //     justify-content: space-between;
+  //     .Big-Book-PictureBox-item{
+  //         width: 384px;
+  //     }
+  // }
+  // .Big-Book-PictureBox-item{
+  //     list-style: none;
+  //     background: #F3F3F3;
+  //     border-radius: 8px;
+  //     padding: 16px;
+  //     margin: 0;
+  //     display: flex;
+  //     flex-flow: wrap;
+  li {
+    list-style: none;
+    padding: 8px;
+    border-radius: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    background: #fff;
+    .hanzi-box {
+      margin-top: 8px;
+      &.hanzi-box-top {
+        margin-top: 0px;
+        margin-bottom: 8px;
+      }
+      > span.pinyin {
+        display: block;
+        text-align: center;
+        font-family: "GB-PINYINOK-B";
+        font-size: 14px;
+        line-height: 1.3;
+        color: #000000;
+      }
+      > p {
+        color: #000000;
+        font-size: 16px;
+        line-height: 150%;
+        text-align: center;
+        margin: 0;
+        width: 100%;
+        font-family: "FZJCGFKTK";
+      }
+    }
+    input {
+      flex: 1;
+      width: 100%;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      box-sizing: border-box;
+      border-radius: 4px;
+      outline: none;
+      height: 32px;
+      padding: 4px 8px;
+      color: #000000;
+      text-align: center;
+      font-size: 16px;
+      line-height: 150%;
+      &.singleInput {
+        margin-top: 8px;
+      }
+    }
+    .luyinVoice-box {
+      width: 100%;
+      margin-top: 8px;
+      display: flex;
+      -ms-flex-pack: justify;
+      align-items: center;
+      span {
+        width: 24px;
+        height: 24px;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 24px;
+        margin-right: 8px;
+        cursor: pointer;
+        &:first-child {
+          margin-left: 0px;
         }
-        .img_url{
-            width: 100%;
-            height: 128px;
-            cursor: pointer;
+        &.voice {
+          background-image: url("../../../assets/newImage/common/icon-voice-red.png");
         }
-    // }
-}
-.NNPE-tableList-tr-last{
-    .Big-Book-PictureBox{
-        margin-bottom: 0;
+        &.active {
+          background-image: url("../../../assets/newImage/common/icon-voice-play-red.png");
+        }
+        // &.luyin{
+        //     background-image: url('../../../assets/newImage/common/luyin.png');
+        //     &.active {
+        //         background-image: url('../../../assets/newImage/common/luyin-active.png');
+        //     }
+        // }
+        // &.play{
+        //     background-image: url('../../../assets/newImage/common/luyin-play.png');
+        //     &.normal {
+        //         background-image: url('../../../assets/newImage/common/luyin-play-active.png');
+        //     }
+        //     &.stop {
+        //         background-image: url('../../../assets/newImage/common/luyin-play-stop.png');
+        //     }
+        // }
+      }
+      .luyin-box {
+        flex: 1;
+        justify-content: start;
+        padding: 0 12px;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+        &.mini {
+          width: 64px;
+        }
+        &.normal {
+          width: 129px;
+        }
+        &.pro {
+          width: 200px;
+        }
+        &.promax {
+          width: 280px;
+        }
+      }
+    }
+    .fill-box {
+      display: flex;
+      align-items: center;
+      margin-top: 8px;
+      b {
+        margin-right: 8px;
+        color: #000000;
+        font-weight: normal;
+        font-size: 16px;
+      }
+    }
+    .DoubleInput-box {
+      display: flex;
+      align-items: center;
+      margin-top: 8px;
+      > input:first-child {
+        margin-right: 8px;
+      }
+    }
+    .el-radio,
+    .el-checkbox {
+      width: 100%;
+      margin: 8px 0 0;
+      text-align: center;
+      height: 32px;
+      line-height: 32px;
     }
+    .judge-box {
+      margin-top: 8px;
+      display: flex;
+      justify-content: center;
+      a {
+        width: 70px;
+        height: 32px;
+        background: #f7f7f7 url("../../../assets/newImage/common/right-btn.png")
+          center no-repeat;
+        background-size: 24px;
+        border-radius: 4px;
+        border: 1px solid #f7f7f7;
+        &:hover,
+        &.active {
+          background-color: #e5fff0;
+          border-color: #00c850;
+        }
+      }
+      a.error-btn {
+        background: #f7f7f7 url("../../../assets/newImage/common/error-btn.png")
+          center no-repeat;
+        background-size: 24px;
+        margin-left: 4px;
+        &:hover,
+        &.active {
+          background-color: #ffe5e5;
+          border-color: #de4444;
+        }
+      }
+    }
+  }
+  .img_url {
+    width: 100%;
+    height: 128px;
+    cursor: pointer;
+  }
+  // }
+}
+.NNPE-tableList-tr-last {
+  .Big-Book-PictureBox {
+    margin-bottom: 0;
+  }
 }
 </style>
 <style lang="scss">
-ul,li{
-    list-style: none;
+ul,
+li {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.Big-Book-PictureBox {
+  .el-checkbox__label,
+  .el-radio__label {
     padding: 0;
-    margin: 0;
+  }
 }
-.Big-Book-PictureBox{
-    .el-checkbox__label,.el-radio__label{
-        padding: 0;
-    }
-}     
 </style>

src/components/Adult/preview/UploadControlView.vue

@@ -1,50 +1,62 @@
 <!--  -->
 <template>
   <div class="Big-Book-prev-Textdes Tinydemo" v-if="curQue">
-    <div style="display: flex" v-if="type == 'upload_control_chs'">
-      <UploadView
-        :changeFillId="changeFillId"
-        :accept="accept"
-        :filleNumber="1"
-        :fileList="curQue.fileList"
-        :type="type"
-      />
-      <!-- <div class="uploadBtn" @click="downLoad">
+    <div
+      class="main"
+      :style="{ display: type == 'upload_control_chs' ? 'flex' : 'block' }"
+    >
+      <div class="content">
+        <template v-if="curQue.data">
+          <template
+            v-if="
+              curQue.data.file_name.indexOf('png') != -1 ||
+              curQue.data.file_name.indexOf('jpg') != -1
+            "
+          >
+            <img :src="curQue.data.file_url" alt="" />
+          </template>
+          <template v-else-if="curQue.data.file_name.indexOf('pdf') != -1">
+            <pdf
+              ref="pdf"
+              :src="curQue.data.fileRelativePath"
+              v-for="i in curQue.data.numPages"
+              :key="i"
+              :page="i"
+            >
+            </pdf>
+          </template>
+        </template>
+        <template v-else>
+          <div
+            style="display: flex; height: 40px"
+            v-if="type == 'upload_control_chs'"
+          >
+            <UploadView
+              :changeFillId="changeFillId"
+              :accept="accept"
+              :filleNumber="1"
+              :fileList="curQue.fileList"
+              :type="type"
+            />
+          </div>
+        </template>
+      </div>
+      <div
+        class="uploadBtn"
+        @click="downLoad"
+        v-if="type == 'upload_control_preview_chs' && curQue.is_upload"
+      >
         <img
           style="width: 24px; height: 24px"
           src="../../../assets/adult/download.png"
           alt=""
         />
-        下载表格
-      </div> -->
-    </div>
-    <div class="dv" v-if="curQue.data">
-      <div class="main">
-        <div class="content">
-          <template v-if="curQue.data">
-            <template
-              v-if="
-                curQue.data.file_name.indexOf('png') != -1 ||
-                curQue.data.file_name.indexOf('jpg') != -1
-              "
-            >
-              <img :src="curQue.data.file_url" alt="" />
-            </template>
-            <template v-else-if="curQue.data.file_name.indexOf('pdf') != -1">
-              <pdf
-                ref="pdf"
-                :src="curQue.data.fileRelativePath"
-                v-for="i in curQue.data.numPages"
-                :key="i"
-                :page="i"
-              >
-              </pdf>
-            </template>
-          </template>
-        </div>
+        下载
       </div>
-      <div v-if="type == 'upload_control_chs'" class="remove" @click="remove">
-        <img src="../../../assets/adult/red_remove.png" alt="" />
+      <div class="dv" v-if="curQue.data">
+        <div v-if="type == 'upload_control_chs'" class="remove" @click="remove">
+          <img src="../../../assets/adult/red_remove.png" alt="" />
+        </div>
       </div>
     </div>
   </div>
@@ -115,6 +127,7 @@ export default {
         this.curQue.data = null;
         this.curQue.fileList = [];
         this.$message.success("删除成功");
+        this.$forceUpdate()
       }
     },
     changeFillId(fileList, item, index) {
@@ -168,8 +181,8 @@ export default {
 .Big-Book-prev-Textdes {
   width: 100%;
   padding: 24px 0 24px 24px;
-  background: #f7f7f7;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  // background: #f7f7f7;
+  // border: 1px solid rgba(0, 0, 0, 0.1);
   .dv {
     display: flex;
     align-items: center;
@@ -192,7 +205,7 @@ export default {
     }
   }
   .uploadBtn {
-    width: 141px;
+    width: 96px;
     height: 39px;
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
@@ -205,8 +218,8 @@ export default {
     font-size: 16px;
     line-height: 150%;
     color: #000000;
-    margin-left: 16px;
     cursor: pointer;
+    margin-top: 8px;
     img {
       margin-right: 13px;
     }
@@ -214,14 +227,15 @@ export default {
   .main {
     margin-top: 23px;
     width: 477px;
-    height: 292px;
+    // height: 292px;
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
+    padding: 16px;
     .content {
       width: 445px;
       height: 260px;
@@ -229,7 +243,10 @@ export default {
       box-sizing: border-box;
       background: linear-gradient(0deg, #ebebeb, #ebebeb);
       overflow-y: scroll;
-      img {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      > img {
         max-width: 100%;
         max-height: 100%;
       }

src/components/Adult/preview/WordPhrase.vue

@@ -177,7 +177,8 @@ export default {
       let audio = document.getElementsByTagName("audio");
       audio.forEach((item) => {
         if (item.src != mp3) {
-          this.audio.pause();
+          // this.audio.pause();
+          item.pause();
         }
       });
       _this.playWord = node;