|
<title>标题</title>
|
<!--当前位置开始-->
|
<div class="layui-card layadmin-header">
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
<script type="text/html" template lay-done="layui.data.updateMainBreadcrumb();">
|
</script>
|
</div>
|
</div>
|
<!--当前位置结束-->
|
<style>
|
.mydiv {
|
margin-top: 10px;
|
}
|
|
.mydiv p {
|
width: 100%;
|
line-height: 30px;
|
margin-bottom: 5px;
|
}
|
</style>
|
<script type="text/html" template lay-type="Post" lay-url="Api/WeChatMenu/GetIndex" lay-done="layui.data.done(d);">
|
<div class="layui-fluid">
|
<div class="layui-row layui-col-space15">
|
<div class="layui-col-md12">
|
<div class="layui-card">
|
<div class="layui-card-header">使用说明及规则，请仔细阅读</div>
|
<div class="layui-card-body">
|
<blockquote class="layui-elem-quote">
|
<p>官方要求：1、一级菜单按钮个数为2-3个。2、如果设置了二级菜单，子按钮个数为2-5个。3、按钮描述，既按钮名字，不超过16个字节，子菜单不超过40个字节。</p>
|
<p>如果name不填，此按钮将被忽略。</p>
|
<p>如果一级菜单为空，该列所有设置的二级菜单都会被忽略，key仅在SingleButton（单击按钮，无下级菜单）的状态下设置。</p>
|
<p>如果此按钮有下级菜单，key将被忽略，所有二级菜单都为SingleButton。</p>
|
<p>如果要快速看到微信上的菜单最新状态，需要重新关注，否则需要静静等待N小时。</p>
|
</blockquote>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-md12">
|
<div id="menuEditor">
|
<form action="/Api/WeChatMenu/CreateMenu" id="form_Menu" method="post" _lpchecked="1">
|
<div class="layui-col-md12">
|
<div class="layui-card">
|
<div class="layui-card-header" style="padding: 10px 10px">
|
<div class="layui-form-item">
|
<div class="layui-input-inline layui-inline-10">
|
<button id="btnGetMenu" class="layui-btn layui-btn-sm" type="button">获取当前菜单</button>
|
<button type="button" class="layui-btn layui-btn-sm" id="submitMenu">更新到服务器</button>
|
<button id="btnDeleteMenu" class="layui-btn layui-btn-danger layui-btn-sm" type="button">删除全部菜单(谨慎操作)</button>
|
</div>
|
<div class="layui-input-inline"> <input id="tokenStr" name="token" value="" class="layui-input" style="width: 400px;" type="hidden" readonly="readonly" /> </div>
|
</div>
|
</div>
|
<div class="layui-card-body">
|
<p class="menu-state layui-elem-quote">
|
操作状态：<strong id="menuState">-</strong>
|
</p>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space15">
|
<div class="layui-col-md7 menu-list">
|
<div class="layui-card">
|
<div class="layui-card-body">
|
<table id="menuTable" class="layui-table">
|
<thead>
|
<tr>
|
<th></th>
|
<th>第一列</th>
|
<th>第二列</th>
|
<th>第三列</th>
|
</tr>
|
</thead>
|
<tbody>
|
{{# for (var i = 0; i < 6; i++) { }}
|
<tr id="{{ i == 5? ' subMenuRow_'+i:'rootMenuRow' }}">
|
<td class="menuRowTip {{ i == 5? ' rootMenu':'' }}">
|
{{ i == 5? '一级菜单按钮':'二级菜单No.'+(i + 1) }}
|
</td>
|
{{# for (var j = 0; j < 3; j++) { }}
|
<td>
|
<input type="hidden" class="layui-input" name="{{ i == 5? 'menu.button['+j+']':'menu.button['+j+'].sub_button['+i+']' }}.key" id="{{ i == 5? 'menu_button'+j:'menu_button'+j+'_sub_button'+i }}_key" />
|
<input type="hidden" class="layui-input" name="{{ i == 5? 'menu.button['+j+']':'menu.button['+j+'].sub_button['+i+']' }}.type" id="{{ i == 5? 'menu_button'+j:'menu_button'+j+'_sub_button'+i }}_type" value="click" />
|
<input type="hidden" class="layui-input" name="{{ i == 5? 'menu.button['+j+']':'menu.button['+j+'].sub_button['+i+']' }}.url" id="{{ i == 5? 'menu_button'+j:'menu_button'+j+'_sub_button'+i }}_url" />
|
<input type="hidden" class="layui-input" name="{{ i == 5? 'menu.button['+j+']':'menu.button['+j+'].sub_button['+i+']' }}.appid" id="{{ i == 5? 'menu_button'+j:'menu_button'+j+'_sub_button'+i }}_appid" />
|
<input type="hidden" class="layui-input" name="{{ i == 5? 'menu.button['+j+']':'menu.button['+j+'].sub_button['+i+']' }}.pagepath" id="{{ i == 5? 'menu_button'+j:'menu_button'+j+'_sub_button'+i }}_pagepath" />
|
<input type="hidden" class="layui-input" name="{{ i == 5? 'menu.button['+j+']':'menu.button['+j+'].sub_button['+i+']' }}.media_id" id="{{ i == 5? 'menu_button'+j:'menu_button'+j+'_sub_button'+i }}_mediaid" />
|
<input type="text" class="layui-input txtButton" name="{{ i == 5? 'menu.button['+j+']':'menu.button['+j+'].sub_button['+i+']' }}.name" id="{{ i == 5? 'menu_button'+j:'menu_button'+j+'_sub_button'+i }}_name" data-i="{{ i }}" data-j="{{ j }}" {{ i == 5? 'data-root='+j+'':'' }} />
|
</td>
|
{{# } }}
|
</tr>
|
{{# } }}
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-md5" id="buttonDetails">
|
<div class="layui-card">
|
<div class="layui-card-body">
|
<div class="layui-card-header">按钮其他参数</div>
|
<div class="mydiv">
|
<div class="layui-form-item">
|
<label for="Name" class="layui-form-label layui-form-required">Name</label>
|
<div class="layui-input-inline">
|
<input type="text" id="buttonDetails_name" class="layui-input txtButton" disabled="disabled" />
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label for="Name" class="layui-form-label layui-form-required">Type</label>
|
<div class="layui-input-inline">
|
<select id="buttonDetails_type" class="dllButtonDetails layui-select">
|
<option value="click" selected="selected">点击事件（传回服务器）</option>
|
<option value="view">访问网页（直接跳转）</option>
|
<option value="miniprogram">小程序（直接跳转）</option>
|
<option value="location_select">弹出地理位置选择器</option>
|
<option value="pic_photo_or_album">弹出拍照或者相册发图</option>
|
<option value="pic_sysphoto">弹出系统拍照发图</option>
|
<option value="pic_weixin">弹出微信相册发图器</option>
|
<option value="scancode_push">扫码推事件</option>
|
<option value="scancode_waitmsg">扫码推事件且弹出“消息接收中”提示框</option>
|
<option value="media_id">下发消息（除文本消息）</option>
|
<option value="view_limited">跳转图文消息URL</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-form-item" id="buttonDetails_key_area">
|
<label for="Name" class="layui-form-label layui-form-required">Key</label>
|
<div class="layui-input-block">
|
<input id="buttonDetails_key" class="layui-input txtButtonDetails" type="text" />
|
</div>
|
</div>
|
<div class="layui-form-item" id="buttonDetails_url_area">
|
<label for="Name" class="layui-form-label layui-form-required">Url</label>
|
<div class="layui-input-block">
|
<input id="buttonDetails_url" class="layui-input txtButtonDetails" type="text" />
|
</div>
|
</div>
|
<div class="layui-form-item" id="buttonDetails_miniprogram_appid_area">
|
<label for="Name" class="layui-form-label layui-form-required">小程序AppId</label>
|
<div class="layui-input-block">
|
<input id="buttonDetails_miniprogram_appid" class="layui-input txtButtonDetails" type="text" />
|
</div>
|
</div>
|
<div class="layui-form-item" id="buttonDetails_miniprogram_pagepath_area">
|
<label for="Name" class="layui-form-label layui-form-required">小程序PagePath</label>
|
<div class="layui-input-block">
|
<input id="buttonDetails_miniprogram_pagepath" class="layui-input txtButtonDetails" type="text" />
|
</div>
|
</div>
|
<div class="layui-form-item" id="buttonDetails_mediaId_area">
|
<label for="Name" class="layui-form-label layui-form-required">MediaId</label>
|
<div class="layui-input-block">
|
<input id="buttonDetails_mediaId" class="layui-input txtButtonDetails" type="text" />
|
</div>
|
</div>
|
<div class="layui-form-item" id="rootButtonNotice">
|
<label for="Name" class="layui-form-label layui-form-required">说明：</label>
|
<div class="layui-form-mid layui-word-aux"> 如果还有下级菜单请忽略上述Type和Key、Url等参数。</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</form>
|
</div>
|
</div>
|
</div>
|
</div>
|
</script>
|
<script src="/lib/jquery/jquery-2.1.4.js"></script>
|
<script src="/lib/wechatmenu/jquery.form.js"></script>
|
|
<script>
|
var debug = layui.setter.debug;
|
layui.data.done = function (d) {
|
//开启调试情况下获取接口赋值数据
|
if (debug) { console.log(d.data); }
|
layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper', 'cropperImg'],
|
function () {
|
var $ = layui.$
|
, form = layui.form
|
, admin = layui.admin
|
, laydate = layui.laydate
|
, upload = layui.upload
|
, cropperImg = layui.cropperImg
|
, coreHelper = layui.coreHelper;
|
|
var csWeChat = {};
|
var maxSubMenuCount = 5;
|
var menuState;
|
|
csWeChat.menu = {
|
token: '',
|
init: function () {
|
menuState = $('#menuState');
|
$('#buttonDetails').hide();
|
//$('#menuEditor').hide();
|
$("#buttonDetails_type").change(csWeChat.menu.typeChanged);
|
$(':input[id^=menu_button]').click(function () {
|
$('#buttonDetails').show();
|
var idPrefix = $(this).attr('data-root')
|
? ('menu_button' + $(this).attr('data-root'))
|
: ('menu_button' + $(this).attr('data-j') + '_sub_button' + $(this).attr('data-i'));
|
var keyId = idPrefix + "_key";
|
console.log(idPrefix);
|
var nameId = idPrefix + "_name";
|
var typeId = idPrefix + "_type";
|
var urlId = idPrefix + "_url";
|
var mediaIdId = idPrefix + "_mediaid";
|
var appidId = idPrefix + "_appid";
|
var pagepathId = idPrefix + "_pagepath";
|
|
var txtDetailsKey = $('#buttonDetails_key');
|
var txtDetailsName = $('#buttonDetails_name');
|
var ddlDetailsType = $('#buttonDetails_type');
|
var txtDetailsUrl = $('#buttonDetails_url');
|
var txtMediaId = $('#buttonDetails_mediaId');
|
var txtDetailsAppid = $('#buttonDetails_miniprogram_appid');
|
var txtDetailsPagepath = $('#buttonDetails_miniprogram_pagepath');
|
|
var hiddenButtonKey = $('#' + keyId);
|
var hiddenButtonType = $('#' + typeId);
|
var hiddenButtonUrl = $('#' + urlId);
|
var hiddenButtonMediaId = $('#' + mediaIdId);
|
var hiddenButtonAppid = $('#' + appidId);
|
var hiddenButtonPagepath = $('#' + pagepathId);
|
|
txtDetailsKey.val(hiddenButtonKey.val());
|
txtDetailsName.val($('#' + nameId).val());
|
ddlDetailsType.val(hiddenButtonType.val());
|
txtDetailsUrl.val(hiddenButtonUrl.val());
|
txtMediaId.val(hiddenButtonMediaId.val());
|
txtDetailsAppid.val(hiddenButtonAppid.val());
|
txtDetailsPagepath.val(hiddenButtonPagepath.val());
|
|
csWeChat.menu.typeChanged();
|
|
txtDetailsKey.unbind('blur').blur(function () {
|
hiddenButtonKey.val($(this).val());
|
});
|
ddlDetailsType.unbind('blur').blur(function () {
|
hiddenButtonType.val($(this).val());
|
});
|
txtDetailsUrl.unbind('blur').blur(function () {
|
hiddenButtonUrl.val($(this).val());
|
});
|
txtMediaId.unbind('blur').blur(function () {
|
hiddenButtonMediaId.val($(this).val());
|
});
|
txtDetailsAppid.unbind('blur').blur(function () {
|
hiddenButtonAppid.val($(this).val());
|
});
|
txtDetailsPagepath.unbind('blur').blur(function () {
|
hiddenButtonPagepath.val($(this).val());
|
});
|
|
//修改当前行列样式
|
var row = parseInt($(this).attr('data-i'));
|
var column = parseInt($(this).attr('data-j'));
|
$('#menuTable input').removeClass('currentMenuInput');
|
$('#menuTable thead th').removeClass('currentMenuItem');
|
$('#menuTable tbody td').removeClass('currentMenuItem');
|
$(this).addClass('currentMenuInput');
|
$('#menuTable thead th').eq(column + 1).addClass('currentMenuItem');
|
$('#menuTable tbody tr').eq(row).find('td').eq(0).addClass('currentMenuItem');
|
|
//一级菜单提示
|
if (row === 5) {
|
$('#rootButtonNotice').show();
|
} else {
|
$('#rootButtonNotice').hide();
|
}
|
});
|
|
//获取菜单中
|
$('#btnGetMenu').click(function () {
|
menuState.html('获取菜单中...');
|
coreHelper.Post("Api/WeChatMenu/GetMenu", null, function (e) {
|
console.log(e);
|
if (e.code === 0 && e.data.errcode == 0) {
|
$(':input[id^=menu_button]:not([id$=_type])').val('');
|
$('#buttonDetails:input').val('');
|
|
var buttons = e.data.menu.button;
|
//此处i与j和页面中反转
|
for (var i = 0; i < buttons.length; i++) {
|
var button = buttons[i];
|
$('#menu_button' + i + '_name').val(button.name);
|
$('#menu_button' + i + '_key').val(button.key);
|
$('#menu_button' + i + '_type').val(button.type || 'click');
|
$('#menu_button' + i + '_url').val(button.url);
|
$('#menu_button' + i + '_appid').val(button.appid);
|
$('#menu_button' + i + '_pagepath').val(button.pagepath);
|
$('#menu_button' + i + '_mediaid').val(button.media_id);
|
|
if (button.sub_button && button.sub_button.length > 0) {
|
//二级菜单
|
for (var j = 0; j < button.sub_button.length; j++) {
|
var subButton = button.sub_button[j];
|
var idPrefix = '#menu_button' + i + '_sub_button' + j;
|
$(idPrefix + "_name").val(subButton.name);
|
$(idPrefix + "_type").val(subButton.type || 'click');
|
$(idPrefix + "_key").val(subButton.key);
|
$(idPrefix + "_url").val(subButton.url);
|
$(idPrefix + "_appid").val(subButton.appid);
|
$(idPrefix + "_pagepath").val(subButton.pagepath);
|
$(idPrefix + "_mediaid").val(subButton.media_id);
|
}
|
} else {
|
//底部菜单
|
//...
|
}
|
}
|
//显示JSON
|
//$('#txtReveiceJSON').text(JSON.stringify(json));
|
menuState.html('菜单获取已完成');
|
} else {
|
menuState.html(e.msg || '执行过程有错误，请检查！');
|
}
|
});
|
});
|
//删除菜单
|
$('#btnDeleteMenu').click(function () {
|
if (!confirm('确定要删除菜单吗？此操作无法撤销！')) {
|
return;
|
}
|
menuState.html('删除菜单中...');
|
coreHelper.Post("Api/WeChatMenu/DeleteMenu", null, function (e) {
|
console.log(e);
|
if (e.code === 0) {
|
menuState.html('删除成功，如果是误删，并且界面上有最新的菜单状态，可以立即点击【更新到服务器】按钮。');
|
} else {
|
menuState.html(e.msg + e.otherData);
|
}
|
});
|
});
|
|
//更新到服务器
|
$('#submitMenu').click(function () {
|
if (!confirm('确定要提交吗？此操作无法撤销的哦！')) {
|
return;
|
}
|
|
var headers = {};
|
headers[layui.setter.request.tokenName] = layui.data(layui.setter.tableName)[layui.setter.request.tokenName];
|
|
menuState.html('上传中...');
|
$('#form_Menu').ajaxSubmit({
|
dataType: 'json',
|
headers: headers, //添加请求头部
|
success: function (json) {
|
if (json.Success) {
|
menuState.html('上传成功。' + json.msg);
|
} else {
|
menuState.html(json.msg);
|
}
|
}
|
});
|
|
});
|
|
$('#menuTable .control-input').hover(function () {
|
var row = parseInt($(this).attr('data-i'));
|
var column = parseInt($(this).attr('data-j'));
|
|
$('#menuTable thead th').removeClass('hoverMenuItem');
|
$('#menuTable tbody td').removeClass('hoverMenuItem');
|
|
$('#menuTable thead th').eq(column + 1).addClass('hoverMenuItem');
|
$('#menuTable tbody tr').eq(row).find('td').eq(0).addClass('hoverMenuItem');
|
}, function () {
|
$('#menuTable thead th').removeClass('hoverMenuItem');
|
$('#menuTable tbody td').removeClass('hoverMenuItem');
|
});
|
},
|
typeChanged: function () {
|
var val = $('#buttonDetails_type').val().toUpperCase();
|
switch (val) {
|
case 'CLICK':
|
$('#buttonDetails_key_area').slideDown(100);
|
$('#buttonDetails_url_area').slideUp(100);
|
$('#buttonDetails_miniprogram_appid_area').slideUp(100);
|
$('#buttonDetails_miniprogram_pagepath_area').slideUp(100);
|
$('#buttonDetails_mediaId_area').slideUp(100);
|
break;
|
case 'VIEW':
|
$('#buttonDetails_key_area').slideUp(100);
|
$('#buttonDetails_url_area').slideDown(100);
|
$('#buttonDetails_miniprogram_appid_area').slideUp(100);
|
$('#buttonDetails_miniprogram_pagepath_area').slideUp(100);
|
$('#buttonDetails_mediaId_area').slideUp(100);
|
break;
|
case 'MINIPROGRAM':
|
$('#buttonDetails_key_area').slideUp(100);
|
$('#buttonDetails_url_area').slideDown(100);
|
$('#buttonDetails_miniprogram_appid_area').slideDown(100);
|
$('#buttonDetails_miniprogram_pagepath_area').slideDown(100);
|
$('#buttonDetails_mediaId_area').slideUp(100);
|
break;
|
case 'MEDIA_ID':
|
case 'VIEW_LIMITED':
|
$('#buttonDetails_key_area').slideUp(100);
|
$('#buttonDetails_url_area').slideUp(100);
|
$('#buttonDetails_miniprogram_appid_area').slideUp(100);
|
$('#buttonDetails_miniprogram_pagepath_area').slideUp(100);
|
$('#buttonDetails_mediaId_area').slideDown(100);
|
break;
|
default:
|
$('#buttonDetails_key_area').slideDown(100);
|
$('#buttonDetails_url_area').slideUp(100);
|
$('#buttonDetails_miniprogram_appid_area').slideUp(100);
|
$('#buttonDetails_miniprogram_pagepath_area').slideUp(100);
|
$('#buttonDetails_mediaId_area').slideUp(100);
|
break;
|
}
|
},
|
setToken: function (token) {
|
csWeChat.menu.token = token;
|
$('#menuEditor').show();
|
$('#menuLogin').hide();
|
}
|
};
|
|
//初始化操作
|
csWeChat.menu.init();
|
|
//重载form
|
form.render();
|
})
|
};
|
</script>
|
