首页/我的

2026-04-29 16:51:52 +08:00
parent cabaa14dd0
commit 8a4cba7769
6 changed files with 587 additions and 160 deletions
@@ -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>