refactor: mp comps
This commit is contained in:
xingyu4j
@@ -1,7 +1,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { Rule } from 'ant-design-vue/es/form';
|
import type { Rule } from 'ant-design-vue/es/form';
|
||||||
|
|
||||||
import type { Reply } from '#/views/mp/components/wx-reply';
|
import type { Reply } from '#/views/mp/components';
|
||||||
|
|
||||||
import { computed, ref } from 'vue';
|
import { computed, ref } from 'vue';
|
||||||
|
|
||||||
@@ -10,7 +10,7 @@ import { getDictOptions } from '@vben/hooks';
|
|||||||
|
|
||||||
import { Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue';
|
import { Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue';
|
||||||
|
|
||||||
import { WxReplySelect } from '#/views/mp/components/wx-reply';
|
import { WxReply } from '#/views/mp/components';
|
||||||
|
|
||||||
import { MsgType } from './types';
|
import { MsgType } from './types';
|
||||||
|
|
||||||
@@ -131,7 +131,7 @@ defineExpose({
|
|||||||
/>
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="回复消息">
|
<FormItem label="回复消息">
|
||||||
<WxReplySelect v-model="reply" />
|
<WxReply v-model="reply" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { WxMusic } from '#/views/mp/components/wx-music';
|
import {
|
||||||
import { WxNews } from '#/views/mp/components/wx-news';
|
WxMusic,
|
||||||
import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
|
WxNews,
|
||||||
import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
|
WxVideoPlayer,
|
||||||
|
WxVoicePlayer,
|
||||||
|
} from '#/views/mp/components';
|
||||||
// TODO @hw：迁移到 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/autoReply/modules 里；组件名可能要换一个，= = 之前写的不太好；类似 content.vue ？本质是内容~
|
// TODO @hw：迁移到 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/autoReply/modules 里；组件名可能要换一个，= = 之前写的不太好；类似 content.vue ？本质是内容~
|
||||||
defineOptions({ name: 'ReplyContentCell' });
|
defineOptions({ name: 'ReplyContentCell' });
|
||||||
|
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { markRaw } from 'vue';
|
|||||||
|
|
||||||
import { DICT_TYPE } from '@vben/constants';
|
import { DICT_TYPE } from '@vben/constants';
|
||||||
|
|
||||||
import { WxAccountSelect } from '#/views/mp/components/wx-account-select';
|
import { WxAccountSelect } from '#/views/mp/components';
|
||||||
|
|
||||||
import { MsgType } from './components/types';
|
import { MsgType } from './components/types';
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { Reply } from '#/views/mp/components/wx-reply';
|
import type { Reply } from '#/views/mp/components';
|
||||||
|
|
||||||
import { computed, ref } from 'vue';
|
import { computed, ref } from 'vue';
|
||||||
|
|
||||||
@@ -9,7 +9,7 @@ import { message } from 'ant-design-vue';
|
|||||||
|
|
||||||
import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply';
|
import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply';
|
||||||
import { $t } from '#/locales';
|
import { $t } from '#/locales';
|
||||||
import { ReplyType } from '#/views/mp/components/wx-reply/types';
|
import { ReplyType } from '#/views/mp/components';
|
||||||
|
|
||||||
import ReplyForm from '../components/ReplyForm.vue';
|
import ReplyForm from '../components/ReplyForm.vue';
|
||||||
import { MsgType } from '../components/types';
|
import { MsgType } from '../components/types';
|
||||||
|
|||||||
@@ -1,2 +1 @@
|
|||||||
// TODO @dylan：yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/components 要不加个 index.ts，统一 export 所有的组件
|
export { default as WxAccountSelect } from './account-select.vue';
|
||||||
export { default as WxAccountSelect } from './main.vue';
|
|
||||||
|
|||||||
@@ -1,69 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { SelectValue } from 'ant-design-vue/es/select';
|
|
||||||
|
|
||||||
import type { MpAccountApi } from '#/api/mp/account';
|
|
||||||
|
|
||||||
import { onMounted, reactive, 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: MpAccountApi.Account = reactive({
|
|
||||||
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.id = first.id;
|
|
||||||
account.name = first.name;
|
|
||||||
emit('change', account.id, account.name);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 切换选中公众号 */
|
|
||||||
function onChanged(id: SelectValue) {
|
|
||||||
const found = accountList.value.find((v) => v.id === id);
|
|
||||||
if (found) {
|
|
||||||
account.name = found.name;
|
|
||||||
emit('change', account.id, account.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>
|
|
||||||
@@ -1 +1,2 @@
|
|||||||
export { default as WxLocation } from './main.vue';
|
export * from './types';
|
||||||
|
export { default as WxLocation } from './wx-location.vue';
|
||||||
|
|||||||
@@ -1,54 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
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<{
|
|
||||||
label: string;
|
|
||||||
locationX: number;
|
|
||||||
locationY: number;
|
|
||||||
qqMapKey?: string;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
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="mdi:map-marker" class="mr-1" />
|
|
||||||
{{ label }}
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,3 +1 @@
|
|||||||
export { default as WxMaterialSelect } from './main.vue';
|
export { default as WxMaterialSelect } from './wx-material-select.vue';
|
||||||
|
|
||||||
export { MaterialType, NewsType } from './types';
|
|
||||||
|
|||||||
@@ -1,447 +0,0 @@
|
|||||||
<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 * as MpDraftApi from '#/api/mp/draft';
|
|
||||||
import * as MpFreePublishApi from '#/api/mp/freePublish';
|
|
||||||
import * as MpMaterialApi from '#/api/mp/material';
|
|
||||||
import { WxNews } from '#/views/mp/components/wx-news';
|
|
||||||
import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
|
|
||||||
import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
|
|
||||||
|
|
||||||
import { NewsType } from './types';
|
|
||||||
|
|
||||||
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 MpMaterialApi.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 MpMaterialApi.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 MpMaterialApi.getMaterialPage({
|
|
||||||
...queryParams,
|
|
||||||
type: props.type,
|
|
||||||
});
|
|
||||||
list.value = data.list;
|
|
||||||
total.value = data.total;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getFreePublishPageFun() {
|
|
||||||
const data = await MpFreePublishApi.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 MpDraftApi.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 -->
|
|
||||||
<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="mdi:check-circle" />
|
|
||||||
</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="mdi: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="mdi:plus-circle" />
|
|
||||||
</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="mdi:check-circle" />
|
|
||||||
</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>
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
export enum NewsType {
|
|
||||||
Draft = '2',
|
|
||||||
Published = '1',
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum MaterialType {
|
|
||||||
Image = 'image',
|
|
||||||
News = 'news',
|
|
||||||
Video = 'video',
|
|
||||||
Voice = 'voice',
|
|
||||||
}
|
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
|
|
||||||
import { WxLocation } from '#/views/mp/components/wx-location';
|
|
||||||
import { WxMusic } from '#/views/mp/components/wx-music';
|
|
||||||
import { WxNews } from '#/views/mp/components/wx-news';
|
|
||||||
import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
|
|
||||||
import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
|
|
||||||
|
|
||||||
import { MsgType } from '../types';
|
|
||||||
import MsgEvent from './MsgEvent.vue';
|
|
||||||
|
|
||||||
// TODO @dylan：vue 组件名小写 + 中划线
|
|
||||||
|
|
||||||
defineOptions({ name: 'Msg' });
|
|
||||||
|
|
||||||
defineProps<{
|
|
||||||
item: any;
|
|
||||||
}>();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<MsgEvent v-if="item.type === MsgType.Event" :item="item" />
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.Voice">
|
|
||||||
<WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.Image">
|
|
||||||
<a :href="item.mediaUrl" target="_blank">
|
|
||||||
<img :src="item.mediaUrl" class="w-[100px]" alt="图片消息" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
|
|
||||||
class="text-center"
|
|
||||||
>
|
|
||||||
<WxVideoPlayer :url="item.mediaUrl" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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="mdi:link" class="mr-1" />
|
|
||||||
{{ item.title }}
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<div class="text-xs text-[#666]">{{ item.description }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.Location">
|
|
||||||
<WxLocation
|
|
||||||
:label="item.label"
|
|
||||||
:location-y="item.locationY"
|
|
||||||
:location-x="item.locationX"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.News" class="w-[300px]">
|
|
||||||
<WxNews :articles="item.articles" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.Music">
|
|
||||||
<WxMusic
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:thumb-media-url="item.thumbMediaUrl"
|
|
||||||
:music-url="item.musicUrl"
|
|
||||||
:hq-music-url="item.hqMusicUrl"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { Tag } from 'ant-design-vue';
|
|
||||||
|
|
||||||
// TODO @dylan：vue 组件名小写 + 中划线
|
|
||||||
|
|
||||||
defineOptions({ name: 'MsgEvent' });
|
|
||||||
|
|
||||||
defineProps<{
|
|
||||||
item: any;
|
|
||||||
}>();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div v-if="item.event === 'subscribe'">
|
|
||||||
<Tag color="success">关注</Tag>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'unsubscribe'">
|
|
||||||
<Tag color="error">取消关注</Tag>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'CLICK'">
|
|
||||||
<Tag>点击菜单</Tag>
|
|
||||||
【{{ item.eventKey }}】
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'VIEW'">
|
|
||||||
<Tag>点击菜单链接</Tag>
|
|
||||||
【{{ item.eventKey }}】
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'scancode_waitmsg'">
|
|
||||||
<Tag>扫码结果</Tag>
|
|
||||||
【{{ item.eventKey }}】
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'scancode_push'">
|
|
||||||
<Tag>扫码结果</Tag>
|
|
||||||
【{{ item.eventKey }}】
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'pic_sysphoto'">
|
|
||||||
<Tag>系统拍照发图</Tag>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'pic_photo_or_album'">
|
|
||||||
<Tag>拍照或者相册</Tag>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'pic_weixin'">
|
|
||||||
<Tag>微信相册</Tag>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.event === 'location_select'">
|
|
||||||
<Tag>选择地理位置</Tag>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<Tag color="error">未知事件类型</Tag>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { User } from '../types';
|
|
||||||
|
|
||||||
import { preferences } from '@vben/preferences';
|
|
||||||
import { formatDateTime } from '@vben/utils';
|
|
||||||
|
|
||||||
import Msg from './Msg.vue';
|
|
||||||
|
|
||||||
// TODO @dylan：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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO @dylan：SendFrom 告警；
|
|
||||||
function getNickname(sendFrom: SendFrom) {
|
|
||||||
return sendFrom === SendFrom.User ? props.user.nickname : '公众号';
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="execution" v-for="item in props.list" :key="item.id">
|
|
||||||
<div
|
|
||||||
class="avue-comment"
|
|
||||||
:class="{ 'avue-comment--reverse': item.sendFrom === SendFrom.MpBot }"
|
|
||||||
>
|
|
||||||
<div class="avatar-div">
|
|
||||||
<img :src="getAvatar(item.sendFrom)" class="avue-comment__avatar" />
|
|
||||||
<div class="avue-comment__author">
|
|
||||||
{{ getNickname(item.sendFrom) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="avue-comment__main">
|
|
||||||
<div class="avue-comment__header">
|
|
||||||
<div class="avue-comment__create_time">
|
|
||||||
{{ formatDateTime(item.createTime) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="avue-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,3 +1,3 @@
|
|||||||
export { default as WxMsg } from './main.vue';
|
export * from './types';
|
||||||
|
|
||||||
export { MsgType } from './types';
|
export { default as WxMsg } from './wx-msg.vue';
|
||||||
|
|||||||
@@ -1,178 +0,0 @@
|
|||||||
<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 { WxReplySelect } from '#/views/mp/components/wx-reply';
|
|
||||||
|
|
||||||
import MsgList from './components/MsgList.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 WxReplySelect> | null>(null); // WxReplySelect组件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,15 +1,3 @@
|
|||||||
export enum MsgType {
|
|
||||||
Event = 'event',
|
|
||||||
Image = 'image',
|
|
||||||
Link = 'link',
|
|
||||||
Location = 'location',
|
|
||||||
Music = 'music',
|
|
||||||
News = 'news',
|
|
||||||
Text = 'text',
|
|
||||||
Video = 'video',
|
|
||||||
Voice = 'voice',
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface User {
|
export interface User {
|
||||||
accountId: number;
|
accountId: number;
|
||||||
avatar: string;
|
avatar: string;
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
export { default as WxMusic } from './main.vue';
|
export { default as WxMusic } from './wx-music.vue';
|
||||||
|
|||||||
@@ -1,93 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
defineOptions({ name: 'WxMusic' });
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
description?: string;
|
|
||||||
hqMusicUrl?: string;
|
|
||||||
musicUrl?: string;
|
|
||||||
thumbMediaUrl: string;
|
|
||||||
title?: string;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
title: '',
|
|
||||||
description: '',
|
|
||||||
musicUrl: '',
|
|
||||||
hqMusicUrl: '',
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
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 +1 @@
|
|||||||
export { default as WxNews } from './main.vue';
|
export { default as WxNews } from './wx-news.vue';
|
||||||
|
|||||||
@@ -1,117 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,222 +0,0 @@
|
|||||||
<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/wx-material-select';
|
|
||||||
import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
|
|
||||||
|
|
||||||
// TODO @dylan：文件名的大小写
|
|
||||||
|
|
||||||
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="mdi:delete" />
|
|
||||||
</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="mdi:check-circle" />
|
|
||||||
</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="mdi: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>
|
|
||||||
@@ -1,222 +0,0 @@
|
|||||||
<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/wx-material-select';
|
|
||||||
import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
|
|
||||||
|
|
||||||
// TODO @dylan：文件名的大小写
|
|
||||||
|
|
||||||
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="mdi: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>
|
|
||||||
<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">
|
|
||||||
<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>
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { Reply } from './types';
|
|
||||||
|
|
||||||
import { computed, ref } from 'vue';
|
|
||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
|
|
||||||
import { Button, Col, Modal, Row } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
|
|
||||||
import { WxNews } from '#/views/mp/components/wx-news';
|
|
||||||
|
|
||||||
import { NewsType } from './types';
|
|
||||||
|
|
||||||
// TODO @dylan：文件名的大小写
|
|
||||||
|
|
||||||
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),
|
|
||||||
});
|
|
||||||
|
|
||||||
const showDialog = ref(false);
|
|
||||||
|
|
||||||
function selectMaterial(item: any) {
|
|
||||||
showDialog.value = false;
|
|
||||||
reply.value.articles = item.content.newsItem;
|
|
||||||
}
|
|
||||||
|
|
||||||
function onDelete() {
|
|
||||||
reply.value.articles = [];
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Row>
|
|
||||||
<div
|
|
||||||
v-if="reply.articles && reply.articles.length > 0"
|
|
||||||
class="select-item"
|
|
||||||
>
|
|
||||||
<WxNews :articles="reply.articles" />
|
|
||||||
<Col class="ope-row">
|
|
||||||
<Button danger shape="circle" @click="onDelete">
|
|
||||||
<template #icon>
|
|
||||||
<IconifyIcon icon="mdi:delete" />
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 选择素材 -->
|
|
||||||
<Col v-if="!reply.content" :span="24">
|
|
||||||
<Row class="text-center" align="middle">
|
|
||||||
<Col :span="24">
|
|
||||||
<Button type="primary" @click="showDialog = true">
|
|
||||||
{{
|
|
||||||
newsType === NewsType.Published
|
|
||||||
? '选择已发布图文'
|
|
||||||
: '选择草稿箱图文'
|
|
||||||
}}
|
|
||||||
<template #icon>
|
|
||||||
<IconifyIcon icon="mdi:check-circle" />
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
|
|
||||||
<Modal
|
|
||||||
v-model:open="showDialog"
|
|
||||||
title="选择图文"
|
|
||||||
:width="1200"
|
|
||||||
:footer="null"
|
|
||||||
destroy-on-close
|
|
||||||
>
|
|
||||||
<WxMaterialSelect
|
|
||||||
type="news"
|
|
||||||
:account-id="reply.accountId"
|
|
||||||
:news-type="newsType"
|
|
||||||
@select-material="selectMaterial"
|
|
||||||
/>
|
|
||||||
</Modal>
|
|
||||||
</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,28 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
import { Textarea } from 'ant-design-vue';
|
|
||||||
|
|
||||||
// TODO @dylan：文件名的大小写
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
modelValue?: null | string;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'input', v: null | string): void;
|
|
||||||
(e: 'update:modelValue', v: null | string): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const content = computed({
|
|
||||||
get: () => props.modelValue ?? '',
|
|
||||||
set: (val: string) => {
|
|
||||||
emit('update:modelValue', val || null);
|
|
||||||
emit('input', val || null);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Textarea v-model:value="content" :rows="5" placeholder="请输入内容" />
|
|
||||||
</template>
|
|
||||||
@@ -1,195 +0,0 @@
|
|||||||
<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/wx-material-select';
|
|
||||||
import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
|
|
||||||
import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
|
|
||||||
|
|
||||||
// TODO @dylan：文件名的大小写
|
|
||||||
|
|
||||||
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="mdi:check-circle" />
|
|
||||||
</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="mdi: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>
|
|
||||||
@@ -1,219 +0,0 @@
|
|||||||
<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/wx-material-select';
|
|
||||||
import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
|
|
||||||
import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
|
|
||||||
|
|
||||||
// TODO @dylan：文件名的大小写
|
|
||||||
|
|
||||||
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="mdi:delete" />
|
|
||||||
</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="mdi:check-circle" />
|
|
||||||
</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="mdi: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,54 +0,0 @@
|
|||||||
import type { Ref } from 'vue';
|
|
||||||
|
|
||||||
import { unref } from 'vue';
|
|
||||||
|
|
||||||
export enum ReplyType {
|
|
||||||
Image = 'image',
|
|
||||||
Music = 'music',
|
|
||||||
News = 'news',
|
|
||||||
Text = 'text',
|
|
||||||
Video = 'video',
|
|
||||||
Voice = 'voice',
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Reply {
|
|
||||||
accountId: number;
|
|
||||||
articles?: any[];
|
|
||||||
content?: null | string;
|
|
||||||
description?: null | string;
|
|
||||||
hqMusicUrl?: null | string;
|
|
||||||
introduction?: null | string;
|
|
||||||
mediaId?: null | string;
|
|
||||||
musicUrl?: null | string;
|
|
||||||
name?: null | string;
|
|
||||||
thumbMediaId?: null | string;
|
|
||||||
thumbMediaUrl?: null | string;
|
|
||||||
title?: null | string;
|
|
||||||
type: ReplyType;
|
|
||||||
url?: null | string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum NewsType {
|
|
||||||
Draft = '2',
|
|
||||||
Published = '1',
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 利用旧的reply[accountId, type]初始化新的Reply */
|
|
||||||
export const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
|
|
||||||
return {
|
|
||||||
accountId: unref(old).accountId,
|
|
||||||
articles: [],
|
|
||||||
content: null,
|
|
||||||
description: null,
|
|
||||||
hqMusicUrl: null,
|
|
||||||
introduction: null,
|
|
||||||
mediaId: null,
|
|
||||||
musicUrl: null,
|
|
||||||
name: null,
|
|
||||||
thumbMediaId: null,
|
|
||||||
thumbMediaUrl: null,
|
|
||||||
title: null,
|
|
||||||
type: unref(old).type,
|
|
||||||
url: null,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@@ -1,4 +1,3 @@
|
|||||||
export * from './components/types';
|
export * from './types';
|
||||||
export { createEmptyReply } from './components/types';
|
|
||||||
|
|
||||||
export { default as WxReplySelect } from './main.vue';
|
export { default as WxReply } from './wx-reply.vue';
|
||||||
|
|||||||
@@ -1,235 +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 './components/types';
|
|
||||||
|
|
||||||
import { computed, ref, unref, watch } from 'vue';
|
|
||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
|
|
||||||
import { Row, Tabs } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import TabImage from './components/TabImage.vue';
|
|
||||||
import TabMusic from './components/TabMusic.vue';
|
|
||||||
import TabNews from './components/TabNews.vue';
|
|
||||||
import TabText from './components/TabText.vue';
|
|
||||||
import TabVideo from './components/TabVideo.vue';
|
|
||||||
import TabVoice from './components/TabVoice.vue';
|
|
||||||
import { createEmptyReply, NewsType, ReplyType } from './components/types';
|
|
||||||
|
|
||||||
defineOptions({ name: 'WxReplySelect' });
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
newsType: undefined,
|
|
||||||
});
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:modelValue', v: Reply): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
modelValue: Reply;
|
|
||||||
newsType?: NewsType;
|
|
||||||
}
|
|
||||||
|
|
||||||
const reply = computed<Reply>({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
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 进行赋值会产生了循环调用
|
|
||||||
|
|
||||||
watch(
|
|
||||||
currentTab,
|
|
||||||
(newTab, oldTab) => {
|
|
||||||
// 第一次进入：oldTab 为 undefined
|
|
||||||
// 判断 newTab 是因为 Reply 为 Partial
|
|
||||||
if (oldTab === undefined || newTab === undefined) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
tabCache.set(oldTab, unref(reply));
|
|
||||||
|
|
||||||
// 从缓存里面取出新tab内容，有则覆盖Reply，没有则创建空Reply
|
|
||||||
const temp = tabCache.get(newTab);
|
|
||||||
if (temp) {
|
|
||||||
reply.value = temp;
|
|
||||||
} else {
|
|
||||||
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="mdi: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="mdi: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="mdi:microphone" class="mr-1" />
|
|
||||||
语音
|
|
||||||
</Row>
|
|
||||||
</template>
|
|
||||||
<TabVoice v-model="reply" />
|
|
||||||
</Tabs.TabPane>
|
|
||||||
|
|
||||||
<!-- 类型 4：视频 -->
|
|
||||||
<Tabs.TabPane :key="ReplyType.Video">
|
|
||||||
<template #tab>
|
|
||||||
<Row align="middle">
|
|
||||||
<IconifyIcon icon="mdi: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="mdi: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="mdi: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>
|
|
||||||
@@ -1 +1 @@
|
|||||||
export { default as WxVideoPlayer } from './main.vue';
|
export { default as WxVideoPlayer } from './wx-video-play.vue';
|
||||||
|
|||||||
@@ -1,55 +0,0 @@
|
|||||||
<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="mdi:play-circle" :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>
|
|
||||||
@@ -1 +1 @@
|
|||||||
export { default as WxVoicePlayer } from './main.vue';
|
export { default as WxVoicePlayer } from './wx-voice-play.vue';
|
||||||
|
|||||||
@@ -1,100 +0,0 @@
|
|||||||
<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="mdi:play-circle" :size="32" />
|
|
||||||
<IconifyIcon v-else icon="mdi:pause-circle" :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>
|
|
||||||
@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
|
|||||||
import { Button, Image, message, Modal, Upload } from 'ant-design-vue';
|
import { Button, Image, message, Modal, Upload } from 'ant-design-vue';
|
||||||
|
|
||||||
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
|
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
|
||||||
import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
|
import { WxMaterialSelect } from '#/views/mp/components';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
isFirst: boolean;
|
isFirst: boolean;
|
||||||
@@ -53,8 +53,9 @@ function onMaterialSelected(item: any) {
|
|||||||
newsItem.value.thumbUrl = item.url;
|
newsItem.value.thumbUrl = item.url;
|
||||||
}
|
}
|
||||||
// TODO @hw：注释都补充下哈；
|
// TODO @hw：注释都补充下哈；
|
||||||
const onBeforeUpload = (file: UploadFile) =>
|
function onBeforeUpload(file: UploadFile) {
|
||||||
useBeforeUpload(UploadType.Image, 2)(file as any);
|
return useBeforeUpload(UploadType.Image, 2)(file as any);
|
||||||
|
}
|
||||||
|
|
||||||
// TODO @hw：注释都补充下哈；
|
// TODO @hw：注释都补充下哈；
|
||||||
function onUploadChange(info: any) {
|
function onUploadChange(info: any) {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { Article } from './types';
|
import type { Article } from './types';
|
||||||
|
|
||||||
import { WxNews } from '#/views/mp/components/wx-news';
|
import { WxNews } from '#/views/mp/components';
|
||||||
|
|
||||||
defineOptions({ name: 'DraftTableCell' });
|
defineOptions({ name: 'DraftTableCell' });
|
||||||
|
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ interface Article {
|
|||||||
updateTime: number;
|
updateTime: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const createEmptyNewsItem = (): NewsItem => {
|
function createEmptyNewsItem(): NewsItem {
|
||||||
return {
|
return {
|
||||||
title: '',
|
title: '',
|
||||||
thumbMediaId: '',
|
thumbMediaId: '',
|
||||||
@@ -36,7 +36,7 @@ const createEmptyNewsItem = (): NewsItem => {
|
|||||||
onlyFansCanComment: 0,
|
onlyFansCanComment: 0,
|
||||||
thumbUrl: '',
|
thumbUrl: '',
|
||||||
};
|
};
|
||||||
};
|
}
|
||||||
|
|
||||||
export type { Article, NewsItem, NewsItemList };
|
export type { Article, NewsItem, NewsItemList };
|
||||||
export { createEmptyNewsItem };
|
export { createEmptyNewsItem };
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
|||||||
|
|
||||||
import { markRaw } from 'vue';
|
import { markRaw } from 'vue';
|
||||||
|
|
||||||
import { WxAccountSelect } from '#/views/mp/components/wx-account-select';
|
import { WxAccountSelect } from '#/views/mp/components';
|
||||||
|
|
||||||
/** 获取表格列配置 */
|
/** 获取表格列配置 */
|
||||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ import { formatDate2 } from '@vben/utils';
|
|||||||
import { Button } from 'ant-design-vue';
|
import { Button } from 'ant-design-vue';
|
||||||
|
|
||||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||||
import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
|
import { WxVideoPlayer } from '#/views/mp/components';
|
||||||
|
|
||||||
// TODO @dylan：vue 组件名小写 + 中划线
|
// TODO @dylan：vue 组件名小写 + 中划线
|
||||||
|
|
||||||
@@ -87,7 +87,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
|||||||
isHover: true,
|
isHover: true,
|
||||||
},
|
},
|
||||||
showOverflow: 'tooltip',
|
showOverflow: 'tooltip',
|
||||||
} as VxeTableGridOptions<any>, // TODO @dylan：这里有个告警哈；
|
} as VxeTableGridOptions<any>, // TODO @dylan：这里有个告警哈；
|
||||||
});
|
});
|
||||||
|
|
||||||
function handleDownload(url: string) {
|
function handleDownload(url: string) {
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ import { formatDate2 } from '@vben/utils';
|
|||||||
import { Button } from 'ant-design-vue';
|
import { Button } from 'ant-design-vue';
|
||||||
|
|
||||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||||
import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
|
import { WxVoicePlayer } from '#/views/mp/components';
|
||||||
|
|
||||||
// TODO @dylan：vue 组件名小写 + 中划线
|
// TODO @dylan：vue 组件名小写 + 中划线
|
||||||
|
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ import {
|
|||||||
} from 'ant-design-vue';
|
} from 'ant-design-vue';
|
||||||
|
|
||||||
import * as MpMaterialApi from '#/api/mp/material';
|
import * as MpMaterialApi from '#/api/mp/material';
|
||||||
import { WxAccountSelect } from '#/views/mp/components/wx-account-select';
|
import { WxAccountSelect } from '#/views/mp/components';
|
||||||
|
|
||||||
import ImageTable from './components/ImageTable.vue';
|
import ImageTable from './components/ImageTable.vue';
|
||||||
import { UploadType } from './components/upload';
|
import { UploadType } from './components/upload';
|
||||||
|
|||||||
@@ -14,9 +14,7 @@ import {
|
|||||||
Select,
|
Select,
|
||||||
} from 'ant-design-vue';
|
} from 'ant-design-vue';
|
||||||
|
|
||||||
import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
|
import { WxMaterialSelect, WxNews, WxReply } from '#/views/mp/components';
|
||||||
import { WxNews } from '#/views/mp/components/wx-news';
|
|
||||||
import { WxReplySelect } from '#/views/mp/components/wx-reply';
|
|
||||||
|
|
||||||
import menuOptions from './menuOptions';
|
import menuOptions from './menuOptions';
|
||||||
|
|
||||||
@@ -218,7 +216,7 @@ function deleteMaterial() {
|
|||||||
class="configur-content"
|
class="configur-content"
|
||||||
v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
|
v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
|
||||||
>
|
>
|
||||||
<WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" />
|
<WxReply v-if="hackResetWxReplySelect" v-model="menu.reply" />
|
||||||
</div>
|
</div>
|
||||||
<!-- TODO @hw：扫码回复，这个帮忙看看，是不是有点问题。= = 好像 vue3 + element-plus 就有点问题； -->
|
<!-- TODO @hw：扫码回复，这个帮忙看看，是不是有点问题。= = 好像 vue3 + element-plus 就有点问题； -->
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import { handleTree } from '@vben/utils';
|
|||||||
import { Button, Form, message } from 'ant-design-vue';
|
import { Button, Form, message } from 'ant-design-vue';
|
||||||
|
|
||||||
import { deleteMenu, getMenuList, saveMenu } from '#/api/mp/menu';
|
import { deleteMenu, getMenuList, saveMenu } from '#/api/mp/menu';
|
||||||
import { WxAccountSelect } from '#/views/mp/components/wx-account-select';
|
import { WxAccountSelect } from '#/views/mp/components';
|
||||||
import { MenuEditor, MenuPreviewer } from '#/views/mp/menu/components';
|
import { MenuEditor, MenuPreviewer } from '#/views/mp/menu/components';
|
||||||
import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data';
|
import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data';
|
||||||
|
|
||||||
|
|||||||
@@ -8,12 +8,14 @@ import { formatDate2 } from '@vben/utils';
|
|||||||
import { Button, Image, Tag } from 'ant-design-vue';
|
import { Button, Image, Tag } from 'ant-design-vue';
|
||||||
|
|
||||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||||
import { WxLocation } from '#/views/mp/components/wx-location';
|
import {
|
||||||
import { MsgType } from '#/views/mp/components/wx-msg/types';
|
MsgType,
|
||||||
import { WxMusic } from '#/views/mp/components/wx-music';
|
WxLocation,
|
||||||
import { WxNews } from '#/views/mp/components/wx-news';
|
WxMusic,
|
||||||
import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
|
WxNews,
|
||||||
import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
|
WxVideoPlayer,
|
||||||
|
WxVoicePlayer,
|
||||||
|
} from '#/views/mp/components';
|
||||||
|
|
||||||
// TODO @dylan：vue 组件名小写 + 中划线
|
// TODO @dylan：vue 组件名小写 + 中划线
|
||||||
|
|
||||||
|
|||||||
@@ -18,9 +18,7 @@ import {
|
|||||||
} from 'ant-design-vue';
|
} from 'ant-design-vue';
|
||||||
|
|
||||||
import { getMessagePage } from '#/api/mp/message';
|
import { getMessagePage } from '#/api/mp/message';
|
||||||
import { WxAccountSelect } from '#/views/mp/components/wx-account-select';
|
import { MsgType, WxAccountSelect, WxMsg } from '#/views/mp/components';
|
||||||
import { WxMsg } from '#/views/mp/components/wx-msg';
|
|
||||||
import { MsgType } from '#/views/mp/components/wx-msg/types';
|
|
||||||
|
|
||||||
import MessageTable from './MessageTable.vue';
|
import MessageTable from './MessageTable.vue';
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user