Skip to content

C
cms_sys
Commit 42fb675a authored by yinxr's avatar yinxr
Browse files
Options

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

parent 8c9a3c37
Hide whitespace changes
Inline Side-by-side
Showing with 367 additions and 157 deletions
src/main/webapp/WEB-INF/manager/include/head-file.ftl
View file @ 42fb675a
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<script type="text/javascript" src="https://unpkg.com/vue@2.5.21/dist/vue.min.js"></script> <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_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"> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 --> <!-- 引入组件库 -->
......
src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl
View file @ 42fb675a
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<el-container class=" ms-container"> <el-container class=" ms-container">
<el-aside width="280px"> <el-aside width="280px">
<div class="ms-main-article"> <div class="ms-main-article">
<img :src='mainArticle.basicPic'> <img :src='mainArticle.basicPic ||　'>
<div class="ms-main-article-mask"></div> <div class="ms-main-article-mask"></div>
<span v-text='mainArticle.basicTitle'></span> <span v-text='mainArticle.basicTitle'></span>
</div> </div>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<p> <p>
<span v-text='element.basicTitle'></span> <span v-text='element.basicTitle'></span>
</p> </p>
<img :src='element.basicThumbnailsl'> <img :src='element.basicThumbnails'>
</div> </div>
</draggable> </draggable>
<div class="ms-article-footer"> <div class="ms-article-footer">
...@@ -67,20 +67,10 @@ ...@@ -67,20 +67,10 @@
el: '#article', el: '#article',
data: { data: {
mainArticle: { mainArticle: {
basicPic: 'https://img03.sogoucdn.com/app/a/100520091/20190125112329', //主图 basicPic: '', //主图
basicTitle: '国足0-3不敌伊朗被淘汰，赛后还有一个消息', //标题 basicTitle: '', //标题
}, },
// 文章列表 subArticleList: [],// 子文章列表
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'
}],
titleWordNumber: 64, //图文标题剩余字数 titleWordNumber: 64, //图文标题剩余字数
authorWordNumber: 8, //图文作者剩余字数 authorWordNumber: 8, //图文作者剩余字数
descWordNumber: 54, //摘要 descWordNumber: 54, //摘要
...@@ -93,6 +83,16 @@ ...@@ -93,6 +83,16 @@
} }
}, },
methods: { methods: {
open:function(material){
menuVue.menuActive = '新建图文';
if(material && material.newsId>0){
// 编辑
this.subArticleList = material.articleList
}else{
// 新增
}
console.log('"material',material);
},
// 添加文章 // 添加文章
addArticle: function() { addArticle: function() {
if(this.subArticleList.length > 6) { if(this.subArticleList.length > 6) {
......
src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl
View file @ 42fb675a
<!--图文素材页--> <!--图文素材页-->
<link rel="stylesheet" href="../../../static/mweixin/css/material-list.css"> <link rel="stylesheet" href="../../../static/mweixin/css/material-list.css">
<div id="material-list-vue" v-if="menuVue.menuActive == '图文'" class="ms-weixin-content"> <div id="material-list-vue" v-if="menuVue.menuActive == '图文'" class="ms-weixin-content">
<el-container> <el-container>
<!--右侧头部--> <!--右侧头部-->
<el-header class="ms-header" height="50px"> <el-header class="ms-header" height="50px">
<el-row> <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" @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" icon="el-icon-refresh">刷新</el-button>
<el-button class="ms-fr" size="small">同步微信素材</el-button> <el-button class="ms-fr" size="small" @click='sync'>同步微信素材</el-button>
</el-row> </el-row>
</el-header> </el-header>
<el-container> <el-container>
<!--内容头部--> <!--内容头部-->
<el-header class="ms-tr ms-header"> <el-header class="ms-tr ms-header">
<el-select v-model="value1" placeholder="请选择" size="small"> <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 v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<el-select v-model="value2" placeholder="请选择" size="small"> <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 v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<el-button type="primary" icon="el-icon-search" size="small">查询</el-button> <el-button type="primary" icon="el-icon-search" size="small" @click='search'>查询</el-button>
</el-header> </el-header>
<!--素材列表--> <!--素材列表-->
<el-main class="ms-admin-material-list"> <el-main class="ms-admin-material-list">
<div class="ms-admin-material-item" v-for="material in materialList"> <div class="ms-admin-material-item" v-for="(material,index) in materialList" :key='index'>
<div class="head"> <div class="head">
<span v-text="'更新于'+material.date"></span> <span v-text="'更新于'+formmateTime(material.newsDateTime)"></span>
<i class="iconfont icon-weixin"></i> <i class="iconfont icon-weixin" v-if='material.newsIsSyn'></i>
</div> </div>
<div class="body"> <div class="body">
<span v-text="material.title"></span> <span v-text="material.newsArticle.basicTitle"></span>
<img :src="material.img" /> <img :src="material.newsArticle.basicThumbnails || ms.base+'/WEB-INF/manager/images/data/ms-bg_1.jpg'" />
<p v-text="material.det"></p> <p v-text="material.newsArticle.basicDescription"></p>
</div> </div>
<div class="footer"> <div class="footer">
<i class="el-icon-edit" @click="menuVue.menuActive = '新建图文'"></i> <i class="el-icon-edit" @click="articleVue.open(material)"></i>
<em></em> <em></em>
<i class="el-icon-delete"></i> <i class="el-icon-delete" @click='del(material,index)'></i>
</div> </div>
</div> </div>
</el-main> </el-main>
</el-container> </el-container>
</el-container> </el-container>
</div> </div>
<script> <script>
new Vue({ var materialListVue = new Vue({
el: "#material-list-vue", el: "#material-list-vue",
data: { data: {
options1: [{ options1: [{
value: '全部图片', value: '全部图片',
label: '全部图片' label: '全部图片'
}], }],
options2: [{ options2: [{
value: '全部图片', value: '全部图片',
label: '全部图片' label: '全部图片'
}], }],
value1: '全部图片', value1: '全部图片',
value2: '', value2: '',
materialList: [{ materialList: [],
date: '12月27日', },
title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...', methods: {
img: '../images/data/img.png', // 获取微信素材
det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......' newsList: function () {
}, var that = this;
{ ms.http.get(ms.manager + "/weixin/news/list.do")
date: '12月27日', .then(function (res) {
title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...', that.materialList = res.rows
img: '../images/data/img.png', console.log('微信', res);
det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......' }, function (err) {
} that.$message.error(err)
], })
}, },
methods: {}, // 删除
mounted: function() {} 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> </script>
\ No newline at end of file
src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl
View file @ 42fb675a
...@@ -18,4 +18,15 @@ ...@@ -18,4 +18,15 @@
<!--#include virtual="menu/material-bank-form.ftl" --> <!--#include virtual="menu/material-bank-form.ftl" -->
<!--#include virtual="message/index.ftl" --> <!--#include virtual="message/index.ftl" -->
</body> </body>
</html> </html>
\ No newline at end of file <script>
// 测试使用 ==> 微信其他接口走之前需要先走这几个接口
(function(){
ms.http.get(ms.manager + "/mweixin/11/function.do")
.then((res)=>{
console.log('res',true);
}, (err) => {
console.log(err)
})
})()
</script>
\ No newline at end of file
src/main/webapp/static/ms-admin/4.7.0/less/base/mixin.less 0 → 100644
View file @ 42fb675a
/*
*对常见的多行样式进行了方法封装，方便调用，加快开发效率
*/
// 背景图片地址和大小
.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;
}
\ No newline at end of file
src/main/webapp/static/ms-admin/4.7.0/less/base/style.less 0 → 100644
View file @ 42fb675a
/*
*这里的值严格按照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;
/*
* 按钮
*/
\ No newline at end of file
src/main/webapp/static/mweixin/css/material-list.css
View file @ 42fb675a
...@@ -50,7 +50,7 @@ input::-webkit-input-placeholder, ...@@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { textarea::-webkit-input-placeholder {
font-weight: initial; font-weight: initial;
font-size: 12px; font-size: 12px;
color: #aaa; color: #999;
resize: none; resize: none;
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {
...@@ -68,13 +68,13 @@ textarea::-webkit-input-placeholder { ...@@ -68,13 +68,13 @@ textarea::-webkit-input-placeholder {
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
/*滚动条的圆角*/ /*滚动条的圆角*/
background-color: #ddd; background-color: #e6e6e6;
/*滚动条的背景颜色*/ /*滚动条的背景颜色*/
} }
.ms-container { .ms-container {
margin: 12px; margin: 12px;
height: calc(100% - 24px); height: calc(100% - 24px);
padding: 14px 14px 0 14px; padding: 14px;
background: #fff; background: #fff;
} }
.ms-header { .ms-header {
...@@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder { ...@@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
height: 55px; height: 55px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 10px 25px 10px; padding: 10px 10px 25px 10px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #e6e6e6;
} }
.ms-weixin-dialog .el-dialog__header .el-dialog__title { .ms-weixin-dialog .el-dialog__header .el-dialog__title {
font-weight: bold; font-weight: bold;
...@@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder { ...@@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
color: #333; color: #333;
} }
.ms-weixin-dialog .el-dialog__footer { .ms-weixin-dialog .el-dialog__footer {
border-top: 1px solid #ddd; border-top: 1px solid #e6e6e6;
padding: 15px !important; padding: 15px !important;
} }
.ms-hover { .ms-hover {
...@@ -123,15 +123,18 @@ textarea::-webkit-input-placeholder { ...@@ -123,15 +123,18 @@ textarea::-webkit-input-placeholder {
background: #fff; background: #fff;
border-color: #0099ff; 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; background: #fff;
margin: 12px; margin: 12px;
padding: 14px; padding: 14px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.ms-admin-material-list .ms-admin-material-item { .ms-weixin-content .ms-admin-material-list .ms-admin-material-item {
margin: 0 24px 0 0; margin: 0 24px 24px 0;
padding: 0 10px; padding: 0 10px;
width: 230px; width: 230px;
display: flex; display: flex;
...@@ -139,60 +142,68 @@ textarea::-webkit-input-placeholder { ...@@ -139,60 +142,68 @@ textarea::-webkit-input-placeholder {
border: 1px solid #e6e6e6; border: 1px solid #e6e6e6;
border-radius: 4px; 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; border-bottom: 1px solid #e6e6e6;
padding: 10px 0; padding: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
} }
.ms-admin-material-list .ms-admin-material-item .head span { .ms-weixin-content .ms-admin-material-list .ms-admin-material-item .head span {
color: #999; 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; display: flex;
flex-direction: column; flex-direction: column;
line-height: 2em; 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; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: block; display: block;
cursor: pointer; 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; color: #0099ff;
background: #fff; background: #fff;
border-color: #0099ff; 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; width: 170px;
height: 110px; height: 110px;
margin: 0 auto; margin: 0 auto;
object-fit: cover; 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; margin: 0;
color: #999; color: #333;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -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; display: flex;
padding: 14px 0; padding: 14px 0;
} }
.ms-admin-material-list .ms-admin-material-item .footer i { .ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer i {
color: #999; color: #333;
margin: auto; margin: auto;
cursor: pointer; 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; color: #0099ff;
background: #fff; background: #fff;
border-color: #0099ff; 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; width: 1px;
height: 1em; height: 1em;
background: #e6e6e6; background: #e6e6e6;
......
src/main/webapp/static/mweixin/material-list.less
View file @ 42fb675a
@import "../ms-admin/4.7.0/less/app.less"; @import "../ms-admin/4.7.0/less/app.less";
.ms-admin-material-list { .ms-weixin-content{
background: #fff; .ms-header{
.ms-margin-padding(12px, 14px); >.el-select--small:first-child{
display: flex; width: 100px !important;
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;
}
} }
.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; display: flex;
flex-direction: column; flex-direction: column;
line-height: 2em; border: 1px solid #e6e6e6;
span { border-radius: 4px;
.ms-ellipsis; .head {
.ms-hover; 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 { .body {
.ms-width-height(170px, 110px); display: flex;
margin: 0 auto; flex-direction: column;
object-fit: cover; line-height: 2em;
} span {
p { .ms-ellipsis;
margin: 0; .ms-hover;
color: @contentColor; }
.ms-ellipsis-clamp(3); img {
} .ms-width-height(170px, 110px);
} margin: 0 auto;
.footer { object-fit: cover;
display: flex; }
padding: 14px 0; p {
i { margin: 0;
color: @contentColor; color: @contentColor;
margin: auto; .ms-ellipsis-clamp(3);
.ms-hover; }
} }
em { .footer {
.ms-width-height(1px, 1em); display: flex;
background: #e6e6e6; padding: 14px 0;
i {
color: @contentColor;
margin: auto;
.ms-hover;
}
em {
.ms-width-height(1px, 1em);
background: #e6e6e6;
}
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment