front-end/ghsApp/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>
			<div class="income-amount">
				<div>收入金额</div>
				<div class="price">{{ $util.numberFormat(data.todayData.income) }}</div>
			</div>
			<div class="user-bottom">
				<navigator url="/admin/home/order" open-type="switchTab" class="info-list">
					<div class="info-list-name">开单</div>
					<div class="info-list-value">
						{{ $util.numberFormat(data.todayData.order) || 0 }}
					</div>
				</navigator>
				<navigator class="info-list" url="/admin/custom/visit">
					<div class="info-list-name">访客</div>
					<div class="info-list-value">
						{{ $util.numberFormat(data.todayData.visitCustom) || 0 }}
					</div>
				</navigator>
				<navigator url="/pagesStore/me/incomeExpenses" class="info-list">
					<div class="info-list-name">支出</div>
					<div class="info-list-value">
						{{ $util.numberFormat(data.todayData.expend) || 0 }}
					</div>
				</navigator>
			</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>{{item.action}}</span>
					<i class="iconfont iconxiangyou"></i>
				</div>
			</div>
		</div>

		<!-- 客户按钮 -->
		<view class="module-com">

			<view class="tabs-head_bx">
				<image @click="skKd()" :src="skSrc" mode="widthFix"></image>
				<image @click="pageTo({ url: '/admin/custom/selectCustom',query: {style:1}})" :src="pfSrc" mode="widthFix" ></image>
			</view>

			<view v-if="showBook == 1" style="text-align:center;position:relative;" @click="pageTo({ url: '/admin/book/index'})">
				<view @click.stop="closeBook" style="position:absolute;right:38rpx;top:8rpx;"><image style="width:38rpx;" :src="`${constant.imgUrl}/book/close1.png`" mode="widthFix"></image></view>
				<image style="border:4rpx solid #DDDDDD;margin:0 auto;width:695rpx;border-radius:15rpx;" :src="`${constant.imgUrl}/book/book3.png`" mode="widthFix"></image>
			</view>

			<div class="tabs-wrap">
				<div class="tabs-list" v-for="(item, index) in tabsData" :key="index">
					<div @click="goPage(item)">
						<div class="tabs-img">
							<img :src="`${constant.imgUrl}/${item.img}`" alt mode="widthFix" />
						</div>
						<div class="tabs-name">{{ item.name }}</div>
					</div>
				</div>
			</div>
		</view>

		<!-- 总览 -->
		<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" @click="pageTo(item)">
					<div class="list-num">{{ $util.numberFormat(item.value) }}</div>
					<div class="app-color-3">{{ item.name }}</div>
				</div>
			</div>
		</div>
		<!-- <fab-module /> -->
		<!-- 续费遮罩层 -->
		<modal-module
			:show="renewMask"
			:custom="true"
			:maskClosable="true"
			padding="30rpx 30rpx"
		>
			<template>
				<div class="renew-wrap">
					<div class="renew-wrap-text">你的账号已到期</div>
					<button class="admin-button-com middle" @click="renewFn()">
						立即续费
					</button>
				</div>
			</template>
		</modal-module>
    <none-hd :show="AUTHORITY_SHOW" :title="MODEL_TITLE" :btnText="MODEL_BTN_TEXT" @bthClick="toFreeApply_HOME" :authShow="EXPER_AUTH_SHOW" @comfirm="experienceFun"></none-hd>
	</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";
