Anti-fraud-mobile/pages/search/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.id)">
				{{item.name}}
			</view>
		</view>
		<view class="list">
			<view class="keyWord" v-for="(item,index) in keyWordList" :key="index">{{item}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchVal: "", // 搜索内容
				activeId: 1, // 当前选中的tab
				tabList: [{
						id: 1,
						name: '热门'
					},
					{
						id: 2,
						name: 'Live'
					},
					{
						id: 3,
						name: '关注'
					},
					{
						id: 4,
						name: '附近'
					},
				],
				keyWordList: ['就地过年', '张廷芳回应被查出', '啊呀好生菜', '周宇通谭青青哽咽', '韩国人最新作品',
					'以巡视多少年', '就地过年', '张廷芳回应被查出', '啊呀好生菜', '周宇通谭青青哽咽', '韩国人最新作品',
					'以巡视多少年',
				],
			};
		},
		methods: {
			handleSelect(id) {
				this.activeId = id
			},
			focusSearch() {
				console.log('input聚焦')
			},
			clickSearch() {
				// this.jump('/pages/searchList/index')
				uni.navigateTo({
					url: `/pages/searchList/index?searchVal=${this.searchVal}`
				});
			},
			clickClear() {},
		}
	}
</script>

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

	.SearchDetail {
		padding: 40rpx;
		color:#666;

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

			>view {
				margin-right: 40rpx;

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

		.list {
			-webkit-column-count: 2;
			-moz-column-count: 2;
			column-count: 2;
			-webkit-column-gap: 20px;
			-moz-column-gap: 20px;
			column-gap: 10rpx;

			.keyWord {
				margin-bottom: 20rpx;
			}
		}
	}
</style>