dev/dcp-app-gate/pages/index/search/search.vue

<template>
	<view class="rf-search">
		<u-navbar  :back-text="i18n('Back')" :back-text-style="backStyle"
			back-icon-color="#fff" title-color="#fff" 
			:title="i18n('Search')" 
			:background="background">
		</u-navbar>
		<view class="search-box">
			<mSearch
				class="mSearch-input-box"
				:mode="1"
				button="inside"
				:placeholder="hotSearchDefault || ''"
				@search="doSearch(false)"
				@confirm="doSearch(false)"
				v-model="keyword"
			></mSearch>
		</view>
		<view class="search-keyword" @tap="blur">
			<scroll-view class="keyword-list-box" v-if="isShowKeywordList" scroll-y>
				<view
					class="keyword-entry"
					hover-class="keyword-entry-tap"
					v-for="row in keywordList"
					:key="row.keyword"
				>
					<view class="keyword-text" @tap="doSearch(row.keyword)">
						<rf-parser lazy-load :html="row.htmlStr"></rf-parser>
					</view>
					<view class="keyword-img" @tap="setkeyword(row)">
						<!--<image src="/static/HM-search/back.png"></image>-->
					</view>
				</view>
			</scroll-view>
			<scroll-view class="keyword-box" v-if="!isShowKeywordList" scroll-y>
				<view class="keyword-block">
					<view class="keyword-list-header">
						<view>{{i18n('HistorySearch')}}</view>
						<view>
							<text
								class="iconfont iconiconfontshanchu1"
								@tap="oldDelete"
							></text>
						</view>
					</view>
					<view class="keyword">
						<view
							v-for="(keyword, index) in oldKeywordList"
							@tap="doSearch(keyword)"
							:key="index"
							>{{ keyword }}</view
						>
					</view>
					<view class="hide-hot-tis" v-if="oldKeywordList.length === 0">
						<view>{{i18n('Norecord')}}</view>
					</view>
				</view>
				<view class="keyword-block" v-if="hotKeywordList">
					<view class="keyword-list-header">
						<view>{{i18n('Hotsearch')}}</view>
						<view>
							<text class="iconfont" :class="forbid" @tap="hotToggle"></text>
						</view>
					</view>
					<view class="keyword" v-if="forbid == 'iconai47'">
						<view
							v-for="(keyword, index) in hotKeywordList"
							@tap.stop="doSearch(keyword,'hot')"
							:key="index"
							>{{ i18n(keyword) }}</view
						>
					</view>
					<view class="hide-hot-tis" v-else>
						<view>{{$i18n.locale=='zh'?'当前搜热门搜索已隐藏':'Current popular search is hidden'}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
import mSearch from '@/components/rf-search/rf-search';
export default {
	data() {
		return {
			keyword: '',
			oldKeywordList: [],
			hotKeywordList: [],
			keywordList: [],
			background: {
				backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
			},
			backStyle: {
				color: '#fff'
			},
			forbid: 'iconai47',
			isShowKeywordList: false,
			hotSearchDefault: '',
			type: null ,// 搜索类型
			hotSerch:['cleanenergy','Smartgrid','Energystorage','UHV','GEI']
		};
	},
	onLoad(options) {
		this.initData(options);
	},
	components: {
		mSearch
	},
	methods: {
		i18n (data) {
		    return this.$t('common.'+data);
		},
		async initData(options) {
			if(options.data !=='undefined'){
				this.type = options.type;
				const search = JSON.parse(options.data || '{}');
				this.hotSearchDefault = search.hot_search_default || options.keyword;
				this.hotKeywordList = search.hot_search_list;
				this.loadOldKeyword();
			}else {
				this.hotKeywordList = this.hotSerch;
				this.loadOldKeyword();
			}
			
		},
		blur() {
			uni.hideKeyboard();
		},
		// 加载历史搜索,自动读取本地Storage
		loadOldKeyword() {
			uni.getStorage({
				key: 'OldKeys',
				success: res => {
					let OldKeys = JSON.parse(res.data);
					this.oldKeywordList = OldKeys;
				}
			});
		},
		// 顶置关键字
		setkeyword(data) {
			this.keyword = data.keyword;
		},
		// 清除历史搜索
		oldDelete() {
			uni.showModal({
				content: this.$i18n.locale=='zh'?'确定清除历史搜索记录？':'Are you sure you want to clear the history search',
				cancelText: this.$t('common.Cancel'), // 取消按钮的文字  
				confirmText: this.$t('common.submit'), // 确认按钮文字  
				success: res => {
					if (res.confirm) {
						this.oldKeywordList = [];
						uni.removeStorage({ key: 'OldKeys' });
					}
				}
			});
		},
		// 热门搜索开关
		hotToggle() {
			this.forbid = this.forbid === 'iconai47' ? 'iconyanjing' : 'iconai47';
		},
		// 执行搜索
		doSearch(key,hot) {
			key = key || this.keyword || this.defaultKeyword;
			if(hot) {
				key = this.i18n(key);
			}
			this.keyword = key;
			uni.navigateTo({
			  url: '/pages/order/search/search?keyword=' + key,
			});
			this.saveKeyword(key);// 保存为历史
			
			
		},
		// 保存关键字到历史记录
		saveKeyword(keyword) {
			uni.getStorage({
				key: 'OldKeys',
				success: res => {
					let OldKeys = JSON.parse(res.data);
					let findIndex = OldKeys.indexOf(keyword);
					if (findIndex === -1) {
						OldKeys.unshift(keyword);
					} else {
						OldKeys.splice(findIndex, 1);
						OldKeys.unshift(keyword);
					}
					// 最多10个纪录
					OldKeys.length > 10 && OldKeys.pop();
					uni.setStorage({
						key: 'OldKeys',
						data: JSON.stringify(OldKeys)
					});
					this.oldKeywordList = OldKeys; // 更新历史搜索
				},
				fail: () => {
					let OldKeys = [keyword];
					uni.setStorage({
						key: 'OldKeys',
						data: JSON.stringify(OldKeys)
					});
					this.oldKeywordList = OldKeys; // 更新历史搜索
				}
			});
		}
	}
};
</script>
<style lang="scss">
.rf-search {
	.search-box {
		width: 100%;
		background-color: rgb(242, 242, 242);
		padding: 15upx 2.5%;
		display: flex;
		justify-content: space-between;

		.mSearch-input-box {
			width: 100%;
		}

		.input-box > input {
			width: 100%;
			height: 60upx;
			font-size: 32upx;
			border: 0;
			border-radius: 60upx;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			padding: 0 3%;
			margin: 0;
			background-color: #ffffff;
		}
	}

	.search-keyword {
		width:100%;
		background-color: rgb(242, 242, 242);
		margin: 0 auto;
		.keyword-list-box {
			height: calc(100vh - 110upx);
			padding-top: 10upx;
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;
		}

		.keyword-entry {
			width: 94%;
			height: 80upx;
			margin: 0 3%;
			font-size: 30upx;
			color: #333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: solid 1upx #e7e7e7;

			image {
				width: 60upx;
				height: 60upx;
			}

			.keyword-text {
				width: 90%;
			}

			.keyword-img {
				width: 10%;
				justify-content: center;
			}
		}

		.keyword-box {
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;

			.keyword-block {
				padding: 10upx;
				margin:10upx;
				.keyword-list-header {
					width: 100vw;
					padding: 10upx 3%;
					font-size: 27upx;
					color: #333;
					display: flex;
					justify-content: space-between;

					image {
						width: 40upx;
						height: 40upx;
					}
				}

				.keyword {
					width: 100vw;
					padding: 3px 3%;
					display: flex;
					flex-flow: wrap;
					justify-content: flex-start;
				}

				.hide-hot-tis {
					display: flex;
					justify-content: center;
					font-size: 28upx;
					color: #6b6b6b;
				}

				.keyword > view {
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 60upx;
					padding: 0 20upx;
					margin: 10upx 20upx 10upx 0;
					height: 60upx;
					font-size: 28upx;
					background-color: rgb(242, 242, 242);
					color: #6b6b6b;
				}
			}
		}
	}

	.iconfont {
		font-size: $font-lg + 12upx;
	}
}
</style>