proginn-frontend/kaifain_v2/pages/solution.vue

<template lang="pug">
  .view.solution-page
    link(href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet")
    Topnav(
      :fixed="true"
      :show-publish="false"
      :show-search="topnavFunctional"
      @publish-click="connectPopupVisible = true"
      )

    .summary(
      v-if="data"
      ref="summary"
      )
      .container.is-content.is-wide
        .columns
          .column.left
            .cover
              img(:src="data.images")
          .column
            .info
              h1.title {{data.title}}
              .extends
                .tag.is-choice(v-if="data.is_choice == 1") 优选
                .tag.is-link.is-light(v-if="data.type === 'gateway'") API
                .tag.is-success.is-light(v-if="data.type === 'gateway'") HTTPS
                span
                  a.link(:href="`${siteUrl}/company/${data.uid}`") 服务商: {{data.company_info && data.company_info.name}}

              //- desc
              .desc(v-if="data.type === 'gateway' && data.is_signing == 1 && data.source == 5" v-html="data.description")
              .desc(v-else) {{data.description}}

              //- skus
              .skus(v-if="skus")
                .item(
                  v-for="item in skus"
                  :class="{cur: curSkuId === item.id, disabled: item.overlimit}"
                  @click="changeSku(item)"
                  ) {{item.label}}
              .price(v-if="skus && curSkuId && skuMap[curSkuId]")
                span.symbol ￥
                span.value {{formatPrice(skuMap[curSkuId].price)}}
                span.explain(v-show="!!skuMap[curSkuId].quota")  / {{Number(skuMap[curSkuId].quota).toLocaleString()}} {{skuMap[curSkuId].unit}}

              .action
                .button.is-primary.is-rounded(
                  v-if="skus"
                  @click="purchase") {{curSkuId && skuMap[curSkuId] && skuMap[curSkuId].price == 0 ? '免费开通' : '立即购买'}}
                .button.is-primary.is-rounded(
                  v-else
                  @click="connectPopupVisible = true") 了解咨询

    .page-nav
      .container.is-content.is-wide
        .tabs
          ul
            li(
              v-for="(item, i) in navItems"
              :class="{'is-active': curNavIndex === i}"
              )
              a(@click="changeNavTab(item.id, i)") {{item.label}}

    .main
      .container.is-content.is-wide(v-if="data")
        .paper.columns
          .column.is-9
            .main-cont
              //- api doc
              ApiDoc#apidoc(
                v-if="apiDoc"
                :data="apiDoc"
                v-observe-visibility="visibilityChanged"
                )

              //- details: aliyun
              .details#details(
                v-if="data.source == 2"
                :class="detailsClass"
                v-observe-visibility="visibilityChanged"
                )
                .d-item.rich-text(v-html="data.detail")
              .details#details(
                v-else
                :class="detailsClass"
                v-html="data.detail"
                v-observe-visibility="visibilityChanged"
                )

              .case-list#case(v-if="data.successful_case")
                .caption.bordered 成功案例
                CaseCell(
                  :solution-title="data.title"
                  :data="data.successful_case"
                  )

          .column.is-3
            .side-cont
              .rcmd-list(v-if="providerSolutionList && providerSolutionList.length")
                .caption 同服务商产品
                SideSolutionCell.item(
                  v-for="item in providerSolutionList"
                  :key="item.hash_id"
                  :data="item"
                  )
              .rcmd-list(v-if="relatedSolutionList && relatedSolutionList.length")
                .caption 相似方案推荐
                SideSolutionCell.item(
                  v-for="item in relatedSolutionList"
                  :key="item.hash_id"
                  :data="item"
                  )

    KaifainFooter(:data="footer")
    ConnectUs(
      source="开发屋详情"
      :isShowToast="connectPopupVisible"
      @close="connectPopupVisible = false"
      :sourceId="this.data && this.data.id"
      )
</template>

<script lang="ts">
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import Vue from 'vue'
import Topnav from '../components/Topnav.vue'
import { getSolution, listProviderSolution, listRelatedSolution } from '../apis/solution'
import { genDocumentFooterData } from '../helpers/seoHelper'
import SideSolutionCell from '../components/SideSolutionCell.vue'
import CaseCell from '../components/CaseCell.vue'
import ApiDoc from '../components/ApiDoc.vue'
import ConnectUs from '@/components/common/connectUsKaifain.vue'
import KaifainFooter from '@/components/SeoFooter.vue'
import { formatPrice } from '../utils/misc'
import { parseApiDocFile } from '../helpers/apiDocHelper'
import { ObserveVisibility } from 'vue-observe-visibility'
import { MAIN_ENDPOINT, DASHBOARD_SCENE_CODE } from '../constant'

Vue.directive('observe-visibility', ObserveVisibility)

