问答中心

src/pages/technical-support/answer-center/detail.vue

 <template>
   <div class="detail_box">
-    <p class="now_page_title">
-      技术支持 / 问答中心 / 问答列表 /
-      <span>详情</span>
-    </p>
+    <div class="apass_breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item to="/technical_support">
+          技术支持
+        </el-breadcrumb-item>
+        <el-breadcrumb-item to="/technical_support/answer_center">
+          问答中心
+        </el-breadcrumb-item>
+        <el-breadcrumb-item to="/technical_support/answer_center/list">
+          问答列表
+        </el-breadcrumb-item>
+        <el-breadcrumb-item> 详情 </el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
     <div class="detail_content">
       <div class="question" v-if="question.title">
         <p>{{ question.title }}</p>
@@ -49,7 +59,8 @@
                           <div slot="suffix" class="back_solt" @click="answer_question(item.id,item.user_id)">回复</div>
                       </el-input>
                     </div>
-                    <div class="back_fllow answer_box" v-for="(it,idx) in item.children" :key="'ans_child'+idx+5000" v-if="idx<=4||answer_child_index===index">
+                    <template v-for="(it,idx) in item.children">
+                      <div class="back_fllow answer_box" :key="'ans_child'+idx+5000" v-if="idx<=4||answer_child_index===index">
                         <div :style="idx == item.children.length-1&&item.children.length<=5?{border:'0',overflow:'hidden',}:{borderBottom:'2px solid #f4f7fc',overflow:'hidden',}" >
                           <div class="picture">
                               <img :src="it.user_picture_path" alt="" style="width:100%">
@@ -77,6 +88,7 @@
                           </div>
                         </div>
                       </div>
+                    </template>
                     <div class="under_count" v-if="item.children&&item.children.length>5&&answer_child_index!==index">
                       还有{{item.children.length-5}}条回复，<span @click="answer_child_index=index">点击查看</span> 
                     </div>
@@ -124,130 +136,7 @@ export default {
           'video'
       ],
       editstr:'',
-      answer: [
-        {
-          id: 4,
-          username: "普通neo",
-          created: "2020-10-21T15:30:13+08:00",
-          content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-          answered_user: "",
-          children: [
-            {
-              id: 5,
-              username: "普通neo",
-              created: "2020-10-21T15:34:20+08:00",
-              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-              answered_user: "我是超级管理员",
-              children: null,
-            },
-            {
-              id: 6,
-              username: "普通neo",
-              created: "2020-10-21T15:34:20+08:00",
-              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-              answered_user: "我是超级管理员",
-              children: null,
-            },
-            {
-              id: 7,
-              username: "普通neo",
-              created: "2020-10-21T15:34:20+08:00",
-              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-              answered_user: "我是超级管理员",
-              children: null,
-            },
-            {
-              id: 5,
-              username: "普通neo",
-              created: "2020-10-21T15:34:20+08:00",
-              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-              answered_user: "我是超级管理员",
-              children: null,
-            },
-            {
-              id: 6,
-              username: "普通neo",
-              created: "2020-10-21T15:34:20+08:00",
-              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-              answered_user: "我是超级管理员",
-              children: null,
-            },
-            {
-              id: 7,
-              username: "普通neo",
-              created: "2020-10-21T15:34:20+08:00",
-              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-              answered_user: "我是超级管理员",
-              children: null,
-            },
-          ],
-        },
-        {
-          id: 4,
-          username: "普通neo",
-          created: "2020-10-21T15:30:13+08:00",
-          content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-          answered_user: "",
-          children: [
-            {
-              id: 5,
-              username: "普通neo",
-              created: "2020-10-21T15:34:20+08:00",
-              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-              answered_user: "我是超级管理员",
-              children: null,
-            },
-            {
-              id: 6,
-              username: "普通neo",
-              created: "2020-10-21T15:34:20+08:00",
-              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-              answered_user: "我是超级管理员",
-              children: null,
-            },
-            {
-              id: 7,
-              username: "普通neo",
-              created: "2020-10-21T15:34:20+08:00",
-              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-              answered_user: "我是超级管理员",
-              children: null,
-            },
-            {
-              id: 5,
-              username: "普通neo",
-              created: "2020-10-21T15:34:20+08:00",
-              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-              answered_user: "我是超级管理员",
-              children: null,
-            },
-            {
-              id: 6,
-              username: "普通neo",
-              created: "2020-10-21T15:34:20+08:00",
-              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-              answered_user: "我是超级管理员",
-              children: null,
-            },
-            {
-              id: 7,
-              username: "普通neo",
-              created: "2020-10-21T15:34:20+08:00",
-              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-              answered_user: "我是超级管理员",
-              children: null,
-            },
-          ],
-        },
-        {
-          id: 4,
-          username: "普通neo",
-          created: "2020-10-21T15:30:13+08:00",
-          content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
-          answered_user: "",
-          children: null,
-        },
-      ],
+      answer: [],
     };
   },
   watch: {},
