gao-customer-h5/src/pages/package/FundRecordList.vue

<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="center-tips" 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>