<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
|
<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.min.css"/>
|
<script src="js/doui.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="js/publicFunction.js" type="text/javascript" charset="utf-8"></script>
|
<style type="text/css">
|
/*邀请码复制按钮*/
|
.copyBtn{ width: 1rem; height: 0.4rem; line-height: 0.4rem; padding: 0 0.25rem; background-color: #EFEFEF; border-radius: 0.2rem; font-size: 0.24rem; color: #888888; }
|
/*隐藏弹框*/
|
.tan-nei{ width: 5.2rem; background-color: white; -webkit-border-radius: 0.3rem; border-radius: 0.3rem; }
|
</style>
|
<script type="text/javascript">
|
doui.importLoad({
|
importArray: [
|
'http://cdn.yeshitv.com/js/vue.min.js',
|
'js/clipboard.min.js',
|
'js/clipboard.config.js',
|
'js/yesApp.js',
|
]
|
});
|
</script>
|
</head>
|
|
<body style="display:none;">
|
<div id="allwai" class="heightenBox fontMobile">
|
|
<!--状态图片-->
|
<div style="width:7.5rem; height:3.63rem; background-image:url(img/activation_top.png); -webkit-background-size:100% 100%; background-size:100% 100%;"></div>
|
|
<!--你的邀请码-->
|
<div class="bg-white fboxCol Xstart Ycenter" style="width:7.5rem; min-height:1.53rem; padding:0.3rem; margin-bottom:1px;">
|
<div class="font28" style="color:#666666;">你的邀请码是</div>
|
<div v-if="code.key" class="fboxRow Xcenter Ycenter" style="margin-top:0.3rem;">
|
<div style="position:relative;">
|
<!--具体邀请码-->
|
<div class="font36 font-weight select-text">{{code.key}}</div>
|
<!--复制按钮-->
|
<div class="copyBtn" style="position:absolute; top:0; left:-webkit-calc(100% + 0.2rem); left:calc(100% + 0.2rem);" v-on:click="code.copyClick()">复制</div>
|
</div>
|
</div>
|
</div>
|
|
<!--邀请方式-->
|
<div class="bg-white fboxCol Xstart Ycenter" style="width:7.5rem; padding:0.3rem; margin-bottom:1px;">
|
<div class="font28" style="width:100%; color:#333333;">另有以下三种邀请方式：</div>
|
<div class="fboxRow Xbetween Ycenter" style="width:5.8rem; margin-top:0.4rem;">
|
<!--一个分享方式-->
|
<div v-for="item in share.list" class="fboxCol Xstart Ycenter" v-on:click="share.click(item)">
|
<div style="width:0.96rem; height:0.96rem; -webkit-background-size:100% 100%; background-size:100% 100%;" v-bind:style="'background-image:url('+item.img+');'"></div>
|
<div class="font30 font-black" style="margin-top:0.3rem;">{{item.value}}</div>
|
</div>
|
</div>
|
</div>
|
|
<!--特别提醒区域-->
|
<div v-show="warn.show" class="bg-white" style="width:7.5rem; padding:0.4rem 0.5rem;">
|
<div class="font34">{{warn.title}}：</div>
|
<div style="width:100%; margin-top:0.4rem;">
|
<div v-for="(item,index) in warn.list" class="font26 fboxRow Xstart Ystart" style="margin-bottom:0.4rem; color:#666666;">
|
<div style="width:0.4rem; line-height:0.4rem;">{{index+1}}.</div>
|
<div class="flex1" style="line-height:0.4rem;">{{item}}</div>
|
</div>
|
</div>
|
</div>
|
|
|
<!--隐藏弹框-->
|
<div class="layer-dark fboxCol Xcenter Ycenter displayNone" v-on:click.self="tan.close()">
|
|
<!--电话号码-->
|
<div id="tanTel" class="tan-nei displayNone">
|
<!--弹框标题-->
|
<div class="fboxCol Xcenter Ycenter" style="width:100%; padding:0.3rem; border-bottom:1px solid #E0E0E0;">
|
<div class="font36">邀请电话号码</div>
|
</div>
|
<!--弹框内容-->
|
<div class="fboxCol Xstart Ycenter" style="width:100%; padding:0.4rem;">
|
<div class="font36 font-weight select-text" style="margin-top:0.1rem;">{{tanTel.tel}}</div>
|
<div class="font28" style="margin-top:0.3rem; color:#888888;">通过电话号码同样可以完成邀请</div>
|
<!--按钮-->
|
<div class="fboxRow Xstart Ycenter" style="margin-top:0.6rem;">
|
<!--重填-->
|
<div class="fboxRow Xcenter Ycenter" style="width:2.1rem; height:0.68rem; margin-right:0.4rem; border-radius:0.34rem; border:1px solid #E5005C;" v-on:click="tanTel.uploadClick()">
|
<div class="font34" style="color:#E5005C;">修改</div>
|
</div>
|
<!--确定-->
|
<div class="fboxRow Xcenter Ycenter" style="width:2.1rem; height:0.68rem; border-radius:0.34rem; background-color:#E5005C;" v-on:click="tanTel.copyClick()">
|
<div class="font34 font-white">复制</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 短链接 -->
|
<div id="tanLink" class="tan-nei displayNone">
|
<!--弹框标题-->
|
<div class="fboxCol Xcenter Ycenter" style="width:100%; padding:0.3rem; border-bottom:1px solid #E0E0E0;">
|
<div class="font36">邀请短链接</div>
|
</div>
|
<!--弹框内容-->
|
<div class="fboxCol Xstart Ycenter" style="width:100%; padding:0.4rem;">
|
<div class="font36 font-weight select-text" style="margin-top:0.1rem;">{{tanLink.link}}</div>
|
<div class="font28" style="width:4rem; margin-top:0.3rem; color:#888888; line-height:1.5;">短链接可能会过期，请注意重新生成。</div>
|
<!--按钮-->
|
<div class="fboxRow Xstart Ycenter" style="margin-top:0.5rem;">
|
<!--重填-->
|
<div class="fboxRow Xcenter Ycenter" style="width:2.1rem; height:0.68rem; margin-right:0.4rem; border-radius:0.34rem; border:1px solid #E5005C;" v-on:click="tanLink.reClick()">
|
<div class="font34" style="color:#E5005C;">重新生成</div>
|
</div>
|
<!--确定-->
|
<div class="fboxRow Xcenter Ycenter" style="width:2.1rem; height:0.68rem; border-radius:0.34rem; background-color:#E5005C;" v-on:click="tanLink.copyClick()">
|
<div class="font34 font-white">复制</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 上级队员 -->
|
<div id="tanBoss" class="tan-nei displayNone">
|
<!--弹框标题-->
|
<div class="fboxCol Xcenter Ycenter" style="width:100%; padding:0.3rem; border-bottom:1px solid #E0E0E0;">
|
<div class="font36">上级邀请人</div>
|
</div>
|
<!--弹框内容-->
|
<div class="fboxCol Xstart Ycenter" style="width:100%; padding:0.4rem;">
|
<div v-if="tanFriend.user.had==true" class="font28" style="line-height:1.5;">邀请你使用本APP的用户是:</div>
|
<div v-else class="font28" style="width:3.8rem; line-height:1.5; margin-top:0.3rem; margin-bottom:0.2rem; text-align:center;">感谢你直接下载使用本APP，并无邀请人</div>
|
<!--上级信息-->
|
<div v-if="tanFriend.user.had==true" class="fboxCol Xstart Ycenter" style="width:3.4rem; margin-top:0.4rem;">
|
<img class="border-arc" style="width:0.8rem; height:0.8rem; display:block;" v-bind:src="tanFriend.user.img"/>
|
<div class="font26 font-ell2" style="color:#666666; margin-top:0.2rem; text-align:center;">{{tanFriend.user.nickName}}</div>
|
<div class="font26" style="color:#666666; margin-top:0.2rem;">邀请时间：{{tanFriend.user.time}}</div>
|
</div>
|
<!--按钮-->
|
<div class="fboxRow Xcenter Ycenter" style="width:3rem; height:0.68rem; margin-top:0.5rem; border-radius:0.34rem; background-color:#E5005C;" v-on:click.stop="tan.close()">
|
<div class="font34 font-white">知道了</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 福利提醒 -->
|
<div id="tanFuLi" class="tan-nei displayNone">
|
<!--弹框标题-->
|
<div class="fboxCol Xcenter Ycenter" style="width:100%; padding:0.3rem; border-bottom:1px solid #E0E0E0;">
|
<div class="font36">福利提醒</div>
|
</div>
|
<!--弹框内容-->
|
<div class="fboxCol Xstart Ycenter" style="width:100%; padding:0.4rem;">
|
<!-- 图片 -->
|
<div style="width:1.3rem; height:1.5rem; background-image:url(img/daiZi.png); -webkit-background-size:100% 100%; background-size:100% 100%;"></div>
|
<!--上级信息-->
|
<div class="fboxCol Xstart Ycenter" style="width:2.6rem; margin-top:0.4rem;">
|
<div class="font28 font-line-o5" style="color:#333333; text-align:center;">成功邀请1个队友后可获得福利免单券</div>
|
</div>
|
<!--按钮-->
|
<div class="fboxRow Xcenter Ycenter" style="width:4.2rem; height:0.68rem; margin-top:0.5rem; border-radius:0.34rem; background-color:#E5005C;" v-on:click.stop="tan.close()">
|
<div class="font34 font-white">知道了</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
|
</div>
|
</body>
|
|
</html>
|
|
|
<script type="text/javascript">
|
|
// vue 初始化
|
var vm = null;
|
doui.onReady({
|
success: function ()
|
{
|
// yestv函数
|
yesApp.hideClose();
|
// 右上角功能注册
|
yesApp.menuCustom({
|
icon: "http://img.flqapp.com/resource/invite/icon_shangji.png",
|
"do": "goToMyFriend()",
|
});
|
|
|
vm = new Vue({
|
el: "#allwai",
|
// 数据
|
data: {
|
|
// 邀请码
|
code: {
|
// 自己的邀请码
|
"key": "",
|
// 复制按钮 点击
|
copyClick: function ()
|
{
|
if (vm.code.key.length > 0)
|
{
|
clipboard.copy(vm.code.key, function(res)
|
{
|
if (res) { yesApp.showToast("已复制到剪贴板"); }
|
else { yesApp.showToast("当前设备不支持，请手动复制"); }
|
});
|
}
|
},
|
},
|
|
// 邀请方式
|
share: {
|
// 方式列表
|
list: [
|
{ name: "ewm", value: "二维码", img: "img/activation_1.png" },
|
{ name: "tel", value: "电话号码", img: "img/activation_2.png" },
|
{ name: "link", value: "短链接", img: "img/activation_3.png" },
|
],
|
// 方式按钮 点击
|
click: function (itemC)
|
{
|
// 二维码点击
|
if (itemC.name == "ewm") { yesApp.pageTo({ type: "navigate", placeName: "invite" }); }
|
// 电话点击
|
else if (itemC.name == "tel")
|
{
|
vm.tanTel.request(function()
|
{
|
vm.tan.type = 1;
|
doui.domShow({ el: ".layer-dark" });
|
doui.domShow({ el: "#tanTel", type: 2 });
|
});
|
}
|
// 短链接点击
|
else if (itemC.name == "link")
|
{
|
if (vm.tanLink.link.length > 0)
|
{
|
vm.tan.type = 2;
|
doui.domShow({ el: ".layer-dark" });
|
doui.domShow({ el: "#tanLink", type: 2 });
|
}
|
else
|
{
|
vm.tanLink.request(function()
|
{
|
vm.tan.type = 2;
|
doui.domShow({ el: ".layer-dark" });
|
doui.domShow({ el: "#tanLink", type: 2 });
|
});
|
}
|
}
|
},
|
},
|
|
// 特别提醒
|
warn: {
|
show: false,
|
title: "特别提醒",
|
list: [
|
"推广你的邀请码让下一级队员完成激活，你将获得下一级队员每笔返利订单对应返利的50%现金奖励；",
|
"推广你的激活码让下两级队员完成激活，你将获得下两级队员每笔返利订单对应返利的5%现金奖励；",
|
"不填写激活码或受到邀请则无法是使用邀请拿奖金功能，所以请推广你的邀请码，你的队员需要它。"
|
],
|
// 获取提醒
|
request: function ()
|
{
|
yesApp.signData({
|
success: function (sign)
|
{
|
doui.request({
|
type: "get",
|
"url": getHttp() + "/api/v1/invite/getInviteCode",
|
data: sign,
|
signCreat: false,
|
success: function (res)
|
{
|
if (res.code != 0) { yesApp.showToast(res.msg); }
|
else
|
{
|
vm.code.key = res.data.inviteCode; // 本人的邀请码
|
// 特别提醒文字
|
if (res.data.tip && res.data.tip.length > 0)
|
{
|
vm.warn.list = res.data.tip;
|
vm.warn.show = true;
|
}
|
}
|
}
|
});
|
}
|
});
|
},
|
},
|
|
// 隐藏弹框
|
tan: {
|
// 弹框类型
|
type: 3, // 1-电话 2-短链接 3-上级 4-推广分享
|
// 蒙层点击
|
close: function ()
|
{
|
if (vm.tan.type == 1) {
|
doui.domHide({ el: ".layer-dark" });
|
doui.domHide({ el: "#tanTel", type: 2 });
|
}
|
else if (vm.tan.type == 2) {
|
doui.domHide({ el: ".layer-dark" });
|
doui.domHide({ el: "#tanLink", type: 2 });
|
}
|
else if (vm.tan.type == 3) {
|
doui.domHide({ el: ".layer-dark" });
|
doui.domHide({ el: "#tanBoss", type: 2 });
|
}
|
else if (vm.tan.type == 4) {
|
doui.domHide({ el: ".layer-dark" });
|
doui.domHide({ el: "#tanFuLi", type: 2 });
|
}
|
},
|
},
|
|
// 电话弹框
|
tanTel: {
|
tel: "", // 电话号码
|
// 修改 点击
|
uploadClick: function ()
|
{
|
// 收回弹框
|
doui.domHide({ el: ".layer-dark" });
|
doui.domHide({
|
el: "#tanTel",
|
type: 2,
|
success: function () { yesApp.pageTo({ placeName: "userUpdate" }); },
|
});
|
},
|
// 复制 点击
|
copyClick: function ()
|
{
|
if (vm.tanTel.tel.length > 0)
|
{
|
// 收回弹框
|
doui.domHide({ el: ".layer-dark" });
|
doui.domHide({
|
el: "#tanTel",
|
type: 2,
|
success: function ()
|
{
|
// 复制电话
|
clipboard.copy(vm.tanTel.tel, function(res)
|
{
|
if (res) { yesApp.showToast("已复制到剪贴板"); }
|
else { yesApp.showToast("当前设备不支持，请手动复制"); }
|
});
|
},
|
});
|
}
|
},
|
// 请求电话号码
|
request: function (callback)
|
{
|
yesApp.signData({
|
success: function (sign)
|
{
|
vm.tanTel.tel = "";
|
yesApp.showLoading("请求中");
|
// 数据请求
|
doui.request({
|
type: "get",
|
"url": getHttp() + "/api/v1/invite/getUserPhone",
|
data: sign,
|
signCreat: false,
|
success: function (res)
|
{
|
yesApp.hideLoading();
|
if (res.code != 0) { yesApp.showToast(res.msg); }
|
else {
|
// 电话号码保存
|
vm.tanTel.tel = res.data.phone;
|
if (callback) { callback(); }
|
}
|
}
|
});
|
}
|
});
|
},
|
},
|
|
// 短链接弹框
|
tanLink: {
|
"link": "", // 短链接
|
// 重新生成
|
reClick: function () { vm.tanLink.request(); },
|
// 复制 点击
|
copyClick: function ()
|
{
|
if (vm.tanLink.link.length > 0)
|
{
|
// 收回弹框
|
doui.domHide({ el: ".layer-dark" });
|
doui.domHide({
|
el: "#tanLink",
|
type: 2,
|
success: function ()
|
{
|
// 复制电话
|
clipboard.copy(vm.tanLink.link, function(res)
|
{
|
if (res) { yesApp.showToast("已复制到剪贴板"); }
|
else { yesApp.showToast("当前设备不支持，请手动复制"); }
|
});
|
},
|
});
|
}
|
},
|
// 请求短链接
|
request: function (callback)
|
{
|
yesApp.signData({
|
success: function (sign)
|
{
|
yesApp.showLoading("请求中");
|
// 数据请求
|
doui.request({
|
type: "get",
|
"url": getHttp() + "/api/v1/invite/getShortLink",
|
data: sign,
|
signCreat: false,
|
success: function (res)
|
{
|
yesApp.hideLoading();
|
if (res.code != 0) { yesApp.showToast(res.msg); }
|
else {
|
// 电话号码保存
|
vm.tanLink.link = res.data.shortLink;
|
if (callback) { callback(); }
|
}
|
}
|
});
|
}
|
});
|
},
|
},
|
|
// 上级弹框
|
tanFriend: {
|
// 上级信息
|
user: {
|
had: false,
|
img: "", // 上级头像
|
nickName: "", // 上级昵称
|
time: "", // 邀请时间
|
},
|
// 请求短链接
|
request: function (callback)
|
{
|
yesApp.signData({
|
success: function (sign)
|
{
|
yesApp.showLoading("请求中");
|
// 数据请求
|
doui.request({
|
type: "get",
|
"url": getHttp() + "/api/v1/invite/getUserBoss",
|
data: sign,
|
signCreat: false,
|
success: function (res)
|
{
|
yesApp.hideLoading();
|
if (res.code == 2) { vm.tanFriend.user.had = false; if (callback) { callback(); } }
|
else if (res.code != 0) { yesApp.showToast(res.msg); }
|
else {
|
// 电话号码保存
|
vm.tanFriend.user.img = res.data.portrait;
|
vm.tanFriend.user.nickName = res.data.nickName;
|
vm.tanFriend.user.time = res.data.inviteTime;
|
vm.tanFriend.user.had = true;
|
if (callback) { callback(); }
|
}
|
}
|
});
|
}
|
});
|
},
|
},
|
|
}
|
});
|
|
|
// 获取地址栏数据
|
doui.urlParam({
|
success: function (res)
|
{
|
if (res.alert && res.alert == "true")
|
{
|
// 弹出福利提示框
|
vm.tan.type = 4;
|
doui.domShow({ el: ".layer-dark" });
|
doui.domShow({ el: "#tanFuLi", type: 2 });
|
}
|
}
|
});
|
|
|
// 请求特别提醒数据
|
vm.warn.request();
|
|
|
document.body.style.display = "block";
|
},
|
});
|
|
// 右上角跳到我的队员
|
function goToMyFriend ()
|
{
|
// 请求上级
|
vm.tanFriend.request(function()
|
{
|
vm.tan.type = 3;
|
doui.domShow({ el: ".layer-dark" });
|
doui.domShow({ el: "#tanBoss", type: 2 });
|
});
|
}
|
|
</script>
|
