admin/lichebao
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

用户授权头像

Browse Source
This commit is contained in:
老叶
2022-02-24 11:20:54 +08:00
parent e3182a26c8
commit ddcb148c3a
12 changed files with 365 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
commons/js/utils/apiQuery.js
-27
View File
@@ -24,33 +24,6 @@ apiQuery.putUserInfo = function (params) {
})
}
//用户信息授权
apiQuery.authUserInfo = function (params) {
return new Promise(function (resolve, reject) {
wx.getSetting({
success(res) {
let userInfo = app.getStorageByKey("userInfo");
console.log(res.authSetting)
if (res.authSetting['scope.userInfo']) {
if (!userInfo.nickname || !userInfo.headimg || (userInfo.headimg != JSON.parse(params.detail.rawData).avatarUrl)) {
asyncLogin().then(res => {
apiQuery.putUserInfo({
encryptedData: params.detail.encryptedData,
iv: params.detail.iv
}).then(res => {
//设置本地存储
resolve(res)
})
})
} else {
resolve(userInfo)
}
}
}
})
})
}
//用户手机号码授权
apiQuery.authUserPhone = function (params) {
return new Promise(function (resolve, reject) {
commons/js/utils/user-manager.js
+1 -1
View File
@@ -19,7 +19,7 @@ function getAjaxUserInfo(){
function isAuthUserInfo() {
return new Promise(function (resolve, reject) {
api.getUserInfo().then(res=>{
resolve(Boolean(res && res.nickname && res.headimg))
resolve(Boolean(res && res.headimg))
})
})
}
components/auth/index.js
+139 -23
View File
@@ -1,32 +1,105 @@
import _ from '../../commons/js/commons'
const app = getApp()
Component({
/**
* 组件的属性列表
*/
//组件的属性列表
properties: {
isShow: {
type: Boolean,
value: false
},
userInfo:{
type: Object,
value:""
},
//是否显示授权用户信息
isShowProfile: {
type: Boolean,
value: true
},
//是否强制显示授权用户信息
isForceProfile: {
type: Boolean,
value:false
},
title:{
type: String,
value: ''
},
cancelbtn:{
type: String,
value: ''
},
submitbtn:{
type: String,
value: ''
},
tip:{
type: String,
value: ''
},
type:{
type: String,
value: ''
},
zindex: {
type: Number,
value: 10
},
//专题模式登录样式
mode:{
type: String,
value: ''
},
modeDate:{
type: Object,
value:""
},
},
/**
* 组件的初始数据
*/
//组件的初始数据
data: {
code:'',
isRunning:false,
userCurrInfo:"",
isBindMobile:false
},
lifetimes: {
attached: function () {
wx.login({
success: res => {
// 在组件实例进入页面节点树时执行
if (this.data.type == "mobile") {
if (!this.data.userInfo){
_.apiQuery.getUserInfo("",false).then(res => {
this.setData({
userCurrInfo: res
})
})
}else{
this.setData({
code: res.code,
userCurrInfo: this.data.userInfo
})
}
}
if (this.data.type == "userinfo") {
_.userManager.isAuthUserInfo().then(re => {
if (re) {
this.setData({
isShowProfile:false
})
}else{
this.setData({
isShowProfile:true
})
}
})
}
},
detached: function () {
// 在组件实例被从页面节点树移除时执行
this.setData({
isBindMobile:false,
isShow:false
})
},
},
@@ -35,6 +108,8 @@ Component({
* 组件的方法列表
*/
methods: {
//catchtap
emptyfunc(){},
//授权用户信息
getUserProfile(){
let that = this
@@ -45,32 +120,73 @@ Component({
wx.getUserProfile({
desc:'获取你的昵称、头像、地区及性别',//不写不弹提示框
success:function(res){
let params = {};
params['code'] = that.data.code;
params['userInfo'] = res.userInfo;
that.setData({
isShow: false,
})
_.apiQuery.putAppUser(params).then(res => {
_.apiQuery.putUserInfo(params).then(res => {
that.setData({
isRunning:false
});
wx.showToast({
title: '授权成功',
icon: 'success',
duration: 2000
})
});
that.successEvent()
_.eventBus.emit("isShowProfile",false)
})
},
fail:function(err){
that.setData({
isRunning:false
});
console.log('拒绝授权')
wx.showToast({
title: '您拒绝授权，将无法进行更多操作！',
icon: 'none',
duration: 2000
});
}
})
},
//授权手机号码
getPhoneNumber(e) {
if (e.detail.errMsg && e.detail.errMsg.indexOf('ok') > -1){
let that = this;
_.apiQuery.authUserPhone(e).then(res=>{
_.apiQuery.getUserInfo()
this.setData({
isBindMobile: true
})
})
}else{
app.printErrorClient('failGetPhoneNumber',['用户拒绝授权手机号码：'+JSON.stringify(e)])
}
},
onShow:function () {
this.setData({
isShow: true
});
this.triggerEvent('onShow', {
type: this.data.type
});
},
onClose: function () {
this.setData({
isShow: false
});
this.triggerEvent('onClose', {
type: this.data.type
});
if(this.data.type=="mobile" && this.data.isBindMobile){
this.setData({
isBindMobile:false
})
this.successEvent()
}
},
//成功回调方法
successEvent(){
this.triggerEvent('onSuccess', {
type: this.data.type
});
},
}
})
components/auth/index.json
+1 -4
View File
@@ -1,6 +1,3 @@
{
"component": true,
"usingComponents": {
"lcb-msg": "/components/msg/index"
}
"component": true
}
components/auth/index.wxml
+56 -10
View File
@@ -1,16 +1,62 @@
<!--
用法
<lcb-auth isShow="true" bind:onSuccess="authEvent"></lcb-auth>
type="mobile"用法
<lcb-auth type="mobile" isShow="true" bind:onSuccess="authEvent" bind:onClose="authFailEvent"></lcb-auth>
type="userinfo"用法 isForceProfile需要强制更新用户信息的时候才添加
<lcb-auth type="userinfo" isForceProfile="true" isShowProfile="{{isShowProfile}}" bind:onSuccess="authEvent"></lcb-auth>
-->
<!-- <view catch:tap="emptyfunc" wx:if="{{type=='userinfo' || !type}}">
<button open-type="getUserInfo" class="auth-btngetUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button>
</view> -->
<lcb-msg isShow="{{isShow}}" isHasClose="{{true}}">
<view slot="content" class="inner40 text-center">
<view class='pt20 text-center'><i class="iconfont font-80 color-00c800 icon-weixin"></i></view>
<view class='pt20 pb30 text-center font-28 color-666'>
<view>授权您的公开信息（昵称和头像）</view>
<view>便于查看预定信息哦~</view>
<view catch:tap="emptyfunc" wx:if="{{type=='userinfo' || !type}}">
<block wx:if="{{isForceProfile || isShowProfile}}">
<button class="auth-btngetUserInfo" bindtap="getUserProfile">获取用户信息</button>
</block>
<block wx:else>
<button class="auth-btngetUserInfo" bindtap="successEvent">已获取用户信息</button>
</block>
</view>
<view class="auth-dialog-special inner40" style="z-index:{{zindex+1}};" catchtouchmove="true" wx:if="{{type=='mobile' && isShow && mode=='special'}}">
<view class="mt30 pt2" wx:if="{{!isBindMobile}}">
<image class='block auth-dialog-logo box-shadow-000-10-10 img-100x100 ulib-r750' src="{{modeDate.logo}}" lazy-load="{{true}}" mode="scaleToFill"></image>
<view class="mt5 text-center font-32 text-bold" wx:if="{{modeDate.title}}">{{modeDate.title}}</view>
<view class="relative special-intro bg-f5 mt30 inner30 line-height-16 font-28 color-333 ulib-r10">{{modeDate.content}}</view>
<view class="mt30">
<button class="btn-1a1a1a text-spacing-10 font-34 color-fff ulib-r10" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">{{modeDate.btn}}</button>
</view>
<button class='mt20 btn-36afa2 text-center font-32 color-fff ulib-r10' hover-class="btn-36afa2-hover" bindtap="getUserProfile">授权登录</button>
<text class="special-close iconfont icon-guanbi font-60 color-fff" bindtap="onClose"></text>
</view>
</lcb-msg>
<view class="pt20 pb20" wx:else>
<view class="text-center font-32 text-bold">{{modeDate.success}}</view>
<view class="relative special-intro bg-f5 mt30 inner30 line-height-16 font-28 color-333 ulib-r10">{{modeDate.content}}</view>
<view class="mt30 pl70 pr70">
<button class="btn-border-1a1a1a font-32 color-1a ulib-r10" bindtap="onClose">知道了</button>
</view>
</view>
</view>
<view class="auth-dialog" style="z-index:{{zindex+1}};" catchtouchmove="true" wx:elif="{{type=='mobile' && isShow}}">
<view wx:if="{{!isBindMobile}}">
<view class="cap">{{title || '立即登录'}}</view>
<view class="intro">授权手机号即可登录狸车小程序，了解更多狸车资讯，一手活动特惠即刻拥有。</view>
<view class="btn-list">
<view class="item-cell">
<button class="btn-cancel" bindtap="onClose">{{cancelbtn || '取消'}}</button>
</view>
<view class="item-cell">
<button class="btn-confirm" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">{{submitbtn || '授权手机号'}}</button>
</view>
</view>
</view>
<view wx:else>
<view class="cap">{{tip || '恭喜您，登录成功！'}}</view>
<view class="btn-list">
<view class="item-cell">
<button class="btn-cancel" bindtap="onClose">知道了</button>
</view>
</view>
</view>
</view>
<view class="auth-dialog-mask" style="z-index:{{zindex}};" catchtouchmove="true" wx:if="{{isShow && type=='mobile'}}"></view>
components/auth/index.wxss
+116 -1
View File
@@ -1 +1,116 @@
@import "../../commons/css/common.wxss";
@import "../../commons/css/common.wxss";
.auth-dialog{
position: fixed;
left:50%;
top:50%;
transform: translate(-50%,-50%);
width:88%;
padding:70rpx 60rpx;
background-color:#fff;
box-sizing: border-box;
border-radius: 10rpx;
overflow: hidden;
z-index: 10;
}
.auth-dialog-special{
position: fixed;
left:50%;
top:50%;
transform: translate(-50%,-50%);
width:80%;
background-color:#fff;
box-sizing: border-box;
border-radius: 10rpx;
z-index: 10;
}
.auth-btngetUserInfo{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
opacity: 0;
}
.auth-dialog .cap{
color:#000;
font-size: 36rpx;
line-height: 36rpx;
text-align: center;
font-weight: bold;
}
.auth-dialog .intro{
margin-top:30rpx;
color:#666;
font-size: 28rpx;
line-height: 46rpx;
}
.auth-dialog .btn-list{
display: flex;
margin-top:40rpx;
}
.auth-dialog .btn-list .item-cell{
flex: 1;
padding:0 10rpx;
}
.auth-dialog .btn-list button{
width: 220rpx;
height: 72rpx;
line-height: 72rpx;
overflow: hidden;
border-radius: 50rpx;
font-size: 30rpx;
box-sizing: border-box;
}
.auth-dialog .btn-list button.btn-cancel{
background: #fff;
color: #1a1a1a;
line-height: 68rpx;
border:1rpx solid #1a1a1a;
}
.auth-dialog .btn-list button.btn-confirm{
background: #1a1a1a;
color: #fff;
}
.auth-dialog .btn-list button::after{
border:none;
}
.auth-dialog-mask{
position: fixed;
left:0;
right: 0;
top:0;
bottom:0;
background-color: rgba(0, 0, 0, 0.6);
}
.auth-dialog-logo{
position:absolute;
top:-50rpx;
left:50%;
transform:translate(-50%,0);
}
.special-intro::before{
display:block;
position:absolute;
top:-20rpx;
left:50%;
transform:translate(-50%,0);
width: 0;
height: 0;
border-color: transparent transparent #f5f5f5 transparent;
border-style: solid;
border-width: 0 20rpx 20rpx 20rpx;
content:"";
}
.special-close{
position:absolute;
bottom:-100rpx;
left:50%;
transform:translate(-50%,0);
}
pages/mine/index.js
+15
View File
@@ -6,6 +6,7 @@ Page({
isShowAddStaff:false,
name:'',
mobile:'',
isShowProfile:true,//是否显示授权用户信息按钮
},
onLoad: function (options) {
@@ -69,10 +70,24 @@ Page({
}
}
})
//消息通讯 是否显示授权用户信息按钮
_.eventBus.on("isShowProfile", this, function(res){
this.setData({
isShowProfile:res,
})
})
},
onShow: function () {
},
//生命周期函数--监听页面卸载
onUnload: function () {
//卸载消息通讯 是否显示授权用户信息
_.eventBus.remove('isShowProfile',this);
},
//获取用户信息
getUserInfo(){
pages/mine/index.wxml
+3 -3
View File
@@ -2,12 +2,12 @@
<view class="inner30 img-top-cover" style="background-image:url({{imgUrl}}mine/mine-bg2.png);">
<view class="wp100 pt5 pb5 bg-fff img-fill-cover box-shadow-000-10-10 ulib-r10" style="background-image:url({{imgUrl}}mine/theme.jpg);">
<view class="relative inner40">
<view class="img-135x135 bds-1-eb ulib-r750 overflowhidden">
<open-data type="userAvatarUrl"></open-data>
<image class='img-135x135 bds-1-eb ulib-r750 overflowhidden' mode="aspectFill" src="{{userInfo.headimg||imgUrl+'common/default-head.jpg'}}" lazy-load="{{true}}"></image>
<view class="absolute top-0 bottom-0 left-0 right-0 opacity-0 mt50 mr150 z-index-4">
<lcb-auth type="userinfo" isShowProfile="{{isShowProfile}}" bind:onSuccess="getUserInfo"></lcb-auth>
</view>
<view class="absolute left-0 right-0 box-middle pl200">
<view class="text-bold font-32">
<!-- <open-data type="userNickName"></open-data> -->
{{userInfo.uname}}
<text class="font-22 color-666" wx:if="{{userInfo.group_name}}">({{userInfo.group_name}})</text>
</view>
pages/mine/install/index.js
+14
View File
@@ -4,6 +4,7 @@ Page({
data: {
imgUrl:_.config.imgUrl,
list:[],
isShowProfile:true,//是否显示授权用户信息按钮
},
onLoad: function (options) {
@@ -14,11 +15,24 @@ Page({
}
this.getUserInfo()
//消息通讯 是否显示授权用户信息按钮
_.eventBus.on("isShowProfile", this, function(res){
this.setData({
isShowProfile:res,
})
})
},
onShow: function () {
},
//生命周期函数--监听页面卸载
onUnload: function () {
//卸载消息通讯 是否显示授权用户信息
_.eventBus.remove('isShowProfile',this);
},
//获取用户信息
getUserInfo(){
_.apiQuery.getUserInfo().then(res => {
pages/mine/install/index.wxml
+3 -3
View File
@@ -3,12 +3,12 @@
<view class="wp100 pt5 pb5 bg-fff img-fill-cover box-shadow-000-10-10 ulib-r10" style="background-image: url({{imgUrl}}mine/theme.jpg);">
<view class="relative inner40">
<view class="img-135x135 bds-1-eb ulib-r750 overflowhidden">
<open-data type="userAvatarUrl"></open-data>
<image class='img-135x135 bds-1-eb ulib-r750 overflowhidden' mode="aspectFill" src="{{userInfo.headimg||imgUrl+'common/default-head.jpg'}}" lazy-load="{{true}}"></image>
<view class="absolute top-0 bottom-0 left-0 right-0 opacity-0 mt50 mr150 z-index-4">
<lcb-auth type="userinfo" isShowProfile="{{isShowProfile}}" bind:onSuccess="getUserInfo"></lcb-auth>
</view>
<view class="absolute left-0 right-0 box-middle pl200">
<view class="text-bold font-32">
<!-- <open-data type="userNickName"></open-data> -->
{{userInfo.uname}}
<text class="font-22 color-666" wx:if="{{userInfo.group_name}}">({{userInfo.group_name}})</text>
</view>
pages/mine/install/staff/index.js
+14
View File
@@ -12,6 +12,7 @@ Page({
end: false,
load: true,
loading: false,
isShowProfile:true,//是否显示授权用户信息按钮
},
onLoad: function (options) {
for (let key in options) {
@@ -21,11 +22,24 @@ Page({
}
this.getUserInfo()
//消息通讯 是否显示授权用户信息按钮
_.eventBus.on("isShowProfile", this, function(res){
this.setData({
isShowProfile:res,
})
})
},
onShow: function () {
this.getAppEmployees()
},
//生命周期函数--监听页面卸载
onUnload: function () {
//卸载消息通讯 是否显示授权用户信息
_.eventBus.remove('isShowProfile',this);
},
//获取用户信息
getUserInfo(){
_.apiQuery.getUserInfo().then(res => {
pages/mine/install/staff/index.wxml
+3 -3
View File
@@ -3,12 +3,12 @@
<view class="wp100 pt5 pb5 bg-fff img-fill-cover box-shadow-000-10-10 ulib-r10" style="background-image: url({{imgUrl}}mine/theme.jpg);">
<view class="relative inner40">
<view class="img-135x135 bds-1-eb ulib-r750 overflowhidden">
<open-data type="userAvatarUrl"></open-data>
<image class='img-135x135 bds-1-eb ulib-r750 overflowhidden' mode="aspectFill" src="{{userInfo.headimg||imgUrl+'common/default-head.jpg'}}" lazy-load="{{true}}"></image>
<view class="absolute top-0 bottom-0 left-0 right-0 opacity-0 mt50 mr150 z-index-4">
<lcb-auth type="userinfo" isShowProfile="{{isShowProfile}}" bind:onSuccess="getUserInfo"></lcb-auth>
</view>
<view class="absolute left-0 right-0 box-middle pl200">
<view class="text-bold font-32">
<!-- <open-data type="userNickName"></open-data> -->
{{userInfo.uname}}
<text class="font-22 color-666" wx:if="{{userInfo.group_name}}">({{userInfo.group_name}})</text>
</view>