|
|
@@ -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>
|
|
|
+ )
|
|
|
+}
|