web-app_taiwan/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 @click="toShareSet">
					<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 class="share_mobile_container">
			<view class="share_mobile_main">
				
			</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: {
			toShareSet() {
				uni.navigateTo({
					url: '../share-set/index'
				})
			},
			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">
	.share_mobile_container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;

		.share_mobile_main {}
	}

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

					.right {
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.eqcode_img {
						width: 40px;
						height: 40px;
					}
				}
			}
		}
	}
</style>