petstore/petstore-frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新 2026-04-18 21:54

Browse Source
This commit is contained in:
MaDaLei 2026-04-18 21:54:48 +08:00
parent a6bd72f0d4
commit b486dd313a
1 changed files with 78 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/pages/home/Home.vue
View File

@ -8,24 +8,20 @@
<view class="c-hero">
<text class="c-hero-title">服务预约</text>
<text class="c-hero-sub">一键预约洗美，到店与进度随时可查</text>
<text class="c-hero-sub">在线选时段，到店更省心</text>
<button class="app-btn-main app-btn-primary c-hero-cta" hover-class="c-hero-cta--hover" @click="openCustCreateAppt">
预约服务
</button>
</view>
<view class="home-dash">
<view
v-for="card in dashCards"
:key="card.key"
class="dash-card"
:class="{ 'dash-card--active': activeDashKey === card.key }"
@click="onDashCardClick(card.key)"
>
<text class="dash-card-value">{{ card.value }}</text>
<text class="dash-card-label">{{ card.label }}</text>
<text class="dash-card-hint">{{ card.hint }}</text>
<view class="c-cust-section">
<text class="c-cust-section-title">我的预约</text>
<text v-if="listMode === 'tab'" class="c-cust-section-hint">以下可查看已提交的预约，按状态筛选</text>
</view>
<!-- 宠主：不做门店 KPI 看板；仅在有「与我相关」的进行态时给一行轻量提示（§2） -->
<view v-if="petOwnerMeSummaryLine && listMode === 'tab'" class="c-cust-me-line">
<text class="c-cust-me-line-text">{{ petOwnerMeSummaryLine }}</text>
</view>
<view v-if="listMode === 'today'" class="list-mode-bar">
@ -67,13 +63,12 @@
:empty-hint="listEmptyHint"
@retry="fetchAppointments"
>
<template v-if="custEmptyProminent" #empty>
<text class="c-empty-emoji">📅</text>
<text class="c-empty-title">还没有预约</text>
<text class="c-empty-hint">创建预约后，待开始与进行中的单会出现在下方列表</text>
<button class="app-btn-main app-btn-primary c-empty-cta" @click="openCustCreateAppt">立即预约</button>
<template v-if="custEmptyGuidance" #empty>
<text class="c-empty-emoji">📋</text>
<text class="c-empty-title">当前没有可展示的预约</text>
<text class="c-empty-hint">请使用上方「预约服务」创建；提交后会在本列表显示进度</text>
</template>
<view class="order-list">
<view class="order-list order-list--cust">
<view
v-for="item in ordersForList"
:key="item.id"
@ -94,10 +89,6 @@
</view>
</view>
</AppPageState>
<view class="fab-appt fab-appt--cust-secondary" @click="openCustCreateAppt" hover-class="fab-appt--hover">
<text class="fab-appt-icon">+</text>
</view>
</view>
<!-- B端：看板（新建预约改为右下角悬浮按钮，避免与小程序胶囊重叠） -->
@ -355,6 +346,17 @@ const dashCards = computed(() => {
const newApptCount = computed(() => orders.value.filter(o => o.status === 'new').length)
const doingApptCount = computed(() => orders.value.filter(o => o.status === 'doing').length)
/** 宠主：与我相关的轻量一句（非门店经营看板，见产品说明 §2） */
const petOwnerMeSummaryLine = computed(() => {
if (userInfo.role !== 'customer') return ''
const n = newApptCount.value
const d = doingApptCount.value
if (!n && !d) return ''
if (n && d) return `你有 ${n} 个待开始、${d} 个进行中的预约`
if (n) return `你有 ${n} 个待开始的预约`
return `你有 ${d} 个进行中的预约`
})
const serviceTypes = ref([])
const showNewAppt = ref(false)
const creatingAppt = ref(false)
@ -446,8 +448,8 @@ const showListPlaceholder = computed(
() => !appointmentsLoading.value && !appointmentsError.value && ordersForList.value.length === 0
)
/** 宠主 Tab 列表为空：用自定义空态突出主按钮（与首屏 CTA 一致） */
const custEmptyProminent = computed(
/** 宠主 Tab 列表为空：仅文案引导，避免与首屏「立即预约」重复入口 */
const custEmptyGuidance = computed(
() => userInfo.role === 'customer' && listMode.value === 'tab' && showListPlaceholder.value
)
@ -462,7 +464,7 @@ const listEmptyHint = computed(() => {
return '可返回列表切换日期或 Tab'
}
if (userInfo.role === 'customer') {
return '切换上方 Tab 查看不同状态，或新建预约'
return '切换上方状态查看不同进度'
}
return '切换上方状态或新建预约'
})
@ -736,24 +738,29 @@ onShow(() => {
font-weight: 700;
}
.c-hero {
padding: 24px 20px 32px;
margin: 8px 16px 0;
padding: 22px 20px 20px;
background: #fff;
border-radius: 16px;
box-shadow: 0 1px 8px rgba(15, 23, 42, 0.06);
}
.c-hero-title {
display: block;
font-size: 26px;
font-size: 22px;
font-weight: 800;
color: #1a1a1a;
letter-spacing: -0.5px;
letter-spacing: -0.3px;
}
.c-hero-sub {
display: block;
font-size: 14px;
color: #999993;
margin-top: 4px;
color: #6b6b65;
margin-top: 8px;
line-height: 1.45;
}
.c-hero-cta {
width: 100%;
margin-top: 20px;
margin-top: 18px;
border-radius: 14px !important;
font-size: 16px !important;
font-weight: 700 !important;
@ -761,40 +768,56 @@ onShow(() => {
.c-hero-cta--hover {
opacity: 0.94;
}
.c-cust-section {
margin: 18px 16px 8px;
}
.c-cust-section-title {
display: block;
font-size: 15px;
font-weight: 700;
color: #1a1a1a;
}
.c-cust-section-hint {
display: block;
font-size: 12px;
color: #a8a89f;
margin-top: 4px;
line-height: 1.4;
}
.c-cust-me-line {
margin: 0 16px 10px;
padding: 10px 14px;
background: #f7faf8;
border-radius: 12px;
border: 1px solid #e8f5ee;
}
.c-cust-me-line-text {
font-size: 13px;
color: #3d5a4a;
line-height: 1.45;
}
.c-empty-emoji {
display: block;
font-size: 40px;
font-size: 36px;
text-align: center;
margin-bottom: 12px;
margin-bottom: 10px;
opacity: 0.9;
}
.c-empty-title {
display: block;
font-size: 17px;
font-size: 16px;
font-weight: 700;
color: #1a1a1a;
color: #3f3f3a;
text-align: center;
}
.c-empty-hint {
display: block;
font-size: 13px;
color: #999993;
color: #a8a89f;
text-align: center;
margin-top: 8px;
line-height: 1.5;
padding: 0 8px;
}
.c-empty-cta {
width: 100%;
max-width: 280px;
margin: 24px auto 0;
border-radius: 14px !important;
}
.fab-appt--cust-secondary {
background: #e8f8ef;
box-shadow: 0 4px 14px rgba(45, 185, 109, 0.22);
}
.fab-appt--cust-secondary .fab-appt-icon {
color: #2db96d;
line-height: 1.55;
padding: 0 12px;
}
.c-form-card {
margin: 0 16px;
@ -944,6 +967,9 @@ onShow(() => {
/* B端列表（底部留白，避免最后一条被悬浮钮挡住） */
.order-list { padding: 12px 16px 88px; }
.order-list--cust {
padding: 12px 16px 28px;
}
.order-card {
background: #fff;
border-radius: 14px;