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"> |
||||
<div id="material-list-vue" v-if="menuVue.menuActive == '图文'" class="ms-weixin-content"> |
||||
<el-container> |
||||
<!--右侧头部--> |
||||
<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 class="ms-fr" size="small" icon="el-icon-refresh">刷新</el-button> |
||||
<el-button class="ms-fr" size="small">同步微信素材</el-button> |
||||
</el-row> |
||||
</el-header> |
||||
<el-container> |
||||
<!--内容头部--> |
||||
<el-header class="ms-tr ms-header"> |
||||
<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> |
||||
</el-select> |
||||
<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> |
||||
</el-select> |
||||
<el-button type="primary" icon="el-icon-search" size="small">查询</el-button> |
||||
</el-header> |
||||
<!--素材列表--> |
||||
<el-main class="ms-admin-material-list"> |
||||
<div class="ms-admin-material-item" v-for="material in materialList"> |
||||
<div class="head"> |
||||
<span v-text="'更新于'+material.date"></span> |
||||
<i class="iconfont icon-weixin"></i> |
||||
</div> |
||||
<div class="body"> |
||||
<span v-text="material.title"></span> |
||||
<img :src="material.img" /> |
||||
<p v-text="material.det"></p> |
||||
</div> |
||||
<div class="footer"> |
||||
<i class="el-icon-edit" @click="menuVue.menuActive = '新建图文'"></i> |
||||
<em></em> |
||||
<i class="el-icon-delete"></i> |
||||
</div> |
||||
</div> |
||||
</el-main> |
||||
</el-container> |
||||
</el-container> |
||||
<el-container> |
||||
<!--右侧头部--> |
||||
<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 class="ms-fr" size="small" icon="el-icon-refresh">刷新</el-button> |
||||
<el-button class="ms-fr" size="small" @click='sync'>同步微信素材</el-button> |
||||
</el-row> |
||||
</el-header> |
||||
<el-container> |
||||
<!--内容头部--> |
||||
<el-header class="ms-tr ms-header"> |
||||
<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> |
||||
</el-select> |
||||
<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> |
||||
</el-select> |
||||
<el-button type="primary" icon="el-icon-search" size="small" @click='search'>查询</el-button> |
||||
</el-header> |
||||
<!--素材列表--> |
||||
<el-main class="ms-admin-material-list"> |
||||
<div class="ms-admin-material-item" v-for="(material,index) in materialList" :key='index'> |
||||
<div class="head"> |
||||
<span v-text="'更新于'+formmateTime(material.newsDateTime)"></span> |
||||
<i class="iconfont icon-weixin" v-if='material.newsIsSyn'></i> |
||||
</div> |
||||
<div class="body"> |
||||
<span v-text="material.newsArticle.basicTitle"></span> |
||||
<img :src="material.newsArticle.basicThumbnails || ms.base+'/WEB-INF/manager/images/data/ms-bg_1.jpg'" /> |
||||
<p v-text="material.newsArticle.basicDescription"></p> |
||||
</div> |
||||
<div class="footer"> |
||||
<i class="el-icon-edit" @click="articleVue.open(material)"></i> |
||||
<em></em> |
||||
<i class="el-icon-delete" @click='del(material,index)'></i> |
||||
</div> |
||||
</div> |
||||
</el-main> |
||||
</el-container> |
||||
</el-container> |
||||
</div> |
||||
|
||||
<script> |
||||
new Vue({ |
||||
el: "#material-list-vue", |
||||
data: { |
||||
options1: [{ |
||||
value: '全部图片', |
||||
label: '全部图片' |
||||
}], |
||||
options2: [{ |
||||
value: '全部图片', |
||||
label: '全部图片' |
||||
}], |
||||
value1: '全部图片', |
||||
value2: '', |
||||
materialList: [{ |
||||
date: '12月27日', |
||||
title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...', |
||||
img: '../images/data/img.png', |
||||
det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......' |
||||
}, |
||||
{ |
||||
date: '12月27日', |
||||
title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...', |
||||
img: '../images/data/img.png', |
||||
det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......' |
||||
} |
||||
], |
||||
}, |
||||
methods: {}, |
||||
mounted: function() {} |
||||
}) |
||||
var materialListVue = new Vue({ |
||||
el: "#material-list-vue", |
||||
data: { |
||||
options1: [{ |
||||
value: '全部图片', |
||||
label: '全部图片' |
||||
}], |
||||
options2: [{ |
||||
value: '全部图片', |
||||
label: '全部图片' |
||||
}], |
||||
value1: '全部图片', |
||||
value2: '', |
||||
materialList: [], |
||||
}, |
||||
methods: { |
||||
// 获取微信素材 |
||||
newsList: function () { |
||||
var that = this; |
||||
ms.http.get(ms.manager + "/weixin/news/list.do") |
||||
.then(function (res) { |
||||
that.materialList = res.rows |
||||
console.log('微信', res); |
||||
}, function (err) { |
||||
that.$message.error(err) |
||||
}) |
||||
}, |
||||
// 删除 |
||||
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> |
||||
@ -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"; |
||||
.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 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; |
||||
} |
||||
.ms-weixin-content{ |
||||
.ms-header{ |
||||
>.el-select--small:first-child{ |
||||
width: 100px !important; |
||||
} |
||||
.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; |
||||
flex-direction: column; |
||||
line-height: 2em; |
||||
span { |
||||
.ms-ellipsis; |
||||
.ms-hover; |
||||
border: 1px solid #e6e6e6; |
||||
border-radius: 4px; |
||||
.head { |
||||
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 { |
||||
.ms-width-height(170px, 110px); |
||||
margin: 0 auto; |
||||
object-fit: cover; |
||||
} |
||||
p { |
||||
margin: 0; |
||||
color: @contentColor; |
||||
.ms-ellipsis-clamp(3); |
||||
} |
||||
} |
||||
.footer { |
||||
display: flex; |
||||
padding: 14px 0; |
||||
i { |
||||
color: @contentColor; |
||||
margin: auto; |
||||
.ms-hover; |
||||
.body { |
||||
display: flex; |
||||
flex-direction: column; |
||||
line-height: 2em; |
||||
span { |
||||
.ms-ellipsis; |
||||
.ms-hover; |
||||
} |
||||
img { |
||||
.ms-width-height(170px, 110px); |
||||
margin: 0 auto; |
||||
object-fit: cover; |
||||
} |
||||
p { |
||||
margin: 0; |
||||
color: @contentColor; |
||||
.ms-ellipsis-clamp(3); |
||||
} |
||||
} |
||||
em { |
||||
.ms-width-height(1px, 1em); |
||||
background: #e6e6e6; |
||||
.footer { |
||||
display: flex; |
||||
padding: 14px 0; |
||||
i { |
||||
color: @contentColor; |
||||
margin: auto; |
||||
.ms-hover; |
||||
} |
||||
em { |
||||
.ms-width-height(1px, 1em); |
||||
background: #e6e6e6; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue