front-end/mobile-code/src/admin/home/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="pageTo('/admin/setting/password')">
					<app-avatar-module :src="avatarImg | default_avatar" :width="80" />
				</div>
			</div>
			<div class="income-amount" @click="pageTo('/admin/assets/list')">
				<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" @click="pageTo(item)">
					<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="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 /> -->
		<!-- 续费遮罩层 -->
		<modal-module :show="renewMask" :custom="true" :maskClosable="false" padding="30rpx 30rpx">
			<template>
				<div class="renew-wrap">
					<div class="renew-wrap-text">你的账号已到期</div>
					<!-- <button class="admin-button-com middle" @click="pageTo('/admin/renew/index')">立即续费</button> -->
					<button class="admin-button-com middle" @click="renewFn()">立即续费</button>
				</div>
			</template>
		</modal-module>
	</div>
</template>

<script>
	import { mapGetters, mapState } from 'vuex'
	import FabModule from '@/components/plugin/fab'
	import AppAvatarModule from '@/components/module/app-avatar'
	import ModalModule from '@/components/plugin/modal'
	import { getDataTimestamp } from '@/utils/common'
	// api
	import { getUser } from '@/utils/auth'
	import { consoleIndex } from '@/api/workbench'
	export default {
		name: 'admin-workbench',
		components: {
			ModalModule,
			FabModule,
			AppAvatarModule
		},
		data() {
			return {
				constant: this.$constant,
				// 遮罩层
				renewMask: false,
				data: {
					admin: {},
					asset: {},
					notice: {},
					todayData: {}
				},
				// 订单总览
				orderData: [
					{
						name: '待付款',
						value: 0,
						url: '/admin/home/order',
						type: 4,
						query: {
							tabIndex: 1
						}
					},
					{
						name: '待配送',
						value: 0,
						url: '/admin/home/order',
						type: 4,
						query: {
							tabIndex: 2
						}
					},
					{
						name: '配送中',
						value: 0,
						url: '/admin/home/order',
						type: 4,
						query: {
							tabIndex: 3
						}
					},
					{
						name: '待通知',
						value: 0
					},
					{
						name: '已完结',
						url: '/admin/home/order',
						type: 4,
						query: {
							tabIndex: 4
						},
						value: 0
					},
					{
						name: '全部',
						url: '/admin/home/order',
						type: 4,
						query: {
							tabIndex: 0
						},
						value: 0
					}
				],
				// tab按钮
				tabsData: [
					{
						name: '商品管理',
						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-1.png`,
						url: '/admin/goodsManage/list'
					},
					{
						name: '邀请有礼',
						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-2.png`,
						url: '/admin/interest/invite'
					},
					{
						name: '图库管理',
						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-1.png`,
						url: '/admin/goodsManage/img-store'
					},
					{
						name: '优惠券',
						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-3.png`,
						url: '/admin/coupon/list'
					},
					{
						name: '广告管理',
						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-4.png`,
						url: '/admin/ad/list'
					},
					{
						name: '数据统计',
						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-5.png`,
						url: '/admin/statistics/index'
					},
					{
						name: '员工管理',
						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-6.png`,
						url: '/admin/staff/list'
					},
					{
						name: '我的代理',
						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-7.png`,
						url: '/admin/interest/my-invite'
					},
					{
						name: '设置',
						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-8.png`,
						url: '/admin/setting/list'
					}
				],
				// 总览
				totalData: [
					{
						name: '客户数',
						value: 0
					},
					{
						name: '粉丝数',
						value: 0
					},
					{
						name: '会员数',
						value: 0
					},
					{
						name: '总收入（元）',
						value: 0
					},
					{
						name: '总访问量',
						value: 0
					},
					{
						name: '剩余短信',
						value: 0
					}
				]
			}
		},
		computed: {
			...mapGetters({ userInfo: 'getUser' }),
			avatarImg() {
				return this.$util.isEmpty(this.userInfo) ? '' : this.userInfo.logoUrl
			}
		},
		onLoad(option) {
			// if (this.$util.getCheckLogin()) return
			// this.init()
		},
		methods: {
			init() {
				getUser().then(res => {
					let nowTime = getDataTimestamp(new Date(), true)
					if (nowTime > res.setDeadline) {
						this.renewMask = true
					}
				})
				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.totalOrder
						// 总览数据
						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) {
				// #ifdef H5
				location.href = item.url
				// #endif
				// #ifndef H5
				// #endif
			},
			// 续费
			renewFn() {
				location.href = `${window.location.protocol}//www.${this.$constant.firstHost}.com/#/?payMerchantId=${this.userInfo.extend.merchantId}&pay=1`
			}
		}
	}
</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, flex-start);
		flex-wrap: wrap;
		.tabs-list {
			width: 25%;
			margin-top: 50px;
			text-align: center;
			.tabs-img {
				width: 100px;
				height: 100px;
				margin: 0 auto;
				img {
					height: 100%;
				}
			}
			.tabs-name {
				color: $fontColor2;
			}
			&:nth-child(-n + 4) {
				margin-top: 0;
			}
		}
	}
	// 遮罩层
	.renew-wrap {
		text-align: center;
		.renew-wrap-text {
			margin-top: 30px;
			margin-bottom: 60px;
			font-size: 34px;
		}
	}
</style>