shop-toy/src/pagesMerchant/me/index.vue

<script lang="ts" setup>
import { useUserStore, CLIENT_TYPE_CONFIG, ClientType } from '@/store/user'
import { useMerchantStore } from '@/store/merchant'
import { tabbarStore } from '@/tabbar/store'

definePage({
  style: {
    navigationBarTitleText: '商家中心',
  },
})

const userStore = useUserStore()
const merchantStore = useMerchantStore()
const config = CLIENT_TYPE_CONFIG[ClientType.MERCHANT]

// 菜单列表
const menuList = [
  { icon: 'i-carbon-store', label: '店铺设置', path: '/pagesMerchant/me/shop' },
  { icon: 'i-carbon-locked', label: '账号安全', path: '/pagesMerchant/me/account' },
  { icon: 'i-carbon-notification', label: '消息中心', count: 3 },
  { icon: 'i-carbon-help', label: '帮助中心' },
  { icon: 'i-carbon-information', label: '关于我们' },
]

// 加载数据
async function loadData() {
  await merchantStore.fetchStats()
  await merchantStore.fetchShopInfo()
}

// 菜单跳转
function handleMenu(item: any) {
  if (item.path) {
    uni.navigateTo({ url: item.path })
  }
}

// 退出登录
function handleLogout() {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        userStore.logout()
        tabbarStore.setTabbarByClientType('user')
        uni.reLaunch({ url: '/pages/login/index' })
      }
    },
  })
}

onMounted(() => {
  loadData()
})
</script>

<template>
  <view class="me-page">
    <!-- 用户信息卡片 -->
    <view class="user-card" :style="{ background: config.color }">
      <view class="user-info">
        <view class="avatar">
          <image :src="userStore.userInfo?.avatar || '/static/images/avatar.jpg'" mode="aspectFill" />
        </view>
        <view class="info">
          <text class="nickname">{{ merchantStore.shopInfo?.name || userStore.userInfo?.nickname || '商家用户' }}</text>
          <view class="tags">
            <text class="tag">{{ config.label }}</text>
            <text class="tag" v-if="merchantStore.shopInfo">已认证</text>
          </view>
        </view>
      </view>
      
      <!-- 数据统计 -->
      <view class="stats" v-if="merchantStore.stats">
        <view class="stat-item">
          <text class="value">{{ merchantStore.stats.todayOrders }}</text>
          <text class="label">今日订单</text>
        </view>
        <view class="stat-item">
          <text class="value">{{ merchantStore.stats.totalGoods }}</text>
          <text class="label">商品数量</text>
        </view>
        <view class="stat-item">
          <text class="value">¥{{ (merchantStore.stats.todaySales / 100).toFixed(0) }}</text>
          <text class="label">今日销售</text>
        </view>
      </view>
    </view>
    
    <!-- 菜单列表 -->
    <view class="menu-list">
      <view 
        v-for="item in menuList" 
        :key="item.label" 
        class="menu-item"
        @click="handleMenu(item)"
      >
        <view class="menu-left">
          <text :class="item.icon" class="menu-icon"></text>
          <text class="menu-label">{{ item.label }}</text>
        </view>
        <view class="menu-right">
          <view v-if="item.count" class="badge">{{ item.count }}</view>
          <text class="i-carbon-chevron-right"></text>
        </view>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout-btn" @click="handleLogout">退出登录</view>
  </view>
</template>

<style lang="scss" scoped>
.me-page {
  min-height: 100vh;
  background: #f5f5f5;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

.user-card {
  padding: 40rpx 30rpx 30rpx;
  
  .user-info {
    display: flex;
    align-items: center;
    gap: 24rpx;
    margin-bottom: 30rpx;
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      overflow: hidden;
      border: 4rpx solid rgba(255, 255, 255, 0.5);
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .info {
      flex: 1;
      
      .nickname {
        font-size: 36rpx;
        font-weight: 600;
        color: #fff;
        display: block;
        margin-bottom: 12rpx;
      }
      
      .tags {
        display: flex;
        gap: 12rpx;
        
        .tag {
          font-size: 22rpx;
          color: rgba(255, 255, 255, 0.9);
          background: rgba(255, 255, 255, 0.2);
          padding: 4rpx 16rpx;
          border-radius: 20rpx;
        }
      }
    }
  }
  
  .stats {
    display: flex;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16rpx;
    padding: 24rpx 0;
    
    .stat-item {
      text-align: center;
      color: #fff;
      
      .value {
        font-size: 36rpx;
        font-weight: 700;
        display: block;
        margin-bottom: 4rpx;
      }
      
      .label {
        font-size: 22rpx;
        opacity: 0.8;
      }
    }
  }
}

.menu-list {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  
  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 24rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .menu-left {
      display: flex;
      align-items: center;
      gap: 20rpx;
      
      .menu-icon {
        font-size: 40rpx;
        color: #ff8f0d;
      }
      
      .menu-label {
        font-size: 28rpx;
        color: #333;
      }
    }
    
    .menu-right {
      display: flex;
      align-items: center;
      gap: 12rpx;
      
      .badge {
        min-width: 36rpx;
        height: 36rpx;
        background: #fa4350;
        border-radius: 18rpx;
        padding: 0 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22rpx;
        color: #fff;
      }
      
      text {
        font-size: 28rpx;
        color: #ccc;
      }
    }
  }
}

.logout-btn {
  margin: 40rpx 20rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  text-align: center;
  font-size: 28rpx;
  color: #fa4350;
}
</style>