rtk-wms-uniapp/pages/tabbar/homePage.vue

<template>
	<view class="home">
		<div class="bg-card" />
		<div class="title-operation">
			<div class="user-profilephoto">
				<img src="https://pic2.zhimg.com/50/v2-48ad5fee92cb9fc7292db33223452313_hd.png" alt="" srcset="">
			</div>
			<div class="user-detail">
				<text>{{ users.nickname }} 欢迎回来！</text>
				<text class="role-style">{{ users.roleStr }}</text>
			</div>
			<div class="user-mess">
				<text class="font-icons" style="font-size: 26px;">&#xe6a4;</text>
			</div>
		</div>
		<div class="title-panel">
			<div class="card-title">今日待办</div>
			<div class="card-row">
				<div class="card-col">
					<text style="color: #828282">0</text>
					<text>待审批</text>
				</div>
				<div class="card-col">
					<text style="color: orange;">0</text>
					<text>预警</text>
				</div>
				<div class="card-col">
					<text style="color: #539cf8;">6</text>
					<text>未读公告</text>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="content-panel">
				<div class="card-title">
					<div class="card-title-left">
						<text class="font-icons"
							style="width: 20px;font-size: 18px;margin-right: 4px;color: #539cf8;">&#xe679;</text>企业公告
					</div>
					<div class="card-title-right">更多<i class="font-icons">&#xe66b;</i></div>
				</div>
				<div class="card-row">
					<text>2023-06-01 关于启用加密管理制度的说明</text>
					<text class="font-icons font-icons2">&#xe694;</text>
				</div>
				<div class="card-row">
					<text>2023-06-03 端午节放假通知</text>
					<text class="font-icons font-icons2">&#xe694;</text>
				</div>
				<div class="card-row">
					<text>2023-06-11 再次申明节前请假及调休所需填写的审批明细</text>
					<text class="font-icons font-icons2">&#xe694;</text>
				</div>
				<div class="card-row">
					<text>2023-06-24 关于放假期间供应商提供送货的单据相关的订单</text>
					<text class="font-icons font-icons2">&#xe694;</text>
				</div>
			</div>
			<div class="content-panel">
				<div class="card-title">
					<div class="card-title-left">
						<text class="font-icons"
							style="width: 20px;font-size: 18px;margin-right: 4px;color: #2cb755;">&#xe6be;</text>我的待办
					</div>
					<div class="card-title-right">更多<i class="font-icons">&#xe66b;</i></div>
				</div>
				<div class="card-row">
					<text>2023-06-11 采购订单CGDD2023060149101011000021需要进行采购</text>
					<text class="font-icons font-icons2">&#xe694;</text>
				</div>
				<div class="card-row">
					<text>2023-06-18 采购订单CGDD2023062149101011000021即将到期</text>
					<text class="font-icons font-icons2">&#xe694;</text>
				</div>
				<div class="card-row">
					<text>2023-06-19 采购订单CGDD2023060191010119000021需要进行采购</text>
					<text class="font-icons font-icons2">&#xe694;</text>
				</div>
				<div class="card-row">
					<text>2023-06-24 采购订单CGDD2023060249101011000021需要进行采购</text>
					<text class="font-icons font-icons2">&#xe694;</text>
				</div>
			</div>
			<div class="content-panel">
				<div class="card-title">
					<div class="card-title-left">
						<text class="font-icons"
							style="width: 20px;font-size: 18px;margin-right: 4px;color: orange;">&#xe6e0;</text>
						预警信息
					</div>
					<div class="card-title-right">更多<i class="font-icons">&#xe66b;</i></div>
				</div>
				<div class="card-row">
					<text>2023-06-01 您有4笔采购订单即将超时，请立即进行处理！</text>
					<text class="font-icons font-icons2">&#xe694;</text>
				</div>
				<div class="card-row">
					<text>2023-06-03 您有2笔采购订单已经逾期，请立即进行处理！</text>
					<text class="font-icons font-icons2">&#xe694;</text>
				</div>
				<div class="card-row">
					<text>2024-03-21 您有1笔采购订单已经逾期，请立即进行处理！</text>
					<text class="font-icons font-icons2">&#xe694;</text>
				</div>
				<div class="card-row">
					<text>2024-04-13 您有12笔采购订单已经逾期，请立即进行处理！</text>
					<text class="font-icons font-icons2">&#xe694;</text>
				</div>
				<div class="card-row">
					<text>2024-05-09 您有1笔采购订单已经逾期，请立即进行处理！</text>
					<text class="font-icons font-icons2">&#xe694;</text>
				</div>
			</div>
		</div>
	</view>
