微信自定义菜单

微信自定义菜单是用户请求微信端,所有不需要把代码保存到自己的服务器上,但是注意的是必须有access_token,而且access_token两个小时之后就会失效,所有在没有到两个小时的时候就要请求微信端生成新的access_token。下面代码是我写的自定义函数在后面的代码会使用   这个文件叫function.php,注意的是我的第一个函数是实例化了一张表,这张表有appid和那些用户的数据 ,is_user,这个字段是用户选择了那个公众号,那个公众号的zh

<?php
//如果在自定义函数里面使用lanwechat 必须要加\
//获取正在使用的公众号
function  getCurrentMp(){
	$mp=M('mp')->where('is_use=1')->find();
	return $mp;
}
//获取access_token
function getAccess_token(){
	$mp=M('mp')->where('is_use=1')->find();
	if(empty($mp)) return false;
	$id=$mp['id'];
	if(empty($mp['access_token']) || $mp['expire_time']<time()){
		$appid=$mp['appid'];
		$appsecret=$mp['appsecret'];
		$url='https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$appsecret;
		include_once APP_PATH.'LaneWeChat/lanewechat.php';
		$arr= \LaneWeChat\Core\Curl::callWebServer($url,'','GET');
		if(isset($arr['access_token'])){
			$data['access_token']=$arr['access_token'];
			$data['expire_time']=$arr['expires_in']+time()-200;
			M('mp')->where("id=$id")->save($data);
			return $arr['access_token'];
		}else{
			return false;
		}
		}else{
			return $mp['access_token'];
		


	}
}

下面这个代码是lanewechat里面的一个menu.lib.php的代码改造了一下,在getMenu和delMenu调用了函数getAccess_token

<?php
namespace LaneWeChat\Core;
/**
 * 自定义菜单
 * Created by PhpStorm.
 * User: lane
 * Date: 14-8-17
 * Time: 下午3:12
 * E-mail: lixuan868686@163.com
 * WebSite: http://www.lanecn.com
 */
