fission-star-applet-250304/pages_order/mine/team.vue

<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.id}` }}</view>
            </view>
            <view>
              <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>