MiniPrograms/pages/tab_work/tab_work.vue

<template>
	<view class="page_view">
		<!-- 统计 -->
		<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="navWorkStats">
						<view class="card_info">
							<view :class="item.icon"></view>
							<view class="title">{{item.title}}</view>
						</view>
						<view class="chart_box">
							<qiun-data-charts :type="item.type" :chartData="item.data" />
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 统计卡片 -->
		<view class="card_view">
			<view class="total_card" style="background-color:#f9c752">
				<view class="flex_cloumn" style="justify-content: space-around;margin: 20rpx 0 20rpx 20rpx;">
					<view class="flex_baseline">
						<text class="_title">今日作业</text>
						<text class="_title" style="margin-left: 20rpx;">{{workData.length}}</text>
						<text class="_unit">例</text>
					</view>
					<view class="flex_baseline">
						<text class="_subtitle">已完成</text>
						<text class="_subtitle" style="margin-left: 20rpx;">{{finishData.length}}</text>
						<text class="_unit">例</text>
					</view>
					<view class="flex_baseline">
						<text class="_subtitle">完成情况</text>
						<text class="_subtitle" style="margin-left: 20rpx;font-weight: bold;">{{performance}}</text>
					</view>
				</view>
				<view class="image" :style="{backgroundImage:`url(${image})`}"></view>
			</view>
			<!-- 列表卡片 -->
			<view class="card_item" style="width: 100%;">
				<view class="card_title">
					<view class="front_tag"></view>
					<view class="title">今日作业</view>
					<view class="flex_row" style="margin: 0 0 0 auto;" @click="navWorkList" v-if="workData.length != 0">
						<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"
						:style="{borderImage: item.work.progress === 'finish'?none:'linear-gradient(to right, #f9c752, #FFF) 1'}"
						v-for="(item,index) in workData" :key="index" @click="navWorkData(index)"
						v-if="workData.length != 0">
						<view class="flex_row" style="margin: 0 20rpx;">
							<view class="t-icon t-icon-workicon" style="width: 60rpx; height: 60rpx;"></view>
							<view class="flex_cloumn">
								<view class="flex_row">
									<view class="class_item_title">{{item.work.name}}</view>
									<view class="tag_fill" style="background-color: #f9c752;">
										<view class="tag_text">{{item.work.scope === 'private' ? '个人':'学校'}}</view>
									</view>
									<view class="tag_fill"
										:style="{backgroundColor: item.work.progress === 'finish'? '#23b46c':'#ff5959'}">
										<view class="tag_text">{{item.work.progress === 'finish' ? '已完成' : '进行中'}}
										</view>
									</view>
								</view>
								<view class="flex_row"
									style="width:510rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis">
									<view class="class_item_subtitle" style="font-size: 26rpx;font-weight: 400;">
										{{item.work.description}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="image_box" v-if="workData.length === 0">
						<view class="detail_image_none" :style="{backgroundImage:`url(${image1})`}"></view>
						<view class="subtitle">今日孩子暂无作业活动</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" v-for="(item,index) in mistakeData" :key="index" @click="navWrongBookInfo(index)">
				<view class="flex_cloumn_book" :style="{backgroundColor: item.color}">
					<view class="book_shadow"></view>

					<view class="book_title">{{item.subject}}</view>

					<view class="flex_cloumn_box">
						<view class="title" style="color: #FFF;font-size: 50rpx;margin-left: auto;">{{item.subject}}
						</view>
						<view class="flex_baseline" style="margin-left: auto;">
							<view class="subtitle" style="font-size: 28rpx;color: #FFF;font-weight: 400;">收录错题</view>
							<view class="subtitle"
								style="color: #FFF;font-weight: 400;font-size: 40rpx;margin-left: 4rpx;">
								{{item.amount}}
							</view>
							<view class="subtitle"
								style="font-size: 28rpx;color: #FFF;font-weight: 400;margin-left: 4rpx;">道</view>
						</view>
					</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_children', ['workData', 'mistakeData']),
			...mapState('m_chart', ['workChartData'])
		},
		data() {
			return {
				cardList: [{
					icon: 't-icon t-icon-gongzuo',
					title: '近期作业完成率',
					type: 'mini-column',
					data: ''
				}, {
					icon: 't-icon t-icon-renzheng',
					title: '近期作业得分率',
					type: 'mini-area',
					data: ''
				}],
				image: 'https://ouch-cdn2.icons8.com/AVOwJ9emg_ZOeHvQaunQAZlgeLsG-b1cGhiYvgoJ06g/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvNTAw/LzI5YjU1YWQ4LWMw/YTEtNDE1MS1iYmQw/LWIyMDdhYmRkOTE0/Mi5wbmc.png',
				//完成情况
				performance: '',
				//完成数据
				finishData: '',
				finishRate: '',
				timeStamp: '',
				image1: 'https://image.meiye.art/pic_16314118207650DBDbJB8Ao3fE8_1bY3Fj',
			};
		},
		onLoad() {
			this.init()
		},
		//刷新页面
		onPullDownRefresh() {
			this.init()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//初始化
			init() {
				this.timeStamp = (new Date()).format("hh:mm")
				this.$initWork()
				this.getWorkChartData()
				this.getPerformance()
			},
			//获得作业图表信息
			getWorkChartData() {
				this.cardList[0].data = this.workChartData[0]
				this.cardList[1].data = this.workChartData[1]
			},
			//获得评判信息
			getPerformance() {
				if (this.workData.length != 0) {
					this.finishData = this.workData.filter(x => x.work.progress === 'finish')
					this.finishRate = (this.finishData.length * 100 / this.workData.length).toFixed(0)
					this.performance = this.finishData.length / this.workData.length >= 0.4 ?
						(this.finishData.length / this.workData.length >= 0.7 ? '优秀' : '良好') : '较差'
				} else {
					this.finishData = []
					this.finishRate = 0
					this.performance = '无作业'
				}
			},
			navWorkStats() {
				uni.navigateTo({
					url: '/subpkg/statslist/workstats'
				})
			},
			navWorkList() {
				let value = this.finishRate
				uni.navigateTo({
					url: `/subpkg/datalist/worklist?value=${value}`
				})
			},
			navWorkData(index) {
				uni.navigateTo({
					url: `/subpkg/datalist/workdata?index=${index}`
				})
			},
			navWrongBookInfo(index){
				uni.navigateTo({
					url: `/subpkg/work/wrongbookinfo?index=${index}`
				})
			}
		}
	}