class Menu{
     /**
     * 添加菜单,一级菜单最多3个,每个一级菜单最多可以有5个二级菜单
     * @param $menuList
     *          array(
     *              array('index'=>'1', 'pindex'=>'0', 'name'=>'一级菜单', 'type'=>'click', 'content'=>'aaa'),
     *              array('index'=>'11', 'pindex'=>'1', 'name'=>'二级菜单', 'type'=>'event', 'content'=>'scancode_push'),
     *              array('index'=>'2', 'pindex'=>'0', 'name'=>'一级菜单', 'type'=>'view', 'content'=>'http://www.baidu.com'),
     *          );
     *          'content'是view类型的URL或者其他类型的key
     *          'type'是菜单类型,如下:
     *              1、click:点击推事件,用户点击click类型按钮后,微信服务器会通过消息接口推送消息类型为event的结构给开发者(参考消息接口指南),并且带上按钮中开发者填写的key值,开发者可以通过自定义的key值与用户进行交互;
     *              2、view:跳转URL,用户点击view类型按钮后,微信客户端将会打开开发者在按钮中填写的网页URL,可与网页授权获取用户基本信息接口结合,获得用户基本信息。
     *              3、scancode_push:扫码推事件,用户点击按钮后,微信客户端将调起扫一扫工具,完成扫码操作后显示扫描结果(如果是URL,将进入URL),且会将扫码的结果传给开发者,开发者可以下发消息。
     *              4、scancode_waitmsg:扫码推事件且弹出“消息接收中”提示框,用户点击按钮后,微信客户端将调起扫一扫工具,完成扫码操作后,将扫码的结果传给开发者,同时收起扫一扫工具,然后弹出“消息接收中”提示框,随后可能会收到开发者下发的消息。
     *              5、pic_sysphoto:弹出系统拍照发图,用户点击按钮后,微信客户端将调起系统相机,完成拍照操作后,会将拍摄的相片发送给开发者,并推送事件给开发者,同时收起系统相机,随后可能会收到开发者下发的消息。
     *              6、pic_photo_or_album:弹出拍照或者相册发图,用户点击按钮后,微信客户端将弹出选择器供用户选择“拍照”或者“从手机相册选择”。用户选择后即走其他两种流程。
     *              7、pic_weixin:弹出微信相册发图器,用户点击按钮后,微信客户端将调起微信相册,完成选择操作后,将选择的相片发送给开发者的服务器,并推送事件给开发者,同时收起相册,随后可能会收到开发者下发的消息。
     *              8、location_select:弹出地理位置选择器,用户点击按钮后,微信客户端将调起地理位置选择工具,完成选择操作后,将选择的地理位置发送给开发者的服务器,同时收起位置选择工具,随后可能会收到开发者下发的消息。
     *
     * @return bool
     */
    public static function setMenu($menuList){

      

        //转换type,去掉无用的mp_id,content,sort
        foreach($menuList as $key=>$menu){
            if(@$menu['type'] == 'view'){
                $menuList[$key]['url'] = $menu['content'];
            }else if(@$menu['type'] == 'click'){
                $menuList[$key]['key'] = $menu['content'];
            }else if(@$menu['type'] == 'event'){
                $menuList[$key]['type'] = $menu['content'];
                $menuList[$key]['key'] = 'K_' . rand(1000,9999);
            }
            unset($menuList[$key]['mp_id']);
            unset($menuList[$key]['content']);
            unset($menuList[$key]['sort']);
        }


   
        //树形排布
        $menuList2 = $menuList;
        foreach($menuList as $k=>$menu){
            $hasChild = false;
            foreach($menuList2 as $k2=>$menu2){
                if($menu['index'] == $menu2['pindex']){
                    unset($menuList2[$k2]['index']);
                    unset($menuList2[$k2]['pindex']);

                    $menuList[$k]['sub_button'][] = $menuList2[$k2];
                    
                    unset($menuList[$k2]);
                    $hasChild = true;
                }
            }

            //有子菜单
            if($hasChild){
                unset($menuList[$k]['type']);
                unset($menuList[$k]['url']);
                unset($menuList[$k]['key']);
            }
            unset($menuList[$k]['index']);
            unset($menuList[$k]['pindex']);
        }

      // return $menuList;
      //   exit;
      
        //整理格式
        $data = array();
        $menuList = array_values($menuList);
        $data['button'] = $menuList;
        //转换成JSON
        $data = json_encode($data,JSON_UNESCAPED_UNICODE);
        
        // return $data;
        // exit;

        
        //获取ACCESS_TOKEN
        // $accessToken = AccessToken::getAccessToken();
        $accessToken = getAccess_token();
        
        $url = 'https://api.weixin.qq.com/cgi-bin/menu/create?access_token='.$accessToken;
        $result = Curl::callWebServer($url, $data, 'POST');
        if($result['errcode'] == 0){
            //创建菜单成功
            return true;
        }
        return $result;
    }



    /**
     * 获取微信菜单
     * @return bool|mixed
     *
     * 返回:{"menu":{"button":[{"type":"click","name":"今日歌曲","key":"V1001_TODAY_MUSIC","sub_button":[]},{"type":"click","name":"歌手简介","key":"V1001_TODAY_SINGER","sub_button":[]},{"name":"菜单","sub_button":[{"type":"view","name":"搜索","url":"http://www.soso.com/","sub_button":[]},{"type":"view","name":"视频","url":"http://v.qq.com/","sub_button":[]},{"type":"click","name":"赞一下我们","key":"V1001_GOOD","sub_button":[]}]}]}}
     */
    public static function getMenu(){
        //获取ACCESS_TOKEN
        $accessToken = getAccess_token();
        $url = 'https://api.weixin.qq.com/cgi-bin/menu/get?access_token='.$accessToken;
        return Curl::callWebServer($url, '', 'GET');
    }

    /**
     * 获取微信菜单
     * @return bool|mixed
     *
     * 成功返回:{"errcode":0,"errmsg":"ok"}
     */
    public static function delMenu(){
        //获取ACCESS_TOKEN
        $accessToken = getAccess_token();
        $url = 'https://api.weixin.qq.com/cgi-bin/menu/delete?access_token='.$accessToken;
        return Curl::callWebServer($url, '', 'GET');
    }

    /**
     * 添加菜单,一级菜单最多3个,每个一级菜单最多可以有5个二级菜单
     * @param $menuListJson
     *        {
                "button":[
                {  
                    "type":"click",
                    "name":"今日歌曲",
                    "key":"V1001_TODAY_MUSIC"
                },
                {
                    "name":"菜单",
                    "sub_button":[
                    {    
                        "type":"view",
                        "name":"搜索",
                        "url":"http://www.soso.com/"
                    },
                    {
                        "type":"view",
                        "name":"视频",
                        "url":"http://v.qq.com/"
                    },
                    {
                        "type":"click",
                        "name":"赞一下我们",
                        "key":"V1001_GOOD"
                    }]
                }]
               }
     *各参数的说明同setMenu($menuList)方法

     * @return bool
     */
    
