fix: 文件上传、用户信息更新

src/App.vue

@@ -1,13 +1,7 @@
 <script>
-  import { updateVersion } from './utils/system';
-  import { setCache, getCache } from '@/utils/cache';
   import store from './store';
   export default {
     async onLaunch() {
-
-      //#ifdef MP-WEIXIN
-      // updateVersion();
-      //#endif
     store.dispatch('getAppSystemInfo')
 	  if(store.getters.scope === 'CUSTOMER'){
       uni.switchTab({

src/pages/client/clientUser/mine/setting/personInfo.vue

@@ -1,33 +1,34 @@
 <template>
   <view class="root">
-    <view>
+    <view class="content-box">
       <u-cell-group>
-        <u-cell title="头像">
+        <u-cell title="头像" @click="handlerUploadImg" isLink>
           <template slot="value">
-            <u-upload />
+            <u-avatar shape="square" size="60" :src="userInfo.avatar" @click.stop="viewAvatar(userInfo.avatar)"></u-avatar>
           </template>
         </u-cell>
-        <u-cell title="昵称">
-          <template slot="value">
-            <u-input />
+        <u-cell title="昵称" isLink>
+          <template slot="value" >
+            <u-input inputAlign="right" :border="false" v-model="userInfo.nickname" />
           </template>
         </u-cell>
-        <u-cell title="性别">
+        <u-cell title="性别" isLink>
           <template slot="value">
             <u-radio-group v-model="userInfo.gender">
-              <u-radio v-for="item in sexList" :label="item.text" :name="item.type" />
+              <u-radio v-for="item in sexList" :key="item.type" :label="item.text" :name="item.type" />
             </u-radio-group>
           </template>
         </u-cell>
       </u-cell-group>
     </view>
+    <view class="btn-box">
+      <u-button type="primary" shape="circle" @click="handlerSubmitBtn">确认</u-button>
+    </view>
   </view>
 </template>
 
 <script>
-  import {
-    editUserInfo,
-  } from "@/api/client/mine.js"
+import { uploadFile } from "@/utils/upload"
   export default {
     data() {
       return {
@@ -60,42 +61,26 @@
       this.userInfo.nickname = this.$store.getters.nickname
     },
     methods: {
+      viewAvatar(url){
+        uni.previewImage({
+          urls:[url]
+        })
+      },
       // 选择性别
       handlerSelectGender(item) {
         this.current = item.id
       },
-      // 选择时间
-      confirmTime(e) {
-        this.timeShow = false
-        let time = new Date(e.value)
-        let year = time.getFullYear()
-        let month = time.getMonth() + 1
-        let date = time.getDate()
-        if (month < 10) {
-          month = '0' + month
-        }
-        if (date < 10) {
-          date = '0' + date
-        }
-        this.queryParams.birthday = year + '-' + month + '-' + date
-
-      },
       // 上传头像
       async handlerUploadImg() {
-        try {
-          const res = await uni.showActionSheet({
-            itemList: ['拍照', '从相册选择'],
-          });
-
-          if (res.tapIndex === 0) {
-            // 用户选择拍照
-            this.takePhoto();
-          } else if (res.tapIndex === 1) {
-            // 用户选择从相册选择
-            this.chooseImage();
-          }
-        } catch (error) {
-          console.error(error);
+        const res = await uni.showActionSheet({
+          itemList: ['拍照', '从相册选择'],
+        });
+        if (res.tapIndex === 0) {
+          // 用户选择拍照
+          this.takePhoto();
+        } else if (res.tapIndex === 1) {
+          // 用户选择从相册选择
+          this.chooseImage();
         }
       },
       // 拍照
@@ -105,7 +90,6 @@
           count: 1,
           success: res => {
             const tempFilePaths = res.tempFilePaths;
-            // 调用上传图片的方法
             this.uploadAvatar(tempFilePaths[0]);
           },
           fail: error => {
@@ -120,7 +104,6 @@
           count: 1,
           success: res => {
             const tempFilePaths = res.tempFilePaths;
-            // 调用上传图片的方法
             this.uploadAvatar(tempFilePaths[0]);
           },
           fail: error => {
@@ -129,32 +112,21 @@
         });
       },
       // 上传头像
-      uploadAvatar(filePath) {
+      async uploadAvatar(filePath) {
         // 在这里实现上传头像的逻辑，将filePath作为参数传入
-        console.log("@@@@filePath", filePath)
-        this.queryParams.avatar = filePath;
-        this.$forceUpdate(); // 手动触发组件的重新渲染
+        const res = await uploadFile(filePath)
+        if(res.statusCode === 200 && res.data){
+          const resp = JSON.parse(res.data)
+          this.userInfo.avatar = resp.data.url
+        }
       },
 
       // 点击提交按钮
       handlerSubmitBtn() {
-        this.queryParams.gender = this.sexList[this.current].type
-        editUserInfo(this.queryParams).then(res=>{
-            if(res.code === 'OK'){
-              uni.showToast({
-                title:'修改成功',
-                icon:'none'
-              })
-              setTimeout(()=>{
-                uni.navigateBack(-1)
-              },1500)
-            }else{
-              uni.showToast({
-                title:res.msg,
-                icon:'none'
-              })
-              return
-            }
+        this.$store.dispatch('UpdateUserInfo',this.userInfo).then(res=>{
+          setTimeout(()=>{
+            uni.navigateBack(-1)
+          },1500)
         })
       }
     }
@@ -162,5 +134,19 @@
 </script>
 
 <style lang="scss" scoped>
-
+.root{
+  background-color: #f3f3f3;
+  height: calc(100vh -  env(safe-area-inset-top));
+  position: relative;
+  .content-box{
+    background-color: #fff;
+  }
+  .btn-box{
+    position: absolute;
+    bottom: 0;
+    padding: 32rpx 16rpx;
+    box-sizing: border-box;
+    width: 100%;
+  }
+}
 </style>

src/store/modules/app.js

@@ -14,6 +14,27 @@ export default {
   actions: {
     getAppSystemInfo({ commit }) {
       commit('SET_APP_SYSTEM', uni.getSystemInfoSync())
+    },
+    UpdateMiniVersion() {
+      const updateManager = wx.getUpdateManager();
+      updateManager.onCheckForUpdate(function (res) {
+        // 请求完新版本信息的回调
+      });
+      updateManager.onUpdateReady(function () {
+        uni.showModal({
+          title: '更新提示',
+          content: '新版本已经准备好，是否重启应用？',
+          success(res) {
+            if (res.confirm) {
+              // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
+              updateManager.applyUpdate();
+            }
+          },
+        });
+      });
+      updateManager.onUpdateFailed(function () {
+        // 新版本下载失败
+      });
     }
   },
 };

src/store/modules/user.js

@@ -42,17 +42,22 @@ export default {
       });
     },
     // 更新用户基本信息
-    UpdateUserInfo({ commit }, payload) {
+    UpdateUserInfo({ dispatch, commit }, payload) {
       return new Promise((resolve, reject) => {
         updateUserInfo(payload)
-          .then(res => {
-            commit('SET_USER_ID', res.data.id);
-            commit('SET_GENDER', res.data.gender);
-            commit('SET_AVATAR', res.data.avatar);
-            commit('SET_NICKNAME', res.data.nickname);
+          .then(async res => {
+            await dispatch('GetUserInfo')
+            uni.showToast({
+              title:'修改成功',
+              icon:'success',
+            })
             resolve(res)
           })
           .catch(err => {
+            uni.showToast({
+              title:'修改失败',
+              icon:'error',
+            })
             reject(err)
           })
       });

src/utils/system.js

@@ -1,42 +0,0 @@
-//获取系统信息
-function getSystemInfoAsync() {
-  return new Promise((resolve, reject) => {
-    uni.getSystemInfo({
-      success: res => {
-        resolve(res);
-      },
-      fail: err => {
-        reject(err);
-      },
-      complete: () => {},
-    });
-  });
-}
-
-// 更新系统
-function updateVersion() {
-  const updateManager = wx.getUpdateManager();
-
-  updateManager.onCheckForUpdate(function (res) {
-    // 请求完新版本信息的回调
-  });
-
-  updateManager.onUpdateReady(function () {
-    wx.showModal({
-      title: '更新提示',
-      content: '新版本已经准备好，是否重启应用？',
-      success(res) {
-        if (res.confirm) {
-          // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
-          updateManager.applyUpdate();
-        }
-      },
-    });
-  });
-
-  updateManager.onUpdateFailed(function () {
-    // 新版本下载失败
-  });
-}
-
-export { getSystemInfoAsync, updateVersion };

src/utils/upload.js

@@ -0,0 +1,39 @@
+import store from '@/store'
+import { getAccessToken } from './auth';
+
+function uploadFile(filePath) {
+  uni.showLoading({
+    title:"上传中..."
+  })
+  return new Promise((resolve, reject) => {
+    uni.uploadFile({
+      url: 'https://test.api.chelvc.com/maintain/file', //仅为示例，非真实的接口地址
+      filePath: filePath,
+      name: 'file',
+      header:{
+        'Content-Type': 'multipart/form-data',
+        platform: store.getters.app.system.osName.toUpperCase(),
+        terminal: 'APPLET', // TODO:
+        version: store.getters.app.system.appVersion.toUpperCase(),
+        // scope: store.getters.scope,
+        device: store.getters.app.system.deviceId,
+        timestamp: new Date().getTime(),
+        Authorization: `Bearer ${getAccessToken()}`
+      },
+      success: (res) => {
+        resolve(res)
+      },
+      fail: (err) => {
+        reject(err)
+      },
+      complete:()=>{
+        uni.hideLoading()
+      }
+    });
+  })
+
+}
+
+export {
+  uploadFile
+}