Skip to content

Commit 3ce4ea3

Browse files
YunaiVYunaiV
committed
feat：【mp】完善“模版消息”的功能
1 parent 99aee79 commit 3ce4ea3

File tree

9 files changed

+354
-1223
lines changed

9 files changed

+354
-1223
lines changed

‎src/api/mp/messageTemplate/index.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import request from '@/config/axios'
2+
3+
// 消息模板 VO
4+
export interface MsgTemplateVO {
5+
id: number // 模版主键
6+
accountId: number // 公众号账号的编号
7+
appId: string // appId
8+
templateId: string // 公众号模板 ID
9+
title: string // 标题
10+
content: string // 模板内容
11+
example: string // 模板示例
12+
primaryIndustry: string // 模板所属行业的一级行业
13+
deputyIndustry: string // 模板所属行业的二级行业
14+
createTime: Date // 创建时间
15+
}
16+
17+
// 发送消息模板请求 VO
18+
export interface MsgTemplateSendVO {
19+
id: number // 模板编号
20+
userId: number // 用户编号
21+
data?: string // 模板数据（JSON 格式字符串）
22+
url?: string // 跳转链接
23+
miniProgramAppId?: string // 小程序 appId
24+
miniProgramPagePath?: string // 小程序页面路径
25+
miniprogram?: string // 小程序信息（JSON 格式字符串）
26+
}
27+
28+
// 公众号消息模板 API
29+
export const MessageTemplateApi = {
30+
// 查询消息模板分页
31+
getMessageTemplateList: async (params: any) => {
32+
return await request.get({ url: `/mp/message-template/list`, params })
33+
},
34+
35+
// 删除消息模板
36+
deleteMessageTemplate: async (id: number) => {
37+
return await request.delete({ url: `/mp/message-template/delete?id=` + id })
38+
},
39+
40+
// 同步公众号模板
41+
syncMessageTemplate: async (accountId: number) => {
42+
return await request.post({ url: `/mp/message-template/sync?accountId=` + accountId })
43+
},
44+
45+
// 发送消息模板
46+
sendMessageTemplate: async (data: MsgTemplateSendVO) => {
47+
return await request.post({ url: `/mp/message-template/send`, data })
48+
}
49+
}

‎src/api/mp/template/index.ts‎

Lines changed: 0 additions & 115 deletions
This file was deleted.