    public static function setMenuJson($menuListJson){
        //json格式
        $data=$menuListJson;
        //此处获得token所调用的函数内部有改写,此处是可在SAE平台上运行的,实际应用过程中可
        //根据运行平台的不同改写getAccessToken()函数
        $accessToken = AccessToken::getAccessToken();
        //创建默认菜单的请求地址
        $url = "https://api.weixin.qq.com/cgi-bin/menu/create?access_token=".$accessToken;
        $result = Curl::callWebServer($url, $data, 'POST');
        if($result['errcode'] == 0){
            return true;
        }
        return $result;
    }

    /**
     * 添加个性化菜单,一级菜单最多3个,每个一级菜单最多可以有5个二级菜单
     * @param $menuListJson
     *        {
                "button":[
                {   
                    "type":"click",
                    "name":"今日歌曲",
                    "key":"V1001_TODAY_MUSIC" 
                },
                { 
                    "name":"菜单",
                    "sub_button":[
                    {   
                        "type":"view",
                        "name":"搜索",
                        "url":"http://www.soso.com/"
                    },
                    {
                        "type":"view",
                        "name":"视频",
                        "url":"http://v.qq.com/"
                    },
                    {
                        "type":"click",
                        "name":"赞一下我们",
                        "key":"V1001_GOOD"
                    }]
                }],
                "matchrule":{
                "group_id":"2",
                "sex":"1",
                "country":"中国",
                "province":"广东",
                "city":"广州",
                "client_platform_type":"2"
                "language":"zh_CN"
                }
              }
     *除了匹配规则之中的参数,其余各参数的说明同setMenu($menuList)方法
     *关于匹配,只有符合匹配条件的用户才会有上述定制的个性化菜单
     * @return bool
     */
    public static function setPersonalMenuJson($menuListJson){
        //json格式
        $data=$menuListJson;
        //此处获得token所调用的函数内部有改写,此处是可在SAE平台上运行的,实际应用过程中可
        //根据运行平台的不同改写getAccessToken()函数
        $accessToken = AccessToken::getAccessToken();
        //请求地址与创建普通菜单有区别
        //创建个性化菜单之前必须先创建默认菜单
        $url = "https://api.weixin.qq.com/cgi-bin/menu/addconditional?access_token=".$accessToken;
        $result = Curl::callWebServer($url, $data, 'POST');
        if($result['errcode'] == 0){
            return true;
        }
        return $result;
    }
}

下面这是menuController的控制器内容

<?php
namespace Home\Controller;



use Think\Controller;
use LaneWeChat\Core\Menu;


class MenuController extends Controller {
	
