proginn-frontend/pages/kaifain/preview.vue

<template>
  <div :class="{kaifainDetailMobile: mobile, kaifainDetail: !mobile}">
    <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" v-if="!mobile">
          <p class="word">方案介绍</p>
          <p class="line"></p>
        </div>
        <div class="introContent ql-editor" v-html="detail.detail" style="padding-left: 0;">

        </div>
      </div>

      <div class="caseListArea" v-if="haveCase">
        <div class="title">
          <p class="word">成功案例</p>
          <p class="line"></p>
        </div>
        <div class="list">

          <nuxt-link class="cell"
            v-for="item in detail.successful_case"
            :key="item.id"
            :to="`/kaifain/d/${item.hash_id}`"
            target="_blank"
            :title="item.name"
          >
            <div class="left">
              <img :src="item.logo" alt="">
            </div>
            <div class="right">
              <div class="top">
                <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="icon"/>
                <div class="word">{{item.title}}.pdf</div>
              </div>
            </div>
          </nuxt-link>
        </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"

  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,
        jishuBaseUrl: ""
      };
    },

    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";
</style>