搜索优化

pages/seach/seach.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="mainWrapper">
-		<view class="headSearch">
+		<view v-show="!searchResultShow" class="headSearch">
 			<view class="search-view">
 				<view class="search-item">
 					<image src="../../static/img/search.svg" style="width: 32rpx;height: 32rpx;" mode=""></image>
@@ -13,6 +13,22 @@
 				</view> -->
 			</view>
 		</view>
+		<view v-show="searchResultShow" class="headSearch">
+			<view class="search-view">
+				<view class="search-item" @click="clearCurrentKeyWords">
+					<!-- <image src="../../static/img/search.svg" style="width: 32rpx;height: 32rpx;" mode=""></image> -->
+					<!-- <input type="text" confirm-type="搜索" v-model="keywords" @confirm="getNewList('search')"
+						placeholder="搜任务/搜岗位/搜政策" /> -->
+					<!-- <view @click="getNewList('search')" style="width: 80rpx;height: 50rpx;color:#fff;background-color: #0091ff;font-size:24rpx;text-align: center;line-height: 50rpx;border-radius: 25rpx;;">搜索</view> -->
+					<view style="font-size: 24rpx;height: 50rpx;background-color: #ddd;border-radius: 25rpx;line-height: 50rpx;padding: 0 20rpx;padding-right: 40rpx;position:relative;">
+						{{ keywords }}
+						<u-icon name="close" size="14" style="position:absolute;right:10rpx;top:13rpx;"></u-icon>
+					</view>
+					
+				</view>
+				
+			</view>
+		</view>
 		<view v-show="searchResultShow" class="search-result">
 			<view class="title">搜索结果</view>
 			<view v-for="(item, index) in searchResultList" class="search-item" @click="toDetail(item)">
@@ -22,6 +38,7 @@
 				<view class="type" v-else-if="item.type == 1">岗位</view>
 				<view class="type" v-else-if="item.type == 2">政策</view>
 			</view>
+			<view v-if="searchResultList.length > 0" style="text-align: center;font-size: 26rpx;margin-top: 20rpx;color:#999;">没有更多数据了</view>
 			<view v-if="searchResultList.length == 0" style="text-align: center;font-size: 26rpx;margin-top: 20rpx;">暂无数据</view>
 		</view>
 		<view v-show="!searchResultShow" class="search-history">
@@ -141,6 +158,14 @@ export default {
 		this.upLoad()
 	},
 	methods: {
+		clearCurrentKeyWords() {
+			this.keywords = '';
+			let that = this;
+			setTimeout(function() {
+				that.searchResultShow = false;
+			}, 100);
+			
+		},
 		// 新面板搜索
 		getNewList() {
 			getListByKeyWords(this.keywords).then(res => {
@@ -161,7 +186,8 @@ export default {
 			})
 		},
 		keyWordsClick(keyWords) {
-			console.log(keyWords)
+			// console.log(keyWords)
+			this.searchResultShow = true;
 			this.keywords = keyWords;
 			this.getNewList();
 		},
@@ -368,6 +394,8 @@ export default {
 }
 .search-result {
 	padding: 20rpx 30rpx;
+	background-color: #fff;
+	height: 100vh;
 }
 .search-result .title {
 	font-size: 26rpx;