TmOct5/dtx_store
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

创建虚拟人物，调整登录逻辑

Browse Source
This commit is contained in:
唐明明
2022-06-07 17:34:05 +08:00
parent 1c6091371e
commit b76167eb0d
19 changed files with 4434 additions and 4784 deletions
Download Patch File Download Diff File Expand all files Collapse all files

439
pages/auth/auth.vue
View File

@@ -1,251 +1,228 @@
<template>
<view class="content">
<!-- tool -->
<view class="tool-flex">
<view class="tool-flex-item" @click="$Router.back()">
<uni-icons type="closeempty" size="22" color="#666"></uni-icons>
</view>
<view class="tool-flex-item" @click="onKeyAuth()" v-if="$Route.query.keyPhone == 1">一键登录</view>
</view>
<!-- 欢迎使用 -->
<view class="header">
<view class="title">欢迎使用</view>
<view class="sumbit">共力生态，即刻开始共力人生</view>
</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>
<button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
<!-- 用户登录注册协议 -->
<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>
<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-button">
<button @click="login('code')">登录</button>
</view>
<view class="auth-agreement">
登录即表示同意<navigator hover-class="none">用户协议</navigator>和<navigator hover-class="none">隐私政策</navigator>
</view>
<!-- <view class="auth-other">
<button @click="login('mnemonic')">使用助记词登录</button>
</view> -->
</view>
</view>
</template>
<script>
import { getSms, smsAuth } from "@/apis/interfaces/auth";
import userAuth from "@/public/userAuth";
export default {
data() {
return {
phone: "",
code: "",
smsTime: 60,
getSms: false,
};
},
methods: {
// 用户登录
login() {
smsAuth({
mobileNo: this.phone,
code: this.code,
}).then((res) => {
this.$store.commit(
"setToken",
res.token_type + " " + res.access_token
);
this.$Router.back();
}).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() {
const Auth = new userAuth();
this.$Router.back();
Auth.Login();
},
},
};
import {
smsAuth,
getSms
} from '@/apis/interfaces/auth.js'
export default {
data() {
return {
phone : '18245180131',
code : '',
getSms : false,
sendCode: '获取验证码'
};
},
mounted() {
this.$store.commit('setToken', '')
},
methods: {
// 获取验证码
getPhoneCode() {
let outTime;
let smsTime = 60;
getSms({
mobileNo: this.phone,
}).then(res => {
uni.showToast({
title: res,
icon: "none",
});
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,
}).then((res) => {
this.$store.commit('setToken', res.token_type + ' ' + res.access_token);
this.$store.commit('setIsNew', res.is_new ? 0 : 1)
if(res.is_new){
this.$Router.replace({name: 'AuthRole'})
return
}
this.$Router.back()
this.$Router.pushTab({name: 'Life'})
uni.hideLoading()
}).catch((err) => {
uni.showToast({
title: err.message,
icon: "none",
});
});
return
}
if (type === 'mnemonic') {
uni.showToast({
title: '助记词登录暂未开放，敬请期待~',
icon: 'none'
})
}
}
}
}
</script>
<style lang="scss" scoped>
.content {
height: 100vh;
width: 100vw;
padding: $padding * 3;
box-sizing: border-box;
background: white;
@extend .vertical;
<style lang="scss">
.auth {
height: 100vh;
// 操作栏
.tool-flex {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding-left: $padding * 2;
padding-right: $padding * 2;
background: white;
@extend .ios-top;
.auth-back {
width: 100vw;
height: 100vh;
}
&-item {
line-height: 90rpx;
color: $text-gray;
font-size: $title-size-lg;
}
}
.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;
// 表单
.inputs {
background: $window-color;
position: relative;
margin-top: $margin;
height: 90rpx;
line-height: 90rpx;
border-radius: 45rpx;
.auth-title {
font-size: 50rpx;
font-weight: bold;
line-height: 70rpx;
color: white;
}
input {
width: 100%;
height: 90rpx;
line-height: 90rpx;
padding: 0 $padding;
border: none;
box-sizing: border-box;
font-size: $title-size-lg;
}
.auth-input {
background: white;
height: 100rpx;
border-radius: 50rpx;
margin-top: 40rpx;
overflow: hidden;
&.phone {
padding-left: 120rpx;
input {
height: 100rpx;
font-size: 32rpx;
padding: 0 50rpx;
flex: 1;
}
.label {
position: absolute;
left: 0;
top: 0;
width: 120rpx;
text-align: center;
border-right: solid 1rpx $border-color;
font-size: $title-size-lg;
}
}
&.auth-code {
display: flex;
flex-direction: row;
&.sms {
padding-right: 200rpx;
button[size="mini"] {
width: 280rpx;
padding: 0;
line-height: 100rpx;
font-size: 32rpx;
border-radius: 0;
color: #fdbc01;
background: white;
&[disabled]{
color: gray;
}
&::after {
display: none;
}
}
}
}
.sms-btn[size='mini'] {
width: 200rpx;
height: 90rpx;
line-height: 90rpx;
position: absolute;
top: 0;
right: 0;
padding: 0;
margin: 0;
border-radius: 0 45rpx 45rpx 0;
color: $main-color;
font-size: $title-size-lg;
background: $window-color;
.auth-button {
margin-top: 70rpx;
&::after {
border: none;
}
button {
background: #fdbc01;
color: white;
border-radius: 50rpx;
height: 100rpx;
line-height: 100rpx;
padding: 0;
font-weight: bold;
font-size: 34rpx;
&[disabled] {
color: rgba($color: $main-color, $alpha: .6);
background: rgba($color: $window-color, $alpha: 0);
}
}
}
}
&::after {
display: none;
}
}
}
// 头部
.header {
text-align: center;
margin-bottom: 5vh;
.auth-agreement {
text-align: center;
color: white;
font-size: 28rpx;
padding: 30rpx 0 100rpx 0;
.title {
font-size: $title-size + 10;
font-weight: bold;
color: $text-color;
line-height: 70rpx;
}
navigator {
display: inline-block;
padding: 0 10rpx;
color: #fdbc01;
}
}
.sumbit {
line-height: 50rpx;
font-size: $title-size-m;
color: $text-gray-m;
}
}
.auth-other {
padding: 0 10vw;
// 登录按钮
.btn {
margin: 0;
margin-top: $margin*2;
height: 90rpx;
line-height: 90rpx;
padding: 0;
font-size: $title-size;
border-radius: 45rpx;
background: $main-color;
color: white;
font-weight: bold;
&::after {
display: none;
}
&[disabled] {
background: rgba($color: $main-color, $alpha: .5);
}
}
// 协议
.agreement {
padding-top: 5vh;
font-size: $title-size-sm;
color: $text-gray-m;
view {
color: $main-color;
display: inline-block;
padding: 0 10rpx;
}
}
}
</style>
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>