yoe_home_pc/src/views/enterprise/companyInfo/index.vue

<template>
  <div class="company-info-container">
    <!-- 顶部企业头部信息 + Tab导航 -->
    <div class="company-header-card">
      <div class="company-header">
        <div class="header-left">
          <div class="company-logo">
            <el-icon :size="40" color="#e60012"><OfficeBuilding /></el-icon>
          </div>
          <div class="company-basic">
            <div class="company-name">
              <span class="name">{{ companyData.companyName }}</span>
              <el-tag type="danger" size="small">{{ companyData.customerType }}</el-tag>
            </div>
            <div class="company-code">企业编码: {{ companyData.companyCode }}</div>
          </div>
        </div>
        <div class="header-right">
          <div class="amount-item">
            <div class="amount-value">¥{{ companyData.availableAmount }}</div>
            <div class="amount-label">可用额度</div>
          </div>
          <div class="amount-item">
            <div class="amount-value highlight">¥{{ companyData.creditAmount }}</div>
            <div class="amount-label">授信额度</div>
          </div>
        </div>
      </div>
      <div class="tab-nav">
        <div v-for="tab in tabs" :key="tab.key" :class="['tab-item', { active: activeTab === tab.key }]"
          @click="handleTabClick(tab.key)">
          <el-icon><Grid /></el-icon>
          <span>{{ tab.label }}</span>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左侧：企业信息 -->
      <div class="info-card">
        <div class="card-header">
          <span class="title"><i class="title-bar"></i>企业信息</span>
          <el-button type="primary" link @click="handleUpdateInfo">
            <el-icon><Edit /></el-icon>更新企业信息
          </el-button>
        </div>
        <div class="info-table">
          <div class="info-row">
            <div class="info-label">企业名称</div>
            <div class="info-value">{{ companyData.companyName }}</div>
          </div>
          <div class="info-row">
            <div class="info-label">统一社会信用代码</div>
            <div class="info-value">{{ companyData.creditCode }}</div>
          </div>
          <div class="info-row">
            <div class="info-label">所属行业</div>
            <div class="info-value">{{ companyData.industry || '-' }}</div>
          </div>
          <div class="info-row">
            <div class="info-label">企业规模</div>
            <div class="info-value">{{ companyData.scale }}</div>
          </div>
          <div class="info-row">
            <div class="info-label">办公电话</div>
            <div class="info-value">{{ companyData.phone }}</div>
          </div>
          <div class="info-row">
            <div class="info-label">企业邮箱</div>
            <div class="info-value">{{ companyData.email }}</div>
          </div>
          <div class="info-row">
            <div class="info-label">企业地址</div>
            <div class="info-value">{{ companyData.address }}</div>
          </div>
        </div>
      </div>

      <!-- 右侧：专属平台采购公告 -->
      <div class="notice-card">
        <div class="card-header">
          <span class="title"><i class="title-bar"></i>专属平台采购公告</span>
          <el-button type="primary" link>更多</el-button>
        </div>
        <div class="notice-list">
          <div v-for="(item, index) in noticeList" :key="index" class="notice-item">
            <el-icon color="#e60012"><Bell /></el-icon>
            <div class="notice-content">
              <div class="notice-title">{{ item.title }}</div>
              <div class="notice-desc">{{ item.description }}</div>
            </div>
            <div class="notice-date">{{ item.date }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 专属服务人员 -->
    <div class="service-section">
      <div class="section-title"><i class="title-bar"></i>专属服务人员</div>
      <div class="service-list">
        <div v-for="(person, index) in servicePersons" :key="index" class="service-card">
          <el-avatar :size="50" :src="person.avatar">
            <el-icon :size="30"><User /></el-icon>
          </el-avatar>
          <div class="person-info">
            <div class="person-name">
              {{ person.name }}
              <el-tag :type="person.type === '专属采购顾问' ? 'danger' : 'primary'" size="small">{{ person.type }}</el-tag>
            </div>
            <div class="person-contact">{{ person.department }}  {{ person.phone }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 企业特权 -->
    <div class="privilege-section">
      <div class="section-title"><i class="title-bar"></i>企业特权</div>
      <div class="privilege-grid">
        <div v-for="(item, index) in privileges" :key="index" class="privilege-card">
          <el-icon :size="24" color="#e60012"><Ticket /></el-icon>
          <div class="privilege-name">{{ item.name }}</div>
          <div class="privilege-desc">{{ item.description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { OfficeBuilding, Grid, ArrowRight, Edit, Bell, User, Ticket } from '@element-plus/icons-vue'

const router = useRouter()
const activeTab = ref('companyInfo')

const tabs = [
  { key: 'companyInfo', label: '企业信息' },
  { key: 'purchaseHabit', label: '采购习惯' },
  { key: 'security', label: '安全设置' },
  { key: 'invoice', label: '开票信息' },
  { key: 'creditApply', label: '额度申请' },
  { key: 'changePerson', label: '更换负责人' }
]

const companyData = reactive({
  companyName: '中国南方电网有限责任公司',
  companyCode: '123456789',
  customerType: '品牌客户',
  availableAmount: '0.00',
  creditAmount: '29000.88',
  creditCode: '内容内容',
  industry: '-',
  scale: '5000人以上',
  phone: '020-22222222',
  email: '2222222@163.com',
  address: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
})

const noticeList = ref([
  { title: '主标题主标题', description: '副标题副标题副标题副标题副标题副标题副标题', date: '08.27' },
  { title: '主标题主标题主标题主标题', description: '副标题副标题副标题副标题副标题副标题', date: '08.27' },
  { title: '主标题主标题主标题主标题主标题主标...', description: '副标题副标题副标题', date: '08.27' },
  { title: '主标题主标题主标题主标题主标题主标题', description: '副标题副标题副标题副标题副标题', date: '08.27' }
])

const servicePersons = ref([
  { name: '刘洋', type: '专属采购顾问', department: '品牌中心', phone: '15783782783', avatar: '' },
  { name: '刘洋', type: '客服人员', department: '027-5233893', phone: '15783782783', avatar: '' }
])

const privileges = ref([
  { name: '满免运费', description: '会员购买商品订单总金额达到标准后可免运费。' },
  { name: '协议供货', description: '会员购买商品订单总金额达到标准后可免运费。' },
  { name: '账期采购', description: '会员购买商品订单总金额达到标准后可免运费。' },
  { name: '专属方案', description: '会员购买商品订单总金额达到标准后可免运费。' },
  { name: '专属采购顾问', description: '会员购买商品订单总金额达到标准后可免运费。' },
  { name: '维保服务', description: '会员购买商品订单总金额达到标准后可免运费。' },
  { name: '专属库存', description: '会员购买商品订单总金额达到标准后可免运费。' }
])

const handleUpdateInfo = () => { router.push('/enterprise/companyInfo/edit') }
const handleTabClick = (tabKey: string) => {
  activeTab.value = tabKey
  if (tabKey === 'security') router.push('/enterprise/securitySetting')
  else if (tabKey === 'purchaseHabit') router.push('/enterprise/purchaseHabit')
  else if (tabKey === 'invoice') router.push('/enterprise/invoiceManage')
  else if (tabKey === 'creditApply') router.push('/cost/quotaControl/apply')
}
</script>

<style scoped lang="scss">
.company-info-container {
  padding: 0;
  background: #f5f5f5;
  min-height: 100%;
}

.company-header-card {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 16px;
}

.company-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;

  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;

    .company-logo {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: #fff5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .company-basic {
      .company-name {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
        .name {
          font-size: 20px;
          font-weight: bold;
          color: #333;
        }
      }
      .company-code {
        color: #999;
        font-size: 14px;
      }
    }
  }

  .header-right {
    display: flex;
    gap: 60px;

    .amount-item {
      text-align: center;
      .amount-value {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        &.highlight {
          color: #e60012;
        }
      }
      .amount-label {
        font-size: 13px;
        color: #999;
        margin-top: 6px;
      }
    }
  }
}

.tab-nav {
  display: flex;
  padding: 0 24px 16px;
  gap: 8px;
  flex-wrap: wrap;

  .tab-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    cursor: pointer;
    color: #666;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;

    &:hover, &.active {
      color: #e60012;
    }
    &.active {
      border-bottom-color: #e60012;
    }
  }
}

.main-content {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.info-card {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  min-width: 0;
}

.notice-card {
  width: 380px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .title {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.title-bar {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #e60012;
  border-radius: 2px;
}

.info-table {
  .info-row {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    padding: 14px 0;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      width: 140px;
      color: #999;
      flex-shrink: 0;
      font-size: 14px;
    }
    .info-value {
      flex: 1;
      color: #333;
      font-size: 14px;
      word-break: break-all;
    }
  }
}

.notice-list {
  .notice-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .notice-content {
      flex: 1;
      min-width: 0;
      .notice-title {
        font-size: 14px;
        color: #333;
        margin-bottom: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .notice-desc {
        font-size: 12px;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .notice-date {
      color: #999;
      font-size: 12px;
      flex-shrink: 0;
    }
  }
}

.service-section, .privilege-section {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;

  .section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.service-list {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;

  .service-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
    border-radius: 8px;
    min-width: 300px;

    .person-info {
      .person-name {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 8px;
      }
      .person-contact {
        font-size: 13px;
        color: #666;
      }
    }
  }
}

.privilege-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;

  .privilege-card {
    padding: 20px;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
    border-radius: 8px;

    .privilege-name {
      font-size: 15px;
      font-weight: 500;
      margin: 12px 0 10px;
    }
    .privilege-desc {
      font-size: 13px;
      color: #999;
      line-height: 1.6;
    }
  }
}
</style>