UNION_NSI/target/classes/views/mobile/train/trainList.html

<!--#
layout("/mobile/platform.html"){
#-->
<style>
    .van-card {
        background: #ffffff;
        margin: 10px auto 0;
        width: 96%;
        border-radius: 10px;
        padding: 14px 12px;
    }

    .van-card__thumb {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .van-card__content > div {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .train-title {
        flex: 0.6;
        margin-top: 4px;
    }

    .van-doc-card {
        margin: 14px;
        padding: 12px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 8px 12px #ebedf0;
        line-height: 20px;
        font-size: 12px;
        position: relative;
    }

    .van-divider {
        margin: 6px 0 5px 0px;
        border-color: #1867b0;
    }

    .van-image__img {
        max-height: 200px;
    }

    .van-image__error, .van-image__loading {
        height: 200px;
        position: relative;
    }

    .tag {
        position: absolute;
        display: inline-block;
        background-color: #1867b0;
        color: #fff;
        font-size: 10px;
        top: 1px;
        border-radius: 6px;
        right: -8px;
        padding: 1px 7px;
        transform: rotate(17deg);
        z-index: 999;
    }

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

    <van-sticky>
        <van-tabs v-model="pageForm.activityStatus" @change="tabChange">
            <van-tab title="全部" name="0"></van-tab>
            <van-tab v-if="type !== 'my'" title="进行中" name="1"></van-tab>
            <van-tab v-if="type === 'my'" title="进行中" name="3"></van-tab>
            <van-tab title="已结束" name="2"></van-tab>
        </van-tabs>
    </van-sticky>

    <div>
        <van-list :finished="finished" :finished-text="tableData.length>0?'没有更多了':''"
                  v-if="tableData && tableData.length>0"
                  v-model="loading"
                  @load="pageData">
            <div v-for="o in tableData" class="van-doc-card">
                <div class="tag" v-if="moment(o.activitySignUpStartTime).unix() > moment().unix()">即将开始</div>
                <div @click="welfareClick(o)">
                    <div>
                        <van-image :src="CREATE_PREVIEW_URL(o.cover.id)"
                                   style="display: contents"
                                   v-if="o.cover && o.cover.filepath"></van-image>
                        <van-image src=""
                                   style="display: contents"
                                   v-else></van-image>
                    </div>
                    <div>
                        <div class="van-ellipsis" style="margin-top: 6px; font-size: 15px;font-weight: bold;flex: 1">
                            {{o.activityName}}
                        </div>
                    </div>
                    <div>
                        <div class="train-title">
                            <span style="color: grey">年&emsp;&nbsp;&emsp;度：</span>
                            <span>{{o.year}}</span>
                        </div>
                        <div class="train-title">
                            <span style="color: grey">活动对象：</span>
                            <span>{{o.activityGroupName}}</span>
                        </div>
                        <van-divider></van-divider>
                    </div>
                    <div class="train-title">
                        <span style="color: grey">报名时间：</span>
                        <span>{{moment(o.activitySignUpStartTime).format('YYYY-MM-DD HH:mm') + ' ~ ' +
                        moment(o.activitySignUpEndTime).format('YYYY-MM-DD HH:mm')}}</span>
                    </div>
                    <div style="margin-top: 6px">
                        <span style="color: grey">活动时间：</span>
                        <span>{{moment(o.activityStartTime).format('YYYY-MM-DD HH:mm') + ' ~ ' +
                        moment(o.activityEndTime).format('YYYY-MM-DD HH:mm')}}</span>
                    </div>
                </div>
            </div>
        </van-list>
        <van-empty v-else description="暂无数据"></van-empty>
    </div>

</div>

<script>

    var vue = new Vue({
        el: '#app',
        mixins: [mobileMixins],
        data() {
            return {
                tarBarActive: 0,
                type: '',
            }
        },
        methods: {
            async welfareClick(o) {
                if (this.type === 'my') {
                    window.location.href = '/platform/mobile/trainSignUpActivity/trainInfo' +
                        '?activityId=' + o.id + '&endTime=' + o.activitySignUpEndTime + '&type=my' + '&startTime=' + o.activitySignUpStartTime
                } else {
                    window.location.href = '/platform/mobile/trainSignUpActivity/activityInfo?activityId=' + o.id + '&endTime=' + o.activitySignUpEndTime
                }
            },
            async pageData() {
                this.mLoading = true
                const resp = await $.post('/platform/mobile/trainSignUpActivity/pageData', this.pageForm)
                if (resp.code === 0) {
                    if (resp.data.list.length === 0) {
                        this.tableData = []
                        this.loading = false
                        this.finished = true
                    } 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
            },
            tabChange(val) {
                this.tabName = val
                this.startLoading()
                this.tableData = []
                this.pageForm.pageNumber = 1
                this.pageData()
                this.closeLoading()
            }
        },
        created() {
            this.type = GetQueryString('type')
            this.pageForm.type = this.type
            this.startLoading()
            this.pageForm.activityStatus = this.type === 'my' ? '3' : '1'
            this.pageData()
            this.closeLoading()
        }
    })
</script>
<!--#
}
#-->