recycapp/pages/mine/edituser-.vue

<template>
	<view class="content">
		<view class="content-top">
					<view class='hs-box'>
						<view class='hs-row user-head'>
							<view class='hs-row-hd'>
								头像
							</view>
							<view class='hs-row-ft'>
								<button class="avatar-wrapper" open-type="chooseAvatar" :disabled="disabled" @chooseavatar="onChooseAvatar">
								    <image class="avatar  user-head-img" :src="avatar" mode="aspectFill"></image>
								</button>
							 </view>
						</view>
						<view class='hs-row '>
							<view class='hs-row-hd'  style="width: 80px;">昵称</view>
							 
							<view class='hs-row-na'>
								<input type="nickname" class="weui-input" v-model="nickname" :disabled="disabled" name="nickname" placeholder="请输入昵称" @blur="getnicheng" ></input>
							</view>
						</view> 
					</view>
				</view>
		  
		<view class="button-bottom"> 
			<button class="btn btn-success" @click="toAdd()"  >保存</button>
		</view>
	</view>
</template>


<script>  
	export default { 
		data() {
			return { 
				userinfo:{},
				headflag:false, 
				nickname:'微信用户', 
				avatar:'/static/img/t2.png', 
			}
		},
		components:{ 
		},
		onLoad() { 
		},
		onShow() {
			var token = uni.getStorageSync('userToken');  
			if (!token) {
				return false;
			} 
			this.getauth()
		},
		methods: {
			
			getnicheng({detail}){
				this.nickname = detail.value ;
			},  
			getauth(){
				var _this = this;
				_this.$api.userInfo({},res=>{ 
					if(res.code == '1'){   
						if(res.data.user.avatar){
							_this.avatar = res.data.user.avatar
						} 
						_this.nickname = res.data.user.nickname 
					}else{ 
					}
				})
			},   
			getinfo(){
				var token = uni.getStorageSync('userToken');  
				if (token) {
					this.headflag = true 
					 
				}else{
					this.headflag = false
				}
			},  
			onChooseAvatar(e) { 
			    const { avatarUrl } = e.detail 
				this.edithead(avatarUrl  ); 
			},
			edithead(avatarUrl){ 
				var token =uni.getStorageSync('userToken');
				uni.uploadFile({
					url: this.$api.api_url + 'api/common/upload?token='+ token	,  
					filePath: avatarUrl,
					fileType: 'image',
					name: 'file',
					sizeType:['original','compressed'],
					headers: {
						'Accept': 'application/json',
						'Content-Type': 'multipart/form-data',
					},
					formData: {
						'method': 'images.upload',
						'upfile': avatarUrl
					},
					success: (res) => { 
						var res = JSON.parse(res.data);   
						  if(res.code == '1'){
							this.avatar = res.data.fullurl  
							uni.showToast({ title: res.msg , icon: 'success' })  
						}else{
							uni.showToast({ title: res.msg , icon: 'none' }) 
						}  
					},
					fail: (error) => {
						if (error && error.response) {
							uni.showToast({ title: error.response , icon: 'none' }) 
						}
					}, 
				}); 
			},
			toAdd(){ 
				if(this.avatar == '/static/img/t2.png' ){ 
					uni.showToast({ title: "请上传自己的头像" , icon: 'none' })  
					return false;
				}
				this.$api.edituser({
					avatar:this.avatar,
					nickname:this.nickname
				},res=>{ 
					if(res.code == '1'){
						 
						uni.showToast({ title: res.msg , icon: 'success' })  
						uni.navigateBack({
						  delta: 1
						})
						return false
					}else{
						uni.showToast({ title: res.msg , icon: 'none' }) 
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	 
.hs-row-ft	button{
		height: 144rpx;
		width: 144rpx;
		padding: 0;
		border-radius: 50%;background-color: #fff;line-height: 108px;
		 
	}
.hs-row-ft	button::after{
		border: none;
	}
	
		.user-head {
			height: 140rpx;
		}
	
		.user-head-img {
			height: 90upx;
			width: 90upx;
			border-radius: 50%;
		}
	 
	
		.hs-row-na {
			color: #666;
			font-size: 26upx;    text-align: right;    padding-right: 15px;
    width: 100%;
		}
	
		.hs-hd {
			width: 160rpx;
		}
	
		.down {
			top: 50%;
			transform: translateY(-50%);
		}
</style>