feat: H5微客宝UI全面升级 - 对齐原型图设计

client/src/views/layout/TabLayout.vue

@@ -1,37 +1,113 @@
 <script setup>
 import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { showToast } from 'vant'
 
 const route = useRoute()
 const router = useRouter()
-
-const tabMap = { home: 'home', grow: 'grow', meal: 'meal', my: 'my' }
-const active = ref(route.name?.toLowerCase() || 'home')
+const active = ref('home')
 
 watch(() => route.name, (n) => {
-  if (n && tabMap[n.toLowerCase()]) active.value = n.toLowerCase()
-})
+  if (n) {
+    const nm = n.toLowerCase()
+    if (['home', 'meal', 'grow', 'my'].includes(nm)) active.value = nm
+  }
+}, { immediate: true })
 
-function onChange(val) {
-  router.push({ name: val.charAt(0).toUpperCase() + val.slice(1) })
+function go(name) {
+  router.push({ name: name.charAt(0).toUpperCase() + name.slice(1) })
+}
+
+function onCall() {
+  showToast({ message: '如需帮助请联系前台工作人员 📞', position: 'bottom', duration: 2000 })
 }
 </script>
 
 <template>
-  <div class="layout-wrap">
+  <div class="layout">
     <router-view />
-    <van-tabbar v-model="active" @change="onChange" active-color="#e8718d" fixed safe-area-inset-bottom>
-      <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
-      <van-tabbar-item name="grow" icon="friends-o">共伴成长</van-tabbar-item>
-      <van-tabbar-item name="meal" icon="restaurant-o">用膳</van-tabbar-item>
-      <van-tabbar-item name="my" icon="contact-o">我的</van-tabbar-item>
-    </van-tabbar>
+    <div class="tabbar">
+      <div class="tab-item" :class="{ active: active === 'home' }" @click="go('home')">
+        <van-icon :name="active === 'home' ? 'home' : 'home-o'" size="23" />
+        <span>首页</span>
+      </div>
+      <div class="tab-item" :class="{ active: active === 'meal' }" @click="go('meal')">
+        <van-icon name="food-o" size="23" />
+        <span>用膳</span>
+      </div>
+      <!-- 中央呼叫按钮 -->
+      <div class="tab-center">
+        <div class="center-btn" @click="onCall">
+          <van-icon name="phone-o" size="25" color="white" />
+        </div>
+      </div>
+      <div class="tab-item" :class="{ active: active === 'grow' }" @click="go('grow')">
+        <van-icon name="flower-o" size="23" />
+        <span>成长</span>
+      </div>
+      <div class="tab-item" :class="{ active: active === 'my' }" @click="go('my')">
+        <van-icon :name="active === 'my' ? 'contact' : 'contact-o'" size="23" />
+        <span>我的</span>
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.layout-wrap {
+.layout {
   min-height: 100vh;
-  padding-bottom: 50px;
+  padding-bottom: 72px;
 }
+.tabbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 68px;
+  background: rgba(255, 255, 255, 0.94);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding-bottom: env(safe-area-inset-bottom, 0);
+  z-index: 999;
+}
+.tab-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  cursor: pointer;
+  color: #9ca3af;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 6px 0 0;
+  transition: color 0.2s;
+}
+.tab-item.active { color: #f43f5e; }
+.tab-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding-bottom: 14px;
+}
+.center-btn {
+  width: 54px;
+  height: 54px;
+  background: linear-gradient(145deg, #f87171, #f43f5e);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 6px 20px rgba(244, 63, 94, 0.45);
+  cursor: pointer;
+  position: relative;
+  bottom: 8px;
+  transition: transform 0.15s;
+}
+.center-btn:active { transform: scale(0.93); }
 </style>