<template>
<view class="page">
<view class="group_2">
<text lines="1" class="text_2">欢迎登录</text>
<input type="text" class="text_3" v-model="formData.phone" placeholder="请输入手机号码">
<view class="block_1"></view>
<view class="text-wrapper_1">
<!-- <text lines="1" class="text_4">请输入手机验证码</text> -->
<input type="text" class="text_4" v-model="formData.code" placeholder="请输入手机验证码">
<text v-if="countdown == 60" lines="1" class="text_5" @click="handleCountdown()">获取验证码</text>
<text v-else lines="1" class="text_5_1" >发送成功 {{countdown}}s</text>
</view>
<view class="block_2"></view>
<button @click="handleSubmit" class="button_1">
<text lines="1" class="text_6">登录</text>
</button>
<view class="block_3">
<text lines="1" class="text_7" @click="req">新用户注册</text>
<image src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG192c1e9c2f41ac893df2f64cadf28d57.png" class="icon_1"></image>
</view>
<text lines="1" class="text_8">其他登录方式</text>
<image src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG04565294df767a71f9bf12da31ef548a.png" class="icon_2"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
formData: {
phone: '',
code: '',
type: 1,
},
countdown: 60,
timer: {},
}
},
methods: {
handleCountdown() {
// this.countdown --
if (!this.formData.phone) {
uni.showToast({
title:'手机号不能为空',
icon:'none'
})
return;
}
// getCode({type:2, phone:this.form.phone}).then(res =>{
// this.$u.toast(res.data.msg);
// });
// //点击获取验证码
this.timer = setInterval(() => {
if (this.countdown > 1 ) {
this.countdown --;
} else {
clearInterval(this.timer);
this.timer = null;
this.countdown = 60;
}
}, 1000);
},
handleGetCode() {
},
handleSubmit() {
},
register() {
}
}
}
</script>
<style>
.page {
background-color: rgba(255,255,255,1.000000);
position: relative;
width: 750rpx;
height: 1624rpx;
overflow: hidden;
display: flex;
flex-direction: column;
}
.group_1 {
width: 750rpx;
height: 88rpx;
flex-direction: row;
display: flex;
}
.text_1 {
width: 52rpx;
height: 42rpx;
overflow-wrap: break-word;
color: rgba(0,0,0,1.000000);
font-size: 30rpx;
letter-spacing: -1rpx;
font-family: Source Han Sans CN-ExtraLight;
font-weight: 250;
text-align: center;
white-space: nowrap;
line-height: 42rpx;
margin: 28rpx 0 0 70rpx;
}
.thumbnail_1 {
width: 34rpx;
height: 22rpx;
margin: 36rpx 0 0 466rpx;
}
.thumbnail_2 {
width: 32rpx;
height: 22rpx;
margin: 36rpx 0 0 10rpx;
}
.image_1 {
width: 50rpx;
height: 24rpx;
margin: 36rpx 26rpx 0 10rpx;
}
.group_2 {
width: 750rpx;
height: 1538rpx;
margin-bottom: 2rpx;
display: flex;
flex-direction: column;
}
.nav-bar_1 {
height: 94rpx;
margin-top: 28rpx;
display: flex;
flex-direction: column;
width: 750rpx;
}
.label_1 {
width: 48rpx;
height: 48rpx;
margin: 26rpx 0 0 30rpx;
}
.text_2 {
width: 282rpx;
height: 68rpx;
overflow-wrap: break-word;
color: rgba(38,36,36,1.000000);
font-size: 48rpx;
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 68rpx;
margin: 86rpx 0 0 56rpx;
}
.text_3 {
width: 500rpx;
height: 42rpx;
overflow-wrap: break-word;
color: rgba(38,36,36,1.000000);
font-size: 30rpx;
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 42rpx;
margin: 98rpx 0 0 60rpx;
}
.block_1 {
background-color: rgba(240,240,240,1.000000);
width: 630rpx;
height: 2rpx;
display: flex;
flex-direction: column;
margin: 24rpx 0 0 60rpx;
}
.text-wrapper_1 {
width: 630rpx;
height: 42rpx;
flex-direction: row;
display: flex;
justify-content: space-between;
margin: 32rpx 0 0 60rpx;
}
.text_4 {
width: 406rpx;
height: 42rpx;
overflow-wrap: break-word;
color: rgba(38,36,36,1.000000);
font-size: 30rpx;
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 42rpx;
}
.text_5 {
width: 118rpx;
height: 34rpx;
overflow-wrap: break-word;
color: rgba(233,185,33,1.000000);
font-size: 24rpx;
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
font-weight: normal;
text-align: right;
white-space: nowrap;
line-height: 34rpx;
margin-top: 6rpx;
}
.text_5_1 {
width: 118rpx;
height: 34rpx;
overflow-wrap: break-word;
color: #999999;
font-size: 24rpx;
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
font-weight: normal;
text-align: right;
white-space: nowrap;
line-height: 34rpx;
margin-top: 6rpx;
}
.block_2 {
background-color: rgba(240,240,240,1.000000);
width: 630rpx;
height: 2rpx;
display: flex;
flex-direction: column;
margin: 36rpx 0 0 60rpx;
}
.button_1 {
background-color: rgba(244,211,152,0.600000);
border-radius: 44rpx;
height: 90rpx;
display: flex;
flex-direction: column;
width: 630rpx;
margin: 50rpx 0 0 60rpx;
}
.text_6 {
width: 60rpx;
height: 42rpx;
overflow-wrap: break-word;
color: rgba(255,255,255,1.000000);
font-size: 30rpx;
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 42rpx;
margin: 24rpx 0 0 286rpx;
}
.block_3 {
width: 172rpx;
height: 40rpx;
flex-direction: row;
display: flex;
justify-content: space-between;
margin: 40rpx 0 0 290rpx;
}
.text_7 {
width: 138rpx;
height: 40rpx;
overflow-wrap: break-word;
color: rgba(102,98,98,1.000000);
font-size: 28rpx;
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
font-weight: normal;
text-align: right;
white-space: nowrap;
line-height: 40rpx;
}
.icon_1 {
width: 10rpx;
height: 16rpx;
margin-top: 14rpx;
}
.text_8 {
width: 154rpx;
height: 36rpx;
overflow-wrap: break-word;
color: rgba(153,147,147,1.000000);
font-size: 26rpx;
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 36rpx;
margin: 426rpx 0 0 300rpx;
}
.icon_2 {
width: 80rpx;
height: 80rpx;
margin: 42rpx 0 160rpx 338rpx;
}
</style>
vue3点击获取验证码倒计时
最新推荐文章于 2024-06-17 10:51:35 发布