front-end/mobile-code/src/pages/admin/workbench.vue

<template>
	<div class="app-main app-content">
		<!-- 用户信息 -->
		<div class="user-wrap">
			<div class="user-top">
				<div class="app-size-28">今日概况</div>
				<div @click="$util.pageTo('/pages/setting/password')">
					<app-avatar-module :src="avatarImg | default_avatar" :width="80" />
				</div>
			</div>
			<div class="income-amount">
				<div>收入金额</div>
				<div class="price">{{ data.todayData.income }}</div>
			</div>
			<div class="user-bottom">
				<div class="info-list">
					<div class="info-list-name">浏览量</div>
					<div class="info-list-value">{{ data.todayData.visit || 0 }}</div>
				</div>
				<div class="info-list">
					<div class="info-list-name">新粉丝</div>
					<div class="info-list-value">{{ data.todayData.fans || 0 }}</div>
				</div>
				<div class="info-list">
					<div class="info-list-name">新客户</div>
					<div class="info-list-value">{{ data.todayData.user || 0 }}</div>
				</div>
			</div>
		</div>
		<!-- 订单总览 -->
		<div class="module-com order-wrap">
			<div class="total-blo">
				<div class="total-list" v-for="(item, index) in orderData" :key="index">
					<div class="list-num">{{ item.value }}</div>
					<div class="app-color-3">{{ item.name }}</div>
				</div>
			</div>
		</div>
		<!-- 消息 -->
		<div class="module-com news-wrap">
			<div class="news-list" v-for="(item, index) in data.notice" :key="index" @click="pageToFn(item)">
				<div class="news-left">
					<i class="iconfont iconxiaoxi2"></i>
					<span>{{ item.title }}</span>
				</div>
				<div class="news-right">
					<span>立即授权绑定</span>
					<i class="iconfont iconxiangyou"></i>
				</div>
			</div>
		</div>
		<!-- 客户按钮 -->
		<div class="module-com tabs-wrap">
			<div class="tabs-list" v-for="(item, index) in tabsData" :key="index" @click="$util.pageTo(item)">
				<div class="tabs-img">
					<img :src="item.img" alt mode="widthFix" />
				</div>
				<div class="tabs-name">{{ item.name }}</div>
			</div>
		</div>
		<!-- 总览 -->
		<div class="module-com total-wrap">
			<div class="total-tit">总览</div>
			<div class="total-blo">
				<div class="total-list" v-for="(item, index) in totalData" :key="index">
					<div class="list-num">{{ item.value }}</div>
					<div class="app-color-3">{{ item.name }}</div>
				</div>
			</div>
		</div>
		<fab-module />
	</div>
</template>