	    private $mp;
	    public function _initialize(){
	    	$mp=getCurrentMp();
	    	
	    	if(empty($mp)){
	    		$this->error('无使用公众号',U('mp/index'));
	    	}else{
	    		$this->mp=$mp;
	    	}
	    }
	    public function hh(){
	    	echo getAccess_token();
	    }
		public function index(){

			$mp=$this->mp;
			// dump($mp);
			// exit;
			$mp_id = $mp['id'];

			
			$data=M('mp_menu')->where("mp_id={$mp['id']}")->order('id')->select();
			// dump($data);
			// exit;
			$data2=$data;
			foreach ($data as $k => $v) {
				foreach ($data2 as $k2 => $v2) {
					if($v['index']==$v2['pindex']){
						$data[$k]['sub'][]=$v2;
						unset($data[$k2]);
					}
				}
			}
			$this->assign('mpInfo',$mp);
			$this->assign('list',$data);
			$this->display();
		}
		public function menuedit(){
			$mp=$this->mp;
			$mp_id = $mp['id'];
			$data=I('post.data');
			 foreach ($data as  &$value) {
				$value['mp_id']=$mp['id'];
			 }
			$mp = M('mp_menu')->where("mp_id=$mp_id")->delete();
			$mp = M('mp_menu')->addAll($data);

			// $arr = array();
			// foreach ($data as $key => $value) {
			// $row = array();
			// $row['index'] = $value['index'];
			// $row['pindex'] = $value['pindex'];
			// $row['name'] = $value['name'];
			// $row['content'] =$value['content'];
			// $row['type'] = $value['type'];
			// $row['sort'] = $value['sort'];
			// $row['mp_id'] = $mp_id;
			// $arr[] = $row;
			// }
			// $mp = M('mp_menu')->where("mp_id=$mp_id")->delete();
			// $mp = M('mp_menu')->addAll($arr);

		
			//创建微信公众号菜单
			include APP_PATH .'LaneWeChat/lanewechat.php';
			$ret=Menu::setMenu($data);

			// if ($mp) {
			// 	$this->success('添加成功!','Menu/index');
			// }else{
			// 	$this->error('添加失败!','Menu/index');
			// }

			if($ret===true){
				$this->ajaxReturn(array('msg'=>'成功'));
			}else{
				$this->ajaxReturn(array('msg'=>$ret));
			}

			
		}
		public function downmenu(){
		$mp = $this->mp;
		$mp_id = $mp['id'];

		include APP_PATH . 'LaneWeChat/lanewechat.php';
		$menu = Menu::getMenu($data);

		// print_r($menu);
		// // exit;

		// print_r($menu['menu']['button']);
		// exit;

		$menu = $menu['menu']['button'];

		$arr = array();
		$index = 1;
		foreach ($menu as $key => &$value) {
			$value['mp_id']= $mp_id;
			$value['index'] = $index;
			$value['pindex'] = 0;
			$value['sort'] = $index;
			
			if(!empty($value['sub_button'])){
				$value['type'] = '';//设置一级菜单,默认值
				$value['content'] = '';//设置一级菜单,默认值

				$sub_menu = $value['sub_button']; //把二级菜单入到变量$sub_menu
				unset($value['sub_button']);
				$arr[] = $value;

				$subindex = 1;
				foreach ($sub_menu as $subkey=>&$subvalue) {
					$subvalue['mp_id'] = $mp_id;
					$subvalue['index'] = $index . $subindex;
					$subvalue['pindex'] = $index;
					$subvalue['sort'] = $subindex;

					if($subvalue['type']== 'click'){
						$subvalue['content'] = $subvalue['key'];
						unset($subvalue['key']);
					}else if($subvalue['type']=='view'){
						$subvalue['content'] = $subvalue['url'];
						unset($subvalue['url']);
					}else {
						 
						 $subvalue['content'] = $subvalue['type'];
						 $subvalue['type'] = 'event';
						 unset($subvalue['key']);
					}

					unset($subvalue['sub_button']);
					$arr[] = $subvalue;

					$subindex++;
				}
				
			}else{
				if($value['type']== 'click'){
					$value['content'] = $value['key'];
					unset($value['key']);
				}else if($value['type']=='view'){
					$value['content'] = $value['url'];
					unset($value['url']);
				}else {
					 
					 $value['content'] = $value['type'];
					 $value['type'] = 'event';
					 unset($value['key']);
				}

				unset($value['sub_button']);
				$arr[] = $value;
			}
			$index++;
		}

		// print_r($arr);
// exit;

		$model = M('mp_menu');
		$model->where("mp_id={$mp['id']}")->delete();
		foreach ($arr as $key => $value) {
			$model->add($value);	
		}
		$this->redirect('menu/index');

		
	}
	public function delmenu(){
		$mp=$this->mp;
		$mp_id=$mp['id'];
		$model=M('mp_menu')->where("mp_id=$mp_id")->delete();
		$this->redirect('menu/index');

	}

}

最后在补一下我前台页面的代码,我用的是模版继承

<!DOCTYPE html>


<html>


<head>

  
  <meta charset="utf-8">


  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


  <title>layout 后台大布局 - Layui</title>


  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css">


</head>


<body class="layui-layout-body">


