refactor: mp comps
This commit is contained in:
xingyu4j
51
apps/web-antd/src/views/mp/components/wx-msg/msg-event.vue
Normal file
51
apps/web-antd/src/views/mp/components/wx-msg/msg-event.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<script lang="ts" setup>
|
||||
import { Tag } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'MsgEvent' });
|
||||
|
||||
defineProps<{
|
||||
item: any;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="item.event === 'subscribe'">
|
||||
<Tag color="success">关注</Tag>
|
||||
</div>
|
||||
<div v-else-if="item.event === 'unsubscribe'">
|
||||
<Tag color="error">取消关注</Tag>
|
||||
</div>
|
||||
<div v-else-if="item.event === 'CLICK'">
|
||||
<Tag>点击菜单</Tag>
|
||||
【{{ item.eventKey }}】
|
||||
</div>
|
||||
<div v-else-if="item.event === 'VIEW'">
|
||||
<Tag>点击菜单链接</Tag>
|
||||
【{{ item.eventKey }}】
|
||||
</div>
|
||||
<div v-else-if="item.event === 'scancode_waitmsg'">
|
||||
<Tag>扫码结果</Tag>
|
||||
【{{ item.eventKey }}】
|
||||
</div>
|
||||
<div v-else-if="item.event === 'scancode_push'">
|
||||
<Tag>扫码结果</Tag>
|
||||
【{{ item.eventKey }}】
|
||||
</div>
|
||||
<div v-else-if="item.event === 'pic_sysphoto'">
|
||||
<Tag>系统拍照发图</Tag>
|
||||
</div>
|
||||
<div v-else-if="item.event === 'pic_photo_or_album'">
|
||||
<Tag>拍照或者相册</Tag>
|
||||
</div>
|
||||
<div v-else-if="item.event === 'pic_weixin'">
|
||||
<Tag>微信相册</Tag>
|
||||
</div>
|
||||
<div v-else-if="item.event === 'location_select'">
|
||||
<Tag>选择地理位置</Tag>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Tag color="error">未知事件类型</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
75
apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
Normal file
75
apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<script lang="ts" setup>
|
||||
import type { User } from './types';
|
||||
|
||||
import { preferences } from '@vben/preferences';
|
||||
import { formatDateTime } from '@vben/utils';
|
||||
|
||||
import Msg from './msg.vue';
|
||||
|
||||
defineOptions({ name: 'MsgList' });
|
||||
|
||||
const props = defineProps<{
|
||||
accountId: number;
|
||||
list: any[];
|
||||
user: User;
|
||||
}>();
|
||||
|
||||
const SendFrom = {
|
||||
MpBot: 2,
|
||||
User: 1,
|
||||
} as const;
|
||||
|
||||
function getAvatar(sendFrom: number) {
|
||||
return sendFrom === SendFrom.User
|
||||
? props.user.avatar
|
||||
: preferences.app.defaultAvatar;
|
||||
}
|
||||
|
||||
function getNickname(sendFrom: number) {
|
||||
return sendFrom === SendFrom.User ? props.user.nickname : '公众号';
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="execution" v-for="item in props.list" :key="item.id">
|
||||
<div
|
||||
class="avue-comment"
|
||||
:class="{ 'avue-comment--reverse': item.sendFrom === SendFrom.MpBot }"
|
||||
>
|
||||
<div class="avatar-div">
|
||||
<img :src="getAvatar(item.sendFrom)" class="avue-comment__avatar" />
|
||||
<div class="avue-comment__author">
|
||||
{{ getNickname(item.sendFrom) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="avue-comment__main">
|
||||
<div class="avue-comment__header">
|
||||
<div class="avue-comment__create_time">
|
||||
{{ formatDateTime(item.createTime) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="avue-comment__body"
|
||||
:style="
|
||||
item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''
|
||||
"
|
||||
>
|
||||
<Msg :item="item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
|
||||
|
||||
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
|
||||
|
||||
@import url('../comment.scss');
|
||||
@import url('../card.scss');
|
||||
|
||||
.avatar-div {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
77
apps/web-antd/src/views/mp/components/wx-msg/msg.vue
Normal file
77
apps/web-antd/src/views/mp/components/wx-msg/msg.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<script lang="ts" setup>
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import {
|
||||
WxLocation,
|
||||
WxMusic,
|
||||
WxNews,
|
||||
WxVideoPlayer,
|
||||
WxVoicePlayer,
|
||||
} from '#/views/mp/components';
|
||||
|
||||
import { MsgType } from '../constants';
|
||||
import MsgEvent from './msg-event.vue';
|
||||
|
||||
defineOptions({ name: 'Msg' });
|
||||
|
||||
defineProps<{
|
||||
item: any;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<MsgEvent v-if="item.type === MsgType.Event" :item="item" />
|
||||
|
||||
<div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
|
||||
|
||||
<div v-else-if="item.type === MsgType.Voice">
|
||||
<WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="item.type === MsgType.Image">
|
||||
<a :href="item.mediaUrl" target="_blank">
|
||||
<img :src="item.mediaUrl" class="w-[100px]" alt="图片消息" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
|
||||
class="text-center"
|
||||
>
|
||||
<WxVideoPlayer :url="item.mediaUrl" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="item.type === MsgType.Link" class="flex flex-col gap-2">
|
||||
<a :href="item.url" target="_blank" class="text-success no-underline">
|
||||
<div class="flex items-center text-sm font-medium text-[#52c41a]">
|
||||
<IconifyIcon icon="mdi:link" class="mr-1" />
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</a>
|
||||
<div class="text-xs text-[#666]">{{ item.description }}</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="item.type === MsgType.Location">
|
||||
<WxLocation
|
||||
:label="item.label"
|
||||
:location-y="item.locationY"
|
||||
:location-x="item.locationX"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="item.type === MsgType.News" class="w-[300px]">
|
||||
<WxNews :articles="item.articles" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="item.type === MsgType.Music">
|
||||
<WxMusic
|
||||
:title="item.title"
|
||||
:description="item.description"
|
||||
:thumb-media-url="item.thumbMediaUrl"
|
||||
:music-url="item.musicUrl"
|
||||
:hq-music-url="item.hqMusicUrl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
178
apps/web-antd/src/views/mp/components/wx-msg/wx-msg.vue
Normal file
178
apps/web-antd/src/views/mp/components/wx-msg/wx-msg.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<script lang="ts" setup>
|
||||
import type { User } from './types';
|
||||
|
||||
import { nextTick, onMounted, reactive, ref, unref } from 'vue';
|
||||
|
||||
import { preferences } from '@vben/preferences';
|
||||
|
||||
import { Button, message, Spin } from 'ant-design-vue';
|
||||
|
||||
import { getMessagePage, sendMessage } from '#/api/mp/message';
|
||||
import { getUser } from '#/api/mp/user';
|
||||
import { WxReply } from '#/views/mp/components';
|
||||
|
||||
import MsgList from './msg-list.vue';
|
||||
|
||||
defineOptions({ name: 'WxMsg' });
|
||||
|
||||
const props = defineProps<{
|
||||
userId: number;
|
||||
}>();
|
||||
|
||||
const accountId = ref(-1); // 公众号ID，需要通过userId初始化
|
||||
const loading = ref(false); // 消息列表是否正在加载中
|
||||
const hasMore = ref(true); // 是否可以加载更多
|
||||
const list = ref<any[]>([]); // 消息列表
|
||||
const queryParams = reactive({
|
||||
accountId,
|
||||
pageNo: 1, // 当前页数
|
||||
pageSize: 14, // 每页显示多少条
|
||||
});
|
||||
|
||||
const user: User = reactive({
|
||||
accountId, // 公众号账号编号
|
||||
avatar: preferences.app.defaultAvatar,
|
||||
nickname: '用户', // 由于微信不再提供昵称，直接使用"用户"展示
|
||||
});
|
||||
|
||||
// ========= 消息发送 =========
|
||||
const sendLoading = ref(false); // 发送消息是否加载中
|
||||
const reply = ref<any>({
|
||||
accountId: -1,
|
||||
articles: [],
|
||||
type: 'text',
|
||||
}); // 微信发送消息
|
||||
|
||||
const replySelectRef = ref<InstanceType<typeof WxReply> | null>(null); // WxReply组件ref，用于消息发送成功后清除内容
|
||||
const msgDivRef = ref<HTMLDivElement | null>(null); // 消息显示窗口ref，用于滚动到底部
|
||||
|
||||
/** 完成加载 */
|
||||
onMounted(async () => {
|
||||
const data = await getUser(props.userId);
|
||||
user.nickname = data.nickname?.length > 0 ? data.nickname : user.nickname;
|
||||
user.avatar = data.avatar?.length > 0 ? data.avatar : user.avatar;
|
||||
accountId.value = data.accountId;
|
||||
reply.value.accountId = data.accountId;
|
||||
|
||||
refreshChange();
|
||||
});
|
||||
|
||||
/** 执行发送 */
|
||||
async function sendMsg() {
|
||||
if (!unref(reply)) {
|
||||
return;
|
||||
}
|
||||
// 公众号限制：客服消息，公众号只允许发送一条
|
||||
if (
|
||||
reply.value.type === 'news' &&
|
||||
reply.value.articles &&
|
||||
reply.value.articles.length > 1
|
||||
) {
|
||||
reply.value.articles = [reply.value.articles[0]];
|
||||
message.success('图文消息条数限制在 1 条以内，已默认发送第一条');
|
||||
}
|
||||
|
||||
const data = await sendMessage({
|
||||
...reply.value,
|
||||
userId: props.userId,
|
||||
} as any);
|
||||
sendLoading.value = false;
|
||||
|
||||
list.value = [...list.value, data];
|
||||
await scrollToBottom();
|
||||
|
||||
// 发送后清空数据
|
||||
replySelectRef.value?.clear();
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
queryParams.pageNo++;
|
||||
getPage(queryParams, null);
|
||||
}
|
||||
|
||||
async function getPage(page: any, params: any = null) {
|
||||
loading.value = true;
|
||||
const dataTemp = await getMessagePage(
|
||||
Object.assign(
|
||||
{
|
||||
accountId: page.accountId,
|
||||
pageNo: page.pageNo,
|
||||
pageSize: page.pageSize,
|
||||
userId: props.userId,
|
||||
},
|
||||
params,
|
||||
),
|
||||
);
|
||||
|
||||
const scrollHeight = msgDivRef.value?.scrollHeight ?? 0;
|
||||
// 处理数据
|
||||
const data = dataTemp.list.reverse();
|
||||
list.value = [...data, ...list.value];
|
||||
loading.value = false;
|
||||
if (data.length < queryParams.pageSize || data.length === 0) {
|
||||
hasMore.value = false;
|
||||
}
|
||||
queryParams.pageNo = page.pageNo;
|
||||
queryParams.pageSize = page.pageSize;
|
||||
// 滚动到原来的位置
|
||||
if (queryParams.pageNo === 1) {
|
||||
// 定位到消息底部
|
||||
await scrollToBottom();
|
||||
} else if (data.length > 0) {
|
||||
// 定位滚动条
|
||||
await nextTick();
|
||||
if (scrollHeight !== 0 && msgDivRef.value) {
|
||||
msgDivRef.value.scrollTop =
|
||||
msgDivRef.value.scrollHeight - scrollHeight - 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function refreshChange() {
|
||||
getPage(queryParams);
|
||||
}
|
||||
|
||||
/** 定位到消息底部 */
|
||||
async function scrollToBottom() {
|
||||
await nextTick();
|
||||
if (msgDivRef.value) {
|
||||
msgDivRef.value.scrollTop = msgDivRef.value.scrollHeight;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full flex-col">
|
||||
<div ref="msgDivRef" class="mx-2.5 flex-1 overflow-auto bg-[#eaeaea]">
|
||||
<!-- 加载更多 -->
|
||||
<Spin :spinning="loading" />
|
||||
<div v-if="!loading">
|
||||
<div
|
||||
v-if="hasMore"
|
||||
class="cursor-pointer rounded p-3 text-center text-sm text-[#409eff] transition-colors duration-300 hover:bg-[#f5f7fa]"
|
||||
@click="loadMore"
|
||||
>
|
||||
<span>点击加载更多</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="cursor-not-allowed rounded p-3 text-center text-sm text-[#909399] hover:bg-transparent"
|
||||
>
|
||||
<span>没有更多了</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<MsgList :list="list" :account-id="accountId" :user="user" />
|
||||
</div>
|
||||
|
||||
<div class="p-2.5">
|
||||
<Spin :spinning="sendLoading">
|
||||
<WxReplySelect ref="replySelectRef" v-model="reply" />
|
||||
<Button type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
|
||||
发送(S)
|
||||
</Button>
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user