yinxr
7 years ago
parent
8c9a3c3759
commit
42fb675a05
8 changed files with 363 additions and 156 deletions
@ -1,80 +1,116 @@ |
|||||||
<!--图文素材页--> |
<!--图文素材页--> |
||||||
<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> |
||||||
@ -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; |
||||||
|
} |
||||||
@ -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; |
||||||
|
|
||||||
|
/* |
||||||
|
* 按钮 |
||||||
|
*/ |
||||||
@ -1,54 +1,66 @@ |
|||||||
@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; |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue