From a7487c72addf7e814e5b38ca0ae1db6795949263 Mon Sep 17 00:00:00 2001
From: jiazhipeng <jiazhipeng@xmainc.com>
Date: Fri, 8 Aug 2025 11:34:07 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=94=AF=E4=BB=98=E7=9B=B8=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js                        |   2 +-
 src/router/index.js                |  42 +++++
 src/views/User/Index.vue           |   4 +-
 src/views/User/OrderPay.vue        | 123 +++++++++++++++
 src/views/User/OrderPayB2B.vue     | 187 +++++++++++++++++++++++
 src/views/User/OrderPayCode.vue    | 194 +++++++++++++++++++++++
 src/views/User/OrderPaySuccess.vue |  98 ++++++++++++
 src/views/User/PurchaserAdd.vue    | 238 +++++++++++++++++++++++++++++
 src/views/User/UserAddress.vue     | 197 ++++++++++++++++++++++++
 src/views/User/UserInvoice.vue     | 192 +++++++++++++++++++++++
 10 files changed, 1274 insertions(+), 3 deletions(-)
 create mode 100644 src/views/User/OrderPay.vue
 create mode 100644 src/views/User/OrderPayB2B.vue
 create mode 100644 src/views/User/OrderPayCode.vue
 create mode 100644 src/views/User/OrderPaySuccess.vue
 create mode 100644 src/views/User/PurchaserAdd.vue
 create mode 100644 src/views/User/UserAddress.vue
 create mode 100644 src/views/User/UserInvoice.vue

diff --git a/src/main.js b/src/main.js
index 261908f..e9e8f87 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,7 +14,7 @@ Vue.use(utils)
 // 全局配置
 Vue.config.productionTip = false
 Vue.use(ElementUI)
-Vue.prototype.$http = axios
+// Vue.prototype.$http = axios
 
 // 配置图片懒加载
 Vue.use(VueLazyload, {
diff --git a/src/router/index.js b/src/router/index.js
index 770fb98..4b4edd4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -103,6 +103,18 @@ const router = new Router({
           meta: { title: '我的足迹 - 精品商城', keepAlive: false },
           component: () => import('@/views/User/ViewHistory.vue')
         },
+        {
+          path: 'UserAddress',
+          name: 'UserAddress',
+          meta: { title: '我的收货地址 - 精品商城', keepAlive: false },
+          component: () => import('@/views/User/UserAddress.vue')
+        },
+        {
+          path: 'UserInvoice',
+          name: 'UserInvoice',
+          meta: { title: '我的发票 - 精品商城', keepAlive: false },
+          component: () => import('@/views/User/UserInvoice.vue')
+        },
       ],
     },
     {
@@ -111,6 +123,36 @@ const router = new Router({
       meta: { title: '订单详情 - 精品商城', keepAlive: false },
       component: () => import('@/views/User/OrderDetail.vue')
     },
+    {
+      path: '/PurchaserAdd',
+      name: 'PurchaserAdd',
+      meta: { title: '添加采购单位信息 - 精品商城', keepAlive: false },
+      component: () => import('@/views/User/PurchaserAdd.vue')
+    },
+    {
+      path: '/OrderPay',
+      name: 'OrderPay',
+      meta: { title: '订单支付 - 精品商城', keepAlive: false },
+      component: () => import('@/views/User/OrderPay.vue')
+    },
+    {
+      path: '/OrderPayB2B',
+      name: 'OrderPayB2B',
+      meta: { title: '订单支付 - 精品商城', keepAlive: false },
+      component: () => import('@/views/User/OrderPayB2B.vue')
+    },
+    {
+      path: '/OrderPayCode',
+      name: 'OrderPayCode',
+      meta: { title: '订单支付 - 精品商城', keepAlive: false },
+      component: () => import('@/views/User/OrderPayCode.vue')
+    },
+    {
+      path: '/OrderPaySuccess',
+      name: 'OrderPaySuccess',
+      meta: { title: '订单支付 - 精品商城', keepAlive: false },
+      component: () => import('@/views/User/OrderPaySuccess.vue')
+    },
     
     // {
     //   path: '/user/orders/:id',
diff --git a/src/views/User/Index.vue b/src/views/User/Index.vue
index 77a4ae4..1fe4afd 100644
--- a/src/views/User/Index.vue
+++ b/src/views/User/Index.vue
@@ -21,12 +21,12 @@ export default {
         {title: '我的购物车',path:"" },
         {title: '我的订单',path:"/User/OrderList" },
         {title: '评价管理',path:"" },
-        {title: '我的发票',path:"" },
+        {title: '我的发票',path:"/User/UserInvoice" },
         {title: '我的收藏' ,path:""},
         {title: '我的足迹',path:"/User/ViewHistory" },
         {title: '个人信息',path:"/User/UserInfo" },
         {title: '账号设置',path:"" },
-        {title: '我的收货地址',path:"" }
+        {title: '我的收货地址',path:"/User/UserAddress" }
       ]
     }
   },
diff --git a/src/views/User/OrderPay.vue b/src/views/User/OrderPay.vue
new file mode 100644
index 0000000..e12d9fb
--- /dev/null
+++ b/src/views/User/OrderPay.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="bg">
+    <div class="common-card normal-margin-bottom">
+        <div class="flex-between">
+            <div class="left-box">
+                <div class="success-icon-box"><i style="font-size: 30px;font-weight: bold;color: white;" class="el-icon-check"></i></div>
+                
+                <div style="display: flex;flex-direction: column;justify-content: space-between;">
+                    <div class="success-title">订单提交成功，请尽快完成支付！</div>
+                    <div class="success-subtitle">订单号：<span class="tip-text">XD250731153300007092</span></div>
+                </div>
+            </div>
+            <div class="amount">应付金额：<span class="price">176.00</span></div>
+        </div>
+    </div>
+
+    <div class="common-card ">
+        <div style="font-weight: bold;margin-bottom: 20px;">请<span style="color: #d80200;padding: 0 5px;">点击</span>选择支付方式
+            <span class="tip-text">（提示：您可以先与单位的财务人员确认使用哪种支付方式）</span>
+        </div>
+        <div class="payment-method" @click="selectPayment('/OrderPayB2B')">
+            <div class="payment-name">企业网银 B2B 支付</div>
+            <div class="tip-text">使用单位在银行开通的企业网银 B2B 功能进行支付。支持银行：农行</div>
+        </div>
+        <div class="payment-method" @click="selectPayment('/OrderPayCode')">
+            <div class="payment-name">识别码支付<span class="tip-text">（银行柜台汇款/国库支付/现金、支票汇款/网银支付）</span></div>
+            <div class="tip-text">将供应商的收款账户和识别码提供给单位财务人员</div>
+        </div>
+
+        <div class="note" style="font-size: 14px;">
+            注：识别码用于关联订单与货款，是预算任务完成的重要依据。以银行柜台汇款/国库支付/现金、支票汇款/网银等付款方式支付时，均应填写识别码
+        </div>
+    </div>
+
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrderPay',
+  data() {
+    return {
+
+
+    };
+  },
+    computed: {
+
+    },
+    methods: {
+        selectPayment(path) {
+            this.$router.push({path: path});
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg{
+    display: flex;
+    flex-direction: column;
+    font-size: 16px;
+}
+.common-card{
+    width: 100%;
+    background-color: white;
+    padding: 20px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+}
+
+.left-box{
+    display: flex;
+    align-items: center;
+    
+    .success-icon-box{
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background-color: #67C23A;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20px;
+    }
+    .success-title{
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+}
+.price{
+    color: #d80200;
+    &::before{
+        content: "¥";
+       font-size: 12px;
+    }
+}
+.tip-text{
+    font-size: 14px;
+    color: #999;
+    font-weight: 500;
+}
+
+.payment-method {
+      border: 1px solid #eee;
+      border-radius: 4px;
+      padding: 10px;
+      margin-bottom: 20px;
+      background: #fafafa;
+      cursor: pointer;
+      line-height: 2;
+        .payment-name {
+        font-weight: bold;
+        }
+      .payment-method:last-child {
+        margin-bottom: 0;
+        }
+    }
+</style>
+
+
+
diff --git a/src/views/User/OrderPayB2B.vue b/src/views/User/OrderPayB2B.vue
new file mode 100644
index 0000000..fc5e6d1
--- /dev/null
+++ b/src/views/User/OrderPayB2B.vue
@@ -0,0 +1,187 @@
+<template>
+  <div class="bg">
+    <div class="flex-between" style="margin-bottom: 20px;">
+        <div></div>
+        <div style="color: #d80200;cursor: pointer;" @click="$router.go(-1)">重新选择支付方式</div>
+    </div>
+
+    <div class="common-card normal-margin-bottom">
+        <div class="flex-between">
+            <div class="left-box">
+                <div class="success-icon-box"><i style="font-size: 30px;font-weight: bold;color: white;" class="el-icon-check"></i></div>
+                
+                <div style="display: flex;flex-direction: column;justify-content: space-between;">
+                    <div class="success-title">请选择一家银行，然后通过企业网银B2B进行支付</div>
+                    <div class="success-subtitle">订单号：<span class="tip-text">XD250731153300007092</span></div>
+                </div>
+            </div>
+            <div class="amount">应付金额：<span class="price">176.00</span></div>
+        </div>
+    </div>
+
+    <div class="common-card ">
+        <div class="grid-container">
+            <div class="bank-img" v-for="i in 23" :key="i" @click="activeIndex=i">
+                <img class="bank-img" src="https://static.ticket.sz-trip.com/uploads/20250627/08ca7d74f5a7c6299bc72f29a27c918e.png"></img>
+                <div class="hover-box" v-if="activeIndex==i"></div>
+            </div>
+        </div>
+
+        <div class="flex-between" style="margin-top: 40px;">
+            <div>
+                如您的付款行不在上述银行列表中，请选择 <span style="color: #d80200;">识别码支付</span>。
+            </div>
+            <el-button type="danger" @click="dialogVisible = true">去支付</el-button>
+        </div>
+    </div>
+
+
+    <el-dialog custom-class="error-pay-dialog" :show-close="false" :visible.sync="dialogVisible" width="800px">
+      <div class="dialog-content">
+        <div class="dialog-title">尊敬的客户:</div>
+        <div class="dialog-title">
+          系统未能成功接受到证书信息，导致无法登录网银专业版。此现象可能是多种原因导致，请您根据下述方法进行处理:
+        </div>
+        <ol class="dialog-list">
+          <li>
+            下载安装并运行
+            <a href="#" style="color: #409EFF; text-decoration: underline;">"农业银行网银助手"</a>，
+            帮助您检测问题并根据结果进行修复；
+          </li>
+          <li>请关闭所有打开的IE浏览窗口，重新尝试登录；</li>
+          <li>
+            如仍不能正常登录网银专业版，请参阅
+            <a href="#" style="color: #409EFF; text-decoration: underline;">"对公网上银行常见问题解答"</a>
+            的【登录】部分；
+          </li>
+          <li>
+            您可拨打95599客户服务电话，也可点击
+            <a href="#" style="color: #409EFF; text-decoration: underline;">【在线客服】</a>
+            进入人工服务，将由专人为您提供帮助。
+          </li>
+        </ol>
+
+        <div class="flex-center" style="margin-top: 50px;">
+            <el-button type="primary" size="small" @click="dialogVisible = false">关闭</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrderPay',
+  data() {
+    return {
+        activeIndex:0,
+        data: [],
+        bank: null,
+        dialogVisible: false,
+
+    };
+  },
+    computed: {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg{
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+}
+.common-card{
+    width: 100%;
+    background-color: white;
+    padding: 20px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+}
+
+.left-box{
+    display: flex;
+    align-items: center;
+    
+    .success-icon-box{
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background-color: #67C23A;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20px;
+    }
+    .success-title{
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+}
+.price{
+    color: #d80200;
+    &::before{
+        content: "¥";
+       font-size: 12px;
+    }
+}
+.tip-text{
+    font-size: 14px;
+    color: #999;
+    font-weight: 500;
+}
+
+.grid-container{
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-gap: 20px;
+    .bank-img{
+        width: 180px;
+        height: 50px;
+        position: relative;
+        cursor: pointer;
+        .hover-box{
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, .5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+}
+
+::v-deep .error-pay-dialog{
+    .el-dialog__header{
+        display: none;
+    }
+    .el-dialog__body{
+        
+    }
+    .dialog-content{
+        font-weight: bold;
+        font-size: 14px;
+    }
+    .dialog-title{
+        color: #d80200;
+        line-height: 2;
+    }
+     .dialog-list {
+        margin-top: 20px;
+      margin-left: 40px;
+      line-height: 3;
+    }
+}
+</style>
+
+
+
diff --git a/src/views/User/OrderPayCode.vue b/src/views/User/OrderPayCode.vue
new file mode 100644
index 0000000..72e8d45
--- /dev/null
+++ b/src/views/User/OrderPayCode.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="bg">
+    <div class="flex-between" style="margin-bottom: 20px;">
+        <div></div>
+        <div style="color: #d80200;cursor: pointer;" @click="$router.go(-1)">重新选择支付方式</div>
+    </div>
+
+    <div class="common-card normal-margin-bottom">
+        <div class="flex-between">
+            <div class="left-box">
+                <div class="success-icon-box"><i style="font-size: 30px;font-weight: bold;color: white;" class="el-icon-check"></i></div>
+                
+                <div style="display: flex;flex-direction: column;justify-content: space-between;">
+                    <div class="success-title">请将下方的<span class="red-text">【供应商收款账户】</span>提供给您单位的<span class="red-text">【财务人员】</span>，</div>
+                    <div class="success-subtitle">然后由财务人员完成汇款转账。</div>
+                </div>
+            </div>
+            <div class="amount">应付金额：<span class="price">176.00</span></div>
+        </div>
+    </div>
+
+    <div class="common-card normal-margin-bottom">
+      
+      <div class="tips-title">温馨提示：</div>
+      <ul class="tips-list">
+        <li>本页面仅展示供应商的收款账户信息，不需要进行操作；</li>
+        <li>为确保资金安全，该订单支付只能向此账户汇款，不得向供应商线下提供的任何银行账户汇款；</li>
+        <li>
+          为确保及时对账匹配付款信息，付款时请务必在汇款单的“用途/备注/摘要/附言”处添加识别码，添加内容不超过36个汉字且不能填写任何特殊字符，正确填写方式可参考如下或
+          <a href="#" class="download-link">下载汇款单示例</a>
+        </li>
+      </ul>
+      <div class="example-section">
+        仅填写识别码：<span class="red-text">faw2d8</span>
+      </div>
+      <div class="example-section">
+        若您的汇款行或付款机构对于添加内容有“不得输入纯数字或纯字母”的要求，可在识别码前增加“货款”二字后再录入，如：货款<span class="red-text">faw2d8</span>
+      </div>
+  
+
+
+    </div>
+
+    <div class="common-card ">
+        
+        <div class="card-header">
+            <div>
+                <span style="font-size: 16px;font-weight: bold;padding-right: 20px;">供应商收款账户</span>
+                <el-button type="success" size="medium">货款专用结算账号证明下载</el-button>
+            </div>
+            <div class="action-buttons">
+                <el-button plain type="danger" size="medium">下载账户信息</el-button>
+                <el-button plain type="danger" size="medium">查询账户信息使用</el-button>
+                <el-button plain type="danger" size="medium">打印本页面</el-button>
+            </div>
+        </div>
+
+        <div>
+            <el-descriptions  :column="1" border>
+                <el-descriptions-item label="收款户名">kooriookami</el-descriptions-item>
+                <el-descriptions-item label="收款账号">35610188000170227</el-descriptions-item>
+                <el-descriptions-item label="开户银行">35610188000170227</el-descriptions-item>
+                <el-descriptions-item label="支付金额（元）">176.00</el-descriptions-item>
+                <el-descriptions-item label="识别码"><span style="font-weight: bold;" class="red-text">faw2d8</span></el-descriptions-item>
+                <el-descriptions-item label="联行号">303100000688</el-descriptions-item>
+            </el-descriptions>
+        </div>
+      
+    </div>
+</div>
+
+</template>
+
+<script>
+export default {
+  name: 'OrderPayCode',
+  data() {
+    return {
+
+
+    };
+  },
+    computed: {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg{
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+
+    ::v-deep .el-descriptions-item__label{
+        width: 300px;
+        text-align: center;
+        font-weight: bold;
+    }
+    ::v-deep .el-descriptions-item__content{
+        text-align: center;
+    }
+}
+.common-card{
+    width: 100%;
+    background-color: white;
+    padding: 20px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+}
+
+.left-box{
+    display: flex;
+    align-items: center;
+    
+    .success-icon-box{
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background-color: #67C23A;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20px;
+    }
+    .success-title{
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+}
+.price{
+    color: #d80200;
+    &::before{
+        content: "¥";
+       font-size: 12px;
+    }
+}
+.red-text{
+    color: #d80200;
+}
+.tip-text{
+    font-size: 14px;
+    color: #999;
+    font-weight: 500;
+}
+
+.tips-card {
+  margin-bottom: 20px;
+}
+.tips-title {
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.tips-list {
+  list-style-type: auto;
+  margin-left: 20px;
+  margin-bottom: 10px;
+}
+.tips-list li {
+  margin-bottom: 5px;
+}
+.download-link {
+  color: #409EFF;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.example-section {
+  margin-bottom: 10px;
+  padding-left: 20px;
+}
+
+.special-case-section {
+  margin-bottom: 10px;
+}
+.account-card {
+  margin-bottom: 20px;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.action-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+</style>
+
+
+
diff --git a/src/views/User/OrderPaySuccess.vue b/src/views/User/OrderPaySuccess.vue
new file mode 100644
index 0000000..515da0b
--- /dev/null
+++ b/src/views/User/OrderPaySuccess.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="bg">
+    <div class="success-icon-box">
+        <i style="font-size: 30px;font-weight: bold;color: white;" class="el-icon-check"></i>
+    </div>
+
+    <div class="tip-text">
+        <div>订单提交成功！</div>
+        <div>请您到<router-link to="/User/OrderList">采购人中心&gt;我的订单</router-link>中查看订单发货进度</div>
+    </div>
+                
+    <div class="bottom-btn ">查看我的订单</div>
+    <div class="bottom-btn back-index">返回首页，再逛逛</div>
+</div>
+
+</template>
+
+<script>
+export default {
+  name: 'OrderPayCode',
+  data() {
+    return {
+
+
+    };
+  },
+    computed: {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg{
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+    align-items: center;
+    justify-content: center;
+    padding-top: 100px;
+}
+.success-icon-box{
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background-color: #67C23A;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20px;
+    }
+
+
+.price{
+    color: #d80200;
+    &::before{
+        content: "¥";
+       font-size: 12px;
+    }
+}
+.red-text{
+    color: #d80200;
+}
+.tip-text{
+    text-align: center;
+    margin: 10px 0 30px; 
+    a{
+        color: #d80200;
+        padding: 0 2px;
+        text-decoration: underline;
+        font-weight: bold;
+    }
+}
+.bottom-btn{
+    width: 250px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    background: #d80200;
+    color: white;
+    border-radius: 5px;
+    margin-bottom: 20px;
+    cursor: pointer;
+    font-weight: bold;
+    &.back-index{
+        background: none;
+        border: 1px solid #999;
+        color: #999;
+    }
+}
+
+</style>
+
+
+
diff --git a/src/views/User/PurchaserAdd.vue b/src/views/User/PurchaserAdd.vue
new file mode 100644
index 0000000..046cedb
--- /dev/null
+++ b/src/views/User/PurchaserAdd.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="bg">
+    <!-- 订单状态时间线 -->
+    <div class="common-card normal-margin-bottom">
+        <div class="order-step">
+            <el-steps :active="activeIndex" align-center style="width: 100%;">
+                <el-step :class="[i==activeIndexFlag?'is-current':'']" v-for="(item,i) in activities" :key="i">
+                    <div class="process-title" slot="title">{{ item.status }}</div>
+                    <div slot="icon">
+                        <span v-if="i>=activeIndexFlag">{{i+1}}</span>
+                        <i v-else style="color: #fff;" class="el-icon-check"></i>
+                    </div>
+                </el-step>
+
+            </el-steps>
+        </div>
+    </div>
+
+    <el-card style="width: 100%;">
+        <el-form :model="user" label-width="150px" size="small" >
+          <div class="header-title">单位信息</div>
+          <el-form-item label="营业执照">
+              <el-upload class="avatar-uploader" action="#" :auto-upload="false" 
+              :on-change="handleAvatarChange"  :show-file-list="false">
+              <img  :src="user.avatar" class="avatar" v-if="user.avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+          </el-form-item>
+          <div class="grid-container">
+              <el-form-item label="公司名称：" :rules="inputRequired">
+                <el-input v-model="user.nickname" placeholder="请输入"></el-input>
+              </el-form-item>
+              <el-form-item label="统一信用代码：" :rules="inputRequired">
+                <el-input v-model="user.nickname" placeholder="请输入"></el-input>
+              </el-form-item>
+          </div>
+          <div class="grid-container">
+              <el-form-item label="法人代表：" :rules="inputRequired">
+                <el-input v-model="user.nickname" placeholder="请输入"></el-input>
+              </el-form-item>
+              <div></div>
+          </div>
+          <div class="header-title" style="margin-top: 50px;">联系人信息</div>
+          <div class="grid-container">
+              <el-form-item label="联系人名称：" :rules="inputRequired">
+                <el-input v-model="user.nickname" placeholder="请输入"></el-input>
+              </el-form-item>
+              <el-form-item label="手机号码：" :rules="inputRequired">
+                <el-input v-model="user.nickname" placeholder="请输入"></el-input>
+              </el-form-item>
+          </div>
+          <div class="grid-container">
+              <el-form-item label="公司地址：" :rules="inputRequired">
+                <el-cascader style="width: 100%;" v-model="user.address"  :options="options" filterable></el-cascader>
+              </el-form-item>
+              <el-form-item label="详细地址：" :rules="inputRequired">
+                <el-input v-model="user.nickname" placeholder="请输入"></el-input>
+              </el-form-item>
+          </div>
+          <div class="grid-container">
+              <el-form-item label="邮箱：" :rules="inputRequired">
+                <el-input v-model="user.nickname" placeholder="请输入"></el-input>
+              </el-form-item>
+              <el-form-item label="固定电话：" :rules="inputRequired">
+                <el-input v-model="user.nickname" placeholder="请输入"></el-input>
+              </el-form-item>
+          </div>
+            
+            
+            
+          <div style="display: flex;justify-content: center;margin-top: 50px;">
+            <el-button size="small" type="primary" @click="saveUser">保存</el-button>
+            <el-button size="small" @click="close">关闭</el-button>
+          </div>
+            
+           
+        </el-form>
+    </el-card>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrderDetail',
+  data() {
+    return {
+      activities: [
+        { status: '待完善',  },
+        { status: '信息待审核',  },
+        { status: '审核通过',  },
+      ],
+      options: [
+        {value: 'zhinan',label: '指南', children: [{value: 'shejiyuanze',label: '设计原则',
+            children: [{value: 'yizhi', label: '一致'}]}]},
+      ],
+      activeIndex:2,
+      activeIndexFlag:1,
+      user: {},
+      inputRequired:  { required: true, message: '请输入', trigger: 'blur' },
+      selectRequired: { required: true, message: '请选择', trigger: 'change' },
+
+    };
+  },
+    computed: {
+
+    },
+    methods: {
+          handleAvatarChange(file) {
+            this.user.avatar = URL.createObjectURL(file.raw);
+          },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg{
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+}
+.common-card{
+    width: 100%;
+    background-color: white;
+    padding: 20px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+}
+.order-status {
+      border-right: 1px solid #eee;
+      width: 350px;
+      height: 220px;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      .order-no{
+        color: #999;
+        .el-button{
+            width: fit-content;
+            margin: 0;
+            display: inline-block;
+            padding: 0;
+        }
+      }
+    .status-title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .status-title i {
+      font-size: 24px;
+    }
+
+    .el-button {
+      width: 120px;
+      display: block;
+      margin: 0 auto;
+      
+    }
+}
+.order-step{
+    width: 100%;
+    padding: 20px 20px;
+    display: flex;
+    align-items: center;
+    ::v-deep .el-step__icon.is-text{
+        border: none;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background: #C0C4CC;
+        color: white;
+    }
+    ::v-deep .el-step__line{
+        top: 13px;
+    }
+    ::v-deep .el-step__line-inner{
+        border-color: #C0C4CC;
+    }
+    .process-title{
+        color:#999;
+        font-weight: bold;
+        font-size:18px;
+        margin-top: 10px;
+    }
+    ::v-deep .is-finish .el-step__icon{
+        background: #67C23A;
+    }
+
+    ::v-deep .is-current {
+      .el-step__icon{
+        background: #d80200;
+      }
+      .process-title{
+        color: #d80200;
+      }
+    }
+}
+
+.avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 100px;
+      height: 100px;
+      line-height: 100px;
+      text-align: center;
+}
+::v-deep .avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar {
+  width: 100px;
+  height: 100px;
+  display: block;
+}
+
+.grid-container{
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 20px;
+}
+.header-title{
+  font-weight: bold;
+  margin-bottom: 20px;
+  padding-left: 20px;
+}
+</style>
+
+
+
diff --git a/src/views/User/UserAddress.vue b/src/views/User/UserAddress.vue
new file mode 100644
index 0000000..3aab66d
--- /dev/null
+++ b/src/views/User/UserAddress.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="bg">
+    <el-card style="width: 100%;">
+        <div slot="header" class="clearfix">
+            <span>收货地址</span>
+            <el-button size="small" style="float: right;" type="primary" @click="openDialog('add', {})">新增地址</el-button>
+        </div>
+
+        <el-table :data="addresses" border style="width: 100%;">
+            <el-table-column prop="receiver" label="收货人" width="120"></el-table-column>
+            <el-table-column prop="region" label="所在地区" width="120"></el-table-column>
+            <el-table-column prop="detailAddress" label="详细地址" width="300"></el-table-column>
+            <el-table-column prop="phone" label="手机号码" width="150"></el-table-column>
+            <el-table-column prop="fixedPhone" label="固定电话" width="150"></el-table-column>
+            <el-table-column prop="alias" label="地区别名" width="120"></el-table-column>
+            <el-table-column label="操作" width="200">
+                <template slot-scope="scope">
+                <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
+                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+          <!-- 分页 -->
+        <div style="text-align: right; margin-top: 20px;">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="searchParam.currentPage"
+            :page-sizes="[5, 10, 20]"
+            :page-size="searchParam.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="searchParam.total"
+          ></el-pagination>
+        </div>
+
+
+        
+    </el-card>
+
+
+    <el-dialog :title="`${address.type === 'add' ? '新增' : '编辑'}收货地址`" :visible.sync="dialogVisible" width="700px">
+      <el-form :model="address" label-width="100px" size="small">
+        <el-form-item label="*收货人">
+          <el-input v-model="address.receiver" placeholder="请填写收货人姓名,限制40个字符"></el-input>
+        </el-form-item>
+        <el-form-item label="*所在地区">
+          <el-select v-model="address.region" placeholder="请选择所在地区">
+            <el-option label="北京" value="北京"></el-option>
+            <el-option label="上海" value="上海"></el-option>
+            <el-option label="广州" value="广州"></el-option>
+            <el-option label="深圳" value="深圳"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="*详细地址">
+          <el-input v-model="address.detailAddress" placeholder="请填写详细地址,限制500个字符"></el-input>
+        </el-form-item>
+        <el-form-item label="*手机号码">
+          <el-input v-model="address.phone" placeholder="请填写手机号码,限制11位数字"></el-input>
+        </el-form-item>
+        <el-form-item label="固定电话">
+          <el-input v-model="address.fixedPhone" placeholder="请填写固定号码,限制40个字符"></el-input>
+        </el-form-item>
+        <el-form-item label="地区别名">
+          <el-input v-model="address.alias" placeholder="请填写常用名称,限制40个字符"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisible = false">取消</el-button>
+        <el-button size="small" type="primary" @click="saveAddress">保存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UserInfo',
+  data() {
+    return {
+        user: {},
+        searchParam: {pageSize: 5, currentPage: 1,total: 10},
+        dialogVisible: false,
+        addresses: [
+          {
+            id: 1,
+            receiver: '张三',
+            region: '北京',
+            detailAddress: '北京市朝阳区xx街道xx小区xx号楼xx单元',
+            phone: '13800138000',
+            fixedPhone: '010-12345678',
+            alias: '家'
+          },
+          {
+            id: 2,
+            receiver: '李四',
+            region: '上海',
+            detailAddress: '上海市浦东新区xx街道xx小区xx号楼xx单元',
+            phone: '13900139000',
+            fixedPhone: '021-12345678',
+            alias: '公司'
+          },
+          {
+            id: 3,
+            receiver: '王五',
+            region: '广州',
+            detailAddress: '广州市天河区xx街道xx小区xx号楼xx单元',
+            phone: '13700137000',
+            fixedPhone: '020-12345678',
+            alias: '朋友家'
+          }
+        ],
+        address: {
+          type: 'add',
+          id: '',
+          receiver: '',
+          region: '',
+          detailAddress: '',
+          phone: '',
+          fixedPhone: '',
+          alias: ''
+        }
+    }
+  },
+  methods:{
+        // 分页大小改变
+    handleSizeChange(val) {
+        this.searchParam.pageSize = val;
+    },
+    
+    // 当前页改变
+    handleCurrentChange(val) {
+        this.searchParam.currentPage = val;
+    },
+    openDialog (type, item) {
+      this.address = {
+        type: type,
+        id: item.id || "",
+        receiver: item.receiver || "",
+        region: item.region || "",
+        detailAddress: item.detailAddress || "",
+        phone: item.phone || "",
+        fixedPhone: item.fixedPhone || "",
+        alias: item.alias || ""
+      }
+      this.dialogVisible = true;
+    },
+
+    saveAddress() {
+          if (this.address.id) {
+            // 编辑地址
+            const index = this.addresses.findIndex(item => item.id === this.address.id);
+            if (index !== -1) {
+              this.addresses[index] = { ...this.address };
+            }
+          } else {
+            // 新增地址
+            this.address.id = Date.now();
+            this.addresses.push({ ...this.address });
+          }
+          this.$message({
+            message: '保存成功',
+            type: 'success'
+          });
+          this.dialogVisible = false;
+        },
+        handleEdit(row) {
+          this.address = { ...row };
+          this.dialogVisible = true;
+        },
+        handleDelete(row) {
+          this.$confirm('此操作将永久删除该地址, 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            const index = this.addresses.findIndex(item => item.id === row.id);
+            if (index !== -1) {
+              this.addresses.splice(index, 1);
+            }
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '已取消删除'
+            });
+          });
+        }
+  }
+  
+}
+</script>
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/User/UserInvoice.vue b/src/views/User/UserInvoice.vue
new file mode 100644
index 0000000..2c416fe
--- /dev/null
+++ b/src/views/User/UserInvoice.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="bg">
+    <el-card style="width: 100%;">
+        <div slot="header" class="clearfix">
+            <span>我的发票</span>
+            <el-button size="small" style="float: right;" type="primary" @click="openDialog('add', {})">新增</el-button>
+        </div>
+
+        <el-table :data="addresses" border style="width: 100%;">
+            <el-table-column prop="receiver" label="发票抬头" width="120"></el-table-column>
+            <el-table-column prop="region" label="纳税人识别号" width="120"></el-table-column>
+            <el-table-column prop="detailAddress" label="开户银行" width="300"></el-table-column>
+            <el-table-column prop="phone" label="银行账号" width="150"></el-table-column>
+            <el-table-column prop="fixedPhone" label="注册电话" width="150"></el-table-column>
+            <el-table-column prop="alias" label="注册地址" width="120"></el-table-column>
+            <el-table-column label="操作" width="200">
+                <template slot-scope="scope">
+                <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
+                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+          <!-- 分页 -->
+        <div style="text-align: right; margin-top: 20px;">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="searchParam.currentPage"
+            :page-sizes="[5, 10, 20]"
+            :page-size="searchParam.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="searchParam.total"
+          ></el-pagination>
+        </div>
+
+
+        
+    </el-card>
+
+
+    <el-dialog title="编辑发票抬头" :visible.sync="dialogVisible" width="700px">
+      <el-form :model="address" label-width="120px" size="small">
+        <el-form-item label="*发票抬头">
+          <el-input v-model="address.receiver" placeholder="请填写发票抬头"></el-input>
+        </el-form-item>
+        <el-form-item label="*纳税人识别号">
+          <el-input v-model="address.region" placeholder="请填写纳税人识别号"></el-input>
+        </el-form-item>
+        <el-form-item label="*开户银行">
+          <el-input v-model="address.detailAddress" placeholder="请填写开户银行"></el-input>
+        </el-form-item>
+        <el-form-item label="*银行账号">
+          <el-input v-model="address.phone" placeholder="请填写银行账号"></el-input>
+        </el-form-item>
+        <el-form-item label="注册电话">
+          <el-input v-model="address.fixedPhone" placeholder="请填写注册号码"></el-input>
+        </el-form-item>
+        <el-form-item label="注册地址">
+          <el-input v-model="address.alias" placeholder="请填写注册地址"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisible = false">取消</el-button>
+        <el-button size="small" type="primary" @click="saveAddress">保存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UserInfo',
+  data() {
+    return {
+        user: {},
+        searchParam: {pageSize: 5, currentPage: 1,total: 10},
+        dialogVisible: false,
+        addresses: [
+          {
+            id: 1,
+            receiver: '张三',
+            region: '北京',
+            detailAddress: '北京市朝阳区xx街道xx小区xx号楼xx单元',
+            phone: '13800138000',
+            fixedPhone: '010-12345678',
+            alias: '家'
+          },
+          {
+            id: 2,
+            receiver: '李四',
+            region: '上海',
+            detailAddress: '上海市浦东新区xx街道xx小区xx号楼xx单元',
+            phone: '13900139000',
+            fixedPhone: '021-12345678',
+            alias: '公司'
+          },
+          {
+            id: 3,
+            receiver: '王五',
+            region: '广州',
+            detailAddress: '广州市天河区xx街道xx小区xx号楼xx单元',
+            phone: '13700137000',
+            fixedPhone: '020-12345678',
+            alias: '朋友家'
+          }
+        ],
+        address: {
+          type: 'add',
+          id: '',
+          receiver: '',
+          region: '',
+          detailAddress: '',
+          phone: '',
+          fixedPhone: '',
+          alias: ''
+        }
+    }
+  },
+  methods:{
+        // 分页大小改变
+    handleSizeChange(val) {
+        this.searchParam.pageSize = val;
+    },
+    
+    // 当前页改变
+    handleCurrentChange(val) {
+        this.searchParam.currentPage = val;
+    },
+    openDialog (type, item) {
+      this.address = {
+        type: type,
+        id: item.id || "",
+        receiver: item.receiver || "",
+        region: item.region || "",
+        detailAddress: item.detailAddress || "",
+        phone: item.phone || "",
+        fixedPhone: item.fixedPhone || "",
+        alias: item.alias || ""
+      }
+      this.dialogVisible = true;
+    },
+
+    saveAddress() {
+          if (this.address.id) {
+            // 编辑地址
+            const index = this.addresses.findIndex(item => item.id === this.address.id);
+            if (index !== -1) {
+              this.addresses[index] = { ...this.address };
+            }
+          } else {
+            // 新增地址
+            this.address.id = Date.now();
+            this.addresses.push({ ...this.address });
+          }
+          this.$message({
+            message: '保存成功',
+            type: 'success'
+          });
+          this.dialogVisible = false;
+        },
+        handleEdit(row) {
+          this.address = { ...row };
+          this.dialogVisible = true;
+        },
+        handleDelete(row) {
+          this.$confirm('此操作将永久删除该地址, 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            const index = this.addresses.findIndex(item => item.id === row.id);
+            if (index !== -1) {
+              this.addresses.splice(index, 1);
+            }
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '已取消删除'
+            });
+          });
+        }
+  }
+  
+}
+</script>
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file

From 4d934e4bcefd4d1a97b138a22b39609760e4924d Mon Sep 17 00:00:00 2001
From: jiazhipeng <jiazhipeng@xmainc.com>
Date: Fri, 8 Aug 2025 13:36:49 +0800
Subject: [PATCH 2/2] 1

---
 src/router/index.js             |   6 +
 src/views/User/ShoppingCart.vue | 226 ++++++++++++++++++++++++++++++++
 2 files changed, 232 insertions(+)
 create mode 100644 src/views/User/ShoppingCart.vue

diff --git a/src/router/index.js b/src/router/index.js
index b7f9e26..c44c2da 100644
--- a/src/router/index.js
+++ b/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')
+        },
       ],
     },
     {
diff --git a/src/views/User/ShoppingCart.vue b/src/views/User/ShoppingCart.vue
new file mode 100644
index 0000000..f37f525
--- /dev/null
+++ b/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>