mp：自定义菜单的图文选择

yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/menu/vo/MpMenuBaseVO.java

@@ -57,6 +57,10 @@ public class MpMenuBaseVO {
     @NotEmpty(message = "小程序的页面路径不能为空", groups = MiniProgramButtonGroup.class)
     private String miniProgramPagePath;
 
+    @ApiModelProperty(value ="跳转图文的媒体编号", example = "jCQk93AIIgp8ixClWcW_NXXqBKInNWNmq2XnPeDZl7IMVqWiNeL4FfELtggRXd83")
+    @NotEmpty(message = "跳转图文的媒体编号不能为空", groups = ViewLimitedButtonGroup.class)
+    private String articleId;
+
     // ========== 消息内容 ==========
 
     @ApiModelProperty(value = "消息类型", example = "text",
@@ -65,7 +69,7 @@ public class MpMenuBaseVO {
     private String replyMessageType;
 
     @ApiModelProperty(value = "回复的消息内容", example = "欢迎关注")
-    @NotEmpty(message = "回复的消息内容不能为空", groups = {TextMessageGroup.class})
+    @NotEmpty(message = "回复的消息内容不能为空", groups = TextMessageGroup.class)
     private String replyContent;
 
     @ApiModelProperty(value = "回复的媒体 id", example = "123456")
@@ -96,7 +100,7 @@ public class MpMenuBaseVO {
      *
      * 消息类型为 {@link WxConsts.XmlMsgType} 的 NEWS
      */
-    @NotNull(message = "回复的图文消息不能为空", groups = NewsMessageGroup.class)
+    @NotNull(message = "回复的图文消息不能为空", groups = {NewsMessageGroup.class, ViewLimitedButtonGroup.class})
     @Valid
     private List<MpMessageDO.Article> replyArticles;
 

yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/dal/dataobject/menu/MpMenuDO.java

@@ -96,6 +96,11 @@ public class MpMenuDO extends BaseDO {
      */
     private String miniProgramPagePath;
 
+    /**
+     * 跳转图文的媒体编号
+     */
+    private String articleId;
+
     // ========== 消息内容 ==========
 
     /**

yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/framework/mp/core/util/MpUtils.java

@@ -72,6 +72,9 @@ public class MpUtils {
                 group = ScanCodeWaitMsgButtonGroup.class;
                 validateMessage(validator, messageType, button); // 需要额外校验回复的消息格式
                 break;
+            case "article_" + WxConsts.MenuButtonType.VIEW_LIMITED:
+                group = ViewLimitedButtonGroup.class;
+                break;
             case WxConsts.MenuButtonType.SCANCODE_PUSH: // 不用校验，直接 return 即可
             case WxConsts.MenuButtonType.PIC_SYSPHOTO:
             case WxConsts.MenuButtonType.PIC_PHOTO_OR_ALBUM:
@@ -156,4 +159,9 @@ public class MpUtils {
      * SCANCODE_WAITMSG 类型的按钮，参数校验 Group
      */
     public interface ScanCodeWaitMsgButtonGroup {}
+
+    /**
+     * VIEW_LIMITED 类型的按钮，参数校验 Group
+     */
+    public interface ViewLimitedButtonGroup {}
 }

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

@@ -42,9 +42,9 @@
         type: Array // title - 标题；description - 描述；picUrl - 图片连接；url - 跳转链接
       }
     },
-    created() {
-      console.log(this.articles)
-    },
+    // created() {
+    //   console.log(this.articles)
+    // },
   };
 </script>
 

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

@@ -113,21 +113,23 @@ SOFTWARE.
               </div>
               <div class="configur_content" v-if="tempObj.type === 'article_view_limited'">
                 <el-row>
-                  <div class="select-item" v-if="tempObj && tempObj.content && tempObj.content.articles">
-                    <WxNews :objData="tempObj.content.articles"></WxNews>
+                  <div class="select-item" v-if="tempObj && tempObj.replyArticles">
+                    <wx-news :articles="tempObj.replyArticles" />
                     <el-row class="ope-row">
-                        <el-button type="danger" icon="el-icon-delete" circle @click="deleteTempObj" />
+                        <el-button type="danger" icon="el-icon-delete" circle @click="deleteMaterial" />
                     </el-row>
                   </div>
-                  <div v-if="!tempObj.content || !tempObj.content.articles">
+                  <div v-else>
                     <el-row>
                       <el-col :span="24" style="text-align: center">
-                        <el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
+                        <el-button type="success" @click="openMaterial">
+                          素材库选择<i class="el-icon-circle-check el-icon--right"></i>
+                        </el-button>
                       </el-col>
                     </el-row>
                   </div>
                   <el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%">
-                    <WxMaterialSelect :objData="{repType:'news'}" @selectMaterial="selectMaterial"></WxMaterialSelect>
+                    <wx-material-select :objData="{type: 'news', accountId: this.accountId}" @selectMaterial="selectMaterial" />
                   </el-dialog>
                 </el-row>
               </div>
@@ -148,7 +150,7 @@ SOFTWARE.
 <script>
 import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
 import WxNews from '@/views/mp/components/wx-news/main.vue';
-import WxMaterialSelect from '@/views/mp/components/wx-news/main.vue'
+import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
 import { deleteMenu, getMenuList, saveMenu } from "@/api/mp/menu";
 import { getSimpleAccounts } from "@/api/mp/account";
 
@@ -359,10 +361,9 @@ export default {
         this.$delete( item, 'miniProgramPagePath')
         this.$delete( item, 'url')
         this.$delete( item, 'reply')
-        // TODO 芋艿：需要搞的属性弄下
-
-        this.$delete( item, 'article_id')
-        this.$delete( item, 'textContent')
+        this.$delete( item, 'articleId')
+        this.$delete( item, 'replyArticles')
+        // 关闭配置面板
         this.showConfigureContent = false
       }
 
@@ -471,24 +472,37 @@ export default {
     openMaterial() {
       this.dialogNewsVisible = true
     },
-    selectMaterial(item){
-      if(item.content.articles.length>1){
+    selectMaterial(item) {
+      const articleId = item.articleId;
+      const articles = item.content.newsItem;
+      // 提示，针对多图文
+      if (articles.length > 1) {
         this.$alert('您选择的是多图文，将默认跳转第一篇', '提示', {
           confirmButtonText: '确定'
         })
       }
       this.dialogNewsVisible = false
-      this.tempObj.article_id = item.articleId
-      this.tempObj.mediaName = item.name
-      this.tempObj.url = item.url
-      item.mediaType = this.tempObj.mediaType
-      item.content.articles = item.content.articles.slice(0,1)
-      this.tempObj.content = item.content
+
+      // 设置菜单的回复
+      this.tempObj.articleId = articleId;
+      this.tempObj.replyArticles = [];
+      articles.forEach(article => {
+        this.tempObj.replyArticles.push({
+          title: article.title,
+          description: article.digest,
+          picUrl: article.picUrl,
+          url: article.url,
+        })
+      })
+      // this.tempObj.mediaName = item.name
+      // this.tempObj.url = item.url
+      // item.mediaType = this.tempObj.mediaType
+      // item.content.articles = item.content.articles.slice(0,1)
+      // this.tempObj.content = item.content
     },
-    deleteTempObj() {
-        this.$delete(this.tempObj,'repName')
-        this.$delete(this.tempObj,'repUrl')
-        this.$delete(this.tempObj,'content')
+    deleteMaterial() {
+        this.$delete(this.tempObj,'articleId')
+        this.$delete(this.tempObj,'replyArticles')
     },
   },
 }