|
|
@@ -0,0 +1,256 @@
|
|
|
+<!-- 课程创建/修改 -->
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="pjc">
|
|
|
+ <el-page-header @back="$router.go(-1)" :content="title" style="margin-bottom: 30px;"></el-page-header>
|
|
|
+ <el-form :model="courseDeail" label-width="110px" :rules="rules">
|
|
|
+ <el-form-item label="课程免费章节" size="normal">
|
|
|
+ <div class="sectionout">
|
|
|
+ <div
|
|
|
+ class="sectionInner"
|
|
|
+ v-for="(item, index) in courseDeail.sections"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="sectionName">
|
|
|
+ <el-input v-model.trim="item.name" placeholder="请输入章节名..."></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="sectionUrl">
|
|
|
+ <el-input v-model.trim="item.link" placeholder="请输入章节链接..."></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="del">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ plain
|
|
|
+ @click="sectionDel(index, item)"
|
|
|
+ style="color: #f89881"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="addSection">
|
|
|
+ <el-button plain @click="addSection">+</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item style="display: flex; flex-direction: row-reverse">
|
|
|
+ <el-button @click="$router.go(-1)">取消</el-button>
|
|
|
+ <el-button @click="iffirm">保存</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import {getFreeCourseList,editFreeCourseList} from '../api'
|
|
|
+export default {
|
|
|
+ name: "courseFreeEdit",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: "",
|
|
|
+ // 个人信息
|
|
|
+ courseDeail: {
|
|
|
+ sections: [],
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ // images: [
|
|
|
+ // { required: true, message: '请选择介绍图', trigger: 'change' },
|
|
|
+ // {type:'array',trigger:'change'}
|
|
|
+ // ],
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //章节信息校验
|
|
|
+ validateURL() {
|
|
|
+ let result = false;
|
|
|
+ result = this.courseDeail.sections.every((item) => {
|
|
|
+ let reg = /^[^\u4e00-\u9fff]*$/
|
|
|
+ return reg.test(item.link) && item.name !== "";
|
|
|
+ // return validateURL(item.link) && item.name !== "";
|
|
|
+ });
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ // 获取课程详情
|
|
|
+ getCourseDetail() {
|
|
|
+ getFreeCourseList().then((res) => {
|
|
|
+ this.courseDeail.sections = res.sections;
|
|
|
+ }).catch(err=>{
|
|
|
+ console.error(err)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 添加章节
|
|
|
+ addSection() {
|
|
|
+ let section = {
|
|
|
+ name: "",
|
|
|
+ link: "",
|
|
|
+ };
|
|
|
+ this.courseDeail.sections.push(section);
|
|
|
+ },
|
|
|
+ // 删除章节
|
|
|
+ sectionDel(index, item) {
|
|
|
+ this.$confirm("确定删除当前章节？", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.courseDeail.sections.splice(index, 1);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //保存
|
|
|
+ iffirm() {
|
|
|
+ if (
|
|
|
+ this.validateURL()
|
|
|
+ ) {
|
|
|
+ this.$confirm("确定保存当前课程信息？", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "info",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.saveAlter();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "章节列表未填写正确",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //修改保存
|
|
|
+ saveAlter() {
|
|
|
+ let data = {
|
|
|
+ sections:JSON.stringify(this.courseDeail.sections)
|
|
|
+ };
|
|
|
+ editFreeCourseList(data).then(res=>{
|
|
|
+ this.$message({
|
|
|
+ message: "修改成功！",
|
|
|
+ type: "success",
|
|
|
+ showClose: true,
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ this.$router.push("/course/courseManage");
|
|
|
+ }).catch(err=>{
|
|
|
+ console.error(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //判断新建/修改
|
|
|
+ init() {
|
|
|
+ this.title = "编辑免费课程";
|
|
|
+ this.getCourseDetail();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.pjc {
|
|
|
+ width: 900px;
|
|
|
+ height: auto;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 30px 60px;
|
|
|
+ h3 {
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ margin: 30px 0;
|
|
|
+ }
|
|
|
+ form {
|
|
|
+ legend {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #000;
|
|
|
+ line-height: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 22px;
|
|
|
+ }
|
|
|
+ .el-form-item {
|
|
|
+ .el-select {
|
|
|
+ width: 380px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.sectionout {
|
|
|
+ .sectionInner {
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .sectionName {
|
|
|
+ width: 150px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .sectionUrl {
|
|
|
+ width: 250px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .sectionDel {
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.img_all {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ & > div {
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .imgout{
|
|
|
+ position: relative;
|
|
|
+ .imgDelete{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ left:0;
|
|
|
+ top:0;
|
|
|
+ background-color: rgba(0,0,0,.3);
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.3s ease;
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ .imgDelete{
|
|
|
+ opacity:1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.cursor {
|
|
|
+ & > div {
|
|
|
+ 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>
|
guojy