@@ -383,15 +272,8 @@ export default {
 </script>
 
 <style scoped>
-.detail_box {
-  /* min-height: calc(100% - 15px); */
-}
-.now_page_title {
-  margin: 13px 0;
-  color: #898d9e;
-}
-.now_page_title span {
-  color: #242c43;
+.apass_breadcrumb > .el-breadcrumb {
+  padding: 12px 0 11px;
 }
 .detail_content {
   width: 100%;
@@ -399,7 +281,7 @@ export default {
 }
 .question,
 .answer {
-  width: 856px;
+  width: 100%;
   background-color: #fff;
   box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.04);
   border-radius: 12px;

src/pages/technical-support/answer-center/edit.vue

 <template>
     <div class="detail_box">
-        <p class="now_page_title">
-        技术支持 / 问答中心 /
-            <span>发帖提问</span>
-        </p>
+        <div class="apass_breadcrumb">
+        <el-breadcrumb separator="/">
+            <el-breadcrumb-item to="/technical_support">
+            技术支持
+            </el-breadcrumb-item>
+            <el-breadcrumb-item to="/technical_support/answer_center">
+            问答中心
+            </el-breadcrumb-item>
+            <el-breadcrumb-item> 发帖提问 </el-breadcrumb-item>
+        </el-breadcrumb>
+        </div>
         <div class="detail_content">
             <div class="detail_title">
                 <el-input v-model="title" placeholder="请输入问题标题"></el-input>
@@ -93,15 +100,8 @@ export default {
 </script>
 
 <style scoped>
-.detail_box {
-  
-}
-.now_page_title {
-  margin: 13px 0;
-  color: #898d9e;
-}
-.now_page_title span {
-  color: #242c43;
+.apass_breadcrumb > .el-breadcrumb {
+  padding: 12px 0 11px;
 }
 .detail_content {
   width: 100%;

src/pages/technical-support/answer-center/list.vue

@@ -29,7 +29,11 @@
           </el-button>
         </span>
         <span>
-          <el-input placeholder="请输入搜索内容"></el-input>
+          <el-input
+            v-model="searchText"
+            placeholder="请输入搜索内容"
+            @input="searchInput"
+          ></el-input>
         </span>
         <span>
           <el-button type="primary" @click="intoAnswerPage">
@@ -48,13 +52,13 @@
           @click="viewItem(item)"
         >
           <h3 class="answer_title" v-text="item.title"></h3>
-          <p class="answer_content" v-text="item.content"></p>
+          <p class="answer_content" v-text="getContentText(item.content)"></p>
           <p class="answer_info">
             <span>
               <img class="user_img" :src="item.picture_path" />
               <span class="user_name" v-text="item.user_name"></span>
               <span class="user_text">发布于</span>
-              <span class="user_time" v-text="item.created"></span>
+              <span class="user_time" v-text="getTimeText(item.created)"></span>
             </span>
             <span>
               <span class="num_answer" v-text="item.answer_num"></span>
@@ -78,6 +82,7 @@
 </template>
 
 <script>
+import helper from "@/services/helper.js";
 import ListPagination from "@/components/comments-pagination";
 
 export default {
@@ -87,11 +92,13 @@ export default {
   data() {
     return {
       answerList: [],
-      sortType: 0, // 0：最新问题 1：最热问题
       listTotal: 0,
       pageSizes: [10, 20, 50],
       pageSize: 10,
       currentPage: 1,
+      sortType: 0, // 0：最新问题 1：最热问题
+      searchText: "",
+      inputTimer: null,
     };
   },
   created() {
@@ -99,144 +106,38 @@ export default {
   },
   methods: {
     getAnwerList() {
-      this.answerList = [
-        {
-          id: 1,
-          title: "平台的流程引擎怎么样", // 标题
-          content: "我们想用流程引擎，不会用，求大神指点", // 内容
-          created_by: "abc", // 发布人的userid
-          created: "2020-10-21T14:28:10+08:00", // 发布时间
-          updated: "2020-10-21T14:28:10+08:00", // 更新时间
-          view: 0, // 浏览量
-          answer_num: 2, // 回答数,
-          user_name: "普通neo", // 发布人
-          picture_path:
-            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
-        },
-        {
-          id: 2,
-          title: "平台的流程引擎怎么样6666", // 标题
-          content: "我们想用流程引擎，不会用，求大神指点", // 内容
-          created_by: "abc", // 发布人的userid
-          created: "2020-10-21T14:28:10+08:00", // 发布时间
-          updated: "2020-10-21T14:28:10+08:00", // 更新时间
-          view: 0, // 浏览量
-          answer_num: 2, // 回答数,
-          user_name: "普通neo", // 发布人
-          picture_path:
-            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
-        },
-        {
-          id: 3,
-          title: "平台的流程引擎怎么样23233333", // 标题
-          content: "我们想用流程引擎，不会用，求大神指点", // 内容
-          created_by: "abc", // 发布人的userid
-          created: "2020-10-21T14:28:10+08:00", // 发布时间
-          updated: "2020-10-21T14:28:10+08:00", // 更新时间
-          view: 0, // 浏览量
-          answer_num: 2, // 回答数,
-          user_name: "普通neo", // 发布人
-          picture_path:
-            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
-        },
-        {
-          id: 4,
-          title: "平台的流程引擎怎么样23233333", // 标题
-          content: "我们想用流程引擎，不会用，求大神指点", // 内容
-          created_by: "abc", // 发布人的userid
-          created: "2020-10-21T14:28:10+08:00", // 发布时间
-          updated: "2020-10-21T14:28:10+08:00", // 更新时间
-          view: 0, // 浏览量
-          answer_num: 2, // 回答数,
-          user_name: "普通neo", // 发布人
-          picture_path:
-            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
-        },
-        {
-          id: 5,
-          title: "平台的流程引擎怎么样23233333", // 标题
-          content: "我们想用流程引擎，不会用，求大神指点", // 内容
-          created_by: "abc", // 发布人的userid
-          created: "2020-10-21T14:28:10+08:00", // 发布时间
-          updated: "2020-10-21T14:28:10+08:00", // 更新时间
-          view: 0, // 浏览量
-          answer_num: 2, // 回答数,
-          user_name: "普通neo", // 发布人
-          picture_path:
-            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
-        },
-        {
-          id: 1,
-          title: "平台的流程引擎怎么样", // 标题
-          content: "我们想用流程引擎，不会用，求大神指点", // 内容
-          created_by: "abc", // 发布人的userid
-          created: "2020-10-21T14:28:10+08:00", // 发布时间
-          updated: "2020-10-21T14:28:10+08:00", // 更新时间
-          view: 0, // 浏览量
-          answer_num: 2, // 回答数,
-          user_name: "普通neo", // 发布人
-          picture_path:
-            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
-        },
-        {
-          id: 2,
-          title: "平台的流程引擎怎么样6666", // 标题
-          content: "我们想用流程引擎，不会用，求大神指点", // 内容
-          created_by: "abc", // 发布人的userid
-          created: "2020-10-21T14:28:10+08:00", // 发布时间
-          updated: "2020-10-21T14:28:10+08:00", // 更新时间
-          view: 0, // 浏览量
-          answer_num: 2, // 回答数,
-          user_name: "普通neo", // 发布人
-          picture_path:
-            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
-        },
-        {
-          id: 3,
-          title: "平台的流程引擎怎么样23233333", // 标题
-          content: "我们想用流程引擎，不会用，求大神指点", // 内容
-          created_by: "abc", // 发布人的userid
-          created: "2020-10-21T14:28:10+08:00", // 发布时间
-          updated: "2020-10-21T14:28:10+08:00", // 更新时间
-          view: 0, // 浏览量
-          answer_num: 2, // 回答数,
-          user_name: "普通neo", // 发布人
-          picture_path:
-            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
-        },
-        {
-          id: 4,
-          title: "平台的流程引擎怎么样23233333", // 标题
-          content: "我们想用流程引擎，不会用，求大神指点", // 内容
-          created_by: "abc", // 发布人的userid
-          created: "2020-10-21T14:28:10+08:00", // 发布时间
-          updated: "2020-10-21T14:28:10+08:00", // 更新时间
-          view: 0, // 浏览量
-          answer_num: 2, // 回答数,
-          user_name: "普通neo", // 发布人
-          picture_path:
-            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
+      this.$http
+        .get("/apaas/support/qa/question/list", {
+          params: {
+            style: 1,
+            order: this.sortType === 0 ? "" : "created",
+            search: this.searchText,
+            limit: this.pageSize,
+            page: this.currentPage,
           },
-        {
-          id: 5,
-          title: "平台的流程引擎怎么样23233333", // 标题
-          content: "我们想用流程引擎，不会用，求大神指点", // 内容
-          created_by: "abc", // 发布人的userid
-          created: "2020-10-21T14:28:10+08:00", // 发布时间
-          updated: "2020-10-21T14:28:10+08:00", // 更新时间
-          view: 0, // 浏览量
-          answer_num: 2, // 回答数,
-          user_name: "普通neo", // 发布人
-          picture_path:
-            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
-        },
-      ];
-      this.listTotal = 15;
+        })
+        .then(({ data }) => {
+          if (data.success) {
+            this.answerList = data.data || [];
+            this.listTotal = data.total;
+          }
+        });
     },
     selectSortType(type) {
       this.sortType = type;
       this.getAnwerList();
     },
+    searchInput() {
+      if (this.inputTimer) {
+        clearTimeout(this.inputTimer);
+      }
+
+      this.inputTimer = setTimeout(() => {
+        console.log(this.searchText);
+        this.currentPage = 1;
+        this.getAnwerList();
+      }, 200);
+    },
     changePageSize(value) {
       this.pageSize = value;
       this.currentPage = 1;
@@ -252,6 +153,18 @@ export default {
     intoAnswerPage() {
       this.$router.push("/technical_support/answer_center/edit");
     },
+    getTimeText(time) {
+      return helper.dateStringTransform(time || "");
+    },
+    getContentText(content) {
+      let text = content.replace(/<img[^>]+>/g, "【图片】");
+      
+      text = text.replace(/<iframe(([\s\S])*?)<\/iframe>/g, "【视频】");
+      text = text.replace(/<pre(([\s\S])*?)<\/pre>/g, "【代码】");
+      text = text.replace(/<\/?.+?>/g, "");
+
+      return text;
+    },
   },
 };
 </script>