企业详情页优化: 企业名旁标签 + 进入店铺按钮 #5

Merged
direv merged 1 commits from develop into main 2026-08-08 11:49:32 +08:00
Showing only changes of commit 2b329397bc - Show all commits

View File

@ -10,6 +10,7 @@
*/
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Shop } from '@element-plus/icons-vue'
import { httpGet } from '@/utils/request'
import PageHeader from '@/components/PageHeader/PageHeader.vue'
@ -86,6 +87,12 @@ async function load() {
} catch { performanceList.value = [] }
}
function goStore() {
const eid = detail.value.enterpriseId || detail.value.id
if (!eid) return
window.open(`/v2/shop/${eid}`, '_blank')
}
onMounted(load)
</script>
@ -104,6 +111,7 @@ onMounted(load)
<div class="header-main">
<div class="header-title-row">
<h2 class="ent-name">{{ detail.enterpriseName || '--' }}</h2>
<span v-for="(t, i) in tags" :key="i" class="name-tag">{{ t }}</span>
<el-tag v-if="STATUS_MAP[detail.status]" :type="STATUS_MAP[detail.status].type" effect="light" round>{{ STATUS_MAP[detail.status].label }}</el-tag>
<el-tag v-if="detail.enabled === 1" type="info" effect="plain" round>已禁用</el-tag>
</div>
@ -112,10 +120,8 @@ onMounted(load)
<span v-if="registerYear !== '--'" class="meta-item">{{ registerYear }} 成立</span>
<span v-if="detail.creditCode" class="meta-item">信用代码 {{ detail.creditCode }}</span>
</div>
<div v-if="tags.length" class="header-tags">
<span v-for="(t, i) in tags" :key="i" class="tag-chip">{{ t }}</span>
</div>
</div>
<div class="header-right">
<div class="header-stats">
<div class="stat-cell">
<div class="stat-value">{{ LEVEL_MAP[detail.supplierLevel as number] || '--' }}</div>
@ -130,6 +136,10 @@ onMounted(load)
<div class="stat-label">企业评级</div>
</div>
</div>
<el-button type="primary" class="store-btn" @click="goStore" :disabled="!detail.enterpriseId && !detail.id">
<el-icon style="margin-right:6px"><Shop /></el-icon>进入店铺
</el-button>
</div>
</div>
<!-- ===== Tab 导航 ===== -->
@ -290,19 +300,20 @@ onMounted(load)
.logo-img { width: 100%; height: 100%; }
.logo-fallback { color: #fff; font-size: 32px; font-weight: 700; }
.header-main { flex: 1; min-width: 0; }
.header-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.header-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ent-name { font-size: 22px; font-weight: 700; margin: 0; color: var(--ink); }
.name-tag {
background: var(--primary-soft, #e0ecff); color: var(--primary);
font-size: 12px; padding: 2px 12px; border-radius: 20px; white-space: nowrap;
}
.header-meta { display: flex; gap: 20px; flex-wrap: wrap; color: var(--ink-2); font-size: 13px; margin-bottom: 10px; }
.meta-item::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); margin-right: 6px; vertical-align: middle; }
.header-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag-chip {
background: var(--primary-soft, #e0ecff); color: var(--primary);
font-size: 12px; padding: 2px 12px; border-radius: 20px;
}
.header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.header-stats { display: flex; gap: 32px; }
.stat-cell { text-align: center; }
.stat-value { font-size: 20px; font-weight: 700; color: var(--ink); }
.stat-label { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.store-btn { font-weight: 600; }
/* ===== Tabs ===== */
.tab-nav {