zc_saas_h5/pages2/dailyPractice/index.vue

<template>
    <view class="daily_practice">
        <nav-bar title="每日一练"></nav-bar>
        <template v-if="Object.keys(dayExamDetail).length">
            <view class="content_up">
                <view class="reminds">
                    <view class="remind_lefts">
                        <image src="/pages2/static/daily/logo_icon.png" class="logo_icon"></image>
                        <view class="left_infos">
                            <text class="one">订阅消息</text>
                            <text class="two">开启订阅通知，每天打卡不错过</text>
                        </view>
                    </view>
                    <view class="remind_rights">
                        <!-- 1已订阅 0未订阅 -->
                        <view class="subscription" @click="getSubscription()">{{ dayExamDetail.subscription == 1 ? '已订阅' : '订阅'}}</view>
                    </view>
                </view>
                <view class="punch_days">
                    <view class="print_day">
                        <view class="print_left">
                            <text class="one">打卡天数</text>
                            <text class="two" v-if=" dayExamDetail.examRecord == 1">恭喜你，今天的打卡已完成</text>
                            <text class="two" v-else>打卡进度超过了{{ dayExamDetail.recordPercentage || '0%' }}的学员</text>
                        </view>
                        <view class="print_right">
                            <text class="nums">{{ dayExamDetail.recordCount || 0 }}</text>天
                        </view>
                    </view>
                    <view class="middle_line">
                        <view class="half_cir_left"></view>
                        <view class="half_cir_rig"></view>
                    </view>
                    <view class="examNames">
                        <view class="exam_name">{{ dayExamDetail.examName || '' }}</view>
                        <image src="/pages2/static/daily/daily_one.png" class="daily_one"></image>
                    </view>
                    <view class="learn_btns">
                        <view class="toLearn" @click="goPractice()">{{ dayExamDetail.examRecord == 1 ? '今日已完成' : '快来做题' }}</view>
                    </view>
                </view>
            </view>
            <view class="contents">
                <view class="c_title">打卡记录</view>
                <view class="punch_calendar">
                    <view class="card_box">
                        {{ curYear + '年' + curMonth + '月'}}
                    </view>
                    <!-- <u-line color="#EEEEEE" /> -->
                    <view class="weeks">
                        <view v-for="(item, index) in weekLists" :key="index" class="card_date">{{ item }}</view>
                    </view>
                    <view class="day_dailys">
                        <view v-for="(item, index) in date_num" :key="index" class="date_nums">
                            <view class="date_items">
                                <image v-if="item.sign" src="/pages2/static/daily/punch.png" class="pun_icon"></image>
                                <text v-else>{{ item.date }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </template>
        <template v-else>
            <view class="no_datas">
                <image src="/static/learn/empty_status.png" class="empty_status"></image>
                <text class="word_tip">暂无每日一练</text>
            </view>
        </template>
        <!-- 订阅消息弹窗 -->
        <!-- :mask-close-able="false" -->
        <u-popup class="modal" v-model="meassgeModal" mode="bottom" border-radius="24" >
            <view class="message_box">
                <view class="officials">
                    <image src="/pages2/static/daily/logo_icon.png" class="offi_icon"></image>
                    <text class="apply">祥粤云学堂申请</text>
                </view>
                <view class="titles">{{ dayExamDetail.subscription == 1 ? '不再订阅消息' : '发送以下消息' }}</view>
                <view class="warns">
                    <u-icon name="checkmark-circle-fill fill_icon" color="#01C65A" size="50"></u-icon>
                    <text class="w_tips">每日刷题提醒</text>
                </view>
                <view class="bottons">
                    <view class="cancel_btn btns" @click="cancel()">取消</view>
                    <view class="confirm_btn btns" @click="confirm()">确定</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            weekLists: ['日','一','二','三','四','五','六'],
			date_num: [],
            curYear: 0, // 当前年份
            curMonth: 0, // 当前月份
            goodsId: '',
            orderGoodsId: '',
            dayExamDetail: {}, // 每日一练当天信息试卷
            dayRecordList: [], // 每日一练试卷日历打卡记录
            meassgeModal: false
        }
    },
    onLoad(option) {
        this.goodsId = option.goodsId
        this.orderGoodsId = option.orderGoodsId
    },
    onShow() {
        this.initCalendar()
        this.getToDayExam()
    },
    methods: {
        // 初始化当月日历
        initCalendar() {
            let date = new Date()
			this.curYear = date.getFullYear() //获取当前年份
			this.curMonth = date.getMonth() + 1 //获取当前月份
			let dd = new Date(this.curYear, this.curMonth, 0) //获取当月总天数
			let current_month = []
			// let weekList = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
			for (let i = 1; i <= dd.getDate(); i++) {
				current_month.push({
					date: i,
					week: new Date(date.setDate(i)).getDay(),//获取对应日期的星期
				});
			}
			if (current_month[0].week != 0) {
				for (let index = 0; index < 2; index++) {
					let item = {
						date: '',
						week: index
					}
					current_month.splice(index, 0, item)
				}
			}
			this.date_num = current_month
            this.getDailyRecord()
        },
        // 获取每日一练当天的试卷信息
        getToDayExam() {
            // ${this.goodsId || 990}
            this.$http({
				url: `/bank/question/getToDayExam/${this.goodsId}`,
				method: 'get',
			}).then((res) => {
                if (res.data.code == 200) {
                    this.dayExamDetail = res.data && res.data.data || {}
                }
            })
        },
        // 获取每日一练试卷日历打卡记录
        getDailyRecord() {
            this.$http({
                url: '/bank/question/get/special/record',
                method: 'get',
                data: {
                    goodsId: this.goodsId,
                }
            }).then((res) => {
                if (res.data.code == 200) {
                    let data = res.data.data || []
                    this.dayRecordList = data.map((item) => {
                        let day = 0
                        if (item.recordTime) {
                            day = new Date(item.recordTime * 1000).getDate()
                        }
                        return {
                            ...item,
                            day: day
                        }
                    })
                    if (this.dayRecordList.length) {
                        this.date_num.forEach((item, index) => {
                            let findV = this.dayRecordList.find(e => e.day == item.date)
                            if (findV) {
                                this.$set(this.date_num[index], 'sign', true)
                            } else {
                                this.$set(this.date_num[index], 'sign', false)
                            }
                            
                        })
                    }
                }
            })
        },
        goPractice() {
            const { examId, moduleExamId = 0, chapterExamId = 0 } = this.dayExamDetail
            uni.navigateTo({
                url:'/pages2/bank/questionBank?orderGoodsId='+ this.orderGoodsId + '&id=' + examId + '&goodsid=' + this.goodsId 
                +'&moduleId=' + moduleExamId + '&chapterId=' + chapterExamId + '&entryType=daily'
            })
        },
        confirm() {
            this.$http({
                url: '/bank/question/today/exam/subscription',
                method: 'post',
                data: {
                    goodsId: this.goodsId,
                    orderGoodsId: this.orderGoodsId,
                    subscriptionStatus: this.dayExamDetail.subscription == 0 ? 1 : 0,
                }
            }).then((res) => {
                if (res.data.code == 200) {
                    let msg = this.dayExamDetail.subscription == 0 ? '订阅成功' : '取消订阅成功'
                    this.$u.toast(msg)
                    this.meassgeModal = false
                    let value = this.dayExamDetail.subscription == 0 ? 1 : 0
                    this.$set(this.dayExamDetail, 'subscription', value)
                } else {
                    this.$u.toast('订阅失败，请重新订阅')
                }
            }).catch((err) => {
                this.$u.toast('订阅失败，请重新订阅')
            })
        },
        cancel() {
            this.meassgeModal = false
        },
        // 订阅消息
        getSubscription() {
            this.meassgeModal = true
            
        },
    },
}
</script>

