Modify page img and update setting user name and avatar

pages/tabBar/user/user.js

@@ -1,115 +1,114 @@
-const app = getApp()
-const api = require('../../../request/api');
-const http = require('../../../request/http');
-const utils = require('../../../utils/util.js');
-const storeKeys = require('../../../utils/storageKeys.js');
+const app = getApp();
+const api = require("../../../request/api");
+const http = require("../../../request/http");
+const utils = require("../../../utils/util.js");
+const storeKeys = require("../../../utils/storageKeys.js");
 Page({
   data: {
-    showModal:false, //是否显示奖励金说明弹窗
-    showWithdrawalModal:false, //是否显示提现提示
+    showModal: false, //是否显示奖励金说明弹窗
+    showWithdrawalModal: false, //是否显示提现提示
+    showNicknameModal: false,
     isLoading: true, //是否处于加载
     sHome: false,
     isLogOn: false, //是否已登录
-    info:{},
-    todoCounts:{}, //待处理订单数
-  },
-  onLoad: function (options) {
-   
+    info: {},
+    todoCounts: {}, //待处理订单数
+    updatingNickname: "",
   },
+  onLoad: function (options) {},
   onShow() {
-    if(!utils.getStorageSync(storeKeys.TOKEN)){
+    if (!utils.getStorageSync(storeKeys.TOKEN)) {
       this.setData({
         isLogOn: false,
-        isLoading:false
-      })
-    }else{
+        isLoading: false,
+      });
+    } else {
       this.setData({
         isLogOn: true,
-      })
+      });
       this.getUserInfo();
       this.getTodoCounts();
     }
     this.changePageHaed();
     app.changeTabBarBadge(utils.getStorageSync(storeKeys.CARETOTAl));
   },
-  changePageHaed(){
+  changePageHaed() {
     let token = utils.getStorageSync(storeKeys.TOKEN);
-    if(token){
-      if(this.data.info.chara){
+    if (token) {
+      if (this.data.info.chara) {
         wx.setNavigationBarColor({
-          frontColor: '#ffffff',
-          backgroundColor: '#DF3120',
-        })
-      }else{
+          frontColor: "#ffffff",
+          backgroundColor: "#DF3120",
+        });
+      } else {
         wx.setNavigationBarColor({
-          frontColor: '#000000',
-          backgroundColor: '#F7F7F7',
-        })
+          frontColor: "#000000",
+          backgroundColor: "#F7F7F7",
+        });
       }
-    }else{
+    } else {
       wx.setNavigationBarColor({
-        frontColor: '#000000',
-        backgroundColor: '#F7F7F7',
-      })
+        frontColor: "#000000",
+        backgroundColor: "#F7F7F7",
+      });
     }
   },
   //获取用户信息
   getUserInfo() {
     http.request({
-      url: api.URL + '/api/user/info',
-      method: 'GET',
+      url: api.URL + "/api/user/info",
+      method: "GET",
       token: utils.getStorageSync(storeKeys.TOKEN),
-      success: (res) => {
+      success: res => {
         let info = res.data.data.userInfo;
         // 开发专用
-      
-        if(info.mobile == "17573207179"){
+
+        if (info.mobile == "17573207179") {
           // info.show_cash_box = true;
           // info.role = 1;
           // info.seller_grade = 3;
           info.grade_id = 10001;
-          info.is_pickup = 1
+          info.is_pickup = 1;
         }
         //是否为特殊身份
         let chara = false;
-        if((info.role && info.role !=1)|| info.show_cash_box){
+        if ((info.role && info.role != 1) || info.show_cash_box) {
           chara = true;
         }
         info.chara = chara;
         utils.setStorageSync(storeKeys.USERINFO, info);
         this.setData({
-          info
-        })
+          info,
+        });
         this.changePageHaed();
-        setTimeout(() => {  
+        setTimeout(() => {
           this.setData({
-            isLoading: false
+            isLoading: false,
           });
-        }, 300)
+        }, 300);
       },
-      error: (res) => {
-        utils.toast(res.data.message)
+      error: res => {
+        utils.toast(res.data.message);
       },
-    })
+    });
   },
   //获取用户待处理订单数
   getTodoCounts() {
     http.request({
-      url: api.URL + '/api/order/todoCounts',
-      method: 'GET',
+      url: api.URL + "/api/order/todoCounts",
+      method: "GET",
       token: utils.getStorageSync(storeKeys.TOKEN),
-      success: (res) => {
+      success: res => {
         this.setData({
-          todoCounts: res.data.data.counts || {}
-        })
+          todoCounts: res.data.data.counts || {},
+        });
       },
-      error: (res) => {
-        utils.toast(res.data.message)
+      error: res => {
+        utils.toast(res.data.message);
       },
-    })
+    });
   },
 
