hfysite/pages/solution/item/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>
      {{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 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 {unescapeHtml} from "~/until/unescapeHtml";
import {isMediaView} from "@/until/mediaView";

export default {
  name: "solutionItemIndex",
  props:['uLang','pType'],
  components:{defaultFooter},
  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() {
    const queryString = window.location.search;
    const params = new URLSearchParams(queryString);
    if(params&&params.get('id')){
      this.solutionId = params.get('id');
    }else{
      window.location.href = '/solution'
    }
    this.loadSolutionDetail();
    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 = `/api/getSolution.php?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 = 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 = `/api/addNewsRead.php?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>