leyou
/
141.bak.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>乐优商城--商品详情页</title>
	 <link rel="icon" href="/assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-item.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-zoom.css" />
    <link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css" />

	<style type="text/css">
	.goods-intro-list li {
		display: inline-block;
		width: 300px;
	}
       .Ptable {
           margin: 10px 0;
       }
       .Ptable-item {
            padding: 12px 0;
            line-height: 220%;
            color: #999;
            font-size: 12px;
               border-bottom: 1px solid #eee;
        }
       .Ptable-item h3 {
           width: 110px;
           text-align: right;
       }
       .Ptable-item h3, .package-list h3 {
           font-weight: 400;
           font-size: 12px;
           float: left;
       }
       h3 {
           display: block;
           font-size: 1.17em;
           -webkit-margin-before: 1em;
           -webkit-margin-after: 1em;
           -webkit-margin-start: 0px;
           -webkit-margin-end: 0px;
           font-weight: bold;
       }
       .Ptable-item dl {
           margin-left: 110px;
       }
       dl {
           display: block;
           -webkit-margin-before: 1em;
           -webkit-margin-after: 1em;
           -webkit-margin-start: 0px;
           -webkit-margin-end: 0px;
       }
       .Ptable-item dt {
           width: 160px;
           float: left;
           text-align: right;
           padding-right: 5px;
       }
       .Ptable-item dd {
           margin-left: 210px;
       }
       dd {
           display: block;
           -webkit-margin-start: 40px;
       }
       .package-list {
           padding: 12px 0;
           line-height: 220%;
           color: #999;
           font-size: 12px;
           margin-top: -1px;
       }
       .package-list h3 {
           width: 130px;
           text-align: right;
       }
       .package-list p {
           margin-left: 155px;
           padding-right: 50px;
       }
</style>

</head>

<body>

