officialAccount/pages/index/code.vue

282 lines
5.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>