add package

2026-09-01 01:14:54 +08:00
parent 100d4c4c44
commit 2d94abfb32
39 changed files with 4425 additions and 59 deletions
@@ -0,0 +1,168 @@
+<template>
+	<div v-can="permissionCodes.fundRecord.read" class="package-record-list">
+		<t-dropdown-menu>
+			<t-dropdown-item v-model="operationType" label="操作类型" :options="operationOptions" @change="selectOperation" />
+			<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" />
+		</t-dropdown-menu>
+		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore">
+			<t-cell-group v-if="recordList.length" theme="card">
+				<t-cell
+					v-for="(item, index) in recordList"
+					:key="item.id"
+					:title="`${getFundOperationText(item.operationType)} · ${getFundStatusText(item.status)}`"
+					:description="getDescription(item)"
+					arrow
+					hover
+					v-entrance-transition="index * 30"
+					@click="toDetail(item)"
+				>
+					<template #title>
+						<div class="title-row">
+							<span v-text="getFundOperationText(item.operationType)" />
+							<t-tag :content="getFundStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
+						</div>
+					</template>
+					<template #note><span class="amount" v-text="formatPackageAmount(item.amount)" /></template>
+				</t-cell>
+			</t-cell-group>
+			<div v-else class="empty" v-text="loading ? '正在加载资金流水' : '暂无资金流水'" />
+			<div class="load-state" v-text="loadStateText" />
+		</t-pull-down-refresh>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { type DropdownValue } from "tdesign-mobile-vue";
+import { Time } from "timi-web";
+import PackageAPI from "@/api/PackageAPI";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { FundOperationType, FundRecordStatus, GaoFundRecord } from "@/types/Package";
+import { getErrorMessage } from "@/utils/error";
+import { formatPackageAmount, getFundOperationText, getFundStatusText } from "@/utils/package";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "FundRecordList" });
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const recordList = ref<GaoFundRecord[]>([]);
+const operationType = ref("ALL");
+const status = ref("ALL");
+const pageIndex = ref(0);
+const total = ref(0);
+const loading = ref(false);
+const isRefreshing = ref(false);
+const noMore = ref(false);
+const operationOptions = [
+	{ label: "全部类型", value: "ALL" },
+	{ label: "线下收款", value: "RECEIVE" },
+	{ label: "退款", value: "REFUND" },
+	{ label: "确认无需退款", value: "CONFIRM_NO_REFUND" },
+	{ label: "资金冲正", value: "REVOKE" }
+];
+const statusOptions = [
+	{ label: "全部状态", value: "ALL" },
+	{ label: "待核销", value: "PENDING" },
+	{ label: "已核销", value: "VERIFIED" },
+	{ label: "已拒绝", value: "REJECTED" },
+	{ label: "已撤销", value: "CANCELLED" }
+];
+const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
+
+async function loadMore(): Promise<void> {
+	if (loading.value || noMore.value) {
+		return;
+	}
+	loading.value = true;
+	try {
+		const result = await PackageAPI.fundRecordList({
+			index: pageIndex.value,
+			size: 15,
+			customerPackageId: String(route.query.customerPackageId || "") || undefined,
+			operationType: operationType.value === "ALL" ? undefined : operationType.value as FundOperationType,
+			status: status.value === "ALL" ? undefined : status.value as FundRecordStatus
+		});
+		const list = result.list || [];
+		recordList.value = recordList.value.concat(list);
+		total.value = result.total || 0;
+		pageIndex.value += 1;
+		noMore.value = list.length < 15 || total.value <= recordList.value.length;
+	} finally {
+		loading.value = false;
+	}
+}
+
+async function reload(): Promise<void> {
+	if (loading.value) {
+		return;
+	}
+	pageIndex.value = 0;
+	recordList.value = [];
+	total.value = 0;
+	noMore.value = false;
+	await loadMore();
+}
+
+async function selectOperation(value: DropdownValue): Promise<void> {
+	if (!Array.isArray(value)) {
+		operationType.value = String(value);
+		await reload();
+	}
+}
+
+async function selectStatus(value: DropdownValue): Promise<void> {
+	if (!Array.isArray(value)) {
+		status.value = String(value);
+		await reload();
+	}
+}
+
+function getDescription(item: GaoFundRecord): string {
+	return `${item.customer?.name || item.customerId || "未知客户"}｜${item.occurredAt ? Time.toDateTime(item.occurredAt) : "时间未知"}`;
+}
+
+function getStatusTheme(statusValue?: FundRecordStatus): "success" | "warning" | "danger" | "default" {
+	return statusValue === "VERIFIED" ? "success" : statusValue === "PENDING" ? "warning" : statusValue === "REJECTED" ? "danger" : "default";
+}
+
+async function toDetail(item: GaoFundRecord): Promise<void> {
+	if (item.id) {
+		await router.push(`/management/fund-records/${item.id}`);
+	}
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	try {
+		await reload();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "资金流水加载失败"));
+	}
+});
+
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.package-record-list {
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+
+	.title-row {
+		gap: .5rem;
+		display: flex;
+		align-items: center;
+	}
+
+	.amount {
+		color: var(--td-brand-color);
+	}
+
+	.empty {
+		color: var(--td-text-color-secondary);
+		padding: 2rem 1rem;
+		text-align: center;
+	}
+}
+</style>