<!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.1.6.0.min.css"/>
|
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="js/DOUI.1.6.0.min.js" type="text/javascript" charset="utf-8"></script>
|
<style type="text/css">
|
/*导航选项*/
|
.check{ height: 3.5rem; position: relative; transition: color 0.3s; border-bottom: 1px solid #F1F1F1; border-left: 1px solid #F1F1F1; }
|
.check:nth-of-type(1){ border-left: none; }
|
/*文字被选中*/
|
.top_ziOK { color: #E51A66; }
|
/*好友单框*/
|
.you_dan{ width: 94%; padding: 0.6rem 3%; background-color: white; margin-bottom: 1px; color: #666666; }
|
</style>
|
</head>
|
|
<body class="displayNone">
|
<div id="allwai" class="heightenBox">
|
|
<!--顶部选择导航-->
|
<div class="header fboxRow bg-white" style="width:100%; padding:0;">
|
<!--一度好友-->
|
<div class="check flex1 fboxRow Xcenter Ycenter font5" v-bind:class='nav.check==0?"top_ziOK":""' v-on:click="checkClick(0)">
|
<span>一度好友</span>
|
<span v-show="nav.num1!=null">（{{nav.num1}}）</span>
|
</div>
|
<!--二度好友-->
|
<div class="check flex1 fboxRow Xcenter Ycenter font5" v-bind:class='nav.check==1?"top_ziOK":""' v-on:click="checkClick(1)">
|
<span>二度好友</span>
|
<span v-show="nav.num2!=null">（{{nav.num2}}）</span>
|
</div>
|
</div>
|
|
<!--列表-->
|
<div style="width:100%;">
|
|
<!--一级好友列表-->
|
<div v-show="nav.check==0" style="width:100%;">
|
<!--Vue循环添加-->
|
<div v-for="item in one.list" class="you_dan fboxRow Xstart Ycenter">
|
<!--头像-->
|
<img class="imgSize2 img-arc" v-bind:src="item.portrait"/>
|
<!--昵称-->
|
<div class="font-ell1" style="width:13rem; margin-left:3%;">{{item.nickName}}</div>
|
<!--空白区域-->
|
<div class="flex1"></div>
|
<!--是否登录-->
|
<div v-if="item.valid == false" class="font2 top_ziOK">未登录用户</div>
|
<div v-else class="font2 font-green">邀请成功</div>
|
</div>
|
<!--没有好友时的图片提示-->
|
<div v-if='one.showNone' class="fboxCol Xcenter Ycenter" style="width:100%; margin-top:50%;">
|
<img class="imgSize6" src="img/nopeople.png"/>
|
<div class="fboxRow Xcenter Ycenter font6 font-white do-click"
|
style="height:3rem; padding:0 3rem; margin-top:2rem; border-radius:1.5rem; background-color:#FF438F;"
|
v-if="nav.num1==0 && nav.num2==0" v-on:click="yqNowClick()">
|
<span>立即邀请</span>
|
</div>
|
</div>
|
</div>
|
|
<!--二级好友列表-->
|
<div v-show="nav.check==1" style="width:100%;">
|
<!--Vue循环添加-->
|
<div v-for="item in two.list" class="you_dan fboxRow Xstart Ycenter">
|
<!--头像-->
|
<img class="imgSize2 img-arc" v-bind:src="item.portrait"/>
|
<!--昵称-->
|
<div class="font-ell1" style="width:13rem; margin-left:3%;">{{item.nickName}}</div>
|
<!--空白区域-->
|
<div class="flex1"></div>
|
<!--是否登录-->
|
<div v-if="item.valid == false" class="font2 top_ziOK">未登录用户</div>
|
<div v-else class="font2 font-green">邀请成功</div>
|
</div>
|
<!--没有好友时的图片提示-->
|
<div v-if='two.showNone' class="fboxCol Xcenter Ycenter" style="width:100%; margin-top:50%;">
|
<img class="imgSize6" src="img/nopeople.png"/>
|
<div class="fboxRow Xcenter Ycenter font6 font-white do-click"
|
style="height:3rem; padding:0 3rem; margin-top:2rem; border-radius:1.5rem; background-color:#FF438F;"
|
v-if="nav.num1==0 && nav.num2==0" v-on:click="yqNowClick()">
|
<span>立即邀请</span>
|
</div>
|
</div>
|
</div>
|
|
<!--加载loading框-->
|
<div class="do-scrollLoading"></div>
|
|
</div>
|
|
</div>
|
</body>
|
|
</html>
|
|
|
|
<script type="text/javascript">
|
|
// ====================================================================== 页面数据
|
// 用户测试id
|
// var uid = "343448";
|
var uid= yestv.getUid();
|
if (uid == null || uid == '0') { yestv.toast("请登录后再试"); }
|
|
// vue实例化
|
var vm = new Vue({
|
el: "#allwai",
|
|
data: {
|
// ------------------------------------ 顶部导航栏选项
|
nav: {
|
num1: null, // 1级队员数
|
num2: null, // 2级队员数
|
check: 0, // 当前选中项下标
|
},
|
|
// ------------------------------------ 列表数据
|
// 一级列表
|
one: {
|
yema: 1,
|
yemamax: 1,
|
pagesize: 20,
|
list: [],
|
showNone: false,
|
},
|
|
// 二级列表
|
two: {
|
yema: 1,
|
yemamax: 1,
|
pagesize: 20,
|
list: [],
|
showNone: false,
|
},
|
},
|
});
|
|
|
|
// ====================================================================== 页面事件
|
//
|
// 顶部导航选项点击 改变顶部下标
|
function checkClick (indexC)
|
{
|
// 下标赋值
|
vm.nav.check = indexC;
|
// 回到顶部
|
doui.scrollBackTop("body");
|
// 获取数据
|
if (vm.nav.check == 0 && vm.one.list.length <= 0) { doui.showScrollLoading(function(){ getYiji(); }); }
|
else if (vm.nav.check == 1 && vm.two.list.length <= 0) { doui.showScrollLoading(function(){ getEr(); }); }
|
};
|
|
//列表框到达底部
|
doui.scrollOverBottom("body", function()
|
{
|
// 一度到底
|
if (vm.nav.check == 0)
|
{
|
if (vm.one.yema < vm.one.yemamax)
|
{
|
doui.showScrollLoading(function()
|
{
|
vm.one.yema++;
|
getYiji();
|
});
|
}
|
}
|
// 二度到底
|
else if (vm.nav.check == 1)
|
{
|
if (vm.two.yema < vm.two.yemamax)
|
{
|
doui.showScrollLoading(function()
|
{
|
vm.two.yema++;
|
getEr();
|
});
|
}
|
}
|
});
|
|
// 立即邀请点击
|
function yqNowClick ()
|
{
|
try
|
{
|
yestv.jumpInvite();
|
}
|
catch(e)
|
{
|
yestv.toast("请升级最新版");
|
}
|
|
}
|
|
|
|
//========================== 数据请求 ==================================
|
// 邀请到的队员数量统计
|
getNumyao();
|
function getNumyao ()
|
{
|
//数据准备
|
var myurl = "../../client/findThreeFriendsCount";
|
var mydata = { id: uid };
|
|
//数据请求
|
doui.AjaxPost(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.showToast(res.msg); }
|
else
|
{
|
vm.nav.num1 = res.data.count1; // 一级队员数量
|
vm.nav.num2 = res.data.count2; // 二级队员数量
|
}
|
});
|
}
|
|
// 一级数据请求
|
doui.showScrollLoading(function(){ getYiji(); });
|
function getYiji ()
|
{
|
//数据准备
|
var myurl = "../../client/findThreeFriends";
|
var mydata = {
|
id: uid,
|
type: 1,
|
page: vm.one.yema
|
};
|
|
//数据请求
|
doui.AjaxPost(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.showToast(res.msg); doui.hideScrollLoading(); }
|
else
|
{
|
//保存最大页码数
|
vm.one.yemamax = res.data.pages;
|
//改变列表组
|
if (vm.one.yema <= 1) { vm.one.list = res.data.list; }
|
else { vm.one.list = vm.one.list.concat(res.data.list); }
|
doui.hideScrollLoading();
|
// 如果没有队员
|
if (vm.one.list.length <= 0) { vm.one.showNone = true; }
|
}
|
});
|
}
|
|
//二级数据请求
|
function getEr ()
|
{
|
//数据准备
|
var myurl = "../../client/findThreeFriends";
|
var mydata = {
|
id: uid,
|
type: 2,
|
page: vm.two.yema
|
};
|
|
//数据请求
|
doui.AjaxPost(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.showToast(res.msg); doui.hideScrollLoading(); }
|
else
|
{
|
//保存最大页码数
|
vm.two.yemamax = res.data.pages;
|
//改变列表组
|
if (vm.two.yema <= 1) { vm.two.list = res.data.list; }
|
else { vm.two.list = vm.two.list.concat(res.data.list); }
|
doui.hideScrollLoading();
|
// 如果没有队员
|
if (vm.two.list.length <= 0) { vm.two.showNone = true; }
|
}
|
});
|
}
|
|
$("body").removeClass("displayNone");
|
</script>
|
