|
@@ -2,29 +2,30 @@
|
|
|
|
|
|
<template>
|
|
|
<div class="pjc">
|
|
|
- <el-page-header @back="$router.go(-1)" :content="title"></el-page-header>
|
|
|
- <h3>{{ title }}</h3>
|
|
|
- <el-form :model="courseDeail" label-width="110px">
|
|
|
- <el-form-item label="课程名称:">
|
|
|
- <el-input :maxlength="50" v-model.trim="courseDeail.name" style="width: 40%" placeholder="输入课程名称,最多50字符"></el-input>
|
|
|
+ <el-page-header @back="$router.go(-1)" :content="title" style="margin-bottom: 30px;"></el-page-header>
|
|
|
+ <!-- <h3>{{ title }}</h3> -->
|
|
|
+ <el-form :model="courseDeail" label-width="110px" :rules="rules">
|
|
|
+ <el-form-item label="课程名称:" prop="name">
|
|
|
+ <el-input :maxlength="30" show-word-limit v-model.trim="courseDeail.name" style="width: 40%" placeholder="输入课程名称,最多30字符"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="预览图:">
|
|
|
- <div style="width: 68px" @click="showSelectImg(1)">
|
|
|
- <userImage
|
|
|
+ <el-form-item label="预览图:" prop="thumb">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div style="cursor: pointer;margin-right: 10px;" @click="showApm(courseDeail.thumb)">
|
|
|
+ <userImage
|
|
|
v-if="courseDeail.thumb"
|
|
|
- width="68px"
|
|
|
- height="68px"
|
|
|
+ width="100px"
|
|
|
+ height="100px"
|
|
|
radius="5px"
|
|
|
:img_url="courseDeail.thumb"
|
|
|
:user_name="courseDeail.name"
|
|
|
- style="cursor: pointer"
|
|
|
></userImage>
|
|
|
- <div v-else class="cursor">
|
|
|
- <div>+</div>
|
|
|
+ </div>
|
|
|
+ <div class="cursor" @click="showSelectImg(1)">
|
|
|
+ <div><i class="el-icon-plus"></i></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="价格:">
|
|
|
+ <el-form-item label="价格:" prop="price">
|
|
|
<el-input-number
|
|
|
v-model="courseDeail.price"
|
|
|
:min="0"
|
|
@@ -40,39 +41,18 @@
|
|
|
>
|
|
|
</el-switch>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="课程介绍:">
|
|
|
- <div style="display: flex;">
|
|
|
- <div class="img_all">
|
|
|
- <template v-for="(item, index) in courseImages">
|
|
|
- <div class="imgout">
|
|
|
- <userImage
|
|
|
- width="68px"
|
|
|
- radius="5px"
|
|
|
- height="68px"
|
|
|
- :img_url="item"
|
|
|
- ></userImage>
|
|
|
- <div class="imgDelete" @click="imgsDelete(index)">
|
|
|
- <i class="el-icon-delete" style="color: #FFF;font-size: 18px;"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div class="cursor" @click="showSelectImg(2)">
|
|
|
- <div>+</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <!-- <el-form-item label="课程介绍:">
|
|
|
+ <el-form-item label="课程介绍:" prop="images">
|
|
|
<uploadOss
|
|
|
:headers="$xtoken"
|
|
|
:action="$action"
|
|
|
- :limit="3"
|
|
|
+ :limit="23"
|
|
|
list_type="picture-card"
|
|
|
:accept="$acceptImg"
|
|
|
:multiple="true"
|
|
|
ref="clearPicture"
|
|
|
+ coursePath="course"
|
|
|
:show-file-list="true"
|
|
|
- :file-list="item.fileList"
|
|
|
+ :file-list="courseDeail.images"
|
|
|
:on-success="handleFilesSuccess"
|
|
|
:on-preview="onFilePreView"
|
|
|
:before-upload="beforeUpload"
|
|
@@ -80,7 +60,7 @@
|
|
|
>
|
|
|
<i class="el-icon-plus"></i>
|
|
|
</uploadOss>
|
|
|
- </el-form-item> -->
|
|
|
+ </el-form-item>
|
|
|
|
|
|
<el-form-item label="课程章节" size="normal">
|
|
|
<div class="sectionout">
|
|
@@ -135,11 +115,12 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import ImageCropper from "@/components/ImageCropper";
|
|
|
+import uploadOss from '@/components/upload';
|
|
|
import { validateURL } from "@/utils/validate";
|
|
|
import {createCourse,updataCourse,getCourseDetail} from '../api'
|
|
|
export default {
|
|
|
name: "courseEdit",
|
|
|
- components: { ImageCropper },
|
|
|
+ components: { ImageCropper,uploadOss },
|
|
|
data() {
|
|
|
return {
|
|
|
curId: 0,
|
|
@@ -155,12 +136,29 @@ export default {
|
|
|
name: "",
|
|
|
price: 0,
|
|
|
thumb: "",
|
|
|
- enable: false,
|
|
|
- images: "",
|
|
|
+ enable: true,
|
|
|
+ images: [],
|
|
|
sections: [],
|
|
|
},
|
|
|
dialogVisible: false,
|
|
|
dialogImageUrl: "",
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入课程名称', trigger: 'blur' },
|
|
|
+ { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ price: [
|
|
|
+ { required: true, message: '请输入课程价格', trigger: 'blur' },
|
|
|
+ { type:'number',min: 1, message: '价格至少为1', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ thumb: [
|
|
|
+ { required: true, message: '请选择预览图', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ images: [
|
|
|
+ { required: true, message: '请选择介绍图', trigger: 'change' },
|
|
|
+ {type:'array',trigger:'change'}
|
|
|
+ ],
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
@@ -173,11 +171,32 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
- //删除介绍图片
|
|
|
- imgsDelete(index){
|
|
|
- let list = this.courseDeail.images.split(",");
|
|
|
- list.splice(index,1)
|
|
|
- this.courseDeail.images = list.join(',')
|
|
|
+ // 介绍图上传格式
|
|
|
+ beforeUpload(file) {
|
|
|
+ const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type);
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 5;
|
|
|
+ if (!isJPG) {
|
|
|
+ this.$message.error('上传图片只能是 JPG,PNG,JPEG 格式!');
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传图片大小不能超过 5MB!');
|
|
|
+ }
|
|
|
+ return isJPG && isLt2M;
|
|
|
+ },
|
|
|
+ //介绍图预览
|
|
|
+ onFilePreView(file) {
|
|
|
+ this.showApm(file.url)
|
|
|
+ },
|
|
|
+ // 介绍图删除
|
|
|
+ onFileRemove(file, fileList) {
|
|
|
+ this.courseDeail.images = fileList
|
|
|
+ },
|
|
|
+ // 介绍图上传
|
|
|
+ handleFilesSuccess(response, file, fileList) {
|
|
|
+ let fileListData = fileList.filter(e => {
|
|
|
+ return e.url;
|
|
|
+ });
|
|
|
+ this.courseDeail.images = fileListData
|
|
|
},
|
|
|
//章节信息校验
|
|
|
validateURL() {
|
|
@@ -200,10 +219,14 @@ export default {
|
|
|
uploadToData(data) {
|
|
|
data.enable = data.enable == 1 ? true : false;
|
|
|
data.price = Number(data.price);
|
|
|
- data.images = data.images.join(",");
|
|
|
+ let arr = []
|
|
|
+ data.images.forEach(item=>{
|
|
|
+ arr.push({name:item,url:item})
|
|
|
+ })
|
|
|
+ data.images = arr
|
|
|
return data;
|
|
|
},
|
|
|
- //图片上传成功回调
|
|
|
+ //预览图上传成功回调
|
|
|
company_img_success(resData) {
|
|
|
if (this.imgIndex == 1) {
|
|
|
this.courseDeail.thumb = resData.url;
|
|
@@ -219,7 +242,13 @@ export default {
|
|
|
}
|
|
|
this.company_img_show = false;
|
|
|
},
|
|
|
- //打开上传图片组件
|
|
|
+ // 查看预览图
|
|
|
+ showApm(url){
|
|
|
+ console.log(123)
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.dialogImageUrl = url;
|
|
|
+ },
|
|
|
+ //打开上传预览图片组件
|
|
|
showSelectImg(type) {
|
|
|
this.imgIndex = type;
|
|
|
this.company_img_show = true;
|
|
@@ -229,6 +258,10 @@ export default {
|
|
|
let data = JSON.parse(JSON.stringify(this.courseDeail));
|
|
|
data.enable = data.enable ? 1 : 0;
|
|
|
data.sections = JSON.stringify(data.sections);
|
|
|
+ let arr = data.images.map(item=>{
|
|
|
+ return item.url
|
|
|
+ })
|
|
|
+ data.images = arr.join(',')
|
|
|
return data;
|
|
|
},
|
|
|
// 添加课程
|
|
@@ -256,40 +289,17 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
- // 删除图片
|
|
|
- deleteImage(url, type) {
|
|
|
- this.$confirm("确定删除图片?", "提示", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- if (type) {
|
|
|
- let newList = this.courseDeail.images.filter((item) => {
|
|
|
- return item.url !== url;
|
|
|
- });
|
|
|
- this.courseDeail.images = newList;
|
|
|
- } else {
|
|
|
- this.courseDeail.thumb = [];
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- this.$message({
|
|
|
- type: "info",
|
|
|
- message: "已取消",
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
//保存
|
|
|
iffirm() {
|
|
|
if (
|
|
|
!this.courseDeail.name == "" &&
|
|
|
- !this.courseDeail.images == "" &&
|
|
|
+ this.courseDeail.images.length &&
|
|
|
!this.courseDeail.thumb == "" &&
|
|
|
- !this.courseDeail.price !== 0 &&
|
|
|
+ this.courseDeail.price &&
|
|
|
+ this.courseDeail.price !== 0 &&
|
|
|
this.validateURL()
|
|
|
) {
|
|
|
- this.$confirm("确定保存当前页面信息?", "提示", {
|
|
|
+ this.$confirm("确定保存当前课程信息?", "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "info",
|
|
@@ -315,7 +325,7 @@ export default {
|
|
|
} else {
|
|
|
this.$message({
|
|
|
type: "warning",
|
|
|
- message: "用户信息未填写完整",
|
|
|
+ message: "课程信息未填写完整",
|
|
|
});
|
|
|
}
|
|
|
},
|
|
@@ -334,7 +344,7 @@ export default {
|
|
|
console.error(err)
|
|
|
})
|
|
|
},
|
|
|
- //新建课程
|
|
|
+ //保存新建课程
|
|
|
saveCreate() {
|
|
|
let data = this.toUpdata();
|
|
|
createCourse(data).then(res=>{
|
|
@@ -352,13 +362,13 @@ export default {
|
|
|
//判断新建/修改
|
|
|
init() {
|
|
|
if (this.$route.params.id == undefined) {
|
|
|
- this.title = "创建课程";
|
|
|
+ this.title = "添加课程";
|
|
|
this.courseDeail = {
|
|
|
name: "",
|
|
|
price: 0,
|
|
|
thumb: "",
|
|
|
- enable: false,
|
|
|
- images: "",
|
|
|
+ enable: true,
|
|
|
+ images: [],
|
|
|
sections: [],
|
|
|
};
|
|
|
} else {
|
|
@@ -453,14 +463,19 @@ export default {
|
|
|
}
|
|
|
.cursor {
|
|
|
& > div {
|
|
|
- height: 68px;
|
|
|
- width: 68px;
|
|
|
- border: 2px dashed #f1f1f1;
|
|
|
+ height: 100px;
|
|
|
+ width: 100px;
|
|
|
+ background-color: #fbfdff;
|
|
|
+ border: 1px dashed #c0ccda;
|
|
|
border-radius: 5px;
|
|
|
font-size: 30px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+ i{
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|