remove 公众号模块
chenyuan
1 year ago
parent
557374e8ac
commit
d5a4b04b3b
@ -1,46 +0,0 @@
|
|||||||
import request from '@/config/axios'
|
|
||||||
|
|
||||||
export interface AccountVO {
|
|
||||||
id: number
|
|
||||||
name: string
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建公众号账号
|
|
||||||
export const createAccount = async (data) => {
|
|
||||||
return await request.post({ url: '/mp/account/create', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新公众号账号
|
|
||||||
export const updateAccount = async (data) => {
|
|
||||||
return request.put({ url: '/mp/account/update', data: data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除公众号账号
|
|
||||||
export const deleteAccount = async (id) => {
|
|
||||||
return request.delete({ url: '/mp/account/delete?id=' + id, method: 'delete' })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得公众号账号
|
|
||||||
export const getAccount = async (id) => {
|
|
||||||
return request.get({ url: '/mp/account/get?id=' + id })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得公众号账号分页
|
|
||||||
export const getAccountPage = async (query) => {
|
|
||||||
return request.get({ url: '/mp/account/page', params: query })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取公众号账号精简信息列表
|
|
||||||
export const getSimpleAccountList = async () => {
|
|
||||||
return request.get({ url: '/mp/account/list-all-simple' })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 生成公众号二维码
|
|
||||||
export const generateAccountQrCode = async (id) => {
|
|
||||||
return request.put({ url: '/mp/account/generate-qr-code?id=' + id })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清空公众号 API 配额
|
|
||||||
export const clearAccountQuota = async (id) => {
|
|
||||||
return request.put({ url: '/mp/account/clear-quota?id=' + id })
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import request from '@/config/axios'
|
|
||||||
|
|
||||||
// 创建公众号的自动回复
|
|
||||||
export const createAutoReply = (data) => {
|
|
||||||
return request.post({
|
|
||||||
url: '/mp/auto-reply/create',
|
|
||||||
data: data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新公众号的自动回复
|
|
||||||
export const updateAutoReply = (data) => {
|
|
||||||
return request.put({
|
|
||||||
url: '/mp/auto-reply/update',
|
|
||||||
data: data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除公众号的自动回复
|
|
||||||
export const deleteAutoReply = (id) => {
|
|
||||||
return request.delete({
|
|
||||||
url: '/mp/auto-reply/delete?id=' + id
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得公众号的自动回复
|
|
||||||
export const getAutoReply = (id) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/auto-reply/get?id=' + id
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得公众号的自动回复分页
|
|
||||||
export const getAutoReplyPage = (query) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/auto-reply/page',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import request from '@/config/axios'
|
|
||||||
|
|
||||||
// 获得公众号草稿分页
|
|
||||||
export const getDraftPage = (query) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/draft/page',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建公众号草稿
|
|
||||||
export const createDraft = (accountId, articles) => {
|
|
||||||
return request.post({
|
|
||||||
url: '/mp/draft/create?accountId=' + accountId,
|
|
||||||
data: {
|
|
||||||
articles
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新公众号草稿
|
|
||||||
export const updateDraft = (accountId, mediaId, articles) => {
|
|
||||||
return request.put({
|
|
||||||
url: '/mp/draft/update?accountId=' + accountId + '&mediaId=' + mediaId,
|
|
||||||
method: 'put',
|
|
||||||
data: articles
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除公众号草稿
|
|
||||||
export const deleteDraft = (accountId, mediaId) => {
|
|
||||||
return request.delete({
|
|
||||||
url: '/mp/draft/delete?accountId=' + accountId + '&mediaId=' + mediaId
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
import request from '@/config/axios'
|
|
||||||
|
|
||||||
// 获得公众号素材分页
|
|
||||||
export const getFreePublishPage = (query) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/free-publish/page',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除公众号素材
|
|
||||||
export const deleteFreePublish = (accountId, articleId) => {
|
|
||||||
return request.delete({
|
|
||||||
url: '/mp/free-publish/delete?accountId=' + accountId + '&articleId=' + articleId
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 发布公众号素材
|
|
||||||
export const submitFreePublish = (accountId, mediaId) => {
|
|
||||||
return request.post({
|
|
||||||
url: '/mp/free-publish/submit?accountId=' + accountId + '&mediaId=' + mediaId
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
import request from '@/config/axios'
|
|
||||||
|
|
||||||
// 获得公众号素材分页
|
|
||||||
export const getMaterialPage = (query) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/material/page',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除公众号永久素材
|
|
||||||
export const deletePermanentMaterial = (id) => {
|
|
||||||
return request.delete({
|
|
||||||
url: '/mp/material/delete-permanent?id=' + id
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import request from '@/config/axios'
|
|
||||||
|
|
||||||
// 获得公众号菜单列表
|
|
||||||
export const getMenuList = (accountId) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/menu/list?accountId=' + accountId
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 保存公众号菜单
|
|
||||||
export const saveMenu = (accountId, menus) => {
|
|
||||||
return request.post({
|
|
||||||
url: '/mp/menu/save',
|
|
||||||
data: {
|
|
||||||
accountId,
|
|
||||||
menus
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除公众号菜单
|
|
||||||
export const deleteMenu = (accountId) => {
|
|
||||||
return request.delete({
|
|
||||||
url: '/mp/menu/delete?accountId=' + accountId
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import request from '@/config/axios'
|
|
||||||
|
|
||||||
// 获得公众号消息分页
|
|
||||||
export const getMessagePage = (query: PageParam) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/message/page',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 给粉丝发送消息
|
|
||||||
export const sendMessage = (data) => {
|
|
||||||
return request.post({
|
|
||||||
url: '/mp/message/send',
|
|
||||||
data: data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
import request from '@/config/axios'
|
|
||||||
|
|
||||||
// 获取消息发送概况数据
|
|
||||||
export const getUpstreamMessage = (query) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/statistics/upstream-message',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 用户增减数据
|
|
||||||
export const getUserSummary = (query) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/statistics/user-summary',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得用户累计数据
|
|
||||||
export const getUserCumulate = (query) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/statistics/user-cumulate',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得接口分析数据
|
|
||||||
export const getInterfaceSummary = (query) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/statistics/interface-summary',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
import request from '@/config/axios'
|
|
||||||
|
|
||||||
export interface TagVO {
|
|
||||||
id?: number
|
|
||||||
name: string
|
|
||||||
accountId: number
|
|
||||||
createTime: Date
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建公众号标签
|
|
||||||
export const createTag = (data: TagVO) => {
|
|
||||||
return request.post({
|
|
||||||
url: '/mp/tag/create',
|
|
||||||
data: data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新公众号标签
|
|
||||||
export const updateTag = (data: TagVO) => {
|
|
||||||
return request.put({
|
|
||||||
url: '/mp/tag/update',
|
|
||||||
data: data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除公众号标签
|
|
||||||
export const deleteTag = (id: number) => {
|
|
||||||
return request.delete({
|
|
||||||
url: '/mp/tag/delete?id=' + id
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得公众号标签
|
|
||||||
export const getTag = (id: number) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/tag/get?id=' + id
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得公众号标签分页
|
|
||||||
export const getTagPage = (query: PageParam) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/tag/page',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取公众号标签精简信息列表
|
|
||||||
export const getSimpleTagList = () => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/tag/list-all-simple'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 同步公众号标签
|
|
||||||
export const syncTag = (accountId: number) => {
|
|
||||||
return request.post({
|
|
||||||
url: '/mp/tag/sync?accountId=' + accountId
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
import request from '@/config/axios'
|
|
||||||
|
|
||||||
// 更新公众号粉丝
|
|
||||||
export const updateUser = (data) => {
|
|
||||||
return request.put({
|
|
||||||
url: '/mp/user/update',
|
|
||||||
data: data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得公众号粉丝
|
|
||||||
export const getUser = (id) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/user/get?id=' + id
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得公众号粉丝分页
|
|
||||||
export const getUserPage = (query) => {
|
|
||||||
return request.get({
|
|
||||||
url: '/mp/user/page',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 同步公众号粉丝
|
|
||||||
export const syncUser = (accountId) => {
|
|
||||||
return request.post({
|
|
||||||
url: '/mp/user/sync?accountId=' + accountId
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -1,195 +0,0 @@
|
|||||||
<template>
|
|
||||||
<doc-alert title="公众号接入" url="https://doc.iocoder.cn/mp/account/" />
|
|
||||||
|
|
||||||
<!-- 搜索工作栏 -->
|
|
||||||
<ContentWrap>
|
|
||||||
<el-form
|
|
||||||
class="-mb-15px"
|
|
||||||
:model="queryParams"
|
|
||||||
ref="queryFormRef"
|
|
||||||
:inline="true"
|
|
||||||
label-width="68px"
|
|
||||||
>
|
|
||||||
<el-form-item label="名称" prop="name">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.name"
|
|
||||||
placeholder="请输入名称"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
|
|
||||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
|
|
||||||
<el-button type="primary" @click="openForm('create')" v-hasPermi="['mp:account:create']">
|
|
||||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 列表 -->
|
|
||||||
<ContentWrap>
|
|
||||||
<el-table v-loading="loading" :data="list">
|
|
||||||
<el-table-column label="名称" align="center" prop="name" />
|
|
||||||
<el-table-column label="微信号" align="center" prop="account" width="180" />
|
|
||||||
<el-table-column label="appId" align="center" prop="appId" width="180" />
|
|
||||||
<el-table-column label="服务器地址(URL)" align="center" prop="appId" width="360">
|
|
||||||
<template #default="scope">
|
|
||||||
{{ 'http://服务端地址/admin-api/mp/open/' + scope.row.appId }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="二维码" align="center" prop="qrCodeUrl">
|
|
||||||
<template #default="scope">
|
|
||||||
<img
|
|
||||||
v-if="scope.row.qrCodeUrl"
|
|
||||||
:src="scope.row.qrCodeUrl"
|
|
||||||
alt="二维码"
|
|
||||||
style="display: inline-block; height: 100px"
|
|
||||||
/>
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="primary"
|
|
||||||
@click="handleGenerateQrCode(scope.row)"
|
|
||||||
v-hasPermi="['mp:account:qr-code']"
|
|
||||||
>
|
|
||||||
生成二维码
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="备注" align="center" prop="remark" />
|
|
||||||
<el-table-column label="操作" align="center">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="primary"
|
|
||||||
@click="openForm('update', scope.row.id)"
|
|
||||||
v-hasPermi="['mp:account:update']"
|
|
||||||
>
|
|
||||||
编辑
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="danger"
|
|
||||||
@click="handleDelete(scope.row.id)"
|
|
||||||
v-hasPermi="['mp:account:delete']"
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="danger"
|
|
||||||
@click="handleCleanQuota(scope.row)"
|
|
||||||
v-hasPermi="['mp:account:clear-quota']"
|
|
||||||
>
|
|
||||||
清空 API 配额
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNo"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 对话框(添加 / 修改) -->
|
|
||||||
<AccountForm ref="formRef" @success="getList" />
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import * as AccountApi from '@/api/mp/account'
|
|
||||||
import AccountForm from './AccountForm.vue'
|
|
||||||
|
|
||||||
defineOptions({ name: 'MpAccount' })
|
|
||||||
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
|
|
||||||
const loading = ref(true) // 列表的加载中
|
|
||||||
const total = ref(0) // 列表的总页数
|
|
||||||
const list = ref([]) // 列表的数据
|
|
||||||
const queryParams = reactive({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
name: null,
|
|
||||||
account: null,
|
|
||||||
appId: null
|
|
||||||
})
|
|
||||||
const queryFormRef = ref() // 搜索的表单
|
|
||||||
|
|
||||||
/** 查询列表 */
|
|
||||||
const getList = async () => {
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
const data = await AccountApi.getAccountPage(queryParams)
|
|
||||||
list.value = data.list
|
|
||||||
total.value = data.total
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
const handleQuery = () => {
|
|
||||||
queryParams.pageNo = 1
|
|
||||||
getList()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
const resetQuery = () => {
|
|
||||||
queryFormRef.value.resetFields()
|
|
||||||
handleQuery()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 添加/修改操作 */
|
|
||||||
const formRef = ref()
|
|
||||||
const openForm = (type: string, id?: number) => {
|
|
||||||
formRef.value.open(type, id)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
const handleDelete = async (id) => {
|
|
||||||
try {
|
|
||||||
// 删除的二次确认
|
|
||||||
await message.delConfirm()
|
|
||||||
// 发起删除
|
|
||||||
await AccountApi.deleteAccount(id)
|
|
||||||
message.success(t('common.delSuccess'))
|
|
||||||
// 刷新列表
|
|
||||||
await getList()
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 生成二维码的按钮操作 */
|
|
||||||
const handleGenerateQrCode = async (row) => {
|
|
||||||
try {
|
|
||||||
// 生成二维码的二次确认
|
|
||||||
await message.confirm('是否确认生成公众号账号编号为"' + row.name + '"的二维码?')
|
|
||||||
// 发起生成二维码
|
|
||||||
await AccountApi.generateAccountQrCode(row.id)
|
|
||||||
message.success('生成二维码成功')
|
|
||||||
// 刷新列表
|
|
||||||
await getList()
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 清空二维码 API 配额的按钮操作 */
|
|
||||||
const handleCleanQuota = async (row) => {
|
|
||||||
try {
|
|
||||||
// 清空 API 配额的二次确认
|
|
||||||
await message.confirm('是否确认清空生成公众号账号编号为"' + row.name + '"的 API 配额?')
|
|
||||||
// 发起清空 API 配额
|
|
||||||
await AccountApi.clearAccountQuota(row.id)
|
|
||||||
message.success('清空 API 配额成功')
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 初始化 **/
|
|
||||||
onMounted(() => {
|
|
||||||
getList()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-form ref="formRef" :model="replyForm" :rules="rules" label-width="80px">
|
|
||||||
<el-form-item label="消息类型" prop="requestMessageType" v-if="msgType === MsgType.Message">
|
|
||||||
<el-select v-model="replyForm.requestMessageType" placeholder="请选择">
|
|
||||||
<template v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)" :key="dict.value">
|
|
||||||
<el-option
|
|
||||||
v-if="RequestMessageTypes.includes(dict.value)"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="匹配类型" prop="requestMatch" v-if="msgType === MsgType.Keyword">
|
|
||||||
<el-select v-model="replyForm.requestMatch" placeholder="请选择匹配类型" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="关键词" prop="requestKeyword" v-if="msgType === MsgType.Keyword">
|
|
||||||
<el-input v-model="replyForm.requestKeyword" placeholder="请输入内容" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="回复消息">
|
|
||||||
<WxReplySelect v-model="reply" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import WxReplySelect, { type Reply } from '@/views/mp/components/wx-reply'
|
|
||||||
import type { FormInstance } from 'element-plus'
|
|
||||||
import { MsgType } from './types'
|
|
||||||
import { DICT_TYPE, getDictOptions, getIntDictOptions } from '@/utils/dict'
|
|
||||||
|
|
||||||
defineOptions({ name: 'ReplyForm' })
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
modelValue: any
|
|
||||||
reply: Reply
|
|
||||||
msgType: MsgType
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:reply', v: Reply)
|
|
||||||
(e: 'update:modelValue', v: any)
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const reply = computed<Reply>({
|
|
||||||
get: () => props.reply,
|
|
||||||
set: (val) => emit('update:reply', val)
|
|
||||||
})
|
|
||||||
|
|
||||||
const replyForm = computed<any>({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
set: (val) => emit('update:modelValue', val)
|
|
||||||
})
|
|
||||||
|
|
||||||
const formRef = ref<FormInstance | null>(null) // 表单 ref
|
|
||||||
|
|
||||||
const RequestMessageTypes = ['text', 'image', 'voice', 'video', 'shortvideo', 'location', 'link'] // 允许选择的请求消息类型
|
|
||||||
|
|
||||||
// 表单校验
|
|
||||||
const rules = {
|
|
||||||
requestKeyword: [{ required: true, message: '请求的关键字不能为空', trigger: 'blur' }],
|
|
||||||
requestMatch: [{ required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' }]
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
resetFields: () => formRef.value?.resetFields(),
|
|
||||||
validate: async () => formRef.value?.validate()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
@ -1,115 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-table v-loading="props.loading" :data="props.list">
|
|
||||||
<el-table-column
|
|
||||||
label="请求消息类型"
|
|
||||||
align="center"
|
|
||||||
prop="requestMessageType"
|
|
||||||
v-if="msgType === MsgType.Message"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="关键词"
|
|
||||||
align="center"
|
|
||||||
prop="requestKeyword"
|
|
||||||
v-if="msgType === MsgType.Keyword"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="匹配类型"
|
|
||||||
align="center"
|
|
||||||
prop="requestMatch"
|
|
||||||
v-if="msgType === MsgType.Keyword"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH" :value="scope.row.requestMatch" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="回复消息类型" align="center">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.MP_MESSAGE_TYPE" :value="scope.row.responseMessageType" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="回复内容" align="center">
|
|
||||||
<template #default="scope">
|
|
||||||
<div v-if="scope.row.responseMessageType === 'text'">{{ scope.row.responseContent }}</div>
|
|
||||||
<div v-else-if="scope.row.responseMessageType === 'voice'">
|
|
||||||
<WxVoicePlayer v-if="scope.row.responseMediaUrl" :url="scope.row.responseMediaUrl" />
|
|
||||||
</div>
|
|
||||||
<div v-else-if="scope.row.responseMessageType === 'image'">
|
|
||||||
<a target="_blank" :href="scope.row.responseMediaUrl">
|
|
||||||
<img :src="scope.row.responseMediaUrl" style="width: 100px" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-else-if="
|
|
||||||
scope.row.responseMessageType === 'video' ||
|
|
||||||
scope.row.responseMessageType === 'shortvideo'
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<WxVideoPlayer
|
|
||||||
v-if="scope.row.responseMediaUrl"
|
|
||||||
:url="scope.row.responseMediaUrl"
|
|
||||||
style="margin-top: 10px"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="scope.row.responseMessageType === 'news'">
|
|
||||||
<WxNews :articles="scope.row.responseArticles" />
|
|
||||||
</div>
|
|
||||||
<div v-else-if="scope.row.responseMessageType === 'music'">
|
|
||||||
<WxMusic
|
|
||||||
:title="scope.row.responseTitle"
|
|
||||||
:description="scope.row.responseDescription"
|
|
||||||
:thumb-media-url="scope.row.responseThumbMediaUrl"
|
|
||||||
:music-url="scope.row.responseMusicUrl"
|
|
||||||
:hq-music-url="scope.row.responseHqMusicUrl"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="创建时间"
|
|
||||||
align="center"
|
|
||||||
prop="createTime"
|
|
||||||
:formatter="dateFormatter"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column label="操作" align="center">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
link
|
|
||||||
@click="emit('on-update', scope.row.id)"
|
|
||||||
v-hasPermi="['mp:auto-reply:update']"
|
|
||||||
>
|
|
||||||
修改
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
type="danger"
|
|
||||||
link
|
|
||||||
@click="emit('on-delete', scope.row.id)"
|
|
||||||
v-hasPermi="['mp:auto-reply:delete']"
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import WxVideoPlayer from '@/views/mp/components/wx-video-play'
|
|
||||||
import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
|
|
||||||
import WxMusic from '@/views/mp/components/wx-music'
|
|
||||||
import WxNews from '@/views/mp/components/wx-news'
|
|
||||||
import { dateFormatter } from '@/utils/formatTime'
|
|
||||||
import { DICT_TYPE } from '@/utils/dict'
|
|
||||||
import { MsgType } from './types'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
loading: boolean
|
|
||||||
list: any[]
|
|
||||||
msgType: MsgType
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'on-update', v: number)
|
|
||||||
(e: 'on-delete', v: number)
|
|
||||||
}>()
|
|
||||||
</script>
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
import WxAccountSelect from './main.vue'
|
|
||||||
|
|
||||||
export default WxAccountSelect
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-select v-model="account.id" placeholder="请选择公众号" class="!w-240px" @change="onChanged">
|
|
||||||
<el-option v-for="item in accountList" :key="item.id" :label="item.name" :value="item.id" />
|
|
||||||
</el-select>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import * as MpAccountApi from '@/api/mp/account'
|
|
||||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
|
||||||
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
const { delView } = useTagsViewStore() // 视图操作
|
|
||||||
const { push, currentRoute } = useRouter() // 路由
|
|
||||||
|
|
||||||
defineOptions({ name: 'WxAccountSelect' })
|
|
||||||
|
|
||||||
const account: MpAccountApi.AccountVO = reactive({
|
|
||||||
id: -1,
|
|
||||||
name: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const accountList = ref<MpAccountApi.AccountVO[]>([])
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'change', id: number, name: string)
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const handleQuery = async () => {
|
|
||||||
accountList.value = await MpAccountApi.getSimpleAccountList()
|
|
||||||
if (accountList.value.length == 0) {
|
|
||||||
message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置')
|
|
||||||
delView(unref(currentRoute))
|
|
||||||
await push({ name: 'MpAccount' })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 默认选中第一个
|
|
||||||
if (accountList.value.length > 0) {
|
|
||||||
account.id = accountList.value[0].id
|
|
||||||
if (account.id) {
|
|
||||||
account.name = accountList.value[0].name
|
|
||||||
emit('change', account.id, account.name)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const onChanged = (id?: number) => {
|
|
||||||
const found = accountList.value.find((v) => v.id === id)
|
|
||||||
if (account.id) {
|
|
||||||
account.name = found ? found.name : ''
|
|
||||||
emit('change', account.id, account.name)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 初始化 */
|
|
||||||
onMounted(() => {
|
|
||||||
handleQuery()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
import WxLocation from './main.vue'
|
|
||||||
|
|
||||||
export default WxLocation
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
<!--
|
|
||||||
【微信消息 - 定位】TODO @Dhb52 目前未启用
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-link
|
|
||||||
type="primary"
|
|
||||||
target="_blank"
|
|
||||||
:href="
|
|
||||||
'https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=' +
|
|
||||||
locationY +
|
|
||||||
'&pointy=' +
|
|
||||||
locationX +
|
|
||||||
'&name=' +
|
|
||||||
label +
|
|
||||||
'&ref=yudao'
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<el-col>
|
|
||||||
<el-row>
|
|
||||||
<img
|
|
||||||
:src="
|
|
||||||
'https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|' +
|
|
||||||
locationX +
|
|
||||||
',' +
|
|
||||||
locationY +
|
|
||||||
'&key=' +
|
|
||||||
qqMapKey +
|
|
||||||
'&size=250*180'
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<Icon icon="ep:location" />
|
|
||||||
{{ label }}
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
</el-link>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
defineOptions({ name: 'WxLocation' })
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
locationX: {
|
|
||||||
required: true,
|
|
||||||
type: Number
|
|
||||||
},
|
|
||||||
locationY: {
|
|
||||||
required: true,
|
|
||||||
type: Number
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
// 地名
|
|
||||||
required: true,
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
qqMapKey: {
|
|
||||||
// QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
|
|
||||||
required: false,
|
|
||||||
type: String,
|
|
||||||
default: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E' // 需要自定义
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
locationX: props.locationX,
|
|
||||||
locationY: props.locationY,
|
|
||||||
label: props.label,
|
|
||||||
qqMapKey: props.qqMapKey
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
import WxMaterialSelect from './main.vue'
|
|
||||||
import { NewsType, MaterialType } from './types'
|
|
||||||
|
|
||||||
export { NewsType, MaterialType }
|
|
||||||
|
|
||||||
export default WxMaterialSelect
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
export enum NewsType {
|
|
||||||
Draft = '2',
|
|
||||||
Published = '1'
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum MaterialType {
|
|
||||||
Image = 'image',
|
|
||||||
Voice = 'voice',
|
|
||||||
Video = 'video',
|
|
||||||
News = 'news'
|
|
||||||
}
|
|
||||||
@ -1,116 +0,0 @@
|
|||||||
.avue-card {
|
|
||||||
&__item {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
border: 1px solid #e8e8e8;
|
|
||||||
background-color: #fff;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: rgba(0, 0, 0, 0.65);
|
|
||||||
font-size: 14px;
|
|
||||||
font-variant: tabular-nums;
|
|
||||||
line-height: 1.5;
|
|
||||||
list-style: none;
|
|
||||||
font-feature-settings: 'tnum';
|
|
||||||
cursor: pointer;
|
|
||||||
height: 200px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: rgba(0, 0, 0, 0.09);
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--add {
|
|
||||||
border: 1px dashed #000;
|
|
||||||
width: 100%;
|
|
||||||
color: rgba(0, 0, 0, 0.45);
|
|
||||||
background-color: #fff;
|
|
||||||
border-color: #d9d9d9;
|
|
||||||
border-radius: 2px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
i {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #40a9ff;
|
|
||||||
background-color: #fff;
|
|
||||||
border-color: #40a9ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__body {
|
|
||||||
display: flex;
|
|
||||||
padding: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__detail {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 48px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-right: 12px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__info {
|
|
||||||
color: rgba(0, 0, 0, 0.45);
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 3;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__menu {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
height: 50px;
|
|
||||||
background: #f7f9fa;
|
|
||||||
color: rgba(0, 0, 0, 0.45);
|
|
||||||
text-align: center;
|
|
||||||
line-height: 50px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** joolun 额外加的 */
|
|
||||||
.avue-comment__main {
|
|
||||||
flex: unset !important;
|
|
||||||
border-radius: 5px !important;
|
|
||||||
margin: 0 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avue-comment__header {
|
|
||||||
border-top-left-radius: 5px;
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avue-comment__body {
|
|
||||||
border-bottom-right-radius: 5px;
|
|
||||||
border-bottom-left-radius: 5px;
|
|
||||||
}
|
|
||||||
@ -1,126 +0,0 @@
|
|||||||
/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */
|
|
||||||
.avue-comment {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
&--reverse {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
|
|
||||||
.avue-comment__main {
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
left: auto;
|
|
||||||
right: -8px;
|
|
||||||
border-width: 8px 0 8px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
border-left-color: #dedede;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
border-left-color: #f8f8f8;
|
|
||||||
margin-right: 1px;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
box-sizing: border-box;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
padding: 5px 15px;
|
|
||||||
background: #f8f8f8;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__author {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
|
||||||
flex: 1;
|
|
||||||
margin: 0 20px;
|
|
||||||
position: relative;
|
|
||||||
border: 1px solid #dedede;
|
|
||||||
border-radius: 2px;
|
|
||||||
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: -8px;
|
|
||||||
right: 100%;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
display: block;
|
|
||||||
content: ' ';
|
|
||||||
border-color: transparent;
|
|
||||||
border-style: solid solid outset;
|
|
||||||
border-width: 8px 8px 8px 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
border-right-color: #dedede;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
border-right-color: #f8f8f8;
|
|
||||||
margin-left: 1px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__body {
|
|
||||||
padding: 15px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: #fff;
|
|
||||||
font-family:
|
|
||||||
Segoe UI,
|
|
||||||
Lucida Grande,
|
|
||||||
Helvetica,
|
|
||||||
Arial,
|
|
||||||
Microsoft YaHei,
|
|
||||||
FreeSans,
|
|
||||||
Arimo,
|
|
||||||
Droid Sans,
|
|
||||||
wenquanyi micro hei,
|
|
||||||
Hiragino Sans GB,
|
|
||||||
Hiragino Sans GB W3,
|
|
||||||
FontAwesome,
|
|
||||||
sans-serif;
|
|
||||||
color: #333;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
margin: 0;
|
|
||||||
font-family:
|
|
||||||
Georgia,
|
|
||||||
Times New Roman,
|
|
||||||
Times,
|
|
||||||
Kai,
|
|
||||||
Kaiti SC,
|
|
||||||
KaiTi,
|
|
||||||
BiauKai,
|
|
||||||
FontAwesome,
|
|
||||||
serif;
|
|
||||||
padding: 1px 0 1px 15px;
|
|
||||||
border-left: 4px solid #ddd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<MsgEvent v-if="item.type === MsgType.Event" :item="item" />
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.Voice">
|
|
||||||
<WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.Image">
|
|
||||||
<a target="_blank" :href="item.mediaUrl">
|
|
||||||
<img :src="item.mediaUrl" style="width: 100px" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
|
|
||||||
style="text-align: center"
|
|
||||||
>
|
|
||||||
<WxVideoPlayer :url="item.mediaUrl" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.Link" class="avue-card__detail">
|
|
||||||
<el-link type="success" :underline="false" target="_blank" :href="item.url">
|
|
||||||
<div class="avue-card__title"><i class="el-icon-link"></i>{{ item.title }}</div>
|
|
||||||
</el-link>
|
|
||||||
<div class="avue-card__info" style="height: unset">{{ item.description }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.Location">
|
|
||||||
<WxLocation :label="item.label" :location-y="item.locationY" :location-x="item.locationX" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.News" style="width: 300px">
|
|
||||||
<WxNews :articles="item.articles" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.Music">
|
|
||||||
<WxMusic
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:thumb-media-url="item.thumbMediaUrl"
|
|
||||||
:music-url="item.musicUrl"
|
|
||||||
:hq-music-url="item.hqMusicUrl"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import WxVideoPlayer from '@/views/mp/components/wx-video-play'
|
|
||||||
import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
|
|
||||||
import WxNews from '@/views/mp/components/wx-news'
|
|
||||||
import WxLocation from '@/views/mp/components/wx-location'
|
|
||||||
import WxMusic from '@/views/mp/components/wx-music'
|
|
||||||
import MsgEvent from './MsgEvent.vue'
|
|
||||||
import { MsgType } from '../types'
|
|
||||||
|
|
||||||
defineOptions({ name: 'Msg' })
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
item: any
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const item = ref<any>(props.item)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div v-if="item.event === 'subscribe'">
|
|
||||||
<el-tag type="success">关注</el-tag>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'unsubscribe'">
|
|
||||||
<el-tag type="danger">取消关注</el-tag>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'CLICK'">
|
|
||||||
<el-tag>点击菜单</el-tag>
|
|
||||||
【{{ item.eventKey }}】
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'VIEW'">
|
|
||||||
<el-tag>点击菜单链接</el-tag>
|
|
||||||
【{{ item.eventKey }}】
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'scancode_waitmsg'">
|
|
||||||
<el-tag>扫码结果</el-tag>
|
|
||||||
【{{ item.eventKey }}】
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'scancode_push'">
|
|
||||||
<el-tag>扫码结果</el-tag>
|
|
||||||
【{{ item.eventKey }}】
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'pic_sysphoto'">
|
|
||||||
<el-tag>系统拍照发图</el-tag>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'pic_photo_or_album'">
|
|
||||||
<el-tag>拍照或者相册</el-tag>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'pic_weixin'">
|
|
||||||
<el-tag>微信相册</el-tag>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'location_select'">
|
|
||||||
<el-tag>选择地理位置</el-tag>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<el-tag type="danger">未知事件类型</el-tag>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
const props = defineProps<{
|
|
||||||
item: any
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const item = ref(props.item)
|
|
||||||
</script>
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="execution" v-for="item in props.list" :key="item.id">
|
|
||||||
<div
|
|
||||||
class="avue-comment"
|
|
||||||
:class="{ 'avue-comment--reverse': item.sendFrom === SendFrom.MpBot }"
|
|
||||||
>
|
|
||||||
<div class="avatar-div">
|
|
||||||
<img :src="getAvatar(item.sendFrom)" class="avue-comment__avatar" />
|
|
||||||
<div class="avue-comment__author">
|
|
||||||
{{ getNickname(item.sendFrom) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="avue-comment__main">
|
|
||||||
<div class="avue-comment__header">
|
|
||||||
<div class="avue-comment__create_time">{{ formatDate(item.createTime) }}</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="avue-comment__body"
|
|
||||||
:style="item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''"
|
|
||||||
>
|
|
||||||
<Msg :item="item" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import Msg from './Msg.vue'
|
|
||||||
import { formatDate } from '@/utils/formatTime'
|
|
||||||
import { User } from '../types'
|
|
||||||
import avatarWechat from '@/assets/imgs/wechat.png'
|
|
||||||
|
|
||||||
defineOptions({ name: 'MsgList' })
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
list: any[]
|
|
||||||
accountId: number
|
|
||||||
user: User
|
|
||||||
}>()
|
|
||||||
|
|
||||||
enum SendFrom {
|
|
||||||
User = 1,
|
|
||||||
MpBot = 2
|
|
||||||
}
|
|
||||||
|
|
||||||
const getAvatar = (sendFrom: SendFrom) =>
|
|
||||||
sendFrom === SendFrom.User ? props.user.avatar : avatarWechat
|
|
||||||
|
|
||||||
const getNickname = (sendFrom: SendFrom) =>
|
|
||||||
sendFrom === SendFrom.User ? props.user.nickname : '公众号'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
|
|
||||||
@import url('../comment.scss');
|
|
||||||
@import url('../card.scss');
|
|
||||||
|
|
||||||
.avatar-div {
|
|
||||||
width: 80px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
import WxMsg from './main.vue'
|
|
||||||
import { MsgType } from './types'
|
|
||||||
|
|
||||||
export { MsgType }
|
|
||||||
|
|
||||||
export default WxMsg
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
export enum MsgType {
|
|
||||||
Event = 'event',
|
|
||||||
Text = 'text',
|
|
||||||
Voice = 'voice',
|
|
||||||
Image = 'image',
|
|
||||||
Video = 'video',
|
|
||||||
Link = 'link',
|
|
||||||
Location = 'location',
|
|
||||||
Music = 'music',
|
|
||||||
News = 'news'
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface User {
|
|
||||||
nickname: string
|
|
||||||
avatar: string
|
|
||||||
accountId: number
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
import WxMusic from './main.vue'
|
|
||||||
|
|
||||||
export default WxMusic
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
<!--
|
|
||||||
【微信消息 - 音乐】
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-link
|
|
||||||
type="success"
|
|
||||||
:underline="false"
|
|
||||||
target="_blank"
|
|
||||||
:href="hqMusicUrl ? hqMusicUrl : musicUrl"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="avue-card__body"
|
|
||||||
style="padding: 10px; background-color: #fff; border-radius: 5px"
|
|
||||||
>
|
|
||||||
<div class="avue-card__avatar">
|
|
||||||
<img :src="thumbMediaUrl" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="avue-card__detail">
|
|
||||||
<div class="avue-card__title" style="margin-bottom: unset">{{ title }}</div>
|
|
||||||
<div class="avue-card__info" style="height: unset">{{ description }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-link>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
defineOptions({ name: 'WxMusic' })
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
title: {
|
|
||||||
required: false,
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
description: {
|
|
||||||
required: false,
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
musicUrl: {
|
|
||||||
required: false,
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
hqMusicUrl: {
|
|
||||||
required: false,
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
thumbMediaUrl: {
|
|
||||||
required: true,
|
|
||||||
type: String
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
musicUrl: props.musicUrl
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss */
|
|
||||||
@import url('../wx-msg/card.scss');
|
|
||||||
</style>
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
import WxNews from './main.vue'
|
|
||||||
|
|
||||||
export default WxNews
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-row>
|
|
||||||
<div class="select-item" v-if="reply.articles && reply.articles.length > 0">
|
|
||||||
<WxNews :articles="reply.articles" />
|
|
||||||
<el-col class="ope-row">
|
|
||||||
<el-button type="danger" circle @click="onDelete">
|
|
||||||
<Icon icon="ep:delete" />
|
|
||||||
</el-button>
|
|
||||||
</el-col>
|
|
||||||
</div>
|
|
||||||
<!-- 选择素材 -->
|
|
||||||
<el-col :span="24" v-if="!reply.content">
|
|
||||||
<el-row style="text-align: center" align="middle">
|
|
||||||
<el-col :span="24">
|
|
||||||
<el-button type="success" @click="showDialog = true">
|
|
||||||
{{ newsType === NewsType.Published ? '选择已发布图文' : '选择草稿箱图文' }}
|
|
||||||
<Icon icon="ep:circle-check" />
|
|
||||||
</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
<el-dialog title="选择图文" v-model="showDialog" width="90%" append-to-body destroy-on-close>
|
|
||||||
<WxMaterialSelect
|
|
||||||
type="news"
|
|
||||||
:account-id="reply.accountId"
|
|
||||||
:newsType="newsType"
|
|
||||||
@select-material="selectMaterial"
|
|
||||||
/>
|
|
||||||
</el-dialog>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import WxNews from '@/views/mp/components/wx-news'
|
|
||||||
import WxMaterialSelect from '@/views/mp/components/wx-material-select'
|
|
||||||
import { Reply, NewsType } from './types'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
modelValue: Reply
|
|
||||||
newsType: NewsType
|
|
||||||
}>()
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:modelValue', v: Reply)
|
|
||||||
}>()
|
|
||||||
const reply = computed<Reply>({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
set: (val) => emit('update:modelValue', val)
|
|
||||||
})
|
|
||||||
|
|
||||||
const showDialog = ref(false)
|
|
||||||
|
|
||||||
const selectMaterial = (item: any) => {
|
|
||||||
showDialog.value = false
|
|
||||||
reply.value.articles = item.content.newsItem
|
|
||||||
}
|
|
||||||
|
|
||||||
const onDelete = () => {
|
|
||||||
reply.value.articles = []
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.select-item {
|
|
||||||
width: 280px;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 0 auto 10px;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
|
|
||||||
.ope-row {
|
|
||||||
padding-top: 10px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="content" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
const props = defineProps<{
|
|
||||||
modelValue?: string | null
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:modelValue', v: string | null)
|
|
||||||
(e: 'input', v: string | null)
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const content = computed<string | null | undefined>({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
set: (val: string | null) => {
|
|
||||||
emit('update:modelValue', val)
|
|
||||||
emit('input', val)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
enum ReplyType {
|
|
||||||
News = 'news',
|
|
||||||
Image = 'image',
|
|
||||||
Voice = 'voice',
|
|
||||||
Video = 'video',
|
|
||||||
Music = 'music',
|
|
||||||
Text = 'text'
|
|
||||||
}
|
|
||||||
|
|
||||||
interface _Reply {
|
|
||||||
accountId: number
|
|
||||||
type: ReplyType
|
|
||||||
name?: string | null
|
|
||||||
content?: string | null
|
|
||||||
mediaId?: string | null
|
|
||||||
url?: string | null
|
|
||||||
title?: string | null
|
|
||||||
description?: string | null
|
|
||||||
thumbMediaId?: string | null
|
|
||||||
thumbMediaUrl?: string | null
|
|
||||||
musicUrl?: string | null
|
|
||||||
hqMusicUrl?: string | null
|
|
||||||
introduction?: string | null
|
|
||||||
articles?: any[]
|
|
||||||
}
|
|
||||||
|
|
||||||
type Reply = _Reply //Partial<_Reply>
|
|
||||||
|
|
||||||
enum NewsType {
|
|
||||||
Published = '1',
|
|
||||||
Draft = '2'
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 利用旧的reply[accountId, type]初始化新的Reply */
|
|
||||||
const createEmptyReply = (old: Reply | Ref<Reply>): Reply => {
|
|
||||||
return {
|
|
||||||
accountId: unref(old).accountId,
|
|
||||||
type: unref(old).type,
|
|
||||||
name: null,
|
|
||||||
content: null,
|
|
||||||
mediaId: null,
|
|
||||||
url: null,
|
|
||||||
title: null,
|
|
||||||
description: null,
|
|
||||||
thumbMediaId: null,
|
|
||||||
thumbMediaUrl: null,
|
|
||||||
musicUrl: null,
|
|
||||||
hqMusicUrl: null,
|
|
||||||
introduction: null,
|
|
||||||
articles: []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Reply, NewsType, ReplyType, createEmptyReply }
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import { Reply, NewsType, ReplyType, createEmptyReply } from './components/types'
|
|
||||||
|
|
||||||
import WxReplySelect from './main.vue'
|
|
||||||
|
|
||||||
export type { Reply }
|
|
||||||
export { createEmptyReply, NewsType, ReplyType }
|
|
||||||
export default WxReplySelect
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
import WxVideoPlayer from './main.vue'
|
|
||||||
|
|
||||||
export default WxVideoPlayer
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
import WxVoicePlayer from './main.vue'
|
|
||||||
|
|
||||||
export default WxVoicePlayer
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="waterfall" v-loading="props.loading">
|
|
||||||
<template v-for="item in props.list" :key="item.articleId">
|
|
||||||
<div class="waterfall-item" v-if="item.content && item.content.newsItem">
|
|
||||||
<WxNews :articles="item.content.newsItem" />
|
|
||||||
<!-- 操作按钮 -->
|
|
||||||
<el-row>
|
|
||||||
<el-button
|
|
||||||
type="success"
|
|
||||||
circle
|
|
||||||
@click="emit('publish', item)"
|
|
||||||
v-hasPermi="['mp:free-publish:submit']"
|
|
||||||
>
|
|
||||||
<Icon icon="fa:upload" />
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
circle
|
|
||||||
@click="emit('update', item)"
|
|
||||||
v-hasPermi="['mp:draft:update']"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:edit" />
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
type="danger"
|
|
||||||
circle
|
|
||||||
@click="emit('delete', item)"
|
|
||||||
v-hasPermi="['mp:draft:delete']"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:delete" />
|
|
||||||
</el-button>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import WxNews from '@/views/mp/components/wx-news'
|
|
||||||
|
|
||||||
import { Article } from './types'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
list: Article[]
|
|
||||||
loading: boolean
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'publish', v: Article)
|
|
||||||
(e: 'update', v: Article)
|
|
||||||
(e: 'delete', v: Article)
|
|
||||||
}>()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.waterfall {
|
|
||||||
width: 100%;
|
|
||||||
column-gap: 10px;
|
|
||||||
column-count: 5;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
.waterfall-item {
|
|
||||||
padding: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
break-inside: avoid;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (width >= 992px) and (width <= 1300px) {
|
|
||||||
.waterfall {
|
|
||||||
column-count: 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (width >= 768px) and (width <= 991px) {
|
|
||||||
.waterfall {
|
|
||||||
column-count: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (width <= 767px) {
|
|
||||||
.waterfall {
|
|
||||||
column-count: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,304 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-aside width="40%">
|
|
||||||
<div class="select-item">
|
|
||||||
<div v-for="(news, index) in newsList" :key="index">
|
|
||||||
<div
|
|
||||||
class="news-main father"
|
|
||||||
v-if="index === 0"
|
|
||||||
:class="{ activeAddNews: activeNewsIndex === index }"
|
|
||||||
@click="activeNewsIndex = index"
|
|
||||||
>
|
|
||||||
<div class="news-content">
|
|
||||||
<img class="material-img" :src="news.thumbUrl" />
|
|
||||||
<div class="news-content-title">{{ news.title }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="child" v-if="newsList.length > 1">
|
|
||||||
<el-button type="info" circle size="small" @click="() => moveDownNews(index)">
|
|
||||||
<Icon icon="ep:arrow-down-bold" />
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
v-if="isCreating"
|
|
||||||
type="danger"
|
|
||||||
circle
|
|
||||||
size="small"
|
|
||||||
@click="() => removeNews(index)"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:delete" />
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="news-main-item father"
|
|
||||||
v-if="index > 0"
|
|
||||||
:class="{ activeAddNews: activeNewsIndex === index }"
|
|
||||||
@click="activeNewsIndex = index"
|
|
||||||
>
|
|
||||||
<div class="news-content-item">
|
|
||||||
<div class="news-content-item-title">{{ news.title }}</div>
|
|
||||||
<div class="news-content-item-img">
|
|
||||||
<img class="material-img" :src="news.thumbUrl" width="100%" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="child">
|
|
||||||
<el-button
|
|
||||||
v-if="newsList.length > index + 1"
|
|
||||||
circle
|
|
||||||
type="info"
|
|
||||||
size="small"
|
|
||||||
@click="() => moveDownNews(index)"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:arrow-down-bold" />
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
v-if="index > 0"
|
|
||||||
type="info"
|
|
||||||
circle
|
|
||||||
size="small"
|
|
||||||
@click="() => moveUpNews(index)"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:arrow-up-bold" />
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
v-if="isCreating"
|
|
||||||
type="danger"
|
|
||||||
size="small"
|
|
||||||
circle
|
|
||||||
@click="() => removeNews(index)"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:delete" />
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-row justify="center" class="ope-row">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
circle
|
|
||||||
@click="plusNews"
|
|
||||||
v-if="newsList.length < 8 && isCreating"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:plus" />
|
|
||||||
</el-button>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</el-aside>
|
|
||||||
<el-main>
|
|
||||||
<div v-if="newsList.length > 0">
|
|
||||||
<!-- 标题、作者、原文地址 -->
|
|
||||||
<el-row :gutter="20">
|
|
||||||
<el-input v-model="activeNewsItem.title" placeholder="请输入标题（必填）" />
|
|
||||||
<el-input
|
|
||||||
v-model="activeNewsItem.author"
|
|
||||||
placeholder="请输入作者"
|
|
||||||
style="margin-top: 5px"
|
|
||||||
/>
|
|
||||||
<el-input
|
|
||||||
v-model="activeNewsItem.contentSourceUrl"
|
|
||||||
placeholder="请输入原文地址"
|
|
||||||
style="margin-top: 5px"
|
|
||||||
/>
|
|
||||||
</el-row>
|
|
||||||
<!-- 封面和摘要 -->
|
|
||||||
<el-row :gutter="20">
|
|
||||||
<el-col :span="12">
|
|
||||||
<CoverSelect v-model="activeNewsItem" :is-first="activeNewsIndex === 0" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<p>摘要:</p>
|
|
||||||
<el-input
|
|
||||||
:rows="8"
|
|
||||||
type="textarea"
|
|
||||||
v-model="activeNewsItem.digest"
|
|
||||||
placeholder="请输入摘要"
|
|
||||||
class="digest"
|
|
||||||
maxlength="120"
|
|
||||||
/>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<!--富文本编辑器组件-->
|
|
||||||
<el-row>
|
|
||||||
<Editor v-model="activeNewsItem.content" :editor-config="editorConfig" />
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { Editor } from '@/components/Editor'
|
|
||||||
import { createEditorConfig } from '../editor-config'
|
|
||||||
import CoverSelect from './CoverSelect.vue'
|
|
||||||
import { type NewsItem, createEmptyNewsItem } from './types'
|
|
||||||
|
|
||||||
defineOptions({ name: 'NewsForm' })
|
|
||||||
|
|
||||||
const message = useMessage()
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
isCreating: boolean
|
|
||||||
modelValue: NewsItem[] | null
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const accountId = inject<number>('accountId')
|
|
||||||
|
|
||||||
// ========== 文件上传 ==========
|
|
||||||
const UPLOAD_URL = import.meta.env.VITE_BASE_URL + '/admin-api/mp/material/upload-permanent' // 上传永久素材的地址
|
|
||||||
const editorConfig = createEditorConfig(UPLOAD_URL, accountId)
|
|
||||||
|
|
||||||
// v-model=newsList
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:modelValue', v: NewsItem[])
|
|
||||||
}>()
|
|
||||||
const newsList = computed<NewsItem[]>({
|
|
||||||
get() {
|
|
||||||
return props.modelValue === null ? [createEmptyNewsItem()] : props.modelValue
|
|
||||||
},
|
|
||||||
set(val) {
|
|
||||||
emit('update:modelValue', val)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const activeNewsIndex = ref(0)
|
|
||||||
const activeNewsItem = computed<NewsItem>(() => newsList.value[activeNewsIndex.value])
|
|
||||||
|
|
||||||
// 将图文向下移动
|
|
||||||
const moveDownNews = (index: number) => {
|
|
||||||
const temp = newsList.value[index]
|
|
||||||
newsList.value[index] = newsList.value[index + 1]
|
|
||||||
newsList.value[index + 1] = temp
|
|
||||||
activeNewsIndex.value = index + 1
|
|
||||||
}
|
|
||||||
|
|
||||||
// 将图文向上移动
|
|
||||||
const moveUpNews = (index: number) => {
|
|
||||||
const temp = newsList.value[index]
|
|
||||||
newsList.value[index] = newsList.value[index - 1]
|
|
||||||
newsList.value[index - 1] = temp
|
|
||||||
activeNewsIndex.value = index - 1
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除指定 index 的图文
|
|
||||||
const removeNews = async (index: number) => {
|
|
||||||
try {
|
|
||||||
await message.confirm('确定删除该图文吗?')
|
|
||||||
newsList.value.splice(index, 1)
|
|
||||||
if (activeNewsIndex.value === index) {
|
|
||||||
activeNewsIndex.value = 0
|
|
||||||
}
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加一个图文
|
|
||||||
const plusNews = () => {
|
|
||||||
newsList.value.push(createEmptyNewsItem())
|
|
||||||
activeNewsIndex.value = newsList.value.length - 1
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.ope-row {
|
|
||||||
padding-top: 5px;
|
|
||||||
margin-top: 5px;
|
|
||||||
text-align: center;
|
|
||||||
border-top: 1px solid #eaeaea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-row {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-row:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.digest {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 新增图文 */
|
|
||||||
.news-main {
|
|
||||||
width: 100%;
|
|
||||||
height: 120px;
|
|
||||||
margin: auto;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 120px;
|
|
||||||
background-color: #acadae;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-content-title {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
display: inline-block;
|
|
||||||
width: 98%;
|
|
||||||
height: 25px;
|
|
||||||
padding: 1%;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #fff;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
background-color: black;
|
|
||||||
opacity: 0.65;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-main-item {
|
|
||||||
width: 100%;
|
|
||||||
padding: 5px 0;
|
|
||||||
margin: auto;
|
|
||||||
background-color: #fff;
|
|
||||||
border-top: 1px solid #eaeaea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-content-item {
|
|
||||||
position: relative;
|
|
||||||
margin-left: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-content-item-title {
|
|
||||||
display: inline-block;
|
|
||||||
width: 70%;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-content-item-img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 25%;
|
|
||||||
background-color: #acadae;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-item {
|
|
||||||
width: 60%;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 0 auto 10px;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
|
|
||||||
.activeAddNews {
|
|
||||||
border: 5px solid #2bb673;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.father .child {
|
|
||||||
position: relative;
|
|
||||||
bottom: 25px;
|
|
||||||
display: none;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.father:hover .child {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import type { Article, NewsItem, NewsItemList } from './types'
|
|
||||||
import { createEmptyNewsItem } from './types'
|
|
||||||
import DraftTable from './DraftTable.vue'
|
|
||||||
import NewsForm from './NewsForm.vue'
|
|
||||||
|
|
||||||
export { DraftTable, NewsForm, createEmptyNewsItem }
|
|
||||||
export type { Article, NewsItem, NewsItemList }
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
interface NewsItem {
|
|
||||||
title: string
|
|
||||||
thumbMediaId: string
|
|
||||||
author: string
|
|
||||||
digest: string
|
|
||||||
showCoverPic: string
|
|
||||||
content: string
|
|
||||||
contentSourceUrl: string
|
|
||||||
needOpenComment: string
|
|
||||||
onlyFansCanComment: string
|
|
||||||
thumbUrl: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface NewsItemList {
|
|
||||||
newsItem: NewsItem[]
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Article {
|
|
||||||
mediaId: string
|
|
||||||
content: NewsItemList
|
|
||||||
updateTime: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const createEmptyNewsItem = (): NewsItem => {
|
|
||||||
return {
|
|
||||||
title: '',
|
|
||||||
thumbMediaId: '',
|
|
||||||
author: '',
|
|
||||||
digest: '',
|
|
||||||
showCoverPic: '',
|
|
||||||
content: '',
|
|
||||||
contentSourceUrl: '',
|
|
||||||
needOpenComment: '',
|
|
||||||
onlyFansCanComment: '',
|
|
||||||
thumbUrl: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export type { Article, NewsItem, NewsItemList }
|
|
||||||
export { createEmptyNewsItem }
|
|
||||||
@ -1,336 +0,0 @@
|
|||||||
<template>
|
|
||||||
<doc-alert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
|
|
||||||
|
|
||||||
<!-- 搜索工作栏 -->
|
|
||||||
<ContentWrap>
|
|
||||||
<el-form
|
|
||||||
class="-mb-15px"
|
|
||||||
:model="queryParams"
|
|
||||||
ref="queryFormRef"
|
|
||||||
:inline="true"
|
|
||||||
label-width="68px"
|
|
||||||
>
|
|
||||||
<el-form-item label="公众号" prop="accountId">
|
|
||||||
<WxAccountSelect @change="onAccountChanged" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 列表 -->
|
|
||||||
<ContentWrap>
|
|
||||||
<div class="waterfall" v-loading="loading">
|
|
||||||
<div
|
|
||||||
class="waterfall-item"
|
|
||||||
v-show="item.content && item.content.newsItem"
|
|
||||||
v-for="item in list"
|
|
||||||
:key="item.articleId"
|
|
||||||
>
|
|
||||||
<wx-news :articles="item.content.newsItem" />
|
|
||||||
<el-row justify="center" class="ope-row">
|
|
||||||
<el-button
|
|
||||||
type="danger"
|
|
||||||
circle
|
|
||||||
@click="handleDelete(item)"
|
|
||||||
v-hasPermi="['mp:free-publish:delete']"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:delete" />
|
|
||||||
</el-button>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNo"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
</ContentWrap>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import * as FreePublishApi from '@/api/mp/freePublish'
|
|
||||||
import WxNews from '@/views/mp/components/wx-news'
|
|
||||||
import WxAccountSelect from '@/views/mp/components/wx-account-select'
|
|
||||||
|
|
||||||
defineOptions({ name: 'MpFreePublish' })
|
|
||||||
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
|
|
||||||
const loading = ref(true) // 列表的加载中
|
|
||||||
const total = ref(0) // 列表的总页数
|
|
||||||
const list = ref<any[]>([]) // 列表的数据
|
|
||||||
|
|
||||||
const queryParams = reactive({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
accountId: -1
|
|
||||||
})
|
|
||||||
|
|
||||||
/** 侦听公众号变化 **/
|
|
||||||
const onAccountChanged = (id: number) => {
|
|
||||||
queryParams.accountId = id
|
|
||||||
queryParams.pageNo = 1
|
|
||||||
getList()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 查询列表 */
|
|
||||||
const getList = async () => {
|
|
||||||
try {
|
|
||||||
loading.value = true
|
|
||||||
const data = await FreePublishApi.getFreePublishPage(queryParams)
|
|
||||||
list.value = data.list
|
|
||||||
total.value = data.total
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
const handleDelete = async (item: any) => {
|
|
||||||
try {
|
|
||||||
// 删除的二次确认
|
|
||||||
await message.delConfirm('删除后用户将无法访问此页面，确定删除？')
|
|
||||||
// 发起删除
|
|
||||||
await FreePublishApi.deleteFreePublish(queryParams.accountId, item.articleId)
|
|
||||||
message.success(t('common.delSuccess'))
|
|
||||||
// 刷新列表
|
|
||||||
await getList()
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@media (width >= 992px) and (width <= 1300px) {
|
|
||||||
.waterfall {
|
|
||||||
column-count: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (width >= 768px) and (width <= 991px) {
|
|
||||||
.waterfall {
|
|
||||||
column-count: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: orange;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (width <= 767px) {
|
|
||||||
.waterfall {
|
|
||||||
column-count: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ope-row {
|
|
||||||
padding-top: 5px;
|
|
||||||
margin-top: 5px;
|
|
||||||
text-align: center;
|
|
||||||
border-top: 1px solid #eaeaea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-name {
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-upload__tip {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 新增图文 */
|
|
||||||
.left {
|
|
||||||
display: inline-block;
|
|
||||||
width: 35%;
|
|
||||||
margin-top: 200px;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60%;
|
|
||||||
margin-top: -40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-uploader {
|
|
||||||
display: inline-block;
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-uploader .el-upload {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
text-align: unset !important;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-uploader .el-upload:hover {
|
|
||||||
border-color: #165dff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-uploader-icon {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
font-size: 28px;
|
|
||||||
line-height: 120px;
|
|
||||||
color: #8c939d;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid #d9d9d9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
width: 230px;
|
|
||||||
height: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar1 {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.digest {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60%;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 新增图文 */
|
|
||||||
|
|
||||||
/* 瀑布流样式 */
|
|
||||||
.waterfall {
|
|
||||||
width: 100%;
|
|
||||||
column-gap: 10px;
|
|
||||||
column-count: 5;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.waterfall-item {
|
|
||||||
padding: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
break-inside: avoid;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 瀑布流样式 */
|
|
||||||
.news-main {
|
|
||||||
width: 100%;
|
|
||||||
height: 120px;
|
|
||||||
margin: auto;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 120px;
|
|
||||||
background-color: #acadae;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-content-title {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
display: inline-block;
|
|
||||||
width: 98%;
|
|
||||||
height: 25px;
|
|
||||||
padding: 1%;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #fff;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
background-color: black;
|
|
||||||
opacity: 0.65;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-main-item {
|
|
||||||
width: 100%;
|
|
||||||
padding: 5px 0;
|
|
||||||
margin: auto;
|
|
||||||
background-color: #fff;
|
|
||||||
border-top: 1px solid #eaeaea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-content-item {
|
|
||||||
position: relative;
|
|
||||||
margin-left: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-content-item-title {
|
|
||||||
display: inline-block;
|
|
||||||
width: 70%;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-content-item-img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 25%;
|
|
||||||
background-color: #acadae;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-tt {
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.activeAddNews {
|
|
||||||
border: 5px solid #2bb673;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-main-plus {
|
|
||||||
width: 280px;
|
|
||||||
height: 50px;
|
|
||||||
margin: auto;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-plus {
|
|
||||||
margin: 10px;
|
|
||||||
font-size: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-item {
|
|
||||||
width: 60%;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 0 auto 10px;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.father .child {
|
|
||||||
position: relative;
|
|
||||||
bottom: 25px;
|
|
||||||
display: none;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.father:hover .child {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumb-div {
|
|
||||||
display: inline-block;
|
|
||||||
width: 30%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumb-but {
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
import type { UploadRawFile } from 'element-plus'
|
|
||||||
|
|
||||||
const message = useMessage() // 消息
|
|
||||||
|
|
||||||
enum UploadType {
|
|
||||||
Image = 'image',
|
|
||||||
Voice = 'voice',
|
|
||||||
Video = 'video'
|
|
||||||
}
|
|
||||||
|
|
||||||
const useBeforeUpload = (type: UploadType, maxSizeMB: number) => {
|
|
||||||
const fn = (rawFile: UploadRawFile): boolean => {
|
|
||||||
let allowTypes: string[] = []
|
|
||||||
let name = ''
|
|
||||||
|
|
||||||
switch (type) {
|
|
||||||
case UploadType.Image:
|
|
||||||
allowTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg']
|
|
||||||
maxSizeMB = 2
|
|
||||||
name = '图片'
|
|
||||||
break
|
|
||||||
case UploadType.Voice:
|
|
||||||
allowTypes = ['audio/mp3', 'audio/mpeg', 'audio/wma', 'audio/wav', 'audio/amr']
|
|
||||||
maxSizeMB = 2
|
|
||||||
name = '语音'
|
|
||||||
break
|
|
||||||
case UploadType.Video:
|
|
||||||
allowTypes = ['video/mp4']
|
|
||||||
maxSizeMB = 10
|
|
||||||
name = '视频'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
// 格式不正确
|
|
||||||
if (!allowTypes.includes(rawFile.type)) {
|
|
||||||
message.error(`上传${name}格式不对!`)
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
// 大小不正确
|
|
||||||
if (rawFile.size / 1024 / 1024 > maxSizeMB) {
|
|
||||||
message.error(`上传${name}大小不能超过${maxSizeMB}M!`)
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
return fn
|
|
||||||
}
|
|
||||||
|
|
||||||
export { UploadType, useBeforeUpload }
|
|
||||||
@ -1,77 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-upload
|
|
||||||
:action="UPLOAD_URL"
|
|
||||||
:headers="HEADERS"
|
|
||||||
multiple
|
|
||||||
:limit="1"
|
|
||||||
:file-list="fileList"
|
|
||||||
:data="uploadData"
|
|
||||||
:on-error="onUploadError"
|
|
||||||
:before-upload="onBeforeUpload"
|
|
||||||
:on-success="onUploadSuccess"
|
|
||||||
>
|
|
||||||
<el-button type="primary" plain> 点击上传 </el-button>
|
|
||||||
<template #tip>
|
|
||||||
<span class="el-upload__tip" style="margin-left: 5px">
|
|
||||||
<slot></slot>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-upload>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { UploadProps, UploadUserFile } from 'element-plus'
|
|
||||||
import {
|
|
||||||
HEADERS,
|
|
||||||
UPLOAD_URL,
|
|
||||||
UploadData,
|
|
||||||
UploadType,
|
|
||||||
beforeImageUpload,
|
|
||||||
beforeVoiceUpload
|
|
||||||
} from './upload'
|
|
||||||
|
|
||||||
const message = useMessage()
|
|
||||||
|
|
||||||
const props = defineProps<{ type: UploadType }>()
|
|
||||||
|
|
||||||
const accountId = inject<number>('accountId')
|
|
||||||
|
|
||||||
const fileList = ref<UploadUserFile[]>([])
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'uploaded', v: void)
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const uploadData: UploadData = reactive({
|
|
||||||
type: UploadType.Image,
|
|
||||||
title: '',
|
|
||||||
introduction: '',
|
|
||||||
accountId: accountId!
|
|
||||||
})
|
|
||||||
|
|
||||||
/** 上传前检查 */
|
|
||||||
const onBeforeUpload = props.type === UploadType.Image ? beforeImageUpload : beforeVoiceUpload
|
|
||||||
|
|
||||||
/** 上传成功处理 */
|
|
||||||
const onUploadSuccess: UploadProps['onSuccess'] = (res: any) => {
|
|
||||||
if (res.code !== 0) {
|
|
||||||
message.alertError('上传出错：' + res.msg)
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清空上传时的各种数据
|
|
||||||
fileList.value = []
|
|
||||||
uploadData.title = ''
|
|
||||||
uploadData.introduction = ''
|
|
||||||
|
|
||||||
message.notifySuccess('上传成功')
|
|
||||||
emit('uploaded')
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 上传失败处理 */
|
|
||||||
const onUploadError = (err: Error) => message.error('上传失败: ' + err.message)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.el-upload__tip {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-table :data="props.list" stripe border v-loading="props.loading" style="margin-top: 10px">
|
|
||||||
<el-table-column label="编号" align="center" prop="mediaId" />
|
|
||||||
<el-table-column label="文件名" align="center" prop="name" />
|
|
||||||
<el-table-column label="标题" align="center" prop="title" />
|
|
||||||
<el-table-column label="介绍" align="center" prop="introduction" />
|
|
||||||
<el-table-column label="视频" align="center">
|
|
||||||
<template #default="scope">
|
|
||||||
<WxVideoPlayer v-if="scope.row.url" :url="scope.row.url" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="上传时间"
|
|
||||||
align="center"
|
|
||||||
:formatter="dateFormatter"
|
|
||||||
prop="createTime"
|
|
||||||
width="180"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
|
||||||
<span>{{ scope.row.createTime }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="center" fixed="right">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button type="primary" link @click="handleDownload(scope.row.url)">
|
|
||||||
<Icon icon="ep:download" />下载
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
link
|
|
||||||
@click="emit('delete', scope.row.id)"
|
|
||||||
v-hasPermi="['mp:material:delete']"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:delete" />删除
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import WxVideoPlayer from '@/views/mp/components/wx-video-play'
|
|
||||||
import { dateFormatter } from '@/utils/formatTime'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
list: any[]
|
|
||||||
loading: boolean
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'delete', v: number)
|
|
||||||
(e: 'download', v: string)
|
|
||||||
}>()
|
|
||||||
|
|
||||||
// 下载文件
|
|
||||||
const handleDownload = (url: string) => {
|
|
||||||
window.open(url, '_blank')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-table :data="props.list" stripe border v-loading="props.loading" style="margin-top: 10px">
|
|
||||||
<el-table-column label="编号" align="center" prop="mediaId" />
|
|
||||||
<el-table-column label="文件名" align="center" prop="name" />
|
|
||||||
<el-table-column label="语音" align="center">
|
|
||||||
<template #default="scope">
|
|
||||||
<WxVoicePlayer v-if="scope.row.url" :url="scope.row.url" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="上传时间"
|
|
||||||
align="center"
|
|
||||||
prop="createTime"
|
|
||||||
:formatter="dateFormatter"
|
|
||||||
width="180"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
|
||||||
<span>{{ scope.row.createTime }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button type="primary" link @click="emit('delete', scope.row.id)">
|
|
||||||
<Icon icon="ep:download" />下载
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
link
|
|
||||||
@click="emit('delete', scope.row.id)"
|
|
||||||
v-hasPermi="['mp:material:delete']"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:delete" />删除
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
|
|
||||||
import { dateFormatter } from '@/utils/formatTime'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
list: any[]
|
|
||||||
loading: boolean
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'delete', v: number)
|
|
||||||
}>()
|
|
||||||
</script>
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import type { UploadProps, UploadRawFile } from 'element-plus'
|
|
||||||
import { getAccessToken } from '@/utils/auth'
|
|
||||||
import { UploadType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
|
|
||||||
|
|
||||||
const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 请求头
|
|
||||||
const UPLOAD_URL = import.meta.env.VITE_BASE_URL + '/admin-api/mp/material/upload-permanent' // 上传地址
|
|
||||||
|
|
||||||
interface UploadData {
|
|
||||||
type: UploadType
|
|
||||||
title: string
|
|
||||||
introduction: string
|
|
||||||
accountId: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
|
|
||||||
useBeforeUpload(UploadType.Image, 2)(rawFile)
|
|
||||||
|
|
||||||
const beforeVoiceUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
|
|
||||||
useBeforeUpload(UploadType.Voice, 2)(rawFile)
|
|
||||||
|
|
||||||
const beforeVideoUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
|
|
||||||
useBeforeUpload(UploadType.Video, 10)(rawFile)
|
|
||||||
|
|
||||||
export {
|
|
||||||
HEADERS,
|
|
||||||
UPLOAD_URL,
|
|
||||||
UploadType,
|
|
||||||
UploadData,
|
|
||||||
beforeImageUpload,
|
|
||||||
beforeVoiceUpload,
|
|
||||||
beforeVideoUpload
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
@ -1,42 +0,0 @@
|
|||||||
export default [
|
|
||||||
{
|
|
||||||
value: 'view',
|
|
||||||
label: '跳转网页'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'miniprogram',
|
|
||||||
label: '跳转小程序'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'click',
|
|
||||||
label: '点击回复'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'article_view_limited',
|
|
||||||
label: '跳转图文消息'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'scancode_push',
|
|
||||||
label: '扫码直接返回结果'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'scancode_waitmsg',
|
|
||||||
label: '扫码回复'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'pic_sysphoto',
|
|
||||||
label: '系统拍照发图'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'pic_photo_or_album',
|
|
||||||
label: '拍照或者相册'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'pic_weixin',
|
|
||||||
label: '微信相册'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'location_select',
|
|
||||||
label: '选择地理位置'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
export interface Replay {
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
picUrl: string
|
|
||||||
url: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type MenuType =
|
|
||||||
| ''
|
|
||||||
| 'click'
|
|
||||||
| 'view'
|
|
||||||
| 'scancode_waitmsg'
|
|
||||||
| 'scancode_push'
|
|
||||||
| 'pic_sysphoto'
|
|
||||||
| 'pic_photo_or_album'
|
|
||||||
| 'pic_weixin'
|
|
||||||
| 'location_select'
|
|
||||||
| 'article_view_limited'
|
|
||||||
|
|
||||||
interface _RawMenu {
|
|
||||||
// db
|
|
||||||
id: number
|
|
||||||
parentId: number
|
|
||||||
accountId: number
|
|
||||||
appId: string
|
|
||||||
createTime: number
|
|
||||||
|
|
||||||
// mp-native
|
|
||||||
name: string
|
|
||||||
menuKey: string
|
|
||||||
type: MenuType
|
|
||||||
url: string
|
|
||||||
miniProgramAppId: string
|
|
||||||
miniProgramPagePath: string
|
|
||||||
articleId: string
|
|
||||||
replyMessageType: string
|
|
||||||
replyContent: string
|
|
||||||
replyMediaId: string
|
|
||||||
replyMediaUrl: string
|
|
||||||
replyThumbMediaId: string
|
|
||||||
replyThumbMediaUrl: string
|
|
||||||
replyTitle: string
|
|
||||||
replyDescription: string
|
|
||||||
replyArticles: Replay
|
|
||||||
replyMusicUrl: string
|
|
||||||
replyHqMusicUrl: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type RawMenu = Partial<_RawMenu>
|
|
||||||
|
|
||||||
interface _Reply {
|
|
||||||
type: string
|
|
||||||
accountId: number
|
|
||||||
content: string
|
|
||||||
mediaId: string
|
|
||||||
url: string
|
|
||||||
thumbMediaId: string
|
|
||||||
thumbMediaUrl: string
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
articles: null | Replay[]
|
|
||||||
musicUrl: string
|
|
||||||
hqMusicUrl: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type Reply = Partial<_Reply>
|
|
||||||
|
|
||||||
interface _Menu extends RawMenu {
|
|
||||||
children: _Menu[]
|
|
||||||
reply: Reply
|
|
||||||
}
|
|
||||||
|
|
||||||
export type Menu = Partial<_Menu>
|
|
||||||
Loading…
Reference in New Issue