退出登录、修改个人头像

sfmind
1 parent 5e19beee
Showing 4 changed files with 114 additions and 21 deletions
yudao-ui-app/common/api.js
yudao-ui-app/pages/profile/profile.vue
yudao-ui-app/pages/user/user.vue
yudao-ui-app/store/index.js
@@ -3,6 +3,8 @@ const { http } = uni.$u
 /* login */
 //使用手机 + 密码登录
 export const passwordLogin = params => http.post('/app-api/member/login', params)
+//退出登录
+export const logout = params => http.post('/app-api/member/logout', params)
 //发送手机验证码
 export const sendSmsCode = params => http.post('/app-api/member/send-sms-code', params)
 //使用手机 + 验证码登录
@@ -10,6 +12,13 @@ export const smsLogin = params =&gt; http.post(&#39;/app-api/member/sms-login&#39;, params)
  
 //获取用户信息
 export const getUserInfo = params => http.get('/app-api/member/user/get', params)
+//修改用户头像
+export const updateAvatar = filePath =>
+  http.upload('/app-api/member/user/update-avatar', {
+    name: 'avatarFile',
+    fileType: 'image',
+    filePath: filePath
+  })
  
 /* index */
 // 获取滚动图数据
 <template>
-  <view class="container"> 个人资料 </view>
+  <view class="container">
+    <view class="user-info">
+      <view class="info-item">
+        <view class="label">头像：</view>
+        <view class="info" @click="handleAvatarClick">
+          <u-avatar size="60" :src="userInfo.avatar"></u-avatar>
+          <u-icon class="btn" name="arrow-right"></u-icon>
+        </view>
+      </view>
+      <view class="info-item">
+        <view class="label">昵称：</view>
+        <view class="info">
+          <view class="value">{{ userInfo.nickname }}</view>
+          <u-icon class="btn" name="edit-pen"></u-icon>
+        </view>
+      </view>
+      <view class="info-item">
+        <view class="label">手机：</view>
+        <view class="info">
+          <view class="value">{{ userInfo.mobile }}</view>
+          <u-icon class="btn" name="edit-pen"></u-icon>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
  
 <script>
+import { getUserInfo, updateAvatar } from '../../common/api'
+
 export default {
   data() {
     return {
-      title: ''
+      userInfo: {
+        nickname: '',
+        avatar: '',
+        mobile: ''
+      },
+      avatarFiles: []
     }
   },
-  onLoad() {},
-  methods: {}
+  onLoad() {
+    this.loadUserInfoData()
+  },
+  methods: {
+    loadUserInfoData() {
+      getUserInfo()
+        .then(res => {
+          this.userInfo = res.data
+        })
+        .catch(err => {
+          //console.log(err)
+        })
+    },
+    handleAvatarClick() {
+      uni.chooseImage({
+        success: chooseImageRes => {
+          const tempFilePaths = chooseImageRes.tempFilePaths
+          console.log(tempFilePaths)
+          updateAvatar(tempFilePaths[0])
+            .then(res => {
+              console.log(res)
+            })
+            .catch(err => {
+              //console.log(err)
+            })
+        }
+      })
+    }
+  }
 }
 </script>
  
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.user-info {
+  .info-item {
+    padding: 20rpx 60rpx;
+    border-bottom: $custom-border-style;
+    @include flex-space-between;
+    .label {
+      font-size: 30rpx;
+    }
+    .info {
+      @include flex-right;
+      .value {
+        font-size: 30rpx;
+      }
+      .btn {
+        margin-left: 30rpx;
+      }
+    }
+  }
+}
+</style>
@@ -71,7 +71,9 @@ export default {
       ]
     }
   },
-  onLoad() {},
+  onLoad() {
+    this.$store.dispatch('obtainUserInfo')
+  },
   methods: {
     loginOrJump(pageUrl) {
       if (!this.hasLogin) {
@@ -87,7 +89,7 @@ export default {
         success: res => {
           if (res.confirm) {
             console.log('用户点击确定')
-            this.$store.commit('logout')
+            this.$store.dispatch('logout')
           } else if (res.cancel) {
             console.log('用户点击取消')
           }
 import Vue from 'vue'
 import Vuex from 'vuex'
-import { getUserInfo } from '@/common/api'
+import { getUserInfo, logout } from '@/common/api'
  
 Vue.use(Vuex) // vue的插件机制
  
@@ -9,7 +9,7 @@ const store = new Vuex.Store({
   state: {
     openExamine: false, // 是否开启审核状态。用于小程序、App 等审核时，关闭部分功能。TODO 芋艿：暂时没找到刷新的地方
     token: uni.getStorageSync('token'), // 用户身份 Token
-    userInfo: {}, // 用户基本信息
+    userInfo: uni.getStorageSync('userInfo'), // 用户基本信息
     timerIdent: false // 全局 1s 定时器，只在全局开启一个，所有需要定时执行的任务监听该值即可，无需额外开启 TODO 芋艿：需要看看
   },
   getters: {
@@ -38,25 +38,29 @@ const store = new Vuex.Store({
       // 加载用户信息
       this.dispatch('obtainUserInfo')
     },
-    // 退出登录
-    logout(state) {
-      // 清空 Token
-      state.token = ''
+    // 更新用户信息
+    setUserInfo(state, data) {
+      state.userInfo = data
+      uni.setStorageSync('userInfo', data)
+    },
+    // 清空 Token 和 用户信息
+    clearLoginInfo(state) {
       uni.removeStorageSync('token')
-      // 清空用户信息 TODO 芋艿：这里 setTimeout 的原因是，上面可能还有一些 request 请求。后续得优化下
-      setTimeout(() => {
-        state.userInfo = {}
-      }, 1100)
+      state.token = ''
+      uni.removeStorageSync('userInfo')
+      state.userInfo = {}
     }
   },
   actions: {
     // 获得用户基本信息
     async obtainUserInfo({ state, commit }) {
       const res = await getUserInfo()
-      commit('setStateAttr', {
-        key: 'userInfo',
-        val: res.data
-      })
+      commit('setUserInfo', res.data)
+    },
+    // 退出登录
+    async logout({ state, commit }) {
+      commit('clearLoginInfo')
+      await logout()
     }
   }
 })