home1020
This commit is contained in:
bwstudio
@@ -0,0 +1,284 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user