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

378
pages/mall/consumer/home-service/index.uvue
View File

@@ -1,32 +1,67 @@
<template>
<ServicePageScaffold title="居家上门服务" fallback-url="/pages/main/index">
<view class="hero-card">
<text class="hero-title">居家上门服务</text>
<text class="hero-desc">覆盖服务申请、上门评估、执行跟踪与验收反馈，先用 mock 数据跑通前端闭环。</text>
<view class="hero-actions">
<view class="primary-btn" @click="goApply">立即申请</view>
<view>
<text class="hero-title">居家服务大厅</text>
<text class="hero-desc">从服务选择、预约下单到服务单跟踪，整体体验升级为上门服务预约平台。</text>
</view>
<view class="hero-right-tag">
<text class="hero-right-tag-text">服务保障</text>
</view>
</view>
<ServicePanel title="推荐服务" subtitle="适老化信息更清晰，入口更聚焦。">
<view v-for="item in services" :key="item.id" class="service-card">
<view class="service-top">
<view>
<text class="service-name">{{ item.name }}</text>
<text class="service-meta">{{ item.category }} · {{ item.durationText }}</text>
</view>
<text class="service-price">¥{{ item.price }}</text>
<view class="service-category-grid">
<view v-for="item in categoryGrid" :key="item.id" class="service-category-card" @click="switchCategory(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-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>
<ServicePanel title="推荐服务" subtitle="优先展示最常预约的居家服务项目。">
<view v-for="item in filteredServices" :key="item.id" class="recommend-card">
<view class="recommend-card-top">
<view class="recommend-card-cover">
<text class="recommend-card-cover-text">{{ item.imageText }}</text>
</view>
<view class="recommend-card-main">
<text class="recommend-card-title">{{ item.title }}</text>
<text class="recommend-card-subtitle">{{ item.subtitle }}</text>
<text class="recommend-card-suitable">适用对象：{{ item.suitableFor }}</text>
</view>
</view>
<view class="recommend-card-tags">
<text v-for="tag in item.tags" :key="item.id + '-' + tag" class="recommend-card-tag">{{ tag }}</text>
</view>
<view class="recommend-card-bottom">
<view>
<text class="recommend-card-price-prefix">¥</text>
<text class="recommend-card-price">{{ item.price }}</text>
<text class="recommend-card-unit">起 / {{ item.unit }}</text>
</view>
<view class="recommend-card-actions">
<view class="recommend-card-secondary" @click="goDetail(item.id)">查看详情</view>
<view class="recommend-card-primary" @click="goBooking(item.id)">立即预约</view>
</view>
</view>
<text class="service-summary">{{ item.summary }}</text>
<text class="service-suitable">适用对象：{{ item.suitableFor }}</text>
</view>
</ServicePanel>
<ServicePanel title="我的服务单" subtitle="先展示待派单和服务中的 mock 单据。">
<ServicePanel title="我的预约 / 服务单" subtitle="按服务预约单的方式呈现状态、机构和上门信息。">
<view v-if="cases.length == 0" class="empty-box">
<text class="empty-text">当前没有服务单</text>
</view>
<view v-for="item in cases" :key="item.id" class="case-card" @click="goDetail(item.id)">
<view v-for="item in cases" :key="item.id" class="case-card" @click="goOrderDetail(item.id)">
<view class="case-row">
<view>
<text class="case-title">{{ item.serviceName }}</text>
@@ -34,127 +69,354 @@
</view>
<ServiceStatusTag :text="item.statusText" :tone="item.statusTone"></ServiceStatusTag>
</view>
<text class="case-info">服务对象：{{ item.elderName }}，{{ item.age }} 岁</text>
<text class="case-info">服务机构：{{ item.staffName == '待分配' ? '待分配机构' : item.staffName }}</text>
<text class="case-info">上门时间：{{ item.serviceTime }}</text>
<text class="case-info">服务地址：{{ item.address }}</text>
<view class="case-action-row">
<view class="case-action-secondary" @click.stop="goDetailByName(item.serviceName)">再次预约</view>
<view class="case-action-primary" @click.stop="goOrderDetail(item.id)">查看服务单</view>
</view>
</view>
</ServicePanel>
</ServicePageScaffold>
</template>
<script setup lang="uts">
import { ref } from 'vue'
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'
import { fetchConsumerHomeServiceCases, fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
import { HomeServiceCatalogType, HomeServiceCaseType } from '@/types/home-service.uts'
import {
HomeServiceCategoryType,
HomeServiceItemType,
HomeServicePromoCardType,
getHomeServiceCategories,
getHomeServiceItems,
getHomeServicePromoCards
} from '@/utils/homeServiceUiMock.uts'
const services = ref<Array<HomeServiceCatalogType>>([])
const cases = ref<Array<HomeServiceCaseType>>([])
const categoryGrid = ref<Array<HomeServiceCategoryType>>([])
const promoCards = ref<Array<HomeServicePromoCardType>>([])
const selectedCategory = ref('all-services')
const filteredServices = computed((): Array<HomeServiceItemType> => {
const serviceItems = getHomeServiceItems(services.value)
if (selectedCategory.value == 'all-services') {
return serviceItems
}
const result: Array<HomeServiceItemType> = []
for (let i = 0; i < serviceItems.length; i++) {
if (serviceItems[i].category == selectedCategory.value) {
result.push(serviceItems[i])
}
}
if (result.length == 0) {
return serviceItems
}
return result
})
async function loadData() {
categoryGrid.value = getHomeServiceCategories()
promoCards.value = getHomeServicePromoCards()
services.value = await fetchHomeServiceCatalog()
cases.value = await fetchConsumerHomeServiceCases()
}
function goApply() {
uni.navigateTo({ url: '/pages/mall/consumer/home-service/apply' })
function switchCategory(categoryId: string) {
selectedCategory.value = categoryId
}
function goDetail(caseId: string) {
function consultService() {
uni.showToast({ title: '即将接入专属客服入口', icon: 'none' })
}
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' })
}
function goOrderDetail(caseId: string) {
uni.navigateTo({ url: '/pages/mall/consumer/home-service/order-detail?id=' + caseId })
}
onLoad(() => {
function goDetailByName(serviceName: string) {
if (serviceName == '康复训练指导') {
goBooking('svc-002')
return
}
if (serviceName == '慢病健康随访') {
goBooking('svc-003')
return
}
goBooking('svc-001')
}
onLoad((options) => {
const category = options['category']
if (category != null) {
selectedCategory.value = category as string
}
loadData()
})
</script>
<style scoped>
.page {
min-height: 100vh;
background: #f3f7f9;
padding: 24rpx;
box-sizing: border-box;
}
.hero-card {
background: linear-gradient(135deg, #0f766e, #1d4ed8);
border-radius: 28rpx;
padding: 32rpx;
background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
border-radius: 32rpx;
padding: 28rpx;
margin-bottom: 24rpx;
flex-direction: row;
justify-content: space-between;
}
.hero-title {
font-size: 40rpx;
font-weight: 700;
color: #ffffff;
line-height: 56rpx;
color: #16324f;
line-height: 54rpx;
}
.hero-desc {
margin-top: 16rpx;
font-size: 28rpx;
line-height: 40rpx;
color: rgba(255, 255, 255, 0.9);
font-size: 24rpx;
line-height: 36rpx;
color: #5f7284;
}
.hero-actions {
margin-top: 28rpx;
.hero-right-tag {
height: 56rpx;
padding: 0 22rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.76);
align-items: center;
justify-content: center;
}
.primary-btn {
background: #ffffff;
color: #0f3d66;
font-size: 30rpx;
.hero-right-tag-text {
font-size: 22rpx;
font-weight: 700;
text-align: center;
padding: 24rpx 0;
border-radius: 18rpx;
color: #0f766e;
}
.service-card,
.service-category-grid,
.promo-row,
.recommend-card-top,
.recommend-card-bottom,
.recommend-card-actions,
.case-card {
flex-direction: row;
align-items: center;
}
.service-category-grid {
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 12rpx;
}
.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-bottom: 24rpx;
}
.promo-row {
padding-right: 20rpx;
}
.promo-card {
width: 240rpx;
height: 144rpx;
padding: 24rpx;
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;
}
.recommend-card,
.case-card {
padding: 24rpx;
border-radius: 20rpx;
border-radius: 24rpx;
background: #f8fbfc;
margin-bottom: 20rpx;
}
.service-top,
.case-row {
.recommend-card-top,
.recommend-card-bottom,
.case-row,
.case-action-row {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
align-items: center;
}
.service-name,
.recommend-card-cover {
width: 112rpx;
height: 112rpx;
border-radius: 28rpx;
background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
align-items: center;
justify-content: center;
}
.recommend-card-cover-text {
font-size: 28rpx;
font-weight: 700;
color: #0f766e;
}
.recommend-card-main {
flex: 1;
min-width: 0;
margin-left: 20rpx;
}
.recommend-card-title,
.case-title {
font-size: 32rpx;
font-weight: 700;
color: #16324f;
}
.service-meta,
.recommend-card-subtitle,
.recommend-card-suitable,
.case-no,
.case-info,
.service-summary,
.service-suitable,
.empty-text {
margin-top: 10rpx;
font-size: 26rpx;
line-height: 38rpx;
font-size: 24rpx;
line-height: 34rpx;
color: #66788a;
}
.service-price {
.recommend-card-tags {
flex-direction: row;
flex-wrap: wrap;
margin-top: 18rpx;
margin-bottom: 18rpx;
}
.recommend-card-tag {
padding: 10rpx 16rpx;
border-radius: 999rpx;
background: #eef2f7;
font-size: 22rpx;
color: #476072;
margin-right: 12rpx;
margin-bottom: 12rpx;
}
.recommend-card-price-prefix,
.recommend-card-price {
font-size: 34rpx;
font-weight: 700;
color: #0f766e;
}
.recommend-card-unit {
font-size: 22rpx;
color: #64748b;
}
.recommend-card-secondary,
.recommend-card-primary,
.case-action-secondary,
.case-action-primary {
height: 68rpx;
padding: 0 24rpx;
border-radius: 999rpx;
font-size: 24rpx;
font-weight: 700;
align-items: center;
justify-content: center;
margin-left: 12rpx;
}
.recommend-card-secondary,
.case-action-secondary {
background: #ffffff;
border-width: 2rpx;
border-style: solid;
border-color: #cbd5e1;
color: #476072;
}
.recommend-card-primary,
.case-action-primary {
background: #16a085;
color: #ffffff;
}
.case-action-row {
margin-top: 18rpx;
}
.empty-box {
padding: 40rpx 0;
align-items: center;