qzw_xcx/pages/index/searchresult.vue

<template>
	<view class="searchType" style="background: #fff;height: 100vh;">
		 <van-cell value-class="searchclass">
			 <template slot="title">
				<view class="input-view">
					<uni-icon type="search" size="22" color="#666666" />
					<input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" 
					@input="confirm" />
				</view> 
			 </template>
			 <template>
				 <view>搜索</view>
			 </template>
		 </van-cell>
		 
		 <view class="hotelList">
		 		 <view class="hotleLeft">
		 			 <image  style="width: 214upx;height: 152upx;" src=""/>
		 		 </view>
		 		 <view class="hotelright">
		 		 	<view style="font-size: 36upx;color: #303133;">华南城市酒店</view>
		 		    <view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
		 				<view style="font-size: 40upx; color: #303133;"> 0.0</view>
		 				<view>月访客990</view>
		 				<view>8km</view>
		 			</view>
		 			<view class="undertip">
		 				<view class="tipsTop">有停车为</view>
		 				<view class="tipsTop">内置酒店</view>
		 			</view>
		 </view>
		 </view>
	 </view>
</template>

<script>
	import uniIcon from '@/component/uni-icon/uni-icon.vue'
	export default {
		components: {
			uniIcon
		},
		onLoad() {
			this.gethotelist();
		},
		data() {
			return {
				searchvalue:''
			}
		},
		methods: {
			confirm(e) {
				this.searchvalue = e.detail.value;
			},
			// 获取酒店列表
					 gethotelist() {
						 this.request({
			                url:"/v2/entry/storeList",
			                method:'get',
			                data: {
			                    page: this.page,
							    page_size: 10,
								keyword: this.keyword
			                 },
							success: (res) => {
								 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);
									 }
									this.hotelist.forEach(item => {
										item.tages = item.store_summary.split('  ');
									})
									 
								 }else {
									 console.log(_this.hotelist).$msg("网络错误稍后再试")
								 }
							}
					   })
					 },
		}
	}
</script>

<style>
	.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;
	}
	.van-cell {
		padding: 15upx 32upx 0 32upx!important;
	}
	.hotelList {
		display: flex;
		flex-direction: row;
		padding: 24upx 32upx;
	}
		
	.hotleLeft {
		width: 214upx;
		height: 152upx;
		background-color: #007AFF;
	}
		
	.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>