<template>
	<view class="task">
		<view class="task-content">
			<view class="title">我的昵称</view>
			<view class="content">
				<view class="item">
					<view class="a">
						<input maxlength="8" v-model="nickname" type="text" placeholder="请输入您的昵称" />
					</view>
					<view class="b">{{nickname?nickname.length:0}}/8</view>
				</view>
			</view>
			<view class="tips">*昵称可使用中文、英文、数字和部分字符</view>
		</view>
		<view class="task-fd">
			<view class="btn" @click="changeInput">完成</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname: "",
			};
		},
		onLoad(o) {
			this.nickname = decodeURIComponent(o.nickname)
		},
		methods: {
			changeInput(){
				uni.$emit("changNickname",this.nickname)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.task{
	padding-bottom: 110rpx;
	&-fd{
		background-color: #F3F4F5;
		width: 100%;
		padding: 30rpx 25rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 22;
		.btn{
			width: 100%;
			line-height: 98rpx;
			background: linear-gradient(0deg, #000000, #3D3B38);
			box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
			border-radius: 98rpx;
			text-align: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			letter-spacing: 5rpx;
		}
	}
	&-content{
		padding: 0 25rpx;
		overflow: hidden;
		.title{
			font-weight: 500;
			font-size: 32rpx;
			color: #222222;
			margin-top: 30rpx;
		}
		.tips{
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			margin-top: 25rpx;
		}
		.content{
			overflow: hidden;
			.item{
				width: 100%;
				padding: 0 30rpx;
				background: #FFFFFF;
				border-radius: 97rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				box-sizing: border-box;
				.a{
					flex: 1;
					input{
						line-height: 97rpx;
						height: 97rpx;
						font-size: 30rpx;
						color: #000000;
					}
				}
				.b{
					font-weight: 500;
					font-size: 30rpx;
					color: #999999;
				}
			}
		}
	}
}
</style>
