fix CustomerPackageList.vue style
This commit is contained in:
Timi
@@ -1,33 +1,81 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.customerPackage.read" class="customer-package-list">
|
||||
<div class="filters">
|
||||
<t-input v-model.trim="keyword" class="keyword" borderless clearable placeholder="搜索客户、编码或套餐名称" @enter="reload" />
|
||||
<t-button theme="primary" size="small" @click="reload">搜索</t-button>
|
||||
</div>
|
||||
<t-dropdown-menu>
|
||||
<t-dropdown-item v-model="status" label="套餐状态" :options="statusOptions" @change="selectStatus" />
|
||||
<t-dropdown-item v-model="paymentStatus" label="收款状态" :options="paymentOptions" @change="selectPaymentStatus" />
|
||||
<t-input
|
||||
v-model.trim="keyword"
|
||||
class="search-input"
|
||||
type="search"
|
||||
borderless
|
||||
clearable
|
||||
placeholder="搜索客户、编码或套餐名称"
|
||||
/>
|
||||
<div class="filter-line">
|
||||
<t-dropdown-menu class="filter-menu">
|
||||
<t-dropdown-item
|
||||
v-model="status"
|
||||
label="套餐状态"
|
||||
:options="statusOptions"
|
||||
@change="selectStatus"
|
||||
/>
|
||||
<t-dropdown-item
|
||||
v-model="paymentStatus"
|
||||
label="收款状态"
|
||||
:options="paymentOptions"
|
||||
@change="selectPaymentStatus"
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore">
|
||||
<t-cell-group v-if="packageList.length" theme="card" class="list">
|
||||
<t-cell v-for="(item, index) in packageList" :key="item.id" class="item" :arrow="!!item.id" :hover="!!item.id" v-entrance-transition="index * 30" @click="toDetail(item)">
|
||||
</div>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="reload"
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<t-cell-group
|
||||
class="list"
|
||||
v-if="packageList.length"
|
||||
theme="card"
|
||||
>
|
||||
<t-cell
|
||||
v-for="(item, index) in packageList"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
arrow
|
||||
v-entrance-transition="index * 30"
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<t-image
|
||||
v-if="getCustomerPhotoURL(item.customer, 64)"
|
||||
:src="getCustomerPhotoURL(item.customer, 64)"
|
||||
:alt="item.customer?.name || item.customer?.code || '客户头像'"
|
||||
fit="cover"
|
||||
class="avatar"
|
||||
/>
|
||||
<div v-else class="avatar fallback" v-text="(item.customer?.name || item.customer?.code || '客').slice(0, 1)" />
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="title-row">
|
||||
<strong v-text="item.packageNameSnapshot || '未命名套餐'" />
|
||||
<div class="title">
|
||||
<div class="text text-bold">
|
||||
<span class="customer" v-text="Text.display(item.customer?.name)" />
|
||||
<span> - </span>
|
||||
<span v-text="item.packageNameSnapshot || '未命名套餐'" />
|
||||
</div>
|
||||
<t-tag :content="getCustomerPackageStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="description">
|
||||
<span v-text="item.customer?.name || item.customer?.code || item.customerId || '未知客户'" />
|
||||
<span v-text="formatPackageAmount(item.saleAmount)" />
|
||||
<span v-text="getPaymentStatusText(item.paymentStatus)" />
|
||||
<span v-text="item.purchasedAt ? Time.toPassedDateTime(item.purchasedAt) : '未知时间'" />
|
||||
<t-tag
|
||||
class="line"
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
v-text="getPaymentStatusText(item.paymentStatus)"
|
||||
/>
|
||||
<div class="line" v-text="`成交价：${formatPackageAmount(item.saleAmount)}`" />
|
||||
</div>
|
||||
</template>
|
||||
<template #note>
|
||||
<div class="paid" v-text="`已收 ${formatPackageAmount(item.paidAmount)}`" />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="empty" v-text="loading ? '正在加载客户套餐' : '暂无客户套餐'" />
|
||||
@@ -38,10 +86,11 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type DropdownValue } from "tdesign-mobile-vue";
|
||||
import { Time } from "timi-web";
|
||||
import { Text, Toolkit } from "timi-web";
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { CustomerPackageStatus, GaoCustomerPackage, PaymentStatus } from "@/types/Package";
|
||||
import { getCustomerPhotoURL } from "@/utils/customer";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { formatPackageAmount, getCustomerPackageStatusText, getPaymentStatusText } from "@/utils/package";
|
||||
import { Message } from "@/utils/message";
|
||||
@@ -124,6 +173,18 @@ async function selectPaymentStatus(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 toDetail(item: GaoCustomerPackage): Promise<void> {
|
||||
if (item.id) {
|
||||
await router.push(`/management/customer-packages/${item.id}`);
|
||||
@@ -143,43 +204,99 @@ onMounted(async () => {
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
onUnmounted(() => {
|
||||
navBarStore.clearRight();
|
||||
reloadByKeyword.cancel();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.customer-package-list {
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
|
||||
padding: var(--app-nav-height) 0 1rem 0;
|
||||
|
||||
.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);
|
||||
flex-direction: column;
|
||||
|
||||
.keyword {
|
||||
flex: 1;
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: .75rem;
|
||||
.search-input {
|
||||
--td-input-vertical-padding: 8px;
|
||||
|
||||
border: 1px solid rgba(148, 163, 184, .28);
|
||||
z-index: 1;
|
||||
background: #f8fbff;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.filter-menu {
|
||||
--td-spacer-1: 6px;
|
||||
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-top: -1.5rem;
|
||||
padding-top: .8rem;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(148, 163, 184, .18);
|
||||
border-radius: 0 0 1rem 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 1rem;
|
||||
|
||||
.item {
|
||||
.title-row,
|
||||
padding: 10px;
|
||||
|
||||
:deep(.t-cell__title) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
gap: .5rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
font-size: .875rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.description {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--td-text-color-secondary);
|
||||
margin-top: .35rem;
|
||||
display: flex;
|
||||
font-size: .8125rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.paid {
|
||||
color: var(--td-brand-color);
|
||||
font-size: .75rem;
|
||||
.line {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -189,4 +306,34 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.avatar .t-image__img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.customer-package-list {
|
||||
|
||||
.fallback {
|
||||
background: #115e59;
|
||||
}
|
||||
|
||||
.filters {
|
||||
background: #10161f;
|
||||
|
||||
.search-input {
|
||||
background: rgba(15, 23, 42, .72);
|
||||
border-color: rgba(148, 163, 184, .16);
|
||||
}
|
||||
|
||||
.filter-menu {
|
||||
background: #172033;
|
||||
border-color: rgba(148, 163, 184, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user