技术认证和公司添加

assets/css/kaifain/kaifainAdd.scss

@@ -57,9 +57,10 @@
   }
 
   .bodyArea {
-    padding: 83px 115px;
     min-height: 100px;
-    width: 1000px;
+    width: 100%;
+    padding: 20px;
+    max-width: 1000px;
     position: relative;
     margin: auto;
 

components/company/solution_add.vue

@@ -0,0 +1,673 @@
+<template>
+  <div class="kaifainAdd">
+    <div class="bodyArea">
+      <div class="nameBox">
+        <div class="stitle">方案名称</div>
+        <el-input v-model="data.title" placeholder="20字以内 不能包含 & ￥ % / \ *"></el-input>
+      </div>
+      <div class="selectArea">
+        <div class="left">
+          <div class="stitle">行业领域</div>
+          <el-select style="width: 280px" v-model="data.industry" placeholder="选择行业类型">
+            <el-option
+              v-for="item in industryList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </div>
+        <div class="right">
+          <div class="stitle">技术分类</div>
+          <el-select style="width: 427px" v-model="data.tech_type" placeholder="选择技术分类">
+            <el-option
+              v-for="item in techTypeList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="logoBox">
+        <div class="stitle">缩略图</div>
+        <div class="uploadInfo">
+          <div class="left">
+            <el-upload
+              class="avatar-uploader"
+              action="#"
+              :show-file-list="false"
+              :multiple="false"
+              accept="image/png, image/jpeg"
+              :before-upload="(file) => handleFileChange(file, 'images')"
+            >
+              <i
+                v-if="data.images"
+                class="el-icon-delete avatar-uploader-icon"
+                @click.stop="(file) => handleDeleteFile('images')"
+              ></i>
+              <img v-if="data.images" :src="data.images" class="avatar" />
+              <div v-else class="noneImage">
+                <i class="el-icon-plus avatar-uploader-icon"></i>
+                <span class="title">上传照片</span>
+              </div>
+            </el-upload>
+            <p class="rightTips">支持JPG、PNG格式</p>
+          </div>
+          <div class="right">
+            <p>（800*800，图片最大2M，最多1张）</p>
+          </div>
+        </div>
+      </div>
+      <div class="smallIntro">
+        <div class="stitle">方案简介</div>
+        <el-input v-model="data.description" placeholder="请用一句话来介绍您的方案，10-50字符"></el-input>
+      </div>
+      <div class="intro">
+        <div class="stitle">
+          方案介绍
+          <span @click="jumpToOther">查看参考示例</span>
+        </div>
+        <div class="editor">
+          <editor
+            :content="data.detail"
+            @change="(val) => data.detail = val"
+            :haveVideo="true"
+            placeholder="支持图文混排，请至少添加：【文字描述】【方案视频】【方案介绍图片】【架构图片】【架构说明】等模块；可添加方案截图/PDF文档转图片，不低于500字"
+          ></editor>
+        </div>
+      </div>
+
+      <div class="successIntro">
+        <div class="stitle">成功案例</div>
+        <div class="list">
+          <div class="titleCell">
+            <div class="tt1">
+              <p>品牌logo</p>
+            </div>
+            <div class="tt2">案例描述</div>
+            <div class="tt3">附件</div>
+            <div class="tt4">操作</div>
+          </div>
+          <div
+            class="cell"
+            v-for="(item, index) in data.successful_case"
+            @click="openEditCase(item)"
+          >
+            <div class="img">
+              <img :src="item.logo" alt />
+            </div>
+            <div class="content">
+              <p>【{{data.title}}】帮助【{{item.title}}】提供解决方案</p>
+            </div>
+            <div class="pdf" @click.stop="openNewUrl(item)">
+              <div class="icon"></div>
+              <p>成功案例.PDF</p>
+            </div>
+            <div class="del" @click.stop="deleteCase(item)">
+              <div class="icon"></div>
+            </div>
+          </div>
+          <div class="addCell" @click="addSuccessInfo">
+            <div class="icon"></div>
+            <p>添加成功案例</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="bottomBtn">
+        <!-- <div class="preview" @click="preview" >
+          <p>预览</p>
+        </div> -->
+        <div class="submit" @click="submitAll">
+          <p>提交审核</p>
+        </div>
+        <div class="keepTmp" @click="saveDraft()" v-if="!lastId || Number(data.status) === 0">
+          <p>存草稿</p>
+        </div>
+      </div>
+    </div>
+
+    <el-dialog
+      title="添加成功案例"
+      :visible.sync="dialogVisible"
+      width="613px"
+      :append-to-body="true"
+      :center="true"
+    >
+      <div class="diaContentWork">
+        <div class="taskName">
+          <div class="name">案例名称</div>
+          <div class="value">
+            <el-input v-model="dataItem.title" placeholder="请输入案例名称(2-10个字符)"></el-input>
+          </div>
+        </div>
+        <div class="ourLogo">
+          <div class="name">品牌logo</div>
+          <div class="value">
+            <div class="uploadInfo">
+              <div class="left">
+                <el-upload
+                  class="avatar-uploader"
+                  action="#"
+                  :show-file-list="false"
+                  :multiple="false"
+                  accept="image/png, image/jpeg"
+                  :before-upload="(file) => handleFileChange(file, 'logo')"
+                >
+                  <i
+                    v-if="dataItem.logo"
+                    class="el-icon-delete avatar-uploader-icon"
+                    @click.stop="() => handleDeleteFile('logo') "
+                  ></i>
+                  <img v-if="dataItem.logo" :src="dataItem.logo" class="avatar" />
+                  <div v-else class="noneImage">
+                    <i class="el-icon-plus avatar-uploader-icon"></i>
+                  </div>
+                </el-upload>
+              </div>
+              <div class="right">
+                <p>（800*800，图片最大2M，最多1张）</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="taskFile">
+          <div class="name">案例附件</div>
+          <div class="value">
+            <el-upload
+              class="upload-demo"
+              action="#"
+              :show-file-list="true"
+              :multiple="false"
+              accept="application/pdf"
+              :file-list="fileList"
+              :before-upload="handlePDFFileChange"
+              :before-remove="handlePDFFileRemove"
+            >
+              <div style="margin-top: 10px">
+                <span class="uploadFileWord">立即上传</span>
+                <span class="uploadFileTip">仅支持PDF格式(最大2M)</span>
+              </div>
+            </el-upload>
+          </div>
+        </div>
+        <div class="taskDesc">
+          <div class="name">案例描述</div>
+          <div class="value">
+            <editor
+              :content="dataItem.description"
+              @change="(val) => dataItem.description = val"
+              :haveVideo="true"
+              placeholder="支持图文混排，请至少添加不低于100字成功案例描述"
+            ></editor>
+          </div>
+        </div>
+      </div>
+      <div class="dialog-footer">
+        <div class="preview" @click="previewCase">
+          <p>预览</p>
+        </div>
+        <div class="submit" @click="addCase">
+          <p>提交</p>
+        </div>
+        <div class="cancle" @click="dialogVisible=false">
+          <p>取消</p>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import editor from "@/components/editor";
+  import uploadFile from "@/mixins/uploadFile";
+  import DealSeoFooter from "@/components/kaifain/dealSeoFooter";
+  import KaifainFooter from "@/components/SeoFooter";
+
+  export default {
+    name: "userSetting",
+    components: {
+      editor,
+      KaifainFooter,
+    },
+    data() {
+      return {
+        lastId: 0,
+        data: {
+          city: 1,
+          industry: null, //所处行业的ID
+          title: "", //服务名称
+          description: "", //简单描述
+          images: "", //封面图片，缩略图的地址URL
+          detail: "", //具体的描述
+          tech_type: null, //技术类型
+          successful_case: [],
+          status: 0,
+        },
+        tempData: {},
+        industryList: [],
+        techTypeList: [],
+        dialogVisible: false,
+        dataItem: {
+          provider_id: 0, //服务商ID
+          title: "", //成功案例1
+          logo: "", //http://www.baidu.com，URL
+          description: "", //描述一下啊啥的发啊的算法
+          file: "", //https://www.baidu.com，用户上传的PDF，格式必须为PDF，URL
+        },
+        fileList: [],
+        kaifainUrl: ""
+      };
+    },
+    async asyncData({ ...params }) {
+      try {
+        params.store.commit("updateNoneCommonFooter", true);
+      } catch (e) {
+        console.log("updateNoneCommonFooter", e);
+      }
+      let dealSeoFooterObj = new DealSeoFooter(params);
+      let footer = await dealSeoFooterObj.dealData();
+      let domainConfig = params.store.state.domainConfig;
+      return {
+        ...domainConfig,
+        ...footer,
+        mobile: params.app.$deviceType.isMobile(),
+      };
+    },
+    mixins: [uploadFile],
+    computed: {
+      statusObj() {
+        let status = Number(this.data.status || 0);
+        let nameList = ["未申请", "审核中", "已入驻", "拒绝"];
+        let o = {
+          isOk: status === 2,
+          name: nameList[status],
+        };
+        return o;
+      },
+      isDis() {
+        let status = Number(this.data.status || 0);
+        return status === 1;
+      },
+    },
+    created() {
+      const {kaifainUrl, jishuBaseUrl, siteUrl} = this.$store.state.domainConfig;
+      this.kaifainUrl = kaifainUrl
+      this.siteUrl = siteUrl
+    },
+    async mounted() {
+      this.needLogin();
+      let query = new URLSearchParams(location.search);
+      this.lastId = query.get("lastId") || 0;
+      //如果存在ID,则优先获取ID
+      if (this.lastId) {
+        this.getLastDetail();
+      } else {
+        this.getDraftInfo();
+      }
+      this.getTypeList();
+    },
+    methods: {
+      jumpTo() {
+        location.href = this.siteUrl + "/otherpage/companyComplete";
+      },
+      /** 图片文件上传 **/
+      handleFileChange(file, type) {
+        const isJPG = file.type === "image/jpeg";
+        const isPNG = file.type === "image/png";
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isJPG && !isPNG) {
+          this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
+          return;
+        }
+        if (!isLt2M) {
+          this.$message.error("上传头像图片大小不能超过 2MB!");
+          return;
+        }
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("original_filename", file.name);
+        this.uploading = true;
+        this.$axios
+          .$post(`/upload_image`, formData, {
+            headers: { "Content-Type": "multipart/form-data" },
+          })
+          .then((res) => {
+            if (type === "images") {
+              this.data.images = res.filename;
+            } else if (type === "logo") {
+              this.dataItem.logo = res.filename;
+            }
+            console.log("type", type, this.data, this.dataItem);
+          })
+          .finally(() => {
+            this.uploading = false;
+          });
+      },
+      /** 删除问及爱你 **/
+      handleDeleteFile(type) {
+        if (type === "images") {
+          this.data.images = "";
+        } else if (type === "logo") {
+          this.dataItem.logo = "";
+        }
+      },
+      /** pdf上传  **/
+      handlePDFFileChange(file, type) {
+        console.log(file);
+        const isPDF = file.type === "application/pdf";
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isPDF) {
+          this.$message.error("上传文件只能是 JPG/PNG 格式!");
+          return;
+        }
+        // if (!isLt2M) {
+        // this.$message.error('上传文件大小不能超过 2MB!');
+        // return
+        // }
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("original_filename", file.name);
+        this.uploading = true;
+        this.apiPrepareUpload(file, (res) => {
+          if (res.data && res.data.status === 1) {
+            let url = res.data.data.url;
+            this.dataItem.file = url;
+            this.fileList = [{ name: file.name, url: url }];
+          } else {
+            this.$message.error("上传失败");
+          }
+        });
+        return false;
+      },
+      /** pdf删除 **/
+      handlePDFFileRemove() {
+        this.fileList = [];
+        this.dataItem.file = "";
+      },
+      /** 弹窗逻辑 **/
+      submitChange() {},
+      /** 获取选择信息 **/
+      getTypeList() {
+        this.$axios.get("/api/kaifawu/get_options").then((res) => {
+          if (Number(res.data.status) === 1) {
+            this.industryList = res.data.data.industries;
+            this.techTypeList = res.data.data.tech_types;
+          }
+        });
+      },
+      /** 点击添加生成案例 **/
+      async addSuccessInfo() {
+        let res = null;
+        if (!this.data.id) {
+          res = await this.saveDraft();
+        }
+        if (this.data.id || res) {
+          this.dialogVisible = true;
+          this.dataItem = {
+            provider_id: "", //服务商ID
+            title: "", //成功案例1
+            logo: "", //http://www.baidu.com，URL
+            description: "", //描述一下啊啥的发啊的算法
+            file: "", //https://www.baidu.com，用户上传的PDF，格式必须为PDF，URL
+          };
+        }
+      },
+      /** 删除案例 **/
+      deleteCase(item) {
+        this.$confirm("此操作将直接删除该成功案例, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            this.$axios
+              .post("/api/kaifawu/delete_case", {
+                id: item.id,
+              })
+              .then((res) => {
+                if (Number(res.data.status) === 1) {
+                  this.$message({
+                    type: "success",
+                    message: "删除成功!",
+                  });
+                }
+              });
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消删除",
+            });
+          });
+      },
+      /** 添加案例 **/
+      async addCase() {
+        let p = {};
+        let keyList = [
+          "id",
+          "provider_id",
+          "title",
+          "logo",
+          "description",
+          "file",
+        ];
+        for (let key of keyList) {
+          if (this.dataItem[key]) {
+            p[key] = this.dataItem[key];
+          }
+        }
+        p.provider_id = this.data.id;
+        let isEdit = !!p.id;
+        if (!p.title || p.title.length < 2 || p.title.length > 20) {
+          this.$message.warning("请填写2-20字符的案例名称！");
+          return;
+        }
+        if (!p.logo) {
+          this.$message.warning("请上传品牌logo");
+          return;
+        }
+        if (!p.description || p.description.length < 100) {
+          this.$message.warning("请填写100字符的案例描述");
+          return;
+        }
+        // if (!p.file) {
+        //   this.$message.warning('请上传案例附件')
+        //   return
+        // }
+        let url = isEdit ? "/api/kaifawu/update_case" : "/api/kaifawu/store_case";
+        this.$axios.post(url, p).then((res) => {
+          if (Number(res.data.status) === 1) {
+            this.dataItem.id = 4;
+            if (!isEdit) {
+              this.data.successful_case.push(this.dataItem);
+            } else {
+              this.getDraftInfo();
+            }
+            this.dataItem = {
+              provider_id: 0,
+              title: "",
+              logo: "",
+              description: "",
+              file: "",
+            };
+            this.dialogVisible = false;
+            this.fileList = [];
+            this.$message.success(isEdit ? "更新成功" : "添加成功");
+          }
+        });
+      },
+      openEditCase(item) {
+        this.dataItem = {
+          ...item,
+        };
+        if (item.file) {
+          this.fileList = [
+            {
+              name: "成功案例.pdf",
+              url: item.file,
+            },
+          ];
+        } else {
+          this.fileList = [];
+        }
+
+        this.dialogVisible = true;
+        console.log("openEditCase", this);
+      },
+      /** 获取草稿 **/
+      getDraftInfo(isPreview) {
+        this.$axios.get("/api/kaifawu/get_draft").then((res) => {
+          if (Number(res.data.status) == 1 && res.data.data) {
+            let data = res.data.data;
+            if (!Array.isArray(data.successful_case)) {
+              if (
+                data.successful_case &&
+                typeof data.successful_case === "object"
+              ) {
+                data.successful_case = [data.successful_case];
+              } else {
+                data.successful_case = [];
+              }
+            }
+
+            data.city = Number(data.city);
+            data.industry = Number(data.industry);
+            data.tech_type = Number(data.tech_type);
+            this.data = data;
+          }
+        });
+      },
+      /** 传入id后处理 **/
+      getLastDetail() {
+        this.$axios
+          .post("/api/kaifawu/get_provider", {
+            id: this.lastId,
+            self: 1,
+          })
+          .then((res) => {
+            if (Number(res.data.status) === 1) {
+              let data = res.data.data;
+              data.city = Number(data.city);
+              data.industry = Number(data.industry);
+              data.tech_type = Number(data.tech_type);
+              if (!Array.isArray(data.successful_case)) {
+                if (
+                  data.successful_case &&
+                  typeof data.successful_case === "object"
+                ) {
+                  data.successful_case = [data.successful_case];
+                } else {
+                  data.successful_case = [];
+                }
+              }
+              this.data = data;
+            }
+          });
+      },
+
+      /** 存储草稿 **/
+      async saveDraft(isPublish, isPreview) {
+        let url = "/api/kaifawu/store";
+        if (this.data.id) {
+          url = "/api/kaifawu/publish";
+        }
+        let p = {
+          ...this.data,
+          publish: isPublish ? 1 : 0,
+        };
+        //服务名称
+        if (!p.title) {
+          this.$message.warning("请填写正确的服务名称（2-20字符）");
+          return;
+        }
+        //所处行业
+        if (!p.industry) {
+          this.$message.warning("请选择所处行业");
+          return;
+        }
+        //技术类型
+        if (!p.tech_type) {
+          this.$message.warning("请选择技术类型");
+          return;
+        }
+        //缩略图
+        if (!p.images) {
+          this.$message.warning("请上传缩略图");
+          return;
+        }
+        //方案简介
+        if (
+          !p.description ||
+          p.description.length < 8 ||
+          p.description.length > 255
+        ) {
+          this.$message.warning("请填写正确的方案简介（8-255字符）");
+          return;
+        }
+        //方案简介
+        if (!p.detail) {
+          this.$message.warning("请填写方案介绍");
+          return;
+        }
+        // 更改已有的时候发布，校验状态
+        if (p.publish === 1 && this.lastId && Number(this.data.status) === 2) {
+          this.$message.warning("该解决方案已发布，暂不允许修改");
+          return;
+        }
+        let res = await this.$axios.post(url, p);
+        if (Number(res.data.status) === 1) {
+          if (!isPublish) {
+            this.getDraftInfo(isPreview);
+            this.$message.success("保存草稿成功");
+          } else {
+            this.$message.success("您已提交申请入驻，请耐心等待审核结果");
+            setTimeout(() => {
+              location.href = "/company/" + this.$store.state.userinfo.uid;
+            }, 1000);
+          }
+          return true;
+        }
+      },
+      /** 确认提交 **/
+      submitAll() {
+        this.saveDraft(true);
+      },
+      /** 预览 **/
+      preview() {
+        try {
+          localStorage.setItem("kaifainPreviewData", JSON.stringify(this.data));
+          window.open(`/kaifain/preview`, "_black");
+        } catch (e) {
+          console.log("");
+        }
+      },
+      /** 预览 **/
+      previewCase() {
+        try {
+          localStorage.setItem(
+            "kaifainPreviewCaseData",
+            JSON.stringify(this.dataItem)
+          );
+          window.open(`${this.kaifainUrl}/previewCase`, '_black')
+        } catch (e) {
+          console.log("");
+        }
+      },
+      openNewUrl(item) {
+        window.open(item.file, "__black");
+      },
+      jumpToOther() {
+        let url = "https://kaifain.proginn.com/s/10";
+        window.open(url, "__black");
+      },
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  @import "../../assets/css/kaifain/kaifainAdd.scss";
+</style>
+<style lang="scss">
+  @import "../../assets/css/kaifain/kaifainAddNoScoped.scss";
+</style>

