caimei-applets-hehe/components/uni-components/uni-search/or-search.vue

<template name="or-search">
	<view>
		<view class="search">
			<view class="search-input">
				<text class="iconfont icon-iconfonticonfontsousuo1"></text>
				<input maxlength="20" focus type="text" value="" confirm-type="search" @focus="onFocus" @input="onShowClose" @confirm="searchStart()" placeholder="请输入商品关键词" v-model.trim="searchText"/>
				<text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
			</view>
			<view class="search-btn" @click="searchStart()">
				搜索
			</view>
		</view>
		<view class="search-container">
			<view :class="'s-' + theme" v-if="isSearchHistory">
				<view class="header">
					搜索历史
					<text class="iconfont icon-shanchu" @click="delhistory"></text>
				</view>
				<view class="list">
					<view v-for="(item,index) in serachRecordList" :key="index" @click="keywordsClick(item.searchWord)">{{item.searchWord}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import authorize from '@/common/authorize.js'
	export default{
		name:"or-search",
		props:{
			isFocus:{	//是否自动获取焦点
				type: Boolean,
				default: false
			},
			theme:{	//选择块级显示还是圆形显示
				type: String,
				default: 'block'
			}
		},
		data() {
			return {
				searchText:'',								//搜索关键词
				alertText:'确定删除全部历史记录?',
				isShowDelModal:false,						//控制显示删除弹窗
				isShowClose:false,							//是否显示清空输入框图标
				isSearchHistory:false,						//是都显示搜索历史
				serachRecordList:[]
			};
		},
		created() {
		},
		methods: {
			initGetSerachRecord(){
				authorize.getCode('weixin').then(wechatcode =>{
					this.$api.get('/search/history',{organizeID:this.userOrganizeID,code:wechatcode},
						response =>{
							if(response.code == '1'){
								this.serachRecordList = response.data
								if(this.serachRecordList.length>0){
									this.isSearchHistory = true
								}else{
									this.isSearchHistory = false
								}
							}else{
								this.$util.msg(response.msg,2000)
							}							
						}
					)
				})
			},
			searchStart: function() {	//触发搜索
				let _this = this;
				if (_this.searchText == '') {
					this.$util.msg('请输入商品关键词',2000);
				}else{
					_this.isSearchHistory = false
					_this.$emit('getSearchText', _this.searchText)
				}
			},
			onShowClose () { //输入框失去焦点时触发
				this.inputEmpty(this.searchText)
			},
			onFocus () { //输入框获取焦点时触发
				this.inputEmpty(this.searchText)
				this.initGetSerachRecord()
			},
			delInputText () { //清除输入框内容
				this.searchText = ''
				this.isShowClose = false
				this.$parent.isShowWrapper = false
				this.inputEmpty(this.searchText)
				this.initGetSerachRecord()
			},
			keywordsClick (item) {	//关键词搜索与历史搜索
				this.searchText = item;
				this.searchStart();
			},
			delhistory () {		//清空历史记录
				this.isShowDelModal = true;				
			},
			confirmDetele() {
				this.isShowDelModal = false;
				authorize.getCode('weixin').then(wechatcode =>{
					this.$api.get('/search/deleteOrderRecord',{organizeID:this.userOrganizeID,code:wechatcode},
						response =>{
							if(response.code == '1'){
								this.serachRecordList=[];
								this.isSearchHistory = false
							}else{
								this.$util.msg(response.msg,2000)
							}							
						}
					)
				})
			},
			inputEmpty(val){
				this.$parent.isShowWrapper = false
				if(val != ''){
					this.isShowClose = true
				}else{
					this.isShowClose = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni.scss";
	.search{
		width: 702rpx;
		height: 80rpx;
		padding: 12rpx 24rpx;
		border-bottom: 1px solid #F0F0F0;
		position: fixed;
		top: 0;
		left: 0;
		background: #FFFFFF;
		z-index: 1001;
		.search-input{
			width: 448rpx;
			height: 80rpx;
			padding: 0 68rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			position: relative;
			background: #F0F0F0;
			float: left;
			.icon-iconfonticonfontsousuo1{
				font-size: 36rpx;
				color: #8A8A8A;
				position: absolute;
				left: 24rpx;
				z-index: 10;
			}
			.icon-shanchu1{
				font-size: 36rpx;
				color: #8A8A8A;
				position: absolute;
				right: 24rpx;
				top: 0;
				padding: 0 10rpx;
				z-index: 10;
			}
			input{
				width: 448rpx;
				height: 80rpx;
				background-color: #F0F0F0;
				font-size: 26rpx;
			}
		}
		.search-btn{
			width: 118rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: $color-system;
			font-size: 30rpx;
			text-align: center;
			float: left;
		}
		.voice-icon{
			width: 36rpx;
			height: 36rpx;
			padding: 16rpx 20rpx 16rpx 0;
			position: absolute;
			left: 16rpx;
			top: 4rpx;
			z-index: 10;
		}
		
	}
	.search-container{
		padding-top: 106rpx;
	}
	.s-block{
		background: #FFFFFF;
		.header{
			font-size: 32rpx;
			padding:40rpx 24rpx 22rpx 24rpx;
			line-height: 42rpx;
			font-size: 30rpx;
			font-weight: bold;
			position: relative;
			.icon-shanchu{
				font-size: 36rpx;
				color: #333333;
				float: right;
				padding: 0 10rpx;
				z-index: 10;
				font-weight: normal;
			}
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 40rpx;
			view{
				color: #8A8A8A;
				font-size: 24rpx;
				box-sizing: border-box;
				text-align: center;
				height: 48rpx;
				line-height: 48rpx;
				border-radius: 24rpx;
				margin:12rpx;
				padding:.0 30rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				background-color: #F3F3F3;
			}
		}
	}
	.s-circle{
		margin-top: 30rpx;
		.header{
			font-size: 32rpx;
			padding: 30rpx;
			border-bottom: 2rpx solid #F9F9F9;
			position: relative;
			image{
				width: 36rpx;
				height: 36rpx;
				padding: 10rpx;
				position: absolute;
				right: 40rpx;
				top: 24rpx;
			}
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			padding: 0 30rpx 20rpx;
			view{
				padding: 8rpx 30rpx;
				margin: 20rpx 30rpx 0 0;
				font-size: 28rpx;
				color: #8A8A8A;
				background-color: #F7F7F7;
				box-sizing: border-box;
				text-align: center;
				border-radius: 20rpx;
			}
		}
	}
	.wanted-block{
		margin-top: 30rpx;
		.header{
			font-size: 32rpx;
			padding: 30rpx;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			view{
				width: 50%;
				color: #8A8A8A;
				font-size: 28rpx;
				box-sizing: border-box;
				text-align: center;
				padding: 20rpx 0;
				border-top: 2rpx solid #FFF;
				border-left: 2rpx solid #FFF;
				background-color: #F7F7F7;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
	.wanted-circle{
		margin-top: 30rpx;
		.header{
			font-size: 32rpx;
			padding: 30rpx;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			padding: 0 30rpx 20rpx;
			view{
				padding: 8rpx 30rpx;
				margin: 20rpx 30rpx 0 0;
				font-size: 28rpx;
				color: #8A8A8A;
				background-color: #F7F7F7;
				box-sizing: border-box;
				text-align: center;
				border-radius: 20rpx;
			}
		}
	}
</style>