比如用户收藏行为，因为没有登录需要跳转登录页登录以后又返回操作，用户体验不佳 使用该插件后，用户没有登录，在当前页面完成登录，并自动继续收藏行为，提升用户体验
首先在引入子组件userCheck，在组件内先判断是否登录
- 如果登录了子组件通知父组件登录成功，然后子组件靠afterLogin来继续操作，就不会有跳转
- 如果没有登录，就调用微信手机号登录方式登录，登录以后还是通知父组件继续操作
注意：
1、onload一定要先初始化获取微信code 2、userCheckStatus里面的access_member_info是用来给前端token赋值的，根据自己需要修改
父组件：
<template>
<view class="dflex jcc">
<button type="primary" style="margin-top: 300rpx;" @click="clickFav">无跳转登录</button>
<!-- 组件内有使用说明 -->
<userCheck ref="userCheck" @userCheckStatus="userCheckStatus"></userCheck>
<!--
首先在引入子组件userCheck，在组件内先判断是否登录
如果登录了子组件通知父组件登录成功，然后子组件靠afterLogin来继续操作，就不会有跳转
如果没有登录，就调用微信手机号登录方式登录，登录以后还是通知父组件继续操作
注意：
1、onload一定要先初始化获取微信code
2、userCheckStatus里面的access_member_info是用来给前端token赋值的，根据自己需要修改
-->
</view>
</template>
<script>
export default {
data() {
return {
afterLogin :''
}
},
onLoad() {
//获取code一键登录
this.$refs.userCheck.getWxCode()
},
methods: {
clickFav() {
this.$refs.userCheck.user_check()
this.afterLogin = 'gotoFav'
},
userCheckStatus(res) {
if(this.afterLogin == 'gotoFav') {
if(res != 'already') {
uni.setStorageSync("access_member_info", res.data)
// console.log('resres', res)
}
uni.showModal({
title:'登录成功',
content:'在此修改为登陆后继续的操作',
showCancel:false
})
}
// if(this.afterLogin == 'xxx') {
// }
uni.hideLoading()
},
}
}
</script>
<style>
</style>
子组件：
<template>
<view>
<u-popup :show="userLoginShow" @close="userLoginClose" mode="center" :safeAreaInsetBottom="false" round="10">
<view class="wrap cflex jcc radius10 f16">
<text class="w100percent taligncenter">请先登录</text>
<view class="mt12">
<u-line></u-line>
</view>
<text class="mt12">微信一键登录后即可使用完整功能</text>
<view class="login_button dflex mt20">
<button type="default" style="width: 50%; font-size: 14px;" @click="userLoginClose">取消</button>
<button type="warning" class="ml12 main_bg" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" style="width: 50%; font-size: 14px;">确认登录</button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
// 全局登录判断
// 判断是否登录,已登录返回already,未登录弹起登录提示框
// 没有登录,拉起微信手机号一键验证,然后把返回数据到父组件继续后续操作
// 记得在父组件调用 getWxCode 获取code不然登录错误
const Host = getApp().globalData.baseUrl;
export default {
name:"userCheck",
data() {
return {
userLoginShow : false,
code : ''
};
},
methods: {
userLoginClose() {
this.userLoginShow = false
},
user_check() {
uni.showLoading({
title: "加载中...."
})
uni.request({
url: Host + '/api/v1/user',
method: 'get',
header: {
'Accept': 'application/json',
'Authorization': 'Bearer ' + uni.getStorageSync('access_member_info').access_token
},
success: (res) => {
if(res.statusCode == 401) {
//弹出登录提示框
this.userLoginShow = true
uni.hideLoading();
} else {
this.$emit("userCheckStatus", 'already')
// this.getHagglecode()
// console.log('success',res)
}
}
})
},
getWxCode() {
uni.login({
provider:'weixin',
success: (res) => {
this.code = res.code
// console.log('this.code', this.code)
}
})
},
decryptPhoneNumber(e) {
this.userLoginShow = false
uni.showLoading({
title: "加载中...."
})
this.errMsg = e.detail.errMsg
this.iv = e.detail.iv
this.encryptedData = e.detail.encryptedData
//弹出登录提示框
//用户取消，这个值就获取不到，就不要发请求到服务器了
if(e.detail.encryptedData && this.code != '') {
uni.request({
url: Host + '/api/v1/user/miniphonenumber',
method: 'POST',
data: {
errMsg:this.errMsg,
iv: this.iv,
encryptedData : this.encryptedData,
code : this.code
},
success: (res) => {
// console.log('this.code', this.code)
if (res.statusCode != 201) {
console.log(res.data.message);
uni.hideLoading();
// this.show_toast()
// uni.$u.toast(res.data.message);
} else {
this.$emit("userCheckStatus", res)
// uni.setStorageSync("access_member_info", res.data)
// this.getHagglecode()
// console.log('userinfo', uni.getStorageSync("access_member_info"))
}
},
fail: (res) => {}
})
} else {
uni.hideLoading()
}
},
}
}
</script>
<style>
</style>
