baiyuApp/pages_mall/components/SearchBar.vue

<template>
	<view class="search-bar" :style="{ background:`url(${bgColor})`}">
		<view class="status_bar" :style="{ height: statusBarHeight}"></view>
		<!-- <view class="top-title">
			<view class="name">{{ title }}</view>
		</view> -->
		<view class="func-cont" :style="{marginTop: marginTop}">
			<view class="search-cont" :style="{ width: searchWidth }" @tap.stop="goPage">
				<image class="icon-search" :src="searchIcon" mode=""></image>
				<input type="text" :value="keyword" :placeholder="placeholder" placeholder-class="placeholder"
					disabled />
			</view>
			<!-- <uni-badge size="small" :text="cartCount" absolute="rightTop" type="error" v-show="cartCount > 0">
				<view class="img-item" @click="$emit('cartClick')">
					<image :src="cartIcon" mode=""></image>
				</view>
			</uni-badge>
			<view class="img-item" v-show="cartCount <= 0" @click="$emit('cartClick')">
				<image :src="cartIcon" mode=""></image>
			</view>
			<view class="img-item" style="position: relative;">
				<image :src="serviceIcon" mode=""></image>
				<button class="contact-btn" open-type="contact"></button>
			</view> -->
		</view>
	</view>
</template>

<script>
export default {
	name: 'SearchBar',
	props: {
		title: { type: String, default: '岚财优选' },
		keyword: { type: String, default: '' },
		placeholder: { type: String, default: '请输入产品名称' },
		bgColor: { type: String, default: 'rgba(43,199,185, 0)' },
		statusBarHeight: { type: String, default: ''},
		cartCount: { type: Number, default: 0 },
		searchWidth: { type: String, default: '' },
		marginTop:{ type: String, default: '' },
		searchIcon: {
			type: String,
			// default: 'https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/search.png',
			default: '/static/images/search.png'
		},
		cartIcon: {
			type: String,
			default: 'https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/cart_wihte.png'
		},
		serviceIcon: {
			type: String,
			default: 'https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/customer.png'
		}
	},
	methods:{
		goPage(){
			uni.navigateTo({ url: '/pages_mall/productList' })
		}
	}
};
</script>
<style lang="stylus">
	.placeholder{
		color: rgba(0,0,0,0.25) !important;
	}
</style>
<style lang="scss" scoped>
.search-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	background-size: 100% !important;
}
.top-title .name {
	font-size: 36rpx;
	font-weight: bold;
	color: #fff;
	padding: 20rpx 0;
}
.func-cont {
	display: flex;
	align-items: center;
	padding: 0 24rpx 24rpx;
}
.search-cont {
	display: flex;
	align-items: center;
	height: 64rpx;
	background: rgba(255,255,255,0.5);
	border-radius: 38rpx;
	// padding: 0 24rpx;
	// flex: 1;
	// margin-right: 20rpx;
}
.icon-search {
	width: 44rpx;
	height: 44rpx;
	margin-right: 16rpx;
}
.search-cont input {
	flex: 1;
	pointer-events: none;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: rgba(0,0,0,0.25);
	line-height: 44rpx;
}
.img-item {
	width: 48rpx;
	height: 48rpx;
	margin-left: 24rpx;
}
.img-item image {
	width: 100%;
	height: 100%;
}
.contact-btn {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
</style>