1079 lines
35 KiB
HTML
1079 lines
35 KiB
HTML
{extend name="public/base" /}
|
||
{block name="style"}
|
||
<link rel="stylesheet" href="/public/css/wx-custom.css">
|
||
<style>
|
||
.list-show{
|
||
width:100%;
|
||
height:100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index:999;
|
||
display: none;
|
||
}
|
||
.list-show-from{
|
||
width:90%;
|
||
height:100%;
|
||
display:block;
|
||
margin: 0 auto;
|
||
background: #fff;
|
||
overflow-y:scroll;
|
||
}
|
||
.wxlist .checkbox-inline{margin-top:25px;margin-left:25px}
|
||
.wxlist .checkbox-inline input{width:25px;height:25px;}
|
||
.wxlist .checkbox-inline p{font-size:18px;margin-left:20px;}
|
||
</style>
|
||
{/block}
|
||
{block name="body"}
|
||
<div class="custom-menu-edit-con">
|
||
<div class="hbox">
|
||
<div class="inner-left">
|
||
<div class="custom-menu-view-con">
|
||
<div class="custom-menu-view">
|
||
<div class="custom-menu-view__title">{$wxname}</div>
|
||
<div class="custom-menu-view__body">
|
||
<div class="weixin-msg-list"><ul class="msg-con"></ul></div>
|
||
</div>
|
||
<div id="menuMain" class="custom-menu-view__footer">
|
||
<div class="custom-menu-view__footer__left"></div>
|
||
<div class="custom-menu-view__footer__right" ></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="inner-right">
|
||
<div class="cm-edit-after">
|
||
<div class="cm-edit-right-header b-b"><span id="cm-tit"></span> <a id="delMenu" class="pull-right" href="javascript:;">删除菜单</a></div>
|
||
<form class="form-horizontal wrapper-md" name="custom_form">
|
||
<div class="form-group">
|
||
<label class="col-sm-2 control-label">菜单名称:</label><div class="col-sm-5">
|
||
<input name="custom_input_title" type="text" class="form-control" ng-model="menuname" value="" placeholder="" ng-maxlength="5"></div><div class="col-sm-5 help-block">
|
||
<div ng-show="custom_form.custom_input_title.$dirty&&custom_form.custom_input_title.$invalid-maxlength">字数不超过5个汉字或16个字符</div>
|
||
<div class="font_sml" style="display: none;">若无二级菜单，可输入20个汉字或60个字符</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" id="radioGroup">
|
||
<label class="col-sm-2 control-label">菜单内容:</label>
|
||
<div class="col-sm-10 LebelRadio">
|
||
<label class="checkbox-inline"><input type="radio" name="radioBtn" value="sendmsg" checked> 按钮名称</label>
|
||
<label class="checkbox-inline"><input type="radio" name="radioBtn" value="link"> 跳转网页</label>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="cm-edit-content-con" id="editMsg">
|
||
<!-- <div class="editTab"> -->
|
||
<!-- <p style="margin-left: 20px;margin-top: 20px;">暂不支持</p> -->
|
||
<div class="cm-edit-page">
|
||
<div class="row">
|
||
<label class="col-sm-6 control-label" style="text-align: left;">粉丝点击该菜单会回复此菜单内容:
|
||
</label>
|
||
</div>
|
||
<div class="row">
|
||
<label class="col-sm-2 control-label" style="text-align: left;">按钮名称:
|
||
</label>
|
||
<div class="col-sm-5">
|
||
<input name="key" id="key" class="form-control" placeholder="请输入按钮名称">
|
||
<span class="help-block">必填</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cm-edit-content-con" id="editPage">
|
||
<div class="cm-edit-page">
|
||
<div class="row">
|
||
<label class="col-sm-6 control-label" style="text-align: left;">粉丝点击该菜单会跳转到以下链接:
|
||
</label>
|
||
</div>
|
||
<div class="row">
|
||
<label class="col-sm-2 control-label" style="text-align: left;">页面地址:
|
||
</label>
|
||
<div class="col-sm-5">
|
||
<input type="text" name="url" class="form-control" placeholder="认证号才可手动输入地址">
|
||
<span class="help-block">必填,必须是正确的URL格式</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cm-edit-before"><h5>点击左侧菜单进行操作</h5></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cm-edit-footer">
|
||
<!-- <button id="sortBtn" type="button" class="btn btn-default">菜单排序</button>
|
||
<button id="sortBtnc" type="button" class="btn btn-default">完成排序</button> -->
|
||
<button type="button" class="btn btn-primary" onclick="upwx('{$wxid}')">同步公众号</button>
|
||
<button id="saveBtns" type="button" class="btn btn-danger">保存</button>
|
||
<a href="javascript:history.back(-1)" class="btn btn-success">返回</a>
|
||
<div class="btn btn-danger" style="background:pink;" onclick="listshow('{$wxid}')">菜单复制</div>
|
||
<button type="button" class="btn btn-danger" onclick="resetmenu()">重置</button>
|
||
</div>
|
||
</div>
|
||
<div class="list-show" id="list-show">
|
||
<div class="list-show-from">
|
||
<input type="hidden" value="" name="dataid" id="dataid">
|
||
<div class="wxlist">
|
||
{volist name="wxlist" id="v"}
|
||
<label class="checkbox-inline">
|
||
<input type="checkbox" value="{$v.id}" name="wxlist" id="checkboxwa">
|
||
<p>{$v.title}</p>
|
||
</label>
|
||
{/volist}
|
||
</div>
|
||
<a href="#" class="btn btn-danger close" onclick="listhide()">关闭</a>
|
||
<a href="#" class="btn btn-success" onclick="copydata()">复制</a>
|
||
</div>
|
||
</div>
|
||
<script src="/public/js/Sortable.js"></script>
|
||
<div id="selectModal" class="modal fade" tabindex="-1" role="dialog">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
|
||
<h4 class="modal-title">
|
||
选择图片
|
||
</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
<div id="col_1" class="col-xs-4">
|
||
<div class="panel panel-default">
|
||
|
||
<div class="mask-bg"><div class="mask-icon"><i class="icon-ok"></i></div></div>
|
||
</div>
|
||
</div>
|
||
<div id="col_2" class="col-xs-4">
|
||
<div class="panel panel-default">
|
||
|
||
|
||
<div class="mask-bg"><div class="mask-icon"><i class="icon-ok"></i></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-info ensure">确定</button>
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="reminderModal" class="modal fade" tabindex="-1" role="dialog">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
|
||
<h4 class="modal-title">
|
||
温馨提示
|
||
</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<h5>添加子菜单后，一级菜单的内容将被清除。确定添加子菜单？</h5>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-info reminder">确定</button>
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="abnormalModal" class="modal fade" tabindex="-1" role="dialog">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
|
||
<h4 class="modal-title">
|
||
温馨提示
|
||
</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<h5>数据异常</h5>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<!-- <button type="button" class="btn btn-info reminder">确定</button> -->
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/block}
|
||
{block name="script"}
|
||
<script>
|
||
function resetmenu(){
|
||
swal({
|
||
title: '确定重置?',
|
||
text: "重置公众号的菜单",
|
||
type: 'warning',
|
||
buttons:{
|
||
confirm: {
|
||
text : '确认',
|
||
className : 'btn btn-success'
|
||
},
|
||
cancel: {
|
||
text : '关闭',
|
||
visible: true,
|
||
className: 'btn btn-danger'
|
||
}
|
||
}
|
||
}).then((Delete) => {
|
||
if (Delete) {
|
||
var wid = '{$wxid}'
|
||
$.ajax({
|
||
type: "POST",
|
||
url:"{:url('Wxpushall/resetmenu')}",
|
||
data: {wxid:wid},
|
||
dataType:"json",
|
||
success: function(data) {
|
||
if(data.status==1){
|
||
swal('成功',data.reg, {icon : "success",buttons:{confirm:{className : 'btn btn-success'}},});
|
||
window.location = "";
|
||
}else{
|
||
swal('错误',data.reg, {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
|
||
}
|
||
|
||
}
|
||
|
||
});
|
||
|
||
} else {
|
||
//关闭执行
|
||
swal.close();
|
||
}
|
||
});
|
||
}
|
||
function copydata(){
|
||
swal({
|
||
title: '确定复制?',
|
||
text: "将复制选择的公众号",
|
||
type: 'warning',
|
||
buttons:{
|
||
confirm: {
|
||
text : '确认',
|
||
className : 'btn btn-success'
|
||
},
|
||
cancel: {
|
||
text : '关闭',
|
||
visible: true,
|
||
className: 'btn btn-danger'
|
||
}
|
||
}
|
||
}).then((Delete) => {
|
||
if (Delete) {
|
||
var wx_array=new Array();
|
||
$('input[id="checkboxwa"]:checked').each(function(){
|
||
wx_array.push($(this).val());//向数组中添加元素
|
||
});
|
||
var wxlist = wx_array.join(',');//将数组元素连接起来以构建一个字符串
|
||
var dataid = $('#dataid').val();
|
||
if(wxlist){
|
||
$.ajax({
|
||
type: "POST",
|
||
url:"{:url('Wxpushall/copymenu')}",
|
||
data: {wxid:dataid,wxlist:wxlist},
|
||
dataType:"json",
|
||
success: function(data) {
|
||
if(data.status==1){
|
||
swal('成功',data.reg, {icon : "success",buttons:{confirm:{className : 'btn btn-success'}},});
|
||
window.location = "";
|
||
}else{
|
||
swal('错误',data.reg, {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
|
||
}
|
||
|
||
}
|
||
|
||
});
|
||
}else{
|
||
swal('错误','选公众号啊', {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
|
||
}
|
||
} else {
|
||
//关闭执行
|
||
swal.close();
|
||
}
|
||
});
|
||
}
|
||
function listshow(id){
|
||
$('#list-show').show();
|
||
$('#dataid').val(id);
|
||
}
|
||
function listhide(){
|
||
$('#list-show').hide();
|
||
$('#dataid').val('');
|
||
}
|
||
// 同步公众号
|
||
function upwx(wxid){
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "{:url('wxpushall/addWxMenu')}",
|
||
data : {
|
||
"wxid" : wxid
|
||
},
|
||
dataType : "json",
|
||
success : function(data) {
|
||
if (data.status==1) {
|
||
swal('同步成功',data.reg, {icon : "success",buttons:{confirm:{className : 'btn btn-success'}},});
|
||
} else {
|
||
swal('错误',data.reg, {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
<script>
|
||
$(function(){
|
||
var mId=null;
|
||
//初始数据
|
||
if("{$init}"==1){
|
||
var obj={$data};
|
||
}else{
|
||
var obj={
|
||
"menu": {
|
||
"button": [
|
||
{
|
||
"type": "click",
|
||
"name": "菜单",
|
||
"key": "col_2",
|
||
"sub_button": [ ]
|
||
},
|
||
{
|
||
"type": "click",
|
||
"name": "菜单",
|
||
"key": "col_2",
|
||
"sub_button": [ ]
|
||
},
|
||
{
|
||
"type": "click",
|
||
"name": "菜单",
|
||
"key": "col_2",
|
||
"sub_button": [ ]
|
||
}
|
||
]
|
||
}
|
||
};
|
||
}
|
||
var tempObj={};//存储HTML对象
|
||
var button=obj.menu.button;//一级菜单
|
||
//显示异常
|
||
if(obj.errcode){
|
||
$('#abnormalModal').modal('show');
|
||
}
|
||
//一级菜单对象
|
||
function parents(param){
|
||
this.name=param;
|
||
this.sub_button=[];
|
||
}
|
||
//二级菜单对象
|
||
function subs(param){
|
||
this.name=param;
|
||
}
|
||
var objp=new parents();
|
||
var objs=new subs();
|
||
var ix=button.length;//一级菜单数量
|
||
var menu='<div class="custom-menu-view__menu"><div class="text-ellipsis"></div></div>';
|
||
var customBtns=$('.custom-menu-view__footer__right');
|
||
if(button.length>0){
|
||
showMenu();
|
||
//$('.cm-edit-before').hide();
|
||
$('.cm-edit-after').hide();
|
||
}else{
|
||
addMenu();
|
||
$('.cm-edit-before').siblings().hide();
|
||
}
|
||
//显示第一级菜单
|
||
function showMenu(){
|
||
if(button.length==1){
|
||
appendMenu(button.length);
|
||
showBtn();
|
||
$('.custom-menu-view__menu').css({
|
||
width:'50%',
|
||
});
|
||
}
|
||
if(button.length==2){
|
||
appendMenu(button.length);
|
||
showBtn();
|
||
$('.custom-menu-view__menu').css({
|
||
width:'33.3333%',
|
||
});
|
||
}
|
||
if(button.length==3){
|
||
appendMenu(button.length);
|
||
showBtn();
|
||
$('.custom-menu-view__menu').css({
|
||
width:'33.3333%',
|
||
});
|
||
}
|
||
for(var b=0;b<button.length;b++){
|
||
$('.custom-menu-view__menu')[b].setAttribute('alt',b);
|
||
}
|
||
}
|
||
//显示子菜单
|
||
function showBtn(){
|
||
for(var i=0;i<button.length;i++){
|
||
var text=button[i].name;
|
||
var list=document.createElement('ul');
|
||
list.className="custom-menu-view__menu__sub";
|
||
$('.custom-menu-view__menu')[i].childNodes[0].innerHTML=text;
|
||
$('.custom-menu-view__menu')[i].appendChild(list);
|
||
for(var j=0;j<button[i].sub_button.length;j++){
|
||
var text=button[i].sub_button[j].name;
|
||
var li=document.createElement("li");
|
||
var tt=document.createTextNode(text);
|
||
var div=document.createElement('div');
|
||
li.className='custom-menu-view__menu__sub__add';
|
||
li.id='sub_'+i+'_'+j;//设置二级菜单id
|
||
div.className="text-ellipsis";
|
||
div.appendChild(tt);
|
||
li.appendChild(div);
|
||
$('.custom-menu-view__menu__sub')[i].appendChild(li);
|
||
}
|
||
var ulBtnL=button[i].sub_button.length;
|
||
var iLi=document.createElement("li");
|
||
var ii=document.createElement('i');
|
||
var iDiv=document.createElement("div");
|
||
ii.className="glyphicon glyphicon-plus text-info";
|
||
iDiv.className="text-ellipsis";
|
||
iLi.className='custom-menu-view__menu__sub__add';
|
||
iDiv.appendChild(ii);
|
||
iLi.appendChild(iDiv);
|
||
if(ulBtnL<5){
|
||
$('.custom-menu-view__menu__sub')[i].appendChild(iLi);
|
||
}
|
||
|
||
}
|
||
}
|
||
//显示添加的菜单
|
||
function appendMenu(num){
|
||
var menuDiv=document.createElement('div');
|
||
var mDiv=document.createElement('div');
|
||
var mi=document.createElement('i');
|
||
mi.className='glyphicon glyphicon-plus text-info iBtn';
|
||
mDiv.className='text-ellipsis';
|
||
menuDiv.className='custom-menu-view__menu';
|
||
mDiv.appendChild(mi);
|
||
menuDiv.appendChild(mDiv)
|
||
switch(num){
|
||
case 1:
|
||
customBtns.append(menu);
|
||
customBtns.append(menuDiv);
|
||
break;
|
||
case 2:
|
||
customBtns.append(menu);
|
||
customBtns.append(menu);
|
||
customBtns.append(menuDiv);
|
||
break;
|
||
case 3:
|
||
customBtns.append(menu);
|
||
customBtns.append(menu);
|
||
customBtns.append(menu);
|
||
break;
|
||
}
|
||
}
|
||
//初始化菜单按钮
|
||
function addMenu(){
|
||
var menuI='<div class="custom-menu-view__menu"><div class="text-ellipsis"><i class="glyphicon glyphicon-plus text-info iBtn"></i></div></div>';
|
||
var sortIndex=true;
|
||
customBtns.append(menuI);
|
||
var customFirstBtns=$('.custom-menu-view__menu');
|
||
var firstBtnsLength=customFirstBtns.length;
|
||
if(firstBtnsLength<=1){
|
||
customFirstBtns.css({
|
||
width:'100%',
|
||
})
|
||
}
|
||
}
|
||
//添加菜单按钮
|
||
var customEl='<div class="custom-menu-view__menu"><div class="text-ellipsis">新建菜单</div></div>'
|
||
var customUl='<ul class="custom-menu-view__menu__sub"><li class="custom-menu-view__menu__sub__add"><div class="text-ellipsis"><i class="glyphicon glyphicon-plus text-info"></i></div></li></ul>';
|
||
var customLi='<li class="custom-menu-view__menu__sub__add"><div class="text-ellipsis">新建子菜单</div></li>';
|
||
$('.iBtn').parent().on('click',function(){
|
||
var num=$('.custom-menu-view__footer__right').find('.custom-menu-view__menu').length;
|
||
var ulNum=$(this).parents('.custom-menu-view__menu').prev().find('.custom-menu-view__menu__sub').length;
|
||
ix++;
|
||
if(ix<4){
|
||
$(this).parent().before(customEl);
|
||
$(this).parent().prev().append(customUl);
|
||
|
||
$('.custom-menu-view__footer__right').find('.subbutton__actived').removeClass('subbutton__actived');
|
||
$(this).parent().prev().addClass('subbutton__actived');
|
||
|
||
//一级菜单列数
|
||
var buttonIndex=$(this).parents('.custom-menu-view__menu').index()-1;
|
||
$('.custom-menu-view__menu').eq(buttonIndex).on('click',(function(buttonIndex){
|
||
var txt=$('.custom-menu-view__menu').eq(buttonIndex).text();
|
||
setMenuText(txt);
|
||
})(buttonIndex));
|
||
|
||
if(ix==1){
|
||
$('.custom-menu-view__menu').css({
|
||
width:'50%'
|
||
});
|
||
$('.custom-menu-view__menu')[ix-1].setAttribute('alt',ix-1);
|
||
}
|
||
if(ix==2){
|
||
$('.custom-menu-view__menu').css({
|
||
width:'33.3333%'
|
||
});
|
||
$('.custom-menu-view__menu')[ix-1].setAttribute('alt',ix-1);
|
||
}
|
||
var divText=$(this).parent().prev().find('.text-ellipsis').text();
|
||
button.push(new parents(divText));
|
||
}
|
||
if(ix==3){
|
||
$(this).parents('.custom-menu-view__menu').remove();
|
||
$(this).parent().append(customUl);
|
||
$('.custom-menu-view__menu')[ix-1].setAttribute('alt',ix-1);
|
||
}
|
||
$('.cm-edit-after').show().siblings().hide();
|
||
|
||
});
|
||
var setMenuText=function(value){
|
||
setInput(value);
|
||
updateTit(value);
|
||
|
||
radios[0].checked=true;
|
||
$('#editMsg').show();
|
||
$('#editPage').hide();
|
||
$('.msg-context__item').show();
|
||
$('.msg-template').hide();
|
||
}
|
||
function setSubText(){
|
||
var actived=$('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived');
|
||
var activedTxt=$('.subbutton__actived').text();
|
||
if(actived){
|
||
setInput(activedTxt);
|
||
updateTit(activedTxt);
|
||
|
||
radios[0].checked=true;
|
||
$('#editMsg').show();
|
||
$('#editPage').hide();
|
||
$('.msg-context__item').show();
|
||
$('.msg-template').hide();
|
||
}
|
||
}
|
||
//添加子菜单
|
||
var colIndex;//一级菜单列数
|
||
customBtns.on('click','li>.text-ellipsis>i',function(){
|
||
//绑定删除事件
|
||
$('.msg-panel__del').on('click',delClick);
|
||
colIndex=$(this).parents('.custom-menu-view__menu').attr('alt');
|
||
var liNum=$(this).parents('.custom-menu-view__menu').find('li').length;
|
||
|
||
if(liNum<=1){
|
||
$('#reminderModal').modal('show');
|
||
}else{
|
||
if(liNum<6){
|
||
$(this).parent().parent().before(customLi);
|
||
setLiId();
|
||
}
|
||
if(liNum==5){
|
||
$(this).parents('li').remove();
|
||
}
|
||
}
|
||
$('#radioGroup').show();
|
||
setSubText()
|
||
});
|
||
//确定添加子菜单事件
|
||
$('.reminder').click(function(){
|
||
var ul=$('.custom-menu-view__menu')[colIndex].getElementsByTagName('ul')[0];
|
||
var li=document.createElement('li');
|
||
var div=document.createElement('div');
|
||
var Text=document.createTextNode('新建子菜单');
|
||
li.className="custom-menu-view__menu__sub__add";
|
||
div.className="text-ellipsis";
|
||
div.appendChild(Text);
|
||
li.appendChild(div);
|
||
ul.insertBefore(li,ul.childNodes[0]);
|
||
setLiId();
|
||
delete button[colIndex].type;
|
||
delete button[colIndex].key;
|
||
delete button[colIndex].url;
|
||
$('#reminderModal').modal('hide');
|
||
|
||
setSubText()
|
||
});
|
||
//对新添加二级菜单添加id
|
||
function setLiId(){
|
||
var prev=$('.custom-menu-view__menu')[colIndex].getElementsByTagName('i')[0].parentNode.parentNode.previousSibling;
|
||
var divText=prev.childNodes[0].innerHTML;
|
||
button[colIndex].sub_button.push(new subs(divText));
|
||
var id=button[colIndex].sub_button.length-1;
|
||
prev.setAttribute('id','sub_'+colIndex+'_'+id);
|
||
|
||
$('.custom-menu-view__footer__right').find('.subbutton__actived').removeClass('subbutton__actived');
|
||
$('.custom-menu-view__menu').eq(colIndex).find('i').parent().parent().prev().addClass('subbutton__actived');
|
||
}
|
||
//点击菜单
|
||
customBtns.on('click','.text-ellipsis',function(){
|
||
$('.cm-edit-after').show().siblings().hide();
|
||
if($(this).parent().attr('id') || $(this).parent().attr('alt')){
|
||
$(this).parents('.custom-menu-view__footer__right').find('.subbutton__actived').removeClass('subbutton__actived');
|
||
$(this).parent().addClass('subbutton__actived');
|
||
}
|
||
//一级菜单列数
|
||
var buttonIndex=$(this).parents('.custom-menu-view__menu').index();
|
||
if($('.msg-context__item').is(':hidden')){
|
||
$('.msg-template').show();
|
||
}else if($('.msg-context__item').is(':visible')){
|
||
$('.msg-template').hide();
|
||
}
|
||
//点击在一级菜单上
|
||
if($(this).parent().attr('alt')){
|
||
|
||
if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
|
||
var current=$('.subbutton__actived');
|
||
var alt=current.attr('alt');
|
||
var lis=current.find('ul>li');
|
||
setInput(button[buttonIndex].name);
|
||
updateTit(button[buttonIndex].name);
|
||
if(lis.length>1){
|
||
$('#editMsg').hide();
|
||
$('#editPage').hide();
|
||
$('#radioGroup').hide();
|
||
}else{
|
||
if(button[buttonIndex].type=='click'){
|
||
radios[0].checked=true;
|
||
$('#editMsg').show();
|
||
$('#editPage').hide();
|
||
$('#radioGroup').show();
|
||
|
||
//拿key换取mediaId
|
||
subKey=button[buttonIndex].key.innerHTML;
|
||
$('.msg-template').html($('#'+subKey).html());
|
||
delElement();
|
||
//绑定删除事件
|
||
$('.msg-panel__del').on('click',delClick);
|
||
|
||
$('.msg-template').html(tempObj[button[buttonIndex].key]);
|
||
$('#key').val(button[buttonIndex].key);
|
||
|
||
}else if(button[buttonIndex].type=='view'){
|
||
$('input[name="url"]').val(button[buttonIndex].url);
|
||
|
||
radios[1].checked=true;
|
||
$('#editMsg').hide();
|
||
$('#editPage').show();
|
||
$('#radioGroup').show();
|
||
}else if(!button[buttonIndex].type){
|
||
radios[0].checked=true;
|
||
$('#editMsg').show();
|
||
$('#editPage').hide();
|
||
$('#radioGroup').show();
|
||
}
|
||
if(button[buttonIndex].key){
|
||
$('.msg-context__item').hide();
|
||
$('.msg-template').show();
|
||
}else{
|
||
$('.msg-context__item').show();
|
||
$('.msg-template').hide();
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
//点击在二级菜单上
|
||
if($(this).parent().attr('id')){
|
||
var substr=$(this).parent().attr('id').lastIndexOf('_')+1;
|
||
var subIndex=$(this).parent().attr('id').substring(substr);
|
||
var subText=button[buttonIndex].sub_button[subIndex].name;
|
||
var subUrl=button[buttonIndex].sub_button[subIndex].url;
|
||
var subType=button[buttonIndex].sub_button[subIndex].type;
|
||
var subKey=button[buttonIndex].sub_button[subIndex].key;
|
||
|
||
console.log(subKey)
|
||
if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
|
||
setInput(subText);
|
||
updateTit(subText);
|
||
$('#radioGroup').show();
|
||
if(subType=='click'){
|
||
radios[0].checked=true;
|
||
$('#editMsg').show();
|
||
$('#editPage').hide();
|
||
|
||
//拿key换取图文消息
|
||
//$('.msg-template').html($('#'+subKey).html());
|
||
//delElement();
|
||
//绑定删除事件
|
||
//$('.msg-panel__del').on('click',delClick);
|
||
//$('.msg-template').html(tempObj[subKey]);
|
||
$('#key').val(subKey)
|
||
$('input[name="url"]').val('');
|
||
}else if(subType=='view'){
|
||
radios[1].checked=true;
|
||
$('#editMsg').hide();
|
||
$('#editPage').show();
|
||
$('input[name="url"]').val(subUrl);
|
||
$('#key').val('')
|
||
}else if(!subType){
|
||
radios[0].checked=true;
|
||
$('#editMsg').show();
|
||
$('#editPage').hide();
|
||
$('input[name="url"]').val('');
|
||
$('#key').val('')
|
||
}
|
||
if(subKey){
|
||
$('.msg-context__item').hide();
|
||
$('.msg-template').show();
|
||
}else{
|
||
$('.msg-context__item').show();
|
||
$('.msg-template').hide();
|
||
}
|
||
}
|
||
}
|
||
//绑定删除事件
|
||
$('.msg-panel__del').on('click',delClick);
|
||
});
|
||
//设置右边input的value
|
||
function setInput(val){
|
||
$('input[name="custom_input_title"]').val(val);
|
||
}
|
||
//实时更新右侧顶部标题
|
||
function updateTit(text){
|
||
$('#cm-tit').html(text);
|
||
}
|
||
//保存右侧菜单名称
|
||
$('input[name="custom_input_title"]').keyup(function(){
|
||
var val=$(this).val();
|
||
var current=$('.subbutton__actived');
|
||
if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
|
||
var row=current.attr('id').lastIndexOf('_')-1;
|
||
var col=current.attr('id').lastIndexOf('_')+1;
|
||
var sub_row=current.attr('id').substr(row,1);
|
||
var sub_col=current.attr('id').substring(col);
|
||
button[sub_row].sub_button[sub_col].name=val;
|
||
current.find('.text-ellipsis').text(val);
|
||
updateTit(val);
|
||
}else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
|
||
var alt=current.attr('alt');
|
||
button[alt].name=val;
|
||
current.children('.text-ellipsis').text(val);
|
||
updateTit(val)
|
||
}
|
||
|
||
});
|
||
//保存右侧跳转页面的url
|
||
$('input[name="url"]').keyup(function(){
|
||
var val=$(this).val();
|
||
console.log(1)
|
||
var current=$('.subbutton__actived');
|
||
if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
|
||
var row=current.attr('id').lastIndexOf('_')-1;
|
||
var col=current.attr('id').lastIndexOf('_')+1;
|
||
var sub_row=current.attr('id').substr(row,1);
|
||
var sub_col=current.attr('id').substring(col);
|
||
button[sub_row].sub_button[sub_col].url=val;
|
||
button[sub_row].sub_button[sub_col].type='view';
|
||
if(button[sub_row].sub_button[sub_col].url==''){
|
||
delete button[sub_row].sub_button[sub_col].url;
|
||
}
|
||
}else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
|
||
var alt=current.attr('alt');
|
||
button[alt].url=val;
|
||
button[alt].type='view';
|
||
if(button[alt].url==''){
|
||
delete button[alt].url;
|
||
}
|
||
}
|
||
|
||
});
|
||
$('#key').keyup(function(){
|
||
var val=$(this).val();
|
||
console.log(1)
|
||
var current=$('.subbutton__actived');
|
||
if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
|
||
var row=current.attr('id').lastIndexOf('_')-1;
|
||
var col=current.attr('id').lastIndexOf('_')+1;
|
||
var sub_row=current.attr('id').substr(row,1);
|
||
var sub_col=current.attr('id').substring(col);
|
||
button[sub_row].sub_button[sub_col].key=val;
|
||
button[sub_row].sub_button[sub_col].type='click';
|
||
if(button[sub_row].sub_button[sub_col].key==''){
|
||
delete button[sub_row].sub_button[sub_col].key;
|
||
}
|
||
}else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
|
||
var alt=current.attr('alt');
|
||
button[alt].key=val;
|
||
button[alt].type='click';
|
||
if(button[alt].key==''){
|
||
delete button[alt].key;
|
||
}
|
||
}
|
||
|
||
});
|
||
//自定义菜单排序
|
||
$('#sortBtnc').click(function(){
|
||
var btnWrap=$('.custom-menu-view__footer__right').find('.custom-menu-view__menu');
|
||
var numBtn=btnWrap.length;
|
||
$('#sortBtnc').hide();
|
||
$('#sortBtn').show();
|
||
$('#saveBtns').show();
|
||
$('.iBtn').parents('.custom-menu-view__menu').show();
|
||
if(button.length>0){
|
||
$('.cm-edit-after').show().siblings().hide();
|
||
}else{
|
||
$('.cm-edit-before').show().siblings().hide();
|
||
}
|
||
|
||
for(var n=0;n<numBtn;n++){
|
||
var ul=btnWrap[n].getElementsByTagName('ul')[0];
|
||
if(ul){
|
||
(function(n){
|
||
ul.setAttribute('id','menuStage_2_'+(n+1));
|
||
sortIndex=false;
|
||
sortable(n+1,sortIndex);
|
||
//$('.text-ellipsis>i').parents('li').show();
|
||
var i_el='<li class="custom-menu-view__menu__sub__add"><div class="text-ellipsis"><i class="glyphicon glyphicon-plus text-info"></i></div></li>';
|
||
$('.custom-menu-view__menu__sub').eq(n).append(i_el);
|
||
})(n);
|
||
if(ix==1){
|
||
$('.custom-menu-view__menu').css({
|
||
width:'50%'
|
||
})
|
||
}
|
||
if(ix==2){
|
||
$('.custom-menu-view__menu').css({
|
||
width:'33.3333%'
|
||
});
|
||
}
|
||
|
||
}
|
||
}
|
||
});
|
||
$('#sortBtn').click(function(){
|
||
var btnWrap=$('.custom-menu-view__footer__right').find('.custom-menu-view__menu');
|
||
var numBtn=btnWrap.length;
|
||
$('#sortBtnc').show();
|
||
$('#sortBtn').hide();
|
||
$('#saveBtns').hide();
|
||
$('.iBtn').parents('.custom-menu-view__menu').hide();
|
||
$('.cm-drag-before').show().siblings().hide();
|
||
for(var n=0;n<numBtn;n++){
|
||
var ul=btnWrap[n].getElementsByTagName('ul')[0];
|
||
if(ul){
|
||
(function(n){
|
||
ul.setAttribute('id','menuStage_2_'+(n+1));
|
||
sortIndex=true;
|
||
sortable(n+1,sortIndex);
|
||
$('.text-ellipsis>i').parents('li').remove();
|
||
})(n);
|
||
if(ix==1){
|
||
$('.custom-menu-view__menu').css({
|
||
width:'100%'
|
||
})
|
||
}
|
||
if(ix==2){
|
||
$('.custom-menu-view__menu').css({
|
||
width:'50%'
|
||
});
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
});
|
||
function sortable(m,sortIndex){
|
||
if(sortIndex){
|
||
Sortable.create(document.getElementById('menuStage_2_'+m), {
|
||
animation: 300, //动画参数
|
||
disabled: false,
|
||
});
|
||
}else{
|
||
var el = document.getElementById('menuStage_2_'+m);
|
||
var sortable = Sortable.create(el,{
|
||
disabled: true,
|
||
});
|
||
sortable.destroy();
|
||
|
||
}
|
||
}
|
||
|
||
//tab切换
|
||
$('.msg-panel__tab>li').click(function(){
|
||
$('.msg-panel__tab>li').eq($(this).index()).addClass('on').siblings().removeClass('on');
|
||
$('.msg-panel__context').eq($(this).index()).removeClass('hide').siblings().addClass('hide')
|
||
});
|
||
|
||
//菜单内容跳转
|
||
var radios=document.getElementsByName("radioBtn");
|
||
for ( var n= 0; n < radios.length; n++) {
|
||
radios[n].index=n;
|
||
radios[n].onchange=function(){
|
||
if (radios[this.index].checked==true) {
|
||
if(radios[this.index].value=='link'){
|
||
$('#editMsg').hide();
|
||
$('#editPage').show();
|
||
}else{
|
||
$('#editMsg').show();
|
||
$('#editPage').hide();
|
||
}
|
||
}
|
||
};
|
||
}
|
||
//id为selectModal弹框选中遮罩层
|
||
$('#selectModal .modal-body .panel').click(function(){
|
||
$(this).find('.mask-bg').show();
|
||
$(this).parent().siblings().find('.mask-bg').hide();
|
||
mId=$(this).parent().attr('id');
|
||
});
|
||
//id为selectModal弹框确定按钮事件
|
||
$('#selectModal .ensure').on('click',function(){
|
||
var msgTemp=$('.msg-template');
|
||
var delEl='<span class="msg-panel__del del-tuwen">删除</span>';
|
||
if(mId!=null){
|
||
msgTemp.html($('#'+mId).html());
|
||
delElement();
|
||
msgTemp.find('.mask-bg').hide();
|
||
msgTemp.siblings().hide();
|
||
msgTemp.show();
|
||
tempObj[mId]=msgTemp.html();
|
||
//绑定删除事件
|
||
$('.msg-panel__del').on('click',delClick);
|
||
var current=$('.subbutton__actived');
|
||
var input_name=$('input[name="custom_input_title"]');
|
||
if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
|
||
var row=current.attr('id').lastIndexOf('_')-1;
|
||
var col=current.attr('id').lastIndexOf('_')+1;
|
||
var sub_row=current.attr('id').substr(row,1);
|
||
var sub_col=current.attr('id').substring(col);
|
||
|
||
button[sub_row].sub_button[sub_col].name=input_name.val();
|
||
button[sub_row].sub_button[sub_col].key=mId;
|
||
button[sub_row].sub_button[sub_col].type='click';
|
||
}else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
|
||
var alt=current.attr('alt');
|
||
button[alt].name=input_name.val();
|
||
button[alt].key=mId;
|
||
button[alt].type='click';
|
||
}
|
||
|
||
}
|
||
$('#selectModal').modal('hide');
|
||
});
|
||
//type为click时添加删除按钮元素
|
||
function delElement(){
|
||
var msgTemp=$('.msg-template');
|
||
var delEl='<span class="msg-panel__del del-tuwen">删除</span>';
|
||
msgTemp.append(delEl);
|
||
if(msgTemp.find('span').length==0){
|
||
msgTemp.append(delEl);
|
||
}
|
||
};
|
||
var delClick=function(){
|
||
$('.msg-template').empty();
|
||
$('.msg-context__item').show();
|
||
$('.mask-bg').hide();
|
||
|
||
var current=$('.subbutton__actived');
|
||
if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
|
||
var row=current.attr('id').lastIndexOf('_')-1;
|
||
var col=current.attr('id').lastIndexOf('_')+1;
|
||
var sub_row=current.attr('id').substr(row,1);
|
||
var sub_col=current.attr('id').substring(col);
|
||
delete button[sub_row].sub_button[sub_col].key;
|
||
}else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
|
||
var alt=current.attr('alt');
|
||
delete button[alt].key;
|
||
}
|
||
};
|
||
//删除菜单按钮
|
||
$('#delMenu').click(function(){
|
||
var is_Actived=$('.custom-menu-view__menu').hasClass('subbutton__actived');//一级菜单选择项
|
||
var is_actived=$('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived');//二级菜单选中项
|
||
var rowIndex=0;
|
||
var colIndex=0;
|
||
|
||
if(is_Actived){
|
||
rowIndex=$('.subbutton__actived').attr('alt');
|
||
$('.subbutton__actived').remove();
|
||
delete button[rowIndex];
|
||
}else if(is_actived){
|
||
rowIndex=$('.subbutton__actived').attr('id').substr($('.subbutton__actived').attr('id').lastIndexOf('_')-1,1);
|
||
colIndex=$('.subbutton__actived').attr('id').substr($('.subbutton__actived').attr('id').lastIndexOf('_')+1,1);
|
||
$('.subbutton__actived').remove();
|
||
delete button[rowIndex].sub_button[colIndex];
|
||
}
|
||
//清除右边数据
|
||
$('.cm-edit-before').show().siblings().hide();
|
||
updateTit('');
|
||
setInput('');
|
||
$('input[name="url"]').val('');
|
||
$('#key').val('');
|
||
$('.msg-template').children().remove();
|
||
$('.msg-context__item').show();
|
||
})
|
||
//保存自定义菜单
|
||
$('#saveBtns').click(function(){
|
||
var activeBtn=$('.custom-menu-view__menu').hasClass('subbutton__actived');
|
||
var activeSubBtn=$('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived');
|
||
var rowIndex=0;
|
||
var colIndex=0;
|
||
var url=null;
|
||
var strRegex ='(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]';
|
||
var re=new RegExp(strRegex);
|
||
|
||
if(activeBtn){
|
||
rowIndex=$('.subbutton__actived').attr('alt');
|
||
}else if(activeSubBtn){
|
||
rowIndex=$('.subbutton__actived').attr('id').substr($('.subbutton__actived').attr('id').lastIndexOf('_')-1,1);
|
||
colIndex=$('.subbutton__actived').attr('id').substr($('.subbutton__actived').attr('id').lastIndexOf('_')+1,1);
|
||
}
|
||
|
||
if(activeBtn){
|
||
//一级菜单
|
||
if(button[rowIndex].hasOwnProperty('url')){
|
||
url=button[rowIndex].url;
|
||
if (!re.test(url)) {
|
||
swal('请输入正确地址','', {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
|
||
return false;
|
||
}
|
||
saveAjax();
|
||
}else if(button[rowIndex].hasOwnProperty('key')){
|
||
saveAjax();
|
||
}else{
|
||
swal('菜单内容不能为空！','', {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
|
||
}
|
||
}else if(activeSubBtn){
|
||
//二级菜单
|
||
if(button[rowIndex].sub_button[colIndex].hasOwnProperty('url')){
|
||
url=button[rowIndex].sub_button[colIndex].url;
|
||
if (!re.test(url)) {
|
||
swal('请输入正确地址','', {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
|
||
return false;
|
||
}
|
||
saveAjax();
|
||
}else if(button[rowIndex].sub_button[colIndex].hasOwnProperty('key')){
|
||
//layer.msg("请选择图文信息！");
|
||
saveAjax();
|
||
}else{
|
||
swal('菜单内容不能为空！','', {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
|
||
}
|
||
}else{
|
||
saveAjax();
|
||
}
|
||
});
|
||
//入数据库保存
|
||
function saveAjax(){
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "{:url('wxpushall/addmenu')}",
|
||
data : {
|
||
"menu" :JSON.stringify(obj) ,//先将对象转换为字符串再传给后台
|
||
"wxid" :"{$wxid}"
|
||
},
|
||
dataType : "json",
|
||
success : function(data) {
|
||
if (data.status==1) {
|
||
swal('保存成功',data.reg, {icon : "success",buttons:{confirm:{className : 'btn btn-success'}},});
|
||
} else {
|
||
swal('错误',data.reg, {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
</script>
|
||
{/block}
|