拖拽 + 图片部分

src/api/ajax.js

@@ -1,283 +1,283 @@
 import request from '@/utils/request'
 import { getToken } from '@/utils/auth'
 export function getContent(MethodName, data) {
-  let userInfor = getToken();
-  let UserCode = '',
-    UserType = '',
-    SessionID = ''
-  if (userInfor) {
-    let user = JSON.parse(getToken());
-    UserCode = user.user_code;
-    UserType = user.user_type;
-    SessionID = user.session_id;
-  }
-  return request({
-    url: `/GCLSBookWebSI/ServiceInterface?MethodName=${MethodName}&UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
-    method: 'post',
-    data
-  })
+    let userInfor = getToken();
+    let UserCode = '',
+        UserType = '',
+        SessionID = ''
+    if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+    }
+    return request({
+        url: `/GCLSBookWebSI/ServiceInterface?MethodName=${MethodName}&UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+        method: 'post',
+        data
+    })
 }
 
 export function getYinbiao(data) {
-  let userInfor = getToken();
-  let UserCode = '',
-    UserType = '',
-    SessionID = ''
-  if (userInfor) {
-    let user = JSON.parse(getToken());
-    UserCode = user.user_code;
-    UserType = user.user_type;
-    SessionID = user.session_id;
-  }
-  return request({
-    // /GCLSHMToolsServer/api/dict/basic
-    url: `/GCLSHMToolsServer/api/dict/basic?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
-    method: 'post',
-    data
-  })
+    let userInfor = getToken();
+    let UserCode = '',
+        UserType = '',
+        SessionID = ''
+    if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+    }
+    return request({
+        // /GCLSHMToolsServer/api/dict/basic
+        url: `/GCLSHMToolsServer/api/dict/basic?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+        method: 'post',
+        data
+    })
 }
 
 export function getLogin(MethodName, data) {
-  let userInfor = getToken();
-  let UserCode = '',
-    UserType = '',
-    SessionID = ''
-  if (userInfor) {
-    let user = JSON.parse(getToken());
-    UserCode = user.user_code;
-    UserType = user.user_type;
-    SessionID = user.session_id;
-  }
-  return request({
-    url: `/GCLSFileServer/ServiceInterface?MethodName=${MethodName}&UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
-    method: 'post',
-    data
-  })
+    let userInfor = getToken();
+    let UserCode = '',
+        UserType = '',
+        SessionID = ''
+    if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+    }
+    return request({
+        url: `/GCLSFileServer/ServiceInterface?MethodName=${MethodName}&UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+        method: 'post',
+        data
+    })
 }
 
 export function getContentFile(
-  MethodName,
-  data
-) {
-  let userInfor = getToken();
-  let UserCode = '',
-    UserType = '',
-    SessionID = ''
-  if (userInfor) {
-    let user = JSON.parse(getToken());
-    UserCode = user.user_code;
-    UserType = user.user_type;
-    SessionID = user.session_id;
-  }
-  return request({
-    url: `/GCLSFileServer/ServiceInterface?MethodName=${MethodName}&UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
-    method: 'post',
+    MethodName,
     data
-  })
+) {
+    let userInfor = getToken();
+    let UserCode = '',
+        UserType = '',
+        SessionID = ''
+    if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+    }
+    return request({
+        url: `/GCLSFileServer/ServiceInterface?MethodName=${MethodName}&UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+        method: 'post',
+        data
+    })
 }
 
 export function getStaticContent(MethodName, data) {
-  return request({
-    url: `/GCLSFileServer/ServiceInterface?MethodName=${MethodName}`,
-    method: 'post',
-    data
-  })
+    return request({
+        url: `/GCLSFileServer/ServiceInterface?MethodName=${MethodName}`,
+        method: 'post',
+        data
+    })
 }
 
 //获取分词结果 == gcls.helxsoft.cn/GCLSFCServer/ServiceInterface?userCode=2021052116-QA2HTCS5J6C6ZER&userType=STUDENT&sessionId=S-QPUKZAXLEFESNRBAZ0
 export function getSegContent(data) {
-  let userInfor = getToken();
-  let UserCode = '',
-    UserType = '',
-    SessionID = ''
-  if (userInfor) {
-    let user = JSON.parse(getToken());
-    UserCode = user.user_code;
-    UserType = user.user_type;
-    SessionID = user.session_id;
-  }
-  return request({
-    url: `/GCLSFCServer/ServiceInterface?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
-    method: 'post',
-    data
-  })
+    let userInfor = getToken();
+    let UserCode = '',
+        UserType = '',
+        SessionID = ''
+    if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+    }
+    return request({
+        url: `/GCLSFCServer/ServiceInterface?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+        method: 'post',
+        data
+    })
 }
 export function LearnWebSI(MethodName, data) {
-  let userInfor = getToken();
-  let UserCode = '',
-    UserType = '',
-    SessionID = ''
-  if (userInfor) {
-    let user = JSON.parse(getToken());
-    UserCode = user.user_code;
-    UserType = user.user_type;
-    SessionID = user.session_id;
-  }
-  return request({
-    url: `/GCLSLearnWebSI/ServiceInterface?MethodName=${MethodName}&UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
-    method: 'post',
-    data,
-  })
+    let userInfor = getToken();
+    let UserCode = '',
+        UserType = '',
+        SessionID = ''
+    if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+    }
+    return request({
+        url: `/GCLSLearnWebSI/ServiceInterface?MethodName=${MethodName}&UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+        method: 'post',
+        data,
+    })
 }
 //教材
 export function TextbookAPI(MethodName, data) {
-  let userInfor = getToken();
-  let UserCode = '',
-    UserType = '',
-    SessionID = ''
-  if (userInfor) {
-    let user = JSON.parse(getToken());
-    UserCode = user.user_code;
-    UserType = user.user_type;
-    SessionID = user.session_id;
-  }
-  return request({
-    url: `/GCLSBookWebSI/ServiceInterface?MethodName=${MethodName}&UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
-    method: 'post',
-    data,
-  })
+    let userInfor = getToken();
+    let UserCode = '',
+        UserType = '',
+        SessionID = ''
+    if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+    }
+    return request({
+        url: `/GCLSBookWebSI/ServiceInterface?MethodName=${MethodName}&UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+        method: 'post',
+        data,
+    })
 }
 export function getLearnWebContent(MethodName, data) {
-  let userInfor = getToken();
-  let UserCode = '',
-    UserType = '',
-    SessionID = ''
-  if (userInfor) {
-    let user = JSON.parse(getToken());
-    UserCode = user.user_code;
-    UserType = user.user_type;
-    SessionID = user.session_id;
-  }
-  return request({
-    url: `/GCLSLearnWebSI/ServiceInterface?MethodName=${MethodName}&UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
-    method: 'post',
-    data
-  })
+    let userInfor = getToken();
+    let UserCode = '',
+        UserType = '',
+        SessionID = ''
+    if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+    }
+    return request({
+        url: `/GCLSLearnWebSI/ServiceInterface?MethodName=${MethodName}&UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+        method: 'post',
+        data
+    })
 }
 // 发送聊天
 export function sendrobot(data) {
-  return request({
-    url: `/GCLSAIServer/unit/utterance`,
-    method: 'post',
-    data
-  })
+    return request({
+        url: `/GCLSAIServer/unit/utterance`,
+        method: 'post',
+        data
+    })
 }
 // 语音识别 GCLSAIServer/speech/recognize
 export function speechrecognize(data) {
-  return request({
-    url: `/GCLSAIServer/speech/recognize`,
-    method: 'post',
-    data
-  })
+    return request({
+        url: `/GCLSAIServer/speech/recognize`,
+        method: 'post',
+        data
+    })
 }
 
 //分句
 export function segSentences(data) {
-  let userInfor = getToken();
-  let UserCode = '',
-    UserType = '',
-    SessionID = ''
-  if (userInfor) {
-    let user = JSON.parse(getToken());
-    UserCode = user.user_code;
-    UserType = user.user_type;
-    SessionID = user.session_id;
-  }
-  return request({
-    url: `/GCLSHMToolsServer/api/nlp/chinese/text2Sentences?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
-    method: 'post',
-    data
-  })
+    let userInfor = getToken();
+    let UserCode = '',
+        UserType = '',
+        SessionID = ''
+    if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+    }
+    return request({
+        url: `/GCLSHMToolsServer/api/nlp/chinese/text2Sentences?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+        method: 'post',
+        data
+    })
 }
 //批量分词
 export function BatchSegContent(data) {
-  let userInfor = getToken();
-  let UserCode = '',
-    UserType = '',
-    SessionID = ''
-  if (userInfor) {
-    let user = JSON.parse(getToken());
-    UserCode = user.user_code;
-    UserType = user.user_type;
-    SessionID = user.session_id;
-  }
-  return request({
-    url: `/GCLSHMToolsServer/api/nlp/chinese/text2word?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
-    method: 'post',
-    data
-  })
+    let userInfor = getToken();
+    let UserCode = '',
+        UserType = '',
+        SessionID = ''
+    if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+    }
+    return request({
+        url: `/GCLSHMToolsServer/api/nlp/chinese/text2word?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+        method: 'post',
+        data
+    })
 }
 // 生成拼音
 export function createPinyin(data) {
-  let userInfor = getToken();
-  let UserCode = '',
-    UserType = '',
-    SessionID = ''
-  if (userInfor) {
-    let user = JSON.parse(getToken());
-    UserCode = user.user_code;
-    UserType = user.user_type;
-    SessionID = user.session_id;
-  }
-  return request({
-    url: `/GCLSHMToolsServer/api/nlp/chinese/text2pinyin?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
-    method: 'post',
-    data
-  })
+    let userInfor = getToken();
+    let UserCode = '',
+        UserType = '',
+        SessionID = ''
+    if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+    }
+    return request({
+        url: `/GCLSHMToolsServer/api/nlp/chinese/text2pinyin?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+        method: 'post',
+        data
+    })
 }
 
 // 
 export function getHZChineseInfo(data) {
-  let userInfor = getToken();
-  let UserCode = '',
-    UserType = '',
-    SessionID = ''
-  if (userInfor) {
-    let user = JSON.parse(getToken());
-    UserCode = user.user_code;
-    UserType = user.user_type;
-    SessionID = user.session_id;
-  }
-  return request({
-    url: `/GCLSHMToolsServer/api/baidu/chineseInfo?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
-    method: 'post',
-    data
-  })
+    let userInfor = getToken();
+    let UserCode = '',
+        UserType = '',
+        SessionID = ''
+    if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+    }
+    return request({
+        url: `/GCLSHMToolsServer/api/baidu/chineseInfo?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+        method: 'post',
+        data
+    })
 }
 
 //音频预处理
 export function prepareTranscribe(data) {
-  let userInfor = getToken();
-  let UserCode = '',
-    UserType = '',
-    SessionID = ''
-  if (userInfor) {
-    let user = JSON.parse(getToken());
-    UserCode = user.user_code;
-    UserType = user.user_type;
-    SessionID = user.session_id;
-  }
-  return request({
-    url: `/GCLSHMToolsServer/api/xunfei/speech/prepareTranscribe?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
-    method: 'post',
-    data
-  })
+    let userInfor = getToken();
+    let UserCode = '',
+        UserType = '',
+        SessionID = ''
+    if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+    }
+    return request({
+        url: `/GCLSHMToolsServer/api/xunfei/speech/prepareTranscribe?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+        method: 'post',
+        data
+    })
 }
 //音频识别结果获取
 export function getWordTime(data) {
-  let userInfor = getToken();
-  let UserCode = '',
-    UserType = '',
-    SessionID = ''
-  if (userInfor) {
-    let user = JSON.parse(getToken());
-    UserCode = user.user_code;
-    UserType = user.user_type;
-    SessionID = user.session_id;
-  }
-  return request({
-    url: `/GCLSHMToolsServer/api/xunfei/speech/getResult?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
-    method: 'post',
-    data
-  })
+    let userInfor = getToken();
+    let UserCode = '',
+        UserType = '',
+        SessionID = ''
+    if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+    }
+    return request({
+        url: `/GCLSHMToolsServer/api/xunfei/speech/getResult?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+        method: 'post',
+        data
+    })
 }

