From 8a81e16f6e673fb5a047ecbb2e5f66e492b2a349 Mon Sep 17 00:00:00 2001
From: 13713575202 <1345916905@qq.com>
Date: Thu, 12 Jun 2025 15:46:55 +0800
Subject: [PATCH 1/2] =?UTF-8?q?xiabin=E4=BF=AE=E6=94=B9=E8=B4=AD=E7=89=A9?=
 =?UTF-8?q?=E8=BD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layouts/component/Header/index.vue    |   2 +-
 sub-operation-service/src/router/index.js     |  58 +-
 .../src/views/shoppingCarts/addressLists.vue  | 763 ++++++++++++++++++
 .../views/shoppingCarts/components/common.vue |  59 ++
 .../shoppingCarts/components/ischeck.vue      |  70 ++
 .../shoppingCarts/components/leftMenu.vue     | 137 ++++
 .../components/tableComponent.vue             | 335 ++++++++
 .../shoppingCarts/components/userHeader.vue   | 115 +++
 .../src/views/shoppingCarts/orderSuccesss.vue | 357 ++++++++
 .../src/views/shoppingCarts/paySuccesss.vue   |  99 +++
 .../src/views/shoppingCarts/shoppingCarts.vue | 610 ++++++++++++++
 .../src/views/shoppingCarts/sureOrders.vue    | 601 ++++++++++++++
 .../views/userCenter/components/leftMenu.vue  |   4 +-
 .../src/views/userCenter/paySuccess.vue       |   2 +-
 14 files changed, 3199 insertions(+), 13 deletions(-)
 create mode 100644 sub-operation-service/src/views/shoppingCarts/addressLists.vue
 create mode 100644 sub-operation-service/src/views/shoppingCarts/components/common.vue
 create mode 100644 sub-operation-service/src/views/shoppingCarts/components/ischeck.vue
 create mode 100644 sub-operation-service/src/views/shoppingCarts/components/leftMenu.vue
 create mode 100644 sub-operation-service/src/views/shoppingCarts/components/tableComponent.vue
 create mode 100644 sub-operation-service/src/views/shoppingCarts/components/userHeader.vue
 create mode 100644 sub-operation-service/src/views/shoppingCarts/orderSuccesss.vue
 create mode 100644 sub-operation-service/src/views/shoppingCarts/paySuccesss.vue
 create mode 100644 sub-operation-service/src/views/shoppingCarts/shoppingCarts.vue
 create mode 100644 sub-operation-service/src/views/shoppingCarts/sureOrders.vue

diff --git a/sub-operation-service/src/layouts/component/Header/index.vue b/sub-operation-service/src/layouts/component/Header/index.vue
index 88d66f2..d564cfc 100644
--- a/sub-operation-service/src/layouts/component/Header/index.vue
+++ b/sub-operation-service/src/layouts/component/Header/index.vue
@@ -150,7 +150,7 @@ const toUserCenter = () => {
 };
 
 const toCart = () => {
-  router.push('/sub-operation-service/userCenter');
+  router.push('/sub-operation-service/shoppingCarts');
 };
 </script>
 
