youhuiquan/choujiang/goods/js/detail.js

//获取地址栏参数
function parseQueryString(url) {
    var urlObj = {};
    var reg = /([^?=&]+)=([^?=&]+)/g;
    url.replace(reg, ($0, $1, $2) => {
        urlObj[$1] = decodeURIComponent($2);
    })
    return urlObj;
}
var qs = parseQueryString(window.location.href);
var page =1;
var maxPage =1;
var loadingFlag = false;
var goodsData = [];//商品列表

var goods_id, is_coupon, coupon_price, price, discount_price, token;
$().ready(function () {
	token = qs.token;
	goods_id = qs.goods_id;
	is_coupon = qs.is_coupon;
	coupon_price = qs.coupon_price;
	price = qs.price;
	discount_price = qs.discount_price;
	tdetail();
	recommendlist(1);//相关推荐
	$(window).scroll(function(){
		if($(window).scrollTop()>= $(document).height()-$(window).height() - 20){
			//到达底部加载数据
			if(loadingFlag){
				page ++ ;
				recommendlist(page);//相关推荐
			}
		}
	});
})
//详情页接口
function tdetail () {
	$.ajax({
		type:"post",
		url:"/api/v2/goods/detail",
		dataType:'json',
		data:{
			goods_id:goods_id,
			is_coupon:is_coupon,
			coupon_price:coupon_price,
			price:price,
			discount_price:discount_price
		},
		success:function (res) {
			console.log(res)
			if(res && res.errno == 0){
				var commodityDetailsHtml;
				var shop = res.rst.data.shop,shopHtml;//商铺信息
				var bannerHtml = '';//banner
				res.rst.data.small_img.forEach(function (item, index) {
					bannerHtml += `<div class="swiper-slide">
										<img width="100%" src="${item}" />
					            	</div>`
				})
				var is_coupon = res.rst.data.is_coupon,is_coupon_html = "";//是否有券
				if(is_coupon == 1){
					is_coupon_html = `<span class="commodity_coupon"><em>券</em><em>${res.rst.data.coupon_price}元</em></span>`
				}
				var shop_type = res.rst.data.shop_type, shop_type_img = '';//店铺类型，0淘宝，1天猫
				if(shop_type == 1){
					shop_type_img = `<img src="imgs/tianmao.png" class="icon" />`
				}
				var commodityHtml = `<div class="swiper-container">
						            <div class="swiper-wrapper">
						            	${bannerHtml}
						            </div>
						            <!-- 如果需要分页器 -->
						            <div class="swiper-pagination"></div>
						        </div>
						      <div class="commodity_info">
						        <p class="info_top">
						          <span class="commodity_new_price">券后<em>￥${res.rst.data.discount_price}</em></span>
						          ${is_coupon_html}
						        </p>
						        <p class="info_cen">
						            <span class="info_cen_old_price">原价<em>￥${res.rst.data.price}</em></span>
						            <span >月销${res.rst.data.volume}</span>
						        </p>
						        <p class="info_name">
						          ${shop_type_img}
						          ${res.rst.data.title}
						        </p>  
						      </div>`;
				if(shop){//商品详情
					shopHtml = `<div class="shop">
		      						<img src="${shop.pic_path}" alt="" class="shop_img">
									<p class="shop_info">
							          <span class="shop_name">${shop.title}</span>
							          <span class="shop_about"><em>宝贝描述  ${shop.item_score}</em><em>卖家服务   ${shop.service_score}</em><em>物流服务  ${shop.delivery_score}</em></span>
							        </p>
							    </div>`
				}
				commodityDetails = ` <div class='commodityDetails'>
					        <a class='title' href='${res.rst.data.detail_url}'>宝贝详情 <img src='https://small-app.oss-cn-beijing.aliyuncs.com/youhuiquan/%E5%8F%B3%403x.png'/></a>
					    </div>`
				$("#commodityDetails").html(commodityDetails)
				$("#shop").html(shopHtml)
				$(".commodity").html(commodityHtml);
				swiperEvent();//swiper  banner动画
			}
		}
	});
}
//swiper
function swiperEvent () {
	var mySwiper = new Swiper ('.swiper-container', {
        autoplay: 3000,
       loop: true,
       pagination: '.swiper-pagination',
     })
}
//相关推荐
function recommendlist (pageIndex) {
	loadingFlag = false;
	if(maxPage < page){
		$(".loading").html("没有更多了")
		return;
	}
	$.ajax({
		type:"post",
		url:"/api/v2/goods/recommendlist",
		dataType:'json',
		data:{
			goods_id:goods_id,
			page:pageIndex,
		},
		success:function (res) {
			console.log(res)
			if(res.errno == "0" && res.rst){
				htmlEvent(res)
			}
		}
	})
}
function htmlEvent (res) {
	var data = res.rst.data;
	var conHtml= '';
	var quan = '';
	maxPage = res.rst.pageInfo.maxPage;
	//商品
	if( data.length > 0){
		if(goodsData.length != 0){
			goodsData = goodsData.concat(data);
			goodsData.forEach(function (item, index) {
				var shop_type = item.shop_type, shop_type_img = '';//店铺类型，0淘宝，1天猫
				if(shop_type == 1){ shop_type_img = '<img src="imgs/tianmao.png" class="icon"/>' }
				var is_coupon = item.is_coupon, quan = ''; //有没有券
				if(is_coupon == 1){ quan = `<div class="goods_coupon" ><span>券</span><span>${item.coupon_price}元</span></div>` }
				conHtml +=`<li class="goods_item" onclick="toDetails({goods_id:${item.goods_id},coupon_price:${item.coupon_price},is_coupon:${item.is_coupon},price:${item.price},discount_price:${item.discount_price}})">
			        <img src="${item.img}" alt="" class="goods_img">
			        <div class="goods_name">
			           ${shop_type_img}
			            ${item.title}
			        </div>
			        <div class="quan">
			          ${quan}
			        </div> 
			        <div class="goods_price">
			          <span>券后</span>  
			          <span class="new_price">￥${item.discount_price}</span>
			          <span class="old_price">￥${item.price}</span>
			        </div>
			     </li>`
			})
			
		}else{
			goodsData = res.rst.data;
			goodsData.forEach(function (item, index) {
				var shop_type = item.shop_type, shop_type_img = '';//店铺类型，0淘宝，1天猫
				if(shop_type == 1){ shop_type_img = '<img src="imgs/tianmao.png" class="icon"/>' }
				
				var is_coupon = item.is_coupon, quan = ''; //有没有券
				if(is_coupon == 1){ quan = `<div class="goods_coupon" ><span>券</span><span>${item.coupon_price}元</span></div>` }
				conHtml +=`<li class="goods_item" onclick="toDetails({goods_id:${item.goods_id},coupon_price:${item.coupon_price},is_coupon:${item.is_coupon},price:${item.price},discount_price:${item.discount_price}})">
			        <img src="${item.img}" alt="" class="goods_img">
			        <div class="goods_name">
			           ${shop_type_img}
			           ${item.title}
			        </div>
			        <div class="quan">
			          ${quan}
			        </div> 
			        <div class="goods_price">
			          <span>券后</span>  
			          <span class="new_price">￥${item.discount_price}</span>
			          <span class="old_price">￥${item.price}</span>
			        </div>
			     </li>`
			})
		}
		loadingFlag = true;
		$('#tuijian ul').html(conHtml)
		$(".loading").html("努力加载中...")
	}else{
		$(".loading").html('暂无数据')
	}
}
//跳转详情页
function toDetails (res) {
	window.location.href="details.html?coupon_price=" + res.coupon_price + "&discount_price=" + res.discount_price + "&goods_id=" + res.goods_id + "&is_coupon=" + res.is_coupon + "&price=" + res.price + "&token=" + token;
	$(window).scrollTop(0);
}
//用户下单接口
function orderDown () {
	$.ajax({
		type:"post",
		url:"/api/v2/adzoneCreate/orderDown",
		headers:{
			token:token,
			source:6002
		},
		data:{
			goods_id:goods_id,
			is_coupon:is_coupon
		},
		success: function (res){
			if(res && res.errno == 0){
				openTaobao(res.rst.url)
			}
		}
	});
}
//	打开淘宝
function openTaobao (url) {
//	alert(url)
	var param = {"taobaoUrl" : url} 
	param = JSON.stringify(param)
	try{
		if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){
				window.webkit.messageHandlers.app_h5_open_taobao_url.postMessage(param);
		}
		if(navigator.userAgent.match(/android/i)){
				obj4H5.app_h5_open_taobao_url(param);
		}
	}catch(e){
		//TODO handle the exception
		alert('请更新版本就行购买')
	}
}