jp-education-student/pages/youth/search/searchResult.vue

<template>
	<view>
		<view class="search">
			<u-icon name="arrow-left" @click="backCourse"></u-icon>
			<u-search placeholder="输入关键字搜索课程" action-text="查询" v-model="className" @custom="searchClass"></u-search>
		</view>
		<view class="main">
			<view class="result-box" v-for="(item,index) in reCoursesList" :key="index"
				@click="toCourseDetails(item)">
				<view class="picture" v-if="item.posterUrl != null">
					<img :src="item.posterUrl" alt="">
				</view>
				<view class="picture" v-else>
					<img src="../../../assets/img/resultP.png" alt="">
				</view>
				<view class="infos">
					<view class="title">
						{{item.className}}
					</view>
					<view class="tag">
						<view class="item" v-if="item.courseDesc != null">
							{{item.courseDesc}}
						</view>
						<view class="item" v-else>
							暂无简介
						</view>
					</view>
					<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">
							咨询电话：
						</view>
						<view class="phone-teacher">
							{{item.consultPhone != null ? item.consultPhone : '暂无'}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import * as homePageApi from '@/apis/youth/homePage.js'
	
	export default {
		data() {
			return {
				className: '',
				reCoursesList: [],
				courseSortId: ''
			}
		},
		onLoad(op) {
			if(op.id) {
				this.courseSortId = op.id;
				this.getReCoursesList();
			}
		},
		methods: {
			searchClass() {
				if(this.className) {
					this.getReCoursesList();
				}
			},
			backCourse() {
				uni.navigateBack({
					
				})
			},
			getReCoursesList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				homePageApi.loadCoursesForHomeShow({
					courseSortId: this.courseSortId,
					className: this.className,
					pageNum: 1,
					pageSize: 10000
				}).then((res) => {
					uni.hideLoading();
					this.reCoursesList = res.data.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			toCourseDetails(item) {
				uni.navigateTo({
					url: '/pages/youth/course/courseDetails?id='+item.course_id+'&classId='+item.class_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		background-color: #fff;
		padding: 16rpx 24rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		display: flex;

		/deep/.u-icon--right {
			margin-right: 11px;
		}

		/deep/.u-action {
			width: 17.1%;
			text-align: center;
			line-height: 28px;
			border-radius: 50px;
			background-color: rgba(13, 186, 199, 1);
			color: rgba(255, 255, 255, 1);
		}

		/deep/.u-content {
			background-color: rgba(240, 244, 250, 1) !important;
		}

		/deep/.u-input {
			background-color: rgba(240, 244, 250, 1) !important;
		}
	}

	.main {
		margin-top: 120rpx;

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

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

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

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

				.title {
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
					font-weight: bold;
				}

				.tag {
					display: flex;

					.item {
						// width: 128rpx;
						// height: 40rpx;
						line-height: 40rpx;
						border-radius: 8rpx;
						background-color: rgba(241, 243, 244, 1);
						color: rgba(16, 16, 16, 1);
						margin-right: 16rpx;
						margin-top: 24rpx;
						font-size: 12px;
						text-align: center;
					}
				}

				.teacher {
					display: flex;
					align-items: center;
					margin-top: 36rpx;

					.photo {
						width: 64rpx;
						height: 64rpx;
						border-radius: 100rpx;
						overflow: hidden;
						margin-right: 12px;

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

					.name {
						color: rgba(16, 16, 16, 1);
						width: 45%;
					}
					
					.phone-teacher {
						margin-right: 8px;
					}
				}
			}
		}
	}
</style>