<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="UTF-8">
|
<title>栏目详情</title>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<link rel="stylesheet" type="text/css" href="../css/DOUI.min.css"/>
|
</head>
|
<style>
|
h1,
|
h2,
|
h3,
|
h4,
|
h5,
|
h6,
|
strong{
|
font-weight: normal;
|
}
|
h1,
|
h2,
|
h3,
|
h4,
|
h5,
|
h6,
|
p,
|
ul,
|
ol{
|
margin: 0;
|
font-weight: normal;
|
}
|
ul,
|
ol{
|
list-style: none;
|
padding: 0;
|
}
|
a {
|
text-decoration: none;
|
color: #777777;
|
font-size: 12px;
|
}
|
a:focus{
|
background: transparent;
|
}
|
a:focus {
|
outline: none;
|
}
|
a:active{
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
}
|
body{
|
background: #EFEFEF;
|
font-family: "微软雅黑";
|
margin: 0;
|
}
|
|
.rich_media_title{
|
margin: 0px !important;
|
}
|
.titlePic{
|
width: 100%;
|
overflow: hidden;
|
margin:0px;
|
background: #fff;
|
}
|
.titlePic img{
|
width: 100%;
|
float: left;
|
}
|
.title{
|
background: white;
|
padding-top: 40px;
|
padding-bottom: 4px;
|
}
|
.line {
|
border-top: 1px solid #EFEFEF;
|
height: 1px;
|
position: relative;
|
}
|
.line h5 {
|
background: white;
|
display: inline-block;
|
width: 160px;
|
text-align: center;
|
font-size: 15px;
|
color: #888;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
margin-left: -80px;
|
margin-top: -11px;
|
}
|
/*分享图标*/
|
|
.cont-icon {
|
overflow: hidden;
|
box-sizing: border-box;
|
padding: 5px;
|
padding-top: 4px;
|
}
|
|
.cont-icon li {
|
width: 20%;
|
/*border: 1px solid forestgreen;*/
|
padding: 5px;
|
float: left;
|
box-sizing: border-box;
|
}
|
|
.cont-icon li a {
|
display: inline-block;
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
}
|
|
.cont-icon li:first-of-type a {
|
background: url(../img/wx.png) no-repeat bottom;
|
background-size: 70% 70%;
|
}
|
|
.cont-icon li:nth-of-type(2) a {
|
background: url(../img/qqq.png) no-repeat bottom;
|
background-size: 70% 70%;
|
}
|
|
.cont-icon li:nth-of-type(3) a {
|
background: url(../img/pyq.png) no-repeat bottom;
|
background-size: 70% 70%;
|
}
|
|
.cont-icon li:nth-of-type(4) a {
|
background: url(../img/kj.png) no-repeat bottom;
|
background-size: 70% 70%;
|
}
|
|
.cont-icon li:nth-of-type(5) a {
|
background: url(../img/wb.png) no-repeat bottom;
|
background-size: 70% 70%;
|
}
|
/*商品详情*/
|
.goods{
|
background: white;
|
margin-top: 10px;
|
}
|
.goods h5{
|
line-height: 40px;
|
font-size: 15px;
|
color: #333;
|
text-align: center;
|
}
|
.goods ul{
|
display: flex;
|
flex-wrap: wrap;
|
box-sizing: border-box;
|
border-top:1px solid #EFEFEF;
|
}
|
.goods li{
|
width: 50%;
|
box-sizing: border-box;
|
padding: 5px;
|
border-bottom: 1px solid #EFEFEF;
|
}
|
.goods li a{
|
display: inline-block;
|
padding: 5px;
|
width: 100%;
|
color: #333;
|
font-size: 14px;
|
box-sizing: border-box;
|
}
|
.goods li:nth-of-type(odd){
|
border-right:1px solid #EFEFEF;
|
}
|
.goods li img{
|
width: 100%;
|
border-radius: 10px;
|
}
|
|
.goods li p:first-of-type{
|
line-height: 26px;
|
overflow: hidden;
|
font-size: 14px;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
.icon{
|
display: inline-block;
|
background: #FF3083;
|
text-align: center;
|
padding: 0 6px;
|
font-size: 12px;
|
border-radius: 4px;
|
color: #fff;
|
line-height: 20px;
|
margin-right: 14px;
|
}
|
.icon.tb{
|
background: #FF4400;
|
}
|
|
.icon.tm{
|
background: #FF3083;
|
}
|
|
.goods li p:nth-of-type(2){
|
padding: 6px 0;
|
padding-bottom: 0;
|
font-size: 18px;
|
color: #FF3044;
|
font-weight: bold;
|
}
|
.goods li p:nth-of-type(2) span{
|
font-size: 14px;
|
font-weight: normal;
|
}
|
.goods li p:nth-of-type(3){
|
font-size: 12px;
|
color: #FF3044;
|
line-height: 26px;
|
overflow: hidden;
|
}
|
.goods li p:nth-of-type(3) span:first-of-type{
|
color: #999;
|
/*margin-right: 12px;*/
|
text-decoration: line-through;
|
float: left;
|
|
}
|
.goods li p:nth-of-type(3) span:last-of-type{
|
float: right;
|
}
|
.goods li p:last-of-type{
|
padding-top: 6px;
|
overflow: hidden;
|
font-size: 12px;
|
}
|
.fl{
|
float: left;
|
color: #888;
|
font-size: 13px;
|
}
|
.fr{
|
display: inline-block;
|
float: right;
|
background: #F8B551;
|
color: #fff;
|
border-radius: 4px;
|
padding: 1px 4px 2px 4px;
|
}
|
.zdy{
|
background-color: white;
|
}
|
.zdy img{
|
max-width: 88%;
|
height:auto;
|
margin: auto;
|
}
|
|
/*商品券*/
|
.spquan1{ width: 3.5rem; height: 100%; background-image: url(../img/search_kale.png); background-size: 100% 100%; color: white; font-size: 0.8rem; line-height: 1.3rem; }
|
.spquan1>div{ width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
|
.spquan2{ height: 100%; background-image: url(../img/search_kari.png); background-size: 100% 100%; color: #E70D5C; font-size: 0.5rem; line-height: 1.3rem; }
|
.spquan2>div{ width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
|
|
|
</style>
|
<body>
|
<div id="test"></div>
|
<div class="page">
|
<div class="titlePic">
|
<img src="../img/dufa.jpg"/>
|
</div>
|
<div class="zdy">
|
|
</div>
|
<div class="title" style="display: none;">
|
<div class="line">
|
<h5>分享给朋友</h5>
|
</div>
|
<ul class="cont-icon">
|
<li>
|
<a href="#"></a>
|
</li>
|
<li>
|
<a href="#"></a>
|
</li>
|
<li>
|
<a href="#"></a>
|
</li>
|
<li>
|
<a href="#"></a>
|
</li>
|
<li>
|
<a href="#"></a>
|
</li>
|
</ul>
|
</div>
|
<div class="goods">
|
<h5>编辑推荐</h5>
|
<ul class="content">
|
</ul>
|
</div>
|
</div>
|
<div id="isplist" class="fboxWrap" style="width:100%;">
|
|
<!--js添加-->
|
<div class="fboxRow displayNone" style="width:50%;" spid='12513241212'>
|
<div class="flex1 fboxCol" style="border:1px solid gainsboro;background-color: white;">
|
<!--商品图片-->
|
<div style="width:100%;height:auto;"><img src="../img/all_logo.png" style="width:100%;height:auto;"/></div>
|
<!--商品标题-->
|
<div style="width:93%;height:2rem;margin:0.2rem auto;font-size:0.6rem;line-height:1rem;position:relative;overflow:hidden;">
|
<span style="padding:0.1rem 0.2rem;margin-right:0.2rem;border-radius:0.2rem;color:white;background-color:#FA5627;">淘宝</span>
|
<span>阿斯记得乃是的吧进口料件阿斯达牙刷阿斯达阿萨姆嗲顺德</span>
|
<div style="width:0.6rem;height:1rem;background-color:white;position:absolute;right:0;bottom:0;">...</div>
|
</div>
|
<!--商品价格-->
|
<div class="fboxCol" style="width:93%;height:2.3rem;margin:0.2rem auto;overflow:hidden;color:#E5005C;">
|
<div class="fboxRow Ycenter">
|
<div class="font_min">券后价</div>
|
<div class="font_normax">￥50.5</div>
|
</div>
|
<div class="fboxRow Ycenter">
|
<div class="font_min">返利</div>
|
<div class="font_normax">￥2.5</div>
|
</div>
|
</div>
|
<!--特殊说明-->
|
<div class="fboxRow" style="width:93%;height:1.3rem;margin:0.2rem auto;overflow:hidden;">
|
<!--优惠券-->
|
<div class="fboxRow Ycenter" style="width:100%;height:100%;">
|
<div class="spquan1"><div>￥2</div></div>
|
<div class="spquan2 flex1"><div>满100可以使用￥2优惠券</div></div>
|
<div class="font_min font_gray">销量：12312321</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
|
|
|
</body>
|
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
|
<script type="text/javascript" src="../js/base64.js"></script>
|
<script type="text/javascript" src="//g.alicdn.com/mtb/lib-applink/0.3.4/??callApp.js,linksdk.js"></script>
|
<script type="text/javascript">
|
var falg = false;
|
$(function(){
|
|
var agent = navigator.userAgent;
|
// $("#test").text(agent);
|
var index1 = agent.indexOf("QQ");
|
var index2 = agent.indexOf("Windows");
|
var index3 = agent.indexOf("360");
|
var index4 = agent.indexOf("UCBrowser");
|
var index5 = agent.indexOf("MicroMessenger");
|
var index6 = agent.indexOf("Weibo");
|
var index7 = agent.indexOf("Firefox");
|
|
if(index1 >= 0 || index2 >= 0 || index3 >= 0 || index4 >= 0 || index5 >= 0 || index6 >= 0 || index7 >= 0){
|
falg=true;
|
$.getScript("../js/tbsdk.js");
|
}
|
|
|
var id = getArgsFromHref(location.href,"id");
|
|
$.post("../getRecommendSectionDetail",{"id":id},function(data){
|
if(data.code==0){
|
setData(data.data);
|
}
|
},'json');
|
|
|
|
$.post("../getRecommendSectionGoodsList",{"id":id},function(data){
|
if(data.code==0){
|
setGoodsData(data.data);
|
}
|
},'json');
|
|
|
});
|
|
function setGoodsData(data){
|
var goodsList = data.goodsList;
|
var goodsHtml1 = $(".muban1").html();
|
var goodsHtml2 = $(".muban2").html();
|
|
for (var ii=0;ii<goodsList.length;ii++) {
|
var tb = goodsList[ii];
|
var auctionId= tb.auctionId;
|
var pictUrl = tb.pictUrl;
|
var url = tb.auctionUrl;
|
var title= tb.title;
|
var shopType = tb.shopType;
|
var xl = tb.biz30day;
|
|
if(tb.taoBaoQuanInfo!=undefined)
|
Setsp(auctionId, pictUrl, shopType, title, tb.quanPrice, tb.taoBaoHongBaoInfo.rate, tb.taoBaoQuanInfo.couponAmount, tb.taoBaoQuanInfo.couponInfo, tb.biz30day,url);
|
else
|
Setsp(auctionId, pictUrl, shopType, title, tb.zkPrice, tb.taoBaoHongBaoInfo.rate, null, null, tb.biz30day,url);
|
|
$('.spdan').click(function(){
|
window.location.href= $(this).attr("clickurl");
|
});
|
|
if(falg){
|
$(".spdan").eq(ii).bind("click",function(){
|
window.BC_SDK.goTaoke({
|
tkUrl : url,
|
params : {
|
pid: "mm_106929643_20324269_73400452", // 淘客必填
|
}
|
});
|
return false;
|
});
|
}
|
}
|
}
|
|
|
//编辑推荐商品打印,参数如下： (如果没有的，请传入null)
|
//1.商品id
|
//2.商品图片
|
//3.商品来源 1-淘宝||2-天猫
|
//4.商品标题
|
//5.商品价格处 显示数字
|
//6.商品价格处 返利显示内容
|
//7.商品券 左边显示
|
//8.商品券 右边显示
|
//9.商品销量
|
function Setsp(idC, imgC, fromC, titleC, jiaC, fanC, quan1C, quan2C, xiaoC, url)
|
{
|
var base64 = new Base64();
|
|
var entitle=base64.encode(titleC);
|
var clickHref="yestv://getgoodsdetail#"+idC+"#"+url+"#"+entitle;
|
|
//添加节点构建
|
var jiedian = '';
|
//商品id
|
jiedian += '<div class="fboxRow spdan" style="width:50%;" clickurl="'+clickHref+'">';
|
jiedian += '<div class="flex1 fboxCol" style="border:1px solid gainsboro;background-color: white;">';
|
//商品图片
|
jiedian += '<div style="width:100%;height:auto;"><img src="'+imgC+'" style="width:100%;height:auto;"/></div>';
|
jiedian += '<div style="width:93%;height:2rem;margin:0.2rem auto;font-size:0.6rem;line-height:1rem;position:relative;overflow:hidden;">';
|
//商品来源
|
if (fromC == 1) { jiedian += '<span style="padding:0.1rem 0.2rem;margin-right:0.2rem;border-radius:0.2rem;color:white;background-color:#FA5627;">淘宝</span>'; }
|
else if (fromC == 2) { jiedian += '<span style="padding:0.1rem 0.2rem;margin-right:0.2rem;border-radius:0.2rem;color:white;background-color:#E71768;">天猫</span>'; }
|
//商品标题
|
jiedian += '<span>'+titleC+'</span><div style="width:0.6rem;height:1rem;background-color:white;position:absolute;right:0;bottom:0;">...</div></div>';
|
jiedian += '<div class="fboxCol" style="width:93%;height:2.3rem;margin:0.2rem auto;overflow:hidden;color:#E5005C;"><div class="fboxRow Ycenter">';
|
//商品价格
|
if (quan1C != null) { jiedian += '<div class="font_normol">券后价：</div>'; }
|
jiedian += '<div class="font_max">￥'+jiaC+'</div></div>';
|
//商品返利
|
jiedian += '<div class="fboxRow Ycenter"><div class="font_normol">返利：</div><div class="font_normol">'+fanC+'</div></div></div>';
|
//商品券
|
jiedian += '<div class="fboxRow" style="width:93%;height:1.3rem;margin:0.2rem auto;overflow:hidden;">';
|
jiedian += '<div class="fboxRow Ycenter" style="width:100%;height:100%;">';
|
if (quan1C != null) { jiedian += '<div class="spquan1"><div style="font-weight:bold;">￥'+quan1C+'</div></div><div class="spquan2 flex1"><div>'+quan2C+'</div></div>'; }
|
if (quan1C == null && xiaoC != null) { jiedian += '<div class="font_min font_gray">销量：'+xiaoC+'</div>'; }
|
//节点结尾
|
jiedian += '</div></div></div></div>';
|
//添加节点
|
$("#isplist").append(jiedian);
|
|
}
|
|
|
function setData(data){
|
var picUrl = data.picUrl;
|
var html = data.html;
|
// $(".titlePic").attr("href",picUrl);
|
$(".titlePic img").attr("src",picUrl);
|
$(".zdy").append(html);
|
}
|
|
|
function getArgsFromHref(sHref, sArgName) {
|
var args = sHref.split("?");
|
var retval = "";
|
|
if(args[0] == sHref) /*参数为空*/ {
|
return retval; /*无需做任何处理*/
|
}
|
var str = args[1];
|
args = str.split("&");
|
for(var i = 0; i < args.length; i++) {
|
str = args[i];
|
var arg = str.split("=");
|
if(arg.length <= 1) continue;
|
if(arg[0] == sArgName) retval = arg[1];
|
}
|
return retval;
|
}
|
</script>
|
</html>
|
