<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>微信公众号自定义菜单</title>
<meta name="referrer" content="never">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.4.6.0.css">
<link rel="stylesheet" href="css/weui.min.css">
<link rel="stylesheet" type="text/css" href="css/wx-audiocopy.css">
<link rel="stylesheet" type="text/css" href="css/selfmenu.css">
<link rel="stylesheet" type="text/css" href="css/bottom.css">
<link rel="stylesheet" type="text/css" href="css/scroll.css">
<link rel="stylesheet" href="css/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]-->
<style type="text/css">
.smtoolbtn {
font-size: 18px;
font-weight: normal;
padding: 0 4px;
cursor: pointer;
}
.toolbtn>a:hover {
text-decoration: none;
color: #C9E2EA;
}
.weui-panel {
border: 1px solid #e5e5e5;
}
.newmodul {
margin-top: 10px;
}
.page-header {
padding-bottom: 8px;
margin-bottom: 0px;
}
.label {
display: initial;
margin-left: 1em;
}
.newtitle {
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.55);
text-align: center;
vertical-align: middle;
font-size: 18px;
font-weight: 400;
color: #FFFFFF;
width: 100%;
left: 0px;
}
.panel .panel-body {
padding: 0 !important;
}
.weui-media-box__title {
font-size: 15px !important;
}
.newtitle {
font-size: 15px !important;
}
.panel-heading {
padding: 0;
}
.newmodul {
margin-top: 0;
}
.weui-panel {
border: 0;
}
.panel {
border: 0;
}
.weui-panel:after {
border-bottom: 0;
}
.panel-default {
border-radius: 5px;
}
.weui-panel_access {
border-radius: 5px;
}
.panel-heading {
border-bottom: 0;
}
.modal-content {
background: #f5f5f5;
}
.msg-panel__context {
background: #f5f5f5;
}
.cm-edit-content-con {
background: #f5f5f5;
}
img {
border-radius: 5px;
}
.wx-audio-content {
border-radius: 5px;
}
.mask-bg {
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h3 style="text-align: center;margin-top: 20px;">自定义菜单</h3>
<div class="custom-menu-edit-con">
<div class="form-group placeholders" style="width: 30%; float:right ">
<label class="control-label col-xs-3 col-sm-3 col-md-3 no-padding-right phonelabel" for="appIdcode">服务号:</label>
<div class="col-xs-8 col-sm-8 col-md-8 placeholder input-group input-group-sm">
<select id='appIdcode' class='form-control' name="appIdcode"></select>
</div>
</div>
<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: block;">若无二级菜单,可输入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">
<div class="editTab-heading">
<ul id="clickUl" class="msg-panel__tab">
<li id="imgtextLi" class="msg-tab_item on" onclick="imageText()">
<span class="msg-icon msg-icon-tuwen"></span>
图文消息
</li>
<li id="imgLi" class="msg-tab_item" onclick="picture()">
<span class="msg-icon msg-icon-pic"></span>
图片
</li>
<li id="voice" class="msg-tab_item" onclick="voice()">
<span class="msg-icon msg-icon-audio"></span>
语音
</li>
<li id="video" class="msg-tab_item" onclick="video1()">
<span class="msg-icon msg-icon-video"></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="saveBtns" type="button" class="btn btn-info1">保存</button>
<button id="synchroBtns" type="button" class="btn btn-info1">同步</button>
<button id="showPhone" type="button" class="btn btn-info1">预览</button>
<button id="deleteMenu" type="button" class="btn btn-info1" onclick="deleteMenu()">清空菜单</button>
</div>
</div>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/customMenu.j