zc_saas_h5/pages5/mockExam/registrationSuccess.vue

<template>
    <view class="registration_success">
        <nav-bar title="模考报名成功"></nav-bar>
        <view class="exam_success">
            <image class="imgs" src="../static/ping_bg.png"></image>
            <view class="activity_time">
                活动时间：{{ startTime | formate('yyyy年mm月dd日')}}-{{ endTime | formate('yyyy年mm月dd日')}}
            </view>
        </view>
        <view class="exam_times">
            <view class="start_time all_time">
                <view class="time_left">
                    <text class="numbers">{{ startTime | getLastDay }}</text>
                    <text class="days">天</text>
                </view>
                <view class="words">距模考开始时间</view>
            </view>
            <view class="lines"></view>
            <view class="end_time all_time">
                <view class="time_left">
                    <text class="numbers">{{ endTime | getLastDay }}</text>
                    <text class="days">天</text>
                </view>
                <view class="words">距模考结束时间</view>
            </view>
        </view>
        <view class="mains">
            <view class="gives">
                送价值1109元一建《冲刺黄金包》 提分必备神器
            </view>
            <view class="middles">
                <view class="qr_codes">
                    <image class="code" src="../static/erCode.png" show-menu-by-longpress="true"></image>
                </view>
                <view class="discern">长按识别二维码 加活动专属微信号</view>    
            </view>
            <view class="middle_line">
                <view class="half_cir_left"></view>
                <view class="line"></view>
                <view class="half_cir_rig"></view>
            </view>
            <view class="flows">
                <view class="f_title">活动流程</view>
                <view class="f_lines">
                    <view class="numbers">1</view>
                    <view class="line line_one"></view>
                    <view class="numbers">2</view>
                    <view class="line line_two"></view>
                    <view class="numbers">3</view>
                    <view class="line line_three"></view>
                    <view class="numbers">4</view>
                </view>
                <view class="f_words">
                    <view class="word word_one">预约报名</view>
                    <view class="word word_two">扫码添加活动 专属微信号</view>
                    <view class="word word_three">模考</view>
                    <view class="word word_four">领福利</view>
                </view>
            </view>
        </view>
        <!-- <view class="distance_time">
            <view class="time_item">
                距模考开始时间还有：
                <u-count-down v-if="sDay > 1" :timestamp="lastStartDay" :show-days="true" separator="zh" 
					:show-hours="false" :show-minutes="false" :show-seconds="false" font-size="28"
					bg-color="#DFECFD" separator-color="#222222" color="#222222" separator-size="28">
				</u-count-down>
                <text v-else>0天</text>
            </view>
            <view class="time_item">
                距模考结束时间还有：
                <u-count-down v-if="eDay > 1" :timestamp="lastEndDay" :show-days="true" separator="zh" 
					:show-hours="false" :show-minutes="false" :show-seconds="false" font-size="28"
					bg-color="#DFECFD" separator-color="#222222" color="#222222" separator-size="28">
				</u-count-down>
                <text v-else>0天</text>
            </view>
            <view class="time_item">活动详情请咨询业务人员或致电020-87085982/87085983</view>
        </view> -->
        <view class="activity_phone">
            <view class="titles">活动咨询电话</view>
            <view class="phone_num">020-87085982 / 87085983</view>
        </view>
        <view class="exam_entry">
            参加本次活动，请添加此次活动专属微信号
            <!-- <text class="entrys">考试入口：</text>请进入祥粤云学堂小程序或者网站， 在个人中心找到模考功能进行考试。 -->
        </view>
    </view>     
</template>

