304 行
13 KiB
HTML
可执行文件
304 行
13 KiB
HTML
可执行文件
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>新增素材</title>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/user/css/newEditor.css" />
|
||
<script type="text/javascript" charset="utf-8" src="/Public/wxsourse/ueditor.config.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="/Public/wxsourse/ueditor.all.js"></script>
|
||
<script src="__PUBLIC__/user/js/vue.js"></script>
|
||
<style type="text/css">
|
||
.neweditor_b{
|
||
overflow-x: auto;
|
||
}
|
||
.neweditor_b_middle_box{
|
||
overflow-x: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.layui-upload-file{display: none}
|
||
</style>
|
||
</head>
|
||
|
||
<body >
|
||
<div id="myapp">
|
||
|
||
|
||
<div class="newBox">
|
||
<div class="neweditor_a">素材库 / 新建图文素材{{index}}</div>
|
||
<div class="neweditor_b">
|
||
<div class="neweditor_b_left">
|
||
<div class="neweditor_bl01">图文列表</div>
|
||
<div class="neweditor_bl03" >
|
||
<div class="neweditor_bl03_inner"
|
||
v-for="(item,key) in Teletextarr"
|
||
@click="changeactive(key)"
|
||
@mouseenter="showchange(key)"
|
||
@mouseleave="item.showchange=false"
|
||
>
|
||
<div class="nbi_inner neweditor_bl02 " :style="key==active?'border: 2px solid #079200;':''" style="height: 125px;" v-if="key==0">
|
||
<div class="neweditor_bl02_inner">
|
||
<img class="_img" :src="item.thumb_media" />
|
||
</div>
|
||
<div class="nbi_inner_edit" v-show="item.showchange" style="opacity: 1;padding-left:10px;">
|
||
{{item.title}}
|
||
</div>
|
||
</div>
|
||
<div class="nbi_inner" :class="key==active?'nbi_inner_cheak':''" v-if="key>0">
|
||
<div class="nbi_inner_txt">{{item.title}}</div>
|
||
<div class="nbi_inner_img">
|
||
<img class="_img" :src="item.thumb_media" />
|
||
</div>
|
||
<div class="nbi_inner_edit" v-show="item.showchange" style="opacity: 1;">
|
||
<div class="nie_left" @click.stop="myup(key)" v-show="!(key==0)">
|
||
<div class="nie_left_up">
|
||
<img src="__PUBLIC__/user/images/ms_up.png" />
|
||
</div>
|
||
<div class="nie_left_down" @click.stop="mydown(key)" v-show="key!=index">
|
||
<img src="__PUBLIC__/user/images/ms_down.png" />
|
||
</div>
|
||
</div>
|
||
<div class="nie_right">
|
||
<div class="nie_right_del" @click.stop="delText(key)">
|
||
<img src="__PUBLIC__/user/images/ms_del2.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="neweditor_bl03_addi" @click="addTeletext" v-show="canadd">
|
||
<img src="__PUBLIC__/user/images/ms_plus.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="neweditor_b_middle neweditor_b_middle_box">
|
||
<div class="neweditor_b_middle" style="width:100%;" v-for="(item,key) in Teletextarr" v-show="key==active">
|
||
<div class="newbm_title">
|
||
<input type="" name="" id="_title" v-model="item.title" placeholder="请在这里输入标题" />
|
||
</div>
|
||
<div class="newbm_author">
|
||
<input type="" name="" id="_author" v-model="item.author" placeholder="请输入作者" />
|
||
</div>
|
||
<div class="newbm_author">
|
||
<input type="" name="" id="_link" v-model="item.url" placeholder="链接地址:http://example.com" />
|
||
</div>
|
||
</div>
|
||
<!--百度编译器-->
|
||
<div class="newbm_edit" style="flex:1;">
|
||
<script id="editor" type="text/plain" style="width:100%;height:300px;box-sizing:border-box;" name="content" class="myueditor"></script>
|
||
<textarea name="content" id="content" hidden ><% =request("content") %></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="neweditor_b_right">
|
||
<div class="nbr_pub">发布样式编辑</div>
|
||
<div class="nbr_cover">封面</div>
|
||
<div class="nbr_size">建议尺寸</div>
|
||
<div class="nbr_size">大图片：900*500（单图文或多图文第一篇）</div>
|
||
<div class="nbr_size">小图片：200*200（多图文第一篇图文下面）</div>
|
||
<div class="nbr_upimgbox">
|
||
<div class="nbr_upimg">上传图片 </div>
|
||
</div>
|
||
<div class="nbr_showcover">
|
||
<div class="nbr_showcover_a">
|
||
<div :class="Teletextarr[active]['show_cover_pic']==1?'nsa_inner_cheak':''" @click="checkItem" class="nsa_inner" ></div>
|
||
</div>
|
||
<div class="">在正文顶部显示封面图</div>
|
||
</div>
|
||
<div class="nbr_showimg">
|
||
<img class="ns_img" src="" />
|
||
</div>
|
||
<div class="nbr_abstract">
|
||
<div class="nbr_abstract_a">
|
||
摘要<span>(选填,如果不填会默认抓取正文前54个字)</span>
|
||
</div>
|
||
<div class="nbr_abstract_b">
|
||
<textarea name="" rows="" cols="" v-model="Teletextarr[active]['digest']"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="kong"></div>
|
||
<div class="savebox">
|
||
<div id="save_local" class="save_a" @click="save" >保存到本地</div>
|
||
<div id="save_wechat" class="save_a" @click="saveandsubmit" >保存并上传到微信</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script type="text/javascript" src="__PUBLIC__/user/js/jquery-2.0.3.min.js"></script>
|
||
<script type="text/javascript" src="__PUBLIC__/user/Index/layui/layui.js"></script>
|
||
<script type="text/javascript">
|
||
var ue = UE.getEditor('editor');
|
||
var myvue = new Vue({
|
||
el: '#myapp',
|
||
data: function(){
|
||
return {
|
||
Teletextarr:[{
|
||
content:"内容",
|
||
title:"标题",
|
||
author:"作者",
|
||
url:"路径",
|
||
digest:"",//摘要
|
||
thumb_media:"__PUBLIC__/user/images/ms_ebebeb.png",//封面素材
|
||
show_cover_pic:"",//是否显示封面图片
|
||
showchange:false,
|
||
}],
|
||
index:0,
|
||
active:0,
|
||
lastactive:false,
|
||
canadd:true,
|
||
}
|
||
},
|
||
methods:{
|
||
// 添加文章
|
||
addTeletext:function(){
|
||
if(this.canadd){
|
||
var obj = {
|
||
content:"",
|
||
title:"标题"+this.index,
|
||
author:"",
|
||
url:"",
|
||
digest:"",//摘要
|
||
thumb_media:"__PUBLIC__/user/images/ms_ebebeb.png",//封面素材
|
||
show_cover_pic:"",//是否显示封面图片
|
||
showchange:false,
|
||
}
|
||
this.Teletextarr.push(obj);
|
||
}else{
|
||
console.log('8个啦')
|
||
}
|
||
},
|
||
checkItem:function () {
|
||
var status = this.Teletextarr[this.active]['show_cover_pic'];
|
||
if(status){
|
||
this.Teletextarr[this.active]['show_cover_pic'] = 0;
|
||
}else{
|
||
this.Teletextarr[this.active]['show_cover_pic'] = 1;
|
||
}
|
||
},
|
||
changeactive:function(key){
|
||
if(key<0){
|
||
return;
|
||
}
|
||
var arr = this.Teletextarr;
|
||
var active = this.active;
|
||
arr[active]['content'] = ue.getContent();
|
||
if(key!=active){
|
||
var content = this.Teletextarr[key]['content'];
|
||
ue.setContent(content);
|
||
}
|
||
this.Teletextarr = arr;
|
||
arr = null;
|
||
this.active=key
|
||
},
|
||
delText:function(key){
|
||
if(key==this.Teletextarr.length-1){
|
||
this.active=key-1;
|
||
this.Teletextarr.splice(key,1);
|
||
}else{
|
||
this.Teletextarr.splice(key,1);
|
||
}
|
||
|
||
},
|
||
// 向下挪
|
||
mydown:function(key){
|
||
var obj = this.Teletextarr[key];
|
||
this.Teletextarr.splice(key,1);
|
||
this.Teletextarr.splice(key+1,0,obj);
|
||
},
|
||
// 向上挪
|
||
myup:function(key){
|
||
var obj = this.Teletextarr[key];
|
||
this.Teletextarr.splice(key,1);
|
||
this.Teletextarr.splice(key-1,0,obj);
|
||
},
|
||
showchange:function(key){
|
||
var arr = this.Teletextarr;
|
||
for(var i=0;i<arr.length;i++){
|
||
if(i==key){
|
||
arr[i]['showchange'] = true;
|
||
}else{
|
||
arr[i]['showchange'] = false;
|
||
}
|
||
}
|
||
this.Teletextarr = arr;
|
||
arr = null;
|
||
},
|
||
// 保存
|
||
save:function(){
|
||
this.changeactive(this.active);
|
||
var data = {};
|
||
data.data = this.Teletextarr;
|
||
layer.confirm("你确定要上传该图文到本地吗？",function () {
|
||
$.ajax({
|
||
url:"{:U('saveSource')}",
|
||
type:"post",
|
||
data:data,
|
||
success:function (re) {
|
||
if(re.status){
|
||
layer.alert(re.msg,function () {
|
||
window.location.href="{:U('SourseIndex')}"
|
||
});
|
||
}else{
|
||
layer.alert(re.msg);
|
||
}
|
||
}
|
||
})
|
||
})
|
||
},
|
||
//保存并上传
|
||
saveandsubmit:function(){
|
||
this.changeactive(this.active);
|
||
var data = {};
|
||
data.data = this.Teletextarr;
|
||
layer.confirm("你确定要上传该图文到微信服务器吗？",function () {
|
||
$.ajax({
|
||
url:"{:U('WxsaveSource')}",
|
||
type:"post",
|
||
data:data,
|
||
success:function (re) {
|
||
if(re.status){
|
||
layer.alert(re.msg,function () {
|
||
window.location.href="{:U('SourseIndex')}"
|
||
});
|
||
}else{
|
||
layer.alert(re.msg);
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
},
|
||
watch:{
|
||
Teletextarr:function(n,o){
|
||
this.index = n.length-1;
|
||
console.log(n.length);
|
||
if(n.length>=7){
|
||
this.canadd = false;
|
||
}else{
|
||
this.canadd = true;
|
||
}
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
<script type="text/javascript">
|
||
//layui 绑定上传
|
||
layui.use(['layer', 'upload'], function() {
|
||
var upload = layui.upload;
|
||
//执行实例
|
||
|
||
upload.render({
|
||
elem: '.nbr_upimg' //绑定元素
|
||
,url: '{:U("Base/upload")}' //上传接口
|
||
,done: function(res, index, upload){
|
||
//上传完毕回调
|
||
myvue.Teletextarr[myvue.active]['thumb_media'] = res.name;
|
||
$('.nbr_showimg img').attr('src',res.name);
|
||
}
|
||
});
|
||
})
|
||
</script>
|
||
|
||
</html> |