313 lines
11 KiB
Vue
313 lines
11 KiB
Vue
<template>
|
|
<view class="auth">
|
|
<image class="auth-back" src="/static/login/auth_bg.png" mode="aspectFill"></image>
|
|
<view class="auth-center">
|
|
<view class="auth-title">
|
|
<view>共力生态</view>
|
|
<view>即可开始共力人生</view>
|
|
</view>
|
|
<view class="auth-input">
|
|
<input v-model="phone" type="number" maxlength="11" placeholder="输入手机号码">
|
|
</view>
|
|
<view class="auth-input auth-code">
|
|
<input v-model="code" type="number" maxlength="4" placeholder="输入验证码">
|
|
<button :disabled="getSms" size="mini" @click="getPhoneCode()">{{sendCode}}</button>
|
|
</view>
|
|
<view class="auth-input" v-if="isShowParent">
|
|
<input v-model="parentId" placeholder="输入邀请码,选填">
|
|
</view>
|
|
<view class="auth-button">
|
|
<button @click="login('code')">登录</button>
|
|
</view>
|
|
<view class="auth-agreement">
|
|
登录即表示同意<navigator hover-class="none" url="/pages/vip/agreement?id=3">用户协议</navigator>和<navigator
|
|
hover-class="none" url="/pages/vip/agreement?id=4">隐私政策</navigator>
|
|
</view>
|
|
<view class="auth-other" v-if="isKeyAuth">
|
|
<button @click="login('Akey')">使用本机号码一键登录</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
smsAuth,
|
|
getInvitationSms,
|
|
keyAuth
|
|
} from '@/apis/interfaces/auth.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
phone: '',
|
|
code: '',
|
|
parentId: '',
|
|
getSms: false,
|
|
sendCode: '获取验证码',
|
|
isShowParent: false,
|
|
isKeyAuth: false
|
|
};
|
|
},
|
|
onShow() {
|
|
// uni.showLoading({
|
|
// title: '加载中...',
|
|
// mask: true
|
|
// })
|
|
// // 预登录
|
|
// uni.preLogin({
|
|
// provider: 'univerify',
|
|
// success: res => {
|
|
// this.isKeyAuth = true
|
|
// uni.hideLoading()
|
|
// },
|
|
// fail: err => {
|
|
// console.log(err)
|
|
// }
|
|
// })
|
|
},
|
|
methods: {
|
|
// 获取验证码
|
|
getPhoneCode() {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
})
|
|
let outTime;
|
|
let smsTime = 60;
|
|
getInvitationSms({
|
|
mobileNo: this.phone,
|
|
}).then(res => {
|
|
uni.showToast({
|
|
title: res.message,
|
|
icon: "none",
|
|
});
|
|
this.isShowParent = res.is_show_parent
|
|
this.getSms = true;
|
|
this.sendCode = smsTime + 's后重新获取';
|
|
outTime = setInterval(() => {
|
|
if (smsTime <= 1) {
|
|
this.getSms = false;
|
|
this.sendCode = '重新获取';
|
|
clearInterval(outTime);
|
|
return
|
|
}
|
|
this.sendCode = smsTime + 's后重新获取';
|
|
smsTime -= 1;
|
|
}, 1000);
|
|
}).catch((err) => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none",
|
|
});
|
|
});
|
|
},
|
|
// 登录
|
|
login(type) {
|
|
if (type === 'code') {
|
|
uni.showLoading({
|
|
title: '登录中'
|
|
})
|
|
smsAuth({
|
|
mobileNo: this.phone,
|
|
code: this.code,
|
|
parent_id: this.parentId
|
|
}).then((res) => {
|
|
this.setAuthToken(res.token_type + ' ' + res.access_token, res.is_new)
|
|
uni.hideLoading()
|
|
}).catch((err) => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none",
|
|
});
|
|
});
|
|
return
|
|
}
|
|
if (type === 'Akey') {
|
|
this.onKeyLogin()
|
|
}
|
|
},
|
|
// 一键登录
|
|
onKeyLogin() {
|
|
uni.login({
|
|
provider: 'univerify',
|
|
univerifyStyle: {
|
|
icon: {
|
|
path: require('@/static/logo.png')
|
|
},
|
|
authButton: {
|
|
normalColor: '#34CE98',
|
|
highlightColor: '#25b381',
|
|
disabledColor: '#25b381'
|
|
},
|
|
otherLoginButton: {
|
|
visible: false
|
|
},
|
|
privacyTerms: {
|
|
termsColor: '#34CE98',
|
|
uncheckedImage: require('@/static/icon/unchecked-icon.png'),
|
|
checkedImage: require('@/static/icon/checked-icon.png')
|
|
}
|
|
},
|
|
success: Result => {
|
|
if (Result.errMsg === 'login:ok') {
|
|
let {
|
|
access_token,
|
|
openid
|
|
} = Result.authResult
|
|
keyAuth({
|
|
access_token,
|
|
openid
|
|
}).then(res => {
|
|
this.setAuthToken(res.token_type + ' ' + res.access_token, res
|
|
.is_new)
|
|
uni.closeAuthView()
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: '登录失败：' + err.message,
|
|
icon: 'none'
|
|
})
|
|
uni.closeAuthView()
|
|
})
|
|
}
|
|
},
|
|
fail: err => {
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
// setToken
|
|
setAuthToken(token, isNew) {
|
|
this.$store.commit('setToken', token);
|
|
if (isNew) {
|
|
uni.setStorageSync('isnew', 0)
|
|
this.$Router.replace({
|
|
name: 'AuthRole'
|
|
})
|
|
return
|
|
}
|
|
uni.setStorageSync('isnew', 1)
|
|
this.$Router.pushTab({
|
|
name: 'Life'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.auth {
|
|
height: 100vh;
|
|
|
|
.auth-back {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
.auth-center {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, .5));
|
|
padding: 100rpx 50rpx;
|
|
box-sizing: border-box;
|
|
|
|
.auth-title {
|
|
font-size: 50rpx;
|
|
font-weight: bold;
|
|
line-height: 70rpx;
|
|
color: white;
|
|
}
|
|
|
|
.auth-input {
|
|
background: white;
|
|
height: 100rpx;
|
|
border-radius: 50rpx;
|
|
margin-top: 40rpx;
|
|
overflow: hidden;
|
|
|
|
input {
|
|
height: 100rpx;
|
|
font-size: 32rpx;
|
|
padding: 0 50rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
&.auth-code {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
button[size="mini"] {
|
|
width: 280rpx;
|
|
padding: 0;
|
|
line-height: 100rpx;
|
|
font-size: 32rpx;
|
|
border-radius: 0;
|
|
color: $main-color;
|
|
background: white;
|
|
|
|
&[disabled] {
|
|
color: gray;
|
|
}
|
|
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.auth-button {
|
|
margin-top: 70rpx;
|
|
|
|
button {
|
|
background: $main-color;
|
|
color: white;
|
|
border-radius: 50rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
padding: 0;
|
|
font-weight: bold;
|
|
font-size: 34rpx;
|
|
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.auth-agreement {
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 28rpx;
|
|
padding: 30rpx 0 60rpx 0;
|
|
|
|
navigator {
|
|
display: inline-block;
|
|
padding: 0 10rpx;
|
|
color: $main-color;
|
|
}
|
|
}
|
|
|
|
.auth-other {
|
|
padding: 0 10vw;
|
|
|
|
button {
|
|
height: 100rpx;
|
|
line-height: 98rpx;
|
|
border-radius: 50rpx;
|
|
border: solid 1px white;
|
|
color: white;
|
|
background: transparent;
|
|
font-size: 34rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|