社区讯息列表

src/assets/css/index.less

@@ -41,6 +41,9 @@ body #app {
   line-height: 50px;
   font-size: 15px;
 }
+.oh{
+  overflow: hidden;
+}
 .y66666{
   color: #666666;
 }

src/router/router.config.js

@@ -73,17 +73,17 @@ export const constantRouterMap = [
     name: 'search',
     component: () => import('@/views/search'),
     meta: { title: '搜索', keepAlive: false }
-  },{
+  }, {
     path: '/selectAgency',
     name: 'selectAgency',
     component: () => import('@/views/selectAgency'),
     meta: { title: '选择所在社区', keepAlive: false }
-  },{
+  }, {
     path: '/houseQR',
     name: 'houseQR',
     component: () => import('@/views/houseQR'),
     meta: { title: '电子门牌', keepAlive: false }
-  },{
+  }, {
     path: '/activity',
     name: 'activity',
     component: () => import('@/views/activity'),
@@ -130,6 +130,11 @@ export const constantRouterMap = [
     name: 'detailServices',
     component: () => import('@/views/Enjoyableservices/detail'),
     meta: { title: '服务详情', keepAlive: false }
+  },{
+    path: '/communityPublicity',
+    name: 'communityPublicity',
+    component: () => import('@/views/communityPublicity'),
+    meta: { title: '社区讯息', keepAlive: false }
   }
 ]
 

src/views/communityPublicity/index.vue

