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

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

<style>
    .activity_img_back {
        background-repeat: no-repeat;
        background-size: cover;
        /*height: 200px;*/
        width: 100%;
    }

    .remark-content{
        width: 100%;
        max-width: 100%;
        height: calc(100vh - 46px - 44px);
        overflow-y: auto;
    }

    .remark-content *{
        max-width: 100%!important;
    }

    .joinPopup {
        width: 100%;
        height: 100%;
        background-color: #f6f7f9;
    }
</style>

<div id="app" v-cloak>
    <van-nav-bar @click-left="location.replace('/mobile/activity/unionActivity')" fixed left-arrow
                 placeholder
                 title="个人报名"></van-nav-bar>

    <!--#include("/mobile/activity/unionActivity/common/activityInfo.html"){}#-->

    <div style="margin: 20px 20px 10px 20px"
         v-if="moment(o.applyStartTime).valueOf() < moment().valueOf() &&  moment().valueOf() < moment(o.applyEndTime).valueOf()">
        <van-button :color="themeColor" @click="doSave()"
                    block style="border-radius: 10px"
                    type="info"
                    v-if="!isRegister && !isRegisterFull">
            立即报名
        </van-button>
        <van-button :color="themeColor" @click="doSave()"
                    block disabled
                    style="border-radius: 10px"
                    type="info"
                    v-else-if="!isRegister && isRegisterFull">
            名额已满
        </van-button>
        <van-button @click="doCancel"
                    block
                    color="red" style="border-radius: 10px" type="info"
                    v-else-if="isRegister && moment().valueOf() < moment(o.applyEndTime).valueOf()">
            取消报名
        </van-button>
    </div>

    <!--<div style="margin: 20px 20px 10px 20px"
         v-if="isRegister && moment().valueOf() < moment(o.endTime).valueOf() && moment().valueOf() > moment(o.startTime).valueOf()">
        <van-button
                :color="themeColor"
                :disabled="moment().valueOf() > moment(o.endTime).valueOf() || moment().valueOf() < moment(o.startTime).valueOf() || isSign"
                @click="doSign()" block style="border-radius: 10px"
                type="info">
            {{isSign?'签到成功':'立即签到'}}
        </van-button>
    </div>-->

    <van-popup class="joinPopup" position="right" v-model:show="showActivityInfoPopup">
        <van-nav-bar @click-left="showActivityInfoPopup = false" fixed left-arrow placeholder title="活动内容"></van-nav-bar>
        <div class="remark-content" v-html="activityContent" @click="remarkClick"></div>
    </van-popup>

</div>

<script>
    <!--#include("/mobile/activity/unionActivity/common/initMap.js"){}#-->
    const vue = new Vue({
        el: '#app',
        mixins: [mobileMixins, self_mixin_h5],
        data() {
            return {
                activityId: '',
                o: {},
                tagCloseable: true,
                isRegister: false,
                isSign: false,

                activityContent: '',
                showActivityInfoPopup: false
            }
        },
        methods: {
            remarkClick(event){
                //如果点击的是图片
                if(event.target.tagName === 'IMG'){
                    vant.ImagePreview([event.target.src])
                }
            },
            showActivityInfo(activityContent){
                console.log(activityContent)
                this.activityContent = ''
                this.activityContent = activityContent
                this.showActivityInfoPopup = true
            },
            async isRegisterForMe() {
                const resp = await $.get('/mobile/activity/unionActivity/isRegisterForMe', {activityId: this.activityId})
                if (resp.code === 0) {
                    this.isRegister = resp.data
                }
            },
            async doSave() {
                let message = ''
                if (this.o.needSign) {
                    message = '报名后若未参加，将有可能影响到其它活动的报名，同时活动开启了现场签到！'
                }
                const confirm = await this.$dialog.confirm({
                    title: '提示',
                    message: '您确认要报名吗？' + message,
                })
                if (confirm === 'confirm') {
                    const loading = this.$toast.loading({
                        message: '报名中...',
                        forbidClick: true,
                        overlay: true,
                        duration: 0
                    })
                    await this.getHasRegUserNum()
                    const resp = await $.post('/mobile/activity/unionActivity/doSingleRegister', {activityId: this.activityId})
                    loading.close()
                    if (resp.code === 0) {
                        vant.Dialog.alert({
                            title: '温馨提示',
                            message: '您已报名成功，请按时参加活动哦',
                        }).then(() => {
                            window.location.reload()
                        }).catch(() => {
                            window.location.reload()
                        })
                    } else {
                        vant.Dialog.alert({
                            title: '温馨提示',
                            message: resp.msg,
                        })
                    }
                }
            },
            async doCancel() {
                const confirm = await this.$dialog.confirm({
                    title: '提示',
                    message: '您确认要取消报名吗？',
                })
                if (confirm === 'confirm') {
                    const loading = this.$toast.loading({
                        message: '取消中...',
                        forbidClick: true,
                        overlay: true,
                        duration: 0
                    })
                    const resp = await $.post('/mobile/activity/unionActivity/doSingleCancelRegister', {activityId: this.activityId})
                    loading.close()
                    if (resp.code === 0) {
                        vant.Dialog.alert({
                            title: '温馨提示',
                            message: resp.msg,
                        }).then(() => {
                            window.location.reload()
                        }).catch(() => {})
                        // setTimeout(() => {
                        //     this.$toast.success(resp.msg)
                        //     pjaxReplace('/mobile/activity/unionActivity')
                        // }, 1000)
                    } else {
                        vant.Dialog.alert({
                            title: '温馨提示',
                            message: resp.msg,
                        })
                    }
                }
            },
            async getSignStatus() {
                const resp = await $.post('/mobile/activity/unionActivity/isSign', {activityId: this.activityId})
                if (resp.code === 0) {
                    this.isSign = resp.data
                }
            },
            async doSign() {
                const confirm = await this.$dialog.confirm({
                    title: '提示',
                    message: '您确认要签到吗？',
                })
                if (confirm === 'confirm') {
                    const resp = await $.post('/mobile/activity/unionActivity/singleSignUp', {activityId: this.activityId})
                    if (resp.code === 0) {
                        await this.getSignStatus()
                        this.$toast.success(resp.msg)
                    }
                }
            }
        },
        created() {
            const id = GetQueryString("id")
            if (id) {
                this.activityId = id
                this.getActivityInfo()
                this.isRegisterForMe()
                this.getSignStatus()
                if (moment(this.o.applyStartTime).valueOf() < moment().valueOf() && moment().valueOf() > moment(this.o.applyEndTime).valueOf()) {
                    this.$toast.fail("不在活动范围内")
                }
            }
        }
    })
</script>

<!--#
}
#-->