You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
282 lines
6.2 KiB
282 lines
6.2 KiB
<template>
|
|
<view class="page">
|
|
<navbar title="分销" leftClick @leftClick="$utils.navigateBack" />
|
|
|
|
<view class="content">
|
|
<view class="overview">
|
|
<view class="title">我的推荐人</view>
|
|
<view class="card flex referrer">
|
|
<image class="avatar" :src="userInfoVip.pidInfo.headImage"></image>
|
|
<view class="referrer-info">
|
|
<view>
|
|
<view class="nick-name">{{ userInfoVip.pidInfo.nickName }}</view>
|
|
<view>{{ `ID：${userInfoVip.pidInfo.intentionCode}` }}</view>
|
|
</view>
|
|
<view v-if="userInfoVip.pidInfo.phone">
|
|
<view class="phone-label">手机号</view>
|
|
<view>{{ userInfoVip.pidInfo.phone }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="summary">
|
|
<image class="bg" src="../static/center/overview-bg.png"></image>
|
|
|
|
<view class="flex flex-column summary-info">
|
|
<view class="flex summary-info-total">
|
|
<view class="flex flex-column">
|
|
<view class="value">{{ userInfoVip.user_sum }}</view>
|
|
<view class="label">推荐总人数（人）</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex summary-info-detail">
|
|
<view class="flex flex-column">
|
|
<view class="label">直接推荐（人）</view>
|
|
<view class="value">{{ userInfoVip.j_sum }}</view>
|
|
</view>
|
|
<view class="flex flex-column">
|
|
<view class="label">间接推荐（人）</view>
|
|
<view class="value">{{ userInfoVip.z_sum }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card" style="padding: 20rpx 10rpx 11rpx 0;">
|
|
<uv-tabs :list="tabs"
|
|
:inactiveStyle="{
|
|
color: '#999999',
|
|
fontSize: '30rpx',
|
|
fontWeight: 500,
|
|
whiteSpace: 'nowrap',
|
|
}"
|
|
:activeStyle="{
|
|
color: '#1B1B1B',
|
|
fontSize: '38rpx',
|
|
fontWeight: 900,
|
|
whiteSpace: 'nowrap',
|
|
}"
|
|
lineHeight="13rpx"
|
|
lineWidth="77rpx"
|
|
:lineColor="`url(${sliderBgUrl}) 100% 100%`"
|
|
:scrollable="false"
|
|
@click="clickTabs"
|
|
>
|
|
<template v-slot:right>
|
|
<suspendDropdown
|
|
v-model="queryParams.role"
|
|
:options="roleOptions"
|
|
@change="onRoleChange"
|
|
></suspendDropdown>
|
|
</template>
|
|
</uv-tabs>
|
|
</view>
|
|
|
|
<view class="card flex list-item"
|
|
v-for="item in list"
|
|
:key="item.id"
|
|
>
|
|
<image class="avatar" :src="item.headImage"></image>
|
|
<view class="flex" style="flex: 1; justify-content: space-between;">
|
|
<view class="flex flex-column left">
|
|
<view class="highlight">{{ item.nickName }}</view>
|
|
<view>{{ getRoleDesc(item.role) }}</view>
|
|
</view>
|
|
<view class="flex flex-column right">
|
|
<view>{{ $dayjs(item.createTime).format('HH:mm:ss') }}</view>
|
|
<view>{{ $dayjs(item.createDate).format('YYYY-MM-DD') }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
import mixinsList from '@/mixins/list.js'
|
|
import suspendDropdown from '@/components/base/suspendDropdown.vue'
|
|
|
|
export default {
|
|
mixins : [mixinsList],
|
|
components: {
|
|
suspendDropdown,
|
|
},
|
|
data() {
|
|
return {
|
|
tabs: [{
|
|
name: '直接推荐'
|
|
},
|
|
{
|
|
name: '间接推荐'
|
|
},
|
|
],
|
|
roleOptions: [
|
|
{
|
|
label: '普通会员',
|
|
value: 0,
|
|
},
|
|
{
|
|
label: '代理商',
|
|
value: 1,
|
|
},
|
|
],
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
state: 0,
|
|
},
|
|
// todo
|
|
sliderBgUrl: '',
|
|
mixinsListApi : 'getUserInfoVipList',
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['userInfo', 'userInfoVip']),
|
|
},
|
|
onShow() {
|
|
this.$store.commit('getUserInfoVip')
|
|
},
|
|
methods: {
|
|
getRoleDesc(role) {
|
|
return this.roleOptions.find(item => item.value == role)?.label
|
|
},
|
|
//点击tab栏
|
|
clickTabs(e) {
|
|
this.queryParams.state = e.index
|
|
this.queryParams.pageNo = 1
|
|
this.queryParams.pageSize = 10
|
|
this.getData()
|
|
},
|
|
onRoleChange(role) {
|
|
if (role === null) {
|
|
delete this.queryParams.role
|
|
} else {
|
|
this.queryParams.role = role
|
|
}
|
|
this.getData()
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page {
|
|
background-color: $uni-bg-color;
|
|
}
|
|
|
|
.content {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.overview {
|
|
& > .title {
|
|
color: #1B1B1B;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.referrer {
|
|
color: #999999;
|
|
font-size: 24rpx;
|
|
padding: 20rpx;
|
|
margin-top: 20rpx;
|
|
|
|
.avatar {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
border-radius: 50%;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
&-info {
|
|
flex: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.nick-name {
|
|
color: #1B1B1B;
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.phone-label {
|
|
color: #1B1B1B;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.summary {
|
|
margin-top: 20rpx;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 373rpx;
|
|
|
|
color: #04D6A3;
|
|
|
|
& > .bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&-info {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
justify-content: space-between;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 32rpx 78rpx;
|
|
box-sizing: border-box;
|
|
|
|
&-detail {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
}
|
|
.value {
|
|
font-size: 78rpx;
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.list {
|
|
&-item {
|
|
color: #999999;
|
|
font-size: 24rpx;
|
|
|
|
.left {
|
|
align-items: flex-start;
|
|
}
|
|
.right {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.highlight {
|
|
color: #1B1B1B;
|
|
font-size: 32rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.avatar {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
border-radius: 50%;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|