Signed-off-by: yinxr <2273460044@qq.com>

src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl

@@ -12,9 +12,10 @@
       </el-header>
       <el-container class=" ms-container">
          <el-aside width="280px">
+             <!-- 主图文章 -->
             <div class="ms-main-article">
-               <img :src='mainArticle.basicPic ||　'>
-               <div class="ms-main-article-mask"></div>
+               <img :src="mainArticle.basicPic ||　ms.base+'/WEB-INF/manager/images/data/article-default.png'">
+               <div class="ms-article-mask"></div>
                <span v-text='mainArticle.basicTitle'></span>
             </div>
             <draggable v-model="subArticleList" :options="{draggable:'.ms-article-item'}">
@@ -31,24 +32,38 @@
          </el-aside>
          <el-main>
             <div class="ms-main-header">
-               <el-upload class="ms-pic-upload" :show-file-list="false">
-                  <img v-if="false" :src="false" class="avatar">
-                  <i v-else class="el-icon-picture"></i>
-                  <span>添加封面</span>
+               <el-upload 
+                    class="ms-pic-upload" 
+                    :show-file-list="false" 
+                    :on-success="basicPicSuccess"
+                    :before-upload='beforeBasicPicUpload'
+                    :action="ms.web + '/file/upload.do'"
+                    :limit='1'
+                    :data={uploadFloderPath:"/mweixin/news"}
+                >
+                <div class="ms-article-mask" v-show='headMask' @mouseover='headMask=true;' @mouseleave='headMask=false'>
+                    <i class="el-icon-delete" @click='delThumbnail'></i>
+                </div>
+                <img v-if="thumbnailShow" :src="thumbnailUrl"
+                class="article-thumbnail" @mouseover='headMask=true;' @mouseleave='headMask=false;'>
+                <template v-else>
+                    <i class="el-icon-picture"></i>
+                    <span>添加封面</span>
+                </template>
                </el-upload>
                <el-form label-width='40px'>
                   <el-form-item label="标题" prop="">
-                     <el-input size='small' placeholder="请输入图文标题" v-model='articleForm.basicTitle' @input="resetWordNum('title')">
+                     <el-input size='small' placeholder="请输入图文标题" v-model='articleForm.basicTitle' @input="resetWordNum('basicTitle',64)">
                         <span slot='suffix' v-text="titleWordNumber+'/64'"></span>
                      </el-input>
                   </el-form-item>
                   <el-form-item label="作者" prop="">
-                     <el-input size='small' placeholder="请输入图文作者" v-model='articleForm.articleAuthor' @input="resetWordNum('author')">
+                     <el-input size='small' placeholder="请输入图文作者" v-model='articleForm.articleAuthor' @input="resetWordNum('articleAuthor',8)">
                         <span slot='suffix' v-text="authorWordNumber+'/8'"></span>
                      </el-input>
                   </el-form-item>
                   <el-form-item label="摘要" prop="">
-                     <el-input size='small' type='textarea' placeholder="选填，如果不写会默认抓取正文前54个字" :autosize="{ minRows: 2, maxRows: 2}" resize='none' v-model='articleForm.basicDescription' @input="resetWordNum('desc')">
+                     <el-input size='small' type='textarea' placeholder="选填，如果不写会默认抓取正文前54个字" :autosize="{ minRows: 2, maxRows: 2}" resize='none' v-model='articleForm.basicDescription' @input="resetWordNum(120)">
                         <span slot='suffix' v-text="descWordNumber+'/54'"></span>
                      </el-input>
                   </el-form-item>
@@ -70,6 +85,7 @@
             basicPic: '', //主图
             basicTitle: '', //标题
          },
+         defaultMainArticle:'',//拷贝主图信息
          subArticleList: [],// 子文章列表
          titleWordNumber: 64, //图文标题剩余字数
          authorWordNumber: 8, //图文作者剩余字数
@@ -80,7 +96,19 @@
             articleAuthor: '', //作者
             basicDescription: '', //摘要
             articleContent: '', //正文
