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

435
pages/main/index.uvue
View File

@@ -1,81 +1,26 @@
<!-- pages/main/index.uvue -->
<template>
<view class="medic-home">
<view class="pdd-home-header" :style="headerStyle">
<view class="pdd-header-shell">
<view class="pdd-search-row" :style="searchRowStyle" @tap="handleHomeSearchClick">
<view class="pdd-search-box">
<text class="pdd-search-icon">⌕</text>
<view class="pdd-keyword-text">
<view :class="['pdd-keyword-track', { 'pdd-keyword-track-animating': placeholderAnimating }]">
<view class="pdd-keyword-slide">
<text class="pdd-keyword-placeholder">{{ currentPlaceholderKeyword }}</text>
</view>
<view class="pdd-keyword-slide">
<text class="pdd-keyword-placeholder">{{ nextPlaceholderKeyword }}</text>
</view>
</view>
</view>
<text class="pdd-camera-icon">◉</text>
</view>
</view>
<view class="category-wrapper">
<view :class="['category-bar-wrap', { 'category-bar-wrap-hidden': showCategoryPanel }]">
<scroll-view
class="category-scroll"
direction="horizontal"
:show-scrollbar="false"
:scroll-with-animation="true"
:scroll-into-view="categoryScrollIntoView"
>
<view
v-for="(item, index) in categoryList"
:key="buildListItemKey('top-category', item.id, index)"
:id="'cat-' + item.id"
:class="['category-item', { 'category-item-active': currentCategory === item.id }]"
@tap="handleCategoryTabClick(item)"
>
<text :class="['category-item-text', { 'category-item-text-active': currentCategory === item.id, 'category-item-text-accent': shouldHighlightCategory(item.name) && currentCategory !== item.id }]">{{ getCategoryTabDisplayName(item.name) }}</text>
<view v-if="currentCategory === item.id" class="category-active-line"></view>
</view>
</scroll-view>
<view class="category-expand-btn" @tap="toggleCategoryPanel">
<text class="category-expand-icon">{{ showCategoryPanel ? '∧' : '∨' }}</text>
</view>
</view>
</view>
</view>
<view class="jd-header-fixed">
<JdLikeHomeHeader
:status-bar-height="statusBarHeight"
:capsule-right="navBarRight"
:modules="topModules"
:active-module="activeTopModule"
:search-keyword="searchKeyword"
:placeholder="headerSearchPlaceholder"
:categories="headerCategories"
:active-category="activeCategory"
@changeModule="handleTopModuleChange"
@update:searchKeyword="handleSearchKeywordUpdate"
@search="handleHeaderSearch"
@changeCategory="handleHeaderCategoryChange"
@focusSearch="handleSearchFocus"
></JdLikeHomeHeader>
</view>
<view
v-if="showCategoryPanel"
class="category-panel"
:style="{ top: (navbarTotalHeight + 1) + 'px' }"
>
<view class="category-panel-header">
<text class="category-panel-title">全部分类</text>
<view class="category-panel-close-btn" @tap="toggleCategoryPanel">
<text class="category-panel-close-text">收起</text>
<text class="category-panel-close-arrow">∧</text>
</view>
</view>
<view class="category-panel-grid">
<view
v-for="(item, index) in categoryList"
:key="buildListItemKey('panel-category', item.id, index)"
:class="['category-panel-item', { 'category-panel-item-active': currentCategory === item.id }]"
@tap="selectCategoryFromPanel(item)"
>
<text :class="['category-panel-item-text', { 'category-panel-item-text-active': currentCategory === item.id }]">{{ item.name }}</text>
</view>
</view>
</view>
<view class="jd-header-placeholder" :style="{ height: headerPlaceholderHeight + 'px' }"></view>
<view class="pdd-header-placeholder" :style="{ height: headerPlaceholderHeight + 'px' }"></view>
<!-- 主内容区 -->
<scroll-view
direction="vertical"
class="main-scroll"
@@ -83,184 +28,46 @@
:refresher-triggered="refreshing"
:lower-threshold="50"
@refresherrefresh="onRefresh"
@scrolltolower="loadMore"
@scrolltolower="handleMainScrollToLower"
@scroll="handleScroll"
>
<view class="category-feed-shell">
<view v-if="currentCategory !== 'recommend' && secondaryCategoryDisplay.length > 0" class="secondary-category-panel">
<view
v-for="(item, index) in secondaryCategoryDisplay"
:key="buildListItemKey('secondary-category', item.id, index)"
:class="['secondary-category-item', { 'secondary-category-item-active': selectedSubCategoryId === item.id }]"
@tap="handleSecondaryCategoryClick(item)"
>
<view class="secondary-category-icon-wrap">
<image
v-if="isImageIcon(item.icon)"
class="secondary-category-image"
:src="item.icon"
mode="aspectFill"
/>
<text v-else class="secondary-category-icon-text">{{ getCategoryDisplayIcon(item) }}</text>
</view>
<text class="secondary-category-name">{{ item.name }}</text>
</view>
</view>
<HomeMallContent
v-if="activeTopModule == 'home'"
:current-category="currentCategory"
:selected-sub-category-id="selectedSubCategoryId"
:secondary-category-display="secondaryCategoryDisplay"
:marketing-channels="marketingChannels"
:category-simple-channels="categorySimpleChannels"
:hot-products="hotProducts"
:loading="loading"
:has-more="hasMore"
:show-load-more="showLoadMore"
@secondary-category-click="handleSecondaryCategoryClick"
@select-channel="navigateToChannel"
@select-simple-channel="navigateToSimpleChannel"
@select-product="navigateToProduct"
></HomeMallContent>
<view v-if="currentCategory === 'recommend' && marketingChannels.length > 0" class="recommend-channel-section">
<view
v-for="(channel, index) in marketingChannels"
:key="buildListItemKey('marketing-channel', channel.id, index)"
class="recommend-channel-card"
:style="{ backgroundColor: channel.bgColor }"
@tap="navigateToChannel(channel)"
>
<view class="recommend-channel-header">
<view class="recommend-channel-title-row">
<text class="recommend-channel-title">{{ channel.title }}</text>
<text class="recommend-channel-badge" :style="{ color: channel.themeColor, borderColor: channel.themeColor }">{{ channel.badge }}</text>
</view>
<text class="recommend-channel-subtitle">{{ channel.subtitle }}</text>
</view>
<view class="recommend-channel-products">
<view
v-for="(product, pIndex) in channel.products"
:key="buildListItemKey('channel-product', product.id, pIndex)"
class="recommend-channel-product"
>
<image
class="recommend-channel-product-image"
:src="getChannelProductImage(product)"
mode="aspectFill"
/>
<text class="recommend-channel-product-name">{{ product.shortName }}</text>
<view class="recommend-channel-price-row">
<text class="recommend-channel-product-tag" :style="{ color: channel.themeColor }">{{ product.tag }}</text>
<text class="recommend-channel-product-price" :style="{ color: channel.themeColor }">¥{{ formatChannelPrice(product.price) }}</text>
</view>
<text v-if="product.marketPrice > product.price" class="recommend-channel-market-price">¥{{ formatChannelPrice(product.marketPrice) }}</text>
</view>
</view>
</view>
</view>
<HomeServiceContent
v-else
:active-category="activeCategory"
:categories="serviceCategories"
:entries="serviceEntries"
@change-category="handleHeaderCategoryChange"
@select-entry="handleServiceEntrySelect"
></HomeServiceContent>
<view v-else-if="currentCategory !== 'recommend' && categorySimpleChannels.length > 0" class="category-simple-channel-section">
<view
v-for="(channel, index) in categorySimpleChannels"
:key="buildListItemKey('simple-channel', channel.id, index)"
:class="['simple-channel-card', { 'simple-channel-card-with-divider': index === 0 }]"
@tap="navigateToSimpleChannel(channel)"
>
<view class="simple-channel-left">
<view class="simple-channel-title-row">
<text class="simple-channel-icon">{{ channel.icon }}</text>
<text class="simple-channel-title">{{ channel.title }}</text>
</view>
<text class="simple-channel-subtitle">{{ channel.subtitle }}</text>
</view>
<view class="simple-channel-cover-wrap">
<view
v-for="(cover, coverIndex) in channel.coverImages"
:key="buildListItemKey('simple-channel-cover', channel.id + '-' + cover, coverIndex)"
class="simple-channel-cover-slot"
>
<image
v-if="isImageIcon(cover)"
class="simple-channel-cover-image"
:src="cover"
mode="aspectFill"
/>
<view v-else class="simple-channel-cover-fallback">
<text class="simple-channel-cover-text">{{ cover }}</text>
</view>
</view>
</view>
</view>
</view>
<view class="feed-divider"></view>
<view v-if="hotProducts.length > 0" class="products-grid products-grid-dense">
<view
v-for="(product, index) in hotProducts"
:key="buildProductLoopKey(product, index)"
class="product-card product-card-skeleton"
@click="navigateToProduct(product)"
>
<view class="product-image-wrapper product-image-wrapper-fixed">
<image
class="product-image"
:src="getProductCover(product)"
@error="() => handleProductImageError(product.id)"
mode="aspectFill"
/>
</view>
<view class="product-placeholder-body">
<view v-if="getProductCardTags(product).length > 0" class="product-card-tags">
<text
v-for="(tag, index) in getProductCardTags(product)"
:key="product.id + '-card-tag-' + index"
class="product-card-tag"
>
{{ tag }}
</text>
</view>
<text class="product-skeleton-title">{{ getProductTitle(product) }}</text>
<text v-if="getProductHighlight(product) !== ''" class="product-highlight-text">{{ getProductHighlight(product) }}</text>
<view v-if="getProductServiceTags(product).length > 0" class="product-service-tags">
<text
v-for="(tag, index) in getProductServiceTags(product)"
:key="product.id + '-service-tag-' + index"
class="product-service-tag"
>
{{ tag }}
</text>
</view>
<view class="product-price-row">
<text class="product-price-value">¥{{ formatProductPrice(product) }}</text>
<text v-if="showMarketPrice(product)" class="product-market-price">¥{{ formatMarketPrice(product) }}</text>
</view>
<text v-if="getProductSalesText(product) !== ''" class="product-sales-text">{{ getProductSalesText(product) }}</text>
</view>
</view>
</view>
<view v-else-if="loading" class="feed-loading-state">
<text class="loading-text">正在加载商品...</text>
</view>
<view v-else class="feed-empty-state">
<text class="feed-empty-title">当前分类暂无商品</text>
<text class="feed-empty-desc">可以切换二级分类或其他频道继续浏览</text>
</view>
<view class="load-more-status" v-if="loading || showLoadMore">
<text class="loading-text">正在加载更多商品...</text>
</view>
<view v-if="!hasMore && hotProducts.length > 0" class="feed-end-state">
<text class="feed-end-text">已经到底了</text>
</view>
</view>
<!-- 底部安全区域 -->
<view class="safe-area"></view>
<view class="safe-area" :style="{ height: bottomSafeArea + 88 + 'px' }"></view>
</scroll-view>
<!-- 遮罩：覆盖分类面板下方内容区域，点击关闭面板 -->
<view
v-if="showCategoryPanel"
class="category-panel-mask"
:style="{ top: navbarTotalHeight + 'px' }"
@tap="toggleCategoryPanel"
></view>
</view>
</template>
<script setup lang="uts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
import { onShow, onLoad, onHide } from '@dcloudio/uni-app'
import HomeMallContent from '@/components/home/HomeMallContent.uvue'
import HomeServiceContent from '@/components/home/HomeServiceContent.uvue'
import JdLikeHomeHeader from '@/components/home/JdLikeHomeHeader.uvue'
import supabaseService from '@/utils/supabaseService.uts'
import type { Product, Category, Brand, PaginatedResponse } from '@/utils/supabaseService.uts'
import { getRecommendMarketingChannels } from '@/utils/mockChannelData.uts'
@@ -271,6 +78,7 @@ import { logSupaConfig } from '@/ak/config.uts'
// 响应式数据
const statusBarHeight = ref(0)
const bottomSafeArea = ref(20)
const scrollHeight = ref(0)
const refreshing = ref(false)
const loading = ref(false)
@@ -301,6 +109,66 @@ const headerPlaceholderHeight = ref(128)
const headerStyle = ref('')
const searchRowStyle = ref('')
const activeTopModule = ref('home')
const activeCategory = ref('recommend')
const searchKeyword = ref('')
type HeaderModuleItem = {
key: string
label: string
}
type ServiceHomeCategoryItem = {
id: string
name: string
}
type ServiceEntryItem = {
id: string
title: string
desc: string
icon: string
tone: string
category: string
linkText: string
route: string
}
const topModules: Array<HeaderModuleItem> = [
{ key: 'home', label: '首页' },
{ key: 'service', label: '服务' }
]
const serviceCategories: Array<ServiceHomeCategoryItem> = [
{ id: 'all', name: '推荐' },
{ id: 'nursing', name: '居家护理' },
{ id: 'rehab', name: '康复照护' },
{ id: 'assist', name: '适老用品' },
{ id: 'health', name: '健康管理' },
{ id: 'life', name: '生活服务' }
]
const serviceEntries: Array<ServiceEntryItem> = [
{ id: 'apply', title: '服务申请', desc: '快速发起上门护理与健康随访申请。', icon: '📝', tone: 'red', category: 'nursing', linkText: '立即申请', route: '/pages/mall/consumer/home-service/apply' },
{ id: 'service-home', title: '服务大厅', desc: '查看服务项目、适用对象与预约说明。', icon: '🏠', tone: 'blue', category: 'all', linkText: '查看大厅', route: '/pages/mall/consumer/home-service/index' },
{ id: 'progress', title: '服务进度', desc: '追踪评估、方案、执行和验收节点。', icon: '📍', tone: 'green', category: 'health', linkText: '查看工单', route: '/pages/mall/consumer/home-service/order-detail?id=case-001' },
{ id: 'assessment', title: '上门评估', desc: '了解评估前准备事项和风险核对重点。', icon: '🩺', tone: 'blue', category: 'rehab', linkText: '查看说明', route: '/pages/mall/consumer/home-service/assessment?id=case-001' },
{ id: 'plan', title: '服务方案', desc: '查看护理频次、服务周期和执行建议。', icon: '📋', tone: 'green', category: 'rehab', linkText: '方案说明', route: '/pages/mall/consumer/home-service/service-plan?id=case-001' },
{ id: 'execution', title: '上门执行', desc: '同步执行记录、签到留痕与异常处理。', icon: '🚪', tone: 'orange', category: 'life', linkText: '查看进展', route: '/pages/mall/consumer/home-service/order-detail?id=case-002' },
{ id: 'feedback', title: '验收反馈', desc: '服务完成后提交验收意见和满意度反馈。', icon: '✅', tone: 'red', category: 'nursing', linkText: '去反馈', route: '/pages/mall/consumer/home-service/feedback?id=case-001' },
{ id: 'settlement', title: '结算归档', desc: '查看归档说明、账单结果和服务闭环。', icon: '🗂️', tone: 'green', category: 'assist', linkText: '查看说明', route: '/pages/mall/consumer/home-service/settlement-archive?id=case-001' }
]
const headerCategories = computed((): Array<ServiceHomeCategoryItem | CategoryItem> => {
return activeTopModule.value == 'home' ? categoryList.value : serviceCategories
})
const headerSearchPlaceholder = computed((): string => {
if (activeTopModule.value == 'service') {
return '居家护理 / 康复照护 / 血压计 / 助餐服务'
}
return currentPlaceholderKeyword.value != '' ? currentPlaceholderKeyword.value : '感冒药 / 康复护理 / 居家护理 / 血压计'
})
// 分类标签栏相关
type CategoryItem = {
@@ -442,6 +310,61 @@ const handleHomeSearchClick = () => {
}
}
function handleSearchKeywordUpdate(keyword: string) {
searchKeyword.value = keyword
}
function handleSearchFocus() {
if (searchKeyword.value == '' && activeTopModule.value == 'home') {
searchKeyword.value = currentPlaceholderKeyword.value
}
}
function handleHeaderSearch(keyword: string) {
const inputKeyword = keyword != '' ? keyword : searchKeyword.value
const fallbackKeyword = headerSearchPlaceholder.value != '' ? headerSearchPlaceholder.value : '居家护理'
const finalKeyword = inputKeyword != '' ? inputKeyword : fallbackKeyword
searchKeyword.value = finalKeyword
try {
uni.navigateTo({ url: `/pages/mall/consumer/search?keyword=${encodeURIComponent(finalKeyword)}&source=home_header` })
} catch (error) {
console.error('首页搜索跳转失败', error)
}
}
function handleTopModuleChange(moduleKey: string) {
activeTopModule.value = moduleKey
if (moduleKey == 'home') {
activeCategory.value = currentCategory.value
} else {
activeCategory.value = serviceCategories.length > 0 ? serviceCategories[0].id : 'all'
}
}
function handleHeaderCategoryChange(categoryId: string) {
activeCategory.value = categoryId
if (activeTopModule.value == 'home') {
const matchedItem = categoryList.value.find((item: CategoryItem): boolean => item.id == categoryId)
if (matchedItem != null) {
handleCategoryTabClick(matchedItem)
}
}
}
function handleServiceEntrySelect(entry: ServiceEntryItem) {
if (entry.route == '') {
uni.showToast({ title: '该入口下一步补页面', icon: 'none' })
return
}
uni.navigateTo({ url: entry.route })
}
function handleMainScrollToLower() {
if (activeTopModule.value == 'home') {
void loadMore()
}
}
function toEventJsonObject(value: any | null): UTSJSONObject | null {
if (value == null) {
return null
@@ -1356,9 +1279,11 @@ const familyItems = [
// 初始化页面
const initPage = () => {
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight
const searchContentHeight = Math.round(60 * systemInfo.screenWidth / 750)
const searchRowVerticalPadding = Math.round(12 * systemInfo.screenWidth / 750)
statusBarHeight.value = systemInfo.statusBarHeight != null ? systemInfo.statusBarHeight : 20
const searchContentHeight = Math.round(68 * systemInfo.screenWidth / 750)
const searchRowVerticalPadding = Math.round(18 * systemInfo.screenWidth / 750)
const moduleRowHeight = Math.round(78 * systemInfo.screenWidth / 750)
const categoryRowHeight = Math.round(56 * systemInfo.screenWidth / 750)
let menuInfo: CapsuleButtonInfo | null = null
// #ifdef MP-WEIXIN || MP-ALIPAY
@@ -1377,20 +1302,22 @@ const initPage = () => {
// 计算右边距避让
const rightReserve = systemInfo.screenWidth - menuInfo.left + 8
navBarRight.value = rightReserve
const searchRowTotalH = statusBarHeight.value + Math.max(navHeight, searchContentHeight + searchRowVerticalPadding)
const searchRowTotalH = statusBarHeight.value + Math.max(navHeight, moduleRowHeight) + searchContentHeight + searchRowVerticalPadding + categoryRowHeight + Math.round(18 * systemInfo.screenWidth / 750)
searchRowStyle.value = `padding-top:${statusBarHeight.value}px;height:${searchRowTotalH}px;padding-right:${rightReserve}px;`
navbarTotalHeight.value = searchRowTotalH
} else {
navBarHeight.value = 44
navBarRight.value = 0
const searchRowTotalH = statusBarHeight.value + Math.max(44, searchContentHeight + searchRowVerticalPadding)
const searchRowTotalH = statusBarHeight.value + Math.max(44, moduleRowHeight) + searchContentHeight + searchRowVerticalPadding + categoryRowHeight + Math.round(18 * systemInfo.screenWidth / 750)
searchRowStyle.value = `padding-top:${statusBarHeight.value}px;height:${searchRowTotalH}px;`
navbarTotalHeight.value = searchRowTotalH
}
headerStyle.value = ``
categoryBarHeightPx.value = Math.round(64 * systemInfo.screenWidth / 750)
headerPlaceholderHeight.value = navbarTotalHeight.value + categoryBarHeightPx.value
categoryBarHeightPx.value = categoryRowHeight
headerPlaceholderHeight.value = navbarTotalHeight.value
const safeBottom = systemInfo.safeArea != null ? systemInfo.screenHeight - systemInfo.safeArea.bottom : 20
bottomSafeArea.value = safeBottom > 0 ? safeBottom : 20
const screenWidth = systemInfo.screenWidth
isMobile.value = screenWidth < 768
@@ -1798,6 +1725,20 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
flex-direction: column;
}
.jd-header-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: #ffffff;
}
.jd-header-placeholder {
width: 100%;
flex-shrink: 0;
}
.main-scroll {
flex: 1;
min-height: 0;