update point adjust style

This commit is contained in:
Timi
2026-08-13 01:01:13 +08:00
parent 53c60d02cd
commit 1d494211ea
2 changed files with 113 additions and 33 deletions
-1
View File
@@ -222,7 +222,6 @@ const customerDisplayText = computed(() => {
if (1 < selectedCustomerList.value.length) { if (1 < selectedCustomerList.value.length) {
return `已选择 ${selectedCustomerList.value.length} 位客户`; return `已选择 ${selectedCustomerList.value.length} 位客户`;
} }
return selectedCustomer.value?.name || selectedCustomer.value?.code || customerCode.value; return selectedCustomer.value?.name || selectedCustomer.value?.code || customerCode.value;
}); });
+109 -28
View File
@@ -1,10 +1,11 @@
<template> <template>
<div v-can="permissionCodes.point.adjust" class="point-adjust"> <div v-can="permissionCodes.point.adjust" class="point-adjust">
<section class="notice"> <t-notice-bar
<t-icon name="info-circle" size="1.25rem" /> theme="warning"
<span>人工调整会追加一条不可修改的 ADJUST 流水,请填写真实、明确的调整原因。</span> visible
</section> content="人工调整会追加一条不可修改的 ADJUST 流水,请填写真实、明确的调整原因。"
<t-form class="form" label-align="left"> />
<t-form class="form" label-align="left" label-width="7rem">
<t-form-item v-if="isGlobalManager" label="门店" required-mark> <t-form-item v-if="isGlobalManager" label="门店" required-mark>
<t-button <t-button
class="picker-button" class="picker-button"
@@ -14,14 +15,34 @@
/> />
</t-form-item> </t-form-item>
<t-form-item label="客户" required-mark> <t-form-item label="客户" required-mark>
<div class="customer-actions">
<t-button <t-button
class="picker-button" class="picker-button"
size="extra-small"
variant="outline" variant="outline"
:content="customerText"
@click="selectorVisible = true" @click="selectorVisible = true"
/> >选择</t-button>
<t-button theme="primary" size="extra-small" variant="outline" @click="toggleScanner">
<template #icon>
<t-icon name="scan" />
</template>
<span v-text="scannerVisible ? '关闭扫码' : '扫码'" />
</t-button>
</div>
</t-form-item> </t-form-item>
<t-cell v-if="selectedCustomer" class="selected-customer" :title="customerText" :description="balanceText" /> <div v-if="scannerVisible" class="scanner-wrapper">
<code-scanner
visible
:status-text="scanStatus"
active-text="正在识别客户编码,请将二维码移入取景框"
@decode="handleDecodedText"
@status-change="handleScanStatusChange"
/>
</div>
<section v-if="selectedCustomer" class="selected-customer">
<customer-profile-card :customer="selectedCustomer" />
<div class="balance" v-text="balanceText" />
</section>
<t-form-item label="调整积分" required-mark> <t-form-item label="调整积分" required-mark>
<t-input <t-input
v-model.trim="pointDeltaText" v-model.trim="pointDeltaText"
@@ -69,8 +90,11 @@ import { Toast } from "tdesign-mobile-vue";
import { useUserStore } from "timi-web"; import { 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 CodeScanner from "@/components/CodeScanner.vue";
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
import CustomerSelector from "@/components/CustomerSelector.vue"; import CustomerSelector from "@/components/CustomerSelector.vue";
import { useCurrentStoreStore } from "@/store/currentStoreStore"; import { useCurrentStoreStore } from "@/store/currentStoreStore";
import { useSettingStore } from "@/store/settingStore";
import type { Customer } from "@/types/Customer"; import type { Customer } from "@/types/Customer";
import type { PointAccount } from "@/types/Point"; import type { PointAccount } from "@/types/Point";
import { getErrorMessage } from "@/utils/error"; import { getErrorMessage } from "@/utils/error";
@@ -86,6 +110,7 @@ const route = useRoute();
const router = useRouter(); const router = useRouter();
const userStore = useUserStore(); const userStore = useUserStore();
const currentStoreStore = useCurrentStoreStore(); const currentStoreStore = useCurrentStoreStore();
const settingStore = useSettingStore();
// ---------- 权限与门店 ---------- // ---------- 权限与门店 ----------
@@ -144,7 +169,6 @@ const selectedCustomerId = ref(String(route.query.customerId || ""));
const selectedCustomer = ref<Customer>(); const selectedCustomer = ref<Customer>();
const account = ref<PointAccount>(); const account = ref<PointAccount>();
const selectorVisible = ref(false); const selectorVisible = ref(false);
const customerText = computed(() => selectedCustomer.value?.name || selectedCustomer.value?.code || "请选择客户");
const balanceText = computed(() => `当前余额:${(account.value?.balance ?? 0).toLocaleString("zh-CN")} 分`); const balanceText = computed(() => `当前余额:${(account.value?.balance ?? 0).toLocaleString("zh-CN")} 分`);
async function handleCustomerChange(value: string | string[]): Promise<void> { async function handleCustomerChange(value: string | string[]): Promise<void> {
@@ -152,6 +176,28 @@ async function handleCustomerChange(value: string | string[]): Promise<void> {
await loadCustomerAccount(); await loadCustomerAccount();
} }
async function loadCustomerByCode(code: string): Promise<void> {
const normalizedCode = code.trim();
if (!normalizedCode) {
return;
}
try {
const matched = await CustomerAPI.findByCode(normalizedCode);
if (!matched?.id) {
Toast.warning("未找到客户");
return;
}
selectedCustomerId.value = matched.id;
selectedCustomer.value = matched;
await loadCustomerAccount();
} catch {
selectedCustomer.value = undefined;
account.value = undefined;
Toast.error("客户信息加载失败");
}
}
async function loadCustomerAccount(): Promise<void> { async function loadCustomerAccount(): Promise<void> {
if (!selectedCustomerId.value) { if (!selectedCustomerId.value) {
selectedCustomer.value = undefined; selectedCustomer.value = undefined;
@@ -175,6 +221,36 @@ async function loadCustomerAccount(): Promise<void> {
} }
} }
// ---------- 扫码 ----------
const scannerVisible = ref(false);
const scanStatus = ref("点击扫码开始识别");
let latestDecodedText = "";
async function toggleScanner(): Promise<void> {
scannerVisible.value = !scannerVisible.value;
if (scannerVisible.value) {
latestDecodedText = "";
scanStatus.value = "正在启动扫码预览";
}
}
async function handleDecodedText(rawText: string): Promise<void> {
const normalizedText = rawText.trim();
if (!normalizedText || normalizedText === latestDecodedText) {
return;
}
latestDecodedText = normalizedText;
await settingStore.playScanSuccessSound();
scanStatus.value = `已识别 ${normalizedText},正在加载客户档案`;
scannerVisible.value = false;
await loadCustomerByCode(normalizedText);
}
function handleScanStatusChange(value: string): void {
scanStatus.value = value;
}
// ---------- 调整表单 ---------- // ---------- 调整表单 ----------
const pointDeltaText = ref(""); const pointDeltaText = ref("");
@@ -251,36 +327,35 @@ onMounted(async () => {
<style scoped lang="less"> <style scoped lang="less">
.point-adjust { .point-adjust {
padding: calc(var(--app-nav-height) + 1rem) 0 5rem; padding: calc(var(--app-nav-height)) 0 5rem;
.notice {
gap: .5rem;
margin: 0 1rem 1rem;
padding: .875rem 1rem;
display: flex;
color: #155e75;
background: #ecfeff;
border-radius: 1rem;
align-items: flex-start;
font-size: .8125rem;
line-height: 1.5;
}
.form { .form {
margin: 0 1rem; margin: 1rem;
padding: .5rem 0; padding: .5rem 0;
background: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .92);
box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1);
border-radius: 1.4rem; border-radius: 1.4rem;
.picker-button { .customer-actions {
gap: .75rem;
width: 100%; width: 100%;
text-align: right; display: flex;
justify-content: end;
}
.scanner-wrapper {
margin: 1rem .75rem .75rem;
} }
.selected-customer { .selected-customer {
margin: 0 .75rem .5rem; margin: 1rem .75rem .5rem;
border-radius: .875rem;
.balance {
color: #52607a;
margin-top: .5rem;
font-size: .875rem;
text-align: right;
}
} }
.request-id { .request-id {
@@ -312,6 +387,12 @@ onMounted(async () => {
background: rgba(15, 23, 42, .88); background: rgba(15, 23, 42, .88);
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32); box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
.selected-customer {
.balance {
color: #94a3b8;
}
}
.request-id { .request-id {
color: #94a3b8; color: #94a3b8;
} }