feat(order-service): 增加提交资料确认与核对摘要

2026-11-04 12:16:39 +08:00
parent d0e0d32ff3
commit e17f336e1c
12 changed files with 378 additions and 225 deletions
@@ -40,8 +40,8 @@ import {
  saveAdminOrderServiceProfile,
  type AdminOrderServiceAutoPublishJob,
  type AdminOrderServiceProfile,
-  type OrderServiceAnnouncement,
  type OrderServiceField,
+  type OrderServiceMaterialConfirmation,
 } from '@/services/admin/worker-platform'
 import { uploadFile } from '@/services/files'
 import type { UploadedFile } from '@/types/worker-platform'
@@ -72,7 +72,7 @@ type OrderServiceFormValues = {
  successText: string
  screenshots: ScreenshotForm
  autoPublish: AutoPublishForm
-  announcement: OrderServiceAnnouncement
+  materialConfirmation: OrderServiceMaterialConfirmation
 }

 const DEFAULT_SCREENSHOTS: ScreenshotForm = {
@@ -90,15 +90,13 @@ const DEFAULT_AUTO_PUBLISH: AutoPublishForm = {
  retryMax: 3,
 }

-const DEFAULT_ANNOUNCEMENT: OrderServiceAnnouncement = {
+const DEFAULT_MATERIAL_CONFIRMATION: OrderServiceMaterialConfirmation = {
  enabled: true,
-  title: '公告',
-  content: '由于个人资料填写错误，导致的赠送错误，店铺概不负责！',
-  fontSize: 14,
-  color: '#8a4b00',
-  backgroundColor: '#fff7e6',
-  fontWeight: 'bold',
-  textAlign: 'left',
+  title: '提交资料确认',
+  content:
+    '请确认资料填写准确无误。资料提交后不能修改，因个人资料填写错误导致的赠送错误，店铺概不负责！',
+  confirmText: '确认提交',
+  cancelText: '返回检查',
 }

 export default function OrderServicePanel() {
@@ -154,7 +152,8 @@ export default function OrderServicePanel() {
    (file: File, scene: string) => uploadFile(file, scene, 'admin'),
    [],
  )
-  const announcementPreview = Form.useWatch('announcement', form) || DEFAULT_ANNOUNCEMENT
+  const materialConfirmationPreview =
+    Form.useWatch('materialConfirmation', form) || DEFAULT_MATERIAL_CONFIRMATION

  useEffect(() => {
    if (selectedCategoryId !== null || categories.length === 0) return
@@ -174,7 +173,7 @@ export default function OrderServicePanel() {
      successText: nextProfile?.successText || '资料已提交，请等待处理',
      screenshots: nextProfile?.screenshots || DEFAULT_SCREENSHOTS,
      autoPublish: nextProfile?.autoPublish || DEFAULT_AUTO_PUBLISH,
-      announcement: nextProfile?.announcement || DEFAULT_ANNOUNCEMENT,
+      materialConfirmation: nextProfile?.materialConfirmation || DEFAULT_MATERIAL_CONFIRMATION,
    })
    setFields(normalizeFieldOrder(nextProfile?.fields || []))
    setGuideImage(nextProfile?.guideImage || null)
@@ -247,7 +246,7 @@ export default function OrderServicePanel() {
        fields: normalizedFields,
        screenshots: values.screenshots,
        autoPublish: values.autoPublish,
-        announcement: values.announcement,
+        materialConfirmation: values.materialConfirmation,
        submitText: values.submitText,
        successText: values.successText,
      })
@@ -528,13 +527,15 @@ export default function OrderServicePanel() {
                  <section className="order-service-section">
                    <div className="order-service-section-head">
                      <div>
-                        <Text strong>页面公告</Text>
-                        <Text type="secondary">显示在客户资料页顶部，可自定义内容和文字样式。</Text>
+                        <Text strong>提交资料确认</Text>
+                        <Text type="secondary">
+                          客户点击提交时弹窗确认，可自定义提示内容和按钮文字。
+                        </Text>
                      </div>
                      <Space size={8}>
-                        <Text type="secondary">显示公告</Text>
+                        <Text type="secondary">启用确认</Text>
                        <Form.Item
-                          name={['announcement', 'enabled']}
+                          name={['materialConfirmation', 'enabled']}
                          valuePropName="checked"
                          noStyle
                        >
@@ -543,63 +544,33 @@ export default function OrderServicePanel() {
                      </Space>
                    </div>
                    <Row gutter={[12, 0]}>
-                      <Col xs={24} md={10}>
-                        <Form.Item label="公告标题" name={['announcement', 'title']}>
-                          <Input maxLength={30} placeholder="例如：公告" />
+                      <Col xs={24} md={12}>
+                        <Form.Item label="确认标题" name={['materialConfirmation', 'title']}>
+                          <Input maxLength={40} placeholder="例如：提交资料确认" />
                        </Form.Item>
                      </Col>
-                      <Col xs={12} md={4}>
-                        <Form.Item label="字号" name={['announcement', 'fontSize']}>
-                          <InputNumber
-                            min={12}
-                            max={24}
-                            addonAfter="px"
-                            style={{ width: '100%' }}
-                          />
+                      <Col xs={12} md={6}>
+                        <Form.Item label="确认按钮" name={['materialConfirmation', 'confirmText']}>
+                          <Input maxLength={12} placeholder="确认提交" />
                        </Form.Item>
                      </Col>
-                      <Col xs={12} md={5}>
-                        <Form.Item label="文字颜色" name={['announcement', 'color']}>
-                          <Input type="color" className="order-service-color-input" />
-                        </Form.Item>
-                      </Col>
-                      <Col xs={12} md={5}>
-                        <Form.Item label="背景颜色" name={['announcement', 'backgroundColor']}>
-                          <Input type="color" className="order-service-color-input" />
-                        </Form.Item>
-                      </Col>
-                      <Col xs={12} md={4}>
-                        <Form.Item label="字重" name={['announcement', 'fontWeight']}>
-                          <Select
-                            options={[
-                              { value: 'normal', label: '正常' },
-                              { value: 'bold', label: '加粗' },
-                            ]}
-                          />
-                        </Form.Item>
-                      </Col>
-                      <Col xs={12} md={4}>
-                        <Form.Item label="对齐" name={['announcement', 'textAlign']}>
-                          <Select
-                            options={[
-                              { value: 'left', label: '左对齐' },
-                              { value: 'center', label: '居中' },
-                            ]}
-                          />
+                      <Col xs={12} md={6}>
+                        <Form.Item label="取消按钮" name={['materialConfirmation', 'cancelText']}>
+                          <Input maxLength={12} placeholder="返回检查" />
                        </Form.Item>
                      </Col>
                      <Col span={24}>
-                        <Form.Item label="公告内容" name={['announcement', 'content']}>
+                        <Form.Item label="确认内容" name={['materialConfirmation', 'content']}>
                          <Input.TextArea
-                            autoSize={{ minRows: 2, maxRows: 5 }}
+                            autoSize={{ minRows: 3, maxRows: 6 }}
                            maxLength={500}
                            showCount
-                            placeholder="请输入需要客户注意的公告内容"
+                            placeholder="请输入客户提交资料前需要确认的内容"
                          />
                        </Form.Item>
                      </Col>
                    </Row>
-                    <AnnouncementPreview announcement={announcementPreview} />
+                    <MaterialConfirmationPreview confirmation={materialConfirmationPreview} />
                  </section>

                  <section className="order-service-section">
@@ -903,28 +874,30 @@ function resolveProfileStatus(profile: AdminOrderServiceProfile | undefined) {
  return { label: '已归档', tone: 'muted' }
 }

-function AnnouncementPreview({ announcement }: { announcement: OrderServiceAnnouncement }) {
+function MaterialConfirmationPreview({
+  confirmation,
+}: {
+  confirmation: OrderServiceMaterialConfirmation
+}) {
  return (
    <div
-      className={`order-service-announcement-preview${announcement.enabled ? '' : ' is-disabled'}`}
-      style={{
-        color: announcement.color,
-        backgroundColor: announcement.backgroundColor,
-        textAlign: announcement.textAlign,
-      }}
+      className={`order-service-confirmation-preview${confirmation.enabled ? '' : ' is-disabled'}`}
    >
-      <Text strong className="order-service-announcement-preview-title">
-        {announcement.title || '公告'}
-      </Text>
-      <div
-        style={{
-          fontSize: announcement.fontSize,
-          fontWeight: announcement.fontWeight,
-        }}
-      >
-        {announcement.content || '公告内容'}
+      <strong>{confirmation.title || '提交资料确认'}</strong>
+      <div className="order-service-confirmation-preview-summary">
+        <span>商品：示例商品</span>
+        <span>游戏账号：customer@example.com</span>
+        <span>区服：安卓</span>
+        <span>截图：2 张</span>
      </div>
-      {!announcement.enabled ? <span>当前已关闭，不会在客户页显示</span> : null}
+      <div className="order-service-confirmation-preview-content">
+        {confirmation.content || '提交资料确认内容'}
+      </div>
+      <div className="order-service-confirmation-preview-actions">
+        <span>{confirmation.cancelText || '返回检查'}</span>
+        <span className="is-primary">{confirmation.confirmText || '确认提交'}</span>
+      </div>
+      {!confirmation.enabled ? <small>当前已关闭，点击提交将直接提交资料</small> : null}
    </div>
  )
 }
@@ -56,7 +56,7 @@ function resolveErrorTitle(code: string) {
 }

 export default function OrderServicePage() {
-  const { message } = App.useApp()
+  const { message, modal } = App.useApp()
  const navigate = useNavigate()
  const { orderNo: routeOrderNo } = useParams<{ orderNo?: string }>()
  const orderNo = String(routeOrderNo || '').trim()
@@ -68,6 +68,7 @@ export default function OrderServicePage() {
  const [submittingId, setSubmittingId] = useState(0)
  const [screenshotsByOrder, setScreenshotsByOrder] = useState<Record<number, UploadedFile[]>>({})
  const submittingRef = useRef(false)
+  const confirmationOpenRef = useRef(false)
  const requestSeqRef = useRef(0)
  const loadedOrderRef = useRef('')

@@ -146,9 +147,10 @@ export default function OrderServicePage() {
    void navigate(`/o/${encodeURIComponent(nextOrderNo)}`)
  }

-  async function handleSubmit(item: OrderServiceItem, values: Record<string, unknown>) {
-    if (!orderNo || submittingRef.current) return
+  function handleSubmit(item: OrderServiceItem, values: Record<string, unknown>) {
+    if (!orderNo || submittingRef.current || confirmationOpenRef.current) return
    const screenshots = screenshotsByOrder[item.workOrderId] ?? item.screenshots ?? []
+    const normalizedValues = normalizeFormFieldValues(item, values)
    const screenshotRule = item.screenshotsRule
    if (
      screenshotRule?.enabled &&
@@ -159,12 +161,51 @@ export default function OrderServicePage() {
      return
    }

+    const confirmation = item.materialConfirmation
+    if (!confirmation?.enabled) {
+      void submitMaterial(item, normalizedValues, screenshots)
+      return
+    }
+
+    confirmationOpenRef.current = true
+    modal.confirm({
+      title: confirmation.title || '提交资料确认',
+      content: (
+        <MaterialConfirmationSummary
+          item={item}
+          platformOrderId={orderNo}
+          values={normalizedValues}
+          screenshots={screenshots}
+          notice={
+            confirmation.content ||
+            '请确认资料填写准确无误。资料提交后不能修改，因个人资料填写错误导致的赠送错误，店铺概不负责！'
+          }
+        />
+      ),
+      okText: confirmation.confirmText || '确认提交',
+      cancelText: confirmation.cancelText || '返回检查',
+      centered: true,
+      maskClosable: false,
+      width: 560,
+      onOk: () => submitMaterial(item, normalizedValues, screenshots),
+      afterClose: () => {
+        confirmationOpenRef.current = false
+      },
+    })
+  }
+
+  async function submitMaterial(
+    item: OrderServiceItem,
+    fields: Record<string, string>,
+    screenshots: UploadedFile[],
+  ) {
+    if (!orderNo || submittingRef.current) return
    submittingRef.current = true
    setSubmittingId(item.workOrderId)
    try {
      const response = await submitOrderServiceMaterial(orderNo, {
        workOrderId: item.workOrderId,
-        fields: normalizeFormFieldValues(item, values),
+        fields,
        screenshots,
      })
      setSubmittedNames((current) => [
@@ -261,31 +302,6 @@ export default function OrderServicePage() {
              </Button>
            </div>

-            {pageConfig?.announcement?.enabled && pageConfig.announcement.content ? (
-              <section
-                aria-label={pageConfig.announcement.title || '页面公告'}
-                className="collect-link-announcement"
-                style={{
-                  color: pageConfig.announcement.color,
-                  backgroundColor: pageConfig.announcement.backgroundColor,
-                  textAlign: pageConfig.announcement.textAlign,
-                }}
-              >
-                <strong className="collect-link-announcement-title">
-                  {pageConfig.announcement.title || '公告'}
-                </strong>
-                <div
-                  className="collect-link-announcement-content"
-                  style={{
-                    fontSize: pageConfig.announcement.fontSize,
-                    fontWeight: pageConfig.announcement.fontWeight,
-                  }}
-                >
-                  {pageConfig.announcement.content}
-                </div>
-              </section>
-            ) : null}
-
            {submittedNames.length > 0 ? (
              <Alert
                type="success"
@@ -509,6 +525,66 @@ function renderFieldInput(field: NonNullable<OrderServiceItem['fields']>[number]
  return <Input autoComplete="off" placeholder={placeholder} />
 }

+function MaterialConfirmationSummary({
+  item,
+  platformOrderId,
+  values,
+  screenshots,
+  notice,
+}: {
+  item: OrderServiceItem
+  platformOrderId: string
+  values: Record<string, string>
+  screenshots: UploadedFile[]
+  notice: string
+}) {
+  const screenshotRule = item.screenshotsRule
+  return (
+    <div className="collect-link-confirm">
+      <div className="collect-link-confirm-meta">
+        <span>{item.productName || item.categoryName || '订单商品'}</span>
+        <span>订单号：{platformOrderId}</span>
+      </div>
+
+      {item.fields && item.fields.length > 0 ? (
+        <div className="collect-link-confirm-fields">
+          {item.fields.map((field) => {
+            const value = String(values[field.key] || '').trim()
+            return (
+              <div className="collect-link-confirm-field" key={field.key}>
+                <span>{field.label}</span>
+                <strong className={value ? '' : 'is-empty'}>{value || '未填写'}</strong>
+              </div>
+            )
+          })}
+        </div>
+      ) : null}
+
+      {screenshotRule?.enabled ? (
+        <div className="collect-link-confirm-screenshots">
+          <div>
+            <span>{screenshotRule.label || '截图'}</span>
+            <strong>{screenshots.length} 张</strong>
+          </div>
+          {screenshots.length > 0 ? (
+            <div className="collect-link-confirm-images">
+              {screenshots.map((file) => (
+                <img
+                  key={file.objectKey}
+                  alt={file.filename || '已上传截图'}
+                  src={file.thumbnailUrl || file.url}
+                />
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div className="collect-link-confirm-content">{notice}</div>
+    </div>
+  )
+}
+
 function normalizeFormFieldValues(item: OrderServiceItem, values: Record<string, unknown>) {
  const fields = new Map((item.fields || []).map((field) => [field.key, field]))
  return Object.fromEntries(