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 @click="search">搜索</view>
			 </template>
		 </van-cell>
		 
		 <view class="hotelList" v-for="(item,index) in hotelist" :key="index">
		 		 <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;">{{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>
</template>

<script>
	import uniIcon from '@/component/uni-icon/uni-icon.vue'
	export default {
		components: {
			uniIcon
		},
		onLoad() {
			//this.gethotelist();
		},
		data() {
			return {
				pictureUrl: this.pictureUrl,
				hotelist: [],
				searchvalue:'',
				page: 1
			}
		},
		methods: {
			search() {
				this.hotelist = [];
				this.gethotelist();
			},
			confirm(e) {
				this.searchvalue = e.detail.value;
				this.hotelist = [];
				this.gethotelist();
			},
			// 获取酒店列表
					 gethotelist() {
						 if(this.searchvalue == '') {
							 this.$msg("关键字不能为空")
							 return;
						 }
						 this.request({
			                url:"/v2/entry/storeList",
			                method:'get',
			                data: {
			                    page: this.page,
							    page_size: 10,
								keyword: this.searchvalue
			                 },
							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);
									 }
									 
								 }else {
									 this.$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;
	}
		
	.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>