From bbf6b97c08f491d0509a046798154cbd7f2a7c9f Mon Sep 17 00:00:00 2001
From: "1173117610@qq.com" <a15133400227>
Date: Mon, 11 May 2026 13:22:18 +0800
Subject: [PATCH] 1

---
 pages/category/category.vue        | 203 ++++++++++++++++++++---------
 pages/category/category_detail.vue |   7 +-
 2 files changed, 142 insertions(+), 68 deletions(-)

diff --git a/pages/category/category.vue b/pages/category/category.vue
index 3132ad5..e08605b 100644
--- a/pages/category/category.vue
+++ b/pages/category/category.vue
@@ -56,25 +56,39 @@
 				</view>
 			</view>
 
-			<!-- 商品列表 (1:1 还原首页风格) -->
+			<!-- 商品列表 (同步 category_detail 的横向高保真风格) -->
 			<view class="goods-list">
 				<view class="goods-item" v-for="(goods, idx) in goodsList" :key="idx" @click="goToDetail(goods.id)">
-					<view class="g-img-wrap">
+					<view class="g-img-left">
 						<image class="goods-img" :src="goods.image" mode="aspectFill"></image>
 					</view>
 					<view class="goods-info">
-						<view class="goods-title">
-							<text :class="goods.shopType === '天猫' ? 'tag-tmall' : 'tag-taobao'">{{ goods.shopType }}</text>
+						<view class="goods-title-row">
+							<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="platform-icon"></image>
 							<text class="title-text">{{ goods.title }}</text>
 						</view>
-						<view class="goods-price-row">
-							<view class="g-price-left">
-								<text class="g-price-tip">券后￥</text>
-								<text class="g-price-val">{{ goods.finalPrice }}</text>
-							</view>
-							<view class="g-coupon-tag">券 {{ goods.couponValue }}元</view>
+						<!-- 标签组 -->
+						<view class="labels-row" v-if="goods.labels && goods.labels.length > 0">
+							<text class="label-tag" v-for="(label, lIdx) in goods.labels.slice(0, 2)" :key="lIdx">{{ label }}</text>
+						</view>
+						
+						<view class="goods-price-section">
+							<view class="price-main">
+								<text class="price-tip">{{ goods.couponValue > 0 ? '券后' : '抢购价' }}</text>
+								<text class="price-symbol">￥</text>
+								<text class="price-integer">{{ goods.finalPrice }}</text>
+								<view class="coupon-box" v-if="goods.couponValue > 0">
+									<text class="coupon-icon">券</text>
+									<text class="coupon-txt">{{ goods.couponValue }}元</text>
+								</view>
+							</view>
+						</view>
+
+						<view class="goods-bottom-info">
+							<text class="sales">已售{{ goods.sales }}件</text>
+							<text class="split-line">|</text>
+							<text class="shop-name">店铺：{{ goods.shopName }}</text>
 						</view>
-						<view class="goods-sales">已售 {{ goods.sales }} 件</view>
 					</view>
 				</view>
 			</view>
