From 2b84489969663c9308f01c1156d914e86c068998 Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Thu, 4 May 2023 22:45:12 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20mp/wx-msg=E6=8B=86=E5=88=86Msg?=
=?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../mp/components/wx-msg/components/Msg.vue | 67 +++++++++++++++++++
.../components/wx-msg/components/MsgList.vue | 55 +--------------
src/views/mp/components/wx-msg/main.vue | 2 +-
3 files changed, 71 insertions(+), 53 deletions(-)
create mode 100644 src/views/mp/components/wx-msg/components/Msg.vue
diff --git a/src/views/mp/components/wx-msg/components/Msg.vue b/src/views/mp/components/wx-msg/components/Msg.vue
new file mode 100644
index 00000000..eff834c9
--- /dev/null
+++ b/src/views/mp/components/wx-msg/components/Msg.vue
@@ -0,0 +1,67 @@
+<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" 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>
+
+ <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">
+ <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>
+
+<script setup lang="ts" name="Msg">
+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 { MsgType } from '../types'
+
+const props = defineProps<{
+ item: any
+}>()
+
+const item = ref<any>(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
index 561d619a..f759adda 100644
--- a/src/views/mp/components/wx-msg/components/MsgList.vue
+++ b/src/views/mp/components/wx-msg/components/MsgList.vue
@@ -18,65 +18,16 @@
class="avue-comment__body"
:style="item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''"
>
- <!-- 【事件】区域 TODO 芋艿：是不是把拆个 Message 出来，里面包括 MsgEvent + 各种其它消息，分开有点不够整体 -->
- <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>
+ <Msg :item="item" />
</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 Msg from './Msg.vue'
import { formatDate } from '@/utils/formatTime'
-import { MsgType, User } from '../types'
+import { User } from '../types'
import avatarWechat from '@/assets/imgs/wechat.png'
const props = defineProps<{
diff --git a/src/views/mp/components/wx-msg/main.vue b/src/views/mp/components/wx-msg/main.vue
index 079e9740..1eeab64a 100644
--- a/src/views/mp/components/wx-msg/main.vue
+++ b/src/views/mp/components/wx-msg/main.vue
@@ -74,7 +74,7 @@ const reply = ref<Reply>({
})
const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null) // WxReplySelect组件ref，用于消息发送成功后清除内容
-const msgDivRef = ref() // 消息显示窗口ref，用于滚动到底部
+const msgDivRef = ref<HTMLDivElement | null>(null) // 消息显示窗口ref，用于滚动到底部
/** 完成加载 */
onMounted(async () => {