精华内容
下载资源
问答
  • 6.谷粒商城-商品详情页前端代码

    千次阅读 2020-05-26 22:28:18
    异常问题:商品促销信息以商品详情页“促销”栏中的信息为准;商品的具体售价以订单结算页价格为准;如您发现活动商品售价或促销信息有异常,建议购买前先联系销售商咨询。 商品评价 好评度 100% 就是快(424) ...
    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="/static/item/css/shop.css" />
    		<link rel="stylesheet" type="text/css" href="/static/item/css/jd.css"/>
    		<link rel="stylesheet" href="/static/item/css/header.css" />
    		<link rel="stylesheet" type="text/css" href="/static/item/bootstrap/css/bootstrap.css"/>
    	</head>
    	<body>
    		<div id="max">
    		<header>
    			<!--品牌官方网站-->
    					<div class="min">
    						<ul class="header_ul_left">
    							<li class="glyphicon glyphicon-home"> <a href="/static/item/shouye.html" class="aa">京东首页</a></li>
    							<li class="glyphicon glyphicon-map-marker"> <a href="/static/item/javascript:;">北京</a>
    								<ol id="beijing">
    									<li style="background: red;"><a href="/static/item/javascript:;" style="color: white;">北京</a></li>
    									<li><a href="/static/item/javascript:;">上海</a></li>
    									<li><a href="/static/item/javascript:;">天津</a></li>
    									<li><a href="/static/item/javascript:;">重庆</a></li>
    									<li><a href="/static/item/javascript:;">河北</a></li>
    									<li><a href="/static/item/javascript:;">山西</a></li>
    									<li><a href="/static/item/javascript:;">河南</a></li>
    									<li><a href="/static/item/javascript:;">辽宁</a></li>
    									<li><a href="/static/item/javascript:;">吉林</a></li>
    									<li><a href="/static/item/javascript:;">黑龙江</a></li>
    									<li><a href="/static/item/javascript:;">内蒙古</a></li>
    									<li><a href="/static/item/javascript:;">江苏</a></li>
    									<li><a href="/static/item/javascript:;">山东</a></li>
    									<li><a href="/static/item/javascript:;">安徽</a></li>
    									<li><a href="/static/item/javascript:;">浙江</a></li>
    									<li><a href="/static/item/javascript:;">福建</a></li>
    									<li><a href="/static/item/javascript:;">湖北</a></li>
    									<li><a href="/static/item/javascript:;">湖南</a></li>
    									<li><a href="/static/item/javascript:;">广东</a></li>
    									<li><a href="/static/item/javascript:;">广西</a></li>
    									<li><a href="/static/item/javascript:;">江西</a></li>
    									<li><a href="/static/item/javascript:;">四川</a></li>
    									<li><a href="/static/item/javascript:;">海南</a></li>
    									<li><a href="/static/item/javascript:;">贵州</a></li>
    									<li><a href="/static/item/javascript:;">云南</a></li>
    									<li><a href="/static/item/javascript:;">西藏</a></li>
    									<li><a href="/static/item/javascript:;">陕西</a></li>
    									<li><a href="/static/item/javascript:;">甘肃</a></li>
    									<li><a href="/static/item/javascript:;">青海</a></li>
    									<li><a href="/static/item/javascript:;">宁夏</a></li>
    									<li><a href="/static/item/javascript:;">新疆</a></li>
    									<li><a href="/static/item/javascript:;">港澳</a></li>
    									<li><a href="/static/item/javascript:;">台湾</a></li>
    									<li><a href="/static/item/javascript:;">钓鱼岛</a></li>
    									<li><a href="/static/item/javascript:;">海外</a></li>
    								</ol>
    							</li>
    						</ul>
    						<ul class="header_ul_right">
    							<li style="border: 0;"><a href="/static/item/../登录页面\index.html" class="aa">你好,请登录</a></li>
    							<li><a href="/static/item/../注册页面\index.html" style="color: red;">免费注册</a> |</li>
    							<li><a href="/static/item/javascript:;" class="aa">我的订单</a> |</li>
    							<li class="jingdong"><a href="/static/item/javascript:;">我的京东</a><span class="glyphicon glyphicon-menu-down">|</span>
    								<ol class="jingdong_ol">
    									<li><a href="/static/item/javascript:;">待处理订单</a></li>
    									<li><a href="/static/item/javascript:;">消息</a></li>
    									<li><a href="/static/item/javascript:;">返修退换货</a></li>
    									<li><a href="/static/item/javascript:;">我的回答</a></li>
    									<li><a href="/static/item/javascript:;">降价商品</a></li>
    									<li><a href="/static/item/javascript:;">我的关注</a></li>
    									<li style="width: 100%;height: 1px;background: lavender;margin-top: 15px;"></li>
    									<li style="margin-top: 0;"><a href="/static/item/javascript:;">我的京豆</a></li>
    									<li style="margin-top: 0;"><a href="/static/item/javascript:;">我的优惠券</a></li>
    									<li style="margin-bottom: 10px;"><a href="/static/item/javascript:;">我的白条</a></li>
    
    								</ol>
    							</li>
    
    							<li><a href="/static/item/javascript:;" class="aa">京东会员</a> |</li>
    							<li><a href="/static/item/javascript:;" class="aa">企业采购</a> |</li>
    							<li class="fuwu"><a href="/static/item/javascript:;">客户服务</a><span class="glyphicon glyphicon-menu-down"></span> |
    								<ol class="fuwu_ol">
    									<h6>客户</h6>
    									<li><a href="/static/item/javascript:;">帮助中心</a></li>
    									<li><a href="/static/item/javascript:;">售后服务</a></li>
    									<li><a href="/static/item/javascript:;">在线客服</a></li>
    									<li><a href="/static/item/javascript:;">意见建议</a></li>
    									<li><a href="/static/item/javascript:;">电话客服</a></li>
    									<li><a href="/static/item/javascript:;">客服邮箱</a></li>
    									<li style="margin-bottom: -5px;"><a href="/static/item/javascript:;">金融咨询</a></li>
    									<li style="margin-bottom: -5px;"><a href="/static/item/javascript:;">售全球客服</a></li>
    									<h6 style="border-top: 1px dashed darkgray;height: 30px;line-height: 30px;">商户</h6>
    									<li style="margin-top: -5px;"><a href="/static/item/javascript:;">合作招商</a></li>
    									<li style="margin-top: -5px;"><a href="/static/item/javascript:;">学习中心</a></li>
    									<li><a href="/static/item/javascript:;">商家后台</a></li>
    									<li><a href="/static/item/javascript:;">京麦工作台</a></li>
    									<li><a href="/static/item/javascript:;">商家帮助</a></li>
    									<li><a href="/static/item/javascript:;">规则平台</a></li>
    								</ol>
    							</li>
    							<li class="daohang"><a href="/static/item/javascript:;">网站导航</a><span class="glyphicon glyphicon-menu-down"></span> |
    								<ol class="daohang_ol">
    									<li style="width: 34%;">
    										<h5>特色主题</h5>
    										<p>
    											<a href="/static/item/javascript:;">京东试用</a>
    											<a href="/static/item/javascript:;">京东金融</a>
    											<a href="/static/item/javascript:;">全球售</a>
    											<a href="/static/item/javascript:;">国际站</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;">京东会员</a>
    											<a href="/static/item/javascript:;">京东预售</a>
    											<a href="/static/item/javascript:;">买什么</a>
    											<a href="/static/item/javascript:;">俄语站</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;">装机大师</a>
    											<a href="/static/item/javascript:;">0元评测</a>
    											<a href="/static/item/javascript:;">定期送</a>
    											<a href="/static/item/javascript:;">港澳售</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;">优惠券</a>
    											<a href="/static/item/javascript:;">秒杀</a>
    											<a href="/static/item/javascript:;">闪购</a>
    											<a href="/static/item/javascript:;">印尼站</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;">京东金融科技</a>
    											<a href="/static/item/javascript:;">In货推荐</a>
    											<a href="/static/item/javascript:;">陪伴计划</a>
    											<a href="/static/item/javascript:;">出海招商</a>
    										</p>
    									</li>
    									<li>
    										<h5>行业频道</h5>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">手机</a>
    											<a href="/static/item/javascript:;" class="aa_2">智能数码</a>
    											<a href="/static/item/javascript:;" class="aa_2">玩3C</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">电脑办公</a>
    											<a href="/static/item/javascript:;" class="aa_2">家用电器</a>
    											<a href="/static/item/javascript:;" class="aa_2">京东智能</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">服装城</a>
    											<a href="/static/item/javascript:;" class="aa_2">美妆馆</a>
    											<a href="/static/item/javascript:;" class="aa_2">家装城</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">母婴</a>
    											<a href="/static/item/javascript:;" class="aa_2">食品</a>
    											<a href="/static/item/javascript:;" class="aa_2">运动户外</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">农资频道</a>
    											<a href="/static/item/javascript:;" class="aa_2">整车</a>
    											<a href="/static/item/javascript:;" class="aa_2">图书</a>
    										</p>
    									</li>
    									<li>
    										<h5>生活服务</h5>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">京东众筹</a>
    											<a href="/static/item/javascript:;" class="aa_2">白条</a>
    											<a href="/static/item/javascript:;" class="aa_2">京东金融APP</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">京东小金库</a>
    											<a href="/static/item/javascript:;" class="aa_2">理财</a>
    											<a href="/static/item/javascript:;" class="aa_2">智能家电</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">话费</a>
    											<a href="/static/item/javascript:;" class="aa_2">水电煤</a>
    											<a href="/static/item/javascript:;" class="aa_2">彩票</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">旅行</a>
    											<a href="/static/item/javascript:;" class="aa_2">机票酒店</a>
    											<a href="/static/item/javascript:;" class="aa_2">电影票</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">京东到家</a>
    											<a href="/static/item/javascript:;" class="aa_2">京东众测</a>
    											<a href="/static/item/javascript:;" class="aa_2">游戏</a>
    										</p>
    									</li>
    									<li style="border: 0;">
    										<h5>更多精选</h5>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">合作招商</a>
    											<a href="/static/item/javascript:;" class="aa_2">京东通信</a>
    											<a href="/static/item/javascript:;" class="aa_2">京东E卡</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">企业采购</a>
    											<a href="/static/item/javascript:;" class="aa_2">服务市场</a>
    											<a href="/static/item/javascript:;" class="aa_2">办公生活馆</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">乡村招募</a>
    											<a href="/static/item/javascript:;" class="aa_2">校园加盟</a>
    											<a href="/static/item/javascript:;" class="aa_2">京友邦</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">京东社区</a>
    											<a href="/static/item/javascript:;" class="aa_2">智能社区</a>
    											<a href="/static/item/javascript:;" class="aa_2">游戏社区</a>
    										</p>
    										<p>
    											<a href="/static/item/javascript:;" class="aa_2">知识产权维权</a>
    											<a href="/static/item/javascript:;" class="aa_2"></a>
    											<a href="/static/item/javascript:;" class="aa_2"></a>
    										</p>
    									</li>
    								</ol>
    							</li>
    							<li class="sjjd" style="border: 0;"><a href="/static/item/javascript:;" class="aa">手机京东</a>
    								<div class="er">
    									<div class="er_1">
    										<div class="er_1_1">
    											<h6><a href="/static/item/#">手机京东</a></h6>
    											<p>新人专享大礼包</p>
    
    										</div>
    									</div>
    									<div class="er_1">
    										<div class="er_1_1">
    											<h6><a href="/static/item/#">关注京东微信</a></h6>
    											<p>微信扫一扫关注新粉最高180元惊喜礼包</p>
    										</div>
    									</div>
    									<!--我的理财-->
    									<div class="er_1" style="border: 0;">
    										<img src="/static/item/img/5874a555Ne8192324.jpg"/>
    										<div class="er_1_1">
    											<h6><a href="/static/item/#">京东金融客户端</a></h6>
    											<p>新人专享大礼包</p>
    											<div><a href="/static/item/#"><img src="/static/item/img/11.png"/></a><a href="/static/item/#"><img src="/static/item/img/22.png"/></a></div>
    										</div>
    									</div>
    								</div>
    							</li>
    						</ul>
    					</div>
    				</header>
    				<nav>
    				<div class="nav_min">
    					<div class="nav_top">
    						<div class="nav_top_one"><a href="/static/item/#"><img src="/static/item/img/111.png"/></a></div>
    						<div class="nav_top_two"><input type="text"/><button>搜索</button></div>
    						<div class="nav_top_three"><a href="/static/item/../JD_Shop/One_JDshop.html">我的购物车</a><span class="glyphicon glyphicon-shopping-cart"></span>
    							<div class="nav_top_three_1">
    								<img src="/static/item/img/44.png"/>购物车还没有商品,赶紧选购吧!
    							</div>
    						</div>
    					</div>
    					<div class="nav_down">
    						<ul class="nav_down_ul">
    							<li class="nav_down_ul_1" style="width: 24%;float: left;"><a href="/static/item/javascript:;">全部商品分类</a>
    
    							</li>
    							<li class="ul_li"><a href="/static/item/javascript:;">服装城</a></li>
    							<li class="ul_li"><a href="/static/item/javascript:;">美妆馆</a></li>
    							<li class="ul_li"><a href="/static/item/javascript:;">超市</a></li>
    							<li class="ul_li" style="border-right: 1px solid lavender;"><a href="/static/item/javascript:;">生鲜</a></li>
    							<li class="ul_li"><a href="/static/item/javascript:;">全球购</a></li>
    							<li class="ul_li"><a href="/static/item/javascript:;">闪购</a></li>
    							<li class="ul_li" style="border-right: 1px solid lavender;"><a href="/static/item/javascript:;">拍卖</a></li>
    							<li class="ul_li"><a href="/static/item/javascript:;">金融</a></li>
    						</ul>
    					</div>
    				</div>
    			</nav>
    
    				</div>
    
    
    			<div class="crumb-wrap">
    			<div class="w">
    				<div class="crumb">
    					<div class="crumb-item">
    						<a href="">手机</a>
    					</div>
    					<div class="crumb-item sep">></div>
    					<div class="crumb-item">
    						<a href="">手机通讯</a>
    					</div>
    					<div class="crumb-item sep">></div>
    					<div class="crumb-item">
    						<a href="">手机</a>
    					</div>
    					<div class="crumb-item sep">></div>
    					<div class="crumb-item">
    						<div class="crumb-item-one">
    							华为 (HUAWEI)
    							<img src="/static/item/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="img" />
    							<div class="crumb-item-two ">
    								<div class="crumb-item-con clear">
    									<ul class="con-ul">
    										<li>
    											<img src="/static/item/img/5825a5a6Nde8ecb75.jpg" alt="" />
    										</li>
    										<li>
    											<p>
    												荣耀8青春版 全网通标配 3GB+32GB 幻海蓝
    											</p>
    											<p>
    												¥1099.00
    											</p>
    										</li>
    									</ul>
    									<ul class="con-ul">
    										<li>
    											<img src="/static/item/img/5919637aN271a1301.jpg" alt="" />
    										</li>
    										<li>
    											<p>
    												荣耀8青春版 全网通标配 3GB+32GB 幻海蓝
    											</p>
    											<p>
    												¥1099.00
    											</p>
    										</li>
    									</ul>
    									<ul class="con-ul">
    										<li>
    											<img src="/static/item/img/599a806bN9d829c1c.jpg" alt="" />
    										</li>
    										<li>
    											<p>
    												荣耀8青春版 全网通标配 3GB+32GB 幻海蓝
    											</p>
    											<p>
    												¥1099.00
    											</p>
    										</li>
    									</ul>
    								</div>
    								<div class="crumb-item-cons clear">
    									<ul>
    										<li>华为(huawei)</li>
    										<li>小米(xiaomi)</li>
    										<li>APPle</li>
    										<li>魅族(meizu)</li>
    										<li>锤子</li>
    
    									</ul>
    									<ul>
    										<li>三星</li>
    										<li>vivo</li>
    										<li>飞利浦</li>
    										<li>360</li>
    										<li>更多>></li>
    
    									</ul>
    								</div>
    							</div>
    
    						</div>
    
    					</div>
    					<div class="crumb-item sep">></div>
    					<div class="crumb-item">
    						华为Mate 10
    					</div>
    				</div>
    
    				<div class="contact">
    					<ul class="contact-ul">
    						<li>
    							<a href="/static/item/#">
    								华为京东自营官方旗舰店
    							</a>
    
    							<span class="contact-sp">
    								<span class="contact-sp1">
    								JD
    							</span>
    							<span class="contact-sp2">
    								自营
    							    </span>
    							</span>
    						</li>
    						<li>
    							<a href="/static/item/#">
    								<img src="/static/item/img/f5831b9848b32440b381bcd30a3d96c7.png" alt="" /> 联系供应商
    							</a>
    						</li>
    						<li>
    							<a href="/static/item/#">
    								<img src="/static/item/img/81a6326edc82d343a5a8860a6970f93b.png" alt="" /> JIMI
    							</a>
    						</li>
    						<li>
    							<a href="/static/item/#">
    								<img src="/static/item/img/a400e3d61d5645459f769b00d9f431e7.png" alt="" /> 关注店铺
    							</a>
    						</li>
    					</ul>
    					<div class="contact-one">
    						<ul>
    							<li>客服</li>
    							<li><img src="/static/item/img/f5831b9848b32440b381bcd30a3d96c7.png" alt="" />留言</li>
    							<li><img src="/static/item/img/81a6326edc82d343a5a8860a6970f93b.png" alt="" />JIMI智能</li>
    							<li>
    								<img src="/static/item/img/1466134037230.jpg" class="contact-img" />
    								<p>手机下单</p>
    							</li>
    
    						</ul>
    						<div class="contact-two">
    							<span><img src="/static/item/img/a400e3d61d5645459f769b00d9f431e7.png" alt="" />进店逛逛</span>
    							<span><img src="/static/item/img/a400e3d61d5645459f769b00d9f431e7.png" alt="" />关注店铺</span>
    						</div>
    					</div>
    				</div>
    
    			</div>
    		</div>
    <div class="Shop">
    		<div class="box">
    			<div class="box-one ">
    				<div class="boxx">
    
    					<div class="imgbox">
    						<div class="probox">
    							<img class="img1" alt="" th:src="${item.info.skuDefaultImg}">
    							<div class="hoverbox"></div>
    						</div>
    						<div class="showbox">
    							<img class="img1" alt="" th:src="${item.info.skuDefaultImg}">
    						</div>
    					</div>
    
    					<div class="box-lh">
    
    						<div class="box-lh-one">
    							<ul>
    								<li th:each="image:${item.images}" th:if="${!#strings.isEmpty(image.imgUrl)}"><img th:src="${image.imgUrl}" /></li>
    							</ul>
    						</div>
    						<div id="left">
    							< </div>
    								<div id="right">
    									>
    								</div>
    
    						</div>
    
    						<div class="boxx-one">
    							<ul>
    								<li>
    									<span>
    										<img src="/static/item/img/b769782fe4ecca40913ad375a71cb92d.png" alt="" />关注
    									</span>
    									<span>
    										<img src="/static/item/img/9224fcea62bfff479a6712ba3a6b47cc.png" alt="" />
    										对比
    									</span>
    								</li>
    								<li>
    
    								</li>
    							</ul>
    						</div>
    
    					</div>
    					<div class="box-two">
    						<div class="box-name" th:text="${item.info.skuTitle}">
    							华为 HUAWEI Mate 10 6GB+128GB 亮黑色 移动联通电信4G手机 双卡双待
    						</div>
    						<div class="box-hide" th:text="${item.info.skuSubtitle}">预订用户预计11月30日左右陆续发货!麒麟970芯片!AI智能拍照!
    							<a href=""><u>华为 HUAWEI Mate 10 Pro 10:08 限时限量抢!</u></a>
    						</div>
    						<div class="box-yuyue">
    							<div class="yuyue-one">
    								<img src="/static/item/img/7270ffc3baecdd448958f9f5e69cf60f.png" alt="" /> 预约抢购
    							</div>
    							<div class="yuyue-two">
    								<ul>
    									<li>
    										<img src="/static/item/img/f64963b63d6e5849977ddd6afddc1db5.png" />
    										<span>190103</span> 人预约
    									</li>
    									<li>
    										<img src="/static/item/img/36860afb69afa241beeb33ae86678093.png" /> 预约剩余
    										<span id="timer">
    
    									</span>
    									</li>
    								</ul>
    							</div>
    						</div>
    						<div class="box-summary clear">
    							<ul>
    								<li>京东价</li>
    								<li>
    									<span>¥</span>
    									<span th:text="${#numbers.formatDecimal(item.info.price,3,2)}">4499.00</span>
    								</li>
    								<li>
    									预约享资格
    								</li>
    								<li>
    									<a href="">
    										预约说明
    									</a>
    								</li>
    							</ul>
    						</div>
    						<div class="box-wrap clear">
    							<div class="box-wrap-one clear">
    								<ul>
    									<li>增值业务</li>
    									<li><img src="/static/item/img/90a6fa41d0d46b4fb0ff6907ca17c478.png" /></li>
    									<li><img src="/static/item/img/2e19336b961586468ef36dc9f7199d4f.png" /></li>
    									<li><img src="/static/item/img/1f80c3d6fabfd3418e54b005312c00b5.png" /></li>
    								</ul>
    							</div>
    						</div>
    
    						<div class="box-stock">
    							<ul class="box-ul">
    								<li>配送至</li>
    								<li class="box-stock-li">
    									<div class="box-stock-one">
    										北京朝阳区管庄
    										<img src="/static/item/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="img" />
    									</div>
    									<div class="box-stock-two">
    										<dl>
    											<dt>
    												<a>选择新地址</a>
    												<img src="/static/item/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="box-stock-two-img"/>
    											</dt>
    											<dd>
    												<div class="box-stock-dd">
    													<div class="box-stock-top">
    														<div class="box-stock-div">北京</div>
    														<div class="box-stock-div">朝阳区</div>
    														<div class="box-stock-div">管庄</div>
    													</div>
    													<div class="box-stock-fot">
    														<div class="box-stock-con" style="display: block;">
    															<ul>
    																<li>北京</li>
    																<li>上海</li>
    																<li>天津</li>
    																<li>重庆</li>
    															</ul>
    														</div>
    														<div class="box-stock-con">
    															<ul>
    																<li>朝阳区</li>
    																<li>海淀区</li>
    																<li>东城区</li>
    																<li>西城区</li>
    															</ul>
    														</div>
    														<div class="box-stock-con">
    															<ul>
    																<li>4环到5环之内</li>
    																<li>管庄</li>
    																<li>北苑</li>
    															</ul>
    														</div>
    
    													</div>
    												</div>
    											</dd>
    										</dl>
    
    									</div>
    
    								</li>
    								<li>
    									<span th:text="${item.hasStock?'有货':'无货'}">无货</span>, 此商品暂时售完
    								</li>
    							</ul>
    						</div>
    						<div class="box-supply">
    							<ul class="box-ul">
    								<li></li>
    								<li>
    									由<span>京东</span> 发货,并提供售后服务
    								</li>
    							</ul>
    						</div>
    						<div class="box-attr-3">
    							<div class="box-attr clear" th:each="attr:${item.saleAttr}">
    								<dl>
    									<dt>选择[[${attr.attrName}]]</dt>
    									<dd th:each="vals:${attr.attrValues}">
    										<a class="sku_attr_value"
    										   th:attr="skus = ${vals.skuIds},class=${#strings.contains(#strings.listSplit(vals.skuIds,','),item.info.skuId)?'sku_attr_value checked':'sku_attr_value'}"
    											<img th:src="${item.info.skuDefaultImg}" /> [[${vals.attrValue}]]
    										</a>
    									</dd>
    								</dl>
    							</div>
    						</div>
    
    						<div class="box-btns clear">
    							<div class="box-btns-one">
    								<input type="text" name="" id="" value="1" />
    								<div class="box-btns-one1">
    
    									<div>
    										<button id="jia">
    									+
    									</button>
    									</div>
    									<div>
    										<button id="jian">
    										-
    									</button>
    									</div>
    
    								</div>
    							</div>
    							<div class="box-btns-two">
    								<a href="/static/item/../商品分类\index.html">
    									立即预约
    								</a>
    							</div>
    							<div class="box-btns-three">
    								<img src="/static/item/img/e4ed3606843f664591ff1f68f7fda12d.png" alt="" /> 分享
    							</div>
    						</div>
    
    						<div class="box-footer-zo">
    							<div class="box-footer clear">
    								<dl>
    									<dt>本地活动</dt>
    									<dd>
    										<a href="">
    											·1元500MB激活到账30元 >>
    										</a>
    									</dd>
    								</dl>
    							</div>
    
    							<div class="box-footer">
    								<dl>
    									<dt>温馨提示</dt>
    									<dd>·本商品不能使用 东券 京券</dd>
    									<dd>·请完成预约后及时抢购!</dd>
    								</dl>
    							</div>
    						</div>
    					</div>
    
    				</div>
    			</div>
    			<!--欲约抢购流程-->
    			<div class="qianggoulioucheng">
    				<div class="lioucheng">
    					<h3>欲约抢购流程</h3>
    				</div>
    				<!--抢购步骤-->
    				<ul class="qianggoubuzhao">
    					<li>
    						<img src="/static/item/img/shop_03.png" />
    						<dl class="buzhou">
    							<dt>1.等待预约</dt>
    							<dl>预约即将开始</dl>
    						</dl>
    					</li>
    					<li>
    						<img src="/static/item/img/shop_04.png" />
    						<dl class="buzhou">
    							<dt>2.预约中</dt>
    							<dl>2017-11-15 10:35 2017-11-15 23:59</dl>
    						</dl>
    					</li>
    					<li>
    						<img src="/static/item/img/shop_05.png" />
    						<dl class="buzhou">
    							<dt>3.等待抢购</dt>
    							<dl>抢购即将开始</dl>
    						</dl>
    					</li>
    					<li>
    						<img src="/static/item/img/shop_06.png" />
    						<dl class="buzhou">
    							<dt>4.抢购中</dt>
    							<dl></dl>
    						</dl>
    					</li>
    				</ul>
    			</div>
    
    			<div class="ShopXiangqing">
    				<div class="allLeft">
    					<!--火热预约-->
    					<div class="huoreyuyue">
    						<h3>火热预约</h3>
    					</div>
    					<div class="dangeshopxingqing">
    						<ul class="shopdange">
    							<li>
    								<a href="/static/item/##"><img src="/static/item/img/5a0afeddNb34732af.jpg" /></a>
    								<p>
    									<a href="/static/item/##">OPPO R11s Plus 双卡双待全面屏拍照手机香槟色 全网通(6G RAM+64G ROM)标配</a>
    								</p>
    								<p><strong class="J-p-20015341974">¥3699.00</strong></p>
    							</li>
    							<li>
    								<a href="/static/item/##"><img src="/static/item/img/5a12873eN41754123.jpg" /></a>
    								<p>
    									<a target="_blank" title="詹姆士(GEMRY) R19plus全网通4G 智能手机 双卡双待 6+128GB 鳄鱼纹雅致版(新品预约)" href="/static/item///item.jd.com/20348283521.html">詹姆士(GEMRY) R19plus全网通4G 智能手机 双卡双待 6+128GB 鳄鱼纹雅致版(新品预约)</a>
    								</p>
    								<p><strong class="J-p-20348283521">¥13999.00</strong></p>
    							</li>
    							<li>
    								<a href="/static/item/##"><img src="/static/item/img/59ec0131Nf239df75.jpg" /></a>
    								<p>
    									<a target="_blank" title="斐纳(TOMEFON) 德国家用无线无绳手持立式充电吸尘器 静音大吸力吸尘器TF-X60" href="/static/item///item.jd.com/16683419775.html">斐纳(TOMEFON) 德国家用无线无绳手持立式充电吸尘器 静音大吸力吸尘器TF-X60</a>
    								</p>
    								<p><strong class="J-p-16683419775">¥1599.00</strong></p>
    							</li>
    							<li>
    								<a href="/static/item/##"><img src="/static/item/img/59015444N27317512.jpg" /></a>
    								<p>
    									<a target="_blank" title="斐纳(TOMEFON) 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金" href="/static/item///item.jd.com/12187770381.html">斐纳(TOMEFON) 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金</a>
    								</p>
    								<p><strong class="J-p-12187770381">¥2599.00</strong></p>
    							</li>
    						</ul>
    					</div>
    					<!--看了又看-->
    					<div class="huoreyuyue">
    						<h3>看了又看</h3>
    					</div>
    					<div class="dangeshopxingqing">
    						<ul class="shopdange">
    							<li>
    								<a href="/static/item/##"><img src="/static/item/img/59e55e01N369f98f2.jpg" /></a>
    								<p>
    									<a target="_blank" title="华为(HUAWEI) 华为 Mate10 4G手机  双卡双待 亮黑色 全网通(6GB RAM+128GB ROM)" href="/static/item///item.jd.com/17931625443.html">华为(HUAWEI) 华为 Mate10 4G手机 双卡双待 亮黑色 全网通(6GB RAM+128GB ROM)</a>
    									<p><strong class="J-p-17931625443">¥4766.00</strong></p>
    							</li>
    							<li>
    								<a href="/static/item/##"><img src="/static/item/img/584fcc3eNdb0ab94c.jpg" /></a>
    								<p>
    									<a target="_blank" title="华为 Mate 9 Pro 6GB+128GB版 琥珀金 移动联通电信4G手机 双卡双待" href="/static/item///item.jd.com/3749093.html">华为 Mate 9 Pro 6GB+128GB版 琥珀金 移动联通电信4G手机 双卡双待</a>
    								</p>
    								<p><strong class="J-p-3749093">¥4899.00</strong></p>
    							</li>
    							<li>
    								<!--shopjieshao-->
    								<a href="/static/item/##"><img src="/static/item/img/59eb0df9Nd66d7585.jpg" /></a>
    								<p>
    									<a target="_blank" title="华为(HUAWEI) 华为 Mate10 手机 亮黑色 全网通(4+64G)标准版" href="/static/item///item.jd.com/12306211773.html">华为(HUAWEI) 华为 Mate10 手机 亮黑色 全网通(4+64G)标准版</a>
    								</p>
    								<p><strong class="J-p-12306211773">¥4088.00</strong></p>
    							</li>
    							<li>
    								<a href="/static/item/##"><img src="/static/item/img/5a002ba3N126c2f73.jpg" /></a>
    								<p>
    									<a target="_blank" title="斐纳(TOMEFON) 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金" href="/static/item///item.jd.com/12187770381.html">斐纳(TOMEFON) 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金</a>
    								</p>
    								<p><strong class="J-p-12187770381">¥2599.00</strong></p>
    							</li>
    						</ul>
    						<img src="/static/item/img/5a084a1aNa1aa0a71.jpg" />
    					</div>
    				</div>
    				<!--商品介绍-->
    				<div class="allquanbushop">
    					<ul class="shopjieshao">
    						<li class="jieshoa" style="background: #e4393c;">
    							<a  style="color: white;">商品介绍</a>
    						</li>
    						<li class="baozhuang">
    							<a >规格与包装</a>
    						</li>
    						<li class="baozhang">
    							<a >售后保障</a>
    						</li>
    						<li class="pingjia">
    							<a >商品评价(4万+)</a>
    						</li>
    						<li class="shuoming">
    							<a >预约说明</a>
    						</li>
    
    					</ul>
    					<button class="Lijiyuyuessss">
    							立即预约
    						</button>
    					<ul class="shopjieshaos posi" style="display: none;">
    						<li class="jieshoa" style="background: #e4393c;">
    							<a  style="color: white;">商品介绍</a>
    						</li>
    						<li class="baozhuang">
    							<a >规格与包装</a>
    						</li>
    						<li class="baozhang">
    							<a>售后保障</a>
    						</li>
    						<li class="pingjia">
    							<a >商品评价(4万+)</a>
    						</li>
    						<li class="shuoming">
    							<a >预约说明</a>
    						</li>
    					</ul>
    
    					<!--商品详情-->
    					<div class="huawei">
    						<ul class="xuanxiangka">
    							<li class="jieshoa actives" id="li1">
    								<div class="shanpinsssss">
    									<!--<p>-->
    										<!--<a href="/static/item/#">品牌:华为(HUAWEI)</a>-->
    									<!--</p>-->
    									<!--<table>-->
    										<!--<tr>-->
    											<!--<td>-->
    												<!--<a href="/static/item/##">商品名称:华为Mate 10</a>-->
    											<!--</td>-->
    											<!--<td>-->
    												<!--<a href="/static/item/##">商品毛重:0.58kg</a>-->
    											<!--</td>-->
    											<!--<td>-->
    												<!--<a href="/static/item/##">商品编号:5544038</a>-->
    											<!--</td>-->
    											<!--<td>-->
    												<!--<a href="/static/item/##">商品产地:中国大陆</a>-->
    											<!--</td>-->
    										<!--</tr>-->
    										<!--<tr>-->
    											<!--<td>-->
    												<!--<a href="/static/item/##">系统:安卓(Android)</a>-->
    											<!--</td>-->
    											<!--<td>-->
    												<!--<a href="/static/item/##">前置摄像头像素:800万-1599万</a>-->
    											<!--</td>-->
    											<!--<td>-->
    												<!--<a href="/static/item/##">后置摄像头像素:2000万及以上,1200万-1999万</a>-->
    											<!--</td>-->
    											<!--<td>-->
    												<!--<a href="/static/item/##">机身内存:128GB</a>-->
    											<!--</td>-->
    										<!--</tr>-->
    										<!--<tr>-->
    											<!--<td colspan="4">-->
    												<!--<a href="/static/item/##">全面屏,双卡双待,指纹识别,Type-C,VoLTE,2K屏,拍照神器,支持NFC,商务手机,安全手机,分辨率10</a>-->
    											<!--</td>-->
    										<!--</tr>-->
    									<!--</table>-->
    									<img class="xiaoguo" th:src="${desc}" th:each="desc:${#strings.listSplit(item.desc.decript,',')}"/>
    								</div>
    							</li>
    							<li class="baozhuang actives" id="li2">
    								<div class="guiGebox" >
    									<div class="guiGe" th:each="group:${item.groupAttrs}">
    										<h3 th:text="${group.groupName}">主体</h3>
    										<dl>
    											<div th:each="attr:${group.attrs}">
    												<dt th:text="${attr.attrName}">品牌</dt>
    												<dd th:text="${attr.attrValue}">华为(HUAWEI)</dd>
    											</div>
    										</dl>
    									</div>
    									<div class="package-list">
    										<h3>包装清单</h3>
    										<p>手机(含内置电池) X 1、5A大电流华为SuperCharge充电器X 1、5A USB数据线 X 1、半入耳式线控耳机 X 1、快速指南X 1、三包凭证 X 1、取卡针 X 1、保护壳 X 1</p>
    									</div>
    								</div>
    							</li>
    							<!--包装-->
    							<li class="baozhang actives" id="li3">
    								<div class="oBox">
    		<div class="shuoHou">
    			<div class="baoZhang">
    				<h2>售后保障</h2>
    			</div>
    		</div>
    		<!--厂家服务-->
    		<div class="changJia">
    			<div class="lianBao">
    				<span class="oImg">
    					<img src="/static/item/img/2017.jpg" alt="" />
    					<h3>厂家服务</h3>
    				</span>
    				<div class="wenZi">
    					本产品全国联保,享受三包服务,质保期为:一年保<br />
    					如因质量问题或故障,凭厂商维修中心或特约维修点的质量检测证明,享受7日内退货,15日内换货,15日以上在保质期内享受免费保修等安保服务!<br />
    					(注:如厂家在商品介绍中有售后保障的说明,则此商品按照厂家说明执行售后保障服务。)您可以查询本品牌在各地售后服务中心的练习方式<a href="/static/item/#">请点击这儿查询...</a><br /><br />
    				</div>
    			</div>
    			<div class="lianBao oCn">
    				<span class="oImg">
    					<img src="/static/item/img/2017.jpg" alt="" />
    					<h3>京东承诺</h3>
    				</span>
    				<div class="wenZi">
    					本产品全国联保,享受三包服务,质保期为:一年保<br />
    					如因质量问题或故障,凭厂商维修中心或特约维修点的质量检测证明,享受7日内退货,15日内换货,15日以上在保质期内享受免费保修等安保服务!<br />
    					(注:如厂家在商品介绍中有售后保障的说明,则此商品按照厂家说明执行售后保障服务。)您可以查询本品牌在各地售后服务中心的练习方式<a href="/static/item/#">请点击这儿查询...</a><br /><br /><br />
    				</div>
    			</div>
    
    			<div class="lianBao ">
    				<span class="oImg">
    					<img src="/static/item/img/2017.jpg" alt="" />
    					<h3>正品行货</h3>
    				</span>
    				<div class="wenZi hangHuo">
    					京东商城向您保证所售商品均为正品行货,京东自营商品开具机打发票或电子发票。
    				</div>
    			</div>
    			<div class="lianBao quanGuo">
    				<span class="oImg">
    					<img src="/static/item/img/2017-1.jpg" alt="" />
    					<h3>全国联保</h3>
    				</span>
    				<div class="wenZi">
    					凭质保证书及京东商城发票,可享受全国联保服务(奢侈品、钟表除外;奢侈品、钟表由京东联系保修,享受法定三包售后服务),与您亲临商场选购的商品享受相同的质量保证。京东商城还为您提供具有竞争力的商品价格和运费政策,请您放心购买! <br />
    
    注:因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件,本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货!并且保证与当时市场上同样主流新品一致。若本商城没有及时更新,请大家谅解!
    				</div>
    			</div>
    				<!--权利声明-->
    			<div class="quanLi">
    				<h4>权利声明:</h4>
    				<div class="jingDong">
    					京东上的所有商品信息、客户评价、商品咨询、网友讨论等内容,是京东重要的经营资源,未经许可,禁止非法转载使用。<br />
    	<span class="oZhu">注</span>:本站商品信息均来自于合作方,其真实性、准确性和合法性由信息拥有者(合作方)负责。本站不提供任何保证,并不承担任何法律责任。
    				</div>
    			</div>
    			<div class="quanLi jiaGe">
    				<h4>价格说明:</h4>
    				<div class="jingDong">
    					<span class="oZhu">京东价</span>:京东价为商品的销售价,是您最终决定是否购买商品的依据。<br />
    					<span class="oZhu">划线价</span>:商品展示的划横线价格为参考价,该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价(如厂商指导价、建议零售价等)或该商品在京东平台上曾经展示过的销售价;由于地区、时间的差异性和市场行情波动,品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致,该价格仅供您参考。<br />
    					<span class="oZhu">折扣</span>:如无特殊说明,折扣指销售商在原价、或划线价(如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价)等某一价格基础上计算出的优惠比例或优惠金额;如有疑问,您可在购买前联系销售商进行咨询。<br />
    					<span class="oZhu">异常问题</span>:商品促销信息以商品详情页“促销”栏中的信息为准;商品的具体售价以订单结算页价格为准;如您发现活动商品售价或促销信息有异常,建议购买前先联系销售商咨询。
    				</div>
    			</div>
    		</div>
    
    
    	</div>
    							</li>
    							<!--评价-->
    							<li class="PINgjia actives" id="li4">
    								<div class="h3">
    									<h3>商品评价</h3>
    								</div>
    								<div class="nav">
    									<div class="left">
    										<p class="haoping">好评度</p>
    										<p><span>100%</span></p>
    									</div>
    									<div class="right">
    										<ul>
    											<li>
    												<a href="/static/item/##">就是快(424)</a>
    											</li>
    											<li>
    												<a href="/static/item/##">物流很快(254) </a>
    											</li>
    											<li>
    												<a href="/static/item/##">货真价实(168)</a>
    											</li>
    											<li>
    												<a href="/static/item/##">有档次(158)</a>
    											</li>
    											<li>
    												<a href="/static/item/##">国产品牌(133)</a>
    											</li>
    											<li>
    												<a href="/static/item/##">外形美观(103)</a>
    											</li>
    											<li>
    												<a href="/static/item/##">很给力(75)</a>
    											</li>
    											<li>
    												<a href="/static/item/##">反应灵敏(68)</a>
    											</li>
    											<li>
    												<a href="/static/item/##">性价比高(60)</a>
    											</li>
    											<li>
    												<a href="/static/item/##">价格优惠(50)</a>
    											</li>
    											<li>
    												<a href="/static/item/##">功能齐全(49)</a>
    											</li>
    											<li style="background: gainsboro;">
    												<a href="/static/item/##">速度太慢(5)</a>
    										</ul>
    									</div>
    								</div>
    								<!--全部评价-->
    								<div class="allpingjia">
    									<ul>
    										<li><a href="/static/item/##">全部评价(4.2万)</a></li>
    										<li><a href="/static/item/##">晒图(500)</a></li>
    										<li><a href="/static/item/##">追拼(200+)</a></li>
    										<li><a href="/static/item/##">好评(4.1万)</a></li>
    										<li><a href="/static/item/##">中评(100+)</a></li>
    										<li><a href="/static/item/##">差评(100+)</a></li>
    										<li><a href="/static/item/##"><input type="checkbox"/>只看当前商品价格</a></li>
    										<li class="imga" style="float: right;"><a href="/static/item/##">推荐排序 <img src="/static/item/img/animaite.png"/> </a>
    										</li>
    									</ul>
    								</div>
    								</li>
    								<li class="shuoming actives" id="li5"></li>
    						</ul>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="headera">
    			<div class="Logo-tu">
    				<span><img src="/static/item/img/service_items_1.png"/></span>
    				<span><img src="/static/item/img/service_items_2.png"/></span>
    				<span><img src="/static/item/img/service_items_3.png"/></span>
    				<span><img src="/static/item/img/service_items_4.png"/></span>
    			</div>
    			<div class="table">
    				<dl>
    					<dt><a href="/static/item/##">购物指南</a></dt>
    					<dd>
    						<a href="/static/item/##">购物流程</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">会员介绍</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">生活旅行/团购</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">常见问题</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">大家电</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">练习客服</a>
    					</dd>
    				</dl>
    				<dl>
    					<dt><a href="/static/item/##">配送方式</a></dt>
    					<dd>
    						<a href="/static/item/##">上门自提</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">211限时达</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">配送服务查询</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##"></a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">海外配送</a>
    					</dd>
    					<dd></dd>
    				</dl>
    				<dl>
    					<dt><a href="/static/item/##">支付方式</a></dt>
    					<dd>
    						<a href="/static/item/##">货到付款</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">在线支付</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">分期付款</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">邮局汇款</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">公司转账</a>
    					</dd>
    					<dd></dd>
    				</dl>
    				<dl>
    					<dt><a href="/static/item/##">售后服务</a></dt>
    					<dd>
    						<a href="/static/item/##">售后政策</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">价格保护</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">退款说明</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">返修/退换货</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">取消订单</a>
    					</dd>
    					<dd></dd>
    				</dl>
    				<dl class="dls">
    					<dt><a href="/static/item/##">特色服务</a></dt>
    					<dd>
    						<a href="/static/item/##">夺宝岛</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">DIY装机</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">延保服务</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">京东E卡</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">京东通信</a>
    					</dd>
    					<dd>
    						<a href="/static/item/##">京东JD+</a>
    					</dd>
    				</dl>
    			</div>
    			<!--关于我们-->
    			<div class="guanyuwomen">
    				<ul>
    					<li>
    						<a href="/static/item/##">关于我们</a>
    					</li>
    					<li>|</li>
    					<li>
    						<a href="/static/item/##">联系我们</a>
    					</li>
    					<li>|</li>
    					<li>
    						<a href="/static/item/##">联系客服</a>
    					</li>
    					<li>|</li>
    					<li>
    						<a href="/static/item/##">合作招商</a>
    					</li>
    					<li>|</li>
    					<li>
    						<a href="/static/item/##">商家帮助</a>
    					</li>
    					<li>|</li>
    					<li>
    						<a href="/static/item/##">营销中心</a>
    					</li>
    					<li>|</li>
    					<li>
    						<a href="/static/item/##">手机京东</a>
    					</li>
    					<li>|</li>
    					<li>
    						<a href="/static/item/##">友情链接</a>
    					</li>
    					<li>|</li>
    					<li>
    						<a href="/static/item/##">销售联盟</a>
    					</li>
    					<li>|</li>
    					<li>
    						<a href="/static/item/##">京东社区</a>
    					</li>
    					<li>|</li>
    					<li>
    						<a href="/static/item/##">风险检测</a>
    					</li>
    					<li>|</li>
    					<li>
    						<a href="/static/item/##">隐私政策</a>
    					</li>
    					<li>|</li>
    					<li>
    						<a href="/static/item/##">京东公益</a>
    					</li>
    					<li>|</li>
    					<li>
    						<a href="/static/item/##">English Site</a>
    					</li>
    					<li>|</li>
    					<li>
    						<a href="/static/item/##">Mdeila $ IR</a>
    					</li>
    				</ul>
    			</div>
    			<!--jieshoa-->
    			<p class="p1"><img src="/static/item/img/56a0a994Nf1b662dc.png" />
    				<a href="/static/item/##"> 京公网安备 11000002000088号</a>|
    				<a href="/static/item/##"> 京ICP证070359号</a>|
    				<a href="/static/item/##"> 互联网药品信息服务资格证编号(京)-经营性-2014-0008 </a>|
    				<a href="/static/item/##">新出发京零 字第大120007号</a>
    			</p>
    			<p class="p1">
    				<a href="/static/item/##"> 互联网出版许可证编号新出网证(京)字150号</a>|
    				<a href="/static/item/##"> 出版物经营许可证</a>|
    				<a href="/static/item/##"> 网络文化经营许可证京网文 </a>|
    				<a href="/static/item/##">[2014]2148-348号 </a>|
    				<a href="/static/item/##"> 违法和不良信息举报电话 </a>|
    				<a href="/static/item/##">:4006561155 </a>
    			</p>
    			<p class="p1">
    				<a href="/static/item/##"> Copyright © 2004-2017 京东JD.com 版权所有</a>|
    				<a href="/static/item/##"> 消费者维权热线:4006067733 经营证照</a>|
    			</p>
    			<p class="p1">
    				<a href="/static/item/##"> 京东旗下网站:京东支付</a>|
    				<a href="/static/item/##"> 京东云</a>
    			</p>
    			<p class="p3">
    				<img src="/static/item/img/54b8871eNa9a7067e.png" />
    				<img src="/static/item/img/54b8872dNe37a9860.png" />
    				<img src="/static/item/img/54b8875fNad1e0c4c.png" />
    				<img src="/static/item/img/5698dc03N23f2e3b8.jpg" />
    				<img src="/static/item/img/5698dc16Nb2ab99df.jpg" />
    				<img src="/static/item/img/56a89b8fNfbaade9a.jpg" />
    			</p>
    		</div>
    		<div class="Fixedbian">
    			<ul>
    				<li class="li1"><a class="aaa" href="/static/item/##">顶部</a></li>
    			</ul>
    		</div>
    		<div class="gouwuchexiaguo">
    			<img src="/static/item/img/44.png" />
    			<span>购物车还没有商品,赶紧选购吧!</span>
    		</div>
    	</body>
    
    	<script src="/static/item/js/jquery1.9.js" type="text/javascript" charset="utf-8"></script>
    	<script src="/static/item/js/js.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    	</script>
    
    <script>
    	$(".sku_attr_value").click(function () {
    		//1、点击的元素添加上自定义属性,为了识别我们是刚才被点击的
    		var skus = new Array();
    		$(this).addClass("clicked");
    		var curr = $(this).attr("skus").split(",");
    		//将被点击的所有sku组合放进skus中
    		skus.push(curr);
    		//2、去掉同一行所有的checked
    		$(this).parent().parent().find(".sku_attr_value").removeClass("checked");
    
    		$("a[class='sku_attr_value checked']").each(function () {
    			skus.push($(this).attr("skus").split(","));
            });
    		console.log(skus);
    		//3、取出交集得到skuId
    		var skuId = skus[0];
    		for (var i = 1;i < skus.length; i ++){
    		    skuId = $(skuId).filter(skus[i]);
    		}
            console.log("skuId",skuId)
    		//4、跳转
    		location.href="http://item.gulimall.com/"+skuId[0]+".html";
    
        })
    
    	$(function () {
    		$(".sku_attr_value").parent().css({"border":"solid 1px #CCC"});
    		$("a[class='sku_attr_value checked']").parent().css({"border":"solid 1px red"});
        })
    </script>
    
    </html>
    
    展开全文
  • 摘要:1、jQuery代码// 使用替换class名的方法$(function() {//默认选中第一个版本和第一个颜色 $('.detail_much_left').eq(0).attr('class','detail_much_left checked') $('.detail_1、jQuery代码// 使用替换class...

    摘要:1、jQuery代码// 使用替换class名的方法$(function() {//默认选中第一个版本和第一个颜色    $('.detail_much_left').eq(0).attr('class','detail_much_left checked')     $('.detail_

    1、jQuery代码

    // 使用替换class名的方法

    $(function() {

    //默认选中第一个版本和第一个颜色

    $('.detail_much_left').eq(0).attr('class','detail_much_left checked')

    $('.detail_color_left').eq(0).attr('class','detail_color_left checked')

    //点击选中其他颜色

    $('.detail_color_left').click(function(){

    $('.detail_color_left').attr('class','detail_color_left')

    $(this).attr('class','detail_color_left checked')

    updateTotalPrice()

    })

    //点击选中其他版本

    $('.detail_much_left').click(function(){

    $('.detail_much_left').attr('class','detail_much_left')

    $(this).attr('class','detail_much_left checked')

    updateTotalPrice()

    })

    //选中小米提供的保障服务

    $('.shop_detail_bz1').click(function(){

    var nowcircleclass=$(this).find('.fa-check-circle').attr('class')

    var nowclass=$(this).find('.fa-check-square').attr('class')

    if(nowcircleclass.indexOf('checked')>0){

    //如果被选中,就除移选中

    nowcircleclass=nowcircleclass.replace('checked','')

    nowclass=nowclass.replace('checked','')

    $(this).find('.fa-check-circle').attr('class',nowcircleclass)

    $(this).find('.fa-check-square').attr('class',nowclass)

    }else{

    //如果没有被选中,就选中

    $(this).find('.fa-check-circle').attr('class',nowcircleclass+'checked')

    $(this).find('.fa-check-square').attr('class',nowclass+'checked')

    }

    updateTotalPrice()

    })

    // 计算总价

    function updateTotalPrice(){

    //版本价钱

    var bbPrice=$(".detail_much_left[class$='checked']").find('span').attr('data-val')*1

    //服务价钱

    var svPrice=0

    var svSpan=$(".fa-check-circle[class$='checked']").parent('.shop_detail_bz1').find('span[data-val]')

    for( var i=0; i

    svPrice+=svSpan[i].getAttribute('data-val')*1

    }

    var TotalPrice=bbPrice+svPrice

    $('#totalPrice').html('总计 : '+TotalPrice+'元')

    $('#phonePrice').html(bbPrice+'元')

    }

    })

    2、运行结果

    415c3d7895992aa080d90bc14a596db5.png

    批改老师:韦小宝批改时间:2019-02-20 09:02:51

    老师总结:写的还是蛮清晰的 很不错 继续加油吧!

    展开全文
  • 作业
  • 京东商品详情页前端开发宝典

    千次阅读 2016-08-08 11:16:11
    在过去的4年里主要负责京东网站商品详情页的前端系统架构和开发,平时主要写JavaScript偶尔写一些NodeJS,Python。 简介 详情页也叫做单品页,域名以「item.jd.com/skuid.html」为格式的页面。是负责展示...

    作者:周琪力,前端工程师,网络常用昵称「keelii」。在过去的4年里主要负责京东网站商品详情页的前端系统架构和开发,平时主要写JavaScript偶尔写一些NodeJS,Python。


    简介

    详情页也叫做单品页,域名以「item.jd.com/skuid.html」为格式的页面。是负责展示京东商品SKU的落地页面。主要任务是展示商品相关信息,如价格、促销、库存、推荐,从而引导用户进入购买流程。同时单品页有很多版本。一般分为两类。一类我们通常看到的「通用类目详情页」——所有类目都可以使用,一类是不经常看到的「垂直属性详情页」——一些有特殊属性的商品集合

    图片描述

    首先,由于详情页量大(SKU数十亿)、高并发(日PV数十亿)等特性,在很长的一段时间里,单品页都是后端程序生成静态页面使用CDN来解决量大、高并发的问题。

    其次。单品页涉及的「三方」系统特别多,比如促销、库存、合约、秒杀、预售、推荐、IM、店铺、评价社区等。而单品页的主要任务就是展示这些系统的信息,并且适当的处理他们之间的逻辑关系,而这些系统的接口一般都使用异步Ajax来完成,因为其一CDN无法做到页面的动态化,其二一些系统的信息对实时性要求特别高(价格、秒杀),即使使用后端动态渲染也很难做到无缓存零延迟。

    基于上面两个原因,注定了单品页是一种重多系统业务逻辑展示型页面,重前端页面。我大概汇总了一下页面上异步接口,总共约有30个,页首屏的接口特别重要,接口之间几乎都有耦合关系:

    图片描述

    前端的发展历程

    混沌时期

    混沌时期的单品页并没有前端开发的概念。核心的功能脚本只有三个:促销价格(promotion.js)、库存地区(iplocation.js)、其它逻辑(pshow.js)。这三个脚本分别是三个不同团队的同事负责维护,当时我刚进入京东的时候在UED部门,负责页面脚本整体的维护工作和pshow的开发。那时候我自己维护的pshow.js脚本压缩后只有80kb,所有的代码都是过程式的,没有任何使用模式和代码技巧,JS最多也只被用来做个判断渲染DOM。那时候的前端工作内容只在UI层面,写样式和一些交互脚本。

    这个阶段给我最深刻的感觉是单品页后端模板很少维护(后端架构是最老的aspx版本)。大多数的改动都要用JavaScript去动态渲染。因为后端页面是一个生成器生成的。如果页面后端模板有改动那么就需要全量的生成一次,过程可能需要几个小时。

    初见端倪

    当我接手这个项目时刚好有一次大改版,就在这时候老大说页面上的脚本都要放在我们手里维护。然后就是一大波的重构、重写。基本上pshow被重写了大概80%其它的因为业务逻辑的问题并没有完全重写,只是做了些代码层面的优化。

    有一个模板引擎叫trimPath,知道这个的估计都算老前端了。最早的客户端JavaScript MVC模式代表作品,只到现在还在使用。这个阶段像评价这种完全异步加载的模块特别适合使用模板引擎来减少维护的工作量。这个时候虽然页面上的代码并不都是我们写的,但基本上前端对页面的JavaScript有了控制权,接下来的事情就是寻找机会逐个优化。

    这段时间是最痛苦的时候,维护的工作统一到前端。然后后端几乎没有变化,只是在一段时间将后台的架构从aspx过渡到了java。本质上并没有什么改变。前端却做了比以前更多的事情,也是在这个时候我接手了大量的维护工作(包含全站公共库的维护)使得我意识到了一些自动化、工程化方面的重要性,后文会主要讲解,顺便说下,那时候前端自动化工具Grunt刚面世,但是我自己却用的是apache ant,不过不久就切换到了Grunt来构建项目。

    拨云见日

    单品页不仅重系统逻辑,也重维护。在这段时间里一方面有正常的维护类需求要做,一方面自己也不断的学习新知识为以后的改版做铺垫。不过就在这时单品页有历史意义的一次技改出现了——单品页动态化技改。关于后端部分的改造细节可以去亿级商品详情页架构演进技术解密了解。

    总的来说这次的改版后很多数据直接从后端读取,不再从前端异步获取而且我们也做过一些异步加载的优化,多接口combo从统一服务吐出给前端使用。这时前端就不用再为异步接口的加载时苦脑了,只需要专注系统接口的逻辑。

    随着这次技改,前端的代码也迎来了模块化的时代。我们把所有的前端代码都进行了模块化然后基于SeaJS重写,配合Nginx concat功能实现了本地模块化开发,线上服务端合并。

    单品页前端模块的结构与划分

    概览

    图片描述

    上图可以看出,基本上最核心的模块都在首屏。每个模块都有单独的一/多个脚本。代码行数(LOC)由230+~1200+不等。通常来说代码行数越多代码复杂性就越高,逻辑越复杂。很难想象「购买方式」这种只有一行属性选择功能的代码行数却高达1200多行。其主要原因就在于购买方式所在的系统和其它首屏核心系统(库存、促销、地址选择、白条)都有逻辑上的耦合。

    看着不错,然而在一个前端工程师眼里至少应该是这样的(我只取了一些典型的模块,并不是全部):

    图片描述

    这就可以解释为什么有的时候只是加一个很小的东西我们都为考虑再三然后通过AB测试提取相关数据,最后后再进行决策。单品页的首屏可以说是寸土寸金。

    按什么维度划分模块

    起初我按模块的属性划分,比如核心、公共脚本、模块脚本。但用了一段时候以后发现这样划分在单品页这种大型系统中并不科学,因为这样划分出来的代码只有划分的人知道是什么规则,其它人接手代码很难快速掌握代码架构,而且尤其在模块比较多的时候不方便维护。

    后来我尝试完全以功能模块在页面上出现的位置维度划分。这样以来维护起来方便多了,需要修改某个模块代码只需要对照着图里面标识的模块信息就能轻易找到代码。

    整体核心模块

    我们按页面上的模块结构首屏划分出来这几个核心模块:

    • curmb - 面包屑
    • concat - 联系咨询相关店铺信息
    • prom - 价格促销信息
    • address - 地区库存选择,配送服务
    • color - 颜色尺码
    • buytype - 合约机购买方式
    • suits - 套装购买
    • jdservice - 增值服务
    • baitiao - 白条支付
    • buybtn - 购买按钮
    • info - 地区提示信息

    项目的整体树形结构是这样的:

    图片描述

    模块内部结构

    比如下面这个大图预览的功能,我全部放在一个文件夹里面维护,但是逻辑上的JavaScript模块是分离的,只是说文件夹(preview)就代表页面上的某一部分功能集合:

    图片描述

    注意文件夹的命名有一定的规则:

    • 模块脚本与样式名必须一样;
    • 需要制作sprite的图片统一放在module/i目录下面,生成的sprite图片也在其中;
    • 生成的mixin在模块根目录下,便于其它样式文件调用;

    我们再来看下自动生成生成的__sprite.scss是什么内容:

    /*__sprite.scss 自动生成 */
    
    @mixinsprite-arrow-next{
    
        width:22px;
    
        height:32px;
    
        background-image:url(i/__sprite.png);
    
        background-position:-0px-30px;
    
    }
    
    
    
    /*preview.scss 手动添加 */
    
    @import"./__sprite";
    
    .sprite-arrow-next{
    
        @includesprite-arrow-next;
    
    }

    注意引用的mixin名称和我们需要手动添加的样式类名一致。当然也可以直接生成一个类名对应的样式,但是灵活性不好。比如hover的时候是另外一张图片就没法自动生成了。

    前端技能树

    一、HTML

    DOM节点数

    与重业务逻辑的页面不同,重展示的页面一般具有很高的DOM节点数。比如京东首页,正常情况加载完页面一共有3500多个DOM节点,基本上全部用于展示商品信息、广告图和内容布局,页面上的三方异步服务也比较少。尤其像频道页基本上没有什么业务上的逻辑,全部是静态页面。这种页面的特点是更新换代频率高,一年两三次改版很正常,CMS做模块化后两天换个皮肤都是没问题的。但是这种思路并不适合单品页。单品页更重业务逻辑,同时展示层UI逻辑也有很多关系。

    我自己的经验是:页面上的DOM节点数绝对不能超过5000个,否则页面滚动的时候就会出现卡顿的情况,尤其是移动端。

    同步渲染还是异步加载

    理论情况下最好的做法是后端同步动态渲染页面,但是由于Web应用中很多功能都是用户行为驱动的。同步加载不可避免的消耗了后端服务资源。比如非首屏模块(公共头尾、评价)、点击事件触发的DOM内容(异步tab)。

    所以我的经验是:能放到后端做判断渲染的DOM就尽量放在后端(尤其是首屏)。这样做的好处有四点好处:

    1. 后端渲染页面相对稳定,不像前端JavaScript动态渲染DOM,可能因为脚本报错或者不可用造成模块都无法展示;
    2. 可访问性、SEO及用户体验也比较好。不会产生脚本的渲染抖动问题;
    3. 一定程度上减少了前端渲染页面的复杂性,减少前端代码复杂度;
    4. 逻辑统一到一个地方维护起来也方便,而且后端应该为业务逻辑负责,前端应该为展示UI交互负责。

    对于异步渲染的模块来说,后端通常需要判断「页面有什么元素」,以及元素之间的依赖对应关系;而前端需要专注于「元素应该怎么展示」,UI层面的交互以及模块与模块之前的逻辑关系。

    其实更多的时候异步是一种没有办法的办法,也就是说异步是其它方案都解决不了的情况下才考虑的。

    外链静态资源

    尽量使用外链CSS和JavaScript资源,一方面便于缓存,减少服务同步输出的资源浪费。IE 6里面会有一些可怪的bug,比如有内联样式style标签的页面A如果在另外一个页面B中的link标签中引用,那么这段style会在B页面也起作用。

    使用双协议的URL

    使用//来代替http:和https:浏览器会自动适应两种协议的资源访问,兼容性较好。注意IE 8下使用脚本更新src为双协议时会出现bug,建议使用location.protocol来判断然后做兼容处理。

    删除元素默认属性

    比如script标签默认的type就是text/javascript,如果script里面的内容是JavaScript时可以不用写type。另外如果要在页面里面插入一段不需要浏览器解析的HTML片段时可以将type写成text/x-template(任意不存在的type)用于放置模板文件,通常用来在脚本中获取其innerHTML而无任何负作用。

    给脚本控制元素加上类钩子

    在脚本中取页面元素使用J-前缀类名,与普通样式类分离。这样做会生成很多冗余的类名,但却很好的降低了样式和脚本的耦合,并且在重构和脚本职位分开团队里会是一条最佳实践。

    二、CSS

    样式分类

    所有页面只共享一个sass Mixin,里面包含了基础的sass语法糖、常用类(清浮动、页面整体颜色字体等)。

    模块级的样式分为两类:

    1. 与脚本无关的公共样式,单独在模块文件夹中组织。比如:按钮、标签页。全部放在common模块中维护;
    2. 与脚本相关的模块级样式,与对应模块脚本放在一起,可以引用common中的公共样式,但不可以被其它模块引用。

    雪碧图

    关于雪碧图我经验是:永远不要想把所有的图标拼合在一起。按模块而不是按页面去拼sprite更合理,更方便维护,然后配合构建工具自动接合生成样式文件才是最好的解决方案。当然如果你的页面比较简单,那这条规则并不适用。说到这个问题我就得把珍藏多年的图片拿出来show一把,用事实来说明为什么把所有图片都拼在一张图上就一定是对的。早期由于年轻笃信将所有的icon拼在一张图上才是完美的(图 1)

    图片描述

    后来维护起来实在不方便,就把按钮全部单独接合起来。注意,当时的按钮都是图片,设计方面要求的很严格。加入购物车按钮做的也非常漂亮(图 2)

    图片描述

    然后这些都不是最典型的,下面这个promise icon才是(图 3)

    图片描述

    从图里面可以看到,这个功能在第一个版本的时候只有7个icon,后来不断增加,最多的时候达到77个。以至于当时每周都会添加两个的频率。

    同时这个icon当时接合的时候技术上也有问题:不应该把文字也切到图片里面,主要原因是早期icon比较少加上外边框样式对齐的问题综合选择了直接使用图片。

    后来我就觉得这样是不对的。然后通过和产品的沟通,说明我的考虑以及新的解决方案后得到了认同。结果就是对图片不进行拼合,后台上传经过审核的不带文字icon,文字由接口输出,然后在产品上做了约定:icon最多不能超过4个,代码里也做了相应限制。这样就能保证页面上的请求数不会太多同时方便系统维护,问题得到了解决。

    适当使用DataURI

    这个在一些小图片场景方面特别适合,比如1*1的占位图、loading图等,不过IE 6并不支持这种写法,需要的时候可以加上一些兼容写法:

    .ELazy-loading{
    
        background:url(data:image/gif;base64,R0lGODlhKwAeAJEAAP///93d3Xq9VAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFFAAAACwDAA0AJQADAAACEpSPAhDtHxacqcr5Lm416f1hBQAh+QQJFAAAACwDAA0AJQADAAACFIyPAcLtDKKcMtn1Mt3RJpw53FYAACH5BAkUAAAALAMADQAlAAMAAAIUjI8BkL0CoxQtrYrenPjcrgDbVAAAOw==)centercenterno-repeat;
    
        *background-image:url(//misc.360buyimg.com/lib/skin/e/i/loading-jd.gif);
    
    }

    关于兼容性

    兼容性可以说是前端工程师在平常开发中花费很大量无意义工作的地方。关于兼容性我想说的是如果你不愿意去说服周围的人放弃或者让他们意识到兼容性是个不可能完全解决的问题,那么你就得为那些低级浏览器给你带来的痛苦埋单。

    其实更好的办法是你和设计、产品沟通然后给出一种分级支持的方案。把每种浏览器定义一个级别。然后在开发功能的时候以「渐进增强」的方式。通常来讲我们的解决方案是在低级浏览器里面保证流程正常进行、模块可以使用,但忽略一些无关紧要的错位、不透明等问题,在高级浏览器里面需要对设计稿进行精确还原,适当的加上一些井上添花在细节。比如微小的动画、逻辑细节上的处理等。

    举个例子吧,下面这个进度条表示预约的人数,它是接口异步加载完才展示的。如果加载完就立即设置进度条宽度会显得生硬无趣,但是如果加上一点动画效果的话就好多了。然而问题又来了,如果加上动画那么逻辑上这个进度条应该是一点点的增加,对应的人数也应该是逐个增加。于是我就做了个优化,让人数在这段时间内均匀的增加。这个细节并不是很容易被人发现,但是这种设计会让用户感觉很用心而且有意思:

    图片描述

    三、JavaScript

    图片描述

    单品页的脚本加载/执行顺序:

    1. 等待页面准备就绪(DOM Ready);
    2. 准备就绪后加载入口脚本(main.js),脚本负责其它功能模块的调度,动态接合模块通过seajs的require.async方法异步调用;
    3. 公共模块(common.js)负责初始化全局变量并挂载到pageConfig命名空间;
    4. 动态模块数组,这个是后端通过程序判断处理生成的一个模块名列表。一般只包含首屏需要加载的模块;
    5. 后加载模块(lazyinit.js)初始化,这个脚本只做一些页面滚动才加载的模块事件绑定。当模块出现在视口内再使用require.async异步加载模块的资源及初始化。

    入口脚本

    大致代码如下:

    /**
    
    * 模块入口(1. 公共脚本 2. 首屏模块资源 3. 非首屏「后加载模块」)
    
    */
    
    var entries=[];
    
    // 页面公共脚本样式
    
    entries.push('common');
    
    // 页面使用到的首屏模块(后端开发根据页面不同配置需要调用的模块)
    
    entries=entries.concat(config.modules);
    
    // 非首屏「后加载模块」
    
    entries.push('lazyinit');
    
    
    
    for(var i=0;i<entries.length;i++){
    
        entries[i]='MOD_ROOT/'+entries[i]+'/'+entries[i];
    
    }
    
    
    
    if(/debug=show_modules/.test(location.href))console.log(entries);
    
    
    
    require.async(entries,function(){
    
        var modules=Array.prototype.slice.call(arguments);
    
        var len=modules.length;
    
    
    
        for(var i=0;i<len;i++){
    
            var module=modules[i];
    
    
    
            if(module&&typeof module.init==='function'){
    
                module.init(config);
    
            }else{
    
                console.warn('Module[%s]must be exports a init function.',entries[i]);
    
            }
    
        }
    
    });

    注意模块路径中的MOD_ROOT是提前在页面定义好的一个seajs path。目的是为了把前端版本号更新的控制权释放给后端,从而解决了前后端依赖上线不同步造成的缓存延迟问题,配置脚本中只有几个定义好的路径:

    seajs.config({
    
        paths:{
    
            'MISC':'//misc.360buyimg.com',
    
            'MOD_ROOT':'//static.360buyimg.com/item/default/1.0.12/components',
    
            'PLG_ROOT':'//static.360buyimg.com/item/default/1.0.12/components/common/plugins',
    
            'JDF_UI'   :'//misc.360buyimg.com/jdf/1.0.0/ui',
    
            'JDF_UNIT':'//misc.360buyimg.com/jdf/1.0.0/unit'
    
        }
    
    });

    还有一点,在测试环境的页面中版本号(上面代码中的1.0.12是一个全量的版本号)是后端从URL上动态读取的(使用参数访问就可以命中对应版本item.jd.com/sku.html?version=1.0.12)。这样以来测试环境上就可以并行测试不同版本的需求,而且互不影响。当然如果不同版本的后端代码也有修改的话这样是不行的,因为后端代码也需要有个对应的版本号。

    不过我们已经解决了这个问题。后端会在测试环境里动态加载后端模板并且可以做到版本号与前端一致。这样以来配合git方便的分支策略就可以同时并行开发测试多个需求,不用单独配多个测试环境。什么?你还在使用SVN!哦。那当我没说过。

    事件处理模型

    客户端的JavaScript代码基本上都是事件驱动的,代码的加载解析依赖于浏览器提供的DOM事件。比如onload、mouseover、scroll等。

    事件驱动的的模型特别适用于异步编程,而JavaScript天生就是异步,所有的异步操作行为都最终会在一个回调函数(callback)中触发。

    比如单品页中价格接口,加载完成后需要更新DOM元素来展示实时价格;地区选择接口加载完成后会更新配送信息、库存/商品状态等,伪代码如下:

    /*onPriceReady 和onAreaChange 可以认为都是一个 Ajax 异步函数调用
    
     * code 1 和 code 2 执行到的时间是不确定先后顺序的
    
     */
    
    /* prom.js*/
    
    onPriceReady(function(price){
    
        // code 1
    
        $('#price').html(price);
    
    });
    
    
    
    /*address.js */
    
    onAreaChange(function(area){
    
        // code 2
    
        $('#stock').html(area.stockInfo);
    
    });

    上面的两段代码分别在两个脚本中维护,因为他们的逻辑相对独立。早期并没有关联关系。后来需求有变,他们之间需要共享一些对方的数据(切换地区后需要重新获取价格数据并展示)。但是物理上又不能放在一起通过使用全局变量的方式共享,而且它们都是异步加载接口后才取到数据的,并不好确定谁先谁后(非要做到那就只能用全局变量双向判断)。所以这样并不能很好的解决问题,而且代码的耦合度会成倍增加。

    这时候我们引入了一种设计模式来解决这种问题——发布者/订阅者,我们把这种模式抽象成了自定义事件代码来解决这一问题。这段代码是由YUI核心开发者NicholasC. Zakas实现的。代码很简单,事件对象主要有两个方法addListener(type,listener)和fire(event)。于是我们重构了上面的伪代码:

    /* prom.js*/
    
    // 在代码中注册一个地区变化事件,获取变化后的地区 id
    
    // 然后重新请求价格接口并展示
    
    Event.addListener('onAreaChange',function(data){
    
        getAreaPrice(data.areaIds)
    
    });
    
    
    
    onPriceReady(function(price){
    
        $('#price').html(price);
    
    
    
        Event.fire({
    
            type:'onPriceReady',
    
            data:'Any datayou want'
    
        })
    
    });
    
    
    
    /*address.js */
    
    onAreaChange(function(area){
    
        $('#stock').html(area.stockInfo);
    
    
    
        // 在地区变化后除了做自己该做的事情以外
    
        // 触发一个名为onAreaChange 的事件,用来
    
        // 通知其它订阅者事件完成,并传递地区相关参数
    
        // 这个时候在onAreaChange Ajax 回调函数
    
        // 中就只需要关心自己的逻辑,其它模块的耦合关系
    
        // 交给它们自己通过订阅事件来处理
    
        Event.fire({
    
            type:'onAreaChange',
    
            data:area.ids
    
        })
    
    });

    需要注意的一点是,必须确保事件先注册后触发执行,也就是说先addListener,再fire。

    一些典型的性能优化点

    基本上客户端的JavaScript性能问题都来自于DOM查找和遍历,在使用的时候一定要小心,可能不经意的一个操作就会损失很多性能,尤其在低端浏览器中。顺便多说一点,现代的JavaScript解释器本身是很快的,语言层面的性能问题很少遇到。DOM查找慢是因为浏览器给JavaScript访问页面提供的一套DOM API本身慢:

    1. 缓存DOM查找,同时DOM查找不要超过2000个,低级浏览器会卡顿;
    2. 不要使用链式调用find,如:find(‘li’).find(‘a’)而是find(‘li a’);
    3. 在切换元素显示状态的时候,如果元素很多。优先使用show()/hide()方法,而不是css(‘display’, ‘block/none’)前者有缓存,后者会强制触发reflow;
    4. 给节点添加data-xx属性在存放一些数据,通过使用jQuery的data(‘xx’)方法取更高效,减少DOM属性访问;
    5. 高密度事件(scroll,mousemove)触发场景请使用节流方法;
    6. 使用事件代理,而不是直接绑定。如果不确定代码被调用次数,可以先解除绑定再绑定具有命名空间的事件处理函数;
    7. 尽量少用DOM动画,使用CSS 3动画代替;

    前端工程化

    原由

    前端工程化其实并不是最近两年才有的概念。大约在2013年的时候Grunt问世的时候就已经有所涉及。这类打包工具主要的目的是自动化一些开发流程,我最早使用Grunt来构建代码的时候只解决了三个问题:

    1. 合并压缩优化样式脚本;
    2. 上线完自动备份;
    3. 单个文件打包到多目录(历史原因一个文件线上的路径有两种,需要传两个目录);

    当时我还在组内做过一个分享,有兴趣的可以去围观一下Best WorkflowWith Grunt

    其实这些工具出现的原因是:当时前端领域的各种基础设施很缺乏,而前端的工作内容又相对零散。工作时需要开很多的软件。再加上JavaScript语言本身也很弱,就连包管理这种基础的东西也没有内置,以至于模块化要通过一些第三方类库来实现,比如:RequireJS、SesJS。

    工具的重要性可以在我之前的一个分享中找到前端开发工具系列

    现状

    如今前端工程的生态环境由于NodeJS的出现已经变得很好了。你可以根据自己的需求选一个合适的直接用到项目里面。像Grunt、Gulp、browserify、webpack等。不过要明白这些工具的出现从另一方面证明了前端开发天生存在很多的问题:

    • HTML从诞生到HTML 5之前几乎没有任何变化,DOM性能天生缺失。所以才有了Virtual DOM这种东西;
    • CSS只是一门描述型的语言,没有变量、逻辑控制、语句。所以才出现了Sass、Less这种预编译工具;
    • JavaScript号称「高阶的(high-level)、动态的(dynamic)、弱类型的(untyped)、解释型(interpreted)编程语言,适合面向对象(oop)和函数式的(functional)编程风格」的编程语言,但是语言本身有很多问题(ES 6之前)。不适合大型项目的开发、没有一些高级特性的支持、同时被其它语言诟病的callback风格、单线程执行等。所以才出现了像TypeScript、Babel这种编译成JavaScript代码的语言;

    这些问题几乎都是历史性的原因和兼容性因素造成的。作为一名好的前端工程师要看清楚现状,然后按自己项目的需求去定制一些前端工程化的方案,而不是随波逐流。

    选择

    其实现在自己开发一套前端工程化/自动化流程的成本已经很低了,你只需要学习一些NodeJS的知识,配合NPM包管理机制,随手就搞出一个构建工具出来。因为并不需要你去实现什么东西,所有的东西都有现成的包。脚本压缩有UglifyJS、CSS优化有CSS-min、图片压缩优化有PNG-quant等。你只需要想清楚自己要达到什么目的,解决什么问题就可以抄家伙自己写一套工作流出来。

    我自己的经历也从Grunt、GulpJS到现在自造轮子。自己根据需求开发出来一套集成的打包工具,有兴趣的可以去围观一下Wooo

    当然你也可以不用任何打包工具,自己写一些NPM Script来完全定制化项目开发/测试/打包流程。我猜这也是为什么现在类似Grunt不再那么火,Gulp迟迟没有发布4.0版本的原因。写一个构建工具的成本太低了,而且这种集成的工具很难满足差异的开发需求。君不知已有人意识到了这一点么why-i-left-gulp-and-grunt-for-npm-scripts

    程序、设计、产品

    我始终认为程序、设计是为了产品服务的。好的产品是要重视设计的,好的(前端)工程师是要有一些审美素养。

    其实很多时候技术解决方案都是要根据产品的定位来设计的,了解产品需求以后才能定制出真正合适的高效的解决方案。好比前面讲到的那个sprite案例,如果一开始就和产品讨论好方案后来也不可能有那种失控的情况发生。在产品形成/上线前期能发现问题比上线后发现问题更容易解决。

    这部分内容和代码无关,就不多说了。然而早年我还有一次分享关于前端、改变

    总结

    关于单品页的前端开发本篇文章只是冰山一角,还有很多没有提及,每个小东西都可以单独写一篇文章来分享。随后希望可以有更多的总结和分享。


    展开全文
  • <template> <view class="goods-list"> <goods-list :goods="goods" @goodsItemClick="goGoodsDetail"></goods-list> <... import goodsList from '../../compon.
    <template>
    	<view class="goods-list">
    		<goods-list :goods="goods" @goodsItemClick="goGoodsDetail"></goods-list>
    		<view>我是有底线的</view>
    	</view>
    </template>
    <script>
    	import goodsList from '../../components/goods-list/goods-list.vue'
    	export default {
    		data() {
    			return {
    				pageindex: 1,
    				goods: [],
    				flag: false
    			}
    		},
    		components: {"goods-list": goodsList},
    		methods: {
    			async goodsList(callBack) {
    				const res = await uni.$myRequest({
    					url: '/api/getGoods?pageindex='+this.pageindex
    				})
    				this.goods = [...this.goods, res.data.message]
    				callBack && callBack()
    			},
    			// 跳转到商品详情页
    			goGoodsDetail(id) {
    				uni.navigatorTo({
    					url: '/pages/goods-detail/goods-detail?id='+id
    				})
    			}
    		},
    		onLoad() {
    			this.getGoodsList()
    		},
    		onReachBottom() {
    			// 上拉加载
    			if (this.goods.length < 10) return this.flag = true
    			console.log('触底了')
    			this.pageindex++
    			this.goodsList()
    		},
    		onPullDownRefresh() {
    			//  下拉刷新
    			console.log('下拉刷新了')
    			this.pageindex = 1
    			this.goods = []
    			this.falg = false
    			setTimeout(()=>{
    				this.goodsList(()=>{
    					uni.stopPullDownRefresh()
    				})
    			}, 1000)
    		}
    	}
    </script>
    
    <style>
    	.content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    </style>
    
    <template>
    	<view class="goods-list">
    		<view class="goods-item" v-for="item in goods" :key="item.id" @click="navigator(item.id)">
    			<iamge :src="item.img_url"></iamge>
    			<view class="price">
    				<text>{{item.sell_price}}</text>
    				<text>{{item.market_price}}</text>
    			</view>
    			<view class="name">
    				{{item.title}}
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				
    			}
    		},
    		props:['goods'],
    		methods: {
    			navigator(id) {
    				this.$emit('goodsItemClick', id)
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>
    

     

    展开全文
  • 当用户搜索到商品,肯定会点击查看,就会进入商品详情页,接下来我们完成商品详情页的展示。 商品详情浏览量比较大,并发高,我们会独立开启一个微服务,用来展示商品详情。 1.1. 创建module pom.xml依赖: <?...
  • 当用户搜索到商品,肯定会点击查看,就会进入商品详情页,接下来我们完成商品详情页的展示。 商品详情浏览量比较大,并发高,我们会独立开启一个微服务,用来展示商品详情。 1.1. 创建module pom.xml依赖: <?...
  • 小米项目源代码.zip

    2020-04-04 20:50:06
    小米商场项目 首页,详情页 商品详情页 商品订单页 购物车订单页 登录注册页 技术栈:HTML/CSS/JavaScript、Jquery PHP MySQL GULP sass require.js 附带项目开发流程及说明思维导图
  • 现在大多数的电商APP的详情页长得几乎都差不多,几乎都是上面一个商品的图片,当你滑动的时候,会有Tab悬浮在上面,这样做用户体验确实不错,如果Tab滑上去,用户可能还需要滑下来,在来点击Tab,这样确实很麻烦。...
  • 我是一名学生,在期末课程设计中做了一个商品详情页,供大家参考,哪里有不合适的地方还请指出,反正我又不改哈哈哈,开个小玩笑,如有好的想法可一起分享。
  • 高仿小米商城网页,和小米商城页面尽可能的一模一样,是我们WEB课最后的结课综合大作业,里面包含了小米商城首页页面、详情页面、购物车页面等页面,用的都是最基础的html语言,外部样式表、内部样式表和javascript...
  • 小米商城网页制作代码

    千次阅读 2021-02-28 21:01:09
    采用的架构为html+css+js HTML <!DOCTYPE html> <... ...小米闪购-小米商城</title> <!-- 引用图标 --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <!-
  • 小米商城官网部分代码

    千次阅读 2020-02-29 15:27:29
    CSS部分 .top-bar-wrapper { width: 100%; height: 40px; line-height: 40px; background-color: #333333; } .tool-bar a { font-size: 14px; color: #b0b0b0; display: block;....tool...
  • 仿小米商城html+js.rar

    2020-08-19 20:08:50
    通过HTML+CSS+JS实现仿小米商城项目,包括轮播图,各模块动态效果及商品详情页的展示,通过JS实现登录页面和注册页面的表单验证。
  • html+css---仿小米商品展示+拓展

    千次阅读 2019-04-07 15:13:45
    html+css—仿小米商品展示 界面和实现功能 hover后: 功能的话:就是hover之后显示 用到的知识点 transform (2D/3D转换)和 transition (过渡) transform的 translate(平移属性) 用法:transform:...
  • 小米官网完整布局html加分析,jq轮播特效,自动定时,左右切换,京东轮播,调试加笔记分析
  • 2019-8-24 小米商城商品展示界面

    千次阅读 2019-08-24 20:45:50
    Java入门项目java前端制作简易小米商城商品展示界面具体内容界面布局及信息显示项目实施成果展示 java前端制作简易小米商城商品展示界面 项目要求制作一个小型的商品界面 ,用到js来引用json数据显示商品信息 需求如...
  • 完整小米商城项目.rar

    2019-12-16 19:21:12
    最最最完整的小米商城项目资源,内含数据库生成代码,使用指导说明 实现功能:后台管理系统的商品管理,订单管理,用户管理 前台页面实现功能: 商品的浏览,详情页,购物车,商品支付
  • 前端小白一个,最近学习了CSS3的transition属性,就想做一个效果练练手,下面是参考小米商城的商品展示做的一个动态效果。下面贴上代码:&...小米商品展示css3动画&lt;/title&gt; &am
  • 小米商城网络源代码参考,
  • 手把手教你做小米商城 商品展示页面 思路说明 1 先确定清除基本的默认样式跟基本的css 样式 /* 清除默认样式 */ * { margin: 0; padding: 0; } input { outline: none; border: 0; } a { text-...
  • 4、解析分类编号 - 通过查看网页源代码发现:应用的分类信息在小米商城的首页中存在的,则需要解析网页的首页源代码。 - 结合控制台可以发现:所有的应用信息都是存储在 的所有li标签中 。 【结论】则仅需将页面...
  • 登录注册搜索详情页

    千次阅读 2018-01-19 10:23:02
     android:text="搜索商品"  android:textSize="25dp" />    android:id="@+id/image"  android:layout_width="25dp"  android:layout_height="25dp"  android:layout_alignParentRight="true...
  • 仿小米手机商城的全套页面。包含首页,订单页,列表页,商品详情页,个人中心,购物车,等等几十个页面。 有轮播的实现,demo 基于html css 实现小米官网部分内容搭建。基本功能都实现了<图片资源都在里面>
  • 实现的代码 MainActivity页面一 public class MainActivity extends AppCompatActivity { private EditText edidtext ; private Button button ; @Override protected void onCreate ( ...
  • 仿小米商城的全套页面。包含首页,订单页,列表页,详情页,个人中心,购物车,等等几十个页面。
  • 2、修复了商品详情页在chrome下经常崩溃的问题 3、新增购物车浮层,优化了用户体验 4、修复了购物车页选择性删除商品无效的bug 5、首页轮播更新,新增多个活动海报页 6、多处性能优化,优化了响应速度 新...
  • 小米商城项目(上)

    2021-05-05 22:44:42
    前端应用到的技术栈:Vue+Vue-router+Vuex+Element-ui+Axios,参考小米商城实现,包含了首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面;...
  • 前端包含了11个页面:首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。 实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 483
精华内容 193
关键字:

小米商品详情页代码