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

Signed-off-by: yinxr 图文素材curd接口处理中

This commit is contained in:
yinxr 2019-02-12 18:46:52 +08:00
parent 144968ee40
commit 28f6da5fdc
3 changed files with 104 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,16 +12,16 @@
<el-button class="ms-fr" type="success" size="small" icon="el-icon-tickets" @click="newsSave">保存</el-button>
</el-row>
</el-header>
<el-container class=" ms-container">
<el-container class="ms-container">
<el-aside width="280px">
<!-- 主图文章 -->
<div class="ms-main-article">
<img :src="mainArticle.basicPic ||　ms.base+'/WEB-INF/manager/images/article-default.png'">
<div class="ms-main-article" @click='openMainArticle'>
<img :src="mainArticle.thumbnailUrl ||　ms.base+'/WEB-INF/manager/images/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'}">
<div v-for="(element,index) in subArticleList" :key="index" class="ms-article-item" @click='addOrUpdateSubArticle(element)'>
<div v-for="(element,index) in subArticleList" :key="index" class="ms-article-item" @click='updateSubArticle(element,index)'>
<p>
<span v-text='element.basicTitle'></span>
</p>
@ -46,9 +46,9 @@
:data={uploadFloderPath:"/mweixin/news"}
>
<div class="ms-article-mask" v-show='headMask' @mouseover='headMask=true;' @mouseleave='headMask=false'>
<i class="el-icon-delete" @click="thumbnailUrl=mainArticle.basicPic='';uploadDisable=thumbnailShow=false"></i>
<i class="el-icon-delete" @click="articleForm.thumbnailUrl=mainArticle.basicPic='';uploadDisable=thumbnailShow=false"></i>
</div>
<img v-if="thumbnailShow" :src="thumbnailUrl"
<img v-if="thumbnailShow" :src="articleForm.thumbnailUrl"
class="article-thumbnail" @mouseover='headMask=true;' @mouseleave='headMask=false;'>
<template v-else>
<i class="el-icon-picture"></i>
@ -57,12 +57,12 @@
</el-upload>
<el-form label-width='40px'>
<el-form-item label="标题" prop="">
<el-input size='small' placeholder="请输入图文标题" v-model='articleForm.basicTitle' class='basic-title-input' @input.stop.self="resetWordNum('basicTitle',64)">
<el-input size='small' placeholder="请输入图文标题" v-model='articleForm.basicTitle' class='basic-title-input' @input.self="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.stop.self="resetWordNum('articleAuthor',8)">
<el-input size='small' placeholder="请输入图文作者" v-model='articleForm.articleAuthor' @input.self="resetWordNum('articleAuthor',8)">
<span slot='suffix' v-text="authorWordNumber+'/8'"></span>
</el-input>
</el-form-item>
@ -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;

23
src/main/webapp/static/mweixin/article.less
View File

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

15
src/main/webapp/static/mweixin/css/article.css
View File

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