liedou_uniapp/pages/subPackages/my/commissionRa...

<template>
  <view
    class="page-wrap"
    :style="{
      background: `${newNavbarBackground.background}`,
      'background-size': `${newNavbarBackground.backgroundSize}`,
    }"
  >
    <!-- 头部栏 -->
    <u-navbar
      class="navbar-wrap"
			title="分佣榜"
      title-color="#181818"
      back-icon-color="#181818"
      :background="newNavbarBackground"
    />

    <!-- 内容 -->
    <view class="content-wrap">
      <view class="date-wrap">
        <view v-for="(date, idx) in dateOptions" :key="idx" :class="['date-item', crtDateType === date.value ? 'on' : '']" @click="onClickDateType(date)">
          <text>{{ date.lable }}</text>
          <text v-if="idx + 1 < dateOptions.length" class="line">|</text>
        </view>
      </view>
      <view class="top-wrap">
				<image class="top-bg" src="/static/imgs/top-bg.png" />
				<!-- 2 -->
				<view v-if="top3List[1] && top3List[1].user_id" class="top-item">
					<image class="top-head" src="/static/imgs/top-2.png" />
					<view class="avatar-wrap user-2">
						<image class="avatar-img" :src="top3List[1].img || '/static/imgs/avatar-login.png'" />
					</view>
					<view class="name-wrap">
						<image class="icon-hg" src="/static/imgs/icon-hg.png" />
						<view class="username">{{ top3List[1].name }}</view>
					</view>
					<view class="price">{{ top3List[1].sum_rebate }}元</view>
				</view>
				<!-- 1 -->
				<view v-if="top3List[0] && top3List[0].user_id" class="top-item top-item-1">
					<image class="top-head" src="/static/imgs/top-1.png" />
					<view class="avatar-wrap user-1">
						<image class="avatar-img" :src="top3List[0].img || '/static/imgs/avatar-login.png'" />
					</view>
					<view class="name-wrap">
						<image class="icon-hg" src="/static/imgs/icon-hg.png" />
						<view class="username">{{ top3List[0].name }}</view>
					</view>
					<view class="price">{{ top3List[0].sum_rebate }}元</view>
				</view>
				<!-- 3 -->
				<view v-if="top3List[2] && top3List[2].user_id" class="top-item">
					<image class="top-head" src="/static/imgs/top-3.png" />
					<view class="avatar-wrap user-3">
						<image class="avatar-img" :src="top3List[2].img || '/static/imgs/avatar-login.png'" />
					</view>
					<view class="name-wrap">
						<image class="icon-hg" src="/static/imgs/icon-hg.png" />
						<view class="username">{{ top3List[2].name }}</view>
					</view>
					<view class="price">{{ top3List[2].sum_rebate }}元</view>
				</view>
      </view>
			<view class="list-wrap">
				<view v-for="(item, idx) in otherList" :key="idx" class="item-wrap">
					<view>
						<text class="idx">{{ idx + 4 }}</text>
						<text>{{ item.name }}</text>
					</view>
					<view>{{ item.sum_rebate }}元</view>
				</view>
			</view>
    </view>
  </view>
