From 917b9d180a01dc36aa3609fde8dd79b78bde8b68 Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sat, 22 Apr 2023 20:45:03 +0800
Subject: [PATCH 1/5] =?UTF-8?q?fix:=20mp/menu=E8=8F=9C=E5=8D=95=E6=8B=96?=
=?UTF-8?q?=E5=8A=A8=E5=90=8E=E6=BF=80=E6=B4=BB=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../mp/menu/components/MenuPreviewer.vue | 48 +++++++++++--------
1 file changed, 28 insertions(+), 20 deletions(-)
diff --git a/src/views/mp/menu/components/MenuPreviewer.vue b/src/views/mp/menu/components/MenuPreviewer.vue
index 3066e590..d2626320 100644
--- a/src/views/mp/menu/components/MenuPreviewer.vue
+++ b/src/views/mp/menu/components/MenuPreviewer.vue
@@ -4,7 +4,7 @@
item-key="id"
ghost-class="draggable-ghost"
:animation="400"
- @end="onDragEnd"
+ @end="onParentDragEnd"
>
<template #item="{ element: parent, index: x }">
<div class="menu_bottom">
@@ -23,6 +23,7 @@
item-key="id"
ghost-class="draggable-ghost"
:animation="400"
+ @end="onChildDragEnd"
>
<template #item="{ element: child, index: y }">
<div class="subtitle menu_bottom">
@@ -118,42 +119,49 @@ const subMenuClicked = (child: Menu, x: number, y: number) => {
}
/**
- * 处理一级菜单展开后被拖动
+ * 处理一级菜单展开后被拖动，激活(展开)原来活动的一级菜单
*
* @param oldIndex: 一级菜单拖动前的位置
* @param newIndex: 一级菜单拖动后的位置
*/
-const onDragEnd = ({ oldIndex, newIndex }) => {
+const onParentDragEnd = ({ oldIndex, newIndex }) => {
// 二级菜单没有展开，直接返回
if (props.activeIndex === '__MENU_NOT_SELECTED__') {
return
}
- let newParent = props.parentIndex
- if (props.parentIndex === oldIndex) {
- newParent = newIndex
- } else if (props.parentIndex === newIndex) {
- newParent = oldIndex
- } else {
- // 如果展开的二级菜单下标`props.parentIndex`不是被移动的菜单的前后下标。
- // 那么使用一个辅助素组来模拟菜单移动，然后找到展开的二级菜单的新下标`newParent`
- let positions = new Array<boolean>(menuList.value.length).fill(false)
- positions[props.parentIndex] = true
- positions.splice(oldIndex, 1)
- positions.splice(newIndex, 0, true)
- newParent = positions.indexOf(true)
- }
+ // 使用一个辅助数组来模拟菜单移动，然后找到展开的二级菜单的新下标`newParent`
+ let positions = new Array<boolean>(menuList.value.length).fill(false)
+ positions[props.parentIndex] = true
+ const [out] = positions.splice(oldIndex, 1) // 移出菜单，保存到变量out
+ positions.splice(newIndex, 0, out) // 把out变量插入被移出的菜单
+ const newParentIndex = positions.indexOf(true)
// 找到菜单元素，触发一级菜单点击
- const parent = menuList.value[newParent]
- emit('menu-clicked', parent, newParent)
+ const parent = menuList.value[newParentIndex]
+ emit('menu-clicked', parent, newParentIndex)
+}
+
+/**
+ * 处理二级菜单展开后被拖动，激活被拖动的菜单
+ *
+ * @param newIndex 二级菜单拖动后的位置
+ */
+const onChildDragEnd = ({ newIndex }) => {
+ const x = props.parentIndex
+ const y = newIndex
+ const children = menuList.value[x]?.children
+ if (children && children?.length > 0) {
+ const child = children[y]
+ emit('submenu-clicked', child, x, y)
+ }
}
</script>
<style lang="scss" scoped>
.menu_bottom {
position: relative;
- display: inline-block;
+ display: block;
float: left;
width: 85.5px;
text-align: center;
From f848f3ba91a2d4b09e8acbd7b47289055527c870 Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sat, 22 Apr 2023 20:51:25 +0800
Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20mp/wx-msg=20=E6=8B=86=E5=88=86?=
=?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/wx-msg/components/MsgEvent.vue | 51 ++++
.../components/wx-msg/components/MsgList.vue | 110 +++++++++
src/views/mp/components/wx-msg/main.vue | 219 ++++--------------
src/views/mp/components/wx-msg/types.ts | 6 +
4 files changed, 207 insertions(+), 179 deletions(-)
create mode 100644 src/views/mp/components/wx-msg/components/MsgEvent.vue
create mode 100644 src/views/mp/components/wx-msg/components/MsgList.vue
diff --git a/src/views/mp/components/wx-msg/components/MsgEvent.vue b/src/views/mp/components/wx-msg/components/MsgEvent.vue
new file mode 100644
index 00000000..e13e3112
--- /dev/null
+++ b/src/views/mp/components/wx-msg/components/MsgEvent.vue
@@ -0,0 +1,51 @@
+<template>
+ <div>
+ <div v-if="item.event === 'subscribe'">
+ <el-tag type="success">关注</el-tag>
+ </div>
+ <div v-else-if="item.event === 'unsubscribe'">
+ <el-tag type="danger">取消关注</el-tag>
+ </div>
+ <div v-else-if="item.event === 'CLICK'">
+ <el-tag>点击菜单</el-tag>
+ 【{{ item.eventKey }}】
+ </div>
+ <div v-else-if="item.event === 'VIEW'">
+ <el-tag>点击菜单链接</el-tag>
+ 【{{ item.eventKey }}】
+ </div>
+ <div v-else-if="item.event === 'scancode_waitmsg'">
+ <el-tag>扫码结果</el-tag>
+ 【{{ item.eventKey }}】
+ </div>
+ <div v-else-if="item.event === 'scancode_push'">
+ <el-tag>扫码结果</el-tag>
+ 【{{ item.eventKey }}】
+ </div>
+ <div v-else-if="item.event === 'pic_sysphoto'">
+ <el-tag>系统拍照发图</el-tag>
+ </div>
+ <div v-else-if="item.event === 'pic_photo_or_album'">
+ <el-tag>拍照或者相册</el-tag>
+ </div>
+ <div v-else-if="item.event === 'pic_weixin'">
+ <el-tag>微信相册</el-tag>
+ </div>
+ <div v-else-if="item.event === 'location_select'">
+ <el-tag>选择地理位置</el-tag>
+ </div>
+ <div v-else>
+ <el-tag type="danger">未知事件类型</el-tag>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+ item: any
+}>()
+
+const item = ref(props.item)
+</script>
+
+<style scoped></style>
diff --git a/src/views/mp/components/wx-msg/components/MsgList.vue b/src/views/mp/components/wx-msg/components/MsgList.vue
new file mode 100644
index 00000000..39f7203c
--- /dev/null
+++ b/src/views/mp/components/wx-msg/components/MsgList.vue
@@ -0,0 +1,110 @@
+<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">{{ formatDate(item.createTime) }}</div>
+ </div>
+ <div
+ class="avue-comment__body"
+ :style="item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''"
+ >
+ <!-- 【事件】区域 -->
+ <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" style="width: 100px" />
+ </a>
+ </div>
+ <div
+ v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
+ style="text-align: center"
+ >
+ <WxVideoPlayer :url="item.mediaUrl" />
+ </div>
+ <div v-else-if="item.type === MsgType.Link" class="avue-card__detail">
+ <el-link type="success" :underline="false" target="_blank" :href="item.url">
+ <div class="avue-card__title"><i class="el-icon-link"></i>{{ item.title }}</div>
+ </el-link>
+ <div class="avue-card__info" style="height: unset">{{ item.description }}</div>
+ </div>
+ <!-- TODO 芋艿：待完善 -->
+ <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" style="width: 300px">
+ <!-- TODO 芋艿：待测试；详情页也存在类似的情况 -->
+ <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>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts" name="MsgList">
+import WxVideoPlayer from '@/views/mp/components/wx-video-play'
+import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
+import WxNews from '@/views/mp/components/wx-news'
+import WxLocation from '@/views/mp/components/wx-location'
+import WxMusic from '@/views/mp/components/wx-music'
+import MsgEvent from './MsgEvent.vue'
+import { formatDate } from '@/utils/formatTime'
+import { MsgType, User } from '../types'
+import avatarWechat from '@/assets/imgs/wechat.png'
+
+const props = defineProps<{
+ list: any[]
+ accountId: number
+ user: User
+}>()
+
+enum SendFrom {
+ User = 1,
+ MpBot = 2
+}
+
+const getAvatar = (sendFrom: SendFrom) =>
+ sendFrom === SendFrom.User ? props.user.avatar : avatarWechat
+
+const getNickname = (sendFrom: SendFrom) =>
+ sendFrom === SendFrom.User ? props.user.nickname : '公众号'
+</script>
+
+<style lang="scss" scoped>
+/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
+@import '../comment.scss';
+@import '../card.scss';
+
+.avatar-div {
+ text-align: center;
+ width: 80px;
+}
+</style>
diff --git a/src/views/mp/components/wx-msg/main.vue b/src/views/mp/components/wx-msg/main.vue
index 19763245..5d28c201 100644
--- a/src/views/mp/components/wx-msg/main.vue
+++ b/src/views/mp/components/wx-msg/main.vue
@@ -7,123 +7,22 @@
-->
<template>
<ContentWrap>
- <div class="msg-div" :id="'msg-div' + nowStr">
+ <div class="msg-div" :id="msgDivId">
<!-- 加载更多 -->
<div v-loading="loading"></div>
<div v-if="!loading">
- <div class="el-table__empty-block" v-if="loadMore" @click="loadingMore"
+ <div class="el-table__empty-block" v-if="hasMore" @click="loadMore"
><span class="el-table__empty-text">点击加载更多</span></div
>
- <div class="el-table__empty-block" v-if="!loadMore"
+ <div class="el-table__empty-block" v-if="!hasMore"
><span class="el-table__empty-text">没有更多了</span></div
>
</div>
+
<!-- 消息列表 -->
- <div class="execution" v-for="item in list" :key="item.id">
- <div class="avue-comment" :class="item.sendFrom === 2 ? 'avue-comment--reverse' : ''">
- <div class="avatar-div">
- <img
- :src="item.sendFrom === 1 ? user.avatar : mp.avatar"
- class="avue-comment__avatar"
- />
- <div class="avue-comment__author"
- >{{ item.sendFrom === 1 ? user.nickname : mp.nickname }}
- </div>
- </div>
- <div class="avue-comment__main">
- <div class="avue-comment__header">
- <div class="avue-comment__create_time">{{ formatDate(item.createTime) }}</div>
- </div>
- <div
- class="avue-comment__body"
- :style="item.sendFrom === 2 ? 'background: #6BED72;' : ''"
- >
- <!-- 【事件】区域 -->
- <div v-if="item.type === MsgType.Event && item.event === 'subscribe'">
- <el-tag type="success">关注</el-tag>
- </div>
- <div v-else-if="item.type === MsgType.Event && item.event === 'unsubscribe'">
- <el-tag type="danger">取消关注</el-tag>
- </div>
- <div v-else-if="item.type === MsgType.Event && item.event === 'CLICK'">
- <el-tag>点击菜单</el-tag>
- 【{{ item.eventKey }}】
- </div>
- <div v-else-if="item.type === MsgType.Event && item.event === 'VIEW'">
- <el-tag>点击菜单链接</el-tag>
- 【{{ item.eventKey }}】
- </div>
- <div v-else-if="item.type === MsgType.Event && item.event === 'scancode_waitmsg'">
- <el-tag>扫码结果</el-tag>
- 【{{ item.eventKey }}】
- </div>
- <div v-else-if="item.type === MsgType.Event && item.event === 'scancode_push'">
- <el-tag>扫码结果</el-tag>
- 【{{ item.eventKey }}】
- </div>
- <div v-else-if="item.type === MsgType.Event && item.event === 'pic_sysphoto'">
- <el-tag>系统拍照发图</el-tag>
- </div>
- <div v-else-if="item.type === MsgType.Event && item.event === 'pic_photo_or_album'">
- <el-tag>拍照或者相册</el-tag>
- </div>
- <div v-else-if="item.type === MsgType.Event && item.event === 'pic_weixin'">
- <el-tag>微信相册</el-tag>
- </div>
- <div v-else-if="item.type === MsgType.Event && item.event === 'location_select'">
- <el-tag>选择地理位置</el-tag>
- </div>
- <div v-else-if="item.type === MsgType.Event">
- <el-tag type="danger">未知事件类型</el-tag>
- </div>
- <!-- 【消息】区域 -->
- <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" style="width: 100px" />
- </a>
- </div>
- <div
- v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
- style="text-align: center"
- >
- <WxVideoPlayer :url="item.mediaUrl" />
- </div>
- <div v-else-if="item.type === MsgType.Link" class="avue-card__detail">
- <el-link type="success" :underline="false" target="_blank" :href="item.url">
- <div class="avue-card__title"><i class="el-icon-link"></i>{{ item.title }}</div>
- </el-link>
- <div class="avue-card__info" style="height: unset">{{ item.description }}</div>
- </div>
- <!-- TODO 芋艿：待完善 -->
- <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" style="width: 300px">
- <!-- TODO 芋艿：待测试；详情页也存在类似的情况 -->
- <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>
- </div>
- </div>
- </div>
+ <MsgList :list="list" :account-id="accountId" :user="user" />
</div>
+
<div class="msg-send" v-loading="sendLoading">
<WxReplySelect ref="replySelectRef" v-model="reply" />
<el-button type="success" class="send-but" @click="sendMsg">发送(S)</el-button>
@@ -132,18 +31,12 @@
</template>
<script setup lang="ts" name="WxMsg">
-import WxReplySelect from '@/views/mp/components/wx-reply'
-import WxVideoPlayer from '@/views/mp/components/wx-video-play'
-import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
-import WxNews from '@/views/mp/components/wx-news'
-import WxLocation from '@/views/mp/components/wx-location'
-import WxMusic from '@/views/mp/components/wx-music'
+import WxReplySelect, { Reply, ReplyType } from '@/views/mp/components/wx-reply'
+import MsgList from './components/MsgList.vue'
import { getMessagePage, sendMessage } from '@/api/mp/message'
import { getUser } from '@/api/mp/user'
-import { formatDate } from '@/utils/formatTime'
import profile from '@/assets/imgs/profile.jpg'
-import wechat from '@/assets/imgs/wechat.png'
-import { MsgType } from './types'
+import { User } from './types'
const message = useMessage() // 消息弹窗
@@ -154,49 +47,30 @@ const props = defineProps({
}
})
-const nowStr = ref(new Date().getTime()) // 当前的时间戳，用于每次消息加载后，回到原位置；具体见 :id="'msg-div' + nowStr" 处
+const accountId = ref<number>(-1) // 公众号ID，需要通过userId初始化
+const msgDivId = `msg-div-{new Date().getTime()}` // 当前的时间戳，用于每次消息加载后，回到原位置；具体见 :id="'msg-div' + nowStr" 处
const loading = ref(false) // 消息列表是否正在加载中
-const loadMore = ref(true) // 是否可以加载更多
+const hasMore = ref(true) // 是否可以加载更多
const list = ref<any[]>([]) // 消息列表
const queryParams = reactive({
pageNo: 1, // 当前页数
pageSize: 14, // 每页显示多少条
- accountId: undefined
+ accountId: accountId
})
-interface User {
- nickname: string
- avatar: string
- accountId: number
-}
// 由于微信不再提供昵称，直接使用“用户”展示
const user: User = reactive({
nickname: '用户',
avatar: profile,
- accountId: 0 // 公众号账号编号
-})
-
-interface Mp {
- nickname: string
- avatar: string
-}
-const mp: Mp = reactive({
- nickname: '公众号',
- avatar: wechat
+ accountId: accountId // 公众号账号编号
})
// ========= 消息发送 =========
const sendLoading = ref(false) // 发送消息是否加载中
-interface Reply {
- type: MsgType
- accountId: number | null
- articles: any[]
-}
-
// 微信发送消息
const reply = ref<Reply>({
- type: MsgType.Text,
- accountId: null,
+ type: ReplyType.Text,
+ accountId: -1,
articles: []
})
@@ -207,8 +81,7 @@ onMounted(async () => {
const data = await getUser(props.userId)
user.nickname = data.nickname?.length > 0 ? data.nickname : user.nickname
user.avatar = user.avatar?.length > 0 ? data.avatar : user.avatar
- user.accountId = data.accountId
- queryParams.accountId = data.accountId
+ accountId.value = data.accountId
reply.value.accountId = data.accountId
refreshChange()
@@ -220,7 +93,11 @@ const sendMsg = async () => {
return
}
// 公众号限制：客服消息，公众号只允许发送一条
- if (reply.value.type === MsgType.News && reply.value.articles.length > 1) {
+ if (
+ reply.value.type === ReplyType.News &&
+ reply.value.articles &&
+ reply.value.articles.length > 1
+ ) {
reply.value.articles = [reply.value.articles[0]]
message.success('图文消息条数限制在 1 条以内，已默认发送第一条')
}
@@ -229,18 +106,18 @@ const sendMsg = async () => {
sendLoading.value = false
list.value = [...list.value, ...[data]]
- scrollToBottom()
+ await scrollToBottom()
// 发送后清空数据
replySelectRef.value?.clear()
}
-const loadingMore = () => {
+const loadMore = () => {
queryParams.pageNo++
getPage(queryParams, null)
}
-const getPage = async (page, params) => {
+const getPage = async (page: any, params: any) => {
loading.value = true
let dataTemp = await getMessagePage(
Object.assign(
@@ -254,7 +131,7 @@ const getPage = async (page, params) => {
)
)
- const msgDiv = document.getElementById('msg-div' + nowStr.value)
+ const msgDiv = document.getElementById(msgDivId)
let scrollHeight = 0
if (msgDiv) {
scrollHeight = msgDiv.scrollHeight
@@ -264,24 +141,23 @@ const getPage = async (page, params) => {
list.value = [...data, ...list.value]
loading.value = false
if (data.length < queryParams.pageSize || data.length === 0) {
- loadMore.value = false
+ hasMore.value = false
}
queryParams.pageNo = page.pageNo
queryParams.pageSize = page.pageSize
// 滚动到原来的位置
if (queryParams.pageNo === 1) {
// 定位到消息底部
- scrollToBottom()
+ await scrollToBottom()
} else if (data.length !== 0) {
// 定位滚动条
- await nextTick(() => {
- if (scrollHeight !== 0) {
- let div = document.getElementById('msg-div' + nowStr.value)
- if (div && msgDiv) {
- msgDiv.scrollTop = div.scrollHeight - scrollHeight - 100
- }
+ await nextTick()
+ if (scrollHeight !== 0) {
+ let div = document.getElementById(msgDivId)
+ if (div && msgDiv) {
+ msgDiv.scrollTop = div.scrollHeight - scrollHeight - 100
}
- })
+ }
}
}
@@ -290,26 +166,16 @@ const refreshChange = () => {
}
/** 定位到消息底部 */
-const scrollToBottom = () => {
- nextTick(() => {
- let div = document.getElementById('msg-div' + nowStr.value)
- if (div) {
- div.scrollTop = div.scrollHeight
- }
- })
+const scrollToBottom = async () => {
+ await nextTick()
+ let div = document.getElementById(msgDivId)
+ if (div) {
+ div.scrollTop = div.scrollHeight
+ }
}
</script>
<style lang="scss" scoped>
-/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
-@import './comment.scss';
-@import './card.scss';
-
-.msg-main {
- margin-top: -30px;
- padding: 10px;
-}
-
.msg-div {
height: 50vh;
overflow: auto;
@@ -322,11 +188,6 @@ const scrollToBottom = () => {
padding: 10px;
}
-.avatar-div {
- text-align: center;
- width: 80px;
-}
-
.send-but {
float: right;
margin-top: 8px;
diff --git a/src/views/mp/components/wx-msg/types.ts b/src/views/mp/components/wx-msg/types.ts
index b1989ea7..38a0ff86 100644
--- a/src/views/mp/components/wx-msg/types.ts
+++ b/src/views/mp/components/wx-msg/types.ts
@@ -9,3 +9,9 @@ export enum MsgType {
Music = 'music',
News = 'news'
}
+
+export interface User {
+ nickname: string
+ avatar: string
+ accountId: number
+}
From 036c9b33663b8aa82b0bd0a25b714348a23e32db Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sat, 22 Apr 2023 20:52:11 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20mp=E6=A8=A1=E5=9D=97=E7=9A=84?=
=?UTF-8?q?=E4=B8=80=E4=BA=9B=E5=B0=8F=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/mp/components/wx-music/main.vue | 4 ++--
src/views/mp/draft/components/CoverSelect.vue | 6 +++---
src/views/mp/draft/components/NewsForm.vue | 2 +-
src/views/mp/draft/index.vue | 17 ++++-------------
src/views/mp/menu/index.vue | 2 +-
5 files changed, 11 insertions(+), 20 deletions(-)
diff --git a/src/views/mp/components/wx-music/main.vue b/src/views/mp/components/wx-music/main.vue
index 70f4c58b..f528359d 100644
--- a/src/views/mp/components/wx-music/main.vue
+++ b/src/views/mp/components/wx-music/main.vue
@@ -55,6 +55,6 @@ defineExpose({
</script>
<style lang="scss" scoped>
-/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scc */
-@import url('../wx-msg/card.scss');
+/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss */
+@import '../wx-msg/card.scss';
</style>
diff --git a/src/views/mp/draft/components/CoverSelect.vue b/src/views/mp/draft/components/CoverSelect.vue
index 944b7d96..bbb2b44c 100644
--- a/src/views/mp/draft/components/CoverSelect.vue
+++ b/src/views/mp/draft/components/CoverSelect.vue
@@ -51,7 +51,7 @@
>
<WxMaterialSelect
type="image"
- :account-id="accountId"
+ :account-id="accountId!"
@select-material="onMaterialSelected"
/>
</el-dialog>
@@ -93,11 +93,11 @@ const showImageDialog = ref(false)
const fileList = ref<UploadFiles>([])
interface UploadData {
type: UploadType
- accountId: number | undefined
+ accountId: number
}
const uploadData: UploadData = reactive({
type: UploadType.Image,
- accountId: accountId
+ accountId: accountId!
})
/** 素材选择完成事件*/
diff --git a/src/views/mp/draft/components/NewsForm.vue b/src/views/mp/draft/components/NewsForm.vue
index a2b88a5b..97166a4b 100644
--- a/src/views/mp/draft/components/NewsForm.vue
+++ b/src/views/mp/draft/components/NewsForm.vue
@@ -125,7 +125,7 @@
</el-container>
</template>
-<script setup lang="ts">
+<script setup lang="ts" name="NewsForm">
import { Editor } from '@/components/Editor'
import { createEditorConfig } from '../editor-config'
import CoverSelect from './CoverSelect.vue'
diff --git a/src/views/mp/draft/index.vue b/src/views/mp/draft/index.vue
index d8e771a0..6b40bc35 100644
--- a/src/views/mp/draft/index.vue
+++ b/src/views/mp/draft/index.vue
@@ -76,7 +76,7 @@ import {
const message = useMessage() // 消息
-const accountId = ref<number>(0)
+const accountId = ref<number>(-1)
provide('accountId', accountId)
const loading = ref(true) // 列表的加载中
@@ -90,16 +90,7 @@ interface QueryParams {
const queryParams: QueryParams = reactive({
pageNo: 1,
pageSize: 10,
- accountId: 0
-})
-
-interface UploadData {
- type: 'image' | 'video' | 'audio'
- accountId: number
-}
-const uploadData: UploadData = reactive({
- type: 'image',
- accountId: 0
+ accountId: accountId
})
// ========== 草稿新建 or 修改 ==========
@@ -126,8 +117,8 @@ const onBeforeDialogClose = async (onDone: () => {}) => {
// ======================== 列表查询 ========================
/** 设置账号编号 */
const setAccountId = (id: number) => {
- queryParams.accountId = id
- uploadData.accountId = id
+ accountId.value = id
+ // queryParams.accountId = id
}
/** 查询列表 */
diff --git a/src/views/mp/menu/index.vue b/src/views/mp/menu/index.vue
index 442e33b5..cbec87dc 100644
--- a/src/views/mp/menu/index.vue
+++ b/src/views/mp/menu/index.vue
@@ -339,7 +339,7 @@ div {
.left {
position: relative;
- display: inline-block;
+ display: block;
float: left;
width: 350px;
height: 715px;
From 198752868ca8c3f84f250783b95d60fa3de9919c Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sat, 22 Apr 2023 23:43:35 +0800
Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20mp=E6=A8=A1=E5=9D=97=E7=BB=9F?=
=?UTF-8?q?=E4=B8=80accountId=E6=9C=AA=E5=88=9D=E5=A7=8B=E5=8C=96=E5=80=BC?=
=?UTF-8?q?=E4=B8=BA-1=EF=BC=8C=E5=88=A0=E9=99=A4QueryParams=E5=AE=9A?=
=?UTF-8?q?=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/mp/account/index.ts | 2 +-
src/views/mp/autoReply/index.vue | 15 ++++------
.../mp/components/wx-account-select/main.vue | 7 +++--
src/views/mp/draft/index.vue | 29 ++++++-------------
src/views/mp/freePublish/index.vue | 10 ++-----
src/views/mp/material/index.vue | 11 ++-----
src/views/mp/menu/index.vue | 2 +-
src/views/mp/message/index.vue | 17 ++++-------
src/views/mp/statistics/index.vue | 4 +--
src/views/mp/tag/index.vue | 11 ++-----
src/views/mp/user/index.vue | 17 ++++-------
11 files changed, 42 insertions(+), 83 deletions(-)
diff --git a/src/api/mp/account/index.ts b/src/api/mp/account/index.ts
index d641ef3c..e973cda3 100644
--- a/src/api/mp/account/index.ts
+++ b/src/api/mp/account/index.ts
@@ -1,7 +1,7 @@
import request from '@/config/axios'
export interface AccountVO {
- id?: number
+ id: number
name: string
}
diff --git a/src/views/mp/autoReply/index.vue b/src/views/mp/autoReply/index.vue
index 20a1e683..e2fcd7a0 100644
--- a/src/views/mp/autoReply/index.vue
+++ b/src/views/mp/autoReply/index.vue
@@ -103,6 +103,7 @@ import ReplyTable from './components/ReplyTable.vue'
import { MsgType } from './components/types'
const message = useMessage() // 消息
+const accountId = ref(-1) // 公众号ID
const msgType = ref<MsgType>(MsgType.Keyword) // 消息类型
const RequestMessageTypes = ['text', 'image', 'voice', 'video', 'shortvideo', 'location', 'link'] // 允许选择的请求消息类型
const loading = ref(true) // 遮罩层
@@ -110,15 +111,10 @@ const total = ref(0) // 总条数
const list = ref<any[]>([]) // 自动回复列表
const formRef = ref<FormInstance | null>(null) // 表单 ref
// 查询参数
-interface QueryParams {
- pageNo: number
- pageSize: number
- accountId: number
-}
-const queryParams: QueryParams = reactive({
+const queryParams = reactive({
pageNo: 1,
pageSize: 10,
- accountId: 0
+ accountId: accountId
})
const dialogTitle = ref('') // 弹出层标题
@@ -127,7 +123,7 @@ const replyForm = ref<any>({}) // 表单参数
// 回复消息
const reply = ref<Reply>({
type: ReplyType.Text,
- accountId: 0
+ accountId: -1
})
// 表单校验
const rules = {
@@ -137,8 +133,9 @@ const rules = {
/** 侦听账号变化 */
const onAccountChanged = (id: number) => {
- queryParams.accountId = id
+ accountId.value = id
reply.value.accountId = id
+ queryParams.pageNo = 1
getList()
}
diff --git a/src/views/mp/components/wx-account-select/main.vue b/src/views/mp/components/wx-account-select/main.vue
index 8dbad499..e2501657 100644
--- a/src/views/mp/components/wx-account-select/main.vue
+++ b/src/views/mp/components/wx-account-select/main.vue
@@ -8,13 +8,14 @@
import * as MpAccountApi from '@/api/mp/account'
const account: MpAccountApi.AccountVO = reactive({
- id: undefined,
+ id: -1,
name: ''
})
-const accountList: Ref<MpAccountApi.AccountVO[]> = ref([])
+
+const accountList = ref<MpAccountApi.AccountVO[]>([])
const emit = defineEmits<{
- (e: 'change', id: number, name: string): void
+ (e: 'change', id: number, name: string)
}>()
const handleQuery = async () => {
diff --git a/src/views/mp/draft/index.vue b/src/views/mp/draft/index.vue
index 6b40bc35..a916ed39 100644
--- a/src/views/mp/draft/index.vue
+++ b/src/views/mp/draft/index.vue
@@ -76,18 +76,14 @@ import {
const message = useMessage() // 消息
-const accountId = ref<number>(-1)
+const accountId = ref(-1)
provide('accountId', accountId)
const loading = ref(true) // 列表的加载中
const list = ref<any[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
-interface QueryParams {
- pageNo: number
- pageSize: number
- accountId: number
-}
-const queryParams: QueryParams = reactive({
+
+const queryParams = reactive({
pageNo: 1,
pageSize: 10,
accountId: accountId
@@ -102,7 +98,8 @@ const isSubmitting = ref(false)
/** 侦听公众号变化 **/
const onAccountChanged = (id: number) => {
- setAccountId(id)
+ accountId.value = id
+ queryParams.pageNo = 1
getList()
}
@@ -115,12 +112,6 @@ const onBeforeDialogClose = async (onDone: () => {}) => {
}
// ======================== 列表查询 ========================
-/** 设置账号编号 */
-const setAccountId = (id: number) => {
- accountId.value = id
- // queryParams.accountId = id
-}
-
/** 查询列表 */
const getList = async () => {
loading.value = true
@@ -161,10 +152,10 @@ const onSubmitNewsItem = async () => {
isSubmitting.value = true
try {
if (isCreating.value) {
- await MpDraftApi.createDraft(queryParams.accountId, newsList.value)
+ await MpDraftApi.createDraft(accountId.value, newsList.value)
message.notifySuccess('新增成功')
} else {
- await MpDraftApi.updateDraft(queryParams.accountId, mediaId.value, newsList.value)
+ await MpDraftApi.updateDraft(accountId.value, mediaId.value, newsList.value)
message.notifySuccess('更新成功')
}
} finally {
@@ -176,7 +167,6 @@ const onSubmitNewsItem = async () => {
// ======================== 草稿箱发布 ========================
const onPublish = async (item: Article) => {
- const accountId = queryParams.accountId
const mediaId = item.mediaId
const content =
'你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。' +
@@ -184,7 +174,7 @@ const onPublish = async (item: Article) => {
'发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。'
try {
await message.confirm(content)
- await MpFreePublishApi.submitFreePublish(accountId, mediaId)
+ await MpFreePublishApi.submitFreePublish(accountId.value, mediaId)
message.notifySuccess('发布成功')
await getList()
} catch {}
@@ -192,11 +182,10 @@ const onPublish = async (item: Article) => {
/** 删除按钮操作 */
const onDelete = async (item: Article) => {
- const accountId = queryParams.accountId
const mediaId = item.mediaId
try {
await message.confirm('此操作将永久删除该草稿, 是否继续?')
- await MpDraftApi.deleteDraft(accountId, mediaId)
+ await MpDraftApi.deleteDraft(accountId.value, mediaId)
message.notifySuccess('删除成功')
await getList()
} catch {}
diff --git a/src/views/mp/freePublish/index.vue b/src/views/mp/freePublish/index.vue
index 08a202c2..62ca1999 100644
--- a/src/views/mp/freePublish/index.vue
+++ b/src/views/mp/freePublish/index.vue
@@ -59,20 +59,16 @@ const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref<any[]>([]) // 列表的数据
-interface QueryParams {
- pageNo: number
- pageSize: number
- accountId: number
-}
-const queryParams: QueryParams = reactive({
+const queryParams = reactive({
pageNo: 1,
pageSize: 10,
- accountId: 0
+ accountId: -1
})
/** 侦听公众号变化 **/
const onAccountChanged = (id: number) => {
queryParams.accountId = id
+ queryParams.pageNo = 1
getList()
}
diff --git a/src/views/mp/material/index.vue b/src/views/mp/material/index.vue
index 0e2a87d6..b72c9ad6 100644
--- a/src/views/mp/material/index.vue
+++ b/src/views/mp/material/index.vue
@@ -100,16 +100,10 @@ const loading = ref(false) // 遮罩层
const list = ref<any[]>([]) // 总条数
const total = ref(0) // 数据列表
// 查询参数
-interface QueryParams {
- pageNo: number
- pageSize: number
- accountId: number
- permanent: boolean
-}
-const queryParams: QueryParams = reactive({
+const queryParams = reactive({
pageNo: 1,
pageSize: 10,
- accountId: 0,
+ accountId: -1,
permanent: true
})
const showCreateVideo = ref(false) // 是否新建视频的弹窗
@@ -117,6 +111,7 @@ const showCreateVideo = ref(false) // 是否新建视频的弹窗
/** 侦听公众号变化 **/
const onAccountChanged = (id: number) => {
queryParams.accountId = id
+ queryParams.pageNo = 1
getList()
}
diff --git a/src/views/mp/menu/index.vue b/src/views/mp/menu/index.vue
index cbec87dc..0b02cc16 100644
--- a/src/views/mp/menu/index.vue
+++ b/src/views/mp/menu/index.vue
@@ -65,7 +65,7 @@ const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__'
// ======================== 列表查询 ========================
const loading = ref(false) // 遮罩层
-const accountId = ref<number>(0)
+const accountId = ref(-1)
const accountName = ref<string>('')
const menuList = ref<Menu[]>([])
diff --git a/src/views/mp/message/index.vue b/src/views/mp/message/index.vue
index 85048f38..db92cc0f 100644
--- a/src/views/mp/message/index.vue
+++ b/src/views/mp/message/index.vue
@@ -93,20 +93,12 @@ const total = ref(0) // 数据的总页数
const list = ref<any[]>([]) // 当前页的列表数据
// 搜索参数
-interface QueryParams {
- pageNo: number
- pageSize: number
- openid: string | undefined
- accountId: number
- type: MsgType | undefined
- createTime: string[] | []
-}
-const queryParams: QueryParams = reactive({
+const queryParams = reactive({
pageNo: 1,
pageSize: 10,
- openid: undefined,
- accountId: 0,
- type: undefined,
+ openid: '',
+ accountId: -1,
+ type: MsgType.Text,
createTime: []
})
const queryFormRef = ref<FormInstance | null>(null) // 搜索的表单
@@ -120,6 +112,7 @@ const messageBox = reactive({
/** 侦听accountId */
const onAccountChanged = (id: number) => {
queryParams.accountId = id
+ queryParams.pageNo = 1
handleQuery()
}
diff --git a/src/views/mp/statistics/index.vue b/src/views/mp/statistics/index.vue
index cef8e079..4e2dbfcc 100644
--- a/src/views/mp/statistics/index.vue
+++ b/src/views/mp/statistics/index.vue
@@ -84,7 +84,7 @@ const dateRange = ref([
beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)),
endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24))
])
-const accountId = ref() // 选中的公众号编号
+const accountId = ref(-1) // 选中的公众号编号
const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
const xAxisDate = ref([] as any[]) // X 轴的日期范围
@@ -232,7 +232,7 @@ const getAccountList = async () => {
accountList.value = await MpAccountApi.getSimpleAccountList()
// 默认选中第一个
if (accountList.value.length > 0) {
- accountId.value = accountList.value[0].id
+ accountId.value = accountList.value[0].id!
}
}
diff --git a/src/views/mp/tag/index.vue b/src/views/mp/tag/index.vue
index a92d9127..8d452a5d 100644
--- a/src/views/mp/tag/index.vue
+++ b/src/views/mp/tag/index.vue
@@ -95,23 +95,18 @@ const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref<any[]>([]) // 列表的数据
-interface QueryParams {
- pageNo: number
- pageSize: number
- accountId: number
-}
-const queryParams: QueryParams = reactive({
+const queryParams = reactive({
pageNo: 1,
pageSize: 10,
- accountId: 0
+ accountId: -1
})
const formRef = ref<InstanceType<typeof TagForm> | null>(null)
/** 侦听公众号变化 **/
const onAccountChanged = (id: number) => {
- queryParams.pageNo = 1
queryParams.accountId = id
+ queryParams.pageNo = 1
getList()
}
diff --git a/src/views/mp/user/index.vue b/src/views/mp/user/index.vue
index 03e58a7f..422e219b 100644
--- a/src/views/mp/user/index.vue
+++ b/src/views/mp/user/index.vue
@@ -113,27 +113,20 @@ const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref<any[]>([]) // 列表的数据
-interface QueryParams {
- pageNo: number
- pageSize: number
- accountId: number
- openid: string | null
- nickname: string | null
-}
-const queryParams: QueryParams = reactive({
+const queryParams = reactive({
pageNo: 1,
pageSize: 10,
- accountId: 0,
- openid: null,
- nickname: null
+ accountId: -1,
+ openid: '',
+ nickname: ''
})
const queryFormRef = ref<FormInstance | null>(null) // 搜索的表单
const tagList = ref<any[]>([]) // 公众号标签列表
/** 侦听公众号变化 **/
const onAccountChanged = (id: number) => {
- queryParams.pageNo = 1
queryParams.accountId = id
+ queryParams.pageNo = 1
getList()
}
From cb4527748e70a74b616a095614503937887504a0 Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sat, 22 Apr 2023 23:45:14 +0800
Subject: [PATCH 5/5] =?UTF-8?q?refactor:=20mp/wx-msg=20=E9=87=87=E7=94=A8r?=
=?UTF-8?q?ef=E6=9D=A5=E5=AE=9E=E7=8E=B0=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/mp/components/wx-msg/main.vue | 30 ++++++++++---------------
1 file changed, 12 insertions(+), 18 deletions(-)
diff --git a/src/views/mp/components/wx-msg/main.vue b/src/views/mp/components/wx-msg/main.vue
index 5d28c201..079e9740 100644
--- a/src/views/mp/components/wx-msg/main.vue
+++ b/src/views/mp/components/wx-msg/main.vue
@@ -7,7 +7,7 @@
-->
<template>
<ContentWrap>
- <div class="msg-div" :id="msgDivId">
+ <div class="msg-div" ref="msgDivRef">
<!-- 加载更多 -->
<div v-loading="loading"></div>
<div v-if="!loading">
@@ -47,8 +47,7 @@ const props = defineProps({
}
})
-const accountId = ref<number>(-1) // 公众号ID，需要通过userId初始化
-const msgDivId = `msg-div-{new Date().getTime()}` // 当前的时间戳，用于每次消息加载后，回到原位置；具体见 :id="'msg-div' + nowStr" 处
+const accountId = ref(-1) // 公众号ID，需要通过userId初始化
const loading = ref(false) // 消息列表是否正在加载中
const hasMore = ref(true) // 是否可以加载更多
const list = ref<any[]>([]) // 消息列表
@@ -74,7 +73,8 @@ const reply = ref<Reply>({
articles: []
})
-const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null)
+const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null) // WxReplySelect组件ref，用于消息发送成功后清除内容
+const msgDivRef = ref() // 消息显示窗口ref，用于滚动到底部
/** 完成加载 */
onMounted(async () => {
@@ -89,7 +89,7 @@ onMounted(async () => {
// 执行发送
const sendMsg = async () => {
- if (!reply) {
+ if (!unref(reply)) {
return
}
// 公众号限制：客服消息，公众号只允许发送一条
@@ -117,7 +117,7 @@ const loadMore = () => {
getPage(queryParams, null)
}
-const getPage = async (page: any, params: any) => {
+const getPage = async (page: any, params: any = null) => {
loading.value = true
let dataTemp = await getMessagePage(
Object.assign(
@@ -131,11 +131,7 @@ const getPage = async (page: any, params: any) => {
)
)
- const msgDiv = document.getElementById(msgDivId)
- let scrollHeight = 0
- if (msgDiv) {
- scrollHeight = msgDiv.scrollHeight
- }
+ const scrollHeight = msgDivRef.value?.scrollHeight ?? 0
// 处理数据
const data = dataTemp.list.reverse()
list.value = [...data, ...list.value]
@@ -153,24 +149,22 @@ const getPage = async (page: any, params: any) => {
// 定位滚动条
await nextTick()
if (scrollHeight !== 0) {
- let div = document.getElementById(msgDivId)
- if (div && msgDiv) {
- msgDiv.scrollTop = div.scrollHeight - scrollHeight - 100
+ if (msgDivRef.value) {
+ msgDivRef.value.scrollTop = msgDivRef.value.scrollHeight - scrollHeight - 100
}
}
}
}
const refreshChange = () => {
- getPage(queryParams, null)
+ getPage(queryParams)
}
/** 定位到消息底部 */
const scrollToBottom = async () => {
await nextTick()
- let div = document.getElementById(msgDivId)
- if (div) {
- div.scrollTop = div.scrollHeight
+ if (msgDivRef.value) {
+ msgDivRef.value.scrollTop = msgDivRef.value.scrollHeight
}
}
</script>