<script>
var curTime = new Date().getTime() // 当前时间的时间戳
export default {
    name: 'registrationSuccess',
    data() {
        return {
            startTime: '',
            endTime: '',
            lastStartDay: '',
            lastEndDay: '',
            sDay: '',
            eDay: '',
        }
    },
    filters: {
        getLastDay(time) {
            console.log('time:', time)
            var padDate = function (va) {
                va = va < 10 ? '0' + va : va
                return va
            }
            if (time) {
                var value = new Date(time * 1000) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var year = value.getFullYear()
                var month = padDate(value.getMonth() + 1)
                var day = padDate(value.getDate())
                let t_value = year + '/' + month + '/' + day
                console.log('t:', t_value)
                let curTimeLast = new Date(new Date(t_value).toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
                
                let lastStartDay = parseInt(curTimeLast/1000) - parseInt(curTime/1000)                
                let days = parseInt(lastStartDay/24/60/60) 
                return days >= 1 ? days : 0
                // this.lastEndDay = parseInt(curTimeLast/1000)  - parseInt(curTime/1000)
                // this.sDay = this.lastStartDay/24/60/60
                // this.eDay = this.lastEndDay/24/60/60
                // console.log('lastStartDay', this.lastStartDay, this.lastEndDay, this.sDay, this.eDay)
            }
        }
    },
    onLoad(option) {
        console.log('option: ', option)
        this.startTime = option.startTime
        this.endTime = option.endTime
        // this.startTime = "1663041599"
        // this.endTime = "1663127999"
    },
}
</script>

<style>
page {
    background-color: #DFECFD;
}
</style>

<style lang="scss" scoped>
.registration_success {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.exam_success {
    width: 100%;
    height: 360rpx;
    // margin-top: 68rpx;
    display: flex;
    align-items: center;
    position: relative;
    top: 0;
    left: 0;
    .imgs {
        width: 100%;
        height: 360rpx;
        // width: 56rpx;
        // height: 56rpx;
    }
    .activity_time {
        width: 662rpx;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        background: rgba(255,255,255,0.7);
        border-radius: 16rpx;
        border: 2rpx solid #FFFFFF;
        font-size: 30rpx;
        font-weight: 500;
        color: #2D5692;
        position: absolute;
        bottom: 12rpx;
        left: 40rpx;
    }
}
.exam_times {
    margin-top: 28rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 670rpx;
    height: 178rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 0rpx 64rpx;
    .all_time {
        .time_left {
            text-align: center;
        }
        .numbers {
            font-size: 52rpx;
            font-weight: 800;
            color: #F67205;
        }
        .days {
            font-size: 28rpx;
            font-weight: 500;
            color: #F67205;
        }
        .words {
            font-size: 28rpx;
            color: #6D7D94;
            margin-top: 10rpx;
        }
    }
    .time_title {
        font-size: 48rpx;
        font-weight: bold;
        color: #3487FF;
    }
    .time_range {
        font-size: 26rpx;
        font-weight: 500;
        color: #222222;
        margin-top: 12rpx;
    }
    .lines {
        width: 2rpx;
        height: 84rpx;
        background: #E4E4E4;
    }
}
.mains {
    width: 670rpx;
    height: 874rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    margin-top: 36rpx;
    .gives {
        width: 100%;
        height: 160rpx;
        padding: 32rpx 60rpx;
        background-color: #3F8DFD;
        font-size: 36rpx;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 48rpx;
        border-radius: 16rpx 16rpx 0rpx 0rpx;
        text-align: center;
    }
    .middles {
        margin-top: 48rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .qr_codes {
            width: 268rpx;
            height: 268rpx;
            background: #FFFFFF;
            border-radius: 24rpx;
            border: 4rpx solid #91BEFF;
            position: relative;
            top: 0;
            left: 0;
            .code {
                width: 248rpx;
                height: 248rpx;
                position: absolute;
                top: 6rpx;
                left: 6rpx;
            }
        }
        .discern {
            font-size: 28rpx;
            font-weight: bold;
            color: #222222;
            margin-top: 24rpx;
        }
    }
    .middle_line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 28rpx;
        .half_cir_left {
            width: 20rpx;
            height: 40rpx;
            border-radius: 0rpx 20rpx 20rpx 0rpx;
            background-color: #DFECFD;
        }
        .half_cir_rig {
            width: 20rpx;
            height: 40rpx;
            border-radius: 20rpx 0rpx 0rpx 20rpx;
            background-color: #DFECFD;
        }
        .line {
            width: 588rpx;
            height: 2rpx;
            border-bottom: 2rpx dashed #C4DCFF;
        }
    }
    .flows {
        margin-top: 18rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .f_title {
            font-size: 32rpx;
            font-weight: bold;
            color: #222222;
            position: relative;
            top: 0rpx;
            left: 0rpx;
            &::after {
                content: '';
                width: 32rpx;
                height: 8rpx;
                background: #3F8DFD;
                position: absolute;
                bottom: -8rpx;
                left: 40rpx;
            }
        }
        .f_lines {
            width: 500rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 26rpx 0rpx 16rpx 0rpx;
            .numbers {
                width: 40rpx;
                height: 40rpx;
                line-height: 40rpx;
                text-align: center;
                background: #D5E6FF;
                border-radius: 50%;
                font-size: 24rpx;
                font-weight: bold;
                color: #3F8DFD;
            }
            .line {
                height: 2rpx;
                border-bottom: 2rpx dashed #C4DCFF;
            }
            .line_one {
                width: 112rpx;
            }
            .line_two {
                width: 86rpx;
            }
            .line_three {
                width: 48rpx;
            }
        }
        .f_words {
            display: flex;
            align-items: flex-start;
            width: 526rpx;
            justify-content: space-between;
            .word {
                font-size: 26rpx;
                font-weight: 400;
                color: #3F8DFD;
            }
            .word_one {

            }
            .word_two {
                width: 156rpx;
                text-align: center;
            }
        }
    }
}
.distance_time {
    margin-top: 56rpx;
    .time_item {
        font-size: 32rpx;
        color: #222222;
        margin-bottom: 24rpx;
    }
}
.activity_phone {
    margin: 40rpx 0rpx 56rpx 0rpx;
    padding: 32rpx 0rpx 0rpx 44rpx;
    width: 670rpx;
    height: 148rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    .titles {
        font-size: 28rpx;
        color: #222222;
        margin-bottom: 12rpx;
    }
    .phone_num {
        font-size: 28rpx;
        font-weight: bold;
        color: #3F8DFD;
    }
}
.exam_entry {
    font-size: 32rpx;
    font-weight: 500;
    color: #222222;
    margin-bottom: 100rpx;
    // margin-top: 22rpx;
    // margin-bottom: 100rpx;
    // width: 686rpx;
    // height: 128rpx;
    // background: #3F8DFD;
    // border-radius: 16rpx;
    // padding: 20rpx 50rpx;
    // color: #fff;
    // line-height: 44rpx;
    // .entrys {
    //     font-size: 28rpx;
    //     font-weight: bold;
    //     color: #FFFFFF;
    // }
}
</style>