Enhance order detail page with unit price and discount features

- Added unit price and unit fields to the OrderDetail interface for better pricing clarity.
- Implemented discount calculation logic to display applicable discounts on the order detail page.
- Updated localization files to include new strings for unit price and remarks in English, Indonesian, and Chinese.
- Enhanced the UI to show unit price, discount information, and customer remarks, improving overall user experience.

app/pages/order/detail.vue

@@ -24,6 +24,8 @@ interface OrderDetail {
   avatar: string
   name: string
   productType: string
+  unitPrice: number
+  unit: string
   quantity: number
   orderNo: string
   time: string
@@ -32,6 +34,7 @@ interface OrderDetail {
   refundApply: boolean
   refundReason: string
   refundAttachments: FileAttachment[]
+  customerRemark: string
 }
 
 const route = useRoute()
@@ -76,6 +79,25 @@ const formatOrderTime = (timestamp: number) => {
   return dayjs(timestamp).tz().format('YYYY/MM/DD HH:mm:ss')
 }
 
+const hasDiscount = computed(() => {
+  const d = detail.value
+  if (!d)
+    return false
+  return d.total < d.unitPrice * d.quantity
+})
+
+const orderDiscountText = computed(() => {
+  const d = detail.value
+  if (!d)
+    return '-'
+  const originalTotal = d.unitPrice * d.quantity
+  if (d.total < originalTotal) {
+    const discount = originalTotal - d.total
+    return `-${discount.toLocaleString()}`
+  }
+  return '-'
+})
+
 const loadOrderDetail = async () => {
   const id = route.query.id as string | undefined
   if (!id)
@@ -96,14 +118,17 @@ const loadOrderDetail = async () => {
     avatar: order.avatar,
     name: order.nickname,
     productType: order.bizCategoryName,
+    unitPrice: order.price,
+    unit: order.unit || '',
     quantity: order.purchaseQty,
     orderNo: order.orderId,
     time: formatOrderTime(order.createTime),
-    total: order.price * order.purchaseQty,
+    total: order.totalAmount,
     star: order.star,
     refundApply: order.refundApply,
     refundReason: res.reason || '',
     refundAttachments: res.attachments || [],
+    customerRemark: order.customerRemark ?? '',
   }
 }
 
@@ -275,9 +300,39 @@ onMounted(() => {
               <dt>{{ t('order.detail.productType') }}</dt>
               <dd>{{ detail.productType }}</dd>
             </div>
+            <div class="order-detail-card__row">
+              <dt>{{ t('order.detail.unitPrice') }}</dt>
+              <dd>
+                <span
+                  class="order-detail-card__coin-sm"
+                  aria-hidden="true"
+                />
+                {{ detail.unitPrice.toLocaleString() }}
+              </dd>
+            </div>
             <div class="order-detail-card__row">
               <dt>{{ t('order.detail.quantity') }}</dt>
-              <dd>{{ detail.quantity }}</dd>
+              <dd>{{ detail.unit }} x{{ detail.quantity }}</dd>
+            </div>
+            <div
+              v-if="hasDiscount"
+              class="order-detail-card__row"
+            >
+              <dt>{{ t('order.detail.discount') }}</dt>
+              <dd>
+                <span
+                  class="order-detail-card__coin-sm"
+                  aria-hidden="true"
+                />
+                {{ orderDiscountText }}
+              </dd>
+            </div>
+            <div
+              v-if="detail.customerRemark"
+              class="order-detail-card__row"
+            >
+              <dt>{{ t('order.detail.remark') }}</dt>
+              <dd>{{ detail.customerRemark || t('order.detail.remarkEmpty') }}</dd>
             </div>
             <div class="order-detail-card__row">
               <dt>{{ t('order.detail.orderNo') }}</dt>
@@ -635,6 +690,12 @@ onMounted(() => {
   @include bg('~/assets/images/common/coin.png');
 }
 
+.order-detail-card__coin-sm {
+  @include size(14px);
+  @include bg('~/assets/images/common/coin.png');
+  display: inline-block;
+}
+
 .order-detail-card__total-value {
   font-size: 16px;
   font-weight: 600;
@@ -686,4 +747,10 @@ onMounted(() => {
   background: rgba(255, 255, 255, 0.7);
   color: #3fbfbd;
 }
+
+dd {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
 </style>

i18n/locales/en.json

@@ -99,6 +99,8 @@
       "quantity": "Quantity",
       "orderNo": "Order",
       "purchaseTime": "Purchase time",
+      "remark": "Remark",
+      "remarkEmpty": "-",
       "unitPrice": "Unit price",
       "discount": "Discount",
       "discountTagNewOnly": "New Only",

i18n/locales/id.json

@@ -99,6 +99,8 @@
       "quantity": "Jumlah pembelian",
       "orderNo": "Nomor pesanan",
       "purchaseTime": "Waktu pembelian",
+      "remark": "Catatan",
+      "remarkEmpty": "-",
       "unitPrice": "Harga satuan",
       "discount": "Diskon",
       "discountTagNewOnly": "Hanya baru",

i18n/locales/zh.json

@@ -99,6 +99,8 @@
       "quantity": "购买数量",
       "orderNo": "订单编号",
       "purchaseTime": "购买时间",
+      "remark": "备注",
+      "remarkEmpty": "无",
       "unitPrice": "单价",
       "discount": "优惠",
       "discountTagNewOnly": "首单专享",