jp-education-student/pages/youth/homePage/homePage.vue

<template>
	<view>
		<view class="navigation">
			<view class="title">
				青年夜校·学员端
			</view>
			<view class="identity">
				<view class="picture">
					<u-avatar class="avatar" :src="form.headPhoto != null ? form.headPhoto : '../../assets/img/head.png'" size="48">
					</u-avatar>
				</view>
				<view class="name">
					{{form.studentName}}
				</view>
			</view>
		</view>
		
		<view class="head">
			<view class="wrap">
				<u-swiper :list="bannerList" v-if="bannerList.length != 0"></u-swiper>
			</view>

		</view>
		<view class="my-app">
			<view class="app-items">
				<view class="item" @click="toClassSchedule">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(89,222,232,1) 1%,rgba(13,186,199,1) 100%)">
						<img src="../../../assets/img/riFill-calendar-2-fill@1x.png" alt="">
					</view>
					<view class="text">
						课程表
					</view>
				</view>
				<!-- <view class="item" @click="toSickNote">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(169,147,255,1) 1%,rgba(129,97,255,1) 100%);">
						<img src="../../../assets/img/riFill-quill-pen-fill@1x.png" alt="">
					</view>
					<view class="text">
						请假
					</view>
				</view> -->
				<view class="item" @click="toMyCourses">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(91,160,242,1) 1%,rgba(26,118,226,1) 100%);">
						<img src="../../../assets/img/riFill-book-open-fill@1x.png" alt="">
					</view>
					<view class="text">
						我的课程
					</view>
				</view>
				<!-- <view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(255,189,96,1) 1%,rgba(255,150,0,1) 100%);">
						<img src="../../../assets/img/riFill-folder-user-fill@1x(1).png" alt="">
					</view>
					<view class="text">
						学员文件
					</view>
				</view> -->
				<view class="item" @click="toPaymentRecord">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(169,147,255,1) 1%,rgba(129,97,255,1) 100%);">
						<img src="../../../assets/img/riFill-bank-card-fill@1x.png" alt="">
					</view>
					<view class="text">
						缴费记录
					</view>
				</view>
				<!-- <view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(255,189,96,1) 1%,rgba(255,150,0,1) 100%);">
						<img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
					</view>
					<view class="text">
						签到记录
					</view>
				</view> -->
				<!-- <view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(89,222,232,1) 1%,rgba(13,186,199,1) 100%);">
						<img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
					</view>
					<view class="text">
						测温记录
					</view>
				</view> -->
				<!-- <view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(91,160,242,1) 1%,rgba(26,118,226,1) 100%);">
						<img src="../../../assets/img/riFill-calendar-2-fill@1x.png" alt="">
					</view>
					<view class="text">
						机构报名
					</view>
				</view> -->
			</view>
		</view>

		<!-- 最近课程 -->
		<view class="course" v-if="courseList.length != 0">
			<view class="title">
				<img src="../../../assets/img/riFill-calendar-todo-fill@1x.png" alt="">最近课程
			</view>
			<view class="course-infos">
				<view class="info-box" v-for="(item,index) in courseList" :key="index"
					@click="gotoUrl('pages/youth/classSchedule/classScheduleDetails?id=' + item.sheetId)">
					<view class="position today" v-if="item.courseDate == day">
						今
					</view>
					<view class="position tomorrow" v-if="item.courseDate == tomorrow">
						明
					</view>
					<view class="class-name">
						{{item.className}}
					</view>
					<view class="location-time">
						<view class="location" style="width: 50%;">
							{{item.classroomName}}
						</view>
						<view class="time">
							{{item.coursePeriods}}
						</view>
					</view>
					<view class="date">
						{{item.courseDate}}
					</view>
				</view>
			</view>
		</view>


		<!-- 课程推荐 -->
		<!-- <view class="recommend">
			<view class="title">
				<view class="title">
					<img src="../../../assets/img/riFill-award-fill@1x.png" alt="">课程推荐
				</view>
			</view>
			<view class="classify">
				<view class="item" v-for="(item,index) in chosenList" :key="index"
					:class="chosenActive == index ? 'chosen' : ''" @click="chosenClick(item,index)">
					{{item.name}}
				</view>
			</view>

			<view class="infos-box" v-for="(item,index) in reCoursesList" :key="index"
				@click="gotoUrl('pages/youth/course/courseDetails?id='+item.course_id+'&classId='+item.class_id)">
				<view class="picture" v-if="item.posterUrl != null">
					<img :src="item.posterUrl" alt="">
				</view>
				<view class="picture" v-else>
					<img src="../../../assets/img/classify1.png" alt="">
				</view>
				<view class="infos">
					<view class="name">
						{{item.className}}
					</view>
					<view class="tips">
						<view class="item" v-if="item.courseDesc != null">
							{{item.courseDesc}}
						</view>
						<view class="item" v-else>
							暂无简介
						</view>
					</view>
					<view class="teacher-price">
						<view class="teacher">
							<view class="name-teacher">
								咨询电话：
							</view>
							<view class="phone-teacher">
								{{item.consultPhone != null ? item.consultPhone : '暂无'}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-divider v-if="reCoursesList.length == recordsTotal && recordsTotal != 0" style="margin-top: 10px">没有更多了</u-divider>
		</view> -->
		<YouthTabbar :current="0" ref="tabbarMain"></YouthTabbar>
	</view>
</template>

<script>
	import * as homePageApi from '@/apis/youth/homePage.js'
	import * as mineApi from '@/apis/youth/mine.js'
	import YouthTabbar from '@/components/YouthTabbar.vue'
	import * as loginApi from '@/apis/login.js'

	export default {
		components: {
			YouthTabbar
		},
		data() {
			return {
				bannerList: [],
				pageNum: 1,
				pageSize: 5,
				recordsTotal: 0,
				tag: '',
				reCoursesList: [],
				chosenList: [],
				chosenActive: 0,
				day: '',
				tomorrow: '',
				weekDate: [],
				weekN: ["一", "二", "三", "四", "五", "六", "日"],
				activeClass: 0,
				weekDate1: '',
				courseList: [],
				form: {
					headPhoto: null
				},
				studentId: '',
				list: [{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}, ],
			}
		},
		onReady() {
			let date = new Date() //当前日期
			this.day = this.getFormatDate(date);
			this.tomorrow = this.getFormatDate(new Date(date.setDate(date.getDate() + 1)));

			this.getInfo();
			// this.getFindByCatalogName();
			// this.getReCoursesList();
			// this.getLoadBannerForShow();
		},
		onReachBottom() {
			if (this.reCoursesList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					uni.hideLoading();
					this.form = response.data.nsStudentInfo;
					this.carhelp.setNsStudentId({studentId: response.data.nsStudentInfo.id});
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getLoadBannerForShow() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				homePageApi.loadBannerForShow().then((response) => {
					uni.hideLoading();
					this.bannerList = response.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore() {
				this.pageNum += 1;
				this.getReCoursesList()
			},
			getReCoursesList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.reCoursesList = [];
					this.pageNum = 1;
				}
				homePageApi.loadCoursesForHomeShow({
					tag: this.tag,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then((res) => {
					uni.hideLoading();
					this.reCoursesList = [
						...this.reCoursesList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getFindByCatalogName() {
				this.chosenList = [];
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				homePageApi.findByCatalogName({
					catalogName: '课程分类标签'
				}).then((response) => {
					uni.hideLoading();
					this.chosenList.push({id: '',name: '全部'});
					var list = response.data;
					for (var i = 0; i < list.length; i++) {
						this.chosenList.push(list[i]);
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			toClassSchedule() {
				uni.navigateTo({
					url: '/pages/youth/classSchedule/classSchedule'
				})
			},
			toSickNote() {
				uni.navigateTo({
					url: '/pages/youth/sickNote/sickNote'
				})
			},
			toMyCourses() {
				uni.navigateTo({
					url: '/pages/youth/mine/myCourses'
				})
			},
			toPaymentRecord() {
				uni.navigateTo({
					url: '/pages/youth/course/paymentRecords'
				})
			},
			getFormatDate(date) {
				let myyear = date.getFullYear();
				let mymonth = date.getMonth() + 1;
				let myweekday = date.getDate();
				if (mymonth < 10) {
					mymonth = "0" + mymonth;
				}
				if (myweekday < 10) {
					myweekday = "0" + myweekday;
				}

				return (myyear + "-" + mymonth + "-" + myweekday);
			},
			chosenClick(item, index) {
				this.chosenActive = index;
				if(index != 0) {
					this.tag = item.name;
				} else {
					this.tag = '';
				}
				this.getReCoursesList(true);
			},
			getLatelyCourseList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				homePageApi.getMyLastSchedules({
					studentId: this.studentId,
					count: 2
				}).then((response) => {
					uni.hideLoading();
					this.courseList = response.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 100px;
	}

	.navigation {
		display: flex;
		justify-content: space-between;
		height: 44px;
		background-color: rgba(13, 186, 199, 1);
		padding: 0 16px;

		.title {
			line-height: 44px;
			color: #ffffff;
			font-size: 20px
		}

		.identity {
			display: flex;
			align-items: center;

			.picture {
				width: 24px;
				height: 24px;
				border-radius: 50px;
				overflow: hidden;
				margin-right: 4px;

				img {
					width: 100%;
					height: 100%;
					vertical-align: middle;
				}

			}

			.name {
				margin-right: 4px;
				color: rgba(255, 255, 255, 1);
			}

			.icon {
				img {
					vertical-align: middle;
				}
			}
		}


	}

	.head {
		background: linear-gradient(179.89deg, rgba(13, 186, 199, 1) 61.7%, rgba(244, 246, 246, 1) 97.7%);
		padding-bottom: 100px;

		.wrap {
			padding: 16px;
		}

	}


	.my-app {
		margin: -100px 16px 16px 16px;
		border-radius: 12px 12px 0px 0px;
		padding: 16px;
		background-color: #fff;


		.app-items {
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 40rpx;

				.icon-box {
					width: 40px;
					height: 40px;
					text-align: center;
					border-radius: 8px;
					position: relative;

					.count {
						width: 28px;
						height: 16px;
						line-height: 16px;
						border-radius: 50px;
						background-color: rgba(238, 49, 56, 1);
						color: rgba(255, 255, 255, 1);
						font-size: 10px;
						text-align: center;
						position: absolute;
						top: -16rpx;
						right: -28rpx;
					}

					img {
						margin: 8px 0;


					}
				}

				.text {
					margin-top: 16rpx;
				}
			}
		}

	}

	// 最近课程
	.course {

		margin: auto;
		margin-top: 16px;
		width: 91.4%;

		.title {
			height: 20px;
			line-height: 20px;
			margin-bottom: 14px;
			color: #333333;
			font-weight: bold;

			img {
				vertical-align: middle;
				margin-right: 8px;
			}
		}

		.course-infos {
			display: flex;
			justify-content: space-between;

			.info-box {
				border-top: 2px solid #0DBAC7;
				background: linear-gradient(to right, #E4F8E3, #dcf5f6);
				width: 47.8%;
				padding: 24rpx 0 14rpx 24rpx;
				box-shadow: 2px 2px 2px 2px #e7e9e9;
				border-radius: 8px;
				position: relative;

				.position {
					width: 48rpx;
					height: 40rpx;
					line-height: 40rpx;
					position: absolute;
					top: 0;
					right: 16rpx;
					text-align: center;
					border-radius: 0px 0px 4px 4px;
					font-size: 12px;
					color: #fff;
				}

				.today {
					background-color: #0DBAC7;
				}

				.tomorrow {
					background-color: #0086FF;
				}

				.class-name {
					height: 20px;
					color: rgba(51, 51, 51, 1);
					font-size: 14px;
				}

				.location-time {
					margin-top: 8rpx;
					display: flex;
					justify-content: start;
					color: rgba(119, 119, 119, 1);
					font-size: 12px;

					.time {
						margin-left: 8rpx;
					}
				}

				.date {
					color: rgba(119, 119, 119, 1);
					font-size: 12px;
					margin-top: 8rpx;
				}
			}

			.info-box2 {
				border-top: 2px solid #0086FF;
			}
		}
	}

	.recommend {
		margin: 32px 16px;

		.title {
			height: 20px;
			line-height: 20px;
			margin-bottom: 14px;
			color: #333333;
			font-weight: bold;

			img {
				vertical-align: middle;
				margin-right: 8px;
			}
		}

		.classify {
			display: flex;
			margin-bottom: 24px;

			.item {
				border-radius: 12px;
				line-height: 32px;
				background-color: rgba(255, 255, 255, 1);
				color: rgba(119, 119, 119, 1);
				text-align: center;
				border: 1px solid rgba(204, 204, 204, 1);
				padding: 0 8px;
				margin-left: 12px;
			}

			.chosen {
				border: 1px solid rgba(13, 186, 199, 1);
				color: rgba(13, 186, 199, 1);
			}
		}

		.infos-box {
			border-radius: 12px;
			background-color: rgba(255, 255, 255, 1);
			padding: 12px;
			margin-bottom: 12px;
			display: flex;

			.picture {
				width: 200rpx;
				height: 200rpx;
				border-radius: 4px;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.infos {
				flex: 1;
				margin-left: 12px;

				.name {
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
				}
				
				.name-teacher {
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
					width: 55%;
				}
				
				.phone-teacher {
					margin-right: 8px;
				}

				.tips {
					display: flex;
					margin-top: 8px;

					.item {
						padding: 0 8px;
						line-height: 20px;
						border-radius: 4px;
						background-color: rgba(241, 243, 244, 1);
						color: rgba(16, 16, 16, 1);
						font-size: 12px;
						margin-right: 8px;
					}
				}

				.teacher-price {
					margin-top: 44rpx;
					// display: flex;
					// justify-content: space-between;
					// align-items: center;

					.teacher {
						display: flex;
						// align-items: center;

						.photo {
							// width: 32px;
							// height: 32px;
							// border-radius: 50px;
							// overflow: hidden;
							margin-right: 8px;

							img {
								width: 100%;
								height: 100%;
							}
						}
						
						.img {
							width: 32rpx;
							height: 32rpx;
							margin-left: 16rpx;
						
							img {
								width: 100%;
								height: 100%;
						
							}
						}
					}

					.price {
						color: rgba(119, 119, 119, 1);
					}
				}
			}
		}
	}
</style>