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

<template>
  <div :class="{kaifainDetailMobile: mobile, kaifainDetail: !mobile}">
    <div class="kaifain-view">
      <Topnav :fixed="topnavFixed" @publish-click="isShowToast=true" />
    </div>
    <div class="topArea" :style="{backgroundImage: 'url(' + detail.bg_image + ')' }">
      <div class="topContent" :class="{noneMobileAPP: true}">
        <h1 class="title">{{detail.title}}</h1>
        <div class="desc">{{detail.description}}</div>
        <div class="btn" @click="isShowToast=true" v-if="!mobile">
          <p>咨询了解</p>
        </div>
        <div class="companyInfo" @click="jumpToCompany">
          <div class="left">
            <div class="userImage" :class="calcUserVip">
              <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="amountArea">
        <div class="left">
          <!--todo 观看数据，收藏数据 -->
          <div class="watchNum">{{detail.pv || 0}}</div>
          <div
            class="collectNum"
            :class="{isOk: detail.has_collected}"
            @click="collectKaifainHandler"
          >{{detail.collectCount || 0}}</div>
        </div>
        <div class="right" v-if="detail.is_author">
          <div
            class="setTop"
            :class="{isOk: Number(detail.is_top) !== 0}"
            @click="setToTopHandler"
          >{{Number(detail.is_top) !== 0 ? "已置顶" : "列表置顶"}}</div>
        </div>
      </div>
      <!-- <div class="bannerSelect">
        <div class="cell selected">方案首页</div>
        <a
          class="cell"
          :href="jishuinUrl + '/c/' + detail.hash_id"
        >文章({{detail.jishuin && detail.jishuin.topics_count || 0}})</a>
        <a
          class="cell"
          :href="jishuinUrl + '/c/' + detail.hash_id + '?type=video'"
        >视频({{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="`/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.stop="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="mobileLeftChat"
        v-if="calcUserVip.vip1 || calcUserVip.vip3"
        @click="onChatForKaifain"
      >
        <div class="icon chat"></div>
        <div class="word">和TA聊一聊</div>
      </div>
      <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" />
    <ChangeBgImage
      :pId="detail.id"
      :isShowToast="isShowToastChange"
      @close="isShowToastChange=false"
      @ok="getDetail"
    ></ChangeBgImage>
  </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 ChangeBgImage from "@/components/kaifain/ChangeBgImage.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, ChangeBgImage, Topnav },
  head() {
    const { title = '' } = this.detail || {}
    let docTitle = title ? `${title}介绍，功能，开发解决方案-开发屋` : '开发屋-开发解决方案'

    if (this.$deviceType.app) {
      docTitle = title
    }
    return {
      title: docTitle,
      meta: [
        {
          name: "keywords",
          content: title,
        },
        {
          name: "descrption",
          content: `${title}详细介绍，包括不限于功能、接口、企业开发着对接和布局${title}的方法和详细的开发文档说明。`,
        },
        {
          name: "h1",
          content: `${title}`,
        },
      ],
      bodyAttrs: {
        class: 'non-rem'
      }
    };
  },
  async asyncData(ctx) {
    const params = ctx
    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_PROVIDER, tid);
        let path1 = path.replace(newTid, nowId);
        let reditUrl = path.replace(path, path1);
        params.redirect(301, reditUrl);
        return;
      }
    }

    let errInfo = "";
    let detail = {};
    let res = await params.$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 = [];
        }
      }
      tid = data.id;
      detail = data || {};
    } else {
      errInfo = res.data.info;
    }

    try {
      params.store.commit("updateNoneCommonFooter", true);
    } catch (e) {
      console.log("updateNoneCommonFooter", e);
    }

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

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

    let isSelf = false;
    try {
      let uid = params.store.state.userinfo.uid;
      isSelf = Number(uid) === Number(detail.company_info.uid);
    } catch (e) {
      console.log("kaifaindetaile", e);
    }

    return {
      isSelf,
      tid,
      detail,
      errInfo,
      mobile: params.app.$deviceType.isMobile(),
      mobileApp: params.app.$deviceType.app,
      footer
    };
  },
  data() {
    return {
      tid: 0,
      isShowToast: false,
      isShowToastChange: false, //是否展示更换image
      jishuinUrl: "",
      kaifainUrl: "",
      siteUrl: "",
      topnavFixed: false,
      mobile: false
    };
  },
  created() {
    const { kaifainUrl, jishuinUrl, siteUrl } = this.$store.state.domainConfig;
    this.kaifainUrl = kaifainUrl;
    this.jishuinUrl = jishuinUrl;
    this.siteUrl = siteUrl;
  },
  mounted() {
    if (!this.detail || !this.detail.id) {
      this.$message.error(this.errInfo);
    }
    window.addEventListener('scroll', () => {
      this.topnavFixed = window.scrollY > 520
    })
    // this.getDetail()
  },
  computed: {
    haveCase() {
      const { successful_case = [] } = this.detail;
      return successful_case.length > 0;
    },
    calcUserVip() {
      const { is_vip, vip_type_id } = this.detail || {};
      if (is_vip) {
        return { ["vip" + vip_type_id]: is_vip };
      }
      return {};
    },
  },
  methods: {
    getDetail() {
      this.$axios
        .$post("/api/kaifawu/get_provider?id=" + this.tid, { id: this.tid })
        .then((res) => {
          console.log("refresh", res);
          if (Number(res.status) === 1) {
            let data = res.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 = [];
              }
            }
            console.log("update");
            this.detail = data || {};
          }
        });
    },
    openPDF(item) {
      const { file } = item;
      window.open(file, "pdf" + Math.random());
      return false;
    },
    jumpToCompany() {
      const { uid } = this.detail || {};
      if (this.$deviceType.app) {
        location.href = `proginn://resume?uid=${uid}&company=1`;
      } else {
        location.href = this.siteUrl + `/company/${uid}`;
      }
    },
    /** 与企业方聊天 **/
    onChatForKaifain() {
      const { id: kafainId, uid, title } = this.detail;
      if (!this.$deviceType.app) {
        this.$toast("请前往程序员客栈APP操作");
        return;
      }
      location.href = `proginn://recruit/chat?uid=${uid}&title=${encodeURIComponent(
        title
      )}&url=${encodeURIComponent(location.href)}`;
    },
    /** 置顶 **/
    setToTopHandler() {
      const { is_author, is_top, is_vip, vip_type_id, id } = this.detail;
      if (!is_author) {
        return;
      }
      // if (Number(is_top)) {
      //   this.$message.info("您已置顶改方案，无需再次设置！")
      //   return
      // }
      //是企业会员
      if (is_vip && (vip_type_id === 1 || vip_type_id === 3)) {
        this.$axios.post("/api/kaifawu/top", { id }).then((res) => {
          if (Number(res.data.status) === 1) {
            this.getDetail();
            this.$message.success(res.data.data);
          }
        });
      } else {
        this.openToast();
      }
    },
    /** 收藏/取消收藏 **/
    collectKaifainHandler() {
      const { id } = this.detail;
      this.$axios
        .post("/api/collection_center/create", {
          item_id: id,
          type: 2,
        })
        .then((res) => {
          //todo 收藏的变量还没接
          if (Number(res.data.status) === 1) {
            this.detail.has_collected = !this.detail.has_collected;
            let msg = this.detail.has_collected ? "收藏成功" : "取消收藏成功";
            this.detail.collectCount =
              Number(this.detail.collectCount) +
              (this.detail.has_collected ? 1 : -1);
            this.$message.success(msg);
          }
        });
    },
    openToast() {
      const h = this.$createElement;
      this.$msgbox({
        title: "开通会员",
        message: h("p", null, [
          h("span", null, "开通企业会员，即可置顶解决方案 "),
        ]),
        showCancelButton: true,
        confirmButtonText: "立即开通",
        cancelButtonText: "不了谢谢",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            if (this.$deviceType.isMobile()) {
              location.href = "/type/vip?activeName=enterprise&current=1";
            } else {
              location.href = "/type/vip/enterprise";
            }
          } else {
            done();
          }
        },
      }).then((action) => {
        this.$message({
          type: "info",
          message: "action: " + action,
        });
      });
    },
  },
};
</script>

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


<style lang="scss">
@media screen and (max-width: 750px) {
  .el-message-box {
    width: 95%;
  }
}
</style>