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

fix PackageConfigDetail.vue style

Browse Source
This commit is contained in:
Timi
2026-09-01 16:57:24 +08:00
parent 3b20437f37
commit c50f025f6e
3 changed files with 102 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/package/PackageConfigDetail.vue
+11 -24
View File
@@ -2,13 +2,13 @@
<div v-can="permissionCodes.packageConfig.read" class="package-config-detail">
<template v-if="config">
<section class="hero" v-entrance-transition>
<div class="title-row"><h2 v-text="config.name || '未命名套餐'" /><t-tag :content="getPackageConfigStatusText(config.status)" variant="light-outline" :theme="getStatusTheme(config.status)" /></div>
<div class="title"><h2 v-text="config.name || '未命名套餐'" /><t-tag :content="getPackageConfigStatusText(config.status)" variant="light-outline" :theme="getStatusTheme(config.status)" /></div>
<p v-text="config.description || '暂无套餐说明'" />
</section>
<t-cell-group title="基本信息" theme="card" v-entrance-transition="70">
<t-cell title="所属门店" :note="storeName" />
<t-cell title="标准价" :note="formatPackageAmount(config.standardAmount)" />
<t-cell title="有效期" :note="formatValidity" />
<t-cell title="起始日期" :note="config.beginAt ? Time.toDateTime(config.beginAt) : '不限'" />
<t-cell title="终止日期" :note="config.endAt ? Time.toDateTime(config.endAt) : '不限'" />
<t-cell title="最后修改人" :note="config.updater?.name || config.updater?.nick || '未知'" />
</t-cell-group>
<t-cell-group title="产品权益" theme="card" v-entrance-transition="140">
@@ -20,7 +20,13 @@
/>
<div v-if="!config.itemList?.length" class="empty" v-text="'暂无产品权益'" />
</t-cell-group>
<t-button v-if="canDelete" class="delete-button" theme="danger" variant="outline" @click="removeConfig">删除配置</t-button>
<t-button
v-if="canDelete"
class="cell-button"
theme="danger"
@click="removeConfig"
content="删除"
/>
</template>
<t-empty v-else :description="isLoading ? '正在加载套餐配置' : '套餐配置不存在'" />
</div>
@@ -50,15 +56,6 @@ const config = ref<GaoPackageConfig>();
const isLoading = ref(false);
const canUpdate = computed(() => !!config.value && userStore.hasPermissions(permissionCodes.packageConfig.update));
const canDelete = computed(() => !!config.value && userStore.hasPermissions(permissionCodes.packageConfig.delete));
const storeName = computed(() => {
const storeId = config.value?.storeId;
return currentStoreStore.storeList.find(item => item.id === storeId)?.name || storeId || "未绑定门店";
});
const formatValidity = computed(() => {
const begin = config.value?.beginAt ? Time.toDateTime(config.value.beginAt) : "不限起始";
const end = config.value?.endAt ? Time.toDateTime(config.value.endAt) : "不限结束";
return `${begin} 至 ${end}`;
});
function getStatusTheme(status?: PackageConfigStatus): "success" | "warning" | "default" {
return status === "ACTIVE" ? "success" : status === "INACTIVE" ? "warning" : "default";
@@ -144,7 +141,7 @@ onUnmounted(() => navBarStore.clearRight());
box-shadow: var(--td-shadow-1);
border-radius: 1rem;
.title-row {
.title {
gap: .5rem;
display: flex;
align-items: center;
@@ -162,15 +159,5 @@ onUnmounted(() => navBarStore.clearRight());
line-height: 1.5;
}
}
.empty {
color: var(--td-text-color-secondary);
padding: 1rem;
text-align: center;
}
.delete-button {
margin: 0 1rem;
}
}
</style>
src/pages/package/PackageConfigList.vue
+1 -1
View File
@@ -62,7 +62,7 @@
<script setup lang="ts">
import { DialogPlugin, type DropdownValue } from "tdesign-mobile-vue";
import { Time, Toolkit } from "timi-web";
import { Toolkit } from "timi-web";
import { useUserStore } from "timi-web-api";
import PackageAPI from "@/api/PackageAPI";
import type { GaoPackageConfig, PackageConfigStatus } from "@/types/Package";
src/router/routes/packageRoutes.ts
+90 -15
View File
@@ -28,23 +28,98 @@ function pageMeta(title: string, depth = 3, background = "#F5F5F8"): RouteRecord
}
const packageRoutes: RouteRecordRaw[] = [
{ path: "/management/package-configs", name: "PackageConfigList", component: PackageConfigList, meta: pageMeta("套餐配置") },
{ path: "/management/package-configs/create", name: "PackageConfigCreate", component: PackageConfigEdit, meta: pageMeta("新增套餐配置", 4) },
{ path: "/management/package-configs/:id", name: "PackageConfigDetail", component: PackageConfigDetail, meta: pageMeta("套餐配置详情", 4, "#FFF") },
{ path: "/management/package-configs/:id/edit", name: "PackageConfigEdit", component: PackageConfigEdit, meta: pageMeta("编辑套餐配置", 5) },
{ path: "/management/customer-packages", name: "CustomerPackageList", component: CustomerPackageList, meta: pageMeta("客户套餐") },
{
path: "/management/package-configs",
name: "PackageConfigList",
component: PackageConfigList,
meta: pageMeta("套餐配置")
},
{
path: "/management/package-configs/create",
name: "PackageConfigCreate",
component: PackageConfigEdit,
meta: pageMeta("新增套餐配置", 4)
},
{
path: "/management/package-configs/:id",
name: "PackageConfigDetail",
component: PackageConfigDetail,
meta: pageMeta("套餐配置详情", 4)
},
{
path: "/management/package-configs/:id/edit",
name: "PackageConfigEdit",
component: PackageConfigEdit,
meta: pageMeta("编辑套餐配置", 5)
},
{
path: "/management/customer-packages",
name: "CustomerPackageList",
component: CustomerPackageList,
meta: pageMeta("客户套餐")
},
{ path: "/management/customer-packages/purchase", redirect: "/management/registration-event-records/create" },
{ path: "/management/customer-packages/:id", name: "CustomerPackageDetail", component: CustomerPackageDetail, meta: pageMeta("客户套餐详情", 4, "#FFF") },
{ path: "/management/customer-packages/:id/cancel", name: "CustomerPackageCancel", component: CustomerPackageCancel, meta: pageMeta("取消客户套餐", 5) },
{ path: "/management/customer-packages/:id/payment", name: "CustomerPackagePayment", component: CustomerPackagePayment, meta: pageMeta("登记收款", 5) },
{ path: "/management/customer-packages/:id/delivery/create", name: "CustomerPackageDelivery", component: CustomerPackageDelivery, meta: pageMeta("创建发放单", 5) },
{ path: "/management/customer-packages/:id/refund", name: "CustomerPackageRefund", component: CustomerPackageRefund, meta: pageMeta("处理退款", 5) },
{ path: "/management/package-deliveries", name: "PackageDeliveryList", component: PackageDeliveryList, meta: pageMeta("发放记录") },
{ path: "/management/package-deliveries/:id", name: "PackageDeliveryDetail", component: PackageDeliveryDetail, meta: pageMeta("发放单详情", 4, "#FFF") },
{ path: "/management/package-deliveries/:id/revoke", name: "PackageDeliveryRevoke", component: PackageDeliveryRevoke, meta: pageMeta("发放冲正", 5) },
{
path: "/management/customer-packages/:id",
name: "CustomerPackageDetail",
component: CustomerPackageDetail,
meta: pageMeta("客户套餐详情", 4)
},
{
path: "/management/customer-packages/:id/cancel",
name: "CustomerPackageCancel",
component: CustomerPackageCancel,
meta: pageMeta("取消客户套餐", 5)
},
{
path: "/management/customer-packages/:id/payment",
name: "CustomerPackagePayment",
component: CustomerPackagePayment,
meta: pageMeta("登记收款", 5)
},
{
path: "/management/customer-packages/:id/delivery/create",
name: "CustomerPackageDelivery",
component: CustomerPackageDelivery,
meta: pageMeta("创建发放单", 5)
},
{
path: "/management/customer-packages/:id/refund",
name: "CustomerPackageRefund",
component: CustomerPackageRefund,
meta: pageMeta("处理退款", 5)
},
{
path: "/management/package-deliveries",
name: "PackageDeliveryList",
component: PackageDeliveryList,
meta: pageMeta("发放记录")
},
{
path: "/management/package-deliveries/:id",
name: "PackageDeliveryDetail",
component: PackageDeliveryDetail,
meta: pageMeta("发放单详情", 4, "#FFF")
},
{
path: "/management/package-deliveries/:id/revoke",
name: "PackageDeliveryRevoke",
component: PackageDeliveryRevoke,
meta: pageMeta("发放冲正", 5)
},
{ 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/fund-records/:id",
name: "FundRecordDetail",
component: FundRecordDetail,
meta: pageMeta("资金记录详情", 4, "#FFF")
},
{
path: "/management/fund-records/:id/revoke",
name: "FundRecordRevoke",
component: FundRecordRevoke,
meta: pageMeta("资金冲正", 5)
}
];
export default packageRoutes;