微信

src/main/java/com/jeeplus/modules/wexintheorder/dao/TheLeadershipDao.java

@@ -0,0 +1,19 @@
+package com.jeeplus.modules.wexintheorder.dao;
+
+import com.jeeplus.common.persistence.CrudDao;
+import com.jeeplus.common.persistence.annotation.MyBatisDao;
+import com.jeeplus.modules.sys.entity.User;
+import com.jeeplus.modules.wexintheorder.entity.TheLeadership;
+
+import java.util.List;
+
+@MyBatisDao
+public interface TheLeadershipDao extends CrudDao<TheLeadership> {
+    public User findUser(String wechatId);
+
+    //增加
+    Integer insertLeaderShip(TheLeadership theLeadership);
+
+    //根据userid查找分管领导
+    List<TheLeadership> findListUserId(TheLeadership theLeadership);
+}

src/main/java/com/jeeplus/modules/wexintheorder/dao/TheOrderDao.java

@@ -0,0 +1,16 @@
+package com.jeeplus.modules.wexintheorder.dao;
+
+import com.jeeplus.common.persistence.CrudDao;
+import com.jeeplus.common.persistence.annotation.MyBatisDao;
+import com.jeeplus.modules.sys.entity.User;
+import com.jeeplus.modules.wexintheorder.entity.TheOrder;
+
+@MyBatisDao
+public interface TheOrderDao extends CrudDao<TheOrder> {
+    public Integer insertOrder(TheOrder theOrder);
+
+    public Integer updateOrder(TheOrder theOrder);
+
+
+    public User findUser(String wechatId);
+}

src/main/java/com/jeeplus/modules/wexintheorder/entity/TheLeadership.java

@@ -0,0 +1,24 @@
+package com.jeeplus.modules.wexintheorder.entity;
+
+import com.jeeplus.common.persistence.DataEntity;
+
+public class TheLeadership extends DataEntity<TheLeadership> {
+    private String userId;
+    private String leadership;
+
+    public String getUserId() {
+        return userId;
+    }
+
+    public void setUserId(String userId) {
+        this.userId = userId;
+    }
+
+    public String getLeadership() {
+        return leadership;
+    }
+
+    public void setLeadership(String leadership) {
+        this.leadership = leadership;
+    }
+}

src/main/java/com/jeeplus/modules/wexintheorder/entity/TheOrder.java

