<!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" />
</head>
<body>
<!--底部菜单开始-->
<footer class="mui-bar mui-bar-tab" style="box-shadow: 0 0 0 0;">
<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 cart">
<span class="iconfont icon-gouwuche"></span>
<div>购物车</div>
<span class="mui-badge my-badge-danger">0</span>
</div>
<div class="mui-table-cell mui-col-xs-4 table-middle div-btn-buy-cart">加入购物车</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">
<!--banner开始-->
<!--banner结束-->
<div class="index-banner" style="display: none;"></div>
<div class="my-content-padded">
<ul class="mui-table-view my-view-no" style="border-bottom:1px solid rgba(0,0,0,.1);">
<li style="padding:0;">
<div class="pro-details-name" style="padding:15px 0 0 0;"></div>
</li>
<li style="padding: 11px 0;" class="mui-table-view-cell mui-text-center">
<span class="mui-pull-left cl-red price">¥0.0</span><span class="mui-h6">运费：免运费</span><span class="iconfont icon-fenxiang mui-pull-right" style="font-size: 16px;color: #999;padding: 10px;position: absolute;right: 0;top: 0;"></span>
</li>
<li style="padding: 11px 0 11px 7px;" class="mui-table-view-cell">
<a class="mui-navigate-right select-color">
选择颜色<span class="mui-pull-right" style="margin-right: 30px;"></span>
</a>
</li>
</ul>
<div class="details-content">
<!--<img src="images/detais-5.jpg" />-->
</div>
</div>
</div>
</div>
<div class="share-dalog">
<img src="images/share.png" />
</div>
<!--内容结束-->
<!-- 加载ing begin-->
<div class="loading covers">
<div class="loading-bj"></div>
<p>正在加载...</p>
</div>
<!-- 加载ing end -->
<script src="js/mui.min.js"></script>
<script src="js/mui.zoom.js"></script>
<script src="js/mui.previewimage.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 channelType = getParam("channelType"); //渠道类型
var channelId = getParam("channelId"); //渠道id
if(channelType == null || channelId == null ){
channelType = 0;
channelId=0;
}
if(channelType != null && channelType > 0 && channelId != null && channelId > 0){
// 屏蔽分享
window.hiddenAllWechatMenu = true;
}
</script>
<script>
window.addEventListener('pageshow', function(e) {
// 通过persisted属性判断是否存在 BF Cache
if(e.persisted) {
location.reload();//重新加载页面
}
});
var colorId = getParam("colorId"); //从URL带过来的产品颜色id
var productName = "";//产品名称 分享用
var colorName = "";//颜色名称 分享用
//ready事件
mui.ready(function() {
if(colorId != null) {
$.ajax(base_path + '/wechat/product/getProductByProductId?dates=' + new Date().getTime(), {
data: {
"colorId": colorId,
"channelType": channelType,
"channelId": channelId
},
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) {
//遍历banner
var bannerstr = "",
dian = "";
var banner_data = dt.data.product.pictureList;
mui(banner_data).each(function(index) { //遍历banner集合
if(index == 0) {
bannerstr += '<div class="mui-slider-item mui-slider-item-duplicate"><a><img src="' + (banner_data[banner_data.length - 1].pictureUrl) + '"></a></div><div class="mui-slider-item mui-active"><a><img data-preview-src="" data-preview-group="1" src="' + (this.pictureUrl) + '"></a></div>';
dian += '<div class="mui-indicator mui-active"></div>'
} else {
bannerstr += '<div class="mui-slider-item"><a><img data-preview-src="" data-preview-group="1" 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><img src="' + (banner_data[0].pictureUrl) + '"></a></div>'
}
});
dc('mui-slider-loop').innerHTML = bannerstr;
dc('my-slider-indicator').innerHTML = dian; //banner的点
$("<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(".index-banner");
$(document).attr("title",dt.data.product.productName);//title换成产品名字
$(".pro-details-name").text(dt.data.product.productName); //产品名字
productName = dt.data.product.productName;
//初始化banner自动轮播（interval:0为不自动轮播）单位ms
var banner = mui('#slider');
banner.slider({
interval: 5000
});
mui.previewImage(); //全屏预览图片
if(typeof(dt.data.product.productImageText)!="undefined"){
$(".details-content").html(dt.data.product.productImageText.imagetextContext); //产品介绍图文
}
//添加颜色列表弹窗
var btn = '<div class="mui-table"><div class="mui-table-cell mui-col-xs-6 table-middle mui-hidden"><button class="mui-btn my-btn-block my-btn-add-cart">加入购物车</button></div><div class="mui-table-cell mui-col-xs-6 table-middle mui-hidden"><button class="mui-btn my-btn-block my-btn-buy-know">立即购买</button></div><div class="mui-table-cell mui-col-xs-12 table-middle"><button class="mui-btn my-btn-block my-btn-buy-know">确定</button></div></div>';
var colorList = '',
pic = '',
colorPresent,
price = '';
mui.each(dt.data.colorList, function() { //遍历产品颜色集合
var active = '';
if(colorId == this.colorId) {
active = 'active'; //弹窗选中当前颜色
$(".select-color span").text(this.colorName); //当前颜色
pic = this.colorImg; //当前图片
price = '¥' + (this.colorDiscount / 100).toFixed(2);
colorPresent = this.colorPresent; //当前简介
$(".price").text(price); //当前价格
colorName = this.colorName;
}
colorList += '<span class="pro-select-color ' + active + '" name="' + this.colorId + '" src="' + this.colorImg + '" colorPresent="'+ this.colorPresent +'" price="' + this.colorDiscount + '">' + this.colorName + '</span>';
});
$("body").append('<div class="my-picker"><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-3 table-middle"><img class="dalog-proPic" style="background: #f8f8f8;" width="90%" src="' + pic + '" /></div><div class="mui-table-cell mui-col-xs-8 table-middle"><div>' + dt.data.product.productName + '</div><h6 class="dalog-colorPresent" style="line-height: 14px;">'+ colorPresent +'</h6><div class="dalog-proPrice">' + price + '</div></div></div></li><li class="mui-table-view-cell">选择颜色</li><li style="padding: 0 15px;"><div class="mui-table" ><div class="mui-table-cell mui-col-xs-12">' + colorList + '</div></div></li><li class="mui-table-view-cell"><div class="mui-table"><div class="mui-table-cell mui-col-xs-6">选择数量</div><div class="mui-table-cell mui-text-right mui-col-xs-6"><div class="mui-numbox" data-numbox-min="0" data-numbox-max="99" name="0"><button class="mui-btn mui-btn-numbox-minus" type="button">-</button><input class="mui-input-numbox" type="number" value="0" readonly="readonly" disabled="disabled"><button class="mui-btn mui-btn-numbox-plus" type="button">+</button></div></div></div></li></ul><br />' + btn + '<span class="iconfont icon-guanbi"></span></div>');
if(colorId == 310){
$(".dalog-colorPresent").css("color","red");
}
mui(".mui-numbox").numbox(); //激活加减按钮组合
getColorNumber();//获取单个购物项id数量
getCartNumber();//获取购物车总数量
$(".loading").hide().css("opacity", "0"); //隐藏（正在加载...）
fenxiang();
} else {
mui.alert("获取产品详情失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("获取产品详情失败！网络错误");
}
});
}
});
//callback为用户点击蒙版时自动执行的回调；
var mask = mui.createMask(function() {
$(".my-picker").removeClass("active"); //隐藏颜色列表
});
//加入购物车弹出层
var btnTap = '';
var cartStatus="";
$(document).on('tap', '.mui-bar-tab .div-btn-buy-cart,.mui-bar-tab .div-btn-buy-know,.select-color', function() {
if($(".my-picker").length > 0) { //判断是否已有弹窗
var th = $(this);
mask.show(); //显示遮罩层
//判断点击进来的按钮
if(th.hasClass("select-color")) {
$(".my-picker>.mui-table .mui-col-xs-12").addClass("mui-hidden");
$(".my-picker>.mui-table .mui-col-xs-6").removeClass("mui-hidden");
} else {
$(".my-picker>.mui-table .mui-col-xs-6").addClass("mui-hidden");
$(".my-picker>.mui-table .mui-col-xs-12").removeClass("mui-hidden");
if(th.hasClass("div-btn-buy-cart")) {
btnTap = 'addCart';
cartStatus = null;
} else {
btnTap = 'buyknow';
cartStatus = 1;
}
}
$(".my-picker").addClass("active"); //显示颜色列表弹窗
}
});
//切换颜色
$(document).on('tap', '.pro-select-color', function() {
var th = $(this);
colorId = th.attr("name");
th.addClass("active").siblings().removeClass("active");//选中自己再把前后的兄弟元素取消选中
$(".select-color span").text(th.text());
getColorNumber();//重新获取单个购物项id数量
$(".dalog-proPic").attr("src", th.attr("src"));//替换当前选择颜色的图片
$(".dalog-colorPresent").text(th.attr("colorPresent")); //替换产品简介
if(colorId == 310){
$(".dalog-colorPresent").css("color","red");
}
colorName = th.text();
fenxiang();
});
//弹窗的加入购物车
$(document).on('tap', '.my-picker .my-btn-add-cart', function() {
btnTap = 'addCart';
add();
});
//弹窗的立即购买
$(document).on('tap', '.my-picker .mui-col-xs-6 .my-btn-buy-know', function() {
btnTap = 'buyknow';
add();
});
//弹窗的确定
$(document).on('tap', '.my-picker .mui-col-xs-12 .my-btn-buy-know', function() {
// mui.toast('加入购物车成功！');
var number = $(".mui-input-numbox").val();
if(number != 0){
add();
if(btnTap == 'addCart'){
mui.toast('加入购物车成功！');
}
}else{
mui.toast('请选择商品数量！');
}
});
//判断是加减删，ajax分别调用不同的URLclearing.html
function add() {
var parameter = {}; //ajax参数json集合
var src = '/wechat/cart/addProductToCart';
if(typeof($(".my-picker .pro-select-color.active").attr("name")) != "undefined") {
parameter["colorId"] = $(".my-picker .pro-select-color.active").attr("name"); //颜色id
if($(".mui-input-numbox").val() - $(".mui-numbox").attr("name") < 0) {
if($(".mui-input-numbox").val() == 0) {
src = '/wechat/cart/deleteCartByProductId';
addCart(parameter, src)
} else {
parameter["cartNum"] = Math.abs($(".mui-input-numbox").val() - $(".mui-numbox").attr("name"));
src = '/wechat/cart/deleteCart';
addCart(parameter, src)
}
} else if($(".mui-input-numbox").val() - $(".mui-numbox").attr("name") > 0) {
parameter["cartNum"] = Math.abs($(".mui-input-numbox").val() - $(".mui-numbox").attr("name"));
addCart(parameter, src);
} else {
if($(".mui-input-numbox").val() < 1) {
mui.toast("请选择商品数量！");//如果数量为0提示用户去选
} else {
$(".my-picker").removeClass("active"); //隐藏颜色列表
$(".mui-backdrop").remove(); //移除遮罩层
if(btnTap == 'buyknow') {
if(!window.sessionStorage) {
mui.alert("您的浏览器不支持sessionStorage");
} else {
//自定义json数据
var obj = {
text: [$(".mui-numbox").attr("cartid")]
};
//json格式化插入 购物项id集合
sessionStorage.setItem('pay_data', JSON.stringify(obj));
if(channelId > 0 && channelType >0){
location.href = 'channel-clearing.html?channelType='+channelType+'&channelId='+channelId; //跳转结算页面
}else{
location.href = 'clearing.html?channelType='+channelType+'&channelId='+channelId; //跳转结算页面
}
}
}
}
}
} else {
mui.alert("没有获取到产品颜色！");
}
};
//商品加减删三个ajax接口集合，parameter参数，src接口的路径
function addCart(parameter, src) {
$.ajax(base_path + src + '?dates=' + new Date().getTime(), {
data: parameter,
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) {
getColorNumber();//重新获取单个购物项id数量
getCartNumber();//重新获取购物车总数量
if(btnTap == 'buyknow') {
if($(".mui-input-numbox").val()>0){
$(".my-picker").removeClass("active"); //隐藏颜色列表
$(".mui-backdrop").remove(); //移除遮罩层
if(!window.sessionStorage) {
mui.alert("您的浏览器不支持sessionStorage");
} else {
setTimeout(function(){
//自定义json数据
var obj = {
text: [$(".mui-numbox").attr("cartid")]
};
//json格式化插入 购物项id集合
sessionStorage.setItem('pay_data', JSON.stringify(obj));
location.href = 'clearing.html?channelType='+channelType+'&channelId='+channelId; //跳转结算页面
},500);
}
}else{
mui.toast("请选择商品数量！");
}
}else{
$(".my-picker").removeClass("active"); //隐藏颜色列表
$(".mui-backdrop").remove(); //移除遮罩层
}
} else {
mui.alert("添加失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("添加失败！网络错误");
}
});
};
//获取单个购物项id数量
function getColorNumber() {
$.ajax(base_path + '/wechat/cart/getCartColorNum?dates=' + new Date().getTime(), {
data: {
"colorId": colorId
},
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) {
if(typeof(dt.data) != "undefined") {
$(".mui-input-numbox").val(dt.data.cartNum);
$(".mui-numbox").attr("name", dt.data.cartNum);
$(".mui-numbox").attr("cartid", dt.data.cartId);
if(dt.data.cartNum > 0) {
$(".mui-btn-numbox-minus").removeAttr("disabled");
} else {
$(".mui-btn-numbox-minus").attr("disabled", "disabled");
}
}else{
$(".mui-numbox").removeAttr("cartid");
$(".mui-numbox").attr("name", "0");
$(".mui-input-numbox").val(1);
$(".mui-btn-numbox-minus").attr("disabled", "disabled");
}
} else {
console.log("失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
}
});
};
//关闭弹窗
$(document).on('tap', '.icon-guanbi', function() {
$(".mui-backdrop").remove(); //移除遮罩层
$(".my-picker").removeClass("active"); //隐藏弹窗
});
//分享弹窗
$(document).on('tap', '.icon-fenxiang', function() {
$(".share-dalog").show();
});
//关闭分享弹窗
$(document).on('tap', '.share-dalog', function() {
$(this).hide();
});
//获取购物车总数量
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) {
$(".cart .mui-badge").text(dt.data).css("display","inline");
}else{
$(".cart .mui-badge").text("0").hide();
}
} else {
mui.alert("获取购物车数量失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("获取购物车数量失败！网络错误");
}
});
};
//跳转购物车
$(document).on('tap', '.cart', function() {
if(channelType != null && channelType > 0 && channelId != null && channelId > 0){
var num = $(".cart .mui-badge").text();
if(num<1){
mui.toast("请添加商品到购物车！");
return false;
}
}
location.href = 'shopping-cart.html?channelType='+channelType+'&channelId='+channelId;
});
//分享
function fenxiang(){
var src = location.href;
src = "https://s.iamberry.com/soodo/wechat/pro-details.html?colorId="+colorId;
window.wxFriend = {
"appId": "",
"imgUrl": 'https://s.iamberry.com/soodo/wechat/images/product_fenxiang.jpg',
"link": src,
"desc": '让你的齿龄停留在18岁',
"title": 'soodo上朵 | '+productName+"（"+colorName+"）",
"netError": "您的网络异常，请刷新重试!如多次刷新无效，请向我们反应 ~",
"shareTimeSuccess": "分享成功",
"shareTimeCancel": "已取消分享",
"shareAppSuccess": "分享成功!",
"shareAppCancel": "已取消分享"
};
getConfig();
}
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?d9d392428f8cfa6e73885438c7d692fa";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>