<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<div id="itemApp">
	<div id="nav-bottom">
		<ly-top />
	</div>
	<div class="py-container">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">
					<li>
						<a href="#">手机</a>
					</li>
					<li>
						<a href="#">手机通讯</a>
					</li>
					<li>
						<a href="#">手机</a>
					</li>
					<li>
						<a href="#">小米（MI）</a>
					</li>
					<li class="active">小米 MI 6.1 手机  </li>
				</ul>
			</div>
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
							<span class="jqzoom">
								<img :jqimg="images[0]" src="images[0]" width="400px" height="400px"/>
							</span>
						</div>
						<!--下方的缩略图-->
						<div class="spec-scroll">
							<a class="prev">&lt;</a>
							<!--左右按钮-->
							<div class="items">
								<ul>
									<li v-for="(img,i) in images" :key="i">
                                        <img :src="img" :bimg="img" onmousemove="preview(this)" />
                                    </li>

								</ul>
							</div>
							<a class="next">&gt;</a>
						</div>
					</div>
				</div>
                <!--商品展示-->
				<div class="fr itemInfo-wrap">
					<div class="sku-name">
						<h4 v-text="sku.title">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h4>
					</div>
					<!--副标题-->
					<div class="news"><span>含原装壳丨变焦双摄丨骁龙处理器丨NFC丨<a href="https://item.jd.com/22320392453.html" target="_blank">小米note3骁龙八核处理器</a></span></div>
					<div class="summary">
						<div class="summary-wrap">
							<div class="fl title"><i>价　　格</i></div>
							<div class="fl price">
								<i>¥</i><em v-text="ly.formatPrice(sku.price)">5299.00</em><span>降价通知</span>
							</div>
							<div class="fr remark"><i>累计评价</i><em>612188</em></div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<i class="red-bg">加价购</i>
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
购热销商品</em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">上海 <span>有货</span></em>
							</div>
						</div>
					</div>
					<div class="clearfix choose">
                        <!--规格属性列表-->

                        <div id="specification" class="summary-wrap clearfix">
                            <dl v-for="(v,k) in specialSpec" :key="k">
                                <dt>
                                    <div class="fl title">
                                        <i>{{paramMap[k]}}</i>
                                    </div>
                                </dt>
                                <dd v-for="(o,i) in v" :key="i" @click="indexes[k] = i">
                                    <a href="javascript:;" :class="{selected:i === indexes[k]}">
                                        {{o}}<span title="点击取消选择">&nbsp;</span>
                                    </a>
                                </dd>
                            </dl>
                        </div>

						<div class="summary-wrap">
							<div class="fl title">
								<div class="control-group">
									<div class="controls">
										<input autocomplete="off" type="text" disabled value="1" minnum="1" class="itxt" />
										<a href="javascript:void(0)" class="increment plus">+</a>
										<a href="javascript:void(0)" class="increment mins">-</a>
									</div>
								</div>
							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<a href="success-cart.html" target="_blank" class="sui-btn  btn-danger addshopcar">加入购物车</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
				<div class="fl aside">
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#index" data-toggle="tab">
								<span>相关分类</span>
							</a>
						</li>
						<li>
							<a href="#profile" data-toggle="tab">
								<span>推荐品牌</span>
							</a>
						</li>
					</ul>
					<div class="tab-content tab-wraped">
						<div id="index" class="tab-pane active">
							<ul class="part-list unstyled">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>Iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goods-list unstyled">
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part01.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div id="profile" class="tab-pane">
							<p>推荐品牌</p>
						</div>
					</div>
				</div>
				<div class="fr detail">
					<div class="clearfix fitting">
						<h4 class="kt">选择搭配</h4>
						<div class="good-suits">
							<div class="fl master">
								<div class="list-wrap">
									<div class="p-img">
										<img src="/img/_/l-m01.png" />
									</div>
									<em>￥5299</em>
									<i>+</i>
								</div>
							</div>
							<div class="fl suits">
								<ul class="suit-list">
									<li class="">
										<div id="">
											<img src="/img/_/dp01.png" />
										</div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>39</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp02.png" /> </div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>50</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp03.png" /></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>59</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp04.png" /></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>99</span>
  </label>
									</li>
								</ul>
							</div>
							<div class="fr result">
								<div class="num">已选购0件商品</div>
								<div class="price-tit"><strong>套餐价</strong></div>
								<div class="price">￥5299</div>
								<button class="sui-btn  btn-danger addshopcar">加入购物车</button>
							</div>
						</div>
					</div>
                    <!--属性列表-->
					<div class="tab-main intro">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
							<li>
								<a href="#four" data-toggle="tab">
									<span>商品评价</span>
								</a>
							</li>
							<li>
								<a href="#five" data-toggle="tab">
									<span>手机社区</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<div id="one" class="tab-pane active">
								<ul class="goods-intro-list unstyled" style="list-style: none;">
									<li>分辨率：1920*1080(FHD)</li>
									<li>后置摄像头：1200万像素</li>
									<li>前置摄像头：500万像素</li>
									<li>核 数：其他</li>
									<li>频 率：以官网信息为准</li>
									<li>品牌： Apple</li>
									<li>商品名称：APPLEiPhone 6s Plus</li>
									<li>商品编号：1861098</li>
									<li>商品毛重：0.51kg</li>
									<li>商品产地：中国大陆</li>
									<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
									<li>系统：苹果（IOS）</li>
									<li>像素：1000-1600万</li>
									<li>机身内存：64GB</li>
								</ul>
								<!--商品详情-->
                                <div class="intro-detail">
                                    <div><p><img src="https://img10.360buyimg.com/imgzone/jfs/t5995/1/7908464401/136614/51c2290d/5982a252N4a790bd1.jpg?t=1501733480589" height="866" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t5863/213/9039750883/30306/fde5971d/5982a252Na8f28026.jpg?t=1501733480589" height="498" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t5578/338/9037337052/66102/a82846a0/5982a252Nb1adfeec.jpg?t=1501733480589" height="497" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t5818/56/9081857043/61584/aafbbc04/5982a245Nbe37559a.jpg?t=1501733480589" height="485" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t7018/209/1552996323/87198/5749762a/5982a249N84154f22.jpg?t=1501733480589" height="721" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t5986/33/7980167593/63322/3982962e/5982a252Nd6ec5364.jpg?t=1501733480589" height="454" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t5857/174/9054258605/45119/515d8509/5982a251Nbc9583a1.jpg?t=1501733572961" height="413" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t7009/205/1569901050/192865/5f953f3e/5982a252N4b6661f1.jpg?t=1501733572961" height="1254" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t6763/197/1526580639/78238/cc50506a/5982a249N05c96621.jpg?t=1501733572961" height="828" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t5725/101/8989390398/102537/1dd15856/5982a252N0299a5db.jpg?t=1501733572961" height="499" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t6898/349/1546231822/177383/461d16f2/5982a244N6a3a6e5f.jpg?t=1501733572961" height="932" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t5770/356/9153659851/213088/636075da/5982a252Nae801bca.jpg?t=1501733572961" height="1132" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t6985/198/1511997574/192778/248b2aef/5982a252N9241ae7f.jpg?t=1501733572961" height="1039" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t5716/135/9089105362/97594/3780c3fb/5982a252N5077ed00.jpg?t=1501733572961" height="615" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t5668/99/9051614277/222334/9c40e22e/5982a244N1a441128.jpg?t=1501733572961" height="1041" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t7015/220/1543840410/77449/a0371158/5982a252Nc46e18d1.jpg?t=1501733572961" height="581" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t6040/127/7935047692/156834/710ae9e0/5982a252N94b877e8.jpg?t=1501733572961" height="1042" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t6997/233/1507927618/106944/b34776e0/5982a25aN33f834e9.jpg?t=1501733572961" height="1040" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t5755/27/9193565146/96849/67796937/5982a24dNf05d92bf.jpg?t=1501733572961" height="796" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t5707/251/9105152749/149455/c1518586/5982a25aN585ae286.jpg?t=1501733572961" height="1029" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t7093/344/631071984/317090/33075c50/5982a257N65657a49.jpg?t=1501733572961" height="1384" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t5731/334/9050019233/90211/d1592ff9/5982a25bN2acd1f9d.jpg?t=1501733572961" height="767" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t6766/246/1551505636/161499/55a52190/5982a25bN9d84e892.jpg?t=1501733572961" height="1033" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t5821/337/9054326197/56345/dac5fc6c/5982a25bN47c6c423.jpg?t=1501733572961" height="780" width="750"><img src="https://img10.360buyimg.com/imgzone/jfs/t5707/302/9122975330/181932/7a3d50ab/5982a25bN5b05a771.jpg?t=1501733572961" height="1218" width="750"><img src="//img10.360buyimg.com/imgzone/jfs/t18514/185/1728309269/108473/6f836dc6/5ad57184N73cf091d.jpg?t=1523937668595" height="450" width="750"></p></div>
                                </div>
							</div>
							<div id="two" class="tab-pane">
								<div class="Ptable">
    <div class="Ptable-item" v-for="group in specs">
        <h3>{{group.name}}</h3>
        <dl>
            <span v-for="param in group.params">
              <dt>{{param.name}}</dt><dd>{{param.value + (param.unit || '')}}</dd>
            </span>
        </dl>
    </div>