-         }
+         },
+         defaultArticleForm:'',//拷贝表单值
+         thumbnailShow:false,//显示缩略图
+         thumbnailUrl:'',//缩略图路径
+         headMask:false,//缩略图删除
+      },
+      watch:{
+            articleForm:{
+                handler:function(n,o){
+                    this.mainArticle.basicTitle = n.basicTitle
+                },
+                deep:true,
+            }
       },
       methods: {
           open:function(material){
@@ -88,11 +116,37 @@
                 if(material && material.newsId>0){
                     // 编辑
                     this.subArticleList = material.articleList
+                    this.mainArticle = material.newsArticle
                 }else{
                     // 新增
+                    console.log('this.defaultArticleForm',this.defaultArticleForm);
+                    this.articleForm = this.defaultArticleForm
+                    this.mainArticle = this.defaultMainArticle
                 }
                 console.log('"material',material);
           },
+        //   图片上传之前的钩子
+        beforeBasicPicUpload:function(file){
+            var fileType = false;
+	    	if(file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'){
+	    		fileType = true;
+	    	}
+	        const isLt2M = file.size / 1024 / 1024 < 2;
+	        if (!fileType) {
+	          this.$message.error('文章配图只能是 JPG、JPEG、PNG 格式!');
+	        }
+	        if (!isLt2M) {
+	          this.$message.error('文章配图大小不能超过 2MB!');
+	        }
+	        return fileType && isLt2M;
+        },
+        //   图片上传成功函数
+        basicPicSuccess:function(url){
+            this.thumbnailShow = true
+            this.thumbnailUrl = ms.web + url
+            this.mainArticle.basicPic = this.thumbnailUrl
+
+        },
          // 添加文章
          addArticle: function() {
             if(this.subArticleList.length > 6) {
@@ -108,9 +162,23 @@
                basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148'
             })
          },
-         // 计算剩余字数
-         resetWordNum: function(type) {
+         delThumbnail:function(){
 
+         },
+         // 计算剩余字数
+         resetWordNum: function(type,limit) {
+             var result = event.target.value;
+             if(type.indexOf('Title') > -1){
+                this.titleWordNumber = this.titleWordNumber - result.length
+             }else{
+                 this.authorWordNumber = this.authorWordNumber - result.length
+             }
+             if(result.length >= limit){
+                 this.$message.error('超出字数限制，请输入不超过'+limit+'字符');
+                 this.$nextTick(function(){
+                     this.articleForm[type] = result.slice(0,limit);
+                 })
+             }
          }
       },
       mounted: function() {
@@ -150,6 +218,10 @@
                );
             });
          }
+
+        //  初始化默认值
+        this.defaultArticleForm = JSON.parse(JSON.stringify(this.articleForm))
+        this.defaultMainArticle = JSON.parse(JSON.stringify(this.mainArticle))
       }
    })
 </script>

src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl

@@ -5,7 +5,7 @@
 		<!--右侧头部-->
 		<el-header class="ms-header" height="50px">
 			<el-row>
-				<el-button type="primary" size="small" icon="el-icon-plus" @click="menuVue.menuActive = '新建图文'">添加</el-button>
+				<el-button type="primary" size="small" icon="el-icon-plus" onclick="articleVue.open()">添加</el-button>
 				<el-button class="ms-fr" size="small" icon="el-icon-refresh">刷新</el-button>
 				<el-button class="ms-fr" size="small" @click='sync'>同步微信素材</el-button>
 			</el-row>

src/main/webapp/static/mweixin/article.less

@@ -5,6 +5,14 @@
     width: 100%;
     background: transparent !important;
     padding: 0 !important;
