解决方案预览适配新版本

pages/kaifain/preview.vue

@@ -1,28 +1,46 @@
 <template>
   <div :class="{kaifainDetailMobile: mobile, kaifainDetail: !mobile}">
-    <div class="topArea">
-      <div class="bannerBg">
-        <img src="~@/assets/img/kaifain/detail/banner@2x.png" alt="" v-if="!mobile">
-        <img src="~@/assets/img/kaifain/detail/banner_h5@2x.png" alt="" v-else>
-      </div>
-      <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 class="topArea" :style="{backgroundImage: 'url(' + detail.bg_image + ')' }">
+      <div class="topContent" :class="{noneMobileAPP: true}">
+        <div class="title">{{detail.title}}</div>
+        <div class="desc">{{detail.description}}</div>
+        <div class="btn" @click="isShowToast=true" v-if="!mobile">
+          <p>咨询了解</p>
+        </div>
+        <div class="companyInfo">
+          <div class="left">
+            <div class="userImage">
+              <img :src="detail.company_info && detail.company_info.logo" alt=""/>
+            </div>
+            <p class="cname"
+              :class="{status: detail.company_info && Number(detail.company_info.company_verify) === 2}">
+              {{detail.company_info && detail.company_info.name}}
+            </p>
+          </div>
+          <div class="right">
+            <div class="icon"></div>
           </div>
         </div>
       </div>
+      <div class="bgChange" @click="isShowToastChange=true" v-if="isSelf">
+
+      </div>
     </div>
 
     <div class="contentArea">
+      <div class="bannerSelect">
+        <div class="cell selected">方案首页</div>
+        <a class="cell" href="#">
+          文章({{detail.jishuin && detail.jishuin.topics_count || 0}})</a>
+        <a class="cell"  href="#">
+          视频({{detail.jishuin && detail.jishuin.videos_count || 0}})</a>
+      </div>
       <div class="introArea">
-        <div class="title">
+        <div class="title" v-if="!mobile">
           <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.detail" style="padding-left: 0;">
 
         </div>
       </div>
@@ -46,10 +64,10 @@
             </div>
             <div class="right">
               <div class="top">
-                <div class="bTitle" v-if="!mobile" >{{item.title}}</div>
+                <div class="bTitle" v-if="!mobile">{{item.title}}</div>
                 <div class="bStitle">【{{detail.title}}】帮助【{{item.title}}】提供解决方案</div>
               </div>
-              <div class="bottom" @click="openPDF(item)"  v-if="!mobile">
+              <div class="bottom" @click="openPDF(item)" v-if="!mobile">
                 <div class="icon"/>
                 <div class="word">{{item.title}}.pdf</div>
               </div>
@@ -58,90 +76,100 @@
         </div>
       </div>
     </div>
+    <div class="mobileBottomArea" v-if="mobile">
+      <div class="mobileBottomBtn" @click="isShowToast=true">
+        <p>咨询了解</p>
+      </div>
+    </div>
+
     <ConnectUs :source="'开发屋详情'" :isShowToast="isShowToast" @close="isShowToast=false" :sourceId="tid"></ConnectUs>
     <KaifainFooter style="margin-top: 30px;" :data="footer"/>
-
   </div>
 </template>
 <script>
-import "quill/dist/quill.core.css";
-import "quill/dist/quill.snow.css";
-import ConnectUs from "@/components/common/connectUs";
-import DealSeoFooter from "@/components/kaifain/dealSeoFooter"
-import KaifainFooter from "@/components/SeoFooter"
+  import "quill/dist/quill.core.css";
+  import "quill/dist/quill.snow.css";
+  import ConnectUs from "@/components/common/connectUs";
+  import DealSeoFooter from "@/components/kaifain/dealSeoFooter"
+  import KaifainFooter from "@/components/SeoFooter"
 
