proginn-frontend/pages/kaifain/detail/_tid/index.vue

<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>
        </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.detail">

       </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/case/${item.id}.html`"
            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>
    <ConnectUs :source="'开发屋详情'" :isShowToast="isShowToast" @close="isShowToast=false" :sourceId="tid"></ConnectUs>
  </div>
</template>

<script>
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import ConnectUs from "@/components/common/connectUs"
  export default {
    layout: "opacity_header",
    components: {ConnectUs},
    head() {
      return {
        title: `${this.detail.title}介绍，功能，开发解决方案-开发屋`,
        meta: [ {
          'name': 'keywords',
          'content': `${this.detail.title}`
        }, {
          'name': 'descrption',
          'content': `${this.detail.title}详细介绍，包括不限于功能、接口、企业开发着对接和布局${this.detail.title}的方法和详细的开发文档说明。`
        }, {
          'name': 'h1',
          'content': `${this.detail.title}`
        } ]
      }
    },
    async asyncData({ app, $axios}) {
      let {tid} = app.context.route.params || {}
      tid = tid.replace(".html", "")
      let detail = {}
      let res = await $axios.post('/api/kaifawu/get_provider?id='+tid, {id: tid})
      if (Number(res.data.status) === 1) {
        let data = res.data.data
        if (!data) {
          return
        }
        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 || {}
      }
      return {
        tid,
        detail,
        mobile: app.$deviceType.isMobile(),
      }
    },
    data() {
      return {
        detail: {
        },
        tid: 0,
        isShowToast: false
      }
    },
    created() {
      this.getDetail()
    },
    mounted() {

    },
    computed: {
      haveCase() {
        const {successful_case = []} = this.detail
        return successful_case.length > 0
      }
    },
    methods: {
      getDetail() {

      },
      openPDF(item) {
        const {file} = item
        window.open(file, 'pdf' + Math.random())
      }
    }
  }
</script>

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