fix: 冲突
This commit is contained in:
hw
32
apps/web-antd/src/views/mp/components/constants.ts
Normal file
32
apps/web-antd/src/views/mp/components/constants.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
export enum ReplyType {
|
||||
Image = 'image',
|
||||
Music = 'music',
|
||||
News = 'news',
|
||||
Text = 'text',
|
||||
Video = 'video',
|
||||
Voice = 'voice',
|
||||
}
|
||||
|
||||
export enum NewsType {
|
||||
Draft = '2',
|
||||
Published = '1',
|
||||
}
|
||||
|
||||
export enum MaterialType {
|
||||
Image = 'image',
|
||||
News = 'news',
|
||||
Video = 'video',
|
||||
Voice = 'voice',
|
||||
}
|
||||
|
||||
export enum MsgType {
|
||||
Event = 'event',
|
||||
Image = 'image',
|
||||
Link = 'link',
|
||||
Location = 'location',
|
||||
Music = 'music',
|
||||
News = 'news',
|
||||
Text = 'text',
|
||||
Video = 'video',
|
||||
Voice = 'voice',
|
||||
}
|
||||
@@ -1,20 +1,11 @@
|
||||
// 统一导出所有模块组件
|
||||
export * from './constants';
|
||||
|
||||
export { default as Location } from './location/location.vue';
|
||||
|
||||
export { default as MaterialSelect } from './material-select/material-select.vue';
|
||||
export * from './material-select/types';
|
||||
|
||||
export * from './msg/types';
|
||||
|
||||
export { default as Music } from './music/music.vue';
|
||||
|
||||
export { default as News } from './news/news.vue';
|
||||
|
||||
export { default as ReplySelect } from './reply/reply.vue';
|
||||
|
||||
export * from './reply/types';
|
||||
|
||||
export { default as VideoPlayer } from './video-play/video-play.vue';
|
||||
|
||||
export { default as VoicePlayer } from './voice-play/voice-play.vue';
|
||||
export * from './wx-account-select';
|
||||
export * from './wx-location';
|
||||
export * from './wx-material-select';
|
||||
export * from './wx-msg';
|
||||
export * from './wx-music';
|
||||
export * from './wx-news';
|
||||
export * from './wx-reply';
|
||||
export * from './wx-video-play';
|
||||
export * from './wx-voice-play';
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
<!--
|
||||
【微信消息 - 定位】TODO @Dhb52 目前未启用；TODO @芋艿：需要测试下；
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Col, Row } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'Location' });
|
||||
|
||||
const props = defineProps({
|
||||
locationX: {
|
||||
required: true,
|
||||
type: Number,
|
||||
},
|
||||
locationY: {
|
||||
required: true,
|
||||
type: Number,
|
||||
},
|
||||
label: {
|
||||
// 地名
|
||||
required: true,
|
||||
type: String,
|
||||
},
|
||||
qqMapKey: {
|
||||
// TODO @芋艿：是不是要换成全局的读取？
|
||||
// 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>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
:href="`https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${
|
||||
locationY
|
||||
}&pointy=${locationX}&name=${label}&ref=yudao`"
|
||||
>
|
||||
<Col>
|
||||
<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`"
|
||||
/>
|
||||
</Row>
|
||||
<Row>
|
||||
<IconifyIcon icon="lucide:map-pin" />
|
||||
{{ label }}
|
||||
</Row>
|
||||
</Col>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,324 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { formatTime } from '@vben/utils';
|
||||
|
||||
import { Button, Pagination, Spin } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getDraftPage } from '#/api/mp/draft';
|
||||
import { getFreePublishPage } from '#/api/mp/freePublish';
|
||||
import { getMaterialPage } from '#/api/mp/material';
|
||||
import { News, VideoPlayer, VoicePlayer } from '#/views/mp/components/index';
|
||||
|
||||
import { NewsType } from './types';
|
||||
|
||||
defineOptions({ name: 'MaterialSelect' });
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
accountId: number;
|
||||
newsType?: NewsType;
|
||||
type: string;
|
||||
}>(),
|
||||
{
|
||||
newsType: NewsType.Published,
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits(['selectMaterial']);
|
||||
|
||||
const loading = ref(false); // 遮罩层
|
||||
const total = ref(0); // 总条数
|
||||
const list = ref<any[]>([]); // 数据列表
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
accountId: props.accountId,
|
||||
}); // 查询参数
|
||||
|
||||
/** 选择素材 */
|
||||
function selectMaterialFun(item: any) {
|
||||
emit('selectMaterial', item);
|
||||
}
|
||||
|
||||
/** 获取分页数据 */
|
||||
async function getPage() {
|
||||
loading.value = true;
|
||||
try {
|
||||
if (props.type === 'news' && props.newsType === NewsType.Published) {
|
||||
// 【图文】+ 【已发布】
|
||||
await getFreePublishPageFun();
|
||||
} else if (props.type === 'news' && props.newsType === NewsType.Draft) {
|
||||
// 【图文】+ 【草稿】
|
||||
await getDraftPageFun();
|
||||
} else {
|
||||
// 【素材】
|
||||
await getMaterialPageFun();
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 获取素材分页 */
|
||||
async function getMaterialPageFun() {
|
||||
const data = await getMaterialPage({
|
||||
...queryParams,
|
||||
type: props.type,
|
||||
});
|
||||
list.value = data.list;
|
||||
total.value = data.total;
|
||||
}
|
||||
|
||||
/** 获取已发布图文分页 */
|
||||
async function getFreePublishPageFun() {
|
||||
const data = await getFreePublishPage(queryParams);
|
||||
data.list.forEach((item: any) => {
|
||||
const articles = item.content.newsItem;
|
||||
articles.forEach((article: any) => {
|
||||
article.picUrl = article.thumbUrl;
|
||||
});
|
||||
});
|
||||
list.value = data.list;
|
||||
total.value = data.total;
|
||||
}
|
||||
|
||||
/** 获取草稿图文分页 */
|
||||
async function getDraftPageFun() {
|
||||
const data = await getDraftPage(queryParams);
|
||||
data.list.forEach((draft: any) => {
|
||||
const articles = draft.content.newsItem;
|
||||
articles.forEach((article: any) => {
|
||||
article.picUrl = article.thumbUrl;
|
||||
});
|
||||
});
|
||||
list.value = data.list;
|
||||
total.value = data.total;
|
||||
}
|
||||
|
||||
// 音频素材表格列
|
||||
const voiceColumns = computed(() => [
|
||||
{ field: 'mediaId', title: '编号', align: 'center' },
|
||||
{ field: 'name', title: '文件名', align: 'center' },
|
||||
{
|
||||
field: 'url',
|
||||
title: '语音',
|
||||
align: 'center',
|
||||
slots: { default: 'voice' },
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '上传时间',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
formatter: ({ cellValue }: any) =>
|
||||
formatTime(cellValue, 'YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{
|
||||
field: 'actions',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
]);
|
||||
|
||||
// 视频素材表格列
|
||||
const videoColumns = computed(() => [
|
||||
{ field: 'mediaId', title: '编号', align: 'center' },
|
||||
{ field: 'name', title: '文件名', align: 'center' },
|
||||
{ field: 'title', title: '标题', align: 'center' },
|
||||
{ field: 'introduction', title: '介绍', align: 'center' },
|
||||
{
|
||||
field: 'url',
|
||||
title: '视频',
|
||||
align: 'center',
|
||||
slots: { default: 'video' },
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '上传时间',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
formatter: ({ cellValue }: any) =>
|
||||
formatTime(cellValue, 'YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{
|
||||
field: 'actions',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
]);
|
||||
|
||||
// 语音表格
|
||||
const [VoiceGrid] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: voiceColumns.value,
|
||||
border: true,
|
||||
pagerConfig: {
|
||||
enabled: true,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }) => {
|
||||
const data = await getMaterialPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
accountId: props.accountId,
|
||||
type: 'voice',
|
||||
});
|
||||
return data;
|
||||
},
|
||||
},
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
},
|
||||
} as VxeTableGridOptions<any>,
|
||||
});
|
||||
|
||||
// 视频表格
|
||||
const [VideoGrid] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: videoColumns.value,
|
||||
border: true,
|
||||
pagerConfig: {
|
||||
enabled: true,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }) => {
|
||||
const data = await getMaterialPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
accountId: props.accountId,
|
||||
type: 'video',
|
||||
});
|
||||
return data;
|
||||
},
|
||||
},
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
},
|
||||
} as VxeTableGridOptions<any>,
|
||||
});
|
||||
|
||||
// 对于 image 和 news 类型，需要手动加载数据
|
||||
onMounted(() => {
|
||||
if (props.type === 'image' || props.type === 'news') {
|
||||
getPage();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pb-8">
|
||||
<!-- 类型：image -->
|
||||
<div v-if="props.type === 'image'">
|
||||
<Spin :spinning="loading">
|
||||
<div
|
||||
class="columns-1 gap-2.5 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
|
||||
>
|
||||
<div
|
||||
v-for="item in list"
|
||||
:key="item.mediaId"
|
||||
class="mb-2.5 break-inside-avoid rounded border border-gray-200 p-2.5 transition-shadow hover:shadow-md"
|
||||
>
|
||||
<img :src="item.url" :alt="item.name" class="w-full rounded" />
|
||||
<p class="my-2 truncate text-sm">{{ item.name }}</p>
|
||||
<div class="flex justify-center">
|
||||
<Button type="primary" @click="selectMaterialFun(item)">
|
||||
选择
|
||||
<IconifyIcon icon="lucide:circle-check" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
<!-- 分页组件 -->
|
||||
<div class="mt-4 flex justify-end">
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:current="queryParams.pageNo"
|
||||
v-model:page-size="queryParams.pageSize"
|
||||
@change="getMaterialPageFun"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 类型：voice -->
|
||||
<div v-else-if="props.type === 'voice'">
|
||||
<VoiceGrid>
|
||||
<template #voice="{ row }">
|
||||
<VoicePlayer :url="row.url" />
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<Button type="link" @click="selectMaterialFun(row)">
|
||||
选择
|
||||
<IconifyIcon icon="lucide:circle-check" />
|
||||
</Button>
|
||||
</template>
|
||||
</VoiceGrid>
|
||||
</div>
|
||||
|
||||
<!-- 类型：video -->
|
||||
<div v-else-if="props.type === 'video'">
|
||||
<VideoGrid>
|
||||
<template #video="{ row }">
|
||||
<VideoPlayer :url="row.url" />
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<Button type="link" @click="selectMaterialFun(row)">
|
||||
选择
|
||||
<IconifyIcon icon="lucide:circle-check" />
|
||||
</Button>
|
||||
</template>
|
||||
</VideoGrid>
|
||||
</div>
|
||||
|
||||
<!-- 类型：news -->
|
||||
<div v-else-if="props.type === 'news'">
|
||||
<Spin :spinning="loading">
|
||||
<div
|
||||
class="columns-1 gap-2.5 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
|
||||
>
|
||||
<div
|
||||
v-for="item in list"
|
||||
:key="item.mediaId"
|
||||
class="mb-2.5 break-inside-avoid"
|
||||
>
|
||||
<div v-if="item.content && item.content.newsItem">
|
||||
<News :articles="item.content.newsItem" />
|
||||
<div class="mt-2 flex justify-center">
|
||||
<Button type="primary" @click="selectMaterialFun(item)">
|
||||
选择
|
||||
<IconifyIcon icon="lucide:circle-check" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
<!-- 分页组件 -->
|
||||
<div class="mt-4 flex justify-end">
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:current="queryParams.pageNo"
|
||||
v-model:page-size="queryParams.pageSize"
|
||||
@change="getMaterialPageFun"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,4 +0,0 @@
|
||||
export enum NewsType {
|
||||
Draft = '2',
|
||||
Published = '1',
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { User } from './types';
|
||||
|
||||
import { formatDateTime } from '@vben/utils';
|
||||
|
||||
import avatarWechat from '#/assets/imgs/wechat.png';
|
||||
|
||||
import Msg from './msg.vue';
|
||||
|
||||
// 确保 User 类型被识别为已使用
|
||||
type PropsUser = User;
|
||||
|
||||
defineOptions({ name: 'MsgList' });
|
||||
|
||||
const props = defineProps<{
|
||||
accountId: number;
|
||||
list: any[];
|
||||
user: PropsUser;
|
||||
}>();
|
||||
|
||||
const SendFrom = {
|
||||
MpBot: 2,
|
||||
User: 1,
|
||||
} as const; // 使用常量对象替代枚举，避免 linter 误报
|
||||
|
||||
type SendFromType = (typeof SendFrom)[keyof typeof SendFrom];
|
||||
|
||||
// 显式引用枚举成员供模板使用
|
||||
const MpBotValue = SendFrom.MpBot;
|
||||
const UserValue = SendFrom.User;
|
||||
|
||||
const getAvatar = (sendFrom: SendFromType) =>
|
||||
sendFrom === UserValue ? props.user.avatar : avatarWechat;
|
||||
|
||||
const getNickname = (sendFrom: SendFromType) =>
|
||||
sendFrom === UserValue ? props.user.nickname : '公众号';
|
||||
</script>
|
||||
<template>
|
||||
<div v-for="item in props.list" :key="item.id">
|
||||
<div
|
||||
class="mb-[30px] flex items-start"
|
||||
:class="{ 'flex-row-reverse': item.sendFrom === MpBotValue }"
|
||||
>
|
||||
<div class="w-20 text-center">
|
||||
<img
|
||||
:src="getAvatar(item.sendFrom)"
|
||||
class="box-border h-12 w-12 rounded-full border border-transparent align-middle"
|
||||
/>
|
||||
<div class="text-sm font-bold text-[#999]">
|
||||
{{ getNickname(item.sendFrom) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative mx-5 flex-1 rounded-[5px] border border-[#dedede]">
|
||||
<div
|
||||
class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
|
||||
>
|
||||
<div class="text-sm text-[#999]">
|
||||
{{ formatDateTime(item.createTime) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="overflow-hidden rounded-b-[5px] bg-white px-[15px] py-[15px] text-sm text-[#333]"
|
||||
:style="item.sendFrom === MpBotValue ? 'background: #6BED72;' : ''"
|
||||
>
|
||||
<Msg :item="item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,17 +0,0 @@
|
||||
export enum MsgType {
|
||||
Event = 'event',
|
||||
Image = 'image',
|
||||
Link = 'link',
|
||||
Location = 'location',
|
||||
Music = 'music',
|
||||
News = 'news',
|
||||
Text = 'text',
|
||||
Video = 'video',
|
||||
Voice = 'voice',
|
||||
}
|
||||
|
||||
export interface User {
|
||||
nickname: string;
|
||||
avatar: string;
|
||||
accountId: number;
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
<!--
|
||||
【微信消息 - 音乐】
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'Music' });
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
required: false,
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
description: {
|
||||
required: false,
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
musicUrl: {
|
||||
required: false,
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
hqMusicUrl: {
|
||||
required: false,
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
thumbMediaUrl: {
|
||||
required: true,
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
musicUrl: props.musicUrl,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
:href="hqMusicUrl ? hqMusicUrl : musicUrl"
|
||||
style="text-decoration: none"
|
||||
>
|
||||
<div class="flex rounded-[5px] bg-white p-[10px]">
|
||||
<div class="mr-3 h-12 w-12 overflow-hidden rounded-full">
|
||||
<img :src="thumbMediaUrl" alt="" class="h-full w-full object-cover" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="line-clamp-3 text-[rgba(0,0,0,0.45)]">
|
||||
{{ description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,68 +0,0 @@
|
||||
<!--
|
||||
- Copyright (C) 2018-2019
|
||||
- All rights reserved, Designed By www.joolun.com
|
||||
【微信消息 - 图文】
|
||||
芋道源码：
|
||||
① 代码优化，补充注释，提升阅读性
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import { Image } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'News' });
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
articles?: any[] | null;
|
||||
}>(),
|
||||
{
|
||||
articles: null,
|
||||
},
|
||||
);
|
||||
|
||||
defineExpose({
|
||||
articles: props.articles,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- DONE @hw：tindwind 替代 -->
|
||||
<div class="mx-auto w-full bg-white">
|
||||
<div v-for="(article, index) in articles" :key="index">
|
||||
<!-- 头条 -->
|
||||
<a v-if="index === 0" :href="article.url" target="_blank">
|
||||
<div class="mx-auto w-full">
|
||||
<div class="relative w-full bg-[#acadae]">
|
||||
<Image
|
||||
:src="article.picUrl || article.thumbUrl"
|
||||
class="h-[120px] w-full"
|
||||
:preview="false"
|
||||
/>
|
||||
<div
|
||||
class="absolute bottom-0 left-0 inline-block w-[100%] whitespace-normal bg-black p-[1%] text-xs text-white opacity-65"
|
||||
>
|
||||
<span>{{ article.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- 二条/三条等等 -->
|
||||
<a v-else :href="article.url" target="_blank">
|
||||
<div class="border-t border-[#eaeaea] bg-white py-[5px]">
|
||||
<div class="relative">
|
||||
<div
|
||||
class="ml-[1%] inline-block w-[70%] whitespace-normal text-[10px]"
|
||||
>
|
||||
{{ article.title }}
|
||||
</div>
|
||||
<div class="mr-[1%] inline-block w-[25%] bg-[#acadae]">
|
||||
<img
|
||||
:src="article.picUrl || article.thumbUrl"
|
||||
class="h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,117 +0,0 @@
|
||||
<!--
|
||||
- Copyright (C) 2018-2019
|
||||
- All rights reserved, Designed By www.joolun.com
|
||||
芋道源码：
|
||||
① 移除多余的 rep 为前缀的变量，让 message 消息更简单
|
||||
② 代码优化，补充注释，提升阅读性
|
||||
③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
|
||||
④ 支持发送【视频】消息时，支持新建视频
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import type { Reply } from './types';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Row, Tabs } from 'ant-design-vue';
|
||||
|
||||
import { NewsType } from '../material-select/types';
|
||||
import TabImage from './tab-image.vue';
|
||||
import TabMusic from './tab-music.vue';
|
||||
import TabNews from './tab-news.vue';
|
||||
import TabText from './tab-text.vue';
|
||||
import TabVideo from './tab-video.vue';
|
||||
import TabVoice from './tab-voice.vue';
|
||||
import { createEmptyReply, ReplyType } from './types';
|
||||
|
||||
defineOptions({ name: 'ReplySelect' });
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue: Reply | undefined;
|
||||
newsType?: NewsType;
|
||||
}>(),
|
||||
{
|
||||
newsType: () => NewsType.Published,
|
||||
},
|
||||
);
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Reply): void;
|
||||
}>();
|
||||
|
||||
// 提供一个默认的 Reply 对象，避免 undefined 导致的错误
|
||||
const defaultReply: Reply = {
|
||||
accountId: -1,
|
||||
type: ReplyType.Text,
|
||||
};
|
||||
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue || defaultReply,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
|
||||
/** 清除除了`type`, `accountId`的字段 */
|
||||
function clear() {
|
||||
reply.value = createEmptyReply(reply);
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
clear,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 之前使用的currentTab会导致组件tab不切换，直接改为使用reply.type,不做tab缓存，缓存会多很多垃圾字段 -->
|
||||
<Tabs v-model:active-key="reply.type" type="card" @change="clear">
|
||||
<!-- 类型 1：文本 -->
|
||||
<Tabs.TabPane :key="ReplyType.Text">
|
||||
<template #tab>
|
||||
<Row align="middle"><IconifyIcon icon="ep:document" /> 文本</Row>
|
||||
</template>
|
||||
<TabText v-model="reply.content" />
|
||||
</Tabs.TabPane>
|
||||
|
||||
<!-- 类型 2：图片 -->
|
||||
<Tabs.TabPane :key="ReplyType.Image">
|
||||
<template #tab>
|
||||
<Row align="middle">
|
||||
<IconifyIcon icon="ep:picture" class="mr-5px" /> 图片
|
||||
</Row>
|
||||
</template>
|
||||
<TabImage v-model="reply" />
|
||||
</Tabs.TabPane>
|
||||
|
||||
<!-- 类型 3：语音 -->
|
||||
<Tabs.TabPane :key="ReplyType.Voice">
|
||||
<template #tab>
|
||||
<Row align="middle"><IconifyIcon icon="ep:phone" /> 语音</Row>
|
||||
</template>
|
||||
<TabVoice v-model="reply" />
|
||||
</Tabs.TabPane>
|
||||
|
||||
<!-- 类型 4：视频 -->
|
||||
<Tabs.TabPane :key="ReplyType.Video">
|
||||
<template #tab>
|
||||
<Row align="middle"><IconifyIcon icon="ep:share" /> 视频</Row>
|
||||
</template>
|
||||
<TabVideo v-model="reply" />
|
||||
</Tabs.TabPane>
|
||||
|
||||
<!-- 类型 5：图文 -->
|
||||
<Tabs.TabPane :key="ReplyType.News">
|
||||
<template #tab>
|
||||
<Row align="middle"><IconifyIcon icon="ep:reading" /> 图文</Row>
|
||||
</template>
|
||||
<TabNews v-model="reply" :news-type="newsType" />
|
||||
</Tabs.TabPane>
|
||||
|
||||
<!-- 类型 6：音乐 -->
|
||||
<Tabs.TabPane :key="ReplyType.Music">
|
||||
<template #tab>
|
||||
<Row align="middle"><IconifyIcon icon="ep:service" />音乐</Row>
|
||||
</template>
|
||||
<TabMusic v-model="reply" />
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</template>
|
||||
@@ -1,152 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { UploadFile } from 'ant-design-vue';
|
||||
|
||||
import type { Reply } from './types';
|
||||
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
|
||||
|
||||
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
|
||||
import { MaterialSelect } from '#/views/mp/components';
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Reply;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Reply): void;
|
||||
}>();
|
||||
|
||||
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
|
||||
const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
|
||||
const showDialog = ref(false);
|
||||
const fileList = ref([]);
|
||||
const uploadData = reactive({
|
||||
accountId: reply.value.accountId,
|
||||
type: 'image',
|
||||
title: '',
|
||||
introduction: '',
|
||||
});
|
||||
|
||||
/** 图片上传前校验 */
|
||||
function beforeImageUpload(file: UploadFile) {
|
||||
return useBeforeUpload(UploadType.Image, 2)(file as any);
|
||||
}
|
||||
|
||||
/** 上传成功 */
|
||||
function onUploadSuccess(info: any) {
|
||||
const res = info.response || info;
|
||||
if (res.code !== 0) {
|
||||
message.error(`上传出错：${res.msg}`);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 清空上传时的各种数据
|
||||
fileList.value = [];
|
||||
uploadData.title = '';
|
||||
uploadData.introduction = '';
|
||||
|
||||
// 上传好的文件，本质是个素材，所以可以进行选中
|
||||
selectMaterial(res.data);
|
||||
}
|
||||
|
||||
/** 删除图片 */
|
||||
function onDelete() {
|
||||
reply.value.mediaId = null;
|
||||
reply.value.url = null;
|
||||
reply.value.name = null;
|
||||
}
|
||||
|
||||
/** 选择素材 */
|
||||
function selectMaterial(item: any) {
|
||||
showDialog.value = false;
|
||||
|
||||
// reply.value.type = 'image'
|
||||
reply.value.mediaId = item.mediaId;
|
||||
reply.value.url = item.url;
|
||||
reply.value.name = item.name;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- 情况一：已经选择好素材、或者上传好图片 -->
|
||||
<div
|
||||
class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
|
||||
v-if="reply.url"
|
||||
>
|
||||
<img class="w-full" :src="reply.url" />
|
||||
<p
|
||||
class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
|
||||
v-if="reply.name"
|
||||
>
|
||||
{{ reply.name }}
|
||||
</p>
|
||||
<Row class="pt-[10px] text-center" justify="center">
|
||||
<Button type="primary" danger shape="circle" @click="onDelete">
|
||||
<IconifyIcon icon="ep:delete" />
|
||||
</Button>
|
||||
</Row>
|
||||
</div>
|
||||
<!-- 情况二：未做完上述操作 -->
|
||||
<Row v-else class="text-center" align="middle">
|
||||
<!-- 选择素材 -->
|
||||
<Col
|
||||
:span="12"
|
||||
class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
|
||||
>
|
||||
<Button type="primary" @click="showDialog = true">
|
||||
素材库选择 <IconifyIcon icon="ep:circle-check" />
|
||||
</Button>
|
||||
<Modal
|
||||
title="选择图片"
|
||||
v-model:open="showDialog"
|
||||
width="90%"
|
||||
destroy-on-close
|
||||
>
|
||||
<MaterialSelect
|
||||
type="image"
|
||||
:account-id="reply.accountId"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</Modal>
|
||||
</Col>
|
||||
<!-- 文件上传 -->
|
||||
<Col
|
||||
:span="12"
|
||||
class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
|
||||
>
|
||||
<Upload
|
||||
:action="UPLOAD_URL"
|
||||
:headers="HEADERS"
|
||||
:file-list="fileList"
|
||||
:data="uploadData"
|
||||
:before-upload="beforeImageUpload"
|
||||
@success="
|
||||
(response: any) => {
|
||||
onUploadSuccess(response);
|
||||
}
|
||||
"
|
||||
>
|
||||
<Button type="primary">上传图片</Button>
|
||||
<template #tip>
|
||||
<span>
|
||||
<div class="text-center leading-[18px]">
|
||||
支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
</Upload>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,151 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { UploadFile } from 'ant-design-vue';
|
||||
|
||||
import type { Reply } from './types';
|
||||
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Row,
|
||||
Upload,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
|
||||
import { MaterialSelect } from '#/views/mp/components';
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Reply;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Reply): void;
|
||||
}>();
|
||||
|
||||
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
|
||||
const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
|
||||
const showDialog = ref(false);
|
||||
const fileList = ref([]);
|
||||
const uploadData = reactive({
|
||||
accountId: reply.value.accountId,
|
||||
type: 'thumb', // 音乐类型为thumb
|
||||
title: '',
|
||||
introduction: '',
|
||||
});
|
||||
|
||||
/** 图片上传前校验 */
|
||||
function beforeImageUpload(file: UploadFile) {
|
||||
return useBeforeUpload(UploadType.Image, 2)(file as any);
|
||||
}
|
||||
|
||||
/** 上传成功 */
|
||||
function onUploadSuccess(info: any) {
|
||||
const res = info.response || info;
|
||||
if (res.code !== 0) {
|
||||
message.error(`上传出错：${res.msg}`);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 清空上传时的各种数据
|
||||
fileList.value = [];
|
||||
uploadData.title = '';
|
||||
uploadData.introduction = '';
|
||||
|
||||
// 上传好的文件，本质是个素材，所以可以进行选中
|
||||
selectMaterial(res.data);
|
||||
}
|
||||
|
||||
/** 选择素材 */
|
||||
function selectMaterial(item: any) {
|
||||
showDialog.value = false;
|
||||
|
||||
reply.value.thumbMediaId = item.mediaId;
|
||||
reply.value.thumbMediaUrl = item.url;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Row align="middle" justify="center">
|
||||
<Col :span="6">
|
||||
<Row align="middle" justify="center" class="inline-block text-center">
|
||||
<Col :span="24">
|
||||
<Row align="middle" justify="center">
|
||||
<img
|
||||
class="w-[100px]"
|
||||
v-if="reply.thumbMediaUrl"
|
||||
:src="reply.thumbMediaUrl"
|
||||
/>
|
||||
<IconifyIcon v-else icon="ep:plus" />
|
||||
</Row>
|
||||
<Row align="middle" justify="center" class="mt-[2%]">
|
||||
<div>
|
||||
<Upload
|
||||
:action="UPLOAD_URL"
|
||||
:headers="HEADERS"
|
||||
:file-list="fileList"
|
||||
:data="uploadData"
|
||||
:before-upload="beforeImageUpload"
|
||||
@success="
|
||||
(response: any) => {
|
||||
onUploadSuccess(response);
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #default>
|
||||
<Button type="link">本地上传</Button>
|
||||
</template>
|
||||
</Upload>
|
||||
<Button type="link" @click="showDialog = true" class="ml-[5px]">
|
||||
素材库选择
|
||||
</Button>
|
||||
</div>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
<Modal
|
||||
title="选择图片"
|
||||
v-model:open="showDialog"
|
||||
width="80%"
|
||||
destroy-on-close
|
||||
>
|
||||
<MaterialSelect
|
||||
type="image"
|
||||
:account-id="reply.accountId"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</Modal>
|
||||
</Col>
|
||||
<Col :span="18">
|
||||
<Input v-model:value="reply.title as string" placeholder="请输入标题" />
|
||||
<div class="my-5"></div>
|
||||
<Input
|
||||
v-model:value="reply.description as string"
|
||||
placeholder="请输入描述"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<div class="my-5"></div>
|
||||
<Input
|
||||
v-model:value="reply.musicUrl as string"
|
||||
placeholder="请输入音乐链接"
|
||||
/>
|
||||
<div class="my-5"></div>
|
||||
<Input
|
||||
v-model:value="reply.hqMusicUrl as string"
|
||||
placeholder="请输入高质量音乐链接"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,196 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { UploadFile } from 'ant-design-vue';
|
||||
import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
|
||||
|
||||
import type { Reply } from './types';
|
||||
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Row,
|
||||
Upload,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
|
||||
import { MaterialSelect, VideoPlayer } from '#/views/mp/components';
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Reply;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Reply): void;
|
||||
}>();
|
||||
|
||||
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
|
||||
const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
|
||||
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val: Reply) => emit('update:modelValue', val),
|
||||
});
|
||||
|
||||
const showDialog = ref(false);
|
||||
const fileList = ref([]);
|
||||
const uploadData = reactive({
|
||||
accountId: reply.value.accountId,
|
||||
type: 'video',
|
||||
title: '',
|
||||
introduction: '',
|
||||
});
|
||||
|
||||
/** 视频上传前校验 */
|
||||
function beforeVideoUpload(file: UploadFile) {
|
||||
return useBeforeUpload(UploadType.Video, 10)(file as any);
|
||||
}
|
||||
|
||||
/** 自定义上传请求 */
|
||||
async function customRequest(info: UploadRequestOption) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', info.file as File);
|
||||
formData.append('accountId', String(uploadData.accountId));
|
||||
formData.append('type', uploadData.type);
|
||||
if (uploadData.title) {
|
||||
formData.append('title', uploadData.title);
|
||||
}
|
||||
if (uploadData.introduction) {
|
||||
formData.append('introduction', uploadData.introduction);
|
||||
}
|
||||
|
||||
try {
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
// 监听上传进度
|
||||
xhr.upload.addEventListener('progress', (e) => {
|
||||
if (e.lengthComputable) {
|
||||
const percent = Math.round((e.loaded / e.total) * 100);
|
||||
info.onProgress?.({ percent });
|
||||
}
|
||||
});
|
||||
|
||||
// 监听上传完成
|
||||
xhr.addEventListener('load', () => {
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
try {
|
||||
const res = JSON.parse(xhr.responseText);
|
||||
onUploadSuccess(res);
|
||||
info.onSuccess?.(res);
|
||||
} catch {
|
||||
info.onError?.(new Error('解析响应失败'));
|
||||
message.error('上传失败：解析响应失败');
|
||||
}
|
||||
} else {
|
||||
info.onError?.(new Error(`上传失败：HTTP ${xhr.status}`));
|
||||
message.error('上传失败，请重试');
|
||||
}
|
||||
});
|
||||
|
||||
// 监听上传错误
|
||||
xhr.addEventListener('error', () => {
|
||||
info.onError?.(new Error('上传请求失败'));
|
||||
message.error('上传失败，请重试');
|
||||
});
|
||||
|
||||
// 发送请求
|
||||
xhr.open('POST', UPLOAD_URL);
|
||||
xhr.setRequestHeader('Authorization', HEADERS.Authorization);
|
||||
xhr.send(formData);
|
||||
} catch (error: any) {
|
||||
info.onError?.(error);
|
||||
message.error('上传失败，请重试');
|
||||
}
|
||||
}
|
||||
|
||||
/** 上传成功 */
|
||||
function onUploadSuccess(res: any) {
|
||||
if (res.code !== 0) {
|
||||
message.error(`上传出错：${res.msg}`);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 清空上传时的各种数据
|
||||
fileList.value = [];
|
||||
uploadData.title = '';
|
||||
uploadData.introduction = '';
|
||||
selectMaterial(res.data);
|
||||
}
|
||||
|
||||
/** 选择素材后设置 */
|
||||
function selectMaterial(item: any) {
|
||||
showDialog.value = false;
|
||||
|
||||
reply.value.mediaId = item.mediaId;
|
||||
reply.value.url = item.url;
|
||||
reply.value.name = item.name;
|
||||
|
||||
// title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
|
||||
if (item.title) {
|
||||
reply.value.title = item.title || '';
|
||||
}
|
||||
if (item.introduction) {
|
||||
reply.value.description = item.introduction || '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Row>
|
||||
<Input
|
||||
v-model:value="reply.title as string"
|
||||
class="mb-[2%]"
|
||||
placeholder="请输入标题"
|
||||
/>
|
||||
<Input
|
||||
class="mb-[2%]"
|
||||
v-model:value="reply.description as string"
|
||||
placeholder="请输入描述"
|
||||
/>
|
||||
<Row class="w-full pt-[10px] text-center" justify="center">
|
||||
<VideoPlayer v-if="reply.url" :url="reply.url" />
|
||||
</Row>
|
||||
<Col class="w-full">
|
||||
<Row class="text-center" align="middle">
|
||||
<!-- 选择素材 -->
|
||||
<Col :span="12">
|
||||
<Button type="primary" @click="showDialog = true">
|
||||
素材库选择 <IconifyIcon icon="ep:circle-check" />
|
||||
</Button>
|
||||
<Modal
|
||||
title="选择视频"
|
||||
v-model:open="showDialog"
|
||||
width="90%"
|
||||
destroy-on-close
|
||||
>
|
||||
<MaterialSelect
|
||||
type="video"
|
||||
:account-id="reply.accountId"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</Modal>
|
||||
</Col>
|
||||
<!-- 文件上传 -->
|
||||
<Col :span="12">
|
||||
<Upload
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeVideoUpload"
|
||||
:custom-request="customRequest"
|
||||
>
|
||||
<Button type="primary">
|
||||
新建视频 <IconifyIcon icon="ep:upload" />
|
||||
</Button>
|
||||
</Upload>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,148 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { UploadFile } from 'ant-design-vue';
|
||||
|
||||
import type { Reply } from './types';
|
||||
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
|
||||
|
||||
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
|
||||
import { MaterialSelect, VoicePlayer } from '#/views/mp/components';
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Reply;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Reply): void;
|
||||
}>();
|
||||
|
||||
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
|
||||
const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val: Reply) => emit('update:modelValue', val),
|
||||
});
|
||||
|
||||
const showDialog = ref(false);
|
||||
const fileList = ref([]);
|
||||
const uploadData = reactive({
|
||||
accountId: reply.value.accountId,
|
||||
type: 'voice',
|
||||
title: '',
|
||||
introduction: '',
|
||||
});
|
||||
|
||||
/** 语音上传前校验 */
|
||||
function beforeVoiceUpload(file: UploadFile) {
|
||||
return useBeforeUpload(UploadType.Voice, 10)(file as any);
|
||||
}
|
||||
|
||||
/** 上传成功 */
|
||||
function onUploadSuccess(info: any) {
|
||||
const res = info.response || info;
|
||||
if (res.code !== 0) {
|
||||
message.error(`上传出错：${res.msg}`);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 清空上传时的各种数据
|
||||
fileList.value = [];
|
||||
uploadData.title = '';
|
||||
uploadData.introduction = '';
|
||||
|
||||
// 上传好的文件，本质是个素材，所以可以进行选中
|
||||
selectMaterial(res.data);
|
||||
}
|
||||
|
||||
/** 删除语音 */
|
||||
function onDelete() {
|
||||
reply.value.mediaId = null;
|
||||
reply.value.url = null;
|
||||
reply.value.name = null;
|
||||
}
|
||||
|
||||
/** 选择素材 */
|
||||
function selectMaterial(item: Reply) {
|
||||
showDialog.value = false;
|
||||
|
||||
// reply.value.type = ReplyType.Voice
|
||||
reply.value.mediaId = item.mediaId;
|
||||
reply.value.url = item.url;
|
||||
reply.value.name = item.name;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="mx-auto mb-[10px] border border-[#eaeaea] p-[10px]"
|
||||
v-if="reply.url"
|
||||
>
|
||||
<p
|
||||
class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
|
||||
>
|
||||
{{ reply.name }}
|
||||
</p>
|
||||
<Row class="w-full pt-[10px] text-center" justify="center">
|
||||
<VoicePlayer :url="reply.url" />
|
||||
</Row>
|
||||
<Row class="w-full pt-[10px] text-center" justify="center">
|
||||
<Button type="primary" danger shape="circle" @click="onDelete">
|
||||
<IconifyIcon icon="ep:delete" />
|
||||
</Button>
|
||||
</Row>
|
||||
</div>
|
||||
<Row v-else class="text-center">
|
||||
<!-- 选择素材 -->
|
||||
<Col
|
||||
:span="12"
|
||||
class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
|
||||
>
|
||||
<Button type="primary" @click="showDialog = true">
|
||||
素材库选择<IconifyIcon icon="ep:circle-check" />
|
||||
</Button>
|
||||
<Modal
|
||||
title="选择语音"
|
||||
v-model:open="showDialog"
|
||||
width="90%"
|
||||
destroy-on-close
|
||||
>
|
||||
<MaterialSelect
|
||||
type="voice"
|
||||
:account-id="reply.accountId"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</Modal>
|
||||
</Col>
|
||||
<!-- 文件上传 -->
|
||||
<Col
|
||||
:span="12"
|
||||
class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
|
||||
>
|
||||
<Upload
|
||||
:action="UPLOAD_URL"
|
||||
:headers="HEADERS"
|
||||
:file-list="fileList"
|
||||
:data="uploadData"
|
||||
:before-upload="beforeVoiceUpload"
|
||||
@success="
|
||||
(response: any) => {
|
||||
onUploadSuccess(response);
|
||||
}
|
||||
"
|
||||
>
|
||||
<Button type="primary">点击上传</Button>
|
||||
<template #tip>
|
||||
<div class="text-center leading-[18px]">
|
||||
格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
|
||||
</div>
|
||||
</template>
|
||||
</Upload>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,79 +0,0 @@
|
||||
<!--
|
||||
- Copyright (C) 2018-2019
|
||||
- All rights reserved, Designed By www.joolun.com
|
||||
【微信消息 - 视频】
|
||||
芋道源码：
|
||||
① bug 修复：
|
||||
1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
|
||||
存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
|
||||
2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
|
||||
② 体验优化：弹窗关闭后，自动暂停视频的播放
|
||||
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { VideoPlayer } from '@videojs-player/vue';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
|
||||
import 'video.js/dist/video-js.css';
|
||||
|
||||
defineOptions({ name: 'VideoPlayer' });
|
||||
|
||||
const props = defineProps({
|
||||
url: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
// DONE @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢
|
||||
const playVideo = () => {
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div @click="playVideo()">
|
||||
<!-- 提示 -->
|
||||
<div class="flex cursor-pointer flex-col items-center">
|
||||
<IconifyIcon icon="ep:video-play" class="size-5" />
|
||||
<p class="text-sm">点击播放视频</p>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗播放 -->
|
||||
<Modal
|
||||
v-model:open="dialogVisible"
|
||||
title="视频播放"
|
||||
width="45%"
|
||||
:footer="null"
|
||||
>
|
||||
<VideoPlayer
|
||||
class="video-player vjs-big-play-centered"
|
||||
:src="props.url"
|
||||
poster=""
|
||||
controls
|
||||
playsinline
|
||||
:volume="0.6"
|
||||
:width="800"
|
||||
:playback-rates="[0.7, 1.0, 1.5, 2.0]"
|
||||
/>
|
||||
<!-- 事件，暫時沒用
|
||||
@mounted="handleMounted"-->
|
||||
<!-- @ready="handleEvent($event)"-->
|
||||
<!-- @play="handleEvent($event)"-->
|
||||
<!-- @pause="handleEvent($event)"-->
|
||||
<!-- @ended="handleEvent($event)"-->
|
||||
<!-- @loadeddata="handleEvent($event)"-->
|
||||
<!-- @waiting="handleEvent($event)"-->
|
||||
<!-- @playing="handleEvent($event)"-->
|
||||
<!-- @canplay="handleEvent($event)"-->
|
||||
<!-- @canplaythrough="handleEvent($event)"-->
|
||||
<!-- @timeupdate="handleEvent(player?.currentTime())"-->
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,96 +0,0 @@
|
||||
<!--
|
||||
- Copyright (C) 2018-2019
|
||||
- All rights reserved, Designed By www.joolun.com
|
||||
【微信消息 - 语音】
|
||||
芋道源码：
|
||||
① bug 修复：
|
||||
1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
|
||||
存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
|
||||
2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
|
||||
② 代码优化：将 props 中的 reply 调成为 data 中对应的属性，并补充相关注释
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Tag } from 'ant-design-vue';
|
||||
// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
|
||||
import BenzAMRRecorder from 'benz-amr-recorder';
|
||||
|
||||
defineOptions({ name: 'VoicePlayer' });
|
||||
|
||||
const props = defineProps({
|
||||
url: {
|
||||
type: String, // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
|
||||
required: true,
|
||||
},
|
||||
content: {
|
||||
type: String, // 语音文本
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const amr = ref();
|
||||
const playing = ref(false);
|
||||
const duration = ref();
|
||||
|
||||
/** 处理点击，播放或暂停 */
|
||||
function playVoice() {
|
||||
// 情况一：未初始化，则创建 BenzAMRRecorder
|
||||
if (amr.value === undefined) {
|
||||
amrInit();
|
||||
return;
|
||||
}
|
||||
// 情况二：已经初始化，则根据情况播放或暂时
|
||||
if (amr.value.isPlaying()) {
|
||||
amrStop();
|
||||
} else {
|
||||
amrPlay();
|
||||
}
|
||||
}
|
||||
|
||||
/** 音频初始化 */
|
||||
function amrInit() {
|
||||
amr.value = new BenzAMRRecorder();
|
||||
// 设置播放
|
||||
amr.value.initWithUrl(props.url).then(() => {
|
||||
amrPlay();
|
||||
duration.value = amr.value.getDuration();
|
||||
});
|
||||
// 监听暂停
|
||||
amr.value.onEnded(() => {
|
||||
playing.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
/** 音频播放 */
|
||||
function amrPlay() {
|
||||
playing.value = true;
|
||||
amr.value.play();
|
||||
}
|
||||
|
||||
/** 音频暂停 */
|
||||
function amrStop() {
|
||||
playing.value = false;
|
||||
amr.value.stop();
|
||||
}
|
||||
// TODO 芋艿：下面样式有点问题
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- DONE @hw：tindwind 替代 -->
|
||||
<div
|
||||
class="flex h-[50px] w-[120px] cursor-pointer items-center justify-center rounded-[10px] bg-[#eaeaea] p-[5px]"
|
||||
@click="playVoice"
|
||||
>
|
||||
<IconifyIcon v-if="playing !== true" icon="lucide:circle-play" :size="32" />
|
||||
<IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
|
||||
<span v-if="duration" class="ml-[5px] text-[11px]">{{ duration }} 秒</span>
|
||||
<div v-if="content">
|
||||
<Tag color="success" size="small">语音识别</Tag>
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,69 @@
|
||||
<script lang="ts" setup>
|
||||
import type { SelectValue } from 'ant-design-vue/es/select';
|
||||
|
||||
import type { MpAccountApi } from '#/api/mp/account';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { message, Select } from 'ant-design-vue';
|
||||
|
||||
import { getSimpleAccountList } from '#/api/mp/account';
|
||||
|
||||
defineOptions({ name: 'WxAccountSelect' });
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'change', id: number, name: string): void;
|
||||
}>();
|
||||
|
||||
const { push } = useRouter();
|
||||
|
||||
const account = ref<MpAccountApi.Account>({
|
||||
id: -1,
|
||||
name: '',
|
||||
}); // 当前选中的公众号
|
||||
const accountList = ref<MpAccountApi.Account[]>([]); // 公众号列表
|
||||
|
||||
/** 查询公众号列表 */
|
||||
async function handleQuery() {
|
||||
accountList.value = await getSimpleAccountList();
|
||||
if (accountList.value.length === 0) {
|
||||
message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
|
||||
await push({ name: 'MpAccount' });
|
||||
return;
|
||||
}
|
||||
|
||||
// 默认选中第一个，如无数据则不执行
|
||||
const first = accountList.value[0];
|
||||
if (first) {
|
||||
account.value.id = first.id;
|
||||
account.value.name = first.name;
|
||||
emit('change', account.value.id, account.value.name);
|
||||
}
|
||||
}
|
||||
|
||||
/** 切换选中公众号 */
|
||||
function onChanged(id: SelectValue) {
|
||||
const found = accountList.value.find((v) => v.id === id);
|
||||
if (found) {
|
||||
account.value.name = found.name;
|
||||
emit('change', account.value.id, account.value.name);
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(handleQuery);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Select
|
||||
v-model:value="account.id"
|
||||
placeholder="请选择公众号"
|
||||
class="!w-[240px]"
|
||||
@change="onChanged"
|
||||
>
|
||||
<Select.Option v-for="item in accountList" :key="item.id" :value="item.id">
|
||||
{{ item.name }}
|
||||
</Select.Option>
|
||||
</Select>
|
||||
</template>
|
||||
@@ -0,0 +1 @@
|
||||
export { default as WxAccountSelect } from './account-select.vue';
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './types';
|
||||
export { default as WxLocation } from './wx-location.vue';
|
||||
@@ -0,0 +1,6 @@
|
||||
export interface WxLocationProps {
|
||||
label: string;
|
||||
locationX: number;
|
||||
locationY: number;
|
||||
qqMapKey?: string;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
<script lang="ts" setup>
|
||||
import type { WxLocationProps } from './types';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Col, Row } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'WxLocation' });
|
||||
|
||||
// TODO @dylan：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
|
||||
const props = withDefaults(defineProps<WxLocationProps>(), {
|
||||
qqMapKey: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
|
||||
});
|
||||
|
||||
const mapUrl = computed(() => {
|
||||
return `https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${props.locationY}&pointy=${props.locationX}&name=${props.label}&ref=yudao`;
|
||||
});
|
||||
|
||||
const mapImageUrl = computed(() => {
|
||||
return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${props.qqMapKey}&size=250*180`;
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
locationX: props.locationX,
|
||||
locationY: props.locationY,
|
||||
label: props.label,
|
||||
qqMapKey: props.qqMapKey,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 微信消息 - 定位 -->
|
||||
<div>
|
||||
<a :href="mapUrl" target="_blank" class="text-primary">
|
||||
<Col>
|
||||
<Row>
|
||||
<img :src="mapImageUrl" alt="地图位置" />
|
||||
</Row>
|
||||
<Row class="mt-2">
|
||||
<IconifyIcon icon="lucide:map-pin" class="mr-1" />
|
||||
{{ label }}
|
||||
</Row>
|
||||
</Col>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1 @@
|
||||
export { default as WxMaterialSelect } from './wx-material-select.vue';
|
||||
@@ -0,0 +1,446 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Button, Pagination, Row, Spin } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getDraftPage } from '#/api/mp/draft';
|
||||
import { getFreePublishPage } from '#/api/mp/freePublish';
|
||||
import { getMaterialPage } from '#/api/mp/material';
|
||||
import { WxNews, WxVideoPlayer, WxVoicePlayer } from '#/views/mp/components';
|
||||
|
||||
import { NewsType } from '../constants';
|
||||
|
||||
defineOptions({ name: 'WxMaterialSelect' });
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
accountId: number;
|
||||
newsType?: NewsType;
|
||||
type: string;
|
||||
}>(),
|
||||
{
|
||||
newsType: NewsType.Published,
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'selectMaterial', item: any): void;
|
||||
}>();
|
||||
|
||||
const loading = ref(false); // 遮罩层
|
||||
const total = ref(0); // 总条数
|
||||
const list = ref<any[]>([]); // 数据列表
|
||||
const queryParams = reactive({
|
||||
accountId: props.accountId,
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
}); // 查询参数
|
||||
|
||||
const voiceGridColumns: VxeTableGridOptions<any>['columns'] = [
|
||||
// TODO @dylan：any 有 linter 告警；看看别的模块哈
|
||||
{
|
||||
field: 'mediaId',
|
||||
title: '编号',
|
||||
align: 'center',
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '文件名',
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'voice',
|
||||
title: '语音',
|
||||
minWidth: 200,
|
||||
align: 'center',
|
||||
slots: { default: 'voice' },
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '上传时间',
|
||||
width: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 140,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
|
||||
const videoGridColumns: VxeTableGridOptions<any>['columns'] = [
|
||||
// TODO @dylan：any 有 linter 告警；看看别的模块哈
|
||||
{
|
||||
field: 'mediaId',
|
||||
title: '编号',
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '文件名',
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'title',
|
||||
title: '标题',
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'introduction',
|
||||
title: '介绍',
|
||||
minWidth: 220,
|
||||
},
|
||||
{
|
||||
field: 'video',
|
||||
title: '视频',
|
||||
minWidth: 220,
|
||||
align: 'center',
|
||||
slots: { default: 'video' },
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '上传时间',
|
||||
width: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 140,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
|
||||
const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
border: true,
|
||||
columns: voiceGridColumns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
enabled: true,
|
||||
pageSize: 10,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, { accountId }) => {
|
||||
const finalAccountId = accountId ?? queryParams.accountId;
|
||||
// TODO @dylan 这里简化成 !finalAccountId 是不是可以哈。
|
||||
if (finalAccountId === undefined || finalAccountId === null) {
|
||||
return { list: [], total: 0 };
|
||||
}
|
||||
// TODO @dylan：不要带 MpMaterialApi；
|
||||
return await getMaterialPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
accountId: finalAccountId,
|
||||
type: 'voice',
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'mediaId',
|
||||
isHover: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
},
|
||||
} as VxeTableGridOptions<any>, // TODO @dylan：这里有 linter 告警；看看别的模块哈
|
||||
});
|
||||
|
||||
const [VideoGrid, videoGridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
border: true,
|
||||
columns: videoGridColumns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
enabled: true,
|
||||
pageSize: 10,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, { accountId }) => {
|
||||
const finalAccountId = accountId ?? queryParams.accountId;
|
||||
if (finalAccountId === undefined || finalAccountId === null) {
|
||||
return { list: [], total: 0 };
|
||||
}
|
||||
return await getMaterialPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
accountId: finalAccountId,
|
||||
type: 'video',
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'mediaId',
|
||||
isHover: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
},
|
||||
} as VxeTableGridOptions<any>,
|
||||
});
|
||||
|
||||
function selectMaterialFun(item: any) {
|
||||
emit('selectMaterial', item);
|
||||
}
|
||||
|
||||
async function getMaterialPageFun() {
|
||||
const data = await getMaterialPage({
|
||||
...queryParams,
|
||||
type: props.type,
|
||||
});
|
||||
list.value = data.list;
|
||||
total.value = data.total;
|
||||
}
|
||||
|
||||
async function getFreePublishPageFun() {
|
||||
const data = await getFreePublishPage(queryParams);
|
||||
data.list.forEach((item: any) => {
|
||||
const articles = item.content.newsItem;
|
||||
articles.forEach((article: any) => {
|
||||
article.picUrl = article.thumbUrl;
|
||||
});
|
||||
});
|
||||
list.value = data.list;
|
||||
total.value = data.total;
|
||||
}
|
||||
|
||||
async function getDraftPageFun() {
|
||||
const data = await getDraftPage(queryParams);
|
||||
data.list.forEach((draft: any) => {
|
||||
const articles = draft.content.newsItem;
|
||||
articles.forEach((article: any) => {
|
||||
article.picUrl = article.thumbUrl;
|
||||
});
|
||||
});
|
||||
list.value = data.list;
|
||||
total.value = data.total;
|
||||
}
|
||||
|
||||
async function getPage() {
|
||||
if (props.type === 'voice') {
|
||||
await voiceGridApi.reload({ accountId: queryParams.accountId });
|
||||
return;
|
||||
}
|
||||
if (props.type === 'video') {
|
||||
await videoGridApi.reload({ accountId: queryParams.accountId });
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
if (props.type === 'news' && props.newsType === NewsType.Published) {
|
||||
await getFreePublishPageFun();
|
||||
} else if (props.type === 'news' && props.newsType === NewsType.Draft) {
|
||||
await getDraftPageFun();
|
||||
} else {
|
||||
await getMaterialPageFun();
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.accountId,
|
||||
(accountId) => {
|
||||
queryParams.accountId = accountId;
|
||||
queryParams.pageNo = 1;
|
||||
getPage();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.type,
|
||||
() => {
|
||||
queryParams.pageNo = 1;
|
||||
getPage();
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.newsType,
|
||||
() => {
|
||||
if (props.type === 'news') {
|
||||
queryParams.pageNo = 1;
|
||||
getPage();
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page :bordered="false" class="pb-8">
|
||||
<!-- 类型：image -->
|
||||
<!-- TODO @dylan：看看图片的小卡片，是不是可以整齐点，类似微信公众号，图片的高度是一致的哈；https://mp.weixin.qq.com/cgi-bin/filepage?type=2&begin=0&count=12&token=1646383362&lang=zh_CN -->
|
||||
<template v-if="props.type === 'image'">
|
||||
<Spin :spinning="loading">
|
||||
<div class="waterfall">
|
||||
<div v-for="item in list" :key="item.mediaId" class="waterfall-item">
|
||||
<img class="material-img" :src="item.url" alt="素材图片" />
|
||||
<p class="item-name">{{ item.name }}</p>
|
||||
<Row class="ope-row">
|
||||
<Button type="primary" @click="selectMaterialFun(item)">
|
||||
选择
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:circle-check" />
|
||||
</template>
|
||||
</Button>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
<Pagination
|
||||
v-model:current="queryParams.pageNo"
|
||||
v-model:page-size="queryParams.pageSize"
|
||||
:total="total"
|
||||
class="mt-4"
|
||||
@change="getPage"
|
||||
@show-size-change="getPage"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 类型：voice -->
|
||||
<template v-else-if="props.type === 'voice'">
|
||||
<VoiceGrid>
|
||||
<template #voice="{ row }">
|
||||
<WxVoicePlayer :url="row.url" />
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<Button type="link" @click="selectMaterialFun(row)">
|
||||
选择
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:plus" />
|
||||
</template>
|
||||
</Button>
|
||||
</template>
|
||||
</VoiceGrid>
|
||||
</template>
|
||||
|
||||
<!-- 类型：video -->
|
||||
<template v-else-if="props.type === 'video'">
|
||||
<VideoGrid>
|
||||
<template #video="{ row }">
|
||||
<WxVideoPlayer :url="row.url" />
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<Button type="link" @click="selectMaterialFun(row)">
|
||||
选择
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:circle-plus" />
|
||||
</template>
|
||||
</Button>
|
||||
</template>
|
||||
</VideoGrid>
|
||||
</template>
|
||||
|
||||
<!-- 类型：news -->
|
||||
<template v-else-if="props.type === 'news'">
|
||||
<Spin :spinning="loading">
|
||||
<div class="waterfall">
|
||||
<div v-for="item in list" :key="item.mediaId" class="waterfall-item">
|
||||
<div v-if="item.content && item.content.newsItem">
|
||||
<WxNews :articles="item.content.newsItem" />
|
||||
<Row class="ope-row">
|
||||
<Button type="primary" @click="selectMaterialFun(item)">
|
||||
选择
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:circle-check" />
|
||||
</template>
|
||||
</Button>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
<Pagination
|
||||
v-model:current="queryParams.pageNo"
|
||||
v-model:page-size="queryParams.pageSize"
|
||||
:total="total"
|
||||
class="mt-4"
|
||||
@change="getPage"
|
||||
@show-size-change="getPage"
|
||||
/>
|
||||
</template>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.waterfall {
|
||||
column-count: 5;
|
||||
column-gap: 10px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.waterfall-item {
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #eaeaea;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.material-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.ope-row {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
116
apps/web-antd/src/views/mp/components/wx-msg/card.scss
Normal file
116
apps/web-antd/src/views/mp/components/wx-msg/card.scss
Normal file
@@ -0,0 +1,116 @@
|
||||
.mp-card {
|
||||
&__item {
|
||||
box-sizing: border-box;
|
||||
height: 200px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
font-feature-settings: 'tnum';
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e8e8e8;
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(0 0 0 / 9%);
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 9%);
|
||||
}
|
||||
|
||||
&--add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
background-color: #fff;
|
||||
border: 1px dashed #000;
|
||||
border-color: #d9d9d9;
|
||||
border-radius: 2px;
|
||||
|
||||
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;
|
||||
margin-right: 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 48px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
color: rgb(0 0 0 / 85%);
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: -webkit-box;
|
||||
height: 64px;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 3;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
text-align: center;
|
||||
background: #f7f9fa;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** joolun 额外加的 */
|
||||
.mp-comment__main {
|
||||
flex: unset !important;
|
||||
margin: 0 8px !important;
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
|
||||
.mp-comment__header {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.mp-comment__body {
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
109
apps/web-antd/src/views/mp/components/wx-msg/comment.scss
Normal file
109
apps/web-antd/src/views/mp/components/wx-msg/comment.scss
Normal file
@@ -0,0 +1,109 @@
|
||||
/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */
|
||||
.mp-comment {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&--reverse {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.mp-comment__main {
|
||||
&::before,
|
||||
&::after {
|
||||
right: -8px;
|
||||
left: auto;
|
||||
border-width: 8px 0 8px 8px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-left-color: #dedede;
|
||||
}
|
||||
|
||||
&::after {
|
||||
margin-right: 1px;
|
||||
margin-left: auto;
|
||||
border-left-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
box-sizing: border-box;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
vertical-align: middle;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px 15px;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
&__author {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&__main {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
margin: 0 20px;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 2px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 100%;
|
||||
left: -8px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: ' ';
|
||||
border-color: transparent;
|
||||
border-style: solid solid outset;
|
||||
border-width: 8px 8px 8px 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
z-index: 1;
|
||||
border-right-color: #dedede;
|
||||
}
|
||||
|
||||
&::after {
|
||||
z-index: 2;
|
||||
margin-left: 1px;
|
||||
border-right-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
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;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 1px 0 1px 15px;
|
||||
margin: 0;
|
||||
font-family:
|
||||
Georgia, 'Times New Roman', Times, Kai, 'Kaiti SC', KaiTi, BiauKai,
|
||||
FontAwesome, serif;
|
||||
border-left: 4px solid #ddd;
|
||||
}
|
||||
}
|
||||
3
apps/web-antd/src/views/mp/components/wx-msg/index.ts
Normal file
3
apps/web-antd/src/views/mp/components/wx-msg/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './types';
|
||||
|
||||
export { default as WxMsg } from './wx-msg.vue';
|
||||
@@ -1,13 +1,11 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { Tag } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
defineOptions({ name: 'MsgEvent' });
|
||||
|
||||
defineProps<{
|
||||
item: any;
|
||||
}>();
|
||||
|
||||
const item = ref(props.item);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -18,7 +16,6 @@ const item = ref(props.item);
|
||||
<div v-else-if="item.event === 'unsubscribe'">
|
||||
<Tag color="error">取消关注</Tag>
|
||||
</div>
|
||||
<!-- @hw：看看能不能处理下 linter 报错哈； -->
|
||||
<div v-else-if="item.event === 'CLICK'">
|
||||
<Tag>点击菜单</Tag>
|
||||
【{{ item.eventKey }}】
|
||||
@@ -47,9 +44,6 @@ const item = ref(props.item);
|
||||
<div v-else-if="item.event === 'location_select'">
|
||||
<Tag>选择地理位置</Tag>
|
||||
</div>
|
||||
<div v-else-if="item.event === 'SCAN'">
|
||||
<Tag>扫码</Tag>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Tag color="error">未知事件类型</Tag>
|
||||
</div>
|
||||
75
apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
Normal file
75
apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<script lang="ts" setup>
|
||||
import type { User } from './types';
|
||||
|
||||
import { preferences } from '@vben/preferences';
|
||||
import { formatDateTime } from '@vben/utils';
|
||||
|
||||
import Msg from './msg.vue';
|
||||
|
||||
defineOptions({ name: 'MsgList' });
|
||||
|
||||
const props = defineProps<{
|
||||
accountId: number;
|
||||
list: any[];
|
||||
user: User;
|
||||
}>();
|
||||
|
||||
const SendFrom = {
|
||||
MpBot: 2,
|
||||
User: 1,
|
||||
} as const;
|
||||
|
||||
function getAvatar(sendFrom: number) {
|
||||
return sendFrom === SendFrom.User
|
||||
? props.user.avatar
|
||||
: preferences.app.defaultAvatar;
|
||||
}
|
||||
|
||||
function getNickname(sendFrom: number) {
|
||||
return sendFrom === SendFrom.User ? props.user.nickname : '公众号';
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="execution" v-for="item in props.list" :key="item.id">
|
||||
<div
|
||||
class="mp-comment"
|
||||
:class="{ 'mp-comment--reverse': item.sendFrom === SendFrom.MpBot }"
|
||||
>
|
||||
<div class="avatar-div">
|
||||
<img :src="getAvatar(item.sendFrom)" class="mp-comment__avatar" />
|
||||
<div class="mp-comment__author">
|
||||
{{ getNickname(item.sendFrom) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mp-comment__main">
|
||||
<div class="mp-comment__header">
|
||||
<div class="mp-comment__create_time">
|
||||
{{ formatDateTime(item.createTime) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mp-comment__body"
|
||||
:style="
|
||||
item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''
|
||||
"
|
||||
>
|
||||
<Msg :item="item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
|
||||
|
||||
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
|
||||
|
||||
@import url('./comment.scss');
|
||||
@import url('./card.scss');
|
||||
|
||||
.avatar-div {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,26 +1,22 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import {
|
||||
Location,
|
||||
Music,
|
||||
News,
|
||||
VideoPlayer,
|
||||
VoicePlayer,
|
||||
WxLocation,
|
||||
WxMusic,
|
||||
WxNews,
|
||||
WxVideoPlayer,
|
||||
WxVoicePlayer,
|
||||
} from '#/views/mp/components';
|
||||
|
||||
import { MsgType } from '../constants';
|
||||
import MsgEvent from './msg-event.vue';
|
||||
import { MsgType } from './types';
|
||||
|
||||
defineOptions({ name: 'Msg' });
|
||||
|
||||
const props = defineProps<{
|
||||
defineProps<{
|
||||
item: any;
|
||||
}>();
|
||||
|
||||
const item = ref<any>(props.item);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -30,12 +26,12 @@ const item = ref<any>(props.item);
|
||||
<div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
|
||||
|
||||
<div v-else-if="item.type === MsgType.Voice">
|
||||
<VoicePlayer :url="item.mediaUrl" :content="item.recognition" />
|
||||
<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" class="w-[100px]" />
|
||||
<a :href="item.mediaUrl" target="_blank">
|
||||
<img :src="item.mediaUrl" class="w-[100px]" alt="图片消息" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -43,27 +39,21 @@ const item = ref<any>(props.item);
|
||||
v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
|
||||
class="text-center"
|
||||
>
|
||||
<VideoPlayer :url="item.mediaUrl" />
|
||||
<WxVideoPlayer :url="item.mediaUrl" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="item.type === MsgType.Link" class="flex-1">
|
||||
<a target="_blank" :href="item.url">
|
||||
<div
|
||||
class="mb-3 text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]"
|
||||
>
|
||||
<IconifyIcon icon="lucide:link" />{{ item.title }}
|
||||
<div v-else-if="item.type === MsgType.Link" class="flex flex-col gap-2">
|
||||
<a :href="item.url" target="_blank" class="text-success no-underline">
|
||||
<div class="flex items-center text-sm font-medium text-[#52c41a]">
|
||||
<IconifyIcon icon="lucide:link" class="mr-1" />
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="h-auto overflow-hidden text-[rgba(0,0,0,0.45)]"
|
||||
style="height: unset"
|
||||
>
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<div class="text-xs text-[#666]">{{ item.description }}</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="item.type === MsgType.Location">
|
||||
<Location
|
||||
<WxLocation
|
||||
:label="item.label"
|
||||
:location-y="item.locationY"
|
||||
:location-x="item.locationX"
|
||||
@@ -71,11 +61,11 @@ const item = ref<any>(props.item);
|
||||
</div>
|
||||
|
||||
<div v-else-if="item.type === MsgType.News" class="w-[300px]">
|
||||
<News :articles="item.articles" />
|
||||
<WxNews :articles="item.articles" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="item.type === MsgType.Music">
|
||||
<Music
|
||||
<WxMusic
|
||||
:title="item.title"
|
||||
:description="item.description"
|
||||
:thumb-media-url="item.thumbMediaUrl"
|
||||
@@ -85,5 +75,3 @@ const item = ref<any>(props.item);
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
5
apps/web-antd/src/views/mp/components/wx-msg/types.ts
Normal file
5
apps/web-antd/src/views/mp/components/wx-msg/types.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export interface User {
|
||||
accountId: number;
|
||||
avatar: string;
|
||||
nickname: string;
|
||||
}
|
||||
178
apps/web-antd/src/views/mp/components/wx-msg/wx-msg.vue
Normal file
178
apps/web-antd/src/views/mp/components/wx-msg/wx-msg.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<script lang="ts" setup>
|
||||
import type { User } from './types';
|
||||
|
||||
import { nextTick, onMounted, reactive, ref, unref } from 'vue';
|
||||
|
||||
import { preferences } from '@vben/preferences';
|
||||
|
||||
import { Button, message, Spin } from 'ant-design-vue';
|
||||
|
||||
import { getMessagePage, sendMessage } from '#/api/mp/message';
|
||||
import { getUser } from '#/api/mp/user';
|
||||
import { WxReply } from '#/views/mp/components';
|
||||
|
||||
import MsgList from './msg-list.vue';
|
||||
|
||||
defineOptions({ name: 'WxMsg' });
|
||||
|
||||
const props = defineProps<{
|
||||
userId: number;
|
||||
}>();
|
||||
|
||||
const accountId = ref(-1); // 公众号ID，需要通过userId初始化
|
||||
const loading = ref(false); // 消息列表是否正在加载中
|
||||
const hasMore = ref(true); // 是否可以加载更多
|
||||
const list = ref<any[]>([]); // 消息列表
|
||||
const queryParams = reactive({
|
||||
accountId,
|
||||
pageNo: 1, // 当前页数
|
||||
pageSize: 14, // 每页显示多少条
|
||||
});
|
||||
|
||||
const user: User = reactive({
|
||||
accountId, // 公众号账号编号
|
||||
avatar: preferences.app.defaultAvatar,
|
||||
nickname: '用户', // 由于微信不再提供昵称，直接使用"用户"展示
|
||||
});
|
||||
|
||||
// ========= 消息发送 =========
|
||||
const sendLoading = ref(false); // 发送消息是否加载中
|
||||
const reply = ref<any>({
|
||||
accountId: -1,
|
||||
articles: [],
|
||||
type: 'text',
|
||||
}); // 微信发送消息
|
||||
|
||||
const replySelectRef = ref<InstanceType<typeof WxReply> | null>(null); // WxReply组件ref，用于消息发送成功后清除内容
|
||||
const msgDivRef = ref<HTMLDivElement | null>(null); // 消息显示窗口ref，用于滚动到底部
|
||||
|
||||
/** 完成加载 */
|
||||
onMounted(async () => {
|
||||
const data = await getUser(props.userId);
|
||||
user.nickname = data.nickname?.length > 0 ? data.nickname : user.nickname;
|
||||
user.avatar = data.avatar?.length > 0 ? data.avatar : user.avatar;
|
||||
accountId.value = data.accountId;
|
||||
reply.value.accountId = data.accountId;
|
||||
|
||||
refreshChange();
|
||||
});
|
||||
|
||||
/** 执行发送 */
|
||||
async function sendMsg() {
|
||||
if (!unref(reply)) {
|
||||
return;
|
||||
}
|
||||
// 公众号限制：客服消息，公众号只允许发送一条
|
||||
if (
|
||||
reply.value.type === 'news' &&
|
||||
reply.value.articles &&
|
||||
reply.value.articles.length > 1
|
||||
) {
|
||||
reply.value.articles = [reply.value.articles[0]];
|
||||
message.success('图文消息条数限制在 1 条以内，已默认发送第一条');
|
||||
}
|
||||
|
||||
const data = await sendMessage({
|
||||
...reply.value,
|
||||
userId: props.userId,
|
||||
} as any);
|
||||
sendLoading.value = false;
|
||||
|
||||
list.value = [...list.value, data];
|
||||
await scrollToBottom();
|
||||
|
||||
// 发送后清空数据
|
||||
replySelectRef.value?.clear();
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
queryParams.pageNo++;
|
||||
getPage(queryParams, null);
|
||||
}
|
||||
|
||||
async function getPage(page: any, params: any = null) {
|
||||
loading.value = true;
|
||||
const dataTemp = await getMessagePage(
|
||||
Object.assign(
|
||||
{
|
||||
accountId: page.accountId,
|
||||
pageNo: page.pageNo,
|
||||
pageSize: page.pageSize,
|
||||
userId: props.userId,
|
||||
},
|
||||
params,
|
||||
),
|
||||
);
|
||||
|
||||
const scrollHeight = msgDivRef.value?.scrollHeight ?? 0;
|
||||
// 处理数据
|
||||
const data = dataTemp.list.reverse();
|
||||
list.value = [...data, ...list.value];
|
||||
loading.value = false;
|
||||
if (data.length < queryParams.pageSize || data.length === 0) {
|
||||
hasMore.value = false;
|
||||
}
|
||||
queryParams.pageNo = page.pageNo;
|
||||
queryParams.pageSize = page.pageSize;
|
||||
// 滚动到原来的位置
|
||||
if (queryParams.pageNo === 1) {
|
||||
// 定位到消息底部
|
||||
await scrollToBottom();
|
||||
} else if (data.length > 0) {
|
||||
// 定位滚动条
|
||||
await nextTick();
|
||||
if (scrollHeight !== 0 && msgDivRef.value) {
|
||||
msgDivRef.value.scrollTop =
|
||||
msgDivRef.value.scrollHeight - scrollHeight - 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function refreshChange() {
|
||||
getPage(queryParams);
|
||||
}
|
||||
|
||||
/** 定位到消息底部 */
|
||||
async function scrollToBottom() {
|
||||
await nextTick();
|
||||
if (msgDivRef.value) {
|
||||
msgDivRef.value.scrollTop = msgDivRef.value.scrollHeight;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full flex-col">
|
||||
<div ref="msgDivRef" class="mx-2.5 flex-1 overflow-auto bg-[#eaeaea]">
|
||||
<!-- 加载更多 -->
|
||||
<Spin :spinning="loading" />
|
||||
<div v-if="!loading">
|
||||
<div
|
||||
v-if="hasMore"
|
||||
class="cursor-pointer rounded p-3 text-center text-sm text-[#409eff] transition-colors duration-300 hover:bg-[#f5f7fa]"
|
||||
@click="loadMore"
|
||||
>
|
||||
<span>点击加载更多</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="cursor-not-allowed rounded p-3 text-center text-sm text-[#909399] hover:bg-transparent"
|
||||
>
|
||||
<span>没有更多了</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<MsgList :list="list" :account-id="accountId" :user="user" />
|
||||
</div>
|
||||
|
||||
<div class="p-2.5">
|
||||
<Spin :spinning="sendLoading">
|
||||
<WxReplySelect ref="replySelectRef" v-model="reply" />
|
||||
<Button type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
|
||||
发送(S)
|
||||
</Button>
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
1
apps/web-antd/src/views/mp/components/wx-music/index.ts
Normal file
1
apps/web-antd/src/views/mp/components/wx-music/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as WxMusic } from './wx-music.vue';
|
||||
7
apps/web-antd/src/views/mp/components/wx-music/types.ts
Normal file
7
apps/web-antd/src/views/mp/components/wx-music/types.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export interface WxMusicProps {
|
||||
title?: string;
|
||||
description?: string;
|
||||
musicUrl?: string;
|
||||
hqMusicUrl?: string;
|
||||
thumbMediaUrl: string;
|
||||
}
|
||||
87
apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
Normal file
87
apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<script lang="ts" setup>
|
||||
import type { WxMusicProps } from './types';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
defineOptions({ name: 'WxMusic' });
|
||||
|
||||
const props = withDefaults(defineProps<WxMusicProps>(), {
|
||||
title: '',
|
||||
description: '',
|
||||
musicUrl: '',
|
||||
hqMusicUrl: '',
|
||||
thumbMediaUrl: '',
|
||||
});
|
||||
|
||||
const href = computed(() => props.hqMusicUrl || props.musicUrl);
|
||||
|
||||
defineExpose({
|
||||
musicUrl: props.musicUrl,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 微信消息 - 音乐 -->
|
||||
<div>
|
||||
<a :href="href" target="_blank" class="text-success no-underline">
|
||||
<div class="music-card">
|
||||
<div class="music-avatar">
|
||||
<img :src="thumbMediaUrl" alt="音乐封面" />
|
||||
</div>
|
||||
<div class="music-detail">
|
||||
<div class="music-title">{{ title }}</div>
|
||||
<div class="music-description">{{ description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
|
||||
|
||||
.music-card {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.music-avatar {
|
||||
flex-shrink: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.music-detail {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.music-title {
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.music-description {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
1
apps/web-antd/src/views/mp/components/wx-news/index.ts
Normal file
1
apps/web-antd/src/views/mp/components/wx-news/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as WxNews } from './wx-news.vue';
|
||||
117
apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
Normal file
117
apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<script lang="ts" setup>
|
||||
import { Image } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'WxNews' });
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
articles?: any[] | null;
|
||||
}>(),
|
||||
{
|
||||
articles: null,
|
||||
},
|
||||
);
|
||||
|
||||
defineExpose({
|
||||
articles: props.articles,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 微信消息 - 图文 -->
|
||||
<div class="news-home">
|
||||
<div v-for="(article, index) in articles" :key="index" class="news-div">
|
||||
<!-- 头条 -->
|
||||
<a v-if="index === 0" :href="article.url" target="_blank">
|
||||
<div class="news-main">
|
||||
<div class="news-content">
|
||||
<Image
|
||||
:src="article.picUrl"
|
||||
:preview="false"
|
||||
class="material-img"
|
||||
/>
|
||||
<div class="news-content-title">
|
||||
<span>{{ article.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- 二条/三条等等 -->
|
||||
<a v-else :href="article.url" target="_blank">
|
||||
<div class="news-main-item">
|
||||
<div class="news-content-item">
|
||||
<div class="news-content-item-title">{{ article.title }}</div>
|
||||
<div class="news-content-item-img">
|
||||
<img :src="article.picUrl" class="material-img" alt="文章图片" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
|
||||
|
||||
.news-home {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.news-main {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #acadae;
|
||||
}
|
||||
|
||||
.news-content-title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-sizing: unset !important;
|
||||
display: inline-block;
|
||||
width: 98%;
|
||||
padding: 1%;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
white-space: normal;
|
||||
background-color: black;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.news-main-item {
|
||||
padding: 5px 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.news-content-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news-content-item-title {
|
||||
display: inline-block;
|
||||
width: 70%;
|
||||
margin-left: 1%;
|
||||
font-size: 10px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.news-content-item-img {
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
margin-right: 1%;
|
||||
background-color: #acadae;
|
||||
}
|
||||
|
||||
.material-img {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
3
apps/web-antd/src/views/mp/components/wx-reply/index.ts
Normal file
3
apps/web-antd/src/views/mp/components/wx-reply/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './types';
|
||||
|
||||
export { default as WxReply } from './wx-reply.vue';
|
||||
220
apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue
Normal file
220
apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Reply } from './types';
|
||||
|
||||
import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
|
||||
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
|
||||
|
||||
import { WxMaterialSelect } from '#/views/mp/components';
|
||||
import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
|
||||
|
||||
defineOptions({ name: 'TabImage' });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Reply;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Reply): void;
|
||||
}>();
|
||||
|
||||
const accessStore = useAccessStore();
|
||||
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
|
||||
const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
|
||||
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
|
||||
const showDialog = ref(false);
|
||||
const fileList = ref([]);
|
||||
const uploadData = reactive({
|
||||
accountId: reply.value.accountId,
|
||||
introduction: '',
|
||||
title: '',
|
||||
type: 'image',
|
||||
});
|
||||
|
||||
function beforeImageUpload(rawFile: UploadRawFile) {
|
||||
return useBeforeUpload(UploadType.Image, 2)(rawFile);
|
||||
}
|
||||
|
||||
/** 自定义上传请求 */
|
||||
async function customRequest(options: any) {
|
||||
const { file, onSuccess, onError } = options;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('accountId', String(uploadData.accountId));
|
||||
formData.append('type', uploadData.type);
|
||||
formData.append('title', uploadData.title);
|
||||
formData.append('introduction', uploadData.introduction);
|
||||
|
||||
try {
|
||||
const response = await fetch(UPLOAD_URL, {
|
||||
method: 'POST',
|
||||
headers: HEADERS,
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 0) {
|
||||
// 清空上传时的各种数据
|
||||
fileList.value = [];
|
||||
uploadData.title = '';
|
||||
uploadData.introduction = '';
|
||||
|
||||
// 上传好的文件，本质是个素材，所以可以进行选中
|
||||
selectMaterial(result.data);
|
||||
message.success('上传成功');
|
||||
onSuccess(result, file);
|
||||
} else {
|
||||
message.error(result.msg || '上传出错');
|
||||
onError(new Error(result.msg || '上传失败'));
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('上传失败，请重试');
|
||||
onError(error);
|
||||
}
|
||||
}
|
||||
|
||||
function onDelete() {
|
||||
reply.value.mediaId = null;
|
||||
reply.value.url = null;
|
||||
reply.value.name = null;
|
||||
}
|
||||
|
||||
function selectMaterial(item: any) {
|
||||
showDialog.value = false;
|
||||
reply.value.mediaId = item.mediaId;
|
||||
reply.value.url = item.url;
|
||||
reply.value.name = item.name;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- 情况一：已经选择好素材、或者上传好图片 -->
|
||||
<div v-if="reply.url" class="select-item">
|
||||
<img class="material-img" :src="reply.url" alt="图片素材" />
|
||||
<p v-if="reply.name" class="item-name">{{ reply.name }}</p>
|
||||
<Row class="ope-row" justify="center">
|
||||
<Button danger shape="circle" @click="onDelete">
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:trash-2" />
|
||||
</template>
|
||||
</Button>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<!-- 情况二：未做完上述操作 -->
|
||||
<Row v-else class="text-center" align="middle">
|
||||
<!-- 选择素材 -->
|
||||
<Col :span="12" class="col-select">
|
||||
<Button type="primary" @click="showDialog = true">
|
||||
素材库选择
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:circle-check" />
|
||||
</template>
|
||||
</Button>
|
||||
<Modal
|
||||
v-model:open="showDialog"
|
||||
title="选择图片"
|
||||
:width="1200"
|
||||
:footer="null"
|
||||
destroy-on-close
|
||||
>
|
||||
<WxMaterialSelect
|
||||
type="image"
|
||||
:account-id="reply.accountId"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</Modal>
|
||||
</Col>
|
||||
|
||||
<!-- 文件上传 -->
|
||||
<Col :span="12" class="col-add">
|
||||
<Upload
|
||||
:custom-request="customRequest"
|
||||
:multiple="true"
|
||||
:max-count="1"
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeImageUpload"
|
||||
:show-upload-list="false"
|
||||
>
|
||||
<Button type="primary">
|
||||
上传图片
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:upload" />
|
||||
</template>
|
||||
</Button>
|
||||
</Upload>
|
||||
<div class="upload-tip">
|
||||
支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
|
||||
.select-item {
|
||||
width: 280px;
|
||||
padding: 10px;
|
||||
margin: 0 auto 10px;
|
||||
border: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.material-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ope-row {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.col-select,
|
||||
.col-add {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 160px;
|
||||
padding: 50px 0;
|
||||
border: 1px solid rgb(234 234 234);
|
||||
}
|
||||
|
||||
.col-select {
|
||||
width: 49.5%;
|
||||
}
|
||||
|
||||
.col-add {
|
||||
float: right;
|
||||
width: 49.5%;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
222
apps/web-antd/src/views/mp/components/wx-reply/tab-music.vue
Normal file
222
apps/web-antd/src/views/mp/components/wx-reply/tab-music.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Reply } from './types';
|
||||
|
||||
import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
|
||||
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Row,
|
||||
Upload,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { WxMaterialSelect } from '#/views/mp/components';
|
||||
import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
|
||||
|
||||
defineOptions({ name: 'TabMusic' });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Reply;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Reply): void;
|
||||
}>();
|
||||
|
||||
const accessStore = useAccessStore();
|
||||
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
|
||||
const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
|
||||
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
|
||||
const showDialog = ref(false);
|
||||
const fileList = ref([]);
|
||||
const uploadData = reactive({
|
||||
accountId: reply.value.accountId,
|
||||
introduction: '',
|
||||
title: '',
|
||||
type: 'thumb', // 音乐类型为thumb
|
||||
});
|
||||
|
||||
function beforeImageUpload(rawFile: UploadRawFile) {
|
||||
return useBeforeUpload(UploadType.Image, 2)(rawFile);
|
||||
}
|
||||
|
||||
/** 自定义上传请求 */
|
||||
async function customRequest(options: any) {
|
||||
const { file, onSuccess, onError } = options;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('accountId', String(uploadData.accountId));
|
||||
formData.append('type', uploadData.type);
|
||||
formData.append('title', uploadData.title);
|
||||
formData.append('introduction', uploadData.introduction);
|
||||
|
||||
try {
|
||||
const response = await fetch(UPLOAD_URL, {
|
||||
method: 'POST',
|
||||
headers: HEADERS,
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 0) {
|
||||
// 清空上传时的各种数据
|
||||
fileList.value = [];
|
||||
uploadData.title = '';
|
||||
uploadData.introduction = '';
|
||||
|
||||
// 上传好的文件，本质是个素材，所以可以进行选中
|
||||
selectMaterial(result.data);
|
||||
message.success('上传成功');
|
||||
onSuccess(result, file);
|
||||
} else {
|
||||
message.error(result.msg || '上传出错');
|
||||
onError(new Error(result.msg || '上传失败'));
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('上传失败，请重试');
|
||||
onError(error);
|
||||
}
|
||||
}
|
||||
|
||||
function selectMaterial(item: any) {
|
||||
showDialog.value = false;
|
||||
reply.value.thumbMediaId = item.mediaId;
|
||||
reply.value.thumbMediaUrl = item.url;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Row align="middle" justify="center">
|
||||
<Col :span="6">
|
||||
<div class="thumb-container">
|
||||
<div class="thumb-preview">
|
||||
<img
|
||||
v-if="reply.thumbMediaUrl"
|
||||
:src="reply.thumbMediaUrl"
|
||||
alt="音乐封面"
|
||||
class="thumb-img"
|
||||
/>
|
||||
<IconifyIcon
|
||||
v-else
|
||||
icon="lucide:plus"
|
||||
:size="40"
|
||||
class="text-gray-400"
|
||||
/>
|
||||
</div>
|
||||
<div class="thumb-actions">
|
||||
<Upload
|
||||
:custom-request="customRequest"
|
||||
:multiple="true"
|
||||
:max-count="1"
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeImageUpload"
|
||||
:show-upload-list="false"
|
||||
>
|
||||
<Button type="link">本地上传</Button>
|
||||
</Upload>
|
||||
<Button type="link" class="ml-2" @click="showDialog = true">
|
||||
素材库选择
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO @dylan：这里应该不是图片哇？ -->
|
||||
<Modal
|
||||
v-model:open="showDialog"
|
||||
title="选择图片"
|
||||
:width="1200"
|
||||
:footer="null"
|
||||
destroy-on-close
|
||||
>
|
||||
<WxMaterialSelect
|
||||
type="image"
|
||||
:account-id="reply.accountId"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</Modal>
|
||||
</Col>
|
||||
<Col :span="18">
|
||||
<!-- TODO @dylan：input 两个之间的间距可以调整下。现在和左侧的图片，距离有点远了。 -->
|
||||
<div class="input-group">
|
||||
<Input
|
||||
:value="reply.title || undefined"
|
||||
placeholder="请输入标题"
|
||||
class="mb-5"
|
||||
@update:value="(val) => (reply.title = val || null)"
|
||||
/>
|
||||
<Input
|
||||
:value="reply.description || undefined"
|
||||
placeholder="请输入描述"
|
||||
@update:value="(val) => (reply.description = val || null)"
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<div class="mt-5">
|
||||
<Input
|
||||
:value="reply.musicUrl || undefined"
|
||||
placeholder="请输入音乐链接"
|
||||
class="mb-5"
|
||||
@update:value="(val) => (reply.musicUrl = val || null)"
|
||||
/>
|
||||
<Input
|
||||
:value="reply.hqMusicUrl || undefined"
|
||||
placeholder="请输入高质量音乐链接"
|
||||
@update:value="(val) => (reply.hqMusicUrl = val || null)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
|
||||
.thumb-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.thumb-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.thumb-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.thumb-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -7,17 +7,21 @@ import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Button, Col, Modal, Row } from 'ant-design-vue';
|
||||
|
||||
import { MaterialSelect, News } from '#/views/mp/components';
|
||||
import { WxMaterialSelect, WxNews } from '#/views/mp/components';
|
||||
|
||||
import { NewsType } from '../material-select/types';
|
||||
import { NewsType } from '../constants';
|
||||
|
||||
defineOptions({ name: 'TabNews' });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Reply;
|
||||
newsType: NewsType;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Reply): void;
|
||||
}>();
|
||||
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
@@ -25,13 +29,11 @@ const reply = computed<Reply>({
|
||||
|
||||
const showDialog = ref(false);
|
||||
|
||||
/** 选择素材 */
|
||||
function selectMaterial(item: any) {
|
||||
showDialog.value = false;
|
||||
reply.value.articles = item.content.newsItem;
|
||||
}
|
||||
|
||||
/** 删除图文 */
|
||||
function onDelete() {
|
||||
reply.value.articles = [];
|
||||
}
|
||||
@@ -41,18 +43,21 @@ function onDelete() {
|
||||
<div>
|
||||
<Row>
|
||||
<div
|
||||
class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
|
||||
v-if="reply.articles && reply.articles.length > 0"
|
||||
class="select-item"
|
||||
>
|
||||
<News :articles="reply.articles" />
|
||||
<Col class="pt-[10px] text-center">
|
||||
<Button type="primary" danger shape="circle" @click="onDelete">
|
||||
<IconifyIcon icon="ep:delete" />
|
||||
<WxNews :articles="reply.articles" />
|
||||
<Col class="ope-row">
|
||||
<Button danger shape="circle" @click="onDelete">
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:trash-2" />
|
||||
</template>
|
||||
</Button>
|
||||
</Col>
|
||||
</div>
|
||||
|
||||
<!-- 选择素材 -->
|
||||
<Col :span="24" v-if="!reply.content">
|
||||
<Col v-if="!reply.content" :span="24">
|
||||
<Row class="text-center" align="middle">
|
||||
<Col :span="24">
|
||||
<Button type="primary" @click="showDialog = true">
|
||||
@@ -61,18 +66,22 @@ function onDelete() {
|
||||
? '选择已发布图文'
|
||||
: '选择草稿箱图文'
|
||||
}}
|
||||
<IconifyIcon icon="ep:circle-check" />
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:circle-check" />
|
||||
</template>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
|
||||
<Modal
|
||||
title="选择图文"
|
||||
v-model:open="showDialog"
|
||||
width="90%"
|
||||
title="选择图文"
|
||||
:width="1200"
|
||||
:footer="null"
|
||||
destroy-on-close
|
||||
>
|
||||
<MaterialSelect
|
||||
<WxMaterialSelect
|
||||
type="news"
|
||||
:account-id="reply.accountId"
|
||||
:news-type="newsType"
|
||||
@@ -82,3 +91,18 @@ function onDelete() {
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
|
||||
.select-item {
|
||||
width: 280px;
|
||||
padding: 10px;
|
||||
margin: 0 auto 10px;
|
||||
border: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.ope-row {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +1,26 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { Input } from 'ant-design-vue';
|
||||
import { Textarea } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue?: null | string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: null | string): void;
|
||||
(e: 'input', v: null | string): void;
|
||||
(e: 'update:modelValue', v: null | string): void;
|
||||
}>();
|
||||
|
||||
const content = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val: null | string) => {
|
||||
emit('update:modelValue', val);
|
||||
emit('input', val);
|
||||
get: () => props.modelValue ?? '',
|
||||
set: (val: string) => {
|
||||
emit('update:modelValue', val || null);
|
||||
emit('input', val || null);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Input.TextArea
|
||||
:rows="5"
|
||||
placeholder="请输入内容"
|
||||
v-model:value="content as string"
|
||||
class="w-full"
|
||||
/>
|
||||
<Textarea v-model:value="content" :rows="5" placeholder="请输入内容" />
|
||||
</template>
|
||||
192
apps/web-antd/src/views/mp/components/wx-reply/tab-video.vue
Normal file
192
apps/web-antd/src/views/mp/components/wx-reply/tab-video.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Reply } from './types';
|
||||
|
||||
import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
|
||||
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Row,
|
||||
Upload,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { WxMaterialSelect, WxVideoPlayer } from '#/views/mp/components';
|
||||
import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
|
||||
|
||||
defineOptions({ name: 'TabVideo' });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Reply;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Reply): void;
|
||||
}>();
|
||||
|
||||
const accessStore = useAccessStore();
|
||||
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
|
||||
const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
|
||||
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
|
||||
const showDialog = ref(false);
|
||||
const fileList = ref([]);
|
||||
const uploadData = reactive({
|
||||
accountId: reply.value.accountId,
|
||||
introduction: '',
|
||||
title: '',
|
||||
type: 'video',
|
||||
});
|
||||
|
||||
function beforeVideoUpload(rawFile: UploadRawFile) {
|
||||
return useBeforeUpload(UploadType.Video, 10)(rawFile);
|
||||
}
|
||||
|
||||
/** 自定义上传请求 */
|
||||
async function customRequest(options: any) {
|
||||
const { file, onSuccess, onError } = options;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('accountId', String(uploadData.accountId));
|
||||
formData.append('type', uploadData.type);
|
||||
formData.append('title', uploadData.title);
|
||||
formData.append('introduction', uploadData.introduction);
|
||||
|
||||
try {
|
||||
const response = await fetch(UPLOAD_URL, {
|
||||
method: 'POST',
|
||||
headers: HEADERS,
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 0) {
|
||||
// 清空上传时的各种数据
|
||||
fileList.value = [];
|
||||
uploadData.title = '';
|
||||
uploadData.introduction = '';
|
||||
|
||||
// 选择素材
|
||||
selectMaterial(result.data);
|
||||
message.success('上传成功');
|
||||
onSuccess(result, file);
|
||||
} else {
|
||||
message.error(result.msg || '上传出错');
|
||||
onError(new Error(result.msg || '上传失败'));
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('上传失败，请重试');
|
||||
onError(error);
|
||||
}
|
||||
}
|
||||
|
||||
/** 选择素材后设置 */
|
||||
function selectMaterial(item: any) {
|
||||
showDialog.value = false;
|
||||
|
||||
reply.value.mediaId = item.mediaId;
|
||||
reply.value.url = item.url;
|
||||
reply.value.name = item.name;
|
||||
|
||||
// title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
|
||||
if (item.title) {
|
||||
reply.value.title = item.title || '';
|
||||
}
|
||||
if (item.introduction) {
|
||||
reply.value.description = item.introduction || '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Row :gutter="[0, 16]">
|
||||
<Col :span="24">
|
||||
<Input
|
||||
:value="reply.title || undefined"
|
||||
placeholder="请输入标题"
|
||||
@update:value="(val) => (reply.title = val || null)"
|
||||
/>
|
||||
</Col>
|
||||
<Col :span="24">
|
||||
<Input
|
||||
:value="reply.description || undefined"
|
||||
placeholder="请输入描述"
|
||||
@update:value="(val) => (reply.description = val || null)"
|
||||
/>
|
||||
</Col>
|
||||
<Col :span="24">
|
||||
<Row class="ope-row" justify="center">
|
||||
<WxVideoPlayer v-if="reply.url" :url="reply.url" />
|
||||
</Row>
|
||||
</Col>
|
||||
<Col :span="24">
|
||||
<Row class="text-center" align="middle">
|
||||
<!-- 选择素材 -->
|
||||
<Col :span="12">
|
||||
<Button type="primary" @click="showDialog = true">
|
||||
素材库选择
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:circle-check" />
|
||||
</template>
|
||||
</Button>
|
||||
<Modal
|
||||
v-model:open="showDialog"
|
||||
title="选择视频"
|
||||
:width="1200"
|
||||
:footer="null"
|
||||
destroy-on-close
|
||||
>
|
||||
<WxMaterialSelect
|
||||
type="video"
|
||||
:account-id="reply.accountId"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</Modal>
|
||||
</Col>
|
||||
|
||||
<!-- 文件上传 -->
|
||||
<Col :span="12">
|
||||
<Upload
|
||||
:custom-request="customRequest"
|
||||
:multiple="true"
|
||||
:max-count="1"
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeVideoUpload"
|
||||
:show-upload-list="false"
|
||||
>
|
||||
<Button type="primary">
|
||||
新建视频
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:upload" />
|
||||
</template>
|
||||
</Button>
|
||||
</Upload>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
|
||||
.ope-row {
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
216
apps/web-antd/src/views/mp/components/wx-reply/tab-voice.vue
Normal file
216
apps/web-antd/src/views/mp/components/wx-reply/tab-voice.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Reply } from './types';
|
||||
|
||||
import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
|
||||
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
|
||||
|
||||
import { WxMaterialSelect, WxVoicePlayer } from '#/views/mp/components';
|
||||
import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
|
||||
|
||||
defineOptions({ name: 'TabVoice' });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Reply;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Reply): void;
|
||||
}>();
|
||||
|
||||
const accessStore = useAccessStore();
|
||||
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
|
||||
const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
|
||||
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
|
||||
const showDialog = ref(false);
|
||||
const fileList = ref([]);
|
||||
const uploadData = reactive({
|
||||
accountId: reply.value.accountId,
|
||||
introduction: '',
|
||||
title: '',
|
||||
type: 'voice',
|
||||
});
|
||||
|
||||
function beforeVoiceUpload(rawFile: UploadRawFile) {
|
||||
return useBeforeUpload(UploadType.Voice, 10)(rawFile);
|
||||
}
|
||||
|
||||
/** 自定义上传请求 */
|
||||
async function customRequest(options: any) {
|
||||
const { file, onSuccess, onError } = options;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('accountId', String(uploadData.accountId));
|
||||
formData.append('type', uploadData.type);
|
||||
formData.append('title', uploadData.title);
|
||||
formData.append('introduction', uploadData.introduction);
|
||||
|
||||
try {
|
||||
const response = await fetch(UPLOAD_URL, {
|
||||
method: 'POST',
|
||||
headers: HEADERS,
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 0) {
|
||||
// 清空上传时的各种数据
|
||||
fileList.value = [];
|
||||
uploadData.title = '';
|
||||
uploadData.introduction = '';
|
||||
|
||||
// 上传好的文件，本质是个素材，所以可以进行选中
|
||||
selectMaterial(result.data);
|
||||
message.success('上传成功');
|
||||
onSuccess(result, file);
|
||||
} else {
|
||||
message.error(result.msg || '上传出错');
|
||||
onError(new Error(result.msg || '上传失败'));
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('上传失败，请重试');
|
||||
onError(error);
|
||||
}
|
||||
}
|
||||
|
||||
function onDelete() {
|
||||
reply.value.mediaId = null;
|
||||
reply.value.url = null;
|
||||
reply.value.name = null;
|
||||
}
|
||||
|
||||
function selectMaterial(item: Reply) {
|
||||
showDialog.value = false;
|
||||
reply.value.mediaId = item.mediaId;
|
||||
reply.value.url = item.url;
|
||||
reply.value.name = item.name;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="reply.url" class="select-item">
|
||||
<p class="item-name">{{ reply.name }}</p>
|
||||
<Row class="ope-row" justify="center">
|
||||
<WxVoicePlayer :url="reply.url" />
|
||||
</Row>
|
||||
<Row class="ope-row" justify="center">
|
||||
<Button danger shape="circle" @click="onDelete">
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:trash-2" />
|
||||
</template>
|
||||
</Button>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Row v-else class="text-center">
|
||||
<!-- 选择素材 -->
|
||||
<Col :span="12" class="col-select">
|
||||
<Button type="primary" @click="showDialog = true">
|
||||
素材库选择
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:circle-check" />
|
||||
</template>
|
||||
</Button>
|
||||
<Modal
|
||||
v-model:open="showDialog"
|
||||
title="选择语音"
|
||||
:width="1200"
|
||||
:footer="null"
|
||||
destroy-on-close
|
||||
>
|
||||
<WxMaterialSelect
|
||||
type="voice"
|
||||
:account-id="reply.accountId"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</Modal>
|
||||
</Col>
|
||||
|
||||
<!-- 文件上传 -->
|
||||
<Col :span="12" class="col-add">
|
||||
<Upload
|
||||
:custom-request="customRequest"
|
||||
:multiple="true"
|
||||
:max-count="1"
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeVoiceUpload"
|
||||
:show-upload-list="false"
|
||||
>
|
||||
<Button type="primary">
|
||||
点击上传
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:upload" />
|
||||
</template>
|
||||
</Button>
|
||||
</Upload>
|
||||
<div class="upload-tip">
|
||||
格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
|
||||
.select-item {
|
||||
padding: 10px;
|
||||
margin: 0 auto 10px;
|
||||
border: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ope-row {
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.col-select,
|
||||
.col-add {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 160px;
|
||||
padding: 50px 0;
|
||||
border: 1px solid rgb(234 234 234);
|
||||
}
|
||||
|
||||
.col-select {
|
||||
width: 49.5%;
|
||||
}
|
||||
|
||||
.col-add {
|
||||
float: right;
|
||||
width: 49.5%;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,53 +1,42 @@
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type { ReplyType } from '../constants';
|
||||
|
||||
import { unref } from 'vue';
|
||||
|
||||
enum ReplyType {
|
||||
Image = 'image',
|
||||
Music = 'music',
|
||||
News = 'news',
|
||||
Text = 'text',
|
||||
Video = 'video',
|
||||
Voice = 'voice',
|
||||
}
|
||||
|
||||
interface _Reply {
|
||||
export interface Reply {
|
||||
accountId: number;
|
||||
type: ReplyType;
|
||||
name?: null | string;
|
||||
articles?: any[];
|
||||
content?: null | string;
|
||||
mediaId?: null | string;
|
||||
url?: null | string;
|
||||
title?: null | string;
|
||||
description?: null | string;
|
||||
thumbMediaId?: null | string;
|
||||
thumbMediaUrl?: null | string;
|
||||
musicUrl?: null | string;
|
||||
hqMusicUrl?: null | string;
|
||||
introduction?: null | string;
|
||||
articles?: any[];
|
||||
mediaId?: null | string;
|
||||
musicUrl?: null | string;
|
||||
name?: null | string;
|
||||
thumbMediaId?: null | string;
|
||||
thumbMediaUrl?: null | string;
|
||||
title?: null | string;
|
||||
type: ReplyType;
|
||||
url?: null | string;
|
||||
}
|
||||
|
||||
type Reply = _Reply; // Partial<_Reply>
|
||||
|
||||
/** 利用旧的reply[accountId, type]初始化新的Reply */
|
||||
const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
|
||||
export function createEmptyReply(old: Ref<Reply> | Reply): Reply {
|
||||
return {
|
||||
accountId: unref(old).accountId,
|
||||
type: unref(old).type,
|
||||
name: null,
|
||||
articles: [],
|
||||
content: null,
|
||||
mediaId: null,
|
||||
url: null,
|
||||
title: null,
|
||||
description: null,
|
||||
thumbMediaId: null,
|
||||
thumbMediaUrl: null,
|
||||
musicUrl: null,
|
||||
hqMusicUrl: null,
|
||||
introduction: null,
|
||||
articles: [],
|
||||
mediaId: null,
|
||||
musicUrl: null,
|
||||
name: null,
|
||||
thumbMediaId: null,
|
||||
thumbMediaUrl: null,
|
||||
title: null,
|
||||
type: unref(old).type,
|
||||
url: null,
|
||||
};
|
||||
};
|
||||
|
||||
export { createEmptyReply, type Reply, ReplyType };
|
||||
}
|
||||
274
apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue
Normal file
274
apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<!--
|
||||
- Copyright (C) 2018-2019
|
||||
- All rights reserved, Designed By www.joolun.com
|
||||
芋道源码：
|
||||
① 移除多余的 rep 为前缀的变量，让 message 消息更简单
|
||||
② 代码优化，补充注释，提升阅读性
|
||||
③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
|
||||
④ 支持发送【视频】消息时，支持新建视频
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import type { Reply } from './types';
|
||||
|
||||
import { computed, ref, unref, watch } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Row, Tabs } from 'ant-design-vue';
|
||||
|
||||
import { NewsType, ReplyType } from '../constants';
|
||||
import TabImage from './tab-image.vue';
|
||||
import TabMusic from './tab-music.vue';
|
||||
import TabNews from './tab-news.vue';
|
||||
import TabText from './tab-text.vue';
|
||||
import TabVideo from './tab-video.vue';
|
||||
import TabVoice from './tab-voice.vue';
|
||||
import { createEmptyReply } from './types';
|
||||
|
||||
defineOptions({ name: 'WxReplySelect' });
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
newsType: undefined,
|
||||
});
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Reply): void;
|
||||
}>();
|
||||
|
||||
interface Props {
|
||||
modelValue: Reply | undefined;
|
||||
newsType?: NewsType;
|
||||
}
|
||||
|
||||
// 提供一个默认的 Reply 对象，避免 undefined 导致的错误
|
||||
const defaultReply: Reply = {
|
||||
accountId: -1,
|
||||
type: ReplyType.Text,
|
||||
};
|
||||
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue || defaultReply,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
|
||||
const tabCache = new Map<ReplyType, Reply>(); // 作为多个标签保存各自 Reply 的缓存
|
||||
const currentTab = ref<ReplyType>(props.modelValue?.type || ReplyType.Text); // 采用独立的 ref 来保存当前 tab，避免在 watch 标签变化，对 reply 进行赋值会产生了循环调用
|
||||
|
||||
// 监听 modelValue 变化，同步更新 currentTab 和缓存
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
if (newValue?.type) {
|
||||
// 如果类型变化，更新 currentTab
|
||||
if (newValue.type !== currentTab.value) {
|
||||
currentTab.value = newValue.type;
|
||||
}
|
||||
// 如果 modelValue 有数据，更新对应 tab 的缓存
|
||||
if (newValue.type) {
|
||||
tabCache.set(newValue.type, { ...newValue });
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
currentTab,
|
||||
(newTab, oldTab) => {
|
||||
// 第一次进入：oldTab 为 undefined
|
||||
// 判断 newTab 是因为 Reply 为 Partial
|
||||
if (oldTab === undefined || newTab === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 保存旧tab的数据到缓存
|
||||
const oldReply = unref(reply);
|
||||
// 只有当旧tab的reply有实际数据时才缓存（避免缓存空数据）
|
||||
if (oldReply && oldTab === oldReply.type) {
|
||||
tabCache.set(oldTab, oldReply);
|
||||
}
|
||||
|
||||
// 从缓存里面取出新tab内容，有则覆盖Reply，没有则创建空Reply
|
||||
const temp = tabCache.get(newTab);
|
||||
if (temp) {
|
||||
reply.value = temp;
|
||||
} else {
|
||||
// 如果当前reply的类型就是新tab的类型，说明这是从外部传入的数据，应该保留
|
||||
const currentReply = unref(reply);
|
||||
if (currentReply && currentReply.type === newTab) {
|
||||
// 这是从外部传入的数据，直接缓存并使用
|
||||
tabCache.set(newTab, currentReply);
|
||||
// 不需要修改reply.value，因为它已经是正确的了
|
||||
} else {
|
||||
// 创建新的空reply
|
||||
const newData = createEmptyReply(reply);
|
||||
newData.type = newTab;
|
||||
reply.value = newData;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
/** 清除除了`type`, `accountId`的字段 */
|
||||
function clear() {
|
||||
reply.value = createEmptyReply(reply);
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
clear,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tabs v-model:active-key="currentTab" type="card">
|
||||
<!-- 类型 1：文本 -->
|
||||
<Tabs.TabPane :key="ReplyType.Text">
|
||||
<template #tab>
|
||||
<Row align="middle">
|
||||
<IconifyIcon icon="lucide:file-text" class="mr-1" />
|
||||
文本
|
||||
</Row>
|
||||
</template>
|
||||
<TabText v-model="reply.content" />
|
||||
</Tabs.TabPane>
|
||||
|
||||
<!-- 类型 2：图片 -->
|
||||
<Tabs.TabPane :key="ReplyType.Image">
|
||||
<template #tab>
|
||||
<Row align="middle">
|
||||
<IconifyIcon icon="lucide:image" class="mr-1" />
|
||||
图片
|
||||
</Row>
|
||||
</template>
|
||||
<TabImage v-model="reply" />
|
||||
</Tabs.TabPane>
|
||||
|
||||
<!-- 类型 3：语音 -->
|
||||
<Tabs.TabPane :key="ReplyType.Voice">
|
||||
<template #tab>
|
||||
<Row align="middle">
|
||||
<IconifyIcon icon="lucide:mic" class="mr-1" />
|
||||
语音
|
||||
</Row>
|
||||
</template>
|
||||
<TabVoice v-model="reply" />
|
||||
</Tabs.TabPane>
|
||||
|
||||
<!-- 类型 4：视频 -->
|
||||
<Tabs.TabPane :key="ReplyType.Video">
|
||||
<template #tab>
|
||||
<Row align="middle">
|
||||
<IconifyIcon icon="lucide:video" class="mr-1" />
|
||||
视频
|
||||
</Row>
|
||||
</template>
|
||||
<TabVideo v-model="reply" />
|
||||
</Tabs.TabPane>
|
||||
|
||||
<!-- 类型 5：图文 -->
|
||||
<Tabs.TabPane :key="ReplyType.News">
|
||||
<template #tab>
|
||||
<Row align="middle">
|
||||
<IconifyIcon icon="lucide:newspaper" class="mr-1" />
|
||||
图文
|
||||
</Row>
|
||||
</template>
|
||||
<TabNews v-model="reply" :news-type="newsType" />
|
||||
</Tabs.TabPane>
|
||||
|
||||
<!-- 类型 6：音乐 -->
|
||||
<Tabs.TabPane :key="ReplyType.Music">
|
||||
<template #tab>
|
||||
<Row align="middle">
|
||||
<IconifyIcon icon="lucide:music" class="mr-1" />
|
||||
音乐
|
||||
</Row>
|
||||
</template>
|
||||
<TabMusic v-model="reply" />
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
|
||||
.select-item {
|
||||
width: 280px;
|
||||
padding: 10px;
|
||||
margin: 0 auto 10px;
|
||||
border: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.select-item2 {
|
||||
padding: 10px;
|
||||
margin: 0 auto 10px;
|
||||
border: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.ope-row {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-margin-bottom {
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
line-height: unset !important;
|
||||
}
|
||||
|
||||
.col-select {
|
||||
width: 49.5%;
|
||||
height: 160px;
|
||||
padding: 50px 0;
|
||||
border: 1px solid rgb(234 234 234);
|
||||
}
|
||||
|
||||
.col-select2 {
|
||||
height: 160px;
|
||||
padding: 50px 0;
|
||||
border: 1px solid rgb(234 234 234);
|
||||
}
|
||||
|
||||
.col-add {
|
||||
float: right;
|
||||
width: 49.5%;
|
||||
height: 160px;
|
||||
padding: 50px 0;
|
||||
border: 1px solid rgb(234 234 234);
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
font-size: 28px;
|
||||
line-height: 100px !important;
|
||||
color: #8c939d;
|
||||
text-align: center;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.material-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.thumb-div {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-infos {
|
||||
width: 30%;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1 @@
|
||||
export { default as WxVideoPlayer } from './wx-video-play.vue';
|
||||
@@ -0,0 +1,55 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { VideoPlayer } from '@videojs-player/vue';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
|
||||
import 'video.js/dist/video-js.css';
|
||||
|
||||
defineOptions({ name: 'WxVideoPlayer' });
|
||||
|
||||
const props = defineProps<{
|
||||
url: string;
|
||||
}>();
|
||||
|
||||
const dialogVideo = ref(false);
|
||||
|
||||
function playVideo() {
|
||||
dialogVideo.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 微信消息 - 视频播放 -->
|
||||
<div class="cursor-pointer" @click="playVideo()">
|
||||
<!-- 提示 -->
|
||||
<div class="flex items-center">
|
||||
<IconifyIcon icon="lucide:circle-play" :size="32" class="mr-2" />
|
||||
<p class="text-sm">点击播放视频</p>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗播放 -->
|
||||
<Modal
|
||||
v-model:open="dialogVideo"
|
||||
title="视频播放"
|
||||
:footer="null"
|
||||
:width="850"
|
||||
destroy-on-close
|
||||
>
|
||||
<VideoPlayer
|
||||
v-if="dialogVideo"
|
||||
class="video-player vjs-big-play-centered"
|
||||
:src="props.url"
|
||||
poster=""
|
||||
crossorigin="anonymous"
|
||||
controls
|
||||
playsinline
|
||||
:volume="0.6"
|
||||
:width="800"
|
||||
:playback-rates="[0.7, 1.0, 1.5, 2.0]"
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1 @@
|
||||
export { default as WxVoicePlayer } from './wx-voice-play.vue';
|
||||
@@ -0,0 +1,104 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Tag } from 'ant-design-vue';
|
||||
import BenzAMRRecorder from 'benz-amr-recorder'; // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
|
||||
|
||||
defineOptions({ name: 'WxVoicePlayer' });
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
content?: string; // 语音文本
|
||||
url: string; // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
|
||||
}>(),
|
||||
{
|
||||
content: '',
|
||||
},
|
||||
);
|
||||
|
||||
const amr = ref<any>();
|
||||
const playing = ref(false);
|
||||
const duration = ref<number>();
|
||||
|
||||
/** 处理点击，播放或暂停 */
|
||||
function playVoice() {
|
||||
// 情况一：未初始化，则创建 BenzAMRRecorder
|
||||
if (amr.value === undefined) {
|
||||
amrInit();
|
||||
return;
|
||||
}
|
||||
// 情况二：已经初始化，则根据情况播放或暂时
|
||||
if (amr.value.isPlaying()) {
|
||||
amrStop();
|
||||
} else {
|
||||
amrPlay();
|
||||
}
|
||||
}
|
||||
|
||||
/** 音频初始化 */
|
||||
function amrInit() {
|
||||
amr.value = new BenzAMRRecorder();
|
||||
// 设置播放
|
||||
amr.value.initWithUrl(props.url).then(() => {
|
||||
amrPlay();
|
||||
duration.value = amr.value.getDuration();
|
||||
});
|
||||
// 监听暂停
|
||||
amr.value.onEnded(() => {
|
||||
playing.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
/** 音频播放 */
|
||||
function amrPlay() {
|
||||
playing.value = true;
|
||||
amr.value.play();
|
||||
}
|
||||
|
||||
/** 音频暂停 */
|
||||
function amrStop() {
|
||||
playing.value = false;
|
||||
amr.value.stop();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 微信消息 - 语音播放 -->
|
||||
<div class="wx-voice-div cursor-pointer" @click="playVoice">
|
||||
<div class="flex items-center">
|
||||
<IconifyIcon
|
||||
v-if="playing !== true"
|
||||
icon="lucide:circle-play"
|
||||
:size="32"
|
||||
/>
|
||||
<IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
|
||||
<span v-if="duration" class="amr-duration">{{ duration }} 秒</span>
|
||||
</div>
|
||||
<div v-if="content" class="mt-2">
|
||||
<Tag color="success">语音识别</Tag>
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
|
||||
.wx-voice-div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 120px;
|
||||
min-height: 50px;
|
||||
padding: 8px 12px;
|
||||
background-color: #eaeaea;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.amr-duration {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user