Skip to content

A
apaas-ui
Commit d3015e7d authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

问答列表

parent 0d9cdaef
Hide whitespace changes
Inline Side-by-side
Showing with 305 additions and 8 deletions
src/pages/technical-support/answer-center/list.vue
View file @ d3015e7d
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment