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.
158 lines
3.7 KiB
158 lines
3.7 KiB
<template>
|
|
<view class="nine-content-002">
|
|
<view class="user-header">
|
|
<view class="user-header-top">
|
|
<view class="user-header-top-info">
|
|
<view class="user-header-top-info-logo">
|
|
<image class="user-header-top-info-logo-image" :src="userInfo.avatar || '/static/image/user/yy.png'"></image>
|
|
</view>
|
|
<view class="user-header-top-info-name">
|
|
<view v-if="userInfo.userId" class="user-header-top-info-name-username">
|
|
{{userInfo.userName}}
|
|
</view>
|
|
<view v-else class="user-header-top-info-name-username"
|
|
@click="openUrl('/pages/user/login')">未登录</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="userInfo.userId" class="user-header-top-message">
|
|
<image class="user-header-top-message-image" src="/static/image/user/message.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="user-header-recommend">
|
|
<span v-if="userInfo.userId">昵称：{{userInfo.nickName}}</span>
|
|
<span v-else>昵称：无</span>
|
|
<span class="pr10">普通用户</span>
|
|
</view>
|
|
<view class="user-header-member">
|
|
<view v-if="userInfo.userId" class="user-header-member-rank">
|
|
等级：{{array[1]}}
|
|
</view>
|
|
<view v-else class="user-header-member-rank">
|
|
等级：无
|
|
</view>
|
|
<view class="user-header-member-note">
|
|
会员等级越高权益越高
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="nine-nav-001 pa5">
|
|
<view class="nine-nav-001-item mt10" @click="openUrl('/pages/setting/setting')">
|
|
<view class="nine-nav-001-item-left">
|
|
<image class="image35" mode="scaleToFill" src="/static/image/user/uset.png"></image>
|
|
<text class="nine-nav-001-item-left-text">设置</text>
|
|
</view>
|
|
<view class="nine-nav-001-item-right">
|
|
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import store from '@/store'
|
|
import storage from '@/utils/storage'
|
|
import constant from '@/utils/constant'
|
|
import { getToken } from '@/utils/token'
|
|
export default {
|
|
data() {
|
|
return {
|
|
array: [
|
|
"普通会员",
|
|
"高级会员",
|
|
"超级会员"
|
|
],
|
|
|
|
userInfo: {},
|
|
|
|
}
|
|
},
|
|
onLoad(options){
|
|
this.userInfo = store.state.user.userInfo;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.user{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background-color: #f1f1f1;
|
|
}
|
|
.user-header {
|
|
width: 100%;
|
|
background-color: #00aaff;
|
|
position: relative;
|
|
}
|
|
.user-header-top {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
.user-header-top-info{
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 20rpx 40rpx 10rpx 40rpx;
|
|
}
|
|
.user-header-top-info-logo{
|
|
}
|
|
.user-header-top-info-logo-image{
|
|
width: 165rpx;
|
|
height: 165rpx;
|
|
border-radius: 50%;
|
|
will-change: transform;
|
|
}
|
|
.user-header-top-info-name{
|
|
padding: 20rpx;
|
|
}
|
|
.user-header-top-info-name-username{
|
|
font-size: 20px;
|
|
}
|
|
.user-header-top-message{
|
|
}
|
|
.user-header-top-message-image{
|
|
padding-right: 40rpx;
|
|
padding-top: 40rpx;
|
|
width: 45rpx;
|
|
height: 55rpx;
|
|
}
|
|
.user-header-recommend{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 10rpx 30rpx 70rpx 40rpx;
|
|
font-size: 12px;
|
|
}
|
|
.user-header-member{
|
|
position: absolute;
|
|
height: 40rpx;
|
|
bottom: 0rpx;
|
|
left: 40rpx;
|
|
right: 40rpx;
|
|
padding: 10rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-color: #474747;
|
|
border-top-left-radius: 10rpx;
|
|
border-top-right-radius: 10rpx;
|
|
}
|
|
.user-header-member-rank{
|
|
padding: 10rpx 10rpx;
|
|
font-size: 10px;
|
|
color: #ffaa00;
|
|
}
|
|
.user-header-member-note{
|
|
font-size: 10px;
|
|
padding: 8rpx 20rpx;
|
|
color: #919191;
|
|
background-color: #2e2e2e;
|
|
border-radius: 80rpx;
|
|
}
|
|
</style>
|