<style lang="scss">
.daily_practice {
    width: 100%;
}
.content_up {
    width: 100%;
    height: 646rpx;
    background: linear-gradient(#3577E8, #FAFAFA);
    padding: 0rpx 26rpx 0rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .reminds {
        width: 100%;
        height: 112rpx;
        border-radius: 14rpx;
        background-color: #fff;
        padding: 0rpx 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 38rpx;
        margin-bottom: 26rpx;
    }
    .remind_lefts {
        display: flex;
        align-items: center;
    }
    .logo_icon {
        width: 88rpx;
        height: 88rpx;
        margin-right: 16rpx;
    }
    .left_infos {
        display: flex;
        flex-direction: column;
        .one {
            font-size: 32rpx;
            font-family: PingFang SC-Heavy, PingFang SC;
            font-weight: 800;
            color: #222222;
            margin-bottom: 2rpx;
        }
        .two {
            font-size: 24rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #999999;
        }
    }
    .subscription {
        width: 136rpx;
        height: 64rpx;
        line-height: 64rpx;
        text-align: center;
        background: #07C160;
        border-radius: 8rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 800;
        color: #FFFFFF;
    }

    .punch_days {
        width: 100%;
        height: 470rpx;
        background-color: #fff;
        border-radius: 16rpx;
        .print_day {
            padding: 40rpx 40rpx 6rpx 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .print_left {
            display: flex;
            flex-direction: column;
            .one {
                margin-bottom: 8rpx;
                font-size: 36rpx;
                font-weight: 800;
                color: #556176;
            }
            .two {
                font-size: 26rpx;
                font-weight: 500;
                color: #808DA4;
            }
        }
        .print_right {
            font-size: 28rpx;
            font-weight: 500;
            color: #222222;
            .nums {
                font-size: 76rpx;
                font-family: DIN-Medium, DIN;
                margin-right: 6rpx;
            }
        }
        .middle_line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .half_cir_left {
                width: 16rpx;
                height: 32rpx;
                border-radius: 0rpx 16rpx 16rpx 0rpx;
                background: #D9D9D9;
                opacity: 1;
            }
            .half_cir_rig {
                width: 16rpx;
                height: 32rpx;
                border-radius: 16rpx 0rpx 0rpx 16rpx;
                background: #D9D9D9;
                opacity: 1;
            }
        }
        .examNames {
            width: 100%;
            padding: 0rpx 24rpx 0rpx 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .exam_name {
                width: 440rpx;
                font-size: 32rpx;
                font-weight: 800;
                color: #556176;
                line-height: 38rpx;
            }
            .daily_one {
                width: 160rpx;
                height: 160rpx;
            }
        }
        .learn_btns {
            padding-left: 40rpx;
            .toLearn {
                width: 240rpx;
                height: 88rpx;
                line-height: 88rpx;
                text-align: center;
                background: #3577E8;
                border-radius: 260rpx;
                font-size: 30rpx;
                font-weight: bold;
                color: #FFFFFF;
            }
        }
    }
}

.contents {
    width: 100%;
    height: 100%;
    background-color: #FAFAFA;
    padding: 0rpx 26rpx 100rpx 26rpx;
    .c_title {
        font-size: 32rpx;
        font-weight: 500;
        color: #222222;
        margin-bottom: 34rpx;
        padding-top: 56rpx;
    }
}
.punch_calendar {
    width: 100%;
    background: #ffffff;
	border-radius: 24rpx;
	padding: 38rpx 34rpx 0rpx;
    .card_box {
        width: 100%;
        font-size: 32rpx;
        font-weight: 500;
        color: #222222;
    }
    .t1 {
        color: #007AFF;
        font-size: 24rpx;
    }
    .weeks {
        width: 100%;
        display: flex;
        justify-content:center;
        margin-top: 32rpx;
        margin-bottom: 24rpx;
    }
    .card_date {
        width: 14%;
        text-align: center;
        color: #7f8caf;
        font-size: 26rpx;
        font-weight: 500;
        color: #888691;
    }
    .day_dailys {
        width: 100%;
        display: flex;
        margin-top: 40rpx;
        flex-wrap: wrap;
    }
    .date_nums {
        width: 14%;
        text-align: center;
        position: relative;
        display: inline-block;
        margin-bottom: 32rpx;
        .date_items {
            width: 100%; 
        }
        .pun_icon {
            width: 48rpx;
            height: 48rpx;
        }
    }   
}
// 订阅消息弹窗
.message_box {
    width: 100%;
    height: 756rpx;
    background-color: #fff;
    padding: 64rpx 56rpx 0rpx;
    .officials {
        display: flex;
        align-items: center;
        margin-bottom: 48rpx;
        .offi_icon {
            width: 56rpx;
            height: 56rpx;
            margin-right: 56rpx;
        }
        .apply {
            font-size: 32rpx;
            font-weight: 500;
            color: #222222;
        }
    }
    .titles {
        font-size: 36rpx;
        font-weight: bold;
        color: #222222;
        margin-bottom: 48rpx;
    }
    .warns {
        padding: 38rpx 0rpx;
        border-top: 2rpx solid #E9E9E9;
        border-bottom: 2rpx solid #E9E9E9;
        display: flex;
        align-items: center;
        .w_tips {
            margin-left: 24rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: #666666;
        }
    }
    .bottons {
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin-top: 160rpx;
        .btns {
            width: 252rpx;
            height: 84rpx;
            line-height: 84rpx;
            text-align: center;
            border-radius: 16rpx;
            font-size: 36rpx;
            font-weight: 500;
        }
        .confirm_btn {
            background: #01C65A;
            color: #FFFFFF;
        }
        .cancel_btn {
            color: #01C65A;
            background: #F1F1F1;
        }
    }
}
.no_datas {
    width: 100%;
    height: 100vh;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    // justify-content: center;
    flex-direction: column;
    .empty_status {
        width: 160rpx;
        height: 160rpx;
        margin-bottom: 14rpx;
        margin-top: 300rpx;
    }
    .word_tip {
        font-size: 30rpx;
        color: #888691;
    }
}
</style>