zhangsiye/mini/pages/share/team.vue

<template>
  <view class="share-team">
    <view class="title">
      <text>一级分享名称</text>
    </view>

    <view
      v-for="(item,index) in data"
      :key="index"
      class="child-info"
    >
      <view class="head-box main-between cross-center">
        <view class="base-info dir-left-nowrap">
          <view class="head-img">
            <image :src="item.avatar" />
          </view>
          <view class="nickname-box dir-top-wrap main-center">
            <view class="nickname">
              {{ item.nickname }}
            </view>
            <view class="bind-at">
              绑定时间：{{ item.become_child_at }}
            </view>
          </view>
        </view>
        <view class="child-num">
          推广{{ item.child_count }}人
        </view>
      </view>
      <view class="price-box main-between cross-center">
        <view>{{ item.child_order_sum_income }}元</view>
        <view>{{ item.child_order_count }}个订单</view>
      </view>
    </view>
  </view></template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ShareTeam',
  data() {
    return {
      limit: 10,
      page: 1,
      isMore: true,
      data: []
    }
  },
  computed: {
    ...mapState({
      userInfo: seate => seate.user.info
    })
  },
  methods: {
    getTeam() {
      this.$loading()
      this.$api.share.team.lists({ limit: this.limit, page: this.page }).then(res => {
        this.$hideLoading()
        if (res.data.length) {
          this.data = this.data.concat(res.data)
        } else {
          this.isMore = false
        }
      })
    }
  },
  onLoad() {
    this.getTeam()
  },
  onReachBottom(e) {
    if (!this.isMore) return
    this.page += 1
    this.getTeam()
  }
}
</script>

<style lang="scss" scoped>
.share-team {
  padding: 20rpx 30rpx 80rpx;
  font-size: 28rpx;
  .title{
    text-align: center;
    color: #6eebe8;
    margin-bottom: 30rpx;
    text{
      padding-bottom: 10rpx;
      border-bottom: 4rpx solid #6eebe8;
    }
  }
  .child-info{
    background: $bg-op-color;
    color: #ffffff;
    padding: 30rpx 0;
    border-radius: 20rpx;
    margin-bottom: 30px;
    .head-box{
      padding: 0 30rpx 30rpx;
      border-bottom: 1rpx $border-op-color solid;
      .base-info{
        .head-img{
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          overflow: hidden;
          background: #ccc;
          image{
            width: 100%;
            height: 100%;
          }
        }
        .nickname-box{
          margin-left: 10rpx;
          .nickname{
            font-size: 30rpx;
            margin-bottom: 4rpx;
          }
          .bind-at{
            font-size: 24rpx;
          }
        }
      }
      .child-num{
        color: #6eebe8;
        font-size: 32rpx;
        margin-top: -20rpx;
      }
    }
    .price-box{
      padding: 30rpx 30rpx 0;
    }
  }
}
</style>