<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<title>返利券</title>
|
<style type="text/css">
|
*{
|
margin: 0;padding: 0;
|
|
}
|
ul{
|
list-style: none;
|
}
|
/*淘口令*/
|
.alert{
|
width: 100%;
|
box-sizing: border-box;
|
padding: 10px 12px 10px 12px;
|
background: rgba(0,0,0,0.5);
|
color: #fff;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 10;
|
}
|
.copy button{
|
padding: 5px 15px;
|
border: none;
|
outline: none;
|
color: #fff;
|
background: #E5005B;
|
border-radius: 20px;
|
}
|
/*内容*/
|
.wrapper{
|
font-family: "微软雅黑";
|
color: #222;
|
}
|
.goods{
|
width: 100%;
|
max-height: 320px;
|
position: relative;
|
overflow: hidden;
|
border-bottom: 1px solid #CFD43A;
|
}
|
.goods img{
|
width: 100%;
|
min-height: auto;
|
float: left;
|
}
|
.text{
|
width: 100%;
|
box-sizing: border-box;
|
padding: 12px;
|
background: rgba(255,255,255,0.6);
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
}
|
.text p{
|
line-height: 22px;
|
font-size: 16px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
.text div{
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
color: #E5005B;
|
font-size: 14px;
|
padding-top: 2px;
|
}
|
.text h3{
|
font-size: 26px;
|
}
|
.text h3 span{
|
font-weight: normal;
|
font-size: 12px;
|
margin-right: 2px;
|
}
|
.text .icon{
|
display: inline-block;
|
width: 12px;
|
height: 12px;
|
vertical-align: middle;
|
position: relative;
|
top: -1px;
|
margin-left: 2px;
|
background: url(img/right.png) no-repeat center;
|
background-size: 60% 100%;
|
}
|
.footer{
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
padding-top: 12px;
|
padding-bottom: 60px;
|
}
|
.cont{
|
text-align: center;
|
}
|
.redBag{
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
color: #E5005B;
|
}
|
.redBag div{
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: flex-end;
|
margin-right: 2px;
|
}
|
.redBag h4{
|
margin-left: 1px;
|
}
|
.logo{
|
padding: 12px 0;
|
}
|
.logo img{
|
width: 16%;
|
}
|
.cont p{
|
color: #767676;
|
line-height: 22px;
|
width: 64%;
|
margin: auto;
|
font-size: 15px;
|
}
|
.down{
|
width: 100%;
|
background: #fff;
|
z-index: 10;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
border-top: 1px solid #CECECE;
|
text-align: center;
|
padding: 9px 0;
|
}
|
.down span{
|
display: inline-block;
|
width: 94%;
|
line-height: 38px;
|
color: #fff;
|
background: #E5005C;
|
border-radius: 19px;
|
}
|
.pos{
|
width: 100%;
|
font-size: 12px;
|
text-align: center;
|
display: none;
|
position: fixed;
|
left: 0;
|
top: 40%;
|
z-index: 10;
|
}
|
.pos p{
|
display: inline-block;
|
padding: 8px 12px;
|
border-radius: 4px;
|
color: whitesmoke;
|
background: rgba(0,0,0,0.6);
|
|
}
|
</style>
|
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
|
</head>
|
<body>
|
<ul class="alert">
|
<li>淘口令：<span id="selector"></span></li>
|
<li id="copy" class="copy"><button>点击复制</button></li>
|
</ul>
|
<div class="wrapper">
|
<div class="goods">
|
<img class="pic" src=""/>
|
<div class="text">
|
<p class="title"></p>
|
<div>
|
<h3 class="zkPrice"><span>￥</span>100.00</h3>
|
<span class="detail">查看商品详情<i class="icon"></i></span>
|
</div>
|
</div>
|
</div>
|
<div class="footer">
|
<ul class="cont">
|
<li class="redBag"><div><h3>返利红包:<h4>￥</h4></h3></div><h2 class="hb"></h2></li>
|
<li class="logo"><img src="img/logo.png"/></li>
|
<li><p>下载返利券app购买商品最高可享商品价值50%的返利红包</p></li>
|
</ul>
|
</div>
|
<div class="down"><span>下载</span></div>
|
</div>
|
<div class="pos"><p>复制成功</p></div>
|
</body>
|
<script type="text/javascript">
|
|
$(function(){
|
|
var id = getArgsFromHref(location.href,"id");
|
|
$.post("../../client/shareGoods",{"auctionId":id},function(data){
|
if(data.code==0){
|
var tb = data.data.tb;
|
var title = tb.title;
|
var tbToken = tb.tbToken;
|
var zkPrice = tb.zkPrice;
|
var hongbao = tb.taoBaoHongBaoInfo.hongbao;
|
var auctionUrl = tb.auctionUrl;
|
var picture = tb.pictUrl;
|
$(".pic").attr("src",picture);
|
$("#selector").text(tbToken);
|
$(".title").text(title);
|
$(".zkPrice").text(zkPrice.toFixed(2));
|
$(".hb").text(hongbao.toFixed(2));
|
$(".detail").bind("click",function(){
|
location.href=auctionUrl;
|
});
|
|
if(data.data.yxjh==1)
|
{
|
$(".redBag").eq(0).html("<div><h3>返利:最高40%</h3></div>");
|
}
|
}
|
},'json')
|
})
|
|
var aEle = document.querySelector('#copy');
|
aEle.addEventListener('click',function(){
|
var copyDOM = document.querySelector('#selector');
|
var range = document.createRange();
|
range.selectNode(copyDOM);
|
window.getSelection().addRange(range);
|
var successful = document.execCommand('copy');
|
try {
|
$('.pos').fadeIn(500,function(){
|
$(this).fadeOut(1000);
|
});
|
} catch(err) {
|
console.log('Oops, unable to copy');
|
}
|
window.getSelection().removeAllRanges();
|
},false);
|
|
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;
|
}
|
|
$(".down").bind("click",function(){
|
location.href="http://a.app.qq.com/o/simple.jsp?pkgname=com.yeshi.ec.rebate";
|
});
|
</script>
|
</html>
|
