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

<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>

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