changshu_WeChat/subPackages/search/search.vue

<template>
	<div class="bg">
		<view style="width: 100%;height: 1px;"></view>
		<div class="search-box">
			<img src="https://static.ticket.sz-trip.com/taizhou/images/search.png" alt="">
			<input type="text" class="input" placeholder="请输入关键字" v-model="keywords" @confirm="search" />
			<div class="btn" @click="search()">搜索</div>
		</div>
		<div class="search-title com-flex-tao">
			搜索历史
			<img @click="delHis()" src="https://static.ticket.sz-trip.com/taizhou/images/delete.png" alt="">
		</div>
		<div class="search-list">
			<div v-for="his,hisIndex in history.slice(0,10)" @click="gotoHot(his)" :key="hisIndex"
				class="search-item textOver">{{his}}</div>
		</div>
		<div class="search-title">大家在搜</div>
		<div class="search-list">
			<div @click="gotoHot(hot.name)" class="search-item textOver" v-for="hot,hotIndex in hot" :key="hotIndex">
				{{hot.name}}
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Search",
		data() {
			return {
				list: [],
				keywords: '',
				history: [],
				hot: [],
				keywords_name: 'tz_trip_keyowrds',
				options: {}
			}
		},
		onLoad() {
		},
		onShow() {
			this.history = uni.getStorageSync(this.keywords_name) ? JSON.parse(uni.getStorageSync(this.keywords_name)) :
		[];
			this.getHot()
		},
		methods: {
			getHot() {
				this.Post({
					limit: 10,
				}, '/api/search/hot').then(res => {
					this.hot = res.data;
				})
			},
			delHis() {
				this.history = [];
				uni.removeStorageSync(this.keywords_name)
				uni.showToast({
					title: '删除成功'
				})
			},
			search(e) {
				if (this.keywords) {
					this.pushHis(this.keywords);
					uni.navigateTo({
						url: `./searchList?keywords=${this.keywords}`
					})
				}
			},
			gotoHot(name) {
				uni.navigateTo({
					url: `./searchList?keywords=${name}`
				})
				this.pushHis(name)
			},
			pushHis(keywords) {
				let history = this.history;
				let index = history.findIndex(item => item == keywords);
				if (index >= 0) history.splice(index, 1);
				history.unshift(keywords);
				uni.setStorageSync(this.keywords_name, JSON.stringify(history))
				this.history = history;
			},
		}
	}
</script>
<style scoped>
	.bg {
		min-height: 100vh;
		background: white;
		padding: 0 30rpx;
		position: relative;
	}

	.search-box {
		width: 697rpx;
		height: 68rpx;
		margin: 34rpx auto;
		border-radius: 60rpx;
		padding: 6rpx 7rpx 6rpx 26rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background-color: #F2F2F2;
	}

	.search-box img {
		width: 28rpx;
		height: 30rpx;
	}

	.search-box .input {
		flex: 1;
		border: none;
		outline: none;
		background: none;
		color: #666;
		margin: 0 20rpx;
	}

	.search-box .btn {
		background-color: #019B67;
		border-radius: 27rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 10rpx 26rpx;
	}

	.search-title {
		color: #000000;
		font-size: 32rpx;
		margin: 36rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.search-title img {
		width: 30rpx;
		height: 32rpx;
	}

	.search-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.search-item {
		padding: 0 25rpx;
		font-size: 24rpx;
		color: #333;
		line-height: 42rpx;
		border-radius: 20rpx;
		background: #ECECEC;
		margin-right: 22rpx;
		margin-bottom: 23rpx;
	}

	.road-list {
		display: flex;
		margin: 20rpx 0;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.road-item {
		width: 332rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 10rpx 0px rgba(4, 0, 0, 0.16);
		margin-bottom: 26rpx;
		min-height: 156rpx;
	}

	.road-item image {
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
		width: 332rpx;
		height: 246rpx;
		object-fit: cover;
		display: block;
	}

	.road-info {
		padding: 10rpx 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.road-title {
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: 500;
		margin-top: 6rpx;
		margin-bottom: 20rpx;
	}

	.hotel-subtitle {
		font-size: 24rpx;
		color: #999;
		line-height: 24rpx;
		margin-bottom: 18rpx;
		min-height: 48rpx;
	}

	.hotel-price {
		text-align: right;
		color: #FC524B;
		font-size: 36rpx;
		font-weight: 500;
		line-height: 30rpx;
	}

	.hotel-price:after {
		content: "起";
		font-size: 20rpx;
		color: #999;
		margin-left: 5rpx;
	}
</style>