310 lines
6.7 KiB
Vue
310 lines
6.7 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="login-top">
|
||
<view class="top-logo-content">
|
||
<image class="top-logo" fit="contain" src="/static/imgs/top_logo.png" />
|
||
链商星球(中国)
|
||
</view>
|
||
<image class="top-bg" fit="contain" mode="widthFix" src="/static/imgs/top_bg.png" />
|
||
</view>
|
||
<!-- 输入手机号相关 -->
|
||
<view class="inputs phone">
|
||
<label class="label">+86</label>
|
||
<input type="number" placeholder="输入您的手机号码" maxlength="11" v-model="phone" />
|
||
</view>
|
||
<view class="inputs sms">
|
||
<input type="number" placeholder="输入短信验证码" maxlength="4" v-model="code" />
|
||
<button class="sms-btn" type="default" size="mini" :disabled="phone == '' || getSms"
|
||
@click="getPhoneCode">{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
|
||
</view>
|
||
<view class="inputs">
|
||
<input placeholder="邀请码" maxlength="10" v-model="parentId" />
|
||
</view>
|
||
<button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
|
||
<!-- 快捷登录 -->
|
||
<view class="quick">
|
||
<view class="quick-title">快捷登录</view>
|
||
<view class="quick-box">
|
||
<image class="quick-icon" src="@/static/icons/keyphone.png" mode="widthFix" @click="onKeyAuth"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 用户登录注册协议 -->
|
||
<view class="agreement">
|
||
未注册的手机号验证后将自动创建账号，登录即表示同意接收
|
||
<view @click="$Router.push({name: 'agreement', params: {name : 'secret'}})">用户隐私协议</view>
|
||
和
|
||
<view @click="$Router.push({name: 'agreement', params: {name : 'service'}})">用户服务协议</view>
|
||
</view>
|
||
<view class="beianNo">皖ICP备2021013714号-1</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getSms,
|
||
smsAuth
|
||
} from '@/apis/interfaces/auth'
|
||
import userAuth from '@/public/userAuth'
|
||
export default {
|
||
data() {
|
||
return {
|
||
phone : "",
|
||
code : "",
|
||
parentId: "",
|
||
smsTime : 60,
|
||
getSms : false
|
||
}
|
||
},
|
||
onShow(){
|
||
this.parentId = getApp().globalData.parentId
|
||
|
||
|
||
},
|
||
methods: {
|
||
// 用户登录
|
||
login() {
|
||
smsAuth({
|
||
mobileNo : this.phone,
|
||
code : this.code,
|
||
parent_id : this.parentId
|
||
}).then(res => {
|
||
this.$store.commit('setToken', res.token_type + ' ' + res.access_token)
|
||
if(this.$Route.toName){
|
||
this.$Router.back()
|
||
}else{
|
||
this.$Router.replaceAll({name: 'Index'})
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
// 获取验证码
|
||
getPhoneCode() {
|
||
let outTime
|
||
getSms({
|
||
mobileNo: this.phone
|
||
}).then(res => {
|
||
uni.showToast({
|
||
title: res,
|
||
icon: "none"
|
||
})
|
||
this.getSms = true
|
||
outTime = setInterval(() => {
|
||
if (this.smsTime <= 1) {
|
||
this.getSms = false
|
||
this.smsTime = 60
|
||
clearInterval('outTime')
|
||
}
|
||
this.smsTime -= 1
|
||
}, 1000)
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
// 一键登录
|
||
onKeyAuth(){
|
||
uni.showLoading({
|
||
title: "加载中..."
|
||
})
|
||
uni.preLogin({
|
||
provider: 'univerify',
|
||
success : res=> {
|
||
let userLogin = new userAuth()
|
||
userLogin.keyLogin().then(res => {
|
||
if(this.$Route.toName){
|
||
this.$Router.back()
|
||
}else{
|
||
this.$Router.replaceAll({name: 'Index'})
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
fail : err=> {
|
||
uni.showToast({
|
||
title: '当前设备环境暂不支持一键登录',
|
||
icon : 'none'
|
||
})
|
||
},
|
||
complete() {
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
height: 100vh;
|
||
width: 100vw;
|
||
padding: $padding * 3;
|
||
box-sizing: border-box;
|
||
background: white;
|
||
|
||
.login-top {
|
||
height: 25vh;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
padding-bottom: 160rpx;
|
||
.top-bg {
|
||
position: absolute;
|
||
bottom: 30rpx;
|
||
z-index: 2;
|
||
width: 740rpx;
|
||
}
|
||
.top-logo-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
color: #7f56a4;
|
||
font-size: $title-size;
|
||
.top-logo {
|
||
margin-bottom: 20rpx;
|
||
width: 146rpx;
|
||
height: 146rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.inputs {
|
||
background:rgba($color: $mian-color, $alpha: 0.05);
|
||
border: solid 1rpx $border-color;
|
||
position: relative;
|
||
margin-top: $margin;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
|
||
input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
padding: 0 $padding;
|
||
border: none;
|
||
box-sizing: border-box;
|
||
font-size: $title-size-lg;
|
||
}
|
||
|
||
&.phone {
|
||
padding-left: 120rpx;
|
||
|
||
.label {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 120rpx;
|
||
text-align: center;
|
||
border-right: solid 1rpx $border-color;
|
||
font-size: $title-size-lg;
|
||
}
|
||
}
|
||
|
||
&.sms {
|
||
padding-right: 200rpx;
|
||
.sms-btn[size='mini'] {
|
||
width: 200rpx;
|
||
height: 77rpx;
|
||
line-height: 77rpx;
|
||
position: absolute;
|
||
top: 1rpx;
|
||
right: 1rpx;
|
||
padding: 0;
|
||
margin: 0;
|
||
border-radius: 0;
|
||
border-left: solid 1rpx $border-color;
|
||
color: $mian-color;
|
||
font-size: $title-size-lg;
|
||
&::after {
|
||
border: none;
|
||
}
|
||
&[disabled] {
|
||
color: rgba($color: $mian-color, $alpha: .6);
|
||
background: $border-color-lg;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
text-align: center;
|
||
font-size: $title-size + 6;
|
||
font-weight: bold;
|
||
color: $text-color;
|
||
margin-bottom: 100rpx;
|
||
}
|
||
|
||
.btn {
|
||
background-image: linear-gradient(to bottom,#bf52eb,#8f32dd);
|
||
color: white;
|
||
border-radius: 0;
|
||
margin-top: $margin;
|
||
font-size: $title-size;
|
||
line-height: 90rpx;
|
||
height: 90rpx;
|
||
font-weight: bold;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
|
||
&[disabled] {
|
||
background: rgba($color: #8f32dd, $alpha: .6);
|
||
}
|
||
}
|
||
|
||
.quick {
|
||
padding-top: $padding * 2;
|
||
text-align: center;
|
||
.quick-title {
|
||
text-align: center;
|
||
color: $text-gray;
|
||
font-size: $title-size-sm;
|
||
padding-bottom: $padding;
|
||
}
|
||
.quick-box {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.quick-icon {
|
||
width: 78rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.agreement {
|
||
padding-top: 5vh;
|
||
font-size: $title-size-sm;
|
||
color: $text-gray;
|
||
view {
|
||
color: $mian-color;
|
||
display: inline-block;
|
||
padding: 0 10rpx;
|
||
}
|
||
}
|
||
.beianNo{
|
||
font-size: $title-size-sm;
|
||
color: $text-gray-m;
|
||
text-align: center;
|
||
padding-top: $padding*2;
|
||
}
|
||
}
|
||
</style>
|