buying/WebContent/static/mobile/js/productDetail.js

$(function(){  
    pushHistory();  
    window.addEventListener("popstate", function(e) {  
    	location.href=base+"/mobile/index.jsp";
    }, false);   
});
function pushHistory() {  
	var state = {  
	    title: "title",  
	    url: "#"  
	};
	if(window.history.length==1){
		window.history.pushState(state, "title", "#");
	}
} 
var id=mobile.getUrlVars("id");
var data;
var custom;
var pageNumber = 1;
var pageSize=10;
mui.init();
/**
 *初始化、添加监听 
 */
mui.ready(function(){
	getCustom();
	getProductDetail();
	$("#sendCode").html(Math.floor(Math.random()*9000)+1000);
	$(".header").on("tap",".icon-cha",function(e){
		$(".header .mui-table-view").hide();
		$(".mui-content").css("padding-top","0");
	});
	$(".header").on("tap",".guanzhu",function(e){
		var html=[];
		html.push('<img src="'+imgUrl+custom.wechat_qrcode+'" style="width:100%">');
		mui.alert(html.join(""), '关注“<span class="main-color">'+custom.wechat_name+'</span>”');
	});
	$("#custom").on("tap",function(){
		var html=[];
		html.push('<img src="'+imgUrl+custom.custom_qrcode+'" style="width:100%">'+
				'<div class="main-color">客服电话'+custom.custom_mobile+'</div>');
		mui.alert(html.join(""), '客服二维码');
	});
	$("#user").on("tap",function(){
		location.href=base+'/mobile/userCenter.jsp';
	});
	$(".merchant").on("tap",function(){
		location.href=base+'/mobile/merchantDetail.jsp?id='+data.merchant.id;
	});
	$("#merchant").on("tap",function(){
		location.href=base+'/mobile/merchantDetail.jsp?id='+data.merchant.id;
	});
	$(".tel").on("tap",function(){
		location.href = 'tel:'+data.merchant.mobile;
	});
	$(".map").on("tap",function(){
		var locations=bd09togcj02(data.merchant.longitude,data.merchant.latitude);
		wx.ready(function(){
			wx.openLocation({
				latitude: locations[1], // 纬度，浮点数，范围为90 ~ -90
				longitude: locations[0], // 经度，浮点数，范围为180 ~ -180。
				name: data.merchant.merchant_name, // 位置名
				address: data.merchant.address, // 地址详情说明
				scale: 25, // 地图缩放级别,整形值,范围从1~28。默认为最大
				infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
			});
		});
	});
	$(".comment").on("tap",function(){
		location.href = base+'/mobile/merchantComment.jsp?id='+data.merchant.id;
	});
	$(".complain").on("tap",function(){
		location.href = base+'/mobile/userComplain.jsp?id='+id;
	});
	$(".mui-bar-tab").on("tap",".main-bgcolor",function(e){
		e.stopPropagation();
		if($("#toOrder").html()=="去评价"){
			location.href=base+"/mobile/userOrderComment.jsp?id="+data.order.id;
		}else if($("#toOrder").html()=="立即抢购"){
			buy();
		}else if($("#toOrder").html()=="点击登录"){
			$('#login').addClass('mui-active');
		}else{
			location.href=base+"/mobile/userOrderDetail.jsp?id="+data.order.id;
		}
	});
	$("#login").on("tap",'.mui-icon-left-nav',function(){
		$('#login').removeClass('mui-active');
	});
	$("#sendCode").on("tap",function(e){
		$("#sendCode").html(Math.floor(Math.random()*9000)+1000);
	});
	$("#login-btn").on("tap",function(e){
		var mobilePhone = $.trim($('#mobile').val());
 		var code = $.trim($('#code').val());
 		if(!mobile.checkMobile(mobilePhone)){
 			layer.open({content:'请输入正确手机号码',time:3});
 			return;
 		}
 		if(code!=$("#sendCode").html()){
 			layer.open({content:'验证码错误',time:3});
 			return;
 		}
 		user.mobile = mobilePhone;
 		mobile.ajaxPost(base+'/users/save',user, function(json) {
 			layer.open({content: '登录成功', time: 3});
 			setTimeout(function() {
 				$("#toOrder").html("立即抢购");
 				$('#login').removeClass('mui-active');
			}, 1000);
		});
	});
	$("#use .icon-chucuo1").on("click",function(){
		$("#use").remove();
	});
	$("#use .main").on("tap",function(){
		location.href=base+"/mobile/index.jsp";
	});
	$("#use .order").on("tap",function(){
		location.href=base+"/mobile/userOrderDetail.jsp?id="+data.order.id;
	});
	
	//推广
	$(".tuiguang").on('tap',function(){
		if(user.is_share=='1'){
			$("#share").show();
		}else{
			location.href=base+'/mobile/userInfo.jsp?flag=1';
		}
	});
	//分享
	$(".share-bg").on('tap',function(){
		$("#share").hide();
	});
	//分享
	$(".share-img").on('tap',function(){
		$("#share").hide();
	});
	
	$("#saveOrder").on('tap',function(){
		saveOrder($('.mui-input-numbox').val());
	});
	
	$(".haibao").on("tap",function(){
		if($("#myImg").attr("src")){
			$(".poster").show();
			$(".qr-mask").show();
		    $(".pic-box").hide();
		}else{
			var l = layer.open({type: 3,shadeClose:false,content: '生成中...'});
			$(".poster").show();
			html2canvas(document.querySelector("#pic-box"),{useCORS: true}).then(function(canvas) {
			    $("#myImg").css("height",$(window).height()-120);
			    $("#myImg").css("width","100%");
			    $("#myImg").attr("src",getBase64Image(canvas));
			    $(".qr-mask").show();
			    $(".pic-box").hide();
			    layer.close(l);
			});
		}
	});
	
	$(".qr-mask").on("tap",function(){
		$(".poster").hide();
		$(".qr-mask").hide();
		$(".pic-box").show();
	})
	
	$('#myImg').on('tap', function(event) {
	    event.preventDefault();
	    event.stopPropagation();
	});
});


