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>
<view class="popup-body"> <view class="popup-body">
<view class="c-field"> <view class="c-field">
<text class="c-label">宠物名字</text> <text class="app-form-label">宠物名字</text>
<input v-model="newAppt.petName" class="c-input" placeholder="请输入" /> <input v-model="newAppt.petName" class="app-form-input" placeholder="请输入" />
</view> </view>
<view class="c-field"> <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"> <picker mode="selector" :range="petTypes" range-key="label" @change="e => newAppt.petType = petTypes[e.detail.value].value">
<view class="c-input c-picker"> <view class="app-form-input app-form-picker">
<text :class="{ 'c-placeholder': !newAppt.petType }">{{ newAppt.petType || '请选择' }}</text> <text :class="{ 'app-form-placeholder': !newAppt.petType }">{{ newAppt.petType || '请选择' }}</text>
<text class="c-arrow">›</text> <text class="app-form-arrow">›</text>
</view> </view>
</picker> </picker>
</view> </view>
<view class="c-field"> <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"> <picker mode="selector" :range="serviceTypes" range-key="label" @change="e => newAppt.serviceType = serviceTypes[e.detail.value].value">
<view class="c-input c-picker"> <view class="app-form-input app-form-picker">
<text :class="{ 'c-placeholder': !newAppt.serviceType }">{{ newAppt.serviceType || '请选择' }}</text> <text :class="{ 'app-form-placeholder': !newAppt.serviceType }">{{ newAppt.serviceType || '请选择' }}</text>
<text class="c-arrow">›</text> <text class="app-form-arrow">›</text>
</view> </view>
</picker> </picker>
</view> </view>
<view class="c-field"> <view class="c-field">
<text class="c-label">预约时间</text> <text class="app-form-label">预约时间</text>
<view class="c-time-row"> <view class="c-time-row">
<picker mode="date" :value="appointmentDate" @change="onAppointmentDateChange" class="c-time-half"> <picker mode="date" :value="appointmentDate" @change="onAppointmentDateChange" class="c-time-half">
<view class="c-input c-picker"> <view class="app-form-input app-form-picker">
<text :class="{ 'c-placeholder': !appointmentDate }">{{ appointmentDate || '日期' }}</text> <text :class="{ 'app-form-placeholder': !appointmentDate }">{{ appointmentDate || '日期' }}</text>
</view> </view>
</picker> </picker>
<picker <picker
@ -156,15 +156,15 @@
@change="onAppointmentTimeOnlyChange" @change="onAppointmentTimeOnlyChange"
class="c-time-half" class="c-time-half"
> >
<view class="c-input c-picker"> <view class="app-form-input app-form-picker">
<text :class="{ 'c-placeholder': !appointmentTime }">{{ appointmentTime || '时间' }}</text> <text :class="{ 'app-form-placeholder': !appointmentTime }">{{ appointmentTime || '时间' }}</text>
</view> </view>
</picker> </picker>
</view> </view>
</view> </view>
<view class="c-field"> <view class="c-field">
<text class="c-label">备注（可选）</text> <text class="app-form-label">备注（可选）</text>
<textarea v-model="newAppt.remark" class="c-input c-textarea" placeholder="可选" /> <textarea v-model="newAppt.remark" class="app-form-textarea home-remark-textarea" placeholder="可选" />
</view> </view>
</view> </view>
<view class="popup-footer"> <view class="popup-footer">
@ -469,31 +469,9 @@ onShow(() => {
.c-field { margin-bottom: 16px; } .c-field { margin-bottom: 16px; }
.c-field:last-of-type { margin-bottom: 0; } .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-row { display: flex; gap: 10px; }
.c-time-half { flex: 1; } .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 */ /* B端 Tab */
.tabs-wrap { .tabs-wrap {

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

@ -12,10 +12,10 @@
<view v-else-if="reportData" class="report-content"> <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-bar-inner">
<view class="brand-home" @click="goHome"> <view class="brand-home" @click="goBackOrHome">
<AppIcon name="home" :size="16" color="#ffffff" /> <AppIcon name="back" :size="16" color="#ffffff" />
</view> </view>
<text class="brand-name">{{ reportData.store?.name || '宠伴生活馆' }}</text> <text class="brand-name">{{ reportData.store?.name || '宠伴生活馆' }}</text>
<view style="width:32px"></view> <view style="width:32px"></view>
@ -226,21 +226,21 @@
<!-- 操作区 --> <!-- 操作区 -->
<view class="actions"> <view class="actions">
<template v-if="isStaff"> <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>
<button class="action-btn action-secondary" @click="generatePoster"> <button class="app-btn-main app-btn-soft" @click="generatePoster">
保存海报到相册 保存海报到相册
</button> </button>
</template> </template>
<template v-else> <template v-else>
<button class="action-btn action-primary" @click="callStore"> <button class="app-btn-main app-btn-primary" @click="callStore">
联系门店 联系门店
</button> </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>
<button class="action-btn action-ghost" @click="goHome"> <button class="app-btn-main app-btn-outline action-link-btn" @click="goHome">
我也要预约 我也要预约
</button> </button>
</template> </template>
@ -343,6 +343,19 @@ const loadReport = async () => {
const goHome = () => uni.reLaunch({ url: '/pages/home/Home' }) 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 callStore = () => {
const phone = reportData.value?.store?.phone const phone = reportData.value?.store?.phone
if (!phone) return uni.showToast({ title: '门店未设置电话', icon: 'none' }) if (!phone) return uni.showToast({ title: '门店未设置电话', icon: 'none' })
@ -679,8 +692,10 @@ onMounted(() => loadReport())
/* 品牌栏 */ /* 品牌栏 */
.brand-bar { .brand-bar {
background: #1a1a1a; background: #2db96d;
padding: 12px 16px 14px; padding: 12px 16px 14px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
} }
.brand-bar-inner { .brand-bar-inner {
display: flex; display: flex;
@ -1007,33 +1022,11 @@ onMounted(() => loadReport())
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
} }
.action-btn { .action-link-btn {
width: 100%; height: 42px !important;
height: 48px; min-height: 42px !important;
border-radius: 14px; line-height: 42px !important;
font-size: 15px; font-weight: 600 !important;
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;
} }
/* 底部品牌 */ /* 底部品牌 */