-
   navigateTo(e) {
     app.navigateTo(e);
   },
@@ -119,133 +118,186 @@ Page({
       app.navigateTo(e);
     } else {
       wx.navigateTo({
-        url: "/pages/tabBar/login/login"
-      })
+        url: "/pages/tabBar/login/login",
+      });
     }
   }),
   //提现
   withdrawal: utils.throttle(function (e) {
     if (utils.getStorageSync(storeKeys.TOKEN)) {
-      let ktxyj_amount = parseFloat(this.data.info.ktxyj_amount)
-      if(!ktxyj_amount || ktxyj_amount <= 0){
-        utils.toast("暂无可提现金额")
+      let ktxyj_amount = parseFloat(this.data.info.ktxyj_amount);
+      if (!ktxyj_amount || ktxyj_amount <= 0) {
+        utils.toast("暂无可提现金额");
         return;
       }
       wx.navigateTo({
-        url: "/pages/user/pages/withdrawal/withdrawal"
-      })
+        url: "/pages/user/pages/withdrawal/withdrawal",
+      });
     } else {
       wx.navigateTo({
-        url: "/pages/tabBar/login/login"
-      })
+        url: "/pages/tabBar/login/login",
+      });
     }
   }),
   //前往分销中心
-  goTopPomotionCenter: utils.throttle(function (e) { 
-    let role = this.data.info.role
+  goTopPomotionCenter: utils.throttle(function (e) {
+    let role = this.data.info.role;
     //1 :普通用户
-    let url = "/pages/user/pages/store/promotionCenter/promotionCenter?role="+role;
-    if(role == 1){
+    let url =
+      "/pages/user/pages/store/promotionCenter/promotionCenter?role=" + role;
+    if (role == 1) {
       url = "/pages/user/pages/store/applyRetail/applyRetail";
     }
     wx.navigateTo({
-      url: url
-    })
+      url: url,
+    });
   }),
   //显示奖励金说明弹窗
-  showModal(){
+  showModal() {
     this.setData({
-      showModal:true
-    })
+      showModal: true,
+    });
   },
   //隐藏奖励金说明弹窗
-  hideModal(){
+  hideModal() {
     this.setData({
-      showModal:false
-    })
+      showModal: false,
+    });
   },
-   //显示提现提示
-   showWithdrawalModal(){
+  //显示提现提示
+  showWithdrawalModal() {
     this.setData({
-      showWithdrawalModal:true
-    })
+      showWithdrawalModal: true,
+    });
   },
   //隐藏提现提示
-  hideWithdrawalModal(){
+  hideWithdrawalModal() {
     this.setData({
-      showWithdrawalModal:false
-    })
+      showWithdrawalModal: false,
+    });
   },
   //前往我的分享码
-  goToPoster: utils.throttle(function (e) { 
+  goToPoster: utils.throttle(function (e) {
     let url = "/pages/user/pages/appletIncomePoster/appletIncomePoster";
     wx.navigateTo({
-      url: url
-    })
+      url: url,
+    });
   }),
   //授权获取微信信息
-  getUserProfile: utils.throttle(function (e) { 
+  getUserProfile: utils.throttle(function (e) {
     wx.getUserProfile({
-      desc: '用于头像展示',
-      success: (res) => {
-        this.updateUserInfo(res.userInfo.avatarUrl, res.userInfo.nickName) 
-      }
-    })
+      desc: "用于头像展示",
+      success: res => {
+        this.updateUserInfo(res.userInfo.avatarUrl, res.userInfo.nickName);
+      },
+    });
   }),
-  updateUserInfo(avatarUrl, nickName) {
+  updateUserInfo(avatarUrl, nickName, updateType = "") {
     let data = {
       avatarUrl,
-      nickName
-    }
+      nickName,
+      ...(updateType ? { type: updateType } : {}),
+    };
     wx.showLoading({
       title: "加载中",
-      mask: true
+      mask: true,
     });
     http.request({
-      url: api.URL + '/api/user/upd',
-      method: 'POST',
+      url: api.URL + "/api/user/upd",
+      method: "POST",
       token: utils.getStorageSync(storeKeys.TOKEN),
       data,
-      success: (res) => {
-        wx.hideLoading()
-        this.getUserInfo()
+      success: res => {
+        wx.hideLoading();
+        this.getUserInfo();
       },
-      error: (res) => {
-        wx.hideLoading()
-        utils.toast(res.data.message)
+      error: res => {
+        wx.hideLoading();
+        utils.toast(res.data.message);
       },
-    })
+    });
   },
   //开通会员、前往会员中心
