feat: remove mp modules
This commit is contained in:
xingyu4j
@@ -1,2 +0,0 @@
|
|||||||
// TODO @hw：1）要不统一在 web-antd/src/views/mp/modules 下，搞个 index.ts 去 import 所有；2）这个包名，需要改成 componentns，不是 modules 哈；3）wx 前缀都可以去掉；例如说 account-select.vue
|
|
||||||
export { default as WxAccountSelect } from './wx-account-select.vue';
|
|
||||||
@@ -1,123 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { MpAccountApi } from '#/api/mp/account';
|
|
||||||
|
|
||||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
|
||||||
import { useRouter } from 'vue-router';
|
|
||||||
|
|
||||||
import { useTabs } from '@vben/hooks';
|
|
||||||
|
|
||||||
import { message, Select, SelectOption } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { getSimpleAccountList } from '#/api/mp/account';
|
|
||||||
|
|
||||||
// TODO @hw：【可讨论】如果这个组件，有办法调整下，让接入的 yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/draft/index.vue 判断简单点，也可以。
|
|
||||||
|
|
||||||
defineOptions({ name: 'WxAccountSelect' });
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
modelValue?: number;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'change', id: number, name: string): void;
|
|
||||||
(e: 'update:modelValue', id: number): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const { closeCurrentTab } = useTabs(); // 视图操作
|
|
||||||
const { push } = useRouter();
|
|
||||||
|
|
||||||
const account: MpAccountApi.AccountSimple = reactive({
|
|
||||||
id: -1,
|
|
||||||
name: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
const accountList = ref<MpAccountApi.AccountSimple[]>([]);
|
|
||||||
|
|
||||||
// 计算当前选中的 ID，优先使用 modelValue（表单绑定），否则使用内部 account.id
|
|
||||||
const currentId = computed({
|
|
||||||
get: () => {
|
|
||||||
// 如果外部传入了 modelValue，优先使用外部的值
|
|
||||||
if (props.modelValue !== undefined && props.modelValue !== null) {
|
|
||||||
return props.modelValue;
|
|
||||||
}
|
|
||||||
return account.id;
|
|
||||||
},
|
|
||||||
set: (value: number) => {
|
|
||||||
// 更新内部状态
|
|
||||||
account.id = value;
|
|
||||||
// 同步到外部（表单系统）
|
|
||||||
emit('update:modelValue', value);
|
|
||||||
// 触发 change 事件（保持向后兼容）
|
|
||||||
const found = accountList.value.find(
|
|
||||||
(v: MpAccountApi.AccountSimple) => v.id === value,
|
|
||||||
);
|
|
||||||
if (found) {
|
|
||||||
account.name = found.name;
|
|
||||||
emit('change', value, found.name);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// 监听外部 modelValue 变化，同步到内部状态
|
|
||||||
watch(
|
|
||||||
() => props.modelValue,
|
|
||||||
(newValue) => {
|
|
||||||
if (
|
|
||||||
newValue !== undefined &&
|
|
||||||
newValue !== null &&
|
|
||||||
newValue !== account.id
|
|
||||||
) {
|
|
||||||
account.id = newValue;
|
|
||||||
const found = accountList.value.find(
|
|
||||||
(v: MpAccountApi.AccountSimple) => v.id === newValue,
|
|
||||||
);
|
|
||||||
if (found) {
|
|
||||||
account.name = found.name;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
/** 查询公众号列表 */
|
|
||||||
async function handleQuery() {
|
|
||||||
accountList.value = await getSimpleAccountList();
|
|
||||||
if (accountList.value.length === 0) {
|
|
||||||
message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
|
|
||||||
await closeCurrentTab();
|
|
||||||
await push({ name: 'MpAccount' });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果外部没有传入值（modelValue 为空），默认选中第一个
|
|
||||||
if (props.modelValue === undefined || props.modelValue === null) {
|
|
||||||
const firstAccount = accountList.value[0];
|
|
||||||
if (firstAccount) {
|
|
||||||
currentId.value = firstAccount.id;
|
|
||||||
account.name = firstAccount.name;
|
|
||||||
emit('change', firstAccount.id, firstAccount.name);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 如果外部有值，同步到内部状态
|
|
||||||
const found = accountList.value.find(
|
|
||||||
(v: MpAccountApi.AccountSimple) => v.id === props.modelValue,
|
|
||||||
);
|
|
||||||
if (found) {
|
|
||||||
account.id = props.modelValue;
|
|
||||||
account.name = found.name;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 初始化 */
|
|
||||||
onMounted(() => {
|
|
||||||
handleQuery();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Select v-model:value="currentId" placeholder="请选择公众号" class="w-full">
|
|
||||||
<SelectOption v-for="item in accountList" :key="item.id" :value="item.id">
|
|
||||||
{{ item.name }}
|
|
||||||
</SelectOption>
|
|
||||||
</Select>
|
|
||||||
</template>
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default as WxLocation } from './wx-location.vue';
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
<!--
|
|
||||||
【微信消息 - 定位】TODO @Dhb52 目前未启用；TODO @芋艿：需要测试下；
|
|
||||||
-->
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
|
|
||||||
import { Col, Row } from 'ant-design-vue';
|
|
||||||
|
|
||||||
defineOptions({ name: 'WxLocation' });
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
locationX: {
|
|
||||||
required: true,
|
|
||||||
type: Number,
|
|
||||||
},
|
|
||||||
locationY: {
|
|
||||||
required: true,
|
|
||||||
type: Number,
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
// 地名
|
|
||||||
required: true,
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
qqMapKey: {
|
|
||||||
// TODO @芋艿：是不是要换成全局的读取？
|
|
||||||
// QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
|
|
||||||
required: false,
|
|
||||||
type: String,
|
|
||||||
default: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // 需要自定义
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
locationX: props.locationX,
|
|
||||||
locationY: props.locationY,
|
|
||||||
label: props.label,
|
|
||||||
qqMapKey: props.qqMapKey,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
:href="`https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${
|
|
||||||
locationY
|
|
||||||
}&pointy=${locationX}&name=${label}&ref=yudao`"
|
|
||||||
>
|
|
||||||
<Col>
|
|
||||||
<Row>
|
|
||||||
<img
|
|
||||||
:src="`https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${
|
|
||||||
locationX
|
|
||||||
},${locationY}&key=${qqMapKey}&size=250*180`"
|
|
||||||
/>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<IconifyIcon icon="lucide:map-pin" />
|
|
||||||
{{ label }}
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
export * from './types';
|
|
||||||
|
|
||||||
export { default as WxMaterialSelect } from './wx-material-select.vue';
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
export enum NewsType {
|
|
||||||
Draft = '2',
|
|
||||||
Published = '1',
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO @hw：应该要用到？在 material-select.vue 里？
|
|
||||||
export enum MaterialType {
|
|
||||||
Image = 'image',
|
|
||||||
News = 'news',
|
|
||||||
Video = 'video',
|
|
||||||
Voice = 'voice',
|
|
||||||
}
|
|
||||||
@@ -1,282 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { onMounted, reactive, ref } from 'vue';
|
|
||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
import { formatTime } from '@vben/utils';
|
|
||||||
|
|
||||||
import { Button, Pagination, Row, Spin, Table } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { getDraftPage } from '#/api/mp/draft';
|
|
||||||
import { getFreePublishPage } from '#/api/mp/freePublish';
|
|
||||||
import { getMaterialPage } from '#/api/mp/material';
|
|
||||||
import { WxNews } from '#/views/mp/modules/wx-news';
|
|
||||||
import { WxVideoPlayer } from '#/views/mp/modules/wx-video-play';
|
|
||||||
import { WxVoicePlayer } from '#/views/mp/modules/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(['selectMaterial']);
|
|
||||||
|
|
||||||
const loading = ref(false); // 遮罩层
|
|
||||||
const total = ref(0); // 总条数
|
|
||||||
const list = ref<any[]>([]); // 数据列表
|
|
||||||
const queryParams = reactive({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
accountId: props.accountId,
|
|
||||||
}); // 查询参数
|
|
||||||
|
|
||||||
/** 选择素材 */
|
|
||||||
function selectMaterialFun(item: any) {
|
|
||||||
emit('selectMaterial', item);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 获取分页数据 */
|
|
||||||
async function getPage() {
|
|
||||||
loading.value = true;
|
|
||||||
try {
|
|
||||||
if (props.type === 'news' && props.newsType === NewsType.Published) {
|
|
||||||
// 【图文】+ 【已发布】
|
|
||||||
await getFreePublishPageFun();
|
|
||||||
} else if (props.type === 'news' && props.newsType === NewsType.Draft) {
|
|
||||||
// 【图文】+ 【草稿】
|
|
||||||
await getDraftPageFun();
|
|
||||||
} else {
|
|
||||||
// 【素材】
|
|
||||||
await getMaterialPageFun();
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
loading.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 获取素材分页 */
|
|
||||||
async function getMaterialPageFun() {
|
|
||||||
const data = await getMaterialPage({
|
|
||||||
...queryParams,
|
|
||||||
type: props.type,
|
|
||||||
});
|
|
||||||
list.value = data.list;
|
|
||||||
total.value = data.total;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 获取已发布图文分页 */
|
|
||||||
async function getFreePublishPageFun() {
|
|
||||||
const data = await getFreePublishPage(queryParams);
|
|
||||||
data.list.forEach((item: any) => {
|
|
||||||
const articles = item.content.newsItem;
|
|
||||||
articles.forEach((article: any) => {
|
|
||||||
article.picUrl = article.thumbUrl;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
list.value = data.list;
|
|
||||||
total.value = data.total;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 获取草稿图文分页 */
|
|
||||||
async function getDraftPageFun() {
|
|
||||||
const data = await getDraftPage(queryParams);
|
|
||||||
data.list.forEach((draft: any) => {
|
|
||||||
const articles = draft.content.newsItem;
|
|
||||||
articles.forEach((article: any) => {
|
|
||||||
article.picUrl = article.thumbUrl;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
list.value = data.list;
|
|
||||||
total.value = data.total;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO @hw：改成 grid 风格；
|
|
||||||
onMounted(async () => {
|
|
||||||
getPage();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="pb-30px">
|
|
||||||
<!-- 类型：image -->
|
|
||||||
<div v-if="props.type === 'image'">
|
|
||||||
<Spin :spinning="loading">
|
|
||||||
<div class="waterfall">
|
|
||||||
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
|
|
||||||
<img class="material-img" :src="item.url" />
|
|
||||||
<p class="item-name">{{ item.name }}</p>
|
|
||||||
<Row class="ope-row">
|
|
||||||
<Button type="primary" @click="selectMaterialFun(item)">
|
|
||||||
选择
|
|
||||||
<IconifyIcon icon="lucide:circle-check" />
|
|
||||||
</Button>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Spin>
|
|
||||||
<!-- 分页组件 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:current="queryParams.pageNo"
|
|
||||||
v-model:page-size="queryParams.pageSize"
|
|
||||||
@change="getMaterialPageFun"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- 类型：voice -->
|
|
||||||
<div v-else-if="props.type === 'voice'">
|
|
||||||
<!-- 列表 -->
|
|
||||||
<Spin :spinning="loading">
|
|
||||||
<Table :data-source="list">
|
|
||||||
<Table.Column title="编号" data-index="mediaId" align="center" />
|
|
||||||
<Table.Column title="文件名" data-index="name" align="center" />
|
|
||||||
<Table.Column title="语音" align="center">
|
|
||||||
<template #default="{ record }">
|
|
||||||
<WxVoicePlayer :url="record.url" />
|
|
||||||
</template>
|
|
||||||
</Table.Column>
|
|
||||||
<Table.Column title="上传时间" align="center" width="180">
|
|
||||||
<template #default="{ record }">
|
|
||||||
{{ formatTime(record.createTime, 'YYYY-MM-DD HH:mm:ss') }}
|
|
||||||
</template>
|
|
||||||
</Table.Column>
|
|
||||||
<Table.Column title="操作" align="center" fixed="right">
|
|
||||||
<template #default="{ record }">
|
|
||||||
<Button type="link" @click="selectMaterialFun(record)">
|
|
||||||
选择
|
|
||||||
<IconifyIcon icon="lucide:plus" />
|
|
||||||
</Button>
|
|
||||||
</template>
|
|
||||||
</Table.Column>
|
|
||||||
</Table>
|
|
||||||
</Spin>
|
|
||||||
<!-- 分页组件 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:current="queryParams.pageNo"
|
|
||||||
v-model:page-size="queryParams.pageSize"
|
|
||||||
@change="getPage"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- 类型：video -->
|
|
||||||
<div v-else-if="props.type === 'video'">
|
|
||||||
<!-- 列表 -->
|
|
||||||
<Spin :spinning="loading">
|
|
||||||
<Table :data-source="list">
|
|
||||||
<Table.Column title="编号" data-index="mediaId" align="center" />
|
|
||||||
<Table.Column title="文件名" data-index="name" align="center" />
|
|
||||||
<Table.Column title="标题" data-index="title" align="center" />
|
|
||||||
<Table.Column title="介绍" data-index="introduction" align="center" />
|
|
||||||
<Table.Column title="视频" align="center">
|
|
||||||
<template #default="{ record }">
|
|
||||||
<WxVideoPlayer :url="record.url" />
|
|
||||||
</template>
|
|
||||||
</Table.Column>
|
|
||||||
<Table.Column title="上传时间" align="center" width="180">
|
|
||||||
<template #default="{ record }">
|
|
||||||
{{ formatTime(record.createTime, 'YYYY-MM-DD HH:mm:ss') }}
|
|
||||||
</template>
|
|
||||||
</Table.Column>
|
|
||||||
<Table.Column title="操作" align="center" fixed="right">
|
|
||||||
<template #default="{ record }">
|
|
||||||
<Button type="link" @click="selectMaterialFun(record)">
|
|
||||||
选择
|
|
||||||
<IconifyIcon icon="lucide:circle-plus" />
|
|
||||||
</Button>
|
|
||||||
</template>
|
|
||||||
</Table.Column>
|
|
||||||
</Table>
|
|
||||||
</Spin>
|
|
||||||
<!-- 分页组件 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:current="queryParams.pageNo"
|
|
||||||
v-model:page-size="queryParams.pageSize"
|
|
||||||
@change="getMaterialPageFun"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- 类型：news -->
|
|
||||||
<div v-else-if="props.type === 'news'">
|
|
||||||
<Spin :spinning="loading">
|
|
||||||
<div class="waterfall">
|
|
||||||
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
|
|
||||||
<div v-if="item.content && item.content.newsItem">
|
|
||||||
<WxNews :articles="item.content.newsItem" />
|
|
||||||
<Row class="ope-row">
|
|
||||||
<Button type="primary" @click="selectMaterialFun(item)">
|
|
||||||
选择
|
|
||||||
<IconifyIcon icon="lucide:circle-check" />
|
|
||||||
</Button>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Spin>
|
|
||||||
<!-- 分页组件 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:current="queryParams.pageNo"
|
|
||||||
v-model:page-size="queryParams.pageSize"
|
|
||||||
@change="getMaterialPageFun"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
/** TODO @hw：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-gap: 10px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
column-count: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.waterfall-item {
|
|
||||||
padding: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
break-inside: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,116 +0,0 @@
|
|||||||
.avue-card {
|
|
||||||
&__item {
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 200px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-feature-settings: 'tnum';
|
|
||||||
font-variant: tabular-nums;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: rgb(0 0 0 / 65%);
|
|
||||||
cursor: pointer;
|
|
||||||
list-style: none;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #e8e8e8;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: rgb(0 0 0 / 9%);
|
|
||||||
box-shadow: 0 2px 8px rgb(0 0 0 / 9%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--add {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 16px;
|
|
||||||
color: rgb(0 0 0 / 45%);
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px dashed #000;
|
|
||||||
border-color: #d9d9d9;
|
|
||||||
border-radius: 2px;
|
|
||||||
|
|
||||||
i {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #40a9ff;
|
|
||||||
background-color: #fff;
|
|
||||||
border-color: #40a9ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__body {
|
|
||||||
display: flex;
|
|
||||||
padding: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__detail {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
margin-right: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 48px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: rgb(0 0 0 / 85%);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__info {
|
|
||||||
display: -webkit-box;
|
|
||||||
height: 64px;
|
|
||||||
overflow: hidden;
|
|
||||||
-webkit-line-clamp: 3;
|
|
||||||
color: rgb(0 0 0 / 45%);
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__menu {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
color: rgb(0 0 0 / 45%);
|
|
||||||
text-align: center;
|
|
||||||
background: #f7f9fa;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** joolun 额外加的 */
|
|
||||||
.avue-comment__main {
|
|
||||||
flex: unset !important;
|
|
||||||
margin: 0 8px !important;
|
|
||||||
border-radius: 5px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avue-comment__header {
|
|
||||||
border-top-left-radius: 5px;
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avue-comment__body {
|
|
||||||
border-bottom-right-radius: 5px;
|
|
||||||
border-bottom-left-radius: 5px;
|
|
||||||
}
|
|
||||||
@@ -1,109 +0,0 @@
|
|||||||
/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */
|
|
||||||
.avue-comment {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
|
|
||||||
&--reverse {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
|
|
||||||
.avue-comment__main {
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
right: -8px;
|
|
||||||
left: auto;
|
|
||||||
border-width: 8px 0 8px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
border-left-color: #dedede;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
margin-right: 1px;
|
|
||||||
margin-left: auto;
|
|
||||||
border-left-color: #f8f8f8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
vertical-align: middle;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 5px 15px;
|
|
||||||
background: #f8f8f8;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__author {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
margin: 0 20px;
|
|
||||||
border: 1px solid #dedede;
|
|
||||||
border-radius: 2px;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 100%;
|
|
||||||
left: -8px;
|
|
||||||
display: block;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
content: ' ';
|
|
||||||
border-color: transparent;
|
|
||||||
border-style: solid solid outset;
|
|
||||||
border-width: 8px 8px 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
z-index: 1;
|
|
||||||
border-right-color: #dedede;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
z-index: 2;
|
|
||||||
margin-left: 1px;
|
|
||||||
border-right-color: #f8f8f8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__body {
|
|
||||||
padding: 15px;
|
|
||||||
overflow: hidden;
|
|
||||||
font-family:
|
|
||||||
'Segoe UI', 'Lucida Grande', Helvetica, Arial, 'Microsoft YaHei',
|
|
||||||
FreeSans, Arimo, 'Droid Sans', 'wenquanyi micro hei', 'Hiragino Sans GB',
|
|
||||||
'Hiragino Sans GB W3', FontAwesome, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
padding: 1px 0 1px 15px;
|
|
||||||
margin: 0;
|
|
||||||
font-family:
|
|
||||||
Georgia, 'Times New Roman', Times, Kai, 'Kaiti SC', KaiTi, BiauKai,
|
|
||||||
FontAwesome, serif;
|
|
||||||
border-left: 4px solid #ddd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
export * from './types';
|
|
||||||
|
|
||||||
export { default as WxMsg } from './wx-msg.vue';
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
import { Tag } from 'ant-design-vue';
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
item: any;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const item = ref(props.item);
|
|
||||||
</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>
|
|
||||||
<!-- @hw：看看能不能处理下 linter 报错哈； -->
|
|
||||||
<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-if="item.event === 'SCAN'">
|
|
||||||
<Tag>扫码</Tag>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<Tag color="error">未知事件类型</Tag>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { User } from './types';
|
|
||||||
|
|
||||||
import { formatDateTime } from '@vben/utils';
|
|
||||||
|
|
||||||
import avatarWechat from '#/assets/imgs/wechat.png';
|
|
||||||
|
|
||||||
import Msg from './msg.vue';
|
|
||||||
|
|
||||||
// 确保 User 类型被识别为已使用
|
|
||||||
type PropsUser = User;
|
|
||||||
|
|
||||||
defineOptions({ name: 'MsgList' });
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
accountId: number;
|
|
||||||
list: any[];
|
|
||||||
user: PropsUser;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const SendFrom = {
|
|
||||||
MpBot: 2,
|
|
||||||
User: 1,
|
|
||||||
} as const; // 使用常量对象替代枚举，避免 linter 误报
|
|
||||||
|
|
||||||
type SendFromType = (typeof SendFrom)[keyof typeof SendFrom];
|
|
||||||
|
|
||||||
// 显式引用枚举成员供模板使用
|
|
||||||
const MpBotValue = SendFrom.MpBot;
|
|
||||||
const UserValue = SendFrom.User;
|
|
||||||
|
|
||||||
const getAvatar = (sendFrom: SendFromType) =>
|
|
||||||
sendFrom === UserValue ? props.user.avatar : avatarWechat;
|
|
||||||
|
|
||||||
const getNickname = (sendFrom: SendFromType) =>
|
|
||||||
sendFrom === UserValue ? props.user.nickname : '公众号';
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div v-for="item in props.list" :key="item.id">
|
|
||||||
<div
|
|
||||||
class="mb-[30px] flex items-start"
|
|
||||||
:class="{ 'flex-row-reverse': item.sendFrom === MpBotValue }"
|
|
||||||
>
|
|
||||||
<div class="w-20 text-center">
|
|
||||||
<img
|
|
||||||
:src="getAvatar(item.sendFrom)"
|
|
||||||
class="box-border h-12 w-12 rounded-full border border-transparent align-middle"
|
|
||||||
/>
|
|
||||||
<div class="text-sm font-bold text-[#999]">
|
|
||||||
{{ getNickname(item.sendFrom) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="relative mx-5 flex-1 rounded-[5px] border border-[#dedede]">
|
|
||||||
<div
|
|
||||||
class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
|
|
||||||
>
|
|
||||||
<div class="avue-comment__create_time">
|
|
||||||
{{ formatDateTime(item.createTime) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="overflow-hidden rounded-b-[5px] bg-white px-[15px] py-[15px] text-sm text-[#333]"
|
|
||||||
:style="item.sendFrom === MpBotValue ? 'background: #6BED72;' : ''"
|
|
||||||
>
|
|
||||||
<Msg :item="item" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
|
|
||||||
|
|
||||||
/** TODO @hw：这里有没办法重构掉哈。辛苦~~~ */
|
|
||||||
@import url('../comment.scss');
|
|
||||||
@import url('../card.scss');
|
|
||||||
</style>
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
|
|
||||||
import { WxLocation } from '#/views/mp/modules/wx-location';
|
|
||||||
import { WxMusic } from '#/views/mp/modules/wx-music';
|
|
||||||
import { WxNews } from '#/views/mp/modules/wx-news';
|
|
||||||
import { WxVideoPlayer } from '#/views/mp/modules/wx-video-play';
|
|
||||||
import { WxVoicePlayer } from '#/views/mp/modules/wx-voice-play';
|
|
||||||
|
|
||||||
import MsgEvent from './msg-event.vue';
|
|
||||||
import { MsgType } from './types';
|
|
||||||
|
|
||||||
defineOptions({ name: 'Msg' });
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
item: any;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const item = ref<any>(props.item);
|
|
||||||
</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 target="_blank" :href="item.mediaUrl">
|
|
||||||
<img :src="item.mediaUrl" class="w-[100px]" />
|
|
||||||
</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-1">
|
|
||||||
<a target="_blank" :href="item.url">
|
|
||||||
<div
|
|
||||||
class="mb-3 text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]"
|
|
||||||
>
|
|
||||||
<IconifyIcon icon="lucide:link" />{{ item.title }}
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<div
|
|
||||||
class="h-auto overflow-hidden text-[rgba(0,0,0,0.45)]"
|
|
||||||
style="height: unset"
|
|
||||||
>
|
|
||||||
{{ item.description }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.Location">
|
|
||||||
<WxLocation
|
|
||||||
:label="item.label"
|
|
||||||
:location-y="item.locationY"
|
|
||||||
:location-x="item.locationX"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="item.type === MsgType.News" 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,17 +0,0 @@
|
|||||||
export enum MsgType {
|
|
||||||
Event = 'event',
|
|
||||||
Image = 'image',
|
|
||||||
Link = 'link',
|
|
||||||
Location = 'location',
|
|
||||||
Music = 'music',
|
|
||||||
News = 'news',
|
|
||||||
Text = 'text',
|
|
||||||
Video = 'video',
|
|
||||||
Voice = 'voice',
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface User {
|
|
||||||
nickname: string;
|
|
||||||
avatar: string;
|
|
||||||
accountId: number;
|
|
||||||
}
|
|
||||||
@@ -1,197 +0,0 @@
|
|||||||
<!--
|
|
||||||
- Copyright (C) 2018-2019
|
|
||||||
- All rights reserved, Designed By www.joolun.com
|
|
||||||
芋道源码：
|
|
||||||
① 移除暂时用不到的 websocket
|
|
||||||
② 代码优化，补充注释，提升阅读性
|
|
||||||
-->
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { User } from './types';
|
|
||||||
|
|
||||||
import type { Reply } from '#/views/mp/modules/wx-reply';
|
|
||||||
|
|
||||||
import { nextTick, onMounted, reactive, ref, unref } from 'vue';
|
|
||||||
|
|
||||||
import { Button, message, Spin } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { getMessagePage, sendMessage } from '#/api/mp/message';
|
|
||||||
import { getUser } from '#/api/mp/user';
|
|
||||||
import profile from '#/assets/imgs/profile.jpg';
|
|
||||||
import { ReplyType, WxReplySelect } from '#/views/mp/modules/wx-reply';
|
|
||||||
|
|
||||||
import MsgList from './msg-list.vue';
|
|
||||||
|
|
||||||
defineOptions({ name: 'WxMsg' });
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
userId: {
|
|
||||||
type: Number,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const accountId = ref(-1); // 公众号ID，需要通过userId初始化
|
|
||||||
const loading = ref(false); // 消息列表是否正在加载中
|
|
||||||
const hasMore = ref(true); // 是否可以加载更多
|
|
||||||
const list = ref<any[]>([]); // 消息列表
|
|
||||||
const queryParams = reactive({
|
|
||||||
pageNo: 1, // 当前页数
|
|
||||||
pageSize: 14, // 每页显示多少条
|
|
||||||
accountId,
|
|
||||||
});
|
|
||||||
|
|
||||||
const user: User = reactive({
|
|
||||||
nickname: '用户', // 由于微信不再提供昵称，直接使用"用户"展示
|
|
||||||
avatar: profile,
|
|
||||||
accountId, // 公众号账号编号
|
|
||||||
});
|
|
||||||
|
|
||||||
// ========= 消息发送 =========
|
|
||||||
const sendLoading = ref(false); // 发送消息是否加载中
|
|
||||||
const reply = ref<Reply>({
|
|
||||||
type: ReplyType.Text,
|
|
||||||
accountId: -1,
|
|
||||||
articles: [],
|
|
||||||
}); // 微信发送消息
|
|
||||||
|
|
||||||
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;
|
|
||||||
// API 返回的数据可能包含 headImageUrl，但类型定义中没有，使用类型断言
|
|
||||||
const userData = data as typeof data & { headImageUrl?: string };
|
|
||||||
user.avatar =
|
|
||||||
userData.headImageUrl && userData.headImageUrl.length > 0
|
|
||||||
? userData.headImageUrl
|
|
||||||
: user.avatar;
|
|
||||||
accountId.value = data.accountId;
|
|
||||||
reply.value.accountId = data.accountId;
|
|
||||||
|
|
||||||
refreshChange();
|
|
||||||
});
|
|
||||||
|
|
||||||
/** 执行发送 */
|
|
||||||
async function sendMsg() {
|
|
||||||
if (!unref(reply)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 公众号限制：客服消息，公众号只允许发送一条
|
|
||||||
if (
|
|
||||||
reply.value.type === ReplyType.News &&
|
|
||||||
reply.value.articles &&
|
|
||||||
reply.value.articles.length > 1
|
|
||||||
) {
|
|
||||||
reply.value.articles = [reply.value.articles[0]];
|
|
||||||
message.success('图文消息条数限制在 1 条以内，已默认发送第一条');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 注意：sendMessage API 需要 openid，但这里传入的是 userId
|
|
||||||
// 这可能是后端 API 的特殊处理，使用类型断言绕过类型检查
|
|
||||||
const data = await sendMessage({
|
|
||||||
userId: props.userId,
|
|
||||||
...reply.value,
|
|
||||||
} 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(
|
|
||||||
{
|
|
||||||
pageNo: page.pageNo,
|
|
||||||
pageSize: page.pageSize,
|
|
||||||
userId: props.userId,
|
|
||||||
accountId: page.accountId,
|
|
||||||
},
|
|
||||||
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>
|
|
||||||
<ContentWrap>
|
|
||||||
<Spin :spinning="loading">
|
|
||||||
<div class="bg-background ml-2 mr-2 h-12 overflow-auto" ref="msgDivRef">
|
|
||||||
<!-- 加载更多 -->
|
|
||||||
<div v-if="!loading">
|
|
||||||
<div
|
|
||||||
class="cursor-pointer py-5 text-center"
|
|
||||||
v-if="hasMore"
|
|
||||||
@click="loadMore"
|
|
||||||
>
|
|
||||||
<span class="text-foreground">点击加载更多</span>
|
|
||||||
</div>
|
|
||||||
<div class="py-5 text-center" v-if="!hasMore">
|
|
||||||
<span class="text-foreground">没有更多了</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 消息列表 -->
|
|
||||||
<MsgList :list="list" :account-id="accountId" :user="user" />
|
|
||||||
</div>
|
|
||||||
</Spin>
|
|
||||||
|
|
||||||
<Spin :spinning="sendLoading">
|
|
||||||
<div class="p-[10px]">
|
|
||||||
<WxReplySelect ref="replySelectRef" v-model="reply" />
|
|
||||||
<Button type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
|
|
||||||
发送(S)
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Spin>
|
|
||||||
</ContentWrap>
|
|
||||||
</template>
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default as WxMusic } from './wx-music.vue';
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
<!--
|
|
||||||
【微信消息 - 音乐】
|
|
||||||
-->
|
|
||||||
<script lang="ts" setup>
|
|
||||||
defineOptions({ name: 'WxMusic' });
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
title: {
|
|
||||||
required: false,
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
description: {
|
|
||||||
required: false,
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
musicUrl: {
|
|
||||||
required: false,
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
hqMusicUrl: {
|
|
||||||
required: false,
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
thumbMediaUrl: {
|
|
||||||
required: true,
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
musicUrl: props.musicUrl,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
:href="hqMusicUrl ? hqMusicUrl : musicUrl"
|
|
||||||
style="text-decoration: none"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="avue-card__body"
|
|
||||||
style="padding: 10px; background-color: #fff; border-radius: 5px"
|
|
||||||
>
|
|
||||||
<div class="avue-card__avatar">
|
|
||||||
<img :src="thumbMediaUrl" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="avue-card__detail">
|
|
||||||
<div class="avue-card__title" style="margin-bottom: unset">
|
|
||||||
{{ title }}
|
|
||||||
</div>
|
|
||||||
<div class="avue-card__info" style="height: unset">
|
|
||||||
{{ description }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
/** TODO @hw：这里有没办法重构掉哈。辛苦~~~ */
|
|
||||||
|
|
||||||
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss */
|
|
||||||
@import url('../wx-msg/card.scss');
|
|
||||||
</style>
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default as WxNews } from './wx-news.vue';
|
|
||||||
@@ -1,127 +0,0 @@
|
|||||||
<!--
|
|
||||||
- Copyright (C) 2018-2019
|
|
||||||
- All rights reserved, Designed By www.joolun.com
|
|
||||||
【微信消息 - 图文】
|
|
||||||
芋道源码：
|
|
||||||
① 代码优化，补充注释，提升阅读性
|
|
||||||
-->
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { Image } from 'ant-design-vue';
|
|
||||||
|
|
||||||
defineOptions({ name: '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 || article.thumbUrl"
|
|
||||||
class="material-img"
|
|
||||||
:preview="false"
|
|
||||||
style="width: 100%; height: 120px"
|
|
||||||
/>
|
|
||||||
<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 || article.thumbUrl"
|
|
||||||
class="material-img"
|
|
||||||
height="100%"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
/** TODO @hw：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,2 +0,0 @@
|
|||||||
export * from './types';
|
|
||||||
export { default as WxReplySelect } from './wx-reply.vue';
|
|
||||||
@@ -1,154 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { UploadFile } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import type { Reply } from './types';
|
|
||||||
|
|
||||||
import { computed, reactive, ref } from 'vue';
|
|
||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
import { useAccessStore } from '@vben/stores';
|
|
||||||
|
|
||||||
import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
|
|
||||||
import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
modelValue: Reply;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:modelValue', v: Reply): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
|
|
||||||
const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
|
|
||||||
const reply = computed<Reply>({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
set: (val) => emit('update:modelValue', val),
|
|
||||||
});
|
|
||||||
|
|
||||||
const showDialog = ref(false);
|
|
||||||
const fileList = ref([]);
|
|
||||||
const uploadData = reactive({
|
|
||||||
accountId: reply.value.accountId,
|
|
||||||
type: 'image',
|
|
||||||
title: '',
|
|
||||||
introduction: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
/** 图片上传前校验 */
|
|
||||||
function beforeImageUpload(file: UploadFile) {
|
|
||||||
return useBeforeUpload(UploadType.Image, 2)(file as any);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 上传成功 */
|
|
||||||
function onUploadSuccess(info: any) {
|
|
||||||
const res = info.response || info;
|
|
||||||
if (res.code !== 0) {
|
|
||||||
message.error(`上传出错：${res.msg}`);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清空上传时的各种数据
|
|
||||||
fileList.value = [];
|
|
||||||
uploadData.title = '';
|
|
||||||
uploadData.introduction = '';
|
|
||||||
|
|
||||||
// 上传好的文件，本质是个素材，所以可以进行选中
|
|
||||||
selectMaterial(res.data);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 删除图片 */
|
|
||||||
function onDelete() {
|
|
||||||
reply.value.mediaId = null;
|
|
||||||
reply.value.url = null;
|
|
||||||
reply.value.name = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 选择素材 */
|
|
||||||
function selectMaterial(item: any) {
|
|
||||||
showDialog.value = false;
|
|
||||||
|
|
||||||
// reply.value.type = 'image'
|
|
||||||
reply.value.mediaId = item.mediaId;
|
|
||||||
reply.value.url = item.url;
|
|
||||||
reply.value.name = item.name;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<!-- 情况一：已经选择好素材、或者上传好图片 -->
|
|
||||||
<div
|
|
||||||
class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
|
|
||||||
v-if="reply.url"
|
|
||||||
>
|
|
||||||
<img class="w-full" :src="reply.url" />
|
|
||||||
<p
|
|
||||||
class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
|
|
||||||
v-if="reply.name"
|
|
||||||
>
|
|
||||||
{{ reply.name }}
|
|
||||||
</p>
|
|
||||||
<Row class="pt-[10px] text-center" justify="center">
|
|
||||||
<Button type="primary" danger shape="circle" @click="onDelete">
|
|
||||||
<IconifyIcon icon="ep:delete" />
|
|
||||||
</Button>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
<!-- 情况二：未做完上述操作 -->
|
|
||||||
<Row v-else class="text-center" align="middle">
|
|
||||||
<!-- 选择素材 -->
|
|
||||||
<Col
|
|
||||||
:span="12"
|
|
||||||
class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
|
|
||||||
>
|
|
||||||
<Button type="primary" @click="showDialog = true">
|
|
||||||
素材库选择 <IconifyIcon icon="ep:circle-check" />
|
|
||||||
</Button>
|
|
||||||
<Modal
|
|
||||||
title="选择图片"
|
|
||||||
v-model:open="showDialog"
|
|
||||||
width="90%"
|
|
||||||
destroy-on-close
|
|
||||||
>
|
|
||||||
<WxMaterialSelect
|
|
||||||
type="image"
|
|
||||||
:account-id="reply.accountId"
|
|
||||||
@select-material="selectMaterial"
|
|
||||||
/>
|
|
||||||
</Modal>
|
|
||||||
</Col>
|
|
||||||
<!-- 文件上传 -->
|
|
||||||
<Col
|
|
||||||
:span="12"
|
|
||||||
class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
|
|
||||||
>
|
|
||||||
<Upload
|
|
||||||
:action="UPLOAD_URL"
|
|
||||||
:headers="HEADERS"
|
|
||||||
:file-list="fileList"
|
|
||||||
:data="uploadData"
|
|
||||||
:before-upload="beforeImageUpload"
|
|
||||||
@change="
|
|
||||||
(info) => {
|
|
||||||
if (info.file.status === 'done') {
|
|
||||||
onUploadSuccess(info.file.response || info.file);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<Button type="primary">上传图片</Button>
|
|
||||||
<template #tip>
|
|
||||||
<span>
|
|
||||||
<div class="text-center leading-[18px]">
|
|
||||||
支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</Upload>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,153 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { UploadFile } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import type { Reply } from './types';
|
|
||||||
|
|
||||||
import { computed, reactive, ref } from 'vue';
|
|
||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
import { useAccessStore } from '@vben/stores';
|
|
||||||
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
Col,
|
|
||||||
Input,
|
|
||||||
message,
|
|
||||||
Modal,
|
|
||||||
Row,
|
|
||||||
Upload,
|
|
||||||
} from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
|
|
||||||
import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
modelValue: Reply;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:modelValue', v: Reply): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
|
|
||||||
const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
|
|
||||||
const reply = computed<Reply>({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
set: (val) => emit('update:modelValue', val),
|
|
||||||
});
|
|
||||||
|
|
||||||
const showDialog = ref(false);
|
|
||||||
const fileList = ref([]);
|
|
||||||
const uploadData = reactive({
|
|
||||||
accountId: reply.value.accountId,
|
|
||||||
type: 'thumb', // 音乐类型为thumb
|
|
||||||
title: '',
|
|
||||||
introduction: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
/** 图片上传前校验 */
|
|
||||||
function beforeImageUpload(file: UploadFile) {
|
|
||||||
return useBeforeUpload(UploadType.Image, 2)(file as any);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 上传成功 */
|
|
||||||
function onUploadSuccess(info: any) {
|
|
||||||
const res = info.response || info;
|
|
||||||
if (res.code !== 0) {
|
|
||||||
message.error(`上传出错：${res.msg}`);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清空上传时的各种数据
|
|
||||||
fileList.value = [];
|
|
||||||
uploadData.title = '';
|
|
||||||
uploadData.introduction = '';
|
|
||||||
|
|
||||||
// 上传好的文件，本质是个素材，所以可以进行选中
|
|
||||||
selectMaterial(res.data);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 选择素材 */
|
|
||||||
function selectMaterial(item: any) {
|
|
||||||
showDialog.value = false;
|
|
||||||
|
|
||||||
reply.value.thumbMediaId = item.mediaId;
|
|
||||||
reply.value.thumbMediaUrl = item.url;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Row align="middle" justify="center">
|
|
||||||
<Col :span="6">
|
|
||||||
<Row align="middle" justify="center" class="inline-block text-center">
|
|
||||||
<Col :span="24">
|
|
||||||
<Row align="middle" justify="center">
|
|
||||||
<img
|
|
||||||
class="w-[100px]"
|
|
||||||
v-if="reply.thumbMediaUrl"
|
|
||||||
:src="reply.thumbMediaUrl"
|
|
||||||
/>
|
|
||||||
<IconifyIcon v-else icon="ep:plus" />
|
|
||||||
</Row>
|
|
||||||
<Row align="middle" justify="center" class="mt-[2%]">
|
|
||||||
<div>
|
|
||||||
<Upload
|
|
||||||
:action="UPLOAD_URL"
|
|
||||||
:headers="HEADERS"
|
|
||||||
:file-list="fileList"
|
|
||||||
:data="uploadData"
|
|
||||||
:before-upload="beforeImageUpload"
|
|
||||||
@change="
|
|
||||||
(info) => {
|
|
||||||
if (info.file.status === 'done') {
|
|
||||||
onUploadSuccess(info.file.response || info.file);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<template #default>
|
|
||||||
<Button type="link">本地上传</Button>
|
|
||||||
</template>
|
|
||||||
</Upload>
|
|
||||||
<Button type="link" @click="showDialog = true" class="ml-[5px]">
|
|
||||||
素材库选择
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<Modal
|
|
||||||
title="选择图片"
|
|
||||||
v-model:open="showDialog"
|
|
||||||
width="80%"
|
|
||||||
destroy-on-close
|
|
||||||
>
|
|
||||||
<WxMaterialSelect
|
|
||||||
type="image"
|
|
||||||
:account-id="reply.accountId"
|
|
||||||
@select-material="selectMaterial"
|
|
||||||
/>
|
|
||||||
</Modal>
|
|
||||||
</Col>
|
|
||||||
<Col :span="18">
|
|
||||||
<Input v-model:value="reply.title as string" placeholder="请输入标题" />
|
|
||||||
<div class="my-5"></div>
|
|
||||||
<Input
|
|
||||||
v-model:value="reply.description as string"
|
|
||||||
placeholder="请输入描述"
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<div class="my-5"></div>
|
|
||||||
<Input
|
|
||||||
v-model:value="reply.musicUrl as string"
|
|
||||||
placeholder="请输入音乐链接"
|
|
||||||
/>
|
|
||||||
<div class="my-5"></div>
|
|
||||||
<Input
|
|
||||||
v-model:value="reply.hqMusicUrl as string"
|
|
||||||
placeholder="请输入高质量音乐链接"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,85 +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/modules/wx-material-select';
|
|
||||||
import { WxNews } from '#/views/mp/modules/wx-news';
|
|
||||||
|
|
||||||
import { NewsType } from './types';
|
|
||||||
|
|
||||||
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
|
|
||||||
class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
|
|
||||||
v-if="reply.articles && reply.articles.length > 0"
|
|
||||||
>
|
|
||||||
<WxNews :articles="reply.articles" />
|
|
||||||
<Col class="pt-[10px] text-center">
|
|
||||||
<Button type="primary" danger shape="circle" @click="onDelete">
|
|
||||||
<IconifyIcon icon="ep:delete" />
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
</div>
|
|
||||||
<!-- 选择素材 -->
|
|
||||||
<Col :span="24" v-if="!reply.content">
|
|
||||||
<Row class="text-center" align="middle">
|
|
||||||
<Col :span="24">
|
|
||||||
<Button type="primary" @click="showDialog = true">
|
|
||||||
{{
|
|
||||||
newsType === NewsType.Published
|
|
||||||
? '选择已发布图文'
|
|
||||||
: '选择草稿箱图文'
|
|
||||||
}}
|
|
||||||
<IconifyIcon icon="ep:circle-check" />
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
<Modal
|
|
||||||
title="选择图文"
|
|
||||||
v-model:open="showDialog"
|
|
||||||
width="90%"
|
|
||||||
destroy-on-close
|
|
||||||
>
|
|
||||||
<WxMaterialSelect
|
|
||||||
type="news"
|
|
||||||
:account-id="reply.accountId"
|
|
||||||
:news-type="newsType"
|
|
||||||
@select-material="selectMaterial"
|
|
||||||
/>
|
|
||||||
</Modal>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
import { Input } from 'ant-design-vue';
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
modelValue?: null | string;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:modelValue', v: null | string): void;
|
|
||||||
(e: 'input', v: null | string): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const content = computed({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
set: (val: null | string) => {
|
|
||||||
emit('update:modelValue', val);
|
|
||||||
emit('input', val);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Input.TextArea
|
|
||||||
:rows="5"
|
|
||||||
placeholder="请输入内容"
|
|
||||||
v-model:value="content as string"
|
|
||||||
class="w-full"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
@@ -1,197 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { UploadFile } from 'ant-design-vue';
|
|
||||||
import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
|
|
||||||
|
|
||||||
import type { Reply } from './types';
|
|
||||||
|
|
||||||
import { computed, reactive, ref } from 'vue';
|
|
||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
import { useAccessStore } from '@vben/stores';
|
|
||||||
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
Col,
|
|
||||||
Input,
|
|
||||||
message,
|
|
||||||
Modal,
|
|
||||||
Row,
|
|
||||||
Upload,
|
|
||||||
} from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
|
|
||||||
import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
|
|
||||||
import { WxVideoPlayer } from '#/views/mp/modules/wx-video-play';
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
modelValue: Reply;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:modelValue', v: Reply): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
|
|
||||||
const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
|
|
||||||
|
|
||||||
const reply = computed<Reply>({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
set: (val: Reply) => emit('update:modelValue', val),
|
|
||||||
});
|
|
||||||
|
|
||||||
const showDialog = ref(false);
|
|
||||||
const fileList = ref([]);
|
|
||||||
const uploadData = reactive({
|
|
||||||
accountId: reply.value.accountId,
|
|
||||||
type: 'video',
|
|
||||||
title: '',
|
|
||||||
introduction: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
/** 视频上传前校验 */
|
|
||||||
function beforeVideoUpload(file: UploadFile) {
|
|
||||||
return useBeforeUpload(UploadType.Video, 10)(file as any);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 自定义上传请求 */
|
|
||||||
async function customRequest(info: UploadRequestOption) {
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('file', info.file as File);
|
|
||||||
formData.append('accountId', String(uploadData.accountId));
|
|
||||||
formData.append('type', uploadData.type);
|
|
||||||
if (uploadData.title) {
|
|
||||||
formData.append('title', uploadData.title);
|
|
||||||
}
|
|
||||||
if (uploadData.introduction) {
|
|
||||||
formData.append('introduction', uploadData.introduction);
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const xhr = new XMLHttpRequest();
|
|
||||||
|
|
||||||
// 监听上传进度
|
|
||||||
xhr.upload.addEventListener('progress', (e) => {
|
|
||||||
if (e.lengthComputable) {
|
|
||||||
const percent = Math.round((e.loaded / e.total) * 100);
|
|
||||||
info.onProgress?.({ percent });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 监听上传完成
|
|
||||||
xhr.addEventListener('load', () => {
|
|
||||||
if (xhr.status >= 200 && xhr.status < 300) {
|
|
||||||
try {
|
|
||||||
const res = JSON.parse(xhr.responseText);
|
|
||||||
onUploadSuccess(res);
|
|
||||||
info.onSuccess?.(res);
|
|
||||||
} catch {
|
|
||||||
info.onError?.(new Error('解析响应失败'));
|
|
||||||
message.error('上传失败：解析响应失败');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
info.onError?.(new Error(`上传失败：HTTP ${xhr.status}`));
|
|
||||||
message.error('上传失败，请重试');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 监听上传错误
|
|
||||||
xhr.addEventListener('error', () => {
|
|
||||||
info.onError?.(new Error('上传请求失败'));
|
|
||||||
message.error('上传失败，请重试');
|
|
||||||
});
|
|
||||||
|
|
||||||
// 发送请求
|
|
||||||
xhr.open('POST', UPLOAD_URL);
|
|
||||||
xhr.setRequestHeader('Authorization', HEADERS.Authorization);
|
|
||||||
xhr.send(formData);
|
|
||||||
} catch (error: any) {
|
|
||||||
info.onError?.(error);
|
|
||||||
message.error('上传失败，请重试');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 上传成功 */
|
|
||||||
function onUploadSuccess(res: any) {
|
|
||||||
if (res.code !== 0) {
|
|
||||||
message.error(`上传出错：${res.msg}`);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清空上传时的各种数据
|
|
||||||
fileList.value = [];
|
|
||||||
uploadData.title = '';
|
|
||||||
uploadData.introduction = '';
|
|
||||||
selectMaterial(res.data);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 选择素材后设置 */
|
|
||||||
function selectMaterial(item: any) {
|
|
||||||
showDialog.value = false;
|
|
||||||
|
|
||||||
reply.value.mediaId = item.mediaId;
|
|
||||||
reply.value.url = item.url;
|
|
||||||
reply.value.name = item.name;
|
|
||||||
|
|
||||||
// title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
|
|
||||||
if (item.title) {
|
|
||||||
reply.value.title = item.title || '';
|
|
||||||
}
|
|
||||||
if (item.introduction) {
|
|
||||||
reply.value.description = item.introduction || '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Row>
|
|
||||||
<Input
|
|
||||||
v-model:value="reply.title as string"
|
|
||||||
class="mb-[2%]"
|
|
||||||
placeholder="请输入标题"
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
class="mb-[2%]"
|
|
||||||
v-model:value="reply.description as string"
|
|
||||||
placeholder="请输入描述"
|
|
||||||
/>
|
|
||||||
<Row class="w-full pt-[10px] text-center" justify="center">
|
|
||||||
<WxVideoPlayer v-if="reply.url" :url="reply.url" />
|
|
||||||
</Row>
|
|
||||||
<Col class="w-full">
|
|
||||||
<Row class="text-center" align="middle">
|
|
||||||
<!-- 选择素材 -->
|
|
||||||
<Col :span="12">
|
|
||||||
<Button type="primary" @click="showDialog = true">
|
|
||||||
素材库选择 <IconifyIcon icon="ep:circle-check" />
|
|
||||||
</Button>
|
|
||||||
<Modal
|
|
||||||
title="选择视频"
|
|
||||||
v-model:open="showDialog"
|
|
||||||
width="90%"
|
|
||||||
destroy-on-close
|
|
||||||
>
|
|
||||||
<WxMaterialSelect
|
|
||||||
type="video"
|
|
||||||
:account-id="reply.accountId"
|
|
||||||
@select-material="selectMaterial"
|
|
||||||
/>
|
|
||||||
</Modal>
|
|
||||||
</Col>
|
|
||||||
<!-- 文件上传 -->
|
|
||||||
<Col :span="12">
|
|
||||||
<Upload
|
|
||||||
:file-list="fileList"
|
|
||||||
:before-upload="beforeVideoUpload"
|
|
||||||
:custom-request="customRequest"
|
|
||||||
>
|
|
||||||
<Button type="primary">
|
|
||||||
新建视频 <IconifyIcon icon="ep:upload" />
|
|
||||||
</Button>
|
|
||||||
</Upload>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,151 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { UploadFile } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import type { Reply } from './types';
|
|
||||||
|
|
||||||
import { computed, reactive, ref } from 'vue';
|
|
||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
import { useAccessStore } from '@vben/stores';
|
|
||||||
|
|
||||||
import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
|
|
||||||
import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
|
|
||||||
import { WxVoicePlayer } from '#/views/mp/modules/wx-voice-play';
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
modelValue: Reply;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:modelValue', v: Reply): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
|
|
||||||
const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
|
|
||||||
const reply = computed<Reply>({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
set: (val: Reply) => emit('update:modelValue', val),
|
|
||||||
});
|
|
||||||
|
|
||||||
const showDialog = ref(false);
|
|
||||||
const fileList = ref([]);
|
|
||||||
const uploadData = reactive({
|
|
||||||
accountId: reply.value.accountId,
|
|
||||||
type: 'voice',
|
|
||||||
title: '',
|
|
||||||
introduction: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
/** 语音上传前校验 */
|
|
||||||
function beforeVoiceUpload(file: UploadFile) {
|
|
||||||
return useBeforeUpload(UploadType.Voice, 10)(file as any);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 上传成功 */
|
|
||||||
function onUploadSuccess(info: any) {
|
|
||||||
const res = info.response || info;
|
|
||||||
if (res.code !== 0) {
|
|
||||||
message.error(`上传出错：${res.msg}`);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清空上传时的各种数据
|
|
||||||
fileList.value = [];
|
|
||||||
uploadData.title = '';
|
|
||||||
uploadData.introduction = '';
|
|
||||||
|
|
||||||
// 上传好的文件，本质是个素材，所以可以进行选中
|
|
||||||
selectMaterial(res.data);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 删除语音 */
|
|
||||||
function onDelete() {
|
|
||||||
reply.value.mediaId = null;
|
|
||||||
reply.value.url = null;
|
|
||||||
reply.value.name = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 选择素材 */
|
|
||||||
function selectMaterial(item: Reply) {
|
|
||||||
showDialog.value = false;
|
|
||||||
|
|
||||||
// reply.value.type = ReplyType.Voice
|
|
||||||
reply.value.mediaId = item.mediaId;
|
|
||||||
reply.value.url = item.url;
|
|
||||||
reply.value.name = item.name;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="mx-auto mb-[10px] border border-[#eaeaea] p-[10px]"
|
|
||||||
v-if="reply.url"
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
|
|
||||||
>
|
|
||||||
{{ reply.name }}
|
|
||||||
</p>
|
|
||||||
<Row class="w-full pt-[10px] text-center" justify="center">
|
|
||||||
<WxVoicePlayer :url="reply.url" />
|
|
||||||
</Row>
|
|
||||||
<Row class="w-full pt-[10px] text-center" justify="center">
|
|
||||||
<Button type="primary" danger shape="circle" @click="onDelete">
|
|
||||||
<IconifyIcon icon="ep:delete" />
|
|
||||||
</Button>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
<Row v-else class="text-center">
|
|
||||||
<!-- 选择素材 -->
|
|
||||||
<Col
|
|
||||||
:span="12"
|
|
||||||
class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
|
|
||||||
>
|
|
||||||
<Button type="primary" @click="showDialog = true">
|
|
||||||
素材库选择<IconifyIcon icon="ep:circle-check" />
|
|
||||||
</Button>
|
|
||||||
<Modal
|
|
||||||
title="选择语音"
|
|
||||||
v-model:open="showDialog"
|
|
||||||
width="90%"
|
|
||||||
destroy-on-close
|
|
||||||
>
|
|
||||||
<WxMaterialSelect
|
|
||||||
type="voice"
|
|
||||||
:account-id="reply.accountId"
|
|
||||||
@select-material="selectMaterial"
|
|
||||||
/>
|
|
||||||
</Modal>
|
|
||||||
</Col>
|
|
||||||
<!-- 文件上传 -->
|
|
||||||
<Col
|
|
||||||
:span="12"
|
|
||||||
class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
|
|
||||||
>
|
|
||||||
<Upload
|
|
||||||
:action="UPLOAD_URL"
|
|
||||||
:headers="HEADERS"
|
|
||||||
:file-list="fileList"
|
|
||||||
:data="uploadData"
|
|
||||||
:before-upload="beforeVoiceUpload"
|
|
||||||
@change="
|
|
||||||
(info) => {
|
|
||||||
if (info.file.status === 'done') {
|
|
||||||
onUploadSuccess(info.file.response || info.file);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<Button type="primary">点击上传</Button>
|
|
||||||
<template #tip>
|
|
||||||
<div class="text-center leading-[18px]">
|
|
||||||
格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Upload>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
import type { Ref } from 'vue';
|
|
||||||
|
|
||||||
import { unref } from 'vue';
|
|
||||||
|
|
||||||
enum ReplyType {
|
|
||||||
Image = 'image',
|
|
||||||
Music = 'music',
|
|
||||||
News = 'news',
|
|
||||||
Text = 'text',
|
|
||||||
Video = 'video',
|
|
||||||
Voice = 'voice',
|
|
||||||
}
|
|
||||||
|
|
||||||
interface _Reply {
|
|
||||||
accountId: number;
|
|
||||||
type: ReplyType;
|
|
||||||
name?: null | string;
|
|
||||||
content?: null | string;
|
|
||||||
mediaId?: null | string;
|
|
||||||
url?: null | string;
|
|
||||||
title?: null | string;
|
|
||||||
description?: null | string;
|
|
||||||
thumbMediaId?: null | string;
|
|
||||||
thumbMediaUrl?: null | string;
|
|
||||||
musicUrl?: null | string;
|
|
||||||
hqMusicUrl?: null | string;
|
|
||||||
introduction?: null | string;
|
|
||||||
articles?: any[];
|
|
||||||
}
|
|
||||||
|
|
||||||
type Reply = _Reply; // Partial<_Reply>
|
|
||||||
|
|
||||||
enum NewsType {
|
|
||||||
Draft = '2',
|
|
||||||
Published = '1',
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 利用旧的reply[accountId, type]初始化新的Reply */
|
|
||||||
const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
|
|
||||||
return {
|
|
||||||
accountId: unref(old).accountId,
|
|
||||||
type: unref(old).type,
|
|
||||||
name: null,
|
|
||||||
content: null,
|
|
||||||
mediaId: null,
|
|
||||||
url: null,
|
|
||||||
title: null,
|
|
||||||
description: null,
|
|
||||||
thumbMediaId: null,
|
|
||||||
thumbMediaUrl: null,
|
|
||||||
musicUrl: null,
|
|
||||||
hqMusicUrl: null,
|
|
||||||
introduction: null,
|
|
||||||
articles: [],
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export { createEmptyReply, NewsType, type Reply, ReplyType };
|
|
||||||
@@ -1,137 +0,0 @@
|
|||||||
<!--
|
|
||||||
- Copyright (C) 2018-2019
|
|
||||||
- All rights reserved, Designed By www.joolun.com
|
|
||||||
芋道源码：
|
|
||||||
① 移除多余的 rep 为前缀的变量，让 message 消息更简单
|
|
||||||
② 代码优化，补充注释，提升阅读性
|
|
||||||
③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
|
|
||||||
④ 支持发送【视频】消息时，支持新建视频
|
|
||||||
-->
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { Reply } from './types';
|
|
||||||
|
|
||||||
import { computed, ref, unref, watch } from 'vue';
|
|
||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
|
|
||||||
import { Row, Tabs } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import TabImage from './tab-image.vue';
|
|
||||||
import TabMusic from './tab-music.vue';
|
|
||||||
import TabNews from './tab-news.vue';
|
|
||||||
import TabText from './tab-text.vue';
|
|
||||||
import TabVideo from './tab-video.vue';
|
|
||||||
import TabVoice from './tab-voice.vue';
|
|
||||||
import { createEmptyReply, NewsType, ReplyType } from './types';
|
|
||||||
|
|
||||||
defineOptions({ name: 'WxReplySelect' });
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
modelValue: Reply;
|
|
||||||
newsType?: NewsType;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
newsType: () => NewsType.Published,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:modelValue', v: Reply): void;
|
|
||||||
}>();
|
|
||||||
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="ep:document" /> 文本</Row>
|
|
||||||
</template>
|
|
||||||
<TabText v-model="reply.content" />
|
|
||||||
</Tabs.TabPane>
|
|
||||||
|
|
||||||
<!-- 类型 2：图片 -->
|
|
||||||
<Tabs.TabPane :key="ReplyType.Image">
|
|
||||||
<template #tab>
|
|
||||||
<Row align="middle">
|
|
||||||
<IconifyIcon icon="ep:picture" class="mr-5px" /> 图片
|
|
||||||
</Row>
|
|
||||||
</template>
|
|
||||||
<TabImage v-model="reply" />
|
|
||||||
</Tabs.TabPane>
|
|
||||||
|
|
||||||
<!-- 类型 3：语音 -->
|
|
||||||
<Tabs.TabPane :key="ReplyType.Voice">
|
|
||||||
<template #tab>
|
|
||||||
<Row align="middle"><IconifyIcon icon="ep:phone" /> 语音</Row>
|
|
||||||
</template>
|
|
||||||
<TabVoice v-model="reply" />
|
|
||||||
</Tabs.TabPane>
|
|
||||||
|
|
||||||
<!-- 类型 4：视频 -->
|
|
||||||
<Tabs.TabPane :key="ReplyType.Video">
|
|
||||||
<template #tab>
|
|
||||||
<Row align="middle"><IconifyIcon icon="ep:share" /> 视频</Row>
|
|
||||||
</template>
|
|
||||||
<TabVideo v-model="reply" />
|
|
||||||
</Tabs.TabPane>
|
|
||||||
|
|
||||||
<!-- 类型 5：图文 -->
|
|
||||||
<Tabs.TabPane :key="ReplyType.News">
|
|
||||||
<template #tab>
|
|
||||||
<Row align="middle"><IconifyIcon icon="ep:reading" /> 图文</Row>
|
|
||||||
</template>
|
|
||||||
<TabNews v-model="reply" :news-type="newsType" />
|
|
||||||
</Tabs.TabPane>
|
|
||||||
|
|
||||||
<!-- 类型 6：音乐 -->
|
|
||||||
<Tabs.TabPane :key="ReplyType.Music">
|
|
||||||
<template #tab>
|
|
||||||
<Row align="middle"><IconifyIcon icon="ep:service" />音乐</Row>
|
|
||||||
</template>
|
|
||||||
<TabMusic v-model="reply" />
|
|
||||||
</Tabs.TabPane>
|
|
||||||
</Tabs>
|
|
||||||
</template>
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default as WxVideoPlayer } from './wx-video-play.vue';
|
|
||||||
@@ -1,80 +0,0 @@
|
|||||||
<!--
|
|
||||||
- Copyright (C) 2018-2019
|
|
||||||
- All rights reserved, Designed By www.joolun.com
|
|
||||||
【微信消息 - 视频】
|
|
||||||
芋道源码：
|
|
||||||
① bug 修复：
|
|
||||||
1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
|
|
||||||
存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
|
|
||||||
2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
|
|
||||||
② 体验优化：弹窗关闭后，自动暂停视频的播放
|
|
||||||
|
|
||||||
-->
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
|
|
||||||
import { VideoPlayer } from '@videojs-player/vue';
|
|
||||||
import { Modal } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import 'video.js/dist/video-js.css';
|
|
||||||
|
|
||||||
defineOptions({ name: 'WxVideoPlayer' });
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
url: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// TODO @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢
|
|
||||||
const dialogVideo = ref(false);
|
|
||||||
|
|
||||||
const playVideo = () => {
|
|
||||||
dialogVideo.value = true;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div @click="playVideo()">
|
|
||||||
<!-- 提示 -->
|
|
||||||
<div class="flex cursor-pointer flex-col items-center">
|
|
||||||
<IconifyIcon icon="ep:video-play" class="size-5" />
|
|
||||||
<p class="text-sm">点击播放视频</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 弹窗播放 -->
|
|
||||||
<Modal
|
|
||||||
v-model:open="dialogVideo"
|
|
||||||
title="视频播放"
|
|
||||||
width="900px"
|
|
||||||
:footer="null"
|
|
||||||
>
|
|
||||||
<VideoPlayer
|
|
||||||
v-if="dialogVideo"
|
|
||||||
class="video-player vjs-big-play-centered"
|
|
||||||
:src="props.url"
|
|
||||||
poster=""
|
|
||||||
controls
|
|
||||||
playsinline
|
|
||||||
:volume="0.6"
|
|
||||||
:width="800"
|
|
||||||
:playback-rates="[0.7, 1.0, 1.5, 2.0]"
|
|
||||||
/>
|
|
||||||
<!-- 事件，暫時沒用
|
|
||||||
@mounted="handleMounted"-->
|
|
||||||
<!-- @ready="handleEvent($event)"-->
|
|
||||||
<!-- @play="handleEvent($event)"-->
|
|
||||||
<!-- @pause="handleEvent($event)"-->
|
|
||||||
<!-- @ended="handleEvent($event)"-->
|
|
||||||
<!-- @loadeddata="handleEvent($event)"-->
|
|
||||||
<!-- @waiting="handleEvent($event)"-->
|
|
||||||
<!-- @playing="handleEvent($event)"-->
|
|
||||||
<!-- @canplay="handleEvent($event)"-->
|
|
||||||
<!-- @canplaythrough="handleEvent($event)"-->
|
|
||||||
<!-- @timeupdate="handleEvent(player?.currentTime())"-->
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default as WxVoicePlayer } from './wx-voice-play.vue';
|
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
<!--
|
|
||||||
- Copyright (C) 2018-2019
|
|
||||||
- All rights reserved, Designed By www.joolun.com
|
|
||||||
【微信消息 - 语音】
|
|
||||||
芋道源码：
|
|
||||||
① bug 修复：
|
|
||||||
1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
|
|
||||||
存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
|
|
||||||
2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
|
|
||||||
② 代码优化：将 props 中的 reply 调成为 data 中对应的属性，并补充相关注释
|
|
||||||
-->
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
|
|
||||||
import { Tag } from 'ant-design-vue';
|
|
||||||
// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
|
|
||||||
import BenzAMRRecorder from 'benz-amr-recorder';
|
|
||||||
|
|
||||||
defineOptions({ name: 'WxVoicePlayer' });
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
url: {
|
|
||||||
type: String, // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
type: String, // 语音文本
|
|
||||||
required: false,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const amr = ref();
|
|
||||||
const playing = ref(false);
|
|
||||||
const duration = ref();
|
|
||||||
|
|
||||||
/** 处理点击，播放或暂停 */
|
|
||||||
function playVoice() {
|
|
||||||
// 情况一：未初始化，则创建 BenzAMRRecorder
|
|
||||||
if (amr.value === undefined) {
|
|
||||||
amrInit();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 情况二：已经初始化，则根据情况播放或暂时
|
|
||||||
if (amr.value.isPlaying()) {
|
|
||||||
amrStop();
|
|
||||||
} else {
|
|
||||||
amrPlay();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 音频初始化 */
|
|
||||||
function amrInit() {
|
|
||||||
amr.value = new BenzAMRRecorder();
|
|
||||||
// 设置播放
|
|
||||||
amr.value.initWithUrl(props.url).then(() => {
|
|
||||||
amrPlay();
|
|
||||||
duration.value = amr.value.getDuration();
|
|
||||||
});
|
|
||||||
// 监听暂停
|
|
||||||
amr.value.onEnded(() => {
|
|
||||||
playing.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 音频播放 */
|
|
||||||
function amrPlay() {
|
|
||||||
playing.value = true;
|
|
||||||
amr.value.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 音频暂停 */
|
|
||||||
function amrStop() {
|
|
||||||
playing.value = false;
|
|
||||||
amr.value.stop();
|
|
||||||
}
|
|
||||||
// TODO 芋艿：下面样式有点问题
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="wx-voice-div" @click="playVoice">
|
|
||||||
<IconifyIcon v-if="playing !== true" icon="lucide:circle-play" :size="32" />
|
|
||||||
<IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
|
|
||||||
<span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
|
|
||||||
<div v-if="content">
|
|
||||||
<Tag color="success" size="small">语音识别</Tag>
|
|
||||||
{{ content }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
/** TODO @hw：tindwind 替代 */
|
|
||||||
.wx-voice-div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 120px;
|
|
||||||
height: 50px;
|
|
||||||
padding: 5px;
|
|
||||||
background-color: #eaeaea;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.amr-duration {
|
|
||||||
margin-left: 5px;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user