<!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"/>
|
<style type="text/css">
|
/*导航选项*/
|
.check{ position: relative; transition: color 0.3s; border-left: 1px solid #F3F3F3; }
|
.check:nth-of-type(1){ border-left: none; }
|
/*好友单框*/
|
.you_dan{ width: 7.5rem; padding: 0.2rem; background-color: white; margin-bottom: 1px; color: #666666; }
|
.you_img{ width: 0.8rem; height: 0.8rem; position: relative; border-radius: 0.4rem; overflow: hidden; }
|
.you_imgSrc{ width: 0.8rem; height: 0.8rem; position: absolute; left: 0; top: 0; border-radius: 0.4rem; display: block; }
|
/*邀请按钮*/
|
.yqBtn{ height: 0.7rem; padding: 0rem 0.8rem; margin-top: 0.4rem; border-radius: 0.35rem; }
|
</style>
|
<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>
|
<script type="text/javascript">
|
doui.importSet([
|
'css/yesApp.css',
|
'http://cdn.yeshitv.com/js/jquery.min.js',
|
'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="header bg-white">
|
<div class="fboxRow" style="width:7.5rem; height:1rem; border-bottom: 1px solid #F3F3F3;">
|
<!--一度好友-->
|
<div class="check flex1 fboxRow Xcenter Ycenter font28" v-bind:class='nav.check==0?"ziF_red":"font-black"' v-on:click="checkClick(0)">
|
<div>一度队员</div>
|
<div v-show="nav.num1!=null"> ( {{nav.num1}} )</div>
|
</div>
|
<!--二度好友-->
|
<div class="check flex1 fboxRow Xcenter Ycenter font28" v-bind:class='nav.check==1?"ziF_red":"font-black"' v-on:click="checkClick(1)">
|
<div>二度队员</div>
|
<div v-show="nav.num2!=null"> ( {{nav.num2}} )</div>
|
</div>
|
</div>
|
</div>
|
|
<!--列表-->
|
<div style="width:7.5rem;">
|
|
<!--一级好友列表-->
|
<div v-show="nav.check==0" style="width:7.5rem;">
|
<!--Vue循环添加-->
|
<div v-for="item in one.list" class="you_dan fboxRow Xstart Ycenter">
|
<!--头像-->
|
<div class="you_img">
|
<img class="you_imgSrc" src="img/flq/sp_imgDef.png"/>
|
<img class="you_imgSrc" v-bind:src="item.portrait"/>
|
</div>
|
<!--昵称-->
|
<div style="width:3.5rem; margin-left:0.2rem;" class="font26 font-ell1">
|
<span>{{item.nickName}}</span>
|
</div>
|
<!--空白区域-->
|
<div class="flex1"></div>
|
<!--是否登录-->
|
<div class="font24">
|
<span v-if="item.valid == true" class="font-green">邀请成功</span>
|
<span v-else class="ziF_red">未登录用户</span>
|
</div>
|
</div>
|
<!--没有好友时的图片提示-->
|
<div v-if='one.showNone' class="fboxCol Xcenter Ycenter" style="width:100%; margin-top:50%;">
|
<img style="width:2.6rem; height:2.56rem;" src="img/AppPage/friends/nopeople.png"/>
|
<div v-if="nav.num1==0 && nav.num2==0" class="fboxRow Xcenter Ycenter yqBtn beiF_red do-click font30 font-white" v-on:click="yqNowClick()">
|
<span>立即邀请</span>
|
</div>
|
</div>
|
</div>
|
|
<!--二级好友列表-->
|
<div v-show="nav.check==1" style="width:7.5rem;">
|
<!--Vue循环添加-->
|
<div v-for="item in two.list" class="you_dan fboxRow Xstart Ycenter">
|
<!--头像-->
|
<div class="you_img">
|
<img class="you_imgSrc" src="img/flq/sp_imgDef.png"/>
|
<img class="you_imgSrc" v-bind:src="item.portrait"/>
|
</div>
|
<!--昵称-->
|
<div style="width:3.5rem; margin-left:0.2rem;" class="font26 font-ell1">
|
<span>{{item.nickName}}</span>
|
</div>
|
<!--空白区域-->
|
<div class="flex1"></div>
|
<!--是否登录-->
|
<div class="font24">
|
<span v-if="item.valid == true" class="font-green">邀请成功</span>
|
<span v-else class="ziF_red">未登录用户</span>
|
</div>
|
</div>
|
<!--没有好友时的图片提示-->
|
<div v-if='two.showNone' class="fboxCol Xcenter Ycenter" style="width:100%; margin-top:50%;">
|
<img style="width:2.6rem; height:2.56rem;" src="img/AppPage/friends/nopeople.png"/>
|
<div v-if="nav.num1==0 && nav.num2==0" class="fboxRow Xcenter Ycenter yqBtn beiF_red do-click font30 font-white" v-on:click="yqNowClick()">
|
<span>立即邀请</span>
|
</div>
|
</div>
|
</div>
|
|
<!--加载loading框-->
|
<div class="do-scrollLoading"></div>
|
|
</div>
|
|
</div>
|
</body>
|
|
</html>
|
|
|
|
<script type="text/javascript">
|
|
// ====================================================================== 页面数据
|
// vue实例化
|
var vm = null;
|
doui.onReady(function()
|
{
|
vm = new Vue({
|
el: "#allwai",
|
|
data: {
|
// ------------------------------------ 顶部导航栏选项
|
nav: {
|
uid: null, // 用户id
|
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,
|
},
|
},
|
|
methods: {
|
creatOne: function ()
|
{
|
vm.one.yema = 1;
|
vm.one.yemamax = 1;
|
vm.one.list = new Array();
|
vm.one.showNone = false;
|
},
|
creatTwo: function ()
|
{
|
vm.two.yema = 1;
|
vm.two.yemamax = 1;
|
vm.two.list = new Array();
|
vm.two.showNone = false;
|
},
|
},
|
});
|
|
|
// 获取用户id
|
yesApp.userInfo(function(res){ vm.nav.uid = res.id; });
|
|
|
// 请求列表数据
|
getNumyao(); // 邀请到的队员数量统计
|
doui.showScrollLoading("加载队员^_^", function(){ getYiji(); }); // 一级数据请求
|
|
|
// 屏幕滚动事件
|
doui.scrolling("body", function(res)
|
{
|
// 到达底部
|
if (res.overBottom == true)
|
{
|
// 一度到底
|
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();
|
});
|
}
|
}
|
}
|
});
|
|
|
$("body").css("display", "block");
|
});
|
|
|
|
// ====================================================================== 页面事件
|
//
|
// 顶部导航选项点击 改变顶部下标
|
function checkClick (indexC)
|
{
|
// 下标赋值
|
vm.nav.check = indexC;
|
// 回到顶部
|
doui.scrollTo('body', 0, false);
|
// 获取数据
|
if (vm.nav.check == 0 && vm.one.list.length <= 0)
|
{
|
vm.creatOne();
|
doui.showScrollLoading("加载队员^_^", function(){ getYiji(); }, true);
|
}
|
else if (vm.nav.check == 1 && vm.two.list.length <= 0)
|
{
|
vm.creatTwo();
|
doui.showScrollLoading("加载队员^_^", function(){ getEr(); }, true);
|
}
|
};
|
|
// 立即邀请点击
|
function yqNowClick () { yesApp.pageToInvite(); }
|
|
|
|
//========================== 数据请求 ==================================
|
// 邀请到的队员数量统计
|
function getNumyao ()
|
{
|
if (vm.nav.uid != null)
|
{
|
// 数据准备
|
var myurl = getHttp() + "/client/findThreeFriendsCount";
|
var mydata = doui.AjaxData({ id: vm.nav.uid });
|
|
// 数据请求
|
doui.AjaxJsonp(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; // 二级队员数量
|
}
|
});
|
}
|
}
|
|
// 一级数据请求
|
function getYiji ()
|
{
|
if (vm.nav.uid != null)
|
{
|
// 数据准备
|
var myurl = getHttp() + "/client/findThreeFriends";
|
var mydata = doui.AjaxData({
|
id: vm.nav.uid, // vm.nav.uid
|
type: 1,
|
page: vm.one.yema
|
});
|
|
// 数据请求
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.hideScrollLoading(); doui.showToast(res.msg); }
|
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 ()
|
{
|
if (vm.nav.uid != null)
|
{
|
//数据准备
|
var myurl = getHttp() + "/client/findThreeFriends";
|
var mydata = doui.AjaxData({
|
id: vm.nav.uid,
|
type: 2,
|
page: vm.two.yema
|
});
|
|
//数据请求
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.hideScrollLoading(); doui.showToast(res.msg); }
|
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; }
|
}
|
});
|
}
|
}
|
</script>
|
