投诉功能开发

src/components/JobComplaintModal/index.tsx

@@ -0,0 +1,182 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Modal,
+  Form,
+  Select,
+  Input,
+  Button,
+  message,
+  Spin,
+  Space,
+} from 'antd';
+import { getDictValueEnum } from '@/services/system/dict';
+import type { DictValueEnumObj } from '@/components/DictTag';
+import { getJobPortalUserId, ensureJobPortalLogin } from '@/utils/jobPortalAuth';
+import { submitJobComplaint } from '@/services/jobportal/user';
+
+const { TextArea } = Input;
+
+interface JobComplaintModalProps {
+  open: boolean;
+  jobId: string | number;
+  onCancel: () => void;
+  onSuccess?: () => void;
+}
+
+const JobComplaintModal: React.FC<JobComplaintModalProps> = ({
+  open,
+  jobId,
+  onCancel,
+  onSuccess,
+}) => {
+  const [form] = Form.useForm();
+  const [complaintTypeEnum, setComplaintTypeEnum] = useState<DictValueEnumObj>({});
+  const [loadingDict, setLoadingDict] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  // 加载投诉类型字典
+  useEffect(() => {
+    if (open) {
+      setLoadingDict(true);
+      getDictValueEnum('complaint_type', false, true)
+        .then((data) => {
+          setComplaintTypeEnum(data);
+        })
+        .catch(() => {
+          message.error('加载投诉类型失败');
+        })
+        .finally(() => {
+          setLoadingDict(false);
+        });
+    }
+  }, [open]);
+
+  // 打开时重置表单
+  useEffect(() => {
+    if (open) {
+      form.resetFields();
+    }
+  }, [open, form]);
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+
+      // 检查登录状态
+      if (!ensureJobPortalLogin('提交投诉')) {
+        return;
+      }
+
+      const userId = getJobPortalUserId();
+      if (!userId) {
+        message.warning('无法获取用户信息，请稍后重试');
+        return;
+      }
+
+      setSubmitting(true);
+      const res = await submitJobComplaint({
+        userId: String(userId),
+        jobId: String(jobId),
+        complaintType: values.complaintType,
+        complaintContent: values.complaintContent,
+        contactPhone: values.contactPhone,
+      });
+
+      if (res?.code === 200) {
+        message.success('投诉提交成功');
+        form.resetFields();
+        onSuccess?.();
+        onCancel();
+      } else {
+        message.error(res?.msg || '投诉提交失败');
+      }
+    } catch (error) {
+      // 表单校验失败不提示
+      if (error && typeof error === 'object' && 'errorFields' in error) {
+        return;
+      }
+      console.error('提交投诉失败:', error);
+      message.error('投诉提交失败，请重试');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // 手机号校验规则
+  const phoneRules = [
+    { required: true, message: '请输入联系方式' },
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: '请输入正确的11位手机号码',
+    },
+  ];
+
+  return (
+    <Modal
+      title="岗位投诉"
+      open={open}
+      onCancel={onCancel}
+      width={600}
+      destroyOnClose
+      footer={
+        <Space>
+          <Button onClick={onCancel}>取消</Button>
+          <Button type="primary" loading={submitting} onClick={handleSubmit}>
+            确认投诉
+          </Button>
+        </Space>
+      }
+    >
+      <Spin spinning={loadingDict} tip="加载投诉类型...">
+        <Form
+          form={form}
+          layout="vertical"
+          style={{ marginTop: 16 }}
+        >
+          <Form.Item
+            name="complaintType"
+            label="投诉类型"
+            rules={[{ required: true, message: '请选择投诉类型' }]}
+          >
+            <Select
+              placeholder="请选择投诉类型"
+              options={Object.entries(complaintTypeEnum).map(([key, val]) => ({
+                value: key,
+                label: (val as any).label || (val as any).text || key,
+              }))}
+              showSearch
+              optionFilterProp="label"
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="complaintContent"
+            label="投诉描述"
+            rules={[{ required: true, message: '请输入投诉描述' }]}
+          >
+            <TextArea
+              rows={6}
+              placeholder="请详细描述您要投诉的内容..."
+              maxLength={2000}
+              showCount
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="contactPhone"
+            label="联系方式"
+            rules={phoneRules}
+          >
+            <Input
+              placeholder="请输入您的手机号码"
+              maxLength={11}
+              style={{ maxWidth: 300 }}
+            />
+          </Form.Item>
+        </Form>
+      </Spin>
+    </Modal>
+  );
+};
+
+export default JobComplaintModal;