编辑器兼容处理

assets/css/kaifain/previewCase.scss

@@ -0,0 +1,424 @@
+@import "../scssCommon";
+
+.kaifainPreviewCase {
+  -webkit-overflow-scrolling: auto;
+  .topArea {
+    position: relative;
+    margin: -85px 0 0 !important;
+    width: 100vw;
+    background: rgba(48, 89, 220, 1);
+    height: 705px;
+
+    .bannerBg {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 0;
+      width: 1215px;
+      img {
+        width: 1215px;
+        height: 705px;
+        vertical-align: middle;
+      }
+    }
+    .topContent {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .left {
+        width: 1215px;
+        margin: 0 auto;
+        .title {
+          margin-left: 107px;
+          height: 72px;
+          font-size: 54px;
+          font-weight: 600;
+          color: rgba(255, 255, 255, 1);
+          line-height: 72px;
+          letter-spacing: 3px;
+        }
+        .desc {
+          margin-left: 107px;
+          margin-top: 12px;
+          height: 52px;
+          font-size: 19px;
+          font-weight: 400;
+          color: rgba(255, 255, 255, 1);
+          line-height: 26px;
+        }
+
+        .btn {
+          margin-left: 107px;
+          width: 213px;
+          height: 56px;
+          border-radius: 3px;
+          border: 2px solid rgba(255, 255, 255, 1);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-top: 67px;
+          cursor: pointer;
+          p {
+            height: 25px;
+            font-size: 18px;
+            font-weight: 500;
+            color: rgba(255, 255, 255, 1);
+            line-height: 25px;
+          }
+        }
+      }
+    }
+  }
+
+  .contentArea {
+    width: 1200px;
+    margin: 0 auto;
+    box-sizing: border-box;
+
+    .introArea {
+      background-color: #fff;
+      padding: 60px 80px;
+
+      .title {
+        text-align: center;
+        .word {
+          height: 48px;
+          font-size: 34px;
+          font-weight: 500;
+          color: rgba(34, 34, 34, 1);
+          line-height: 48px;
+          letter-spacing: 1px;
+        }
+        .line {
+          margin: 10px auto;
+          width: 40px;
+          height: 4px;
+          background: rgba(32, 148, 243, 1);
+          border-radius: 4px;
+        }
+      }
+      .introContent {
+
+      }
+    }
+    .caseListArea {
+      margin-top: 10px;
+      padding: 40px 80px;
+      background-color: #fff;
+
+      .title {
+        text-align: center;
+        .word {
+          height: 48px;
+          font-size: 34px;
+          font-weight: 500;
+          color: rgba(34, 34, 34, 1);
+          line-height: 48px;
+          letter-spacing: 1px;
+        }
+        .line {
+          margin: 10px auto 0;
+          width: 40px;
+          height: 4px;
+          background: rgba(32, 148, 243, 1);
+          border-radius: 4px;
+        }
+      }
+
+      .list {
+        margin-top: 62px;
+        display: flex;
+        width: 100%;
+        .cell {
+          width: 1038px;
+          height: 200px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-bottom: 1px solid #EDEDED;
+
+          .left {
+            flex-shrink: 0;
+            font-size: 0;
+            width: 160px;
+            height: 160px;
+            img {
+              width: 160px;
+              height: 160px;
+            }
+          }
+          .right {
+            flex-grow: 1;
+            margin-left: 13px;
+            height: 124px;
+            display: flex;
+            justify-content: space-between;
+            flex-direction: column;
+            .top {
+              flex-grow: 1;
+              .bTitle {
+                font-size: 17px;
+                font-weight: 600;
+                color: rgba(34, 34, 34, 1);
+                line-height: 24px;
+              }
+              .bStitle {
+                margin-top: 9px;
+                height: 40px;
+                font-size: 14px;
+                font-weight: 400;
+                color: rgba(34, 34, 34, 1);
+                line-height: 20px;
+              }
+            }
+            .bottom {
+              flex-shrink: 0;
+              height: 26px;
+              display: flex;
+              align-items: center;
+              cursor: pointer;
+              .icon {
+                width: 25px;
+                height: 25px;
+                background: url('~@/assets/img/kaifain/detail/icon_pdf@2x.png') no-repeat;
+                background-size: cover;
+              }
+              .word {
+                margin-left: 7px;
+                height: 17px;
+                font-size: 12px;
+                font-weight: 600;
+                color: rgba(51, 51, 51, 1);
+                line-height: 17px;
+              }
+
+            }
+          }
+        }
+      }
+    }
+
+  }
+
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.kaifainPreviewCaseMobile {
+  margin: 0 !important;
+  background-color: #fff;
+  width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  .topArea {
+    position: relative;
+    margin: 0 0 0 !important;
+    width: 100vw;
+    background: rgba(48, 89, 220, 1);
+    height: pxtovw(602);
+
+    .bannerBg {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100vw;
+      img {
+        width: 100vw;
+        height: auto;
+        vertical-align: middle;
+      }
+    }
+    .topContent {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .left {
+        width: 100vw;
+        margin: 0 auto;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: column;
+        .title {
+          margin-top: pxtovw(54);
+          height: pxtovw(51);
+          font-size: pxtovw(34);
+          font-weight: 600;
+          color: rgba(255, 255, 255, 1);
+          line-height: pxtovw(50);
+          letter-spacing: pxtovw(2);
+        }
+        .desc {
+          margin-top: pxtovw(10);
+          height: pxtovw(38);
+          font-size: pxtovw(13);
+          font-weight: 400;
+          color: rgba(255, 255, 255, 1);
+          line-height: pxtovw(19);
+        }
+
+        .btn {
+          width: pxtovw(187);
+          height: pxtovw(39);
+          border-radius: pxtovw(2);
+          border: pxtovw(1) solid rgba(255, 255, 255, 1);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-top: pxtovw(25);
+          cursor: pointer;
+          p {
+            height: pxtovw(17);
+            font-size: pxtovw(13);
+            font-weight: 500;
+            color: rgba(255, 255, 255, 1);
+            line-height: pxtovw(17);
+          }
+        }
+      }
+    }
+  }
+
+  .contentArea {
+    width: 100vw;
+    margin: 0 auto;
+    box-sizing: border-box;
+
+    .introArea {
+      padding: pxtovw(33) pxtovw(14);
+      background-color: #fff;
+
+      .title {
+        text-align: center;
+        .word {
+          font-size: pxtovw(24);
+          font-weight: 500;
+          color: rgba(34, 34, 34, 1);
+          letter-spacing: pxtovw(1);
+        }
+        .line {
+          margin: pxtovw(8) auto;
+          width: pxtovw(29);
+          height: pxtovw(3);
+          background: rgba(32, 148, 243, 1);
+          border-radius: pxtovw(3);;
+        }
+      }
+      .introContent {
+        width: pxtovw(347);
+        p {
+          word-break: break-all;
+        }
+      }
+    }
+    .caseListArea {
+      margin-top: 0;
+      padding: 0;
+      padding-top: pxtovw(30);
+      background-color: #fff;
+
+      .title {
+        text-align: center;
+        .word {
+          height: pxtovw(33);
+          font-size: pxtovw(24);
+          font-weight: 500;
+          color: rgba(34, 34, 34, 1);
+          line-height: pxtovw(33);
+          letter-spacing: pxtovw(1);
+        }
+        .line {
+          margin: pxtovw(8) auto;
+          width: pxtovw(29);
+          height: pxtovw(3);
+          background: rgba(32, 148, 243, 1);
+          border-radius: pxtovw(3);
+        }
+      }
+
+      .list {
+        margin-top: pxtovw(10);
+        display: flex;
+        width: 100%;
+        padding: 0 pxtovw(10);
+        .cell {
+          width: 100vw;
+          height: pxtovw(96);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-bottom: pxtovw(1) solid #EDEDED;
+
+          .left {
+            flex-shrink: 0;
+            font-size: 0;
+            width: pxtovw(72);
+            height: pxtovw(72);
+            img {
+              width: pxtovw(72);
+              height: pxtovw(72);
+            }
+          }
+          .right {
+            width: pxtovw(268);
+            flex-grow: 1;
+            margin-left: pxtovw(10);
+            height: pxtovw(72);
+            display: flex;
+            justify-content: space-between;
+            flex-direction: column;
+            .top {
+              display: flex;
+              justify-content: center;
+              flex-direction: column;
+
+              .bStitle {
+                height: auto;
+                width: pxtovw(268);
+                margin-top: 0;
+                max-height: pxtovw(40);
+                font-size: pxtovw(14);
+                font-weight: 400;
+                color: rgba(34, 34, 34, 1);
+                line-height: pxtovw(20);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+              }
+            }
+          }
+        }
+      }
+    }
+
+  }
+}
+
+.main {
+  margin-top: 0 !important;
+}
+
+@media screen and (max-width: 960px) {
+  .main {
+    min-width: auto !important;
+  }
+}

components/editor.vue

@@ -5,9 +5,10 @@
       :content="content"
       :placeholder="placeholder || ''"
       @change="handleChange"
-      v-quill:myQuillEditor="editorOption"
+      v-quill:[quillName]="editorOption"
     ></div>
-    <input type="file" id="imgInput" @change="handleContentFileChange" style="display: none;" />
+    <input type="file" :id="'imgInput'+quillName"  @change="handleContentFileChange($event)"
+      style="display: none;" />
     <el-dialog title="提示" :visible.sync="linkDialog" :before-close="handleLinkClose">
       <el-form :model="link">
         <el-form-item label="标题" :label-width="formLabelWidth">
@@ -52,6 +53,7 @@ export default {
     let placeholder = this.placeholder
     return {
       editorOption: {
+        name: Math.random(),
         theme: "snow",
         placeholder: placeholder || "请输入正文...",
         modules: {
@@ -81,21 +83,17 @@ export default {
       link: {
         title: "",
         url: ""
-      }
+      },
+      quillName: 'myQuillEditor' + Math.floor(Math.random() * 1000000000)
     };
   },
   computed: {},
   mounted() {
+    console.log('this.quillName', this.quillName)
     // 为图片ICON绑定事件  getModule 为编辑器的内部属性
-    this.myQuillEditor
+    this[this.quillName]
       .getModule("toolbar")
       .addHandler("image", this.imgHandler);
-    // this.myQuillEditor
-    //   .getModule("toolbar")
-    //   .addHandler("link", this.linkHandler);
-    // this.myQuillEditor
-    //   .getModule("toolbar")
-    //   .addHandler("video", this.videoHandler); // 为视频ICON绑定事件
   },
   methods: {
     handleChange(e) {
@@ -106,17 +104,17 @@ export default {
     },
     // 点击图片ICON触发事件
     imgHandler(state) {
-      this.addRange = this.myQuillEditor.getSelection();
+      this.addRange = this[this.quillName].getSelection();
       if (state) {
-        let fileInput = document.getElementById("imgInput");
+        let fileInput = document.getElementById("imgInput"+this.quillName);
         fileInput.click(); // 加一个触发事件
       }
       this.uploadType = "image";
     },
     // 点击link触发事件
     linkHandler(state) {
-      const selectedRange = this.myQuillEditor.getSelection();
-      const selectedText = this.myQuillEditor.getText(
+      const selectedRange = this[this.quillName].getSelection();
+      const selectedText = this[this.quillName].getText(
         selectedRange.index,
         selectedRange.length
       );
@@ -137,12 +135,12 @@ export default {
     },
     handleLinkOk() {
       const link = this.link;
-      this.myQuillEditor.deleteText(link.index, link.length);
-      this.myQuillEditor.insertEmbed(link.index, "link", {
+      this[this.quillName].deleteText(link.index, link.length);
+      this[this.quillName].insertEmbed(link.index, "link", {
         href: link.url,
         innerText: link.title
       });
-      // this.myQuillEditor.insertText(
+      // this[this.quillName].insertText(
       //   link.index,
       //   `<a href="${this.link.url}">${this.link.title}</a>`
       // );
@@ -150,19 +148,20 @@ export default {
     },
     // 点击视频ICON触发事件
     videoHandler(state) {
-      this.addRange = this.myQuillEditor.getSelection();
+      this.addRange = this[this.quillName].getSelection();
       if (state) {
-        let fileInput = document.getElementById("imgInput");
+        let fileInput = document.getElementById("imgInput"+this.quillName);
         fileInput.click(); // 加一个触发事件
       }
       // this.uploadType = "video";
     },
-    handleContentFileChange(e) {
+    handleContentFileChange(e, name) {
+      console.log('name', name)
       const file = e.target.files[0];
-      // if (file.size / 1024 > 500) {
-      //   this.$message.error("图片大小不得超过500k，请重新选择");
-      //   return false;
-      // }
+      if (file.size / 1024/1024 > 2) {
+        this.$message.error("图片大小不得超过2M，请重新选择");
+        return false;
+      }
       const formData = new FormData();
       formData.append("file", file);
       formData.append("original_filename", file.name);
@@ -171,12 +170,8 @@ export default {
           headers: { "Content-Type": "multipart/form-data" }
         })
         .then(res => {
-          const index = this.myQuillEditor.selection.savedRange.index;
-          this.myQuillEditor.insertEmbed(index, "image", res.filename);
-          // this.$emit(
-          //   "change",
-          //   this.content + `<img src="${res.filename}" alt="${file.name}"/>`
-          // );
+          const index = this[this.quillName].selection.savedRange.index;
+          this[this.quillName].insertEmbed(index, "image", res.filename);
         });
     }
   }

components/kaifain/dealSeoIndex.js

@@ -20,10 +20,12 @@ export default class DealSeoData {
   }
   
   async dealData() {
-    let { name, query: { page = 1 }, path, params } = this.app.context.route
+    let { name, query: { page = 1 }, path, params, fullPath } = this.app.context.route
     console.log("***", this.app.context.route, this.req)
-    if (path && path === "/kaifain/s") {
-      this.redirect(301, `/kaifain/s/?page=${page}`)
+    if (path && path[path.length-1] !== '/') {
+      let reditUrl = fullPath
+      reditUrl = reditUrl.replace(path, path+'/')
+      this.redirect(301, reditUrl)
     }
     let isSeoList = false
     let typeList = await this.getTypeList()

pages/kaifain/case/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{kaifainMobile: mobile, kaifain: !mobile}">
+  <div :class="{kaifainPreviewCaseMobile: mobile, kaifainPreviewCase: !mobile}">
     <div class="topArea">
       <div class="bannerBg">
         <img src="~@/assets/img/kaifain/detail/banner@2x.png" alt="" v-if="!mobile">
@@ -8,10 +8,10 @@
       <div class="topContent">
         <div class="left">
           <div class="title">{{detail.title}}</div>
-          <div class="desc">{{detail.description}}</div>
-          <div class="btn" @click="isShowToast=true">
-            <p>咨询了解</p>
-          </div>
+          <!--<div class="desc">{{detail.description}}</div>-->
+          <!--<div class="btn" @click="isShowToast=true">-->
+            <!--<p>咨询了解</p>-->
+          <!--</div>-->
         </div>
       </div>
     </div>
@@ -22,12 +22,11 @@
          <p class="word">案例介绍</p>
          <p class="line"></p>
        </div>
-       <div class="introContent ql-editor" v-html="detail.detail">
+       <div class="introContent ql-editor" v-html="detail.description">
 
        </div>
      </div>
     </div>
-    <ConnectUs :source="'开发屋详情'" :isShowToast="isShowToast" @close="isShowToast=false" :sourceId="tid"></ConnectUs>
   </div>
 </template>
 
@@ -81,7 +80,7 @@
     },
     methods: {
       getDetail() {
-        this.$axios.post('/api/kaifawu/get_provider?id='+this.tid, {id: this.tid}).then(res=>{
+        this.$axios.post('/api/kaifawu/get_public_case?id='+this.tid, {id: this.tid}).then(res=>{
           if (Number(res.data.status) === 1) {
             let data = res.data.data
             if (!data) {
@@ -108,5 +107,5 @@
 </script>
 
 <style scope lang="scss">
-  @import "../../../assets/css/kaifain/detail.scss";
+  @import "../../../assets/css/kaifain/previewCase.scss";
 </style>

pages/kaifain/previewCase.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="kaifain" :class="{isMobile: mobile}">
+  <div class="kaifainPreviewCase" :class="{isMobile: mobile}">
     <div class="topArea">
       <div class="bannerBg">
         <img src="~@/assets/img/kaifain/detail/banner@2x.png" alt="">
@@ -8,25 +8,21 @@
         <div class="left">
           <div class="title">{{detail.title}}</div>
           <!--<div class="desc">{{detail.description}}</div>-->
-          <div class="btn" @click="isShowToast=true">
-            <p>咨询了解</p>
-          </div>
         </div>
       </div>
     </div>
 
     <div class="contentArea">
      <div class="introArea">
-       <div class="title">
-         <p class="word">案例介绍</p>
-         <p class="line"></p>
-       </div>
+       <!--<div class="title">-->
+         <!--<p class="word">案例介绍</p>-->
+         <!--<p class="line"></p>-->
+       <!--</div>-->
        <div class="introContent ql-editor"  v-html="detail.description">
 
        </div>
      </div>
     </div>
-    <ConnectUs :source="'开发屋详情'" :isShowToast="isShowToast" @close="isShowToast=false" :sourceId="tid"></ConnectUs>
   </div>
 </template>
 
@@ -100,5 +96,5 @@
 </script>
 
 <style scope lang="scss">
-  @import "../../assets/css/kaifain/detail.scss";
+  @import "../../assets/css/kaifain/previewCase.scss";
 </style>

plugins/seoRouter.js

@@ -1,6 +1,6 @@
 const extendRoutes = (routes, resolve) => {
     /** 解决方案SEO优化 start **/
-    routes.unshift({
+    routes.push({
       name: 'kaifainSeoIndex',
       path: '/kaifain/*',
       component: resolve(__dirname, '../pages/kaifain/index.vue')