feat: 订单详情页显示商品规格、长度宽度和总面积

src/pages/order/detail.vue

@@ -37,6 +37,9 @@
       <view class="items-list">
         <view class="item-row header">
           <text class="item-name">商品名称</text>
+          <text class="item-specs">规格</text>
+          <text class="item-dims">长x宽</text>
+          <text class="item-area">总面积(m²)</text>
           <text class="item-qty">数量</text>
           <text class="item-price">单价</text>
           <text class="item-subtotal">小计</text>
@@ -47,6 +50,9 @@
           class="item-row"
         >
           <text class="item-name">{{ item.productName }}</text>
+          <text class="item-specs">{{ item.productSpec || '-' }}</text>
+          <text class="item-dims">{{ item.length || '-' }}x{{ item.width || '-' }}</text>
+          <text class="item-area">{{ calcArea(item) }}</text>
           <text class="item-qty">{{ item.quantity }}</text>
           <text class="item-price">¥{{ item.price }}</text>
           <text class="item-subtotal">¥{{ (item.price * item.quantity).toFixed(2) }}</text>
@@ -170,6 +176,13 @@ export default {
       if (!time) return ''
       return time.substring(0, 16).replace('T', ' ')
     },
+    calcArea(item) {
+      if (item.length && item.width && item.quantity) {
+        const area = (item.length * item.width * item.quantity / 1000000).toFixed(4)
+        return area + ' m²'
+      }
+      return '-'
+    },
     getPaymentMethod(method) {
       const map = {
         'cash': '现金',
@@ -345,7 +358,8 @@ export default {
   display: flex;
   padding: 20rpx 0;
   border-bottom: 1rpx solid #f8f8f8;
-  font-size: 26rpx;
+  font-size: 24rpx;
+  align-items: center;
 }
 
 .item-row.header {
@@ -357,10 +371,29 @@ export default {
 
 .item-name {
   flex: 2;
+  min-width: 120rpx;
+}
+
+.item-specs {
+  flex: 1;
+  text-align: center;
+  color: #999;
+}
+
+.item-dims {
+  flex: 1;
+  text-align: center;
+}
+
+.item-area {
+  flex: 1;
+  text-align: center;
+  color: #667eea;
+  font-weight: 500;
 }
 
 .item-qty {
-  flex: 1;
+  flex: 0.8;
   text-align: center;
 }