Skip to content

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

feat: 获取头像昵称完善

parent d752ac6a
Show whitespace changes
Inline Side-by-side
Showing with 119 additions and 88 deletions
miniprogram/pages/index/index.ts
View file @ 3a6e0bfa
......@@ -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() {
methods: {
onShow() {
this.updateHomeInfo();
},
methods: {
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
View file @ 3a6e0bfa
<!-- 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
View file @ 3a6e0bfa
......@@ -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
View file @ 3a6e0bfa
// 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() {
const app = getApp<IAppOption>()
ComponentWithStore({
data: {
defaultInfo: defaultInfo,
userInfo: {
avatarUrl: defaultInfo.avatar,
nickName: defaultInfo.nickname,
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
canIUseGetUserProfile: wx.canIUse('getUserProfile'),
canIUseNicknameComp: wx.canIUse('input.type.nickname'),
},
/**
* 生命周期函数--监听页面显示
*/
methods: {
onShow() {
this.setData({
userInfo: {
avatarUrl: store.homeInfo.avatar || defaultInfo.avatar,
nickName: store.homeInfo.nickname || defaultInfo.nickname,
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
});
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
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,
})
}
}
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
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,
})
}
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
miniprogram/pages/my/my.wxml
View file @ 3a6e0bfa
<!--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">
<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>
<text class="nickname">用户名称</text>
<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
View file @ 3a6e0bfa
......@@ -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",
......
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