Skip to content

J
junlebao-milk-20240619
Commit d752ac6a authored by 俞嘉婷's avatar 俞嘉婷
Browse files
Options

feat: 获取头像昵称

parent 68ecf35c
Show whitespace changes
Inline Side-by-side
Showing with 102 additions and 59 deletions
miniprogram/pages/index/index.less
View file @ d752ac6a
......@@ -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
View file @ d752ac6a
......@@ -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
View file @ d752ac6a
......@@ -6,10 +6,24 @@
</swiper-item>
</swiper>
<view class="user_info">
<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="{{avatar}}"></image>
<image class="avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
</view>
<text class="nickname">我的用户名称</text>
<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
type="primary"
wx:if="{{showPhoneBtn}}"
class="getPhoneBtn"
open-type="getPhoneNumber"
bindgetphonenumber="getPhoneNumber"
></button>
<!-- 获取手机号按钮 -->
<button type="primary" wx:if="{{showPhoneBtn}}" class="getPhoneBtn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
\ No newline at end of file
miniprogram/store/store.ts
View file @ d752ac6a
......@@ -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
View file @ d752ac6a
......@@ -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
View file @ d752ac6a
......@@ -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: "用户昵称"
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment