web-app/pages/person-card/person-card.vue

<template>
	<view class="test">
		<view v-if="showChangeName" class="change-name-wrapper">
			<view class="change-name">
				<view class="title">昵称修改</view>
				<view class="oldName">
					旧昵称：<input type="text" :value="oldName" disabled />
				</view>
				<view class="newName">
					新昵称：<input type="text" v-model="newName" focus maxlength="12" placeholder="请输入您的新昵称" />
				</view>
				<view class="bar">
					<text @click="showChangeName = false">取消</text>
					<text class="save" @click="changeName">保存</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="top-bg">
				<image :src="info.avatar" mode="widthFix"></image>
			</view>
			<view class="info">
				<image class="avatar" :src="info.avatar"></image>
				<view class="nickname">{{ info.nickname || '' }}</view>
				<view class="realname">
					<text class="left">真实姓名</text>
					<text class="right">{{ info.real_name || '' }}</text>
				</view>
				<view class="phone">
					<text class="left">联系方式</text>
					<text class="right">{{ info.mobile }}</text>
				</view>
			</view>
			<view class="level-info">
				<view class="level-items" :class="{ open: open }">
					<view class="level-item">
						<text class="left">代理级别</text>
						<text class="right">{{ info.level }}</text>
					</view>
					<view class="level-item">
						<text class="left">邀请人</text>
						<text class="right">{{ info.recom_nickname }}</text>
					</view>
					<view class="level-item">
						<text class="left">上级代理</text>
						<text class="right">{{ info.up_nickname || '' }}</text>
					</view>
				</view>
				<view class="level-lock basecolor" @tap="toogle">{{ open ? '收起' : '显示更多' }}</view>
			</view>
			<view class="team-info">
				<view v-if="this.title == '我的名片'" @tap="showChangeName = true">
					<text class="left">修改昵称</text>
					<text class="cuIcon-right"></text>
				</view>
				<view v-if="info.status == 0" @tap="toAuthCard">
					<text class="left">授权书</text>
					<text class="cuIcon-right"></text>
				</view>
				<view>
					<text class="left">团队人数</text>
					<text class="right">{{ info.team_num || '0' }}人</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { _API_TeamPerData } from '@/apis/team.js'
	import { _API_Proxy_ChangeName } from '@/apis/user.js'
	export default {
		data() {
			return {
				title: '个人名片',
				info: {},
				open: false,
				id: '',
				showChangeName: false,
				oldName: this.$store.state.userinfo.nickname,
				newName: ''
			}
		},
		onLoad(opt) {
			if (opt.self) { // 如果是用户查看自己的命片
				this.title = '我的名片'
			}
			this.id = opt.id
			_API_TeamPerData({ id: opt.id }).then(res => {
				this.info = res.data
				if (this.title !== '我的名片') {
					if (this.info.real_name) {
						this.info.real_name = this.info.real_name.replace(/./g, '*').replace(/^\*/, this.info.real_name[0])
					} else {
						this.info.real_name = '***'
					}
				}
			})
		},
		methods: {
			toogle() {
				this.open = !this.open
			},
			toAuthCard() {
				uni.navigateTo({ url: `../auth-card/auth-card?id=${this.id}` })
			},
			changeName() {
				if (this.newName.trim()) {
					uni.loading()
					_API_Proxy_ChangeName({ nickname: this.newName.trim() }).then(res => {
						this.info.nickname = this.newName.trim()
						uni.loading()
						uni.$emit('INIT')
						this.showChangeName = false
						this.newName = ''
					})
				} else {
					uni.toast('新昵称不能为空')
				}
			}
		}
	}
</script>

<style lang="scss">
	.test {
		@include page();
		.change-name-wrapper {
			z-index: 1;
			width: 100vw;
			height: 100vh;
			@include flex();
			position: fixed;
			background: rgba(0, 0, 0, .3);
			.change-name {
				width: 540rpx;
				height: 400rpx;
				font-size: 32rpx;
				background: #FFFFFF;
				border-radius: 6rpx;
				@include flex(column);
				justify-content: space-between;
				.title {
					width: 100%;
					height: 90rpx;
					@include flex();
					
				}
				.oldName , .newName {
					width: 100%;
					@include flex();
					justify-content: flex-start;
					margin-left: 41rpx;
					input {
						width: 335rpx;
						height: 54rpx;
						border: 1rpx solid #AAAAAA;
						box-sizing: border-box;
						padding: 0 8rpx;
						font-size: 28rpx;
					}
				}
				.bar {
					width: 100%;
					height: 76rpx;
					@include flex();
					color: #666666;
					border-top: 1rpx solid #F2F4F5;
					text {
						flex: 1;
						height: 100%;
						@include flex();
						&.save {
							color: $app-base-color;
							border-left: 1rpx solid #F2F4F5;
						}
					}
				}
			}
		}
		.content {
			.top-bg {
				height: 300rpx;
				overflow: hidden;
				filter: blur(8rpx);
				image {
					width: 100%;
					transform: translateY(-25%);
				}
			}
			.info {
				@include flex(column);
				height: 270rpx;
				font-size: 26rpx;
				position: relative;
				background: #FFFFFF;
				justify-content: flex-end;
				border-bottom: 1rpx solid $app-base-bg;
				.avatar {
					top: 0;
					left: 50%;
					width: 108rpx;
					height: 108rpx;
					position: absolute;
					border-radius: 8rpx;
					transform: translate(-50%, -50%);
				}
				>view {
					@include flex();
					width: 100%;
					padding: 0 30rpx;
					line-height: 72rpx;
					box-sizing: border-box;
					justify-content: flex-start;
					&.nickname {
						margin-bottom: 12rpx;
						justify-content: center;
					}
					.left {
						width: 300rpx;
					}
				}
			}
			.level-info {
				background: #FFFFFF;
				margin-bottom: 20rpx;
				.level-items {
					height: 0;
					overflow: hidden;
					&.open {
						height: 270rpx;
					}
					>view {
						@include flex();
						width: 100%;
						height: 90rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
						justify-content: flex-start;
						border-bottom: 1rpx solid $app-base-bg;
						.left {
							width: 300rpx;
						}
					}
				}
				.level-lock {
					@include flex();
					height: 60rpx;
				}
			}
			.team-info {
				>view {
					@include flex();
					width: 100%;
					height: 90rpx;
					padding: 0 30rpx;
					font-size: 32rpx;
					background: #FFFFFF;
					box-sizing: border-box;
					justify-content: space-between;
					border-bottom: 1rpx solid $app-base-bg;
					.left {
						width: 300rpx;
					}
				}
			}
		}
	}
</style>