bn-q-icon/pages/index/team.vue

<template>
  <view class="team-box">
<!--    <top :show-img="false"></top>-->
    <en-nav v-show="false" :title="$t('index.index.tds')"></en-nav>
    <view class="box-list">
      <view class="team-data">
        <view class="user-data">
          <view class="user-img">
            <image src="@/static/img/my/user.png" ></image>
            <view class="user-level">V{{member.level_id}}</view>
          </view>
          <view class="user-address">{{member.address}}</view>

        </view>

      </view>
      <view class="team-title">
        <view class="title-text">{{ $t('index.team.ztlb') }}</view>
        <view class="title-wire"></view>
      </view>
      <view class="team-list">

        <view class="item"  v-for="(item,itemIndex) in list">
          <view class="team-item" :class="{'item-one':itemIndex===0}">
            <view class="item-left">
              <view class="left-img"> <image src="@/static/img/my/user.png" ></image></view>
              <view class="left-text">
                <view class="text-name">{{getAddress(item.address)}}</view>
                <view class="text-time">{{ $t('index.team.rtsj') }}：{{item.created_at}}</view>
              </view>
            </view>
            <view class="item-right">V{{item.level_id}}</view>
          </view>
        </view>
        <en-blank v-if="list.length<=0"></en-blank>
      </view>


    </view>
  </view>
</template>

<script>
// import Top from "@/pages/index/model/top";
import EnBlank from "@/components/en-utils/en-blank/en-blank";

import tools from "@/common/js/tools";
import {getTeamInfo, getTeamList} from "@/api/member";
import EnNav from "@/components/en-utils/en-nav/en-nav";
export default {
  name: "team",
  components: {EnNav, EnBlank},
  props: {},
  data() {
    return {
      member:{
        "address": "",
        "level_id": 0,
        "recom_num": 0,
        "performance": 0,
      },
      'list':[],
      page:1,
      isEnd:false
    }
  },
  watch: {},
  onReachBottom(){
    this.getTeamList()
  },
  mounted() {
    this.getTeamInfo()
    this.getTeamList()
  },
  methods: {
    getAddress(address){
      return tools.getAddress(address)
    },
    getTeamInfo(){
      getTeamInfo().then((res)=>{
        if(res.code===1){
          res.data.address=tools.getAddress(res.data.address)
          this.member=res.data
          console.log( this.member.address)
        }
      })
    },
    getTeamList(){
      if(this.isEnd){
        return
      }
      getTeamList().then((res)=>{
        if(res.code===1){
          if(res.data.items.length<=0){
            this.isEnd=true
          }
          this.list.push(...res.data.items)
          ++this.page
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.box-list{
  padding: 6px 16px;
  .team-data{
    background: #fff;
    margin-top: 20rpx;
    padding: 20rpx;
    border-radius: 10rpx;
    .user-data{
      .user-img{
        margin:24rpx auto;
        width: 140rpx;
        height: 140rpx;
        position: relative;
        image{
          border-radius: 50%;
          width: 140rpx;
          height: 140rpx;
        }
        .user-level{
          position: absolute;
          bottom: 0;
          left: 30rpx;
          width: 80rpx;
          background: #277ffa;
          border-radius: 20rpx;
          text-align: center;
          color: #fff;
          font-size: 22rpx;
        }
      }
      .user-address{
        margin: 0 auto;
        width: 240rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
      }
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #EAEAEA;
    }
    .team-info{
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      .team-item{
        width: 50%;
        .user-img{
          margin:0 auto;
          width: 100rpx;
          height: 100rpx;
          position: relative;
          image{
            border-radius: 50%;
            width: 100rpx;
            height: 100rpx;
          }
          .user-level{
            position: absolute;
            bottom: 0;
            left: 18rpx;
            width: 70rpx;
            background: #277ffa;
            //height: 20rpx;
            border-radius: 20rpx;
            text-align: center;
            color: #fff;
            font-size: 16rpx !important;
          }
        }
        .item{
          text-align: center;
        }
        .item-num{
          color: #333;
          font-size: 34rpx;
          font-weight: 600;
        }
        .item-text{
          margin: 6rpx auto 0;
          color: #999999;
          font-size: 28rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 240rpx;
          text-align: center;
        }
      }
    }
  }
  .team-title{
    margin: 30rpx 0;
    .title-text{
      color: #277ffa;
      font-size: 28rpx;
      font-weight: 600;
    }
    .title-wire{
      background: #277ffa;
      width: 60rpx;
      height: 4rpx;
      margin-left: 24rpx;
    }
  }
  .team-list{
    background: #fff;
    padding: 24rpx 21rpx;
    min-height: 600rpx;
    border-radius: 20rpx;
    .team-child{
      padding-left: 30rpx;
    }
    .team-item{
      padding: 24rpx 0;
      display: flex;
      justify-content: space-between;
      border-bottom: 2rpx solid #EDEDED;
      .item-left{
        display: flex;
        justify-content: left;
        .left-img{
          width: 88rpx;
          image{
            height: 88rpx;
            width: 88rpx;
            border-radius: 50%;
          }
        }
        .left-text{
          margin-left: 16rpx;
          .text-name{
            color: #333333;
            font-size: 28rpx;
            width: 240rpx;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .text-time{
            margin-top: 20rpx;
            color: #999999;
            font-size: 20rpx;
          }
        }

      }
      .item-right{
        width: 72rpx;
        height: 34rpx;
        background:  #277ffa;
        color: #fff;
        text-align: center;
        line-height: 34rpx;
        border-radius: 20rpx;
        margin-top: 30rpx;
        font-size: 20rpx;
      }

    }
    .item-one{
      padding-top: 0;
    }

  }
}
</style>