Skip to content

Commit f848f3b

Browse files
dhb52dhb52
committed
refactor: mp/wx-msg 拆分组件
1 parent 917b9d1 commit f848f3b

File tree

4 files changed

+207
-179
lines changed

4 files changed

+207
-179
lines changed

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<div>
3+
<div v-if="item.event === 'subscribe'">
4+
<el-tag type="success">关注</el-tag>
5+
</div>
6+
<div v-else-if="item.event === 'unsubscribe'">
7+
<el-tag type="danger">取消关注</el-tag>
8+
</div>
9+
<div v-else-if="item.event === 'CLICK'">
10+
<el-tag>点击菜单</el-tag>
11+
【{{ item.eventKey }}】
12+
</div>
13+
<div v-else-if="item.event === 'VIEW'">
14+
<el-tag>点击菜单链接</el-tag>
15+
【{{ item.eventKey }}】
16+
</div>
17+
<div v-else-if="item.event === 'scancode_waitmsg'">
18+
<el-tag>扫码结果</el-tag>
19+
【{{ item.eventKey }}】
20+
</div>
21+
<div v-else-if="item.event === 'scancode_push'">
22+
<el-tag>扫码结果</el-tag>
23+
【{{ item.eventKey }}】
24+
</div>
25+
<div v-else-if="item.event === 'pic_sysphoto'">
26+
<el-tag>系统拍照发图</el-tag>
27+
</div>
28+
<div v-else-if="item.event === 'pic_photo_or_album'">
29+
<el-tag>拍照或者相册</el-tag>
30+
</div>
31+
<div v-else-if="item.event === 'pic_weixin'">
32+
<el-tag>微信相册</el-tag>
33+
</div>
34+
<div v-else-if="item.event === 'location_select'">
35+
<el-tag>选择地理位置</el-tag>
36+
</div>
37+
<div v-else>
38+
<el-tag type="danger">未知事件类型</el-tag>
39+
</div>
40+
</div>
41+
</template>
42+
43+
<script setup lang="ts">
44+
const props = defineProps<{
45+
item: any
46+
}>()
47+
48+
const item = ref(props.item)
49+
</script>
50+
51+
<style scoped></style>

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<template>
2+
<div class="execution" v-for="item in props.list" :key="item.id">
3+
<div
4+
class="avue-comment"
5+
:class="{ 'avue-comment--reverse': item.sendFrom === SendFrom.MpBot }"
6+
>
7+
<div class="avatar-div">
8+
<img :src="getAvatar(item.sendFrom)" class="avue-comment__avatar" />
9+
<div class="avue-comment__author">
10+
{{ getNickname(item.sendFrom) }}
11+
</div>
12+
</div>
13+
<div class="avue-comment__main">
14+
<div class="avue-comment__header">
15+
<div class="avue-comment__create_time">{{ formatDate(item.createTime) }}</div>
16+
</div>
17+
<div
18+
class="avue-comment__body"
19+
:style="item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''"
20+
>
21+
<!-- 【事件】区域 -->
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>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</template>
71+
72+
<script setup lang="ts" name="MsgList">
73+
import WxVideoPlayer from '@/views/mp/components/wx-video-play'
74+
import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
75+
import WxNews from '@/views/mp/components/wx-news'
76+
import WxLocation from '@/views/mp/components/wx-location'
77+
import WxMusic from '@/views/mp/components/wx-music'
78+
import MsgEvent from './MsgEvent.vue'
79+
import { formatDate } from '@/utils/formatTime'
80+
import { MsgType, User } from '../types'
81+
import avatarWechat from '@/assets/imgs/wechat.png'
82+
83+
const props = defineProps<{
84+
list: any[]
85+
accountId: number
86+
user: User
87+
}>()
88+
89+
enum SendFrom {
90+
User = 1,
91+
MpBot = 2
92+
}
93+
94+
const getAvatar = (sendFrom: SendFrom) =>
95+
sendFrom === SendFrom.User ? props.user.avatar : avatarWechat
96+
97+
const getNickname = (sendFrom: SendFrom) =>
98+
sendFrom === SendFrom.User ? props.user.nickname : '公众号'
99+
</script>
100+
101+
<style lang="scss" scoped>
102+
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
103+
@import '../comment.scss';
104+
@import '../card.scss';
105+
106+
.avatar-div {
107+
text-align: center;
108+
width: 80px;
109+
}
110+
</style>

0 commit comments

Comments
 (0)