cashier-ipad/pages/index/indexCopy.vue

<!-- 首页 -->
<template>
	<view class="" @click="tologin">
		<JeepayBackground :bgColorStyle="{}">
			<!-- 导航条 -->
			<JeepayCustomNavbar title="首页" textColor="#fff" bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" />

			<!-- 统计 or 快捷扫码 -->
			<view class="code-box">
				<view class="today-box">
					<view class="today">
						<view class="today-title">今天</view>
						<view class="jing-box">
							<text>昨天</text>
							<text>近7天</text>
							<text>近30天</text>
						</view>
					</view>
					<view class="saoma">扫码</view>
				</view>
				<view class="" style="display: flex; flex-direction: column; justify-content: space-around; align-items: center; height: 400rpx; color: #fff; font-size: 28rpx">
					<view class="" style="display: flex; flex-direction: column; align-items: center">
						<view class="">成交金额(元)</view>
						<view class="">0.00</view>
					</view>
					<view class="" style="display: flex; justify-content: space-around; width: 100%; align-items: center">
						<view class="" style="display: flex; flex-direction: column; align-items: center">
							<view class="">成交笔数</view>
							<view class="">0</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; align-items: center">
							<view class="">退款金额(元)</view>
							<view class="" style="font-size: 60rpx">0.00</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; align-items: center">
							<view class="">退款笔数</view>
							<view class="">0</view>
						</view>
					</view>
					<view class="" style="width: 100%">
						<button>快捷收银</button>
					</view>
				</view>
			</view>
			<!-- 导航栅格 -->
			<view class="" style="margin-top: 85%; display: flex; flex-wrap: wrap; padding: 0 40rpx; justify-content: space-around">
				<view class="" v-for="item in navList" style="width: 30%; margin: 10rpx 0; background: #fff; padding: 10rpx 0; border-radius: 30rpx">
					<view class="" style="display: flex; flex-direction: column; justify-content: center; align-items: center">
						<image :src="item.icon" mode="" style="width: 100rpx; height: 100rpx"></image>
						{{ item.title }}
					</view>
				</view>
			</view>
		</JeepayBackground>
	</view>
</template>

<script setup>
import storageManage from '@/commons/utils/storageManage.js';
// 导航列表
const navList = [
	{
		title: '商户进件',
		icon: '/static/indexImg/icon-passage.svg',
		pageUrl: 'PAGES_APPLYMENT',
		entId: 'ENT_MCH_APPLYMENT_LIST'
	},
	{
		title: '商户管理',
		icon: '/static/indexImg/business.svg',
		pageUrl: 'PAGES_APPLYMENT_BUSINESS',
		entId: 'ENT_MCH_APPLYMENT_LIST'
	},
	{
		title: '我的门店',
		icon: '/static/indexImg/icon-store.svg',
		pageUrl: 'PAGES_STORE',
		entId: 'ENT_MCH_STORE'
	},
	{
		title: '我的设备',
		icon: '/static/indexImg/icon-calc.svg',
		pageUrl: 'PAGES_DEVICE_MAIN',
		entId: 'ENT_DEVICE'
	},
	{
		title: '员工管理',
		icon: '/static/indexImg/icon-staff.svg',
		pageUrl: 'PAGES_USER',
		entId: 'ENT_UR_USER_LIST'
	},
	{
		title: '统计报表',
		icon: '/static/indexImg/icon-pro.svg',
		pageUrl: 'PAGES_STAT',
		entId: 'ENT_ORDER_STATISTIC'
	},
	{
		title: '商户应用',
		icon: '/static/indexImg/icon-app.svg',
		pageUrl: 'PAGES_APP',
		entId: 'ENT_MCH_APP_LIST'
	},
	{
		title: '会员中心',
		icon: '/static/indexImg/icon-member.svg',
		pageUrl: 'PAGES_MEMBER_CENTER',
		entId: 'ENT_MCH_MEMBER'
	},
	{
		title: '广告管理',
		icon: '/static/indexImg/icon-ad.svg',
		pageUrl: 'PAGES_AD_LIST',
		entId: 'ENT_ADVERT_CONTROL'
	},
	{
		title: '营销红包',
		icon: '/static/indexImg/red-envelope.svg',
		pageUrl: 'PAGES_RED_INDEX',
		entId: 'ENT_MCH_MEMBER'
	}
];

// 如果不是超管 删除 刷脸广告菜单
if (storageManage.userInfo().userType != 1) {
	const index = navList.findIndex((v) => v.entId == 'ENT_ADVERT_CONTROL');
	if (index != -1) {
		navList.splice(index, 1);
	}
}

const tologin = () => {
	uni.redirectTo({
		url: '/pages/login/index'
	});
};
</script>

<style lang="scss" scoped>
.code-box {
	background: #1c72fe;
	position: fixed;
	width: 90%;
	right: 5%;
	height: 500rpx;
	border-radius: 20rpx;
	padding: 20rpx;
	box-sizing: border-box;
	top: 15%;

	.today-box {
		display: flex;
		color: #fff;
		.today {
			display: flex;
			flex: 1;
			margin-right: 10rpx;
			background: #368bfd;
			padding: 10rpx;
			border-radius: 10rpx;
		}

		.today-title {
			height: 70rpx;
			background: #fff;
			width: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			color: #1b6dfe;
		}
		.saoma {
			width: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			color: #fff;
			background: #368bfd;
		}

		.jing-box {
			display: flex;
			flex: 1;
			justify-content: space-around;
			align-items: center;
		}
	}
}
</style>