chenkainan
2 months ago
3 changed files with 725 additions and 18 deletions
@ -0,0 +1,351 @@ |
|||
<template> |
|||
<div class="login-page"> |
|||
<!-- 背景图容器 --> |
|||
<div class="bg-container"> |
|||
<img src="@/assets/logo.png" alt="login background" class="bg-img" /> |
|||
</div> |
|||
|
|||
<!-- 登录表单卡片 --> |
|||
<div class="form-card"> |
|||
<!-- 切换登录方式 --> |
|||
<div class="tab-bar"> |
|||
<div |
|||
class="tab-item" |
|||
:class="{ active: loginType === 'sms' }" |
|||
@click="loginType = 'sms'" |
|||
> |
|||
短信登录 |
|||
</div> |
|||
<div |
|||
class="tab-item" |
|||
:class="{ active: loginType === 'password' }" |
|||
@click="loginType = 'password'" |
|||
> |
|||
密码登录 |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 表单内容 --> |
|||
<el-form |
|||
ref="loginForm" |
|||
:model="form" |
|||
:rules="rules" |
|||
label-width="0" |
|||
class="login-form" |
|||
> |
|||
<!-- 手机号输入（通用） --> |
|||
<el-form-item prop="phone"> |
|||
<el-input |
|||
v-model="form.phone" |
|||
placeholder="请输入手机号码" |
|||
clearable |
|||
prefix-icon="el-icon-phone" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<!-- 短信验证码（短信登录时显示） --> |
|||
<el-form-item prop="code" v-if="loginType === 'sms'"> |
|||
<el-input |
|||
v-model="form.code" |
|||
placeholder="请输入验证码" |
|||
clearable |
|||
style="width: 65%" |
|||
prefix-icon="el-icon-message" |
|||
/> |
|||
<el-button |
|||
type="primary" |
|||
class="code-btn" |
|||
@click="handleGetCode" |
|||
:disabled="codeDisabled" |
|||
> |
|||
{{ codeText }} |
|||
</el-button> |
|||
</el-form-item> |
|||
|
|||
<!-- 密码输入（密码登录时显示） --> |
|||
<el-form-item prop="password" v-if="loginType === 'password'"> |
|||
<el-input |
|||
v-model="form.password" |
|||
type="password" |
|||
placeholder="请输入密码" |
|||
clearable |
|||
prefix-icon="el-icon-lock" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<!-- 记住账号 --> |
|||
<el-form-item class="remember-item"> |
|||
<el-checkbox v-model="rememberPhone" size="mini"> |
|||
记住用户名/手机号码 |
|||
</el-checkbox> |
|||
</el-form-item> |
|||
|
|||
<!-- 登录按钮 --> |
|||
<el-form-item> |
|||
<el-button |
|||
type="primary" |
|||
class="login-btn" |
|||
@click="handleLogin" |
|||
:loading="submitting" |
|||
> |
|||
立即登录 |
|||
</el-button> |
|||
</el-form-item> |
|||
|
|||
<!-- 注册引导 --> |
|||
<div class="register-guide"> |
|||
首次使用？ |
|||
<router-link |
|||
to="/Register" |
|||
class="register-link" |
|||
@click="goToRegister" |
|||
> |
|||
点击注册 |
|||
</router-link> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Login", |
|||
data() { |
|||
return { |
|||
// 登录方式：sms-短信 / password-密码 |
|||
loginType: "sms", |
|||
form: { |
|||
phone: "", |
|||
code: "", |
|||
password: "", |
|||
}, |
|||
rules: { |
|||
phone: [ |
|||
{ required: true, message: "请输入手机号码", trigger: "blur" }, |
|||
{ |
|||
pattern: /^1\d{10}$/, |
|||
message: "手机号码格式错误", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
code: [ |
|||
{ required: true, message: "请输入验证码", trigger: "blur" }, |
|||
{ pattern: /^\d{6}$/, message: "验证码为6位数字", trigger: "blur" }, |
|||
], |
|||
password: [ |
|||
{ required: true, message: "请输入密码", trigger: "blur" }, |
|||
{ min: 6, message: "密码至少6位", trigger: "blur" }, |
|||
], |
|||
}, |
|||
// 验证码逻辑 |
|||
codeText: "获取验证码", |
|||
codeDisabled: false, |
|||
countdown: 60, |
|||
|
|||
// 记住账号 |
|||
rememberPhone: false, |
|||
|
|||
// 加载状态 |
|||
submitting: false, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// 读取记住的手机号（示例：从localStorage读取） |
|||
const rememberedPhone = localStorage.getItem("rememberedPhone"); |
|||
if (rememberedPhone) { |
|||
this.form.phone = rememberedPhone; |
|||
this.rememberPhone = true; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 切换登录方式（演示用，实际可通过路由或状态管理实现） |
|||
switchLoginType(type) { |
|||
this.loginType = type; |
|||
this.resetForm(); |
|||
}, |
|||
|
|||
// 重置表单 |
|||
resetForm() { |
|||
this.form.code = ""; |
|||
this.form.password = ""; |
|||
this.$refs.loginForm.resetValidation(); |
|||
}, |
|||
|
|||
// 获取短信验证码 |
|||
handleGetCode() { |
|||
if (!this.form.phone) { |
|||
this.$message.warning("请先输入手机号码"); |
|||
return; |
|||
} |
|||
// 模拟接口请求 |
|||
this.codeDisabled = true; |
|||
this.codeText = `重新发送(${this.countdown}s)`; |
|||
const timer = setInterval(() => { |
|||
this.countdown--; |
|||
this.codeText = `重新发送(${this.countdown}s)`; |
|||
if (this.countdown <= 0) { |
|||
clearInterval(timer); |
|||
this.codeText = "获取验证码"; |
|||
this.codeDisabled = false; |
|||
this.countdown = 60; |
|||
} |
|||
}, 1000); |
|||
// 实际项目替换为： |
|||
// axios.post('/api/sendSms', { phone: this.form.phone }).then(res => {}) |
|||
}, |
|||
|
|||
// 登录提交 |
|||
handleLogin() { |
|||
this.$refs.loginForm.validate((valid) => { |
|||
if (valid) { |
|||
this.submitting = true; |
|||
// 模拟登录请求 |
|||
setTimeout(() => { |
|||
this.$message.success("登录成功！"); |
|||
this.submitting = false; |
|||
// 记住账号 |
|||
if (this.rememberPhone) { |
|||
localStorage.setItem("rememberedPhone", this.form.phone); |
|||
} else { |
|||
localStorage.removeItem("rememberedPhone"); |
|||
} |
|||
// 实际项目替换为： |
|||
// axios.post('/api/login', this.form).then(res => { |
|||
// this.$router.push('/home') |
|||
// }) |
|||
}, 1500); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 前往注册页 |
|||
goToRegister() { |
|||
this.$router.push("/register"); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.login-page { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100vh; |
|||
overflow: hidden; |
|||
|
|||
// 背景图容器 |
|||
.bg-container { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
z-index: 1; |
|||
|
|||
.bg-img { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
|
|||
// 登录表单卡片 |
|||
.form-card { |
|||
position: absolute; |
|||
right: 8%; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
width: 360px; |
|||
background: #fff; |
|||
border-radius: 8px; |
|||
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1); |
|||
z-index: 2; |
|||
padding: 30px 25px; |
|||
|
|||
// 标签切换栏 |
|||
.tab-bar { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-bottom: 25px; |
|||
|
|||
.tab-item { |
|||
width: 50%; |
|||
text-align: center; |
|||
padding: 10px 0; |
|||
color: #666; |
|||
cursor: pointer; |
|||
border-bottom: 2px solid transparent; |
|||
|
|||
&.active { |
|||
color: #1890ff; |
|||
border-bottom-color: #1890ff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 表单样式 |
|||
.login-form { |
|||
.el-form-item { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.el-input { |
|||
height: 40px; |
|||
line-height: 40px; |
|||
} |
|||
|
|||
// 验证码按钮 |
|||
.code-btn { |
|||
padding: 0 15px; |
|||
height: 40px; |
|||
} |
|||
|
|||
// 记住账号 |
|||
.remember-item { |
|||
padding-left: 0; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
// 登录按钮 |
|||
.login-btn { |
|||
width: 100%; |
|||
background: #ff4d4f; |
|||
border: none; |
|||
&:hover { |
|||
background: #e03e40; |
|||
} |
|||
} |
|||
|
|||
// 注册引导 |
|||
.register-guide { |
|||
text-align: center; |
|||
margin-top: 15px; |
|||
color: #999; |
|||
|
|||
.register-link { |
|||
color: #ff4d4f; |
|||
text-decoration: underline; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 响应式适配 |
|||
@media (max-width: 992px) { |
|||
.form-card { |
|||
right: 5%; |
|||
width: 320px; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 576px) { |
|||
.form-card { |
|||
right: 50%; |
|||
transform: translate(50%, -50%); |
|||
width: 90%; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,356 @@ |
|||
<template> |
|||
<div class="register-page"> |
|||
<!-- 顶部Logo与电话 --> |
|||
<div class="header"> |
|||
<div class="logo-area"> |
|||
<img src="@/assets/logo.png" alt="logo" class="logo-img" /> |
|||
<span class="domain">yunming.com</span> |
|||
</div> |
|||
<div class="hotline">400-123-4xxx</div> |
|||
</div> |
|||
|
|||
<!-- 注册表单主体 --> |
|||
<div class="form-container"> |
|||
<h2 class="form-title">注册页</h2> |
|||
<el-form |
|||
ref="registerForm" |
|||
:model="form" |
|||
:rules="rules" |
|||
label-width="80px" |
|||
class="register-form" |
|||
> |
|||
<!-- 手机号 --> |
|||
<el-form-item label="手机号码" prop="phone"> |
|||
<el-input |
|||
v-model="form.phone" |
|||
placeholder="请输入手机号码" |
|||
clearable |
|||
prefix-icon="el-icon-phone" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<!-- 手机验证码 --> |
|||
<el-form-item label="手机验证码" prop="code"> |
|||
<el-input |
|||
v-model="form.code" |
|||
placeholder="请输入验证码" |
|||
clearable |
|||
style="width: 60%" |
|||
prefix-icon="el-icon-message" |
|||
/> |
|||
<el-button |
|||
type="success" |
|||
class="code-btn" |
|||
@click="handleGetCode" |
|||
:disabled="codeBtnDisabled" |
|||
> |
|||
{{ codeBtnText }} |
|||
</el-button> |
|||
</el-form-item> |
|||
|
|||
<!-- 用户名 --> |
|||
<el-form-item label="用户名" prop="username"> |
|||
<el-input |
|||
v-model="form.username" |
|||
placeholder="账户唯一识别，可用来登录" |
|||
clearable |
|||
prefix-icon="el-icon-user" |
|||
/> |
|||
<div class="form-tip"> |
|||
请输入4-32位字符，只能包含英文字母、数字和下划线，不能为纯数字/不能为纯下划线 |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
<!-- 设重密码 --> |
|||
<el-form-item label="设重密码" prop="password"> |
|||
<el-input |
|||
v-model="form.password" |
|||
type="password" |
|||
placeholder="请设置登录密码" |
|||
clearable |
|||
prefix-icon="el-icon-lock" |
|||
@input="handlePasswordInput" |
|||
/> |
|||
<div class="form-tip"> |
|||
请输入8-30位密码，密码必须同时包含字母和数字 |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
<!-- 确认密码 --> |
|||
<el-form-item label="确认密码" prop="confirmPassword"> |
|||
<el-input |
|||
v-model="form.confirmPassword" |
|||
type="password" |
|||
placeholder="请再次输入登录密码" |
|||
clearable |
|||
prefix-icon="el-icon-lock" |
|||
/> |
|||
<div class="form-tip">请与上方填写的密码保持一致</div> |
|||
</el-form-item> |
|||
|
|||
<!-- 协议勾选 --> |
|||
<el-form-item> |
|||
<el-checkbox v-model="agreement" class="agreement-checkbox"> |
|||
我已阅读并同意 |
|||
<a href="javascript:;" class="protocol-link">《用户注册协议》</a> |
|||
《<a href="javascript:;" class="protocol-link">隐私协议</a>》 |
|||
</el-checkbox> |
|||
</el-form-item> |
|||
|
|||
<!-- 注册按钮 --> |
|||
<el-form-item> |
|||
<el-button |
|||
type="primary" |
|||
class="register-btn" |
|||
@click="handleRegister" |
|||
:disabled="!agreement || submitting" |
|||
> |
|||
{{ submitting ? "注册中..." : "立即注册" }} |
|||
</el-button> |
|||
</el-form-item> |
|||
|
|||
<!-- 兜底提示 --> |
|||
<div class="bottom-tip" v-if="false"> |
|||
如需注册供应商请点击 |
|||
<a href="javascript:;" class="supplier-link">这里</a> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "RegisterPage", |
|||
data() { |
|||
// 密码强度校验函数 |
|||
const validatePassword = (rule, value, callback) => { |
|||
if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,30}$/.test(value)) { |
|||
callback(new Error("请输入8-30位密码，必须同时包含字母和数字")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
|
|||
// 用户名校验函数 |
|||
const validateUsername = (rule, value, callback) => { |
|||
if (!/^(?!_+$)(?!\d+$)[a-zA-Z0-9_]{4,32}$/.test(value)) { |
|||
callback( |
|||
new Error( |
|||
"请输入4-32位字符，只能包含字母、数字和下划线，不能为纯数字/纯下划线" |
|||
) |
|||
); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
|
|||
return { |
|||
form: { |
|||
phone: "", |
|||
code: "", |
|||
username: "", |
|||
password: "", |
|||
confirmPassword: "", |
|||
}, |
|||
rules: { |
|||
phone: [ |
|||
{ required: true, message: "请输入手机号码", trigger: "blur" }, |
|||
{ |
|||
pattern: /^1\d{10}$/, |
|||
message: "请输入正确的手机号码格式", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
code: [ |
|||
{ required: true, message: "请输入验证码", trigger: "blur" }, |
|||
{ |
|||
pattern: /^\d{6}$/, |
|||
message: "请输入6位数字验证码", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
username: [ |
|||
{ required: true, message: "请输入用户名", trigger: "blur" }, |
|||
{ validator: validateUsername, trigger: "blur" }, |
|||
], |
|||
password: [ |
|||
{ required: true, message: "请输入密码", trigger: "blur" }, |
|||
{ validator: validatePassword, trigger: "blur" }, |
|||
], |
|||
confirmPassword: [ |
|||
{ required: true, message: "请确认密码", trigger: "blur" }, |
|||
{ |
|||
validator: (rule, value, callback) => { |
|||
if (value !== this.form.password) { |
|||
callback(new Error("两次输入密码不一致")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}, |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
agreement: false, // 协议勾选状态 |
|||
codeBtnText: "获取验证码", |
|||
codeBtnDisabled: false, |
|||
submitting: false, // 注册按钮加载状态 |
|||
countdown: 60, // 验证码倒计时 |
|||
}; |
|||
}, |
|||
methods: { |
|||
// 获取验证码 |
|||
handleGetCode() { |
|||
if (!this.form.phone) { |
|||
this.$message.warning("请先输入手机号码"); |
|||
return; |
|||
} |
|||
// 模拟接口请求 |
|||
this.codeBtnDisabled = true; |
|||
this.codeBtnText = `重新发送(${this.countdown}s)`; |
|||
const timer = setInterval(() => { |
|||
this.countdown--; |
|||
this.codeBtnText = `重新发送(${this.countdown}s)`; |
|||
if (this.countdown <= 0) { |
|||
clearInterval(timer); |
|||
this.codeBtnText = "获取验证码"; |
|||
this.codeBtnDisabled = false; |
|||
this.countdown = 60; |
|||
} |
|||
}, 1000); |
|||
// 实际项目中可替换为： |
|||
// axios.post('/api/sendCode', { phone: this.form.phone }).then(res => {}) |
|||
}, |
|||
|
|||
// 密码输入实时校验（可选） |
|||
handlePasswordInput() { |
|||
// 可在此实现密码强度实时反馈 |
|||
}, |
|||
|
|||
// 注册提交 |
|||
handleRegister() { |
|||
this.$refs.registerForm.validate((valid) => { |
|||
if (valid && this.agreement) { |
|||
this.submitting = true; |
|||
// 模拟注册请求 |
|||
setTimeout(() => { |
|||
this.$message.success("注册成功！"); |
|||
this.submitting = false; |
|||
// 实际项目中可替换为： |
|||
// axios.post('/api/register', this.form).then(res => { |
|||
// this.$router.push('/login') |
|||
// }) |
|||
}, 1500); |
|||
} else if (!this.agreement) { |
|||
this.$message.warning("请勾选用户协议"); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.register-page { |
|||
min-height: 100vh; |
|||
background-color: #fff; |
|||
padding: 40px 20px; |
|||
|
|||
// 顶部区域 |
|||
.header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 40px; |
|||
|
|||
.logo-area { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.logo-img { |
|||
height: 40px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.domain { |
|||
font-size: 14px; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.hotline { |
|||
font-size: 14px; |
|||
color: #666; |
|||
} |
|||
} |
|||
|
|||
// 表单容器 |
|||
.form-container { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
|
|||
.form-title { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
margin-bottom: 30px; |
|||
color: #333; |
|||
} |
|||
|
|||
// 表单项间距 |
|||
.el-form-item { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
// 验证码按钮 |
|||
.code-btn { |
|||
margin-left: 10px; |
|||
padding: 0 20px; |
|||
height: 40px; |
|||
} |
|||
|
|||
// 表单提示文本 |
|||
.form-tip { |
|||
font-size: 12px; |
|||
color: #999; |
|||
margin-top: 4px; |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
// 协议勾选 |
|||
.agreement-checkbox { |
|||
font-size: 12px; |
|||
color: #666; |
|||
|
|||
.protocol-link { |
|||
color: #ff4d4f; |
|||
text-decoration: underline; |
|||
margin: 0 4px; |
|||
} |
|||
} |
|||
|
|||
// 注册按钮 |
|||
.register-btn { |
|||
width: 100%; |
|||
background-color: #c00; |
|||
border: none; |
|||
&:hover { |
|||
background-color: #a00; |
|||
} |
|||
} |
|||
|
|||
// 兜底提示 |
|||
.bottom-tip { |
|||
text-align: center; |
|||
margin-top: 20px; |
|||
font-size: 12px; |
|||
color: #666; |
|||
|
|||
.supplier-link { |
|||
color: #ff4d4f; |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue