|
@@ -9,37 +9,21 @@
|
|
|
<el-input v-model.trim="courseDeail.name"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="预览图:">
|
|
|
- <el-upload
|
|
|
- action="#"
|
|
|
- list-type="picture-card"
|
|
|
- :auto-upload="false"
|
|
|
- :file-list="courseDeail.img_url"
|
|
|
- :limit="1"
|
|
|
- :on-change="uploadChange"
|
|
|
- >
|
|
|
- <i slot="default" class="el-icon-plus"></i>
|
|
|
- <div slot="file" slot-scope="{ file }">
|
|
|
- <img
|
|
|
- class="el-upload-list__item-thumbnail"
|
|
|
- :src="file.url"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <span class="el-upload-list__item-actions">
|
|
|
- <span
|
|
|
- class="el-upload-list__item-preview"
|
|
|
- @click="handlePictureCardPreview(file)"
|
|
|
- >
|
|
|
- <i class="el-icon-zoom-in"></i>
|
|
|
- </span>
|
|
|
- <span
|
|
|
- class="el-upload-list__item-delete"
|
|
|
- @click="handleRemove(file)"
|
|
|
- >
|
|
|
- <i class="el-icon-delete"></i>
|
|
|
- </span>
|
|
|
- </span>
|
|
|
+ <div style="width: 68px;" @click="showSelectImg()">
|
|
|
+ <userImage
|
|
|
+ v-if="courseDeail.thumb"
|
|
|
+ width="68px"
|
|
|
+ height="68px"
|
|
|
+ :img_url="courseDeail.thumb"
|
|
|
+ :user_name="courseDeail.name"
|
|
|
+ ></userImage>
|
|
|
+ <div v-else class="cursor">
|
|
|
+ <div>
|
|
|
+ +
|
|
|
+ </div>
|
|
|
+ <!-- <div>上传预览图</div> -->
|
|
|
</div>
|
|
|
- </el-upload>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="价格:">
|
|
|
<el-input-number
|
|
@@ -63,7 +47,7 @@
|
|
|
action="#"
|
|
|
list-type="picture-card"
|
|
|
:auto-upload="false"
|
|
|
- :file-list="courseDeail.imgList"
|
|
|
+ :file-list="courseDeail.images"
|
|
|
:limit="20"
|
|
|
multiple
|
|
|
:on-change="uploadChange2"
|
|
@@ -97,14 +81,14 @@
|
|
|
<div class="sectionout">
|
|
|
<div
|
|
|
class="sectionInner"
|
|
|
- v-for="(item, index) in courseDeail.courseSection"
|
|
|
+ v-for="(item, index) in courseDeail.sections"
|
|
|
:key="index"
|
|
|
>
|
|
|
<div class="sectionName">
|
|
|
<el-input v-model.trim="item.name"></el-input>
|
|
|
</div>
|
|
|
<div class="sectionUrl">
|
|
|
- <el-input v-model.trim="item.url"></el-input>
|
|
|
+ <el-input v-model.trim="item.link"></el-input>
|
|
|
</div>
|
|
|
<div class="del">
|
|
|
<el-button
|
|
@@ -123,7 +107,7 @@
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item style="display: flex;flex-direction: row-reverse;">
|
|
|
+ <el-form-item style="display: flex; flex-direction: row-reverse">
|
|
|
<el-button @click="$router.go(-1)">取消</el-button>
|
|
|
<el-button @click="iffirm">{{ alterCreate }}</el-button>
|
|
|
</el-form-item>
|
|
@@ -131,52 +115,56 @@
|
|
|
<el-dialog :visible.sync="dialogVisible">
|
|
|
<img width="100%" :src="dialogImageUrl" alt="" />
|
|
|
</el-dialog>
|
|
|
+ <image-cropper
|
|
|
+ v-loading="company_img_loading"
|
|
|
+ field="file"
|
|
|
+ :width="imgWidth"
|
|
|
+ :height="imgHeight"
|
|
|
+ :url="'https://integralsys.oss-cn-shenzhen.aliyuncs.com'"
|
|
|
+ @close="company_img_show = false"
|
|
|
+ @crop-upload-success="company_img_success"
|
|
|
+ langType="zh"
|
|
|
+ v-if="company_img_show"
|
|
|
+ ></image-cropper>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import ImageCropper from "@/components/ImageCropper";
|
|
|
export default {
|
|
|
name: "courseEdit",
|
|
|
+ components: { ImageCropper },
|
|
|
data() {
|
|
|
return {
|
|
|
title: "",
|
|
|
+ company_img_show:false,
|
|
|
+ company_img_loading: false,
|
|
|
alterCreate: "保存",
|
|
|
+ imgIndex: 1,
|
|
|
+ imgWidth: 300,
|
|
|
+ imgHeight: 300,
|
|
|
// 个人信息
|
|
|
courseDeail: {
|
|
|
id: 0,
|
|
|
name: "",
|
|
|
price: 0,
|
|
|
- img_url: [
|
|
|
- {
|
|
|
- name: "dsd.jpg",
|
|
|
- url: "../../../static/images/321.jpg",
|
|
|
- },
|
|
|
- ],
|
|
|
- imgList: [
|
|
|
- {
|
|
|
- name: "dsd.png",
|
|
|
- url: "../../../static/images/2.png",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "dsd.png",
|
|
|
- url: "../../../static/images/1.png",
|
|
|
- },
|
|
|
- ],
|
|
|
- courseSection: [
|
|
|
+ thumb: "",
|
|
|
+ images: [],
|
|
|
+ sections: [
|
|
|
{
|
|
|
name: "精讲1",
|
|
|
- url: "http:sasdsada.com",
|
|
|
+ link: "http:sasdsada.com",
|
|
|
},
|
|
|
{
|
|
|
name: "精讲1",
|
|
|
- url: "http:sasdsada.com",
|
|
|
+ link: "http:sasdsada.com",
|
|
|
},
|
|
|
{
|
|
|
name: "精讲1",
|
|
|
- url: "http:sasdsada.com",
|
|
|
+ link: "http:sasdsada.com",
|
|
|
},
|
|
|
{
|
|
|
name: "精讲1",
|
|
|
- url: "http:sasdsada.com",
|
|
|
+ link: "http:sasdsada.com",
|
|
|
},
|
|
|
],
|
|
|
},
|
|
@@ -186,13 +174,23 @@ export default {
|
|
|
},
|
|
|
computed: {},
|
|
|
methods: {
|
|
|
+ //预览图上传成功
|
|
|
+ company_img_success(resData) {
|
|
|
+ console.log(resData)
|
|
|
+ this.courseDeail.thumb = resData.url;
|
|
|
+ this.company_img_show = false;
|
|
|
+ },
|
|
|
+ //图片放大
|
|
|
+ showSelectImg() {
|
|
|
+ this.company_img_show = true;
|
|
|
+ },
|
|
|
// 添加课程
|
|
|
addSection() {
|
|
|
let section = {
|
|
|
name: "",
|
|
|
- url: "",
|
|
|
+ link: "",
|
|
|
};
|
|
|
- this.courseDeail.courseSection.push(section);
|
|
|
+ this.courseDeail.sections.push(section);
|
|
|
},
|
|
|
// 删除课程
|
|
|
sectionDel(index, item) {
|
|
@@ -202,7 +200,7 @@ export default {
|
|
|
type: "warning",
|
|
|
})
|
|
|
.then(() => {
|
|
|
- this.courseDeail.courseSection.splice(index, 1);
|
|
|
+ this.courseDeail.sections.splice(index, 1);
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.$message({
|
|
@@ -211,6 +209,9 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+ suceessChange(res) {
|
|
|
+ console.log(res);
|
|
|
+ },
|
|
|
// 上传图片失败
|
|
|
uploadErr(err, file, fileList) {
|
|
|
console.log(err);
|
|
@@ -218,11 +219,11 @@ export default {
|
|
|
},
|
|
|
//上传预览图
|
|
|
uploadChange(file, fileList) {
|
|
|
- this.courseDeail.img_url.push(file);
|
|
|
+ this.courseDeail.thumb.push(file);
|
|
|
},
|
|
|
// 上传介绍图组
|
|
|
uploadChange2(file, fileList) {
|
|
|
- this.courseDeail.imgList.push(file);
|
|
|
+ this.courseDeail.images.push(file);
|
|
|
},
|
|
|
// 删除预览图
|
|
|
handleRemove(file) {
|
|
@@ -246,13 +247,13 @@ export default {
|
|
|
})
|
|
|
.then(() => {
|
|
|
if (type) {
|
|
|
- let newList = this.courseDeail.imgList.filter((item) => {
|
|
|
+ let newList = this.courseDeail.images.filter((item) => {
|
|
|
return item.url !== url;
|
|
|
});
|
|
|
- this.courseDeail.imgList = newList;
|
|
|
+ this.courseDeail.images = newList;
|
|
|
} else {
|
|
|
console.log(123);
|
|
|
- this.courseDeail.img_url = [];
|
|
|
+ this.courseDeail.thumb = [];
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {
|
|
@@ -266,8 +267,8 @@ export default {
|
|
|
iffirm() {
|
|
|
if (
|
|
|
!this.courseDeail.name == "" &&
|
|
|
- !this.courseDeail.imgList.length == 0 &&
|
|
|
- !this.courseDeail.img_url == "" &&
|
|
|
+ !this.courseDeail.images.length == 0 &&
|
|
|
+ !this.courseDeail.thumb == "" &&
|
|
|
!this.courseDeail.price !== 0
|
|
|
) {
|
|
|
this.$confirm("确定保存当前页面信息?", "提示", {
|
|
@@ -298,18 +299,17 @@ export default {
|
|
|
//修改保存
|
|
|
saveAlter() {
|
|
|
this.$message({
|
|
|
- message: '修改成功!',
|
|
|
- type: 'success',
|
|
|
+ message: "修改成功!",
|
|
|
+ type: "success",
|
|
|
showClose: true,
|
|
|
duration: 2000,
|
|
|
});
|
|
|
-
|
|
|
},
|
|
|
//新建角色保存post
|
|
|
saveCreate() {
|
|
|
this.$message({
|
|
|
- message: '新建课程成功!',
|
|
|
- type: 'success',
|
|
|
+ message: "新建课程成功!",
|
|
|
+ type: "success",
|
|
|
showClose: true,
|
|
|
duration: 2000,
|
|
|
});
|
|
@@ -344,7 +344,7 @@ export default {
|
|
|
height: auto;
|
|
|
margin: 0 auto;
|
|
|
margin-top: 10px;
|
|
|
- background-color: #FFF;
|
|
|
+ background-color: #fff;
|
|
|
border-radius: 5px;
|
|
|
padding: 30px 60px;
|
|
|
h3 {
|
|
@@ -385,4 +385,16 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.cursor{
|
|
|
+ &>div{
|
|
|
+ height: 68px;
|
|
|
+ width: 68px;
|
|
|
+ border: 2px dashed #f1f1f1;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|