import { getUser } from "@/utils/auth";
import { consoleIndex } from "@/api/workbench";
import { closeBook } from "@/api/book";
import noneHd from "@/components/none-hd";
export default {
	name: "admin-workbench",
	components: {
		ModalModule,
		FabModule,
		AppAvatarModule,
    noneHd
	},
	data() {
		return {
			constant: this.$constant,
			renewMask: false,
			getappIdList: {},
			skCustomId:0,
			showBook:0,
			data: {
				admin: {},
				asset: {},
				notice: {},
				todayData: {
					income:0.00,
					order:0,
					custom:0,
					expend:0.00
				}
			},
			orderData: [
				{
					name: "待付款",
					url: "/admin/home/order",
					type: 4,
					query: {
						tabIndex: 1
					},
					value: 0
				},
				{
					name: "待配送",
					value: 0,
					url: "/admin/home/order",
					type: 4,
					query: {
						tabIndex: 2
					}
				},
				{
					name: "配送中",
					value: 0,
					url: "/admin/home/order",
					type: 4,
					query: {
						tabIndex: 3
					}
				}
			],
			tabsData: [
				{
					name: "商城",
					img: 'ghs/home/shop.png',
					url: "/admin/home/mall"
				},
				{
					name: "改价",
					img: 'ghs/home/gj.png',
					url: "/admin/changePrice/list"
				},
				{
					name: "供应商",
					img: 'ghs/home/icon_ghs.png',
					url: "/pagesPurchase/supplier"
				},
				{
					name: "报损单",
					img: 'ghs/home/kcyjs.png',
					url: "/admin/breakage/list"
				},
				{
					name: "库存预警",
					img: 'ghs/home/kcyjs.png',
					url: "/pagesStorehouse/stockWarn/manage"
				},
				{
					name: "花材",
					img: 'ghs/home/hcgl.png',
					url: "/admin/item/list"
				},
				{
					name: "调拨出库",
					img: 'ghs/home/dbck.png',
					url: "/pagesStorehouse/allot/allotEx"
				},
				{
					name: "调拨入库",
					img: 'ghs/home/dbrk.png',
					url: "/pagesStorehouse/allot/allotPut"
				}
			],
			totalData: [
				{
					name: "客户数",
					value: 0,
					url:'/admin/home/member',
					type:4
				},
				{
					name: "总访客",
					value: 0,
					url:'/admin/custom/visit',
					type:1,
				},
				{
					name: "总订单",
					value: 0,
					url:'/admin/home/order',
					type:4
				},
				{
					name: "总收入(元)",
					value: 0.00,
					url:'/pagesStore/me/incomeExpenses',
					type:1
				},
				{
					name: "总支出(元)",
					value: 0.00,
					url:'/pagesStore/me/incomeExpenses',
					type:1
				},
				{
					name: "总采购(元)",
					value: 0.00,
					url:'/admin/statistics/cgStat',
					type:1
				}
			],
			skSrc: `${this.$constant.imgUrl}/ghs/home/sk.jpg`,
			pfSrc: `${this.$constant.imgUrl}/ghs/home/pf.jpg`
		};
	},
	onShareAppMessage(res) {
		if (res.target.id === "shareStore") {
			return {
				title: "商城分享",
				desc: "",
				imgUrl: "",
				path: `/admin/billing/customerPlace?shopId=${this.loginInfo.shopId}`
			};
		} else if (res.target.id === "sharePay") {
			return {
				title: "分享收款",
				desc: "",
				imgUrl: "",
				path: "pagesShare/pay"
			};
		}
	},
	computed: {
		...mapGetters({ userInfo: "getUser" }),
		...mapGetters({ loginInfo: "getLoginInfo" }),
		...mapGetters({ myShopInfo: "getMyShopInfo" }),
	},
	onLoad(option) {
  },
	onPullDownRefresh() {
		this.init();
		uni.stopPullDownRefresh();
	},
	onShow() {
	},
	methods: {
		closeBook(){
			let that = this
			uni.showModal({
				title: "确定关闭？",
				content: "关闭后可以在底部菜单【我的】-【新人手册】重新打开",
				success: function (res) {
					if (res.confirm) {
						that.showBook = 0
						closeBook().then((res) => {});
					}
				},
			})
		},
		skKd(){
			if((this.myShopInfo.skCustomId && this.myShopInfo.skCustomId > 0) || this.skCustomId > 0){
				let currentId = 0;
				if(this.skCustomId > 0){
					currentId = this.skCustomId
				}else{
					currentId = this.myShopInfo.skCustomId
				}
				this.$util.pageTo({url: '/admin/billing/index',query: {customId: currentId,customName:'散客开单'}})
			}else{
				let that = this
				uni.showModal({
					title: '提示',
					content: '请设置散客开单门店',
					cancelText: "取消",
					confirmText: "好的",
					success: function (res) {
						if (res.confirm) {
							that.$util.pageTo({url: '/admin/shop/sk'})
						}
					}
				});
			}
		},
		init() {
			getUser().then(res => {
				console.log('resres',res,res.name)
				uni.setNavigationBarTitle({
					title: res.name
				});

				let nowTime = getDataTimestamp(new Date(), true);
				if (nowTime > res.setDeadline) {
					this.renewMask = true;
				}
			});
			consoleIndex().then(res => {
				this.data = res.data;
				const { asset, todayData,menu,showBook } = res.data;
				this.showBook = showBook
				this.tabsData = menu
				if (!this.$util.isEmpty(asset)) {
					// 订单总览
					this.orderData[0].value = asset.unPayOrder;
					this.orderData[1].value = asset.unSendOrder;
					this.orderData[2].value = asset.sendingOrder;
					// 总览数据
					this.totalData[0].value = asset.totalUser;
					this.totalData[1].value = asset.totalVisit;
					this.totalData[2].value = asset.finishOrder;
					this.totalData[3].value = asset.totalIncome;
					this.totalData[4].value = asset.totalExpend;
					this.totalData[5].value = asset.totalPurchase;
				}
			});
		},
		goPage (item) {
			this.$util.pageTo(item)
		},
		// 跳转
		pageToFn(item) {
			this.$util.pageTo({url: item.page})
		},
		// 续费
		renewFn() {
			this.$util.pageTo({url: "/pagesClient/official/index",query: {pay: 1},type: 2})
		},
		getMyMall(){
			console.log('pagesPurchase/ghsProduct?shopId='+ this.loginInfo.shopId+'&id=0&ghsShopAdminId='+this.loginInfo.shopAdminId)
				uni.navigateToMiniProgram({
					//姜枫-2021.04.13
					appId: this.getappIdList.hd.miniAppId,
					path: 'pagesPurchase/ghsProduct?shopId='+ this.loginInfo.shopId+'&id=0&ghsShopAdminId='+this.loginInfo.shopAdminId,
					//develop 开发版 trial 体验版 release 正式版
					envVersion: process.env.NODE_ENV === 'development' ? 'develop' : 'release',
					extraData: {
						'shopId': this.loginInfo.shopId,
						'id': 0,
						'name': '假数据',
					},
					success(res) {
						// 打开成功
					}
				})
		},
	}
};
</script>

