lxwx_front/pages/my/editInfo1.vue

<template>
	<view class="editInfo">
		<view class="a" v-if="uploadPic == false">
			<u-navbar @leftClick="leftClick" height="50" :autoBack="true">
				<view
					class="u-nav-slot"
					slot="left"
				>
					<u-icon
						name="arrow-left"
						size="19"
					></u-icon>
					<view class="title">
						个人中心
					</view>
				</view>
			</u-navbar>
			<view class="editInfoContent">
				<view class="editItem" style="margin-top:0" @click="modifyPhoto">	
					<view class="editTitle">
						头像修改
					</view>
					<view class="touxiang">
						<u-avatar :src="userInfo.avatar" @c></u-avatar>
						<u-icon
							name="arrow-right"
							size="20"
						></u-icon>
					</view>
				</view>
				<view class="editItem">
					<view class="editTitle">
						昵称修改
					</view>
					<view class="input">
						<u--input placeholder="请输入昵称" inputAlign="right" color="#999999" border="none" v-model="userInfo.nickname"></u--input>
					</view>
				</view>
			</view>
			<view class="submitBtn" @click="modifyInfoHandle">
				提交
			</view>
		</view>
		
		<view class="b" v-else>
				<okingtz-cropper 
				@back="back"
				selectButtonBackgroundColor="#0076F6"
				saveButtonBackgroundColor="#0076F6"
				@uploadSuccess="uploadSuccess"></okingtz-cropper>
		</view>
	</view>
</template>

<script>
import axios from 'axios'
import OkingtzCropper from '@/components/okingtz-cropper/components/okingtz-cropper/okingtz-cropper'
export default {
	data() {
		return {
			userInfo: {},
			uploadPic: false
		}
	},
	components: {
		OkingtzCropper
	},
	methods:{
		uploadSuccess(res){
			console.log(res)
		},
		modifyPhoto(){
			this.uploadPic = true
		},
		back(){
			this.uploadPic = false
		},
		leftClick(){
			uni.navigateTo({
				url:'/pages/my/my'
			})
		},
		modifyInfoHandle(){
			let params = {
				nickname:this.userInfo.nickname,
				avatar:this.userInfo.avatar
			}
			modifyInfo(params,{ custom: { auth: true }}).then(res=>{
				console.log(res,)
			}).catch((res)=>{
				console.log(res,"mmm")
			})
		}
	},
	onShow() {
		let userInfo = uni.getStorageSync('userInfo')
		this.userInfo = userInfo;
		
	}
}
</script>


<style lang="scss" scoped>
.u-nav-slot{
	display: flex;
	align-items: center;
	.title{
		font-size: 36upx;
		color: #222222;
	}
}
.editInfoContent{
	margin:0 24upx;
	margin-top:50px;
	padding-top:20upx;
	.editItem{
		padding:40upx 30upx;
		display: flex;
		background: #FFFFFF;
		border-radius: 20upx;
		justify-content: space-between;
		align-items: center;
		margin:20upx 0;
		.editTitle{
			font-size: 30upx;
			color: #333333;
		}
		.touxiang{
			display: flex;
			align-items: center;
			&>image{
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
				margin-right:20upx;
			}
		}
		.input{
			text-align: right;
			color:#999999
		}
		.editInfoIcon{
			width:30upx;
			height:30upx;
		}
	}
}
.submitBtn{
	width:64%;
	margin:80upx auto;
	background: #0076F6;
	border-radius: 60upx;
	font-size: 30upx;
	font-weight: 400;
	color: #FFFFFF;
	text-align: center;
	padding:30upx 0;
}
</style>