.

src/router.js

@@ -61,6 +61,11 @@ const router = new Router({
                             path: 'qa',
                             name: 'qa',
                             component: () => import(/* webpackChunkName: "qa" */ '@/views/interact/qa.vue')
+                        },
+                        {
+                            path: 'wenku',
+                            name: 'wenku',
+                            component: () => import(/* webpackChunkName: "wenku" */ '@/views/interact/wenku.vue')
                         }
                     ]
                 },

src/views/index/interact.vue

@@ -12,6 +12,7 @@
                 <div class="tab-item" :class="{ active: tab === 0 }" @click="changeTab(0)">官答</div>
                 <div class="tab-item" :class="{ active: tab === 1 }" @click="changeTab(1)">话题</div>
                 <div class="tab-item" :class="{ active: tab === 2 }" @click="changeTab(2)">提问</div>
+                <div class="tab-item" :class="{ active: tab === 3 }" @click="changeTab(3)">文库</div>
             </div>
         </nav-bar>
         <div class="top-banner-wrapper">
@@ -19,6 +20,7 @@
                 <img class="top-banner" src="../../assets/interact_banner_0.png" v-if="tab === 0" key="0" />
                 <img class="top-banner" src="../../assets/interact_banner_1.png" v-if="tab === 1" key="1" />
                 <img class="top-banner" src="../../assets/interact_banner_2.png" v-if="tab === 2" key="2" />
+                <img class="top-banner" src="../../assets/hudong_img_top_wenku.png" v-if="tab === 3" key="3" />
             </transition>
         </div>
         <router-view></router-view>
@@ -119,6 +121,11 @@ export default {
                         name: 'qa'
                     });
                     break;
+                case 3:
+                    this.$router.replace({
+                        name: 'wenku'
+                    });
+                    break;
             }
         },
         matchRoute() {

src/views/interact/wenku.vue

@@ -0,0 +1,120 @@
+<template>
+    <div>
+        <news-item v-for="item in list" :key="item.id" :content="item"></news-item>
+    </div>
+</template>
+<script>
+import newsItem from '../../components/newsItem';
+export default {
+    components: { newsItem },
+    data() {
+        return {
+            showCall: false,
+            page: 0,
+            last: false,
+            loading: false,
+            list: []
+        };
+    },
+    created() {
+        this.getData();
+        this.$bus.on('reachBottom', this.loadmore);
+    },
+    beforeDestroy() {
+        this.$bus.off('reachBottom', this.loadmore);
+    },
+    methods: {
+        create() {
+            this.$parent.showNoticeDialog().then(() => {
+                this.$router.push({ name: 'createInteract', query: { type: 'qa' } });
+            });
+        },
+        getData() {
+            this.loading = true;
+            this.$http
+                .get('/article/all', { query: { mainType: '知识文库' }, sort: 'createdAt,desc' })
+                .then(res => {
+                    if (res.first) {
+                        this.list = [];
+                    }
+                    this.list = this.list.concat(res.content);
+                    this.last = res.last;
+                    this.loading = false;
+                })
+                .catch(e => {
+                    this.loading = false;
+                });
+        },
+        loadmore() {
+            if (this.loading || this.last) {
+                return;
+            }
+            this.page++;
+            this.getData();
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.item {
+    .flex-col();
+    padding: 20px 16px 22px 16px;
+    position: relative;
+    &::after {
+        .setBottomLine();
+        left: 16px;
+        right: 16px;
+    }
+    .title {
+        font-size: 16px;
+        color: black;
+        line-height: 24px;
+        font-weight: bold;
+        .ellipsisLn(2);
+    }
+    .info {
+        margin-top: 12px;
+        .flex();
+        color: @text3;
+        font-size: 13px;
+        .avatar {
+        }
+        .name {
+            margin-left: 6px;
+        }
+        .time {
+            margin-left: 16px;
+            flex-grow: 1;
+        }
+    }
+}
+.btn-fixed {
+    .flex();
+    justify-content: center;
+    position: fixed;
+    right: 16px;
+    border-radius: 22px;
+    width: 44px;
+    height: 44px;
+    .icon {
+        width: 18px;
+        height: 18px;
+    }
+}
+.btn-call {
+    bottom: calc(132px + var(--safe-bottom));
+    background: #ff9733;
+    box-shadow: 0px 6px 12px -2px rgba(191, 22, 22, 0.08);
+    &:active {
+        background: shade(#ff9733, 10%);
+    }
+}
+.btn-edit {
+    bottom: calc(73px + var(--safe-bottom));
+    background: @prim;
+    box-shadow: 0px 6px 12px -2px rgba(191, 22, 22, 0.08);
+    &:active {
+        background: shade(@prim, 10%);
+    }
+}
+</style>