调整

shop/src/main/java/com/zskk/shop/controller/admin/BannerController.java

@@ -0,0 +1,58 @@
+/**
+* @版权信息 (@copyright Copyright 2017-XXXX JDJR.COM All Right Reserved);
+* @see
+* @author 于海涛 京东金融【技术研发部-证券及营销平台研发部-营销平台研发部】
+* @version 1.0
+* @date 2018年7月3日
+*/
+
+package com.zskk.shop.controller.admin;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+
+import com.zskk.shop.controller.AbstractController;
+import com.zskk.shop.controller.bean.ControllerResult;
+import com.zskk.shop.service.BannerService;
+
+@Controller
+@RequestMapping("/manage/banner")
+public class BannerController extends AbstractController {
+
+	@Autowired
+	private BannerService bannerService;
+	
+	@RequestMapping("/list")
+	@ResponseBody
+	public ControllerResult list(){
+		return new ControllerResult(bannerService.queryAllOnline());
+	}
+	
+	@RequestMapping("/get")
+	@ResponseBody
+	public ControllerResult get(@RequestParam("id") Integer id){
+		return new ControllerResult(bannerService.getOne(id));
+	}
+	
+	@RequestMapping("/save")
+	@ResponseBody
+	public ControllerResult save(@RequestParam("id") Integer id, @RequestParam("title") String title, 
+			@RequestParam("icon") String icon, @RequestParam("url") String url){
+		if (id.equals(0)){
+			bannerService.addBanner(title, icon, url);
+		}else{
+			bannerService.update(id, title, icon, url);
+		}
+		return new ControllerResult(Boolean.TRUE);
+	}
+	
+	@RequestMapping("/setstatus")
+	@ResponseBody
+	public ControllerResult setstatus(@RequestParam("id") Integer id, @RequestParam("status") Integer status){
+		return new ControllerResult(bannerService.setStatus(id, status));
+	}
+
+}

shop/src/main/java/com/zskk/shop/controller/h5/H5IndexController.java

@@ -62,7 +62,7 @@ public class H5IndexController extends AbstractController {
 		model.addAttribute("labels", labels);
 		model.addAttribute("banners", banners);
 		
-		return "/h5/index";
+		return "/h5/indexv2";
 	}
 	
 	@RequestMapping("/detail/{gid}")

shop/src/main/java/com/zskk/shop/dao/BannerMapper.java

@@ -17,7 +17,11 @@ public interface BannerMapper {
 	
 	public List<Banner> queryAllBanners();
 	
+	public Banner queryOneBanner(Integer id);
+	
 	public void addBanner(Banner banner);
 	
-	public void offlineBanner(Banner banner);
+	public int updateBanner(Banner banner);
+	
+	public void setStatus(Banner banner);
 }

shop/src/main/java/com/zskk/shop/dao/entry/Banner.java

@@ -11,6 +11,7 @@ package com.zskk.shop.dao.entry;
 public class Banner {
 	private Integer id;
 	private String title;
+	private String icon;
 	private String url;
 	private Integer status;
 	private Integer ctime;
@@ -44,4 +45,10 @@ public class Banner {
 	public void setCtime(Integer ctime) {
 		this.ctime = ctime;
 	}
+	public String getIcon() {
+		return icon;
+	}
+	public void setIcon(String icon) {
+		this.icon = icon;
+	}
 }

shop/src/main/java/com/zskk/shop/service/BannerService.java

@@ -17,6 +17,8 @@ import org.springframework.stereotype.Service;
 import com.zskk.shop.controller.bean.BannerBean;
 import com.zskk.shop.dao.BannerMapper;
 import com.zskk.shop.dao.entry.Banner;
+import com.zskk.shop.exception.ErrorConstant;
+import com.zskk.shop.exception.ZSKKException;
 import com.zskk.shop.utils.ToolsUtil;
 
 /**
@@ -56,22 +58,54 @@ public class BannerService {
 		return bannerMapper.queryOnlineBanners();
 	}
 	
+	/**
+	 * 获取单个banner
+	 * @param id
+	 * @return
+	 */
+	public Banner getOne(Integer id){
+		return bannerMapper.queryOneBanner(id);
+	}
+	
 	/**
 	 * 添加banner
 	 * @param title
 	 * @param url
 	 * @return
 	 */
-	public Banner addBanner(String title, String url){
+	public Banner addBanner(String title, String icon, String url){
 		Banner banner = new Banner();
 		banner.setCtime(ToolsUtil.getNow());
-		banner.setStatus(BANNER_STATUS_ONLINE);
+		banner.setStatus(BANNER_STATUS_OFFLINE);
 		banner.setTitle(title);
+		banner.setIcon(icon);
 		banner.setUrl(url);
 		bannerMapper.addBanner(banner);
 		return banner;
 	}
 	
+	public Banner update(Integer id, String title, String icon, String url){
+		Banner banner = this.getOne(id);
+		if (banner == null){
+			throw new ZSKKException(ErrorConstant.PARAM_ERROR);
+		}
+		banner.setTitle(title);
+		banner.setIcon(icon);
+		banner.setUrl(url);
+		bannerMapper.updateBanner(banner);
+		return banner;
+	}
+	
+	public Banner setStatus(Integer id, Integer status){
+		Banner banner = this.getOne(id);
+		if (banner == null){
+			throw new ZSKKException(ErrorConstant.PARAM_ERROR);
+		}
+		banner.setStatus(status);
+		bannerMapper.updateBanner(banner);
+		return banner;
+	}
+	
 	/**
 	 * 类型转换
 	 * @param list

shop/src/main/resource/mapper/BannerMapper.xml

@@ -2,7 +2,7 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.zskk.shop.dao.BannerMapper">
 	<sql id="select">
-		id, title, url, status, ctime
+		id, title, icon, url, status, ctime
 	</sql>
 	<select id="queryOnlineBanners" resultType="com.zskk.shop.dao.entry.Banner">
 		select <include refid="select"></include>
@@ -15,12 +15,21 @@
 		from banner
 		order by id desc
 	</select>
+	<select id="queryOneBanner" resultType="com.zskk.shop.dao.entry.Banner">
+		select <include refid="select"></include>
+		from banner
+		where id=#{id}
+	</select>
 	
 	<insert id="addBanner" parameterType="com.zskk.shop.dao.entry.Banner">
-		insert into banner(id, title, url, status, ctime)
-		values(#{id}, #{title}, #{url}, #{status}, #{ctime})
+		insert into banner(id, title, icon, url, status, ctime)
+		values(#{id}, #{title}, #{icon}, #{url}, #{status}, #{ctime})
 	</insert>
-	<update id="offlineBanner">
-		update banner set status=0 where id=#{id}
+	<update id="updateBanner" parameterType="com.zskk.shop.dao.entry.Banner">
+		update banner set title=#{title},icon=#{icon},url=#{url}
+		where id=#{id}
+	</update>
+	<update id="setStatus" parameterType="com.zskk.shop.dao.entry.Banner">
+		update banner set status=#{status} where id=#{id}
 	</update>
 </mapper>

shop/src/main/resource/templates/h5/indexv2.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>昆仑医疗</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
+<link href="/h5/style/style.css" rel="stylesheet" />
+<script src="/h5/js/jquery-2.1.1.min.js"></script>
+<script src="/h5/js/nav.js"></script>
+</head>
+
+<body>
+	<!--顶部-->
+	<div class="index-top">
+    	<button class="l left"></button>
+        <div class="txt">
+        	<form id="searchForm" action="/h5/index" method="post">
+        		<input id="search" name="search" type="search" placeholder="搜索商品" />
+        	 </form>
+        </div>
+    </div>
+    <div class="bgDiv"></div>
+    <div class="leftNav">
+    	<h3>商品分类</h3>
+        <a href="/h5/index">全部</a>
+        <a th:each="label : ${labels}" th:attr="href='/h5/index?label=' + ${label.id}" th:text="${label.name}"></a>
+    </div>
+	<!--轮播-->
+	<style>
+	.relative { position: relative; left: 0; top: 0;}
+    .scroll { margin: 46px auto 0; max-width: 750px; height:180px; }
+    .scroll_box { overflow: hidden; visibility: hidden; position: relative; }
+    .scroll_wrap { overflow: hidden; position: relative; }
+    .scroll_wrap li { position: relative; display: block; width: 100%; float: left; }
+    .scroll_wrap li a { display: block; margin: 0 auto; position: relative; }
+    .scroll_position { position: absolute; left: 45%; z-index: 400px; bottom: 10px; }
+    .scroll_position li { display: inline-block; width: 5px; height: 5px; border-radius: 5px; margin-left: 3px; background: url(/h5/style/white_50_1x1.png); }
+    .scroll_position li a { font-size: 0; }
+    .scroll_position li.on { background-color: #FFF; }
+    </style>
+    <article>
+        <!--scroll-->
+        <div class="scroll relative">
+            <div class="scroll_box" id="scroll_img">
+                <ul class="scroll_wrap">
+                    <li>
+                        <a href="#"><img src="/h5/images/1.jpg" width="100%" /></a>
+                    </li>
+                    <li>
+                        <a href="#"><img src="/h5/images/2.jpg" width="100%" /></a>
+                    </li>
+                    <li>
+                        <a href="#"><img src="/h5/images/3.jpg" width="100%" /></a>
+                    </li>
+                </ul>
+            </div>
+            <div class="scroll_bottom_bg"></div>
+            <span class="scroll_position_bg opacity6"></span>
+            <ul class="scroll_position" id='scroll_position'>
+                <li class="on"><a href="javascript:void(0);">1</a></li>
+                <li><a href="javascript:void(0);">2</a></li>
+                <li><a href="javascript:void(0);">3</a></li>
+            </ul>
+        </div>
+        <!--scroll-->
+    </article>
+	<script src="js/jquery-2.1.1.min.js"></script>
+    <script src='js/hhSwipe.js'></script>
+    <script>
+        var slider = Swipe(document.getElementById('scroll_img'), {
+            auto: 3000,
+            continuous: true,
+            callback: function(pos) {
+                var i = bullets.length;
+                while (i--) {
+                    bullets[i].className = ' ';
+                }
+                bullets[pos].className = 'on';
+            }
+        });
+        var bullets = document.getElementById('scroll_position').getElementsByTagName('li');
+        $(function() {
+            $('.scroll_position_bg').css({
+                width: $('#scroll_position').width()
+            });
+        });
+    </script>
+	<!--公告-->
+    <a href="#" class="notice">新春放假通知</a>
+    <div class="line-1-EEE ml10 mr10"></div>
+	<!--入口-->
+    <ul class="nav ml10 mr10">
+    	<li><a href="/h5/index"><img src="style/index-tj-icon.png" /><p>体检套餐</p></a></li>
+        <li><a href="/h5/index"><img src="style/index-yx-icon.png" /><p>影像检查</p></a></li>
+        <li><a href="/h5/buy/completedorders"><img src="style/index-bg-icon.png" /><p>报告查询</p></a></li>
+        <li><a href="/h5/buy/mypayedorders"><img src="style/index-yy-icon.png" /><p>我的预约</p></a></li>
+    </ul>
+    <div class="line-10-EEE"></div>
+	<!--热销-->
+    <div class="v-list">
+        <div class="t">热销体检套餐</div>
+       <a th:each="bean : ${beans}" th:attr="href='/h5/detail/' + ${bean.gid}">
+            <div class="img l mr10"><img th:attr="src=${bean.icon}"/></div>
+            <dl>
+                <dt th:text="${bean.name}"></dt>
+                <dd th:text="${bean.describe}"></dd>
+                <span class="price-new l">
+                	<em>¥</em>
+                	<span th:text="${bean.price.discountPrice}"></span>
+                </span>
+            </dl>
+        </a>
+        
+    </div>
+	<!--底部-->
+    <div style="height:60px; "></div>
+	<table class="n-tab">
+    	<tr>
+        	<td><a href="/h5/index" class="n-1-c">首页</a></td>
+            <td><a href="/h5/buy/completedorders" class="n-2">报告</a></td>
+            <td><a href="#" class="n-3">我的</a></td>
+        </tr>
+    </table>
+</body>
+</html>

shop/static/h5/indexv2.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>昆仑医疗</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
+<link href="style/style.css" rel="stylesheet" />
+<script src="js/jquery-2.1.1.min.js"></script>
+<script src="js/nav.js"></script>
+</head>
+
+<body>
+	<!--顶部-->
+	<div class="index-top">
+    	<button class="l left"></button>
+        <div class="txt"><input name="" type="search" placeholder="搜索商品" /></div>
+    </div>
+    <div class="bgDiv"></div>
+    <div class="leftNav">
+    	<h3>商品分类</h3>
+        <a href="#">全部</a>
+        <a href="#">医技检查</a>
+        <a href="#">商务礼品卡</a>
+        <a href="#">商务体检套餐</a>
+        <a href="#">全部</a>
+        <a href="#">医技检查</a>
+        <a href="#">商务礼品卡</a>
+    </div>
+	<!--轮播-->
+	<style>
+	.relative { position: relative; left: 0; top: 0;}
+    .scroll { margin: 46px auto 0; max-width: 750px; height:180px; }
+    .scroll_box { overflow: hidden; visibility: hidden; position: relative; }
+    .scroll_wrap { overflow: hidden; position: relative; }
+    .scroll_wrap li { position: relative; display: block; width: 100%; float: left; }
+    .scroll_wrap li a { display: block; margin: 0 auto; position: relative; }
+    .scroll_position { position: absolute; left: 45%; z-index: 400px; bottom: 10px; }
+    .scroll_position li { display: inline-block; width: 5px; height: 5px; border-radius: 5px; margin-left: 3px; background: url(style/white_50_1x1.png); }
+    .scroll_position li a { font-size: 0; }
+    .scroll_position li.on { background-color: #FFF; }
+    </style>
+    <article>
+        <!--scroll-->
+        <div class="scroll relative">
+            <div class="scroll_box" id="scroll_img">
+                <ul class="scroll_wrap">
+                    <li>
+                        <a href="#"><img src="images/1.jpg" width="100%" /></a>
+                    </li>
+                    <li>
+                        <a href="#"><img src="images/2.jpg" width="100%" /></a>
+                    </li>
+                    <li>
+                        <a href="#"><img src="images/3.jpg" width="100%" /></a>
+                    </li>
+                </ul>
+            </div>
+            <div class="scroll_bottom_bg"></div>
+            <span class="scroll_position_bg opacity6"></span>
+            <ul class="scroll_position" id='scroll_position'>
+                <li class="on"><a href="javascript:void(0);">1</a></li>
+                <li><a href="javascript:void(0);">2</a></li>
+                <li><a href="javascript:void(0);">3</a></li>
+            </ul>
+        </div>
+        <!--scroll-->
+    </article>
+	<script src="js/jquery-2.1.1.min.js"></script>
+    <script src='js/hhSwipe.js'></script>
+    <script>
+        var slider = Swipe(document.getElementById('scroll_img'), {
+            auto: 3000,
+            continuous: true,
+            callback: function(pos) {
+                var i = bullets.length;
+                while (i--) {
+                    bullets[i].className = ' ';
+                }
+                bullets[pos].className = 'on';
+            }
+        });
+        var bullets = document.getElementById('scroll_position').getElementsByTagName('li');
+        $(function() {
+            $('.scroll_position_bg').css({
+                width: $('#scroll_position').width()
+            });
+        });
+    </script>
+	<!--公告-->
+    <a href="#" class="notice">新春放假通知</a>
+    <div class="line-1-EEE ml10 mr10"></div>
+	<!--入口-->
+    <ul class="nav ml10 mr10">
+    	<li><a href="##"><img src="style/index-tj-icon.png" /><p>体检套餐</p></a></li>
+        <li><a href="##"><img src="style/index-yx-icon.png" /><p>影像检查</p></a></li>
+        <li><a href="##"><img src="style/index-bg-icon.png" /><p>报告查询</p></a></li>
+        <li><a href="##"><img src="style/index-yy-icon.png" /><p>我的预约</p></a></li>
+    </ul>
+    <div class="line-10-EEE"></div>
+	<!--热销-->
+    <div class="v-list">
+        <div class="t">热销体检套餐</div>
+        <a href="#">
+            <div class="img l mr10"><img src="" /></div>
+            <dl>
+                <dt>白领高级体检套餐</dt>
+                <dd>重点检查心重点检查心脏重点检查心脏重点检查心脏脏、胰</dd>
+                <span class="price-new l"><em>¥</em>500</span>
+            </dl>
+        </a>
+        <a href="#">
+            <div class="img l mr10"><img src="" /></div>
+            <dl>
+                <dt>白领高级体检套餐</dt>
+                <dd>重点检查心检查心脏脏、胰</dd>
+                <span class="price-new l"><em>¥</em>500</span>
+            </dl>
+        </a>
+        <a href="#">
+            <div class="img l mr10"><img src="" /></div>
+            <dl>
+                <dt>白领高级体检套餐</dt>
+                <dd>重点检查心重点检查心脏重点检查心脏重点检查心脏脏、胰</dd>
+                <span class="price-new l"><em>¥</em>500</span>
+            </dl>
+        </a>
+        <a href="#">
+            <div class="img l mr10"><img src="" /></div>
+            <dl>
+                <dt>白领高级体检套餐</dt>
+                <dd>重点检查心重点检查心脏重点检查心脏重点检查心脏脏、胰</dd>
+                <span class="price-new l"><em>¥</em>500</span>
+            </dl>
+        </a>
+        <a href="#">
+            <div class="img l mr10"><img src="" /></div>
+            <dl>
+                <dt>白领高级体检套餐</dt>
+                <dd>重点检查心重点检查心脏重点检查心脏重点检查心脏脏、胰</dd>
+                <span class="price-new l"><em>¥</em>500</span>
+            </dl>
+        </a>
+        <a href="#">
+            <div class="img l mr10"><img src="" /></div>
+            <dl>
+                <dt>白领高级体检套餐</dt>
+                <dd>重点检查心重点检查心脏重点检查心脏重点检查心脏脏、胰</dd>
+                <span class="price-new l"><em>¥</em>500</span>
+            </dl>
+        </a>
+        
+    </div>
+	<!--底部-->
+    <div style="height:60px; "></div>
+	<table class="n-tab">
+    	<tr>
+        	<td><a href="#" class="n-1-c">首页</a></td>
+            <td><a href="#" class="n-2">报告</a></td>
+            <td><a href="#" class="n-3">我的</a></td>
+        </tr>
+    </table>
+</body>
+</html>

shop/static/h5/js/hhSwipe.js

@@ -0,0 +1,556 @@
+function Swipe(container, options) {
+
+  "use strict";
+
+  // utilities
+  var noop = function() {}; // simple no operation function
+  var offloadFn = function(fn) { setTimeout(fn || noop, 0) }; // offload a functions execution
+  
+  // check browser capabilities
+  var browser = {
+    addEventListener: !!window.addEventListener,
+    touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
+    transitions: (function(temp) {
+      var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition'];
+      for ( var i in props ) if (temp.style[ props[i] ] !== undefined) return true;
+      return false;
+    })(document.createElement('swipe'))
+  };
+
+  // quit if no root element
+  if (!container) return;
+  var element = container.children[0];
+  var slides, slidePos, width, length;
+  options = options || {};
+  var index = parseInt(options.startSlide, 10) || 0;
+  var speed = options.speed || 300;
+  options.continuous = options.continuous !== undefined ? options.continuous : true;
+
+  function setup() {
+
+    // cache slides
+    slides = element.children;
+    length = slides.length;
+
+    // set continuous to false if only one slide
+    if (slides.length < 2) options.continuous = false;
+
+    //special case if two slides
+    if (browser.transitions && options.continuous && slides.length < 3) {
+      element.appendChild(slides[0].cloneNode(true));
+      element.appendChild(element.children[1].cloneNode(true));
+      slides = element.children;
+    }
+
+    // create an array to store current positions of each slide
+    slidePos = new Array(slides.length);
+
+    // determine width of each slide
+    width = container.getBoundingClientRect().width || container.offsetWidth;
+
+    element.style.width = (slides.length * width) + 'px';
+
+    // stack elements
+    var pos = slides.length;
+    while(pos--) {
+
+      var slide = slides[pos];
+
+      slide.style.width = width + 'px';
+      slide.setAttribute('data-index', pos);
+
+      if (browser.transitions) {
+        slide.style.left = (pos * -width) + 'px';
+        move(pos, index > pos ? -width : (index < pos ? width : 0), 0);
+      }
+
+    }
+
+    // reposition elements before and after index
+    if (options.continuous && browser.transitions) {
+      move(circle(index-1), -width, 0);
+      move(circle(index+1), width, 0);
+    }
+
+    if (!browser.transitions) element.style.left = (index * -width) + 'px';
+
+    container.style.visibility = 'visible';
+
+  }
+
+  function prev() {
+
+    if (options.continuous) slide(index-1);
+    else if (index) slide(index-1);
+
+  }
+
+  function next() {
+
+    if (options.continuous) slide(index+1);
+    else if (index < slides.length - 1) slide(index+1);
+
+  }
+
+  function circle(index) {
+
+    // a simple positive modulo using slides.length
+    return (slides.length + (index % slides.length)) % slides.length;
+
+  }
+
+  function slide(to, slideSpeed) {
+
+    // do nothing if already on requested slide
+    if (index == to) return;
+    
+    if (browser.transitions) {
+
+      var direction = Math.abs(index-to) / (index-to); // 1: backward, -1: forward
+
+      // get the actual position of the slide
+      if (options.continuous) {
+        var natural_direction = direction;
+        direction = -slidePos[circle(to)] / width;
+
+        // if going forward but to < index, use to = slides.length + to
+        // if going backward but to > index, use to = -slides.length + to
+        if (direction !== natural_direction) to =  -direction * slides.length + to;
+
+      }
+
+      var diff = Math.abs(index-to) - 1;
+
+      // move all the slides between index and to in the right direction
+      while (diff--) move( circle((to > index ? to : index) - diff - 1), width * direction, 0);
+            
+      to = circle(to);
+
+      move(index, width * direction, slideSpeed || speed);
+      move(to, 0, slideSpeed || speed);
+
+      if (options.continuous) move(circle(to - direction), -(width * direction), 0); // we need to get the next in place
+      
+    } else {     
+      
+      to = circle(to);
+      animate(index * -width, to * -width, slideSpeed || speed);
+      //no fallback for a circular continuous if the browser does not accept transitions
+    }
+
+    index = to;
+    offloadFn(options.callback && options.callback(index, slides[index]));
+  }
+
+  function move(index, dist, speed) {
+
+    translate(index, dist, speed);
+    slidePos[index] = dist;
+
+  }
+
+  function translate(index, dist, speed) {
+
+    var slide = slides[index];
+    var style = slide && slide.style;
+
+    if (!style) return;
+
+    style.webkitTransitionDuration = 
+    style.MozTransitionDuration = 
+    style.msTransitionDuration = 
+    style.OTransitionDuration = 
+    style.transitionDuration = speed + 'ms';
+
+    style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
+    style.msTransform = 
+    style.MozTransform = 
+    style.OTransform = 'translateX(' + dist + 'px)';
+
+  }
+
+  function animate(from, to, speed) {
+
+    // if not an animation, just reposition
+    if (!speed) {
+
+      element.style.left = to + 'px';
+      return;
+
+    }
+    
+    var start = +new Date;
+    
+    var timer = setInterval(function() {
+
+      var timeElap = +new Date - start;
+      
+      if (timeElap > speed) {
+
+        element.style.left = to + 'px';
+
+        if (delay) begin();
+
+        options.transitionEnd && options.transitionEnd.call(event, index, slides[index]);
+
+        clearInterval(timer);
+        return;
+
+      }
+
+      element.style.left = (( (to - from) * (Math.floor((timeElap / speed) * 100) / 100) ) + from) + 'px';
+
+    }, 4);
+
+  }
+
+  // setup auto slideshow
+  var delay = options.auto || 0;
+  var interval;
+
+  function begin() {
+
+    interval = setTimeout(next, delay);
+
+  }
+
+  function stop() {
+
+    delay = 0;
+    clearTimeout(interval);
+
+  }
+
+
+  // setup initial vars
+  var start = {};
+  var delta = {};
+  var isScrolling;      
+
+  // setup event capturing
+  var events = {
+
+    handleEvent: function(event) {
+
+      switch (event.type) {
+        case 'touchstart': this.start(event); break;
+        case 'touchmove': this.move(event); break;
+        case 'touchend': offloadFn(this.end(event)); break;
+        case 'webkitTransitionEnd':
+        case 'msTransitionEnd':
+        case 'oTransitionEnd':
+        case 'otransitionend':
+        case 'transitionend': offloadFn(this.transitionEnd(event)); break;
+        case 'resize': offloadFn(setup.call()); break;
+      }
+
+      if (options.stopPropagation) event.stopPropagation();
+
+    },
+    start: function(event) {
+
+      var touches = event.touches[0];
+
+      // measure start values
+      start = {
+
+        // get initial touch coords
+        x: touches.pageX,
+        y: touches.pageY,
+
+        // store time to determine touch duration
+        time: +new Date
+
+      };
+      
+      // used for testing first move event
+      isScrolling = undefined;
+
+      // reset delta and end measurements
+      delta = {};
+
+      // attach touchmove and touchend listeners
+      element.addEventListener('touchmove', this, false);
+      element.addEventListener('touchend', this, false);
+
+    },
+    move: function(event) {
+
+      // ensure swiping with one touch and not pinching
+      if ( event.touches.length > 1 || event.scale && event.scale !== 1) return
+
+      if (options.disableScroll) event.preventDefault();
+
+      var touches = event.touches[0];
+
+      // measure change in x and y
+      delta = {
+        x: touches.pageX - start.x,
+        y: touches.pageY - start.y
+      }
+
+      // determine if scrolling test has run - one time test
+      if ( typeof isScrolling == 'undefined') {
+        isScrolling = !!( isScrolling || Math.abs(delta.x) < Math.abs(delta.y) );
+      }
+
+      // if user is not trying to scroll vertically
+      if (!isScrolling) {
+
+        // prevent native scrolling 
+        event.preventDefault();
+
+        // stop slideshow
+        stop();
+
+        // increase resistance if first or last slide
+        if (options.continuous) { // we don't add resistance at the end
+
+          translate(circle(index-1), delta.x + slidePos[circle(index-1)], 0);
+          translate(index, delta.x + slidePos[index], 0);
+          translate(circle(index+1), delta.x + slidePos[circle(index+1)], 0);
+
+        } else {
+
+          delta.x = 
+            delta.x / 
+              ( (!index && delta.x > 0               // if first slide and sliding left
+                || index == slides.length - 1        // or if last slide and sliding right
+                && delta.x < 0                       // and if sliding at all
+              ) ?                      
+              ( Math.abs(delta.x) / width + 1 )      // determine resistance level
+              : 1 );                                 // no resistance if false
+          
+          // translate 1:1
+          translate(index-1, delta.x + slidePos[index-1], 0);
+          translate(index, delta.x + slidePos[index], 0);
+          translate(index+1, delta.x + slidePos[index+1], 0);
+        }
+
+      }
+
+    },
+    end: function(event) {
+
+      // measure duration
+      var duration = +new Date - start.time;
+
+      // determine if slide attempt triggers next/prev slide
+      var isValidSlide = 
+            Number(duration) < 250               // if slide duration is less than 250ms
+            && Math.abs(delta.x) > 20            // and if slide amt is greater than 20px
+            || Math.abs(delta.x) > width/2;      // or if slide amt is greater than half the width
+
+      // determine if slide attempt is past start and end
+      var isPastBounds = 
+            !index && delta.x > 0                            // if first slide and slide amt is greater than 0
+            || index == slides.length - 1 && delta.x < 0;    // or if last slide and slide amt is less than 0
+
+      if (options.continuous) isPastBounds = false;
+      
+      // determine direction of swipe (true:right, false:left)
+      var direction = delta.x < 0;
+
+      // if not scrolling vertically
+      if (!isScrolling) {
+
+        if (isValidSlide && !isPastBounds) {
+
+          if (direction) {
+
+            if (options.continuous) { // we need to get the next in this direction in place
+
+              move(circle(index-1), -width, 0);
+              move(circle(index+2), width, 0);
+
+            } else {
+              move(index-1, -width, 0);
+            }
+
+            move(index, slidePos[index]-width, speed);
+            move(circle(index+1), slidePos[circle(index+1)]-width, speed);
+            index = circle(index+1);  
+                      
+          } else {
+            if (options.continuous) { // we need to get the next in this direction in place
+
+              move(circle(index+1), width, 0);
+              move(circle(index-2), -width, 0);
+
+            } else {
+              move(index+1, width, 0);
+            }
+
+            move(index, slidePos[index]+width, speed);
+            move(circle(index-1), slidePos[circle(index-1)]+width, speed);
+            index = circle(index-1);
+
+          }
+
+          options.callback && options.callback(index, slides[index]);
+
+        } else {
+
+          if (options.continuous) {
+
+            move(circle(index-1), -width, speed);
+            move(index, 0, speed);
+            move(circle(index+1), width, speed);
+
+          } else {
+
+            move(index-1, -width, speed);
+            move(index, 0, speed);
+            move(index+1, width, speed);
+          }
+
+        }
+
+      }
+
+      // kill touchmove and touchend event listeners until touchstart called again
+      element.removeEventListener('touchmove', events, false)
+      element.removeEventListener('touchend', events, false)
+
+    },
+    transitionEnd: function(event) {
+
+      if (parseInt(event.target.getAttribute('data-index'), 10) == index) {
+        
+        if (delay) begin();
+
+        options.transitionEnd && options.transitionEnd.call(event, index, slides[index]);
+
+      }
+
+    }
+
+  }
+
+  // trigger setup
+  setup();
+
+  // start auto slideshow if applicable
+  if (delay) begin();
+
+
+  // add event listeners
+  if (browser.addEventListener) {
+    
+    // set touchstart event on element    
+    if (browser.touch) element.addEventListener('touchstart', events, false);
+
+    if (browser.transitions) {
+      element.addEventListener('webkitTransitionEnd', events, false);
+      element.addEventListener('msTransitionEnd', events, false);
+      element.addEventListener('oTransitionEnd', events, false);
+      element.addEventListener('otransitionend', events, false);
+      element.addEventListener('transitionend', events, false);
+    }
+
+    // set resize event on window
+    window.addEventListener('resize', events, false);
+
+  } else {
+
+    window.onresize = function () { setup() }; // to play nice with old IE
+
+  }
+
+  // expose the Swipe API
+  return {
+    setup: function() {
+
+      setup();
+
+    },
+    slide: function(to, speed) {
+      
+      // cancel slideshow
+      stop();
+      
+      slide(to, speed);
+
+    },
+    prev: function() {
+
+      // cancel slideshow
+      stop();
+
+      prev();
+
+    },
+    next: function() {
+
+      // cancel slideshow
+      stop();
+
+      next();
+
+    },
+    getPos: function() {
+
+      // return current index position
+      return index;
+
+    },
+    getNumSlides: function() {
+      
+      // return total number of slides
+      return length;
+    },
+    kill: function() {
+
+      // cancel slideshow
+      stop();
+
+      // reset element
+      element.style.width = 'auto';
+      element.style.left = 0;
+
+      // reset slides
+      var pos = slides.length;
+      while(pos--) {
+
+        var slide = slides[pos];
+        slide.style.width = '100%';
+        slide.style.left = 0;
+
+        if (browser.transitions) translate(pos, 0, 0);
+
+      }
+
+      // removed event listeners
+      if (browser.addEventListener) {
+
+        // remove current event listeners
+        element.removeEventListener('touchstart', events, false);
+        element.removeEventListener('webkitTransitionEnd', events, false);
+        element.removeEventListener('msTransitionEnd', events, false);
+        element.removeEventListener('oTransitionEnd', events, false);
+        element.removeEventListener('otransitionend', events, false);
+        element.removeEventListener('transitionend', events, false);
+        window.removeEventListener('resize', events, false);
+
+      }
+      else {
+
+        window.onresize = null;
+
+      }
+
+    }
+  }
+
+}
+
+
+if ( window.jQuery || window.Zepto ) {
+  (function($) {
+    $.fn.Swipe = function(params) {
+      return this.each(function() {
+        $(this).data('Swipe', new Swipe($(this)[0], params));
+      });
+    }
+  })( window.jQuery || window.Zepto )
+}

shop/static/h5/newEdit.html

@@ -8,12 +8,54 @@
 </head>
 
 <body>
-	<div class="v-form">
+	<dl class="registerBar">
+    	<img src="style/Register_bar2.png" />
+    	<dt>套餐详情</dt>
+        <dt>体检信息</dt>
+        <dd>完成预约</dd>
+    </dl>
+    <div class="registerPost">
+    	<form>
+            <h6>选择体检人:</h6>
+            <table><tr><td>
+                <input name="creat" type="radio" value="" id="tj0" class="radio" checked="checked" /><label for="tj0">新建体检人</label>
+                <input name="creat" type="radio" value="" id="tj1" class="radio" /><label for="tj1">王美丽</label>
+			</td></tr></table>
+            <h6>体检人证件号:</h6>
+            <table><tr>
+            	<td style="width:100px; "><div class="box mr10"><select name=""><option>身份证</option><option>护照号</option></select></div></td>
+                <td><div class="box"><input name="" type="text" /></div></td>
+			</tr></table>
+            <h6>姓名:</h6>
+            <table><tr><td>
+                <div class="box"><input name="" type="text" /></div>
+            </td></tr></table>
+            <h6>性别:</h6>
+            <table><tr><td>
+                <input name="sex" type="radio" class="radio" id="n" value="" checked="checked" /><label for="n">男</label>
+                <input name="sex" type="radio" value="" id="v" class="radio" /><label for="v">女</label>
+            </td></tr></table>
+            <h6>手机号码:</h6>
+            <table><tr><td>
+				<div class="box"><input name="" type="tel" /></div>
+            </td></tr></table>
+            <h6>体检日期及时间:</h6>
+            <table>
+            	<tr><td><div class="box"><input name="" type="date" /></div></td></tr>
+                <tr><td><div class="box mt10"><select name=""><option></option><option>8:00</option><option>8:30</option></select></div></td></tr>
+            </table>
+            <div class="h100"></div>
+			<div class="registerBottom"><a href="###" class="last">上一步</a><a href="###" class="next">下一步</a></div>
+		</form>
+	</div>
+    
+    
+	<!--<div class="v-form">
     	<dl><dt>体检人</dt><dd><div><input name="" type="text" class="txt" /></div></dd></dl>
         <dl><dt>性别</dt><dd><div><input name="" type="radio" value="" /><label>男</label><input name="" type="radio" value="" /><label>女</label></div></dd></dl>
         <dl><dt>身份证号</dt><dd><div><input name="" type="text" class="txt" /></div></dd></dl>
         <dl><dt>手机号</dt><dd><div><input name="" type="text" class="txt" /></div></dd></dl>
         <dl><dt>体检时间</dt><dd><div><input name="" type="date" class="txt" /></div></dd></dl>
-    </div>
+    </div>-->
 </body>
 </html>

shop/static/h5/style/style.css

@@ -22,12 +22,12 @@ a{ text-decoration:none; }
 .line-1-EEE{ height:1px; background-color:#EEE; }
 
 /*首页顶部*/
-.index-top{ width:100%; height:46px; position:fixed; top:0; left:0; background-color:#FFF; box-shadow:0 1px 1px rgba(0,0,0,.1); }
+.index-top{ width:100%; height:46px; position:fixed; top:0; left:0; background-color:#FFF; box-shadow:0 1px 1px rgba(0,0,0,.1); z-index:9999; }
 .index-top button{ width:28px; height:28px; margin:9px 6px; border:none; background:url(class-icon.png) no-repeat; background-size:28px; cursor:pointer; border-radius:2px; }
 .index-top .txt{ overflow:hidden; padding-left:30px; margin:8px 6px 8px 0; background:url(index-top-f.png) no-repeat left #EEE; background-size:30px; height:30px; border-radius:14px; }
 .index-top .txt input{ width:100%; height:30px; line-height:30px; font-size:1rem; border:none; background-color:transparent; }
 .bgDiv{ width: 100%; height: 100%; background-color:#000; opacity:.5; position:fixed; display: none; z-index: 99; bottom: 0; }
-.leftNav{ width: 70%; max-width: 500px; height: 200%; background-color: #fff; position: fixed; z-index: 999; top: 0; left: -70%; }
+.leftNav{ width: 70%; max-width: 500px; height: 200%; background-color: #fff; position: fixed; z-index: 99999; top: 0; left: -70%; }
 .leftNav h3{ font-size:1rem; color:#D83F31; margin:10px 5%; }
 .leftNav a{ width:90%; margin:0 5%; height:50px; line-height:50px; display:inline-block; border-bottom:1px solid #F6F6F6; font-size:1rem; background:url(index-list-m.png) no-repeat center right; padding-left:10px; color:#777; background-size:10px; }
 /*公告*/
@@ -98,7 +98,7 @@ a{ text-decoration:none; }
 .shopOrder .li{ display:block; overflow:hidden; padding:15px; border-bottom:.5px solid #EEE; background-color:#FFF; }
 .shopOrder img{ height:50px; float:left; margin-right:15px; }
 .shopOrder .title{ width:80%; }
-.shopOrder .title h3{ margin-bottom:5px; font-size:.9rem; color:#666;overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
+.shopOrder .title h3{ margin-bottom:5px; font-size:.9rem; color:#666; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
 .shopOrder .title span{ color:#BBB; }
 .shopOrder .price{ float:right; line-height:50px; color:#666; }
 .shopOrder p{ border-top:.5px solid #EEE; overflow:hidden; padding:5px 15px; background-color:#FFF; text-align:right; }
@@ -133,4 +133,27 @@ a{ text-decoration:none; }
 .registerPost .radio+label { -webkit-appearance: none; border: 1px solid #DCDCDC; height:46px; line-height:46px; padding:0 20px; border-radius: 2px; display: inline-block; position: relative; color: #666; box-shadow:2px 2px 5px #EEE inset; margin-bottom:10px; }
 .registerPost .radio:checked+label { color: #FFF; border: 1px solid #0DC6E4; background-color:#0DC6E4; box-shadow:none; }
 
+/*180702新增——我的*/
+.mine{}
+.mineH{ width:100%; height:120px; padding:0 15px; background-image:linear-gradient(to bottom right, #F4E1E1, #65D8EB); position:relative; }
+.mineH h1{ line-height:120px; font-size:1.6rem; color:#FFF; }
+.mineH span{ position:absolute; right:15px; bottom:15px; color:#FFF; }
+.mineNav{ width:100%; overflow:hidden; padding:10px 0; background-color:#FFF; }
+.mineNavL, .mineNavC, .mineNavR{ width:33.3%; float:left; text-align:center; }
+.mineNavC{ border-left:1px solid #DDD; border-right:1px solid #DDD; }
+.mineNavL em, .mineNavL span, .mineNavC em, .mineNavC span, .mineNavR em, .mineNavR span{ width:100%; text-align:center; display:inline-block; overflow:hidden; }
+.mineNavL em, .mineNavC em, .mineNavR em{ padding-bottom:3px; font-size:.8rem; color:#999; }
+.mineNavL span, .mineNavC span, .mineNavR span{ padding-top:3px; font-size:1.2rem; color:#000; }
+.mine ul{ display:block; margin:15px; background-color:#FFF; border-radius:4px; }
+.mine ul .yytj, .mine ul .bgcx, .mine ul .scdd, .mine ul .cjwt, .mine ul .xgmm{ display:block; height:50px; margin:0 12px; padding-left:36px; }
+.mine ul .yytj{ background:url(mine_yytj.png) no-repeat center left; background-size:28px; }
+.mine ul .bgcx{ background:url(mine_bgcx.png) no-repeat center left; background-size:28px; }
+.mine ul .scdd{ background:url(mine_scdd.png) no-repeat center left; background-size:28px; }
+.mine ul .cjwt{ background:url(mine_cjwt.png) no-repeat center left; background-size:28px; }
+.mine ul .xgmm{ background:url(mine_xgmm.png) no-repeat center left; background-size:28px; }
+.mine ul .yytj a{ border-bottom:.5px solid #DDD; }
+.mine ul .cjwt a{ border-bottom:.5px solid #DDD; }
+.mine ul li a{ display:block; height:50px; line-height:50px; color:#000; background:url(mine_more.png) right center no-repeat; background-size:12px; }
+.mine .tcdl{ display:block; height:50px; line-height:50px; text-align:center; text-decoration:none; margin:15px; background-color:#FFF; border-radius:4px; color:#666; }
+
 

shop/static/h5/新增-我的.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>我的</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
+<link href="style/style.css" rel="stylesheet" />
+<script src="js/jquery-2.1.1.min.js"></script>
+<script src="js/nav.js"></script>
+</head>
+
+<body style="background-color:#EEE; ">
+	<div class="mine">
+    	<div class="mineH">
+        	<h1>晚上好！</h1>
+            <span>188****3696</span>
+        </div>
+        <div class="mineNav">
+        	<div class="mineNavL"><em>商城订单</em><span>2</span></div>
+            <div class="mineNavC"><em>体检预约</em><span>0</span></div>
+            <div class="mineNavR"><em>我的报告</em><span>1</span></div>
+        </div>
+        <ul>
+        	<li class="yytj"><a href="####">预约体检</a></li>
+            <li class="bgcx"><a href="####">报告查询</a></li>
+        </ul>
+        <ul>
+        	<li class="scdd"><a href="####">商城订单</a></li>
+        </ul>
+        <ul>
+        	<li class="cjwt"><a href="####">常见问题</a></li>
+            <li class="xgmm"><a href="####">修改密码</a></li>
+        </ul>
+        <a href="####" class="tcdl">退出登录</a>
+    </div>
+</body>
+</html>