253 lines
6.6 KiB
Vue
253 lines
6.6 KiB
Vue
<template>
|
|
<view>
|
|
<view class="user-info">
|
|
<block v-if="isAuth">
|
|
<view class="user-info-left">
|
|
<u-avatar
|
|
shape="square"
|
|
class="active"
|
|
size="120rpx"
|
|
:default-url="require('@/static/imgs/default-active.png')"
|
|
:src="avatar"
|
|
mode="aspectFill"
|
|
@click="onNav('UserInfo')"
|
|
></u-avatar>
|
|
<view class="nickname nowrap" @click="onNav('UserInfo')">{{nickname}}</view>
|
|
<view class="tags">
|
|
<view class="tags-item" v-if="certification"><image class="tags-icon" src="@/static/icons/Identity_icon.png" mode="widthFix"></image>实名认证</view>
|
|
<view class="tags-item">{{identity.name}}</view>
|
|
</view>
|
|
<view class="state">
|
|
<view class="state-tag"><u-icon class="state-icon" size="28rpx" color="#555" name="plus"></u-icon>状态</view>
|
|
</view>
|
|
</view>
|
|
<view class="user-info-right" @click="onUserCode">
|
|
<image class="user-qrcode" src="@/static/icons/qrcode.png" mode="widthFix"></image>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="user-info-left">
|
|
<u-avatar
|
|
shape="square"
|
|
class="active"
|
|
size="120rpx"
|
|
:default-url="require('@/static/imgs/default-active.png')"
|
|
mode="aspectFill"
|
|
@click="onNav('UserInfo')"
|
|
></u-avatar>
|
|
<view class="nickname nowrap" @click="onNav('UserInfo')">登录</view>
|
|
<view class="tags">暂未登录</view>
|
|
</view>
|
|
<view class="user-info-right">
|
|
<image class="user-qrcode" src="@/static/icons/qrcode.png" mode="widthFix"></image>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view class="border-solid-empty"></view>
|
|
<view class="nav-flex" @click="onNav('AccountIntegral')">
|
|
<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_00.png"></image>火力值</view>
|
|
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
|
</view>
|
|
<view class="nav-flex" @click="onNav('AccountCash')">
|
|
<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_01.png"></image>业绩账户</view>
|
|
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
|
</view>
|
|
<view class="border-solid-empty"></view>
|
|
<view class="nav-flex" @click="onNav('UserTeam')">
|
|
<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_02.png"></image>我的客户</view>
|
|
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
|
</view>
|
|
<view class="nav-flex" @click="onNav('AccountBonus')">
|
|
<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_04.png"></image>奖金账户</view>
|
|
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
|
</view>
|
|
<view class="nav-flex" @click="onNav('UserCertification')">
|
|
<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_03.png"></image>实名认证</view>
|
|
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
|
</view>
|
|
<view class="border-solid-empty"></view>
|
|
<view class="nav-flex" @click="onNav('UserSet')">
|
|
<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_05.png"></image>设置</view>
|
|
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { info } from '@/apis/interfaces/user.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
isAuth : false,
|
|
nickname : '',
|
|
identity : '',
|
|
avatar : '',
|
|
certification : ''
|
|
};
|
|
},
|
|
onShow() {
|
|
this.isAuth = this.$store.getters.getToken != ''
|
|
if(this.$store.getters.getToken != '') this.getUserInfo()
|
|
},
|
|
methods: {
|
|
// 获取用户信息
|
|
getUserInfo(){
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
info().then(res => {
|
|
let { nickname, identity, avatar, certification } = res
|
|
this.nickname = nickname
|
|
this.identity = identity
|
|
this.avatar = avatar
|
|
this.certification = certification
|
|
uni.hideLoading()
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 导航
|
|
onNav(name){
|
|
this.$Router.push({name})
|
|
},
|
|
// 分享码
|
|
onUserCode(){
|
|
if(this.identity.order > 1){
|
|
this.$Router.push({ name: 'UserCode' })
|
|
return
|
|
}
|
|
uni.showModal({
|
|
title : '提示',
|
|
content : '您当前非业务员身份无法分享',
|
|
cancelColor : '确定',
|
|
cancelColor : '#555',
|
|
confirmText : '立即开通',
|
|
confirmColor: '#446EFE',
|
|
success : res => {
|
|
if(res.confirm){
|
|
this.$Router.pushTab({name: 'Work'})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.nav-flex{
|
|
height: 120rpx;
|
|
padding: 0 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 34rpx;
|
|
.nav-icon{
|
|
display: flex;
|
|
align-items: center;
|
|
.nav-icon-src{
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
vertical-align: middle;
|
|
margin-right: $margin;
|
|
margin-top: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
// 用户信息
|
|
.user-info{
|
|
padding: 50rpx $padding;
|
|
display: flex;
|
|
&-left{
|
|
padding-left: 140rpx;
|
|
position: relative;
|
|
width: calc(100% - 150rpx);
|
|
.active{
|
|
position: absolute;
|
|
left: 0;
|
|
top:0;
|
|
border-radius: $radius;
|
|
overflow: hidden;
|
|
}
|
|
.nickname{
|
|
font-size: 42rpx;
|
|
line-height: 50rpx;
|
|
font-weight: bold;
|
|
}
|
|
.tags{
|
|
padding-top: 20rpx;
|
|
.tags-item{
|
|
@extend .border;
|
|
display: inline-block;
|
|
border-radius: 20rpx;
|
|
padding: 0 15rpx;
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
height: 40rpx;
|
|
color: #555;
|
|
font-weight: 400;
|
|
margin-left: $margin - 10;
|
|
&::after{
|
|
border-radius: 20rpx;
|
|
}
|
|
&:first-child{
|
|
margin-left: 0;
|
|
}
|
|
.tags-icon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
vertical-align: middle;
|
|
margin-right: 5rpx;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
.state{
|
|
padding-top: 20rpx;
|
|
.state-tag{
|
|
@extend .border;
|
|
display: inline-block;
|
|
border-radius: 30rpx;
|
|
padding: 0 20rpx;
|
|
font-size: 30rpx;
|
|
line-height: 50rpx;
|
|
height: 50rpx;
|
|
color: #555;
|
|
font-weight: 400;
|
|
&::after{
|
|
border-radius: 50rpx;
|
|
}
|
|
.state-icon{
|
|
display: inline-block;
|
|
margin-right: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-right{
|
|
width: 150rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
position: relative;
|
|
text-align: center;
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 1rpx;
|
|
height: 100%;
|
|
background-image: linear-gradient(90deg, $border-color 50%, transparent 50%);
|
|
}
|
|
.user-qrcode{
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
</style>
|