zhgh_jvic/src/main/resources/views/mobile/activity/unionActivity/myActivity.html

<!--#
layout("/mobile/platform.html"){
#-->

<style>
    .list-card {
        margin-bottom: 10px;
    }

    .activity_card {
        padding: 15px;
        background: #fff;
        margin: 10px;
        border-radius: 5px;
    }

    .activity_card .van-image, .activity_card .van-image img {
        border-radius: 5px;
    }

    .activity_card .activity_content {
        margin-top: 10px;
    }

    .activity_card .activity_content .activity_name {
        line-height: 25px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }

    .activity_card .activity_content .activity_bottom {
        line-height: 25px;
        display: flex;
    }

    .activity_card .activity_content .activity_bottom .left {
        line-height: 25px;
        overflow: hidden;
        width: calc(100% - 80px);
        font-size: 12px;
        color: #c4bebe;
        white-space: nowrap;
        display: flex;
        align-items: center;
    }

    .activity_card .activity_content .activity_bottom .right {
        line-height: 25px;
        overflow: hidden;
        width: 80px;
        max-width: 80px;
        text-align: right;
    }

</style>

<div id="app" v-cloak>
    <van-nav-bar @click-left="location.replace('/mobile/index')" fixed left-arrow placeholder
                 title="活动列表"></van-nav-bar>

    <div style="margin: 10px auto 60px auto">
        <van-list :finished="finished" :finished-text="tableData.length>0?'没有更多了':''"
                  @load="pageData"
                  v-model="loading">
            <div @click="openReg(o)" class="list-card" v-for="o in tableData">

                <div class="activity_card">
                    <van-image
                            :src="FILE_DOMAIN + '/fileStreamPreview?id=' + o.cover"
                            fit="cover"
                            height="200"
                            width="100%"
                    ></van-image>
                    <div class="activity_content">
                        <div class="activity_name van-ellipsis">
                            <van-icon color="red" name="fire"></van-icon>
                            <span style="margin-left: 10px;">{{o.name}}</span>
                        </div>
                        <div class="activity_bottom">
                            <div class="left">
                                <van-icon name="clock" size="1em"></van-icon>
                                <span style="margin-left: 10px;">
                                    {{moment(o.startTime).format('YYYY/MM/DD HH:mm')}} 至
                                    {{moment(o.endTime).format('YYYY/MM/DD HH:mm')}}
                                </span>
                            </div>
                            <div class="right">
                                <span style="color: forestgreen"
                                      v-if="moment(o.applyEndTime).valueOf() > moment().valueOf() && moment().valueOf() > moment(o.applyStartTime).valueOf()">
                                    报名中
                                </span>
                                <span style="color: #ee1919"
                                      v-else-if="moment(o.applyEndTime).valueOf() < moment().valueOf() && moment().valueOf() < moment(o.startTime).valueOf()">
                                    报名结束
                                </span>
                                <span style="color: forestgreen"
                                      v-else-if="moment(o.startTime).valueOf() < moment().valueOf() && moment().valueOf() < moment(o.endTime).valueOf()">
                                    活动进行中
                                </span>
                                <span style="color: #ee1919"
                                      v-else-if="moment().valueOf() > moment(o.endTime).valueOf()">
                                    活动结束
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
    </div>

    <van-empty class="custom-image" description="暂无数据" image="/none.svg"
               v-if="mLoading==false&&tableData.length==0">
    </van-empty>

    <div>
        <van-tabbar :active-color="themeColor" v-model="tabBarIndex">
            <van-tabbar-item @click="location.replace('/mobile/activity/unionActivity')" icon="home-o">
                全部活动
            </van-tabbar-item>
            <van-tabbar-item @click="location.replace('/mobile/activity/myActivity')" icon="friends-o">
                我的活动
            </van-tabbar-item>
        </van-tabbar>
    </div>

</div>
<script>

    const vue = new Vue({
        el: '#app',
        mixins: [mobileMixins],
        data() {
            return {
                pageDataUrl: '/mobile/activity/myActivity',
                pageForm: {
                    year: ''
                },
                tabBarIndex: 1
            }
        },
        methods: {
            yearChange() {
                this.pageForm.pageNumber = 1
                this.pageData()
            },
            async pageData() {
                this.mLoading = true
                const resp = await $.post('/mobile/activity/myActivity/pageData', this.pageForm)
                if (resp.code === 0) {
                    if (resp.data.list.length === 0) {
                        this.tableData = []
                    } else {
                        this.tableData = this.tableData.concat(resp.data.list)
                    }
                    if (this.tableData.length === resp.data.totalCount) {
                        this.finished = true
                    } else {
                        this.pageForm.pageNumber++
                    }
                }
                this.loading = false;
                this.mLoading = false
            },
            openReg(o) {
                // window.location.href = '/mobile/activity/unionActivity/goReg?id=' + o.id + '&signUpMethod=1'
                if (o.projectTypeCode === '50004') {
                    location.replace('/mobile/activity/myActivity/goMyProject?id=' + o.id)
                } else {
                    location.replace('/mobile/activity/myActivity/goSign?id=' + o.id)
                }
            }
        },
        created() {
            this.pageForm.year = new Date().getFullYear()
        }
    })
</script>
<!--#
}
#-->