uniapp-hainan/pages/search/search.vue

<template>
	<view>
		<view class="head" v-if="tab_list.length">
			<u-tabs :list="tab_list" :is-scroll="false" :current="current" @change="tabChange"></u-tabs>
		</view>
		<view v-if="current != 2">
			<view class="lf-row-between lf-bg-white" style="align-items: center;">
				<view class="lf-p-t-30 lf-p-r-30 lf-flex lf-bg-white">
					<u-icon name="search" class="search-icon"></u-icon>
					<input class="rom-search" type="text" v-model="searchContent" @confirm="setSearch()" placeholder="请输入商品名称"/>
				</view>
				<view class="lf-bg-white lf-font-28 lf-color-222 lf-p-t-30 lf-p-r-30">取消</view>
			</view>
			<view class="history-card" v-if="historySearch != ''">
				<view class="lf-font-28 lf-color-gray lf-p-b-30 lf-p-l-30">
					历史搜索
				</view>
				<view class="lf-flex lf-flex-wrap lf-p-l-20 lf-p-r-20">
					<view class="search-tag" v-for="(i,index) of historySearch" :key="index" @click="gosearch(i)">{{i}}</view>
				</view>
			</view>
			<view class="history-card" v-else>
				<view class="lf-font-28 lf-color-gray lf-p-b-30 lf-p-l-30">
					历史搜索
				</view>
				<view class="lf-flex lf-flex-wrap lf-p-l-30 lf-p-r-20">
					暂无历史搜索记录
				</view>
			</view>
		</view>
		<view class="lf-row-center" v-if="current == 2" >
			<view class="taget-form lf-m-t-40 lf-p-30">
				<view class="lf-flex-column">
					<view class="lf-color-gray lf-font-28 lf-m-b-34">出发地和目的地</view>
					<view class="lf-flex lf-m-b-40">
						<text style="color: #1998FE;" class="lf-font-22 lf-m-r-32">起</text>
						<input v-model="start_place" type="text" class="lf-font-28 lf-color-222" placeholder="请输入出发地" />
					</view>
					<view class="lf-flex lf-m-b-40">
						<text style="color: #1998FE;" class="lf-font-22 lf-m-r-32">终</text>
						<input v-model="target_place" type="text" class="lf-font-28 lf-color-222" placeholder="请输入目的地" />
					</view>
					<button class="choose_btn" @click="searchTarget()">立即购买</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let list = []
	export default {
		data() {
			return {
				historySearch: [],
				searchContent: '',
				value1: 1,
				options1: [{
						label: '商品',
						value: 1,
					},
					{
						label: '地图',
						value: 2,
					},
					{
						label: '出发地和目的地',
						value: 3,
					}
				],
				tab_list: [
					{id: 1,name: '商品'},
					{id: 2,name: '地图'},
					{id: 3,name: '地址'}
				],
				current: 0,
				windowHeight: 0,
				start_place: '',
				target_place: ''
			}
		},
		onLoad() {
			this.windowHeight = getApp().globalData.windowHeight;
		},
		methods: {
			searchTarget() {
				if(!this.start_place) {
					this.$msg('请输入出发地！')
					return
				}
				if(!this.target_place) {
					this.$msg('请输入目的地！')
					return
				}
				uni.navigateTo({
					url: '/pages/search/searchList?start_place=' + this.start_place+'&target_place='+this.target_place
				})
				this.start_place = '';
				this.target_place = '';
			},
			tabChange(index){
				this.current = index;
				if(this.current == 1) {
					uni.navigateTo({
						url: '/pages/shopmap/index'
					})
				}
			},
			getCategory(e) {
				console.log(e)
			},
			gosearch(i) {
				uni.navigateTo({
					url: '/pages/search/searchList?serach_content=' + i
				})
			},
			setSearch() {
				list.push(this.searchContent);
				list = [...new Set(list)];
				uni.navigateTo({
					url: '/pages/search/searchList?serach_content=' + this.searchContent
				})
				setTimeout(() => {
					this.historySearch = list
					uni.setStorageSync('historySearch',this.historySearch)
				},1000)
			}
		},
		onShow() {
			this.historySearch = uni.getStorageSync('historySearch') || [];
			console.log('初始',this.historySearch)
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.choose_btn {
		width: 626rpx;
		height: 82rpx;
		background: #1998FE;
		border-radius: 10rpx;
		font-size: 32rpx;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.taget-form {
		width: 686rpx;
		height: 410rpx;
		border-radius: 10rpx;
		border: 1rpx solid #D9D9D9;
	}
	.history-card {
		background-color: white;
		width: 100%;
		height: 100%;
		padding: 30rpx 0;
	}
	.search-tag {
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		background: #f5f5f5;
		color: #222;
		display: flex;
		align-items: center;
		text-align: center;
		width: max-content;
		height: max-content;
		font-size: 28rpx;
		margin-right: 20rpx;
		&:nth-child(5n) {
			margin-right: 0;
		}
		&:nth-child(n + 6) {
			margin-top: 20rpx;
		}
	}
	.search-icon {
		position: relative;
		bottom: 0;
		left: 54rpx;
	}
	/deep/.input-placeholder{
		color: #777;
		font-size: 28rpx;
	}
	.rom-search {
		width: 605rpx;
		height: 60rpx;
		background: #f5f5f5;
		border-radius: 30rpx;
		padding-left: 74rpx;
		font-size: 28rpx;
	}
</style>