saas_miniprogram/pages/index/index.vue

<template>
	<view class="index">
		<u-navbar :is-back="false" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
			<view class="slot-wrap">
				<image  src="/static/logo2.png"></image>
			</view>
		</u-navbar>
		<u-swiper :list="list" @change="e => current = e.current" :autoplay="false"></u-swiper>
		<view class="content">
			<view class="notice">
				<image src="/static/icon/msg_icon1.png" class="icon"></image>
				<view class="text">
					您有2条新的通知
				</view>
				<view class="btn">立即查看</view>
			</view>
			<view>
				<!-- 日历-->
				<view class="calendar_card">
					<view class="card_box">
						<u-row gutter="16">
							<u-col span="11" v-if="false">
								<view>
									<text class="t1">距离</text> 
									<text class="t2">二级建造师</text>
									<text class="t1">考试</text>
									<text class="t3">365</text>
									<text class="t1">天,继续加油哦！</text>
								</view>
							</u-col>
							<u-col offset="11" span="1">
								<view @click="jumpPlan"><image src="/static/more.png" class="img_more"></image></view>
							</u-col>
						</u-row>
					</view>
					<u-line color="#EEEEEE" />
					<view style="width: 100%;display: flex;justify-content:center;margin-top: 20rpx;">
						<view v-for="(item, index) in date" :key="index" class="card_date">{{ item }}</view>
					</view>
					<view style="width: 100%;display: flex;justify-content:center;margin-top: 40rpx;">
						<view v-for="(item, index) in date_num" :key="index" class="date_num">
							<view v-if="item.color == 0" class="date_num_color0" v-show="item.date > 0">
								{{ item.date }}
								<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
								<view v-if="item.dot" class="date_dot"></view>
							</view>
							<view v-if="item.color == 1" class="date_num_color1">
								{{ item.date }}
								<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
								<view v-if="item.dot" class="date_dot"></view>
							</view>
							<view v-if="item.color == 2" class="date_num_color2">
								{{ item.date }}
								<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
								<view v-if="item.dot" class="date_dot"></view>
							</view>
							<view v-if="item.color == 3" class="date_num_color3">
								{{ item.date }}
								<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
								<view v-if="item.dot" class="date_dot"></view>
							</view>
						</view>
					</view>
					<view style="width: 100%;margin-top: 20rpx;" v-if="workList.length > 0">
						<u-row gutter="16">
							<u-col span="2" text-align="center">
								<view><image src="/static/left.png" class="arr-icon" @click="preveItem"></image></view>
							</u-col>
							<u-col span="8" text-align="center">
								<view class="course_title" @click="jumpCourseDetail()">{{ workList[0].goodsName }}</view>
							</u-col>
							<u-col span="2" text-align="center">
								<view><image src="/static/right.png" class="arr-icon" @click="nextItem"></image></view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
			<u-tabs class="tabs" :current="tabCurrent" @change="tab" :list="list1" :activeStyle="{fontSize:'36rpx'}" :inactiveStyle="{color:'#EAEEF1',fontSize:'30rpx'}" sticky></u-tabs>
			<view class="course-list">
				<view class="item" v-for="item in 3">
					<view class="img">
						<image src="/static/wd_bg_login.jpg"></image>
						<view class="time">2020</view>
					</view>
					<view class="text">
						<view class="title">施工现场专业人员岗位培训基础班（设备安装质量员）</view>
						<view class="desc">
							<view class="left">
								60
								<text>学时</text>
							</view>
							<view class="right">¥ 999.00</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			list:[
				'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				'https://cdn.uviewui.com/uview/swiper/swiper1.png',
			],
			tabCurrent:0,
			date:['日','一','二','三','四','五','六'],
			date_num: [],
			current:0,
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			list1: [{
					name: '推荐课程',
				}, {
					name: '推荐题库',
				}],
			goodsIndex: 0,
			workList: [],
			workTextList: []
		};
	},
	onPullDownRefresh() {},
	onLoad(option) {
		this.init()
	},
	onShow() {
		/* if(this.current === 2 && this.$method.isLogin()){
			this.$refs.refMy.init();
		} */
	},
	onShareAppMessage(res) {
		var self = this;
		return {
			title: '中正',
			path: `/pages/index/index?inviteCode=` + userInfo == null ? '' : userInfo.userAccount
		};
	},
	methods: {
		jumpPlan() {
			if (!this.$method.isLogin()) {
				this.$navTo.togo('/pages/login/login');
			} else {
				this.$navTo.togo('/pages2/plan/index', {});
			}
		},
		init() {
			if (!this.$method.isLogin()) {
				//未登录
				this.date_num = [];
				this.workList = [];
				this.initDay();
			} else {
				this.date_num = [];
				this.workList = [];
				this.userPlanSeven();
			}
		},
		getMonDate() {
			var d = new Date(),
				day = d.getDay(),
				date = d.getDate();
			if (day == 0) return d;
			else d.setDate(date - day);
			return d;
		},
		initDay() {
			// d是当前星期一的日期对象
			var d = this.getMonDate();
			var arr = [];
			let date = new Date();
			let num = date.getDate();
			for (var i = 0; i < 7; i++) {
				let item = { date: d.getDate() };
				item.color = 0;
				if (d.getDate() == num) {
					item.color = 3;
				}
				this.date_num.push(item);
				d.setDate(d.getDate() + 1);
			}
		},
		userPlanSeven() {
			let self = this;
			this.$api.userPlanSeven().then(result => {
				if (result.data.data.length>0) {
					
					self.workList = result.data.data[0].goodsVos;
					if (self.workList != null && self.workList.length > 0) {
						self.courseItem = self.workList[self.goodsIndex];
					}
					console.log(self.workList)
					let date = new Date();
					let num = date.getDate();
					let month = date.getMonth() + 1;
					let list = [];
					for (let i = 0; i < result.data.data[0].calendarStudyVo.length; i++) {
						let item = result.data.data[0].calendarStudyVo[i];
						if (item.month == month) {
							list = item.dayStudyList;
						}
					}
					for (let i = 0; i < list.length; i++) {
						let item = list[i];
						item.color = 0;
						if (item.date == num) {
							item.color = 3;
						}
						if (item.perform == 1) {
							item.color = 1;
						}
						if (item.perform == 2) {
							item.color = 2;
						}
						item.note = item.studyCourseKnob;
						if (item.note > 0) {
							item.dot = true;
						}
						self.date_num.push(item);
					}
				} else {
					self.initDay();
				}
			});
		},
		tab(e) {
			this.tabCurrent = e;
		},
		updateHomePlan() {
			this.$refs.home.init();
		},
		beforeSwitch(index) {
			let that = this;
			if (index == 1) {
				this.isClick1 = true;
			}
			if (index == this.current) {
				return false;
			}
			if (!this.$method.isLogin()) {
				if (index == 0 || index == 1) {
					return true;
				} else {
					this.$navTo.togo('/pages/login/login');
					return false;
				}
			} else {
				if (index == 2) {
					this.$refs.refMy.init();
				}
				return true;
			}
		}
	},
	onReachBottom() {},
	computed: { ...mapGetters(['userInfo']) }
};
</script>

