瀏覽代碼

♻️ refactor(address-edit): 重构地址编辑页面组件和逻辑

- 移除未使用的cityClient导入,精简依赖
- 删除省份、城市、区县相关的状态管理和数据获取逻辑
- 引入CitySelector组件替代手动实现的地区选择功能
- 优化表单字段布局,将详细地址和默认地址选项整合到表单中
- 简化地区选择事件处理,通过CitySelector统一管理地区变更
- 移除冗余的useEffect钩子,减少不必要的数据加载和状态更新

✨ feat(address-edit): 增强地址编辑功能

- 添加设为默认地址的开关选项
- 优化详细地址输入框的占位提示文本
- 改进地区选择器的用户界面和交互体验
- 统一表单提交按钮的状态管理,添加加载中提示

💄 style(address-edit): 优化页面布局和样式

- 调整表单字段间距和排版,提升视觉层次感
- 改进按钮样式和状态显示
- 优化标签和输入框的对齐方式
yourname 3 月之前
父節點
當前提交
28426da4d9
共有 1 個文件被更改,包括 66 次插入100 次删除
  1. 66 100
      mini/src/pages/address-edit/index.tsx

+ 66 - 100
mini/src/pages/address-edit/index.tsx

@@ -5,7 +5,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { useState, useEffect } from 'react'
 import Taro from '@tarojs/taro'
-import { deliveryAddressClient, cityClient } from '@/api'
+import { deliveryAddressClient } from '@/api'
 import { InferResponseType, InferRequestType } from 'hono'
 import { Navbar } from '@/components/ui/navbar'
 import { Card } from '@/components/ui/card'
@@ -13,6 +13,7 @@ import { Button } from '@/components/ui/button'
 import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { useAuth } from '@/utils/auth'
+import { CitySelector } from '@/components/ui/city-selector'
 
 type Address = InferResponseType<typeof deliveryAddressClient[':id']['$get'], 200>
 type CreateAddressRequest = InferRequestType<typeof deliveryAddressClient.$post>['json']
@@ -34,9 +35,6 @@ export default function AddressEditPage() {
   const { user } = useAuth()
   const queryClient = useQueryClient()
   const [addressId, setAddressId] = useState<number | null>(null)
-  const [provinces, setProvinces] = useState<any[]>([])
-  const [cities, setCities] = useState<any[]>([])
-  const [districts, setDistricts] = useState<any[]>([])
 
   // 获取地址ID
   useEffect(() => {
@@ -62,54 +60,6 @@ export default function AddressEditPage() {
     enabled: !!addressId,
   })
 
-  // 获取省份
-  const { data: provinceData } = useQuery({
-    queryKey: ['provinces'],
-    queryFn: async () => {
-      const response = await cityClient.$get({
-        query: {
-          page: 1,
-          pageSize: 100,
-          filters: JSON.stringify({ parentId: 0 })
-        }
-      })
-      if (response.status !== 200) {
-        throw new Error('获取省份失败')
-      }
-      return response.json()
-    }
-  })
-
-  // 获取城市
-  const fetchCities = async (provinceId: number) => {
-    const response = await cityClient.$get({
-      query: {
-        page: 1,
-        pageSize: 100,
-        filters: JSON.stringify({ parentId: provinceId })
-      }
-    })
-    if (response.status !== 200) {
-      throw new Error('获取城市失败')
-    }
-    return response.json()
-  }
-
-  // 获取区县
-  const fetchDistricts = async (cityId: number) => {
-    const response = await cityClient.$get({
-      query: {
-        page: 1,
-        pageSize: 100,
-        filters: JSON.stringify({ parentId: cityId })
-      }
-    })
-    if (response.status !== 200) {
-      throw new Error('获取区县失败')
-    }
-    return response.json()
-  }
-
   // 表单设置
   const form = useForm<AddressFormData>({
     resolver: zodResolver(addressSchema),
@@ -184,49 +134,13 @@ export default function AddressEditPage() {
     }
   })
 
-  // 处理省份变化
-  const handleProvinceChange = async (provinceId: number) => {
-    if (provinceId) {
-      const response = await fetchCities(provinceId)
-      setCities(response.data || [])
-      setDistricts([])
-      form.setValue('city', 0)
-      form.setValue('district', 0)
-    }
+  // 处理地区变化
+  const handleCityChange = (provinceId: number, cityId: number, districtId: number) => {
+    form.setValue('province', provinceId)
+    form.setValue('city', cityId)
+    form.setValue('district', districtId)
   }
 
-  // 处理城市变化
-  const handleCityChange = async (cityId: number) => {
-    if (cityId) {
-      const response = await fetchDistricts(cityId)
-      setDistricts(response.data || [])
-      form.setValue('district', 0)
-    }
-  }
-
-  // 初始化省份
-  useEffect(() => {
-    if (provinceData?.data) {
-      setProvinces(provinceData.data)
-    }
-  }, [provinceData])
-
-  // 加载城市数据
-  useEffect(() => {
-    const provinceId = form.watch('province')
-    if (provinceId) {
-      handleProvinceChange(provinceId)
-    }
-  }, [form.watch('province')])
-
-  // 加载区县数据
-  useEffect(() => {
-    const cityId = form.watch('city')
-    if (cityId) {
-      handleCityChange(cityId)
-    }
-  }, [form.watch('city')])
-
   const onSubmit = (data: AddressFormData) => {
     saveAddressMutation.mutate(data)
   }
@@ -271,14 +185,66 @@ export default function AddressEditPage() {
                     )}
                   />
 
+                  <View className="mb-4">
+                    <Text className="text-sm font-medium text-gray-700 mb-2">所在地区</Text>
+                    <CitySelector
+                      provinceValue={form.watch('province')}
+                      cityValue={form.watch('city')}
+                      districtValue={form.watch('district')}
+                      onProvinceChange={(value) => form.setValue('province', value)}
+                      onCityChange={(value) => form.setValue('city', value)}
+                      onDistrictChange={(value) => form.setValue('district', value)}
+                      showLabels={false}
+                    />
+                  </View>
+
                   <FormField
-                    name="province"
+                    name="address"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>省份</FormLabel>
+                        <FormLabel>详细地址</FormLabel>
                         <FormControl>
-                          <picker
-                            mode="selector"
-                            range={provinces}
-                            range-key="name"
-                            value={provin
+                          <Input 
+                            placeholder="请输入详细地址,如街道、门牌号等" 
+                            {...field} 
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    name="isDefault"
+                    render={({ field }) => (
+                      <FormItem>
+                        <View className="flex items-center justify-between">
+                          <FormLabel>设为默认地址</FormLabel>
+                          <FormControl>
+                            <switch
+                              checked={field.value}
+                              onChange={field.onChange}
+                              color="#1976D2"
+                            />
+                          </FormControl>
+                        </View>
+                      </FormItem>
+                    )}
+                  />
+                </View>
+              </Card>
+
+              <Button
+                className="w-full"
+                onClick={form.handleSubmit(onSubmit)}
+                disabled={saveAddressMutation.isPending}
+              >
+                {saveAddressMutation.isPending ? '保存中...' : '保存地址'}
+              </Button>
+            </View>
+          </Form>
+        </View>
+      </ScrollView>
+    </View>
+  )
+}