complete model
old易
parent
0c257a2a4c
commit
c4d421c410
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue