uni-app 136修改用户个人资料

Posted 2021-12-24 2019ab

/pages/my/userinfo/userinfo.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<free-nav-bar title="个人资料" showBack :showRight="false"></free-nav-bar>
		<free-list-item title="头像" showRight :showLeftIcon="false" @click="update('avatar')">
			<free-avatar slot="right" :src="user.avatar"></free-avatar>
		</free-list-item>
		<free-list-item title="昵称" showRight :showLeftIcon="false" @click="update('nickname')">
			<text slot="right" class="font text-muted">user.nickname</text>
		</free-list-item>
		<free-list-item title="账号" showRight :showLeftIcon="false"  >
			<text slot="right" class="font text-muted">user.username</text>
		</free-list-item>
		<free-list-item title="二维码名片" showRight :showLeftIcon="false" @click='openCode'>
			<text slot="right" class="iconfont font-md">&#xe647;</text>
		</free-list-item>
		
		<free-confirm :title="confirmTitle" ref="confirm">
			<input type="text" class="border-bottom font-md" :placeholder="placeholder" v-model="confirmText"/>
		</free-confirm>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeAvatar from '@/components/free-ui/free-avatar.vue';
	import freeListItem from '@/components/free-ui/free-list-item.vue';
	import freeConfirm from '@/components/free-ui/free-confirm.vue';
	import  mapState  from 'vuex';
	import $H from '@/common/free-lib/request.js';
	export default 
		components:
			freeNavBar,
			freeAvatar,
			freeListItem,
			freeConfirm
		,
		data() 
			return 
				avatar:'/static/images/demo/demo6.jpg',
				confirmText:'',
				confirmType:'',
				inputtext:''
			
		,
		computed:
			...mapState(
				user:state=>state.user.user
			),
			confirmTitle()
				return this.confirmType=='username' ? '修改账号' : '修改昵称';
			,
			placeholder()
				return this.confirmType=='username' ? '输入账号' : '输入昵称';
			
		,
		methods: 
			update(key)
				switch(key)
					case 'avatar':
						uni.chooseImage(
							count:1,
							sizeType:['compressed'],
							success:(res)=>
								// 上传
								$H.upload('/upload',
									filePath:res.tempFilePaths[0]
								).then(url=>
									$H.post('/user/update',
										avatar:url,
										nickname: this.user.nickname.length == 0 ? ' ' : this.user.nickname
									).then(res=>
										uni.showToast(
											title:'修改头像成功',
											icon:'none'
										);
										this.$store.commit('updateUser',k:'avatar',v:url)
									)
								)
							  
							
						)
					break;
					default:
					this.confirmType = key;
					// this.confirmText = this.user[key];
					if(key === 'nickname')
						this.confirmText = this.nickname;
					else
						this.confirmText = this.username;
					
					this.$refs.confirm.show((close)=>
						if(this.confirmText==='')
							return uni.showToast(
								title:'不能为空',
								icon:'none'
							)
						
						$H.post('/user/update',avatar:this.user.avatar,nickname:this.confirmText).then(res=>
							this.$store.commit('updateUser',k:'nickname',v:this.confirmText);
							uni.showToast(
								title:'修改成功',
								icon:'none'
							);
						)
					    
						
						close();
					);
					break;
				
			,
			// 二维码名片
		    openCode()
				uni.navigateTo(
					url:'../code/code?params='+encodeURIComponent(JSON.stringify(
						id:this.user.id,
						name:this.user.nickname || this.user.username,
						avatar:this.user.avatar
					))+'&type=user',
				)
			
		
	
</script>

<style>

</style>

/store/modules/user.js

