<!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">
|
/*输入*/
|
.inputThis{ width: 5.6rem; height: 0.8rem; padding: 0.2rem; margin-bottom: 0.31rem; border-radius: 0.1rem; background-color: #F3F3F3; }
|
.inputThis input{ text-align: center; }
|
.inputThis input::-webkit-input-placeholder{ font-size: 0.3rem; color: #BBBBBB; }
|
/*底部悬浮*/
|
.footThis{ left: 0; bottom: 0; width: 7.5rem; height: 0.96rem; border-top: 1px solid #E0E0E0; background-color: rgba(255,255,255,0.96); }
|
/*确认按钮*/
|
.sumberBtn{ width: 5.2rem; height: 0.76rem; background-color: #E5005C; border-radius: 0.38rem; color: white; }
|
/*如何获取邀请码 弹框*/
|
.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/yesApp.js',
|
]);
|
</script>
|
</head>
|
|
<body style="display:none;">
|
<div id="allwai" class="heightenBox fontMobile">
|
|
|
<!--内容-->
|
<div class="main bg-white" style="padding-bottom:0.96rem;">
|
<!--重磅升级外层-->
|
<div style="width:7.5rem; height:7.39rem; position:relative; background-image:url(img/AppPage/flq_activation/invite_bg.png); -webkit-background-size:100% 100%; background-size:100% 100%;">
|
<!--输入区域-->
|
<div class="fboxCol Xend Ycenter" style="width:6.9rem; height:2.64rem; position:absolute; left:0.3rem; bottom:0.39rem;">
|
<!--输入-->
|
<div class="inputThis fboxRow Xcenter Ycenter"><input id="yqm" class="font30 flex1" type="text" placeholder="请输入邀请者 邀请码 / 电话号码" v-on:focus="shuru.onFocus()" v-on:click="shuru.onFocus()" v-model="shuru.txt"/></div>
|
<!--没有蓝字-->
|
<div class="font30" style="margin-bottom:0.4rem; color:#0077E5;" v-on:click="tan.howClick()">没有邀请码？</div>
|
</div>
|
</div>
|
<!--特别提醒区域-->
|
<div v-show="warn.show" 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-if="item" 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>
|
|
|
<!--底部悬浮-->
|
<div class="position-fixed footThis fboxRow Xcenter Ycenter">
|
<!--确认按钮-->
|
<div class="sumberBtn click-scale fboxRow Xcenter Ycenter" style="position: relative;" v-on:click="tan.jiClick()"><div class="font36">确认激活</div></div>
|
</div>
|
|
|
<!--隐藏弹框-->
|
<div v-show="tan.show" class="tanThis fboxCol Xcenter Ycenter" v-bind:style="'height:'+sys.winH+'px;'" v-on:click.self="tan.close()">
|
|
<!--如何获取邀请码-->
|
<div v-show="tan.type==1" 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="font28" style="width:3.86rem; line-height:0.42rem; color:#666666;">1. 全网搜索邀请者分享出来的邀请码；</div>
|
<div class="font28" style="width:3.86rem; margin-top:0.4rem; line-height:0.42rem; color:#666666;">2. 用积分兑换，敬请期待！</div>
|
<div class="click-scale fboxRow Xcenter Ycenter" style="width:3rem; height:0.68rem; margin-top:0.4rem; border-radius:0.34rem; background-color:#E5005C;" v-on:click.stop="tan.close()">
|
<div class="font34 font-white">知道了</div>
|
</div>
|
</div>
|
</div>
|
|
<!--确认信息-->
|
<div v-show="tan.type==2" 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="font28" style="color:#888888;">你填写的邀请码是:</div>
|
<div class="font28 font-weight" style="margin-top:0.3rem;">{{shuru.txt}}</div>
|
<div class="font28 font-weight" style="margin-top:0.4rem;">激活后将获得你的邀请码</div>
|
<!--按钮-->
|
<div class="fboxRow Xstart Ycenter" style="margin-top:0.4rem;">
|
<!--确定-->
|
<div class="click-scale fboxRow Xcenter Ycenter" style="width:2.1rem; height:0.68rem; border-radius:0.34rem; background-color:#E5005C;" v-on:click="tan.subClick()">
|
<div class="font34 font-white">确定</div>
|
</div>
|
<!--重填-->
|
<div class="click-scale fboxRow Xcenter Ycenter" style="width:2.1rem; height:0.68rem; margin-left:0.4rem; border-radius:0.34rem; border:1px solid #E5005C;" v-on:click="tan.reClick();">
|
<div class="font34" style="color:#E5005C;">重填</div>
|
</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
|
},
|
|
// 邀请码输入部分
|
shuru: {
|
txt: "",
|
timeout: null, // 定时器
|
// 输入框被遮盖解决
|
onFocus: function ()
|
{
|
if (vm.shuru.timeout != null) { clearTimeout(vm.shuru.timeout); }
|
vm.shuru.timeout = setTimeout(function(){ doui.scrollTo("body", 140, false); }, 600);
|
},
|
init: function () { vm.shuru.txt = ""; },
|
},
|
|
// 特别提醒
|
warn: {
|
show: false,
|
title: "特别提醒",
|
list: [],
|
// 获取提醒
|
request: function ()
|
{
|
// 数据准备
|
var myurl = getHttp() + "/api/v1/invite/getActivationTip";
|
var mydata = yesApp.AjaxData({});
|
// 数据请求
|
doui.AjaxGet(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { yesApp.showToast(res.msg); }
|
else {
|
vm.warn.list = res.data.tip;
|
vm.warn.show = true;
|
}
|
});
|
},
|
},
|
|
// 弹框
|
tan: {
|
show: false,
|
type: 1, // 1-如何获取邀请码 2-确认信息
|
// 弹框动效关闭
|
close: function (callback) { vm.tan.init(); if (callback) { callback(); } },
|
// “ 没有邀请码 ” 点击
|
howClick: function () { vm.tan.type = 1; vm.tan.show = true; },
|
// 底部确认激活按钮 点击
|
jiClick: function ()
|
{
|
if (vm.shuru.txt) { vm.tan.type = 2; vm.tan.show = true; }
|
else { yesApp.showToast("请输入邀请码"); }
|
},
|
// 重填按钮 点击
|
reClick: function ()
|
{
|
// 关闭弹框
|
vm.tan.close(function()
|
{
|
// 输入组件获取焦点
|
vm.shuru.init();
|
document.getElementById("yqm").focus();
|
});
|
},
|
// 最终提交发送
|
subClick: function ()
|
{
|
// 关闭弹框
|
vm.tan.close(function()
|
{
|
yesApp.userInfo(function(user)
|
{
|
// 数据准备
|
var myurl = getHttp() + "/api/v1/invite/activationInvite";
|
var mydata = yesApp.AjaxData({
|
uid: user.id,
|
inviteCode: vm.shuru.txt,
|
});
|
// 数据请求
|
yesApp.showLoading("激活中");
|
doui.AjaxGet(myurl, mydata, function(res)
|
{
|
yesApp.hideLoading();
|
if (res.code != 0) { yesApp.showToast(res.msg); }
|
else {
|
var pageUrl = getHost() + "flq_inviteCodeState.html";
|
yesApp.pageToWeb(pageUrl, false);
|
}
|
});
|
});
|
});
|
},
|
// 初始化
|
init: function () { vm.tan.show = false; vm.tan.type = 1; },
|
},
|
|
}
|
});
|
|
|
// 获取系统信息
|
vm.sys.winH = doui.systemInfoGet().windowHeight;
|
|
|
// 请求特别提醒数据
|
vm.warn.request();
|
|
|
document.body.style.display = "block";
|
});
|
|
</script>
|
