QTApp_800/pages/work/index.uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<view class="my-page">
			<!-- 轮播图 -->
			<swiper class="swiper-box my-swiper" :current="swiperDotIndex" :indicator-dots="true"
				@change="changeSwiper">
				<swiper-item v-for="item in data">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image class="my-image" :src="item.image" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>

			<!-- 标题栏 -->
			<view class=" uni-section">
				<view class=" uni-section-header">
					<view class=" uni-section-header__decoration line" />
					<view class=" uni-section-header__content">
						<text style="font-size:18px;color:#333" class="distraction">工作台</text>
					</view>
					<view class="name-label">
						<text>您好：{{currentName}}</text>
					</view>
					<view class="name-label">
						<text class="logout-text" @click="logout">[退出登录]</text>
					</view>
				</view>
				
			</view>
			
			<!-- 宫格 -->
			<view class="grid-body">
				<view class="grid uni-row">
					<view class="grid-item" v-for="(item: Item, index: number) in items" :key="index"
						@click="enterItem(item)">
						<!-- 您的网格项内容 -->
						<uni-icons class="my-icon" :type="item.iconType" size="40" :color="item.colorClass"></uni-icons>
						<text class="text">{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script lang="uts">
	import { state } from '@/store';
	import { getCurrentUserSync } from '@/utils/auth.uts'
	import { logout } from '@/api/login';
	
	type ImageItem = {
		image : string
	}
	type Item = {
		colorClass : string,
		iconType : string,
		path : string,
		text : string
	}
	export default {
		data() {
			let basic = [
				{ colorClass: 'blue', iconType: "person-filled", text: "用户管理", path: "/pages/mine/index" },
				// {colorClass: 'blue', iconType: "list", text: "任务管理",path:"/pages/work/task/TaskList" },
				{ colorClass: 'orange', iconType: "camera", text: "声像记录", path: "/pages/work/record/InfoList" },
				{ colorClass: 'orange', iconType: "list", text: "检验任务", path: "/pages/work/download/DownloadList" },
				// {colorClass: 'orange', iconType: "calendar", text: "检验记录",path:"/pages/work/report/InspectionList" },
				// {colorClass: 'orange', iconType: "gear-filled", text: "关键工序",path:"/pages/work/process/ProcessList" },
				// {colorClass: 'green', iconType: "folder-add-filled", text: "文档查阅",path:"" },
				// {colorClass: 'green', iconType: "cloud-upload", text: "数据上传",path:"" },
				//{colorClass: 'green', iconType: "wallet-filled", text: "日志管理",path:"/pages/work/log/logList" }
			] as Item[];
			let isAdmin = state.roles.includes('admin') ? true : false;
			let adminItem = { colorClass: 'green', iconType: "wallet-filled", text: "日志管理", path: "/pages/work/log/logList" } as Item;
			let items = isAdmin ? basic.concat(adminItem) : basic;
			
			return {
				items: items as Item[],
				current: 0 as number,
				swiperDotIndex: 0 as number,
				data: [{
					image: '/static/images/banner/banner01.png'
				},
				] as ImageItem[],
				currentName: getCurrentUserSync(),
			}
		},
		methods: {
			clickBannerItem(item : ImageItem) {
				console.info(item)
			},
			changeSwiper(e : UniSwiperChangeEvent) {
				this.current = e.detail.current
			},
			enterItem(e : Item) {
				if (e.path != null && e.path != "") {
					uni.navigateTo({
						url: e.path as string
					});
				} else {
					uni.showToast({
						title: '模块建设中~',
						icon: 'none'
					});
				}
			},
			logout() {
				console.log("退出")
				logout();
				uni.showToast({
					title: '退出成功',
					icon: 'success',
					mask: true
				});
				// 延迟1500毫秒后再跳转到登录页面，确保用户能看到完整的提示信息
				setTimeout(() => {
					uni.navigateTo({
					  url: '/pages/login'
					});
				}, 1500);
			}
			
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	.my-page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		/* #ifndef APP-ANDROID */
		min-height: 100%;
		/* #endif */
		height: 100%;
	}

	/* #ifndef APP-ANDROID */
	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */
	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}


	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 500px) {
		.my-image {
			width: 100%;
		}
	}

	.grid-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.grid-item {
		width: 32%;
		padding: 18px 15px;
		margin-bottom: 40rpx;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 20rpx rgba(24, 144, 255, 0.15);
		display: flex;
		flex-direction: column;

		.my-icon {
			text-align: center;
			border-radius: 20rpx;
		}
	}

	.purple {
		color: #6366f1;
	}

	.blue {
		color: #2563eb;
	}

	.orange {
		color: #d97706;
	}

	.green {
		color: #059669;
	}

	.yellow {
		color: yellow;
	}

	$uni-primary: #2979ff !default;

	.uni-section {
		background-color: #fff;

		.uni-section-header {
			position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			padding: 12px 10px;
			font-weight: normal;

			&__decoration {
				margin-right: 6px;
				background-color: $uni-primary;

				&.line {
					width: 4px;
					height: 12px;
					border-radius: 10px;
				}

				&.circle {
					width: 8px;
					height: 8px;
					border-top-right-radius: 50px;
					border-top-left-radius: 50px;
					border-bottom-left-radius: 50px;
					border-bottom-right-radius: 50px;
				}

				&.square {
					width: 8px;
					height: 8px;
				}
			}

			&__content {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				flex: 1;
				color: #333;

				.distraction {
					flex-direction: row;
					align-items: center;
				}

				&-sub {
					margin-top: 2px;
				}
			}
		}
	}

	.name-label {
		margin-right: 20rpx;
		margin-left: auto;
	}
	
	.logout-text {
		color: #2563eb;
	}
</style>