/**
 * 抢购
 * @returns
 */
function buy(){
	if(!user.mobile){
		$('#login').addClass('mui-active');
	}else{
		if(data.limit_num!=1){
			mui('#popover').popover('toggle');
		}else{
			saveOrder(1);
		}
	}
}

function saveOrder(num){
	mobile.ajaxPost(base+'/userOrder/save',{
		productId: id,
		company: sessionStorage.getItem("company"),
		shareUser: sessionStorage.getItem("shareUser"),
		productNum: num
	},function(json){
		if(json.success){
			location.href=base+"/mobile/userOrderDetail.jsp?id="+json.data.id;
		}else{
			layer.open({content:json.msg,time:3});
		}
	});
}
function getDistance(distance){
	var i= parseInt(distance);
	if(i<1000){
		return i+"米"; 
	}else{
		var f = parseFloat(i/1000);
	    if (isNaN(f)) {
	        return;
	    }
	    f = Math.round(i/1000 * 10) / 10;
	    return f+"公里";
	}
}
//获取商品信息
function getCustom(){
	mobile.ajaxPost(base+"/sysCustom/getById",{},function(json){
		custom = json.data;
		$(".wechat_logo").attr("src",imgUrl+custom.wechat_logo);
		$(".wechat_name").html(custom.wechat_name);
		$(".wechat_summary").html(custom.wechat_summary);
		
	});
}
//获取商品信息
function getProductDetail(){
	mobile.ajaxPost(base+"/product/getProduct",{id:id},function(json){
		if(json.success){
			data = json.data;
			if(data.time_status==3){
        		$("#toOrder").html("已结束");
        		$("#toOrder").removeClass("main-bgcolor").addClass("bgcolor3");
			}else{
			    if (data.product_type=="10"){
                    $(".time").removeClass("mui-hidden");
                    var interval= setInterval(function() {
                        var typeName;
                        var time;
                        var leftTime
                        if(new Date(data.end_time.replace(/-/g, "/")) > new Date()){
                            leftTime = (new Date(data.end_time.replace(/-/g, "/"))) - (new Date()); //计算剩余的毫秒数
                            typeName = "结束";
                        }else{
                            leftTime = (new Date(data.use_time.replace(/-/g, "/"))) - (new Date()); //计算剩余的毫秒数
                            typeName = "过期";
                        }
                        var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数
                        var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
                        var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
                        var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
                        hours = checkTime(hours);
                        minutes = checkTime(minutes);
                        seconds = checkTime(seconds);
                        $(".time").html("距"+typeName+days+"天" + hours+"小时" + minutes+"分"+seconds+"秒");
                    }, 1000);
                }
				if(data.time_status==0){
					var nbox = mui('.mui-numbox').numbox();
					//nbox.options["max"]=data.limit_num-data.orderNum;
            		if(data.order){
        				if(data.orderNum<data.limit_num){
        					$("#toOrder").html("立即抢购");
        				}else{
        					if(data.order.order_status=="10"){
                				$("#toOrder").html("去付款");
                			}else if(data.order.order_status=="20"){
                				$("#toOrder").html("去使用");
                			}else if(data.order.order_status=="30"){
                				if(data.order.comment_flag!="1"){
                					$("#toOrder").html("去评价");
                				}else{
                					$("#toOrder").html("谢谢惠顾");
                					$("#toOrder").removeClass("main-bgcolor").addClass("bgcolor3");
                				}
                			}
        				}
            		}else{
            			if(user.mobile){
                			$("#toOrder").html("立即抢购");
                		}else{
                			$("#toOrder").html("点击登录");
                		}
            		}
				}else if(data.time_status==1){
					$("#toOrder").html("已抢完");
					$("#toOrder").removeClass("main-bgcolor").addClass("bgcolor3");
				}else {
					$("#toOrder").html("已结束");
					$("#toOrder").removeClass("main-bgcolor").addClass("bgcolor3");
				}
			}
           
			share.title=data.product_name;
			share.imgUrl=imgUrl+data.product_main_img;
			$(".product-img-border img").attr("src",share.imgUrl);
			if(data.share_price&&user.is_share=="1"){
				$(".share_price").html("推广奖励："+data.share_price+"元");
				$("#share-div").removeClass("mui-hidden");
			}
			var arr = [];
			if(data.product_img_1){
				arr.push(data.product_img_1);
				$(".pic-box img").attr("src",imgUrl+data.product_img_1);
			}
			if(data.product_img_2){
				arr.push(data.product_img_2);
			}
			if(data.product_img_3){
				arr.push(data.product_img_3);
			}
			var unit = mobile.getDictVal("product_unit",data.product_unit);
			$(".productName").html(data.product_name);
			$(".pic-title").html(data.product_name);
			$(".price .fs24").html(data.product_price);
			$(".product-price").html('<span class="fs16">¥</span><span class="fs24">'+data.product_price+'</span>'+
					'<span class="fs12 del-line color3 ml5">¥'+data.product_old_price+'</span>');
			$(".pic-price .del-line").html(data.product_old_price+"元");
			$(".pic-price .color-red").html(data.product_price+"元");
			$(".product_integral").html(parseInt(data.product_price)+"积分");
			$(".old_price").html(data.product_old_price+"元");
			$(".visit_num").html(data.visit_num+"人关注");
			$(".limit_num").html("限购<span class='color-red bold fs14'>"+data.limit_num+"</span>"+unit)
			$(".integral").html("返"+parseInt(data.product_price)+"积分");
			if(data.payNum>0){
				$(".product_num").html("总"+data.product_num+unit+"/剩"+(data.product_num-data.sale_num)+unit+"" +
						"<span class='main-color pl5'>"+data.payNum+"人正在付款</span> ");
			}else{
				$(".product_num").html("总"+data.product_num+unit+"/剩"+(data.product_num-data.sale_num)+unit+"");
			}

			if(data.order_hour<=0){
				$(".order_hour").html("免预约");
			}else{
				$(".order_hour").html("提前"+data.order_hour+"小时预约");
			}
			if(data.is_pack==1){
				$(".pack").html("提供打包");
			}else{
				$(".pack").html("店内使用");
			}
            $(".merchant img").attr("src", imgUrl+data.merchant.merchant_img1);
			$(".merchant_name").html(data.merchant.merchant_name);
			$(".address").html(data.merchant.address);
			if(data.merchant.comment_num!=0){
				$(".comment_num").html(data.merchant.comment_num+"人评价")
			}
			var qrtext = location.href.replace('#','');
			if(qrtext.indexOf("shareUser")!=-1){
				qrtext = mobile.changeUrlParam(qrtext,"shareUser",user.openid);
			}else{
				qrtext+="&shareUser="+user.openid;
			}
			$("#qrcode img").attr("src",base+"/common/qrcode?width=200&height=200&content="+escape(qrtext));
            if(data.product_notice){
                $("#notice").html(data.product_notice);
            }else{
                $("#notice").html('<span class="fs14 color2">暂无信息</span>');
            }
			if(data.product_detail){
				$("#detail").html(data.product_detail);
				$("img.lazy").lazyload({
					threshold : 50,
					effect: "fadeIn",
					placeholder: base+'/static/mobile/image/500.gif',
					skip_invisible : false
				});
			}else{
				$("#detail").html('<span class="fs14 color2">暂无信息</span>');
			}
			$('.mui-content').removeClass('mui-hidden');
			$('.mui-bar-tab').removeClass('mui-hidden');
			initSlider(arr);
			//获取评价
            getHot();
			
			wx.ready(function(){
				wx.getLocation({
					type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
					success: function (res) {
						$.ajax({
				            url:'http://api.map.baidu.com/geoconv/v1/?coords='+res.longitude+','+res.latitude+'&from=1&to=5&ak=3Q4laSROftZI4chFMPVUno90',
				            dataType:'jsonp',
				            processData: false,
				            type:'get',
				            success:function(json){
				                if (json.status=='0'){
				                	var latitude=json.result[0].y;
									var longitude=json.result[0].x;
									var map = new BMap.Map("allmap");
									var pointA = new BMap.Point(longitude,latitude);
									var pointB = new BMap.Point(data.merchant.longitude,data.merchant.latitude);
									var distance = parseInt(map.getDistance(pointA,pointB));
									$(".distance").html(getDistance(distance));
				                }
				            },
				            error:function(XMLHttpRequest, textStatus, errorThrown) {
				                layer.msg('坐标转换失败');
				            }
				        });
					}
				});
			});
		}else{
			layer.open({content: json.msg,time: 3});
		}
	});
}
function initSlider(arr){
	$("#slider .mui-slider-group").append('<div class="mui-slider-item mui-slider-item-duplicate">'+
			'<a href="javascript:void(0)">'+
			'<img class="slider-lazy" data-original="'+imgUrl+arr[arr.length-1]+'" >'+
			'</a>'+
		'</div>');
	if(arr.length>1){//数量大于1定时滚动
		for(var i=0;i<arr.length;i++){
			$("#slider .mui-slider-group").append('<div class="mui-slider-item">'+
					'<a href="javascript:void(0)">'+
						'<img class="slider-lazy" data-original="'+imgUrl+arr[i]+'" >'+
					'</a>'+
				'</div>');
			if(i==0){
				$("#slider .mui-slider-indicator").append('<div class="mui-indicator mui-active"></div>');
			}else{
				$("#slider .mui-slider-indicator").append('<div class="mui-indicator"></div>');
			}
		}
	}else{//数量等于1
		$("#slider .mui-slider-group").append('<div class="mui-slider-item">'+
				'<a href="javascript:void(0)">'+
					'<img class="slider-lazy" data-original="'+imgUrl+arr[0]+'" >'+
					'</a>'+
			'</div>');
	}
	$("#slider .mui-slider-group").append('<div class="mui-slider-item mui-slider-item-duplicate">'+
			'<a href="javascript:void(0)">'+
			'<img src="'+imgUrl+arr[0]+'" >'+
			'</a>'+
		'</div>');
	if(arr.length>1){
		var slider = mui("#slider");
		slider.slider({
			interval: 3000
		});
	}
	$("img.slider-lazy").lazyload({
		threshold : 200,
		placeholder: base+'/static/mobile/image/500.gif',
		skip_invisible : false
	});
}
//获取评价
function getUserMsg(){
	$('.userMsg-content').dropload({
        scrollArea : window,
        loadDownFn : function(me){
			mobile.ajaxPost(base+'/userOrder/getUserMsgList',{
				productId: id,
				pageSize: pageSize,
				pageNumber: pageNumber
			},function(json){
				if(json.list&&json.list.length>0){
					if(pageNumber==json.totalPage){
                        me.lock();
                        me.noData();
					}else{
						pageNumber++;
					}
					var html=[];
					jQuery.each(json.list,function(id,item){
						html.push('<li class="mui-table-view-cell">');
						html.push('<div class="mui-table">');
		                html.push('<div class="mui-table-cell mui-col-xs-3 mui-ellipsis">'+getName(item.nickname)+'</div>');
		                html.push('<div class="mui-table-cell mui-col-xs-6">'+item.user_msg+'</div>');
		                html.push('<div class="mui-table-cell mui-col-xs-3">'+new Date(item.create_time.replace(/-/g, "/")).format("MM-dd hh:mm")+'</div>');
		                html.push('</div>');
		                html.push('</li>');
					})
					$("#userMsg").append(html.join(""));
					me.resetload();
				}else{
					me.lock();
                    me.noData();
                    me.resetload();
				}
			},"");
	    }
	});
	
}
function checkTime(i){ // 将0-9的数字前面加上0，例1变为01
  if(i<10) { 
    i = "0" + i; 
  } 
  return i; 
}

