hookehuyr

feat(editProfile): 添加手机号和验证码输入限制及验证

fix(myOrders): 修复重置列表状态时的滚动位置问题

refactor(editProfile): 移除未使用的主题配置和代码
...@@ -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 -->
......