购物车

subPackages/techan/detail.vue

@@ -295,7 +295,9 @@
 					...goods,
 					specUrl:goods.imageUrl,
 					goodsName:this.info.goodsName,
-					quantity:goods.buyNum
+					quantity:goods.buyNum,
+					supplierId:this.info.supplierId,
+					supplierName:this.info.supplierName,
 				}]
 				this.$store.commit("changeOrderSCart", list);
 				this.gotoPath("/subPackages/techan/order");
@@ -303,7 +305,7 @@
 			addToCart () {
 				let goods = this.sku[this.productIndex]
 				goods.buyNum = this.buyNum
-				this.Post({goodsId: this.info.goodsId, specCombinationId: goods.specCombinationId,quantity: this.buyNum,method:'post' },
+				this.Post({goodsId: this.info.goodsId, specCombinationId: goods.specCombinationId,quantity: this.buyNum,method:'post',supplierId:this.info.supplierId, },
 				'/framework/cart/add',"DES").then(res => {
 					if (res.code==200) {
 						let selectedData = []

subPackages/techan/order.vue

@@ -63,47 +63,72 @@
         </view>
       </view>
     </view>
-    <view class="new-box" v-for="(sku, index) in info" :key="index">
+    <!-- 按供应商分组显示商品 -->
-      <!-- <view class="box shop-name text-overflow" v-if="sku.goodsInfo.merchant_name">
+    <view v-for="(supplierGroup, supplierIndex) in groupedGoods" :key="supplierGroup.supplierId">
-				{{sku.goodsInfo.merchant_name}}
+      <!-- 供应商卡片 -->
-			</view> -->
+      <view class="supplier-card">
-      <view class="commodity box">
+        <!-- 供应商名称 -->
-        <image
+        <view class="supplier-header">
-          class="img"
+          <text class="supplier-name">{{ supplierGroup.supplierName }}</text>
-          :src="showImg(sku.specUrl)"
+        </view>
-          mode="aspectFill"
+        
-        ></image>
+        <!-- 该供应商的商品列表 -->
-        <view class="title flex-c">
+        <view class="supplier-goods">
-          <view class="commodity-info">
+          <view class="commodity-item" v-for="(sku, index) in supplierGroup.goods" :key="index">
-            <view class="text-overflowRows">{{ sku.goodsName }}</view>
+            <view class="commodity box">
-            <view class="commodity-price">
+              <image
-              {{ sku.salePrice }}
+                class="img"
+                :src="showImg(sku.specUrl)"
+                mode="aspectFill"
+              ></image>
+              <view class="title flex-c">
+                <view class="commodity-info">
+                  <view class="text-overflowRows">{{ sku.goodsName }}</view>
+                  <view class="commodity-price">
+                    {{ sku.salePrice }}
+                  </view>
+                </view>
+                <view class="commodity-info">
+                  <view class="text-overflowRows"
+                    >{{ sku.specValueOne }}-{{ sku.specValueTwo }}</view
+                  >
+                  <view class="commodity-num"> x{{ sku.quantity }} </view>
+                </view>
+              </view>
+            </view>
+            <view class="commodity box sb" style="padding-left: 10rpx" v-if="false">
+              <view class="title" style="font-weight: bold"> 购买数量 </view>
+              <view class="num-box">
+                <view
+                  :class="['ctrl', sku.quantity > 1 ? '' : 'disabled']"
+                  @click="reduce(sku, supplierIndex, index)"
+                  >-</view
+                >
+                <input
+                  class="num"
+                  type="text"
+                  v-model="sku.quantity"
+                  :disabled="true"
+                />
+                <view :class="['ctrl']" @click="plus(sku)">+</view>
+              </view>
             </view>
-          </view>
-          <view class="commodity-info">
-            <view class="text-overflowRows"
-              >{{ sku.specValueOne }}-{{ sku.specValueTwo }}</view
-            >
-            <view class="commodity-num"> x{{ sku.quantity }} </view>
           </view>
         </view>
-      </view>
+        
-      <view class="commodity box sb" style="padding-left: 10rpx" v-if="false">
+        <!-- 该供应商的备注 -->
-        <view class="title" style="font-weight: bold"> 购买数量 </view>
+        <view class="supplier-remark">
-        <view class="num-box">
+          <view class="section-row">
-          <!-- <image src="https://yjdtadmin.sz-trip.com/uploads/20231225/4b61998e657784d08c8dfdb08da84553.png" mode="aspectFill" class="ctrl" @click="reduce()"></image> -->
+            <text class="section-label">备注</text>
-          <view
+            <view class="note-input">
-            :class="['ctrl', sku.quantity > 1 ? '' : 'disabled']"
+              <input
-            @click="reduce(sku, index)"
+                v-model="supplierRemarks[supplierGroup.supplierId]"
-            >-</view
+                placeholder="选填"
-          >
+                placeholder-class="placeholder"
-          <input
+                maxlength="200"
-            class="num"
+              />
-            type="text"
+            </view>
-            v-model="sku.quantity"
+          </view>
-            :disabled="true"
-          />
-          <view :class="['ctrl']" @click="plus(sku)">+</view>
         </view>
       </view>
     </view>
@@ -125,35 +150,16 @@
         </view>
       </view>
 
-      <!-- 备注 -->
-      <view class="card-section">
-        <view class="section-row">
-          <text class="section-label">备注</text>
-          <view class="note-input">
-            <input
-              v-model="remark"
-              placeholder="选填"
-              placeholder-class="placeholder"
-              maxlength="200"
-            />
-          </view>
-        </view>
-      </view>
-
-      <!-- 运费 -->
-      <view class="card-section">
-        <view class="section-row">
-          <text class="section-label">运费</text>
-          <text class="section-value">包邮</text>
-        </view>
-      </view>
-
       <!-- 费用明细 -->
       <view class="card-section price-section">
         <view class="price-detail">
           <view class="text">商品总价:</view>
           <view class="price">{{ getGoodsTotal() }}</view>
         </view>
+		<view class="price-detail">
+		  <view class="text">运费:</view>
+		  <view class="price">包邮</view>
+		</view>
         <view class="price-detail" v-if="usePoints > 0">
           <view class="text">积分抵扣:</view>
           <view class="price deduction"
@@ -358,7 +364,9 @@ export default {
       reserve_name: "",
       reserve_idcard: "",
       reserve_phone: "",
-      remark: "",
+      remark: "", // 改为按供应商分组的备注对象
+      supplierRemarks: {}, // 按供应商ID存储备注的对象
+      groupedGoods: [], // 按供应商分组的商品数据
       coupon: "",
       allprice: 0,
 
@@ -398,7 +406,7 @@ export default {
       this.isPost = this.info.is_post || "1";
       // this.info.is_post = this.isPost==3?1:this.isPost
     }
-    // this.handleOrderGoods()
+    this.handleOrderGoods();
     // console.log(this.isPost);
   },
   onShow() {
@@ -421,6 +429,37 @@ export default {
     // 页面准备完成后的初始化操作
   },
   methods: {
+    // 按供应商分组商品
+    handleOrderGoods() {
+      if (!this.info || !Array.isArray(this.info)) {
+        this.groupedGoods = [];
+        return;
+      }
+
+      // 按supplierId分组
+      const supplierMap = new Map();
+      
+      this.info.forEach(item => {
+        const supplierId = item.supplierId || 'default';
+        const supplierName = item.supplierName || '默认供应商';
+        
+        if (!supplierMap.has(supplierId)) {
+          supplierMap.set(supplierId, {
+            supplierId,
+            supplierName,
+            goods: []
+          });
+          // 初始化该供应商的备注
+          this.$set(this.supplierRemarks, supplierId, '');
+        }
+        
+        supplierMap.get(supplierId).goods.push(item);
+      });
+      
+      this.groupedGoods = Array.from(supplierMap.values());
+      console.log('分组后的商品:', this.groupedGoods);
+    },
+
     // 获取总积分
     async getTotalPoints() {
       try {
@@ -582,7 +621,7 @@ export default {
         }
       });
     },
-    reduce(sku, index) {
+    reduce(sku, supplierIndex, index) {
       if (sku.quantity > 1) {
         this.$nextTick(() => {
           sku.quantity -= 1;
@@ -592,10 +631,20 @@ export default {
         });
       } else if (sku.quantity == 1) {
         this.$nextTick(() => {
-          this.info.splice(index, 1);
+          // 从原始info数组中移除该商品
+          const skuIndex = this.info.findIndex(item => 
+            item.goodsName === sku.goodsName && 
+            item.specValueOne === sku.specValueOne && 
+            item.specValueTwo === sku.specValueTwo
+          );
+          if (skuIndex !== -1) {
+            this.info.splice(skuIndex, 1);
+          }
+          
           if (this.flag) {
             this.getPost();
           }
+          // 重新分组
           this.handleOrderGoods();
         });
       }
@@ -865,10 +914,20 @@ export default {
 
       this.isOrderLoading = true; // 开始加载
 
+      // 按供应商分组构建 createDtos
+      let createDtos = [];
+      this.groupedGoods.forEach(supplierGroup => {
+        const supplierRemark = this.supplierRemarks[supplierGroup.supplierId] || '';
+        createDtos.push({
+          supplierId: supplierGroup.supplierId,
+          remark: supplierRemark,
+          shoppingCartBoList: supplierGroup.goods
+        });
+      });
+      
       let data = {
-        shoppingCartBoList: this.info,
+        createDtos: createDtos,
         userContactId: this.contacts.id,
-        remark: this.remark,
         expectedAmount: this.allprice,
         usePoints: this.usePoints ? 0 : 1, // 是否使用积分
         pointsQuantity: parseInt(this.usePoints) || 0, // 使用的积分数量
@@ -1890,6 +1949,78 @@ $bg-light: #f9f9f9;
   border-radius: 14rpx;
 }
 
+// 供应商卡片样式
+.supplier-card {
+  background-color: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  width: 697rpx;
+  margin: 30rpx auto;
+  overflow: hidden;
+  border: 1rpx solid #f0f0f0;
+}
+
+// 供应商标题样式
+.supplier-header {
+  padding: 20rpx 24rpx;
+  background: #ffffff;
+  
+  .supplier-name {
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #333333;
+  }
+}
+
+// 供应商商品列表样式
+.supplier-goods {
+  padding: 0;
+  
+  .commodity-item {
+    border-bottom: 1rpx solid #f0f0f0;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+// 供应商备注样式
+.supplier-remark {
+  background-color: #ffffff;
+  padding: 20rpx 24rpx;
+  border-top: 1rpx solid #f0f0f0;
+  
+  .section-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      min-height: 60rpx;
+      
+      .section-label {
+        font-size: 28rpx;
+        color: #333333;
+        font-weight: 500;
+      }
+      
+      .note-input {
+        flex: 1;
+        margin-left: 40rpx;
+        
+        input {
+          font-size: 26rpx;
+          color: #333333;
+          text-align: right;
+          width: 100%;
+        }
+        
+        .placeholder {
+          color: #999999;
+        }
+      }
+    }
+}
+
 .tickets-box {
   width: 698rpx;
   margin: 26rpx auto 0;