huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现服务页面接入

Browse Source
This commit is contained in:
huangzhenbao
2026-05-14 17:02:16 +08:00
parent 0ffbc53902
commit 309f50a637
26 changed files with 2216 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

767
components/home/HomeMallContent.uvue Normal file
View File

@@ -0,0 +1,767 @@
<template>
<view class="hmall-content">
<view v-if="currentCategory != 'recommend' && secondaryCategoryDisplay.length > 0" class="hmall-secondary-panel">
<view
v-for="(item, index) in secondaryCategoryDisplay"
:key="item.id + '-' + index"
:class="['hmall-secondary-item', selectedSubCategoryId == item.id ? 'hmall-secondary-item-active' : '']"
@click="emit('secondary-category-click', item)"
>
<view class="hmall-secondary-icon-wrap">
<image v-if="isImageIcon(item.icon)" class="hmall-secondary-image" :src="item.icon" mode="aspectFill" />
<text v-else class="hmall-secondary-icon-text">{{ getCategoryDisplayIcon(item) }}</text>
</view>
<text class="hmall-secondary-name">{{ item.name }}</text>
</view>
</view>
<view v-if="currentCategory == 'recommend' && marketingChannels.length > 0" class="hmall-recommend-section">
<view
v-for="(channel, index) in marketingChannels"
:key="channel.id + '-' + index"
class="hmall-recommend-card"
:style="{ backgroundColor: channel.bgColor }"
@click="emit('select-channel', channel)"
>
<view class="hmall-recommend-header">
<view class="hmall-recommend-title-row">
<text class="hmall-recommend-title">{{ channel.title }}</text>
<text class="hmall-recommend-badge" :style="{ color: channel.themeColor, borderColor: channel.themeColor }">{{ channel.badge }}</text>
</view>
<text class="hmall-recommend-subtitle">{{ channel.subtitle }}</text>
</view>
<view class="hmall-recommend-products">
<view
v-for="(product, pIndex) in channel.products"
:key="product.id + '-' + pIndex"
class="hmall-recommend-product"
>
<image class="hmall-recommend-product-image" :src="getChannelProductImage(product)" mode="aspectFill" />
<text class="hmall-recommend-product-name">{{ product.shortName }}</text>
<view class="hmall-recommend-price-row">
<text class="hmall-recommend-product-tag" :style="{ color: channel.themeColor }">{{ product.tag }}</text>
<text class="hmall-recommend-product-price" :style="{ color: channel.themeColor }">¥{{ formatChannelPrice(product.price) }}</text>
</view>
<text v-if="product.marketPrice > product.price" class="hmall-recommend-market-price">¥{{ formatChannelPrice(product.marketPrice) }}</text>
</view>
</view>
</view>
</view>
<view v-else-if="currentCategory != 'recommend' && categorySimpleChannels.length > 0" class="hmall-simple-section">
<view
v-for="(channel, index) in categorySimpleChannels"
:key="channel.id + '-' + index"
:class="['hmall-simple-card', index == 0 ? 'hmall-simple-card-with-divider' : '']"
@click="emit('select-simple-channel', channel)"
>
<view class="hmall-simple-left">
<view class="hmall-simple-title-row">
<text class="hmall-simple-icon">{{ channel.icon }}</text>
<text class="hmall-simple-title">{{ channel.title }}</text>
</view>
<text class="hmall-simple-subtitle">{{ channel.subtitle }}</text>
</view>
<view class="hmall-simple-cover-wrap">
<view v-for="(cover, coverIndex) in channel.coverImages" :key="channel.id + '-cover-' + coverIndex" class="hmall-simple-cover-slot">
<image v-if="isImageIcon(cover)" class="hmall-simple-cover-image" :src="cover" mode="aspectFill" />
<view v-else class="hmall-simple-cover-fallback">
<text class="hmall-simple-cover-text">{{ cover }}</text>
</view>
</view>
</view>
</view>
</view>
<view class="hmall-feed-divider"></view>
<view v-if="hotProducts.length > 0" class="hmall-products-grid hmall-products-grid-dense">
<view
v-for="(product, index) in hotProducts"
:key="product.id + '-' + index"
class="hmall-product-card hmall-product-card-skeleton"
@click="emit('select-product', product)"
>
<view class="hmall-product-image-wrapper hmall-product-image-wrapper-fixed">
<image
class="hmall-product-image"
:src="getProductCover(product)"
@error="() => handleProductImageError(product.id)"
mode="aspectFill"
/>
</view>
<view class="hmall-product-body">
<view v-if="getProductCardTags(product).length > 0" class="hmall-product-card-tags">
<text
v-for="(tag, tagIndex) in getProductCardTags(product)"
:key="product.id + '-card-tag-' + tagIndex"
class="hmall-product-card-tag"
>
{{ tag }}
</text>
</view>
<text class="hmall-product-title">{{ getProductTitle(product) }}</text>
<text v-if="getProductHighlight(product) != ''" class="hmall-product-highlight">{{ getProductHighlight(product) }}</text>
<view v-if="getProductServiceTags(product).length > 0" class="hmall-product-service-tags">
<text
v-for="(tag, tagIndex) in getProductServiceTags(product)"
:key="product.id + '-service-tag-' + tagIndex"
class="hmall-product-service-tag"
>
{{ tag }}
</text>
</view>
<view class="hmall-product-price-row">
<text class="hmall-product-price-value">¥{{ formatProductPrice(product) }}</text>
<text v-if="showMarketPrice(product)" class="hmall-product-market-price">¥{{ formatMarketPrice(product) }}</text>
</view>
<text v-if="getProductSalesText(product) != ''" class="hmall-product-sales">{{ getProductSalesText(product) }}</text>
</view>
</view>
</view>
<view v-else-if="loading" class="hmall-loading-state">
<text class="hmall-loading-text">正在加载商品...</text>
</view>
<EmptyState v-else text="当前分类暂无商品"></EmptyState>
<view v-if="loading || showLoadMore" class="hmall-load-more-status">
<text class="hmall-loading-text">正在加载更多商品...</text>
</view>
<view v-if="!hasMore && hotProducts.length > 0" class="hmall-feed-end-state">
<text class="hmall-feed-end-text">已经到底了</text>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
import EmptyState from '@/components/consumer/EmptyState.uvue'
import type { Category, Product } from '@/utils/supabaseService.uts'
import type { MarketingChannel, ChannelProduct, SimpleCategoryChannel } from '@/utils/mockChannelData.uts'
const failedProductImageIds = ref<string[]>([])
const props = defineProps({
currentCategory: {
type: String,
default: 'recommend'
},
selectedSubCategoryId: {
type: String,
default: ''
},
secondaryCategoryDisplay: {
type: Array<Category>,
default: [] as Array<Category>
},
marketingChannels: {
type: Array<MarketingChannel>,
default: [] as Array<MarketingChannel>
},
categorySimpleChannels: {
type: Array<SimpleCategoryChannel>,
default: [] as Array<SimpleCategoryChannel>
},
hotProducts: {
type: Array<Product>,
default: [] as Array<Product>
},
loading: {
type: Boolean,
default: false
},
hasMore: {
type: Boolean,
default: true
},
showLoadMore: {
type: Boolean,
default: false
}
})
const emit = defineEmits<{
(e: 'secondary-category-click', category: Category): void
(e: 'select-channel', channel: MarketingChannel): void
(e: 'select-simple-channel', channel: SimpleCategoryChannel): void
(e: 'select-product', product: Product): void
}>()
function isImageIcon(icon: string): boolean {
if (icon == '') {
return false
}
return icon.indexOf('http') == 0 || icon.indexOf('/') == 0
}
function getCategoryDisplayIcon(category: Category): string {
const icon = category.icon ?? ''
if (icon != '' && !isImageIcon(icon)) {
return icon
}
const name = category.name ?? ''
return name != '' ? name.substring(0, 1) : '品'
}
function getChannelProductImage(product: ChannelProduct): string {
return product.image != '' ? product.image : '/static/images/default.png'
}
function formatChannelPrice(price: number): string {
const rounded = Math.round(price)
if (Math.abs(price - rounded) < 0.001) {
return rounded.toString()
}
return price.toFixed(1)
}
function getProductCover(product: Product): string {
if (failedProductImageIds.value.indexOf(product.id) != -1) {
return '/static/images/default.png'
}
if (product.main_image_url != null && product.main_image_url != '') {
return product.main_image_url
}
if (product.images != null && product.images.length > 0 && product.images[0] != '') {
return product.images[0]
}
if (product.image_url != null && product.image_url != '') {
return product.image_url
}
return '/static/images/default.png'
}
function handleProductImageError(productId: string): void {
if (productId == '') {
return
}
if (failedProductImageIds.value.indexOf(productId) == -1) {
failedProductImageIds.value.push(productId)
}
}
function getProductTitle(product: Product): string {
if (product.short_title != null && product.short_title != '') {
return product.short_title
}
if (product.name != null && product.name != '') {
return product.name
}
return product.id
}
function getProductCardTags(product: Product): string[] {
if (product.card_tags != null && product.card_tags.length > 0) {
return product.card_tags.slice(0, 2)
}
const fallback: string[] = []
if (product.is_hot == true) fallback.push('热卖')
if (product.is_new == true && fallback.length < 2) fallback.push('新品')
if (product.is_featured == true && fallback.length < 2) fallback.push('精选')
return fallback
}
function getProductServiceTags(product: Product): string[] {
if (product.service_tags != null && product.service_tags.length > 0) {
return product.service_tags.slice(0, 3)
}
return [] as string[]
}
function getProductHighlight(product: Product): string {
if (product.selling_points != null && product.selling_points.length > 0 && product.selling_points[0] != '') {
return product.selling_points[0]
}
if (product.subtitle != null && product.subtitle != '') {
return product.subtitle
}
return ''
}
function formatSaleCountText(saleCount: number): string {
if (saleCount >= 100000) return '已售10万+'
if (saleCount >= 10000) return '已售' + (saleCount / 10000).toFixed(1) + '万件'
if (saleCount > 0) return '已售' + saleCount.toString() + '件'
return ''
}
function getProductSalesText(product: Product): string {
if (product.display_sales_text != null && product.display_sales_text != '') {
return product.display_sales_text
}
const saleCount = product.sale_count ?? 0
return formatSaleCountText(saleCount)
}
function formatProductPrice(product: Product): string {
const price = product.base_price ?? product.price ?? 0
return parseFloat(price.toString()).toFixed(2)
}
function formatMarketPrice(product: Product): string {
const price = product.market_price ?? product.original_price ?? 0
return parseFloat(price.toString()).toFixed(2)
}
function showMarketPrice(product: Product): boolean {
const marketPrice = product.market_price ?? product.original_price ?? 0
const salePrice = product.base_price ?? product.price ?? 0
return marketPrice > 0 && marketPrice > salePrice
}
</script>
<style scoped>
.hmall-content {
padding: 0 20rpx 0;
box-sizing: border-box;
}
.hmall-secondary-panel {
margin-top: 16rpx;
background: #ffffff;
border-radius: 20rpx;
padding: 18rpx 12rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}
.hmall-secondary-item {
width: 124rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 16rpx 8rpx;
border-radius: 16rpx;
background: #f7f7f7;
gap: 10rpx;
}
.hmall-secondary-item-active {
background: #fff2f2;
}
.hmall-secondary-icon-wrap {
width: 68rpx;
height: 68rpx;
border-radius: 34rpx;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.hmall-secondary-image {
width: 68rpx;
height: 68rpx;
border-radius: 34rpx;
}
.hmall-secondary-icon-text {
font-size: 28rpx;
color: #e2231a;
font-weight: 700;
}
.hmall-secondary-name {
font-size: 22rpx;
color: #333333;
line-height: 1.2;
text-align: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hmall-recommend-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 8rpx 0 18rpx;
}
.hmall-recommend-card {
width: 49%;
border-radius: 22rpx;
padding: 16rpx;
min-height: 236rpx;
margin-bottom: 14rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
box-shadow: 0 3rpx 12rpx rgba(0, 0, 0, 0.04);
}
.hmall-recommend-header {
display: flex;
flex-direction: column;
}
.hmall-recommend-title-row {
display: flex;
flex-direction: row;
align-items: center;
}
.hmall-recommend-title {
font-size: 30rpx;
color: #202020;
font-weight: 800;
line-height: 1.2;
margin-right: 8rpx;
}
.hmall-recommend-badge {
font-size: 18rpx;
border-width: 1rpx;
border-style: solid;
border-radius: 6rpx;
padding: 2rpx 6rpx;
line-height: 1.2;
background: rgba(255, 255, 255, 0.72);
}
.hmall-recommend-subtitle {
font-size: 22rpx;
color: #777777;
margin-top: 6rpx;
line-height: 1.3;
}
.hmall-recommend-products {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 12rpx;
}
.hmall-recommend-product {
width: 48%;
display: flex;
flex-direction: column;
align-items: center;
}
.hmall-recommend-product-image {
width: 96rpx;
height: 96rpx;
border-radius: 12rpx;
background-color: #ffffff;
}
.hmall-recommend-product-name {
margin-top: 6rpx;
font-size: 20rpx;
color: #333333;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hmall-recommend-price-row {
margin-top: 4rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.hmall-recommend-product-tag {
font-size: 18rpx;
margin-right: 4rpx;
}
.hmall-recommend-product-price {
font-size: 23rpx;
font-weight: 800;
line-height: 1.2;
}
.hmall-recommend-market-price {
margin-top: 4rpx;
font-size: 18rpx;
color: #999999;
text-decoration: line-through;
}
.hmall-simple-section {
display: flex;
flex-direction: row;
justify-content: space-between;
background: transparent;
padding: 0;
margin-bottom: 12rpx;
}
.hmall-simple-card {
width: 49%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 22rpx 18rpx;
min-height: 148rpx;
background: #ffffff;
border-radius: 22rpx;
box-shadow: 0 3rpx 12rpx rgba(0, 0, 0, 0.03);
}
.hmall-simple-card-with-divider {
border-right-width: 0;
}
.hmall-simple-left {
flex: 1;
padding-right: 12rpx;
display: flex;
flex-direction: column;
}
.hmall-simple-title-row {
display: flex;
flex-direction: row;
align-items: center;
}
.hmall-simple-icon {
font-size: 24rpx;
line-height: 1;
color: #202020;
margin-right: 6rpx;
}
.hmall-simple-title {
font-size: 30rpx;
line-height: 1.2;
color: #202020;
font-weight: 800;
}
.hmall-simple-subtitle {
font-size: 22rpx;
line-height: 1.2;
color: #a0a0a0;
margin-top: 10rpx;
}
.hmall-simple-cover-wrap {
width: 116rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.hmall-simple-cover-slot {
width: 54rpx;
height: 54rpx;
border-radius: 14rpx;
overflow: hidden;
background: #f5f5f5;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 8rpx;
}
.hmall-simple-cover-image {
width: 54rpx;
height: 54rpx;
border-radius: 14rpx;
}
.hmall-simple-cover-fallback {
width: 54rpx;
height: 54rpx;
border-radius: 14rpx;
background: #f5f5f5;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.hmall-simple-cover-text {
font-size: 22rpx;
line-height: 1;
color: #555555;
font-weight: 700;
}
.hmall-feed-divider {
height: 20rpx;
background: #f3f4f6;
border-radius: 16rpx;
margin-bottom: 12rpx;
}
.hmall-products-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 0;
min-height: 0;
padding-bottom: 20rpx;
}
.hmall-product-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 18rpx;
overflow: hidden;
width: 49%;
margin-bottom: 12rpx;
}
.hmall-products-grid-dense .hmall-product-card {
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
}
.hmall-product-image-wrapper {
width: 100%;
padding-bottom: 100%;
position: relative;
border-radius: 8px;
overflow: hidden;
background: #f5f5f5;
}
.hmall-product-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 18rpx 18rpx 0 0;
}
.hmall-product-image-wrapper-fixed {
padding-bottom: 100%;
background: #f2f2f2;
}
.hmall-product-card-skeleton {
background: #ffffff;
}
.hmall-product-body {
padding: 14rpx 14rpx 16rpx;
background: #ffffff;
}
.hmall-product-card-tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 8rpx;
}
.hmall-product-card-tag {
height: 28rpx;
line-height: 28rpx;
padding: 0 8rpx;
border-radius: 8rpx;
font-size: 18rpx;
font-weight: 700;
color: #fff7d1;
background: #e1251b;
margin-right: 6rpx;
margin-bottom: 4rpx;
}
.hmall-product-title {
font-size: 24rpx;
color: #232323;
line-height: 1.35;
height: 64rpx;
overflow: hidden;
text-overflow: ellipsis;
}
.hmall-product-highlight {
font-size: 20rpx;
line-height: 28rpx;
color: #7a7a7a;
margin-top: 6rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hmall-product-service-tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 8rpx;
}
.hmall-product-service-tag {
height: 28rpx;
line-height: 28rpx;
padding: 0 8rpx;
border-radius: 8rpx;
font-size: 18rpx;
font-weight: 600;
color: #12b76a;
background: #ecfdf3;
margin-right: 6rpx;
margin-bottom: 4rpx;
}
.hmall-product-price-row {
display: flex;
flex-direction: row;
align-items: flex-end;
margin-top: 8rpx;
}
.hmall-product-price-value {
font-size: 34rpx;
line-height: 1;
color: #ff1030;
font-weight: 800;
}
.hmall-product-market-price {
font-size: 20rpx;
line-height: 1;
color: #9a9a9a;
text-decoration: line-through;
margin-left: 8rpx;
margin-bottom: 2rpx;
}
.hmall-product-sales {
margin-top: 8rpx;
font-size: 20rpx;
color: #8a8a8a;
}
.hmall-loading-state,
.hmall-load-more-status,
.hmall-feed-end-state {
padding: 28rpx 0;
display: flex;
align-items: center;
justify-content: center;
}
.hmall-loading-text,
.hmall-feed-end-text {
font-size: 24rpx;
color: #999999;
}
</style>

