上传头像

mallApp/src/pages/home/recent.vue

@@ -16,9 +16,11 @@
       <view class="main-content">
         <!-- 个人中心版块 -->
         <view class="profile-section">
-          <view class="profile-header" @click="">
+          <view class="profile-header">
             <view class="avatar-container">
-              <image class="avatar" :src="user.smallAvatar" mode="aspectFill" />
+              <button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
+                <image class="avatar" :src="user.smallAvatar" mode="aspectFill" />
+              </button>
             </view>
             <view class="user-info">
               <text class="username">{{ user.name }}</text>
@@ -316,6 +318,39 @@ export default {
     goToBirthday() {
       // 跳转到生日填写页面
       this.pageTo({ url: '/pages/user/birthday' })
+    },
+    onChooseAvatar(e) {
+      if (e.detail.avatarUrl) {
+        this.user.smallAvatar = e.detail.avatarUrl
+        this.updateUserAvatar(e.detail.avatarUrl)
+      } else {
+        uni.showToast({
+          title: '获取头像失败',
+          icon: 'none'
+        })
+      }
+    },
+    updateUserAvatar(avatarUrl) {
+      let token = uni.getStorageSync('token') || ''
+      let url = 'http://api.shop.theflorist.cn/upload/save-file?actType=saveAvatar'
+      uni.uploadFile({
+        url: url,
+        filePath: avatarUrl,
+        name: 'file',
+        header: {
+          'token': token
+        },
+        formData: {},
+        success: (res) => {
+          const ret = JSON.parse(res.data);
+          if (ret.code == 1) {
+            //无操作
+          } else {
+            uni.showToast({ title: data.msg, icon: 'none' });
+          }
+        },
+        fail: () => uni.showToast({ title: '上传失败', icon: 'none' })
+      })
     }
   }
 };
@@ -404,6 +439,28 @@ page {
       margin-right: 30upx;
       flex-shrink: 0;
       
+      .avatar-button {
+        background: none !important;
+        border: none !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        line-height: 1;
+        display: block;
+        color: transparent !important;
+        
+        &::after {
+          border: none !important;
+        }
+        
+        &:active {
+          background: none !important;
+        }
+        
+        &:focus {
+          background: none !important;
+        }
+      }
+      
       .avatar {
         width: 110upx;
         height: 110upx;