添加素材

src/components/weChat/autoReply.vue

 <template>
   <div>
     <el-row type="flex" class="add-btn" justify="end">
-      <el-col :span="6">
+      <el-col :span="6" style="text-align: right;">
         <el-button type="success" plain @click="add">添加回复</el-button>
       </el-col>
     </el-row>
@@ -99,8 +99,6 @@
             this.dialogObj.desc = res.desc;
             this.dialogObj.show = true;
           });
-          console.log('edit data', data);
-          console.log('edit this.dialogObj', this.dialogObj);
         },
         del(data){
           this.$confirm('此操作将删除该记录?', '提示', {

src/components/weChat/weChatResource.vue

 <template>
-    
+  <div class="media" v-loading="loading">
+    <h2 class="media-title">素材管理</h2>
+    <div>
+      <ul class="media-navs">
+        <!---->
+        <!--<li class="media-nav js_top" :class="type === 'view' ? 'media-current-nav' : ''" @click="getMediaType('view')">-->
+          <!--<a href="javascript:void(0);">图文消息<br /></a>-->
+        <!--</li>-->
+        <li class="media-nav js_top" :class="type === 'image' ? 'media-current-nav' : ''"  @click="getMediaType('image')">
+          <a href="javascript:void(0);">图片<br /></a>
+        </li>
+        <!--<li class="media-nav js_top" :class="type === 'audio' ? 'media-current-nav' : ''" @click="getMediaType('audio')">-->
+          <!--<a href="javascript:void(0);">语音<br /></a>-->
+        <!--</li>-->
+        <!--<li class="media-nav js_top" :class="type === 'video' ? 'media-current-nav' : ''" @click="getMediaType('video')">-->
+          <!--<a href="javascript:void(0);">视频<br /></a>-->
+        <!--</li>-->
+        <!---->
+      </ul>
+      <div class="media-panel">
+        <div class="media-panel-top flex-bt">
+          <div class="media-panel-top-left">
+            图片（共{{total}}条）
+          </div>
+          <div class="media-panel-top-right">
+            <el-upload
+              class="upload-demo"
+              ref="upload"
+              action="/api/public/upload"
+              :show-file-list="false"
+              :on-success="handleUploadSuccess"
+              >
+              <el-button style="order:2;" slot="trigger" size="small" type="primary">选取文件</el-button>
+              <!--<div slot="tip" class="el-upload__tip">大小不超过5M</div>-->
+            </el-upload>
+          </div>
+        </div>
+        <div v-if="mediaList.length > 0">
+          <el-table
+            :data="mediaList"
+            style="width: 100%">
+            <el-table-column
+              prop="name"
+              label="名称">
+            </el-table-column>
+            <el-table-column
+              prop="media_id"
+              label="mediaId">
+            </el-table-column>
+            <el-table-column
+              label="URL">
+              <template slot-scope="scope" v-if="type === 'image'">
+                <a :href="scope.row.url">
+                  <img style="width: 60px;" :src="scope.row.url"/>
+                </a>
+              </template>
+            </el-table-column>
+          </el-table>
+          <page :total="total" v-model="nowPage"/>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        name: "weChatResource"
+  import {getMediaListApi} from "../../service/api";
+  export default {
+      name: "weChatResource",
+      data() {
+        return {
+          mediaList: [],
+          nowPage: 0,
+          total: 0,
+          loading: false,
+          type: 'image',
+          imageList: []
+        }
+      },
+      mounted(){
+        this.getMediaList(this.type)
+      },
+      methods: {
+        getMediaType(type){
+            this.type = type;
+            this.nowPage = 0;
+            this.getMediaList(type);
+        },
+        getMediaList(type){
+          let json = {
+            type: type,
+            page: this.nowPage
+          };
+          this.loading = true;
+          getMediaListApi(json).then(res=>{
+            this.loading = false;
+            this.type = type;
+            this.mediaList = res.item;
+            this.total = res.total_count;
+            if (res.item.length === 0 ) {
+              this.$message({
+                showClose: true,
+                message: '暂无数据'
+              });
+            }
+          }).catch(() => {
+            this.loading = false;
+          })
+        },
+        handleUploadSuccess(res) {
+          if (res.code === 200) {
+            this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
+          }
+        }
+      }
     }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+  .flex-bt {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+  .el-upload__tip {
+    margin-right: 15px;
+    font-size: 13px;
+    color: #8d8d8d;
+    order: 1;
+  }
+  .upload-demo {
+    display: flex;
+    .el-upload {
+      order: 2;
+    }
+  }
+  .media {
+    margin-bottom: 40px;
+    padding: 20px;
+    &-title {
+       font-size: 26px;
+       font-weight: 400;
+       line-height: 1;
+       margin-bottom: 20px;
+    }
+    &-navs {
+       text-align: left;
+       line-height: 1;
+       border-bottom: 1px solid #E0E1E2;
+       font-size: 16px;
 
+    }
+    &-nav {
+       display: inline-block;
+       margin-right: 24px;
+       margin-bottom: -1px;
+       line-height: 40px;
+        a {
+          display: block;
+          text-decoration: none;
+          color: #353535;
+          width: auto;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          word-wrap: normal;
+          max-width: 120px;
+        }
+    }
+    &-current-nav {
+      border-bottom: 2px solid #1AAD19;
+      a {
+        color: #44B549;
+      }
+    }
+    &-panel {
+       padding: 24px 40px;
+       margin-bottom: 30px;
+       background-color: #FFFFFF;
+       border-radius: 3px;
+       -moz-border-radius: 3px;
+       -webkit-border-radius: 3px;
+       box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
+      .el-upload {
+        order: 2;
+      }
+    }
+  }
 </style>