其他分享
首页 > 其他分享> > uni-app 136修改用户个人资料(二)

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

作者:互联网

/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()
		},
	},
}

如下是我测试的截图

在这里插入图片描述
感谢大家观看,我们下次见

标签:dispatch,res,app,free,state,136,uni,user
来源: https://blog.csdn.net/ab15176142633/article/details/121419539