zz--front/pages2/index/search.vue

<template>
	<view style="padding: 30rpx;">
		<u-search
			class="changes"
			placeholder="搜索课程 题库"
			v-model="searchData"
			shape="square"
			:show-action="true"
			bg-color="#F3F4F6"
			:adjust-position="false"
			:focus="true"
			height="70"
			action-text="取消"
			@clear="changeClear"
			@search="getDatas"
			@custom="backHome"
		></u-search>
		<view class="big_searchBox" v-if="searchStatus">
			<view class="classword" v-if="list1.length">
				<view class="titles">课程</view>
				<view class="listWord">
					<view class="listA" v-for="(item, index) in list1" :key="index" @click="jumpPage(1,item)">{{ item.courseName }}</view>
				</view>
				<view class="moreClassword" v-if="list1.length === 10">
					<view class="left">查看更多课程</view>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
			<view class="classword" v-if="list2.length">
				<view class="titles">题库</view>
				<view class="listWord">
					<view class="listA" v-for="(item, index) in list2" :key="index" @click="jumpPage(2,item)">{{ item.bankName }}</view>
				</view>
				<view class="moreClassword" v-if="list2.length === 10">
					<view class="left">查看更多课程</view>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
			<view class="classword" v-if="list3.length">
				<view class="titles">重点考点</view>
				<view class="listWord">
					<view class="listA" v-for="(item, index) in list3" :key="index" @click="jumpPage(3,item)">{{ item.name }}</view>
				</view>
				<view class="moreClassword" v-if="list3.length === 10">
					<view class="left">查看更多课程</view>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
			<view v-if="list1.length === 0 && list2.length === 0 && list3.length === 0"><u-empty text="暂无搜索结果" mode="list"></u-empty></view>
		</view>
		<view v-else><u-empty text="暂无搜索结果" mode="list"></u-empty></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchData: '',
			list1: [],
			list2: [],
			list3: [],
			searchStatus: false
		};
	},
	onLoad(option) {},
	onShow() {},
	methods: {
		jumpPage(int,item){
				if (int == 1) {
					this.$navTo.togo('/pages2/course/detail', {
						id: item.courseId
					});
					return;
				}
				if (int == 2) {
						this.$navTo.togo('/pages2/bank/detail', {
							id: item.bankId
						});
					return;
				}
				if (int == 3) {
					this.$navTo.togo('/pages2/course/keynote', {
						id: item.fileId
					});
					return;
				}
		},
		// 取消
		backHome() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 搜索框清空
		changeClear() {},
		getDatas() {
				var self = this;
				if(this.searchData.length === 0){
					uni.showToast({
						title: '请输入搜索内容',
						icon: 'none'
					})
					return
				}
				this.gitCourseLists();
				this.gitBankList();
				this.gitNoteLists();
		},
		gitCourseLists() {
			var self = this;
			this.$api
				.courselist({
					courseName: this.searchData,
					pageNum: 1,
					pageSize: 10
				})
				.then(res => {
					self.list1 = res.data.rows;
					if (res.data.rows.length > 0) {
						self.searchStatus = true;
					}
				});
		},
		gitBankList() {
			var self = this;
			this.$api
				.banklist({
					bankName: this.searchData,
					pageNum: 1,
					pageSize: 10
				})
				.then(res => {
					self.list2 = res.data.rows;
					if (res.data.rows.length > 0) {
						self.searchStatus = true;
					}
				});
		},
		gitNoteLists() {
			var self = this;
			this.$api
				.notelist({
					name: this.searchData,
					pageNum: 1,
					pageSize: 10
				})
				.then(res => {
					self.list3 = res.data.rows;
					if (res.data.rows.length > 0) {
						self.searchStatus = true;
					}
				});
		}
	}
};
</script>

<style scope>
.classword {
	color: #666;
}
.titles {
	margin-top: 30upx;
	padding-left: 32upx;
	padding-bottom: 11upx;
	border-bottom: 1upx solid #d6d6db;
	color: #666;
}
.listWord {
	border-bottom: 1upx solid #eee;
}
.listA {
	margin-left: 32upx;
	height: 88upx;
	line-height: 88upx;
	padding: 0upx 35upx;
	border-bottom: 1upx solid #eee;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-all;
}
.listA:last-of-type {
	border-bottom: none;
}
.moreClassword {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 65upx;
	padding-right: 32upx;
	height: 88upx;
	border-bottom: 1upx solid #eee;
	margin-bottom: 46upx;
}
page {
	background: #ffffff;
}
</style>