U:wx.getUserProfile接口失效后,新增修改用户头像和昵称的页面。

This commit is contained in:
iamdarcy 2023-04-11 12:18:23 +08:00
parent 353cad572e
commit 0716b4471c
12 changed files with 490 additions and 379 deletions

35
app.js
View File

@ -13,29 +13,18 @@ App({
wx.setStorageSync('logs', logs) wx.setStorageSync('logs', logs)
// 登录 // 登录
wx.login({ wx.login({
success: res => { success: (res) => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId util.request(api.AuthLoginByWeixin, {
code: res.code
}, 'POST').then(function (res) {
if (res.errno === 0) {
let userInfo = res.data.userInfo;
wx.setStorageSync('token', res.data.token);
wx.setStorageSync('userInfo', userInfo);
} }
}) });
// 获取用户信息 },
wx.getSetting({ });
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
let that = this; let that = this;
wx.getSystemInfo({ // 获取页面的有关信息 wx.getSystemInfo({ // 获取页面的有关信息
success: function (res) { success: function (res) {
@ -46,7 +35,6 @@ App({
that.globalData.hh = hh; that.globalData.hh = hh;
} }
}); });
}, },
globalData: { globalData: {
userInfo: { userInfo: {
@ -56,5 +44,4 @@ App({
}, },
token: '', token: '',
} }
}) })

View File

