Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev

.gitignore

@@ -23,3 +23,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+sub-operation-service/package-lock.json
+main/package-lock.json
+sub-operation-service/vite.config.js
+main/.eslintrc.cjs

main/.eslintrc.cjs

@@ -39,7 +39,12 @@ module.exports = {
   },
   // 这里时配置规则的,自己看情况配置
   rules: {
-    'prettier/prettier': 'error',
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto', // 允许自动检测换行符
+      },
+    ],
     'no-debugger': 'off',
     'no-unused-vars': 'off',
     'vue/multi-word-component-names': 'off',

sub-operation-service/.env.development

@@ -3,7 +3,7 @@ VITE_PORT = 9526
 VITE_APP_MIAN = 'daimp-front-main'
 VITE_APP_MIAN_URL = 'http://localhost:9000'
 VITE_APP_NAME = 'sub-operation-service'
-VITE_APP_BASE_API = '/platform' 
+VITE_APP_BASE_API = '/apis' 
 VITE_APP_BASE_URL = 'http://192.168.18.99:88'
 VITE_APP_UPLOAD_API = '/uploadApis'
 VITE_APP_UPLOAD_URL = 'http://192.168.18.99:9300'

sub-operation-service/src/apis/agricultural.js

@@ -0,0 +1,19 @@
+import request from '@/utils/axios';
+
+//农资
+
+//获取农资分类查询数据
+export function transaction(params = {}) {
+  return request('goods/business/category/transactionType?type=1', {
+    method: 'GET',
+    params,
+  });
+}
+
+//获取农资列表数据
+export function agriculturalList(params) {
+  return request('goods/business/category/transactionGoodInfo', {
+    method: 'GET',
+    params,
+  });
+}

sub-operation-service/src/components/costomImg.vue

@@ -79,24 +79,23 @@ const toPreview = () => {
   }
   .viewer-btn-warp {
     position: absolute;
+    top: 50%;
+    left: 0;
     display: none;
     width: 100%;
     text-align: center;
-    top: 50%;
-    left: 0;
     transform: translateY(-50%);
   }
   .viewer-btn {
-    background: $color-balck-mask;
     display: inline-block;
     padding: 4px 8px;
+    font-size: 14px;
     border-radius: 16px;
     color: $color-fff;
-    font-size: 14px;
+    background: $color-balck-mask;
     cursor: pointer;
   }
 }
