1

src/router/index.js

@@ -124,6 +124,12 @@ const router = new Router({
           meta: { title: '我的发票 - 精品商城', keepAlive: false },
           component: () => import('@/views/User/UserInvoice.vue')
         },
+        {
+          path: 'ShoppingCart',
+          name: 'ShoppingCart',
+          meta: { title: '购物车 - 精品商城', keepAlive: false },
+          component: () => import('@/views/User/ShoppingCart.vue')
+        },
       ],
     },
     {

src/views/User/ShoppingCart.vue

@@ -0,0 +1,226 @@
+<template>
+    <div class="bg">
+          <div class="cart-page common-card">
+            <!-- 购物车标题与全选 -->
+            <div class="cart-header">
+                购物车(全部 {{ totalCount }} 件)
+            </div>
+
+            <!-- 商品列表表格 -->
+            <el-table  :data="currentPageData"  style="width: 100%"
+            @select="selectRow" @select-all="selectAll"
+            ref="multipleTable">
+            <!-- 多选框列 -->
+            <el-table-column type="selection" width="55" align="center"/>
+            <!-- 商品图片 -->
+            <el-table-column  label="商品" prop="image" >
+                <template slot-scope="scope">
+                    <div style="display: flex;align-items: center;">
+                        <img src="https://picsum.photos/200/200?random=1" alt="商品" class="product-img">
+                        <div style="padding-left: 10px;">{{ scope.row.title }}</div>
+                    </div>
+                </template>
+            </el-table-column>
+            <!-- 规格 -->
+            <el-table-column label="规格"  prop="spec" align="center" />
+            <!-- 单价 -->
+            <el-table-column label="单价(元)"  prop="price" align="center" width="100"/>
+            <!-- 数量 -->
+            <el-table-column label="数量"  prop="quantity" width="160" align="center">
+                <template slot-scope="scope">
+                <el-input-number size="small"
+                    v-model="scope.row.quantity"  :min="1" :step="1"/>
+                </template>
+            </el-table-column>
+            <!-- 金额 -->
+            <el-table-column  label="金额(元)"  prop="amount" width="100" align="center">
+                <template slot-scope="scope">
+                ¥{{ scope.row.price * scope.row.quantity }}
+                </template>
+            </el-table-column>
+            <!-- 操作 -->
+            <el-table-column label="操作" width="100" align="center">
+                <template slot-scope="scope">
+                <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+                </template>
+            </el-table-column>
+            </el-table>
+
+            <!-- 分页组件 -->
+            <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[3, 5, 10]"
+            :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="totalCount"
+            style="margin-top: 20px; text-align: right;"
+            />
+
+            <!-- 底部结算栏 -->
+            <div class="cart-footer">
+            <div class="selected-info">
+                已选商品 {{ selectedRows.length }} 件 
+                总价: ¥0 (不含运费)
+            </div>
+            <el-button
+                type="primary"
+                @click="handleCheckout"
+                :disabled="selectedRows.length === 0"
+            >去结算</el-button>
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script>
+export default {
+  name: 'CartPage',
+  data() {
+    return {
+      // 模拟购物车数据（实际可从接口获取）
+      cartData: [
+        { id: 1, image: 'https://via.placeholder.com/60', title: '产品标题产品标题', spec: '规格名称一', price: 349, quantity: 1 },
+        { id: 2, image: 'https://via.placeholder.com/60', title: '产品标题产品标题', spec: '规格名称一', price: 199, quantity: 1 },
+        { id: 3, image: 'https://via.placeholder.com/60', title: '产品标题产品标题', spec: '规格名称一', price: 389, quantity: 1 },
+        { id: 4, image: 'https://via.placeholder.com/60', title: '产品标题产品标题', spec: '规格名称一', price: 249, quantity: 1 },
+        { id: 5, image: 'https://via.placeholder.com/60', title: '产品标题产品标题', spec: '规格名称一', price: 449, quantity: 1 },
+        { id: 6, image: 'https://via.placeholder.com/60', title: '产品标题产品标题', spec: '规格名称二', price: 129, quantity: 1 },
+        { id: 7, image: 'https://via.placeholder.com/60', title: '产品标题产品标题', spec: '规格名称二', price: 279, quantity: 1 }
+      ],
+      
+      // 分页相关
+      pageSize: 3,       // 每页条数
+      currentPage: 1,    // 当前页码
+      
+      // 多选相关
+      selectedRows: [{id:1}] // 记录选中的行ID
+    }
+  },
+  computed: {
+    // 总数量
+    totalCount() {
+      return this.cartData.length
+    },
+    // 当前页数据
+    currentPageData() {
+      const start = (this.currentPage - 1) * this.pageSize
+      const end = start + this.pageSize
+      return this.cartData.slice(start, end)
+    },
+
+  },
+  mounted() {
+    this.refreshTableCheck();
+  },
+  methods: {
+    refreshTableCheck () {
+        this.$nextTick(()=>{
+            let selectIds = this.selectedRows.map(item => item.id)
+            this.currentPageData.forEach(item => {
+                if (selectIds.includes(item.id)) {
+                    this.$refs.multipleTable.toggleRowSelection(item, true);
+                } else {
+                    this.$refs.multipleTable.toggleRowSelection(item, false);
+                }
+            })
+        })
+       
+    },
+    
+    // 表格行选中事件（跨页多选核心：手动维护selectedRows）
+    selectRow(selection ,row) {
+      // 提取选中行的ID
+      let index = this.selectedRows.findIndex(v=>v.id === row.id)
+      console.log(index)
+      if(index>=0){
+        this.selectedRows.splice(index,1)
+      } else {
+        this.selectedRows.push(row)
+      }
+      console.log(this.selectedRows)
+    },
+    selectAll (selection) {
+
+        if (selection.length>0) {
+            let currentNotInselection = selection.filter(v => !this.selectedRows.some(x=>x.id==v.id))
+            this.selectedRows = this.selectedRows.concat(currentNotInselection)
+        } else {
+            // 从selectRows 删掉当前页面的的
+            this.selectedRows = this.selectedRows.filter(v => !this.currentPageData.some(x=>x.id==v.id))
+        }
+        console.log(selection)
+    },
+    
+
+    
+    // 删除事件
+    handleDelete(row) {
+      // 从cartData中移除对应商品
+      this.cartData = this.cartData.filter(item => item.id!== row.id)
+      // 若删除的商品处于选中状态，同步更新selectedRowKeys
+      this.selectedRows = this.selectedRows.filter(v => v.id!== row.id)
+      console.log('删除商品:', row)
+      // 这里可添加接口请求，删除购物车商品逻辑
+      this.refreshTableCheck();
+       
+    },
+    
+    // 分页-每页条数改变
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.currentPage = 1 // 切换条数时重置页码到第1页
+      this.refreshTableCheck();
+    },
+    
+    // 分页-当前页改变
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.refreshTableCheck();
+
+    },
+    
+    // 结算事件
+    handleCheckout() {
+      console.log('去结算，选中商品ID：', this.selectedRows)
+      // 这里可跳转结算页，或调用接口提交订单
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.common-card{
+    width: 100%;
+    background-color: white;
+    padding: 20px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+}
+.cart-page {
+  .cart-header {
+    margin-bottom: 10px;
+    }
+    .product-img {
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
+    }
+    .cart-footer {
+    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;
+    }
+}
+
+
+</style>