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

<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 ">查询</van-button>
        </div>
        <div class='container'>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="communityActivity"
                class="card" :offset="50">
                <div class="activity_content " v-for="(item, index) in discussionList" :key="index"
                    @click="$router.push({ path: `/discusionDetail` })">
                    <div class="van-multi-ellipsis--l2 m-bottom10">
                        {{ item.title }}
                    </div>
                    <div class="  flex flex-end">
                        <div class=""><img src="@/assets/images/icons/resi.png" class="img_17"> 参加{{ item.content }}
                        </div>
                        <div><img src="@/assets/images/icons/support.png" class="img_17">支持{{ item.time }}</div>
                        <div><img src="@/assets/images/icons/oppose.png" class="img_17">反对{{ item.content }}</div>
                    </div>
                </div>
            </van-list>
            <register-dialog v-if="showRegister" @close="showRegister = false"></register-dialog>

        </div>
    </div>


</template>

<script>
import { communityActivity } from '@/api/home';
import registerDialog from '@/components/registerDialog';

export default {
    data() {
        return {
            discussionList: [
                { title: '最近重庆南路60号院改造，很多居民反应希望 政府给楼外加保护层，冬天温度太低。', content: '111', time: '1111', address: '1111', people: '报名人数', state: '报名状态' },
                { title: '嘉定山社区路段维修时间比较长，耽误居民生 活，出行不便，望尽快维修。活动名称 gj gj fg gfj gf', content: '222', time: '2222', address: '222', people: '报名人数', state: '报名状态' },
                { title: '嘉定山社区路段维修时间比较长，耽误居民生 活，出行不便，望尽快维修。活动名称 dfsg dg fg dfh fh fdj ', content: '333', time: '333', address: '333', people: '报名人数', state: '报名状态' },
            ],
            pageSize: 5,
            pageNo: 1,
            agencyId: null,
            finished: false,
            loading: true,
            showRegister: false,
            searchValue: ""
        };
    },
    created() {
        this.agencyId = this.$store.state.app.agencyId;
        this.communityActivity();
    },
    methods: {
        async communityActivity() {
            let parm = {
                pageSize: this.pageSize,
                pageNo: this.pageNo++,
                agencyId: this.agencyId,
                activityName: "",
                status: "",
                typeId: "",
                startTime: "",
                endTime: "",
                address: "",
                assistingParty: ""
            }
            let res = await communityActivity(parm)
            if (res) {
                this.loading = false;
                if (res.list.length < this.pageSize) {
                    this.finished = true;
                }
                this.activityList = this.activityList.concat(res.list);
            }
        },
        handelClickJump(path) {
            if (path === 'activityDetail') {
                if (this.$store.state.app.userInfo.mobile) {
                    this.$router.push({ path: `/${path}` });
                } else {
                    this.showRegister = true;
                }
            }

        }
    },
    components: { registerDialog },
    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>