shunfengche-sfd/my/setting/paihangbang.vue

<template>
	<view>
		<!-- 背景图 -->
		<view class="topBg">
			<image :src="image" mode="aspectFill"></image>
		</view>
		<view class="listBox">
			<view class="listBox-search">
				<u-tabs :list="currentList" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<view class="listBox-cont flex align-center justify-center">
				<view class="listBox-contb">
					<u-table style="width: 100%" border-color="#ffffff">
						<u-tr>
							<u-th>排名</u-th>
							<u-th>师傅头像</u-th>
							<u-th>师傅昵称</u-th>
							<u-th>接单量</u-th>
							<u-th>收益</u-th>
						</u-tr>
					</u-table>
					<scroll-view @scrolltolower="scrolltolower" scroll-y="true" class="listBox-conts">
						<u-table style="width: 100%;height: 100%;" border-color="#ffffff">
							<u-tr v-for="(item,index) in list" :key="index">
								<u-td>
									<image class="icons" v-if="index == 0" src="../static/one.png" mode="">
									</image>
									<image class="icons" v-else-if="index == 1" src="../static/two.png" mode="">
									</image>
									<image class="icons" v-else-if="index == 2" src="../static/three.png" mode="">
									</image>
									<text v-else>{{index+1}}</text>
								</u-td>
								<u-td>
									<image class="icons" style="border-radius: 50%;"
										:src="item.avatar?item.avatar:'../../static/logo.png'" mode="">
									</image>
								</u-td>
								<u-td>{{item.nick_name}}</u-td>
								<u-td>{{item.indentCount}}</u-td>
								<u-td>{{item.money}}</u-td>
							</u-tr>
							<empty v-if="list.length == 0"></empty>
						</u-table>
					</scroll-view>

				</view>

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

<script>
	import empty from '../../components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				current: 1,
				currentList: [{
					name: '昨日',
					time: '',
					flag: 1
				}, {
					name: '今日',
					time: '',
					flag: 1
				}, {
					name: '本月',
					time: '',
					flag: 2
				}],
				page: 1,
				size: 10,
				list: [],
				pages: 1,
				image: 'https://douyin.xianmaxiong.com/img/20221021/e786a266d4c34608ad79a7a04bfed1fa.png',
			};
		},
		onLoad() {
			this.currentList[0].time = this.getDate(true)
			this.currentList[1].time = this.getDate(false)
			this.currentList[2].time = this.getDate(false)
			this.getlist()

		},
		onShow() {

		},
		methods: {
			scrolltolower() {
				if (this.page < this.pages) {
					this.page += 1
					this.getlist()
				}
			},
			getDate(type) {
				const today = new Date();
				const yesterday = new Date(today);

				if (type === true) {
					yesterday.setDate(yesterday.getDate() - 1);
				}

				const year = today.getFullYear();
				const month = ('0' + (today.getMonth() + 1)).slice(-2);
				const day = ('0' + today.getDate()).slice(-2);

				const formattedToday = `${year}-${month}-${day}`;
				const formattedYesterday = (`${year}-${month}-${day}`).replace(today.getDate(), yesterday.getDate());

				return type === true ? formattedYesterday : formattedToday;
			},
			change(index) {
				this.current = index
				this.page = 1
				this.getlist()
			},
			getlist() {
				let data = {
					page: this.page,
					limit: this.size,
					time: this.currentList[this.current].time,
					flag: this.currentList[this.current].flag
				}
				this.$Request.get('/app/indent/getProfitList', data).then(res => {
					uni.stopPullDownRefresh()
					uni.hideLoading();
					this.pages = res.data.pages
					if (this.page == 1) {
						this.list = res.data.records; //如果是第一页需手动制空列表
					} else {
						this.list = [...this.list, ...res.data.records]; //追加新数据
					}
				})

			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getlist()
		},
	}
</script>
<style lang="scss">
	::v-deep .u-th {
		background-color: #ffffff !important;
		color: #999999 !important;
		font-weight: 400 !important;
	}

	::v-deep .u-td {
		height: 75rpx;
		position: relative;
		margin-bottom: 40rpx;
		color: #303133;
		font-size: 28rpx;
	}

	.icons {
		width: 75rpx;
		height: 75rpx;
		position: absolute;
		top:40rpx;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>
<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.topBg {
		width: 100%;
		height: 360rpx;
		position: fixed;
		/* #ifdef H5 */
		top: 80rpx;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */


		image {
			width: 100%;
			height: 100%;

		}
	}

	.listBox {
		width: 100%;
		height: calc(100vh - 340rpx);
		border-radius: 32rpx 32rpx 0 0;
		background-color: #ffffff;
		position: fixed;
		top: 340rpx;
	}

	.listBox-search {
		margin-top: 20rpx;
	}

	.listBox-cont {
		width: 100%;
		height: calc(100% - 120rpx);
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	.listBox-contb {
		width: 710rpx;
		height: 100%;
	}

	.listBox-conts {
		width: 100%;
		height: calc(100% - 60rpx);
		background-color: #ffffff;
		
	}
</style>