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

update customer style

Browse Source
This commit is contained in:
Timi
2026-08-11 22:45:41 +08:00
parent 9f60a36c6c
commit 200cc5fd3f
2 changed files with 158 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/customer/CustomerDetail.vue
+143 -136
View File
@@ -17,21 +17,29 @@
<span v-else v-text="birthdateText" /> <span v-else v-text="birthdateText" />
</t-cell> </t-cell>
<t-cell title="年龄" :note="ageText" /> <t-cell title="年龄" :note="ageText" />
<t-cell title="住址" :note="customer.address || '无'" /> <t-cell title="住址" :note="Text.display(customer.address)" />
<t-cell title="病症" :note="customer.disease || '无'" /> <t-cell title="病症" :note="Text.display(customer.disease)" />
<t-cell title="备注" :note="customer.remark || '无'" /> <t-cell title="备注" :note="Text.display(customer.remark)" />
<t-cell title="录入用户" :note="creatorName" /> <t-cell title="录入用户" :note="Text.display(customer.creatorUser?.nick || customer.creatorUser?.name)" />
<t-cell title="录入时间" :note="createdAtText" /> <t-cell title="录入时间" :note="Time.toPassedDateTime(customer.createdAt)" />
</t-cell-group> </t-cell-group>
<t-cell-group v-if="customer && canReadStat" theme="card"> <t-cell-group v-if="customer" theme="card">
<t-cell title="客户数据图表" arrow @click="toCustomerDataCharts"> <t-cell v-if="canReadStat" title="客户数据图表" arrow @click="toCustomerDataCharts">
<template #leftIcon> <template #left-icon>
<t-icon name="chart" size="1.5rem" /> <t-icon name="chart" />
</template>
</t-cell>
<t-cell
v-if="canReadPointAccount"
title="积分余额"
:note="pointBalanceText"
arrow
@click="toPointAccount"
>
<template #left-icon>
<t-icon name="money" />
</template> </template>
</t-cell> </t-cell>
</t-cell-group>
<t-cell-group v-if="customer && canReadPointAccount" title="积分" class="point-account" theme="card">
<t-cell title="当前积分余额" :note="pointBalanceText" arrow hover @click="toPointAccount" />
</t-cell-group> </t-cell-group>
<t-cell-group theme="card"> <t-cell-group theme="card">
<div class="conditioning-part bg-white"> <div class="conditioning-part bg-white">
@@ -148,7 +156,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { DialogPlugin, Toast } from "tdesign-mobile-vue"; import { DialogPlugin, Toast } from "tdesign-mobile-vue";
import { Time, useUserStore } from "timi-web"; import { Text, Time, useUserStore } from "timi-web";
import CustomerAPI from "@/api/CustomerAPI"; import CustomerAPI from "@/api/CustomerAPI";
import PointAPI from "@/api/PointAPI"; import PointAPI from "@/api/PointAPI";
import BodyAreaSelector from "@/components/BodyAreaSelector.vue"; import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
@@ -171,31 +179,19 @@ const router = useRouter();
const settingStore = useSettingStore(); const settingStore = useSettingStore();
const userStore = useUserStore(); const userStore = useUserStore();
const customer = ref<Customer>();
const pointAccount = ref<PointAccount>();
const invitees = ref<Customer[]>([]);
const selectedInviteeId = ref("");
const selectorVisible = ref(false);
const scanPopupVisible = ref(false);
const pendingInvitee = ref<Customer>();
const scanStatus = ref("点击扫码开始识别。");
const isRemoving = ref(false); const isRemoving = ref(false);
const showSolarBirthdate = ref(false);
let latestDecodedText = "";
const inviter = computed(() => customer.value?.introducerCustomer);
const canReadStat = computed(() => userStore.hasPermissions(permissionCodes.stat.read)); const canReadStat = computed(() => userStore.hasPermissions(permissionCodes.stat.read));
const canReadPointAccount = computed(() => userStore.hasPermissions(permissionCodes.point.accountRead)); const canReadPointAccount = computed(() => userStore.hasPermissions(permissionCodes.point.accountRead));
const pointBalanceText = computed(() => pointAccount.value ? `${(pointAccount.value.balance ?? 0).toLocaleString("zh-CN")} 分` : "尚未产生积分流水");
const creatorName = computed(() => { // ---------- 资料 ----------
const creatorUser = customer.value?.creatorUser;
return creatorUser?.nick || creatorUser?.name || customer.value?.creatorUserId || "无"; const customer = ref<Customer>();
}); const showSolarBirthdate = ref(false);
const createdAtText = computed(() => customer.value?.createdAt ? Time.toPassedDateTime(customer.value.createdAt) : "无");
const isLunarBirthdate = computed(() => customer.value?.birthdateCalendar === "LUNAR" && !!customer.value?.birthdate); const isLunarBirthdate = computed(() => customer.value?.birthdateCalendar === "LUNAR" && !!customer.value?.birthdate);
const solarBirthdateText = computed(() => formatSolarBirthdate(customer.value)); const solarBirthdateText = computed(() => formatSolarBirthdate(customer.value));
const birthdateText = computed(() => showSolarBirthdate.value && isLunarBirthdate.value ? solarBirthdateText.value : formatBirthdate(customer.value)); const birthdateText = computed(() => showSolarBirthdate.value && isLunarBirthdate.value ? solarBirthdateText.value : formatBirthdate(customer.value));
const ageText = computed(() => customer.value?.age === undefined || customer.value?.age === null ? "无" : `${customer.value.age} 岁`); const ageText = computed(() => customer.value?.age === undefined || customer.value?.age === null ? "" : `${customer.value.age} 岁`);
const selectedAreas = computed<BodyAreaValue>({ const selectedAreas = computed<BodyAreaValue>({
get() { get() {
return normalizeBodyAreaValue(customer.value?.conditioningPart); return normalizeBodyAreaValue(customer.value?.conditioningPart);
@@ -205,6 +201,27 @@ const selectedAreas = computed<BodyAreaValue>({
} }
}); });
function formatBirthdate(value?: Customer): string {
if (!value?.birthdate) {
return "";
}
if (value.birthdateCalendar !== "LUNAR") {
return `公历 ${value.birthdate}`;
}
const lunarDate = LunarCalendar.solarToLunar(value.birthdate);
return lunarDate ? LunarCalendar.formatLunarDate(lunarDate) : "农历日期";
}
function formatSolarBirthdate(value?: Customer): string {
return value?.birthdate ? `公历 ${value.birthdate}` : "无";
}
function toggleBirthdateText(): void {
if (isLunarBirthdate.value) {
showSolarBirthdate.value = !showSolarBirthdate.value;
}
}
async function loadCustomer(): Promise<void> { async function loadCustomer(): Promise<void> {
const id = String(route.params.id || ""); const id = String(route.params.id || "");
if (!id) { if (!id) {
@@ -227,15 +244,56 @@ async function loadCustomer(): Promise<void> {
} }
} }
async function loadPointAccount(): Promise<void> { // ---------- 邀请来源和邀请列表 ----------
pointAccount.value = undefined; let latestDecodedText = "";
if (!customer.value?.id || !canReadPointAccount.value) { const invitees = ref<Customer[]>([]);
const selectedInviteeId = ref("");
const selectorVisible = ref(false);
const scanPopupVisible = ref(false);
const pendingInvitee = ref<Customer>();
const scanStatus = ref("点击扫码开始识别");
const inviter = computed(() => customer.value?.introducerCustomer);
function openScanPopup(): void {
pendingInvitee.value = undefined;
latestDecodedText = "";
scanStatus.value = "正在启动扫码预览";
scanPopupVisible.value = true;
}
function closeScanPopup(): void {
scanPopupVisible.value = false;
}
async function handleDecodedText(rawText: string): Promise<void> {
const normalizedText = rawText.trim();
if (!normalizedText || normalizedText === latestDecodedText) {
return; return;
} }
try {
pointAccount.value = await PointAPI.accountDetail(customer.value.id, customer.value.storeId); latestDecodedText = normalizedText;
} catch { await settingStore.playScanSuccessSound();
pointAccount.value = undefined; const matched = await loadCustomerByCode(normalizedText);
if (!matched) {
scanStatus.value = `已识别 ${normalizedText}，未匹配客户档案。`;
return;
}
pendingInvitee.value = matched;
scanStatus.value = `已识别 ${matched.code}，请确认是否添加 ${matched.name}。`;
}
function handleScanStatusChange(value: string): void {
scanStatus.value = value;
}
async function confirmScannedInvitee(): Promise<void> {
if (!pendingInvitee.value) {
Toast.warning("请先扫码识别客户");
return;
}
if (await addInvitee(pendingInvitee.value)) {
closeScanPopup();
} }
} }
@@ -249,6 +307,31 @@ async function loadInvitees(): Promise<void> {
invitees.value = await CustomerAPI.listInvited(customerId); invitees.value = await CustomerAPI.listInvited(customerId);
} }
async function addInvitee(invitee: Customer): Promise<boolean> {
if (!customer.value?.id || !invitee.id) {
return false;
}
if (invitee.id === customer.value.id) {
Toast.warning("不能把客户本人添加为邀请客户");
return false;
}
if (isCustomerAncestor(invitee)) {
Toast.warning("不能把上级邀请人添加为邀请客户");
return false;
}
await CustomerAPI.saveInvite(customer.value.id, invitee.id);
await loadCustomer();
Toast.success(`已添加 ${invitee.name || invitee.code}`);
return true;
}
async function handleInviteeSelected(id: string): Promise<void> {
selectedInviteeId.value = id;
const invitee = await CustomerAPI.detail(id);
await addInvitee(invitee);
}
async function removeInvitee(item: Customer): Promise<void> { async function removeInvitee(item: Customer): Promise<void> {
if (!item.id) { if (!item.id) {
return; return;
@@ -259,6 +342,8 @@ async function removeInvitee(item: Customer): Promise<void> {
Toast.success("已删除邀请关系"); Toast.success("已删除邀请关系");
} }
// ---------- 删除客户 ----------
async function confirmRemoveCustomer(): Promise<void> { async function confirmRemoveCustomer(): Promise<void> {
const currentCustomer = customer.value; const currentCustomer = customer.value;
if (!currentCustomer?.id) { if (!currentCustomer?.id) {
@@ -300,6 +385,23 @@ async function toEdit(): Promise<void> {
await router.push(`/management/customers/${customer.value.id}/edit`); await router.push(`/management/customers/${customer.value.id}/edit`);
} }
// ---------- 积分账户 ----------
const pointAccount = ref<PointAccount>();
const pointBalanceText = computed(() => pointAccount.value ? `${(pointAccount.value.balance ?? 0).toLocaleString("zh-CN")}` : "未产生积分流水");
async function loadPointAccount(): Promise<void> {
pointAccount.value = undefined;
if (!customer.value?.id || !canReadPointAccount.value) {
return;
}
try {
pointAccount.value = await PointAPI.accountDetail(customer.value.id, customer.value.storeId);
} catch {
pointAccount.value = undefined;
}
}
async function toPointAccount(): Promise<void> { async function toPointAccount(): Promise<void> {
if (!customer.value?.id) { if (!customer.value?.id) {
return; return;
@@ -310,32 +412,10 @@ async function toPointAccount(): Promise<void> {
}); });
} }
function formatBirthdate(value?: Customer): string {
if (!value?.birthdate) {
return "无";
}
if (value.birthdateCalendar !== "LUNAR") {
return `公历 ${value.birthdate}`;
}
const lunarDate = LunarCalendar.solarToLunar(value.birthdate);
return lunarDate ? LunarCalendar.formatLunarDate(lunarDate) : "农历日期";
}
function formatSolarBirthdate(value?: Customer): string {
return value?.birthdate ? `公历 ${value.birthdate}` : "无";
}
function toggleBirthdateText(): void {
if (isLunarBirthdate.value) {
showSolarBirthdate.value = !showSolarBirthdate.value;
}
}
function isCustomerAncestor(invitee: Customer): boolean { function isCustomerAncestor(invitee: Customer): boolean {
if (!customer.value?.id) { if (!customer.value?.id) {
return false; return false;
} }
let current = customer.value.introducerCustomer; let current = customer.value.introducerCustomer;
while (current?.id) { while (current?.id) {
if (current.id === invitee.id) { if (current.id === invitee.id) {
@@ -343,78 +423,10 @@ function isCustomerAncestor(invitee: Customer): boolean {
} }
current = current.introducerCustomer; current = current.introducerCustomer;
} }
return false; return false;
} }
async function addInvitee(invitee: Customer): Promise<boolean> { // ---------- 加载客户 ----------
if (!customer.value?.id || !invitee.id) {
return false;
}
if (invitee.id === customer.value.id) {
Toast.warning("不能把客户本人添加为邀请客户");
return false;
}
if (isCustomerAncestor(invitee)) {
Toast.warning("不能把上级邀请人添加为邀请客户");
return false;
}
await CustomerAPI.saveInvite(customer.value.id, invitee.id);
await loadCustomer();
Toast.success(`已添加 ${invitee.name || invitee.code}`);
return true;
}
async function handleInviteeSelected(id: string): Promise<void> {
selectedInviteeId.value = id;
const invitee = await CustomerAPI.detail(id);
await addInvitee(invitee);
}
function openScanPopup(): void {
pendingInvitee.value = undefined;
latestDecodedText = "";
scanStatus.value = "正在启动扫码预览";
scanPopupVisible.value = true;
}
function closeScanPopup(): void {
scanPopupVisible.value = false;
}
async function handleDecodedText(rawText: string): Promise<void> {
const normalizedText = rawText.trim();
if (!normalizedText || normalizedText === latestDecodedText) {
return;
}
latestDecodedText = normalizedText;
await settingStore.playScanSuccessSound();
const matched = await loadCustomerByCode(normalizedText);
if (!matched) {
scanStatus.value = `已识别 ${normalizedText}，未匹配客户档案。`;
return;
}
pendingInvitee.value = matched;
scanStatus.value = `已识别 ${matched.code}，请确认是否添加 ${matched.name}。`;
}
function handleScanStatusChange(value: string): void {
scanStatus.value = value;
}
async function confirmScannedInvitee(): Promise<void> {
if (!pendingInvitee.value) {
Toast.warning("请先扫码识别客户");
return;
}
if (await addInvitee(pendingInvitee.value)) {
closeScanPopup();
}
}
async function loadCustomerByCode(code: string): Promise<Customer | undefined> { async function loadCustomerByCode(code: string): Promise<Customer | undefined> {
return await CustomerAPI.findByCode(code) || undefined; return await CustomerAPI.findByCode(code) || undefined;
@@ -435,13 +447,8 @@ async function toCustomerDataCharts(): Promise<void> {
await router.push(`/management/customers/${customer.value.id}/data-charts`); await router.push(`/management/customers/${customer.value.id}/data-charts`);
} }
onMounted(async () => { onMounted(loadCustomer);
await loadCustomer(); watch(() => route.params.id, loadCustomer);
});
watch(() => route.params.id, async () => {
await loadCustomer();
});
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
src/pages/customer/CustomerList.vue
+15 -10
View File
@@ -1,7 +1,7 @@
<template> <template>
<div v-can="permissionCodes.customer.read" class="customer-list"> <div v-can="permissionCodes.customer.read" class="customer-list">
<div class="filter-bar"> <div class="filter bg-white">
<t-dropdown-menu v-if="isGlobalManager"> <t-dropdown-menu v-if="isGlobalManager" class="store">
<t-dropdown-item <t-dropdown-item
v-model="selectedStoreId" v-model="selectedStoreId"
:label="storeFilterLabel" :label="storeFilterLabel"
@@ -11,7 +11,7 @@
</t-dropdown-menu> </t-dropdown-menu>
<t-input <t-input
v-model.trim="keyword" v-model.trim="keyword"
class="text-input" class="search"
placeholder="搜索编码、姓名、电话" placeholder="搜索编码、姓名、电话"
clearable clearable
borderless borderless
@@ -217,24 +217,29 @@ async function doExport(): Promise<void> {
.customer-list { .customer-list {
padding: calc(var(--app-nav-height)) 0 5.5rem 0; padding: calc(var(--app-nav-height)) 0 5.5rem 0;
.filter-bar { .filter {
gap: .5rem;
top: var(--app-nav-height); top: var(--app-nav-height);
left: 0; left: 0;
right: 0; right: 0;
z-index: 10; z-index: 10;
gap: .5rem; padding: .5rem;
display: flex; display: flex;
padding: .75rem 1rem;
position: sticky; position: sticky;
flex-direction: column;
background: #F5F5F8;
box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1);
align-items: center;
.text-input { .store {
&:after {
display: none;
}
}
.search {
width: 100%; width: 100%;
border: 1px solid rgba(148, 163, 184, .28); border: 1px solid rgba(148, 163, 184, .28);
padding: .5rem 1rem; padding: .5rem 1rem;
background: #f8fbff;
border-radius: 1rem; border-radius: 1rem;
} }
} }