ak
/
msopen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
yinxr 2019-01-29 14:07:39 +08:00
parent 8c9a3c3759
commit 42fb675a05
8 changed files with 363 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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">
<!-- 引入组件库 -->

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

@ -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) {

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

@ -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>

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

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

73
src/main/webapp/static/ms-admin/4.7.0/less/base/mixin.less Normal file
View File

@ -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;
}

63
src/main/webapp/static/ms-admin/4.7.0/less/base/style.less Normal file
View File

@ -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;
/*
* 按钮
*/

55
src/main/webapp/static/mweixin/css/material-list.css
View File

@ -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-admin-material-list .ms-admin-material-item .body {
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .head .icon-weixin {
font-weight: initial;
font-size: 16px;
color: #9acd32;
}
.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;

102
src/main/webapp/static/mweixin/material-list.less
View File

@ -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;
.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);
}
}
p {
margin: 0;
color: @contentColor;
.ms-ellipsis-clamp(3);
}
}
.footer {
display: flex;
padding: 14px 0;
i {
color: @contentColor;
margin: auto;
.ms-hover;
}
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;
}
}
}
}