add point
This commit is contained in:
Timi
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.point.accountRead" class="point-account">
|
||||
<section class="selector-panel">
|
||||
<div class="section-title">选择客户</div>
|
||||
<t-button
|
||||
v-if="isGlobalManager"
|
||||
class="customer-trigger"
|
||||
variant="outline"
|
||||
:content="selectedStoreName"
|
||||
@click="openStorePicker"
|
||||
/>
|
||||
<t-button
|
||||
class="customer-trigger"
|
||||
variant="outline"
|
||||
:content="customerText"
|
||||
@click="selectorVisible = true"
|
||||
/>
|
||||
<customer-profile-card v-if="customer" :customer="customer" />
|
||||
</section>
|
||||
|
||||
<section v-if="customer && account" class="account-card">
|
||||
<div class="account-caption">当前可用积分</div>
|
||||
<div class="balance" v-text="balanceText" />
|
||||
<div class="account-meta">
|
||||
<span v-text="`账户版本 ${account.version ?? '-'}`" />
|
||||
<span v-text="account.storeId || '当前门店'" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<t-cell-group v-if="customer && account" class="statistics" title="积分统计" theme="card">
|
||||
<t-cell title="累计获得" :note="formatPoints(account.totalEarned)" />
|
||||
<t-cell title="累计撤销" :note="formatPoints(account.totalRevoked)" />
|
||||
<t-cell title="人工调整" :note="formatSignedPoints(account.totalAdjusted)" />
|
||||
</t-cell-group>
|
||||
|
||||
<section v-if="customer" class="actions">
|
||||
<t-button
|
||||
v-can="permissionCodes.point.ledgerRead"
|
||||
variant="outline"
|
||||
@click="toLedger"
|
||||
>
|
||||
查看积分流水
|
||||
</t-button>
|
||||
<t-button
|
||||
v-can="permissionCodes.point.adjust"
|
||||
theme="primary"
|
||||
@click="toAdjust"
|
||||
>
|
||||
人工调整积分
|
||||
</t-button>
|
||||
</section>
|
||||
|
||||
<t-empty
|
||||
v-if="customer && !account"
|
||||
:description="isLoading ? '正在加载积分账户' : '该客户还没有积分流水，积分账户会在首次产生积分时自动创建。'"
|
||||
/>
|
||||
<t-empty v-if="!customer" description="请选择客户查看积分账户" />
|
||||
|
||||
<customer-selector
|
||||
v-model="selectedCustomerId"
|
||||
v-model:visible="selectorVisible"
|
||||
@change="handleCustomerChange"
|
||||
/>
|
||||
<t-popup v-model="storePickerVisible" placement="bottom">
|
||||
<t-picker
|
||||
v-model="storePickerDraft"
|
||||
:columns="storePickerColumns"
|
||||
title="选择门店"
|
||||
@cancel="storePickerVisible = false"
|
||||
@confirm="confirmStorePicker"
|
||||
/>
|
||||
</t-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Toast } from "tdesign-mobile-vue";
|
||||
import { useUserStore } from "timi-web";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import PointAPI from "@/api/PointAPI";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { PointAccount as PointAccountData } from "@/types/Point";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
|
||||
type PickerValue = string | number;
|
||||
|
||||
defineOptions({
|
||||
name: "PointAccount"
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
|
||||
// ---------- 门店 ----------
|
||||
|
||||
const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
|
||||
const selectedStoreId = ref(String(route.query.storeId || ""));
|
||||
const storePickerVisible = ref(false);
|
||||
const storePickerDraft = ref<PickerValue[]>([]);
|
||||
const storePickerColumns = computed(() => [
|
||||
currentStoreStore.storeList
|
||||
.map(item => ({ label: item.name || item.code || "未命名门店", value: item.id || "" }))
|
||||
.filter(item => item.value)
|
||||
]);
|
||||
const selectedStoreName = computed(() => currentStoreStore.storeList.find(item => item.id === selectedStoreId.value)?.name || "请选择门店");
|
||||
|
||||
async function prepareStoreScope(): Promise<void> {
|
||||
if (isGlobalManager.value) {
|
||||
await currentStoreStore.loadStoreList();
|
||||
selectedStoreId.value = currentStoreStore.storeList.some(item => item.id === selectedStoreId.value)
|
||||
? selectedStoreId.value
|
||||
: currentStoreStore.currentStoreId || currentStoreStore.storeList[0]?.id || "";
|
||||
if (selectedStoreId.value) {
|
||||
currentStoreStore.selectStore(selectedStoreId.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function openStorePicker(): void {
|
||||
if (!storePickerColumns.value[0]?.length) {
|
||||
Toast.warning("暂无可选门店");
|
||||
return;
|
||||
}
|
||||
storePickerDraft.value = [selectedStoreId.value];
|
||||
storePickerVisible.value = true;
|
||||
}
|
||||
|
||||
async function confirmStorePicker(value: Array<string | number>): Promise<void> {
|
||||
const storeId = String(value[0] || "");
|
||||
if (storeId) {
|
||||
selectedStoreId.value = storeId;
|
||||
currentStoreStore.selectStore(storeId);
|
||||
await router.replace({
|
||||
name: "PointAccount",
|
||||
query: {
|
||||
...(selectedCustomerId.value ? { customerId: selectedCustomerId.value } : {}),
|
||||
storeId
|
||||
}
|
||||
});
|
||||
await loadAccount();
|
||||
}
|
||||
storePickerVisible.value = false;
|
||||
}
|
||||
|
||||
// ---------- 客户与账户 ----------
|
||||
|
||||
const selectedCustomerId = ref(String(route.query.customerId || ""));
|
||||
const customer = ref<Customer>();
|
||||
const account = ref<PointAccountData>();
|
||||
const selectorVisible = ref(false);
|
||||
const isLoading = ref(false);
|
||||
|
||||
const customerText = computed(() => customer.value?.name || customer.value?.code || "请选择客户");
|
||||
const balanceText = computed(() => formatPoints(account.value?.balance));
|
||||
|
||||
async function handleCustomerChange(value: string | string[]): Promise<void> {
|
||||
selectedCustomerId.value = Array.isArray(value) ? String(value[0] || "") : value;
|
||||
await router.replace({
|
||||
name: "PointAccount",
|
||||
query: selectedCustomerId.value ? { customerId: selectedCustomerId.value, storeId: selectedStoreId.value } : undefined
|
||||
});
|
||||
await loadAccount();
|
||||
}
|
||||
|
||||
async function loadAccount(): Promise<void> {
|
||||
const customerId = selectedCustomerId.value;
|
||||
if (!customerId) {
|
||||
customer.value = undefined;
|
||||
account.value = undefined;
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading.value = true;
|
||||
try {
|
||||
customer.value = await CustomerAPI.detail(customerId);
|
||||
try {
|
||||
account.value = await PointAPI.accountDetail(customerId, selectedStoreId.value || undefined);
|
||||
} catch {
|
||||
account.value = undefined;
|
||||
}
|
||||
} catch {
|
||||
customer.value = undefined;
|
||||
account.value = undefined;
|
||||
Toast.error("客户信息加载失败");
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 导航 ----------
|
||||
|
||||
async function toLedger(): Promise<void> {
|
||||
if (!selectedCustomerId.value) {
|
||||
return;
|
||||
}
|
||||
await router.push({
|
||||
name: "PointLedgerList",
|
||||
query: {
|
||||
customerId: selectedCustomerId.value,
|
||||
accountId: account.value?.id || "",
|
||||
storeId: selectedStoreId.value
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function toAdjust(): Promise<void> {
|
||||
if (!selectedCustomerId.value) {
|
||||
return;
|
||||
}
|
||||
await router.push({
|
||||
name: "PointAdjust",
|
||||
query: { customerId: selectedCustomerId.value, storeId: selectedStoreId.value }
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- 展示 ----------
|
||||
|
||||
function formatPoints(value?: number): string {
|
||||
return `${(value ?? 0).toLocaleString("zh-CN")} 分`;
|
||||
}
|
||||
|
||||
function formatSignedPoints(value?: number): string {
|
||||
const pointValue = value ?? 0;
|
||||
return `${0 < pointValue ? "+" : ""}${pointValue.toLocaleString("zh-CN")} 分`;
|
||||
}
|
||||
|
||||
watch([() => route.query.customerId, () => route.query.storeId], async ([customerIdValue, storeIdValue]) => {
|
||||
const customerId = String(customerIdValue || "");
|
||||
const storeId = String(storeIdValue || "");
|
||||
if (customerId !== selectedCustomerId.value || storeId !== selectedStoreId.value) {
|
||||
selectedCustomerId.value = customerId;
|
||||
selectedStoreId.value = storeId || selectedStoreId.value;
|
||||
await loadAccount();
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await prepareStoreScope();
|
||||
await loadAccount();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.point-account {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
|
||||
flex-direction: column;
|
||||
|
||||
.selector-panel,
|
||||
.account-card {
|
||||
margin: 0 1rem;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1.4rem;
|
||||
}
|
||||
|
||||
.selector-panel {
|
||||
gap: .75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.section-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.customer-trigger {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.customer-profile-card) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.account-card {
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #0f766e, #0f4c5c);
|
||||
|
||||
.account-caption {
|
||||
opacity: .78;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.balance {
|
||||
margin: .5rem 0;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .03em;
|
||||
}
|
||||
|
||||
.account-meta {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
color: rgba(255, 255, 255, .72);
|
||||
font-size: .75rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.statistics {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
gap: .75rem;
|
||||
display: flex;
|
||||
margin: 0 1rem;
|
||||
|
||||
.t-button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.t-empty {
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.point-account {
|
||||
.selector-panel {
|
||||
background: rgba(15, 23, 42, .88);
|
||||
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
||||
}
|
||||
|
||||
.account-card {
|
||||
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,321 @@
|
||||
<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-form-item v-if="isGlobalManager" label="门店" required-mark>
|
||||
<t-button
|
||||
class="picker-button"
|
||||
variant="outline"
|
||||
:content="selectedStoreName"
|
||||
@click="openStorePicker"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="客户" required-mark>
|
||||
<t-button
|
||||
class="picker-button"
|
||||
variant="outline"
|
||||
:content="customerText"
|
||||
@click="selectorVisible = true"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-cell v-if="selectedCustomer" class="selected-customer" :title="customerText" :description="balanceText" />
|
||||
<t-form-item label="调整积分" required-mark>
|
||||
<t-input
|
||||
v-model.trim="pointDeltaText"
|
||||
type="number"
|
||||
align="right"
|
||||
placeholder="正数加分，负数扣分"
|
||||
borderless
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="调整原因" required-mark>
|
||||
<t-textarea
|
||||
v-model.trim="remark"
|
||||
:autosize="{ minRows: 4, maxRows: 7 }"
|
||||
placeholder="例如：服务补偿、活动补发、异常扣除"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="幂等请求 ID" content-align="right">
|
||||
<span class="request-id" v-text="adjustRequestId" />
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<div class="bottom-actions">
|
||||
<t-button theme="primary" :loading="isSaving" :disabled="!canSubmit" @click="submitAdjust">
|
||||
提交调整
|
||||
</t-button>
|
||||
</div>
|
||||
<customer-selector
|
||||
v-model="selectedCustomerId"
|
||||
v-model:visible="selectorVisible"
|
||||
@change="handleCustomerChange"
|
||||
/>
|
||||
<t-popup v-model="storePickerVisible" placement="bottom">
|
||||
<t-picker
|
||||
v-model="storePickerDraft"
|
||||
:columns="storePickerColumns"
|
||||
title="选择门店"
|
||||
@cancel="storePickerVisible = false"
|
||||
@confirm="confirmStorePicker"
|
||||
/>
|
||||
</t-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Toast } from "tdesign-mobile-vue";
|
||||
import { useUserStore } from "timi-web";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import PointAPI from "@/api/PointAPI";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { PointAccount } from "@/types/Point";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
|
||||
type PickerValue = string | number;
|
||||
|
||||
defineOptions({
|
||||
name: "PointAdjust"
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
|
||||
// ---------- 权限与门店 ----------
|
||||
|
||||
const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
|
||||
const selectedStoreId = ref(String(route.query.storeId || ""));
|
||||
const storePickerVisible = ref(false);
|
||||
const storePickerDraft = ref<PickerValue[]>([]);
|
||||
const storePickerColumns = computed(() => [
|
||||
currentStoreStore.storeList
|
||||
.map(item => ({
|
||||
label: item.name || item.code || "未命名门店",
|
||||
value: item.id || ""
|
||||
}))
|
||||
.filter(item => item.value)
|
||||
]);
|
||||
const selectedStoreName = computed(() => currentStoreStore.storeList.find(item => item.id === selectedStoreId.value)?.name || "请选择门店");
|
||||
|
||||
async function prepareStoreScope(): Promise<void> {
|
||||
if (isGlobalManager.value) {
|
||||
await currentStoreStore.loadStoreList();
|
||||
if (!currentStoreStore.storeList.some(item => item.id === selectedStoreId.value)) {
|
||||
selectedStoreId.value = currentStoreStore.currentStoreId || currentStoreStore.storeList[0]?.id || "";
|
||||
}
|
||||
if (selectedStoreId.value) {
|
||||
currentStoreStore.selectStore(selectedStoreId.value);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const store = await currentStoreStore.loadLoginStore();
|
||||
selectedStoreId.value = store?.id || "";
|
||||
}
|
||||
|
||||
function openStorePicker(): void {
|
||||
if (!currentStoreStore.storeList.length) {
|
||||
Toast.warning("暂无可选门店");
|
||||
return;
|
||||
}
|
||||
storePickerDraft.value = [selectedStoreId.value];
|
||||
storePickerVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmStorePicker(value: Array<string | number>): void {
|
||||
const storeId = String(value[0] || "");
|
||||
if (storeId) {
|
||||
selectedStoreId.value = storeId;
|
||||
currentStoreStore.selectStore(storeId);
|
||||
}
|
||||
storePickerVisible.value = false;
|
||||
void loadCustomerAccount();
|
||||
}
|
||||
|
||||
// ---------- 客户与账户 ----------
|
||||
|
||||
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> {
|
||||
selectedCustomerId.value = Array.isArray(value) ? String(value[0] || "") : value;
|
||||
await loadCustomerAccount();
|
||||
}
|
||||
|
||||
async function loadCustomerAccount(): Promise<void> {
|
||||
if (!selectedCustomerId.value) {
|
||||
selectedCustomer.value = undefined;
|
||||
account.value = undefined;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
selectedCustomer.value = await CustomerAPI.detail(selectedCustomerId.value);
|
||||
if (userStore.hasPermissions(permissionCodes.point.accountRead)) {
|
||||
try {
|
||||
account.value = await PointAPI.accountDetail(selectedCustomerId.value, selectedStoreId.value || undefined);
|
||||
} catch {
|
||||
account.value = undefined;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
selectedCustomer.value = undefined;
|
||||
account.value = undefined;
|
||||
Toast.error("客户信息加载失败");
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 调整表单 ----------
|
||||
|
||||
const pointDeltaText = ref("");
|
||||
const remark = ref("");
|
||||
const adjustRequestId = ref(generateRequestId());
|
||||
const isSaving = ref(false);
|
||||
const canSubmit = computed(() => !!selectedCustomerId.value && !!selectedStoreId.value && !!parsePointDelta() && !!remark.value.trim());
|
||||
|
||||
function parsePointDelta(): number {
|
||||
const value = Number(pointDeltaText.value);
|
||||
return Number.isSafeInteger(value) ? value : 0;
|
||||
}
|
||||
|
||||
async function submitAdjust(): Promise<void> {
|
||||
const pointDelta = parsePointDelta();
|
||||
if (!selectedCustomerId.value) {
|
||||
Toast.warning("请选择客户");
|
||||
return;
|
||||
}
|
||||
if (!selectedStoreId.value) {
|
||||
Toast.warning("请选择门店");
|
||||
return;
|
||||
}
|
||||
if (!pointDelta) {
|
||||
Toast.warning("调整积分不能为 0，且必须是整数");
|
||||
return;
|
||||
}
|
||||
if (!remark.value.trim()) {
|
||||
Toast.warning("请填写调整原因");
|
||||
return;
|
||||
}
|
||||
if (pointDelta < 0 && Math.abs(pointDelta) > (account.value?.balance ?? 0)) {
|
||||
Toast.warning("扣分后余额不能小于 0");
|
||||
return;
|
||||
}
|
||||
|
||||
isSaving.value = true;
|
||||
try {
|
||||
await PointAPI.adjust({
|
||||
adjustRequestId: adjustRequestId.value,
|
||||
storeId: selectedStoreId.value,
|
||||
customerId: selectedCustomerId.value,
|
||||
pointDelta,
|
||||
remark: remark.value.trim()
|
||||
});
|
||||
Toast.success("积分调整已提交");
|
||||
await router.replace({
|
||||
name: "PointLedgerList",
|
||||
query: {
|
||||
customerId: selectedCustomerId.value,
|
||||
storeId: selectedStoreId.value
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
Toast.error(getErrorMessage(error, "积分调整失败"));
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function generateRequestId(): string {
|
||||
return `point-adjust-${Date.now()}-${Math.floor(Math.random() * 1000000)}`;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await prepareStoreScope();
|
||||
await loadCustomerAccount();
|
||||
} catch (error) {
|
||||
Toast.error(getErrorMessage(error, "门店信息加载失败"));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin: 0 1rem;
|
||||
padding: .5rem 0;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1.4rem;
|
||||
|
||||
.picker-button {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.selected-customer {
|
||||
margin: 0 .75rem .5rem;
|
||||
border-radius: .875rem;
|
||||
}
|
||||
|
||||
.request-id {
|
||||
color: #52607a;
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
||||
position: fixed;
|
||||
|
||||
.t-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.point-adjust {
|
||||
.notice {
|
||||
color: #a5f3fc;
|
||||
background: rgba(8, 47, 73, .72);
|
||||
}
|
||||
|
||||
.form {
|
||||
background: rgba(15, 23, 42, .88);
|
||||
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
||||
|
||||
.request-id {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,547 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.point.ledgerRead" class="point-ledger-list">
|
||||
<div class="filters">
|
||||
<t-button
|
||||
class="customer-filter"
|
||||
variant="outline"
|
||||
:content="customerFilterText"
|
||||
@click="selectorVisible = true"
|
||||
/>
|
||||
<t-dropdown-menu>
|
||||
<t-dropdown-item
|
||||
v-if="isGlobalManager"
|
||||
v-model="selectedStoreId"
|
||||
:label="selectedStoreName"
|
||||
:options="storeOptions"
|
||||
@change="selectStore"
|
||||
/>
|
||||
<t-dropdown-item
|
||||
v-model="changeTypeFilter"
|
||||
label="流水类型"
|
||||
:options="changeTypeOptions"
|
||||
@change="selectChangeType"
|
||||
/>
|
||||
<t-dropdown-item
|
||||
v-model="dateFilter"
|
||||
:label="dateFilterLabel"
|
||||
:options="dateFilterOptions"
|
||||
@change="selectDateFilter"
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<div v-if="isCustomDate" class="date-range">
|
||||
<t-button variant="outline" :content="dateRange[0] || '开始时间'" @click="startDateVisible = true" />
|
||||
<span>至</span>
|
||||
<t-button variant="outline" :content="dateRange[1] || '结束时间'" @click="endDateVisible = true" />
|
||||
</div>
|
||||
<section v-if="customer" class="customer-summary">
|
||||
<div class="customer-name" v-text="customer.name || customer.code || '未命名客户'" />
|
||||
<div class="customer-id" v-text="`客户 ID：${customer.id}`" />
|
||||
<t-button
|
||||
v-can="permissionCodes.point.adjust"
|
||||
theme="primary"
|
||||
size="small"
|
||||
@click="toAdjust"
|
||||
>
|
||||
人工调整
|
||||
</t-button>
|
||||
</section>
|
||||
<t-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="reload"
|
||||
@scrolltolower="load"
|
||||
>
|
||||
<t-cell-group v-if="pageResult.list.length" class="ledger-list" theme="card">
|
||||
<t-cell
|
||||
v-for="item in pageResult.list"
|
||||
:key="item.id"
|
||||
class="ledger-item"
|
||||
:title="getLedgerTitle(item)"
|
||||
:description="getLedgerDescription(item)"
|
||||
:note="getLedgerTime(item)"
|
||||
:arrow="!!item.eventRecordId"
|
||||
:hover="!!item.eventRecordId"
|
||||
@click="toRecord(item)"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<div class="type-icon" :class="getLedgerTheme(item)" v-text="getLedgerShortType(item)" />
|
||||
</template>
|
||||
<template #extra>
|
||||
<div class="delta" :class="getLedgerTheme(item)" v-text="getLedgerDelta(item)" />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="empty" v-text="isLoading ? '正在加载积分流水' : '暂无积分流水'" />
|
||||
<div class="load-state" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
<customer-selector
|
||||
v-model="selectedCustomerId"
|
||||
v-model:visible="selectorVisible"
|
||||
@change="handleCustomerChange"
|
||||
/>
|
||||
<t-popup v-model="startDateVisible" placement="bottom">
|
||||
<t-date-time-picker
|
||||
v-model="dateRange[0]"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
:mode="['date', 'minute']"
|
||||
title="开始时间"
|
||||
@cancel="startDateVisible = false"
|
||||
@confirm="confirmDateRange"
|
||||
/>
|
||||
</t-popup>
|
||||
<t-popup v-model="endDateVisible" placement="bottom">
|
||||
<t-date-time-picker
|
||||
v-model="dateRange[1]"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
:mode="['date', 'minute']"
|
||||
title="结束时间"
|
||||
@cancel="endDateVisible = false"
|
||||
@confirm="confirmDateRange"
|
||||
/>
|
||||
</t-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Toast, type DropdownValue } from "tdesign-mobile-vue";
|
||||
import { Time, type PageResult, useUserStore } from "timi-web";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import PointAPI from "@/api/PointAPI";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { PointLedger, PointLedgerChangeType, PointLedgerPage } from "@/types/Point";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
|
||||
type DateFilter = "all" | "today" | "last7" | "last30" | "custom";
|
||||
const allStoresValue = "__ALL_STORES__";
|
||||
|
||||
defineOptions({
|
||||
name: "PointLedgerList"
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
|
||||
// ---------- 筛选 ----------
|
||||
|
||||
const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
|
||||
const selectedStoreId = ref(String(route.query.storeId || allStoresValue));
|
||||
const selectedCustomerId = ref(String(route.query.customerId || ""));
|
||||
const selectedAccountId = ref(String(route.query.accountId || ""));
|
||||
const customer = ref<Customer>();
|
||||
const selectorVisible = ref(false);
|
||||
const changeTypeFilter = ref("ALL");
|
||||
const dateFilter = ref<DateFilter>("last30");
|
||||
const dateRange = ref<[string, string]>(buildDateRange(dateFilter.value));
|
||||
const startDateVisible = ref(false);
|
||||
const endDateVisible = ref(false);
|
||||
const changeTypeOptions = [
|
||||
{ label: "全部类型", value: "ALL" },
|
||||
{ label: "获得 EARN", value: "EARN" },
|
||||
{ label: "撤销 REVOKE", value: "REVOKE" },
|
||||
{ label: "调整 ADJUST", value: "ADJUST" }
|
||||
];
|
||||
const dateFilterOptions = [
|
||||
{ label: "全部时间", value: "all" },
|
||||
{ label: "今天", value: "today" },
|
||||
{ label: "近 7 天", value: "last7" },
|
||||
{ label: "近 30 天", value: "last30" },
|
||||
{ label: "自定义", value: "custom" }
|
||||
];
|
||||
const storeOptions = computed(() => [
|
||||
{ label: "全部门店", value: allStoresValue },
|
||||
...currentStoreStore.storeList
|
||||
.map(item => ({
|
||||
label: item.name || item.code || "未命名门店",
|
||||
value: item.id || ""
|
||||
}))
|
||||
.filter(item => item.value)
|
||||
]);
|
||||
const selectedStoreName = computed(() => storeOptions.value.find(item => item.value === selectedStoreId.value)?.label || "全部门店");
|
||||
const customerFilterText = computed(() => customer.value?.name || customer.value?.code || "全部客户");
|
||||
const dateFilterLabel = computed(() => dateFilterOptions.find(item => item.value === dateFilter.value)?.label || "时间范围");
|
||||
const isCustomDate = computed(() => dateFilter.value === "custom");
|
||||
|
||||
async function handleCustomerChange(value: string | string[]): Promise<void> {
|
||||
selectedCustomerId.value = Array.isArray(value) ? String(value[0] || "") : value;
|
||||
if (selectedCustomerId.value) {
|
||||
customer.value = await CustomerAPI.detail(selectedCustomerId.value);
|
||||
} else {
|
||||
customer.value = undefined;
|
||||
}
|
||||
await reload();
|
||||
}
|
||||
|
||||
async function selectStore(value: DropdownValue): Promise<void> {
|
||||
if (Array.isArray(value)) {
|
||||
return;
|
||||
}
|
||||
selectedStoreId.value = String(value);
|
||||
if (selectedStoreId.value !== allStoresValue) {
|
||||
currentStoreStore.selectStore(selectedStoreId.value);
|
||||
}
|
||||
await reload();
|
||||
}
|
||||
|
||||
async function selectChangeType(value: DropdownValue): Promise<void> {
|
||||
if (Array.isArray(value)) {
|
||||
return;
|
||||
}
|
||||
changeTypeFilter.value = String(value);
|
||||
await reload();
|
||||
}
|
||||
|
||||
async function selectDateFilter(value: DropdownValue): Promise<void> {
|
||||
if (Array.isArray(value)) {
|
||||
return;
|
||||
}
|
||||
dateFilter.value = String(value) as DateFilter;
|
||||
if (!isCustomDate.value) {
|
||||
dateRange.value = buildDateRange(dateFilter.value);
|
||||
await reload();
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDateRange(): Promise<void> {
|
||||
startDateVisible.value = false;
|
||||
endDateVisible.value = false;
|
||||
if (dateRange.value[0] && dateRange.value[1] && dateRange.value[1] < dateRange.value[0]) {
|
||||
dateRange.value = [dateRange.value[1], dateRange.value[0]];
|
||||
}
|
||||
await reload();
|
||||
}
|
||||
|
||||
// ---------- 分页 ----------
|
||||
|
||||
const page = reactive<PointLedgerPage>({
|
||||
index: 0,
|
||||
size: 20
|
||||
});
|
||||
const pageResult = reactive<PageResult<PointLedger>>({
|
||||
total: 0,
|
||||
list: []
|
||||
});
|
||||
const isLoading = ref(false);
|
||||
const isRefreshing = ref(false);
|
||||
const isNoMore = ref(false);
|
||||
let loadToken = 0;
|
||||
|
||||
const loadStateText = computed(() => {
|
||||
if (isLoading.value) {
|
||||
return "正在加载更多";
|
||||
}
|
||||
if (isNoMore.value) {
|
||||
return pageResult.list.length ? `共 ${pageResult.total} 条流水` : "";
|
||||
}
|
||||
return "上拉加载更多";
|
||||
});
|
||||
|
||||
async function reload(): Promise<void> {
|
||||
isRefreshing.value = true;
|
||||
try {
|
||||
page.index = 0;
|
||||
pageResult.total = 0;
|
||||
pageResult.list = [];
|
||||
isNoMore.value = false;
|
||||
await load();
|
||||
} finally {
|
||||
isRefreshing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function load(): Promise<void> {
|
||||
if (isLoading.value || isNoMore.value) {
|
||||
return;
|
||||
}
|
||||
const token = loadToken + 1;
|
||||
loadToken = token;
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const result = await PointAPI.ledgerList(buildRequest(), buildListOptions());
|
||||
if (token !== loadToken) {
|
||||
return;
|
||||
}
|
||||
const list = result.list || [];
|
||||
pageResult.list = pageResult.list.concat(list);
|
||||
pageResult.total = result.total || 0;
|
||||
page.index += 1;
|
||||
isNoMore.value = pageResult.list.length >= pageResult.total || list.length < page.size;
|
||||
} catch {
|
||||
Toast.error("积分流水加载失败");
|
||||
} finally {
|
||||
if (token === loadToken) {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function buildRequest(): PointLedgerPage {
|
||||
const [beginAt, endAt] = buildUnixRange();
|
||||
return {
|
||||
index: page.index,
|
||||
size: page.size,
|
||||
customerId: selectedCustomerId.value || undefined,
|
||||
accountId: selectedAccountId.value || undefined,
|
||||
changeType: changeTypeFilter.value === "ALL" ? undefined : changeTypeFilter.value as PointLedgerChangeType,
|
||||
beginAt,
|
||||
endAt
|
||||
};
|
||||
}
|
||||
|
||||
function buildListOptions(): { allStores?: boolean; storeId?: string } | undefined {
|
||||
if (!isGlobalManager.value) {
|
||||
return undefined;
|
||||
}
|
||||
return selectedStoreId.value === allStoresValue ? { allStores: true } : { storeId: selectedStoreId.value };
|
||||
}
|
||||
|
||||
// ---------- 展示与导航 ----------
|
||||
|
||||
function getLedgerTitle(item: PointLedger): string {
|
||||
if (item.changeType === "EARN") {
|
||||
return "登记事件获得积分";
|
||||
}
|
||||
if (item.changeType === "REVOKE") {
|
||||
return "删除登记记录撤销积分";
|
||||
}
|
||||
return "人工调整积分";
|
||||
}
|
||||
|
||||
function getLedgerDescription(item: PointLedger): string {
|
||||
const parts = [`余额 ${item.balanceBefore ?? 0} → ${item.balanceAfter ?? 0}`];
|
||||
if (item.remark) {
|
||||
parts.push(item.remark);
|
||||
}
|
||||
if (item.eventRecordId) {
|
||||
parts.push(`记录 ${item.eventRecordId}`);
|
||||
}
|
||||
return parts.join("｜");
|
||||
}
|
||||
|
||||
function getLedgerTime(item: PointLedger): string {
|
||||
return item.occurredAt ? Time.toPassedDateTime(item.occurredAt) : "未知时间";
|
||||
}
|
||||
|
||||
function getLedgerDelta(item: PointLedger): string {
|
||||
const value = item.pointDelta ?? 0;
|
||||
return `${0 < value ? "+" : ""}${value} 分`;
|
||||
}
|
||||
|
||||
function getLedgerShortType(item: PointLedger): string {
|
||||
return item.changeType === "EARN" ? "得" : item.changeType === "REVOKE" ? "撤" : "调";
|
||||
}
|
||||
|
||||
function getLedgerTheme(item: PointLedger): string {
|
||||
return item.pointDelta && 0 < item.pointDelta ? "increase" : "decrease";
|
||||
}
|
||||
|
||||
async function toRecord(item: PointLedger): Promise<void> {
|
||||
if (item.eventRecordId) {
|
||||
await router.push(`/management/registration-event-records/${item.eventRecordId}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function toAdjust(): Promise<void> {
|
||||
await router.push({
|
||||
name: "PointAdjust",
|
||||
query: {
|
||||
customerId: selectedCustomerId.value,
|
||||
storeId: selectedStoreId.value === allStoresValue ? "" : selectedStoreId.value
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- 时间 ----------
|
||||
|
||||
function buildDateRange(type: DateFilter): [string, string] {
|
||||
if (type === "all") {
|
||||
return ["", ""];
|
||||
}
|
||||
const end = new Date();
|
||||
end.setHours(23, 59, 0, 0);
|
||||
if (type === "custom") {
|
||||
return ["", Time.formatDateTime(end)];
|
||||
}
|
||||
const begin = new Date(end);
|
||||
const dayCount = type === "today" ? 0 : type === "last7" ? 6 : 29;
|
||||
begin.setDate(begin.getDate() - dayCount);
|
||||
begin.setHours(0, 0, 0, 0);
|
||||
return [Time.formatDateTime(begin), Time.formatDateTime(end)];
|
||||
}
|
||||
|
||||
function buildUnixRange(): [number, number] {
|
||||
if (!dateRange.value[0] && !dateRange.value[1]) {
|
||||
return [0, Date.now()];
|
||||
}
|
||||
return [toTimestamp(dateRange.value[0], false), toTimestamp(dateRange.value[1], true)];
|
||||
}
|
||||
|
||||
function toTimestamp(value: string, isEnd: boolean): number {
|
||||
if (!value) {
|
||||
return isEnd ? Date.now() : 0;
|
||||
}
|
||||
const [dateText, timeText = isEnd ? "23:59" : "00:00"] = value.split(" ");
|
||||
const [year, month, day] = dateText.split("-").map(Number);
|
||||
const [hour, minute] = timeText.split(":").map(Number);
|
||||
return new Date(year, month - 1, day, hour || 0, minute || 0, isEnd ? 59 : 0).getTime();
|
||||
}
|
||||
|
||||
// ---------- 页面数据 ----------
|
||||
|
||||
async function preparePage(): Promise<void> {
|
||||
if (isGlobalManager.value) {
|
||||
await currentStoreStore.loadStoreList();
|
||||
const routeStoreId = String(route.query.storeId || "");
|
||||
if (routeStoreId && routeStoreId !== allStoresValue && currentStoreStore.storeList.some(item => item.id === routeStoreId)) {
|
||||
selectedStoreId.value = routeStoreId;
|
||||
currentStoreStore.selectStore(routeStoreId);
|
||||
}
|
||||
} else {
|
||||
const store = await currentStoreStore.loadLoginStore();
|
||||
selectedStoreId.value = store?.id || "";
|
||||
}
|
||||
if (selectedCustomerId.value) {
|
||||
customer.value = await CustomerAPI.detail(selectedCustomerId.value);
|
||||
}
|
||||
await reload();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await preparePage();
|
||||
} catch {
|
||||
Toast.error("积分流水页面加载失败");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.point-ledger-list {
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
|
||||
|
||||
.filters {
|
||||
gap: .75rem;
|
||||
padding: 0 1rem .75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.customer-filter {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.t-dropdown-menu) {
|
||||
margin: 0 -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.date-range {
|
||||
gap: .5rem;
|
||||
padding: 0 1rem .75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.t-button {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #52607a;
|
||||
}
|
||||
}
|
||||
|
||||
.customer-summary {
|
||||
gap: .5rem;
|
||||
margin: 0 1rem 1rem;
|
||||
padding: .875rem 1rem;
|
||||
display: grid;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
border-radius: 1rem;
|
||||
|
||||
.customer-name {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.customer-id {
|
||||
color: #52607a;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.t-button {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.ledger-list {
|
||||
margin: 0 1rem;
|
||||
|
||||
.ledger-item {
|
||||
--td-cell-horizontal-padding: .75rem;
|
||||
|
||||
.type-icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
border-radius: .75rem;
|
||||
align-items: center;
|
||||
font-size: .875rem;
|
||||
font-weight: 700;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.delta {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.increase {
|
||||
color: #059669;
|
||||
background: #d1fae5;
|
||||
}
|
||||
|
||||
.decrease {
|
||||
color: #dc2626;
|
||||
background: #fee2e2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: #52607a;
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.point-ledger-list {
|
||||
.date-range span,
|
||||
.customer-id,
|
||||
.empty {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.customer-summary {
|
||||
background: rgba(15, 23, 42, .88);
|
||||
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
||||
}
|
||||
|
||||
.increase {
|
||||
color: #6ee7b7;
|
||||
background: rgba(6, 78, 59, .56);
|
||||
}
|
||||
|
||||
.decrease {
|
||||
color: #fca5a5;
|
||||
background: rgba(127, 29, 29, .56);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,695 @@
|
||||
<template>
|
||||
<div v-can="pageAccess" class="point-rule-edit">
|
||||
<t-form class="form" label-align="left">
|
||||
<t-form-item v-if="isGlobalManager" label="门店" required-mark :arrow="isCreateMode" @click="openStorePicker">
|
||||
<span class="picker-text" v-text="selectedStoreName" />
|
||||
</t-form-item>
|
||||
<t-form-item label="登记事件" required-mark arrow @click="openEventPicker">
|
||||
<span class="picker-text" v-text="selectedEventName" />
|
||||
</t-form-item>
|
||||
<t-form-item label="规则名称" required-mark>
|
||||
<t-input v-model.trim="formModel.name" borderless placeholder="例如：每次登记加 10 分" />
|
||||
</t-form-item>
|
||||
<t-form-item label="规则状态" arrow @click="openStatusPicker">
|
||||
<span class="picker-text" v-text="getStatusText(formModel.status)" />
|
||||
</t-form-item>
|
||||
<t-form-item label="触发类型" arrow @click="openTriggerPicker">
|
||||
<span class="picker-text" v-text="getTriggerText(formModel.triggerType)" />
|
||||
</t-form-item>
|
||||
<t-form-item label="积分值模式" arrow @click="openModePicker">
|
||||
<span class="picker-text" v-text="getModeText(formModel.pointMode)" />
|
||||
</t-form-item>
|
||||
<t-form-item v-if="formModel.pointMode === 'FIXED'" label="固定积分" required-mark>
|
||||
<t-input
|
||||
v-model.trim="formModel.pointValueText"
|
||||
type="number"
|
||||
align="right"
|
||||
borderless
|
||||
placeholder="请输入正整数"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item v-if="formModel.triggerType === 'AFTER_COUNT_EVERY_TIME'" label="触发阈值" required-mark>
|
||||
<t-input
|
||||
v-model.trim="formModel.thresholdText"
|
||||
type="number"
|
||||
align="right"
|
||||
borderless
|
||||
placeholder="累计登记达到几次"
|
||||
/>
|
||||
</t-form-item>
|
||||
<div v-if="formModel.pointMode === 'SOURCE_VALUE'" class="source-condition">
|
||||
<div class="source-title">自定义积分范围</div>
|
||||
<div class="source-inputs">
|
||||
<t-input v-model.trim="formModel.minText" type="number" align="right" borderless placeholder="最小值" />
|
||||
<span>至</span>
|
||||
<t-input v-model.trim="formModel.maxText" type="number" align="right" borderless placeholder="最大值" />
|
||||
</div>
|
||||
<p>登记时只有输入在此范围内的正整数，后端才会按本规则发放积分。</p>
|
||||
</div>
|
||||
<t-form-item label="生效开始" arrow @click="openBeginAtPicker">
|
||||
<div class="time-value">
|
||||
<span class="picker-text" v-text="formModel.beginAtText || '不限'" />
|
||||
<t-button v-if="formModel.beginAtText" size="extra-small" content="不限" @click.stop="clearBeginAt" />
|
||||
</div>
|
||||
</t-form-item>
|
||||
<t-form-item label="生效结束" arrow @click="openEndAtPicker">
|
||||
<div class="time-value">
|
||||
<span class="picker-text" v-text="formModel.endAtText || '不限'" />
|
||||
<t-button v-if="formModel.endAtText" size="extra-small" content="不限" @click.stop="clearEndAt" />
|
||||
</div>
|
||||
</t-form-item>
|
||||
<t-form-item label="优先级" required-mark>
|
||||
<t-input v-model.trim="formModel.priorityText" type="number" align="right" borderless placeholder="数值越小越优先" />
|
||||
</t-form-item>
|
||||
<t-form-item label="独占匹配" content-align="right">
|
||||
<t-switch v-model="formModel.exclusive" />
|
||||
</t-form-item>
|
||||
<t-form-item label="规则备注">
|
||||
<t-textarea v-model.trim="formModel.remark" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="规则说明" />
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<div class="bottom-actions">
|
||||
<t-button
|
||||
v-if="!isCreateMode"
|
||||
v-can="permissionCodes.pointRule.delete"
|
||||
class="delete"
|
||||
theme="danger"
|
||||
variant="outline"
|
||||
:loading="isRemoving"
|
||||
@click="confirmRemove"
|
||||
>
|
||||
删除
|
||||
</t-button>
|
||||
<t-button
|
||||
v-can="savePermissionCode"
|
||||
class="save"
|
||||
theme="primary"
|
||||
:loading="isSaving"
|
||||
@click="saveRule"
|
||||
>
|
||||
保存
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
<t-popup v-model="storePickerVisible" placement="bottom">
|
||||
<t-picker
|
||||
v-model="storePickerDraft"
|
||||
:columns="storePickerColumns"
|
||||
title="选择门店"
|
||||
@cancel="storePickerVisible = false"
|
||||
@confirm="confirmStorePicker"
|
||||
/>
|
||||
</t-popup>
|
||||
<t-popup v-model="eventPickerVisible" placement="bottom">
|
||||
<t-picker
|
||||
v-model="eventPickerDraft"
|
||||
:columns="eventPickerColumns"
|
||||
title="选择登记事件"
|
||||
@cancel="eventPickerVisible = false"
|
||||
@confirm="confirmEventPicker"
|
||||
/>
|
||||
</t-popup>
|
||||
<t-popup v-model="statusPickerVisible" placement="bottom">
|
||||
<t-picker
|
||||
v-model="statusPickerDraft"
|
||||
:columns="statusPickerColumns"
|
||||
title="规则状态"
|
||||
@cancel="statusPickerVisible = false"
|
||||
@confirm="confirmStatusPicker"
|
||||
/>
|
||||
</t-popup>
|
||||
<t-popup v-model="triggerPickerVisible" placement="bottom">
|
||||
<t-picker
|
||||
v-model="triggerPickerDraft"
|
||||
:columns="triggerPickerColumns"
|
||||
title="触发类型"
|
||||
@cancel="triggerPickerVisible = false"
|
||||
@confirm="confirmTriggerPicker"
|
||||
/>
|
||||
</t-popup>
|
||||
<t-popup v-model="modePickerVisible" placement="bottom">
|
||||
<t-picker
|
||||
v-model="modePickerDraft"
|
||||
:columns="modePickerColumns"
|
||||
title="积分值模式"
|
||||
@cancel="modePickerVisible = false"
|
||||
@confirm="confirmModePicker"
|
||||
/>
|
||||
</t-popup>
|
||||
<t-popup v-model="beginAtPickerVisible" placement="bottom">
|
||||
<t-date-time-picker
|
||||
v-model="beginAtDraftText"
|
||||
:start="minimumDateTimeText"
|
||||
:mode="['date', 'minute']"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
title="生效开始"
|
||||
@cancel="beginAtPickerVisible = false"
|
||||
@confirm="confirmBeginAt"
|
||||
/>
|
||||
</t-popup>
|
||||
<t-popup v-model="endAtPickerVisible" placement="bottom">
|
||||
<t-date-time-picker
|
||||
v-model="endAtDraftText"
|
||||
:start="endAtMinimumDateTimeText"
|
||||
:mode="['date', 'minute']"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
title="生效结束"
|
||||
@cancel="endAtPickerVisible = false"
|
||||
@confirm="confirmEndAt"
|
||||
/>
|
||||
</t-popup>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DialogPlugin, Toast } from "tdesign-mobile-vue";
|
||||
import { Time, useUserStore } from "timi-web";
|
||||
import EventAPI from "@/api/EventAPI";
|
||||
import PointAPI from "@/api/PointAPI";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import type { EventItem } from "@/types/EventItem";
|
||||
import type { PointRule, PointRuleMode, PointRuleStatus, PointRuleTriggerType } from "@/types/Point";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
|
||||
type PickerValue = string | number;
|
||||
|
||||
defineOptions({
|
||||
name: "PointRuleEdit"
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
const routeId = computed(() => String(route.params.id || ""));
|
||||
const isCreateMode = computed(() => !routeId.value);
|
||||
const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
|
||||
const savePermissionCode = computed(() => isCreateMode.value ? permissionCodes.pointRule.create : permissionCodes.pointRule.update);
|
||||
const pageAccess = computed(() => ({
|
||||
value: [permissionCodes.pointRule.read, savePermissionCode.value],
|
||||
mode: "and" as const
|
||||
}));
|
||||
|
||||
// ---------- 基础表单 ----------
|
||||
|
||||
const isSaving = ref(false);
|
||||
const isRemoving = ref(false);
|
||||
const formModel = reactive({
|
||||
id: "",
|
||||
storeId: "",
|
||||
eventId: "",
|
||||
name: "",
|
||||
status: "DRAFT" as PointRuleStatus,
|
||||
triggerType: "EVERY_TIME" as PointRuleTriggerType,
|
||||
pointMode: "FIXED" as PointRuleMode,
|
||||
pointValueText: "",
|
||||
thresholdText: "",
|
||||
minText: "",
|
||||
maxText: "",
|
||||
beginAtText: "",
|
||||
endAtText: "",
|
||||
priorityText: "0",
|
||||
exclusive: false,
|
||||
remark: ""
|
||||
});
|
||||
|
||||
// ---------- 门店与事件 ----------
|
||||
|
||||
const eventList = ref<EventItem[]>([]);
|
||||
const selectedStoreName = computed(() => currentStoreStore.storeList.find(item => item.id === formModel.storeId)?.name || "请选择门店");
|
||||
const selectedEventName = computed(() => eventList.value.find(item => item.id === formModel.eventId)?.name || (formModel.eventId ? `事件 ${formModel.eventId}` : "请选择登记事件"));
|
||||
const storePickerVisible = ref(false);
|
||||
const storePickerDraft = ref<PickerValue[]>([]);
|
||||
const storePickerColumns = computed(() => [
|
||||
currentStoreStore.storeList
|
||||
.map(item => ({ label: item.name || item.code || "未命名门店", value: item.id || "" }))
|
||||
.filter(item => item.value)
|
||||
]);
|
||||
const eventPickerVisible = ref(false);
|
||||
const eventPickerDraft = ref<PickerValue[]>([]);
|
||||
const eventPickerColumns = computed(() => [
|
||||
eventList.value
|
||||
.map(item => ({ label: item.name || "未命名事件", value: item.id || "" }))
|
||||
.filter(item => item.value)
|
||||
]);
|
||||
|
||||
function openStorePicker(): void {
|
||||
if (!isCreateMode.value || !storePickerColumns.value[0]?.length) {
|
||||
return;
|
||||
}
|
||||
storePickerDraft.value = [formModel.storeId];
|
||||
storePickerVisible.value = true;
|
||||
}
|
||||
|
||||
async function confirmStorePicker(value: Array<string | number>): Promise<void> {
|
||||
const storeId = String(value[0] || "");
|
||||
if (storeId) {
|
||||
formModel.storeId = storeId;
|
||||
formModel.eventId = "";
|
||||
try {
|
||||
await loadEventList();
|
||||
} catch {
|
||||
eventList.value = [];
|
||||
Toast.error("登记事件加载失败");
|
||||
}
|
||||
}
|
||||
storePickerVisible.value = false;
|
||||
}
|
||||
|
||||
function openEventPicker(): void {
|
||||
if (!eventPickerColumns.value[0]?.length) {
|
||||
Toast.warning("暂无可选登记事件");
|
||||
return;
|
||||
}
|
||||
eventPickerDraft.value = [formModel.eventId];
|
||||
eventPickerVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmEventPicker(value: Array<string | number>): void {
|
||||
const eventId = String(value[0] || "");
|
||||
if (eventId) {
|
||||
formModel.eventId = eventId;
|
||||
}
|
||||
eventPickerVisible.value = false;
|
||||
}
|
||||
|
||||
async function prepareStoreScope(): Promise<void> {
|
||||
if (isGlobalManager.value) {
|
||||
await currentStoreStore.loadStoreList();
|
||||
const queryStoreId = String(route.query.storeId || "");
|
||||
formModel.storeId = currentStoreStore.storeList.some(item => item.id === queryStoreId)
|
||||
? queryStoreId
|
||||
: currentStoreStore.currentStoreId;
|
||||
return;
|
||||
}
|
||||
const store = await currentStoreStore.loadLoginStore();
|
||||
formModel.storeId = store?.id || "";
|
||||
}
|
||||
|
||||
async function loadEventList(): Promise<void> {
|
||||
const options = isGlobalManager.value ? { storeId: formModel.storeId } : undefined;
|
||||
const result = await EventAPI.list({ index: 0, size: 1000 }, options);
|
||||
eventList.value = result.list || [];
|
||||
if (formModel.eventId && !eventList.value.some(item => item.id === formModel.eventId)) {
|
||||
eventList.value.push(await EventAPI.detail(formModel.eventId));
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 规则选项 ----------
|
||||
|
||||
const statusOptions: Array<{ label: string; value: PointRuleStatus }> = [
|
||||
{ label: "草稿", value: "DRAFT" },
|
||||
{ label: "启用", value: "ACTIVE" },
|
||||
{ label: "停用", value: "INACTIVE" }
|
||||
];
|
||||
const triggerOptions: Array<{ label: string; value: PointRuleTriggerType }> = [
|
||||
{ label: "每次登记", value: "EVERY_TIME" },
|
||||
{ label: "首次登记", value: "FIRST_TIME" },
|
||||
{ label: "达到阈值后每次登记", value: "AFTER_COUNT_EVERY_TIME" },
|
||||
{ label: "登记时自定义积分", value: "SOURCE_VALUE" }
|
||||
];
|
||||
const modeOptions: Array<{ label: string; value: PointRuleMode }> = [
|
||||
{ label: "固定积分", value: "FIXED" },
|
||||
{ label: "使用登记时填写的积分", value: "SOURCE_VALUE" }
|
||||
];
|
||||
const statusPickerVisible = ref(false);
|
||||
const statusPickerDraft = ref<PickerValue[]>([]);
|
||||
const statusPickerColumns = [statusOptions];
|
||||
const triggerPickerVisible = ref(false);
|
||||
const triggerPickerDraft = ref<PickerValue[]>([]);
|
||||
const triggerPickerColumns = [triggerOptions];
|
||||
const modePickerVisible = ref(false);
|
||||
const modePickerDraft = ref<PickerValue[]>([]);
|
||||
const modePickerColumns = [modeOptions];
|
||||
|
||||
function openStatusPicker(): void {
|
||||
statusPickerDraft.value = [formModel.status];
|
||||
statusPickerVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmStatusPicker(value: Array<string | number>): void {
|
||||
const status = value[0];
|
||||
if (typeof status === "string" && statusOptions.some(item => item.value === status)) {
|
||||
formModel.status = status as PointRuleStatus;
|
||||
}
|
||||
statusPickerVisible.value = false;
|
||||
}
|
||||
|
||||
function openTriggerPicker(): void {
|
||||
triggerPickerDraft.value = [formModel.triggerType];
|
||||
triggerPickerVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmTriggerPicker(value: Array<string | number>): void {
|
||||
const triggerType = value[0];
|
||||
if (typeof triggerType === "string" && triggerOptions.some(item => item.value === triggerType)) {
|
||||
formModel.triggerType = triggerType as PointRuleTriggerType;
|
||||
formModel.pointMode = triggerType === "SOURCE_VALUE" ? "SOURCE_VALUE" : "FIXED";
|
||||
}
|
||||
triggerPickerVisible.value = false;
|
||||
}
|
||||
|
||||
function openModePicker(): void {
|
||||
modePickerDraft.value = [formModel.pointMode];
|
||||
modePickerVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmModePicker(value: Array<string | number>): void {
|
||||
const pointMode = value[0];
|
||||
if (pointMode === "FIXED" || pointMode === "SOURCE_VALUE") {
|
||||
formModel.pointMode = pointMode;
|
||||
formModel.triggerType = pointMode === "SOURCE_VALUE" ? "SOURCE_VALUE" : formModel.triggerType === "SOURCE_VALUE" ? "EVERY_TIME" : formModel.triggerType;
|
||||
}
|
||||
modePickerVisible.value = false;
|
||||
}
|
||||
|
||||
function getStatusText(status: PointRuleStatus): string {
|
||||
return statusOptions.find(item => item.value === status)?.label || "草稿";
|
||||
}
|
||||
|
||||
function getTriggerText(triggerType: PointRuleTriggerType): string {
|
||||
return triggerOptions.find(item => item.value === triggerType)?.label || "每次登记";
|
||||
}
|
||||
|
||||
function getModeText(pointMode: PointRuleMode): string {
|
||||
return modeOptions.find(item => item.value === pointMode)?.label || "固定积分";
|
||||
}
|
||||
|
||||
// ---------- 生效时间 ----------
|
||||
|
||||
const minimumDateTimeText = "1970-01-01 00:00";
|
||||
const beginAtPickerVisible = ref(false);
|
||||
const endAtPickerVisible = ref(false);
|
||||
const beginAtDraftText = ref("");
|
||||
const endAtDraftText = ref("");
|
||||
const endAtMinimumDateTimeText = computed(() => formModel.beginAtText || minimumDateTimeText);
|
||||
|
||||
function openBeginAtPicker(): void {
|
||||
beginAtDraftText.value = formModel.beginAtText || Time.formatDateTime(new Date());
|
||||
beginAtPickerVisible.value = true;
|
||||
}
|
||||
|
||||
function openEndAtPicker(): void {
|
||||
endAtDraftText.value = formModel.endAtText || Time.formatDateTime(new Date());
|
||||
endAtPickerVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmBeginAt(value: string | number): void {
|
||||
formModel.beginAtText = String(value);
|
||||
beginAtPickerVisible.value = false;
|
||||
}
|
||||
|
||||
function confirmEndAt(value: string | number): void {
|
||||
formModel.endAtText = String(value);
|
||||
endAtPickerVisible.value = false;
|
||||
}
|
||||
|
||||
function clearBeginAt(): void {
|
||||
formModel.beginAtText = "";
|
||||
beginAtPickerVisible.value = false;
|
||||
}
|
||||
|
||||
function clearEndAt(): void {
|
||||
formModel.endAtText = "";
|
||||
endAtPickerVisible.value = false;
|
||||
}
|
||||
|
||||
// ---------- 保存 ----------
|
||||
|
||||
function resolvePositiveInteger(value: string): number | undefined {
|
||||
const numberValue = Number(value);
|
||||
return Number.isSafeInteger(numberValue) && 0 < numberValue ? numberValue : undefined;
|
||||
}
|
||||
|
||||
function resolveTimestamp(value: string): number | undefined {
|
||||
if (!value.trim()) {
|
||||
return undefined;
|
||||
}
|
||||
const timestamp = new Date(value.replace(" ", "T")).getTime();
|
||||
return Number.isFinite(timestamp) ? timestamp : undefined;
|
||||
}
|
||||
|
||||
function buildCondition(): PointRule["conditionJson"] {
|
||||
if (formModel.pointMode === "SOURCE_VALUE") {
|
||||
return {
|
||||
min: resolvePositiveInteger(formModel.minText),
|
||||
max: resolvePositiveInteger(formModel.maxText)
|
||||
};
|
||||
}
|
||||
if (formModel.triggerType === "FIRST_TIME") {
|
||||
return { scope: "CUSTOMER_EVENT" };
|
||||
}
|
||||
if (formModel.triggerType === "AFTER_COUNT_EVERY_TIME") {
|
||||
return {
|
||||
threshold: resolvePositiveInteger(formModel.thresholdText),
|
||||
includeCurrent: true,
|
||||
scope: "CUSTOMER_EVENT"
|
||||
};
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
function validateForm(): boolean {
|
||||
if (!formModel.storeId) {
|
||||
Toast.warning("请选择门店");
|
||||
return false;
|
||||
}
|
||||
if (!formModel.eventId) {
|
||||
Toast.warning("请选择登记事件");
|
||||
return false;
|
||||
}
|
||||
if (!formModel.name.trim()) {
|
||||
Toast.warning("请输入规则名称");
|
||||
return false;
|
||||
}
|
||||
if (formModel.pointMode === "FIXED" && !resolvePositiveInteger(formModel.pointValueText)) {
|
||||
Toast.warning("固定积分必须是正整数");
|
||||
return false;
|
||||
}
|
||||
if (formModel.triggerType === "AFTER_COUNT_EVERY_TIME" && !resolvePositiveInteger(formModel.thresholdText)) {
|
||||
Toast.warning("请输入有效的触发阈值");
|
||||
return false;
|
||||
}
|
||||
if (formModel.pointMode === "SOURCE_VALUE") {
|
||||
const min = resolvePositiveInteger(formModel.minText);
|
||||
const max = resolvePositiveInteger(formModel.maxText);
|
||||
if (!min || !max || max < min) {
|
||||
Toast.warning("自定义积分范围必须是正整数，且最大值不能小于最小值");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const beginAt = resolveTimestamp(formModel.beginAtText);
|
||||
const endAt = resolveTimestamp(formModel.endAtText);
|
||||
if (beginAt !== undefined && endAt !== undefined && endAt < beginAt) {
|
||||
Toast.warning("生效结束时间不能早于开始时间");
|
||||
return false;
|
||||
}
|
||||
const priority = Number(formModel.priorityText);
|
||||
if (!Number.isSafeInteger(priority) || 0 > priority) {
|
||||
Toast.warning("优先级必须是大于等于 0 的整数");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
async function saveRule(): Promise<void> {
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
isSaving.value = true;
|
||||
try {
|
||||
const payload: PointRule = {
|
||||
id: formModel.id || undefined,
|
||||
storeId: formModel.storeId,
|
||||
eventId: formModel.eventId,
|
||||
name: formModel.name.trim(),
|
||||
status: formModel.status,
|
||||
triggerType: formModel.triggerType,
|
||||
pointMode: formModel.pointMode,
|
||||
pointValue: formModel.pointMode === "FIXED" ? resolvePositiveInteger(formModel.pointValueText) : null,
|
||||
conditionJson: buildCondition(),
|
||||
beginAt: resolveTimestamp(formModel.beginAtText),
|
||||
endAt: resolveTimestamp(formModel.endAtText),
|
||||
priority: Number(formModel.priorityText),
|
||||
exclusive: formModel.exclusive,
|
||||
remark: formModel.remark.trim()
|
||||
};
|
||||
if (isCreateMode.value) {
|
||||
await PointAPI.ruleCreate(payload);
|
||||
} else {
|
||||
await PointAPI.ruleUpdate(payload);
|
||||
}
|
||||
Toast.success("积分规则已保存");
|
||||
await router.replace("/management/points/rules");
|
||||
} catch (error) {
|
||||
Toast.error(getErrorMessage(error, "积分规则保存失败"));
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 删除 ----------
|
||||
|
||||
async function confirmRemove(): Promise<void> {
|
||||
if (!formModel.id || isRemoving.value) {
|
||||
return;
|
||||
}
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "删除积分规则",
|
||||
content: `确定删除规则 ${formModel.name || "未命名规则"} 吗？删除只影响后续登记，不会改变历史流水。`,
|
||||
cancelBtn: "取消",
|
||||
confirmBtn: "删除",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
await removeRule();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function removeRule(): Promise<void> {
|
||||
if (!formModel.id) {
|
||||
return;
|
||||
}
|
||||
isRemoving.value = true;
|
||||
try {
|
||||
await PointAPI.ruleRemove(formModel.id);
|
||||
Toast.success("积分规则已删除");
|
||||
await router.replace("/management/points/rules");
|
||||
} catch (error) {
|
||||
Toast.error(getErrorMessage(error, "积分规则删除失败"));
|
||||
} finally {
|
||||
isRemoving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 页面数据 ----------
|
||||
|
||||
async function fillForm(): Promise<void> {
|
||||
await prepareStoreScope();
|
||||
if (!isCreateMode.value) {
|
||||
const current = await PointAPI.ruleDetail(routeId.value);
|
||||
Object.assign(formModel, {
|
||||
id: current.id || "",
|
||||
storeId: current.storeId || formModel.storeId,
|
||||
eventId: current.eventId || "",
|
||||
name: current.name || "",
|
||||
status: current.status === "ACTIVE" ? "ACTIVE" : current.status === "INACTIVE" ? "INACTIVE" : "DRAFT",
|
||||
triggerType: current.triggerType || "EVERY_TIME",
|
||||
pointMode: current.pointMode || "FIXED",
|
||||
pointValueText: current.pointValue === undefined || current.pointValue === null ? "" : String(current.pointValue),
|
||||
thresholdText: current.conditionJson?.threshold === undefined ? "" : String(current.conditionJson.threshold),
|
||||
minText: current.conditionJson?.min === undefined ? "" : String(current.conditionJson.min),
|
||||
maxText: current.conditionJson?.max === undefined ? "" : String(current.conditionJson.max),
|
||||
beginAtText: current.beginAt ? Time.toDateTime(current.beginAt) : "",
|
||||
endAtText: current.endAt ? Time.toDateTime(current.endAt) : "",
|
||||
priorityText: String(current.priority ?? 0),
|
||||
exclusive: current.exclusive ?? false,
|
||||
remark: current.remark || ""
|
||||
});
|
||||
}
|
||||
await loadEventList();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await fillForm();
|
||||
} catch (error) {
|
||||
Toast.error(getErrorMessage(error, "积分规则加载失败"));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.point-rule-edit {
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 5rem;
|
||||
|
||||
.form {
|
||||
margin: 0 1rem;
|
||||
padding: .5rem 0;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1.4rem;
|
||||
|
||||
.picker-text {
|
||||
color: #52607a;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.time-value {
|
||||
gap: .5rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.source-condition {
|
||||
padding: .75rem 1rem 1rem;
|
||||
|
||||
.source-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.source-inputs {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: .5rem;
|
||||
|
||||
.t-input {
|
||||
flex: 1;
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #52607a;
|
||||
margin: .5rem 0 0;
|
||||
font-size: .75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
gap: .75rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
||||
display: flex;
|
||||
position: fixed;
|
||||
|
||||
.delete {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.save {
|
||||
flex: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.point-rule-edit {
|
||||
.form {
|
||||
background: rgba(15, 23, 42, .88);
|
||||
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
||||
|
||||
.picker-text,
|
||||
.source-condition p {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.source-inputs .t-input {
|
||||
background: rgba(15, 23, 42, .72);
|
||||
border-color: rgba(148, 163, 184, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,357 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.pointRule.read" class="point-rule-list">
|
||||
<div class="filter-menu">
|
||||
<t-dropdown-menu>
|
||||
<t-dropdown-item
|
||||
v-if="isGlobalManager"
|
||||
v-model="selectedStoreId"
|
||||
:label="selectedStoreName"
|
||||
:options="storeOptions"
|
||||
@change="selectStore"
|
||||
/>
|
||||
<t-dropdown-item
|
||||
v-model="statusFilter"
|
||||
label="规则状态"
|
||||
:options="statusOptions"
|
||||
@change="selectStatus"
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="reload"
|
||||
@scrolltolower="load"
|
||||
>
|
||||
<t-cell-group v-if="pageResult.list.length" class="rule-list" theme="card">
|
||||
<t-cell
|
||||
v-for="item in pageResult.list"
|
||||
:key="item.id"
|
||||
class="rule-item"
|
||||
:title="item.name || '未命名规则'"
|
||||
:description="getRuleDescription(item)"
|
||||
:note="getRuleNote(item)"
|
||||
:arrow="canUpdate"
|
||||
:hover="canUpdate"
|
||||
@click="toEdit(item)"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<div class="priority" v-text="item.priority ?? 0" />
|
||||
</template>
|
||||
<template #extra>
|
||||
<t-tag
|
||||
:theme="getStatusTheme(item.status)"
|
||||
variant="light-outline"
|
||||
:content="getStatusText(item.status)"
|
||||
/>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="empty" v-text="isLoading ? '正在加载积分规则' : '暂无积分规则'" />
|
||||
<div class="load-state" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
<t-button v-can="permissionCodes.pointRule.create" class="create" theme="primary" @click="toCreate">
|
||||
<template #icon>
|
||||
<t-icon name="add" />
|
||||
</template>
|
||||
新增积分规则
|
||||
</t-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Toast, type DropdownValue } from "tdesign-mobile-vue";
|
||||
import EventAPI from "@/api/EventAPI";
|
||||
import PointAPI from "@/api/PointAPI";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import type { EventItem } from "@/types/EventItem";
|
||||
import type { PointRule, PointRuleStatus } from "@/types/Point";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
import { useUserStore, type Page, type PageResult } from "timi-web";
|
||||
|
||||
const allStoresValue = "__ALL_STORES__";
|
||||
|
||||
defineOptions({
|
||||
name: "PointRuleList"
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
|
||||
// ---------- 筛选与门店 ----------
|
||||
|
||||
const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
|
||||
const canUpdate = computed(() => userStore.hasPermissions(permissionCodes.pointRule.update));
|
||||
const selectedStoreId = ref(allStoresValue);
|
||||
const statusFilter = ref("ALL");
|
||||
const statusOptions = [
|
||||
{ label: "全部状态", value: "ALL" },
|
||||
{ label: "草稿", value: "DRAFT" },
|
||||
{ label: "启用", value: "ACTIVE" },
|
||||
{ label: "停用", value: "INACTIVE" },
|
||||
{ label: "已删除", value: "DELETED" }
|
||||
];
|
||||
const storeOptions = computed(() => [
|
||||
{ label: "全部门店", value: allStoresValue },
|
||||
...currentStoreStore.storeList
|
||||
.map(item => ({
|
||||
label: item.name || item.code || "未命名门店",
|
||||
value: item.id || ""
|
||||
}))
|
||||
.filter(item => item.value)
|
||||
]);
|
||||
const selectedStoreName = computed(() => storeOptions.value.find(item => item.value === selectedStoreId.value)?.label || "全部门店");
|
||||
|
||||
async function selectStore(value: DropdownValue): Promise<void> {
|
||||
if (Array.isArray(value)) {
|
||||
return;
|
||||
}
|
||||
selectedStoreId.value = String(value);
|
||||
await loadEventList();
|
||||
await reload();
|
||||
}
|
||||
|
||||
async function selectStatus(value: DropdownValue): Promise<void> {
|
||||
if (Array.isArray(value)) {
|
||||
return;
|
||||
}
|
||||
statusFilter.value = String(value);
|
||||
await reload();
|
||||
}
|
||||
|
||||
// ---------- 规则列表 ----------
|
||||
|
||||
const page = reactive<Page<PointRule>>({
|
||||
index: 0,
|
||||
size: 20
|
||||
});
|
||||
const pageResult = reactive<PageResult<PointRule>>({
|
||||
total: 0,
|
||||
list: []
|
||||
});
|
||||
const isLoading = ref(false);
|
||||
const isRefreshing = ref(false);
|
||||
const isNoMore = ref(false);
|
||||
let loadToken = 0;
|
||||
|
||||
const loadStateText = computed(() => {
|
||||
if (isLoading.value) {
|
||||
return "正在加载更多";
|
||||
}
|
||||
if (isNoMore.value) {
|
||||
return pageResult.list.length ? `共 ${pageResult.total} 条规则` : "";
|
||||
}
|
||||
return "上拉加载更多";
|
||||
});
|
||||
|
||||
async function reload(): Promise<void> {
|
||||
isRefreshing.value = true;
|
||||
try {
|
||||
page.index = 0;
|
||||
pageResult.total = 0;
|
||||
pageResult.list = [];
|
||||
isNoMore.value = false;
|
||||
await load();
|
||||
} finally {
|
||||
isRefreshing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function load(): Promise<void> {
|
||||
if (isLoading.value || isNoMore.value) {
|
||||
return;
|
||||
}
|
||||
const token = loadToken + 1;
|
||||
loadToken = token;
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const result = await PointAPI.ruleList(buildRequest(), buildListOptions());
|
||||
if (token !== loadToken) {
|
||||
return;
|
||||
}
|
||||
const list = result.list || [];
|
||||
pageResult.list = pageResult.list.concat(list);
|
||||
pageResult.total = result.total || 0;
|
||||
page.index += 1;
|
||||
isNoMore.value = pageResult.list.length >= pageResult.total || list.length < page.size;
|
||||
} catch {
|
||||
Toast.error("积分规则加载失败");
|
||||
} finally {
|
||||
if (token === loadToken) {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function buildRequest(): Page<PointRule> {
|
||||
return {
|
||||
index: page.index,
|
||||
size: page.size,
|
||||
equalsExample: statusFilter.value === "ALL" ? undefined : {
|
||||
status: statusFilter.value as PointRuleStatus
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function buildListOptions(): { allStores?: boolean; storeId?: string } | undefined {
|
||||
if (!isGlobalManager.value) {
|
||||
return undefined;
|
||||
}
|
||||
return selectedStoreId.value === allStoresValue ? { allStores: true } : { storeId: selectedStoreId.value };
|
||||
}
|
||||
|
||||
// ---------- 事件名称 ----------
|
||||
|
||||
const eventList = ref<EventItem[]>([]);
|
||||
const eventNameMap = computed(() => new Map(eventList.value.filter(item => item.id).map(item => [item.id as string, item.name])));
|
||||
|
||||
async function loadEventList(): Promise<void> {
|
||||
try {
|
||||
const options = buildListOptions();
|
||||
const result = await EventAPI.list({ index: 0, size: 1000 }, options);
|
||||
eventList.value = result.list || [];
|
||||
} catch {
|
||||
eventList.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 展示与导航 ----------
|
||||
|
||||
function getRuleDescription(rule: PointRule): string {
|
||||
const eventName = rule.eventId ? eventNameMap.value.get(rule.eventId) || `事件 ${rule.eventId}` : "未绑定事件";
|
||||
const triggerText = getTriggerText(rule);
|
||||
const pointText = rule.pointMode === "SOURCE_VALUE" ? "使用登记时填写的积分" : `${rule.pointValue ?? 0} 分`;
|
||||
return `${eventName}｜${triggerText}｜${pointText}`;
|
||||
}
|
||||
|
||||
function getRuleNote(rule: PointRule): string {
|
||||
const priority = `优先级 ${rule.priority ?? 0}`;
|
||||
return rule.exclusive ? `${priority}｜命中后停止匹配` : priority;
|
||||
}
|
||||
|
||||
function getTriggerText(rule: PointRule): string {
|
||||
const map: Record<string, string> = {
|
||||
EVERY_TIME: "每次登记",
|
||||
FIRST_TIME: "首次登记",
|
||||
AFTER_COUNT_EVERY_TIME: `达到 ${rule.conditionJson?.threshold ?? 0} 次后每次登记`,
|
||||
SOURCE_VALUE: "登记时自定义积分"
|
||||
};
|
||||
return map[rule.triggerType || ""] || "未知触发类型";
|
||||
}
|
||||
|
||||
function getStatusText(status?: PointRuleStatus): string {
|
||||
return ({
|
||||
DRAFT: "草稿",
|
||||
ACTIVE: "启用",
|
||||
INACTIVE: "停用",
|
||||
DELETED: "已删除"
|
||||
} as Record<string, string>)[status || ""] || "未知";
|
||||
}
|
||||
|
||||
function getStatusTheme(status?: PointRuleStatus): "default" | "success" | "warning" | "danger" {
|
||||
if (status === "ACTIVE") {
|
||||
return "success";
|
||||
}
|
||||
if (status === "INACTIVE") {
|
||||
return "warning";
|
||||
}
|
||||
if (status === "DELETED") {
|
||||
return "danger";
|
||||
}
|
||||
return "default";
|
||||
}
|
||||
|
||||
async function toCreate(): Promise<void> {
|
||||
await router.push({
|
||||
name: "PointRuleCreate",
|
||||
query: selectedStoreId.value === allStoresValue ? undefined : { storeId: selectedStoreId.value }
|
||||
});
|
||||
}
|
||||
|
||||
async function toEdit(rule: PointRule): Promise<void> {
|
||||
if (!canUpdate.value || !rule.id) {
|
||||
return;
|
||||
}
|
||||
await router.push(`/management/points/rules/${rule.id}/edit`);
|
||||
}
|
||||
|
||||
async function preparePage(): Promise<void> {
|
||||
if (isGlobalManager.value) {
|
||||
await currentStoreStore.loadStoreList();
|
||||
selectedStoreId.value = allStoresValue;
|
||||
} else {
|
||||
const store = await currentStoreStore.loadLoginStore();
|
||||
selectedStoreId.value = store?.id || "";
|
||||
}
|
||||
await loadEventList();
|
||||
await reload();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await preparePage();
|
||||
} catch {
|
||||
Toast.error("积分规则页面加载失败");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.point-rule-list {
|
||||
padding: calc(var(--app-nav-height) + 4rem) 0 6rem;
|
||||
|
||||
.filter-menu {
|
||||
top: var(--app-nav-height);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
position: fixed;
|
||||
background: var(--td-bg-color-container);
|
||||
}
|
||||
|
||||
.rule-list {
|
||||
margin: 0 1rem;
|
||||
|
||||
.rule-item {
|
||||
.priority {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
color: #2563eb;
|
||||
background: #dbeafe;
|
||||
border-radius: .75rem;
|
||||
align-items: center;
|
||||
font-size: .875rem;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: #52607a;
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.create {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.point-rule-list {
|
||||
.empty {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.rule-list .priority {
|
||||
color: #bfdbfe;
|
||||
background: rgba(30, 64, 175, .45);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user