fix PackageConfigList.vue style
This commit is contained in:
Timi
@@ -7,37 +7,53 @@
|
||||
borderless
|
||||
clearable
|
||||
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>
|
||||
<t-dropdown-menu>
|
||||
<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="configList.length" theme="card" class="list">
|
||||
<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-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="reload"
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<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>
|
||||
<div class="title-row">
|
||||
<div class="title">
|
||||
<strong v-text="item.name || '未命名套餐'" />
|
||||
<t-tag :content="getPackageConfigStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #note>
|
||||
<span class="price orange" v-text="formatPackageAmount(item.standardAmount)" />
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="description">
|
||||
<span v-text="formatPackageAmount(item.standardAmount)" />
|
||||
<span v-text="`${item.itemList?.length || 0} 项权益`" />
|
||||
<span v-text="formatValidity(item)" />
|
||||
</div>
|
||||
<span v-text="`${item.itemList?.length || 0} 项权益`" />
|
||||
</template>
|
||||
</t-cell>
|
||||
<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>
|
||||
</t-swipe-cell>
|
||||
</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" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
@@ -46,7 +62,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
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 PackageAPI from "@/api/PackageAPI";
|
||||
import type { GaoPackageConfig, PackageConfigStatus } from "@/types/Package";
|
||||
@@ -130,6 +146,18 @@ async function selectStatus(value: DropdownValue): Promise<void> {
|
||||
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> {
|
||||
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";
|
||||
}
|
||||
|
||||
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 {
|
||||
if (!item.id || !canDelete.value) {
|
||||
return;
|
||||
@@ -183,51 +205,63 @@ onMounted(async () => {
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
onUnmounted(() => {
|
||||
navBarStore.clearRight();
|
||||
reloadByKeyword.cancel();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.package-config-list {
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
|
||||
padding: var(--app-nav-height) 0 1rem;
|
||||
|
||||
.filters {
|
||||
top: var(--app-nav-height);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
gap: .5rem;
|
||||
margin: 0 1rem .75rem;
|
||||
display: flex;
|
||||
padding: .75rem 1rem;
|
||||
position: sticky;
|
||||
background: #F5F5F8;
|
||||
box-shadow: var(--td-shadow-1);
|
||||
|
||||
.keyword {
|
||||
flex: 1;
|
||||
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 {
|
||||
.title-row,
|
||||
.description {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.list {
|
||||
padding-top: 1rem;
|
||||
|
||||
.description {
|
||||
color: var(--td-text-color-secondary);
|
||||
margin-top: .35rem;
|
||||
font-size: .8125rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.item {
|
||||
|
||||
.delete {
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--td-text-color-secondary);
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
.price {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user