haha/haha-admin-mp/src/pages/my/my.vue

<template>
  <view class="page">
    <!-- 导航栏 -->
    <NavBar title="我的" />
    
    <!-- 用户卡片 -->
    <view class="user-section">
      <view class="user-card">
        <view class="user-header">
          <view class="avatar">
            <view class="avatar-icon">
              <text class="avatar-text">{{ userInfo.nickname?.charAt(0) || 'A' }}</text>
            </view>
          </view>
          <view class="user-info">
            <text class="user-name">{{ userInfo.nickname || '未登录' }}</text>
            <text class="user-role">{{ userInfo.roleName || '管理员' }}</text>
          </view>
        </view>
        
        <view class="user-stats">
          <view class="stat-item">
            <text class="stat-value">12</text>
            <text class="stat-label">管理门店</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-value">48</text>
            <text class="stat-label">设备数量</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-value">156</text>
            <text class="stat-label">今日订单</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 菜单区域 -->
    <view class="menu-section">
      <view class="menu-card">
        <text class="menu-title">业务管理</text>
        <view class="menu-list">
          <view class="menu-item" @click="navigateTo('/pages/shop/list')">
            <view class="menu-icon amber">
              <view class="icon-shop"></view>
            </view>
            <view class="menu-content">
              <text class="menu-name">门店管理</text>
              <text class="menu-desc">查看和管理门店信息</text>
            </view>
            <view class="menu-arrow"></view>
          </view>
          
          <view class="menu-item" @click="navigateTo('/pages/products/list')">
            <view class="menu-icon purple">
              <view class="icon-product"></view>
            </view>
            <view class="menu-content">
              <text class="menu-name">商品管理</text>
              <text class="menu-desc">管理商品和价格</text>
            </view>
            <view class="menu-arrow"></view>
          </view>
          
          <view class="menu-item" @click="navigateTo('/pages/inventory/query')">
            <view class="menu-icon cyan">
              <view class="icon-chart"></view>
            </view>
            <view class="menu-content">
              <text class="menu-name">库存查询</text>
              <text class="menu-desc">查看库存情况</text>
            </view>
            <view class="menu-arrow"></view>
          </view>
        </view>
      </view>
      
      <view class="menu-card">
        <text class="menu-title">系统设置</text>
        <view class="menu-list">
          <view class="menu-item" @click="handleChangePassword">
            <view class="menu-icon green">
              <view class="icon-lock"></view>
            </view>
            <view class="menu-content">
              <text class="menu-name">修改密码</text>
              <text class="menu-desc">更改登录密码</text>
            </view>
            <view class="menu-arrow"></view>
          </view>
          
          <view class="menu-item" @click="handleAbout">
            <view class="menu-icon blue">
              <view class="icon-info"></view>
            </view>
            <view class="menu-content">
              <text class="menu-name">关于我们</text>
              <text class="menu-desc">版本信息</text>
            </view>
            <view class="menu-arrow"></view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout-section">
      <button class="logout-btn" @click="handleLogout">
        <text>退出登录</text>
      </button>
    </view>
    
    <!-- 版本信息 -->
    <view class="version-info">
      <text>版本 1.0.0</text>
    </view>
    
    <!-- 自定义TabBar -->
    <CustomTabBar />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import NavBar from '@/components/NavBar.vue';
import CustomTabBar from '@/components/CustomTabBar.vue';
import { getUserInfo, clearAuth } from '@/utils/auth';
import { showConfirm, showToast } from '@/utils/common';

const userInfo = ref<any>({});

const loadUserInfo = () => {
  const info = getUserInfo();
  if (info) {
    userInfo.value = info;
  }
};

const navigateTo = (url: string) => {
  uni.navigateTo({ url });
};

const handleChangePassword = () => {
  showToast('修改密码功能开发中');
};

const handleAbout = () => {
  showToast('哈哈运营平台 v1.0.0');
};

const handleLogout = async () => {
  const confirmed = await showConfirm('确定要退出登录吗？');
  if (confirmed) {
    clearAuth();
    uni.reLaunch({ url: '/pages/login/login' });
  }
};

onMounted(() => {
  loadUserInfo();
});
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f8fafc;
  padding-bottom: 200rpx;
}

/* 用户区域 */
.user-section {
  padding: 16rpx 24rpx;
}

