实现服务页面接入
This commit is contained in:
240
components/home/JdLikeHomeHeader.uvue
Normal file
240
components/home/JdLikeHomeHeader.uvue
Normal file
@@ -0,0 +1,240 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user