src/components/Adult/common/HzModule.vue

@@ -2,20 +2,9 @@
 <template>
   <div class="Big-Book-HzModule">
             
+
     <div class="adult-book-input-item">
-      <span class="adult-book-lable">标题：</span>           
-      <el-input
-        type="textarea"
-        class="adult-book-input"
-        :autosize="{ minRows: 2 }"
-        placeholder="请输入标题"
-        v-model="curQueItem.title"
-        @blur="curQueItem.title = curQueItem.title.trim()"
-      ></el-input>
-              
-    </div>
-    <div class="adult-book-input-item">
-      <span class="adult-book-lable">图片</span>
+      <span class="adult-book-lable">图片：</span>
       <Upload
         :changeFillId="changeImage"
         :datafileList="fileCon.img_list"
@@ -23,54 +12,67 @@
         :uploadType="'image'"
       />
     </div>
-    <div class="adult-book-input-item">
-      <span class="adult-book-lable">内容</span>
-      <el-input
-        type="textarea"
-        class="adult-book-input"
-        :autosize="{ minRows: 2 }"
-        placeholder="请输入文字"
-        v-model="curQueItem.hanzi"
-        @blur="onBlur(curQueItem, 'hanzi')"
-      ></el-input>
+    <template v-if="type != 'imgage_image'">
       <div class="adult-book-input-item">
