168 lines
4.4 KiB
Markdown
168 lines
4.4 KiB
Markdown
# Order Detail Address Display Fix (订单详情地址显示修复)
|
|
|
|
## Issue
|
|
The order detail view was only showing the detailed address (`shipping_address`) without displaying the province, city, and district information.
|
|
|
|
## Changes Made
|
|
|
|
### 1. Added Computed Property for Full Address
|
|
**File**: `admin/src/views/consumer/prescription/order_list.vue`
|
|
|
|
Added `detailFullAddress` computed property that combines all address components:
|
|
|
|
```typescript
|
|
// 完整收货地址（省市区 + 详细地址）
|
|
const detailFullAddress = computed(() => {
|
|
const d = detailData.value
|
|
if (!d) return '—'
|
|
|
|
const parts = []
|
|
if (d.shipping_province) parts.push(d.shipping_province)
|
|
if (d.shipping_city) parts.push(d.shipping_city)
|
|
if (d.shipping_district) parts.push(d.shipping_district)
|
|
if (d.shipping_address) parts.push(d.shipping_address)
|
|
|
|
return parts.length > 0 ? parts.join(' ') : '—'
|
|
})
|
|
```
|
|
|
|
### 2. Updated Display Template
|
|
Changed the shipping address display from:
|
|
```vue
|
|
<el-descriptions-item label="收货地址" :span="2">
|
|
{{ detailData.shipping_address }}
|
|
</el-descriptions-item>
|
|
```
|
|
|
|
To:
|
|
```vue
|
|
<el-descriptions-item label="收货地址" :span="2">
|
|
{{ detailFullAddress }}
|
|
</el-descriptions-item>
|
|
```
|
|
|
|
## Display Format
|
|
|
|
### Before:
|
|
```
|
|
收货地址: 顶顶顶
|
|
```
|
|
|
|
### After:
|
|
```
|
|
收货地址: 北京市 北京市 丰台区 顶顶顶
|
|
```
|
|
|
|
## Logic
|
|
|
|
The `detailFullAddress` computed property:
|
|
1. Checks if `detailData` exists
|
|
2. Collects non-empty address components in order:
|
|
- `shipping_province` (省)
|
|
- `shipping_city` (市)
|
|
- `shipping_district` (区/县)
|
|
- `shipping_address` (详细地址)
|
|
3. Joins them with spaces
|
|
4. Returns '—' if no address components exist
|
|
|
|
## Examples
|
|
|
|
### Complete Address:
|
|
```
|
|
Input:
|
|
shipping_province: "四川省"
|
|
shipping_city: "成都市"
|
|
shipping_district: "武侯区"
|
|
shipping_address: "天府大道中段666号"
|
|
|
|
Output:
|
|
四川省 成都市 武侯区 天府大道中段666号
|
|
```
|
|
|
|
### Partial Address (Missing Province):
|
|
```
|
|
Input:
|
|
shipping_province: null
|
|
shipping_city: "成都市"
|
|
shipping_district: "武侯区"
|
|
shipping_address: "天府大道中段666号"
|
|
|
|
Output:
|
|
成都市 武侯区 天府大道中段666号
|
|
```
|
|
|
|
### Only Detailed Address:
|
|
```
|
|
Input:
|
|
shipping_province: null
|
|
shipping_city: null
|
|
shipping_district: null
|
|
shipping_address: "天府大道中段666号"
|
|
|
|
Output:
|
|
天府大道中段666号
|
|
```
|
|
|
|
### No Address:
|
|
```
|
|
Input:
|
|
shipping_province: null
|
|
shipping_city: null
|
|
shipping_district: null
|
|
shipping_address: null
|
|
|
|
Output:
|
|
—
|
|
```
|
|
|
|
## Testing Steps
|
|
|
|
### 1. Test Complete Address Display
|
|
1. Open an order that has province/city/district data
|
|
2. Check the "收货地址" field in the detail view
|
|
3. Verify it shows: `省 市 区 详细地址`
|
|
|
|
### 2. Test Legacy Orders (No Region Data)
|
|
1. Open an old order that only has `shipping_address`
|
|
2. Verify it still displays the detailed address correctly
|
|
3. Should show just the detailed address without extra spaces
|
|
|
|
### 3. Test Empty Address
|
|
1. Create an order without any address information
|
|
2. Verify it displays "—" instead of empty string
|
|
|
|
### 4. Test Different Address Combinations
|
|
Test various combinations:
|
|
- Full address (province + city + district + detail)
|
|
- City + district + detail (no province)
|
|
- District + detail (no province/city)
|
|
- Detail only (no region data)
|
|
- Empty (no data at all)
|
|
|
|
## Related Files
|
|
|
|
### Frontend:
|
|
- `admin/src/views/consumer/prescription/order_list.vue`
|
|
- Added `detailFullAddress` computed property
|
|
- Updated shipping address display template
|
|
|
|
### Backend:
|
|
- `server/app/adminapi/logic/tcm/PrescriptionOrderLogic.php`
|
|
- Already returns `shipping_province`, `shipping_city`, `shipping_district` in detail response
|
|
|
|
### Database:
|
|
- `tcm_prescription_order` table
|
|
- Columns: `shipping_province`, `shipping_city`, `shipping_district`, `shipping_address`
|
|
|
|
## Benefits
|
|
|
|
✅ **Complete Information**: Users can now see the full address including province/city/district
|
|
✅ **Better Readability**: Address components are clearly separated with spaces
|
|
✅ **Backward Compatible**: Works with legacy orders that only have detailed address
|
|
✅ **Graceful Handling**: Shows "—" when no address data exists
|
|
✅ **Flexible**: Handles partial address data (missing province, city, or district)
|
|
|
|
## Summary
|
|
|
|
The order detail view now displays the complete shipping address including province, city, district, and detailed address, providing users with full address information at a glance!
|