Skip to content

O
online-edu-admin
Commit e96b33e0 authored by Liu Peng's avatar Liu Peng
Browse files
Options

支持外部url视频

parent 26be31b2
Show whitespace changes
Inline Side-by-side
Showing with 154 additions and 143 deletions
src/views/biz/course/detail.vue
View file @ e96b33e0
......@@ -186,12 +186,21 @@
<a-form-item>
<a-input v-model="video.title" placeholder="视频标题" allowClear></a-input>
</a-form-item>
<a-form-item>
<div class="video_type">
<a-radio-group :options="[
{ label: '上传添加', value: 'ALI' },
{ label: 'URL添加', value: 'URL' },
]" default-value="ALI" @change="onVideoTypeChanged" />
</div>
<a-form-item v-if="video.videoType==='ALI'">
<a-upload ref="videoUploaderRef" name="file" :multiple="false" :show-upload-list="true" :customRequest="uploadVideo" :before-upload="beforeVideoUpload">
<a-button>
<a-icon type="upload" />选择视频文件</a-button>
</a-upload>
</a-form-item>
<a-form-item v-if="video.videoType==='URL'">
<a-input v-model="video.videoUrl" placeholder="视频URL" allowClear></a-input>
</a-form-item>
</a-form>
</a-modal>
</template>
......@@ -226,18 +235,10 @@
</template>
<script>
import { uploadFile } from "@/api/biz/resource";
import { disposereq } from "@/utils/util";
import { fetchList as teacherFetchList } from "@/api/biz/teacher";
import {
uploadFile
} from "@/api/biz/resource";
import {
disposereq
} from "@/utils/util";
import {
fetchList as teacherFetchList
} from "@/api/biz/teacher";
import {
saveStep1,
saveStep2,
getDetail,
fetchAliyunAuth,
fetchAliyunPolicy,
......@@ -250,14 +251,10 @@ import {
updateChaperTitle,
} from "@/api/biz/course";
import {
fetchList as fetchTagList
} from "@/api/biz/courseTag";
import {
fetchList as fetchEnterprise
} from "@/api/biz/enterprise";
import { fetchList as fetchTagList } from "@/api/biz/courseTag";
import { fetchList as fetchEnterprise } from "@/api/biz/enterprise";
import {fetchList as fetchUserTagList} from "@/api/admin/user_tag";
import { fetchList as fetchUserTagList } from "@/api/admin/user_tag";
export default {
// 创建完毕
......@@ -285,11 +282,10 @@ export default {
});
fetchUserTagList({
pageIndex: 1,
pageSize: 10000
}).then(res => {
pageSize: 10000,
}).then((res) => {
this.userTagList = res.data;
})
});
fetchTagList({
pageIndex: 1,
......@@ -407,7 +403,7 @@ export default {
}
};
return {
isReadOnly: this.$route.query.isReadOnly == 'true',
isReadOnly: this.$route.query.isReadOnly == "true",
attachment: {
title: "",
},
......@@ -424,6 +420,7 @@ export default {
file: "",
fileName: "",
title: "",
videoType: "ALI",
},
showVideoEditor: false,
teachers: [],
......@@ -439,27 +436,37 @@ export default {
aliyunUserId: "",
//第一步保存时验证规则定义
step1FormRules: {
name: [{
name: [
{
required: true,
message: "不能为空",
trigger: "blur",
}, ],
seriesId: [{
},
],
seriesId: [
{
validator: validateSerial,
trigger: "change",
}, ],
price: [{
},
],
price: [
{
validator: validatePrice,
trigger: "change",
}, ],
validPeriod: [{
},
],
validPeriod: [
{
validator: validateValidPeriod,
trigger: "change",
}, ],
vipPrice: [{
},
],
vipPrice: [
{
validator: validateVipPrice,
trigger: "change",
}, ],
},
],
},
//第一步表单数据对象
step1FormModel: {
......@@ -481,7 +488,8 @@ export default {
allowOrgIds: [],
tagIds: [],
tagNames: [],
userTagIds: '',
userTagIds: "",
videoType: "upload",
},
//上传封面时的进度条
loading: false,
......@@ -498,10 +506,13 @@ export default {
},
detailPicList: [],
userTagList: [],
selectedUserTagIds: []
selectedUserTagIds: [],
};
},
methods: {
onVideoTypeChanged(e) {
this.video.videoType = e.target.value;
},
editVideo(video) {
this.video2update = video;
this.showVideoEditor = true;
......@@ -586,9 +597,9 @@ export default {
handleEnterpriseChange(value) {
this.step1FormModel.allowOrgIds = value;
},
handleUserTagChange(value){
handleUserTagChange(value) {
this.selectedUserTagIds = value;
this.step1FormModel.userTagIds = value.join(',');
this.step1FormModel.userTagIds = value.join(",");
// console.log(this.step1FormModel.userTagIds);
},
handleSeriesSearch(value) {
......@@ -610,10 +621,12 @@ export default {
pageSize: 500,
}).then((res) => {
if (res.count === 0) {
callback([{
callback([
{
name: value,
id: -1,
}, ]);
},
]);
} else {
const item = res.data.find((d) => d.name.trim() === value);
if (!item) {
......@@ -658,7 +671,6 @@ export default {
});
},
onSave() {
const {
allow,
allowOrgIds,
......@@ -678,18 +690,18 @@ export default {
} = this.step1FormModel;
//验证
if (!name) {
this.$message.info('请输入课程名称')
return
this.$message.info("请输入课程名称");
return;
}
if (!logoUrl) {
this.$message.info('请上传封面')
return
this.$message.info("请上传封面");
return;
}
if (this.videoSeries.length == 0) {
this.$message.info('请上传视频')
return
this.$message.info("请上传视频");
return;
}
if (chargeModel == 'PAY') {
if (chargeModel == "PAY") {
if (price == "") {
this.$message.info("非会员价格不能为空");
return;
......@@ -758,9 +770,9 @@ export default {
};
if (this.currentSeries) {
course.seriesId = this.currentSeries.key;
course.seriesName = this.currentSeries.label ?
this.currentSeries.label.trim() :
this.currentSeries.label;
course.seriesName = this.currentSeries.label
? this.currentSeries.label.trim()
: this.currentSeries.label;
}
const courseId = this.$route.query.id;
......@@ -779,11 +791,10 @@ export default {
});
//课程介绍上传图片处理
if (this.detailPicList.length > 0) {
let urlList = this.detailPicList.map(e => {
return e.url
})
course.detail = urlList.join(',')
let urlList = this.detailPicList.map((e) => {
return e.url;
});
course.detail = urlList.join(",");
}
saveCourse(course).then((res) => {
......@@ -806,22 +817,22 @@ export default {
//构建课程介绍图片list
// console.log(res.datas)
if (res.datas.detail) {
var picUrlAry = res.datas.detail.split(',')
var picUrlAry = res.datas.detail.split(",");
// console.log(picUrlAry)
var list = []
var index = -1
picUrlAry.forEach(e => {
var obj = {}
obj.uid = index + ''
obj.name = obj.uid
obj.status = 'done'
obj.url = e
var list = [];
var index = -1;
picUrlAry.forEach((e) => {
var obj = {};
obj.uid = index + "";
obj.name = obj.uid;
obj.status = "done";
obj.url = e;
// console.log(obj)
index--
list.push(obj)
})
index--;
list.push(obj);
});
this.detailPicList = list
this.detailPicList = list;
}
if (this.step1FormModel.allowOrgList) {
const _enterprise = [];
......@@ -851,7 +862,7 @@ export default {
res.datas.attachmentList.forEach((a) => {
_attachments.push({
id: a.resourceId,
title: a.resourceName
title: a.resourceName,
});
});
this.attachments = _attachments;
......@@ -864,14 +875,12 @@ export default {
});
this.videoSeries = _videoSeries;
//用户标签
console.log(this.step1FormModel.allow)
if(this.step1FormModel.allow == 'USER_TAG'){
this.step1FormModel.userTagIds.split(',').forEach(item => {
console.log(this.step1FormModel.allow);
if (this.step1FormModel.allow == "USER_TAG") {
this.step1FormModel.userTagIds.split(",").forEach((item) => {
this.selectedUserTagIds.push(parseInt(item));
})
});
}
} else {
this.$message.info(res.resp_msg);
}
......@@ -923,11 +932,9 @@ export default {
});
},
beforeVideoUpload(file) {
const {
type
} = file;
const { type } = file;
const title = file.name.substring(0, file.name.indexOf("."));
if (this.video.title == undefined || this.video.title == '') {
if (this.video.title == undefined || this.video.title == "") {
this.video.title = title;
}
if (type.startsWith("video")) {
......@@ -939,19 +946,14 @@ export default {
},
beforeAttachmentUpload(file) {
const {
type
} = file;
const { type } = file;
const title = file.name.substring(0, file.name.indexOf("."));
this.attachment.title = title;
},
saveAttachments() {
if (this.attachment) {
const {
title,
id
} = this.attachment;
const { title, id } = this.attachment;
if (!title) {
this.$message.error("请填写附件标题");
return;
......@@ -977,7 +979,8 @@ export default {
uploadFile(formData)
.then((res) => {
if (res.data.resp_code == 200) {
self.$refs.attachmentUploaderRef.onProgress({
self.$refs.attachmentUploaderRef.onProgress(
{
percent: 100,
},
data.file
......@@ -994,10 +997,7 @@ export default {
});
},
uploadVideo({
file
}) {
uploadVideo({ file }) {
this.video.fileName = file.name;
this.video.file = file.file;
var userData = '{"Vod":{}}';
......@@ -1032,12 +1032,12 @@ export default {
region: self.aliyunRegion,
userId: self.aliyunUserId,
// 添加文件成功
addFileSuccess: function (uploadInfo) {
addFileSuccess: function(uploadInfo) {
self.uploadDisabled = false;
self.resumeDisabled = false;
},
// 开始上传
onUploadstarted: function (uploadInfo) {
onUploadstarted: function(uploadInfo) {
self.uploadVideoStatus = "uploading";
if (!uploadInfo.videoId) {
fetchAliyunPolicy({
......@@ -1083,23 +1083,24 @@ export default {
}
},
// 文件上传成功
onUploadSucceed: function (uploadInfo) {
onUploadSucceed: function(uploadInfo) {
self.$message.success("文件上传成功");
self.uploadVideoStatus = "success";
},
// 文件上传失败
onUploadFailed: function (uploadInfo, code, message) {
onUploadFailed: function(uploadInfo, code, message) {
self.$message.error("文件上传失败");
},
// 取消文件上传
onUploadCanceled: function (uploadInfo, code, message) {
onUploadCanceled: function(uploadInfo, code, message) {
self.$message.error("文件已暂停上传");
},
// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
onUploadProgress: function (uploadInfo, totalSize, progress) {
onUploadProgress: function(uploadInfo, totalSize, progress) {
let progressPercent = Math.ceil(progress * 100);
self.authProgress = progressPercent;
self.$refs.videoUploaderRef.onProgress({
self.$refs.videoUploaderRef.onProgress(
{
percent: progressPercent,
},
uploadInfo.file
......@@ -1109,7 +1110,7 @@ export default {
}
},
// 上传凭证超时
onUploadTokenExpired: function (uploadInfo) {
onUploadTokenExpired: function(uploadInfo) {
refreshAliyunPolicy(uploadInfo.videoId).then((res) => {
if (res.resp_code == 200) {
const data = res.datas;
......@@ -1123,7 +1124,7 @@ export default {
self.$message.error("文件上传超时");
},
// 全部文件上传结束
onUploadEnd: function (uploadInfo) {
onUploadEnd: function(uploadInfo) {
// self.$message.success("文件上传完毕");
},
});
......@@ -1152,7 +1153,10 @@ export default {
this.teacherModalVisible = true;
},
showVideoUploadModal() {
if(this.step1FormModel.type === 'SINGLE' && this.videoSeries.length>0){
if (
this.step1FormModel.type === "SINGLE" &&
this.videoSeries.length > 0
) {
this.$message.error("课程类型为单集,请先删除已有视频文件");
return;
} else {
......@@ -1161,7 +1165,7 @@ export default {
},
closeVideoUploadModal() {
this.videoUploadModalVisible = false;
this.video = {};
this.video = { videoType: "ALI" };
},
showAttachmentUploadModal() {
......@@ -1174,32 +1178,29 @@ export default {
videoUpload() {
if (this.video) {
const {
title,
id
} = this.video;
const { title, id, videoType, videoUrl } = this.video;
if (!title) {
this.$message.error("请填写视频标题");
return;
}
if (videoType === "ALI") {
if (!id) {
this.$message.error("请上传视频文件");
return;
}
fetchVideoInfo(id).then((res) => {
if (res.resp_code == 200) {
console.log(this.step1FormModel.type)
const {
coverURL,
duration
} = res.datas;
if (this.step1FormModel.type === 'SINGLE') {
this.videoSeries = [{
const { coverURL, duration } = res.datas;
if (this.step1FormModel.type === "SINGLE") {
this.videoSeries = [
{
name: title,
videoId: id,
coverUrl: coverURL,
duration,
}];
},
];
} else {
this.videoSeries.push({
name: title,
......@@ -1213,6 +1214,14 @@ export default {
this.videoUploadModalVisible = false;
}
});
} else {
this.videoSeries.push({
name: title,
videoType: videoType,
videoUrl: videoUrl,
});
this.videoUploadModalVisible = false;
}
}
},
//查询讲师
......@@ -1245,59 +1254,60 @@ export default {
//上传课程简介图片
uploadDetailPic(data) {
const formData = new FormData();
let uid = data.file.uid
let uid = data.file.uid;
formData.append("file", data.file);
uploadFile(formData)
.then(res => {
.then((res) => {
if (res.data.resp_code == 200) {
this.detailPicList = this.detailPicList.map(e => {
this.detailPicList = this.detailPicList.map((e) => {
if (e.uid == uid) {
e.status = 'done'
e.url = res.data.datas.url
e.status = "done";
e.url = res.data.datas.url;
}
return e
})
return e;
});
} else {
this.detailPicList.forEach(e => {
this.detailPicList.forEach((e) => {
if (e.uid == uid) {
e.status = 'error'
e.status = "error";
}
})
});
}
}).catch(err => {
disposereq(this, err)
})
.catch((err) => {
disposereq(this, err);
});
},
beforUploadDetailPic(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error('图片大小须小于2MB!');
this.$message.error("图片大小须小于2MB!");
}
return isLt2M;
},
uploadDetailPicChange(info) {
if (info.file.status == 'uploading') {
this.detailPicList.push(info.file)
if (info.file.status == "uploading") {
this.detailPicList.push(info.file);
}
},
uploadDetailRemove(file) {
let newList = []
this.detailPicList.forEach(e => {
let newList = [];
this.detailPicList.forEach((e) => {
if (e.uid != file.uid) {
newList.push(e)
newList.push(e);
}
})
this.detailPicList = newList
});
this.detailPicList = newList;
return true;
}
},
},
};
</script>
<style>
.video_type {
margin-bottom: 6px;
}
.attachment-icon {
margin-right: 5px;
}
......@@ -1365,7 +1375,8 @@ export default {
.video-image {
width: 120px;
height: 68px;
background: #d5d5d5 url("../../../assets/img/course/video-bg.png") no-repeat 50%;
background: #d5d5d5 url("../../../assets/img/course/video-bg.png") no-repeat
50%;
display: inline-block;
position: relative;
cursor: pointer;
......
src/views/biz/homePageSetting/index.vue
View file @ e96b33e0
......@@ -77,7 +77,7 @@
<a-form>
<a-form-item label="编辑封面">
<div class="siwper-editor">
<a-upload name="file" :multiple="false" list-type="picture-card" :show-upload-list="false" :customRequest="uploadSwiperImg" :before-upload="beforeUpload">
<a-upload accept="image/*" name="file" :multiple="false" list-type="picture-card" :show-upload-list="false" :customRequest="uploadSwiperImg" :before-upload="beforeUpload">
<img v-if="currentSwiper.imageUrl" :src="currentSwiper.imageUrl" :width="200" />
<div v-else>
......
vue.config.js
View file @ e96b33e0
......@@ -3,8 +3,8 @@
* https://cli.vuejs.org/zh/config/#%E7%9B%AE%E6%A0%87%E6%B5%8F%E8%A7%88%E5%99%A8
*
*/
const url = 'http://edu.qkdata.com:10081'
// const url = 'http://localhost:9090'
// const url = 'http://edu.qkdata.com:10081'
const url = 'http://192.168.10.22:9090'
// 基础路径，发布前修改这里,当前配置打包出来的资源都是相对路径
let publicPath = '/admin'
......
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