zhgh_zjitc/src/main/resources/views/mobile/train/activityInfo.html

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

    .van-image {
        display: inherit;
    }

    .title {
        font-weight: bold;
        background-color: white;
        padding: 13px;
        box-shadow: 0 8px 12px #ebedf0;
    }

    .van-tabs {
        margin-top: 10px;
    }

    .van-tab {
        -webkit-flex: none;
    }

    .van-tab--active {
        color: #1867b0;
    }

    .van-tabs__nav--line {
        padding-left: 10px;
    }

    .van-tabs__content {
        padding: 13px 13px 50px 13px;
        background-color: white;
        line-height: 28px;
    }

    .content_title {
        text-align: center;
    }

    .pre_text {
        white-space: break-spaces;
        padding-left: 7px;
        /*margin-top: 30px;*/
    }

    .van-sidebar-item {
        font-weight: bold;
        font-size: 15px;
    }

    .custable {
        width: 100%;
        border-collapse: collapse;
    }

    .custable td {
        text-align: center;
        height: 10px;
        white-space: nowrap;
        font-size: 14px;
        padding: 0 10px;
        line-height: 36px;
    }

    .title {
        text-align: center !important;
        font-weight: bold;
        padding-left: 10px;
    }

    .custable tr:nth-child(odd) {
        background-color: #eff1f5;
    }

    table {
        width: 100%;
        border-top: 1px solid #000000;
        border-left: 1px solid #000000;
        border-collapse: collapse; /*设置单元格的边框合并为1*/
    }

    th {
        background-color: #f2f2f2;
        line-height: 40px;
        border-bottom: 1px solid #000000;
        border-right: 1px solid #000000;
    }

    td {
        border-bottom: 1px solid #000000;
        border-right: 1px solid #000000;
        text-align: center;
    }

    p {
        margin: 6px 0;
    }

</style>
<div id="app" v-cloak>
    <van-sticky>
        <van-nav-bar title="活动详情" left-arrow
                     @click-left="pjaxReplace('/platform/mobile/trainSignUpActivity/trainList')"></van-nav-bar>
    </van-sticky>

    <van-image height="186" :src="CREATE_PREVIEW_URL(activity?.cover[0].id)"></van-image>
    <div class="title">{{activity.activityName}}</div>

    <van-tabs v-model:active="tabActive" shrink>
        <van-tab title="详细信息" name="a">
            <div class="pre_text" v-html="activity.introduce"></div>
        </van-tab>
    </van-tabs>

    <van-button @click="toSign" color="#1867b0" block style="position: fixed; bottom: 0; z-index: 2; font-size: 16px">去报名</van-button>
</div>

<script>

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]);
        return null;
    }

    const vue = new Vue({
        el: '#app',
        data() {
            return {
                trainType: '培训班',
                trainTypeList: [],
                tabActive: 'a',
                activityId: '',
                activity: {},
                activityMap: {},
            }
        },
        methods: {
            async findOne() {
                const resp = await $.get('/platform/mobile/trainSignUpActivity/findOne', {
                    id: this.activityId,
                    tabIndex: 0
                })
                if (resp.code === 0) {
                    this.activity = resp.data
                    const type = this.trainTypeList.find(o => o.code === this.activity.trainType)
                    this.trainType = type ? type.name : '培训班'
                    //将数据按校区分组
                    for (const item of this.activity.courseList) {

                        //item.courseName = item.courseName.indexOf('校区') !== -1 ? item.courseName.substr(item.courseName.indexOf('校区') + 2) : item.courseName
                        const key = item.campus
                        if (this.activityMap[key] === undefined) {
                            let array = []
                            array.push(item)
                            this.activityMap[key] = array
                        } else {
                            this.activityMap[key].push(item)
                        }

                        let timeArray = []
                        if (item.courseTimeList && item.courseTimeList.length > 0) {
                            for (const time of item.courseTimeList) {
                                const t = this.getWeek(time.courseDate.substr(0, 10)) + ' ' + time.courseStartTime.substr(11, 5) + '~' + time.courseEndTime.substr(11, 5)
                                timeArray.push(t)
                            }
                            item.timeList = Array.from(new Set(timeArray))
                        }
                    }
                }
            },
            async toSign() {
                const nowTime = moment().unix()
                if (nowTime < moment(this.activity.activitySignUpStartTime).unix()) {
                    vant.Dialog.alert({
                        title: '提示',
                        message: '活动报名还未开始',
                        confirmButtonColor: '#1867b0'
                    })
                    return
                }
                if (nowTime > moment(this.activity.activitySignUpEndTime).unix()) {
                    vant.Dialog.alert({
                        title: '提示',
                        message: '活动报名已结束',
                        confirmButtonColor: '#1867b0'
                    })
                    return
                }

                if (this.activity.activityGroupId != null) {
                    const isExist = await getScopeUser(this.activity.activityGroupId)
                    if (!isExist) {
                        if(this.activity.activityGroupName.indexOf('两癌筛查') !== -1) {
                            vant.Dialog.alert({
                                title: '温馨提示',
                                message: '哇偶，只有年龄满35周岁不足64周岁的女神才可以报名喔',
                                confirmButtonColor: '#1867b0'
                            })
                        }else {
                            vant.Dialog.alert({
                                title: '参加人员范围',
                                message: this.activity.activityGroupName,
                                confirmButtonColor: '#1867b0'
                            })
                        }
                        return
                    }
                }
                window.location.href = '/platform/mobile/trainSignUpActivity/trainInfo?activityId=' + this.activity.id + '&endTime=' + this.activity.activitySignUpEndTime
            },
            getWeek(dateString) {
                var dateArray = dateString.split("-");
                const date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
                return "周" + "日一二三四五六".charAt(date.getDay());
            },
        },
        async created() {
            this.trainTypeList = await getDictOptions("trainSignUpType")
            this.activityId = getQueryString('activityId')
            this.findOne()
        }
    })
</script>
<!--#
}
#-->