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

feat: Home+reportView UI调整

Browse Source
This commit is contained in:
MaDaLei 2026-04-16 23:23:15 +08:00
parent b387f6d944
commit 9275403b4d
2 changed files with 47 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -120,33 +120,33 @@
</view>
<view class="popup-body">
<view class="c-field">
<text class="c-label">宠物名字</text>
<input v-model="newAppt.petName" class="c-input" placeholder="请输入" />
<text class="app-form-label">宠物名字</text>
<input v-model="newAppt.petName" class="app-form-input" placeholder="请输入" />
</view>
<view class="c-field">
<text class="c-label">宠物类型</text>
<text class="app-form-label">宠物类型</text>
<picker mode="selector" :range="petTypes" range-key="label" @change="e => newAppt.petType = petTypes[e.detail.value].value">
<view class="c-input c-picker">
<text :class="{ 'c-placeholder': !newAppt.petType }">{{ newAppt.petType || '请选择' }}</text>
<text class="c-arrow">›</text>
<view class="app-form-input app-form-picker">
<text :class="{ 'app-form-placeholder': !newAppt.petType }">{{ newAppt.petType || '请选择' }}</text>
<text class="app-form-arrow">›</text>
</view>
</picker>
</view>
<view class="c-field">
<text class="c-label">服务类型</text>
<text class="app-form-label">服务类型</text>
<picker mode="selector" :range="serviceTypes" range-key="label" @change="e => newAppt.serviceType = serviceTypes[e.detail.value].value">
<view class="c-input c-picker">
<text :class="{ 'c-placeholder': !newAppt.serviceType }">{{ newAppt.serviceType || '请选择' }}</text>
<text class="c-arrow">›</text>
<view class="app-form-input app-form-picker">
<text :class="{ 'app-form-placeholder': !newAppt.serviceType }">{{ newAppt.serviceType || '请选择' }}</text>
<text class="app-form-arrow">›</text>
</view>
</picker>
</view>
<view class="c-field">
<text class="c-label">预约时间</text>
<text class="app-form-label">预约时间</text>
<view class="c-time-row">
<picker mode="date" :value="appointmentDate" @change="onAppointmentDateChange" class="c-time-half">
<view class="c-input c-picker">
<text :class="{ 'c-placeholder': !appointmentDate }">{{ appointmentDate || '日期' }}</text>
<view class="app-form-input app-form-picker">
<text :class="{ 'app-form-placeholder': !appointmentDate }">{{ appointmentDate || '日期' }}</text>
</view>
</picker>
<picker
@ -156,15 +156,15 @@
@change="onAppointmentTimeOnlyChange"
class="c-time-half"
>
<view class="c-input c-picker">
<text :class="{ 'c-placeholder': !appointmentTime }">{{ appointmentTime || '时间' }}</text>
<view class="app-form-input app-form-picker">
<text :class="{ 'app-form-placeholder': !appointmentTime }">{{ appointmentTime || '时间' }}</text>
</view>
</picker>
</view>
</view>
<view class="c-field">
<text class="c-label">备注（可选）</text>
<textarea v-model="newAppt.remark" class="c-input c-textarea" placeholder="可选" />
<text class="app-form-label">备注（可选）</text>
<textarea v-model="newAppt.remark" class="app-form-textarea home-remark-textarea" placeholder="可选" />
</view>
</view>
<view class="popup-footer">
@ -469,31 +469,9 @@ onShow(() => {
.c-field { margin-bottom: 16px; }
.c-field:last-of-type { margin-bottom: 0; }
.c-label {
display: block;
font-size: 13px;
font-weight: 600;
color: #666660;
margin-bottom: 6px;
}
.c-input {
background: #f5f5f2;
border: 1.5px solid transparent;
border-radius: 12px;
padding: 11px 14px;
font-size: 15px;
color: #1a1a1a;
width: 100%;
box-sizing: border-box;
min-height: 44px;
}
.c-input:focus { border-color: #2db96d; background: #fff; }
.c-picker { display: flex; align-items: center; justify-content: space-between; }
.c-placeholder { color: #bbbbb5; }
.c-arrow { color: #bbbbb5; font-size: 18px; }
.c-time-row { display: flex; gap: 10px; }
.c-time-half { flex: 1; }
.c-textarea { min-height: 80px; line-height: 1.5; }
.home-remark-textarea { min-height: 80px; line-height: 1.5; }
/* B端 Tab */
.tabs-wrap {

65
src/pages/report-view/reportView.vue
View File

@ -12,10 +12,10 @@
<view v-else-if="reportData" class="report-content">
<!-- 顶部品牌 -->
<view class="brand-bar" :style="brandBarSafe">
<view class="brand-bar nav-gradient" :style="brandBarSafe">
<view class="brand-bar-inner">
<view class="brand-home" @click="goHome">
<AppIcon name="home" :size="16" color="#ffffff" />
<view class="brand-home" @click="goBackOrHome">
<AppIcon name="back" :size="16" color="#ffffff" />
</view>
<text class="brand-name">{{ reportData.store?.name || '宠伴生活馆' }}</text>
<view style="width:32px"></view>
@ -226,21 +226,21 @@
<!-- 操作区 -->
<view class="actions">
<template v-if="isStaff">
<button open-type="share" class="action-btn action-primary">
<button open-type="share" class="app-btn-main app-btn-primary">
转发给宠主
</button>
<button class="action-btn action-secondary" @click="generatePoster">
<button class="app-btn-main app-btn-soft" @click="generatePoster">
保存海报到相册
</button>
</template>
<template v-else>
<button class="action-btn action-primary" @click="callStore">
<button class="app-btn-main app-btn-primary" @click="callStore">
联系门店
</button>
<button v-if="reportData.store?.latitude" class="action-btn action-secondary" @click="navToStore">
<button v-if="reportData.store?.latitude" class="app-btn-main app-btn-soft" @click="navToStore">
导航去门店
</button>
<button class="action-btn action-ghost" @click="goHome">
<button class="app-btn-main app-btn-outline action-link-btn" @click="goHome">
我也要预约
</button>
</template>
@ -343,6 +343,19 @@ const loadReport = async () => {
const goHome = () => uni.reLaunch({ url: '/pages/home/Home' })
const goBackOrHome = () => {
try {
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack()
return
}
} catch (_) {
// ignore and fallback to home
}
goHome()
}
const callStore = () => {
const phone = reportData.value?.store?.phone
if (!phone) return uni.showToast({ title: '门店未设置电话', icon: 'none' })
@ -679,8 +692,10 @@ onMounted(() => loadReport())
/* 品牌栏 */
.brand-bar {
background: #1a1a1a;
background: #2db96d;
padding: 12px 16px 14px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
}
.brand-bar-inner {
display: flex;
@ -1007,33 +1022,11 @@ onMounted(() => loadReport())
flex-direction: column;
gap: 10px;
}
.action-btn {
width: 100%;
height: 48px;
border-radius: 14px;
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border: none;
letter-spacing: 0.3px;
transition: opacity 0.15s;
}
.action-btn:active { opacity: 0.85; }
.action-primary {
background: #1a1a1a;
color: #fff;
}
.action-secondary {
background: #f5f5f2;
color: #1a1a1a;
}
.action-ghost {
background: transparent;
color: #999993;
height: 40px;
font-weight: 500;
.action-link-btn {
height: 42px !important;
min-height: 42px !important;
line-height: 42px !important;
font-weight: 600 !important;
}
/* 底部品牌 */