<script>
import FabModule from '@/components/plugin/fab'
import AppAvatarModule from '@/components/module/app-avatar'
// api
import { consoleIndex } from '@/api/workbench'
// img
import tabIcon1 from '@/static/images/admin/tab-icon-1.png'
import tabIcon2 from '@/static/images/admin/tab-icon-2.png'
import tabIcon3 from '@/static/images/admin/tab-icon-3.png'
import tabIcon4 from '@/static/images/admin/tab-icon-4.png'
import tabIcon5 from '@/static/images/admin/tab-icon-5.png'
import tabIcon6 from '@/static/images/admin/tab-icon-6.png'
import tabIcon7 from '@/static/images/admin/tab-icon-7.png'
import tabIcon8 from '@/static/images/admin/tab-icon-8.png'
export default {
	name: 'admin-workbench',
	components: {
		FabModule,
		AppAvatarModule
	},
	data() {
		return {
			data: {
				admin: {},
				asset: {},
				notice: {},
				todayData: {}
			},
			// 订单总览
			orderData: [
				{
					name: '待付款',
					value: 0
				},
				{
					name: '待配送',
					value: 0
				},
				{
					name: '配送中',
					value: 0
				},
				{
					name: '待通知',
					value: 0
				},
				{
					name: '已完结',
					value: 0
				},
				{
					name: '待退款',
					value: 0
				}
			],
			// tab按钮
			tabsData: [
				{
					name: '商品管理',
					img: tabIcon1,
					url: '/pages/goodsManage/list'
				},
				{
					name: '邀请有礼',
					img: tabIcon2,
					url: '/pages/interest/admin/invite'
				},
				{
					name: '优惠券',
					img: tabIcon3,
					url: '/pages/coupon/admin/list'
				},
				{
					name: '广告管理',
					img: tabIcon4,
					url: '/pages/ad/list'
				},
				{
					name: '促销',
					img: tabIcon5,
					funtion: () => {
						this.$msg('该功能开发中...')
					}
				},
				{
					name: '员工管理',
					img: tabIcon6,
					url: '/pages/staff/list'
				},
				{
					name: '我的邀请',
					img: tabIcon7,
					url: '/pages/interest/admin/my-invite'
				},
				{
					name: '设置',
					img: tabIcon8,
					url: '/pages/setting/list'
				}
			],
			// 总览
			totalData: [
				{
					name: '客户数',
					value: 0
				},
				{
					name: '粉丝数',
					value: 0
				},
				{
					name: '会员数',
					value: 0
				},
				{
					name: '总收入（元）',
					value: 0
				},
				{
					name: '总访问量',
					value: 0
				},
				{
					name: '剩余短信',
					value: 0
				}
			]
		}
	},
	computed: {
		avatarImg() {
			return this.$util.isEmpty(this.userInfo) ? '' : this.userInfo.logoUrl
		}
	},
	onLoad(option) {
		// if (this.$util.getCheckLogin()) return
		this.init()
	},
	methods: {
		init() {
			consoleIndex().then(res => {
				this.data = res.data
				const { asset } = res.data
				if (!this.$util.isEmpty(asset)) {
					// 订单总览
					this.orderData[0].value = asset.unPayOrder
					this.orderData[1].value = asset.unSendOrder
					this.orderData[2].value = asset.sendingOrder
					this.orderData[3].value = asset.unNoticeOrder
					this.orderData[4].value = asset.finishOrder
					this.orderData[5].value = asset.cancelOrder
					// 总览数据
					this.totalData[0].value = asset.totalMember
					this.totalData[1].value = asset.totalFans
					this.totalData[2].value = asset.totalUser
					this.totalData[3].value = asset.totalIncome
					this.totalData[4].value = asset.totalVisit
					this.totalData[5].value = asset.remainSmsNum
				}
			})
		},
		// 跳转
		pageToFn(item) {
			location.href = item.url
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		padding-bottom: 10px;
	}
	// 公共
	.module-com {
		margin-bottom: 20px;
		// padding: 20px;
		background-color: #fff;
		// box-shadow: 0px 6px 16px #ddd;
		// border-radius: 10px;
	}
	// 用户信息
	.user-wrap {
		padding: 20px 40px 40px 30px;
		color: #fff;
		text-align: center;
		background-image: url('../../static/images/admin/bg.png');
		background-size: 100% 380px;
		background-repeat: no-repeat;
		.user-top {
			// padding-top: 20px;
			@include disFlex(center, space-between);
		}
		.income-amount {
			margin-top: 14px;
			margin-bottom: 40px;
			.price {
				font-size: 50px;
				font-weight: bold;
				margin-top: 4px;
			}
		}
		.user-bottom {
			@include disFlex(center, space-around);
			// padding-bottom: 40px;
			.info-list-name {
				color: #BFD4FF;
			}
			.info-list-value {
				font-size: 36px;
				font-weight: bold;
				margin-top: 4px;
			}
		}
	}
	// 消息
	.news-wrap {
		.news-list {
			@include disFlex(center, space-between);
			padding: 30px 24px 30px 30px;
			border-bottom: 1px solid $borderColor;
			font-size: 26px;
			color: $fontColor2;
			&:active {
				background-color: $backColor;
			}
			& > div {
				@include disFlex(center, flex-start);
			}
			.news-left {
				.iconfont {
					color: $mainColor;
					margin-right: 10px;
				}
			}
			.news-right {
				font-size: 24px;
				color: $mainColor;
				transform: scale(0.9);
				@include disFlex(flex-end, flex-start);
				.iconfont {
					font-size: 24px;
					margin-left: 10px;
				}
			}
		}
	}
	// 总览
	.total-wrap, .order-wrap {
		.total-tit {
			padding: 18px 0 18px 20px;
			border-bottom: 1px solid $borderColor;
			font-weight: 600;
		}
		.total-blo {
			@include disFlex(center, space-between);
			flex-wrap: wrap;
			padding: 30px 0 40px;
			.total-list {
				width: 33%;
				text-align: center;
				padding-bottom: 54px;
				border-right: 1px solid $borderColor;
				.list-num {
					margin-bottom: 8px;
					font-size: 36px;
					font-weight: bold;
				}
			}
			.total-list:nth-child(3n) {
				border-right: none;
			}
			.total-list:nth-child(n + 4) {
				padding-bottom: 0;
			}
		}
	}
	// tabs
	.tabs-wrap {
		padding: 40px 10px;
		@include disFlex(center, center);
		flex-wrap: wrap;
		.tabs-list {
			width: 25%;
			margin-bottom: 50px;
			text-align: center;
			.tabs-img {
				width: 100px;
				height: 100px;
				margin: 0 auto;
				img {
					height: 100%;
				}
			}
			.tabs-name {
				color: $fontColor2;
			}
			&:nth-child(n + 5) {
				margin-bottom: 0;
			}
		}
	}
</style>