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

<template>
	<view>
		<view class="head">
			<u-search placeholder="搜索课程" :show-action="false" height="80" @focus="toSearchResult"></u-search>
		</view>
		<view class="main">
			<!-- <u-swiper :list="list"></u-swiper> -->

			<view class="content">
				<view class="classify">
					<view class="item" v-for="(m,index) in courseMenu" :key="index" :class="active==index ? 'chosen' : ''"
						@click="courseChose(m,index)">
						{{m.name}}
					</view>

				</view>

				<view class="details">
					<view class="classes">
						<view class="item" @click="categorize = 1" :class="categorize==1 ? 'checked' : ''">
							按课程
						</view>
						<view class="item" @click="categorize = 2" :class="categorize==2 ? 'checked' : ''">
							按老师
						</view>
					</view>
					<view class="infos-box2">
						<view class="details-box" v-if="categorize==1">
							<view class="item" v-for="(item,index) in courseBaseList" :key="index"
								@click="toSearchResultById(item)">
								{{item.name}}
							</view>
						</view>
						<view class="teacher-item" v-for="(item,index) in teacherList" :key="index" v-if="categorize==2"
							@click="toTeacherHomepage(item)">
							<view class="photo">
								<u-avatar class="avatar" mode="square"
									:src="item.headPhoto != null ? item.headPhoto : '../../assets/img/head.png'" size="96">
								</u-avatar>
							</view>
							<view class="infos">
								<view class="name">
									{{item.employeeName}}
								</view>
								<view class="course1">
									{{item.introduce}}
								</view>
							</view>
							<view class="more">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</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="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>

			</view>
		</view>

		<YouthTabbar :current="1" ref="tabbarMain"></YouthTabbar>
	</view>
</template>

<script>
	import * as courseApi from '@/apis/youth/course.js'
	import * as homePageApi from '@/apis/youth/homePage.js'
	import YouthTabbar from '@/components/YouthTabbar.vue'

	export default {
		components: {
			YouthTabbar
		},
		data() {
			return {
				active: 0,
				courseMenu: [],
				reCoursesList: [],
				courseSort: '',
				pageNum: 1,
				pageSize: 5,
				recordsTotal: 0,
				current: 0,
				list: [{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}, ],
				courseBaseList: [],
				teacherList: [],
				categorize: 1
			}
		},
		onReady() {
			this.getLoadTopCourseSorts();
		},
		onReachBottom() {
			if (this.reCoursesList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			toSearchResultById(item) {
				uni.navigateTo({
					url: '/pages/youth/search/searchResult?id=' + item.id
				})
			},
			toTeacherHomepage(item) {
				uni.navigateTo({
					url: '/pages/youth/teacherHomepage/teacherHomepage?id=' + item.employeeId
				})
			},
			getCourseBaseListBySortId(courseSortId) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				courseApi.getCourseBaseListBySortId({
					courseSortId: courseSortId
				}).then((response) => {
					uni.hideLoading();
					this.courseBaseList = response.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getTeacherListBySortId(courseSortId) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				courseApi.getTeacherListBySortId({
					courseSortId: courseSortId
				}).then((response) => {
					uni.hideLoading();
					this.teacherList = response.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			toSearchResult() {
				uni.navigateTo({
					url: '/pages/youth/search/searchResult'
				})
			},
			myLoadmore() {
				this.pageNum += 1;
				this.getReCoursesList()
			},
			getReCoursesList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.reCoursesList = [];
					this.pageNum = 1;
				}
				homePageApi.loadCoursesForHomeShow({
					courseSort: this.courseSort,
					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"
					})
				})
			},
			courseChose(m, index) {
				this.active = index;
				this.courseSort = m.id;
				this.categorize = 1;
				// this.getReCoursesList(true);
				this.getCourseBaseListBySortId(m.id)
				this.getTeacherListBySortId(m.id)
			},
			getLoadTopCourseSorts() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				courseApi.loadTopCourseSorts().then((response) => {
					uni.hideLoading();
					this.courseMenu = response.data;
					this.courseSort = response.data[0].id;
					// this.getReCoursesList();
					this.getCourseBaseListBySortId(this.courseSort)
					this.getTeacherListBySortId(this.courseSort)
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		padding: 20px 16px 40px 16px;
		background-color: rgba(13, 186, 199, 1);
	}

	.main {
		background-color: rgba(244, 246, 246, 1);
		border-radius: 20px 20px 0px 0px;
		padding: 20px 16px;
		margin-top: -16px;

		.content {
			display: flex;
			margin-top: 12px;

			.classify {
				background-color: #ffffff;
				border-radius: 12px;
				width: 28%;
				text-align: center;
				height: 1200rpx;
				overflow-y: scroll;

				.item {
					line-height: 32px;
					margin-top: 14px;
					font-size: 16px
				}

				.chosen {
					width: 80.7%;
					margin: 14px auto 0;
					border-radius: 50px;
					background-color: rgba(13, 186, 199, 1);
					color: #ffffff;
					overflow-y: scroll;
				}
			}

			.details {
				margin-left: 12px;
				width: 68.3%;
				height: 1200rpx;
				overflow-y: scroll;

				.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;
						}

						.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;

								.name-teacher {
									color: rgba(51, 51, 51, 1);
									font-size: 16px;
									width: 60%;
								}

								.phone-teacher {
									margin-right: 8px;
								}

								.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);
							}
						}
					}
				}

				.title {
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
					line-height: 44px;
					border-radius: 12px;
					background-color: rgba(255, 255, 255, 1);
					text-align: center;
					font-weight: bold;
				}

				.details-box {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.item {

						width: 44%;
						line-height: 44px;
						border-radius: 12px;
						background-color: rgba(255, 255, 255, 1);
						color: rgba(51, 51, 51, 1);
						margin-top: 12px;
						text-align: center;

					}
				}
			}
		}
	}

	.classes {
		height: 88rpx;
		line-height: 88rpx;
		display: flex;
		background-color: #ffffff;
		margin-bottom: 24rpx;
		border-radius: 12px;
		border: 2px solid rgba(13, 186, 199, 1);
		color: rgba(13, 186, 199, 1);

		.checked {
			background-color: #0DBAC7;
			color: #fff
		}

		.item {
			width: 50%;
			text-align: center;
		}
	}

	.teacher-item {
		width: 100%;
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		padding: 24rpx;

		.photo {
			width: 96rpx;
			height: 96rpx;
			border-radius: 8px;
			overflow: hidden;

			img {
				width: 100%;
			}



		}

		.infos {
			margin-left: 16rpx;

			.name {
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				margin-bottom: 16rpx;
			}

		}

		.course1 {
			color: rgba(119, 119, 119, 1);
			font-size: 28rpx;
			width: 200rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;


		}

		.more {
			margin-left: auto;
		}
	}

	.teacher-box {
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 1);
		padding: 12px;
		margin-bottom: 12px;
		display: flex;
	}
</style>