From 6cfd82bab741472214e6a3de0186b22f92d1e2ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?old=E6=98=93?= <156663459@qq.com>
Date: Wed, 9 Oct 2024 13:29:52 +0800
Subject: [PATCH] aaa

---
 src/App.vue                    |   4 +-
 src/components/Login.vue       |   3 +-
 src/components/MinProLogin.vue | 514 +++++++++++++++++++++++++++++++++
 3 files changed, 518 insertions(+), 3 deletions(-)
 create mode 100644 src/components/MinProLogin.vue

diff --git a/src/App.vue b/src/App.vue
index 309aa2a..82e8198 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,10 @@
 <script setup>
-import LoginComponent from './components/Login.vue';
+import MinProLoginComponent from './components/MinProLogin.vue';
 </script>
 
 <template>
   <div>
-    <LoginComponent />
+    <MinProLoginComponent />
   </div>
 </template>
 
diff --git a/src/components/Login.vue b/src/components/Login.vue
index b38fa31..e283a61 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -37,7 +37,8 @@
       </div>
 
       <div v-if="selectedTab === 'wechat'">
-        <div class="qr-code" id="login_container"></div>
+        <div class="qr-code" id="login_container">
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/MinProLogin.vue b/src/components/MinProLogin.vue
new file mode 100644
index 0000000..e76d356
--- /dev/null
+++ b/src/components/MinProLogin.vue
@@ -0,0 +1,514 @@
+<template>
+  <div class="login-container">
+    <div class="login-box">
+      <img class="logo" src="https://static-data-ycymedu.oss-cn-shanghai.aliyuncs.com/logo.png" alt="logo" />
+
+      <div class="tabs">
+        <div class="tab" :class="{ active: selectedTab === 'wechat' }" @click="switchTab('wechat')">微信扫码</div>
+        <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 === 'phone'">
+        <input type="text" placeholder="手机号" v-model="phone" />
+        <div v-if="phoneError" class="error-message">{{ phoneError }}</div>
+        <div class="verification-row">
+          <input type="text" placeholder="验证码" v-model="verificationCode" />
+          <button @click="sendVerificationCode" :disabled="countdown !== null || !isPhoneValid">
+            {{ countdown !== null ? `${countdown} 秒后重新发送` : '获取验证码' }}
+          </button>
+        </div>
+        <button @click="verifyCodeAndLogin"
+          :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'">
+        <div class="qr-code" id="login_container">
+          <img  style="cursor: pointer;width:310px"  :src="state.loginimg" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, watch, nextTick, computed,reactive } from 'vue';
+import axios from 'axios';
+export default {
+  setup() {
+    const selectedTab = ref('wechat'); // 默认选择微信扫码登录
+    const countdown = ref(null);
+    const username = ref('');
+    const password = ref('');
+    const phone = ref('');
+    const verificationCode = ref('');
+    const referer = ref(''); // 新增响应式变量来存储来源网址
+    const phoneError = ref(''); // 用于存储手机号验证错误信息
+    const verificationCodeError = ref(''); // 用于存储验证码验证错误信息
+    const usernameError = ref(''); // 用于存储用户名验证错误信息
+    const passwordError = ref(''); // 用于存储密码验证错误信息
+    const captchaCode = ref(''); // 验证码输入
+    const captchaError = ref(''); // 验证码错误信息
+    const state = reactive({
+      captchaImage: '',
+      codeId:"",
+      loginimg:""
+});
+    // 切换标签页
+    const switchTab = (tab) => {
+      selectedTab.value = tab;
+      phoneError.value = '';
+      verificationCodeError.value = '';
+      usernameError.value = '';
+      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;
+      let remainingTime = duration;
+      countdown.value = remainingTime;
+
+      const intervalId = setInterval(() => {
+        if (remainingTime > 0) {
+          remainingTime--;
+          countdown.value = remainingTime;
+        } else {
+          clearInterval(intervalId);
+          countdown.value = null;
+        }
+      }, 1000);
+    };
+
+    // 获取来源页面的域名
+    const getReferer = () => {
+      let ref = document.referrer;
+      console.log('refref:', ref);
+      // 处理开发和生产环境
+      if (!ref) {
+        if (process.env.NODE_ENV === 'development') {
+          ref = 'https://www.ycymedu.com'; // 开发环境默认值
+        } else {
+          console.log('当前是生产环境');
+          window.location.href = "https://www.ycymedu.com"; // 生产环境重定向
+        }
+      } else {
+        try {
+          const url = new URL(ref);
+          console.log('url:', url);
+          referer.value = url.origin; // 存储来源网址的域名部分
+        } catch (error) {
+          console.error('解析来源网址时出错:', error);
+        }
+      }
+    };
+
+
+    // 微信扫码登录初始化
+    const initWeChatLogin = () => {
+      nextTick(() => {
+        axios.post('https://api.sso.ycymedu.com/api/syswxopen/minprologin')
+          .then(response => {
+            if (response.data.code === 200) {           
+              state.loginimg = response.data.result;
+            } 
+          })
+          .catch(error => {
+            console.error('发送验证码失败:', error);
+          //  phoneError.value = '发送验证码失败，请稍后再试';
+          });
+      });
+    };
+    // 校验手机号
+    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;
+    });
+
+    // 模拟发送验证码
+
+    const sendVerificationCode = () => {
+      if (isPhoneValid.value) {
+        // 发送验证码请求
+        axios.post('https://api.sso.ycymedu.com/api/syssms/sendsms', {
+          phoneNumber: phone.value
+        })
+          .then(response => {
+            if (response.data.code === 200) {
+              console.log('验证码发送成功:', response.data);
+              startCountdown(); // 开始倒计时
+            } else {
+              console.log('验证码发送失败:', response.data);
+              phoneError.value = response.data.message.replace(/^\[\w+\]\s*/, '');
+            }
+          })
+          .catch(error => {
+            console.error('发送验证码失败:', error);
+            phoneError.value = '发送验证码失败，请稍后再试';
+          });
+      }
+    };
+    // 校验验证码
+    const isVerificationCodeValid = computed(() => {
+      if (!verificationCode.value) {
+        verificationCodeError.value = '请输入验证码';
+        return false;
+      }
+      verificationCodeError.value = ''; // 清除错误信息
+      return true;
+    });
+
+    // 校验手机号（账号）
+    const isUsernameValid = computed(() => {
+      const phoneRegex = /^1[3-9]\d{9}$/; // 正确的手机号正则表达式
+      if (!username.value) {
+        usernameError.value = '请输入手机号';
+        return false;
+      } else if (!phoneRegex.test(username.value)) {
+        usernameError.value = '请输入有效的手机号';
+        return false;
+      }
+      usernameError.value = ''; // 清除错误信息
+      return true;
+    });
+
+    // 校验密码
+    const isPasswordValid = computed(() => {
+      //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;
+      // }
+      passwordError.value = ''; // 清除错误信息
+      return true;
+    });
+
+    const isPwdCode=computed(()=>{
+      if (!captchaCode.value) {
+        captchaError.value = '请输入验证码';
+        return false;
+      } else if (captchaCode.value.includes(' ')) {
+        captchaError.value = '验证码不能包含空格';
+        return false;
+      } 
+      captchaError.value = ''; // 清除错误信息
+      return true;
+    });
+
+    // 在组件加载时初始化微信扫码登录
+    onMounted(() => {
+      getReferer(); // 获取来源网址
+      initWeChatLogin();
+      refreshCaptcha();
+    });
+
+    // 监听选项卡变化，切换到微信扫码时重新初始化
+    watch(selectedTab, (newTab) => {
+      if (newTab === 'wechat') 
+      {
+        initWeChatLogin();
+      }
+      if(newTab === 'password'){
+       refreshCaptcha();
+      }
+    });
+
+    // 验证码登录
+    const verifyCodeAndLogin = () => {
+      if (!isPhoneValid.value) {
+        alert('请检查手机号');
+        return;
+      }
+      if (!isVerificationCodeValid.value) {
+        alert('请检查验证码');
+        return;
+      }
+      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.replace(/^\[\w+\]\s*/, '');
+          }
+        })
+        .catch(error => {
+          console.error('登录失败:', error);
+          phoneError.value = '登录失败，请稍后再试';
+        });
+
+    };
+
+    // 登录函数
+    const login = () => {
+      console.log(captchaCode);
+      if (!isUsernameValid.value) {
+        alert('请检查手机号');
+        return;
+      }
+      if (!isPasswordValid.value) {
+        alert('请检查密码');
+        return;
+      }
+      if(!isPwdCode.value){
+      alert('请检查验证码');
+      return;
+    }
+      axios.post('https://api.sso.ycymedu.com/api/syswechat/pwdlogin', {
+        phoneNumber: username.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.replace(/^\[\w+\]\s*/, '');
+          }
+        })
+        .catch(error => {
+          console.error('登录失败:', error);
+          captchaError.value = '登录失败，请稍后再试';
+        });
+
+
+    };
+
+    return {
+      selectedTab,
+      countdown,
+      username,
+      password,
+      phone,
+      verificationCode,
+      switchTab,
+      sendVerificationCode,
+      verifyCodeAndLogin,
+      phoneError,
+      verificationCodeError,
+      isPhoneValid,
+      isVerificationCodeValid,
+      usernameError,
+      passwordError,
+      isUsernameValid,
+      isPasswordValid,
+      login,
+      refreshCaptcha,
+      captchaCode,
+      captchaError,
+      state
+    };
+  },
+};
+</script>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  /* 隐藏滚动条 */
+  background-image: url('https://static-data-ycymedu.oss-cn-shanghai.aliyuncs.com/backgroundImage.png');
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  /* 设置为相对定位，以支持绝对定位的子元素 */
+  padding-bottom: 60px;
+  /* 为底部版权信息预留空间 */
+}
+
+.login-box {
+  background-color: white;
+  padding: 50px 30px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  width: 90%;
+  max-width: 400px;
+  text-align: center;
+  box-sizing: border-box;
+  margin-bottom: 30px;
+  /* 增加底部边距 */
+  margin: 0 auto;
+  /* 居中 */
+}
+
+.logo {
+  max-width: 80%;
+  height: auto;
+  margin-bottom: 20px;
+}
+
+.tabs {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 20px;
+}
+
+.tab {
+  cursor: pointer;
+  padding: 10px 20px;
+  border-bottom: 2px solid transparent;
+}
+
+.tab.active {
+  border-bottom: 2px solid #1e88e5;
+  color: #1e88e5;
+}
+
+input {
+  width: 100%;
+  padding: 10px 15px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+input:focus {
+  border-color: #1e88e5;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(30, 136, 229, 0.5);
+}
+
+button {
+  width: 100%;
+  padding: 10px 15px;
+  background-color: #1e88e5;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  box-sizing: border-box;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+button:hover {
+  background-color: #177ddc;
+}
+
+button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.verification-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.verification-row input {
+  width: calc(100% - 120px);
+  /* 确保输入框宽度 */
+  margin-right: 10px;
+}
+
+.qr-code {
+  margin-top: 20px;
+}
+
+/* 响应式布局 */
+@media screen and (min-width: 768px) {
+
+  /* 平板及更大屏幕 */
+  .login-container {
+    padding-bottom: 0;
+    /* 移除底部padding */
+  }
+
+  .login-box {
+    width: 400px;
+    /* 固定宽度 */
+    margin: 0 auto;
+    /* 水平居中 */
+  }
+
+  .error-message {
+    color: red;
+    font-size: 12px;
+    margin-top: -10px;
+    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>