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

fix PackageConfigList.vue style

Browse Source
This commit is contained in:
Timi
2026-09-01 16:51:20 +08:00
parent 9c5306d8e4
commit 3b20437f37
2 changed files with 111 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/event/EventRecordList.vue
+26 -26
View File
@@ -46,32 +46,32 @@
@scrolltolower="loadRecords" @scrolltolower="loadRecords"
> >
<div class="list-wrapper"> <div class="list-wrapper">
<t-cell-group v-entrance-transition class="summary" theme="card"> <t-cell-group v-entrance-transition class="summary" theme="card">
<t-cell <t-cell
title="开始时间" title="开始时间"
:note="dateRange[0] || '-'" :note="dateRange[0] || '-'"
arrow arrow
@click="openStartTime" @click="openStartTime"
/> />
<t-cell <t-cell
title="结束时间" title="结束时间"
:note="dateRange[1] || '-'" :note="dateRange[1] || '-'"
arrow arrow
@click="openEndTime" @click="openEndTime"
/> />
<t-cell title="事件" :note="eventFilterLabel" /> <t-cell title="事件" :note="eventFilterLabel" />
<t-cell v-if="optionFilterLabel !== '全部选项'" title="选项" :note="optionFilterLabel" /> <t-cell v-if="optionFilterLabel !== '全部选项'" title="选项" :note="optionFilterLabel" />
<t-cell title="数据量" :note="`共 ${pageResult.total} 条记录`" /> <t-cell title="数据量" :note="`共 ${pageResult.total} 条记录`" />
<t-cell v-if="summaryNumberValueText" title="数值合计" :note="summaryNumberValueText" /> <t-cell v-if="summaryNumberValueText" title="数值合计" :note="summaryNumberValueText" />
</t-cell-group> </t-cell-group>
<t-cell-group v-if="hasSelectedOption && optionStatList.length" title="选项统计" class="option-stat" theme="card"> <t-cell-group v-if="hasSelectedOption && optionStatList.length" title="选项统计" class="option-stat" theme="card">
<t-cell <t-cell
v-for="item in optionStatList" v-for="item in optionStatList"
:key="`${item.groupId}-${item.optionId}`" :key="`${item.groupId}-${item.optionId}`"
:title="`${item.groupName || '选项组'}：${item.optionLabel || '未命名选项'}`" :title="`${item.groupName || '选项组'}：${item.optionLabel || '未命名选项'}`"
:note="`${item.recordCount || 0} 条`" :note="`${item.recordCount || 0} 条`"
/> />
</t-cell-group> </t-cell-group>
<t-cell-group <t-cell-group
v-if="pageResult.list.length" v-if="pageResult.list.length"
class="record-list" class="record-list"
src/pages/package/PackageConfigList.vue
+85 -51
View File
@@ -7,37 +7,53 @@
borderless borderless
clearable clearable
placeholder="搜索套餐名称或说明" placeholder="搜索套餐名称或说明"
@enter="reload"
/> />
<t-button theme="primary" size="small" @click="reload">搜索</t-button> <t-dropdown-menu class="status">
<t-dropdown-item
v-model="status"
label="状态"
:options="statusOptions"
@change="selectStatus"
/>
</t-dropdown-menu>
</div> </div>
<t-dropdown-menu> <t-pull-down-refresh
<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" /> v-model="isRefreshing"
</t-dropdown-menu> :refresh-timeout="30000"
<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore"> @refresh="reload"
<t-cell-group v-if="configList.length" theme="card" class="list"> @scrolltolower="loadMore"
<t-swipe-cell v-for="(item, index) in configList" :key="item.id" v-entrance-transition="index * 30"> >
<t-cell class="item" :arrow="!!item.id" :hover="!!item.id" @click="toDetail(item)"> <t-cell-group
v-if="configList.length"
class="list fix-last-cell-line"
theme="card"
>
<t-swipe-cell
class="item"
v-for="(item, index) in configList"
:key="item.id"
v-entrance-transition="index * 30"
>
<t-cell :arrow="!!item.id" :hover="!!item.id" @click="toDetail(item)">
<template #title> <template #title>
<div class="title-row"> <div class="title">
<strong v-text="item.name || '未命名套餐'" /> <strong v-text="item.name || '未命名套餐'" />
<t-tag :content="getPackageConfigStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" /> <t-tag :content="getPackageConfigStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
</div> </div>
</template> </template>
<template #note>
<span class="price orange" v-text="formatPackageAmount(item.standardAmount)" />
</template>
<template #description> <template #description>
<div class="description"> <span v-text="`${item.itemList?.length || 0} 项权益`" />
<span v-text="formatPackageAmount(item.standardAmount)" />
<span v-text="`${item.itemList?.length || 0} 项权益`" />
<span v-text="formatValidity(item)" />
</div>
</template> </template>
</t-cell> </t-cell>
<template v-if="canDelete && item.id" #right> <template v-if="canDelete && item.id" #right>
<t-button class="delete" theme="danger" @click.stop="confirmRemove(item)">删除</t-button> <t-button class="swipe-cell-button" theme="danger" @click.stop="confirmRemove(item)">删除</t-button>
</template> </template>
</t-swipe-cell> </t-swipe-cell>
</t-cell-group> </t-cell-group>
<div v-else class="empty" v-text="loading ? '正在加载套餐配置' : '暂无套餐配置'" /> <div v-else class="center-tips" v-text="loading ? '正在加载套餐配置' : '暂无套餐配置'" />
<div class="center-tips" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
@@ -46,7 +62,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { DialogPlugin, type DropdownValue } from "tdesign-mobile-vue"; import { DialogPlugin, type DropdownValue } from "tdesign-mobile-vue";
import { Time } from "timi-web"; import { Time, Toolkit } from "timi-web";
import { useUserStore } from "timi-web-api"; import { useUserStore } from "timi-web-api";
import PackageAPI from "@/api/PackageAPI"; import PackageAPI from "@/api/PackageAPI";
import type { GaoPackageConfig, PackageConfigStatus } from "@/types/Package"; import type { GaoPackageConfig, PackageConfigStatus } from "@/types/Package";
@@ -130,6 +146,18 @@ async function selectStatus(value: DropdownValue): Promise<void> {
await reload(); await reload();
} }
const reloadByKeyword = Toolkit.debounce(async () => {
try {
await reload();
} catch (error) {
Message.error(getErrorMessage(error, "套餐配置加载失败"));
}
}, false);
watch(keyword, () => {
reloadByKeyword();
});
async function toCreate(): Promise<void> { async function toCreate(): Promise<void> {
await router.push("/management/package-configs/create"); await router.push("/management/package-configs/create");
} }
@@ -144,12 +172,6 @@ function getStatusTheme(statusValue?: PackageConfigStatus): "success" | "warning
return statusValue === "ACTIVE" ? "success" : statusValue === "INACTIVE" ? "warning" : "default"; return statusValue === "ACTIVE" ? "success" : statusValue === "INACTIVE" ? "warning" : "default";
} }
function formatValidity(item: GaoPackageConfig): string {
const begin = item.beginAt ? Time.toDateTime(item.beginAt) : "不限起始";
const end = item.endAt ? Time.toDateTime(item.endAt) : "不限结束";
return `${begin} 至 ${end}`;
}
function confirmRemove(item: GaoPackageConfig): void { function confirmRemove(item: GaoPackageConfig): void {
if (!item.id || !canDelete.value) { if (!item.id || !canDelete.value) {
return; return;
@@ -183,51 +205,63 @@ onMounted(async () => {
} }
}); });
onUnmounted(() => navBarStore.clearRight()); onUnmounted(() => {
navBarStore.clearRight();
reloadByKeyword.cancel();
});
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.package-config-list { .package-config-list {
padding: calc(var(--app-nav-height) + 1rem) 0 1rem; padding: var(--app-nav-height) 0 1rem;
.filters { .filters {
top: var(--app-nav-height);
left: 0;
right: 0;
z-index: 10;
gap: .5rem; gap: .5rem;
margin: 0 1rem .75rem;
display: flex; display: flex;
padding: .75rem 1rem;
position: sticky;
background: #F5F5F8;
box-shadow: var(--td-shadow-1);
.keyword { .keyword {
flex: 1; flex: 1;
border: 1px solid var(--td-component-border); border: 1px solid var(--td-component-border);
border-radius: .75rem; z-index: 1;
padding: .5rem 1rem;
background: #f8fbff;
border-radius: 1rem;
}
.status {
margin-left: -2rem;
padding-left: 1.5rem;
border-radius: 1rem;
&:after {
display: none;
}
} }
} }
.item { .list {
.title-row, padding-top: 1rem;
.description {
gap: .5rem;
display: flex;
align-items: center;
}
.description { .item {
color: var(--td-text-color-secondary);
margin-top: .35rem;
font-size: .8125rem;
flex-wrap: wrap;
}
.delete { .title {
height: 100%; gap: .5rem;
padding: 0 1rem; display: flex;
border-radius: 0; align-items: center;
} }
}
.empty { .price {
color: var(--td-text-color-secondary); font-size: 1.25rem;
padding: 2rem 1rem; }
text-align: center; }
} }
} }
</style> </style>