fix PackageConfigDetail.vue style

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
+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>
+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";