gdy_pc_8/src/course/courseManage/create.vue

<!-- 课程创建/修改 -->

<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-form-item>
      <el-form-item label="预览图:">
        <div style="width: 68px" @click="showSelectImg(1)">
          <userImage
            v-if="courseDeail.thumb"
            width="68px"
            height="68px"
            radius="5px"
            :img_url="courseDeail.thumb"
            :user_name="courseDeail.name"
            style="cursor: pointer"
          ></userImage>
          <div v-else class="cursor">
            <div>+</div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="价格:">
        <el-input-number
          v-model="courseDeail.price"
          :min="0"
          :max="10000000"
          label="课程价格"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="是否上架:">
        <el-switch
          v-model="courseDeail.enable"
          active-color="#13ce66"
          inactive-color="#999"
        >
        </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="课程介绍:">
        <uploadOss
          :headers="$xtoken"
          :action="$action"
          :limit="3"
          list_type="picture-card"
          :accept="$acceptImg"
          :multiple="true"
          ref="clearPicture"
          :show-file-list="true"
          :file-list="item.fileList"
          :on-success="handleFilesSuccess"
          :on-preview="onFilePreView"
          :before-upload="beforeUpload"
          :on-remove="onFileRemove"
        >
          <i class="el-icon-plus"></i>
        </uploadOss>
      </el-form-item> -->
      
      <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">{{ alterCreate }}</el-button>
      </el-form-item>
    </el-form>
    <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";
import { validateURL } from "@/utils/validate";
import {createCourse,updataCourse,getCourseDetail} from '../api'
export default {
  name: "courseEdit",
  components: { ImageCropper },
  data() {
    return {
      curId: 0,
      title: "",
      company_img_show: false,
      company_img_loading: false,
      alterCreate: "保存",
      imgIndex: 1,
      imgWidth: 300,
      imgHeight: 300,
      // 个人信息
      courseDeail: {
        name: "",
        price: 0,
        thumb: "",
        enable: false,
        images: "",
        sections: [],
      },
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  computed: {
    courseImages() {
      if (this.courseDeail.images) {
        return this.courseDeail.images.split(",");
      } else {
        return [];
      }
    },
  },
  methods: {
    //删除介绍图片
    imgsDelete(index){
      let list = this.courseDeail.images.split(",");
      list.splice(index,1)
      this.courseDeail.images = list.join(',')
    },
    //章节信息校验
    validateURL() {
      let result = false;
      result = this.courseDeail.sections.every((item) => {
        return item.link !== '' && item.name !== "";
        // return validateURL(item.link) && item.name !== "";
      });
      return result;
    },
    // 获取课程详情
    getCourseDetail() {
      getCourseDetail(this.curId).then((res) => {
          this.courseDeail = this.uploadToData(res);
      }).catch(err=>{
        console.error(err)
      });
    },
    //课程详情数据转换展示
    uploadToData(data) {
      data.enable = data.enable == 1 ? true : false;
      data.price = Number(data.price);
      data.images = data.images.join(",");
      return data;
    },
    //图片上传成功回调
    company_img_success(resData) {
      if (this.imgIndex == 1) {
        this.courseDeail.thumb = resData.url;
      } else {
        if (
          this.courseDeail.images.split(",").length == 1 &&
          this.courseDeail.images.split(",")[0] == ""
        ) {
          this.courseDeail.images = resData.url;
        } else {
          this.courseDeail.images = `${this.courseDeail.images},${resData.url}`;
        }
      }
      this.company_img_show = false;
    },
    //打开上传图片组件
    showSelectImg(type) {
      this.imgIndex = type;
      this.company_img_show = true;
    },
    //展示数据转换成上传数据
    toUpdata() {
      let data = JSON.parse(JSON.stringify(this.courseDeail));
      data.enable = data.enable ? 1 : 0;
      data.sections = JSON.stringify(data.sections);
      return data;
    },
    // 添加课程
    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: "已取消",
          });
        });
    },
    // 删除图片
    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.thumb == "" &&
        !this.courseDeail.price !== 0 &&
        this.validateURL()
      ) {
        this.$confirm("确定保存当前页面信息？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info",
        })
          .then(() => {
            if (this.$route.params.id) {
              this.saveAlter();
            } else {
              this.saveCreate();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else if (!this.validateURL()) {
        this.$message({
          type: "warning",
          message: "章节列表未填写正确",
        });
      } else {
        this.$message({
          type: "warning",
          message: "用户信息未填写完整",
        });
      }
    },
    //修改保存
    saveAlter() {
      let data = this.toUpdata();
      updataCourse(this.curId,data).then(res=>{
        this.$message({
            message: "修改成功！",
            type: "success",
            showClose: true,
            duration: 2000,
          });
          this.$router.push("/course/courseManage");
      }).catch(err=>{
        console.error(err)
      })
    },
    //新建课程
    saveCreate() {
      let data = this.toUpdata();
      createCourse(data).then(res=>{
        this.$message({
            message: "新建成功！",
            type: "success",
            showClose: true,
            duration: 2000,
          });
          this.$router.push("/course/courseManage");
      }).catch(err=>{
        console.error(err)
      })
    },
    //判断新建/修改
    init() {
      if (this.$route.params.id == undefined) {
        this.title = "创建课程";
        this.courseDeail = {
          name: "",
          price: 0,
          thumb: "",
          enable: false,
          images: "",
          sections: [],
        };
      } else {
        this.curId = this.$route.params.id;
        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: 68px;
    width: 68px;
    border: 2px dashed #f1f1f1;
    border-radius: 5px;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>