新增：修改个人信息（头像昵称）

api/upload.js

@@ -6,18 +6,13 @@ const api = {
 }
 
 // 图片上传
-export const image = (files) => {
+export const image = files => {
   // 文件上传大小, 2M
   const maxSize = 1024 * 1024 * 2
   // 执行上传
   return new Promise((resolve, reject) => {
     request.urlFileUpload({ files, maxSize })
-      .then(result => {
-        const fileIds = result.map(item => {
-          return item.data.fileInfo.file_id
-        })
-        resolve(fileIds, result)
-      })
+      .then(result => resolve(result.map(item => item.data.fileInfo.file_id), result))
       .catch(reject)
   })
 }

api/user.js

@@ -4,7 +4,8 @@ import request from '@/utils/request'
 const api = {
   userInfo: 'user/info',
   assets: 'user/assets',
-  bindMobile: 'user/bindMobile'
+  bindMobile: 'user/bindMobile',
+  personal: 'user/personal'
 }
 
 // 当前登录的用户信息
@@ -26,3 +27,8 @@ export const assets = (param, option) => {
 export const bindMobile = (data, option) => {
   return request.post(api.bindMobile, data, option)
 }
+
+// 修改个人信息（头像昵称）
+export const personal = (data, option) => {
+  return request.post(api.personal, data, option)
+}

pages.json

@@ -77,6 +77,12 @@
         "navigationBarTitleText": "绑定手机"
       }
     },
