fix SalesOrderDetail.vue product style

src/pages/salesOrder/SalesOrderDetail.vue

@@ -68,16 +68,40 @@
 			</t-form>
 			<t-cell-group
 				v-if="order.itemList?.length"
-				class="product"
+				class="product empty-cell-title-margin"
 				title="订单明细"
 				theme="card"
 				v-entrance-transition="140"
 			>
 				<t-cell
+					class="item"
 					v-for="item in order.itemList"
 					:key="item.id"
-					:title="getItemTitle(item)"
 				>
+					<template #leftIcon>
+						<t-image
+							v-if="getProductPhotoURL(item)"
+							:src="getProductPhotoURL(item)"
+							:alt="item.productNameSnapshot || '产品图片'"
+							fit="cover"
+							class="avatar"
+						/>
+						<div
+							v-else
+							class="avatar fallback"
+							v-text="(item.productNameSnapshot || '产').slice(0, 1)"
+						/>
+					</template>
+					<template #title>
+						<div class="title">
+							<span v-text="getItemTitle(item)"></span>
+							<t-tag
+								:content="getItemFulfillmentStatus(item).text"
+								:theme="getItemFulfillmentStatus(item).theme"
+								variant="light-outline"
+							/>
+						</div>
+					</template>
 					<template #description>
 						<div class="description">
 							<span>
@@ -94,13 +118,6 @@
 							</span>
 						</div>
 					</template>
-					<template #note>
-						<t-tag
-							:content="getItemFulfillmentStatus(item).text"
-							:theme="getItemFulfillmentStatus(item).theme"
-							variant="light-outline"
-						/>
-					</template>
 				</t-cell>
 				<t-cell title="履约记录" note="查看本单所有履约单" arrow @click="toFulfillmentList" />
 			</t-cell-group>
@@ -171,6 +188,7 @@ import type { PhotoItem } from "@/types/Photo";
 import { formatPackageAmount, getPackageQuantityText } from "@/utils/package";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
+import { getProductPhotoURL } from "@/utils/product";
 import {
 	getSalesOrderStatusText,
 	getSalesPaymentStatusText,
@@ -495,13 +513,28 @@ onUnmounted(() => navBarStore.clearRight());
 
 	.product {
 
-		.description {
+		.item {
-			gap: .75rem;
+			padding: 10px;
-			display: flex;
 
-			> span {
+			.avatar {
-				gap: .25rem;
+				width: 3.5rem;
+				height: 3.5rem;
+			}
+
+			.title {
+				flex: 1;
 				display: flex;
+				justify-content: space-between;
+			}
+
+			.description {
+				gap: .75rem;
+				display: flex;
+
+				> span {
+					gap: .25rem;
+					display: flex;
+				}
 			}
 		}
 	}