<style lang="scss" scoped>
.app-content {
	padding-bottom: 10px;
}
.module-com {
	margin-bottom: 20px;
	background-color: #fff;
}
// 用户信息
.user-wrap {
	padding: 20px 30px 34px 30px;
	color: #fff;
	text-align: center;
	background-image: url("../../static/images/admin/bg.png");
	background-size: 100% 380px;
	background-repeat: no-repeat;
	.user-top {
		@include disFlex(center, space-between);
		.open-bt_bx {
			display: flex;
			align-items: center;
			line-height: 1upx;
			& > button {
				padding:0;
				line-height: auto;
				background-color: transparent;
				border: 1px solid #ffffff;
				border-radius: 22px;
				padding: 10upx 17upx!important;
				font-size: 24px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ffffff;
				& > .iconfont {
					font-size: 25px;
					padding-right: 10px;
          margin-top: -3px;
				}
			}
		}
	}
	.income-amount {
		margin-top: 36px;
		margin-bottom: 37px;
		.price {
			font-size: 50px;
			font-weight: bold;
			margin-top: 4px;
		}
	}
	.user-bottom {
		@include disFlex(center, space-around);
		.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;
				font-size:30rpx;
			}
		}
		.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;
		font-size: 24px;
		color: #333333;
	}
	.total-blo {
		@include disFlex(center, space-between);
		flex-wrap: wrap;
		padding: 30px 0 40px;
		.total-list {
			width: 33%;
			text-align: center;
			margin: 20px 0px;
			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-head_bx {
	display: flex;
	align-items: center;
	padding: 20px 15px 10px 15px;
}
// tabs
.tabs-wrap {
	padding: 20px 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;
			margin-top: 10px;
		}
		&: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>