feat(auth): upload proof materials image before verification submission
All checks were successful
Frontend CI / build-and-push-web (push) Successful in 3m0s
Frontend CI / ota-android (push) Successful in 10m30s
Frontend CI / build-android-apk (push) Successful in 50m44s

Add image upload functionality to the verification form that uploads local proof material images (file://, content://, blob: URIs) to the server and uses the returned URL for verification submission. Also add proper upload state tracking to disable form inputs during upload.
This commit is contained in:
lafay
2026-04-10 01:10:55 +08:00
parent be8f6de8cf
commit 9bbed8cf5e

View File

@@ -23,6 +23,7 @@ import * as ImagePicker from 'expo-image-picker';
import { useAppColors, type AppColors } from '../../theme'; import { useAppColors, type AppColors } from '../../theme';
import { useVerificationStore } from '../../stores/verificationStore'; import { useVerificationStore } from '../../stores/verificationStore';
import { showPrompt } from '../../services/promptService'; import { showPrompt } from '../../services/promptService';
import { uploadService } from '../../services/uploadService';
import type { UserIdentity } from '../../types/dto'; import type { UserIdentity } from '../../types/dto';
const THEME_COLORS = { const THEME_COLORS = {
@@ -45,6 +46,7 @@ export const VerificationFormScreen: React.FC = () => {
const params = useLocalSearchParams<{ identity?: string }>(); const params = useLocalSearchParams<{ identity?: string }>();
const { submitVerification, isLoading } = useVerificationStore(); const { submitVerification, isLoading } = useVerificationStore();
const [uploading, setUploading] = useState(false);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
real_name: '', real_name: '',
student_id: '', student_id: '',
@@ -110,13 +112,34 @@ export const VerificationFormScreen: React.FC = () => {
const handleSubmit = async () => { const handleSubmit = async () => {
if (!validateForm()) return; if (!validateForm()) return;
setUploading(true);
try {
let proofMaterialsUrl = formData.proof_materials;
if (formData.proof_materials.startsWith('file://') || formData.proof_materials.startsWith('content://') || formData.proof_materials.startsWith('blob:')) {
const uploadResult = await uploadService.uploadImage({
uri: formData.proof_materials,
});
if (!uploadResult || !uploadResult.url) {
showPrompt({
title: '上传失败',
message: '证明材料图片上传失败,请重试',
type: 'error',
});
return;
}
proofMaterialsUrl = uploadResult.url;
}
const success = await submitVerification({ const success = await submitVerification({
identity, identity,
real_name: formData.real_name.trim(), real_name: formData.real_name.trim(),
student_id: formData.student_id.trim() || undefined, student_id: formData.student_id.trim() || undefined,
employee_id: formData.employee_id.trim() || undefined, employee_id: formData.employee_id.trim() || undefined,
department: formData.department.trim() || undefined, department: formData.department.trim() || undefined,
proof_materials: formData.proof_materials, proof_materials: proofMaterialsUrl,
}); });
if (success) { if (success) {
@@ -134,6 +157,9 @@ export const VerificationFormScreen: React.FC = () => {
type: 'error', type: 'error',
}); });
} }
} finally {
setUploading(false);
}
}; };
const renderInput = ( const renderInput = (
@@ -169,7 +195,7 @@ export const VerificationFormScreen: React.FC = () => {
}} }}
keyboardType={keyboardType} keyboardType={keyboardType}
maxLength={maxLength} maxLength={maxLength}
editable={!isLoading} editable={!isLoading && !uploading}
/> />
</View> </View>
{error && <Text style={styles.errorText}>{error}</Text>} {error && <Text style={styles.errorText}>{error}</Text>}
@@ -245,7 +271,7 @@ export const VerificationFormScreen: React.FC = () => {
style={[styles.uploadButton, errors.proof_materials && styles.uploadButtonError]} style={[styles.uploadButton, errors.proof_materials && styles.uploadButtonError]}
onPress={handlePickImage} onPress={handlePickImage}
activeOpacity={0.8} activeOpacity={0.8}
disabled={isLoading} disabled={isLoading || uploading}
> >
{formData.proof_materials ? ( {formData.proof_materials ? (
<Image <Image
@@ -271,12 +297,12 @@ export const VerificationFormScreen: React.FC = () => {
</View> </View>
<TouchableOpacity <TouchableOpacity
style={[styles.submitButton, isLoading && styles.submitButtonDisabled]} style={[styles.submitButton, (isLoading || uploading) && styles.submitButtonDisabled]}
onPress={handleSubmit} onPress={handleSubmit}
activeOpacity={0.9} activeOpacity={0.9}
disabled={isLoading} disabled={isLoading || uploading}
> >
{isLoading ? ( {(isLoading || uploading) ? (
<ActivityIndicator size="small" color="#FFF" /> <ActivityIndicator size="small" color="#FFF" />
) : ( ) : (
<Text style={styles.submitButtonText}></Text> <Text style={styles.submitButtonText}></Text>