From 9275403b4ddad57dcad76b16826cf1c2476ea0c9 Mon Sep 17 00:00:00 2001
From: MaDaLei <madai@netease.com>
Date: Thu, 16 Apr 2026 23:23:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Home+reportView=20UI=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/home/Home.vue              | 58 ++++++++-----------------
 src/pages/report-view/reportView.vue | 65 +++++++++++++---------------
 2 files changed, 47 insertions(+), 76 deletions(-)

diff --git a/src/pages/home/Home.vue b/src/pages/home/Home.vue
index 828af98..9e686de 100644
--- a/src/pages/home/Home.vue
+++ b/src/pages/home/Home.vue
@@ -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 {
diff --git a/src/pages/report-view/reportView.vue b/src/pages/report-view/reportView.vue
index 1c35ac7..52b71db 100644
--- a/src/pages/report-view/reportView.vue
+++ b/src/pages/report-view/reportView.vue
@@ -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;
 }
 
 /* 底部品牌 */