zc_saas_h5/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>
		<view class="swiper">
			<swiper :indicator-dots="false" indicator-color="#fff" indicator-active-color="#007AFF" :style="{'height':swiperHeight+'rpx'}" @change="swiperChange" :interval="interval" :duration="duration"  :autoplay="autoplay" :circular="true">
				<swiper-item v-for="(swiper,index) in list" :key="index">
					<image @load="imageLoad" :src="$method.splitImgHost(swiper.adverUrl, true)" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<view class="dots">
				<view class="dot" :class="{'active':index == current}" v-for="(swiper,index) in list" :key="index"></view>
			</view>
		</view>
		<view class="content">
			<view class="notice" v-if="infoNums">
				<view class="notice__content">
					<image src="/static/icon/msg_icon1.png" class="icon"></image>
					<view class="text">
						您有{{infoNums}}条新的通知
					</view>
					<view class="btn" @click="jumpPage">立即查看</view>
				</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="jumpGoodsDetail(goodsItem)">{{ goodsItem.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="menu" :activeStyle="{fontSize:'36rpx'}" :inactiveStyle="{color:'#EAEEF1',fontSize:'30rpx'}" sticky></u-tabs>
			<view class="course-list" v-show="tabCurrent==0">
				<navigator  hover-class="none" class="item" v-for="(item,index) in list1" :key="index" :url="'/pages3/course/detail?id='+item.goodsId">
					<view class="img">
						<image :src="$method.splitImgHost(item.coverUrl, true)"></image>
						<view class="time">{{item.year?item.year:''}}</view>
					</view>
					<view class="text">
						<view class="title">{{item.goodsName}}</view>
						<view class="desc">
							<view class="left">
								{{item.classHours}}
								<text>学时</text>
							</view>
							<view class="right">¥ {{toFixed(item.standPrice)}}</view>
						</view>
					</view>
					
				</navigator>
			</view>
			<view class="course-list" v-show="tabCurrent==1">
			 	<navigator  hover-class="none" class="item" v-for="(item,index) in list2" :key="index" :url="'/pages2/bank/detail?id='+item.goodsId">
					<view class="img">
						<image :src="$method.splitImgHost(item.coverUrl, true)"></image>
						<view class="time">{{item.year?item.year:''}}</view>
					</view>
					<view class="text">
						<view class="title">{{item.goodsName}}</view>
						<view class="desc">
							<view class="left" v-if="false">
								{{item.classHours}}
								<text>学时</text>
							</view>
							<view class="right">¥ {{toFixed(item.standPrice)}}</view>
						</view>
					</view>
					
				</navigator> 
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			infoNums:0,
			list:[],
			tabCurrent:0,
			date:['日','一','二','三','四','五','六'],
			date_num: [],
			current:0,
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			swiperHeight:0,
			menu: [{
					name: '推荐课程',
				}, {
					name: '推荐题库',
				}],
			goodsIndex: 0,
			goodsItem: 0,
			workList: [],
			workTextList: [],
			planGoodsList: [],
			paramList: [
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0,
					goodsType:1
				},
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0,
					goodsType:2
				}
			],
			list1: [],
			list2: [],
			isLogin:false,
			isOld:false
		};
	},
	onPullDownRefresh() {},
	onLoad(option) {
		this.init()
		this.courseList();
		this.bankList();
		this.getAdvertising()
	},
	onShow() {
		if (uni.getStorageSync('updateHome')|| !this.isOld){
			this.isOld = true;
			this.init()
			uni.removeStorageSync('updateHome'); //消费首页刷新事件
		}
		
		if(this.isLogin){
			this.$store.state.allowLoading = false;
			this.$api.getinfoAttached().then(res => {
				if(res.data.code ===200){
					this.infoNums = res.data.data.informSum
					const nums = res.data.data.informSum + res.data.data.orderSum + res.data.data.periodSum + res.data.data.planSum + res.data.data.subscribeSum;
					this.$store.commit('tabNum', nums);
				}
			})
			this.$store.state.allowLoading = true;
		}else{
			this.$store.commit('tabNum', 0);
		}
	},
	onShareAppMessage(res) {
		var self = this;
		return {
			title: '中正',
			path: `/pages/index/index?inviteCode=` + userInfo == null ? '' : userInfo.userAccount
		};
	},
	methods: {
		toFixed(number) {
			if(number > 0) {
				return number.toFixed(2)
			} else {
				return '0.00'
			}
		},
		/**
		 * banner图片加载完成
		 */
		imageLoad(e) {
			let winW = 750;
			let imgW = e.detail.width;
			let imgH = e.detail.height;
			this.swiperHeight = 750 * imgH / imgW;
		},
		async getAdvertising() {
			await this.advertisingHomeLocation();
			await this.advertisingList();
		},
		
		advertisingHomeLocation() {
			return new Promise(resolve => {
				this.$api.advertisingHomeLocation().then(res => {
					this.interval = res.data.data.intervalTime * 1000
					resolve()
				})
			})
		},
		advertisingList() {
			return new Promise(resolve => {
				this.$api.advertisingList().then(res => {
					this.list = res.data.rows;
					resolve()
				})
			})
		},
		jumpPage(){
			this.$navTo.togo('/pages2/msg/index')
		},
		//课程
		courseList() {
			var self = this;
			var param = this.paramList[0];
			this.$api.goodsList(param).then(res => {
				self.paramList[0].total = res.data.total;
				self.list1.push.apply(self.list1, res.data.rows);
				if (self.list1.length === res.data.total) {
					self.paramList[0].showStatus = true;
				}
			});
		},
		//题库
		bankList() {
			var self = this;
			var param = this.paramList[1];
			this.$api.goodsList(param).then(res => {
				self.paramList[1].total = res.data.total;
				self.list2.push.apply(self.list2, res.data.rows);
				if (self.list2.length === res.data.total) {
					self.paramList[1].showStatus = true;
				}
			});
		},
		jumpGoodsDetail(item){
			this.$navTo.togo('/pages2/wd/course', {
				id: item.goodsId,
				gid:item.gradeId
			});
		},
		preveItem() {
			if (this.goodsIndex > 0) {
				this.goodsIndex = this.goodsIndex - 1;
				this.planGoodsList =this.workList[this.goodsIndex].goodsVos
				this.goodsItem = this.planGoodsList[0];
				this.dealRL(this.workList[this.goodsIndex].calendarStudyVo)
			}
		},
		nextItem() {
			if (this.goodsIndex < this.workList.length - 1) {
				this.goodsIndex = this.goodsIndex + 1;
				this.planGoodsList =this.workList[this.goodsIndex].goodsVos
				this.goodsItem = this.planGoodsList[0];
				this.dealRL(this.workList[this.goodsIndex].calendarStudyVo)
			}
		},
		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.planGoodsList = [];
				this.initDay();
			} else {
				this.date_num = [];
				this.workList = [];
				this.planGoodsList = [];
				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();
			this.date_num = []
			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);
			}
		},
		dealRL(calendarStudyVo){
			let self = this
			self.date_num = []
			let date = new Date();
			let num = date.getDate();
			let month = date.getMonth() + 1;
			let list = [];
			for (let j = 0; j < calendarStudyVo.length; j++) {
				let item = calendarStudyVo[j];
				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);
				}
			}
			
		},
		userPlanSeven() {
			let self = this;
			this.$api.userPlanSeven().then(result => {
				if (result.data.data && result.data.data.length>0) {
					
					self.workList = result.data.data
					self.planGoodsList = self.workList[0].goodsVos;
					if (self.planGoodsList != null && self.planGoodsList.length > 0) {
						self.goodsItem = self.planGoodsList[0];
					}
					self.dealRL(result.data.data[0].calendarStudyVo)
					/* 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();
				}
			});
		},
		swiperChange(e) {
			this.current = e.detail.current;
		},
		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%;
		position: relative;
		
		.dots {
			position:absolute;
			left:0;
			bottom:8rpx;
			width:100%;
			display: flex;
			justify-content: center;
			
			.dot {
				width: 8rpx;
				height: 8rpx;
				background: #FFFFFF;
				border-radius: 50%;
				margin:0 4rpx;
				transition: all 0.3s;
				
				&.active {
					width: 24rpx;
					height: 8rpx;
					background: #007AFF;
					border-radius: 4rpx;
				}
			}
		}
		image {
			width:100%;
		}
		

	}
	
	.content {
		overflow: hidden;
		padding:0 16rpx 16rpx;
		background: rgba(234, 238, 241, 1);
		
		.notice {
			background:#fff;
			border-radius: 16rpx;
			margin-top:16rpx;
			overflow: hidden;
			&__content {
				padding:0 8rpx;
				height: 56rpx;
				background: linear-gradient(-90deg, rgba(255, 209, 0, 0.3), rgba(255, 255, 255, 0.3));
				display: flex;
				align-items: center;
			}
			
			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
			
			.text {
				flex:1;
				font-size: 24rpx;
				color: #333333;
				position: relative;
			}
			
			.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:#FF3B30;
						}
						
						&.green {
							color:#36C75A;
						}
						
						&.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;
					position: relative;
					.title {
						font-size: 30rpx;
						color: #333333;
					}
					
					.desc {
						margin-top:40rpx;
						display: flex;
						position: absolute;
						bottom: 0;
						width: 100%;
						.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: 16rpx;
	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>