<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"/>
|
<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/mescroll.min.css"/>
|
<script src="js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
|
<!--其它框架-->
|
<link rel="stylesheet" type="text/css" href="css/DOUI.min.css"/>
|
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="js/DOUI.min.js" type="text/javascript" charset="utf-8"></script>
|
<style type="text/css">
|
/*顶部选择导航*/
|
.topwai { width: 100%; height: 3.5rem; background-color: white; border-bottom: 0.2rem solid #F1F1F1; overflow: hidden; }
|
.top_xian { width: 30%; height: 3px; position: absolute; left: 35%; bottom: 0.3rem; }
|
/*文字被选中*/
|
.top_ziOK { color: #F14242; }
|
/*线条被选中*/
|
.top_xianOK{ background-color: #F14242; }
|
|
/*内容滚动外框*/
|
.scroll_wai{ width: 100%; overflow: hidden; }
|
/*好友单框*/
|
.you_dan{ width: 94%; padding: 0.3rem 3%; background-color: white; margin-bottom: 1px; color: #666666; }
|
/*头像*/
|
.you_img{ width: 2.6rem; height: 2.6rem; margin-right: 1rem; border-radius: 50%; display: block; }
|
</style>
|
</head>
|
|
<body>
|
|
<!--先隐藏全部-->
|
<script type="text/javascript">
|
$("body").addClass("displayNone");
|
</script>
|
|
<div class="allwai fboxCol">
|
|
<!--顶部选择导航-->
|
<div id="topwai" class="topwai fboxRow">
|
<!--一度好友-->
|
<div class="flex1 fboxCol Xcenter Ycenter canclick" name="0" style="position: relative;">
|
<!--文字-->
|
<div class="font_normol" v-bind:class='index_top==0?"top_ziOK":""' >一级队员({{num_1}})</div>
|
<!--下面的线-->
|
<div class="top_xian" v-bind:class='index_top==0?"top_xianOK":""'></div>
|
</div>
|
<!--二度好友-->
|
<div class="flex1 fboxCol Xcenter Ycenter canclick" name="1" style="position: relative;">
|
<!--文字-->
|
<div class="font_normol" v-bind:class='index_top==1?"top_ziOK":""' >二级队员({{num_2}})</div>
|
<!--下面的线-->
|
<div class="top_xian" v-bind:class='index_top==1?"top_xianOK":""'></div>
|
</div>
|
</div>
|
|
<!--列表-->
|
<div id="listwai" class="flex1 scroll_wai">
|
|
<!--下拉刷新插件-->
|
<div id="mescroll" class="mescroll">
|
|
<!--一级好友列表-->
|
<div v-if="index_top == 0" style="width: 100%;">
|
<!--Vue循环添加-->
|
<div v-for="item in one.list" class="you_dan fboxRow Ycenter">
|
<!--头像-->
|
<img class="you_img" v-bind:src="item.portrait"/>
|
<!--昵称-->
|
<div class="font_normol">{{item.nickName}}</div>
|
<!--空白区域-->
|
<div class="flex1"></div>
|
<!--是否登录-->
|
<div v-if="item.valid == false" class="font_min top_ziOK">未登录用户</div>
|
<div v-if="item.valid == true" class="font_min font_green">邀请成功</div>
|
</div>
|
<!--没有好友时的图片提示-->
|
<div v-if='one.list.length<=0' style="width:34%;height:auto;margin-left:33%;margin-top:50%;">
|
<img style="width:100%;height:auto;" src="img/no_people_hcj.png"/>
|
</div>
|
</div>
|
|
<!--二级好友列表-->
|
<div v-if="index_top == 1" style="width: 100%;">
|
<!--Vue循环添加-->
|
<div v-for="item in two.list" class="you_dan fboxRow Ycenter">
|
<!--头像-->
|
<img class="you_img" v-bind:src="item.portrait"/>
|
<!--昵称-->
|
<div class="font_normol">{{item.nickName}}</div>
|
<!--空白区域-->
|
<div class="flex1"></div>
|
<!--是否登录-->
|
<div v-if="item.valid == false" class="font_min top_ziOK">未登录用户</div>
|
<div v-if="item.valid == true" class="font_min font_green">邀请成功</div>
|
</div>
|
<!--没有好友时的图片提示-->
|
<div v-if='two.list.length<=0' style="width:34%;height:auto;margin-left:33%;margin-top:50%;">
|
<img style="width:100%;height:auto;" src="img/no_people_hcj.png"/>
|
</div>
|
</div>
|
|
</div><!--下拉刷新插件结束-->
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript">
|
|
//========================== 页面数据 ================================
|
var topdata = null; //顶部导航数据
|
var listdata = null; //列表数据
|
// alert("s");
|
// var uid = "343448";
|
var uid= yestv.getUid();
|
if(uid == null || uid == '0')
|
{
|
yestv.toast("请登录后再试");
|
// return false;
|
}
|
|
// Vue顶部导航数据
|
topdata = new Vue({
|
el: '#topwai',
|
data:
|
{
|
index_top: 0, // 顶部所选下标
|
num_1: 0, // 一级队员数量
|
num_2: 0, // 二级队员数量
|
},
|
watch:
|
{
|
//更改列表数据中的下标
|
index_top: function ()
|
{
|
//更改顶部下标
|
listdata.index_top = topdata.index_top;
|
//当前是一级队员
|
if (topdata.index_top == 0) { listdata.one.yema = 1; getYiji(); }
|
//当前是一级队员
|
else if (topdata.index_top == 1) { listdata.two.yema = 1; getEr(); }
|
},
|
},
|
});
|
|
// Vue列表数据
|
listdata = new Vue({
|
el: '#listwai',
|
data:
|
{
|
index_top: 0, // 顶部所选下标
|
// 一级队员
|
one: {
|
yema: 1, // 当前页码
|
yemamax: 1, // 最大页码数
|
pagesize: 20, // 每页数量
|
list: [], // 数据组
|
},
|
// 二级队员
|
two: {
|
yema: 1, // 当前页码
|
yemamax: 1, // 最大页码数
|
pagesize: 20, // 每页数量
|
list: [], // 数据组
|
},
|
},
|
});
|
|
|
|
//========================== 页面事件 ==================================
|
//下拉刷新事件实例
|
var mescroll = new MeScroll("mescroll", {
|
down: { auto: false, callback: downCallback },
|
up: { use: false }
|
});
|
//下拉刷新回调
|
function downCallback ()
|
{
|
console.log("已经触发下拉刷新");
|
//当前是一级队员
|
if (topdata.index_top == 0) { listdata.one.yema = 1; getYiji(); }
|
//当前是一级队员
|
else if (topdata.index_top == 1) { listdata.two.yema = 1; getEr(); }
|
}
|
|
//顶部导航选项点击 改变顶部下标
|
$("#topwai>div").click(function() { topdata.index_top = $(this).attr("name"); });
|
|
//列表框到达底部
|
var timeold = 0;
|
$("#mescroll").scroll(function()
|
{
|
var timenew = new Date().getTime();
|
var viewH = $(this).height(); //可见高
|
var allH = $(this)[0].scrollHeight; //总高度
|
var scrollH = $(this).scrollTop(); //滚动了多远
|
|
if (timenew - timeold > 500)
|
{
|
timeold = timenew;
|
//到底判定
|
if ((viewH + scrollH) > (allH - 100))
|
{
|
if (listdata.index_top == 0)
|
{
|
if (listdata.one.yema < listdata.one.yemamax) { listdata.one.yema++; getYiji(); }
|
else { console.log("已到达底部"); }
|
}
|
else if (listdata.index_top == 1)
|
{
|
if (listdata.two.yema < listdata.two.yemamax) { listdata.two.yema++; getEr(); }
|
else { console.log("已到达底部"); }
|
}
|
}
|
}
|
});
|
|
|
|
//========================== 数据请求 ==================================
|
// 邀请到的队员数量统计
|
getNumyao();
|
function getNumyao ()
|
{
|
//数据准备
|
var myurl = "../../client/findThreeFriendsCount";
|
var mydata = { id: uid };
|
//数据请求
|
doui.AjaxPost(myurl, mydata, function(res)
|
{
|
res=JSON.parse(res);
|
if (res.code != 0) { doui.showToast(res.msg); }
|
else
|
{
|
var count1 = res.data.count1;
|
var count2 = res.data.count2;
|
topdata.num_1 = count1;
|
topdata.num_2 = count2;
|
}
|
});
|
}
|
|
// 一级数据请求
|
getYiji();
|
function getYiji ()
|
{
|
doui.showLoading("获取队员");
|
//数据准备
|
var myurl = "../../client/findThreeFriends";
|
var mydata = { id: uid, type: 1, page: listdata.one.yema };
|
//数据请求
|
doui.AjaxPost(myurl, mydata, function(res)
|
{
|
res=JSON.parse(res); doui.hideLoading();
|
if (res.code != 0) { doui.showToast(res.msg); mescroll.endErr(); }
|
else
|
{
|
setTimeout(function () { mescroll.endSuccess(); }, 800);
|
//保存最大页码数
|
listdata.one.yemamax = res.data.pages;
|
//改变列表组
|
if (listdata.one.yema <= 1) { listdata.one.list = res.data.list; }
|
else { listdata.one.list = listdata.one.list.concat(res.data.list); }
|
}
|
});
|
}
|
|
//二级数据请求
|
function getEr ()
|
{
|
doui.showLoading("获取队员");
|
//数据准备
|
var myurl = "../../client/findThreeFriends";
|
var mydata = { id: uid, type: 2, page: listdata.two.yema };
|
//数据请求
|
doui.AjaxPost(myurl, mydata, function(res)
|
{
|
res=JSON.parse(res); doui.hideLoading();
|
if (res.code != 0) { doui.showToast(res.msg); mescroll.endErr(); }
|
else
|
{
|
setTimeout(function () { mescroll.endSuccess(); }, 800);
|
//保存最大页码数
|
listdata.two.yemamax = res.data.pages;
|
//改变列表组
|
if (listdata.two.yema <= 1) { listdata.two.list = res.data.list; }
|
else { listdata.two.list.concat(res.data.list); }
|
}
|
});
|
}
|
|
$("body").removeClass("displayNone");
|
|
</script>
|
|
</html>
|
