hfysite/pages/news/info/index.vue

<template>
  <div class="content">
    <lucency-header :lang="lang" page-key="news" :is-phone="isPhone" />
    <item-banner :title="'合方圆'" :sub-title="solutionDetail.title"></item-banner>
    <big-title>
      {{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 wechat-src="/image/wechat.jpg"></site-bar>
  </div>
</template>

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

export default {
  name: "newsItemIndex",
  props:['uLang','pType', 'pInfo', "pId"],
  components:{ItemBanner, LucencyHeader, BigTitle, defaultFooter},
  async asyncData(ctx){
    let err,res;
    let id = ctx.query.id;
    // id转数字
    let url = baseUrl + apiMap.newsInfo.path ;
    if(!toNumber(id)){ctx.redirect(`/news`);}
    console.log(`开始获取文章 id:${id}`);
    url += `/${id}`;
    [err,res] = await handle(axios.get(url));
    if(err){
      // 加载失败,返回至产品页面
      console.log(`查询数据失败`);
      ctx.redirect(`/news`);
      return {solutionId:id}
    }
    let result = res.data;
    if(result.code === 1){
      console.log(result.data);
      return {solutionId:id, solutionDetail:result.data}
    }else{
      console.log(`查询数据失败,服务器异常`);
      ctx.redirect(`/news`);
    }
    return {solutionId:id}
  },
  data(){
    return {
      langType: langMap.lang,
      lang: this.uLang?this.uLang:langMap.lang.cn,
      solutionId: null,
      solutionDetail: {},
      productTypeText: getTypeText(this.pType),
      productTypeSubText: getTypeSubText(this.pType),
      timer: null,
      isPhone: false,
    }
  },
  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.$root.$on('changeLang',this.switchLang)
    this.isPhone = isMediaView(0,1024);
    // console.log(this.isPhone);
    // console.log(`this.isPhone:${this.isPhone}`);
  },
  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 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>