question_uniapp/pages/promotion/list.vue

<template>
	<view class="page">
		<nav-bar title="Direct referral list" bgColor="#F5f5f5"></nav-bar>
		<uni-row :gutter="0">
		  <uni-col :span="24">
			  <view class="wallet1">
				  <view style="width: 400; font-size: 12px; color: #fff;">Direct referral headcount</view>
				  <view style="width: 500; font-size: 24px; color: #fff; line-height: 55px;">{{parseFloat(this.team.direct_total).toFixed(4)}}</view>
			  </view>
		  </uni-col>
		</uni-row>	
		<view style="width: 94%; margin: 0px auto;">
			<uni-row :gutter="10" style="margin-top: 15px;"  v-for="(item, index) in list" :key="index" :style="index==0 ? '' : 'margin-top: 30px;'">
			  <uni-col :span="6" style="text-align: center;">
				  <uni-badge class="uni-badge-left-margin" text="V10" absolute="leftBottom" :offset="[25, 8]" 
				   :customStyle="{background: getBg(10)}" size="small">
					<image style="width: 60px; height: 60px; margin: auto;" :src="url" fit="cover"></image>
				  </uni-badge>
			  </uni-col>
			  <uni-col :span="18">
				  <view style="font-weight: 500; font-size: 16px; color: #3d3d3d;">{{item.username}}</view>
				  <view style="font-size: 12px; font-weight: 400; color: #999; line-height: 40rpx;">
					  ID：{{item.id}}<br>
					  Join date: {{item.created_at}}<br>
					  KPI results: <span style="color: #333; font-weight: 500; margin-left: 6rpx;">{{parseFloat(item.performance_large).toFixed(4)}}</span><br>
					  Total Team Size: <span style="color: #333; font-weight: 500; margin-left: 6rpx;">{{item.total_count}}</span>
					</view>
			  </uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	import zPrompt from '@/components/common/prompt';
	import Popup from '@/components/common/popup';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			Popup,
			zPrompt
		},
		data() {
			return {
				url:"/static/images/tx.png",
				team:{
					total_count: 0,
					direct_total: 0,
					resultsRegion: 0.00,
					resultsCell: 0.00
				},
				par:{
					page: 1,
					limit: 10
				},
				list: [],
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onLoad(e) {
			
		},
		//页面显示
		onShow() {
			if(this.userInfo.token === typeof(undefined) || this.userInfo.token === undefined){
				this.islogin = false;
			}else{
				this.islogin = true;
				this.$http.get('/api/team/index?lang='+this.$i18n.locale).then(res => {
					if(res.code == 0){
						this.team.total_count = res.data.total_count;
						this.team.direct_total = res.data.direct_total;
						this.team.resultsRegion = res.data.performance_large;
						this.team.resultsCell = res.data.performance_small;
					}
				});
				let data = {
					page: this.par.page,
					limit: this.par.limit,
					lang: this.$i18n.locale
				};
				this.$http.post('/api/team/list', data).then(res => {
					if(res.code == 0){
						this.list = res.data.data;
					}
				});
			}
			
		},
		//方法
		methods: {
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
			handleClose(done) {
				this.dialogVisible = false;
			},
			getBg(level){
				if(level >= 0 && level <= 3){
					return 'linear-gradient( 270deg, #CD8817 0%, #ED790D 100%)';
				}else if(level >= 4 && level <= 6){
					return 'linear-gradient( 270deg, #FB5E00 0%, #FFA500 100%)';
				}else if(level >= 7 && level <= 9){
					return 'linear-gradient( 270deg, #216CFF 0%, #47E3FF 100%)';
				}else if(level == 10){
					return 'linear-gradient( 270deg, #CC44FF 1%, #FF5666 100%)';
				}
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	body{background-color: #fff;}
	::v-deep .uni-badge{padding: 4rpx 20rpx;}
	.page{min-height: 100vh;}
	.dialog{
		text-align: center; border-radius: 20px;
	}
	.wallet1{
		border-radius: 10px; padding: 20px 15px 10px 15px; width: 84%; margin: 10px auto;
		background: url('/static/images/c1.png') #2B66F6; background-repeat: no-repeat; background-position: 92% 5px;
	}
	.cell_list .t{
		color: #3d3d3d; font-size: 16px; font-weight: 400; line-height: 25px;
	}
	.cell_list .d{
		color: #3d3d3d; font-size: 14px; font-weight: 400; line-height: 25px;
	}
	.cell_list .u{
		color: #1D61E7; font-weight: 600;float: right; font-size: 16px;
	}
	.cell_list .u1{
		color: #333; font-weight: 600;float: right;font-size: 16px;
	}
	.w{
		background-color: #F8F8F8; border-radius: 10px; padding: 20px 10px;
	}
	.w .t{
		text-align: center; margin-top: 10px; font-size: 14px;
	}
</style>