-  memberClick: utils.throttle(function (e) { 
+  memberClick: utils.throttle(function (e) {
     //is_member 是否为会员 1是 0否
-    if(this.data.info.is_member == 1){
+    if (this.data.info.is_member == 1) {
       wx.navigateTo({
-        url: "/pages/member/pages/memberCenter/memberCenter"
-      })
-    }else{
+        url: "/pages/member/pages/memberCenter/memberCenter",
+      });
+    } else {
       wx.navigateTo({
-        url: "/pages/member/pages/buyMember/buyMember"
-      })
+        url: "/pages/member/pages/buyMember/buyMember",
+      });
     }
   }),
   // 福利核销
   clickScanCode: utils.throttle(function (e) {
-    console.log("福利核销")
+    console.log("福利核销");
     let _this = this;
     wx.scanCode({
       success(res) {
-        console.log(res)
-        let result = res.result
+        console.log(res);
+        let result = res.result;
         try {
           wx.navigateTo({
-            url: "/pages/member/pages/writeOff/writeOff?hxCode=" + result
-          })
+            url: "/pages/member/pages/writeOff/writeOff?hxCode=" + result,
+          });
         } catch (e) {
           utils.toast("二维码错误");
         }
       },
-      fail() {}
-    })
+      fail() {},
+    });
   }),
-})
+  showNicknameInputModal() {
+    this.setData({
+      updatingNickname: this.data.info.nickName || "",
+      showNicknameModal: true,
+    });
+  },
+  hideNicknameModal() {
+    this.setData({
+      showNicknameModal: false,
+    });
+  },
+  updateNickName() {
+    this.updateUserInfo("", this.data.updatingNickname, "1");
+
+    this.hideNicknameModal();
+  },
+  onChooseAvatar(e) {
+    const { avatarUrl } = e.detail;
+    const _this = this;
+    wx.showLoading({
+      title: "上传中",
+      mask: true,
+    });
+    wx.uploadFile({
+      url: api.URL + "/api/upload/image",
+      filePath: avatarUrl,
+      name: "file",
+      header: {
+        "Access-Token": utils.getStorageSync(storeKeys.TOKEN),
+      },
+      success: function (res) {
+        let data = JSON.parse(res.data);
+        //重新上传
+        wx.showToast({
+          title: "上传成功",
+          icon: "success",
+          duration: 1500,
+        });
+        _this.updateUserInfo(data.data.fileInfo.preview_url, "", "2");
+        wx.hideLoading();
+      },
+      error: function (error) {
+        wx.showToast({
+          title: "上传失败",
+          icon: "error",
+          duration: 1500,
+        });
+        wx.hideLoading();
+      },
+    });
+  },
+});

pages/tabBar/user/user.wxml

@@ -16,14 +16,18 @@
             <view class="newHeadMain">
                 <!-- 用户信息部分 -->
                 <view class="logOnContent flex-c-bet">
-                    <view class="userInfo flex-c-c" bind:tap="getUserProfile">
+                    <view class="userInfo flex-c-c">
                         <view class="userHead">
-                            <image wx:if="{{info.avatar.ali_url}}" src="{{info.avatar.ali_url}}" mode="aspectFill"></image>
-                            <image wx:else src="/static/images/image_default_head.png" mode="aspectFill"></image>
-                            <image wx:if="{{info.is_member == 1}}" class="menmberIcon" src="/static/icon/hy_icon.png" mode="aspectFill"></image>
+                            <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+                                <image wx:if="{{info.avatar.ali_url}}" src="{{info.avatar.ali_url}}" mode="aspectFill"></image>
+                                <image wx:else src="/static/images/image_default_head.png" mode="aspectFill"></image>
+                                <image wx:if="{{info.is_member == 1}}" class="menmberIcon" src="/static/icon/hy_icon.png" mode="aspectFill"></image>
+                            </button>
                         </view>
                         <view class="nameBox">
-                            <view class="userName space {{info.chara?'chara':''}}">{{info.nick_name}}</view>
+                            <view class="userName space {{info.chara?'chara':''}}" bind:tap="showNicknameInputModal">
+                                {{info.nick_name}}
+                            </view>
                             <view class="newUserTagContent flex-c">
                                 <block>
                                     <view class="newUserTag {{info.show_cash_box?'showCash':''}}" wx:if="{{info.role == 1}}">
