timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix FundRecordList.vue style

Browse Source
This commit is contained in:
Timi
2026-09-05 16:50:35 +08:00
parent 16e77b5f61
commit 63f5f221cc
6 changed files with 132 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/package/FundRecordDetail.vue → src/pages/salesOrder/FundRecordDetail.vue
View File
src/pages/package/FundRecordList.vue → src/pages/salesOrder/FundRecordList.vue
+118 -26
View File
@@ -1,30 +1,62 @@
<template>
<div v-can="permissionCodes.fundRecord.read" class="package-record-list">
<div v-can="permissionCodes.fundRecord.read" class="sales-order-record-list">
<div class="filters">
<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 class="menus">
<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>
</div>
<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
class="item"
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">
<div class="title">
<span v-text="getFundOperationText(item.operationType)" />
<t-tag :content="getFundStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
<t-tag
:content="getFundStatusText(item.status)"
variant="light-outline"
:theme="getStatusTheme(item.status)"
/>
</div>
</template>
<template #description>
<div class="description">
<div class="user">
<span class="field">
<span class="label">发起人</span>
<span class="text-bold" v-text="getOperatorText(item)" />
</span>
<span v-if="item.verifier" class="field">
<span class="label">核销人</span>
<span class="text-bold" v-text="getVerifierText(item)" />
</span>
</div>
<pass-time-label :timestamp="item.occurredAt" underline />
</div>
</template>
<template #note>
<div class="amount">
<span class="red">￥</span>
<span class="value red" v-text="formatPackageAmount(item.amount)" />
</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 ? '正在加载资金流水' : '暂无资金流水'" />
@@ -35,15 +67,15 @@
<script setup lang="ts">
import { type DropdownValue } from "tdesign-mobile-vue";
import { Time } from "timi-web";
import SalesOrderAPI from "@/api/SalesOrderAPI";
import { useNavBarStore } from "@/store/navBarStore";
import type { FundOperationType, FundRecord, FundRecordStatus } from "@/types/SalesOrder";
import { getErrorMessage } from "@/utils/error";
import { formatPackageAmount } from "@/utils/package";
import { getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
import { getFundBizTypeText, getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
import { Message } from "@/utils/message";
import { permissionCodes } from "@/utils/permission";
import { PassTimeLabel } from "timi-web";
defineOptions({ name: "FundRecordList" });
@@ -122,8 +154,12 @@ async function selectStatus(value: DropdownValue): Promise<void> {
}
}
function getDescription(item: FundRecord): string {
return `${item.customer?.name || item.customerId || "未知客户"}｜订单 ${item.bizId || "未知"}｜${item.occurredAt ? Time.toDateTime(item.occurredAt) : "时间未知"}`;
function getOperatorText(item: FundRecord): string {
return item.operator?.name || item.operator?.nick || item.operatorUserId || "未知";
}
function getVerifierText(item: FundRecord): string {
return item.verifier?.name || item.verifier?.nick || item.verifierUserId || "未核销";
}
function getStatusTheme(statusValue?: FundRecordStatus): "success" | "warning" | "danger" | "default" {
@@ -163,19 +199,44 @@ onUnmounted(() => navBarStore.clearRight());
</script>
<style scoped lang="less">
.package-record-list {
.sales-order-record-list {
padding: var(--app-nav-height) 0 1rem;
.filters {
top: var(--app-nav-height);
left: 0;
right: 0;
z-index: 10;
padding: .75rem 1rem .5rem;
display: flex;
padding: .75rem 1rem;
position: sticky;
background: var(--td-bg-color-page);
background: #F5F5F8;
box-shadow: var(--td-shadow-1);
flex-direction: column;
:deep(.t-dropdown-menu) {
border-radius: .875rem;
.menus {
--td-spacer-1: 6px;
width: 100%;
border: 1px solid rgba(148, 163, 184, .18);
overflow: hidden;
background: #fff;
border-top: none;
border-radius: 1rem;
&:after {
display: none;
}
:deep(.t-dropdown-menu__item) {
min-width: 0;
}
:deep(.t-dropdown-menu__title) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
@@ -183,14 +244,45 @@ onUnmounted(() => navBarStore.clearRight());
padding-top: .75rem;
}
.title-row {
gap: .5rem;
display: flex;
align-items: center;
}
.item {
.amount {
color: var(--td-brand-color);
.title {
gap: .5rem;
display: flex;
align-items: center;
}
.description {
gap: 0;
color: var(--td-text-color-secondary);
display: flex;
font-size: .8125rem;
flex-wrap: wrap;
line-height: 1.5;
flex-direction: column;
.user {
gap: 1rem;
display: flex;
align-items: center;
.field {
gap: .25rem;
display: inline-flex;
}
.label {
color: var(--td-text-color-placeholder);
}
}
}
.amount {
.value {
font-size: 1.25rem;
}
}
}
.empty {
src/pages/package/FundRecordRevoke.vue → src/pages/salesOrder/FundRecordRevoke.vue
View File
src/router/routes/packageRoutes.ts
+1 -7
View File
@@ -5,9 +5,6 @@ import PackageConfigDetail from "@/pages/package/PackageConfigDetail.vue";
import PackagePurchase from "@/pages/package/PackagePurchase.vue";
import CustomerPackageList from "@/pages/package/CustomerPackageList.vue";
import CustomerPackageDetail from "@/pages/package/CustomerPackageDetail.vue";
import FundRecordList from "@/pages/package/FundRecordList.vue";
import FundRecordDetail from "@/pages/package/FundRecordDetail.vue";
import FundRecordRevoke from "@/pages/package/FundRecordRevoke.vue";
function pageMeta(title: string, depth = 3, background = "#F5F5F8"): RouteRecordRaw["meta"] {
return { depth, navBarVisible: true, navBarCanBack: true, navBarTitle: title, tabBarVisible: false, bodyBackground: background, darkBodyBackground: "#10161f" };
@@ -20,8 +17,5 @@ export default [
{ path: "/management/package-configs/:id/edit", name: "PackageConfigEdit", component: PackageConfigEdit, meta: pageMeta("编辑套餐配置", 5) },
{ path: "/management/package-configs/:id/purchase", name: "PackagePurchase", component: PackagePurchase, meta: pageMeta("购买套餐", 5) },
{ path: "/management/customer-packages", name: "CustomerPackageList", component: CustomerPackageList, meta: pageMeta("客户套餐") },
{ path: "/management/customer-packages/:id", name: "CustomerPackageDetail", component: CustomerPackageDetail, meta: pageMeta("客户套餐详情", 4) },
{ path: "/management/fund-records", name: "FundRecordList", component: FundRecordList, meta: pageMeta("资金流水") },
{ path: "/management/fund-records/:id", name: "FundRecordDetail", component: FundRecordDetail, meta: pageMeta("资金记录详情", 4, "#FFF") },
{ path: "/management/fund-records/:id/revoke", name: "FundRecordRevoke", component: FundRecordRevoke, meta: pageMeta("资金冲正", 5) }
{ path: "/management/customer-packages/:id", name: "CustomerPackageDetail", component: CustomerPackageDetail, meta: pageMeta("客户套餐详情", 4) }
] as RouteRecordRaw[];
src/router/routes/salesOrderRoutes.ts
+9 -3
View File
@@ -6,9 +6,12 @@ import SalesOrderPayment from "@/pages/salesOrder/SalesOrderPayment.vue";
import SalesOrderRefund from "@/pages/salesOrder/SalesOrderRefund.vue";
import SalesOrderNoRefund from "@/pages/salesOrder/SalesOrderNoRefund.vue";
import SalesOrderCancel from "@/pages/salesOrder/SalesOrderCancel.vue";
import FundRecordList from "@/pages/salesOrder/FundRecordList.vue";
import FundRecordDetail from "@/pages/salesOrder/FundRecordDetail.vue";
import FundRecordRevoke from "@/pages/salesOrder/FundRecordRevoke.vue";
function meta(title: string, depth = 3): RouteRecordRaw["meta"] {
return { depth, navBarVisible: true, navBarCanBack: true, navBarTitle: title, tabBarVisible: false, bodyBackground: "#F5F5F8", darkBodyBackground: "#10161f" };
function meta(title: string, depth = 3, background = "#F5F5F8"): RouteRecordRaw["meta"] {
return { depth, navBarVisible: true, navBarCanBack: true, navBarTitle: title, tabBarVisible: false, bodyBackground: background, darkBodyBackground: "#10161f" };
}
export default [
@@ -18,5 +21,8 @@ export default [
{ path: "/management/sales-orders/:id/payment", name: "SalesOrderPayment", component: SalesOrderPayment, meta: meta("登记收款", 5) },
{ path: "/management/sales-orders/:id/refund", name: "SalesOrderRefund", component: SalesOrderRefund, meta: meta("登记退款", 5) },
{ path: "/management/sales-orders/:id/no-refund", name: "SalesOrderNoRefund", component: SalesOrderNoRefund, meta: meta("确认无需退款", 5) },
{ path: "/management/sales-orders/:id/cancel", name: "SalesOrderCancel", component: SalesOrderCancel, meta: meta("取消销售订单", 5) }
{ path: "/management/sales-orders/:id/cancel", name: "SalesOrderCancel", component: SalesOrderCancel, meta: meta("取消销售订单", 5) },
{ path: "/management/fund-records", name: "FundRecordList", component: FundRecordList, meta: meta("资金流水") },
{ path: "/management/fund-records/:id", name: "FundRecordDetail", component: FundRecordDetail, meta: meta("资金记录详情", 4, "#FFF") },
{ path: "/management/fund-records/:id/revoke", name: "FundRecordRevoke", component: FundRecordRevoke, meta: meta("资金冲正", 5) }
] as RouteRecordRaw[];
src/utils/salesOrder.ts
+4 -1
View File
@@ -1,6 +1,9 @@
import type { FulfillmentStatus, FulfillmentType } from "@/types/Fulfillment";
import type { FundOperationType, FundRecordStatus, SalesOrderStatus, SalesOrderType, SalesPaymentStatus, SalesRefundStatus } from "@/types/SalesOrder";
import type { FundBizType, FundOperationType, FundRecordStatus, SalesOrderStatus, SalesOrderType, SalesPaymentStatus, SalesRefundStatus } from "@/types/SalesOrder";
export function getFundBizTypeText(type?: FundBizType): string {
return type === "SALES_ORDER" ? "销售订单" : "未知";
}
export function getSalesOrderTypeText(type?: SalesOrderType): string {
return type === "PACKAGE" ? "套餐订单" : type === "DIRECT_PRODUCT" ? "直接产品订单" : "未知订单";
}