feat: 获取头像昵称

miniprogram/pages/index/index.less

@@ -65,6 +65,10 @@
       font-size: 30rpx;
       color: #824e00;
       text-shadow: 0px 1rpx 0px rgba(255, 222, 149, 0.96);
+
+      .nickname_input {
+        margin-top: -8rpx;
+      }
     }
 
     .tel {

miniprogram/pages/index/index.ts

@@ -4,17 +4,15 @@ import { ComponentWithStore } from "mobx-miniprogram-bindings";
 import { store } from "../../store/store";
 import { dbLogin, request } from "../../utils/request";
 import { API_PATH } from "../../utils/config";
-import { _asyncThrottle } from "../../utils/util";
+import { _asyncThrottle, defaultInfo } from "../../utils/util";
 
 const app = getApp<IAppOption>()
-const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
 
 ComponentWithStore({
     storeBindings: {
         store,
         fields: {
             homeInfo: () => store.homeInfo,
-            avatar: () => store.homeInfo.avatar || defaultAvatarUrl,
             mobile: () => store.homeInfo.mobile || "-",
         },
         actions: {},
@@ -24,7 +22,7 @@ ComponentWithStore({
         showAlGetPanel: false,
         showPhoneBtn: false,
         userInfo: {
-            avatarUrl: defaultAvatarUrl,
+            avatarUrl: defaultInfo.avatar,
             nickName: '',
         },
         hasUserInfo: false,
@@ -70,6 +68,11 @@ ComponentWithStore({
                     showGetPanel: channel && first,
                     showAlGetPanel: channel && !first,
                     showPhoneBtn: false,
+                    userInfo: {
+                        avatarUrl: store.homeInfo.avatar || defaultInfo.avatar,
+                        nickName: store.homeInfo.nickname,
+                    },
+                    hasUserInfo: store.homeInfo.nickname && store.homeInfo.avatar,
                 });
             }
 
@@ -83,37 +86,64 @@ ComponentWithStore({
             await this.updateHomeInfo();
         }),
 
+        // 跳转活动页
+        jumpActPage: _asyncThrottle(async function () {
+          wx.switchTab({ url: "/pages/activity/activity" })
+        }),
+
         closeGetPanel() {
             this.setData({
                 showGetPanel: false,
             });
+            // 定位权限未通过 先不做
+            // this.getPos()
         },
         closeAlGetPanel() {
             this.setData({
                 showAlGetPanel: false,
             });
+            // 定位权限未通过 先不做
+            // this.getPos()
         },
-        // 事件处理函数
-        bindViewTap() {
-            wx.navigateTo({
-                url: '../logs/logs',
-            })
+        getPos() {
+          wx.getLocation({
+            type: 'wgs84',
+            success (res) {
+              const latitude = res.latitude
+              const longitude = res.longitude
+              const speed = res.speed
+              const accuracy = res.accuracy
+            }
+           })
         },
-        onChooseAvatar(e: any) {
+        async onChooseAvatar(e: any) {
             const {avatarUrl} = e.detail
-            const {nickName} = this.data.userInfo
-            this.setData({
-                "userInfo.avatarUrl": avatarUrl,
-                hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
+            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,
+                  });
+                  await this.updateHomeInfo();
+                }
+              }
             })
         },
-        onInputChange(e: any) {
+        async onInputChange(e: any) {
             const nickName = e.detail.value
-            const {avatarUrl} = this.data.userInfo
-            this.setData({
-                "userInfo.nickName": nickName,
-                hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
-            })
+            if (nickName) {
+              await dbLogin({
+                nickname: nickName,
+              });
+              await this.updateHomeInfo();
+            }
         },
         getUserProfile() {
             // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗

miniprogram/pages/index/index.wxml

@@ -6,10 +6,24 @@
     </swiper-item>
   </swiper>
   <view class="user_info">
-    <view class="avatar_box">
-      <image class="avatar" src="{{avatar}}"></image>
-    </view>
-    <text class="nickname">我的用户名称</text>
+    <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
+      <button class="avatar_box" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+        <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
+      </button>
+      <view class="nickname">
+        <input type="nickname" class="nickname_input" placeholder="请输入昵称" bind:change="onInputChange" />
+      </view>
+    </block>
+    <!-- <block wx:elif="{{!hasUserInfo}}">
+      <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">
@@ -17,44 +31,14 @@
     <view class="content_sub" wx:if="{{!homeInfo.subscribe}}" bindtap="clickSubscribe">订阅消息</view>
     <view class="content_act_list">
       <view class="content_act_list_title">热门活动</view>
-      <view class="content_act_list_more">查看更多 ></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>
       </view>
     </view>
   </view>
-  <!-- <view class="userinfo">
-      <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
-        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
-          <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
-        </button>
-        <view class="nickname-wrapper">
-          <text class="nickname-label">昵称</text>
-          <input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
-        </view>
-      </block>
-      <block wx:elif="{{!hasUserInfo}}">
-        <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
-        <view wx:else> 请使用2.10.4及以上版本基础库 </view>
-      </block>
-      <block wx:else>
-        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
-        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
-      </block>
-    </view> -->
-  <!-- <button bindtap="changeStore">变更数据</button>
-  <view class="usermotto">
-    <text class="user-motto">{{homeInfo.name}}</text>
-  </view> -->
   <get-panel wx:if="{{showGetPanel}}" bind:close="closeGetPanel" />
   <al-get-panel wx:if="{{showAlGetPanel}}" bind:close="closeAlGetPanel" />
 </view>
-
-<!--获取手机号按钮-->
-<button
+<!-- 获取手机号按钮 -->
+<button type="primary" wx:if="{{showPhoneBtn}}" class="getPhoneBtn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
\ No newline at end of file
-    type="primary"
-    wx:if="{{showPhoneBtn}}"
-    class="getPhoneBtn"
-    open-type="getPhoneNumber"
-    bindgetphonenumber="getPhoneNumber"
-></button>

miniprogram/store/store.ts

@@ -25,7 +25,7 @@ class Store {
         //     title: '加载中',
         //     mask: true,
         // });
-        const {success, data} = await request({
+        const { success, data } = await request({
             url: API_PATH.index,
             data: params,
         });
@@ -46,7 +46,7 @@ class Store {
         //     title: '加载中',
         //     mask: true,
         // });
-        const {success, data} = await request({
+        const { success, data } = await request({
             url: API_PATH.activity,
         });
 
@@ -54,6 +54,25 @@ class Store {
 
         this.activityInfo = data;
     }
+
+    async doImgUpload(img64: string) {
+
+        // wx.showLoading({
+        //     title: '加载中',
+        //     mask: true,
+        // });
+        const { success, data } = await request({
+            url: API_PATH.imgUpload,
+            method: 'POST',
+            headers: {
+                "Content-Type": 'application/json'
+            },
+            data: { img64 }
+        });
+
+        if (!success) return '';
+        return data;
+    }
 }
 
 // 数据仓库

miniprogram/utils/config.ts

@@ -33,4 +33,5 @@ export enum API_PATH {
 	activity = "home/coop_activity.do",
 	subscribe = "home/coop_subscribe.do",
 	login = "/wechat/jlb/login",
+	imgUpload = "/customActivity/duiba/imgUploadUrl",
 }
\ No newline at end of file

miniprogram/utils/util.ts

@@ -52,3 +52,8 @@ export const _asyncThrottle = (fun, delay = 2000) => {
   };
 };
 
+/** 默认信息 */
+export const defaultInfo = {
+  avatar: 'https://yun.duiba.com.cn/polaris/default_avator.8fa52026c1f64f47730d58eb31668c7e5e60bb59.png',
+  nickname: "用户昵称"
+}