timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix customer rank style

Browse Source
This commit is contained in:
Timi
2026-08-04 00:34:38 +08:00
parent f19cbc085d
commit 3b6b39a427
1 changed files with 143 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/management/CustomerDataCharts.vue
+143 -179
View File
@@ -1,45 +1,53 @@
<template> <template>
<div v-can="gaoPermissionCodes.stat.read" class="customer-data-charts-page"> <div v-can="gaoPermissionCodes.stat.read" class="customer-data-charts-page">
<div class="selector"> <div class="header">
<div class="header"> <div class="selector bg-white" :class="{ 'selected' : selectedCustomer }">
<t-button class="list-select" block theme="primary" variant="outline" @click="selectorVisible = true"> <div class="line buttons">
<template #icon> <t-button
<t-icon name="user-search" /> v-if="selectedCustomer"
</template> theme="primary"
<span v-text="selectedCustomer ? selectedCustomer.name : '选择客户'" /> @click="clearCustomerSelection"
</t-button> >排行</t-button>
<t-button class="scan-select" theme="primary" @click="toggleScanner"> <t-button class="customer" block theme="primary" variant="outline" @click="selectorVisible = true">
<template #icon> <template #icon>
<t-icon name="scan" /> <t-icon name="user-search" />
</template> </template>
</t-button> <span v-text="selectedCustomer ? selectedCustomer.name : '选择客户'" />
</div> </t-button>
<div v-if="scannerVisible" class="scanner-wrapper"> <t-button theme="primary" @click="toggleScanner">
<code-scanner <template #icon>
visible <t-icon name="scan" />
:status-text="scanStatus" </template>
active-text="正在识别客户编码，请将二维码移入取景框" <span>扫码</span>
@decode="handleDecodedText" </t-button>
@status-change="handleScanStatusChange" </div>
/> <div v-if="scannerVisible" class="line scanner-wrapper">
</div> <code-scanner
<div v-if="!selectedCustomer" class="filter-line"> visible
<t-dropdown-menu class="filter-menu"> :status-text="scanStatus"
<t-dropdown-item active-text="正在识别客户编码，请将二维码移入取景框"
v-model="rankDateFilterType" @decode="handleDecodedText"
:label="rankDateFilterLabel" @status-change="handleScanStatusChange"
:options="rankDateOptions"
@change="selectRankDateFilter"
/> />
<t-dropdown-item </div>
v-model="rankRegistrationEventIdList" <div v-if="!selectedCustomer" class="line filter">
:label="rankRegistrationEventFilterLabel" <t-dropdown-menu class="menu">
:options="rankRegistrationEventOptions" <t-dropdown-item
options-columns="2" v-model="rankDateFilterType"
multiple :label="rankDateFilterLabel"
@change="reloadCustomerRegistrationRank" :options="rankDateOptions"
/> @change="selectRankDateFilter"
</t-dropdown-menu> />
<t-dropdown-item
v-model="rankRegistrationEventIdList"
:label="rankRegistrationEventFilterLabel"
:options="rankRegistrationEventOptions"
options-columns="2"
multiple
@change="reloadCustomerRegistrationRank"
/>
</t-dropdown-menu>
</div>
</div> </div>
</div> </div>
<section v-if="selectedCustomer" class="summary"> <section v-if="selectedCustomer" class="summary">
@@ -66,7 +74,7 @@
<h2 v-text="item.title" /> <h2 v-text="item.title" />
<div :ref="element => setChartRef(item.id, element)" class="chart" /> <div :ref="element => setChartRef(item.id, element)" class="chart" />
</section> </section>
<div v-if="!selectedCustomer" v-text="rankSummaryText"></div> <div v-if="!selectedCustomer" class="rank-summary" v-text="rankSummaryText"></div>
<t-cell-group <t-cell-group
v-if="!selectedCustomer && customerRegistrationRankList.length" v-if="!selectedCustomer && customerRegistrationRankList.length"
class="rank-list" class="rank-list"
@@ -75,30 +83,34 @@
<t-cell <t-cell
v-for="item in customerRegistrationRankList" v-for="item in customerRegistrationRankList"
:key="item.customerId" :key="item.customerId"
class="rank-item" class="item"
:title="item.customerName || '未知客户'"
arrow arrow
hover hover
@click="selectRankCustomer(item.customerId || '')" @click="selectRankCustomer(item.customerId || '')"
> >
<template #leftIcon> <template #leftIcon>
<span class="rank-left"> <span class="left">
<span class="rank-no" v-text="item.rank" />
<t-image <t-image
v-if="getRankCustomerPhotoURL(item)" v-if="getRankCustomerPhotoURL(item)"
:src="getRankCustomerPhotoURL(item)" :src="getRankCustomerPhotoURL(item)"
:alt="item.customerName || '客户头像'" :alt="item.customerName || '客户头像'"
fit="cover" fit="cover"
class="rank-photo" class="photo"
/> />
<span v-else class="rank-photo fallback" v-text="getRankCustomerInitial(item)" /> <span v-else class="photo fallback" v-text="getRankCustomerInitial(item)" />
</span> </span>
</template> </template>
<template #title>
<t-tag theme="primary" v-text="`No.${item.rank}`" />
<span class="word-space" v-text="item.customerName || '未知客户'" />
</template>
<template #description> <template #description>
<div v-text="getRankCustomerMeta(item)"></div> <div>
<div class="rank-stat"> <span v-text="`累计登记 ${item.totalRegistrationCount || 0} 次，`" />
<strong v-text="`${item.totalRegistrationDays || 0} 天`" /> <span v-text="`累计登记 ${item.totalRegistrationDays || 0} 天`" />
<small v-text="`${item.recentContinuousRegistrationDays || 0} 天连续`" /> </div>
<div>
<span v-text="`最近 ${item.recentContinuousRegistrationDays || 0} 天连续登记`" />
</div> </div>
</template> </template>
</t-cell> </t-cell>
@@ -179,6 +191,7 @@ use([
]); ]);
const settingStore = useSettingStore(); const settingStore = useSettingStore();
const router = useRouter();
const route = useRoute(); const route = useRoute();
const chartRefs = new Map<string, HTMLElement>(); const chartRefs = new Map<string, HTMLElement>();
const chartInstances = new Map<string, ECharts>(); const chartInstances = new Map<string, ECharts>();
@@ -423,6 +436,17 @@ async function handleCustomerSelected(id: string): Promise<void> {
await loadCustomerById(id); await loadCustomerById(id);
} }
async function clearCustomerSelection(): Promise<void> {
selectedCustomer.value = undefined;
selectedCustomerId.value = "";
customerCode.value = "";
monthRecords.value = [];
if (route.name !== "CustomerDataCharts" || Object.keys(route.query).length) {
await router.replace({name: "CustomerDataCharts"});
}
}
async function selectRankCustomer(id: string): Promise<void> { async function selectRankCustomer(id: string): Promise<void> {
await loadCustomerById(id); await loadCustomerById(id);
} }
@@ -536,13 +560,6 @@ function getRecordRegistrationEventName(record?: RegistrationEventRecord): strin
return record.registrationEvent?.name || (record.registrationEventId ? registrationEventNameMap.value.get(record.registrationEventId) : "") || "未知事件"; return record.registrationEvent?.name || (record.registrationEventId ? registrationEventNameMap.value.get(record.registrationEventId) : "") || "未知事件";
} }
function getRankCustomerMeta(item: CustomerRegistrationRankView): string {
const codeText = item.customerCode ? `编码 ${item.customerCode}` : "暂无编码";
const countText = `${item.totalRegistrationCount || 0} 次登记`;
const latestText = item.latestRegisteredAt ? `最近 ${formatDateTime(item.latestRegisteredAt)}` : "暂无最近登记";
return `${codeText}｜${countText}｜${latestText}`;
}
function getRankCustomerPhotoURL(item: CustomerRegistrationRankView): string { function getRankCustomerPhotoURL(item: CustomerRegistrationRankView): string {
if (!item.customerPhotoAttachmentId) { if (!item.customerPhotoAttachmentId) {
return ""; return "";
@@ -761,52 +778,69 @@ function formatDateTime(value: number): string {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.selector { .header {
gap: .75rem;
top: var(--app-nav-height); top: var(--app-nav-height);
z-index: 10; z-index: 10;
padding: 1rem 1rem .875rem 1rem; padding: 1rem 1rem .875rem 1rem;
display: flex;
position: sticky; position: sticky;
box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1);
background: #f5f5f8; background: #F5F5F8;
flex-direction: column;
.header { .selector {
gap: .75rem; border: 1px solid rgba(148, 163, 184, .18);
display: flex; display: flex;
overflow: hidden;
border-radius: .35rem .35rem 1rem 1rem;
flex-direction: column;
.list-select { &.selected {
flex: 1; border: 1px solid transparent;
min-width: 0; background: transparent;
border-radius: 0;
} }
.scan-select { .line {
flex: 0 0 3rem; gap: .75rem;
width: 3rem; display: flex;
}
}
.filter-line { &.buttons {
.filter-menu { z-index: 1;
width: 100%;
overflow: hidden;
background: #fff;
border: 1px solid rgba(148, 163, 184, .18);
border-radius: .625rem;
&:after { .customer {
display: none; flex: 1;
min-width: 0;
}
} }
:deep(.t-dropdown-menu__item) { &.scanner-wrapper {
min-width: 0; margin: 1rem .5rem;
} }
:deep(.t-dropdown-menu__title) { &.filter {
overflow: hidden;
white-space: nowrap; .menu {
text-overflow: ellipsis; --td-spacer-1: 6px;
width: 100%;
overflow: hidden;
margin-top: -1rem;
padding-top: .8rem;
background: #fff;
&:after {
display: none;
}
:deep(.t-dropdown-menu__item) {
min-width: 0;
}
:deep(.t-dropdown-menu__title) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
} }
} }
} }
@@ -861,41 +895,14 @@ function formatDateTime(value: number): string {
margin: 0 1rem; margin: 0 1rem;
} }
.rank-section { .rank-summary {
gap: .75rem; text-align: center;
margin: 0 1rem; }
display: flex;
padding: 1rem;
background: rgba(255, 255, 255, .92);
box-shadow: var(--td-shadow-1);
border-radius: .75rem;
flex-direction: column;
.rank-header { .rank-list {
gap: .75rem; margin: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
h2 { .item {
margin: 0;
color: #0f172a;
font-size: 1rem;
font-weight: 700;
}
p {
margin: .25rem 0 0 0;
color: #52607a;
font-size: .75rem;
}
}
.rank-list {
margin: 0;
}
.rank-item {
:deep(.t-cell__title) { :deep(.t-cell__title) {
flex: 1 1 0; flex: 1 1 0;
min-width: 0; min-width: 0;
@@ -908,69 +915,26 @@ function formatDateTime(value: number): string {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
:deep(.t-cell__right) { .left {
min-width: 4rem; gap: .5rem;
}
}
.rank-left {
gap: .5rem;
display: flex;
align-items: center;
}
.rank-no {
width: 2rem;
color: #2563eb;
height: 2rem;
display: flex;
background: #dbeafe;
font-size: .875rem;
align-items: center;
font-weight: 700;
border-radius: 999px;
justify-content: center;
}
.rank-photo {
width: 2.75rem;
height: 2.75rem;
border-radius: .5rem;
&.fallback {
color: #2563eb;
display: flex; display: flex;
font-size: 1rem;
background: #dbeafe;
align-items: center; align-items: center;
font-weight: 700;
justify-content: center;
}
}
.rank-stat { .photo {
min-width: 0; width: 4.3rem;
display: flex; height: 4.3rem;
text-align: right; border-radius: .5rem;
flex-direction: column;
strong, &.fallback {
small { color: #2563eb;
overflow: hidden; display: flex;
white-space: nowrap; font-size: 1rem;
text-overflow: ellipsis; background: #dbeafe;
} align-items: center;
font-weight: 700;
strong { justify-content: center;
color: #0f172a; }
font-size: .9375rem; }
font-weight: 700;
}
small {
margin-top: .25rem;
color: #52607a;
font-size: .75rem;
} }
} }
} }