@@ -179,11 +193,13 @@
 							const list = res.data.data.item_info.map(item => ({
 								id: item.id,
 								image: item.itempic,
-								title: item.itemshorttitle,
+								title: item.itemshorttitle && item.itemshorttitle.length > 17 ? item.itemshorttitle.substring(0, 17) + '...' : item.itemshorttitle,
 								finalPrice: item.itemendprice,
 								couponValue: item.couponmoney || 0,
 								sales: item.itemsale >= 10000 ? (item.itemsale / 10000).toFixed(1) + '万' : item.itemsale,
-								shopType: item.shoptype === 'B' ? '天猫' : '淘宝'
+								shopType: item.shoptype === 'B' ? '天猫' : '淘宝',
+								shopName: item.shopname,
+								labels: item.label || []
 							}));
 							
 							if (list.length === 0) {
@@ -472,90 +488,149 @@
 
 	/* 商品列表 */
 	.goods-list {
-		padding: 20rpx;
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
+		padding: 0;
+		background: #ffffff;
 	}
 
 	.goods-item {
-		width: 345rpx;
-		background-color: #ffffff;
-		border-radius: 16rpx;
+		display: flex;
+		padding: 24rpx;
+		border-bottom: 1rpx solid #f8f8f8;
+		background: #ffffff;
+	}
+
+	.g-img-left {
+		flex-shrink: 0;
+		width: 240rpx;
+		height: 240rpx;
+		border-radius: 12rpx;
 		overflow: hidden;
-		margin-bottom: 20rpx;
-		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
+		background: #f0f0f0;
 	}
 
 	.goods-img {
-		width: 345rpx;
-		height: 345rpx;
+		width: 100%;
+		height: 100%;
 	}
 
 	.goods-info {
-		padding: 16rpx;
+		flex: 1;
+		margin-left: 20rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		padding: 4rpx 0;
 	}
 
-	.goods-title {
-		font-size: 26rpx;
-		color: #333;
+	.goods-title-row {
+		display: flex;
+		align-items: center;
 		line-height: 1.4;
-		height: 72rpx;
+	}
+
+	.platform-icon {
+		width: 26rpx;
+		height: 26rpx;
+		margin-right: 8rpx;
+		flex-shrink: 0;
+	}
+
+	.title-text {
+		color: #333333;
+		font-size: 24rpx;
+		font-weight: bold;
+		width: 100%;
+		box-sizing: border-box;
+		padding-left: 6rpx;
+		display: inline-block;
+		line-height: 29rpx;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		-webkit-box-orient: vertical;
+		white-space: nowrap;
 	}
 
-	.tag-tmall {
-		background-color: #ff0036;
-		color: #ffffff;
-		font-size: 20rpx;
-		padding: 0 4rpx;
-		border-radius: 4rpx;
-		margin-right: 8rpx;
-	}
-
-	.tag-taobao {
-		background-color: #ff5000;
-		color: #ffffff;
-		font-size: 20rpx;
-		padding: 0 4rpx;
-		border-radius: 4rpx;
-		margin-right: 8rpx;
-	}
-
-	.goods-price-row {
+	.labels-row {
 		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-top: 16rpx;
+		flex-wrap: wrap;
+		margin-top: 12rpx;
 	}
 
-	.g-price-tip {
+	.label-tag {
 		font-size: 20rpx;
 		color: #ff416c;
+		background: #fff5f7;
+		border: 1rpx solid #ffd6de;
+		padding: 2rpx 12rpx;
+		border-radius: 20rpx;
+		margin-right: 12rpx;
+		margin-bottom: 8rpx;
 	}
 
-	.g-price-val {
-		font-size: 32rpx;
+	.goods-price-section {
+		margin-top: auto;
+		padding-bottom: 8rpx;
+	}
+
+	.price-main {
+		display: flex;
+		align-items: baseline;
+	}
+
+	.price-tip {
+		font-size: 24rpx;
+		color: #ff416c;
+		margin-right: 4rpx;
+	}
+
+	.price-symbol {
+		font-size: 24rpx;
 		color: #ff416c;
 		font-weight: bold;
 	}
 
-	.g-coupon-tag {
-		font-size: 20rpx;
+	.price-integer {
+		font-size: 40rpx;
 		color: #ff416c;
-		border: 1rpx solid #ff416c;
-		padding: 0 8rpx;
-		border-radius: 4rpx;
+		font-weight: bold;
+		margin-right: 12rpx;
 	}
 
-	.goods-sales {
+	.coupon-box {
+		display: flex;
+		align-items: center;
+		background: #ff416c;
+		border-radius: 4rpx;
+		overflow: hidden;
+		height: 32rpx;
+	}
+
+	.coupon-icon {
+		font-size: 20rpx;
+		color: #ffffff;
+		background: rgba(255,255,255,0.2);
+		padding: 0 6rpx;
+		height: 100%;
+		display: flex;
+		align-items: center;
+	}
+
+	.coupon-txt {
+		font-size: 20rpx;
+		color: #ffffff;
+		padding: 0 8rpx;
+	}
+
+	.goods-bottom-info {
+		display: flex;
+		align-items: center;
 		font-size: 22rpx;
 		color: #999;
-		margin-top: 10rpx;
+		margin-top: 8rpx;
+	}
+
+	.split-line {
+		margin: 0 10rpx;
+		color: #eee;
 	}
 
 	.loading-more {
diff --git a/pages/category/category_detail.vue b/pages/category/category_detail.vue
index f6443d7..74b1127 100644
--- a/pages/category/category_detail.vue
+++ b/pages/category/category_detail.vue
@@ -464,14 +464,13 @@
 
 	.goods-title-row {
 		display: flex;
-		align-items: flex-start;
+		align-items: center;
 		line-height: 1.4;
 	}
 
 	.platform-icon {
-		width: 32rpx;
-		height: 32rpx;
-		margin-top: 6rpx;
+		width: 26rpx;
+		height: 26rpx;
 		margin-right: 8rpx;
 		flex-shrink: 0;
 	}