</div>
<div class="package-list">
    <h3>包装清单</h3>
    <p>手机X1、快速指南X1、华为SuperCharge 充电器X1、三包凭证X1、Type-C 数字耳机X1、Type-C 数据线X1、取卡针X1、TPU保护壳X1、USB Type-C转3.5mm耳机转接线X1（备注：最终以实物为准）</p>
</div>

							</div>
							<div id="three" class="tab-pane">
								<p>售后保障</p>
							</div>
							<div id="four" class="tab-pane">
								<p>商品评价</p>
							</div>
							<div id="five" class="tab-pane">
								<p>手机社区</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--like-->
			<div class="clearfix"></div>
			<div class="like">
				<h4 class="kt">猜你喜欢</h4>
				<div class="like-list">
					<ul class="yui3-g">
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike01.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>3699.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有6人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike02.png" />
								</div>
								<div class="attr">
									<em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4388.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike03.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike04.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike05.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike06.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/common.js"></script>

<!--// 填充模型-->
<!--data.put("spu", spu);-->
<!--data.put("detail", detail);-->
<!--data.put("skus", skus);-->
<!--data.put("categories", categories);-->
<!--data.put("brand", brand);-->
<!--data.put("specGroups", specGroups);-->
<script>
    // 特有规格参数的模板
    const specialSpec = JSON.parse("{\"4\":[\"\u9676\u74F7\u9ED1\u5C0A\u4EAB\u7248\",\"\u4EAE\u84DD\u8272\",\"\u4EAE\u9ED1\u8272\",\"\u4EAE\u767D\u8272\"],\"12\":[\"6GB\"],\"13\":[\"128GB\"]}");
    // 规格参数组
    const specGroups = [{"id":1,"cid":76,"name":"\u4E3B\u4F53","params":[{"id":1,"cid":76,"groupId":1,"name":"\u54C1\u724C","numeric":false,"unit":"","generic":true,"searching":false,"segments":""},{"id":2,"cid":76,"groupId":1,"name":"\u578B\u53F7","numeric":false,"unit":"","generic":true,"searching":false,"segments":""},{"id":3,"cid":76,"groupId":1,"name":"\u4E0A\u5E02\u5E74\u4EFD","numeric":true,"unit":"\u5E74","generic":true,"searching":false,"segments":""}]},{"id":2,"cid":76,"name":"\u57FA\u672C\u4FE1\u606F","params":[{"id":4,"cid":76,"groupId":2,"name":"\u673A\u8EAB\u989C\u8272","numeric":false,"unit":"","generic":false,"searching":false,"segments":""},{"id":5,"cid":76,"groupId":2,"name":"\u673A\u8EAB\u91CD\u91CF\uFF08g\uFF09","numeric":true,"unit":"g","generic":true,"searching":false,"segments":""},{"id":6,"cid":76,"groupId":2,"name":"\u673A\u8EAB\u6750\u8D28\u5DE5\u827A","numeric":false,"unit":"","generic":true,"searching":false,"segments":""}]},{"id":3,"cid":76,"name":"\u64CD\u4F5C\u7CFB\u7EDF","params":[{"id":7,"cid":76,"groupId":3,"name":"\u64CD\u4F5C\u7CFB\u7EDF","numeric":false,"unit":"","generic":true,"searching":true,"segments":""}]},{"id":4,"cid":76,"name":"\u4E3B\u82AF\u7247","params":[{"id":8,"cid":76,"groupId":4,"name":"CPU\u54C1\u724C","numeric":false,"unit":"","generic":true,"searching":true,"segments":""},{"id":9,"cid":76,"groupId":4,"name":"CPU\u578B\u53F7","numeric":false,"unit":"","generic":true,"searching":false,"segments":""},{"id":10,"cid":76,"groupId":4,"name":"CPU\u6838\u6570","numeric":false,"unit":"","generic":true,"searching":true,"segments":""},{"id":11,"cid":76,"groupId":4,"name":"CPU\u9891\u7387","numeric":true,"unit":"GHz","generic":true,"searching":true,"segments":"0-1.0,1.0-1.5,1.5-2.0,2.0-2.5,2.5-"}]},{"id":5,"cid":76,"name":"\u5B58\u50A8","params":[{"id":12,"cid":76,"groupId":5,"name":"\u5185\u5B58","numeric":false,"unit":"","generic":false,"searching":true,"segments":""},{"id":13,"cid":76,"groupId":5,"name":"\u673A\u8EAB\u5B58\u50A8","numeric":false,"unit":"","generic":false,"searching":true,"segments":""}]},{"id":6,"cid":76,"name":"\u6444\u50CF\u5934","params":[{"id":16,"cid":76,"groupId":6,"name":"\u524D\u7F6E\u6444\u50CF\u5934","numeric":true,"unit":"\u4E07","generic":true,"searching":true,"segments":"0-500,500-1000,1000-1500,1500-2000,2500-"},{"id":17,"cid":76,"groupId":6,"name":"\u540E\u7F6E\u6444\u50CF\u5934","numeric":true,"unit":"\u4E07","generic":true,"searching":true,"segments":"0-500,500-1000,1000-1500,1500-2000,2500-"}]},{"id":7,"cid":76,"name":"\u7535\u6C60\u4FE1\u606F","params":[{"id":18,"cid":76,"groupId":7,"name":"\u7535\u6C60\u5BB9\u91CF\uFF08mAh\uFF09","numeric":true,"unit":"mAh","generic":true,"searching":true,"segments":"0-2000,2000-3000,3000-4000,4000-"}]},{"id":11,"cid":76,"name":"\u5C4F\u5E55","params":[{"id":14,"cid":76,"groupId":11,"name":"\u4E3B\u5C4F\u5E55\u5C3A\u5BF8\uFF08\u82F1\u5BF8\uFF09","numeric":true,"unit":"\u82F1\u5BF8","generic":true,"searching":true,"segments":"0-4.0,4.0-5.0,5.0-5.5,5.5-6.0,6.0-"},{"id":15,"cid":76,"groupId":11,"name":"\u5206\u8FA8\u7387","numeric":false,"unit":"","generic":true,"searching":false,"segments":""}]}];
    // 规格参数
    const paramMap = {};
    specGroups.forEach(g => {
        g.params.forEach(p => {
            paramMap[p.id] = p.name;
        })
    });
    // 对选中的sku的索引初始化
    const indexes = {};
    Object.keys(specialSpec).forEach(k => {
        indexes[k] = 0;
    })
    // skus
    const skus = [{"id":27359021526,"spuId":141,"title":"\u5C0F\u7C73 MI 8 \u624B\u673A  \u9676\u74F7\u9ED1\u5C0A\u4EAB\u7248 6GB 128GB","images":"http:\/\/image.leyou.com\/images\/10\/7\/1524297598540.jpg","price":399900,"ownSpec":"{\"4\":\"\u9676\u74F7\u9ED1\u5C0A\u4EAB\u7248\",\"12\":\"6GB\",\"13\":\"128GB\"}","indexes":"0_0_0","enable":true,"createTime":"2018-06-12T10:47:27.000+08:00","lastUpdateTime":"2018-06-12T10:47:27.000+08:00","stock":9999},{"id":27359021527,"spuId":141,"title":"\u5C0F\u7C73 MI 8 \u624B\u673A  \u4EAE\u84DD\u8272 6GB 128GB","images":"http:\/\/image.leyou.com\/images\/15\/5\/1524297599029.jpg","price":309900,"ownSpec":"{\"4\":\"\u4EAE\u84DD\u8272\",\"12\":\"6GB\",\"13\":\"128GB\"}","indexes":"1_0_0","enable":true,"createTime":"2018-06-12T10:47:27.000+08:00","lastUpdateTime":"2018-06-12T10:47:27.000+08:00","stock":9999},{"id":27359021528,"spuId":141,"title":"\u5C0F\u7C73 MI 8 \u624B\u673A  \u4EAE\u9ED1\u8272 6GB 128GB","images":"http:\/\/image.leyou.com\/images\/12\/13\/1524297599389.jpg","price":279900,"ownSpec":"{\"4\":\"\u4EAE\u9ED1\u8272\",\"12\":\"6GB\",\"13\":\"128GB\"}","indexes":"2_0_0","enable":true,"createTime":"2018-06-12T10:47:27.000+08:00","lastUpdateTime":"2018-06-12T10:47:27.000+08:00","stock":9999},{"id":27359021529,"spuId":141,"title":"\u5C0F\u7C73 MI 8 \u624B\u673A  \u4EAE\u767D\u8272 6GB 128GB","images":"http:\/\/image.leyou.com\/images\/13\/3\/1524297599775.jpg","price":289900,"ownSpec":"{\"4\":\"\u4EAE\u767D\u8272\",\"12\":\"6GB\",\"13\":\"128GB\"}","indexes":"3_0_0","enable":true,"createTime":"2018-06-12T10:47:27.000+08:00","lastUpdateTime":"2018-06-12T10:47:27.000+08:00","stock":9999}];
    // 全局规格参数
    const genericSpec = JSON.parse("{\"1\":\"\u5C0F\u7C73\uFF08MI\uFF09\",\"2\":\"MI8\",\"3\":2017,\"5\":180,\"6\":\"\u5176\u5B83\",\"7\":\"Android\",\"8\":\"\u9A81\u9F99\uFF08Snapdragon)\",\"9\":\"\u9A81\u9F99835\uFF08MSM8998\uFF09\",\"10\":\"\u516B\u6838\",\"11\":2.45,\"14\":5.15,\"15\":\"1920*1080\",\"16\":800,\"17\":1200,\"18\":3350}");

