From c4d421c410a944705eb43bb1947bf2d7d11f9dac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?old=E6=98=93?= <156663459@qq.com>
Date: Tue, 8 Oct 2024 14:00:50 +0800
Subject: [PATCH] complete model

---
 src/components/Login.vue | 185 ++++++++++++++++++++++++++-------------
 1 file changed, 123 insertions(+), 62 deletions(-)

diff --git a/src/components/Login.vue b/src/components/Login.vue
index 682dade..107484e 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -8,15 +8,6 @@
         <div class="tab" :class="{ active: selectedTab === 'phone' }" @click="switchTab('phone')">验证码</div>
         <div class="tab" :class="{ active: selectedTab === 'password' }" @click="switchTab('password')">账号密码</div>
       </div>
-
-      <div v-if="selectedTab === 'password'">
-        <input type="text" placeholder="手机号" v-model="username" />
-        <div v-if="usernameError" class="error-message">{{ usernameError }}</div>
-        <input type="password" placeholder="账号密码" v-model="password" />
-        <div v-if="passwordError" class="error-message">{{ passwordError }}</div>
-        <button @click="login">登录</button>
-      </div>
-
       <div v-if="selectedTab === 'phone'">
         <input type="text" placeholder="手机号" v-model="phone" />
         <div v-if="phoneError" class="error-message">{{ phoneError }}</div>
@@ -27,7 +18,22 @@
           </button>
         </div>
         <button @click="verifyCodeAndLogin"
-          :disabled="!isPhoneValid || !isVerificationCodeValid || countdown !== null">登录</button>
+          :disabled="!isPhoneValid || !isVerificationCodeValid">登录</button>
+      </div>
+
+      <div v-if="selectedTab === 'password'">
+        <input type="text" placeholder="手机号" v-model="username" />
+        <div v-if="usernameError" class="error-message">{{ usernameError }}</div>
+        <input type="password" placeholder="密码" v-model="password" />
+        <div v-if="passwordError" class="error-message">{{ passwordError }}</div>
+        <!-- 图形验证码部分 -->
+        <div class="captcha-row">
+          <input type="text" placeholder="验证码" v-model="captchaCode" />
+             <!-- 显示一个默认的空白图像或设置 v-if 检查 -->
+         <img  alt="验证码" @click="refreshCaptcha"  :src="state.captchaImage" style="cursor: pointer" width="130px" height="38px" />
+        </div>
+        <div v-if="captchaError" class="error-message">{{ captchaError }}</div>
+        <button @click="login">登录</button>
       </div>
 
       <div v-if="selectedTab === 'wechat'">
@@ -38,7 +44,7 @@
 </template>
 
 <script>
