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

add entrance transition

Browse Source
This commit is contained in:
Timi
2026-08-24 16:16:43 +08:00
parent 2efce6de11
commit 05aad89706
54 changed files with 874 additions and 694 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/point/PointAccountDetail.vue
+4 -7
View File
@@ -1,9 +1,9 @@
<template>
<div v-can="permissionCodes.point.accountRead" class="point-account-detail">
<card-container v-if="customer">
<card-container v-if="customer" v-entrance-transition>
<customer-profile-card :customer="customer" />
</card-container>
<section v-if="account" class="account-card">
<section v-if="account" class="account-card" v-entrance-transition="70">
<div class="header">
<div>积分卡</div>
<div class="time dark-white" v-text="formatTimestamp(account.createdAt!)" />
@@ -14,15 +14,13 @@
</div>
<div class="id" v-text="account.id?.toUpperCase()" />
</section>
<t-cell-group v-if="account" title="积分统计" theme="card">
<t-cell-group v-if="account" title="积分统计" theme="card" v-entrance-transition="140">
<t-cell title="累计获得" :note="formatPoints(account.totalEarned)" />
<t-cell title="累计消耗" :note="formatPoints(account.totalConsumed)" />
<t-cell title="累计撤销" :note="formatPoints(account.totalRevoked)" />
<t-cell title="人工调整" :note="formatSignedPoints(account.totalAdjusted)" />
</t-cell-group>
<section v-if="customer" class="actions">
<section v-if="customer" class="actions" v-entrance-transition="210">
<t-button
v-can="permissionCodes.point.ledgerRead"
class="bg-white"
@@ -40,7 +38,6 @@
人工调整积分
</t-button>
</section>
<t-empty v-if="!account" :description="isLoading ? '正在加载积分账户' : '积分账户不存在或已被删除'" />
</div>
</template>
src/pages/point/PointAccountList.vue
+18 -17
View File
@@ -16,23 +16,24 @@
@scrolltolower="load"
>
<t-cell-group v-if="pageResult.list.length" class="list" theme="card">
<customer-cell
v-for="item in pageResult.list"
:key="item.id"
:customer="item.customer"
class="item"
arrow
hover
@click="toDetail(item)"
>
<template #description>
<span>余额：</span>
<span
class="balance"
:class="getBalanceTheme(item.balance)"
v-text="formatPoints(item.balance)" />
</template>
</customer-cell>
<customer-cell
v-entrance-transition="index * 30"
v-for="(item, index) in pageResult.list"
:key="item.id"
:customer="item.customer"
class="item"
arrow
hover
@click="toDetail(item)"
>
<template #description>
<span>余额：</span>
<span
class="balance"
:class="getBalanceTheme(item.balance)"
v-text="formatPoints(item.balance)" />
</template>
</customer-cell>
</t-cell-group>
<div class="load-state" v-text="loadStateText" />
</t-pull-down-refresh>
src/pages/point/PointAdjust.vue
+12 -6
View File
@@ -5,7 +5,7 @@
visible
content="人工调整会追加一条不可修改的 ADJUST 流水，请填写真实、明确的调整原因。"
/>
<t-form class="form" label-align="left" label-width="7rem">
<t-form class="form" label-align="left" label-width="7rem" v-entrance-transition>
<t-form-item label="客户" required-mark>
<div class="customer-actions">
<t-button
@@ -58,11 +58,17 @@
<span class="request-id" v-text="adjustRequestId" />
</t-form-item>
</t-form>
<div class="bottom-actions">
<t-button theme="primary" :loading="isSaving" :disabled="!canSubmit" @click="submitAdjust">
提交调整
</t-button>
</div>
<t-button
class="cell-button"
theme="primary"
:loading="isSaving"
:disabled="!canSubmit"
block
v-entrance-transition="70"
@click="submitAdjust"
>
提交调整
</t-button>
<customer-selector
v-model="selectedCustomerId"
v-model:visible="selectorVisible"
src/pages/point/PointLedgerDetail.vue
+6 -9
View File
@@ -1,13 +1,13 @@
<template>
<div v-can="permissionCodes.point.ledgerRead" class="point-ledger-detail">
<div v-if="customer" v-can="permissionCodes.point.ledgerRead" class="point-ledger-detail">
<customer-profile-card
v-if="customer"
class="customer-profile"
:customer="customer"
v-entrance-transition
@click="toCustomerDetail"
/>
<template v-if="ledger">
<t-cell-group title="积分流水" theme="card">
<t-cell-group title="积分流水" theme="card" v-entrance-transition="70">
<t-cell title="流水类型">
<template #note>
<t-tag
@@ -26,8 +26,7 @@
</t-cell>
<t-cell title="流水备注" :note="Text.display(ledger.remark)" />
</t-cell-group>
<t-cell-group title="触发事件" theme="card">
<t-cell-group title="触发事件" theme="card" v-entrance-transition="140">
<template v-if="triggerEvent">
<t-cell title="事件名称" :note="triggerEvent.name || '未命名事件'" />
<t-cell title="事件类型" :note="getEventValueTypeText(triggerEvent)" />
@@ -36,8 +35,7 @@
</template>
<div v-else class="empty" v-text="getEventEmptyText()" />
</t-cell-group>
<t-cell-group title="事件记录" theme="card">
<t-cell-group title="事件记录" theme="card" v-entrance-transition="210">
<template v-if="eventRecord">
<t-cell title="登记事件" :note="eventRecord.event?.name || triggerEvent?.name || '未知事件'" />
<t-cell title="登记时间">
@@ -54,8 +52,7 @@
</template>
<div v-else class="empty" v-text="getRecordEmptyText()" />
</t-cell-group>
<t-cell-group title="命中规则" theme="card">
<t-cell-group title="命中规则" theme="card" v-entrance-transition="280">
<template v-if="hitRule">
<t-cell title="规则名称" :note="hitRule.name || '未命名规则'" />
<t-cell title="触发类型" :note="getTriggerTypeText(hitRule.triggerType)" />
src/pages/point/PointLedgerList.vue
+39 -38
View File
@@ -72,45 +72,46 @@
@scrolltolower="load"
>
<t-cell-group v-if="pageResult.list.length" class="list" theme="card">
<t-cell
v-for="item in pageResult.list"
:key="item.id"
class="item"
:arrow="!!item.id"
:hover="!!item.id"
@click="toDetail(item)"
>
<template #leftIcon>
<t-image
v-if="getCustomerPhotoURL(item.customer!, 64)"
:src="getCustomerPhotoURL(item.customer!, 64)"
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">
<t-tag
class="type-icon"
:theme="item.pointDelta && 0 < item.pointDelta ? 'success' : 'danger'"
:content="getLedgerShortType(item)"
variant="outline"
<t-cell
v-entrance-transition="index * 30"
v-for="(item, index) in pageResult.list"
:key="item.id"
class="item"
:arrow="!!item.id"
:hover="!!item.id"
@click="toDetail(item)"
>
<template #leftIcon>
<t-image
v-if="getCustomerPhotoURL(item.customer!, 64)"
:src="getCustomerPhotoURL(item.customer!, 64)"
fit="cover"
class="avatar"
/>
<div class="name" v-text="item.customer?.name" />
</div>
</template>
<template #description>
<div class="description">
<div v-text="`时间：${Time.toPassedDateTime(item.occurredAt)}`" />
<div v-text="`余额：${item.balanceBefore ?? 0} → ${item.balanceAfter ?? 0}`" />
<div v-text="item.remark" />
</div>
</template>
<template #note>
<div class="delta keep-text" :class="getLedgerTheme(item)" v-text="getLedgerDelta(item)" />
</template>
</t-cell>
<div v-else class="avatar fallback" v-text="(item.customer?.name || item.customer?.code || '客').slice(0, 1)" />
</template>
<template #title>
<div class="title">
<t-tag
class="type-icon"
:theme="item.pointDelta && 0 < item.pointDelta ? 'success' : 'danger'"
:content="getLedgerShortType(item)"
variant="outline"
/>
<div class="name" v-text="item.customer?.name" />
</div>
</template>
<template #description>
<div class="description">
<div v-text="`时间：${Time.toPassedDateTime(item.occurredAt)}`" />
<div v-text="`余额：${item.balanceBefore ?? 0} → ${item.balanceAfter ?? 0}`" />
<div v-text="item.remark" />
</div>
</template>
<template #note>
<div class="delta keep-text" :class="getLedgerTheme(item)" v-text="getLedgerDelta(item)" />
</template>
</t-cell>
</t-cell-group>
<div class="load-state" v-text="loadStateText" />
</t-pull-down-refresh>
src/pages/point/PointRuleDetail.vue
+11 -11
View File
@@ -1,6 +1,6 @@
<template>
<div v-can="permissionCodes.pointRule.read" class="point-rule-detail">
<section v-if="rule" class="rule-header">
<section v-if="rule" class="rule-header" v-entrance-transition>
<div class="point-icon" :class="{ consume: isConsumeRule }">
<t-icon name="money" size="1.75rem" />
</div>
@@ -12,12 +12,11 @@
<div class="point-value" v-text="rulePointText" />
</div>
</section>
<t-cell-group v-if="rule" title="基本信息" theme="card">
<t-cell-group v-if="rule" title="基本信息" theme="card" v-entrance-transition="70">
<t-cell title="所属门店" :note="storeName" />
<t-cell
title="登记事件"
:note="event?.name || rule.eventId || '未绑定事件'"
:note="event?.name || '未绑定事件'"
:arrow="canReadEvent && !!event?.id"
:hover="canReadEvent && !!event?.id"
@click="toEventDetail"
@@ -30,8 +29,7 @@
</t-cell>
<t-cell title="规则备注" :note="Text.display(rule.remark)" />
</t-cell-group>
<t-cell-group v-if="rule" title="积分配置" theme="card">
<t-cell-group v-if="rule" title="积分配置" theme="card" v-entrance-transition="140">
<t-cell title="触发类型" :note="getTriggerText(rule.triggerType)" />
<t-cell title="积分值模式" :note="getModeText(rule.pointMode)" />
<t-cell v-if="rule.pointMode === 'FIXED'" title="固定积分" :note="formatPointValue(rule.pointValue)" />
@@ -45,12 +43,15 @@
</template>
</t-cell>
</t-cell-group>
<t-cell-group v-if="tierTextList.length" title="积分分档" theme="card">
<t-cell-group
v-if="tierTextList.length"
title="积分分档"
theme="card"
v-entrance-transition="210"
>
<t-cell v-for="(text, index) in tierTextList" :key="index" :title="`第 ${index + 1} 档`" :note="text" />
</t-cell-group>
<t-cell-group v-if="rule" title="其他配置" theme="card">
<t-cell-group v-if="rule" title="其他配置" theme="card" v-entrance-transition="280">
<t-cell title="规则优先级" :note="formatNumber(rule.priority)" />
<t-cell title="命中后停止匹配" :note="rule.exclusive ? '是' : '否'" />
<t-cell title="生效开始" :note="formatDate(rule.beginAt)" />
@@ -58,7 +59,6 @@
<t-cell title="创建时间" :note="formatDate(rule.createdAt, '未知时间')" />
<t-cell title="更新时间" :note="formatDate(rule.updatedAt, '未知时间')" />
</t-cell-group>
<t-empty v-else :description="isLoading ? '正在加载积分规则' : '积分规则不存在'" />
</div>
</template>
src/pages/point/PointRuleEdit.vue
+19 -26
View File
@@ -1,7 +1,7 @@
<template>
<div v-can="pageAccess" class="point-rule-edit">
<t-form class="form" label-align="left" label-width="7rem">
<card-container>
<card-container v-entrance-transition>
<t-form-item v-if="isGlobalManager" label="门店" required-mark :arrow="isCreateMode" @click="openStorePicker">
<span class="picker-text" v-text="selectedStoreName" />
</t-form-item>
@@ -18,7 +18,7 @@
<t-textarea v-model.trim="formModel.remark" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="规则说明" />
</t-form-item>
</card-container>
<card-container>
<card-container v-entrance-transition="70">
<t-form-item label="触发类型" arrow @click="openTriggerPicker">
<span class="picker-text" v-text="getTriggerText(formModel.triggerType)" />
</t-form-item>
@@ -68,7 +68,7 @@
<point-rule-tier-editor v-model="formModel.tiers" :value-unit="selectedSourceValueUnit" />
</template>
</card-container>
<card-container>
<card-container v-entrance-transition="140">
<t-form-item label="生效开始" arrow @click="openBeginAtPicker">
<div class="time-value">
<span class="picker-text" v-text="formModel.beginAtText || '不限'" />
@@ -82,24 +82,23 @@
</div>
</t-form-item>
</card-container>
<card-container tips="命中规则并执行积分动作后不再匹配后续规则">
<card-container tips="命中规则并执行积分动作后不再匹配后续规则" v-entrance-transition="210">
<t-form-item label="独占匹配" content-align="right">
<t-switch size="small" v-model="formModel.exclusive" />
</t-form-item>
</card-container>
</t-form>
<div v-if="!isCreateMode" class="bottom-actions">
<t-button
v-can="permissionCodes.pointRule.delete"
class="delete bg-white"
theme="danger"
variant="outline"
:loading="isRemoving"
@click="confirmRemove"
>
删除
</t-button>
</div>
<t-button
v-if="!isCreateMode"
class="delete red bg-white cell-button"
v-can="permissionCodes.pointRule.delete"
:loading="isRemoving"
variant="text"
block
@click="confirmRemove"
>
删除
</t-button>
</div>
<t-popup v-model="storePickerVisible" placement="bottom">
<t-picker
@@ -268,7 +267,7 @@ const formModel = reactive({
const eventList = ref<EventItem[]>([]);
const selectedStoreName = computed(() => currentStoreStore.storeList.find(item => item.id === formModel.storeId)?.name || "请选择门店");
const selectedEventName = computed(() => eventList.value.find(item => item.id === formModel.eventId)?.name || (formModel.eventId ? `事件 ${formModel.eventId}` : "请选择登记事件"));
const selectedEventName = computed(() => eventList.value.find(item => item.id === formModel.eventId)?.name || "请选择登记事件");
const storePickerVisible = ref(false);
const storePickerDraft = ref<PickerValue[]>([]);
const storePickerColumns = computed(() => [
@@ -295,7 +294,7 @@ const sourceEventPickerColumns = computed(() => [
]);
const selectedSourceEventName = computed(() => selectedSourceEvent.value
? `${selectedSourceEvent.value.name || "未命名事件"}（${getEventValueUnitText(selectedSourceEvent.value.valueUnit)}）`
: formModel.sourceEventId ? `事件 ${formModel.sourceEventId}` : "请选择来源事件");
: "请选择来源事件");
let tierKey = 0;
@@ -922,14 +921,8 @@ onUnmounted(() => navBarStore.clearRight());
}
}
.bottom-actions {
margin: 0 1rem;
padding-top: 1rem;
display: flex;
.delete {
width: 100%;
}
.delete {
margin-top: 1rem;
}
}
src/pages/point/PointRuleList.vue
+2 -1
View File
@@ -19,11 +19,12 @@
>
<t-cell-group v-if="pageResult.list.length" class="list" theme="card">
<t-cell
v-for="item in pageResult.list"
v-for="(item, index) in pageResult.list"
:key="item.id"
class="item"
:arrow="!!item.id"
:hover="!!item.id"
v-entrance-transition="index * 30"
@click="toDetail(item)"
>
<template #left-icon>
src/pages/point/PointRuleSort.vue
+7 -2
View File
@@ -1,6 +1,6 @@
<template>
<div v-can="permissionCodes.pointRule.update" class="point-rule-sort">
<div class="tip" v-text="'按住右侧拖动手柄调整规则顺序，保存后生效；仅显示启用规则'" />
<div class="tip" v-text="'按住右侧拖动手柄调整规则顺序，保存后生效；仅显示启用规则'" v-entrance-transition />
<div class="items">
<t-cell-group v-if="ruleList.length" theme="card">
<vue-draggable-next
@@ -15,7 +15,12 @@
:disabled="isLoading || isSaving"
@change="sortDirty = true"
>
<t-cell v-for="item in ruleList" :key="item.id" class="cell">
<t-cell
class="cell"
v-for="(item, index) in ruleList"
:key="item.id"
v-entrance-transition="index * 30"
>
<template #title>
<div class="title" v-text="item.name || '未命名规则'" />
</template>