@ -1,8 +1,10 @@
// const ApiRootUrl = 'http://localhost:8360/api/'; const ApiRoot = 'http://localhost:8361';
// const ApiRootUrl = 'http://192.168.0.108:8360/api/'; // const ApiRoot = 'http://192.168.0.113:8361';
const ApiRootUrl = 'https://www.guxiaoling.com:8466/api/'; // const ApiRoot = 'https://www.qile.club:8688';
const ApiRootUrl = ApiRoot + '/api/'
module.exports = { module.exports = {
ApiRoot: ApiRoot,
// 登录 // 登录
AuthLoginByWeixin: ApiRootUrl + 'auth/loginByWeixin', //微信登录 AuthLoginByWeixin: ApiRootUrl + 'auth/loginByWeixin', //微信登录
// 首页 // 首页
@ -52,6 +54,7 @@ module.exports = {
ShowSettings: ApiRootUrl + 'settings/showSettings', ShowSettings: ApiRootUrl + 'settings/showSettings',
SaveSettings: ApiRootUrl + 'settings/save', SaveSettings: ApiRootUrl + 'settings/save',
SettingsDetail: ApiRootUrl + 'settings/userDetail', SettingsDetail: ApiRootUrl + 'settings/userDetail',
UploadAvatar: ApiRootUrl + 'upload/uploadAvatar',
GetBase64: ApiRootUrl + 'qrcode/getBase64', //获取商品详情二维码 GetBase64: ApiRootUrl + 'qrcode/getBase64', //获取商品详情二维码
}; };

BIN
images/icon/nick.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -42,6 +42,7 @@ Page({
let code = ''; let code = '';
wx.login({ wx.login({
success: (res) => { success: (res) => {
console.log(res)
code = res.code; code = res.code;
}, },
}); });
@ -52,6 +53,7 @@ Page({
success: (res) => { success: (res) => {
let loginParams = { let loginParams = {
code: code, code: code,
app: 3,
encryptedData: res.encryptedData, encryptedData: res.encryptedData,
iv: res.iv, iv: res.iv,
rawData: res.rawData, rawData: res.rawData,

View File

@ -4,13 +4,12 @@
<view class='content'> <view class='content'>
开源微信小程序商城 开源微信小程序商城
</view> </view>
<view class="line"></view> <view class="img-wrap">
<view class="content">开发者:盛良</view> <image mode="aspectFill" class="code-img" src="https://www.qile.club/qrcode.jpg" show-menu-by-longpress="{{true}}"></image>
<view class="content">微信lookgxl</view> </view>
<view class="line"></view>
<view class='content'> <view class='content'>
更多信息访问hiolabs.com 更多信息访问qile.club
</view> </view>
</view> </view>
<!-- <ad unit-id="adunit-1776b4f8f2217197" ad-type="video" ad-theme="white"></ad> --> <ad unit-id="adunit-1776b4f8f2217197" ad-type="video" ad-theme="white"></ad>
</view> </view>

View File

@ -14,7 +14,7 @@ page {
.about-wrap { .about-wrap {
background: #fff; background: #fff;
padding: 50rpx 40rpx; padding: 0 40rpx;
} }
.title { .title {
@ -32,8 +32,19 @@ page {
text-indent: 56rpx; text-indent: 56rpx;
line-height: 50rpx; line-height: 50rpx;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 20rpx;
} }
.img-wrap{
display: flex;
width: 100%;
justify-content: center;
}
.code-img{
width: 550rpx;
height: 750rpx;
}
.line { .line {
height: 1rpx; height: 1rpx;
border-top: 1rpx solid #f1f1f1; border-top: 1rpx solid #f1f1f1;

View File

@ -10,8 +10,10 @@ Page({
data: { data: {
userInfo: {}, userInfo: {},
hasUserInfo: false, hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
status: {}, status: {},
root: api.ApiRoot,
is_new: 0,
root: api.ApiRoot
}, },
goProfile: function (e) { goProfile: function (e) {
let res = util.loginNow(); let res = util.loginNow();
@ -52,32 +54,63 @@ Page({
}); });
} }
}, },
goAuth: function(e) { // goAuth: function (e) {
wx.navigateTo({ // wx.navigateTo({
url: '/pages/app-auth/index', // url: '/pages/app-auth/index',
// });
// },
goAuth() {
let code = '';
let that = this;
wx.login({
success: (res) => {
code = res.code;
that.postLogin(code)
},
});
},
postLogin(code) {
let that = this;
util.request(api.AuthLoginByWeixin, {
code: code
}, 'POST').then(function (res) {
if (res.errno === 0) {
let userInfo = res.data.userInfo;
that.setData({
is_new: res.data.is_new,
userInfo: userInfo,
hasUserInfo: true
})
wx.setStorageSync('token', res.data.token);
wx.setStorageSync('userInfo', userInfo);
app.globalData.token = res.data.token;
}
}); });
}, },
onLoad: function (options) { onLoad: function (options) {
this.goAuth();
}, },
onShow: function () { onShow: function () {
let userInfo = wx.getStorageSync('userInfo');
if(userInfo == ''){
this.setData({
hasUserInfo: 0,
});
}
else{
this.setData({
hasUserInfo: 1,
});
}
this.setData({
userInfo: userInfo,
});
this.getOrderInfo(); this.getOrderInfo();
this.getSettingsDetail();
wx.removeStorageSync('categoryId'); wx.removeStorageSync('categoryId');
}, },
getSettingsDetail() {
let that = this;
util.request(api.SettingsDetail).then(function (res) {
console.log(res)
if (res.errno === 0) {
let userInfo = res.data;
console.log('userInfo')
console.log(userInfo)
// wx.setStorageSync('userInfo', userInfo);
that.setData({
userInfo: userInfo,
hasUserInfo: true
});
}
});
},
onPullDownRefresh: function () { onPullDownRefresh: function () {
wx.showNavigationBarLoading() wx.showNavigationBarLoading()
this.getOrderInfo(); this.getOrderInfo();

View File

@ -1,6 +1,6 @@
<view class="container"> <view class="container">
<view class="userinfo"> <view class="userinfo">
<view class='head-wrap' wx:if="{{hasUserInfo == 0}}" bindtap='goAuth'> <view class='head-wrap' wx:if="{{hasUserInfo == false}}" bindtap='goAuth'>
<view class="no-login-avatar"> <view class="no-login-avatar">
<view class='no-avatar'> <view class='no-avatar'>
<image class='avatar' src="/images/icon/default_avatar_big.png"></image> <image class='avatar' src="/images/icon/default_avatar_big.png"></image>
@ -11,7 +11,7 @@
<view class='head-wrap' wx:else bindtap='goProfile'> <view class='head-wrap' wx:else bindtap='goProfile'>
<view class="head-l"> <view class="head-l">
<view class='l'> <view class='l'>
<image class='avatar' src="{{userInfo.avatar}}"></image> <image class='avatar' src="{{root + userInfo.avatar}}"></image>
</view> </view>
<view class='r'> <view class='r'>
<view class='t'> <view class='t'>

View File

@ -1,36 +1,63 @@
var util = require('../../../utils/util.js'); var util = require('../../../utils/util.js');
var api = require('../../../config/api.js'); var api = require('../../../config/api.js');
var app = getApp();
Page({ Page({
data: { data: {
name: '', name: '',
nickName: '',
mobile: '', mobile: '',
status: 0, avatarUrl: '/static/images/default_avatar.png',
hasAvatar: 0,
root: api.ApiRoot
},
onChooseAvatar(e) {
const {
avatarUrl
} = e.detail
this.setData({
avatarUrl,
})
let that = this;
wx.uploadFile({
url: api.UploadAvatar,
filePath: avatarUrl,
name: 'upload_file',
formData: {
// 'userId': 'test'
},
success(res) {
if (res.statusCode == 200) {
let re = res.data
let echo = JSON.parse(re);
console.log(echo);
let data = echo.data;
let avatarUrl = data.fileUrl
console.log(avatarUrl)
that.setData({
avatarUrl: avatarUrl,
hasAvatar: 1
})
}
}
})
}, },
mobilechange(e) { mobilechange(e) {
let mobile = e.detail.value; let mobile = e.detail.value;
this.setData({ this.setData({
mobile: mobile, mobile: mobile,
status: 0
}); });
if (util.testMobile(mobile)) { },
bindinputNickName(event) {
let nickName = event.detail.value;
this.setData({ this.setData({
mobile: mobile, nickName: nickName,
status: 1
}); });
}
}, },
bindinputName(event) { bindinputName(event) {
let name = event.detail.value; let name = event.detail.value;
let mobile = this.data.mobile;
this.setData({ this.setData({
name: name, name: name,
}); });
if (util.testMobile(mobile)) {
this.setData({
status: 1
});
}
}, },
getSettingsDetail() { getSettingsDetail() {
let that = this; let that = this;
@ -39,9 +66,14 @@ Page({
that.setData({ that.setData({
name: res.data.name, name: res.data.name,
mobile: res.data.mobile, mobile: res.data.mobile,
nickName: res.data.nickname,
hasAvatar: 0
}); });
if (res.data.name == '' || res.data.mobile == ''){ if (res.data.avatar != '') {
util.showErrorToast('请填写姓名和手机'); that.setData({
avatarUrl: res.data.avatar,
hasAvatar: 1
})
} }
} }
}); });
@ -52,19 +84,28 @@ Page({
saveInfo() { saveInfo() {
let name = this.data.name; let name = this.data.name;
let mobile = this.data.mobile; let mobile = this.data.mobile;
let status = this.data.status; mobile = mobile.replace(/(^\s*)|(\s*$)/g, "");
if (name == '') { if (mobile != '') {
util.showErrorToast('请输入姓名'); var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(16[0-9]{1})|(19[0-9]{1}))+\d{8})$/;
if (mobile.length < 11) {
return util.showErrorToast('手机号码长度不对');
} else if (!myreg.test(mobile)) {
return util.showErrorToast('手机号码有问题');
}
}
let avatar = this.data.avatarUrl;
let nickName = this.data.nickName;
nickName = nickName.replace(/(^\s*)|(\s*$)/g, "");
if (nickName == '') {
util.showErrorToast('请输入昵称');
return false; return false;
} }
if (mobile == '') { console.log(avatar)
util.showErrorToast('请输入手机号码');
return false;
}
let that = this;
util.request(api.SaveSettings, { util.request(api.SaveSettings, {
name: name, name: name,
mobile: mobile, mobile: mobile,
nickName: nickName,
avatar: avatar,
}, 'POST').then(function (res) { }, 'POST').then(function (res) {
if (res.errno === 0) { if (res.errno === 0) {
util.showErrorToast('保存成功'); util.showErrorToast('保存成功');

View File

@ -1,16 +1,22 @@
<view class="container"> <view class="container">
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{root + avatarUrl}}"></image>
</button>
<view class='edit-container'> <view class='edit-container'>
<view class="a-item">
<image class="icon" src="/images/icon/nick.png"></image>
<input type="nickname" class="a-input" bindblur="bindinputNickName" value="{{nickName}}" placeholder="请输入昵称" />
</view>
<view class="a-item"> <view class="a-item">
<image class="icon" src="/images/icon/receiver.png"></image> <image class="icon" src="/images/icon/receiver.png"></image>
<input class='a-input' bindblur="bindinputName" placeholder='真实姓名' value="{{name}}"></input> <input class='a-input' bindblur="bindinputName" placeholder='请输入姓名' value="{{name}}"></input>
</view> </view>
<view class="a-item"> <view class="a-item">
<image class="icon" src="/images/icon/mobile.png"></image> <image class="icon" src="/images/icon/mobile.png"></image>
<input class='a-input' bindblur="mobilechange" value="{{mobile}}" placeholder='手机号码'></input> <input class='a-input' bindblur="mobilechange" value="{{mobile}}" placeholder='请输入手机'></input>
</view> </view>
</view> </view>
<view class='wrap-btn'> <view class='wrap-btn'>
<view wx:if="{{status == 0}}" class="btn-wrap disable}}">保存</view> <view class="btn-wrap active" bindtap='saveInfo'>保存</view>
<view wx:else class="btn-wrap active" bindtap='saveInfo'>保存</view>
</view> </view>
</view> </view>

View File

@ -1,18 +1,38 @@
page { page {
min-height: 100%; min-height: 100%;
background-color: #f8f8f8; background-color: #fff;
} }
.avatar-wrapper {
padding: 0;
width: 56px !important;
margin-top: 40px;
margin-bottom: 10px;
}
.avatar-tip{
text-align: center;
font-size: 24rpx;
line-height: 30rpx;
color: #aaa;
margin-bottom: 20rpx;
}
.avatar {
display: block;
width: 56px;
height: 56px;
}
.container { .container {
min-height: 100%; min-height: 100%;
/* align-items: stretch; */ /* align-items: stretch; */
background: #f8f8f8; background: #fff;
overflow-x: hidden; overflow-x: hidden;
} }
.edit-container { .edit-container {
background: #fff; background: #fff;
width: 100%; width: 100%;
margin-top: 40rpx;
} }
.a-item { .a-item {

View File

@ -238,10 +238,19 @@ function sentRes(url, data, method, fn) {
function loginNow() { function loginNow() {
let userInfo = wx.getStorageSync('userInfo'); let userInfo = wx.getStorageSync('userInfo');
if (userInfo == '') { if (userInfo == '') {
wx.navigateTo({ wx.login({
url: '/pages/app-auth/index', success: (res) => {
request(api.AuthLoginByWeixin, {
code: res.code
}, 'POST').then(function (res) {
if (res.errno === 0) {
let userInfo = res.data.userInfo;
wx.setStorageSync('token', res.data.token);
wx.setStorageSync('userInfo', userInfo);
}
});
},
}); });
return false;
} else { } else {
return true; return true;
} }