307 lines
7.4 KiB
Vue
307 lines
7.4 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="flex text-center text-lg bg">
|
|
<view class="title_btn flex-sub bg" @click="cut(1)" :class="tabFromIndex==1?'bgCol2': 'bgCol2H'">
|
|
<span>团队用户</span>
|
|
<span class="border-bottom border-bottom-y" v-if="tabFromIndex==1"></span>
|
|
</view>
|
|
<view class="title_btn flex-sub bg" @click="cut(2)" :class="tabFromIndex==2?'bgCol2': 'bgCol2H'">
|
|
<span>团队技师</span>
|
|
<span class="border-bottom border-bottom-l" v-if="tabFromIndex==2"></span>
|
|
</view>
|
|
</view>
|
|
<view class="view1">
|
|
<view class="flex">
|
|
<view class="view1_item">
|
|
<view class="view1_itemmoney">{{ teamCount }} <text>人</text> </view>
|
|
<view class="view1_itemname">已邀请</view>
|
|
</view>
|
|
<view class="view1_item" @tap="goDetail">
|
|
<view class="view1_itemmoney" style="color: #FF6000;"><text>￥</text>{{ teamMoney }}</view>
|
|
<view class="view1_itemname">我的收益</view>
|
|
</view>
|
|
</view>
|
|
<view @tap="goYao" class="yao-btn">
|
|
邀请好友
|
|
</view>
|
|
</view>
|
|
<view class="view2" style="border-radius: 20upx;">
|
|
<view class="view2-top">
|
|
<view style="width: 20%;">排名</view>
|
|
<view style="width: 50%;">用户</view>
|
|
<view style="width: 30%;text-align: center;">收益</view>
|
|
</view>
|
|
<view style="display: flex;flex-direction: row;padding: 20upx;" v-for="(item, index) in rankingList"
|
|
:key="index">
|
|
<view style="width: 20%;">
|
|
<image v-if="index == 0"
|
|
src="https://admin.sjajk.com/file/uploadPath/2023/01/16/f5305e9ce03a6d0269f58ce55e6c3d0d.png"
|
|
style="width: 50upx; height: 50upx;"></image>
|
|
<image v-if="index == 1"
|
|
src="https://admin.sjajk.com/file/uploadPath/2023/01/16/20b80ec8d3f4db15754426697d0054b8.png"
|
|
style="width: 50upx; height: 50upx;"></image>
|
|
<image v-if="index == 2"
|
|
src="https://admin.sjajk.com/file/uploadPath/2023/01/16/6f61f5e7ec61a1d815bee3c9f0af3c58.png"
|
|
style="width: 50upx; height: 50upx;"></image>
|
|
<view v-if="item.rankNum > 2" style="font-size: 19px; color: #999999; margin-left: 15upx;">
|
|
{{ index + 1 }}
|
|
</view>
|
|
</view>
|
|
<view style="width: 50%;display: flex;flex-direction: row;align-items: center;">
|
|
<image :src="item.avatar ? item.avatar : '/static/logo.png'"
|
|
style="border-radius: 100upx;width: 50upx; height: 50upx;"></image>
|
|
<view style="font-size: 14px; color: #333333;margin-left: 20upx; width: 65%;">{{ item.userName }}
|
|
</view>
|
|
</view>
|
|
<view class="view2-right">
|
|
<view class="view2-right-text">¥{{ item.money }}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 加载更多提示 -->
|
|
<view class="s-col is-col-24" v-if="rankingList.length > 0">
|
|
<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabFromIndex: 1,
|
|
teamCount: 0,
|
|
teamMoney: 0,
|
|
rankingList: [],
|
|
imageUrl: '/static/logo2.jpg',
|
|
money: 0,
|
|
nickName: '游客',
|
|
rankNum: 0,
|
|
page: 1,
|
|
size: 20,
|
|
loadingType: 0,
|
|
scrollTop: false,
|
|
contentText: {
|
|
contentdown: '上拉显示更多',
|
|
contentrefresh: '正在加载...',
|
|
contentnomore: '没有更多数据了'
|
|
}
|
|
};
|
|
},
|
|
onLoad() {
|
|
let userId = this.$queue.getData('userId');
|
|
if (userId) {
|
|
this.getRankingList(userId);
|
|
this.getUserInfo();
|
|
}
|
|
},
|
|
onPageScroll: function(e) {
|
|
this.scrollTop = e.scrollTop > 200;
|
|
},
|
|
methods: {
|
|
goDetail(){
|
|
if(this.tabFromIndex == 1){
|
|
uni.navigateTo({
|
|
url: '/my/wallet/usermoneydetail?classIndex=5'
|
|
});
|
|
}else{
|
|
uni.navigateTo({
|
|
url: '/my/wallet/usermoneydetail?classIndex=6'
|
|
});
|
|
}
|
|
},
|
|
cut(index) {
|
|
this.tabFromIndex = index;
|
|
this.page = 1;
|
|
let userId = this.$queue.getData('userId');
|
|
this.getRankingList(userId);
|
|
this.getUserInfo();
|
|
},
|
|
goYao() {
|
|
uni.navigateTo({
|
|
url: '/pages/my/invitationUser'
|
|
});
|
|
},
|
|
getUserInfo() {
|
|
let userId = this.$queue.getData('userId');
|
|
this.$Request.getT('/app/artificer/selectTeamStatistics?userId=' + userId + '&type=' + this.tabFromIndex)
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.teamCount = res.data.teamCount ? res.data.teamCount : 0;
|
|
this.teamMoney = res.data.teamMoney ? res.data.teamMoney : 0;
|
|
}
|
|
});
|
|
},
|
|
getRankingList() {
|
|
this.loadingType = 1;
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
});
|
|
let userId = this.$queue.getData('userId');
|
|
this.$Request.getT('/app/artificer/selectTeamUserList?type=' + this.tabFromIndex + '&page=' + this.page +
|
|
'&limit=' + this
|
|
.size +
|
|
'&userId=' + userId).then(res => {
|
|
if (res.code === 0) {
|
|
if (this.page === 1) {
|
|
this.rankingList = [];
|
|
}
|
|
res.data.list.forEach(d => {
|
|
this.rankingList.push(d);
|
|
});
|
|
if (res.data.list.length === this.size) {
|
|
this.loadingType = 0;
|
|
} else {
|
|
this.loadingType = 3;
|
|
}
|
|
} else {
|
|
this.loadingType = 2;
|
|
}
|
|
uni.hideLoading();
|
|
});
|
|
}
|
|
},
|
|
onReachBottom: function() {
|
|
this.page = this.page + 1;
|
|
this.getRankingList();
|
|
},
|
|
onPullDownRefresh: function() {
|
|
this.page = 1;
|
|
this.getRankingList();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.view2-right-text{
|
|
font-size: 16px;
|
|
color: #FF6000;
|
|
font-weight: bold;
|
|
}
|
|
.view2-right{
|
|
width: 30%;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.view2-top{
|
|
display: flex;
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background-image: linear-gradient(to bottom, rgba(0, 162, 138, 0.2), #f7f7f7);
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
border-top-left-radius: 9px;
|
|
border-top-right-radius: 9px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0px 10px;
|
|
}
|
|
.yao-btn{
|
|
width: 586rpx;
|
|
margin: 80rpx 50rpx 0rpx;
|
|
height: 92rpx;
|
|
line-height: 92rpx;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
|
|
border-radius: 46rpx;
|
|
}
|
|
.content {
|
|
background: #f7f7f7;
|
|
width: 100%;
|
|
height: 100vh;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.bg {
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.view1 {
|
|
background-color: #ffffff;
|
|
width: 93%;
|
|
height: 360upx;
|
|
margin-left: 26upx;
|
|
border-radius: 20upx;
|
|
margin-top: 20upx;
|
|
border-radius: 20upx;
|
|
|
|
|
|
|
|
.view1_item {
|
|
margin: 60upx 0 0 0;
|
|
height: 100upx;
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
.view1_itemmoney {
|
|
font-size: 56rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 800;
|
|
color: #333333;
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.view1_itemname {
|
|
font-size: 26rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.title_btn {
|
|
height: 78upx;
|
|
line-height: 78upx;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.bgCol2H{
|
|
color: #666;
|
|
font-weight: bold;
|
|
}
|
|
.border-bottom-y{
|
|
width: 58px;
|
|
}
|
|
.border-bottom-l{
|
|
width: 75px;
|
|
}
|
|
.border-bottom{
|
|
display: block;
|
|
|
|
height: 6px;
|
|
background: linear-gradient(-48deg, rgba(1, 156, 136, 0.6), rgba(1, 156, 136, 0.1));
|
|
border-radius: 3px;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
margin-bottom: 9px;
|
|
}
|
|
.bgCol2 {
|
|
color: #019c88;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.view2 {
|
|
background-color: #ffffff;
|
|
width: 93%;
|
|
height: auto;
|
|
margin-left: 26upx;
|
|
border-radius: 20upx;
|
|
margin-bottom: 20upx;
|
|
margin-top: 20rpx;
|
|
}
|
|
</style>
|