hfysite/pages/solution/info/index.vue

<template>
  <div class="content">
    <lucency-header :lang="lang" page-key="solution" :is-phone="isPhone"/>
    <item-banner :title="productTypeText" :sub-title="productTypeSubText"></item-banner>
    <big-title>
      <a :href="`/solution/${type.type_key}`">{{type.type_name}}</a>-
      {{solutionDetail.title}}
      <span class="author">
        {{solutionDetail.author}}
      </span>
    </big-title>
    <div class="conBox solution-view" v-html="solutionDetail.content">
    </div>
    <div class="conBox solution-info">
      <span class="viewer">
        {{solutionDetail.hits}}人浏览
      </span>
      <span class="time">
        发布日期: {{solutionDetail.date_time}}
      </span>
    </div>
    <default-footer :lang="lang"/>

    <site-bar></site-bar>
  </div>
</template>

<script>
import langMap from "~/map/langMap";
import defaultFooter from "~/components/footer/defaultFooter";
import {getTypeSubText, getTypeText} from "~/map/solutionMap";
import {handle} from "~/until/handle";
import {timestampToTime} from "~/until/time";
import {unescape, unescapeHtml} from "~/until/unescapeHtml";
import {isMediaView} from "@/until/mediaView";
import BigTitle from "~/components/public/bigTitle.vue";
import ItemBanner from "~/components/banner/itemBanner.vue";
import LucencyHeader from "~/components/header/lucencyHeader.vue";
import {apiMap} from "~/map/apiMap";
import {toNumber,isEmpty} from "../../../until/typeTool";
import axios from "axios";
import {baseUrl} from "../../../map/apiMap";

export default {
  name: "solutionItemIndex",
  props:['uLang', 'pType', 'pInfo', "pId"],
  components:{LucencyHeader, ItemBanner, BigTitle, defaultFooter},
  head() {
    let headInfo = {
      meta: []
    }
    if (this.title)
    {
      headInfo.title = this.title;
    }
    if (this.desc)
    {
      headInfo.meta.push({
        hid: "description",
        name: "description",
        content: this.desc,
      })
    }
    if(this.seo_key)
    {
      headInfo.meta.push({
        hid: "keywords",
        name: "keywords",
        content: this.seo_key,
      })
    }
    return headInfo
  },
  async asyncData(ctx){
    let err,res;
    let id = ctx.query.id;
    // id转数字
    let url = baseUrl + apiMap.newsInfo.path ;
    if(!toNumber(id)){ctx.redirect(`/solution`);}
    console.log(`开始获取文章 id:${id}`);
    url += `/${id}`;
    [err,res] = await handle(axios.get(url));
    if(err){
      // 加载失败,返回至产品页面
      console.log(`查询文章数据失败`);
      ctx.redirect(`/solution`);
      return {solutionId:id}
    }
    let result = res.data;
    if(result.code === 1){
      console.log(result.data);
      let desc = result.data.remark
      let enDesc = ctx.lang !== langMap.lang.cn ? result.data.remark_en || result.data.remark : result.data.remark
      let seoKey = result.data.seo_key

      return {
        desc: desc,
        enDesc: enDesc,
        seo_key: seoKey? seoKey : `合方圆,合方圆科技-解决方案`,
        title: `合方圆-${result.data.title}`,
        solutionId:id, solutionDetail:result.data}
    }else{
      console.log(`查询文章数据失败,服务器异常`);
      ctx.redirect(`/solution`);
    }
    return {solutionId:id}
  },
  data(){
    return {
      title: ``,
      desc: '',
      enDesc: '',
      seo_key: '',

      langType: langMap.lang,
      lang: this.uLang?this.uLang:langMap.lang.cn,
      solutionId: this.pId,
      solutionDetail: {},
      productTypeText: getTypeText(this.pType),
      productTypeSubText: getTypeSubText(this.pType),
      timer: null,
      isPhone: false
    }
  },
  computed: {
    type(){
      let info = isEmpty(this.solutionDetail)?this.pInfo:this.solutionDetail

      let types = this.$store.getters.allNewsTypes || this.types;
      let type = types.find(val => val.type_key === info.type_key);
      let resultType = {}
      if(this.lang !== langMap.lang.cn)
      {
        resultType.type_name = type.type_name_en;
        resultType.sub_text = type.sub_text_en;
      }
      if(!resultType.type_name) resultType.type_name = type.type_name;
      if(!resultType.sub_text) resultType.sub_text = type.sub_text;
      resultType.type_key = type.type_key;
      return resultType;
    }
  },
  beforeMount() {
    console.log(this.pInfo);
    if(isEmpty(this.pInfo) && isEmpty(this.solutionDetail)){
      console.log('无法获取文章数据');
      this.$router.push('/news');
    }
    if(isEmpty(this.solutionDetail)){
      this.solutionDetail = this.pInfo;
    }
    if(isEmpty(this.solutionId)){
      this.solutionId = this.pId;
    }

    this.solutionDetail.content = unescapeHtml(this.solutionDetail.content);
    this.solutionDetail.date_time  = timestampToTime(this.solutionDetail.date_time);
    this.timer = setTimeout(()=>{
      this.addRead();
    },1000*10)
  },
  mounted() {
    this.isPhone = isMediaView(0,1024);
  },
  beforeDestroy() {
    if (this.timer){
      clearTimeout(this.timer);
    }
  },
  methods:{
    getLangText(str) {
      return langMap.getText(this.lang, str);
    },
    getAbbrText(str) {
      return langMap.getAbbrText(this.lang, str);
    },
    async loadSolutionDetail(){
      let err,res;
      let url = apiMap.solutionInfo.path;
      [err,res] = await handle(this.$axios.$get(url));
      if(err) {
        console.log(err);
        return alert(err.message);
      }
      console.log(typeof res.code)
      if(res.code === 1){
        this.solutionDetail = res.data;
        // console.log(this.solutionDetail.detail)
        this.solutionDetail.content = unescapeHtml(this.solutionDetail.content);
        // console.log(this.solutionDetail.detail)
        this.solutionDetail.date_time  = timestampToTime(this.solutionDetail.date_time);
      }else{
        console.log('not match result');
        console.log(res);
        return alert('加载解决方案失败!!!');
      }
    },
    async addRead(){
      let err,res;
      let url = apiMap.addPageRead.path;
      url += `?id=${this.solutionId}`;
      [err,res] = await handle(this.$axios.$get(url));
      if(err) {
        console.log(err);
        return alert(err.message);
      }
      console.log(typeof res.code)
      if(res.code === 1){
        // this.solutionDetail.hits = res.data;
        console.log('page add hits ok')
      }else{
        console.log('not match result');
        console.log(res);
      }
    },

  }

}
</script>

<style scoped>
.big-title {
  margin: 5px auto;
  justify-content: left;
}
.solution-info{
/*  两边布局*/
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: #999999;
  cursor: default;
}
</style>