-
 .c-custom-img-warp:hover {
   .viewer-btn-warp {
     display: inline-block !important;

sub-operation-service/src/components/page-layout/index.vue

@@ -19,30 +19,28 @@ const props = defineProps({
 </script>
 <style lang="scss" scoped>
 .page-layout {
-  width: $width-main;
   margin: 0 auto;
+  width: $width-main;
   height: 100%;
   min-height: calc(100vh - 230px);
-  @include flex-row();
+  @include flex-row;
-
   &-left,
   &-main {
+    overflow-y: auto;
+    padding: 8px;
     height: 100%;
     min-height: 100%;
-
     border-radius: 8px;
-    padding: 8px;
-    overflow-y: auto;
   }
   &-left {
-    width: 240px;
     margin-right: 16px;
+    width: 240px;
     background: $color-fff;
   }
   &-main {
-    flex: 1;
-    width: 100%;
     overflow: hidden;
+    width: 100%;
+    flex: 1;
   }
 }
 </style>

sub-operation-service/src/components/page-menu/index-bak.vue

@@ -49,17 +49,15 @@ const todo = (row, toggle) => {
 .page-menu {
   width: 100%;
   height: 100%;
-
   &-item {
-    width: 100%;
-    @include flex-column();
     padding: 16px;
+    width: 100%;
     cursor: pointer;
-
+    @include flex-column;
     .menu {
-      @include flex-row();
+      @include flex-row;
-      align-items: center;
 
+      align-items: center;
       .item-img,
       .item-title {
         vertical-align: middle;
@@ -70,48 +68,42 @@ const todo = (row, toggle) => {
         height: 32px;
       }
       .item-title {
-        flex: 1;
+        padding-left: 8px;
         font-size: 20px;
         font-weight: 400;
-        padding-left: 8px;
+        flex: 1;
-        @include ellipsis();
+        @include ellipsis;
       }
       .el-icon {
         color: $color-primary;
       }
-
       &.active {
         color: $color-primary;
       }
     }
-
     .sub-menu {
-      padding: 10px 0;
       display: block;
-
+      padding: 10px 0;
       &.toggle {
         display: none;
       }
-
       li {
-        padding: 16px;
-        @include flex-row();
         align-items: center;
-
+        padding: 16px;
+        @include flex-row;
         &::before {
-          @include icon-space();
+          @include icon-space;
+
+          margin-right: 22px;
           width: 5px;
           height: 5px;
           border-radius: 3px;
-          background-color: #000;
+          background-color: #000000;
-          margin-right: 22px;
         }
-
         .sub-title {
           font-size: 16px;
-          @include ellipsis();
+          @include ellipsis;
         }
-
         &.active {
           &::before {
             background-color: $color-primary;

sub-operation-service/src/components/page-menu/index.vue

@@ -57,20 +57,20 @@ const active = computed(() => {
     :deep(.el-sub-menu__title) {
       font-size: 20px;
       font-weight: 400;
-
       &:hover {
-        background-color: #fff;
         color: $color-primary;
+        background-color: #ffffff;
       }
     }
     :deep(.el-menu-item) {
-      @include flex-row();
+      @include flex-row;
+
       align-items: center;
       padding: 0 16px !important;
     }
     :deep(.el-sub-menu .el-menu-item) {
-      font-size: 16px;
       padding-left: 50px !important;
+      font-size: 16px;
       &:hover {
         .icon-dot {
           background-color: $color-primary;
@@ -81,7 +81,7 @@ const active = computed(() => {
       font-size: 20px;
     }
     :deep(.el-menu-item.is-active) {
-      background-color: #fff;
+      background-color: #ffffff;
     }
     &:not(.el-menu--collapse) {
       height: 100%;

sub-operation-service/src/components/page-pagination/index.vue

@@ -31,9 +31,9 @@ const emit = defineEmits(['current-change', 'size-change']);
 </script>
 <style lang="scss" scoped>
 .page-pagination {
-  width: 100%;
-  padding: 50px 0;
   display: flex;
   justify-content: center;
+  padding: 50px 0;
+  width: 100%;
 }
 </style>

sub-operation-service/src/layouts/component/Header/index.vue

@@ -115,11 +115,12 @@ const toHome = () => {
 };
 
 const toUserCenter = () => {
+  console.info('toUserCenter', router);
   router.push('/sub-operation-service/userCenter');
 };
 
 const toCart = () => {
-  router.push('/sub-operation-service/userCenter-shoppingCart');
+  router.push('/sub-operation-service/userCenter');
 };
 </script>
 
@@ -139,12 +140,12 @@ const toCart = () => {
         font-size: 20px;
       }
       .el-menu-item:hover {
-        background: none !important;
         color: $color-main;
+        background: none !important;
       }
       .el-menu-item:active {
-        background: none !important;
         color: $color-main;
+        background: none !important;
       }
     }
   }
@@ -154,16 +155,16 @@ const toCart = () => {
   // height: 100%;
   // box-sizing: border-box;
   &-header {
-    width: 1200px;
-    height: 206px;
     overflow: hidden;
     margin: auto;
+    width: 1200px;
+    height: 206px;
     &-top {
       display: flex;
-      height: 44px;
       justify-content: space-between;
       align-items: center;
       padding: 0 32px;
+      height: 44px;
       &-left {
         line-height: 36px;
         .welcome-msg {
@@ -171,15 +172,15 @@ const toCart = () => {
           color: $color-5a;
         }
         .left-link {
-          color: $color-main;
+          display: inline-block;
           margin: 0 10px;
           font-size: 12px;
+          color: $color-main;
           cursor: pointer;
-          display: inline-block;
           .iconfont {
-            color: $color-main;
             display: inline-block;
             margin-right: 2px;
+            color: $color-main;
           }
           .iconfont,
           span {
@@ -189,16 +190,15 @@ const toCart = () => {
       }
       &-right {
         span {
-          color: $color-000;
           margin-left: 25px;
-          line-height: 36px;
           font-size: 12px;
           text-align: center;
+          color: $color-000;
+          line-height: 36px;
           cursor: pointer;
           &:nth-child(1) {
             margin-left: 0;
           }
-
           &.block-icon {
             .iconfont {
               display: inline-block;
@@ -210,10 +210,11 @@ const toCart = () => {
               }
             }
             span {
-              margin-left: 6px;
               display: inline-block;
+              margin-left: 6px;
               vertical-align: middle;
             }
+
             color: $color-main;
           }
         }
@@ -236,27 +237,26 @@ const toCart = () => {
             white-space: nowrap;
           }
           .search-warp {
-            width: 100%;
-            padding-left: 36px;
             position: relative;
+            padding-left: 36px;
+            width: 100%;
             .el-input {
-              flex-grow: 1;
+              width: 100%;
               height: 50px;
               font-size: 18px;
-              width: 100%;
+              flex-grow: 1;
               :deep(.el-input__wrapper) {
                 padding-right: 100px;
               }
             }
-
             .el-button {
               position: absolute;
-              right: 8px;
               top: 50%;
-              transform: translateY(-50%);
+              right: 8px;
-              font-size: 18px;
               padding: 0 24px;
               height: 42px;
+              font-size: 18px;
+              transform: translateY(-50%);
             }
           }
         }
@@ -270,8 +270,8 @@ const toCart = () => {
       }
       &-right {
         margin-top: -10px;
-        width: 240px;
         padding-left: 20px;
+        width: 240px;
         p {
           text-align: center;
         }

sub-operation-service/src/layouts/component/Main/index.vue

@@ -35,14 +35,14 @@ const isReload = computed(() => SettingStore.isReload);
   display: flex;
   width: 100%;
   height: 100%;
-  @include scrollable();
+  @include scrollable;
-  box-sizing: border-box;
 
+  box-sizing: border-box;
   &-inner {
-    width: 100%;
     padding: 10px;
-    box-sizing: border-box;
+    width: 100%;
     background-color: #f5f5f5;
+    box-sizing: border-box;
   }
 }
 </style>

sub-operation-service/src/layouts/component/UserMenu/index.vue

@@ -69,22 +69,21 @@ const toHome = () => {
 div {
   box-sizing: border-box;
 }
-
 .layout-user-centre-warp {
-  width: 320px;
-  text-align: center;
   display: inline-block;
-  height: 100vh;
   padding: 16px;
+  width: 320px;
+  height: 100vh;
+  text-align: center;
   .layout-user-centre {
-    height: calc(100% - 0px);
-    background: $color-fff;
     overflow: auto;
+    height: calc(100% - 0px);
     border-radius: 16px;
+    background: $color-fff;
   }
   .layout-user-centre-top {
-    width: 100%;
     padding: 8px;
+    width: 100%;
     .logo-warp {
       height: 74px;
     }
@@ -95,7 +94,6 @@ div {
     .el-menu-item {
       font-size: 20px;
       font-weight: 400;
-
       .iconfont {
         display: inline-block;
         vertical-align: middle;

sub-operation-service/src/layouts/index.vue

@@ -12,17 +12,16 @@ import Main from './component/Main';
 
 <style lang="scss" scoped>
 .basic-layout {
-  height: 100%;
   width: 100%;
   min-width: 1200px;
-
+  height: 100%;
   &-container {
     position: relative;
-    @include flex-column();
-    height: 100%;
     margin-left: 210px;
-    box-sizing: border-box;
+    height: 100%;
     transition: margin-left 0.28s;
+    box-sizing: border-box;
+    @include flex-column;
   }
 }
 </style>

sub-operation-service/src/layouts/userCentre.vue

@@ -15,13 +15,13 @@ const SettingStore = useSettingStore();
 
 <style lang="scss" scoped>
 .user-centre-layout {
-  height: 100%;
   width: 100%;
+  height: 100%;
   .layout-main {
     display: inline-block !important;
+    padding: 16px 16px 16px 0;
     width: calc(100% - 320px) !important;
     vertical-align: top;
-    padding: 16px 16px 16px 0;
     .layout-main-inner {
       padding: 0 !important;
     }

sub-operation-service/src/router/index.js

@@ -23,6 +23,58 @@ export const constantRoutes = [
     component: () => import('@/views/error/403.vue'),
     hidden: true,
   },
+  // {
+  //   path: '/sub-operation-service/userCenter',
+  //   name: 'userCenter',
+  //   component: () => import('@/views/userCenter/shoppingCart.vue'),
+  //   hidden: true,
+  // },
+  {
+    path: '/sub-operation-service/userCenter',
+    name: 'userCenter',
+    // component: Layout,
+    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/sureOrder',
+        component: () => import('@/views/userCenter/sureOrder.vue'),
+        name: 'sureOrder',
+        meta: { title: '结算' },
+      },
+      {
+        path: '/sub-operation-service/orderSuccess',
+        component: () => import('@/views/userCenter/orderSuccess.vue'),
+        name: 'orderSuccess',
+        meta: { title: '提交订单' },
+      },
+      {
+        path: '/sub-operation-service/paySuccess',
+        component: () => import('@/views/userCenter/paySuccess.vue'),
+        name: 'paySuccess',
+        meta: { title: '支付成功' },
+      },
+      {
+        path: '/sub-operation-service/userOrders',
+        component: () => import('@/views/userCenter/userOrders.vue'),
+        name: 'userOrders',
+        meta: { title: '我的订单' },
+      },
+       {
+        path: '/sub-operation-service/userLands',
+        component: () => import('@/views/userCenter/userLands.vue'),
+        name: 'userLands',
+        meta: { title: '我的土地' },
+      },
+    ],
+  },
+
   {
     path: '/sub-operation-service',
     name: 'layout',

sub-operation-service/src/views/ecommerce/agriculturalDetail.vue

@@ -217,12 +217,12 @@ const toCopy = () => {};
 .agricultural-detail-warp {
   width: 100%;
   .agricultural-detail-info {
-    width: 100%;
-    margin-bottom: 16px;
-    background: $color-fff;
-    border-radius: 16px;
     overflow: hidden;
+    margin-bottom: 16px;
     padding: 10px 24px;
+    width: 100%;
+    border-radius: 16px;
+    background: $color-fff;
     .top-title {
       width: 100%;
       text-align: left;
@@ -237,29 +237,27 @@ const toCopy = () => {};
         font-size: 18px;
       }
       .current-title {
+        position: relative;
+        margin-left: 8px;
+        padding: 0 8px;
         font-size: 16px;
         color: $color-main;
-        position: relative;
-        padding: 0 8px;
-        margin-left: 8px;
       }
       .current-title::before {
-        content: '.';
-
         position: absolute;
-        left: 0;
         top: 30%;
+        left: 0;
+        content: '.';
         transform: translateY(-50%);
       }
     }
-
     .top-info {
       margin: 16px 0;
       text-align: left;
       ::v-deep() {
         .ecommerce-banner {
-          padding: 0 48px !important;
           position: relative;
+          padding: 0 48px !important;
         }
         .el-carousel {
           position: unset !important;
@@ -275,17 +273,17 @@ const toCopy = () => {};
     .price-sold {
       margin: 16px 0;
       .price {
-        color: $color-main;
-        font-size: 32px;
         position: relative;
         padding: 0 16px;
+        font-size: 32px;
+        color: $color-main;
       }
       .price::before {
-        content: '￥';
-        font-size: 16px;
         position: absolute;
-        left: 0;
         top: 50%;
+        left: 0;
+        font-size: 16px;
+        content: '￥';
         transform: translateY(-50%);
       }
       .sold {
@@ -297,18 +295,18 @@ const toCopy = () => {};
       }
     }
     .tag-list {
-      color: $color-999;
       display: inline-flex;
-      width: 100%;
       justify-content: flex-start;
+      width: 100%;
+      color: $color-999;
       gap: 10px;
       .tag-item {
         position: relative;
         padding-left: 32px;
         .iconfont {
           position: absolute;
-          left: 0;
           top: 50%;
+          left: 0;
           transform: translateY(-50%);
           &.icon-see {
             font-size: 24px;
@@ -320,14 +318,15 @@ const toCopy = () => {};
             font-size: 24px;
           }
         }
+
         font-size: 16px;
         line-height: 32px;
       }
     }
     .tips-list {
+      margin: 16px 0;
       font-size: 16px;
       line-height: 32px;
-      margin: 16px 0;
     }
     .spu-sku-list {
       width: 100%;
@@ -336,30 +335,29 @@ const toCopy = () => {};
       }
       .spu-sku-warp {
         display: inline-flex;
+        justify-content: space-around;
+        margin-top: 16px;
         width: 100%;
         flex-wrap: wrap;
-        justify-content: space-around;
         gap: 16px;
-        margin-top: 16px;
         .spu-sku-item {
           width: calc((100% - 16px) / 2);
+          font-size: 16px;
+          font-weight: 400;
+          border-radius: 8px;
           text-align: center;
           line-height: 40px;
-          font-weight: 400;
-          font-size: 16px;
-          border-radius: 8px;
           cursor: pointer;
           &.normal {
-            color: $color-999;
             border: 1px solid $color-da;
+            color: $color-999;
           }
           &.act {
-            color: $color-main;
             border: 1px solid $color-main;
+            color: $color-main;
           }
         }
       }
-
       .spu-sku-warp::after {
         content: '';
         flex: auto;
@@ -379,21 +377,21 @@ const toCopy = () => {};
         .is-have {
           display: inline-block;
           padding-left: 8px;
-          color: $color-999;
           font-size: 12px;
+          color: $color-999;
         }
       }
     }
     .top-btn {
       .item-btn {
-        margin: 8px 24px 8px 0;
         display: inline-block;
-        line-height: 42px;
+        margin: 8px 24px 8px 0;
-        color: $color-fff;
-        padding: 0 24px;
-        border-radius: 12px;
-        font-size: 20px;
         margin-top: 16px;
+        padding: 0 24px;
+        font-size: 20px;
+        border-radius: 12px;
+        color: $color-fff;
+        line-height: 42px;
         &.sign {
           background: $color-main;
         }
@@ -402,14 +400,13 @@ const toCopy = () => {};
         }
       }
     }
-
     .agricultural-detail-content {
       width: 100%;
       text-align: left;
       .detail-content {
         .tab-top {
-          width: 100%;
           margin: 42px 0;
+          width: 100%;
           text-align: center;
           ::v-deep() {
             .el-radio-button:first-child .el-radio-button__inner {
@@ -419,18 +416,16 @@ const toCopy = () => {};
               border-radius: 0 16px 16px 0;
             }
             .el-radio-button__inner {
-              padding-left: 48px !important;
               padding-right: 48px !important;
+              padding-left: 48px !important;
               font-size: 20px;
               line-height: 32px !important;
             }
           }
         }
-
         .tab-content {
-          width: 100%;
           margin: 24px 0;
-
+          width: 100%;
           .content-detail,
           .content-source-code,
           .content-evaluate {
@@ -446,13 +441,13 @@ const toCopy = () => {};
               width: 100%;
               text-align: center;
               .code-img {
+                margin: auto;
                 width: 230px;
                 height: 230px;
-                margin: auto;
               }
               .code-down {
-                color: $color-main;
                 margin: 16px 0;
+                color: $color-main;
                 .el-icon,
                 a {
                   display: inline-block;
@@ -462,18 +457,18 @@ const toCopy = () => {};
                   font-size: 22px;
                 }
                 a {
-                  color: $color-main;
                   font-size: 16px;
+                  color: $color-main;
                 }
               }
               .code-copy {
                 .code-txt {
                   display: inline-block;
-                  vertical-align: middle;
-                  width: 200px;
-                  background: $color-main-table-header;
-                  border-radius: 16px 0 0 16px;
                   padding: 12px 8px;
+                  width: 200px;
+                  border-radius: 16px 0 0 16px;
+                  background: $color-main-table-header;
+                  vertical-align: middle;
                 }
                 .do-copy {
                   vertical-align: middle;
@@ -481,8 +476,8 @@ const toCopy = () => {};
                   margin-left: -6px;
                   .el-button {
                     padding: 21px 16px;
-                    border-radius: 12px;
                     font-size: 16px;
+                    border-radius: 12px;
                   }
                 }
               }
@@ -490,11 +485,11 @@ const toCopy = () => {};
                 margin: 24px 0;
                 .el-button {
                   padding: 16px 116px;
-                  line-height: 48px;
                   height: 48px;
-                  border-radius: 24px;
                   font-size: 20px;
                   font-weight: 600;
+                  border-radius: 24px;
+                  line-height: 48px;
                 }
               }
             }

sub-operation-service/src/views/ecommerce/components/backDivider.vue

@@ -24,32 +24,32 @@ const props = defineProps({
     justify-content: center;
     width: 100%;
     .top-line-pos {
+      position: relative;
       display: inline-flex;
       justify-content: flex-start;
-      position: relative;
       .top-txt {
+        padding: 0 56px;
         font-size: 24px;
         font-weight: 700;
-        padding: 0 56px;
       }
       .top-txt::before,
       .top-txt::after {
-        content: '';
+        position: absolute;
+        top: 50%;
         display: inline-block;
         width: 40px;
         height: 4px;
-        top: 50%;
-        transform: translateY(-50%);
-        position: absolute;
         border-radius: 8px;
+        content: '';
+        transform: translateY(-50%);
       }
       .top-txt::before {
-        background: linear-gradient(270deg, $color-main, $color-main-table-header);
         left: 0;
+        background: linear-gradient(270deg, $color-main, $color-main-table-header);
       }
       .top-txt::after {
-        background: linear-gradient(270deg, $color-main-table-header, $color-main);
         right: 0;
+        background: linear-gradient(270deg, $color-main-table-header, $color-main);
       }
     }
   }

sub-operation-service/src/views/ecommerce/components/common.vue

@@ -28,25 +28,25 @@ const props = defineProps({
   height: calc(100vh - 230px);
   text-align: center;
   .ecommerce-common-content {
-    width: $width-main;
-    margin: auto;
-    height: 100%;
     display: inline-flex;
     justify-content: space-between;
+    margin: auto;
+    width: $width-main;
+    height: 100%;
     .left-menu,
     .common-content {
+      overflow-y: auto;
+      padding: 8px;
       height: calc(100% - 16px);
       border-radius: 8px;
-      padding: 8px;
-      overflow-y: auto;
     }
     .left-menu {
       width: 240px;
       background: $color-fff;
     }
     .common-content {
-      width: calc(100% - 240px);
       margin-left: 16px;
+      width: calc(100% - 240px);
     }
   }
 }

sub-operation-service/src/views/ecommerce/components/evaluate.vue

@@ -5,7 +5,7 @@
         <div class="score">{{ score }}</div>
         <div class="score-tips">
           <div class="tips">用户评价</div>
-          <div class="score-val"><el-rate v-model="score" :colors="colors" size="large" :disabled="true" /></div>
+          <div class="score-val"><el-rate v-model="score" :allow-half="true" :colors="colors" size="large" :disabled="true" /></div>
         </div>
       </div>
 
@@ -21,7 +21,7 @@
 
     <div class="user-do-warp">
       <div class="do-title">用户评价</div>
-      <div class="do-date"><el-rate v-model="score" :colors="colors" size="large" :disabled="false" /></div>
+      <div class="do-date"><el-rate v-model="score" allow-half="true" :colors="colors" size="large" :disabled="false" /></div>
       <div class="do-title">评价内容</div>
       <div class="do-fill">
         <el-input v-model="remark" type="textarea" placeholder="质量好，品质过硬，值得推荐！"></el-input>
@@ -120,9 +120,9 @@ const submitEvaluate = () => {};
   }
   .evaluate-warp-top {
     display: inline-flex;
+    justify-content: flex-start;
     width: 100%;
     gap: 16px;
-    justify-content: flex-start;
     flex-wrap: wrap;
     .user-evaluate {
       display: inline-flex;
@@ -135,13 +135,13 @@ const submitEvaluate = () => {};
       .score {
         width: 80px;
         height: 80px;
-        line-height: 80px;
-        text-align: center;
-        background: $color-main-table-header;
         font-size: 32px;
-        color: $color-main;
         font-weight: 700;
         border-radius: 8px;
+        text-align: center;
+        color: $color-main;
+        background: $color-main-table-header;
+        line-height: 80px;
       }
       .score-tips {
         padding-left: 16px;
@@ -162,20 +162,19 @@ const submitEvaluate = () => {};
         justify-content: center;
         flex-direction: column;
         height: 100%;
-
         .tag-btn-pos {
-          line-height: 48px;
-          height: 48px;
           padding: 0 16px;
-          border-radius: 16px;
+          height: 48px;
           font-size: 18px;
+          border-radius: 16px;
+          line-height: 48px;
           &.normal {
             background: $color-main-table-header;
           }
           &.act {
-            background: $color-main;
-            color: $color-fff;
             font-weight: 600;
+            color: $color-fff;
+            background: $color-main;
           }
           .label-title,
           .label-num {
@@ -188,7 +187,6 @@ const submitEvaluate = () => {};
       }
     }
   }
-
   .user-do-warp {
     width: 100%;
     .do-title {
@@ -197,32 +195,32 @@ const submitEvaluate = () => {};
       line-height: 36px;
     }
     .do-fill {
-      background: $color-f5;
-      border-radius: 16px;
       padding: 16px;
       min-height: 100px;
+      border-radius: 16px;
+      background: $color-f5;
       ::v-deep() {
         .el-textarea__inner {
-          background: transparent !important;
-          box-shadow: none !important;
           font-size: 16px;
           color: $color-666;
+          background: transparent !important;
+          box-shadow: none !important;
         }
       }
     }
     .is-anonymous {
       display: inline-flex;
-      width: 100%;
       justify-content: space-between;
       margin: 16px 0;
+      width: 100%;
       .do-is {
         display: inline-block;
         font-size: 16px;
         cursor: pointer;
         &.do-is-act {
           .is-radio {
-            background: $color-main;
             border: 1px solid $color-main;
+            background: $color-main;
           }
           .do-is-txt {
             color: $color-main;
@@ -230,8 +228,8 @@ const submitEvaluate = () => {};
         }
         &.do-is-no {
           .is-radio {
-            background: $color-fff;
             border: 1px solid $color-da;
+            background: $color-fff;
           }
           .do-is-txt {
             color: $color-999;
@@ -246,37 +244,36 @@ const submitEvaluate = () => {};
           padding-left: 8px;
         }
         .is-radio {
-          height: 20px;
-          width: 20px;
-          border-radius: 50%;
           position: relative;
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
         }
         .is-radio::before {
-          content: ' ';
           position: absolute;
-          left: 50%;
           top: 50%;
-          transform: translate(-50%, -50%);
+          left: 50%;
           width: 5px;
           height: 5px;
           border-radius: 50%;
           background: $color-fff;
+          content: ' ';
+          transform: translate(-50%, -50%);
         }
       }
     }
   }
-
   .evaluate-list {
     width: 100%;
     .list-content {
       width: 100%;
       .evaluate-item {
-        width: 100%;
         margin: 16px 0;
+        width: 100%;
         .evaluate-item-top {
-          width: 100%;
           display: inline-flex;
           justify-content: space-between;
+          width: 100%;
           .user-info {
             display: inline-flex;
             justify-content: flex-start;
@@ -287,18 +284,18 @@ const submitEvaluate = () => {};
               vertical-align: middle;
             }
             .info-img {
+              overflow: hidden;
               width: 64px;
               height: 64px;
-              overflow: hidden;
               border-radius: 50%;
             }
             .info-txt {
               padding-left: 16px;
               .info-txt-pos {
                 display: inline-flex;
+                justify-content: center;
                 height: 64px;
                 flex-direction: column;
-                justify-content: center;
                 .name {
                   font-size: 16px;
                 }
@@ -310,11 +307,10 @@ const submitEvaluate = () => {};
             }
           }
           .score-val {
-            text-align: right;
             width: 150px;
+            text-align: right;
           }
         }
-
         .evaluate-item-content {
           width: 100%;
           .content-txt {
@@ -328,10 +324,10 @@ const submitEvaluate = () => {};
             gap: 24px;
             margin-top: 24px;
             .img-item {
+              display: inline-block;
+              overflow: hidden;
               width: 138px;
               height: 138px;
-              overflow: hidden;
-              display: inline-block;
               border-radius: 16px;
             }
           }

sub-operation-service/src/views/ecommerce/components/filtertop.vue

@@ -8,10 +8,10 @@
             v-for="(m, indexm) in handlelist(n)"
             :key="indexm"
             class="single-li"
-            :class="select[n].id == m.id && ((m.pId && select[n].pId == m.pId) || !m.pId) ? 'li-act' : ''"
+            :class="select[n]?.id == m.id && ((m.parentId && select[n].parentId == m.parentId) || !m.parentId) ? 'li-act' : ''"
             @click="selectItem(index, n, m)"
           >
-            {{ m.title }}
+            {{ m.name }}
           </div>
         </div>
       </div>
@@ -25,20 +25,18 @@ import { isEmpty, getAssetsFile } from '@/utils';
 const props = defineProps({
   list: {
     type: Array,
-    default: () => {
+    required: true,
-      return [];
+    default: () => [], // 默认值
-    },
   },
 });
 
-let treeList = reactive([]);
-
 watch(
   () => props.list,
   () => {
-    treeList = props.list;
+    // console.log('props.list', props.list);
   },
   {
+    deep: true,
     immediate: true,
   }
 );
@@ -55,7 +53,7 @@ const maxLevelAndNodes = computed(() => {
   const stack = [];
 
   // 初始化栈，将根节点和初始层级（1）压入栈中
-  for (const node of treeList) {
+  for (const node of props.list) {
     stack.push({ node, level: 1 });
   }
 
@@ -71,7 +69,7 @@ const maxLevelAndNodes = computed(() => {
       levelMap[level] = [];
     }
     levelMap[level].push(node);
-    LevelVal[level] = { id: '', pId: node.pId ? node.pId : '' };
+    LevelVal[level] = { id: '', parentId: node.parentId ? node.parentId : '' };
 
     // 如果有子节点，将其压入栈中，并增加层级
     if (node.children) {
@@ -96,12 +94,17 @@ const handlelist = (key) => {
 
   // 如果是第一层级，直接返回所有数据
   if (LevelKey[0] === key || !parentVal || parentVal.id === '') {
+    // 对数据进行排序，按照 id 字母顺序排序
+    // console.log('originalList', originalList);
+
     return originalList;
   }
 
   // 如果上一层级有选中的 pId，筛选当前层级的数据
   if (parentVal && parentVal.id) {
-    return originalList.filter((m) => m.pId === parentVal.id);
+    //.sort((a, b) => a.id.localeCompare(b.id))
+
+    return originalList.filter((m) => m.parentId === parentVal.id);
   }
 
   // 如果上一层级没有选中任何项，返回空数组
@@ -111,7 +114,7 @@ const handlelist = (key) => {
 const selectItem = (index, key, item) => {
   if (key && item.id) {
     currentLevel.value = index || 0;
-    select[key] = { id: item.id, pId: item.pId ? item.pId : null };
+    select[key] = { id: item.id, parentId: item.parentId ? item.parentId : null };
     emit('select', select);
   }
 };
@@ -125,18 +128,18 @@ const emit = defineEmits(['select']);
 </script>
 <style lang="scss" scoped>
 .filter-top-warp {
+  padding: 16px;
   width: 100%;
   border-radius: 16px;
-  background: $color-fff;
-  padding: 16px;
   text-align: left;
+  background: $color-fff;
   .filter-item {
     width: 100%;
   }
   .single-item {
-    width: 100%;
     display: inline-flex;
     justify-content: flex-start;
+    width: 100%;
     .single-li {
       display: inline-block;
       cursor: pointer;

sub-operation-service/src/views/ecommerce/components/goodsItem.vue

@@ -25,14 +25,14 @@ const toDetail = () => {
 </script>
 <style lang="scss" scoped>
 .c-goods-item-warp {
-  width: 100%;
   padding: 8px;
+  width: 100%;
   cursor: pointer;
   .goods-img {
+    overflow: hidden;
     width: 100%;
     height: 168px;
     border-radius: 16px;
-    overflow: hidden;
     ::v-deep() {
       .el-image {
         width: 100%;
@@ -47,15 +47,15 @@ const toDetail = () => {
   }
   .goods-do {
     display: inline-flex;
-    width: 100%;
     justify-content: space-between;
+    width: 100%;
     .price {
-      width: calc(100% - 32px);
-      text-align: left;
-      font-size: 22px;
       padding-right: 8px;
-      color: $color-main;
+      width: calc(100% - 32px);
+      font-size: 22px;
       font-weight: 700;
+      text-align: left;
+      color: $color-main;
     }
     .price::before {
       content: ' ￥';
@@ -63,21 +63,21 @@ const toDetail = () => {
       font-weight: normal !important;
     }
     .do {
+      position: relative;
       display: inline-block;
       width: 32px;
       height: 32px;
       border-radius: 50%;
       text-align: center;
       background: $color-main;
-      position: relative;
       cursor: pointer;
       .iconfont {
         position: absolute;
-        left: 50%;
         top: 50%;
-        transform: translate(-50%, -50%);
+        left: 50%;
-        color: $color-fff;
         font-size: 20px;
+        color: $color-fff;
+        transform: translate(-50%, -50%);
       }
     }
   }

sub-operation-service/src/views/ecommerce/components/landItem.vue

@@ -44,11 +44,11 @@ const toDetail = () => {
 </script>
 <style lang="scss" scoped>
 .c-land-item-warp {
-  width: 100%;
-  padding: 8px;
-  background: $color-fff;
-  border-radius: 16px;
   margin-bottom: 16px;
+  padding: 8px;
+  width: 100%;
+  border-radius: 16px;
+  background: $color-fff;
   cursor: pointer;
   .land-img,
   .land-info {
@@ -56,10 +56,10 @@ const toDetail = () => {
     vertical-align: top;
   }
   .land-img {
+    overflow: hidden;
     width: 200px;
     height: 200px;
     border-radius: 16px;
-    overflow: hidden;
     ::v-deep() {
       .el-image {
         width: 100%;
@@ -68,14 +68,14 @@ const toDetail = () => {
     }
   }
   .land-info {
-    width: calc(100% - 200px);
     padding-left: 16px;
+    width: calc(100% - 200px);
     height: 200px;
     .land-info-pos {
-      width: 100%;
-      height: 100%;
       display: inline-flex;
       justify-content: space-around;
+      width: 100%;
+      height: 100%;
       flex-direction: column;
       .land-info-c {
         width: 100%;
@@ -105,10 +105,10 @@ const toDetail = () => {
     }
   }
   .addr {
-    width: 100%;
-    text-align: left;
-    font-size: 14px;
     margin-top: 8px;
+    width: 100%;
+    font-size: 14px;
+    text-align: left;
     .iconfont {
       display: inline-block;
       margin-right: 3px;
@@ -119,15 +119,15 @@ const toDetail = () => {
   }
   .land-do {
     display: inline-flex;
-    width: 100%;
     justify-content: space-between;
+    width: 100%;
     .price {
-      width: calc(100% - 0px);
-      text-align: left;
-      font-size: 22px;
       padding-right: 8px;
-      color: $color-main;
+      width: calc(100% - 0px);
+      font-size: 22px;
       font-weight: 700;
+      text-align: left;
+      color: $color-main;
     }
     .price::before {
       content: '￥';

sub-operation-service/src/views/ecommerce/components/leftMenu.vue

@@ -55,10 +55,10 @@ const toLink = (index) => {
   height: 100%;
   .left-menu {
     .left-menu-item {
-      width: 100%;
       display: inline-flex;
       justify-content: flex-start;
       padding: 16px 0;
+      width: 100%;
       cursor: pointer;
       &.active {
         color: $color-main;
@@ -74,9 +74,9 @@ const toLink = (index) => {
       }
       .item-title {
         display: -webkit-inline-box;
+        padding-left: 8px;
         font-size: 20px;
         font-weight: 400;
-        padding-left: 8px;
       }
     }
   }

sub-operation-service/src/views/ecommerce/components/purchaserPopup.vue

@@ -139,8 +139,8 @@ defineExpose({
   ::v-deep() {
     .el-form-item__label {
       font-size: 18px !important;
-      color: $color-999 !important;
       font-weight: 400 !important;
+      color: $color-999 !important;
     }
     .el-radio__label {
       font-size: 18px;

sub-operation-service/src/views/ecommerce/components/signProcess.vue

@@ -35,13 +35,13 @@ const processList = reactive([
 </script>
 <style lang="scss" scoped>
 .c-sign-process-warp {
-  width: 100%;
   margin: 16px 0;
+  width: 100%;
   .process-content {
     display: inline-flex;
+    justify-content: flex-start;
     width: 100%;
     flex-wrap: wrap;
-    justify-content: flex-start;
     .process-content-item {
       display: inline-block;
       margin: 12px 0;
@@ -51,8 +51,8 @@ const processList = reactive([
         vertical-align: middle;
       }
       .pro-content {
-        border: 1px solid $color-main;
         padding: 8px 12px;
+        border: 1px solid $color-main;
         border-radius: 16px;
         .iconfont,
         .content-txt {
@@ -66,13 +66,13 @@ const processList = reactive([
         .content-txt {
           padding-left: 8px;
           .txt-title {
-            color: $color-main;
             font-size: 18px;
             font-weight: 700;
+            color: $color-main;
           }
           .txt-tips {
-            font-weight: 400;
             margin-top: 8px;
+            font-weight: 400;
           }
         }
       }
@@ -86,15 +86,15 @@ const processList = reactive([
           background: linear-gradient(270deg, $color-main, $color-main-table-header);
         }
         .triangle {
+          position: absolute;
+          top: 50%;
+          left: 100%;
           display: inline-block;
           width: 0;
           height: 0;
-          border-left: 24px solid $color-main; /* 左侧边框，透明 */
           border-top: 12px solid transparent; /* 右侧边框，透明 */
           border-bottom: 12px solid transparent;
-          position: absolute;
+          border-left: 24px solid $color-main; /* 左侧边框，透明 */
-          left: 100%;
-          top: 50%;
           transform: translateY(-52%);
         }
       }

sub-operation-service/src/views/ecommerce/components/typetop.vue

@@ -88,16 +88,16 @@ defineExpose({
     width: 100%;
   }
   .single-item {
-    width: 100%;
     display: inline-flex;
     justify-content: flex-start;
+    width: 100%;
     .item-title {
       display: -webkit-inline-box;
-      color: $color-999;
-      font-size: 20px;
       width: 120px;
-      vertical-align: top;
+      font-size: 20px;
       font-weight: 500;
+      color: $color-999;
+      vertical-align: top;
       line-height: 40px;
     }
     .single-li {

sub-operation-service/src/views/ecommerce/index.vue

@@ -6,7 +6,7 @@
         <filtertop :list="treeList"></filtertop>
         <div class="goods-list-warp">
           <div class="goods-list">
-            <template v-for="(n, index) in 16" :key="index">
+            <template v-for="(n, index) in 10" :key="n.id">
               <div class="goods-item">
                 <goodsItem></goodsItem>
               </div>
@@ -22,61 +22,95 @@ import common from './components/common.vue';
 import banner from './components/banner.vue';
 import filtertop from './components/filtertop.vue';
 import goodsItem from './components/goodsItem.vue';
-import { ref, reactive, onMounted, watch, computed } from 'vue';
+import { ref, reactive, onMounted, onBeforeMount, onUnmounted, watch, computed } from 'vue';
+import { transaction, agriculturalList } from '@/apis/agricultural';
 let treeList = reactive([
-  {
+  // {
-    id: '01',
+  //   id: '01',
-    title: '种子',
+  //   name: '种子/种苗',
-    children: [
+  //   children: [
-      { pId: '01', id: '0101', title: '小麦种子' },
+  //     { parentId: '01', id: '0101', name: '小麦种子' },
-      { pId: '01', id: '0102', title: '水稻种子' },
+  //     { parentId: '01', id: '0102', name: '水稻种子' },
-      { pId: '01', id: '0103', title: '玉米种子' },
+  //     { parentId: '01', id: '0103', name: '玉米种子' },
-      { pId: '01', id: '0104', title: '番茄种子' },
+  //     { parentId: '01', id: '0104', name: '番茄种子' },
-      { pId: '01', id: '0105', title: '白菜种子' },
+  //     { parentId: '01', id: '0105', name: '白菜种子' },
-    ],
+  //   ],
-  },
+  // },
-  {
+  // {
-    id: '02',
+  //   id: '02',
-    title: '肥料',
+  //   name: '农药',
-    children: [
+  //   children: [
-      { pId: '02', id: '0101', title: '有机肥' },
+  //     { parentId: '03', id: '0101', name: '杀虫剂' },
-      { pId: '02', id: '0102', title: '水溶肥' },
+  //     { parentId: '03', id: '0102', name: '杀菌剂' },
-      { pId: '02', id: '0103', title: '天然肥料' },
+  //     { parentId: '03', id: '0103', name: '除草剂' },
-    ],
+  //     { parentId: '03', id: '0104', name: '杀螨剂' },
-  },
+  //   ],
-  {
+  // },
-    id: '03',
+  // {
-    title: '农药',
+  //   id: '03',
-    children: [
+  //   name: '化肥',
-      { pId: '03', id: '0101', title: '杀虫剂' },
+  //   children: [
-      { pId: '03', id: '0102', title: '杀菌剂' },
+  //     { parentId: '02', id: '0101', name: '有机肥' },
-      { pId: '03', id: '0103', title: '除草剂' },
+  //     { parentId: '02', id: '0102', name: '水溶肥' },
-      { pId: '03', id: '0104', title: '杀螨剂' },
+  //     { parentId: '02', id: '0103', name: '天然肥料' },
-    ],
+  //   ],
-  },
+  // },
 ]);
+onBeforeMount(() => {
+  // 在 DOM 挂载前调用
+  getTree();
+  getList();
+});
+
+//获取农资商品分类
+const getTree = () => {
+  transaction().then((res) => {
+    if (res.code === 200) {
+      let a = res.data.sort((a, b) => Number(b.id) - Number(a.id));
+      treeList.splice(0, treeList.length, ...a);
+      // console.log('treeList', treeList);
+    }
+  });
+};
+
+//获取农资商品列表
+let list = reactive([]);
+let params = reactive({
+  current: 1,
+  size: 10,
+  parentId: null,
+  childrenId: null,
+});
+const getList = () => {
+  agriculturalList(params).then((res) => {
+    if (res.code === 200) {
+      console.log('res', res);
+    }
+  });
+};
 
 let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner1.png']);
 </script>
 <style lang="scss" scoped>
 .goods-list-warp {
-  width: 100%;
   margin-top: 16px;
+  width: 100%;
   .goods-list {
-    width: 100%;
     display: inline-flex;
-    flex-wrap: wrap;
     justify-content: space-around;
+    width: 100%;
+    flex-wrap: wrap;
     gap: 10px;
     .goods-item {
       display: inline-block;
-      width: calc((100% - 50px) / 5);
-      background: $color-fff;
-      border-radius: 16px;
       overflow: hidden;
       margin-bottom: 16px;
+      width: calc((100% - 50px) / 5);
+      border-radius: 16px;
+      background: $color-fff;
     }
   }
+
   /* 添加伪元素占位 */
   .goods-list::after {
     content: '';

sub-operation-service/src/views/ecommerce/land.vue

@@ -228,11 +228,10 @@ const doShowHide = () => {
 .land-index-warp {
   width: 100%;
   .land-filter-top {
+    padding: 16px;
     width: 100%;
     border-radius: 16px;
     background: $color-fff;
-    padding: 16px;
-
     .more-filter {
       display: inline-flex;
       justify-content: flex-start;
@@ -243,17 +242,16 @@ const doShowHide = () => {
         vertical-align: top;
       }
       .more-title {
-        color: $color-999;
-        font-size: 20px;
         width: 120px;
-        vertical-align: top;
+        font-size: 20px;
         font-weight: 500;
+        color: $color-999;
+        vertical-align: top;
         line-height: 40px;
       }
       .filter-r {
       }
     }
-
     .select-result {
       display: inline-flex;
       justify-content: flex-start;
@@ -266,28 +264,28 @@ const doShowHide = () => {
       }
       .title {
         display: -webkit-inline-box;
-        color: $color-999;
-        font-size: 20px;
         width: 120px;
-        vertical-align: top;
+        font-size: 20px;
         font-weight: 500;
+        color: $color-999;
+        vertical-align: top;
         line-height: 40px;
       }
       .result-list {
-        width: calc(100% - 120px);
-        padding-right: 30px;
         position: relative;
+        padding-right: 30px;
+        width: calc(100% - 120px);
         .result-item {
           display: inline-block;
           margin: 8px;
         }
         .show-hide {
           position: absolute;
-          right: 0;
           top: 50%;
+          right: 0;
+          font-size: 16px;
           transform: translateY(-50%);
           cursor: pointer;
-          font-size: 16px;
           .el-icon {
             display: inline-block;
             vertical-align: middle;
@@ -303,8 +301,8 @@ const doShowHide = () => {
       font-size: 18px;
       color: $color-666;
       .count {
-        color: $color-main;
         padding: 0 2px;
+        color: $color-main;
       }
     }
     .do-set {
@@ -317,10 +315,9 @@ const doShowHide = () => {
       }
     }
   }
-
   .land-reuslt-list {
-    width: 100%;
     margin-top: 24px;
+    width: 100%;
     .land-item-warp {
     }
   }

sub-operation-service/src/views/ecommerce/landDetail.vue

@@ -372,12 +372,12 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
 .land-detail-warp {
   width: 100%;
   .land-detail-info {
-    width: 100%;
-    margin-bottom: 16px;
-    background: $color-fff;
-    border-radius: 16px;
     overflow: hidden;
+    margin-bottom: 16px;
     padding: 10px;
+    width: 100%;
+    border-radius: 16px;
+    background: $color-fff;
     .top-title {
       width: 100%;
       text-align: left;
@@ -391,29 +391,27 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
         font-size: 18px;
       }
       .current-title {
+        position: relative;
+        margin-left: 8px;
+        padding: 0 8px;
         font-size: 16px;
         color: $color-main;
-        position: relative;
-        padding: 0 8px;
-        margin-left: 8px;
       }
       .current-title::before {
-        content: '.';
-
         position: absolute;
-        left: 0;
         top: 30%;
+        left: 0;
+        content: '.';
         transform: translateY(-50%);
       }
     }
-
     .top-info {
       margin: 16px 0;
       text-align: left;
       ::v-deep() {
         .ecommerce-banner {
-          padding: 0 48px !important;
           position: relative;
+          padding: 0 48px !important;
         }
         .el-carousel {
           position: unset !important;
@@ -427,33 +425,33 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
       }
     }
     .price {
-      color: $color-main;
-      font-size: 32px;
       position: relative;
-      padding: 0 16px;
       margin: 16px 0;
+      padding: 0 16px;
+      font-size: 32px;
+      color: $color-main;
     }
     .price::before {
-      content: '￥';
-      font-size: 16px;
       position: absolute;
-      left: 0;
       top: 50%;
+      left: 0;
+      font-size: 16px;
+      content: '￥';
       transform: translateY(-50%);
     }
     .tag-list {
-      color: $color-999;
       display: inline-flex;
-      width: 100%;
       justify-content: flex-start;
+      width: 100%;
+      color: $color-999;
       gap: 10px;
       .tag-item {
         position: relative;
         padding-left: 32px;
         .iconfont {
           position: absolute;
-          left: 0;
           top: 50%;
+          left: 0;
           transform: translateY(-50%);
           &.icon-see {
             font-size: 24px;
@@ -465,14 +463,15 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
             font-size: 24px;
           }
         }
+
         font-size: 16px;
         line-height: 32px;
       }
     }
     .tips-list {
+      margin: 16px 0;
       font-size: 16px;
       line-height: 24px;
-      margin: 16px 0;
     }
     .addr-info {
       font-size: 20px;
@@ -485,14 +484,14 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
     }
     .top-btn {
       .item-btn {
-        margin: 8px 24px 8px 0;
         display: inline-block;
-        line-height: 42px;
+        margin: 8px 24px 8px 0;
-        color: $color-fff;
-        padding: 0 24px;
-        border-radius: 12px;
-        font-size: 20px;
         margin-top: 16px;
+        padding: 0 24px;
+        font-size: 20px;
+        border-radius: 12px;
+        color: $color-fff;
+        line-height: 42px;
         &.sign {
           background: $color-main;
         }
@@ -501,14 +500,13 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
         }
       }
     }
-
     .land-detail-content {
       width: 100%;
       text-align: left;
       .detail-content {
         .detail-content-item {
-          width: 100%;
           margin: 16px 0;
+          width: 100%;
         }
         .detail-content-key,
         .detail-content-val {
@@ -524,7 +522,6 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
             &.icon-voucher {
               font-size: 36px;
             }
-
             &.icon-landform {
               font-size: 32px;
             }
@@ -546,22 +543,22 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
           }
           .key-txt {
             display: inline-flex;
-            text-align: center;
+            padding-left: 16px;
-            vertical-align: middle;
             font-size: 22px;
             font-weight: bold;
-            transform: skewX(-8deg);
+            text-align: center;
-            -webkit-background-clip: text;
             color: $color-333;
-            letter-spacing: 2px;
+            background-clip: text;
             text-shadow: -1px 0 0 $color-main-table-header;
+            vertical-align: middle;
+            transform: skewX(-8deg);
+            letter-spacing: 2px;
             font-style: oblique;
-            padding-left: 16px;
           }
         }
         .detail-content-val {
-          width: calc(100% - 150px);
           padding-left: 16px;
+          width: calc(100% - 150px);
           .content-val-item {
             font-size: 16px;
             font-weight: 400;
@@ -572,12 +569,12 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
               vertical-align: middle;
             }
             .val-label {
-              color: $color-666;
               max-width: 150px;
+              color: $color-666;
             }
             .val-val {
-              text-align: right;
               max-width: calc(100% - 100px);
+              text-align: right;
             }
           }
         }

sub-operation-service/src/views/ecommerce/purchaser.vue

@@ -67,108 +67,108 @@ const router = useRouter();
 let treeList = reactive([
   {
     id: '01',
-    title: '农产品',
+    name: '农产品',
     children: [
       {
-        pId: '01',
+        parentId: '01',
         id: '0101',
-        title: '植物性农产品',
+        name: '植物性农产品',
         children: [
-          { pId: '0101', id: '010101', title: '谷物' },
+          { parentId: '0101', id: '010101', name: '谷物' },
-          { pId: '0101', id: '010102', title: '蔬菜' },
+          { parentId: '0101', id: '010102', name: '蔬菜' },
-          { pId: '0101', id: '010103', title: '水果' },
+          { parentId: '0101', id: '010103', name: '水果' },
-          { pId: '0101', id: '010104', title: '坚果与油料作物' },
+          { parentId: '0101', id: '010104', name: '坚果与油料作物' },
-          { pId: '0101', id: '010105', title: '糖料作物' },
+          { parentId: '0101', id: '010105', name: '糖料作物' },
-          { pId: '0101', id: '010106', title: '纤维作物' },
+          { parentId: '0101', id: '010106', name: '纤维作物' },
-          { pId: '0101', id: '010107', title: '茶叶' },
+          { parentId: '0101', id: '010107', name: '茶叶' },
-          { pId: '0101', id: '010108', title: '咖啡' },
+          { parentId: '0101', id: '010108', name: '咖啡' },
-          { pId: '0101', id: '010109', title: '香料' },
+          { parentId: '0101', id: '010109', name: '香料' },
         ],
       },
       {
-        pId: '01',
+        parentId: '01',
         id: '0102',
-        title: '动物性农产品',
+        name: '动物性农产品',
         children: [
-          { pId: '0102', id: '010201', title: '肉类' },
+          { parentId: '0102', id: '010201', name: '肉类' },
-          { pId: '0102', id: '010202', title: '奶制品' },
+          { parentId: '0102', id: '010202', name: '奶制品' },
-          { pId: '0102', id: '010203', title: '蛋类' },
+          { parentId: '0102', id: '010203', name: '蛋类' },
-          { pId: '0102', id: '010204', title: '蜂蜜' },
+          { parentId: '0102', id: '010204', name: '蜂蜜' },
-          { pId: '0102', id: '010205', title: '水产品' },
+          { parentId: '0102', id: '010205', name: '水产品' },
         ],
       },
       {
-        pId: '01',
+        parentId: '01',
         id: '0103',
-        title: '特殊农产品',
+        name: '特殊农产品',
         children: [
-          { pId: '0103', id: '010301', title: '花卉与苗木' },
+          { parentId: '0103', id: '010301', name: '花卉与苗木' },
-          { pId: '0103', id: '010302', title: '药材' },
+          { parentId: '0103', id: '010302', name: '药材' },
-          { pId: '0103', id: '010303', title: '菌类' },
+          { parentId: '0103', id: '010303', name: '菌类' },
         ],
       },
       {
-        pId: '01',
+        parentId: '01',
         id: '0104',
-        title: '其他',
+        name: '其他',
-        children: [{ pId: '0104', id: '010401', title: '饲料' }],
+        children: [{ parentId: '0104', id: '010401', name: '饲料' }],
       },
     ],
   },
   {
     id: '02',
-    title: '种子种苗',
+    name: '种子种苗',
     children: [
       {
-        pId: '02',
+        parentId: '02',
         id: '0101',
-        title: '花卉种子种苗',
+        name: '花卉种子种苗',
         children: [
-          { pId: '0101', id: '010101', title: '草本花卉' },
+          { parentId: '0101', id: '010101', name: '草本花卉' },
-          { pId: '0101', id: '010102', title: '木本花卉' },
+          { parentId: '0101', id: '010102', name: '木本花卉' },
-          { pId: '0101', id: '010103', title: '野生花卉' },
+          { parentId: '0101', id: '010103', name: '野生花卉' },
         ],
       },
       {
-        pId: '02',
+        parentId: '02',
         id: '0102',
-        title: '蔬菜种子种苗',
+        name: '蔬菜种子种苗',
         children: [
-          { pId: '0102', id: '010201', title: '叶菜类' },
+          { parentId: '0102', id: '010201', name: '叶菜类' },
-          { pId: '0102', id: '010202', title: '根茎类' },
+          { parentId: '0102', id: '010202', name: '根茎类' },
-          { pId: '0102', id: '010203', title: '果实类' },
+          { parentId: '0102', id: '010203', name: '果实类' },
-          { pId: '0102', id: '010204', title: '豆类' },
+          { parentId: '0102', id: '010204', name: '豆类' },
-          { pId: '0102', id: '010205', title: '瓜类' },
+          { parentId: '0102', id: '010205', name: '瓜类' },
         ],
       },
       {
-        pId: '02',
+        parentId: '02',
         id: '0103',
-        title: '果树种苗',
+        name: '果树种苗',
         children: [
-          { pId: '0103', id: '010301', title: '柑橘类' },
+          { parentId: '0103', id: '010301', name: '柑橘类' },
-          { pId: '0103', id: '010302', title: '仁果类' },
+          { parentId: '0103', id: '010302', name: '仁果类' },
-          { pId: '0103', id: '010303', title: '核果类' },
+          { parentId: '0103', id: '010303', name: '核果类' },
-          { pId: '0103', id: '010304', title: '浆果类' },
+          { parentId: '0103', id: '010304', name: '浆果类' },
         ],
       },
       {
-        pId: '02',
+        parentId: '02',
         id: '0104',
-        title: '药材种子与种苗',
+        name: '药材种子与种苗',
         children: [
-          { pId: '0104', id: '010401', title: '寒地龙药' },
+          { parentId: '0104', id: '010401', name: '寒地龙药' },
-          { pId: '0104', id: '010402', title: '常见中药材' },
+          { parentId: '0104', id: '010402', name: '常见中药材' },
         ],
       },
       {
-        pId: '02',
+        parentId: '02',
         id: '0105',
-        title: '其他作物',
+        name: '其他作物',
         children: [
-          { pId: '0105', id: '010501', title: '牧草' },
+          { parentId: '0105', id: '010501', name: '牧草' },
-          { pId: '0105', id: '010502', title: '经济作物' },
+          { parentId: '0105', id: '010502', name: '经济作物' },
-          { pId: '0105', id: '010503', title: '观赏树木' },
+          { parentId: '0105', id: '010503', name: '观赏树木' },
         ],
       },
     ],
@@ -230,38 +230,36 @@ onMounted(() => {
 .purchaser-index-warp {
   width: 100%;
   .purchaser-top {
-    width: 100%;
-    margin-bottom: 16px;
-    background: $color-fff;
-    border-radius: 16px;
     overflow: hidden;
+    margin-bottom: 16px;
     padding: 10px;
+    width: 100%;
+    border-radius: 16px;
+    background: $color-fff;
     .purchaser-top-title {
       width: 100%;
-      text-align: left;
       font-size: 18px;
+      text-align: left;
     }
     .purchaser-charts {
       width: 100%;
     }
   }
-
   .hot-list-warp {
-    background: $color-fff;
+    margin: 16px 0;
     padding: 16px;
     border-radius: 16px;
-    margin: 16px 0;
+    background: $color-fff;
-
     ::v-deep() {
       thead {
-        border-radius: 16px;
         overflow: hidden;
+        border-radius: 16px;
       }
       thead th {
-        background: $color-main-table-header;
-        color: $color-999 !important;
-        border: none !important;
         padding: 16px 0;
+        border: none !important;
+        color: $color-999 !important;
+        background: $color-main-table-header;
       }
       thead th:first-child {
         border-top-left-radius: 16px;

sub-operation-service/src/views/ecommerce/purchaserDetail.vue

@@ -254,18 +254,18 @@ onMounted(() => {
 .purchaser-detail-warp {
   width: 100%;
   .block-title {
+    padding: 8px 0;
     font-size: 20px;
     font-weight: 700;
     text-align: left;
-    padding: 8px 0;
   }
   .purchaser-detail-top {
-    width: 100%;
-    margin-bottom: 16px;
-    background: $color-fff;
-    border-radius: 16px;
     overflow: hidden;
+    margin-bottom: 16px;
     padding: 10px;
+    width: 100%;
+    border-radius: 16px;
+    background: $color-fff;
     .top-title {
       width: 100%;
       text-align: left;
@@ -279,22 +279,20 @@ onMounted(() => {
         font-size: 18px;
       }
       .current-title {
+        position: relative;
+        margin-left: 8px;
+        padding: 0 8px;
         font-size: 16px;
         color: $color-main;
-        position: relative;
-        padding: 0 8px;
-        margin-left: 8px;
       }
       .current-title::before {
-        content: '.';
-
         position: absolute;
-        left: 0;
         top: 30%;
+        left: 0;
+        content: '.';
         transform: translateY(-50%);
       }
     }
-
     .purchaser-info {
       margin: 16px 0;
       .purchaser-info-l {
@@ -308,19 +306,18 @@ onMounted(() => {
           vertical-align: top;
         }
         .img {
+          overflow: hidden;
           width: 160px;
           height: 160px;
           border-radius: 8px;
-          overflow: hidden;
-
           img {
             width: 100%;
             height: 100%;
           }
         }
         .content {
-          width: calc(100% - 160px);
           padding-left: 16px;
+          width: calc(100% - 160px);
           .title-warp {
             width: 100%;
             .txt,
@@ -334,7 +331,6 @@ onMounted(() => {
             }
             .icon-warp {
               display: inline-block;
-
               width: 80px;
               .iconfont {
                 display: inline-block;
@@ -351,37 +347,37 @@ onMounted(() => {
             }
           }
           .is-auth {
-            width: 100%;
             margin: 16px 0;
+            width: 100%;
             span {
-              background: $color-main-table-header;
-              border: 1px solid $color-main-border;
-              border-radius: 8px;
-              padding: 0 16px;
-              color: $color-main;
-              line-height: 32px;
-              height: 32px;
               display: inline-block;
+              padding: 0 16px;
+              height: 32px;
               font-size: 16px;
               font-weight: 400;
+              border: 1px solid $color-main-border;
+              border-radius: 8px;
+              color: $color-main;
+              background: $color-main-table-header;
+              line-height: 32px;
             }
           }
           .settled-time {
             width: 100%;
             span {
               font-size: 20px;
-              color: $color-999;
               font-weight: 500;
+              color: $color-999;
             }
           }
         }
       }
       .purchaser-info-r {
         .addr {
-          text-align: left;
           width: 100%;
           font-size: 18px;
           font-weight: 500;
+          text-align: left;
           color: $color-666;
           .iconfont {
             display: inline-block;
@@ -390,44 +386,42 @@ onMounted(() => {
           }
         }
       }
-
       .purchase-info-total {
         .info-total-item {
           display: inline-flex;
-          width: 100%;
           justify-content: space-between;
           margin: 8px 0;
+          width: 100%;
           .label,
           .val {
             display: -webkit-inline-box;
             vertical-align: top;
           }
           .label {
-            color: $color-999;
-            font-size: 18px;
             max-width: 180px;
+            font-size: 18px;
+            color: $color-999;
           }
           .val {
-            font-size: 20px;
             max-width: calc(100% - 180px);
-            color: $color-666;
+            font-size: 20px;
             text-align: right;
+            color: $color-666;
           }
         }
       }
-
       .contant-wrap {
+        margin-top: 16px;
         width: 100%;
         text-align: center;
-        margin-top: 16px;
         .contant-btn {
-          background: $color-main;
+          display: inline-block;
           padding: 0 16px;
-          line-height: 48px;
           height: 48px;
           border-radius: 16px;
           color: $color-fff;
-          display: inline-block;
+          background: $color-main;
+          line-height: 48px;
           .iconfont,
           span {
             display: inline-block;
@@ -444,23 +438,21 @@ onMounted(() => {
       }
     }
   }
-
   .hot-list-warp {
-    background: $color-fff;
+    margin: 16px 0;
     padding: 16px;
     border-radius: 16px;
-    margin: 16px 0;
+    background: $color-fff;
-
     ::v-deep() {
       thead {
-        border-radius: 16px;
         overflow: hidden;
+        border-radius: 16px;
       }
       thead th {
-        background: $color-main-table-header;
-        color: $color-999 !important;
-        border: none !important;
         padding: 16px 0;
+        border: none !important;
+        color: $color-999 !important;
+        background: $color-main-table-header;
       }
       thead th:first-child {
         border-top-left-radius: 16px;

sub-operation-service/src/views/ecommerce/sourceCodeDetail.vue

@@ -225,57 +225,57 @@ const toBack = (level) => {
 <style lang="scss" scoped>
 .source-code-detail-warp {
   .source-code-detail-info {
-    width: 100%;
-    margin-bottom: 16px;
-    background: $color-fff;
-    border-radius: 16px;
     overflow: hidden;
+    margin-bottom: 16px;
+    width: 100%;
+    border-radius: 16px;
+    background: $color-fff;
     .top-warp-b {
+      position: relative;
       width: 100%;
       height: 488px;
-      position: relative;
     }
     .top-img-txt {
       position: absolute;
-      left: 50%;
       bottom: 42%;
+      left: 50%;
       z-index: 1;
       transform: translateX(-50%);
     }
     .top-bottom-warp {
       position: absolute;
-      left: 0;
       bottom: 24px;
+      left: 0;
       z-index: 1;
       display: inline-flex;
-      width: 100%;
       justify-content: flex-start;
+      padding: 0 32px;
+      width: 100%;
       flex-wrap: wrap;
       gap: 32px;
-      padding: 0 32px;
       .top-bottom-item {
+        position: relative;
         display: inline-flex;
         width: calc(100% / 5 - 28px);
         height: 80px;
-        background: linear-gradient(180deg, #ffbe4d, #ffffff);
         border-radius: 16px;
-        position: relative;
+        background: linear-gradient(180deg, #ffbe4d, #ffffff);
         .bottom-item-img {
           position: absolute;
+          bottom: 20px;
           left: 50%;
           transform: translateX(-50%);
-          bottom: 20px;
         }
       }
     }
     .top-title {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
       padding: 16px;
       width: 100%;
       text-align: left;
-      position: absolute;
-      left: 0;
-      top: 0;
-      z-index: 1;
       cursor: pointer;
       .father-title,
       .current-title {
@@ -293,32 +293,30 @@ const toBack = (level) => {
         padding-left: 16px;
       }
       .father-after::after {
-        content: '.';
         position: absolute;
-        left: 4px;
         top: 30%;
+        left: 4px;
+        content: '.';
         transform: translateY(-50%);
       }
       .current-title {
+        position: relative;
+        margin-left: 8px;
+        padding: 0 8px;
         font-size: 16px;
         color: $color-main;
-        position: relative;
-        padding: 0 8px;
-        margin-left: 8px;
       }
       .current-title::before {
-        content: '.';
-
         position: absolute;
-        left: 0;
         top: 30%;
+        left: 0;
+        content: '.';
         transform: translateY(-50%);
       }
     }
-
     .tab-content-warp {
+      padding: 0 32px 32px;
       width: 100%;
-      padding: 0 32px 32px 32px;
       .text-main {
         color: $color-main !important;
       }
@@ -326,39 +324,38 @@ const toBack = (level) => {
         color: $color-danger !important;
       }
       .des-item {
-        width: 100%;
-        margin: 3px 0;
         display: inline-flex;
         justify-content: space-between;
+        margin: 3px 0;
+        width: 100%;
         .label,
         .val {
           vertical-align: top;
           font-size: 18px;
         }
         .label {
-          color: $color-999;
           width: 150px;
           text-align: left;
+          color: $color-999;
         }
         .val {
-          color: $color-333;
-          text-align: right;
           width: calc(100% - 150px);
+          text-align: right;
+          color: $color-333;
         }
       }
-
       .farming-content {
         ::v-deep() {
           thead {
-            border-radius: 16px;
             overflow: hidden;
+            border-radius: 16px;
           }
           thead th {
-            background: $color-main-table-header;
-            color: $color-999 !important;
-            border: none !important;
             padding: 10px 0;
             font-size: 16px !important;
+            border: none !important;
+            color: $color-999 !important;
+            background: $color-main-table-header;
           }
           thead th:first-child {
             border-top-left-radius: 16px;
@@ -372,31 +369,29 @@ const toBack = (level) => {
             margin-top: 16px !important;
           }
           tbody td {
-            border: none !important;
             font-size: 16px !important;
+            border: none !important;
           }
           .el-table__inner-wrapper::before {
             display: none !important;
           }
         }
       }
-
       .link-content {
         width: 100%;
         text-align: center;
-
         .link-content-pos {
-          margin: 64px auto;
           display: inline-flex;
           justify-content: space-between;
+          margin: 64px auto;
           gap: 120px;
           .el-image {
             width: 100%;
             height: 100%;
           }
           .img-tips {
-            text-align: center;
             font-size: 16px;
+            text-align: center;
             line-height: 32px;
           }
           .report,
@@ -413,24 +408,23 @@ const toBack = (level) => {
           }
         }
       }
-
       ::v-deep() {
         .el-tabs__nav {
           width: 100% !important;
         }
-        .el-tabs__nav-wrap:after {
+        .el-tabs__nav-wrap::after {
           background: transparent !important;
         }
         .el-tabs__item {
-          font-size: 20px !important;
-          width: 20% !important;
           padding: 0 !important;
+          width: 20% !important;
+          font-size: 20px !important;
         }
         .el-tabs__active-bar {
+          left: 7% !important;
+          width: 40px !important;
           height: 5px !important;
           border-radius: 4px;
-          width: 40px !important;
-          left: 7% !important;
         }
         .el-descriptions__label,
         .el-descriptions__content {
@@ -446,11 +440,10 @@ const toBack = (level) => {
           color: $color-333;
         }
       }
-
       ::v-deep() {
         .ecommerce-banner {
-          padding: 0 48px !important;
           position: relative;
+          padding: 0 48px !important;
         }
         .el-carousel {
           position: unset !important;

sub-operation-service/src/views/ecommerce/supplier.vue

@@ -26,108 +26,108 @@ import { ref, reactive, onMounted, watch, computed } from 'vue';
 let treeList = reactive([
   {
     id: '01',
-    title: '农产品',
+    name: '农产品',
     children: [
       {
-        pId: '01',
+        parentId: '01',
         id: '0101',
-        title: '植物性农产品',
+        name: '植物性农产品',
         children: [
-          { pId: '0101', id: '010101', title: '谷物' },
+          { parentId: '0101', id: '010101', name: '谷物' },
-          { pId: '0101', id: '010102', title: '蔬菜' },
+          { parentId: '0101', id: '010102', name: '蔬菜' },
-          { pId: '0101', id: '010103', title: '水果' },
+          { parentId: '0101', id: '010103', name: '水果' },
-          { pId: '0101', id: '010104', title: '坚果与油料作物' },
+          { parentId: '0101', id: '010104', name: '坚果与油料作物' },
-          { pId: '0101', id: '010105', title: '糖料作物' },
+          { parentId: '0101', id: '010105', name: '糖料作物' },
-          { pId: '0101', id: '010106', title: '纤维作物' },
+          { parentId: '0101', id: '010106', name: '纤维作物' },
-          { pId: '0101', id: '010107', title: '茶叶' },
+          { parentId: '0101', id: '010107', name: '茶叶' },
-          { pId: '0101', id: '010108', title: '咖啡' },
+          { parentId: '0101', id: '010108', name: '咖啡' },
-          { pId: '0101', id: '010109', title: '香料' },
+          { parentId: '0101', id: '010109', name: '香料' },
         ],
       },
       {
-        pId: '01',
+        parentId: '01',
         id: '0102',
-        title: '动物性农产品',
+        name: '动物性农产品',
         children: [
-          { pId: '0102', id: '010201', title: '肉类' },
+          { parentId: '0102', id: '010201', name: '肉类' },
-          { pId: '0102', id: '010202', title: '奶制品' },
+          { parentId: '0102', id: '010202', name: '奶制品' },
-          { pId: '0102', id: '010203', title: '蛋类' },
+          { parentId: '0102', id: '010203', name: '蛋类' },
-          { pId: '0102', id: '010204', title: '蜂蜜' },
+          { parentId: '0102', id: '010204', name: '蜂蜜' },
-          { pId: '0102', id: '010205', title: '水产品' },
+          { parentId: '0102', id: '010205', name: '水产品' },
         ],
       },
       {
-        pId: '01',
+        parentId: '01',
         id: '0103',
-        title: '特殊农产品',
+        name: '特殊农产品',
         children: [
-          { pId: '0103', id: '010301', title: '花卉与苗木' },
+          { parentId: '0103', id: '010301', name: '花卉与苗木' },
-          { pId: '0103', id: '010302', title: '药材' },
+          { parentId: '0103', id: '010302', name: '药材' },
-          { pId: '0103', id: '010303', title: '菌类' },
+          { parentId: '0103', id: '010303', name: '菌类' },
         ],
       },
       {
-        pId: '01',
+        parentId: '01',
         id: '0104',
-        title: '其他',
+        name: '其他',
-        children: [{ pId: '0104', id: '010401', title: '饲料' }],
+        children: [{ parentId: '0104', id: '010401', name: '饲料' }],
       },
     ],
   },
   {
     id: '02',
-    title: '种子种苗',
+    name: '种子种苗',
     children: [
       {
-        pId: '02',
+        parentId: '02',
         id: '0101',
-        title: '花卉种子种苗',
+        name: '花卉种子种苗',
         children: [
-          { pId: '0101', id: '010101', title: '草本花卉' },
+          { parentId: '0101', id: '010101', name: '草本花卉' },
-          { pId: '0101', id: '010102', title: '木本花卉' },
+          { parentId: '0101', id: '010102', name: '木本花卉' },
-          { pId: '0101', id: '010103', title: '野生花卉' },
+          { parentId: '0101', id: '010103', name: '野生花卉' },
         ],
       },
       {
-        pId: '02',
+        parentId: '02',
         id: '0102',
-        title: '蔬菜种子种苗',
+        name: '蔬菜种子种苗',
         children: [
-          { pId: '0102', id: '010201', title: '叶菜类' },
+          { parentId: '0102', id: '010201', name: '叶菜类' },
-          { pId: '0102', id: '010202', title: '根茎类' },
+          { parentId: '0102', id: '010202', name: '根茎类' },
-          { pId: '0102', id: '010203', title: '果实类' },
+          { parentId: '0102', id: '010203', name: '果实类' },
-          { pId: '0102', id: '010204', title: '豆类' },
+          { parentId: '0102', id: '010204', name: '豆类' },
-          { pId: '0102', id: '010205', title: '瓜类' },
+          { parentId: '0102', id: '010205', name: '瓜类' },
         ],
       },
       {
-        pId: '02',
+        parentId: '02',
         id: '0103',
-        title: '果树种苗',
+        name: '果树种苗',
         children: [
-          { pId: '0103', id: '010301', title: '柑橘类' },
+          { parentId: '0103', id: '010301', name: '柑橘类' },
-          { pId: '0103', id: '010302', title: '仁果类' },
+          { parentId: '0103', id: '010302', name: '仁果类' },
-          { pId: '0103', id: '010303', title: '核果类' },
+          { parentId: '0103', id: '010303', name: '核果类' },
-          { pId: '0103', id: '010304', title: '浆果类' },
+          { parentId: '0103', id: '010304', name: '浆果类' },
         ],
       },
       {
-        pId: '02',
+        parentId: '02',
         id: '0104',
-        title: '药材种子与种苗',
+        name: '药材种子与种苗',
         children: [
-          { pId: '0104', id: '010401', title: '寒地龙药' },
+          { parentId: '0104', id: '010401', name: '寒地龙药' },
-          { pId: '0104', id: '010402', title: '常见中药材' },
+          { parentId: '0104', id: '010402', name: '常见中药材' },
         ],
       },
       {
-        pId: '02',
+        parentId: '02',
         id: '0105',
-        title: '其他作物',
+        name: '其他作物',
         children: [
-          { pId: '0105', id: '010501', title: '牧草' },
+          { parentId: '0105', id: '010501', name: '牧草' },
-          { pId: '0105', id: '010502', title: '经济作物' },
+          { parentId: '0105', id: '010502', name: '经济作物' },
-          { pId: '0105', id: '010503', title: '观赏树木' },
+          { parentId: '0105', id: '010503', name: '观赏树木' },
         ],
       },
     ],
@@ -138,23 +138,24 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
 </script>
 <style lang="scss" scoped>
 .goods-list-warp {
-  width: 100%;
   margin-top: 16px;
+  width: 100%;
   .goods-list {
-    width: 100%;
     display: inline-flex;
-    flex-wrap: wrap;
     justify-content: space-around;
+    width: 100%;
+    flex-wrap: wrap;
     gap: 10px;
     .goods-item {
       display: inline-block;
-      width: calc((100% - 50px) / 5);
-      background: $color-fff;
-      border-radius: 16px;
       overflow: hidden;
       margin-bottom: 16px;
+      width: calc((100% - 50px) / 5);
+      border-radius: 16px;
+      background: $color-fff;
     }
   }
+
   /* 添加伪元素占位 */
   .goods-list::after {
     content: '';

sub-operation-service/src/views/farmingService/index.vue

@@ -18,11 +18,11 @@ import { ref } from 'vue';
 
 <style lang="scss" scoped>
 .framing_service_content {
-  box-sizing: border-box;
-  padding: 0 32px;
   margin: 0 auto;
-  border: 1px solid skyblue;
+  padding: 0 32px;
   width: 1200px;
   min-height: 600px;
+  border: 1px solid skyblue;
+  box-sizing: border-box;
 }
 </style>

sub-operation-service/src/views/smartFarm/components/common.vue

@@ -68,20 +68,23 @@ const menus = reactive([
     height: 100%;
     display: inline-flex;
     justify-content: space-between;
+    margin: auto;
+    width: $width-main;
+    height: 100%;
     .left-menu,
     .common-content {
+      overflow-y: auto;
+      padding: 8px;
       height: calc(100% - 16px);
       border-radius: 8px;
-      padding: 8px;
-      overflow-y: auto;
     }
     .left-menu {
       width: 240px;
       background: $color-fff;
     }
     .common-content {
-      width: calc(100% - 240px);
       margin-left: 16px;
+      width: calc(100% - 240px);
     }
   }
 }

sub-operation-service/src/views/smartFarm/components/leftMenu.vue

@@ -24,7 +24,7 @@
         </div>
         <div v-if="n.children && n.isOpen" class="item-children">
           <div v-for="(item, indexC) in n.children" :key="indexC">
-            <ul style="list-style-type: disc !important; padding-left: 40px; text-align: left; overflow: visible">
+            <ul style="overflow: visible; padding-left: 40px; text-align: left; list-style-type: disc !important">
               <li :class="indexC === currentCIndex ? 'active' : ''" @click.stop="toLinkSub(index, indexC)">
                 <div class="dot"></div>
                 {{ item.title }}
@@ -126,20 +126,20 @@ const openList = (index) => {
 .isOpen {
   position: absolute;
   right: -24px;
-  height: 20px;
   width: 20px;
+  height: 20px;
 }
 .active {
   color: $color-main;
 }
 .smartFarm-left-menu-warp {
+  padding: 0 30px;
   width: 100%;
   height: 100%;
-  padding: 0 30px;
   .left-menu {
     .left-menu-item {
-      width: 100%;
       padding: 16px 0;
+      width: 100%;
       cursor: pointer;
       &.active {
         color: $color-main;
@@ -154,20 +154,20 @@ const openList = (index) => {
         height: 32px;
       }
       .item-title {
+        padding-left: 8px;
         font-size: 18px;
         font-weight: 400;
-        padding-left: 8px;
       }
       .item-children {
-        text-align: center;
-        font-size: 16px;
         margin-top: 8px;
+        font-size: 16px;
+        text-align: center;
         transition: transform 0.3s ease;
         .dot {
           display: inline-block;
-          height: 4px;
           margin-right: 15px;
           width: 4px;
+          height: 4px;
           border-radius: 90px;
           background-color: black;
           vertical-align: middle;

sub-operation-service/src/views/userCenter/components/common.vue

@@ -0,0 +1,55 @@
+<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 {
+  width: 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;
+      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>

sub-operation-service/src/views/userCenter/components/ischeck.vue

@@ -41,12 +41,12 @@ const doCheck = () => {
 </script>
 <style lang="scss" scoped>
 .c-is-check {
-  width: 100%;
-  display: inline-block;
   position: relative;
+  display: inline-block;
+  width: 100%;
+  border-radius: 20%;
   vertical-align: middle;
   cursor: pointer;
-  border-radius: 20%;
   &.normal {
     border: 1px solid $color-999;
     background: $color-fff;
@@ -55,16 +55,15 @@ const doCheck = () => {
     border: 1px solid $color-main;
     background: $color-main;
   }
-
   .check-icon {
     position: absolute;
-    left: 50%;
     top: 50%;
+    left: 50%;
     transform: translate(-50%, -50%);
     .el-icon {
-      color: $color-fff;
       font-size: 24px;
       font-weight: bold;
+      color: $color-fff;
     }
   }
 }

sub-operation-service/src/views/userCenter/components/leftMenu.vue

@@ -0,0 +1,128 @@
+<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' },
+]);
+
+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;
+      cursor: pointer;
+      &.active {
+        color: $color-main;
+      }
+      .item-img,
+      .item-title {
+        vertical-align: middle;
+      }
+      .item-img {
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+      }
+      .item-title {
+        display: -webkit-inline-box;
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 40px;
+        padding-left: 20px;
+      }
+    }
+  }
+}
+</style>

sub-operation-service/src/views/userCenter/components/userHeader.vue

@@ -5,7 +5,14 @@
     </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)">
-        <div class="iconfont" :class="'icon-' + n.icon" :style="{ 'font-size': n.iconSize }"></div>
+        <!-- 只有满足条件的项显示 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>
@@ -52,53 +59,53 @@ const toLink = (item) => {
 </script>
 <style lang="scss" scoped>
 .c-user-page-top {
-  width: 100%;
   display: inline-flex;
   justify-content: space-between;
+  width: 100%;
   .title,
   .top-right {
     display: inline-flex;
     vertical-align: middle;
   }
   .title {
-    font-size: 22px;
-    font-weight: 500;
     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;
-      position: relative;
       cursor: pointer;
       .iconfont {
-        display: inline-block;
         position: absolute;
-        left: 50%;
         top: 50%;
+        left: 50%;
+        display: inline-block;
         transform: translate(-50%, -50%);
       }
       &.act {
-        background: $color-main-table-header !important;
         border: 1px solid $color-fff;
+        background: $color-main-table-header !important;
         .iconfont {
           color: $color-main;
         }
       }
     }
-
     .right-item:hover {
-      background: $color-main-table-header !important;
       border: 1px solid $color-fff;
+      background: $color-main-table-header !important;
       .iconfont {
         color: $color-main;
       }

sub-operation-service/src/views/userCenter/orderSuccess.vue

@@ -1,76 +1,87 @@
 <template>
-  <div class="order-success-warp">
+  <div>
-    <userHeader :title="'订单提交成功'"></userHeader>
+    <common current-name="agricultural">
-    <div class="order-success-content">
+      <template #main>
-      <div class="content-top">
+        <div class="order-success-warp">
-        <el-row :gutter="16">
+          <userHeader :title="'我的购物车 (' + total + ')'"></userHeader>
-          <el-col :span="14" align="left">
+          <div class="order-success-content">
-            <div class="back">
+            <div class="content-top">
-              <el-icon><ArrowLeftBold /></el-icon>
+              <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="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="10" 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="pay-style-warp">
-        <div class="title">支付方式</div>
+              <div class="title" @click="paySuccess">支付方式</div>
-        <div class="pay-list">
+              <div class="pay-list">
-          <div class="pay-list-pos">
+                <div class="pay-list-pos">
-            <div
+                  <div
-              v-for="(s, indexs) in styleList"
+                    v-for="(s, indexs) in styleList"
-              :key="s.name"
+                    :key="s.name"
-              class="pay-item"
+                    class="pay-item"
-              :class="s.name == currentPay ? 'pay-act' : 'pay-normal'"
+                    :class="s.name == currentPay ? 'pay-act' : 'pay-normal'"
-              @click="selectPayStyle(s.name)"
+                    @click="selectPayStyle(s.name)"
-            >
+                  >
-              <div class="is-style">
+                    <div class="is-style">
-                <div class="is-style-pos">
+                      <div class="is-style-pos">
-                  <el-icon><CircleCheckFilled /></el-icon>
+                        <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="style-icon" :style="{ background: s.color }">
+
-                <div class="iconfont" :class="'icon-' + s.icon"></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">{{ payAmout.toFixed(2) }}</span>
+                </div>
               </div>
-              <div class="style-txt">
+
-                <div class="style-txt-pos">{{ s.title + '支付' || '--' }}</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>
-        <div class="pay-code">
+    </common>
-          <div class="pay-tips">
-            <span class="tips">
-              <div class="tips-pos">{{ currentIndex > -1 ? styleList[currentIndex].title + '扫码' : '扫码' }}，支付</div>
-            </span>
-            <span class="pay-amount">{{ payAmout.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>
 <script setup>
+import common from './components/common.vue';
 import { ref, reactive, computed } from 'vue';
 import { isEmpty, getAssetsFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
@@ -80,6 +91,7 @@ import { qrImg } from '@/layouts/component/Header/base64img.js';
 const route = useRoute();
 const router = useRouter();
 let totalAmout = ref(196);
+let total = ref(99);
 
 let styleList = reactive([
   { title: '支付宝', name: 'alipay', icon: 'alipay', color: 'rgb(0, 159, 232)' },
@@ -91,6 +103,10 @@ let currentPay = ref('wx');
 const selectPayStyle = (name) => {
   currentPay.value = name;
 };
+//返回
+let back = () => {
+  router.back();
+};
 
 let currentIndex = computed(() => {
   let index = -1;
@@ -101,33 +117,41 @@ let currentIndex = computed(() => {
 });
 
 let payAmout = ref(147);
+
+// 支付成功
+let paySuccess = () => {
+  router.push('/sub-operation-service/paySuccess');
+};
 </script>
 <style lang="scss" scoped>
 .order-success-warp {
   width: 100%;
   .order-success-content {
-    width: 100%;
-    background: $color-fff;
-    height: calc(100vh - 136px);
-    margin-top: 16px;
-    border-radius: 16px;
     overflow-y: auto;
+    margin-top: 16px;
+    width: 100%;
+    height: calc(100vh - 136px);
+    border-radius: 16px;
+    background: $color-fff;
     .content-top {
-      background: $color-main-table-header;
       padding: 16px;
+      background: $color-main-table-header;
       .back,
       .status {
         display: inline-block;
         vertical-align: top;
         padding-left: 16px;
         .status-val {
-          color: $color-main;
+          float: right;
-          .el-icon {
-            font-size: 38px;
-            display: inline-block;
-            vertical-align: middle;
-          }
           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;
@@ -137,13 +161,16 @@ let payAmout = ref(147);
           color: $color-999;
         }
       }
+      .status {
+        padding-left: 70px;
+      }
       .back {
+        cursor: pointer;
         .el-icon {
-          font-size: 30px;
           margin-top: 8px;
+          font-size: 30px;
         }
       }
-
       .pay-amount {
         padding-top: 24px;
         .tips {
@@ -158,23 +185,23 @@ let payAmout = ref(147);
         }
       }
       .order-no {
-        color: $color-999;
         font-size: 16px;
+        color: $color-999;
       }
     }
-
     .pay-style-warp {
-      width: 100%;
       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;
@@ -182,10 +209,10 @@ let payAmout = ref(147);
           gap: 64px;
         }
         .pay-item {
-          border-radius: 16px;
-          padding: 24px;
           display: inline-flex;
           justify-content: flex-start;
+          padding: 24px;
+          border-radius: 16px;
           gap: 16px;
           cursor: pointer;
           .is-style,
@@ -209,16 +236,16 @@ let payAmout = ref(147);
             font-size: 20px;
           }
           .style-icon {
-            border-radius: 16px;
+            position: relative;
             width: 56px;
             height: 56px;
-            position: relative;
+            border-radius: 16px;
             .iconfont {
               position: absolute;
-              left: 50%;
               top: 50%;
-              transform: translate(-50%, -50%);
+              left: 50%;
               color: $color-fff;
+              transform: translate(-50%, -50%);
               &.icon-alipay {
                 font-size: 46px !important;
               }
@@ -227,7 +254,6 @@ let payAmout = ref(147);
               }
             }
           }
-
           &.pay-act {
             border: 1px solid $color-main;
             .is-style {
@@ -246,10 +272,9 @@ let payAmout = ref(147);
           }
         }
       }
-
       .pay-code {
-        text-align: center;
         width: 100%;
+        text-align: center;
         .pay-tips {
           .tips,
           .pay-amount {
@@ -261,8 +286,8 @@ let payAmout = ref(147);
             justify-content: center;
             flex-direction: column;
             .tips-pos {
-              font-size: 20px;
               margin-top: 8px;
+              font-size: 20px;
             }
           }
           .pay-amount {
@@ -274,12 +299,11 @@ let payAmout = ref(147);
           }
         }
       }
-
       .pay-code-img {
         display: inline-flex;
-        width: 100%;
         justify-content: center;
         margin: 24px 0;
+        width: 100%;
         .code-img {
           display: inline-block;
           width: 240px;

sub-operation-service/src/views/userCenter/paySuccess.vue

@@ -1,29 +1,36 @@
 <template>
-  <div class="pay-success-warp">
+  <div>
-    <userHeader :title="'支付成功'"></userHeader>
+    <common current-name="agricultural">
+      <template #main>
+        <div class="pay-success-warp">
+          <userHeader :title="'我的购物车 (' + total + ')'"></userHeader>
 
-    <div class="pay-success-content">
+          <div class="pay-success-content">
-      <div class="icon-img">
+            <div class="icon-img">
-        <el-icon><CircleCheckFilled /></el-icon>
+              <el-icon><CircleCheckFilled /></el-icon>
-      </div>
+            </div>
-      <div class="success-txt">
+            <div class="success-txt">
-        <div class="title">恭喜，支付成功！</div>
+              <div class="title">恭喜，支付成功！</div>
-        <div class="tips">查看订单详情，请前往“个人中心”的“我的订单”</div>
+              <div class="tips">查看订单详情，请前往“个人中心”的“我的订单”</div>
-      </div>
+            </div>
-      <div class="success-do">
+            <div class="success-do">
-        <div class="success-do-pos">
+              <div class="success-do-pos">
-          <div class="do-item">
+                <div class="do-item">
-            <el-button @click="toLink('/sub-operation-service/userCenter-userOrders')">查看订单</el-button>
+                  <el-button @click="toLink('/sub-operation-service/userOrders')">查看订单</el-button>
-          </div>
+                </div>
-          <div class="do-item">
+                <div class="do-item">
-            <el-button type="primary" @click="toLink('/sub-operation-service/home')">返回首页</el-button>
+                  <el-button type="primary" @click="toLink('/sub-operation-service/home')">返回首页</el-button>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+      </template>
-    </div>
+    </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';
@@ -31,6 +38,8 @@ 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);
@@ -40,23 +49,21 @@ const toLink = (path) => {
 <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);
-    background: $color-fff;
     border-radius: 16px;
-    padding: 16px;
     text-align: center;
-    padding-top: 64px;
+    background: $color-fff;
-    margin-top: 16px;
     .icon-img {
       .el-icon {
         font-size: 80px;
         color: $color-main;
       }
     }
-
     .success-txt {
       .title {
         font-size: 38px;
@@ -67,12 +74,11 @@ const toLink = (path) => {
         color: $color-999;
       }
     }
-
     .success-do {
-      width: 100%;
       display: inline-flex;
       justify-content: center;
       margin: 64px 0;
+      width: 100%;
       .success-do-pos {
         display: inline-flex;
         justify-content: flex-start;
@@ -81,8 +87,8 @@ const toLink = (path) => {
           display: inline-block;
           vertical-align: middle;
           .el-button {
-            font-size: 20px;
             padding: 20px 48px !important;
+            font-size: 20px;
             border-radius: 8px !important;
           }
         }

sub-operation-service/src/views/userCenter/shoppingCart.vue

@@ -1,92 +1,99 @@
 <template>
-  <div class="my-shoping-car-warp">
+  <div>
-    <userHeader :title="'购物车' + total"></userHeader>
+    <common current-name="agricultural">
-    <div class="page-content-warp">
+      <template #main>
-      <div class="fix-top">
+        <div class="my-shoping-car-warp">
-        <div class="do-all" @click="toCheckAll">
+          <userHeader :title="'我的购物车 (' + total + ')'"></userHeader>
-          <div class="do-all-pos">
+          <div class="page-content-warp">
-            <ischeck :value="isAll"></ischeck>
+            <div class="fix-top">
-            <span class="all-txt">全选</span>
+              <div class="do-all" @click="toCheckAll">
-          </div>
+                <div class="do-all-pos">
-        </div>
+                  <ischeck :value="isAll"></ischeck>
-        <div class="batch-del">
+                  <span class="all-txt">全选</span>
-          <el-icon><Delete /></el-icon>
+                </div>
-          <span class="del-txt">批量删除</span>
-        </div>
-      </div>
-      <div class="conetnt-warp">
-        <div class="content-item-warp">
-          <div v-for="(n, index) in datalist" :key="index" class="content-item">
-            <div class="shop-info" @click="toCheckShop(index)">
-              <div class="shop-do">
-                <ischeck :value="n.ischeck"></ischeck>
               </div>
-              <div class="shop-img">
+              <div class="batch-del" @click="doBatchDel">
-                <costomImg
+                <el-icon><Delete /></el-icon>
-                  :url="'images/ecommerce/' + 'pic.png'"
+                <span class="del-txt">批量删除</span>
-                  :preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? '']"
-                  :is-view="false"
-                ></costomImg>
               </div>
-              <span class="shop-name txt-ellipsis clamp2">{{ n.shop }}</span>
             </div>
+            <div class="conetnt-warp">
+              <div class="content-item-warp">
+                <div v-for="(n, index) in datalist" :key="index" class="content-item">
+                  <div class="shop-info" @click="toCheckShop(index)">
+                    <div class="shop-do">
+                      <ischeck :value="n.ischeck"></ischeck>
+                    </div>
+                    <div class="shop-img">
+                      <costomImg
+                        :url="'images/ecommerce/' + 'pic.png'"
+                        :preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? '']"
+                        :is-view="false"
+                      ></costomImg>
+                    </div>
+                    <span class="shop-name txt-ellipsis clamp2">{{ n.shop }}</span>
+                  </div>
 
-            <div v-if="n.goodlist && n.goodlist.length > 0" class="good-list">
+                  <div v-if="n.goodlist && n.goodlist.length > 0" class="good-list">
-              <div v-for="(g, indexg) in n.goodlist" :key="indexg" class="good-item">
+                    <div v-for="(g, indexg) in n.goodlist" :key="indexg" class="good-item">
-                <div class="good-do" @click="toCheckGood(index, indexg)">
+                      <div class="good-do" @click="toCheckGood(index, indexg)">
-                  <div class="good-do-pos">
+                        <div class="good-do-pos">
-                    <ischeck :value="g.ischeck" size="24px"></ischeck>
+                          <ischeck :value="g.ischeck" size="24px"></ischeck>
-                  </div>
+                        </div>
-                </div>
+                      </div>
-                <div class="good-img" @click="toCheckGood(index, indexg)">
+                      <div class="good-img" @click="toCheckGood(index, indexg)">
-                  <costomImg
+                        <costomImg
-                    :url="'images/ecommerce/' + 'pic.png'"
+                          :url="'images/ecommerce/' + 'pic.png'"
-                    :preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? '']"
+                          :preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? '']"
-                    :is-view="false"
+                          :is-view="false"
-                  ></costomImg>
+                        ></costomImg>
-                </div>
+                      </div>
-                <div class="good-info" @click="toCheckGood(index, indexg)">
+                      <div class="good-info" @click="toCheckGood(index, indexg)">
-                  <div class="good-info-pos">
+                        <div class="good-info-pos">
-                    <div class="txt-ellipsis clamp2">{{ g.title || '--' }}</div>
+                          <div class="txt-ellipsis clamp2">{{ g.title || '--' }}</div>
-                  </div>
+                        </div>
-                </div>
+                      </div>
-                <div class="good-price-num">
+                      <div class="good-price-num">
-                  <div class="good-price-num-pos">
+                        <div class="good-price-num-pos">
-                    <div class="price" @click="toCheckGood(index, indexg)">{{ g.price }} / {{ g.unit }}</div>
+                          <div class="price" @click="toCheckGood(index, indexg)">{{ g.price }} / {{ g.unit }}</div>
-                    <div class="total" @click="toCheckGood(index, indexg)">{{ (g.price * g.num).toFixed(2) }}</div>
+                          <div class="total" @click="toCheckGood(index, indexg)">{{ (g.price * g.num).toFixed(2) }}</div>
-                    <div class="num">
+                          <div class="num">
-                      <div class="right-item">
+                            <div class="right-item">
-                        <el-input-number v-model="g.num" :min="1">
+                              <el-input-number v-model="g.num" :min="1">
-                          <template #suffix>
+                                <template #suffix>
-                            <span>{{ g.unit }}</span>
+                                  <span>{{ g.unit }}</span>
-                          </template>
+                                </template>
-                        </el-input-number>
+                              </el-input-number>
+                            </div>
+                          </div>
+                          <div class="good-del" @click="doSingleDel(index, indexg)">
+                            <span>删除</span>
+                          </div>
+                        </div>
                       </div>
                     </div>
-                    <div class="good-del" @click="doSingleDel(index, indexg)">
-                      <span>删除</span>
-                    </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="datalist.length == 0" :type="datalist.length != 0 ? 'primary' : 'info'" @click="toSettlement">结算</el-button>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+      </template>
-
+    </common>
-      <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 type="primary" @click="toSettlement">结算</el-button>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 <script setup>
+import common from './components/common.vue';
 import { ref, reactive, computed } from 'vue';
 import { isEmpty, getAssetsFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
@@ -157,7 +164,7 @@ let totalAmout = computed(() => {
 });
 
 const toSettlement = () => {
-  router.push('/sub-operation-service/userCenter-sureOrder');
+  router.push('/sub-operation-service/sureOrder');
 };
 
 const toCheckAll = () => {
@@ -243,25 +250,77 @@ const doSingleDel = (indexP, index) => {
       .catch(() => {});
   }
 };
+//批量删除
+const doBatchDel = () => {
+  // console.log('ischeck', datalist);
+  const allUnchecked = isAllUnchecked(datalist);
+  console.log(allUnchecked); // true 或 false
+  if (allUnchecked) {
+    app.$message({
+      message: '请先选择要删除的商品',
+      type: 'warning',
+    });
+  } else {
+    app
+      .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+      .then(() => {
+        //  删除逻辑
+        const filteredData = removeCheckedItems(datalist);
+        // console.log(filteredData);
+        datalist = filteredData;
+      })
+      .catch(() => {});
+  }
+};
+// 判断是否全部未选中
+function isAllUnchecked(data) {
+  return data.every((item) => {
+    // 检查当前项的 ischeck 是否为 false
+    const currentUnchecked = item.ischeck === false;
+    // 如果有子项 goodlist，递归检查子项
+    const childrenUnchecked = item.goodlist ? item.goodlist.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.goodlist) {
+      item.goodlist = item.goodlist.filter((child) => child.ischeck !== true);
+    }
+
+    return true;
+  });
+}
 </script>
 <style lang="scss" scoped>
 .my-shoping-car-warp {
   width: 100%;
   .page-content-warp {
-    width: 100%;
-    height: calc(100vh - 135px);
     position: relative;
-    background: $color-fff;
-    border-radius: 16px;
     overflow: hidden;
     margin: 16px 0 0 16px;
+    width: 100%;
+    height: calc(100vh - 135px);
+    border-radius: 16px;
+    background: $color-fff;
     .fix-top,
     .fix-bottom {
       position: absolute;
       left: 0;
-      width: 100%;
-      padding: 16px;
       z-index: 1;
+      padding: 16px;
+      width: 100%;
       background: $color-fff;
     }
     .fix-top {
@@ -272,23 +331,24 @@ const doSingleDel = (indexP, index) => {
       .batch-del {
         display: inline-block;
         vertical-align: middle;
+        cursor: pointer;
       }
       .do-all {
         display: inline-flex;
         flex-direction: column;
         justify-content: center;
         .all-txt {
-          font-size: 16px;
-          vertical-align: middle;
           display: inline-block;
           padding-left: 16px;
+          font-size: 16px;
+          vertical-align: middle;
         }
       }
       .batch-del {
-        border: 1px solid $color-333;
-        border-radius: 16px;
         padding: 8px 16px;
         font-size: 16px;
+        border: 1px solid $color-333;
+        border-radius: 16px;
         .el-icon {
           font-size: 18px;
         }
@@ -322,44 +382,44 @@ const doSingleDel = (indexP, index) => {
           font-size: 30px;
         }
         .total {
+          padding-left: 16px;
           font-size: 42px;
           color: $color-main;
-          padding-left: 16px;
         }
         .total::before {
           content: '￥';
         }
       }
       .bottom-do {
-        flex-direction: column;
-        justify-content: center;
         display: inline-flex;
+        justify-content: center;
+        flex-direction: column;
         ::v-deep() {
           .el-button {
-            font-size: 18px !important;
-            padding: 0 40px !important;
-            line-height: 42px !important;
-            height: 42px !important;
             display: inline-block !important;
+            padding: 0 40px !important;
+            height: 42px !important;
+            font-size: 18px !important;
+            line-height: 42px !important;
           }
         }
       }
     }
     .conetnt-warp {
-      width: 100%;
-      padding: 80px 16px 96px 16px;
       overflow-y: auto;
+      padding: 80px 16px 96px;
+      width: 100%;
       height: 100%;
       .content-item-warp {
         width: 100%;
         .content-item {
-          width: 100%;
           margin-bottom: 16px;
+          width: 100%;
           cursor: pointer;
           .shop-info {
-            width: 100%;
             display: inline-flex;
             justify-content: flex-start;
+            width: 100%;
             gap: 16px;
             .shop-do,
             .shop-img,
@@ -368,34 +428,34 @@ const doSingleDel = (indexP, index) => {
               vertical-align: middle;
             }
             .shop-img {
+              display: inline-flex;
+              justify-content: center;
               width: 32px;
               height: 32px;
-              display: inline-flex;
-              flex-direction: column;
-              justify-content: center;
               border-radius: 4px;
+              flex-direction: column;
             }
             .shop-do {
-              width: 30px;
               display: inline-flex;
-              flex-direction: column;
               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;
-              width: 100%;
               justify-content: flex-start;
-              gap: 16px;
-              padding-left: 16px;
               margin: 8px 0;
+              padding-left: 16px;
+              width: 100%;
+              gap: 16px;
             }
             .good-do,
             .good-img,
@@ -416,19 +476,22 @@ const doSingleDel = (indexP, index) => {
               height: 120px;
             }
             .good-info {
-              width: 200px;
               display: inline-flex;
-              flex-direction: column;
               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 {
-              width: calc(100% - 340px);
               display: inline-flex;
               justify-content: center;
+              width: calc(100% - 340px);
               flex-direction: column;
               .good-price-num-pos {
                 display: inline-flex;
@@ -442,15 +505,15 @@ const doSingleDel = (indexP, index) => {
                   font-weight: 400;
                 }
                 .total {
-                  color: $color-main;
                   font-weight: 700;
+                  color: $color-main;
                 }
                 .total::before {
                   content: '￥';
                 }
                 .good-del {
-                  color: $color-999;
                   font-size: 16px;
+                  color: $color-999;
                 }
               }
             }

sub-operation-service/src/views/userCenter/sureOrder.vue

@@ -1,131 +1,143 @@
 <template>
-  <div class="sure-order-warp">
+  <div>
-    <userHeader :title="'确认订单'"></userHeader>
+    <common current-name="agricultural">
-    <div class="addr-list">
+      <template #main>
-      <div class="addr-list-top">
+        <div class="sure-order-warp">
-        <div class="back">
+          <userHeader :title="'我的购物车 (' + total + ')'"></userHeader>
-          <el-icon><ArrowLeftBold /></el-icon>
+          <div class="addr-list">
-          <span>确认收货地址</span>
+            <div class="addr-list-top">
-        </div>
+              <div class="back">
-        <div class="addr-manage">管理地址</div>
+                <el-icon><ArrowLeftBold /></el-icon>
-      </div>
+                <span>确认收货地址</span>
-      <el-scrollbar>
-        <div class="scrollbar-flex-content">
-          <div
-            v-for="item in addrlist"
-            :key="item"
-            class="addr-item"
-            :class="currentAddr == item.id ? 'addr-item-act' : 'addr-item-normal'"
-            @click="selectAddr(item.id)"
-          >
-            <div class="addr-item-icon">
-              <div class="icon-pos">
-                <div class="iconfont icon-location"></div>
               </div>
+              <div class="addr-manage">管理地址</div>
             </div>
-            <div class="addr-item-info">
+            <el-scrollbar>
-              <div class="region">{{ item.region || '--' }}</div>
+              <div class="scrollbar-flex-content">
-              <div class="addr">{{ item.addr || '--' }}</div>
+                <div
-              <div class="link-name">{{ item.linkName }} {{ item.phone }}</div>
+                  v-for="(item, index) in addrlist"
-            </div>
+                  :key="item"
-          </div>
+                  class="addr-item"
-        </div>
+                  :class="currentAddr == item.id ? 'addr-item-act' : 'addr-item-normal'"
-      </el-scrollbar>
+                  @click="selectAddr(item.id)"
-    </div>
+                  @mouseover="hoverAddr(true, index)"
-
+                  @mouseleave="hoverAddr(false, index)"
-    <div class="order-info">
+                >
-      <div class="order-info-top">确认订单信息</div>
+                  <div class="addr-item-icon">
-      <div class="order-info-list">
+                    <div class="icon-pos">
-        <div class="content-item-warp">
+                      <div class="iconfont icon-location"></div>
-          <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.goodlist && n.goodlist.length > 0" class="good-list">
-                <div v-for="(g, indexg) in n.goodlist" :key="indexg" class="good-item">
-                  <div class="good-img">
-                    <costomImg
-                      :url="'images/ecommerce/' + 'pic.png'"
-                      :preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')]"
-                      :is-view="false"
-                    ></costomImg>
-                  </div>
-                  <div class="good-info">
-                    <div class="good-info-pos">
-                      <div class="txt-ellipsis clamp2">{{ g.title || '--' }}</div>
                     </div>
                   </div>
-                  <div class="good-price-num">
+                  <div class="addr-item-info">
-                    <div class="good-price-num-pos">
+                    <div class="region">{{ item.region || '--' }}</div>
-                      <div class="price">{{ g.price }} / {{ g.unit }}</div>
+                    <div class="addr">{{ item.addr || '--' }}</div>
-                      <div class="total">{{ g.price }}</div>
+                    <div class="link-name">
-                      <div class="num">
+                      {{ item.linkName }} {{ item.phone }}
-                        <div class="right-item">
+                      <span v-if="item.isEditBtn" class="bj" @click="editAddr(item)">编辑</span>
-                          <el-input-number v-model="g.num" :min="1">
+                    </div>
-                            <template #suffix>
+                  </div>
-                              <span>{{ g.unit }}</span>
+                </div>
-                            </template>
+              </div>
-                          </el-input-number>
+            </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.goodlist && n.goodlist.length > 0" class="good-list">
+                      <div v-for="(g, indexg) in n.goodlist" :key="indexg" class="good-item">
+                        <div class="good-img">
+                          <costomImg
+                            :url="'images/ecommerce/' + 'pic.png'"
+                            :preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')]"
+                            :is-view="false"
+                          ></costomImg>
+                        </div>
+                        <div class="good-info">
+                          <div class="good-info-pos">
+                            <div class="txt-ellipsis clamp2">{{ g.title || '--' }}</div>
+                          </div>
+                        </div>
+                        <div class="good-price-num">
+                          <div class="good-price-num-pos">
+                            <div class="price">{{ g.price }} / {{ g.unit }}</div>
+                            <div class="total">{{ g.price }}</div>
+                            <div class="num">
+                              <div class="right-item">
+                                <el-input-number v-model="g.num" :min="1">
+                                  <template #suffix>
+                                    <span>{{ g.unit }}</span>
+                                  </template>
+                                </el-input-number>
+                              </div>
+                            </div>
+                            <div class="good-total">
+                              {{ (g.price * g.num).toFixed(2) }}
+                            </div>
+                          </div>
                         </div>
                       </div>
-                      <div class="good-total">
+                    </div>
-                        {{ (g.price * g.num).toFixed(2) }}
+                  </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>
+            <div class="order-bottom">
-
+              <div class="bottom-total">
-          <div class="content-item-bottom">
+                <span class="tips">实付款</span>
-            <div class="num-total">
+                <span class="total">{{ (totalAmout + carriage).toFixed(2) }}</span>
-              共
-              <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">
+              <div class="bottom-do">
-                <span>运费：</span>
+                <el-button type="primary" @click="toSureOrder">提交订单</el-button>
-                <span class="coat-val">{{ carriage.toFixed(2) }}</span>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </template>
-      <div class="order-bottom">
+    </common>
-        <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>
 <script setup>
+import common from './components/common.vue';
 import { ref, reactive, computed } from 'vue';
 import { isEmpty, getAssetsFile } from '@/utils';
 import userHeader from './components/userHeader.vue';
@@ -134,18 +146,32 @@ const route = useRoute();
 const router = useRouter();
 
 const addrlist = reactive([
-  { id: '001', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 101', linkName: '李先生', phone: '13813575526' },
+  { id: '001', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 101', linkName: '李先生', phone: '13813575526', isEditBtn: false },
-  { id: '002', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 102', linkName: '王先生', phone: '13813575528' },
+  { id: '002', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 102', linkName: '王先生', phone: '13813575528', isEditBtn: false },
-  { id: '003', region: '云南省 昆明市 呈贡区 彩云北路', addr: '星光小区 一单元 1楼 101', linkName: '李女士', phone: '13813575527' },
+  { id: '003', region: '云南省 昆明市 呈贡区 彩云北路', addr: '星光小区 一单元 1楼 101', linkName: '李女士', phone: '13813575527', isEditBtn: false },
-  { id: '004', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 102', linkName: '王女生', phone: '13813565525' },
+  { id: '004', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 102', linkName: '王女生', phone: '13813565525', isEditBtn: false },
-  { id: '005', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 105', linkName: '张女生', phone: '13813565526' },
+  { id: '005', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 105', linkName: '张女生', phone: '13813565526', isEditBtn: false },
 ]);
 
 let currentAddr = ref('001');
+let total = ref(99);
 
 const selectAddr = (data) => {
   currentAddr.value = data;
 };
+//鼠标移入移出事件
+const hoverAddr = (data, index) => {
+  console.log('data', data, index);
+  addrlist.forEach((item, i) => {
+    if (index == i) {
+      item.isEditBtn = data;
+    }
+  });
+};
+//编辑地址
+const editAddr = (data) => {
+  console.log('data', data);
+};
 
 let datalist = reactive([
   {
@@ -168,7 +194,7 @@ let datalist = reactive([
 ]);
 
 const toSureOrder = () => {
-  router.push('/sub-operation-service/userCenter-orderSuccess');
+  router.push('/sub-operation-service/orderSuccess');
 };
 
 let carriage = ref(98);
@@ -217,16 +243,16 @@ let totalNum = computed(() => {
 .sure-order-warp {
   width: 100%;
   .addr-list {
-    background: $color-fff;
-    padding: 16px;
-    border-radius: 16px;
     overflow: hidden;
     margin: 16px 0;
+    padding: 16px;
+    border-radius: 16px;
+    background: $color-fff;
     .addr-list-top {
       display: inline-flex;
       justify-content: space-between;
-      width: 100%;
       margin-bottom: 16px;
+      width: 100%;
       .back {
         font-size: 20px;
         .el-icon {
@@ -248,13 +274,13 @@ let totalNum = computed(() => {
       gap: 16px;
     }
     .addr-item {
-      width: 280px;
-      padding: 16px 8px;
       display: inline-flex;
       justify-content: flex-start;
-      cursor: pointer;
+      padding: 16px 8px;
-      background: $color-fff;
+      width: 280px;
       border-radius: 16px;
+      background: $color-fff;
+      cursor: pointer;
       &.addr-item-act {
         border: 1px solid $color-main;
         .iconfont {
@@ -268,6 +294,7 @@ let totalNum = computed(() => {
       .addr-item-info {
         display: inline-block;
         vertical-align: middle;
+        text-align: left;
       }
       .addr-item-icon {
         display: inline-flex;
@@ -279,32 +306,37 @@ let totalNum = computed(() => {
         }
       }
       .addr-item-info {
-        font-size: 15px;
         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 {
-    background: $color-fff;
-    border-radius: 16px;
-    width: 100%;
-    height: calc(100vh - 340px);
     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;
-      width: 100%;
       z-index: 1;
       padding: 16px;
+      width: 100%;
     }
     .order-info-top {
       top: 0;
@@ -329,57 +361,57 @@ let totalNum = computed(() => {
           font-size: 30px;
         }
         .total {
+          padding-left: 16px;
           font-size: 42px;
           color: $color-main;
-          padding-left: 16px;
         }
         .total::before {
           content: '￥';
         }
       }
       .bottom-do {
-        flex-direction: column;
-        justify-content: center;
         display: inline-flex;
+        justify-content: center;
+        flex-direction: column;
         ::v-deep() {
           .el-button {
-            font-size: 18px !important;
-            padding: 0 40px !important;
-            line-height: 42px !important;
-            height: 42px !important;
             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;
-      width: calc(100% - 32px);
-      height: calc(100% - 150px);
-      background: $color-f5;
       left: 16px;
       padding: 16px;
+      width: calc(100% - 32px);
+      height: calc(100% - 150px);
       border-radius: 16px;
-      position: relative;
+      background: $color-f5;
       .content-item-warp {
-        height: 100%;
-        width: 100%;
         position: relative;
+        width: 100%;
+        height: 100%;
         .content-item-header {
-          width: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
           display: inline-flex;
           justify-content: flex-start;
+          width: 100%;
           gap: 16px;
-          position: absolute;
-          left: 0;
-          top: 0;
           .header-th {
             display: inline-block;
+            margin-bottom: 16px;
+            font-size: 20px;
+            color: $color-999;
             vertical-align: middle;
             line-height: 32px;
-            color: $color-999;
-            font-size: 20px;
-            margin-bottom: 16px;
             &.first {
               width: 340px;
               text-align: left;
@@ -391,21 +423,21 @@ let totalNum = computed(() => {
           }
         }
         .content-item-list {
-          width: 100%;
+          position: absolute;
           top: 48px;
           left: 0;
-          position: absolute;
           overflow-y: auto;
+          width: 100%;
           height: calc(100% - 100px);
         }
         .content-item {
-          width: 100%;
           margin-bottom: 16px;
+          width: 100%;
           cursor: pointer;
           .shop-info {
-            width: 100%;
             display: inline-flex;
             justify-content: flex-start;
+            width: 100%;
             gap: 16px;
             .shop-do,
             .shop-img,
@@ -414,34 +446,33 @@ let totalNum = computed(() => {
               vertical-align: middle;
             }
             .shop-img {
+              display: inline-flex;
+              justify-content: center;
               width: 32px;
               height: 32px;
-              display: inline-flex;
-              flex-direction: column;
-              justify-content: center;
               border-radius: 4px;
+              flex-direction: column;
             }
             .shop-do {
-              width: 30px;
               display: inline-flex;
-              flex-direction: column;
               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;
-              width: 100%;
               justify-content: flex-start;
-              gap: 16px;
-              padding-left: 16px;
               margin: 8px 0;
+              padding-left: 16px;
+              width: 100%;
+              gap: 16px;
             }
             .good-do,
             .good-img,
@@ -462,19 +493,19 @@ let totalNum = computed(() => {
               height: 120px;
             }
             .good-info {
-              width: 200px;
               display: inline-flex;
-              flex-direction: column;
               justify-content: center;
+              width: 200px;
+              flex-direction: column;
               .good-info-pos {
                 font-size: 18px;
                 color: $color-666;
               }
             }
             .good-price-num {
-              width: calc(100% - 340px);
               display: inline-flex;
               justify-content: center;
+              width: calc(100% - 340px);
               flex-direction: column;
               .good-price-num-pos {
                 display: inline-flex;
@@ -488,30 +519,29 @@ let totalNum = computed(() => {
                   font-weight: 400;
                 }
                 .total {
-                  color: $color-main;
                   font-weight: 700;
+                  color: $color-main;
                 }
                 .total::before {
                   content: '￥';
                 }
                 .good-total {
-                  color: $color-main;
                   font-size: 16px;
+                  color: $color-main;
                 }
               }
             }
           }
         }
-
         .content-item-bottom {
           position: absolute;
-          left: 0;
           bottom: -8px;
-          line-height: 48px;
+          left: 0;
           z-index: 2;
-          width: 100%;
           display: inline-flex;
           justify-content: space-between;
+          width: 100%;
+          line-height: 48px;
           .num-total,
           .price-total {
             display: inline-block;
@@ -527,10 +557,10 @@ let totalNum = computed(() => {
           }
           .num-total {
             .num-val {
-              color: $color-main;
               padding: 0 8px;
               font-size: 24px;
               font-weight: bold;
+              color: $color-main;
             }
           }
         }

sub-operation-service/src/views/userCenter/userLands.vue

@@ -1,10 +1,29 @@
 <template>
-  <div class="user-lands-warp">我的土地</div>
+  <div>
+    <common current-name="purchaser">
+      <template #main>
+        <div class="user-orders-warp">
+          <userHeader :title="'我的土地'"></userHeader>
+          <div class="user-orders-content">
+            <div class="order-tab">
+              <el-tabs v-model="activeCurrent">
+                <el-tab-pane v-for="(t, indext) in bottomList" :key="indext" :label="t.title" :name="t.name"> </el-tab-pane>
+              </el-tabs>
+            </div>
+
+            <div class="order-list-warp">我的土地</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();
 </script>

sub-operation-service/src/views/userCenter/userOrders.vue

@@ -1,81 +1,88 @@
 <template>
-  <div class="user-orders-warp">
+  <div>
-    <userHeader :title="'订单管理'"></userHeader>
+    <common current-name="supplier">
-    <div class="user-orders-content">
+      <template #main>
-      <div class="order-tab">
+        <div class="user-orders-warp">
-        <el-tabs v-model="activeCurrent">
+          <userHeader :title="'订单管理'"></userHeader>
-          <el-tab-pane v-for="(t, indext) in bottomList" :key="indext" :label="t.title" :name="t.name"> </el-tab-pane>
+          <div class="user-orders-content">
-        </el-tabs>
+            <div class="order-tab">
-      </div>
+              <el-tabs v-model="activeCurrent">
-
+                <el-tab-pane v-for="(t, indext) in bottomList" :key="indext" :label="t.title" :name="t.name"> </el-tab-pane>
-      <div class="order-list-warp">
+              </el-tabs>
-        <div class="order-list">
-          <div v-for="(o, indexo) in orderList" :key="indexo" class="order-item">
-            <div class="order-item-top">
-              <div class="top-l">
-                <div class="top-item">
-                  <div class="label">订单编号：</div>
-                  <div class="val">{{ o.orderNo || '--' }}</div>
-                </div>
-                <div class="top-item">
-                  <div class="label">下单时间：</div>
-                  <div class="val">{{ o.createTime || '--' }}</div>
-                </div>
-              </div>
-              <div class="top-r">
-                <div class="top-item">
-                  <div class="label">订单金额：</div>
-                  <div class="val amount">{{ o.payAmount.toFixed(2) || '0.00' }}</div>
-                </div>
-              </div>
             </div>
-            <div v-if="o.goodlist && o.goodlist.length > 0" class="order-item-content">
+
-              <div class="content-list">
+            <div class="order-list-warp">
-                <div v-for="(g, indexg) in o.goodlist" :key="indexg" class="good-item">
+              <div class="order-list">
-                  <div class="good-img">
+                <div v-for="(o, indexo) in orderList" :key="indexo" class="order-item">
-                    <costomImg
+                  <div class="order-item-top">
-                      :url="'images/ecommerce/' + 'pic.png'"
+                    <div class="top-l">
-                      :preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? '']"
+                      <div class="top-item">
-                      :is-view="false"
+                        <div class="label">订单编号：</div>
-                    ></costomImg>
+                        <div class="val">{{ o.orderNo || '--' }}</div>
-                  </div>
+                      </div>
-                  <div class="good-info">
+                      <div class="top-item">
-                    <div class="good-info-pos">
+                        <div class="label">下单时间：</div>
-                      <div class="txt-ellipsis clamp2">{{ g.title || '--' }}</div>
+                        <div class="val">{{ o.createTime || '--' }}</div>
+                      </div>
+                    </div>
+                    <div class="top-r">
+                      <div class="top-item">
+                        <div class="label">订单金额：</div>
+                        <div class="val amount">{{ o.payAmount.toFixed(2) || '0.00' }}</div>
+                      </div>
                     </div>
                   </div>
-                  <div class="good-price-num">
+                  <div v-if="o.goodlist && o.goodlist.length > 0" class="order-item-content">
-                    <div class="good-price-num-pos">
+                    <div class="content-list">
-                      <div class="price">{{ g.price }} / {{ g.unit }} * {{ g.num }}</div>
+                      <div v-for="(g, indexg) in o.goodlist" :key="indexg" class="good-item">
-                      <div class="total">
+                        <div class="good-img">
-                        <div class="amount">{{ (g.price * g.num + g.carriage).toFixed(2) }}</div>
+                          <costomImg
-                        <div class="carriage">( 含运费{{ g.carriage.toFixed(2) }})</div>
+                            :url="'images/ecommerce/' + 'pic.png'"
+                            :preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? '']"
+                            :is-view="false"
+                          ></costomImg>
+                        </div>
+                        <div class="good-info">
+                          <div class="good-info-pos">
+                            <div class="txt-ellipsis clamp2">{{ g.title || '--' }}</div>
+                          </div>
+                        </div>
+                        <div class="good-price-num">
+                          <div class="good-price-num-pos">
+                            <div class="price">{{ g.price }} / {{ g.unit }} * {{ g.num }}</div>
+                            <div class="total">
+                              <div class="amount">{{ (g.price * g.num + g.carriage).toFixed(2) }}</div>
+                              <div class="carriage">( 含运费{{ g.carriage.toFixed(2) }})</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="content-right">
+                      <div class="content-right-pos">
+                        <div v-if="o.status == 0" class="right-item do-btn">
+                          <el-button type="primary" @click="doPay">立即付款</el-button>
+                        </div>
+                        <div v-if="o.status == 0" class="right-item do-btn">
+                          <el-button @click="doCancel">取消订单</el-button>
+                        </div>
+                        <div v-if="o.status != 0" class="right-item">已发货</div>
+                        <div v-if="o.status != 0" class="right-item text-link">快递单号</div>
+                        <div class="right-item text-link">订单详情</div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-              <div class="content-right">
-                <div class="content-right-pos">
-                  <div v-if="o.status == 0" class="right-item do-btn">
-                    <el-button type="primary" @click="doPay">立即付款</el-button>
-                  </div>
-                  <div v-if="o.status == 0" class="right-item do-btn">
-                    <el-button @click="doCancel">取消订单</el-button>
-                  </div>
-                  <div v-if="o.status != 0" class="right-item">已发货</div>
-                  <div v-if="o.status != 0" class="right-item text-link">快递单号</div>
-                  <div class="right-item text-link">订单详情</div>
-                </div>
-              </div>
             </div>
           </div>
         </div>
-      </div>
+      </template>
-    </div>
+    </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';
@@ -138,18 +145,17 @@ const doCancel = () => {};
 .user-orders-warp {
   width: 100%;
   .user-orders-content {
-    width: 100%;
-    background: $color-fff;
-    border-radius: 16px;
-    padding: 16px;
     margin-top: 16px;
+    padding: 16px;
+    width: 100%;
     height: calc(100vh - 136px);
+    border-radius: 16px;
+    background: $color-fff;
   }
   .order-tab {
     width: 100%;
-
     ::v-deep() {
-      .el-tabs__nav-wrap:after {
+      .el-tabs__nav-wrap::after {
         background: transparent !important;
       }
       .el-tabs__item {
@@ -174,19 +180,18 @@ const doCancel = () => {};
       }
     }
   }
-
   .order-list-warp {
+    overflow-y: auto;
     width: 100%;
     height: calc(100% - 60px);
-    overflow-y: auto;
     .order-list {
       width: 100%;
       .order-item {
         width: 100%;
         .order-item-top {
           display: inline-flex;
-          width: 100%;
           padding: 16px 0;
+          width: 100%;
           .top-l,
           .top-r {
             display: inline-block;
@@ -194,14 +199,13 @@ const doCancel = () => {};
           }
           .top-l {
             display: inline-flex;
+            justify-content: flex-start;
             width: 80%;
             gap: 64px;
-            justify-content: flex-start;
           }
           .top-r {
             text-align: right;
           }
-
           .top-item {
             display: inline-flex;
             justify-content: flex-start;
@@ -217,12 +221,11 @@ const doCancel = () => {};
             }
           }
         }
-
         .order-item-content {
-          background: $color-f5;
           display: inline-flex;
           width: 100%;
           border-radius: 16px;
+          background: $color-f5;
           .content-list,
           .content-right {
             display: inline-block;
@@ -232,11 +235,11 @@ const doCancel = () => {};
             width: calc(100% - 160px);
             .good-item {
               display: inline-flex;
-              width: 100%;
               justify-content: flex-start;
-              gap: 16px;
-              padding-left: 16px;
               margin: 8px 0;
+              padding-left: 16px;
+              width: 100%;
+              gap: 16px;
             }
             .good-img,
             .good-info,
@@ -249,19 +252,19 @@ const doCancel = () => {};
               height: 120px;
             }
             .good-info {
-              width: 200px;
               display: inline-flex;
-              flex-direction: column;
               justify-content: center;
+              width: 200px;
+              flex-direction: column;
               .good-info-pos {
                 font-size: 18px;
                 color: $color-666;
               }
             }
             .good-price-num {
-              width: calc(100% - 340px);
               display: inline-flex;
               justify-content: center;
+              width: calc(100% - 340px);
               flex-direction: column;
               .good-price-num-pos {
                 display: inline-flex;
@@ -277,35 +280,35 @@ const doCancel = () => {};
                 .total {
                   text-align: center;
                   .amount {
-                    color: $color-main;
                     font-weight: 700;
+                    color: $color-main;
                   }
                   .amount::before {
                     content: '￥';
                   }
                   .carriage {
-                    color: $color-666;
                     font-size: 16px;
+                    color: $color-666;
                   }
                 }
               }
             }
           }
           .content-right {
-            width: 160px;
             display: inline-flex;
             justify-content: center;
-            flex-direction: column;
+            width: 160px;
             text-align: center;
+            flex-direction: column;
             .content-right-pos {
               .text-normal {
                 cursor: pointer;
                 font-size: 16px;
               }
               .text-link {
+                font-size: 16px;
                 color: $color-main;
                 cursor: pointer;
-                font-size: 16px;
               }
             }
             .do-btn {

sub-operation-service/src/views/warehouseLogistics/warehouse/index.vue

@@ -101,109 +101,94 @@ const toLink = (row) => {
   position: relative;
   overflow: hidden;
   margin-bottom: 20px;
-  border-radius: 24px;
   border: 0;
+  border-radius: 24px;
 }
-
 .storage-content {
-  @include flex-column();
+  @include flex-column;
-  gap: 16px;
 
+  gap: 16px;
   &-top {
-    @include flex-row();
+    @include flex-row;
+
     align-items: center;
   }
 }
-
 .storage-image {
+  margin-right: 16px;
   width: 120px;
   height: 120px;
-  margin-right: 16px;
   border-radius: 8px;
   object-fit: cover;
 }
-
 .storage-info {
   padding-right: 50px;
   flex: 1;
   cursor: pointer;
 }
-
 .storage-title,
 .storage-desc,
 .storage-tags,
 .storage-location {
-  width: 100%;
-  margin: 10px 0;
   overflow: hidden;
+  margin: 10px 0;
+  width: 100%;
 }
-
 .storage-title {
   font-size: 20px;
   font-weight: 700;
-  color: #000;
+  color: #000000;
-  @include ellipsis();
+  @include ellipsis;
 }
-
 .storage-desc {
   font-size: 16px;
-  color: #999;
+  color: #999999;
-  @include ellipsis();
+  @include ellipsis;
-
   i {
     display: inline-block;
     width: 20px;
     height: 20px;
   }
 }
-
 .storage-tags {
   span {
     margin-right: 10px;
   }
 }
-
 .storage-location {
   display: flex;
   align-items: center;
   font-size: 16px;
   font-weight: 400;
-  color: #000;
+  color: #000000;
 }
-
 .storage-price {
   display: flex;
   align-items: center;
-
   &-left {
     flex: 1;
   }
 }
-
 .price-label {
-  font-size: 16px;
-  color: #999;
   margin-right: 10px;
+  font-size: 16px;
+  color: #999999;
 }
-
 .price-amount {
-  color: $color-primary;
   font-size: 20px;
   font-weight: 700;
+  color: $color-primary;
 }
-
 .contact-btn {
   width: 152px;
   height: 48px;
   font-size: 20px;
   border-radius: 8px;
   background: #25bf82 !important;
-
   :deep(.el-icon) {
     margin-right: 10px;
   }
 }
-
 .rank-badge {
   position: absolute;
   top: 0;

sub-operation-service/vite.config.js

@@ -81,6 +81,8 @@ export default defineConfig(({ command, mode }) => {
       vueSetupExtend(),
       eslintPlugin({
         include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.ts', 'src/*.vue'],
+        fix: true, // 自动修复
+        exclude: ['**/node_modules/**'], // 忽略 node_modules
       }),
       Components({
         dirs: ['src/components'],