Skip to content

Commit 2b84489

Browse files
dhb52dhb52
committed
refactor: mp/wx-msg拆分Msg组件
1 parent 1c77ba8 commit 2b84489

File tree

3 files changed

+71
-53
lines changed

3 files changed

+71
-53
lines changed

‎src/views/mp/components/wx-msg/components/Msg.vue

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div>
3+
<MsgEvent v-if="item.type === MsgType.Event" :item="item" />
4+
5+
<div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
6+
7+
<div v-else-if="item.type === MsgType.Voice">
8+
<WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
9+
</div>
10+
11+
<div v-else-if="item.type === MsgType.Image">
12+
<a target="_blank" :href="item.mediaUrl">
13+
<img :src="item.mediaUrl" style="width: 100px" />
14+
</a>
15+
</div>
16+
17+
<div
18+
v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
19+
style="text-align: center"
20+
>
21+
<WxVideoPlayer :url="item.mediaUrl" />
22+
</div>
23+
24+
<div v-else-if="item.type === MsgType.Link" class="avue-card__detail">
25+
<el-link type="success" :underline="false" target="_blank" :href="item.url">
26+
<div class="avue-card__title"><i class="el-icon-link"></i>{{ item.title }}</div>
27+
</el-link>
28+
<div class="avue-card__info" style="height: unset">{{ item.description }}</div>
29+
</div>
30+
31+
<div v-else-if="item.type === MsgType.Location">
32+
<WxLocation :label="item.label" :location-y="item.locationY" :location-x="item.locationX" />
33+
</div>
34+
35+
<div v-else-if="item.type === MsgType.News" style="width: 300px">
36+
<WxNews :articles="item.articles" />
37+
</div>
38+
39+
<div v-else-if="item.type === MsgType.Music">
40+
<WxMusic
41+
:title="item.title"
42+
:description="item.description"
43+
:thumb-media-url="item.thumbMediaUrl"
44+
:music-url="item.musicUrl"
45+
:hq-music-url="item.hqMusicUrl"
46+
/>
47+
</div>
48+
</div>
49+
</template>
50+
51+
<script setup lang="ts" name="Msg">
52+
import WxVideoPlayer from '@/views/mp/components/wx-video-play'
53+
import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
54+
import WxNews from '@/views/mp/components/wx-news'
55+
import WxLocation from '@/views/mp/components/wx-location'
56+
import WxMusic from '@/views/mp/components/wx-music'
57+
import MsgEvent from './MsgEvent.vue'
58+
import { MsgType } from '../types'
59+
60+
const props = defineProps<{
61+
item: any
62+
}>()
63+
64+
const item = ref<any>(props.item)
65+
</script>
66+
67+
<style scoped></style>

‎src/views/mp/components/wx-msg/components/MsgList.vue

Lines changed: 3 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -18,65 +18,16 @@
1818
class="avue-comment__body"
1919
:style="item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''"
2020
>
21-
<!-- 【事件】区域 TODO 芋艿：是不是把拆个 Message 出来，里面包括 MsgEvent + 各种其它消息，分开有点不够整体 -->
22-
<MsgEvent v-if="item.type === MsgType.Event" :item="item" />
23-
<!-- 【消息】区域 -->
24-
<div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
25-
<div v-else-if="item.type === MsgType.Voice">
26-
<WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
27-
</div>
28-
<div v-else-if="item.type === MsgType.Image">
29-
<a target="_blank" :href="item.mediaUrl">
30-
<img :src="item.mediaUrl" style="width: 100px" />
31-
</a>
32-
</div>
33-
<div
34-
v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
35-
style="text-align: center"
36-
>
37-
<WxVideoPlayer :url="item.mediaUrl" />
38-
</div>
39-
<div v-else-if="item.type === MsgType.Link" class="avue-card__detail">
40-
<el-link type="success" :underline="false" target="_blank" :href="item.url">
41-
<div class="avue-card__title"><i class="el-icon-link"></i>{{ item.title }}</div>
42-
</el-link>
43-
<div class="avue-card__info" style="height: unset">{{ item.description }}</div>
44-
</div>
45-
<!-- TODO 芋艿：待完善 -->
46-
<div v-else-if="item.type === MsgType.Location">
47-
<WxLocation
48-
:label="item.label"
49-
:location-y="item.locationY"
50-
:location-x="item.locationX"
51-
/>
52-
</div>
53-
<div v-else-if="item.type === MsgType.News" style="width: 300px">
54-
<!-- TODO 芋艿：待测试；详情页也存在类似的情况 -->
55-
<WxNews :articles="item.articles" />
56-
</div>
57-
<div v-else-if="item.type === MsgType.Music">
58-
<WxMusic
59-
:title="item.title"
60-
:description="item.description"
61-
:thumb-media-url="item.thumbMediaUrl"
62-
:music-url="item.musicUrl"
63-
:hq-music-url="item.hqMusicUrl"
64-
/>
65-
</div>
21+
<Msg :item="item" />
6622
</div>
6723
</div>
6824
</div>
6925
</div>
7026
</template>
7127
<script setup lang="ts" name="MsgList">
72-
import WxVideoPlayer from '@/views/mp/components/wx-video-play'
73-
import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
74-
import WxNews from '@/views/mp/components/wx-news'
75-
import WxLocation from '@/views/mp/components/wx-location'
76-
import WxMusic from '@/views/mp/components/wx-music'
77-
import MsgEvent from './MsgEvent.vue'
28+
import Msg from './Msg.vue'
7829
import { formatDate } from '@/utils/formatTime'
79-
import { MsgType, User } from '../types'
30+
import { User } from '../types'
8031
import avatarWechat from '@/assets/imgs/wechat.png'
8132
8233
const props = defineProps<{

‎src/views/mp/components/wx-msg/main.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ const reply = ref<Reply>({
7474
})
7575
7676
const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null) // WxReplySelect组件ref，用于消息发送成功后清除内容
77-
const msgDivRef = ref() // 消息显示窗口ref，用于滚动到底部
77+
const msgDivRef = ref<HTMLDivElement | null>(null) // 消息显示窗口ref，用于滚动到底部
7878
7979
/** 完成加载 */
8080
onMounted(async () => {

0 commit comments

Comments
 (0)