sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品详情</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
		<meta content="yes" name="apple-mobile-web-app-capable"/>
		<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
		<meta content="telephone=no" name="format-detection"/>
		<link href="../../css/aui.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/html.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/storeInfo.css" rel="stylesheet" type="text/css"/>
		<style>
			.aui-product-title h2 {
				font-size: 0.7rem
			}
			.aui-card {
				width: 90%;
				margin-left: 5%;
			}
			.aui-card ul {
				display: flex;
				display: -webkit-flex;
				flex-wrap: wrap;
				background-color: #f5f5f5;
			}
			.aui-card ul li {
				width: 50%;
				border: 1px solid #ddd;
				padding: 2%;
				text-align: center;
				font-size: 0.8rem;
			}
			.aui-card-image {
				width: 90%;
				margin-left: 5%;
				margin-top: 10px;
				margin-bottom: 10px;
			}
			.aui-card-image img {
				width: 100%;
			}
			.zmq-left {
				width: 30%;
				text-align: center;
				height: 5rem;
			}
			.zmq-left img {
			   width : 4rem;
			   height: 4rem;
			   margin: 0 auto;
			}
			.zmq-right {
				width: 65%
			}
		</style>
	</head>
	<body>
		<section class="aui-scrollView" id="app" v-cloak>
			<div class="img_gallery zmq-bg-white" id="commodity">
				<div class="main_img">
					<ul>
						<li>
							<img style="height: 320px" v-bind:src="info.imgPath ? info.imgPath : '../../image/noimg.png'" v-on:click="look(info.imgPath)">
						</li>
						<!--<li>
						<img src="../../image/11.png" alt="">
						</li>
						<li>
						<img src="../../image/11.png" alt="">
						</li>
						<li>
						<img src="../../image/11.png" alt="">
						</li>
						<li>
						<img src="../../image/11.png" alt="">
						</li>-->
					</ul>
				</div>
				<!--	<div class="img_font">
				<span>1/5</span>
				<span>2/5</span>
				<span>3/5</span>
				<span>4/5</span>
				<span>5/5</span>
				</div>-->
			</div>
			<div class="zmq-flex">
				<div class="zmq-left">
				    <!--<img src="../../image/noimg.png" />-->
					<img v-bind:src="info.simpleImgPath ? info.simpleImgPath : '../../image/noimg.png'" v-on:click="look(info.simpleImgPath)"/>
				</div>
				<div class="zmq-right">
					<div class="aui-product-head aui-footer-flex zmq-bg-white">
						物料编码：{{info.materialCode}}
					</div>
					<div class="aui-product-title zmq-bg-white">
						<h2>物料描述：{{info.materialName}}</h2>
					</div>
				</div>
			</div>
			<div class="aui-card-list zmq-margin-top-10">
				<div class="aui-card-list-header">
					商品详细参数
				</div>
				<!-- 表格展示 -->
				<div class="aui-card">
					<ul>
						<li>
							品牌
						</li>
						<li>
							{{info.brand}}
						</li>
						<li>
							规格
						</li>
						<li>
							{{info.specs}}
						</li>
						<li>
							花纹深度
						</li>
						<li>
							{{info.patternDeep}}
						</li>
						<li>
							花纹缩写
						</li>
						<li>
							{{info.pattern}}
						</li>
						<li>
							层级
						</li>
						<li>
							{{info.level}}
						</li>
					</ul>
				</div>
				<!-- 轮胎介绍 -->
				<!--<div class="aui-card-image">
					<img src="../../image/lt.jpg" v-on:click="look('../../image/lt.jpg')"/>
				</div>-->
				<!-- 表格展示 -->
				<div class="aui-card">
					<ul>
						<li>
							负荷指数
						</li>
						<li>
							{{info.loadIndex}}
						</li>
						<li>
							速度等级
						</li>
						<li>
							{{info.speedLevel}}
						</li>
						<li>
							名义断面宽
						</li>
						<li>
							{{info.sectionWidth}}
						</li>
						<li>
							轮毂直径
						</li>
						<li>
							{{info.rimDiam}}
						</li>
						<li>
							外直径
						</li>
						<li>
							{{info.outerDiam}}
						</li>
						<li>
							宽高比
						</li>
						<li>
							{{info.heightWidthRadio}}
						</li>
						<li>
							胎侧
						</li>
						<li>
							{{info.tyreSide}}
						</li>
					</ul>
				</div>
			</div>
		</section>
		<script type="text/javascript" src="../../script/api.js"></script>
		<script type="text/javascript" src="../../script/jquery.min.js"></script>
		<script type="text/javascript" src="../../script/tab.js"></script>
		<script type="text/javascript" src="../../script/layer.js"></script>
		<script type="text/javascript" src="../../script/touchSlider.js"></script>
		<script type="text/javascript" src="../../script/vue.js"></script>
		<script type="text/javascript" src="../../script/httpRequest.js"></script>
		<script type="text/javascript" src="../../script/vue_plugins.js"></script>
		<script type="text/javascript">
			apiready = function() {
				var shopid = api.pageParam.shopid;
				new Vue({
					el : '#app',
					data : {
						shopid : shopid,
						//  查看详情
						getInfoUrl : 'getInfoUrl',
						//  商品详情
						info : '',
						imageBrowser : '',
					},
					methods : {
						init : function() {
							// 配置查看大图
							this.imageBrowser = api.require('imageBrowser');
							this.getStoreInfo();
							$(".main_img").touchSlider({
								flexible : true,
								speed : 200,
								btn_prev : $("#btn_prev"),
								btn_next : $("#btn_next"),
								paging : $(".point a"),
								counter : function(e) {
									$(".point a").removeClass("on").eq(e.current - 1).addClass("on");
									$(".img_font span").hide().eq(e.current - 1).show();
								}
							});
							$(window).bind("scroll", function() {
								var sTop = $(window).scrollTop();
								var sTop = parseInt(sTop);
								if (sTop >= 44) {
									if (!$("#scrollBg").is(":visible")) {
										try {
											$("#scrollBg").slideDown();
										} catch (e) {
											$("#scrollBg").show();
										}
									}
								} else {
									if ($("#scrollBg").is(":visible")) {
										try {
											$("#scrollBg").slideUp();
										} catch (e) {
											$("#scrollBg").hide();
										}
									}
								}
							});
							
						},
						//  点击查看大图
						look :function(i){
						    var n = new Array();
						    n.push(i);
						    this.lookBigImg(this.imageBrowser,n);
						},
						//  获取商品详情
						getStoreInfo : function(id) {
							var url = this.getInfoUrl, _this = this;
							this.$post(url, "", function(ret) {
								if (ret.code == 0) {
									_this.info = ret.materialDto;
								}
							}, this.shopid)
						}
					},
					mounted : function() {
						this.init();
					}
				})
			}
		</script>
	</body>
</html>