<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>
                        <block v-if="identity.id != '5'">
                            <view class="tags-item" >{{identity.name}}</view>
                            <view class="tags-item" v-if="team_name!=''">隶属：{{team_name}}</view>
                        </block>
                        <block v-if="identity.id == '5'">
                            <view class="tags-item" v-if="team_name!=''">{{team_name}}</view>
                        </block>
                    </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="yungying('team',team_id)" 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="yungying('region',region_id)" v-if="region_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="nav-flex" @click="onReckoner">
		    <view class="nav-icon">
		        <image class="nav-icon-src" src="@/static/icons/user_nav_09.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="updateApp">
		    <view class="nav-icon">
		        <image class="nav-icon-src" src="@/static/icons/user_nav_08.png"></image>版本检测
		    </view>
			<view class="nav-text">
				<text>V{{version}}</text>
				<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
			</view>
		</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">{{team_status == '1'?'完善法务运营中心':'完善大区运营中心'}} </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">{{team_status == '1'?'法务运营中心':'大区运营中心'}}</view>
                </view>
                <view class="button" @click="sureYunYing">确认名称</view>
            </view>
        </u-popup>
		<!-- 盘债计算机二维码 -->
		<!-- <u-popup :show="reckonerShow" mode="center" bgColor="transparent">
			<view class="reckoner-lay">
				<view class="reckoner-content">
					<image class="reckoner-code" :src="reckonerQrcode" mode="widthFix"></image>
					<view class="reckoner-url" @click="onCopyUrl(reckonerURL)">邀请码：{{reckonerInvite}}<text>复制</text></view>
					<view class="reckoner-btn" @click="onIsSeve">保存海报</view>
					<image class="reckoner-back" src="@/static/imgs/reckoner-back.png" mode="aspectFill"></image>
				</view>
				<u-icon name="close-circle-fill" size="42" color="#fff" @click="reckonerShow = false"></u-icon>
			</view>
		</u-popup> -->
		<!-- 海报 -->
		<!-- <l-painter class="l-painter" :board="reckonerPoster" isCanvasToTempFilePath @success="qrcodePath"/> -->
    </view>
</template>