‎src/views/mp/messageTemplate/MessageTemplateSendForm.vue‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<template>
2+
<Dialog title="发送消息模板" v-model="dialogVisible" width="600px">
3+
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
4+
<el-form-item label="模板编号">
5+
<el-input v-model="formData.id" disabled />
6+
</el-form-item>
7+
<el-form-item label="模板标题">
8+
<el-input v-model="templateTitle" disabled />
9+
</el-form-item>
10+
<el-form-item label="用户" prop="userId">
11+
<el-select
12+
v-model="formData.userId"
13+
filterable
14+
remote
15+
reserve-keyword
16+
placeholder="请输入用户昵称搜索"
17+
:remote-method="searchUser"
18+
:loading="userLoading"
19+
class="!w-full"
20+
>
21+
<el-option
22+
v-for="user in userList"
23+
:key="user.id"
24+
:label="user.nickname || user.openid"
25+
:value="user.id"
26+
/>
27+
</el-select>
28+
</el-form-item>
29+
<el-form-item label="模板数据" prop="data">
30+
<el-input
31+
v-model="formData.data"
32+
type="textarea"
33+
:rows="4"
34+
placeholder='请输入模板数据（JSON 格式），例如：{"keyword1": {"value": "测试内容"}}'
35+
/>
36+
</el-form-item>
37+
<el-form-item label="跳转链接" prop="url">
38+
<el-input v-model="formData.url" placeholder="请输入跳转链接" />
39+
</el-form-item>
40+
<el-form-item label="小程序 appId" prop="miniProgramAppId">
41+
<el-input v-model="formData.miniProgramAppId" placeholder="请输入小程序 appId" />
42+
</el-form-item>
43+
<el-form-item label="小程序页面路径" prop="miniProgramPagePath">
44+
<el-input v-model="formData.miniProgramPagePath" placeholder="请输入小程序页面路径" />
45+
</el-form-item>
46+
</el-form>
47+
<template #footer>
48+
<el-button type="primary" @click="submitForm" :loading="loading">发 送</el-button>
49+
<el-button @click="dialogVisible = false">取 消</el-button>
50+
</template>
51+
</Dialog>
52+
</template>
53+
54+
<script setup lang="ts">
55+
import { MessageTemplateApi, MsgTemplateVO, MsgTemplateSendVO } from '@/api/mp/messageTemplate'
56+
import * as MpUserApi from '@/api/mp/user'
57+
58+
const message = useMessage() // 消息弹窗
59+
60+
const dialogVisible = ref(false) // 弹窗是否展示
61+
const loading = ref(false) // 提交加载中
62+
const templateTitle = ref('') // 模板标题
63+
const accountId = ref<number>() // 公众号账号编号
64+
65+
const formRef = ref() // 表单 Ref
66+
const formData = ref<MsgTemplateSendVO>({
67+
id: undefined!,
68+
userId: undefined!,
69+
data: '',
70+
url: '',
71+
miniProgramAppId: '',
72+
miniProgramPagePath: ''
73+
})
74+
const formRules = reactive({
75+
userId: [{ required: true, message: '请选择用户', trigger: 'change' }]
76+
})
77+
78+
// 用户搜索相关
79+
const userLoading = ref(false)
80+
const userList = ref<any[]>([])
81+
82+
/** 搜索用户 */
83+
const searchUser = async (query: string) => {
84+
if (!accountId.value) {
85+
return
86+
}
87+
userLoading.value = true
88+
try {
89+
const data = await MpUserApi.getUserPage({
90+
pageNo: 1,
91+
pageSize: 20,
92+
accountId: accountId.value,
93+
nickname: query || undefined
94+
})
95+
userList.value = data.list || []
96+
} finally {
97+
userLoading.value = false
98+
}
99+
}
100+
101+
/** 打开弹窗 */
102+
const open = async (row: MsgTemplateVO) => {
103+
resetForm()
104+
dialogVisible.value = true
105+
// 设置表单数据
106+
formData.value.id = row.id
107+
accountId.value = row.accountId
108+
templateTitle.value = row.title
109+
// 加载用户列表
110+
await searchUser('')
111+
}
112+
defineExpose({ open }) // 暴露 open 方法
113+
114+
/** 提交表单 */
115+
const submitForm = async () => {
116+
// 校验表单
117+
if (!formRef.value) return
118+
const valid = await formRef.value.validate()
119+
if (!valid) return
120+
// 提交请求
121+
loading.value = true
122+
try {
123+
const sendData: MsgTemplateSendVO = {
124+
...formData.value
125+
}
126+
// 如果填写了小程序信息，需要拼接成 miniprogram 字段
127+
if (sendData.miniProgramAppId && sendData.miniProgramPagePath) {
128+
sendData.miniprogram = JSON.stringify({
129+
appid: sendData.miniProgramAppId,
130+
pagepath: sendData.miniProgramPagePath
131+
})
132+
}
133+
// 如果填写了 data 字段
134+
if (sendData.data) {
135+
try {
136+
sendData.data = JSON.parse(sendData.data)
137+
} catch (e) {
138+
message.error('模板数据格式不正确，请输入有效的 JSON 格式')
139+
return
140+
}
141+
}
142+
await MessageTemplateApi.sendMessageTemplate(sendData)
143+
message.success('发送成功')
144+
dialogVisible.value = false
145+
} finally {
146+
loading.value = false
147+
}
148+
}
149+
150+
/** 重置表单 */
151+
const resetForm = () => {
152+
formData.value = {
153+
id: undefined!,
154+
userId: undefined!,
155+
data: '',
156+
url: '',
157+
miniProgramAppId: '',
158+
miniProgramPagePath: ''
159+
}
160+
userList.value = []
161+
formRef.value?.resetFields()
162+
}
163+
</script>

0 commit comments

Comments
 (0)