</template>
<script>
	import {
		useSetDictStore
	} from '@/stores/useSetDictStore';
	import {
		useSetWareHouseStore
	} from '@/stores/useSetWareHouseStore.js';
	export default {
		data() {
			return {
				users: {
					nickname: '',
					roles: [],
					roleStr: ''
				}
			}
		},
		mounted() {
			this.handleSetDictStore()
			this.handleSetWarehousStore()
			// 获取用户信息
			this.handleGetUserInfo()
		},
		methods: {
			// 获取仓库信息
			handleSetWarehousStore() {
				const store = useSetWareHouseStore()
				store.$reset()
				store.getList()
			},
			// 获取字典数据
			handleSetDictStore() {
				const store = useSetDictStore()
				store.$reset()
				store.getList()
			},
			handleGetUserInfo() {
				uni.$reqGet('getMesSystemUserDetails')
					.then(({
						data
					}) => {
						uni.setStorageSync('userInfo', JSON.stringify(data))
						this.users.nickname = data?.username
						this.users.roles = data?.roles
						data?.roles.forEach((item, index) => {
							if (index === data?.roles.length - 1) {
								this.users.roleStr += item.name
							} else {
								this.users.roleStr += item.name + ', '
							}
						})
					})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.home {
		width: 100vw;
		height: 100vh;
	}

	.bg-card {
		position: fixed;
		left: 0%;
		top: 0%;
		width: 100vw;
		height: 100vh;
		z-index: 1;
		background: linear-gradient(180deg, #2979fe, #fafafb);
	}

	.title-operation {
		position: fixed;
		left: 0%;
		top: 24px;
		z-index: 2;
		width: calc(100vw - 24px);
		min-height: 75px;
		padding: 0 12px;
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: 2fr 8fr 1fr;

		.user-profilephoto {
			display: flex;
			justify-content: center;
			align-items: center;

			img {
				width: 55px;
				height: 55px;
			}
		}

		.user-detail {
			padding: 8px;
			display: grid;
			grid-template-rows: 1fr 1fr;
			grid-template-columns: 1fr;
			align-items: center;

			.role-style {
				// width: calc(100vw - 150px);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
			}

			text {
				font-weight: bold;
				color: white;
			}

			text:nth-of-type(1) {
				font-size: 16px;
			}
		}

		.user-mess {
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
		}
	}

	.title-panel {
		position: fixed;
		left: 0%;
		top: 120px;
		height: 130px;
		width: calc(100vw - 12px);
		margin: 12px 4px;
		border-radius: 6px;
		z-index: 3;
		box-shadow: 3px 3px 1px 1px #d5dffd;
		background-color: white;

		.card-title {
			height: 46px;
			line-height: 46px;
			padding: 0 16px;
			font-weight: bold;
			font-size: 14px;
		}

		.card-row {
			height: 78px;
			padding: 0 24px;
			display: flex;
			justify-content: space-between;

			.card-col {
				display: grid;
				grid-template-rows: 2fr 3fr;
				grid-template-columns: 1fr;
				align-items: center;
				justify-content: center;

				>text:nth-of-type(1) {
					text-align: center;
					font-weight: bold;
					font-size: 22px;
				}
			}
		}
	}

	.content {
		width: 100vw;
		height: calc(100vh - 330px);
		position: fixed;
		top: 270px;
		left: 0;
		z-index: 2;
		overflow-y: scroll;

		.content-panel {
			width: calc(100vw - 12px);
			margin: 12px 4px;
			border-radius: 6px;
			z-index: 3;
			box-shadow: 3px 3px 1px 1px #d5dffd;
			overflow-y: hidden;
			background-color: white;

			.card-title {
				position: relative;
				display: grid;
				grid-template-rows: 1fr;
				grid-template-columns: 1fr 1fr;

				.card-title-left {
					height: 30px;
					padding: 0 8px;
					margin-bottom: 4px;
					font-weight: bold;
					font-size: 14px;
					display: flex;
					align-items: flex-end;
				}

				.card-title-right {
					position: absolute;
					right: 6px;
					top: 10px;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 12px;
				}
			}

			.card-row {
				position: relative;
				height: 36px;
				line-height: 36px;
				padding: 2px 10px 6px 22px;
				display: grid;
				grid-template-rows: 1fr;
				grid-template-columns: 19fr 1fr;

				text:nth-of-type(1) {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					-o-text-overflow: ellipsis;
				}

				& >uni-text::before {
					content: '';
					position: absolute;
					left: 12px;
					top: 17px;
					width: 4px;
					height: 4px;
					border-radius: 50%;
					transform: translate(-50%, 0);
					background-color: #23a8f2;
					z-index: 2;
				}
			
			
				& >uni-text::after {
					content: '';
					position: absolute;
					left: 12px;
					top: 15px;
					width: 2px;
					height: 100%;
					transform: translate(-50%, 0);
					background-image: linear-gradient(#cfe1fc 50%, rgba(255,255,255,0) 0%); /* 35%设置虚线点x轴上的长度 */
					background-position: left; /* top配置上边框位置的虚线 */
					background-size: 1.5px 14px; /* 第一个参数设置虚线点的间距；第二个参数设置虚线点y轴上的长度 */
					background-repeat: repeat-y;
					z-index: 1;
				}
			}
			
		}
	}

	.font-icons {
		font-size: 12px;
		font-weight: bold;
		text-align: right;
	}

	.font-icons2 {
		font-size: 12px;
		text-align: right;
	}
</style>