From e4e5b082f4a2147c10e778ddfbf3ae4f13e8c47c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=A7=E8=84=8F=E7=8B=BC?= <786316265@qq.com> Date: Thu, 28 Aug 2025 14:17:48 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9D=80=E6=8E=A5=E5=8F=A3=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Address.vue | 237 +++++++++++++++++++++++++++++------------- 1 file changed, 164 insertions(+), 73 deletions(-) diff --git a/src/views/Address.vue b/src/views/Address.vue index e4c9dde..ef4f39c 100644 --- a/src/views/Address.vue +++ b/src/views/Address.vue @@ -37,7 +37,7 @@
设为默认 @@ -123,8 +123,8 @@ :options="regionOptions" placeholder="请选择省市区" style="width: 100%" - :props="{ expandTrigger: 'hover' }" - :show-all-levels="false" + :props="{ expandTrigger: 'hover', value:'code' }" + :show-all-levels="true" :collapse-tags="true" :max-collapse-tags="1" :teleported="false" @@ -182,6 +182,7 @@ const addresses = ref([]) const showAddDialog = ref(false) const editingAddress = ref(null) const addressFormRef = ref(null) +const addressList = ref([]) // 地址表单数据 const addressForm = reactive({ @@ -220,74 +221,88 @@ const addressRules = { // 方法 const loadRegionOptions = async () => { try { - const response = await api.get('/regions') - if (response.data.success) { - regionOptions.value = response.data.data.regions || [] - } else { - throw new Error(response.data.message || '获取省市区数据失败') + // 获取所有省份 + const provincesResponse = await api.get('/regions/provinces') + console.log('获取省份数据:', provincesResponse) + if (!provincesResponse.data.success) { + throw new Error(provincesResponse.data.message || '获取省份数据失败') } + + regionOptions.value= provincesResponse.data.data || [] + console.log('获取省份数据:', regionOptions.value); + } catch (error) { + console.error('获取省市区数据失败:', error) ElMessage.error(error.message || '获取省市区数据失败') - // 如果API获取失败，使用默认数据 + + // 如果API获取失败，使用浙江省数据作为默认数据 + await loadFallbackRegionData() + } +} + +// 回退方案：加载浙江省数据 +const loadFallbackRegionData = async () => { + try { + const zhejiangResponse = await api.get('/regions/zhejiang') + if (zhejiangResponse.data.success) { + const zhejiangData = zhejiangResponse.data.data || [] + // 将浙江省数据转换为级联选择器格式 + const cityMap = new Map() + + zhejiangData.forEach(item => { + if (!cityMap.has(item.city_name)) { + cityMap.set(item.city_name, { + value: item.city_name, + label: item.city_name, + children: [] + }) + } + + // 添加区县数据（移除is_available过滤条件以确保所有区县都显示） + if (item.district_name) { + cityMap.get(item.city_name).children.push({ + value: item.district_name, + label: item.district_name, + code: item.region_code + }) + } + }) + + regionOptions.value = [{ + value: '浙江省', + label: '浙江省', + children: Array.from(cityMap.values()) + }] + console.log('已加载浙江省地区数据作为默认选项') + } else { + throw new Error('获取浙江省数据也失败') + } + } catch (fallbackError) { + console.error('浙江省数据获取失败，使用硬编码数据:', fallbackError) + // 最终回退到硬编码数据 regionOptions.value = [ { - value: '北京市', - label: '北京市', + value: '浙江省', + label: '浙江省', children: [ { - value: '北京市', - label: '北京市', + value: '宁波市', + label: '宁波市', children: [ - { value: '东城区', label: '东城区' }, - { value: '西城区', label: '西城区' }, - { value: '朝阳区', label: '朝阳区' }, - { value: '丰台区', label: '丰台区' }, - { value: '石景山区', label: '石景山区' }, - { value: '海淀区', label: '海淀区' } - ] - } - ] - }, - { - value: '上海市', - label: '上海市', - children: [ - { - value: '上海市', - label: '上海市', - children: [ - { value: '黄浦区', label: '黄浦区' }, - { value: '徐汇区', label: '徐汇区' }, - { value: '长宁区', label: '长宁区' }, - { value: '静安区', label: '静安区' }, - { value: '普陀区', label: '普陀区' }, - { value: '虹口区', label: '虹口区' } - ] - } - ] - }, - { - value: '广东省', - label: '广东省', - children: [ - { - value: '广州市', - label: '广州市', - children: [ - { value: '天河区', label: '天河区' }, - { value: '越秀区', label: '越秀区' }, - { value: '荔湾区', label: '荔湾区' }, - { value: '海珠区', label: '海珠区' } + { value: '鄞州区', label: '鄞州区' }, + { value: '海曙区', label: '海曙区' }, + { value: '江北区', label: '江北区' }, + { value: '北仑区', label: '北仑区' } ] }, { - value: '深圳市', - label: '深圳市', + value: '杭州市', + label: '杭州市', children: [ - { value: '福田区', label: '福田区' }, - { value: '罗湖区', label: '罗湖区' }, - { value: '南山区', label: '南山区' }, - { value: '宝安区', label: '宝安区' } + { value: '西湖区', label: '西湖区' }, + { value: '上城区', label: '上城区' }, + { value: '拱墅区', label: '拱墅区' }, + { value: '余杭区', label: '余杭区' } ] } ] @@ -300,10 +315,30 @@ const loadAddresses = async () => { try { loading.value = true const response = await api.get('/addresses') + console.log('获取地址列表响应:', response) if (response.data.success) { - addresses.value = response.data.data.addresses || [] + // 根据接口文档转换数据格式 + addressList.value = response.data.data || [] + addresses.value = addressList.value.map(addr => ({ + id: addr.id, + recipientName: addr.receiver_name, + recipientPhone: addr.receiver_phone, + province: addr.province_name, + city: addr.city_name, + district: addr.district_name, + detailAddress: addr.detailed_address, + isDefault: addr.is_default, + labelName: addr.label_name, + labelColor: addr.label_color, + city_code:addr.city_code, + province_code:addr.province_code, + district_code:addr.district_code, + ...addr + })) } else { + // 保留原有的测试数据作为回退 addresses.value = [{ + id: 1, recipientName: '张三', recipientPhone: '11111111111', province: '浙江省', @@ -311,7 +346,8 @@ const loadAddresses = async () => { district: '鄞州区', detailAddress: '宁波外经合作大厦', isDefault: true - },{ + },{ + id: 2, recipientName: '李四', recipientPhone: '22222222222', province: '浙江省', @@ -319,7 +355,7 @@ const loadAddresses = async () => { district: '鄞州区', detailAddress: '四明东路', isDefault: false - }] + }] throw new Error(response.data.message || '获取地址列表失败') } } catch (error) { @@ -330,6 +366,8 @@ const loadAddresses = async () => { } const handleRegionChange = (value) => { + console.log(value); + if (value && value.length === 3) { addressForm.province = value[0] addressForm.city = value[1] @@ -337,6 +375,7 @@ const handleRegionChange = (value) => { } } + const editAddress = (address) => { editingAddress.value = address addressForm.recipientName = address.recipientName @@ -357,14 +396,15 @@ const saveAddress = async () => { await addressFormRef.value.validate() saving.value = true + // 根据接口文档构建请求数据 const addressData = { - recipientName: addressForm.recipientName, - recipientPhone: addressForm.recipientPhone, - province: addressForm.province, - city: addressForm.city, - district: addressForm.district, - detailAddress: addressForm.detailAddress, - isDefault: addressForm.isDefault + recipient_name: addressForm.recipientName, + phone: addressForm.recipientPhone, + province_code: addressForm.province, + city_code: addressForm.city, + district_code: addressForm.district, + detailed_address: addressForm.detailAddress, + is_default: addressForm.isDefault } let response @@ -373,6 +413,7 @@ const saveAddress = async () => { response = await api.put(`/addresses/${editingAddress.value.id}`, addressData) } else { // 新增地址 + console.log('表单原始数据:', addressForm) response = await api.post('/addresses', addressData) } @@ -406,6 +447,7 @@ const deleteAddress = async (addressId) => { ) const response = await api.delete(`/addresses/${addressId}`) + console.log("删除id",addressId) if (response.data.success) { ElMessage.success('地址删除成功') await loadAddresses() @@ -420,17 +462,66 @@ const deleteAddress = async (addressId) => { } const setDefaultAddress = async (addressId) => { + console.log(addressId,addresses.value[addressId]); + let addressDataTest = addresses.value[addressId] + addressDataTest.isDefault = true + const addressData = { + recipient_name: addressDataTest.receiver_name, + phone: addressDataTest.receiver_phone, + province_code: addressDataTest.province, + city_code: addressDataTest.city, + district_code: addressDataTest.district, + detailed_address: addressDataTest.detailAddress, + is_default: addressDataTest.isDefault + } + console.log('addressDataTest',addressDataTest); + console.log('addressData',addressData); try { - const response = await api.put(`/addresses/${addressId}/default`) + const response = await api.put(`/addresses/${addressDataTest.id}`, addressData) if (response.data.success) { ElMessage.success('默认地址设置成功') await loadAddresses() } else { throw new Error(response.data.message || '设置默认地址失败') } - } catch (error) { - ElMessage.error(error.message || '设置默认地址失败') + } catch (error) {console.log(error)} + return + // 从addresses列表中找到对应的地址信息 + const getDefaultAddress = () => { + for(add in addresses.value) + { + if(addresses.value[add].isDefault) + { + return addresses.value[add] + } + } + return null } + + + + console.log('getDefaultAddress', getDefaultAddress) + // const addressData = { + // recipient_name: addressList.value[0].receiver_name, + // phone: addressList.value[0].receiver_phone, + // province_code: addressList.value[0].province, + // city_code: addressList.value[0].city, + // district_code: addressList.value[0].district, + // detailed_address: targetAddress.detailAddress, + // is_default: true + // } + console.log('addresses', addresses.value) + console.log('targetaddress', targetAddress) + console.log('默认地址替换数据', addressData) + try { + const response = await api.put(`/addresses/${addressId}`, addressData) + if (response.data.success) { + ElMessage.success('默认地址设置成功') + await loadAddresses() + } else { + throw new Error(response.data.message || '设置默认地址失败') + } + } catch (error) {console.log(error)} } const cancelEdit = () => {