pbl-student-table/src/components/index.vue

<template>
	<div class="pb_content">
		<div class="pb_content_body">
			<div class="student_head">
				<!-- <img src="../assets/banner.png" alt="" /> -->
				<el-carousel trigger="click" style="width: 100%; height: 300px">
					<el-carousel-item v-for="item in bannerList" :key="item.id">
						<!-- <h3 class="small">{{ item }}</h3> -->
						<img
							class="imgS"
							:src="item.poster"
							alt=""
							@click.stop="
								goTo('/courseDetail?courseId=' + item.url + '&userid=' + userid + '&oid=' + oid)
							"
						/>
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="body_student">
				<div class="student_body">
					<div class="top">
						<div :class="{ active: 0 == zoneListId }" @click="selectAll()">
							所有课程
						</div>
						<div
							:class="{ active: item.id == zoneListId }"
							v-for="(item, index) in zoneList"
							:key="index"
							@click="checkZone(item.id)"
						>
							{{ item.name }}
						</div>
					</div>
					<div>
						<div class="main_box">
							<div
								class="box_course"
								v-for="(item, index) in zoneClass"
								:key="index"
							>
								<div class="wheel">
									<img
										:src="
											item.cover
												? JSON.parse(item.cover)[0].url
												: require('../assets/wheel.png')
										"
										alt=""
									/>
								</div>
								<div class="middle_white">
									<div class="textOverflow">{{ item.title }}</div>
									<div class="people">
										<div class="man">
											<img src="../assets/people.png" alt="" />
										</div>
										<div>
											{{
												item.pNum != null && item.pNum != "" ? item.pNum : "0"
											}}人学习
										</div>
									</div>
								</div>
								<div
									class="now_study"
									@click="
										goTo(
											'/courseDetail?courseId=' +
												item.courseId +
												'&userid=' +
												userid + '&oid=' + oid
										)
									"
								>
									立即学习
								</div>
							</div>
							<div class="course_empty" v-if="zoneClass.length == 0">
								暂无数据
							</div>
						</div>
					</div>
					<div class="student_page" style="margin: 15px 0 0">
						<el-pagination
							background
							layout="prev, pager, next"
							:page-size="10"
							:total="total"
							v-if="page && zoneListId != 0"
							@current-change="handleCurrentChange"
						>
						</el-pagination>
						<el-pagination
							background
							layout="prev, pager, next"
							:page-size="10"
							:total="total"
							v-if="page && zoneListId == 0"
							@current-change="handleCurrentChange1"
						>
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				zoneList: [],
				zoneClass: [],
				page: 1,
				total: 0,
				isListAjax: false,
				zoneListId: "",
				bannerList: [],
				userid: this.$route.query.userid,
				oid: this.$route.query.oid,
			};
		},
		methods: {
			goTo(path) {
				this.$router.push(path);
			},
			getZone() {
				this.ajax
					.get(this.$store.state.api + "getZone", "")
					.then((res) => {
						console.log(res.data[0]);
						this.zoneList = res.data[0];
						// this.zoneListId = this.zoneList[0].id;
						// this.getZoneClass(this.zoneList[0].id);
						this.selectAll();
					})
					.catch((err) => {
						console.error(err);
					});
			},
			//获取专区下的课程
			getZoneClass(zid) {
				this.isListAjax = true;
				const loading = this.openLoading(document.querySelector(".main_box"));
				let params = {
					bid: zid,
					oid: this.oid,
					page: this.page,
				};
				this.ajax
					.get(this.$store.state.api + "getZoneClassStudent", params)
					.then((res) => {
						loading.close();
						this.isListAjax = false;
						this.zoneClass = res.data[0];
						this.total = res.data[0].length ? res.data[0][0].num : 0;
						console.log(this.zoneClass);
					})
					.catch((err) => {
						console.error(err);
					});
			},
			selectAll() {
				this.zoneListId = 0;
				this.isListAjax = true;
				const loading = this.openLoading(document.querySelector(".main_box"));
				let params = {
					oid: this.oid,
					page: this.page,
				};
				this.ajax
					.get(this.$store.state.api + "selectAllCourse", params)
					.then((res) => {
						loading.close();
						this.isListAjax = false;
						this.zoneClass = res.data[0];
						this.total = res.data[0].length ? res.data[0][0].num : 0;
						console.log(this.zoneClass);
					})
					.catch((err) => {
						console.error(err);
					});
			},
			checkZone(id) {
				this.page = 1;
				this.zoneListId = id;
				this.getZoneClass(id);
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getZoneClass(this.zoneListId);
			},
			handleCurrentChange1(val) {
				this.page = val;
				this.selectAll();
			},
			//获取banner
			getBanner() {
				this.ajax
					.get(this.$store.state.api + "getBanner", "")
					.then((res) => {
						this.bannerList = res.data[0];
						console.log(this.bannerList);
					})
					.catch((err) => {
						console.error(err);
					});
			},
		},
		created() {
			this.getZone();
			this.getBanner();
			document.scrollingElement.scrollTop = 0;
		},
	};
</script>

<style scoped>
	.student_head .imgS {
		width: 100%;
		height: 100%;
		cursor: pointer;
	}
	.student_body {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background: #fff;
		padding: 0 0 20px;
	}
	.top {
		padding: 20px 30px 20px 1%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.top div {
		cursor: pointer;
		box-sizing: border-box;
		height: 35px;
		line-height: 35px;
		margin: 0 10px 0 0;
		padding-bottom: 5px;
		width: 80px;
		text-align: center;
	}

	.top .active {
		border-bottom: 3px solid #0e71e6;
	}

	.isactive {
		border-bottom: 3px solid #0e71e6;
	}

	.box_fk {
		width: 8px;
		height: 21px;
		background: #0e71e6;
		margin-right: 5px;
	}
	.wheel {
		width: 100%;
		height: 140px;
	}
	.man {
		width: 16px;
		height: 16px;
	}
	.wheel > img,
	.man > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.box_course {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		margin: 0px 1% 20px;
		width: 18%;
		/*border: 1px solid #cecece; */
		border-radius: 5px;
		overflow: hidden;
		box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
			0px 2px 1px -1px rgb(0 0 0 / 12%);
		justify-content: space-between;
		height: 240px;
	}
	.middle_white {
		font-size: 14px;
		margin: 5px 0 5px 10px;
	}
	.people {
		display: flex;
		margin-top: 5px;
		align-items: center;
	}
	.people > div:nth-child(2) {
		margin-left: 10px;
	}
	.now_study {
		width: 100%;
		height: 40px;
		color: #fff;
		background: #86b8f5;
		text-align: center;
		line-height: 40px;
		font-size: 13px;
		cursor: pointer;
	}
	.now_study:hover {
		background: #658eeb;
	}
	.main_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 0 auto;
	}
	.right_bottom_flex {
		width: 219px;
		height: 144px;
		margin: auto 0;
	}
	.right_bottom_flex > img {
		width: 100%;
		height: 100%;
	}
	.body_student {
		margin: 10px auto;
		width: 98%;
		height: 100%;
	}
	.student_head {
		width: 100%;
		height: 30%;
	}

	.textOverflow {
		padding: 0 5px 0 0px;
		width: 95%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.student_page {
		margin-top: 10px;
	}
	.course_empty {
		width: 100%;
		height: 800px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>