695 lines
24 KiB
Vue
695 lines
24 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('YunYing')" v-if="team_status != 0">
|
||
<view class="nav-icon">
|
||
<image class="nav-icon-src" src="@/static/icons/yunying.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>
|
||
|
||
<!-- 弹窗展示输入运营中心姓名 -->
|
||
<u-popup :show="yunyingShow" mode="center" @close="yunyingShow = false" :round="22">
|
||
<view class="yunying">
|
||
<view class="yunying_title">
|
||
<view class="title"> 完善运营中心 </view>
|
||
<image class="yunying_bg" src="/static/icons/yunying_bg.png" mode="widthFix" />
|
||
</view>
|
||
<view class="rz-item">
|
||
<input type="text" maxlength="4" v-model='yunying_name' placeholder-class="inputP" placeholder="请输入名称" />
|
||
<view class="btn">运营中心</view>
|
||
</view>
|
||
<view class="button" @click="sureYunYing">确认名称</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
info,
|
||
relationsVerify,
|
||
relationsBind,
|
||
submitTeamName,
|
||
} 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: '',
|
||
yunyingShow:false, // 运营中心是否展示
|
||
yunying_name:'', // 运营名称
|
||
team_status:'', // 状态 0 不展示运营中心 1可以申请但是没有完善，2申请完，审核中，3已通过，已修改
|
||
};
|
||
},
|
||
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,team_status
|
||
} = res
|
||
this.nickname = nickname
|
||
this.identity = identity
|
||
this.avatar = avatar
|
||
this.certification = certification
|
||
this.parent = parent
|
||
this.team_status = team_status
|
||
if(team_status == 1){
|
||
this.yunyingShow = true
|
||
}
|
||
uni.hideLoading()
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
// 导航
|
||
onNav(name) {
|
||
if(this.team_status == 2){
|
||
uni.showToast({
|
||
title:'运营中心名称审核中',
|
||
icon:'none',
|
||
mask:true,
|
||
duration:3000,
|
||
})
|
||
return
|
||
}
|
||
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'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 运营中心确认按钮处理
|
||
sureYunYing(){
|
||
if(this.yunying_name == '' || this.yunying_name.length == 0){
|
||
uni.showToast({
|
||
title:'请完善运营中心名称',
|
||
icon:'none',
|
||
mask:true,
|
||
duration:2000,
|
||
})
|
||
return
|
||
}
|
||
|
||
submitTeamName({name:this.yunying_name}).then(res => {
|
||
this.showBind = false
|
||
uni.showModal({
|
||
title: '微信提示',
|
||
content: '运营中心姓名完善完成，请耐心等待审核！',
|
||
showCancel: false,
|
||
success: res => {
|
||
this.getUserInfo()
|
||
this.yunyingShow = false
|
||
}
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
}
|
||
|
||
|
||
.yunying {
|
||
width: 606rpx;
|
||
|
||
.yunying_title{
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
z-index: 9;
|
||
.title{
|
||
position: absolute;
|
||
left: 30rpx;
|
||
z-index: 10;
|
||
|
||
color: #fff;
|
||
}
|
||
.yunying_bg{
|
||
width: 100%;
|
||
}
|
||
}
|
||
.button {
|
||
width: 540rpx;
|
||
height: 90rpx;
|
||
background: #4674DA;
|
||
border-radius: 50rpx;
|
||
text-align: center;
|
||
line-height: 90rpx;
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
color: #FFFFFF;
|
||
margin: $margin 33rpx 40rpx 33rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.title {
|
||
padding: $padding;
|
||
font-size: 36rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
text-align: center;
|
||
border-bottom: solid 1rpx #f9f9f9;
|
||
}
|
||
|
||
.rz-item {
|
||
padding: $padding;
|
||
margin-top: 30rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #111111;
|
||
position: relative;
|
||
.title{
|
||
font-size: 30rpx;
|
||
}
|
||
input {
|
||
flex: 1;
|
||
background-color: #f9f9f9;
|
||
margin-left: $margin;
|
||
padding: 20rpx $padding;
|
||
border-radius: 10rpx;
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.inputP {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.btn {
|
||
height: 60rpx;
|
||
background: #4674DA;
|
||
border-radius: 10rpx;
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
padding: 0 20rpx;
|
||
position: absolute;
|
||
right: 50rpx;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|