240 lines
13 KiB
HTML
240 lines
13 KiB
HTML
<style>
|
|
.layui-form-label {width: 120px !important;padding: 9px 0 !important;}
|
|
.layui-input-block {margin-left: 150px !important;}
|
|
@media screen and (max-width: 768px) {
|
|
.layui-form-label {width: 80px !important;}
|
|
.layui-input-block {margin-left: 110px !important;}
|
|
}
|
|
.form-required::after {content: '*';color: #ff4d4f;margin-left: 4px;}
|
|
.layui-form-item {margin-bottom: 25px;clear: both;}
|
|
.submit-area {margin-top: 30px;padding-top: 20px;border-top: 1px solid #eee;}
|
|
.layui-form-radio {margin-right: 30px !important;margin-top: 3px !important;}
|
|
.card-container {margin-bottom: 20px;}
|
|
</style>
|
|
<div class="layui-fluid">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md12">
|
|
<!-- 个人信息表单卡片 -->
|
|
<div class="layui-card card-container">
|
|
<div class="layui-card-header">
|
|
<i class="layui-icon layui-icon-user" style="margin-right: 8px;"></i>个人信息设置
|
|
</div>
|
|
<div class="layui-card-body">
|
|
<form class="layui-form" id="configForm" lay-filter="configForm">
|
|
<div id="formContainer"></div>
|
|
<div class="layui-form-item submit-area">
|
|
<div class="layui-input-block">
|
|
<button class="layui-btn layui-btn-normal" type="submit" lay-submit>
|
|
<i class="layui-icon layui-icon-release"></i> 立即提交
|
|
</button>
|
|
<button type="reset" class="layui-btn layui-btn-primary">
|
|
<i class="layui-icon layui-icon-refresh"></i> 重置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 密码修改表单卡片 -->
|
|
<div class="layui-card card-container">
|
|
<div class="layui-card-header">
|
|
<i class="layui-icon layui-icon-lock" style="margin-right: 8px;"></i>密码修改
|
|
</div>
|
|
<div class="layui-card-body">
|
|
<form class="layui-form" id="passwordForm" lay-filter="passwordForm">
|
|
<div id="passwordFormContainer"></div>
|
|
<div class="layui-form-item submit-area">
|
|
<div class="layui-input-block">
|
|
<button class="layui-btn layui-btn-normal" type="submit" lay-submit>
|
|
<i class="layui-icon layui-icon-release"></i> 确认修改
|
|
</button>
|
|
<button type="reset" class="layui-btn layui-btn-primary">
|
|
<i class="layui-icon layui-icon-refresh"></i> 重置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var globalLoadIndex = null;
|
|
const formConfig = [
|
|
{field: 'UserName',label: '昵称',type: 'input',placeholder: '请输入您的昵称',verify: 'required',required: true,autocomplete: 'off'},
|
|
{field: 'UserGender',label: '性别',type: 'radio',required: true,options: [{value: '-1',title: '未选择'},{value: '1',title: '男'},{value: '0',title: '女'}]},
|
|
{field: 'UserPersonalSignature',label: '简介',type: 'input',placeholder: '请输入个人简介（选填）',verify: '',required: false,autocomplete: 'off',affix: 'clear'},
|
|
{field: 'UserEmail',label: '邮箱',type: 'input',placeholder: '请输入您的邮箱（必填）（需重新验证）',verify: 'emailOptional',required: true,autocomplete: 'off'},
|
|
{field: 'UserTele',label: '手机号',type: 'input',placeholder: '请输入您的手机号（选填）',verify: 'phoneOptional',required: false,autocomplete: 'off',affix: 'clear',className: 'demo-phone'}
|
|
];
|
|
const passwordFormConfig = [
|
|
{field: 'UserPassword',label: '原密码',type: 'input',inputType: 'password',placeholder: '请输入原密码',verify: 'required',required: true,autocomplete: 'off'},
|
|
{field: 'UserNewPassword',label: '新密码',type: 'input',inputType: 'password',placeholder: '请输入新密码',verify: 'newPassword',required: true,autocomplete: 'off'},
|
|
{field: 'UserNewPasswordConfirm',label: '确认新密码',type: 'input',inputType: 'password',placeholder: '请再次输入新密码',verify: 'confirmPassword',required: true,autocomplete: 'off'}
|
|
];
|
|
window.onload = function() {
|
|
layui.use(['form', 'jquery', 'layer'], function () {
|
|
const $ = layui.jquery;
|
|
const form = layui.form;
|
|
const layer = layui.layer;
|
|
globalLoadIndex = layer.load(2);
|
|
try {
|
|
renderForm(formConfig, $, 'formContainer');
|
|
renderForm(passwordFormConfig, $, 'passwordFormContainer');
|
|
form.render();
|
|
fetchUserConfig(form, $, layer);
|
|
bindFormSubmit(form, $, layer);
|
|
bindPasswordFormSubmit(form, $, layer);
|
|
} catch (error) {
|
|
console.error('表单初始化异常:', error);
|
|
layer.close(globalLoadIndex);
|
|
Toast.error('初始化失败', '表单加载出错，请刷新页面重试', 3000);
|
|
}
|
|
});
|
|
};
|
|
function renderForm(config, $, containerId) {
|
|
const formContainer = $('#' + containerId);
|
|
let formHtml = '';
|
|
config.forEach((field) => {
|
|
let itemHtml = `<div class="layui-form-item" id="form-item-${field.field}">`;
|
|
itemHtml += `<label class="layui-form-label ${field.required ? 'form-required' : ''}">${field.label}</label>`;
|
|
itemHtml += `<div class="layui-input-block">`;
|
|
switch(field.type) {
|
|
case 'input':
|
|
itemHtml += `<input type="${field.inputType || 'text'}" name="${field.field}" lay-verify="${field.verify || ''}" placeholder="${field.placeholder || ''}" autocomplete="${field.autocomplete || 'off'}" class="layui-input ${field.className || ''}" ${field.affix ? `lay-affix="${field.affix}"` : ''} ${field.reqtext ? `lay-reqtext="${field.reqtext}"` : ''} id="input-${field.field}">`;
|
|
break;
|
|
case 'radio':
|
|
field.options.forEach((option) => {
|
|
itemHtml += `<input type="radio" name="${field.field}" value="${option.value}" title="${option.title}" lay-skin="primary" id="radio-${field.field}-${option.value}">`;
|
|
});
|
|
break;
|
|
}
|
|
itemHtml += `</div></div>`;
|
|
formHtml += itemHtml;
|
|
});
|
|
formContainer.html(formHtml);
|
|
}
|
|
function fetchUserConfig(form, $, layer) {
|
|
fetch('/API/User/RequestPersonalConfig', {
|
|
method: 'GET',
|
|
mode: 'cors',
|
|
credentials: 'include',
|
|
headers: {'Accept': 'application/json'}
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) throw new Error(`HTTP 错误，状态码：${response.status}`);
|
|
return response.json();
|
|
})
|
|
.then(apiData => {
|
|
const userData = apiData.data || {};
|
|
formConfig.forEach(field => {
|
|
const fieldName = field.field;
|
|
let value = userData[fieldName] === null ? '' : userData[fieldName];
|
|
value = value !== undefined ? value : '';
|
|
if (field.type === 'radio') {
|
|
const radioValue = String(value);
|
|
$(`input[name="${fieldName}"]`).prop('checked', false);
|
|
const $targetRadio = $(`input[name="${fieldName}"][value="${radioValue}"]`);
|
|
if ($targetRadio.length > 0) $targetRadio.prop('checked', true);
|
|
else $(`input[name="${fieldName}"][value="-1"]`).prop('checked', true);
|
|
} else $(`input[name="${fieldName}"]`).val(value);
|
|
});
|
|
form.render('radio');
|
|
layer.close(globalLoadIndex);
|
|
})
|
|
.catch(error => {
|
|
console.error('获取用户配置失败:', error);
|
|
layer.close(globalLoadIndex);
|
|
if (typeof Toast !== 'undefined') Toast.error('配置获取操作', `获取用户信息出错：${error.message}`, 3000);
|
|
else layer.msg(`获取用户信息出错：${error.message}`, {icon: 5, time: 3000});
|
|
});
|
|
}
|
|
function bindFormSubmit(form, $, layer) {
|
|
form.on('submit(configForm)', function(data) {
|
|
const loadIndex = layer.load(2);
|
|
const formData = new FormData($('#configForm')[0]);
|
|
fetch('/API/User/ModifyPersonalConfig', {
|
|
method: 'POST',
|
|
body: formData,
|
|
credentials: 'include'
|
|
})
|
|
.then(response => {
|
|
layer.close(loadIndex);
|
|
return response.json();
|
|
})
|
|
.then(result => {
|
|
if (result.code === 0) {
|
|
if (typeof Toast !== 'undefined') Toast.success('配置变更操作', result.msg || '修改成功', 3000);
|
|
else layer.msg(result.msg || '修改成功', {icon: 6, time: 2000});
|
|
if (window.parent && window.parent.document && typeof TempLate === 'function') TempLate("/API/User/UserInformation", window.parent.document);
|
|
} else {
|
|
if (typeof Toast !== 'undefined') Toast.error('配置变更操作', `操作失败：${result.error || result.msg || '未知错误'}`, 3000);
|
|
else layer.msg(`操作失败：${result.error || result.msg || '未知错误'}`, {icon: 5, time: 3000});
|
|
console.error('配置更新失败:', result);
|
|
}
|
|
if (result.reload) window.parent.location.reload();
|
|
})
|
|
.catch(error => {
|
|
layer.close(loadIndex);
|
|
if (typeof Toast !== 'undefined') Toast.error('配置变更操作', `请求失败：${error.message}`, 3000);
|
|
else layer.msg(`请求失败：${error.message}`, {icon: 5, time: 3000});
|
|
console.error('提交异常:', error);
|
|
});
|
|
return false;
|
|
});
|
|
}
|
|
function bindPasswordFormSubmit(form, $, layer) {
|
|
form.on('submit(passwordForm)', function(data) {
|
|
const loadIndex = layer.load(2);
|
|
const formData = new FormData($('#passwordForm')[0]);
|
|
fetch('/API/User/ModifyPassword', {
|
|
method: 'POST',
|
|
body: formData,
|
|
credentials: 'include'
|
|
})
|
|
.then(response => {
|
|
layer.close(loadIndex);
|
|
return response.json();
|
|
})
|
|
.then(result => {
|
|
if (result.code === 0) {
|
|
if (typeof Toast !== 'undefined') Toast.success('密码修改', result.msg, 3000);
|
|
else layer.msg(result.msg, {icon: 6, time: 2000});
|
|
setTimeout(() => {
|
|
if (window.parent && window.parent.location) window.parent.location.href = "https://ugm.gvsds.com/Auth/DeleteAllCookies";
|
|
else location.href = "https://ugm.gvsds.com/Auth/DeleteAllCookies";
|
|
}, 2000);
|
|
} else {
|
|
if (typeof Toast !== 'undefined') Toast.error('密码修改', result.msg, 3000);
|
|
else layer.msg(result.msg, {icon: 5, time: 3000});
|
|
}
|
|
})
|
|
.catch(error => {
|
|
layer.close(loadIndex);
|
|
if (typeof Toast !== 'undefined') Toast.error('密码修改', `请求失败：${error.message}`, 3000);
|
|
else layer.msg(`请求失败：${error.message}`, {icon: 5, time: 3000});
|
|
console.error('密码修改异常:', error);
|
|
});
|
|
return false;
|
|
});
|
|
}
|
|
layui.use('form', function() {
|
|
const form = layui.form;
|
|
form.verify({
|
|
phoneOptional: function(value) {if (value.trim() !== '' && !/^1[3-9]\d{9}$/.test(value)) return '手机号格式不正确';},
|
|
emailOptional: function(value) {if (value.trim() !== '' && !/^[\w.-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,6}$/.test(value)) return '邮箱格式不正确';},
|
|
required: [/\S+/,'此字段不能为空'],
|
|
newPassword: function(value) {
|
|
// if (value.length < 6 || value.length > 16) return '新密码长度必须为6-16位';
|
|
if (!/^[\w@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+$/.test(value)) return '新密码只能包含字母、数字和特殊字符';
|
|
},
|
|
confirmPassword: function(value) {
|
|
const newPwd = layui.$('input[name="UserNewPassword"]').val();
|
|
if (value !== newPwd) return '两次输入的新密码不一致';
|
|
}
|
|
});
|
|
});
|
|
</script> |