<!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>
|
<link rel="stylesheet" type="text/css" href="css/DOUI.css"/>
|
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="js/DOUI.js" type="text/javascript" charset="utf-8"></script>
|
<style type="text/css">
|
/*=================== 顶部 ======================*/
|
a{ text-decoration: none; }
|
.topwai{ width: 94%; padding: 0.5rem 3%; background-color: #E3005A; color: white; }
|
/*=================== 底部分享区域 ======================*/
|
.bomwai{ width: 100%; height: 8.2rem; padding-top: 0.5rem; position: fixed; left: 0; bottom: 0; background-color: rgba(255,255,255,0.85); z-index: 10; box-shadow: 0 0 0.5rem darkgray; }
|
.bomdan{ width: 4rem; height: 4rem; }
|
/*图标*/
|
.bomimg{ width: 2.5rem; height: 2.5rem; }
|
/*=================== 内容图片文字区域 ======================*/
|
/*图片区域外层框*/
|
.imgwai{ width: 94%; padding: 0.5rem 3%; margin-bottom: 0.3rem; background-color: white; }
|
/*每张图片外框*/
|
.imgdan{ position: relative; }
|
/*图片*/
|
.imgda{ width: 100%; }
|
.imgda>img{ width: 100%; height: auto; display: block; }
|
.imgxiao{ width: 3rem; height: 3rem; margin: 0.2rem; }
|
.imgxiao>img{ width: 100%; height: 100%; display: block; }
|
/*右上角勾*/
|
.gou{ width: 0.8rem; height: 0.8rem; position: absolute; right: 0.2rem; top: 0.2rem; border-radius: 50%; overflow: hidden; }
|
.gou>img{ width: 100%; height: 100%; border-radius: 50%; display: block; }
|
/*文字间隔*/
|
.fontdan{ margin: 0.5rem 0; }
|
</style>
|
</head>
|
|
<body>
|
|
<div class="allwai">
|
|
<div class="page">
|
|
<!--底部分享区域-->
|
<div class="bomwai">
|
<div class="fboxRow Xaround Ycenter">
|
<!--微信好友-->
|
<div id='iwx' class="bomdan fboxCol Ycenter">
|
<img src="img/wx.png" class="bomimg"/>
|
<div class="font_gray font_normol">微信好友</div>
|
</div>
|
<!--朋友圈-->
|
<div id='ipyq' class="bomdan fboxCol Ycenter">
|
<img src="img/pyq.png" class="bomimg"/>
|
<div class="font_gray font_normol">朋友圈</div>
|
</div>
|
<!--新浪微博-->
|
<div id='ixlwb' class="bomdan fboxCol Ycenter">
|
<img src="img/xlwb.png" class="bomimg"/>
|
<div class="font_gray font_normol">新浪微博</div>
|
</div>
|
</div>
|
<div class="fboxRow Xaround Ycenter">
|
<!--QQ-->
|
<div id='itxqq' class="bomdan fboxCol Ycenter">
|
<img src="img/txqq.png" class="bomimg"/>
|
<div class="font_gray font_normol">QQ好友</div>
|
</div>
|
<!--空间-->
|
<div id='iqqkj' class="bomdan fboxCol Ycenter">
|
<img src="img/qqkj.png" class="bomimg"/>
|
<div class="font_gray font_normol">QQ空间</div>
|
</div>
|
<!--淘口令-->
|
<div id='itkl' class="bomdan fboxCol Ycenter">
|
<img src="img/tkl.png" class="bomimg"/>
|
<div class="font_gray font_normol">淘口令</div>
|
</div>
|
</div>
|
</div>
|
|
<!--内容区域-->
|
<div style="width: 100%;height: auto;margin-bottom: 9rem;">
|
|
<!--顶部规则-->
|
<div class="topwai fboxRow Xbetween Ycenter">
|
<div class="font_normol">分享赚提成预估：￥<span id="iyugu"></span>元</div>
|
<a class="font_white font_normol" href="">规则<span style="margin-left: 0.5rem;">〉</span></a>
|
</div>
|
|
<!--图片区域-->
|
<div class="imgwai fboxRow">
|
<!--大图-->
|
<div class="flex1" style="margin: 0.2rem;">
|
<div id="0" class="imgdan imgda">
|
<img class="spimg" src=""/>
|
<div class="gou"><img class="gouimg" src=""/></div>
|
</div>
|
</div>
|
<!--小图-->
|
<div id="ixiaotuwai" style="width: 7rem;height: 7rem;" class="fboxWrap">
|
<!--通过JS添加-->
|
</div>
|
</div>
|
|
<!--文字区域-->
|
<div class="imgwai">
|
<!--商品标题-->
|
<div id="title" class="font_normol fontdan"></div>
|
<!--在售价-->
|
<div class="font_gray font_normol fontdan">【在售价】 ￥<span id="zsj"></span></div>
|
<!--券后价-->
|
<div class="font_gray font_normol fontdan">【券后价】 ￥<span id="qhj"></span></div>
|
<!--长按复制信息-->
|
<div class="font_gray font_normol fontdan">长按复制这条信息<span id="fzfont"></span>，打开手机淘宝即可查看</div>
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript">
|
|
//==================== 页面数据 =============================
|
var yugu = 20.5; // 分享提成预估
|
var title = '扬子USB风扇迷你小风扇桌面学生办公室宿舍台架扇床上静音电扇'; // 商品标题
|
var zsj = 24.9; // 在售价
|
var qhj = 12.4; // 券后价
|
var fzfont = '￥N71i0qb2FT'; // 待长按复制的信息
|
var zu_img = [
|
'img/index_bg.png',
|
'img/index_share.jpg',
|
'img/index_share.jpg',
|
'img/index_share.jpg',
|
'img/index_share.jpg',
|
]; // 商品图片的组
|
var index = 0; // 所选择的图片的下标
|
|
|
//==================== 组件事件 ============================
|
// (你的操作在这里面，2种点击事件，对上述变量进行修改也添加在这里面)
|
//
|
|
$.post(
|
url:"/fanli/client/getShareGoodsInfo",
|
data:{
|
uid:1,
|
id:23123123
|
},
|
success:function(res)
|
{
|
console.log(res);
|
//分享选项点击
|
$(".bomdan").click(function(ev)
|
{
|
var jiename = ev.currentTarget.id;
|
if (jiename == 'iwx')
|
{
|
//点击了微信好友
|
window.location.href="yestv://share#wx#"+res.wx;
|
}
|
else if (jiename == 'ipyq')
|
{
|
//点击了朋友圈
|
}
|
else if (jiename == 'ixlwb')
|
{
|
//点击了新浪微博
|
}
|
else if (jiename == 'itxqq')
|
{
|
//点击了QQ好友
|
}
|
else if (jiename == 'iqqkj')
|
{
|
//点击了QQ空间
|
}
|
else if (jiename == 'itkl')
|
{
|
//点击了淘口令
|
}
|
});
|
|
|
}
|
fail:function(res)
|
{
|
|
}
|
|
);
|
|
|
|
|
|
//==================== 页面赋值（这是页面初始化，不要改动，也不要写东西在这后面） ============================
|
$("#iyugu").html(yugu);
|
$("#title").html(title);
|
$("#zsj").html(zsj);
|
$("#qhj").html(qhj);
|
$("#fzfont").html(fzfont);
|
//图片放入
|
for (var i=0; i<zu_img.length; i++)
|
{
|
if (i == 0) { $(".spimg").eq(i).attr("src",zu_img[i]); }
|
else if (i > 0)
|
{
|
var jiedian = '<div id="'+i+'" class="imgdan imgxiao">';
|
jiedian += '<img class="spimg" src="'+zu_img[i]+'"/>';
|
jiedian += '<div class="gou"><img class="gouimg" src=""/></div></div>';
|
$("#ixiaotuwai").append(jiedian);
|
}
|
}
|
//图片打勾初始化
|
for (var i=0; i<zu_img.length; i++) { if (i == index) { $(".gouimg").eq(i).attr("src","img/gou1.jpg"); } else { $(".gouimg").eq(i).attr("src","img/gou0.jpg"); } }
|
//图片点击
|
$(".imgdan").click(function (ev)
|
{
|
//修改所选的下标
|
index = parseInt(ev.currentTarget.id);
|
console.log("点击了第"+(index+1)+"张图片，下标为"+index);
|
//勾选的变红勾，其它的变灰色勾
|
for (var i=0; i<zu_img.length; i++)
|
{
|
if (i == index) { $(".gouimg").eq(i).attr("src","img/gou1.jpg"); }
|
else { $(".gouimg").eq(i).attr("src","img/gou0.jpg"); }
|
}
|
});
|
|
</script>
|
|
</html>
|