<div class="layui-layout layui-layout-admin">


  <div class="layui-header">


    <div class="layui-logo">layui 后台布局</div>


    <!-- 头部区域(可配合layui已有的水平导航) -->


    <!-- <ul class="layui-nav layui-layout-left">


      <li class="layui-nav-item"><a href="">控制台</a></li>


      <li class="layui-nav-item"><a href="">商品管理</a></li>


      <li class="layui-nav-item"><a href="">用户</a></li>


      <li class="layui-nav-item">


        <a href="javascript:;">其它系统</a>


        <dl class="layui-nav-child">


          <dd><a href="">邮件管理</a></dd>


          <dd><a href="">消息管理</a></dd>


          <dd><a href="">授权管理</a></dd>


        </dl>


      </li>


    </ul> -->


    <ul class="layui-nav layui-layout-right">


      <li class="layui-nav-item">


        <a href="javascript:;">


          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">


          贤心


        </a>


        <dl class="layui-nav-child">


          <dd><a href="">基本资料</a></dd>


          <dd><a href="">安全设置</a></dd>


        </dl>


      </li>


      <li class="layui-nav-item"><a href="">退了</a></li>


    </ul>


  </div>


  


  <div class="layui-side layui-bg-black">


    <div class="layui-side-scroll">


      <!-- 左侧导航区域(可配合layui已有的垂直导航) -->


      <ul class="layui-nav layui-nav-tree"  lay-filter="test">


        <li class="layui-nav-item layui-nav-itemed">


          <a class="" href="javascript:;">公众号</a>


          <dl class="layui-nav-child">


            <dd><a href="{:U('mp/index')}">公众号管理</a></dd>


            <dd><a href="javascript:;">消息管理</a></dd>


            <dd><a href="{:U('menu/index')}">自定义菜单</a></dd>


            <dd><a href="">超链接</a></dd>


          </dl>


        </li>


       <!--  <li class="layui-nav-item">


          <a href="javascript:;">解决方案</a>


          <dl class="layui-nav-child">


            <dd><a href="javascript:;">列表一</a></dd>


            <dd><a href="javascript:;">列表二</a></dd>


            <dd><a href="">超链接</a></dd>


          </dl>


        </li>


        <li class="layui-nav-item"><a href="">云市场</a></li>


        <li class="layui-nav-item"><a href="">发布商品</a></li> -->


      </ul>


    </div>


  </div>


  


  <div class="layui-body">


    <!-- 内容主体区域 -->


    <div style="padding: 15px;">
        <block name="css"> </block>

        <block name="body">内容主题区域</block>


    </div>


  </div>


  


  <div class="layui-footer">


    <!-- 底部固定区域 -->


    © layui.com - 底部固定区域


  </div>


</div>


<script type="text/javascript" src="__PUBLIC__/layui/jquery-1.7.min.js"></script>


<script src="__PUBLIC__/layui/layui.js"></script>


<script>


//JavaScript代码区域


layui.use('element', function(){


  var element = layui.element;


  


});


<block name="js"></block>


</script>


</body>


</html>

  自定义菜单页面

<extend name="Common:base" />
<block name="css">