+    .ms-article-mask {
+        background: #000;
+        opacity: .2;
+        .ms-width-height(100%, 146px);
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
     .el-container {
         .ms-container {
             padding: 0;
@@ -21,14 +29,6 @@
                 img {
                     .ms-width-height(100%, 146px);
                 }
-                .ms-main-article-mask {
-                    background: #000;
-                    opacity: .2;
-                    .ms-width-height(100%, 146px);
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                }
                 span {
                     position: absolute;
                     bottom: 0;
@@ -77,6 +77,7 @@
             margin-left: 14px;
             padding: 0 !important;
             .ms-main-header {
+                position: relative;
                 background: #fff;
                 .ms-flex();
                 height: 180px;
@@ -102,8 +103,25 @@
                         i {
                             .ms-font(18px, @auxiliaryColor);
                         }
+                         // 文章缩略图
+                        .article-thumbnail{
+                            .ms-width-height(140px);
+                        }
+                        >.ms-article-mask{
+                            .ms-width-height(140px);
+                            .ms-flex(center);
+                            align-items: center;
+                            left: 21px;
+                            top: 20px;
+                            z-index: 99;
+                            opacity: .6;
+                            >i{
+                                .ms-font(19px,#fff);
+                            }
+                        }
                     }
-                } // 表单
+                }
+                // 表单
                 .el-form {
                     flex: 1;
                     margin: 0 !important;
@@ -111,9 +129,12 @@
                     flex-direction: column;
                     .el-form-item {
                         margin-bottom: 0 !important;
-                    }
-                    .el-input__suffix {
-                        top: -3px !important;
+                        .el-input__suffix {
+                            top: -3px !important;
+                            >input{
+                                padding-right: 50px !important;
+                            }
+                        }
                     }
                 }
             }

src/main/webapp/static/mweixin/css/article.css

@@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
   font-weight: initial;
   font-size: 12px;
-  color: #aaa;
+  color: #999;
   resize: none;
 }
 *::-webkit-scrollbar {
@@ -68,7 +68,7 @@ textarea::-webkit-input-placeholder {
 *::-webkit-scrollbar-thumb {
   border-radius: 10px;
   /*滚动条的圆角*/
-  background-color: #ddd;
+  background-color: #e6e6e6;
   /*滚动条的背景颜色*/
 }
 .ms-container {
@@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
   height: 55px;
   box-sizing: border-box;
   padding: 10px 10px 25px 10px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #e6e6e6;
 }
 .ms-weixin-dialog .el-dialog__header .el-dialog__title {
   font-weight: bold;
@@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
   color: #333;
 }
 .ms-weixin-dialog .el-dialog__footer {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #e6e6e6;
   padding: 15px !important;
 }
 .ms-hover {
@@ -130,6 +130,15 @@ textarea::-webkit-input-placeholder {
   background: transparent !important;
   padding: 0 !important;
 }
+.ms-article .ms-article-mask {
+  background: #000;
+  opacity: .2;
+  width: 100%;
+  height: 146px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 .ms-article .el-container .ms-container {
   padding: 0;
   background: transparent;
@@ -146,15 +155,6 @@ textarea::-webkit-input-placeholder {
   width: 100%;
   height: 146px;
 }
-.ms-article .el-container .el-aside .ms-main-article .ms-main-article-mask {
-  background: #000;
-  opacity: 0.2;
-  width: 100%;
-  height: 146px;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
 .ms-article .el-container .el-aside .ms-main-article span {
   position: absolute;
   bottom: 0;
@@ -172,7 +172,7 @@ textarea::-webkit-input-placeholder {
   display: flex;
   justify-content: space-between;
   padding: 10px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #e6e6e6;
 }
 .ms-article .el-container .el-aside .ms-article-item p {
   margin: 0 10px 0 0;
@@ -208,7 +208,7 @@ textarea::-webkit-input-placeholder {
 .ms-article .el-container .el-aside .ms-article-footer .el-button span {
   font-weight: initial;
   font-size: 12px;
-  color: #aaa;
+  color: #999;
 }
 .ms-article .el-container .el-main {
   flex: 1;
@@ -216,6 +216,7 @@ textarea::-webkit-input-placeholder {
   padding: 0 !important;
 }
 .ms-article .el-container .el-main .ms-main-header {
+  position: relative;
   background: #fff;
   display: flex;
   justify-content: space-between;
@@ -223,13 +224,13 @@ textarea::-webkit-input-placeholder {
   padding: 20px;
   padding-bottom: 24px;
   box-sizing: border-box;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #e6e6e6;
 }
 .ms-article .el-container .el-main .ms-main-header .ms-pic-upload {
   width: 140px;
   height: 140px;
   border-radius: 4px;
-  border: 1px dashed #ddd;
+  border: 1px dashed #e6e6e6;
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -244,13 +245,33 @@ textarea::-webkit-input-placeholder {
 .ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload span {
   font-weight: initial;
   font-size: 12px;
-  color: #aaa;
+  color: #999;
   margin-top: 4px;
 }
 .ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload i {
   font-weight: initial;
   font-size: 18px;
-  color: #aaa;
+  color: #999;
+}
+.ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload .article-thumbnail {
+  width: 140px;
+  height: 140px;
+}
+.ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload > .ms-article-mask {
+  width: 140px;
+  height: 140px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 21px;
+  top: 20px;
+  z-index: 99;
+  opacity: .6;
+}
+.ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload > .ms-article-mask > i {
+  font-weight: initial;
+  font-size: 19px;
+  color: #fff;
 }
 .ms-article .el-container .el-main .ms-main-header .el-form {
   flex: 1;
@@ -262,9 +283,12 @@ textarea::-webkit-input-placeholder {
 .ms-article .el-container .el-main .ms-main-header .el-form .el-form-item {
   margin-bottom: 0 !important;
 }
-.ms-article .el-container .el-main .ms-main-header .el-form .el-input__suffix {
+.ms-article .el-container .el-main .ms-main-header .el-form .el-form-item .el-input__suffix {
   top: -3px !important;
 }
+.ms-article .el-container .el-main .ms-main-header .el-form .el-form-item .el-input__suffix > input {
+  padding-right: 50px !important;
+}
 .ms-article .el-container .el-main .ms-main-body {
   height: calc(100% - 180px);
   background: #fff;

src/main/webapp/static/mweixin/css/material-list.css

@@ -188,6 +188,9 @@ textarea::-webkit-input-placeholder {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
+  font-weight: initial;
+  font-size: 12px;
+  color: #999;
 }
 .ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer {
   display: flex;

src/main/webapp/static/mweixin/material-list.less

@@ -47,6 +47,7 @@
                     margin: 0;
                     color: @contentColor;
                     .ms-ellipsis-clamp(3);
+                    .ms-font(@auxiliarySize,@auxiliaryColor);
                 }
             }
             .footer {