Merge branch 'dev' of https://cloud.wodcloud.com/git/apaas/apaas-v3-ui into dev

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

@@ -8,25 +8,251 @@
         <el-breadcrumb-item to="/technical_support/answer_center">
           问答中心
         </el-breadcrumb-item>
-        <el-breadcrumb-item>
-          问答列表
-        </el-breadcrumb-item>
+        <el-breadcrumb-item> 问答列表 </el-breadcrumb-item>
       </el-breadcrumb>
     </div>
 
     <div class="main_container">
-      <!--  -->
+      <div class="action_list apaas_button">
+        <span>
+          <el-button
+            :type="sortType === 0 ? 'warning' : 'defalut'"
+            @click="selectSortType(0)"
+          >
+            最热问题
+          </el-button>
+          <el-button
+            :type="sortType === 1 ? 'warning' : 'defalut'"
+            @click="selectSortType(1)"
+          >
+            最新问题
+          </el-button>
+        </span>
+        <span>
+          <el-input placeholder="请输入搜索内容"></el-input>
+        </span>
+        <span>
+          <el-button type="primary" @click="intoAnswerPage">
+            <img
+              :src="require('../../../assets/imgs/jszc_ic_fabu.png')"
+              style="margin-right: 5px; vertical-align: middle"
+            />
+            发帖提问
+          </el-button>
+        </span>
+      </div>
+      <ul class="answer_list">
+        <li
+          v-for="(item, index) in answerList"
+          :key="'answer_' + index"
+          @click="viewItem(item)"
+        >
+          <h3 class="answer_title" v-text="item.title"></h3>
+          <p class="answer_content" v-text="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>
+            <span>
+              <span class="num_answer" v-text="item.answer_num"></span>
+              <span class="num_view" v-text="item.view"></span>
+            </span>
+          </p>
+        </li>
+      </ul>
+
+      <list-pagination
+        class="answer_pagination"
+        :total="listTotal"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        @size-change="changePageSize"
+        @current-change="changeCurrentPage"
+      ></list-pagination>
     </div>
   </div>
 </template>
 
 <script>
+import ListPagination from "@/components/comments-pagination";
+
 export default {
+  components: {
+    ListPagination,
+  },
   data() {
-    return {};
+    return {
+      answerList: [],
+      sortType: 0, // 0：最新问题 1：最热问题
+      listTotal: 0,
+      pageSizes: [10, 20, 50],
+      pageSize: 10,
+      currentPage: 1,
+    };
+  },
+  created() {
+    this.getAnwerList();
+  },
+  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",
+        },
+        {
+          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;
+    },
+    selectSortType(type) {
+      this.sortType = type;
+      this.getAnwerList();
+    },
+    changePageSize(value) {
+      this.pageSize = value;
+      this.currentPage = 1;
+      this.getAnwerList();
+    },
+    changeCurrentPage(value) {
+      this.currentPage = value;
+      this.getAnwerList();
+    },
+    viewItem(item) {
+      this.$router.push(`/technical_support/answer_center/detail/${item.id}`);
+    },
+    intoAnswerPage() {
+      this.$router.push("/technical_support/answer_center/edit");
+    },
   },
-  created() {},
-  methods: {},
 };
 </script>
 
@@ -35,7 +261,7 @@ export default {
   padding: 12px 0 11px;
 }
 .main_container {
-  min-height: calc(100vh - 58px - 66px);
+  min-height: calc(100% - 66px);
   padding: 0 15px;
   background-color: #fff;
   border-radius: 10px;
@@ -45,4 +271,75 @@ export default {
   justify-content: flex-start;
   align-items: stretch;
 }
+.action_list {
+  padding: 15px 0;
+  border-bottom: 1px solid #f4f7fc;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.action_list .el-input {
+  width: 380px;
+}
+.answer_list {
+  flex-grow: 1;
+}
+.answer_list > li {
+  padding: 30px 10px 15px;
+  border-bottom: 1px solid #f4f7fc;
+  cursor: pointer;
+}
+.answer_list > li:hover {
+  background-color: #fafafa;
+}
+.answer_title {
+  font-size: 16px;
+  line-height: 25px;
+  color: #242c43;
+}
+.answer_content {
+  font-size: 14px;
+  line-height: 25px;
+  color: #8890a7;
+  margin-top: 5px;
+}
+.answer_info {
+  font-size: 14px;
+  line-height: 25px;
+  color: #58617a;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 15px;
+}
+.answer_info > span {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.answer_info > span:nth-child(1) > * {
+  margin-left: 10px;
+}
+.user_img {
+  height: 20px;
+  border-radius: 10px;
+}
+.user_text {
+  color: #a9aec0;
+}
+.answer_info > span:nth-child(2) > span {
+  padding-left: 25px;
+  background-repeat: no-repeat;
+  background-position: left center;
+  margin-right: 30px;
+}
+.num_answer {
+  background-image: url("../../../assets/imgs/jszc_ic_huida.png");
+}
+.num_view {
+  background-image: url("../../../assets/imgs/jszc_ic_liulan.png");
+}
+.answer_pagination {
+  margin: 25px 0 10px;
+}
 </style>