284 lines
8.1 KiB
HTML
284 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>登录 - 图片收集小程序</title>
|
|
<!-- 引入Vue.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
|
|
<!-- 引入Element UI CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/index.css">
|
|
<!-- 引入Element UI JavaScript -->
|
|
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/index.js"></script>
|
|
<!-- 引入Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
background-color: #f5f7fa;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
.login-container {
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.logo-container {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
.logo {
|
|
width: 80px;
|
|
height: 80px;
|
|
background-color: #1989fa;
|
|
border-radius: 16px;
|
|
margin: 0 auto 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 32px;
|
|
}
|
|
.app-name {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
}
|
|
.form-container {
|
|
flex: 1;
|
|
}
|
|
.form-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
.login-button {
|
|
width: 100%;
|
|
margin-top: 30px;
|
|
}
|
|
.agreement {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
font-size: 12px;
|
|
color: #909399;
|
|
}
|
|
.agreement a {
|
|
color: #1989fa;
|
|
text-decoration: none;
|
|
}
|
|
.footer {
|
|
margin-top: auto;
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
font-size: 12px;
|
|
color: #909399;
|
|
}
|
|
.el-input-group__append {
|
|
padding: 0 10px;
|
|
}
|
|
.code-button {
|
|
background: none;
|
|
color: #1989fa;
|
|
border: none;
|
|
padding: 0;
|
|
height: 100%;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
.code-button:disabled {
|
|
color: #c0c4cc;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="login-container">
|
|
<!-- Logo和应用名称 -->
|
|
<div class="logo-container">
|
|
<div class="logo">
|
|
<i class="fa fa-camera"></i>
|
|
</div>
|
|
<div class="app-name">图片收集小程序</div>
|
|
</div>
|
|
|
|
<!-- 登录表单 -->
|
|
<div class="form-container">
|
|
<el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="top">
|
|
<!-- 手机号输入 -->
|
|
<el-form-item label="手机号" prop="phone">
|
|
<el-input-group>
|
|
<el-input-group__append>+86</el-input-group__append>
|
|
<el-input
|
|
v-model="loginForm.phone"
|
|
placeholder="请输入手机号码"
|
|
type="tel"
|
|
maxlength="11"
|
|
clearable
|
|
></el-input>
|
|
</el-input-group>
|
|
</el-form-item>
|
|
|
|
<!-- 验证码输入 -->
|
|
<el-form-item label="验证码" prop="code">
|
|
<el-input-group>
|
|
<el-input
|
|
v-model="loginForm.code"
|
|
placeholder="请输入验证码"
|
|
type="number"
|
|
maxlength="6"
|
|
></el-input>
|
|
<el-input-group__append>
|
|
<button
|
|
type="button"
|
|
class="code-button"
|
|
:disabled="countdown > 0"
|
|
@click="sendCode"
|
|
>
|
|
{{ countdown > 0 ? countdown + 's后重试' : '获取验证码' }}
|
|
</button>
|
|
</el-input-group__append>
|
|
</el-input-group>
|
|
</el-form-item>
|
|
|
|
<!-- 登录按钮 -->
|
|
<el-form-item>
|
|
<el-button
|
|
type="primary"
|
|
class="login-button"
|
|
:loading="loading"
|
|
@click="handleLogin"
|
|
>
|
|
登录
|
|
</el-button>
|
|
</el-form-item>
|
|
|
|
<!-- 协议链接 -->
|
|
<div class="agreement">
|
|
登录即表示同意
|
|
<a href="#" @click.prevent="showAgreement('service')">《服务协议》</a>
|
|
和
|
|
<a href="#" @click.prevent="showAgreement('privacy')">《隐私政策》</a>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
|
|
<!-- 版权信息 -->
|
|
<div class="footer">
|
|
<p>© 2023 图片收集小程序 版权所有</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
loginForm: {
|
|
phone: '',
|
|
code: ''
|
|
},
|
|
rules: {
|
|
phone: [
|
|
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
|
|
],
|
|
code: [
|
|
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
|
{ pattern: /^\d{6}$/, message: '请输入6位数字验证码', trigger: 'blur' }
|
|
]
|
|
},
|
|
countdown: 0,
|
|
loading: false,
|
|
timer: null
|
|
}
|
|
},
|
|
methods: {
|
|
// 发送验证码
|
|
sendCode() {
|
|
this.$refs.loginForm.validateField('phone', (errorMessage) => {
|
|
if (!errorMessage) {
|
|
// 模拟发送验证码
|
|
this.countdown = 60;
|
|
this.startCountdown();
|
|
this.$message.success('验证码已发送');
|
|
}
|
|
});
|
|
},
|
|
|
|
// 倒计时
|
|
startCountdown() {
|
|
clearInterval(this.timer);
|
|
this.timer = setInterval(() => {
|
|
if (this.countdown > 0) {
|
|
this.countdown--;
|
|
} else {
|
|
clearInterval(this.timer);
|
|
}
|
|
}, 1000);
|
|
},
|
|
|
|
// 处理登录
|
|
handleLogin() {
|
|
this.$refs.loginForm.validate((valid) => {
|
|
if (valid) {
|
|
this.loading = true;
|
|
// 模拟登录请求
|
|
setTimeout(() => {
|
|
this.loading = false;
|
|
// 根据不同手机号模拟不同角色登录
|
|
if (this.loginForm.phone === '13800138000') {
|
|
// 管理员登录
|
|
this.$message.success('登录成功，欢迎管理员');
|
|
this.redirectToHome('admin');
|
|
} else if (this.loginForm.phone === '13800138001') {
|
|
// 部门负责人登录
|
|
this.$message.success('登录成功，欢迎部门负责人');
|
|
this.redirectToHome('dept');
|
|
} else {
|
|
// 普通用户登录
|
|
this.$message.success('登录成功');
|
|
this.redirectToHome('user');
|
|
}
|
|
}, 1000);
|
|
}
|
|
});
|
|
},
|
|
|
|
// 跳转到首页
|
|
redirectToHome(role) {
|
|
switch (role) {
|
|
case 'admin':
|
|
window.location.href = 'admin-home.html';
|
|
break;
|
|
case 'dept':
|
|
window.location.href = 'dept-home.html';
|
|
break;
|
|
default:
|
|
window.location.href = 'user-home.html';
|
|
}
|
|
},
|
|
|
|
// 显示协议
|
|
showAgreement(type) {
|
|
const title = type === 'service' ? '服务协议' : '隐私政策';
|
|
this.$alert('这是' + title + '的内容。在实际应用中，这里会显示完整的协议文本。', title, {
|
|
confirmButtonText: '我知道了'
|
|
});
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer);
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |