From 790510b4f1a623b5120dfcc83ced78f18b262b11 Mon Sep 17 00:00:00 2001
From: chenkainan <chenkainan163@163.com>
Date: Mon, 22 Sep 2025 16:29:21 +0800
Subject: [PATCH] 1

---
 src/views/Order/Index.vue       |  42 ++-
 src/views/User/OrderList.vue    |   2 +-
 src/views/User/ShoppingCart.vue | 455 ++++++++++++++++++--------------
 3 files changed, 298 insertions(+), 201 deletions(-)

diff --git a/src/views/Order/Index.vue b/src/views/Order/Index.vue
index 13fa574..2a25c57 100644
--- a/src/views/Order/Index.vue
+++ b/src/views/Order/Index.vue
@@ -318,6 +318,7 @@ export default {
     },
     // 格式化商品数据（统一价格单位、计算小计等）
     formatItems(items) {
+      console.log(items, 13213);
       return items.map((item) => ({
         id: item.sku.id,
         productId: item.product.id,
@@ -328,6 +329,7 @@ export default {
         quantity: item.quantity,
         freight: "0.00", // 暂固定，实际项目可从接口获取
         deliveryType: "邮寄",
+        type: item.product.type,
         // 原逻辑：仅计算商品金额
         // subtotal: ((item.sku.price / 100) * item.quantity).toFixed(2),
 
@@ -401,7 +403,7 @@ export default {
       let total = 0;
       this.orderGroups.forEach((group) => {
         group.items.forEach((item) => {
-          console.log(item)
+          console.log(item);
           total += parseFloat(item.freight);
         });
       });
@@ -421,10 +423,12 @@ export default {
 
       this.totalGoodsCount = totalCount;
       this.totalGoodsAmount = totalAmount.toFixed(2);
+
+      this.totalPayAmount = totalAmount.toFixed(2);
       // 使用最新计算的总运费
-      this.totalPayAmount = (
-        totalAmount + parseFloat(this.totalFreight)
-      ).toFixed(2);
+      // this.totalPayAmount = (
+      //   totalAmount + parseFloat(this.totalFreight)
+      // ).toFixed(2);
     },
     // 处理保存地址
     handleSaveAddress(formData) {
@@ -477,9 +481,33 @@ export default {
         this.$message.warning("请先选择收货地址");
         return;
       }
-      this.$message.success("订单提交成功！");
-      // 实际项目中可跳转至订单详情页
-      // this.$router.push('/order/detail');
+
+      let goods = [];
+      this.orderGroups.forEach((group, groupIndex) => {
+        group.items.forEach((item, itemIndex) => {
+          console.log(item);
+          goods.push({
+            type: item.type,
+            product_id: item.productId,
+            sku_id: item.id,
+            product_num: item.quantity,
+            post: this.selectedAddress.id,
+            remark: group.remark || "",
+          });
+        });
+      });
+      console.log(goods);
+      this.post(
+        {
+          data: JSON.stringify({ product_list: goods }),
+        },
+        "/api/order/create"
+      ).then((res) => {
+        if (res.code == 1) {
+          this.$message.success("订单提交成功！");
+          this.$router.push("/User/OrderList");
+        }
+      });
     },
   },
 };
diff --git a/src/views/User/OrderList.vue b/src/views/User/OrderList.vue
index ef8aed7..74030c2 100644
--- a/src/views/User/OrderList.vue
+++ b/src/views/User/OrderList.vue
@@ -190,7 +190,7 @@ export default {
       getList() {
         this.post({
           ...this.filterForm,
-          offset:this.filterForm.currentPage*this.filterForm.limit,
+          offset:(this.filterForm.currentPage-1)*this.filterForm.limit,
           customBaseURL:"/api",
          },'/api/order/list').then(res=>{
             this.orders = res.data.list
diff --git a/src/views/User/ShoppingCart.vue b/src/views/User/ShoppingCart.vue
index 73207ad..ef0540f 100644
--- a/src/views/User/ShoppingCart.vue
+++ b/src/views/User/ShoppingCart.vue
@@ -1,67 +1,89 @@
 <template>
   <div class="bg">
-
-
     <div>
-        <div class="order-products" style="padding:0 20px;background: #f8f9fa; border-top: 1px solid #eee; border-bottom: 1px solid #eee;margin-bottom: 20px;">
-          <div class="product-item" >
-            <div class="product-select">
-              <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
-            </div>
-            <div class="product-details">
-              <div class="product-name">商品</div>
-            </div>
-            <div class="product-box">单价(元)</div>
-            <div class="product-quantity">数量</div>
-            <div class="product-box">收货方式</div>
-            <div class="product-box">小计(元)</div>
-            <div class="product-box">操作</div>
-
+      <div
+        class="order-products"
+        style="
+          padding: 0 20px;
+          background: #f8f9fa;
+          border-top: 1px solid #eee;
+          border-bottom: 1px solid #eee;
+          margin-bottom: 20px;
+        "
+      >
+        <div class="product-item">
+          <div class="product-select">
+            <el-checkbox v-model="selectAll" @change="handleSelectAll"
+              >全选</el-checkbox
+            >
+          </div>
+          <div class="product-details">
+            <div class="product-name">商品</div>
           </div>
+          <div class="product-box">单价(元)</div>
+          <div class="product-quantity">数量</div>
+          <div class="product-box">收货方式</div>
+          <div class="product-box">小计(元)</div>
+          <div class="product-box">操作</div>
         </div>
+      </div>
 
       <!-- 订单卡片 - 按商家合并商品 -->
       <div class="order-card" v-for="shop in list" :key="shop.id">
         <!-- 订单头部 - 包含商家信息 -->
         <div class="order-header flex-between">
-            <div class="product-select">
-              <el-checkbox v-model="shop.selected" @change="handleSelectShop(shop)"><span style="opacity: 0;">全选</span></el-checkbox>
-            </div>
-            <div class="product-details">
-              <div class="product-name">供应商名称：{{ shop.shop_name }}</div>
-            </div>
+          <div class="product-select">
+            <el-checkbox
+              v-model="shop.selected"
+              @change="handleSelectShop(shop)"
+              ><span style="opacity: 0">全选</span></el-checkbox
+            >
+          </div>
+          <div class="product-details">
+            <div class="product-name">供应商名称：{{ shop.shop_name }}</div>
+          </div>
         </div>
 
         <!-- 订单商品列表 -->
         <div class="order-products">
           <div class="product-item" v-for="goods in shop.goods" :key="goods.id">
             <div class="product-select">
-              <el-checkbox v-model="goods.selected" @change="handleSelect"><span style="opacity: 0;">全选</span></el-checkbox>
+              <el-checkbox v-model="goods.selected" @change="handleSelect"
+                ><span style="opacity: 0">全选</span></el-checkbox
+              >
             </div>
             <div class="product-details flex-between">
-              <img :src="goods.product.headimg" class="product-image">
+              <img :src="goods.product.headimg" class="product-image" />
               <div class="product-details">
                 <div class="product-name">{{ goods.product.title }}</div>
                 <div class="product-spec">{{ goods.sku.sku_name }}</div>
               </div>
             </div>
-            <div class="product-box ">¥{{ (goods.sku.price/100).toFixed(2) }}</div>
+            <div class="product-box">
+              ¥{{ (goods.sku.price / 100).toFixed(2) }}
+            </div>
             <div class="product-quantity">
-                <el-input-number size="small" v-model="goods.num" @change="handleNumChange(goods)" :min="1" :step="1"/>
+              <el-input-number
+                size="small"
+                v-model="goods.num"
+                @change="handleNumChange(goods)"
+                :min="1"
+                :step="1"
+              />
             </div>
             <div class="product-box">邮寄</div>
-            <div class="product-box product-price">¥{{ (goods.num * goods.sku.price/100).toFixed(2) }}</div>
+            <div class="product-box product-price">
+              ¥{{ ((goods.num * goods.sku.price) / 100).toFixed(2) }}
+            </div>
             <div class="product-box">
-              <el-button  type="text"  size="mini" @click="delItem(goods)">删除</el-button>
+              <el-button type="text" size="mini" @click="delItem(goods)"
+                >删除</el-button
+              >
             </div>
           </div>
         </div>
-
-
       </div>
-      <el-empty description="暂无数据" v-if="list.length<=0"></el-empty>
-
-      
+      <el-empty description="暂无数据" v-if="list.length <= 0"></el-empty>
 
       <!-- 分页 -->
       <!-- <div style="text-align: right; margin-top: 20px;">
@@ -76,196 +98,247 @@
         ></el-pagination>
       </div> -->
       <div class="cart-footer">
-        <el-button :disabled="selectedRows.length === 0" type="text" size="mini" @click="deleteSelected">
+        <el-button
+          :disabled="selectedRows.length === 0"
+          type="text"
+          size="mini"
+          @click="deleteSelected"
+        >
           删除选中商品
         </el-button>
         <div class="flex-between">
-            <div class="selected-info">
-                已选商品 <span class="import-text">{{ selectedRows.length }}</span> 件 
-                　　
-                总价: <span class="import-text total-price">{{ totalPrice }}</span> (不含运费)
-            </div>
-            <el-button  type="primary" @click="handleCheckout" :disabled="selectedRows.length === 0">去结算</el-button>
-            </div>
+          <div class="selected-info">
+            已选商品
+            <span class="import-text">{{ selectedRows.length }}</span> 件 　　
+            总价:
+            <span class="import-text total-price">{{ totalPrice }}</span>
+            (不含运费)
+          </div>
+          <el-button
+            type="primary"
+            @click="handleCheckout"
+            :disabled="selectedRows.length === 0"
+            >去结算</el-button
+          >
         </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapActions } from "vuex";
 export default {
-  name: 'OrderList',
-   data () {
-      return {
-          activeTab: 'all',
-          currentPage: 1,
-          pageSize: 10,
-
-          // 订单数据 - 按商家合并商品
-          list: [],
-          selectAll: false,
-      }
+  name: "OrderList",
+  data() {
+    return {
+      activeTab: "all",
+      currentPage: 1,
+      pageSize: 10,
+
+      // 订单数据 - 按商家合并商品
+      list: [],
+      selectAll: false,
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  computed: {
+    selectedRows() {
+      let rows = [];
+      this.list.forEach((v) => {
+        v.goods.forEach((goods) => {
+          if (goods.selected) {
+            rows.push(goods);
+          }
+        });
+      });
+      return rows;
     },
-    mounted() {
-      this.getList()
+    totalPrice() {
+      let price = 0;
+      this.selectedRows.forEach((v) => {
+        price += (v.num * v.sku.price) / 100;
+      });
+      return price.toFixed(2);
     },
-    computed: {
-        selectedRows() {
-          let rows = []
-          this.list.forEach(v=>{
-            v.goods.forEach(goods=>{
-              if (goods.selected) {
-                rows.push(goods)
-              }
-            })
-          })
-          return rows
+  },
+  methods: {
+    ...mapActions(["submitOrderData"]),
+    // 去结算
+    handleCheckout() {
+      // 构建参数数组（多个商品）
+      const orderItems = this.selectedRows.map((goods) => ({
+        product: {
+          id: goods.product.id,
+          title: goods.product.title,
+          headimg: goods.product.headimg,
+          supplier_name: goods.shop_name, // 购物车中供应商信息在shop_name
+          supplier_address: goods.product.supplier_address, // 从商品信息取发货地
+        },
+        sku: {
+          id: goods.sku.id,
+          sku_name: goods.sku.sku_name,
+          price: goods.sku.price, // 原始价格（分）
+          start_number: goods.sku.start_number || 1,
         },
-        totalPrice() {
-          let price = 0
-          this.selectedRows.forEach(v=>{
-            price += v.num * v.sku.price/100
-          })
-          return price.toFixed(2)
+        quantity: goods.num, // 购买数量（购物车中数量字段为num）
+      }));
+
+      // 按供应商分组（下单页需要按供应商展示）
+      const supplierGroups = {};
+      orderItems.forEach((item) => {
+        const supplier = item.product.supplier_name;
+        if (!supplierGroups[supplier]) {
+          supplierGroups[supplier] = [];
         }
+        supplierGroups[supplier].push(item);
+      });
+
+      // Vuex传递
+      this.submitOrderData({
+        from: "cart",
+        groups: supplierGroups, // 按供应商分组的商品数组
+      });
+      this.$router.push("/Order");
     },
-    methods: {
-      getList(){
-        this.post({customBaseURL:"/api"},"/api/cart/get_list",true).then(res=>{
-          let resData = (res.data ||[])
-          let currentSelectGoodsIds = this.selectedRows.map(v=>v.id)
-          resData.forEach(item=>{
-            item.selected = false
-            item.goods.forEach(goods=>{
-              goods.selected = currentSelectGoodsIds.includes(goods.id)
-            })
-          })
-          this.list = resData
-          this.judgeSelectAll()
-        })
-      },
-      handleSelectAll(val) {
-          if (val) {
-            this.list.forEach(t=>{
-              t.goods.forEach(v=>{
-                if (v && v.product &&v.sku && v.sku.flag== "off") {
-                    v.selected = false
-                  } else {
-                      v.selected = true
-                  }
-              })
-            })
-          } else {
-            this.cartList.forEach(t=>{
-              t.selected = false
-            })
-          }
-          this.judgeSelectAll()
-      },
-      handleSelectShop(shop) {
-        if (shop.selected) {
-          shop.goods.forEach(v=>{
-            if (v && v.product &&v.sku && v.sku.flag== "off") {
-                v.selected = false
-            } else {
-                v.selected = true
-            }
-          })
+    getList() {
+      this.post({ customBaseURL: "/api" }, "/api/cart/get_list", true).then(
+        (res) => {
+          let resData = res.data || [];
+          let currentSelectGoodsIds = this.selectedRows.map((v) => v.id);
+          resData.forEach((item) => {
+            item.selected = false;
+            item.goods.forEach((goods) => {
+              goods.selected = currentSelectGoodsIds.includes(goods.id);
+            });
+          });
+          this.list = resData;
+          this.judgeSelectAll();
         }
-        this.judgeSelectAll()
-      },
-      handleSelect() {
-        this.judgeSelectAll()
-      },
-      // 判断全选
-      judgeSelectAll() {
-        this.selectedRows = []
-          this.list.forEach(v=>{
-            if (v.goods.some(x=>x.sku.flag=='on')) {
-              if(v.goods.some(x=>x.sku.flag=="on"&&!x.selected) ) {
-                v.selected = false;
-              } else {
-                v.selected = true;
-              }
+      );
+    },
+    handleSelectAll(val) {
+      if (val) {
+        this.list.forEach((t) => {
+          t.goods.forEach((v) => {
+            if (v && v.product && v.sku && v.sku.flag == "off") {
+              v.selected = false;
             } else {
-              v.selected = false
+              v.selected = true;
             }
-          })
-          
-          if (this.list.every(v=>v.selected) && this.list.length>0) {
-            this.selectAll = true
+          });
+        });
+      } else {
+        this.cartList.forEach((t) => {
+          t.selected = false;
+        });
+      }
+      this.judgeSelectAll();
+    },
+    handleSelectShop(shop) {
+      if (shop.selected) {
+        shop.goods.forEach((v) => {
+          if (v && v.product && v.sku && v.sku.flag == "off") {
+            v.selected = false;
+          } else {
+            v.selected = true;
+          }
+        });
+      }
+      this.judgeSelectAll();
+    },
+    handleSelect() {
+      this.judgeSelectAll();
+    },
+    // 判断全选
+    judgeSelectAll() {
+      this.selectedRows = [];
+      this.list.forEach((v) => {
+        if (v.goods.some((x) => x.sku.flag == "on")) {
+          if (v.goods.some((x) => x.sku.flag == "on" && !x.selected)) {
+            v.selected = false;
           } else {
-            this.selectAll = false
+            v.selected = true;
           }
-      },
+        } else {
+          v.selected = false;
+        }
+      });
 
-      // 购物车加减
-      handleNumChange(goods) {
-        this.post({id: goods.id, num: goods.num,customBaseURL:"/api"},'/api/cart/update_sku').then(res =>{
-						
-				})
-      },
+      if (this.list.every((v) => v.selected) && this.list.length > 0) {
+        this.selectAll = true;
+      } else {
+        this.selectAll = false;
+      }
+    },
 
-      delItem(item){
-				this.post({id: item.id,customBaseURL:"/api"},'/api/cart/del_sku').then(res =>{
-					this.getList()
-				})
-			},
-      deleteSelected() {
-        let ids = this.selectedRows.map(v=>v.id).join(',')
-        this.post({ids: ids,customBaseURL:"/api"},'/api/cart/del_skus').then(res =>{
-          this.getList()
-        })
-      },
+    // 购物车加减
+    handleNumChange(goods) {
+      this.post(
+        { id: goods.id, num: goods.num, customBaseURL: "/api" },
+        "/api/cart/update_sku"
+      ).then((res) => {});
+    },
 
-    
+    delItem(item) {
+      this.post(
+        { id: item.id, customBaseURL: "/api" },
+        "/api/cart/del_sku"
+      ).then((res) => {
+        this.getList();
+      });
+    },
+    deleteSelected() {
+      let ids = this.selectedRows.map((v) => v.id).join(",");
+      this.post({ ids: ids, customBaseURL: "/api" }, "/api/cart/del_skus").then(
+        (res) => {
+          this.getList();
+        }
+      );
+    },
 
-    
     // 分页大小改变
     handleSizeChange(val) {
-        this.pageSize = val;
+      this.pageSize = val;
     },
-    
+
     // 当前页改变
     handleCurrentChange(val) {
-        this.currentPage = val;
+      this.currentPage = val;
     },
-    
-    
+
     // 去付款
     payOrder(orderId) {
-        this.$message({
+      this.$message({
         message: `订单 ${orderId} 去付款`,
-        type: 'info'
-        });
+        type: "info",
+      });
     },
-  
-
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-.bg{
+.bg {
   display: flex;
   flex-direction: column;
-  
+
   ::v-deep .el-button--text {
     color: #6a8a27;
   }
-  ::v-deep .el-tabs__item.is-active{
+  ::v-deep .el-tabs__item.is-active {
     color: #6a8a27;
   }
-  ::v-deep .el-tabs__active-bar{
-    background-color: #6a8a27
+  ::v-deep .el-tabs__active-bar {
+    background-color: #6a8a27;
   }
-  ::v-deep .el-tabs__item:hover{
+  ::v-deep .el-tabs__item:hover {
     color: #6a8a27;
   }
 }
 
-
-
 /* 订单卡片样式 */
 .order-card {
   border-radius: 4px;
@@ -283,8 +356,6 @@ export default {
   font-size: 14px;
 }
 
-
-
 /* 订单商品列表 */
 .order-products {
   padding: 10px 20px;
@@ -323,14 +394,12 @@ export default {
   font-size: 12px;
 }
 
-
-
 .product-box {
   width: 100px;
   text-align: center;
   color: #333;
 }
-.product-quantity{
+.product-quantity {
   width: 160px;
   text-align: center;
   color: #333;
@@ -340,31 +409,31 @@ export default {
   width: 80px;
   color: #333;
 }
-.product-price{
+.product-price {
   color: #ff5252;
 }
 
 .cart-footer {
-display: flex;
-justify-content: space-between;
-align-items: center;
-margin-top: 10px;
-padding: 15px;
-background-color: #f5f7fa;
-border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+  padding: 15px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
 }
 .selected-info {
-color: #666;
-font-size: 14px;
-padding-right: 50px;
+  color: #666;
+  font-size: 14px;
+  padding-right: 50px;
 }
-.import-text{
+.import-text {
   color: #c7020b;
   font-size: 20px;
   font-weight: bold;
 }
-.total-price{
-  &::before{
+.total-price {
+  &::before {
     content: "¥";
     margin-right: 5px;
     font-size: 12px;