<link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/css/console.css">
</block>
<block name="body">
<style>
    .mobile-preview { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none;}
    .menu-editor { left: 317px; display: block; max-width: 500px; width: 500px; height: 480px; border-radius: 0; border-color: #e7e7eb; box-shadow: none}
    .menu-editor .arrow { top: auto !important; bottom: 15px}
    .menu-editor .popover-title { margin-top: 0}
    .menu-delete { font-weight: 400; font-size: 12px;}
    .menu-submit { margin-right: 10px}
</style>
<div class="content-hd">
    <h2>自定义菜单</h2>
</div>  
<div class="mp-menu">
    <div class='mobile-preview pull-left'>
        <div class='mobile-header'>{$mpInfo.name}</div>
        <div class='mobile-body'></div>
        <ul class='mobile-footer'>
            
            <volist name="list" id="menu">
            <li class="parent-menu">
                <a><i class="icon-sub hide"></i> <span data-type="{$menu.type}" data-content="{$menu.content}">{$menu.name}</span></a>
                <div class="sub-menu text-center hide">
                    <ul>
                        <notempty="menu['sub']">
                        <volist name="menu['sub']"  id="submenu">
                        <li>
                            <a class="bottom-border"><span data-type="{$submenu.type}" data-content="{$submenu.content}">{$submenu.name}</span></a>
                        </li>
                        </volist>
                        </notempty>
                        <li class="menu-add"><a><i class="icon-add"></i></a></li>
                    </ul>
                    <i class="arrow arrow_out"></i>
                    <i class="arrow arrow_in"></i>
                </div>
            </li>
            </volist>
            <li class="parent-menu menu-add">
                <a><i class="icon-add"></i></a>
            </li>
        </ul>
    </div>
    <div class="pull-left" style="position:absolute">
        <div class="popover fade right up in menu-editor">
            <div class="arrow"></div>
            <h3 class="popover-title">
                菜单名称

                <a class="pull-right menu-delete">删除</a>

            </h3>
            <div class="popover-content menu-content"></div>
        </div>
    </div>
    <div class="hide menu-editor-parent-tpl">
        <form class="layui-form">
            <p>已添加子菜单,仅可设置菜单名称。</p>
            <div class="layui-form-item" style="margin-top:50px">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-block">
                    <input name="menu-name" class="layui-input">
                    <span class="layui-form-mid layui-word-aux">字数不超过5个汉字或16个字母</span>
                </div>
            </div>
        </form>
    </div>
    <div class="hide menu-editor-content-tpl layui-form">
        <form class="form-horizontal ">
            <div class="layui-form-item" style="margin-top:50px">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-block">
                    <input name="menu-name" class="layui-input">
                    <span class="layui-form-mid layui-word-aux">字数不超过13个汉字或40个字母</span>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top:30px">
                <label class="layui-form-label">菜单内容</label>
                <div class="layui-input-block">
                        <!--<label class="col-xs-5 font-noraml">-->
                            <!--<input class="cuci-radio" type="radio" name="menu-type" value="text"> 文字消息-->
                        <!--</label>-->
                        <label class="col-xs-5 font-noraml">
                            <input class="cuci-radio" type="radio" name="menu-type" value="click"> 关键字
                        </label>
                        <label class="col-xs-5 font-noraml">
                            <input class="cuci-radio" type="radio" name="menu-type" value="view"> 跳转网页
                        </label>
                        <label class="col-xs-5 font-noraml">
                            <input class="cuci-radio" type="radio" name="menu-type" value="event"> 事件功能
                        </label>
                        <label class="col-xs-5 font-noraml">
                            <input class="cuci-radio" type="radio" name="menu-type" value="miniprogram"> 小程序
                        </label>
                        <!--<label class="col-xs-5 font-noraml">-->
                            <!--<input class="cuci-radio" type="radio" name="menu-type" value="customservice"> 多客服-->
                        <!--</label>-->
                </div>
            </div>
            <div class="layui-form-item editor-content-input" style="margin-top:30px"></div>
        </form>
    </div>
    <div style="clear:both"></div>

    <div style="width:830px;padding-top:40px;text-align:center">
        <button class="layui-btn menu-submit" lay-filter="formDemo" >保存发布</button>
        <a href="{:U('downmenu')}" class="layui-btn layui-btn-danger">同步菜单</a>
        <a href="{:U('delmenu')}" class="layui-btn layui-btn-normal">删除菜单</a>

    </div>
</div>
<script type="text/javascript" src="__PUBLIC__/layui/jquery-1.7.min.js"></script>
<script>
    $(function () {
        /**
         * 菜单事件构造方法
         * @returns {menu.index_L2.menu}
         */
        var menu = function () {
            this.version = '1.0';
            this.$btn;
            this.listen();
        };
        /**
         * 控件默认事件
         * @returns {undefined}
         */
        var layer;
        layui.use('layer', function(){
             layer = layui.layer;

        });
        menu.prototype.listen = function () {
                var self = this;
                $('.mobile-footer').on('click', 'li a', function () {
                    self.$btn = $(this);
                    self.$btn.parent('li').hasClass('menu-add') ? self.add() : self.checkShow();
                }).find('li:first a:first').trigger('click');
                $('.menu-delete').on('click', function () {
                    var index = layer.confirm('确定删除吗?', function () {
                        self.del(), layer.close(index);
                    });
                });
                $('.menu-submit').on('click', function () {
                    self.submit();
                });
        };
        /**
         * 添加一个菜单
         * @returns {undefined}
         */
        menu.prototype.add = function () {
            var $add = this.$btn.parent('li'), $ul = $add.parent('ul');
            if ($ul.hasClass('mobile-footer')) { /* 添加一级菜单 */
                var $li = $('<li class="parent-menu"><a class="active"><i class="icon-sub hide"></i> <span>一级菜单</span></a></li>').insertBefore($add);
                this.$btn = $li.find('a');
                $('<div class="sub-menu text-center hide"><ul><li class="menu-add"><a><i class="icon-add"></i></a></li></ul><i class="arrow arrow_out"></i><i class="arrow arrow_in"></i></div>').appendTo($li);
            } else { /* 添加二级菜单 */
                this.$btn = $('<li><a class="bottom-border"><span>二级菜单</span></a></li>').prependTo($ul).find('a');
            }
            this.checkShow();
        };
        /**
         * 数据校验显示
         * @returns {unresolved}
         */
        menu.prototype.checkShow = function () {
            var $li = this.$btn.parent('li'), $ul = $li.parent('ul');
            /* 选中一级菜单时显示二级菜单 */
            if ($li.hasClass('parent-menu')) {
                $('.parent-menu .sub-menu').not(this.$btn.parent('li').find('.sub-menu').removeClass('hide')).addClass('hide');
            }

            /* 一级菜单添加按钮 */
            var $add = $('li.parent-menu:last');
            $add.siblings('li').size() >= 3 ? $add.addClass('hide') : $add.removeClass('hide');
            /* 二级菜单添加按钮 */
            $add.siblings('li').map(function () {
                var $add = $(this).find('ul li:last');
                $add.siblings('li').size() >= 5 ? $add.addClass('hide') : $add.removeClass('hide');
            });
            /* 处理一级菜单 */
            var parentWidth = 100 / $('li.parent-menu:visible').size() + '%';
            $('li.parent-menu').map(function () {
                var $icon = $(this).find('.icon-sub');
                $(this).width(parentWidth).find('ul li').size() > 1 ? $icon.removeClass('hide') : $icon.addClass('hide');
            });
            /* 更新选择中状态 */
            $('.mobile-footer a.active').not(this.$btn.addClass('active')).removeClass('active');
            this.renderEdit();
            return $ul;
        };
        /**
         * 删除当前菜单
         * @returns {undefined}
         */
        menu.prototype.del = function () {
            var $li = this.$btn.parent('li'), $ul = $li.parent('ul');
            var $default = function () {
                if ($li.prev('li').size() > 0) {
                    return $li.prev('li');
                }
                if ($li.next('li').size() > 0 && !$li.next('li').hasClass('menu-add')) {
                    return $li.next('li');
                }
                if ($ul.parents('li.parent-menu').size() > 0) {
                    return $ul.parents('li.parent-menu');
                }
                return $('null');
            }.call(this);
            $li.remove();
            this.$btn = $default.find('a:first');
            this.checkShow();
        };
        /**
         * 显示当前菜单的属性值
         * @returns {undefined}
         */
        menu.prototype.renderEdit = function () {
            var $span = this.$btn.find('span'), $li = this.$btn.parent('li'), $ul = $li.parent('ul');
            var $html = '';
            if ($li.find('ul li').size() > 1) { /*父菜单*/
                $html = $($('.menu-editor-parent-tpl').html());
                $html.find('input[name="menu-name"]').val($span.text()).on('change keyup', function () {
                    $span.text(this.value || ' ');
                });
                $('.menu-editor .menu-content').html($html);
            } else {
                $html = $($('.menu-editor-content-tpl').html());
                $html.find('input[name="menu-name"]').val($span.text()).on('change keyup', function () {
                    $span.text(this.value || ' ');
                });
                $('.menu-editor .menu-content').html($html);
                var type = $span.attr('data-type') || 'text';
                $html.find('input[name="menu-type"]').on('click', function () {
                    $span.attr('data-type', this.value || 'text');
                    var content = $span.data('content') || '';
                    var type = this.value;
                    var html = function () {
                        switch (type) {
                            case 'miniprogram':
                                var tpl = '<div><div class="layui-form-item"><label class="layui-form-label">appid</label><div class="layui-input-block"><input type="text" name="appid" required="" lay-verify="required" placeholder="appid" autocomplete="off" class="layui-input" value="{appid}"></div></div><div class="layui-form-item"><label class="layui-form-label">url</label><div class="layui-input-block"><input type="text" name="url" required="" lay-verify="required" placeholder="url" autocomplete="off" class="layui-input" value="{url}"></div></div><div class="layui-form-item"><label class="layui-form-label">pagepath</label><div class="layui-input-block"><input type="text" name="pagepath" required="" lay-verify="required" placeholder="pagepath" autocomplete="off" class="layui-input" value="{pagepath}"></div></div></div>';
                                var _appid = '', _pagepath = '', _url = '';
                                if (content.indexOf(',') > 0) {
                                    _appid = content.split(',')[0] || '';
                                    _url = content.split(',')[1] || '';
                                    _pagepath = content.split(',')[2] || '';
                                }
                                $span.data('appid', _appid), $span.data('url', _url), $span.data('pagepath', _pagepath);
                                return tpl.replace('{appid}', _appid).replace('{url}', _url).replace('{pagepath}', _pagepath);
                            case 'customservice':
                            case 'text':
                                return '<div>回复内容<textarea style="resize:none;height:225px" name="content" class="form-control input-sm">{content}</textarea></div>'.replace('{content}', content);
                            case 'view':
                                return '<div class="layui-form-item layui-form-text"><label class="layui-form-label">跳转地址</label><div class="layui-input-block"><textarea placeholder="请输入内容" class="layui-textarea" name="content">{content}</textarea></div></div>'.replace('{content}', content);
                            case 'click':
                                return '<div class="layui-form-item layui-form-text"><label class="layui-form-label">匹配内容</label><div class="layui-input-block"><textarea placeholder="请输入内容" class="layui-textarea" name="content">{content}</textarea></div></div>'.replace('{content}', content);
                            case 'event':
                                var options = {
                                    'scancode_push': '扫码推事件',
                                    'scancode_waitmsg': '扫码推事件且弹出“消息接收中”提示框',
                                    'pic_sysphoto': '弹出系统拍照发图',
                                    'pic_photo_or_album': '弹出拍照或者相册发图',
                                    'pic_weixin': '弹出微信相册发图器',
                                    'location_select': '弹出地理位置选择器'};
                                var select = [], tpl = '<div class="layui-form-item layui-form-text" style="margin-bottom: auto;"><label class="layui-form-label"></label><div><label><input class="cuci-radio" name="content" type="radio" {checked} value="{value}"> {title}</label></div></div>';
                                if (!(options[content] || false)) {
                                    content = 'scancode_push';
                                    $span.data('content', content);
                                }
                                for (var i in options) {
                                    select.push(tpl.replace('{value}', i).replace('{title}', options[i]).replace('{checked}', (i === content) ? 'checked' : ''));
                                }
                                return select.join('');
                        }
                    }.call(this);
                    var $html = $(html), $input = $html.find('input,textarea');
                    $input.on('change keyup click', function () {
                        // 将input值写入到span上
                        $span.data(this.name, $(this).val() || $(this).html());
                        // 如果是小程序,合并内容到span的content上
                        if (type === 'miniprogram') {
                            $span.data('content', $span.data('appid') + ',' + $span.data('url') + ',' + $span.data('pagepath'));
                        }
                    });
                    $('.editor-content-input').html($html);
                }).filter('input[value="{type}"]'.replace('{type}', type)).trigger('click');
            }
        };
        /**
         * 提交数据
         * @returns {undefined}
         */
        menu.prototype.submit = function () {
            var data = [];
            function getdata($span) {
                var menudata = {};
                menudata.name = $span.text();
                menudata.type = $span.attr('data-type');
                menudata.content = $span.data('content') || '';
                return menudata;
            }

            $('li.parent-menu').map(function (index, item) {
                if (!$(item).hasClass('menu-add')) {
                    var menudata = getdata($(item).find('a:first span'));
                    menudata.index = index + 1;
                    menudata.pindex = 0;
                    // menudata.sub = [];
                    menudata.sort = index;
                    data.push(menudata);
                    $(item).find('.sub-menu ul li:not(.menu-add) span').map(function (ii, span) {
                        var submenudata = getdata($(span));
                        submenudata.index = (index + 1) + '' + (ii + 1);
                        submenudata.pindex = menudata.index;
                        submenudata.sort = ii;
                        data.push(submenudata);
                    });
                }
            });
//            console.log(data);return;
            var data = (data == '')?'':data;
            // var load = layer.load(1);
            $.post(
                '{:U("menuedit")}',
                {data:data},
                function (res) {
                    layer.alert(JSON.stringify(res.msg));
                    // if(res.status=='0'){
                    //     layer.close(load);
                    //     layer.alert(res.msg);
                    // }
                    // if(res.status=='1'){
                    //     layer.close(load);
                    //     layer.msg(res.msg,{time:1000},function () {

                    //     });
                    // }
                },
                "json"
            )
        };
        new menu();
    });
</script>
</block>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值