925 lines
40 KiB
HTML
925 lines
40 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
<html lang="en">
|
|||
|
<head>
|
|||
|
<meta charset="utf-8">
|
|||
|
|
|||
|
<link rel="stylesheet" href="/static/css/wechatmenu/bootstrap.min.css">
|
|||
|
<link rel="stylesheet" href="/static/css/wechatmenu/font-awesome.min.css">
|
|||
|
<!-- 自定义样式 -->
|
|||
|
<link rel="stylesheet" href="/static/css/wechatmenu/wx-custom.css">
|
|||
|
|
|||
|
<!--[if lt IE 9]>
|
|||
|
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
|||
|
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
|
|||
|
<![endif]-->
|
|||
|
</head>
|
|||
|
<body>
|
|||
|
<div class="container">
|
|||
|
<!-- 自定义菜单 -->
|
|||
|
<h3>自定义菜单</h3>
|
|||
|
<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">公众号名称</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" style="display:none"><input type="radio" name="radioBtn" value="sendmsg" checked> 发送消息</label>
|
|||
|
<label class="checkbox-inline"><input type="radio" name="radioBtn" value="link" checked> 跳转网页</label>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</form>
|
|||
|
|
|||
|
<div class="cm-edit-content-con" id="editMsg" style="display:none">
|
|||
|
<div class="editTab">
|
|||
|
<div class="editTab-heading">
|
|||
|
<ul class="msg-panel__tab">
|
|||
|
<li class="msg-tab_item on">
|
|||
|
<span class="msg-icon msg-icon-tuwen"></span>
|
|||
|
图文消息
|
|||
|
</li>
|
|||
|
</ul>
|
|||
|
</div>
|
|||
|
<div class="editTab-body">
|
|||
|
<div class="msg-panel__context">
|
|||
|
<div class="msg-context__item">
|
|||
|
<div class="msg-panel__center msg-panel_select" data-toggle="modal" data-target="#selectModal"><span class="message-plus">+</span><br>从素材库中选择</div>
|
|||
|
</div>
|
|||
|
<div class="msg-template"></div>
|
|||
|
</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 id="saveBtns" type="button" class="btn btn-info1">保存数据</button>
|
|||
|
<button id="makeMenu" type="button" class="btn btn-info1">生成菜单</button>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
|
|||
|
<script src="/static/js/wechatmenu/jquery-1.11.1.min.js"></script>
|
|||
|
<script src="/static/js/wechatmenu/bootstrap.min.js"></script>
|
|||
|
<!-- 自定义菜单排序 -->
|
|||
|
<script src="/static/js/wechatmenu/Sortable.js"></script>
|
|||
|
<script src="/static/css/layui/layui.js"></script>
|
|||
|
<script src="/static/js/functions.js?v=0.5.9"></script>
|
|||
|
<script>
|
|||
|
$(function(){
|
|||
|
|
|||
|
sendAjax("/kefu/ent_configs","get",{},function(res){
|
|||
|
var result=res.result;
|
|||
|
var mId=null;
|
|||
|
var obj={"button":[{"type":"view","name":"新建菜单","url":"","sub_button":[]}]};
|
|||
|
for(i in result){
|
|||
|
if (result[i].conf_key=="WechatMenu" && result[i].conf_value!=""){
|
|||
|
obj=JSON.parse(result[i].conf_value)
|
|||
|
break;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
|
|||
|
|
|||
|
var tempObj={};//存储HTML对象
|
|||
|
var button=removePropertyOfNull(obj.button);//一级菜单
|
|||
|
|
|||
|
//显示异常
|
|||
|
if(obj.errcode){
|
|||
|
$('#abnormalModal').modal('show');
|
|||
|
}
|
|||
|
//一级菜单对象
|
|||
|
function parents(param){
|
|||
|
this.name=param;
|
|||
|
this.type="view";
|
|||
|
this.url="";
|
|||
|
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++){
|
|||
|
if(!button[i]){
|
|||
|
continue;
|
|||
|
}
|
|||
|
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[1].checked=true;
|
|||
|
$('#editMsg').hide();
|
|||
|
$('#editPage').show();
|
|||
|
$('.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[1].checked=true;
|
|||
|
$('#editMsg').hide();
|
|||
|
$('#editPage').show();
|
|||
|
$('.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();//debugger;
|
|||
|
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;
|
|||
|
$('.msg-template').html($('#'+subKey).html());
|
|||
|
delElement();
|
|||
|
//绑定删除事件
|
|||
|
$('.msg-panel__del').on('click',delClick);
|
|||
|
|
|||
|
$('.msg-template').html(tempObj[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(subType)
|
|||
|
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]);
|
|||
|
}else if(subType=='view'){
|
|||
|
radios[1].checked=true;
|
|||
|
$('#editMsg').hide();
|
|||
|
$('#editPage').show();
|
|||
|
$('input[name="url"]').val(subUrl);
|
|||
|
}else if(!subType){
|
|||
|
radios[1].checked=true;
|
|||
|
$('#editMsg').hide();
|
|||
|
$('#editPage').show();
|
|||
|
$('input[name="url"]').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();
|
|||
|
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;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
});
|
|||
|
//自定义菜单排序
|
|||
|
$('#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('');
|
|||
|
$('.msg-template').children().remove();
|
|||
|
$('.msg-context__item').show();
|
|||
|
})
|
|||
|
//保存自定义菜单
|
|||
|
$('#makeMenu').click(function(){
|
|||
|
sendAjax("/kefu/mkWechatMenu","get",{
|
|||
|
},function(res){
|
|||
|
if (res.code === 200) {
|
|||
|
layer.msg(res.msg, {
|
|||
|
icon: 1
|
|||
|
}, function() {
|
|||
|
location.reload();
|
|||
|
});
|
|||
|
} else {
|
|||
|
layer.msg(res.msg, {icon: 2, time: 1500})
|
|||
|
}
|
|||
|
});
|
|||
|
});
|
|||
|
//保存自定义菜单
|
|||
|
$('#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)) {
|
|||
|
layer.msg("请输入正确的url地址!");
|
|||
|
return false;
|
|||
|
}
|
|||
|
saveAjax();
|
|||
|
}else if(button[rowIndex].hasOwnProperty('key')){
|
|||
|
saveAjax();
|
|||
|
}else{
|
|||
|
layer.msg("菜单内容不能为空!");
|
|||
|
}
|
|||
|
}else if(activeSubBtn){
|
|||
|
//二级菜单
|
|||
|
if(button[rowIndex].sub_button[colIndex].hasOwnProperty('url')){
|
|||
|
url=button[rowIndex].sub_button[colIndex].url;
|
|||
|
if (!re.test(url)) {
|
|||
|
layer.msg("请输入正确的url地址!");
|
|||
|
return false;
|
|||
|
}
|
|||
|
saveAjax();
|
|||
|
}else if(button[rowIndex].sub_button[colIndex].hasOwnProperty('key')){
|
|||
|
//layer.msg("请选择图文信息!");
|
|||
|
saveAjax();
|
|||
|
}else{
|
|||
|
layer.msg("菜单内容不能为空!");
|
|||
|
}
|
|||
|
}else{
|
|||
|
saveAjax();
|
|||
|
}
|
|||
|
});
|
|||
|
//保存
|
|||
|
function saveAjax(){
|
|||
|
obj.button=removePropertyOfNull(obj.button);//一级菜单
|
|||
|
sendAjax("/kefu/wechatMenu","post",{
|
|||
|
"menu" :JSON.stringify(obj) ,//先将对象转换为字符串再传给后台
|
|||
|
"name":"微信菜单JSON <a href='/setting_wechat_menu'>可视化编辑</a>",
|
|||
|
},function(res){
|
|||
|
if (res.code === 200) {
|
|||
|
layer.msg(res.msg, {
|
|||
|
icon: 1
|
|||
|
}, function() {
|
|||
|
location.reload();
|
|||
|
});
|
|||
|
} else {
|
|||
|
layer.msg(res.msg, {icon: 2, time: 1500})
|
|||
|
}
|
|||
|
});
|
|||
|
|
|||
|
}
|
|||
|
});
|
|||
|
});
|
|||
|
</script>
|
|||
|
<!--<script src="/wechatmenu/js/menu.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="panel-heading msg-date">-->
|
|||
|
<!-- 08月12日-->
|
|||
|
<!-- </div>-->
|
|||
|
<!-- <div class="panel-body">-->
|
|||
|
<!-- <h5 class="msg-title">微信缴费使用指南1</h5>-->
|
|||
|
<!-- <div class="msg-img"><img src="/wechatmenu/images/20170831595cf16beb634972a65adb6b14abca9b.jpg" alt=""></div>-->
|
|||
|
<!-- <p class="msg-text">微信缴费使用指南</p>-->
|
|||
|
<!-- </div>-->
|
|||
|
<!-- <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="panel-heading msg-date">-->
|
|||
|
<!-- 08月31日-->
|
|||
|
<!-- </div>-->
|
|||
|
<!-- <div class="panel-body">-->
|
|||
|
<!-- <h5 class="msg-title">微信缴费使用指南2</h5>-->
|
|||
|
<!-- <div class="msg-img"><img src="/wechatmenu/images/1.png" alt=""></div>-->
|
|||
|
<!-- <p class="msg-text">微信缴费使用指南</p>-->
|
|||
|
<!-- </div>-->
|
|||
|
<!-- <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>
|
|||
|
|
|||
|
</body>
|
|||
|
</html>
|