</script>


<script>
    var itemVm = new Vue({
        el:"#itemApp",
        data:{
            ly,
            skus,
            paramMap,
            specialSpec,
            indexes,
            genericSpec,
            specGroups,
        },
        components:{
            lyTop: () => import('/js/pages/top.js')
        },
        computed:{
            sku(){
                const index = Object.values(this.indexes).join("_");
                return this.skus.find(s => s.indexes = index);
            },
            images(){
                return this.sku.images ? this.sku.images.split(",") : [];
            },
            specs(){
                // 获取sku中的特有规格参数
                const ownSpec = JSON.parse(this.sku.ownSpec);
                // 填写规格值
                this.specGroups.forEach(g => {
                    g.params.forEach(p => {
                        if(p.generic){
                            // 通用属性
                            p.value = this.genericSpec[p.id]
                        }else{
                            // 特有属性
                            p.value = ownSpec[p.id]
                        }
                    })
                })
                return this.specGroups;
            },
        }
    });
</script>

<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#service").hover(function(){
		$(".service").show();
	},function(){
		$(".service").hide();
	});
	$("#shopcar").hover(function(){
		$("#shopcarlist").show();
	},function(){
		$("#shopcarlist").hide();
	});

})
</script>
<script type="text/javascript" src="/js/model/cartModel.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script>
<script type="text/javascript" src="index/index.js"></script>
</body>

</html>