h5-elab-open-ownerUnion/components/subComponents/dmSearchBar.vue

<template>
	<view class="searchView" :style="{'margin-top':top+'rpx', 'height': isSearchType ? '64rpx' : '', 'background-color': isSearchType ? '#fff': '', 'border-radius': isSearchType ? '20rpx' : ''}">
		<block v-if="isSearchType">
			<image class="search-img" src="../../static/icons/icon_search@2x.png" mode=""></image>
			<input class="input" type="text" :placeholder="placeholder" v-model="keyword" confirm-type='search' @confirm='search'/>
		</block>
		
		<view class="btnView" @click="exportAction" v-if="isExport">
			<view class="line" v-if="isSearchType"></view>
			<text class="title">导出</text>
			<image class="btn-img" src="../../static/icons/icon_export@2x.png" mode=""></image>
		</view>
		<view class="btnView" @click="screenAction" v-if="isScreen">
			<view class="line" v-if="isSearchType"></view>
			<text class="title">{{screenTitle}}</text>
			<image class="btn-img" src="../../static/icons/icon_screening@2x.png" mode=""></image>
		</view>
		<view class="btnView" @click="sortAction" v-if="isSort">
			<text class="title">{{sortString}}</text>
			<image class="btn-img" src="../../static/icons/icon_drop@2x.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			top:{
				type:Number,
				default:30
			},
			placeholder:{
				type:String,
				default:'搜索顾问和客户姓名、手机号'
			},
			isExport:{
				type:Boolean,
				default:true
			},
			isScreen:{
				type:Boolean,
				default:false
			},
			value:String,
			isSearchType: {
				type: Boolean,
				default: false
			},
			screenTitle: {
				type: String,
				default: '筛选'
			},
			isSort: {
				type: Boolean,
				default: false
			},
			sortString: {
				type: String,
				default: '降序'
			}
		},
		data() {
			return {
				keyword:this.value
			}
		},
		watch:{
			keyword(val){
				this.$emit('input',val)
			}
		},
		mounted() {},
		computed: {},
		methods: {
			search(e){
				this.$emit('search',e.detail.value)
				uni.hideKeyboard();
			},
			exportAction(){
				this.$emit('export')
			},
			screenAction(){
				this.$emit('screen')
			},
			sortAction() {
				this.$emit('sortAction')
			}
		},
	}
</script>


<style scoped lang="scss">
	.searchView {
		// margin-left: 20rpx;
		width: 710rpx;
		// height: 64rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// background-color: #fff;
		// border-radius: 20rpx;

		.search-img {
			margin-left: 16rpx;
			width: 44rpx;
			height: 44rpx;
		}

		.input {
			flex: 1;
			margin-left: 8rpx;
			height: 100%;
			color: #999;
			font-size: 24rpx;
			font-family: Verdana, Verdana-Regular;
			font-weight: 400;
			text-align: left;
			color: #999999;
		}

		.btnView {
			// margin-left: 8rpx;
			display: flex;
			align-items: center;

			.line {
				width: 2rpx;
				height: 26rpx;
				background-color: #e0e0e0;
			}

			.title {
				margin-left: 20rpx;
				font-size: 24rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: right;
				color: #333333;
			}

			.btn-img {
				margin-left: 8rpx;
				margin-right: 16rpx;
				width: 26rpx;
				height: 26rpx;
			}
		}
	}
</style>