-        <div v-if="checkList.indexOf('image_single') > -1">
-          <el-radio
-            @change="changeIsAnswer('single')"
-            v-model="curQueItem.isAnswer"
-            :label="index"
-            >答案</el-radio
-          >
-        </div>
-        <div v-if="checkList.indexOf('image_checkBox') > -1">
-          <el-checkbox
-            @change="changeIsAnswer('checkBox')"
-            v-model="curQueItem.isChecked"
-            :label="index"
-            >答案</el-checkbox
+        <span class="adult-book-lable">内容：</span>
+        <el-input
+          type="textarea"
+          class="adult-book-input"
+          :autosize="{ minRows: 2 }"
+          placeholder="请输入文字"
+          v-model="curQueItem.hanzi"
+          @blur="onBlur(curQueItem, 'hanzi')"
+        ></el-input>
+        <div class="adult-book-input-item">
+          <div v-if="checkList.indexOf('image_single') > -1">
+            <el-radio
+              @change="changeIsAnswer('single')"
+              v-model="curQueItem.isAnswer"
+              :label="index"
+              >答案</el-radio
+            >
+          </div>
+          <div v-if="checkList.indexOf('image_checkBox') > -1">
+            <el-checkbox
+              @change="changeIsAnswer('checkBox')"
+              v-model="curQueItem.isChecked"
+              :label="index"
+              >答案</el-checkbox
+            >
+          </div>
+          <div v-if="checkList.indexOf('image_judge') > -1">
+            <el-radio-group v-model="curQue.correct[0].judge[index]">
+              <el-radio label="true">正确</el-radio>
+              <el-radio label="false">错误</el-radio>
+            </el-radio-group>
+          </div>
+          <div
+            class="adult-book-input-item"
+            v-if="checkList.indexOf('image_spell') > -1"
           >
-        </div>
-        <div v-if="checkList.indexOf('image_judge') > -1">
-          <el-radio-group v-model="curQue.correct[0].judge[index]">
-            <el-radio label="true">正确</el-radio>
-            <el-radio label="false">错误</el-radio>
-          </el-radio-group>
-        </div>
-        <div
-          class="adult-book-input-item"
-          v-if="checkList.indexOf('image_spell') > -1"
-        >
-          <span class="adult-book-lable">答案</span>
-          <el-input
-            type="textarea"
-            class="adult-book-input"
-            :autosize="{ minRows: 2 }"
-            placeholder="请输入答案"
-            v-model.trim="curQue.correct[0].spell[index]"
-          ></el-input>
+            <span class="adult-book-lable">答案：</span>
+            <el-input
+              type="textarea"
+              class="adult-book-input"
+              :autosize="{ minRows: 2 }"
+              placeholder="请输入答案"
+              v-model.trim="curQue.correct[0].spell[index]"
+            ></el-input>
+          </div>
         </div>
       </div>
-    </div>
+      <div class="adult-book-input-item">
+        <span class="adult-book-lable">拼音：</span>
+        <el-input
+          type="textarea"
+          class="adult-book-input"
+          :autosize="{ minRows: 2 }"
+          placeholder="请输入拼音"
+          v-model="curQueItem.pinyin"
+          @blur="onBlur(curQueItem, 'pinyin')"
+        ></el-input>
+      </div>
+    </template>
     <div
       style="margin-top: 10px"
       class="adult-book-input-item"
@@ -81,7 +83,7 @@
         checkList.indexOf('image_wordInput') > -1
       "
     >
-      <span class="adult-book-lable" style="width: 50px">答案</span>
+      <span class="adult-book-lable">答案：</span>
       <el-input
         type="textarea"
         class="adult-book-input"
@@ -96,7 +98,7 @@
       class="adult-book-input-item"
       v-if="checkList.indexOf('image_dobleinput') > -1"
     >
-      <span class="adult-book-lable" style="width: 50px">答案</span>
+      <span class="adult-book-lable">答案：</span>
       <el-input
         type="textarea"
         class="adult-book-input"
@@ -107,7 +109,7 @@
       ></el-input>
     </div>
     <div class="adult-book-input-item">
-      <span class="adult-book-lable">音频</span>
+      <span class="adult-book-lable">音频：</span>
       <Upload
         :changeFillId="changeMp3"
         :datafileList="fileCon.mp3_list"
@@ -131,6 +133,7 @@ export default {
     "changAnswer",
     "deleteOptionOne",
     "checkList",
+    "type",
   ],
   data() {
     return {
@@ -280,9 +283,6 @@ export default {
     justify-content: flex-start;
     align-items: flex-start;
     margin-top: 10px;
-    span {
-      width: 50px;
-    }
     .deleteOptionBox {
       width: 40px;
       height: 40px;

src/components/Adult/common/SentenceModule.vue

@@ -44,7 +44,6 @@
         <el-radio label="py">拼音字体</el-radio>
       </el-radio-group>
     </div>
-
     <div v-for="(item, i) in fn_list" :key="i + 'answer'">
       <template v-if="item.type == 'sentence_input_chs' && item.isFn">
         <div class="adult-book-input-item">

src/components/Adult/common/data3.js

@@ -255,92 +255,8 @@ let fnData = [{
                 name: "纯图片",
             },
         ],
-        data_structure: {
-            type: 'image',
-            name: "图片控件",
-            title: "",
-            option: [{
-                hanzi: '',
-                pinyin: '',
-                mp3_list: [],
-                img_list: [],
-                isAnswer: '',
-                isChecked: '',
-                isJudge: '',
-                correctInput: '',
-            }],
-            correct: [{
-                single: [],
-                checkBox: [],
-                judge: [],
-                input: [],
-                spell: []
-            }],
-            fn_list: [{
-                    type: 'image_record',
-                    name: '跟读',
-                    isFn: false,
-                    isDisable: false,
-                },
-                {
-                    type: 'image_spell',
-                    name: '拼写',
-                    isFn: false,
-                    isDisable: false,
-                },
-                {
-                    type: 'image_input',
-                    name: '输入',
-                    isFn: false,
-                    isDisable: false,
-                },
-                {
-                    type: 'image_dobleinput',
-                    name: '双输入',
-                    isFn: false,
-                    isDisable: false,
-                },
-                {
-                    type: 'image_single',
-                    name: '单选',
-                    isFn: false,
-                    isDisable: false,
-                }, {
-                    type: 'image_checkBox',
-                    name: '多选',
-                    isFn: false,
-                    isDisable: false,
-                }, {
-                    type: 'image_judge',
-                    name: '判断',
-                    isFn: false,
-                    isDisable: false,
-                },
-            ],
-            numberList: {
-                type: "number",
-                name: "每行几个",
-                con: "2",
-                arr: [{
-                        id: 1,
-                        value: 1,
-                    }, {
-                        id: 2,
-                        value: 2,
 
-                    }, {
-                        id: 3,
-                        value: 3,
-                    },
-                    {
-                        id: 4,
-                        value: 4,
-                    },
-                ]
-            }
-        },
     },
-
     {
         type: "audio_control",
         name: "音频控制条",
@@ -786,6 +702,10 @@ let fnData = [{
         type: "play_input_record_chs",
         name: "播放+输入+录音",
     },
+    {
+        type: "drag_chs",
+        name: "拖拽",
+    },
 ]
 
 

src/components/Adult/inputModules/Drag.vue

@@ -0,0 +1,340 @@
+<!--  -->
+<template>
+  <div class="Big-Book-sentence" v-if="curQue">
+    <div
+      class="Big-Book-Single-content"
+      style="margin-left: 20px; margin-top: 20px"
+    >
+      <div class="adult-book-input-item">
+        <span class="adult-book-lable">标题：</span>
+        <el-input
+          class="adult-book-input"
+          type="textarea"
+          :autosize="{ minRows: 2 }"
+          placeholder="请输入标题"
+          v-model="curQue.title"
+          @blur="onBlur(curQue, 'title')"
+        ></el-input>
+      </div>
+      <div v-for="(item, opIndex) in curQue.option" :key="'op' + opIndex">
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable">汉字：</span>
+          <el-input
+            class="adult-book-input"
+            type="textarea"
+            :autosize="{ minRows: 2 }"
+            placeholder="请输入标题"
+            v-model="item.con"
+            @blur="onBlur(item, 'con')"
+          ></el-input>
+          <img
+            @click="deleteOption(opIndex)"
+            class="close"
+            src="../../../assets/adult/del-close.png"
+            alt=""
+          />
+        </div>
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable">拼音：</span>
+          <el-input
+            class="adult-book-input"
+            type="textarea"
+            :autosize="{ minRows: 2 }"
+            placeholder="请输入标题"
+            v-model="item.pinyin"
+            @blur="onBlur(item, 'pinyin')"
+          ></el-input>
+        </div>
+      </div>
+      <div class="addoption" @click="addOption">添加一个选项</div>
+      <div v-for="(item, conIndex) in curQue.con" :key="'con' + conIndex">
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable">序号：</span>
+          <el-input
+            class="adult-book-input"
+            type="textarea"
+            :autosize="{ minRows: 2 }"
+            placeholder="请输入序号"
+            v-model="item.number"
+            @blur="onBlur(item, 'number')"
+          ></el-input>
+          <img
+            @click="deleteCon(conIndex)"
+            class="close"
+            src="../../../assets/adult/del-close.png"
+            alt=""
+          />
+        </div>
+        <template v-if="item.list.length > 0">
+          <div v-for="(it, itIndex) in item.list" :key="'it' + itIndex">
+            <template v-if="it.type == 'detail'">
+              <div style="position: relative">
+                <SentenceSegwordChs :curQue="it" />
+                <img
+                  @click="deleteconList(conIndex, itIndex)"
+                  class="close"
+                  style="position: absolute; right: 330px; top: 37px"
+                  src="../../../assets/adult/del-close.png"
+                  alt=""
+                />
+              </div>
+            </template>
+            <template v-if="it.type == 'answer'">
+              <div class="adult-book-input-item">
+                <span class="adult-book-lable">汉字：</span>
+                <el-input
+                  class="adult-book-input"
+                  type="textarea"
+                  :autosize="{ minRows: 2 }"
+                  placeholder="请输入汉字"
+                  v-model="it.con"
+                  @blur="onBlur(it, 'con')"
+                ></el-input>
+                <img
+                  @click="deleteconList(conIndex, itIndex)"
+                  class="close"
+                  src="../../../assets/adult/del-close.png"
+                  alt=""
+                />
+              </div>
+              <div class="adult-book-input-item">
+                <span class="adult-book-lable">拼音：</span>
+                <el-input
+                  class="adult-book-input"
+                  type="textarea"
+                  :autosize="{ minRows: 2 }"
+                  placeholder="请输入拼音"
+                  v-model="it.pinyin"
+                  @blur="onBlur(it, 'pinyin')"
+                ></el-input>
+              </div>
+            </template>
+          </div>
+        </template>
+        <div style="display: flex">
+          <div class="addoption" @click="addFc(conIndex)">添加分词</div>
+          <div
+            style="margin-left: 15px"
+            class="addoption"
+            @click="addAnswer(conIndex)"
+          >
+            添加答案
+          </div>
+        </div>
+      </div>
+      <div class="addoption" @click="addCon">添加一个问题</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Upload from "../common/Upload";
+import SentenceSegwordChs from "../common/SentenceSegwordChs/index.vue";
+export default {
+  name: "Single",
+  props: ["curQue", "fn_data", "changeCurQue", "type"],
+  components: {
+    Upload,
+    SentenceSegwordChs,
+  },
+  data() {
+    return {
+      data_structure: {
+        type: "drag_chs",
+        name: "拖拽",
+        title: "",
+        option: [
+          {
+            con: "",
+            pinyin: "",
+          },
+        ],
+        con: [
+          {
+            number: "",
+            list: [],
+          },
+        ],
+        detail: {
+          type: "detail",
+          pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
+          sentence: "", //句子
+          segList: [], //分词结果
+          seg_words: "",
+          wordsList: [],
+        },
+        answer: {
+          type: "answer",
+          con: "",
+          pinyin: "",
+        },
+      },
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    onBlur(item, field) {
+      item[field] = item[field] ? item[field].trim() : "";
+    },
+    //   删除选项
+    deleteOption(index) {
+      if (this.curQue.option.length <= 1) {
+        this.$message.warning("至少保留一个选项");
+        return;
+      }
+      this.curQue.option.splice(index, 1);
+    },
+    // 添加选项
+    addOption() {
+      let obj = this.data_structure.option[0];
+      this.curQue.option.push(obj);
+    },
+    // 添加问题
+    addCon() {
+      let obj = this.data_structure.con[0];
+      this.curQue.con.push(obj);
+    },
+    // 删除问题
+    deleteCon(index) {
+      if (this.curQue.con.length <= 1) {
+        this.$message.warning("至少保留一个问题");
+        return;
+      }
+      this.curQue.con.splice(index, 1);
+    },
+    // 删除conlist中的一个
+    deleteconList(index, listIndex) {
+      this.curQue.con[index].list.splice(listIndex);
+    },
+    // 增加分词
+    addFc(index) {
+      let obj = this.data_structure.detail;
+      this.curQue.con[index].list.push(obj);
+    },
+
+    // 增加答案
+    addAnswer(index) {
+      let obj = this.data_structure.answer;
+      this.curQue.con[index].list.push(obj);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    if (!this.curQue) {
+      this.changeCurQue(this.data_structure);
+    }
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scope>
+//@import url(); 引入公共css类
+.Big-Book-sentence {
+  &-content {
+    &.m {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+    }
+
+    .Big-Book-title {
+      font-size: 16px;
+      line-height: 40px;
+      color: #000;
+      margin-right: 15px;
+    }
+    .Big-Book-main {
+      > div {
+        margin-bottom: 10px;
+        &.Big-Book-pinyin {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+        }
+      }
+    }
+  }
+
+  .Big-Book-addrole {
+    > div {
+      width: 300px;
+      height: 40px;
+      background: #f3f3f3;
+      border: 1px dashed rgba(0, 0, 0, 0.15);
+      box-sizing: border-box;
+      border-radius: 4px;
+      text-align: center;
+      line-height: 40px;
+      cursor: pointer;
+    }
+  }
+  .Big-Book-more {
+    .Big-Book-more-text {
+      position: relative;
+      text-align: center;
+    }
+    .Big-Book-more-text:before,
+    .Big-Book-more-text:after {
+      position: absolute;
+      background: #ccc;
+      content: "";
+      height: 1px;
+      top: 50%;
+      width: 45%;
+    }
+    .Big-Book-more-text:before {
+      left: 10px;
+    }
+    .Big-Book-more-text:after {
+      right: 10px;
+    }
+    .Big-Book-more-main {
+      display: flex;
+      > :not(:nth-child(1)) {
+        margin-left: 30px;
+      }
+    }
+  }
+  .Big-Book-con {
+    display: flex;
+    align-items: center;
+  }
+}
+.lrc-box {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  > span {
+    font-size: 14px;
+    margin-right: 16px;
+  }
+}
+.close {
+  width: 24px;
+  cursor: pointer;
+}
+.addoption {
+  width: 200px;
+  height: 40px;
+  margin-bottom: 15px;
+  background: #f3f3f3;
+  border: 1px dashed rgba(0, 0, 0, 0.15);
+  box-sizing: border-box;
+  border-radius: 4px;
+  text-align: center;
+  line-height: 40px;
+  cursor: pointer;
+}
+</style>
+<style lang="scss">
+</style>

src/components/Adult/inputModules/Picture.vue

@@ -1,6 +1,17 @@
 <!--  -->
 <template>
-  <div class="Big-Book-hanzi">
+  <div class="Big-Book-hanzi" v-if="curQue">
+    <div class="adult-book-input-item">
+      <span class="adult-book-lable">标题：</span>           
+      <el-input
+        type="textarea"
+        class="adult-book-input"
+        :autosize="{ minRows: 2 }"
+        placeholder="请输入标题"
+        v-model="curQue.title"
+        @blur="curQue.title = curQue.title.trim()"
+      ></el-input>
+    </div>
     <div
       class="Big-Book-hanzi-option"
       v-for="(item, index) in curQue.option"
@@ -13,33 +24,24 @@
         :changAnswer="changAnswer"
         :checkList="checkList"
         :deleteOptionOne="deleteOptionOne"
+        :type="type"
       />
     </div>
     <!-- <div class="addoption" @click="addOption">添加</div> -->
-    <div class="Big-Book-divide">
+    <!-- <div class="Big-Book-divide">
       <el-divider content-position="center">功能设置</el-divider>
     </div>
     <div style="display: flex; align-items: center">
       <el-checkbox-group v-model="checkList" @change="handleCheckedFnChange">
         <el-checkbox
-          v-for="(fnItem, fnIndex) in curQue.fn_list.slice(0,1)"
+          v-for="(fnItem, fnIndex) in curQue.fn_list.slice(0, 1)"
           :key="'fn_list' + fnItem.type + fnIndex"
           :label="fnItem.type"
           :disabled="fnItem.isDisable"
           >{{ fnItem.name }}</el-checkbox
         >
       </el-checkbox-group>
-      <!-- <span style="margin: 0 10px">请选择每行数量</span>
-      <el-select v-model="curQue.numberList.con" placeholder="请选择">
-        <el-option
-          v-for="(item, i) in curQue.numberList.arr"
-          :key="i"
-          :label="item.value"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select> -->
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -47,10 +49,103 @@
 import HzModule from "../common/HzModule.vue";
 export default {
   components: { HzModule },
-  props: ["curQue", "fn_data"],
+  props: ["curQue", "fn_data", "changeCurQue","type"],
   data() {
     return {
       checkList: [],
+      data_structure: {
+        type: "image",
+        name: "图片控件",
+        title: "",
+        option: [
+          {
+            hanzi: "",
+            pinyin: "",
+            mp3_list: [],
+            img_list: [],
+            isAnswer: "",
+            isChecked: "",
+            isJudge: "",
+            correctInput: "",
+          },
+        ],
+        correct: [
+          {
+            single: [],
+            checkBox: [],
+            judge: [],
+            input: [],
+            spell: [],
+          },
+        ],
+        fn_list: [
+          {
+            type: "image_record",
+            name: "跟读",
+            isFn: false,
+            isDisable: false,
+          },
+          {
+            type: "image_spell",
+            name: "拼写",
+            isFn: false,
+            isDisable: false,
+          },
+          {
+            type: "image_input",
+            name: "输入",
+            isFn: false,
+            isDisable: false,
+          },
+          {
+            type: "image_dobleinput",
+            name: "双输入",
+            isFn: false,
+            isDisable: false,
+          },
+          {
+            type: "image_single",
+            name: "单选",
+            isFn: false,
+            isDisable: false,
+          },
+          {
+            type: "image_checkBox",
+            name: "多选",
+            isFn: false,
+            isDisable: false,
+          },
+          {
+            type: "image_judge",
+            name: "判断",
+            isFn: false,
+            isDisable: false,
+          },
+        ],
+        numberList: {
+          type: "number",
+          name: "每行几个",
+          con: "2",
+          arr: [
+            {
+              id: 1,
+              value: 1,
+            },
+            {
+              id: 2,
+              value: 2,
+            },
+            {
+              id: 3,
+              value: 3,
+            },
+            {
+              id: 4,
+              value: 4,
+            },
+          ],
+        },
+      },
     };
   },
   computed: {},
@@ -74,7 +169,6 @@ export default {
     //选择功能设置
     handleCheckedFnChange(value) {
       let fn_list = JSON.parse(JSON.stringify(this.curQue.fn_list));
-
       fn_list = fn_list.map((item) => {
         if (value.indexOf("single") > -1 && item.type == "checkBox") {
           item.isDisable = true;
@@ -173,9 +267,16 @@ export default {
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    console.log(this.curQue.correct);
+    this.data_structure.fn_list.forEach((item) => {
+      if (item.type == this.type) {
+        item.isFn = true;
+      }
+    });
+    if (!this.curQue) {
+      this.changeCurQue(this.data_structure);
+    }
     let checkList = [];
-    this.curQue.fn_list.map((item) => {
+    this.data_structure.fn_list.map((item) => {
       if (item.isFn) {
         checkList.push(item.type);
       }

src/components/Adult/inputModules/PlayInputReacord.vue

@@ -16,207 +16,54 @@
           @blur="onBlur(curQue, 'title')"
         ></el-input>
       </div>
-      <div class="adult-book-input-item">
-        <span class="adult-book-lable">排列方式：</span>
-        <el-radio-group v-model="curQue.arrangeWay" @change="changearrangeWay">
-          <el-radio label="单列">单列</el-radio>
-          <el-radio label="双列">双列</el-radio>
-          <el-radio label="四列">四列</el-radio>
-        </el-radio-group>
-      </div>
-      <div class="adult-book-input-item">
-        <span class="adult-book-lable">配置：</span>
-        <div class="xorl">
-          <el-switch v-model="curQue.Isnumber" active-text="序号"> </el-switch>
-          <el-switch v-model="curQue.IsRecord" active-text="录音"> </el-switch>
-        </div>
-      </div>
-      <div class="main">
-        <div
-          class="row"
-          v-for="(row, rowIndex) in curQue.option"
-          :key="'row' + rowIndex"
-        >
-          <div
-            :style="{
-              width: `${
-                curQue.arrangeWay == '单列'
-                  ? '732px'
-                  : curQue.arrangeWay == '双列'
-                  ? '362px'
-                  : '177px'
-              }`,
-            }"
-            class="col"
-            v-for="(col, colIndex) in row"
-            :key="'col' + colIndex"
-          >
-            <div class="td">
-              <span v-if="curQue.Isnumber">{{ col.number }}</span>
-              <div class="content">
-                <div
-                  style="display: flex"
-                  v-for="(item, i) in col.list"
-                  :key="'cont' + i"
-                >
-                  <div
-                    v-for="(text, txIndex) in item.conList"
-                    :key="'text' + txIndex"
-                    style="display: flex"
-                  >
-                    <div v-if="text != '_'">
-                      {{ text }}
-                    </div>
-                    <span v-else>
-                      {{ text }}
-                    </span>
-                  </div>
-                  <img
-                    v-if="curQue.IsRecord"
-                    src="../../../assets/adult/mini.png"
-                    alt=""
-                  />
-                </div>
-              </div>
-            </div>
-            <p>
-              <span @click="edit(col, rowIndex, colIndex)"> 编辑 </span>
-            </p>
-          </div>
+      <div v-for="(item, index) in curQue.option" :key="'op' + index">
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable">答案：</span>
+          <el-input
+            class="adult-book-input"
+            type="textarea"
+            :autosize="{ minRows: 2 }"
+            placeholder="请输入标题"
+            v-model="item.answer"
+            @blur="onBlur(item, 'answer')"
+          ></el-input>
+          <img
+            @click="deleteOptionOne(index)"
+            class="close"
+            src="../../../assets/adult/del-close.png"
+            alt=""
+          />
         </div>
-      </div>
-    </div>
-    <el-dialog
-      title="提示"
-      :visible.sync="dialogVisible"
-      width="80%"
-      :before-close="handleClose"
-    >
-      <div class="Module" v-if="dialogData">
         <div class="adult-book-input-item">
-          <el-radio-group v-model="dialogData.type">
-            <el-radio label="英文">英文</el-radio>
-            <el-radio label="拼音+中文">拼音+中文</el-radio>
-          </el-radio-group>
+          <span class="adult-book-lable">音频：</span>
+          <Upload
+            :changeFillId="changeMp3"
+            :datafileList="item.mp3_list"
+            :filleNumber="mp3Number"
+            :uploadType="'mp3'"
+            :index="index"
+          />
         </div>
-        <div class="Modulemain">
-          <div>
-            <div class="adult-book-input-item">
-              <span class="adult-book-lable">内容：</span>
-              <el-input
-                class="adult-book-input"
-                type="textarea"
-                :autosize="{ minRows: 2 }"
-                placeholder="请输入内容"
-                v-model="dialogData.leftCon"
-                @blur="onBlur(dialogData, 'leftCon')"
-                @change="changecon(dialogData)"
-              ></el-input>
-            </div>
-            <div
-              class="adult-book-input-item"
-              v-if="dialogData.type == '拼音+中文'"
-            >
-              <span class="adult-book-lable">拼音：</span>
-              <el-input
-                class="adult-book-input"
-                type="textarea"
-                :autosize="{ minRows: 2 }"
-                placeholder="请输入拼音"
-                v-model="dialogData.leftPinyin"
-                @blur="onBlur(dialogData, 'leftPinyin')"
-              ></el-input>
-            </div>
-          </div>
-          <div>
-            <div class="adult-book-input-item" v-if="curQue.Isnumber">
-              <span class="adult-book-lable">序号：</span>
-              <el-input
-                class="adult-book-input"
-                type="textarea"
-                :autosize="{ minRows: 2 }"
-                placeholder="请输入标题"
-                v-model="dialogData.number"
-                @blur="onBlur(dialogData, 'number')"
-              ></el-input>
-            </div>
-            <div v-for="(item, index) in dialogData.list" :key="'h' + index">
-              <div class="adult-book-input-item">
-                <span class="adult-book-lable">内容：</span>
-                <el-input
-                  class="adult-book-input"
-                  type="textarea"
-                  :autosize="{ minRows: 2 }"
-                  placeholder="请输入内容"
-                  v-model="item.con"
-                  @blur="onBlur(item, 'con')"
-                  @change="changecon(item)"
-                ></el-input>
-                <img
-                  @click="deleterow(index)"
-                  class="close"
-                  src="../../../assets/adult/del-close.png"
-                  alt=""
-                />
-              </div>
-              <div
-                class="adult-book-input-item"
-                v-if="dialogData.type == '拼音+中文'"
-              >
-                <span class="adult-book-lable">拼音：</span>
-                <el-input
-                  class="adult-book-input"
-                  type="textarea"
-                  :autosize="{ minRows: 2 }"
-                  placeholder="请输入拼音"
-                  v-model="item.pinyin"
-                  @blur="onBlur(item, 'pinyin')"
-                ></el-input>
-              </div>
-              <div
-                class="adult-book-input-item"
-                v-if="dialogData.type == '拼音+中文'"
-              >
-                <span class="adult-book-lable">拼音位置：</span>
-                <el-radio-group v-model="item.pinyinSite">
-                  <el-radio label="top">上</el-radio>
-                  <el-radio label="bottom">下</el-radio>
-                  <el-radio label="left">左</el-radio>
-                  <el-radio label="right">右</el-radio>
-                </el-radio-group>
-              </div>
-              <div
-                class="adult-book-input-item"
-                v-for="(answ, anIndex) in item.answer"
-                :key="'anw' + anIndex"
-              >
-                <span class="adult-book-lable">答案：</span>
-                <el-input
-                  class="adult-book-input"
-                  type="textarea"
-                  :autosize="{ minRows: 2 }"
-                  placeholder="请输入答案"
-                  v-model="answ.con"
-                  @blur="onBlur(answ, 'con')"
-                ></el-input>
-                <img
-                  @click="deleteAnswer(index, anIndex)"
-                  class="close"
-                  src="../../../assets/adult/del-close.png"
-                  alt=""
-                />
-              </div>
-              <div class="addoption" @click="addAnswer(index)">增加答案</div>
-            </div>
-            <div class="addoption" @click="addrowCol">增加</div>
-          </div>
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable">音频控件：</span>
+          <img src="../../../assets/adult/mini.png" alt="" />
         </div>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="handleClose">取 消</el-button>
-        <el-button type="primary" @click="save">确 定</el-button>
-      </span>
-    </el-dialog>
+      <div class="addoption" @click="addOption">添加一个</div>
+      <div class="Big-Book-divide">
+        <el-divider content-position="center">功能设置</el-divider>
+        <span style="margin: 0 10px">请选择每行数量</span>
+        <el-select v-model="curQue.numberList.con" placeholder="请选择">
+          <el-option
+            v-for="(item, i) in curQue.numberList.arr"
+            :key="i"
+            :label="item.value"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -247,32 +94,12 @@ export default {
       },
       data_structure: {
         type: "play_input_record_chs",
-        name: "",
         title: "",
-        arrangeWay: "单列", //排列方式
-        Isnumber: false, //需不需要 序号
-        IsRecord: false, //需不需要录音
         option: [
-          [
-            {
-              type: "英文", //英文还是拼音+中文
-              number: "",
-              list: [
-                {
-                  leftCon: "",
-                  leftPinyin: "",
-                  con: "",
-                  pinyin: "",
-                  pinyinSite: "", //拼音的位置
-                  answer: [
-                    {
-                      con: "",
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
+          {
+            mp3_list: [],
+            answer: "",
+          },
         ],
         numberList: {
           type: "number",

src/components/Adult/inputModules/PurePreview.vue

@@ -329,6 +329,25 @@ export default {
       }
       this.changeCurQue(data);
     },
+    // 选项的图片
+    changeImage(fileList, item, index) {
+      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]",
+            media_duration: item.response.file_info_list[0].media_duration, //音频时长
+          };
+          articleImgRes.push(obj);
+        }
+      });
+      this.curQue.option[index].mp3_list = JSON.parse(
+        JSON.stringify(articleImgRes)
+      );
+    },
     // 选项的音频
     changeMp3(fileList, item, index) {
       const articleImgList = JSON.parse(JSON.stringify(fileList));

src/components/Adult/inputModules/SelectInpue.vue

@@ -47,7 +47,6 @@
         </div>
       </div>
       <div class="addoption" @click="addCon">添加一个内容</div>
-
       <div v-for="(item, Oindex) in curQue.option" :key="'op' + Oindex">
         <div class="adult-book-input-item">
           <span class="adult-book-lable">选项：</span>

src/components/Adult/inputModules/Sentence.vue

@@ -16,18 +16,18 @@
           @blur="onBlur(curQue, 'title')"
         ></el-input>
       </div>
-      <div
-        class="adult-book-input-item"
-        v-if="type == 'sentence_listen_read_chs'"
-      >
-        <span class="adult-book-lable">题目音频：</span>
-        <Upload
-          :changeFillId="changeMp3"
-          :datafileList="curQue.mp3_list"
-          :filleNumber="mp3Number"
-          :uploadType="'mp3'"
-        />
-      </div>
+      <template v-if="type == 'sentence_listen_read_chs'">
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable">题目音频：</span>
+          <Upload
+            :changeFillId="changeMp3"
+            :datafileList="curQue.mp3_list"
+            :filleNumber="mp3Number"
+            :uploadType="'mp3'"
+            :handleMp3Base64="handleChange"
+          />
+        </div>
+      </template>
       <div
         class="Big-Book-main"
         v-for="(item, index) in curQue.option"
@@ -46,13 +46,36 @@
       <div class="Big-Book-addrole">
         <div class="addoption" @click="addOption">添加一个</div>
       </div>
+      <div class="lrc-box">
+        <div
+          v-if="this.curQue.wordTime && this.curQue.wordTime.length > 0"
+          class="lrc-box"
+        >
+          <span>已有字幕时间节点</span>
+          <el-button type="text" @click="againWordTime">重新生成</el-button>
+        </div>
+        <template v-else>
+          <el-button v-if="!isWordTime" size="medium" @click="createWordTime"
+            >自动生成字幕节点</el-button
+          >
+          <p v-else>字幕节点生成中...请等待</p>
+        </template>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import SentenceModule from "../common/SentenceModule.vue";
-import Upload from "../common/Upload"
+import Upload from "../common/Upload";
+const Base64 = require("js-base64").Base64;
+import {
+  segSentences,
+  BatchSegContent,
+  createPinyin,
+  prepareTranscribe,
+  getWordTime,
+} from "@/api/ajax";
 export default {
   name: "Single",
   props: ["curQue", "fn_data", "changeCurQue", "type"],
@@ -113,11 +136,14 @@ export default {
         name: "句子模板",
         title: "",
         mp3_list: [],
+        taskId: "",
+        wordTime: [],
+        detail: [],
         option: [
           {
             mp3_list: [],
             number: "",
-            font:"",
+            font: "",
             detail: {
               pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
               sentence: "", //句子
@@ -148,12 +174,71 @@ export default {
           },
         ],
       },
+      isWordTime: false,
     };
   },
   computed: {},
   watch: {},
   //方法集合
   methods: {
+    createWordTime() {
+      this.curQue.option.forEach((item) => {
+        this.curQue.detail.push(item.detail);
+      });
+      if (this.curQue.taskId) {
+        let verseList = [];
+        this.curQue.detail.forEach((item) => {
+          verseList = verseList.concat(item.sentence);
+        });
+        if (verseList.length > 0) {
+          this.isWordTime = true;
+          let data = {
+            taskId: this.curQue.taskId,
+            verseList: JSON.stringify(verseList),
+          };
+          getWordTime(data).then((res) => {
+            this.curQue.wordTime = res.data.result;
+            this.isWordTime = false;
+          });
+        }
+      } else {
+        this.$message.warning("请先上传音频");
+      }
+    },
+    againWordTime() {
+      this.isWordTime = false;
+      this.$set(this.curQue, "wordTime", []);
+    },
+    // 上传音频文件
+    handleChange(file, fileList) {
+      let _this = this;
+      _this.getBase64(file.raw).then((res) => {
+        let base_res = res.split("base64,");
+        let data = {
+          fileName: file.raw.name,
+          speechBase64: base_res[1],
+        };
+        prepareTranscribe(data).then((res) => {
+          _this.$set(_this.curQue, "taskId", res.data.taskId);
+        });
+      });
+    },
+    getBase64(file) {
+      return new Promise(function (resolve, reject) {
+        let reader = new FileReader();
+        let imgResult = "";
+        reader.readAsDataURL(file);
+        reader.onload = function () {
+          imgResult = reader.result;
+        };
+        reader.onerror = function (error) {
+          reject(error);
+        };
+        reader.onloadend = function () {
+          resolve(imgResult);
+        };
+      });
+    },
     onBlur(item, field) {
       item[field] = item[field] ? item[field].trim() : "";
     },
@@ -352,6 +437,15 @@ export default {
     align-items: center;
   }
 }
+.lrc-box {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  > span {
+    font-size: 14px;
+    margin-right: 16px;
+  }
+}
 </style>
 <style lang="scss">
 </style>

src/views/adultInput3.vue

@@ -349,6 +349,38 @@
                       </template>
                       <template v-else> </template>
                     </template>
+                    <template
+                      v-if="
+                        topicIitem.type == 'imgage_image' ||
+                        topicIitem.type == 'image_checkBox' ||
+                        topicIitem.type == 'image_judge' ||
+                        topicIitem.type == 'image_single' ||
+                        topicIitem.type == 'image_dobleinput' ||
+                        topicIitem.type == 'image_gdcy' ||
+                        topicIitem.type == 'image_wordInput'
+                      "
+                    >
+                      <template v-if="topicIitem.is_edit">
+                        <Picture
+                          :curQue="topicIitem.data"
+                          :type="topicIitem.type"
+                          :fn_data="fn_data"
+                          :changeCurQue="changeCurQue"
+                        />
+                      </template>
+                      <template v-else> </template>
+                    </template>
+                    <template v-if="topicIitem.type == 'drag_chs'">
+                      <template v-if="topicIitem.is_edit">
+                        <Drag
+                          :curQue="topicIitem.data"
+                          :type="topicIitem.type"
+                          :fn_data="fn_data"
+                          :changeCurQue="changeCurQue"
+                        />
+                      </template>
+                      <template v-else> </template>
+                    </template>
                   </div>
                   <div
                     class="addoption"
@@ -475,6 +507,8 @@ import PurePreview from "@/components/Adult/inputModules/PurePreview.vue";
 import ZiLine from "@/components/Adult/inputModules/ZiLine.vue";
 import SelectInpue from "@/components/Adult/inputModules/SelectInpue.vue";
 import PlayInputReacord from "@/components/Adult/inputModules/PlayInputReacord.vue";
+import Drag from "@/components/Adult/inputModules/Drag.vue";
+
 
 import Textdes from "@/components/Adult/inputModules/Textdes.vue";
 import Record from "@/components/Adult/inputModules/Record.vue";
@@ -546,6 +580,7 @@ export default {
     ZiLine,
     SelectInpue,
     PlayInputReacord,
+    Drag,
   },
   data() {
     return {