cgst/pages/dp/infoTwo.vue

<template>
	<view class="center">
		<view class="dz"><image src="../../static/dp/dz.png" mode=""></image></view>
		<view class="top"><image src="../../static/dp/top.png" mode=""></image></view>
		<view class="title flex">
			<view class="logo"><image src="../../static/dp/log.png" mode=""></image></view>
			<view class="time">{{ newTime }}</view>
		</view>
		<view class="info-box">
			<view class="info-item">
				<view class="info-item-bg"><image src="../../static/dp/money.png" mode=""></image></view>
				<view class="info-name">进账余额</view>
				<view class="info-price">￥{{ price }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-bg"><image src="../../static/dp/order.png" mode=""></image></view>
				<view class="info-name">订单数</view>
				<view class="info-price">{{ order }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-bg"><image src="../../static/dp/people.png" mode=""></image></view>
				<view class="info-name">会员数</view>
				<view class="info-price">{{ user }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-bg"><image src="../../static/dp/ylb.png" mode=""></image></view>
				<view class="info-name">已裂变新客</view>
				<view class="info-price">{{ explode_num }}</view>
			</view>
			<!-- <view class="info-item">
				<view class="info-item-bg"><image src="../../static/dp/dlb.png" mode=""></image></view>
				<view class="info-name">待裂变新客</view>
				<view class="info-price">23</view>
			</view> -->
			<view class="info-item">
				<view class="info-item-bg"><image src="../../static/dp/pgl.png" mode=""></image></view>
				<view class="info-name">曝光量</view>
				<view class="info-price">{{ visit }}</view>
			</view>
		</view>
		<view class="ranking-right">
			<view class="ranking-right-item">
				<view class="ranking-right-item-bg"><image src="../../static/dp/bg.png" mode=""></image></view>
				<view class="ranking-item-title">个人成交金额排行</view>
				<view class="ranking-item-bottom">
					<view class="ranking-item-bottom-title">
						<view class="ranking-item-bottom-font" style="width: 12%;">序号</view>
						<view class="ranking-item-bottom-font" style="width: 12%;">姓名</view>
						<view class="ranking-item-bottom-font" style="width: 36%;">所属门店</view>
						<view class="ranking-item-bottom-font">成交金额</view>
						<view class="ranking-item-bottom-font">订单数量</view>
					</view>
					<view class="ranking-item-bottom-main" :class="{ current: index % 2 != 0 }" v-for="(item, index) in yglist">
						<view class="ranking-item-bottom-font" style="width: 12%;">{{ index + 1 }}</view>
						<view class="ranking-item-bottom-font" style="width: 12%;">{{ item.nickname }}</view>
						<view class="ranking-item-bottom-font" style="width: 36%;">{{ item.store.name }}</view>
						<view class="ranking-item-bottom-font">￥{{ item.sum_pay_price }}00</view>
						<view class="ranking-item-bottom-font">{{ item.order_count }}</view>
					</view>
				</view>
			</view>
			<view class="ranking-right-item">
				<view class="ranking-right-item-bg"><image src="../../static/dp/bg.png" mode=""></image></view>
				<view class="ranking-item-title">个人裂变新客排行</view>
				<view class="ranking-item-bottom">
					<view class="ranking-item-bottom-title">
						<view class="ranking-item-bottom-font" style="width: 12%;">序号</view>
						<view class="ranking-item-bottom-font" style="width: 22%;">姓名</view>
						<view class="ranking-item-bottom-font" style="width: 46%;">所属门店</view>
						<view class="ranking-item-bottom-font">已裂变</view>
						<!-- <view class="ranking-item-bottom-font">待裂变</view> -->
					</view>
					<view class="ranking-item-bottom-main" :class="{ current: index % 2 != 0 }" v-for="(item, index) in grlblist">
						<view class="ranking-item-bottom-font" style="width: 12%;">{{ index + 1 }}</view>
						<view class="ranking-item-bottom-font" style="width: 22%;">{{ item.nickname }}</view>
						<view class="ranking-item-bottom-font" style="width: 46%;">{{ item.belong_store.name }}</view>
						<view class="ranking-item-bottom-font">{{ item.explode_count }}</view>
						<!-- <view class="ranking-item-bottom-font">12</view> -->
					</view>
				</view>
			</view>
			<view class="ranking-right-item">
				<view class="ranking-right-item-bg"><image src="../../static/dp/bg.png" mode=""></image></view>
				<view class="ranking-item-title">破万大神</view>
				<view class="ranking-item-bottom">
					<view class="ranking-item-bottom-title">
						<view class="ranking-item-bottom-font" style="width: 12%;">序号</view>
						<view class="ranking-item-bottom-font" style="width: 12%;">姓名</view>
						<view class="ranking-item-bottom-font" style="width: 36%;">所属门店</view>
						<view class="ranking-item-bottom-font">成交金额</view>
						<view class="ranking-item-bottom-font">订单数量</view>
					</view>
					<view class="ranking-item-bottom-main" :class="{ current: index % 2 != 0 }" v-for="(item, index) in pwlist">
						<view class="ranking-item-bottom-font" style="width: 12%;">{{ index + 1 }}</view>
						<view class="ranking-item-bottom-font" style="width: 12%;">{{ item.waiter.user.nickname }}</view>
						<view class="ranking-item-bottom-font" style="width: 36%;">{{ item.store.name }}</view>
						<view class="ranking-item-bottom-font">￥{{ item.sum_pay_price }}00</view>
						<view class="ranking-item-bottom-font">{{ item.order_count }}</view>
					</view>
				</view>
			</view>
			<view class="ranking-right-item">
				<view class="ranking-right-item-bg"><image src="../../static/dp/bg.png" mode=""></image></view>
				<view class="ranking-item-title">门店成交金额排行</view>
				<view class="ranking-item-bottom">
					<view class="ranking-item-bottom-title">
						<view class="ranking-item-bottom-font" style="width: 30%;">序号</view>
						<view class="ranking-item-bottom-font" style="width: 40%;">所属门店</view>
						<view class="ranking-item-bottom-font" style="width: 30%;">成交金额</view>
					</view>
					<view class="ranking-item-bottom-main" :class="{ current: index % 2 != 0 }" v-for="(item, index) in mdcjlist">
						<view class="ranking-item-bottom-font" style="width: 30%;">{{ index + 1 }}</view>
						<view class="ranking-item-bottom-font" style="width: 40%;">{{ item.name }}</view>
						<view class="ranking-item-bottom-font" style="width: 30%;">{{ item.sum_pay_price }}</view>
					</view>
				</view>
			</view>
			<view class="ranking-right-item">
				<view class="ranking-right-item-bg"><image src="../../static/dp/bg.png" mode=""></image></view>
				<view class="ranking-item-title">门店裂变新客排行</view>
				<view class="ranking-item-bottom">
					<view class="ranking-item-bottom-title">
						<view class="ranking-item-bottom-font" style="width: 30%;">序号</view>
						<view class="ranking-item-bottom-font" style="width: 40%;">所属门店</view>
						<view class="ranking-item-bottom-font" style="width: 30%;">已裂变</view>
					</view>
					<view class="ranking-item-bottom-main" :class="{ current: index % 2 != 0 }" v-for="(item, index) in mdlblist">
						<view class="ranking-item-bottom-font" style="width: 30%;">{{ index + 1 }}</view>
						<view class="ranking-item-bottom-font" style="width: 40%;">{{ item.name }}</view>
						<view class="ranking-item-bottom-font" style="width: 30%;">{{ item.explode_count }}</view>
					</view>
				</view>
			</view>
			<view class="ranking-right-item">
				<view class="ranking-right-item-bg"><image src="../../static/dp/bg.png" mode=""></image></view>
				<view class="ranking-item-title">超级客户</view>
				<view class="ranking-item-bottom">
					<view class="ranking-item-bottom-title">
						<view class="ranking-item-bottom-font" style="width: 25%;">序号</view>
						<view class="ranking-item-bottom-font" style="width: 25%;">姓名</view>
						<view class="ranking-item-bottom-font" style="width: 25%;">成交金额</view>
						<view class="ranking-item-bottom-font" style="width: 25%;">订单数</view>
					</view>
					<view class="ranking-item-bottom-main" :class="{ current: index % 2 != 0 }" v-for="(item, index) in cjkhlist">
						<view class="ranking-item-bottom-font" style="width: 25%;">{{ index + 1 }}</view>
						<view class="ranking-item-bottom-font" style="width: 25%;">{{ item.nickname }}</view>
						<view class="ranking-item-bottom-font" style="width: 25%;">￥{{ item.sum_pay_price }}</view>
						<view class="ranking-item-bottom-font" style="width: 25%;">{{ item.order_count }}</view>
					</view>
				</view>
			</view>
			<view class="ranking-right-item">
				<view class="ranking-right-item-bg"><image src="../../static/dp/bg.png" mode=""></image></view>
				<view class="ranking-item-title">热卖项目排行</view>
				<view class="ranking-item-bottom">
					<view class="ranking-item-bottom-title">
						<view class="ranking-item-bottom-font" style="width: 15%;">序号</view>
						<view class="ranking-item-bottom-font" style="width: 35%;">项目名称</view>
						<view class="ranking-item-bottom-font" style="width: 25%;">销售数量</view>
						<view class="ranking-item-bottom-font" style="width: 25%;">销售金额</view>
					</view>
					<view class="ranking-item-bottom-main" :class="{ current: index % 2 != 0 }" v-for="(item, index) in rmxmlist">
						<view class="ranking-item-bottom-font" style="width: 15%;">{{ index + 1 }}</view>
						<view class="ranking-item-bottom-font" style="width: 35%;">{{ item.store_name }}</view>
						<view class="ranking-item-bottom-font" style="width: 25%;">{{ item.sales }}</view>
						<view class="ranking-item-bottom-font" style="width: 25%;">{{ item.sales * 1 * item.price * 1 }}</view>
					</view>
				</view>
			</view>
			<view class="ranking-right-item">
				<view class="ranking-right-item-bg"><image src="../../static/dp/bg.png" mode=""></image></view>
				<view class="ranking-item-title">小组成交金额排行</view>
				<view class="ranking-item-bottom">
					<view class="ranking-item-bottom-title">
						<view class="ranking-item-bottom-font" style="width: 12%;">序号</view>
						<view class="ranking-item-bottom-font" style="width: 12%;">组名</view>
						<view class="ranking-item-bottom-font" style="width: 36%;">所属门店</view>
						<view class="ranking-item-bottom-font">成交金额</view>
						<view class="ranking-item-bottom-font">订单数量</view>
					</view>
					<view class="ranking-item-bottom-main" :class="{ current: index % 2 != 0 }" v-for="(item, index) in xccjlist">
						<view class="ranking-item-bottom-font" style="width: 12%;">{{ index + 1 }}</view>
						<view class="ranking-item-bottom-font" style="width: 12%;">{{ item.group_name }}</view>
						<view class="ranking-item-bottom-font" style="width: 36%;">{{ item.store.name }}</view>
						<view class="ranking-item-bottom-font">￥{{ item.sum_pay_price }}</view>
						<view class="ranking-item-bottom-font">{{ item.order_count }}</view>
					</view>
				</view>
			</view>
			<view class="ranking-right-item">
				<view class="ranking-right-item-bg"><image src="../../static/dp/bg.png" mode=""></image></view>
				<view class="ranking-item-title">小组裂变新客排行</view>
				<view class="ranking-item-bottom">
					<view class="ranking-item-bottom-title">
						<view class="ranking-item-bottom-font" style="width: 12%;">序号</view>
						<view class="ranking-item-bottom-font" style="width: 12%;">组名</view>
						<view class="ranking-item-bottom-font" style="width: 56%;">所属门店</view>
						<view class="ranking-item-bottom-font">已裂变</view>
						<!-- <view class="ranking-item-bottom-font">待裂变</view> -->
					</view>
					<view class="ranking-item-bottom-main" :class="{ current: index % 2 != 0 }" v-for="(item, index) in xzlblist">
						<view class="ranking-item-bottom-font" style="width: 12%;">{{ index + 1 }}</view>
						<view class="ranking-item-bottom-font" style="width: 12%;">{{ item.group_name }}</view>
						<view class="ranking-item-bottom-font" style="width: 56%;">{{ item.store.name }}</view>
						<view class="ranking-item-bottom-font">{{ item.group_explode_count }}</view>
						<!-- <view class="ranking-item-bottom-font">12</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bottom"><image src="../../static/dp/bottom.png" mode=""></image></view> -->
	</view>
</template>

<script>
import { getnewTime, timeComputed } from '@/utils/rocessor.js';
import { loadIndexs, waiter_rank, user_explode_rank, over10000, store_list, store_explode_rank, super_user, product, groupList, group_explode_rank } from '@/api/info.js';
export default {
	data() {
		return {
			newTime: '2022.08.22',
			explode_num: '',
			order: '',
			price: '',
			user: '',
			visit: '',
			time: '',
			yglist: [], //员工排行榜
			grlblist: [], //个人裂变新客排行
			pwlist: [], //破万大神
			mdcjlist: [], //门店成交金额排行
			mdlblist: [], //门店裂变排行
			cjkhlist: [], //超级客户
			rmxmlist: [], //热卖项目排行
			xccjlist: [], //小组成交金额排行
			xzlblist: [] //小组裂变新客排行榜
		};
	},
	onHide() {
		clearTimeout(this.time);
	},
	// 监听页面卸载
	onUnload() {
		// 关闭倒计时
		clearTimeout(this.time);
	},
	// 监听页面后退
	onBackPress() {
		// 关闭倒计时
		clearTimeout(this.time);
	},
	onShow() {
		this.loadData();
	},
	methods: {
		navTo(url) {
			this.$router.push(url);
		},
		loadData() {
			const obj = this;
			loadIndexs().then(({ data }) => {
				this.newTime = getnewTime();
				this.explode_num = data.explode_num;
				this.order = data.order;
				this.user = data.user;
				this.visit = data.visit;
				this.price = data.order_pay;
			});
			waiter_rank({ page: 1, limit: 21, store_id: 0 }).then(({ data }) => {
				this.yglist = data.list;
			});
			user_explode_rank({ page: 1, limit: 8, store_id: 0 }).then(({ data }) => {
				this.grlblist = data.list;
			});
			over10000({ page: 1, limit: 8, store_id: 0 }).then(({ data }) => {
				this.pwlist = data.list;
			});
			store_list({ page: 1, limit: 8, store_id: 0 }).then(({ data }) => {
				this.mdcjlist = data.list;
			});
			store_explode_rank({ page: 1, limit: 8, store_id: 0 }).then(({ data }) => {
				this.mdlblist = data.list;
			});
			super_user({ page: 1, limit: 8, store_id: 0 }).then(({ data }) => {
				this.cjkhlist = data.list;
			});
			product({ page: 1, limit: 8, store_id: 0 }).then(({ data }) => {
				this.rmxmlist = data.list;
			});
			groupList({ page: 1, limit: 8, store_id: 0 }).then(({ data }) => {
				this.xccjlist = data.list;
			});
			group_explode_rank({ page: 1, limit: 8, store_id: 0 }).then(({ data }) => {
				this.xzlblist = data.list;
			});
			this.time = setTimeout(this.loadData, 1000);
		}
	}
};
</script>

<style lang="scss">
page,
.center {
	position: relative;
	height: auto;
	min-height: 100%;
	background: linear-gradient(180deg, #0b1c9d 0%, #02004d 18%, #02004d 100%);
}
.top {
	height: 62rpx;
	width: 750rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.dz {
	position: absolute;
	top: 209rpx;
	left: 0;
	right: 0;
	width: 640rpx;
	height: 480rpx;
	margin: 0 auto;
	image {
		width: 100%;
		height: 100%;
	}
}

.title {
	margin-top: 12rpx;
	padding: 0 20rpx;
	align-items: flex-end;
	.logo {
		width: 186rpx;
		height: 58rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.time {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
}

.bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 750rpx;
	height: 820rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.info-box {
	margin: 47rpx 10rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	.info-item {
		position: relative;
		width: 242rpx;
		height: 152rpx;
		padding: 22rpx 0 0 32rpx;
		line-height: 1;
		.info-item-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 242rpx;
			height: 152rpx;
			image {
				width: 242rpx;
				height: 152rpx;
			}
		}
		.info-name {
			position: relative;
			z-index: 2;
			font-size: 25rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}
		.info-price {
			position: relative;
			z-index: 2;
			margin-top: 26rpx;
			font-size: 42rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}
	}
}
.ranking-right {
	margin: 20rpx 14rpx 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	.ranking-right-item {
		margin-top: 10rpx;
		width: 360rpx;
		height: 344rpx;
		position: relative;
		padding: 32rpx 16rpx 0;
		.ranking-right-item-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 360rpx;
			height: 344rpx;
			image {
				width: 360rpx;
				height: 344rpx;
			}
		}
		.ranking-item-title {
			position: relative;
			z-index: 2;
			text-align: center;
			font-size: 25rpx;
			font-family: SimSun;
			font-weight: 400;
			color: #66ffff;
		}
		.ranking-item-bottom {
			position: relative;
			z-index: 2;
			margin-top: 20rpx;
			.ranking-item-bottom-title {
				display: flex;
				.ranking-item-bottom-font {
					width: 20%;
					font-size: 14rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					text-align: center;
				}
			}
			.ranking-item-bottom-main {
				position: relative;
				z-index: 2;
				display: flex;
				.ranking-item-bottom-font {
					width: 20%;
					font-size: 13rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					text-align: center;
					line-height: 26rpx;
					word-break: keep-all;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			.current {
				background: #06a4da;
			}
		}
	}
}
</style>