373 lines
9.0 KiB
Vue
373 lines
9.0 KiB
Vue
<template>
|
||
<view>
|
||
<view class='login-header'>
|
||
<image class="infoImg" mode="aspectFill" :src="userInfo.avatarUrl || imgSrc"></image>
|
||
<view class="logo-name">{{appletName}}</view>
|
||
<view class="logo-title font24 color-99 mar-s20" style="text-align: center;">{{appleSubtitle}}</view>
|
||
</view>
|
||
<view class="login-footer">
|
||
<view class="login-btn radius20 color-ff background-blue font36" type='primary' @tap="empowerShow=true" v-if="!isActive">微信授权</view>
|
||
<view class="login-btn radius20 color-ff background-blue font36" type='primary' @tap="bindGetUserInfo('other')" v-else>微信授权</view>
|
||
<view class="agreement-box font30">如您点击授权，则表示已阅读<text @tap="toAgreement" class="agreement color-orange">《免责声明》</text></view>
|
||
</view>
|
||
<!-- 获取头像&昵称 -->
|
||
<view class="pop-up-bg" v-if="empowerShow">
|
||
<view class="user-info-box bg-white">
|
||
<view class="info">
|
||
<view class="cover">
|
||
<image :src="imgSrc" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="name color-99 font24">{{appletName}}</view>
|
||
<view class="tips">
|
||
<view class="font26">邀请您补全个人信息</view>
|
||
<view class="font24 color-blue">(昵称、头像)</view>
|
||
</view>
|
||
</view>
|
||
<view class="msg">
|
||
<view class="item font26">
|
||
<text>头像</text>
|
||
<button class="avatar" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
|
||
<image :src="userInfo.avatarUrl || logoAvatar" mode="aspectFit"></image>
|
||
</button>
|
||
</view>
|
||
<view class="item font26">
|
||
<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 font30">
|
||
<view class="btn color-99" @tap="refuseEv">拒绝</view>
|
||
<view class="btn color-blue" @tap="bindGetUserInfo('other')">允许</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
userInfo: {
|
||
nickName:'',
|
||
avatarUrl:''
|
||
}, //用户信息
|
||
canIGetUserProfile: false,
|
||
imgSrc: '/static/logo.png', //默认logo头像
|
||
logoAvatar:'/static/logo-avatar.png', //默认用户头像
|
||
appletName:'闲置商品', //小程序名称
|
||
appleSubtitle:'发布、购买闲置商品平台',
|
||
isShowP:false,
|
||
empowerShow:false, //是否显示授权弹窗
|
||
isActive:false, //是否已授权
|
||
};
|
||
},
|
||
onLoad() {
|
||
if (uni.getUserProfile) {
|
||
this.canIGetUserProfile = true;
|
||
}
|
||
},
|
||
onShow() {
|
||
// 进入登录
|
||
this.bindGetUserInfo('enter');
|
||
},
|
||
methods: {
|
||
// 设置logo图
|
||
setLogo(){
|
||
this.$requst.get('index/base-config').then(res=>{
|
||
this.imgSrc = this.$http + res.data.logo;
|
||
this.appletName = res.data.appletName;
|
||
})
|
||
},
|
||
|
||
// 暂不绑定事件
|
||
refuse(){
|
||
this.isShowP=false;
|
||
this.$toolAll.tools.showToast('登录成功','success')
|
||
uni.reLaunch({url:'/pages/idle/idle'})
|
||
},
|
||
|
||
// 授权绑定手机号
|
||
getphonenumber(e){
|
||
let ya = this;
|
||
wx.login({
|
||
success:(res)=>{
|
||
this.$requst.post('/api/v1/user/login',{code:res.code}).then(result => {
|
||
if(e.detail.errMsg=="getPhoneNumber:ok"){
|
||
this.$requst.post('/api/v1/user/bind-phone',{openid: result.data.openid,session_key:result.data.session_key, iv:e.detail.iv,encryptedData:e.detail.encryptedData}).then(res=>{
|
||
console.log('手机号信息：',res);
|
||
if(res.code==0){
|
||
this.$toolAll.tools.showToast('手机号绑定成功');
|
||
this.isShowP = true;
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
},error=>{})
|
||
} else {
|
||
// console.log('取消授权手机号')
|
||
}
|
||
}).catch(err=>{
|
||
console.log(err);
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 跳转免责
|
||
toAgreement(){
|
||
uni.navigateTo({
|
||
url:'/pages/login/disclaimers'
|
||
})
|
||
},
|
||
|
||
// 头像上传
|
||
uploadImg(url){
|
||
uni.showLoading({
|
||
title: '上传中'
|
||
});
|
||
this.$requst.upload('/api/v1/file/upload/image',{path:url}).then(res=>{
|
||
if(res.code==0) {
|
||
this.userInfo.avatarUrl = this.$hostHttp+res.data.src;
|
||
}
|
||
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;
|
||
}
|
||
},
|
||
|
||
//允许登录
|
||
bindGetUserInfo(status) {
|
||
//新版登录方式
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: (res)=> {
|
||
if (res.code) {
|
||
this.updateUserInfo(res.code,status);
|
||
} else {
|
||
uni.showToast({
|
||
title: '登录失败！',
|
||
duration: 2000
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
|
||
//调用登录接口
|
||
updateUserInfo(code,status) {
|
||
if(status=='enter'){
|
||
this.$requst.post('/api/v1/user/login',{code:code}).then(res => {
|
||
if(res.code == 0){
|
||
console.log(res,'进入登录信息');
|
||
if(res.data.is_active==1){
|
||
this.isActive = true;
|
||
}else{
|
||
uni.setStorageSync('token',res.data.token) //缓存token
|
||
}
|
||
}
|
||
},error => {
|
||
|
||
})
|
||
}
|
||
if(status=='other'){
|
||
if(this.checkForm()){
|
||
uni.showToast({
|
||
title: '登录中...',
|
||
icon:'loading',
|
||
duration:10000
|
||
})
|
||
var params = {
|
||
code:code,
|
||
nickname: this.userInfo.nickName,//用户昵称
|
||
headimgurl: this.userInfo.avatarUrl,//用户头像
|
||
is_active:1
|
||
}
|
||
this.$requst.post('/api/v1/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)//是否授权头像和昵称
|
||
if(uni.getStorageSync('page-path-options')) {
|
||
uni.reLaunch({ // 重新进入当前页面
|
||
url:uni.getStorageSync('page-path-options')
|
||
})
|
||
} else {
|
||
uni.reLaunch({
|
||
url:'/pages/idle/idle'
|
||
})
|
||
}
|
||
}
|
||
},error => {})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<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 {
|
||
display: block;
|
||
width: 224rpx;
|
||
height: 224rpx;
|
||
border-radius: 18.75%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.logo-name {
|
||
font-size: 30rpx;
|
||
margin-top: 20rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
}
|
||
|
||
.login-footer {
|
||
width: 100%;
|
||
text-align: center;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 120rpx;
|
||
}
|
||
|
||
.login-btn {
|
||
width: calc(100% - 100rpx);
|
||
line-height: 90rpx;
|
||
margin: 0 auto;
|
||
box-shadow: 0rpx 8rpx 20rpx rgba(25,129,255,.5);
|
||
}
|
||
|
||
.agreement-box{
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
/* 授权弹窗 */
|
||
.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,.7);
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 999;
|
||
}
|
||
.user-info-box{
|
||
box-sizing: border-box;
|
||
width: calc(100% - 150rpx);
|
||
border-radius: 10rpx;
|
||
padding: 40rpx 45rpx 35rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.user-info-box .info{
|
||
text-align: center;
|
||
}
|
||
|
||
.user-info-box .cover{
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
border-radius: 100%;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
}
|
||
.user-info-box .cover image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.user-info-box .name{
|
||
line-height: 1.5;
|
||
margin: 12rpx 0 8rpx;
|
||
}
|
||
.user-info-box .tips{
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.user-info-box .item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 15rpx 0;
|
||
border-bottom: 2rpx solid #f1f5f9;
|
||
}
|
||
|
||
.user-info-box .item text{
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.user-info-box .avatar{
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
padding: 0;
|
||
border: 0;
|
||
margin: 0;
|
||
border-radius: 100%;
|
||
background: none;
|
||
}
|
||
.user-info-box .avatar image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.user-info-box .nick-name{
|
||
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;
|
||
}
|
||
</style>
|