test_10

src/course/courseManage/create_next.vue

@@ -0,0 +1,520 @@
+<!-- 课程创建/修改 -->
+
+<template>
+    <div class="pjc">
+      <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="预览图:" prop="thumb">
+          <uploadOss
+            :headers="$xtoken"
+            :action="$action"
+            :limit="1"
+            list_type="picture-card"
+            :accept="$acceptImg"
+            :multiple="true"
+            ref="clearPicture"
+            coursePath="course"
+            :show-file-list="true"
+            :file-list="courseDeail.thumb"
+            :on-success="handleFilesSuccess2"
+            :on-preview="onFilePreView"
+            :before-upload="beforeUpload"
+            :on-remove="onFileRemove2"
+          >
+            <i class="el-icon-plus"></i>
+          </uploadOss>
+          <!-- <div style="display: flex;">
+            <div style="cursor: pointer;margin-right: 10px;" @click="showApm(courseDeail.thumb)">
+              <userImage
+              v-if="courseDeail.thumb"
+              width="100px"
+              height="100px"
+              radius="5px"
+              :img_url="courseDeail.thumb"
+              :user_name="courseDeail.name"
+            ></userImage>
+            </div>
+            <div class="cursor"  @click="showSelectImg(1)">
+              <div><i class="el-icon-plus"></i></div>
+            </div>
+          </div> -->
+        </el-form-item>
+        <el-form-item label="价格:" prop="price">
+          <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="课程介绍:" prop="images">
+          <uploadOss
+            :headers="$xtoken"
+            :action="$action"
+            :limit="23"
+            list_type="picture-card"
+            :accept="$acceptImg"
+            :multiple="true"
+            ref="clearPicture"
+            coursePath="course"
+            :show-file-list="true"
+            :file-list="courseDeail.images"
+            :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 uploadOss from '@/components/upload';
+  import { validateURL } from "@/utils/validate";
+  import {createCourse,updataCourse,getCourseDetail} from '../api'
+  export default {
+    name: "courseEdit",
+    components: { ImageCropper,uploadOss },
+    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: 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' },
+              {type:'array',trigger:'change'}
+            ],
+            images: [
+              { required: true, message: '请选择介绍图', trigger: 'change' },
+              {type:'array',trigger:'change'}
+            ],
+          }
+      };
+    },
+    computed: {
+      courseImages() {
+        if (this.courseDeail.images) {
+          return this.courseDeail.images.split(",");
+        } else {
+          return [];
+        }
+      },
+    },
+    methods: {
+      // 介绍图上传格式
+      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
+      },
+      // 预览图删除
+      onFileRemove2(file, fileList) {
+        this.courseDeail.thumb = fileList
+      },
+      // 预览图上传
+      handleFilesSuccess2(response, file, fileList) {
+        let fileListData = fileList.filter(e => {
+          return e.url;
+        });
+        this.courseDeail.thumb = fileListData
+      },
+      //章节信息校验
+      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);
+        let arr = []
+        data.images.forEach(item=>{
+          arr.push({name:item,url:item})
+        })
+        data.images = arr
+        let arr2 = []
+        data.thumb.forEach(item=>{
+          arr2.push({name:item,url:item})
+        })
+        data2.thumb = arr2
+        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;
+      },
+      // 查看预览图
+      showApm(url){
+        this.dialogVisible = true;
+        this.dialogImageUrl = url;
+      },
+      //打开上传预览图片组件
+      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);
+        let arr = data.images.map(item=>{
+          return item.url
+        })
+        data.images = arr.join(',')
+        let arr2 = data.thumb.map(item=>{
+          return item.url
+        })
+        data.thumb = arr2.join(',')
+        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: "已取消",
+            });
+          });
+      },
+      //保存
+      iffirm() {
+        if (
+          !this.courseDeail.name == "" &&
+          this.courseDeail.images.length &&
+          this.courseDeail.thumb.length &&
+          this.courseDeail.price &&
+          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: true,
+            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: 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>
+  

src/course/dealerManage/home.vue

@@ -174,9 +174,9 @@ export default {
     cancleQr() {},
     creatQrCode() {
       if (!this.qrcodeStatus) {
-        console.log(`${process.env.BASE_API}/m/#/courseHome?pid=0`)
+        console.log(`${process.env.BASE_API}/m/#/courseLogin?pid=0`)
         this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
-          text: `${process.env.BASE_API}/m/#/courseHome?pid=0`, // 需要转换为二维码的内容
+          text: `${process.env.BASE_API}/m/#/courseLogin?pid=0`, // 需要转换为二维码的内容
           width: 300,
           height: 300,
           colorDark: "#000000",