<template>
|
|
<view class="page">
|
|
<navbar title="推广明细" leftClick @leftClick="$utils.navigateBack" />
|
|
|
|
<view class="search">
|
|
<uv-search
|
|
placeholder="会员ID/昵称"
|
|
bgColor="#fff"
|
|
@search="getData"
|
|
@custom="getData"
|
|
v-model="queryParams.title"></uv-search>
|
|
</view>
|
|
|
|
<view class="top">
|
|
<view class="top-text">
|
|
<view>{{ total }}</view>
|
|
<view>直推人数</view>
|
|
</view>
|
|
</view>
|
|
<view class="cell">
|
|
<!-- <view class="cell-top">推广明细</view> -->
|
|
<view class="cell-box"
|
|
:key="index"
|
|
v-for="(item,index) in list">
|
|
<view class="headImage">
|
|
<image :src="item.headImage" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="info">
|
|
<view
|
|
style="width: 300rpx;">
|
|
<text>昵称:</text>
|
|
{{ item.nickName }}
|
|
</view>
|
|
<view style="display: flex;align-items: center;"
|
|
@click="$utils.copyText(item.shareId)">
|
|
<text>上级ID:</text>
|
|
{{ item.shareId && item.shareId.substring(0, 8) }}...
|
|
<uv-icon name="empty-news" color="#aaa" size="40"></uv-icon>
|
|
</view>
|
|
</view>
|
|
<view class="info">
|
|
<view class="">
|
|
<text>级别:</text>
|
|
直属下级
|
|
</view>
|
|
<view class="">
|
|
<text>时间:</text>
|
|
{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mixinsList from '@/mixins/list.js'
|
|
export default {
|
|
mixins : [mixinsList],
|
|
data() {
|
|
return {
|
|
mixinsListApi : 'getFansPageList',
|
|
vipType : ['普通会员', '黄金会员', '渠道商'],
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
// this.queryParams.xxx = id
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
background-color: #F3F3F3;
|
|
height: 100vh;
|
|
.search {
|
|
position: relative;
|
|
background: #FFFFFF;
|
|
margin: 20rpx;
|
|
border-radius: 41rpx;
|
|
padding: 10rpx 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
/deep/ .uv-search__action {
|
|
background-color: $uni-color;
|
|
color: #FFFFFF;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 30rpx;
|
|
}
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
height: 200rpx;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #474747;
|
|
|
|
.top-text {
|
|
text-align: center;
|
|
|
|
view:nth-child(1) {
|
|
font-size: 78rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
view:nth-child(2) {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cell {
|
|
.cell-box{
|
|
border-radius: 16rpx;
|
|
margin: 20rpx;
|
|
background-color: #FFFFFF;
|
|
padding: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.headImage{
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin-right: 20rpx;
|
|
flex-shrink: 0;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.info{
|
|
flex: 1;
|
|
font-size: 22rpx;
|
|
flex-shrink: 0;
|
|
view{
|
|
width: 240rpx;
|
|
overflow:hidden; //超出的文本隐藏
|
|
text-overflow:ellipsis; //溢出用省略号显示
|
|
white-space:nowrap; //溢出不换行
|
|
}
|
|
text{
|
|
font-weight: 900;
|
|
color: #474747;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.cell-top {
|
|
padding: 40rpx 34rpx;
|
|
color: #474747;
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
</style>
|