.user-card {
  background: #ffffff;
  border: 1rpx solid #e2e8f0;
  border-radius: 20rpx;
  padding: 32rpx;
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  
  .avatar {
    width: 96rpx;
    height: 96rpx;
    background: #ecfdf5;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
    border: 2rpx solid #10b981;
    
    .avatar-icon {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .avatar-text {
      font-size: 40rpx;
      font-weight: 700;
      color: #10b981;
    }
  }
  
  .user-info {
    flex: 1;
    
    .user-name {
      display: block;
      font-size: 34rpx;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4rpx;
    }
    
    .user-role {
      font-size: 26rpx;
      color: #64748b;
    }
  }
}

.user-stats {
  display: flex;
  background: #f8fafc;
  border-radius: 12rpx;
  padding: 20rpx 0;
  
  .stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    .stat-value {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4rpx;
    }
    
    .stat-label {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22rpx;
      color: #64748b;
    }
  }
  
  .stat-divider {
    width: 1rpx;
    background: #e2e8f0;
  }
}

/* 菜单区域 */
.menu-section {
  padding: 0 24rpx;
}

.menu-card {
  background: #ffffff;
  border: 1rpx solid #e2e8f0;
  border-radius: 20rpx;
  margin-bottom: 16rpx;
  overflow: hidden;
  
  .menu-title {
    display: block;
    padding: 20rpx 24rpx 12rpx;
    font-size: 24rpx;
    color: #94a3b8;
    font-weight: 600;
  }
}

.menu-list {
  .menu-item {
    display: flex;
    align-items: center;
    padding: 20rpx 24rpx;
    border-bottom: 1rpx solid #f1f5f9;
    transition: background 0.15s;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background: #f8fafc;
    }
  }
}

.menu-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  
  &.green { background: #ecfdf5; }
  &.blue { background: #f0f9ff; }
  &.amber { background: #fff7ed; }
  &.purple { background: #faf5ff; }
  &.cyan { background: #ecfeff; }
  
  /* 图标 - 纯CSS几何图形 */
  .icon-shop {
    width: 22rpx;
    height: 22rpx;
    background: #f97316;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: -8rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 14rpx solid transparent;
      border-right: 14rpx solid transparent;
      border-bottom: 10rpx solid #f97316;
    }
  }
  
  .icon-product {
    width: 20rpx;
    height: 18rpx;
    background: #a855f7;
    border-radius: 4rpx;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: -8rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 8rpx solid transparent;
      border-right: 8rpx solid transparent;
      border-bottom: 10rpx solid #a855f7;
    }
  }
  
  .icon-chart {
    display: flex;
    align-items: flex-end;
    width: 24rpx;
    height: 20rpx;
    
    &::before, &, &::after {
      content: '';
      width: 6rpx;
      background: #0ea5e9;
      border-radius: 3rpx;
      margin-right: 3rpx;
    }
    &::before { height: 10rpx; }
    & { height: 18rpx; }
    &::after { height: 14rpx; margin-right: 0; }
  }
  
  .icon-lock {
    width: 16rpx;
    height: 20rpx;
    background: #10b981;
    border-radius: 4rpx;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: -6rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 10rpx;
      height: 8rpx;
      border: 3rpx solid #10b981;
      border-bottom: none;
      border-radius: 8rpx 8rpx 0 0;
    }
  }
  
  .icon-info {
    width: 20rpx;
    height: 20rpx;
    border: 3rpx solid #0ea5e9;
    border-radius: 50%;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 4rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 3rpx;
      height: 3rpx;
      background: #0ea5e9;
      border-radius: 50%;
    }
    
    &::after {
      content: '';
      position: absolute;
      top: 10rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 3rpx;
      height: 6rpx;
      background: #0ea5e9;
      border-radius: 2rpx;
    }
  }
}

.menu-content {
  flex: 1;
  
  .menu-name {
    display: block;
    font-size: 30rpx;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 2rpx;
  }
  
  .menu-desc {
    font-size: 24rpx;
    color: #94a3b8;
  }
}

.menu-arrow {
  width: 12rpx;
  height: 12rpx;
  border-top: 3rpx solid #cbd5e1;
  border-right: 3rpx solid #cbd5e1;
  transform: rotate(45deg);
}

/* 退出登录 */
.logout-section {
  padding: 24rpx 24rpx 0;
  
  .logout-btn {
    width: 100%;
    height: 100rpx;
    background: #fef2f2;
    border: 1rpx solid #fecaca;
    border-radius: 16rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    
    &::after {
      border: none;
    }
    
    &:active {
      background: #fee2e2;
      transform: scale(0.98);
    }
  }
}

/* 版本信息 */
.version-info {
  text-align: center;
  padding: 24rpx 0;
  
  text {
    font-size: 24rpx;
    color: #cbd5e1;
  }
}
</style>