smart-app/pages/search/search.vue

<template>
	<view>
		<!-- 头部搜索框 -->
		<view class="fixed cu-bar search  bg-blue" :style="style">
			<view class="action" @click="back()">
				<image style="width: 32rpx;height: 32rpx;" src="/static/user/bask.png"></image>
			</view>
			<view class="search-form round">
				<image src="/static/index/search-gray.png" class="login-img margin-left margin-right"></image>
				<input :focus="focusValue" type="text" placeholder="请输入关键字搜索" v-model="searchValue" confirm-type="search"></input>
				<image src="/static/index/delete-gray.png" @click="searchValue = ''" class="login-img margin-right"></image>
			</view>
			<view class="action" @click="search()">
				<text class="text-white">搜索</text>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view >
			<view :style="paddingTop"></view>
			<view class="cu-bar bg-white">
				<view class="action text-black">
					<text>历史搜索</text>
				</view>
				<view class="action" @click="crealData()">
					<image src="/static/index/delete.png" class="del-img"></image>
				</view>
			</view>
		</view>
		<view class="cu-list grid bg-black col-4 no-border">
			<view class="cu-item" v-for="(item,index) in searchKey" v-if="index<10" :key="index">
				<button class="padding-xs cu-btn bg-gray-secondary round margin-right" @click="sel(item)">
					<text class="text-cut text-black">{{item}}</text>
				</button>
			</view>
		</view>
		<!--提示窗口 -->
		<view class="cu-modal bottom-modal" :class="modalName?'show':''" >
			<view class="cu-dialog" style="background-color: white;border-radius: 10px 10px 0 0;padding-bottom: 20rpx;">
				<view class="cu-bar bg-white">
					<view class="action text-gray"></view>
					<view class="action text-black text-bold" style="color: #101010;">清空历史记录</view>
					<view class="action text-gray" @tap="modalName=false">取消</view>
				</view>
				<view class="">
					<radio-group class="block" @change="clearKey">
						<view class="cu-list menu text-left"  v-for="(item,index) in radioList" :key="index">
							<view class="cu-item" >
								<label class="flex justify-between align-center flex-sub">
									<view class="flex-sub" style="color: #101010;">{{item.name}}</view>
									<radio class="round" :class="radio==item.vlaue ?'checked':''" :checked="radio==item.vlaue ? true:false"
									 :value="item.value"></radio>
								</label>
							</view>
						</view>
					</radio-group>
				</view>
			</view>
		</view>
			
			
	</view>
</template>

<script>
	export default {
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var bgImage = this.bgImage;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		data() {
			return {
				searchValue: "",
				searchKey: "",
				modalName: false,
				pageType: 0,
				radioList:[{name:"确定",value:"1"}],
				radio: 0,
				paddingTop:"height:"+(this.StatusBar+50)+"px",
				focusValue:true
			}
		},
		onLoad() {
			if (uni.getStorageSync("pageType")) { //区分搜索页面跳转
				this.pageType = uni.getStorageSync("pageType");
			}
		},
		onShow() {
			this.focusValue=true;
			this.searchKey = uni.getStorageSync("searchHistory");
			if(this.searchKey){
				this.searchKey = this.searchKey.reverse();
			}
			uni.$on("clear",res=>{
				this.searchValue=""
			})
		},
		onHide() {
			this.focusValue=false;
		},
		methods: {
			clearKey(e) {
				this.radio = e.detail.value;
				if(this.radio==1){
					this.searchKey = [];
					this.modalName = false;
					uni.removeStorageSync('searchHistory');
					this.$prompt.none("已清空");
				}
			},
			crealData(){
				this.searchKey = [];
				uni.removeStorageSync('searchHistory');
				this.$prompt.none("已清空");
			},
			sel(item) {
				this.searchValue=item;
				this.search()
			},
			search() {
				var that =this;
				if (!that.searchValue) {
					that.$prompt.none("请输入搜索内容");
					return
				}
				/* 记录搜索的记录 */
				let history = uni.getStorageSync("searchHistory") == "" ? [] : uni.getStorageSync("searchHistory");
				if(history.length==0){
					history.push(that.searchValue);
				}else{
					history.push(that.searchValue);
					history =that.unique(history);//历史记录去重复					
				}
				uni.setStorageSync("searchHistory", history);
				if (that.pageType == 4) { //4为智能查询跳转过来
					uni.navigateTo({
						url: "/pages/smartSearchList/smartSearchList?searchValue=" + that.searchValue
					})
				} else {
					uni.navigateTo({
						url: "/pages/searchResults/searchResults?searchValue=" + that.searchValue
					})
				}
			},
			unique(arr){
			　　let hash=[];
			　　for (let i = 0; i < arr.length; i++) {
			　　　　if(hash.indexOf(arr[i]) === -1){
			　　　　　　hash.push(arr[i]);
			　　　　}
			 　  }
			      return hash;
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
	}
</script>

<style>
	page {
		background: #FFF;
	}

	.del-img {
		width: 50rpx;
		height: 50rpx;
	}

	.cu-list.grid>.cu-item uni-text {
		display: block;
		margin-top: 4px;
		color: black;
		font-size: 11px;
		line-height: 17px;
	}
	.action .text-white{
		font-size: 34rpx;
	}
	.cu-modal.show {
		overflow-y: auto;
		pointer-events: auto; 
	}
</style>