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

解决登录显示、首页显示bug

Browse Source
This commit is contained in:
huangzhenbao
2026-05-19 11:06:46 +08:00
parent 2f7e097e6c
commit 00a859c551
181 changed files with 55329 additions and 998 deletions
Download Patch File Download Diff File Expand all files Collapse all files

678
components/home/HomeServiceContent.uvue
View File

@@ -1,301 +1,537 @@
<template>
<view class="service-content">
<view class="hero-card">
<view>
<text class="hero-title">居家服务</text>
<text class="hero-desc">围绕护理、康复、陪诊、助餐和健康管理，先把用户最常用的入口集中到首页。</text>
<view class="home-service-header">
<view class="header-top-row">
<view>
<text class="header-area">梅江区</text>
<text class="header-slogan">专业照护 服务保障</text>
</view>
<view class="header-helper-btn" @click="consultService">
<text class="header-helper-text">AI推荐</text>
</view>
</view>
<view class="hero-badge">
<text class="hero-badge-text">医养到家</text>
<view class="header-title-wrap">
<text class="header-title">居家服务预约平台</text>
<text class="header-desc">护理 康复 陪诊 保洁，一站式预约上门服务。</text>
</view>
<view class="home-service-search" @click="goSearch">
<text class="home-service-search-icon">⌕</text>
<text class="home-service-search-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 class="service-category-grid">
<view
v-for="item in categoryGrid"
:key="item.id"
class="service-category-card"
@click="goCategory(item.id)"
>
<view class="service-category-icon" :style="{ background: item.color }">
<text class="service-category-icon-text">{{ item.iconText }}</text>
</view>
<text class="service-category-name">{{ item.name }}</text>
</view>
</view>
<scroll-view class="promo-scroll" direction="horizontal" :show-scrollbar="false">
<view class="promo-card-row">
<view v-for="item in promoCards" :key="item.id" :class="['promo-card', 'promo-card-' + item.tone]" @click="consultService">
<text class="promo-card-title">{{ item.title }}</text>
<text class="promo-card-desc">{{ item.desc }}</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 class="section-head">
<text class="section-title">场景服务</text>
<text class="section-link" @click="goServiceHall">查看全部</text>
</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 class="scene-service-section">
<view v-for="item in sceneCards" :key="item.id" :class="['scene-service-card', 'scene-service-card-' + item.tone]" @click="goCategory(item.categoryId)">
<view>
<text class="scene-service-title">{{ item.title }}</text>
<text class="scene-service-subtitle">{{ item.subtitle }}</text>
</view>
<view class="scene-service-visual">
<text class="scene-service-icon">{{ item.iconText }}</text>
</view>
</view>
</view>
<view class="tips-card">
<text class="tips-title">服务提醒</text>
<text class="tips-text">当前首页先开放用户可直接触达的服务入口，评估、派单、执行等环节会在进入服务单后继续展示。</text>
<view class="section-head">
<text class="section-title">推荐服务</text>
<text class="section-link" @click="goServiceHall">服务大厅</text>
</view>
<view class="recommend-service-list">
<view v-for="item in allServices" :key="item.id" class="recommend-service-card">
<view class="recommend-service-top">
<view class="recommend-service-cover">
<text class="recommend-service-cover-text">{{ item.imageText }}</text>
</view>
<view class="recommend-service-main">
<text class="recommend-service-title">{{ item.title }}</text>
<text class="recommend-service-subtitle">{{ item.subtitle }}</text>
<text class="recommend-service-suitable">适用对象：{{ item.suitableFor }}</text>
</view>
</view>
<view class="recommend-service-tags">
<text v-for="tag in item.tags" :key="item.id + '-' + tag" class="recommend-service-tag">{{ tag }}</text>
</view>
<view class="recommend-service-bottom">
<view>
<text class="recommend-service-price-prefix">¥</text>
<text class="recommend-service-price">{{ item.price }}</text>
<text class="recommend-service-unit">起 / {{ item.unit }}</text>
</view>
<view class="recommend-service-actions">
<view class="recommend-secondary-btn" @click="goDetail(item.id)">查看详情</view>
<view class="recommend-primary-btn" @click="goBooking(item.id)">立即预约</view>
</view>
</view>
</view>
</view>
<view class="floating-service-helper" @click="consultService">
<text class="floating-service-helper-title">不确定选哪个？</text>
<text class="floating-service-helper-desc">咨询客服</text>
</view>
</view>
</template>
<script setup lang="uts">
import { computed } from 'vue'
import { onMounted, ref } from 'vue'
import { fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
import {
HomeServiceCategoryType,
HomeServiceItemType,
HomeServicePromoCardType,
HomeServiceSceneCardType,
getHomeServiceCategories,
getHomeServiceItems,
getHomeServicePromoCards,
getHomeServiceSceneCards
} from '@/utils/homeServiceUiMock.uts'
type ServiceCategoryItem = {
id: string
name: string
const categoryGrid = ref<Array<HomeServiceCategoryType>>([])
const promoCards = ref<Array<HomeServicePromoCardType>>([])
const sceneCards = ref<Array<HomeServiceSceneCardType>>([])
const allServices = ref<Array<HomeServiceItemType>>([])
async function loadServiceData() {
categoryGrid.value = getHomeServiceCategories()
promoCards.value = getHomeServicePromoCards()
sceneCards.value = getHomeServiceSceneCards()
const catalog = await fetchHomeServiceCatalog()
allServices.value = getHomeServiceItems(catalog)
}
type ServiceEntryItem = {
id: string
title: string
desc: string
icon: string
tone: string
category: string
linkText: string
route: string
function goSearch() {
uni.navigateTo({ url: '/pages/mall/consumer/search?keyword=' + encodeURIComponent('居家服务') })
}
const props = defineProps({
activeCategory: {
type: String,
default: 'all'
},
categories: {
type: Array<ServiceCategoryItem>,
default: [] as Array<ServiceCategoryItem>
},
entries: {
type: Array<ServiceEntryItem>,
default: [] as Array<ServiceEntryItem>
}
})
function consultService() {
uni.showToast({ title: '即将接入专属客服入口', icon: 'none' })
}
const emit = defineEmits<{
(e: 'change-category', categoryId: string): void
(e: 'select-entry', entry: ServiceEntryItem): void
}>()
function goServiceHall() {
uni.navigateTo({ url: '/pages/mall/consumer/home-service/index' })
}
const processList = ['申请', '评估', '方案', '派单', '上门', '验收', '结算']
function goCategory(categoryId: string) {
uni.navigateTo({ url: '/pages/mall/consumer/home-service/index?category=' + categoryId })
}
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
function goDetail(serviceId: string) {
uni.navigateTo({ url: '/pages/mall/consumer/home-service/service-detail?id=' + serviceId })
}
function goBooking(serviceId: string) {
uni.navigateTo({ url: '/pages/mall/consumer/home-service/service-detail?id=' + serviceId + '&mode=booking' })
}
onMounted(() => {
loadServiceData()
})
</script>
<style scoped>
.service-content {
padding: 16rpx 20rpx 0;
padding: 20rpx 20rpx 180rpx;
box-sizing: border-box;
}
.hero-card,
.process-card,
.tips-card {
.home-service-header {
background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
border-radius: 32rpx;
padding: 28rpx 24rpx;
box-shadow: 0 12rpx 24rpx rgba(15, 118, 110, 0.08);
}
.header-top-row,
.recommend-service-top,
.recommend-service-bottom,
.section-head,
.promo-card-row,
.recommend-service-actions {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.header-area {
font-size: 26rpx;
font-weight: 700;
color: #16324f;
}
.header-slogan {
margin-top: 8rpx;
font-size: 24rpx;
color: #64748b;
}
.header-helper-btn {
padding: 14rpx 22rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.78);
}
.header-helper-text {
font-size: 22rpx;
font-weight: 700;
color: #0f766e;
}
.header-title-wrap {
margin-top: 20rpx;
}
.header-title {
font-size: 40rpx;
font-weight: 700;
color: #16324f;
line-height: 54rpx;
}
.header-desc {
margin-top: 12rpx;
font-size: 24rpx;
line-height: 36rpx;
color: #5f7284;
}
.home-service-search {
margin-top: 22rpx;
background: #ffffff;
border-radius: 24rpx;
border-radius: 999rpx;
height: 82rpx;
padding-left: 28rpx;
padding-right: 28rpx;
flex-direction: row;
align-items: center;
box-shadow: 0 10rpx 20rpx rgba(22, 160, 133, 0.08);
}
.home-service-search-icon {
font-size: 28rpx;
color: #16a085;
}
.home-service-search-text {
margin-left: 16rpx;
font-size: 24rpx;
color: #8aa0b3;
}
.service-category-grid,
.scene-service-section {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 24rpx;
}
.service-category-card {
width: 19%;
align-items: center;
margin-bottom: 24rpx;
}
.service-category-icon {
width: 88rpx;
height: 88rpx;
border-radius: 28rpx;
align-items: center;
justify-content: center;
}
.service-category-icon-text {
font-size: 28rpx;
font-weight: 700;
color: #16324f;
}
.service-category-name {
margin-top: 12rpx;
font-size: 22rpx;
line-height: 30rpx;
text-align: center;
color: #425466;
}
.promo-scroll {
height: 168rpx;
margin-top: 4rpx;
}
.promo-card-row {
padding-right: 20rpx;
}
.promo-card {
width: 240rpx;
height: 144rpx;
padding: 24rpx;
box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.04);
border-radius: 24rpx;
box-sizing: border-box;
margin-right: 16rpx;
}
.promo-card-green {
background: #eafbf7;
}
.promo-card-orange {
background: #fff7ed;
}
.promo-card-blue {
background: #eff6ff;
}
.promo-card-teal {
background: #ecfeff;
}
.promo-card-title {
font-size: 28rpx;
font-weight: 700;
color: #16324f;
}
.promo-card-desc {
margin-top: 12rpx;
font-size: 22rpx;
line-height: 32rpx;
color: #5f7284;
}
.section-head {
margin-top: 28rpx;
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 {
.section-title {
font-size: 32rpx;
font-weight: 700;
color: #16324f;
}
.hero-desc,
.tips-text {
margin-top: 12rpx;
.section-link {
font-size: 24rpx;
line-height: 36rpx;
color: #5f6f6a;
color: #16a085;
}
.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 {
.scene-service-card {
width: 49%;
background: #ffffff;
border-radius: 24rpx;
padding: 24rpx 20rpx;
box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.04);
border-radius: 28rpx;
padding: 24rpx;
box-sizing: border-box;
margin-bottom: 16rpx;
display: flex;
flex-direction: column;
min-height: 168rpx;
justify-content: space-between;
}
.entry-icon-wrap {
width: 72rpx;
height: 72rpx;
border-radius: 20rpx;
display: flex;
.scene-service-card-green {
background: linear-gradient(180deg, #eafbf7 0%, #f8fffd 100%);
}
.scene-service-card-blue {
background: linear-gradient(180deg, #eff6ff 0%, #f9fbff 100%);
}
.scene-service-card-teal {
background: linear-gradient(180deg, #ecfeff 0%, #f8ffff 100%);
}
.scene-service-card-orange {
background: linear-gradient(180deg, #fff7ed 0%, #fffbf7 100%);
}
.scene-service-title {
font-size: 30rpx;
font-weight: 700;
color: #16324f;
}
.scene-service-subtitle {
margin-top: 10rpx;
font-size: 22rpx;
line-height: 32rpx;
color: #64748b;
}
.scene-service-visual {
margin-top: 18rpx;
width: 108rpx;
height: 56rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.68);
align-items: center;
justify-content: center;
}
.entry-icon-wrap.blue {
background: #e8f4ff;
.scene-service-icon {
font-size: 22rpx;
font-weight: 700;
color: #0f766e;
}
.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 {
.recommend-service-list {
margin-top: 8rpx;
}
.recommend-service-card {
background: #ffffff;
border-radius: 28rpx;
padding: 24rpx;
box-shadow: 0 10rpx 24rpx rgba(15, 23, 42, 0.06);
margin-bottom: 20rpx;
box-sizing: border-box;
}
.recommend-service-cover {
width: 120rpx;
height: 120rpx;
border-radius: 28rpx;
background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
align-items: center;
justify-content: center;
}
.recommend-service-cover-text {
font-size: 28rpx;
font-weight: 700;
color: #16324f;
line-height: 1.3;
color: #0f766e;
}
.entry-desc {
margin-top: 10rpx;
font-size: 23rpx;
line-height: 34rpx;
color: #6b7280;
min-height: 68rpx;
.recommend-service-main {
flex: 1;
min-width: 0;
margin-left: 20rpx;
}
.entry-link {
margin-top: 12rpx;
font-size: 22rpx;
color: #e2231a;
.recommend-service-title {
font-size: 30rpx;
font-weight: 700;
color: #16324f;
}
.process-row {
margin-top: 18rpx;
display: flex;
.recommend-service-subtitle,
.recommend-service-suitable {
margin-top: 10rpx;
font-size: 24rpx;
line-height: 34rpx;
color: #64748b;
min-height: 0;
}
.recommend-service-tags {
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-top: 18rpx;
margin-bottom: 18rpx;
}
.process-dot {
width: 12rpx;
height: 12rpx;
border-radius: 6rpx;
background: #09c39d;
margin-right: 8rpx;
.recommend-service-tag {
padding: 10rpx 16rpx;
border-radius: 999rpx;
background: #f1f5f9;
font-size: 22rpx;
color: #476072;
box-sizing: border-box;
margin-right: 12rpx;
margin-bottom: 12rpx;
}
.process-text {
.recommend-service-price-prefix,
.recommend-service-price {
font-size: 36rpx;
font-weight: 700;
color: #0f766e;
}
.recommend-service-unit {
font-size: 22rpx;
color: #4b5563;
color: #64748b;
}
.recommend-secondary-btn,
.recommend-primary-btn {
padding: 0 26rpx;
height: 68rpx;
border-radius: 999rpx;
font-size: 24rpx;
font-weight: 700;
align-items: center;
justify-content: center;
margin-left: 12rpx;
}
.recommend-secondary-btn {
background: #ffffff;
border-width: 2rpx;
border-style: solid;
border-color: #cbd5e1;
color: #476072;
}
.recommend-primary-btn {
background: #16a085;
color: #ffffff;
}
.floating-service-helper {
position: fixed;
right: 24rpx;
bottom: 168rpx;
width: 176rpx;
padding: 20rpx 22rpx;
border-radius: 28rpx;
background: linear-gradient(180deg, #16a085 0%, #0f766e 100%);
box-shadow: 0 12rpx 24rpx rgba(15, 118, 110, 0.18);
}
.floating-service-helper-title,
.floating-service-helper-desc {
font-size: 22rpx;
line-height: 32rpx;
color: #ffffff;
}
.floating-service-helper-desc {
margin-top: 6rpx;
font-weight: 700;
}
</style>

48
components/home/JdLikeHomeHeader.uvue
View File

@@ -1,19 +1,20 @@
<template>
<view class="jd2-header" :style="headerStyle">
<view :class="['jd2-header', isServiceModule ? 'jd2-header-service' : '']" :style="headerStyle">
<view class="jd2-module-row" :style="capsuleStyle">
<view
v-for="item in modules"
:key="item.key"
class="jd2-module-item"
:class="isServiceModule ? 'jd2-module-item-service' : ''"
@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>
<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>
</view>
</view>
<view class="jd2-search-wrap">
<view class="jd2-search-box">
<view :class="['jd2-search-box', isServiceModule ? 'jd2-search-box-service' : '']">
<view class="jd2-search-input-wrap">
<text class="jd2-search-icon">⌕</text>
<input
@@ -27,13 +28,13 @@
@click="emit('focusSearch')"
/>
</view>
<view class="jd2-search-btn" @click="handleSearch">
<view :class="['jd2-search-btn', isServiceModule ? 'jd2-search-btn-service' : '']" @click="handleSearch">
<text class="jd2-search-btn-text">搜索</text>
</view>
</view>
</view>
<scroll-view class="jd2-category-scroll" scroll-x="true" :show-scrollbar="false">
<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"
@@ -106,6 +107,8 @@ 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)
@@ -127,13 +130,17 @@ function handleSearch() {
box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.05);
}
.jd2-header-service {
background: linear-gradient(180deg, #eafbf7 0%, #f4f8fb 100%);
box-shadow: 0 8rpx 20rpx rgba(15, 118, 110, 0.08);
}
.jd2-module-row {
flex-direction: row;
align-items: center;
padding-left: 20rpx;
padding-right: 24rpx;
height: 62rpx;
gap: 36rpx;
box-sizing: border-box;
}
@@ -141,6 +148,11 @@ function handleSearch() {
align-items: center;
justify-content: center;
height: 62rpx;
margin-right: 36rpx;
}
.jd2-module-item-service {
margin-right: 28rpx;
}
.jd2-module-text {
@@ -150,12 +162,20 @@ function handleSearch() {
line-height: 42rpx;
}
.jd2-module-text-service {
color: #436072;
}
.jd2-module-text-active {
font-size: 36rpx;
font-weight: 700;
color: #e2231a;
}
.jd2-header-service .jd2-module-text-active {
color: #0f766e;
}
.jd2-module-line {
margin-top: 8rpx;
width: 32rpx;
@@ -164,6 +184,10 @@ function handleSearch() {
background: #e2231a;
}
.jd2-module-line-service {
background: #16a085;
}
.jd2-search-wrap {
width: 100%;
margin-top: 18rpx;
@@ -186,6 +210,12 @@ function handleSearch() {
box-sizing: border-box;
}
.jd2-search-box-service {
border-color: #b9eadf;
border-radius: 999rpx;
box-shadow: 0 8rpx 20rpx rgba(15, 118, 110, 0.08);
}
.jd2-search-input-wrap {
flex: 1;
min-width: 0;
@@ -220,6 +250,10 @@ function handleSearch() {
background: #ff2d2f;
}
.jd2-search-btn-service {
background: #16a085;
}
.jd2-search-btn-text {
font-size: 30rpx;
font-weight: 700;