medical-mall/components/home/JdLikeHomeHeader.uvue

<template>
	<view :class="['jd2-header', isServiceModule ? 'jd2-header-service' : '']" :style="headerStyle">
		<view class="jd2-module-row" :style="capsuleStyle">
			<view
				v-for="item in modules"
				:key="item.key"
				:class="['jd2-module-item', activeModule == item.key ? 'jd2-module-item-active' : '', isServiceModule ? 'jd2-module-item-service' : '']"
				@click="emit('change-module', item.key)"
			>
				<text :class="['jd2-module-text', activeModule == item.key ? 'jd2-module-text-active' : '', isServiceModule ? 'jd2-module-text-service' : '']">{{ item.label }}</text>
			</view>
		</view>

		<view class="jd2-search-wrap">
			<view :class="['jd2-search-box', isServiceModule ? 'jd2-search-box-service' : '']">
				<view class="jd2-search-input-wrap">
					<text class="jd2-search-icon">⌕</text>
					<input
						class="jd2-search-input"
						:value="searchKeyword"
						:placeholder="placeholder"
						placeholder-style="color:#b5b5b5"
						confirm-type="search"
						@input="handleInput"
						@confirm="handleConfirm"
						@click="emit('focusSearch')"
					/>
				</view>
				<view :class="['jd2-search-btn', isServiceModule ? 'jd2-search-btn-service' : '']" @click="handleSearch">
					<text class="jd2-search-btn-text">搜索</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="uts">
import { computed } from 'vue'

type TopModuleItem = {
	key: string
	label: string
}

type TopCategoryItem = {
	id: string
	name: string
}

const props = defineProps({
	statusBarHeight: {
		type: Number,
		default: 0
	},
	capsuleRight: {
		type: Number,
		default: 0
	},
	modules: {
		type: Array<TopModuleItem>,
		default: [] as Array<TopModuleItem>
	},
	activeModule: {
		type: String,
		default: 'home'
	},
	searchKeyword: {
		type: String,
		default: ''
	},
	placeholder: {
		type: String,
		default: ''
	}
})

const emit = defineEmits<{
	(e: 'change-module', moduleKey: string): void
	(e: 'update:searchKeyword', keyword: string): void
	(e: 'search', keyword: string): void
	(e: 'focusSearch'): void
}>()

const headerStyle = computed((): string => `padding-top:${props.statusBarHeight}px;`)
const capsuleStyle = computed((): string => props.capsuleRight > 0 ? `padding-right:${props.capsuleRight}px;` : '')
const isServiceModule = computed((): boolean => props.activeModule == 'service')

function handleInput(event: UniInputInputEvent | UniInputConfirmEvent) {
	emit('update:searchKeyword', event.detail.value)
}

function handleConfirm(event: UniInputConfirmEvent) {
	emit('search', event.detail.value)
}

function handleSearch() {
	emit('search', props.searchKeyword)
}
</script>

<style scoped>
.jd2-header {
	background: #ffffff;
	padding-bottom: 10rpx;
	box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.05);
	position: relative;
}

.jd2-header-service {
	background: linear-gradient(180deg, #eafbf7 0%, #f4f8fb 100%);
	box-shadow: 0 8rpx 20rpx rgba(15, 118, 110, 0.08);
}

.jd2-module-row {
	flex-direction: row;
	align-items: center;
	padding-left: 20rpx;
	padding-right: 24rpx;
	height: 62rpx;
	box-sizing: border-box;
	padding-top: 6rpx;
}

.jd2-module-item {
	align-items: center;
	justify-content: center;
	min-width: 132rpx;
	height: 56rpx;
	margin-right: 20rpx;
	padding-left: 24rpx;
	padding-right: 24rpx;
	border-radius: 999rpx;
	background-color: #eceff3;
	border-width: 2rpx;
	border-style: solid;
	border-color: transparent;
	box-sizing: border-box;
}

.jd2-module-item-service {
	margin-right: 20rpx;
}

.jd2-module-text {
	font-size: 32rpx;
	font-weight: 400;
	color: #222222;
	line-height: 42rpx;
}

.jd2-module-text-service {
	color: #436072;
}

.jd2-module-text-active {
	font-size: 36rpx;
	font-weight: 700;
	color: #e2231a;
}

.jd2-header-service .jd2-module-text-active {
	color: #0f766e;
}

.jd2-module-item-active {
	border-color: rgba(215, 39, 39, 0.16);
	background-color: #fef2f2;
	box-shadow: 0 10rpx 22rpx rgba(215, 39, 39, 0.08);
}

.jd2-module-line {
	display: none;
}

.jd2-module-line-service {
	display: none;
}

.jd2-search-wrap {
	width: 100%;
	margin-top: 18rpx;
	padding-left: 16rpx;
	padding-right: 16rpx;
	box-sizing: border-box;
}

.jd2-search-box {
	width: 100%;
	height: 68rpx;
	border-width: 2rpx;
	border-style: solid;
	border-color: #ff2d2f;
	border-radius: 12rpx;
	background: #ffffff;
	flex-direction: row;
	align-items: center;
	overflow: hidden;
	box-sizing: border-box;
}

.jd2-search-box-service {
	border-color: #b9eadf;
	border-radius: 999rpx;
	box-shadow: 0 8rpx 20rpx rgba(15, 118, 110, 0.08);
}

.jd2-search-input-wrap {
	flex: 1;
	min-width: 0;
	height: 100%;
	flex-direction: row;
	align-items: center;
	padding-left: 18rpx;
	padding-right: 18rpx;
	box-sizing: border-box;
}

.jd2-search-icon {
	width: 40rpx;
	text-align: center;
	font-size: 28rpx;
	color: #999999;
}

.jd2-search-input {
	flex: 1;
	height: 68rpx;
	font-size: 28rpx;
	color: #222222;
	min-width: 0;
}

.jd2-search-btn {
	width: 104rpx;
	height: 100%;
	align-items: center;
	justify-content: center;
	background: #ff2d2f;
}

.jd2-search-btn-service {
	background: #16a085;
}

.jd2-search-btn-text {
	font-size: 30rpx;
	font-weight: 700;
	color: #ffffff;
}

</style>