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