MiniPrograms/pages/tab_home/tab_home.vue

<template>
	<view>
		<view v-if="!isHomeLoad">
			<u-loading-page :loading="true" loadingText="请稍候..." loadingMode="semicircle"></u-loading-page>
		</view>
		<view class="page_view" v-if="isHomeLoad">
			<!-- 成绩统计 -->
			<view class="bg1">
				<view class="circle_line1"></view>
				<view class="circle_line2"></view>
				<view class="circle_line3"></view>
				<top-info :timeStamp="timeStamp"></top-info>
				<scroll-view class="scroll_view" scroll-x="true" :scroll-with-animation="true" scroll-left="0">
					<view class="view_box">
						<view class="scroll_view_item" v-for="(item,index) in cardList" :key="index"
							@click="navTab(index)">
							<view class="card_info">
								<view :class="item.icon"></view>
								<view class="title">{{item.title}}</view>
							</view>
							<view class="chart_box">
								<qiun-data-charts type="arcbar" :chartData="item.data" :canvas2d='true'
									:canvasId='item.canvasId' :opts="item.chartOpts" />
							</view>
						</view>
					</view>

				</scroll-view>
			</view>
			<!-- 通知 -->
			<view class="bg2">
				<view class="notice">
					<u-notice-bar :text="noticeData" bgColor="rgba(65,105,225,0.4)" color="#FFF"
						url="/subpkg/datalist/messagedetail"></u-notice-bar>
				</view>
			</view>
			<!-- 课程 -->
			<view class="card_view">
				<!-- 今日课程模块 -->
				<view class="card_item" style="width: 100%;" v-if="classCurrent != -1">
					<view class="card_title">
						<view class="front_tag"></view>
						<view class="title">今日课程</view>
						<view class="flex_row" style="margin: 0 0 0 auto;" @click="navClassDetail">
							<view class="t-icon t-icon-fenlei"></view>
							<view class="title" style="color: #4169E1;margin-left: 10rpx;">课程列表</view>
						</view>
					</view>
					<view class="class_list">
						<!-- 上上节 -->
						<view class="class_item" v-if="classCurrent === classList.length">
							<view class="flex_row">
								<view class="t-icon t-icon-classicon-copy" style="width: 60rpx; height: 60rpx;"></view>
								<view class="flex_cloumn">
									<view class="flex_row">
										<view class="class_item_title">{{classList[classCurrent - 3].title}}</view>
										<view class="tag">
											<view class="tag_text">{{classList[classCurrent - 3].name}}</view>
										</view>
										<view class="tag">
											<view class="tag_text">{{classList[classCurrent - 3].teacher}}</view>
										</view>
									</view>
									<view class="flex_row">
										<view class="class_item_subtitle">上节</view>
										<view class="class_item_detail" style="font-size: 32rpx;">
											{{classList[classCurrent - 3].time}}
										</view>
									</view>
								</view>

								<view class="class_btn">
									<view class="_text">{{classList[classCurrent - 3].attendance?'已出勤':'未出勤'}}</view>
								</view>

							</view>
						</view>
						<!-- 上节 -->
						<view class="class_item" v-if="classCurrent >= 2">
							<view class="flex_row">
								<view class="t-icon t-icon-classicon-copy" style="width: 60rpx; height: 60rpx;"></view>
								<view class="flex_cloumn">
									<view class="flex_row">
										<view class="class_item_title">{{classList[classCurrent - 2].title}}</view>
										<view class="tag">
											<view class="tag_text">{{classList[classCurrent - 2].name}}</view>
										</view>
										<view class="tag">
											<view class="tag_text">{{classList[classCurrent - 2].teacher}}</view>
										</view>
									</view>
									<view class="flex_row">
										<view class="class_item_subtitle">上节</view>
										<view class="class_item_detail" style="font-size: 32rpx;">
											{{classList[classCurrent - 2].time}}
										</view>
									</view>
								</view>

								<view class="class_btn">
									<view class="_text">{{classList[classCurrent - 2].attendance?'已出勤':'未出勤'}}</view>
								</view>

							</view>
						</view>
						<!-- 当前 -->
						<view class="class_item" style="background-color: #FFF;background: #FFF;">
							<view class="flex_row">
								<view class="t-icon t-icon-classicon-copy" style="width: 60rpx; height: 60rpx;"></view>
								<view class="flex_cloumn">
									<view class="flex_row">
										<view class="class_item_title" style="color: #4169E1;">
											{{classList[classCurrent - 1].title}}
										</view>
										<view class="tag">
											<view class="tag_text">{{classList[classCurrent - 1].name}}</view>
										</view>
										<view class="tag">
											<view class="tag_text">{{classList[classCurrent - 1].teacher}}</view>
										</view>
									</view>
									<view class="flex_row">
										<view class="class_item_subtitle" style="color: #4169E1;">当前</view>
										<view class="class_item_detail" style="font-size: 32rpx;color: #4169E1;">
											{{classList[classCurrent - 1].time}}
										</view>
									</view>
								</view>

								<view class="class_btn" style="background-color: #ff5959;">
									<view class="_text">{{classList[classCurrent - 1].attendance?'课程中':'未出勤'}}</view>
								</view>

							</view>
						</view>
						<!-- 下节 -->
						<view class="class_item" v-if="classCurrent != classList.length">
							<view class="flex_row">
								<view class="t-icon t-icon-classicon-noarrive" style="width: 60rpx; height: 60rpx;">
								</view>
								<view class="flex_cloumn">
									<view class="flex_row">
										<view class="class_item_title">{{classList[classCurrent].title}}</view>
										<view class="tag">
											<view class="tag_text">{{classList[classCurrent].name}}</view>
										</view>
										<view class="tag">
											<view class="tag_text">{{classList[classCurrent].teacher}}</view>
										</view>
									</view>
									<view class="flex_row">
										<view class="class_item_subtitle">下节</view>
										<view class="class_item_detail" style="font-size: 32rpx;">
											{{classList[classCurrent].time}}
										</view>
									</view>
								</view>

								<view class="class_btn" style="background-color: #909399;">
									<view class="_text">未开始</view>
								</view>

							</view>
						</view>
						<!-- 下下节 -->
						<view class="class_item" v-if="classCurrent === 1">
							<view class="flex_row">
								<view class="t-icon t-icon-classicon-noarrive" style="width: 60rpx; height: 60rpx;">
								</view>
								<view class="flex_cloumn">
									<view class="flex_row">
										<view class="class_item_title">{{classList[classCurrent+1].title}}</view>
										<view class="tag">
											<view class="tag_text">{{classList[classCurrent+1].name}}</view>
										</view>
										<view class="tag">
											<view class="tag_text">{{classList[classCurrent+1].teacher}}</view>
										</view>
									</view>
									<view class="flex_row">
										<view class="class_item_subtitle">下节</view>
										<view class="class_item_detail" style="font-size: 32rpx;">
											{{classList[classCurrent+1].time}}
										</view>
									</view>
								</view>

								<view class="class_btn" style="background-color: #909399;">
									<view class="_text">未开始</view>
								</view>

							</view>
						</view>
					</view>
				</view>
				<!-- 插画模块 -->
				<view class="card_item" style="width: 100%;" v-if="classCurrent === -1">
					<view class="card_title">
						<view class="front_tag"></view>
						<view class="title">今日课程</view>
					</view>
					<view class="detail_image" :style="{backgroundImage:`url(${image})`}"></view>
					<view class="class_list">
						<view class="class_item" style="height: 120rpx;">
							<view class="flex_row" style="justify-content: space-around;">
								<view class="class_item_title">{{classList.length === 0 ? '自由安排' : '准备上课'}}</view>
								<view class="tag" style="margin: 0;">
									<view class="tag_text">{{classList.length === 0 ? '无课程' : '已下课'}}</view>
								</view>
								<view class="class_item_subtitle">{{classList.length === 0 ? '假期' : '课间'}}</view>
								<view class="flex_row" @click="navClassDetail">
									<view class="t-icon t-icon-fenlei"></view>
									<view class="class_item_title" style="color: #4169E1;margin-left: 10rpx;">课程列表
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 今日打卡模块 -->
				<view class="card_item" style="height: 300rpx;" @click="navClockStats">
					<view class="flex_row" style="margin: 20rpx 20rpx 0 20rpx;">
						<view class="icon_box" style="width: 110rpx;height: 110rpx; background-color: #d8deff;">
							<view class="t-icon t-icon-a-rilidaka" style="width: 60rpx;height: 60rpx;"></view>
						</view>
						<view class="item_block">
							<view class="subtitle">打卡记录</view>
							<view class="flex_baseline">
								<view class="title" style="transform: skew(-10deg);">{{dayTime.split('月')[0]}}</view>
								<view class="title" style="font-size: 22rpx; margin-left: 10rpx;">月</view>
								<view class="title" style="margin-left: 10rpx;transform: skew(-10deg);">
									{{dayTime.split('月')[1]}}
								</view>
								<view class="title" style="font-size: 22rpx; margin-left: 10rpx;">日</view>
							</view>
						</view>
					</view>
					<view class="flex_row" style="margin: auto 20rpx 20rpx 20rpx;justify-content: space-between;">
						<view class="item_block" style="margin-left: -10rpx;">
							<view class="subtitle">打卡时间</view>
							<view class="title" v-if="clockTime === '无记录'" style="transform: skew(-10deg);">
								{{clockTime}}
							</view>
							<view class="flex_baseline" v-if="clockTime != '无记录'">
								<view class="title" style="transform: skew(-10deg);">
									{{clockTime.split(':')[0].replace('0','')}}
								</view>
								<view class="title" style="font-size: 22rpx; margin-left: 10rpx;">点</view>
								<view class="title" style="transform: skew(-10deg);margin-left: 10rpx;">
									{{clockTime.split(':')[1]}}
								</view>
								<view class="title" style="font-size: 22rpx; margin-left: 10rpx;">分</view>
							</view>

						</view>
						<view class="icon_box" style="width: 110rpx;height: 110rpx;"
							:style="{backgroundColor: clockState === '未打卡' ? '#ff5959':'#4169E1'}">
							<view class="title" style="color: #FFF;font-size: 26rpx;transform: skew(-10deg);">
								{{clockState}}
							</view>
						</view>
					</view>
					<view style="width: 0;height: 0;">
						<view class="image"
							:style="{backgroundImage: clockState === '已打卡'?`url(${image2})`:`url(${image1})`}">
						</view>
					</view>

				</view>
				<!-- 今日出席模块 -->
				<view class="card_item" style="background-color: #f3f4f9;justify-content: space-between;">
					<!-- 当前课程 -->
					<view class="item_box">
						<view class="icon_box" style="background-color: #d8deff; margin-left: 20rpx;">
							<view class="t-icon t-icon-shangke-"></view>
						</view>
						<view class="flex_cloumn"
							style="align-items: center; justify-content: space-around;height: 80rpx;">
							<view class="subtitle" style="font-size: 24rpx;">当前课程</view>
							<view class="title" style="font-size: 32rpx;" v-if="classCurrent!=-1">
								{{classList[classCurrent - 1].name}}
							</view>
							<view class="title" style="font-size: 32rpx;" v-if="classCurrent===-1">无课程</view>
						</view>
						<view v-if="classCurrent != -1">
							<view class="icon_box" style="margin-right: 20rpx;"
								:style="{backgroundColor: classList[classCurrent - 1].attendance ? '#23b46c':'#ff5959'}">
								<view class="subtitle" style="color: #FFF;font-size: 26rpx;transform: skew(-10deg);">
									{{classList[classCurrent - 1].attendance ? '出勤':'缺勤'}}
								</view>
							</view>
						</view>
						<view v-if="classCurrent === -1">
							<view class="icon_box" style="margin-right: 20rpx;background-color: #f9c752;">
								<view class="subtitle" style="color: #FFF;font-size: 26rpx;transform: skew(-10deg);">休息
								</view>
							</view>
						</view>
					</view>
					<!-- 出勤课程统计 -->
					<view class="item_box">
						<view class="icon_box" style="background-color: #d8deff;margin-left: 20rpx;">
							<view class="t-icon t-icon-shangkejilu"></view>
						</view>
						<view class="flex_cloumn"
							style="align-items: center;justify-content: space-around;height: 80rpx;">
							<view class="subtitle" style="font-size: 24rpx;">出勤课程</view>
							<view class="title" style="font-size: 32rpx;" v-if="classCurrent!=-1">{{finishClassNum}} 节
							</view>
							<view class="title" style="font-size: 32rpx;" v-if="classCurrent===-1">无统计</view>
						</view>
						<view v-if="classList">
							<view class="icon_box" style="margin-right: 20rpx;"
								:style="{backgroundColor: classAttendanceQuality === '全勤' ? '#23b46c':'#ff5959'}">
								<view class="subtitle" style="color: #FFF;font-size: 26rpx;transform: skew(-10deg);">
									{{classAttendanceQuality}}
								</view>
							</view>
						</view>
						<view v-if="!classList">
							<view class="icon_box" style="margin-right: 20rpx;background-color: #f9c752;">
								<view class="subtitle" style="color: #FFF;font-size: 26rpx;transform: skew(-10deg);">休息
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 课例列表 -->
				<view class="flex_cloumn" style="margin: 15rpx 0 10rpx 20rpx;">
					<view class="title" style="font-size: 32rpx;">课程推荐</view>
					<view class="bottom_tag"></view>
				</view>
				<view class="flex_row" style="width: 70%;"></view>
			</view>
			<scroll-view class="scroll_view_bottom" scroll-x="true" :scroll-with-animation="true" scroll-left="0">
				<view class="_item_box" v-for="(item,index) in classData" :key="index">

					<view class="column_item_box" v-for="(classItem,i) in item" :key="i">
						<view style="display: flex; width: 100%;height: 100%;">
							<view class="image_item" :style="{backgroundImage: `url(${classItem.coverImage})`}">
							</view>
							<view class="flex_cloumn" style="margin-left: 30rpx;">
								<view class="title">{{classItem.title}}</view>
							</view>
						</view>
					</view>
					
				</view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		computed: {
			...mapState('m_children', ['classList', 'examData', 'workData', 'swapData', 'clockData']),
			...mapState('m_parent', ['userData', 'classData'])
		},
		data() {
			return {
				cardList: [{
					icon: 't-icon t-icon-wenjian',
					title: '今日评测',
					canvasId: 'tab_home_chart1',
					data: {
						"series": [{
							"name": "评测完成率",
							"data": '无评测',
							"color": "#ff8caf"
						}]
					},
					chartOpts: {}
				}, {
					icon: 't-icon t-icon-yaoqing',
					title: '今日作业',
					canvasId: 'tab_home_chart2',
					data: {
						"series": [{
							"name": "作业完成率",
							"data": '无作业',
							"color": "#f9c752"
						}]
					},
					chartOpts: {}
				}, {
					icon: 't-icon t-icon-bianji',
					title: '今日活动',
					canvasId: 'tab_home_chart3',
					data: {
						"series": [{
							"name": "活动完成率",
							"data": '无活动',
							"color": "#FF6D31"
						}]
					},
					chartOpts: {}
				}],
				noticeData: '',
				//当前课程索引
				classCurrent: '',
				//已上课程
				finishClassNum: '',
				//课程缺省image
				image: 'https://image.meiye.art/pic_1631411820764Vm5iw82gnV2lVKWRokFmU',
				//时间戳
				timeStamp: '',
				//今日时间
				dayTime: '',
				//打卡状态
				clockState: '',
				clockTime: '',
				//出勤课程统计信息
				classAttendanceQuality: '',
				//打卡状态image
				image1: 'https://ouch-cdn2.icons8.com/2farWQUdLe8J4mb4oQoEvJpl5OFXtM5P7AZi8nhuOxk/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvOTYz/L2VkZGEwNzAzLTAw/MWYtNGZiZS1hY2I3/LTVlNjRhZGYzNTAx/Mi5zdmc.png',
				image2: 'https://ouch-cdn2.icons8.com/6CkTSZQdyBYaGiqmNJRhbqoYi8QDcLFn-04VEQyQaCo/rs:fit:962:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvNzMz/LzlhYmUzYjIyLTRl/ZGQtNDVkMi1iYWEw/LTVjYjk2NThmNDJi/OC5zdmc.png',
				isHomeLoad: false
			};
		},
		onLoad() {
			this.init()
		},
		//刷新页面
		onPullDownRefresh() {
			this.init()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//初始化页面
			async init() {
				this.dayTime = (new Date()).format('M-d').replace('-', '月')
				this.timeStamp = (new Date()).format("hh:mm")
				await this.$initHome()
				this.getClassCurrent()
				this.getChartData()
				this.getNoticeData()
				this.getClockData()
				this.getClassAttendance()
				this.isHomeLoad = true
			},
			//计算出当前课程
			getClassCurrent() {
				//当前时间戳是否在课程时间段内
				function CompareDate(start, finish) {
					//获得当前时间时间戳
					let timeNow = (new Date()).format("yyyy-MM-dd hh:mm").replace(new RegExp("-", "gm"), "/")
					let timeHaoMiao = (new Date(timeNow)).getTime()
					//获得课程开始结束时间戳
					let today = (new Date()).format("yyyy-MM-dd ")
					let classStart = (today + start).replace(new RegExp("-", "gm"), "/")
					let classFinish = (today + finish).replace(new RegExp("-", "gm"), "/")
					let classStartHaoMiao = (new Date(classStart)).getTime()
					let classFinishHaoMiao = (new Date(classFinish)).getTime()
					//比较
					if (timeHaoMiao < classFinishHaoMiao) {
						if (classStartHaoMiao < timeHaoMiao)
							return true
					}
					return false
				}
				//获取当前课程索引值
				let i = 1
				for (let item of this.classList) {
					let timeArr = item.time.split("-")
					let res = CompareDate(timeArr[0], timeArr[1])
					if (res) {
						break
					}
					i++
				}
				//存入已上课程
				this.finishClassNum = i
				//判断是否不在任意一个时间段内
				if (i > this.classList.length) {
					i = -1
				}
				//判断有无课程
				if (this.classList.length === 0) {
					i = -1
				}
				//存入当前课程索引值
				this.classCurrent = i
				i = 0
			},
			//更新图表数据
			getChartData() {
				//完成数据
				if (this.examData.length != 0) {
					let examFinishData = this.examData.filter(x => x.examInfo.progress === 'finish')
					this.cardList[0].data.series[0].data = parseFloat((examFinishData.length / this.examData.length)
						.toFixed(2))
				}
				if (this.workData.length != 0) {
					let workFinishData = this.workData.filter(x => x.work.progress === 'finish')
					this.cardList[1].data.series[0].data = parseFloat((workFinishData.length / this.workData.length)
						.toFixed(2))
				}
				if (this.swapData.length != 0) {
					let swapFinishData = this.swapData.filter(x => x.vote && x.vote.progress === 'finish')
					swapFinishData.push(...this.swapData.filter(x => x.survey && x.survey.progress === 'finish'))
					this.cardList[2].data.series[0].data = parseFloat((swapFinishData.length / this.swapData.length)
						.toFixed(2))
				}
				//完成率传入图表
				for (let i = 0; i < 3; i++) {
					if (typeof(this.cardList[i].data.series[0].data) === typeof(0)) {
						let opt = {
							title: {
								name: (this.cardList[i].data.series[0].data * 100).toFixed(0) + '%',
								color: this.cardList[i].data.series[0].color
							},
							subtitle: {
								name: this.cardList[i].data.series[0].name
							},
						}
						this.cardList[i].chartOpts = JSON.parse(JSON.stringify(opt))
					} else {
						let opt = {
							title: {
								name: this.cardList[i].data.series[0].data,
								color: this.cardList[i].data.series[0].color
							},
							subtitle: {
								name: this.cardList[i].data.series[0].name
							},
						}
						this.cardList[i].chartOpts = JSON.parse(JSON.stringify(opt))
					}
				}
			},
			//日历数据获取
			getClockData() {
				//获得当前时间时间戳
				let today = (new Date()).format("yyyy-M-dd")
				let timeArr = today.split("-")
				if (this.clockData.length != 0) {
					let val = this.clockData.filter(x => x.year == timeArr[0] && x.month == timeArr[1] && x.date ==
						timeArr[2])
					if (val.length != 0) {
						this.clockState = '已打卡'
						this.clockTime = val[0].time
					} else {
						this.clockState = '未打卡'
						this.clockTime = '无记录'
					}
				} else {
					this.clockState = '未打卡'
					this.clockTime = '无记录'
				}
				// let isWeekend = new Date(today).getDay()
				// if(isWeekend === 0 || isWeekend === 6){
				// 	this.clockState = '放假中'
				// 	this.clockTime = '无需打卡'
				// }
			},
			//获取滚动通知
			getNoticeData() {
				if (this.userData.msgList)
					this.noticeData = `您有 ${this.userData.msgList.length} 条通知,请点击查看`
				if (!this.userData.msgList)
					this.noticeData = `您已查看全部通知`
			},
			//获取出勤课程统计
			getClassAttendance() {
				let finishClassData = []
				for (let i = 0; i < this.finishClassNum; i++) {
					finishClassData.push(this.classList[i])
				}
				if (finishClassData.length != 0) {
					let isAttendArr = finishClassData.filter(x => x.attendance === true)
					this.classAttendanceQuality = isAttendArr.length === this.finishClassNum ? '全勤' : '缺勤'
				}
				// else{
				// 	this.classAttendanceQuality = '假期'
				// }
			},
			//导航
			navClassDetail() {
				uni.navigateTo({
					url: '/subpkg/datalist/classdetail'
				})
			},
			navTab(index) {
				if (index === 0) {
					uni.switchTab({
						url: '/pages/tab_exam/tab_exam'
					})
				}
				if (index === 1) {
					uni.switchTab({
						url: '/pages/tab_work/tab_work'
					})
				}
				if (index === 2) {
					uni.switchTab({
						url: '/pages/tab_swap/tab_swap'
					})
				}
			},
			navClockStats() {
				uni.navigateTo({
					url: '/subpkg/statslist/clockstats'
				})
			}

		}
	}
