fangtanhua/pages/index/search.vue

<template>
	<view class="search1">
		<view class="search-box u-flex u-row-between">
			<u-icon name="search" color="#CCCCCC" size="36"></u-icon>
			<input type="text" placeholder="搜索楼盘" class="input" v-model="keyword1">
			<text class="text" @click="tosearch">搜索</text>
		</view>
		<view class="lishi-box" v-if="list.length == 0">
			<view class="lishi-title">
				历史搜索
			</view>
			<view class="u-flex u-flex-wrap">
				<text v-for="(item,index) in lishilist" :key="index" class="lishi-item" @click="lishisearch(item)">{{item}}</text>
			</view>
			<!-- <view class="news-item u-flex u-row-between" v-for="(item,index) in 2" :key="index" @click="toinfo">
				<image src="https://dummyimage.com/140x110" class="image" mode=""></image>
				<view class="item-right">
					<view class="name u-line-2">
						已取证！差价1.5W+/㎡！戏水池、会所、嵌入式冰箱，冠军推荐！
					</view>
					<view class="u-flex u-row-between">
						<view class="time u-flex">
							<u-icon name="eye-fill" color="#CCCCCC" size="26"></u-icon>
							<text class="look">12345人浏览</text>
							<text class="time-text">2023-03-25</text>
						</view>
						<view class="user u-flex">
							<image src="https://dummyimage.com/24x24" class="head" mode=""></image>
							<text class="user-name">温州购房通</text>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="list-box" style="padding: 0 24rpx;">
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<gf-goods :data="item" type="1"></gf-goods>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data() {
			return {
				lishilist: [],
				keyword1: '',
				keyword: '',
				page: 1,
				list: []
			}
		},
		onLoad() {
			this.lishilist = uni.getStorageSync("lishi") || []
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.config.store_title
			})
		},
		computed: {
			...mapState(['config', 'city'])
		},
		onReachBottom() {
			if(this.list.length % 20 == 0){
				this.page++
				this.getlist()
			}
		},
		methods: {
			lishisearch(item){
				this.keyword = item
				this.keyword1 = item
				this.page = 1
				this.list = []
				this.getlist()
			},
			tosearch() {
				this.keyword = this.$u.trim(this.keyword1)
				this.setlishi()
				this.getlist()
			},
			setlishi() {
				if (this.keyword) {
					if (this.lishilist.indexOf(this.keyword) == -1) {
						this.lishilist.unshift(this.keyword)
						uni.setStorageSync("lishi", this.lishilist)
					}
				}
			},
			getlist() {
				this.$u.post('/api/Index/property_list', {
					page: this.page,
					page_num: 20,
					keyword: this.keyword
				}).then(res => {
					if (this.page == 1) {
						this.list = res.data
					} else {
						this.list = this.list.concat(res.data)
					}
				})
			}
		}
	}

</script>

<style lang="scss">
	.search1 {
		.lishi-box {
			padding: 0 24rpx;

			.news-item {
				padding: 32rpx 0;
				border-bottom: 2rpx solid #CCCCCC;

				.image {
					width: 140rpx;
					height: 110rpx;
					border-radius: 10rpx;
				}

				.item-right {
					flex: 1;
					margin-left: 14rpx;

					.name {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-bottom: 16rpx;
					}

					.user {
						.user-name {
							font-size: 18rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}

						.head {
							width: 24rpx;
							height: 24rpx;
							border-radius: 100rpx;
							margin-right: 10rpx;
						}
					}

					.time {
						font-size: 18rpx;
						font-weight: 400;
						color: #999999;

						.look {
							margin: 0 10rpx;
						}
					}
				}
			}

			.lishi-item {
				line-height: 44rpx;
				background: #E5E5E5;
				border-radius: 22rpx;
				padding: 0 30rpx;
				font-size: 18rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-bottom: 20rpx;
				margin-right: 20rpx;
			}

			.lishi-title {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-bottom: 14rpx;
			}
		}

		.search-box {
			width: 702rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 24rpx auto;
			padding-left: 24rpx;
			border: 2rpx solid #CCCCCC;

			.input {
				flex: 1;
				margin: 0 10rpx;
			}

			.text {
				padding: 0 24rpx;
				border-left: 1rpx solid #E5E7ED;
				line-height: 36rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1E7DFF;
			}
		}
	}

</style>