yoe-shop-web/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 @click="onPath('/enterprise/purchasePlan')">更多</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>
          <el-empty v-if="noticeList.length === 0" description="暂无采购公告" />
        </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 class="flex-row-center w-[100%] empty-bos" v-if="servicePersons.length === 0">
           <el-empty image-size="100" description="暂无" />
        </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, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { OfficeBuilding, Grid, ArrowRight, Edit, Bell, User, Ticket } from '@element-plus/icons-vue';
import { getEnterpriseInfo } from '@/api/pc/enterprise';
import { getAnnouncementList } from '@/api/pc/system/announcement';
import { getServicePersons } from '@/api/pc/enterprise/servicePerson';
import { ElMessage } from 'element-plus';
import { onPath } from '@/utils/siteConfig';

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: '-',
  customerType: '品牌客户',
  availableAmount: '0.00',
  creditAmount: '0.00',
  temporaryQuota: '0.00',
  creditCode: '-',
  industry: '-',
  scale: '-',
  phone: '-',
  email: '-',
  address: '-'
});

// 加载企业信息
const loadEnterpriseInfo = async () => {
  try {
    const res = await getEnterpriseInfo();
    if (res.code === 200 && res.data) {
      const data = res.data;
      const salesInfo = data.customerSalesInfoVo || {};
      const businessInfo = data.customerBusinessInfoVo || {};

      // 辅助函数：处理空值，空字符串也转为 '-'
      const formatValue = (value: any) => (value && value !== '' ? value : '-');

      companyData.companyName = formatValue(data.customerName || data.businessCustomerName);
      companyData.companyCode = formatValue(data.customerNo);
      companyData.creditCode = formatValue(businessInfo.socialCreditCode);
      companyData.industry = formatValue(data.industryCategory);
      companyData.scale = formatValue(data.enterpriseScale);
      companyData.phone = formatValue(data.landline);
      companyData.email = formatValue(businessInfo.email || data.fax);
      companyData.address = formatValue(data.address);
      companyData.availableAmount = (parseInt(salesInfo.remainingQuota) || 0).toFixed(2); // 剩余额度
      // companyData.deptCredit = data.deptCredit || '0.00';部门额度
      companyData.creditAmount = salesInfo.creditAmount || '0.00';
    }
  } catch (error) {
    console.error('加载企业信息失败:', error);
    ElMessage.error('加载企业信息失败');
  }
};

// 加载公告列表
const noticeList = ref([]);
const loadAnnouncementList = async () => {
  try {
    const res = await getAnnouncementList({ pageNum: 1, pageSize: 4 });
    if (res.code === 200 && res.rows) {
      noticeList.value = res.rows.map((item: any) => ({
        title: item.announcementTitle,
        description: item.announcementContent?.substring(0, 50) || '',
        date: item.createTime ? new Date(item.createTime).toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }) : ''
      }));
    }
  } catch (error) {
    console.error('加载公告失败:', error);
  }
};

onMounted(() => {
  loadEnterpriseInfo();
  // loadAnnouncementList();
  // loadServicePersons();
});

// 加载专属服务人员
const servicePersons = ref([]);
const loadServicePersons = async () => {
  try {
    const res = await getServicePersons();
    if (res.code === 200 && res.data) {
      servicePersons.value = res.data;
    }
  } catch (error) {
    console.error('加载服务人员失败:', error);
  }
};

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');
  else if (tabKey === 'changePerson') router.push('/enterprise/changePerson');
};
</script>

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

.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;
    }
  }

}
  .empty-bos{
    :deep(.el-empty){
      padding: 10px 0 !important;
    }
  }
</style>