瀏覽代碼

✨ feat(city-selector): add street selection functionality

- add street selector component with proper layout and styling
- implement street data display logic with placeholder texts
- update city and district placeholder texts for better user guidance
- maintain consistent UI style with existing province/city/district selectors
yourname 3 月之前
父節點
當前提交
0646a5abb4
共有 1 個文件被更改,包括 35 次插入3 次删除
  1. 35 3
      mini/src/components/ui/city-selector.tsx

+ 35 - 3
mini/src/components/ui/city-selector.tsx

@@ -244,7 +244,7 @@ export const CitySelector: React.FC<CitySelectorProps> = ({
           >
             <View className="flex items-center justify-between px-3 py-2 border border-gray-300 rounded-lg bg-white">
               <Text className="text-gray-900">
-                {cities?.find(c => c.id === cityValue)?.name || 
+                {cities?.find(c => c.id === cityValue)?.name ||
                  (!provinceValue ? '请先选择省份' : '请选择城市')}
               </Text>
               <View className="i-heroicons-chevron-down-20-solid w-5 h-5 text-gray-400" />
@@ -267,5 +267,37 @@ export const CitySelector: React.FC<CitySelectorProps> = ({
           >
             <View className="flex items-center justify-between px-3 py-2 border border-gray-300 rounded-lg bg-white">
               <Text className="text-gray-900">
-                {districts?.find(d => d.id === districtValue)?.name || 
-                 (!cityValue
+                {districts?.find(d => d.id === districtValue)?.name ||
+                 (!cityValue ? '请先选择城市' : '请选择区县')}
+              </Text>
+              <View className="i-heroicons-chevron-down-20-solid w-5 h-5 text-gray-400" />
+            </View>
+          </Picker>
+        </View>
+
+        {/* 街道选择器 */}
+        <View>
+          {showLabels && (
+            <View className="text-sm text-gray-600 mb-1">街道</View>
+          )}
+          <Picker
+            mode="selector"
+            range={towns || []}
+            rangeKey="name"
+            value={getTownIndex()}
+            onChange={handleTownChange}
+            disabled={disabled || !towns?.length || !districtValue}
+          >
+            <View className="flex items-center justify-between px-3 py-2 border border-gray-300 rounded-lg bg-white">
+              <Text className="text-gray-900">
+                {towns?.find(t => t.id === townValue)?.name ||
+                 (!districtValue ? '请先选择区县' : '请选择街道')}
+              </Text>
+              <View className="i-heroicons-chevron-down-20-solid w-5 h-5 text-gray-400" />
+            </View>
+          </Picker>
+        </View>
+      </View>
+    </View>
+  )
+}