proginn-frontend/pages/kaifain/previewCase.vue

<template>
  <div class="kaifainPreviewCase" :class="{isMobile: mobile}">
    <div class="topArea">
      <div class="bannerBg">
        <img src="~@/assets/img/kaifain/detail/banner@2x.png" alt />
      </div>
      <div class="topContent">
        <div class="left">
          <div class="title">{{detail.title}}</div>
          <!--<div class="desc">{{detail.description}}</div>-->
        </div>
      </div>
    </div>

    <div class="contentArea">
      <div class="introArea">
        <!--<div class="title">-->
        <!--<p class="word">案例介绍</p>-->
        <!--<p class="line"></p>-->
        <!--</div>-->
        <div class="introContent ql-editor" v-html="detail.description"></div>
      </div>
    </div>
    <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,
    };
  },
  created() {
    this.tid = this.$route.params.tid || 0;
    this.getDetail();
  },
  mounted() {
    window.οnbefοreunlοad = () => {
      localStorage.removeItem("kaifainPreviewCaseData");
    };
  },
  computed: {
    haveCase() {
      const { successful_case = [] } = this.detail;
      return successful_case.length > 0;
    },
  },
  methods: {
    getDetail() {
      try {
        let data = localStorage.getItem("kaifainPreviewCaseData");
        data = JSON.parse(data);
        this.detail = data;
        console.log("解析预览数据", this.detail);
      } 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/previewCase.scss";
</style>