Commit c7e2a0df authored by 李维's avatar 李维

feat: 支持配置多题

parent 65376b9c
......@@ -16,35 +16,45 @@
</head>
<body>
<div class="edit-data" id="edit-data">
<el-form :model="data" label-width="80px">
<div v-for="(question, index) in data.questionSets" :key="index">
<div class="question-item">
<div class="question-item-header">
<el-divider content-position="left">第{{ index + 1 }}题</el-divider>
</div>
</div>
<el-form :model="question" label-width="80px">
<el-form-item label="选择字母">
<el-select v-model="data.letter" placeholder="请选择字母" filterable @change="save">
<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="data.upperCase" @change="save"></el-checkbox>
<el-checkbox v-model="question.upperCase" @change="save"></el-checkbox>
</el-form-item>
<el-form-item label="小写">
<el-checkbox v-model="data.lowerCase" @change="save"></el-checkbox>
<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)"
:on-success="(res, file) => handleAudioSuccess(res, file, index)"
:before-upload="beforeAudioUpload"
:show-file-list="false">
<el-button size="small" type="primary">{{ data.audio.url ? '重新上传' : '上传' }}</el-button>
<el-button size="small" type="primary">{{ question.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>
<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>
</body>
<script src="./index.js"></script>
</html>
\ No newline at end of file
......@@ -18,13 +18,8 @@ new Vue({
window.courseware.getData((dt) => {
if (dt) {
this.data = dt;
if(!this.data.audio) {
this.data.audio = {
url: '',
name: '',
size: 0,
duration: ""
}
if(!this.data.questionSets) {
this.$set(this.data, 'questionSets', [])
}
}
},key);
......@@ -39,15 +34,7 @@ new Vue({
return {
//封面上传相关
data: {
letter: '',
upperCase: false,
lowerCase: false,
audio: {
url: '',
name: '',
size: 0,
duration: ""
}
questionSets: []
},
uploadUrl: window.courseware.uploadUrl(),
uploadData: window.courseware.uploadData(),
......@@ -83,19 +70,19 @@ new Vue({
}
},
methods: {
handleAudioSuccess(res, file) {
handleAudioSuccess(res, file, qIndex) {
// 假设上传接口返回的音频URL在 res.url 中
this.data.audio.url = res.url;
this.data.audio.name = file.name;
this.data.questionSets[qIndex].audio.url = res.url;
this.data.questionSets[qIndex].audio.name = file.name;
// 计算文件大小
const size = file.size;
if (size < 1024) {
this.data.audio.size = size + 'B';
this.data.questionSets[qIndex].audio.size = size + 'B';
} 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 {
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({
const duration = audio.duration;
const minutes = 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();
},
togglePlay() {
if(this.isPlaying) {
this.$refs.audio.pause();
} else {
this.$refs.audio.play();
togglePlay(qIndex) {
const currentAudio = this.$refs['audio_'+qIndex][0];
for(let i = 0; i < this.data.questionSets.length; i++) {
const audio = this.$refs['audio_'+i][0];
if(audio) {
audio.pause();
}
this.isPlaying = !this.isPlaying;
}
currentAudio.play();
},
audioEnded() {
this.isPlaying = false;
},
beforeAudioUpload(file) {
......@@ -138,6 +127,21 @@ new Vue({
return true;
},
addQuestion() {
this.data.questionSets.push({
letter: '',
upperCase: false,
lowerCase: false,
audio: {
url: '',
name: '',
size: 0,
duration: ""
}
});
this.save();
},
save() {
window.courseware.setData(this.data,() => {
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