<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<title>会员特权</title>
|
<!--css-->
|
<link rel="stylesheet" type="text/css" href="css/DOUI.min.css" />
|
<style type="text/css">
|
/* ========================================================================= 一行外框 */
|
.danrow {
|
width: 95%;
|
padding: 1rem 0;
|
margin-left: 2.5%;
|
margin-top: 1rem;
|
border-radius: 0.6rem;
|
background-color: white;
|
}
|
/* ========================================================================= 邀请提成列表 */
|
.yaolistdan {
|
width: 88%;
|
height: 3rem;
|
padding: 0 5%;
|
margin-top: 0.5rem;
|
position: relative;
|
}
|
|
.yaopai {
|
width: 1.5rem;
|
height: 1.8rem;
|
}
|
|
.yaotousize {
|
width: 2.5rem;
|
height: 2.5rem;
|
border-radius: 50%;
|
}
|
|
.yaotouwai {
|
margin: 0 1rem;
|
border-radius: 50%;
|
overflow: hidden;
|
}
|
/* ========================================================================= 底部按钮 */
|
.yaobtn {
|
width: 100%;
|
height: 3.5rem;
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
background-color: rgba(237, 52, 52, 0.8);
|
z-index: 20;
|
}
|
</style>
|
<!--js-->
|
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
|
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
|
<script src="js/DOUI.min.js" type="text/javascript" charset="utf-8"></script>
|
</head>
|
|
<body class="displayNone">
|
<div id="allwai" class="allwai font3"
|
style="background-color: #EAEAEA;">
|
|
<!--banner图片-->
|
<img src="img/banner.png" style="width: 100%;" />
|
|
<!--提成比例图-->
|
<img src="img/ticbi.png" style="width: 100%;" />
|
|
<!--说明-->
|
<div style="width: 90%; margin-left: 5%; padding-bottom: 0.5rem;"
|
class="fboxCol font1 font-gray">
|
<div>所有提成均来自海草街，不影响队员的返利</div>
|
<div style="margin-top: 0.3rem;">一级队员：指直接邀请的队员</div>
|
<div style="margin-top: 0.3rem;">二级队员：指一级队员邀请的队员</div>
|
</div>
|
|
<!--邀请提成榜-->
|
<div class="danrow fboxCol Ycenter">
|
<!-- 版块题目 -->
|
<div class="font5"
|
style="color: #F42B28; margin-bottom: 0.5rem; font-weight: bold;">邀请提成榜</div>
|
<!--一个用户框-->
|
<div v-for='(item, index) in yao.list'
|
class="yaolistdan fboxRow Ycenter"
|
v-bind:style="index%2==0?'background-color:#FFE7E7;':'background-color:#BBF7FF;'">
|
<!--名次装饰-->
|
<div v-if='index==0' class="yaopai">
|
<img class="yaopai" src="img/1.png" />
|
</div>
|
<div v-if='index==1' class="yaopai">
|
<img class="yaopai" src="img/2.png" />
|
</div>
|
<div v-if='index==2' class="yaopai">
|
<img class="yaopai" src="img/3.png" />
|
</div>
|
<div v-if='index==3' class="yaopai fboxRow Xcenter Ycenter">
|
<img style="width: 1rem; height: 1rem;" src="img/4.png" />
|
</div>
|
<div v-if='index==4' class="yaopai fboxRow Xcenter Ycenter">
|
<img style="width: 1rem; height: 1rem;" src="img/5.png" />
|
</div>
|
<!--头像-->
|
<div class="yaotousize yaotouwai">
|
<img v-bind:src="item.img" class="yaotousize" />
|
</div>
|
<!--昵称-->
|
<div class="flex1 font-ell1">{{item.name}}</div>
|
<!--提成-->
|
<div class="font1"
|
style="color: #F42B28; margin-left: 1rem; font-weight: bold;">￥{{item.ti}}</div>
|
</div>
|
</div>
|
|
<!--活动规则-->
|
<div class="danrow fboxCol Ycenter" style="margin-bottom: 4rem;">
|
<!-- 版块题目 -->
|
<div class="fboxRow Ycenter"
|
style="width: 90%; margin-bottom: 0.5rem;">
|
<div
|
style="width: 0.2rem; height: 1.5rem; margin-right: 0.5rem; background-color: #F42B28;"></div>
|
<div class="font4" style="color: #F42B28; font-weight: bold;">活动规则</div>
|
</div>
|
<!--一条规则-->
|
<div v-for='(item, index) in guizlist'
|
style="width: 90%; margin-top: 0.5rem;">
|
<!--规则文字-->
|
<div class="font1 font-gray" style="line-height: 1.5;">{{item.value}}</div>
|
</div>
|
</div>
|
|
<!--邀请按钮-->
|
<div class="yaobtn fboxRow Xcenter Ycenter do-click"
|
onclick="clickbtn()">
|
<div class="font-white font4" style="font-weight: bold;">立即邀请</div>
|
</div>
|
|
</div>
|
</body>
|
|
</html>
|
|
|
<script type="text/javascript">
|
// ================================================================================= 初始数据
|
//
|
var https = "../../../client/getInviteInfo"; // 数据请求地址
|
|
// vue实例化
|
var allwai = new Vue({
|
|
el : "#allwai",
|
|
data : {
|
|
// ---------------------------------------------------------------- 邀请提成榜
|
yao : {
|
yema : 1, // 当前页码
|
yemamax : 1, // 最大页码
|
pagesize : 20, // 每页数量
|
list : [], // 提成列表
|
},
|
|
// ---------------------------------------------------------------- 活动规则
|
guizlist : [],
|
},
|
|
});
|
|
// ================================================================================= 页面事件
|
// 立即邀请 按钮点击
|
function clickbtn() {
|
var uid = yestv.getUid();
|
if (uid == null || uid == 0) {
|
yestv.toast("用户尚未登录,请先登录")
|
// doui.showToast("用户尚未登录,请先登录");
|
yestv.login();
|
return;
|
}
|
window.location.href = "yeshitv://fanli_invite";
|
}
|
|
// ================================================================================= 请求数据
|
//
|
// 获取邀请提成榜
|
yaoGet();
|
function yaoGet() {
|
// 数据准备
|
var myurl = https + "";
|
var mydata = doui.AjaxData({
|
page : allwai.yao.yema,
|
pageSize : allwai.yao.pagesize,
|
});
|
// 请求数据
|
doui.AjaxPost(myurl, mydata, function(res) {
|
if (res.code != 0) {
|
doui.showToast(res.msg);
|
} else {
|
|
// 临时数组
|
var zu_mo = new Array();
|
// 循环创造节点
|
for (var i = 0; i < res.data.inviteGetMoneyList.length; i++) {
|
// 用户节点
|
var jiedian = {
|
id : res.data.inviteGetMoneyList[i].id, // 用户id
|
img : res.data.inviteGetMoneyList[i].portrait, // 用户头像
|
name : res.data.inviteGetMoneyList[i].name, // 用户昵称
|
ti : res.data.inviteGetMoneyList[i].money, // 用户提成
|
};
|
zu_mo.push(jiedian);
|
}
|
// 数据赋值
|
allwai.yao.list = zu_mo;
|
|
var zu_m = new Array();
|
// 循环创造节点
|
for (var i = 0; i < res.data.activityRules.length; i++) {
|
// 规则节点
|
var jiedian = {
|
value : res.data.activityRules[i],
|
};
|
zu_m.push(jiedian);
|
}
|
// 数据赋值
|
allwai.guizlist = zu_m;
|
}
|
});
|
}
|
$("body").removeClass("displayNone");
|
</script>
|
