guzhi/web1/src/views/user-center/index.vue

<template>
  <div class="user-center-container">
    <!-- 左侧边栏 -->
    <UserSidebar
      :user-phone="userPhone"
      :valuation-count="valuationCount"
      :current-menu="currentMenu"
      :menu-list="menuList"
      @menu-click="handleMenuClick"
    />

    <!-- 右侧内容区 -->
    <div class="content-area">
      <!-- 返回按钮 -->
      <div class="back-button" @click="handleBackToHome">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span>返回首页</span>
      </div>

      <!-- 子路由视图 -->
      <router-view 
        :asset-list="assetList"
        :invoice-list="invoiceList"
        @return-home="handleBackToHome"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, h, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import api from '@/api'
import UserSidebar from './components/UserSidebar.vue'

const router = useRouter() 
const route = useRoute()

// 当前菜单（从路由路径计算）
const currentMenu = computed(() => {
  const path = route.path
  if (path.includes('/history')) return 'history'
  if (path.includes('/transfer')) return 'transfer'
  if (path.includes('/invoice')) return 'invoice'
  return 'history'
})

// 用户信息
const userPhone = ref('')
const valuationCount = ref(0)

// 资产列表
const assetList = ref([])

// 开票列表
const invoiceList = ref([
  { id: 1, name: '某某公司', status: '待审' },
  { id: 2, name: '某某公司', status: '待审' }
])

// 菜单列表
const menuList = ref([
  {
    id: 'history',
    label: '估值记录',
    icon: () => h('svg', {
      width: 20,
      height: 20,
      viewBox: '0 0 24 24',
      fill: 'none',
      xmlns: 'http://www.w3.org/2000/svg'
    }, [
      h('path', {
        d: 'M12 8V12L15 15',
        stroke: 'currentColor',
        'stroke-width': 2,
        'stroke-linecap': 'round'
      }),
      h('circle', {
        cx: 12,
        cy: 12,
        r: 9,
        stroke: 'currentColor',
        'stroke-width': 2
      })
    ])
  },
  {
    id: 'transfer',
    label: '对公转账',
    icon: () => h('svg', {
      width: 20,
      height: 20,
      viewBox: '0 0 24 24',
      fill: 'none',
      xmlns: 'http://www.w3.org/2000/svg'
    }, [
      h('path', {
        d: 'M12 2V6M12 18V22M6 12H2M22 12H18',
        stroke: 'currentColor',
        'stroke-width': 2,
        'stroke-linecap': 'round'
      }),
      h('circle', {
        cx: 12,
        cy: 12,
        r: 4,
        stroke: 'currentColor',
        'stroke-width': 2
      })
    ])
  },
  {
    id: 'invoice',
    label: '开票管理',
    icon: () => h('svg', {
      width: 20,
      height: 20,
      viewBox: '0 0 24 24',
      fill: 'none',
      xmlns: 'http://www.w3.org/2000/svg'
    }, [
      h('rect', {
        x: 3,
        y: 3,
        width: 18,
        height: 18,
        rx: 2,
        stroke: 'currentColor',
        'stroke-width': 2
      }),
      h('path', {
        d: 'M8 12H16M8 16H13',
        stroke: 'currentColor',
        'stroke-width': 2,
        'stroke-linecap': 'round'
      })
    ])
  }
])

// 返回首页
function handleBackToHome() {
  router.push('/home')
}

// 菜单点击
function handleMenuClick(menu) {
  // 使用路由导航
  router.push(`/user-center/${menu.id}`)
}

// 加载数据
async function loadData() {
  try {
    const phone = localStorage.getItem('phone')
    if (phone) {
      userPhone.value = phone
    }

    const res = await api.getHistoryList()
    if (res && res.results) {
      assetList.value = res.results
      valuationCount.value = res.results.length
    }
  } catch (error) {
    console.error('加载数据失败:', error)
  }
}

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

<style scoped>
.user-center-container {
  display: flex;
  min-height: 100vh;
  background: #F5F7FA;
}

/* 右侧内容区 */
.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  position: relative;
}

.back-button {
  position: absolute;
  top: 44px; /* Align with the content card's top padding area */
  left: 44px; /* Align with the content card's left padding area */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  background: transparent;
  z-index: 10;
  box-shadow: none;
}

.back-button:hover {
  color: #A30113;
}

.back-button svg {
  transition: transform 0.3s ease;
}

.back-button:hover svg {
  transform: translateX(-4px);
}

@media (max-width: 768px) {
  .user-center-container {
    flex-direction: column;
  }
}
</style>