301
components/home/HomeServiceContent.uvue Normal file
View File

@@ -0,0 +1,301 @@
<template>
<view class="service-content">
<view class="hero-card">
<view>
<text class="hero-title">居家服务</text>
<text class="hero-desc">围绕护理、康复、陪诊、助餐和健康管理，先把用户最常用的入口集中到首页。</text>
</view>
<view class="hero-badge">
<text class="hero-badge-text">医养到家</text>
</view>
</view>
<scroll-view class="service-filter-scroll" scroll-x="true" :show-scrollbar="false">
<view class="service-filter-row">
<view
v-for="item in categories"
:key="item.id"
:class="['service-filter-item', activeCategory == item.id ? 'service-filter-item-active' : '']"
@click="emit('change-category', item.id)"
>
<text :class="['service-filter-text', activeCategory == item.id ? 'service-filter-text-active' : '']">{{ item.name }}</text>
</view>
</view>
</scroll-view>
<view class="service-grid">
<view
v-for="item in filteredEntries"
:key="item.id"
class="service-entry-card"
@click="emit('select-entry', item)"
>
<view :class="['entry-icon-wrap', item.tone]">
<text class="entry-icon">{{ item.icon }}</text>
</view>
<text class="entry-title">{{ item.title }}</text>
<text class="entry-desc">{{ item.desc }}</text>
<text class="entry-link">{{ item.linkText }}</text>
</view>
</view>
<view class="process-card">
<text class="process-title">服务流程</text>
<view class="process-row">
<view v-for="(item, index) in processList" :key="item + '-' + index" class="process-item">
<view class="process-dot"></view>
<text class="process-text">{{ item }}</text>
</view>
</view>
</view>
<view class="tips-card">
<text class="tips-title">服务提醒</text>
<text class="tips-text">当前首页先开放用户可直接触达的服务入口，评估、派单、执行等环节会在进入服务单后继续展示。</text>
</view>
</view>
</template>
<script setup lang="uts">
import { computed } from 'vue'
type ServiceCategoryItem = {
id: string
name: string
}
type ServiceEntryItem = {
id: string
title: string
desc: string
icon: string
tone: string
category: string
linkText: string
route: string
}
const props = defineProps({
activeCategory: {
type: String,
default: 'all'
},
categories: {
type: Array<ServiceCategoryItem>,
default: [] as Array<ServiceCategoryItem>
},
entries: {
type: Array<ServiceEntryItem>,
default: [] as Array<ServiceEntryItem>
}
})
const emit = defineEmits<{
(e: 'change-category', categoryId: string): void
(e: 'select-entry', entry: ServiceEntryItem): void
}>()
const processList = ['申请', '评估', '方案', '派单', '上门', '验收', '结算']
const filteredEntries = computed((): Array<ServiceEntryItem> => {
if (props.activeCategory == 'all') {
return props.entries
}
const result: Array<ServiceEntryItem> = []
for (let i = 0; i < props.entries.length; i++) {
if (props.entries[i].category == props.activeCategory) {
result.push(props.entries[i])
}
}
return result
})
</script>
<style scoped>
.service-content {
padding: 16rpx 20rpx 0;
box-sizing: border-box;
}
.hero-card,
.process-card,
.tips-card {
background: #ffffff;
border-radius: 24rpx;
padding: 24rpx;
box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.04);
margin-bottom: 16rpx;
}
.hero-card {
background: linear-gradient(135deg, #edf8ff 0%, #f3fff7 100%);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.hero-title,
.process-title,
.tips-title {
font-size: 32rpx;
font-weight: 700;
color: #16324f;
}
.hero-desc,
.tips-text {
margin-top: 12rpx;
font-size: 24rpx;
line-height: 36rpx;
color: #5f6f6a;
}
.hero-badge {
padding: 12rpx 18rpx;
border-radius: 999rpx;
background: #e2231a;
}
.hero-badge-text {
font-size: 22rpx;
font-weight: 700;
color: #ffffff;
}
.service-filter-scroll {
height: 60rpx;
white-space: nowrap;
}
.service-filter-row {
display: flex;
flex-direction: row;
align-items: center;
padding-right: 20rpx;
}
.service-filter-item {
padding: 12rpx 22rpx;
border-radius: 999rpx;
background: #ffffff;
margin-right: 18rpx;
}
.service-filter-item-active {
background: #ffecec;
}
.service-filter-text {
font-size: 24rpx;
color: #4b5563;
}
.service-filter-text-active {
color: #e2231a;
font-weight: 700;
}
.service-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 4rpx;
}
.service-entry-card {
width: 49%;
background: #ffffff;
border-radius: 24rpx;
padding: 24rpx 20rpx;
box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.04);
box-sizing: border-box;
margin-bottom: 16rpx;
display: flex;
flex-direction: column;
}
.entry-icon-wrap {
width: 72rpx;
height: 72rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
}
.entry-icon-wrap.blue {
background: #e8f4ff;
}
.entry-icon-wrap.green {
background: #e8f7ef;
}
.entry-icon-wrap.orange {
background: #fff4e5;
}
.entry-icon-wrap.red {
background: #ffecec;
}
.entry-icon {
font-size: 34rpx;
}
.entry-title {
margin-top: 8rpx;
font-size: 28rpx;
font-weight: 700;
color: #16324f;
line-height: 1.3;
}
.entry-desc {
margin-top: 10rpx;
font-size: 23rpx;
line-height: 34rpx;
color: #6b7280;
min-height: 68rpx;
}
.entry-link {
margin-top: 12rpx;
font-size: 22rpx;
color: #e2231a;
font-weight: 700;
}
.process-row {
margin-top: 18rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.process-item {
display: flex;
flex-direction: row;
align-items: center;
padding: 10rpx 14rpx;
border-radius: 999rpx;
background: #f5f8fb;
margin-right: 18rpx;
margin-bottom: 18rpx;
}
.process-dot {
width: 12rpx;
height: 12rpx;
border-radius: 6rpx;
background: #09c39d;
margin-right: 8rpx;
}
.process-text {
font-size: 22rpx;
color: #4b5563;
}
</style>

240
components/home/JdLikeHomeHeader.uvue Normal file
View 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>

110
components/homeService/ServicePageHeader.uvue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<view class="service-page-header" :style="headerStyle">
<view class="service-page-header-inner">
<view class="service-page-back" @click="goBack">
<text class="service-page-back-icon">＜</text>
</view>
<text class="service-page-title">{{ title }}</text>
<view class="service-page-right-placeholder"></view>
</view>
</view>
</template>
<script setup lang="uts">
import { computed, ref } from 'vue'
const props = defineProps({
title: {
type: String,
default: ''
},
fallbackUrl: {
type: String,
default: ''
}
})
const statusBarHeight = ref(0)
try {
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight
} catch (error) {
statusBarHeight.value = 20
}
const headerStyle = computed((): string => {
return 'padding-top:' + statusBarHeight.value + 'px;'
})
function goBack() {
let pageCount = 0
try {
pageCount = getCurrentPages().length
} catch (error) {
pageCount = 0
}
if (pageCount > 1) {
uni.navigateBack()
return
}
if (props.fallbackUrl == '') {
uni.showToast({ title: '暂无可返回页面', icon: 'none' })
return
}
if (props.fallbackUrl.indexOf('/pages/main/') == 0) {
uni.switchTab({ url: props.fallbackUrl })
return
}
uni.redirectTo({ url: props.fallbackUrl })
}
</script>
<style scoped>
.service-page-header {
background: #f3f7f9;
padding-left: 24rpx;
padding-right: 24rpx;
padding-bottom: 16rpx;
box-sizing: border-box;
}
.service-page-header-inner {
height: 88rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.service-page-back {
min-width: 88rpx;
height: 88rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.service-page-back-icon {
font-size: 52rpx;
line-height: 1;
color: #16324f;
}
.service-page-title {
flex: 1;
font-size: 34rpx;
font-weight: 700;
color: #16324f;
text-align: center;
}
.service-page-right-placeholder {
min-width: 88rpx;
height: 88rpx;
}
</style>

79
components/homeService/ServicePageScaffold.uvue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<view class="service-page-shell">
<view class="service-page-fixed-header">
<ServicePageHeader :title="title" :fallback-url="fallbackUrl"></ServicePageHeader>
</view>
<view class="service-page-header-placeholder" :style="{ height: headerHeight + 'px' }"></view>
<scroll-view class="service-page-scroll" scroll-y="true">
<view class="service-page-content">
<slot></slot>
</view>
</scroll-view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
import ServicePageHeader from '@/components/homeService/ServicePageHeader.uvue'
const props = defineProps({
title: {
type: String,
default: ''
},
fallbackUrl: {
type: String,
default: ''
}
})
const headerHeight = ref(116)
try {
const systemInfo = uni.getSystemInfoSync()
const statusBar = systemInfo.statusBarHeight
const unit = systemInfo.screenWidth / 750
headerHeight.value = statusBar + Math.round(124 * unit)
} catch (error) {
headerHeight.value = 116
}
</script>
<style scoped>
.service-page-shell {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
background: #f3f7f9;
overflow: hidden;
}
.service-page-fixed-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: #f3f7f9;
}
.service-page-header-placeholder {
width: 100%;
flex-shrink: 0;
}
.service-page-scroll {
flex: 1;
min-height: 0;
width: 100%;
}
.service-page-content {
padding: 24rpx;
box-sizing: border-box;
}
</style>