shopping-search.vue

<template>
	<view class="condition-box">
		<view class="search-box">
			<image :src="icon" class="icon"></image>

			<input class="uni-input" :value="searchValue" confirm-type="search" @confirm="onSearch" @input="onInput"
				:placeholder="placeholder" @keyup.enter.native="onSearch" placeholder-style="color:#B9B9B9" />
		</view>
		<view class="screen-box" @click="onScreen">
			<image class="image" mode="aspectFill" :src="web('shaixuan.png')"></image>
		</view>
	</view>
</template>

<script>
	/**
	 * 自营商城模块
	 * @description 标题栏
	 * @property {String} placeholder  搜索框placeholder
	 */
	import {
		web
	} from '@/utils/util.js'
	export default {
		props: {
			placeholder: {
				type: String,
				default: '请输入'
			}
		},
		data() {
			return {
				searchValue: '',
				icon: web('icon_search.png')
			}
		},
		watch: {

		},
		methods: {
			web(name) {
				return web(name)
			},
			onInput({
				detail
			}) {
				this.searchValue = detail.value
			},
			onSearch() {
				this.$emit('search', this.searchValue)
			},
			onScreen() {
				this.$emit('screen')
			}
		}
	}
</script>
<style lang="scss">
	.condition-box {
		display: flex;
		align-items: center;

		.search-box {
			flex: auto;
			position: relative;

			.uni-input {
				font-size: 14px;
				color: #333;
				height: 88rpx;
				line-height: 66rpx;

				border-radius: 12rpx;
				padding-left: 42px;
				padding-right: 10px;
				background: #F3F3F3;
			}

			.icon {
				position: absolute;
				left: 10px;
				top: 10px;
				width: 48rpx;
				height: 48rpx;
				z-index: 1;
			}
		}

		.screen-box {
			flex: none;
			height: 100%;
			display: flex;
			align-items: center;
			margin-left: 30rpx;

			.text {
				font-size: 28rpx;
				color: #99A0AF;
			}

			.image {
				width: 48rpx;
				height: 48rpx;
				margin-left: 5px;
			}
		}
	}
</style>