import $U from '@/common/free-lib/util.js';
import $H from '@/common/free-lib/request.js';
import Chat from '@/common/free-lib/chat.js';
import $C from '@/common/free-lib/config.js';
export default 
	state: 
		user: false,
		apply: 
			rows: [],
			count: 0,
		,
		mailList: [],
		chat: null,
		// 会话列表
		chatList: [],
		// 总未读数
		totalNoreadnum: 0
	,
	mutations:
		updateUser(state,k,v)
			if(state.user)
				state.user[k] = v;
				$U.setStorage('user',JSON.stringify(state.user));
			
		
	,
	actions: 
		// 登录后处理
		login(
			state,
			dispatch
		, user) 
			// 存到状态种
			state.user = user;
			// 存储到本地存储中
			$U.setStorage('token', user.token);
			$U.setStorage('user', JSON.stringify(user));
			$U.setStorage('user_id', user.id);
			// 获取好友申请列表
			dispatch('getApply');
			// 更新角标提示
			dispatch('updateMailBadge');
			// 连接socket
			state.chat = new Chat(
				url: $C.socketUrl
			)
			// 获取会话列表
			dispatch('getChatList');
			// 初始化总未读数角标
			dispatch('updateBadge');
		,
		// 退出登录
		logout(
			state
		) 
			// 清除登录状态
			state.user = false;
			// 清除本地存储数据
			$U.removeStorage('token');
			$U.removeStorage('user');
			$U.removeStorage('user_id');
			// 关闭socket连接
			state.chat.close();
			state.chat = null;
			// 跳转到登录页
			uni.reLaunch(
				url: '/pages/common/login/login'
			)
			// 注销监听事件
			uni.$off('onUpdateChatList')
			uni.$off('momentNotice')
			uni.$off('totalNoreadnum')
		,
		// 初始化登录状态
		initLogin(
			state,
			dispatch
		) 
			// 拿到存储的数据
			let user = $U.getStorage('user');
			if (user) 
				// 初始化登录状态
				state.user = JSON.parse(user);
				// 连接socket
				state.chat = new Chat(
					url: $C.socketUrl
				)
				// 获取会话列表
				dispatch('getChatList');
				// 获取离线信息
				// 获取好友申请列表
				dispatch('getApply');
				// 初始化总未读数角标
				dispatch('updateBadge');
			
		,
		// 获取好友申请列表
		getApply(
			state,
			dispatch
		, page = 1) 
			$H.get('/apply/' + page).then(res => 
				if (page === 1) 
					state.apply = res
				 else 
					// 下拉刷新
					state.apply.rows = [...state.apply.rows, ...res.rows]
					state.apply.count = res.count
				

				// 更新通讯录角标提示
				dispatch('updateMailBadge');
			);
		,
		// 更新通讯录角标提示
		updateMailBadge(
			state
		) 
			let count = state.apply.count > 99 ? '99+' : state.apply.count.toString();
			console.log(state.apply.count);
			if (state.apply.count > 0) 
				return uni.setTabBarBadge(
					index: 1,
					text: count
				)
			

			uni.removeTabBarBadge(
				index: 1
			)

		,
		// 获取通讯录列表
		getMailList(
			state
		) 
			$H.get('/friend/list').then(res => 
				state.mailList = res.rows.newList ? res.rows.newList : [];
			)
		,
		// 获取会话列表
		getChatList( state )
					state.chatList = state.chat.getChatList()
					// 监听会话列表变化
					uni.$on('onUpdateChatList',(list)=>
						state.chatList = list
					)
		,
		// 初始化总未读数角标
		// 更新未读数
		async updateBadge(list = false) 
			// 获取所有会话列表
			list = list ? list : this.getChatList()
			// 统计所有未读数
			let total = 0
			list.forEach(item => 
				total += item.noreadnum
			)
			// 设置底部导航栏角标
			if (total > 0) 
				uni.setTabBarBadge(
					index: 0,
					text: total <= 99 ? total.toString() : '99+'
				)
			 else 
				uni.removeTabBarBadge(
					index: 0
				)
			
			uni.$emit('totalNoreadnum', total)
		,
		// 初始化总未读数角标
		updateBadge(
			state
		)
			
			// 开启监听总未读数变化
			uni.$on('totalNoreadnum', (num) => 
				console.log('totalNoreadnum:',num);
				state.totalNoreadnum = num
			)
			state.chat.updateBadge()
		,
	,

如下是我测试的截图

感谢大家观看，我们下次见