371 lines
8.8 KiB
Vue
371 lines
8.8 KiB
Vue
<template>
|
|
<div v-can="permissionCodes.pointRule.read" class="point-rule-list">
|
|
<div class="filter-menu">
|
|
<t-dropdown-menu>
|
|
<t-dropdown-item
|
|
v-model="statusFilter"
|
|
label="规则状态"
|
|
:options="statusOptions"
|
|
@change="selectStatus"
|
|
/>
|
|
</t-dropdown-menu>
|
|
</div>
|
|
<t-pull-down-refresh
|
|
class="list-wrapper"
|
|
v-model="isRefreshing"
|
|
:refresh-timeout="30000"
|
|
@refresh="reload"
|
|
@scrolltolower="load"
|
|
>
|
|
<t-cell-group v-if="pageResult.list.length" class="list" theme="card">
|
|
<t-cell
|
|
v-for="item in pageResult.list"
|
|
:key="item.id"
|
|
class="item"
|
|
:arrow="!!item.id"
|
|
:hover="!!item.id"
|
|
@click="toDetail(item)"
|
|
>
|
|
<template #left-icon>
|
|
<div class="point" :class="{ 'consume': item.pointValue && item.pointValue < 0 }">
|
|
<t-icon name="money" />
|
|
<span v-text="getPointText(item)" />
|
|
</div>
|
|
</template>
|
|
<template #title>
|
|
<div class="title">
|
|
<h4 class="text" v-text="item.name || '未命名规则'" />
|
|
<t-tag
|
|
:theme="getStatusTheme(item.status)"
|
|
variant="light-outline"
|
|
:content="getStatusText(item.status)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template #description>
|
|
<div class="description">
|
|
<div v-text="`登记事件：${item.eventId ? eventNameMap.get(item.eventId) : '未绑定事件'}`"></div>
|
|
<div v-text="`触发类型：${getTriggerText(item)}`"></div>
|
|
</div>
|
|
</template>
|
|
</t-cell>
|
|
</t-cell-group>
|
|
<div class="load-state" v-text="loadStateText" />
|
|
</t-pull-down-refresh>
|
|
</div>
|
|
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { type DropdownValue } from "tdesign-mobile-vue";
|
|
import EventAPI from "@/api/EventAPI";
|
|
import PointAPI from "@/api/PointAPI";
|
|
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
|
import { useNavBarStore } from "@/store/navBarStore";
|
|
import type { EventItem } from "@/types/EventItem";
|
|
import type { NavBarAction } from "@/types/NavBarAction";
|
|
import type { PointRule, PointRuleStatus } from "@/types/Point";
|
|
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
|
import { type Page, type PageResult, useUserStore } from "timi-web";
|
|
import { Message } from "@/utils/message.ts";
|
|
|
|
defineOptions({
|
|
name: "PointRuleList"
|
|
});
|
|
|
|
const router = useRouter();
|
|
const navBarStore = useNavBarStore();
|
|
const userStore = useUserStore();
|
|
const currentStoreStore = useCurrentStoreStore();
|
|
|
|
// ---------- 筛选 ----------
|
|
|
|
const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
|
|
const canCreate = computed(() => userStore.hasPermissions(permissionCodes.pointRule.create));
|
|
const canUpdate = computed(() => userStore.hasPermissions(permissionCodes.pointRule.update));
|
|
const canShowActionMenu = computed(() => canCreate.value || canUpdate.value);
|
|
|
|
const actionList = computed<NavBarAction[]>(() => {
|
|
const list: NavBarAction[] = [];
|
|
if (canCreate.value) {
|
|
list.push({
|
|
action: toCreate,
|
|
theme: "primary",
|
|
icon: "add",
|
|
key: "create",
|
|
text: "新增积分规则"
|
|
});
|
|
}
|
|
if (canUpdate.value) {
|
|
list.push({
|
|
action: toSort,
|
|
icon: "order",
|
|
key: "sort",
|
|
text: "排序"
|
|
});
|
|
}
|
|
return list;
|
|
});
|
|
|
|
const statusFilter = ref("ALL");
|
|
const statusOptions = [
|
|
{ label: "全部状态", value: "ALL" },
|
|
{ label: "草稿", value: "DRAFT" },
|
|
{ label: "启用", value: "ACTIVE" },
|
|
{ label: "停用", value: "INACTIVE" },
|
|
{ label: "已删除", value: "DELETED" }
|
|
];
|
|
|
|
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 {
|
|
Message.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(): { storeId: string } {
|
|
return { storeId: currentStoreStore.currentStoreId };
|
|
}
|
|
|
|
// ---------- 事件名称 ----------
|
|
|
|
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 getTriggerText(rule: PointRule): string {
|
|
const map: Record<string, string> = {
|
|
EVERY_TIME: "每次登记",
|
|
FIRST_TIME: "首次登记",
|
|
AFTER_COUNT_EVERY_TIME: `达到 ${rule.conditionJson?.threshold ?? 0} 次后每次登记`,
|
|
SOURCE_VALUE: "登记时自定义积分",
|
|
CUSTOMER_EVENT_VALUE_TIER: `按 ${rule.conditionJson?.window?.amount ?? 1} 年累计分档`
|
|
};
|
|
return map[rule.triggerType || ""] || "未知触发类型";
|
|
}
|
|
|
|
function getPointText(rule: PointRule): string {
|
|
if (rule.pointMode === "TIER") {
|
|
return "分档";
|
|
}
|
|
if (rule.pointValue === undefined || rule.pointValue === null) {
|
|
return "?";
|
|
}
|
|
return `${0 < rule.pointValue ? "+" : "-"}${Math.abs(rule.pointValue)}`;
|
|
}
|
|
|
|
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: currentStoreStore.currentStoreId ? { storeId: currentStoreStore.currentStoreId } : undefined
|
|
});
|
|
}
|
|
|
|
async function toSort(): Promise<void> {
|
|
await router.push("/management/points/rules/sort");
|
|
}
|
|
|
|
async function toDetail(rule: PointRule): Promise<void> {
|
|
if (!rule.id) {
|
|
return;
|
|
}
|
|
await router.push(`/management/points/rules/${rule.id}`);
|
|
}
|
|
|
|
async function preparePage(): Promise<void> {
|
|
if (isGlobalManager.value) {
|
|
await currentStoreStore.loadStoreList();
|
|
} else {
|
|
await currentStoreStore.loadLoginStore();
|
|
}
|
|
await loadEventList();
|
|
await reload();
|
|
}
|
|
|
|
onMounted(async () => {
|
|
navBarStore.clearRight();
|
|
navBarStore.setCustomRightVisible(canShowActionMenu.value);
|
|
try {
|
|
await preparePage();
|
|
} catch {
|
|
Message.error("积分规则页面加载失败");
|
|
}
|
|
});
|
|
|
|
onUnmounted(() => navBarStore.clearRight());
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.point-rule-list {
|
|
padding: calc(var(--app-nav-height) + 4rem) 0 1rem;
|
|
|
|
.filter-menu {
|
|
top: var(--app-nav-height);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
position: fixed;
|
|
background: var(--td-bg-color-container);
|
|
}
|
|
|
|
.list-wrapper {
|
|
min-height: 70vh;
|
|
|
|
.list {
|
|
|
|
.item {
|
|
|
|
.point {
|
|
width: 4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
&.consume {
|
|
color: var(--td-error-color);
|
|
}
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.text {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.description {
|
|
font-size: .75rem;
|
|
line-height: 1.25;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
:global(html.theme-dark) {
|
|
.point-rule-list {
|
|
.empty {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.list .priority {
|
|
color: #bfdbfe;
|
|
background: rgba(30, 64, 175, .45);
|
|
}
|
|
}
|
|
}
|
|
</style>
|