<template>
|
<view class="">
|
<view class="center">
|
<view class="logo" @click="bindLogin" :hover-class="!hasLogin ? 'logo-hover' : ''">
|
<image class="logo-img" :src="avatarUrl"></image>
|
<view class="logo-title">
|
<text class="user-name">{{hasLogin ? userName : '您未登录'}} \n ID: 123123</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"><i class="el-icon-mobile-phone"></i></text>
|
<text class="list-text">绑定手机号</text>
|
<text class="list-text mobile">{{"13112311231"}}</text>
|
</view>
|
<view class="center-list-item border-bottom" @click="toInvite">
|
<text class="list-icon"></text>
|
<text class="list-text">成为经销商</text>
|
<text class="navigat-arrow"></text>
|
</view>
|
<view class="center-list-item border-bottom">
|
<text class="list-icon"><i class="el-icon-s-marketing"></i></text>
|
<text class="list-text">推广数据统计</text>
|
<text class="navigat-arrow"></text>
|
</view>
|
</view>
|
<view class="center-list" v-show="false">
|
<view class="center-list-item border-bottom" v-show="hasLogin && hasPwd" @click="goto">
|
<text class="list-icon"></text>
|
<text class="list-text">修改密码</text>
|
<text class="navigat-arrow"></text>
|
</view>
|
<view v-if="hasLogin" class="center-list-item border-bottom" @click="toInvite">
|
<text class="list-icon"></text>
|
<text class="list-text">邀请好友</text>
|
<text class="navigat-arrow"></text>
|
</view>
|
<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 border-bottom">
|
<text class="list-icon"></text>
|
<text class="list-text">帮助与反馈</text>
|
<text class="navigat-arrow"></text>
|
</view>
|
<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>
|
</view>
|
</view>
|
|
<view class="btn-row">
|
<button v-if="hasLogin" class="primary" type="primary" :loading="logoutBtnLoading" @tap="bindLogout">退出账号</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState,
|
mapMutations
|
} from 'vuex'
|
import {
|
univerifyLogin
|
} from '@/common/univerify.js'
|
|
export default {
|
data() {
|
return {
|
avatarUrl: "../../static/img/logo.png",
|
inviteUrl: '',
|
logoutBtnLoading: false,
|
hasPwd: uni.getStorageSync('uni_id_has_pwd')
|
}
|
},
|
computed: {
|
...mapState(['hasLogin', 'forcedLogin', 'userName'])
|
},
|
|
methods: {
|
...mapMutations(['logout']),
|
bindLogin() {
|
if (!this.hasLogin) {
|
univerifyLogin().catch(err => {
|
if (err === false) return;
|
|
uni.navigateTo({
|
url: '../login/login',
|
});
|
})
|
}
|
},
|
bindLogout() {
|
this.logoutBtnLoading = true
|
this.logout();
|
uni.removeStorageSync('uni_id_token')
|
uni.removeStorageSync('username')
|
uni.removeStorageSync('uni_id_has_pwd')
|
|
if (this.forcedLogin) {
|
uni.reLaunch({
|
url: '../login/login',
|
});
|
}
|
|
this.logoutBtnLoading = false
|
},
|
toInvite() {
|
uni.navigateTo({
|
url: '../invite/invite'
|
})
|
},
|
goto() {
|
uni.navigateTo({
|
url: '../pwd/update-password'
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
@font-face {
|
font-family: texticons;
|
font-weight: normal;
|
font-style: normal;
|
src: url('../../static/uni.ttf') format('truetype');
|
}
|
|
page,
|
view {
|
display: flex;
|
}
|
|
page {
|
background-color: #f8f8f8;
|
}
|
|
button {
|
width: 100%;
|
}
|
|
.center {
|
flex-direction: column;
|
}
|
|
.logo {
|
width: 750rpx;
|
height: 240rpx;
|
padding: 20rpx;
|
box-sizing: border-box;
|
background-color: #fff;
|
flex-direction: row;
|
align-items: center;
|
}
|
|
.logo-hover {
|
opacity: 0.8;
|
}
|
|
.logo-img {
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 150rpx;
|
}
|
|
.logo-title {
|
height: 150rpx;
|
flex: 1;
|
align-items: center;
|
justify-content: space-between;
|
flex-direction: row;
|
margin-left: 20rpx;
|
}
|
|
.user-name {
|
height: 40rpx;
|
line-height: 40rpx;
|
color: #7b7b7b;
|
}
|
|
.go-login.navigat-arrow {
|
color: #FFFFFF;
|
}
|
|
.login-title {
|
height: 150rpx;
|
align-items: self-start;
|
justify-content: center;
|
flex-direction: column;
|
margin-left: 20rpx;
|
}
|
|
.center-list {
|
background-color: #FFFFFF;
|
margin-top: 20rpx;
|
width: 750rpx;
|
flex-direction: column;
|
}
|
|
.center-list-item {
|
height: 90rpx;
|
width: 750rpx;
|
box-sizing: border-box;
|
flex-direction: row;
|
padding: 0rpx 20rpx;
|
}
|
|
.border-bottom {
|
border-bottom-width: 1rpx;
|
border-color: #c8c7cc;
|
border-bottom-style: solid;
|
}
|
|
.list-icon {
|
width: 40rpx;
|
height: 90rpx;
|
line-height: 90rpx;
|
color: #0faeff;
|
text-align: center;
|
font-family: texticons;
|
margin-right: 20rpx;
|
}
|
|
.list-text {
|
height: 90rpx;
|
line-height: 90rpx;
|
color: #555;
|
flex: 1;
|
text-align: left;
|
}
|
|
.navigat-arrow {
|
height: 90rpx;
|
width: 40rpx;
|
line-height: 90rpx;
|
color: #555;
|
text-align: right;
|
font-family: texticons;
|
}
|
|
.mobile {
|
font-size: 13px;
|
text-align: right;
|
}
|
</style>
|
