<!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/icons-extra.css" />
<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style>
.return {position: fixed;right: 10px;bottom: 140px;background: rgba(0, 0, 0, .1);padding: 12px;border-radius: 50%;height: 50px;width: 50px;text-align: center;opacity: .9;color: #333;display: none;}
.my-picker {max-height: 100%;background-color: rgba(0, 0, 0, .5);}
.my-btn-buy-know {width: 50%;border-radius: 0;bottom: 0;height: 50px;border: 1px solid #727171;position: fixed;right: 0;}
.my-btn-buy-cancel {width: 50%;border-radius: 0;bottom: 0;height: 50px;border: 0;border-top: 1px solid #ccc;position: fixed;left: 0;}
</style>
</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 go-index"><img style="width: 60%;vertical-align: middle;" src="images/logo.png" /></div>
<div class="mui-table-cell mui-col-xs-4 table-middle add-gouwuche" style="background-color: #ccc;color: #fff;font-size: 18px;">加入购物车</div>
<div class="mui-table-cell mui-col-xs-4 table-middle div-btn-buy-know">立即购买</div>
</div>
</li>
</ul>
</footer>
<div class="mui-content">
<div class="banner-box-pro" style="display: none;">
<!--<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>
</div>-->
</div>
<ul class="mui-table-view mui-grid-view my-view-no" style="padding-bottom: 0;padding: 0px;">
<!--<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>
<div class="fixed-cart">
<span class="iconfont icon-gouwuche"></span>
<span class="mui-badge my-badge-danger">0</span>
</div>
<div class="return">
<span onClick="gotoTop(0.1,10);return false;" class="mui-icon-extra mui-icon-extra-top"></span>
</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 src="js/wechat-utils-1.0.js"></script>
<script>
var productId = getParam("productId"),
productName = '',
productRemark = '',
productIntroduceImg = '';
console.log(productId);
mui.ready(function() {
var slider = mui("#slider");
$.ajax(base_path + '/wechat/product/getProductByProductId?dates=' + new Date().getTime(), {
data: {
"productId": productId
},
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'post',
timeout: 15000,
success: function(dt) {
//判断一下
if(dt.isRedirect) {
location.href = dt.redirectURL;
} else {
console.log(dt.data)
if(dt.status) {
var bannerstr = "",
dian = "";
console.log(dt.data.product)
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
});
var productInfo = dt.data.product;
var table = document.body.querySelector(".my-view-no");
var li = document.createElement('li');
li.className = 'mui-table-view-cell mui-media mui-col-xs-12';
li.style.padding="10px 10px 0px 10px";
var zen = '';
if(productInfo.productColorList.length > 0) {
$.each(productInfo.productColorList[0].salesUserGiftList, function() {
zen += this.giftName + "、"
});
}
if(zen != '') {
zen = '<div class="details-title"><p><span class="iconfont icon-liwu"></span>' + zen.substring(0, zen.length - 1) + '</p></div>';
}
productName = productInfo.productName;
productRemark = productInfo.productColorDes;
productIntroduceImg = productInfo.productParameterImg;
li.innerHTML = '<a><div class="index-pro-tit" style="margin-top: 5px;">' + productInfo.productName + '</div>' +
'<p class="mui-text-left" >' + productInfo.productColorDes + '</p></a>' +
'<p class="mui-text-left" style="margin-top: 5px;"><span style="color: #ff3b3b;font-size: 15px;">¥' + (productInfo.productDiscount / 100).toFixed(2) + '</span> <span style="float: right;">' + productInfo.productSalesnum + '已售</span></p></a>' +
zen + '</br>' +
productInfo.imagetextContext +
'';
table.appendChild(li);
getCartNumber(); //获取购物车数量
fenxiang();
$(".loading").hide().css("opacity", "0");
} else {
mui.alert("获取数据失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("获取数据失败！网络错误");
}
});
});
$(document).on('tap', '.my-btn-buy-cancel', function() {
$(".my-picker").removeClass("active");
setTimeout(function() {
$(".my-picker").remove(); //移除选择颜色列表
}, 500);
});
//callback为用户点击蒙版时自动执行的回调；
// var mask = mui.createMask(function() {
// $(".my-picker").remove();//移除颜色列表
// });
var count = 0; //统计所有产品加减，数量默认0，当count<1的时候设置（结算）按钮失效
//购物车数量加
$(document).on('tap', '.mui-btn-numbox-plus', function() {
++count; //产品总数量
var th = $(this);
var parameter = {}; //ajax参数json集合
if(typeof(th.attr("productid")) != "undefined") {
parameter["productId"] = th.attr("productid"); //产品id
if(typeof(th.attr("colorid")) != "undefined") {
parameter["productColorId"] = th.attr("colorid"); //颜色id
parameter["cartNum"] = 1; //需要加的产品数量，每次都是1
$.ajax(base_path + '/wechat/cart/addProductToCart?dates=' + new Date().getTime(), {
data: parameter,
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'post',
timeout: 15000,
success: function(dt) {
if(dt.isRedirect) {
location.href = dt.redirectURL;
} else {
if(dt.status) {
th.parent().attr("cartid", dt.data);
getCartNumber()
console.log("增加数量成功！");
} else {
mui.alert("增加数量失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("增加数量失败！网络错误");
}
});
} else {
mui.alert("没有获取到产品颜色id");
}
} else {
mui.alert("没有获取到产品id");
}
});
//购物车数量减
$(document).on('tap', '.mui-btn-numbox-minus', function() {
--count; //产品总数量
var th = $(this);
var val = mui(th.parent()[0]).numbox().getValue(); //获取当前产品数量
if(val == 0) {
th.parent().removeAttr("cartid");
}
var parameter = {}; //ajax参数json集合
if(typeof(th.attr("colorid")) != "undefined") {
parameter["productColorId"] = th.attr("colorid"); //产品颜色id
parameter["cartNum"] = 1; //需要减的产品数量，每次都是1
$.ajax(base_path + '/wechat/cart/deleteCart?dates=' + new Date().getTime(), {
data: parameter,
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'get', //减少数量后台限制用get
timeout: 15000,
success: function(dt) {
if(dt.isRedirect) {
location.href = dt.redirectURL;
} else {
if(dt.status) {
console.log("减少数量数量成功！");
getCartNumber()
} else {
mui.alert("减少数量数量失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("减少数量失败！网络错误");
}
});
} else {
mui.alert("没有获取到产品颜色id");
}
});
///立即购买-购物车按钮
$(document).on('tap', '.add-gouwuche,.div-btn-buy-know', function() {
var th = $(this);
count = 0;
//mask.show(); //显示遮罩层
//在body尾部增加-产品颜色列表父级ul
$("body").append('<div id="scroll" class="mui-scroll-wrapper my-picker"><div class="mui-scroll" style="top: 0;background-color: #fff;min-height: 100%;"><br/><ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-grid-view-no" style="margin-bottom: 50px;"></ul><button class="mui-btn my-btn-buy-cancel">取消</button><button class="mui-btn my-btn-buy-know" disabled="disabled">确定</button></div></div>');
$.ajax(base_path + '/wechat/product/selectProductColor?dates=' + new Date().getTime(), {
data: {
"productId": productId //productId产品id
},
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'post',
timeout: 15000,
success: function(dt) {
if(dt.isRedirect) {
location.href = dt.redirectURL;
} else {
if(dt.status) {
console.log(dt)
var data = dt.data.productColorList;
var table = document.body.querySelector('.my-picker .mui-table-view'); //产品颜色列表父级ul
table.innerHTML = '';
//循环遍历产品颜色数组
mui(data).each(function(index) {
var li = document.createElement('li'); //创建li标签
li.className = 'my-table-view-cell'; //給li标签设置className
if(typeof(this.cartNum) != "undefined") {
count += parseInt(this.cartNum);
} else {
this.cartNum = 0;
}
li.innerHTML = '<div class="mui-table" ><div class="mui-table-cell mui-col-xs-3"><img class="my-media-object" src="' + this.colorProductPic + '" /></div><div class="mui-table-cell table-middle mui-col-xs-5">' + this.colorName + '<h6>' + this.colorDesc + '</h6><div style="color: #ff3b3b;">¥' + accDiv(this.colorDiscount, 100) + '</div></div><div class="mui-table-cell table-middle mui-col-xs-4"><div class="mui-numbox" data-numbox-min="0" data-numbox-max="99" cartid="' + this.cartId + '"><button class="mui-btn mui-btn-numbox-minus" type="button" productid="' + this.colorProductId + '" colorid="' + this.colorId + '">-</button><input class="mui-input-numbox" type="number" value="' + this.cartNum + '" readonly="readonly"/><button class="mui-btn mui-btn-numbox-plus" type="button" productid="' + this.colorProductId + '" colorid="' + this.colorId + '">+</button></div></div></div>';
table.appendChild(li); //将li标签加入到-产品颜色列表父级ul
});
$(".my-picker").addClass("active"); //显示产品颜色加减数量列表
console.log(count)
// if(count > 0) {
$(".my-btn-buy-know").removeAttr("disabled"); //激活结算按钮
// }
if(th.hasClass("add-gouwuche")) {
$(".my-btn-buy-know").attr("cart", "cart");
}
mui(".mui-numbox").numbox(); //激活加减按钮组合
} else {
mui.alert("获取数据失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("获取数据失败！网络错误");
}
});
mui('#scroll').scroll({
indicators: true, //是否显示滚动条
bounce: false //是否启用回弹
});
});
//确定事件
$(document).on('tap', '.my-btn-buy-know', function() {
//判断是点立即购买还是加入购物车的
var cartidList = ''; //购物项id集合
if($(this).attr("cart") == "cart") {
if(count > 0) {
//$(".mui-backdrop").css("opacity", 0).remove(); //移除遮罩层
$(".my-picker").removeClass("active");
setTimeout(function() {
$(".my-picker").remove(); //移除选择颜色列表
}, 500);
mui.toast("加入购物车成功！");
} else {
mui.toast("请选择数量")
}
} else {
$.each($(".my-picker .mui-numbox"), function(index) {
var th = $(this);
if(th.attr("cartid") != "undefined") {
if(cartidList == '') {
cartidList += th.attr("cartid");
} else {
cartidList += '-' + th.attr("cartid");
}
}
});
if(cartidList != "undefined" && count > 0) {
$(".my-btn-buy-know").removeAttr("disabled"); //激活结算按钮
if(!window.sessionStorage) {
mui.alert("您的浏览器不支持sessionStorage");
} else {
//自定义json数据
var obj = {
text: [cartidList]
};
//json格式化插入 购物项id集合
sessionStorage.setItem('pay_data', JSON.stringify(obj));
location.href = 'clearing.html'; //跳转结算页面
}
} else {
mui.toast("请选择数量")
}
}
});
//跳转首页
$(document).on('tap', '.go-index', function() {
location.href = 'index.html';
});
//跳转购物车
$(document).on('tap', '.fixed-cart', function() {
location.href = 'shopping-cart.html';
});
//获取购物车数量
function getCartNumber() {
$.ajax(base_path + '/wechat/cart/getCartNumByCartOpenId?dates=' + new Date().getTime(), {
data: {},
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'get',
timeout: 15000,
success: function(dt) {
if(dt.isRedirect) {
location.href = dt.redirectURL;
} else {
if(dt.status) {
if(dt.data > 0) {
$(".fixed-cart .my-badge-danger").text(dt.data).show();
} else {
$(".fixed-cart .my-badge-danger").text(dt.data).hide();
}
} else {
mui.alert("获取购物车数量失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("获取购物车数量失败！网络错误");
}
});
}
//分享
function fenxiang() {
var src = location.href;
src = "//s.iamberry.com/aiberle/wechat/pro-details.html?productId=" + productId;
window.wxFriend = {
"appId": "",
"imgUrl": productIntroduceImg,
"link": src,
"desc": productRemark,
"title": 'Aiberle | ' + productName,
"netError": "您的网络异常，请刷新重试!如多次刷新无效，请向我们反应 ~",
"shareTimeSuccess": "分享成功",
"shareTimeCancel": "已取消分享",
"shareAppSuccess": "分享成功!",
"shareAppCancel": "已取消分享"
};
getConfig();
}
//返回顶部方法
function gotoTop(acceleration, stime) {
acceleration = acceleration || 0.1;
stime = stime || 10;
var x1 = 0,
y1 = 0,
x2 = 0,
y2 = 0,
x3 = 0,
y3 = 0;
if(document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0
}
if(document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
var speeding = 1 + acceleration;
window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));
if(x > 0 || y > 0) {
var run = "gotoTop(" + acceleration + ", " + stime + ")";
window.setTimeout(run, stime)
}
};
//绑定滚动条事件
$(window).on("scroll", function() {
//向下滚动距离大于180像素显示返回顶部，否则隐藏
if($(window).scrollTop() > 180) {
$(".return").show();
} else {
$(".return").hide();
}
});
</script>
</body>
</html>