Explorar el Código

feat(order): 展示订单商品活动标签

- 在订单列表商品名前展示团购和秒杀标签,提升活动商品识别度

- 将订单详情的团购标识传入商品行组件,保持列表与详情展示一致
shizhongqi hace 2 días
padre
commit
e920dd7b75

+ 29 - 2
mallApp/src/components/module/app-order-item.vue

@@ -1,3 +1,7 @@
+<!--
+  订单详情商品行组件
+  供 pages/order/detail 的 itemList 使用;团购/秒杀商品在名称前展示对应标签
+-->
 <template>
 	<div class="list-module">
 		<block v-if="!$util.isEmpty(info)">
@@ -6,7 +10,12 @@
 					<image :src="info.cover" mode="aspectFill" style="width:130upx;height:130upx;"></image>
 				</div>
 				<div class="list-msg">
-					<div class="title">{{ info.name}}</div>
+					<!-- 团购:订单级 groupBuyId;秒杀:商品级 seckillGoodsId -->
+					<div class="title">
+						<text v-if="groupBuyId > 0" class="goods-name-tag">团购</text>
+						<text v-if="info.seckillGoodsId > 0" class="goods-name-tag">秒杀</text>
+						<text>{{ info.name }}</text>
+					</div>
 				</div>
 			</div>
 			<div class="list-right">
@@ -24,7 +33,12 @@ export default {
 			type: Object,
 			default: () => {}
 		},
-        goodsStyleId:'',
+		goodsStyleId: '',
+		/** 所属订单的团购 id,>0 表示团购单,用于控制名称前标签 */
+		groupBuyId: {
+			type: [Number, String],
+			default: 0
+		}
 	},
 	data() {
 		return {}
@@ -49,6 +63,19 @@ export default {
 				font-size: 28upx;
 				color: $fontColor2;
 				margin-bottom: 10upx;
+				line-height: 1.4;
+			}
+			/* 商品名标签(团购/秒杀):橙色描边,与订单列表样式一致 */
+			.goods-name-tag {
+				display: inline-block;
+				margin-right: 8upx;
+				padding: 0 6upx;
+				font-size: 20upx;
+				line-height: 1.4;
+				color: $auxiliaryColor2;
+				border: 1upx solid $auxiliaryColor2;
+				border-radius: 4upx;
+				vertical-align: middle;
 			}
 			.desc {
 				color: $fontColor3;

+ 29 - 2
mallApp/src/components/module/app-order-list.vue

@@ -1,3 +1,7 @@
+<!--
+  订单详情商品行(goodsInfoList)
+  供 pages/order/detail 使用;团购/秒杀商品在名称前展示对应标签
+-->
 <template>
 	<div class="list-module">
 		<block v-if="!$util.isEmpty(info)">
@@ -6,7 +10,12 @@
 					<image :src="info.cover" mode="aspectFill" style="width:130upx;height:130upx;"></image>
 				</div>
 				<div class="list-msg">
-					<div class="title">{{ info.name}}</div>
+					<!-- 团购:订单级 groupBuyId;秒杀:商品级 seckillGoodsId -->
+					<div class="title">
+						<text v-if="groupBuyId > 0" class="goods-name-tag">团购</text>
+						<text v-if="info.seckillGoodsId > 0" class="goods-name-tag">秒杀</text>
+						<text>{{ info.name }}</text>
+					</div>
 				</div>
 			</div>
 			<div class="list-right">
@@ -24,7 +33,12 @@ export default {
 			type: Object,
 			default: () => {}
 		},
-        goodsStyleId:'',
+		goodsStyleId: '',
+		/** 所属订单的团购 id,>0 表示团购单,用于控制名称前标签 */
+		groupBuyId: {
+			type: [Number, String],
+			default: 0
+		}
 	},
 	data() {
 		return {}
@@ -49,6 +63,19 @@ export default {
 				font-size: 28upx;
 				color: $fontColor2;
 				margin-bottom: 10upx;
+				line-height: 1.4;
+			}
+			/* 商品名标签(团购/秒杀):橙色描边,与订单列表样式一致 */
+			.goods-name-tag {
+				display: inline-block;
+				margin-right: 8upx;
+				padding: 0 6upx;
+				font-size: 20upx;
+				line-height: 1.4;
+				color: $auxiliaryColor2;
+				border: 1upx solid $auxiliaryColor2;
+				border-radius: 4upx;
+				vertical-align: middle;
 			}
 			.desc {
 				color: $fontColor3;

+ 28 - 5
mallApp/src/components/order/order-item.vue

@@ -41,7 +41,12 @@
           />
           <view class="goods-info">
             <view class="goods-title-row">
-              <text class="goods-name">{{ goods.name || '商品' }}</text>
+              <!-- 团购/秒杀:商品名前橙色描边标签,与详情页商品行保持一致 -->
+              <view class="goods-name-wrap">
+                <text v-if="info.groupBuyId > 0" class="goods-name-tag">团购</text>
+                <text v-if="goods.seckillGoodsId > 0" class="goods-name-tag">秒杀</text>
+                <text class="goods-name">{{ goods.name || '商品' }}</text>
+              </view>
               <text class="goods-num">x{{ getGoodsNum(goods) }}</text>
             </view>
             <text v-if="getGoodsSpec(goods)" class="goods-spec">{{ getGoodsSpec(goods) }}</text>
@@ -335,12 +340,9 @@ export default {
   justify-content: space-between;
 }
 
-.goods-name {
+.goods-name-wrap {
   flex: 1;
   min-width: 0;
-  font-size: 28upx;
-  font-weight: 500;
-  color: $fontColorMain;
   line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -349,6 +351,27 @@ export default {
   -webkit-box-orient: vertical;
 }
 
+/* 商品名标签(团购/秒杀):橙色描边小标签,贴在商品名称左侧 */
+.goods-name-tag {
+  display: inline-block;
+  margin-right: 8upx;
+  padding: 0 6upx;
+  font-size: 20upx;
+  line-height: 1.4;
+  color: $auxiliaryColor2;
+  border: 1upx solid $auxiliaryColor2;
+  border-radius: 4upx;
+  vertical-align: middle;
+}
+
+.goods-name {
+  font-size: 28upx;
+  font-weight: 500;
+  color: $fontColorMain;
+  line-height: 1.4;
+  vertical-align: middle;
+}
+
 .goods-num {
   flex-shrink: 0;
   margin-left: 16upx;

+ 2 - 2
mallApp/src/pages/order/detail.vue

@@ -21,11 +21,11 @@
         <view class="module-tit">商品信息</view>
         <view class="module-det">
           <block v-if="!$util.isEmpty(data.goodsInfoList)">
-            <list-module v-for="(items, subIndex) in data.goodsInfoList" :key="subIndex" :info="items" />
+            <list-module v-for="(items, subIndex) in data.goodsInfoList" :key="subIndex" :info="items" :groupBuyId="data.groupBuyId" />
           </block>
 
           <block v-if="!$util.isEmpty(data.itemList)">
-            <orderItem v-for="(info, idx) in data.itemList" :key="idx" :info="info" ></orderItem>
+            <orderItem v-for="(info, idx) in data.itemList" :key="idx" :info="info" :groupBuyId="data.groupBuyId" ></orderItem>
           </block>
 
         </view>