goodsDetail.html
5.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script type="text/javascript">
(function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;if(!f){return}if(f>=750){e.style.fontSize="40px"}else{e.style.fontSize=40*(f/750)+"px"}};if(!d.addEventListener){return}b();c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false)})(document,window);
</script>
<link href="./css/swiper-4.4.1.min.css" rel="stylesheet" type="text/css"/>
<link href="./css/goodsDetail.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="top-downloadbar" id="top-downloadbar">
<a href="javascript:void(0);" class="download-close" id="download-close"></a>
<span class="download-icon"></span>
<span class="download-text">Yoho!Buy有货</span>
<p class="download-text-desc">新用户送惊喜礼包</p>
<a class="download-go" id="download-go" href=''>立即打开</a>
</div>
<div class="goods-detail-page">
<div class="head">
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
</div>
</div>
<h2 class="goods-title"></h2>
<ul class="goods-info">
<li>
<div class="label">颜色</div>
<div class="cont color"></div>
</li>
<li>
<div class="label">品牌</div>
<div class="cont brand-name"></div>
</li>
<li>
<div class="label">系列</div>
<div class="cont series-name"></div>
</li>
<li>
<div class="label">发货时间</div>
<div class="cont sale-time"></div>
</li>
<li>
<div class="label">货号</div>
<div class="cont product-code"></div>
</li>
</ul>
<div class="goods-dec">
正品保障<span class="c"></span>专业鉴定<span class="c"></span>银联担保
</div>
</div>
<script src="./js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="./js/swiper-4.4.1.min.js" type="text/javascript"></script>
<script>
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
$(function() {
var productId = getUrlParam('id');
var ajaxUrl = location.pathname.indexOf('ufo-gateway') > -1 ? '/ufo-gateway' : '/';
$('.download-go').attr('href', 'https://union.yoho.cn/union/app-downloads.html?openby:yohobuy={"action":"go.ufo","params":{"pagename":"productDetail","productId":' + productId + '}}')
$('.download-close').on('click', function() {
$('.top-downloadbar').hide();
});
$.get(ajaxUrl, {
method: 'ufo.product.data',
product_id: productId
}, function(ret) {
if (ret && ret.code == 200) {
var data = ret.data && ret.data.product_info || {};
var goodsList = data.goods_list && data.goods_list[0] || {};
$('.color').html(goodsList.color_name || '');
$('.brand-name').html(data.brand_name || '');
$('.series-name').html(data.series_name || '');
$('.sale-time').html(data.sale_time || '');
$('.product-code').html(data.product_code || '');
$('.goods-title').html(data.product_name || '');
$('title').html(data.product_name || '商品详情');
goodsList.image_list.map(function(item) {
if(item.image_url) {
$('.swiper-wrapper').append('<div class="swiper-slide"><img src="' + item.image_url + '"></div>');
}
});
if ($('.swiper-slide').length > 0) {
new Swiper('.swiper-container', {
autoplay: true,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
renderFraction: function (currentClass, totalClass) {
return '<span class="' + currentClass + '"></span>' +
'|' +
'<span class="' + totalClass + '"></span>';
}
}
});
}
}
})
});
</script>
</body>
</html>