kefu/static/templates/default/setting_wechat_menu.html

925 lines
40 KiB
HTML
Raw Permalink Normal View History

2024-12-10 02:50:12 +00:00
<!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>