feat: 完成会员消息触达模块页面与交互
This commit is contained in:
@@ -0,0 +1,273 @@
|
||||
<script setup lang="ts">
|
||||
import type { TableColumnType } from 'ant-design-vue';
|
||||
|
||||
import type {
|
||||
MemberMessageReachChannel,
|
||||
MemberMessageReachDetailDto,
|
||||
MemberMessageReachRecipientDto,
|
||||
} from '#/api/member/message-reach';
|
||||
|
||||
import { Button, Drawer, Empty, Spin, Table, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatDateTime,
|
||||
formatInteger,
|
||||
formatPercent,
|
||||
MESSAGE_CHANNEL_COLOR_MAP,
|
||||
MESSAGE_CHANNEL_TEXT_MAP,
|
||||
MESSAGE_RECIPIENT_STATUS_COLOR_MAP,
|
||||
MESSAGE_RECIPIENT_STATUS_TEXT_MAP,
|
||||
MESSAGE_STATUS_COLOR_MAP,
|
||||
MESSAGE_STATUS_TEXT_MAP,
|
||||
} from '../composables/message-reach-page/helpers';
|
||||
|
||||
defineProps<{
|
||||
detail: MemberMessageReachDetailDto | null;
|
||||
loading: boolean;
|
||||
open: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
}>();
|
||||
|
||||
const recipientColumns: TableColumnType<MemberMessageReachRecipientDto>[] = [
|
||||
{
|
||||
title: '会员ID',
|
||||
dataIndex: 'memberId',
|
||||
key: 'memberId',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '渠道',
|
||||
dataIndex: 'channel',
|
||||
key: 'channel',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '联系方式',
|
||||
key: 'contact',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '发送时间',
|
||||
dataIndex: 'sentAt',
|
||||
key: 'sentAt',
|
||||
width: 170,
|
||||
},
|
||||
{
|
||||
title: '已读时间',
|
||||
dataIndex: 'readAt',
|
||||
key: 'readAt',
|
||||
width: 170,
|
||||
},
|
||||
{
|
||||
title: '转化时间',
|
||||
dataIndex: 'convertedAt',
|
||||
key: 'convertedAt',
|
||||
width: 170,
|
||||
},
|
||||
{
|
||||
title: '错误信息',
|
||||
dataIndex: 'errorMessage',
|
||||
key: 'errorMessage',
|
||||
ellipsis: true,
|
||||
},
|
||||
];
|
||||
|
||||
function resolveContact(record: Record<string, any>) {
|
||||
const channel = String(record.channel || '');
|
||||
if (channel === 'sms') {
|
||||
return String(record.mobile || '--');
|
||||
}
|
||||
if (channel === 'wechat-mini') {
|
||||
return String(record.openId || '--');
|
||||
}
|
||||
return String(record.memberId || '--');
|
||||
}
|
||||
|
||||
function resolveChannelColor(channel: unknown) {
|
||||
return (
|
||||
MESSAGE_CHANNEL_COLOR_MAP[channel as MemberMessageReachChannel] || 'default'
|
||||
);
|
||||
}
|
||||
|
||||
function resolveChannelText(channel: unknown) {
|
||||
return (
|
||||
MESSAGE_CHANNEL_TEXT_MAP[channel as MemberMessageReachChannel] || '未知渠道'
|
||||
);
|
||||
}
|
||||
|
||||
function resolveRecipientStatusColor(status: unknown) {
|
||||
return MESSAGE_RECIPIENT_STATUS_COLOR_MAP[
|
||||
status as 'failed' | 'pending' | 'sent'
|
||||
];
|
||||
}
|
||||
|
||||
function resolveRecipientStatusText(status: unknown) {
|
||||
return MESSAGE_RECIPIENT_STATUS_TEXT_MAP[
|
||||
status as 'failed' | 'pending' | 'sent'
|
||||
];
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer :open="open" width="820" title="消息详情" @close="emit('close')">
|
||||
<Spin :spinning="loading">
|
||||
<template v-if="detail">
|
||||
<section class="mmr-detail-section">
|
||||
<div class="mmr-detail-title-row">
|
||||
<div class="mmr-detail-title">{{ detail.title }}</div>
|
||||
<Tag :color="MESSAGE_STATUS_COLOR_MAP[detail.status]">
|
||||
{{ MESSAGE_STATUS_TEXT_MAP[detail.status] }}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
<div class="mmr-detail-meta">
|
||||
<div>
|
||||
<span class="label">推送渠道：</span>
|
||||
<span class="channels">
|
||||
<Tag
|
||||
v-for="item in detail.channels"
|
||||
:key="`detail-channel-${item}`"
|
||||
:color="resolveChannelColor(item)"
|
||||
>
|
||||
{{ resolveChannelText(item) }}
|
||||
</Tag>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">目标人群：</span>
|
||||
<span>{{ detail.audienceText }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">定时发送：</span>
|
||||
<span>{{ formatDateTime(detail.scheduledAt) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">实际发送：</span>
|
||||
<span>{{ formatDateTime(detail.sentAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mmr-detail-section">
|
||||
<div class="mmr-detail-stat-grid">
|
||||
<div class="mmr-detail-stat-item">
|
||||
<div class="label">预计触达</div>
|
||||
<div class="value">
|
||||
{{ formatInteger(detail.estimatedReachCount) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mmr-detail-stat-item">
|
||||
<div class="label">发送成功</div>
|
||||
<div class="value">{{ formatInteger(detail.sentCount) }}</div>
|
||||
</div>
|
||||
<div class="mmr-detail-stat-item">
|
||||
<div class="label">已读人数</div>
|
||||
<div class="value">{{ formatInteger(detail.readCount) }}</div>
|
||||
</div>
|
||||
<div class="mmr-detail-stat-item">
|
||||
<div class="label">转化人数</div>
|
||||
<div class="value">
|
||||
{{ formatInteger(detail.convertedCount) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mmr-detail-stat-item">
|
||||
<div class="label">打开率</div>
|
||||
<div class="value">{{ formatPercent(detail.openRate) }}</div>
|
||||
</div>
|
||||
<div class="mmr-detail-stat-item">
|
||||
<div class="label">转化率</div>
|
||||
<div class="value">
|
||||
{{ formatPercent(detail.conversionRate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mmr-detail-section">
|
||||
<div class="mmr-detail-section-title">消息内容</div>
|
||||
<div class="mmr-detail-content">{{ detail.content }}</div>
|
||||
<div v-if="detail.lastError" class="mmr-detail-error">
|
||||
最后错误：{{ detail.lastError }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mmr-detail-section">
|
||||
<div class="mmr-detail-section-title">收件明细</div>
|
||||
<div class="mmr-recipient-table">
|
||||
<Table
|
||||
:row-key="
|
||||
(record: MemberMessageReachRecipientDto) =>
|
||||
`${record.memberId}-${record.channel}-${record.sentAt || ''}`
|
||||
"
|
||||
:columns="recipientColumns"
|
||||
:data-source="detail.recipients"
|
||||
:pagination="{ pageSize: 8, showSizeChanger: false }"
|
||||
size="small"
|
||||
:scroll="{ x: 1040 }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'channel'">
|
||||
<Tag :color="resolveChannelColor(record.channel)">
|
||||
{{ resolveChannelText(record.channel) }}
|
||||
</Tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<Tag :color="resolveRecipientStatusColor(record.status)">
|
||||
{{ resolveRecipientStatusText(record.status) }}
|
||||
</Tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'contact'">
|
||||
<span>{{ resolveContact(record) }}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'sentAt'">
|
||||
<span class="mmr-time-text">{{
|
||||
formatDateTime(record.sentAt)
|
||||
}}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'readAt'">
|
||||
<span class="mmr-time-text">{{
|
||||
formatDateTime(record.readAt)
|
||||
}}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'convertedAt'">
|
||||
<span class="mmr-time-text">{{
|
||||
formatDateTime(record.convertedAt)
|
||||
}}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'errorMessage'">
|
||||
<span
|
||||
:title="record.errorMessage || '--'"
|
||||
class="mmr-error-text"
|
||||
>
|
||||
{{ record.errorMessage || '--' }}
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<Empty v-else description="暂无消息详情" />
|
||||
</Spin>
|
||||
|
||||
<template #footer>
|
||||
<Button @click="emit('close')">关闭</Button>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,209 @@
|
||||
<script setup lang="ts">
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
import type {
|
||||
MemberMessageAudienceType,
|
||||
MemberMessageReachChannel,
|
||||
MemberMessageScheduleType,
|
||||
} from '#/api/member/message-reach';
|
||||
import type { MessageReachEditorForm } from '#/views/member/message-reach/types';
|
||||
|
||||
import {
|
||||
Button,
|
||||
DatePicker,
|
||||
Drawer,
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
Spin,
|
||||
Tag,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
MESSAGE_AUDIENCE_TAG_OPTIONS,
|
||||
MESSAGE_AUDIENCE_TYPE_OPTIONS,
|
||||
MESSAGE_REACH_CHANNEL_OPTIONS,
|
||||
MESSAGE_SCHEDULE_TYPE_OPTIONS,
|
||||
} from '../composables/message-reach-page/constants';
|
||||
import { formatInteger } from '../composables/message-reach-page/helpers';
|
||||
|
||||
defineProps<{
|
||||
audienceEstimateCount: number;
|
||||
canManage: boolean;
|
||||
estimatingAudience: boolean;
|
||||
form: MessageReachEditorForm;
|
||||
open: boolean;
|
||||
submitting: boolean;
|
||||
title: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
(event: 'setAudienceType', value: MemberMessageAudienceType): void;
|
||||
(event: 'setChannel', value: MemberMessageReachChannel): void;
|
||||
(event: 'setContent', value: string): void;
|
||||
(event: 'setScheduleType', value: MemberMessageScheduleType): void;
|
||||
(event: 'setScheduledAt', value: Dayjs | null): void;
|
||||
(event: 'setTitle', value: string): void;
|
||||
(event: 'submitDraft'): void;
|
||||
(event: 'submitSend'): void;
|
||||
(event: 'switchToTemplateTab'): void;
|
||||
(event: 'toggleAudienceTag', value: string): void;
|
||||
}>();
|
||||
|
||||
const CheckableTag = Tag.CheckableTag;
|
||||
const audienceTypeOptions = MESSAGE_AUDIENCE_TYPE_OPTIONS.map((item) => ({
|
||||
...item,
|
||||
}));
|
||||
|
||||
function handleChannelChange(
|
||||
value: MemberMessageReachChannel,
|
||||
checked: boolean,
|
||||
) {
|
||||
if (!checked) {
|
||||
return;
|
||||
}
|
||||
emit('setChannel', value);
|
||||
}
|
||||
|
||||
function handleScheduleTypeChange(
|
||||
value: MemberMessageScheduleType,
|
||||
checked: boolean,
|
||||
) {
|
||||
if (!checked) {
|
||||
return;
|
||||
}
|
||||
emit('setScheduleType', value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer :open="open" :title="title" width="560" @close="emit('close')">
|
||||
<Form layout="vertical" class="mmr-editor-form">
|
||||
<Form.Item label="消息标题" required>
|
||||
<Input
|
||||
:value="form.title"
|
||||
placeholder="如：新品上线通知"
|
||||
@update:value="(value) => emit('setTitle', String(value ?? ''))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="推送渠道" required>
|
||||
<div class="mmr-pill-group">
|
||||
<CheckableTag
|
||||
v-for="item in MESSAGE_REACH_CHANNEL_OPTIONS"
|
||||
:key="item.value"
|
||||
:checked="form.channels.includes(item.value)"
|
||||
class="mmr-pill"
|
||||
@change="(checked) => handleChannelChange(item.value, checked)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</CheckableTag>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="目标人群" required>
|
||||
<Select
|
||||
:value="form.audienceType"
|
||||
:options="audienceTypeOptions"
|
||||
@update:value="
|
||||
(value) =>
|
||||
emit(
|
||||
'setAudienceType',
|
||||
String(value || 'all') as MemberMessageAudienceType,
|
||||
)
|
||||
"
|
||||
/>
|
||||
|
||||
<div v-if="form.audienceType === 'tag'" class="mmr-tag-panel">
|
||||
<div class="mmr-pill-group">
|
||||
<CheckableTag
|
||||
v-for="item in MESSAGE_AUDIENCE_TAG_OPTIONS"
|
||||
:key="item.value"
|
||||
:checked="form.audienceTags.includes(item.value)"
|
||||
class="mmr-pill"
|
||||
@change="() => emit('toggleAudienceTag', item.value)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</CheckableTag>
|
||||
</div>
|
||||
<div class="mmr-reach-row">
|
||||
<Spin :spinning="estimatingAudience" size="small">
|
||||
预计触达 {{ formatInteger(audienceEstimateCount) }}人
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="消息内容" required>
|
||||
<Input.TextArea
|
||||
:value="form.content"
|
||||
:rows="5"
|
||||
placeholder="支持变量：{name}姓名 {level}等级"
|
||||
@update:value="(value) => emit('setContent', String(value ?? ''))"
|
||||
/>
|
||||
<div class="mmr-form-hint">可使用变量实现个性化推送</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="发送时间" required>
|
||||
<div class="mmr-pill-group">
|
||||
<CheckableTag
|
||||
v-for="item in MESSAGE_SCHEDULE_TYPE_OPTIONS"
|
||||
:key="item.value"
|
||||
:checked="form.scheduleType === item.value"
|
||||
class="mmr-pill"
|
||||
@change="
|
||||
(checked) =>
|
||||
handleScheduleTypeChange(
|
||||
item.value as MemberMessageScheduleType,
|
||||
checked,
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ item.label }}
|
||||
</CheckableTag>
|
||||
</div>
|
||||
|
||||
<DatePicker
|
||||
v-if="form.scheduleType === 'scheduled'"
|
||||
class="mmr-scheduled-picker"
|
||||
show-time
|
||||
:value="form.scheduledAt ?? undefined"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
@update:value="
|
||||
(value) => emit('setScheduledAt', (value as Dayjs) || null)
|
||||
"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item class="mmr-template-link-wrap">
|
||||
<Button
|
||||
type="link"
|
||||
class="mmr-template-link"
|
||||
@click="emit('switchToTemplateTab')"
|
||||
>
|
||||
从模板选择
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<template #footer>
|
||||
<div class="mmr-drawer-footer">
|
||||
<Button
|
||||
:disabled="!canManage || submitting"
|
||||
@click="emit('submitDraft')"
|
||||
>
|
||||
存为草稿
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
:disabled="!canManage || submitting"
|
||||
:loading="submitting"
|
||||
@click="emit('submitSend')"
|
||||
>
|
||||
发送
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import type {
|
||||
MemberMessageReachChannel,
|
||||
MemberMessageReachStatus,
|
||||
} from '#/api/member/message-reach';
|
||||
import type { MessageReachFilterForm } from '#/views/member/message-reach/types';
|
||||
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
MESSAGE_REACH_CHANNEL_FILTER_OPTIONS,
|
||||
MESSAGE_REACH_STATUS_FILTER_OPTIONS,
|
||||
} from '../composables/message-reach-page/constants';
|
||||
|
||||
defineProps<{
|
||||
canManage: boolean;
|
||||
filters: MessageReachFilterForm;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'create'): void;
|
||||
(event: 'search'): void;
|
||||
(event: 'update:channel', value: '' | MemberMessageReachChannel): void;
|
||||
(event: 'update:keyword', value: string): void;
|
||||
(event: 'update:status', value: '' | MemberMessageReachStatus): void;
|
||||
}>();
|
||||
|
||||
function handleStatusChange(value: unknown) {
|
||||
emit('update:status', String(value || '') as '' | MemberMessageReachStatus);
|
||||
emit('search');
|
||||
}
|
||||
|
||||
function handleChannelChange(value: unknown) {
|
||||
emit('update:channel', String(value || '') as '' | MemberMessageReachChannel);
|
||||
emit('search');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mmr-toolbar">
|
||||
<Select
|
||||
class="mmr-select"
|
||||
:value="filters.status || ''"
|
||||
:options="MESSAGE_REACH_STATUS_FILTER_OPTIONS"
|
||||
@update:value="(value) => handleStatusChange(value)"
|
||||
/>
|
||||
|
||||
<Select
|
||||
class="mmr-select"
|
||||
:value="filters.channel || ''"
|
||||
:options="MESSAGE_REACH_CHANNEL_FILTER_OPTIONS"
|
||||
@update:value="(value) => handleChannelChange(value)"
|
||||
/>
|
||||
|
||||
<Input
|
||||
class="mmr-keyword-input"
|
||||
:value="filters.keyword"
|
||||
placeholder="搜索消息标题"
|
||||
allow-clear
|
||||
@update:value="(value) => emit('update:keyword', String(value ?? ''))"
|
||||
@press-enter="emit('search')"
|
||||
/>
|
||||
|
||||
<span class="mmr-spacer"></span>
|
||||
|
||||
<Button type="primary" :disabled="!canManage" @click="emit('create')">
|
||||
创建消息
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
import type { MessageReachStatsViewModel } from '../types';
|
||||
|
||||
import { Spin } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatInteger,
|
||||
formatPercent,
|
||||
} from '../composables/message-reach-page/helpers';
|
||||
|
||||
defineProps<{
|
||||
loading: boolean;
|
||||
stats: MessageReachStatsViewModel;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Spin :spinning="loading">
|
||||
<div class="mmr-stats">
|
||||
<div class="mmr-stat-card">
|
||||
<div class="mmr-stat-label">本月发送</div>
|
||||
<div class="mmr-stat-value">
|
||||
{{ formatInteger(stats.monthlySentCount) }}
|
||||
<span class="mmr-stat-unit">条</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mmr-stat-card">
|
||||
<div class="mmr-stat-label">触达人数</div>
|
||||
<div class="mmr-stat-value">
|
||||
{{ formatInteger(stats.reachMemberCount) }}
|
||||
<span class="mmr-stat-unit">人</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mmr-stat-card">
|
||||
<div class="mmr-stat-label">打开率</div>
|
||||
<div class="mmr-stat-value">
|
||||
{{ formatPercent(stats.openRate) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mmr-stat-card">
|
||||
<div class="mmr-stat-label">转化率</div>
|
||||
<div class="mmr-stat-value">
|
||||
{{ formatPercent(stats.conversionRate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
</template>
|
||||
@@ -0,0 +1,221 @@
|
||||
<script setup lang="ts">
|
||||
import type { TableColumnType } from 'ant-design-vue';
|
||||
|
||||
import type {
|
||||
MemberMessageReachChannel,
|
||||
MemberMessageReachListItemDto,
|
||||
MemberMessageReachStatus,
|
||||
} from '#/api/member/message-reach';
|
||||
import type { MessageReachPager } from '#/views/member/message-reach/types';
|
||||
|
||||
import { Button, Pagination, Table, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatInteger,
|
||||
formatPercent,
|
||||
MESSAGE_CHANNEL_COLOR_MAP,
|
||||
MESSAGE_CHANNEL_TEXT_MAP,
|
||||
MESSAGE_STATUS_COLOR_MAP,
|
||||
MESSAGE_STATUS_TEXT_MAP,
|
||||
resolveMessageTime,
|
||||
} from '../composables/message-reach-page/helpers';
|
||||
|
||||
defineProps<{
|
||||
canManage: boolean;
|
||||
loading: boolean;
|
||||
pager: MessageReachPager;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'delete', messageId: string): void;
|
||||
(event: 'detail', messageId: string): void;
|
||||
(event: 'edit', messageId: string): void;
|
||||
(event: 'pageChange', page: number, pageSize: number): void;
|
||||
}>();
|
||||
|
||||
const columns: TableColumnType<MemberMessageReachListItemDto>[] = [
|
||||
{
|
||||
title: '消息标题',
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
width: 280,
|
||||
},
|
||||
{
|
||||
title: '推送渠道',
|
||||
dataIndex: 'channels',
|
||||
key: 'channels',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '目标人群',
|
||||
dataIndex: 'audienceText',
|
||||
key: 'audienceText',
|
||||
width: 170,
|
||||
},
|
||||
{
|
||||
title: '触达人数',
|
||||
dataIndex: 'estimatedReachCount',
|
||||
key: 'estimatedReachCount',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '发送时间',
|
||||
key: 'sendTime',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
|
||||
function showMetricRow(record: Record<string, any>) {
|
||||
return (
|
||||
Number(record.openRate || 0) > 0 || Number(record.conversionRate || 0) > 0
|
||||
);
|
||||
}
|
||||
|
||||
function resolveChannelColor(channel: unknown) {
|
||||
return (
|
||||
MESSAGE_CHANNEL_COLOR_MAP[channel as MemberMessageReachChannel] || 'default'
|
||||
);
|
||||
}
|
||||
|
||||
function resolveChannelText(channel: unknown) {
|
||||
return (
|
||||
MESSAGE_CHANNEL_TEXT_MAP[channel as MemberMessageReachChannel] || '未知渠道'
|
||||
);
|
||||
}
|
||||
|
||||
function resolveStatusColor(status: unknown) {
|
||||
return MESSAGE_STATUS_COLOR_MAP[status as MemberMessageReachStatus];
|
||||
}
|
||||
|
||||
function resolveStatusText(status: unknown) {
|
||||
return MESSAGE_STATUS_TEXT_MAP[status as MemberMessageReachStatus];
|
||||
}
|
||||
|
||||
function canEdit(status: unknown) {
|
||||
const currentStatus = status as MemberMessageReachStatus;
|
||||
return currentStatus === 'draft' || currentStatus === 'failed';
|
||||
}
|
||||
|
||||
function canDelete(status: unknown) {
|
||||
const currentStatus = status as MemberMessageReachStatus;
|
||||
return (
|
||||
currentStatus === 'draft' ||
|
||||
currentStatus === 'failed' ||
|
||||
currentStatus === 'pending'
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mmr-table-wrap">
|
||||
<Table
|
||||
:columns="columns"
|
||||
:data-source="pager.items"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
row-key="messageId"
|
||||
:scroll="{ x: 1080 }"
|
||||
class="mmr-table"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'title'">
|
||||
<div class="mmr-message-title">{{ record.title }}</div>
|
||||
<div v-if="showMetricRow(record)" class="mmr-message-metric">
|
||||
打开率 {{ formatPercent(record.openRate) }} | 转化率
|
||||
{{ formatPercent(record.conversionRate) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'channels'">
|
||||
<div class="mmr-channel-list">
|
||||
<Tag
|
||||
v-for="item in record.channels"
|
||||
:key="`${record.messageId}-${item}`"
|
||||
:color="resolveChannelColor(item)"
|
||||
>
|
||||
{{ resolveChannelText(item) }}
|
||||
</Tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'estimatedReachCount'">
|
||||
<span>
|
||||
{{
|
||||
record.estimatedReachCount > 0
|
||||
? formatInteger(record.estimatedReachCount)
|
||||
: '—'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'sendTime'">
|
||||
<span class="mmr-time-text">
|
||||
{{ resolveMessageTime(record.sentAt, record.scheduledAt) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<Tag :color="resolveStatusColor(record.status)">
|
||||
{{ resolveStatusText(record.status) }}
|
||||
</Tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<div class="mmr-table-actions">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
class="mmr-action-link"
|
||||
@click="emit('detail', record.messageId)"
|
||||
>
|
||||
详情
|
||||
</Button>
|
||||
<Button
|
||||
v-if="canManage && canEdit(record.status)"
|
||||
type="link"
|
||||
size="small"
|
||||
class="mmr-action-link"
|
||||
@click="emit('edit', record.messageId)"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
v-if="canManage && canDelete(record.status)"
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
class="mmr-action-link"
|
||||
@click="emit('delete', record.messageId)"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<div class="mmr-pagination">
|
||||
<Pagination
|
||||
:current="pager.page"
|
||||
:page-size="pager.pageSize"
|
||||
:total="pager.totalCount"
|
||||
show-size-changer
|
||||
:show-total="(value) => `共 ${value} 条`"
|
||||
:page-size-options="['10', '20', '50']"
|
||||
@change="(page, pageSize) => emit('pageChange', page, pageSize)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,101 @@
|
||||
<script setup lang="ts">
|
||||
import type { MemberMessageTemplateDto } from '#/api/member/message-reach';
|
||||
import type { MessageTemplatePager } from '#/views/member/message-reach/types';
|
||||
|
||||
import { Button, Empty, Pagination, Spin, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatInteger,
|
||||
MESSAGE_TEMPLATE_CATEGORY_COLOR_MAP,
|
||||
MESSAGE_TEMPLATE_CATEGORY_TEXT_MAP,
|
||||
} from '../composables/message-reach-page/helpers';
|
||||
|
||||
defineProps<{
|
||||
canManage: boolean;
|
||||
loading: boolean;
|
||||
pager: MessageTemplatePager;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'delete', templateId: string): void;
|
||||
(event: 'edit', templateId: string): void;
|
||||
(event: 'pageChange', page: number, pageSize: number): void;
|
||||
(event: 'use', template: MemberMessageTemplateDto): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mmr-template-wrap">
|
||||
<Spin :spinning="loading">
|
||||
<div v-if="pager.items.length > 0" class="mmr-template-grid">
|
||||
<article
|
||||
v-for="item in pager.items"
|
||||
:key="item.templateId"
|
||||
class="mmr-template-card"
|
||||
>
|
||||
<div class="mmr-template-head">
|
||||
<div class="mmr-template-name">{{ item.name }}</div>
|
||||
<Tag :color="MESSAGE_TEMPLATE_CATEGORY_COLOR_MAP[item.category]">
|
||||
{{ MESSAGE_TEMPLATE_CATEGORY_TEXT_MAP[item.category] }}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
<div class="mmr-template-preview">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
|
||||
<div class="mmr-template-foot">
|
||||
<span class="mmr-template-usage">
|
||||
已使用 {{ formatInteger(item.usageCount) }}次
|
||||
</span>
|
||||
<div class="mmr-template-actions">
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="!canManage"
|
||||
@click="emit('use', item)"
|
||||
>
|
||||
使用
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
class="mmr-action-link"
|
||||
:disabled="!canManage"
|
||||
@click="emit('edit', item.templateId)"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
class="mmr-action-link"
|
||||
:disabled="!canManage"
|
||||
@click="emit('delete', item.templateId)"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div v-else class="mmr-template-empty">
|
||||
<Empty description="暂无消息模板" />
|
||||
</div>
|
||||
</Spin>
|
||||
|
||||
<div class="mmr-pagination">
|
||||
<Pagination
|
||||
:current="pager.page"
|
||||
:page-size="pager.pageSize"
|
||||
:total="pager.totalCount"
|
||||
show-size-changer
|
||||
:show-total="(value) => `共 ${value} 条`"
|
||||
:page-size-options="['12', '24', '48']"
|
||||
@change="(page, pageSize) => emit('pageChange', page, pageSize)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
import type { MessageTemplateEditorForm } from '../types';
|
||||
|
||||
import { Form, Input, Modal, Select } from 'ant-design-vue';
|
||||
|
||||
import { MESSAGE_TEMPLATE_CATEGORY_OPTIONS } from '../composables/message-reach-page/constants';
|
||||
|
||||
defineProps<{
|
||||
canManage: boolean;
|
||||
form: MessageTemplateEditorForm;
|
||||
loading: boolean;
|
||||
open: boolean;
|
||||
submitText: string;
|
||||
submitting: boolean;
|
||||
title: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
(event: 'setCategory', value: 'marketing' | 'notice' | 'recall'): void;
|
||||
(event: 'setContent', value: string): void;
|
||||
(event: 'setName', value: string): void;
|
||||
(event: 'submit'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:open="open"
|
||||
:title="title"
|
||||
:confirm-loading="submitting"
|
||||
:ok-text="submitText"
|
||||
cancel-text="取消"
|
||||
:ok-button-props="{ disabled: !canManage || loading }"
|
||||
width="560"
|
||||
@ok="emit('submit')"
|
||||
@cancel="emit('close')"
|
||||
>
|
||||
<Form layout="vertical" class="mmr-template-modal-form">
|
||||
<Form.Item label="模板名称" required>
|
||||
<Input
|
||||
:value="form.name"
|
||||
:disabled="loading"
|
||||
placeholder="如：新品上线通知"
|
||||
@update:value="(value) => emit('setName', String(value ?? ''))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="模板分类" required>
|
||||
<Select
|
||||
:value="form.category"
|
||||
:disabled="loading"
|
||||
:options="MESSAGE_TEMPLATE_CATEGORY_OPTIONS"
|
||||
@update:value="
|
||||
(value) =>
|
||||
emit(
|
||||
'setCategory',
|
||||
String(value || 'notice') as 'marketing' | 'notice' | 'recall',
|
||||
)
|
||||
"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="模板内容" required>
|
||||
<Input.TextArea
|
||||
:value="form.content"
|
||||
:disabled="loading"
|
||||
:rows="5"
|
||||
placeholder="支持变量：{name}姓名 {level}等级"
|
||||
@update:value="(value) => emit('setContent', String(value ?? ''))"
|
||||
/>
|
||||
<div class="mmr-form-hint">支持模板变量，用于个性化内容替换</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import type { MemberMessageTemplateCategory } from '#/api/member/message-reach';
|
||||
import type { MessageTemplateFilterForm } from '#/views/member/message-reach/types';
|
||||
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
|
||||
import { MESSAGE_TEMPLATE_CATEGORY_FILTER_OPTIONS } from '../composables/message-reach-page/constants';
|
||||
|
||||
defineProps<{
|
||||
canManage: boolean;
|
||||
filters: MessageTemplateFilterForm;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'create'): void;
|
||||
(event: 'search'): void;
|
||||
(event: 'update:category', value: '' | MemberMessageTemplateCategory): void;
|
||||
(event: 'update:keyword', value: string): void;
|
||||
}>();
|
||||
|
||||
function handleCategoryChange(value: unknown) {
|
||||
emit(
|
||||
'update:category',
|
||||
String(value || '') as '' | MemberMessageTemplateCategory,
|
||||
);
|
||||
emit('search');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mmr-toolbar">
|
||||
<Select
|
||||
class="mmr-select"
|
||||
:value="filters.category || ''"
|
||||
:options="MESSAGE_TEMPLATE_CATEGORY_FILTER_OPTIONS"
|
||||
@update:value="(value) => handleCategoryChange(value)"
|
||||
/>
|
||||
|
||||
<Input
|
||||
class="mmr-keyword-input"
|
||||
:value="filters.keyword"
|
||||
placeholder="搜索模板名称"
|
||||
allow-clear
|
||||
@update:value="(value) => emit('update:keyword', String(value ?? ''))"
|
||||
@press-enter="emit('search')"
|
||||
/>
|
||||
|
||||
<span class="mmr-spacer"></span>
|
||||
|
||||
<Button type="primary" :disabled="!canManage" @click="emit('create')">
|
||||
新建模板
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user