feat: 获取头像昵称完善

miniprogram/pages/index/index.ts

@@ -18,6 +18,7 @@ ComponentWithStore({
         actions: {},
     },
     data: {
+        defaultInfo: defaultInfo,
         showGetPanel: false,
         showAlGetPanel: false,
         showPhoneBtn: false,
@@ -25,14 +26,13 @@ ComponentWithStore({
             avatarUrl: defaultInfo.avatar,
             nickName: '',
         },
-        hasUserInfo: false,
         canIUseGetUserProfile: wx.canIUse('getUserProfile'),
         canIUseNicknameComp: wx.canIUse('input.type.nickname'),
     },
-    async ready() {
-        this.updateHomeInfo();
-    },
     methods: {
+        onShow() {
+            this.updateHomeInfo();
+        },
         getPhoneNumber(e: any) {
             console.log(e.detail)
             console.log(e.detail.iv)
@@ -72,7 +72,6 @@ ComponentWithStore({
                         avatarUrl: store.homeInfo.avatar || defaultInfo.avatar,
                         nickName: store.homeInfo.nickname,
                     },
-                    hasUserInfo: store.homeInfo.nickname && store.homeInfo.avatar,
                 });
             }
 
@@ -153,7 +152,6 @@ ComponentWithStore({
                     console.log(res)
                     this.setData({
                         userInfo: res.userInfo,
-                        hasUserInfo: true
                     })
                 }
             })

miniprogram/pages/index/index.wxml

 <!-- index.wxml -->
 <view class="home_container">
   <swiper class="top_swiper" autoplay="{{homeInfo.banner.length == 1 ? false : true}}">
-    <swiper-item class="top_swiper_item" wx:for="{{homeInfo.topBanners}}" wx:key="{{index}}">
+    <swiper-item class="top_swiper_item" wx:for="{{homeInfo.topBanners}}" wx:key="index">
       <image class="swiper_item_img" src="{{item}}" lazy-load />
     </swiper-item>
   </swiper>
   <view class="user_info">
-    <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
-      <button class="avatar_box" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+    <block wx:if="{{canIUseNicknameComp}}">
+      <button wx:if="{{!userInfo.avatarUrl || userInfo.avatarUrl == defaultInfo.avatar}}" class="avatar_box" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
         <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
       </button>
-      <view class="nickname">
+      <view wx:else class="avatar_box">
+        <image class="avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
+      </view>
+      <view wx:if="{{!userInfo.nickName}}" class="nickname">
         <input type="nickname" class="nickname_input" placeholder="请输入昵称" bind:change="onInputChange" />
       </view>
+      <block wx:else>
+        <text class="nickname">{{userInfo.nickName}}</text>
+      </block>
     </block>
-    <!-- <block wx:elif="{{!hasUserInfo}}">
+    <!-- <block wx:elif="{{!userInfo.avatarUrl || userInfo.avatarUrl == defaultInfo.avatar || !userInfo.nickName}}">
       <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile">获取头像昵称</button>
       <view wx:else>请使用2.10.4及以上版本基础库</view>
     </block> -->
-    <block wx:else>
-      <view class="avatar_box">
-        <image class="avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
-      </view>
-      <text class="nickname">{{userInfo.nickName}}</text>
-    </block>
     <text class="tel">手机号:{{homeInfo.mobile || "-"}}</text>
   </view>
   <view class="content_info">
@@ -33,7 +33,7 @@
       <view class="content_act_list_title">热门活动</view>
       <view class="content_act_list_more" bindtap="jumpActPage">查看更多 ></view>
       <view class="act_list">
-        <image class="act_item" wx:for="{{homeInfo.activities}}" wx:key="{{index}}" src="{{item}}"></image>
+        <image class="act_item" wx:for="{{homeInfo.activities}}" wx:key="index" src="{{item}}"></image>
       </view>
     </view>
   </view>

miniprogram/pages/my/my.less

@@ -31,12 +31,12 @@
       background: url("https://yun.duiba.com.cn/polaris/mine_avator_bg.ce77699f44a26aa91f68b5d3a9281db72f5cbee4.png") no-repeat center center / 100%;
 
       .avatar {
-        width: 230rpx;
-        height: 230rpx;
+        width: 204rpx;
+        height: 204rpx;
         border-radius: 50%;
         position: absolute;
-        top: 2px;
-        left: 2px;
+        top: 4px;
+        left: 7px;
       }
     }
 