-export default {
-  layout: "opacity_header",
-  components: { ConnectUs, KaifainFooter },
-  head() {
-    return {
-      title: '开发屋-提供定制化SaaS、PasS、IaaS等各大行业技术开发解决方案',
-      meta: [ {
-        'name': 'keywords',
-        'content': '定制化Saas、PasS、API、行业技术解决方案'
-      }, {
-        'name': 'descrption',
-        'content': '开发屋为企业提供行业内领先的技术解决方案，包括行业定制化SaaS、PasS、API数据接口服务以及技术组织，保障企业在降低人力开发成本的同时，得到优质的项目开发实力。'
-      }, {
-        'name': 'h1',
-        'content': '开发屋'
-      } ]
-    }
-  },
-  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()
-
-    return {
-      ...footer,
-      mobile: params.app.$deviceType.isMobile()
-    };
-  },
-  data() {
-    return {
-      detail: {},
-      tid: 0,
-      isShowToast: false
-    };
-  },
-  created() {
-    this.tid = this.$route.params.tid || 0;
-    this.getDetail();
-  },
-  mounted() {
-    window.οnbefοreunlοad = () => {
-      localStorage.removeItem("kaifainPreviewData");
-    };
-  },
-  computed: {
-    haveCase() {
-      const { successful_case = [] } = this.detail;
-      return successful_case.length > 0;
-    }
-  },
-  methods: {
-    getDetail() {
+  export default {
+    layout: "opacity_header",
+    components: { ConnectUs, KaifainFooter },
+    head() {
+      return {
+        title: '开发屋-提供定制化SaaS、PasS、IaaS等各大行业技术开发解决方案',
+        meta: [ {
+          'name': 'keywords',
+          'content': '定制化Saas、PasS、API、行业技术解决方案'
+        }, {
+          'name': 'descrption',
+          'content': '开发屋为企业提供行业内领先的技术解决方案，包括行业定制化SaaS、PasS、API数据接口服务以及技术组织，保障企业在降低人力开发成本的同时，得到优质的项目开发实力。'
+        }, {
+          'name': 'h1',
+          'content': '开发屋'
+        } ]
+      }
+    },
+    async asyncData({ ...params }) {
       try {
-        let data = localStorage.getItem("kaifainPreviewData");
-        data = JSON.parse(data);
-        this.detail = data;
-      } catch (e) {
-        this.$message.error("解析预览数据失败,请重新点击预览！");
+        params.store.commit("updateNoneCommonFooter", true)
+      } catch ( e ) {
+        console.log("updateNoneCommonFooter", e)
       }
+      let dealSeoFooterObj = new DealSeoFooter(params)
+      let footer = await dealSeoFooterObj.dealData()
+
+      return {
+        ...footer,
+        mobile: params.app.$deviceType.isMobile()
+      };
+    },
+    data() {
+      return {
+        detail: {},
+        tid: 0,
+        isShowToast: false,
+        jishuBaseUrl: ""
+      };
     },
-    openPDF(item) {
-      const { file } = item;
-      window.open(file, "pdf" + Math.random());
+
+    created() {
+      this.jishuBaseUrl = this.$store.state.domainConfig.jishuinUrl;
+    },
+    created() {
+      this.tid = this.$route.params.tid || 0;
+      this.getDetail();
+    },
+    mounted() {
+      window.οnbefοreunlοad = () => {
+        localStorage.removeItem("kaifainPreviewData");
+      };
+    },
+    computed: {
+      haveCase() {
+        const { successful_case = [] } = this.detail;
+        return successful_case.length > 0;
+      }
+    },
+    methods: {
+      getDetail() {
+        try {
+          let data = localStorage.getItem("kaifainPreviewData");
+          data = JSON.parse(data);
+          this.detail = data;
+        } catch ( e ) {
+          this.$message.error("解析预览数据失败,请重新点击预览！");
+        }
+      },
+      openPDF(item) {
+        const { file } = item;
+        window.open(file, "pdf" + Math.random());
+      }
     }
-  }
-};
+  };
 </script>
 
 <style scope lang="scss">
-@import "../../assets/css/kaifain/detail.scss";
+  @import "../../assets/css/kaifain/detail.scss";
 </style>