proginn-frontend/pages/kaifain/case/_tid.vue

<template>
  <div :class="{kaifainPreviewCaseMobile: mobile, kaifainPreviewCase: !mobile}">
    <div class="kaifain-view">
      <Topnav :fixed="topnavFixed" @publish-click="isShowToast=true" />
    </div>
    <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">
          <h1 class="title">{{detail.title || ""}}</h1>
        </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"/>

    <ConnectUs
      :source="'开发屋案例'"
      :isShowToast="isShowToast"
      @close="isShowToast=false"
      :sourceId="tid"
    ></ConnectUs>

  </div>
</template>

<script lang="ts">
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import ConnectUs from "@/components/common/connectUsKaifain.vue";
  import KaifainFooter from "@/components/SeoFooter.vue"
  import {HashIDUtil, GenType} from "../../../plugins/genHashId"
  import Topnav from '@/kaifain_v2/components/Topnav.vue'
  import { genDocumentFooterData } from '@/kaifain_v2/helpers/seoHelper'

  export default {
    layout: "opacity_header",
    components: {ConnectUs, KaifainFooter, Topnav},
    head() {
      const { title = '' } = this.detail || {}
      return {
        title: (title ? `${title}-` : '') + '开发屋',
        meta: [ {
          'name': 'keywords',
          'content': '定制化Saas、PasS、API、行业技术解决方案'
        }, {
          'name': 'descrption',
          'content': '开发屋为企业提供行业内领先的技术解决方案，包括行业定制化SaaS、PasS、API数据接口服务以及技术组织，保障企业在降低人力开发成本的同时，得到优质的项目开发实力。'
        }, {
          'name': 'h1',
          'content': '开发屋'
        } ]
      }
    },
    async asyncData(ctx) {
      const params = ctx
      try {
        params.store.commit("updateNoneCommonFooter", true)
      } catch (e) {
        console.log("updateNoneCommonFooter", e)
      }
      let {tid: newTid} = params.app.context.route.params || {}
      let tid = newTid.replace(".html", "")

      if (process.server) {
        const {path, fullPath} = params.app.context && params.app.context.route || {}
        //将id都转到hashId
        if (tid && tid.length !== 12 && Number(tid) === Number(tid)) {
          let genHashId = new HashIDUtil()
          let nowId = genHashId.getHashID(GenType.TYPE_SERVICE_CASE, tid)
          let path1 = path.replace(newTid, nowId)
          let reditUrl = path.replace(path, path1)
          params.redirect(301, reditUrl)
          return
        }
      }

      if (!ctx.store.state.kaifain.inited) {
        await ctx.store.dispatch('parameters:load')
      }

      const { classes } = ctx.store.state.kaifain
      const footer = genDocumentFooterData({
        ctx,
        classes
      })

      let detail = {}
      let errInfo = ""
      let res = await params.$axios.post('/api/kaifawu/get_public_case?id='+ tid, {id: tid})
      if (Number(res.data.status) === 1) {
        let data = res.data.data
        if (!Array.isArray(data.successful_case)) {
          if (data.successful_case && typeof data.successful_case === "object") {
            data.successful_case = [ data.successful_case ]
          } else {
            data.successful_case = []
          }
        }
        detail = data || {}
      } else {
        errInfo = res.data && res.data.info || "服务异常"
      }
      return {
        tid,
        footer,
        mobile: params.app.$deviceType.isMobile(),
        detail,
        errInfo
      };
    },
    data() {
      return {
        isShowToast: false,
        topnavFixed: false
      }
    },
    created() {

    },
    mounted() {
      if (!this.detail || !this.detail.id) {
        this.$message.error(this.errInfo)
      }
      const fixHeight = Math.min(520, window.screen.availHeight)
      window.addEventListener('scroll', () => {
        this.topnavFixed = window.scrollY > fixHeight
      })
    },
    computed: {
      haveCase() {
        const {successful_case = []} = this.detail
        return successful_case.length > 0
      }
    },
    methods: {
      openPDF(item) {
        const {file} = item
        window.open(file, 'pdf' + Math.random())
        return false
      }
    }
  }
</script>

<style scope lang="scss">
  @import "../../../assets/css/kaifain/previewCase.scss";
</style>