function getName(name){
	if(name){
		if(name.length==1){
			return "*";
		}else if(name.length==2){
			return name.substring(0,1)+"*";
		}else{
			return name.substring(0,1)+"*"+name.substring(name.length-1);
		}
	}else{
		return "*";
	}
}

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);

    var dataURL = canvas.toDataURL("image/png");
    return dataURL
}

function getHot() {
    mobile.ajaxPost(base+'/product/getHot',{id:id},function(json){
        if(json.data&&json.data.length>0){
            var html=[];
            jQuery.each(json.data,function(id,item){
                html.push('<a class="section-item" href="'+base+'/mobile/productDetail.jsp?id='+item.id+'">');
                html.push('<div class="image-box">');
                html.push('<img class="product-lazy" data-original="'+imgUrl+item.product_main_img+'" style="width: 100%; display: block;">');
                html.push('</div>');
                html.push('<div class="info-box">');
                html.push('<div class="info-title">'+item.product_name+'</div>');
                html.push('<div class="items">');
                html.push('<div class="product-price item"><em>¥'+item.product_price+'<span class="del-line color3 ml5">'+item.product_old_price+'元</span></em></div>')
                html.push('<div class="fs12 color3">关注：'+item.visit_num+'</div>')
                html.push('</div></div>');
                html.push('</a>');
            });
            $(".section-list").append(html.join(""));
            $("img.product-lazy").lazyload({
                threshold : 200,
                effect: "fadeIn",
                placeholder: base+'/static/mobile/image/100.gif',
                skip_invisible : false
            });
        }else{

        }
    });
}