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

<template>
	<view>
		<view class="head">
			<u-search placeholder="搜索课程" :show-action="false" height="80" :disabled="true"
				@click="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="infos-box" v-for="(item,index) in reCoursesList" :key="index"
						@click="gotoUrl('pages/parents/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="photo">
										<u-avatar class="avatar"
											:src="item.headPhoto != null ? item.headPhoto : '../../assets/img/head.png'" size="64">
										</u-avatar>
									</view> -->
									<view class="name-teacher">
										咨询电话：
									</view>
									<!-- <view class="img">
										<img src="../../../assets/img/riLine-smartphone-line@1x.png" alt="">
									</view> -->
									<view class="phone-teacher">
										{{item.consultPhone != null ? item.consultPhone : '暂无'}}
									</view>
								</view>
								<!-- <view class="price">
									
								</view> -->
							</view>
						</view>
					</view>
					
					<u-divider v-if="reCoursesList.length == recordsTotal && recordsTotal != 0" style="margin-top: 10px">没有更多了</u-divider>
					<!-- <view class="title">
						系列全部课程
					</view> -->
					<!-- <view class="details-box">
						<view class="item">
							跆拳道
						</view>
						<view class="item">
							围棋
						</view>
						<view class="item">
							象棋
						</view>
						<view class="item">
							乒乓球
						</view>
						<view class="item">
							篮球
						</view>
						<view class="item">
							足球
						</view>
						<view class="item">
							花式跳绳
						</view>

					</view> -->
				</view>

			</view>
		</view>

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

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

	export default {
		components: {
			ParentsTabbar
		},
		data() {
			return {
				active: 0,
				courseMenu: [],
				reCoursesList: [],
				courseSort: '',
				pageNum: 1,
				pageSize: 5,
				recordsTotal: 0,
				list: [{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}, ],
			}
		},
		onReady() {
			this.getLoadTopCourseSorts();
		},
		onReachBottom() {
			if (this.reCoursesList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			toSearchResult() {
				uni.navigateTo({
					url: '/pages/parents/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.getReCoursesList(true);
			},
			getLoadTopCourseSorts() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				courseApi.loadTopCourseSorts().then((response) => {
					uni.hideLoading();
					this.courseMenu = response.data;
					this.courseSort = response.data[0].id;
					this.getReCoursesList();
				}).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: 66.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;

					}
				}
			}
		}
	}
</style>