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="clickEvent">
			<image src="../../static/images/index/index_cup.png" mode=""></image>
			<view class="text-m text-left">活动赛事{{hasLogin}}+{{userInfo.mobile}}</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,mapActions,mapGetters } from 'vuex'
	export default {
		data() {
			return {
				address:"",
				login:false
			};
		},
		computed:{
			...mapState(['userInfo']),
			...mapGetters(['hasLogin']),
			// hasLogin(){
			// 	return this.$store.getters.hasLogin
			// }
		},
		onLoad(parms) {
			
		},
		onUnload() {
			
		},
		methods: {
			...mapActions(['getUserInfo']),
			jumpPage(name){
				this.$Router.push({name:name})
				// this.$Router.pushTab('/pages/login/login')
			},
			clickEvent(){
				let that = this
				if(this.login)this.jumpPage('eventList');
				else {
					uni.showModal({
					    title: '提示',
					    content: '需要登录后才能查看,是否跳转去登录界面?',
					    success: function (res) {
					        if (res.confirm) {
								that.jumpPage('login');
					        } else if (res.cancel) {
					        }
					    }
					});
				}
			},
		}
	}
</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>