consumer-front/pages/mine/mine.vue

<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';
import config from '@/config/env.js';

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: '客服电话：' + config.servicePhone,
          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>