Anti-fraud-mobile/pages/searchList/index.vue

<template>
	<view class="SearchDetail">
		<u--input v-model="searchVal" placeholder="请输入关键字" suffixIcon="search" suffixIconStyle="font-weight: bold"
			border="none"
			:customStyle="{ height: '88rpx', borderRadius: '20rpx', lineHeight:'88rpx', backgroundColor: '#eee', padding: '0 20rpx 0 40rpx'}"
			:clearable="true" @focus="focusSearch" @confirm="clickSearch" @clear="clickClear">
			<template slot="suffix">
				<u-icon name="search" color="#000" size="60rpx" @click="clickSearch"></u-icon>
			</template>
		</u--input>
		<view class="tabBox">
			<view v-for="item in tabList" :key="item.id" :class="{active:activeId ===item.id}"
				@click="handleSelect(item)">
				{{item.name}}
			</view>
		</view>
		<!-- 内容列表 -->
		<view class="main">
			<Info id="child_info" v-show="activeId === 1" />
			<Video id="child_video" v-show="activeId === 2" />
			<!-- <component :is="partName"  v-if="partName"></component> -->
		</view>

	</view>
</template>

<script>
	import Info from './components/info.vue'
	import Video from './components/video.vue'
	export default {
		components: {
			Info,
			Video
		},
		data() {
			return {
				// partName:"Info", // 渲染的组件名
				searchVal: "", // 搜索内容
				activeId: 1, // 当前选中的tab
				tabList: [{
						id: 1,
						name: '资讯',
						partName: "Info"
					},
					{
						id: 2,
						name: '视频',
						partName: "Video"
					},
					// {
					// 	id: 3,
					// 	name: '文章',
					// 	partName:""
					// },
					// {
					// 	id: 4,
					// 	name: '新闻',
					// 	partName:""
					// },
				],
			};
		},
		onLoad(option) {
			console.log('传递的参数', option)
			this.searchVal = option.searchVal
			const childInfo = this.selectComponent('#child_info')
			childInfo.$vm.getList({title: option.searchVal})
		},
		methods: {
			handleSelect(val) {
				this.activeId = val.id
			},
			focusSearch() {
				console.log('input聚焦')
			},
			clickSearch() {
				const childInfo = this.selectComponent('#child_info')
				const childVideo = this.selectComponent('#child_video')
				console.log('clickSearch', childInfo, childVideo)
				activeId === 1 ? childInfo.$vm.getList({title: this.searchVal}): childVideo.$vm.getList({title: this.searchVal})
				// childInfo.$vm.getList({title: this.searchVal})
			},
			clickClear() {
				console.log('input清除')
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		// background-color: yellow;
	}

	.SearchDetail {
		padding: 40rpx;
		padding-bottom: 0;
		color: #666;
		height: 100%;

		.tabBox {
			// padding: 0 40rpx;
			display: flex;
			align-items: flex-end;
			margin-top: 20rpx;
			margin-bottom: 50rpx;
			height: 70rpx;

			>view {
				margin-right: 40rpx;

				&.active {
					color: #000;
					font-size: 50rpx;
					font-weight: bold;
				}
			}
		}

		.main {
			height: calc(100% - 88rpx - 140rpx);
		}
	}
</style>