|
|
@@ -64,10 +64,14 @@
|
|
|
label="知识类别"
|
|
|
prop="subType">
|
|
|
<el-select v-model="form.subType">
|
|
|
- <el-option label="演奏小技巧" :value="1"></el-option>
|
|
|
- <el-option label="乐理基础" :value="2"></el-option>
|
|
|
- <el-option label="乐器保养" :value="3"></el-option>
|
|
|
- <el-option label="乐曲演奏展示" :value="4"></el-option>
|
|
|
+ <el-option label="演奏小技巧"
|
|
|
+ :value="1"></el-option>
|
|
|
+ <el-option label="乐理基础"
|
|
|
+ :value="2"></el-option>
|
|
|
+ <el-option label="乐器保养"
|
|
|
+ :value="3"></el-option>
|
|
|
+ <el-option label="乐曲演奏展示"
|
|
|
+ :value="4"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="内容"
|
|
|
@@ -134,35 +138,41 @@
|
|
|
<el-radio :label="2">上传</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-if="formRadio == 1" label="视频地址"
|
|
|
+ <el-form-item v-if="formRadio == 1"
|
|
|
+ label="视频地址"
|
|
|
label-width="90px"
|
|
|
prop="url">
|
|
|
<el-input v-model="dialogForm.url"
|
|
|
style="width: 100%;"
|
|
|
autocomplete="off"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-if="formRadio == 2" label="上传视频"
|
|
|
+ <el-form-item v-if="formRadio == 2"
|
|
|
+ label="上传视频"
|
|
|
label-width="90px"
|
|
|
prop="videoUrl">
|
|
|
<!-- <el-input v-model="dialogForm.url"
|
|
|
style="width: 100%;"
|
|
|
autocomplete="off"></el-input> -->
|
|
|
- <el-upload
|
|
|
- class="upload-demo"
|
|
|
- style="display: inline-block"
|
|
|
- v-loading="uploadLoading"
|
|
|
- action="/api-web/uploadFile"
|
|
|
- :before-upload="beforeUpload"
|
|
|
- :on-success="handleUploadSuccess"
|
|
|
- :on-error="handleUploadError"
|
|
|
- :show-file-list="false"
|
|
|
- accept=".mp4"
|
|
|
- :file-list="fileList"
|
|
|
- :on-exceed="handleExceed">
|
|
|
- <video style="width: 120px; height: 120px" v-if="dialogForm.videoUrl" type="video/mp4" preload="auto" :src="dialogForm.videoUrl"></video>
|
|
|
- <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ <el-upload class="upload-demo"
|
|
|
+ style="display: inline-block"
|
|
|
+ v-loading="uploadLoading"
|
|
|
+ action="/api-web/uploadFile"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :on-success="handleUploadSuccess"
|
|
|
+ :on-error="handleUploadError"
|
|
|
+ :show-file-list="false"
|
|
|
+ accept=".mp4"
|
|
|
+ :file-list="fileList"
|
|
|
+ :on-exceed="handleExceed">
|
|
|
+ <video style="width: 120px; height: 120px"
|
|
|
+ v-if="dialogForm.videoUrl"
|
|
|
+ type="video/mp4"
|
|
|
+ preload="auto"
|
|
|
+ :src="dialogForm.videoUrl"></video>
|
|
|
+ <i v-else
|
|
|
+ class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
|
- <p class="imageSize" >只能上传mp4文件, 且不超过100M</p>
|
|
|
+ <p class="imageSize">只能上传mp4文件, 且不超过100M</p>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div slot="footer"
|
|
|
@@ -182,7 +192,8 @@
|
|
|
<p>{{ typeCheck(dataInfo.type) }}</p>
|
|
|
<p>{{ dataInfo.updateTime }}</p>
|
|
|
</div>
|
|
|
- <div class="msgWrap quill-editor ql-editor" v-html="dataInfo.content"></div>
|
|
|
+ <div class="msgWrap quill-editor ql-editor"
|
|
|
+ v-html="dataInfo.content"></div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
@@ -315,7 +326,7 @@ export default {
|
|
|
fileList: [],
|
|
|
dialogFormRules: {
|
|
|
url: [{ required: true, message: "请输入视频地址", trigger: "blur" }],
|
|
|
- videoUrl: [{required: true, message: "请上传视频", trigger: 'blur'}]
|
|
|
+ videoUrl: [{ required: true, message: "请上传视频", trigger: 'blur' }]
|
|
|
},
|
|
|
form: {
|
|
|
title: null,
|
|
|
@@ -403,11 +414,11 @@ export default {
|
|
|
// 插入图片，res为服务器返回的图片链接地址
|
|
|
const params = {
|
|
|
poster: dialogForm.poster,
|
|
|
- url: this.formRadio == 1 ? dialogForm.url : dialogForm.videoUrl
|
|
|
+ url: this.formRadio == 1 ? dialogForm.url : dialogForm.videoUrl,
|
|
|
}
|
|
|
quill.insertEmbed(this.editorIndex, "video", params);
|
|
|
// 调整光标到最后
|
|
|
- quill.setSelection(this.editorIndex + 1);
|
|
|
+ quill.setSelection(this.editorIndex + 1, { preload: false });
|
|
|
|
|
|
this.dialogFormVisible = false;
|
|
|
this.dialogForm = {
|
|
|
@@ -501,7 +512,7 @@ export default {
|
|
|
onReSet (formName) {
|
|
|
this.$refs[formName].resetFields();
|
|
|
},
|
|
|
- onLook() {
|
|
|
+ onLook () {
|
|
|
// 预览
|
|
|
let dataInfo = this.dataInfo
|
|
|
dataInfo.title = this.form.title
|
|
|
@@ -551,11 +562,11 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
- handleUploadImgError(file) {
|
|
|
+ handleUploadImgError (file) {
|
|
|
this.uploadImgLoading = false
|
|
|
this.$message.error('上传失败')
|
|
|
},
|
|
|
- handleImgSuccess(res, file) {
|
|
|
+ handleImgSuccess (res, file) {
|
|
|
this.uploadImgLoading = false
|
|
|
this.dialogForm.poster = res.data.url
|
|
|
},
|
|
|
@@ -573,7 +584,7 @@ export default {
|
|
|
if (!isLt2M) {
|
|
|
this.$message.error("上传图片大小不能超过 2MB!");
|
|
|
}
|
|
|
- if(isImage && isLt2M) {
|
|
|
+ if (isImage && isLt2M) {
|
|
|
this.uploadImgLoading = true
|
|
|
}
|
|
|
return isImage && isLt2M;
|
|
|
@@ -609,7 +620,7 @@ export default {
|
|
|
};
|
|
|
return tempTitle[type];
|
|
|
},
|
|
|
- typeCheck(type) {
|
|
|
+ typeCheck (type) {
|
|
|
// 精彩活动 1 0
|
|
|
// 热门资讯 2 1
|
|
|
// 专项训练 4 2
|
|
|
@@ -639,29 +650,29 @@ export default {
|
|
|
onEditorChange ({ quill, html, text }) {
|
|
|
this.form.content = html;
|
|
|
},
|
|
|
- beforeUpload(file) {
|
|
|
+ beforeUpload (file) {
|
|
|
// const isJPG = file.type === 'image/jpeg';
|
|
|
const isLt2M = file.size / 1024 / 1024 < 100;
|
|
|
|
|
|
// if (!isJPG) {
|
|
|
// this.$message.error('上传头像图片只能是 JPG 格式!');
|
|
|
// }
|
|
|
- if (!isLt2M) {
|
|
|
- this.$message.error('上传视频大小不能超过 100MB!');
|
|
|
- }
|
|
|
- this.uploadLoading = true
|
|
|
- return isLt2M;
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传视频大小不能超过 100MB!');
|
|
|
+ }
|
|
|
+ this.uploadLoading = true
|
|
|
+ return isLt2M;
|
|
|
},
|
|
|
- handleUploadError(file) {
|
|
|
+ handleUploadError (file) {
|
|
|
this.uploadLoading = false
|
|
|
this.$message.error('上传视频失败')
|
|
|
},
|
|
|
- handleUploadSuccess(file, fileList) {
|
|
|
+ handleUploadSuccess (file, fileList) {
|
|
|
this.uploadLoading = false
|
|
|
this.$message.success('上传视频成功')
|
|
|
this.dialogForm.videoUrl = file.data.url;
|
|
|
},
|
|
|
- handleExceed(files, fileList) {
|
|
|
+ handleExceed (files, fileList) {
|
|
|
this.$message.error('您已上传过视频')
|
|
|
// this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
|
|
}
|
|
|
@@ -716,7 +727,8 @@ export default {
|
|
|
/deep/.el-tree-node__content {
|
|
|
height: 40px !important;
|
|
|
}
|
|
|
-/deep/.avatar-uploader .el-upload, /deep/.upload-demo .el-upload {
|
|
|
+/deep/.avatar-uploader .el-upload,
|
|
|
+/deep/.upload-demo .el-upload {
|
|
|
border-radius: 6px;
|
|
|
cursor: pointer;
|
|
|
position: relative;
|
