ldb-safe-hh/pages/index/index.vue

<template>
	<view class="container">
		<title-status bg-color="transparent" :has-height="false" />
		<view class="head-layout">
			<template v-if="isLogin">
				<view class="user-layout">
					<u-image :src="userInfo.avatar || null" width="140rpx" height="140rpx" shape="circle" bgColor="#D9D9D9" loadingIcon="" lazy-load />
					<view class="user-name">{{ userInfo.name }}</view>
					<u-icon name="/static/images/index-logout.png" width="56rpx" height="56rpx" @click="logoutClick"></u-icon>
				</view>
			</template>
			<template v-else>
				<u-button text="去登录" style="margin-top: 150rpx;width: 220rpx;height: 80rpx;color: #306DF6;font-weight: 700;font-size: 40rpx;" :hairline="false" shape="circle" @click="$navigate.navigateToPage($config.route.login)"></u-button>
			</template>
			<view style="flex: auto;"></view>
			<view class="head-bottom-layout">
				<template v-if="isLogin">
					<view style="margin-left: 30rpx;">单位：{{ userInfo.username || '' }}</view>
					<view style="margin-left: 30rpx;margin-top: 2rpx;">部门：{{ userInfo.deptName || '' }}</view>
				</template>
				<template v-else>
					<view style="align-self: center;">暂无人员信息，请尽快登录~</view>
				</template>
			</view>
		</view>
		<u-image src="/static/images/index-func1.png" mode="aspectFit" width="620rpx" height="340rpx" class="fun-img" loadingIcon="" @click="$navigate.navigateToPage($config.route.fillin, null, true)" />
		<u-image src="/static/images/index-func2.png" mode="aspectFit" width="620rpx" height="340rpx" class="fun-img" loadingIcon="" @click="$navigate.navigateToPage($config.route.myFillin, null, true)" />
	</view>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import TitleStatus from '@/components/title-status/title-status'
	
	export default {
		components: {
			TitleStatus
		},
		data() {
			return {
				
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo'])
		},
		onLoad() {},
		methods: {
			...mapActions(['goOut']),
			logoutClick() {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定要退出吗?',
					success: function (res) {
						if (res.confirm) {
							that.goOut()
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		.head-layout {
			width: 100%;
			height: 400rpx;
			background-image: url('@/static/images/index-head-bg.jpg');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			/deep/ .u-button__text {
				font-size: 36rpx !important;
			}
			.user-layout {
				margin: 120rpx 0 0 50rpx;
				display: flex;
				align-items: center;
				.user-name {
					margin: 0 16rpx 0 32rpx;
					font-weight: 500;
					font-size: 40rpx;
					color: #fff;
				}
			}
			.head-bottom-layout {
				align-self: center;
				width: 640rpx;
				height: 112rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #fff;
			}
		}
		.fun-img {
			margin-top: 36rpx;
		}
	}
</style>