zcb_APP/pages/index/search.vue

<template>
	<view class="content">
		<u-navbar
			title="搜索"
			:autoBack="true"
			bgColor="transparent"
			:placeholder="true"
			:fixed="false"
		>
		</u-navbar>
		<u-input placeholder="任务标题、用户ID、任务ID" fontSize="14" shape="circle"
		 v-model="keyword" style="background-color: #fff;border: none;">
			<u-icon
			  size="20"
			  color="#303030"
			  slot="prefix"
			  name="search"
			></u-icon>
			<template slot="suffix">
				<u-button
					@click="cancel"
					text="取消"
					type="primary"
					size="mini"
					style="width: 112rpx;height: 56rpx;font-size: 24rpx;"
					shape="circle"
				></u-button>
			</template>
		</u-input>
		<template  v-if="!keyword && searchList.length == 0">
			<view class="flex jc_between mgt-32 pdx-16">
				<view class="text-28 text-500">搜索历史</view>
				<u-icon
				  size="18"
				  color="#B9B9B9"
				  name="trash"
				  @click="delAllHistory"
				></u-icon>
			</view>
			<view class="history_list pdx-16">
				<view class="item" v-for="(item,index) in list">
					<text @click="search(item)"> {{ item }}</text>
					<u-icon
					  size="12"
					  @click="delHistory(item,index)"
					  color="#e2dcdc"
					  name="close"
					  class="mgl-10"
					></u-icon>
				</view>
			</view>
		</template>
		<u-empty
				v-if="keyword && searchList.length == 0"
				marginTop="107"
		        mode="data"
				text="您搜索的内容暂无"
				icon="/static/image/index/search_empty.png"
		>
		</u-empty>
		<view class="w flex1" v-if="searchList.length > 0">
		  <scroll-view scroll-y class="scroll">
		    <view v-for="item in 10" :key="item" class="bounty">
		      <BountyItem class="mgb-10" :showTags="false"></BountyItem>
		    </view>
		    <view class="loading">上拉加载更多 ></view>
		  </scroll-view>
		</view>
	</view>
</template>

<script>
	import BountyItem from "components/bountyItem.vue";
	export default {
		components: { BountyItem },
		data() {
			return {
				list:[
					'任务',
					'微信运营端口',
					'高效'
				],
				keyword:'',// 搜索关键词
				searchList:[]
			}
		},
		onLoad() {

		},
		methods: {
			//搜索
			search(item){
				this.keyword = item
				if(this.keyword == '任务'){
					this.searchList = ['','','']
				}
			},
			//取消
			cancel(){
				this.keyword = ''
				this.searchList = []
				// uni.navigateBack()
			},
			//删除单个历史
			delHistory(item,index){
				uni.showToast({
					title:'删除成功',
				})
				this.list.splice(index,1)
			},
			//删除全部历史
			delAllHistory(item){
				uni.showModal({
					title: '提示',
					content: '是否确认删除全部搜索历史？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showToast({
								title:'删除成功',
							})
							this.list = []
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.content{
		height: 568rpx;
		padding: 32rpx;
		background: linear-gradient(to bottom, #ffe3d1, #fafafa);
		.history_list{
			display: flex;
			padding-top:24rpx;
			gap: 20rpx;
			.item{
				display: flex;
				height: 56rpx;
				line-height: 56rpx;
				background-color: #fff;
				border-radius: 64rpx;
				padding: 0 20rpx;
				color: #7E7E7E;
				font-size: 24rpx;
			}
		}
		.loading {
		  text-align: center;
		  margin-top: 50rpx;
		  padding-bottom: 86rpx;
		  font-size: 20rpx;
		  font-weight: 400;
		  color: #c0c0c0;
		}
	}
</style>