解决方案文章渲染

assets/public.css

@@ -112,6 +112,16 @@
 }
 .drop-default .drop-view .sub-item .text-box .remark{
   font-size: 0.9em;
+  color: gray;
+/*  多行文本*/
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-clamp: 3;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+/*  首行缩进*/
+  text-indent: 2em;
 }
 .blurImg{
   width: 100%;

components/header/menuDrops/menuDrop.vue

@@ -105,6 +105,8 @@ export default {
   },
   beforeMount() {
     this.loadMenus();
+    this.nowMenuKey = this.menus[0].typeKey;
+    this.loadMenuItems();
   },
   methods:{
     getLangText(str){

components/solutionList.vue

@@ -4,7 +4,7 @@
       <a class="solution"
          v-for="(item,i) in solutionList"
          :key="'pro-'+i"
-         @click="clickProductHandle(item)"
+         @click="clickSolutionHandle(item)"
       >
           <span class="imgBox">
              <img :src="'/public/'+item.image" :alt="item.name" class="img">
@@ -53,7 +53,7 @@ export default {
     getAbbrText(str) {
       return langMap.getAbbrText(this.lang, str);
     },
-    clickProductHandle(solution){
+    clickSolutionHandle(solution){
       console.log(solution);
       let url = ""
       if(solution.sourceType === "1"){

pages/solution/index.vue

@@ -22,7 +22,7 @@ import langMap from "~/map/langMap";
 import handle from "~/until/handle";
 import axios from "axios";
 
-const pageLimit = 10;
+const pageLimit = 5;
 export default {
   name: "solutionIndex",
   props:['uLang','pType','pKey','pSolution'],

pages/solution/item/_type.vue

@@ -0,0 +1,29 @@
+<template>
+  <item-index :p-type="type" />
+</template>
+
+<script>
+import ItemIndex from "~/pages/solution/item/index";
+export default {
+  name: "solutionItemType",
+  components: {ItemIndex},
+  data(){
+    return {
+      type:  '',
+      products: []
+    }
+  },
+  beforeMount() {
+    // console.log('动态页面执行');
+    this.type = this.$route.params.type;
+    if(!this.type){
+      return window.location.href = '/solution'
+    }
+    // console.log(this.type);
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

pages/solution/item/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="content">
+    <lucency-header :lang="lang" page-key="solution" />
+    <item-banner :title="productTypeText" :sub-title="productTypeSubText"></item-banner>
+    <div class="conBox big-title">
+      <span >
+        {{solutionDetail.title}}
+      </span>
+      <div class="hr"></div>
+      <span class="author">
+        {{solutionDetail.author}}
+      </span>
+    </div>
+    <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"/>
+  </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";
+
+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,
+    }
+  },
+  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)
+  },
+  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.rcode)
+      if(res.rcode === 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.rcode)
+      if(res.rcode === 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>

phpAPi/addNewsRead.php

@@ -0,0 +1,31 @@
+<?php
+include('../conn_mysqli.php');
+include('../phpMode/rcodeMap.php');
+
+$id = $_GET['id'];
+
+header('Content-Type:text/json;charset=utf-8;');
+$resObj = array(
+  'rcode'=>Rcode_OK,
+  'data'=>"",
+  'msg'=>'ok'
+);
+if(!isset($_GET['id'])){
+  $resObj['rcode'] = Rcode_NotParam;
+  $resObj['data'] = "";
+  $resObj['msg'] = "id is must set";
+  echo json_encode($resObj);
+  exit;
+}
+
+$conn = createConn();
+$sql = 'UPDATE mysql85931094_db.hfy_news SET hits = hits + 1 WHERE id = ? limit 1';
+// 创建stmt
+$stmt = mysqli_prepare($conn, $sql);
+mysqli_stmt_bind_param($stmt, "s",$id);
+mysqli_stmt_execute($stmt);
+$res = mysqli_stmt_get_result($stmt);
+$rs = mysqli_fetch_object($res);
+mysqli_close($conn);
+$resObj['data'] = $rs ;
+echo json_encode($resObj);

phpAPi/getSolution.php

@@ -0,0 +1,33 @@
+<?php
+include('../conn_mysqli.php');
+include('../phpMode/rcodeMap.php');
+
+$id = $_GET['id'];
+
+header('Content-Type:text/json;charset=utf-8;');
+$resObj = array(
+  'rcode'=>Rcode_OK,
+  'data'=>"",
+  'msg'=>'ok'
+);
+if(!isset($_GET['id'])){
+  $resObj['rcode'] = Rcode_NotParam;
+  $resObj['data'] = "";
+  $resObj['msg'] = "id is must set";
+  echo json_encode($resObj);
+  exit;
+}
+
+$conn = createConn();
+$sql = 'SELECT news.* FROM
+               mysql85931094_db.hfy_news as news
+           WHERE news.id = ?';
+// 创建stmt
+$stmt = mysqli_prepare($conn, $sql);
+mysqli_stmt_bind_param($stmt, "d",$id);
+mysqli_stmt_execute($stmt);
+$res = mysqli_stmt_get_result($stmt);
+$rs = mysqli_fetch_object($res);
+mysqli_close($conn);
+$resObj['data'] = $rs ;
+echo json_encode($resObj);

until/time.js

@@ -0,0 +1,66 @@
+/**
+ * 时间戳转时间字符串
+ * @param timestamp
+ * @returns {string}
+ */
+export function timestampToTime(timestamp) {
+  timestamp = timestamp.toString().length === 10 ? timestamp * 1000 : timestamp;
+  let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+  let Y = date.getFullYear() + '-';
+  let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
+  let D = date.getDate() + ' ';
+  let h = date.getHours() + ':';
+  let m = date.getMinutes() + ':';
+  let s = date.getSeconds();
+  return Y+M+D+h+m+s;
+}
+
+/**
+ * 时间字符串转时间戳
+ * @param timeStr
+ * @param isSecond
+ * @returns {number}
+ */
+export function timeStrToTimeStamp(timeStr,isSecond){
+  let date = new Date(timeStr);
+  if(isSecond){
+    return date.getTime()/1000;
+  }else{
+    return date.getTime();
+  }
+}
+
+/**
+ * 时间戳转时间字符串
+ * @param time 时间戳
+ * @param format 格式 yyyy-MM-dd HH:mm:ss
+ * @returns {*} 格式化后的时间字符串
+ */
+export function timeFormat(time, format) {
+  let t = new Date(time);
+  let tf = function(i) {
+    return (i < 10 ? '0' : '') + i
+  };
+  return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a) {
+    switch (a) {
+      case 'yyyy':
+        return tf(t.getFullYear());
+        break;
+      case 'MM':
+        return tf(t.getMonth() + 1);
+        break;
+      case 'mm':
+        return tf(t.getMinutes());
+        break;
+      case 'dd':
+        return tf(t.getDate());
+        break;
+      case 'HH':
+        return tf(t.getHours());
+        break;
+      case 'ss':
+        return tf(t.getSeconds());
+        break;
+    }
+  })
+}

until/unescapeHtml.js

@@ -8,3 +8,14 @@ export function unescape(html) {
     .replace(/nbsp;/g,"\u00a0")
     .replace(/&/g,"")
 }
+
+export function unescapeHtml(html) {
+  return html
+    .replace(html ? /&(?!#?\w+;)/g : /&/g, '')
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, "\"")
+    .replace(/&#39;/g, "\'")
+    .replace(/nbsp;/g,"\u00a0")
+    .replace(/&amp;/g,"")
+}