</template>
<script>
const app = getApp();
export default {
  data() {
    return {
      newNavbarBackground: {
        background: `url(https://ld.726p.com/tbk/upload/c579f015a49a3f9e066f0ab00ab56f7.png) #ffffff no-repeat`,
        backgroundSize: "100% 370rpx",
      },
      background: {
        backgroundImage: "transparent",
      },
      statusBarHeight: app.globalData.statusBarHeight,
      navigationBarHeight: app.globalData.navigationBarHeight,
			dateOptions: [
				{ lable: '今日', value: 'today' },
				{ lable: '昨日', value: 'yesterday' },
				{ lable: '七日', value: '7days' },
				{ lable: '本月', value: 'crtMonth' },
				{ lable: '上月', value: 'lastMonth' },
			],
			crtDateType: 'lastMonth',
			top3List: [],
			otherList: [],
    };
  },
  onLoad() {
		this.onClickDateType()
	},
  methods: {
		onClickDateType(date) {
			let start_date = ''
			let end_date = ''
			this.crtDateType = date ? date.value : 'lastMonth'
			if (this.crtDateType === 'today') { // 今日
				start_date = this.$moment().format('YYYY-MM-DD');
				end_date = this.$moment().format('YYYY-MM-DD');
			} else if (this.crtDateType === 'yesterday') { // 昨日
				start_date = this.$moment().subtract(1, 'days').format('YYYY-MM-DD');
				end_date = this.$moment().subtract(1, 'days').format('YYYY-MM-DD');
			} else if (this.crtDateType === '7days') { // 七日
				start_date = this.$moment().subtract(6, 'days').format('YYYY-MM-DD');
				end_date = this.$moment().subtract(0, 'days').format('YYYY-MM-DD');
			} else if (this.crtDateType === 'crtMonth') { // 本月
				start_date = this.$moment().startOf('month').format('YYYY-MM-DD')
				end_date = this.$moment().endOf('month').format('YYYY-MM-DD')
			} else if (this.crtDateType === 'lastMonth') { // 上月
				start_date = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD');
				end_date = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD');
			}
			this.handleGetData({ start_date, end_date })
		},
    async handleGetData(options = {}) {
			const { start_date, end_date } = options
      try {
        const url = this.$api.commissionRank_list;
        const params = { start_date, end_date };
        uni.showLoading({ title: "加载中...", mask: true });
        const { data: res } = await this.$get(url, params);
        if (res && res.errno == 0 && res.rst.length) {
          this.top3List = [
						res.rst[0] || {},
						res.rst[1] || {},
						res.rst[2] || {},
					]
					if (res.rst.length && res.rst.length > 3) {
						const list = JSON.parse(JSON.stringify(res.rst))
						list.splice(0, 3)
						this.otherList = [...list]
					}
        } else {
          uni.showToast({ title: res.err || "操作失败", icon: "none" });
        }
      } catch (error) {
        uni.showToast({ title: "服务器错误", icon: "none" });
      } finally {
        uni.hideLoading();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.page-wrap {
  position: relative;
  background-attachment: fixed;
  background-color: #f0f0f0;
  padding: 20rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
	.navbar-wrap {
		z-index: 9999;
		.navbar_name {
			color: #181818;
			font-size: 36rpx;
			padding-left: 40%;
			display: flex;
			align-items: center;
		}
	}

  .content-wrap {
    flex: 1;
    background: linear-gradient(#ff5656 0%, #ffffff 100%);
    background-size: 100% 569rpx;
    background-repeat: no-repeat;
    border-radius: 25rpx;
    .date-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin: 21rpx 40rpx 0 0;
      font-weight: 400;
      font-size: 25rpx;
      color: rgba(0, 0, 0, 0.4);
      line-height: 35rpx;
      font-style: normal;
      .date-item {
        &.on {
          color: #fff;
        }
        .line {
          opacity: 0.32;
          color: #fff;
          margin: 0 17rpx;
        }
      }
    }
		.top-wrap {
			position: relative;
			margin-top: 60rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			margin: 140rpx 25rpx 0;
			border-radius: 17rpx 17rpx 0 0;
			height: 430rpx;
			.top-bg {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 256rpx;
				height: 194rpx;
				z-index: 99;
			}
			.top-item {
				position: relative;
				flex-shrink: 0;
				width: 33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: #fff;
				border-radius: 17rpx 17rpx 0 0;
				box-sizing: border-box;
				&.top-item-1 {
					margin-top: -65rpx;
					z-index: 999;
				}
				.top-head {
					position: relative;
					z-index: 9;
					margin-top: 56rpx;
					width: 80rpx;
					height: 80rpx;
				}
				.avatar-wrap {
					margin-top: -36rpx;
					width: 121rpx;
					height: 121rpx;
					border: 4rpx solid #BFBFBF;
					overflow: hidden;
					border-radius: 50%;
					&.user-1 {
						border-color: #F9A603;
					}
					&.user-2 {
						border-color: #BFBFBF;
					}
					&.user-3 {
						border-color: #D1B685;
					}
					.avatar-img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.name-wrap {
					margin-top: -14rpx;
					display: flex;
					align-items: center;
					min-width: 50%;
					max-width: 80%;
					background-color: #FFE9E9;
					padding: 4rpx 10rpx;
					border-radius: 13rpx;
					.icon-hg {
						width: 18rpx;
						height: 18rpx;
					}
					.username {
						margin-left: 4rpx;
						flex: 1;
						font-size: 21rpx;
						color: #333;
						word-break: break-all;
						overflow: hidden;
						-webkit-line-clamp: 1;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
				}
				.price {
					margin-top: 12rpx;
					font-weight: 600;
					font-size: 33rpx;
					color: #FF5555;
					line-height: 46rpx;
				}
			}
		}
		.list-wrap {
			padding: 0 48rpx 60rpx;
			.item-wrap {
				margin-bottom: 54rpx;
				display: flex;
				justify-content: space-between;
				font-weight: 400;
				font-size: 31rpx;
				color: #333333;
				line-height: 44rpx;
				.idx {
					font-weight: 600;
					margin-right: 17rpx;
				}
			}
		}
  }
}
</style>