首页/我的

2026-04-29 16:51:52 +08:00
parent cabaa14dd0
commit 8a4cba7769
6 changed files with 587 additions and 160 deletions
@@ -0,0 +1,115 @@
+<template>
+  <view class="page-nav">
+    <!-- 首页按钮 -->
+    <view class="nav-item" @click="handleNav('home')">
+      <text class="nav-icon">🏠</text>
+      <text class="nav-text">首页</text>
+    </view>
+
+    <!-- 开门按钮 - 圆形凸起 -->
+    <view class="door-btn-wrapper" @click="handleOpenDoor">
+      <view class="door-btn">开门</view>
+    </view>
+
+    <!-- 我的按钮 -->
+    <view class="nav-item" @click="handleNav('mine')">
+      <text class="nav-icon">👤</text>
+      <text class="nav-text">我的</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'PageNav',
+  props: {
+    // 当前高亮的tab: 'home' | 'mine'
+    activeTab: {
+      type: String,
+      default: 'home'
+    }
+  },
+  methods: {
+    handleNav(tab) {
+      // 发出事件，由父组件处理导航
+      this.$emit('change', tab);
+    },
+    handleOpenDoor() {
+      uni.showModal({
+        title: '开门',
+        content: '确认打开柜门？',
+        success: (res) => {
+          if (res.confirm) {
+            uni.showToast({ title: '柜门已打开', icon: 'success' });
+          }
+        }
+      });
+      this.$emit('openDoor');
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 120rpx;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.08);
+  z-index: 999;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.nav-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.nav-icon {
+  font-size: 40rpx;
+  margin-bottom: 4rpx;
+}
+
+.nav-text {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.nav-item:active .nav-text,
+.nav-item.active .nav-text {
+  color: #2979ff;
+}
+
+.door-btn-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: -80rpx;
+}
+
+.door-btn {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #2979ff, #1e60e0);
+  color: #fff;
+  font-size: 38rpx;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 10rpx 36rpx rgba(41, 121, 255, 0.55);
+}
+</style>