pages/frontend/skill_cert/add.vue

@@ -64,7 +64,7 @@
     <!-- 技能认证：end -->
     <div class="level-selector">
       <div class="col-title">
-        <span class="label">选择认证等级</span>
+        <span class="label">您大概的水平</span>
       </div>
       <span class="action" @click="toLevelsDesc">等级对照表</span>
       <img
@@ -77,14 +77,14 @@
     <div class="level-selector">
       <el-select
         v-model="level"
-        placeholder="--请选择目标等级--"
+        placeholder="--请选择--"
         clearable
         @change="handleLevelChange"
       >
         <el-option
           v-for="dict in levels"
           :key="dict.item_id"
-          :label="dict.name"
+          :label="dict.sub_name"
           :value="dict.item_id"
         />
       </el-select>
@@ -95,7 +95,7 @@
      <p v-show="imgShow && this.level == 1105" class="field-tips">
       目标T5级（对标阿里P7），最低40W以上年薪
     </p>
-    <p v-show="imgShow  && this.level == 1106" class="field-tips">
+    <p v-show="imgShow  && this.level == 1105" class="field-tips">
       目标T6级（对标阿里P8），最低65W以上年薪
     </p>
     <p class="field-tips" v-show="currentFieldId" style="margin-top: 10px">
@@ -420,7 +420,8 @@ export default {
     },
     async getLevels() {
       let res = await this.$axios.$post(`/uapi/pub/freeworklevel`, {
-        occupation_id: 0
+        occupation_id: 0,
+        type:"user_cert"
       });
       this.levels = res.data.list.map(ele => {
         /*ele.name += ` ￥${ele.price}`;*/

pages/otherpage/companyComplete/add.vue

@@ -0,0 +1,793 @@
+<template>
+  <div class="lenrn_content" style="margin: 20px 0 30px !important">
+    <el-container>
+      <el-container>
+        <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" label-width="80px">
+              <el-form-item label="LOGO">
+                <div class="common-upload">
+                  <el-upload
+                    class="avatar-uploader"
+                    action="/upload_image"
+                    :show-file-list="false"
+                    :on-success="(response, file, fileList)=> upload_img_success(response, file, fileList,1)">
+                    <img v-if="saleInfo.img_icon" :src="saleInfo.img_icon" 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>
+                </div>
+              </el-form-item>
+              <el-form-item label="课程名称">
+                <el-input show-word-limit maxlength="15" v-model="saleInfo.title"></el-input>
+              </el-form-item>
+              <el-form-item label="副标题">
+                <el-input show-word-limit maxlength="15" placeholder="请简单概况一下课程亮点" type="textarea" v-model="saleInfo.desc"></el-input>
+              </el-form-item>
+
+              <el-form-item label="计费模式">
+                <el-radio v-model="saleInfo.pricetype" label="1">免费</el-radio>
+                <el-radio v-model="saleInfo.pricetype" label="2">付费</el-radio>
+              </el-form-item>
+              <el-form-item style="display:inline-block" v-if="saleInfo.pricetype==2" label="课程价格">
+                <el-input  v-model="saleInfo.price"  v-onlyNumber="{precision: 2, min: 0, max: 99999}"  type="number"></el-input>
+              </el-form-item>
+              <el-form-item style="display:inline-block" v-if="saleInfo.pricetype==2" label="划线价格">
+                <el-input  v-model="saleInfo.yprice"  v-onlyNumber="{precision: 2, min: 0, max: 99999}"  type="number"></el-input>
+              </el-form-item>
+              <el-form-item label="课程状态">
+                <el-radio v-model="saleInfo.point" label="1">更新</el-radio>
+                <el-radio v-model="saleInfo.point" label="2">完结</el-radio>
+              </el-form-item>
+              <el-form-item label="分类">
+                <el-select v-model="saleInfo.cate_id" placeholder="请选择">
+                  <el-option
+                    v-for="item in consultCate"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="课程描述">
+                <div class="content-field">
+                  <div class="content-editor">
+                    <editor
+                      :hideImage="false"
+                      :content="saleInfo.content"
+                      @change="(val)=> editor_change(val,1)"
+                      placeholder="课程描述"></editor>
+                  </div>
+                </div>
+              </el-form-item>
+              <el-form-item>
+                <el-button @click="active_set(2,false)" type="primary">下一步</el-button>
+              </el-form-item>
+            </el-form>
+
+            <el-form v-if="active==2" style="margin-top: 60px" ref="form" label-width="80px">
+              <solution_add></solution_add>
+            </el-form>
+
+            <el-form v-if="active==3" style="margin-top: 60px" ref="form"  label-width="80px">
+              <el-form-item label="视频封面">
+                <div class="common-upload">
+                  <el-upload
+                    class="avatar-uploader"
+                    action="/upload_image"
+                    :show-file-list="false"
+                    :on-success="(response, file, fileList)=> upload_img_success(response, file, fileList,3)">
+                    <img v-if="saleInfo.video_img" :src="saleInfo.video_img" 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>
+                  <div class="look-img">
+                    <div class="text-hover">
+                      <span class="text">查看示意图</span>
+                      <div class="img">
+                        <img class="active-img2" src="@/assets/img/learn/video-add@2x.png"/>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </el-form-item>
+              <el-form-item  label="章节管理">
+                <div v-for="(item,index) in video_list" :key="item.id">
+                  <el-input style="margin-top: 10px" placeholder="请输入内容" v-model="item.video_name">
+                    <template slot="prepend">第{{index+1}}章</template>
+                    <el-button slot="append" @click="del_zj(index,item.id)" icon="el-icon-delete"></el-button>
+                  </el-input>
+
+                  <div v-for="(item2,index2) in item.list" :key="item2.id" style="background: #f6f6f6;padding: 10px;margin-top: 10px">
+                    <el-input style="margin-top: 10px" placeholder="请输入课程名称" v-model="item2.video_name" 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="item2.checked">试看</el-checkbox>
+                      <el-button slot="append"  @click="del_kc(index,index2,item2.id)" 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=""
+                        :show-file-list="false"
+                        :http-request="(e)=> fileChange(e,index,index2)">
+                        <el-button size="small" type="primary">点击上传</el-button>
+                      </el-upload>
+                      <div class="file-upload" style="margin-top: 10px">
+                        <el-progress :text-inside="true" :stroke-width="20" :percentage="item2.progress"></el-progress>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div style="background: #f6f6f6;padding: 10px;margin-top: 10px;text-align:center">
+                    <el-button @click="add_new_kc(index)" :disabled="kc_disabled" type="primary">添加新的课程</el-button>
+                    <el-button @click="add_new_zj()" :disabled="zj_disabled" type="primary">添加新的章节</el-button>
+                  </div>
+                </div>
+
+              </el-form-item>
+              <el-form-item>
+                <el-button @click="active_set(2,true)" type="primary">上一步</el-button>
+                <el-button @click="active_set(4,false)" type="primary">下一步</el-button>
+              </el-form-item>
+            </el-form>
+
+            <el-form v-if="active==4" style="margin-top: 60px" ref="form"  label-width="80px">
+              <el-form-item style="display: none" label="群二维码">
+                <el-upload
+                  class="avatar-uploader"
+                  action="/upload_image"
+                  :show-file-list="false"
+                  :on-success="(response, file, fileList)=> upload_img_success(response, file, fileList,4)">
+                  <img v-if="saleInfo.ewm" :src="saleInfo.ewm" 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="saleInfo.notice_msg"
+                      @change="(val)=> editor_change(val,3)"
+                      placeholder="公告栏用于发布课程通知，常见用于课件下载等信息。"></editor>
+                  </div>
+                </div>
+              </el-form-item>
+              <el-form-item>
+                <el-button @click="active_set(3,true)" type="primary">上一步</el-button>
+                <el-button @click="active_set(5,false)" type="primary">确认提交</el-button>
+              </el-form-item>
+            </el-form>
+          </el-main>
+        </el-container>
+      </el-container>
+    </el-container>
+
+    <!-- vueCropper 剪裁图片实现-->
+    <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
+      <div class="cropper-content">
+        <div class="cropper" style="text-align:center">
+          <vueCropper
+            ref="cropper"
+            :img="option.img"
+            :outputSize="option.size"
+            :outputType="option.outputType"
+            :info="true"
+            :full="option.full"
+            :canMove="option.canMove"
+            :canMoveBox="option.canMoveBox"
+            :original="option.original"
+            :autoCrop="option.autoCrop"
+            :fixed="option.fixed"
+            :fixedNumber="option.fixedNumber"
+            :centerBox="option.centerBox"
+            :infoTrue="option.infoTrue"
+            :fixedBox="option.fixedBox"
+          ></vueCropper>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="finish">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import { mapState } from "vuex";
+  import editor from "@/components/editor";
+  import solution_add from "@/components/company/solution_add";
+  import multiUploader from '@/components/multi-uploader';
+
+  if(process.client)
+  {
+    import('@/assets/js/aliyun-upload-sdk/aliyun-upload-sdk-1.5.2.min.js');
+  }
+
+  export default {
+    head: {
+      title: '新建咨询服务',
+    },
+    head() {
+      return {
+        script: [
+          {src: 'https://gosspublic.alicdn.com/aliyun-oss-sdk-6.13.0.min.js'},
+        ]
+      }
+    },
+    components: {
+      editor,
+      multiUploader,
+      solution_add
+    },
+    data () {
+      return {
+        sale_id: '', // 编辑时
+        kc_disabled:false,
+        zj_disabled:false,
+        active:1,
+        selectedConsultCate: [],//选中的技能分类
+        consultCate: [], // 技能分类数据源
+        saleInfo:{
+          point:"1",
+          pricetype:"1",
+          img_icon:"",
+          video_img:"",
+          ewm:"",
+          desc:"",
+          price: '0.00',
+          yprice: '0.00'
+        },
+        dialogVisible: false,
+        // 裁剪组件的基础配置option
+        option: {
+          img: '', // 裁剪图片的地址
+          type:'',//类型
+          info: true, // 裁剪框的大小信息
+          outputSize: 1, // 裁剪生成图片的质量
+          outputType: 'jpeg', // 裁剪生成图片的格式
+          canScale: false, // 图片是否允许滚轮缩放
+          autoCrop: true, // 是否默认生成截图框
+          // autoCropWidth: 300, // 默认生成截图框宽度
+          // autoCropHeight: 200, // 默认生成截图框高度
+          fixedBox: true, // 固定截图框大小 不允许改变
+          fixed: true, // 是否开启截图框宽高固定比例
+          fixedNumber: [16, 9], // 截图框的宽高比例
+          full: true, // 是否输出原图比例的截图
+          canMoveBox: false, // 截图框能否拖动
+          original: false, // 上传图片按照原始比例渲染
+          centerBox: false, // 截图框是否被限制在图片里面
+          infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+        },
+        teacherInfo:{
+          img:""
+        },
+        video_list:[{"id":"","video_name":"","list":[{"id":"","kc_id":"1","progress":0,"video_name":"","checked":false,"time_type":0,"ymd":"","his":""}]}],
+      }
+    },
+    mounted () {
+      this.needLogin()
+      var sale_id = this.$route.query.id ? this.$route.query.id : 0;
+      this._getConsultCate()
+      if (sale_id!=0) {
+        this.sale_id=sale_id;
+        this.getDetail();
+      }
+      if (this.saleInfo.price > 0)
+      {
+        this.saleInfo.pricetype="2";
+      }
+      else
+      {
+        this.saleInfo.pricetype="1";
+      }
+    },
+    methods: {
+      time_type(zj_id,kc_id,type){
+        this.video_list[zj_id].list[kc_id].time_type=type;
+      },
+      // 点击裁剪，这一步是可以拿到处理后的地址
+      finish() {
+        this.$refs.cropper.getCropBlob((data) => {
+          console.log("裁剪",data)
+          let formData = new FormData();
+          formData.append("file", data);
+          this.$axios.$post('/upload_image', formData,{
+            headers: {
+              "Content-Type": "multipart/form-data"
+            }
+          }).then(res => {
+            this.dialogVisible = false
+            this.type=0;
+            if(this.option.type==1)
+            {
+              this.saleInfo.img_icon=res.filename;
+            }
+            else if(this.option.type==2)
+            {
+              this.teacherInfo.img=res.filename;
+            }
+            else if(this.option.type==3)
+            {
+              this.saleInfo.video_img=res.filename;
+            }
+          }).catch(err => {
+
+          })
+        })
+      },
+      add_new_zj(){
+        this.add_three(2);
+      },
+      add_new_kc(zj_id){
+        this.add_three(3,0,zj_id);
+      },
+      del_kc(zj_id,kc_id,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);
+            }
+          }
+        }*/
+        this.$axios.$post('/api/sale/del_video', { sale_id: this.sale_id,id:id}).then(res => {
+          if (res.status === 1) {
+            this.video_list=res.data;
+          }
+        }).catch(err => {
+
+        })
+      },
+      del_zj(zj_id,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);
+          }
+        }*/
+        this.$axios.$post('/api/sale/del_video', { sale_id: this.sale_id, id}).then(res => {
+          if (res.status === 1) {
+            this.video_list=res.data;
+          }
+        }).catch(err => {
+
+        })
+      },
+      active_set(val,return_=true){
+        if(return_)
+        {
+          this.active=val;
+          return;
+        }
+        if(val==2)
+        {
+          this.saleInfo.cate_id_one=this.saleInfo.cate_id;
+          this.saleInfo.cate_id_two=0;
+          this.add_one();
+        }
+        else if(val==3)
+        {
+           this.add_two();
+        }
+        else if(val==4)
+        {
+          this.add_three();//效验课程数据
+        }
+        else if(val==5)
+        {
+          this.add_fore();//提交审核
+        }
+        else
+        {
+          this.active=val;
+        }
+      },
+      upload_img_success(res, file, fileList,type){
+        if(type==1)
+        {
+          let filename=res.filename;
+          // 上传成功后将图片地址赋值给裁剪框显示图片
+          this.$nextTick(() => {
+            this.option.img =filename;
+            this.option.fixedNumber=[16,9]
+            this.option.type=type;
+            this.dialogVisible = true
+          })
+        }
+        else if(type==2)
+        {
+          let filename=res.filename;
+          // 上传成功后将图片地址赋值给裁剪框显示图片
+          this.$nextTick(() => {
+            this.option.img =filename;
+            this.option.fixedNumber=[100,100]
+            this.option.type=type;
+            this.dialogVisible = true
+          })
+        }
+        else if(type==3)
+        {
+          let filename=res.filename;
+          // 上传成功后将图片地址赋值给裁剪框显示图片
+          this.$nextTick(() => {
+            this.option.img =filename;
+            this.option.fixedNumber=[7,5]
+            this.option.type=type;
+            this.dialogVisible = true
+          })
+        }
+        else if(type==4)
+        {
+          this.saleInfo.ewm=res.filename;
+        }
+      },
+      editor_change(val,type)//编辑器内容发生改变的时候
+      {
+        if(type==1) {
+          this.saleInfo.content = val;
+        }
+        else if(type==2) {
+          this.teacherInfo.content = val;
+        }
+        else if(type==3) {
+          this.saleInfo.notice_msg = val;
+        }
+      },
+      fileChange (e,zj_id,kc_id) {
+        let videoFile = e.file
+        let filename=e.file.name;
+        this.createUploader(videoFile,zj_id,kc_id,filename)
+      },
+      createUploader (videoFile,zj_id,kc_id,filename) {
+        let self = this
+        let uploader = new AliyunUpload.Vod({
+          timeout: 60000,
+          partSize: 1048576,
+          parallel: 5,
+          retryCount: 3,
+          retryDuration: 2,
+          region: 'cn-shanghai',
+          userId: '1024',
+          // 添加文件成功
+          addFileSuccess: function (uploadInfo) {
+            self.statusText = '添加文件成功, 等待上传...'
+            console.log("addFileSuccess: " + uploadInfo.file.name)
+          },
+          // 开始上传
+          onUploadstarted: function (uploadInfo) {
+            self.$axios.$post("/api/sale/video", {filename: uploadInfo.file.name}).then(({data}) => {
+              let uploadAuth = data.UploadAuth;
+              let uploadAddress = data.UploadAddress;
+              let videoId = data.VideoId;
+              self.videoId = data.VideoId;
+              self.video_list[zj_id].list[kc_id].temp_video_id=videoId;
+              self.video_list[zj_id].list[kc_id].video_name=data.filename;
+              uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
+            })
+            self.statusText = '文件开始上传...'
+            console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
+          },
+          // 文件上传成功
+          onUploadSucceed: function (uploadInfo) {
+            //self.video_list[zj_id].list[kc_id].video_id= self.video_list[zj_id].list[kc_id].temp_video_id;
+            //self.add_three(4);//保存课程
+          },
+          // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
+          onUploadProgress: function (uploadInfo, totalSize, progress) {
+            let progressPercent = Math.ceil(progress * 100)
+            self.video_list[zj_id].list[kc_id].progress=progressPercent;
+            self.video_list[zj_id].list[kc_id].video_id= self.video_list[zj_id].list[kc_id].temp_video_id;
+          },
+        })
+        uploader.addFile(videoFile);
+        uploader.startUpload();//上传文件
+      },
+      /** 获取咨询分类 */
+      async _getConsultCate () {
+        this.$axios.$post('/api/sale/cateListYes', { type: 4, 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)
+        })
+      },
+      /** 第一步添加 */
+      async add_one() {
+        this.active=2;
+      },
+      /** 第二步添加 */
+      async add_two() {
+        if(!this.teacherInfo.name)
+        {
+          this.$message.error('讲师名称必须填写');
+          return false;
+        }
+
+        if(!this.teacherInfo.op)
+        {
+          this.$message.error('职称必须填写');
+          return false;
+        }
+
+        if(!this.teacherInfo.img)
+        {
+          this.$message.error('封面必须上传');
+          return false;
+        }
+
+        if(!this.teacherInfo.content)
+        {
+          this.$message.error('自我介绍必须填写');
+          return false;
+        }
+        this.teacherInfo.sale_id=this.sale_id;
+        var data=JSON.stringify(this.teacherInfo);
+        await this.$axios.$post('/api/sale/sale_add_two', { data }).then(res => {
+          if (res.status === 1) {
+            this.active=3;
+          }
+        }).catch(err => {
+
+        })
+      },
+      /** 第三步添加 */
+      async add_three(type=1,kc_id=0,zj_id=0) {
+        var video_list=JSON.stringify(this.video_list);
+        var saleInfo=JSON.stringify(this.saleInfo);
+        await this.$axios.$post('/api/sale/sale_add_three', {type, sale_id:this.sale_id, video_list,saleInfo }).then(res => {
+          if (res.status === 1) {
+            if(!res.data.result)
+            {
+              this.video_list=res.data.list;
+              if(type==1)
+              {
+                this.active=4;
+              }
+              else if(type==2)
+              {
+                var new_object={"id":"","video_name":"","list":[{"id":"","kc_id":"","progress":0,"video_name":"","checked":false,"time_type":0,"ymd":"","his":""}]};
+                this.video_list.push(new_object);
+                this.add_video();
+              }
+              else if(type==3)
+              {
+                var new_object={"id":"","kc_id":"","progress":0,"video_name":"","checked":false,"time_type":0,"ymd":"","his":""};
+                this.video_list[zj_id].list.push(new_object);
+                this.add_video();
+              }
+            }
+            else
+            {
+              this.$message.error(res.data.result_msg);
+            }
+          }
+        }).catch(err => {
+
+        })
+      },
+      /** 第四步添加 */
+      async add_fore() {
+        var video_list=JSON.stringify(this.video_list);
+        var saleInfo=JSON.stringify(this.saleInfo);
+        await this.$axios.$post('/api/sale/sale_add_fore', {sale_id:this.sale_id, video_list, saleInfo}).then(res => {
+          if (res.status === 1) {
+            this.$message.success('我们已经收到您的审核提交，请耐心等待');
+            location.href = `/workbench/learn/index`
+          }
+        }).catch(err => {
+
+        })
+      },
+      /** 课程添加 */
+      async add_video() {
+        this.kc_disabled=true;
+        this.zj_disabled=true;
+        var data=JSON.stringify(this.video_list);
+        await this.$axios.$post('/api/sale/sale_add_video', { data,sale_id:this.sale_id}).then(res => {
+          if (res.status === 1) {
+            this.video_list=res.data;
+          }
+          this.kc_disabled=false;
+          this.zj_disabled=false;
+        }).catch(err => {
+          this.kc_disabled=false;
+          this.zj_disabled=false;
+        })
+      },
+      /** 课程添加 */
+      async getDetail() {
+        await this.$axios.$post('/api/sale/info', {sale_id:this.sale_id}).then(res => {
+          if (res.status === 1) {
+            if(res.data.video.length>0)
+            {
+              this.video_list=res.data.video;
+            }
+            this.saleInfo=res.data.sale;
+            this.teacherInfo=res.data.teacher;
+            this.selectedConsultCate = [res.data.sale.cate_id_one, res.data.sale.cate_id_two]
+          }
+        }).catch(err => {
+
+        })
+      },
+    }
+  }
+</script>
+
+<style scope lang="scss">
+  @import "@/assets/css/consult/create.scss";
+  .common-upload {
+    display: flex;
+    align-items: end;
+    .look-img {
+      margin-left: 14px;
+      .text {
+        font-size: 14px;
+        font-family: PingFangSC, PingFangSC-Medium;
+        font-weight: 500;
+        color: #308eff;
+        cursor: pointer;
+      }
+      .text-hover:hover {
+        position: relative;
+        .img {
+          display: block;
+        }
+      }
+      .img {
+        background: #fff;
+        border: 1px solid #e0e5ed;
+        box-shadow: 0px 2px 20px 0px rgba(22,40,63,0.15);
+        border-radius: 10px;
+        text-align: center;
+        position: relative;
+        position: absolute;
+        top: -120px;
+        left: 0;
+        width: 300px;
+        height: 120px;
+        display: none;
+        transition: all ease .3s;
+        .active-img2 {
+          width: 234px;
+          height: 71px;
+          background-size: cover;
+          overflow: hidden;
+          margin-top: 24px;
+        }
+        .active-img1 {
+          width: 262px;
+          height: 78px;
+          background-size: cover;
+          overflow: hidden;
+          margin-top: 22px;
+        }
+      }
+      .img:after {
+        content: '';
+        width: 0;
+        height: 0;
+        border-right: 10px solid transparent;
+        border-bottom: 10px solid transparent;
+        border-top: 10px solid #e0e5ed;
+        border-left: 10px solid transparent;
+        position: absolute;
+        left: 24px;
+        bottom: -20px;
+      }
+      .img:before {
+        content: '';
+        width: 0;
+        height: 0;
+        border-right: 9px solid transparent;
+        border-bottom: 9px solid transparent;
+        border-top: 9px solid #fff;
+        border-left: 9px solid transparent;
+        position: absolute;
+        left: 25px;
+        bottom: -18px;
+        z-index: 1;
+      }
+    }
+  }
+</style>
+<style>
+  .el-select .el-input {
+    width: 130px;
+  }
+  .avatar-uploader img{max-width: 200px}
+  .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}
+  .cropper-content{
+    width: 100%;
+    height: 300px;
+  }
+  .cropper {
+    width: 100%;
+    height: 240px;
+  }
+  .btnGroup{
+    float: right;
+    margin-top: 10px;
+    margin-right: 15px;
+  }
+</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>