export default Vue.extend({
  name: 'Solution',
  components: {
    Topnav,
    SideSolutionCell,
    CaseCell,
    ApiDoc,
    ConnectUs,
    KaifainFooter
  },

  layout: 'kaifain_v2',

  head() {
    // @ts-ignore
    const { title = '' } = this.data || {}

    return {
      title: title ? `${title}介绍，功能，开发解决方案-开发屋` : '开发屋-开发解决方案',
      meta: [
        {
          name: 'keywords',
          content: title,
        },
        {
          name: 'description',
          content: `${title}详细介绍，包括不限于功能、接口、企业开发着对接和布局${title}的方法和详细的开发文档说明。`,
        },
        {
          name: 'h1',
          content: `${title}`,
        }
      ]
    }
  },

  data() {
    return {
      topnavFunctional: false,
      connectPopupVisible: false,
      data: {},
      curSkuId: null,
      curNavIndex: 0,
      primaryBtnOffsetY: 300,
      cacheNavElMap: {}
    }
  },

  computed: {
    siteUrl(): string {
      return this.$store.state.domainConfig.siteUrl
    },

    skus(): any[] | null {
      // @ts-ignore
      return this.data && this.data.is_signing == 1 && this.data.skus && this.data.skus.length ? this.data.skus.filter(item => !item.label.startsWith('test')).sort((a, b) => a.price - b.price) : null
    },

    skuMap() {
      // @ts-ignore
      return this.skus && this.skus.reduce((map, item) => {
        map[item.id] = item
        return map
      }, {}) || {}
    },

    detailsClass() {
      // @ts-ignore
      const source = Number(this.data && this.data.source) || 0

      switch (source) {
        // aliyun
        case 2:
          return 'r-product-detail'

        // tencent
        case 3:
          return 'mp__productguide-bd'

        // huawei
        case 4:
          return 'detail-description-content product-description'

        default:
          return 'ql-editor'
      }
    }
  },

  async asyncData(ctx: any) {
    const headers = ctx.req && {
      cookie: ctx.req.headers.cookie
    }
    const data = await getSolution(ctx.params.id, { headers })

    if (!data) {
      return
    }

    let relatedSolutionList!: any[]
    let apiDoc!: any

    if (data.tags_ids && data.tags_ids !== '[]') {
      relatedSolutionList = await listRelatedSolution({
        tags_ids: data.tags_ids,
        hash_id: data.hash_id,
        size: 5
      }, { headers })
    }

    const providerSolutionList = await listProviderSolution({
      uid: data.uid,
      hash_id: data.hash_id,
      page: 1,
      size: relatedSolutionList && relatedSolutionList.length ? 3 : 5
    }, { headers })

    // parse api doc
    if (data.doc_path) {
      apiDoc = await parseApiDocFile(data.doc_path)
    }

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

    const { classes } = ctx.store.state.kaifain

    const footer = genDocumentFooterData({
      ctx,
      classes
    })

    const navItems = [{
      id: 'details',
      label: '产品介绍'
    }]

    if (apiDoc) {
      navItems.unshift({
        id: 'apidoc',
        label: 'API文档'
      })
    }

    if (data.successful_case) {
      navItems.push({
        id: 'case',
        label: '成功案例'
      })
    }

    return {
      data,
      providerSolutionList,
      relatedSolutionList,
      apiDoc,
      footer,
      navItems
    }
  },

  methods: {
    formatPrice,

    changeNavTab(id, idx) {
      // @ts-ignore
      this.curNavIndex = idx
      // @ts-ignore
      let el = this.cacheNavElMap[id]

      if (!el) {
        el = document.querySelector(`#${id}`)
        // @ts-ignore
        this.cacheNavElMap[id] = el
      }

      if (el) {
        el.scrollIntoView({
          behavior: 'smooth'
        })
      }
    },

    changeSku(sku) {
      if (sku.overlimit) {
        return
      }

      // @ts-ignore
      this.curSkuId = sku.id
    },

    getIndexByNavId(id: string, previous: boolean) {
      // @ts-ignore
      for (let i = 0, len = this.navItems.length; i < len; i++) {
        // @ts-ignore
        if (this.navItems[i].id === id) {
          return previous ? Math.min(i - 1, 0) : i
        }
      }

      return null
    },

    visibilityChanged(isVisible: boolean, { target }) {
      // @ts-ignore
      const idx = this.getIndexByNavId(target.id, !isVisible)

      if (idx != null) {
        // @ts-ignore
        this.curNavIndex = idx
      }
    },

    purchase() {
      // @ts-ignore
      window.location.href = `${MAIN_ENDPOINT}/pay?product_type=14&product_id=${this.curSkuId}&number=1&next=${encodeURIComponent('/kaifain/dashboard?scene=' + DASHBOARD_SCENE_CODE.PAID)}`
    },

    onScroll() {
      // @ts-ignore
      this.topnavFunctional = window.scrollY > (this.primaryBtnOffsetY || 300)
    }
  },

  mounted() {
    // @ts-ignore
    window.addEventListener('scroll', this.onScroll)

    this.$nextTick(() => {
      const el = this.$refs['summary']

      if (el) {
        // @ts-ignore
        const rect = el.getBoundingClientRect()
        // @ts-ignore
        this.primaryBtnOffsetY = rect.height - 80
      }

      // @ts-ignore
      this.onScroll()
    })
  },

  destroyed() {
    // @ts-ignore
    window.removeEventListener('scroll', this.onScroll)
  },

  created() {
    // @ts-ignore
    if (this.skus) {
      // @ts-ignore
      const availableSku = this.skus.find((item) => !item.overlimit)

      if (availableSku) {
        // @ts-ignore
        this.curSkuId = availableSku.id
      }
    }
  }
})
</script>

