mp：增加发送【图文】消息

Author: YunaiV

src/api/mp/freePublish.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 获得公众号素材分页
+export function getFreePublishPage(query) {
+  return request({
+    url: '/mp/free-publish/page',
+    method: 'get',
+    params: query
+  })
+}

src/views/mp/components/wx-material-select/main.vue

@@ -48,7 +48,7 @@
     </el-table>
     <!-- 分页组件 -->
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getMaterialPage"/>
+                @pagination="getPage"/>
   </div>
   <div v-else-if="objData.type === 'video'">
     <!-- 列表 -->
@@ -78,41 +78,32 @@
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                 @pagination="getMaterialPage"/>
   </div>
-  <div v-else-if="objData.type == 'news'">
+  <div v-else-if="objData.type === 'news'">
     <div class="waterfall" v-loading="loading">
-      <div class="waterfall-item" v-for="item in list" :key="item.mediaId" v-if="item.content && item.content.articles">
-        <WxNews :objData="item.content.articles"></WxNews>
+      <div class="waterfall-item" v-for="item in list" :key="item.mediaId" v-if="item.content && item.content.newsItem">
+        <wx-news :articles="item.content.newsItem" />
         <el-row class="ope-row">
-          <el-button size="mini" type="success" @click="selectMaterial(item)">选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
+          <el-button size="mini" type="success" @click="selectMaterial(item)">
+            选择<i class="el-icon-circle-check el-icon--right"></i>
+          </el-button>
         </el-row>
       </div>
     </div>
-    <div v-if="list.length <=0 && !loading" class="el-table__empty-block">
+    <!-- 分页组件 -->
+    <div v-if="list.length <= 0 && !loading" class="el-table__empty-block">
       <span class="el-table__empty-text">暂无数据</span>
     </div>
-    <span slot="footer" class="dialog-footer">
-      <el-pagination
-        @size-change="sizeChange"
-        :current-page.sync="page.currentPage"
-        :page-sizes="[10, 20]"
-        :page-size="page.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="page.total"
-        class="pagination"
-      >
-      </el-pagination>
-    </span>
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getMaterialPage"/>
   </div>
 </template>
 
 <script>
-
-  // import { tableOptionVoice } from '@/const/crud/wxmp/wxmaterial_voice'
-  // import { tableOptionVideo } from '@/const/crud/wxmp/wxmaterial_video'
   import WxNews from '@/views/mp/components/wx-news/main.vue';
   import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
   import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue';
   import { getMaterialPage } from "@/api/mp/material";
+  import {getFreePublishPage} from "@/api/mp/freePublish";
 
   export default {
     name: "wxMaterialSelect",
@@ -143,56 +134,40 @@
         queryParams: {
           pageNo: 1,
           pageSize: 10,
+          accountId: this.objData.accountId,
         },
         // tableOptionVoice: tableOptionVoice,
         // tableOptionVideo: tableOptionVideo,
       }
     },
     created() {
-      this.getPage(this.page)
+      this.getPage()
     },
     methods:{
-      selectMaterial(item){
+      selectMaterial(item) {
         this.$emit('selectMaterial', item)
       },
-      getPage(page, params) {
+      getPage() {
         this.loading = true
-        if(this.objData.type == 'news'){ // 【图文】
-          if(this.newsType == '1'){
-            getPageNews(Object.assign({
-              current: page.currentPage,
-              size: page.pageSize,
-              appId:this.appId,
-            }, params)).then(response => {
-              let tableData = response.data.items
-              tableData.forEach(item => {
-                item.mediaId = item.articleId
-                item.content.articles = item.content.newsItem
-              })
-              this.list = tableData
-              this.page.total = response.data.totalCount
-              this.page.currentPage = page.currentPage
-              this.page.pageSize = page.pageSize
-              this.loading = false
-            })
-          }else if(this.newsType == '2'){
-            getPageNewsDraft(Object.assign({
-              current: page.currentPage,
-              size: page.pageSize,
-              appId:this.appId,
-            }, params)).then(response => {
-              let tableData = response.data.items
-              tableData.forEach(item => {
-                item.mediaId = item.mediaId
-                item.content.articles = item.content.newsItem
-              })
-              this.list = tableData
-              this.page.total = response.data.totalCount
-              this.page.currentPage = page.currentPage
-              this.page.pageSize = page.pageSize
-              this.loading = false
+        if (this.objData.type === 'news' && this.newsType === '1') { // 【图文】+ 【已发布】
+          this.getFreePublishPage();
+        } else if (this.objData.type === 'news' && this.newsType === '2') { // 【图文】+ 【草稿】
+          getPageNewsDraft(Object.assign({
+            current: page.currentPage,
+            size: page.pageSize,
+            appId:this.appId,
+          }, params)).then(response => {
+            let tableData = response.data.items
+            tableData.forEach(item => {
+              item.mediaId = item.mediaId
+              item.content.articles = item.content.newsItem
             })
-          }
+            this.list = tableData
+            this.page.total = response.data.totalCount
+            this.page.currentPage = page.currentPage
+            this.page.pageSize = page.pageSize
+            this.loading = false
+          })
         } else { // 【素材】
           this.getMaterialPage();
         }
@@ -208,20 +183,20 @@
           this.loading = false
         })
       },
-      sizeChange(val) {
-        this.page.currentPage = 1
-        this.page.pageSize = val
-        this.getPage(this.page)
-      },
-      currentChange(val) {
-        this.page.currentPage = val
-        this.getPage(this.page)
-      },
-      /**
-       * 刷新回调
-       */
-      refreshChange(page) {
-        this.getPage(this.page)
+      getFreePublishPage() {
+        getFreePublishPage(this.queryParams).then(response => {
+          // 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面
+          response.data.list.forEach(item => {
+            const newsItem = item.content.newsItem;
+            newsItem.forEach(article => {
+              article.picUrl = article.thumbUrl;
+            })
+          })
+          this.list = response.data.list
+          this.total = response.data.total
+        }).finally(() => {
+          this.loading = false
+        })
       }
     }
   };

src/views/mp/components/wx-msg/main.vue

@@ -155,21 +155,23 @@ import { getUser } from "@/api/mp/user";
         if (!this.objData) {
           return;
         }
-        if (this.objData.type === 'news') {
-          this.objData.content.articles = [this.objData.content.articles[0]]
+        // 公众号限制：客服消息，公众号只允许发送一条
+        if (this.objData.type === 'news'
+          && this.objData.articles.length > 1) {
+          this.objData.articles = [this.objData.articles[0]]
           this.$message({
             showClose: true,
-            message: '图文消息条数限制在1条以内，已默认发送第一条',
+            message: '图文消息条数限制在 1 条以内，已默认发送第一条',
             type: 'success'
           })
         }
+
+        // 执行发送
         this.sendLoading = true
         sendMessage(Object.assign({
           userId: this.userId
         }, {
-          ...this.objData,
-          // content: this.objData.repContent,
-          // TODO 芋艿：临时适配，保证可用
+          ...this.objData
         })).then(response => {
           this.sendLoading = false
           // 添加到消息列表，并滚动

src/views/mp/components/wx-news/main.vue

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

src/views/mp/components/wx-reply/main.vue

@@ -118,18 +118,20 @@
         </el-row>
       </el-row>
     </el-tab-pane>
+    <!-- 类型 5：图文 -->
     <el-tab-pane name="news">
       <span slot="label"><i class="el-icon-news"></i> 图文</span>
       <el-row>
-        <div class="select-item" v-if="objData.content">
-          <WxNews :objData="objData.content.articles"></WxNews>
+        <div class="select-item" v-if="objData.articles">
+          <wx-news :articles="objData.articles" />
           <el-row class="ope-row">
-            <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj"></el-button>
+            <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
           </el-row>
         </div>
+        <!-- 选择素材 -->
         <div v-if="!objData.content">
           <el-row style="text-align: center">
-            <el-col :span="24" class="col-select2">
+            <el-col :span="24">
               <el-button type="success" @click="openMaterial">{{newsType === '1' ? '选择已发布图文' : '选择草稿箱图文'}}<i class="el-icon-circle-check el-icon--right"></i></el-button>
             </el-col>
           </el-row>
@@ -369,7 +371,10 @@
         // 创建 tempObjItem 对象，并设置对应的值
         let tempObjItem = {}
         tempObjItem.type = this.objData.type;
-        if (this.objData.type === 'music') { // 音乐需要特殊处理，因为选择的是图片的缩略图
+        if (this.objData.type === 'news') {
+          tempObjItem.articles = item.content.newsItem
+          this.objData.articles = item.content.newsItem
+        } else if (this.objData.type === 'music') { // 音乐需要特殊处理，因为选择的是图片的缩略图
           tempObjItem.thumbMediaId = item.mediaId
           this.objData.thumbMediaId = item.mediaId
           tempObjItem.thumbMediaUrl = item.url
@@ -431,7 +436,7 @@
       },
       deleteObj() {
         if (this.objData.type === 'news') {
-          this.objData.articles = []
+          this.$delete(this.objData, 'articles');
         } else if(this.objData.type === 'image') {
           this.objData.mediaId = null
           this.objData.url = null