epmet-wx-pa/src/views/activity/index.vue

<template>
    <div class='container'>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="communityActivity" class="card"
            :offset="50">
            <div class="activity_content flex" v-for="(item, index) in activityList" :key="index"
                @click="handelClickJump('activityDetail', item)">
                <img :src="item.coverPic" alt="" class="mr10 img_round" style="width: 75px;height: 95px;">
                <div class="flex flex-y flex1 flex-end" style="overflow: hidden;">
                    <div class="van-ellipsis">{{ item.activityName }}</div>
                    <div class="address font-size14 van-ellipsis gray">地点：{{ item.address }}</div>
                    <div class="time gray font-size14">时间：{{ item.startTime }}</div>
                    <div class="flex flex-end" v-if="item.online === 1">
                        <div>
                            <span>报名人数：</span> <span class="font-size18 orange">{{ item.currentParticipants
                                }}</span>/<span class="font-size14">{{ item.participants }}人</span>
                        </div>
                        <van-button type="info" size="small" round @click="handelClickJump('activityDetail', item)"
                            :disabled="disabledRecord(item)">{{ recordFlag(item) ? '已报名' : '报名' }}</van-button>
                    </div>
                </div>
            </div>
        </van-list>
        <register-dialog v-if="showRegister" @close="showRegister = false"></register-dialog>
    </div>
</template>

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

export default {
    data() {
        return {
            activityList: [],
            pageSize: 5,
            pageNo: 1,
            agencyId: null,
            finished: false,
            loading: true,
            showRegister: false,
        };
    },
    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)
            console.log(res);
            if (res.code === 0) {
                this.loading = false;
                if (!res.data || res.data.list.length < this.pageSize) {
                    this.finished = true;
                }
                this.activityList = this.activityList.concat(res.data.list);
            }
        },
        handelClickJump(path, item) {
            console.log(path, item);
            if (path === 'activityDetail') {
                this.$router.push({ path: `/${path}`, query: { id: item.id } });
            }

        }
    },
    components: { registerDialog },
    computed: {
        recordFlag() {
            return (item) => {
                if (!item.recordList) return false
                return item.recordList.findIndex(itemC => itemC.mobile === this.$store.state.app.userInfo.mobile) != -1
            }
        },
        disabledRecord() {
            return (item) => {
                if (!item.cutOffTime) return false
                let flag = new Date(item.cutOffTime.replace(/-/g, '/')).getTime() < Date.now() || item.currentParticipants >= item.participants;
                return flag || false
            }
        },

    },
    watch: {},
}
</script>

<style lang='less' scoped>
.activity_content {
    padding-bottom: 15px;
    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px solid #EAEAEA;
    margin-top: 14px;
    min-height: 110px;

    .img {
        width: 231px;
        height: 33px;
    }

    &:last-child {
        border-bottom: none;
    }
}
</style>