利用uni-app写一个登录页面 包含获取手机号的接口
时间: 2024-02-05 09:04:30 浏览: 20
好的,以下是一个使用uni-app实现的登录页面,同时包含获取手机号的接口:
```html
<template>
<view class="container">
<view class="form">
<view class="form-item">
<view class="form-label">手机号</view>
<view class="form-input">
<input type="tel" v-model="phone" placeholder="请输入手机号" />
</view>
</view>
<view class="form-item">
<view class="form-label">验证码</view>
<view class="form-input">
<input type="text" v-model="code" placeholder="请输入验证码" />
</view>
<view class="form-action">
<button @click="getCode" :disabled="countdown > 0">
{{ countdown > 0 ? countdown + '秒后重新获取' : '获取验证码' }}
</button>
</view>
</view>
<view class="form-action">
<button @click="login">登录</button>
</view>
</view>
</view>
</template>
<script>
import { getCode, login } from '@/api/user'
export default {
data() {
return {
phone: '',
code: '',
countdown: 0,
timer: null
}
},
methods: {
getCode() {
if (!/^1\d{10}$/.test(this.phone)) {
uni.showToast({
title: '请输入正确的手机号',
icon: 'none'
})
return
}
this.countdown = 60
this.timer = setInterval(() => {
this.countdown--
if (this.countdown <= 0) {
clearInterval(this.timer)
}
}, 1000)
getCode(this.phone)
},
login() {
if (!/^1\d{10}$/.test(this.phone)) {
uni.showToast({
title: '请输入正确的手机号',
icon: 'none'
})
return
}
if (!/^\d{6}$/.test(this.code)) {
uni.showToast({
title: '请输入6位数字验证码',
icon: 'none'
})
return
}
login(this.phone, this.code).then(res => {
// 登录成功,进行跳转或其他操作
})
}
}
}
</script>
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
.form {
width: 90%;
max-width: 400px;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.form-label {
flex-shrink: 0;
width: 80px;
font-size: 16px;
}
.form-input {
flex-grow: 1;
}
.form-input input {
width: 100%;
height: 40px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
outline: none;
}
.form-action {
display: flex;
justify-content: flex-end;
align-items: center;
}
.form-action button {
height: 40px;
padding: 0 20px;
border: none;
background-color: #007aff;
color: #fff;
border-radius: 20px;
font-size: 16px;
outline: none;
cursor: pointer;
}
.form-action button:disabled {
background-color: #ddd;
color: #666;
cursor: not-allowed;
}
</style>
```
其中,`getCode`和`login`是调用接口的方法,可以根据实际情况进行实现。在这里,我使用了`uni.showToast`方法来进行提示。同时,通过设置`countdown`和`timer`来实现倒计时功能。