<!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; }
|
/*隐藏弹框*/
|
.tanThis{ width: 7.5rem; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.5); z-index: 80; }
|
.tan-nei{ width: 5.2rem; background-color: white; -webkit-border-radius: 0.3rem; border-radius: 0.3rem; }
|
</style>
|
<script type="text/javascript">
|
doui.importSet([
|
'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/AppPage/flq_activation/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 click-color" 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="click-translateY 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>
|
|
|
<!--0隐藏电话弹框-->
|
<div v-show="tanTel.show" class="tanThis fboxCol Xcenter Ycenter" v-bind:style="'height:'+sys.winH+'px;'" v-on:click.self="tanTel.close()">
|
<div class="tan-nei">
|
<!--弹框标题-->
|
<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="click-scale 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="click-scale 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>
|
|
<!--1隐藏短链接弹框-->
|
<div v-show="tanLink.show" class="tanThis fboxCol Xcenter Ycenter" v-bind:style="'height:'+sys.winH+'px;'" v-on:click.self="tanLink.close()">
|
<div class="tan-nei">
|
<!--弹框标题-->
|
<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="click-scale 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="click-scale 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>
|
|
<!--2上级队员弹框-->
|
<div v-show="tanFriend.show" class="tanThis fboxCol Xcenter Ycenter" v-bind:style="'height:'+sys.winH+'px;'" v-on:click.self="tanFriend.close()">
|
<div class="tan-nei">
|
<!--弹框标题-->
|
<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="img-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="click-scale fboxRow Xcenter Ycenter" style="width:3rem; height:0.68rem; margin-top:0.5rem; border-radius:0.34rem; background-color:#E5005C;" v-on:click.stop="tanFriend.close()">
|
<div class="font34 font-white">知道了</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
|
</div>
|
</body>
|
|
</html>
|
|
|
<script type="text/javascript">
|
|
// vue 初始化
|
var vm = null;
|
doui.onReady(function()
|
{
|
yesApp.closeBtnHidden();
|
|
vm = new Vue({
|
el: "#allwai",
|
// 数据
|
data: {
|
|
// 系统信息
|
sys: {
|
winH: 0, // 屏幕高度px
|
},
|
|
// 邀请码
|
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/AppPage/flq_activation/activation_1.png" },
|
{ name: "tel", value: "电话号码", img: "img/AppPage/flq_activation/activation_2.png" },
|
{ name: "link", value: "短链接", img: "img/AppPage/flq_activation/activation_3.png" },
|
],
|
// 方式按钮 点击
|
click: function (itemC)
|
{
|
// 二维码点击
|
if (itemC.name == "ewm") { yesApp.pageToInvite(); }
|
// 电话点击
|
else if (itemC.name == "tel") { vm.tanTel.request(function(){ vm.tanTel.show = true; }); }
|
// 短链接点击
|
else if (itemC.name == "link")
|
{
|
if (vm.tanLink.link.length > 0) { vm.tanLink.show = true; }
|
else { vm.tanLink.request(function(){ vm.tanLink.show = true; }); }
|
}
|
},
|
},
|
|
// 特别提醒
|
warn: {
|
show: false,
|
title: "特别提醒",
|
list: [
|
"推广你的邀请码让下一级队员完成激活，你将获得下一级队员每笔返利订单对应返利的50%现金奖励；",
|
"推广你的激活码让下两级队员完成激活，你将获得下两级队员每笔返利订单对应返利的5%现金奖励；",
|
"不填写激活码或受到邀请则无法是使用邀请拿奖金功能，所以请推广你的邀请码，你的队员需要它。"
|
],
|
// 获取提醒
|
request: function ()
|
{
|
yesApp.userInfo(function(user)
|
{
|
// 数据准备
|
var myurl = getHttp() + "/api/v1/invite/getInviteCode";
|
var mydata = yesApp.AjaxData({ uid: user.id });
|
// 数据请求
|
doui.AjaxGet(myurl, mydata, 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;
|
}
|
}
|
});
|
});
|
},
|
},
|
|
// 电话弹框
|
tanTel: {
|
show: false,
|
tel: "", // 电话号码
|
// 修改 点击
|
uploadClick: function () { yesApp.pageToUserUpdate(); },
|
// 复制 点击
|
copyClick: function ()
|
{
|
if (vm.tanTel.tel.length > 0)
|
{
|
clipboard.copy(vm.tanTel.tel, function(res)
|
{
|
if (res) { yesApp.showToast("已复制到剪贴板"); }
|
else { yesApp.showToast("当前设备不支持，请手动复制"); }
|
});
|
}
|
},
|
// 请求电话号码
|
request: function (callback)
|
{
|
yesApp.userInfo(function(user)
|
{
|
// 请求电话信息
|
var myurl = getHttp() + "/api/v1/invite/getUserPhone";
|
var mydata = yesApp.AjaxData({ uid: user.id });
|
// 数据请求
|
yesApp.showLoading("请求中");
|
doui.AjaxGet(myurl, mydata, function(res)
|
{
|
yesApp.hideLoading();
|
if (res.code != 0) { yesApp.showToast(res.msg); }
|
else {
|
// 电话号码保存
|
vm.tanTel.tel = res.data.phone;
|
if (callback) { callback(); }
|
}
|
});
|
});
|
},
|
// 弹框动效关闭
|
close: function (callback) { vm.tanTel.init(); if (callback) { callback(); } },
|
// 初始化
|
init: function () { vm.tanTel.show = false; vm.tanTel.tel = ""; },
|
},
|
|
// 短链接弹框
|
tanLink: {
|
show: false,
|
"link": "", // 短链接
|
// 重填生成
|
reClick: function () { vm.tanLink.request(); },
|
// 复制 点击
|
copyClick: function ()
|
{
|
if (vm.tanLink.link.length > 0)
|
{
|
clipboard.copy(vm.tanLink.link, function(res)
|
{
|
if (res) { yesApp.showToast("已复制到剪贴板"); }
|
else { yesApp.showToast("当前设备不支持，请手动复制"); }
|
});
|
}
|
},
|
// 请求短链接
|
request: function (callback)
|
{
|
yesApp.userInfo(function(user)
|
{
|
// 请求电话信息
|
var myurl = getHttp() + "/api/v1/invite/getShortLink";
|
var mydata = yesApp.AjaxData({ uid: user.id });
|
// 数据请求
|
yesApp.showLoading("请求中");
|
doui.AjaxGet(myurl, mydata, function(res)
|
{
|
yesApp.hideLoading();
|
if (res.code != 0) { yesApp.showToast(res.msg); }
|
else {
|
// 电话号码保存
|
vm.tanLink.link = res.data.shortLink;
|
if (callback) { callback(); }
|
}
|
});
|
});
|
},
|
// 弹框动效关闭
|
close: function (callback) { vm.tanLink.init(); if (callback) { callback(); } },
|
// 初始化
|
init: function () { vm.tanLink.show = false; },
|
},
|
|
// 上级弹框
|
tanFriend: {
|
show: false,
|
// 上级信息
|
user: {
|
had: false,
|
img: "", // 上级头像
|
nickName: "", // 上级昵称
|
time: "", // 邀请时间
|
},
|
// 请求短链接
|
request: function (callback)
|
{
|
yesApp.userInfo(function(user)
|
{
|
// 请求电话信息
|
var myurl = getHttp() + "/api/v1/invite/getUserBoss";
|
var mydata = yesApp.AjaxData({ uid: user.id });
|
// 数据请求
|
yesApp.showLoading("请求中");
|
doui.AjaxGet(myurl, mydata, 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(); }
|
}
|
});
|
});
|
},
|
// 弹框动效关闭
|
close: function (callback) { vm.tanFriend.init(); if (callback) { callback(); } },
|
// 初始化
|
init: function () { vm.tanFriend.show = false; vm.tanFriend.user = { had: false, img: "", nickName: "", time: "" }; },
|
},
|
|
}
|
});
|
|
|
// 右上角功能注册
|
yesApp.topMenuBtn("http://img.flqapp.com/resource/invite/icon_shangji.png", "goToMyFriend()");
|
|
|
// 获取系统信息
|
vm.sys.winH = doui.systemInfoGet().windowHeight;
|
|
|
// 请求特别提醒数据
|
vm.warn.request();
|
|
|
document.body.style.display = "block";
|
});
|
|
// 右上角跳到我的队员
|
function goToMyFriend ()
|
{
|
// 关闭已开启弹框
|
vm.tanTel.init();
|
vm.tanLink.init();
|
// 请求上级
|
vm.tanFriend.request(function(){ vm.tanFriend.show = true; });
|
}
|
|
</script>
|
