337 lines
6.9 KiB
Vue
337 lines
6.9 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<u-popup :show="popupStatus" mode="center" round="10" main-class="u-authorize" customStyle="auth-class-1"
|
|||
|
|
custom-style="auth-class-1" :safeAreaInsetBottom="false">
|
|||
|
|
<view class="main">
|
|||
|
|
<view class="u-authorize-title">{{isAuth == 1 ? '微信授权' : '获取手机号'}}</view>
|
|||
|
|
<view class="u-authorize-body">
|
|||
|
|
<image class="u-authorize-body__icon" src="@/static/icon/phone.png" mode="aspectFit"></image>
|
|||
|
|
<view class="u-authorize-body__title">授权绑定您的手机号码</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="u-authorize-tool">
|
|||
|
|
<button class="u-authorize-tool__cancel" @tap="onCancel">
|
|||
|
|
<view style="line-height: 100rpx;">
|
|||
|
|
拒绝
|
|||
|
|
</view>
|
|||
|
|
</button>
|
|||
|
|
<button class="u-authorize-tool__define" open-type="getPhoneNumber"
|
|||
|
|
@getphonenumber="authorizationPhone" @tap="onConfirm">
|
|||
|
|
<view style="line-height: 100rpx;color: #FFCF00;">
|
|||
|
|
同意
|
|||
|
|
</view>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const app = getApp();
|
|||
|
|
export default {
|
|||
|
|
name: "u-authorize",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
openidInfo: null
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
popupStatus: [Boolean],
|
|||
|
|
isAuth: [Number]
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
let openidInfo = this.$api.getCache('openidInfo');
|
|||
|
|
let _this = this;
|
|||
|
|
if (!openidInfo) {
|
|||
|
|
_this.miniLogin();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onCancel(event) {
|
|||
|
|
this.$emit('onAuthCancel');
|
|||
|
|
},
|
|||
|
|
onConfirm(event) {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//小程序静默登录
|
|||
|
|
miniLogin() {
|
|||
|
|
let _this = this;
|
|||
|
|
uni.login({
|
|||
|
|
provider: 'weixin',
|
|||
|
|
success: function(res) {
|
|||
|
|
_this.getOpenidByCode(res.code)
|
|||
|
|
},
|
|||
|
|
fail: function(error) {
|
|||
|
|
console.log('authError', error);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//根据code获取openid
|
|||
|
|
getOpenidByCode(code) {
|
|||
|
|
let _this = this;
|
|||
|
|
this.$http({
|
|||
|
|
url: '/addons/xilufitness/login/getOpenid',
|
|||
|
|
data: {
|
|||
|
|
code: code
|
|||
|
|
},
|
|||
|
|
method: 'get'
|
|||
|
|
}).then(res => {
|
|||
|
|
if(res.code == 1){
|
|||
|
|
_this.openidInfo = res.data;
|
|||
|
|
_this.$api.setCache('openidInfo', res.data);
|
|||
|
|
}
|
|||
|
|
}).catch(error => {
|
|||
|
|
console.log('获取openid失败：', error);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取手机号
|
|||
|
|
authorizationPhone(e) {
|
|||
|
|
var _this = this;
|
|||
|
|
if (e.detail.errMsg !== "getPhoneNumber:ok") {
|
|||
|
|
this.$api.toast('授权失败，请重新点击授权');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
var openidInfo = this.$api.getCache('openidInfo');
|
|||
|
|
if (!openidInfo) {
|
|||
|
|
_this.miniLogin();
|
|||
|
|
this.$api.toast('未获取到信息，请重新点击授权');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
this.decodeMobile({
|
|||
|
|
encryptedData: e.detail.encryptedData,
|
|||
|
|
iv: e.detail.iv,
|
|||
|
|
sessionKey: openidInfo.session_key,
|
|||
|
|
}, openidInfo);
|
|||
|
|
},
|
|||
|
|
//解析手机号
|
|||
|
|
decodeMobile(data, openidInfo) {
|
|||
|
|
var _this = this;
|
|||
|
|
this.$api.showBarLoading();
|
|||
|
|
this.$http({
|
|||
|
|
url: '/addons/xilufitness/login/decodeData',
|
|||
|
|
data: data,
|
|||
|
|
method: 'post'
|
|||
|
|
}).then(res => {
|
|||
|
|
if(res.code == 1){
|
|||
|
|
_this.userRegister(res.data.phoneNumber, openidInfo.openid);
|
|||
|
|
} else {
|
|||
|
|
_this.$api.toast(res.msg || '解析手机号失败')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}).catch(error => {
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
this.$api.hideBarLoading();
|
|||
|
|
},
|
|||
|
|
//用户注册
|
|||
|
|
userRegister(mobile, openid) {
|
|||
|
|
var _this = this;
|
|||
|
|
this.$http({
|
|||
|
|
url: '/addons/xilufitness/login/registerLogin',
|
|||
|
|
data: {
|
|||
|
|
mobile: mobile,
|
|||
|
|
openid: openid,
|
|||
|
|
rec_user_id: app.globalData.share_user_id || 0
|
|||
|
|
},
|
|||
|
|
method: 'post'
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
_this.$api.setCache('token', res.data.token);
|
|||
|
|
_this.$emit('onAuthConfirm');
|
|||
|
|
} else {
|
|||
|
|
_this.$api.toast(res.msg);
|
|||
|
|
}
|
|||
|
|
}).catch(error => {
|
|||
|
|
console.log('error', error);
|
|||
|
|
_this.$api.modal('温馨提示', error.data.msg, function() {
|
|||
|
|
|
|||
|
|
}, false);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//版本比较
|
|||
|
|
compareVersion(v1, v2) {
|
|||
|
|
v1 = v1.split('.')
|
|||
|
|
v2 = v2.split('.')
|
|||
|
|
const len = Math.max(v1.length, v2.length)
|
|||
|
|
while (v1.length < len) {
|
|||
|
|
v1.push('0')
|
|||
|
|
}
|
|||
|
|
while (v2.length < len) {
|
|||
|
|
v2.push('0')
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < len; i++) {
|
|||
|
|
const num1 = parseInt(v1[i])
|
|||
|
|
const num2 = parseInt(v2[i])
|
|||
|
|
if (num1 > num2) {
|
|||
|
|
return 1
|
|||
|
|
} else if (num1 < num2) {
|
|||
|
|
return -1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return 0
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.main {
|
|||
|
|
width: 600rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.auth-class-1 {
|
|||
|
|
width: 65vw !important;
|
|||
|
|
border-radius: 20rpx !important;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize {
|
|||
|
|
min-height: initial !important;
|
|||
|
|
max-height: inherit !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize-title {
|
|||
|
|
position: relative;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 90rpx;
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize-title:after {
|
|||
|
|
content: " ";
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 200%;
|
|||
|
|
height: 200%;
|
|||
|
|
border: 0 #dddddd solid;
|
|||
|
|
border-bottom-width: 1px;
|
|||
|
|
-webkit-transform: scale(.5);
|
|||
|
|
transform: scale(.5);
|
|||
|
|
-webkit-transform-origin: 0 0;
|
|||
|
|
transform-origin: 0 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize-body {
|
|||
|
|
padding: 40rpx 80rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize-body__icon {
|
|||
|
|
display: block;
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize-body__title {
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #101010;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize-body__info {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #898989;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize-body__info:after {
|
|||
|
|
content: " ";
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 200%;
|
|||
|
|
height: 200%;
|
|||
|
|
border: 0 #dddddd solid;
|
|||
|
|
border-top-width: 1px;
|
|||
|
|
-webkit-transform: scale(.5);
|
|||
|
|
transform: scale(.5);
|
|||
|
|
-webkit-transform-origin: 0 0;
|
|||
|
|
transform-origin: 0 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize-tool {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize-tool:after {
|
|||
|
|
content: " ";
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 200%;
|
|||
|
|
height: 200%;
|
|||
|
|
border: 0 #dddddd solid;
|
|||
|
|
border-top-width: 1px;
|
|||
|
|
-webkit-transform: scale(.5);
|
|||
|
|
transform: scale(.5);
|
|||
|
|
-webkit-transform-origin: 0 0;
|
|||
|
|
transform-origin: 0 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize-tool button {
|
|||
|
|
position: relative;
|
|||
|
|
flex: 1;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
border: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100rpx;
|
|||
|
|
line-height: 100rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 0;
|
|||
|
|
-webkit-appearance: none;
|
|||
|
|
-webkit-text-size-adjust: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize-tool button:after {
|
|||
|
|
content: " ";
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 200%;
|
|||
|
|
height: 200%;
|
|||
|
|
border: 0 #dddddd solid;
|
|||
|
|
border-right-width: 1px;
|
|||
|
|
-webkit-transform: scale(.5);
|
|||
|
|
transform: scale(.5);
|
|||
|
|
-webkit-transform-origin: 0 0;
|
|||
|
|
transform-origin: 0 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize-tool button:last-child:after {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize-tool__cancel {
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-authorize-tool__define {
|
|||
|
|
color: #09bb07;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-safe-bottom {
|
|||
|
|
display: none !important;
|
|||
|
|
}
|
|||
|
|
</style>
|