@@ -55,7 +59,9 @@
                                         <text wx:if="{{info.seller_grade == 3}}">超级推荐官</text>
                                     </view>
                                 </block>
-                                <view class="changeBtn flex-c-c {{info.chara?'chara':''}}">更新头像昵称</view>
+                                <view class="changeBtn flex-c-c {{info.chara?'chara':''}}" bind:tap="showNicknameInputModal">
+                                    更新昵称
+                                </view>
                             </view>
                         </view>
                     </view>
@@ -110,17 +116,25 @@
                                         <text>今日收益</text>
                                     </view>
                                     <view class="profit">
-                                        <view class="pr">{{textUtil.priceFixed(info.today_profits) || "0.00"}}</view>
-                                        <view>{{textUtil.priceStringUnit(info.today_profits)}}</view>
+                                        <view class="pr">
+                                            {{textUtil.priceFixed(info.today_profits) || "0.00"}}
+                                        </view>
+                                        <view>
+                                            {{textUtil.priceStringUnit(info.today_profits)}}
+                                        </view>
                                     </view>
                                 </view>
                                 <view class="profitItem" catchtap="withdrawal">
                                     <view class="title">
                                         <view>可提现金额</view>
-                                        <view class="goBot" catchtap="navigateToToken" data-url="/pages/user/pages/withdrawalList/withdrawalList">提现记录</view>
+                                        <view class="goBot" catchtap="navigateToToken" data-url="/pages/user/pages/withdrawalList/withdrawalList">
+                                            提现记录
+                                        </view>
                                     </view>
                                     <view class="profit">
-                                        <view class="pr">{{textUtil.priceFixed(info.ktxyj_amount)|| "0.00"}}</view>
+                                        <view class="pr">
+                                            {{textUtil.priceFixed(info.ktxyj_amount)|| "0.00"}}
+                                        </view>
                                         <view>{{textUtil.priceStringUnit(info.ktxyj_amount)}}</view>
                                     </view>
                                 </view>
@@ -131,7 +145,9 @@
                                         <text>待结算金额</text>
                                     </view>
                                     <view class="profit">
-                                        <view class="pr">{{textUtil.priceFixed(info.djs_amount) || "0.00"}}</view>
+                                        <view class="pr">
+                                            {{textUtil.priceFixed(info.djs_amount) || "0.00"}}
+                                        </view>
                                         <view>{{textUtil.priceStringUnit(info.djs_amount)}}</view>
                                     </view>
                                 </view>
@@ -145,8 +161,12 @@
                                         </view>
                                     </view>
                                     <view class="profit">
-                                        <view class="pr">{{textUtil.priceFixed(info.last_month_bonus) || "0.00"}}</view>
-                                        <view>{{textUtil.priceStringUnit(info.last_month_bonus)}}</view>
+                                        <view class="pr">
+                                            {{textUtil.priceFixed(info.last_month_bonus) || "0.00"}}
+                                        </view>
+                                        <view>
+                                            {{textUtil.priceStringUnit(info.last_month_bonus)}}
+                                        </view>
                                     </view>
                                     <view class="tool">
                                         <text>实际金额受退货影响</text>
@@ -362,4 +382,24 @@
             <view class="mButton flex-c-c" bind:tap="hideWithdrawalModal">知道了</view>
         </view>
     </view>
+</tui-modal>
+<tui-modal show="{{showNicknameModal}}" custom padding="0rpx" width="600rpx" radius="16rpx">
+    <view class="modalCustom">
+        <view class="closeModal" bind:tap="hideNicknameModal">
+            <image class="icon" src="/static/icon/icon_modal_x.png" mode="aspectFill"></image>
+        </view>
+        <view class="newModalTitle space">修改昵称</view>
+        <view class="newModalTool kw one">
+            <mp-form>
+                <mp-cells>
+                    <mp-cell title="昵称">
+                        <input type="nickname" class="weui-input" placeholder="请输入昵称" model:value="{{updatingNickname}}" />
+                    </mp-cell>
+                </mp-cells>
+            </mp-form>
+        </view>
+        <view class="newModalButtonBox flex-c-c">
+            <view class="mButton flex-c-c" bind:tap="updateNickName">确定</view>
+        </view>
+    </view>
 </tui-modal>

pages/tabBar/user/user.wxss

@@ -202,6 +202,10 @@ page{
     margin-right: 24rpx;
     position: relative;
 }
+.userHead .avatar-wrapper {
+    width: 100%;
+    height: 100%;
+}
 .userHead image{
     width: 100%;
     height: 100%;