<!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="/fanli/client/html/help_item.html?id=8">规则<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" daxuan=1>
|
<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">
|
function ismobile(test) {
|
var u = navigator.userAgent, app = navigator.appVersion;
|
if (/AppleWebKit.*Mobile/i.test(navigator.userAgent)
|
|| (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/
|
.test(navigator.userAgent))) {
|
if (window.location.href.indexOf("?mobile") < 0) {
|
try {
|
if (/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)) {
|
return 0;
|
} else {
|
return 1;
|
}
|
} catch (e) {
|
}
|
}
|
} else if (u.indexOf('iPad') > -1) {
|
return 0;
|
} else {
|
return 1;
|
}
|
};
|
</script>
|
|
<script type="text/javascript">
|
//==================== 页面数据 =============================
|
var yugu = 0.00; // 分享提成预估
|
var title = ''; // 商品标题
|
var zsj = 0.00; // 在售价
|
var qhj = 0.00; // 券后价
|
var fzfont = ''; // 待长按复制的信息
|
var zu_img = []; // 商品图片的组
|
var index = 0; // 所选择的图片的下标
|
|
//==================== 组件事件 ============================
|
// (你的操作在这里面，2种点击事件，对上述变量进行修改也添加在这里面)
|
//
|
function setData(data) {
|
$("#iyugu").html(data.shareGoods.hongbao);
|
$("#title").html(data.goods.title);
|
$("#zsj").html(data.goods.zkPrice);
|
if (data.goods.finalPrice != undefined)
|
$("#qhj").html(data.goods.finalPrice);
|
else
|
$("#qhj").parent().remove();
|
//$("#fzfont").html(data.shareGoods.tkCode);
|
var pictures = data.shareGoods.pictures;
|
zu_img[0] = data.shareGoods.shareImg;
|
if(ismobile()==1)
|
for (var i = 0; i < pictures.length; i++) {
|
zu_img[i + 1] = pictures[i];
|
}
|
|
//图片放入
|
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);
|
|
//对第一张图片不做操作
|
if (index != 0) {
|
var imgxuan = $(".gouimg").eq(index).attr("xuan");
|
//已经勾选那么取消勾选
|
if (imgxuan == 1) {
|
$(".gouimg").eq(index).attr("xuan", 0);
|
$(".gouimg").eq(index).attr("src", "img/gou0.jpg");
|
$(".imgdan").eq(index).attr("daxuan", 0);
|
}
|
//未勾选那么就勾选上
|
else {
|
$(".gouimg").eq(index).attr("xuan", 1);
|
$(".gouimg").eq(index).attr("src", "img/gou1.jpg");
|
$(".imgdan").eq(index).attr("daxuan", 1);
|
}
|
}
|
});
|
|
//分享选项点击
|
$(".bomdan").click(
|
function(ev) {
|
var zu_imgsrc = [];
|
for (var i = 0; i < $(".imgdan").length; i++) {
|
if ($(".imgdan").eq(i).attr("daxuan") == 1) {
|
zu_imgsrc.push($(".imgdan:eq(" + i + ")>img").attr(
|
"src"));
|
}
|
}
|
|
var title = $("#title").html() + "\n" + "【在售价】￥"
|
+ data.goods.zkPrice + "\n";
|
if (data.goods.finalPrice != undefined)
|
title += "【券后价】￥" + data.goods.finalPrice + "\n";
|
title +="【购买步骤】：长按图片识别二维码--复制淘口令--打开手机淘宝--领取优惠券再下单"; //"长按复制这条信息" + data.shareGoods.tkCode+ "，打开手机淘宝即可查看";
|
|
var shareInfo = {
|
"type" : 2,
|
"title" : title,
|
"description" : data.goods.title,
|
"imgs" : zu_imgsrc,
|
"link" : data.link
|
};
|
|
shareInfoStr = Base64('en', JSON.stringify(shareInfo))
|
|
var jiename = ev.currentTarget.id;
|
if (jiename == 'iwx') {
|
//点击了微信好友
|
yestv.toast("分享中...");
|
window.location.href = "yestv://share#wx#"
|
+ shareInfoStr;
|
} else if (jiename == 'ipyq') {
|
//点击了朋友圈
|
yestv.toast("分享中...");
|
window.location.href = "yestv://share#wxcircle#"
|
+ shareInfoStr;
|
} else if (jiename == 'ixlwb') {
|
shareInfo.title ="【购买步骤】：长按图片识别二维码--复制淘口令--打开手机淘宝--领取优惠券再下单"; //"长按复制这条信息" + data.shareGoods.tkCode+ "，打开手机淘宝即可查看";
|
shareInfo.description = title;
|
shareInfoStr = Base64('en', JSON.stringify(shareInfo));
|
//点击了新浪微博
|
yestv.toast("分享中...");
|
window.location.href = "yestv://share#sina#"
|
+ shareInfoStr;
|
} else if (jiename == 'itxqq') {
|
//点击了QQ好友
|
yestv.toast("分享中...");
|
window.location.href = "yestv://share#qq#"
|
+ shareInfoStr;
|
} else if (jiename == 'iqqkj') {
|
//点击了QQ空间
|
yestv.toast("分享中...");
|
window.location.href = "yestv://share#qqzone#"
|
+ shareInfoStr;
|
} else if (jiename == 'itkl') {
|
//点击了淘口令
|
window.location.href = "yestv://copy#" + data.tkcode;
|
yestv.toast("复制成功");
|
}
|
});
|
|
}
|
|
function getQueryString(name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
var r = window.location.search.substr(1).match(reg);
|
if (r != null)
|
return unescape(r[2]);
|
return null;
|
}
|
|
$(function() {
|
Showloading("加载中");
|
var uid = 0;
|
try {
|
uid = yestv.getUid();
|
} catch (err) {
|
Showtoast("用户尚未登录");
|
return;
|
}
|
|
if (uid == 0 || uid == '0' || uid == null || uid == 'null'
|
|| uid == undefined) {
|
Showtoast("用户尚未登录");
|
return;
|
}
|
|
var version = yestv.getVersion();
|
var goodsId = getQueryString("id");
|
var sign = yestv.getSign(uid + goodsId);
|
|
$.post({
|
url : "/fanli/client/getShareGoodsInfo",
|
data : {
|
uid : uid,
|
id : goodsId,
|
sign : sign
|
},
|
dataType : "json",
|
success : function(res) {
|
if (res.code != 0) {
|
Showtoast(res.msg);
|
return;
|
}
|
|
Hideloading();
|
setData(res.data);
|
|
},
|
fail : function(res) {
|
Hideloading();
|
}
|
|
});
|
|
});
|
|
//==================== 页面赋值（这是页面初始化，不要改动，也不要写东西在这后面） ============================
|
$("#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);
|
if(index==0)
|
return;
|
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>
|
