|
|
|
<!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>
|
|
|
|
<style>
|
|
|
|
img {
|
|
|
|
border: 0;
|
|
|
|
display: block;
|
|
|
|
margin: 0 auto;
|
|
|
|
max-width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.open-wechat-QR {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.top-downloadbar.wechat .download-go {
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
-webkit-transform: translateY(-50%);
|
|
|
|
transform: translateY(-50%);
|
|
|
|
font-size: .7rem;
|
|
|
|
padding: 0 .5rem;
|
|
|
|
height: 1.35rem;
|
|
|
|
line-height: 1.35rem;
|
|
|
|
border-radius: .165rem;
|
|
|
|
color: #fff;
|
|
|
|
text-decoration: none;
|
|
|
|
right: 5.375rem;
|
|
|
|
background: #000;
|
|
|
|
}
|
|
|
|
|
|
|
|
.top-downloadbar.wechat .open-wechat-QR {
|
|
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
-webkit-transform: translateY(-50%);
|
|
|
|
transform: translateY(-50%);
|
|
|
|
font-size: .7rem;
|
|
|
|
padding: 0 .5rem;
|
|
|
|
height: 1.35rem;
|
|
|
|
line-height: 1.35rem;
|
|
|
|
border-radius: .165rem;
|
|
|
|
color: #fff;
|
|
|
|
text-decoration: none;
|
|
|
|
right: .375rem;
|
|
|
|
background: red;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mini-app-container {
|
|
|
|
display: none;
|
|
|
|
position: fixed;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
z-index: 99;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mini-app-container.show {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mini-app-container .mini-app-dialog {
|
|
|
|
position: absolute;
|
|
|
|
width: 12.5rem;
|
|
|
|
left: 50%;
|
|
|
|
top: 50%;
|
|
|
|
background-color: #fff;
|
|
|
|
-webkit-border-radius: 0.2rem;
|
|
|
|
border-radius: 0.2rem;
|
|
|
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mini-app-dialog .mini-app-header {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 2rem;
|
|
|
|
line-height: 2rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mini-app-dialog .mini-app-close {
|
|
|
|
width: 0.75rem;
|
|
|
|
height: 0.75rem;
|
|
|
|
position: absolute;
|
|
|
|
right: 0.25rem;
|
|
|
|
top: 0.25rem;
|
|
|
|
background-size: cover;
|
|
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmFJREFUeNrMl99OE0EUxrdL9bYYbWoEJajUP5ckXsM2IZJe0IQQqY9AGq0+QY0vUExs+gqQkCblAi0ktPckvUQoQoyihDbE6qWELN9pzjbr6O7MlK7xJB/Tdg/nN+fszOzZkG3bhszK5fIlDI+hKegRdAe6wpe/Q/vQFrQBradSqV+ymCE/MICDGF5AGeiaoWYnUAHKYwJtbTCgaQyLUMzozZpQFvAlJTCAAxjecJb9sCL0DBM48wQzlGY4Z/TXStATN9wUHBYDgJLNchX/zBjZznO2QdpT5553wLx6dy6wkFStBcVptTulzvpAJ3jfNhQCb0Mj0LTH9Sj0snOPke1lyQr+ihkeYExAexKoBd/P9D8+fhlimnwaRX0c38FxCAEpmOUBJ2gCPk34UsarPvGu0ilo8lHoZ2PQpgsuZv6BocfwuYXPVWhUErMDHle4d3GG3wDgkOEfGWq5oDUFKNm4yRkZPcCtHjLtVjGMPxGN7XCP4RbDaSveZOhtjTgRytjW3Iu24m++RuCfGv67XN4jZDoMXcfnL1z2A404P0zJ3hShlgPl8lZd8EkN+B6B67qZMvQudJ/vuS68TuCKxKnB0G8C1LEHDI9plL1icp/U8nFKuqCbAtQNrzKcjswZSWtUcZ5OOXx55eFI5aNM3ivseTo6k9BDaM3D5zUmlwvzF3pIL3g8oWoaq5WAnySPxXy3A+FuMGsEb8+dzrPb+uCHZQxvA4QW3B2n2HNRD70SALQkVvQ3MHeBaW7I+2VFscP8vxr6v7zCZLk1iv6TVxiFl7ZBvtwWXtoqAJ7KYp4LMACryxGMnWAbNgAAAABJRU5ErkJggg==");
|
|
|
|
}
|
|
|
|
|
|
|
|
.mini-app-dialog .mini-app-content {
|
|
|
|
padding: 0.625rem;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
#mini_app_img {
|
|
|
|
width: 6.45rem;
|
|
|
|
height: 6.45rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mini-app-footer {
|
|
|
|
height: 3.65rem;
|
|
|
|
line-height: 3.65rem;
|
|
|
|
font-size: 0.7rem;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<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="//cdn.yoho.cn/ufo/1.0.1/css/swiper-4.4.1.min.css" rel="stylesheet" type="text/css"/>
|
|
|
|
<link href="//cdn.yoho.cn/ufo/1.0.1/css/goodsDetail.css" rel="stylesheet" type="text/css"/>
|
|
|
|
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
|
|
|
|
</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>
|
|
|
|
<a class="open-wechat-QR" id="open_wechat-qr">进入小程序</a>
|
|
|
|
</div>
|
|
|
|
<!--小程序二维码在微信中展示-->
|
|
|
|
<div class="mini-app-container">
|
|
|
|
<div class="mini-app-dialog">
|
|
|
|
<div class="mini-app-header">
|
|
|
|
<span class="mini-app-close" id="mini_app_close"></span>
|
|
|
|
</div>
|
|
|
|
<div class="mini-app-content">
|
|
|
|
<img id="mini_app_img">
|
|
|
|
</div>
|
|
|
|
<div class="mini-app-footer">长按识别小程序码进入</div>
|
|
|
|
</div>
|
|
|
|
</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>
|
|
|
|
|
|
|
|
<img src="//cdn.yoho.cn/ufoapp/productdetail/service.png" class="goods-dec">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="//cdn.yoho.cn/ufo/1.0.1/js/jquery-1.11.3.min.js" type="text/javascript"></script>
|
|
|
|
<script src="//cdn.yoho.cn/ufo/1.0.1/js/swiper-4.4.1.min.js" type="text/javascript"></script>
|
|
|
|
<script src="//cdn.yoho.cn/ufo/1.0.1/js/share.js"></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 getImgUrl(src, width = 300, height = 300, mode = 2) {
|
|
|
|
return src ? src.replace(/(\{width}|\{height}|\{mode})/g, function ($0) {
|
|
|
|
const dict = {
|
|
|
|
'{width}': width,
|
|
|
|
'{height}': height,
|
|
|
|
'{mode}': mode || 2
|
|
|
|
};
|
|
|
|
|
|
|
|
return dict[$0];
|
|
|
|
}).replace(/https?:/, '') : '';
|
|
|
|
};
|
|
|
|
|
|
|
|
$(function () {
|
|
|
|
var productId = getUrlParam('id');
|
|
|
|
var ajaxUrl = location.pathname.indexOf('ufo-gateway') > -1 ? '/ufo-gateway' : '/';
|
|
|
|
var qrDomain = '//m.yohobuy.com/api/wechat/miniapp.jpg'; // 小程序二维码图片生成地址
|
|
|
|
if (location.hostname.indexOf('localhost') > -1) {
|
|
|
|
ajaxUrl = 'http://2.yohobuy.com/';
|
|
|
|
qrDomain = '//api-test3.dev.yohocorp.com/wechat/miniapp/img-check.jpg';
|
|
|
|
}
|
|
|
|
var isWechat = /MicroMessenger/.test(navigator.userAgent);
|
|
|
|
var errorCount = 0; // 加载二维码错误次数
|
|
|
|
|
|
|
|
if (isWechat) { // 判断如果在微信中则显示二维码，头部展示进入小程序按钮
|
|
|
|
$('#top-downloadbar').addClass('wechat');
|
|
|
|
var qrImage = qrDomain + '?param={"id":' + productId + '}&miniQrType=23&miniapp_type=63'; // 小程序二维码图片生成地址+参数获取二维码
|
|
|
|
$('#mini_app_img').attr('src', qrImage);
|
|
|
|
|
|
|
|
$('#mini_app_img')[0].onload = function() {
|
|
|
|
$('.mini-app-container').addClass('show'); // 打开页面就显示二维码
|
|
|
|
};
|
|
|
|
$('#mini_app_img')[0].onerror = function () {
|
|
|
|
if (errorCount < 5) {
|
|
|
|
errorCount += 1;
|
|
|
|
setTimeout(function(){
|
|
|
|
$('#mini_app_img').attr('src', qrImage);
|
|
|
|
}, 1000);
|
|
|
|
} else {
|
|
|
|
console.log('二维码图片无法加载');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
$('#mini_app_close').on('click', function() { // 点击X按钮关闭二维码
|
|
|
|
$('.mini-app-container').removeClass('show');
|
|
|
|
});
|
|
|
|
$('#open_wechat-qr').on('click', function() { // 点击进入小程序按钮显示二维码
|
|
|
|
$('.mini-app-container').addClass('show');
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
$('.download-go').attr('href', '//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="' + getImgUrl(item.image_url, 750, 750) + '"></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>';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
var shareImg = '';
|
|
|
|
|
|
|
|
if (goodsList && goodsList.image_list && goodsList.image_list.length > 0) {
|
|
|
|
shareImg = getImgUrl(goodsList.image_list[0].image_url);
|
|
|
|
}
|
|
|
|
|
|
|
|
share({
|
|
|
|
shareTitle: data.product_name + '-UFO潮流好物',
|
|
|
|
shareDesc: '我在UFO飞碟好物发现了一件超棒的商品，戳进来看>>>',
|
|
|
|
shareImg: 'http:' + shareImg,
|
|
|
|
shareLink: location.href
|
|
|
|
})
|
|
|
|
}
|
|
|
|
})
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |
|
|
\ No newline at end of file |
...
|
...
|
|
