epmet-wx-pa-chengyang/src/views/supervision/index.vue

<template>
    <div>
        <div class="flex flex-mean" style="background-color: #FFFFFF;">
            <van-search class="flex flex-1" v-model="searchValue" shape="round" placeholder="请输入搜索关键词">
                <template #action>
                    <!-- 添加样式确保按钮显示，并设置合适的宽高和对齐 -->
                    <!-- <div @click="onSearch"
                        style="display: flex; align-items: center; justify-content: center; padding: 0 10px; cursor: pointer;">
                        a搜索
                    </div> -->
                </template>
            </van-search>
            <van-button round type="info" class="custom-button font-size13 m-top10 m-right12" @click="handleSearch">查询</van-button>

        </div>

        <div class="card m-top10">
            <div class="title">
                <span>廉政平台</span>
            </div>
            <div class="grid-container nav flex-mean m-top18">
                <div class="flex-y flex flex-center1 flex-center2 nav font-size12" v-for="(item, index) in squaredList"
                    @click="handelClickJump(item.path,'tab')" :key="index">
                    <img :src="item.imgSrc" alt="">
                    <span >{{ item.title }}</span>
                </div>
            </div>
        </div>

        <div class='container'>
                    <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" @click="toDetail(item)">
                                <div class="flex  flex1 oh">
                                    <div class="flex flex-y flex1 m-right10 oh">
                                        <span class="van-multi-ellipsis--l2 text1" style="line-height: 28px;">
                                            {{ item.title }}
                                        </span>
                                        <div class="flex flex-end text2">
                                            <span class="van-ellipsis y66666 font-size15">
                                            {{ item.newContent }}    </span>
                                    
                                        <div class="">{{ item.releaseTime }}</div>
                                        </div>
                                
                                    </div>
                                    <img v-if="item.coverPic" :src="item.coverPic" style="width: 130px;height: 100px;border-radius: 20;"
                                        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 || 0 }}</span>
                                    </div> -->
                            
                                </div>
                            </div>
                        </van-list>
                    </div>
                    <div v-else class="no-data">
                        暂无数据~
                    </div>

        </div>
        <Android></Android>
    </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: "",

            squaredList:[
                {
                    imgSrc: require('@/assets/images/squaredPaper/1.png'),
                    title: '廉洁宁陵',
                    path: 'govAffairs'
                },
                {
                    imgSrc: require('@/assets/images/squaredPaper/2.png'),
                    title: '基层小微权力监督一点通',
                    path: 'communityPublicity'
                },
                {
                    imgSrc: require('@/assets/images/squaredPaper/3.png'),
                    title: '廉教中心',
                    path: 'communityPublicity'
                },
                {
                    imgSrc: require('@/assets/images/squaredPaper/4.png'),
                    title: '廉政便民服务快车道',
                    path: 'supervision'
                },
                {
                    imgSrc: require('@/assets/images/squaredPaper/5.png'),
                    title: '济宁消防廉线',
                    path: 'communityPublicity'
                },
                {
                    imgSrc: require('@/assets/images/squaredPaper/6.png'),
                    title: '清风郑州',
                    path: 'communityPublicity'
                }
            ],
        };
    },
    created() {
        this.agencyId = this.$route.query.agencyId?this.$route.query.agencyId: this.$store.state.app.agencyId;
        this.advertisingTag();//获取社区讯息菜单
        this.communityPublicity()//获取讯息列表
    },
    methods: {
        toDetail(item){
            this.$router.push({name:'communityPublicityDetail',query:{id:item.id}})
        },
        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: 1,
                tagName: null
            }
            let res = await advertisingTag(parm)
            if (res.code === 0) {
                this.tagList = res.data.list;
                this.tagList.unshift({ tagName: '最新', id: 'new' })
            }
        },
        async communityPublicity() {
            let parm = {
                pageSize: 10,
                pageNo: 1,
                title: this.searchValue,
                tagId: "threeAffairsDisclosure",
                startTime: '',
                endTime: '',
                agencyId: this.agencyId,
                status:1
            }
            let res = await communityPublicity(parm)
            if (res.code === 0) {
                this.loading = false;
                res.data.list.forEach(item => {
                    if (item.content) {
                        item.newContent = this.extractChineseCharactersAndPunctuation(item.content)
                    }
                })
                if (!res.data || res.data.list.length < this.pageSize) {
                    this.finished = true;
                }
                this.PublicityList = this.PublicityList.concat(res.data.list);
            }
        },
        extractChineseCharactersAndPunctuation(str) {
            const chineseCharsAndPunctuation = str.match(/[\u4e00-\u9fa5\u3000-\u303F\uff00-\uffef]/g);
            return chineseCharsAndPunctuation ? chineseCharsAndPunctuation.join('') : '';
        },
        handelChangeTags(val, title) {
            this.PublicityList = [];
            if (val !== 0) {
                this.tagId = this.tagList[val].id;
            } else {
                this.tagId = '';
            }
            this.communityPublicity()
        },
    },
    components: {},
    computed: {},
    watch: {},
}
</script>

<style lang='less' scoped>
.text2{
    font-family: PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #999999;
        line-height: 48px;
}
.text1{
    font-family: PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #000000;
        line-height: 44px;
}
.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;
}
::v-deep .van-search__content {
  background-color: white; 
  border: 1px solid #3974F6; 
}

::v-deep .van-search__input {
  color: #000; 
}

::v-deep .van-field__control::placeholder {
  color: #A0A0A0; 
}
:deep(.van-field__control) {
    font-size: 13px;
}
.van-tab__title {
  padding: 5px 12px; /* 内边距调整 */
  font-size: 14px; /* 字体大小 */
}

.van-tabs__nav {
  justify-content: space-between; /* 平均分布 */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 每列4个 */
    gap: 10px; /* 图片之间的间距 */
    // padding: 16px;
    align-items: start; /* 子元素顶对齐 */
}

.font-size12{
    font-size: 12px;
  }
</style>