yandu_WeChat/subPackages/search/searchList.vue

<template>
	<div class="bg">
		<title-header title='搜索'></title-header>
		<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-list">
			<div @click="gotoDetail(item)" v-for="(item, key) in list" :key="item.id" class="search-item">
				<p class="search-title">
					{{item.title}}
				</p>
				<p class="search-tip">
					{{item.search_data ? item.search_data.type_name || item.search_data.article_type_text || item.search_data.scenic_type_text : ''}}
					| {{types[item.type]}}
				</p>
			</div>
		</div>
		<div class="list-common-empty" v-if="list.length==0">
			<img src="https://static.ticket.sz-trip.com/taizhou/images/noData.png" />
			<p class="list-common-empty-tip">暂无内容</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Search",
		data() {
			return {
				list: [],
				keywords: "",
				ajaxFlag: true,
				types: {
					'goods': "商品",
					// 'scenic': "景点",
					'article': "文章",
					'activity':'活动'
				},
				options: {}
			}
		},
		onLoad(options) {
			this.options = options
			this.keywords = options.keywords;
			this.getList()
		},
		methods: {
			search() {
				this.pushHis(this.keywords);
				this.list = [];
				this.getList();
			},
			pushHis(keywords) {
				let history = JSON.parse(uni.getStorageSync('tz_trip_keyowrds')) || [];
				let index = history.findIndex(item => item == keywords);
				if (index >= 0) history.splice(index, 1);
				history.unshift(keywords);
				uni.setStorageSync('tz_trip_keyowrds',JSON.stringify(history))
			},
			gotoDetail(item) {
				if (item.type!=='goods') {
					item.search_data.genre = item.type
				}
				this.goDetailByType(item.search_data)
			},
			getList() {
				this.Post({
					name: this.keywords,
					offset: this.list.length,
					limit: 30,
				}, '/api/search/search').then(res => {
					this.list = [...this.list, ...res.data];
				})
			}
		},
	}
</script>
<style scoped>
	.bg {
		min-height: 100vh;
		background: white;
		padding: 0 30rpx;
	}
.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: #00AAFF;
		border-radius: 27rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 10rpx 26rpx;
	}

	.search-list {}

	.search-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 38rpx 0;
		border-bottom: 1px solid #d9d9d9;
	}

	.search-title {
		font-size: 30rpx;
		line-height: 36rpx;
	}

	.search-tip {
		flex-shrink: 0;
		margin-left: 30rpx;
		flex-shrink: 26rpx;
		color: #656565;
	}
	.list-common-empty{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		
	}
	.list-common-empty-tip{
		color:#999;
	}
</style>