@@ -0,0 +1,220 @@
+<template>
+    <div>
+        <div class="flex flex-mean" style="background-color: #FFFFFF;">
+            <van-search class=".flex flex-1" v-model="searchValue" left-icon="" shape="round" placeholder="请输入搜索关键词" />
+            <van-button round type="info" class="custom-button font-size13 m-top10 m-right12" @click="handleSearch">查询</van-button>
+        </div>
+        <div class='container'>
+            <van-tabs v-model="tagActive" style="width: 100%;" @change="handelChangeTags">
+                <van-tab v-for="item in tagList" :key="item.id" :title="item.tagName">
+                    <div class="flex flex-y flex1 flex-end" v-if="PublicityList.length !== 0">
+                        <van-list v-model="loading" :finished="finished" finished-text="没有更多了"
+                            @load="communityPublicity" class="card" :offset="50">
+                            <div class="activity_content flex flex-y" v-for="(item, index) in PublicityList"
+                                :key="index">
+                                <div class="flex  flex1 oh">
+                                    <div class="flex flex-y flex1 m-right10 oh">
+                                        <span class="van-multi-ellipsis--l2 " style="line-height: 28px;">
+                                            {{ item.title }}
+                                        </span>
+                                        <span class="van-ellipsis y66666 font-size15">
+                                            {{ item.content }}
+                                        </span>
+                                    </div>
+                                    <img v-if="item.coverPic" :src="item.coverPic" style="width: 100px;height: 60px;"
+                                        alt="">
+                                </div>
+                                <div class="flex flex-end flex-center gray m-top10 font-size13">
+                                    <div class="flex flex-center"><img src="@/assets/images/icons/support.png" alt=""
+                                            class="img_16 m-right7"><span>{{ item.likes }}</span>
+                                    </div>
+                                    <div class="flex1 text-align-right">{{ item.releaseTime }}</div>
+                                </div>
+                            </div>
+                        </van-list>
+                    </div>
+                    <div v-else class="no-data">
+                        暂无数据~
+                    </div>
+                </van-tab>
+            </van-tabs>
+        </div>
+    </div>
+
+
+</template>
+
+<script>
+import { advertisingTag, communityPublicity } from '@/api/home';
+
+export default {
+    data() {
+        return {
+            PublicityList: [],
+            tagList: [],
+            tagActive: 'new',
+            tagId: null,
+            pageSize: 5,
+            pageNo: 1,
+            agencyId: null,
+            finished: false,
+            loading: true,
+            showRegister: false,
+            searchValue: ""
+        };
+    },
+    created() {
+        this.agencyId = this.$store.state.app.agencyId;
+        this.advertisingTag();//获取社区讯息菜单
+        this.communityPublicity()//获取讯息列表
+    },
+    methods: {
+        handleSearch(){
+            this.PublicityList = [];
+            this.pageNo = 1;
+            this.communityPublicity()
+        },
+        filterTagId(tagId) {
+            return this.tagList.filter(item => item.id === tagId)[0].tagName || '--';
+        },
+        async advertisingTag() {
+            let parm = {
+                pageSize: 10,
+                pageNo: 1,
+                status: 0,
+                tagName: null
+            }
+            let res = await advertisingTag(parm)
+            if (res) {
+                this.tagList = res.list;
+                this.tagList.unshift({ tagName: '最新', id: 'new' })
+            }
+        },
+        async communityPublicity() {
+            let parm = {
+                pageSize: 10,
+                pageNo: 1,
+                title: this.searchValue,
+                tagId: this.tagId,
+                startTime: '',
+                endTime: '',
+                agencyId: this.agencyId
+            }
+            let res = await communityPublicity(parm)
+            if (res) {
+                this.loading = false;
+                res.list.forEach(item => {
+                    if (item.content) {
+                        item.content = this.extractChineseCharactersAndPunctuation(item.content)
+                    }
+                })
+                if (res.list.length < this.pageSize) {
+                    this.finished = true;
+                }
+                this.PublicityList = this.PublicityList.concat(res.list);
+            }
+        },
+        extractChineseCharactersAndPunctuation(str) {
+            const chineseCharsAndPunctuation = str.match(/[\u4e00-\u9fa5\u3000-\u303F\uff00-\uffef]/g);
+            return chineseCharsAndPunctuation ? chineseCharsAndPunctuation.join('') : '';
+        },
+        handelChangeTags(val, title) {
+            if (val !== 0) {
+                this.tagId = this.tagList[val].id;
+                this.PublicityList = [];
+            } else {
+                this.tagId = '';
+            }
+            this.communityPublicity()
+        },
+    },
+    components: {},
+    computed: {},
+    watch: {},
+}
+</script>
+
+<style lang='less' scoped>
+.custom-button {
+    width: 60px;
+    height: 33px;
+}
+
+.activity_content {
+    padding-bottom: 10px;
+    box-sizing: border-box;
+    width: 100%;
+    border-bottom: 1px solid #EAEAEA;
+    margin-top: 14px;
+    min-height: 50px;
+
+    .img {
+        width: 231px;
+        height: 33px;
+        margin: 5px 3px 0 3px;
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+
+    .content {
+
+        width: 325px;
+        height: 40px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 16px;
+        color: #333333;
+        line-height: 23px;
+    }
+
+    .dianzan {
+        width: 325px;
+        height: 20px;
+        display: flex;
+        font-size: 13px;
+        color: #AAAAAA;
+        flex-direction: row;
+        justify-content: space-evenly;
+        align-items: center;
+
+        .img {
+            width: 14.5px;
+            height: 15px;
+        }
+    }
+
+
+}
+
+.header {}
+
+.header .input_search {
+    width: 279px;
+    height: 33px;
+    background: rgba(193, 193, 193, 0.16);
+    border-radius: 17px;
+    // flex: 1;
+    color: #333333;
+    border: none;
+    /* 取消边框 */
+    margin-left: 10px;
+}
+
+.header .btn_search {
+    width: 60px;
+    height: 33px;
+    background: #3974F6;
+    border-radius: 17px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 23px;
+    border: none;
+    /* 取消边框 */
+    margin-right: 10px;
+}
+</style>

src/views/home/index.vue

@@ -98,7 +98,7 @@
             <div class="card m-top10">
                 <div class="title">
                     <span>社区讯息</span>
-                    <span @click="$router.push('/discussion')">更多</span>
+                    <span @click="$router.push('/communityPublicity')">更多</span>
                 </div>
                 <div class="activity_content flex">
                     <van-tabs v-model="tagActive" style="width: 100%;" @change="handelChangeTags">