uni-events-helper-wx/pages/index/index.vue

<template>
	<view class="content">
		
		<view class="login-box flex_col flex_start">
			<image class="bg" src="../../static/images/index/index_bg.png" mode="aspectFit"></image>
			
			<view class="login-info flex_col" v-if="login">
				<text>{{userInfo.mobile||"-"}}</text>
				<text>您好!</text>
			</view>
			<view class="button-login " v-else @click="jumpPage('login')">前往登录</view>
		</view>
		
		<view class="item flex_row flex_start bg-white padding solid-bottom" @click="jumpPage('messageList')">
			<image src="../../static/images/index/index_bell.png" mode=""></image>
			<view class="text-m text-left">消息中心</view>
			<view class="bandage">99</view>
			<image src="../../static/images/index/arrow_right.png" mode=""></image>
		</view>
		
		<view class="item flex_row flex_start bg-white padding solid-bottom" @click="jumpPage('eventList')">
			<image src="../../static/images/index/index_cup.png" mode=""></image>
			<view class="text-m text-left">活动赛事</view>
			<image src="../../static/images/index/arrow_right.png" mode=""></image>
		</view>
		
		<view class="item flex_row flex_start bg-white padding solid-bottom" v-if="login" @click="login=!login">
			<image src="../../static/images/index/index_logout.png" mode=""></image>
			<view class="text-m text-left" >退出登录</view>
			<image src="../../static/images/index/arrow_right.png" mode=""></image>
		</view>
	</view>
</template>
<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				address:"",
				login:true
			};
		},
		computed:{
			...mapState(['userInfo']),
			getUserInfo(){
				return this.$store.state.userInfo.mobile
			}
		},
		onLoad(parms) {
			
		},
		onUnload() {
			
		},
		methods: {
			jumpPage(name){
				this.$Router.push({name:name})
				// this.$Router.pushTab('/pages/login/login')
			},
		}
	}
</script>

<style lang="less" scoped>
.content{
	.login-box{
		position: relative;
		width: 750rpx;
		height: 480rpx;
		> image ,.bg{
			width: 100%;height: 100%;
			position: absolute;
			z-index: 1;
		}
		.button-login{
			margin-top: 132rpx;
			color: #009874;
			z-index: 20;
			width: 240rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 48rpx;
			text-align: center;
			line-height: 96rpx;
			font-weight: 900;
			font-size: 36rpx;
			letter-spacing: -0.2rpx;
		}
		.login-info{
			margin-top: 132rpx;
			z-index: 20;
			font-size: 40rpx;
			color: #FFFFFF;
			font-weight: 900;
		}
	}
	.item{
		color: #333333;
		position: relative;
		> image:first-child{
			width: 52rpx;
			height: 52rpx;
			margin-right: 14rpx;
		}
		> image:last-child{
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			right: 20rpx;
		}
		.bandage{
			width: 34rpx;
			height: 34rpx;
			position: absolute;
			right: 60rpx;
			background: #EA5061;
			border-radius: 50%;
			font-size: 24rpx;
			color: white;
			text-align: center;
			line-height: 34rpx;
		}
	}
}
</style>