petstore-frontend/pages/mine/mine.vue

<template>
  <view class="mine-page">
    <!-- 用户卡片 -->
    <view class="user-card">
      <view class="user-info">
        <view class="user-avatar" :style="avatarStyle">
          <image v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar-img" />
          <text v-else class="avatar-initials">{{ initials }}</text>
        </view>
        <view class="user-detail">
          <text class="user-name">{{ userInfo.name }}</text>
          <text class="user-phone">{{ userInfo.phone }}</text>
          <view class="user-role">
            <view v-if="userInfo.role === 'boss'" class="role-tag boss">🏠 店长</view>
            <view v-else-if="userInfo.role === 'customer'" class="role-tag customer">🌟 客户</view>
            <view v-else class="role-tag staff">👤 员工</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 老板菜单 -->
    <view v-if="userInfo.role === 'boss'" class="menu-section">
      <view class="menu-card">
        <view class="menu-item" @click="goPage('/pages/mine/staff/staff')">
          <text class="menu-icon">👥</text>
          <text class="menu-text">员工管理</text>
          <text class="menu-arrow">›</text>
        </view>
        <view class="menu-divider"></view>
        <view class="menu-item" @click="goPage('/pages/mine/service-type/service-type')">
          <text class="menu-icon">🛁</text>
          <text class="menu-text">服务类型</text>
          <text class="menu-arrow">›</text>
        </view>
        <view class="menu-divider"></view>
        <view class="menu-item" @click="goPage('/pages/mine/store/store')">
          <text class="menu-icon">⚙️</text>
          <text class="menu-text">店铺设置</text>
          <text class="menu-arrow">›</text>
        </view>
      </view>
    </view>

    <!-- C端菜单 -->
    <view v-if="userInfo.role === 'customer'" class="menu-section">
      <view class="menu-card">
        <view class="menu-item" @click="goPage('/pages/mine/my-orders/my-orders')">
          <text class="menu-icon">📅</text>
          <text class="menu-text">我的预约</text>
          <text class="menu-arrow">›</text>
        </view>
      </view>
    </view>

    <!-- B端通用菜单 -->
    <view v-if="userInfo.role !== 'customer'" class="menu-section">
      <view class="menu-card">
        <view class="menu-item" @click="goPage('/pages/mine/my-reports/my-reports')">
          <text class="menu-icon">📋</text>
          <text class="menu-text">我的报告</text>
          <text class="menu-arrow">›</text>
        </view>
        <view class="menu-divider"></view>
        <view class="menu-item" @click="goPage('/pages/mine/my-orders/my-orders')">
          <text class="menu-icon">📦</text>
          <text class="menu-text">我的订单</text>
          <text class="menu-arrow">›</text>
        </view>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="menu-section">
      <view class="menu-card">
        <view class="menu-item logout" @click="logout">
          <text class="menu-text">退出登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'

const userInfo = JSON.parse(uni.getStorageSync('petstore_user') || '{}')

const initials = computed(() => {
  if (!userInfo.name) return '?'
  return userInfo.name.slice(0, 1).toUpperCase()
})

const avatarStyle = computed(() => {
  if (userInfo.avatar) return {}
  const colors = ['#ff7c43', '#07c160', '#8b6914', '#e06040', '#5090d0']
  const idx = (userInfo.name?.charCodeAt(0) || 0) % colors.length
  return { background: colors[idx] }
})

const goPage = (url) => {
  uni.navigateTo({ url })
}

const logout = () => {
  uni.showModal({
    title: '确认退出',
    content: '确定退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        uni.removeStorageSync('petstore_user')
        uni.removeStorageSync('petstore_store')
        uni.reLaunch({ url: '/pages/login/login' })
      }
    }
  })
}
</script>

<style scoped>
.mine-page { padding-bottom: 20px; background: #f5f5f5; min-height: 100vh; }

.user-card {
  background: linear-gradient(135deg, #07c160 0%, #10b76f 100%);
  border-radius: 0 0 24px 24px;
  padding: 32px 20px 48px;
}
.user-info { display: flex; align-items: center; gap: 16px; }
.user-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.3);
}
.avatar-img { width: 100%; height: 100%; object-fit: cover; }
.avatar-initials { color: #fff; font-size: 24px; font-weight: 600; }
.user-detail { display: flex; flex-direction: column; gap: 3px; }
.user-name { font-size: 18px; font-weight: 600; color: #fff; }
.user-phone { font-size: 13px; opacity: 0.8; }
.user-role { margin-top: 4px; }
.role-tag {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}
.role-tag.boss { background: rgba(255,159,0,0.3); color: #fff; }
.role-tag.customer { background: rgba(255,255,255,0.4); color: #fff; }
.role-tag.staff { background: rgba(255,255,255,0.3); color: #fff; }

.menu-section { padding: 16px 16px 0; }
.menu-card { background: #fff; border-radius: 12px; overflow: hidden; }
.menu-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
}
.menu-icon { font-size: 18px; margin-right: 12px; }
.menu-text { flex: 1; font-size: 15px; color: #333; }
.menu-arrow { font-size: 18px; color: #ccc; }
.menu-divider { height: 1px; background: #f0f0f0; margin-left: 46px; }
.menu-item.logout { justify-content: center; }
.menu-item.logout .menu-text { color: #ff4d4f; text-align: center; flex: none; }
</style>