课程添加页面

pages/frontend/learn/add.vue

@@ -0,0 +1,460 @@
+<template>
+  <div class="lenrn_content">
+    <el-container>
+      <el-container>
+        <el-aside width="164px">
+          <el-menu style="min-height: 1200px;padding-top:40px" class="el-menu-vertical-demo">
+            <el-menu-item   index="1">
+              <span :style="active==1?'color:#308EFF':'color:#303133'" slot="title">基础信息</span>
+            </el-menu-item>
+            <el-menu-item   index="2">
+              <span :style="active==2?'color:#308EFF':'color:#303133'" slot="title">讲师介绍</span>
+            </el-menu-item>
+            <el-menu-item index="3">
+              <span  :style="active==3?'color:#308EFF':'color:#303133'" slot="title">添加视频</span>
+            </el-menu-item>
+            <el-menu-item index="4">
+              <span :style="active==4?'color:#308EFF':'color:#303133'" slot="title">公告栏</span>
+            </el-menu-item>
+          </el-menu>
+        </el-aside>
+        <el-container>
+          <el-header>
+            <el-steps align-center :active="active" style="padding-top: 20px" finish-status="success">
+              <el-step title="基础信息"></el-step>
+              <el-step title="讲师介绍"></el-step>
+              <el-step title="添加视频"></el-step>
+              <el-step title="公告栏"></el-step>
+            </el-steps>
+            <el-divider></el-divider>
+          </el-header>
+          <el-main>
+            <el-form v-if="active==1" style="margin-top: 60px" ref="form" :model="form" label-width="80px">
+              <el-form-item label="课程名称">
+                <el-input v-model="form.name"></el-input>
+              </el-form-item>
+              <el-form-item label="概述">
+                <el-input type="textarea" v-model="form.desc"></el-input>
+              </el-form-item>
+              <el-form-item label="封面">
+                <el-upload
+                  class="avatar-uploader"
+                  action="https://jsonplaceholder.typicode.com/posts/"
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccess">
+                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon" style="border-radius: 6px;border: 1px dashed #d9d9d9;height: 178px;line-height: 178px;width: 178px"></i>
+                </el-upload>
+              </el-form-item>
+              <el-form-item label="计费模式">
+                <el-radio v-model="form.radio" label="1">免费</el-radio>
+                <el-radio v-model="form.radio" label="2">付费</el-radio>
+              </el-form-item>
+              <el-form-item label="课程价格">
+                <el-input v-model="form.name"></el-input>
+              </el-form-item>
+              <el-form-item label="课程状态">
+                <el-radio v-model="form.radio" label="1">更新</el-radio>
+                <el-radio v-model="form.radio" label="2">完结</el-radio>
+              </el-form-item>
+              <el-form-item label="分类">
+                <el-radio v-model="form.radio" label="1">更新</el-radio>
+                <el-radio v-model="form.radio" label="2">完结</el-radio>
+              </el-form-item>
+              <el-form-item label="话题描述">
+                <div class="content-field">
+                  <div class="content-editor">
+                    <editor
+                      :hideImage="false"
+                      :content="content"
+                      @change="handleChange"
+                      placeholder="请输入话题描述"></editor>
+                  </div>
+                </div>
+              </el-form-item>
+              <el-form-item>
+                <el-button @click="active_set(2)" type="primary">下一步</el-button>
+              </el-form-item>
+            </el-form>
+
+            <el-form v-if="active==2" style="margin-top: 60px" ref="form" :model="form" label-width="80px">
+              <el-form-item label="讲师名称">
+                <el-input v-model="form.name"></el-input>
+              </el-form-item>
+              <el-form-item label="职称">
+                <el-input type="textarea" v-model="form.desc"></el-input>
+              </el-form-item>
+              <el-form-item label="封面">
+                <el-upload
+                  class="avatar-uploader"
+                  action="https://jsonplaceholder.typicode.com/posts/"
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccess">
+                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon" style="border-radius: 6px;border: 1px dashed #d9d9d9;height: 178px;line-height: 178px;width: 178px"></i>
+                </el-upload>
+              </el-form-item>
+              <el-form-item label="自我介绍">
+                <div class="content-field">
+                  <div class="content-editor">
+                    <editor
+                      :hideImage="false"
+                      :content="content"
+                      @change="handleChange"
+                      placeholder="请输入话题描述"></editor>
+                  </div>
+                </div>
+              </el-form-item>
+              <el-form-item>
+                <el-button @click="active_set(1)" type="primary">上一步</el-button>
+                <el-button @click="active_set(3)" type="primary">下一步</el-button>
+              </el-form-item>
+            </el-form>
+
+            <el-form v-if="active==3" style="margin-top: 60px" ref="form" :model="form" label-width="80px">
+              <el-form-item label="视频封面">
+                <el-upload
+                  class="avatar-uploader"
+                  action="https://jsonplaceholder.typicode.com/posts/"
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccess">
+                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon" style="border-radius: 6px;border: 1px dashed #d9d9d9;height: 178px;line-height: 178px;width: 178px"></i>
+                </el-upload>
+              </el-form-item>
+              <el-form-item  label="章节管理">
+                <div v-for="(item,index) in video_list">
+                  <el-input style="margin-top: 10px" placeholder="请输入内容" v-model="form.name">
+                    <template slot="prepend">第{{index+1}}章</template>
+                    <el-button slot="append" @click="del_zj(index)" icon="el-icon-delete"></el-button>
+                  </el-input>
+
+                  <div v-for="(item2,index2) in item.list" style="background: #f6f6f6;padding: 10px;margin-top: 10px">
+                    <el-input style="margin-top: 10px" placeholder="请输入课程名称" v-model="input3" class="input-with-select">
+                      <div slot="prepend" style="width: 120px;text-align: center">{{index+1}}-{{index2+1}}</div>
+                      <el-checkbox slot="append" style="margin-right: 15px" v-model="form.ddd">试看</el-checkbox>
+                      <el-button slot="append"  @click="del_kc(index,index2)" icon="el-icon-delete"></el-button>
+                    </el-input>
+                    <div style="padding-top: 10px;padding-bottom: 10px">
+                      <el-upload
+                        class="upload-demo"
+                        style="display: inline-block"
+                        action="https://jsonplaceholder.typicode.com/posts/"
+                        :on-change="handleChange">
+                        <el-button size="small" type="primary">点击上传</el-button>
+                      </el-upload>
+                      <el-button style="display: inline-block" size="small" type="primary">定时发布</el-button>
+                      <el-time-picker
+                        style="display: inline-block;float: right;margin-left: 10px"
+                        v-model="form.dd"
+                        placeholder="任意时间点">
+                      </el-time-picker>
+                      <el-date-picker
+                        v-model="form.daa"
+                        style="display: inline-block;float: right"
+                        type="date"
+                        placeholder="选择日期">
+                      </el-date-picker>
+                      <div class="file-upload" style="margin-top: 10px">
+                        <el-progress :text-inside="true" :stroke-width="20" :percentage="authProgress"></el-progress>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div style="background: #f6f6f6;padding: 10px;margin-top: 10px;text-align:center">
+                    <el-button @click="add_new_kc(index)" type="primary">添加新的课程</el-button>
+                    <el-button @click="add_new_zj()" type="primary">添加新的章节</el-button>
+                  </div>
+                </div>
+
+              </el-form-item>
+              <el-form-item>
+                <el-button @click="active_set(2)" type="primary">上一步</el-button>
+                <el-button @click="active_set(4)" type="primary">下一步</el-button>
+              </el-form-item>
+            </el-form>
+
+            <el-form v-if="active==4" style="margin-top: 60px" ref="form" :model="form" label-width="80px">
+              <el-form-item label="群二维码">
+                <el-upload
+                  class="avatar-uploader"
+                  action="https://jsonplaceholder.typicode.com/posts/"
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccess">
+                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon" style="border-radius: 6px;border: 1px dashed #d9d9d9;height: 178px;line-height: 178px;width: 178px"></i>
+                </el-upload>
+              </el-form-item>
+              <el-form-item label="公告">
+                <div class="content-field">
+                  <div class="content-editor">
+                    <editor
+                      :hideImage="false"
+                      :content="content"
+                      @change="handleChange"
+                      placeholder="公告"></editor>
+                  </div>
+                </div>
+              </el-form-item>
+              <el-form-item>
+                <el-button @click="active_set(3)" type="primary">上一步</el-button>
+                <el-button type="primary">确认提交</el-button>
+              </el-form-item>
+            </el-form>
+          </el-main>
+        </el-container>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+  import { mapState } from "vuex";
+  import editor from "@/components/editor";
+  import multiUploader from '@/components/multi-uploader';
+
+  export default {
+    head: {
+      title: '新建咨询服务',
+    },
+    components: {
+      editor,
+      multiUploader
+    },
+    data () {
+      return {
+        sale_id: '', // 编辑时的 id
+        title: '', // 标题
+        selectedConsultCate: [], // 选中的技能分类
+        consultCate: [], // 技能分类数据源
+        content: '', // 话题描述
+        defaultContent: '', // 默认的话题描述
+        price: '', // 价格
+        week: [], // 接受咨询的星期几
+        time: [], // 接受咨询的时间范围
+        imageList: [], // 用户上传的图片
+        publishIsLoading: false,
+        pcreateIsLoading: false,
+        active:1,
+        form:{},
+        imageUrl: '',
+        authProgress: 0,
+        content: '', // 话题描述
+        video_list:[{"name":"","list":[{"kc_id":"1"}]}],
+      }
+    },
+    mounted () {
+      this.needLogin()
+      this._getConsultCate()
+      this.sale_id = this.$route.query.sale_id || ''
+      if (this.sale_id) {
+        this._getConsultDetail()
+      }
+    },
+    methods: {
+      add_new_zj(){
+        var new_object={"name":"","list":[{"kc_id":""}]};
+        this.video_list.push(new_object);
+      },
+      add_new_kc(zj_id){
+        var new_object={"kc_id":""};
+        this.video_list[zj_id].list.push(new_object);
+      },
+      del_kc(zj_id,kc_id){
+        for(var i=0;i<this.video_list.length;i++)
+        {
+          for(var j=0;j<this.video_list[i].list.length;j++)
+          {
+            if(zj_id==i && kc_id==j)
+            {
+              this.video_list[i].list.splice(j,1);
+            }
+          }
+        }
+      },
+      del_zj(zj_id){
+        if(this.video_list.length==1){
+          this.$message.error('已经是最后一个章节了不能删除了')
+          return false
+        }
+        for(var i=0;i<this.video_list.length;i++)
+        {
+          if(zj_id==i)
+          {
+            this.video_list.splice(i,1);
+          }
+        }
+      },
+      active_set(val){
+          this.active=val;
+      },
+      /** 获取咨询分类 */
+      _getConsultCate () {
+        this.$axios.$post('/api/sale/cateListYes', { type: 3, point: 1 }).then(res => {
+          if (res.status === 1) {
+            let consultCate = res.data || []
+            this.consultCate = consultCate.map(item => {
+              let children = item.child_list.map(child => {
+                return {
+                  value: child.category_id,
+                  label: child.name
+                }
+              })
+              return {
+                value: item.category_id,
+                label: item.name,
+                children: children
+              }
+            })
+          }
+        }).catch(err => {
+          console.log('get consult cate error: ', err)
+        })
+      },
+      /** 获取咨询服务详情 */
+      _getConsultDetail () {
+        const self = this
+
+        // this.$axios.$post('/api/sale/saleInfo', { sale_id: this.sale_id }).then(res => {
+        //     if (res.status === 1) {
+        //         console.log('获取技能详情成功', res.data)
+        //         self.title = res.data.title || ""
+        //         self.price = res.data.price || ""
+        //         self.content = res.data.content || self.defaultContent
+        //         if (res.data.cate_id_one && res.data.cate_id_two) {
+        //             self.selectedSkillCate = [res.data.cate_id_one, res.data.cate_id_two]
+        //         }
+        //         self._setSkillImages(res.data)
+        //     }
+        // })
+      },
+      /** 创建、编辑咨询服务 */
+      _publishConsultData (actionType) {
+
+      },
+      /** 验证提交的数据 */
+      _validateConsultData () {
+        if (this.title === '') {
+          this.$message.error('请输入话题标题')
+          return false
+        }
+        if (this.title.length < 5) {
+          this.$message.error('话题标题不可少于5字符')
+          return false
+        }
+        if (this.title.length > 50) {
+          this.$message.error('话题标题不可超过50字符，请删减')
+          return false
+        }
+        if (this.content.length < 50) {
+          this.$message.error('话题描述不可少于50字符')
+          return false
+        }
+        if (this.content.length > 5000) {
+          this.$message.error('话题描述不可超过5000字符，请删减')
+          return false
+        }
+        if (this.price < 1 || this.price > 100000) {
+          this.$message.error('请输入1-100000元的整数价格')
+          return false
+        }
+        if (String(this.price).indexOf('.') > -1) {
+          if (parseInt(this.price) != Number(this.price)) {
+            this.$message.error('价格只能为整数')
+            return false
+          }
+        }
+        if (this.selectedConsultCate.length !== 2 ||
+          (!this.selectedConsultCate[0] || !this.selectedConsultCate[1])) {
+          this.$message.error('请选择话题类别')
+          return false
+        }
+        if (this.week.length === 0) {
+          this.$message.error('请选择咨询时间')
+          return false
+        }
+        if (this.time.length === 0) {
+          this.$message.error('请选择开放时间')
+          return false
+        }
+
+        return true
+      },
+      /** 技能描述内容改变时 */
+      handleChange (val) {
+        this.content = val
+      },
+      /** 点击提交审核时 */
+      handleCreate () {
+        if (this._validateConsultData()) {
+          this._publishConsultData(this.sale_id ? 'update' : 'create')
+        }
+      },
+      /** 点击存草稿时 */
+      handlePcreate () {
+        if (this._validateConsultData()) {
+          this._publishConsultData('pcreate')
+        }
+      },
+    }
+  }
+</script>
+
+<style scope lang="scss">
+  @import "@/assets/css/consult/create.scss";
+</style>
+<style>
+  .el-select .el-input {
+    width: 130px;
+  }
+  .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
+  .lenrn_content{width: 1000px;margin: 0px auto;background: white}
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+  }
+  input[type="number"]{
+    -moz-appearance: textfield !important;
+  }
+  .el-form-item__content .content-field span{line-height: normal}
+</style>
+<style lang="scss">
+  // 编辑器样式
+  .content-editor {
+    .my-editor {
+      .ql-snow {
+        border: 1px solid #d7dfe8 !important;
+        border-radius: 3px 3px 0 0 !important;
+      }
+      .quill-editor {
+        border-width: 1px !important;
+        border-top: 0 !important;
+        border-color: #d7dfe8 !important;
+        border-radius: 0 0 3px 3px !important;
+      }
+    }
+  }
+  // 图片上传器样式
+  .consult-image-uploader {
+    .el-upload-list__item {
+      width: 300px !important;
+      height: 168.75px !important;
+      line-height: 168.75px !important;
+    }
+    .el-upload--picture-card {
+      width: 300px !important;
+      height: 168.75px !important;
+      line-height: 168.75px !important;
+      .el-upload-list__item-thumbnail {
+        object-fit: scale-down !important;
+      }
+    }
+    .el-upload-list--picture-card {
+      .el-upload-list__item-thumbnail {
+        object-fit: scale-down !important;
+      }
+    }
+  }
+</style>