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">
          <!-- 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>