dev/dcp-app-gate/pages/information/components/rf-search-bar.vue

<template>
	<view class="rf-search-bar bg-rf" :class="'bg-' + themeColor.name">
		<view class="header"
			:style="{width:merchantShow ? '100vw' : width+'px', marginTop: merchantShow ? 0 : inputTop+'px'}">
			<text class="header-text">{{title}}</text>
			<!-- 搜索框 -->
			<view class="input-box" @tap="toSearch">
				<!-- <input disabled class="input" /> -->
				<view class="wrapper">
					<uni-icons class="searchIcon" type="search" color="#666666" size="16" />
					<text class="keyword">{{ placeholder }}</text>
				</view>
			</view>
			<view class="addr">
				<!-- <text class="fa fa-bell-o" aria-hidden="true" style="color:#fff;font-size: 38upx;" ></text> -->
			</view>
		</view>
		<scroll-view scroll-x class="index-cate" v-if="isOpenIndexCate && categoryList.length > 0">
			<view v-for="(item, index) in categoryList" :key="index" class="index-cate-item"
				:class="tabCurrentIndex === index ? `text-${themeColor.name} active` : ''"
				@tap.stop="tabClick(index, item.id)">
				{{ item.title }}
			</view>
		</scroll-view>
	</view>
</template>
<script>
	// #ifdef H5
	import jweixin from '@/common/jweixin';
	// #endif
	import {
		productVirtualVerificationVerify
	} from '@/api/userInfo';

	export default {
		props: {
			headerShow: {
				type: Boolean,
				default: true
			},
			merchantData: {
				type: Object,
				default () {
					return {};
				}
			},
			merchantShow: {
				type: Boolean,
				default: false
			},
			categoryList: {
				type: Array,
				default () {
					return [];
				}
			},
			inputDisabled: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: null
			},
			icon: {
				type: String,
				default: null
			},
			title: {
				type: String,
				default: null
			}
		},
		computed: {
			themeColor() {
				return getApp().themeColor;
			}
		},
		data() {
			return {
				// placeholder: getApp().$i18n.locale == 'zh'?'请输入关键字': 'Please keywords',
				CustomBar: this.CustomBar,
				searchValue: this.placeholder,
				appLogo: getApp().$mSettingConfig.appLogo,
				isOpenScan: getApp().$mSettingConfig.isOpenScan,
				isOpenIndexCate: getApp().$mSettingConfig.isOpenIndexCate,
				height: 0,
				width: 0,
				inputTop: 0,
				tabCurrentIndex: 0
			};
		},
		created() {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.inputTop = obj.top ? (obj.top + (obj.height - 30) / 2) : (res.statusBarHeight + 7);
				}
			});
		},
		watch: {

		},
		methods: {
			tabClick(index, id) {
				this.tabCurrentIndex = index;
				this.$emit('tab', {
					id
				});
			},
			async toSearch() {
				await this.$emit('search', {
					searchValue: this.searchValue
				});
			}
		}
	};
</script>
<style scoped>
	.rf-search-bar {
		width: 750upx;
		background-image: linear-gradient(to left, #4BC0E2, #538BE7);
	}

	.header-text {
		color: #fff;
		font-size: 32upx;
	}

	.header {
		align-items: center;
		justify-content: center;
		z-index: 12;
		padding-bottom: 10upx;
		flex-direction: row;
		padding-left: 30upx;
	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 60vw;
		opacity: 0.9;
	}

	.merchant {
		line-height: 1;
		width: 100%;
		align-items: center;
		z-index: 12;
		font-weight: 500;
		font-size: 32upx;
		padding: 10upx 30upx 14upx;
	}

	.iconshouhuodizhi {
		font-size: 40upx;
		font-weight: 600;
		margin-right: 10upx;
	}

	.iconxiajiantou1 {
		margin-left: 4upx;
		font-size: 28upx;
	}

	.addr {
		margin: 0 20upx;
		height: 60upx;
		line-height: 60upx;
		padding-top: 16upx;
	}

	.iconfont {
		font-weight: 500;
		font-size: 56upx;
	}

	.logo {
		width: 45upx;
		height: 45upx;
		border-radius: 8upx;
		margin-left: 10upx;
	}

	.input-box {
		flex: 1;
		height: 60upx;
		line-height: 60upx;
		background-color: #fff;
		border-radius: 30upx;
		position: relative;
		align-items: center;
		margin: 6upx 0 0 20upx;
	}

	.input {
		flex: 1;
		padding-left: 28upx;
		height: 28upx;
		color: #888;
		font-size: 28upx;
	}

	.wrapper {
		flex: 1;
		align-items: center;
		font-size: 26upx;
		color: #909399;
		flex-direction: row;
	}

	.iconsousuo2 {
		font-size: 34upx;
		margin-right: 20upx;
	}

	.searchIcon {
		color: #999999;
	}

	.keyword {
		color: #999999;
		font-size: 26upx;
		margin-left: 20upx;
	}
</style>