<template>
	<view class="edit-name-page">
		<HeaderCom></HeaderCom>
		<view class="main">
			<input type="text" placeholder="请输入您的昵称" placeholder-class="input-place" v-model="form.nickname" class="main-input" maxlength="15" />
		</view>
		<view class="footer">
			<view class="submit" @click="submit">确定</view>
		</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/editName"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import HeaderCom from '@/pages/components/header.vue'
	import { updateNickNameApi } from '@/API/user.js'
	export default{
	mixins: [myMixins],
		data(){
			return{
				form:{
					id:"",
					nickname:""
				}
			}
		},
		components:{HeaderCom},
		onLoad(option){
			this.form = {
				id:option.id,
				nickname:option.nickname
			}
		},
		methods:{
			submit(){
				if(!this.form.nickname){
					this.$api.msg('请输入昵称')
					return
				}
				updateNickNameApi({nickname:this.form.nickname}).then(res => {
					this.$api.msg(res.message)
					if(res.code === 200){
						setTimeout(() => {
							uni.redirectTo({
								url:'/pages/mine/setting'
							})
						},500)
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.edit-name-page{
		padding-top: 112rpx;
		.main{
			padding: 0 32rpx;
			.main-input{
				width: 686rpx;
				height: 104rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding-left: 32rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}
			.input-place{
				color: #888888;
			}
		}
		.footer{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 144rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			.submit{
				width: 686rpx;
				height: 96rpx;
				background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
		
	}
</style>