ydd_front/mer_uniapp/components/searchBox.vue

<template>
	<view  class="acea-row search-contain" :style="{'margin-top':searchTop+'px'}">
		<text class='iconfont icon-fanhui2' @click="toBack" v-if="toBackShow"></text>
		<view class='search-box acea-row row-between-wrapper' :style="[searchBoxStyle]">
			<text class='iconfont icon-sousuo2'></text>
			<input  :value="searchVal" @confirm="inputSearch" type='text' confirm-type='search' name="search" placeholder='点击搜索商品' placeholder-class='placeholder' maxlength="20"></input>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//是否展示返回按钮
			toBackShow: {
				type: Boolean,
				default: true
			},
			searchValue:{
				type: String,
				default: ''
			}
		},
		data(){
			return{
				searchVal:'',
				searchTop:0,
				searchRight:0,
				searchHeight:0,
				statusWidth:0,
			}
		},
		watch:{
			searchValue(val){
				this.searchVal=val
			}
		},
		computed:{
			searchBoxStyle(){
				return {
					height:this.searchHeight + 'px',
					flex:1,
					marginRight:this.statusWidth + this.searchRight+'px',
				}
			}
		},
		created() {
			const res = uni.getMenuButtonBoundingClientRect()
			this.searchTop=uni.getMenuButtonBoundingClientRect().top
			const statusRight = res.right //胶囊右边界坐标
			const jnHeight = res.height //胶囊高度
			this.statusWidth= res.width
			this.searchHeight=jnHeight
			//搜索框宽度计算
			uni.getSystemInfo({
				success:res=>{
					this.searchRight=res.windowWidth-statusRight
				}
			})
		},
		methods:{
			inputSearch(e){
				this.$emit('searchChange',e)
			},
			toBack(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-contain{
		padding: 0 20rpx 10rpx 0;
	}
	.search-box {
		margin-left: 16rpx;
		background-color: #f7f7f7;
		border-radius: 33rpx;
		padding: 0 35rpx;
		box-sizing: border-box;
		height: 66rpx;
	}
	.icon-fanhui2{
		line-height: 66rpx;
	}
	.search-box input {
		width: 90%;
		font-size: 26rpx;
	}

	.search-box .placeholder {
		color: #bbb;
	}

	.search-box .iconfont {
		color: #000;
		font-size: 35rpx;
	}
</style>