/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"></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()
},
},
}
如下是我测试的截图
感谢大家观看，我们下次见