Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,8 +1,6 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useRef, useState } from 'react';
|
||||
import { uploadFileToOss, type OssMediaType } from '../lib/upload';
|
||||
import { enqueueUpload } from '../lib/upload-lock';
|
||||
import { formatChooseImageFailMessage } from '@dukang/weixin-sdk';
|
||||
import { isWechatEnv, weixinSdk } from '../lib/weixin';
|
||||
import { toastError } from '../lib/toast';
|
||||
|
||||
type OssUploadFieldProps = {
|
||||
@@ -14,27 +12,10 @@ type OssUploadFieldProps = {
|
||||
wide?: boolean;
|
||||
compact?: boolean;
|
||||
label?: string;
|
||||
/** 兼容现有调用:选图不再依赖 openId 绑定 */
|
||||
wechatReady?: boolean;
|
||||
onWechatReadyChange?: (ready: boolean) => void;
|
||||
};
|
||||
|
||||
const DEFAULT_MAX_MB = 10;
|
||||
|
||||
function formatWechatUploadError(e: unknown): string {
|
||||
const msg = e instanceof Error ? e.message : '无法打开相册';
|
||||
const formatted = formatChooseImageFailMessage(msg);
|
||||
if (formatted) return formatted;
|
||||
if (/invalid signature/i.test(msg)) {
|
||||
return '微信 JSSDK 签名校验失败:请确认公众号已配置 JS 接口安全域名,并刷新页面后重试';
|
||||
}
|
||||
return msg;
|
||||
}
|
||||
|
||||
function acceptsImages(accept: string) {
|
||||
return accept.includes('image');
|
||||
}
|
||||
|
||||
export default function OssUploadField({
|
||||
value,
|
||||
onChange,
|
||||
@@ -48,7 +29,6 @@ export default function OssUploadField({
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [showAlbumFallback, setShowAlbumFallback] = useState(false);
|
||||
|
||||
function showUploadError(text: string) {
|
||||
setError(text);
|
||||
@@ -57,17 +37,6 @@ export default function OssUploadField({
|
||||
|
||||
const resolvedAccept =
|
||||
accept ?? (mediaType === 'VIDEO' ? 'video/*' : mediaType === 'FILE' ? 'image/*,.pdf' : 'image/*');
|
||||
const inWechat = isWechatEnv();
|
||||
const useWechatPicker =
|
||||
inWechat && (mediaType === 'IMAGE' || (mediaType === 'FILE' && acceptsImages(resolvedAccept)));
|
||||
|
||||
useEffect(() => {
|
||||
if (!useWechatPicker) return;
|
||||
weixinSdk.reset();
|
||||
void weixinSdk.init().catch(() => {
|
||||
/* 点击上传时会再次初始化 */
|
||||
});
|
||||
}, [useWechatPicker]);
|
||||
|
||||
async function persistUpload(file: File) {
|
||||
if (!file.size) {
|
||||
@@ -95,60 +64,21 @@ export default function OssUploadField({
|
||||
}
|
||||
}
|
||||
|
||||
async function pickWechatImage() {
|
||||
setUploading(true);
|
||||
setError('');
|
||||
try {
|
||||
weixinSdk.reset();
|
||||
await weixinSdk.init();
|
||||
// 选图 + 上传须在同一个队列任务内完成,避免嵌套 enqueueUpload 死锁
|
||||
await enqueueUpload(async () => {
|
||||
const files = await weixinSdk.chooseImages({
|
||||
count: 1,
|
||||
sourceType: ['album', 'camera'],
|
||||
});
|
||||
if (!files?.[0]) return;
|
||||
await persistUpload(files[0]);
|
||||
});
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : '无法打开相册';
|
||||
if (/cancel/i.test(msg)) return;
|
||||
throw e;
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function pickFile() {
|
||||
function pickFile() {
|
||||
if (uploading) return;
|
||||
setError('');
|
||||
|
||||
if (useWechatPicker) {
|
||||
try {
|
||||
await pickWechatImage();
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : '无法打开相册';
|
||||
if (/cancel/i.test(msg)) return;
|
||||
const formatted = formatWechatUploadError(e);
|
||||
setError(`${formatted},可改从系统相册选择`);
|
||||
setShowAlbumFallback(true);
|
||||
inputRef.current?.click();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
inputRef.current?.click();
|
||||
}
|
||||
|
||||
const isImage = mediaType === 'IMAGE' && value;
|
||||
const isFile = mediaType === 'FILE' && value;
|
||||
const busy = uploading;
|
||||
const pickerLabel = label ?? (useWechatPicker ? '拍照 / 从相册选择' : '点击上传');
|
||||
const pickerLabel = label ?? (mediaType === 'IMAGE' ? '从系统相册选择' : '点击上传');
|
||||
|
||||
const triggerProps = {
|
||||
type: 'button' as const,
|
||||
disabled: busy,
|
||||
onClick: () => void pickFile(),
|
||||
onClick: pickFile,
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -162,7 +92,6 @@ export default function OssUploadField({
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
setShowAlbumFallback(false);
|
||||
void uploadSelectedFile(file);
|
||||
}
|
||||
}}
|
||||
@@ -191,24 +120,13 @@ export default function OssUploadField({
|
||||
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 }}>
|
||||
{busy ? 'hourglass_top' : 'add_a_photo'}
|
||||
{busy ? 'hourglass_top' : 'photo_library'}
|
||||
</span>
|
||||
<span className="text-primary" style={{ fontWeight: 500 }}>
|
||||
{uploading ? '上传中…' : pickerLabel}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
{showAlbumFallback && useWechatPicker && (
|
||||
<button
|
||||
type="button"
|
||||
className="partner-btn-outline"
|
||||
style={{ marginTop: 8, width: '100%' }}
|
||||
disabled={busy}
|
||||
onClick={() => inputRef.current?.click()}
|
||||
>
|
||||
从系统相册选择
|
||||
</button>
|
||||
)}
|
||||
{error && <p className="partner-form-error" role="alert">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
|
||||
@@ -17,8 +17,6 @@ import { checkStorePhoneAvailable, sendStorePhoneSms } from '../lib/storePhone';
|
||||
|
||||
import { fetchPartnerCities, type OpenCityOption } from '../lib/upload';
|
||||
|
||||
import { isWechatEnv, weixinSdk } from '../lib/weixin';
|
||||
|
||||
import { usePartnerSession } from '../contexts/PartnerSessionContext';
|
||||
|
||||
import {
|
||||
@@ -79,16 +77,10 @@ export default function StoreCreatePage() {
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { account, refresh } = usePartnerSession();
|
||||
const { account } = usePartnerSession();
|
||||
|
||||
const accountId = account?.id;
|
||||
|
||||
const wechatReady = !!account?.hasWechat;
|
||||
|
||||
const handleWechatReadyChange = useCallback(() => {
|
||||
void refresh();
|
||||
}, [refresh]);
|
||||
|
||||
const [params, setParams] = useSearchParams();
|
||||
|
||||
const saved = loadStoreDraft(accountId);
|
||||
@@ -142,17 +134,6 @@ export default function StoreCreatePage() {
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (step !== 2 || !isWechatEnv()) return;
|
||||
void refresh();
|
||||
weixinSdk.reset();
|
||||
void weixinSdk.init().catch(() => {
|
||||
/* OssUploadField 点击时会再次初始化 */
|
||||
});
|
||||
}, [step, refresh]);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
void fetchPartnerCities()
|
||||
@@ -895,13 +876,9 @@ export default function StoreCreatePage() {
|
||||
|
||||
value={form.coverUrl}
|
||||
|
||||
wechatReady={wechatReady}
|
||||
|
||||
onWechatReadyChange={handleWechatReadyChange}
|
||||
|
||||
onChange={(coverUrl) => patchForm({ coverUrl })}
|
||||
|
||||
label="点击或拖拽上传"
|
||||
label="从系统相册选择"
|
||||
|
||||
/>
|
||||
|
||||
@@ -931,10 +908,6 @@ export default function StoreCreatePage() {
|
||||
|
||||
value={url}
|
||||
|
||||
wechatReady={wechatReady}
|
||||
|
||||
onWechatReadyChange={handleWechatReadyChange}
|
||||
|
||||
onChange={(nextUrl) => patchEnvPhotoUrl(index, nextUrl)}
|
||||
|
||||
/>
|
||||
@@ -951,7 +924,7 @@ export default function StoreCreatePage() {
|
||||
|
||||
<h3 className="headline-md">签约合同 <span className="text-primary">*</span></h3>
|
||||
|
||||
<p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>拍照上传签约协议首页与盖章页</p>
|
||||
<p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>上传签约协议首页与盖章页</p>
|
||||
|
||||
<OssUploadField
|
||||
|
||||
@@ -963,10 +936,6 @@ export default function StoreCreatePage() {
|
||||
|
||||
value={form.contractUrl}
|
||||
|
||||
wechatReady={wechatReady}
|
||||
|
||||
onWechatReadyChange={handleWechatReadyChange}
|
||||
|
||||
onChange={(contractUrl) => patchForm({ contractUrl })}
|
||||
|
||||
label="上传合同副本"
|
||||
|
||||
@@ -47,7 +47,6 @@ export default function StoreDetailPage() {
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [mediaSaving, setMediaSaving] = useState(false);
|
||||
const [actionError, setActionError] = useState('');
|
||||
const [wechatReady, setWechatReady] = useState(false);
|
||||
|
||||
function applyStore(data: Record<string, unknown>) {
|
||||
setStore(data);
|
||||
@@ -284,10 +283,8 @@ export default function StoreDetailPage() {
|
||||
bizType="STORE_TITLE"
|
||||
mediaType="IMAGE"
|
||||
value={coverUrl}
|
||||
wechatReady={wechatReady}
|
||||
onWechatReadyChange={setWechatReady}
|
||||
onChange={setCoverUrl}
|
||||
label="点击更换门头照"
|
||||
label="从系统相册选择"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -336,8 +333,6 @@ export default function StoreDetailPage() {
|
||||
bizType="STORE_ENV"
|
||||
mediaType="IMAGE"
|
||||
value={url}
|
||||
wechatReady={wechatReady}
|
||||
onWechatReadyChange={setWechatReady}
|
||||
onChange={(nextUrl) => setEnvPhotoUrls((prev) => patchEnvPhotoAt(prev, index, nextUrl))}
|
||||
/>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user