Profile.vue >

<template>
  <view class="profile">
    <u-navbar title="个人信息" :background="background">
    </u-navbar>
    <!-- 第一组cell -->
    <u-cell-group class="profile-content">
      <!-- 头像 -->
      <u-cell-item title="头像" :arrow="false" @tap="chooseAvatar">
        <view class="right-icon" slot="right-icon">
          <!-- 剪裁头像 -->
          <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
          <u-icon name="camera" class="camera"></u-icon>
        </view>
      </u-cell-item>
      <!-- 昵称 -->
      <u-cell-item title="昵称" :arrow="false" @tap="nickNameChange('nickName')">
        <view class="nick-right" slot="right-icon">
          <!-- 编辑状态 -->
          <u-input v-if="isEdit" class="edit-input" v-model="userInfo.nickName" input-align='right' :focus="true"
            :clearable="false" @confirm="inputNameChange('nickName')"></u-input>
          <!-- 一开始为非编辑状态 -->
          <block v-else>
            <view class="">{{userInfo.nickName}}</view>
            <u-icon name="edit-pen" color="#a2a2a2"></u-icon>
          </block>
        </view>
      </u-cell-item>
      <!-- 性别 -->
      <u-cell-item title="性别" :arrow="false">
        <view class="nick-right" slot="right-icon">
          <u-radio-group v-model="userInfo.gender" @change="radioGroupChange">
            <u-radio :name="1">男生</u-radio>
            <u-radio :name="0">女生</u-radio>
          </u-radio-group>
        </view>
      </u-cell-item>
      <!-- 个性签名 -->
      <u-cell-item title="个性签名" @tap="signatureChange">
      </u-cell-item>
    </u-cell-group>

    <!-- 第二组cell -->
    <u-cell-group class="profile-content">
      <u-cell-item title="手机号"></u-cell-item>
      <u-cell-item title="邮箱"></u-cell-item>
      <u-cell-item title="修改密码"></u-cell-item>
      <u-cell-item title="注销账号"></u-cell-item>

    </u-cell-group>
    <!-- 个性签名模态框 confirm点击确认触发-->
    <u-modal v-model="signShow" :show-cancel-button="true" title="个性签名" @confirm="signChange('personalSignature')">
      <view class="slot-content">
        <u-input v-model="userInfo.personalSignature" type="textarea" :border="true" height="150" :auto-height="true">
        </u-input>
      </view>
    </u-modal>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  import {
    mapState,
    mapActions
  } from 'vuex'
  import {
    Encrypt,
    EncryptMd5
  } from '@/utils/aes/aes.js'
  import userApi from '@/service/mine.js'
  import tokenApi from '@/service/token.js'
  export default {
    data() {
      return {
        background: {
          backgroundColor: '#f5f5f5'
        },
        isEdit: false, //最初为非编辑状态
        signShow: false,//个性签名模态框
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      })
    },
    methods: {
      ...mapActions(['changeUserInfoActions']),
      //获取用户信息请求 刷新vuex 
      getUserInfo() {
        userApi.getUserInfo().then(res => {
          if (res.meta.code === '200') {
            let info = res.data.data
            // 上面显示 昵称 与 头像  
            info.nickName = info.nickName ? info.nickName : '默认昵称'
            info.avatar = info.avatar ? info.avatar : '/static/me/avatar.jpeg'
            // 存储到vuex中
            this.changeUserInfoActions(info)
          }
        })
      },
      //更新用户信息请求
      updateProfile(info) {
        //console.log(this.userInfo[info]) //测试名
        tokenApi.createToken().then(res => { //请求到防止重复提交的token的接口后，再请求更新profile
          let params = {
            //比如avatar: this.userInfo[avatar] 就是找到this.userInfo.avatar
            [info]: this.userInfo[info],
            id: this.userInfo.id,
            token: res.data.token
          }
          //console.log(params)
          if (res.meta.code === '200') {
            userApi.updateProfile(params).then(res => {
              if (res.meta.code === '200') {
                //提示更新用户信息成功
                this.$refs.uToast.show({
                  title: '更新用户信息成功',
                  type: 'success',
                  icon: false
                })
                //**刷新vuex中数据 渲染
                this.getUserInfo()
                //console.log(this.userInfo.nickName)
              }
            }).catch(err => {
              this.$refs.uToast.show({
                title: err.meta.msg,
                type: 'error',
                icon: false
              })
            })
          }
        })
      },
      //点击cell框修改昵称
      nickNameChange(nickName) {
        //点击变成编辑状态
        this.isEdit = !this.isEdit
        if (!this.isEdit) { //点击后，为false也就是非编辑状态，才发送请求更新数据
          console.log(this.userInfo.nickName)
          this.updateProfile(nickName)
        }
      },
      //input框点击完成确认修改昵称
      inputNameChange(nickName){
        this.updateProfile(nickName)
        this.isEdit = false//改为非编辑状态
      },
      //更新性别
      radioGroupChange(e) { //e为v-model绑定的0/1
        console.log(e);//0,1
        console.log(this.userInfo.gender)//0,1
        this.updateProfile('gender')       
      },
      //修改个人签名
      signatureChange(){
        this.signShow=true
      },
      //在模态框中提交个人签名
      signChange(Signature){
        this.updateProfile(Signature)
      }
    }
  }
</script>

mine.js > api

import $http from './request.js'
import {Decrypt} from'@/utils/aes/aes.js'
 
export default {
  //获取用户信息
  getUserInfo() {
    return $http.request({
      url: '/member/getInfo',
      method: 'GET',
      header:{
      	"Content-Type": "application/json",
      	"Authorization": Decrypt(uni.getStorageSync('token'))
      }
    })
  },
  //修改个人信息
  updateProfile({token,...params}){
    return $http.request({
    	url: '/member/update',
    	method: 'POST',
      data:{
        ...params
      },
    	header:{
    		"Content-Type": "application/json",
        "token":token,
        "Authorization":Decrypt(uni.getStorageSync('token'))
    	}
    })
  }  
}