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.
344 lines
7.6 KiB
344 lines
7.6 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">
|
|
<!-- todo: 换回接口提供的 -->
|
|
<image class="avatar" src="../static/temp-avatar.png"></image>
|
|
<view class="referrer-info">
|
|
<view>
|
|
<view class="nick-name">裂变星1号</view>
|
|
<view>{{ `ID：${12345678}` }}</view>
|
|
</view>
|
|
<view>
|
|
<view class="phone-label">手机号</view>
|
|
<view>15234567891</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="summary">
|
|
<image class="bg" src="../static/center/overview-bg.png"></image>
|
|
|
|
<view class="flex flex-column summary-info">
|
|
<!-- todo: 换回接口提供的 -->
|
|
<view class="flex summary-info-total">
|
|
<view class="flex flex-column">
|
|
<view class="value">100</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">90</view>
|
|
</view>
|
|
<view class="flex flex-column">
|
|
<view class="label">间接推荐（人）</view>
|
|
<view class="value">10</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('../../static/image/record/slider.png') 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 recordList.records"
|
|
:key="item.id"
|
|
>
|
|
<image class="avatar" :src="item.avatarUrl"></image>
|
|
<view class="flex" style="flex: 1; justify-content: space-between;">
|
|
<view class="flex flex-column left">
|
|
<view class="highlight">{{ item.nickName }}</view>
|
|
<view>{{ item.roleName }}</view>
|
|
</view>
|
|
<view class="flex flex-column right">
|
|
<view>{{ item.createTime }}</view>
|
|
<view>{{ item.createDate }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import suspendDropdown from '@/components/base/suspendDropdown.vue'
|
|
|
|
export default {
|
|
components: {
|
|
suspendDropdown,
|
|
},
|
|
data() {
|
|
return {
|
|
tabs: [{
|
|
name: '直接推荐'
|
|
},
|
|
{
|
|
name: '间接推荐'
|
|
},
|
|
],
|
|
roleOptions: [
|
|
{
|
|
label: '普通会员',
|
|
value: 0,
|
|
},
|
|
{
|
|
label: '代理商',
|
|
value: 1,
|
|
},
|
|
],
|
|
recordList: {
|
|
records: [
|
|
{
|
|
id: '001',
|
|
avatarUrl: '../static/temp-avatar.png',
|
|
nickName: '裂变星1号',
|
|
roleName: '普通会员',
|
|
createDate: '2025年2月15日',
|
|
createTime: '12:56:48',
|
|
},
|
|
{
|
|
id: '002',
|
|
avatarUrl: '../static/temp-avatar.png',
|
|
nickName: '裂变星1号',
|
|
roleName: '代理商',
|
|
createDate: '2025年2月15日',
|
|
createTime: '12:56:48',
|
|
},
|
|
{
|
|
id: '003',
|
|
avatarUrl: '../static/temp-avatar.png',
|
|
nickName: '裂变星1号',
|
|
roleName: '普通会员',
|
|
createDate: '2025年2月15日',
|
|
createTime: '12:56:48',
|
|
},
|
|
{
|
|
id: '004',
|
|
avatarUrl: '../static/temp-avatar.png',
|
|
nickName: '裂变星1号',
|
|
roleName: '代理商',
|
|
createDate: '2025年2月15日',
|
|
createTime: '12:56:48',
|
|
},
|
|
{
|
|
id: '005',
|
|
avatarUrl: '../static/temp-avatar.png',
|
|
nickName: '裂变星1号',
|
|
roleName: '普通会员',
|
|
createDate: '2025年2月15日',
|
|
createTime: '12:56:48',
|
|
},
|
|
],
|
|
total: 0,
|
|
},
|
|
// recordList: {
|
|
// records: [],
|
|
// total: 0,
|
|
// },
|
|
state: -1,
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
role: null,
|
|
},
|
|
}
|
|
},
|
|
onShow() {
|
|
this.orderPage()
|
|
},
|
|
//滚动到屏幕底部
|
|
onReachBottom() {
|
|
if(this.queryParams.pageSize < this.recordList.total){
|
|
this.queryParams.pageSize += 10
|
|
this.orderPage()
|
|
}
|
|
},
|
|
methods: {
|
|
orderPage(){
|
|
// todo
|
|
return
|
|
let queryParams = {
|
|
...this.queryParams,
|
|
}
|
|
if(this.state != -1){
|
|
queryParams.state = this.state
|
|
}
|
|
this.$api('orderPage', queryParams, res => {
|
|
if(res.code == 200){
|
|
this.recordList = res.result
|
|
}
|
|
})
|
|
},
|
|
//点击tab栏
|
|
clickTabs(index) {
|
|
if (index == 0) {
|
|
this.state = -1;
|
|
} else {
|
|
this.state = index - 1;
|
|
}
|
|
this.queryParams.pageSize = 10
|
|
this.orderPage()
|
|
},
|
|
onRoleChange(role) {
|
|
// todo
|
|
|
|
// fetch list
|
|
}
|
|
},
|
|
}
|
|
</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>
|