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

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

@@ -1,6 +1,6 @@
 <!-- 新建图文 -->
 <link rel="stylesheet" href="../../../../static/mweixin/css/article.css">
-<div id='article' class="ms-article ms-container" v-if="menuVue.menuActive == '新建图文'">
+<div id='article' class="ms-article ms-container" v-show="menuVue.menuActive == '新建图文'">
     <el-container>
         <el-aside width="280px">
             <div class="ms-main-article">

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

@@ -33,11 +33,11 @@
                      <el-tab-pane label="图片" name="picture">
                         <span slot="label">
                            <i class="el-icon-picture"></i>图片</span>
-                        <div @click="open('store')">
+                        <div onclick="materialBankFormVue.open()">
                            <i class="el-icon-picture-outline"></i>
                            <span>从素材库选择</span>
                         </div>
-                        <div @click="open('new')">
+                        <div onclick="newPicFormVue.open()">
                            <i class="el-icon-plus"></i>
                            <span>新建图片</span>
                         </div>
@@ -78,13 +78,7 @@
          activeName: 'picture'
       },
       methods: {
-         open: function(type) {
+         
-            if(type == 'store') {
-               // 素材库
-            } else {
-               // 新建图片
-            }
-         }
       }
 
    })

src/main/webapp/WEB-INF/manager/mweixin/menu/material-bank-form.ftl

@@ -0,0 +1,59 @@
+<!-- 素材库 -->
+<link rel="stylesheet" href="../../../../static/mweixin/css/material-bank-form.css">
+<div id="material-bank-form" class="material-bank-form">
+    <el-dialog title="选择图片" :visible.sync="isShow" custom-class='ms-weixin-dialog'>
+        <el-tabs tab-position="left">
+            <el-tab-pane :label="group.label+'(2)'" v-for='(group,index) of materialGroup' :key='index'>
+                <el-upload :file-list='fileList' action="" list-type="picture-card" :on-preview="handlePictureCardPreview"
+                    :on-remove="handleRemove">
+                    <i class="el-icon-plus"></i>
+                </el-upload>
+                <el-dialog :visible.sync="dialogVisible">
+                    <img width="100%" :src="dialogImageUrl" alt="">
+                </el-dialog>
+            </el-tab-pane>
+        </el-tabs>
+    </el-dialog>
+
+</div>
+<script>
+    var materialBankFormVue = new Vue({
+        el: '#material-bank-form',
+        data: {
+            isShow: false,
+            materialGroup: [{
+                    label: '未分组',
+                },
+                {
+                    label: '云创',
+                },
+                {
+                    label: 'PM管理',
+                },
+            ],
+            fileList: [], //文件列表
+            dialogImageUrl: '',
+            dialogVisible: false
+        },
+        watch:{
+            fileList:{
+                handler:function(n,o){
+                console.log('文件列表',n);
+            },
+            deep:true
+            }
+        },
+        methods: {
+            // 表单打开
+            open: function () {
+                this.isShow = true;
+            },
+            handlePictureCardPreview:function(){
+
+            },
+            handleRemove:function(){
+
+            }
+        }
+    })
+</script>

src/main/webapp/WEB-INF/manager/mweixin/menu/new-pic-form.ftl

@@ -0,0 +1,74 @@
+<!-- 新建图片表单 -->
+<link rel="stylesheet" href="../../../../static/mweixin/css/new-pic-form.css">
+<div id='new-pic-form' v-show='isShow' class="new-pic-form">
+    <el-dialog title="选择图片" :visible.sync="isShow" custom-class='ms-weixin-dialog'>
+        <el-form :model="newPicForm">
+            <el-form-item label="上传图片" label-width="100px">
+                    <el-upload
+                    class="new-pic-upload"
+                    :on-preview="handlePreview"
+                    :on-remove="handleRemove"
+                    :file-list="picList"
+                    list-type="picture">
+                    <el-button size="small" type="primary">本地上传</el-button>
+                    <div slot="tip" class="el-upload__tip">
+                        <dl>
+                            <dt>注意：1.图片上传仅支持bmp、png、jpeg、jpg、gif格式</dt>
+                            <dd>2.同步至微信公众平台的图片最大2M,存在铭飞本地，最大支持5M的图片</dd>
+                        </dl>
+                        
+                    </div>
+                  </el-upload>
+            </el-form-item>
+            <el-form-item label="选择分组" label-width="100px">
+                <el-button icon='el-icon-plus' size='mini'>添加分组</el-button>
+                <el-select v-model="selectedOption" placeholder="请选择分组" size='mini'>
+                    <el-option v-for="item in picGroup" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="isShow = false" size='mini'>取 消</el-button>
+            <el-button type="primary" @click="isShow = false" size='mini'>确 定</el-button>
+        </div>
+    </el-dialog>
+</div>
+<script>
+var newPicFormVue = new Vue({
+    el: '#new-pic-form',
+    data: {
+        isShow: false,
+        newPicForm: {
+
+        },
+        picGroup: [{
+                value: 'default',
+                label: '默认分组'
+            }, {
+                value: 'yun',
+                label: '云创'
+            },
+            {
+                value: 'pm',
+                label: 'PM管理系统'
+            }],
+        selectedOption:'',//被选中的选项
+        picList:[],//图片列表
+    },
+    methods: {
+        // 表单打开
+        open: function () {
+            this.isShow = true;
+        },
+        // 图片刚加载完
+        handlePreview:function(){
+
+        },
+        // 图片删除
+        handleRemove:function(){
+
+        },
+    },
+})
+</script>

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

@@ -12,6 +12,8 @@
       <!--#include virtual="keyword/index.ftl" -->
       <!--#include virtual="keyword/form.ftl" -->
       <!--#include virtual="menu/index.ftl" -->
+      <!--#include virtual="menu/new-pic-form.ftl" -->
+      <!--#include virtual="menu/material-bank-form.ftl" -->
       <!--#include virtual="message/index.ftl" -->
       <!--#include virtual="article/index.ftl" -->
    </body>

src/main/webapp/static/ms-admin/4.7.0/less/app.less

@@ -97,3 +97,19 @@ textarea::-webkit-input-placeholder {
 .ms-weixin-content{
     width: ~'calc(100% - 140px)';
 }
+
+// 弹出框样式
+.ms-weixin-dialog{
+    .el-dialog__header{
+        height: 55px;
+        box-sizing: border-box;
+        padding: 10px 10px 25px 10px;
+        border-bottom: 1px solid @borderColor;
+        .el-dialog__title{
+            .ms-font(@defalutSize,@defalutColor,bold);
+        }
+    }
+    .el-dialog__footer{
+        border-top: 1px solid @borderColor;
+    }
+}

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

@@ -8,7 +8,9 @@
         // 侧边
         .el-aside {
             padding: 14px;
-            background: #fff; // 主文章
+            background: #fff; 
+            height: 475px;
+            // 主文章
             .ms-main-article {
                 position: relative;
                 img {

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

@@ -100,3 +100,17 @@ textarea::-webkit-input-placeholder {
 .ms-weixin-content {
   width: calc(100% - 140px);
 }
+.ms-weixin-dialog .el-dialog__header {
+  height: 55px;
+  box-sizing: border-box;
+  padding: 10px 10px 25px 10px;
+  border-bottom: 1px solid #ddd;
+}
+.ms-weixin-dialog .el-dialog__header .el-dialog__title {
+  font-weight: bold;
+  font-size: 14px;
+  color: #333;
+}
+.ms-weixin-dialog .el-dialog__footer {
+  border-top: 1px solid #ddd;
+}

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

@@ -109,6 +109,7 @@ textarea::-webkit-input-placeholder {
 .ms-article .el-container .el-aside {
   padding: 14px;
   background: #fff;
+  height: 475px;
 }
 .ms-article .el-container .el-aside .ms-main-article {
   position: relative;

src/main/webapp/static/mweixin/css/material-bank-form.css

@@ -0,0 +1,120 @@
+/*
+*这里的值严格按照UI设计图标注值来进行设置
+*/
+/*
+*颜色
+*/
+/*
+*页面的边距
+*/
+/*
+*字体
+*/
+/*
+*头像
+*/
+/*
+ * 按钮
+ */
+/*
+*对常见的多行样式进行了方法封装，方便调用，加快开发效率
+*/
+html,
+body {
+  min-height: 100vh;
+  width: 100vw;
+  background-color: #eee;
+  margin: 0;
+  display: flex;
+  font-weight: initial !important;
+  font-size: 14px !important;
+  color: #333 !important;
+}
+html *,
+body * {
+  text-decoration: none !important;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  box-sizing: border-box;
+}
+.ms-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+.ms-align-center {
+  display: flex;
+  align-items: center;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  font-weight: initial;
+  font-size: 12px;
+  color: #999;
+  resize: none;
+}
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+/*定义滚动条轨道 内阴影+圆角*/
+*::-webkit-scrollbar-track {
+  border-radius: 10px;
+  /*滚动条的背景区域的圆角*/
+  background-color: #eee;
+  /*滚动条的背景颜色*/
+}
+/*定义滑块 内阴影+圆角*/
+*::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  /*滚动条的圆角*/
+  background-color: #ddd;
+  /*滚动条的背景颜色*/
+}
+.ms-container {
+  margin: 12px;
+  height: calc(100% - 24px);
+  padding: 14px 14px 0 14px;
+  background: #fff;
+}
+.ms-header {
+  padding: 10px;
+  margin: 0;
+  border-bottom: 1px solid #ddd;
+  background: #fff;
+  height: 50px;
+}
+.ms-pagination {
+  padding: 20px 0;
+  text-align: right;
+}
+.ms-fr {
+  float: right;
+}
+.ms-tr {
+  text-align: right;
+}
+.el-button + .el-button {
+  margin-left: 0;
+}
+.ms-weixin-content {
+  width: calc(100% - 140px);
+}
+.ms-weixin-dialog .el-dialog__header {
+  height: 55px;
+  box-sizing: border-box;
+  padding: 10px 10px 25px 10px;
+  border-bottom: 1px solid #ddd;
+}
+.ms-weixin-dialog .el-dialog__header .el-dialog__title {
+  font-weight: bold;
+  font-size: 14px;
+  color: #333;
+}
+.ms-weixin-dialog .el-dialog__footer {
+  border-top: 1px solid #ddd;
+}
+.material-bank-form > .el-dialog {
+  width: 890px;
+  height: 600px;
+}

src/main/webapp/static/mweixin/css/new-pic-form.css

@@ -0,0 +1,127 @@
+/*
+*这里的值严格按照UI设计图标注值来进行设置
+*/
+/*
+*颜色
+*/
+/*
+*页面的边距
+*/
+/*
+*字体
+*/
+/*
+*头像
+*/
+/*
+ * 按钮
+ */
+/*
+*对常见的多行样式进行了方法封装，方便调用，加快开发效率
+*/
+html,
+body {
+  min-height: 100vh;
+  width: 100vw;
+  background-color: #eee;
+  margin: 0;
+  display: flex;
+  font-weight: initial !important;
+  font-size: 14px !important;
+  color: #333 !important;
+}
+html *,
+body * {
+  text-decoration: none !important;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  box-sizing: border-box;
+}
+.ms-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+.ms-align-center {
+  display: flex;
+  align-items: center;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  font-weight: initial;
+  font-size: 12px;
+  color: #999;
+  resize: none;
+}
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+/*定义滚动条轨道 内阴影+圆角*/
+*::-webkit-scrollbar-track {
+  border-radius: 10px;
+  /*滚动条的背景区域的圆角*/
+  background-color: #eee;
+  /*滚动条的背景颜色*/
+}
+/*定义滑块 内阴影+圆角*/
+*::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  /*滚动条的圆角*/
+  background-color: #ddd;
+  /*滚动条的背景颜色*/
+}
+.ms-container {
+  margin: 12px;
+  height: calc(100% - 24px);
+  padding: 14px 14px 0 14px;
+  background: #fff;
+}
+.ms-header {
+  padding: 10px;
+  margin: 0;
+  border-bottom: 1px solid #ddd;
+  background: #fff;
+  height: 50px;
+}
+.ms-pagination {
+  padding: 20px 0;
+  text-align: right;
+}
+.ms-fr {
+  float: right;
+}
+.ms-tr {
+  text-align: right;
+}
+.el-button + .el-button {
+  margin-left: 0;
+}
+.ms-weixin-content {
+  width: calc(100% - 140px);
+}
+.ms-weixin-dialog .el-dialog__header {
+  height: 55px;
+  box-sizing: border-box;
+  padding: 10px 10px 25px 10px;
+  border-bottom: 1px solid #ddd;
+}
+.ms-weixin-dialog .el-dialog__header .el-dialog__title {
+  font-weight: bold;
+  font-size: 14px;
+  color: #333;
+}
+.new-pic-form dl {
+  margin: 0;
+}
+.new-pic-form dd,
+.new-pic-form dt {
+  line-height: 1;
+  font-weight: initial;
+  font-size: 12px;
+  color: #999;
+}
+.new-pic-form dt {
+  display: inline-block;
+  margin-bottom: 8px;
+}

src/main/webapp/static/mweixin/material-bank-form.less

@@ -0,0 +1,7 @@
+@import "../ms-admin/4.7.0/less/app.less";
+// 素材库表单
+.material-bank-form{
+    >.el-dialog{
+        .ms-width-height(890px,600px);
+    }
+}

src/main/webapp/static/mweixin/new-pic-form.less

@@ -0,0 +1,15 @@
+@import "../ms-admin/4.7.0/less/app.less";
+// 新建图片
+.new-pic-form{
+    dl{
+        margin: 0;
+    }
+    dd,dt{
+        line-height: 1;
+        .ms-font(@auxiliarySize,@auxiliaryColor);
+    }
+    dt{
+        display: inline-block;
+        margin-bottom: 8px;
+    }
+}