<style lang="scss" scoped>
	
.index {
	.slot-wrap {
		width:100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		
		image {
			margin-right:98rpx;
			width: 178rpx;
			height: 31rpx;
		}
	}
	
	.swiper {
		width:100%;
		image {
			width:100%;
		}
		
		.indicator__dot {
			background: rgba(255, 255, 255, 1);
			
			&.indicator__dot--active {
				background: rgba(0, 122, 255, 1);
			}
		}
	}
	
	.content {
		padding:16rpx;
		background: rgba(234, 238, 241, 1);
		
		.notice {
			padding:0 8rpx;
			height: 56rpx;
			background: linear-gradient(-90deg, rgba(255, 209, 0, 0.3), rgba(255, 255, 255, 0.3));
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			
			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
			
			.text {
				flex:1;
				font-size: 24rpx;
				color: #333333;
			}
			
			.btn {
				font-size: 24rpx;
				color: #007AFF;
			}
		}
		
		.date-list {
			margin-top:16rpx;
			width: 718rpx;
			height: 330rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding:18rpx 27rpx;
			
			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #007AFF;
			}
			
			.list {
				margin-top:40rpx;
				display: flex;
				justify-content: space-around;
				
				.item {
					.top {
						text-align: center;
						font-size: 26rpx;
						color: rgba(102, 102, 102, 0.6);
					}
					
					.bottom {
						text-align: center;
						line-height: 48rpx;
						margin-top:30rpx;
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						color:rgba(51, 51, 51, 1);
						font-size: 26rpx;
						position:relative;
						
						&.red {
							color:red;
						}
						
						&.green {
							color:green;
						}
						
						&.blue {
							background: #007AFF;
							color:#fff;
						}
						
						.note {
							width: 30rpx;
							height: 30rpx;
							border: 2rpx solid #FF9500;
							border-radius: 50%;
							position:absolute;
							top:-20rpx;
							right:-20rpx;
							line-height: 28rpx;
							text-align: center;
							color:#FF9500;
							font-size: 26rpx;
						}
						
						.point {
							margin:0 auto;
							width: 8rpx;
							height: 8rpx;
							background: #FF9500;
							border-radius: 50%;
						}
					}
				}
			}
			
			.btns {
				margin-top:50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.left,.right {
					width: 40rpx;
					height: 40rpx;
				}
				
				.center{
					width: 440rpx;
					height: 56rpx;
					background: #FFFFFF;
					box-shadow: 0px 0px 9rpx 1rpx rgba(47, 67, 121, 0.1);
					border-radius: 28rpx;
					color:rgba(255, 149, 0, 1);
					line-height: 56rpx;
					text-align: center;
					font-size: 30rpx;
					margin:0 30rpx;
				}
			}
		}
		
		.tabs {
			
			/deep/  .u-tabs {
				background:none!important;
			}
		}
		
		.course-list {
			background:#fff;
			padding:0 8rpx;
			box-shadow: 0px 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
			border-radius: 16rpx ;
			
			.item {
				padding:8rpx 0;
				border-bottom:1rpx solid #eeeeee;
				display: flex;
				
				.img {
					position:relative;
					margin-right:10rpx;
					border-radius: 16rpx ;
					overflow: hidden;
					width: 320rpx;
					height: 155rpx;
					
					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 {
					flex:1;
					padding-right:10rpx;
					.title {
						font-size: 30rpx;
						color: #333333;
					}
					
					.desc {
						margin-top:40rpx;
						display: flex;
						.left {
							flex:1;
							color:#333;
							font-size: 26rpx;
							
							text {
								font-size: 24rpx;
								color:#999;
							}
						}
						
						.right {
							font-size: 24rpx;
							font-weight: bold;
							color: #FF2D55;
						}
					}
				}
			}
		}
	}
}
.date_dot {
	width: 6rpx;
	height: 6rpx;
	background: #ffcc00;
	border-radius: 50%;
	margin: 0 auto;
}
.date_note {
	border-radius: 50%;
	width: 29rpx;
	height: 29rpx;
	border: 1px solid #ffcc00;
	font-size: 18rpx;
	color: #ffcc00;
	text-align: center;
	display: inline-block;
	position: absolute;
	top: -19rpx;
	right: 9rpx;
}
.circle_num {
	border-radius: 50%;
	width: 29rpx;
	height: 29rpx;
	border: 1px solid #ffcc00;
	font-size: 18rpx;
	color: #ffcc00;
	text-align: center;
	display: inline-block;
	margin: 5rpx;
}
.date_num {
	width: 14%;
	text-align: center;
	position: relative;
	display: inline-block;
	margin-top: 20rpx;
}
.course_title {
	color: #2f4379;
	box-shadow: 0rpx 0rpx 9rpx 1rpx rgba(47, 67, 121, 0.1);
	border-radius: 28rpx;
	width: 100%;
	height: 48rpx;
	line-height: 48rpx;
	overflow: hidden;
	text-overflow:ellipsis; 
	white-space: nowrap;
}
.arr-icon {
	width: 40rpx;
	height: 40rpx;
}
.date_num_color0 {
	color: #32467b;
}
.date_num_color1 {
	color: #34c759;
}
.date_num_color2 {
	color: #ff3b30;
}
.date_num_color3 {
	color: #ffffff;
	background-color: #ffcc00;
	border-radius: 50%;
	width: 40rpx;
	height: 40rpx;
	display: inline-block;
}
.card_date {
	width: 14%;
	text-align: center;
	color: #7f8caf;
}
page {
	background: #ffffff;
	font-size: 28rpx;
}
.calendar_card {
	width: 100%;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.1);
	border-radius: 22rpx;
	margin-top: 25rpx;
	padding-bottom: 15rpx;
}
.calendar_card .card_box {
	height: 60rpx;
	line-height: 60rpx;
	margin-left: 40rpx;
}
.calendar_card .t1 {
	color: #7f8caf;
	font-size: 24rpx;
}
.calendar_card .t2 {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #32467b;
	margin: 0 10rpx;
}
.calendar_card .t3 {
	font-size: 30rpx;
	font-weight: bold;
	color: #32467b;
	text-shadow: 0rpx 3rpx 3rpx rgba(0, 0, 0, 0.2);
	margin: 0 10rpx;
}
.img_more {
	width: 26rpx;
	height: 26rpx;
}
.flex-d {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}
.contentZ {
	flex: 1;
	overflow-y: auto;
	padding-left: 35rpx;
	display: flex;
	justify-content: space-around;
}
.contentZ::-webkit-scrollbar {
	display: none;
}
.fots {
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-top: 1rpx solid #eee;
}
.leftBtns {
	font-size: 30rpx;
	color: #32467b;
	font-weight: 500;
}
.right_Btns {
	font-size: 30rpx;
	color: #fff;
	background-color: #32467b;
	border-radius: 24rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	padding: 0rpx 23rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
}
.lzs {
	width: 31%;
	margin: 0rpx 1%;
	max-width: 31%;
}
.tylsz{
	margin-top: 23rpx;
	color: #666;
	font-weight: 400;
	font-size: 24rpx;
}
.tylsz:first-child{
	text-align: center;
}
.activeStys{
	font-weight: bold;
	color: #32467B;
}
</style>