@@ -0,0 +1,74 @@
+package com.jeeplus.modules.wexintheorder.entity;
+
+import com.jeeplus.common.persistence.DataEntity;
+
+import javax.xml.crypto.Data;
+import java.util.Date;
+
+public class TheOrder extends DataEntity<TheOrder> {
+    private String name;//姓名
+    private String department;//部门
+    private String leadership;//分管领导
+    private Date confirmOrder;//确定订餐
+    private Date scheduled;//预定餐
+    private String correlationId;//关联id
+
+    private String status;//有无回显 1-回显 2-本来就有
+
+    public String getStatus() {
+        return status;
+    }
+
+    public void setStatus(String status) {
+        this.status = status;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getDepartment() {
+        return department;
+    }
+
+    public void setDepartment(String department) {
+        this.department = department;
+    }
+
+    public String getLeadership() {
+        return leadership;
+    }
+
+    public void setLeadership(String leadership) {
+        this.leadership = leadership;
+    }
+
+    public Date getConfirmOrder() {
+        return confirmOrder;
+    }
+
+    public void setConfirmOrder(Date confirmOrder) {
+        this.confirmOrder = confirmOrder;
+    }
+
+    public Date getScheduled() {
+        return scheduled;
+    }
+
+    public void setScheduled(Date scheduled) {
+        this.scheduled = scheduled;
+    }
+
+    public String getCorrelationId() {
+        return correlationId;
+    }
+
+    public void setCorrelationId(String correlationId) {
+        this.correlationId = correlationId;
+    }
+}
+

src/main/java/com/jeeplus/modules/wexintheorder/service/TheLeadershipService.java

@@ -0,0 +1,36 @@
+package com.jeeplus.modules.wexintheorder.service;
+
+import com.jeeplus.common.service.CrudService;
+import com.jeeplus.modules.sys.entity.User;
+import com.jeeplus.modules.wexintheorder.dao.TheLeadershipDao;
+import com.jeeplus.modules.wexintheorder.entity.TheLeadership;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.util.List;
+
+@Service
+public class TheLeadershipService extends CrudService<TheLeadershipDao, TheLeadership> {
+    @Autowired
+    private TheLeadershipDao theLeadershipDao;
+
+    //根据userid查找分管领导
+    public List<TheLeadership> findListUserId(TheLeadership theLeadership){
+        return theLeadershipDao.findListUserId(theLeadership);
+    }
+
+    //添加分管领导
+    @Transactional
+    public void insertLeaderShip(TheLeadership theLeadership){
+        theLeadership.preInsert();
+        theLeadershipDao.insertLeaderShip(theLeadership);
+    }
+    /*
+       User
+    */
+    //查找用户关联信息
+    public User findUser(String weChatId){
+        return theLeadershipDao.findUser(weChatId);
+    }
+}

src/main/java/com/jeeplus/modules/wexintheorder/service/TheOrderService.java

@@ -0,0 +1,29 @@
+package com.jeeplus.modules.wexintheorder.service;
+
+import com.jeeplus.common.service.CrudService;
+import com.jeeplus.modules.sys.entity.User;
+import com.jeeplus.modules.wexintheorder.dao.TheOrderDao;
+import com.jeeplus.modules.wexintheorder.entity.TheOrder;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+@Service
+public class TheOrderService extends CrudService<TheOrderDao,TheOrder>{
+    @Autowired
+    private TheOrderDao theOrderDao;
+
+    //增加操作
+    @Transactional
+    public void insertOrder(TheOrder theOrder){
+        theOrderDao.insertOrder(theOrder);
+    };
+
+    //修改操作
+    @Transactional
+    public void updateOrder(TheOrder theOrder){
+        theOrderDao.updateOrder(theOrder);
+    }
+
+
+}

src/main/java/com/jeeplus/modules/wexintheorder/web/TheOrderController.java

@@ -0,0 +1,181 @@
+package com.jeeplus.modules.wexintheorder.web;
+
+import com.jeeplus.common.json.AjaxJson;
+import com.jeeplus.common.utils.StringUtils;
+import com.jeeplus.common.web.BaseController;
+import com.jeeplus.modules.sys.entity.User;
+import com.jeeplus.modules.wexinpackage.access.util.access.WeChatParamsUtil;
+import com.jeeplus.modules.wexinpackage.access.util.encryption.WXBizMsgCrypt;
+import com.jeeplus.modules.wexintheorder.dao.TheLeadershipDao;
+import com.jeeplus.modules.wexintheorder.entity.TheLeadership;
+import com.jeeplus.modules.wexintheorder.entity.TheOrder;
+import com.jeeplus.modules.wexintheorder.service.TheLeadershipService;
+import com.jeeplus.modules.wexintheorder.service.TheOrderService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.io.BufferedReader;
+import java.io.PrintWriter;
+import java.util.Date;
+import java.util.List;
+
+@Controller
+@RequestMapping(value = "${adminPath}/weXin/theOrder")
+public class TheOrderController extends BaseController {
+    @Autowired
+    private TheOrderService theOrderService;
+
+    @Autowired
+    private TheLeadershipService theLeadershipService;
+
+    //页面显示
+    @RequestMapping(value = "orderFrom")
+    public String getOrderFrom(Model model, HttpServletRequest request){
+        return "modules/weixin/theorder/home";//返回一个界面
+    }
+
+    @RequestMapping(value = "callBack")
+    public void getCallBack(HttpServletRequest request, HttpServletResponse response) throws Exception{
+        String method = request.getMethod();
+        if ("GET".equals(method)){
+            doGet(request,response);
+        }else {
+            doPost(request,response);
+        }
+    }
+    private void doGet(HttpServletRequest request, HttpServletResponse response){
+        String token = "AL8aMOYlujP28AE8WDHrxQqW9D5bfxBa";
+        String aceKey = "yIpls2iEHKcp7Pftlp8MrieuJ6HJAb9yeKLqZGLmeHL";
+        // 微信加密签名
+        String msg_signature = request.getParameter("msg_signature");
+        // 时间戳
+        String timestamp = request.getParameter("timestamp");
+        // 随机数
+        String nonce = request.getParameter("nonce");
+        // 随机字符串
+        String echoStr = request.getParameter("echostr");
+        //回调key值
+        String sEchoStr = null;
+        WXBizMsgCrypt wxcpt;
+        try {
+            PrintWriter writer = response.getWriter();
+            wxcpt = new WXBizMsgCrypt(token,aceKey,WeChatParamsUtil.corpId);
+            sEchoStr = wxcpt.VerifyURL(msg_signature, timestamp, nonce, echoStr);
+            if (StringUtils.isBlank(sEchoStr)){
+                logger.error("url验证失败");
+            }
+            writer.write(sEchoStr);
+            writer.close();
+        }catch (Exception e){
+            logger.error("企业微信回调验证错误",e);
+        }
+    }
+    private  void  doPost(HttpServletRequest request, HttpServletResponse response) throws Exception{
+        String sReqMsgSig = request.getParameter("msg_signature");
+        String sReqTimeStamp = request.getParameter("timestamp");
+        String sReqNonce = request.getParameter("nonce");
+//        try {
+        BufferedReader reader = request.getReader();
+        char[] buf = new char[512];
+        int len = 0;
+        StringBuffer stringBuffer = new StringBuffer();
+        while ((len = (int) reader.read(buf))!= -1){
+            stringBuffer =  stringBuffer.append(buf, 0, len);
+        }
+        String content = stringBuffer.toString();
+        if (content == null){
+            content = "";
+        }
+        WXBizMsgCrypt wxcpt = new WXBizMsgCrypt(WeChatParamsUtil.contacts_token,WeChatParamsUtil.encodingAESKey,WeChatParamsUtil.corpId);
+        String sMsg = wxcpt.DecryptMsg(sReqMsgSig, sReqTimeStamp, sReqNonce, content);
+//        weChatCallbackService.getMapOperation(sMsg,request);
+        // 循环所有子元素
+//        } catch (Exception e) {
+//            // TODO
+//            // 解密失败，失败原因请查看异常
+//            e.printStackTrace();
+//        }
+    }
+
+    //获取部门以及分管领导信息--回显FROM
+    public TheOrder getUserOrderEcho(String weChatUserId){
+        TheOrder theOrder = new TheOrder();
+        weChatUserId = "00000011";
+        //获取用户user
+        User user = theLeadershipService.findUser(weChatUserId);
+        //获取用户id
+        String userId = user.getId();
+        //添加回显对象
+        theOrder.setName(user.getName());//姓名
+        theOrder.setCorrelationId(userId);
+        theOrder.setDepartment(user.getOffice().getName());//部门
+        TheLeadership theLeadership = new TheLeadership();
+        theLeadership.setUserId(userId);
+        List<TheLeadership> listUserId = theLeadershipService.findListUserId(theLeadership);
+        if (listUserId.size()>0){
+            theLeadership = listUserId.get(1);//获取分管领导信息
+            theOrder.setLeadership(theLeadership.getLeadership());//添加分管领导
+            theOrder.setStatus("0"); //是回显
+        }else {
+            theOrder.setLeadership("");//无分管领导
+            theOrder.setStatus("1"); //不是回显
+        }
+        return theOrder;
+    }
+
+    //获取--预定餐
+    public AjaxJson getReservation(String status,TheOrder theOrder){
+        AjaxJson ajaxJson = new AjaxJson();
+        try {
+            //保存分管领导
+            saveLeader(status,theOrder);
+            //保存订单信息 需要处理周末
+            theOrder.setScheduled(new Date());
+            theOrderService.insertOrder(theOrder);//保存订单信息
+            ajaxJson.setSuccess(true);
+            ajaxJson.setMsg("预定餐成功");
+            return ajaxJson;
+        }catch (Exception e){
+            e.printStackTrace();
+        }
+        ajaxJson.setSuccess(false);
+        ajaxJson.setMsg("预定失败,请重新预定");
+        return ajaxJson;
+    }
+
+    //获取确定订餐时间
+    public AjaxJson getConfirmOrder(String status,TheOrder theOrder){
+        AjaxJson ajaxJson = new AjaxJson();
+        //用来查找昨天的预定餐情况
+        TheOrder to = new TheOrder();
+
+        try {
+            saveLeader(status,theOrder);
+            theOrderService.findList(theOrder);
+            ajaxJson.setSuccess(true);
+            ajaxJson.setMsg("确定订餐成功");
+            return ajaxJson;
+        }catch (Exception e){
+            e.printStackTrace();
+        }
+        ajaxJson.setSuccess(false);
+        ajaxJson.setMsg("确定订餐失败，请重新确定");
+        return ajaxJson;
+    }
+
+    //保存分管领导
+    public void saveLeader(String status,TheOrder theOrder){
+        //保存分管领导信息
+        if (status.equals("1")){
+            //保存信息分管领导信息
+            TheLeadership theLeadership = new TheLeadership();
+            theLeadership.setUserId(theOrder.getCorrelationId());
+            theLeadership.setLeadership(theOrder.getLeadership());
+            theLeadershipService.insertLeaderShip(theLeadership);
+        }
+    }
+}

src/main/resources/mappings/modules/wexintheorder/TheLeadershipDao.xml

@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.jeeplus.modules.wexintheorder.dao.TheLeadershipDao">
+	<sql id="userColumns">
+		a.id,
+		a.com_id AS "comId",
+		a.company_id AS "company.id",
+		a.office_id AS "office.id",
+		a.login_name,
+		a.password,
+		a.password_remake AS "passwordRemake",
+		a.no,
+		a.name,
+		a.sex,
+		a.email,
+		a.phone,
+		a.mobile,
+		a.ishide,
+		a.user_type,
+		a.login_ip,
+		a.login_date,
+		a.remarks,
+		a.login_flag,
+		a.photo,
+		a.default_photo,
+		a.qrcode,
+		a.sign,
+		a.create_by AS "createBy.id",
+		a.create_date,
+		a.update_by AS "updateBy.id",
+		a.update_date,
+		a.del_flag,
+		a.first_flag AS "firstFlag",
+		s.name AS "company.name",
+		s.parent_id AS "company.parent.id",
+		s.parent_ids AS "company.parentIds",
+		s.group_id AS "company.groupId",
+		s.group_name AS "company.groupName",
+		s.useable AS "company.useable",
+		o.name AS "office.name",
+		o.top_company AS "office.topCompany",
+		o.parent_id AS "office.parent.id",
+		o.parent_ids AS "office.parentIds",
+		bo.id AS "branchOffice.id",
+		bo.name AS "branchOffice.name",
+		bo.parent_ids AS "branchOffice.parentIds",
+		bo.parent_id AS "branchOffice.parent.id"
+	</sql>
+
+	<sql id="leaderShipColumns">
+		a.id AS "id",
+		a.create_by AS "createBy.id",
+		a.create_date AS "createDate",
+		a.update_by AS "updateBy.id",
+		a.update_date AS "updateDate",
+		a.remarks AS "remarks",
+		a.del_flag AS "delFlag",
+		a.user_id AS "userId",
+		a.leadership AS "leadership"
+	</sql>
+
+	<select id="findListUserId" resultType="com.jeeplus.modules.wexintheorder.entity.TheLeadership">
+		select
+		<include refid="leaderShipColumns"/>
+		from work_leadership
+		WHERE a.user_id = #{userId}
+	</select>
+
+	<insert id="insertLeaderShip">
+		INSERT INTO work_leadership(
+			id,
+			create_by,
+			create_date,
+			update_by,
+			update_date,
+			remarks,
+			del_flag,
+			user_id,
+			leadership
+		) VALUES (
+			#{id},
+			#{createBy.id},
+			#{createDate},
+			#{updateBy.id},
+			#{updateDate},
+			#{remarks},
+			#{delFlag},
+			#{userId},
+			#{leadership}
+		)
+	</insert>
+
+
+
+
+	<!-- 根据id查找部门分管领导信息 -->
+	<select id="findUser" resultType="com.jeeplus.modules.sys.entity.User">
+		SELECT
+		<include refid="userColumns"/>
+		FROM sys_user a
+		LEFT JOIN sys_user_office uo ON uo.user_id = a.id AND uo.company_id = #{companyId} AND uo.status = '3' AND uo.del_flag = '0'
+		LEFT JOIN sys_office s ON s.id = uo.company_id
+		LEFT JOIN sys_office o ON o.id = uo.office_id
+		LEFT JOIN sys_office bo ON bo.id = o.branch_office
+		WHERE a.we_chat_id = #{wechatId}
+	</select>
+</mapper>

src/main/resources/mappings/modules/wexintheorder/TheOrderDao.xml

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.jeeplus.modules.wexintheorder.dao.TheOrderDao">
+	<sql id="orderColumns">
+		a.id AS "id",
+		a.create_by AS "createBy.id",
+		a.create_date AS "createDate",
+		a.update_by AS "updateBy.id",
+		a.update_date AS "updateDate",
+		a.remarks AS "remarks",
+		a.del_flag AS "delFlag",
+		a.name AS "name",
+		a.department AS "department",
+		a.leadership AS "leadership",
+		a.confirmOrder AS "confirmOrder",
+		a.scheduled AS "scheduled",
+		a.correlationId AS "correlationId"
+	</sql>
+
+	<select id="findList" resultType="com.jeeplus.modules.wexintheorder.entity.TheOrder" >
+		SELECT
+		<include refid="orderColumns"/>
+		FROM the_order a
+		<where>
+			a.del_flag = #{DEL_FLAG_NORMAL}
+			<if test="scheduled != null and scheduled != '' ">
+				AND a.scheduled = #{scheduled}
+			</if>
+		</where>
+		<choose>
+			<when test="page !=null and page.orderBy != null and page.orderBy != ''">
+				ORDER BY ${page.orderBy}
+			</when>
+			<otherwise>
+				ORDER BY a.update_date DESC
+			</otherwise>
+		</choose>
+	</select>
+
+	<insert id="insertOrder">
+		INSERT INTO the_order(
+			id,
+			create_by,
+			create_date,
+			update_by,
+			update_date,
+			remarks,
+			del_flag,
+			name,
+			department,
+			leadership,
+			confirmOrder,
+			scheduled,
+			correlationId
+		) VALUES (
+			#{id},
+			#{createBy.id},
+			#{createDate},
+			#{updateBy.id},
+			#{updateDate},
+			#{remarks},
+			#{delFlag},
+			#{name},
+			#{department},
+			#{leadership},
+			#{confirmOrder},
+			#{scheduled},
+			#{correlationId}
+		)
+	</insert>
+
+	<update id="updateOrder">
+
+	</update>
+
+
+</mapper>

src/main/resources/spring-context-shiro.xml

@@ -17,6 +17,7 @@
                 /static/** = anon
                 /userfiles/** = anon
                 ${adminPath}/weChatCallBack/** = anon
+                ${adminPath}//weXin/theOrder/** = anon
                 ${adminPath}/sys/user/infoCareStatus = anon
                 ${adminPath}/sys/user/validateLoginName = anon
                 ${adminPath}/sys/user/validateMobile = anon

src/main/webapp/webpage/modules/weixin/theorder/home.jsp

@@ -0,0 +1,280 @@
+<%@ page contentType="text/html;charset=UTF-8" %>
+<%@ include file="/webpage/include/taglib.jsp"%>
+<html>
+<head>
+    <title>全过程系统</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+    <meta content="yes" name="apple-mobile-web-app-capable">
+    <meta content="black" name="apple-mobile-web-app-status-bar-style">
+    <meta content="telephone=no" name="format-detection">
+    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui-for-work.min.css"/>
+    <%--<link rel="stylesheet" href="/static/weixin/style/weui.min.css">--%>
+    <link rel="stylesheet" href="${ctx}/static/weixin/example/example.css"/>
+</head>
+<style>
+</style>
+<body>
+<div class="container" id="container"></div>
+<div class="page">
+    <div class="page__hd">
+    </div>
+    <div class="page__bd page__bd_spacing">
+        <ul>
+            <li>
+                <div class="weui-flex js_category">
+                    <p class="weui-flex__item">全过程系统</p>
+                    <img src="/static/weixin/example/images/icon_nav_form.png" alt="">
+                </div>
+                <div class="page__category js_categoryInner">
+                    <div class="weui-cells page__category-content">
+                        <a class="weui-cell weui-cell_access js_item" data-id="button" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Button</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="input" href="${ctx}/wxMessage/messageController/departmentList">
+                            <div class="weui-cell__bd">
+                                <p>部门列表</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="list" href="${ctx}/wxMessage/messageController/contactList">
+                            <div class="weui-cell__bd">
+                                <p>联系人列表</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="slider" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Slider</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="uploader" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Uploader</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="weui-flex js_category">
+                    <p class="weui-flex__item">基础组件</p>
+                    <img src="/static/weixin/example/images/icon_nav_layout.png" alt="">
+                </div>
+                <div class="page__category js_categoryInner">
+                    <div class="weui-cells page__category-content">
+                        <a class="weui-cell weui-cell_access js_item" data-id="article" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Article</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="badge" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Badge</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="flex" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Flex</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="footer" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Footer</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="gallery" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Gallery</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="grid" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Grid</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="icons" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Icons</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="loadmore" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Loadmore</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="panel" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Panel</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="preview" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Preview</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="progress" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Progress</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="weui-flex js_category">
+                    <p class="weui-flex__item">操作反馈</p>
+                    <img src="/static/weixin/example/images/icon_nav_feedback.png" alt="">
+                </div>
+                <div class="page__category js_categoryInner">
+                    <div class="weui-cells page__category-content">
+                        <a class="weui-cell weui-cell_access js_item" data-id="actionsheet" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Actionsheet</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="dialog" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Dialog</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="msg" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Msg</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="picker" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Picker</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="toast" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Toast</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="weui-flex js_category">
+                    <p class="weui-flex__item">导航相关</p>
+                    <img src="/static/weixin/example/images/icon_nav_nav.png" alt="">
+                </div>
+                <div class="page__category js_categoryInner">
+                    <div class="weui-cells page__category-content">
+                        <a class="weui-cell weui-cell_access js_item" data-id="navbar" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Navbar</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                        <a class="weui-cell weui-cell_access js_item" data-id="tabbar" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Tabbar</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="weui-flex js_category">
+                    <p class="weui-flex__item">搜索相关</p>
+                    <img src="${ctx}/static/weixin/example/images/icon_nav_search.png" alt="">
+                </div>
+                <div class="page__category js_categoryInner">
+                    <div class="weui-cells page__category-content">
+                        <a class="weui-cell weui-cell_access js_item" data-id="searchbar" href="javascript:;">
+                            <div class="weui-cell__bd">
+                                <p>Search Bar</p>
+                            </div>
+                            <div class="weui-cell__ft"></div>
+                        </a>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="weui-flex js_item" data-id="layers">
+                    <p class="weui-flex__item">层级规范</p>
+                    <img src="${ctx}/static/weixin/example/images/icon_nav_z-index.png" alt="">
+                </div>
+            </li>
+        </ul>
+    </div>
+    <div class="page__ft">
+        <a href="javascript:home()"><img src="${ctx}/static/weixin/example/images/icon_footer.png" /></a>
+    </div>
+</div>
+</body>
+<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">W</script>
+<script src="${ctx}/static/weixin/example/zepto.min.js"></script>
+<script type="text/javascript" src="${ctx}/static/weixin/style/jweixin-1.0.0.js"></script>
+<script src="${ctx}/static/weixin/style/weui.js"></script>
+<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
+<script src="${ctx}/static/weixin/example/example.js"></script>
+<script type="text/javascript">
+    $(function(){
+        var winH = $(window).height();
+        var categorySpace = 10;
+
+        $('.js_item').on('click', function(){
+            var id = $(this).data('id');
+            window.pageManager.go(id);
+        });
+        $('.js_category').on('click', function(){
+            var $this = $(this),
+                $inner = $this.next('.js_categoryInner'),
+                $page = $this.parents('.page'),
+                $parent = $(this).parent('li');
+            var innerH = $inner.data('height');
+            bear = $page;
+
+            if(!innerH){
+                $inner.css('height', 'auto');
+                innerH = $inner.height();
+                $inner.removeAttr('style');
+                $inner.data('height', innerH);
+            }
+
+            if($parent.hasClass('js_show')){
+                $parent.removeClass('js_show');
+            }else{
+                $parent.siblings().removeClass('js_show');
+
+                $parent.addClass('js_show');
+                if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
+                    var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;
+
+                    if(scrollTop > this.offsetTop){
+                        scrollTop = this.offsetTop - categorySpace;
+                    }
+
+                    $page.scrollTop(scrollTop);
+                }
+            }
+        });
+    });
+</script>
+</html>