ElectronClient/tax-guidance/pages/index/index.vue

<template>
	<view class="page-container tn-gradient-bg__cool-5">
		<cheader></cheader>
		<div class="index-body">
			<div class="body-title">
				<span class="title-mian">智能导税</span>
				<!-- <span class="title-mian">紫云纳税服务综合管理系统</span>
				<span class="title-child">智能导税</span> -->
			</div>
			<div class="body-content">
				<div class="emp-content">
					<image :src="userInfo.image" class="emp-image"></image>
					<p class="emp-name emp-p">{{ userInfo.realName || '' }}</p>
					<p class="emp-id emp-p">工号:{{ userInfo.id || '' }}</p>
					<tn-button width="180px" height="50px" @click="loginOutAction()">退 出</tn-button>
				</div>
				<div style="width: 2vw;"></div>
				<div class="btn-content">
					<div class="btn-row1">
						<div class="row1-item1 col-center" @click="goToQueue()">
							<uni-icons type="compose" size="60" color="#fff"></uni-icons>
							<p class="btn-p">导税取票</p>
						</div>
						<div class="row1-item2 col-center" @click="goToTicket()">
							<uni-icons type="list" size="60" color="#fff"></uni-icons>
							<p class="btn-p">票号管理</p>
						</div>
						<div class="row1-item3 col-center" @click="goToManager()">
							<uni-icons type="staff-filled" size="60" color="#fff"></uni-icons>
							<p class="btn-p">网格员</p>
						</div>
					</div>
					<div style="height: 2vh;"></div>
					<div class="btn-row2">
						<div class="row2-item1">
							<div class="row2-item1-top row-center" @click="goToHallInfo()">
								<uni-icons type="info" size="60" color="#fff"></uni-icons>
								<p class="btn-p">大厅流量</p>
							</div>
							<div style="height: 2vh;"></div>
							<div class="row2-item1-bottom row-center" @click="goToHallManagment()">
								<uni-icons type="settings-filled" size="60" color="#fff"></uni-icons>
								<p class="btn-p">大厅控制</p>
							</div>
						</div>
						<div class="row2-item2">
							<div class="row2-item2-left col-center">
								<uni-icons type="home-filled" size="60" color="#fff"></uni-icons>
								<p class="btn-p">预留功能</p>
							</div>
							<div style="width: 2vh;"></div>
							<div class="row2-item2-center col-center" @click="goToMultiInOne()">
								<uni-icons type="auth-filled" size="60" color="#fff"></uni-icons>
								<p class="btn-p">预留功能</p>
							</div>
							<div style="width: 2vh;"></div>
							<div class="row2-item2-right col-center" >
								<uni-icons type="settings-filled" size="60" color="#fff"></uni-icons>
								<p class="btn-p">预留功能</p>
							</div>
							<!-- <div v-for="item in 3" style="flex: 1;"></div> -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script setup>
	import cheader from '@/components/header.vue'
	import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
	import {
		onBackPress,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'

	const userInfo = ref({
		realName: '',
		id: '',
		image: ''
	})

	onBackPress(() => {
		return true
	})

	onLoad(() => {
		try {
			const storageData = uni.getStorageSync('userInfo')
			if (storageData) {
				const parsedData = JSON.parse(storageData)
				userInfo.value = {
					realName: parsedData.realName || '',
					id: parsedData.id || '',
					image: parsedData.image || '/static/header_no.png'
				}
				console.log('用户信息:', userInfo.value)
			}
		} catch (error) {
			console.error('获取用户信息失败:', error)
		}
	})

	const goToGuidance = () => {
		uni.navigateTo({
			url: '/pages/mod/guidance?isFromTicket=false'
		})
	}

	const goToDailyEntry = () => {
		uni.navigateTo({
			url: '/pages/table/dailyEntry'
		})
	}

	const goToAppointment = () => {
		uni.navigateTo({
			url: '/pages/table/appointment'
		})
	}

	const goToTicket = () => {
		uni.navigateTo({
			url: '/pages/table/ticket'
		})
	}

	const goToMultiInOne = () => {
		uni.navigateTo({
			url: '/pages/mod/multiInOne'
		})
	}

	const goToPushMessage = () => {
		uni.navigateTo({
			url: '/pages/mod/pushMessage'
		})
	}

	const goToQueue = () => {
		uni.navigateTo({
			url: '/pages/queue/index'
		})
	}

	const goToManager = () => {
		uni.navigateTo({
			url: '/pages/mod/manager'
		})
	}

	const goToHallManagment = () => {
		uni.navigateTo({
			url: '/pages/mod/hallManagment'
		})
	}

	const goToHallInfo = () => {
		uni.navigateTo({
			url: '/pages/mod/hallInfo'
		})
	}

	const loginOutAction = () => {
		uni.showModal({
			title: '登出',
			content: '是否退出登录，并返回到登录界面？',
			success: (res) => {
				if (res.confirm) {
					//清除缓存
					uni.clearStorageSync()
					// 然后正常返回
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				// 如果用户点击取消，则什么都不做，停留在当前页面
			}
		})
	}
</script>

<style lang="scss">
	.index-body {
		height: 90vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.body-title {
			height: 6vh;
			margin-bottom: 2vh;

			.title-mian {
				background: linear-gradient(to bottom, #DEDEDE 10%, #fff 90%);
				/* 2. 将背景裁剪成文字形状 (需要-webkit-前缀) */
				-webkit-background-clip: text;
				background-clip: text;
				/* 3. 将文字颜色设为透明，显示出渐变背景 */
				color: transparent;
				/* 为了效果明显，可以设置一些字体样式 */
				font-size: 36px;
			}

			.title-child {
				background: linear-gradient(to bottom, #483D8B 10%, #8A2BE2 90%);
				/* 2. 将背景裁剪成文字形状 (需要-webkit-前缀) */
				-webkit-background-clip: text;
				background-clip: text;
				/* 3. 将文字颜色设为透明，显示出渐变背景 */
				color: transparent;
				/* 为了效果明显，可以设置一些字体样式 */
				font-size: 36px;
			}
		}

		.body-content {
			display: flex;
			flex-direction: row;

			.emp-content {
				height: 60vh;
				width: 20vw;
				background-color: #ffffff50;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 30px;

				.emp-image {
					// height: auto;
					max-width: 12vw;
					max-width: 80%;
					object-fit: contain;
					/* 保持比例 */
					height: 30vh;
					padding: 4px;
					border: 1px solid #ddd;
				}

				.emp-p {
					color: #fff;
					font-size: 20px;
					font-weight: 800;
				}

				.emp-name {
					margin-top: 20px;
					margin-bottom: 5px;
				}

				.emp-id {
					margin-bottom: 20px;
				}
			}

			.btn-content {

				.btn-row1 {
					height: 22vh;
					width: 60vw;
					display: grid;
					grid-template-columns: repeat(3, 1fr);

					.row1-item1 {
						background: #cc3333;
						margin-right: 2vh;
					}

					.row1-item2 {
						background-color: #cc3366;
						margin-right: 2vh;
					}

					.row1-item3 {
						background-color: #cc3399;
					}
				}

				.btn-row2 {
					height: 36vh;
					width: 60vw;
					display: grid;
					grid-template-columns: repeat(3, 1fr);

					.row2-item1 {
						margin-right: 2vh;
						display: flex;
						flex-direction: column;

						.row2-item1-top {
							flex: 1;
							background-color: #99ccff;
						}

						.row2-item1-bottom {
							flex: 1;
							background-color: #9999ff;
						}
					}

					.row2-item2 {
						grid-column: span 2;
						display: flex;
						flex-direction: row;

						.row2-item2-left {
							flex: 1;
							background-color: #ffcc99;
						}

						.row2-item2-center {
							flex: 1;
							background-color: #ffcccc;
						}

						.row2-item2-right {
							flex: 1;
							background-color: #ffccff;
						}
					}
				}
			}
		}
	}

	.col-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.row-center {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.btn-p {
		font-size: 22px;
		font-weight: 800;
		color: #fff;
		margin: 8px;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	}
</style>