env

.env.development

@@ -0,0 +1 @@
+VUE_APP_WECHAT_APPID=wxf8db44d5ec082dfc

.env.production

@@ -0,0 +1 @@
+VUE_APP_WECHAT_APPID=wxf8db44d5ec082dfc

src/components/Login.vue

@@ -17,13 +17,14 @@
 
       <div v-if="selectedTab === 'phone'">
         <input type="text" placeholder="手机号" v-model="phone" />
+        <div v-if="phoneError" class="error-message">{{ phoneError }}</div> <!-- Display error message -->
         <div class="verification-row">
           <input type="text" placeholder="验证码" v-model="verificationCode" />
-          <button @click="startCountdown" :disabled="countdown !== null">
+          <button @click="startCountdown" :disabled="countdown !== null || !isPhoneValid">
             {{ countdown !== null ? `${countdown} 秒后重新发送` : '获取验证码' }}
           </button>
         </div>
-        <button @click="login">登录</button>
+        <button @click="login" :disabled="countdown !== null || !isPhoneValid">登录</button> <!-- Disable login if countdown is active or phone is invalid -->
       </div>
 
       <div v-if="selectedTab === 'wechat'">
@@ -34,7 +35,7 @@
 </template>
 
 <script>
-import { ref, onMounted, watch, nextTick } from 'vue';
+import { ref, onMounted, watch, nextTick, computed } from 'vue';
 
 export default {
   setup() {
@@ -45,10 +46,12 @@ export default {
     const phone = ref('');
     const verificationCode = ref('');
     const referer = ref(''); // 新增响应式变量来存储来源网址
+    const phoneError = ref(''); // 用于存储手机号验证错误信息
 
     // 切换标签页
     const switchTab = (tab) => {
       selectedTab.value = tab; 
+      phoneError.value = ''; // Reset error message on tab switch
     };
 
     // 开始倒计时
@@ -91,7 +94,7 @@ export default {
     // 微信扫码登录初始化
     const initWeChatLogin = () => {
       nextTick(() => {
-
+        console.log(import.meta.env.VUE_APP_WECHAT_APPID);
         const appid = 'wxf8db44d5ec082dfc';
         const redirectUri = encodeURIComponent('https://api.sso.ycymedu.com/api/syswechat/snlogin?redirect_uri=' + referer);
         const state = Math.random().toString(36).substr(2);
@@ -109,6 +112,22 @@ export default {
       });
     };
 
+
+    // 校验手机号
+    const isPhoneValid = computed(() => {
+      const phoneRegex = /^1[3-9]\d{9}$/; // 正确的手机号正则表达式
+      if (!phone.value) {
+        phoneError.value = '请输入手机号';
+        return false;
+      } else if (!phoneRegex.test(phone.value)) {
+        phoneError.value = '请输入有效的手机号';
+        return false;
+      }
+      phoneError.value = ''; // 清除错误信息
+      return true;
+    });
+
+
     // 在组件加载时初始化微信扫码登录
     onMounted(() => {
       getReferer(); // 获取来源网址
@@ -124,6 +143,10 @@ export default {
 
     // 登录函数
     const login = () => {
+      if (selectedTab.value === 'phone' && !isPhoneValid.value) {
+        alert('请检查手机号'); // 如果手机号无效，提示用户
+        return;
+      }
       alert('登录功能尚未实现');
     };
 
@@ -137,6 +160,8 @@ export default {
       switchTab,
       startCountdown,
       login,
+      phoneError,
+      isPhoneValid
     };
   },
 };
@@ -265,5 +290,12 @@ button:disabled {
     margin: 0 auto;
     /* 水平居中 */
   }
+
+.error-message {
+  color: red;
+  font-size: 12px;
+  margin-top: -10px;
+  margin-bottom: 10px;
+}
 }
 </style>

vite.config.js

@@ -4,4 +4,7 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  build: {
+    target: 'esnext',
+  },
 })