uni-events-helper-wx
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

143 lines
3.4 KiB

<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>