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

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

@@ -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
 
     /**

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

@@ -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;
+}

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

@@ -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;

yudao-ui-admin/src/views/mp/components/wx-music/main.vue

@@ -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>

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

@@ -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 {