uniapp环信IM编辑用户信息

template

<template>
	<view class="container">
		<view class="userInfo" v-if="isEdit === false">
			<view class="item">
				<label>头像</label>
				<view class="headImg">
					<u--image :src="userInfo.avatarurl" shape="circle"
					width="60" height="60"></u--image>
				</view>
			</view>
			<view class="item">
				<label>电话</label>
				{{userInfo.phone}}
			</view>
			<view class="item">
				<label>邮箱</label>
				{{userInfo.mail}}
			</view>
			<view class="item">
				<label>性别</label>
				{{userInfo.gender}}
			</view>
			<view class="item">
				<label>签名</label>
				{{userInfo.sign}}
			</view>
			<view class="item">
				<label>生日</label>
				{{userInfo.birth}}
			</view>
			
			<u-button type="info" text="编辑" @click="showEdit"></u-button>
		</view>
		
		<!-- 编辑 -->
		<view class="userInfo" v-if="isEdit === true">
			<view class="item">
				<label>头像</label>
				<u--input v-model="userInfo.avatarurl"></u--input>
			</view>
			<view class="item">
				<label>电话</label>
				<u--input v-model="userInfo.phone"></u--input>
			</view>
			<view class="item">
				<label>邮箱</label>
				<u--input v-model="userInfo.mail"></u--input>
			</view>
			<view class="item">
				<label>性别</label>
				<u--input v-model="userInfo.gender"></u--input>
			</view>
			<view class="item">
				<label>签名</label>
				<u--input v-model="userInfo.birth"></u--input>
			</view>
			<view class="item">
				<label>生日</label>
				<u--input v-model="userInfo.sign"></u--input>
			</view>
			<u-button type="primary" text="保存" @click="toEdit"></u-button>
		</view>
		
	</view>
</template>

script

export default{
	data(){
		return{
			username:'',
			isEdit:false,
			userInfo:{
				nickname:'',
				avatarurl:'',
				mail:'',
				phone:'',
				gender:'',
				birth:'',
				sign:'',
			}
		}
	},
	onLoad() {
		
	},
	mounted() {
		let userInfo = uni.getStorageSync("userInfo")
		if(userInfo){
			this.userInfo = userInfo
		}
	},
	onShow() {
		let userInfo = uni.getStorageSync("userInfo")
		if(userInfo){
			this.userInfo = userInfo
			this.getUserInfo()
			// this.toEdit()
		}
	},
	methods:{
		// 获取用户信息
		getUserInfo(){
			/**
			 * @param {String|Array} users - 用户id  
			 */
			// this.isEdit = false
			
			let users = uni.getStorageSync('username')
			uni.WebIM.conn.fetchUserInfoById(users).then((res) => {
			    console.log(">>获取用户信息>",res)
				this.userInfo = {...this.userInfo,...res.data[users]}
				uni.setStorageSync('userInfo',this.userInfo)
				// console.log(users)
				// console.log(res.data[users])
			})
		},
		// 保存编辑
		toEdit(){
			// this.isEdit = false
			
			let options = {
			    nickname:  this.userInfo.nickname,
			    avatarurl: this.userInfo.avatarurl,
			    mail: this.userInfo.mail,
			    phone: this.userInfo.phone,
			    gender: this.userInfo.gender,
			    birth: this.userInfo.birth,
			    sign: this.userInfo.sign,
			    ext: JSON.stringify({
			          nationality: 'China',
			          merit: 'Hello，世界！'
			        })
			}
			
			uni.WebIM.conn.updateOwnUserInfo(options).then((res) => {
			    console.log(res)
				uni.setStorageSync('userInfo',options)
			})
			uni.showToast({
				title:'保存成功',
				icon:'none'
			})
			setTimeout(()=>{
				this.isEdit = false
			},1500)
		},
		showEdit(){
			this.isEdit = true
			console.log(this.userInfo)
		}
	}
}

style

.userInfo{
	padding: 0 30upx;
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20upx;
		label{
			font-size: 24upx;
			padding: 0 20upx 0 10upx;
		}
		
	}
}