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="`${kaifainUrl}/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_kf_tmp",
  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();
    let domainConfig = params.store.state.domainConfig;
    return {
      ...domainConfig,
      ...footer,
      mobile: params.app.$deviceType.isMobile(),
    };
  },
  data() {
    return {
      detail: {},
      tid: 0,
      isShowToast: false,
      jishuBaseUrl: "",
      kaifainUrl: ""
    };
  },

  created() {
    const {kaifainUrl, jishuBaseUrl} = this.$store.state.domainConfig;
    this.kaifainUrl = kaifainUrl
    this.jishuBaseUrl = jishuBaseUrl
  },
  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>