btss/php/view/admin/wechat/menu.html

{include file="common/header"/}

<link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/menu/wx-audiocopy.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/menu/selfmenu.css?v={:time()}">
<link rel="stylesheet" type="text/css" href="/static/admin/css/menu/bottom.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/menu/scroll.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/menu/weui.min.css">
<!-- 自定义样式 -->
<link rel="stylesheet" href="/static/admin/css/menu/wx-custom.css?v={:time()}">

<div class="LM-container">
    <div class="LM-main">
    <div class="custom-menu-edit-con">
        <div  class="form-group placeholders" style="width: 40%; float:left ">
      自定义菜单:

        </div>
        <div  class="form-group placeholders" style="width: 40%; 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-context__item">
                                        <a href="javascript:;" class="msg-panel-add msg-panel__center msg-panel_select"  ><span class="message-plus">+</span><br>新建素材</a>
                                    </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="edit-footer">
        <button id="saveBtns" type="button" class="layui-btn layui-btn-sm">保存</button>
        <button id="synchroBtns" type="button" class="layui-btn layui-btn-sm">同步</button>
        <button id="showPhone"  type="button" class="layui-btn layui-btn-sm">预览</button>
        <button id="deleteMenu"  type="button" class="layui-btn layui-btn-sm" onclick="deleteMenu()">清空菜单</button>
    </div>






<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 modal-title1">
                    选择
                </h4>
            </div>
            <div class="modal-body">
                <div id='imgTextAdd' class="row">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="layui-btn layui-btn-sm ensure">确定</button>
                <button type="button" class="layui-btn layui-btn-sm" 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>

<div class="mobile_preview" id="mobileDiv" style="display: none;">
    <div class="mobile_preview_hd">
        <strong class="nickname"></strong>
    </div>
    <div class="mobile_preview_bd">
        <ul id="viewShow" class="show_list"></ul>
    </div>
    <div class="mobile_preview_ft">
        <ul class="pre_menu_list grid_line" id="viewList">

        </ul>
    </div>
    <div class="moblie_preview_weapp js_preview_weapp_wrapper" style="display: none">
        <div class="weapp_hd">
            <i class="icon_back_weapp js_preview_weapp_close">返回</i>
            <p class="weapp_title js_preview_weapp_title"></p>
        </div>
        <div class="preview_extra">电脑端暂不支持预览小程序</div>
    </div>
    <a href="javascript:void(0);" class="mobile_preview_closed btn btn_default" id="viewClose">退出预览</a>
</div>
<!--背景半透明-->
<div class="mask" style="display:none;">
    <div style="position: relative; left: 957px; top: 468px;">
        <div style="position: absolute; top: -2px; transform: translate3d(0px, 0px, 0px); animation: 1s linear -1s infinite normal none running opacity-100-25;">
            <div style="position: absolute; width: 12px; height: 5px; background: rgb(53, 53, 53); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(0deg) translate(10px, 0px); border-radius: 100em;"></div>
        </div>
        <div style="position: absolute; top: -2px; transform: translate3d(0px, 0px, 0px); animation: 1s linear -0.916667s infinite normal none running opacity-100-25;">
            <div style="position: absolute; width: 12px; height: 5px; background: rgb(53, 53, 53); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(30deg) translate(10px, 0px); border-radius: 100em;"></div>
        </div>
        <div style="position: absolute; top: -2px; transform: translate3d(0px, 0px, 0px); animation: 1s linear -0.833333s infinite normal none running opacity-100-25;">
            <div style="position: absolute; width: 12px; height: 5px; background: rgb(53, 53, 53); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(60deg) translate(10px, 0px); border-radius: 100em;"></div>
        </div>
        <div style="position: absolute; top: -2px; transform: translate3d(0px, 0px, 0px); animation: 1s linear -0.75s infinite normal none running opacity-100-25;">
            <div style="position: absolute; width: 12px; height: 5px; background: rgb(53, 53, 53); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(90deg) translate(10px, 0px); border-radius: 100em;"></div>
        </div>
        <div style="position: absolute; top: -2px; transform: translate3d(0px, 0px, 0px); animation: 1s linear -0.666667s infinite normal none running opacity-100-25;">
            <div style="position: absolute; width: 12px; height: 5px; background: rgb(53, 53, 53); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(120deg) translate(10px, 0px); border-radius: 100em;"></div>
        </div>
        <div style="position: absolute; top: -2px; transform: translate3d(0px, 0px, 0px); animation: 1s linear -0.583333s infinite normal none running opacity-100-25;">
            <div style="position: absolute; width: 12px; height: 5px; background: rgb(53, 53, 53); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(150deg) translate(10px, 0px); border-radius: 100em;"></div>
        </div>
        <div style="position: absolute; top: -2px; transform: translate3d(0px, 0px, 0px); animation: 1s linear -0.5s infinite normal none running opacity-100-25;">
            <div style="position: absolute; width: 12px; height: 5px; background: rgb(53, 53, 53); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(180deg) translate(10px, 0px); border-radius: 100em;"></div>
        </div>
        <div style="position: absolute; top: -2px; transform: translate3d(0px, 0px, 0px); animation: 1s linear -0.416667s infinite normal none running opacity-100-25;">
            <div style="position: absolute; width: 12px; height: 5px; background: rgb(53, 53, 53); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(210deg) translate(10px, 0px); border-radius: 100em;"></div>
        </div>
        <div style="position: absolute; top: -2px; transform: translate3d(0px, 0px, 0px); animation: 1s linear -0.333333s infinite normal none running opacity-100-25;">
            <div style="position: absolute; width: 12px; height: 5px; background: rgb(53, 53, 53); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(240deg) translate(10px, 0px); border-radius: 100em;"></div>
        </div>
        <div style="position: absolute; top: -2px; transform: translate3d(0px, 0px, 0px); animation: 1s linear -0.25s infinite normal none running opacity-100-25;">
            <div style="position: absolute; width: 12px; height: 5px; background: rgb(53, 53, 53); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(270deg) translate(10px, 0px); border-radius: 100em;"></div>
        </div>
        <div style="position: absolute; top: -2px; transform: translate3d(0px, 0px, 0px); animation: 1s linear -0.166667s infinite normal none running opacity-100-25;">
            <div style="position: absolute; width: 12px; height: 5px; background: rgb(53, 53, 53); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(300deg) translate(10px, 0px); border-radius: 100em;"></div>
        </div>
        <div style="position: absolute; top: -2px; transform: translate3d(0px, 0px, 0px); animation: 1s linear -0.0833333s infinite normal none running opacity-100-25;">
            <div style="position: absolute; width: 12px; height: 5px; background: rgb(53, 53, 53); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(330deg) translate(10px, 0px); border-radius: 100em;"></div>
        </div>
    </div>
</div>
    </div>
</div>
{include file="common/footer"/}
<script src="/static/plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="/static/plugins/bootstrap-3.3.7/js/bootstrap.js"></script>
<script>
    var layer='' ;
    var $;
    layui.use('layer',function () {
        layer= layui.layer;
        $ = layui.jquery;
    });
    var baseURL = '{$baseURL}';
    var api_account = '';//账号
    var api_imageText = '';//图文
    var api_image = '';//图片
    var api_video = '';//视频
    var api_voice = '';//音频
</script>
{include file="wechat/menu_api"/}