449 行
15 KiB
HTML
449 行
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>重置骑手密码</title>
|
||
<link rel="stylesheet" href="/Public/vue/element-ui/lib/theme-chalk/index.css">
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
background-color: #f5f7fa;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
}
|
||
|
||
.page-container {
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.password-card {
|
||
background: white;
|
||
padding: 40px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
max-width: 500px;
|
||
position: relative;
|
||
}
|
||
|
||
.card-header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin: 0 0 10px 0;
|
||
}
|
||
|
||
.page-subtitle {
|
||
color: #909399;
|
||
font-size: 14px;
|
||
margin: 0;
|
||
}
|
||
|
||
.back-btn {
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 20px;
|
||
color: #409eff;
|
||
text-decoration: none;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.back-btn:hover {
|
||
background: #ecf5ff;
|
||
color: #66b1ff;
|
||
}
|
||
|
||
.rider-info-section {
|
||
background: #f8f9fa;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 30px;
|
||
border-left: 4px solid #409eff;
|
||
}
|
||
|
||
.info-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-title i {
|
||
margin-right: 8px;
|
||
color: #409eff;
|
||
}
|
||
|
||
.rider-info-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 15px;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-label {
|
||
font-weight: 600;
|
||
color: #606266;
|
||
margin-right: 10px;
|
||
min-width: 60px;
|
||
}
|
||
|
||
.info-value {
|
||
color: #303133;
|
||
flex: 1;
|
||
}
|
||
|
||
.password-form {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.form-actions {
|
||
text-align: center;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.security-tips {
|
||
background: #fff7e6;
|
||
border: 1px solid #ffd591;
|
||
border-radius: 6px;
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.tips-title {
|
||
color: #d48806;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tips-title i {
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.tips-content {
|
||
color: #d48806;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.tips-content ul {
|
||
margin: 8px 0 0 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.tips-content li {
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.password-strength {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.strength-bar {
|
||
height: 4px;
|
||
background: #e4e7ed;
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.strength-fill {
|
||
height: 100%;
|
||
transition: all 0.3s;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.strength-text {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.page-container {
|
||
padding: 10px;
|
||
}
|
||
|
||
.password-card {
|
||
padding: 30px 20px;
|
||
}
|
||
|
||
.rider-info-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.back-btn {
|
||
position: static;
|
||
margin-bottom: 20px;
|
||
align-self: flex-start;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div class="page-container">
|
||
<div class="password-card">
|
||
<a href="index.html" class="back-btn">
|
||
<i class="el-icon-arrow-left"></i>
|
||
返回列表
|
||
</a>
|
||
|
||
<div class="card-header">
|
||
<h1 class="page-title">重置骑手密码</h1>
|
||
<p class="page-subtitle">为骑手设置新的登录密码</p>
|
||
</div>
|
||
|
||
<div v-if="riderInfo">
|
||
<!-- 骑手信息 -->
|
||
<div class="rider-info-section">
|
||
<div class="info-title">
|
||
<i class="el-icon-user"></i>
|
||
骑手信息
|
||
</div>
|
||
<div class="rider-info-grid">
|
||
<div class="info-item">
|
||
<div class="info-label">姓名:</div>
|
||
<div class="info-value">{{ riderInfo.rider_name }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">手机号:</div>
|
||
<div class="info-value">{{ riderInfo.rider_phone }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 安全提示 -->
|
||
<div class="security-tips">
|
||
<div class="tips-title">
|
||
<i class="el-icon-warning"></i>
|
||
安全提示
|
||
</div>
|
||
<div class="tips-content">
|
||
为了账户安全，请设置强密码：
|
||
<ul>
|
||
<li>密码长度至少6位</li>
|
||
<li>建议包含数字、字母和特殊字符</li>
|
||
<li>避免使用生日、手机号等易猜测信息</li>
|
||
<li>定期更换密码以保障账户安全</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 密码重置表单 -->
|
||
<el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px" class="password-form">
|
||
<el-form-item label="新密码" prop="newPassword">
|
||
<el-input
|
||
v-model="passwordForm.newPassword"
|
||
type="password"
|
||
placeholder="请输入新密码（6位以上）"
|
||
show-password
|
||
@input="checkPasswordStrength">
|
||
</el-input>
|
||
<div class="password-strength" v-if="passwordForm.newPassword">
|
||
<div class="strength-bar">
|
||
<div class="strength-fill" :style="strengthStyle"></div>
|
||
</div>
|
||
<div class="strength-text">密码强度: {{ strengthText }}</div>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="确认密码" prop="confirmPassword">
|
||
<el-input
|
||
v-model="passwordForm.confirmPassword"
|
||
type="password"
|
||
placeholder="请再次输入新密码"
|
||
show-password>
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="form-actions">
|
||
<el-button size="large" @click="goBack">取 消</el-button>
|
||
<el-button type="primary" size="large" @click="resetPassword" :loading="saving">
|
||
<i class="el-icon-key"></i>
|
||
重置密码
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
|
||
<!-- 加载状态 -->
|
||
<div v-else style="text-align: center; padding: 50px;">
|
||
<el-loading-spinner></el-loading-spinner>
|
||
<p style="margin-top: 20px; color: #909399;">加载中...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/Public/vue/vue.min.js"></script>
|
||
<script src="/Public/vue/element-ui/lib/index.js"></script>
|
||
<script src="/Public/jquery/js/jquery.min.js"></script>
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
data() {
|
||
return {
|
||
riderInfo: null,
|
||
saving: false,
|
||
passwordStrength: 0,
|
||
passwordForm: {
|
||
riderId: null,
|
||
newPassword: '',
|
||
confirmPassword: ''
|
||
},
|
||
passwordRules: {
|
||
newPassword: [
|
||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||
{ min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
|
||
{ max: 20, message: '密码长度不能超过20位', trigger: 'blur' }
|
||
],
|
||
confirmPassword: [
|
||
{ required: true, message: '请确认新密码', trigger: 'blur' },
|
||
{ validator: this.validateConfirmPassword, trigger: 'blur' }
|
||
]
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
strengthStyle() {
|
||
const colors = ['#f56c6c', '#e6a23c', '#67c23a'];
|
||
const widths = ['33%', '66%', '100%'];
|
||
return {
|
||
width: widths[this.passwordStrength] || '0%',
|
||
backgroundColor: colors[this.passwordStrength] || '#f56c6c'
|
||
};
|
||
},
|
||
strengthText() {
|
||
const texts = ['弱', '中', '强'];
|
||
return texts[this.passwordStrength] || '弱';
|
||
}
|
||
},
|
||
mounted() {
|
||
this.loadRiderInfo();
|
||
},
|
||
methods: {
|
||
// 加载骑手信息
|
||
async loadRiderInfo() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const riderId = urlParams.get('id');
|
||
|
||
if (!riderId) {
|
||
this.$message.error('缺少骑手ID参数');
|
||
this.goBack();
|
||
return;
|
||
}
|
||
|
||
this.passwordForm.riderId = riderId;
|
||
|
||
try {
|
||
const response = await $.ajax({
|
||
url: '/Retail/Rider/getRiderInfo',
|
||
type: 'POST',
|
||
data: { id: riderId },
|
||
dataType: 'json'
|
||
});
|
||
|
||
if (response.code === 1) {
|
||
this.riderInfo = response.data;
|
||
} else {
|
||
this.$message.error(response.message || '获取骑手信息失败');
|
||
this.goBack();
|
||
}
|
||
} catch (error) {
|
||
this.$message.error('网络错误，请重试');
|
||
console.error('获取骑手信息异常:', error);
|
||
this.goBack();
|
||
}
|
||
},
|
||
|
||
// 验证确认密码
|
||
validateConfirmPassword(rule, value, callback) {
|
||
if (value !== this.passwordForm.newPassword) {
|
||
callback(new Error('两次输入的密码不一致'));
|
||
} else {
|
||
callback();
|
||
}
|
||
},
|
||
|
||
// 检查密码强度
|
||
checkPasswordStrength() {
|
||
const password = this.passwordForm.newPassword;
|
||
let strength = 0;
|
||
|
||
if (password.length >= 6) strength++;
|
||
if (/[a-zA-Z]/.test(password) && /[0-9]/.test(password)) strength++;
|
||
if (/[^a-zA-Z0-9]/.test(password)) strength++;
|
||
|
||
this.passwordStrength = Math.min(strength, 2);
|
||
},
|
||
|
||
// 重置密码
|
||
resetPassword() {
|
||
this.$refs.passwordForm.validate(async (valid) => {
|
||
if (!valid) return;
|
||
|
||
await this.confirmResetPassword();
|
||
});
|
||
},
|
||
|
||
async confirmResetPassword() {
|
||
this.saving = true;
|
||
try {
|
||
const response = await $.ajax({
|
||
url: '/Retail/Rider/resetPassword',
|
||
type: 'POST',
|
||
data: {
|
||
id: this.passwordForm.riderId,
|
||
new_password: this.passwordForm.newPassword
|
||
},
|
||
dataType: 'json'
|
||
});
|
||
|
||
if (response.code === 1) {
|
||
this.$message.success('密码重置成功');
|
||
setTimeout(() => {
|
||
this.goBack();
|
||
}, 1500);
|
||
} else {
|
||
this.$message.error(response.message || '密码重置失败');
|
||
}
|
||
} catch (error) {
|
||
this.$message.error('网络错误，请重试');
|
||
console.error('重置密码异常:', error);
|
||
} finally {
|
||
this.saving = false;
|
||
}
|
||
},
|
||
|
||
// 返回列表页
|
||
goBack() {
|
||
window.location.href = 'index.html';
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |