update customer layout
This commit is contained in:
Timi
@@ -18,6 +18,7 @@
|
||||
<gender-icon v-if="customer.gender" :value="customer.gender" size="1rem" />
|
||||
</div>
|
||||
<t-tag
|
||||
v-if="customerCode"
|
||||
class="code"
|
||||
variant="outline"
|
||||
shape="round"
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
<span v-else v-text="birthdateText" />
|
||||
</t-cell>
|
||||
<t-cell title="年龄" :note="ageText" />
|
||||
<t-cell title="调理部位" :note="selectedAreaText" arrow @click="openBodyAreaPicker" />
|
||||
<t-cell title="住址" :note="Text.display(customer.address)" />
|
||||
<t-cell title="病症" :note="Text.display(customer.disease)" />
|
||||
<t-cell title="备注" :note="Text.display(customer.remark)" />
|
||||
@@ -62,142 +63,102 @@
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<t-cell-group theme="card">
|
||||
<div class="conditioning-part bg-white">
|
||||
<span class="gray">调理部位</span>
|
||||
<body-area-selector v-model="selectedAreas" />
|
||||
</div>
|
||||
</t-cell-group>
|
||||
<t-cell-group v-if="inviter" :title="`由 ${inviter.name} 邀请`" class="invite-list" theme="card">
|
||||
<t-cell-group v-if="inviter" :title="`由 ${inviter.name} 邀请`" theme="card">
|
||||
<customer-profile-card :customer="inviter" @click="toCustomerDetail(inviter)"/>
|
||||
</t-cell-group>
|
||||
<div class="invite-list">
|
||||
<div class="header">
|
||||
<div class="title">邀请客户</div>
|
||||
<div v-can="permissionCodes.customer.update" class="actions">
|
||||
<t-button
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
size="extra-small"
|
||||
content="选择添加"
|
||||
@click="selectorVisible = true"
|
||||
/>
|
||||
<t-button
|
||||
theme="primary"
|
||||
size="extra-small"
|
||||
content="扫码添加"
|
||||
@click="openScanPopup"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<t-cell-group theme="card">
|
||||
<t-swipe-cell
|
||||
class="item"
|
||||
v-for="(item, index) in invitees"
|
||||
:key="item.id || item.code || index"
|
||||
>
|
||||
<t-cell
|
||||
class="cell"
|
||||
:title="item.name || item.code || '-'"
|
||||
arrow
|
||||
hover
|
||||
@click="toCustomerDetail(item)"
|
||||
>
|
||||
<template #description>
|
||||
<telephone-link :value="item.telephone" placeholder="未填写电话" />
|
||||
</template>
|
||||
<template #leftIcon>
|
||||
<t-image
|
||||
v-if="getCustomerPhotoURL(item)"
|
||||
class="avatar"
|
||||
:src="getCustomerPhotoURL(item)"
|
||||
:alt="item.name"
|
||||
fit="cover"
|
||||
/>
|
||||
<div v-else class="avatar fallback" v-text="(item.name || '客').slice(0, 1)" />
|
||||
</template>
|
||||
</t-cell>
|
||||
<template #right>
|
||||
<div v-can="permissionCodes.customer.update" class="remove bg-red white" @click="removeInvitee(item)">删除</div>
|
||||
</template>
|
||||
</t-swipe-cell>
|
||||
<div v-if="!invitees.length" class="empty">暂无邀请客户</div>
|
||||
<t-cell-group v-if="customer" theme="card">
|
||||
<t-cell title="邀请客户" :note="inviteeCountText" arrow @click="toInviteeList" />
|
||||
</t-cell-group>
|
||||
</div>
|
||||
<div class="bottom-actions">
|
||||
<t-button
|
||||
v-can="permissionCodes.customer.delete"
|
||||
class="delete bg-white"
|
||||
class="delete-action"
|
||||
theme="danger"
|
||||
variant="outline"
|
||||
:loading="isRemoving"
|
||||
@click="confirmRemoveCustomer"
|
||||
>
|
||||
删除客户
|
||||
</t-button>
|
||||
<t-button v-can="permissionCodes.customer.update" theme="primary" class="edit" @click="toEdit">编辑客户</t-button>
|
||||
</div>
|
||||
<customer-selector
|
||||
v-model="selectedInviteeId"
|
||||
v-model:visible="selectorVisible"
|
||||
@change="handleInviteeSelected"
|
||||
/>
|
||||
<tag-selector
|
||||
v-model="selectedTagIdList"
|
||||
v-model:visible="tagSelectorVisible"
|
||||
@change="handleTagSelected"
|
||||
/>
|
||||
<t-popup v-model="scanPopupVisible" placement="bottom">
|
||||
<div class="scan-popup bg-white">
|
||||
<div class="header">
|
||||
<t-button
|
||||
variant="text"
|
||||
<bottom-popup
|
||||
v-model="bodyAreaPickerVisible"
|
||||
title="调理部位"
|
||||
height="38rem"
|
||||
left-button-text="关闭"
|
||||
right-button-text=""
|
||||
@left-button-click="closeBodyAreaPicker"
|
||||
>
|
||||
<body-area-selector :model-value="selectedAreas" readonly />
|
||||
</bottom-popup>
|
||||
<t-dialog
|
||||
class="remove-dialog"
|
||||
v-model:visible="removeDialogVisible"
|
||||
title="删除客户"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="warning">删除后无法恢复，将同时清除以下关联数据：</div>
|
||||
<ul class="items">
|
||||
<li>登记事件记录及其附件，并撤销这些登记产生的积分</li>
|
||||
<li>客户积分账户、标签和客户附件</li>
|
||||
<li>解除该客户与其被邀请客户之间的邀请关系，被邀请客户不会被删除</li>
|
||||
<li>减少该客户原介绍人的邀请客户计数</li>
|
||||
<li>客户档案本身</li>
|
||||
</ul>
|
||||
<div class="hint">
|
||||
请输入客户姓名
|
||||
<span class="name red" v-text="removeCustomerName" />
|
||||
以确认删除
|
||||
</div>
|
||||
<t-input
|
||||
class="confirm-input"
|
||||
v-model.trim="removeConfirmName"
|
||||
size="small"
|
||||
@click="closeScanPopup"
|
||||
borderless
|
||||
clearable
|
||||
placeholder="请输入客户姓名"
|
||||
/>
|
||||
</div>
|
||||
<template #cancelBtn>
|
||||
<t-button
|
||||
theme="default"
|
||||
content="取消"
|
||||
block
|
||||
@click="closeRemoveDialog"
|
||||
/>
|
||||
<h3>扫码添加邀请客户</h3>
|
||||
</template>
|
||||
<template #confirmBtn>
|
||||
<t-button
|
||||
theme="primary"
|
||||
size="small"
|
||||
content="确认"
|
||||
@click="confirmScannedInvitee"
|
||||
theme="danger"
|
||||
content="删除"
|
||||
block
|
||||
:disabled="!canConfirmRemove"
|
||||
@click="removeConfirmedCustomer"
|
||||
/>
|
||||
</div>
|
||||
<code-scanner
|
||||
v-if="scanPopupVisible"
|
||||
:visible="scanPopupVisible"
|
||||
:status-text="scanStatus"
|
||||
active-text="正在识别客户编码，请将二维码移入取景框"
|
||||
@decode="handleDecodedText"
|
||||
@status-change="handleScanStatusChange"
|
||||
/>
|
||||
<div v-if="pendingInvitee" class="confirm">
|
||||
<customer-profile-card :customer="pendingInvitee" />
|
||||
</div>
|
||||
</div>
|
||||
</t-popup>
|
||||
</template>
|
||||
</t-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DialogPlugin, Toast } from "tdesign-mobile-vue";
|
||||
import { Toast } from "tdesign-mobile-vue";
|
||||
import { AttachmentAPI, PassTimeLabel, Text, useUserStore } from "timi-web";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import PointAPI from "@/api/PointAPI";
|
||||
import TagAPI from "@/api/TagAPI";
|
||||
import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
|
||||
import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import TagSelector from "@/components/TagSelector.vue";
|
||||
import CustomerTagCard from "@/pages/customer/component/CustomerTagCard.vue";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { BodyAreaValue, Customer } from "@/types/Customer";
|
||||
import type { PointAccount } from "@/types/Point";
|
||||
import type { Tag } from "@/types/Tag";
|
||||
import { getCustomerPhotoURL, normalizeBodyAreaValue } from "@/utils/customer";
|
||||
import { bodyAreaLabelMap } from "@/utils/bodyArea";
|
||||
import { normalizeBodyAreaValue } from "@/utils/customer";
|
||||
import { corePermissionCodes, permissionCodes } from "@/utils/permission";
|
||||
import { LunarCalendar } from "@/utils/LunarCalendar";
|
||||
|
||||
@@ -207,15 +168,20 @@ defineOptions({
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const settingStore = useSettingStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const isRemoving = ref(false);
|
||||
const removeDialogVisible = ref(false);
|
||||
const removeTarget = ref<Customer>();
|
||||
const removeConfirmName = ref("");
|
||||
|
||||
const canReadStat = computed(() => userStore.hasPermissions(permissionCodes.stat.read));
|
||||
const canReadPointAccount = computed(() => userStore.hasPermissions(permissionCodes.point.accountRead));
|
||||
const canReadTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.read));
|
||||
const canApplyTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.apply));
|
||||
const removeCustomerName = computed(() => removeTarget.value?.name || "");
|
||||
const canConfirmRemove = computed(() => !!removeCustomerName.value && removeConfirmName.value === removeCustomerName.value);
|
||||
|
||||
// ---------- 资料 ----------
|
||||
|
||||
@@ -225,6 +191,7 @@ const isLunarBirthdate = computed(() => customer.value?.birthdateCalendar === "L
|
||||
const solarBirthdateText = computed(() => formatSolarBirthdate(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 inviteeCountText = computed(() => `${customer.value?.invitedCount ?? 0} 人`);
|
||||
const photoList = computed(() => (customer.value?.attachmentList || [])
|
||||
.filter(item => !!item.id)
|
||||
.map(item => AttachmentAPI.getReadURL(item.id || "")));
|
||||
@@ -242,6 +209,19 @@ const selectedAreas = computed<BodyAreaValue>({
|
||||
return;
|
||||
}
|
||||
});
|
||||
const bodyAreaPickerVisible = ref(false);
|
||||
const selectedAreaText = computed(() => {
|
||||
const selectedLabelList = selectedAreas.value.selectedCodeList.map(item => bodyAreaLabelMap.get(item) || item);
|
||||
return selectedLabelList.length ? selectedLabelList.join("、") : "未选择";
|
||||
});
|
||||
|
||||
function openBodyAreaPicker(): void {
|
||||
bodyAreaPickerVisible.value = true;
|
||||
}
|
||||
|
||||
function closeBodyAreaPicker(): void {
|
||||
bodyAreaPickerVisible.value = false;
|
||||
}
|
||||
|
||||
function formatBirthdate(value?: Customer): string {
|
||||
if (!value?.birthdate) {
|
||||
@@ -270,7 +250,6 @@ async function loadCustomer(): Promise<void> {
|
||||
customer.value = undefined;
|
||||
customerTagList.value = [];
|
||||
selectedTagIdList.value = [];
|
||||
invitees.value = [];
|
||||
showSolarBirthdate.value = false;
|
||||
return;
|
||||
}
|
||||
@@ -280,12 +259,10 @@ async function loadCustomer(): Promise<void> {
|
||||
customer.value = await CustomerAPI.detail(id);
|
||||
await loadPointAccount();
|
||||
await loadCustomerTags();
|
||||
await loadInvitees();
|
||||
} catch (err) {
|
||||
customer.value = undefined;
|
||||
customerTagList.value = [];
|
||||
selectedTagIdList.value = [];
|
||||
invitees.value = [];
|
||||
console.warn("客户详情加载失败", err);
|
||||
Toast.warning("客户详情加载失败");
|
||||
}
|
||||
@@ -332,127 +309,37 @@ async function handleTagSelected(tagList: Tag[]): Promise<void> {
|
||||
Toast.success("客户标签已保存");
|
||||
}
|
||||
|
||||
// ---------- 邀请来源和邀请列表 ----------
|
||||
let latestDecodedText = "";
|
||||
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;
|
||||
}
|
||||
|
||||
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 loadInvitees(): Promise<void> {
|
||||
const customerId = customer.value?.id;
|
||||
if (!customerId) {
|
||||
invitees.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
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> {
|
||||
if (!item.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
await CustomerAPI.deleteInvite(item.id);
|
||||
await loadCustomer();
|
||||
Toast.success("已删除邀请关系");
|
||||
}
|
||||
|
||||
// ---------- 删除客户 ----------
|
||||
|
||||
async function confirmRemoveCustomer(): Promise<void> {
|
||||
const currentCustomer = customer.value;
|
||||
if (!currentCustomer?.id) {
|
||||
if (!currentCustomer?.id || isRemoving.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const customerId = currentCustomer.id;
|
||||
const customerName = currentCustomer.name || currentCustomer.code || "未命名客户";
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "删除客户",
|
||||
content: `确定删除客户 ${customerName} 吗？删除后无法恢复。`,
|
||||
cancelBtn: "取消",
|
||||
confirmBtn: "删除",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
await removeCustomer(customerId);
|
||||
removeTarget.value = currentCustomer;
|
||||
removeConfirmName.value = "";
|
||||
removeDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function closeRemoveDialog(): void {
|
||||
removeDialogVisible.value = false;
|
||||
removeTarget.value = undefined;
|
||||
removeConfirmName.value = "";
|
||||
}
|
||||
|
||||
async function removeConfirmedCustomer(): Promise<void> {
|
||||
const customerId = removeTarget.value?.id;
|
||||
if (!customerId || !canConfirmRemove.value || isRemoving.value) {
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
removeDialogVisible.value = false;
|
||||
removeTarget.value = undefined;
|
||||
removeConfirmName.value = "";
|
||||
await removeCustomer(customerId);
|
||||
}
|
||||
|
||||
async function removeCustomer(id: string): Promise<void> {
|
||||
@@ -466,6 +353,13 @@ async function removeCustomer(id: string): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
async function toInviteeList(): Promise<void> {
|
||||
if (!customer.value?.id) {
|
||||
return;
|
||||
}
|
||||
await router.push(`/management/customers/${customer.value.id}/invitees`);
|
||||
}
|
||||
|
||||
async function toEdit(): Promise<void> {
|
||||
if (!customer.value?.id) {
|
||||
return;
|
||||
@@ -504,26 +398,8 @@ async function toPointAccount(): Promise<void> {
|
||||
});
|
||||
}
|
||||
|
||||
function isCustomerAncestor(invitee: Customer): boolean {
|
||||
if (!customer.value?.id) {
|
||||
return false;
|
||||
}
|
||||
let current = customer.value.introducerCustomer;
|
||||
while (current?.id) {
|
||||
if (current.id === invitee.id) {
|
||||
return true;
|
||||
}
|
||||
current = current.introducerCustomer;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// ---------- 加载客户 ----------
|
||||
|
||||
async function loadCustomerByCode(code: string): Promise<Customer | undefined> {
|
||||
return await CustomerAPI.findByCode(code) || undefined;
|
||||
}
|
||||
|
||||
async function toCustomerDetail(target: Customer): Promise<void> {
|
||||
if (!target.id) {
|
||||
return;
|
||||
@@ -539,14 +415,25 @@ async function toCustomerDataCharts(): Promise<void> {
|
||||
await router.push(`/management/customers/${customer.value.id}/data-charts`);
|
||||
}
|
||||
|
||||
onMounted(loadCustomer);
|
||||
function updateNavBar(): void {
|
||||
navBarStore.clearRight();
|
||||
if (userStore.hasPermissions(permissionCodes.customer.update)) {
|
||||
navBarStore.setRightText("编辑", "var(--td-brand-color)", toEdit);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadCustomer();
|
||||
updateNavBar();
|
||||
});
|
||||
watch(() => route.params.id, loadCustomer);
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.customer-detail {
|
||||
gap: 1rem;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 4rem 0;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -566,113 +453,56 @@ watch(() => route.params.id, loadCustomer);
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
||||
.conditioning-part {
|
||||
gap: .5rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.invite-list {
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
padding: 0 var(--td-cell-group-title-padding-left, 16px);
|
||||
font-size: var(--td-cell-group-title-font-size, 14px);
|
||||
text-align: left;
|
||||
background: var(--td-cell-group-title-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
|
||||
align-items: center;
|
||||
line-height: var(--td-cell-group-title-line-height, 45px);
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
color: var(--td-cell-group-title-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, .4))));
|
||||
}
|
||||
|
||||
.actions {
|
||||
gap: .875rem;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
&:last-child {
|
||||
|
||||
:deep(.t-cell:after) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
padding: 6px 10px 6px 6px;
|
||||
|
||||
.avatar {
|
||||
width: 3.25rem;
|
||||
height: 3.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remove {
|
||||
width: fit-content;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: #52607a;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
background: #f7faff;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
gap: .75rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
display: flex;
|
||||
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
||||
position: fixed;
|
||||
|
||||
.delete {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.edit {
|
||||
flex: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.birthdate-trigger {
|
||||
.birthdate-trigger {
|
||||
text-align: right;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-action {
|
||||
--td-button-border-radius: 1rem;
|
||||
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.scan-popup {
|
||||
.remove-dialog {
|
||||
|
||||
:deep(.t-dialog__footer) {
|
||||
gap: 1rem;
|
||||
padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0)) 1rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: left;
|
||||
|
||||
.warning {
|
||||
color: #b42318;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.items {
|
||||
gap: .5rem;
|
||||
height: 9rem;
|
||||
margin: .75rem 0 1rem;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
max-height: 86vh;
|
||||
border-radius: 1.25rem 1.25rem 0 0;
|
||||
overflow-y: auto;
|
||||
line-height: 1.2;
|
||||
padding-left: 1.25rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.name {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
.confirm-input {
|
||||
--td-input-vertical-padding: 10px;
|
||||
|
||||
border: 1px solid var(--td-component-border);
|
||||
margin-top: .5rem;
|
||||
border-radius: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -688,9 +518,16 @@ watch(() => route.params.id, loadCustomer);
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.scan-popup {
|
||||
color: #e2e8f0;
|
||||
background: rgba(15, 23, 42, .96);
|
||||
.remove-dialog {
|
||||
|
||||
.warning {
|
||||
color: #fda29b;
|
||||
}
|
||||
|
||||
.confirm-input {
|
||||
background: rgba(15, 23, 42, .72);
|
||||
border-color: rgba(148, 163, 184, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,385 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.customer.read" class="customer-invitee-list">
|
||||
<customer-profile-card
|
||||
v-if="customer"
|
||||
class="customer"
|
||||
:customer="customer"
|
||||
/>
|
||||
<div class="invite-list">
|
||||
<div class="header">
|
||||
<div class="title">邀请客户</div>
|
||||
<div v-can="permissionCodes.customer.update" class="actions">
|
||||
<t-button
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
size="extra-small"
|
||||
content="选择添加"
|
||||
@click="selectorVisible = true"
|
||||
/>
|
||||
<t-button
|
||||
theme="primary"
|
||||
size="extra-small"
|
||||
content="扫码添加"
|
||||
@click="openScanPopup"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<t-cell-group theme="card">
|
||||
<t-swipe-cell
|
||||
v-for="(item, index) in invitees"
|
||||
:key="item.id || item.code || index"
|
||||
class="item"
|
||||
>
|
||||
<t-cell
|
||||
class="cell"
|
||||
:title="item.name || item.code || '-'"
|
||||
arrow
|
||||
hover
|
||||
@click="toCustomerDetail(item)"
|
||||
>
|
||||
<template #description>
|
||||
<telephone-link :value="item.telephone" placeholder="未填写电话" />
|
||||
</template>
|
||||
<template #leftIcon>
|
||||
<t-image
|
||||
v-if="getCustomerPhotoURL(item)"
|
||||
class="avatar"
|
||||
:src="getCustomerPhotoURL(item)"
|
||||
:alt="item.name"
|
||||
fit="cover"
|
||||
/>
|
||||
<div v-else class="avatar fallback" v-text="(item.name || '客').slice(0, 1)" />
|
||||
</template>
|
||||
</t-cell>
|
||||
<template #right>
|
||||
<div v-can="permissionCodes.customer.update" class="remove bg-red white" @click="removeInvitee(item)">删除</div>
|
||||
</template>
|
||||
</t-swipe-cell>
|
||||
<div v-if="!invitees.length" class="empty" v-text="isLoading ? '正在加载邀请客户' : '暂无邀请客户'" />
|
||||
</t-cell-group>
|
||||
</div>
|
||||
</div>
|
||||
<customer-selector
|
||||
v-model="selectedInviteeId"
|
||||
v-model:visible="selectorVisible"
|
||||
@change="handleInviteeSelected"
|
||||
/>
|
||||
<t-popup v-model="scanPopupVisible" placement="bottom">
|
||||
<div class="scan-popup bg-white">
|
||||
<div class="header">
|
||||
<t-button
|
||||
variant="text"
|
||||
size="small"
|
||||
@click="closeScanPopup"
|
||||
content="取消"
|
||||
/>
|
||||
<h3>扫码添加邀请客户</h3>
|
||||
<t-button
|
||||
theme="primary"
|
||||
size="small"
|
||||
content="确认"
|
||||
@click="confirmScannedInvitee"
|
||||
/>
|
||||
</div>
|
||||
<code-scanner
|
||||
v-if="scanPopupVisible"
|
||||
:visible="scanPopupVisible"
|
||||
:status-text="scanStatus"
|
||||
active-text="正在识别客户编码，请将二维码移入取景框"
|
||||
@decode="handleDecodedText"
|
||||
@status-change="handleScanStatusChange"
|
||||
/>
|
||||
<div v-if="pendingInvitee" class="confirm">
|
||||
<customer-profile-card :customer="pendingInvitee" />
|
||||
</div>
|
||||
</div>
|
||||
</t-popup>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Toast } from "tdesign-mobile-vue";
|
||||
import { useUserStore } from "timi-web";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import { getCustomerPhotoURL } from "@/utils/customer";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({
|
||||
name: "CustomerInviteeList"
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const settingStore = useSettingStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const customer = ref<Customer>();
|
||||
const invitees = ref<Customer[]>([]);
|
||||
const isLoading = ref(false);
|
||||
const selectedInviteeId = ref("");
|
||||
const selectorVisible = ref(false);
|
||||
const scanPopupVisible = ref(false);
|
||||
const pendingInvitee = ref<Customer>();
|
||||
const scanStatus = ref("点击扫码开始识别");
|
||||
let latestDecodedText = "";
|
||||
|
||||
const canUpdateCustomer = computed(() => userStore.hasPermissions(permissionCodes.customer.update));
|
||||
|
||||
// ---------- 加载 ----------
|
||||
|
||||
async function loadCustomer(): Promise<void> {
|
||||
const customerId = String(route.params.id || "");
|
||||
if (!customerId) {
|
||||
customer.value = undefined;
|
||||
invitees.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading.value = true;
|
||||
try {
|
||||
customer.value = await CustomerAPI.detail(customerId);
|
||||
invitees.value = await CustomerAPI.listInvited(customerId);
|
||||
} catch (err) {
|
||||
customer.value = undefined;
|
||||
invitees.value = [];
|
||||
console.warn("邀请客户加载失败", err);
|
||||
Toast.warning("邀请客户加载失败");
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadInvitees(): Promise<void> {
|
||||
const customerId = customer.value?.id;
|
||||
if (!customerId) {
|
||||
invitees.value = [];
|
||||
return;
|
||||
}
|
||||
invitees.value = await CustomerAPI.listInvited(customerId);
|
||||
}
|
||||
|
||||
// ---------- 添加邀请客户 ----------
|
||||
|
||||
function openScanPopup(): void {
|
||||
if (!canUpdateCustomer.value) {
|
||||
return;
|
||||
}
|
||||
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 handleInviteeSelected(id: string): Promise<void> {
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
selectedInviteeId.value = id;
|
||||
const invitee = await CustomerAPI.detail(id);
|
||||
await addInvitee(invitee);
|
||||
}
|
||||
|
||||
async function addInvitee(invitee: Customer): Promise<boolean> {
|
||||
if (!canUpdateCustomer.value || !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 loadInvitees();
|
||||
Toast.success(`已添加 ${invitee.name || invitee.code}`);
|
||||
return true;
|
||||
}
|
||||
|
||||
function isCustomerAncestor(invitee: Customer): boolean {
|
||||
let current = customer.value?.introducerCustomer;
|
||||
while (current?.id) {
|
||||
if (current.id === invitee.id) {
|
||||
return true;
|
||||
}
|
||||
current = current.introducerCustomer;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// ---------- 删除邀请关系 ----------
|
||||
|
||||
async function removeInvitee(item: Customer): Promise<void> {
|
||||
if (!canUpdateCustomer.value || !item.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
await CustomerAPI.deleteInvite(item.id);
|
||||
await loadInvitees();
|
||||
Toast.success("已删除邀请关系");
|
||||
}
|
||||
|
||||
// ---------- 导航 ----------
|
||||
|
||||
async function loadCustomerByCode(code: string): Promise<Customer | undefined> {
|
||||
return await CustomerAPI.findByCode(code) || undefined;
|
||||
}
|
||||
|
||||
async function toCustomerDetail(target: Customer): Promise<void> {
|
||||
if (!target.id) {
|
||||
return;
|
||||
}
|
||||
await router.push(`/management/customers/${target.id}`);
|
||||
}
|
||||
|
||||
onMounted(loadCustomer);
|
||||
watch(() => route.params.id, loadCustomer);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.customer-invitee-list {
|
||||
gap: 1rem;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.customer {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.invite-list {
|
||||
|
||||
.header {
|
||||
padding: 0 var(--td-cell-group-title-padding-left, 16px);
|
||||
display: flex;
|
||||
font-size: var(--td-cell-group-title-font-size, 14px);
|
||||
text-align: left;
|
||||
background: var(--td-cell-group-title-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
|
||||
align-items: center;
|
||||
line-height: var(--td-cell-group-title-line-height, 45px);
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
color: var(--td-cell-group-title-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, .4))));
|
||||
}
|
||||
|
||||
.actions {
|
||||
gap: .875rem;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
&:last-child {
|
||||
|
||||
:deep(.t-cell:after) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
padding: 6px 10px 6px 6px;
|
||||
|
||||
.avatar {
|
||||
width: 3.25rem;
|
||||
height: 3.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remove {
|
||||
width: fit-content;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 1rem;
|
||||
color: #52607a;
|
||||
text-align: center;
|
||||
background: #f7faff;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scan-popup {
|
||||
gap: 1rem;
|
||||
padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0)) 1rem;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
max-height: 86vh;
|
||||
border-radius: 1.25rem 1.25rem 0 0;
|
||||
flex-direction: column;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.customer-invitee-list {
|
||||
|
||||
.empty {
|
||||
color: #94a3b8;
|
||||
background: rgba(30, 41, 59, .9);
|
||||
}
|
||||
}
|
||||
|
||||
.scan-popup {
|
||||
color: #e2e8f0;
|
||||
background: rgba(15, 23, 42, .96);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,6 +4,7 @@ import QuickSignInPage from "@/pages/home/QuickSignInPage.vue";
|
||||
import EventRecordEdit from "@/pages/event/EventRecordEdit.vue";
|
||||
import CustomerList from "@/pages/customer/CustomerList.vue";
|
||||
import CustomerDetail from "@/pages/customer/CustomerDetail.vue";
|
||||
import CustomerInviteeList from "@/pages/customer/CustomerInviteeList.vue";
|
||||
import CustomerEdit from "@/pages/customer/CustomerEdit.vue";
|
||||
|
||||
const customerRoutes: RouteRecordRaw[] = [
|
||||
@@ -91,6 +92,20 @@ const customerRoutes: RouteRecordRaw[] = [
|
||||
darkBodyBackground: "#10161f"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/management/customers/:id/invitees",
|
||||
name: "CustomerInviteeList",
|
||||
component: CustomerInviteeList,
|
||||
meta: {
|
||||
depth: 5,
|
||||
navBarVisible: true,
|
||||
navBarCanBack: true,
|
||||
navBarTitle: "邀请客户",
|
||||
tabBarVisible: false,
|
||||
bodyBackground: "#F5F5F8",
|
||||
darkBodyBackground: "#10161f"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/management/customers/:id/edit",
|
||||
name: "CustomerEdit",
|
||||
|
||||
@@ -55,6 +55,10 @@ html.theme-dark body {
|
||||
}
|
||||
}
|
||||
|
||||
.t-dialog__footer {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.load-state {
|
||||
color: var(--tui-gray);
|
||||
padding: .75rem;
|
||||
|
||||
Reference in New Issue
Block a user