2 Commits

Author SHA1 Message Date
ZhuRui 0a6d751e82 fix: 处理登录页面部分表单验证问题 2026-08-06 10:24:25 +08:00
ZhuRui 0a60cc1816 fix: 去除没有必要的v-model、处理部分双向绑定问题 2026-08-06 10:12:58 +08:00
12 changed files with 152 additions and 155 deletions
+2 -10
View File
@@ -66,11 +66,7 @@ export default defineComponent({
>
<Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
<Form.Item label="新密码" name="newPassword" rules={newPasswordRules}>
<Input.Password
placeholder="至少8位,含字母+数字"
allowClear
v-model:value={formData.newPassword}
/>
<Input.Password placeholder="至少8位,含字母+数字" allowClear />
</Form.Item>
<Form.Item
@@ -78,11 +74,7 @@ export default defineComponent({
name="confirmPassword"
rules={confirmNewPasswordRules(() => formData.newPassword)}
>
<Input.Password
placeholder="再次输入新密码"
allowClear
v-model:value={formData.confirmPassword}
/>
<Input.Password placeholder="再次输入新密码" allowClear />
</Form.Item>
<div class={styles.tip}>{TIPS_TEXT}</div>
@@ -479,12 +479,7 @@ export default defineComponent({
>
{/* ===== Banner 标题 ===== */}
<Form.Item label="Banner标题" name="title" rules={titleRules}>
<Input
placeholder="请输入标题"
maxlength={TITLE_MAX}
allowClear
v-model:value={formData.title}
/>
<Input placeholder="请输入标题" maxlength={TITLE_MAX} allowClear />
</Form.Item>
{/* ===== 上传图片(必填,带裁剪) ===== */}
@@ -540,18 +535,13 @@ export default defineComponent({
{/* ===== 跳转类型 ===== */}
<Form.Item label="跳转类型" name="type" rules={typeRules}>
<Select
options={JUMP_TYPE_OPTIONS as any}
placeholder="请选择"
v-model:value={formData.type}
/>
<Select options={JUMP_TYPE_OPTIONS as any} placeholder="请选择" />
</Form.Item>
{/* ===== 联动字段:赛事详情页 → 模糊搜索关联赛事 ===== */}
{formData.type === '1' && (
<Form.Item label="关联赛事" name="relatedEventId">
<Select
v-model:value={formData.relatedEventId}
showSearch
filterOption={false}
allowClear={!eventSearchLoading.value}
@@ -571,24 +561,14 @@ export default defineComponent({
{/* ===== 联动字段:自定义链接 ===== */}
{formData.type === '2' && (
<Form.Item label="跳转地址" name="linkUrl" rules={linkUrlRules}>
<Input
placeholder="https://xxx"
maxlength={URL_MAX}
allowClear
v-model:value={formData.linkUrl}
/>
<Input placeholder="https://xxx" maxlength={URL_MAX} allowClear />
</Form.Item>
)}
{/* ===== 联动字段:小程序页面 ===== */}
{formData.type === '3' && (
<Form.Item label="小程序路径" name="linkUrl" rules={miniProgramPathRules}>
<Input
placeholder="/pages/index/index"
maxlength={PATH_MAX}
allowClear
v-model:value={formData.linkUrl}
/>
<Input placeholder="/pages/index/index" maxlength={PATH_MAX} allowClear />
</Form.Item>
)}
@@ -672,7 +652,6 @@ export default defineComponent({
max={999}
precision={0}
style={{ width: '200px' }}
v-model:value={formData.sort}
/>
</Form.Item>
</Form>
@@ -136,7 +136,7 @@ export default defineComponent({
{d.dropoutCount || '0'}
</Descriptions.Item>
<Descriptions.Item label="最大人数">{d.dtotalLimit || '-'}</Descriptions.Item>
<Descriptions.Item label="最大人数">{d.totalLimit || '-'}</Descriptions.Item>
<Descriptions.Item label="对岸数量">{d.matchTotalCount || '0'}</Descriptions.Item>
<Descriptions.Item label="已完成对岸数量">{d.matchCount || '0'}</Descriptions.Item>
</Descriptions>
-2
View File
@@ -38,7 +38,6 @@ export default defineComponent({
</Form.Item>
<Form.Item label="用户昵称" name="nickname">
<Input
v-model:value={filterForm.nickname}
placeholder="请输入"
style={{ width: '180px' }}
allowClear
@@ -47,7 +46,6 @@ export default defineComponent({
</Form.Item>
<Form.Item label="手机号" name="phone">
<Input
v-model:value={filterForm.phone}
placeholder="请输入"
style={{ width: '180px' }}
allowClear
-2
View File
@@ -132,7 +132,6 @@ export default defineComponent({
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="用户昵称" name="nickname">
<Input
v-model:value={filterForm.nickname}
placeholder="请输入"
style={{ width: '180px' }}
allowClear
@@ -141,7 +140,6 @@ export default defineComponent({
</Form.Item>
<Form.Item label="手机号" name="phone">
<Input
v-model:value={filterForm.phone}
placeholder="请输入"
style={{ width: '180px' }}
allowClear
-3
View File
@@ -94,7 +94,6 @@ export default defineComponent({
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="申请人昵称" name="nickname">
<Input
v-model:value={filterForm.nickname}
placeholder="请输入"
style={{ width: '160px' }}
allowClear
@@ -103,7 +102,6 @@ export default defineComponent({
</Form.Item>
<Form.Item label="手机号" name="phone">
<Input
v-model:value={filterForm.phone}
placeholder="请输入"
style={{ width: '160px' }}
allowClear
@@ -112,7 +110,6 @@ export default defineComponent({
</Form.Item>
<Form.Item label="真实姓名" name="realName">
<Input
v-model:value={filterForm.realName}
placeholder="请输入"
style={{ width: '160px' }}
allowClear
+20 -85
View File
@@ -1,90 +1,22 @@
import { defineComponent, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { Button, Checkbox, Form, FormItem, Input, message } from 'ant-design-vue';
import { defineComponent } from 'vue';
import { Button, Checkbox, Form, FormItem, Input } from 'ant-design-vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { auth } from '@/hooks/useAuth';
import { useEffect, useState } from '@/hooks';
import { useUserStore } from '@/stores/userStore';
import { login as loginApi } from '@/api/login';
import { loginFormRules } from './model/form';
import { useLoginModel } from './model/useLoginModel';
import styles from './index.module.less';
interface LoginForm {
phone: string;
password: string;
}
export default defineComponent({
name: 'LoginPage',
setup() {
const route = useRoute();
const [loading, setLoading] = useState(false);
const [rememberMe, setRememberMe] = useState(false);
const { setUser } = useUserStore();
const form = reactive<LoginForm>({
phone: '',
password: '',
});
useEffect(() => {
const saved = localStorage.getItem('cpms_login_remember');
if (saved) {
try {
const data = JSON.parse(saved);
form.phone = data.phone || '';
form.password = data.password || '';
setRememberMe(true);
} catch {
localStorage.removeItem('cpms_login_remember');
}
}
}, []);
const handleSubmit = async () => {
if (!form.phone || !form.password) {
message.warning('请输入用户名和密码');
return;
}
setLoading(true);
try {
const res = await loginApi({ phone: form.phone, password: form.password });
if (res.code != 200) {
message.error(res.msg || '登录失败');
return;
}
setUser({
phone: res.data.phone || form.phone,
nickname: res.data.nickName || '',
token: res.data.token,
});
if (rememberMe.value) {
localStorage.setItem(
'cpms_login_remember',
JSON.stringify({
phone: form.phone,
password: form.password,
}),
);
} else {
localStorage.removeItem('cpms_login_remember');
}
const redirect = Array.isArray(route.query.redirect)
? route.query.redirect[0]
: route.query.redirect;
await auth.login(res.data.token, redirect || undefined);
message.success('登录成功');
} catch (err) {
message.error('登录失败,请重试');
} finally {
setLoading(false);
}
};
const {
form,
setPhone,
setPassword,
rememberMe,
setRememberMe,
loading,
handleSubmit,
loginFormRules,
} = useLoginModel();
const particles = [
{ top: '8%', left: '15%', delay: '0s', duration: '8s' },
@@ -216,7 +148,8 @@ export default defineComponent({
>
<FormItem name="phone">
<Input
v-model={[form.phone, 'value']}
value={form.phone}
onUpdate:value={setPhone}
placeholder="请输入用户名"
size="large"
v-slots={{ prefix: () => <UserOutlined /> }}
@@ -224,7 +157,8 @@ export default defineComponent({
</FormItem>
<FormItem name="password">
<Input
v-model={[form.password, 'value']}
value={form.password}
onUpdate:value={setPassword}
type="password"
placeholder="请输入密码"
size="large"
@@ -232,9 +166,10 @@ export default defineComponent({
/>
</FormItem>
{/* 记住密码 */}
<div class={styles.rememberRow}>
<Checkbox v-model={[rememberMe.value, 'checked']}></Checkbox>
<Checkbox checked={rememberMe.value} onUpdate:checked={setRememberMe}>
</Checkbox>
</div>
<FormItem>
+4
View File
@@ -0,0 +1,4 @@
/**
* 登录页 - 接口服务
*/
export { login, type LoginResult } from '@/api/login';
+117
View File
@@ -0,0 +1,117 @@
import { reactive } from 'vue';
import { useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import { useEffect, useState } from '@/hooks';
import { auth } from '@/hooks/useAuth';
import { useUserStore } from '@/stores/userStore';
import { login } from './services';
import { loginFormRules } from './form';
// ============================================================
// 类型
// ============================================================
export interface LoginForm {
phone: string;
password: string;
}
// ============================================================
// 常量
// ============================================================
const REMEMBER_KEY = 'cpms_login_remember';
// ============================================================
// Model
// ============================================================
export function useLoginModel() {
const route = useRoute();
const { setUser } = useUserStore();
const [loading, setLoading] = useState(false);
const [rememberMe, setRememberMe] = useState(false);
const form = reactive<LoginForm>({
phone: '',
password: '',
});
useEffect(() => {
const saved = localStorage.getItem(REMEMBER_KEY);
if (!saved) return;
try {
const data = JSON.parse(saved);
form.phone = data.phone || '';
form.password = data.password || '';
setRememberMe(true);
} catch {
localStorage.removeItem(REMEMBER_KEY);
}
}, []);
const setPhone = (phone: string) => {
form.phone = phone;
};
const setPassword = (password: string) => {
form.password = password;
};
const handleSubmit = async () => {
if (!form.phone || !form.password) {
message.warning('请输入用户名和密码');
return;
}
setLoading(true);
try {
const res = await login({ phone: form.phone, password: form.password });
if (res.code != 200) {
message.error(res.msg || '登录失败');
return;
}
setUser({
phone: res.data.phone || form.phone,
nickname: res.data.nickName || '',
token: res.data.token,
});
if (rememberMe.value) {
localStorage.setItem(
REMEMBER_KEY,
JSON.stringify({
phone: form.phone,
password: form.password,
}),
);
} else {
localStorage.removeItem(REMEMBER_KEY);
}
const redirect = Array.isArray(route.query.redirect)
? route.query.redirect[0]
: route.query.redirect;
await auth.login(res.data.token, redirect || undefined);
message.success('登录成功');
} catch {
message.error('登录失败,请重试');
} finally {
setLoading(false);
}
};
return {
form,
setPhone,
setPassword,
rememberMe,
setRememberMe,
loading,
handleSubmit,
loginFormRules,
};
}
-1
View File
@@ -60,7 +60,6 @@ export default defineComponent({
</Form.Item>
<Form.Item label="操作人" name="searchOperator">
<Input
v-model:value={filterForm.searchOperator}
placeholder="请输入"
style={{ width: '160px' }}
allowClear
@@ -141,12 +141,7 @@ export default defineComponent({
<Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
{/* 角色名称 */}
<Form.Item label="角色名称" name="roleName" rules={roleNameRules}>
<Input
placeholder="请输入"
maxlength={20}
allowClear
v-model:value={formData.roleName}
/>
<Input placeholder="请输入" maxlength={20} allowClear />
</Form.Item>
{/* 菜单权限配置 */}
@@ -234,20 +234,10 @@ export default defineComponent({
{/* 姓名 / 手机号:同一行 */}
<div class={styles.row}>
<Form.Item label="姓名" name="realName" rules={realNameRules} class={styles.col}>
<Input
placeholder="真实姓名"
maxlength={8}
allowClear
v-model:value={formData.realName}
/>
<Input placeholder="真实姓名" maxlength={8} allowClear />
</Form.Item>
<Form.Item label="手机号" name="phone" rules={phoneRules} class={styles.col}>
<Input
placeholder="11位手机号"
maxlength={11}
allowClear
v-model:value={formData.phone}
/>
<Input placeholder="11位手机号" maxlength={11} allowClear />
</Form.Item>
</div>
@@ -268,7 +258,6 @@ export default defineComponent({
</Form.Item>
<Form.Item label="角色" name="roleId" rules={roleRules} class={styles.col}>
<Select
v-model:value={formData.roleId}
showSearch
filterOption={false}
allowClear={!roleSearchLoading.value}
@@ -297,7 +286,6 @@ export default defineComponent({
<Input.Password
placeholder={isEdit ? '请输入新密码' : '至少8位,含字母+数字'}
allowClear
v-model:value={formData.password}
/>
</Form.Item>
<Form.Item
@@ -306,17 +294,12 @@ export default defineComponent({
class={styles.col}
rules={confirmPasswordRules(() => formData.password)}
>
<Input.Password
placeholder="再次输入密码"
allowClear
v-model:value={formData.confirmPassword}
/>
<Input.Password placeholder="再次输入密码" allowClear />
</Form.Item>
</div>
{/* 角色:单独一行 */}
<Form.Item label="角色" name="roleId" rules={roleRules}>
<Select
v-model:value={formData.roleId}
showSearch
filterOption={false}
allowClear={!roleSearchLoading.value}