<script>
    import { info, relationsVerify, relationsBind, submitTeamName, debtUrl } from '@/apis/interfaces/user.js'
	import { getVersions } from '@/apis/interfaces/versions'
	import { request } from '../../apis';
	import permision from "@/js_sdk/wa-permission/permission.js"
    export default {
        data() {
            return {
				version			: plus.runtime.version,
                isAuth			: false,
                nickname		: '',
                identity		: '',
                team_name		:'',
                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已通过，已修改
                team_id			:'',
                region_status	:'', // 状态 0 不展示 大区中心 1可以申请但是没有完善，2申请完，审核中，3已通过，已修改
                region_id		:'',
				// 计算器
				reckonerShow	: false,
				reckonerURL		: '',
				reckonerQrcode	: '',
				reckonerInvite	: '',
				reckonerPoster	: {}
            };
        },
        onShow() {
            this.isAuth = this.$store.getters.getToken != ''
            if (this.$store.getters.getToken != '') this.getUserInfo()
        },
        methods: {
			// 检查保存海报权限
			async onIsSeve(){
				let result = await permision.requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE')
				// 检查用户权限
				if(result == 1){
					this.onDowQRcode()
					return
				}
				// 引导用户设置联系电话
				uni.showModal({
					title		: '提示',
					content		: '请授权应用获得[写入相册]权限',
					showCancel	: false,
					confirmText	: '设置',
					success		: modalRes => {
						permision.gotoAppPermissionSetting()
					}
				})
			},
			// 保存盘债计算器海报
			onDowQRcode(){
				uni.showLoading({
					title: '获取海报中...',
					mask : true
				})
				this.reckonerPoster = {
					css: {
						width: '600rpx',
						borderRadius: '20rpx'
					},
					views: [
						{
							css: {
								width: '600rpx',
								height: '840rpx',
								objectFit: 'cover',
								borderRadius: '20rpx'
							},
							src : require('@/static/imgs/reckoner-back.png'),
							type: "image"
						},
						{
							css: {
								width: '440rpx',
								height: '440rpx',
								position: 'absolute',
								left: '80rpx',
								top: '120rpx',
								borderRadius: '20rpx'
							},
							src : this.reckonerQrcode,
							type: "image"
						}, {
							type: 'text',
							text: '邀请码：' + this.reckonerInvite,
							css: {
								textAlign: 'center',
								color: '#fff',
								position: 'absolute',
								left: '30rpx',
								top: '600rpx',
								width: '540rpx',
								lineHeight: '50rpx',
								fontSize: '16px',
								fontWeight: 'bold'
							}
						}, {
							type: 'text',
							text: '使用微信扫一扫，打开盘债计算器',
							css: {
								textAlign: 'center',
								color: '#fff',
								position: 'absolute',
								left: '30rpx',
								top: '670rpx',
								width: '540rpx',
								lineHeight: '50rpx',
								fontSize: '14px'
							}
						},
					]
				}
			},
			// 识别产品
			onPhone(e){
				uni.chooseImage({
					crop   : {
						quality	: 100,
						width	: 300,
						height	: 300,
					},
					success: res => {
						console.log(res)
					},
					fail   : err => {
						console.log(err)
					}
				})
			},
			// 生成海报地址
			qrcodePath(path){
				uni.hideLoading()
				uni.saveImageToPhotosAlbum({
					filePath: path,
					success	:() => {
						uni.showToast({
							title: '海报已保存，赶快去分享吧',
							icon : 'none'
						})
					},
					fail	: () => {
						uni.showToast({
							title: '保存失败，请检查系统权限',
							icon : 'none'
						})
					}
				});
			},
			// 复制用户地址
			onCopyUrl(url){
				uni.setClipboardData({
					data	: url,
					success	: res => {
						uni.showToast({
							title: '地址已复制'
						})
					}
				})
			},
			// 盘债计算器
			onReckoner() {
				if(!this.isAuth){
					this.$Router.push({
						name: 'Auth'
					})
					return
				}
				uni.showLoading({
					title: '获取邀请码',
					mask : true
				})
				debtUrl().then(res => {
					uni.hideLoading()
					let { url, qrcode, invite } = res;
					this.reckonerURL	= url
					this.reckonerQrcode = qrcode
					this.reckonerInvite = invite
					this.reckonerShow = true
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
            // 获取用户信息
            getUserInfo() {
                uni.showLoading({
                    title: '加载中...'
                })
                info().then(res => {
                    let {
                        nickname,
                        identity,
                        avatar,
                        certification,
                        parent,team_name,teams
                    } = res
                    this.nickname = nickname
                    this.identity = identity
                    this.avatar = avatar
                    this.certification = certification
                    this.parent = parent
                    this.team_name = team_name
                    uni.hideLoading()
                    // team_status:'', // 状态 0 不展示运营中心 1可以申请但是没有完善，2申请完，审核中，3已通过，已修改
                    this.team_status = teams.center.status    //  运营中心状态
                    this.team_id = teams.center.identity_id   //  运营中心
                    this.region_status = teams.region.status  //  大区中心状态
                    this.region_id = teams.region.identity_id //  大区中心id
                    if(teams.center.status == 1){
                        this.yunyingShow = true
                        return
                    }
                    if(teams.region.status == 1){
                        this.yunyingShow = true
                        return
                    }
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: 'none'
                    })
                })
            },
            yungying(type,id){
                if(type === 'team'){
                    if(this.team_status == 2){
                            uni.showToast({
                                title:'法务运营中心名称审核中',
                                icon:'none',
                                mask:true,
                                duration:3000,
                            })
                            return
                    }
                    if(this.team_status == 1){
                        this.yunyingShow = true
                        return
                    }
                }
                if(type == 'region'){
                    if(this.region_status == 2){
                            uni.showToast({
                                title:'大区运营中心名称审核中',
                                icon:'none',
                                mask:true,
                                duration:3000,
                            })
                            return
                    }
                    if(this.region_status == 1){
                        this.yunyingShow = true
                        return
                    }
                }
                uni.navigateTo({
                    url:'/pages/account/yunying?id='+id+'&teamtype='+type
                })
            },
            // 导航
            onNav(name) {
                this.$Router.push({
                    name
                })
            },
            // 推荐关系
            onParent() {
				if(!this.isAuth){
					this.$Router.push({
						name: 'Auth'
					})
					return
				}
                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:this.team_status == 1?'请完善法务运营中心名称':'请完善大区运营中心名称',
                         icon:'none',
                         mask:true,
                         duration:2000,
                     })
                     return
                 }
                let pararms = {
                     name:this.yunying_name,
                     identity_id:this.team_status ==1 ? this.team_id:this.region_id
                }
                 submitTeamName(pararms).then(res => {
                     this.showBind = false
                     uni.showModal({
                         title: '微信提示',
                         content: this.team_status ==1?'法务运营中心姓名完善完成，请耐心等待审核！':'大区运营中心姓名完善完成，请耐心等待审核！',
                         showCancel: false,
                         success: res => {
                             this.getUserInfo()
                             this.yunyingShow = false
                         }
                     })
                 }).catch(err => {
                     uni.showToast({
                         title: err.message,
                         icon: 'none'
                     })
                 })
            },
			// 检查版本更新
			updateApp() {
			    uni.showLoading({
			        title: '检查更新'
			    })
			    //#ifdef APP-PLUS
			    // 获取系统版本号
			    getVersions({
			        platform: plus.os.name,
			        version : plus.runtime.version,
					channel	: 'app'
			    }).then(res => {
			        uni.hideLoading()
			        if (res.update) {
			            uni.showModal({
			                title: "更新提示",
			                content: res.note || '版本更新信息',
			                confirmText: "更新",
			                success: modalRes => {
			                    if (modalRes.confirm) {
			                        if (plus.os.name == "Android") {
			                            uni.showToast({
			                                title: '新版本下载中，将在下载完成后自动为您安装更新包',
			                                icon: 'none'
			                            })
			                            uni.downloadFile({
			                                url: res.info.download,
			                                success: apkPick => {
			                                    plus.runtime.install(apkPick
			                                        .tempFilePath, '',
			                                        installRES => {
			                                            // 安装完成用于提示新版本引导，暂时无用
			                                        }, installERR => {
			                                            // 安装失败
			                                        })
			                                },
			                                fail(err) {
			                                    uni.showToast({
			                                        title: '安装包下载失败，请检查您的网络或稍后重试',
			                                        icon: 'none'
			                                    })
			                                }
			                            })
			                        } else {
			                            uni.showToast({
			                                title: '暂无ios版本这块留着后续用',
			                                icon: 'none'
			                            })
			                        }
			                    }
			                }
			            })
			            return
			        }
			        uni.showModal({
			            title: "提示",
			            content: "当前已是最新版本",
			            showCancel: false,
			        })
			    }).catch(err => {
			        uni.showToast({
			            title: err.message,
			            icon: 'none'
			        })
			    })
			    //#endif
			}
        }
    }
