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

format

Browse Source
This commit is contained in:
Jason.Chen
2022-02-11 17:57:26 +08:00
parent 75e6082025
commit 5f159a05b7
1 changed files with 252 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

428
pages/auth/auth.vue
View File

@@ -2,21 +2,10 @@
<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 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 class="tool-flex-item" @click="onKeyAuth()" v-if="$Route.query.keyPhone == 1">一键登录</view>
</view>
<!-- 欢迎使用 -->
<view class="header">
@@ -26,34 +15,14 @@
<!-- 输入手机号相关 -->
<view class="inputs phone">
<label class="label">+86</label>
<input
type="number"
placeholder="输入您的手机号码"
maxlength="11"
v-model="phone"
/>
<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>
<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>
<button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
<!-- 用户登录注册协议 -->
<view class="agreement">
未注册的手机号码验证后自动创建账号，登录即表示同意接受平台
@@ -65,201 +34,220 @@
</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",
});
});
import {
getSms,
smsAuth
} from "@/apis/interfaces/auth";
import userAuth from "@/public/userAuth";
export default {
data() {
return {
phone: "",
code: "",
smsTime: 60,
getSms: false,
};
},
// 获取验证码
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) => {
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();
},
},
// 一键登录
onKeyAuth() {
const Auth = new userAuth();
this.$Router.back();
Auth.Login();
},
},
};
};
</script>
<style lang="scss" scoped>
.content {
height: 100vh;
width: 100vw;
padding: $padding * 3;
box-sizing: border-box;
background: white;
@extend .vertical;
// 操作栏
.tool-flex {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding-left: $padding * 2;
padding-right: $padding * 2;
.content {
height: 100vh;
width: 100vw;
padding: $padding * 3;
box-sizing: border-box;
background: white;
@extend .ios-top;
&-item {
line-height: 90rpx;
color: $text-gray;
font-size: $title-size-lg;
}
}
// 表单
.inputs {
background: $window-color;
position: relative;
margin-top: $margin;
height: 90rpx;
line-height: 90rpx;
border-radius: 45rpx;
input {
width: 100%;
height: 90rpx;
line-height: 90rpx;
padding: 0 $padding;
border: none;
box-sizing: border-box;
font-size: $title-size-lg;
}
@extend .vertical;
&.phone {
padding-left: 120rpx;
.label {
position: absolute;
left: 0;
top: 0;
width: 120rpx;
text-align: center;
border-right: solid 1rpx $border-color;
// 操作栏
.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;
&-item {
line-height: 90rpx;
color: $text-gray;
font-size: $title-size-lg;
}
}
&.sms {
padding-right: 200rpx;
.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;
&::after {
border: none;
}
&[disabled] {
color: rgba($color: $main-color, $alpha: .6);
background: rgba($color: $window-color, $alpha: 0);
}
}
}
}
// 头部
.header{
text-align: center;
margin-bottom: 5vh;
.title {
font-size: $title-size + 10;
font-weight: bold;
color: $text-color;
line-height: 70rpx;
}
.sumbit{
line-height: 50rpx;
font-size: $title-size-m;
color: $text-gray-m;
}
}
// 登录按钮
.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;
}
}
}
// 表单
.inputs {
background: $window-color;
position: relative;
margin-top: $margin;
height: 90rpx;
line-height: 90rpx;
border-radius: 45rpx;
input {
width: 100%;
height: 90rpx;
line-height: 90rpx;
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: 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;
&::after {
border: none;
}
&[disabled] {
color: rgba($color: $main-color, $alpha: .6);
background: rgba($color: $window-color, $alpha: 0);
}
}
}
}
// 头部
.header {
text-align: center;
margin-bottom: 5vh;
.title {
font-size: $title-size + 10;
font-weight: bold;
color: $text-color;
line-height: 70rpx;
}
.sumbit {
line-height: 50rpx;
font-size: $title-size-m;
color: $text-gray-m;
}
}
// 登录按钮
.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>