update filter style
This commit is contained in:
Timi
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.customerFollowUpReminder.read" class="follow-up-reminder-list">
|
||||
<div class="filter bg-white">
|
||||
<div class="filters glass">
|
||||
<t-input
|
||||
v-model="customerSearchKeyword"
|
||||
class="customer"
|
||||
@@ -41,114 +41,98 @@
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
class="list-wrap"
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="refresh"
|
||||
@scrolltolower="fetch"
|
||||
>
|
||||
<t-cell-group class="summary" theme="card">
|
||||
<t-cell title="提醒数量" :note="`共 ${pageResult.total} 条`" />
|
||||
<t-cell v-if="dateFilterType !== 'all'" title="提醒时间" :note="dateFilterLabel" />
|
||||
<t-cell v-if="selectedCustomer || selectedResponsibleId" title="筛选条件">
|
||||
<template #note>
|
||||
<div class="selected-filter">
|
||||
<t-tag
|
||||
v-if="selectedCustomer"
|
||||
theme="primary"
|
||||
variant="light-outline"
|
||||
:content="`客户：${selectedCustomer.name || selectedCustomer.code || '未命名'}`"
|
||||
/>
|
||||
<t-tag
|
||||
v-if="selectedResponsibleId"
|
||||
theme="primary"
|
||||
variant="light-outline"
|
||||
:content="`负责人：${selectedResponsibleName}`"
|
||||
/>
|
||||
<t-button size="extra-small" variant="text" @click="clearFilters">清空筛选</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<t-cell-group v-if="pageResult.list.length" class="items fix-last-cell-line empty-cell-title-margin" theme="card">
|
||||
<t-swipe-cell
|
||||
v-for="(item, index) in pageResult.list"
|
||||
:key="item.id || index"
|
||||
class="item"
|
||||
>
|
||||
<t-cell
|
||||
v-entrance-transition="index * 30"
|
||||
class="cell"
|
||||
arrow
|
||||
@click="toDetail(item)"
|
||||
<div class="list-wrap">
|
||||
<customer-profile-card class="customer" :customer="selectedCustomer" />
|
||||
<t-cell-group class="summary" theme="card">
|
||||
<t-cell title="提醒数量" :note="`共 ${pageResult.total} 条`" />
|
||||
<t-cell v-if="dateFilterType !== 'all'" title="提醒时间" :note="dateFilterLabel" />
|
||||
<t-cell v-if="selectedResponsibleId" title="负责人" :note="selectedResponsibleName" />
|
||||
</t-cell-group>
|
||||
<t-cell-group v-if="pageResult.list.length" class="items fix-last-cell-line empty-cell-title-margin" theme="card">
|
||||
<t-swipe-cell
|
||||
v-for="(item, index) in pageResult.list"
|
||||
:key="item.id || index"
|
||||
class="item"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<t-image
|
||||
v-if="getCustomerPhotoURL(item.customer, 64)"
|
||||
:src="getCustomerPhotoURL(item.customer, 64)"
|
||||
:alt="getCustomerName(item)"
|
||||
fit="cover"
|
||||
class="avatar"
|
||||
/>
|
||||
<div v-else class="avatar fallback" v-text="getCustomerName(item).slice(0, 1)" />
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<div class="name-channel">
|
||||
<span class="text-bold" v-text="getCustomerName(item)" />
|
||||
<t-tag
|
||||
v-if="item.notifyChannelList?.includes('INTERNAL')"
|
||||
size="small"
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
content="站内信"
|
||||
/>
|
||||
<t-tag
|
||||
v-if="item.notifyChannelList?.includes('SMS')"
|
||||
size="small"
|
||||
theme="warning"
|
||||
variant="outline"
|
||||
content="短信"
|
||||
/>
|
||||
<t-cell
|
||||
v-entrance-transition="index * 30"
|
||||
class="cell"
|
||||
arrow
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<t-image
|
||||
v-if="getCustomerPhotoURL(item.customer, 64)"
|
||||
:src="getCustomerPhotoURL(item.customer, 64)"
|
||||
:alt="getCustomerName(item)"
|
||||
fit="cover"
|
||||
class="avatar"
|
||||
/>
|
||||
<div v-else class="avatar fallback" v-text="getCustomerName(item).slice(0, 1)" />
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<div class="name-channel">
|
||||
<span class="text-bold" v-text="getCustomerName(item)" />
|
||||
<t-tag
|
||||
v-if="item.notifyChannelList?.includes('INTERNAL')"
|
||||
size="small"
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
content="站内信"
|
||||
/>
|
||||
<t-tag
|
||||
v-if="item.notifyChannelList?.includes('SMS')"
|
||||
size="small"
|
||||
theme="warning"
|
||||
variant="outline"
|
||||
content="短信"
|
||||
/>
|
||||
</div>
|
||||
<t-tag size="small" :theme="getStatusTheme(item.status)" :content="getStatusText(item.status)" />
|
||||
</div>
|
||||
<t-tag size="small" :theme="getStatusTheme(item.status)" :content="getStatusText(item.status)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="description">
|
||||
<div class="content clip-text" v-text="getContentSummary(item.content)" />
|
||||
<div class="time-responsible">
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="description">
|
||||
<div class="content clip-text" v-text="getContentSummary(item.content)" />
|
||||
<div class="time-responsible">
|
||||
<span
|
||||
class="remind-time"
|
||||
:class="getReminderTimeClass(item)"
|
||||
v-text="getReminderTimeText(item.remindAt)"
|
||||
/>
|
||||
<span v-text="`负责人：${getResponsibleName(item)}`" />
|
||||
<span v-text="`负责人：${getResponsibleName(item)}`" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
<template #right>
|
||||
<div class="swipe-actions">
|
||||
<t-button
|
||||
v-if="canComplete && item.status === 'PENDING'"
|
||||
class="complete swipe-cell-button"
|
||||
variant="text"
|
||||
:loading="operatingId === item.id && operatingType === 'complete'"
|
||||
@click.stop="confirmComplete(item)"
|
||||
>完成</t-button>
|
||||
<t-button
|
||||
v-if="canDelete"
|
||||
class="delete swipe-cell-button"
|
||||
variant="text"
|
||||
:loading="operatingId === item.id && operatingType === 'delete'"
|
||||
@click.stop="confirmDelete(item)"
|
||||
>删除</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
<template #right>
|
||||
<div class="swipe-actions">
|
||||
<t-button
|
||||
v-if="canComplete && item.status === 'PENDING'"
|
||||
class="complete swipe-cell-button"
|
||||
variant="text"
|
||||
:loading="operatingId === item.id && operatingType === 'complete'"
|
||||
@click.stop="confirmComplete(item)"
|
||||
>完成</t-button>
|
||||
<t-button
|
||||
v-if="canDelete"
|
||||
class="delete swipe-cell-button"
|
||||
variant="text"
|
||||
:loading="operatingId === item.id && operatingType === 'delete'"
|
||||
@click.stop="confirmDelete(item)"
|
||||
>删除</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-swipe-cell>
|
||||
</t-cell-group>
|
||||
<div class="center-tips" v-text="isLoading ? '正在加载提醒' : pageResult.list.length ? (isNoMore ? '已经到底了' : '上拉加载更多') : '暂无跟进提醒'" />
|
||||
</t-swipe-cell>
|
||||
</t-cell-group>
|
||||
<div class="center-tips" v-text="isLoading ? '正在加载提醒' : pageResult.list.length ? (isNoMore ? '已经到底了' : '上拉加载更多') : '暂无跟进提醒'" />
|
||||
</div>
|
||||
</t-pull-down-refresh>
|
||||
<customer-selector
|
||||
v-model="selectedCustomerId"
|
||||
@@ -676,7 +660,7 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
.follow-up-reminder-list {
|
||||
padding: var(--app-nav-height) 0 1rem;
|
||||
|
||||
.filter {
|
||||
.filters {
|
||||
top: var(--app-nav-height);
|
||||
left: 0;
|
||||
right: 0;
|
||||
@@ -684,8 +668,6 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
display: flex;
|
||||
padding: .75rem 1rem;
|
||||
position: sticky;
|
||||
background: #f5f5f8;
|
||||
box-shadow: var(--td-shadow-1);
|
||||
flex-direction: column;
|
||||
|
||||
.customer {
|
||||
@@ -694,7 +676,7 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
|
||||
width: 100%;
|
||||
border: 1px solid var(--td-component-border);
|
||||
background: var(--td-bg-color-container);
|
||||
z-index: 1;
|
||||
padding-right: .3rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
@@ -703,11 +685,10 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
--td-spacer-1: 6px;
|
||||
|
||||
width: 100%;
|
||||
border: 1px solid rgba(148, 163, 184, .18);
|
||||
z-index: -1;
|
||||
border: 1px solid var(--td-component-border);
|
||||
overflow: hidden;
|
||||
margin-top: -1rem;
|
||||
background: #fff;
|
||||
background: #FFF;
|
||||
border-top: none;
|
||||
padding-top: .8rem;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
@@ -733,10 +714,12 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
padding: 1rem 0;
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.summary {
|
||||
margin-bottom: 1rem;
|
||||
.customer {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.items {
|
||||
|
||||
Reference in New Issue
Block a user