排版优化

hdApp/src/admin/order/components/detail-goods.vue

@@ -1,20 +1,34 @@
 <template>
-	<view class="list-module">
-		<block v-if="!$util.isEmpty(info)">
-			<view class="list-left">
-				<view class="image">
-					<image :src="info.smallCover" mode="aspectFit" class="thumb"></image>
-				</view>
-				<view class="list-msg">
-					<view class="title link-primary" @click="pageTo({url: '/admin/goods/detail?id='+info.goodsId})">{{ info.name || '' }}</view>
-				</view>
-			</view>
-			<view class="list-right">
-				<view class="price">￥{{ info.price?parseFloat(info.price):0 }}</view>
-				<view class="num">￥{{ info.unitPrice ? parseFloat(info.unitPrice) : 0 }} X {{ info.num||0 }}{{info.unitName||'份'}}</view>
-			</view>
-		</block>
-	</view>
+  <view class="goods-item" v-if="!$util.isEmpty(info)">
+    <!-- 商品图片和信息 -->
+    <view class="goods-main">
+      <view class="goods-image">
+        <image 
+          :src="info.smallCover" 
+          mode="aspectFit" 
+          class="goods-thumb">
+        </image>
+      </view>
+      
+      <view class="goods-info">
+        <view 
+          class="goods-title" 
+          @click="pageTo({url: '/admin/goods/detail?id=' + info.goodsId})">
+          {{ info.name || '' }}
+        </view>
+      </view>
+    </view>
+    
+    <!-- 价格和数量信息 -->
+    <view class="goods-pricing">
+      <view class="total-price">
+        ￥{{ info.price ? parseFloat(info.price) : 0 }}
+      </view>
+      <view class="unit-info">
+        ￥{{ info.unitPrice ? parseFloat(info.unitPrice) : 0 }} × {{ info.num || 0 }}{{ info.unitName || '份' }}
+      </view>
+    </view>
+  </view>
 </template>
 <script>
 export default {
@@ -34,44 +48,81 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.list-module {
-	@include disFlex(center, space-between);
-	padding: 10upx 0;
-	border-bottom: 1px solid $borderColor;
-	.list-left {
-		@include disFlex(flex-start, space-between);
-		.image {
-			width: 120upx;
-			height: 120upx;
-			.thumb { width: 120upx; height: 120upx; border-radius: 8upx; background: #f7f7f7; }
-		}
-		.list-msg {
-			margin-left: 20upx;
-			.title {
-				font-size: 28upx;
-				color: $fontColor2;
-				margin-bottom: 10upx;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				width: 420upx;
-			}
-			.desc {
-				color: $fontColor3;
-			}
-		}
-	}
-	.list-right {
-		text-align: right;
-		color: $fontColor2;
-		.price {
-			margin-bottom: 70upx;
-			color: #333;
-			font-weight: 600;
-		}
-		.num { color: $fontColor3; }
-	}
+.goods-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16upx 0;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.2s ease;
+  
+  &:hover {
+    background-color: #fafafa;
+  }
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.goods-main {
+  display: flex;
+  align-items: flex-start;
+  flex: 1;
+  gap: 16upx;
+}
+
+.goods-image {
+  width: 120upx;
+  height: 120upx;
+  flex-shrink: 0;
+  
+  .goods-thumb {
+    width: 100%;
+    height: 100%;
+    border-radius: 12upx;
+    background: #f7f7f7;
+    object-fit: cover;
+    box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
+  }
 }
 
-.link-primary { color: #3385ff; }
+.goods-info {
+  flex: 1;
+  min-width: 0; // 防止flex项目撑破容器
+  
+  .goods-title {
+    font-size: 28upx;
+    color: black;
+    line-height: 1.4;
+    margin-bottom: 8upx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    cursor: pointer;
+    transition: color 0.2s ease;
+  }
+}
+
+.goods-pricing {
+  text-align: right;
+  flex-shrink: 0;
+  min-width: 120upx;
+  
+  .total-price {
+    font-size: 30upx;
+    color: #333;
+    font-weight: 600;
+    margin-bottom: 8upx;
+    line-height: 1.2;
+  }
+  
+  .unit-info {
+    font-size: 26upx;
+    color: #686767;
+    line-height: 1.2;
+  }
+}
 </style>

hdApp/src/admin/order/components/detail-item.vue

@@ -1,20 +1,34 @@
 <template>
-	<view class="list-module">
-		<block v-if="!$util.isEmpty(info)">
-			<view class="list-left">
-				<view class="image">
-					<image :src="info.smallCover" mode="aspectFit" class="thumb"></image>
-				</view>
-				<view class="list-msg">
-					<view class="title link-primary" @click="pageTo({url: '/admin/item/detail?id='+info.itemId})">{{ info.name || '' }}</view>
-				</view>
-			</view>
-			<view class="list-right">
-				<view class="price">￥{{ info.price?parseFloat(info.price):0 }}</view>
-				<view class="num">￥{{ info.unitPrice ? parseFloat(info.unitPrice) : 0 }} X {{ info.num||0 }}{{info.unitName||'份'}}</view>
-			</view>
-		</block>
-	</view>
+  <view class="item-card" v-if="!$util.isEmpty(info)">
+    <!-- 项目图片和信息 -->
+    <view class="item-main">
+      <view class="item-image">
+        <image 
+          :src="info.smallCover" 
+          mode="aspectFit" 
+          class="item-thumb">
+        </image>
+      </view>
+      
+      <view class="item-info">
+        <view 
+          class="item-title" 
+          @click="pageTo({url: '/admin/item/detail?id=' + info.itemId})">
+          {{ info.name || '' }}
+        </view>
+      </view>
+    </view>
+    
+    <!-- 价格和数量信息 -->
+    <view class="item-pricing">
+      <view class="total-price">
+        ￥{{ info.price ? parseFloat(info.price) : 0 }}
+      </view>
+      <view class="unit-info">
+        ￥{{ info.unitPrice ? parseFloat(info.unitPrice) : 0 }} × {{ info.num || 0 }}{{ info.unitName || '份' }}
+      </view>
+    </view>
+  </view>
 </template>
 <script>
 export default {
@@ -34,44 +48,81 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.list-module {
-	@include disFlex(center, space-between);
-	padding: 10upx 0;
-	border-bottom: 1px solid $borderColor;
-	.list-left {
-		@include disFlex(flex-start, space-between);
-		.image {
-			width: 120upx;
-			height: 120upx;
-			.thumb { width: 120upx; height: 120upx; border-radius: 8upx; background: #f7f7f7; }
-		}
-		.list-msg {
-			margin-left: 20upx;
-			.title {
-				font-size: 28upx;
-				color: $fontColor2;
-				margin-bottom: 10upx;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				width: 420upx;
-			}
-			.desc {
-				color: $fontColor3;
-			}
-		}
-	}
-	.list-right {
-		text-align: right;
-		color: $fontColor2;
-		.price {
-			margin-bottom: 70upx;
-			color: #333;
-			font-weight: 600;
-		}
-		.num { color: $fontColor3; }
-	}
+.item-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16upx 0;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.2s ease;
+  
+  &:hover {
+    background-color: #fafafa;
+  }
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.item-main {
+  display: flex;
+  align-items: flex-start;
+  flex: 1;
+  gap: 16upx;
+}
+
+.item-image {
+  width: 120upx;
+  height: 120upx;
+  flex-shrink: 0;
+  
+  .item-thumb {
+    width: 100%;
+    height: 100%;
+    border-radius: 12upx;
+    background: #f7f7f7;
+    object-fit: cover;
+    box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
+  }
 }
 
-.link-primary { color: #3385ff; }
+.item-info {
+  flex: 1;
+  min-width: 0; // 防止flex项目撑破容器
+  
+  .item-title {
+    font-size: 28upx;
+    color: black;
+    line-height: 1.4;
+    margin-bottom: 8upx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    cursor: pointer;
+    transition: color 0.2s ease;
+  }
+}
+
+.item-pricing {
+  text-align: right;
+  flex-shrink: 0;
+  min-width: 120upx;
+  
+  .total-price {
+    font-size: 30upx;
+    color: #333;
+    font-weight: 600;
+    margin-bottom: 8upx;
+    line-height: 1.2;
+  }
+  
+  .unit-info {
+    font-size: 26upx;
+    color: #686767;
+    line-height: 1.2;
+  }
+}
 </style>

hdApp/src/admin/order/detail.vue

@@ -59,17 +59,41 @@
       </block>
 
       <!-- 商品信息模块 -->
-      <view class="module-com">
-        <view class="module-tit">商品信息 <text style="font-weight:normal;" @click="showGoodsModal">编号 {{ orderInfo.sendNum }}</text></view>
+      <view class="module-com goods-info-module">
+        <view class="module-tit">
+          <text class="module-tit__text">商品信息</text>
+          <text 
+            class="order-number" 
+            @click="showGoodsModal">
+            编号 {{ orderInfo.sendNum }}
+          </text>
+        </view>
+        
         <view class="module-det">
-          <block v-if="!$util.isEmpty(orderInfo.goodsInfoList)">
-            <detailGoods v-for="(items, subIndex) in orderInfo.goodsInfoList" :key="subIndex" :info="items"> </detailGoods>
-          </block>
-          <block v-if="!$util.isEmpty(orderInfo.itemInfoList)">
-            <detailItem v-for="(items, subIndex) in orderInfo.itemInfoList" :key="subIndex" :info="items"> </detailItem>
-          </block>
+          <!-- 商品列表 -->
+          <view class="goods-list" v-if="!$util.isEmpty(orderInfo.goodsInfoList)">
+            <detailGoods 
+              v-for="(item, index) in orderInfo.goodsInfoList" 
+              :key="`goods-${index}`" 
+              :info="item">
+            </detailGoods>
+          </view>
+          
+          <!-- 项目列表 -->
+          <view class="items-list" v-if="!$util.isEmpty(orderInfo.itemInfoList)">
+            <detailItem 
+              v-for="(item, index) in orderInfo.itemInfoList" 
+              :key="`item-${index}`" 
+              :info="item">
+            </detailItem>
+          </view>
+        </view>
+        
+        <!-- 合计金额 -->
+        <view class="total-price">
+          <text class="total-label">合计</text>
+          <text class="total-amount">￥{{ orderInfo.goodsPrice ? parseFloat(orderInfo.goodsPrice) : 0 }}</text>
         </view>
-        <view style="text-align: right;margin-top:12upx;padding-bottom:12upx;font-size:28upx;padding-right:8upx;">合计 ￥{{ orderInfo.goodsPrice ? parseFloat(orderInfo.goodsPrice) : 0 }}</view>
       </view>
 
       <!-- 收花人信息模块 -->
@@ -840,6 +864,47 @@ export default {
   }
 }
 
+/* 商品信息模块样式 */
+.goods-info-module {
+  .order-number {
+    font-weight: normal;
+    color: #666;
+    font-size: 26upx;
+    cursor: pointer;
+    
+    &:hover {
+      color: #3385ff;
+    }
+  }
+  
+  .goods-list,
+  .items-list {
+    padding: 0;
+  }
+  
+  .total-price {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 10upx;
+    padding: 16upx 8upx 16upx 0;
+    margin-top: 12upx;
+    border-top: 1px solid #f0f0f0;
+    
+    .total-label {
+      font-size: 28upx;
+      color: #666;
+      font-weight: 500;
+    }
+    
+    .total-amount {
+      font-size: 30upx;
+      color: #333;
+      font-weight: 600;
+    }
+  }
+}
+
 /* 商品信息弹框样式 */
 .goods-modal-mask {
   position: fixed;