Skip to content

Commit 0ceddc9

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!137 MP模块重构，功能增强
Merge pull request !137 from dhb52/dev
2 parents 9680a20 + 88f4502 commit 0ceddc9

File tree

19 files changed

+286
-306
lines changed

19 files changed

+286
-306
lines changed

‎src/api/mp/account/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import request from '@/config/axios'
22

33
export interface AccountVO {
4-
id?: number
4+
id: number
55
name: string
66
}
77

‎src/views/mp/autoReply/index.vue

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -103,22 +103,18 @@ import ReplyTable from './components/ReplyTable.vue'
103103
import { MsgType } from './components/types'
104104
const message = useMessage() // 消息
105105
106+
const accountId = ref(-1) // 公众号ID
106107
const msgType = ref<MsgType>(MsgType.Keyword) // 消息类型
107108
const RequestMessageTypes = ['text', 'image', 'voice', 'video', 'shortvideo', 'location', 'link'] // 允许选择的请求消息类型
108109
const loading = ref(true) // 遮罩层
109110
const total = ref(0) // 总条数
110111
const list = ref<any[]>([]) // 自动回复列表
111112
const formRef = ref<FormInstance | null>(null) // 表单 ref
112113
// 查询参数
113-
interface QueryParams {
114-
pageNo: number
115-
pageSize: number
116-
accountId: number
117-
}
118-
const queryParams: QueryParams = reactive({
114+
const queryParams = reactive({
119115
pageNo: 1,
120116
pageSize: 10,
121-
accountId: 0
117+
accountId: accountId
122118
})
123119
124120
const dialogTitle = ref('') // 弹出层标题
@@ -127,7 +123,7 @@ const replyForm = ref<any>({}) // 表单参数
127123
// 回复消息
128124
const reply = ref<Reply>({
129125
type: ReplyType.Text,
130-
accountId: 0
126+
accountId: -1
131127
})
132128
// 表单校验
133129
const rules = {
@@ -137,8 +133,9 @@ const rules = {
137133
138134
/** 侦听账号变化 */
139135
const onAccountChanged = (id: number) => {
140-
queryParams.accountId = id
136+
accountId.value = id
141137
reply.value.accountId = id
138+
queryParams.pageNo = 1
142139
getList()
143140
}
144141

‎src/views/mp/components/wx-account-select/main.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@
88
import * as MpAccountApi from '@/api/mp/account'
99
1010
const account: MpAccountApi.AccountVO = reactive({
11-
id: undefined,
11+
id: -1,
1212
name: ''
1313
})
14-
const accountList: Ref<MpAccountApi.AccountVO[]> = ref([])
14+
15+
const accountList = ref<MpAccountApi.AccountVO[]>([])
1516
1617
const emit = defineEmits<{
17-
(e: 'change', id: number, name: string): void
18+
(e: 'change', id: number, name: string)
1819
}>()
1920
2021
const handleQuery = async () => {

‎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)