登录页功能优化

 .nut-input {
 .nut-input {
   border-radius: 50rpx;
   border-radius: 50rpx;
+  padding-top: 25rpx;
 }
 }

 <!--
 <!--
  * @Date: 2022-09-19 14:11:06
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-18 18:00:07
+ * @LastEditTime: 2023-12-20 10:25:15
  * @FilePath: /meihuaApp/src/pages/login/index.vue
  * @FilePath: /meihuaApp/src/pages/login/index.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -9,12 +9,23 @@
   <view>
   <view>
     <view style="color: #6A4925; font-size: 56rpx; text-align: center;">登&nbsp;录</view>
     <view style="color: #6A4925; font-size: 56rpx; text-align: center;">登&nbsp;录</view>
     <view style="border: 1px solid #F1EBDF; width: 90%; margin: 0 auto; margin-top: 50rpx; border-radius: 50rpx; padding: 5rpx 0;">
     <view style="border: 1px solid #F1EBDF; width: 90%; margin: 0 auto; margin-top: 50rpx; border-radius: 50rpx; padding: 5rpx 0;">
-      <nut-input v-model="tel" placeholder="请输入手机号" :border="false" type="number" />
+      <nut-input v-model="tel" placeholder="请输入手机号" :border="false" type="number" max-length="11" />
     </view>
     </view>
     <view style="border: 1px solid #F1EBDF; width: 90%; margin: 0 auto; margin-top: 20rpx; border-radius: 50rpx;">
     <view style="border: 1px solid #F1EBDF; width: 90%; margin: 0 auto; margin-top: 20rpx; border-radius: 50rpx;">
-      <nut-input v-model="code" placeholder="请输入验证码" :border="false" type="number" >
+      <!-- <nut-input v-model="code" placeholder="请输入验证码" :border="false" type="number" >
         <template #right> <nut-button size="small" color="#6A4925">获取验证码</nut-button> </template>
         <template #right> <nut-button size="small" color="#6A4925">获取验证码</nut-button> </template>
-      </nut-input>
+      </nut-input> -->
+      <nut-row>
+        <nut-col span="14">
+          <nut-input v-model="code" placeholder="请输入验证码" :border="false" type="number" :formatter="codeFormatter" max-length="4"></nut-input>
+        </nut-col>
+        <nut-col span="10">
+          <view style="padding: 25rpx 10rpx; line-height: 40rpx; background-color: #6A4925; color: #fff; border-top-right-radius: 50rpx; border-bottom-right-radius: 50rpx; font-size: 28rpx;text-align: center;">
+            <view @tap="getCode" v-if="!time_remaining">获取验证码</view>
+            <text v-else>{{ time_remaining }}秒后重新发送</text>
+          </view>
+        </nut-col>
+      </nut-row>
     </view>
     </view>
     <view style="color: #7B7B7B; font-size: 28rpx; margin: 20rpx 50rpx;">未注册手机号验证后自动创建新账号</view>
     <view style="color: #7B7B7B; font-size: 28rpx; margin: 20rpx 50rpx;">未注册手机号验证后自动创建新账号</view>
     <view style="margin: 50rpx; margin-bottom: 10rpx;">
     <view style="margin: 50rpx; margin-bottom: 10rpx;">
@@ -31,8 +42,49 @@
 <script setup>
 <script setup>
 import Taro from '@tarojs/taro'
 import Taro from '@tarojs/taro'
 import { IconFont } from '@nutui/icons-vue-taro';
 import { IconFont } from '@nutui/icons-vue-taro';
-import { ref } from "vue";
+import { ref, nextTick } from "vue";
 
 
+let countdownIntervalId; // 用于存储倒计时的计时器 ID
+
+const startCountdown = (timeInSeconds, updateCallback, resetCallback) => {
+  if (countdownIntervalId) {
+    // 如果已经有倒计时在进行中，则先清除之前的计时器
+    clearInterval(countdownIntervalId);
+  }
+
+  let timeLeft = timeInSeconds;
+
+  // 更新倒计时显示的函数
+  const updateCountdown = () => {
+    if (timeLeft <= 0) {
+      // 倒计时结束
+      clearInterval(countdownIntervalId);
+      resetCallback(); // 调用重置函数
+    } else {
+      // 更新倒计时显示
+      updateCallback(timeLeft);
+      timeLeft--;
+    }
+  }
+
+  // 立即执行一次更新倒计时显示函数
+  updateCountdown();
+
+  // 每秒调用一次更新倒计时显示函数
+  countdownIntervalId = setInterval(updateCountdown, 1000);
+}
+
+const resetCountdown = () => {
+  if (countdownIntervalId) {
+    // 清除倒计时计时器
+    clearInterval(countdownIntervalId);
+    countdownIntervalId = undefined;
+    console.log("倒计时已重置");
+    time_remaining.value = 0;
+  }
+}
+
+const time_remaining = ref(0);
 const tel = ref('');
 const tel = ref('');
 const code = ref('');
 const code = ref('');
 
 
@@ -42,12 +94,65 @@ const tapRight = () => {
   showRight.value = true;
   showRight.value = true;
 }
 }
 
 
+const codeFormatter = (value) => {
+  return value.replace(/\D/g, '').substring(0, 4);
+}
+
+const isValidTel = (tel) => {
+  return /^1\d{10}$/.test(tel);
+}
+
 const login = () => {
 const login = () => {
-  Taro.showToast({
-    title: '登录成功',
-    icon: 'success',
-    duration: 2000
-  })
+  console.warn(tel.value);
+  console.warn(code.value);
+  if (!isValidTel(tel.value) ||!code.value) {
+    Taro.showToast({
+      title: '请检查输入项',
+      icon: 'error',
+      duration: 2000
+    });
+    return;
+  } else {
+    Taro.showToast({
+      title: '登录成功',
+      icon: 'success',
+      duration: 2000,
+      success: () => {
+        setTimeout(() => {
+          Taro.reLaunch({
+            url: '/pages/index/index'
+          })
+        }, 1000);
+      }
+    });
+  }
+}
+
+const updateDisplay = (timeLeft) => {
+  // 倒计时剩余时间
+  time_remaining.value = timeLeft;
+}
+
+const resetDisplay = () => {
+  // 在此处进行重置后的展示操作
+  resetCountdown();
+}
+
+const getCode = () => {
+  if (isValidTel(tel.value)) {
+    Taro.showToast({
+      title: '验证码已发送',
+      icon:'success',
+      duration: 2000
+    });
+    startCountdown(10, updateDisplay, resetDisplay);
+  } else {
+    Taro.showToast({
+      title: '请检查手机号',
+      icon: 'error',
+      duration: 2000
+    });
+  }
 }
 }
 </script>
 </script>