2022-08-01 17:03:10 +08:00
|
|
|
|
<template>
|
2022-08-05 11:08:36 +08:00
|
|
|
|
<view>
|
|
|
|
|
|
<view class='login-header'>
|
|
|
|
|
|
<image class="infoImg" mode="aspectFill" :src="userInfo.avatarUrl || imgSrc"></image>
|
|
|
|
|
|
<view class="logo-name">{{appletName}}</view>
|
|
|
|
|
|
</view>
|
2023-01-06 15:08:04 +08:00
|
|
|
|
<view class="login-footer" v-if="ifEnter">
|
|
|
|
|
|
<view class="login-btn" type='primary' @tap="empowerShow=true" v-if="!isActive">微信授权</view>
|
|
|
|
|
|
<view class="login-btn" type='primary' @tap="bindGetUserInfo('other')" v-else>微信授权</view>
|
2022-08-05 11:08:36 +08:00
|
|
|
|
<view class="agreement-box">如您点击授权，您将同意授权<text @tap="toAgreement" class="agreement">《免责声明》</text></view>
|
|
|
|
|
|
</view>
|
2023-01-06 15:08:04 +08:00
|
|
|
|
<!-- 获取头像&昵称 -->
|
2023-01-06 16:56:12 +08:00
|
|
|
|
<view class="pop-up-bg" v-if="empowerShow">
|
2023-01-06 15:08:04 +08:00
|
|
|
|
<view class="user-info-box">
|
|
|
|
|
|
<view class="info">
|
|
|
|
|
|
<view class="cover">
|
|
|
|
|
|
<image :src="imgSrc" mode="aspectFit"></image>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="name">{{appletName}}</view>
|
|
|
|
|
|
<view class="tips">
|
|
|
|
|
|
<view>邀请您补全个人信息</view>
|
|
|
|
|
|
<view>(昵称、头像)</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="msg">
|
|
|
|
|
|
<view class="item">
|
|
|
|
|
|
<text>头像</text>
|
|
|
|
|
|
<button class="avatar" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
|
|
|
|
|
|
<view class="img"><image :src="userInfo.avatarUrl || logoAvatar" mode="aspectFit"></image></view>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="item">
|
|
|
|
|
|
<text>昵称</text>
|
|
|
|
|
|
<input class="nick-name" type="nickname" @blur="nickNameInput" v-model="userInfo.nickName" placeholder="请输入昵称" placeholder-style="color:#999"/>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="empower-btns">
|
|
|
|
|
|
<view class="btn" @tap="refuseEv">拒绝</view>
|
|
|
|
|
|
<view class="btn" @tap="bindGetUserInfo('other')">授权</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
2022-08-05 11:08:36 +08:00
|
|
|
|
</view>
|
2022-08-01 17:03:10 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
2022-08-05 11:08:36 +08:00
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
2023-01-06 15:08:04 +08:00
|
|
|
|
userInfo: {
|
|
|
|
|
|
nickName:'',
|
|
|
|
|
|
avatarUrl:''
|
|
|
|
|
|
}, //用户信息
|
2022-08-05 11:08:36 +08:00
|
|
|
|
imgSrc: '/static/public/logo.jpg', //默认logo头像
|
2023-01-06 16:56:12 +08:00
|
|
|
|
logoAvatar:'/static/public/logo-avatar.jpg',//默认头像
|
2022-10-11 17:20:12 +08:00
|
|
|
|
appletName:'萌狮武术', //小程序名称
|
2023-01-06 15:08:04 +08:00
|
|
|
|
empowerShow:false, //是否显示授权弹窗
|
|
|
|
|
|
isActive:false, //是否已授权
|
|
|
|
|
|
ifEnter:false,//是否判断完成
|
2022-08-05 11:08:36 +08:00
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad() {
|
2023-01-06 15:08:04 +08:00
|
|
|
|
// 进入登录
|
|
|
|
|
|
this.bindGetUserInfo('enter');
|
2023-02-22 10:59:42 +08:00
|
|
|
|
console.log(uni.getStorageSync('invite_code'))
|
2022-08-05 11:08:36 +08:00
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
// 查看免责声明
|
|
|
|
|
|
toAgreement(){
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url:'/pagesB/disclaimers/disclaimers'
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
2023-01-06 15:08:04 +08:00
|
|
|
|
|
|
|
|
|
|
// 头像上传
|
|
|
|
|
|
uploadImg(url){
|
|
|
|
|
|
uni.showLoading({
|
|
|
|
|
|
title: '上传中'
|
|
|
|
|
|
});
|
|
|
|
|
|
this.$requst.upload('/api/file/upload/image',{path:url}).then(res=>{
|
|
|
|
|
|
if(res.code==0) {
|
2023-02-23 10:22:52 +08:00
|
|
|
|
this.userInfo.avatarUrl = res.data.src;
|
2023-01-06 15:08:04 +08:00
|
|
|
|
}
|
|
|
|
|
|
uni.hideLoading();
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 获取头像
|
|
|
|
|
|
chooseAvatar(e){
|
|
|
|
|
|
// 上传头像
|
|
|
|
|
|
this.uploadImg(e.detail.avatarUrl)
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 获取昵称
|
|
|
|
|
|
nickNameInput(e){
|
|
|
|
|
|
this.userInfo.nickName = e.detail.value
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 拒绝登录
|
|
|
|
|
|
refuseEv(){
|
|
|
|
|
|
this.$toolAll.tools.showToast('您已拒绝授权');
|
|
|
|
|
|
this.empowerShow = false;
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 验证登录信息
|
|
|
|
|
|
checkForm(){
|
|
|
|
|
|
if(!this.isActive){
|
|
|
|
|
|
if(this.userInfo.avatarUrl==''){
|
|
|
|
|
|
this.$toolAll.tools.showToast('请选择头像！')
|
|
|
|
|
|
return false;
|
|
|
|
|
|
}else if(this.userInfo.nickName==''){
|
|
|
|
|
|
this.$toolAll.tools.showToast('请输入昵称！')
|
|
|
|
|
|
return false;
|
|
|
|
|
|
}else{
|
|
|
|
|
|
return true;
|
|
|
|
|
|
}
|
|
|
|
|
|
}else{
|
|
|
|
|
|
return true;
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
2022-08-05 11:08:36 +08:00
|
|
|
|
//调起登录授权
|
2023-01-06 15:08:04 +08:00
|
|
|
|
bindGetUserInfo(status) {
|
2022-08-05 11:08:36 +08:00
|
|
|
|
let ya = this;
|
|
|
|
|
|
//新版登录方式
|
2023-01-06 15:08:04 +08:00
|
|
|
|
uni.login({
|
|
|
|
|
|
provider: 'weixin',
|
|
|
|
|
|
success: (res)=> {
|
|
|
|
|
|
if (res.code) {
|
|
|
|
|
|
ya.updateUserInfo(res.code,status);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: '登录失败！',
|
|
|
|
|
|
duration: 2000
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
2022-08-05 11:08:36 +08:00
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//调用登录接口
|
2023-01-06 15:08:04 +08:00
|
|
|
|
updateUserInfo(code,status) {
|
2022-08-05 11:08:36 +08:00
|
|
|
|
let ya = this;
|
2023-01-06 15:08:04 +08:00
|
|
|
|
if(status=='enter'){
|
2023-02-22 11:23:24 +08:00
|
|
|
|
this.$requst.post('/api/user/login',{
|
|
|
|
|
|
code:code,
|
|
|
|
|
|
invite_code:uni.getStorageSync('invite_code')?uni.getStorageSync('invite_code'):''
|
|
|
|
|
|
}).then(res => {
|
2023-01-06 15:08:04 +08:00
|
|
|
|
if(res.code == 0){
|
|
|
|
|
|
console.log(res,'进入登录信息');
|
|
|
|
|
|
if(res.data.is_active==1){
|
|
|
|
|
|
this.isActive = true;
|
|
|
|
|
|
}else{
|
|
|
|
|
|
uni.setStorageSync('token',res.data.token) //缓存token
|
|
|
|
|
|
}
|
|
|
|
|
|
this.ifEnter = true;
|
2022-08-05 11:08:36 +08:00
|
|
|
|
}
|
2023-01-06 15:08:04 +08:00
|
|
|
|
},error => {
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
if(status=='other'){
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: '登录中...',
|
|
|
|
|
|
icon:'loading',
|
|
|
|
|
|
duration:10000
|
|
|
|
|
|
})
|
|
|
|
|
|
var params = {
|
|
|
|
|
|
code:code,
|
|
|
|
|
|
nickname: ya.userInfo.nickName,//用户昵称
|
|
|
|
|
|
headimgurl: ya.userInfo.avatarUrl,//用户头像
|
|
|
|
|
|
country: ya.userInfo.country,//用户所在国家
|
|
|
|
|
|
province: ya.userInfo.province,//用户所在省份
|
|
|
|
|
|
city: ya.userInfo.city,//用户所在城市
|
|
|
|
|
|
gender: ya.userInfo.gender,//用户性别
|
|
|
|
|
|
language:ya.userInfo.language,//语言
|
|
|
|
|
|
invite_code:uni.getStorageSync('invite_code')?uni.getStorageSync('invite_code'):'',
|
|
|
|
|
|
is_active:1
|
2022-08-05 11:08:36 +08:00
|
|
|
|
}
|
2023-01-06 15:08:04 +08:00
|
|
|
|
this.$requst.post('/api/user/login',params).then(res => {
|
|
|
|
|
|
if(res.code == 0){
|
|
|
|
|
|
uni.setStorageSync('userId',res.data.account_id)
|
|
|
|
|
|
uni.setStorageSync('token',res.data.token)//缓存token
|
|
|
|
|
|
uni.setStorageSync('openid',res.data.openid)//缓存openid
|
|
|
|
|
|
uni.setStorageSync('expire',res.data.expire)//缓存失效时间（时间戳格式）
|
|
|
|
|
|
uni.setStorageSync('phone_active',res.data.phone_active)//是否授权手机号
|
|
|
|
|
|
uni.setStorageSync('is_active',res.data.is_active)//是否授权头像和昵称
|
|
|
|
|
|
uni.setStorageSync('invite_code',res.data.invite_code)//缓存邀请码
|
|
|
|
|
|
if(uni.getStorageSync('page-path-options')) {
|
|
|
|
|
|
uni.reLaunch({ // 重新进入当前页面
|
|
|
|
|
|
url:uni.getStorageSync('page-path-options')
|
|
|
|
|
|
})
|
|
|
|
|
|
} else {
|
|
|
|
|
|
uni.reLaunch({
|
|
|
|
|
|
url:'/pages/tabbar/pagehome/pagehome'
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},error => {})
|
|
|
|
|
|
}
|
2022-08-05 11:08:36 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2022-08-01 17:03:10 +08:00
|
|
|
|
</script>
|
2022-08-05 11:08:36 +08:00
|
|
|
|
<style scoped>
|
|
|
|
|
|
.login-header {
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
top: 40%;
|
|
|
|
|
|
transform: translate(-50%,-50%);
|
|
|
|
|
|
}
|
|
|
|
|
|
.infoImg {
|
|
|
|
|
|
width: 224rpx;
|
|
|
|
|
|
height: 224rpx;
|
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
|
border: 2rpx solid #d8d8d8;
|
|
|
|
|
|
}
|
|
|
|
|
|
.logo-name {
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
letter-spacing: 4rpx;
|
|
|
|
|
|
text-indent: 4rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.login-footer {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
bottom: 120rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.login-btn {
|
|
|
|
|
|
width: calc(100% - 80rpx);
|
|
|
|
|
|
line-height: 100rpx;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
background-color: #e42417;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
font-size: 34rpx;
|
|
|
|
|
|
letter-spacing: 4rpx;
|
|
|
|
|
|
text-indent: 4rpx;
|
|
|
|
|
|
box-shadow: 0rpx 8rpx 20rpx rgba(228,36,23,.5);
|
|
|
|
|
|
}
|
|
|
|
|
|
.agreement-box{
|
|
|
|
|
|
margin-top: 25rpx;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.agreement{
|
|
|
|
|
|
color: #e42417;
|
|
|
|
|
|
}
|
2023-01-06 15:08:04 +08:00
|
|
|
|
/* 授权弹窗 */
|
|
|
|
|
|
.pop-up-bg{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
width: 100vw;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
background-color: rgba(0,0,0,.5);
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
z-index: 999;
|
|
|
|
|
|
}
|
|
|
|
|
|
.user-info-box{
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
width: calc(100% - 200rpx);
|
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
padding: 40rpx 45rpx 35rpx;
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.user-info-box .info{
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.user-info-box .cover{
|
|
|
|
|
|
width: 150rpx;
|
|
|
|
|
|
height: 150rpx;
|
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
|
box-shadow: 0px 0px 20rpx 4rpx rgba(228,36,23,.1);
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.user-info-box .cover image{
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.user-info-box .name{
|
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
|
margin: 8rpx 0 15rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.user-info-box .tips{
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
line-height: 1.6;
|
|
|
|
|
|
color: #666666;
|
|
|
|
|
|
}
|
|
|
|
|
|
.user-info-box .tips view:last-child{
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #e42417;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.user-info-box .msg{
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.user-info-box .item{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
padding: 10rpx 0;
|
|
|
|
|
|
border-bottom: 2rpx solid #f1f5f9;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.user-info-box .item text{
|
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.user-info-box .avatar{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
width: calc(100% - 80rpx);
|
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
background: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
.user-info-box .avatar::after{
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
.user-info-box .avatar .img{
|
|
|
|
|
|
width: 100rpx;
|
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.user-info-box .avatar image{
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.user-info-box .nick-name{
|
|
|
|
|
|
width: calc(100% - 80rpx);
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.user-info-box .empower-btns{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.user-info-box .empower-btns .btn{
|
|
|
|
|
|
width: 50%;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
align-items: 1.5;
|
|
|
|
|
|
padding-top: 20rpx;
|
|
|
|
|
|
color: #666666;
|
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.user-info-box .empower-btns .btn:nth-of-type(2){
|
|
|
|
|
|
color: #e42417;
|
|
|
|
|
|
}
|
2022-08-01 17:03:10 +08:00
|
|
|
|
</style>
|
