<template>
|
<div class="font-26 promote">
|
<assets-head :title="$t('推荐')" />
|
<div class="advise w-828 h-220 p-40 box-border flex flex-col items-start justify-center"
|
:class="{ 'h-260 ': $i18n.locale !== 'CN' }">
|
<span v-if="$i18n.locale === 'CN'" class="font-600 font-50" style="color:#273549;">{{ $t('邀请好友，一起赚币') }}</span>
|
<span v-else class="font-900 w-445 font-55">{{ $t('邀请好友，一起赚币') }}</span>
|
<span class="w-500 mt-20 font-40 font-600" style="color:#273549">{{ $t('马上充值即刻获取佣金') }}</span>
|
</div>
|
<div class="performance-title">
|
<div class="performance-title-1 flex-col flex items-start"
|
:class="{ 'performance-title-1-1': $i18n.locale !== 'CN' }">
|
{{ $t('我的总推广') }}
|
<div class="performance-text text-left">{{ promote_list.total && promote_list.total.children }}</div>
|
</div>
|
<div class="performance-title-2 flex-col flex items-center"
|
:class="{ 'performance-title-1-1': $i18n.locale !== 'CN' }">
|
{{ $t('总充值') }}
|
<div class="performance-text2 text-left">{{ promote_list.recharge_sum ? (promote_list.recharge_sum * 1).toFixed(2)
|
:
|
'0.00' }}</div>
|
</div>
|
<div class="flex items-center w-160 justify-end colorMain" style="align-self: start">
|
<div class="performance-title-3" @click="$router.push('/promote/rules')">{{ $t('规则') }}</div>
|
|
<img class="performance-title-4" src="../../assets/image/promote/right.png" />
|
</div>
|
</div>
|
<div class="numberOfPeople">
|
<div class="numberOfPeople-text flex flex-col align-center">
|
{{ $t('一代人数') }}
|
<div class="mt-20 numberOfPeople-text4 text-center">{{ promote_list.total && promote_list.total.level_1
|
}}</div>
|
</div>
|
<div class="numberOfPeople-text2 flex flex-col align-center">
|
{{ $t('二代人数') }}
|
<div class="mt-20 numberOfPeople-text5 flex-1 text-center ">{{ promote_list.total &&
|
promote_list.total.level_2
|
}}</div>
|
</div>
|
<!-- <div style="flex: 1;"></div>-->
|
<div class="numberOfPeople-text3 flex flex-col align-center">
|
{{ $t('三代人数') }}
|
<div class="mt-20 numberOfPeople-text6 flex-1 text-center ">{{ promote_list.total &&
|
promote_list.total.level_3
|
}}</div>
|
</div>
|
</div>
|
<div class="Recommend">
|
<div class="Recommend-text btnMain text-white" @click="ShareQRCode_push">{{ $t('立即推广') }}</div>
|
</div>
|
<div class="segmentation-max"></div>
|
<div class="MyRecommendation-title">{{ $t('我的推广') }}</div>
|
<div style="width: 100%;">
|
<van-tabs ref="tabs" v-model="active" sticky animated @change="onChange">
|
<van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type">
|
<div class="Recommendation-tab-title">
|
<div class="Recommendation-tab-title1">{{ $t('用户名') }}</div>
|
<div class="Recommendation-tab-title1">{{ $t('总人数') }}</div>
|
<div class="Recommendation-tab-title1">{{ $t('总充值') }}</div>
|
</div>
|
<van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多了')" @load="onLoad"
|
:loading-text="$t('加载中...')">
|
<div v-for="(item, index) in promote_list_data" :key="index" class="Recommendation-tab">
|
<div class="Recommendation-tab1">{{ item.username }}</div>
|
<div class="Recommendation-tab1">{{ item.reco_sum }}</div>
|
<div class="Recommendation-tab1">{{ (item.recharge_sum * 1).toFixed(2) }}</div>
|
</div>
|
</van-list>
|
</van-tab>
|
</van-tabs>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { Tab, Tabs } from 'vant';
|
import Axiospromote from '@/API/promote.js'
|
import { List } from 'vant';
|
import assetsHead from "@/components/assets-head";
|
export default {
|
data() {
|
return {
|
active: '1',
|
level: 1,
|
page_no: 1,
|
promote_list: [],
|
promote_list_data: [],
|
list: [],
|
loading: false,
|
finished: false,
|
pageSize: 10,
|
selectData: [
|
{ title: this.$t('一代'), type: '1' },
|
{ title: this.$t('二代'), type: '2' },
|
{ title: this.$t('三代'), type: '3' },
|
]
|
}
|
},
|
components: {
|
assetsHead,
|
[Tab.name]: Tab,
|
[Tabs.name]: Tabs,
|
[List.name]: List,
|
},
|
created() {
|
// this.init()
|
},
|
methods: {
|
init() {
|
this.promote_data()
|
},
|
onLoad() {
|
// 异步更新数据
|
this.promote_data()
|
},
|
promote_data() {
|
const t = this
|
this.loading = true;
|
Axiospromote.promote({ level: t.level, page_no: t.page_no }).then((res) => {
|
console.log(111, res)
|
t.promote_list = res.data
|
this.promote_list_data = [...this.promote_list_data, ...res.data.list]
|
// console.log(logs)
|
this.loading = false
|
if (res.data.list.length < this.pageSize) {
|
this.finished = true
|
} else {
|
this.page_no++
|
}
|
this.$refs.tabs && this.$refs.tabs.resize();
|
})
|
},
|
onClickLeft() {
|
this.$router.push('/')
|
},
|
ShareQRCode_push() {
|
this.$router.push('/ShareQRCode')
|
},
|
onChange(e) {
|
this.promote_list_data = []
|
this.finished = false
|
this.page_no = 1
|
this.level = e
|
this.loading = true;
|
if (this.loading) {
|
this.promote_data()
|
}
|
}
|
},
|
}
|
</script>
|
<style lang="scss" scoped>
|
.promote {
|
width: 100%;
|
box-sizing: border-box;
|
|
::v-deep .van-tabs__nav {
|
@include themify() {
|
background: themed("cont_background");
|
}
|
}
|
|
::v-deep .van-tab--active {
|
@include themify() {
|
color: themed("active_line");
|
}
|
}
|
}
|
|
|
|
.advise {
|
background: url("./invite-bg.png") no-repeat center center;
|
background-size: 100% 100%;
|
}
|
|
.banner {
|
width: 100%;
|
}
|
|
.performance-title {
|
width: 100%;
|
display: flex;
|
padding-right: 35px;
|
padding-left: 35px;
|
margin-top: 40px;
|
box-sizing: border-box;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.performance-title-1 {
|
width: 200px;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 26px;
|
color: #848E9C;
|
|
&.performance-title-1-1 {
|
width: 250px;
|
font-size: 26px;
|
text-align: center;
|
margin-right: 10px;
|
}
|
}
|
|
.performance-title-2 {
|
flex: 1;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 26px;
|
color: #848E9C;
|
|
&.performance-title-1-1 {
|
font-size: 26px;
|
text-align: left;
|
}
|
}
|
|
.performance-title-3 {
|
font-style: normal;
|
font-weight: 400;
|
font-size: 26px;
|
}
|
|
.performance-title-4 {
|
width: 35px;
|
}
|
|
.performance {
|
width: 100%;
|
display: flex;
|
padding-right: 35px;
|
padding-left: 35px;
|
margin-top: 25px;
|
box-sizing: border-box;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.performance-text {
|
width: 250px;
|
font-style: normal;
|
font-weight: 600;
|
font-size: 66px;
|
color: #2EBD85;
|
margin-top: 22px;
|
}
|
|
.performance-text2 {
|
flex: 1;
|
font-style: normal;
|
font-weight: 600;
|
font-size: 66px;
|
color: #2EBD85;
|
margin-top: 22px;
|
}
|
|
.numberOfPeople {
|
width: 100%;
|
display: flex;
|
padding-right: 35px;
|
padding-left: 35px;
|
margin-top: 45px;
|
box-sizing: border-box;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.numberOfPeople-text,
|
.numberOfPeople-text2,
|
.numberOfPeople-text3 {
|
font-style: normal;
|
font-weight: 400;
|
text-align: center;
|
font-size: 26px;
|
color: #848E9C;
|
}
|
|
.numberOfPeople2 {
|
width: 100%;
|
display: flex;
|
padding-right: 35px;
|
padding-left: 35px;
|
margin-top: 20px;
|
box-sizing: border-box;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.numberOfPeople-text4,
|
.numberOfPeople-text5,
|
.numberOfPeople-text6 {
|
font-style: normal;
|
font-weight: 700;
|
text-align: center;
|
font-size: 40px;
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
|
.Recommend {
|
padding-right: 35px;
|
padding-left: 35px;
|
margin-top: 45px;
|
height: 100px;
|
box-sizing: border-box;
|
}
|
|
.Recommend-text {
|
//background: #FCD436;
|
border-radius: 4px;
|
line-height: 100px;
|
font-weight: 400;
|
font-size: 32px;
|
text-align: center;
|
border-radius: 8px;
|
//color: #333333;
|
}
|
|
.segmentation-max {
|
margin-top: 45px;
|
width: 100%;
|
height: 20px;
|
|
@include themify() {
|
background: themed("bg_dark");
|
}
|
}
|
|
.MyRecommendation-title {
|
padding: 32px 35px 38px;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 32px;
|
text-align: left;
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
.Recommendation-tab-title {
|
margin-left: 35px;
|
margin-right: 35px;
|
height: 85px;
|
|
@include themify() {
|
background: themed("tab_background");
|
}
|
|
display: flex;
|
margin-top: 35px;
|
}
|
|
.Recommendation-tab-title1 {
|
flex: 1;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 30px;
|
line-height: 85px;
|
text-align: center;
|
color: #868D9A;
|
}
|
|
.Recommendation-tab {
|
margin-left: 35px;
|
margin-right: 35px;
|
height: 85px;
|
display: flex;
|
margin-top: 35px;
|
}
|
|
.Recommendation-tab1 {
|
flex: 1;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 34px;
|
line-height: 85px;
|
text-align: center;
|
color: #333333;
|
}
|
</style>
|
