241 lines
8.0 KiB
Vue
241 lines
8.0 KiB
Vue
|
<template>
|
|||
|
|
<view v-if="visible">
|
|||
|
|
<!-- 用户信息授权 -->
|
|||
|
|
<view v-if="userInfo_mobile" @touchmove.stop.prevent="moveHandle" :class="isAnimation==2?'card-box-userinfo':''" class="auth-box">
|
|||
|
|
<view :class="isAnimation==1?'card-box-userinfo':''">
|
|||
|
|
<view class="auth-top">
|
|||
|
|
<image :src="appletImg" mode=""></image>
|
|||
|
|
<view class="auth-top-content">
|
|||
|
|
<view>恒美植发客服代表提醒您：</view>
|
|||
|
|
<view>您当前是游客身份</view>
|
|||
|
|
<view>是否选择授权登录</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="auth-center">申请 获取你的昵称、头像、地区及性别</view>
|
|||
|
|
<view class="auth-bottom">
|
|||
|
|
<view @tap="chooseBtn(0)" :class="isNo?'isNyin':'noyin'" class="btn btn-no">暂不授权</view>
|
|||
|
|
<view @tap="chooseBtn(1)" :class="isOk?'isOyin':'noyin'" class="btn btn-yes">
|
|||
|
|
<text>立即授权</text>
|
|||
|
|
<button open-type="getUserInfo" @tap="shouq" class="auth-btn">立即授权</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 手机号授权 -->
|
|||
|
|
<view v-if="!userInfo_mobile" @touchmove.stop.prevent="moveHandle" class="disjcac posAll">
|
|||
|
|
<view class="bacf radius20 width100 tank-box">
|
|||
|
|
<view class="tc tank-box-itemone">请授权绑定手机号</view>
|
|||
|
|
<view class="fon28 colf pad-x30 pad-zy30 tc disjb">
|
|||
|
|
<view class="pad-sx10 radius10 tank-btn" style="background-color: rgba(230, 230, 230,1);color: #000000;">暂不绑定</view>
|
|||
|
|
<view class="pad-sx10 radius10 tank-btn posir pbackc">
|
|||
|
|
立即绑定
|
|||
|
|
<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="posia syxzo">立即绑定</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name:"empower",
|
|||
|
|
props:{
|
|||
|
|
optionObj:{
|
|||
|
|
type:Object,
|
|||
|
|
default:()=>{
|
|||
|
|
return {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
appletImg:{//小程序头像
|
|||
|
|
type:String,
|
|||
|
|
default:'/static/public/like.png'
|
|||
|
|
},
|
|||
|
|
appletName:{//小程序名称
|
|||
|
|
type:String,
|
|||
|
|
default:''
|
|||
|
|
},
|
|||
|
|
url:{
|
|||
|
|
type:String,
|
|||
|
|
default:''
|
|||
|
|
},
|
|||
|
|
isWhere:{
|
|||
|
|
type:Number,
|
|||
|
|
default:0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isOk:false,
|
|||
|
|
isNo:false,
|
|||
|
|
isAnimation:0,
|
|||
|
|
visible:false,
|
|||
|
|
userInfo_mobile:true,
|
|||
|
|
currentPage:''//当前页面路径
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
console.log(this.optionObj,'参数');
|
|||
|
|
if(uni.getStorageSync('is_active')!=1){this.visible = true;}
|
|||
|
|
if(this.optionObj.invite_code!='' && this.optionObj.invite_code!=undefined){
|
|||
|
|
this.loginEv(this.optionObj.invite_code);
|
|||
|
|
} else if(this.optionObj.source_code!='' && this.optionObj.source_code!=undefined){
|
|||
|
|
this.loginEv('',this.optionObj.source_code,this.optionObj.channel);
|
|||
|
|
}
|
|||
|
|
//转发进入
|
|||
|
|
let pages = getCurrentPages(); //获取加载的页面
|
|||
|
|
let currentPage = pages[pages.length - 1]; //获取当前页面的对象
|
|||
|
|
this.currentPage = currentPage.route ;//当前页面url
|
|||
|
|
console.log(this.currentPage,'当前页面路径');
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
loginEv(invite_code='',source='',channel=''){
|
|||
|
|
uni.login({
|
|||
|
|
provider: 'weixin',
|
|||
|
|
success: (res)=> {
|
|||
|
|
if (res.code) {
|
|||
|
|
var params = {
|
|||
|
|
code:res.code,
|
|||
|
|
invite_code:invite_code,//用户邀请码
|
|||
|
|
source_code:source,
|
|||
|
|
channel:channel
|
|||
|
|
}
|
|||
|
|
this.$requst.post('user/login',params).then(res => {
|
|||
|
|
if(res.data.token!=''){
|
|||
|
|
if(res.data.is_active==0) {
|
|||
|
|
this.visible = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},error => {})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
moveHandle(){
|
|||
|
|
return false
|
|||
|
|
},
|
|||
|
|
tiaoZ(){//跳转方式
|
|||
|
|
if(this.isWhere==0) uni.navigateBack({delta:1}) //返回上一页
|
|||
|
|
if(this.isWhere==1) uni.navigateTo({url:this.url})//跳转到指定页面
|
|||
|
|
if(this.isWhere!=0 && this.isWhere!=1) return//不跳转
|
|||
|
|
this.isOk = false;
|
|||
|
|
},
|
|||
|
|
chooseBtn(index){//暂不授权、立即授权
|
|||
|
|
this.$emit('cancleEv',index)//继承事件
|
|||
|
|
if(index==0){//暂不授权
|
|||
|
|
// this.tiaoZ()
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:`/${this.currentPage}`
|
|||
|
|
})
|
|||
|
|
this.isOk = false
|
|||
|
|
} else {
|
|||
|
|
this.isOk = !this.isOk
|
|||
|
|
this.isNo = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
shouq(){//立即授权事件
|
|||
|
|
let ya = this;
|
|||
|
|
this.$toolAll.tools.showToast('正在调起授权...')
|
|||
|
|
let code = ''//声明code
|
|||
|
|
uni.login({// 获取登录用户code
|
|||
|
|
provider: 'weixin',
|
|||
|
|
success: function(result) {
|
|||
|
|
uni.hideToast()
|
|||
|
|
code = result.code
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
uni.getUserProfile({//调起微信授权弹框
|
|||
|
|
desc: '登录',
|
|||
|
|
lang: 'zh_CN',
|
|||
|
|
success: (res) => {
|
|||
|
|
ya.updateUserInfo(code,res.userInfo);
|
|||
|
|
},
|
|||
|
|
fail: (res) => {
|
|||
|
|
console.log('用户拒绝授权');
|
|||
|
|
this.tiaoZ()
|
|||
|
|
this.$emit('cancleEv',0)
|
|||
|
|
this.isOk = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//调用登录接口
|
|||
|
|
updateUserInfo(code,userInfo) {
|
|||
|
|
let ya = this;
|
|||
|
|
uni.showToast({title: '授权中...',icon:'loading',})
|
|||
|
|
var params = {
|
|||
|
|
code:code,
|
|||
|
|
nickname: userInfo.nickName,//用户昵称
|
|||
|
|
headimgurl: userInfo.avatarUrl,//用户头像
|
|||
|
|
country: userInfo.country,//用户所在国家
|
|||
|
|
province: userInfo.province,//用户所在省份
|
|||
|
|
city: userInfo.city,//用户所在城市
|
|||
|
|
gender: userInfo.gender,//用户性别
|
|||
|
|
language:userInfo.language,//语言
|
|||
|
|
is_active:1,
|
|||
|
|
channel:uni.getStorageSync('channel')
|
|||
|
|
}
|
|||
|
|
this.$requst.post('user/login',params).then(res => {
|
|||
|
|
if(res.data.token!=''){
|
|||
|
|
uni.setStorageSync('params',params);
|
|||
|
|
uni.setStorageSync('userId',res.data.account_id);
|
|||
|
|
uni.setStorageSync('token',res.data.token);//缓存token
|
|||
|
|
uni.setStorageSync('expire',res.data.expire);//缓存失效时间（时间戳格式）
|
|||
|
|
uni.setStorageSync('is_active',res.data.is_active);//是否第一次授权
|
|||
|
|
uni.setStorageSync('invite_code',res.data.invite_code);
|
|||
|
|
ya.successAfterEv(userInfo);
|
|||
|
|
ya.isAnimation++;
|
|||
|
|
ya.userInfo_mobile = false;
|
|||
|
|
ya.$emit('onload');
|
|||
|
|
}
|
|||
|
|
},error => {})
|
|||
|
|
},
|
|||
|
|
successAfterEv(userInfo){//缓存信息
|
|||
|
|
let ya = this
|
|||
|
|
uni.hideToast();
|
|||
|
|
// console.log(uni.getStorageSync('headImg'));
|
|||
|
|
ya.$toolAll.tools.showToast('授权成功','success')
|
|||
|
|
ya.$emit('cancleEv',0)
|
|||
|
|
ya.$emit('buttonH',true)
|
|||
|
|
if(ya.url!=''){
|
|||
|
|
setTimeout(()=>{uni.navigateTo({url:ya.url})},1000)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getphonenumber(e){//授权绑定手机号
|
|||
|
|
if(e.detail.errMsg=="getPhoneNumber:ok"){
|
|||
|
|
this.$requst.post('user/bind-phone',{iv:e.detail.iv,encryptedData:e.detail.encryptedData}).then(res=>{
|
|||
|
|
// console.log('手机号信息：',res);
|
|||
|
|
if(res.code==0){
|
|||
|
|
this.$toolAll.tools.showToast('手机号绑定成功','success');
|
|||
|
|
this.visible = false;
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url:`/${this.currentPage}`
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},error=>{})
|
|||
|
|
} else {
|
|||
|
|
console.log('用户拒绝');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.auth-box {position: fixed;top: 0;right: 0;left: 0;bottom: 0;display: flex;justify-content: center;align-items: center;z-index: 3;}
|
|||
|
|
.auth-box > view {background-color: #FFFFFF;border-radius: 10rpx;padding: 30rpx;box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.5);margin: 0 100rpx;}
|
|||
|
|
.auth-top {display: flex;}
|
|||
|
|
.auth-top image {width: 96rpx;height: 96rpx;flex-shrink: 0;}
|
|||
|
|
.auth-top-content {margin-left: 20rpx;}
|
|||
|
|
.auth-top-content view {font-size: 28rpx;margin-top: 20rpx;color: #999999;}
|
|||
|
|
.auth-top-content view:nth-child(1) {font-size: 30rpx;font-weight: bold;margin-top: 0;}
|
|||
|
|
.auth-center {font-size: 28rpx;margin: 30rpx 0;border-bottom: 1rpx solid #F5F5F5;border-top: 1rpx solid #F5F5F5;padding: 20rpx 0;}
|
|||
|
|
.auth-bottom {display: flex;justify-content: center;align-items: center;font-size: 24rpx;}
|
|||
|
|
.btn {padding: 12rpx 40rpx;border-radius: 4rpx;}
|
|||
|
|
.btn-no {color: #07ad60;background-color: #FFFFFF;border: 1rpx solid #CCCCCC;}
|
|||
|
|
.btn-yes {color: #FFFFFF;background-color: #07ad60;border: 1rpx solid #07ad60;position: relative;margin-left: 20rpx;}
|
|||
|
|
.auth-btn {position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}
|
|||
|
|
.isNyin{box-shadow: 0rpx 3rpx 6rpx rgba(0,0,0,.5);}
|
|||
|
|
.isOyin{box-shadow: 0rpx 3rpx 6rpx rgba(0,0,0,1);}
|
|||
|
|
.card-box-userinfo {transform: rotate(360deg) scale(0);transition: all 1s ease-in-out;}
|
|||
|
|
</style>
|