189 lines
3.9 KiB
Vue
189 lines
3.9 KiB
Vue
<template>
|
|
<view class="UserInfor" v-show="GetStep">
|
|
<!-- 用户信息 -->
|
|
<u-modal :show="true" :title="title" confirmText="授权" cancelText="暂不" showCancelButton @confirm="confirm">
|
|
<template v-slot:confirmButton>
|
|
<view class="btn">
|
|
<view class="btn-item" @tap="SetStep(0)">
|
|
暂不
|
|
</view>
|
|
<view class="btn-item" v-if="GetStep == 1" @tap="getUserInfo">
|
|
同步个人信息
|
|
</view>
|
|
<view class="btn-item" v-if="GetStep == 2">
|
|
<button class="openbtn" open-type="getPhoneNumber" @getphonenumber="getUserInfo">同步手机号</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</u-modal>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* @仿微信授权个人信息弹框
|
|
* */
|
|
import {
|
|
mapGetters,
|
|
mapMutations,
|
|
mapActions,
|
|
} from 'vuex';
|
|
export default {
|
|
name: "authorization-userinfor",
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
methods: {
|
|
...mapMutations('api', ['SetStep']),
|
|
...mapActions('api', ['againAuth', 'alipayagainAuth', 'savePhone']),
|
|
/**
|
|
* @点击确认授权用户信息
|
|
* */
|
|
getUserInfo(e) {
|
|
let self = this;
|
|
// 判断当前是手机号授权还是用户信息授权
|
|
if (this['GetStep'] == 1) {
|
|
// 微信环境下
|
|
// #ifdef MP-WEIXIN
|
|
// 弹出授权
|
|
uni.getUserProfile({
|
|
desc: '用于完善会员资料',
|
|
success(res) {
|
|
// 重新获取code
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success(loginRes) {
|
|
console.log('code', loginRes.code);
|
|
uni.showLoading({
|
|
title: '同步中...'
|
|
});
|
|
// 提交后台
|
|
self.againAuth({
|
|
rawData: res.rawData,
|
|
code: loginRes.code
|
|
}).then(res => {
|
|
self.SetStep(2);
|
|
uni.hideLoading();
|
|
}).catch(res => {
|
|
uni.hideLoading();
|
|
})
|
|
}
|
|
})
|
|
},
|
|
fail(e) {
|
|
console.log(e)
|
|
self.SetStep(0);
|
|
}
|
|
});
|
|
// #endif
|
|
// 支付宝环境下
|
|
// #ifdef MP-ALIPAY
|
|
my.getAuthCode({
|
|
scopes: 'auth_user',
|
|
success: (res) => {
|
|
my.alert({
|
|
content: res.authCode,
|
|
});
|
|
self.alipayagainAuth({
|
|
auth_code: res.authCode
|
|
})
|
|
},
|
|
});
|
|
// #endif
|
|
} else {
|
|
let encryptedData = e.detail.encryptedData;
|
|
let iv = e.detail.iv;
|
|
console.log(e,'-----------------');
|
|
if (e.detail.errMsg === 'getPhoneNumber:fail user deny') return;
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success: res => {
|
|
uni.showLoading({
|
|
title: '同步中...'
|
|
});
|
|
self.savePhone({
|
|
iv: iv,
|
|
encryptedData: encryptedData,
|
|
code: res.code,
|
|
}).then(res => {
|
|
uni.hideLoading();
|
|
self.SetStep(0);
|
|
}).catch(res => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title:res['msg'],
|
|
icon:'none'
|
|
})
|
|
})
|
|
},
|
|
fail:()=>{
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters('api', ['GetStep']),
|
|
|
|
title() {
|
|
switch (this['GetStep']) {
|
|
case 1:
|
|
return '您需要授权个人信息';
|
|
case 2:
|
|
return '您需要授权手机号';
|
|
}
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.UserInfor {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 99999;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.btn-item {
|
|
text-align: center;
|
|
line-height: 88rpx;
|
|
width: 50%;
|
|
height: 100%;
|
|
font-size: 30rpx;
|
|
font-weight: 800;
|
|
position: relative;
|
|
}
|
|
|
|
.openbtn {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: transparent;
|
|
font-size: 30rpx;
|
|
|
|
&::after {
|
|
border: none !important;
|
|
}
|
|
}
|
|
</style>
|