Skip to content

C
cms_sys
Commit 2533ec6f authored by yinxr's avatar yinxr
Browse files
Options

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

parent 42fb675a
Show whitespace changes
Inline Side-by-side
Showing with 163 additions and 41 deletions
src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl
View file @ 2533ec6f
......@@ -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>
<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,6 +96,18 @@
articleAuthor: '', //作者
basicDescription: '', //摘要
articleContent: '', //正文
},
defaultArticleForm:'',//拷贝表单值
thumbnailShow:false,//显示缩略图
thumbnailUrl:'',//缩略图路径
headMask:false,//缩略图删除
},
watch:{
articleForm:{
handler:function(n,o){
this.mainArticle.basicTitle = n.basicTitle
},
deep:true,
}
},
methods: {
......@@ -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>
\ No newline at end of file
src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl
View file @ 2533ec6f
......@@ -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
View file @ 2533ec6f
......@@ -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;
>input{
padding-right: 50px !important;
}
}
}
}
}
......
src/main/webapp/static/mweixin/css/article.css
View file @ 2533ec6f
......@@ -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
View file @ 2533ec6f
......@@ -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
View file @ 2533ec6f
......@@ -47,6 +47,7 @@
margin: 0;
color: @contentColor;
.ms-ellipsis-clamp(3);
.ms-font(@auxiliarySize,@auxiliaryColor);
}
}
.footer {
......
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