huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-25 16:51:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

mp：前端增加 message 消息的展示

Browse Source
This commit is contained in:
YunaiV 2023-01-10 21:01:46 +08:00
parent 9cf88d1929
commit 6325dd288c
5 changed files with 97 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/message/vo/MpMessageBaseVO.java
View File

@ -10,6 +10,7 @@ import me.chanjar.weixin.common.api.WxConsts;
import java.util.List;
// TODO 芋艿：VO 的注解
/**
* 粉丝消息表 Base VO，提供给添加、修改、详细的子 VO 使用
* 如果子 VO 存在差异的字段，请不要添加到这里，影响 Swagger 文档生成
@ -158,6 +159,21 @@ public class MpMessageBaseVO {
@TableField(typeHandler = MpMessageDO.ArticleTypeHandler.class)
private List<MpMessageDO.Article> articles;
/**
* 音乐链接
*
* 消息类型为 {@link WxConsts.XmlMsgType} 的 MUSIC
*/
private String musicUrl;
/**
* 高质量音乐链接
*
* WIFI 环境优先使用该链接播放音乐
*
* 消息类型为 {@link WxConsts.XmlMsgType} 的 MUSIC
*/
private String hqMusicUrl;
// ========= 事件推送 https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Receiving_event_pushes.html
/**

15
yudao-ui-admin/src/views/mp/components/wx-msg/card.scss
View File

@ -84,3 +84,18 @@
}
}
}
/** joolun 额外加的 */
.avue-comment__main {
flex: unset!important;
border-radius: 5px!important;
margin: 0 8px!important;
}
.avue-comment__header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.avue-comment__body {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

34
yudao-ui-admin/src/views/mp/components/wx-msg/main.vue
View File

@ -68,22 +68,13 @@
<div v-else-if="item.type === 'location'">
<wx-location :label="item.label" :location-y="item.locationY" :location-x="item.locationX" />
</div>
<div v-else-if="item.type === 'news'" style="width: 300px"> <!-- TODO 芋艿：待测试；详情页也存在类似的情况 -->
<wx-news :articles="item.articles" />
</div>
<!-- <div v-if="item.repType == 'music'">-->
<!-- <el-link type="success" :underline="false" target="_blank" :href="item.repUrl">-->
<!-- <div class="avue-card__body" style="padding:10px;background-color: #fff;border-radius: 5px">-->
<!-- <div class="avue-card__avatar"><img :src="item.repThumbUrl" alt=""></div>-->
<!-- <div class="avue-card__detail">-->
<!-- <div class="avue-card__title" style="margin-bottom:unset">{{item.repName}}</div>-->
<!-- <div class="avue-card__info" style="height: unset">{{item.repDesc}}</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-link>-->
<!-- </div>-->
<div v-else-if="item.type === 'music'">
<wx-music :title="item.title" :description="item.description" :thumb-media-url="item.thumbMediaUrl"
:music-url="item.musicUrl" :hq-music-url="item.hqMusicUrl" />
</div>
</div>
</div>
</div>
@ -103,6 +94,7 @@
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
import WxNews from '@/views/mp/components/wx-news/main.vue';
import WxLocation from '@/views/mp/components/wx-location/main.vue';
import WxMusic from '@/views/mp/components/wx-music/main.vue';
export default {
name: "wxMsg",
@ -111,7 +103,8 @@
WxVideoPlayer,
WxVoicePlayer,
WxNews,
WxLocation
WxLocation,
WxMusic
},
props: {
wxUserId: {
@ -245,19 +238,6 @@
.msg-send {
padding: 10px;
}
.avue-comment__main {
flex: unset!important;
border-radius: 5px!important;
margin: 0 8px!important;
}
.avue-comment__header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.avue-comment__body {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.avatar-div {
text-align: center;
width: 80px;

52
yudao-ui-admin/src/views/mp/components/wx-music/main.vue Normal file
View File

@ -0,0 +1,52 @@
<!--
【微信消息 - 音乐】
-->
<template>
<div>
<el-link type="success" :underline="false" target="_blank" :href="hqMusicUrl ? hqMusicUrl : musicUrl">
<div class="avue-card__body" style="padding:10px;background-color: #fff;border-radius: 5px">
<div class="avue-card__avatar">
<img :src="thumbMediaUrl" alt=""/>
</div>
<div class="avue-card__detail">
<div class="avue-card__title" style="margin-bottom:unset">{{ title }}</div>
<div class="avue-card__info" style="height: unset">{{ description }}</div>
</div>
</div>
</el-link>
</div>
</template>
<script>
export default {
name: "wxMusic",
props: {
title: {
required: false,
type: String
},
description: {
required: false,
type: String
},
musicUrl: {
required: false,
type: String
},
hqMusicUrl: {
required: false,
type: String
},
thumbMediaUrl: {
required: true,
type: String
},
}
};
</script>
<style lang="scss" scoped>
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scc */
@import '../wx-msg/card.scss';
</style>

8
yudao-ui-admin/src/views/mp/message/index.vue
View File

@ -89,6 +89,10 @@
<div v-else-if="scope.row.type === 'location'">
<wx-location :label="scope.row.label" :location-y="scope.row.locationY" :location-x="scope.row.locationX" />
</div>
<div v-else-if="scope.row.type === 'music'">
<wx-music :title="scope.row.title" :description="scope.row.description" :thumb-media-url="scope.row.thumbMediaUrl"
:music-url="scope.row.musicUrl" :hq-music-url="scope.row.hqMusicUrl" />
</div>
<div v-else>
<el-tag type="danger" size="mini">未知消息类型</el-tag>
</div>
@ -119,6 +123,7 @@ import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue';
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
import WxMsg from '@/views/mp/components/wx-msg/main.vue';
import WxLocation from '@/views/mp/components/wx-location/main.vue';
import WxMusic from '@/views/mp/components/wx-music/main.vue';
export default {
name: "WxFansMsg",
@ -126,7 +131,8 @@ export default {
WxVideoPlayer,
WxVoicePlayer,
WxMsg,
WxLocation
WxLocation,
WxMusic
},
data() {
return {