-import { ref, onMounted, watch, nextTick, computed } from 'vue';
+import { ref, onMounted, watch, nextTick, computed,reactive } from 'vue';
 import axios from 'axios';
 export default {
   setup() {
@@ -53,7 +59,12 @@ export default {
     const verificationCodeError = ref(''); // 用于存储验证码验证错误信息
     const usernameError = ref(''); // 用于存储用户名验证错误信息
     const passwordError = ref(''); // 用于存储密码验证错误信息
-
+    const captchaCode = ref(''); // 验证码输入
+    const captchaError = ref(''); // 验证码错误信息
+    const state = reactive({
+      captchaImage: '',
+      codeId:""
+});
     // 切换标签页
     const switchTab = (tab) => {
       selectedTab.value = tab;
@@ -63,6 +74,24 @@ export default {
       passwordError.value = ''; // Reset error message on tab switch
     };
 
+    // 刷新验证码
+    const refreshCaptcha = () => {
+      axios.get('https://api.sso.ycymedu.com/api/sysauth/captcha?timestamp=' + new Date().getTime())
+    .then(response => {
+      if (response.data.code === 200 && response.data.result?.img) {
+        state.captchaImage = 'data:image/png;base64,' + response.data.result.img;
+        state.codeId = response.data.result.id; 
+        console.log('Response data:', response.data);
+        console.log(state.captchaImage);
+      } else {
+        console.error('Invalid response data:', response.data);
+      }
+    })
+    .catch(error => {
+      console.error('登录失败:', error);
+    });
+};
+
     // 开始倒计时
     const startCountdown = () => {
       const duration = 60;
@@ -97,8 +126,6 @@ export default {
           const url = new URL(ref);
           console.log('url:', url);
           referer.value = url.origin; // 存储来源网址的域名部分
-
-
         } catch (error) {
           console.error('解析来源网址时出错:', error);
         }
@@ -113,7 +140,6 @@ export default {
         const appid = 'wxf8db44d5ec082dfc';
         const redirectUri = encodeURIComponent('https://api.sso.ycymedu.com/api/syswechat/snlogin?redirect_uri=' + referer.value);
         const state = Math.random().toString(36).substr(2);
-
         new WxLogin({
           self_redirect: false,
           id: "login_container",
@@ -150,7 +176,7 @@ export default {
           phoneNumber: phone.value
         })
           .then(response => {
-            if (response.data.code === '200') {
+            if (response.data.code === 200) {
               console.log('验证码发送成功:', response.data);
               startCountdown(); // 开始倒计时
             } else {
@@ -190,17 +216,18 @@ export default {
 
     // 校验密码
     const isPasswordValid = computed(() => {
-      const passwordRegex = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).*$/; // 包含字母、数字和特殊字符
+      //const passwordRegex = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).*$/; // 包含字母、数字和特殊字符
       if (!password.value) {
         passwordError.value = '请输入密码';
         return false;
       } else if (password.value.includes(' ')) {
         passwordError.value = '密码不能包含空格';
         return false;
-      } else if (!passwordRegex.test(password.value)) {
-        passwordError.value = '密码必须包含字母、数字和特殊字符';
-        return false;
-      }
+      } 
+      // else if (!passwordRegex.test(password.value)) {
+      //   passwordError.value = '密码必须包含字母、数字和特殊字符';
+      //   return false;
+      // }
       passwordError.value = ''; // 清除错误信息
       return true;
     });
@@ -209,13 +236,18 @@ export default {
     onMounted(() => {
       getReferer(); // 获取来源网址
       initWeChatLogin();
+      refreshCaptcha();
     });
 
     // 监听选项卡变化，切换到微信扫码时重新初始化
     watch(selectedTab, (newTab) => {
-      if (newTab === 'wechat') {
+      if (newTab === 'wechat') 
+      {
         initWeChatLogin();
       }
+      if(newTab === 'password'){
+       refreshCaptcha();
+      }
     });
 
     // 验证码登录
@@ -228,50 +260,59 @@ export default {
         alert('请检查验证码');
         return;
       }
-      alert('验证码登录功能尚未实现');
+      axios.post('https://api.sso.ycymedu.com/api/syswechat/smslogin', {
+        phoneNumber: phone.value,
+        code: verificationCode.value,
+        redirect_uri: referer.value
+      })
+        .then(response => {
+          if (response.data.code === 200) {
+            console.log('登录失败成功:', response.data);
+            window.location.href=response.data.result;
+           // startCountdown(); // 开始倒计时
+          } else {
+            console.log('登录失败:', response.data);
+            phoneError.value = response.data.message;
+          }
+        })
+        .catch(error => {
+          console.error('登录失败:', error);
+          phoneError.value = '登录失败，请稍后再试';
+        });
+
     };
 
     // 登录函数
     const login = () => {
-
-      switch (selectedTab.value) {
-        case 'wechat':
-          // 微信扫码登录
-          break;
-        case 'password':
-          if (!isUsernameValid.value) {
-            alert('请检查手机号');
-            return;
-          }
-          if (!isPasswordValid.value) {
-            alert('请检查密码');
-            return;
-          }
-          alert('账号密码登录功能尚未实现');
-          // 账号密码登录
-          break;
-        case 'phone':
-          axios.post('https://api.sso.ycymedu.com/api/syswechat/smslogin', {
-            phoneNumber: phone.value,
-            code: verificationCode.value,
-            redirect_uri: referer.value
-          })
-            .then(response => {
-              if (response.data.code === '200') {
-                console.log('验证码发送成功:', response.data);
-                startCountdown(); // 开始倒计时
-              } else {
-                console.log('验证码发送失败:', response.data);
-                phoneError.value = response.data.message;
-              }
-            })
-            .catch(error => {
-              console.error('发送验证码失败:', error);
-              phoneError.value = '发送验证码失败，请稍后再试';
-            });
-          break;
+      if (!isUsernameValid.value) {
+        alert('请检查手机号');
+        return;
       }
-
+      if (!isPasswordValid.value) {
+        alert('请检查密码');
+        return;
+      }
+      axios.post('https://api.sso.ycymedu.com/api/syswechat/pwdlogin', {
+        phoneNumber: phone.value,
+        password: password.value,
+        redirect_uri: referer.value,
+        code: captchaCode.value,
+        codeId: state.codeId,
+      })
+        .then(response => {
+          if (response.data.code === 200) {
+            console.log('登录失败成功:', response.data);
+            window.location.href=response.data.result;
+           // startCountdown(); // 开始倒计时
+          } else {
+            console.log('登录失败:', response.data);
+            captchaError.value = response.data.message;
+          }
+        })
+        .catch(error => {
+          console.error('登录失败:', error);
+          captchaError.value = '登录失败，请稍后再试';
+        });
 
 
     };
@@ -294,7 +335,9 @@ export default {
       passwordError,
       isUsernameValid,
       isPasswordValid,
-      login
+      login,
+      refreshCaptcha,
+      state
     };
   },
 };
@@ -431,4 +474,22 @@ button:disabled {
     margin-bottom: 10px;
   }
 }
+.captcha-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.captcha-row input {
+  width: calc(100% - 120px);
+  margin-right: 10px;
+}
+
+.captcha-row img {
+  cursor: pointer;
+  height: 40px;
+  width: 100px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
 </style>