feat(editProfile): 添加手机号和验证码输入限制及验证
fix(myOrders): 修复重置列表状态时的滚动位置问题 refactor(editProfile): 移除未使用的主题配置和代码
Showing
2 changed files
with
62 additions
and
19 deletions
| ... | @@ -93,12 +93,17 @@ | ... | @@ -93,12 +93,17 @@ |
| 93 | placeholder="请输入新手机号" | 93 | placeholder="请输入新手机号" |
| 94 | type="tel" | 94 | type="tel" |
| 95 | class="phone-input" | 95 | class="phone-input" |
| 96 | + maxlength="11" | ||
| 97 | + @input="onPhoneInput" | ||
| 96 | /> | 98 | /> |
| 97 | <view class="code-row"> | 99 | <view class="code-row"> |
| 98 | <nut-input | 100 | <nut-input |
| 99 | v-model="verifyCode" | 101 | v-model="verifyCode" |
| 100 | placeholder="验证码" | 102 | placeholder="验证码" |
| 101 | class="code-input" | 103 | class="code-input" |
| 104 | + maxlength="6" | ||
| 105 | + type="tel" | ||
| 106 | + @input="onCodeInput" | ||
| 102 | /> | 107 | /> |
| 103 | <nut-button | 108 | <nut-button |
| 104 | size="small" | 109 | size="small" |
| ... | @@ -170,14 +175,8 @@ | ... | @@ -170,14 +175,8 @@ |
| 170 | <script setup> | 175 | <script setup> |
| 171 | import { ref, reactive, onMounted } from 'vue' | 176 | import { ref, reactive, onMounted } from 'vue' |
| 172 | import Taro from '@tarojs/taro' | 177 | import Taro from '@tarojs/taro' |
| 173 | -import { RectLeft, Right } from '@nutui/icons-vue-taro' | ||
| 174 | import './index.less' | 178 | import './index.less' |
| 175 | - | 179 | +import { Right } from '@nutui/icons-vue-taro' |
| 176 | -// 主题配置 | ||
| 177 | -const themeVars = ref({ | ||
| 178 | - navbarBackground: '#fb923c', | ||
| 179 | - navbarColor: '#ffffff', | ||
| 180 | -}) | ||
| 181 | 180 | ||
| 182 | // 默认头像 | 181 | // 默认头像 |
| 183 | const defaultAvatar = 'https://randomuser.me/api/portraits/men/32.jpg' | 182 | const defaultAvatar = 'https://randomuser.me/api/portraits/men/32.jpg' |
| ... | @@ -256,6 +255,34 @@ const showPhoneDialog = () => { | ... | @@ -256,6 +255,34 @@ const showPhoneDialog = () => { |
| 256 | verifyCode.value = '' | 255 | verifyCode.value = '' |
| 257 | } | 256 | } |
| 258 | 257 | ||
| 258 | +/** | ||
| 259 | + * 手机号输入处理 - 只允许输入数字 | ||
| 260 | + * @param {string} value - 输入的值 | ||
| 261 | + */ | ||
| 262 | +const onPhoneInput = ({ detail }) => { | ||
| 263 | + // 只保留数字 | ||
| 264 | + newPhone.value = detail.value.replace(/\D/g, '') | ||
| 265 | +} | ||
| 266 | + | ||
| 267 | +/** | ||
| 268 | + * 验证码输入处理 - 只允许输入数字 | ||
| 269 | + * @param {string} value - 输入的值 | ||
| 270 | + */ | ||
| 271 | +const onCodeInput = ({ detail }) => { | ||
| 272 | + // 只保留数字 | ||
| 273 | + verifyCode.value = detail.value.replace(/\D/g, '') | ||
| 274 | +} | ||
| 275 | + | ||
| 276 | +/** | ||
| 277 | + * 校验手机号格式 | ||
| 278 | + * @param {string} phone - 手机号 | ||
| 279 | + * @returns {boolean} 是否有效 | ||
| 280 | + */ | ||
| 281 | +const validatePhone = (phone) => { | ||
| 282 | + const phoneRegex = /^1[3-9]\d{9}$/ | ||
| 283 | + return phoneRegex.test(phone) | ||
| 284 | +} | ||
| 285 | + | ||
| 259 | // 发送验证码 | 286 | // 发送验证码 |
| 260 | const sendCode = () => { | 287 | const sendCode = () => { |
| 261 | if (!newPhone.value) { | 288 | if (!newPhone.value) { |
| ... | @@ -266,7 +293,14 @@ const sendCode = () => { | ... | @@ -266,7 +293,14 @@ const sendCode = () => { |
| 266 | return | 293 | return |
| 267 | } | 294 | } |
| 268 | 295 | ||
| 269 | - // 模拟发送验证码 | 296 | + if (!validatePhone(newPhone.value)) { |
| 297 | + Taro.showToast({ | ||
| 298 | + title: '请输入正确的11位手机号', | ||
| 299 | + icon: 'none' | ||
| 300 | + }) | ||
| 301 | + return | ||
| 302 | + } | ||
| 303 | + | ||
| 270 | codeCountdown.value = 60 | 304 | codeCountdown.value = 60 |
| 271 | const timer = setInterval(() => { | 305 | const timer = setInterval(() => { |
| 272 | codeCountdown.value-- | 306 | codeCountdown.value-- |
| ... | @@ -291,8 +325,26 @@ const confirmPhoneChange = () => { | ... | @@ -291,8 +325,26 @@ const confirmPhoneChange = () => { |
| 291 | return | 325 | return |
| 292 | } | 326 | } |
| 293 | 327 | ||
| 328 | + if (!validatePhone(newPhone.value)) { | ||
| 329 | + Taro.showToast({ | ||
| 330 | + title: '请输入正确的11位手机号', | ||
| 331 | + icon: 'none' | ||
| 332 | + }) | ||
| 333 | + return | ||
| 334 | + } | ||
| 335 | + | ||
| 336 | + if (verifyCode.value.length !== 6) { | ||
| 337 | + Taro.showToast({ | ||
| 338 | + title: '请输入6位验证码', | ||
| 339 | + icon: 'none' | ||
| 340 | + }) | ||
| 341 | + return | ||
| 342 | + } | ||
| 343 | + | ||
| 294 | formData.phone = newPhone.value | 344 | formData.phone = newPhone.value |
| 295 | phoneDialogVisible.value = false | 345 | phoneDialogVisible.value = false |
| 346 | + newPhone.value = '' | ||
| 347 | + verifyCode.value = '' | ||
| 296 | Taro.showToast({ | 348 | Taro.showToast({ |
| 297 | title: '手机号绑定成功', | 349 | title: '手机号绑定成功', |
| 298 | icon: 'success' | 350 | icon: 'success' |
| ... | @@ -306,7 +358,6 @@ const showDatePicker = () => { | ... | @@ -306,7 +358,6 @@ const showDatePicker = () => { |
| 306 | 358 | ||
| 307 | // 确认日期选择 | 359 | // 确认日期选择 |
| 308 | const onDateConfirm = ({ selectedValue }) => { | 360 | const onDateConfirm = ({ selectedValue }) => { |
| 309 | - const date = new Date(selectedValue[0], selectedValue[1] - 1, selectedValue[2]) | ||
| 310 | formData.birthday = `${selectedValue[0]}-${String(selectedValue[1]).padStart(2, '0')}-${String(selectedValue[2]).padStart(2, '0')}` | 361 | formData.birthday = `${selectedValue[0]}-${String(selectedValue[1]).padStart(2, '0')}-${String(selectedValue[2]).padStart(2, '0')}` |
| 311 | datePickerVisible.value = false | 362 | datePickerVisible.value = false |
| 312 | } | 363 | } |
| ... | @@ -325,8 +376,6 @@ const onSchoolConfirm = ({ selectedOptions }) => { | ... | @@ -325,8 +376,6 @@ const onSchoolConfirm = ({ selectedOptions }) => { |
| 325 | // 保存 | 376 | // 保存 |
| 326 | const handleSave = () => { | 377 | const handleSave = () => { |
| 327 | // 这里可以添加表单验证 | 378 | // 这里可以添加表单验证 |
| 328 | - console.log('保存数据:', formData) | ||
| 329 | - | ||
| 330 | toastVisible.value = true | 379 | toastVisible.value = true |
| 331 | 380 | ||
| 332 | setTimeout(() => { | 381 | setTimeout(() => { |
| ... | @@ -337,12 +386,6 @@ const handleSave = () => { | ... | @@ -337,12 +386,6 @@ const handleSave = () => { |
| 337 | 386 | ||
| 338 | // 初始化 | 387 | // 初始化 |
| 339 | onMounted(() => { | 388 | onMounted(() => { |
| 340 | - // 可以在这里加载用户数据 | ||
| 341 | -}) | ||
| 342 | -</script> | ||
| 343 | 389 | ||
| 344 | -<script> | 390 | +}) |
| 345 | -export default { | ||
| 346 | - name: 'EditProfilePage' | ||
| 347 | -} | ||
| 348 | </script> | 391 | </script> | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-09-19 14:11:06 | 2 | * @Date: 2022-09-19 14:11:06 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-07-03 21:34:36 | 4 | + * @LastEditTime: 2025-07-04 13:58:14 |
| 5 | * @FilePath: /jgdl/src/pages/myOrders/index.vue | 5 | * @FilePath: /jgdl/src/pages/myOrders/index.vue |
| 6 | * @Description: 订单管理页面 | 6 | * @Description: 订单管理页面 |
| 7 | --> | 7 | --> | ... | ... |
-
Please register or login to post a comment