+    {
+      "path": "pages/user/personal/index",
+      "style": {
+        "navigationBarTitleText": "个人信息"
+      }
+    },
     {
       "path": "pages/article/index",
       "style": {

pages/user/index.vue

@@ -5,17 +5,16 @@
       <image class="bg-image" src="/static/background/user-header2.png" mode="scaleToFill"></image>
       <!-- 用户信息 -->
       <view v-if="isLogin" class="user-info">
-        <view class="user-avatar">
+        <view class="user-avatar" @click="handlePersonal()">
           <avatar-image :url="userInfo.avatar_url" :width="100" />
         </view>
         <view class="user-content">
           <!-- 会员昵称 -->
-          <view class="nick-name oneline-hide">{{ userInfo.nick_name }}</view>
+          <view class="nick-name oneline-hide" @click="handlePersonal()">{{ userInfo.nick_name }}</view>
           <!-- 会员等级 -->
           <view v-if="userInfo.grade_id > 0 && userInfo.grade" class="user-grade">
             <view class="user-grade_icon">
-              <image class="image"
-                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA0lBMVEUAAAD/tjL/tzH/uDP/uC7/tjH/tzH/tzL/tTH+tTL+tjP/tDD/tTD+tzD/tjL/szD/uDH/tjL/tjL+tjD/tjT/szb/tzL/tTL+uTH+tjL/tjL/tjL/tTT/tjL/tjL+tjH/uTL/vDD/tjL/tjH/tzL9uS//tTL/nBr/sS7/tjH/ujL/szD/uTv+rzf/tzL+tzH+vDP+uzL+tjP+ry7+tDL9ki/7szf/sEX/tTL/tjL+tjL/tTH/tTT/tzH/tzL/tjP/sTX/uTP/wzX+rTn/vDX9vC8m8ckhAAAAOXRSTlMAlnAMB/vjxKWGMh0S6drMiVxPRkEY9PLy0ru0sKagmo5+dGtgVCMgBP716eXWyMGxqJGRe2o5KSmFNjaYAAABP0lEQVQ4y8XS13KDMBAF0AWDDe4t7r3ETu9lVxJgJ/n/X8rKAzHG5TE+Twz3zki7I/g/KXdghIbGJewrU4yzn08Ebgl6TuZzzuOC6W5es3HX6qsSz3NFShRU0MpucytDmOSpu3yULx3CA9RD1HjVedc0jSjqm6ZzhUjDsFDQhSp/OKj5GQvg0+ZCOixsbtDLAeTTOm/yGi8GyIphIVsgH737FEDV44LJa88IRKK/SetrwT9G/GUIr6vXjoy4GXn7+RboVXnghuSjaoGecwQxL2su3CwAKlO+QFoqxI4FMctHQhQd2OhxTu184jWUlI+rMTBTn1/IQcJHQ6GQdZ7pWiDaNdhTt330efISeiqYwQEzQpTlsURJLhzkEmpCPsERfeIUVyXr6MNuIyp5uziW6xURtt7hhGwzmMNJExfO4Bd9X0ZPqAxdNwAAAABJRU5ErkJggg==">
+              <image class="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA0lBMVEUAAAD/tjL/tzH/uDP/uC7/tjH/tzH/tzL/tTH+tTL+tjP/tDD/tTD+tzD/tjL/szD/uDH/tjL/tjL+tjD/tjT/szb/tzL/tTL+uTH+tjL/tjL/tjL/tTT/tjL/tjL+tjH/uTL/vDD/tjL/tjH/tzL9uS//tTL/nBr/sS7/tjH/ujL/szD/uTv+rzf/tzL+tzH+vDP+uzL+tjP+ry7+tDL9ki/7szf/sEX/tTL/tjL+tjL/tTH/tTT/tzH/tzL/tjP/sTX/uTP/wzX+rTn/vDX9vC8m8ckhAAAAOXRSTlMAlnAMB/vjxKWGMh0S6drMiVxPRkEY9PLy0ru0sKagmo5+dGtgVCMgBP716eXWyMGxqJGRe2o5KSmFNjaYAAABP0lEQVQ4y8XS13KDMBAF0AWDDe4t7r3ETu9lVxJgJ/n/X8rKAzHG5TE+Twz3zki7I/g/KXdghIbGJewrU4yzn08Ebgl6TuZzzuOC6W5es3HX6qsSz3NFShRU0MpucytDmOSpu3yULx3CA9RD1HjVedc0jSjqm6ZzhUjDsFDQhSp/OKj5GQvg0+ZCOixsbtDLAeTTOm/yGi8GyIphIVsgH737FEDV44LJa88IRKK/SetrwT9G/GUIr6vXjoy4GXn7+RboVXnghuSjaoGecwQxL2su3CwAKlO+QFoqxI4FMctHQhQd2OhxTu184jWUlI+rMTBTn1/IQcJHQ6GQdZ7pWiDaNdhTt330efISeiqYwQEzQpTlsURJLhzkEmpCPsERfeIUVyXr6MNuIyp5uziW6xURtt7hhGwzmMNJExfO4Bd9X0ZPqAxdNwAAAABJRU5ErkJggg==">
               </image>
             </view>
             <view class="user-grade_name">
@@ -334,6 +333,11 @@
         !this.isLogin && this.$navTo('pages/login/index')
       },
 
+      // 跳转到修改个人信息页
+      handlePersonal() {
+        this.$navTo('pages/user/personal/index')
+      },
+
       // 退出登录
       handleLogout() {
         const app = this

pages/user/personal/index.vue

@@ -0,0 +1,235 @@
+<template>
+  <view class="container">
+    <!-- 标题 -->
+    <view class="page-title">个人信息</view>
+    <!-- 表单组件 -->
+    <view class="form-wrapper">
+      <u-form :model="form" ref="uForm" label-width="140rpx">
+        <u-form-item label="头像">
+          <button class="btn-normal" open-type="chooseAvatar" @click="onClickAvatar()" @chooseavatar="onChooseAvatar">
+            <avatar-image :url="avatarUrl" :width="100" />
+          </button>
+        </u-form-item>
+        <u-form-item label="昵称" prop="nickName">
+          <u-input v-model="form.nickName" type="nickname" maxlength="12" placeholder="请输入昵称" @input="onInputNickName" @blur="onInputNickName" />
+        </u-form-item>
+      </u-form>
+    </view>
+    <!-- 操作按钮 -->
+    <view class="footer">
+      <view class="btn-wrapper">
+        <view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">保存</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import store from '@/store'
+  import AvatarImage from '@/components/avatar-image'
+  import * as UserApi from '@/api/user'
+  import * as UploadApi from '@/api/upload'
+
+  // 表单验证规则
+  const rules = {
+    nickName: [{
+      required: true,
+      message: '请输入用户昵称',
+      trigger: ['blur', 'change']
+    }]
+  }
+
+  export default {
+    components: {
+      AvatarImage
+    },
+    data() {
+      return {
+        // 按钮禁用
+        disabled: false,
+        // 头像路径 (用于显示)
+        avatarUrl: '',
+        // 临时图片 (用于上传)
+        tempFile: null,
+        // 表单数据
+        form: {
+          avatarId: '',
+          nickName: ''
+        },
+        // 验证规则
+        rules,
+      }
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad() {
+      // 获取当前用户信息
+      this.getUserInfo()
+    },
+
+    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
+    onReady() {
+      this.$refs.uForm.setRules(this.rules)
+    },
+
+    methods: {
+
+      // 获取当前用户信息
+      getUserInfo() {
+        const app = this
+        UserApi.info()
+          .then(result => {
+            const userInfo = result.data.userInfo
+            app.avatarUrl = userInfo.avatar_url
+            app.form.avatarId = userInfo.avatar_id
+            app.form.nickName = userInfo.nick_name
+          })
+      },
+
+      // 点击头像按钮事件
+      onClickAvatar() {
+        // #ifdef MP-WEIXIN
+        return
+        // #endif
+        this.chooseImage()
+      },
+
+      // 选择头像事件 - 仅限微信小程序
+      // #ifdef MP-WEIXIN
+      onChooseAvatar({ detail }) {
+        const app = this
+        app.avatarUrl = detail.avatarUrl
+        app.tempFile = { path: app.avatarUrl }
+      },
+      // #endif
+
+      // 选择图片
+      chooseImage() {
+        const app = this
+        // 选择图片
+        uni.chooseImage({
+          count: 1,
+          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+          success({ tempFiles }) {
+            app.tempFile = tempFiles[0]
+            app.avatarUrl = app.tempFile.path
+          }
+        });
+      },
+
+      // 上传图片
+      uploadFile() {
+        const app = this
+        return UploadApi.image([app.tempFile])
+          .then(fileIds => {
+            app.form.avatarId = fileIds[0]
+            app.tempFile = null
+          })
+      },
+
+      // 确认修改
+      async handleSubmit() {
+        const app = this
+        // 判断是否重复提交
+        if (app.disabled === true) return
+        app.$refs.uForm.validate(async valid => {
+          if (valid) {
+            // 按钮禁用
+            app.disabled = true
+            // 先上传头像图片
+            if (app.tempFile) {
+              await app.uploadFile()
+            }
+            // 提交保存个人信息
+            UserApi.personal({ form: app.form })
+              .then(result => {
+                app.$toast(result.message)
+                setTimeout(() => {
+                  app.disabled = false
+                  uni.navigateBack()
+                }, 1500)
+              })
+              .catch(err => app.disabled = false)
+          }
+        })
+      },
+
+      // 绑定昵称输入框 (用于微信小程序端快速填写昵称能力)
+      onInputNickName(val) {
+        if (val) {
+          this.form.nickName = val
+        }
+      }
+
+    }
+  }
+</script>
+
+<style>
+  page {
+    background: #f7f8fa;
+  }
+</style>
+<style lang="scss" scoped>
+  .container {}
+
+  .page-title {
+    width: 94%;
+    margin: 0 auto;
+    padding-top: 40rpx;
+    font-size: 28rpx;
+    color: rgba(69, 90, 100, 0.6);
+  }
+
+  .form-wrapper {
+    margin: 20rpx auto 20rpx auto;
+    padding: 0 40rpx;
+    width: 94%;
+    box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
+    border-radius: 16rpx;
+    background: #fff;
+  }
+
+  /* 底部操作栏 */
+
+  .footer {
+    margin-top: 80rpx;
+
+    .btn-wrapper {
+      height: 100%;
+      // display: flex;
+      // align-items: center;
+      padding: 0 20rpx;
+    }
+
+    .btn-item {
+      flex: 1;
+      font-size: 28rpx;
+      height: 86rpx;
+      color: #fff;
+      border-radius: 50rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .btn-item-wechat {
+      background: #0ba90b;
+      margin-bottom: 26rpx;
+    }
+
+    .btn-item-main {
+      background: linear-gradient(to right, #f9211c, #ff6335);
+      color: #fff;
+
+      // 禁用按钮
+      &.disabled {
+        opacity: 0.6;
+      }
+    }
+
+  }
+</style>