用户登录流程开发接口对接
This commit is contained in:
唐明明
@@ -1,70 +1,203 @@
|
||||
|
||||
<template>
|
||||
<view class="content">
|
||||
<button type="default" @click="login">登录</button>
|
||||
<view class="content">
|
||||
<view class="title">易品新境</view>
|
||||
<view class="inputs phone">
|
||||
<label class="label">+86</label>
|
||||
<input type="number" placeholder="输入您的手机号码" v-model="phone"/>
|
||||
</view>
|
||||
<view class="inputs sms">
|
||||
<input type="number" placeholder="输入短信验证码" v-model="code"/>
|
||||
<button
|
||||
class="sms-btn"
|
||||
type="default"
|
||||
size="mini"
|
||||
:disabled="phone == '' || getSms"
|
||||
@click="getPhoneCode"
|
||||
>{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
|
||||
</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/wechat.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 用户登录注册协议 -->
|
||||
<view class="agreement">未注册的手机号验证后将自动创建账号，登录即表示同意接收<navigator url="">用户隐私规格</navigator>和<navigator url="">用户服务协议</navigator></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { auth } from '@/apis/interfaces/auth'
|
||||
import { getSms, smsAuth } from '@/apis/interfaces/auth'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
phone : "18245180131",
|
||||
code : "",
|
||||
smsTime : 60,
|
||||
getSms : false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 用户登录
|
||||
login(){
|
||||
uni.login({
|
||||
provider: 'univerify',
|
||||
univerifyStyle: {
|
||||
fullScreen: true,
|
||||
authButton: {
|
||||
normalColor : "#c82626",
|
||||
borderRadius: 0
|
||||
},
|
||||
buttons: {
|
||||
list: [{
|
||||
provider : "微信",
|
||||
iconPath : "/static/icons/wechat.png"
|
||||
}]
|
||||
},
|
||||
otherLoginButton: {
|
||||
borderColor : "#c82626",
|
||||
title : "其他手机号码登录",
|
||||
borderRadius: 0,
|
||||
textColor : "#c82626"
|
||||
},
|
||||
privacyTerm: {
|
||||
privacyItems: [{
|
||||
url : "https://baidu.com",
|
||||
title : "用户服务协议"
|
||||
}]
|
||||
}
|
||||
},
|
||||
success : result => {
|
||||
auth({
|
||||
access_token: result.authResult.access_token,
|
||||
openid : result.authResult.openid
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
fail : err => {
|
||||
uni.showToast({
|
||||
title: err.errMsg
|
||||
})
|
||||
console.log(err)
|
||||
smsAuth({
|
||||
mobileNo: this.phone,
|
||||
code : this.code
|
||||
}).then(res => {
|
||||
this.$store.commit('setToken', res.token_type + '' + res.access_token)
|
||||
if(!res.is_company){
|
||||
this.$Router.replace({name: "Registered"})
|
||||
return
|
||||
}
|
||||
}).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"
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: $padding * 3;
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
.inputs{
|
||||
background: $border-color-lg;
|
||||
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: 80rpx;
|
||||
line-height: 80rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-left: solid 1rpx $border-color;
|
||||
color: $text-price;
|
||||
font-size: $title-size-lg;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
&[disabled]{
|
||||
color: rgba($color: $text-price, $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: $text-price;
|
||||
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: $text-price, $alpha: .6);
|
||||
}
|
||||
}
|
||||
.quick{
|
||||
padding-top: $padding * 3;
|
||||
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: $padding * 4;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
navigator{
|
||||
color: $text-price;
|
||||
display: inline-block;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user