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.
208 lines
4.1 KiB
208 lines
4.1 KiB
<template>
|
|
<view class="center">
|
|
<view class="logo" :hover-class="!hasLogin ? 'logo-hover' : ''">
|
|
<image class="logo-img" :src="hasLogin ? userInfo.avatarUrl :avatarUrl"></image>
|
|
<view class="logo-title">
|
|
<text class="uer-name">Hi，{{hasLogin ? userInfo.nickName : '您未登录'}}</text>
|
|
<text class="go-login navigat-arrow" v-if="!hasLogin"></text>
|
|
</view>
|
|
</view>
|
|
<view class="center-list">
|
|
<view class="center-list-item border-bottom">
|
|
<text class="list-icon"></text>
|
|
<text class="list-text">帐号管理</text>
|
|
<text class="navigat-arrow"></text>
|
|
</view>
|
|
<view class="center-list-item">
|
|
<text class="list-icon"></text>
|
|
<text class="list-text">新消息通知</text>
|
|
<text class="navigat-arrow"></text>
|
|
</view>
|
|
</view>
|
|
<view class="center-list">
|
|
<view class="center-list-item border-bottom">
|
|
<text class="list-icon"></text>
|
|
<text class="list-text">帮助与反馈</text>
|
|
<text class="navigat-arrow"></text>
|
|
</view>
|
|
<view class="center-list-item">
|
|
<text class="list-icon"></text>
|
|
<text class="list-text">服务条款及隐私</text>
|
|
<text class="navigat-arrow"></text>
|
|
</view>
|
|
</view>
|
|
<view class="center-list">
|
|
<view class="center-list-item">
|
|
<text class="list-icon"></text>
|
|
<text class="list-text">关于应用</text>
|
|
<text class="navigat-arrow"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters} from 'vuex'
|
|
export default {
|
|
data() {
|
|
return {
|
|
hasLogin: this.token ? true:false,
|
|
avatarUrl: "../../static/logo.png",
|
|
userInfo: {},
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'token'
|
|
])
|
|
},
|
|
onLoad() {
|
|
this.getUserInfo()
|
|
},
|
|
methods: {
|
|
getUserInfo() {
|
|
uni.getUserInfo({
|
|
provider: 'weixin',
|
|
success: (result) => {
|
|
this.hasLogin = true;
|
|
this.userInfo = result.userInfo;
|
|
},
|
|
fail: (error) => {
|
|
console.log('getUserInfo fail', error);
|
|
let content = error.errMsg;
|
|
if (~content.indexOf('uni.login')) {
|
|
content = '请在登录页面完成登录操作';
|
|
}
|
|
uni.showModal({
|
|
title: '获取用户信息失败',
|
|
content: '错误原因' + content,
|
|
showCancel: false
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@font-face {
|
|
font-family: texticons;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
|
|
}
|
|
|
|
page,
|
|
view {
|
|
display: flex;
|
|
}
|
|
|
|
page {
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.center {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.logo {
|
|
width: 750upx;
|
|
height: 240upx;
|
|
padding: 20upx;
|
|
box-sizing: border-box;
|
|
background-color: #4cd964;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo-hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.logo-img {
|
|
width: 150upx;
|
|
height: 150upx;
|
|
border-radius: 150upx;
|
|
}
|
|
|
|
.logo-title {
|
|
height: 150upx;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
margin-left: 20upx;
|
|
}
|
|
|
|
.uer-name {
|
|
height: 60upx;
|
|
line-height: 60upx;
|
|
font-size: 38upx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.go-login.navigat-arrow {
|
|
font-size: 38upx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.login-title {
|
|
height: 150upx;
|
|
align-items: self-start;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
margin-left: 20upx;
|
|
}
|
|
|
|
.center-list {
|
|
background-color: #FFFFFF;
|
|
margin-top: 20upx;
|
|
width: 750upx;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.center-list-item {
|
|
height: 90upx;
|
|
width: 750upx;
|
|
box-sizing: border-box;
|
|
flex-direction: row;
|
|
padding: 0upx 20upx;
|
|
}
|
|
|
|
.border-bottom {
|
|
border-bottom-width: 1upx;
|
|
border-color: #c8c7cc;
|
|
border-bottom-style: solid;
|
|
}
|
|
|
|
.list-icon {
|
|
width: 40upx;
|
|
height: 90upx;
|
|
line-height: 90upx;
|
|
font-size: 34upx;
|
|
color: #4cd964;
|
|
text-align: center;
|
|
font-family: texticons;
|
|
margin-right: 20upx;
|
|
}
|
|
|
|
.list-text {
|
|
height: 90upx;
|
|
line-height: 90upx;
|
|
font-size: 34upx;
|
|
color: #555;
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.navigat-arrow {
|
|
height: 90upx;
|
|
width: 40upx;
|
|
line-height: 90upx;
|
|
font-size: 34upx;
|
|
color: #555;
|
|
text-align: right;
|
|
font-family: texticons;
|
|
}
|
|
</style>
|