门店开通流程

2026-07-03 14:53:21 +08:00
parent c7dc6a2274
commit f2175b83f7
24 changed files with 1451 additions and 186 deletions
@@ -0,0 +1,136 @@
+import { useId, useRef, useState } from 'react';
+import { uploadFileToOss, type OssMediaType } from '../lib/upload';
+import { isWechatEnv, weixinSdk } from '../lib/weixin';
+
+type OssUploadFieldProps = {
+  value?: string;
+  onChange?: (url: string) => void;
+  bizType: string;
+  mediaType?: OssMediaType;
+  accept?: string;
+  wide?: boolean;
+  compact?: boolean;
+  label?: string;
+};
+
+const DEFAULT_MAX_MB = 10;
+
+export default function OssUploadField({
+  value,
+  onChange,
+  bizType,
+  mediaType = 'IMAGE',
+  accept,
+  wide,
+  compact,
+  label,
+}: OssUploadFieldProps) {
+  const inputId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState('');
+
+  const resolvedAccept =
+    accept ?? (mediaType === 'VIDEO' ? 'video/*' : mediaType === 'FILE' ? 'image/*,.pdf' : 'image/*');
+  const useWechatPicker = isWechatEnv() && mediaType !== 'VIDEO';
+
+  async function uploadSelectedFile(file: File) {
+    if (file.size > DEFAULT_MAX_MB * 1024 * 1024) {
+      setError(`文件不能超过 ${DEFAULT_MAX_MB}MB`);
+      return;
+    }
+    setUploading(true);
+    setError('');
+    try {
+      const result = await uploadFileToOss(file, { bizType, mediaType });
+      onChange?.(result.url);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '上传失败');
+    } finally {
+      setUploading(false);
+      if (inputRef.current) inputRef.current.value = '';
+    }
+  }
+
+  async function pickFile() {
+    if (uploading) return;
+    setError('');
+
+    if (useWechatPicker) {
+      try {
+        const files = await weixinSdk.chooseImages({
+          count: 1,
+          sourceType: ['album', 'camera'],
+        });
+        if (files?.[0]) {
+          await uploadSelectedFile(files[0]);
+          return;
+        }
+      } catch (e) {
+        const msg = e instanceof Error ? e.message : '无法打开相册';
+        if (!/cancel/i.test(msg)) setError(msg);
+        return;
+      }
+    }
+
+    inputRef.current?.click();
+  }
+
+  const isImage = mediaType === 'IMAGE' && value;
+  const isFile = mediaType === 'FILE' && value;
+
+  const triggerProps = {
+    type: 'button' as const,
+    disabled: uploading,
+    onClick: () => void pickFile(),
+  };
+
+  return (
+    <div className="partner-oss-upload">
+      <input
+        id={inputId}
+        ref={inputRef}
+        type="file"
+        accept={resolvedAccept}
+        className="partner-oss-upload-input"
+        disabled={uploading}
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file) void uploadSelectedFile(file);
+        }}
+      />
+      {isImage ? (
+        <button {...triggerProps} className={`partner-upload-preview${wide ? ' partner-upload-preview--wide' : ''}`}>
+          <img src={value} alt={label ?? '已上传'} />
+          <span className="partner-upload-preview-mask">
+            <span className="material-symbols-outlined">{uploading ? 'hourglass_top' : 'edit'}</span>
+            <span>{uploading ? '上传中…' : '更换'}</span>
+          </span>
+        </button>
+      ) : isFile ? (
+        <button {...triggerProps} className="partner-upload-file">
+          <div className="partner-bills-icon" style={{ background: '#ffb3ae' }}>
+            <span className="material-symbols-outlined text-primary">description</span>
+          </div>
+          <div style={{ textAlign: 'left', flex: 1 }}>
+            <span className="text-primary" style={{ fontWeight: 700, display: 'block' }}>已上传合同</span>
+            <span className="label-md text-muted">{uploading ? '上传中…' : '点击更换'}</span>
+          </div>
+        </button>
+      ) : (
+        <button
+          {...triggerProps}
+          className={`partner-upload-dashed${wide ? ' partner-upload-dashed--wide' : ''}${compact ? ' partner-upload-dashed--compact' : ''}`}
+        >
+          <span className="material-symbols-outlined text-primary" style={{ fontSize: compact ? 28 : 36 }}>
+            {uploading ? 'hourglass_top' : 'add_a_photo'}
+          </span>
+          <span className="text-primary" style={{ fontWeight: 500 }}>
+            {uploading ? '上传中…' : (label ?? (useWechatPicker ? '从相册选择' : '点击上传'))}
+          </span>
+        </button>
+      )}
+      {error && <p className="partner-form-error" role="alert">{error}</p>}
+    </div>
+  );
+}