qzw_xcx/pages/index/searchresult.vue

<template>
	<view class="searchType" style="background: #fff">
		<view class="flex-box flex-v-ce tops">
			<view class="input-view flex-1">
				<uni-icon type="search" size="22" color="#666666" />
				<input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" @input="confirm" @confirm="confirm" />
			</view>
			<view @click="search" class="search">取消</view>
		</view>
		<view style="margin-top: 108upx;">
			<view class="hotelList" v-for="(item, index) in hotelist" :key="index" @click="openinfo(item)">
				<view class="hotleLeft"><image style="width: 214upx;height: 152upx;" :src="pictureUrl + '/uploads/home/store/' + item.store_id + '/' + item.store_banner" /></view>
				<view class="hotelright">
					<view style="font-size: 32upx;color: #303133;font-weight: 550;">{{ item.store_name }}</view>
					<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding: 10rpx 0;">
						<view style="font-size: 32upx; color: #303133;font-weight: 550;">{{ intToFloat(item.store_servicecredit) }}</view>
						<view style="color: #606266;font-size: 24upx;">月访客{{ item.store_visitor }}</view>
						<view style="color: #606266;font-size: 24upx;">{{ item.distance }}</view>
					</view>
					<view v-if="item.tages.length != 1" class="undertip">
						<view v-for="(items, index) in item.tages" :key="index" class="tipsTop">{{ items }}</view>
					</view>
				</view>
			</view>
			<view v-if="hotelist.length == 0" class="noData">未找到内容</view>
		</view>
	</view>
</template>

<script>
import uniIcon from '@/component/uni-icon/uni-icon.vue';
export default {
	components: {
		uniIcon
	},
	onLoad(a) {
		this.lat = a.lat;
		this.lon = a.lon;
		// this.gethotelist();
	},
	data() {
		return {
			lat: '',
			lon: '',
			pictureUrl: this.pictureUrl,
			hotelist: [],
			searchvalue: '',
			page: 1,
			isLoad:true,
		};
	},
	methods: {
		intToFloat(val) {
			return new Number(val).toFixed(1);
		},
		search() {
			uni.navigateBack()
		},
		confirm(e) {
			if(e.detail.value){
				this.hotelist = [];
				this.searchvalue = e.detail.value;
				if(this.isLoad){
					this.gethotelist();
				}
			}else{
				this.hotelist = [];
			}
		},
		// 跳转到新页面  酒店详情
		openinfo(item) {
			let id = item.store_id;
			uni.navigateTo({
				url: `/pages/index/hotel?id=${id}`
			});
		},
		// 获取酒店列表
		gethotelist() {
			this.isLoad=false;
			uni.showLoading();
			this.request({
				url: '/v2/entry/storeList',
				method: 'get',
				data: {
					page: this.page,
					page_size: 10,
					lat: this.lat,
					lon: this.lon,
					keyword: this.searchvalue ? this.searchvalue : ''
				},
				success: res => {
					uni.hideLoading();
					let { data, code } = res.data;
					if (code == 1000) {
						if (data.store_list.length < 10) {
							this.ispull = false;
						}
						if (this.hotelist.length == 0) {
							this.hotelist = data.store_list;
						} else {
							this.hotelist = this.hotelist.concat(data.store_list);
						}
					} else {
						this.$msg('网络错误稍后再试');
					}
					this.isLoad=true;
				}
			});
		}
	}
};
</script>

<style>
	.tops {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: #fff;
		border-bottom: 1px solid #f1f1f1;
	}
	.search {
		color: #999;
		padding: 0 32rpx;
	}
.noData {
	margin-top: 30%;
	text-align: center;
	color: #999;
}
.searchType .input-view {
	width: 80%;
	display: flex;
	background-color: #e7e7e7;
	height: 30px;
	border-radius: 15px;
	padding: 0 4%;
	flex-wrap: nowrap;
	margin: 7px 0;
	line-height: 30px;
	margin: 24upx 0 24upx 32upx;
}

.searchType .input-view .uni-icon {
	line-height: 30px !important;
}

.searchType .input-view .input {
	height: 30px;
	line-height: 30px;
	width: 94%;
	padding: 0 3%;
}
.van-cell__title {
	flex: 6 !important;
}
.searchclass {
	display: flex;
	align-items: center;
	justify-content: center;
	position: sticky;
	top: 0;
}
.van-cell {
	padding: 15upx 32upx 0 32upx !important;
}
.hotelList {
	display: flex;
	flex-direction: row;
	padding: 24upx 32upx;
}

.hotleLeft {
	width: 214upx;
	height: 152upx;
}

.hotelright {
	padding-left: 16upx;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.undertip {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.tipsTop {
	border: 2upx solid #bbbbbb;
	margin-right: 14upx;
	color: #bbbbbb;
	padding: 4upx;
}
/* .van-cell__title {
		flex: 6!important;
	} */
</style>