480 lines
16 KiB
Vue
480 lines
16 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="getCaptcha">{{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>
|
|
<u-popup :show="showCaptchaCode" :round='10' mode='center' @close='close' @open="open">
|
|
<view class="showImgCode">
|
|
<view class="title"> 图片验证码 </view>
|
|
<image class="cover" @click="getCaptcha()" :src="captchaImg" mode="widthFix" />
|
|
<input class="input" v-model="captchaCode" maxlength="6" placeholder="验证码" />
|
|
<view class="btn" @click="sureImgCode"> 确认验证码 </view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
smsAuth,
|
|
getInvitationSms,
|
|
keyAuth,
|
|
captcha,
|
|
} from '@/apis/interfaces/auth.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
phone: '',
|
|
code: '',
|
|
parentId: '', // 父类邀请码
|
|
getSms: false,
|
|
sendCode: '获取验证码',
|
|
isShowParent: false,
|
|
isKeyAuth: false,
|
|
shareId: '',
|
|
captchaImg: '',
|
|
captchaKey: '',
|
|
captchaCode: '',
|
|
showCaptchaCode: false, // 是否显示图片验证弹窗
|
|
};
|
|
},
|
|
onShow() {
|
|
setTimeout(() => {
|
|
if (plus.runtime.arguments.split('?')[1]) {
|
|
let args = plus.runtime.arguments.split('?')[1]
|
|
this.shareId = args.split('invitation')[0]
|
|
this.parentId = args.split('invitation')[1]
|
|
}
|
|
}, 100);
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
})
|
|
// 预登录
|
|
uni.preLogin({
|
|
provider: 'univerify',
|
|
success: res => {
|
|
this.isKeyAuth = true
|
|
},
|
|
complete() {
|
|
uni.hideLoading()
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
open() {
|
|
|
|
},
|
|
close() {
|
|
this.showCaptchaCode = false
|
|
},
|
|
|
|
// 弹窗确认验证码
|
|
sureImgCode() {
|
|
if (this.captchaCode != '' && this.captchaCode.length == 4) {
|
|
this.showCaptchaCode = false;
|
|
this.getPhoneCode();
|
|
return;
|
|
}
|
|
uni.showToast({
|
|
title: '请核对图片验证码',
|
|
icon: 'none',
|
|
mask: true,
|
|
duration: 2000
|
|
|
|
})
|
|
},
|
|
|
|
// 获取图片验证码
|
|
getCaptcha() {
|
|
if (this.phone.length != 11) {
|
|
uni.showToast({
|
|
title: '请核对手机号码',
|
|
icon: 'none',
|
|
mask: true,
|
|
duration: 2000,
|
|
})
|
|
return;
|
|
}
|
|
this.captchaCode = ''
|
|
this.captchaKey = ''
|
|
this.captchaImg = ''
|
|
this.showCaptchaCode = true;
|
|
captcha().then(res => {
|
|
this.captchaKey = res.key;
|
|
this.captchaImg = res.img;
|
|
}).catch(err => {
|
|
console.log(err)
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: 'none',
|
|
mask: true,
|
|
duration: 2000,
|
|
})
|
|
})
|
|
},
|
|
// 获取验证码
|
|
|
|
getPhoneCode() {
|
|
if (this.phone.length != 11) {
|
|
uni.showToast({
|
|
title: '请核对手机号码',
|
|
icon: 'none',
|
|
mask: true,
|
|
duration: 2000,
|
|
})
|
|
return;
|
|
}
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
})
|
|
let outTime;
|
|
let smsTime = 60;
|
|
getInvitationSms({
|
|
mobileNo: this.phone,
|
|
captcha_key: this.captchaKey,
|
|
captcha: this.captchaCode,
|
|
}).then(res => {
|
|
uni.showToast({
|
|
title: res.message,
|
|
icon: "none",
|
|
});
|
|
this.isShowParent = res.is_show_parent
|
|
this.getSms = true;
|
|
this.sendCode = smsTime + 's后重新获取';
|
|
this.captchaKey = ''
|
|
this.captchaCode = ''
|
|
outTime = setInterval(() => {
|
|
if (smsTime <= 1) {
|
|
this.getSms = false;
|
|
this.sendCode = '重新获取';
|
|
clearInterval(outTime);
|
|
return
|
|
}
|
|
this.sendCode = smsTime + 's后重新获取';
|
|
smsTime -= 1;
|
|
}, 1000);
|
|
this.captchaKey = ''
|
|
this.captchaCode = ''
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
this.captchaCode = ''
|
|
this.captchaKey = ''
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none",
|
|
});
|
|
});
|
|
},
|
|
// 登录
|
|
login(type) {
|
|
if (type === 'code') {
|
|
uni.showLoading({
|
|
title: '登录中'
|
|
})
|
|
let data = {
|
|
mobileNo: this.phone,
|
|
code: this.code,
|
|
parent_id: this.parentId
|
|
}
|
|
console.log(data);
|
|
smsAuth(data).then((res) => {
|
|
this.setAuthToken(res.token_type + ' ' + res.access_token, res.is_new)
|
|
uni.hideLoading()
|
|
}).catch((err) => {
|
|
console.log(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',
|
|
params: {
|
|
shareId: this.shareId
|
|
}
|
|
})
|
|
return
|
|
}
|
|
uni.setStorageSync('isnew', 1)
|
|
if (this.shareId != '' && this.shareId != undefined) {
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
plus.runtime.arguments = null;
|
|
plus.runtime.arguments = '';
|
|
uni.reLaunch({
|
|
url: '/pages/group-book/success/success?access=1&id=' + this.shareId
|
|
})
|
|
}, 1000)
|
|
} else {
|
|
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-img-code {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-radius: 50rpx;
|
|
margin-top: 40rpx;
|
|
background: white;
|
|
height: 100rpx;
|
|
|
|
input {
|
|
height: 100rpx;
|
|
font-size: 32rpx;
|
|
padding: 0 50rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
image {
|
|
width: 180rpx;
|
|
margin-right: 50rpx;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.showImgCode {
|
|
width: 600rpx;
|
|
padding: 50rpx 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.title {
|
|
text-align: center;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cover {
|
|
width: 100%;
|
|
padding: 50rpx 0;
|
|
height: 150rpx;
|
|
}
|
|
|
|
.input {
|
|
border-radius: 6rpx;
|
|
border: solid 1rpx #cacaca;
|
|
padding: 30rpx 0;
|
|
text-align: center;
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.btn {
|
|
background-color: #34ce98;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
border-radius: 10rpx;
|
|
margin-top: 30rpx;
|
|
text-align: center;
|
|
padding: 30rpx 0;
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|