saas_miniprogram/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 / 020-87085983 / 18565459156</view>
        </view>
        <view class="exam_entry">
            参加本次活动，请添加此次活动专属微信号
            <!-- <text class="entrys">考试入口：</text>请进入祥粤云学堂小程序或者网站， 在个人中心找到模考功能进行考试。 -->
        </view>

        <view v-if="courseList.length" class="course_list">
            <view class="titles">
                <image class="code" src="@/static/learn/act_icon.png" ></image>
                <text class="title">推荐课程</text>
            </view>
            <view class="list_item" v-for="(item,index) in courseList" :key="index" @click="toBuy(item)">
                <view class="course_content">
                    <view class="c_title">{{item.goodsName}}</view>
                    <view class="c_downs">
                        <view class="img">
                            <image :src="$method.splitImgHost(item.coverUrl, true)"></image>
                            <view class="time" v-if="item.year">{{item.year?item.year:''}}</view>
                        </view>
                        <view class="text">
                            <view class="desc">
                                <view class="left">
                                    <text class="mon_t">¥ {{item.standPrice}}</text>
                                    <!-- <text class="sale">/限时优惠</text> -->
                                    <text v-if="item.linePrice" class="sale"> ¥ </text>
                                    <text v-if="item.linePrice" class="price_line">&nbsp;{{ item.linePrice }}</text>
                                </view>
                                <view class="right">
                                    <view class="regiser_row" v-if="!hideBuyState">立即购买</view>
                                </view>
                            </view>
                            <view v-if="item.buyUserNum" class="joins">
                                <!-- <image class="people" src="/static/index/people.png"></image> -->
                                <!-- 为0时，不显示 -->
                                <view class="people">{{ item.buyUserNum }}人参与</view>
                            </view>
                        </view>
                    </view>
                </view>					
            </view>
        </view>
        
    </view>     
</template>

<script>
import { mapGetters  } from 'vuex'
var curTime = new Date().getTime() // 当前时间的时间戳
export default {
    name: 'registrationSuccess',
    data() {
        return {
            startTime: '',
            endTime: '',
            lastStartDay: '',
            lastEndDay: '',
            sDay: '',
            eDay: '',
            activityId: '',
            courseList: [],
        }
    },
    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)
            }
        },
        
    },
    computed: { ...mapGetters(['hideBuyState']) },
    onLoad(option) {
        console.log('option: ', option)
        this.startTime = option.startTime
        this.endTime = option.endTime
        this.activityId = option.activityId
        this.getAct()
        // this.startTime = "1663041599"
        // this.endTime = "1663127999"
    },
    methods: {
        getAct() {
            this.$http({
                url: `/app/common/activity/goodsList/${this.activityId}`,
                method: 'get',
                noToken: true,
            }).then((res) => {
                if (res.data.code == 200) {
                    console.log('res', res)
                    this.courseList = res.data.data || []
                }
            })
        },
        toBuy(item) {
            if (item.goodsType == 1) {
                uni.navigateTo({
                    url: '/pages3/course/detail?id='+item.goodsId
                })
            } else if (item.goodsType == 2) {
                uni.navigateTo({
                    url: '/pages2/bank/detail?id='+item.goodsId
                })
            } else {
                uni.navigateTo({
                    url: '/pages5/liveDetail/index?id='+item.goodsId
                })
            }
        },
    }
}
</script>

<style>
page {
    /* background-color: #DFECFD; */
    background: linear-gradient(90deg, #EDF1FF 0%, #D9F0FF 100%);
}
</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_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: 80rpx;
}
.course_list {
    // width: 100%;
    padding: 0rpx 32rpx;
    box-shadow: 0px 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);			
    .titles {
        margin-left: 10rpx;
        margin-bottom: 32rpx;
        .code {
            width: 38rpx;
            height: 24rpx;
        }
        .title {
            font-size: 40rpx;
            font-family: OPPOSans-Bold, OPPOSans;
            font-weight: bold;
            color: #222222;
            margin-left: 14rpx;
        }
    }
    .list_item {
        padding: 24rpx;
        // height: 278rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1,99,235,0.1000);
        border-radius: 24rpx;
        background:#fff;
        margin-bottom: 32rpx;
        display: flex;
        align-items: center;
        .c_title {
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 24rpx;
            font-weight: bold;
            color: #222222;
        }
        .c_downs {
            display: flex;
        }
        .img {
            position:relative;
            margin-right: 24rpx;
            border-radius: 16rpx ;
            overflow: hidden;
            width: 204rpx;
            height: 120rpx;
            image {
                width:100%;
                height:100%;
            }
            
            .time {
                position:absolute;
                bottom:0;
                right:0;
                width: 80rpx;
                height: 32rpx;
                background: rgba(1, 25, 45, 0.4);
                color:#fff;
                text-align: center;
                line-height: 32rpx;
                font-size: 24rpx;
                border-radius: 10rpx 0px 10rpx 0px;
            }
        }
        
        .text {
            width: 440rpx;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 120rpx;
            .joins {
                .people {
                    width: 160rpx;
                    font-size: 20rpx;
                    color: #999999;
                    padding: 0rpx 8rpx;
                    text-align: center;
                    height: 36rpx;
                    line-height: 36rpx;
                    background: #F6F7FB;
                    border-radius: 4px;
                }
                
            }
            .desc {
                margin-top: 10rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                .left {
                    flex:1;
                    color:#333;
                    font-size: 26rpx;
                    .mon_t {
                        font-weight: bold;
                        color: #FC3F3F;
                        font-size: 36rpx;
                    }
                    .sale {
                        color: #999999;
                        font-size: 24rpx;
                        margin-left: 8rpx;
                    }
                    .price_line {
                        color: #999999;
                        font-size: 24rpx;
                        text-decoration:line-through;
                        font-weight: 400;
                    }
                }
                
                .right {
                    font-size: 24rpx;
                    font-weight: bold;
                    .regiser_row {
                        width: 144rpx;
                        height: 52rpx;
                        line-height: 52rpx;
                        text-align: center;
                        border-radius: 16rpx;
                        background-color: #FC3F3F;
                        color: #fff;
                        font-weight: 500;
                        font-size: 26rpx;
                    }
                }
            }
        }
    }
}
</style>