同步首页分类栏ui

components/home/JdLikeHomeHeader.uvue

@@ -6,7 +6,7 @@
 				:key="item.key"
 				class="jd2-module-item"
 				:class="isServiceModule ? 'jd2-module-item-service' : ''"
-				@click="emit('changeModule', item.key)"
+				@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 v-if="activeModule == item.key" :class="['jd2-module-line', isServiceModule ? 'jd2-module-line-service' : '']"></view>
@@ -34,18 +34,6 @@
 			</view>
 		</view>
 
-		<scroll-view v-if="showCategoryBar" class="jd2-category-scroll" direction="horizontal" :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>
 
@@ -86,20 +74,11 @@ const props = defineProps({
 	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: 'change-module', moduleKey: string): void
 	(e: 'update:searchKeyword', keyword: string): void
 	(e: 'search', keyword: string): void
 	(e: 'focusSearch'): void
@@ -108,7 +87,6 @@ const emit = defineEmits<{
 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')
-const showCategoryBar = computed((): boolean => props.activeModule != 'service')
 
 function handleInput(event: UniInputInputEvent | UniInputConfirmEvent) {
 	emit('update:searchKeyword', event.detail.value)
@@ -128,6 +106,7 @@ function handleSearch() {
 	background: #ffffff;
 	padding-bottom: 10rpx;
 	box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.05);
+	position: relative;
 }
 
 .jd2-header-service {
@@ -260,34 +239,4 @@ function handleSearch() {
 	color: #ffffff;
 }
 
-.jd2-category-scroll {
-	height: 56rpx;
-	white-space: nowrap;
-	margin-top: 12rpx;
-	padding-left: 16rpx;
-	padding-right: 16rpx;
-	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: 28rpx;
-	color: #444444;
-}
-
-.jd2-category-text-active {
-	color: #ff2d2f;
-	font-weight: 700;
-}
 </style>