|
|
@@ -1,110 +1,198 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
- <head>
|
|
|
- <meta charset="utf-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
|
|
|
- <meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
|
- <title>产品详情</title>
|
|
|
- <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
|
|
|
- <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
|
|
|
- <link rel="stylesheet" type="text/css" href="css/main.css" />
|
|
|
- <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
|
|
|
- <script>
|
|
|
- //屏蔽分享
|
|
|
-// document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
|
|
|
-// WeixinJSBridge.call('hideOptionMenu');
|
|
|
-// });
|
|
|
- </script>
|
|
|
- </head>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
|
|
|
+ <meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
|
+ <title>产品详情</title>
|
|
|
+ <link rel="stylesheet" type="text/css" href="//s.iamberry.com/wechat/aiberle/css/mui.min.css" />
|
|
|
+ <link rel="stylesheet" type="text/css" href="//s.iamberry.com/wechat/aiberle/css/iconfont.css" />
|
|
|
+ <link rel="stylesheet" type="text/css" href="//s.iamberry.com/wechat/aiberle/css/main.css" />
|
|
|
+ <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
|
|
|
+ <script>
|
|
|
+ //屏蔽分享
|
|
|
+ // document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
|
|
|
+ // WeixinJSBridge.call('hideOptionMenu');
|
|
|
+ // });
|
|
|
+ </script>
|
|
|
+</head>
|
|
|
|
|
|
- <body>
|
|
|
- <footer class="mui-bar mui-bar-tab">
|
|
|
- <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-grid-view-no">
|
|
|
- <li class="mui-table-view-cell">
|
|
|
- <div class="mui-table"><div class="mui-table-cell mui-col-xs-4 table-middle"><span class="iconfont icon-gouwuche"></span></div><div class="mui-table-cell mui-col-xs-8 table-middle div-btn-buy-know">立即购买</div></div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </footer>
|
|
|
- <div class="mui-content">
|
|
|
- <div class="banner-box-pro">
|
|
|
- <div id="slider" class="mui-slider">
|
|
|
- <div class="mui-slider-group mui-slider-loop">
|
|
|
- <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
|
|
|
- <div class="mui-slider-item mui-slider-item-duplicate">
|
|
|
- <a href="#">
|
|
|
- <img src="images/banner-3.jpg">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <!-- 第一张 -->
|
|
|
- <div class="mui-slider-item">
|
|
|
- <a href="#">
|
|
|
- <img src="images/banner-1.jpg">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <!-- 第二张 -->
|
|
|
- <div class="mui-slider-item">
|
|
|
- <a href="#">
|
|
|
- <img src="images/banner-2.jpg">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <!-- 第三张 -->
|
|
|
- <div class="mui-slider-item">
|
|
|
- <a href="#">
|
|
|
- <img src="images/banner-3.jpg">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
|
|
|
- <div class="mui-slider-item mui-slider-item-duplicate">
|
|
|
- <a href="#">
|
|
|
- <img src="images/banner-1.jpg">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="mui-slider-indicator">
|
|
|
- <div class="mui-indicator mui-active"></div>
|
|
|
- <div class="mui-indicator"></div>
|
|
|
- <div class="mui-indicator"></div>
|
|
|
- </div>
|
|
|
+<body>
|
|
|
+<footer class="mui-bar mui-bar-tab">
|
|
|
+ <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-grid-view-no">
|
|
|
+ <li class="mui-table-view-cell">
|
|
|
+ <div class="mui-table"><div class="mui-table-cell mui-col-xs-4 table-middle"><span class="iconfont icon-gouwuche"></span></div><div class="mui-table-cell mui-col-xs-8 table-middle div-btn-buy-know">立即购买</div></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+</footer>
|
|
|
+<div class="mui-content">
|
|
|
+ <div class="banner-box-pro" style="display: none;"></div>
|
|
|
+ <ul class="mui-table-view mui-grid-view my-view-no" style="padding-bottom: 0;">
|
|
|
+ <li class="mui-table-view-cell mui-media mui-col-xs-12" style="padding-right: 2px;">
|
|
|
+ <a href="#" class="proceId">
|
|
|
+ <div class="index-pro-tit">[精选] Aiberle美国智能净饮水一体机</div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="index-title">
|
|
|
+ <p class="giftId"><span class="iconfont icon-liwu"></span></p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <ul class="mui-table-view mui-grid-view my-view-no" style="padding-bottom: 0;">
|
|
|
- <li class="mui-table-view-cell mui-media mui-col-xs-12" style="padding-right: 2px;">
|
|
|
- <a href="#">
|
|
|
- <div class="index-pro-tit">[精选] Aiberle美国智能净饮水一体机</div>
|
|
|
- <p class="mui-text-left">4级ro净化、10s加热、3s出水<span style="float: right;color: #ff3b3b;">¥2999.00</span></p>
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="index-title">
|
|
|
- <p><span class="iconfont icon-liwu"></span>美国aiberle咖啡杯、美国aiberle加湿器</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="mui-table-view-cell mui-media mui-col-xs-12">
|
|
|
- <a href="#"><img class="mui-media-object" src="images/details-1.jpg">
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <!-- 加载ing -->
|
|
|
- <div class="loading covers">
|
|
|
- <div class="loading-bj"></div>
|
|
|
- <p>加载中...</p>
|
|
|
- </div>
|
|
|
- <!-- 加载ing END -->
|
|
|
- <script src="js/mui.min.js"></script>
|
|
|
- <script src="js/jquery-2.1.1.min.js"></script>
|
|
|
- <script src="js/main.js"></script>
|
|
|
- <script>
|
|
|
- mui.ready(function() {
|
|
|
- var slider = mui("#slider");
|
|
|
- slider.slider({
|
|
|
- interval: 5000
|
|
|
- });
|
|
|
- $(".loading").hide().css("opacity", "0");
|
|
|
- });
|
|
|
- </script>
|
|
|
- </body>
|
|
|
+ </li>
|
|
|
+ <li class="mui-table-view-cell mui-media mui-col-xs-12">
|
|
|
+ <a href="#" class="product-param-img">
|
|
|
+ <img class="mui-media-object" src="images/details-1.jpg">
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+</div>
|
|
|
+<!-- 加载ing -->
|
|
|
+<div class="loading covers">
|
|
|
+ <div class="loading-bj"></div>
|
|
|
+ <p>加载中...</p>
|
|
|
+</div>
|
|
|
+<!-- 加载ing END -->
|
|
|
+<script src="//s.iamberry.com/wechat/aiberle/js/mui.min.js"></script>
|
|
|
+<script src="//s.iamberry.com/wechat/aiberle/js/jquery-2.1.1.min.js"></script>
|
|
|
+<script src="//s.iamberry.com/wechat/aiberle/js/main.js"></script>
|
|
|
+<script>
|
|
|
+ mui.ready(function() {
|
|
|
+ var nowUrl = location.href;
|
|
|
+ var productId = getParam("productId");
|
|
|
+ param = nowUrl.split("?")[1];
|
|
|
+ // 获取产品信息
|
|
|
+ selectProductInfo(productId);
|
|
|
+ $(".loading").hide();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 产品基本信息
|
|
|
+ function selectProductInfo(productId) {
|
|
|
+ var btnArray = ['否', '是'];
|
|
|
+ mui.ajax('http://test.iamberry.com/iamberry/wechat/product/getProductByProductId?productId=' + productId + '&dates=' + new Date().getTime(), {
|
|
|
+ dataType: 'json',
|
|
|
+ async: false,
|
|
|
+ type: 'GET',
|
|
|
+ timeout: 15000,
|
|
|
+ success: function(dt) {
|
|
|
+ if (dt.isRedirect){
|
|
|
+ window.location.href = dt.redirectURL;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //console.log(dt)
|
|
|
+ if(dt.status) {
|
|
|
+ goodStatus = false;
|
|
|
+ shareOpenid = dt.data.shareOpenid;
|
|
|
+ /*var imageNote = "<div class='mui-slider-item mui-slider-item-duplicate'>" + "<a href='#'>" + "<img src='" + dt.data.product.pictureList[0].pictureUrl + "'>" + "</a>" + "</div>";
|
|
|
+ for(var i = 0; i < dt.data.product.pictureList.length; i++) {
|
|
|
+ imageNote += "<div class='mui-slider-item'>" + "<a href='#'>" + "<img src='" + dt.data.product.pictureList[i].pictureUrl + "'>" + "</a>" + "</div>";
|
|
|
+ if(i == 0) {
|
|
|
+ $("#active-div").append("<div class='mui-indicator mui-active'></div>");
|
|
|
+ } else {
|
|
|
+ $("#active-div").append("<div class='mui-indicator'></div>");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ imageNote += "<div class='mui-slider-item mui-slider-item-duplicate'>" + "<a href='#'>" + "<img src='" + dt.data.product.pictureList[0].pictureUrl + "'>" + "</a>" + "</div>";
|
|
|
+ $("#group-images-div").append(imageNote);
|
|
|
+ var banner = mui('#slider');
|
|
|
+ banner.slider({
|
|
|
+ interval: 5000
|
|
|
+ });*/
|
|
|
+//遍历banner
|
|
|
+ var bannerstr = "",dian = "";
|
|
|
+ var banner_data = dt.data.product.pictureList;
|
|
|
+ mui(banner_data).each(function(index) {
|
|
|
+ if(index == 0) {
|
|
|
+ bannerstr += '<div class="mui-slider-item mui-slider-item-duplicate"><a href="' + banner_data[banner_data.length - 1].pictureUrl + '"><img src="' + (banner_data[banner_data.length - 1].pictureUrl) + '"></a></div><div class="mui-slider-item mui-active"><a href="#"><img src="' + (this.pictureUrl) + '"></a></div>';
|
|
|
+ dian += '<div class="mui-indicator mui-active"></div>'
|
|
|
+ } else {
|
|
|
+ bannerstr += '<div class="mui-slider-item"><a href="#"><img src="' + (this.pictureUrl) + '"></a></div>';
|
|
|
+ dian += '<div class="mui-indicator"></div>'
|
|
|
+ }
|
|
|
+ if(index == (banner_data.length - 1) || (banner_data.length - 1) == 0) {
|
|
|
+ bannerstr += '<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="' + (banner_data[0].pictureUrl) + '"></a></div>'
|
|
|
+ }
|
|
|
+ });
|
|
|
+ dc('mui-slider-loop').innerHTML = bannerstr;
|
|
|
+ dc('my-slider-indicator').innerHTML = dian;
|
|
|
+ $("<div id='slider' class='mui-slider'><div class='mui-slider-group mui-slider-loop' id='mui-slider-loop'>" + bannerstr + "</div><div id='my-slider-indicator' class='mui-slider-indicator my-slider-indicator'>" + dian + "</div></div>").insertBefore(".banner-box-pro");
|
|
|
+
|
|
|
+ //初始化banner自动轮播（interval:0为不自动轮播）单位ms
|
|
|
+ var banner = mui('#slider');
|
|
|
+ banner.slider({
|
|
|
+ interval: 5000
|
|
|
+ });
|
|
|
+ $("#product-name-font").html(dt.data.product.productColorList[0].colorProductName);
|
|
|
+ var productName = dt.data.product.productName;
|
|
|
+ if(dt.data.product.productChoiceness != 0){
|
|
|
+ productName = productName;
|
|
|
+ }
|
|
|
+ $(".index-pro-tit").html(productName);
|
|
|
+ $(".proceId").append('<p class="mui-text-left">'+dt.data.product.productColorDes+'<span style="float: right;color: #ff3b3b;">'+"¥" + (dt.data.product.productColorList[0].colorDiscount/100).toFixed(2)+'</span></p>');
|
|
|
+ var gift = "";
|
|
|
+ $.each(dt.data.product.productColorList[0].salesUserGiftList,function () {
|
|
|
+ if(gift == ""){
|
|
|
+ gift = this.giftName;
|
|
|
+ }else{
|
|
|
+ gift = gift +"、" +this.giftName;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $(".giftId").append(gift);
|
|
|
+ selectProductImageText(productId);
|
|
|
+ if(dt.data.product.productStatus == 1) {
|
|
|
+ pStatus = true;
|
|
|
+ } else {
|
|
|
+ pStatus = false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ mui.confirm(dt.message + '是否重新加载页面？', '提示', btnArray, function(e) {
|
|
|
+ if(e.index == 1) {
|
|
|
+ location.reload(true);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function(xhr, type, errorThrown) {
|
|
|
+ errorfn(xhr);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取产品详情
|
|
|
+ function selectProductImageText(productId) {
|
|
|
+ var btnArray = ['否', '是'];
|
|
|
+ mui.ajax('/iamberry/wechat/product/getPictureByProductId?productId=' + productId, {
|
|
|
+ dataType: 'json',
|
|
|
+ type: 'POST',
|
|
|
+ timeout: 15000,
|
|
|
+ success: function(dt) {
|
|
|
+ if(dt.status) {
|
|
|
+ //console.log(dt.data)
|
|
|
+ if(dt.data != null) {
|
|
|
+ /*$("#item2").html(dt.data.imagetextContext);*/
|
|
|
+ $(".product-param-img").html(dt.data.imagetextContext);
|
|
|
+ } else {
|
|
|
+ $(".product-param-img").empty();
|
|
|
+ mui.alert('商品详情获取失败');
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ mui.confirm(dt.message + '是否刷新页面？', '提示', btnArray, function(e) {
|
|
|
+ if(e.index == 1) {
|
|
|
+ location.reload(true);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function(xhr, type, errorThrown) {
|
|
|
+ mui.confirm('您的网络开小差了，是否重新加载页面？', '提示', btnArray, function(e) {
|
|
|
+ if(e.index == 1) {
|
|
|
+ location.reload(true);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</body>
|
|
|
|
|
|
</html>
|
