小程序：个人中心

htmldev/wxMini/api/common.js

@@ -64,11 +64,10 @@ export const updateUserInfo = (obj) => request({
   url: '/api/user/update/info',
   method: 'POST',
   data: {
-    // 'user_head_img_url': '', // 用户头像
-    // 'user_nickname': '', // 用户昵称
+    // 'user_nickname': 'sd', // 用户昵称
+    // 'user_head_img_url': 'sdsff', // 用户头像
     // 'user_sex': 1, // 性别(1男2女)
-    // 'user_birthday': '', // 用户生日
-    // 'user_address': '', // 用户地址
+    // 'user_address': 'sdsdsdsugddug', // 地址
     ...obj
   },
   showLoading: true

htmldev/wxMini/pages/mine/mine.js

@@ -1,4 +1,6 @@
 const uploadJS = require('../../mixin/upload.js')
+const { updateUserInfo, userLoginOut } = require('../../api/common')
+const app = getApp()
 
 Page({
 
@@ -7,19 +9,14 @@ Page({
    */
   data: {
     form: {
-      portrait: [
-        {
-          // 'size': 334651,
-          // 'type': 'image',
-          'url': 'https://tuotuoyinfu-oss.oss-cn-beijing.aliyuncs.com/images/user/bashi6321a03279686.png',
-          // 'thumb': 'http://tmp/QX9dnkXe4ReH079e47eade53d725108d13bee07b6b05.png',
-          // 'filePath': 'http://tmp/QX9dnkXe4ReH079e47eade53d725108d13bee07b6b05.png',
-          'formkey': 'portrait'
-        }
-      ],
-      nickname: '',
+      user_head_img_url: '',
+      user_nickname: '',
       account: ''
     },
+    user_head_img_url: [],
+    user_nickname: '',
+    isAutoFocus: false,
+    booNickname: false,
     booLogout: false,
     booLock: false
   },
@@ -59,17 +56,86 @@ Page({
 
   },
   ...uploadJS,
-  uploadCallBack(arr) {
-    // const temp = res.map(item => {
-    //   return {
-    //     'url': item.url,
-    //     'formkey': item.formkey
-    //   }
-    // })
-    //
-    // this.setData({
-    //   [`form.${formkey}`]: this.data.form[formkey].concat(...temp)
-    // })
+  // 图片上传成功回调
+  uploadCallBack(res) {
+    const temp = res.map(item => {
+      return {
+        'url': item.url,
+        'formkey': item.formkey
+      }
+    })
+    let formkey = ''
+    if (temp.length > 0) {
+      formkey = temp[0].formkey
+    }
+
+    if (formkey === 'user_head_img_url') {
+      this._updateUserInfo(formkey, temp[0].url, this.data.form.user_head_img_url)
+    }
+  },
+  // 有昵称时：编辑昵称
+  editNickname() {
+    this.setData({
+      user_nickname: this.data.form.user_nickname,
+      booNickname: true
+    })
+
+    setTimeout(() => {
+      this.setData({
+        isAutoFocus: true
+      })
+    }, 500)
+  },
+  bindInput(e) {
+    this.setData({
+      user_nickname: e.detail.value.trim()
+    })
+  },
+  // 失去焦点：编辑昵称
+  bindblur() {
+    const user_nickname = this.data.user_nickname
+    if (user_nickname.length < 1) {
+      this.setData({
+        booNickname: false
+      })
+      return
+    }
+    this._updateUserInfo('user_nickname', user_nickname, this.data.form.user_nickname)
+  },
+  async _updateUserInfo(key, newVal, oldVal) {
+    let val = newVal
+    try {
+      const { status, msg } = await updateUserInfo({ [key]: newVal })
+      if (status) {
+        await app.fetchUserData()
+      } else {
+        wx.showToast({
+          title: msg,
+          icon: 'none'
+        })
+      }
+    } catch (e) {
+      val = oldVal
+    }
+
+    const temp = {
+      [`form.${key}`]: val
+    }
+
+    if (key === 'user_head_img_url') {
+      temp.user_head_img_url = [
+        {
+          'url': val,
+          'formkey': key
+        }
+      ]
+    }
+
+    if (key === 'user_nickname') {
+      temp.booNickname = false
+    }
+
+    this.setData(temp)
   },
   jump(e) {
     const { page } = e.currentTarget.dataset

htmldev/wxMini/pages/mine/mine.scss

@@ -22,12 +22,14 @@
 
   input {
     width: 100%;
+    height: 50rpx;
     font-size: 36rpx;
     color: rgba(51, 51, 51, 1);
     text-align: center;
   }
 
   text {
+    height: 50rpx;
     font-size: 36rpx;
     color: rgba(51, 51, 51, 1);
   }
@@ -61,7 +63,7 @@
   padding: 37rpx 34rpx 29rpx;
   margin-bottom: 20rpx;
   border-radius: 20rpx;
-  //background: green;
+  background: green;
 
   .describe {
     line-height: 48rpx;

htmldev/wxMini/pages/mine/mine.wxml

@@ -3,12 +3,12 @@
     class="portrait">
     <view class="van-uploader-wrap">
       <van-uploader
-        file-list="{{ form.portrait }}"
+        file-list="{{ user_head_img_url }}"
         max-count="1"
         accept="image"
         deletable="{{false}}"
         preview-size="169rpx"
-        data-formkey="portrait"
+        data-formkey="user_head_img_url"
         preview-full-image="{{false}}"
         bind:click-preview="uploadImg"
         bind:after-read="afterRead"
@@ -16,18 +16,30 @@
     </view>
   </view>
   <view class="nickname-wrap">
-    <block wx:if="{{true}}">
-      <text>农户1234</text>
-      <image src=""></image>
+    <block
+      wx:if="{{form.user_nickname.length > 0 && !booNickname}}">
+      <text
+        bind:tap="editNickname">{{form.user_nickname}}</text>
+      <image
+        src=""
+        bind:tap="editNickname"></image>
     </block>
-    <block wx:if="{{false}}">
-      <input
-        placeholder-class="app_header-search-placeholder"
-        value=""
-        placeholder="请输入昵称"></input>
+    <block wx:else>
+      <input value="{{user_nickname}}"
+             bindinput="bindInput"
+             bindblur="bindblur"
+             class="nickname"
+             type="nickname"
+             focus="{{isAutoFocus}}"
+             placeholder="请输入昵称"
+             cursor-spacing="{{52}}"
+             placeholder-class="app_header-search-placeholder"/>
     </block>
   </view>
-  <view class="account">账号：12345678900</view>
+  <view
+    class="account"
+    style="visibility: {{form.account ? 'visible' : 'hidden'}};">账号：{{form.account}}
+  </view>
   <view class="main">
     <view
       class="business-account"

htmldev/wxMini/project.private.config.json

@@ -8,7 +8,7 @@
       "list": [
         {
           "name": "1111",
-          "pathName": "pages/businessGoodsEdit/businessGoodsEdit",
+          "pathName": "pages/mine/mine",
           "query": "",
           "launchMode": "default",
           "scene": null