</script>

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

	.bg1 {
		background-color: $color-yellow;
	}

	.flex_row {
		margin: 5rpx 20rpx;
	}

	.tag_fill {
		background-color: $color-pink;
		margin-left: 20rpx;
	}

	.image {
		top: -50rpx;
	}

	.circle_line1 {
		background-image: linear-gradient(to right, #f9c752, #f9c752), linear-gradient(90deg, #FFF -50%, rgba(255, 255, 255, 0.0));
	}

	.circle_line2 {
		background-image: linear-gradient(to right, #f9c752, #f9c752), linear-gradient(180deg, #FFF -50%, rgba(255, 255, 255, 0.0));
	}

	.circle_line3 {
		background-image: linear-gradient(to right, #f9c752, #f9c752), linear-gradient(0deg, #FFF -50%, rgba(255, 255, 255, 0.0));
	}

	.scroll_view_bottom {
		white-space: nowrap;
		height: 350rpx;

		._item {
			margin: 4rpx 20rpx 0 20rpx;
			display: inline-block;
			vertical-align: top;
			background-color: #FFF;
			border-radius: $border-radius;
			height: 300rpx;
			width: 240rpx;
			z-index: 55;
			box-shadow: 1px 0px 2px #ffffff, 2px -1px 2px #d2d2d2, 3px -2px 2px #b4b4b4;
		}
	}

	.flex_cloumn_book {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

	.book_title {
		position: absolute;
		margin-top: 60rpx;
		margin-left: 80rpx;
		font-size: 130rpx;
		font-weight: 600;
		color: #FFF;
		opacity: 0.2;
		writing-mode: vertical-lr;
	}

	.book_shadow {
		position: absolute;
		margin-left: 20rpx;
		height: 300rpx;
		width: 20rpx;
		background-image: linear-gradient(to right, rgba(105, 105, 105, 0.1), rgba(255, 255, 255, 0.1));
	}

	.flex_cloumn_box {
		display: flex;
		flex-direction: column;
		height: 100rpx;
		width: 200rpx;
		margin: 160rpx 20rpx 40rpx 20rpx;
		justify-content: space-between;
		z-index: 99;
	}
</style>