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="hasLogin">
				<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" v-if="unReadNum">{{unReadNum}}</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">活动赛事</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="hasLogin" @click="logout">
			<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'
	import {msgNum} from "../../nxTemp/apis/userAPI.js"
	export default {
		data() {
			return {
				address:"",
				login:false,
				unReadNum:""
			};
		},
		computed:{
			...mapState(['userInfo']),
			...mapGetters(['hasLogin']),
		},
		onLoad(opt) {
			this.updateMsgNum()
		},
		onUnload() {
			
		},
		methods: {
			...mapActions(['getUserInfo','logoutUser']),
			jumpPage(name){
				this.$Router.push({name:name})
			},
			updateMsgNum(){
				console.log(123);
				msgNum(this.postData).then(res => {
					this.unReadNum = res
				}).catch(e=>{
					this.$tools.showNone(e.errMsg)
				})
			},
			async clickEvent(){
				if(this.hasLogin)this.jumpPage('eventList');
				else await this.$tools.showModal("该功能需要登录后才能查看,是否跳转去登录界面?",()=>{this.jumpPage('login')})
			},
			async logout(){
				await this.$tools.showModal("真的要退出登录?",this.logoutUser)
			},
		}
	}
</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>