Skip to content

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

支持外部url视频

parent 26be31b2
Hide whitespace changes
Inline Side-by-side
Showing with 1104 additions and 1093 deletions
src/views/biz/course/detail.vue
View file @ e96b33e0
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</a-upload> </a-upload>
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="上传视频"> <a-form-model-item label="上传视频">
<div v-for="(video,index) in videoSeries" :label="video.chaperName" :key="video.videoId" class="video-series"> <div v-for="(video,index) in videoSeries" :label="video.chaperName" :key="video.videoId" class="video-series">
<a-row type="flex" justify="start" align="middle"> <a-row type="flex" justify="start" align="middle">
<a-col :span="6" class="video-image"> <a-col :span="6" class="video-image">
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
<a-button @click="showVideoUploadModal" :disabled="isReadOnly">上传视频</a-button> <a-button @click="showVideoUploadModal" :disabled="isReadOnly">上传视频</a-button>
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="课程简介" prop="introduce"> <a-form-model-item label="课程简介" prop="introduce">
<a-textarea row="2" v-model="step1FormModel.introduce" :disabled="isReadOnly" /> <a-textarea row="2" v-model="step1FormModel.introduce" :disabled="isReadOnly" />
</a-form-model-item> </a-form-model-item>
...@@ -186,12 +186,21 @@ ...@@ -186,12 +186,21 @@
<a-form-item> <a-form-item>
<a-input v-model="video.title" placeholder="视频标题" allowClear></a-input> <a-input v-model="video.title" placeholder="视频标题" allowClear></a-input>
</a-form-item> </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-upload ref="videoUploaderRef" name="file" :multiple="false" :show-upload-list="true" :customRequest="uploadVideo" :before-upload="beforeVideoUpload">
<a-button> <a-button>
<a-icon type="upload" />选择视频文件</a-button> <a-icon type="upload" />选择视频文件</a-button>
</a-upload> </a-upload>
</a-form-item> </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-form>
</a-modal> </a-modal>
</template> </template>
...@@ -226,1194 +235,1196 @@ ...@@ -226,1194 +235,1196 @@
</template> </template>
<script> <script>
import { uploadFile } from "@/api/biz/resource";
import { disposereq } from "@/utils/util";
import { fetchList as teacherFetchList } from "@/api/biz/teacher";
import { import {
uploadFile getDetail,
} from "@/api/biz/resource"; fetchAliyunAuth,
import { fetchAliyunPolicy,
disposereq refreshAliyunPolicy,
} from "@/utils/util"; fetchVideoInfo,
import { saveCourse,
fetchList as teacherFetchList fetchSeriesList,
} from "@/api/biz/teacher"; saveSeriesInfo,
import { deleteChaper,
saveStep1, updateChaperTitle,
saveStep2,
getDetail,
fetchAliyunAuth,
fetchAliyunPolicy,
refreshAliyunPolicy,
fetchVideoInfo,
saveCourse,
fetchSeriesList,
saveSeriesInfo,
deleteChaper,
updateChaperTitle,
} from "@/api/biz/course"; } from "@/api/biz/course";
import { import { fetchList as fetchTagList } from "@/api/biz/courseTag";
fetchList as fetchTagList import { fetchList as fetchEnterprise } from "@/api/biz/enterprise";
} 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 { export default {
// 创建完毕 // 创建完毕
created() { created() {
//路由传过来的课程ID，新建是为空 //路由传过来的课程ID，新建是为空
let courseId = this.$route.query.id; let courseId = this.$route.query.id;
if (courseId) { if (courseId) {
this.getCourseDetail(courseId); this.getCourseDetail(courseId);
} }
fetchAliyunAuth().then((res) => { fetchAliyunAuth().then((res) => {
if (res.resp_code == 200) { if (res.resp_code == 200) {
this.data = res.datas; this.data = res.datas;
this.aliyunRegion = this.data.region; this.aliyunRegion = this.data.region;
this.aliyunUserId = this.data.userId; this.aliyunUserId = this.data.userId;
} else { } else {
this.$message.info(res.resp_msg); this.$message.info(res.resp_msg);
} }
});
fetchEnterprise({
pageIndex: 1,
pageSize: 1000,
}).then((res) => {
this.enterprise = res.data;
});
fetchUserTagList({
pageIndex: 1,
pageSize: 10000,
}).then((res) => {
this.userTagList = res.data;
});
fetchTagList({
pageIndex: 1,
pageSize: 1000,
}).then((res) => {
const _tags = [];
res.data.forEach((d) => {
_tags.push({
tagId: d.id,
tagName: d.name,
}); });
});
fetchEnterprise({ this.tags = _tags;
pageIndex: 1, });
pageSize: 1000,
}).then((res) => { teacherFetchList({
this.enterprise = res.data; name: "",
}); pageIndex: 1,
fetchUserTagList({ pageSize: 1000,
pageIndex: 1, }).then((res) => {
pageSize: 10000 if (res.code == 200) {
}).then(res => { this.teacherData = res.data;
this.userTagList = res.data; const _teachers = [];
res.data.forEach((d) => {
}) const tg = _teachers.find((t) => t.id === d.orgId);
if (!tg) {
fetchTagList({ _teachers.push({
pageIndex: 1, id: d.orgId,
pageSize: 1000, name: d.orgName,
}).then((res) => { teachers: [d],
const _tags = [];
res.data.forEach((d) => {
_tags.push({
tagId: d.id,
tagName: d.name,
});
}); });
this.tags = _tags; } else {
}); tg.teachers.push(d);
}
teacherFetchList({
name: "",
pageIndex: 1,
pageSize: 1000,
}).then((res) => {
if (res.code == 200) {
this.teacherData = res.data;
const _teachers = [];
res.data.forEach((d) => {
const tg = _teachers.find((t) => t.id === d.orgId);
if (!tg) {
_teachers.push({
id: d.orgId,
name: d.orgName,
teachers: [d],
});
} else {
tg.teachers.push(d);
}
});
this.teachers = _teachers;
}
}); });
this.teachers = _teachers;
}
});
},
// 即将更新渲染
beforeUpdate() {},
data() {
//第一步保存时系列字段验证
let validateSerial = (rule, value, callback) => {
if (
this.step1FormModel.type == "SERIES" &&
this.step1FormModel.seriesId == ""
) {
callback(new Error("请选择系列"));
} else {
callback();
}
};
//第一步保存时课程价格验证
let validatePrice = (rule, value, callback) => {
if (this.step1FormModel.chargeModel == "PAY") {
if (value == "") {
callback(new Error("不能为空"));
return;
}
if (value == "0") {
callback(new Error("不能为0"));
return;
}
let exp = /^(([1-9]\d*)|\d)(\.\d{1,2})?$/;
if (!exp.test(value)) {
callback(new Error("金额格式不正确"));
return;
}
callback();
} else {
callback();
}
};
//第一步保存时有效时间验证
let validateValidPeriod = (rule, value, callback) => {
if (this.step1FormModel.chargeModel == "PAY") {
if (value == "") {
callback(new Error("不能为空"));
return;
}
if (value == "0") {
callback(new Error("不能为0"));
return;
}
let exp = /^[0-9]*$/;
if (!exp.test(value)) {
callback(new Error("只能为空数字"));
return;
}
callback();
} else {
callback();
}
};
//第一步保存时会员价格验证
let validateVipPrice = (rule, value, callback) => {
if (this.step1FormModel.chargeModel == "PAY") {
if (value == "") {
callback(new Error("不能为空"));
return;
}
if (value == "0") {
callback(new Error("不能为0"));
return;
}
let exp = /^(([1-9]\d*)|\d)(\.\d{1,2})?$/;
if (!exp.test(value)) {
callback(new Error("金额格式不正确"));
return;
}
callback();
} else {
callback();
}
};
return {
isReadOnly: this.$route.query.isReadOnly == "true",
attachment: {
title: "",
},
attachments: [],
video2update: {},
enterprise: [],
currentSeries: {},
tags: [],
selectedTags: [],
videoSeries: [],
video: {
id: "",
img: "",
file: "",
fileName: "",
title: "",
videoType: "ALI",
},
showVideoEditor: false,
teachers: [],
seriesData: [],
onUploadProgress: undefined,
authProgress: 0,
uploadDisabled: true,
resumeDisabled: true,
pauseDisabled: true,
uploader: null,
statusText: "",
aliyunRegion: "",
aliyunUserId: "",
//第一步保存时验证规则定义
step1FormRules: {
name: [
{
required: true,
message: "不能为空",
trigger: "blur",
},
],
seriesId: [
{
validator: validateSerial,
trigger: "change",
},
],
price: [
{
validator: validatePrice,
trigger: "change",
},
],
validPeriod: [
{
validator: validateValidPeriod,
trigger: "change",
},
],
vipPrice: [
{
validator: validateVipPrice,
trigger: "change",
},
],
},
//第一步表单数据对象
step1FormModel: {
id: "",
name: "",
type: "SINGLE",
introduce: "",
detail: "",
logoUrl: "",
teacherId: "",
teacherName: "",
chargeModel: "FREE",
price: "",
vipPrice: "",
validPeriod: "",
seriesId: "",
seriesName: "",
allow: "ALL",
allowOrgIds: [],
tagIds: [],
tagNames: [],
userTagIds: "",
videoType: "upload",
},
//上传封面时的进度条
loading: false,
//选择系列弹出窗口的显示控制
seriesModalVisible: false,
//视频上传窗口
videoUploadModalVisible: false,
//附件上传窗口
attachmentUploadModalVisible: false,
teacherSearchPage: {
name: "",
pageIndex: 1,
pageSize: 10,
},
detailPicList: [],
userTagList: [],
selectedUserTagIds: [],
};
},
methods: {
onVideoTypeChanged(e) {
this.video.videoType = e.target.value;
}, },
// 即将更新渲染 editVideo(video) {
beforeUpdate() {}, this.video2update = video;
data() { this.showVideoEditor = true;
//第一步保存时系列字段验证
let validateSerial = (rule, value, callback) => {
if (
this.step1FormModel.type == "SERIES" &&
this.step1FormModel.seriesId == ""
) {
callback(new Error("请选择系列"));
} else {
callback();
}
};
//第一步保存时课程价格验证
let validatePrice = (rule, value, callback) => {
if (this.step1FormModel.chargeModel == "PAY") {
if (value == "") {
callback(new Error("不能为空"));
return;
}
if (value == "0") {
callback(new Error("不能为0"));
return;
}
let exp = /^(([1-9]\d*)|\d)(\.\d{1,2})?$/;
if (!exp.test(value)) {
callback(new Error("金额格式不正确"));
return;
}
callback();
} else {
callback();
}
};
//第一步保存时有效时间验证
let validateValidPeriod = (rule, value, callback) => {
if (this.step1FormModel.chargeModel == "PAY") {
if (value == "") {
callback(new Error("不能为空"));
return;
}
if (value == "0") {
callback(new Error("不能为0"));
return;
}
let exp = /^[0-9]*$/;
if (!exp.test(value)) {
callback(new Error("只能为空数字"));
return;
}
callback();
} else {
callback();
}
};
//第一步保存时会员价格验证
let validateVipPrice = (rule, value, callback) => {
if (this.step1FormModel.chargeModel == "PAY") {
if (value == "") {
callback(new Error("不能为空"));
return;
}
if (value == "0") {
callback(new Error("不能为0"));
return;
}
let exp = /^(([1-9]\d*)|\d)(\.\d{1,2})?$/;
if (!exp.test(value)) {
callback(new Error("金额格式不正确"));
return;
}
callback();
} else {
callback();
}
};
return {
isReadOnly: this.$route.query.isReadOnly == 'true',
attachment: {
title: "",
},
attachments: [],
video2update: {},
enterprise: [],
currentSeries: {},
tags: [],
selectedTags: [],
videoSeries: [],
video: {
id: "",
img: "",
file: "",
fileName: "",
title: "",
},
showVideoEditor: false,
teachers: [],
seriesData: [],
onUploadProgress: undefined,
authProgress: 0,
uploadDisabled: true,
resumeDisabled: true,
pauseDisabled: true,
uploader: null,
statusText: "",
aliyunRegion: "",
aliyunUserId: "",
//第一步保存时验证规则定义
step1FormRules: {
name: [{
required: true,
message: "不能为空",
trigger: "blur",
}, ],
seriesId: [{
validator: validateSerial,
trigger: "change",
}, ],
price: [{
validator: validatePrice,
trigger: "change",
}, ],
validPeriod: [{
validator: validateValidPeriod,
trigger: "change",
}, ],
vipPrice: [{
validator: validateVipPrice,
trigger: "change",
}, ],
},
//第一步表单数据对象
step1FormModel: {
id: "",
name: "",
type: "SINGLE",
introduce: "",
detail: "",
logoUrl: "",
teacherId: "",
teacherName: "",
chargeModel: "FREE",
price: "",
vipPrice: "",
validPeriod: "",
seriesId: "",
seriesName: "",
allow: "ALL",
allowOrgIds: [],
tagIds: [],
tagNames: [],
userTagIds: '',
},
//上传封面时的进度条
loading: false,
//选择系列弹出窗口的显示控制
seriesModalVisible: false,
//视频上传窗口
videoUploadModalVisible: false,
//附件上传窗口
attachmentUploadModalVisible: false,
teacherSearchPage: {
name: "",
pageIndex: 1,
pageSize: 10,
},
detailPicList: [],
userTagList: [],
selectedUserTagIds: []
};
}, },
methods: { updateVideoTitle() {
editVideo(video) { const data = {
this.video2update = video; chaperId: this.video2update.id,
this.showVideoEditor = true; chaperName: this.video2update.name,
}, };
updateVideoTitle() { updateChaperTitle(data).then((resp) => {
const data = { if (resp.resp_code === 200) {
chaperId: this.video2update.id, this.$message.success("视频名称修改成功");
chaperName: this.video2update.name, } else {
}; this.$message.error(`视频名称修改失败:${resp.resp_msg}`);
updateChaperTitle(data).then((resp) => { }
if (resp.resp_code === 200) { });
this.$message.success("视频名称修改成功");
} else {
this.$message.error(`视频名称修改失败:${resp.resp_msg}`);
}
});
this.showVideoEditor = false; this.showVideoEditor = false;
}, },
closeVideoEditor() { closeVideoEditor() {
this.showVideoEditor = false; this.showVideoEditor = false;
}, },
deleteVideo(video) { deleteVideo(video) {
let self = this; let self = this;
this.$confirm({ this.$confirm({
title: `确认要删除${video.name ? video.name : ""}吗?`, title: `确认要删除${video.name ? video.name : ""}吗?`,
content: "删除操作同时会删除已经上传的视频文件", content: "删除操作同时会删除已经上传的视频文件",
onOk() { onOk() {
if (video.id != undefined) { if (video.id != undefined) {
deleteChaper(video.id).then((resp) => { deleteChaper(video.id).then((resp) => {
if (resp.resp_code === 200) { if (resp.resp_code === 200) {
self.videoSeries.forEach((item, index) => { self.videoSeries.forEach((item, index) => {
console.log(item, video); console.log(item, video);
if (item.id === video.id) { if (item.id === video.id) {
self.videoSeries.splice(index, 1); self.videoSeries.splice(index, 1);
} }
});
}
});
} else if (video.videoId != undefined) {
self.videoSeries.forEach((item, index) => {
console.log(item, video);
if (item.videoId === video.videoId) {
self.videoSeries.splice(index, 1);
}
});
}
},
onCancel() {},
});
},
formatDuraton(t) {
let time = Math.round(t);
if (time > -1) {
var hour = Math.floor(time / 3600);
var min = Math.floor(time / 60) % 60;
var sec = time % 60;
if (hour > 0) {
if (hour < 10) {
time = "0" + hour + ":";
} else {
time = hour + ":";
}
} else {
time = "";
}
if (min > 0) {
if (min < 10) {
time += "0";
}
time += min + ":";
} else {
time = "";
}
if (sec < 10) {
time += "0";
}
time += sec;
}
return time;
},
handleEnterpriseChange(value) {
this.step1FormModel.allowOrgIds = value;
},
handleUserTagChange(value){
this.selectedUserTagIds = value;
this.step1FormModel.userTagIds = value.join(',');
// console.log(this.step1FormModel.userTagIds);
},
handleSeriesSearch(value) {
this.fetchSeriesData(value, (data) => {
const _items = [];
data.forEach((d) => {
_items.push({
value: d.id,
text: d.name,
});
}); });
this.seriesData = _items; }
}); });
}, } else if (video.videoId != undefined) {
fetchSeriesData(value, callback) { self.videoSeries.forEach((item, index) => {
fetchSeriesList({ console.log(item, video);
name: value, if (item.videoId === video.videoId) {
pageIndex: 1, self.videoSeries.splice(index, 1);
pageSize: 500, }
}).then((res) => {
if (res.count === 0) {
callback([{
name: value,
id: -1,
}, ]);
} else {
const item = res.data.find((d) => d.name.trim() === value);
if (!item) {
//未找到完全匹配的
res.data.unshift({
name: value,
id: -1,
});
}
callback(res.data);
}
}); });
}
}, },
handleSeriesChange(value) { onCancel() {},
if (value.key === -1) { });
//新建 },
saveSeriesInfo({ formatDuraton(t) {
name: value.label, let time = Math.round(t);
}).then((res) => { if (time > -1) {
if (res.resp_code === 200) { var hour = Math.floor(time / 3600);
this.currentSeries = { var min = Math.floor(time / 60) % 60;
key: res.datas, var sec = time % 60;
label: value.label, if (hour > 0) {
}; if (hour < 10) {
} time = "0" + hour + ":";
}); } else {
} else { time = hour + ":";
this.currentSeries = value; }
} } else {
}, time = "";
handleTagChange(values) { }
// console.log(value) if (min > 0) {
this.selectedTags = values; if (min < 10) {
}, time += "0";
handleTeacherChange(value) { }
this.teachers.forEach((org) => { time += min + ":";
const teacher = org.teachers.find((t) => t.id === value); } else {
if (teacher) { time = "";
this.step1FormModel.teacherId = teacher.id; }
this.step1FormModel.teacherName = teacher.name; if (sec < 10) {
} time += "0";
}
time += sec;
}
return time;
},
handleEnterpriseChange(value) {
this.step1FormModel.allowOrgIds = value;
},
handleUserTagChange(value) {
this.selectedUserTagIds = value;
this.step1FormModel.userTagIds = value.join(",");
// console.log(this.step1FormModel.userTagIds);
},
handleSeriesSearch(value) {
this.fetchSeriesData(value, (data) => {
const _items = [];
data.forEach((d) => {
_items.push({
value: d.id,
text: d.name,
});
});
this.seriesData = _items;
});
},
fetchSeriesData(value, callback) {
fetchSeriesList({
name: value,
pageIndex: 1,
pageSize: 500,
}).then((res) => {
if (res.count === 0) {
callback([
{
name: value,
id: -1,
},
]);
} else {
const item = res.data.find((d) => d.name.trim() === value);
if (!item) {
//未找到完全匹配的
res.data.unshift({
name: value,
id: -1,
}); });
}, }
onSave() { callback(res.data);
}
const { });
allow, },
allowOrgIds, handleSeriesChange(value) {
chargeModel, if (value.key === -1) {
detail, //新建
introduce, saveSeriesInfo({
logoUrl, name: value.label,
name, }).then((res) => {
price, if (res.resp_code === 200) {
teacherId, this.currentSeries = {
teacherName, key: res.datas,
type, label: value.label,
validPeriod, };
vipPrice, }
tagIds, });
userTagIds, } else {
} = this.step1FormModel; this.currentSeries = value;
//验证 }
if (!name) { },
this.$message.info('请输入课程名称') handleTagChange(values) {
return // console.log(value)
} this.selectedTags = values;
if (!logoUrl) { },
this.$message.info('请上传封面') handleTeacherChange(value) {
return this.teachers.forEach((org) => {
const teacher = org.teachers.find((t) => t.id === value);
if (teacher) {
this.step1FormModel.teacherId = teacher.id;
this.step1FormModel.teacherName = teacher.name;
}
});
},
onSave() {
const {
allow,
allowOrgIds,
chargeModel,
detail,
introduce,
logoUrl,
name,
price,
teacherId,
teacherName,
type,
validPeriod,
vipPrice,
tagIds,
userTagIds,
} = this.step1FormModel;
//验证
if (!name) {
this.$message.info("请输入课程名称");
return;
}
if (!logoUrl) {
this.$message.info("请上传封面");
return;
}
if (this.videoSeries.length == 0) {
this.$message.info("请上传视频");
return;
}
if (chargeModel == "PAY") {
if (price == "") {
this.$message.info("非会员价格不能为空");
return;
}
if (price == "0") {
this.$message.info("非会员价格不能为0");
return;
}
let exp = /^(([1-9]\d*)|\d)(\.\d{1,2})?$/;
if (!exp.test(price)) {
this.$message.info("非会员价格金额格式不正确");
return;
}
if (validPeriod == "") {
this.$message.info("有效时间不能为空");
return;
}
if (validPeriod == "0") {
this.$message.info("有效时间不能为0");
return;
}
let exp1 = /^[0-9]*$/;
if (!exp1.test(validPeriod)) {
this.$message.info("有效时间只能为空数字");
return;
}
if (vipPrice == "") {
this.$message.info("会员价格不能为空");
return;
}
if (vipPrice == "0") {
this.$message.info("会员价格不能为0");
return;
}
if (!exp.test(vipPrice)) {
this.$message.info("会员价格金额格式不正确");
return;
}
}
// validateValidPeriod
// validateVipPrice
const chaperList = [];
this.videoSeries.forEach((chapter, index) => {
chaperList.push(chapter);
});
const course = {
allow,
allowOrgIds,
chargeModel,
detail,
introduce,
logoUrl,
name,
price,
teacherId,
teacherName,
type,
validPeriod,
vipPrice,
chaperList,
tagIds,
attachmenIds: [],
userTagIds,
};
if (this.currentSeries) {
course.seriesId = this.currentSeries.key;
course.seriesName = this.currentSeries.label
? this.currentSeries.label.trim()
: this.currentSeries.label;
}
const courseId = this.$route.query.id;
if (courseId) {
course.id = parseInt(courseId, 10);
}
const _tags = [];
this.selectedTags.forEach((t) => {
_tags.push(t.key);
});
course.tagIds = _tags;
this.attachments.forEach((a) => {
course.attachmenIds.push(a.id);
});
//课程介绍上传图片处理
if (this.detailPicList.length > 0) {
let urlList = this.detailPicList.map((e) => {
return e.url;
});
course.detail = urlList.join(",");
}
saveCourse(course).then((res) => {
if (res.resp_code === 200) {
this.$message.success("课程保存成功");
this.$router.push("/edu/biz/course/index");
} else {
this.$message.info(res.resp_msg);
}
});
},
//获取课程详情
getCourseDetail(id) {
getDetail(id)
.then((res) => {
if (res.resp_code == 200) {
this.step1FormModel = {
...res.datas,
};
//构建课程介绍图片list
// console.log(res.datas)
if (res.datas.detail) {
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;
// console.log(obj)
index--;
list.push(obj);
});
this.detailPicList = list;
} }
if (this.videoSeries.length == 0) { if (this.step1FormModel.allowOrgList) {
this.$message.info('请上传视频') const _enterprise = [];
return this.step1FormModel.allowOrgList.forEach((t) => {
_enterprise.push(t.orgId);
});
this.step1FormModel.allowOrgIds = _enterprise;
} }
if (chargeModel == 'PAY') {
if (price == "") { if (this.step1FormModel.tagList) {
this.$message.info("非会员价格不能为空"); this.step1FormModel.tagList.forEach((t) => {
return; this.selectedTags.push({
} key: t.tagId,
if (price == "0") { label: t.tagName,
this.$message.info("非会员价格不能为0"); });
return; });
}
let exp = /^(([1-9]\d*)|\d)(\.\d{1,2})?$/;
if (!exp.test(price)) {
this.$message.info("非会员价格金额格式不正确");
return;
}
if (validPeriod == "") {
this.$message.info("有效时间不能为空");
return;
}
if (validPeriod == "0") {
this.$message.info("有效时间不能为0");
return;
}
let exp1 = /^[0-9]*$/;
if (!exp1.test(validPeriod)) {
this.$message.info("有效时间只能为空数字");
return;
}
if (vipPrice == "") {
this.$message.info("会员价格不能为空");
return;
}
if (vipPrice == "0") {
this.$message.info("会员价格不能为0");
return;
}
if (!exp.test(vipPrice)) {
this.$message.info("会员价格金额格式不正确");
return;
}
} }
// validateValidPeriod
// validateVipPrice
const chaperList = [];
this.videoSeries.forEach((chapter, index) => {
chaperList.push(chapter);
});
const course = { this.currentSeries = {
allow, key: this.step1FormModel.seriesId,
allowOrgIds, label: this.step1FormModel.seriesName,
chargeModel,
detail,
introduce,
logoUrl,
name,
price,
teacherId,
teacherName,
type,
validPeriod,
vipPrice,
chaperList,
tagIds,
attachmenIds: [],
userTagIds,
}; };
if (this.currentSeries) {
course.seriesId = this.currentSeries.key;
course.seriesName = this.currentSeries.label ?
this.currentSeries.label.trim() :
this.currentSeries.label;
}
const courseId = this.$route.query.id; // console.log(res.datas);
if (courseId) {
course.id = parseInt(courseId, 10);
}
const _tags = []; const _attachments = [];
this.selectedTags.forEach((t) => { res.datas.attachmentList.forEach((a) => {
_tags.push(t.key); _attachments.push({
id: a.resourceId,
title: a.resourceName,
});
}); });
course.tagIds = _tags; this.attachments = _attachments;
this.attachments.forEach((a) => { const _videoSeries = [];
course.attachmenIds.push(a.id); res.datas.chaperList.forEach((cc) => {
_videoSeries.push({
...cc,
});
}); });
//课程介绍上传图片处理 this.videoSeries = _videoSeries;
if (this.detailPicList.length > 0) { //用户标签
console.log(this.step1FormModel.allow);
let urlList = this.detailPicList.map(e => { if (this.step1FormModel.allow == "USER_TAG") {
return e.url this.step1FormModel.userTagIds.split(",").forEach((item) => {
}) this.selectedUserTagIds.push(parseInt(item));
course.detail = urlList.join(',') });
} }
} else {
this.$message.info(res.resp_msg);
}
})
.catch((err) => {
disposereq(this, err);
});
},
saveCourse(course).then((res) => { //上传封面时上传中的回调
if (res.resp_code === 200) { handleChange(info) {
this.$message.success("课程保存成功"); if (info.file.status === "uploading") {
this.$router.push("/edu/biz/course/index"); this.loading = true;
} else { return;
this.$message.info(res.resp_msg); }
} },
}); //上传封面时上传前的验证
}, beforeUpload(file) {
//获取课程详情 const isJpgOrPng =
getCourseDetail(id) { file.type === "image/jpeg" || file.type === "image/png";
getDetail(id) if (!isJpgOrPng) {
.then((res) => { this.$message.info("只能上传图片");
if (res.resp_code == 200) { }
this.step1FormModel = { const isLt2M = file.size / 1024 / 1024 < 10;
...res.datas, if (!isLt2M) {
}; this.$message.error("Image must smaller than 10MB!");
//构建课程介绍图片list }
// console.log(res.datas) return isJpgOrPng && isLt2M;
if (res.datas.detail) { },
var picUrlAry = res.datas.detail.split(',') //返回课程列表
// console.log(picUrlAry) onCancel() {
var list = [] this.$router.push("/edu/biz/course/index");
var index = -1 },
picUrlAry.forEach(e => { //上传封面
var obj = {} uploadLogo(data) {
obj.uid = index + '' const formData = new FormData();
obj.name = obj.uid formData.append("file", data.file);
obj.status = 'done' uploadFile(formData)
obj.url = e .then((res) => {
// console.log(obj) if (res.data.resp_code == 200) {
index-- this.step1FormModel.logoUrl = res.data.datas.url;
list.push(obj) } else {
}) this.$message.info("上传失败");
}
this.detailPicList = list this.loading = false;
} })
if (this.step1FormModel.allowOrgList) { .catch((err) => {
const _enterprise = []; disposereq(this, err);
this.step1FormModel.allowOrgList.forEach((t) => { });
_enterprise.push(t.orgId); },
}); beforeVideoUpload(file) {
this.step1FormModel.allowOrgIds = _enterprise; const { type } = file;
} const title = file.name.substring(0, file.name.indexOf("."));
if (this.video.title == undefined || this.video.title == "") {
if (this.step1FormModel.tagList) { this.video.title = title;
this.step1FormModel.tagList.forEach((t) => { }
this.selectedTags.push({ if (type.startsWith("video")) {
key: t.tagId, return true;
label: t.tagName, } else {
}); this.$message.error("请选择视频文件");
}); return false;
} }
},
this.currentSeries = {
key: this.step1FormModel.seriesId,
label: this.step1FormModel.seriesName,
};
// console.log(res.datas);
const _attachments = [];
res.datas.attachmentList.forEach((a) => {
_attachments.push({
id: a.resourceId,
title: a.resourceName
});
});
this.attachments = _attachments;
const _videoSeries = [];
res.datas.chaperList.forEach((cc) => {
_videoSeries.push({
...cc,
});
});
this.videoSeries = _videoSeries;
//用户标签
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);
}
})
.catch((err) => {
disposereq(this, err);
});
},
//上传封面时上传中的回调 beforeAttachmentUpload(file) {
handleChange(info) { const { type } = file;
if (info.file.status === "uploading") { const title = file.name.substring(0, file.name.indexOf("."));
this.loading = true; this.attachment.title = title;
return; },
}
},
//上传封面时上传前的验证
beforeUpload(file) {
const isJpgOrPng =
file.type === "image/jpeg" || file.type === "image/png";
if (!isJpgOrPng) {
this.$message.info("只能上传图片");
}
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
this.$message.error("Image must smaller than 10MB!");
}
return isJpgOrPng && isLt2M;
},
//返回课程列表
onCancel() {
this.$router.push("/edu/biz/course/index");
},
//上传封面
uploadLogo(data) {
const formData = new FormData();
formData.append("file", data.file);
uploadFile(formData)
.then((res) => {
if (res.data.resp_code == 200) {
this.step1FormModel.logoUrl = res.data.datas.url;
} else {
this.$message.info("上传失败");
}
this.loading = false;
})
.catch((err) => {
disposereq(this, err);
});
},
beforeVideoUpload(file) {
const {
type
} = file;
const title = file.name.substring(0, file.name.indexOf("."));
if (this.video.title == undefined || this.video.title == '') {
this.video.title = title;
}
if (type.startsWith("video")) {
return true;
} else {
this.$message.error("请选择视频文件");
return false;
}
},
beforeAttachmentUpload(file) { saveAttachments() {
const { if (this.attachment) {
type const { title, id } = this.attachment;
} = file; if (!title) {
const title = file.name.substring(0, file.name.indexOf(".")); this.$message.error("请填写附件标题");
this.attachment.title = title; return;
}, }
if (!id) {
this.$message.error("请上传附件文件");
return;
}
saveAttachments() { this.attachments.push({
if (this.attachment) { title: title,
const { id: id,
title, });
id this.attachment = {};
} = this.attachment; this.attachmentUploadModalVisible = false;
if (!title) { }
this.$message.error("请填写附件标题"); },
return;
}
if (!id) {
this.$message.error("请上传附件文件");
return;
}
this.attachments.push({
title: title,
id: id,
});
this.attachment = {};
this.attachmentUploadModalVisible = false;
}
},
uploadAttachment(data) { uploadAttachment(data) {
let self = this; let self = this;
const formData = new FormData(); const formData = new FormData();
formData.append("file", data.file); formData.append("file", data.file);
uploadFile(formData) uploadFile(formData)
.then((res) => { .then((res) => {
if (res.data.resp_code == 200) { if (res.data.resp_code == 200) {
self.$refs.attachmentUploaderRef.onProgress({ self.$refs.attachmentUploaderRef.onProgress(
percent: 100, {
}, percent: 100,
data.file },
); data.file
self.attachment.id = res.data.datas.id; );
self.$refs.attachmentUploaderRef.onSuccess(null, data.file); self.attachment.id = res.data.datas.id;
} else { self.$refs.attachmentUploaderRef.onSuccess(null, data.file);
this.$message.info("上传失败"); } else {
} this.$message.info("上传失败");
this.loading = false; }
}) this.loading = false;
.catch((err) => { })
disposereq(this, err); .catch((err) => {
}); disposereq(this, err);
}, });
},
uploadVideo({ uploadVideo({ file }) {
file this.video.fileName = file.name;
}) { this.video.file = file.file;
var userData = '{"Vod":{}}';
this.video.fileName = file.name; if (this.uploader) {
this.video.file = file.file; this.uploader.stopUpload();
var userData = '{"Vod":{}}'; this.authProgress = 0;
if (this.uploader) { this.statusText = "";
this.uploader.stopUpload(); }
this.authProgress = 0; this.uploader = this.createUploader();
this.statusText = ""; this.uploader.addFile(file, null, null, null, userData);
} this.uploadDisabled = false;
this.uploader = this.createUploader(); this.pauseDisabled = true;
this.uploader.addFile(file, null, null, null, userData); this.resumeDisabled = true;
this.uploadDisabled = false; this.authUpload();
this.pauseDisabled = true; },
this.resumeDisabled = true; authUpload() {
this.authUpload(); // 然后调用 startUpload 方法, 开始上传
}, if (this.uploader !== null) {
authUpload() { this.uploader.startUpload();
// 然后调用 startUpload 方法, 开始上传 this.uploadDisabled = true;
if (this.uploader !== null) { this.pauseDisabled = false;
this.uploader.startUpload(); }
this.uploadDisabled = true; },
this.pauseDisabled = false; createUploader(type) {
} let self = this;
let uploader = new AliyunUpload.Vod({
timeout: 60000,
partSize: 1048576,
parallel: 5,
retryCount: 3,
retryDuration: 2,
region: self.aliyunRegion,
userId: self.aliyunUserId,
// 添加文件成功
addFileSuccess: function(uploadInfo) {
self.uploadDisabled = false;
self.resumeDisabled = false;
}, },
createUploader(type) { // 开始上传
let self = this; onUploadstarted: function(uploadInfo) {
let uploader = new AliyunUpload.Vod({ self.uploadVideoStatus = "uploading";
timeout: 60000, if (!uploadInfo.videoId) {
partSize: 1048576, fetchAliyunPolicy({
parallel: 5, fileName: self.video.fileName,
retryCount: 3, title: self.video.title,
retryDuration: 2, }).then((res) => {
region: self.aliyunRegion, if (res.resp_code == 200) {
userId: self.aliyunUserId, const data = res.datas;
// 添加文件成功 let uploadAuth = data.uploadAuth;
addFileSuccess: function (uploadInfo) { let uploadAddress = data.uploadAddress;
self.uploadDisabled = false; let videoId = data.videoId;
self.resumeDisabled = false; self.video.id = videoId;
}, uploader.setUploadAuthAndAddress(
// 开始上传 uploadInfo,
onUploadstarted: function (uploadInfo) { uploadAuth,
self.uploadVideoStatus = "uploading"; uploadAddress,
if (!uploadInfo.videoId) { videoId
fetchAliyunPolicy({ );
fileName: self.video.fileName, } else {
title: self.video.title, self.$message.info(res.resp_msg);
}).then((res) => { return;
if (res.resp_code == 200) { }
const data = res.datas;
let uploadAuth = data.uploadAuth;
let uploadAddress = data.uploadAddress;
let videoId = data.videoId;
self.video.id = videoId;
uploader.setUploadAuthAndAddress(
uploadInfo,
uploadAuth,
uploadAddress,
videoId
);
} else {
self.$message.info(res.resp_msg);
return;
}
});
} else {
refreshAliyunPolicy(uploadInfo.videoId).then((res) => {
if (res.resp_code == 200) {
const data = res.datas;
let uploadAuth = data.uploadAuth;
let uploadAddress = data.uploadAddress;
let videoId = data.videoId;
self.video.id = videoId;
uploader.setUploadAuthAndAddress(
uploadInfo,
uploadAuth,
uploadAddress,
videoId
);
} else {
self.$message.info(res.resp_msg);
return;
}
});
}
},
// 文件上传成功
onUploadSucceed: function (uploadInfo) {
self.$message.success("文件上传成功");
self.uploadVideoStatus = "success";
},
// 文件上传失败
onUploadFailed: function (uploadInfo, code, message) {
self.$message.error("文件上传失败");
},
// 取消文件上传
onUploadCanceled: function (uploadInfo, code, message) {
self.$message.error("文件已暂停上传");
},
// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
onUploadProgress: function (uploadInfo, totalSize, progress) {
let progressPercent = Math.ceil(progress * 100);
self.authProgress = progressPercent;
self.$refs.videoUploaderRef.onProgress({
percent: progressPercent,
},
uploadInfo.file
);
if (progressPercent === 100) {
self.$refs.videoUploaderRef.onSuccess(null, uploadInfo.file);
}
},
// 上传凭证超时
onUploadTokenExpired: function (uploadInfo) {
refreshAliyunPolicy(uploadInfo.videoId).then((res) => {
if (res.resp_code == 200) {
const data = res.datas;
let uploadAuth = data.uploadAuth;
uploader.resumeUploadWithAuth(uploadAuth);
} else {
self.$message.info(res.resp_msg);
return;
}
});
self.$message.error("文件上传超时");
},
// 全部文件上传结束
onUploadEnd: function (uploadInfo) {
// self.$message.success("文件上传完毕");
},
}); });
return uploader; } else {
refreshAliyunPolicy(uploadInfo.videoId).then((res) => {
if (res.resp_code == 200) {
const data = res.datas;
let uploadAuth = data.uploadAuth;
let uploadAddress = data.uploadAddress;
let videoId = data.videoId;
self.video.id = videoId;
uploader.setUploadAuthAndAddress(
uploadInfo,
uploadAuth,
uploadAddress,
videoId
);
} else {
self.$message.info(res.resp_msg);
return;
}
});
}
}, },
// 文件上传成功
//选择系列弹出窗口确认操作 onUploadSucceed: function(uploadInfo) {
seriesSelected() { self.$message.success("文件上传成功");
this.seriesModalClose(); self.uploadVideoStatus = "success";
}, },
//选择系列弹出窗口取消操作 // 文件上传失败
seriesModalClose() { onUploadFailed: function(uploadInfo, code, message) {
this.seriesModalVisible = false; self.$message.error("文件上传失败");
}, },
//显示选择系列弹出窗口 // 取消文件上传
openSeriesModal() { onUploadCanceled: function(uploadInfo, code, message) {
this.seriesModalVisible = true; self.$message.error("文件已暂停上传");
}, },
//系列待选表格分页操作 // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
seriesHandleTableChange() {}, onUploadProgress: function(uploadInfo, totalSize, progress) {
//系列待选表格选中操作 let progressPercent = Math.ceil(progress * 100);
seriesSelectChange(selectedRowKeys) {}, self.authProgress = progressPercent;
//显示讲师待选窗口 self.$refs.videoUploaderRef.onProgress(
showTeacherModal() { {
this.teacherHandlSearch(); percent: progressPercent,
this.teacherModalVisible = true; },
uploadInfo.file
);
if (progressPercent === 100) {
self.$refs.videoUploaderRef.onSuccess(null, uploadInfo.file);
}
}, },
showVideoUploadModal() { // 上传凭证超时
if(this.step1FormModel.type === 'SINGLE' && this.videoSeries.length>0){ onUploadTokenExpired: function(uploadInfo) {
this.$message.error("课程类型为单集,请先删除已有视频文件"); refreshAliyunPolicy(uploadInfo.videoId).then((res) => {
return; if (res.resp_code == 200) {
const data = res.datas;
let uploadAuth = data.uploadAuth;
uploader.resumeUploadWithAuth(uploadAuth);
} else { } else {
this.videoUploadModalVisible = true; self.$message.info(res.resp_msg);
return;
} }
});
self.$message.error("文件上传超时");
}, },
closeVideoUploadModal() { // 全部文件上传结束
this.videoUploadModalVisible = false; onUploadEnd: function(uploadInfo) {
this.video = {}; // self.$message.success("文件上传完毕");
}, },
});
return uploader;
},
showAttachmentUploadModal() { //选择系列弹出窗口确认操作
this.attachmentUploadModalVisible = true; seriesSelected() {
}, this.seriesModalClose();
closeAttachmentUploadModal() { },
this.attachmentUploadModalVisible = false; //选择系列弹出窗口取消操作
this.attachment = {}; seriesModalClose() {
}, this.seriesModalVisible = false;
},
//显示选择系列弹出窗口
openSeriesModal() {
this.seriesModalVisible = true;
},
//系列待选表格分页操作
seriesHandleTableChange() {},
//系列待选表格选中操作
seriesSelectChange(selectedRowKeys) {},
//显示讲师待选窗口
showTeacherModal() {
this.teacherHandlSearch();
this.teacherModalVisible = true;
},
showVideoUploadModal() {
if (
this.step1FormModel.type === "SINGLE" &&
this.videoSeries.length > 0
) {
this.$message.error("课程类型为单集,请先删除已有视频文件");
return;
} else {
this.videoUploadModalVisible = true;
}
},
closeVideoUploadModal() {
this.videoUploadModalVisible = false;
this.video = { videoType: "ALI" };
},
videoUpload() { showAttachmentUploadModal() {
if (this.video) { this.attachmentUploadModalVisible = true;
const { },
title, closeAttachmentUploadModal() {
id this.attachmentUploadModalVisible = false;
} = this.video; this.attachment = {};
if (!title) { },
this.$message.error("请填写视频标题");
return;
}
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 = [{
name: title,
videoId: id,
coverUrl: coverURL,
duration,
}];
} else {
this.videoSeries.push({
name: title,
videoId: id,
coverUrl: coverURL,
duration,
});
}
this.video = {};
this.videoUploadModalVisible = false;
}
});
}
},
//查询讲师
getTeacherList(query) {
this.teacherLoading = true;
teacherFetchList(query)
.then((res) => {
if (res.code == 200) {
this.teacherData = res.data;
var paper = {
...this.teacherPagination,
};
paper.current = query.pageIndex;
paper.total = res.count;
this.teacherPagination = paper;
} else {
this.$message.info(res.resp_msg);
}
this.teacherLoading = false;
})
.catch((err) => {
this.teacherLoading = false;
disposereq(this, err);
});
},
//显示添加章节窗口
showVideoModal() {
this.videoModalVisible = true;
},
//上传课程简介图片
uploadDetailPic(data) {
const formData = new FormData();
let uid = data.file.uid
formData.append("file", data.file);
uploadFile(formData)
.then(res => {
if (res.data.resp_code == 200) {
this.detailPicList = this.detailPicList.map(e => {
if (e.uid == uid) {
e.status = 'done'
e.url = res.data.datas.url
}
return e
})
} else {
this.detailPicList.forEach(e => {
if (e.uid == uid) {
e.status = 'error'
}
})
}
}).catch(err => {
disposereq(this, err)
})
}, videoUpload() {
beforUploadDetailPic(file) { if (this.video) {
const { title, id, videoType, videoUrl } = this.video;
if (!title) {
this.$message.error("请填写视频标题");
return;
}
const isLt2M = file.size / 1024 / 1024 < 2; if (videoType === "ALI") {
if (!isLt2M) { if (!id) {
this.$message.error('图片大小须小于2MB!'); this.$message.error("请上传视频文件");
} return;
return isLt2M; }
}, fetchVideoInfo(id).then((res) => {
uploadDetailPicChange(info) { if (res.resp_code == 200) {
if (info.file.status == 'uploading') { const { coverURL, duration } = res.datas;
this.detailPicList.push(info.file) if (this.step1FormModel.type === "SINGLE") {
} this.videoSeries = [
{
name: title,
videoId: id,
coverUrl: coverURL,
duration,
},
];
} else {
this.videoSeries.push({
name: title,
videoId: id,
coverUrl: coverURL,
duration,
});
}
}, this.video = {};
uploadDetailRemove(file) { this.videoUploadModalVisible = false;
let newList = [] }
this.detailPicList.forEach(e => { });
if (e.uid != file.uid) { } else {
newList.push(e) this.videoSeries.push({
} name: title,
}) videoType: videoType,
this.detailPicList = newList videoUrl: videoUrl,
return true; });
this.videoUploadModalVisible = false;
} }
}
}, },
//查询讲师
getTeacherList(query) {
this.teacherLoading = true;
teacherFetchList(query)
.then((res) => {
if (res.code == 200) {
this.teacherData = res.data;
var paper = {
...this.teacherPagination,
};
paper.current = query.pageIndex;
paper.total = res.count;
this.teacherPagination = paper;
} else {
this.$message.info(res.resp_msg);
}
this.teacherLoading = false;
})
.catch((err) => {
this.teacherLoading = false;
disposereq(this, err);
});
},
//显示添加章节窗口
showVideoModal() {
this.videoModalVisible = true;
},
//上传课程简介图片
uploadDetailPic(data) {
const formData = new FormData();
let uid = data.file.uid;
formData.append("file", data.file);
uploadFile(formData)
.then((res) => {
if (res.data.resp_code == 200) {
this.detailPicList = this.detailPicList.map((e) => {
if (e.uid == uid) {
e.status = "done";
e.url = res.data.datas.url;
}
return e;
});
} else {
this.detailPicList.forEach((e) => {
if (e.uid == uid) {
e.status = "error";
}
});
}
})
.catch((err) => {
disposereq(this, err);
});
},
beforUploadDetailPic(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error("图片大小须小于2MB!");
}
return isLt2M;
},
uploadDetailPicChange(info) {
if (info.file.status == "uploading") {
this.detailPicList.push(info.file);
}
},
uploadDetailRemove(file) {
let newList = [];
this.detailPicList.forEach((e) => {
if (e.uid != file.uid) {
newList.push(e);
}
});
this.detailPicList = newList;
return true;
},
},
}; };
</script> </script>
<style> <style>
.video_type {
margin-bottom: 6px;
}
.attachment-icon { .attachment-icon {
margin-right: 5px; margin-right: 5px;
} }
.detail_content { .detail_content {
background-color: #f0f2f5; background-color: #f0f2f5;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
.search_box { .search_box {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 14px; padding: 14px;
background-color: #fff; background-color: #fff;
} }
.steps-content { .steps-content {
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
} }
.uploadImg { .uploadImg {
cursor: pointer; cursor: pointer;
} }
.table_top { .table_top {
padding-bottom: 14px; padding-bottom: 14px;
} }
.video-desc { .video-desc {
margin-left: 10px; margin-left: 10px;
height: 100%; height: 100%;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
word-break: break-all; word-break: break-all;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
} }
.video-series { .video-series {
margin-top: 5px; margin-top: 5px;
} }
.btn-div { .btn-div {
text-align: center; text-align: center;
} }
.cancel-btn { .cancel-btn {
margin-left: 15px; margin-left: 15px;
} }
.video-image-background { .video-image-background {
background-position: 50%; background-position: 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.video-image { .video-image {
width: 120px; width: 120px;
height: 68px; 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
display: inline-block; 50%;
position: relative; display: inline-block;
cursor: pointer; position: relative;
background-size: 60px; cursor: pointer;
background-size: 60px;
} }
.video-image-time { .video-image-time {
position: absolute; position: absolute;
text-align: right; text-align: right;
color: #fff; color: #fff;
width: 100%; width: 100%;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 2; z-index: 2;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
padding: 0 3px; padding: 0 3px;
background-image: linear-gradient(-180deg, transparent, rgba(0, 0, 0, 0.8)); background-image: linear-gradient(-180deg, transparent, rgba(0, 0, 0, 0.8));
} }
.video-image-toolbar { .video-image-toolbar {
position: absolute; position: absolute;
text-align: right; text-align: right;
color: #fff; color: #fff;
width: 100%; width: 100%;
right: 0; right: 0;
top: 0; top: 0;
z-index: 2; z-index: 2;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
padding: 0 3px; padding: 0 3px;
} }
.video-image-play { .video-image-play {
position: absolute; position: absolute;
top: 20px; top: 20px;
left: 52px; left: 52px;
z-index: 3; z-index: 3;
color: #fff; color: #fff;
opacity: 0.4; opacity: 0.4;
} }
.video-image-cover { .video-image-cover {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
} }
</style> </style>
src/views/biz/homePageSetting/index.vue
View file @ e96b33e0
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
<a-form> <a-form>
<a-form-item label="编辑封面"> <a-form-item label="编辑封面">
<div class="siwper-editor"> <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" /> <img v-if="currentSwiper.imageUrl" :src="currentSwiper.imageUrl" :width="200" />
<div v-else> <div v-else>
......
vue.config.js
View file @ e96b33e0
...@@ -3,8 +3,8 @@ ...@@ -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 * 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://edu.qkdata.com:10081'
// const url = 'http://localhost:9090' const url = 'http://192.168.10.22:9090'
// 基础路径，发布前修改这里,当前配置打包出来的资源都是相对路径 // 基础路径，发布前修改这里,当前配置打包出来的资源都是相对路径
let publicPath = '/admin' 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