medical-mall/components/home/JdLikeHomeHeader.uvue

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

		<view class="jd2-search-wrap" :style="capsuleStyle">
			<view class="jd2-search-box">
				<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 class="jd2-search-btn" @click="handleSearch">
					<text class="jd2-search-btn-text">搜索</text>
				</view>
			</view>
		</view>

		<scroll-view class="jd2-category-scroll" scroll-x="true" :show-scrollbar="false">
			<view class="jd2-category-row">
				<view
					v-for="item in categories"
					:key="item.id"
					class="jd2-category-item"
					@click="emit('changeCategory', item.id)"
				>
					<text :class="['jd2-category-text', activeCategory == item.id ? 'jd2-category-text-active' : '']">{{ item.name }}</text>
				</view>
			</view>
		</scroll-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: ''
	},
	categories: {
		type: Array<TopCategoryItem>,
		default: [] as Array<TopCategoryItem>
	},
	activeCategory: {
		type: String,
		default: ''
	}
})

const emit = defineEmits<{
	(e: 'changeModule', moduleKey: string): void
	(e: 'changeCategory', categoryId: 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;` : '')

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);
}

.jd2-module-row {
	flex-direction: row;
	align-items: flex-end;
	padding-left: 24rpx;
	padding-right: 24rpx;
	height: 78rpx;
	gap: 36rpx;
}

.jd2-module-item {
	align-items: center;
	justify-content: flex-end;
	height: 78rpx;
}

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

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

.jd2-module-line {
	margin-top: 8rpx;
	width: 32rpx;
	height: 6rpx;
	border-radius: 999rpx;
	background: #e2231a;
}

.jd2-search-wrap {
	padding-left: 24rpx;
	padding-right: 24rpx;
	padding-bottom: 10rpx;
}

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

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

.jd2-search-input {
	flex: 1;
	height: 68rpx;
	font-size: 26rpx;
	color: #222222;
	padding-right: 12rpx;
}

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

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

.jd2-category-scroll {
	height: 56rpx;
	white-space: nowrap;
	padding-left: 24rpx;
	padding-right: 24rpx;
	box-sizing: border-box;
}

.jd2-category-row {
	flex-direction: row;
	align-items: center;
	height: 56rpx;
}

.jd2-category-item {
	margin-right: 32rpx;
	height: 56rpx;
	justify-content: center;
}

.jd2-category-text {
	font-size: 26rpx;
	color: #444444;
}

.jd2-category-text-active {
	color: #ff2d2f;
	font-weight: 700;
}
</style>