优化内容+修复bug

This commit is contained in:
zhouyanli
2026-08-19 10:21:58 +08:00
parent 1710cba509
commit 325813c67e
13 changed files with 110 additions and 79 deletions

View File

@@ -1,29 +1,22 @@
<template>
<view class="forget-page">
<view class="status_bar"></view>
<!-- <view class="nav-bar">
<uni-icons type="left" size="28" color="#333" @click="goBack"></uni-icons>
<view class="nav-title">忘记密码</view>
</view> -->
<!-- 手机号输入框 -->
<view class="input-item">
<view class="input-icon">
<image src="http://47.104.199.163:9090/images/login/phone.png" mode="" style="height: 100%;width: 100%;"></image>
</view>
<uni-easyinput class="input-content" type="number" v-model="phoneNumber" @input="phoneNumber = phoneNumber.replace(/\D/g, '')" trim="all"
placeholder="请输入手机号" :inputBorder="false" maxlength="11" :placeholderStyle="placeholderStyle">
</uni-easyinput>
</view>
<input class="input-content native-input" :type="inputType" v-model="phoneNumber"
placeholder="请输入手机号" placeholder-style="font-size:24rpx" maxlength="11"/>
</view>
<!-- 验证码输入 + 获取验证码按钮 -->
<view class="input-item verify-item">
<view class="input-icon">
<image src="http://47.104.199.163:9090/images/login/code.png" mode="" style="height: 100%;width: 100%;"></image>
<!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> -->
</view>
<uni-easyinput class="input-content verify-input" type="number" v-model="verifyCode" @input="verifyCode = verifyCode.replace(/\D/g, '')" trim="all"
placeholder="请输入验证码" :inputBorder="false" maxlength="6" :placeholderStyle="placeholderStyle">
</uni-easyinput>
<button
<input class="input-content verify-input native-input" :type="inputType" v-model="verifyCode"
placeholder="请输入验证码" maxlength="6" placeholder-style="font-size:24rpx"/>
<button
class="get-verify-btn"
:disabled="!canGetVerify || countDown > 0"
@click="getVerifyCode"
@@ -43,9 +36,12 @@
</view>
</template>
<script setup>
import { ref, computed, onUnmounted } from 'vue';
import { ref, computed, onUnmounted } from 'vue';
import {getSendCode} from '../api/api.js'
// 输入框类型:统一用 text避免 number 在真机上把 -/. 过滤掉导致手机号被误判合法;非法手机号由 canGetVerify 禁用获取验证码按钮
const inputType = 'text'
// ====响应式数据======
const phoneNumber = ref('')
const verifyCode = ref('')
@@ -136,26 +132,6 @@ const goBack = () => {
box-sizing: border-box;
background: repeating-linear-gradient(180deg, #E2F0FF, #F6FAFF );
}
.status_bar{
width: 100%;
height: 46px;
}
/* 顶部导航栏 */
.nav-bar {
display: flex;
align-items: center;
/* height: 88rpx; */
margin-bottom: 70rpx;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 36rpx;
font-weight: 500;
color: #333;
margin-right: 100rpx;
}
/* 输入框通用样式 */
.input-item {
display: flex;
@@ -190,6 +166,11 @@ const goBack = () => {
height: 100%;
}
/* 原生 input 垂直居中 */
.native-input {
line-height: 88rpx;
}
/* 深度覆盖 uni-easyinput 内部默认样式,解决高度偏移 */
.input-content :deep(.uni-easyinput__content) {
height: 100% !important;