xingmingyi_applet/pages/index/search.vue

<template>
	<view class="indList">
		<view class="navTit dffs">
			<!-- <input type="text" v-model="keyword" placeholder="输入关键词搜索课程" @search="searchThis"/> -->
			<u-search class="input" bgColor="#FAFAFA" :show-action="false" placeholder="输入关键词搜索课程" v-model="keyword" @search="searchThis" @change="searchThis"></u-search>
			<view class="search fontsm">搜索</view>
		</view>
		<view v-if="newsInfo.length < 1" class="hisPage">
			<view class="pagebox">
				<view class="title blod dfsb">
					历史搜索
					<u-icon name="trash"></u-icon>
				</view>
				<view class="con dffs">
					<view class="textcon" @click="searchThis(item)" v-for="(item, ind) in hotInfo" :key="ind">{{ item }}</view>
				</view>
			</view>
		</view>
		<!-- <view v-if="list.length > 1" class="listBox dffs">
			<text @tap="cliTab(ind)" :class="tabsel == ind ? 'sel' : ''" v-for="(item, ind) in list">{{ item }}</text>
		</view> -->
		<view class="newsBox">
			<view class="title">文档</view>
			<view class="box">
				<course-list :list="newsInfo.class_list"></course-list>
				<navigator :url="'/pages/index/classList?flag=2&keyword='+keyword" class="center textgrey fontsm">
					查看更多文档>
				</navigator>
			</view>
		</view>
		<view v-if="vedio_status == 1" class="newsBox">
			<view class="title">视频</view>
			<view class="box">
				<video-list :list="newsInfo.video_list"></video-list>
				<navigator :url="'/pages/index/video/video?keyword='+keyword" class="center textgrey fontsm">
					查看更多视频>
				</navigator>
			</view>
		</view>
		<view class="newsBox">
			<view class="title">实物</view>
			<view class="box">
				<shop-list :list="newsInfo.goods_list"></shop-list>
				<navigator :url="'/pagesA/mall/mall?type=1&keyword='+keyword" class="center textgrey fontsm">
					查看更多实物>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import courseList from './components/knowVidList.vue';
import videoList from './video/componets/list.vue';
import shopList from '@/components/shopList.vue';
export default {
	components: {
		courseList,
		videoList,
		shopList
	},
	data() {
		return {
			vedio_status:0,
			keyword: '',
			newsInfo: {},
			status: 'nomore', //loading / nomore
			page: 1,
			pagenum: 6
		};
	},
	onLoad(param) {
		this.vedio_status = param.vedio_status;
	},
	onShow() {
		// this.loading();
	},
	onReachBottom() {
		// if (this.status == 'nomore') return;
		// this.status = 'loadmore';
		// this.page = ++this.page;
		// this.searchThis();
	},
	methods: {
		cliTab(val) {
			this.tabsel = val;
			this.status = 'loadmore';
			this.page = 1;
			this.newsInfo = [];
			this.getList();
		},
		//搜索
		searchThis(val) {
			this.keyword = val;
			this.page = 1;
			this.newsInfo = [];
			this.status = 'loadmore';
			this.getList();
		},
		loading() {
			this.$api
				.request('index/getHotSearch')
				.then(data => {
					console.log(data);
					if (data.code == 200) {
						this.hotInfo = data.data;
					} else {
						this.$api.toast(data.msg);
					}
				}) 
		},
		getList() {
			this.$api
				.request('index/searchList', {
					keyword: this.keyword
				})
				.then(data => {
					console.log(data);
					if (data.code == 200) { 
						this.newsInfo = data.data;
					} else {
						this.$api.toast(data.msg);
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.indList {
	min-height: 100vh;
	padding: 96rpx 0 30rpx;
	.listBox {
		padding: 30rpx;
		background-color: #fff;
		text {
			margin-right: 30rpx;
		}
		.sel {
			color: $base-color;
		}
	}
	.navTit {
		position: fixed;
		width: 691rpx;
		height: 96rpx;
		top: 0;
		/* #ifdef H5 */
		top: 100rpx;
		/* #endif */
		left: 30rpx;
		height: 68rpx;
		line-height: 68rpx;
		border: 2px solid #31c671;
		border-radius: 40rpx;
		.search {
			width: 146rpx;
			height: 62rpx;
			line-height: 62rpx;
			background: #31c671;
			color: #fff;
			border-radius: 37rpx;
			font-size: 26rpx;
			text-align: center;
		}
	}
	.hisPage {
		padding: 30rpx 31rpx 0;
		.pagebox {
			margin-bottom: 37rpx;
			.title {
				font-size: 36rpx;
				margin-left: 26rpx;
			}
			.con {
				flex-wrap: wrap;
				margin-top: 22rpx;
				.textcon {
					// min-width: 130rpx;
					text-align: center;
					padding: 10rpx 30rpx;
					font-size: 24rpx;
					background-color: #f5f5f5;
					border-radius: 27rpx;
					margin-right: 13rpx;
					margin-bottom: 15rpx;
				}
			}
		}
	}
	.newsBox {
		margin-bottom: 30rpx;
		padding: 30rpx;
		background-color: #fff;
		.box{
			.center{
				padding-top: 30rpx;
				border-top: 1rpx solid #F5F5F5;
			}
		}
	}
}
</style>