cgst/pages/shop/myriad.vue

<template>
	<view class="center">
		<view class="bg"><image src="https://cgst.liuniu946.com/image/powan-bg.png" mode=""></image></view>
		<view class="main">
			<view class="main-box" v-if="list.length != 0">
				<view class="main-title">
					<view class="main-title-bg"><image src="../../static/img/powan-title.png" mode=""></image></view>
					<view class="main-title-font">破万员工销售业绩榜</view>
				</view>
				<view class="main-top flex">
					<view class="main-top-item">
						<image class="avatar" src="../../static/error/missing-face.png" mode=""></image>
						<view class="main-top-name">李小图</view>
						<view class="main-top-price">78.5W</view>
					</view>
					<view class="main-top-item">
						<image class="avatar-first" src="../../static/error/missing-face.png" mode=""></image>
						<view class="main-top-name">李小黑</view>
						<view class="main-top-price">86.4W</view>
					</view>
					<view class="main-top-item">
						<image class="avatar" src="../../static/error/missing-face.png" mode=""></image>
						<view class="main-top-name">李小蓝</view>
						<view class="main-top-price">76.4W</view>
					</view>
				</view>
				<view class="main-list">
					<view class="main-list-title flex">
						<view class="main-list-title-item">排名</view>
						<view class="main-list-title-item">姓名</view>
						<view class="main-list-title-item">销售额</view>
					</view>
					<view class="main-list-item flex" v-for="(item, index) in list" :key="index">
						<view class="main-list-pm">TOP{{ index + 1 }}</view>
						<view class="main-list-name">李小黑</view>
						<view class="main-list-price">86.4W</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { over10000 } from '@/api/info.js';
export default {
	data() {
		return {
			list: [],
			pages: 1,
			limit: 1000,
			loadType: 'more',
			store_id: ''
		};
	},
	onLoad(option) {
		if (option.id) {
			this.store_id = option.id;
		} else {
			this.store_id = this.userInfo.store_id;
		}
		this.loadData();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadData() {
			const obj = this;
			if (obj.loadType == 'nomore' || obj.loadType == 'loading') {
				return;
			}
			obj.loadType = 'loading';
			over10000({
				pages: 1,
				limit: 100,
				store_id: obj.store_id
			}).then(({ data }) => {
				console.log(data);
				this.list = this.list.concat(data.list);
				if (data.list.length == obj.limit) {
					obj.loadType = 'more';
				} else {
					obj.loadType = 'nomore';
				}
			});
		}
	}
};
</script>

<style lang="scss">
.center,
page {
	background: #fff;
	min-height: 100%;
	height: auto;
	padding-top: 340rpx;
}
.bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 750rpx;
	height: 1940rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.main {
	margin: 0 auto;
	width: 700rpx;
	background: #fcfbf9;
	border-radius: 14rpx;
	position: relative;
	z-index: 2;
	padding: 20rpx;
	.main-title {
		width: 498rpx;
		height: 82rpx;
		margin: 0 auto;
		position: relative;
		top: -62rpx;
		.main-title-bg {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			width: 498rpx;
			height: 82rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.main-title-font {
			font-size: 36rpx;
			font-family: zihun35hao-jindianyahei;
			font-weight: 400;
			color: #ffc171;
			line-height: 82rpx;
			text-align: center;
			position: relative;
			z-index: 3;
		}
	}
	.main-box {
		width: 666rpx;
		background: #f6e7e4;
		border: 3px solid #a30f0e;
		border-radius: 14rpx;
	}
	.main-top {
		margin-top: 28rpx;
		align-items: flex-end;
		.main-top-item {
			width: 33%;
			display: flex;
			flex-direction: column;
			align-items: center;
			line-height: 1;
			.avatar {
				width: 140rpx;
				height: 140rpx;
			}
			.avatar-first {
				width: 200rpx;
				height: 200rpx;
			}
			.main-top-name {
				margin-top: 16rpx;
				font-size: 25rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #a30f0e;
			}
			.main-top-price {
				margin-top: 12rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #171717;
			}
		}
	}
	.main-list {
		margin-top: 24rpx;
		border-top: 2px solid #fac87a;
		.main-list-title {
			background: #fff;
			padding: 16rpx;
			border-bottom: 1px solid #fac87a;
			.main-list-title-item {
				text-align: center;
				width: 33%;
				font-size: 25rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #171717;
			}
		}
		.main-list-item {
			padding: 16rpx;
			border-bottom: 1px solid #fac87a;
			.main-list-pm {
				width: 33%;
				text-align: center;
				font-size: 25rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #900408;
			}
			.main-list-name {
				width: 33%;
				text-align: center;
				font-size: 25rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #686868;
			}
			.main-list-price {
				width: 33%;
				text-align: center;
				font-size: 25rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #686868;
			}
		}
	}
}
</style>