yixiang/pageA/huati-search.vue

<template>
	<view class="content">
		<view class="search">
			<u-search placeholder="搜索话题" v-model="keyword" clearabled :showAction="false" @search="tosearch"></u-search>
		</view>
		<view class="center" v-if="keyword == ''">
			<view class="title hflex acenter jbetween">
				<text>搜索历史</text>
				<text @click="toclean" v-if="history.length>0">清除历史</text>
			</view>
			<view class="history hflex acenter jbetween" v-for="(item,index) in history" :key="index">
				<text @click="tosearch2(item)">{{item}}</text>
				<u-icon name="close" color="#444444" size="16" @click="del(index)"></u-icon>
			</view>
		</view>
		<view class="center" v-else>
			<view class="history" v-for="(item,index) in list" :key="index" v-if="list.length > 0">
				<text @click="toinfo(item)">{{item.title}}</text>
			</view>
			<view v-else class="empty">
				<u-empty mode="data"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				keyword: '',
				history: [],
				list: [],
				page: 1,
				last_page: 1,
			}
		},
		onLoad() {
			this.gethistory()
		},
		watch: {
			keyword(val) {
				if(val == '') {
					this.gethistory()
				}
			}
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			
		},
		onReachBottom() {
			
		},
		methods: {
			toinfo(item) {
				uni.navigateTo({
					url: '/pageA/topic-detail?id=' + item.id
				})
			},
			getlist() {
				var _this = this
				$api.req({
					url: 'topic',
					method: 'GET',
					data: {
						page: _this.page,
						limit: 20,
						is_page: 1,
						title:_this.keyword,
					}
				}, function(res) {
					if(res.code == 10000) {
						_this.list = _this.list.concat(res.data.list)
						_this.last_page = res.data.last_page
					}
				})
			},
			tosearch2(item) {
				this.keyword = item
				this.tosearch()
			},
			del(index) {
				this.history.splice(index, 1)
				if(this.history.length == 0) {
					this.toclean()
				} else {
					uni.setStorageSync('search-huati',JSON.stringify(this.history))
				}
				this.gethistory()
				console.log(this.history);
			},
			tosearch() {
				var temp = true
				for(var i=0;i<this.history.length;i++) {
					if(this.history[i] == this.keyword) {
						temp = false
					}
				}
				if(temp) {
					this.history.push(this.keyword)
					uni.setStorageSync('search-huati',JSON.stringify(this.history))
				}
				this.getlist()
			},
			gethistory() {
				if(uni.getStorageSync('search-huati')) {
					this.history = JSON.parse(uni.getStorageSync('search-huati'))
				} else {
					this.history = []
				}
			},
			toclean() {
				uni.removeStorageSync('search-huati')
				this.history = []
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background: #FFFFFF;
		padding: 0 28rpx;
		.search {
			width: 694rpx;
			height: 76rpx;
			background: #F5F5F5;
			border-radius: 38rpx;
			margin: 0 auto;
		}
		.center {
			.history {
				padding: 32rpx 0;
				border-bottom: 1px solid #F9F9F9;
				text {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
			}
			.title {
				padding-top: 36rpx;
				text:first-child {
					font-size: 28rpx !important;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600 !important;
					color: #333333;
				}
				text:last-child {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}
</style>