<template>
	<view class="page">
		<view class="box">
			<view class="item">
				<view class="left">用户头像</view>
				<view class="right " @click="chooseImage">
					<image :src="avatar==''?'../../static/headtou.png':avatar"  class="avator" />
					<image src="../../static/right.png" mode="widthFix" class="jiantou" />
				</view>
			</view>
			<view class="item">
				<view class="left">用户昵称</view>
				<view class="right entername">
					<input type="text" placeholder="请输入用户昵称" @input="enternickname" :value="nickname" placeholder-class="enterword">
					
				</view>
			</view>
		</view>
		<view class="btn" @click="surechange">确认</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				nickname:'',
				avatar:''
			}
		},
		onLoad(options) {
			this.nickname=options.nickname;
			console.log(this.nickname)
			this.avatar=options.avatar;
		},
		methods: {
			
			// 输入用户昵称
			enternickname(e){
				this.nickname=e.detail.value
			},
			// 上传头像
			chooseImage() {
			   let that = this; 
			   uni.chooseImage({
			     count: 9,
			     sizeType: ['original', 'compressed'],
			     success: function (res) {
					 console.log(res)
			       console.log(res.tempFilePaths);
				   console.log(res.tempFilePaths[0])
				   
				       
				              app.upload('image', res.tempFilePaths[0], "post").then((res) => {
				                console.log('上传文件', res);
				                let url = app.globalData.imgurl+res.url;
				                that.avatar=url
				                console.log(that.avatar)
				      
				              }).catch((err) => {
				                console.log(err)
				              })
			     
			     },
			     fail: function (res) { }
			   })
			 },
			 
			 //确认修改
			 surechange(){
				 let that = this;
				 if(that.avatar==''){
					 uni.showToast({
					 	title:'请上传头像',
						icon:'none'
					 })
					 return false
				 }
				 if(that.nickname==''){
					 uni.showToast({
					 	title:'请输入昵称',
					 	icon:'none'
					 })
					 return false
				 }
				 var url = 'member/update_user';
				 var params = {
				 	avatar: that.avatar,
					nickname:that.nickname,
					longitude:uni.getStorageSync("longitude"),
					latitude:uni.getStorageSync("latitude")
				 }
				 console.log('7766554', params)
				 app.post(url, params).then((res) => {
				 	console.log(res);
					uni.showToast({
						title:"提交成功",
						icon:'none'
					})
					
					setTimeout(function(){
						uni.navigateBack({
							checked:true
						})
					},1500)
					
				 
				 }).catch((err) => {
				 	console.log(err)
				 
				 })
			 }
				 

		}
	}
</script>

<style>
	page {
		background: #F7F7F7;

	}
	
	.box {
		padding: 0 32rpx;
		box-sizing: border-box;
		background: #fff;
		margin-top: 16rpx;
	}

	.item {
		height: 108rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #EDEDED;

	}

	.left {
		width: calc(100% -220rpx);
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(8, 18, 31, 1);
	}

	.right {
		width: 168rpx;
		font-size: 28rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(61, 69, 76, 1);
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.right .avator {
		width: 84rpx;
		height:84rpx;
		font-size: 0;
		border-radius: 50%;
	}

	.right .jiantou {
		width: 32rpx;
		margin-left: 16rpx;
	}

	.btn {
		width: 686rpx;
		height: 84rpx;
		background: rgba(194, 148, 69, 1);
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		
		position:fixed;
		bottom:20rpx;
		left:32rpx;
	}
	page{
		overflow-y: hidden;
	}
	.entername{
		width:490rpx;
	}
	.entername input{
		width:100%;
		color:#3D454C;
		font-size: 28rpx;
		text-align: right;
	}
	.enterword{
		color:#3D454C;
		font-size: 28rpx;
	}
	.headimg{
		width:120rpx;
		height:120rpx;
		font-size: 0;
		border-radius: 50%;
		
	}
	.headimg image{
		border-radius: 50%;
	}
</style>