special/pages/tabbar/application/application.vue

<template>
	<view class="container" :style="{height:computeHeight}">
		<up-navbar class="u-navbar-box" title="首页" placeholder bgColor="transparent" leftIcon=''
			:title-style="{fontWeight:'bold'}">
		</up-navbar>
		<!-- header -->
		<view class="flex-row justify-between"
			style="width: 676rpx; height: 342rpx;padding-left: 48rpx;padding-right: 26rpx;">
			<view class="flex-column font-xxl" style="margin-top: 46rpx;">
				<text class="text-black3 font-weight-bolder">特困户系统</text>
				<view class="index-tag flex-row align-center justify-center">
					<text class="font text-white font-weight-bolder" style="margin-right: 12rpx;">便民服务</text>
				</view>
			</view>
			<view style="width: 284rpx;height: 342rpx;">
				<image style="width: 100%;height: 100%;" src="@/static/images/index-computer.png" mode="aspectFill">
				</image>
			</view>
		</view>
		<!--入口  -->
		<view class="px-32" style="margin-top: -60rpx;" @click="handleEnterClick">
			<view class="position-relative flex-row align-center justify-between"
				style="width: 100%;height: 148rpx;border-radius: 20rpx;background-color: rgba(228, 240, 255, 0.8);">
				<image style="width: 100%;height: 100%;" src="@/static/images/index-center-bg.png" mode="aspectFill">
				</image>
				<view class="position-absolute top-0 left-0 flex-row align-center justify-between"
					style="height: 100%;width: 100%;">
					<view class="flex-row align-center" style="margin-left: 28rpx;">
						<image style="width: 66rpx;height: 66rpx;" src="@/static/images/index-enter-logo.png"
							mode="aspectFill"></image>
						<view class="flex-column ml-24">
							<text class="font-md" style="color: #4A90C6;">{{computeHandleDesc}}</text>
							<view class="bg-white flex-row align-center justify-center"
								style="width: 208rpx;height: 40rpx;border-radius: 20rpx;margin-top: 18rpx;">
								<text style="color: #4A90C6;font-size: 22rpx;">一键快速处理</text>
							</view>
						</view>
					</view>
					<image src="/static/images/index-enter-arrow.png"
						style="width: 32rpx;height: 32rpx;margin-right: 52rpx;" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfoUrl,

		getMsgCountUrl
	} from '@/common/config/api.js'
	export default {
		data() {
			return {

			}
		},
		onLoad() {
			// 获取用户信息
			this.getUserInfo();
		},
		onShow() {
			this.getMsgCount();
		},
		computed: {
			computeHeight() {
				return uni.$u.sys().windowHeight + 'px'
			},
			computeHandleDesc() {
				// 民政所
				if (this.vuex_user.roles.includes('village')) {
					return '护理申请'
				}
			}
		},
		methods: {
			getUserInfo() {
				getUserInfoUrl()
					.then(res => {
						console.log('用户信息', res);
						let user = {
							avatar: this.avatarImg,
							nickName: res.user.nickName,
							phonenumber: res.user.phonenumber,
							roles: res.roles
						}
						this.$u.vuex('vuex_user', user);
					})
					.catch(err => {
						console.log('err', err);
					})
			},
			// 获取未读消息数量
			getMsgCount() {
				console.log(this.vuex_user.id);
				getMsgCountUrl({
						params: {
							userId: this.vuex_user.id
						}
					})
					.then(res => {
						console.log('未读消息数', res);
						const count = parseInt(res);
						if (count > 0) {
							uni.setTabBarBadge({
								index: 1,
								text: count > 99 ? '99+' : res
							})
						} else {
							uni.removeTabBarBadge({
								index: 1
							})
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			// 点击预约
			handleEnterClick() {
				if (this.vuex_user.roles.includes('village')) {
					return uni.navigateTo({
						url: '/pages/subpack/pages/apply/apply'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-navbar-box {
		background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
	}


	.container {
		// background-image: url('@/static/images/index-bg.png');
		// background-size: cover;
		// background-position: center;

		.index-tag {
			width: 164rpx;
			height: 58rpx;
			margin-top: 38rpx;
			background-image: url('@/static/images/index-tag-bg.png');
			background-size: cover;
			background-position: center;
		}
	}
</style>