update point adjust style
This commit is contained in:
@@ -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;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
+113
-32
@@ -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>
|
||||||
<t-button
|
<div class="customer-actions">
|
||||||
class="picker-button"
|
<t-button
|
||||||
variant="outline"
|
class="picker-button"
|
||||||
:content="customerText"
|
size="extra-small"
|
||||||
@click="selectorVisible = true"
|
variant="outline"
|
||||||
/>
|
@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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user