zc_saas_h5/pages2/dailyPractice/index.vue

<template>
    <view class="daily_practice">
        <nav-bar title="每日一练"></nav-bar>
        <view class="contents">
            <view class="remind">
                <view>订阅</view>
            </view>
            <view class="insist">
                <view>坚持打卡{{ dayExamDetail.recordCount }} 天</view>
            </view>
            <view class="names">
                <view class="name_title">{{ dayExamDetail.examName || ''}}</view>
                <view class="percentage">
                    <text v-if=" dayExamDetail.examRecord == 1">恭喜你，今天的打卡已完成~</text>
                    <text v-else>打卡进度超过了{{ dayExamDetail.recordPercentage || '0%' }}的学员,快来打卡呀~</text>
                </view>
            </view>
            <view class="toPractice" @click="goPractice()">
                {{ dayExamDetail.examRecord == 1 ? '今日已完成' : '快来做题' }}
            </view>
            <view class="punch_calendar">
                <view class="card_box">
                    {{ 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_num">
                        <view class="items">
                            {{ item.date }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            weekLists: ['日','一','二','三','四','五','六'],
			date_num: [],
            curMonth: 0, // 当前月份
            goodsId: '',
            orderGoodsId: '',
            dayExamDetail: {}, // 每日一练当天信息试卷
            dayRecordList: [], // 每日一练试卷日历打卡记录
        }
    },
    onLoad(option) {
        this.goodsId = option.goodsId
        this.orderGoodsId = option.orderGoodsId
        this.initCalendar()
        this.getToDayExam()
    },
    methods: {
        // 初始化当月日历
        initCalendar() {
            let date = new Date()
			let year = date.getFullYear() //获取当前年份
			this.curMonth = date.getMonth() + 1 //获取当前月份
			let dd = new Date(year, 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.data || {}
                }
            })
        },
        // 获取每日一练试卷日历打卡记录
        getDailyRecord() {
            this.$http({
                url: '/bank/question/get/special/record',
                method: 'get',
                data: {
                    goodsId: this.goodsId,
                    // chapterExamId: this.dayExamDetail.chapterExamId || 0,
                    // moduleExamId: this.dayExamDetail.moduleExamId || 0,
                    // examId: this.dayExamDetail.examId,
                }
            }).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)
                            }
                            
                        })
                    }
                    console.log('this.dayRecordList', this.dayRecordList, this.date_num);
                }
            })
        },
        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'
            })
        },
        
    },
}
</script>

<style lang="scss">
.daily_practice {
    width: 100%;
    padding: 32rpx;
}
.contents {
    .toPractice {
        width: 600rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 32rpx;
        color: #222;
        border: 2rpx solid #666;
    }
}
.punch_calendar {
    width: 100%;
    background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.1);
	border-radius: 22rpx;
	margin-top: 16rpx;
	padding-bottom: 15rpx;
    .card_box {
        height: 60rpx;
        line-height: 60rpx;
        // margin-left: 20rpx;
        text-align: center;
    }
    .t1 {
        color: #007AFF;
        font-size: 24rpx;
    }
    .weeks {
        width: 100%;
        display: flex;
        justify-content:center;
        margin-top: 20rpx;
    }
    .card_date {
        width: 14%;
        text-align: center;
        color: #7f8caf;
    }
    .day_dailys {
        width: 100%;
        display: flex;
        margin-top: 40rpx;
        flex-wrap: wrap;
    }
    .date_num {
        width: 14%;
        text-align: center;
        position: relative;
        display: inline-block;
        margin-top: 20rpx;
        .items {
            width: 100%;
        }
    }
}
</style>