tongli_WeChat/subPackages/search/searchList.vue

<template>
	<div class="bg">
		<title-header title='搜索'></title-header>
		<view class="top-bg">
			<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>
			<view class="common-box">
				<view class="common-types com-flex-tao">
					<view @click="setType(index)" v-for="(item, index) in typeList" :key="item.id"
						:class="['common-type', typeIndex == index ? 'active' : '']">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<div class="search-list">
			<view @click="gotoDetail(item)" v-for="(item, key) in list" :key="item.id" class="search-item">
				<image class="img" :src="showImg(item.search_data.image)" mode=""></image>
				<view class="content">
					<view class="title text-overflowRows">
						{{item.title}}
					</view>
					<!-- 美食 -->
					<view v-if="item.search_data.genre=='food'" style="display: flex;">
						<view class="distance text-overflow" v-if="item.search_data.open_description">
							<image :src="showImg('/uploads/20241024/bd5ef34fb88f8aee2c444512a5311c79.png')" class="icon-tip"></image>
							<text>营业时间:{{ item.search_data.open_description }}</text>
						</view>
					</view>
					
					<view class="bottom" v-if="['ticket','hotel','pgoods'].includes(item.search_data.genre)">
						<view class="distance text-overflow"  >
							<image v-if="item.search_data.address" :src="showImg('/uploads/20241024/b7d33bf405526f09212ff3d9485e6d06.png')" class="icon-tip"></image>
							<text v-if="item.search_data.address">{{item.search_data.address}}</text>
						</view>
						<view class="price ticlet-price">
							{{item.search_data.money/100}}
						</view>
					</view>
					
					<view class="bottom" v-else-if="item.search_data.genre=='food'">
						<view class="distance text-overflow" >
							<image v-if="item.search_data.distance" :src="showImg('/uploads/20241024/b7d33bf405526f09212ff3d9485e6d06.png')" class="icon-tip"></image>
							<text v-if="item.search_data.distance">距您约{{ item.search_data.distance/1000 }}km</text>
						</view>
						<view class="price food-price">
							{{item.search_data.money/100}}
						</view>
					</view>
					
					<view class="bottom" v-else>
						<view class="distance text-overflow"  >
							<image :src="showImg('/uploads/20241024/852c8a49a8d78410bebd93b02c9e41a4.png')" class="icon-tip"></image>
							<text >同里文旅</text>
						</view>
						<view class="view-num flex-between flex-shrink-0">
							<image :src="showImg('/uploads/20241024/4226315bfd2eac83e90746295851966a.png')" class="icon-tip"></image>
							<text class="distance">{{item.search_data.view||0}}</text>
						</view>
					</view>
				</view>
			
			
			</view>
			<div class="list-common-empty" v-if="!showMore">
				
				<p class="list-common-empty-tip">—— 暂无更多 ——</p>
			</div>
		</div>
		
		
	</div>
</template>

<script>
	export default {
		name: "Search",
		data() {
			return {
				typeList: [{
						id: '',
						name: '全部'
					},
					{
						id: 'ticket',
						name: '景点'
					},
					{
						id: 'food',
						name: '美食'
					},
					{
						id: 'hotel',
						name: '酒店'
					},
					{
						id: 'pgoods',
						name: '特产文创'
					},
					{
						id: 'line',
						name: '特色体验'
					},
					{
						id: 'article',
						name: '攻略'
					},
					{
						id: 'activity',
						name: '活动'
					}
				],
				typeIndex: 0,
				showMore: true,
				list: [],
				keywords: "",
				ajaxFlag: true,
				types: {
					'goods': "商品",
					// 'scenic': "景点",
					'article': "文章",
					'activity':'活动'
				},
				options: {}
			}
		},
		onLoad(options) {
			this.options = options
			this.keywords = options.keywords;
			this.getList()
		},
		methods: {
			setType(index) {
				if (this.typeIndex!==index) {
					this.typeIndex = index;
					this.list = []
					this.getList()
				}

			},
			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,
					type: this.typeList[this.typeIndex].id,
					limit: 30,
					lon: uni.getStorageSync('location').lon || '120',
					lat: uni.getStorageSync('location').lat || '36',
				}, '/api/search/search').then(res => {
					res.data.forEach(v=>{
						if (v.type!=='goods') {
							v.search_data.genre = v.type
						}
					})
					this.list = [...this.list, ...res.data];
					this.showMore = true
					if (res.data.length<30) {
						this.showMore = false
					}
				})
			}
		},
		
		onReachBottom() {
			setTimeout(() => {
				if (this.showMore) this.getList()
			},1000)
		}
	}
</script>
<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		background: #F7F7F7;
		// padding: 0 30rpx;
	}
	.top-bg{
		background: white;
		padding: 0 30rpx;
	}
.search-box {
		width: 697rpx;
		height: 68rpx;
		margin: 34rpx auto 20rpx;
		border-radius: 13rpx;
		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: #248BAA;
		border-radius: 7rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 10rpx 26rpx;
	}

	.search-list {
		padding: 0 30rpx;
		padding-bottom: 30rpx;
	}

	.search-item {
		width: 100%;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		display: flex;
		margin: 26rpx 0rpx;
		.img {
			width: 200rpx;
			height: 200rpx;
			background: #87CD93;
			border-radius: 13rpx;
			flex-shrink: 0;
		}
		
		.content {
			padding:13rpx 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
		}
		.title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 31rpx;
			color: #000000;
			width: 100%;
		}
		.distance {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #666666;
			display: flex;
			align-items: center;
			flex: 1;
			width: 1rpx;
			padding-right: 10rpx;
			
			image{
				flex-shrink: 0;
			}
			text{
				flex: 1;
				width: 1rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		
		.price {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 33.33rpx;
			color: #D90F00;
			display: flex;
			align-items: baseline;
		}
		.price::before{
			content: '￥';
			font-size: 24rpx;
		}
		.ticlet-price::after{
			content: '起';
			font-size: 24rpx;
		}
		.food-price::after{
			content: '/人';
			font-size: 24rpx;
		}
	}

	.list-common-empty{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin: 26rpx 0;
		
	}
	.list-common-empty-tip{
		color:#999;
	}
	
	.common-box {
		height: 90rpx;
		.common-types {
			background: white;
			height: 90rpx;
			font-size: 31rpx;
			z-index: 10;
			margin: auto;
			color: #666;
			overflow-x: scroll;
			overflow-y: hidden;
			padding: 0;
			display: flex;
		}
		
		.common-types::-webkit-scrollbar {
			width: 0rpx;
			height: 0;
			display: none;
		}
		
		.common-type {
			flex-shrink: 0;
			margin: 0 26rpx;
			line-height: 90rpx;
			height: 90rpx;
			position: relative;
			color: #000000;
		}
		
		.common-type.active {
			font-size: 31rpx;
			font-weight: bold;
			color: #000000;
		}
		
		.common-type.active:after {
			display: block;
			width: 60%;
			font-size: 0;
			content: '1';
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 1rpx;
			height: 4rpx;
			background: #248BAA;
			border-radius: 2rpx;
		}
	}
	

	.icon-tip{
		width: 26rpx;
		height: 26rpx;
		margin-right: 6rpx;
	}
	.bottom{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>