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">
				<div class="info-list">
					<div class="info-list-name">开单</div>
					<div class="info-list-value">
						{{ $util.numberFormat(data.todayData.order) || 0 }}
					</div>
				</div>
				<div class="info-list">
					<div class="info-list-name">新客</div>
					<div class="info-list-value">
						{{ $util.numberFormat(data.todayData.custom) || 0 }}
					</div>
				</div>
				<div class="info-list">
					<div class="info-list-name">支出</div>
					<div class="info-list-value">
						{{ $util.numberFormat(data.todayData.expend) || 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>

		<!-- 客户按钮 -->
		<view class="module-com">
			<view class="tabs-head_bx">
				<image
					@click="pageTo({ url: '/admin/billing/index' })"
					:src="kdSrc"
					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="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">
					<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>
	</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 { getWeixinId } from "@/api/invite/index";
import { getUser } from "@/utils/auth";
import { consoleIndex } from "@/api/workbench";
// import priceSocket from "@/mixins/priceSocket";

export default {
	name: "admin-workbench",
	components: {
		ModalModule,
		FabModule,
		AppAvatarModule
	},
	// mixins:[priceSocket],
	data() {
		return {
			constant: this.$constant,
			// 遮罩层
			renewMask: false,
      getappIdList: {},
			data: {
				admin: {},
				asset: {},
				notice: {},
				todayData: {}
			},
			// 订单总览
			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
					}
				}
			],
			// tab按钮
			tabsData: [
				{
					name: "商城",
					img: `${this.$constant.imgUrl}/ghs/home/shop.png`,
					url: "/admin/my-mall"
				},
				{
					name: "改价",
					img: `${this.$constant.imgUrl}/ghs/home/gj.png`,
					url: "/admin/billing/priceChange"
				},
				{
					name: "采购单",
					img: `${this.$constant.imgUrl}/ghs/home/icon_caigou.png`,
					url: "/pagesPurchase/order"
				},
				{
					name: "库存",
					img: `${this.$constant.imgUrl}/ghs/home/kcyjs.png`,
					url: "/pagesStorehouse/stockWarn/manage"
				},
				{
					name: "调拨出库",
					img: `${this.$constant.imgUrl}/ghs/home/dbck.png`,
					url: "/pagesStorehouse/allot/allotEx"
				},
				{
					name: "调拨入库",
					img: `${this.$constant.imgUrl}/ghs/home/dbrk.png`,
					url: "/pagesStorehouse/allot/allotPut"
				},
				{
					name: "花材",
					img: `${this.$constant.imgUrl}/ghs/home/hcgl.png`,
					url: "/pagesStorehouse/flower/manage"
				},
				{
					name: "客户欠款",
					img: `${this.$constant.imgUrl}/ghs/home/khqk.png`,
					url: "/pagesArrears/list"
				},
				{
					name: "员工",
					img: `${this.$constant.imgUrl}/ghs/home/yggl.png`,
					url: "/admin/staff/list"
				},
				{
					name: "邀请开店",
					img: `${this.$constant.imgUrl}/ghs/home/yqyl.png`,
					url: "/pagesInvite/list"
				},
				{
					name: "经营概况",
					img: `${this.$constant.imgUrl}/ghs/home/jyzk.png`,
					url: "/pagesStatistics/business"
				},
				{
					name: "全部",
					img: `${this.$constant.imgUrl}/ghs/home/qball.png`,
					url: "/admin/home/apply",
					type:4
				}
			],
			// 总览
			totalData: [
				{
					name: "客户数",
					value: 0
				},
				{
					name: "总访问",
					value: 0
				},
				{
					name: "总订单",
					value: 0
				},
				{
					name: "总收入(元)",
					value: 0.00
				},
				{
					name: "总支出(元)",
					value: 0.00
				},
				{
					name: "总采购(元)",
					value: 0.00
				}
			],
			cgSrc: `${this.$constant.imgUrl}/ghs/home/open_order.png`,
			kdSrc: `${this.$constant.imgUrl}/ghs/home/open_order.png`
		};
	},
	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" }),
	},
	onLoad(option) {
  },
	onPullDownRefresh() {
		this.init();
		uni.stopPullDownRefresh();
	},
	onShow() {
		// this.init();
	},
	methods: {
		init() {
			/*延迟监听token*/
			if(!uni.getStorageSync('token')){
				setTimeout(()=>{
					this.init();
				},100);
			}else{
				// 获取小程序的APPID
				getWeixinId().then(res => {
					this.getappIdList = res.data
				});
				getUser().then(res => {
					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 } = 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.totalData[0].value = asset.totalUser;
						this.totalData[1].value = asset.totalView;
						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) {
			if (item.url === '/admin/my-mall') {
				this.getMyMall()
				return
			}
			this.$util.pageTo(item)
		},
		// 跳转
		pageToFn(item) {
			// #ifdef H5
			location.href = item.url;
			// #endif
			// #ifndef H5
			// #endif
		},
		// 续费
		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>
// button {
//   margin: 0;
//   padding: 0;
//   border: 1px solid transparent;  //自定义边框
//   outline: none;    //消除默认点击蓝色边框效果
// }
.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 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;
				// height: 44px;
				// line-height: 44px;
				font-size: 24px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ffffff;
				// margin: 0 10px;
				& > .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);
		// 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;
		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;
}
// 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>