Parcourir la source

地址增加省市区选择器-修复地址列表没显示

zbb il y a 3 mois
Parent
commit
9a8f8885cf
3 fichiers modifiés avec 47 ajouts et 38 suppressions
  1. 35 30
      app/address/edit.tsx
  2. 7 5
      app/address/index.tsx
  3. 5 3
      services/address.ts

+ 35 - 30
app/address/edit.tsx

@@ -15,6 +15,7 @@ import {
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { RegionPicker } from '@/components/RegionPicker';
 import { Images } from '@/constants/images';
 import { addAddress, Address, getAddressList, updateAddress } from '@/services/address';
 
@@ -33,6 +34,13 @@ export default function AddressEditScreen() {
   const [district, setDistrict] = useState('');
   const [address, setAddress] = useState('');
   const [isDefault, setIsDefault] = useState(false);
+  const [regionVisible, setRegionVisible] = useState(false);
+
+  const handleRegionSelect = (p: string, c: string, d: string) => {
+    setProvince(p);
+    setCity(c);
+    setDistrict(d);
+  };
 
   const loadData = useCallback(async () => {
     if (!id) return;
@@ -168,36 +176,15 @@ export default function AddressEditScreen() {
               </View>
 
               <View style={styles.formItem}>
-                <Text style={styles.label}>省份</Text>
-                <TextInput
-                  style={styles.input}
-                  value={province}
-                  onChangeText={setProvince}
-                  placeholder="请输入省份"
-                  placeholderTextColor="#999"
-                />
-              </View>
-
-              <View style={styles.formItem}>
-                <Text style={styles.label}>城市</Text>
-                <TextInput
-                  style={styles.input}
-                  value={city}
-                  onChangeText={setCity}
-                  placeholder="请输入城市"
-                  placeholderTextColor="#999"
-                />
-              </View>
-
-              <View style={styles.formItem}>
-                <Text style={styles.label}>区/县</Text>
-                <TextInput
-                  style={styles.input}
-                  value={district}
-                  onChangeText={setDistrict}
-                  placeholder="请输入区/县(选填)"
-                  placeholderTextColor="#999"
-                />
+                <Text style={styles.label}>所在地区</Text>
+                <TouchableOpacity
+                  style={styles.selector}
+                  onPress={() => setRegionVisible(true)}
+                >
+                  <Text style={[styles.selectorText, !province && styles.placeholderText]}>
+                    {province ? `${province} ${city} ${district}` : '请选择省/市/区'}
+                  </Text>
+                </TouchableOpacity>
               </View>
 
               <View style={styles.formItem}>
@@ -240,6 +227,11 @@ export default function AddressEditScreen() {
           </TouchableOpacity>
         </View>
       </ImageBackground>
+      <RegionPicker
+        visible={regionVisible}
+        onClose={() => setRegionVisible(false)}
+        onSelect={handleRegionSelect}
+      />
     </View>
   );
 }
@@ -309,6 +301,19 @@ const styles = StyleSheet.create({
     color: '#333',
     fontSize: 14,
   },
+  selector: {
+    backgroundColor: 'rgba(255,255,255,0.8)',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+  },
+  selectorText: {
+    fontSize: 14,
+    color: '#333',
+  },
+  placeholderText: {
+    color: '#999',
+  },
   textArea: {
     height: 80,
     textAlignVertical: 'top',

+ 7 - 5
app/address/index.tsx

@@ -1,5 +1,5 @@
-import { useLocalSearchParams, useRouter } from 'expo-router';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useFocusEffect, useLocalSearchParams, useRouter } from 'expo-router';
+import React, { useCallback, useState } from 'react';
 import {
     ActivityIndicator,
     Alert,
@@ -35,9 +35,11 @@ export default function AddressListScreen() {
     setLoading(false);
   }, []);
 
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
+  useFocusEffect(
+    useCallback(() => {
+      loadData();
+    }, [loadData])
+  );
 
   // 选择地址
   const selectAddress = (item: Address) => {

+ 5 - 3
services/address.ts

@@ -51,8 +51,9 @@ export const getDefaultAddress = async (): Promise<Address | null> => {
 
 // 获取地址列表
 export const getAddressList = async (size = 100): Promise<Address[]> => {
-  const res = await get<{ records: Address[] }>(apis.LIST, { size });
-  return res.data?.records || [];
+  const res = await get<Address[]>(apis.LIST, { size });
+  // API returns array directly in data
+  return Array.isArray(res.data) ? res.data : (res.data as any)?.records || [];
 };
 
 // 添加地址
@@ -84,7 +85,8 @@ export const updateOrderAddress = async (params: { tradeNo: string; addressBookI
 
 // 获取地区数据
 export const getArea = async (pid?: number): Promise<AreaItem[]> => {
-  const res = await get<AreaItem[]>(apis.GET_AREA, pid ? { pid } : { pid: 1 });
+  const params = pid !== undefined ? { pid } : { pid: 0 }; // Default to 0 if undefined, allow 0 if passed
+  const res = await get<AreaItem[]>(apis.GET_AREA, params);
   return res.data || [];
 };