<style lang="scss">
@import '../assets/styles/vars';
@import '../assets/styles/ext_aliyun_market';
@import '../assets/styles/ext_tencent_market';
@import '../assets/styles/ext_huawei_market';

.solution-page {
  .summary {
    color: $ink;
    padding: 128px 0 80px;

    .column.left {
      flex: none;
    }

    .cover {
      width: 152px;
      height: 152px;
      border-radius: 32px;
      margin-right: 40px;
      overflow: hidden;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      &::after {
        content: '';
        width: 100%;
        height: 100%;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 32px;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    .title {
      margin-bottom: 1rem;
      line-height: 1.4;
      margin-top: -3px;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 2;
    }

    .extends {
      font-size: 0.875rem;
      margin-bottom: 1rem;
      line-height: 1.4;

      .tag {
        margin-right: 0.5rem;

        + span {
          margin-left: 1.25rem;
        }
      }

      a.link {
        color: #888;
      }
    }

    .desc {
      font-size: 0.875rem;
      margin-bottom: 1.5rem;
      line-height: 1.4;
    }

    .price {
      font-weight: 600;
      margin-bottom: 1.75rem;

      .symbol {
        font-size: 1.25rem;
        margin-right: 3px;
      }
      .value {
        font-size: 1.625rem;
      }
      .explain {
        font-weight: 400;
        font-size: 0.875rem;
        margin: 0 0 1px 2px;
        opacity: 0.54;
      }
    }

    .action {
      .button {
        font-size: 0.875rem;
        font-weight: 500;
        min-width: 106px;
        height: 2.75em;
        letter-spacing: 0.01em;
      }
    }
  }

  .skus {
    margin: 0 -0.5rem 1rem 0;

    .item {
      color: #666;
      font-size: 0.8125rem;
      padding: 8px 12px;
      border: 1px solid #dfdfdf;
      border-radius: 2px;
      display: inline-block;
      margin: 0 1em 0.75em 0;
      min-width: 64px;
      text-align: center;
      cursor: pointer;

      &.cur {
        color: $primary;
        border-color: $primary;
      }

      &.disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
    }
  }

  .page-nav {
    background: #fff;
    height: 54px;
    border: 1px solid #eaeaea;
    border-left: 0;
    border-right: 0;
    position: sticky;
    top: 52px;
    z-index: 9;

    .tabs {
      font-weight: 500;

      ul, a {
        border: 0;
      }

      a {
        color: $ink !important;
        height: 54px;
      }

      li.is-active {
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 24%;
          width: 52%;
          height: 3px;
          background: $primary;
          border-radius: 4px;
        }
      }
    }
  }

  .paper {
    padding: 1.5rem 0 3rem;
  }

  .details {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .main-cont {
    .caption {
      font-size: 1.25rem;
      font-weight: 500;
      margin: 2rem 0.5rem 1rem;

      &.bordered {
        border-top: 1px solid #eaeaea;
        padding-top: 2rem;
      }
    }
  }

  .side-cont {
    color: $ink;

    .caption {
      font-weight: 500;
      line-height: 1;
      padding: 0.75rem 0;

      &::before {
        content: '';
        background: $primary;
        width: 3px;
        height: 16px;
        border-radius: 4px;
        display: inline-block;
        margin-right: 10px;
        vertical-align: bottom;
      }
    }

    .rcmd-list {
      margin-bottom: 3rem;
    }
  }

  @media screen and (min-width: 768px) {
    .tabs li {
      margin-right: 2em;
    }

    .main-cont {
      padding-right: 1.5rem;
    }

    .side-cont {
      padding-left: 1rem;
    }

    .summary {
      .cover {
        margin-left: 1rem;
      }
      .title {
        margin-right: 2rem;
      }
      .info {
        margin-right: 4rem;
      }
    }
  }

  @media screen and (max-width: 768px) {
    .summary {
      padding: 88px 0 64px;

      .cover {
        width: 112px;
        height: 112px;
        border-radius: 28px;
      }
    }
  }
}
</style>