282 lines
5.9 KiB
Vue
282 lines
5.9 KiB
Vue
<template>
|
||
<view class="login-container">
|
||
<view class="title">
|
||
<image class="title-imge" src="/static/index/nu.png" />
|
||
<view class="title-font">
|
||
<view class="">您好,</view>
|
||
<view class="">欢迎使用nu护理单元~</view>
|
||
</view>
|
||
</view>
|
||
<image class="photo-imge" src="/static/index/bgc.png" />
|
||
<image class="old-imge" src="/static/index/old.png" />
|
||
<view class="under-container">
|
||
<view class="under-container-title">
|
||
<view class="code-title">
|
||
请输入验证码
|
||
</view>
|
||
<view class="code-number">
|
||
验证码已发送至{{ phonenumber }}
|
||
</view>
|
||
<!-- <view class="under-container-input">
|
||
<view class="input-left">+86</view>
|
||
<input type="number" style="width: 600rpx;" maxlength="11" placeholder="请输入手机号" @input="isRight" />
|
||
</view> -->
|
||
</view>
|
||
<view class="captcha-container">
|
||
<view class="captcha-box">
|
||
<view v-for="(digit, index) in captcha" :key="index" class="captcha-item">
|
||
<input v-model="captcha[index]" class="captcha-input" type="number" maxlength="1"
|
||
:placeholder="index < 3 ? '' : ' '" @input="handleInput(index)"
|
||
@keydown="handleKeydown(index, $event)" :focus="focusedIndex === index" />
|
||
</view>
|
||
</view>
|
||
<!-- 触发钩子 -->
|
||
<!-- <button class="submit-btn" @click="submitCaptcha">提交验证码</button> -->
|
||
</view>
|
||
<view style="width: 100%;">
|
||
<view class="right-blue">
|
||
重新发送
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="under-container-title">
|
||
请输入验证码
|
||
</view>
|
||
<view class="button-blue" v-show="canClick" @click="loginIt">
|
||
获得验证码
|
||
</view>
|
||
<view class="button-gray" v-show="!canClick">
|
||
获得验证码
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
nextTick,
|
||
reactive,
|
||
ref
|
||
} from 'vue';
|
||
import {
|
||
onLoad
|
||
} from '@dcloudio/uni-app';
|
||
|
||
const phonenumber = ref("")
|
||
const captcha = ref(['', '', '', '']); // 用来存储4个小方块的验证码输入
|
||
const focusedIndex = ref(0); // 当前聚焦的小方块索引
|
||
|
||
// 输入框输入时的处理函数
|
||
const handleInput = (index) => {
|
||
if (captcha.value[index]) {
|
||
if (index < 3) {
|
||
focusedIndex.value = index + 1; // 输入后自动聚焦到下一个小方块
|
||
}
|
||
}
|
||
let isFour = true;
|
||
captcha.value.forEach(number=>{
|
||
if(!number){
|
||
isFour = false;
|
||
}
|
||
})
|
||
nextTick(()=>{
|
||
if(isFour){
|
||
submitCaptcha()
|
||
}
|
||
|
||
})
|
||
};
|
||
|
||
// 处理删除键
|
||
const handleKeydown = (index, event) => {
|
||
if (event.key === 'Backspace' && !captcha.value[index]) {
|
||
if (index > 0) {
|
||
focusedIndex.value = index - 1; // 如果当前小方块为空,则聚焦到前一个小方块
|
||
}
|
||
}
|
||
};
|
||
|
||
// 提交验证码
|
||
const submitCaptcha = () => {
|
||
const code = captcha.value.join('');
|
||
if (code.length === 4) {
|
||
console.log('提交验证码:', code);
|
||
// 执行验证码提交的逻辑
|
||
} else {
|
||
console.log('验证码未输入完整');
|
||
}
|
||
};
|
||
|
||
onLoad((options) => {
|
||
// console.log(options.phonenumber); // 获取传递的参数
|
||
phonenumber.value = options.phonenumber
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.login-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
height: 100vh;
|
||
width: 100%;
|
||
background-color: rgb(239, 241, 252);
|
||
position: relative;
|
||
|
||
.title {
|
||
display: flex;
|
||
margin-top: 120rpx;
|
||
align-items: center;
|
||
|
||
.title-imge {
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.title-font {
|
||
font-size: 35rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.photo-imge {
|
||
position: absolute;
|
||
top: 120rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 1100rpx;
|
||
}
|
||
|
||
.old-imge {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
top: 550rpx;
|
||
width: 400rpx;
|
||
height: 400rpx;
|
||
}
|
||
|
||
.under-container {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 680rpx;
|
||
background-color: #fff;
|
||
border-top-left-radius: 50rpx;
|
||
border-top-right-radius: 50rpx;
|
||
box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
// align-items: center;
|
||
color: #5A607F;
|
||
|
||
.radio-circle {
|
||
position: relative;
|
||
margin-top: 2rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #C0C5D9;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.radio-circle-target {
|
||
position: relative;
|
||
margin-top: 2rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #C0C5D9;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.radio-circle-target::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
background-color: #00C9FF;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.under-container-title {
|
||
// display: flex;
|
||
margin-top: 50rpx;
|
||
margin-bottom: 20rpx;
|
||
font-size: 25rpx;
|
||
font-weight: 500;
|
||
width: 100%;
|
||
|
||
.code-title {
|
||
margin-left: 80rpx;
|
||
font-size: 33rpx;
|
||
color: black;
|
||
font-weight: 500;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.code-number {
|
||
margin-left: 80rpx;
|
||
font-size: 28rpx;
|
||
// color: black;
|
||
// font-weight: 500;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
.captcha-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.captcha-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.captcha-item {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.captcha-input {
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
border: 2rpx solid #C0C5D9;
|
||
border-radius: 20rpx;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
margin-right: 40rpx;
|
||
outline: none;
|
||
}
|
||
|
||
.captcha-input:focus {
|
||
border-color: #00C9FF;
|
||
}
|
||
|
||
.submit-btn {
|
||
padding: 10rpx 20rpx;
|
||
background-color: #00C9FF;
|
||
color: white;
|
||
border-radius: 43rpx;
|
||
font-size: 28rpx;
|
||
margin-top: 20rpx;
|
||
width: 80%;
|
||
text-align: center;
|
||
}
|
||
.right-blue{
|
||
float: right;
|
||
color: #0083FF;
|
||
margin-right: 80rpx;
|
||
}
|
||
</style> |