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

src/main/webapp/WEB-INF/manager/include/head-file.ftl

@@ -5,6 +5,7 @@
     <script type="text/javascript" src="https://unpkg.com/vue@2.5.21/dist/vue.min.js"></script>
     <!--小图标-->
     <link rel="stylesheet" href="//at.alicdn.com/t/font_847907_mkdvd7gopsg.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_1035189_ddqz6fpwzxb.css">
     <!-- 引入样式 -->
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
     <!-- 引入组件库 -->

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

@@ -13,7 +13,7 @@
       <el-container class=" ms-container">
          <el-aside width="280px">
             <div class="ms-main-article">
-               <img :src='mainArticle.basicPic'>
+               <img :src='mainArticle.basicPic ||　'>
                <div class="ms-main-article-mask"></div>
                <span v-text='mainArticle.basicTitle'></span>
             </div>
@@ -22,7 +22,7 @@
                   <p>
                      <span v-text='element.basicTitle'></span>
                   </p>
-                  <img :src='element.basicThumbnailsl'>
+                  <img :src='element.basicThumbnails'>
                </div>
             </draggable>
             <div class="ms-article-footer">
@@ -67,20 +67,10 @@
       el: '#article',
       data: {
          mainArticle: {
-            basicPic: 'https://img03.sogoucdn.com/app/a/100520091/20190125112329', //主图
-            basicTitle: '国足0-3不敌伊朗被淘汰，赛后还有一个消息', //标题
+            basicPic: '', //主图
+            basicTitle: '', //标题
          },
-         // 文章列表
-         subArticleList: [{
-            basicTitle: '硬核！年会当着老板面唱，“干活的干不过写PPT的……',
-            basicThumbnailsl: 'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
-         }, {
-            basicTitle: '知否知否，党组织犯错，处理有多严?',
-            basicThumbnailsl: 'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
-         }, {
-            basicTitle: '没有奇迹，国足0-3不敌伊朗止步八强!',
-            basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148'
-         }],
+         subArticleList: [],// 子文章列表
          titleWordNumber: 64, //图文标题剩余字数
          authorWordNumber: 8, //图文作者剩余字数
          descWordNumber: 54, //摘要
@@ -93,6 +83,16 @@
          }
       },
       methods: {
+          open:function(material){
+                menuVue.menuActive = '新建图文';
+                if(material && material.newsId>0){
+                    // 编辑
+                    this.subArticleList = material.articleList
+                }else{
+                    // 新增
+                }
+                console.log('"material',material);
+          },
          // 添加文章
          addArticle: function() {
             if(this.subArticleList.length > 6) {

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

@@ -1,80 +1,116 @@
 <!--图文素材页-->
 <link rel="stylesheet" href="../../../static/mweixin/css/material-list.css">
 <div id="material-list-vue" v-if="menuVue.menuActive == '图文'" class="ms-weixin-content">
-   <el-container>
-      <!--右侧头部-->
-      <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 class="ms-fr" size="small" icon="el-icon-refresh">刷新</el-button>
-            <el-button class="ms-fr" size="small">同步微信素材</el-button>
-         </el-row>
-      </el-header>
-      <el-container>
-         <!--内容头部-->
-         <el-header class="ms-tr ms-header">
-            <el-select v-model="value1" placeholder="请选择" size="small">
-               <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
-               </el-option>
-            </el-select>
-            <el-select v-model="value2" placeholder="请选择" size="small">
-               <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
-               </el-option>
-            </el-select>
-            <el-button type="primary" icon="el-icon-search" size="small">查询</el-button>
-         </el-header>
-         <!--素材列表-->
-         <el-main class="ms-admin-material-list">
-            <div class="ms-admin-material-item" v-for="material in materialList">
-               <div class="head">
-                  <span v-text="'更新于'+material.date"></span>
-                  <i class="iconfont icon-weixin"></i>
-               </div>
-               <div class="body">
-                  <span v-text="material.title"></span>
-                  <img :src="material.img" />
-                  <p v-text="material.det"></p>
-               </div>
-               <div class="footer">
-                  <i class="el-icon-edit" @click="menuVue.menuActive = '新建图文'"></i>
-                  <em></em>
-                  <i class="el-icon-delete"></i>
-               </div>
-            </div>
-         </el-main>
-      </el-container>
-   </el-container>
+	<el-container>
+		<!--右侧头部-->
+		<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 class="ms-fr" size="small" icon="el-icon-refresh">刷新</el-button>
+				<el-button class="ms-fr" size="small" @click='sync'>同步微信素材</el-button>
+			</el-row>
+		</el-header>
+		<el-container>
+			<!--内容头部-->
+			<el-header class="ms-tr ms-header">
+				<el-select v-model="value1" placeholder="请选择" size="small">
+					<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+					</el-option>
+				</el-select>
+				<el-select v-model="value2" placeholder="请选择" size="small">
+					<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+					</el-option>
+				</el-select>
+				<el-button type="primary" icon="el-icon-search" size="small" @click='search'>查询</el-button>
+			</el-header>
+			<!--素材列表-->
+			<el-main class="ms-admin-material-list">
+				<div class="ms-admin-material-item" v-for="(material,index) in materialList" :key='index'>
+					<div class="head">
+						<span v-text="'更新于'+formmateTime(material.newsDateTime)"></span>
+						<i class="iconfont icon-weixin" v-if='material.newsIsSyn'></i>
+					</div>
+					<div class="body">
+						<span v-text="material.newsArticle.basicTitle"></span>
+						<img :src="material.newsArticle.basicThumbnails || ms.base+'/WEB-INF/manager/images/data/ms-bg_1.jpg'" />
+						<p v-text="material.newsArticle.basicDescription"></p>
+					</div>
+					<div class="footer">
+						<i class="el-icon-edit" @click="articleVue.open(material)"></i>
+						<em></em>
+						<i class="el-icon-delete" @click='del(material,index)'></i>
+					</div>
+				</div>
+			</el-main>
+		</el-container>
+	</el-container>
 </div>
 
 <script>
-   new Vue({
-      el: "#material-list-vue",
-      data: {
-         options1: [{
-            value: '全部图片',
-            label: '全部图片'
-         }],
-         options2: [{
-            value: '全部图片',
-            label: '全部图片'
-         }],
-         value1: '全部图片',
-         value2: '',
-         materialList: [{
-               date: '12月27日',
-               title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
-               img: '../images/data/img.png',
-               det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
-            },
-            {
-               date: '12月27日',
-               title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
-               img: '../images/data/img.png',
-               det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
-            }
-         ],
-      },
-      methods: {},
-      mounted: function() {}
-   })
+	var materialListVue = new Vue({
+		el: "#material-list-vue",
+		data: {
+			options1: [{
+				value: '全部图片',
+				label: '全部图片'
+			}],
+			options2: [{
+				value: '全部图片',
+				label: '全部图片'
+			}],
+			value1: '全部图片',
+			value2: '',
+			materialList: [],
+		},
+		methods: {
+			// 获取微信素材
+			newsList: function () {
+				var that = this;
+				ms.http.get(ms.manager + "/weixin/news/list.do")
+					.then(function (res) {
+						that.materialList = res.rows
+						console.log('微信', res);
+					}, function (err) {
+						that.$message.error(err)
+					})
+			},
+			// 删除
+			del: function (material,index) {
+				var that = this;
+				ms.http.post(ms.manager + "/weixin/news/"+material.newsId+"/delete.do")
+					.then(function (res) {
+						if(res.result){
+							that.$message.success('素材删除成功');
+							that.materialList.splice(index,1);
+						}
+					}, function (err) {
+						that.$message.error(err);
+					})
+			},
+			// 同步微信素材
+			sync: function () {
+
+			},
+			// 刷新图文素材
+			refresh: function () {
+
+			},
+			// 查询
+			search: function () {
+
+			},
+			// 格式化时间
+			formmateTime: function (time) {
+				var updateTime = /^[0-9]{4}-[0-9]{2}-[0-9]{2}/.exec(time)
+				if (updateTime != null) {
+					return updateTime[0]
+				}
+			}
+		},
+		mounted: function () {
+			var that = this;
+			// 微信图文素材
+			that.newsList();
+		}
+	})
 </script>

src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl

@@ -18,4 +18,15 @@
       <!--#include virtual="menu/material-bank-form.ftl" -->
       <!--#include virtual="message/index.ftl" -->
    </body>
-</html>
+</html>
+<script>
+    // 测试使用 ==> 微信其他接口走之前需要先走这几个接口
+    (function(){
+        ms.http.get(ms.manager + "/mweixin/11/function.do")
+        .then((res)=>{
+            console.log('res',true);
+        }, (err) => {
+            console.log(err)
+        })
+    })()
+</script>

src/main/webapp/static/ms-admin/4.7.0/less/base/mixin.less

@@ -0,0 +1,73 @@
+/*
+*对常见的多行样式进行了方法封装，方便调用，加快开发效率
+*/
+
+// 背景图片地址和大小 
+.ms-background(@url) {
+    background-image: url(@url);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+// 圆角
+.ms-radius(@radius) {
+    -webkit-border-radius: @radius;
+    -moz-border-radius: @radius;
+    -ms-border-radius: @radius;
+    -o-border-radius: @radius;
+    border-radius: @radius;
+}
+
+//宽高
+.ms-width-height(@width, @height: @width) {
+    width: @width;
+    height: @height;
+}
+
+//字体大小，颜色 ，字体粗细
+.ms-font(@size, @color , @weight:initial) {
+    font-weight: @weight;
+    font-size: @size;
+    color: @color;
+}
+
+//flex 布局和 子元素 对其方式
+.ms-flex(@type: space-between) {
+    display: flex;
+    justify-content: @type;
+}
+
+//行级flex 布局和 子元素 对其方式
+.ms-inline-flex(@type: space-between) {
+    display: inline-flex;
+    justify-content: @type;
+}
+
+//多行超文本隐藏
+.ms-ellipsis-clamp(@num) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: @num;
+    -webkit-box-orient: vertical;
+}
+
+//行高和高
+.ms-line-height(@num, @value: @num) {
+    height: @num;
+    line-height: @value;
+}
+
+//圆角元素
+.ms-radius-size(@radius, @width, @height: @width) {
+    .ms-width-height(@width, @height);
+    .ms-radius(@radius);
+    text-align: center;
+    line-height: @height;
+}
+
+//边距
+.ms-margin-padding(@margin, @padding: @margin) {
+    margin: @margin;
+    padding: @padding;
+}

src/main/webapp/static/ms-admin/4.7.0/less/base/style.less

@@ -0,0 +1,63 @@
+/*
+*这里的值严格按照UI设计图标注值来进行设置
+*/
+
+
+/*
+*颜色
+*/
+
+//主题颜色
+@themeColor: #0099ff;
+//背景颜色
+@backgroundColor: #eee;
+//边框颜色
+@borderColor: #e6e6e6;
+
+/*
+*页面的边距
+*/
+
+//整体区域内边距大小
+@warpperPadding: 20px;
+//整体区域外边距大小
+@warpperMargin: 10px;
+//列表内边距大小
+@listPadding: 20px;
+//列表外边距大小
+@listMargin: 10px;
+
+/*
+*字体
+*/
+
+//标题字体样式
+//一级标题的样式
+@h1: 16px;
+//一级标题的样式
+@h2: 14px;
+@titleColor: #333;
+//内容字体样式
+@contentSize: 14px;
+@contentColor: #333;
+// 默认字体样式
+@defalutSize: 14px;
+@defalutColor: #333;
+//辅助性描述样式
+@auxiliarySize: 12px;
+@auxiliaryColor: #999;
+
+/*
+*头像
+*/
+
+//大头像
+// @bigHead: ;
+//中头像
+// @midHead: ;
+//小头像
+@smallHead: 24px;
+
+/*
+ * 按钮
+ */

src/main/webapp/static/mweixin/css/material-list.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,13 +68,13 @@ textarea::-webkit-input-placeholder {
 *::-webkit-scrollbar-thumb {
   border-radius: 10px;
   /*滚动条的圆角*/
-  background-color: #ddd;
+  background-color: #e6e6e6;
   /*滚动条的背景颜色*/
 }
 .ms-container {
   margin: 12px;
   height: calc(100% - 24px);
-  padding: 14px 14px 0 14px;
+  padding: 14px;
   background: #fff;
 }
 .ms-header {
@@ -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 {
@@ -123,15 +123,18 @@ textarea::-webkit-input-placeholder {
   background: #fff;
   border-color: #0099ff;
 }
-.ms-admin-material-list {
+.ms-weixin-content .ms-header > .el-select--small:first-child {
+  width: 100px !important;
+}
+.ms-weixin-content .ms-admin-material-list {
   background: #fff;
   margin: 12px;
   padding: 14px;
   display: flex;
   flex-wrap: wrap;
 }
-.ms-admin-material-list .ms-admin-material-item {
-  margin: 0 24px 0 0;
+.ms-weixin-content .ms-admin-material-list .ms-admin-material-item {
+  margin: 0 24px 24px 0;
   padding: 0 10px;
   width: 230px;
   display: flex;
@@ -139,60 +142,68 @@ textarea::-webkit-input-placeholder {
   border: 1px solid #e6e6e6;
   border-radius: 4px;
 }
-.ms-admin-material-list .ms-admin-material-item .head {
+.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .head {
   border-bottom: 1px solid #e6e6e6;
   padding: 10px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-.ms-admin-material-list .ms-admin-material-item .head span {
-  color: #999;
+.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .head span {
+  color: #333;
+}
+.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .head .icon-weixin {
+  font-weight: initial;
+  font-size: 16px;
+  color: #9acd32;
 }
-.ms-admin-material-list .ms-admin-material-item .body {
+.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body {
   display: flex;
   flex-direction: column;
   line-height: 2em;
 }
-.ms-admin-material-list .ms-admin-material-item .body span {
+.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
   cursor: pointer;
 }
-.ms-admin-material-list .ms-admin-material-item .body span:hover {
+.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body span:hover {
   color: #0099ff;
   background: #fff;
   border-color: #0099ff;
 }
-.ms-admin-material-list .ms-admin-material-item .body img {
+.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body img {
   width: 170px;
   height: 110px;
   margin: 0 auto;
   object-fit: cover;
 }
-.ms-admin-material-list .ms-admin-material-item .body p {
+.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body p {
   margin: 0;
-  color: #999;
+  color: #333;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
-.ms-admin-material-list .ms-admin-material-item .footer {
+.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer {
   display: flex;
   padding: 14px 0;
 }
-.ms-admin-material-list .ms-admin-material-item .footer i {
-  color: #999;
+.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer i {
+  color: #333;
   margin: auto;
   cursor: pointer;
 }
-.ms-admin-material-list .ms-admin-material-item .footer i:hover {
+.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer i:hover {
   color: #0099ff;
   background: #fff;
   border-color: #0099ff;
 }
-.ms-admin-material-list .ms-admin-material-item .footer em {
+.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer em {
   width: 1px;
   height: 1em;
   background: #e6e6e6;

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

@@ -1,54 +1,66 @@
 @import "../ms-admin/4.7.0/less/app.less";
-.ms-admin-material-list {
-    background: #fff;
-    .ms-margin-padding(12px, 14px);
-    display: flex;
-    flex-wrap: wrap;
-    //单个素材
-    .ms-admin-material-item {
-        .ms-margin-padding(0 24px 0 0, 0 10px);
-        width: 230px;
-        display: flex;
-        flex-direction: column;
-        border: 1px solid #e6e6e6;
-        border-radius: 4px;
-        .head {
-            border-bottom: 1px solid #e6e6e6;
-            padding: 10px 0;
-            span {
-                color: @contentColor;
-            }
+.ms-weixin-content{
+    .ms-header{
+        >.el-select--small:first-child{
+            width: 100px !important;
         }
-        .body {
+    }
+    .ms-admin-material-list{
+        background: #fff;
+        .ms-margin-padding(12px, 14px);
+        display: flex;
+        flex-wrap: wrap;
+        //单个素材
+        .ms-admin-material-item {
+            .ms-margin-padding(0 24px 24px 0, 0 10px);
+            width: 230px;
             display: flex;
             flex-direction: column;
-            line-height: 2em;
-            span {
-                .ms-ellipsis;
-                .ms-hover;
+            border: 1px solid #e6e6e6;
+            border-radius: 4px;
+            .head {
+                border-bottom: 1px solid #e6e6e6;
+                padding: 10px 0;
+                .ms-flex();
+                align-items: center;
+                span {
+                    color: @contentColor;
+                }
+                .icon-weixin{
+                    .ms-font(16px,rgb(154, 205, 50));
+                }
             }
-            img {
-                .ms-width-height(170px, 110px);
-                margin: 0 auto;
-                object-fit: cover;
-            }
-            p {
-                margin: 0;
-                color: @contentColor;
-                .ms-ellipsis-clamp(3);
-            }
-        }
-        .footer {
-            display: flex;
-            padding: 14px 0;
-            i {
-                color: @contentColor;
-                margin: auto;
-                .ms-hover;
+            .body {
+                display: flex;
+                flex-direction: column;
+                line-height: 2em;
+                span {
+                    .ms-ellipsis;
+                    .ms-hover;
+                }
+                img {
+                    .ms-width-height(170px, 110px);
+                    margin: 0 auto;
+                    object-fit: cover;
+                }
+                p {
+                    margin: 0;
+                    color: @contentColor;
+                    .ms-ellipsis-clamp(3);
+                }
             }
-            em {
-                .ms-width-height(1px, 1em);
-                background: #e6e6e6;
+            .footer {
+                display: flex;
+                padding: 14px 0;
+                i {
+                    color: @contentColor;
+                    margin: auto;
+                    .ms-hover;
+                }
+                em {
+                    .ms-width-height(1px, 1em);
+                    background: #e6e6e6;
+                }
             }
         }
     }