标签：dispatch res app free state 136 uni user

/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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。