首页/我的

components/float-menu-card/float-menu-card.vue

@@ -0,0 +1,69 @@
+<template>
+  <view class="float-menu-card">
+    <view 
+      v-for="(item, index) in list" 
+      :key="index" 
+      class="menu-item"
+      :class="{ 'last-item': index === list.length - 1 }"
+      @click="handleItemClick(item, index)"
+    >
+      <text class="menu-text">{{ item.title }}</text>
+      <text class="arrow">></text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'FloatMenuCard',
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleItemClick(item, index) {
+      // 发出事件，让父组件处理跳转逻辑
+      this.$emit('item-click', { item, index });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.float-menu-card {
+  position: fixed;
+  bottom: 40rpx;
+  left: 28rpx;
+  right: 28rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  z-index: 100;
+}
+
+.menu-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32rpx 28rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.menu-item:last-child,
+.menu-item.last-item {
+  border-bottom: none;
+}
+
+.menu-text {
+  font-size: 30rpx;
+  color: #333;
+}
+
+.arrow {
+  font-size: 28rpx;
+  color: #ccc;
+}
+</style>

components/page-nav-bar/page-nav-bar.vue

@@ -0,0 +1,66 @@
+<template>
+  <view class="page-nav-bar">
+    <view class="nav-btn left" @click="handlePrev">
+      <text class="arrow-icon">‹</text>
+    </view>
+    <view class="nav-btn right" @click="handleNext">
+      <text class="arrow-icon">›</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'PageNavBar',
+  props: {
+    hasPrev: { type: Boolean, default: true },
+    hasNext: { type: Boolean, default: true }
+  },
+  methods: {
+    handlePrev() {
+      if (!this.hasPrev) return;
+      this.$emit('prev');
+    },
+    handleNext() {
+      if (!this.hasNext) return;
+      this.$emit('next');
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page-nav-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 110rpx;
+  background: #fff;
+  box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 160rpx;
+  z-index: 100;
+}
+
+.nav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80rpx;
+  height: 80rpx;
+}
+
+.arrow-icon {
+  font-size: 72rpx;
+  color: #333;
+  font-weight: 300;
+  line-height: 1;
+}
+
+.nav-btn.right .arrow-icon {
+  color: #ccc;
+}
+</style>

components/page-nav/page-nav.vue

@@ -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>

pages.json

@@ -1 +1,22 @@
-{"pages": [{"path": "pages/index/index", "style": {"navigationBarTitleText": "智能货柜", "navigationStyle": "custom"}}], "globalStyle": {"navigationBarTextStyle": "black", "navigationBarTitleText": "智能货柜", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8"}}
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/mine/mine",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "智能货柜",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  }
+}

pages/index/index.vue

@@ -1,12 +1,14 @@
 <template>
   <view class="app-container">
-    <!-- 商品展示区域 -->
+    <!-- ========== 首页内容 ========== -->
-    <scroll-view class="product-area" scroll-y>
+    <view v-if="currentTab === 'home'" class="page-content home-page">
-      <!-- 标题 -->
+      <scroll-view 
+        class="product-area" 
+        scroll-y
+      >
         <view class="section-title">热销商品</view>
 
-      <!-- 商品列表 - 三列 -->
+        <view class="product-grid" id="productGrid">
-      <view class="product-grid">
           <view
             v-for="(item, index) in productList"
             :key="index"
@@ -17,6 +19,9 @@
             <view class="product-price">{{ item.price }}元</view>
           </view>
         </view>
+
+        <!-- 底部占位，防止被tab-bar遮挡 -->
+        <view class="bottom-spacer"></view>
       </scroll-view>
 
       <!-- 底部导航栏 -->
@@ -25,7 +30,6 @@
           <text class="tab-text">首页</text>
         </view>
 
-      <!-- 开门按钮 - 圆形凸起 -->
         <view class="door-btn-wrapper" @click="handleOpenDoor">
           <view class="door-btn">开门</view>
         </view>
@@ -35,167 +39,140 @@
         </view>
       </view>
     </view>
+
+    <!-- ========== 我的内容 ========== -->
+    <view v-if="currentTab === 'mine'" class="page-content mine-page">
+      <!-- 蓝色个人信息区域 -->
+      <view class="user-header">
+        <view class="user-info">
+          <view class="avatar-wrapper">
+            <image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill" />
+          </view>
+          <view class="user-detail">
+            <text class="nickname">{{ userInfo.nickname || '未登录' }}</text>
+            <text class="phone">{{ maskedPhone }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 菜单列表（顶部） -->
+      <view class="content-area">
+        <view class="menu-list">
+          <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(item)">
+            <text class="menu-text">{{ item.title }}</text>
+            <text class="menu-arrow">></text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 底部左右箭头导航条 -->
+      <page-nav-bar
+        :hasPrev="true"
+        :hasNext="false"
+        @prev="handleNavPrev"
+        @next="handleNavNext"
+      />
+    </view>
+  </view>
 </template>
 
 <script>
+import PageNavBar from '@/components/page-nav-bar/page-nav-bar.vue';
+
 export default {
+  components: { PageNavBar },
   data() {
     return {
       currentTab: 'home',
+      contentHeight: 0,
+      areaHeight: 0,
       productList: [
+        { name: '君乐宝450ml悦鲜活', price: '0.01', image: '/static/c1.png' },
+        { name: '白红（0.0.0.0-9.9.9）', price: '0.06', image: '/static/c2.png' },
+        { name: '白桔（0.0.0.0-5.5.5）', price: '0.05', image: '/static/c3.png' },
+        { name: '可口可乐330ml', price: '3.00', image: '/static/c4.png' },
+        { name: '农夫山泉550ml', price: '2.00', image: '/static/c5.png' },
         { name: '君乐宝450ml悦鲜活', price: '0.01', image: '/static/c1.png' },
         { name: '白红（0.0.0.0-9.9.9）', price: '0.06', image: '/static/c2.png' },
         { name: '白桔（0.0.0.0-5.5.5）', price: '0.05', image: '/static/c3.png' },
         { name: '可口可乐330ml', price: '3.00', image: '/static/c4.png' },
         { name: '农夫山泉550ml', price: '2.00', image: '/static/c5.png' },
         { name: '乐事薯片原味75g', price: '7.50', image: '/static/c6.png' }
+      ],
+      userInfo: { nickname: '张三', phone: '13812345678' },
+      menuList: [
+        { title: '我的订单', page: '/pages/order/order' },
+        { title: '收货地址', page: '/pages/address/address' },
+        { title: '常见问题', page: '/pages/faq/faq' }
       ]
     };
   },
-  methods: {
+  computed: {
-    switchTab(tab) {
+    maskedPhone() {
-      this.currentTab = tab;
+      const p = this.userInfo.phone;
+      return p ? p.substring(0,3) + '****' + p.substring(7) : '';
+    }
   },
+  mounted() {},
+  methods: {
+    switchTab(tab) { this.currentTab = tab; },
     handleOpenDoor() {
-      uni.showModal({
+      uni.showModal({ title: '开门', content: '确认打开柜门？', success: r => r.confirm && uni.showToast({title:'柜门已打开', icon:'success'}) });
-        title: '开门',
+    },
-        content: '确认打开柜门？',
+    handleMenuClick(item) {
-        success: (res) => {
+      if (item.page) {
-          if (res.confirm) {
+        uni.showToast({title:'功能开发中', icon:'none'});
-            uni.showToast({ title: '柜门已打开', icon: 'success' });
       }
-        }
+    },
-      });
+    handleNavPrev() {
+      this.currentTab = 'home';
+    },
+    handleNavNext() {
+      uni.showToast({ title: '暂无下一页', icon: 'none' });
     }
   }
 };
 </script>
 
 <style scoped>
-.app-container {
+page { height: 100%; background-color: #fff; }
-  display: flex;
+.app-container { display: flex; flex-direction: column; height: 100vh; background-color: #fff; }
-  flex-direction: column;
+.page-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; position: relative; }
-  height: 100vh;
-  background-color: #f5f5f5;
-}
 
-/* ========== 商品区域 ========== */
+/* ====== 首页样式 ====== */
-.product-area {
+.home-page { display: flex; flex-direction: column; height: 100%; }
-  flex: 1;
+.product-area { flex: 1; overflow-y: auto; height: 0; }
-  padding-bottom: 160rpx;
+.section-title { font-size: 36rpx; font-weight: bold; color: #333; padding: 24rpx 28rpx 16rpx; }
-}
+.product-grid { display: flex; flex-wrap: wrap; padding: 12rpx; gap: 12rpx; }
+.product-card { width: calc((100% - 24rpx) / 3); text-align: center; }
+.product-img { width: 100%; height: 220rpx; border-radius: 8rpx; background-color: #f0f0f0; }
+.product-name { font-size: 24rpx; color: #333; padding: 10rpx 8rpx 6rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.product-price { font-size: 30rpx; font-weight: bold; color: #e4393c; padding: 0 8rpx 16rpx; }
 
-/* 热销商品标题 */
+/* 底部占位：给tab-bar和开门按钮留出空间 */
-.section-title {
+.bottom-spacer { height: 160rpx; }
-  font-size: 36rpx;
-  font-weight: bold;
-  color: #333;
-  padding: 24rpx 28rpx 16rpx;
-  background-color: #fff;
-}
 
-/* 三列网格 */
+/* 底部导航栏 */
-.product-grid {
+.tab-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 120rpx; background: #fff; 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); }
-  display: flex;
+.tab-item { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
-  flex-wrap: wrap;
+.tab-text { font-size: 28rpx; color: #999; font-weight: normal; }
-  padding: 12rpx;
+.tab-item.active .tab-text { color: #2979ff; }
-  gap: 12rpx;
+.door-btn-wrapper { position: relative; display: flex; align-items: center; justify-content: center; margin-top: -80rpx; }
-  background-color: #fff;
+.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); }
-}
 
-/* 每列占1/3 */
+/* ====== 我的页面样式 ====== */
-.product-card {
+.mine-page { background-color: #f5f5f5; position: relative; overflow-y: auto; }
-  width: calc((100% - 24rpx) / 3);
+.user-header { background: linear-gradient(135deg, #2979ff, #1e60e0); padding: 60rpx 40rpx; }
-  background: transparent;
+.user-info { display: flex; align-items: center; }
-  border-radius: 8rpx;
+.avatar { width: 120rpx; height: 120rpx; border-radius: 50%; border: 4rpx solid rgba(255,255,255,0.8); background-color: #e0e0e0; }
-  overflow: hidden;
+.avatar-wrapper { margin-right: 30rpx; }
-  text-align: center; /* 居中 */
+.user-detail { display: flex; flex-direction: column; flex: 1; }
-}
+.nickname { font-size: 36rpx; font-weight: bold; color: #fff; margin-bottom: 12rpx; }
-
+.phone { font-size: 28rpx; color: rgba(255,255,255,0.9); }
-.product-img {
+.content-area { padding: 20rpx; padding-bottom: 140rpx; }
-  width: 100%;
+.menu-list { background-color: #fff; border-radius: 16rpx; overflow: hidden; }
-  height: 220rpx;
+.menu-item { display: flex; justify-content: space-between; padding: 32rpx 28rpx; border-bottom: 1rpx solid #f0f0f0; }
-  display: block;
+.menu-item:last-child { border-bottom: none; }
-  border-radius: 8rpx;
+.menu-text { font-size: 30rpx; color: #333; }
-  background-color: #f0f0f0;
+.menu-arrow { font-size: 28rpx; color: #ccc; }
-}
-
-/* 商品名称：居中 + 单行超出省略 */
-.product-name {
-  font-size: 24rpx;
-  color: #333;
-  padding: 10rpx 8rpx 6rpx;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.3;
-  text-align: center;
-}
-
-/* 价格：红色加粗 + 居中 */
-.product-price {
-  font-size: 30rpx;
-  font-weight: bold;
-  color: #e4393c;
-  padding: 0 8rpx 16rpx;
-  text-align: center;
-}
-
-/* ========== 底部导航栏 ========== */
-.tab-bar {
-  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);
-}
-
-.tab-item {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
-.tab-text {
-  font-size: 28rpx; /* 变小一点 */
-  color: #999;
-  font-weight: normal; /* 不加粗 */
-}
-
-.tab-item.active .tab-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>

pages/mine/mine.vue

@@ -0,0 +1,179 @@
+<template>
+  <view class="app-container">
+    <!-- 我的内容 -->
+    <view class="page-content">
+      <!-- 蓝色个人信息区域 -->
+      <view class="user-header">
+        <view class="user-info">
+          <!-- 左侧圆形头像 -->
+          <view class="avatar-wrapper">
+            <image 
+              class="avatar" 
+              :src="userInfo.avatar || '/static/default-avatar.png'" 
+              mode="aspectFill"
+            />
+          </view>
+          <!-- 右侧信息 -->
+          <view class="user-detail">
+            <text class="nickname">{{ userInfo.nickname || '未登录' }}</text>
+            <text class="phone">{{ maskedPhone }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 菜单列表 -->
+      <view class="content-area">
+        <view class="menu-list">
+          <view 
+            class="menu-item" 
+            v-for="(item, index) in menuList" 
+            :key="index"
+            @click="handleMenuClick(item)"
+          >
+            <text class="menu-text">{{ item.title }}</text>
+            <text class="menu-arrow">></text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部导航栏 -->
+    <page-nav activeTab="mine" />
+  </view>
+</template>
+
+<script>
+import PageNav from '@/components/page-nav/page-nav.vue';
+
+export default {
+  components: {
+    PageNav
+  },
+  data() {
+    return {
+      userInfo: {
+        avatar: '',
+        nickname: '张三',
+        phone: '13812345678'
+      },
+      menuList: [
+        { title: '我的订单', page: '/pages/order/order' },
+        { title: '收货地址', page: '/pages/address/address' },
+        { title: '常见问题', page: '/pages/faq/faq' },
+        { title: '联系客服', action: 'contact' }
+      ]
+    };
+  },
+  computed: {
+    maskedPhone() {
+      const phone = this.userInfo.phone;
+      if (!phone || phone.length < 11) return phone;
+      return phone.substring(0, 3) + '****' + phone.substring(7);
+    }
+  },
+  methods: {
+    handleMenuClick(item) {
+      if (item.page) {
+        uni.navigateTo({ url: item.page });
+      } else if (item.action === 'contact') {
+        uni.showModal({
+          title: '联系客服',
+          content: '客服电话：400-123-4567',
+          showCancel: false
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+page {
+  height: 100%;
+  background-color: #f5f5f5;
+}
+
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.page-content {
+  flex: 1;
+  overflow-y: auto;
+  padding-bottom: 120rpx;
+}
+
+.user-header {
+  background: linear-gradient(135deg, #2979ff, #1e60e0);
+  padding: 80rpx 40rpx 60rpx;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+}
+
+.avatar-wrapper {
+  margin-right: 30rpx;
+}
+
+.avatar {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+  border: 4rpx solid rgba(255, 255, 255, 0.8);
+  background-color: #e0e0e0;
+}
+
+.user-detail {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.nickname {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #fff;
+  margin-bottom: 12rpx;
+}
+
+.phone {
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.content-area {
+  padding: 20rpx;
+}
+
+.menu-list {
+  background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx 28rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.menu-item:last-child {
+  border-bottom: none;
+}
+
+.menu-text {
+  font-size: 30rpx;
+  color: #333;
+}
+
+.menu-arrow {
+  font-size: 28rpx;
+  color: #ccc;
+}
+</style>