update point adjust style
This commit is contained in:
Timi
+113
-32
@@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.point.adjust" class="point-adjust">
|
||||
<section class="notice">
|
||||
<t-icon name="info-circle" size="1.25rem" />
|
||||
<span>人工调整会追加一条不可修改的 ADJUST 流水，请填写真实、明确的调整原因。</span>
|
||||
</section>
|
||||
<t-form class="form" label-align="left">
|
||||
<t-notice-bar
|
||||
theme="warning"
|
||||
visible
|
||||
content="人工调整会追加一条不可修改的 ADJUST 流水，请填写真实、明确的调整原因。"
|
||||
/>
|
||||
<t-form class="form" label-align="left" label-width="7rem">
|
||||
<t-form-item v-if="isGlobalManager" label="门店" required-mark>
|
||||
<t-button
|
||||
class="picker-button"
|
||||
@@ -14,14 +15,34 @@
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="客户" required-mark>
|
||||
<t-button
|
||||
class="picker-button"
|
||||
variant="outline"
|
||||
:content="customerText"
|
||||
@click="selectorVisible = true"
|
||||
/>
|
||||
<div class="customer-actions">
|
||||
<t-button
|
||||
class="picker-button"
|
||||
size="extra-small"
|
||||
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-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-input
|
||||
v-model.trim="pointDeltaText"
|
||||
@@ -69,8 +90,11 @@ import { Toast } from "tdesign-mobile-vue";
|
||||
import { useUserStore } from "timi-web";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import PointAPI from "@/api/PointAPI";
|
||||
import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { PointAccount } from "@/types/Point";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
@@ -86,6 +110,7 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
const settingStore = useSettingStore();
|
||||
|
||||
// ---------- 权限与门店 ----------
|
||||
|
||||
@@ -144,7 +169,6 @@ const selectedCustomerId = ref(String(route.query.customerId || ""));
|
||||
const selectedCustomer = ref<Customer>();
|
||||
const account = ref<PointAccount>();
|
||||
const selectorVisible = ref(false);
|
||||
const customerText = computed(() => selectedCustomer.value?.name || selectedCustomer.value?.code || "请选择客户");
|
||||
const balanceText = computed(() => `当前余额：${(account.value?.balance ?? 0).toLocaleString("zh-CN")} 分`);
|
||||
|
||||
async function handleCustomerChange(value: string | string[]): Promise<void> {
|
||||
@@ -152,6 +176,28 @@ async function handleCustomerChange(value: string | string[]): Promise<void> {
|
||||
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> {
|
||||
if (!selectedCustomerId.value) {
|
||||
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("");
|
||||
@@ -251,36 +327,35 @@ onMounted(async () => {
|
||||
|
||||
<style scoped lang="less">
|
||||
.point-adjust {
|
||||
padding: calc(var(--app-nav-height) + 1rem) 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;
|
||||
}
|
||||
padding: calc(var(--app-nav-height)) 0 5rem;
|
||||
|
||||
.form {
|
||||
margin: 0 1rem;
|
||||
margin: 1rem;
|
||||
padding: .5rem 0;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1.4rem;
|
||||
|
||||
.picker-button {
|
||||
.customer-actions {
|
||||
gap: .75rem;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.scanner-wrapper {
|
||||
margin: 1rem .75rem .75rem;
|
||||
}
|
||||
|
||||
.selected-customer {
|
||||
margin: 0 .75rem .5rem;
|
||||
border-radius: .875rem;
|
||||
margin: 1rem .75rem .5rem;
|
||||
|
||||
.balance {
|
||||
color: #52607a;
|
||||
margin-top: .5rem;
|
||||
font-size: .875rem;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.request-id {
|
||||
@@ -312,6 +387,12 @@ onMounted(async () => {
|
||||
background: rgba(15, 23, 42, .88);
|
||||
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
||||
|
||||
.selected-customer {
|
||||
.balance {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
.request-id {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user