miniprogram/pages/my/my.ts

-// pages/my/my.ts
-Page({
+// my.ts
+// 获取应用实例
+import { ComponentWithStore } from "mobx-miniprogram-bindings";
+import { store } from "../../store/store";
+import { dbLogin } from "../../utils/request";
+import { _asyncThrottle, defaultInfo } from "../../utils/util";
 
-  /**
-   * 页面的初始数据
-   */
-  data: {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
+const app = getApp<IAppOption>()
 
+ComponentWithStore({
+  data: {
+    defaultInfo: defaultInfo,
+    userInfo: {
+      avatarUrl: defaultInfo.avatar,
+      nickName: defaultInfo.nickname,
+    },
+    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
+    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
   },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
+  methods: {
+    onShow() {
+      this.setData({
+        userInfo: {
+          avatarUrl: store.homeInfo.avatar || defaultInfo.avatar,
+          nickName: store.homeInfo.nickname || defaultInfo.nickname,
+        },
+      });
+    },
+    async onChooseAvatar(e: any) {
+      const { avatarUrl } = e.detail
+      console.log('avatarUrl', avatarUrl);
+
+      wx.getFileSystemManager().readFile({
+        filePath: e.detail.avatarUrl, //地址
+        encoding: 'base64', //编码格式
+        success: async (res) => {
+          let base64 = 'data:image/png;base64,' + res.data
+          const data = await store.doImgUpload(base64)
+          console.info('头像上传后data', data);
+          if (data) {
+            await dbLogin({
+              avatar: data,
+            });
+            const { nickName } = this.data.userInfo
+            this.setData({
+              "userInfo.avatarUrl": data,
+            })
+          }
+        }
+      })
+    },
+    async onInputChange(e: any) {
+      const nickName = e.detail.value
+      if (nickName) {
+        await dbLogin({
+          nickname: nickName,
+        });
+        const { avatarUrl } = this.data.userInfo
+        this.setData({
+          "userInfo.nickName": nickName,
+        })
+      }
+    },
+    getUserProfile() {
+      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
+      wx.getUserProfile({
+        desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
+        success: (res) => {
+          console.log(res)
+          this.setData({
+            userInfo: res.userInfo,
+          })
+        }
+      })
+    },
   },
 
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
-  }
-})
\ No newline at end of file
+})

miniprogram/pages/my/my.wxml

-<!--pages/my/my.wxml-->
+<!-- pages/my/my.wxml -->
 <view class="mine_container">
   <view class="mine_logo"></view>
   <view class="user_info">
-    <view class="avatar_box">
-      <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
-    </view>
-    <text class="nickname">用户名称</text>
+    <block wx:if="{{canIUseNicknameComp}}">
+      <button wx:if="{{!userInfo.avatarUrl || userInfo.avatarUrl == defaultInfo.avatar}}" class="avatar_box" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+        <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
+      </button>
+      <view wx:else class="avatar_box">
+        <image class="avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
+      </view>
+      <view wx:if="{{!userInfo.nickName}}" class="nickname">
+        <input type="nickname" class="nickname_input" placeholder="请输入昵称" bind:change="onInputChange" />
+      </view>
+      <block wx:else>
+        <text class="nickname">{{userInfo.nickName}}</text>
+      </block>
+    </block>
+    <!-- <block wx:elif="{{!userInfo.avatarUrl || userInfo.avatarUrl == defaultInfo.avatar || !userInfo.nickName}}">
+      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile">获取头像昵称</button>
+      <view wx:else>请使用2.10.4及以上版本基础库</view>
+    </block> -->
   </view>
   <view class="mine_list">
     <view class="mine_item">

project.private.config.json

@@ -10,6 +10,13 @@
   "condition": {
     "miniprogram": {
       "list": [
+        {
+          "name": "pages/index/index",
+          "pathName": "pages/index/index",
+          "query": "channel=11&city=杭州",
+          "launchMode": "default",
+          "scene": null
+        },
         {
           "name": "店铺id+城市",
           "pathName": "pages/index/index",