</script>

<style lang="scss">
	// 计算器弹出层
	.l-painter{ position: fixed; top: -100%; left: -100%; }
	.reckoner-lay{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.reckoner-content{ 
			border-radius: 20rpx;
			padding: 70rpx 50rpx;
			width: 75vw;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.reckoner-back{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
			}
			.reckoner-code{ 
				width: 45vw;
				height: 45vw;
				margin-top: 20rpx;
				margin-bottom: 30rpx;
			}
			.reckoner-btn{
				margin-top: 50rpx;
				background: white;
				color: #051437;
				width: 55vw;
				text-align: center;
				line-height: 100rpx;
				border-radius: 50rpx;
				font-size: 34rpx;
			}
			.reckoner-url{ 
				color: white;
				text-align: center;
				font-size: 30rpx;
				text{ font-weight: bold; margin-left: 15rpx; }
			}
		}
	}
	// close-circle-fill
	
	// 导航栏
    .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;
            }
        }
		.nav-text{ 
			display: flex;
			justify-content: flex-end;
			align-items: center;
			color: #999;
			font-size: 30rpx;
			text{ padding-right: 10rpx; }
		}
    }

    // 用户信息
    .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-right: $margin - 10;

                    &::after{
                        border-radius: 20rpx;
                    }

                    &:first-child ,&:nth-child(3) {
                        margin-left: 0;
                    }
                    &:nth-child(3){
                        margin-top: 10rpx;
                    //     background: #4674DA;
                    //     color: #fff;
                    }

                    .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>