</script>

<style lang="scss">
	@import '@/pages/style/tab_pages.scss';

	.bg2 {
		margin-top: -1065rpx;
		height: 1200rpx;
		border-radius: 100rpx;
		border-bottom-left-radius: 0;
		background-color: #FFF;
		z-index: 1;

		.notice {
			margin: 1095rpx 50rpx 20rpx 50rpx;
			width: 650rpx;
		}
	}

	.flex_row {
		margin: 10rpx 20rpx;
	}

	.tag {
		margin-left: 20rpx;
	}

	.detail_image {
		margin-top: -80rpx;
	}

	.item_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 140rpx;
		background-color: #FFF;
		border-radius: $border-radius;
	}

	.icon_box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;
		border-radius: 12rpx;
		z-index: 9;

		.t-icon {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.item_block {
		display: flex;
		flex-direction: column;
		width: 190rpx;
		height: 110rpx;
		justify-content: space-around;
		align-items: center;
	}

	.class_btn {
		display: flex;
		align-items: center;
		margin-left: auto;
		border-radius: $border-radius;
		background-color: $color-green;
		padding: 24rpx 12rpx;

		.t-icon {
			width: 32rpx;
			height: 32rpx;
		}

		._text {
			color: #FFF;
			font-size: 24rpx;
			font-weight: bold;
			transform: skew(-10deg);
		}
	}

	.image {
		margin-top: -130rpx;
		margin-left: -20rpx;
		height: 170rpx;
		width: 170rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		opacity: 0.25;
		z-index: 1;
	}

	.scroll_view_bottom {
		white-space: nowrap;
		height: 630rpx;
	}
</style>