477 lines
12 KiB
Vue
477 lines
12 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="nav-flex" @click="onParent">
|
|
<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_07.png"></image>推荐人</view>
|
|
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
|
</view>
|
|
<view class="nav-flex" @click="onNav('WeChat')">
|
|
<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_06.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>
|
|
<!-- 绑定分享关系 -->
|
|
<u-modal
|
|
:show="showBind"
|
|
confirmColor="#446EFE"
|
|
:showCancelButton="true"
|
|
:confirmText="isInvitation ? '校验邀请码': '绑定关系'"
|
|
@cancel="()=> {
|
|
this.showBind = false
|
|
this.isInvitation = true
|
|
this.invitation = ''
|
|
}"
|
|
@confirm="onBind"
|
|
>
|
|
<slot>
|
|
<view class="bind-view" v-if="isInvitation">
|
|
<view class="bind-title">绑定推荐人</view>
|
|
<view class="bind-subtitle">选择通过那种方式绑定推荐人</view>
|
|
<view class="bind-type">
|
|
<u-radio-group
|
|
class="bind-type-radios"
|
|
v-model="bindTypeVal"
|
|
placement="row"
|
|
>
|
|
<u-radio
|
|
:customStyle="{marginLeft: '4px', marginRight: '4px'}"
|
|
v-for="(item, index) in bindTypeArr"
|
|
:key="index"
|
|
:label="item.name"
|
|
:name="item.value"
|
|
/>
|
|
</u-radio-group>
|
|
</view>
|
|
<view class="bind-input">
|
|
<input type="text" v-model="invitation" :placeholder="bindTypeVal == 'mobile'? '输入推荐人手机号' : '输入推荐人邀请码'">
|
|
</view>
|
|
</view>
|
|
<view class="bind-user" v-else>
|
|
<view class="bind-title">推荐人</view>
|
|
<view class="bind-subtitle">请确认绑定推荐人关系用户信息</view>
|
|
<view class="bind-acitve">
|
|
<image :src="invitationUser.avatar || require('@/static/imgs/default-active.png')" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="bind-nickname">{{invitationUser.nickname}}</view>
|
|
<view class="bind-username">{{invitationUser.username}}</view>
|
|
</view>
|
|
</slot>
|
|
</u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { info,relationsVerify, relationsBind } from '@/apis/interfaces/user.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
isAuth : false,
|
|
nickname : '',
|
|
identity : '',
|
|
avatar : '',
|
|
certification : '',
|
|
// 绑定关系
|
|
bindTypeArr : [
|
|
{ name: '手机号', value: 'mobile'},
|
|
{ name: '邀请码', value: 'verify'},
|
|
],
|
|
bindTypeVal : 'mobile',
|
|
showBind : false,
|
|
isInvitation : true,
|
|
parent : '',
|
|
invitationUser : {
|
|
avatar : '',
|
|
nickname: '',
|
|
username: ''
|
|
},
|
|
invitation : '',
|
|
};
|
|
},
|
|
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, parent } = res
|
|
this.nickname = nickname
|
|
this.identity = identity
|
|
this.avatar = avatar
|
|
this.certification = certification
|
|
this.parent = parent
|
|
uni.hideLoading()
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 导航
|
|
onNav(name){
|
|
this.$Router.push({name})
|
|
},
|
|
// 推荐关系
|
|
onParent(){
|
|
if(this.parent == ''){
|
|
this.showBind = true
|
|
return
|
|
}
|
|
uni.showModal({
|
|
title : '我的推荐人',
|
|
content : this.parent.nickname,
|
|
confirmText : '关闭',
|
|
cancelText : '联系TA',
|
|
success : modalRes => {
|
|
if(modalRes.cancel){
|
|
uni.makePhoneCall({
|
|
phoneNumber: this.parent.username
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 绑定邀请码
|
|
onBind(){
|
|
// 检验邀请码
|
|
if(this.isInvitation){
|
|
if(this.invitation === ''){
|
|
uni.showToast({
|
|
title: '请输入邀请码',
|
|
icon : 'none'
|
|
})
|
|
return
|
|
}
|
|
relationsVerify(this.invitation, this.bindTypeVal).then(res => {
|
|
this.invitationUser = res
|
|
this.isInvitation = false
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
return
|
|
}
|
|
// 绑定关系
|
|
relationsBind(this.invitation, this.bindTypeVal).then(res => {
|
|
this.showBind = false
|
|
uni.showModal({
|
|
title : '提示',
|
|
content : '关系绑定成功',
|
|
showCancel : false,
|
|
success : res => {
|
|
this.getUserInfo()
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 分享码
|
|
onUserCode(){
|
|
if(this.identity.order > 1){
|
|
uni.showActionSheet({
|
|
itemList: ['客户邀请码', '业务员邀请码'],
|
|
success: res => {
|
|
switch (res.tapIndex){
|
|
case 0:
|
|
this.$Router.push({ name: 'UserCode' })
|
|
break;
|
|
case 1:
|
|
this.$Router.push({ name: 'SalesmanCode' })
|
|
break;
|
|
}
|
|
}
|
|
})
|
|
//
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
// 邀请码
|
|
.bind-view{
|
|
padding: 15rpx 30rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
.bind-title{
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
.bind-type{
|
|
margin-top: 30rpx;
|
|
.bind-type-radios{
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.bind-subtitle{
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: gray;
|
|
padding-top: 15rpx;
|
|
text-align: center;
|
|
}
|
|
.bind-input{
|
|
padding-top: 30rpx;
|
|
input{
|
|
background: #f8f8f8;
|
|
width: 100%;
|
|
height: 80rpx;
|
|
padding: 0 30rpx;
|
|
border-radius: 40rpx;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
// 确认绑定用户关系
|
|
.bind-user{
|
|
padding: 15rpx 30rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
.bind-title{
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
.bind-subtitle{
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: gray;
|
|
padding-top: 15rpx;
|
|
text-align: center;
|
|
}
|
|
.bind-acitve{
|
|
text-align: center;
|
|
padding-top: 30rpx;
|
|
image{
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
background: #f8f8f8;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.bind-nickname{
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
line-height: 40rpx;
|
|
padding-top: 20rpx;
|
|
}
|
|
.bind-username{
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: gray;
|
|
}
|
|
}
|
|
</style>
|