zyt/ORDER_DETAIL_ADDRESS_DISPLAY_FIX.md

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:

// 完整收货地址（省市区 + 详细地址）
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:

<el-descriptions-item label="收货地址" :span="2">
    {{ detailData.shipping_address }}
</el-descriptions-item>

To:

<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!