diff --git a/sub-operation-service/src/router/index.js b/sub-operation-service/src/router/index.js
index 0b34291..34a8841 100644
--- a/sub-operation-service/src/router/index.js
+++ b/sub-operation-service/src/router/index.js
@@ -37,11 +37,17 @@ export const constantRoutes = [
     redirect: '/sub-operation-service/userCenter',
     meta: { title: '个人中心' },
     children: [
+      // {
+      //   path: '/sub-operation-service/userCenter',
+      //   component: () => import('@/views/userCenter/shoppingCart.vue'),
+      //   name: 'shoppingCart',
+      //   meta: { title: '我的购物车' },
+      // },
       {
         path: '/sub-operation-service/userCenter',
-        component: () => import('@/views/userCenter/shoppingCart.vue'),
-        name: 'shoppingCart',
-        meta: { title: '我的购物车' },
+        component: () => import('@/views/userCenter/userOrders.vue'),
+        name: 'userOrders',
+        meta: { title: '我的订单', keepAlive: true },
       },
       {
         path: '/sub-operation-service/sureOrder',
@@ -67,12 +73,6 @@ export const constantRoutes = [
         name: 'paySuccess',
         meta: { title: '支付成功' },
       },
-      {
-        path: '/sub-operation-service/userOrders',
-        component: () => import('@/views/userCenter/userOrders.vue'),
-        name: 'userOrders',
-        meta: { title: '我的订单', keepAlive: true },
-      },
       {
         path: '/sub-operation-service/orderDetails',
         component: () => import('@/views/userCenter/orderDetails.vue'),
@@ -106,6 +106,46 @@ export const constantRoutes = [
     ],
   },
 
+  {
+    path: '/sub-operation-service/shoppingCarts',
+    name: 'shoppingCarts',
+    // component: Layout,
+    redirect: '/sub-operation-service/shoppingCarts',
+    meta: { title: '购物车' },
+    children: [
+      {
+        path: '/sub-operation-service/shoppingCarts',
+        component: () => import('@/views/shoppingCarts/shoppingCarts.vue'),
+        name: 'shoppingCartss',
+        meta: { title: '购物车' },
+      },
+      {
+        path: '/sub-operation-service/sureOrders',
+        component: () => import('@/views/shoppingCarts/sureOrders.vue'),
+        name: 'sureOrders',
+        meta: { title: '结算' },
+      },
+      {
+        path: '/sub-operation-service/addressLists',
+        component: () => import('@/views/shoppingCarts/addressLists.vue'),
+        name: 'addressLists',
+        meta: { title: '我的地址' },
+      },
+      {
+        path: '/sub-operation-service/orderSuccesss',
+        component: () => import('@/views/shoppingCarts/orderSuccesss.vue'),
+        name: 'orderSuccesss',
+        meta: { title: '提交订单' },
+      },
+      {
+        path: '/sub-operation-service/paySuccesss',
+        component: () => import('@/views/shoppingCarts/paySuccesss.vue'),
+        name: 'paySuccesss',
+        meta: { title: '支付成功' },
+      },
+    ],
+  },
+
   {
     path: '/sub-operation-service',
     name: 'layout',
diff --git a/sub-operation-service/src/views/shoppingCarts/addressLists.vue b/sub-operation-service/src/views/shoppingCarts/addressLists.vue
new file mode 100644
index 0000000..d6c9a78
--- /dev/null
+++ b/sub-operation-service/src/views/shoppingCarts/addressLists.vue
@@ -0,0 +1,763 @@
+<template>
+  <div>
+    <el-dialog v-model="dialogVisible" title="地址" width="40%" :before-close="handleClose">
+      <el-form :label-position="labelPosition" label-width="130px" :model="formLabelAlign" style="max-width: 1000px">
+        <el-form-item label="联系人" prop="receiverName" :rules="[{ required: true, message: '请输入联系人' }]">
+          <el-input v-model="formLabelAlign.receiverName" />
+        </el-form-item>
+        <el-form-item label="联系人手机号" prop="receiverPhone" :rules="[{ required: true, message: '请输入联系人手机号' }]">
+          <el-input v-model="formLabelAlign.receiverPhone" />
+        </el-form-item>
+        <el-form-item label="省市区" prop="postArea" :rules="[{ required: true, message: '省市区' }]">
+          <el-cascader v-model="formLabelAlign.postArea" style="width: 100%" :props="props" :options="options" @change="handleChange" />
+        </el-form-item>
+        <el-form-item label="详细地址" prop="postAddress" :rules="[{ required: true, message: '详细地址' }]">
+          <el-input v-model="formLabelAlign.postAddress" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
+        </el-form-item>
+        <el-form-item label="默认地址" prop="isDefault" :rules="[{ required: true, message: '默认地址' }]">
+          <el-switch v-model="formLabelAlign.isDefault" style="margin-top: -3px" size="large" active-text="是" inactive-text="否" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submit()"> 确定 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- <common current-name="addressList">
+      <template #main> -->
+    <div class="my-shoping-car-warp">
+      <userHeader :title="'我的地址'"></userHeader>
+      <div class="page-content-warp">
+        <div class="fix-top">
+          <div class="do-all" @click="toCheckAll">
+            <!-- <div class="do-all-pos">
+                  <ischeck :value="isAll"></ischeck>
+                  <span class="all-txt">全选</span>
+                </div> -->
+          </div>
+          <div>
+            <div class="up-text" @click="add()">
+              添加地址
+              <!-- <el-icon><Plus color="#000000" /></el-icon> <span class="del-txt">新增</span> -->
+            </div>
+            <!-- <div class="batch-del" @click="doBatchDel">
+                  <el-icon><Delete /></el-icon> <span class="del-txt">批量删除</span>
+                </div> -->
+          </div>
+        </div>
+        <div v-if="data.length <= 0" class="empty">
+          <img style="width: 300px; height: 300px" src="../../assets/images/empty.png" alt="" />
+        </div>
+        <div v-else class="conetnt-warp">
+          <div class="content-item-warp" :style="{ height: tableViewportHeight + 'px' }">
+            <tableComponent
+              :table-data="data"
+              :columns="columns"
+              :show-border="false"
+              :show-selection="fasle"
+              :header-cell-class-name="getHeaderClass"
+              @page-change="handlePaginationChange"
+              @selection-change="handleSelectionChange"
+            >
+              <template #isDefault="slotProps">
+                <div
+                  :class="[slotProps.row.isDefault == '1' ? 'pr' : 'er']"
+                  style="width: 120px; display: flex; align-items: center; justify-content: flex-start"
+                >
+                  {{ slotProps.row.isDefault == '1' ? '是' : '否' }}
+                  <!-- <el-checkbox
+                        :disabled="slotProps.row.isDefault == '1' ? false : true"
+                        :checked="slotProps.row.isDefault == '1' ? true : false"
+                        size="large"
+                      /> -->
+                </div>
+              </template>
+
+              <template #postAddress="slotProps">
+                <div style="display: flex; align-items: center">{{ slotProps.row.postArea.join(',') }}{{ slotProps.row.postAddress }}</div>
+              </template>
+
+              <template #action="slotProps">
+                <div style="width: 100px; display: flex; align-items: center; justify-content: space-between">
+                  <div class="upButton" @click="showDialogVisible(slotProps.row)">编辑</div>
+                  <div class="upButton" @click="del(slotProps.row)">删除</div>
+                </div>
+              </template>
+            </tableComponent>
+            <!-- <el-table
+                  :show-selection="true"
+                  :header-cell-class-name="getHeaderClass"
+                  :data="data"
+                  style="width: 100%"
+                  @page-change="handlePaginationChange"
+                  @selection-change="handleSelectionChange"
+                >
+                  <el-table-column prop="date" label="默认收货地址" width="120">
+                    <template #default="slotProps">
+                      <div style="width: 120px; display: flex; align-items: center; justify-content: flex-start">
+                        <el-checkbox
+                          :disabled="slotProps.row.isDefault == '1' ? false : true"
+                          :checked="slotProps.row.isDefault == '1' ? true : false"
+                          size="large"
+                        />
+                      </div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="receiverName" label="收货人" width="120" />
+                  <el-table-column prop="receiverPhone" label="联系电话" width="160" />
+                  <el-table-column label="详细地址">
+                    <template #default="slotProps">
+                      <div style="display: flex; align-items: center">{{ slotProps.row.postArea.join(',') }}{{ slotProps.row.postAddress }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="date" label="操作" width="180">
+                    <template #default="slotProps">
+                      <div style="width: 100px; display: flex; align-items: center; justify-content: space-between">
+                        <div class="upButton" @click="showDialogVisible(slotProps.row)">编辑</div>
+                        <div class="upButton" @click="del(slotProps.row)">删除</div>
+                      </div>
+                    </template>
+                  </el-table-column>
+                </el-table> -->
+            <!-- <div v-for="(n, index) in data" :key="n.id" class="content-item">
+                  <div class="shop-info">
+                    <div class="shop-do" @click="toCheckShop(index)"></div>
+                    <span style="border: 1px solid #dddddd; border-radius: 5px; padding: 3px 5px" class="shop-name txt-ellipsis clamp2"
+                      >联系人：{{ n.receiverName }}，联系人手机号：{{ n.receiverPhone }}，地址：{{ n.postArea }}{{ n.postAddress }}</span
+                    >
+                    <div style="color: #25bf82; font-size: 20px" @click="showDialogVisible(n)">修改</div>
+                    <div style="color: red; font-size: 20px" @click="del(n)">删除</div>
+                  </div>
+                </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- </template>
+    </common> -->
+  </div>
+</template>
+<script setup>
+import common from './components/common.vue';
+import { ref, reactive, computed, onMounted } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+import userHeader from './components/userHeader.vue';
+import ischeck from './components/ischeck.vue';
+import costomImg from '@/components/costomImg.vue';
+import { useApp } from '@/hooks';
+import tableComponent from './components/tableComponent.vue';
+import {
+  shoppingCart,
+  deleteChooseGoods,
+  userPostAddressed,
+  addToCart,
+  delCartGood,
+  userPostAddress,
+  addUserPostAddress,
+  deleteAddress,
+} from '../../apis/user';
+import json from '../../assets/address.json';
+const app = useApp();
+const route = useRoute();
+const router = useRouter();
+
+let number = ref(1);
+let total = ref(99);
+let isAll = ref(false);
+let data = ref([]);
+let page = reactive({
+  current: 1,
+  size: 10,
+});
+let ids = ref([]);
+let dialogVisible = ref(false);
+
+let formLabelAlign = reactive({
+  receiverName: '',
+  receiverPhone: '',
+  postArea: '',
+  postAddress: '',
+  isDefault: false,
+});
+
+const columns = ref([
+  { prop: 'isDefault', label: '是否默认地址', slotName: 'isDefault', width: '180px' },
+  { prop: 'receiverName', label: '联系人' },
+  { prop: 'receiverPhone', label: '联系人手机号' },
+  { prop: 'postAddress', label: '详细地址', slotName: 'postAddress', width: '250px' },
+  { prop: 'action', label: '操作', slotName: 'action', width: '180' },
+]);
+
+const titleRef = ref(null);
+const searchBarRef = ref(null);
+const tableViewportHeight = ref(0);
+// 精确计算可用高度
+const calculateTableHeight = () => {
+  // 获取窗口总高度
+  const windowHeight = window.innerHeight;
+
+  // 获取各组件高度
+  const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
+  const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
+
+  // 计算容器内边距补偿（根据实际样式调整）
+  const paddingCompensation = 60;
+
+  // 最终计算
+  tableViewportHeight.value = windowHeight - headerHeight - searchBarHeight - paddingCompensation - 80;
+  // console.log(tableViewportHeight.value);
+};
+
+// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
+const getHeaderClass = ({ column }) => {
+  return 'custom-header';
+};
+// 分页变化
+const handlePaginationChange = ({ page, pageSize }) => {
+  console.log('分页变化:', page, pageSize);
+  // 这里可以调用API获取新数据
+  // fetchData(page, limit,pageSize)
+};
+// 多选框变化
+const handleSelectionChange = (selection) => {
+  console.log('选中项:', selection);
+};
+
+let nowClickRow = ref(null);
+// 编辑操作
+const handleEdit = (row, num) => {
+  nowClickRow.value = row;
+  console.log('编辑的行:', row);
+  console.log('第几个按钮:', num);
+};
+
+const options = json;
+
+const handleClose = () => {
+  dialogVisible.value = false;
+};
+
+const props = ref({
+  value: 'label',
+});
+
+const showDialogVisible = (data) => {
+  dialogVisible.value = true;
+  formLabelAlign = data;
+  formLabelAlign.isDefault == '1' ? (formLabelAlign.isDefault = true) : (formLabelAlign.isDefault = false);
+  console.log(data);
+};
+
+const submit = (value) => {
+  formLabelAlign.isDefault ? (formLabelAlign.isDefault = '1') : (formLabelAlign.isDefault = '0');
+  if (typeof formLabelAlign.postArea !== 'string') {
+    formLabelAlign.postArea = formLabelAlign.postArea.join(',');
+  }
+  if (formLabelAlign.id) {
+    userPostAddressed(formLabelAlign).then((res) => {
+      dialogVisible.value = false;
+      getUserAddressList();
+    });
+  } else {
+    addUserPostAddress(formLabelAlign).then((res) => {
+      dialogVisible.value = false;
+      getUserAddressList();
+    });
+  }
+
+  //   console.log(formLabelAlign);
+};
+
+onMounted(() => {
+  getUserAddressList();
+  calculateTableHeight();
+});
+
+const handleChange = (value) => {
+  console.log(value);
+  formLabelAlign.postArea = value;
+};
+
+const getUserAddressList = () => {
+  userPostAddress(page).then((res) => {
+    res.data.records.forEach((item) => {
+      item.postArea = item.postArea.split(',');
+    });
+    console.log(res.data.records);
+    data.value = res.data.records;
+    addIsCheckProperty(data);
+  });
+};
+
+function addIsCheckProperty(data) {
+  if (Array.isArray(data)) {
+    data.forEach((item) => {
+      item.ischeck = false; // 为当前层级添加属性
+      if (item.cartDetails) {
+        // 处理子集
+        addIsCheckProperty(item.cartDetails);
+      }
+      if (item.records) {
+        // 处理父级（如存在嵌套结构）
+        addIsCheckProperty(item.records);
+      }
+    });
+  } else if (typeof data === 'object' && data !== null) {
+    data.ischeck = false;
+    for (let key in data) {
+      if (typeof data[key] === 'object') {
+        addIsCheckProperty(data[key]); // 递归处理嵌套对象
+      }
+    }
+  }
+}
+
+const numberChange = (value, index, indexg) => {
+  console.log(value, index, indexg);
+  if (number.value < value) {
+    // addToCart();
+  }
+  number.value = value;
+};
+
+// let totalAmout = computed(() => {
+//   let num = 0;
+//   let list = [];
+//   if (data && data.value.length > 0) {
+//     list = data.value
+//       .map((m) => {
+//         return m.cartDetails;
+//       })
+//       .flat();
+//     if (list && list.length > 0) {
+//       num = list.reduce((acc, current) => {
+//         return acc + (current.ischeck ? current.price * current.quantity : 0);
+//       }, 0);
+//     }
+//   }
+
+//   return num;
+// });
+
+const toSettlement = () => {
+  router.push('/sub-operation-service/sureOrder');
+};
+
+const toCheckAll = () => {
+  isAll.value = !isAll.value;
+  console.info('操作全选', isAll.value);
+  if (data && data.value.length > 0) {
+    data.value.forEach((m) => {
+      m.ischeck = isAll.value;
+      if (m.cartDetails && m.cartDetails.length > 0) {
+        m.cartDetails = setCheck(m.cartDetails, isAll.value);
+        m.cartDetails.forEach((res, index) => {
+          ids.value.push(res.id);
+        });
+      }
+    });
+  }
+};
+
+const setCheck = (data, val) => {
+  let list = [];
+  if (data && data.length > 0) {
+    list = data.map((m) => {
+      return { ...m, ischeck: val };
+    });
+  }
+
+  return list;
+};
+
+const toCheckShop = (index) => {
+  if (index > -1) {
+    data.value[index].ischeck = !data.value[index].ischeck;
+    if (data.value[index].cartDetails && data.value[index].cartDetails.length > 0) {
+      data.value[index].cartDetails = setCheck(data.value[index].cartDetails, data.value[index].ischeck);
+    }
+    setIsAll();
+  }
+};
+
+const toCheckGood = (indexP, index) => {
+  if (indexP > -1 && index > -1) {
+    let list = data.value[indexP].cartDetails;
+    list[index].ischeck = !list[index].ischeck;
+    let len = list.length || 0;
+    let checkNum = list.reduce((acc, current) => {
+      return acc + (current.ischeck ? 1 : 0);
+    }, 0);
+
+    if (checkNum > 0 && checkNum < len) {
+      data.value[indexP].ischeck = false;
+    } else if (checkNum > 0 && checkNum == len) {
+      data.value[indexP].ischeck = true;
+    } else {
+      data.value[indexP].ischeck = false;
+    }
+    setIsAll();
+  }
+};
+
+const setIsAll = () => {
+  let len = data.value.length || 0;
+  let checkNum = data.value.reduce((acc, current) => {
+    return acc + (current.ischeck ? 1 : 0);
+  }, 0);
+
+  if (checkNum > 0 && checkNum < len) {
+    isAll.value = false;
+  } else if (checkNum > 0 && checkNum == len) {
+    isAll.value = true;
+  } else {
+    isAll.value = false;
+  }
+};
+
+const doSingleDel = (indexP, index) => {
+  if (indexP > -1 && index > -1) {
+    app
+      .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+      .then(() => {
+        deleteChooseGoods({ goodsIds: [data.value[indexP].cartDetails[index].id] });
+        data.value[indexP].cartDetails.splice(index, 1);
+      })
+      .catch(() => {});
+  }
+};
+//单个删除
+const del = (data) => {
+  app
+    .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(() => {
+      deleteAddress(data.id);
+      getUserAddressList();
+    })
+    .catch(() => {});
+};
+//批量删除
+const doBatchDel = () => {
+  const allUnchecked = isAllUnchecked(data.value);
+  console.log(allUnchecked); // true 或 false
+  if (allUnchecked) {
+    app.$message({
+      message: '请先选择要删除的商品',
+      type: 'warning',
+    });
+  } else {
+    app
+      .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+      .then(() => {
+        //  删除逻辑
+        const filteredData = removeCheckedItems(data);
+        // console.log(filteredData);
+        data.value = filteredData;
+        deleteAddress(ids.value[0]);
+      })
+      .catch(() => {});
+  }
+};
+const add = () => {
+  formLabelAlign = reactive({
+    receiverName: '',
+    receiverPhone: '',
+    postArea: '',
+    postAddress: '',
+    isDefault: false,
+  });
+  dialogVisible.value = true;
+};
+// 判断是否全部未选中
+function isAllUnchecked(data) {
+  return data.every((item) => {
+    // 检查当前项的 ischeck 是否为 false
+    const currentUnchecked = item.ischeck === false;
+    // 如果有子项 goodlist，递归检查子项
+    const childrenUnchecked = item.cartDetails ? item.cartDetails.every((child) => child.ischeck === false) : true;
+    return currentUnchecked && childrenUnchecked;
+  });
+}
+//批量删除逻辑
+function removeCheckedItems(data) {
+  return data.filter((item) => {
+    // 如果父项的 ischeck 为 true，直接过滤掉（包括所有子项）
+    if (item.ischeck === true) {
+      return false;
+    }
+
+    // 如果父项的 ischeck 为 false，但子项可能存在 ischeck 为 true 的情况
+    if (item.cartDetails) {
+      item.cartDetails = item.cartDetails.filter((child) => child.ischeck !== true);
+    }
+
+    return true;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.pr {
+  color: #25bf82;
+}
+.er {
+  color: #999999;
+}
+:deep(.el-checkbox__inner) {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  background-color: #25bf82;
+}
+:deep(.el-checkbox__inner::after) {
+  border: none;
+  width: 6px;
+  height: 6px;
+  background: #25bf82;
+}
+
+.up-text {
+  font-size: 20px;
+  color: #25bf82;
+  margin-right: 75px;
+  cursor: pointer;
+}
+.upButton {
+  cursor: pointer;
+  color: #25bf82;
+  font-size: 15px;
+}
+.my-shoping-car-warp {
+  width: 100%;
+  .page-content-warp {
+    position: relative;
+    overflow: hidden;
+    margin: 16px 0 0;
+    width: 100%;
+    height: calc(100vh - 135px);
+    border-radius: 16px;
+    background: $color-fff;
+    .fix-top,
+    .fix-bottom {
+      position: absolute;
+      left: 0;
+      z-index: 1;
+      padding: 16px;
+      width: 100%;
+      background: $color-fff;
+    }
+    .fix-top {
+      top: 0;
+      display: inline-flex;
+      justify-content: space-between;
+      .do-all,
+      .batch-del {
+        display: inline-block;
+        vertical-align: middle;
+        cursor: pointer;
+      }
+      .do-all {
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+        .all-txt {
+          display: inline-block;
+          padding-left: 16px;
+          font-size: 16px;
+          vertical-align: middle;
+        }
+      }
+      .batch-del {
+        padding: 8px 16px;
+        font-size: 16px;
+        border: 1px solid $color-333;
+        border-radius: 16px;
+        .el-icon {
+          font-size: 18px;
+        }
+        .del-txt,
+        .el-icon {
+          display: inline-block;
+          vertical-align: middle;
+        }
+        .del-txt {
+          padding-left: 16px;
+        }
+      }
+    }
+    .fix-bottom {
+      bottom: 0;
+      display: inline-flex;
+      justify-content: space-between;
+      width: 100%;
+      .bottom-total,
+      .bottom-do {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      .bottom-total {
+        .tips,
+        .total {
+          display: inline-block;
+          vertical-align: middle;
+        }
+        .tips {
+          font-size: 30px;
+        }
+        .total {
+          padding-left: 16px;
+          font-size: 42px;
+          color: $color-main;
+        }
+        .total::before {
+          content: '￥';
+        }
+      }
+      .bottom-do {
+        display: inline-flex;
+        justify-content: center;
+        flex-direction: column;
+        ::v-deep() {
+          .el-button {
+            display: inline-block !important;
+            padding: 0 40px !important;
+            height: 42px !important;
+            font-size: 18px !important;
+            line-height: 42px !important;
+          }
+        }
+      }
+    }
+    .conetnt-warp {
+      overflow-y: auto;
+      // padding: 80px 16px 96px;
+      width: 100%;
+      height: 100%;
+      .content-item-warp {
+        width: 100%;
+        .content-item {
+          margin-bottom: 16px;
+          width: 100%;
+          cursor: pointer;
+          .shop-info {
+            display: inline-flex;
+            justify-content: flex-start;
+            width: 100%;
+            gap: 16px;
+            .shop-do,
+            .shop-img,
+            .shop-name {
+              display: inline-block;
+              vertical-align: middle;
+            }
+            .shop-img {
+              display: inline-flex;
+              justify-content: center;
+              width: 32px;
+              height: 32px;
+              border-radius: 4px;
+              flex-direction: column;
+            }
+            .shop-do {
+              display: inline-flex;
+              justify-content: center;
+              width: 30px;
+              flex-direction: column;
+            }
+            .shop-name {
+              width: calc(100% - 200px);
+              font-size: 18px;
+              text-align: left;
+            }
+          }
+          .good-list {
+            width: 100%;
+            .good-item {
+              display: inline-flex;
+              justify-content: flex-start;
+              margin: 8px 0;
+              padding-left: 16px;
+              width: 100%;
+              gap: 16px;
+            }
+            .good-do,
+            .good-img,
+            .good-info,
+            .good-price-num {
+              display: inline-block;
+              vertical-align: middle;
+            }
+            .good-do {
+              display: inline-flex;
+              flex-direction: column;
+              justify-content: center;
+              .good-do-pos {
+              }
+            }
+            .good-img {
+              width: 120px;
+              height: 120px;
+            }
+            .good-info {
+              display: inline-flex;
+              justify-content: center;
+              width: 200px;
+              flex-direction: column;
+              .good-info-pos {
+                font-size: 18px;
+                color: $color-666;
+                .txt-ellipsis {
+                  text-align: left;
+                }
+              }
+            }
+            .good-price-num {
+              display: inline-flex;
+              justify-content: center;
+              width: calc(100% - 340px);
+              flex-direction: column;
+              .good-price-num-pos {
+                display: inline-flex;
+                justify-content: space-around;
+                gap: 16px;
+                .price,
+                .total {
+                  font-size: 20px;
+                }
+                .price {
+                  font-weight: 400;
+                }
+                .total {
+                  font-weight: 700;
+                  color: $color-main;
+                }
+                .total::before {
+                  content: '￥';
+                }
+                .good-del {
+                  font-size: 16px;
+                  color: $color-999;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/shoppingCarts/components/common.vue b/sub-operation-service/src/views/shoppingCarts/components/common.vue
new file mode 100644
index 0000000..4a581bf
--- /dev/null
+++ b/sub-operation-service/src/views/shoppingCarts/components/common.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="ecommerce-common-warp">
+    <div class="ecommerce-common-content">
+      <div class="left-menu">
+        <slot v-if="$slots.left" name="left"></slot>
+        <template v-else>
+          <leftMenu :current-name="currentName"></leftMenu>
+        </template>
+      </div>
+      <div class="common-content">
+        <slot v-if="$slots.main" name="main"></slot>
+        <template v-else></template>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue';
+import leftMenu from './leftMenu.vue';
+
+const props = defineProps({
+  currentName: { type: String, default: 'agricultural' },
+});
+</script>
+<style lang="scss" scoped>
+.ecommerce-common-warp {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  height: 100%;
+
+  // height: calc(100vh - 230px);
+  text-align: center;
+  .ecommerce-common-content {
+    display: inline-flex;
+    justify-content: space-between;
+    margin: auto;
+    width: $width-main;
+    height: 100%;
+    .left-menu,
+    .common-content {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 8px;
+
+      // height: calc(100% - 16px);
+      border-radius: 8px;
+    }
+    .left-menu {
+      width: 240px;
+      background: $color-fff;
+    }
+    .common-content {
+      margin-left: 16px;
+      width: calc(100% - 240px);
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/shoppingCarts/components/ischeck.vue b/sub-operation-service/src/views/shoppingCarts/components/ischeck.vue
new file mode 100644
index 0000000..8446af9
--- /dev/null
+++ b/sub-operation-service/src/views/shoppingCarts/components/ischeck.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="c-is-check" :style="{ height: size, width: size }" :class="isVal ? 'act' : 'normal'">
+    <!-- @click.stop="doCheck" -->
+    <div class="check-icon">
+      <el-icon><Check /></el-icon>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: '28px',
+  },
+  value: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+let isVal = ref(props.value);
+
+watch(
+  () => props.value,
+  () => {
+    isVal.value = props.value;
+  },
+  {
+    immediate: true,
+  }
+);
+
+const doCheck = () => {
+  //   isVal.value = !isVal.value;
+};
+</script>
+<style lang="scss" scoped>
+.c-is-check {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  border-radius: 20%;
+  vertical-align: middle;
+  cursor: pointer;
+  &.normal {
+    border: 1px solid $color-999;
+    background: $color-fff;
+  }
+  &.act {
+    border: 1px solid $color-main;
+    background: $color-main;
+  }
+  .check-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    .el-icon {
+      font-size: 24px;
+      font-weight: bold;
+      color: $color-fff;
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/shoppingCarts/components/leftMenu.vue b/sub-operation-service/src/views/shoppingCarts/components/leftMenu.vue
new file mode 100644
index 0000000..da046b4
--- /dev/null
+++ b/sub-operation-service/src/views/shoppingCarts/components/leftMenu.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="ecommerce-left-menu-warp">
+    <div class="left-menu">
+      <div>
+        <img :src="getAssetsFile('images/logo.png')?.href" style="width: 90%; height: 80px" />
+      </div>
+      <view
+        v-for="(n, index) in leftMenu"
+        :key="index"
+        class="left-menu-item"
+        :class="currentIndex == index ? 'active' : ''"
+        @click="toLink(n, index)"
+      >
+        <div class="item-img">
+          <img :src="getAssetsFile('images/userCenter/' + n.icon)?.href ?? ''" />
+        </div>
+        <p class="item-title">{{ n.title }}</p>
+      </view>
+    </div>
+  </div>
+</template>
+<script setup name="home">
+import { ref, reactive, onMounted, watch } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps({
+  currentName: { type: String, default: 'agricultural' },
+});
+
+const leftMenu = reactive([
+  { name: 'agricultural', title: '我的购物车', icon: 'menu1.png', path: '/sub-operation-service/userCenter' },
+  // { name: 'supplier', title: '我的订单', icon: 'menu2-1.png', path: '/sub-operation-service/userOrders' },
+  // { name: 'purchaser', title: '我的土地', icon: 'menu3-1.png', path: '/sub-operation-service/userLands' },
+  // { name: 'mySource', title: '我的溯源', icon: 'menu4-1.png', path: '/sub-operation-service/mySource' },
+  // { name: 'myFinance', title: '我的金融', icon: 'menu5-1.png', path: '/sub-operation-service/myFinance' },
+  // { name: 'myBrand', title: '我的品牌', icon: 'menu6-1.png', path: '/sub-operation-service/myBrand' },
+  // { name: 'addressList', title: '我的地址', icon: 'menu7-1.png', path: '/sub-operation-service/addressList' },
+]);
+
+let currentIndex = ref(0);
+
+watch(
+  () => props.currentName,
+  () => {
+    console.info('currentName', props.currentName);
+    currentIndex.value = leftMenu.findIndex((m) => {
+      return m.name == props.currentName;
+    });
+  },
+  { deep: true, immediate: true }
+);
+
+//监听currentIndex变化
+watch(
+  () => currentIndex.value,
+  () => {
+    console.info('currentIndex', currentIndex.value);
+    leftMenu.forEach((item, index) => {
+      // 处理图标数据，如果没有有 -1 后缀，则添加
+      if (!item.icon.includes('-1')) {
+        // 仅处理不包含 -1 的项
+        const [name, ext] = item.icon.split('.');
+        item.icon = `${name}-1.${ext}`; // 添加 -1
+      }
+      if (index == currentIndex.value) {
+        // // 如果是当前项，则去掉 -1 后缀
+        item.icon = item.icon.replace('-1', '');
+      }
+    });
+  },
+  { deep: true, immediate: true }
+);
+
+const toLink = (n, index) => {
+  // console.log('leftMenu', leftMenu);
+
+  currentIndex.value = index;
+
+  // leftMenu.forEach((item, i) => {
+  //   // 处理图标数据，如果没有有 -1 后缀，则添加
+  //   if (!item.icon.includes('-1')) {
+  //     // 仅处理不包含 -1 的项
+  //     const [name, ext] = item.icon.split('.');
+  //     item.icon = `${name}-1.${ext}`; // 添加 -1
+  //   }
+  //   // 如果是当前项，则去掉 -1 后缀
+  //   if (i == index) {
+  //     item.icon = item.icon.replace('-1', '');
+  //   }
+  // });
+  console.log('currentIndex.value', currentIndex.value);
+
+  router.push(n.path);
+};
+</script>
+<style lang="scss" scoped>
+.ecommerce-left-menu-warp {
+  width: 100%;
+  height: 100%;
+  .left-menu {
+    .left-menu-item {
+      width: 100%;
+      display: inline-flex;
+      justify-content: flex-start;
+      padding: 16px 0 16px 16px;
+      cursor: pointer;
+      &.active {
+        color: $color-main;
+      }
+      .item-img,
+      .item-title {
+        vertical-align: middle;
+      }
+      .item-img {
+        display: inline-block;
+        width: 40px;
+        height: 40px;
+        img {
+          width: 100%;
+          height: auto;
+          display: block;
+        }
+      }
+      .item-title {
+        display: -webkit-inline-box;
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 40px;
+        padding-left: 10px;
+      }
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/shoppingCarts/components/tableComponent.vue b/sub-operation-service/src/views/shoppingCarts/components/tableComponent.vue
new file mode 100644
index 0000000..6b10cc7
--- /dev/null
+++ b/sub-operation-service/src/views/shoppingCarts/components/tableComponent.vue
@@ -0,0 +1,335 @@
+<template>
+  <div class="custom-table-container">
+    <div class="custom-table-tool">
+      <el-form :inline="true" class="demo-form-inline" :label-width="'auto'">
+        <el-form-item label="每页显示">
+          <el-select v-model="internalPageSize" placeholder="请选择" style="width: 100px" @change="pageSizeChange($event)">
+            <el-option v-for="item in pageSizes" :key="item" :label="item" :value="item" />
+          </el-select>
+          <span style="padding: 0 10px">条</span>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-table
+      style="flex: 1; display: flex; flex-direction: column"
+      :max-height="tableMaxHeight"
+      :data="pagedTableData"
+      :border="showBorder"
+      :stripe="showStripe"
+      v-bind="$attrs"
+      :header-cell-class-name="headerCellClassName"
+      :cell-class-name="cellClassName"
+      @selection-change="handleSelectionChange"
+    >
+      <!-- 首列多选框 -->
+      <el-table-column v-if="showSelection" type="selection" width="55" align="center" />
+
+      <template v-for="column in columns" :key="column.prop">
+        <el-table-column
+          :prop="column.prop"
+          :label="column.label"
+          :width="column.width"
+          :align="column.align || 'left'"
+          :sortable="column.sortable"
+          :header-class-name="column.headerClassName"
+        >
+          <!-- 支持插槽 -->
+          <template v-if="column.slotName" #default="scope">
+            <slot :name="column.slotName" :row="scope.row"></slot>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+
+    <div v-if="showPagination" class="pagination-container">
+      <span class="custom-pagination-text">
+        第{{ internalPage }}页，共{{ Math.ceil(internalTotal / internalPageSize) }}页，共{{ internalTotal }}条
+      </span>
+      <div style="flex: 1; display: flex; justify-content: end; text-align: right">
+        <el-pagination
+          v-model:current-page="internalPage"
+          v-model:page-size="internalPageSize"
+          :page-sizes="pageSizes"
+          :small="small"
+          :disabled="disabled"
+          :background="background"
+          layout="prev, pager, next"
+          :total="internalTotal"
+          @current-change="handleCurrentChange"
+        />
+        <span class="custom-pagination-size"> {{ internalPageSize }}条/页 </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  // 表格数据
+  tableData: {
+    type: Array,
+    default: () => [],
+  },
+  // 列配置
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  // 是否显示分页
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否显示边框
+  showBorder: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示斑马纹
+  showStripe: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示首列多选框
+  showSelection: {
+    type: Boolean,
+    default: false,
+  },
+  // 每页显示条数选项
+  pageSizes: {
+    type: Array,
+    default: () => [10, 20, 30, 50],
+  },
+  // 是否使用小型分页样式
+  small: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否为分页按钮添加背景色
+  background: {
+    type: Boolean,
+    default: false,
+  },
+  // 自定义表头类名函数
+  headerCellClassName: {
+    type: Function,
+    default: () => '',
+  },
+  // 自定义单元格类名函数
+  cellClassName: {
+    type: Function,
+    default: () => '',
+  },
+});
+
+const emit = defineEmits(['page-change', 'selection-change']);
+
+// 内部管理的分页状态
+const internalPage = ref(1);
+const internalPageSize = ref(props.pageSizes?.[0] || 10);
+const internalTotal = ref(0);
+
+// 计算当前页显示的数据
+const pagedTableData = computed(() => {
+  const start = (internalPage.value - 1) * internalPageSize.value;
+  const end = start + internalPageSize.value;
+  return props.tableData.slice(start, end);
+});
+
+// 计算总页数（可根据实际需求调整）
+watch(
+  () => props.tableData,
+  (newData) => {
+    internalTotal.value = newData.length; // 示例：假设总数据量是当前显示的3倍
+  },
+  { immediate: true }
+);
+
+// 分页大小改变
+const pageSizeChange = (val) => {
+  console.log(`每页 ${val} 条`);
+  internalPageSize.value = val;
+  internalPage.value = 1; // 重置为第一页
+  console.log(internalPage.value, internalPageSize.value);
+  emitPageChange();
+};
+
+// 当前页改变
+const handleCurrentChange = (val) => {
+  console.log(`当前页改变 ${val} 页`);
+  internalPage.value = val;
+  emitPageChange();
+};
+
+// 触发分页变化事件
+const emitPageChange = () => {
+  emit('page-change', {
+    page: internalPage.value,
+    pageSize: internalPageSize.value,
+  });
+};
+
+// 多选框变化
+const handleSelectionChange = (selection) => {
+  emit('selection-change', selection);
+};
+
+const tableRef = ref(null);
+const tableMaxHeight = ref(null); // 使用max-height而不是height
+
+// 自动计算最大高度（预留分页器空间）
+const calculateMaxHeight = () => {
+  const paginationHeight = 60; // 分页器固定高度
+  const container = tableRef.value?.$el?.parentElement;
+  if (container) {
+    const containerHeight = container.clientHeight;
+    tableMaxHeight.value = containerHeight - paginationHeight;
+  }
+};
+
+onMounted(() => {
+  calculateMaxHeight();
+  window.addEventListener('resize', calculateMaxHeight);
+
+  // 添加MutationObserver监听父容器尺寸变化
+  const observer = new MutationObserver(calculateMaxHeight);
+  if (tableRef.value?.$el?.parentElement) {
+    observer.observe(tableRef.value.$el.parentElement, {
+      attributes: true,
+      attributeFilter: ['style', 'class'],
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', calculateMaxHeight);
+});
+</script>
+
+<style lang="scss" scoped>
+.custom-table-container {
+  // position: relative;
+  padding: 10px 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* 关键：继承父容器高度 */
+  overflow: hidden; /* 防止内容溢出 */
+}
+/* 表格弹性布局 */
+:deep(.el-table) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  /* 表头固定 */
+  .el-table__header-wrapper {
+    flex-shrink: 0;
+  }
+
+  /* 表体可滚动 */
+  .el-table__body-wrapper {
+    flex: 1;
+    overflow: auto;
+  }
+}
+
+.demo-form-inline {
+  text-align: left;
+  padding-left: 20px;
+}
+.pagination-container {
+  margin-top: 10px;
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  color: #999;
+  font-weight: 400;
+}
+
+.custom-pagination-text {
+  flex: 1;
+  text-align: left;
+  line-height: 32px;
+}
+
+.custom-pagination-size {
+  text-align: right;
+  line-height: 32px;
+  margin-left: 20px;
+}
+
+/* 去除表格边框 */
+:deep(.el-table) {
+  --el-table-border-color: transparent;
+}
+
+/* 自定义鼠标悬停颜色 */
+:deep(.el-table__body tr:hover > td) {
+  background-color: rgba(37, 191, 130, 0.1) !important;
+}
+
+/* 自定义表头样式 */
+:deep(.custom-header) {
+  background-color: #fff !important;
+  color: #999;
+  font-weight: 400;
+}
+
+:deep(.el-pagination) {
+  /* 整体分页样式 */
+  font-size: 14px;
+  font-weight: normal;
+
+  /* 页码按钮容器 */
+  .el-pager {
+    /* 所有页码项 */
+    li {
+      font-weight: 400; /* 普通页码字体不加粗 */
+      color: #606266; /* 普通页码颜色 */
+      background: transparent;
+      font-size: 14px;
+
+      /* 当前选中页码 */
+      &.active,
+      &.is-active {
+        font-weight: 400 !important; /* 当前页不加粗 */
+        color: #25bf82 !important; /* 自定义当前页颜色 - 橙色示例 */
+      }
+
+      /* 悬停状态 */
+      &:hover {
+        color: #409eff;
+      }
+    }
+  }
+
+  /* 上一页/下一页按钮 */
+  .btn-prev,
+  .btn-next {
+    font-weight: 400;
+
+    &:disabled {
+      color: #c0c4cc;
+    }
+  }
+
+  /* 每页条数选择器 */
+  .el-pagination__sizes {
+    .el-input__inner {
+      font-weight: 400;
+    }
+  }
+
+  /* 跳页输入框 */
+  .el-pagination__jump {
+    font-weight: 400;
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/shoppingCarts/components/userHeader.vue b/sub-operation-service/src/views/shoppingCarts/components/userHeader.vue
new file mode 100644
index 0000000..82ce71c
--- /dev/null
+++ b/sub-operation-service/src/views/shoppingCarts/components/userHeader.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="c-user-page-top">
+    <div class="title">
+      <div class="title-pos">{{ pageTitle }}</div>
+    </div>
+    <div class="top-right">
+      <div v-for="(n, index) in linkList" :key="n.name" class="right-item" :class="currentLink == n.name ? 'act' : ''" @click="toLink(n)">
+        <!-- 只有满足条件的项显示 Tooltip -->
+        <el-tooltip v-if="n.title === '我的'" class="box-item" placement="bottom">
+          <template #content> multiple lines<br />second line </template>
+          <div class="iconfont" :class="'icon-' + n.icon" :style="{ 'font-size': n.iconSize }"></div>
+        </el-tooltip>
+
+        <!-- 其他项直接显示图标（无 Tooltip） -->
+        <div v-else class="iconfont" :class="'icon-' + n.icon" :style="{ 'font-size': n.iconSize }"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '标题',
+  },
+});
+
+let pageTitle = ref(props.title);
+
+let linkList = reactive([
+  // { title: '帮助', name: 'help', icon: 'problem', iconSize: '30px', path: '' },
+  // { title: '我的', name: 'my', icon: 'user', iconSize: '30px', path: '/sub-operation-service/userCenter' },
+  { title: '首页', name: 'home', icon: 'home', iconSize: '30px', path: '/sub-operation-service/smartFarm/main' },
+]);
+
+let currentLink = ref(null);
+
+watch(
+  () => props.title,
+  () => {
+    pageTitle.value = props.title;
+  },
+  {
+    immediate: true,
+  }
+);
+
+const toLink = (item) => {
+  currentLink.value = item.name;
+  if (item.path && item.path != '') {
+    router.push(item.path);
+  }
+};
+</script>
+<style lang="scss" scoped>
+.c-user-page-top {
+  display: inline-flex;
+  justify-content: space-between;
+  width: 100%;
+  .title,
+  .top-right {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+  .title {
+    display: inline-flex;
+    justify-content: center;
+    font-size: 22px;
+    font-weight: 500;
+    flex-direction: column;
+    .title-pos {
+      margin-top: 40px;
+    }
+  }
+  .top-right {
+    justify-content: flex-start;
+    gap: 40px;
+    .right-item {
+      position: relative;
+      display: inline-block;
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      background: $color-fff;
+      cursor: pointer;
+      .iconfont {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: inline-block;
+        transform: translate(-50%, -50%);
+      }
+      &.act {
+        border: 1px solid $color-fff;
+        background: $color-main-table-header !important;
+        .iconfont {
+          color: $color-main;
+        }
+      }
+    }
+    .right-item:hover {
+      border: 1px solid $color-fff;
+      background: $color-main-table-header !important;
+      .iconfont {
+        color: $color-main;
+      }
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/shoppingCarts/orderSuccesss.vue b/sub-operation-service/src/views/shoppingCarts/orderSuccesss.vue
new file mode 100644
index 0000000..fa46a0e
--- /dev/null
+++ b/sub-operation-service/src/views/shoppingCarts/orderSuccesss.vue
@@ -0,0 +1,357 @@
+<template>
+  <div>
+    <common current-name="agricultural">
+      <template #main>
+        <div class="order-success-warp">
+          <userHeader :title="'订单支付'"></userHeader>
+          <div class="order-success-content">
+            <div class="content-top">
+              <el-row :gutter="16">
+                <el-col :span="16" align="left">
+                  <div class="back">
+                    <el-icon @click="back"><ArrowLeftBold /></el-icon>
+                    <div class="status-val">
+                      <el-icon><SuccessFilled /></el-icon>
+                      <span>{{ '订单提交成功' }}</span>
+                    </div>
+                  </div>
+                  <div class="status">
+                    <!-- <div class="status-val">
+                      <el-icon><SuccessFilled /></el-icon>
+                      <span>{{ '订单提交成功' }}</span>
+                    </div> -->
+                    <div class="tips">请您及时付款，以便订单尽快完成！</div>
+                    <div class="sub-tips">请您在提交订单后 <span class="txt-main">0时29分59秒</span> 内完成支付，否则订单会自动取消。</div>
+                  </div>
+                </el-col>
+                <el-col :span="8" align="right">
+                  <div class="pay-amount">
+                    <span class="tips">实付款：</span> <span class="total">{{ totalAmout.toFixed(2) }}</span>
+                  </div>
+                  <div class="order-no">交易订单：JY20250101000001</div>
+                </el-col>
+              </el-row>
+            </div>
+
+            <div class="pay-style-warp">
+              <div class="title">支付方式</div>
+              <div
+                style="background-color: #25bf82; padding: 5px 10px; font-size: 20px; font-weight: bold; color: #fff; cursor: pointer"
+                @click="paySuccess"
+              >
+                点击模拟支付
+              </div>
+              <div class="pay-list">
+                <div class="pay-list-pos">
+                  <div
+                    v-for="(s, indexs) in styleList"
+                    :key="s.name"
+                    class="pay-item"
+                    :class="s.name == currentPay ? 'pay-act' : 'pay-normal'"
+                    @click="selectPayStyle(s.name)"
+                  >
+                    <div class="is-style">
+                      <div class="is-style-pos">
+                        <el-icon><CircleCheckFilled /></el-icon>
+                      </div>
+                    </div>
+                    <div class="style-icon" :style="{ background: s.color }">
+                      <div class="iconfont" :class="'icon-' + s.icon"></div>
+                    </div>
+                    <div class="style-txt">
+                      <div class="style-txt-pos">{{ s.title + '支付' || '--' }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="pay-code">
+                <div class="pay-tips">
+                  <span class="tips">
+                    <div class="tips-pos">{{ currentIndex > -1 ? styleList[currentIndex].title + '扫码' : '扫码' }}，支付</div>
+                  </span>
+                  <span class="pay-amount">{{ totalAmout.toFixed(2) }}</span>
+                </div>
+              </div>
+
+              <div class="pay-code-img">
+                <div class="code-img">
+                  <costomImg :url="qrImg" :preview-list="[qrImg]" :is-montage="false" :is-view="false" :fit="'cover'"></costomImg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </common>
+  </div>
+</template>
+<script setup>
+import common from './components/common.vue';
+import { ref, reactive, computed, onMounted } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+import userHeader from './components/userHeader.vue';
+import costomImg from '@/components/costomImg.vue';
+import { qrImg } from '@/layouts/component/Header/base64img.js';
+import { userPostAddress, upOrderInfoList, confirmOrder, payOrder } from '../../apis/user';
+const route = useRoute();
+const router = useRouter();
+// let totalAmout = ref(196);
+let total = ref(99);
+let datalist = ref([]);
+
+let styleList = reactive([
+  { title: '支付宝', name: 'alipay', icon: 'alipay', color: 'rgb(0, 159, 232)' },
+  { title: '微信', name: 'wx', icon: 'wxpay', color: 'rgb(40, 196, 69)' },
+]);
+
+onMounted(() => {
+  getOrderInfo();
+});
+
+const getOrderInfo = () => {
+  upOrderInfoList({ id: route.query.id }).then((res) => {
+    datalist.value = res.data.records;
+  });
+};
+
+let totalAmout = computed(() => {
+  let num = 0;
+  let list = [];
+  if (datalist.value && datalist.value.length > 0) {
+    list = datalist.value
+      .map((m) => {
+        return m.orderItemInfos;
+      })
+      .flat();
+
+    // console.info('totalAmout**************', list);
+    if (list && list.length > 0) {
+      num = list.reduce((acc, current) => {
+        return acc + current.unitPrice * current.quantity;
+      }, 0);
+    }
+  }
+
+  return num;
+});
+
+let currentPay = ref('wx');
+
+const selectPayStyle = (name) => {
+  currentPay.value = name;
+};
+//返回
+let back = () => {
+  router.back();
+};
+
+let currentIndex = computed(() => {
+  let index = -1;
+  index = styleList.findIndex((m) => {
+    return m.name == currentPay.value;
+  });
+  return index;
+});
+
+let payAmout = ref(147);
+
+// 支付成功
+let paySuccess = () => {
+  payOrder({ orderId: route.query.id }).then((res) => {
+    router.push('/sub-operation-service/paySuccesss');
+  });
+};
+</script>
+<style lang="scss" scoped>
+.order-success-warp {
+  width: 100%;
+  .order-success-content {
+    overflow-y: auto;
+    margin-top: 16px;
+    width: 100%;
+    height: calc(100vh - 136px);
+    border-radius: 16px;
+    background: $color-fff;
+    .content-top {
+      padding: 16px;
+      background: $color-main-table-header;
+      .back,
+      .status {
+        display: inline-block;
+        vertical-align: top;
+        padding-left: 16px;
+        .status-val {
+          float: right;
+          font-size: 26px;
+          color: $color-main;
+          margin-left: 20px;
+          .el-icon {
+            display: inline-block;
+            font-size: 32px;
+            vertical-align: middle;
+            margin-top: 0 !important;
+          }
+        }
+        .tips {
+          font-size: 20px;
+        }
+        .sub-tips {
+          font-size: 16px;
+          color: $color-999;
+        }
+      }
+      .status {
+        padding-left: 70px;
+      }
+      .back {
+        cursor: pointer;
+        .el-icon {
+          margin-top: 8px;
+          font-size: 30px;
+        }
+      }
+      .pay-amount {
+        padding-top: 24px;
+        .tips {
+          font-size: 20px;
+        }
+        .total {
+          font-size: 32px;
+          color: $color-main;
+        }
+        .total::before {
+          content: '￥';
+        }
+      }
+      .order-no {
+        font-size: 16px;
+        color: $color-999;
+      }
+    }
+    .pay-style-warp {
+      padding: 16px;
+      width: 100%;
+      .title {
+        width: 100%;
+        font-size: 20px;
+        text-align: left;
+        padding-left: 20px;
+      }
+      .pay-list {
+        display: inline-flex;
+        justify-content: center;
+        margin: 64px 0;
+        width: 100%;
+        .pay-list-pos {
+          display: inline-flex;
+          justify-content: center;
+          gap: 64px;
+        }
+        .pay-item {
+          display: inline-flex;
+          justify-content: flex-start;
+          padding: 24px;
+          border-radius: 16px;
+          gap: 16px;
+          cursor: pointer;
+          .is-style,
+          .style-icon,
+          .style-txt {
+            display: inline-block;
+            vertical-align: middle;
+          }
+          .is-style,
+          .style-txt {
+            display: inline-flex;
+            justify-content: center;
+            flex-direction: column;
+          }
+          .is-style {
+            .el-icon {
+              font-size: 24px;
+            }
+          }
+          .style-txt {
+            font-size: 20px;
+          }
+          .style-icon {
+            position: relative;
+            width: 56px;
+            height: 56px;
+            border-radius: 16px;
+            .iconfont {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              color: $color-fff;
+              transform: translate(-50%, -50%);
+              &.icon-alipay {
+                font-size: 46px !important;
+              }
+              &.icon-wxpay {
+                font-size: 38px !important;
+              }
+            }
+          }
+          &.pay-act {
+            border: 1px solid $color-main;
+            .is-style {
+              .el-icon {
+                color: $color-main;
+              }
+            }
+          }
+          &.pay-normal {
+            border: 1px solid $color-da;
+            .is-style {
+              .el-icon {
+                color: $color-999;
+              }
+            }
+          }
+        }
+      }
+      .pay-code {
+        width: 100%;
+        text-align: center;
+        .pay-tips {
+          .tips,
+          .pay-amount {
+            display: inline-block;
+            vertical-align: middle;
+          }
+          .tips {
+            display: inline-flex;
+            justify-content: center;
+            flex-direction: column;
+            .tips-pos {
+              margin-top: 8px;
+              font-size: 20px;
+            }
+          }
+          .pay-amount {
+            font-size: 32px;
+            color: $color-main;
+          }
+          .pay-amount::before {
+            content: '￥';
+          }
+        }
+      }
+      .pay-code-img {
+        display: inline-flex;
+        justify-content: center;
+        margin: 24px 0;
+        width: 100%;
+        .code-img {
+          display: inline-block;
+          width: 240px;
+          height: 240px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/shoppingCarts/paySuccesss.vue b/sub-operation-service/src/views/shoppingCarts/paySuccesss.vue
new file mode 100644
index 0000000..0ce84ae
--- /dev/null
+++ b/sub-operation-service/src/views/shoppingCarts/paySuccesss.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <common current-name="agricultural">
+      <template #main>
+        <div class="pay-success-warp">
+          <userHeader :title="'订单支付成功'"></userHeader>
+
+          <div class="pay-success-content">
+            <div class="icon-img">
+              <el-icon><CircleCheckFilled /></el-icon>
+            </div>
+            <div class="success-txt">
+              <div class="title">恭喜，支付成功！</div>
+              <div class="tips">查看订单详情，请前往“个人中心”的“我的订单”</div>
+            </div>
+            <div class="success-do">
+              <div class="success-do-pos">
+                <div class="do-item">
+                  <el-button @click="toLink('/sub-operation-service/userCenter')">查看订单</el-button>
+                </div>
+                <div class="do-item">
+                  <el-button type="primary" @click="toLink('/sub-operation-service/smartFarm/main')">返回首页</el-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </common>
+  </div>
+</template>
+<script setup>
+import common from './components/common.vue';
+import { ref, reactive } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+import userHeader from './components/userHeader.vue';
+const route = useRoute();
+const router = useRouter();
+
+let total = ref(99);
+
+const toLink = (path) => {
+  if (path && path != '') {
+    router.push(path);
+  }
+};
+</script>
+<style lang="scss" scoped>
+.pay-success-warp {
+  width: 100%;
+  .pay-success-content {
+    margin-top: 16px;
+    padding: 16px;
+    padding-top: 64px;
+    width: 100%;
+    height: calc(100vh - 136px);
+    border-radius: 16px;
+    text-align: center;
+    background: $color-fff;
+    .icon-img {
+      .el-icon {
+        font-size: 80px;
+        color: $color-main;
+      }
+    }
+    .success-txt {
+      .title {
+        font-size: 38px;
+        color: $color-main;
+      }
+      .tips {
+        font-size: 24px;
+        color: $color-999;
+      }
+    }
+    .success-do {
+      display: inline-flex;
+      justify-content: center;
+      margin: 64px 0;
+      width: 100%;
+      .success-do-pos {
+        display: inline-flex;
+        justify-content: flex-start;
+        gap: 64px;
+        .do-item {
+          display: inline-block;
+          vertical-align: middle;
+          .el-button {
+            padding: 20px 48px !important;
+            font-size: 20px;
+            border-radius: 8px !important;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/shoppingCarts/shoppingCarts.vue b/sub-operation-service/src/views/shoppingCarts/shoppingCarts.vue
new file mode 100644
index 0000000..b30e70f
--- /dev/null
+++ b/sub-operation-service/src/views/shoppingCarts/shoppingCarts.vue
@@ -0,0 +1,610 @@
+<template>
+  <div>
+    <common current-name="agricultural">
+      <template #main>
+        <div class="my-shoping-car-warp">
+          <userHeader :title="'我的购物车'"></userHeader>
+          <div class="page-content-warp">
+            <div class="fix-top">
+              <div class="do-all" @click="toCheckAll">
+                <div class="do-all-pos">
+                  <ischeck :value="isAll"></ischeck>
+                  <span class="all-txt">全选</span>
+                </div>
+              </div>
+              <div class="batch-del" @click="doBatchDel">
+                <el-icon><Delete /></el-icon>
+                <span class="del-txt">批量删除</span>
+              </div>
+            </div>
+            <div v-if="data.length <= 0" class="empty">
+              <img style="width: 300px; height: 300px" src="../../assets/images/empty.png" alt="" />
+            </div>
+            <div v-else class="conetnt-warp">
+              <div class="content-item-warp">
+                <div v-for="(n, index) in data" :key="n.id" class="content-item">
+                  <!-- <div class="shop-img">
+                      <costomImg
+                        :url="'images/ecommerce/' + 'pic.png'"
+                        :preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? '']"
+                        :is-view="false"
+                      ></costomImg>
+                    </div> -->
+                  <!-- <div class="shop-info" @click="toCheckShop(index)">
+                    <div class="shop-do">
+                      <ischeck :value="n.ischeck"></ischeck>
+                    </div>
+                    <span class="shop-name txt-ellipsis clamp2">{{ n.cartName }}</span>
+                  </div> -->
+
+                  <div v-if="n.cartDetails && n.cartDetails.length > 0" class="good-list">
+                    <div v-for="(g, indexg) in n.cartDetails" :key="indexg" class="good-item">
+                      <div class="good-do" @click="toCheckGood(index, indexg)">
+                        <div class="good-do-pos">
+                          <ischeck :value="g.ischeck" size="24px"></ischeck>
+                        </div>
+                      </div>
+                      <div class="good-img" @click="toCheckGood(index, indexg)">
+                        <!-- <costomImg :url="g.productImgUrl" :is-view="false"></costomImg> -->
+                        <img class="good-img" style="border-radius: 5px" :src="g.productImgUrl.split('?')[0]" alt="" />
+                      </div>
+                      <div class="good-info" @click="toCheckGood(index, indexg)">
+                        <div class="good-info-pos">
+                          <div class="txt-ellipsis clamp2">{{ g.productName || '--' }}</div>
+                        </div>
+                      </div>
+                      <div class="good-price-num">
+                        <div class="good-price-num-pos">
+                          <div class="price" @click="toCheckGood(index, indexg)">{{ g.price }} / {{ g.unit }}</div>
+                          <div class="total" @click="toCheckGood(index, indexg)">{{ (g.price * g.quantity).toFixed(2) }}</div>
+                          <div class="num">
+                            <div class="right-item">
+                              <el-input-number v-model="g.quantity" :min="1" @change="numberChange(g.quantity, index, indexg)">
+                                <template #suffix>
+                                  <span>{{ g.unit }}</span>
+                                </template>
+                              </el-input-number>
+                            </div>
+                          </div>
+                          <div class="good-del" @click="doSingleDel(index, indexg)">
+                            <span>删除</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="fix-bottom">
+              <div class="bottom-total">
+                <span class="tips">合计</span>
+                <span class="total">{{ totalAmout.toFixed(2) }}</span>
+              </div>
+              <div class="bottom-do">
+                <el-button :disabled="data.length == 0" :type="data.length != 0 ? 'primary' : 'info'" @click="toSettlement">结算</el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </common>
+  </div>
+</template>
+<script setup>
+import common from './components/common.vue';
+import { ref, reactive, computed, onMounted } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+import userHeader from './components/userHeader.vue';
+import ischeck from './components/ischeck.vue';
+import costomImg from '@/components/costomImg.vue';
+import { useApp } from '@/hooks';
+import { shoppingCart, deleteChooseGoods, addToCart, delCartGood, setGoodsCount, commitOrder } from '../../apis/user';
+
+const app = useApp();
+const route = useRoute();
+const router = useRouter();
+
+let number = ref(1);
+let total = ref(99);
+let isAll = ref(false);
+let data = ref([]);
+let page = reactive({
+  current: 1,
+  size: 100,
+});
+let ids = ref([]);
+
+let datalist = reactive([
+  {
+    id: '01',
+    shop: '银河生态农产品有限公司',
+    shopimg: '',
+    ischeck: false,
+    goodlist: [
+      { id: '001', title: '耿马镇 原生态 有机 西红柿', price: 4.9, unit: '份', num: 2, ischeck: false },
+      { id: '002', title: '耿马镇 原生态 有机 西蓝花', price: 2.6, unit: '份', num: 100, ischeck: false },
+    ],
+  },
+  {
+    id: '02',
+    shop: '方立生态农产品有限公司',
+    shopimg: '',
+    ischeck: false,
+    goodlist: [
+      { id: '001', title: '勐撒镇 原生态 有机 大白菜', price: 4.9, unit: '/份', num: 2, ischeck: false },
+      { id: '002', title: '勐撒镇 原生态 有机 生姜', price: 2.6, unit: '/份', num: 100, ischeck: false },
+    ],
+  },
+  {
+    id: '03',
+    shop: '佳佳生态农产品有限公司',
+    shopimg: '',
+    ischeck: false,
+    goodlist: [
+      { id: '001', title: '勐简镇 原生态 有机 花香蓝莓', price: 4.9, unit: '/份', num: 2, ischeck: false },
+      { id: '002', title: '勐简镇 原生态古树茶', price: 2.6, unit: '/份', num: 100, ischeck: false },
+    ],
+  },
+]);
+
+onMounted(() => {
+  shoppingCart(page).then((res) => {
+    console.log(res.data.records);
+    data.value = res.data.records;
+    addIsCheckProperty(data);
+  });
+});
+
+function addIsCheckProperty(data) {
+  if (Array.isArray(data)) {
+    data.forEach((item) => {
+      item.ischeck = false; // 为当前层级添加属性
+      if (item.cartDetails) {
+        // 处理子集
+        addIsCheckProperty(item.cartDetails);
+      }
+      if (item.records) {
+        // 处理父级（如存在嵌套结构）
+        addIsCheckProperty(item.records);
+      }
+    });
+  } else if (typeof data === 'object' && data !== null) {
+    data.ischeck = false;
+    for (let key in data) {
+      if (typeof data[key] === 'object') {
+        addIsCheckProperty(data[key]); // 递归处理嵌套对象
+      }
+    }
+  }
+}
+
+const numberChange = (value, index, indexg) => {
+  console.log(value, index, indexg);
+  setGoodsCount({ goodsId: data.value[index].cartDetails[indexg].id, count: value });
+};
+
+let totalAmout = computed(() => {
+  let num = 0;
+  let list = [];
+  if (data && data.value.length > 0) {
+    list = data.value
+      .map((m) => {
+        return m.cartDetails;
+      })
+      .flat();
+    if (list && list.length > 0) {
+      num = list.reduce((acc, current) => {
+        return acc + (current.ischeck ? current.price * current.quantity : 0);
+      }, 0);
+    }
+  }
+
+  return num;
+});
+
+const toSettlement = () => {
+  commitOrder({ chooseChartDetails: ids.value }).then((res) => {
+    // router.push('/sub-operation-service/sureOrder');
+    router.push({
+      path: '/sub-operation-service/sureOrders',
+      query: { id: res.data },
+    });
+  });
+};
+
+const toCheckAll = () => {
+  isAll.value = !isAll.value;
+  console.info('操作全选', isAll.value);
+  if (data && data.value.length > 0) {
+    data.value.forEach((m) => {
+      m.ischeck = isAll.value;
+      if (m.cartDetails && m.cartDetails.length > 0) {
+        m.cartDetails = setCheck(m.cartDetails, isAll.value);
+        if (isAll.value) {
+          m.cartDetails.forEach((res, index) => {
+            ids.value.push(res.id);
+          });
+        } else {
+          ids.value = [];
+        }
+      }
+    });
+  }
+
+  console.log(ids.value);
+};
+
+const setCheck = (data, val) => {
+  let list = [];
+  if (data && data.length > 0) {
+    list = data.map((m) => {
+      return { ...m, ischeck: val };
+    });
+  }
+  return list;
+};
+
+const toCheckShop = (index) => {
+  if (index > -1) {
+    data.value[index].ischeck = !data.value[index].ischeck;
+    if (data.value[index].cartDetails && data.value[index].cartDetails.length > 0) {
+      data.value[index].cartDetails = setCheck(data.value[index].cartDetails, data.value[index].ischeck);
+    }
+    setIsAll();
+  }
+};
+
+const toCheckGood = (indexP, index) => {
+  const indexs = ids.value.indexOf(data.value[indexP].cartDetails[index].id);
+  if (indexs !== -1) {
+    // 如果值存在则删除
+    ids.value.splice(indexs, 1);
+  } else {
+    // 如果值不存在则添加
+    ids.value.push(data.value[indexP].cartDetails[index].id);
+  }
+  console.log(ids.value);
+  if (indexP > -1 && index > -1) {
+    let list = data.value[indexP].cartDetails;
+    list[index].ischeck = !list[index].ischeck;
+    let len = list.length || 0;
+    let checkNum = list.reduce((acc, current) => {
+      return acc + (current.ischeck ? 1 : 0);
+    }, 0);
+
+    if (checkNum > 0 && checkNum < len) {
+      data.value[indexP].ischeck = false;
+    } else if (checkNum > 0 && checkNum == len) {
+      data.value[indexP].ischeck = true;
+    } else {
+      data.value[indexP].ischeck = false;
+    }
+    setIsAll();
+  }
+};
+
+const setIsAll = () => {
+  let len = data.value.length || 0;
+  let checkNum = data.value.reduce((acc, current) => {
+    return acc + (current.ischeck ? 1 : 0);
+  }, 0);
+
+  if (checkNum > 0 && checkNum < len) {
+    isAll.value = false;
+  } else if (checkNum > 0 && checkNum == len) {
+    isAll.value = true;
+  } else {
+    isAll.value = false;
+  }
+};
+
+const doSingleDel = (indexP, index) => {
+  let list = [];
+  list.push(data.value[indexP].cartDetails[index].id);
+  if (indexP > -1 && index > -1) {
+    app
+      .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+      .then(() => {
+        deleteChooseGoods({ goodsIds: list.join(',') });
+        data.value[indexP].cartDetails.splice(index, 1);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }
+};
+//批量删除
+const doBatchDel = () => {
+  const allUnchecked = isAllUnchecked(data.value);
+  console.log(allUnchecked); // true 或 false
+  if (allUnchecked) {
+    app.$message({
+      message: '请先选择要删除的商品',
+      type: 'warning',
+    });
+  } else {
+    app
+      .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+      .then(() => {
+        //  删除逻辑
+        // const filteredData = removeCheckedItems(data);
+        // console.log(filteredData);
+        // data.value = filteredData;
+        deleteChooseGoods({ goodsIds: ids.value.join(',') });
+        setTimeout(() => {
+          shoppingCart(page).then((res) => {
+            console.log(res.data.records);
+            data.value = res.data.records;
+            addIsCheckProperty(data);
+          });
+        }, 500);
+      })
+      .catch(() => {});
+  }
+};
+// 判断是否全部未选中
+function isAllUnchecked(data) {
+  return data.every((item) => {
+    // 检查当前项的 ischeck 是否为 false
+    const currentUnchecked = item.ischeck === false;
+    // 如果有子项 goodlist，递归检查子项
+    const childrenUnchecked = item.cartDetails ? item.cartDetails.every((child) => child.ischeck === false) : true;
+    return currentUnchecked && childrenUnchecked;
+  });
+}
+//批量删除逻辑
+function removeCheckedItems(data) {
+  return data.filter((item) => {
+    // 如果父项的 ischeck 为 true，直接过滤掉（包括所有子项）
+    if (item.ischeck === true) {
+      return false;
+    }
+
+    // 如果父项的 ischeck 为 false，但子项可能存在 ischeck 为 true 的情况
+    if (item.cartDetails) {
+      item.cartDetails = item.cartDetails.filter((child) => child.ischeck !== true);
+    }
+
+    return true;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 500px;
+}
+.my-shoping-car-warp {
+  width: 100%;
+  .page-content-warp {
+    position: relative;
+    overflow: hidden;
+    margin: 16px 0 0;
+    width: 100%;
+    height: calc(100vh - 135px);
+    border-radius: 16px;
+    background: $color-fff;
+    .fix-top,
+    .fix-bottom {
+      position: absolute;
+      left: 0;
+      z-index: 1;
+      padding: 16px;
+      width: 100%;
+      background: $color-fff;
+    }
+    .fix-top {
+      top: 0;
+      display: inline-flex;
+      justify-content: space-between;
+      .do-all,
+      .batch-del {
+        display: inline-block;
+        vertical-align: middle;
+        cursor: pointer;
+      }
+      .do-all {
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+        .all-txt {
+          display: inline-block;
+          padding-left: 16px;
+          font-size: 16px;
+          vertical-align: middle;
+        }
+      }
+      .batch-del {
+        padding: 8px 16px;
+        font-size: 16px;
+        border: 1px solid $color-333;
+        border-radius: 16px;
+        .el-icon {
+          font-size: 18px;
+        }
+        .del-txt,
+        .el-icon {
+          display: inline-block;
+          vertical-align: middle;
+        }
+        .del-txt {
+          padding-left: 16px;
+        }
+      }
+    }
+    .fix-bottom {
+      bottom: 0;
+      display: inline-flex;
+      justify-content: space-between;
+      width: 100%;
+      .bottom-total,
+      .bottom-do {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      .bottom-total {
+        .tips,
+        .total {
+          display: inline-block;
+          vertical-align: middle;
+        }
+        .tips {
+          font-size: 30px;
+        }
+        .total {
+          padding-left: 16px;
+          font-size: 42px;
+          color: $color-main;
+        }
+        .total::before {
+          content: '￥';
+        }
+      }
+      .bottom-do {
+        display: inline-flex;
+        justify-content: center;
+        flex-direction: column;
+        ::v-deep() {
+          .el-button {
+            display: inline-block !important;
+            padding: 0 40px !important;
+            height: 42px !important;
+            font-size: 18px !important;
+            line-height: 42px !important;
+          }
+        }
+      }
+    }
+    .conetnt-warp {
+      overflow-y: auto;
+      padding: 80px 16px 96px;
+      width: 100%;
+      height: 100%;
+      .content-item-warp {
+        width: 100%;
+        .content-item {
+          margin-bottom: 16px;
+          width: 100%;
+          cursor: pointer;
+          .shop-info {
+            display: inline-flex;
+            justify-content: flex-start;
+            width: 100%;
+            gap: 16px;
+            .shop-do,
+            .shop-img,
+            .shop-name {
+              display: inline-block;
+              vertical-align: middle;
+            }
+            .shop-img {
+              display: inline-flex;
+              justify-content: center;
+              width: 32px;
+              height: 32px;
+              border-radius: 4px;
+              flex-direction: column;
+            }
+            .shop-do {
+              display: inline-flex;
+              justify-content: center;
+              width: 30px;
+              flex-direction: column;
+            }
+            .shop-name {
+              width: calc(100% - 62px);
+              font-size: 18px;
+              text-align: left;
+            }
+          }
+          .good-list {
+            width: 100%;
+            .good-item {
+              display: inline-flex;
+              justify-content: flex-start;
+              margin: 8px 0;
+              padding-left: 16px;
+              width: 100%;
+              gap: 16px;
+            }
+            .good-do,
+            .good-img,
+            .good-info,
+            .good-price-num {
+              display: inline-block;
+              vertical-align: middle;
+            }
+            .good-do {
+              display: inline-flex;
+              flex-direction: column;
+              justify-content: center;
+              .good-do-pos {
+              }
+            }
+            .good-img {
+              width: 120px;
+              height: 120px;
+            }
+            .good-info {
+              display: inline-flex;
+              justify-content: center;
+              width: 200px;
+              flex-direction: column;
+              .good-info-pos {
+                font-size: 18px;
+                color: $color-666;
+                .txt-ellipsis {
+                  text-align: left;
+                }
+              }
+            }
+            .good-price-num {
+              display: inline-flex;
+              justify-content: center;
+              width: calc(100% - 340px);
+              flex-direction: column;
+              .good-price-num-pos {
+                display: inline-flex;
+                justify-content: space-around;
+                gap: 16px;
+                .price,
+                .total {
+                  font-size: 20px;
+                }
+                .price {
+                  font-weight: 400;
+                }
+                .total {
+                  font-weight: 700;
+                  color: $color-main;
+                }
+                .total::before {
+                  content: '￥';
+                }
+                .good-del {
+                  font-size: 16px;
+                  color: $color-999;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/shoppingCarts/sureOrders.vue b/sub-operation-service/src/views/shoppingCarts/sureOrders.vue
new file mode 100644
index 0000000..b291c56
--- /dev/null
+++ b/sub-operation-service/src/views/shoppingCarts/sureOrders.vue
@@ -0,0 +1,601 @@
+<template>
+  <div>
+    <common current-name="agricultural">
+      <template #main>
+        <div class="sure-order-warp">
+          <userHeader :title="'提交订单'"></userHeader>
+          <div class="addr-list">
+            <div class="addr-list-top">
+              <div class="back">
+                <el-icon @click="goBack()"><ArrowLeftBold /></el-icon>
+                <span>确认收货地址</span>
+              </div>
+              <!-- <div class="addr-manage" @click="goAddressList()">管理地址</div> -->
+            </div>
+            <el-scrollbar>
+              <div class="scrollbar-flex-content">
+                <div
+                  v-for="(item, index) in addrlist"
+                  :key="item.id"
+                  class="addr-item"
+                  :class="currentAddr == item.id ? 'addr-item-act' : 'addr-item-normal'"
+                  @click="selectAddr(item.id)"
+                  @mouseover="hoverAddr(true, index)"
+                  @mouseleave="hoverAddr(false, index)"
+                >
+                  <div class="addr-item-icon">
+                    <div class="icon-pos">
+                      <div class="iconfont icon-location"></div>
+                    </div>
+                  </div>
+                  <div class="addr-item-info">
+                    <div class="region">{{ item.postArea || '--' }}</div>
+                    <div class="addr">{{ item.postAddress || '--' }}</div>
+                    <div class="link-name">
+                      {{ item.receiverName }} {{ item.receiverPhone }} <text v-if="currentAddr == item.id" style="color: #25bf82">当前选中</text>
+                      <!-- <span v-if="item.isEditBtn" class="bj" @click="editAddr(item)">编辑</span> -->
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-scrollbar>
+          </div>
+
+          <div class="order-info">
+            <div class="order-info-top">确认订单信息</div>
+            <div class="order-info-list">
+              <div class="content-item-warp">
+                <div class="content-item-header">
+                  <div class="header-th first">商品</div>
+                  <div class="header-th other">规格</div>
+                  <div class="header-th other">原价</div>
+                  <div class="header-th other">数量</div>
+                  <div class="header-th other">小计</div>
+                </div>
+                <div class="content-item-list">
+                  <div v-for="(n, index) in datalist" :key="index" class="content-item">
+                    <div class="shop-info">
+                      <!-- <div class="shop-img">
+                        <costomImg
+                          :url="'images/ecommerce/' + 'pic.png'"
+                          :preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')]"
+                          :is-view="false"
+                        ></costomImg>
+                      </div> -->
+                      <span class="shop-name txt-ellipsis clamp2">{{ n.shop }}</span>
+                    </div>
+
+                    <div v-if="n.orderItemInfos && n.orderItemInfos.length > 0" class="good-list">
+                      <div v-for="(g, indexg) in n.orderItemInfos" :key="indexg" class="good-item">
+                        <div class="good-img">
+                          <img class="good-img" :src="g.productImage" />
+                        </div>
+                        <!-- :preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')]" -->
+                        <div class="good-info">
+                          <div class="good-info-pos">
+                            <div class="txt-ellipsis clamp2">{{ g.productName || '--' }}</div>
+                          </div>
+                        </div>
+                        <div class="good-price-num">
+                          <div class="good-price-num-pos">
+                            <div class="price">{{ g.unitPrice }} / {{ g.unit }}</div>
+                            <div class="total">{{ g.unitPrice }}</div>
+                            <div class="num">
+                              <div class="right-item">
+                                <el-input-number v-model="g.quantity" :disabled="true" :min="1">
+                                  <template #suffix>
+                                    <span>{{ g.unit }}</span>
+                                  </template>
+                                </el-input-number>
+                              </div>
+                            </div>
+                            <div class="good-total">
+                              {{ (g.unitPrice * g.quantity).toFixed(2) }}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="content-item-bottom">
+                  <div class="num-total">
+                    共
+                    <span class="num-val">{{ totalNum }}</span
+                    >件商品
+                  </div>
+                  <div class="price-total">
+                    <div class="amount cost-item">
+                      <span>商品总价：</span>
+                      <span class="coat-val">{{ totalAmout.toFixed(2) }}</span>
+                    </div>
+                    <div class="freight cost-item">
+                      <span>运费：</span>
+                      <span class="coat-val">{{ carriage.toFixed(2) }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="order-bottom">
+              <div class="bottom-total">
+                <span class="tips">实付款</span>
+                <span class="total">{{ (totalAmout + carriage).toFixed(2) }}</span>
+              </div>
+              <div class="bottom-do">
+                <el-button type="primary" @click="toSureOrder">提交订单</el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </common>
+  </div>
+</template>
+<script setup>
+import { userPostAddress, upOrderInfoList, confirmOrder } from '../../apis/user';
+import common from './components/common.vue';
+import { ref, reactive, computed, onMounted } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+import userHeader from './components/userHeader.vue';
+import { useRoute, useRouter } from 'vue-router';
+const router = useRouter();
+const route = useRoute();
+
+let addrlist = ref([]);
+let currentAddr = ref(0);
+let total = ref(99);
+let orderList = ref([]);
+
+onMounted(() => {
+  getAddressList();
+  getOrderInfo();
+});
+let datalist = ref([
+  // {
+  //   id: '01',
+  //   shop: '银河生态农产品有限公司',
+  //   shopimg: '',
+  //   ischeck: false,
+  //   orderItemInfos: [
+  //     { id: '001', title: '耿马镇 原生态 有机 西红柿', price: 4.9, unit: '份', num: 2, ischeck: false },
+  //     { id: '002', title: '耿马镇 原生态 有机 西蓝花', price: 2.6, unit: '份', num: 100, ischeck: false },
+  //   ],
+  // },
+  // {
+  //   id: '02',
+  //   shop: '方立生态农产品有限公司',
+  //   shopimg: '',
+  //   ischeck: false,
+  //   orderItemInfos: [{ id: '001', title: '勐撒镇 原生态 有机 大白菜', price: 4.9, unit: '份', num: 2, ischeck: false }],
+  // },
+]);
+const getAddressList = () => {
+  userPostAddress().then((res) => {
+    addrlist.value = res.data.records;
+    currentAddr.value = addrlist.value[0].id;
+    console.log(addrlist);
+    addrlist.value.forEach((item) => {
+      if (item.isDefault == '1') {
+        currentAddr.value = item.id;
+      }
+    });
+  });
+};
+
+const goBack = () => {
+  router.back();
+};
+
+const getOrderInfo = () => {
+  upOrderInfoList({ id: route.query.id }).then((res) => {
+    datalist.value = res.data.records;
+  });
+};
+
+const goAddressList = () => {
+  router.push('/sub-operation-service/addressLists');
+};
+
+const selectAddr = (data) => {
+  currentAddr.value = data;
+};
+//鼠标移入移出事件
+const hoverAddr = (data, index) => {
+  console.log('data', data, index);
+  addrlist.value.forEach((item, i) => {
+    if (index == i) {
+      item.isEditBtn = data;
+    }
+  });
+};
+//编辑地址
+const editAddr = (data) => {
+  console.log('data', data);
+};
+
+const toSureOrder = () => {
+  confirmOrder({ id: route.query.id, userChooseAddressId: currentAddr.value }).then((res) => {
+    // router.push('/sub-operation-service/orderSuccess');
+    router.push({
+      path: '/sub-operation-service/orderSuccesss',
+      query: { id: route.query.id },
+    });
+    // useRouter().push({ path: '/sub-operation-service/orderSuccess' });
+  });
+};
+
+let carriage = ref(0);
+let totalAmout = computed(() => {
+  let num = 0;
+  let list = [];
+  if (datalist.value && datalist.value.length > 0) {
+    list = datalist.value
+      .map((m) => {
+        return m.orderItemInfos;
+      })
+      .flat();
+
+    // console.info('totalAmout**************', list);
+    if (list && list.length > 0) {
+      num = list.reduce((acc, current) => {
+        return acc + current.unitPrice * current.quantity;
+      }, 0);
+    }
+  }
+
+  return num;
+});
+
+let totalNum = computed(() => {
+  let num = 0;
+  let list = [];
+  if (datalist && datalist.value.length > 0) {
+    list = datalist.value
+      .map((m) => {
+        return m.orderItemInfos;
+      })
+      .flat();
+
+    if (list && list.length > 0) {
+      num = list.reduce((acc, current) => {
+        return acc + 1;
+      }, 0);
+    }
+  }
+
+  return num;
+});
+</script>
+<style lang="scss" scoped>
+.sure-order-warp {
+  width: 100%;
+  .addr-list {
+    overflow: hidden;
+    margin: 16px 0;
+    padding: 16px;
+    border-radius: 16px;
+    background: $color-fff;
+    .addr-list-top {
+      display: inline-flex;
+      justify-content: space-between;
+      margin-bottom: 16px;
+      width: 100%;
+      .back {
+        font-size: 20px;
+        .el-icon {
+          font-size: 30px;
+        }
+        .el-icon,
+        span {
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+      .addr-manage {
+        font-size: 20px;
+        cursor: pointer;
+      }
+    }
+    .scrollbar-flex-content {
+      display: flex;
+      width: fit-content;
+      gap: 16px;
+    }
+    .addr-item {
+      display: inline-flex;
+      justify-content: flex-start;
+      padding: 16px 8px;
+      width: 280px;
+      border-radius: 16px;
+      background: $color-fff;
+      cursor: pointer;
+      &.addr-item-act {
+        border: 1px solid $color-main;
+        .iconfont {
+          color: $color-main !important;
+        }
+      }
+      &.addr-item-normal {
+        border: 1px solid $color-da;
+      }
+      .addr-item-icon,
+      .addr-item-info {
+        display: inline-block;
+        vertical-align: middle;
+        text-align: left;
+      }
+      .addr-item-icon {
+        display: inline-flex;
+        justify-content: center;
+        flex-direction: column;
+        .iconfont {
+          font-size: 20px;
+          color: $color-666;
+        }
+      }
+      .addr-item-info {
+        padding-left: 8px;
+        font-size: 15px;
+        line-height: 24px;
+        .region,
+        .link-name {
+          color: $color-999;
+          position: relative;
+          .bj {
+            color: #25bf82;
+            position: absolute;
+            right: 0;
+          }
+        }
+      }
+    }
+  }
+  .order-info {
+    position: relative;
+    padding: 16px;
+    width: 100%;
+    height: calc(100vh - 340px);
+    border-radius: 16px;
+    background: $color-fff;
+    .order-info-top,
+    .order-bottom,
+    .order-info-list {
+      position: absolute;
+      left: 0;
+      z-index: 1;
+      padding: 16px;
+      width: 100%;
+    }
+    .order-info-top {
+      top: 0;
+      font-size: 20px;
+    }
+    .order-bottom {
+      bottom: 0;
+      display: inline-flex;
+      justify-content: space-between;
+      .bottom-total,
+      .bottom-do {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      .bottom-total {
+        .tips,
+        .total {
+          display: inline-block;
+          vertical-align: middle;
+        }
+        .tips {
+          font-size: 30px;
+        }
+        .total {
+          padding-left: 16px;
+          font-size: 42px;
+          color: $color-main;
+        }
+        .total::before {
+          content: '￥';
+        }
+      }
+      .bottom-do {
+        display: inline-flex;
+        justify-content: center;
+        flex-direction: column;
+        ::v-deep() {
+          .el-button {
+            display: inline-block !important;
+            padding: 0 40px !important;
+            height: 42px !important;
+            font-size: 18px !important;
+            line-height: 42px !important;
+          }
+        }
+      }
+    }
+    .order-info-list {
+      position: relative;
+      top: 60px;
+      left: 16px;
+      padding: 16px;
+      width: calc(100% - 32px);
+      height: calc(100% - 150px);
+      border-radius: 16px;
+      background: $color-f5;
+      .content-item-warp {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        .content-item-header {
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: inline-flex;
+          justify-content: flex-start;
+          width: 100%;
+          gap: 16px;
+          .header-th {
+            display: inline-block;
+            margin-bottom: 16px;
+            font-size: 20px;
+            color: $color-999;
+            vertical-align: middle;
+            line-height: 32px;
+            &.first {
+              width: 340px;
+              text-align: left;
+            }
+            &.other {
+              width: calc((100% - 340px) / 4);
+              text-align: center;
+            }
+          }
+        }
+        .content-item-list {
+          position: absolute;
+          top: 48px;
+          left: 0;
+          overflow-y: auto;
+          width: 100%;
+          height: calc(100% - 100px);
+        }
+        .content-item {
+          margin-bottom: 16px;
+          width: 100%;
+          cursor: pointer;
+          .shop-info {
+            display: inline-flex;
+            justify-content: flex-start;
+            width: 100%;
+            gap: 16px;
+            .shop-do,
+            .shop-img,
+            .shop-name {
+              display: inline-block;
+              vertical-align: middle;
+            }
+            .shop-img {
+              display: inline-flex;
+              justify-content: center;
+              width: 32px;
+              height: 32px;
+              border-radius: 4px;
+              flex-direction: column;
+            }
+            .shop-do {
+              display: inline-flex;
+              justify-content: center;
+              width: 30px;
+              flex-direction: column;
+            }
+            .shop-name {
+              width: calc(100% - 62px);
+              font-size: 18px;
+            }
+          }
+          .good-list {
+            width: 100%;
+            .good-item {
+              display: inline-flex;
+              justify-content: flex-start;
+              margin: 8px 0;
+              padding-left: 16px;
+              width: 100%;
+              gap: 16px;
+            }
+            .good-do,
+            .good-img,
+            .good-info,
+            .good-price-num {
+              display: inline-block;
+              vertical-align: middle;
+            }
+            .good-do {
+              display: inline-flex;
+              flex-direction: column;
+              justify-content: center;
+              .good-do-pos {
+              }
+            }
+            .good-img {
+              width: 120px;
+              height: 120px;
+            }
+            .good-info {
+              display: inline-flex;
+              justify-content: center;
+              width: 200px;
+              flex-direction: column;
+              .good-info-pos {
+                font-size: 18px;
+                color: $color-666;
+              }
+            }
+            .good-price-num {
+              display: inline-flex;
+              justify-content: center;
+              width: calc(100% - 340px);
+              flex-direction: column;
+              .good-price-num-pos {
+                display: inline-flex;
+                justify-content: space-around;
+                gap: 16px;
+                .price,
+                .total {
+                  font-size: 20px;
+                }
+                .price {
+                  font-weight: 400;
+                }
+                .total {
+                  font-weight: 700;
+                  color: $color-main;
+                }
+                .total::before {
+                  content: '￥';
+                }
+                .good-total {
+                  font-size: 16px;
+                  color: $color-main;
+                }
+              }
+            }
+          }
+        }
+        .content-item-bottom {
+          position: absolute;
+          bottom: -8px;
+          left: 0;
+          z-index: 2;
+          display: inline-flex;
+          justify-content: space-between;
+          width: 100%;
+          line-height: 48px;
+          .num-total,
+          .price-total {
+            display: inline-block;
+            vertical-align: middle;
+            font-size: 20px;
+            .cost-item {
+              display: inline-block;
+              margin: 0 16px;
+              .coat-val::before {
+                content: '￥';
+              }
+            }
+          }
+          .num-total {
+            .num-val {
+              padding: 0 8px;
+              font-size: 24px;
+              font-weight: bold;
+              color: $color-main;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/userCenter/components/leftMenu.vue b/sub-operation-service/src/views/userCenter/components/leftMenu.vue
index d1f2552..5ef4b66 100644
--- a/sub-operation-service/src/views/userCenter/components/leftMenu.vue
+++ b/sub-operation-service/src/views/userCenter/components/leftMenu.vue
@@ -31,8 +31,8 @@ const props = defineProps({
 });
 
 const leftMenu = reactive([
-  { name: 'agricultural', title: '我的购物车', icon: 'menu1.png', path: '/sub-operation-service/userCenter' },
-  { name: 'supplier', title: '我的订单', icon: 'menu2-1.png', path: '/sub-operation-service/userOrders' },
+  // { name: 'agricultural', title: '我的购物车', icon: 'menu1.png', path: '/sub-operation-service/userCenter' },
+  { name: 'supplier', title: '我的订单', icon: 'menu2-1.png', path: '/sub-operation-service/userCenter' },
   // { name: 'purchaser', title: '我的土地', icon: 'menu3-1.png', path: '/sub-operation-service/userLands' },
   { name: 'mySource', title: '我的溯源', icon: 'menu4-1.png', path: '/sub-operation-service/mySource' },
   // { name: 'myFinance', title: '我的金融', icon: 'menu5-1.png', path: '/sub-operation-service/myFinance' },
diff --git a/sub-operation-service/src/views/userCenter/paySuccess.vue b/sub-operation-service/src/views/userCenter/paySuccess.vue
index 073d48f..8f904f9 100644
--- a/sub-operation-service/src/views/userCenter/paySuccess.vue
+++ b/sub-operation-service/src/views/userCenter/paySuccess.vue
@@ -16,7 +16,7 @@
             <div class="success-do">
               <div class="success-do-pos">
                 <div class="do-item">
-                  <el-button @click="toLink('/sub-operation-service/userOrders')">查看订单</el-button>
+                  <el-button @click="toLink('/sub-operation-service/userCenter')">查看订单</el-button>
                 </div>
                 <div class="do-item">
                   <el-button type="primary" @click="toLink('/sub-operation-service/smartFarm/main')">返回首页</el-button>

From 014aa8e02b8b78727dca29984634914fb9f2f380 Mon Sep 17 00:00:00 2001
From: 13713575202 <1345916905@qq.com>
Date: Thu, 12 Jun 2025 16:03:12 +0800
Subject: [PATCH 2/2] =?UTF-8?q?xiabin=E4=BF=AE=E6=94=B9=E8=B4=AD=E7=89=A9?=
 =?UTF-8?q?=E8=BD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/shoppingCarts/shoppingCarts.vue   | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/sub-operation-service/src/views/shoppingCarts/shoppingCarts.vue b/sub-operation-service/src/views/shoppingCarts/shoppingCarts.vue
index b30e70f..eb54efa 100644
--- a/sub-operation-service/src/views/shoppingCarts/shoppingCarts.vue
+++ b/sub-operation-service/src/views/shoppingCarts/shoppingCarts.vue
@@ -86,6 +86,10 @@
                 <el-button :disabled="data.length == 0" :type="data.length != 0 ? 'primary' : 'info'" @click="toSettlement">结算</el-button>
               </div>
             </div>
+            <!-- <div class="pagination">
+              <div style="color: #999999; font-size: 15px">共{{ data.total }}条</div>
+              <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="data.total" />
+            </div> -->
           </div>
         </div>
       </template>
@@ -152,7 +156,6 @@ let datalist = reactive([
 
 onMounted(() => {
   shoppingCart(page).then((res) => {
-    console.log(res.data.records);
     data.value = res.data.records;
     addIsCheckProperty(data);
   });
@@ -446,7 +449,19 @@ function removeCheckedItems(data) {
         }
       }
     }
+    .pagination {
+      padding-left: 20px;
+      align-items: center;
+      display: flex;
+      z-index: 999;
+      width: 65%;
+      height: 40px;
+      background-color: #fff;
+      position: fixed;
+      bottom: 38px;
+    }
     .fix-bottom {
+      // bottom: 30px;
       bottom: 0;
       display: inline-flex;
       justify-content: space-between;