- ![]()
+
-
+ ![]()
+
![]()
@@ -57,12 +57,12 @@
-
+
-
+
@@ -87,8 +87,12 @@
el: '#article',
data: {
mainArticle: {
- basicPic: '', //主图
basicTitle: '', //标题
+ articleAuthor: '', //作者
+ basicDescription: '', //摘要
+ articleContent: '', //正文
+ basicThumbnails:'',//上传封面图片的url
+ thumbnailUrl:'',//缩略图全路径
},
defaultMainArticle:'',//拷贝主图信息
subArticleList: [],// 子文章列表
@@ -102,10 +106,13 @@
articleAuthor: '', //作者
basicDescription: '', //摘要
articleContent: '', //正文
+ basicThumbnails:'',//上传封面图片的url
+ thumbnailUrl:'',//缩略图全路径
},
+ // 文章素材，包括主图文，子图文
+ articleList:[],
defaultArticleForm:'',//拷贝表单值
thumbnailShow:false,//显示缩略图
- thumbnailUrl:'',//缩略图路径
headMask:false,//缩略图删除
uploadDisable:false,//是否禁止上传
newsCategoryId:'',//微信分类编号
@@ -113,13 +120,24 @@
watch:{
articleForm:{
handler:function(n,o){
- this.mainArticle.basicTitle = n.basicTitle
+ this.articleList.length || (this.mainArticle.basicTitle = n.basicTitle)
+ console.log('n文章',n);
+ },
+ deep:true,
+ },
+ editorCurrentContent:{
+ handler:function(n,o){
+ console.log('n文章',n);
+ this.articleForm.articleContent = n
+ },
+ deep:true,
+ },
+ mainArticle:{
+ handler:function(n,o){
+ console.log('n文章444444444444444',n);
},
deep:true,
},
- editorCurrentContent:function(n,o){
-
- }
},
methods: {
open:function(material){
@@ -138,30 +156,58 @@
// 图片上传成功函数
basicPicSuccess:function(url){
this.thumbnailShow = this.uploadDisable = true
- this.thumbnailUrl = ms.web + url
- this.mainArticle.basicPic = this.thumbnailUrl
+ this.mainArticle.thumbnailUrl = this.articleForm.thumbnailUrl = ms.web + url
+ this.articleForm.basicThumbnails = url
},
// 添加文章
addArticle: function() {
+ console.log('this.articleForm1111111',this.articleForm);
if(this.subArticleList.length > 6) {
- this.$notify({
+ return this.$notify({
title: '添加失败',
message: '最大图文数量为7',
type: 'warning'
});
- return;
}
+ // 将主图文单独存于数组中
+ if(!this.articleList.length){
+ this.mainArticle = this.articleForm
+ }
+ console.log('this.articleForm99999999999999',this.articleForm);
+ // 清空百度编辑器
+ this.editor.setContent('')
+ // 将左侧表单的内容存放到数组中
+ this.articleList.push(this.articleForm)
+ // 清空表单
+ console.log('this.articleForm',this.articleForm);
+ console.log('this.articleList',this.articleList);
+ this.articleForm = {
+ basicTitle: '',
+ articleAuthor: '',
+ basicDescription: '',
+ articleContent: '',
+ basicThumbnails:'',
+ thumbnailUrl:'',
+ }
+ this.thumbnailShow = false //显示上传图标
this.subArticleList.push({
- basicTitle: '新增文章标题',
- basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148'
+ basicTitle: '',
+ articleAuthor: '',
+ basicDescription: '',
+ articleContent: '',
+ basicThumbnails:'',
+ thumbnailUrl:'',
})
},
- // 更新或修改子文章
- addOrUpdateSubArticle:function(element){
- if(element.articleBasicId>0){
-
- }
+ // 打开修改子文章
+ updateSubArticle:function(element,index){
+ this.articleForm = element
},
+ // 打开 主文章
+ openMainArticle:function(){
+ this.thumbnailShow = true //显示上传图标
+ this.articleForm = this.mainArticle
+ },
// 计算剩余字数
resetWordNum: function(type,limit) {
var target = event.target
@@ -194,10 +240,10 @@
that.$message.error(err);
})
},
- // 表单重置
+ // 表单重置 新建和修改场景
resetForm:function(material){
this.thumbnailShow = material ? true : false
- this.thumbnailUrl = material ? material.newsArticle.basicPic : ''
+ this.articleForm.thumbnailUrl = material ? material.newsArticle.basicPic : ''
this.mainArticle.basicPic = material ? material.newsArticle.basicPic : ''
this.mainArticle.basicTitle = material ? material.newsArticle.basicTitle : ''
@@ -212,7 +258,7 @@
this.subArticleList = material ? material.articleList : [];
this.$forceUpdate();
- }
+ },
},
mounted: function() {
let that = this;
diff --git a/src/main/webapp/static/mweixin/article.less b/src/main/webapp/static/mweixin/article.less
index cc4b9f5c..ef0ca285 100644
--- a/src/main/webapp/static/mweixin/article.less
+++ b/src/main/webapp/static/mweixin/article.less
@@ -5,13 +5,22 @@
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;
+ // 主图文章
+ .ms-main-article{
+ &:hover{
+ cursor: pointer;
+ }
+ .ms-article-mask {
+ background: #000;
+ opacity: .2;
+ .ms-width-height(100%, 146px);
+ position: absolute;
+ top: 0;
+ left: 0;
+ &:hover{
+ cursor: pointer;
+ }
+ }
}
.el-container {
.ms-container {
diff --git a/src/main/webapp/static/mweixin/css/article.css b/src/main/webapp/static/mweixin/css/article.css
index 3db37520..0b9307d5 100644
--- a/src/main/webapp/static/mweixin/css/article.css
+++ b/src/main/webapp/static/mweixin/css/article.css
@@ -129,6 +129,13 @@ textarea::-webkit-input-placeholder {
.ms-header-select > .el-select:nth-of-type(2) {
margin: 0 10px;
}
+.el-submenu .el-menu-item.is-active {
+ border-radius: 4px;
+}
+.el-card,
+.el-message {
+ border-radius: 0 !important;
+}
.ms-article {
display: flex;
justify-content: space-between;
@@ -136,7 +143,10 @@ textarea::-webkit-input-placeholder {
background: transparent !important;
padding: 0 !important;
}
-.ms-article .ms-article-mask {
+.ms-article .ms-main-article:hover {
+ cursor: pointer;
+}
+.ms-article .ms-main-article .ms-article-mask {
background: #000;
opacity: .2;
width: 100%;
@@ -145,6 +155,9 @@ textarea::-webkit-input-placeholder {
top: 0;
left: 0;
}
+.ms-article .ms-main-article .ms-article-mask:hover {
+ cursor: pointer;
+}
.ms-article .el-container .ms-container {
padding: 0;
background: transparent;
@@ -46,9 +46,9 @@ :data={uploadFloderPath:"/mweixin/news"} >
-
+
-