Commit c7e2a0df authored by 李维's avatar 李维

feat: 支持配置多题

parent 65376b9c
...@@ -16,34 +16,44 @@ ...@@ -16,34 +16,44 @@
</head> </head>
<body> <body>
<div class="edit-data" id="edit-data"> <div class="edit-data" id="edit-data">
<el-form :model="data" label-width="80px"> <div v-for="(question, index) in data.questionSets" :key="index">
<el-form-item label="选择字母"> <div class="question-item">
<el-select v-model="data.letter" placeholder="请选择字母" filterable @change="save"> <div class="question-item-header">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-divider content-position="left">第{{ index + 1 }}题</el-divider>
</el-select>
</el-form-item>
<el-form-item label="大写">
<el-checkbox v-model="data.upperCase" @change="save"></el-checkbox>
</el-form-item>
<el-form-item label="小写">
<el-checkbox v-model="data.lowerCase" @change="save"></el-checkbox>
</el-form-item>
<el-form-item label="音频">
<div class="audio-uploader">
<el-upload
:action="uploadUrl"
:data="uploadData"
:on-success="(res, file) => handleAudioSuccess(res, file)"
:before-upload="beforeAudioUpload"
:show-file-list="false">
<el-button size="small" type="primary">{{ data.audio.url ? '重新上传' : '上传' }}</el-button>
&nbsp;&nbsp;&nbsp;&nbsp;
<span v-if="data.audio.url" class="filename" @click.stop="togglePlay()">{{ data.audio.name }}(点击播放)</span>
<audio :ref="'audio'" :src="data.audio.url" @ended.stop="audioEnded()" style="display: none;"></audio>
</el-upload>
</div> </div>
</el-form-item> </div>
</el-form> <el-form :model="question" label-width="80px">
<el-form-item label="选择字母">
<el-select v-model="question.letter" placeholder="请选择字母" filterable @change="save">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="大写">
<el-checkbox v-model="question.upperCase" @change="save"></el-checkbox>
</el-form-item>
<el-form-item label="小写">
<el-checkbox v-model="question.lowerCase" @change="save"></el-checkbox>
</el-form-item>
<el-form-item label="音频">
<div class="audio-uploader">
<el-upload
:action="uploadUrl"
:data="uploadData"
:on-success="(res, file) => handleAudioSuccess(res, file, index)"
:before-upload="beforeAudioUpload"
:show-file-list="false">
<el-button size="small" type="primary">{{ question.audio.url ? '重新上传' : '上传' }}</el-button>
&nbsp;&nbsp;&nbsp;&nbsp;
<span v-if="question.audio.url" class="filename" @click.stop="togglePlay(index)">{{ question.audio.name }}(点击播放)</span>
<audio :ref="'audio_' + index" :src="question.audio.url" @ended.stop="audioEnded()" style="display: none;"></audio>
</el-upload>
</div>
</el-form-item>
</el-form>
</div>
<div>
<el-button type="primary" @click="addQuestion">添加题目</el-button>
</div>
</div> </div>
</body> </body>
<script src="./index.js"></script> <script src="./index.js"></script>
......
...@@ -18,13 +18,8 @@ new Vue({ ...@@ -18,13 +18,8 @@ new Vue({
window.courseware.getData((dt) => { window.courseware.getData((dt) => {
if (dt) { if (dt) {
this.data = dt; this.data = dt;
if(!this.data.audio) { if(!this.data.questionSets) {
this.data.audio = { this.$set(this.data, 'questionSets', [])
url: '',
name: '',
size: 0,
duration: ""
}
} }
} }
},key); },key);
...@@ -39,15 +34,7 @@ new Vue({ ...@@ -39,15 +34,7 @@ new Vue({
return { return {
//封面上传相关 //封面上传相关
data: { data: {
letter: '', questionSets: []
upperCase: false,
lowerCase: false,
audio: {
url: '',
name: '',
size: 0,
duration: ""
}
}, },
uploadUrl: window.courseware.uploadUrl(), uploadUrl: window.courseware.uploadUrl(),
uploadData: window.courseware.uploadData(), uploadData: window.courseware.uploadData(),
...@@ -83,19 +70,19 @@ new Vue({ ...@@ -83,19 +70,19 @@ new Vue({
} }
}, },
methods: { methods: {
handleAudioSuccess(res, file) { handleAudioSuccess(res, file, qIndex) {
// 假设上传接口返回的音频URL在 res.url 中 // 假设上传接口返回的音频URL在 res.url 中
this.data.audio.url = res.url; this.data.questionSets[qIndex].audio.url = res.url;
this.data.audio.name = file.name; this.data.questionSets[qIndex].audio.name = file.name;
// 计算文件大小 // 计算文件大小
const size = file.size; const size = file.size;
if (size < 1024) { if (size < 1024) {
this.data.audio.size = size + 'B'; this.data.questionSets[qIndex].audio.size = size + 'B';
} else if (size < 1024 * 1024) { } else if (size < 1024 * 1024) {
this.data.audio.size = (size / 1024).toFixed(2) + 'KB'; this.data.questionSets[qIndex].audio.size = (size / 1024).toFixed(2) + 'KB';
} else { } else {
this.data.audio.size = (size / (1024 * 1024)).toFixed(2) + 'MB'; this.data.questionSets[qIndex].audio.size = (size / (1024 * 1024)).toFixed(2) + 'MB';
} }
// 获取音频时长 // 获取音频时长
...@@ -104,23 +91,25 @@ new Vue({ ...@@ -104,23 +91,25 @@ new Vue({
const duration = audio.duration; const duration = audio.duration;
const minutes = Math.floor(duration / 60); const minutes = Math.floor(duration / 60);
const seconds = Math.floor(duration % 60); const seconds = Math.floor(duration % 60);
this.data.audio.duration = `${minutes}:${seconds.toString().padStart(2, '0')}`; this.data.questionSets[qIndex].audio.duration = `${minutes}:${seconds.toString().padStart(2, '0')}`;
}); });
this.save(); this.save();
}, },
togglePlay() { togglePlay(qIndex) {
if(this.isPlaying) { const currentAudio = this.$refs['audio_'+qIndex][0];
this.$refs.audio.pause(); for(let i = 0; i < this.data.questionSets.length; i++) {
} else { const audio = this.$refs['audio_'+i][0];
this.$refs.audio.play(); if(audio) {
audio.pause();
}
} }
this.isPlaying = !this.isPlaying; currentAudio.play();
}, },
audioEnded() { audioEnded() {
this.isPlaying = false;
}, },
beforeAudioUpload(file) { beforeAudioUpload(file) {
...@@ -138,6 +127,21 @@ new Vue({ ...@@ -138,6 +127,21 @@ new Vue({
return true; return true;
}, },
addQuestion() {
this.data.questionSets.push({
letter: '',
upperCase: false,
lowerCase: false,
audio: {
url: '',
name: '',
size: 0,
duration: ""
}
});
this.save();
},
save() { save() {
window.courseware.setData(this.data,() => { window.courseware.setData(this.data,() => {
this.$message.success('保存成功!'); this.$message.success('保存成功!');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment