update customer layout
This commit is contained in:
Timi
@@ -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>
|
||||
Reference in New Issue
Block a user