From 615ee91511afd58de2907afb36d0d1d67652d645 Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Mon, 25 May 2026 10:49:09 +0800
Subject: [PATCH] =?UTF-8?q?manager=20=E5=8D=87=E7=BA=A7=E5=88=B0vue3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manager/MIGRATION-VUE3.md                     |   59 +
 manager/babel.config.js                       |   11 +-
 manager/package.json                          |   48 +-
 manager/public/index.html                     |    5 +-
 manager/src/App.vue                           |   40 +-
 manager/src/components/affix-time.vue         |  198 +-
 manager/src/components/editor/index.vue       |    2 +-
 manager/src/components/editor/plugins.js      |    2 +-
 .../src/components/editor/upload-image.vue    |  250 +--
 .../components/hotzone/components/Zone.vue    |   51 +-
 manager/src/components/hotzone/index.vue      |   23 +-
 .../components/lili-dialog/goods-dialog.vue   |   72 +-
 manager/src/components/lili-dialog/index.vue  |   23 +-
 .../components/lili-dialog/link-dialog.vue    |   24 +-
 manager/src/components/lili-dialog/style.scss |    6 +-
 .../components/lili-dialog/template/index.js  |   31 +-
 .../lili-dialog/template/marketing.vue        |  412 +----
 .../components/lili-dialog/template/other.vue |  185 +-
 .../components/lili-dialog/template/pages.vue |    6 +-
 .../components/lili-dialog/template/shops.vue |   85 +-
 .../lili-dialog/template/special.vue          |  138 +-
 .../src/components/lili/circle-loading.vue    |   20 +-
 manager/src/components/lili/config-drawer.vue |   68 +-
 .../src/components/lili/department-choose.vue |   56 +-
 .../lili/department-tree-choose.vue           |  126 +-
 manager/src/components/lili/set-password.vue  |  156 +-
 .../src/components/lili/upload-pic-input.vue  |  214 +--
 .../src/components/lili/upload-pic-thumb.vue  |  242 ++-
 manager/src/components/map/index.vue          |    7 +-
 manager/src/components/map/multiple-map.vue   |  117 +-
 manager/src/components/price-color-scheme.vue |   58 +
 manager/src/components/region.vue             |  237 +--
 .../src/components/tree-table/Table/Table.vue |    9 +-
 .../components/tree-table/Table/TableBody.js  |   49 +-
 .../tree-table/Table/utils/scrollBarWidth.js  |   22 +-
 manager/src/components/verify/index.vue       |  160 +-
 manager/src/libs/axios.js                     |    2 +-
 manager/src/libs/util.js                      |  156 +-
 manager/src/locale/index.js                   |   34 +-
 manager/src/main.js                           |  154 +-
 manager/src/plugins/element.js                |   11 +
 manager/src/router/index.js                   |   74 +-
 manager/src/store/index.js                    |   25 +-
 manager/src/store/modules/app.js              |    9 +-
 manager/src/store/modules/user.js             |    3 +-
 manager/src/styles/common.scss                |   47 +-
 manager/src/styles/element.scss               |   97 +
 manager/src/styles/table-common.scss          |   10 +-
 manager/src/styles/theme.less                 |   16 +-
 manager/src/styles/tree-common.scss           |    4 +-
 manager/src/utils/message.js                  |   74 +
 manager/src/views/Main.vue                    |  202 +-
 .../views/change-password/change-password.vue |  163 +-
 manager/src/views/custom-words/index.vue      |  241 +--
 .../src/views/distribution/distribution.vue   |  477 ++---
 .../views/distribution/distributionApply.vue  |  222 +--
 .../views/distribution/distributionCash.vue   |  394 ++--
 .../views/distribution/distributionGoods.vue  |  320 ++--
 .../views/distribution/distributionOrder.vue  |  483 ++---
 .../distribution/distributionSetting.vue      |   68 +-
 manager/src/views/error-page/403.vue          |   44 +-
 manager/src/views/error-page/404.vue          |   30 +-
 manager/src/views/error-page/500.vue          |   45 +-
 manager/src/views/goods-unit/index.vue        |  259 +--
 manager/src/views/goods/goods-info/goods.vue  |  707 +++----
 .../src/views/goods/goods-info/goodsApply.vue |  361 ++--
 .../views/goods/goods-info/goodsDetail.vue    |  294 +--
 .../src/views/goods/goods-manage/brand.vue    |  452 ++---
 .../src/views/goods/goods-manage/category.vue |  560 +++---
 .../goods/goods-manage/parameter-edit.vue     |  218 +--
 .../views/goods/goods-manage/parameter.vue    |  177 +-
 .../src/views/goods/goods-review/index.vue    |  465 ++---
 manager/src/views/goods/group/index.vue       |  182 +-
 .../src/views/goods/virtual-sales/index.vue   |  344 ++--
 manager/src/views/home/home.scss              |    2 +-
 manager/src/views/home/home.vue               |  107 +-
 manager/src/views/login.vue                   |  112 +-
 manager/src/views/logistics/index.vue         |  534 +++---
 manager/src/views/main-parts/footer.vue       |   19 +-
 manager/src/views/main-parts/header.vue       |   52 +-
 manager/src/views/main-parts/lang-switch.vue  |   23 +-
 manager/src/views/main-parts/message-tip.vue  |  133 +-
 .../src/views/main-parts/page-breadcrumb.vue  |  201 ++
 .../shrinkable-menu/shrinkable-menu.vue       |  139 +-
 .../src/views/main-parts/tags-page-opened.vue |  275 ++-
 manager/src/views/main.scss                   |   89 +-
 manager/src/views/member/advance/recharge.vue |  291 ++-
 .../src/views/member/advance/walletLog.vue    |  202 +-
 .../views/member/advance/withdrawApply.vue    |  484 +++--
 manager/src/views/member/benefit/index.vue    |  570 +++---
 .../src/views/member/grade/experience-log.vue |  164 +-
 .../views/member/grade/experience-setting.vue |  618 +++----
 manager/src/views/member/grade/index.vue      |  426 ++---
 manager/src/views/member/group/index.vue      |  197 +-
 manager/src/views/member/list/index.vue       |  877 ++++-----
 .../src/views/member/list/memberDetail.vue    | 1639 +++++++----------
 .../src/views/member/list/memberRecycle.vue   |  464 ++---
 .../message-manage/weChatMessageManager.vue   |  456 ++---
 manager/src/views/member/point/point.vue      |  870 ++++-----
 .../src/views/order/after-order/afterSale.vue |  526 ++----
 .../order/after-order/afterSaleOrder.vue      |  623 +++----
 .../after-order/afterSaleOrderDetail.vue      |   60 +-
 .../order/after-order/orderComplaint.vue      |  423 ++---
 .../after-order/orderComplaintDetail.vue      |  365 ++--
 manager/src/views/order/flow/paymentLog.vue   |  282 ++-
 manager/src/views/order/flow/refundLog.vue    |  278 ++-
 .../views/order/order/fictitiousOrderList.vue |  370 ++--
 manager/src/views/order/order/orderDetail.vue |  482 ++---
 manager/src/views/order/order/orderList.vue   |  737 +++-----
 .../src/views/page-decoration/floorList.vue   |  302 +--
 .../src/views/page-decoration/modelForm.vue   |  184 +-
 .../views/page-decoration/modelFormItem.vue   |   60 +-
 .../page-decoration/modelList/carousel.vue    |   62 +-
 .../page-decoration/modelList/carousel1.vue   |   48 +-
 .../page-decoration/modelList/carousel2.vue   |   98 +-
 .../modelList/firstPageAdvert.vue             |   46 +-
 .../page-decoration/modelList/forYour.vue     |   62 +-
 .../modelList/goodsAndType.vue                |   54 +-
 .../page-decoration/modelList/mixModel.vue    |   74 +-
 .../modelList/mixs/mix-brand.vue              |    4 +-
 .../modelList/mixs/mix-goods.vue              |    2 +-
 .../modelList/newGoodsSort.vue                |   88 +-
 .../page-decoration/modelList/notEnough.vue   |   28 +-
 .../modelList/oneRowThreeColumns.vue          |   32 +-
 .../modelList/onlyGoodsModel.vue              |   28 +-
 .../page-decoration/modelList/recommend.vue   |   88 +-
 .../modelList/seckill-only-album.vue          |    6 +-
 .../page-decoration/modelList/seckill.vue     |    6 +-
 .../src/views/page-decoration/renovation.vue  |   36 +-
 .../views/page-decoration/wap/advertising.vue |   30 +-
 .../page-decoration/wap/alertAdvertising.vue  |   28 +-
 .../views/page-decoration/wap/decorate.scss   |    4 +-
 .../views/page-decoration/wap/decorate.vue    |  215 +--
 .../src/views/page-decoration/wap/index.vue   |   38 +-
 .../src/views/page-decoration/wap/navbar.vue  |   42 +-
 .../src/views/page-decoration/wap/style.scss  |    2 +-
 .../wap/template/tpl_banner.vue               |   10 +-
 .../wap/template/tpl_goods.vue                |   13 +-
 .../wap/template/tpl_search.vue               |    4 +-
 .../src/views/page-decoration/wap/wapList.vue |  264 +--
 .../page/article-manage/ArticleCategory.vue   |  348 ++--
 .../page/article-manage/HOTWORDS_HISTORY.vue  |  212 +--
 .../page/article-manage/HOTWORDS_TODAY.vue    |  144 +-
 .../page/article-manage/HOTWORD_SETTING.vue   |  188 +-
 .../views/page/article-manage/articleList.vue |  482 ++---
 .../views/page/article-manage/hotWords.vue    |   60 +-
 .../src/views/page/article-manage/style.scss  |    4 +-
 .../src/views/page/article-manage/template.js |    8 +-
 .../template/historyHotWords.vue              |  113 +-
 .../article-manage/template/setupHotWords.vue |   67 +-
 .../template/statisticsHotWords.vue           |   75 +-
 .../article-manage/template/todayHotWords.vue |  142 +-
 manager/src/views/page/feedback/feedback.vue  |  313 ++--
 .../views/personal-center/personal-center.vue |   46 +-
 manager/src/views/privacy-content/index.vue   |  317 ++--
 .../coupon-activity/coupon-info.vue           |  139 +-
 .../coupon-activity/coupon-publish.vue        |  417 ++---
 .../promotions/coupon-activity/coupon.vue     |  336 ++--
 .../promotions/coupon/coupon-publish.vue      |  326 ++--
 .../promotions/coupon/coupon-receive.vue      |  378 ++--
 .../src/views/promotions/coupon/coupon.vue    |  623 +++----
 .../full-discount/full-discount-detail.vue    |  257 ++-
 .../full-discount/full-discount.vue           |  310 ++--
 .../gift-card-cash-activity-add.vue           |  101 +-
 .../gift-card-cash-activity.vue               |  419 ++---
 .../gift-card-cash-batch-credentials.vue      |  277 ++-
 .../gift-card-cash/gift-card-cash-records.vue |  836 ++++-----
 .../kanjia/kanjia-activity-add-goods.vue      |  262 +--
 .../kanjia/kanjia-activity-edit-goods.vue     |  454 ++---
 .../kanjia/kanjia-activity-goods.vue          |  476 +++--
 .../src/views/promotions/live/live-detail.vue |  255 +--
 manager/src/views/promotions/live/live.vue    |  249 +--
 .../promotions/pintuan/pintuan-goods.vue      |  232 ++-
 .../src/views/promotions/pintuan/pintuan.vue  |  261 ++-
 .../points-goods-category.vue                 |  289 ++-
 .../points-goods/points-goods-add.vue         |  299 ++-
 .../points-goods/points-goods-edit.vue        |  278 +--
 .../promotions/points-goods/points-goods.vue  |  476 +++--
 .../views/promotions/seckill/seckill-add.vue  |  143 +-
 .../promotions/seckill/seckill-goods.vue      |  333 ++--
 .../promotions/seckill/seckill-setup.vue      |  119 +-
 .../src/views/promotions/seckill/seckill.vue  |  379 ++--
 manager/src/views/region/index.vue            |  436 +----
 .../seller/bill/accountStatementBill.vue      |  259 ++-
 manager/src/views/seller/bill/bill-detail.vue |  859 ++++-----
 manager/src/views/seller/bill/bill.vue        |  257 +--
 .../src/views/seller/shop/shopAuditList.vue   |  317 ++--
 manager/src/views/seller/shop/shopDetail.scss |    4 +
 manager/src/views/seller/shop/shopDetail.vue  | 1605 ++++++++--------
 manager/src/views/seller/shop/shopList.vue    |  476 ++---
 .../src/views/seller/shop/shopOperation.vue   |  576 +++---
 manager/src/views/sensitive-words/index.vue   |  244 +--
 manager/src/views/statistics/goods.vue        |   87 +-
 manager/src/views/statistics/member.vue       |  137 +-
 manager/src/views/statistics/order.vue        |  372 ++--
 .../views/statistics/order/orderDetail.vue    |   10 +-
 .../views/statistics/order/refundOrder.vue    |   15 +-
 manager/src/views/statistics/traffic.vue      |  119 +-
 .../src/views/sys/app-version/appVersion.vue  |  447 ++---
 .../department-manage/departmentManage.vue    |  416 ++---
 .../src/views/sys/log-manage/logManage.vue    |  323 +---
 manager/src/views/sys/menu-manage/menu.vue    |  441 +++--
 .../src/views/sys/menu-manage/menuManage.vue  |   31 +-
 .../src/views/sys/menu-manage/storeMenu.vue   |  441 +++--
 .../sys/message/noticeMessageTemplate.vue     | 1576 +++++++---------
 manager/src/views/sys/message/sms.vue         | 1020 +++++-----
 manager/src/views/sys/message/smsSign.vue     |  296 ++-
 .../src/views/sys/oss-manage/ossManage.vue    |  374 ++--
 .../src/views/sys/role-manage/roleManage.vue  |  673 +++----
 .../authLogin/CONNECT_SETTING.vue             |   87 +-
 .../setting-manage/authLogin/QQ_CONNECT.vue   |  113 +-
 .../authLogin/WECHAT_CONNECT.vue              |  111 +-
 .../sys/setting-manage/pay/ALIPAY_PAYMENT.vue |   50 +-
 .../setting-manage/pay/PAYMENT_SUPPORT.vue    |  128 +-
 .../sys/setting-manage/pay/WECHAT_PAYMENT.vue |  100 +-
 .../sys/setting-manage/platformSetting.vue    | 1090 ++++++-----
 .../setting-manage/setting/BASE_SETTING.vue   |  143 +-
 .../setting-manage/setting/GOODS_SETTING.vue  |  140 +-
 .../sys/setting-manage/setting/IM_SETTING.vue |   18 +-
 .../setting/LOGISTICS_SETTING.vue             |  111 +-
 .../setting-manage/setting/ORDER_SETTING.vue  |   77 +-
 .../setting-manage/setting/OSS_SETTING.vue    |  130 +-
 .../setting-manage/setting/POINT_SETTING.vue  |  123 +-
 .../setting-manage/setting/SMS_SETTING.vue    |  134 +-
 .../setting/WITHDRAWAL_SETTING.vue            |   62 +-
 .../sys/setting-manage/setting/style.scss     |   12 +-
 .../sys/setting-manage/settingManage.vue      |   41 +-
 .../sys/setting-manage/smsSettingManage.vue   |  251 ++-
 .../src/views/sys/setting-manage/template.js  |   31 +-
 manager/src/views/sys/slider/slider.vue       |  428 ++---
 .../src/views/sys/user-manage/userManage.vue  |  560 ++----
 .../components/WxChannelsCategoryTab.vue      |   83 +-
 .../components/WxChannelsGoodsTab.vue         |  138 +-
 .../components/WxChannelsOrderTab.vue         |  163 +-
 .../components/WxChannelsOverviewTab.vue      |   97 +-
 .../components/WxChannelsRefundTab.vue        |  172 +-
 .../components/WxChannelsSettingTab.vue       |   46 +-
 manager/src/views/wx-channel/wxChannel.vue    |   32 +-
 manager/vue.config.js                         |  139 +-
 239 files changed, 22907 insertions(+), 30841 deletions(-)
 create mode 100644 manager/MIGRATION-VUE3.md
 create mode 100644 manager/src/components/price-color-scheme.vue
 create mode 100644 manager/src/plugins/element.js
 create mode 100644 manager/src/styles/element.scss
 create mode 100644 manager/src/utils/message.js
 create mode 100644 manager/src/views/main-parts/page-breadcrumb.vue

diff --git a/manager/MIGRATION-VUE3.md b/manager/MIGRATION-VUE3.md
new file mode 100644
index 00000000..4d127bca
--- /dev/null
+++ b/manager/MIGRATION-VUE3.md
@@ -0,0 +1,59 @@
+# manager Vue 3 + Element Plus 迁移说明
+
+## 已完成（P1–P3 骨架）
+
+- 依赖升级：`vue@3`、`vue-router@4`、`vuex@4`、`vue-i18n@9`、`element-plus`
+- 入口：`src/main.js`（`createApp`）
+- 路由、动态路由、全局 `$Message` / `$Modal` / `$Notice`、`$filters`、`priceColorScheme`、`vue-qr@5`
+- TinyMCE：移除已弃用 `template` 插件
+
+## P5 批量修复（Table / 过滤器）
+
+列表页 **60+** 已 `el-table`；过滤器已改为 `$filters.*`；全项目已无 `$set` / `$options.filters`。
+
+## P6 表单 / 弹窗（已完成模块）
+
+| 模块 | 状态 |
+|------|------|
+| 地区、秒杀设置、分销设置、修改密码、编辑器、链接弹窗 | ✅ |
+| 店铺详情 / 店铺编辑 `shopOperation.vue` | ✅ |
+| 售后详情 `afterSaleOrderDetail.vue` | ✅ |
+| **系统设置** `sys/setting-manage/**`（19 个 vue + template.js） | ✅ |
+| **菜单 / 部门** `sys/menu-manage/`、`sys/department-manage/` | ✅ |
+| **页面装修** `views/page-decoration/**`（PC + H5 装修、modelList、wap 模板） | ✅ |
+| **文章管理** `views/page/article-manage/**` | ✅ |
+| **零散页面** 礼品卡、个人中心、热区、促销编辑、视频号、错误页、短信签名等 | ✅ |
+
+### 系统设置包含
+
+- `settingManage.vue`（Tab 壳）
+- `platformSetting.vue`
+- `setting/`：基础、商品、订单、积分、提现、物流、OSS、短信、客服
+- `pay/`：支付开关、支付宝、微信
+- `authLogin/`：登录、QQ、微信
+- `smsSettingManage.vue`
+
+`template.js` 中动态组件已 `markRaw`。
+
+## 可选后续
+
+- `components/tree-table`：旧 JSX 表格，当前路由未引用；`Spin` 已改 `v-loading`，`beforeUnmount` 已对齐 Vue 3
+- 样式文件中残留的 `.ivu-*` 类名可随页面改版逐步清理（不影响运行）
+
+## 编译告警处理（2026-05）
+
+- 全项目 `::v-deep` 已改为 Vue 3 推荐的 `:deep(...)`
+- `common.scss` 合并 `table-common.scss`，去掉全局 `@import` 注入告警
+- `vue.config.js` 配置 `sassOptions.silenceDeprecations` 抑制 Sass legacy API 提示
+- `common.scss`：`.search > .el-card + .el-card` 恢复列表页双 Card 间距（原 `.ivu-card` 规则已失效）
+- `element.scss`：全局 `el-table--border` 去掉列竖线
+
+## 本地运行
+
+```bash
+cd manager
+yarn install
+yarn run dev
+```
+
+Node **18+**，包管理统一 **yarn**。
diff --git a/manager/babel.config.js b/manager/babel.config.js
index 2ea5d05b..162a3ea9 100644
--- a/manager/babel.config.js
+++ b/manager/babel.config.js
@@ -1,10 +1,3 @@
 module.exports = {
-  presets: [
-    [
-      '@vue/app',
-      {
-        useBuiltIns: 'entry'
-      }
-    ]
-  ]
-}
+  presets: ["@vue/cli-plugin-babel/preset"],
+};
diff --git a/manager/package.json b/manager/package.json
index 472bab85..3e89ee27 100644
--- a/manager/package.json
+++ b/manager/package.json
@@ -10,51 +10,51 @@
     "dev": "vue-cli-service serve"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=16"
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "0.0.7",
     "@antv/g2": "^4.1.12",
+    "@element-plus/icons-vue": "^2.3.1",
     "axios": "^0.21.1",
-    "core-js": "^3.6.5",
+    "core-js": "^3.36.0",
     "dplayer": "^1.26.0",
+    "element-plus": "^2.6.3",
     "js-cookie": "^2.2.1",
+    "nprogress": "^0.2.0",
     "price-color": "1.0.2",
     "sass": "^1.63.6",
     "sass-loader": "^10.4.1",
     "sockjs-client": "^1.4.0",
     "swiper": "^6.3.5",
     "uuid": "^8.3.2",
-    "view-design": "^4.7.0",
-    "vue": "^2.6.10",
+    "vue": "^3.4.21",
     "vue-awesome-swiper": "^4.1.1",
-    "vue-i18n": "^8.15.1",
+    "vue-i18n": "^9.10.2",
     "vue-json-excel": "^0.3.0",
-    "vue-print-nb": "^1.7.5",
-    "vue-qr": "^2.3.0",
-    "vue-router": "^3.1.3",
-    "vuedraggable": "^2.23.2",
-    "vuex": "^3.4.0",
+    "vue-qr": "^5.0.3",
+    "vue-router": "^4.3.0",
+    "vuedraggable": "^4.1.0",
+    "vuex": "^4.1.0",
     "xss": "^1.0.7"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.4.4",
-    "@vue/cli-plugin-router": "^4.4.4",
-    "@vue/cli-plugin-vuex": "^4.4.4",
-    "@vue/cli-service": "^4.4.4",
-    "compression-webpack-plugin": "^4.0.0",
-    "css-loader": "^5.0.1",
-    "less": "^3.12.2",
-    "less-loader": "^6.2.0",
-    "style-loader": "^2.0.0",
-    "style-resources-loader": "^1.3.2",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "vue-cli-plugin-style-resources-loader": "^0.1.4",
-    "vue-template-compiler": "2.6.14"
+    "webpack": "^5.95.0",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-plugin-vuex": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/compiler-sfc": "^3.4.21",
+    "compression-webpack-plugin": "^10.0.0",
+    "css-loader": "^6.10.0",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.4",
+    "style-loader": "^3.3.4",
+    "style-resources-loader": "^1.5.0",
+    "vue-cli-plugin-style-resources-loader": "^0.1.5"
   },
   "resolutions": {
     "minimatch": "^3.1.2",
-    "node-sass": "npm:sass@^1.63.6",
     "@achrinza/node-ipc": "9.2.2"
   }
 }
diff --git a/manager/public/index.html b/manager/public/index.html
index 8841b671..671140da 100644
--- a/manager/public/index.html
+++ b/manager/public/index.html
@@ -5,7 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name='description' content='在线购物平台'>
     <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
-    <link rel="icon" href="./logo.ico" type="image/x-icon" />
+    <!-- favicon 可选：将 logo.ico 放到 public/ 后取消下行注释 -->
+    <!-- <link rel="icon" href="/logo.ico" type="image/x-icon" /> -->
     <title>admin</title>
     <meta name="keywords" content="keywords" />
     <meta name="description" content="description" />
@@ -72,7 +73,7 @@
     <script src="<%=js%>"></script>
     <% } %>
     <script src="/config.js"></script>
-    <script src="./tinymce/tinymce.min.js"></script>
+    <script src="/tinymce/tinymce.min.js"></script>
     <noscript>
       <strong
         >We're sorry but admin doesn't work properly without JavaScript
diff --git a/manager/src/App.vue b/manager/src/App.vue
index 6b1eaa1c..4a592dc5 100644
--- a/manager/src/App.vue
+++ b/manager/src/App.vue
@@ -1,32 +1,46 @@
 <template>
   <div id="main" class="app-main">
-    <router-view></router-view>
+    <router-view />
   </div>
 </template>
 
 <script>
-import { getCategoryTree } from '@/api/goods.js'
+import Cookies from "js-cookie";
+import { getCategoryTree } from "@/api/goods.js";
+import util from "@/libs/util";
+
 export default {
-  updated () {
-    if (!localStorage.getItem('category') && this.$route.path !== '/login') {
-      getCategoryTree(0).then(res => {
+  name: "App",
+  updated() {
+    if (!localStorage.getItem("category") && this.$route.path !== "/login") {
+      getCategoryTree(0).then((res) => {
         if (res.success) {
-          localStorage.setItem('category', JSON.stringify(res.result))
+          localStorage.setItem("category", JSON.stringify(res.result));
         }
-      })
+      });
+    }
+  },
+  mounted() {
+    const loggedIn = this.getStore("accessToken") || Cookies.get("userInfoManager");
+    if (loggedIn) {
+      util.bootstrapDynamicRoutesFromCache();
+      util.initRouter(this);
+      this.$store.commit("setOpenedList");
+      this.$store.commit("initCachePage");
     }
   },
-
 };
 </script>
 
 <style>
 html,
 body {
+  margin: 0;
+  padding: 0;
   width: 100%;
   height: 100%;
   background: #f0f0f0;
-  font-size: 12px;
+  font-size: 14px;
 }
 
 .app-main {
@@ -42,14 +56,6 @@ body {
   margin-right: 5px;
 }
 
-.ivu-btn-text:focus {
-  box-shadow: none !important;
-}
-
-.ivu-tag {
-  cursor: pointer;
-}
-
 .tox-notifications-container {
   display: none !important;
 }
diff --git a/manager/src/components/affix-time.vue b/manager/src/components/affix-time.vue
index 2a2420fc..6df6b9d9 100644
--- a/manager/src/components/affix-time.vue
+++ b/manager/src/components/affix-time.vue
@@ -1,97 +1,85 @@
 <template>
   <div>
     <div class="breadcrumb">
-      <span @click="clickBreadcrumb(item, index)" :class="{ 'active': item.selected }" v-for="(item, index) in dateList"
-        :key="index"> {{ item.title }}</span>
+      <span
+        v-for="(item, index) in dateList"
+        :key="index"
+        :class="{ active: item.selected }"
+        @click="clickBreadcrumb(item)"
+      >
+        {{ item.title }}
+      </span>
       <div class="date-picker">
-        <Select @on-change="changeSelect($event, selectedWay)" :value="month" placeholder="年月查询" clearable
-          style="width:200px;margin-left:10px;">
-          <Option v-for="(item, i) in dates" :value="item.year + '-' + item.month" :key="i" clearable>
-            {{ item.year + '年' + item.month + '月' }}</Option>
-        </Select>
+        <el-select
+          v-model="month"
+          placeholder="年月查询"
+          clearable
+          style="width: 200px; margin-left: 10px"
+          @change="changeSelect"
+        >
+          <el-option
+            v-for="(item, i) in dates"
+            :key="i"
+            :label="item.year + '年' + item.month + '月'"
+            :value="item.year + '-' + item.month"
+          />
+        </el-select>
       </div>
-      <div class="shop-list" v-if="!closeShop">
-        <Select clearable @on-change="changeshop(selectedWay)" v-model="storeId" placeholder="店铺查询"
-          style="width:200px;margin-left:10px;">
-          <Scroll :on-reach-bottom="handleReachBottom">
-            <Option v-for="(item, index) in shopsData" :value="item.id" :key="index">{{ item.storeName }}</Option>
-          </Scroll>
-        </Select>
+      <div v-if="!closeShop" class="shop-list">
+        <el-select
+          v-model="storeId"
+          placeholder="店铺查询"
+          clearable
+          filterable
+          style="width: 200px; margin-left: 10px"
+          @change="changeshop"
+        >
+          <el-option
+            v-for="(item, index) in shopsData"
+            :key="index"
+            :label="item.storeName"
+            :value="item.id"
+          />
+        </el-select>
       </div>
     </div>
   </div>
 </template>
+
 <script>
 import { getShopListData } from "@/api/shops.js";
+
 export default {
   props: ["closeShop"],
   data() {
     return {
-      month: "", // 月份
-
+      month: "",
       selectedWay: {
-        // 可选时间项
         title: "过去7天",
         selected: true,
         searchType: "LAST_SEVEN",
       },
-      storeId: "", // 店铺id
-      dates: [], // 日期列表
+      storeId: "",
+      dates: [],
       params: {
-        // 请求参数
         pageNumber: 1,
-        pageSize: 20,
+        pageSize: 100,
         storeName: "",
       },
       dateList: [
-        // 筛选条件
-        {
-          title: "今天",
-          selected: false,
-          searchType: "TODAY",
-        },
-        {
-          title: "昨天",
-          selected: false,
-          searchType: "YESTERDAY",
-        },
-        {
-          title: "过去7天",
-          selected: true,
-          searchType: "LAST_SEVEN",
-        },
-        {
-          title: "过去30天",
-          selected: false,
-          searchType: "LAST_THIRTY",
-        },
+        { title: "今天", selected: false, searchType: "TODAY" },
+        { title: "昨天", selected: false, searchType: "YESTERDAY" },
+        { title: "过去7天", selected: true, searchType: "LAST_SEVEN" },
+        { title: "过去30天", selected: false, searchType: "LAST_THIRTY" },
       ],
       originDateList: [
-        // 筛选条件
-        {
-          title: "今天",
-          selected: false,
-          searchType: "TODAY",
-        },
-        {
-          title: "昨天",
-          selected: false,
-          searchType: "YESTERDAY",
-        },
-        {
-          title: "过去7天",
-          selected: true,
-          searchType: "LAST_SEVEN",
-        },
-        {
-          title: "过去30天",
-          selected: false,
-          searchType: "LAST_THIRTY",
-        },
+        { title: "今天", selected: false, searchType: "TODAY" },
+        { title: "昨天", selected: false, searchType: "YESTERDAY" },
+        { title: "过去7天", selected: true, searchType: "LAST_SEVEN" },
+        { title: "过去30天", selected: false, searchType: "LAST_THIRTY" },
       ],
-
-      shopTotal: "", // 店铺总数
-      shopsData: [], // 店铺数据
+      shopTotal: 0,
+      shopsData: [],
     };
   },
   mounted() {
@@ -99,58 +87,35 @@ export default {
     this.getShopList();
   },
   methods: {
-    // 页面触底
-    handleReachBottom() {
-      setTimeout(() => {
-        if (this.params.pageNumber * this.params.pageSize <= this.shopTotal) {
-          this.params.pageNumber++;
-          this.getShopList();
-        }
-      }, 1500);
-    },
-    // 查询店铺列表
     getShopList() {
       getShopListData(this.params).then((res) => {
         if (res.success) {
-          /**
-           * 解决数据请求中，滚动栏会一直上下跳动
-           */
           this.shopTotal = res.result.total;
-
-          this.shopsData.push(...res.result.records);
+          this.shopsData = res.result.records || [];
         }
       });
     },
-    // 变更店铺
-    changeshop(val) {
+    changeshop() {
       this.selectedWay.storeId = this.storeId;
       this.$emit("selected", this.selectedWay);
     },
-
-    // 获取近5年 年月
     getFiveYears() {
-      let getYear = new Date().getFullYear();
-
-      let lastFiveYear = getYear - 5;
-      let maxMonth = new Date().getMonth() + 1;
-      let dates = [];
-      // 循环出过去5年
+      const getYear = new Date().getFullYear();
+      const lastFiveYear = getYear - 5;
+      const maxMonth = new Date().getMonth() + 1;
+      const dates = [];
       for (let year = lastFiveYear; year <= getYear; year++) {
         for (let month = 1; month <= 12; month++) {
-          if (year == getYear && month > maxMonth) {
-          } else {
-            dates.push({
-              year: year,
-              month: month,
-            });
+          if (year === getYear && month > maxMonth) {
+            continue;
           }
+          dates.push({ year, month });
         }
       }
       this.dates = dates.reverse();
     },
-    // 改变已选店铺
     changeSelect(e) {
-      this.month = e
+      this.month = e;
       if (this.month) {
         this.dateList.forEach((res) => {
           res.selected = false;
@@ -158,53 +123,44 @@ export default {
         this.selectedWay.year = this.month.split("-")[0];
         this.selectedWay.month = this.month.split("-")[1];
         this.selectedWay.searchType = "";
-
         this.$emit("selected", this.selectedWay);
       } else {
-
-        const current = this.dateList.find(item => { return item.selected })
-        this.selectedWay = current
-        this.clickBreadcrumb(current)
+        const current = this.dateList.find((item) => item.selected);
+        this.selectedWay = current;
+        this.clickBreadcrumb(current);
         this.$emit("selected", this.selectedWay);
-
-
       }
     },
-    // 变更时间
     clickBreadcrumb(item) {
-
       let currentIndex;
-      this.dateList.forEach((res,index) => {
+      this.dateList.forEach((res, index) => {
         res.selected = false;
-        if(res.title === item.title){
-          currentIndex = index
+        if (res.title === item.title) {
+          currentIndex = index;
         }
       });
       item.selected = true;
       item.storeId = this.storeId;
       this.month = "";
-      if (item.searchType == "") {
-       let currentDate = this.originDateList[currentIndex].searchType
-        if (currentDate) {
-          item.searchType = currentDate
-        } else {
-          item.searchType = "LAST_SEVEN";
-        }
+      if (item.searchType === "") {
+        const currentDate = this.originDateList[currentIndex].searchType;
+        item.searchType = currentDate || "LAST_SEVEN";
       }
       this.selectedWay = item;
       this.selectedWay.year = new Date().getFullYear();
       this.selectedWay.month = "";
-
       this.$emit("selected", this.selectedWay);
     },
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .breadcrumb {
   display: flex;
   align-items: center;
-  >span {
+
+  > span {
     margin-right: 15px;
     cursor: pointer;
   }
@@ -215,8 +171,6 @@ export default {
   position: relative;
 }
 
-.date-picker {}
-
 .active:before {
   content: "";
   position: absolute;
diff --git a/manager/src/components/editor/index.vue b/manager/src/components/editor/index.vue
index f0bc193a..6ee79b75 100644
--- a/manager/src/components/editor/index.vue
+++ b/manager/src/components/editor/index.vue
@@ -122,7 +122,7 @@ export default {
   deactivated() {
     this.destroyTinymce();
   },
-  destroyed() {
+  unmounted() {
     this.destroyTinymce();
   },
 };
diff --git a/manager/src/components/editor/plugins.js b/manager/src/components/editor/plugins.js
index d3b259ad..0b1b911f 100644
--- a/manager/src/components/editor/plugins.js
+++ b/manager/src/components/editor/plugins.js
@@ -1,4 +1,4 @@
 const plugins = [
-  'advlist', 'anchor', 'autolink', 'autosave', 'code', 'codesample', 'directionality', 'emoticons', 'fullscreen', 'image', 'importcss', 'insertdatetime', 'link', 'lists', 'media', 'nonbreaking', 'pagebreak', 'preview', 'save', 'searchreplace', 'table', 'template', 'visualblocks', 'visualchars', 'wordcount'
+  'advlist', 'anchor', 'autolink', 'autosave', 'code', 'codesample', 'directionality', 'emoticons', 'fullscreen', 'image', 'importcss', 'insertdatetime', 'link', 'lists', 'media', 'nonbreaking', 'pagebreak', 'preview', 'save', 'searchreplace', 'table', 'visualblocks', 'visualchars', 'wordcount'
 ]
 export default plugins
diff --git a/manager/src/components/editor/upload-image.vue b/manager/src/components/editor/upload-image.vue
index c2498522..719a91ec 100644
--- a/manager/src/components/editor/upload-image.vue
+++ b/manager/src/components/editor/upload-image.vue
@@ -1,70 +1,90 @@
 <template>
   <div class="wrapper">
-    <Button @click="handleClickUploadImage">上传图片</Button>
-    <Modal v-model="show" width="850" @on-ok="callback" title="上传图片">
-      <div class="import-oss" @click="importOSS">
-        从资源库中导入
-      </div>
+    <el-button @click="handleClickUploadImage">上传图片</el-button>
+    <el-dialog v-model="show" width="850px" title="上传图片" append-to-body :z-index="3500">
+      <div class="import-oss" @click="importOSS">从资源库中导入</div>
       <div style="display: flex; flex-wrap: wrap">
-        <vuedraggable
-          :animation="200"
-          :list="images"
-        >
+        <vuedraggable :animation="200" :list="images">
           <div
             v-for="(item, __index) in images"
             :key="__index"
             class="upload-list"
           >
-            <template>
-              <img alt="image" :src="item.url"/>
-              <div class="upload-list-cover">
-                <div>
-                  <Icon
-                    size="30"
-                    type="md-search"
-                    @click.native="$previewImage(item.url)"
-                  ></Icon>
-                  <Icon
-                    size="30"
-                    type="md-trash"
-                    @click.native="handleRemoveGoodsPicture(__index)"
-                  ></Icon>
-                </div>
+            <img alt="image" :src="item.url" />
+            <div class="upload-list-cover">
+              <div>
+                <el-icon class="action-icon" :size="30" @click="handleView(item.url)">
+                  <ZoomIn />
+                </el-icon>
+                <el-icon
+                  class="action-icon"
+                  :size="30"
+                  @click="handleRemoveGoodsPicture(__index)"
+                >
+                  <Delete />
+                </el-icon>
               </div>
-            </template>
+            </div>
           </div>
         </vuedraggable>
         <div class="upload-box">
-          <Upload
+          <el-upload
             ref="upload"
             :action="uploadFileUrl"
-            :format="['jpg', 'jpeg', 'png']"
-            :headers="{ ...accessToken }"
-            :max-size="10240"
-            :on-exceeded-size="handleMaxSize"
-            :on-format-error="handleFormatError"
-            :on-success="handleSuccessGoodsPicture"
-            :show-upload-list="false"
+            :headers="accessToken"
+            :show-file-list="false"
+            accept=".jpg,.jpeg,.png"
+            drag
             multiple
-            type="drag"
+            :before-upload="handleBeforeUpload"
+            :on-success="handleSuccessGoodsPicture"
+            :on-error="handleUploadError"
           >
-            <div style="width: 148px; height: 148px; line-height: 148px">
-              <Icon size="20" type="md-add"></Icon>
+            <div class="upload-trigger">
+              <el-icon :size="20"><Plus /></el-icon>
             </div>
-          </Upload>
+          </el-upload>
         </div>
       </div>
-    </Modal>
+      <template #footer>
+        <el-button @click="show = false">取消</el-button>
+        <el-button type="primary" @click="callback">确定</el-button>
+      </template>
+    </el-dialog>
 
-    <Modal width="1000" v-model="showOssManager" @on-ok="confirmUrls">
-    <OssManage ref="ossManage" :isComponent="true" :initialize="showOssManager"  @selected="(list)=>{ selectedImage = list}" @callback="handleCallback" />
-    </Modal>
+    <el-dialog
+      v-model="showOssManager"
+      width="1000px"
+      append-to-body
+      :z-index="3600"
+      destroy-on-close
+      @closed="confirmUrls"
+    >
+      <OssManage
+        ref="ossManage"
+        :is-component="true"
+        :initialize="showOssManager"
+        @selected="(list) => { selectedImage = list }"
+        @callback="handleCallback"
+      />
+      <template #footer>
+        <el-button @click="showOssManager = false">取消</el-button>
+        <el-button type="primary" @click="confirmUrls">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="viewImage" title="图片预览" width="520px" append-to-body :z-index="3700">
+      <img :src="previewUrl" alt="预览" style="width: 100%; display: block; margin: 0 auto" />
+      <template #footer>
+        <el-button @click="viewImage = false">关闭</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 <script>
+import { Delete, Plus, ZoomIn } from "@element-plus/icons-vue";
 import vuedraggable from "vuedraggable";
-import {uploadFile} from "@/libs/axios";
-// import OssManage from "@/views/sys/oss-manage/ossManage";
+import { uploadFile } from "@/libs/axios";
 import OssManage from "@/views/sys/oss-manage/ossManage.vue";
 
 export default {
@@ -72,16 +92,21 @@ export default {
   components: {
     OssManage,
     vuedraggable,
+    Delete,
+    Plus,
+    ZoomIn,
   },
   data() {
     return {
-      show: false, // 是否显示弹窗
-      uploadFileUrl: uploadFile, // 上传地址
-      accessToken:"",
-      showOssManager:false, // 是否显示oss管理弹窗
-      images:[],
-      selectedImage:[]
-    }
+      show: false,
+      uploadFileUrl: uploadFile,
+      accessToken: {},
+      showOssManager: false,
+      images: [],
+      selectedImage: [],
+      viewImage: false,
+      previewUrl: "",
+    };
   },
   mounted() {
     this.accessToken = {
@@ -89,71 +114,73 @@ export default {
     };
   },
   methods: {
-    handleClickUploadImage(){
+    handleClickUploadImage() {
       this.show = true;
     },
-    // 回调给父级
-    callback() {
-      // 先给数据做一下处理 然后将数据传给父级
-      const formatImages = this.images.map((item) => item.url);
-      this.$emit('callback',formatImages)
+    handleView(url) {
+      this.previewUrl = url;
+      this.viewImage = true;
+    },
+    callback() {
+      const formatImages = this.images.map((item) => item.url);
+      this.$emit("callback", formatImages);
+      this.show = false;
     },
-    // 移除商品图片
     handleRemoveGoodsPicture(__index) {
       this.images.splice(__index, 1);
     },
-    // 图片大小不正确
-    handleMaxSize(file) {
-      this.$Notice.warning({
-        title: "超过文件大小限制",
-        desc: "图片大小不能超过10MB",
-      });
+    handleBeforeUpload(file) {
+      const okType = ["image/jpeg", "image/png", "image/jpg"].includes(file.type);
+      if (!okType) {
+        this.$Message.warning("文件 " + file.name + " 的格式不正确，请选择 jpg/jpeg/png");
+        return false;
+      }
+      if (file.size / 1024 / 1024 > 10) {
+        this.$Message.warning("图片大小不能超过10MB");
+        return false;
+      }
+      return true;
     },
-    // 图片格式不正确
-    handleFormatError(file) {
-      this.$Notice.warning({
-        title: "文件格式不正确",
-        desc: "文件 " + file.name + " 的格式不正确",
-      });
-    },
-    // sku图片上传成功
-    handleSuccessGoodsPicture(res, file) {
-      if (file.response) {
-        file.url = file.response.result;
-        this.images.push(file);
+    handleSuccessGoodsPicture(res) {
+      const url = res?.result ?? res?.data?.result;
+      if (url) {
+        this.images.push({ url });
+      } else {
+        this.$Message.error(res?.message || "上传失败");
       }
     },
-    confirmUrls(){
-      // this.selectedImage.length ? this.selectedImage.forEach(element => {
-      //   this.images.push({ url: element.url })
-      // }):''
-      this.showOssManager = false
+    handleUploadError(err) {
+      this.$Message.error(err?.message || String(err));
     },
-    handleCallback(val){
-      this.$Message.success("导入成功")
-      this.images.push({url:val.url})
+    confirmUrls() {
+      this.showOssManager = false;
     },
-    // 从资源库中导入图片
-    importOSS(){
+    handleCallback(val) {
+      this.$Message.success("导入成功");
+      this.images.push({ url: val.url });
+    },
+    importOSS() {
       this.showOssManager = true;
-      this.$refs.ossManage.selectImage = true;
-    }
-  }
-}
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-.import-oss{
+.import-oss {
   margin-bottom: 10px;
   text-align: right;
   color: $theme_color;
   cursor: pointer;
-
 }
-.wrapper{
+.wrapper {
   margin: 10px 0;
 }
-
 .upload-list {
   width: 150px;
   height: 150px;
@@ -166,47 +193,48 @@ export default {
   margin-right: 4px;
   vertical-align: bottom;
 }
-
-.upload-box{
+.upload-box {
   margin: 10px 0;
-
+  display: inline-block;
+  vertical-align: bottom;
+}
+.upload-trigger {
+  width: 148px;
+  height: 148px;
+  line-height: 148px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-
 .upload-list img {
   width: 100%;
   height: 100%;
+  object-fit: cover;
 }
-
 .upload-list-cover {
   display: none;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
-
   right: 0;
   background: rgba(0, 0, 0, 0.6);
-
   justify-content: space-between;
   align-items: center;
   flex-direction: column;
 }
-
 .upload-list:hover .upload-list-cover {
   display: flex;
 }
-
 .upload-list-cover div {
   margin-top: 50px;
   width: 100%;
-
-  >i {
-    width: 50%;
-    margin-top: 8px;
-    color: #fff;
-    font-size: 20px;
-    cursor: pointer;
-  }
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+.action-icon {
+  color: #fff;
+  cursor: pointer;
 }
-
 </style>
diff --git a/manager/src/components/hotzone/components/Zone.vue b/manager/src/components/hotzone/components/Zone.vue
index 6da0b114..9706b0ac 100644
--- a/manager/src/components/hotzone/components/Zone.vue
+++ b/manager/src/components/hotzone/components/Zone.vue
@@ -51,49 +51,45 @@
       <li class="hz-u-square hz-u-square-br" data-pointer="dealBR"></li>
     </ul>
    
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="编辑热区"
-      draggable
-      scrollable
-      :mask="false"
-      ok-text="保存"
-      @on-ok="saveZone"
-      @on-cancel="cancelZone"
+      :modal="false"
+      append-to-body
+      width="520px"
+      @close="cancelZone"
     >
       <div>
         <div class="hz-edit-img">
           <img class="show-image" :src="zoneForm.img" alt />
         </div>
 
-        <Form :model="zoneForm" :label-width="80">
-          <!-- <FormItem label="图片链接：">
-            <Input v-model="zoneForm.img"></Input>
-            <Button size="small" type="primary" @click="handleSelectImg"
-              >选择图片</Button
+        <el-form :model="zoneForm" label-width="80px">
+          <el-form-item label="跳转链接：">
+            <el-input type="textarea" v-if="zoneForm.type === 'other' && zoneForm.title === '外部链接'" v-model="zoneForm.link" />
+            <el-button size="small" type="primary" @click="handleSelectLink"
+              >选择链接</el-button
             >
-            :v-model="zoneForm.type === 'goods' ? zoneForm.goodsName : zoneForm.link"
-          </FormItem> -->
-          <FormItem label="跳转链接：">
-            <Input type="textarea" v-if="zoneForm.type === 'other' && zoneForm.title === '外部链接'" v-model="zoneForm.link" ></Input>
-            <Button size="small" type="primary" @click="handleSelectLink"
-              >选择链接</Button
-            >
-          </FormItem>
-        </Form>
+          </el-form-item>
+        </el-form>
       </div>
-    </Modal>
+      <template #footer>
+        <el-button @click="cancelZone">取消</el-button>
+        <el-button type="primary" @click="saveZone">保存</el-button>
+      </template>
+    </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+    <el-dialog width="1200px" v-model="picModelFlag" append-to-body destroy-on-close>
       <ossManage
         @callback="callbackSelected"
         :isComponent="true"
         :initialize="picModelFlag"
         ref="ossManage"
       />
-    </Modal>
+      <template #footer />
+    </el-dialog>
   </li>
 </template>
 
@@ -179,7 +175,7 @@ export default {
     },
     // 已选链接
     selectedLink(val) {
-      this.zoneForm.link = this.$options.filters.formatLinkType(val);
+      this.zoneForm.link = this.$filters.formatLinkType(val);
       this.settingZone(val);
       this.changeInfo(this.zoneForm);
     },
@@ -220,7 +216,10 @@ export default {
           break;
       }
     },
-    saveZone() {},
+    saveZone() {
+      this.showModal = false;
+      this.changeInfo(this.zoneForm);
+    },
     cancelZone() {
       this.showModal = false;
     },
diff --git a/manager/src/components/hotzone/index.vue b/manager/src/components/hotzone/index.vue
index 53c0c7e7..2719da50 100644
--- a/manager/src/components/hotzone/index.vue
+++ b/manager/src/components/hotzone/index.vue
@@ -1,13 +1,12 @@
 <template>
-  <Modal
-    :styles="{ top: '120px' }"
-    width="800"
-    @on-cancel="clickClose"
-    @on-ok="clickOK"
+  <el-dialog
     v-model="flag"
-    :mask-closable="false"
+    width="800px"
+    :close-on-click-modal="false"
     title="绘制热区"
-    scrollable
+    top="120px"
+    destroy-on-close
+    @close="clickClose"
   >
     <template v-if="flag">
       <hotzone
@@ -17,7 +16,11 @@
         :image="res.img"
       ></hotzone>
     </template>
-  </Modal>
+    <template #footer>
+      <el-button @click="clickClose">取消</el-button>
+      <el-button type="primary" @click="clickOK">确定</el-button>
+    </template>
+  </el-dialog>
 </template>
 <script>
 import hotzone from "./components/Hotzone.vue";
@@ -57,11 +60,11 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-::v-deep .ivu-modal {
+:deep(.el-dialog) {
   overflow: hidden;
   height: 650px !important;
 }
-::v-deep .ivu-modal-body {
+:deep(.el-dialog__body) {
   width: 100%;
   height: 500px;
   overflow: hidden;
diff --git a/manager/src/components/lili-dialog/goods-dialog.vue b/manager/src/components/lili-dialog/goods-dialog.vue
index 3126d9bb..1332a07d 100644
--- a/manager/src/components/lili-dialog/goods-dialog.vue
+++ b/manager/src/components/lili-dialog/goods-dialog.vue
@@ -4,46 +4,26 @@
       <div class="query-wrapper">
         <div class="query-item">
           <div>搜索范围</div>
-          <Input
+          <el-input
+            v-model="goodsParams.goodsName"
             placeholder="商品名称"
-            @on-clear="
-              goodsData = [];
-              goodsParams.goodsName = '';
-              goodsParams.pageNumber = 1;
-              getQueryGoodsList();
-            "
-            @on-enter="
-              () => {
-                goodsData = [];
-                goodsParams.pageNumber = 1;
-                getQueryGoodsList();
-              }
-            "
-            icon="ios-search"
             clearable
             style="width: 150px"
-            v-model="goodsParams.goodsName"
+            @clear="onSearchGoods"
+            @keyup.enter="onSearchGoods"
           />
         </div>
         <div class="query-item">
-          <Cascader
+          <el-cascader
             v-model="category"
+            :options="skuList"
             placeholder="请选择商品分类"
             style="width: 250px"
-            :data="skuList"
-          ></Cascader>
+            clearable
+          />
         </div>
         <div class="query-item">
-          <Button
-            type="primary"
-            @click="
-              goodsData = [];
-              goodsParams.pageNumber = 1;
-              getQueryGoodsList();
-            "
-            icon="ios-search"
-            >搜索</Button
-          >
+          <el-button type="primary" @click="onSearchGoods">搜索</el-button>
         </div>
       </div>
       <div>
@@ -63,27 +43,33 @@
             <div class="wap-content-desc">
               <div class="wap-content-desc-title">{{ item.goodsName }}</div>
 
-              <div class="wap-sku">{{ item.goodsUnit }}<Tag style="margin-left: 10px;" :color="item.salesModel === 'RETAIL' ? 'default' : 'geekblue'">{{item.salesModel === "RETAIL" ? "零售型" : "批发型"}}</Tag></div>
+              <div class="wap-sku">
+                {{ item.goodsUnit }}
+                <el-tag
+                  style="margin-left: 10px"
+                  :type="item.salesModel === 'RETAIL' ? 'info' : 'primary'"
+                >
+                  {{ item.salesModel === "RETAIL" ? "零售型" : "批发型" }}
+                </el-tag>
+              </div>
               <div class="wap-content-desc-bottom">
-                <div>￥{{ item.price | unitPrice }}</div>
+                <div>￥{{ $filters.unitPrice(item.price) }}</div>
               </div>
             </div>
           </div>
-          <Spin size="large" fix v-if="loading"></Spin>
+          <div v-if="loading" v-loading="loading" class="loading-mask" />
 
           <div v-if="empty" class="empty">暂无商品信息</div>
         </div>
-        <Page
-          :total="total"
+        <el-pagination
+          v-model:current-page="goodsParams.pageNumber"
           class="pageration"
-          @on-change="changePageSize"
+          :total="total"
           :page-size="goodsParams.pageSize"
+          layout="total, prev, pager, next"
           size="small"
-          show-total
-          show-elevator
-
-        >
-        </Page>
+          @current-change="changePageSize"
+        />
       </div>
     </div>
   </div>
@@ -145,6 +131,11 @@ export default {
     this.init();
   },
   methods: {
+    onSearchGoods() {
+      this.goodsData = [];
+      this.goodsParams.pageNumber = 1;
+      this.getQueryGoodsList();
+    },
     changePageSize(v){
       this.goodsParams.pageNumber = v;
       this.getQueryGoodsList();
@@ -201,7 +192,6 @@ export default {
                 arr[index] = {
                   value: grandson.id,
                   label: grandson.name,
-                  children: "",
                 };
               });
             }
diff --git a/manager/src/components/lili-dialog/index.vue b/manager/src/components/lili-dialog/index.vue
index 877685eb..cd9115b7 100644
--- a/manager/src/components/lili-dialog/index.vue
+++ b/manager/src/components/lili-dialog/index.vue
@@ -1,5 +1,14 @@
 <template>
-  <Modal :styles="{ top: '120px' }" width="1160" :z-index="10000" @on-cancel="clickClose" @on-ok="clickOK" v-model="flag" :mask-closable="false" scrollable>
+  <el-dialog
+    v-model="flag"
+    width="1160px"
+    top="120px"
+    :z-index="10000"
+    :close-on-click-modal="false"
+    append-to-body
+    destroy-on-close
+    @close="clickClose"
+  >
     <template v-if="flag">
       <goodsDialog
         @selected="
@@ -21,7 +30,11 @@
         class="linkDialog"
       />
     </template>
-  </Modal>
+    <template #footer>
+      <el-button @click="clickClose">取消</el-button>
+      <el-button type="primary" @click="clickOK">确定</el-button>
+    </template>
+  </el-dialog>
 </template>
 <script>
 import goodsDialog from "./goods-dialog";
@@ -86,11 +99,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-::v-deep .ivu-modal {
-  overflow: hidden;
-  height: 650px !important;
-}
-::v-deep .ivu-modal-body {
+:deep(.el-dialog__body) {
   width: 100%;
   height: 500px;
   overflow: hidden;
diff --git a/manager/src/components/lili-dialog/link-dialog.vue b/manager/src/components/lili-dialog/link-dialog.vue
index 5c56190e..af28b075 100644
--- a/manager/src/components/lili-dialog/link-dialog.vue
+++ b/manager/src/components/lili-dialog/link-dialog.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="wrapper">
-    <Tabs :value="wap[0].title" class="tabs">
-      <TabPane
+    <el-tabs v-model="activeTab" class="tabs">
+      <el-tab-pane
         :label="item.title"
         :name="item.title"
-        @click="clickTag(item, i)"
         v-for="(item, i) in wap"
         :key="i"
       >
@@ -17,9 +16,8 @@
             }
           "
         />
-      </TabPane>
-      <!-- </template> -->
-    </Tabs>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 <script>
@@ -30,13 +28,16 @@ export default {
   components: {
     goodsDialog
   },
+  setup() {
+    return { templateWay };
+  },
   data() {
     return {
-      templateWay, // 模板数据
       changed: "", // 变更模板
       selected: 0, // 已选数据
       selectedLink: "", //选中的链接
       wap, // tab标签
+      activeTab: wap[0]?.title || "",
     };
   },
   watch: {
@@ -122,13 +123,8 @@ export default {
   width: 100%;
 }
 
-::v-deep .ivu-modal {
-  overflow: hidden;
-  height: 650px !important;
-}
-::v-deep .ivu-modal-body {
-  width: 100%;
+:deep(.el-tabs__content) {
   height: 500px;
-  overflow: hidden;
+  overflow: auto;
 }
 </style>
diff --git a/manager/src/components/lili-dialog/style.scss b/manager/src/components/lili-dialog/style.scss
index 12b1614a..03f9527a 100644
--- a/manager/src/components/lili-dialog/style.scss
+++ b/manager/src/components/lili-dialog/style.scss
@@ -42,12 +42,12 @@
   }
 }
 
-::v-deep .ivu-scroll-container {
+:deep(.ivu-scroll-container){
   width: 100% !important;
   height: 400px !important;
 }
 
-::v-deep .ivu-scroll-content {
+:deep(.ivu-scroll-content){
   /* */
   display: flex;
   flex-wrap: wrap;
@@ -81,7 +81,7 @@
   align-items: center;
   margin: 10px;
 
-  ::v-deep img {
+  :deep(img){
     width: 60px;
     height: 60px;
     text-align: center;
diff --git a/manager/src/components/lili-dialog/template/index.js b/manager/src/components/lili-dialog/template/index.js
index 03bdfccb..85d1d9ca 100644
--- a/manager/src/components/lili-dialog/template/index.js
+++ b/manager/src/components/lili-dialog/template/index.js
@@ -1,17 +1,18 @@
+import { markRaw } from "vue";
+import category from "./category.vue";
+import shops from "./shops.vue";
+import marketing from "./marketing.vue";
+import pages from "./pages.vue";
+import goods from "../goods-dialog.vue";
+import other from "./other.vue";
+import special from "./special.vue";
 
-import category from './category.vue'
-import shops from './shops.vue'
-import marketing from './marketing.vue'
-import pages from './pages.vue'
-import goods from '../goods-dialog.vue'
-import other from './other.vue'
-import special from './special.vue'
 export default {
-  pages,
-  marketing,
-  shops,
-  category,
-  goods,
-  other,
-  special
-}
+  pages: markRaw(pages),
+  marketing: markRaw(marketing),
+  shops: markRaw(shops),
+  category: markRaw(category),
+  goods: markRaw(goods),
+  other: markRaw(other),
+  special: markRaw(special),
+};
diff --git a/manager/src/components/lili-dialog/template/marketing.vue b/manager/src/components/lili-dialog/template/marketing.vue
index 4826f89a..4794b2c5 100644
--- a/manager/src/components/lili-dialog/template/marketing.vue
+++ b/manager/src/components/lili-dialog/template/marketing.vue
@@ -2,49 +2,66 @@
   <div class="wrapper">
     <div class="list">
       <div
-        class="list-item"
         v-for="(item, index) in Object.keys(promotionList)"
         :key="index"
-        @click="clickPromotion(item, index)"
+        class="list-item"
         :class="{ active: selectedIndex == index }"
+        @click="clickPromotion(item, index)"
       >
         {{ typeOption(item).title }}
       </div>
-
-      <!-- <div class="list-item" >暂无活动</div> -->
     </div>
     <div class="content">
       <div v-if="showPromotionList">
-        <!-- <div class="search-views">
-          <Input v-model="value11" disabled class="search">
-          <span slot="prepend">店铺名称</span>
-          </Input>
-          <Button type="primary">选择</Button>
-
-        </div> -->
-
         <div class="tables">
-          <Table
-            height="350"
-            border
-            tooltip
-            :loading="loading"
-            :columns="activeColumns"
-            :data="showPromotionList"
-          ></Table>
+          <el-table v-loading="loading" border height="350" :data="showPromotionList" style="width: 100%">
+            <template v-if="isSeckillMode">
+              <el-table-column prop="goodsName" label="商品名称" min-width="200" show-overflow-tooltip />
+              <el-table-column prop="storeName" label="店铺名称" show-overflow-tooltip />
+              <el-table-column label="活动时间" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span v-if="row">{{ row.timeLine }}点</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="原价" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span v-if="row">{{ $filters.unitPrice(row.originalPrice) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="现价" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span v-if="row">{{ $filters.unitPrice(row.price, "￥") }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="状态" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span v-if="row">{{ seckillStatusText(row.promotionApplyStatus) }}</span>
+                </template>
+              </el-table-column>
+            </template>
+            <template v-else>
+              <el-table-column prop="goodsName" label="商品名称" show-overflow-tooltip />
+              <el-table-column prop="storeName" label="店铺名称" show-overflow-tooltip />
+              <el-table-column prop="startTime" label="开始时间" show-overflow-tooltip />
+              <el-table-column prop="endTime" label="结束时间" show-overflow-tooltip />
+            </template>
+            <el-table-column label="操作" width="100" fixed="right" align="center">
+              <template #default="{ row, $index }">
+                <a v-if="row" class="link-text" @click="selectedPromotion({ row, index: $index })">
+                  {{ index === $index ? "已选" : "选择" }}
+                </a>
+              </template>
+            </el-table-column>
+          </el-table>
 
-          <Page
-            @on-change="
-              (val) => {
-                params.pageNumber = val;
-              }
-            "
-            :current="params.pageNumber"
-            :page-size="params.pageSize"
+          <el-pagination
+            v-model:current-page="params.pageNumber"
+            v-model:page-size="params.pageSize"
             class="mt_10"
             :total="Number(totals)"
+            layout="prev, pager, next, jumper"
             size="small"
-            show-elevator
+            @current-change="(val) => { params.pageNumber = val; }"
           />
         </div>
       </div>
@@ -52,225 +69,29 @@
   </div>
 </template>
 <script>
-import {
-  getAllPromotion,
-  getPromotionSeckill,
-  getPromotionGoods,
-} from "@/api/promotion";
+import { getAllPromotion } from "@/api/promotion";
 
 export default {
   data() {
     return {
-      totals: "", // 总数
-      loading: true, //表格请求数据为true
-      promotionList: "", // 活动列表
-      selectedIndex: 0, //左侧菜单选择
-      promotions: "", //选中的活动key
-      index: 999, // 已选下标
+      totals: "",
+      loading: true,
+      promotionList: "",
+      selectedIndex: 0,
+      promotions: "",
+      index: 999,
       params: {
-        // 请求参数
         pageNumber: 1,
         pageSize: 20,
       },
-      pintuanColumns: [
-        {
-          title: "商品名称",
-          key: "goodsName",
-          tooltip: true,
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          tooltip: true,
-        },
-        {
-          title: "开始时间",
-          key: "startTime",
-          tooltip: true,
-        },
-        {
-          title: "结束时间",
-          key: "endTime",
-          tooltip: true,
-        },
-        {
-          title: "操作",
-          key: "action",
-          fixed: "right",
-          width: 100,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.selectedPromotion(params);
-                    },
-                  },
-                },
-                this.index == params.index ? "已选" : "选择"
-              ),
-            ]);
-          },
-        },
-      ],
-      seckillColumns: [
-        {
-          title: "商品名称",
-          key: "goodsName",
-          tooltip: true,
-          width: 200,
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          tooltip: true,
-        },
-        {
-          title: "活动时间",
-          key: "timeLine",
-          tooltip: true,
-          render: (h, params) => {
-            return h("div", {}, `${params.row.timeLine}点`);
-          },
-        },
-
-        {
-          title: "原价",
-          key: "originalPrice",
-          tooltip: true,
-          render: (h, params) => {
-            return h(
-              "div",
-              {},
-              this.$options.filters.unitPrice(params.row.originalPrice)
-            );
-          },
-        },
-        {
-          title: "现价",
-          key: "price",
-          tooltip: true,
-          render: (h, params) => {
-            return h(
-              "div",
-              {
-                style: {},
-              },
-              this.$options.filters.unitPrice(params.row.price, "￥")
-            );
-          },
-        },
-        {
-          title: "状态",
-          key: "promotionApplyStatus",
-          tooltip: true,
-          render: (h, params) => {
-            return h(
-              "div",
-              {
-                style: {},
-              },
-              params.row.promotionApplyStatus == "APPLY"
-                ? "申请"
-                : params.row.promotionApplyStatus == "PASS"
-                ? "通过"
-                : "拒绝"
-            );
-          },
-        },
-
-        {
-          title: "操作",
-          key: "action",
-          width: 100,
-          fixed: "right",
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.selectedPromotion(params);
-                    },
-                  },
-                },
-                this.index == params.index ? "已选" : "选择"
-              ),
-            ]);
-          },
-        },
-      ],
-
-      activeColumns: [], // 活动表头
-
-      columns: [
-        {
-          title: "活动标题",
-          key: "title",
-          tooltip: true,
-          width: 200,
-        },
-        {
-          title: "商品名称",
-          key: "goodsName",
-          tooltip: true,
-        },
-        {
-          title: "活动开始时间",
-          key: "startTime",
-          tooltip: true,
-        },
-        {
-          title: "活动结束时间",
-          key: "endTime",
-          tooltip: true,
-        },
-        {
-          title: "操作",
-          key: "action",
-          fixed: "right",
-          width: 100,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.selectedPromotion(params);
-                    },
-                  },
-                },
-                this.index == params.index ? "已选" : "选择"
-              ),
-            ]);
-          },
-        },
-      ],
-
-      promotionData: "", //商品集合
-
-      showPromotionList: [], //显示当前促销的商品
+      showPromotionList: [],
     };
   },
+  computed: {
+    isSeckillMode() {
+      return this.promotions === "SECKILL";
+    },
+  },
   mounted() {
     this.init();
   },
@@ -278,97 +99,48 @@ export default {
     params: {
       handler() {
         this.index = 999;
-        this.typeOption(this.promotions) &&
-          this.typeOption(this.promotions).methodsed();
+        this.typeOption(this.promotions) && this.typeOption(this.promotions).methodsed();
       },
       deep: true,
     },
   },
-
   methods: {
+    seckillStatusText(v) {
+      if (v === "APPLY") return "申请";
+      if (v === "PASS") return "通过";
+      return "拒绝";
+    },
     sortGoods(type) {
       this.loading = false;
-      this.params.pageNumber - 1;
       this.showPromotionList = this.promotionList[type];
     },
     typeOption(type) {
-      // 活动选项
       switch (type) {
         case "FULL_DISCOUNT":
-          return {
-            title: "满减",
-            methodsed: () => {
-              this.showPromotionList = [];
-              this.activeColumns = this.pintuanColumns;
-
-              this.sortGoods("FULL_DISCOUNT");
-            },
-          };
+          return { title: "满减", methodsed: () => { this.showPromotionList = []; this.sortGoods("FULL_DISCOUNT"); } };
         case "PINTUAN":
-          return {
-            title: "拼团",
-            methodsed: (id) => {
-              this.showPromotionList = [];
-              this.activeColumns = this.pintuanColumns;
-              this.sortGoods("PINTUAN");
-            },
-          };
-
+          return { title: "拼团", methodsed: () => { this.showPromotionList = []; this.sortGoods("PINTUAN"); } };
         case "KANJIA":
-          return {
-            title: "砍价",
-            methodsed: (id) => {
-              this.showPromotionList = [];
-              this.activeColumns = this.pintuanColumns;
-              this.sortGoods("KANJIA");
-            },
-          };
+          return { title: "砍价", methodsed: () => { this.showPromotionList = []; this.sortGoods("KANJIA"); } };
         case "SECKILL":
-          return {
-            title: "秒杀",
-            methodsed: () => {
-              this.showPromotionList = [];
-              this.activeColumns = this.seckillColumns;
-              this.sortGoods("SECKILL");
-            },
-          };
-        // case "COUPON":
-        //   return {
-        //     title: "优惠券",
-        //     methodsed: () => {
-        //       this.showPromotionList = [];
-        //       this.activeColumns = this.pintuanColumns;
-        //       this.sortGoods("COUPON");
-        //     },
-        //   };
+          return { title: "秒杀", methodsed: () => { this.showPromotionList = []; this.sortGoods("SECKILL"); } };
         case "POINTS_GOODS":
-          return {
-            title: "积分商品",
-            methodsed: () => {
-              this.showPromotionList = [];
-              this.activeColumns = this.pintuanColumns;
-              this.sortGoods("POINTS_GOODS");
-            },
-          };
+          return { title: "积分商品", methodsed: () => { this.showPromotionList = []; this.sortGoods("POINTS_GOODS"); } };
         default:
           return {};
       }
     },
-    // 选择活动
     selectedPromotion(val) {
       val.row.___type = "marketing";
       val.row.___promotion = this.promotions;
       this.$emit("selected", [val.row]);
-
       this.index = val.index;
     },
-    // 获取所有营销的活动
     async init() {
-      let res = await getAllPromotion();
+      const res = await getAllPromotion();
       if (res.success) {
         this.loading = false;
         this.getPromotion(res);
-        // this.clickPromotion(this.typeOption[Object.keys(res.result)[0]], 0);
       } else {
         this.loading = false;
       }
@@ -376,43 +148,25 @@ export default {
     getPromotion(res) {
       if (res.result) {
         this.promotionList = res.result;
-        // 去除优惠券
         delete this.promotionList.COUPON;
         Object.keys(res.result)[0] && this.typeOption(Object.keys(res.result)[0]).methodsed();
         this.promotions = Object.keys(res.result)[0];
       }
-
-      // if (Object.keys(res.result).length) {
-      //   this.typeOption[Object.keys(res.result)[0]].methodsed(
-      //     this.promotionList[Object.keys(res.result)[0]].id
-      //   );
-      // }
     },
-
-    // 点击某个活动查询活动列表
     clickPromotion(val, i) {
       this.promotions = val;
       this.selectedIndex = i;
       this.params.pageNumber = 1;
-      this.typeOption(val) &&
-        this.typeOption(val).methodsed(this.promotionList[val].id);
+      this.typeOption(val) && this.typeOption(val).methodsed(this.promotionList[val].id);
     },
   },
 };
 </script>
 <style lang="scss" scoped>
-img {
-  max-width: 100% !important;
-}
-.search {
-  width: 300px;
-}
-.page {
-  margin-top: 2vh;
-  text-align: right;
-}
-.time {
-  font-size: 12px;
+.link-text {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
 }
 .tables {
   height: 400px;
@@ -420,13 +174,12 @@ img {
   overflow: auto;
   width: 100%;
 }
-::v-deep .ivu-table-wrapper {
-  width: 100%;
-}
 .list {
   margin: 0 1.5%;
   height: 400px;
   overflow: auto;
+  flex: 1;
+  width: auto;
   > .list-item {
     padding: 10px;
     transition: 0.35s;
@@ -436,10 +189,6 @@ img {
     background: #ededed;
   }
 }
-.list {
-  flex: 1;
-  width: auto;
-}
 .content {
   overflow: hidden;
   flex: 4;
@@ -449,11 +198,6 @@ img {
 }
 .wrapper {
   overflow: hidden;
-}
-.search-views {
   display: flex;
-  > * {
-    margin: 0 4px;
-  }
 }
 </style>
diff --git a/manager/src/components/lili-dialog/template/other.vue b/manager/src/components/lili-dialog/template/other.vue
index 9f69aad1..422d89c5 100644
--- a/manager/src/components/lili-dialog/template/other.vue
+++ b/manager/src/components/lili-dialog/template/other.vue
@@ -1,142 +1,103 @@
 <template>
   <div>
-    <Row :gutter="30">
-      <Col
-        span="4"
-        v-for="(item, index) in linkList"
-        :key="index"
-        v-if="
-          (item.title !== '拼团频道' && item.title !== '签到') ||
-          $route.name !== 'renovation'
-        "
-      >
-        <div
-          class="card"
-          :class="{ active: selectedIndex == index }"
-          @click="handleLink(item, index)"
+    <el-row :gutter="30">
+      <template v-for="(item, index) in linkList" :key="index">
+        <el-col
+          v-if="showLinkItem(item)"
+          :span="4"
         >
-          <Icon size="24" :type="item.icon" />
-          <p>{{ item.title }}</p>
-        </div>
-      </Col>
-      <!-- 外部链接，只有pc端跳转 -->
-      <Col span="4">
+          <div
+            class="card"
+            :class="{ active: selectedIndex == index }"
+            @click="handleLink(item, index)"
+          >
+            <el-icon :size="24">
+              <component :is="item.icon" />
+            </el-icon>
+            <p>{{ item.title }}</p>
+          </div>
+        </el-col>
+      </template>
+      <el-col v-if="linkVisible" :span="4">
         <div
-          v-if="linkVisible"
           class="card"
           :class="{ active: selectedIndex == linkList.length }"
           @click="handleLink(linkItem, linkList.length)"
         >
-          <Icon size="24" :type="linkItem.icon" />
+          <el-icon :size="24">
+            <component :is="linkItem.icon" />
+          </el-icon>
           <p>{{ linkItem.title }}</p>
         </div>
-      </Col>
-    </Row>
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script>
+import { markRaw } from "vue";
+import {
+  House,
+  ShoppingCart,
+  Star,
+  Document,
+  User,
+  Promotion,
+  PriceTag,
+  Sunny,
+  VideoCamera,
+  Share,
+  ShoppingBag,
+  Link,
+} from "@element-plus/icons-vue";
+
 export default {
   data() {
     return {
       linkList: [
-        // 链接列表
-        {
-          title: "首页",
-          icon: "md-home",
-          ___type: "home",
-        },
-        {
-          title: "购物车",
-          icon: "md-cart",
-          ___type: "cart",
-        },
-        {
-          title: "收藏商品",
-          icon: "md-heart",
-          ___type: "collection",
-        },
-        {
-          title: "我的订单",
-          icon: "md-document",
-          ___type: "order",
-        },
-        {
-          title: "个人中心",
-          icon: "md-person",
-          ___type: "user",
-        },
-        {
-          title: "拼团频道",
-          icon: "md-flame",
-          ___type: "group",
-        },
-        {
-          title: "秒杀频道",
-          icon: "md-flame",
-          ___type: "seckill",
-        },
-        {
-          title: "领券中心",
-          icon: "md-pricetag",
-          ___type: "coupon",
-        },
-        {
-          title: "签到",
-          icon: "md-happy",
-          ___type: "sign",
-        },
-        {
-          title: "小程序直播",
-          icon: "ios-videocam",
-          ___type: "live",
-        },
-        {
-          title: "砍价",
-          icon: "md-share-alt",
-          ___type: "kanjia",
-        },
-        {
-          title: "积分商城",
-          icon: "ios-basket",
-          ___type: "point",
-        },
+        { title: "首页", icon: markRaw(House), ___type: "home" },
+        { title: "购物车", icon: markRaw(ShoppingCart), ___type: "cart" },
+        { title: "收藏商品", icon: markRaw(Star), ___type: "collection" },
+        { title: "我的订单", icon: markRaw(Document), ___type: "order" },
+        { title: "个人中心", icon: markRaw(User), ___type: "user" },
+        { title: "拼团频道", icon: markRaw(Promotion), ___type: "group" },
+        { title: "秒杀频道", icon: markRaw(Promotion), ___type: "seckill" },
+        { title: "领券中心", icon: markRaw(PriceTag), ___type: "coupon" },
+        { title: "签到", icon: markRaw(Sunny), ___type: "sign" },
+        { title: "小程序直播", icon: markRaw(VideoCamera), ___type: "live" },
+        { title: "砍价", icon: markRaw(Share), ___type: "kanjia" },
+        { title: "积分商城", icon: markRaw(ShoppingBag), ___type: "point" },
       ],
       linkItem: {
         title: "外部链接",
-        icon: "ios-link",
+        icon: markRaw(Link),
         ___type: "link",
         url: "",
       },
-      linkVisible: true, // 是否显示外部链接
-      selectedIndex: 9999999, // 已选index
+      linkVisible: true,
+      selectedIndex: 9999999,
     };
   },
-  created(){
-    // console.log(window.location.href)
-    let urls = window.location.href
-    if(urls.indexOf('/floorList/renovation') != -1){
-      this.linkList.forEach((items,indexs)=>{
-        if(items.title == '砍价'){
-          this.linkList.splice(indexs,1)
-        }
-      })
-      this.linkList.forEach((item,index)=>{
-        if(item.title == '小程序直播'){
-          this.linkList.splice(index,1)
-        }
-      })
-      this.linkList.forEach((itemss,indexss)=>{
-        if(itemss.title == '积分商城'){
-          this.linkList.splice(indexss,1)
-        }
-      })
-      this.linkVisible = true
-    }else{
-      this.linkVisible = false
+  created() {
+    const urls = window.location.href;
+    if (urls.indexOf("/floorList/renovation") != -1) {
+      this.linkList = this.linkList.filter(
+        (item) =>
+          item.title !== "砍价" &&
+          item.title !== "小程序直播" &&
+          item.title !== "积分商城"
+      );
+      this.linkVisible = true;
+    } else {
+      this.linkVisible = false;
     }
-
   },
   methods: {
+    showLinkItem(item) {
+      return (
+        (item.title !== "拼团频道" && item.title !== "签到") ||
+        this.$route.name !== "renovation"
+      );
+    },
     handleLink(val, index) {
       val = { ...val, ___type: "other" };
       this.selectedIndex = index;
@@ -157,7 +118,7 @@ export default {
   text-align: center;
   transition: 0.35s;
   cursor: pointer;
-  ::v-deep p {
+  :deep(p) {
     margin: 10px 0;
   }
   border: 1px solid #ededed;
diff --git a/manager/src/components/lili-dialog/template/pages.vue b/manager/src/components/lili-dialog/template/pages.vue
index e6e520ab..6f4ab389 100644
--- a/manager/src/components/lili-dialog/template/pages.vue
+++ b/manager/src/components/lili-dialog/template/pages.vue
@@ -33,7 +33,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-::v-deep .ivu-card-body {
+:deep(.ivu-card-body){
   height: 414px;
   overflow: auto;
 }
@@ -69,11 +69,11 @@ export default {
   height: 416px;
   overflow: hidden;
 }
-::v-deep .ivu-table {
+:deep(.ivu-table){
   height: 300px !important;
   overflow: auto;
 }
-::v-deep .ivu-card-body {
+:deep(.ivu-card-body){
   padding: 0;
   height: auto;
 }
diff --git a/manager/src/components/lili-dialog/template/shops.vue b/manager/src/components/lili-dialog/template/shops.vue
index db841d38..09d976ab 100644
--- a/manager/src/components/lili-dialog/template/shops.vue
+++ b/manager/src/components/lili-dialog/template/shops.vue
@@ -4,40 +4,54 @@
       <div class="query-wrapper">
         <div class="query-item">
           <div>店铺名称</div>
-          <Input placeholder="请输入店铺名称" @on-clear="shopsData=[]; params.storeName=''; params.pageNumber =1; init()" @on-enter="()=>{shopsData=[]; params.pageNumber =1; init();}" icon="ios-search" clearable style="width: 150px"
-            v-model="params.storeName" />
+          <el-input
+            v-model="params.storeName"
+            placeholder="请输入店铺名称"
+            clearable
+            style="width: 150px"
+            @clear="resetSearch"
+            @keyup.enter="resetSearch"
+          />
         </div>
-
         <div class="query-item">
-          <Button type="primary" @click="shopsData=[];params.pageNumber =1; init();" icon="ios-search">搜索</Button>
+          <el-button type="primary" @click="resetSearch">搜索</el-button>
         </div>
       </div>
       <div>
-        <div class="wap-content-list" >
-          <div class="wap-content-item" @click="clickShop(item,index)" :class="{ active:selected == index }" v-for="(item, index) in shopsData" :key="index">
+        <div v-loading="loading" class="wap-content-list">
+          <div
+            v-for="(item, index) in shopsData"
+            :key="index"
+            class="wap-content-item"
+            :class="{ active: selected == index }"
+            @click="clickShop(item, index)"
+          >
             <div>
               <img class="shop-logo" :src="item.storeLogo" alt="" />
             </div>
             <div class="wap-content-desc">
               <div class="wap-content-desc-title">{{ item.storeName }}</div>
-
-              <div class="self-operated" :class="{'theme_color':item.selfOperated }">{{ item.selfOperated ? '自营' : '非自营' }}</div>
-              <div class="wap-sku" :class="{'theme_color':(item.storeDisable === 'OPEN' ? true : false) }">{{ item.storeDisable === 'OPEN' ? '开启中' : '未开启' }}</div>
+              <div class="self-operated" :class="{ theme_color: item.selfOperated }">
+                {{ item.selfOperated ? "自营" : "非自营" }}
+              </div>
+              <div
+                class="wap-sku"
+                :class="{ theme_color: item.storeDisable === 'OPEN' }"
+              >
+                {{ item.storeDisable === "OPEN" ? "开启中" : "未开启" }}
+              </div>
             </div>
           </div>
-          <Spin size="large" fix v-if="loading"></Spin>
         </div>
-        <Page
-          :total="total"
+        <el-pagination
           class="pageration"
-          @on-change="changePageSize"
-          :page-size="params.pageSize"
           size="small"
-          show-total
-          show-elevator
-
-        >
-        </Page>
+          layout="total, prev, pager, next, jumper"
+          :total="total"
+          :page-size="params.pageSize"
+          :current-page="params.pageNumber"
+          @current-change="changePageSize"
+        />
       </div>
     </div>
   </div>
@@ -47,25 +61,28 @@ import { getShopListData } from "@/api/shops.js";
 export default {
   data() {
     return {
-      loading: false, // 加载状态
-      total: "", // 总数
-      params: { // 请求参数
+      loading: false,
+      total: 0,
+      params: {
         pageNumber: 1,
         pageSize: 12,
         storeDisable: "OPEN",
         storeName: "",
       },
-      shopsData: [], // 店铺数据
-      selected: 9999999999, //设置一个不可能选中的index
+      shopsData: [],
+      selected: 9999999999,
     };
   },
-  watch: {},
-
   created() {
     this.init();
   },
   methods: {
-    changePageSize(v){
+    resetSearch() {
+      this.shopsData = [];
+      this.params.pageNumber = 1;
+      this.init();
+    },
+    changePageSize(v) {
       this.params.pageNumber = v;
       this.init();
     },
@@ -73,15 +90,10 @@ export default {
       this.loading = true;
       getShopListData(this.params).then((res) => {
         if (res.success) {
-          /**
-           * 解决数据请求中，滚动栏会一直上下跳动
-           */
           this.total = res.result.total;
-
           this.shopsData = res.result.records;
-
-          this.loading = false;
         }
+        this.loading = false;
       });
     },
     clickShop(val, i) {
@@ -105,15 +117,18 @@ export default {
   display: flex;
   flex-wrap: wrap;
   height: 340px;
+  min-height: 120px;
 }
-
 .shop-logo {
   object-fit: cover;
 }
-
 .active {
   background: url("../../../assets/selected.png") no-repeat;
   background-position: right;
   background-size: 10%;
 }
+.pageration {
+  margin-top: 12px;
+  justify-content: flex-end;
+}
 </style>
diff --git a/manager/src/components/lili-dialog/template/special.vue b/manager/src/components/lili-dialog/template/special.vue
index fdbd8cf3..2ebe670a 100644
--- a/manager/src/components/lili-dialog/template/special.vue
+++ b/manager/src/components/lili-dialog/template/special.vue
@@ -3,26 +3,31 @@
     <div class="content">
       <div>
         <div class="tables">
-          <Table
-           border
-            height="350"
-            tooltip
-            :loading="loading"
-            :columns="columns"
-            :data="data"
-          >
-          </Table>
+          <el-table v-loading="loading" border height="350" :data="data" style="width: 100%">
+            <el-table-column prop="name" label="专题名称" show-overflow-tooltip />
+            <el-table-column label="操作" width="100" fixed="right" align="center">
+              <template #default="{ row, $index }">
+                <el-button
+                  v-if="row"
+                  :type="index === $index ? 'primary' : 'default'"
+                  size="small"
+                  @click="selectRow(row, $index)"
+                >
+                  {{ index === $index ? "已选" : "选择" }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
 
-          <Page
-
-            @on-change="changePageNum"
-            @on-page-size-change="changePageSize"
-            :current="params.pageNumber"
-            :page-size="params.pageSize"
+          <el-pagination
+            v-model:current-page="params.pageNumber"
+            v-model:page-size="params.pageSize"
             class="mt_10"
             :total="Number(total)"
+            layout="prev, pager, next, jumper"
             size="small"
-            show-elevator
+            @current-change="changePageNum"
+            @size-change="changePageSize"
           />
         </div>
       </div>
@@ -30,16 +35,13 @@
   </div>
 </template>
 <script>
-import { getHomeList }  from "@/api/other.js";
+import { getHomeList } from "@/api/other.js";
 export default {
   data() {
     return {
-      loading: true, //表格请求数据为true
-      promotionList: "", // 活动列表
-      selectedIndex: 0, //左侧菜单选择
-      promotions: "", //选中的活动key
-      index: 999, // 已选下标
-      data:[],
+      loading: true,
+      index: 999,
+      data: [],
       params: {
         sort: "createTime",
         order: "desc",
@@ -48,68 +50,34 @@ export default {
         pageSize: 20,
         pageType: "SPECIAL",
       },
-      total: 0, // 表单数据总数
-      columns: [
-        {
-          title: "专题名称",
-          key: "name",
-          tooltip: true,
-          // slot: 'name'
-        //   width: 200,
-        },
-        {
-          title: "操作",
-          key: "action",
-          fixed: "right",
-          width: 100,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "Button",
-                {
-                  props: {
-                    type: this.index == params.index ? "primary" : "default",
-                    size: "small",
-                  },
-                  on: {
-                    click: () => {
-                      this.index = params.index;
-                      params.row = {...params.row,pageType:'special',___type:'special'}
-                      this.$emit("selected", [params.row]);
-                    },
-                  },
-                },
-                this.index == params.index ? "已选" : "选择"
-              ),
-            ]);
-          },
-        },
-      ],
+      total: 0,
     };
   },
   mounted() {
     this.init();
   },
-
   methods: {
-    changePageNum (val) { // 修改评论页码
+    selectRow(row, idx) {
+      this.index = idx;
+      const payload = { ...row, pageType: "special", ___type: "special" };
+      this.$emit("selected", [payload]);
+    },
+    changePageNum(val) {
       this.params.pageNumber = val;
       this.init();
     },
-    changePageSize (val) { // 修改评论页数
+    changePageSize(val) {
       this.params.pageNumber = 1;
       this.params.pageSize = val;
       this.init();
     },
-    // 获取话题的标题
     async init() {
-      // 根据当前路径判断当前是H5还是PC
-      this.params.pageClientType = this.$route.name === 'renovation' ? 'PC' : 'H5'
-      let res = await getHomeList(this.params);
+      this.params.pageClientType = this.$route.name === "renovation" ? "PC" : "H5";
+      const res = await getHomeList(this.params);
       if (res.success) {
         this.loading = false;
-        this.data= res.result.records
-        this.total = res.result.total
+        this.data = res.result.records;
+        this.total = res.result.total;
       } else {
         this.loading = false;
       }
@@ -128,49 +96,17 @@ img {
   margin-top: 2vh;
   text-align: right;
 }
-.time {
-  font-size: 12px;
-}
 .tables {
   height: 400px;
   margin-top: 20px;
   overflow: auto;
   width: 100%;
 }
-::v-deep .ivu-table-wrapper {
-  width: 100%;
-}
-.list {
-  margin: 0 1.5%;
-  height: 400px;
-  overflow: auto;
-  > .list-item {
-    padding: 10px;
-    transition: 0.35s;
-    cursor: pointer;
-  }
-  .list-item:hover {
-    background: #ededed;
-  }
-}
-.list {
-  flex: 1;
-  width: auto;
-}
 .content {
   overflow: hidden;
   flex: 4;
 }
-.active {
-  background: #ededed;
-}
 .wrapper {
   overflow: hidden;
 }
-.search-views {
-  display: flex;
-  > * {
-    margin: 0 4px;
-  }
-}
 </style>
diff --git a/manager/src/components/lili/circle-loading.vue b/manager/src/components/lili/circle-loading.vue
index 594ef07a..d2d3675f 100644
--- a/manager/src/components/lili/circle-loading.vue
+++ b/manager/src/components/lili/circle-loading.vue
@@ -1,12 +1,17 @@
 <template>
-  <div style="display: inline-block;">
-    <Icon type="ios-loading" size="18" color="#2d8cf0" class="spin-icon-load"></Icon>
+  <div style="display: inline-block">
+    <el-icon class="spin-icon-load" :size="18" color="#ff5c58">
+      <Loading />
+    </el-icon>
   </div>
 </template>
 
 <script>
+import { Loading } from "@element-plus/icons-vue";
+
 export default {
-  name: "circleLoading"
+  name: "circleLoading",
+  components: { Loading },
 };
 </script>
 
@@ -14,5 +19,12 @@ export default {
 .spin-icon-load {
   animation: ani-demo-spin 1s linear infinite;
 }
+@keyframes ani-demo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>
-
diff --git a/manager/src/components/lili/config-drawer.vue b/manager/src/components/lili/config-drawer.vue
index 7e45b6c6..a8c927d1 100644
--- a/manager/src/components/lili/config-drawer.vue
+++ b/manager/src/components/lili/config-drawer.vue
@@ -1,78 +1,34 @@
 <template>
   <div>
-    <Drawer width="300px" title="页面配置"  v-model="drawer">
-      <!-- 内容 -->
-      <h3>
-        内容设置
-      </h3>
-      <div class="config-item flex flex-a-c flex-j-sb">
-        <div>
-          <Tooltip theme="light" placement="bottom-end" max-width="100" content="关闭之后部分页面点击'查看''详情'等按钮将跳到新页面展示" >
-            <div>
-              多标签Tab页内嵌模式
-            </div>
-          </Tooltip>
-        </div>
-        <i-switch v-model="setting.isUseTabsRouter"></i-switch>
-      </div>
-    </Drawer>
+    <el-drawer v-model="drawer" title="页面配置" size="300px">
+      <div class="config-empty">暂无可配置项</div>
+    </el-drawer>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
 export default {
   name: "configDrawer",
   data() {
     return {
       drawer: false,
-
     };
   },
-  computed: {
-    ...mapState({
-      setting: state => {
-        return state.setting.setting
-      }
-    })
-  },
-  watch: {
-    setting: {
-      handler(val) {
-        this.setStore('admin-setting', val)
-        this.$store.commit('updateSetting', val);
-      },
-      deep: true
-    }
-  },
-  mounted() {
-  },
   methods: {
     open() {
-      this.drawer = true
+      this.drawer = true;
     },
     close() {
-      this.drawer = false
+      this.drawer = false;
     },
-    toggle() {
-      this.drawer != this.drawer
-    },
-  }
-}
+  },
+};
 </script>
 
-<style lang="scss" scoped>
-* {
-  color: #333 !important;
-}
-
-h3 {
-  margin: 10px 0 20px 0;
-}
-
-.config-item {
-  cursor: pointer;
-  margin-bottom: 20px;
-  justify-content: space-between;
+<style scoped>
+.config-empty {
+  color: #909399;
+  text-align: center;
+  padding: 20px 0;
 }
 </style>
diff --git a/manager/src/components/lili/department-choose.vue b/manager/src/components/lili/department-choose.vue
index 412e4d73..d104f910 100644
--- a/manager/src/components/lili/department-choose.vue
+++ b/manager/src/components/lili/department-choose.vue
@@ -1,72 +1,68 @@
 <template>
   <div>
-    <Cascader
+    <el-cascader
       v-model="selectDep"
-      :data="department"
-      @on-change="handleChangeDep"
-      change-on-select
+      :options="department"
+      :props="cascaderProps"
       filterable
       clearable
       placeholder="请选择"
-    ></Cascader>
+      style="width: 100%"
+      @change="handleChangeDep"
+    />
   </div>
 </template>
 
 <script>
 import { initDepartment } from "@/api/index";
+
 export default {
   name: "departmentChoose",
-  props: {
-
-  },
   data() {
     return {
-      selectDep: [], // 已选数据
-      department: [] // 列表
+      selectDep: [],
+      department: [],
+      cascaderProps: {
+        value: "value",
+        label: "label",
+        children: "children",
+        checkStrictly: true,
+        emitPath: true,
+      },
     };
   },
   methods: {
-    // 获取部门数据
     initDepartmentData() {
-      initDepartment().then(res => {
+      initDepartment().then((res) => {
         if (res.success) {
           const arr = res.result;
-          this.filterData(arr)
-          this.department = arr
+          this.filterData(arr);
+          this.department = arr;
         }
       });
     },
-    handleChangeDep(value, selectedData) {
+    handleChangeDep(value) {
       let departmentId = "";
-      // 获取最后一个值
       if (value && value.length > 0) {
         departmentId = value[value.length - 1];
       }
       this.$emit("on-change", departmentId);
     },
-    // 清空已选列表
     clearSelect() {
       this.selectDep = [];
     },
-    // 处理部门数据
-    filterData (data) {
-      data.forEach(e => {
+    filterData(data) {
+      data.forEach((e) => {
         e.value = e.id;
         e.label = e.title;
         if (e.children) {
-          this.filterData(e.children)
-        } else {
-          return
+          this.filterData(e.children);
         }
-      })
-    }
+      });
+    },
   },
   created() {
     this.initDepartmentData();
-  }
+  },
 };
 </script>
-
-<style lang="scss">
-</style>
-
diff --git a/manager/src/components/lili/department-tree-choose.vue b/manager/src/components/lili/department-tree-choose.vue
index c7c229ca..023abf1b 100644
--- a/manager/src/components/lili/department-tree-choose.vue
+++ b/manager/src/components/lili/department-tree-choose.vue
@@ -1,106 +1,110 @@
 <template>
   <div>
-    <div style="display:flex;">
-      <Input
+    <div style="display: flex">
+      <el-input
         v-model="departmentTitle"
         readonly
-        style="margin-right:10px;"
+        style="margin-right: 10px; flex: 1"
         :placeholder="placeholder"
         :clearable="clearable"
-        @on-clear="clearSelect"
+        @clear="clearSelect"
       />
-      <Poptip transfer trigger="click" placement="right" title="选择部门" width="250">
-        <Button icon="md-list">选择部门</Button>
-        <div slot="content">
-          <Input
-            v-model="searchKey"
-            suffix="ios-search"
-            @on-change="searchDep"
-            placeholder="输入部门名搜索"
-            clearable
+      <el-popover trigger="click" placement="right" title="选择部门" :width="280">
+        <template #reference>
+          <el-button>选择部门</el-button>
+        </template>
+        <el-input
+          v-model="searchKey"
+          placeholder="输入部门名搜索"
+          clearable
+          style="margin-bottom: 8px"
+          @input="searchDep"
+        />
+        <div v-loading="depLoading" class="dep-tree-bar">
+          <el-tree
+            :data="dataDep"
+            :props="treeProps"
+            node-key="id"
+            highlight-current
+            default-expand-all
+            @node-click="selectTree"
           />
-          <div class="dep-tree-bar">
-            <Tree
-              :data="dataDep"
-              @on-select-change="selectTree"
-            ></Tree>
-            <Spin size="large" fix v-if="depLoading"></Spin>
-          </div>
         </div>
-      </Poptip>
+      </el-popover>
     </div>
   </div>
 </template>
 
 <script>
-import {initDepartment, searchDepartment} from "@/api/index";
+import { initDepartment } from "@/api/index";
 
 export default {
   name: "departmentTreeChoose",
   props: {
     multiple: {
       type: Boolean,
-      default: false
+      default: false,
     },
     clearable: {
       type: Boolean,
-      default: true
+      default: true,
     },
     placeholder: {
       type: String,
-      default: "点击选择部门"
-    }
+      default: "点击选择部门",
+    },
   },
   data() {
     return {
-      depLoading: false, // 加载状态
-      departmentTitle: "", // modal标题
-      searchKey: "", // 搜索关键词
-      dataDep: [], // 部门列表
-      cloneDep: [], // 克隆部门列表
-      selectDep: [], // 已选部门
-      departmentId: [] // 部门id
+      depLoading: false,
+      departmentTitle: "",
+      searchKey: "",
+      dataDep: [],
+      cloneDep: [],
+      departmentId: [],
+      treeProps: {
+        label: "title",
+        children: "children",
+      },
     };
   },
   methods: {
-    // 获取部门数据
     initDepartmentData() {
-      initDepartment().then(res => {
-        if (res.success) {
-          this.dataDep = res.result;
-
-          this.cloneDep = JSON.parse(JSON.stringify(this.dataDep));
-        }
-      });
+      this.depLoading = true;
+      initDepartment()
+        .then((res) => {
+          if (res.success) {
+            this.dataDep = res.result;
+            this.cloneDep = JSON.parse(JSON.stringify(this.dataDep));
+          }
+        })
+        .finally(() => {
+          this.depLoading = false;
+        });
     },
     searchDep() {
-      // 搜索部门
       if (this.searchKey) {
-        this.dataDep = this.cloneDep.filter(item => {
-          return item.title.indexOf(this.searchKey) > -1;
-        });
-
+        this.dataDep = this.cloneDep.filter(
+          (item) => item.title.indexOf(this.searchKey) > -1
+        );
       } else {
         this.dataDep = JSON.parse(JSON.stringify(this.cloneDep));
       }
     },
-    // 选择回调
-    selectTree(v) {
-      if (v.length === 0) {
+    selectTree(node) {
+      if (!node) {
         this.$emit("on-change", null);
         this.departmentId = "";
         this.departmentTitle = "";
-        return
+        return;
       }
-      this.departmentId = v[0].id;
-      this.departmentTitle = v[0].title;
-      let department = {
+      this.departmentId = node.id;
+      this.departmentTitle = node.title;
+      this.$emit("on-change", {
         departmentId: this.departmentId,
-        departmentTitle: this.departmentTitle
-      }
-      this.$emit("on-change", department);
+        departmentTitle: this.departmentTitle,
+      });
     },
-    // 清除选中方法
     clearSelect() {
       this.departmentId = [];
       this.departmentTitle = "";
@@ -112,7 +116,6 @@ export default {
       }
       this.$emit("on-clear");
     },
-    // 设置数据 回显用
     setData(ids, title) {
       this.departmentTitle = title;
       if (this.multiple) {
@@ -121,11 +124,11 @@ export default {
         this.departmentId = [];
         this.departmentId.push(ids);
       }
-    }
+    },
   },
   created() {
     this.initDepartmentData();
-  }
+  },
 };
 </script>
 
@@ -145,9 +148,6 @@ export default {
 
 .dep-tree-bar::-webkit-scrollbar-thumb {
   border-radius: 4px;
-  -webkit-box-shadow: inset 0 0 2px #d1d1d1;
   background: #e4e4e4;
 }
-
 </style>
-
diff --git a/manager/src/components/lili/set-password.vue b/manager/src/components/lili/set-password.vue
index 25f46dd6..ac57ea25 100644
--- a/manager/src/components/lili/set-password.vue
+++ b/manager/src/components/lili/set-password.vue
@@ -1,30 +1,31 @@
 <template>
   <div class="set-password">
-    <Poptip transfer trigger="focus" placement="right" width="250">
-      <Input
-        type="password"
-        password
-        style="width:350px;"
-        :maxlength="maxlength"
-        v-model="currentValue"
-        @on-change="handleChange"
-        :size="size"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :readonly="readonly"
-      />
-      <div :class="tipStyle" slot="content">
-        <div class="words">强度 : {{strength}}</div>
-        <Progress
-          :percent="strengthValue"
-          :status="progressStatus"
-          hide-info
-          style="margin: 13px 0;"
+    <el-popover trigger="focus" placement="right" :width="250">
+      <template #reference>
+        <el-input
+          v-model="currentValue"
+          type="password"
+          show-password
+          style="width: 350px"
+          :maxlength="maxlength"
+          :size="size"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :readonly="readonly"
+          @input="handleChange"
         />
-        <br />请至少输入 6 个字符。请不要使
-        <br />用容易被猜到的密码。
+      </template>
+      <div :class="tipStyle">
+        <div class="words">强度 : {{ strength }}</div>
+        <el-progress
+          :percentage="strengthValue"
+          :status="progressStatus"
+          :show-text="false"
+          style="margin: 13px 0"
+        />
+        <br />请至少输入 6 个字符。请不要使用容易被猜到的密码。
       </div>
-    </Poptip>
+    </el-popover>
   </div>
 </template>
 
@@ -32,54 +33,53 @@
 export default {
   name: "setPassword",
   props: {
+    modelValue: String,
     value: String,
     size: String,
     placeholder: {
       type: String,
-      default: "请输入密码，长度为6-20个字符"
+      default: "请输入密码，长度为6-20个字符",
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     readonly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     maxlength: {
       type: Number,
-      default: 20
-    }
+      default: 20,
+    },
   },
+  emits: ["update:modelValue", "input", "on-change"],
   data() {
     return {
-      currentValue: this.value, // 当前值
-      tipStyle: "password-tip-none", // 强度样式
-      strengthValue: 0, // 强度等级
-      progressStatus: "normal", // 进度条状态
-      strength: "无", // 密码强度描述
-      grade: 0 // 强度等级
+      currentValue: this.modelValue ?? this.value ?? "",
+      tipStyle: "password-tip-none",
+      strengthValue: 0,
+      progressStatus: "",
+      strength: "无",
+      grade: 0,
     };
   },
+  watch: {
+    modelValue(val) {
+      this.setCurrentValue(val);
+    },
+    value(val) {
+      this.setCurrentValue(val);
+    },
+  },
   methods: {
     checkStrengthValue(v) {
-      // 评级制判断密码强度 最高5
       let grade = 0;
-      if (/\d/.test(v)) {
-        grade++; //数字
-      }
-      if (/[a-z]/.test(v)) {
-        grade++; //小写
-      }
-      if (/[A-Z]/.test(v)) {
-        grade++; //大写
-      }
-      if (/\W/.test(v)) {
-        grade++; //特殊字符
-      }
-      if (v.length >= 10) {
-        grade++;
-      }
+      if (/\d/.test(v)) grade++;
+      if (/[a-z]/.test(v)) grade++;
+      if (/[A-Z]/.test(v)) grade++;
+      if (/\W/.test(v)) grade++;
+      if (v.length >= 10) grade++;
       this.grade = grade;
       return grade;
     },
@@ -90,14 +90,14 @@ export default {
         this.strengthValue = 0;
         return;
       }
-      let grade = this.checkStrengthValue(this.currentValue);
+      const grade = this.checkStrengthValue(this.currentValue);
       if (grade <= 1) {
-        this.progressStatus = "wrong";
+        this.progressStatus = "exception";
         this.tipStyle = "password-tip-weak";
         this.strength = "弱";
         this.strengthValue = 33;
       } else if (grade >= 2 && grade <= 4) {
-        this.progressStatus = "normal";
+        this.progressStatus = "";
         this.tipStyle = "password-tip-middle";
         this.strength = "中";
         this.strengthValue = 66;
@@ -108,61 +108,33 @@ export default {
         this.strengthValue = 100;
       }
     },
-    // 密码变动后回调
-    handleChange(v) {
+    handleChange() {
       this.strengthChange();
+      this.$emit("update:modelValue", this.currentValue);
       this.$emit("input", this.currentValue);
       this.$emit("on-change", this.currentValue, this.grade, this.strength);
     },
-    // 监听密码变动，实时回显密码强度
     setCurrentValue(value) {
-      if (value === this.currentValue) {
-        return;
-      }
-      this.currentValue = value;
+      if (value === this.currentValue) return;
+      this.currentValue = value ?? "";
       this.strengthChange();
       this.$emit("on-change", this.currentValue, this.grade, this.strength);
-    }
+    },
   },
-  watch: {
-    value(val) {
-      this.setCurrentValue(val);
-    }
-  }
 };
 </script>
 
 <style lang="scss" scoped>
-.set-password .ivu-poptip,
-.set-password .ivu-poptip-rel {
-  display: block;
-}
 .password-tip-none {
   padding: 1vh 0;
 }
-
-.password-tip-weak {
-  padding: 1vh 0;
-
-  .words {
-    color: #ed3f14;
-  }
+.password-tip-weak .words {
+  color: #ed3f14;
 }
-
-.password-tip-middle {
-  padding: 1vh 0;
-
-  .words {
-    color: #2d8cf0;
-  }
+.password-tip-middle .words {
+  color: #2d8cf0;
 }
-
-.password-tip-strong {
-  padding: 1vh 0;
-
-  .words {
-    color: #52c41a;
-  }
+.password-tip-strong .words {
+  color: #52c41a;
 }
 </style>
-
diff --git a/manager/src/components/lili/upload-pic-input.vue b/manager/src/components/lili/upload-pic-input.vue
index bf2ffec7..c417f07b 100644
--- a/manager/src/components/lili/upload-pic-input.vue
+++ b/manager/src/components/lili/upload-pic-input.vue
@@ -1,210 +1,166 @@
 <template>
   <div>
-    <div style="display:flex;">
-      <Input
+    <div style="display: flex; gap: 10px; align-items: center; width: 100%">
+      <el-input
+        v-if="showInput"
         v-model="currentValue"
-        @on-change="handleChange"
-        v-show="showInput"
         :placeholder="placeholder"
         :size="size"
         :disabled="disabled"
         :readonly="readonly"
         :maxlength="maxlength"
+        style="flex: 1"
+        @input="handleChange"
       >
-          <Poptip slot="append" transfer trigger="hover" title="图片预览" placement="right">
-            <Icon type="md-eye" class="see-icon" />
-            <div slot="content">
-              <img :src="currentValue" alt="该资源不存在" style="max-width: 300px;margin: 0 auto;display: block;" />
-              <a @click="viewImage=true" style="margin-top:5px;text-align:right;display:block">查看大图</a>
-            </div>
-          </Poptip>
-      </Input>
-      <Button @click="handleCLickImg('storeLogo')">选择图片</Button>
-      <!--<Upload-->
-        <!--:action="uploadFileUrl"-->
-        <!--:headers="accessToken"-->
-        <!--:on-success="handleSuccess"-->
-        <!--:on-error="handleError"-->
-        <!--:format="['jpg','jpeg','png','gif','bmp']"-->
-        <!--accept=".jpg, .jpeg, .png, .gif, .bmp"-->
-        <!--:max-size="1024"-->
-        <!--:on-format-error="handleFormatError"-->
-        <!--:on-exceeded-size="handleMaxSize"-->
-        <!--:before-upload="beforeUpload"-->
-        <!--:show-upload-list="false"-->
-        <!--ref="up"-->
-        <!--class="upload"-->
-      <!--&gt;-->
-        <!--<Button :loading="loading" :size="size" :disabled="disabled">上传图片</Button>-->
-      <!--</Upload>-->
+        <template #append>
+          <el-popover trigger="hover" placement="right" :width="320" title="图片预览">
+            <template #reference>
+              <el-button class="see-icon">
+                <el-icon><View /></el-icon>
+              </el-button>
+            </template>
+            <img
+              v-if="currentValue"
+              :src="currentValue"
+              alt="该资源不存在"
+              style="max-width: 280px; display: block; margin: 0 auto"
+            />
+            <el-button
+              v-if="currentValue"
+              type="primary"
+              link
+              style="margin-top: 8px; display: block; text-align: right"
+              @click="viewImage = true"
+            >
+              查看大图
+            </el-button>
+          </el-popover>
+        </template>
+      </el-input>
+      <el-button @click="handleCLickImg('storeLogo')">选择图片</el-button>
     </div>
 
-    <Modal
-      title="图片预览"
-      v-model="viewImage"
-      :styles="{ top: '30px' }"
-      :z-index="3500"
-      draggable
-    >
-      <img :src="currentValue" alt="该资源不存在" style="max-width: 300px;margin: 0 auto;display: block;" />
-      <div slot="footer">
-        <Button @click="viewImage=false">关闭</Button>
-      </div>
-    </Modal>
-
-    <Modal width="1200px" v-model="picModalFlag" :z-index="3500">
-      <ossManage @callback="callbackSelected" ref="ossManage" :isComponent="true" :initialize="picModalFlag" />
-    </Modal>
+    <el-dialog v-model="viewImage" title="图片预览" width="480px" append-to-body :z-index="3500">
+      <img
+        :src="currentValue"
+        alt="该资源不存在"
+        style="max-width: 100%; margin: 0 auto; display: block"
+      />
+      <template #footer>
+        <el-button @click="viewImage = false">关闭</el-button>
+      </template>
+    </el-dialog>
 
+    <el-dialog v-model="picModalFlag" width="1200px" append-to-body :z-index="3500" destroy-on-close>
+      <ossManage
+        ref="ossManage"
+        :is-component="true"
+        :initialize="picModalFlag"
+        @callback="callbackSelected"
+      />
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { View } from "@element-plus/icons-vue";
 import { uploadFile } from "@/api/index";
 import ossManage from "@/views/sys/oss-manage/ossManage";
+
 export default {
   name: "uploadPicInput",
   components: {
     ossManage,
+    View,
   },
   props: {
+    modelValue: String,
     value: String,
     size: {
-      default: 'default',
-      type: String
+      default: "default",
+      type: String,
     },
     placeholder: {
       type: String,
-      default: "图片链接"
+      default: "图片链接",
     },
     showInput: {
       type: Boolean,
-      default: true
+      default: true,
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     readonly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     maxlength: Number,
-    icon: {
-      type: String,
-      default: "ios-cloud-upload-outline"
-    }
   },
+  emits: ["update:modelValue", "input", "on-change"],
   data() {
     return {
-      accessToken: {}, // 验证token
-      currentValue: this.value, // 当前值
-      loading: false, // 加载状态
-      viewImage: false, // 预览图片modal
-      uploadFileUrl: uploadFile, // 上传地址
-      picModalFlag: false, // 图片选择器
-      selectedFormBtnName: "", // 点击图片绑定form
-      picIndex: "", // 存储身份证图片下标，方便赋值
+      accessToken: {},
+      currentValue: this.modelValue ?? this.value ?? "",
+      viewImage: false,
+      uploadFileUrl: uploadFile,
+      picModalFlag: false,
+      selectedFormBtnName: "",
+      picIndex: "",
     };
   },
   methods: {
-    // 选择图片modal
     handleCLickImg(val, index) {
       this.$refs.ossManage.selectImage = true;
       this.picModalFlag = true;
       this.selectedFormBtnName = val;
       this.picIndex = index;
     },
-    // 图片回显
     callbackSelected(val) {
       this.picModalFlag = false;
       this.currentValue = val.url;
       this.picIndex = "";
-      this.$emit("input", this.currentValue);
-      this.$emit("on-change", this.currentValue);
+      this.emitValue(this.currentValue);
     },
-    // 初始化
     init() {
       this.accessToken = {
-        accessToken: this.getStore("accessToken")
+        accessToken: this.getStore("accessToken"),
       };
     },
-    // 格式校验
-    handleFormatError(file) {
-      this.loading = false;
-      this.$Notice.warning({
-        title: "不支持的文件格式",
-        desc:
-          "所选文件‘ " +
-          file.name +
-          " ’格式不正确, 请选择 .jpg .jpeg .png .gif .bmp格式文件"
-      });
+    emitValue(val) {
+      this.$emit("update:modelValue", val);
+      this.$emit("input", val);
+      this.$emit("on-change", val);
     },
-    // 大小校验
-    handleMaxSize(file) {
-      this.loading = false;
-      this.$Notice.warning({
-        title: "文件大小过大",
-        desc: "所选文件大小过大, 不得超过1M."
-      });
+    handleChange() {
+      this.emitValue(this.currentValue);
+      this.$attrs.rollback && this.$attrs.rollback();
     },
-    // 上传前
-    beforeUpload() {
-      this.loading = true;
-      return true;
-    },
-    // 上传成功
-    handleSuccess(res, file) {
-      this.loading = false;
-      if (res.success) {
-        this.currentValue = res.result;
-        this.$emit("input", this.currentValue);
-        this.$emit("on-change", this.currentValue);
-      } else {
-        // this.$Message.error(res.message);
-      }
-    },
-    // 上传失败
-    handleError(error, file, fileList) {
-      this.loading = false;
-      this.$Message.error(error.toString());
-    },
-    // 上传成功回显
-    handleChange(v) {
-      this.$emit("input", this.currentValue);
-      this.$emit("on-change", this.currentValue);
-      this.$attrs.rollback && this.$attrs.rollback()
-    },
-    // 初始值
     setCurrentValue(value) {
       if (value === this.currentValue) {
         return;
       }
-      this.currentValue = value;
-      this.$emit("input", this.currentValue);
-      this.$emit("on-change", this.currentValue);
-    }
+      this.currentValue = value ?? "";
+      this.emitValue(this.currentValue);
+    },
   },
   watch: {
+    modelValue(val) {
+      this.setCurrentValue(val);
+    },
     value(val) {
       this.setCurrentValue(val);
-    }
+    },
   },
   created() {
     this.init();
-  }
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .see-icon {
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.upload {
-  display: inline-block;
-  margin-left: 10px;
+  padding: 8px;
 }
 </style>
-
diff --git a/manager/src/components/lili/upload-pic-thumb.vue b/manager/src/components/lili/upload-pic-thumb.vue
index 3f464c76..23f99982 100644
--- a/manager/src/components/lili/upload-pic-thumb.vue
+++ b/manager/src/components/lili/upload-pic-thumb.vue
@@ -3,187 +3,169 @@
     <div class="upload-pic-thumb">
       <vuedraggable
         :list="uploadList"
-        :disabled="!draggable||!multiple"
+        :disabled="!draggable || !multiple"
         :animation="200"
         class="list-group"
         ghost-class="thumb-ghost"
         @end="onEnd"
       >
-        <div class="upload-list" v-for="(item, index) in uploadList" :key="index">
-          <div v-if="item.status == 'finished'" style="height:60px;">
-            <img :src="item.url" />
+        <div v-for="(item, index) in uploadList" :key="index" class="upload-list">
+          <div v-if="item.status == 'finished'" style="height: 60px">
+            <img :src="item.url" alt="" />
             <div class="upload-list-cover">
-              <Icon type="ios-eye-outline" @click="handleView(item.url)"></Icon>
-              <Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon>
+              <el-icon class="action-icon" @click="handleView(item.url)"><View /></el-icon>
+              <el-icon class="action-icon" @click="handleRemove(item)"><Delete /></el-icon>
             </div>
           </div>
           <div v-else>
-            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
+            <el-progress
+              v-if="item.showProgress"
+              :percentage="item.percentage"
+              :show-text="false"
+            />
           </div>
         </div>
       </vuedraggable>
-      <Upload
+      <el-upload
         ref="upload"
-        :multiple="multiple"
-        :show-upload-list="false"
-        :on-success="handleSuccess"
-        :on-error="handleError"
-        :format="['jpg','jpeg','png','gif']"
-        :max-size="1024"
-        :on-format-error="handleFormatError"
-        :on-exceeded-size="handleMaxSize"
-        :before-upload="handleBeforeUpload"
-        type="drag"
         :action="uploadFileUrl"
         :headers="accessToken"
-        style="display: inline-block;width:58px;"
+        :multiple="multiple"
+        :show-file-list="false"
+        accept=".jpg,.jpeg,.png,.gif"
+        drag
+        :before-upload="handleBeforeUpload"
+        :on-success="handleSuccess"
+        :on-error="handleError"
+        style="display: inline-block; width: 58px"
       >
-        <div style="width: 58px;height:58px;line-height: 58px;">
-          <Icon type="md-camera" size="20"></Icon>
+        <div class="upload-trigger">
+          <el-icon :size="20"><Camera /></el-icon>
         </div>
-      </Upload>
+      </el-upload>
     </div>
-    <Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
-      <img :src="imgUrl" alt="无效的图片链接" style="width: 100%;margin: 0 auto;display: block;" />
-      <div slot="footer">
-        <Button @click="viewImage=false">关闭</Button>
-      </div>
-    </Modal>
+
+    <el-dialog v-model="viewImage" title="图片预览" width="520px" append-to-body>
+      <img :src="imgUrl" alt="无效的图片链接" style="width: 100%; display: block; margin: 0 auto" />
+      <template #footer>
+        <el-button @click="viewImage = false">关闭</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { Camera, Delete, View } from "@element-plus/icons-vue";
 import { uploadFile } from "@/api/index";
 import vuedraggable from "vuedraggable";
+
 export default {
   name: "uploadPicThumb",
   components: {
-    vuedraggable
+    vuedraggable,
+    Camera,
+    Delete,
+    View,
   },
   props: {
-    value: {
-      type: null
-    },
+    modelValue: { type: null },
+    value: { type: null },
     draggable: {
       type: Boolean,
-      default: true
+      default: true,
     },
     multiple: {
       type: Boolean,
-      default: true
+      default: true,
     },
     limit: {
       type: Number,
-      default: 10
-    }
+      default: 10,
+    },
   },
+  emits: ["update:modelValue", "input", "on-change", "uploadchange"],
   data() {
     return {
-      accessToken: {}, // 验证token
-      uploadFileUrl: uploadFile, // 上传地址
-      uploadList: [], // 上传列表
-      viewImage: false, // 预览modal
-      imgUrl: "" // 图片地址
+      accessToken: {},
+      uploadFileUrl: uploadFile,
+      uploadList: [],
+      viewImage: false,
+      imgUrl: "",
     };
   },
+  computed: {
+    bindValue() {
+      return this.modelValue !== undefined ? this.modelValue : this.value;
+    },
+  },
   methods: {
-    // 拖拽结束事件
     onEnd() {
       this.returnValue();
     },
-    // 初始化方法
     init() {
-      this.setData(this.value, true);
+      this.setData(this.bindValue, true);
       this.accessToken = {
-        accessToken: this.getStore("accessToken")
+        accessToken: this.getStore("accessToken"),
       };
     },
-    // 预览图片
     handleView(imgUrl) {
       this.imgUrl = imgUrl;
       this.viewImage = true;
     },
-    // 移除图片
     handleRemove(file) {
-      this.uploadList = this.uploadList.filter(i => i.url !== file.url);
+      this.uploadList = this.uploadList.filter((i) => i.url !== file.url);
       this.returnValue();
     },
-    // 上传成功
     handleSuccess(res, file) {
       if (res.success) {
         file.url = res.result;
-        // 单张图片处理
         if (!this.multiple && this.uploadList.length > 0) {
-          // 删除第一张
           this.uploadList.splice(0, 1);
         }
         this.uploadList.push(file);
-        // 返回组件值
         this.returnValue();
       } else {
         this.$Message.error(res.message);
       }
     },
-    // 上传失败
-    handleError(error, file, fileList) {
+    handleError(error) {
       this.$Message.error(error.toString());
     },
-    // 格式校验
-    handleFormatError(file) {
-      this.$Notice.warning({
-        title: "不支持的文件格式",
-        desc:
-          "所选文件‘ " +
-          file.name +
-          " ’格式不正确, 请选择 .jpg .jpeg .png .gif图片格式文件"
-      });
-    },
-    // 上传文件大小校验
-    handleMaxSize(file) {
-      this.$Notice.warning({
-        title: "文件大小过大",
-        desc:
-          "所选文件大小过大，不能超过1M."
-      });
-    },
-    // 上传之前钩子
-    handleBeforeUpload() {
+    handleBeforeUpload(file) {
+      const okType = ["image/jpeg", "image/png", "image/gif", "image/jpg"].includes(file.type);
+      if (!okType) {
+        this.$Message.warning("请选择 .jpg .jpeg .png .gif 格式图片");
+        return false;
+      }
+      if (file.size / 1024 > 1024) {
+        this.$Message.warning("所选文件大小过大，不能超过 1M");
+        return false;
+      }
       if (this.multiple && this.uploadList.length >= this.limit) {
         this.$Message.warning("最多只能上传" + this.limit + "张图片");
         return false;
       }
       return true;
     },
-    // 返回组件值
+    emitValue(val) {
+      this.$emit("update:modelValue", val);
+      this.$emit("input", val);
+      this.$emit("on-change", val);
+    },
     returnValue() {
       if (!this.uploadList || this.uploadList.length < 1) {
-        if (!this.multiple) {
-          this.$emit("input", "");
-          this.$emit("on-change", "");
-        } else {
-          this.$emit("input", []);
-          this.$emit("on-change", []);
-        }
+        const empty = this.multiple ? [] : "";
+        this.emitValue(empty);
         return;
       }
       if (!this.multiple) {
-        // 单张
-        let v = this.uploadList[0].url;
-        this.$emit("input", v);
-        this.$emit("on-change", v);
+        this.emitValue(this.uploadList[0].url);
       } else {
-        let v = [];
-        this.uploadList.forEach(e => {
-          v.push(e.url);
-        });
-        this.$emit("input", v);
-        this.$emit("on-change", v);
+        this.emitValue(this.uploadList.map((e) => e.url));
       }
     },
-    // 传入值变化时改变值
     setData(v, init) {
       if (typeof v == "string") {
-        // 单张
         if (this.multiple) {
           this.$Message.warning("多张上传仅支持数组数据类型");
           return;
@@ -191,60 +173,49 @@ export default {
         if (!v) {
           return;
         }
-        this.uploadList = [];
-        let item = {
-          url: v,
-          status: "finished"
-        };
-        this.uploadList.push(item);
+        this.uploadList = [{ url: v, status: "finished" }];
         this.$emit("uploadchange", v);
-        this.$emit("on-change", v);
-      } else if (typeof v == "object") {
-        // 多张
+        this.emitValue(v);
+      } else if (typeof v == "object" && v) {
         if (!this.multiple) {
           this.$Message.warning("单张上传仅支持字符串数据类型");
           return;
         }
         this.uploadList = [];
+        const list = v.length > this.limit ? v.slice(0, this.limit) : v;
         if (v.length > this.limit) {
-          for (let i = 0; i < this.limit; i++) {
-            let item = {
-              url: v[i],
-              status: "finished"
-            };
-            this.uploadList.push(item);
-          }
-          this.$emit("on-change", v.slice(0, this.limit));
-          if (init) {
-            this.$emit("input", v.slice(0, this.limit));
-          }
           this.$Message.warning("最多只能上传" + this.limit + "张图片");
-        } else {
-          v.forEach(e => {
-            let item = {
-              status: "finished",
-              ...e
-            };
-            this.uploadList.push(item);
+        }
+        list.forEach((e) => {
+          this.uploadList.push({
+            status: "finished",
+            ...(typeof e === "string" ? { url: e } : e),
           });
-          this.$emit("on-change", v);
+        });
+        if (init) {
+          this.emitValue(list);
+        } else {
+          this.$emit("on-change", list);
         }
       }
-    }
+    },
   },
   watch: {
+    modelValue(val) {
+      this.setData(val);
+    },
     value(val) {
       this.setData(val);
-    }
+    },
   },
   mounted() {
     this.init();
-  }
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-.upload-pic-thumb{
+.upload-pic-thumb {
   display: flex;
 }
 .upload-list {
@@ -264,7 +235,8 @@ export default {
 }
 .upload-list img {
   width: 100%;
-  height: -webkit-fill-available;
+  height: 100%;
+  object-fit: cover;
 }
 .upload-list-cover {
   display: none;
@@ -274,15 +246,17 @@ export default {
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, 0.6);
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
 }
 .upload-list:hover .upload-list-cover {
-  display: block;
+  display: flex;
 }
-.upload-list-cover i {
+.action-icon {
   color: #fff;
   font-size: 20px;
   cursor: pointer;
-  margin: 0 2px;
 }
 .list-group {
   display: inline-block;
@@ -291,4 +265,12 @@ export default {
   opacity: 0.5;
   background: #c8ebfb;
 }
+.upload-trigger {
+  width: 58px;
+  height: 58px;
+  line-height: 58px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>
diff --git a/manager/src/components/map/index.vue b/manager/src/components/map/index.vue
index fa3425b7..32c04a2f 100644
--- a/manager/src/components/map/index.vue
+++ b/manager/src/components/map/index.vue
@@ -5,7 +5,7 @@
     <div id="map-container"></div>
 
     <div class="search-con">
-      <Input placeholder="输入关键字搜索" id="input-map" v-model="mapSearch" />
+      <el-input id="input-map" v-model="mapSearch" placeholder="输入关键字搜索" clearable />
       <ul>
         <li v-for="(tip, index) in tips" :key="index" @click="selectAddr(tip.location)">
           <p>{{ tip.name }}</p>
@@ -13,9 +13,8 @@
         </li>
       </ul>
     </div>
-    <div slot="footer" class="footer">
-
-      <Button type="primary" :loading="loading" @click="ok">确定</Button>
+    <div class="footer">
+      <el-button type="primary" :loading="loading" @click="ok">确定</el-button>
     </div>
 
   </div>
diff --git a/manager/src/components/map/multiple-map.vue b/manager/src/components/map/multiple-map.vue
index a3d34b75..cac52e13 100644
--- a/manager/src/components/map/multiple-map.vue
+++ b/manager/src/components/map/multiple-map.vue
@@ -1,38 +1,50 @@
 <template>
-  <Modal width="800" footer-hide v-model="enableMap">
-    <RadioGroup @on-change="changeMap" v-model="mapDefault" type="button">
-      <Radio label="select">级联选择</Radio>
-      <Radio label="map" v-if="aMapSwitch">高德地图</Radio>
-    </RadioGroup>
+  <el-dialog v-model="enableMap" width="800px" :show-close="true" destroy-on-close>
+    <el-radio-group v-model="mapDefault" @change="changeMap">
+      <el-radio-button value="select">级联选择</el-radio-button>
+      <el-radio-button v-if="aMapSwitch" value="map">高德地图</el-radio-button>
+    </el-radio-group>
     <div>
       <div v-if="mapDefault === 'select'">
         <div class="selector">
-          <div class="selector-item" v-for="(plant, plantIndex) in Object.keys(data)" :key="plantIndex">
-            <div :class="{ 'active': chiosend[plantIndex].id == item.id }" v-for="(item, index) in data[plant]"
+          <div
+            v-for="(plant, plantIndex) in Object.keys(data)"
+            :key="plantIndex"
+            class="selector-item"
+          >
+            <div
+              v-for="(item, index) in data[plant]"
               :key="index"
-              @click="init(item, plantIndex != Object.keys(data).length - 1 ? Object.keys(data)[plantIndex + 1] : 0, plantIndex)"
-              class="map-item">
+              :class="{ active: chiosend[plantIndex]?.id == item.id }"
+              class="map-item"
+              @click="
+                init(
+                  item,
+                  plantIndex != Object.keys(data).length - 1
+                    ? Object.keys(data)[plantIndex + 1]
+                    : 0,
+                  plantIndex
+                )
+              "
+            >
               {{ item.name }}
             </div>
           </div>
-
         </div>
         <div class="footer">
-          <Button type="primary" @click="finished">确定</Button>
+          <el-button type="primary" @click="finished">确定</el-button>
         </div>
       </div>
       <mapping v-if="mapDefault === 'map'" ref="map" @getAddress="getAddress" />
-
     </div>
-
-
-  </Modal>
+  </el-dialog>
 </template>
 
 <script>
-import { aMapSwitch } from '@/config/index'
+import { aMapSwitch } from "@/config/index";
 import mapping from "@/components/map/index.vue";
 import * as API_Setup from "@/api/common.js";
+
 export default {
   components: { mapping },
   data() {
@@ -41,87 +53,76 @@ export default {
       enableMap: false,
       mapDefault: "select",
       data: {
-        province: [], //省
-        city: [], //市
-        area: [], //区
-        street: [], //街道
+        province: [],
+        city: [],
+        area: [],
+        street: [],
       },
       chiosend: [],
-
     };
   },
   mounted() {
-
     this.chiosend = new Array(4).fill("");
-
   },
   methods: {
     open() {
-      this.enableMap = true
-      this.init({ id: 0 }, 'province');
+      this.enableMap = true;
+      this.init({ id: 0 }, "province");
     },
     changeMap(val) {
-      this.mapDefault = val
-
-
+      this.mapDefault = val;
     },
-    init(val, level = 'province', index) {
+    init(val, level = "province", index) {
       if (level == 0) {
-        // 说明选择到了街道，将街道id存入数组
         this.chiosend.splice(3, 1, val);
-      }
-      else {
+      } else {
         API_Setup.getChildRegion(val.id).then((res) => {
           if (res.result.length && val.id !== 0) {
-            this.chiosend[index] = val
-          }
-          else if(!res.result.length){
-            this.chiosend[index] = val
+            this.chiosend[index] = val;
+          } else if (!res.result.length) {
+            this.chiosend[index] = val;
           }
           this.data[level] = res.result;
-          if (level == 'city') {
-            this.data.area = []
-            this.data.street = []
-            this.chiosend.splice(1, 3, "","","");
+          if (level == "city") {
+            this.data.area = [];
+            this.data.street = [];
+            this.chiosend.splice(1, 3, "", "", "");
           }
-          if (level == 'area') {
-            this.data.street = []
-            this.chiosend.splice(2, 2, "","");
+          if (level == "area") {
+            this.data.street = [];
+            this.chiosend.splice(2, 2, "", "");
           }
-          if (level == 'street') {
+          if (level == "street") {
             this.chiosend.splice(3, 1, "");
           }
         });
       }
     },
     getAddress(center) {
-      this.$emit('callback', {
+      this.$emit("callback", {
         type: this.mapDefault,
-        data: center
-      })
+        data: center,
+      });
       this.enableMap = false;
     },
-    // 选择完成
     finished() {
-      if(!this.chiosend[0]){
-        this.$Message.error("请选择地址")
-        return
+      if (!this.chiosend[0]) {
+        this.$Message.error("请选择地址");
+        return;
       }
-      const params = this.chiosend.filter((item) => item!=="" && item.value !== "");
+      const params = this.chiosend.filter((item) => item !== "" && item.value !== "");
       this.enableMap = false;
-      this.$emit('callback', {
+      this.$emit("callback", {
         type: this.mapDefault,
-        data: params
-      })
+        data: params,
+      });
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
 .selector {
-
-
   height: 400px;
   padding: 10px 0;
   display: flex;
diff --git a/manager/src/components/price-color-scheme.vue b/manager/src/components/price-color-scheme.vue
new file mode 100644
index 00000000..e30d1524
--- /dev/null
+++ b/manager/src/components/price-color-scheme.vue
@@ -0,0 +1,58 @@
+<template>
+  <span :style="priceStyle">
+    {{ dot }}{{ displayText }}
+    <slot />
+  </span>
+</template>
+
+<script>
+import { unitPrice } from "@/utils/filters";
+
+export default {
+  name: "priceColorScheme",
+  props: {
+    value: {
+      default: 0,
+      validator(val) {
+        return (
+          val === null ||
+          val === undefined ||
+          typeof val === "number" ||
+          typeof val === "string"
+        );
+      },
+    },
+    unit: {
+      type: String,
+      default: "￥",
+    },
+    dot: {
+      type: String,
+      default: "",
+    },
+    color: {
+      type: String,
+      default: "",
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    displayText() {
+      const val = this.value;
+      if (val === null || val === undefined || val === "" || val === "null") {
+        return `${this.unit || "￥"}0.00`;
+      }
+      return unitPrice(val, this.unit);
+    },
+    priceStyle() {
+      const resolvedColor = this.color || this.$mainColor || "";
+      return resolvedColor
+        ? { color: resolvedColor, ...this.customStyle }
+        : { ...this.customStyle };
+    },
+  },
+};
+</script>
diff --git a/manager/src/components/region.vue b/manager/src/components/region.vue
index 41851a27..efec77c3 100644
--- a/manager/src/components/region.vue
+++ b/manager/src/components/region.vue
@@ -1,182 +1,149 @@
 <template>
   <div>
-    <Cascader
-      :data="data"
-      :load-data="loadData"
+    <el-cascader
       v-model="addr"
+      :options="data"
+      :props="cascaderProps"
       placeholder="请选择地址"
-      @on-change="change"
       style="width: 350px"
-    ></Cascader>
+      @change="change"
+    />
   </div>
 </template>
 <script>
-import {getChildRegion} from '@/api/common.js';
+import { getChildRegion } from "@/api/common.js";
+
 export default {
-  data () {
+  props: ["addressId"],
+  data() {
     return {
-      data: [], // 地区数据
-      addr: [] // 已选数据
+      data: [],
+      addr: [],
     };
   },
-  props: ['addressId'],
-  mounted () {},
+  computed: {
+    cascaderProps() {
+      return {
+        value: "value",
+        label: "label",
+        lazy: true,
+        lazyLoad: this.loadData,
+      };
+    },
+  },
   methods: {
-    change (val, selectedData) { // 选择地区
-      /**
-       * @returns [regionId,region]
-       */
-      this.$emit('selected', [
-        val,
-        selectedData[selectedData.length - 1].__label.split('/')
-      ]);
+    change(val) {
+      if (!val || !val.length) {
+        this.$emit("selected", [[], []]);
+        return;
+      }
+      const labels = this.resolveLabels(val);
+      this.$emit("selected", [val, labels]);
     },
-    loadData (item, callback) { // 加载数据
-      item.loading = true;
-      getChildRegion(item.value).then((res) => {
-        if (res.result.length <= 0) {
-          item.loading = false;
-        } else {
-          res.result.forEach((child) => {
-            item.loading = false;
+    resolveLabels(values) {
+      const labels = [];
+      let options = this.data;
+      for (const v of values) {
+        const node = options.find((item) => item.value === v);
+        if (!node) break;
+        labels.push(node.label);
+        options = node.children || [];
+      }
+      return labels;
+    },
+    loadData(node, resolve) {
+      const parentId = node.level === 0 ? 0 : node.value;
+      getChildRegion(parentId).then((res) => {
+        if (!res.result || res.result.length <= 0) {
+          resolve([]);
+          return;
+        }
+        const nodes = res.result.map((child) => {
+          const isLeaf =
+            child.level === "street" ||
+            node.label === "香港特别行政区" ||
+            child.name === "台湾省";
+          return {
+            value: child.id,
+            label: child.name,
+            leaf: isLeaf,
+          };
+        });
+        resolve(nodes);
+      });
+    },
+    async init() {
+      const data = await getChildRegion(0);
+      this.data = data.result.map((item) => ({
+        value: item.id,
+        label: item.name,
+        leaf: item.name === "台湾省",
+      }));
+    },
+    async reviewData() {
+      const addr = JSON.parse(JSON.stringify(this.addressId.split(",")));
+      const length = addr.length;
+      const root = await getChildRegion(0);
+      const arr0 = root.result.map((item) => ({
+        value: item.id,
+        label: item.name,
+        leaf: item.name === "台湾省",
+        children: [],
+      }));
 
-            let data = {
-              value: child.id,
-              label: child.name,
-              loading: false,
-              children: []
-            };
-
-            if (child.level === 'street' || item.label === '香港特别行政区') {
-              item.children.push({
-                value: child.id,
-                label: child.name
-              });
-            } else {
-              item.children.push(data);
-            }
-          });
-          callback();
-        }
-      });
-    },
-    async init () { // 初始化地图数据
-      let data = await getChildRegion(0);
-      let arr = [];
-      data.result.forEach((item) => {
-        let obj;
-        // 台湾省做处理
-        if (item.name === '台湾省') {
-          obj = {
-            value: item.id,
-            label: item.name
-          };
-        } else {
-          obj = {
-            value: item.id,
-            label: item.name,
-            loading: false,
-            children: []
-          };
-        }
-        arr.push(obj);
-      });
-      this.data = arr;
-    },
-    async reviewData () {
-      // 数据回显
-      let addr = JSON.parse(JSON.stringify(this.addressId.split(',')));
-      let length = addr.length;
-      let data = await getChildRegion(0);
-      let arr0 = [];
-      let arr1 = [];
-      let arr2 = [];
-      // 第一级数据
-      data.result.forEach((item) => {
-        let obj;
-        // 台湾省做处理
-        if (item.name === '台湾省') {
-          obj = {
-            value: item.id,
-            label: item.name
-          };
-        } else {
-          obj = {
-            value: item.id,
-            label: item.name,
-            loading: false,
-            children: []
-          };
-        }
-        arr0.push(obj);
-      });
-      // 根据选择的数据来加载数据列表
       if (length > 0) {
-        let children = await getChildRegion(addr[0]);
-        children = this.handleData(children.result);
+        const children = await getChildRegion(addr[0]);
+        const arr1 = this.handleData(children.result);
         arr0.forEach((e) => {
           if (e.value === addr[0]) {
-            e.children = arr1 = children;
+            e.children = arr1;
           }
         });
       }
       if (length > 1) {
-        let children = await getChildRegion(addr[1]);
-        children = this.handleData(children.result);
+        let arr1 = arr0.find((e) => e.value === addr[0])?.children || [];
+        const children = await getChildRegion(addr[1]);
+        const arr2 = this.handleData(children.result);
         arr1.forEach((e) => {
           if (e.value === addr[1]) {
-            e.children = arr2 = children;
+            e.children = arr2;
           }
         });
       }
       if (length > 2) {
-        let children = await getChildRegion(addr[2]);
-        children = this.handleData(children.result);
+        const arr1 = arr0.find((e) => e.value === addr[0])?.children || [];
+        const arr2 = arr1.find((e) => e.value === addr[1])?.children || [];
+        const children = await getChildRegion(addr[2]);
+        const arr3 = this.handleData(children.result);
         arr2.forEach((e) => {
           if (e.value === addr[2]) {
-            e.children = children;
+            e.children = arr3;
           }
         });
       }
       this.data = arr0;
       this.addr = addr;
     },
-    handleData (data) {
-      // 处理接口数据
-      let item = [];
-      data.forEach((child) => {
-        let obj = {
-          value: child.id,
-          label: child.name,
-          loading: false,
-          children: []
-        };
-
-        if (child.level === 'street' || item.label === '香港特别行政区') {
-          item.push({
-            value: child.id,
-            label: child.name
-          });
-        } else {
-          item.push(obj);
-        }
-      });
-      return item;
-    }
+    handleData(data) {
+      return data.map((child) => ({
+        value: child.id,
+        label: child.name,
+        leaf: child.level === "street",
+        children: child.level === "street" ? undefined : [],
+      }));
+    },
   },
   watch: {
     addressId: {
-      handler: function (v) {
+      handler(v) {
         if (v) {
           this.reviewData();
         } else {
           this.init();
         }
       },
-      immediate: true
-    }
-  }
+      immediate: true,
+    },
+  },
 };
 </script>
-<style scoped lang="scss">
-</style>
diff --git a/manager/src/components/tree-table/Table/Table.vue b/manager/src/components/tree-table/Table/Table.vue
index 2f6c4b6b..8fd408e0 100644
--- a/manager/src/components/tree-table/Table/Table.vue
+++ b/manager/src/components/tree-table/Table/Table.vue
@@ -2,8 +2,8 @@
   <div
     v-if="columns.length > 0"
     ref="table"
+    v-loading="loading"
     :class="[prefixCls, `${prefixCls}-${size}`, tableClass]">
-    <Spin fix v-if="loading"></Spin>
     <div
       v-show="showHeader"
       ref="header-wrapper"
@@ -297,6 +297,11 @@ export default {
     cellStyle: [Object, Function],
     expandKey: String
   },
+  provide() {
+    return {
+      treeTableRoot: this,
+    };
+  },
   data() {
     return {
       computedWidth: "",
@@ -387,7 +392,7 @@ export default {
     this.measure();
     window.addEventListener("resize", this.measure);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("resize", this.measure);
   }
 };
diff --git a/manager/src/components/tree-table/Table/TableBody.js b/manager/src/components/tree-table/Table/TableBody.js
index a14abac7..d659d870 100644
--- a/manager/src/components/tree-table/Table/TableBody.js
+++ b/manager/src/components/tree-table/Table/TableBody.js
@@ -1,13 +1,13 @@
 import Checkbox from '../Checkbox/Checkbox'; // eslint-disable-line
 // import Radio from '../Radio/Radio'; // eslint-disable-line
 import { mixins } from './utils';
-import { Radio } from 'view-design'; // eslint-disable-line
-
 /* eslint-disable no-underscore-dangle */
 export default {
   name: 'TreeTable__body',
   mixins: [mixins],
-  components: { Radio },
+  inject: {
+    treeTableRoot: { default: null },
+  },
   data() {
     return {
       radioSelectedIndex: -1,
@@ -15,6 +15,12 @@ export default {
   },
   computed: {
     table() {
+      if (this.treeTableRoot) return this.treeTableRoot;
+      let parent = this.$parent;
+      while (parent) {
+        if (parent.$options && parent.$options.name === 'TreeTable') return parent;
+        parent = parent.$parent;
+      }
       return this.$parent;
     },
   },
@@ -186,8 +192,21 @@ export default {
       return classList.join(' ');
     }
 
+    // Vue 3：scoped slot 合并到 $slots
+    function renderTemplateSlot(table, slotName, scope) {
+      if (!table || !slotName) return '';
+      const slots = table.$slots || {};
+      let slot = slots[slotName];
+      if (!slot && table.$scopedSlots && table.$scopedSlots[slotName]) {
+        slot = table.$scopedSlots[slotName];
+      }
+      if (!slot) return '';
+      return slot(scope);
+    }
+
     // 根据type渲染单元格Cell
     function renderCell(row, rowIndex, column, columnIndex) {
+      if (!row || !column) return '';
       // ExpandType
       if (this.isExpandCell(this.table, columnIndex)) {
         return <i class='zk-icon zk-icon-angle-right'></i>;
@@ -226,7 +245,15 @@ export default {
           //   onOn-change={isChecked => this.handleEvent(null, 'checkbox', { row, rowIndex, column, columnIndex }, { isChecked })}>
           // </Checkbox>;
         } else {
-          res = <Radio value={this.radioSelectedIndex === rowIndex} on-on-change={() => this.handleEvent(null, 'radio', { row, rowIndex, column, columnIndex })}></Radio>;
+          res = (
+            <input
+              type="radio"
+              checked={this.radioSelectedIndex === rowIndex}
+              onChange={() =>
+                this.handleEvent(null, 'radio', { row, rowIndex, column, columnIndex })
+              }
+            />
+          );
         }
         return res;
       }
@@ -254,9 +281,12 @@ export default {
       if (column.type === undefined || column.type === 'custom') {
         return row[column.key];
       } else if (column.type === 'template') {
-        return this.table.$scopedSlots[column.template]
-          ? this.table.$scopedSlots[column.template]({ row, rowIndex, column, columnIndex })
-          : '';
+        return renderTemplateSlot.call(this, this.table, column.template, {
+          row,
+          rowIndex,
+          column,
+          columnIndex,
+        });
       }
       return '';
     }
@@ -305,10 +335,7 @@ export default {
                   <td
                     class={`${this.prefixCls}--expand-content`}
                     colspan={this.table.tableColumns.length}>
-                    {this.table.$scopedSlots.expand
-                      ? this.table.$scopedSlots.expand({ row, rowIndex })
-                      : ''
-                    }
+                    {renderTemplateSlot.call(this, this.table, 'expand', { row, rowIndex })}
                   </td>
                 </tr>,
               ])
diff --git a/manager/src/components/tree-table/Table/utils/scrollBarWidth.js b/manager/src/components/tree-table/Table/utils/scrollBarWidth.js
index 9bd201d4..9b8b2f78 100644
--- a/manager/src/components/tree-table/Table/utils/scrollBarWidth.js
+++ b/manager/src/components/tree-table/Table/utils/scrollBarWidth.js
@@ -1,23 +1,21 @@
-import Vue from 'vue';
-
 let scrollBarWidth;
 
-export default function () {
-  if (Vue.prototype.$isServer) return 0;
+export default function getScrollBarWidth() {
+  if (typeof document === "undefined") return 0;
   if (scrollBarWidth !== undefined) return scrollBarWidth;
 
-  const outer = document.createElement('div');
-  outer.style.visibility = 'hidden';
-  outer.style.width = '100px';
-  outer.style.position = 'absolute';
-  outer.style.top = '-9999px';
+  const outer = document.createElement("div");
+  outer.style.visibility = "hidden";
+  outer.style.width = "100px";
+  outer.style.position = "absolute";
+  outer.style.top = "-9999px";
   document.body.appendChild(outer);
 
   const widthNoScroll = outer.offsetWidth;
-  outer.style.overflow = 'scroll';
+  outer.style.overflow = "scroll";
 
-  const inner = document.createElement('div');
-  inner.style.width = '100%';
+  const inner = document.createElement("div");
+  inner.style.width = "100%";
   outer.appendChild(inner);
 
   const widthWithScroll = inner.offsetWidth;
diff --git a/manager/src/components/verify/index.vue b/manager/src/components/verify/index.vue
index 2cbb8824..2e4f1fcf 100644
--- a/manager/src/components/verify/index.vue
+++ b/manager/src/components/verify/index.vue
@@ -1,59 +1,81 @@
 <template>
-  <div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp" @click.stop>
-    <div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
-      <img :src="data.backImage" style="width:100%;height:100%" alt="">
-      <img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
-      <Icon type="md-refresh" class="refresh" @click="init" />
+  <div
+    class="verify-content"
+    v-if="show"
+    @mousemove="mouseMove"
+    @mouseup="mouseUp"
+    @click.stop
+  >
+    <div
+      class="imgBox"
+      :style="{
+        width: data.originalWidth + 'px',
+        height: data.originalHeight + 'px',
+      }"
+    >
+      <img :src="data.backImage" style="width: 100%; height: 100%" alt="" />
+      <img
+        class="slider"
+        :src="data.slidingImage"
+        :style="{ left: distance + 'px', top: data.randomY + 'px' }"
+        :width="data.sliderWidth"
+        :height="data.sliderHeight"
+        alt=""
+      />
+      <el-icon class="refresh" @click="init"><Refresh /></el-icon>
     </div>
-    <div class="handle" :style="{width:data.originalWidth+'px'}">
-      <span class="bgcolor" :style="{width:distance + 'px',background:bgColor}"></span>
-      <span class="swiper" :style="{left:distance + 'px'}" @mousedown="mouseDown">
-        <Icon type="md-arrow-round-forward" />
+    <div class="handle" :style="{ width: data.originalWidth + 'px' }">
+      <span
+        class="bgcolor"
+        :style="{ width: distance + 'px', background: bgColor }"
+      ></span>
+      <span class="swiper" :style="{ left: distance + 'px' }" @mousedown="mouseDown">
+        <el-icon><DArrowRight /></el-icon>
       </span>
-      <span class="text">{{verifyText}}</span>
+      <span class="text">{{ verifyText }}</span>
     </div>
   </div>
 </template>
+
 <script>
-import { getVerifyImg, postVerifyImg } from './verify.js';
+import { Refresh, DArrowRight } from "@element-plus/icons-vue";
+import { getVerifyImg, postVerifyImg } from "./verify.js";
+
 export default {
+  components: { Refresh, DArrowRight },
   props: {
-    // 传入数据，判断是登录、注册、修改密码
     verifyType: {
-      defalut: 'LOGIN',
-      type: String
-    }
+      default: "LOGIN",
+      type: String,
+    },
   },
-  data () {
+  data() {
     return {
-      show: false, // 验证码显隐
-      type: 'LOGIN', // 请求类型
-      data: { // 验证码数据
-        backImage: '',
-        slidingImage: '',
+      show: false,
+      type: "LOGIN",
+      data: {
+        backImage: "",
+        slidingImage: "",
         originalHeight: 150,
         originalWidth: 300,
         sliderWidth: 60,
-        sliderHeight: 60
+        sliderHeight: 60,
       },
-      distance: 0, // 拼图移动距离
-      flag: false, // 判断滑块是否按下
-      downX: 0, // 鼠标按下位置
-      bgColor: '#04ad11', // 滑动背景颜色
-      verifyText: '拖动滑块解锁' // 文字提示
+      distance: 0,
+      flag: false,
+      downX: 0,
+      bgColor: "#04ad11",
+      verifyText: "拖动滑块解锁",
     };
   },
   methods: {
-    // 鼠标按下事件，开始拖动滑块
-    mouseDown (e) {
+    mouseDown(e) {
       this.downX = e.clientX;
       this.flag = true;
     },
-    // 鼠标移动事件，计算距离
-    mouseMove (e) {
+    mouseMove(e) {
       if (this.flag) {
-        let offset = e.clientX - this.downX;
-
+        const offset = e.clientX - this.downX;
         if (offset > this.data.originalWidth - 43) {
           this.distance = this.data.originalWidth - 43;
         } else if (offset < 0) {
@@ -63,65 +85,63 @@ export default {
         }
       }
     },
-    // 鼠标抬起事件，验证是否正确
-    mouseUp () {
+    mouseUp() {
       if (!this.flag) return false;
       this.flag = false;
-      let params = {
+      const params = {
         verificationEnums: this.type,
-        xPos: this.distance
+        xPos: this.distance,
       };
-      postVerifyImg(params).then(res => {
-        if (res.success) {
-          if (res.result) {
-            this.bgColor = 'green';
-            this.verifyText = '解锁成功';
-            this.$emit('change', { status: true, distance: this.distance });
+      postVerifyImg(params)
+        .then((res) => {
+          if (res.success) {
+            if (res.result) {
+              this.bgColor = "green";
+              this.verifyText = "解锁成功";
+              this.$emit("change", { status: true, distance: this.distance });
+            } else {
+              this.bgColor = "red";
+              this.verifyText = "解锁失败";
+              setTimeout(() => this.init(), 1000);
+              this.$emit("change", { status: false, distance: this.distance });
+            }
           } else {
-            this.bgColor = 'red';
-            this.verifyText = '解锁失败';
-            let that = this;
-            setTimeout(() => {
-              that.init();
-            }, 1000);
-            this.$emit('change', { status: false, distance: this.distance });
+            this.init();
           }
-        } else {
-          this.init()
-        }
-        
-      }).catch(()=>{
-        this.init()
-      });
+        })
+        .catch(() => {
+          this.init();
+        });
     },
-    init () { // 初始化数据
+    init() {
       this.flag = false;
       this.downX = 0;
       this.distance = 0;
-      this.bgColor = '#04ad11';
-      this.verifyText = '拖动滑块解锁';
-      getVerifyImg(this.type).then(res => {
+      this.bgColor = "#04ad11";
+      this.verifyText = "拖动滑块解锁";
+      getVerifyImg(this.type).then((res) => {
         if (res.result) {
           this.data = res.result;
           this.show = true;
         } else {
-          this.$Message.warning('请求失败请重试！')
+          this.$Message.warning("请求失败请重试！");
         }
       });
-    }
+    },
   },
   watch: {
     verifyType: {
       immediate: true,
-      handler: function (v) {
+      handler(v) {
         this.type = v;
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>
+
 <style lang="scss" scoped>
-.verify-content{
+.verify-content {
   padding: 10px;
   background: #fff;
   border: 1px solid #eee;
@@ -174,9 +194,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    .ivu-icon {
-      font-size: 20px;
-    }
+    font-size: 20px;
   }
 
   .text {
diff --git a/manager/src/libs/axios.js b/manager/src/libs/axios.js
index 79e7e5ff..ce08d01c 100644
--- a/manager/src/libs/axios.js
+++ b/manager/src/libs/axios.js
@@ -1,7 +1,7 @@
 import axios from "axios";
 import { getStore, setStore } from "./storage.js";
 import { router } from "../router/index";
-import { Message } from "view-design";
+import { Message } from "@/utils/message";
 import Cookies from "js-cookie";
 import { handleRefreshToken } from "../api/index";
 import {v4 as uuidv4} from 'uuid';
diff --git a/manager/src/libs/util.js b/manager/src/libs/util.js
index 142e9f1a..faf1b574 100644
--- a/manager/src/libs/util.js
+++ b/manager/src/libs/util.js
@@ -1,10 +1,130 @@
 import { getCurrentPermissionList } from "@/api/index";
 import lazyLoading from "./lazyLoading.js";
-
+import { router } from "@/router/index";
 import Cookies from "js-cookie";
 
 let util = {};
 
+/** 动态菜单路由 name，用于登出或重新注册时清理 */
+util.dynamicRouteNames = [];
+
+util.clearDynamicRoutes = function () {
+  util.dynamicRouteNames.forEach((name) => {
+    if (router.hasRoute(name)) {
+      router.removeRoute(name);
+    }
+  });
+  util.dynamicRouteNames = [];
+};
+
+util.collectLeafRoutes = function (routes, result = [], parentPath = "") {
+  routes.forEach((route) => {
+    let segment = route.path != null ? String(route.path) : "";
+    segment = segment.replace(/^\//, "");
+    const fullPath = [parentPath, segment].filter(Boolean).join("/");
+    const hasChildren = route.children && route.children.length > 0;
+
+    if (hasChildren) {
+      util.collectLeafRoutes(route.children, result, fullPath);
+    } else if (
+      route.name &&
+      route.component &&
+      !String(route.name).endsWith("__layout")
+    ) {
+      result.push({
+        path: fullPath || segment || route.name,
+        name: route.name,
+        component: route.component,
+        meta: route.meta || {},
+      });
+    }
+  });
+  return result;
+};
+
+/** Vue Router 4：动态路由必须挂到 otherRouter 下，且刷新/热更新后需重新注册 */
+util.registerDynamicRoutes = function (menuData, options = {}) {
+  const { rematch = true } = options;
+  const pendingPath = router.currentRoute.value.fullPath;
+  const pendingUnmatched = router.currentRoute.value.matched.length === 0;
+
+  util.clearDynamicRoutes();
+  const constRoutes = [];
+  util.initAllMenuData(constRoutes, menuData);
+
+  const leaves = [];
+  constRoutes.forEach((top) => {
+    const base = (top.path || "").replace(/^\//, "");
+    if (top.children && top.children.length) {
+      util.collectLeafRoutes(top.children, leaves, base);
+    } else if (
+      top.name &&
+      top.component &&
+      !String(top.name).endsWith("__layout")
+    ) {
+      leaves.push({
+        path: base || top.name,
+        name: top.name,
+        component: top.component,
+        meta: top.meta || {},
+      });
+    }
+  });
+
+  leaves.forEach((leaf) => {
+    const path = (leaf.path || leaf.name || "").replace(/^\//, "");
+    if (!router.hasRoute(leaf.name)) {
+      router.addRoute("otherRouter", {
+        path,
+        name: leaf.name,
+        component: leaf.component,
+        meta: leaf.meta,
+      });
+      util.dynamicRouteNames.push(leaf.name);
+    }
+  });
+
+  if (!router.hasRoute("error-404")) {
+    router.addRoute({
+      path: "/:pathMatch(.*)*",
+      name: "error-404",
+      component: lazyLoading("error-page/404"),
+      meta: { title: "404-页面不存在" },
+    });
+    util.dynamicRouteNames.push("error-404");
+  }
+
+  if (
+    rematch &&
+    pendingUnmatched &&
+    pendingPath &&
+    pendingPath !== "/login"
+  ) {
+    const resolved = router.resolve(pendingPath);
+    if (resolved.matched.length > 0) {
+      router.replace(pendingPath).catch(() => {});
+    }
+  }
+};
+
+/** 从 localStorage 恢复动态路由（刷新深链前必须先注册，避免 /member/xxx 无匹配） */
+util.bootstrapDynamicRoutesFromCache = function () {
+  if (!Cookies.get("userInfoManager")) {
+    return false;
+  }
+  try {
+    const raw = window.localStorage.getItem("menuData");
+    if (!raw) {
+      return false;
+    }
+    util.registerDynamicRoutes(JSON.parse(raw), { rematch: false });
+    return true;
+  } catch (e) {
+    console.warn("[router] menuData parse failed", e);
+    return false;
+  }
+};
+
 util.title = function(title) {
   title = title || "运营后台";
   window.document.title = title;
@@ -94,7 +214,7 @@ util.initRouter = function(vm) {
   // 404路由需要和动态路由一起加载
   const otherRouter = [
     {
-      path: "/*",
+      path: "/:pathMatch(.*)*",
       name: "error-404",
       meta: {
         title: "404-页面不存在"
@@ -132,15 +252,11 @@ util.initRouter = function(vm) {
         return;
       }
       util.initAllMenuData(constRoutes, menuData);
-      util.initRouterNode(otherRoutes, otherRouter);
-      // 添加所有主界面路由
+      util.registerDynamicRoutes(menuData);
       vm.$store.commit(
         "updateAppRouter",
-        constRoutes.filter(item => item.children.length > 0)
+        constRoutes.filter((item) => item.children && item.children.length > 0)
       );
-      // 添加全局路由
-      vm.$store.commit("updateDefaultRouter", otherRoutes);
-      // 添加菜单路由
       util.initMenuData(vm, menuData);
       // 缓存数据 修改加载标识
       window.localStorage.setItem("menuData", JSON.stringify(menuData));
@@ -154,7 +270,7 @@ util.initRouter = function(vm) {
       return;
     }
     let menuData = JSON.parse(data);
-    // 添加菜单路由
+    util.registerDynamicRoutes(menuData);
     util.initMenuData(vm, menuData);
   }
 };
@@ -235,17 +351,27 @@ util.initRouterNode = function(routers, data) {
   // data为所有子菜单数据
 
   for (let item of data) {
-    let menu = Object.assign({}, item);
+    const menu = Object.assign({}, item);
+    const hasChildren = item.children && item.children.length > 0;
 
-    menu.component = lazyLoading(menu.frontRoute);
-
-    if (item.children && item.children.length > 0) {
+    if (hasChildren) {
       menu.children = [];
+      // Vue Router 4：父子路由 name 必须不同，后端菜单常出现同名父子节点
+      if (menu.name) {
+        menu.name = `${menu.name}__layout`;
+      }
       util.initRouterNode(menu.children, item.children);
+      // 分组节点通常无页面，仅在有 frontRoute 时挂载组件
+      if (menu.frontRoute) {
+        menu.component = lazyLoading(menu.frontRoute);
+      } else {
+        delete menu.component;
+      }
+    } else if (menu.frontRoute) {
+      menu.component = lazyLoading(menu.frontRoute);
     }
 
-    let meta = {};
-    // 给页面添加标题、父级菜单name（方便左侧菜单选中）
+    const meta = {};
     meta.title = menu.title ? menu.title + " - 运营后台" : null;
     meta.firstRouterName = item.firstRouterName;
     menu.meta = meta;
diff --git a/manager/src/locale/index.js b/manager/src/locale/index.js
index ea3e99f0..92866d37 100644
--- a/manager/src/locale/index.js
+++ b/manager/src/locale/index.js
@@ -1,28 +1,22 @@
-import Vue from 'vue';
-import VueI18n from 'vue-i18n';
-import zhLocale from './lang/zh-CN';
-import enLocale from './lang/en-US';
-import zhCnLocale from 'view-design/src/locale/lang/zh-CN';
-import enUsLocale from 'view-design/src/locale/lang/en-US';
+import { createI18n } from "vue-i18n";
+import zhLocale from "./lang/zh-CN";
+import enLocale from "./lang/en-US";
 
-Vue.use(VueI18n);
-
-// 根据浏览器信息自动设置语言
 const navLang = navigator.language;
-const localLang = (navLang == 'zh-CN' || navLang == 'en-US') ? navLang : false;
-const lang = window.localStorage.lang || localLang || 'zh-CN';
+const localLang = navLang === "zh-CN" || navLang === "en-US" ? navLang : false;
+const lang = window.localStorage.lang || localLang || "zh-CN";
 
-Vue.config.lang = lang;
-
-// 多语言配置 vue-i18n 6.x+
-Vue.locale = () => { };
 const messages = {
-    'zh-CN': Object.assign(zhCnLocale, zhLocale),
-    'en-US': Object.assign(enUsLocale, enLocale)
+  "zh-CN": zhLocale,
+  "en-US": enLocale,
 };
-const i18n = new VueI18n({
-    locale: lang,
-    messages
+
+const i18n = createI18n({
+  legacy: true,
+  globalInjection: true,
+  locale: lang,
+  fallbackLocale: "zh-CN",
+  messages,
 });
 
 export default i18n;
diff --git a/manager/src/main.js b/manager/src/main.js
index 04817844..21d54ab0 100644
--- a/manager/src/main.js
+++ b/manager/src/main.js
@@ -1,114 +1,88 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import ViewUI from 'view-design'
-// import 'view-design/dist/styles/iview.css'
-import './styles/theme.less';
+import { createApp } from "vue";
+import "core-js/stable";
+import "./styles/theme.less";
+import App from "./App.vue";
+import { router } from "./router/index";
+import store from "./store";
+import i18n from "@/locale";
+import { setupElementPlus } from "@/plugins/element";
+import { setupLegacyMessage } from "@/utils/message";
+import liliDialog from "@/components/lili-dialog";
+import PriceColorScheme from "@/components/price-color-scheme.vue";
+import { install as installVueQr } from "vue-qr";
+import {
+  getRequest,
+  postRequest,
+  putRequest,
+  deleteRequest,
+  importRequest,
+  uploadFileRequest,
+} from "@/libs/axios";
+import { setStore, getStore, removeStore } from "@/libs/storage";
+import util from "@/libs/util";
+import { md5 } from "@/utils/md5.js";
+import * as filters from "@/utils/filters";
 
-import "core-js/stable"
-// import "regenerator-runtime/runtime"
-import App from './App'
-import {router} from './router/index'
-import store from './store'
-import i18n from '@/locale'
+const { aMapSecurityJsCode, mainColor } = require("@/config");
 
-import {getRequest, postRequest, putRequest, deleteRequest, importRequest, uploadFileRequest} from '@/libs/axios'
-import {setStore, getStore, removeStore} from '@/libs/storage'
-import util from '@/libs/util'
-
-import * as filters from '@/utils/filters' // global filter
-import liliDialog from '@/components/lili-dialog'
-
-import {md5} from '@/utils/md5.js';
-
-// 打印
-import Print from 'vue-print-nb';
-
-Vue.use(Print);
-const {aMapSecurityJsCode, inputMaxLength,mainColor } = require("@/config");
-// 高德安全密钥
 if (aMapSecurityJsCode) {
   window._AMapSecurityConfig = {
     securityJsCode: aMapSecurityJsCode,
   };
 }
 
+const PC_URL = BASE.PC_URL;
+const WAP_URL = BASE.WAP_URL;
 
-Vue.config.devtools = true;
-Vue.config.productionTip = false
-const PC_URL = BASE.PC_URL; // 跳转买家端地址 pc端
-const WAP_URL = BASE.WAP_URL; // 跳转买家端地址 wap端
-Vue.prototype.linkTo = function (goodsId, skuId) {
-  // 跳转买家端商品
+// 刷新深链（如 /member/user-manage）前先从缓存注册动态路由
+util.bootstrapDynamicRoutesFromCache();
+
+const app = createApp(App);
+
+setupElementPlus(app);
+setupLegacyMessage(app);
+installVueQr(app);
+
+app.use(router);
+app.use(store);
+app.use(i18n);
+
+app.component("liliDialog", liliDialog);
+app.component("priceColorScheme", PriceColorScheme);
+
+app.config.globalProperties.getRequest = getRequest;
+app.config.globalProperties.postRequest = postRequest;
+app.config.globalProperties.putRequest = putRequest;
+app.config.globalProperties.deleteRequest = deleteRequest;
+app.config.globalProperties.importRequest = importRequest;
+app.config.globalProperties.uploadFileRequest = uploadFileRequest;
+app.config.globalProperties.setStore = setStore;
+app.config.globalProperties.getStore = getStore;
+app.config.globalProperties.removeStore = removeStore;
+app.config.globalProperties.$mainColor = mainColor;
+app.config.globalProperties.md5 = md5;
+app.config.globalProperties.$filters = filters;
+
+app.config.globalProperties.linkTo = function (goodsId, skuId) {
   let src;
   if (skuId) {
     src = `${PC_URL}/goodsDetail?skuId=${skuId}&goodsId=${goodsId}`;
   } else {
     src = `${PC_URL}/goodsDetail?goodsId=${goodsId}`;
   }
-
   window.open(src, "_blank");
 };
-Vue.prototype.wapLinkTo = function (goodsId, skuId) {
-  // app端二维码
+
+app.config.globalProperties.wapLinkTo = function (goodsId, skuId) {
   if (skuId) {
     return `${WAP_URL}/pages/product/goods?id=${skuId}&goodsId=${goodsId}`;
-  } else {
-    return `${WAP_URL}/pages/product/goods?goodsId=${goodsId}`;
   }
+  return `${WAP_URL}/pages/product/goods?goodsId=${goodsId}`;
 };
-// 引入价格格式化组件
-import priceColorScheme from 'price-color'
-Vue.use(priceColorScheme);
 
-const copyViewUi = {...ViewUI}
-copyViewUi.Input.props.maxlength.default = inputMaxLength // 挂载最大输入值
-Vue.use(copyViewUi, {
-  i18n: (key, value) => i18n.t(key, value),
+router.isReady().then(() => {
+  app.mount("#app");
 });
 
-Vue.component('liliDialog', liliDialog)
-
-
-
-// 挂载全局使用的方法
-Vue.prototype.getRequest = getRequest;
-Vue.prototype.postRequest = postRequest;
-Vue.prototype.putRequest = putRequest;
-Vue.prototype.deleteRequest = deleteRequest;
-Vue.prototype.importRequest = importRequest;
-Vue.prototype.uploadFileRequest = uploadFileRequest;
-Vue.prototype.setStore = setStore;
-Vue.prototype.getStore = getStore;
-Vue.prototype.removeStore = removeStore;
-Vue.prototype.$mainColor = mainColor;
-Vue.prototype.md5 = md5;
-
-Array.prototype.remove = function (from, to) {
-  var rest = this.slice((to || from) + 1 || this.length);
-  this.length = from < 0 ? this.length + from : from;
-  return this.push.apply(this, rest);
-};
-
-Object.keys(filters).forEach(key => {
-  Vue.filter(key, filters[key])
-})
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  router,
-  store,
-  i18n,
-  render: h => h(App),
-  data: {
-    currentPageName: ''
-  },
-  mounted() {
-    // 初始化菜单
-    util.initRouter(this);
-    this.currentPageName = this.$route.name;
-    // 显示打开的页面的列表
-    this.$store.commit('setOpenedList');
-    this.$store.commit('initCachePage');
-  }
-})
+// 登录后由 App.vue 触发 initRouter 拉取/更新菜单
+export { app, util };
diff --git a/manager/src/plugins/element.js b/manager/src/plugins/element.js
new file mode 100644
index 00000000..572763a6
--- /dev/null
+++ b/manager/src/plugins/element.js
@@ -0,0 +1,11 @@
+import ElementPlus from "element-plus";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+import "element-plus/dist/index.css";
+import "@/styles/element.scss";
+
+export function setupElementPlus(app) {
+  app.use(ElementPlus, {
+    locale: zhCn,
+    size: "default",
+  });
+}
diff --git a/manager/src/router/index.js b/manager/src/router/index.js
index 3d4484c3..60d22ff1 100644
--- a/manager/src/router/index.js
+++ b/manager/src/router/index.js
@@ -1,56 +1,46 @@
-import Vue from 'vue';
-import ViewUI from 'view-design';
-import Util from '../libs/util';
-import VueRouter from 'vue-router';
-import Cookies from 'js-cookie';
-import {routers} from './router';
+import { createRouter, createWebHistory } from "vue-router";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import Util from "../libs/util";
+import Cookies from "js-cookie";
+import store from "@/store";
+import { routers } from "./router";
 
-Vue.use(VueRouter);
+NProgress.configure({ showSpinner: false });
 
-// 路由配置
-const RouterConfig = {
-  mode: 'history',
-  routes: routers
-};
-
-/**
- * 解决重复点击菜单会控制台报错bug
- */
-const routerPush = VueRouter.prototype.push
-VueRouter.prototype.push = function push(location) {
-  return routerPush.call(this, location).catch(error=> error)
-}
-
-export const router = new VueRouter(RouterConfig);
+export const router = createRouter({
+  history: createWebHistory(),
+  routes: routers,
+});
 
 router.beforeEach((to, from, next) => {
-  ViewUI.LoadingBar.start();
+  NProgress.start();
   Util.title(to.meta.title);
 
-  next();
-
   const name = to.name;
+  const hasToken = Cookies.get("userInfoManager");
 
-  if (!Cookies.get('userInfoManager') && name !== 'login') {
-    // 判断是否已经登录且前往的页面不是登录页
-    next({
-      name: 'login'
-    });
-  } else if (Cookies.get('userInfoManager') && name === 'login') {
-    // 判断是否已经登录且前往的是登录页
-    Util.title();
-    next({
-      name: 'home_index'
-    });
-  } else {
-    Util.toDefaultPage([...routers], name, router, next);
+  if (!hasToken && name !== "login") {
+    next({ name: "login" });
+    return;
   }
+
+  if (hasToken && name === "login") {
+    Util.title();
+    next({ name: "home_index" });
+    return;
+  }
+
+  if (hasToken) {
+    Util.toDefaultPage([...routers], name, router, next);
+    return;
+  }
+
+  next();
 });
 
 router.afterEach((to) => {
-  Util.openNewPage(router.app, to.name, to.params, to.query);
-  ViewUI.LoadingBar.finish();
+  Util.openNewPage({ $store: store }, to.name, to.params, to.query);
+  NProgress.done();
   window.scrollTo(0, 0);
 });
-
-
diff --git a/manager/src/store/index.js b/manager/src/store/index.js
index ff09c5a2..2aeef30a 100644
--- a/manager/src/store/index.js
+++ b/manager/src/store/index.js
@@ -1,30 +1,23 @@
-import Vue from "vue";
-import Vuex from "vuex";
-
+import { createStore } from "vuex";
 import app from "./modules/app";
-import setting from './modules/setting';
+import setting from "./modules/setting";
 import user from "./modules/user";
 import dict from "./modules/dict";
 
-Vue.use(Vuex);
-
-const store = new Vuex.Store({
+const store = createStore({
   state: {
-    // 状态
-    openStyleStore: "", // 移动端楼层装修中选择风格存储
-    openStoreId:"",
-    notices: "" //通知提示信息
-  },
-  mutations: {
-    // 改变方法
+    openStyleStore: "",
+    openStoreId: "",
+    notices: "",
   },
+  mutations: {},
   actions: {},
   modules: {
     app,
     user,
     setting,
-    dict
-  }
+    dict,
+  },
 });
 
 export default store;
diff --git a/manager/src/store/modules/app.js b/manager/src/store/modules/app.js
index 03f81e98..a75d5f3e 100644
--- a/manager/src/store/modules/app.js
+++ b/manager/src/store/modules/app.js
@@ -5,7 +5,7 @@ import {
   router
 } from '@/router/index';
 import Util from '@/libs/util';
-import Vue from 'vue';
+import i18n from '@/locale';
 
 const app = {
   state: {
@@ -34,11 +34,10 @@ const app = {
     // 动态添加主界面路由，需要缓存
     updateAppRouter(state, routes) {
       state.routers.push(...routes);
-      router.addRoutes(routes);
+      // 实际 addRoute 在 util.registerDynamicRoutes 中完成
     },
-    // 动态添加全局路由404、500等页面，不需要缓存
     updateDefaultRouter(state, routes) {
-      router.addRoutes(routes);
+      // 兼容旧调用，404 由 registerDynamicRoutes 注册
     },
     setAdded(state, v) {
       state.added = v;
@@ -122,7 +121,7 @@ const app = {
     switchLang(state, lang) {
       state.lang = lang;
       localStorage.lang = lang;
-      Vue.config.lang = lang;
+      i18n.global.locale = lang;
     },
     setMessageCount(state, count) {
       state.messageCount = count;
diff --git a/manager/src/store/modules/user.js b/manager/src/store/modules/user.js
index 3ea81fe6..e1e2f808 100644
--- a/manager/src/store/modules/user.js
+++ b/manager/src/store/modules/user.js
@@ -1,11 +1,12 @@
 import Cookies from 'js-cookie';
+import util from '@/libs/util';
 
 const user = {
     state: {},
     mutations: {
         logout () {
+            util.clearDynamicRoutes();
             Cookies.remove('userInfoManager');
-            // 清空打开的页面等数据
             localStorage.clear();
         }
     }
diff --git a/manager/src/styles/common.scss b/manager/src/styles/common.scss
index 52321349..4296a680 100644
--- a/manager/src/styles/common.scss
+++ b/manager/src/styles/common.scss
@@ -124,5 +124,50 @@ $bg_color: #f1f6fa;
 }
 
 
+// table-common（原 @import 合并，避免 Sass @import 弃用警告）
+.search {
+  .operation {
+    margin-bottom: 2vh;
+  }
+  .select-clear {
+    margin-left: 10px;
+  }
+}
+.search-input {
+  width: 270px;
+  margin-right: 20px;
+}
+.search-form {
+  width: 100% !important;
+  display: flex;
+  align-items: center;
+  border-radius: 0.4em;
+  flex-wrap: wrap;
 
-@import "./table-common.scss";
+  > .ivu-form-item,
+  > .el-form-item {
+    margin: 8px 10px !important;
+  }
+}
+.padding-row {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+.search-btn {
+  margin-left: 20px;
+}
+.div-zoom {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+// 列表页「筛选 Card + 列表 Card」间距（Vue3 使用 el-card）
+.search > .el-card + .el-card {
+  margin-top: 10px;
+}
+
+// 兼容遗留 iView 结构
+.ivu-card + .ivu-card {
+  margin-top: 10px;
+}
diff --git a/manager/src/styles/element.scss b/manager/src/styles/element.scss
new file mode 100644
index 00000000..229124bf
--- /dev/null
+++ b/manager/src/styles/element.scss
@@ -0,0 +1,97 @@
+/* Element Plus 主题覆盖（对齐原 iView 主色） */
+:root {
+  --el-color-primary: #ff5c58;
+  --el-color-success: #68cabe;
+  --el-color-warning: #fa6419;
+  --el-color-danger: #ff3c2a;
+  --el-font-size-extra-small: 12px;
+  --el-font-size-small: 13px;
+  --el-font-size-base: 14px;
+  --el-font-size-large: 16px;
+}
+
+.el-button--primary {
+  --el-button-bg-color: #ff5c58;
+  --el-button-border-color: #ff5c58;
+  --el-button-hover-bg-color: #ff7875;
+  --el-button-hover-border-color: #ff7875;
+}
+
+/* 全局表格：去掉列竖线，保留行横线 */
+.el-table--border {
+  .el-table__cell {
+    border-right: none !important;
+  }
+
+  .el-table__border-left-patch {
+    display: none;
+  }
+
+  &::before,
+  &::after,
+  .el-table__inner-wrapper::before,
+  .el-table__inner-wrapper::after {
+    width: 0 !important;
+  }
+
+  &.el-table--group::before,
+  &.el-table--group::after,
+  &.el-table--group .el-table__inner-wrapper::before,
+  &.el-table--group .el-table__inner-wrapper::after {
+    width: 0 !important;
+  }
+}
+
+.el-table__fixed-right::before,
+.el-table__fixed::before {
+  background-color: transparent;
+}
+
+/* 列表操作列统一样式 */
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    color: #66b1ff;
+  }
+
+  &.disabled {
+    color: #c0c4cc;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+.op-split {
+  margin: 0 8px;
+  color: #dcdfe6;
+}
+
+.el-table .ops {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+
+  a:not(.link-text) {
+    color: #409eff;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+      color: #66b1ff;
+    }
+  }
+
+  > span:not(.op-split) {
+    margin: 0 8px;
+    color: #dcdfe6;
+  }
+}
+
+.gcc-disabled-action {
+  color: #c0c4cc;
+  cursor: not-allowed;
+}
diff --git a/manager/src/styles/table-common.scss b/manager/src/styles/table-common.scss
index 5d567fd5..ccfb5c8a 100644
--- a/manager/src/styles/table-common.scss
+++ b/manager/src/styles/table-common.scss
@@ -23,7 +23,8 @@
   border-radius: 0.4em;
 
   flex-wrap: wrap;
-  > .ivu-form-item {
+  > .ivu-form-item,
+  > .el-form-item {
     margin: 8px 10px !important;
   }
 }
@@ -42,7 +43,12 @@
   overflow: hidden;
 }
 
-// 为Card组件之间增加间距
+// 列表页相邻 Card 间距（Element Plus）
+.search > .el-card + .el-card {
+  margin-top: 10px;
+}
+
+// 兼容遗留 iView
 .ivu-card + .ivu-card {
   margin-top: 10px;
 }
diff --git a/manager/src/styles/theme.less b/manager/src/styles/theme.less
index 8533f81d..2e64c196 100644
--- a/manager/src/styles/theme.less
+++ b/manager/src/styles/theme.less
@@ -1,19 +1,15 @@
-@import "~view-design/src/styles/index.less";
-// iview 自定义样式
-
-@primary-color: #ff5c58; 
-@info-color: #fa6419;  
+// Element Plus 主题变量（原 view-design less 已移除）
+@primary-color: #ff5c58;
+@info-color: #fa6419;
 @success-color: #68cabe;
 @error-color: #ff3c2a;
 @table-thead-bg: #f8f8f9;
 @table-td-stripe-bg: #f8f8f9;
 @table-td-hover-bg: #ededed;
 @table-td-highlight-bg: #ededed;
-@font-size-base: 12px;
+@font-size-base: 14px;
 
-.ivu-drawer,
-.drawer,
-.ivu-drawer-wrap {
+.el-drawer,
+.drawer {
   z-index: 2600 !important;
 }
-
diff --git a/manager/src/styles/tree-common.scss b/manager/src/styles/tree-common.scss
index 5605db29..e8347276 100644
--- a/manager/src/styles/tree-common.scss
+++ b/manager/src/styles/tree-common.scss
@@ -27,8 +27,8 @@
     background: #e4e4e4;
 }
 
-.block-tool .ivu-tooltip,
-.block-tool .ivu-tooltip-rel {
+.block-tool .el-tooltip,
+.block-tool .el-tooltip__trigger {
     display: block;
 }
 
diff --git a/manager/src/utils/message.js b/manager/src/utils/message.js
new file mode 100644
index 00000000..6b29d2cb
--- /dev/null
+++ b/manager/src/utils/message.js
@@ -0,0 +1,74 @@
+import { ElMessage, ElMessageBox } from "element-plus";
+
+/**
+ * 兼容原 view-design Message API，便于业务页渐进迁移
+ */
+export const Message = {
+  success(content) {
+    return ElMessage.success(normalize(content));
+  },
+  error(content) {
+    return ElMessage.error(normalize(content));
+  },
+  warning(content) {
+    return ElMessage.warning(normalize(content));
+  },
+  info(content) {
+    return ElMessage.info(normalize(content));
+  },
+};
+
+export const Notice = {
+  open(options = {}) {
+    const fn = Message[options.type] || Message.info;
+    return fn(options.desc || options.title || "");
+  },
+  info(options) {
+    return Message.info(options?.desc || options?.title || "");
+  },
+  success(options) {
+    return Message.success(options?.desc || options?.title || "");
+  },
+  warning(options) {
+    return Message.warning(options?.desc || options?.title || "");
+  },
+  error(options) {
+    return Message.error(options?.desc || options?.title || "");
+  },
+};
+
+export const Modal = {
+  confirm(options = {}) {
+    const content = options.content || options.title || "确认操作？";
+    return ElMessageBox.confirm(content, options.title || "提示", {
+      confirmButtonText: options.okText || "确定",
+      cancelButtonText: options.cancelText || "取消",
+      type: options.type || "warning",
+    })
+      .then(() => {
+        if (typeof options.onOk === "function") {
+          return options.onOk();
+        }
+      })
+      .catch(() => {
+        if (typeof options.onCancel === "function") {
+          options.onCancel();
+        }
+      });
+  },
+  remove() {
+    ElMessageBox.close();
+  },
+};
+
+function normalize(content) {
+  if (typeof content === "string") return content;
+  if (content && content.content) return content.content;
+  return String(content ?? "");
+}
+
+export function setupLegacyMessage(app) {
+  app.config.globalProperties.$Message = Message;
+  app.config.globalProperties.$Modal = Modal;
+  app.config.globalProperties.$Notice = Notice;
+}
diff --git a/manager/src/views/Main.vue b/manager/src/views/Main.vue
index 5bd6a799..d98599cc 100644
--- a/manager/src/views/Main.vue
+++ b/manager/src/views/Main.vue
@@ -3,155 +3,126 @@
 </style>
 <template>
   <div class="main">
-    <!-- 左侧菜单 -->
     <div class="sidebar-menu-con menu-bar">
-      <div class="logo-con">
-        <!-- <img src="../assets/logo.png" key="max-logo" /> -->
-        <img :src="domainLogo" key="max-logo" />
-      </div>
-      <shrinkable-menu></shrinkable-menu>
+      <shrinkable-menu />
     </div>
-    <!-- 顶部标题栏主体 -->
-    <div class="main-header-con" :style="{ height: setting.isUseTabsRouter ? '100px' : '60px' }">
+    <div class="main-header-con" :style="{ height: '60px' }">
       <div class="main-header">
+        <div class="header-logo-con">
+          <img :src="domainLogo" key="max-logo" />
+        </div>
         <div class="header-avator-con">
-          <!-- 左侧栏 -->
-          <div>
-
-          </div>
-          <div class="flex flex-a-c user-module">
-            <!-- 通知消息 -->
-            <message-tip v-if="tipsMessage" :res="tipsMessage"></message-tip>
-            <!-- 用户头像 -->
-            <div class="user-dropdown-menu-con">
-              <Row
+          <div class="flex flex-a-c user-module" style="height: 100%">
+            <message-tip v-if="tipsMessage" :res="tipsMessage" />
+            <div class="user-dropdown-menu-con" style="margin-left: 24px; display: flex; align-items: center; height: 100%">
+              <el-row
                 type="flex"
                 justify="end"
                 align="middle"
                 class="user-dropdown-innercon"
               >
-                <ul class="nav-list">
-                  <li class="nav-item " @click="handleClickSetting">
-                    <Tooltip content="设置">
-                      <Icon size="16" type="md-settings" />
-                    </Tooltip>
-                  </li>
-                </ul>
-                <Dropdown
-                  transfer
-                  trigger="hover"
-                  @on-click="handleClickUserDropdown"
-                >
+                <el-dropdown trigger="hover" @command="handleClickUserDropdown">
                   <div class="dropList">
                     <span class="main-user-name">{{ userInfo.nickName }}</span>
-                    <Avatar
-                      icon="ios-person"
+                    <el-avatar
+                      :size="32"
                       :src="avatarPath"
                       style="background: #fff; margin-left: 10px"
-                    ></Avatar>
+                    >
+                      <el-icon><UserFilled /></el-icon>
+                    </el-avatar>
                   </div>
-                  <DropdownMenu slot="list">
-                    <DropdownItem name="personalCenter">{{
-                      $t("userCenter")
-                    }}</DropdownItem>
-                    <DropdownItem name="changePass">{{
-                      $t("changePass")
-                    }}</DropdownItem>
-                    <DropdownItem name="loginOut" divided>{{
-                      $t("logout")
-                    }}</DropdownItem>
-                  </DropdownMenu>
-                </Dropdown>
-              </Row>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="personalCenter">
+                        {{ $t("userCenter") }}
+                      </el-dropdown-item>
+                      <el-dropdown-item command="changePass">
+                        {{ $t("changePass") }}
+                      </el-dropdown-item>
+                      <el-dropdown-item divided command="loginOut">
+                        {{ $t("logout") }}
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </el-row>
             </div>
           </div>
         </div>
       </div>
-      <!-- 已打开的页面标签 -->
-      <div class="tags-con"  v-if="setting.isUseTabsRouter">
-        <tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>
-      </div>
     </div>
-    <div class="single-page-con"  :style="{ 'top': setting.isUseTabsRouter ? '100px' : '60px', height: setting.isUseTabsRouter ? 'calc(100% - 110px)' : 'calc(100% - 70px)' }">
+    <div class="breadcrumb-bar" v-if="setting.isUseTabsRouter">
+      <page-breadcrumb />
+    </div>
+    <div
+      class="single-page-con"
+      :style="{
+        top: setting.isUseTabsRouter ? '104px' : '60px',
+        height: setting.isUseTabsRouter ? 'calc(100% - 114px)' : 'calc(100% - 70px)',
+      }"
+    >
       <div class="single-page">
-        <!-- <keep-alive :include="cachePage"> -->
-        <router-view></router-view>
-        <!-- </keep-alive> -->
+        <router-view v-slot="{ Component }">
+          <component :is="Component" v-if="Component" :key="$route.fullPath" />
+        </router-view>
       </div>
     </div>
-    <!-- 全局加载动画 -->
     <circleLoading class="loading-position" v-show="loading" />
-    <!-- 右侧抽屉配置 -->
-    <configDrawer ref="config"/>
   </div>
 </template>
 
 <script>
+import { UserFilled } from "@element-plus/icons-vue";
 import shrinkableMenu from "./main-parts/shrinkable-menu/shrinkable-menu.vue";
-import tagsPageOpened from "./main-parts/tags-page-opened.vue";
+import pageBreadcrumb from "./main-parts/page-breadcrumb.vue";
 import messageTip from "./main-parts/message-tip.vue";
 import circleLoading from "@/components/lili/circle-loading.vue";
-import configDrawer from "@/components/lili/config-drawer.vue";
 import Cookies from "js-cookie";
 import util from "@/libs/util.js";
 import { getNoticePage, logout } from "@/api/index";
-import { getBaseSite } from "@/api/common";
 
-var client;
 const config = require("@/config/index.js");
+
 export default {
   components: {
+    UserFilled,
     shrinkableMenu,
-    tagsPageOpened,
+    pageBreadcrumb,
     messageTip,
     circleLoading,
-    configDrawer
   },
   data() {
     return {
       config,
-      sliceNum: 5, // 展示nav数量
-      userInfo: "", // 用户信息
-      tipsMessage: "", // 通知消息
+      sliceNum: 5,
+      userInfo: "",
+      tipsMessage: "",
+      defaultLogo: require("@/assets/logo.png"),
       domainLogo: "",
     };
   },
   computed: {
-    setting(){
-      let data = this.$store.state.setting
-
-      return data.setting
+    setting() {
+      return this.$store.state.setting.setting;
     },
     loading() {
       return this.$store.state.app.loading;
     },
     pageTagsList() {
-      return this.$store.state.app.pageOpenedList; // 打开的页面的页面对象
+      return this.$store.state.app.pageOpenedList;
     },
     avatarPath() {
       return localStorage.avatorImgPath;
     },
-    lang() {
-      return this.$store.state.app.lang;
-    },
   },
-
   methods: {
-    handleClickSetting() {
-      this.$refs.config.open();
-    },
     init() {
-      // 菜单初始化
-      let userInfo = JSON.parse(Cookies.get("userInfoManager"));
-
+      const userInfo = JSON.parse(Cookies.get("userInfoManager"));
       this.userInfo = userInfo;
       this.checkTag(this.$route.name);
-      let currWidth = document.body.clientWidth;
-      if (currWidth <= 1200) {
-        this.sliceNum = 2;
-      }
-      this.domainLogo = localStorage.getItem("icon");
-      let link =
+      this.domainLogo = localStorage.getItem("icon") || this.defaultLogo;
+      const link =
         document.querySelector("link[rel*='icon']") ||
         document.createElement("link");
       link.type = "image/x-icon";
@@ -159,35 +130,22 @@ export default {
       link.rel = "shortcut icon";
       document.getElementsByTagName("head")[0].appendChild(link);
       window.document.title = localStorage.getItem("title") + " - 运营后台";
-      // 读取未读消息数
       getNoticePage({}).then((res) => {
         if (res.success) {
           this.tipsMessage = res.result;
-
           this.$store.state.notices = res.result;
         }
       });
     },
-
-    //用户头像下方抽屉点击
     handleClickUserDropdown(name) {
-      //个人中心
       if (name === "personalCenter") {
         util.openNewPage(this, "personal-center");
-        this.$router.push({
-          name: "personal-center",
-        });
-      }
-      //修改密码
-      else if (name === "changePass") {
+        this.$router.push({ name: "personal-center" });
+      } else if (name === "changePass") {
         util.openNewPage(this, "change-password");
-        this.$router.push({
-          name: "change_password",
-        });
-      }
-      // 退出登录
-      else if (name === "loginOut") {
-        logout().then((res) => {
+        this.$router.push({ name: "change_password" });
+      } else if (name === "loginOut") {
+        logout().then(() => {
           this.$store.commit("logout", this);
           this.$store.commit("setAdded", false);
           this.setStore("accessToken", "");
@@ -196,15 +154,9 @@ export default {
         });
       }
     },
-    //切换标签
     checkTag(name) {
-      let openpageHasTag = this.pageTagsList.some((item) => {
-        if (item.name == name) {
-          return true;
-        }
-      });
+      const openpageHasTag = this.pageTagsList.some((item) => item.name == name);
       if (!openpageHasTag) {
-        //  解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
         util.openNewPage(
           this,
           name,
@@ -213,33 +165,33 @@ export default {
         );
       }
     },
-    //宽度动态计算
     resize() {
-      let currWidth = document.body.clientWidth;
-      let count = currWidth / 300;
-      if (count > 6) {
-        this.sliceNum = 6;
-      } else {
-        this.sliceNum = count;
+      const currWidth = document.body.clientWidth;
+      const count = currWidth / 300;
+      this.sliceNum = count > 6 ? 6 : count;
+    },
+    onLogoError(e) {
+      if (e?.target && e.target.src !== this.defaultLogo) {
+        e.target.src = this.defaultLogo;
       }
     },
   },
   watch: {
-    $route(to, from) {
+    $route(to) {
       this.checkTag(to.name);
       localStorage.currentPageName = to.name;
     },
   },
   mounted() {
     this.init();
-    let that = this;
     this.resize();
-    window.addEventListener("resize", function () {
-      that.resize();
-    });
+    window.addEventListener("resize", this.resize);
+    this.$store.commit("setOpenedList");
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.resize);
   },
   created() {
-    // 显示打开的页面的列表
     this.$store.commit("setOpenedList");
   },
 };
diff --git a/manager/src/views/change-password/change-password.vue b/manager/src/views/change-password/change-password.vue
index a586005c..d6c4f8aa 100644
--- a/manager/src/views/change-password/change-password.vue
+++ b/manager/src/views/change-password/change-password.vue
@@ -1,37 +1,53 @@
 <template>
   <div>
-    <Card class="change-pass">
-      <p slot="title">修改密码</p>
-      <div class="mt_10">
-        <Form ref="editPasswordForm" :model="editPasswordForm" :label-width="100" label-position="right" :rules="passwordValidate" style="width:450px">
-          <FormItem label="原密码" prop="oldPass">
-            <Input type="password" v-model="editPasswordForm.oldPassword" placeholder="请输入现在使用的密码"></Input>
-          </FormItem>
-          <FormItem label="新密码" prop="newPass">
-            <SetPassword  v-model="editPasswordForm.newPassword" @on-change="changeInputPass" />
-          </FormItem>
-          <FormItem label="确认新密码" prop="rePass">
-            <Input type="password" v-model="editPasswordForm.rePassword" placeholder="请再次输入新密码"></Input>
-          </FormItem>
-          <FormItem>
-            <Button type="primary" class="mr_10" :loading="savePassLoading" @click="saveEditPass">保存
-            </Button>
-            <Button @click="cancelEditPass">取消</Button>
-          </FormItem>
-        </Form>
-      </div>
-    </Card>
+    <el-card class="change-pass">
+      <template #header>修改密码</template>
+      <el-form
+        ref="editPasswordForm"
+        :model="editPasswordForm"
+        label-width="100px"
+        label-position="right"
+        :rules="passwordValidate"
+        style="width: 450px"
+        class="mt_10"
+      >
+        <el-form-item label="原密码" prop="oldPassword">
+          <el-input
+            v-model="editPasswordForm.oldPassword"
+            type="password"
+            show-password
+            placeholder="请输入现在使用的密码"
+          />
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPassword">
+          <SetPassword v-model="editPasswordForm.newPassword" @on-change="changeInputPass" />
+        </el-form-item>
+        <el-form-item label="确认新密码" prop="rePassword">
+          <el-input
+            v-model="editPasswordForm.rePassword"
+            type="password"
+            show-password
+            placeholder="请再次输入新密码"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :loading="savePassLoading" @click="saveEditPass">保存</el-button>
+          <el-button @click="cancelEditPass">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
   </div>
 </template>
 
 <script>
 import SetPassword from "@/components/lili/set-password";
 import { changePass } from "@/api/index";
+import { ElMessageBox } from "element-plus";
 
 export default {
   name: "change-password",
   components: {
-    SetPassword
+    SetPassword,
   },
   data() {
     const valideRePassword = (rule, value, callback) => {
@@ -42,102 +58,61 @@ export default {
       }
     };
     return {
-      savePassLoading: false, // 保存加载状态
-      editPasswordForm: { // 编辑密码表单
+      savePassLoading: false,
+      editPasswordForm: {
         oldPassword: "",
         newPassword: "",
         rePassword: "",
       },
-      strength: "", // 密码强度
-      passwordValidate: { // 验证规则
-        oldPassword: [
-          {
-            required: true,
-            message: "请输入原密码",
-            trigger: "blur",
-          },
-        ],
+      strength: "",
+      passwordValidate: {
+        oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
         newPassword: [
-          {
-            required: true,
-            message: "请输入新密码",
-            trigger: "blur",
-          },
-          {
-            min: 6,
-            message: "请至少输入6个字符",
-            trigger: "blur",
-          },
-          {
-            max: 32,
-            message: "最多输入32个字符",
-            trigger: "blur",
-          },
+          { required: true, message: "请输入新密码", trigger: "blur" },
+          { min: 6, message: "请至少输入6个字符", trigger: "blur" },
+          { max: 32, message: "最多输入32个字符", trigger: "blur" },
         ],
         rePassword: [
-          {
-            required: true,
-            message: "请再次输入新密码",
-            trigger: "blur",
-          },
-          {
-            validator: valideRePassword,
-            trigger: "blur",
-          },
+          { required: true, message: "请再次输入新密码", trigger: "blur" },
+          { validator: valideRePassword, trigger: "blur" },
         ],
       },
     };
   },
   methods: {
-    // 密码强度
     changeInputPass(v, grade, strength) {
       this.strength = strength;
     },
-    // 确认修改密码
     saveEditPass() {
-      let params = {
+      const params = {
         password: this.md5(this.editPasswordForm.oldPassword),
         newPassword: this.md5(this.editPasswordForm.newPassword),
         passStrength: this.md5(this.strength),
       };
-      this.$refs["editPasswordForm"].validate((valid) => {
-        if (valid) {
-          this.savePassLoading = true;
-          changePass(params).then((res) => {
-            this.savePassLoading = false;
-            if (res.success) {
-              this.$Modal.success({
-                title: "修改密码成功",
-                content: "修改密码成功，需重新登录",
-                onOk: () => {
-                  this.$store.commit("logout", this);
-                  this.$router.push({
-                    name: "login",
-                  });
-                },
-              });
-            }
-          });
-        }
+      this.$refs.editPasswordForm.validate((valid) => {
+        if (!valid) return;
+        this.savePassLoading = true;
+        changePass(params).then((res) => {
+          this.savePassLoading = false;
+          if (res.success) {
+            ElMessageBox.alert("修改密码成功，需重新登录", "修改密码成功", {
+              confirmButtonText: "确定",
+              callback: () => {
+                this.$store.commit("logout", this);
+                this.$router.push({ name: "login" });
+              },
+            });
+          }
+        });
       });
     },
-    // 取消修改密码
     cancelEditPass() {
       this.$store.commit("removeTag", "change_password");
-      localStorage.pageOpenedList = JSON.stringify(
-        this.$store.state.app.pageOpenedList
-      );
-      let lastPageName = "";
-      let length = this.$store.state.app.pageOpenedList.length;
-      if (length > 1) {
-        lastPageName = this.$store.state.app.pageOpenedList[length - 1].name;
-      } else {
-        lastPageName = this.$store.state.app.pageOpenedList[0].name;
-      }
-      this.$router.push({
-        name: lastPageName,
-      });
+      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
+      const list = this.$store.state.app.pageOpenedList;
+      const lastPageName = list.length > 1 ? list[list.length - 1].name : list[0].name;
+      this.$router.push({ name: lastPageName });
     },
-  }
+  },
 };
 </script>
diff --git a/manager/src/views/custom-words/index.vue b/manager/src/views/custom-words/index.vue
index 57d3d0ea..f5a58195 100644
--- a/manager/src/views/custom-words/index.vue
+++ b/manager/src/views/custom-words/index.vue
@@ -1,51 +1,66 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation">
-        <Button @click="add" type="primary">添加</Button>
-      </Row>
-        <Table
-          :loading="loading"
-          border
-          :columns="columns"
-          :data="data"
-          ref="table"
-          sortable="custom"
-          @on-selection-change="changeSelect"
-        ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
-          :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
-          size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
-    <Modal
-      :title="modalTitle"
-      v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
-    >
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="自定义分词" prop="name">
-          <Input v-model="form.name" clearable style="width: 100%" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-          >提交</Button
-        >
+    <el-card>
+      <div class="operation">
+        <el-button type="primary" @click="add">添加</el-button>
       </div>
-    </Modal>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%"
+        row-key="id"
+        @selection-change="changeSelect"
+      >
+        <el-table-column type="selection" width="60" align="center" />
+        <el-table-column prop="name" label="自定义分词" min-width="120" />
+        <el-table-column prop="createTime" label="创建时间" width="200" />
+        <el-table-column prop="updateTime" label="更新时间" width="200" />
+        <el-table-column prop="createBy" label="操作人" min-width="150" />
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="detail(row)">修改</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+        <el-form-item label="自定义分词" prop="name">
+          <el-input v-model="form.name" clearable style="width: 100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -54,118 +69,36 @@ import {
   getCustomWordsPage,
   delCustom,
   insertCustomWords,
-  updateCustomWords
+  updateCustomWords,
 } from "@/api/index";
-
 import { regular } from "@/utils";
+
 export default {
   name: "custom-words",
   data() {
     return {
-      loading: true, // 表单加载状态
-      modalType: 0, // 添加或编辑标识
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
+      loading: true,
+      modalType: 0,
+      modalVisible: false,
+      modalTitle: "",
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
         words: "",
       },
       form: {
-        // 添加或编辑表单对象初始化数据
         name: "",
       },
-      // 表单验证规则
       formValidate: {
-        name: [
-          regular.REQUIRED,
-          regular.VARCHAR20
-        ],
+        name: [regular.REQUIRED, regular.VARCHAR20],
       },
-      submitLoading: false, // 添加或编辑提交状态
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "自定义分词",
-          key: "name",
-          minWidth: 120
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          width: 200
-        },
-        {
-          title: "更新时间",
-          key: "updateTime",
-          width: 200
-        },
-        {
-          title: "操作人",
-          key: "createBy",
-          minWidth: 150
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 200,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.detail(params.row);
-                    },
-                  },
-                },
-                "修改"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      submitLoading: false,
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      total: 0,
     };
   },
   methods: {
@@ -187,17 +120,14 @@ export default {
       this.getDataList();
     },
     clearSelectAll() {
-      this.$refs.table.selectAll(false);
+      this.$refs.table?.clearSelection();
     },
-    // 选中状态变更
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
-
       getCustomWordsPage(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
@@ -208,12 +138,10 @@ export default {
       this.total = this.data.length;
       this.loading = false;
     },
-    // 提交数据
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
           this.submitLoading = true;
-
           if (this.modalType == 0) {
             delete this.form.id;
             insertCustomWords(this.form).then((res) => {
@@ -226,7 +154,6 @@ export default {
             });
           } else {
             this.form.id = this.id;
-            // 编辑
             updateCustomWords(this.form).then((res) => {
               this.submitLoading = false;
               if (res.success) {
@@ -239,16 +166,13 @@ export default {
         }
       });
     },
-    // 添加
     add() {
       this.modalType = 0;
       this.modalTitle = "添加";
-      this.form = {}
-      this.$refs.form.resetFields();
-
+      this.form = {};
+      this.$refs.form?.resetFields();
       this.modalVisible = true;
     },
-    // 修改
     detail(v) {
       this.modalType = 1;
       this.id = v.id;
@@ -256,15 +180,12 @@ export default {
       this.modalVisible = true;
       this.form.name = v.name;
     },
-    // 删除
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
-        // 记得确认修改此处
         content: "您确认要删除 " + v.name + " ?",
         loading: true,
         onOk: () => {
-          // 删除
           delCustom(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -275,7 +196,6 @@ export default {
         },
       });
     },
-    // 批量删除
     delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未选择要删除的数据");
@@ -291,8 +211,7 @@ export default {
             ids += e.id + ",";
           });
           ids = ids.substring(0, ids.length - 1);
-          // 批量删除
-          delSensitive(ids).then((res) => {
+          delCustom(ids).then((res) => {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("操作成功");
diff --git a/manager/src/views/distribution/distribution.vue b/manager/src/views/distribution/distribution.vue
index dccc32b9..49092150 100644
--- a/manager/src/views/distribution/distribution.vue
+++ b/manager/src/views/distribution/distribution.vue
@@ -1,355 +1,198 @@
 <template>
-  <div>
-    <Card>
-      <Row @keydown.enter.native.prevent="handleSearch">
-        <Form
-          ref="searchForm"
-          :model="searchForm"
-          inline
-          :label-width="70"
-          class="search-form"
-        >
-          <Form-item label="会员名称" prop="memberName">
-            <Input
-              type="text"
-              v-model="searchForm.memberName"
-              placeholder="请输入会员名称"
-              clearable
-              style="width: 240px"
+  <div class="search">
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
+            v-model="searchForm.memberName"
+            placeholder="请输入会员名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="searchForm.distributionStatus" style="width: 240px">
+            <el-option
+              v-for="item in distributionStatusList"
+              :key="item.value"
+              :value="item.value"
+              :label="item.label"
             />
-          </Form-item>
-          <Form-item label="状态">
-            <Select
-              v-model="searchForm.distributionStatus"
-              style="width: 240px"
-            >
-              <Option
-                v-for="item in distributionStatusList"
-                :value="item.value"
-                :key="item.value"
-              >{{ item.label }}
-              </Option
-              >
-            </Select>
-          </Form-item>
-          <Button
-            @click="handleSearch"
-            type="primary"
-            icon="ios-search"
-            class="search-btn"
-          >搜索
-          </Button
-          >
-        </Form>
-      </Row>
-      </Card>
-    <Card>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-table
         ref="table"
+        v-loading="loading"
+        border
+        :data="data"
         class="mt_10"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        style="width: 100%"
+      >
+        <el-table-column prop="memberName" label="会员名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="name" label="姓名" min-width="100" />
+        <el-table-column prop="idNumber" label="身份证号" min-width="120" />
+        <el-table-column prop="settlementBankAccountName" label="结算银行开户行名称" min-width="120" />
+        <el-table-column prop="settlementBankAccountNum" label="结算银行开户账号" min-width="120" />
+        <el-table-column prop="settlementBankBranchName" label="结算银行开户支行名称" min-width="120" />
+        <el-table-column prop="distributionOrderCount" label="推广单数" width="150" />
+        <el-table-column label="分销订单金额" width="150">
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.distributionOrderPrice" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column label="分销金额" width="150">
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.rebateTotal" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column label="待提现金额" width="150">
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.canRebate" color="green" />
+          </template>
+        </el-table-column>
+        <el-table-column label="冻结金额" width="150">
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.commissionFrozen" color="#347dda" />
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="150">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.distributionStatus == 'PASS'" type="success">通过</el-tag>
+              <el-tag v-else-if="row.distributionStatus == 'APPLY'" type="primary">待审核</el-tag>
+              <el-tag v-else-if="row.distributionStatus == 'RETREAT'" type="warning">清退</el-tag>
+              <el-tag v-else-if="row.distributionStatus == 'REFUSE'" type="danger">拒绝</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a v-if="row.distributionStatus != 'RETREAT'" class="link-text" @click="retreat(row)">清退</a>
+              <a v-if="row.distributionStatus == 'RETREAT'" class="link-text" @click="resume(row)">恢复</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="edit(row)">编辑</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
-    <Modal title="修改分销员" v-model="modalVisible" :mask-closable="false" :width="600">
-      <Form ref="distributionForm" :model="distributionForm" :label-width="150" :rules="distributionFormValidate">
-        <FormItem label="姓名" prop="name">
-          <Input v-model="distributionForm.name" clearable style="width: 100%"/>
-        </FormItem>
-        <FormItem label="身份证号" prop="idNumber">
-          <Input v-model="distributionForm.idNumber" clearable style="width: 100%"/>
-        </FormItem>
-        <FormItem label="结算银行开户行名称" prop="settlementBankAccountName">
-          <Input v-model="distributionForm.settlementBankAccountName" clearable style="width: 100%"/>
-        </FormItem>
-        <FormItem label="结算银行开户账号" prop="settlementBankAccountNum">
-          <Input v-model="distributionForm.settlementBankAccountNum" clearable style="width: 100%"/>
-        </FormItem>
-        <FormItem label="结算银行开户支行名称" prop="settlementBankBranchName">
-          <Input v-model="distributionForm.settlementBankBranchName" clearable style="width: 100%"/>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
       </div>
-    </Modal>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      title="修改分销员"
+      width="600px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form
+        ref="distributionForm"
+        :model="distributionForm"
+        label-width="150px"
+        :rules="distributionFormValidate"
+      >
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="distributionForm.name" clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="身份证号" prop="idNumber">
+          <el-input v-model="distributionForm.idNumber" clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="结算银行开户行名称" prop="settlementBankAccountName">
+          <el-input v-model="distributionForm.settlementBankAccountName" clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="结算银行开户账号" prop="settlementBankAccountNum">
+          <el-input v-model="distributionForm.settlementBankAccountNum" clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="结算银行开户支行名称" prop="settlementBankBranchName">
+          <el-input v-model="distributionForm.settlementBankBranchName" clearable style="width: 100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import {editDistribution, getDistributionListData, resumeDistribution, retreatDistribution} from "@/api/distribution";
-import {distributionStatusList} from "./dataJson.js";
-import {regular} from "@/utils";
+import { editDistribution, getDistributionListData, resumeDistribution, retreatDistribution } from "@/api/distribution";
+import { distributionStatusList } from "./dataJson.js";
+import { regular } from "@/utils";
 
 export default {
   name: "distribution",
-  components: {},
   data() {
     return {
-      distributionStatusList, // 分销状态
-      loading: true, // 表单加载状态
-      modalVisible: false, // 添加或编辑显示
+      distributionStatusList,
+      loading: true,
+      modalVisible: false,
       distributionForm: {
         name: "",
         idNumber: "",
         settlementBankAccountName: "",
         settlementBankAccountNum: "",
-        settlementBankBranchName: ""
+        settlementBankBranchName: "",
       },
-      // 表单验证规则
       distributionFormValidate: {
-        name: [
-          regular.REQUIRED,
-          regular.VARCHAR20
-        ],
-        idNumber: [
-          regular.REQUIRED,
-          regular.VARCHAR20
-        ],
-        settlementBankAccountName: [
-          regular.REQUIRED,
-          regular.VARCHAR20
-        ],
-        settlementBankAccountNum: [
-          regular.REQUIRED,
-          regular.VARCHAR20
-        ],
-        settlementBankBranchName: [
-          regular.REQUIRED,
-          regular.VARCHAR20
-        ],
+        name: [regular.REQUIRED, regular.VARCHAR20],
+        idNumber: [regular.REQUIRED, regular.VARCHAR20],
+        settlementBankAccountName: [regular.REQUIRED, regular.VARCHAR20],
+        settlementBankAccountNum: [regular.REQUIRED, regular.VARCHAR20],
+        settlementBankBranchName: [regular.REQUIRED, regular.VARCHAR20],
       },
-      submitLoading: false, // 编辑提交状态
+      submitLoading: false,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
+        pageNumber: 1,
+        pageSize: 20,
       },
-      columns: [
-        {
-          title: "会员名称",
-          key: "memberName",
-          minWidth: 120,
-          tooltip: true,
-        },
-        {
-          title: "姓名",
-          key: "name",
-          minWidth: 100,
-        },
-        {
-          title: "身份证号",
-          key: "idNumber",
-          minWidth: 120,
-        },
-        {
-          title: "结算银行开户行名称",
-          key: "settlementBankAccountName",
-          minWidth: 120,
-        },
-        {
-          title: "结算银行开户账号",
-          key: "settlementBankAccountNum",
-          minWidth: 120,
-        },
-        {
-          title: "结算银行开户支行名称",
-          key: "settlementBankBranchName",
-          minWidth: 120,
-        },
-        {
-          title: "推广单数",
-          key: "distributionOrderCount",
-          minWidth: 120,
-          width: 150,
-        },
-        {
-          title: "分销订单金额",
-          key: "distributionOrderPrice",
-          width: 150,
-          sortable: false,
-          render: (h, params) => {
-            return h("priceColorScheme", {props: {value: params.row.distributionOrderPrice, color: this.$mainColor}});
-          },
-        },
-        {
-          title: "分销金额",
-          key: "rebateTotal",
-          width: 150,
-          sortable: false,
-          render: (h, params) => {
-            return h("priceColorScheme", {props: {value: params.row.rebateTotal, color: this.$mainColor}});
-          },
-
-        },
-        {
-          title: "待提现金额",
-          key: "canRebate",
-          width: 150,
-          sortable: false,
-          render: (h, params) => {
-            return h("priceColorScheme", {props: {value: params.row.canRebate, color: 'green'}});
-          },
-        },
-        {
-          title: "冻结金额",
-          key: "commissionFrozen",
-          width: 150,
-          sortable: false,
-          render: (h, params) => {
-            return h("priceColorScheme", {props: {value: params.row.commissionFrozen, color: '#347dda'}});
-          },
-        },
-        {
-          title: "状态",
-          key: "distributionStatus",
-          width: 150,
-          sortable: false,
-          render: (h, params) => {
-            if (params.row.distributionStatus == "PASS") {
-              return h("Tag", {props: {color: "green",},}, "通过");
-            } else if (params.row.distributionStatus == "APPLY") {
-              return h("Tag", {props: {color: "geekblue",},}, "待审核");
-            } else if (params.row.distributionStatus == "RETREAT") {
-              return h("Tag", {props: {color: "volcano",},}, "清退");
-            } else if (params.row.distributionStatus == "REFUSE") {
-              return h("Tag", {props: {color: "red",},}, "拒绝");
-            }
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 140,
-          render: (h, params) => {
-            return h(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  justifyContent: "center",
-                },
-              },
-              [
-                h(
-                  "Button",
-                  {
-                    props: {
-                      type: "error",
-                      size: "small",
-                    },
-                    style: {
-                      marginRight: "5px",
-                      display:
-                        params.row.distributionStatus != "RETREAT"
-                          ? "block"
-                          : "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.retreat(params.row);
-                      },
-                    },
-                  },
-                  "清退"
-                ),
-                h(
-                  "Button",
-                  {
-                    props: {
-                      type: "success",
-                      size: "small",
-                    },
-                    style: {
-                      marginRight: "5px",
-                      display:
-                        params.row.distributionStatus == "RETREAT"
-                          ? "block"
-                          : "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.resume(params.row);
-                      },
-                    },
-                  },
-                  "恢复"
-                ),
-                h(
-                  "Button",
-                  {
-                    props: {
-                      type: "info",
-                      size: "small",
-                    },
-                    style: {
-                      marginRight: "5px",
-                    },
-                    on: {
-                      click: () => {
-                        this.edit(params.row);
-                      },
-                    },
-                  },
-                  "编辑"
-                ), h(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    justifyContent: "center",
-                  },
-                })
-              ]
-            );
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getDataList();
     },
-    // 分页 改变页数
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
+    changePageSize() {
+      this.searchForm.pageNumber = 1;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
       this.searchForm.status = "PASS";
@@ -361,15 +204,12 @@ export default {
         }
       });
     },
-    // 清退分销商
     retreat(v) {
       this.$Modal.confirm({
         title: "提示",
-        // 记得确认修改此处
         content: "您确认要清退 " + v.memberName + " ?",
         loading: true,
         onOk: () => {
-          // 删除
           retreatDistribution(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -380,15 +220,12 @@ export default {
         },
       });
     },
-    // 恢复分销商
     resume(v) {
       this.$Modal.confirm({
         title: "提示",
-        // 记得确认修改此处
         content: "您确认要恢复 " + v.memberName + " ?",
         loading: true,
         onOk: () => {
-          // 删除
           resumeDistribution(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -399,10 +236,8 @@ export default {
         },
       });
     },
-    // 编辑
     edit(v) {
-      this.$refs.distributionForm.resetFields();
-      // 转换null为""
+      this.$refs.distributionForm?.resetFields();
       for (let attr in v) {
         if (v[attr] === null) {
           v[attr] = "";
@@ -413,11 +248,9 @@ export default {
       this.distributionForm = data;
       this.modalVisible = true;
     },
-    // 提交表单
     handleSubmit() {
       this.$refs.distributionForm.validate((valid) => {
         if (valid) {
-          // 编辑
           editDistribution(this.distributionForm).then((res) => {
             this.submitLoading = false;
             if (res.success) {
diff --git a/manager/src/views/distribution/distributionApply.vue b/manager/src/views/distribution/distributionApply.vue
index a440ed11..c31c0bf2 100644
--- a/manager/src/views/distribution/distributionApply.vue
+++ b/manager/src/views/distribution/distributionApply.vue
@@ -1,56 +1,68 @@
 <template>
-  <div>
-    <Card>
-      <Row @keydown.enter.native.prevent="handleSearch">
-        <Form
-          ref="searchForm"
-          :model="searchForm"
-          inline
-          :label-width="70"
-          class="search-form"
-        >
-          <Form-item label="会员名称" prop="memberName">
-            <Input
-              type="text"
-              v-model="searchForm.memberName"
-              placeholder="请输入会员名称"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Button
-            @click="handleSearch"
-            type="primary"
-            class="search-btn"
-            >搜索</Button
-          >
-        </Form>
-      </Row>
-      </Card>
-    <Card>
-      <Table
-        class="mt_10"
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
+  <div class="search">
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
+            v-model="searchForm.memberName"
+            placeholder="请输入会员名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-table
         ref="table"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column prop="memberName" label="会员名称" min-width="100" show-overflow-tooltip />
+        <el-table-column prop="name" label="姓名" min-width="100" />
+        <el-table-column prop="idNumber" label="身份证号" min-width="120" />
+        <el-table-column prop="settlementBankAccountName" label="结算银行开户行名称" min-width="120" />
+        <el-table-column prop="settlementBankAccountNum" label="结算银行开户账号" min-width="120" />
+        <el-table-column prop="settlementBankBranchName" label="结算银行开户支行名称" min-width="120" />
+        <el-table-column prop="createTime" label="提交时间" min-width="100" />
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row" class="ops">
+              <a class="link-text" @click="audit(row, 'PASS')">通过</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="audit(row, 'REFUSE')">拒绝</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -61,115 +73,35 @@ export default {
   name: "distributionApply",
   data() {
     return {
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
       },
-      columns: [
-        {
-          title: "会员名称",
-          key: "memberName",
-          minWidth: 100,
-          tooltip: true,
-        },
-        {
-          title: "姓名",
-          key: "name",
-          minWidth: 100,
-        },
-        {
-          title: "身份证号",
-          key: "idNumber",
-          minWidth: 120,
-        },
-        {
-          title: "结算银行开户行名称",
-          key: "settlementBankAccountName",
-          minWidth: 120,
-        },
-        {
-          title: "结算银行开户账号",
-          key: "settlementBankAccountNum",
-          minWidth: 120,
-        },
-        {
-          title: "结算银行开户支行名称",
-          key: "settlementBankBranchName",
-          minWidth: 120,
-        },
-        {
-          title: "提交时间",
-          key: "createTime",
-          minWidth: 100,
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 200,
-          render: (h, params) => {
-            return h("div", { class: "ops" }, [
-              h(
-                "a",
-                {
-                  on: {
-                    click: () => {
-                      this.audit(params.row, "PASS");
-                    },
-                  },
-                },
-                "通过"
-              ),
-              h("span", {}, "|"),
-              h(
-                "a",
-                {
-                  on: {
-                    click: () => {
-                      this.audit(params.row, "REFUSE");
-                    },
-                  },
-                },
-                "拒绝"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-      this.clearSelectAll();
-    },
-    // 分页 改变页数
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
+    changePage() {
+      this.getDataList();
+    },
+    changePageSize() {
+      this.searchForm.pageNumber = 1;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
       this.searchForm.distributionStatus = "APPLY";
@@ -180,10 +112,7 @@ export default {
           this.total = res.result.total;
         }
       });
-      this.total = this.data.length;
-      this.loading = false;
     },
-    //审核
     audit(v, status) {
       let test = "拒绝";
       if (status == "PASS") {
@@ -194,7 +123,6 @@ export default {
       };
       this.$Modal.confirm({
         title: "确认" + test,
-        // 记得确认修改此处
         content: "您确认要" + test + " " + v.memberName + " ?",
         loading: true,
         onOk: () => {
diff --git a/manager/src/views/distribution/distributionCash.vue b/manager/src/views/distribution/distributionCash.vue
index 81d26996..43dddb40 100644
--- a/manager/src/views/distribution/distributionCash.vue
+++ b/manager/src/views/distribution/distributionCash.vue
@@ -1,270 +1,219 @@
 <template>
-  <div>
-    <Card>
-        <Form ref="searchForm" @keydown.enter.native.prevent="handleSearch" :model="searchForm"  class="search-form">
-          <Form-item label="会员名称"  class="flex" prop="memberName">
-            <Input
-              type="text" placeholder="请输入会员名称" v-model="searchForm.memberName" clearable
-              style="width: 240px"></Input>
-          </Form-item>
-          <Form-item label="编号" class="flex">
-            <Input
-              type="text" placeholder="请输入编号" v-model="searchForm.sn" clearable
-              style="width: 240px"></Input>
-          </Form-item>
-          <Form-item label="状态"
-                     style="width: 240px">
-            <Select v-model="searchForm.distributionCashStatus" clearable style="width: 150px">
-                <Option v-for="item in cashStatusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-            </Select>
-          </Form-item>
-          <Form-item>
-            <Button @click="handleSearch" type="primary">搜索</Button>
-          </Form-item>
-        </Form>
-        </Card>
-    <Card>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10"></Table>
-      <Row type="flex" justify="end" class="page padding-row">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20,50,100]" size="small" show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
-    <Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="500">
-      <Form ref="form" :model="form" :label-width="100"  >
-      <FormItem label="编号">
-          <Input disabled v-model="form.sn" clearable style="width:100%"/>
-        </FormItem>
-        <FormItem label="会员名称">
-          <Input disabled v-model="form.distributionName" clearable style="width:100%"/>
-        </FormItem>
-        <FormItem label="金额">
-          <Input disabled v-model="form.price" clearable style="width:100%"/>
-        </FormItem>
-        <FormItem label="是否通过" prop="result" v-if="handleStatus =='edit'">
-             <RadioGroup v-model="result" type="button" button-style="solid">
-                 <Radio label="VIA_AUDITING">通过</Radio>
-                 <Radio label="FAIL_AUDITING">拒绝</Radio>
-             </RadioGroup>
-        </FormItem>
-      </Form>
-      <div slot="footer" v-if="handleStatus == 'edit'">
-        <Button type="text" @click="modalVisible=false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
+  <div class="search">
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="会员名称" class="flex" prop="memberName">
+          <el-input
+            v-model="searchForm.memberName"
+            placeholder="请输入会员名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="编号" class="flex">
+          <el-input
+            v-model="searchForm.sn"
+            placeholder="请输入编号"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="状态" style="width: 240px">
+          <el-select v-model="searchForm.distributionCashStatus" clearable style="width: 150px">
+            <el-option
+              v-for="item in cashStatusList"
+              :key="item.value"
+              :value="item.value"
+              :label="item.label"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column prop="sn" label="编号" min-width="200" />
+        <el-table-column prop="distributionName" label="会员名称" min-width="120" />
+        <el-table-column label="申请金额" min-width="90">
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.price" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="申请时间" min-width="130" />
+        <el-table-column prop="name" label="姓名" min-width="100" />
+        <el-table-column prop="idNumber" label="身份证号" min-width="120" />
+        <el-table-column prop="settlementBankAccountName" label="结算银行开户行名称" min-width="120" />
+        <el-table-column prop="settlementBankAccountNum" label="结算银行开户账号" min-width="120" />
+        <el-table-column prop="settlementBankBranchName" label="结算银行开户支行名称" min-width="120" />
+        <el-table-column prop="updateTime" label="处理时间" min-width="130" />
+        <el-table-column label="状态" min-width="100">
+          <template #default="{ row }">
+            <span v-if="row">
+              <span v-if="row.distributionCashStatus == 'APPLY'">待处理</span>
+              <span v-else-if="row.distributionCashStatus == 'VIA_AUDITING'">通过</span>
+              <span v-else-if="row.distributionCashStatus == 'FAIL_AUDITING'">审核拒绝</span>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="130" align="center" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row" class="ops">
+              <a class="link-text" v-if="row.distributionCashStatus != 'APPLY'" @click="view(row)">查看</a>
+              <a class="link-text" v-else @click="edit(row)">审核</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10 page padding-row" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
       </div>
-    </Modal>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form ref="form" :model="form" label-width="100px">
+        <el-form-item label="编号">
+          <el-input v-model="form.sn" disabled clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="会员名称">
+          <el-input v-model="form.distributionName" disabled clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="金额">
+          <el-input v-model="form.price" disabled clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item v-if="handleStatus == 'edit'" label="是否通过" prop="result">
+          <el-radio-group v-model="result">
+            <el-radio-button value="VIA_AUDITING">通过</el-radio-button>
+            <el-radio-button value="FAIL_AUDITING">拒绝</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template v-if="handleStatus == 'edit'" #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import {
-auditDistributionCash,
-getDistributionCash
-} from "@/api/distribution";
-import { cashStatusList } from './dataJson';
+import { auditDistributionCash, getDistributionCash } from "@/api/distribution";
+import { cashStatusList } from "./dataJson";
+
 export default {
   name: "distributionCash",
   data() {
     return {
-      cashStatusList, // 状态列表
-      loading: true, // 表单加载状态
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
-      result: 'FAIL_AUDITING', // 是否通过
-      searchForm: { // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
+      cashStatusList,
+      loading: true,
+      modalVisible: false,
+      modalTitle: "",
+      result: "FAIL_AUDITING",
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
       },
-      handleStatus:'edit',// 判断是编辑还是查看
-      form: { // 添加或编辑表单对象初始化数据
+      handleStatus: "edit",
+      form: {
         sn: "",
         memberName: "",
         price: "",
       },
-      submitLoading: false, // 添加或编辑提交状态
-      columns: [
-        {
-          title: "编号",
-          key: "sn",
-          minWidth: 200
-        },
-        {
-          title: "会员名称",
-          key: "distributionName",
-          minWidth: 120
-        },
-        {
-          title: "申请金额",
-          key: "price",
-          minWidth: 90,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "申请时间",
-          key: "createTime",
-          minWidth: 130
-        },
-        {
-          title: "姓名",
-          key: "name",
-          minWidth: 100,
-        },
-        {
-          title: "身份证号",
-          key: "idNumber",
-          minWidth: 120,
-        },
-        {
-          title: "结算银行开户行名称",
-          key: "settlementBankAccountName",
-          minWidth: 120,
-        },
-        {
-          title: "结算银行开户账号",
-          key: "settlementBankAccountNum",
-          minWidth: 120,
-        },
-        {
-          title: "结算银行开户支行名称",
-          key: "settlementBankBranchName",
-          minWidth: 120,
-        },
-        {
-          title: "处理时间",
-          key: "updateTime",
-          minWidth: 130
-        },
-        {
-          title: "状态",
-          key: "distributionCashStatus",
-          minWidth: 100,
-          render: (h, params) => {
-              if (params.row.distributionCashStatus == 'APPLY') {
-                   return h("div", "待处理");
-              }
-              if (params.row.distributionCashStatus == 'VIA_AUDITING') {
-                   return h("div", "通过");
-              }
-              if (params.row.distributionCashStatus == 'FAIL_AUDITING') {
-                   return h("div", "审核拒绝");
-              }
-            },
-         },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 130,
-          render: (h, params) => {
-            if (params.row.distributionCashStatus != 'APPLY') {
-              return h("div", { class: "ops" }, [
-                h(
-                  "a",
-                  {
-                    on: {
-                      click: () => {
-                        this.view(params.row);
-                      }
-                    }
-                  },
-                  "查看"
-                ),
-              ]);
-            } else {
-              return h("div", { class: "ops" }, [
-                h(
-                  "a",
-                  {
-                    on: {
-                      click: () => {
-                        this.edit(params.row);
-                      }
-                    }
-                  },
-                  "审核"
-                ),
-              ]);
-            }
-          }
-        }
-      ],
-      data: [], // 表单数据
-      total: 0 // 表单数据总数
+      submitLoading: false,
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 改变页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getDataList();
     },
-    // 改变页数
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
+    changePageSize() {
+      this.searchForm.pageNumber = 1;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
-      // 带多条件搜索参数获取表单数据 请自行修改接口
-      getDistributionCash(this.searchForm).then(res => {
+      getDistributionCash(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
           this.data = res.result.records;
           this.total = res.result.total;
         }
       });
-      this.total = this.data.length;
-      this.loading = false;
     },
-    // 通过还是拒绝申请
     handleSubmit() {
-      let result = "拒绝"
-      if(this.result == 'VIA_AUDITING'){
-        result = "通过"
+      let result = "拒绝";
+      if (this.result == "VIA_AUDITING") {
+        result = "通过";
       }
-      this.$refs.form.validate(valid => {
+      this.$refs.form.validate((valid) => {
         if (valid) {
           this.$Modal.confirm({
             title: "确认审核",
-            content: "您确认要审核"+result+"么?",
+            content: "您确认要审核" + result + "么?",
             loading: true,
             onOk: () => {
-                auditDistributionCash(this.form.id,{result:this.result}).then(res => {
-                    if (res.success) {
-                      this.$Modal.remove();
-                      this.$Message.success("审核成功");
-                      this.getDataList();
-                      this.modalVisible = false;
-                    } else {
-                      this.modalVisible = false;
-                    }
-                });
-            }
-          })
+              auditDistributionCash(this.form.id, { result: this.result }).then((res) => {
+                if (res.success) {
+                  this.$Modal.remove();
+                  this.$Message.success("审核成功");
+                  this.getDataList();
+                  this.modalVisible = false;
+                } else {
+                  this.modalVisible = false;
+                }
+              });
+            },
+          });
         }
       });
     },
-    // 弹出modal 审核
     edit(v) {
       this.modalTitle = "审核";
-      this.handleStatus = 'edit';
-      this.$refs.form.resetFields();
-      // 转换null为""
+      this.handleStatus = "edit";
+      this.$refs.form?.resetFields();
       for (let attr in v) {
         if (v[attr] === null) {
           v[attr] = "";
@@ -273,12 +222,10 @@ export default {
       this.form = JSON.parse(JSON.stringify(v));
       this.modalVisible = true;
     },
-    // 弹出modal 查看
-    view(v){
+    view(v) {
       this.modalTitle = "查看";
-      this.handleStatus = 'view';
-      this.$refs.form.resetFields();
-      // 转换null为""
+      this.handleStatus = "view";
+      this.$refs.form?.resetFields();
       for (let attr in v) {
         if (v[attr] === null) {
           v[attr] = "";
@@ -288,12 +235,11 @@ export default {
       let data = JSON.parse(str);
       this.form = data;
       this.modalVisible = true;
-
-    }
+    },
   },
   mounted() {
     this.init();
-  }
+  },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/manager/src/views/distribution/distributionGoods.vue b/manager/src/views/distribution/distributionGoods.vue
index 0be3e20c..cf067931 100644
--- a/manager/src/views/distribution/distributionGoods.vue
+++ b/manager/src/views/distribution/distributionGoods.vue
@@ -1,214 +1,182 @@
 <template>
   <div>
-    <Card>
-      <Form @keydown.enter.native.prevent="handleSearch" ref="searchForm" :model="searchForm" inline :label-width="70"
-        class="search-form">
-        <Form-item label="商品名称" prop="goodsName">
-          <Input type="text" v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 240px" />
-        </Form-item>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-      </Form>
-      </Card>
-    <Card>
-      <Row class="operation" style="margin:10px 0;">
-        <Button @click="delAll" type="primary">批量下架</Button>
-      </Row>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"
-        @on-selection-change="changeSelect">
-        <template slot="goodsName" slot-scope="{row}">
-          <div>
-            <div class="div-zoom">
-              <a @click="linkTo(row.goodsId,row.skuId)">{{row.goodsName}}</a>
-            </div>
-            <Poptip trigger="hover" title="扫码在手机中查看" transfer>
-              <div slot="content">
-                <vue-qr :text="wapLinkTo(row.goodsId,row.skuId)" :margin="0" colorDark="#000" colorLight="#fff"
-                  :size="150"></vue-qr>
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter.prevent="handleSearch"
+      >
+        <el-form-item label="商品名称" prop="goodsName">
+          <el-input
+            v-model="searchForm.goodsName"
+            placeholder="请输入商品名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <div class="operation" style="margin: 10px 0">
+        <el-button type="primary" @click="delAll">批量下架</el-button>
+      </div>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+        @selection-change="changeSelect"
+      >
+        <el-table-column type="selection" width="55" align="center" fixed="left" />
+        <el-table-column label="商品图片" width="120" align="center" fixed="left">
+          <template #default="{ row }">
+            <img
+              v-if="row"
+              :src="row.thumbnail || ''"
+              alt="商品图"
+              style="cursor: pointer; width: 80px; height: 60px; margin: 10px 0; object-fit: contain"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="商品名称" min-width="220" show-overflow-tooltip>
+          <template #default="{ row }">
+            <template v-if="row">
+              <div class="div-zoom">
+                <a class="link-text" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
               </div>
-              <img src="../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="">
-            </Poptip>
-          </div>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
-          @on-page-size-change="changePageSize" :page-size-opts="[20,50,100]" size="small" show-total show-elevator
-          show-sizer></Page>
-      </Row>
-    </Card>
+              <el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
+                <template #reference>
+                  <img
+                    src="../../assets/qrcode.svg"
+                    class="hover-pointer"
+                    width="20"
+                    height="20"
+                    alt="qrcode"
+                  />
+                </template>
+                <vue-qr
+                  :text="wapLinkTo(row.goodsId, row.skuId)"
+                  :margin="0"
+                  color-dark="#000"
+                  color-light="#fff"
+                  :size="150"
+                />
+              </el-popover>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品价格" min-width="110">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">{{ $filters.unitPrice(row.price, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="quantity" label="库存" min-width="80" />
+        <el-table-column prop="createTime" label="添加时间" min-width="160" />
+        <el-table-column prop="storeName" label="店铺名称" min-width="120" show-overflow-tooltip />
+        <el-table-column label="佣金金额" min-width="110">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">{{ $filters.unitPrice(row.commission, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="100" align="center" fixed="right">
+          <template #default="{ row }">
+            <a v-if="row" class="link-text" @click="remove(row)">下架</a>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
 import { delDistributionGoods, getDistributionGoods } from "@/api/distribution";
 import vueQr from "vue-qr";
+
 export default {
-  components: {
-    "vue-qr": vueQr,
-  },
   name: "distributionGoods",
+  components: { vueQr },
   data() {
     return {
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
       },
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-          fixed: "left",
-        },
-        {
-          title: "商品图片",
-          fixed: "left",
-          key: "thumbnail",
-          width: 120,
-          align: "center",
-          render: (h, params) => {
-            return h("img", {
-              attrs: {
-                src: params.row.thumbnail || '',
-                alt: "加载图片失败",
-              },
-              style: {
-                cursor: "pointer",
-                width: "80px",
-                height: "60px",
-                margin: "10px 0",
-                "object-fit": "contain",
-              },
-            });
-          },
-        },
-        {
-          title: "商品名称",
-          slot: "goodsName",
-          minWidth: 200,
-          tooltip: true,
-        },
-        {
-          title: "商品价格",
-          key: "price",
-          minWidth: 100,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-          },
-
-        },
-        {
-          title: "库存",
-          key: "quantity",
-          minWidth: 80,
-        },
-        {
-          title: "添加时间",
-          key: "createTime",
-          minWidth: 100,
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          minWidth: 100,
-          tooltip: true,
-        },
-        {
-          title: "佣金金额",
-          key: "commission",
-          minWidth: 100,
-          sortable: false,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.commission,color:this.$mainColor}} );
-          },
-
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          minWidth: 100,
-          render: (h, params) => {
-            return h("div", { class: "ops" }, [
-              h(
-                "a",
-                {
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "下架"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
       this.clearSelectAll();
     },
-    // 分页 改变页数
     changePageSize(v) {
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 清除选中状态
     clearSelectAll() {
-      this.$refs.table.selectAll(false);
+      this.$refs.table?.clearSelection();
     },
-    // 选中后赋值
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
-      getDistributionGoods(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-      this.total = this.data.length;
-      this.loading = false;
+      getDistributionGoods(this.searchForm)
+        .then((res) => {
+          if (res.success) {
+            this.data = res.result.records;
+            this.total = res.result.total;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
-    // 下架商品
     remove(v) {
       this.$Modal.confirm({
         title: "确认下架",
         content: "您确认要下架么?",
         loading: true,
         onOk: () => {
-          // 下架
           delDistributionGoods(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -219,7 +187,6 @@ export default {
         },
       });
     },
-    // 批量下架
     delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未选择要下架的数据");
@@ -230,11 +197,7 @@ export default {
         content: "您确认要下架所选的 " + this.selectCount + " 条数据?",
         loading: true,
         onOk: () => {
-          let ids = [];
-          this.selectList.forEach((item) => {
-            ids.push(item.id);
-          });
-          // 批量下架
+          const ids = this.selectList.map((item) => item.id);
           delDistributionGoods(ids.toString()).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -252,17 +215,24 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
-.ops a {
-  color: #2d8cf0;
+.link-text {
+  color: #409eff;
   cursor: pointer;
   text-decoration: none;
 }
-.ops span {
-  display: inline-block;
-  margin: 0 8px;
-  color: #dcdee2;
+.div-zoom {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 4px;
+}
+.hover-pointer {
+  cursor: pointer;
+  vertical-align: middle;
+}
+.mt_10 {
+  margin-top: 10px;
 }
 </style>
-
-
diff --git a/manager/src/views/distribution/distributionOrder.vue b/manager/src/views/distribution/distributionOrder.vue
index 1ac678a8..54c21f76 100644
--- a/manager/src/views/distribution/distributionOrder.vue
+++ b/manager/src/views/distribution/distributionOrder.vue
@@ -1,258 +1,281 @@
 <template>
   <div>
-    <Card>
-      <Form ref="searchForm" @keydown.enter.native="handleSearch" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="订单编号"  prop="orderSn">
-          <Input
-            type="text"
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="订单编号" prop="orderSn">
+          <el-input
             v-model="searchForm.orderSn"
             placeholder="请输入订单编号"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="分销商" prop="distributionName">
-          <Input
-            type="text"
+        </el-form-item>
+        <el-form-item label="分销商" prop="distributionName">
+          <el-input
             v-model="searchForm.distributionName"
             placeholder="请输入分销商名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="店铺名称">
-          <Select v-model="searchForm.storeId" placeholder="请选择" @on-query-change="searchChange" filterable
-                  clearable style="width: 240px">
-            <Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.storeName }}</Option>
-          </Select>
-        </Form-item>
-        <Form-item label="订单时间">
-          <DatePicker type="daterange" v-model="timeRange" format="yyyy-MM-dd" placeholder="选择时间"
-                      style="width: 240px"></DatePicker>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-      </Form>
-      </Card>
-    <Card>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10">
-        <template slot-scope="{row}" slot="goodsMsg">
-          <div class="goods-msg">
-            <img :src="row.image" width="60" height="60" alt="">
-            <div>
-              <div class="div-zoom">
-                <a @click="linkTo(row.goodsId,row.skuId)">{{row.goodsName}}</a>
-              </div>
-              <div style="color:#999;font-size:10px">数量：x{{row.num}}</div>
-              <Poptip trigger="hover" title="扫码在手机中查看" transfer>
-                <div slot="content">
-                  <vue-qr :text="wapLinkTo(row.goodsId,row.skuId)"  :margin="0" colorDark="#000" colorLight="#fff" :size="150"></vue-qr>
+        </el-form-item>
+        <el-form-item label="店铺名称">
+          <el-select
+            v-model="searchForm.storeId"
+            placeholder="请选择"
+            filterable
+            remote
+            :remote-method="searchChange"
+            clearable
+            style="width: 240px"
+          >
+            <el-option
+              v-for="item in shopList"
+              :key="item.id"
+              :label="item.storeName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="订单时间">
+          <el-date-picker
+            v-model="timeRange"
+            type="daterange"
+            value-format="YYYY-MM-DD"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            placeholder="选择时间"
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="orderSn"
+          label="订单编号"
+          min-width="180"
+          fixed="left"
+          show-overflow-tooltip
+        />
+        <el-table-column label="商品信息" min-width="200">
+          <template #default="{ row }">
+            <div v-if="row" class="goods-msg">
+              <img :src="row.image" width="60" height="60" alt="" />
+              <div>
+                <div class="div-zoom">
+                  <a class="link-text" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
                 </div>
-                <img src="../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="">
-              </Poptip>
+                <div style="color: #999; font-size: 10px">数量：x{{ row.num }}</div>
+                <el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
+                  <template #reference>
+                    <img
+                      src="../../assets/qrcode.svg"
+                      class="hover-pointer"
+                      width="20"
+                      height="20"
+                      alt="qrcode"
+                    />
+                  </template>
+                  <vue-qr
+                    :text="wapLinkTo(row.goodsId, row.skuId)"
+                    :margin="0"
+                    color-dark="#000"
+                    color-light="#fff"
+                    :size="150"
+                  />
+                </el-popover>
+              </div>
             </div>
-          </div>
-        </template>
-        <template slot-scope="{row}" slot="distributionOrderStatus">
-          <Tag :color="filterStatusColor(row.distributionOrderStatus)">{{filterStatus(row.distributionOrderStatus)}}</Tag>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
-          @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20,50,100]"
-          size="small" show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
+          </template>
+        </el-table-column>
+        <el-table-column prop="distributionName" label="分销商" min-width="100" show-overflow-tooltip />
+        <el-table-column prop="storeName" label="店铺名称" min-width="100" show-overflow-tooltip />
+        <el-table-column label="状态" min-width="90">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="filterStatusTagType(row.distributionOrderStatus)">
+              {{ filterStatus(row.distributionOrderStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="佣金金额" min-width="100">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">
+              {{ $filters.unitPrice(row.rebate, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" min-width="160" fixed="right" />
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
-  import {
-    getDistributionOrder
-  } from "@/api/distribution";
-  import {orderStatusList} from './dataJson'
-  import {getShopListData} from '@/api/shops'
-  import vueQr from 'vue-qr'
+import { getDistributionOrder } from "@/api/distribution";
+import { orderStatusList } from "./dataJson";
+import { getShopListData } from "@/api/shops";
+import vueQr from "vue-qr";
 
-  export default {
-    name: "distributionOrder",
-    components: {
-         "vue-qr":vueQr
+export default {
+  name: "distributionOrder",
+  components: { vueQr },
+  data() {
+    return {
+      timeRange: [],
+      orderStatusList,
+      shopList: [],
+      distributionId: this.$route.query.id,
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "create_time",
+        order: "desc",
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  watch: {
+    $route(e) {
+      this.distributionId = e.query.id ? e.query.id : undefined;
+      this.getDataList();
     },
-    data() {
-      return {
-        timeRange: [], // 范围时间
-        orderStatusList, // 订单状态列表
-        shopList: [], // 店铺列表
-        distributionId: this.$route.query.id, // 分销id
-        loading: true, // 表单加载状态
-        searchForm: { // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort:"create_time",
-          order:"desc"
-        },
-        columns: [
-          {
-            title: "订单编号",
-            key: "orderSn",
-            minWidth: 180,
-            fixed: "left",
-            tooltip: true
-          },
-          {
-            title: '商品信息',
-            slot: 'goodsMsg',
-            minWidth: 150
-          },
-
-          {
-            title: "分销商",
-            key: "distributionName",
-            tooltip: true,
-            minWidth:80,
-          },
-          {
-            title: "店铺名称",
-            key: "storeName",
-            minWidth:80,
-            tooltip: true
-          },
-          {
-            title: "状态",
-            slot: "distributionOrderStatus",
-            minWidth:80,
-          },
-          {
-            title: "佣金金额",
-            key: "rebate",
-            minWidth:80,
-            sortable: false,
-            render: (h, params) => {
-              return h("priceColorScheme", {props:{value:params.row.rebate,color:this.$mainColor}} );
-            },
-
-
-          },
-          {
-            fixed: "right",
-            title: "创建时间",
-            key: "createTime",
-            minWidth:100,
-            sortable: false,
-          }
-        ],
-        data: [], // 表单数据
-        total: 0 // 表单数据总数
-      };
+  },
+  methods: {
+    init() {
+      this.getDataList();
+      this.getShopList();
     },
-    methods: {
-      // 初始化数据
-      init() {
-        this.getDataList();
-        this.getShopList()
-      },
-      //分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      // 搜索
-      handleSearch() {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 20;
-        this.getDataList();
-      },
-      // 获取列表数据
-      getDataList() {
-        this.searchForm.distributionId = this.distributionId;
-        this.loading = true;
-        if (this.timeRange && this.timeRange[0]) {
-          let startTime = this.timeRange[0]
-          let endTime = this.timeRange[1]
-          this.searchForm.startTime = this.$options.filters.unixToDate(startTime / 1000)
-          this.searchForm.endTime = this.$options.filters.unixToDate(endTime / 1000)
-        }
-        // 带多条件搜索参数获取表单数据 请自行修改接口
-        getDistributionOrder(this.searchForm).then(res => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-
-            this.total = res.result.total;
-          }
-        });
-        this.total = this.data.length;
+    changePage() {
+      this.getDataList();
+    },
+    changePageSize() {
+      this.searchForm.pageNumber = 1;
+      this.getDataList();
+    },
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 20;
+      this.getDataList();
+    },
+    getDataList() {
+      this.searchForm.distributionId = this.distributionId;
+      this.loading = true;
+      if (this.timeRange && this.timeRange[0] && this.timeRange[1]) {
+        const startTime = new Date(this.timeRange[0]).getTime();
+        const endTime = new Date(this.timeRange[1]).getTime();
+        this.searchForm.startTime = this.$filters.unixToDate(startTime / 1000);
+        this.searchForm.endTime = this.$filters.unixToDate(endTime / 1000);
+      } else {
+        this.searchForm.startTime = null;
+        this.searchForm.endTime = null;
+      }
+      getDistributionOrder(this.searchForm).then((res) => {
         this.loading = false;
-      },
-      getShopList(val) { // 获取店铺列表 搜索用
-        const params = {
-          pageNumber: 1,
-          pageSize: 20,
-          storeName: ''
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
         }
-        if (val) {
-          params.storeName = val;
-        } else {
-          params.storeName = ''
-        }
-
-        getShopListData(params).then(res => {
-          this.shopList = res.result.records
-        })
-      },
-      searchChange(val) { // 店铺搜索，键盘点击回调
-        this.getShopList(val)
-      },
-      filterStatus (status) { // 过滤订单状态
-        const arr = [
-          {status: 'NO_COMPLETED', title: '未完成'},
-          {status: 'COMPLETE', title: '完成'},
-          {status: 'REFUND', title: '退款'},
-        ]
-        for (let i=0;i<arr.length;i++) {
-          if (arr[i].status === status) {
-            return arr[i].title;
-          }
-        }
-        return '未完成'; // 默认返回未完成
-      },
-      filterStatusColor (status) { // 状态tag标签颜色
-        const arr = [
-          {status: 'NO_COMPLETED', color: 'orange'},
-          {status: 'COMPLETE', color: 'green'},
-          {status: 'REFUND', color: 'red'},
-        ]
-        for (let i=0;i<arr.length;i++) {
-          if (arr[i].status === status) {
-            return arr[i].color;
-          }
-        }
-        return 'orange'; // 默认返回橙色
-      }
+      });
     },
-    mounted() {
-      this.init();
+    getShopList(val) {
+      const params = {
+        pageNumber: 1,
+        pageSize: 20,
+        storeName: val || "",
+      };
+      getShopListData(params).then((res) => {
+        this.shopList = res.result.records;
+      });
     },
-    watch: {
-      $route(e) { // 监听路由，参数变化调取接口
-        this.distributionId = e.query.id ? e.query.id : undefined;
-        this.getDataList();
+    searchChange(val) {
+      this.getShopList(val);
+    },
+    filterStatus(status) {
+      const arr = [
+        { status: "NO_COMPLETED", title: "未完成" },
+        { status: "COMPLETE", title: "完成" },
+        { status: "REFUND", title: "退款" },
+      ];
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].status === status) {
+          return arr[i].title;
+        }
       }
-    }
-  };
+      return "未完成";
+    },
+    filterStatusTagType(status) {
+      const arr = [
+        { status: "NO_COMPLETED", type: "warning" },
+        { status: "COMPLETE", type: "success" },
+        { status: "REFUND", type: "danger" },
+      ];
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].status === status) {
+          return arr[i].type;
+        }
+      }
+      return "warning";
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
-<style lang="scss">
-  .goods-msg {
-    display: flex;
-    align-items: center;
-    >div{
-      margin-left: 10px;
-    }
-  }
-</style>
 
+<style lang="scss">
+.goods-msg {
+  display: flex;
+  align-items: center;
+  > div {
+    margin-left: 10px;
+  }
+}
+
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.hover-pointer {
+  cursor: pointer;
+}
+
+.mt_10 {
+  margin-top: 10px;
+}
+</style>
diff --git a/manager/src/views/distribution/distributionSetting.vue b/manager/src/views/distribution/distributionSetting.vue
index 2cf26d45..2282398e 100644
--- a/manager/src/views/distribution/distributionSetting.vue
+++ b/manager/src/views/distribution/distributionSetting.vue
@@ -1,22 +1,17 @@
 <template>
-  <div style="background-color: #fff;">
-
-    <Form ref="form" :model="form" :rules="formRule" :label-width="120" style="padding: 10px;">
-
-      <Divider orientation="left">分销设置</Divider>
-      <FormItem label="是否开启分销" prop="isOpen">
-        <i-switch size="large" v-model="form.isOpen" :true-value="true" :false-value="false">
-          <span slot="open">开启</span>
-          <span slot="close">关闭</span>
-        </i-switch>
-      </FormItem>
-      <FormItem label="分销关系绑定天数" prop="distributionDay">
-        <InputNumber :min="1" :max="365" style="width:100px;" v-model="form.distributionDay"></InputNumber>
-      </FormItem>
-      <FormItem>
-        <Button type="primary" @click="submit">保存</Button>
-      </FormItem>
-    </Form>
+  <div style="background-color: #fff">
+    <el-form ref="form" :model="form" :rules="formRule" label-width="140px" style="padding: 10px">
+      <el-divider content-position="left">分销设置</el-divider>
+      <el-form-item label="是否开启分销" prop="isOpen">
+        <el-switch v-model="form.isOpen" active-text="开启" inactive-text="关闭" />
+      </el-form-item>
+      <el-form-item label="分销关系绑定天数" prop="distributionDay">
+        <el-input-number v-model="form.distributionDay" :min="1" :max="365" style="width: 120px" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submit">保存</el-button>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
@@ -28,26 +23,22 @@ export default {
   data() {
     return {
       form: {
-        // 添加或编辑表单对象初始化数据
         isOpen: true,
-        distributionDay: 0, //分销关系绑定天数
+        distributionDay: 1,
       },
       formRule: {
-        isOpen: [
-          regular.REQUIRED
-        ],
-        distributionDay: [
-          regular.REQUIRED
-        ],
-      }
+        isOpen: [regular.REQUIRED],
+        distributionDay: [regular.REQUIRED],
+      },
     };
   },
+  mounted() {
+    this.init();
+  },
   methods: {
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 获取分销设置数据
     getDataList() {
       getSetting("DISTRIBUTION_SETTING").then((res) => {
         if (res.success) {
@@ -55,20 +46,17 @@ export default {
         }
       });
     },
-    // 提交api
     submit() {
-      setSetting("DISTRIBUTION_SETTING", this.form).then((res) => {
-        if (res.success) {
-          this.$Message.success("操作成功");
-          this.getDataList();
-        }
+      this.$refs.form.validate((valid) => {
+        if (!valid) return;
+        setSetting("DISTRIBUTION_SETTING", this.form).then((res) => {
+          if (res.success) {
+            this.$Message.success("操作成功");
+            this.getDataList();
+          }
+        });
       });
     },
   },
-  mounted() {
-    this.init();
-  },
 };
 </script>
-<style lang="scss" scoped>
-</style>
diff --git a/manager/src/views/error-page/403.vue b/manager/src/views/error-page/403.vue
index 35e02ae0..dc816f3e 100644
--- a/manager/src/views/error-page/403.vue
+++ b/manager/src/views/error-page/403.vue
@@ -1,19 +1,18 @@
-
 <template>
   <div class="error403">
     <div class="error403-body-con">
-      <Card>
-        <div class="error403-body-con-title">4<span class="error403-0-span">
-            <Icon type="android-lock"></Icon>
-          </span><span class="error403-key-span">
-            <Icon size="220" type="ios-bolt"></Icon>
-          </span></div>
+      <el-card>
+        <div class="error403-body-con-title">
+          4<span class="error403-0-span">🔒</span><span class="error403-key-span">⚡</span>
+        </div>
         <p class="error403-body-con-message">You don't have permission</p>
         <div class="error403-btn-con">
-          <Button @click="goHome" size="large" style="width: 200px;" type="text">返回首页</Button>
-          <Button @click="backPage" size="large" style="width: 200px;margin-left: 40px;" type="primary">返回上一页</Button>
+          <el-button size="large" style="width: 200px" @click="goHome">返回首页</el-button>
+          <el-button size="large" type="primary" style="width: 200px; margin-left: 40px" @click="backPage">
+            返回上一页
+          </el-button>
         </div>
-      </Card>
+      </el-card>
     </div>
   </div>
 </template>
@@ -22,11 +21,9 @@
 export default {
   name: "Error403",
   methods: {
-    // 返回上一页
     backPage() {
       this.$router.go(-1);
     },
-    // 返回首页
     goHome() {
       this.$router.push({
         name: "home_index",
@@ -35,6 +32,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @keyframes error403animation {
   0% {
@@ -84,14 +82,8 @@ export default {
         border: 20px solid #ed3f14;
         color: #ed3f14;
         margin-right: 10px;
-        i {
-          display: inline-block;
-          font-size: 120px;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-        }
+        font-size: 80px;
+        line-height: 130px;
       }
       .error403-key-span {
         display: inline-block;
@@ -100,15 +92,8 @@ export default {
         height: 190px;
         border-radius: 50%;
         margin-right: 10px;
-        i {
-          display: inline-block;
-          font-size: 190px;
-          position: absolute;
-          left: 20px;
-          transform: translate(-50%, -60%);
-          transform-origin: center bottom;
-          animation: error403animation 2.8s ease 0s infinite;
-        }
+        font-size: 80px;
+        animation: error403animation 2.8s ease 0s infinite;
       }
     }
     &-message {
@@ -127,4 +112,3 @@ export default {
   }
 }
 </style>
-
diff --git a/manager/src/views/error-page/404.vue b/manager/src/views/error-page/404.vue
index c9676774..7b34d24b 100644
--- a/manager/src/views/error-page/404.vue
+++ b/manager/src/views/error-page/404.vue
@@ -1,27 +1,18 @@
-
 <template>
   <div class="error404">
     <div class="error404-body-con">
-      <Card>
+      <el-card>
         <div class="error404-body-con-title">
-          4<span><Icon type="ios-navigate-outline"></Icon></span>4
+          4<span>🧭</span>4
         </div>
-        <p class="error404-body-con-message">
-          YOU&nbsp;&nbsp;LOOK&nbsp;&nbsp;LOST
-        </p>
+        <p class="error404-body-con-message">YOU&nbsp;&nbsp;LOOK&nbsp;&nbsp;LOST</p>
         <div class="error404-btn-con">
-          <Button @click="goHome" size="large" style="width: 200px" type="text"
-            >返回首页</Button
-          >
-          <Button
-            @click="backPage"
-            size="large"
-            style="width: 200px; margin-left: 40px"
-            type="primary"
-            >返回上一页</Button
-          >
+          <el-button size="large" style="width: 200px" @click="goHome">返回首页</el-button>
+          <el-button size="large" type="primary" style="width: 200px; margin-left: 40px" @click="backPage">
+            返回上一页
+          </el-button>
         </div>
-      </Card>
+      </el-card>
     </div>
   </div>
 </template>
@@ -30,11 +21,9 @@
 export default {
   name: "Error404",
   methods: {
-    // 返回上一页
     backPage() {
       this.$router.go(-1);
     },
-    // 返回首页
     goHome() {
       this.$router.push({
         name: "home_index",
@@ -43,6 +32,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @keyframes error404animation {
   0% {
@@ -83,7 +73,7 @@ export default {
       span {
         display: inline-block;
         color: #19be6b;
-        font-size: 230px;
+        font-size: 120px;
         animation: error404animation 3s ease 0s infinite alternate;
       }
     }
diff --git a/manager/src/views/error-page/500.vue b/manager/src/views/error-page/500.vue
index 6a73bec5..0d9769e7 100644
--- a/manager/src/views/error-page/500.vue
+++ b/manager/src/views/error-page/500.vue
@@ -1,30 +1,18 @@
-
-
 <template>
   <div class="error500">
     <div class="error500-body-con">
-      <Card>
+      <el-card>
         <div class="error500-body-con-title">
-          5<span class="error500-0-span"
-            ><Icon type="social-freebsd-devil"></Icon></span
-          ><span class="error500-0-span"
-            ><Icon type="social-freebsd-devil"></Icon
-          ></span>
+          5<span class="error500-0-span">😈</span><span class="error500-0-span">😈</span>
         </div>
         <p class="error500-body-con-message">Oops! the server is wrong</p>
         <div class="error500-btn-con">
-          <Button @click="goHome" size="large" style="width: 200px" type="text"
-            >返回首页</Button
-          >
-          <Button
-            @click="backPage"
-            size="large"
-            style="width: 200px; margin-left: 40px"
-            type="primary"
-            >返回上一页</Button
-          >
+          <el-button size="large" style="width: 200px" @click="goHome">返回首页</el-button>
+          <el-button size="large" type="primary" style="width: 200px; margin-left: 40px" @click="backPage">
+            返回上一页
+          </el-button>
         </div>
-      </Card>
+      </el-card>
     </div>
   </div>
 </template>
@@ -33,11 +21,9 @@
 export default {
   name: "Error500",
   methods: {
-    // 返回上一页
     backPage() {
       this.$router.go(-1);
     },
-    // 返回首页
     goHome() {
       this.$router.push({
         name: "home_index",
@@ -46,6 +32,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @keyframes error500animation {
   0% {
@@ -86,21 +73,15 @@ export default {
       .error500-0-span {
         display: inline-block;
         position: relative;
-        width: 170px;
-        height: 170px;
+        width: 120px;
+        height: 120px;
         border-radius: 50%;
         border: 20px solid #ed3f14;
         color: #ed3f14;
         margin-right: 10px;
-        i {
-          display: inline-block;
-          font-size: 120px;
-          position: absolute;
-          bottom: -10px;
-          left: 10px;
-          transform-origin: center bottom;
-          animation: error500animation 3s ease 0s infinite alternate;
-        }
+        font-size: 60px;
+        line-height: 80px;
+        animation: error500animation 3s ease 0s infinite alternate;
       }
     }
     &-message {
diff --git a/manager/src/views/goods-unit/index.vue b/manager/src/views/goods-unit/index.vue
index 7d78d33b..d63aeedd 100644
--- a/manager/src/views/goods-unit/index.vue
+++ b/manager/src/views/goods-unit/index.vue
@@ -1,52 +1,67 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation">
-        <Button @click="add" type="primary">添加</Button>
-        <Button @click="delAll">批量删除</Button>
-      </Row>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-        sortable="custom"
-        @on-selection-change="changeSelect"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
-          :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
-          size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
-    <Modal
-      :title="modalTitle"
-      v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
-    >
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="计量单位" prop="name">
-          <Input v-model="form.name" clearable style="width: 100%" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-          >提交</Button
-        >
+    <el-card>
+      <div class="operation">
+        <el-button type="primary" @click="add">添加</el-button>
+        <el-button @click="delAll">批量删除</el-button>
       </div>
-    </Modal>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%"
+        row-key="id"
+        @selection-change="changeSelect"
+      >
+        <el-table-column type="selection" width="60" align="center" />
+        <el-table-column prop="name" label="计量单位" min-width="120" />
+        <el-table-column prop="createTime" label="创建时间" width="180" />
+        <el-table-column prop="updateTime" label="更新时间" width="180" />
+        <el-table-column prop="createBy" label="操作人" min-width="150" />
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="edit(row)">修改</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+        <el-form-item label="计量单位" prop="name">
+          <el-input v-model="form.name" clearable style="width: 100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -55,156 +70,64 @@ import {
   addGoodsUnit,
   getGoodsUnitPage,
   updateGoodsUnit,
-  delGoodsUnit
+  delGoodsUnit,
 } from "@/api/index";
-
-import {regular} from "@/utils";
+import { regular } from "@/utils";
 
 export default {
   name: "goods-unit",
   data() {
     return {
-      loading: true, // 表单加载状态
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
+      loading: true,
+      modalVisible: false,
+      modalTitle: "",
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
         name: "",
       },
       form: {
-        // 添加或编辑表单对象初始化数据
         name: "",
       },
-      // 表单验证规则
       formValidate: {
-        name: [
-          regular.REQUIRED,
-          regular.VARCHAR5
-        ]
+        name: [regular.REQUIRED, regular.VARCHAR5],
       },
-      submitLoading: false, // 添加或编辑提交状态
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "计量单位",
-          key: "name",
-          minWidth: 120
-        },
-
-        {
-          title: "创建时间",
-          key: "createTime",
-          width: 180
-        },
-        {
-          title: "更新时间",
-          key: "updateTime",
-          width: 180
-        },
-        {
-          title: "操作人",
-          key: "createBy",
-          minWidth: 150
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 200,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.edit(params.row);
-                    },
-                  },
-                },
-                "修改"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      submitLoading: false,
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
       this.clearSelectAll();
     },
-    // 分页 改变页数
     changePageSize(v) {
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 清除选中
     clearSelectAll() {
-      this.$refs.table.selectAll(false);
+      this.$refs.table?.clearSelection();
     },
-    // 选中回调
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
-
       getGoodsUnitPage(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
@@ -215,20 +138,16 @@ export default {
       this.total = this.data.length;
       this.loading = false;
     },
-    // 修改后提交
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
           this.submitLoading = true;
-
           if (this.modalTitle == "添加") {
-
-            if(this.data.find(item=>item.name == this.form.name)){
-              this.$Message.error('请勿添加重复计量单位!')
-              this.submitLoading = false
-              return
+            if (this.data.find((item) => item.name == this.form.name)) {
+              this.$Message.error("请勿添加重复计量单位!");
+              this.submitLoading = false;
+              return;
             }
-            // 添加 避免编辑后传入id等数据 记得删除
             delete this.form.id;
             addGoodsUnit(this.form).then((res) => {
               this.submitLoading = false;
@@ -239,7 +158,6 @@ export default {
               }
             });
           } else {
-            // 编辑
             updateGoodsUnit(this.id, this.form).then((res) => {
               this.submitLoading = false;
               if (res.success) {
@@ -252,30 +170,24 @@ export default {
         }
       });
     },
-    // 添加
     add() {
       this.modalTitle = "添加";
       this.form = {};
-      this.$refs.form.resetFields();
-
+      this.$refs.form?.resetFields();
       this.modalVisible = true;
     },
-    // 编辑
     edit(v) {
       this.id = v.id;
       this.modalTitle = "修改";
       this.modalVisible = true;
       this.form.name = v.name;
     },
-    // 删除
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
-        // 记得确认修改此处
         content: "您确认要删除 " + v.name + " ?",
         loading: true,
         onOk: () => {
-          // 删除
           delGoodsUnit(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -286,8 +198,6 @@ export default {
         },
       });
     },
-
-    // 全部删除
     delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未选择要删除的数据");
@@ -303,7 +213,6 @@ export default {
             ids += e.id + ",";
           });
           ids = ids.substring(0, ids.length - 1);
-          // 批量删除
           delGoodsUnit(ids).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -312,9 +221,9 @@ export default {
               this.getDataList();
             }
           });
-        }
+        },
       });
-    }
+    },
   },
   mounted() {
     this.init();
diff --git a/manager/src/views/goods/goods-info/goods.vue b/manager/src/views/goods/goods-info/goods.vue
index efee23c9..06dff7a9 100644
--- a/manager/src/views/goods/goods-info/goods.vue
+++ b/manager/src/views/goods/goods-info/goods.vue
@@ -1,253 +1,289 @@
 <template>
   <div class="search">
-    <Card>
-      <Form
+    <el-card>
+      <el-form
         ref="searchForm"
         :model="searchForm"
         inline
-        :label-width="70"
+        label-width="70px"
         class="search-form"
-        @keydown.enter.native="handleSearch"
+        @keyup.enter="handleSearch"
       >
-        <Form-item label="商品名称" prop="goodsName">
-          <Input
-            type="text"
+        <el-form-item label="商品名称" prop="goodsName">
+          <el-input
             v-model="searchForm.goodsName"
             placeholder="请输入商品名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="商品编号" prop="id">
-          <Input
-            type="text"
+        </el-form-item>
+        <el-form-item label="商品编号" prop="id">
+          <el-input
             v-model="searchForm.id"
             placeholder="请输入商品编号"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="店铺名称" prop="id">
-          <Input
-            type="text"
+        </el-form-item>
+        <el-form-item label="店铺名称" prop="storeName">
+          <el-input
             v-model="searchForm.storeName"
             placeholder="请输入店铺名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="销售模式" prop="status">
-          <Select
+        </el-form-item>
+        <el-form-item label="销售模式" prop="salesModel">
+          <el-select
             v-model="searchForm.salesModel"
             placeholder="请选择"
             clearable
             style="width: 240px"
           >
-            <Option value="RETAIL">零售</Option>
-            <Option value="WHOLESALE">批发</Option>
-          </Select>
-        </Form-item>
-        <Form-item label="商品类型" prop="status">
-          <Select
+            <el-option label="零售" value="RETAIL" />
+            <el-option label="批发" value="WHOLESALE" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商品类型" prop="goodsType">
+          <el-select
             v-model="searchForm.goodsType"
             placeholder="请选择"
             clearable
             style="width: 240px"
           >
-            <Option value="PHYSICAL_GOODS">实物商品</Option>
-            <Option value="VIRTUAL_GOODS">虚拟商品</Option>
-          </Select>
-        </Form-item>
-        <Form-item label="商品分组" prop="groupId">
-          <Select
+            <el-option label="实物商品" value="PHYSICAL_GOODS" />
+            <el-option label="虚拟商品" value="VIRTUAL_GOODS" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商品分组" prop="groupId">
+          <el-select
             v-model="searchForm.groupId"
             placeholder="请选择商品分组"
             clearable
             filterable
             style="width: 240px"
           >
-            <Option v-for="item in goodsGroupList" :value="item.id" :key="item.id">{{ item.groupName }}</Option>
-          </Select>
-        </Form-item>
-        <Button
-          @click="handleSearch"
-          class="search-btn"
-          type="primary"
-          icon="ios-search"
-          >搜索</Button
-        >
-      </Form>
-    </Card>
-    <Card>
+            <el-option
+              v-for="item in goodsGroupList"
+              :key="item.id"
+              :label="item.groupName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-       <div class="goods-tab">
-        <Tabs v-model="currentStatus" @on-click="goodsStatusClick">
-          <TabPane v-for="(item,index) in goodsStatusWithCount" :key="index" :label="item.title" :name="item.value">
-          </TabPane>
-        </Tabs>
+    <el-card>
+      <div class="goods-tab">
+        <el-tabs v-model="currentStatus" @tab-click="onStatusTabClick">
+          <el-tab-pane
+            v-for="(item, index) in goodsStatusWithCount"
+            :key="index"
+            :label="item.title"
+            :name="item.value"
+          />
+        </el-tabs>
       </div>
 
-      <!-- 批量操作按钮 -->
-      <div class="batch-operations" style="margin: 10px 0;">
-        <Button
+      <div class="batch-operations" style="margin: 10px 0">
+        <el-button
           type="primary"
           :disabled="selectedRows.length === 0"
+          style="margin-right: 10px"
           @click="openSetGoodsGroup"
-          style="margin-right: 10px;"
         >
           批量设置分组
-        </Button>
-        <Button
+        </el-button>
+        <el-button
           type="success"
           :disabled="selectedRows.length === 0"
+          style="margin-right: 10px"
           @click="batchUpper"
-          style="margin-right: 10px;"
         >
           批量上架
-        </Button>
-        <Button
+        </el-button>
+        <el-button
           type="warning"
           :disabled="selectedRows.length === 0"
+          style="margin-right: 10px"
           @click="batchLower"
-          style="margin-right: 10px;"
         >
           批量下架
-        </Button>
-        <Button
+        </el-button>
+        <el-button
           v-if="currentStatus === 'TOBEAUDITED'"
           type="primary"
           :disabled="selectedRows.length === 0"
           @click="batchAudit"
         >
           批量审核
-        </Button>
+        </el-button>
       </div>
 
-      <Table
-        :loading="loading"
-        :columns="columns"
-        :data="data"
+      <el-table
         ref="table"
+        v-loading="loading"
+        :data="data"
         class="mt_10"
-        @on-select="onSelect"
-        @on-select-all="onSelectAll"
-        @on-selection-change="onSelectionChange"
+        row-key="id"
+        @selection-change="onSelectionChange"
       >
-        <!-- 商品图片格式化 -->
-        <template slot="imageSlot" slot-scope="{ row }">
-          <div style="margin-top: 5px;">
+        <el-table-column type="selection" width="100" align="center" />
+        <el-table-column prop="id" label="商品ID" width="200" show-overflow-tooltip />
+        <el-table-column label="商品图片" width="100" align="center">
+          <template #default="{ row }">
             <img
+              v-if="row && row.original"
               :src="row.original"
-              style="height: 50px; width: 50px; object-fit: cover;"
+              style="height: 50px; width: 50px; object-fit: cover"
             />
-          </div>
-        </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品名称" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            <a class="link-text" @click="linkTo(row.id, row.skuId)">{{ row.goodsName }}</a>
+          </template>
+        </el-table-column>
+        <el-table-column label="价格" width="200">
+          <template #default="{ row }">
+            <span :style="{ color: $mainColor }">{{ $filters.unitPrice(row.price, '￥') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="buyCount" label="销量" width="150" />
+        <el-table-column prop="quantity" label="库存" width="150" />
+        <el-table-column label="销售模式" width="150">
+          <template #default="{ row }">
+            <span v-if="row">{{ salesModelText(row.salesModel) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品类型" width="150">
+          <template #default="{ row }">
+            <span v-if="row">{{ goodsTypeText(row.goodsType) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="150">
+          <template #default="{ row }">
+            <span v-if="row">{{ marketEnableText(row.marketEnable) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="审核状态" width="150">
+          <template #default="{ row }">
+            <span v-if="row">{{ authFlagText(row.authFlag) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="storeName" label="店铺名称" width="200" show-overflow-tooltip />
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row.authFlag === 'TOBEAUDITED'">
+              <a class="link-text" @click="openAuditModal(row)">审核</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="showDetail(row)">查看</a>
+            </template>
+            <template v-else-if="row.marketEnable === 'DOWN'">
+              <a class="link-text" @click="upper(row)">上架</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="showDetail(row)">查看</a>
+            </template>
+            <template v-else>
+              <a class="link-text" @click="edit(row)">下架</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="showDetail(row)">查看</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
 
-        <!-- 商品栏目格式化 -->
-        <template slot="goodsSlot" slot-scope="{ row }">
-          <div style="margin: 5px 0px; padding: 10px 0px;">
-            <div class="div-zoom">
-              <a @click="linkTo(row.id, row.skuId)">{{ row.goodsName }}</a>
-            </div>
-          </div>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
-    <Modal
-      title="下架操作"
-      v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
-    >
-      <Form ref="underForm" :model="underForm" :label-width="100">
-        <FormItem label="下架原因" prop="reason">
-          <Input v-model="underForm.reason" clearable style="width: 100%" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="lower"
-          >提交</Button
-        >
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
       </div>
-    </Modal>
-    <Modal
-      title="商品审核"
-      v-model="auditModalVisible"
-      :mask-closable="false"
-      :width="500"
-    >
-      <Form ref="auditForm" :model="goodsAuditForm" :label-width="100">
-        <FormItem label="审核结果" prop="auth_flag">
-          <RadioGroup v-model="goodsAuditForm.auth_flag">
-            <Radio :label="1">审核通过</Radio>
-            <Radio :label="2">审核拒绝</Radio>
-          </RadioGroup>
-        </FormItem>
-        <!-- <FormItem label="审核备注" prop="reason" v-if="goodsAuditForm.auth_flag === 2">
-          <Input v-model="goodsAuditForm.reason" type="textarea" :rows="3" placeholder="请输入拒绝原因" />
-        </FormItem> -->
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="auditModalVisible = false">取消</Button>
-        <Button type="primary" @click="confirmAudit">提交审核</Button>
-      </div>
-    </Modal>
-    <!-- 批量审核弹框 -->
-    <Modal
-      title="批量商品审核"
+    </el-card>
+
+    <el-dialog v-model="modalVisible" title="下架操作" width="500px" :close-on-click-modal="false">
+      <el-form ref="underForm" :model="underForm" label-width="100px">
+        <el-form-item label="下架原因" prop="reason">
+          <el-input v-model="underForm.reason" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="lower">提交</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="auditModalVisible" title="商品审核" width="500px" :close-on-click-modal="false">
+      <el-form ref="auditForm" :model="goodsAuditForm" label-width="100px">
+        <el-form-item label="审核结果" prop="auth_flag">
+          <el-radio-group v-model="goodsAuditForm.auth_flag">
+            <el-radio :value="1">审核通过</el-radio>
+            <el-radio :value="2">审核拒绝</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="auditModalVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmAudit">提交审核</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
       v-model="batchAuditModalVisible"
-      :mask-closable="false"
-      :width="500"
+      title="批量商品审核"
+      width="500px"
+      :close-on-click-modal="false"
     >
-      <Form ref="batchAuditForm" :model="batchAuditForm" :label-width="100">
-        <FormItem label="审核结果" prop="auth_flag">
-          <RadioGroup v-model="batchAuditForm.auth_flag">
-            <Radio :label="1">审核通过</Radio>
-            <Radio :label="2">审核拒绝</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="审核备注" prop="reason" v-if="batchAuditForm.auth_flag === 2">
-          <Input v-model="batchAuditForm.reason" type="textarea" :rows="3" placeholder="请输入拒绝原因" />
-        </FormItem>
-        <FormItem label="选中商品">
-          <div style="max-height: 200px; overflow-y: auto;">
-            <Tag v-for="item in selectedRows" :key="item.id" style="margin: 2px;">{{item.goodsName}}</Tag>
+      <el-form ref="batchAuditForm" :model="batchAuditForm" label-width="100px">
+        <el-form-item label="审核结果" prop="auth_flag">
+          <el-radio-group v-model="batchAuditForm.auth_flag">
+            <el-radio :value="1">审核通过</el-radio>
+            <el-radio :value="2">审核拒绝</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="batchAuditForm.auth_flag === 2" label="审核备注" prop="reason">
+          <el-input v-model="batchAuditForm.reason" type="textarea" :rows="3" placeholder="请输入拒绝原因" />
+        </el-form-item>
+        <el-form-item label="选中商品">
+          <div style="max-height: 200px; overflow-y: auto">
+            <el-tag v-for="item in selectedRows" :key="item.id" style="margin: 2px">{{ item.goodsName }}</el-tag>
           </div>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="batchAuditModalVisible = false">取消</Button>
-        <Button type="primary" @click="submitBatchAudit">提交审核</Button>
-      </div>
-    </Modal>
-    <Modal v-model="goodsGroupFlag" title="批量设置商品分组" width="420">
-      <Form ref="goodsGroupForm" :model="goodsGroupForm" :rules="goodsGroupRule" :label-width="90">
-        <FormItem label="商品分组" prop="groupId">
-          <Select v-model="goodsGroupForm.groupId" clearable filterable style="width: 240px">
-            <Option v-for="item in goodsGroupList" :value="item.id" :key="item.id">{{ item.groupName }}</Option>
-          </Select>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button @click="goodsGroupFlag = false">取消</Button>
-        <Button type="primary" :loading="goodsGroupLoading" @click="submitSetGoodsGroup">确定</Button>
-      </div>
-    </Modal>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="batchAuditModalVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitBatchAudit">提交审核</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="goodsGroupFlag" title="批量设置商品分组" width="420px">
+      <el-form ref="goodsGroupForm" :model="goodsGroupForm" :rules="goodsGroupRule" label-width="90px">
+        <el-form-item label="商品分组" prop="groupId">
+          <el-select v-model="goodsGroupForm.groupId" clearable filterable style="width: 240px">
+            <el-option
+              v-for="item in goodsGroupList"
+              :key="item.id"
+              :label="item.groupName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="goodsGroupFlag = false">取消</el-button>
+        <el-button type="primary" :loading="goodsGroupLoading" @click="submitSetGoodsGroup">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -261,11 +297,7 @@ import {
   getGoodsGroupByPage,
   addGoodsGroupItems
 } from "@/api/goods";
-import vueQr from "vue-qr";
 export default {
-  components: {
-    "vue-qr": vueQr,
-  },
   name: "goods",
   data() {
     return {
@@ -291,259 +323,10 @@ export default {
       auditModalVisible: false, // 审核弹框显示状态
       currentAuditGoods: null, // 当前审核的商品
       submitLoading: false, // 添加或编辑提交状态
-      columns: [
-        {
-          type: 'selection',
-          width: 60,
-          align: 'center'
-        },
-        {
-          title: "商品ID",
-          key: "id",
-          width: 180,
-          tooltip: true,
-        },
-        {
-          title: "商品图片",
-          key: "original",
-          width: 180,
-          slot: "imageSlot",
-        },
-        {
-          title: "商品名称",
-          key: "goodsName",
-          minWidth: 180,
-          slot: "goodsSlot",
-        },
-        {
-          title: "价格",
-          key: "price",
-          width: 100,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "销量",
-          key: "buyCount",
-          width: 100,
-          render: (h, params) => {
-            return h("span", params.row.buyCount || 0);
-          },
-        },
-        {
-          title: "库存",
-          key: "quantity",
-          width: 100,
-          render: (h, params) => {
-            return h("span", params.row.quantity || 0);
-          },
-        },
-        {
-          title: "销售模式",
-          key: "salesModel",
-          width: 100,
-          render: (h, params) => {
-            if (params.row.salesModel === "RETAIL") {
-              return h("Tag", { props: { color: "orange" } }, "零售");
-            } else if (params.row.salesModel === "WHOLESALE") {
-              return h("Tag", { props: { color: "magenta" } }, "批发");
-            } else {
-              return h("Tag", { props: { color: "volcano" } }, "其他类型");
-            }
-          },
-        },
-        {
-          title: "商品类型",
-          key: "goodsType",
-          width: 120,
-          render: (h, params) => {
-            if (params.row.goodsType === "PHYSICAL_GOODS") {
-              return h("Tag", { props: { color: "green" } }, "实物商品");
-            } else if (params.row.goodsType === "VIRTUAL_GOODS") {
-              return h("Tag", { props: { color: "volcano" } }, "虚拟商品");
-            } else {
-              return h("Tag", { props: { color: "geekblue" } }, "电子卡券");
-            }
-          },
-        },
-        {
-          title: "状态",
-          key: "marketEnable",
-          width: 120,
-          render: (h, params) => {
-            if (params.row.marketEnable == "DOWN") {
-              return h("Tag", { props: { color: "volcano" } }, "下架");
-            } else if (params.row.marketEnable == "UPPER") {
-              return h("Tag", { props: { color: "green" } }, "上架");
-            }
-          },
-        },
-        {
-          title: "审核状态",
-          key: "authFlag",
-          width: 180,
-          render: (h, params) => {
-            if (params.row.authFlag == "TOBEAUDITED") {
-              return h("Tag", { props: { color: "volcano" } }, "待审核");
-            } else if (params.row.authFlag == "PASS") {
-              return h("Tag", { props: { color: "green" } }, "通过");
-            } else if (params.row.authFlag == "REFUSE") {
-              return h("Tag", { props: { color: "red" } }, "拒绝");
-            }
-          },
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          width: 180,  // 使用minWidth替代width
-          tooltip: true,
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 200,
-          render: (h, params) => {
-            // 如果是待审核状态，显示审核按钮
-            if (params.row.authFlag === "TOBEAUDITED") {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none"
-                    },
-                    on: {
-                      click: () => {
-                        this.openAuditModal(params.row);
-                      },
-                    },
-                  },
-                  "审核"
-                ),
-                h("span", {
-                  style: {
-                    margin: "0 8px",
-                    color: "#dcdee2"
-                  }
-                }, "|"),
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none"
-                    },
-                    on: {
-                      click: () => {
-                        this.showDetail(params.row);
-                      },
-                    },
-                  },
-                  "查看"
-                ),
-              ]);
-            }
-            // 原有的上架/下架逻辑
-            else if (params.row.marketEnable == "DOWN") {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none"
-                    },
-                    on: {
-                      click: () => {
-                        this.upper(params.row);
-                      },
-                    },
-                  },
-                  "上架"
-                ),
-                h("span", {
-                  style: {
-                    margin: "0 8px",
-                    color: "#dcdee2"
-                  }
-                }, "|"),
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none"
-                    },
-                    on: {
-                      click: () => {
-                        this.showDetail(params.row);
-                      },
-                    },
-                  },
-                  "查看"
-                ),
-              ]);
-            } else {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none"
-                    },
-                    on: {
-                      click: () => {
-                        this.edit(params.row);
-                      },
-                    },
-                  },
-                  "下架"
-                ),
-                h("span", {
-                  style: {
-                    margin: "0 8px",
-                    color: "#dcdee2"
-                  }
-                }, "|"),
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none"
-                    },
-                    on: {
-                      click: () => {
-                        this.showDetail(params.row);
-                      },
-                    },
-                  },
-                  "查看"
-                ),
-              ]);
-            }
-          },
-        },
-      ],
       data: [], // 表单数据
       total: 0, // 表单数据总数
-      currentStatus: '',
+      currentStatus: "ALL",
       goodsNumerData: {},
-      goodsAuditForm: {
-        // 商品编辑表单
-        auth_flag: 1,
-      },
       selectedRows: [], // 选中的行数据
       selectAll: false, // 全选状态
       batchAuditModalVisible: false, // 批量审核弹框显示状态
@@ -565,7 +348,7 @@ export default {
   computed: {
     goodsStatusWithCount() {
       return [
-        {title: '全部', value: ''},
+        {title: '全部', value: 'ALL'},
         {title: `出售中${this.goodsNumerData.upperGoodsNum ? '(' + this.goodsNumerData.upperGoodsNum + ')' : ''}`, value: 'UPPER'},
         {title: `仓库中${this.goodsNumerData.downGoodsNum ? '(' + this.goodsNumerData.downGoodsNum + ')' : ''}`, value: 'DOWN'},
         {title: `待审核${this.goodsNumerData.auditGoodsNum ? '(' + this.goodsNumerData.auditGoodsNum + ')' : ''}`, value: 'TOBEAUDITED'},
@@ -574,6 +357,33 @@ export default {
     }
   },
   methods: {
+    clearTableSelection() {
+      this.$refs.table?.clearSelection?.();
+    },
+    onStatusTabClick(tab) {
+      this.goodsStatusClick(tab.paneName);
+    },
+    salesModelText(v) {
+      if (v === "RETAIL") return "零售";
+      if (v === "WHOLESALE") return "批发";
+      return "其他类型";
+    },
+    goodsTypeText(v) {
+      if (v === "PHYSICAL_GOODS") return "实物商品";
+      if (v === "VIRTUAL_GOODS") return "虚拟商品";
+      return "电子卡券";
+    },
+    marketEnableText(v) {
+      if (v === "DOWN") return "下架";
+      if (v === "UPPER") return "上架";
+      return "";
+    },
+    authFlagText(v) {
+      if (v === "TOBEAUDITED") return "待审核";
+      if (v === "PASS") return "通过";
+      if (v === "REFUSE") return "拒绝";
+      return "";
+    },
     // 初始化数据
     init() {
       this.getDataList();
@@ -667,31 +477,23 @@ export default {
 
     //查看商品详情
     showDetail(v) {
-      let id = v.id;
-      this.$options.filters.customRouterPush({
+      this.$filters.customRouterPush({
         name: "goods-detail",
-        query: { id: id },
-      })
+        query: { id: v.id },
+      });
     },
 
     // 商品状态筛选
-    goodsStatusClick(item) {
-      // 根据选择的状态设置搜索条件
-      if (item === 0) {
-        // 全部：清除状态筛选
+    goodsStatusClick(name) {
+      if (name === "ALL" || name === "" || name === undefined || name === null) {
         delete this.searchForm.goodsStatus;
+        this.currentStatus = "ALL";
       } else {
-        // 其他状态正常赋值
-        this.searchForm.goodsStatus = item;
+        this.searchForm.goodsStatus = name;
+        this.currentStatus = name;
       }
-      this.currentStatus = item;
-
-      // tab切换时清除选中内容
       this.selectedRows = [];
-      if (this.$refs.table) {
-        this.$refs.table.selectAll(false);
-      }
-
+      this.clearTableSelection();
       this.getDataList();
     },
     examine(v, authFlag) {
@@ -762,15 +564,6 @@ export default {
       });
     },
 
-    // 选择框事件处理
-    onSelect(selection, row) {
-      // 单行选择时触发
-    },
-
-    onSelectAll(selection) {
-      // 全选时触发
-    },
-
     onSelectionChange(selection) {
       this.selectedRows = selection;
     },
@@ -939,9 +732,7 @@ export default {
             this.goodsGroupFlag = false;
             this.selectedRows = [];
             this.selectAll = false;
-            if (this.$refs.table && this.$refs.table.selectAll) {
-              this.$refs.table.selectAll(false);
-            }
+            this.clearTableSelection();
             this.getDataList();
           } else if (res && res.message) {
             this.$Message.error(res.message);
@@ -961,7 +752,7 @@ export default {
 <style lang="scss" scoped>
 // Tab组件样式
 .goods-tab {
-  ::v-deep .ivu-tabs-tab {
+  :deep(.el-tabs__item) {
     font-size: 14px;
   }
 }
diff --git a/manager/src/views/goods/goods-info/goodsApply.vue b/manager/src/views/goods/goods-info/goodsApply.vue
index 4e4ef945..7e184bfe 100644
--- a/manager/src/views/goods/goods-info/goodsApply.vue
+++ b/manager/src/views/goods/goods-info/goodsApply.vue
@@ -1,79 +1,93 @@
 <template>
   <div class="search">
-    <Card>
-      <Form
+    <el-card>
+      <el-form
         ref="searchForm"
-        @keydown.enter.native="handleSearch"
         :model="searchForm"
         inline
-        :label-width="70"
+        label-width="70px"
         class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <Form-item label="商品名称" prop="goodsName">
-          <Input
-            type="text"
+        <el-form-item label="商品名称" prop="goodsName">
+          <el-input
             v-model="searchForm.goodsName"
             placeholder="请输入商品名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="商品编号" prop="id">
-          <Input
-            type="text"
+        </el-form-item>
+        <el-form-item label="商品编号" prop="id">
+          <el-input
             v-model="searchForm.id"
             placeholder="请输入商品编号"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search"
-          >搜索</Button
-        >
-      </Form>
-    </Card>
-    <Card>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-        class="mt_10"
-      >
-        <!-- 商品栏目格式化 -->
-        <template slot="goodsSlot" slot-scope="scope">
-          <div style="margin-top: 5px; height: 80px; display: flex">
-            <div style="">
-              <img
-                :src="scope.row.original"
-                style="height: 60px; margin-top: 3px; width: 60px"
-              />
-            </div>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-            <div style="margin-left: 13px">
-              <div class="div-zoom">
-                <a>{{ scope.row.goodsName }}</a>
+    <el-card>
+      <el-table v-loading="loading" :data="data" ref="table" class="mt_10" style="width: 100%">
+        <el-table-column label="商品名称" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div v-if="row" style="margin-top: 5px; height: 80px; display: flex; align-items: flex-start">
+              <img
+                v-if="row.original"
+                :src="row.original"
+                style="height: 60px; width: 60px; object-fit: cover; margin-top: 3px"
+                alt=""
+              />
+              <div style="margin-left: 13px">
+                <div class="div-zoom">
+                  <a class="link-text">{{ row.goodsName }}</a>
+                </div>
               </div>
             </div>
-          </div>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+          </template>
+        </el-table-column>
+        <el-table-column prop="id" label="商品编号" min-width="120" show-overflow-tooltip />
+        <el-table-column label="价格" min-width="120">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">{{ $filters.unitPrice(row.price, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="审核状态" min-width="120">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="authFlagTagType(row.authFlag)">{{ authFlagText(row.authFlag) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="storeName" label="店铺名称" min-width="120" show-overflow-tooltip />
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="examine(row, 1)">通过</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="examine(row, 2)">拒绝</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="showDetail(row)">查看</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -81,214 +95,82 @@
 import { authGoods, getAuthGoodsListData } from "@/api/goods";
 
 export default {
-  name: "goods",
-  components: {},
+  name: "goodsApply",
   data() {
     return {
-      id: "", //要操作的id
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "create_time", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "create_time",
+        order: "desc",
       },
       goodsAuditForm: {
-        // 商品编辑表单
         auth_flag: 1,
       },
-      columns: [
-        {
-          title: "商品名称",
-          key: "goodsName",
-          minWidth: 180,
-          slot: "goodsSlot",
-          tooltip: true,
-        },
-        {
-          title: "商品编号",
-          key: "id",
-          minWidth: 100,
-          tooltip: true,
-        },
-        {
-          title: "价格",
-          key: "price",
-          minWidth: 130,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "审核状态",
-          key: "authFlag",
-          minWidth: 130,
-          render: (h, params) => {
-            if (params.row.authFlag == "TOBEAUDITED") {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "error",
-                    text: "待审核",
-                  },
-                }),
-              ]);
-            } else if (params.row.authFlag == "PASS") {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "success",
-                    text: "审核通过",
-                  },
-                }),
-              ]);
-            } else if (params.row.authFlag == "REFUSE") {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "error",
-                    text: "审核拒绝",
-                  },
-                }),
-              ]);
-            }
-          },
-        },
-
-        {
-          title: "店铺名称",
-          key: "storeName",
-          minWidth: 100,
-          tooltip: true,
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 200,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px",
-                  },
-                  on: {
-                    click: () => {
-                      this.examine(params.row, 1);
-                    },
-                  },
-                },
-                "通过"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px",
-                  },
-                  on: {
-                    click: () => {
-                      this.examine(params.row, 2);
-                    },
-                  },
-                },
-                "拒绝"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none"
-                  },
-                  on: {
-                    click: () => {
-                      this.showDetail(params.row);
-                    },
-                  },
-                },
-                "查看"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      data: [],
+      total: 0,
     };
   },
   methods: {
+    authFlagText(v) {
+      const map = {
+        TOBEAUDITED: "待审核",
+        PASS: "审核通过",
+        REFUSE: "审核拒绝",
+      };
+      return map[v] || v || "-";
+    },
+    authFlagTagType(v) {
+      const map = {
+        TOBEAUDITED: "warning",
+        PASS: "success",
+        REFUSE: "danger",
+      };
+      return map[v] || "info";
+    },
     init() {
-      // 初始化数据
       this.getDataList();
     },
     changePage(v) {
-      // 改变页码
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
     changePageSize(v) {
-      // 改变每页数量
       this.searchForm.pageSize = v;
       this.getDataList();
     },
     handleSearch() {
-      // 搜索
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
     getDataList() {
-      // 获取列表数据
       this.loading = true;
-      // 带多条件搜索参数获取表单数据
       this.searchForm.authFlag = 0;
-      getAuthGoodsListData(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
+      getAuthGoodsListData(this.searchForm)
+        .then((res) => {
+          this.loading = false;
+          if (res.success) {
+            this.data = res.result.records;
+            this.total = res.result.total;
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
     examine(v, authFlag) {
-      // 审核商品
-      let examine = "通过";
-      this.goodsAuditForm.authFlag = "PASS";
-      if (authFlag != 1) {
-        examine = "拒绝";
-        this.goodsAuditForm.authFlag = "REFUSE";
-      }
+      const examine = authFlag === 1 ? "通过" : "拒绝";
+      this.goodsAuditForm.authFlag = authFlag === 1 ? "PASS" : "REFUSE";
       this.$Modal.confirm({
         title: "确认审核",
-        content: "您确认要审核" + examine + " " + v.goodsName + " ?",
+        content: `您确认要审核${examine} ${v.goodsName} ?`,
         loading: true,
         onOk: () => {
-          let formData = new FormData();
-          formData.append('goodsIds', v.id);
-          formData.append('authFlag', this.goodsAuditForm.authFlag);
-
+          const formData = new FormData();
+          formData.append("goodsIds", v.id);
+          formData.append("authFlag", this.goodsAuditForm.authFlag);
           authGoods(formData).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -299,13 +181,11 @@ export default {
         },
       });
     },
-    //查看商品详情
     showDetail(v) {
-      let id = v.id;
-      this.$options.filters.customRouterPush({
+      this.$filters.customRouterPush({
         name: "goods-detail",
-        query: { id: id },
-      })
+        query: { id: v.id },
+      });
     },
   },
   mounted() {
@@ -313,3 +193,20 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
+.div-zoom {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/manager/src/views/goods/goods-info/goodsDetail.vue b/manager/src/views/goods/goods-info/goodsDetail.vue
index 60d4c412..d5d73355 100644
--- a/manager/src/views/goods/goods-info/goodsDetail.vue
+++ b/manager/src/views/goods/goods-info/goodsDetail.vue
@@ -1,247 +1,159 @@
 <template>
   <div>
-    <Form :label-width="120">
-      <Card>
+    <el-form label-width="120px">
+      <el-card>
         <div class="base-info-item">
           <h4>基本信息</h4>
           <div class="form-item-view">
-            <FormItem label="商品分类">
+            <el-form-item label="商品分类">
               <span v-for="(item, index) in goods.categoryName" :key="index">
                 {{ item }}
                 <i v-if="index !== goods.categoryName.length - 1">&gt;</i>
               </span>
-            </FormItem>
-            <FormItem label="商品名称">
-              {{ goods.goodsName }}
-            </FormItem>
-
-            <FormItem label="商品卖点">
-              {{ goods.sellingPoint }}
-            </FormItem>
-            <FormItem label="商品参数">
-             <div v-if="goods.goodsParamsDTOList && goods.goodsParamsDTOList.length" v-for="(item,index) in goods.goodsParamsDTOList" :key="index">
-               <div style="margin-bottom: 10px; display: flex; align-items: center;" >
-                  {{ item.groupName }} : <tag v-for="(child,i) in item.goodsParamsItemDTOList" :key="i">
+            </el-form-item>
+            <el-form-item label="商品名称">{{ goods.goodsName }}</el-form-item>
+            <el-form-item label="商品卖点">{{ goods.sellingPoint }}</el-form-item>
+            <el-form-item label="商品参数">
+              <div
+                v-if="goods.goodsParamsDTOList && goods.goodsParamsDTOList.length"
+                v-for="(item, index) in goods.goodsParamsDTOList"
+                :key="index"
+                style="margin-bottom: 10px; display: flex; align-items: center"
+              >
+                {{ item.groupName }} :
+                <el-tag v-for="(child, i) in item.goodsParamsItemDTOList" :key="i" style="margin-left: 4px">
                   {{ child.paramName }} - {{ child.paramValue }}
-                  </tag>
-               </div>
-             </div>
-            </FormItem>
+                </el-tag>
+              </div>
+            </el-form-item>
           </div>
           <h4>商品交易信息</h4>
           <div class="form-item-view">
-            <FormItem label="计量单位"> {{ goods.goodsUnit }}</FormItem>
-            <FormItem label="销售模式">
+            <el-form-item label="计量单位">{{ goods.goodsUnit }}</el-form-item>
+            <el-form-item label="销售模式">
               {{ goods.salesModel === "RETAIL" ? "零售型" : "批发型" }}
-            </FormItem>
-            <FormItem label="销售规则" v-if="goods.salesModel !== 'RETAIL'">
-              <Table
-                border
-                :columns="wholesalePreviewColumns"
-                :data="wholesaleData"
-              >
-              </Table>
-            </FormItem>
+            </el-form-item>
+            <el-form-item v-if="goods.salesModel !== 'RETAIL'" label="销售规则">
+              <el-table border :data="wholesaleData" style="width: 100%">
+                <el-table-column label="销售规则" width="300">
+                  <template #default="{ row }">
+                    <span v-if="row">
+                      当商品购买数量 ≥{{ row.num }} 时，售价为 ￥{{ row.price }} /{{ goods.goodsUnit }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
           </div>
           <h4>商品规格及图片</h4>
           <div class="form-item-view">
-            <FormItem label="商品编号"> {{ goods.id }}</FormItem>
-            <FormItem label="商品价格">
-              <priceColorScheme :value="goods.price" :color="$mainColor"></priceColorScheme>
-
-            </FormItem>
-            <FormItem label="商品图片">
+            <el-form-item label="商品编号">{{ goods.id }}</el-form-item>
+            <el-form-item label="商品价格">
+              <priceColorScheme :value="goods.price" :color="$mainColor" />
+            </el-form-item>
+            <el-form-item label="商品图片">
               <div
-                class="demo-upload-list"
                 v-for="(item, __index) in goods.goodsGalleryList"
                 :key="__index"
+                class="demo-upload-list"
               >
                 <img :src="item" />
                 <div class="demo-upload-list-cover">
-                  <Icon
-                    type="ios-eye-outline"
-                    @click.native="handleViewGoodsPicture(item)"
-                  ></Icon>
+                  <el-icon class="preview-icon" @click="handleViewGoodsPicture(item)"><View /></el-icon>
                 </div>
-                <Modal title="View Image" v-model="goodsPictureVisible">
-                  <img
-                    :src="previewGoodsPicture"
-                    v-if="goodsPictureVisible"
-                    style="width: 100%"
-                  />
-                </Modal>
               </div>
-            </FormItem>
-            <FormItem label="商品视频">
-              <video
-                v-if="goods.goodsVideo"
-                controls
-                class="player"
-                :src="goods.goodsVideo"
-              />
-            </FormItem>
-            <FormItem label="商品规格">
-              <Table :columns="skuColumn" :data="skuData">
-                <template slot="showImage" slot-scope="scope">
-                  <div style="margin-top: 5px; display: flex">
-                    <div>
+              <el-dialog v-model="goodsPictureVisible" title="View Image" width="600px">
+                <img v-if="goodsPictureVisible" :src="previewGoodsPicture" style="width: 100%" />
+              </el-dialog>
+            </el-form-item>
+            <el-form-item label="商品视频">
+              <video v-if="goods.goodsVideo" controls class="player" :src="goods.goodsVideo" />
+            </el-form-item>
+            <el-form-item label="商品规格">
+              <el-table :data="skuData" style="width: 100%">
+                <el-table-column prop="specs" label="规格" />
+                <el-table-column prop="sn" label="编号" />
+                <el-table-column prop="weight" label="重量(kg)" />
+                <el-table-column
+                  v-for="(item, index) in wholesaleData"
+                  :key="'wp' + index"
+                  :label="'购买量 ≥ ' + item.num"
+                >
+                  <template #default>
+                    <el-input v-if="wholesaleData[index]" v-model="wholesaleData[index].price" disabled>
+                      <template #append>元</template>
+                    </el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column v-if="goods.salesModel !== 'WHOLESALE'" label="价格">
+                  <template #default="{ row }">
+                    <priceColorScheme v-if="row" :value="row.price" :color="$mainColor" />
+                  </template>
+                </el-table-column>
+                <el-table-column v-if="goods.salesModel !== 'WHOLESALE'" prop="quantity" label="库存" />
+                <el-table-column label="图片">
+                  <template #default="{ row }">
+                    <div v-if="row" style="margin-top: 5px; display: flex">
                       <img
-                        v-for="(item,index) in scope.row.image"
+                        v-for="(item, index) in row.image"
                         :key="index"
                         :src="item"
-                        style="height: 60px; margin:10px; width: 60px"
+                        style="height: 60px; margin: 10px; width: 60px"
                       />
                     </div>
-                  </div>
-                </template>
-                <template slot-scope="{ row }" slot="wholePrice0">
-                  <Input
-                    v-if="wholesaleData[0]"
-                    clearable
-                    disabled
-                    v-model="wholesaleData[0].price"
-                  >
-                    <span slot="append">元</span>
-                  </Input>
-                </template>
-                <template slot-scope="{ row }" slot="wholePrice1">
-                  <Input
-                    v-if="wholesaleData[1]"
-                    clearable
-                    disabled
-                    v-model="wholesaleData[1].price"
-                  >
-                    <span slot="append">元</span>
-                  </Input>
-                </template>
-                <template slot-scope="{ row }" slot="wholePrice2">
-                  <Input
-                    v-if="wholesaleData[2]"
-                    clearable
-                    disabled
-                    v-model="wholesaleData[2].price"
-                  >
-                    <span slot="append">元</span>
-                  </Input>
-                </template>
-              </Table>
-            </FormItem>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
           </div>
           <h4>商品详情描述</h4>
           <div class="form-item-view">
-            <FormItem label="商品描述">
+            <el-form-item label="商品描述">
               <div v-html="goods.intro"></div>
-            </FormItem>
-            <FormItem label="移动端描述">
+            </el-form-item>
+            <el-form-item label="移动端描述">
               <div v-html="goods.mobileIntro"></div>
-            </FormItem>
+            </el-form-item>
           </div>
         </div>
-      </Card>
-    </Form>
+      </el-card>
+    </el-form>
   </div>
 </template>
 <script>
+import { View } from "@element-plus/icons-vue";
 import { getGoodsDetail } from "@/api/goods";
+
 export default {
   name: "goodsDetail",
+  components: { View },
   data() {
     return {
-      goods: {}, // 商品信息
-      previewGoodsPicture: "", // 预览图片
-      goodsPictureVisible: false, // 预览图片模态框
-      wholesalePreviewColumns: [
-        {
-          title: "销售规则",
-          width: 300,
-          render: (h, params) => {
-            let guide =
-              "当商品购买数量 ≥" +
-              params.row.num +
-              " 时，售价为 ￥" +
-              params.row.price +
-              " /" +
-              this.goods.goodsUnit;
-            return h("div", guide);
-          },
-        },
-      ],
+      goods: {},
+      previewGoodsPicture: "",
+      goodsPictureVisible: false,
       wholesaleData: [],
-      skuColumn: [
-        // 规格表头
-        {
-          title: "规格",
-          key: "specs",
-        },
-        {
-          title: "编号",
-          key: "sn",
-        },
-        {
-          title: "重量(kg)",
-          key: "weight",
-        },
-      ],
-      skuData: [], // sku数据
+      skuData: [],
     };
   },
   mounted() {
     this.initGoods(this.$route.query.id);
   },
   methods: {
-    // 初始化数据，获取商品详情
     initGoods(id) {
       getGoodsDetail(id).then((res) => {
         this.goods = res.result;
-        let that = this;
-        res.result.skuList.forEach(function (sku, index, array) {
-          that.skuData.push({
-            specs: sku.goodsName,
-            sn: sku.sn,
-            weight: sku.weight,
-            cost: sku.cost,
-            price:sku.price,
-            image: sku.goodsGalleryList,
-            quantity:sku.quantity
-          });
-        });
-        if (res.result.salesModel === "WHOLESALE" && res.result.wholesaleList) {
-          res.result.wholesaleList.forEach((item, index) => {
-            this.skuColumn.push({
-              title: "购买量 ≥ " + item.num,
-              slot: "wholePrice" + index,
-            });
-          });
-        } else {
-          this.skuColumn.push(
-            // {
-            //   title: "成本",
-            //   key: "cost",
-            //   render: (h, params) => {
-            //     console.log(params)
-            //     return h("priceColorScheme", {props:{value:params.row.cost,color:this.$mainColor}} );
-            //   },
-            // },
-            {
-              title: "价格",
-              key: "price",
-              render: (h, params) => {
-                return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-              },
-            },{
-              title: "库存",
-              key: "quantity",
-            }
-          );
-        }
-        this.skuColumn.push({
-          title: "图片",
-          slot: "showImage",
-        });
-        this.wholesaleData = res.result.wholesaleList;
+        this.skuData = res.result.skuList.map((sku) => ({
+          specs: sku.goodsName,
+          sn: sku.sn,
+          weight: sku.weight,
+          cost: sku.cost,
+          price: sku.price,
+          image: sku.goodsGalleryList,
+          quantity: sku.quantity,
+        }));
+        this.wholesaleData = res.result.wholesaleList || [];
       });
     },
-    // 预览商品图片
     handleViewGoodsPicture(url) {
       this.previewGoodsPicture = url;
       this.goodsPictureVisible = true;
@@ -251,7 +163,6 @@ export default {
 </script>
 
 <style lang="scss" soped>
-/*平铺*/
 div.base-info-item {
   h4 {
     margin-bottom: 10px;
@@ -300,13 +211,10 @@ div.base-info-item {
 .demo-upload-list:hover .demo-upload-list-cover {
   display: block;
 }
-.demo-upload-list-cover i {
+.preview-icon {
   color: #fff;
   font-size: 20px;
   cursor: pointer;
-  margin: 0 2px;
-}
-.ivu-table table {
-  width: 100% !important;
+  margin-top: 20px;
 }
 </style>
diff --git a/manager/src/views/goods/goods-manage/brand.vue b/manager/src/views/goods/goods-manage/brand.vue
index 58d2aa06..76143d13 100644
--- a/manager/src/views/goods/goods-manage/brand.vue
+++ b/manager/src/views/goods/goods-manage/brand.vue
@@ -1,74 +1,148 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="searchForm" @submit.native.prevent @keydown.enter.native="handleSearch" :model="searchForm" inline :label-width="70"
-            class="search-form">
-        <Form-item label="品牌名称">
-          <Input type="text" v-model="searchForm.name" placeholder="请输入品牌名称" clearable style="width: 240px"/>
-        </Form-item>
-        <Button @click="handleSearch" type="primary">搜索</Button>
-      </Form>
-    </Card>
-    <Card>
-      <Row class="operation padding-row">
-        <Button @click="add" type="primary">添加</Button>
-      </Row>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table"></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
-              @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]" size="small"
-              show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
-    <Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500">
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="品牌名称" prop="name">
-          <Input v-model="form.name" clearable style="width: 100%"/>
-        </FormItem>
-        <FormItem label="品牌图标" prop="logo">
-          <div style="display: flex; align-items: center; gap: 12px;">
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="品牌名称">
+          <el-input
+            v-model="searchForm.name"
+            placeholder="请输入品牌名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="add">添加</el-button>
+      </div>
+
+      <el-table ref="table" v-loading="loading" border :data="data" style="width: 100%">
+        <el-table-column prop="name" label="品牌名称" width="200" />
+        <el-table-column label="品牌图标" align="left" >
+          <template #default="{ row }">
+            <img
+              v-if="row"
+              :src="row.logo || ''"
+              alt="加载图片失败"
+              style="cursor: pointer; width: 80px; height: 60px; margin: 10px 0; object-fit: contain"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="left" width="150">
+          <template #default="{ row }">
+            <el-switch
+              v-if="row"
+              :model-value="row.deleteFlag == 0"
+              inline-prompt
+              active-text="启用"
+              inactive-text="禁用"
+              @change="(val) => handleStatusSwitchChange(row, val)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" min-width="170" show-overflow-tooltip />
+        <el-table-column label="操作" width="230" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="edit(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="openCategoryModal(row)">关联分类</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="delBrand(row.id)">删除</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+        <el-form-item label="品牌名称" prop="name">
+          <el-input v-model="form.name" clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="品牌图标" prop="logo">
+          <div style="display: flex; align-items: center; gap: 12px">
             <img
               :src="form.logo || defaultPic"
               alt="品牌图标"
-              style="width: 80px; height: 60px; object-fit: contain; border: 1px solid #dcdee2; border-radius: 4px; background: #fff;"
+              style="width: 80px; height: 60px; object-fit: contain; border: 1px solid #dcdee2; border-radius: 4px; background: #fff"
             />
-            <Button type="text" @click="openLogoPicker">修改</Button>
+            <el-button type="primary" link @click="openLogoPicker">修改</el-button>
           </div>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
-      </div>
-    </Modal>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
 
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-    </Modal>
+    <el-dialog v-model="picModelFlag" width="1200px" :show-close="true">
+      <ossManage
+        ref="ossManage"
+        :is-component="true"
+        :initialize="picModelFlag"
+        @callback="callbackSelected"
+      />
+    </el-dialog>
 
-    <Modal
-      :title="categoryModalTitle"
+    <el-dialog
       v-model="categoryModalVisible"
-      :mask-closable="false"
-      :width="700"
+      :title="categoryModalTitle"
+      width="700px"
+      :close-on-click-modal="false"
     >
-      <div style="position: relative; max-height: 520px; overflow: auto;">
-        <Spin size="large" fix v-if="categoryTreeLoading"></Spin>
-        <Tree
+      <div v-loading="categoryTreeLoading" style="position: relative; max-height: 520px; overflow: auto">
+        <el-tree
           ref="categoryTree"
           :key="categoryTreeKey"
           :data="categoryTreeData"
+          :props="{ label: 'title', children: 'children' }"
+          node-key="id"
           show-checkbox
-          @on-check-change="onCategoryTreeCheckChange"
-        ></Tree>
+          default-expand-all
+          :default-checked-keys="selectedCategoryIds"
+          @check="onCategoryTreeCheckChange"
+        />
       </div>
-      <div slot="footer">
-        <Button type="text" @click="categoryModalVisible = false">取消</Button>
-        <Button type="primary" :loading="categorySubmitLoading" @click="submitBrandCategory"
-          >提交</Button
-        >
-      </div>
-    </Modal>
+      <template #footer>
+        <el-button @click="categoryModalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="categorySubmitLoading" @click="submitBrandCategory">
+          提交
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -84,22 +158,21 @@ import {
   saveBrandCategory,
 } from "@/api/goods";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-
-import {regular} from "@/utils";
+import { regular } from "@/utils";
 
 export default {
   name: "brand",
   components: {
-    ossManage
+    ossManage,
   },
   data() {
     return {
       defaultPic: require("@/assets/default.png"),
-      loading: true, // 表单加载状态
-      modalType: 0, // 添加或编辑标识
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
-      picModelFlag: false, // 图片选择器
+      loading: true,
+      modalType: 0,
+      modalVisible: false,
+      modalTitle: "",
+      picModelFlag: false,
       categoryModalVisible: false,
       categoryModalTitle: "关联分类",
       categoryTreeLoading: false,
@@ -109,173 +182,23 @@ export default {
       currentBrandId: "",
       selectedCategoryIds: [],
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "create_time", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "create_time",
+        order: "desc",
       },
       form: {
-        // 添加或编辑表单对象初始化数据
         name: "",
         logo: "",
         deleteFlag: "",
       },
-      // 表单验证规则
       formValidate: {
-        name: [
-          regular.REQUIRED,
-          regular.VARCHAR20
-        ],
-        logo: [
-          regular.REQUIRED,
-          regular.URL200
-        ],
+        name: [regular.REQUIRED, regular.VARCHAR20],
+        logo: [regular.REQUIRED, regular.URL200],
       },
-      submitLoading: false, // 添加或编辑提交状态
-      columns: [
-        {
-          title: "品牌名称",
-          key: "name",
-          width: 200,
-          resizable: true,
-          sortable: false,
-        },
-        {
-          title: "品牌图标",
-          key: "logo",
-          align: "left",
-          render: (h, params) => {
-            return h("img", {
-              attrs: {
-                src: params.row.logo || '',
-                alt: "加载图片失败",
-              },
-              style: {
-                cursor: "pointer",
-                width: "80px",
-                height: "60px",
-                margin: "10px 0",
-                "object-fit": "contain",
-              },
-            });
-          },
-        },
-        {
-          title: "状态",
-          key: "deleteFlag",
-          align: "left",
-          render: (h, params) => {
-            return h(
-              "i-switch",
-              {
-                props: {
-                  value: params.row.deleteFlag == 0,
-                  size: "large",
-                },
-                on: {
-                  "on-change": (checked) => {
-                    this.handleStatusSwitchChange(params.row, checked);
-                  },
-                },
-              },
-              [
-                h("span", { slot: "open" }, "启用"),
-                h("span", { slot: "close" }, "禁用"),
-              ]
-            );
-          },
-          filters: [
-            {
-              label: "启用",
-              value: 0,
-            },
-            {
-              label: "禁用",
-              value: 1,
-            },
-          ],
-          filterMultiple: false,
-          filterMethod(value, row) {
-            if (value == 0) {
-              return row.deleteFlag == 0;
-            } else if (value == 1) {
-              return row.deleteFlag == 1;
-            }
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 210,
-          align: "center",
-          fixed: "right",
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.edit(params.row);
-                    },
-                  },
-                },
-                "编辑"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.openCategoryModal(params.row);
-                    },
-                  },
-                },
-                "关联分类"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.delBrand(params.row.id);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      submitLoading: false,
+      data: [],
+      total: 0,
     };
   },
   methods: {
@@ -287,18 +210,13 @@ export default {
       this.picModelFlag = false;
       this.form.logo = val.url;
     },
-    buildCategoryTreeNodes(list, selectedSet) {
+    buildCategoryTreeNodes(list) {
       if (!Array.isArray(list) || list.length === 0) return [];
-      return list.map((item) => {
-        const children = this.buildCategoryTreeNodes(item.children || [], selectedSet);
-        return {
-          id: item.id,
-          title: item.name,
-          expand: true,
-          checked: selectedSet.has(item.id),
-          children,
-        };
-      });
+      return list.map((item) => ({
+        id: item.id,
+        title: item.name,
+        children: this.buildCategoryTreeNodes(item.children || []),
+      }));
     },
     async openCategoryModal(row) {
       this.currentBrandId = row.id;
@@ -319,22 +237,16 @@ export default {
               .filter(Boolean)
           : [];
         this.selectedCategoryIds = selectedIds;
-        const selectedSet = new Set(selectedIds);
-        this.categoryTreeData = treeRes && treeRes.success
-          ? this.buildCategoryTreeNodes(treeRes.result || [], selectedSet)
-          : [];
+        this.categoryTreeData =
+          treeRes && treeRes.success
+            ? this.buildCategoryTreeNodes(treeRes.result || [])
+            : [];
       } finally {
         this.categoryTreeLoading = false;
       }
     },
-    onCategoryTreeCheckChange(checkedNodes) {
-      if (!Array.isArray(checkedNodes)) {
-        this.selectedCategoryIds = [];
-        return;
-      }
-      this.selectedCategoryIds = checkedNodes
-        .map((node) => node && node.id)
-        .filter(Boolean);
+    onCategoryTreeCheckChange(_data, checkedInfo) {
+      this.selectedCategoryIds = checkedInfo?.checkedKeys || [];
     },
     submitBrandCategory() {
       if (!this.currentBrandId) return;
@@ -342,16 +254,17 @@ export default {
       saveBrandCategory(
         this.currentBrandId,
         (this.selectedCategoryIds || []).map((id) => String(id))
-      ).then((res) => {
-        this.categorySubmitLoading = false;
-        if (res && res.success) {
-          this.$Message.success("操作成功");
-          this.categoryModalVisible = false;
-          return;
-        }
-      }).catch(() => {
-        this.categorySubmitLoading = false;
-      });
+      )
+        .then((res) => {
+          this.categorySubmitLoading = false;
+          if (res && res.success) {
+            this.$Message.success("操作成功");
+            this.categoryModalVisible = false;
+          }
+        })
+        .catch(() => {
+          this.categorySubmitLoading = false;
+        });
     },
     handleStatusSwitchChange(row, checked) {
       const disable = !checked;
@@ -373,36 +286,29 @@ export default {
         },
       });
     },
-    // 删除品牌
     async delBrand(id) {
-      let res = await delBrand(id);
-
+      const res = await delBrand(id);
       if (res.success) {
         this.$Message.success("品牌删除成功!");
         this.getDataList();
       }
     },
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
-    // 分页 改变页数
     changePageSize(v) {
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 获取数据
     getDataList() {
       this.loading = true;
       getManagerBrandPage(this.searchForm).then((res) => {
@@ -413,13 +319,11 @@ export default {
         }
       });
     },
-    // 提交表单
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
           this.submitLoading = true;
           if (this.modalType === 0) {
-            // 添加 避免编辑后传入id等数据 记得删除
             delete this.form.id;
             addBrand(this.form).then((res) => {
               this.submitLoading = false;
@@ -430,7 +334,6 @@ export default {
               }
             });
           } else {
-            // 编辑
             updateBrand(this.form).then((res) => {
               this.submitLoading = false;
               if (res.success) {
@@ -443,28 +346,24 @@ export default {
         }
       });
     },
-    // 添加
     add() {
       this.modalType = 0;
       this.modalTitle = "添加";
-      this.$refs.form.resetFields();
+      this.$refs.form?.resetFields();
       delete this.form.id;
       this.modalVisible = true;
     },
-    
-    // 编辑
     edit(v) {
       this.modalType = 1;
       this.modalTitle = "编辑";
-      this.$refs.form.resetFields();
-      // 转换null为""
-      for (let attr in v) {
+      this.$refs.form?.resetFields();
+      for (const attr in v) {
         if (v[attr] === null) {
           v[attr] = "";
         }
       }
-      let str = JSON.stringify(v);
-      let data = JSON.parse(str);
+      const str = JSON.stringify(v);
+      const data = JSON.parse(str);
       this.form = data;
       this.modalVisible = true;
     },
@@ -474,3 +373,6 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/manager/src/views/goods/goods-manage/category.vue b/manager/src/views/goods/goods-manage/category.vue
index be2c4157..bd8715c5 100644
--- a/manager/src/views/goods/goods-manage/category.vue
+++ b/manager/src/views/goods/goods-manage/category.vue
@@ -1,165 +1,163 @@
 <template>
   <div>
-    <Card>
+    <el-card>
       <div class="mb_10">
-        <Button @click="addParent" icon="md-add">添加一级分类</Button>
+        <el-button type="primary" @click="addParent">添加一级分类</el-button>
       </div>
-      <Table
-      update-show-children
+
+      <el-table
+        v-loading="loading"
         class="table"
-        :load-data="handleLoadData"
-        row-key="id"
-        :loading="loading"
         :data="tableData"
-        :columns="columns"
+        row-key="id"
+        border
+        :tree-props="{ children: 'children' }"
+        style="width: 100%"
       >
-        <template slot="action" slot-scope="scope">
-          <div class="ops">
-            <a class="ops-link" @click="edit(scope.row)">编辑</a>
-            <a class="ops-link" @click="remove(scope.row)">删除</a>
-            <a v-show="scope.row.level != 2" class="ops-link" @click="addChildren(scope.row)">添加子分类</a>
-          </div>
-        </template>
-
-        <template slot="commissionRate" slot-scope="scope">
-          <priceColorScheme v-if="scope.row.commissionRate > 0" unit=""  :color="$mainColor" :value="scope.row.commissionRate">%</priceColorScheme>
-          <priceColorScheme v-else :value="scope.row.commissionRate" unit=""  >%</priceColorScheme>
-           <!-- {{ scope.row.commissionRate }}% -->
-        </template>
-
-        <template slot="deleteFlag" slot-scope="{ row }">
-          <i-switch
-            size="large"
-            v-model="row.deleteFlag"
-            :true-value="false"
-            :false-value="true"
-            :loading="row._statusLoading"
-            @on-change="onStatusSwitchChange(row, $event)"
-          >
-            <span slot="open">开启</span>
-            <span slot="close">关闭</span>
-          </i-switch>
-        </template>
-      </Table>
-
-      <Modal
-        :title="modalTitle"
-        v-model="modalVisible"
-        :mask-closable="false"
-        :width="500"
-      >
-        <Form ref="form" :model="formAdd" :label-width="100" :rules="formValidate">
-          <div v-if="showParent">
-            <FormItem label="上级分类" prop="parentId">
-              {{ parentTitle }}
-              <Input
-                v-model="formAdd.parentId"
-                clearable
-                style="width: 100%; display: none"
-              />
-            </FormItem>
-          </div>
-          <FormItem label="层级" prop="level" style="display: none">
-            <Input v-model="formAdd.level" clearable style="width: 100%" />
-          </FormItem>
-          <FormItem label="分类名称" prop="name">
-            <Input v-model="formAdd.name" clearable style="width: 100%" />
-          </FormItem>
-          <FormItem label="分类图标" prop="image" v-if="formAdd.level !== 1">
-            <upload-pic-input
-              v-model="formAdd.image"
-              style="width: 100%"
-            ></upload-pic-input>
-          </FormItem>
-          <FormItem label="排序值" prop="sortOrder" style="width: 345px">
-            <InputNumber v-model="formAdd.sortOrder"></InputNumber>
-          </FormItem>
-          <FormItem label="佣金比例(%)" prop="commissionRate" style="width: 345px">
-            <InputNumber :max="100" :min="0" v-model="formAdd.commissionRate"></InputNumber>
-          </FormItem>
-          <FormItem label="是否启用" prop="deleteFlag">
-            <i-switch
-              size="large"
-              v-model="formAdd.deleteFlag"
-              :true-value="false"
-              :false-value="true"
+        <el-table-column prop="name" label="分类名称" min-width="200" />
+        <el-table-column label="状态" width="120">
+          <template #default="{ row }">
+            <el-switch
+              v-if="row"
+              v-model="row.deleteFlag"
+              :active-value="false"
+              :inactive-value="true"
+              inline-prompt
+              active-text="开启"
+              inactive-text="关闭"
+              :loading="!!row._statusLoading"
+              @change="(val) => onStatusSwitchChange(row, val)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="佣金" width="120">
+          <template #default="{ row }">
+            <span
+              v-if="row"
+              :style="row.commissionRate > 0 ? { color: $mainColor } : {}"
             >
-              <span slot="open">启用</span>
-              <span slot="close">禁用</span>
-            </i-switch>
-          </FormItem>
-        </Form>
-        <div slot="footer">
-          <Button type="text" @click="modalVisible = false">取消</Button>
-          <Button type="primary" :loading="submitLoading" @click="Submit">提交</Button>
-        </div>
-      </Modal>
+              {{ row.commissionRate }}%
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="220" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row" class="ops">
+              <a class="link-text" @click="edit(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+              <template v-if="row.level != 2">
+                <span class="op-split">|</span>
+                <a class="link-text" @click="addChildren(row)">添加子分类</a>
+              </template>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
 
-      <Modal
-        :title="modalBrandTitle"
+      <el-dialog
+        v-model="modalVisible"
+        :title="modalTitle"
+        width="500px"
+        :close-on-click-modal="false"
+        destroy-on-close
+      >
+        <el-form ref="form" :model="formAdd" label-width="100px" :rules="formValidate">
+          <el-form-item v-if="showParent" label="上级分类" prop="parentId">
+            {{ parentTitle }}
+            <el-input v-model="formAdd.parentId" style="display: none" />
+          </el-form-item>
+          <el-form-item label="层级" prop="level" style="display: none">
+            <el-input v-model="formAdd.level" />
+          </el-form-item>
+          <el-form-item label="分类名称" prop="name">
+            <el-input v-model="formAdd.name" clearable />
+          </el-form-item>
+          <el-form-item v-if="formAdd.level !== 1" label="分类图标" prop="image">
+            <upload-pic-input v-model="formAdd.image" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="排序值" prop="sortOrder">
+            <el-input-number v-model="formAdd.sortOrder" style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="佣金比例(%)" prop="commissionRate">
+            <el-input-number v-model="formAdd.commissionRate" :min="0" :max="100" style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="是否启用" prop="deleteFlag">
+            <el-switch
+              v-model="formAdd.deleteFlag"
+              :active-value="false"
+              :inactive-value="true"
+              inline-prompt
+              active-text="启用"
+              inactive-text="禁用"
+            />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <el-button @click="modalVisible = false">取消</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="Submit">提交</el-button>
+        </template>
+      </el-dialog>
+
+      <el-dialog
         v-model="modalBrandVisible"
-        :mask-closable="false"
-        :width="500"
+        :title="modalBrandTitle"
+        width="500px"
+        :close-on-click-modal="false"
       >
-        <Form ref="brandForm" :model="brandForm" :label-width="100">
-          <Select v-model="brandForm.categoryBrands" filterable multiple>
-            <Option v-for="item in brandWay" :value="item.id" :key="item.id">{{
-              item.name
-            }}</Option>
-          </Select>
-        </Form>
-        <div slot="footer">
-          <Button type="text" @click="modalBrandVisible = false">取消</Button>
-          <Button type="primary" :loading="submitLoading" @click="saveCategoryBrand"
-            >提交</Button
-          >
-        </div>
-      </Modal>
+        <el-form ref="brandForm" :model="brandForm" label-width="100px">
+          <el-select v-model="brandForm.categoryBrands" filterable multiple style="width: 100%">
+            <el-option v-for="item in brandWay" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form>
+        <template #footer>
+          <el-button @click="modalBrandVisible = false">取消</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="saveCategoryBrand">提交</el-button>
+        </template>
+      </el-dialog>
 
-      <Modal
-        :title="modalSpecTitle"
+      <el-dialog
         v-model="modalSpecVisible"
-        :mask-closable="false"
-        :width="500"
+        :title="modalSpecTitle"
+        width="500px"
+        :close-on-click-modal="false"
       >
-        <Form ref="specForm" :model="specForm" :label-width="100">
-          <Select v-model="specForm.categorySpecs" multiple>
-            <Option
+        <el-form ref="specForm" :model="specForm" label-width="100px">
+          <el-select v-model="specForm.categorySpecs" multiple style="width: 100%">
+            <el-option
               v-for="item in specifications"
-              :value="item.id"
               :key="item.id"
               :label="item.specName"
-            >
-            </Option>
-          </Select>
-        </Form>
-        <div slot="footer">
-          <Button type="text" @click="modalSpecVisible = false">取消</Button>
-          <Button type="primary" :loading="submitLoading" @click="saveCategorySpec"
-            >提交</Button
-          >
-        </div>
-      </Modal>
-    </Card>
+              :value="item.id"
+            />
+          </el-select>
+        </el-form>
+        <template #footer>
+          <el-button @click="modalSpecVisible = false">取消</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="saveCategorySpec">提交</el-button>
+        </template>
+      </el-dialog>
+    </el-card>
   </div>
 </template>
+
 <script>
 import {
-delCategory,
-disableCategory,
-getBrandListData,
-getCategoryBrandListData,
-getCategorySpecListData,
-getCategoryTree,
-getSpecificationList,
-insertCategory,
-saveCategoryBrand,
-saveCategorySpec,
-updateCategory,
+  delCategory,
+  disableCategory,
+  getBrandListData,
+  getCategoryBrandListData,
+  getCategorySpecListData,
+  getCategoryTree,
+  getSpecificationList,
+  insertCategory,
+  saveCategoryBrand,
+  saveCategorySpec,
+  updateCategory,
 } from "@/api/goods";
-
 import uploadPicInput from "@/components/lili/upload-pic-input";
 import { regular } from "@/utils";
+
 export default {
   name: "goods-category",
   components: {
@@ -167,69 +165,44 @@ export default {
   },
   data() {
     return {
-      recordLevel:[], // 记录当前层级
-      submitLoading: false, //加载状态
-      categoryList: [], // 分类列表
-      loading: false, // 加载状态
-      brands: [], //品牌集合
-      specifications: [], //规格集合
-      categoryId: "", // 分类id
-      categorySpecs: [], //已经选择的规格
-      modalType: 0, // 添加或编辑标识
-      modalVisible: false, // 添加或编辑显示
-      modalBrandVisible: false, //品牌关联编辑显示
-      modalSpecVisible: false, //品牌关联编辑显示
-      modalTitle: "", // 添加或编辑标题
-      showParent: false, // 是否展示上级菜单
-      parentTitle: "", // 父级菜单名称
-      modalBrandTitle: "", // 品牌弹窗标题
-      modalSpecTitle: "", // 规格弹窗标题
+      submitLoading: false,
+      categoryList: [],
+      loading: false,
+      brands: [],
+      specifications: [],
+      categoryId: "",
+      categorySpecs: [],
+      modalType: 0,
+      modalVisible: false,
+      modalBrandVisible: false,
+      modalSpecVisible: false,
+      modalTitle: "",
+      showParent: false,
+      parentTitle: "",
+      modalBrandTitle: "",
+      modalSpecTitle: "",
       formAdd: {
-        // 添加或编辑表单对象初始化数据
         parentId: "",
         name: "",
         image: "",
         sortOrder: 0,
-        deleteFlag: 0,
+        deleteFlag: false,
         commissionRate: 0,
         level: 0,
       },
       brandForm: {
         categoryBrands: [],
       },
-      brandWay: "", //请求绑定品牌的信息
-      specForm: {}, // 规格数据
-      // 表单验证规则
+      brandWay: [],
+      specForm: {
+        categorySpecs: [],
+      },
       formValidate: {
         commissionRate: [regular.REQUIRED, regular.INTEGER],
         name: [regular.REQUIRED, regular.VARCHAR20],
         sortOrder: [regular.REQUIRED, regular.INTEGER],
       },
-      columns: [
-        {
-          title: "分类名称",
-          key: "name",
-          tree: true,
-        },
-        {
-          title: "状态",
-          slot: "deleteFlag",
-        },
-        {
-          title: "佣金",
-          key: "commissionRate",
-
-          slot: "commissionRate",
-        },
-        {
-          title: "操作",
-          key: "action",
-
-          slot: "action",
-        },
-      ],
-      tableData: [], // 表格数据
-      checkedCategoryChildren: "", //选中的分类子级
+      tableData: [],
     };
   },
   methods: {
@@ -250,48 +223,38 @@ export default {
       const isClosing = nextDeleteFlag === true;
       this.$Modal.confirm({
         title: isClosing ? "确认关闭" : "确认开启",
-        content:
-          "您是否要" +
-          (isClosing ? "关闭" : "开启") +
-          "当前分类 " +
-          row.name +
-          " 及其子分类?",
+        content: `您是否要${isClosing ? "关闭" : "开启"}当前分类 ${row.name} 及其子分类?`,
         loading: true,
         okText: "是",
         cancelText: "否",
         onOk: () => {
-          this.$set(row, "_statusLoading", true);
-          disableCategory(row.id, { enableOperations: isClosing ? true : 0 }).then(
-            (res) => {
-              this.$Modal.remove();
-              this.$set(row, "_statusLoading", false);
-              if (res && res.success) {
-                this.$Message.success("操作成功");
-                this.getAllList(0);
-                return;
-              }
-              row.deleteFlag = previousDeleteFlag;
+          row._statusLoading = true;
+          disableCategory(row.id, { enableOperations: isClosing ? true : 0 }).then((res) => {
+            this.$Modal.remove();
+            row._statusLoading = false;
+            if (res && res.success) {
+              this.$Message.success("操作成功");
+              this.getAllList();
+              return;
             }
-          );
+            row.deleteFlag = previousDeleteFlag;
+          });
         },
         onCancel: () => {
           row.deleteFlag = previousDeleteFlag;
         },
       });
     },
-    // 初始化数据
     init() {
-      this.getAllList(0);
+      this.getAllList();
       this.getBrandList();
       this.getSpecList();
     },
-    //获取所有品牌
     getBrandList() {
       getBrandListData().then((res) => {
         this.brandWay = res;
       });
     },
-    //获取所有规格
     getSpecList() {
       getSpecificationList().then((res) => {
         if (res.length != 0) {
@@ -299,7 +262,6 @@ export default {
         }
       });
     },
-    //弹出品牌关联框
     brandOperation(v) {
       getCategoryBrandListData(v.id).then((res) => {
         this.categoryId = v.id;
@@ -308,7 +270,6 @@ export default {
         this.modalBrandVisible = true;
       });
     },
-    //弹出规格关联框
     specOperation(v) {
       getCategorySpecListData(v.id).then((res) => {
         this.categoryId = v.id;
@@ -317,7 +278,6 @@ export default {
         this.modalSpecVisible = true;
       });
     },
-    //保存分类规格绑定
     saveCategorySpec() {
       saveCategorySpec(this.categoryId, this.specForm).then((res) => {
         this.submitLoading = false;
@@ -327,7 +287,6 @@ export default {
         }
       });
     },
-    //保存分类品牌绑定
     saveCategoryBrand() {
       saveCategoryBrand(this.categoryId, this.brandForm).then((res) => {
         this.submitLoading = false;
@@ -337,19 +296,17 @@ export default {
         }
       });
     },
-    // 添加子分类
     addChildren(v) {
       this.modalType = 0;
       this.modalTitle = "添加子分类";
       this.parentTitle = v.name;
-      this.formAdd.level = eval(v.level + "+1");
+      this.formAdd.level = Number(v.level) + 1;
       this.formAdd.commissionRate = v.commissionRate;
       this.showParent = true;
       delete this.formAdd.id;
       this.formAdd.parentId = v.id;
       this.modalVisible = true;
     },
-    // 编辑分类
     edit(v) {
       this.modalType = 1;
       this.modalTitle = "编辑";
@@ -364,57 +321,51 @@ export default {
       this.showParent = false;
       this.modalVisible = true;
     },
-    // 添加一级分类
     addParent() {
       this.modalType = 0;
       this.modalTitle = "添加一级分类";
       this.parentTitle = "顶级分类";
       this.showParent = true;
-      this.$refs.form.resetFields();
+      this.$refs.form?.resetFields();
       delete this.formAdd.id;
       this.formAdd.parentId = 0;
+      this.formAdd.level = 0;
       this.modalVisible = true;
     },
-    // 提交
     Submit() {
       this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          if (this.modalType === 0) {
-            // 添加 避免编辑后传入id等数据 记得删除
-            delete this.formAdd.id;
-            insertCategory(this.formAdd).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("添加成功");
-                this.getAllList();
-                this.modalVisible = false;
-                this.$refs.form.resetFields();
-              }
-            });
-          } else {
-            // 编辑
-            updateCategory(this.formAdd).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("修改成功");
-                this.getAllList();
-                this.modalVisible = false;
-                this.$refs.form.resetFields();
-              }
-            });
-          }
+        if (!valid) return;
+        this.submitLoading = true;
+        if (this.modalType === 0) {
+          delete this.formAdd.id;
+          insertCategory(this.formAdd).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("添加成功");
+              this.getAllList();
+              this.modalVisible = false;
+              this.$refs.form.resetFields();
+            }
+          });
+        } else {
+          updateCategory(this.formAdd).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("修改成功");
+              this.getAllList();
+              this.modalVisible = false;
+              this.$refs.form.resetFields();
+            }
+          });
         }
       });
     },
-    // 删除分类
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
         content: "您确认要删除 " + v.name + " ?",
         loading: true,
         onOk: () => {
-          // 删除
           delCategory(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -425,80 +376,22 @@ export default {
         },
       });
     },
-
-    // 异步手动加载分类名称
-    handleLoadData(item, callback) {
-      this.recordLevel[item.level] = item.id;
-      if (item.level == 0) {
-        let categoryList = JSON.parse(JSON.stringify(this.categoryList));
-        categoryList.forEach((val) => {
-          if (val.id == item.id) {
-            val.children.map((child) => {
-              child._loading = false;
-              child.children = [];
-            });
-            this.normalizeCategoryTree(val.children);
-            // 模拟加载
-            setTimeout(() => {
-              callback(val.children);
-            }, 100);
-          }
-        });
-      } else {
-        this.deepCategoryChildren(item.id, this.categoryList);
-        this.normalizeCategoryTree(this.checkedCategoryChildren);
-        setTimeout(() => {
-          callback(this.checkedCategoryChildren);
-        }, 100);
-      }
-    },
-
-    // 通过递归children来实现手动加载数据
-    deepCategoryChildren(id, list) {
-      if (id != "0" && list.length != 0) {
-        for (let i = 0; i < list.length; i++) {
-          let item = list[i];
-          if (item.id == id) {
-            this.checkedCategoryChildren = item.children;
-            return;
-          } else {
-            this.deepCategoryChildren(id, item.children);
-          }
-        }
-      }
-    },
-    // 获取分类数据
     getAllList() {
       this.loading = true;
-      getCategoryTree().then((res) => {
-        this.loading = false;
-        if (res.success) {
-          localStorage.setItem("category", JSON.stringify(res.result));
-          this.normalizeCategoryTree(res.result);
-          this.categoryList = JSON.parse(JSON.stringify(res.result));
-          this.tableData = res.result.map((item) => {
-            if(this.recordLevel[0] && item.id === this.recordLevel[0]) {
-              item._showChildren = true
-              // 继续判断第二层
-              if(this.recordLevel[1] && item.children){
-                item.children.map((child)=>{
-                  if(this.recordLevel[1] && child.id === this.recordLevel[1]){
-                    child._showChildren = true
-                  }
-                })
-              }
-            }else{
-              if (item.children.length !== 0) {
-                item.children = [];
-                item._loading = false;
-              }
-           }
-            return item;
-          });
-        }
-      });
+      getCategoryTree()
+        .then((res) => {
+          this.loading = false;
+          if (res.success) {
+            localStorage.setItem("category", JSON.stringify(res.result));
+            this.normalizeCategoryTree(res.result);
+            this.categoryList = JSON.parse(JSON.stringify(res.result));
+            this.tableData = JSON.parse(JSON.stringify(res.result));
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
-    // 启用分类
     enable(v) {
       this.$Modal.confirm({
         title: "确认启用",
@@ -511,16 +404,15 @@ export default {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("操作成功");
-              this.getAllList(0);
+              this.getAllList();
             }
           });
         },
         onCancel: () => {
-          this.getAllList(0);
+          this.getAllList();
         },
       });
     },
-    // 禁用分类
     disable(v) {
       this.$Modal.confirm({
         title: "确认禁用",
@@ -533,12 +425,12 @@ export default {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("操作成功");
-              this.getAllList(0);
+              this.getAllList();
             }
           });
         },
         onCancel: () => {
-          this.getAllList(0);
+          this.getAllList();
         },
       });
     },
@@ -548,31 +440,15 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
-::v-deep .ivu-table-wrapper {
+:deep(.el-table__body-wrapper) {
   overflow: auto;
 }
 .table {
-  min-height: 100vh;
-  height: auto;
+  min-height: 60vh;
 }
-.ops-link {
-  color: #2d8cf0;
-  cursor: pointer;
-  text-decoration: none;
-}
-.ops {
-  display: flex;
-  flex-wrap: wrap;
-}
-.ops-link + .ops-link {
-  margin-left: 16px;
-  position: relative;
-}
-.ops-link + .ops-link::before {
-  content: "|";
-  position: absolute;
-  left: -10px;
-  color: #dcdee2;
+.mb_10 {
+  margin-bottom: 10px;
 }
 </style>
diff --git a/manager/src/views/goods/goods-manage/parameter-edit.vue b/manager/src/views/goods/goods-manage/parameter-edit.vue
index 70bb57e6..91402bcc 100644
--- a/manager/src/views/goods/goods-manage/parameter-edit.vue
+++ b/manager/src/views/goods/goods-manage/parameter-edit.vue
@@ -1,73 +1,92 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="参数名称" prop="paramName">
-          <Input v-model="form.paramName" clearable style="width: 520px" />
-        </FormItem>
-        <FormItem label="是否必填" prop="required">
-          <RadioGroup v-model="form.required">
-            <Radio :label="0">否</Radio>
-            <Radio :label="1">是</Radio>
-          </RadioGroup>
-          <span style="margin-left: 10px; color: #999; font-size: 12px"
-            >商品发布时参数是否必填</span
-          >
-        </FormItem>
-        <FormItem label="是否索引" prop="isIndex">
-          <RadioGroup v-model="form.isIndex">
-            <Radio :label="0">否</Radio>
-            <Radio :label="1">是</Radio>
-          </RadioGroup>
-          <span style="margin-left: 10px; color: #999; font-size: 12px"
-            >开启索引后，用户将可以通过该参数筛选商品，索引开关不影响商详页的参数展示</span
-          >
-        </FormItem>
-        <FormItem label="排序" prop="sort">
-          <InputNumber :min="0" type="number" v-model="form.sort" style="width: 520px" />
-        </FormItem>
-        <FormItem label="参数值" prop="options">
-          <Table :columns="optionColumns" :data="form.options" border size="small" style="width: 520px" />
+    <el-card>
+      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+        <el-form-item label="参数名称" prop="paramName">
+          <el-input v-model="form.paramName" clearable style="width: 520px" />
+        </el-form-item>
+        <el-form-item label="是否必填" prop="required">
+          <el-radio-group v-model="form.required">
+            <el-radio :value="0">否</el-radio>
+            <el-radio :value="1">是</el-radio>
+          </el-radio-group>
+          <span style="margin-left: 10px; color: #999; font-size: 12px">商品发布时参数是否必填</span>
+        </el-form-item>
+        <el-form-item label="是否索引" prop="isIndex">
+          <el-radio-group v-model="form.isIndex">
+            <el-radio :value="0">否</el-radio>
+            <el-radio :value="1">是</el-radio>
+          </el-radio-group>
+          <span style="margin-left: 10px; color: #999; font-size: 12px">
+            开启索引后，用户将可以通过该参数筛选商品，索引开关不影响商详页的参数展示
+          </span>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number :min="0" v-model="form.sort" style="width: 520px" />
+        </el-form-item>
+        <el-form-item label="参数值" prop="options">
+          <el-table :data="form.options" border size="small" style="width: 520px">
+            <el-table-column label="参数值" min-width="420">
+              <template #default="{ row, $index }">
+                <el-input
+                  v-if="row"
+                  v-model="form.options[$index].value"
+                  clearable
+                  @blur="touchOptionsValidate"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="90" align="center">
+              <template #default="{ row, $index }">
+                <a v-if="row" class="link-text" @click="removeOptionRow($index)">
+                  删除
+                </a>
+              </template>
+            </el-table-column>
+          </el-table>
           <div style="margin-top: 10px">
-            <Button type="primary" @click="addOptionRow">新增</Button>
+            <el-button type="primary" @click="addOptionRow">新增</el-button>
           </div>
-        </FormItem>
-        <FormItem label="关联分类">
-          <Button type="default" @click="openCategoryModal">选择分类</Button>
-          <span v-if="selectedCategoryNamesText" style="margin-left: 10px; color: #999; font-size: 12px"
-            >{{ selectedCategoryNamesText }}</span
-          >
-          <span v-else style="margin-left: 10px; color: #999; font-size: 12px"
-            >已选择{{ selectedCategoryIds.length }}个分类</span
-          >
-        </FormItem>
-        <FormItem>
-          <Button type="default" @click="back">返回</Button>
-          <Button type="primary" :loading="submitLoading" @click="handleSubmit">保存</Button>
-        </FormItem>
-      </Form>
-    </Card>
+        </el-form-item>
+        <el-form-item label="关联分类">
+          <el-button @click="openCategoryModal">选择分类</el-button>
+          <span v-if="selectedCategoryNamesText" style="margin-left: 10px; color: #999; font-size: 12px">
+            {{ selectedCategoryNamesText }}</span>
+          <span v-else style="margin-left: 10px; color: #999; font-size: 12px">
+            已选择{{ selectedCategoryIds.length }}个分类
+          </span>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="back">返回</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-    <Modal
-      :title="categoryModalTitle"
+    <el-dialog
       v-model="categoryModalVisible"
-      :mask-closable="false"
-      :width="700"
+      :title="categoryModalTitle"
+      width="700px"
+      :close-on-click-modal="false"
     >
-      <div style="position: relative; max-height: 520px; overflow: auto;">
-        <Spin size="large" fix v-if="categoryTreeLoading"></Spin>
-        <Tree
+      <div v-loading="categoryTreeLoading" style="position: relative; max-height: 520px; overflow: auto">
+        <el-tree
+          ref="categoryTree"
           :key="categoryTreeKey"
           :data="categoryTreeData"
+          :props="{ label: 'title', children: 'children' }"
+          node-key="id"
           show-checkbox
-          @on-check-change="onCategoryTreeCheckChange"
-        ></Tree>
+          default-expand-all
+          :default-checked-keys="selectedCategoryIds"
+          @check="onCategoryTreeCheckChange"
+        />
       </div>
-      <div slot="footer">
-        <Button type="text" @click="categoryModalVisible = false">取消</Button>
-        <Button type="primary" style="margin-left: 8px" @click="categoryModalVisible = false">确定</Button>
-      </div>
-    </Modal>
+      <template #footer>
+        <el-button @click="categoryModalVisible = false">取消</el-button>
+        <el-button type="primary" style="margin-left: 8px" @click="categoryModalVisible = false">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -190,51 +209,6 @@ export default {
         isIndex: 0,
         sort: 0,
       },
-      optionColumns: [
-        {
-          title: "参数值",
-          key: "value",
-          minWidth: 420,
-          render: (h, params) => {
-            return h("Input", {
-              props: {
-                value: params.row.value,
-                clearable: true,
-              },
-              on: {
-                input: (val) => {
-                  if (!Array.isArray(this.form.options)) this.form.options = [];
-                  if (!this.form.options[params.index]) return;
-                  this.form.options[params.index].value = val;
-                },
-                "on-blur": () => {
-                  this.touchOptionsValidate();
-                },
-              },
-            });
-          },
-        },
-        {
-          title: "操作",
-          width: 90,
-          align: "center",
-          render: (h, params) => {
-            return h(
-              "Button",
-              {
-                props: {
-                  type: "error",
-                  size: "small",
-                },
-                on: {
-                  click: () => this.removeOptionRow(params.index),
-                },
-              },
-              "删除",
-            );
-          },
-        },
-      ],
       formValidate: {
         paramName: [regular.REQUIRED, regular.VARCHAR5],
         options: [{ required: true, validator: validateOptions, trigger: "change" }],
@@ -253,8 +227,8 @@ export default {
       const selectedSet = new Set(toStringArray(this.selectedCategoryIds));
       const isSelected = (node) => {
         if (!node) return false;
-        const id = node.id !== undefined && node.id !== null ? String(node.id) : "";
-        if (id && selectedSet.has(id)) return true;
+        const nodeId = node.id !== undefined && node.id !== null ? String(node.id) : "";
+        if (nodeId && selectedSet.has(nodeId)) return true;
         const children = Array.isArray(node.children) ? node.children : [];
         if (children.length === 0) return false;
         return children.every(isSelected);
@@ -276,11 +250,11 @@ export default {
   watch: {
     "form.required"(val) {
       const n = normalize01(val, 0);
-      if (val !== n) this.$set(this.form, "required", n);
+      if (val !== n) this.form.required = n;
     },
     "form.isIndex"(val) {
       const n = normalize01(val, 0);
-      if (val !== n) this.$set(this.form, "isIndex", n);
+      if (val !== n) this.form.isIndex = n;
     },
   },
   methods: {
@@ -302,18 +276,13 @@ export default {
       this.form.options.splice(index, 1);
       this.touchOptionsValidate();
     },
-    buildCategoryTreeNodes(list, selectedSet) {
+    buildCategoryTreeNodes(list) {
       if (!Array.isArray(list) || list.length === 0) return [];
-      return list.map((item) => {
-        const children = this.buildCategoryTreeNodes(item.children || [], selectedSet);
-        return {
-          id: item.id,
-          title: item.name,
-          expand: true,
-          checked: selectedSet.has(String(item.id)),
-          children,
-        };
-      });
+      return list.map((item) => ({
+        id: item.id,
+        title: item.name,
+        children: this.buildCategoryTreeNodes(item.children || []),
+      }));
     },
     async loadDetail(parameterId) {
       if (!parameterId) return;
@@ -337,7 +306,6 @@ export default {
       this.categoryTreeLoading = true;
       this.categoryTreeKey += 1;
       try {
-        const selectedSet = new Set(toStringArray(this.selectedCategoryIds));
         if (!Array.isArray(this.categoryTreeSource) || this.categoryTreeSource.length === 0) {
           const treeRes = await getCategoryTree();
           this.categoryTreeSource = treeRes && treeRes.success ? treeRes.result || [] : [];
@@ -345,17 +313,13 @@ export default {
           buildCategoryIdNameMap(this.categoryTreeSource, map);
           this.categoryIdNameMap = map;
         }
-        this.categoryTreeData = this.buildCategoryTreeNodes(this.categoryTreeSource || [], selectedSet);
+        this.categoryTreeData = this.buildCategoryTreeNodes(this.categoryTreeSource || []);
       } finally {
         this.categoryTreeLoading = false;
       }
     },
-    onCategoryTreeCheckChange(checkedNodes) {
-      if (!Array.isArray(checkedNodes)) {
-        this.selectedCategoryIds = [];
-        return;
-      }
-      this.selectedCategoryIds = toStringArray(checkedNodes.map((node) => node && node.id).filter(Boolean));
+    onCategoryTreeCheckChange(_data, checkedInfo) {
+      this.selectedCategoryIds = toStringArray(checkedInfo?.checkedKeys || []);
     },
     initForm() {
       if (this.id) {
diff --git a/manager/src/views/goods/goods-manage/parameter.vue b/manager/src/views/goods/goods-manage/parameter.vue
index 83bb602f..43a6a9b6 100644
--- a/manager/src/views/goods/goods-manage/parameter.vue
+++ b/manager/src/views/goods/goods-manage/parameter.vue
@@ -1,55 +1,72 @@
 <template>
   <div class="search">
-    <Card>
-      <Form
+    <el-card>
+      <el-form
         ref="searchForm"
-        @submit.native.prevent
-        @keydown.enter.native="handleSearch"
         :model="searchForm"
         inline
-        :label-width="70"
+        label-width="70px"
         class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <Form-item label="参数名称">
-          <Input
-            type="text"
+        <el-form-item label="参数名称">
+          <el-input
             v-model="searchForm.paramName"
             placeholder="请输入参数名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Button @click="handleSearch" type="primary">搜索</Button>
-      </Form>
-    </Card>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-    <Card>
-      <Row class="operation padding-row">
-        <Button @click="goAdd" type="primary">添加</Button>
-      </Row>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table"></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="goAdd">添加</el-button>
+      </div>
+      <el-table v-loading="loading" border :data="data" ref="table" style="width: 100%">
+        <el-table-column prop="paramName" label="参数名称" width="300" />
+        <el-table-column prop="options" label="参数值" min-width="260" show-overflow-tooltip />
+        <el-table-column label="必填" width="300" align="center">
+          <template #default="{ row }">
+            <span v-if="row">{{ isTruthyFlag(row.required) ? "是" : "否" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="可索引" width="300" align="center">
+          <template #default="{ row }">
+            <span v-if="row">{{ isTruthyFlag(row.isIndex) ? "是" : "否" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="300" align="center" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row">
+              <a class="link-text" @click="goEdit(row)">编辑</a>
+              <span class="op-split">|</span>|<span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 <script>
-import {
-  deleteParams,
-  getGoodsParamsPage,
-} from "@/api/goods";
+import { deleteParams, getGoodsParamsPage } from "@/api/goods";
 
 export default {
   name: "categoryParams",
@@ -66,90 +83,12 @@ export default {
         paramName: "",
       },
       data: [],
-      columns: [
-        {
-          title: "参数名称",
-          key: "paramName",
-          width: 300,
-          resizable: true,
-          sortable: false,
-        },
-        {
-          title: "参数值",
-          key: "options",
-          minWidth: 260,
-          tooltip: true,
-        },
-        {
-          title: "必填",
-          key: "required",
-          width: 300,
-          align: "center",
-          render: (h, params) => {
-            const val = params.row.required;
-            const on = val === 1 || val === "1" || val === true;
-            return h("span", on ? "是" : "否");
-          },
-        },
-        {
-          title: "可索引",
-          key: "isIndex",
-          width: 300,
-          align: "center",
-          render: (h, params) => {
-            const val = params.row.isIndex;
-            const on = val === 1 || val === "1" || val === true;
-            return h("span", on ? "是" : "否");
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 300,
-          align: "center",
-          fixed: "right",
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.goEdit(params.row);
-                    },
-                  },
-                },
-                "编辑"
-              ),
-              h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
     };
   },
   methods: {
+    isTruthyFlag(val) {
+      return val === 1 || val === "1" || val === true;
+    },
     init() {
       this.getDataList();
     },
@@ -209,4 +148,10 @@ export default {
   },
 };
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+</style>
diff --git a/manager/src/views/goods/goods-review/index.vue b/manager/src/views/goods/goods-review/index.vue
index 0c7b3fde..c54b34a0 100644
--- a/manager/src/views/goods/goods-review/index.vue
+++ b/manager/src/views/goods/goods-review/index.vue
@@ -1,103 +1,171 @@
 <template>
   <div>
-    <Card>
-      <Row>
-        <Form ref="searchForm" :model="searchForm" @keydown.enter.native="handleSearch" @submit.native.prevent inline :label-width="70" class="search-form">
-          <Form-item label="会员名称" prop="memberName">
-            <Input type="text" v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 240px"/>
-          </Form-item>
-          <Form-item label="商品名称" prop="goodsName">
-            <Input type="text" v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 240px"/>
-          </Form-item>
-          <Button @click="handleSearch" type="primary" class="search-btn" icon="ios-search">搜索</Button>
-        </Form>
-      </Row>
-    </Card>
-    <Card>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10">
-        <!-- 页面展示 -->
-        <template slot="shopDisableSlot" slot-scope="scope">
-          <i-switch size="large" true-value="OPEN" false-value="CLOSE" v-model="scope.row.status"
-                    @on-change="changeSwitch(scope.row)">
-            <span slot="open">展示</span>
-            <span slot="close">隐藏</span>
-          </i-switch>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
-              @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]"
-              size="small" show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
-    <!-- 评价详情 -->
-    <Modal v-model="infoFlag" width="800" :title="infoTitle">
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
+            v-model="searchForm.memberName"
+            placeholder="请输入会员名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="商品名称" prop="goodsName">
+          <el-input
+            v-model="searchForm.goodsName"
+            placeholder="请输入商品名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
+    <el-card>
+      <el-table ref="table" v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
+        <el-table-column prop="goodsName" label="商品名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="memberName" label="会员名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="content" label="评论内容" min-width="220" show-overflow-tooltip />
+        <el-table-column label="是否置顶" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="row.top ? 'danger' : 'info'">
+              {{ row.top ? "已置顶" : "未置顶" }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="评价" width="90">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="gradeTagType(row.grade)">{{ gradeText(row.grade) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="评价时间" width="170" />
+        <el-table-column label="页面展示" width="100">
+          <template #default="{ row }">
+            <el-switch
+              v-if="row"
+              v-model="row.status"
+              active-value="OPEN"
+              inactive-value="CLOSE"
+              inline-prompt
+              active-text="展示"
+              inactive-text="隐藏"
+              @change="changeSwitch(row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="220" align="center" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row" class="ops">
+              <a class="link-text" @click="info(row)">查看</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="updateTop(row)">{{ row.top ? "取消置顶" : "置顶评论" }}</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog v-model="infoFlag" :title="infoTitle" width="800px">
       <div class="info-list" style="overflow: hidden">
         <div class="left-container">
           <div class="product">
-            <img class="img" :src=infoData.goodsImage>
+            <img class="img" :src="infoData.goodsImage" />
           </div>
           <div class="show">
             <label>页面展示：</label>
-            <i-switch size="large" true-value="OPEN" false-value="CLOSE" v-model="infoData.status"
-                      @on-change="changeSwitchView" style="margin-top: 3px">
-              <span slot="open">展示</span>
-              <span slot="close">隐藏</span>
-            </i-switch>
+            <el-switch
+              v-model="infoData.status"
+              active-value="OPEN"
+              inactive-value="CLOSE"
+              inline-prompt
+              active-text="展示"
+              inactive-text="隐藏"
+              style="margin-top: 3px"
+              @change="changeSwitchView"
+            />
           </div>
         </div>
         <div class="right-container">
           <div class="border-b">{{ infoData.goodsName }}</div>
           <div class="border-b">
-            <div class="div-height"> 店铺名称：{{ infoData.storeName }}</div>
-            <div class="div-height"> 订单号：{{ infoData.orderNo }}</div>
+            <div class="div-height">店铺名称：{{ infoData.storeName }}</div>
+            <div class="div-height">订单号：{{ infoData.orderNo }}</div>
           </div>
-
           <div class="border-b">
-            <List>
-
-              <ListItem>
-                <ListItemMeta :avatar="infoData.memberProfile" :title="infoData.memberName"
-                  :description="infoData.content"/>
-              </ListItem>
-              <div class="score-content">
-                <span>物流评分：{{infoData.deliveryScore}}</span>
-                <span>服务评分：{{infoData.serviceScore}}</span>
-                <span>描述评分：{{infoData.descriptionScore}}</span>
+            <div class="review-item">
+              <el-avatar v-if="infoData.memberProfile" :src="infoData.memberProfile" :size="40" />
+              <div class="review-meta">
+                <div class="review-name">{{ infoData.memberName }}</div>
+                <div class="review-content">{{ infoData.content }}</div>
               </div>
-              <div class="" v-if="infoData.haveImage">
-                评价图
-                <div style="margin-left: 40px">
-                  <template v-if="infoData.images && infoData.images.length">
-                    <img style="width: 100px;height: 110px;margin-left: 2px"
-                       v-for="(img,index) in infoData.images.split(',')"  :src="img"
-                       alt="" :key="index"/>
-                  </template>
-
-                </div>
+            </div>
+            <div class="score-content">
+              <span>物流评分：{{ infoData.deliveryScore }}</span>
+              <span>服务评分：{{ infoData.serviceScore }}</span>
+              <span>描述评分：{{ infoData.descriptionScore }}</span>
+            </div>
+            <div v-if="infoData.haveImage">
+              评价图
+              <div style="margin-left: 40px">
+                <template v-if="infoData.images && infoData.images.length">
+                  <img
+                    v-for="(img, index) in infoData.images.split(',')"
+                    :key="index"
+                    style="width: 100px; height: 110px; margin-left: 2px"
+                    :src="img"
+                    alt=""
+                  />
+                </template>
               </div>
-            </List>
+            </div>
           </div>
-          <div class="border-b" v-if="infoData.reply">
+          <div v-if="infoData.reply" class="border-b">
             <div>
-              <div>
-                <div style="float: left"> 商家回复：</div>
-                <div style="margin-left: 60px">{{ infoData.reply }}</div>
-              </div>
-              <div v-if="infoData.haveReplyImage">
-                <div style="margin-left: 60px">
-                  <template  v-if="infoData.replyImage && infoData.replyImage.length">
-                    <img style="width: 100px;height: 110px" v-for="(img,index) in infoData.replyImage.split(',')" :key="index"
-                       :src="img" alt=""/>
-                  </template>
-                </div>
+              <div style="float: left">商家回复：</div>
+              <div style="margin-left: 60px">{{ infoData.reply }}</div>
+            </div>
+            <div v-if="infoData.haveReplyImage">
+              <div style="margin-left: 60px">
+                <template v-if="infoData.replyImage && infoData.replyImage.length">
+                  <img
+                    v-for="(img, index) in infoData.replyImage.split(',')"
+                    :key="index"
+                    style="width: 100px; height: 110px"
+                    :src="img"
+                    alt=""
+                  />
+                </template>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 
@@ -105,223 +173,66 @@
 import * as API_Member from "@/api/member";
 
 export default {
-  name: "goods-review", // 会员评价
+  name: "goods-review",
   data() {
     return {
-      infoData: {}, // 商品信息
-      infoFlag: false, // 评价展示
-      infoTitle: "", // modal名称
-      loading: true, // 表单加载状态
+      infoData: {},
+      infoFlag: false,
+      infoTitle: "",
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
+        pageNumber: 1,
+        pageSize: 20,
         goodsName: "",
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
       },
-      columns: [
-        // 表头
-        {
-          title: "商品名称",
-          key: "goodsName",
-          minWidth: 120,
-          align: "left",
-          tooltip: true,
-        },
-        {
-          title: "会员名称",
-          key: "memberName",
-          minWidth: 120,
-          align: "left",
-          tooltip: true,
-        },
-        {
-          title: "评论内容",
-          key: "content",
-          minWidth: 220,
-          align: "left",
-          tooltip: true,
-        },
-        {
-          title: "是否置顶",
-          key: "top",
-          align: "center",
-          width: 100,
-          render: (h, params) => {
-            return h(
-              "Tag",
-              {
-                props: {
-                  color: params.row.top ? "red" : "default",
-                },
-              },
-              params.row.top ? "已置顶" : "未置顶"
-            );
-          },
-        },
-        {
-          title: "评价",
-          key: "grade",
-          align: "left",
-          width: 90,
-          render: (h, params) => {
-            if (params.row.grade == "GOOD") {
-              return h("Tag", {props: {color: "green",},}, "好评");
-            } else if (params.row.grade == "MODERATE") {
-              return h("Tag", {props: {color: "orange",},}, "中评");
-            } else {
-              return h("Tag", {props: {color: "red",},}, "差评");
-            }
-          }
-        },
-        {
-          title: "评价时间",
-          key: "createTime",
-          align: "left",
-          width: 170
-        },
-        {
-          title: "页面展示",
-          key: "shopDisable",
-          align: "left",
-          width: 100,
-          slot: "shopDisableSlot",
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 220,
-          align: "center",
-          fixed: "right",
-          render: (h, params) => {
-            return h("div", { class: "ops" }, [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.info(params.row);
-                    },
-                  },
-                },
-                "查看"
-              ),
-              h(
-                "span",
-                {
-                  style: {
-                    margin: "0 8px",
-                    color: "#dcdee2",
-                  },
-                },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.updateTop(params.row);
-                    },
-                  },
-                },
-                params.row.top ? "取消置顶" : "置顶评论"
-              ),
-              h(
-                "span",
-                {
-                  style: {
-                    margin: "0 8px",
-                    color: "#dcdee2",
-                  },
-                },
-                "|"
-              ),
-              h(
-                "Poptip",
-                {
-                  props: { confirm: true, title: "确认删除" },
-                  on: {
-                    "on-ok": () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                [
-                  h(
-                    "a",
-                    {
-                      style: {
-                        color: "#2d8cf0",
-                        cursor: "pointer",
-                        textDecoration: "none",
-                      },
-                    },
-                    "删除"
-                  ),
-                ]
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 切换查看switch
-    changeSwitchView(val) {
-      let status = val;
-      API_Member.updateMemberReview(this.infoData.id, {status}).then(
-        (res) => {
-          this.$Message.success("修改成功!");
-          this.init();
-        }
-      );
+    gradeTagType(grade) {
+      if (grade === "GOOD") return "success";
+      if (grade === "MODERATE") return "warning";
+      return "danger";
+    },
+    gradeText(grade) {
+      if (grade === "GOOD") return "好评";
+      if (grade === "MODERATE") return "中评";
+      return "差评";
+    },
+    changeSwitchView(val) {
+      const status = val;
+      API_Member.updateMemberReview(this.infoData.id, { status }).then(() => {
+        this.$Message.success("修改成功!");
+        this.init();
+      });
     },
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
-      this.clearSelectAll();
     },
-    // 分页 改变页数
     changePageSize(v) {
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    //列表直接选择页面是否展示
     changeSwitch(v) {
-      let status = v.status;
-      API_Member.updateMemberReview(v.id, {status: status}).then((res) => {
+      const status = v.status;
+      API_Member.updateMemberReview(v.id, { status }).then(() => {
         this.init();
       });
     },
-    // 置顶评论
     updateTop(v) {
       const top = !v.top;
       API_Member.updateMemberReviewTop(v.id, { top }).then((res) => {
@@ -340,7 +251,6 @@ export default {
         }
       });
     },
-    // 获取列表
     getDataList() {
       this.loading = true;
       API_Member.getMemberReview(this.searchForm).then((res) => {
@@ -353,7 +263,6 @@ export default {
       this.total = this.data.length;
       this.loading = false;
     },
-    //评价详情
     info(v) {
       this.infoFlag = true;
       this.infoTitle = `用户${v.memberName}的评价详情`;
@@ -363,14 +272,13 @@ export default {
         }
       });
     },
-    // 删除评论
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
         content: "您确认要删除会员" + v.memberName + "的评论?",
         loading: true,
         onOk: () => {
-          API_Member.delMemberReview(v.id).then((res) => {
+          API_Member.delMemberReview(v.id).then(() => {
             this.$Modal.remove();
             this.$Message.success("修改成功");
             this.init();
@@ -384,6 +292,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .left-container {
   float: left;
@@ -408,8 +317,8 @@ img {
   border: 1px solid #d9d9d9;
   border-radius: 3px;
 }
-.show{
-  label{
+.show {
+  label {
     font-size: 14px;
   }
   margin-top: 15px;
@@ -430,12 +339,26 @@ label {
   position: relative;
   margin-top: 12px;
 }
-.div-height{
+.div-height {
   line-height: 25px;
 }
 .score-content {
   margin: 5px 0;
-  span{margin-right: 20px;}
+  span {
+    margin-right: 20px;
+  }
+}
+.review-item {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+.review-name {
+  font-weight: 500;
+}
+.review-content {
+  color: #666;
+  margin-top: 4px;
 }
 .ops a {
   color: #2d8cf0;
diff --git a/manager/src/views/goods/group/index.vue b/manager/src/views/goods/group/index.vue
index ab934445..e880b25d 100644
--- a/manager/src/views/goods/group/index.vue
+++ b/manager/src/views/goods/group/index.vue
@@ -1,61 +1,70 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation padding-row">
-        <Button type="primary" @click="openAdd">添加分组</Button>
-      </Row>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-        class="mt_10"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="openAdd">添加分组</el-button>
+      </div>
+
+      <el-table ref="table" v-loading="loading" :data="data" border class="mt_10" style="width: 100%">
+        <el-table-column prop="groupName" label="分组名称" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="description" label="分组描述" min-width="240" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="创建时间" width="180" />
+        <el-table-column prop="updateTime" label="更新时间" width="180" />
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row" class="ops" style="display: flex; justify-content: center">
+              <a class="link-text" @click="openEdit(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
-    <Modal v-model="addFlag" title="添加商品分组">
-      <Form ref="addForm" :model="formAdd" :rules="rulesAdd" :label-width="90">
-        <FormItem label="分组名称" prop="groupName" style="width: 90%;">
-          <Input v-model="formAdd.groupName" maxlength="30" placeholder="请输入分组名称" />
-        </FormItem>
-        <FormItem label="分组描述" prop="description" style="width: 90%;">
-          <Input v-model="formAdd.description" maxlength="200" placeholder="请输入分组描述" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button @click="addFlag = false">取消</Button>
-        <Button type="primary" :loading="submitAddLoading" @click="submitAdd">确定</Button>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
       </div>
-    </Modal>
-    <Modal v-model="editFlag" title="编辑商品分组">
-      <Form ref="editForm" :model="formEdit" :rules="rulesEdit" :label-width="90">
-        <Input v-model="formEdit.id" v-show="false" />
-        <FormItem label="分组名称" prop="groupName" style="width: 90%;">
-          <Input v-model="formEdit.groupName" maxlength="30" placeholder="请输入分组名称" />
-        </FormItem>
-        <FormItem label="分组描述" prop="description" style="width: 90%;">
-          <Input v-model="formEdit.description" maxlength="200" placeholder="请输入分组描述" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button @click="editFlag = false">取消</Button>
-        <Button type="primary" :loading="submitEditLoading" @click="submitEdit">确定</Button>
-      </div>
-    </Modal>
+    </el-card>
+
+    <el-dialog v-model="addFlag" title="添加商品分组" width="500px" :close-on-click-modal="false" destroy-on-close>
+      <el-form ref="addForm" :model="formAdd" :rules="rulesAdd" label-width="90px">
+        <el-form-item label="分组名称" prop="groupName" style="width: 90%">
+          <el-input v-model="formAdd.groupName" maxlength="30" placeholder="请输入分组名称" />
+        </el-form-item>
+        <el-form-item label="分组描述" prop="description" style="width: 90%">
+          <el-input v-model="formAdd.description" maxlength="200" placeholder="请输入分组描述" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="addFlag = false">取消</el-button>
+        <el-button type="primary" :loading="submitAddLoading" @click="submitAdd">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="editFlag" title="编辑商品分组" width="500px" :close-on-click-modal="false" destroy-on-close>
+      <el-form ref="editForm" :model="formEdit" :rules="rulesEdit" label-width="90px">
+        <el-input v-model="formEdit.id" style="display: none" />
+        <el-form-item label="分组名称" prop="groupName" style="width: 90%">
+          <el-input v-model="formEdit.groupName" maxlength="30" placeholder="请输入分组名称" />
+        </el-form-item>
+        <el-form-item label="分组描述" prop="description" style="width: 90%">
+          <el-input v-model="formEdit.description" maxlength="200" placeholder="请输入分组描述" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="editFlag = false">取消</el-button>
+        <el-button type="primary" :loading="submitEditLoading" @click="submitEdit">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -71,54 +80,6 @@ export default {
         pageNumber: 1,
         pageSize: 20,
       },
-      columns: [
-        {
-          title: "分组名称",
-          key: "groupName",
-          minWidth: 160,
-          tooltip: true,
-        },
-        {
-          title: "分组描述",
-          key: "description",
-          minWidth: 240,
-          tooltip: true,
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          width: 180,
-        },
-        {
-          title: "更新时间",
-          key: "updateTime",
-          width: 180,
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 200,
-          fixed: "right",
-          render: (h, params) => {
-            const linkStyle = {
-              color: "#2d8cf0",
-              cursor: "pointer",
-              textDecoration: "none",
-            };
-            const sep = h(
-              "span",
-              { style: { margin: "0 8px", color: "#dcdee2" } },
-              "|"
-            );
-            return h("div", { class: "ops", style: { display: "flex", justifyContent: "center" } }, [
-              h("a", { style: linkStyle, on: { click: () => this.openEdit(params.row) } }, "编辑"),
-              sep,
-              h("a", { style: linkStyle, on: { click: () => this.remove(params.row) } }, "删除"),
-            ]);
-          },
-        },
-      ],
       data: [],
       total: 0,
       addFlag: false,
@@ -135,10 +96,10 @@ export default {
         description: "",
       },
       rulesAdd: {
-        groupName: [{ required: true, message: "请输入分组名称" }],
+        groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
       },
       rulesEdit: {
-        groupName: [{ required: true, message: "请输入分组名称" }],
+        groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
       },
     };
   },
@@ -248,7 +209,7 @@ export default {
     remove(row) {
       this.$Modal.confirm({
         title: "提示",
-        content: "<p>确定删除该分组？</p>",
+        content: "确定删除该分组？",
         onOk: () => {
           API_Goods.deleteGoodsGroup(row.id)
             .then((res) => {
@@ -271,3 +232,16 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.ops a {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.ops span {
+  display: inline-block;
+  margin: 0 8px;
+  color: #dcdee2;
+}
+</style>
diff --git a/manager/src/views/goods/virtual-sales/index.vue b/manager/src/views/goods/virtual-sales/index.vue
index 50ea103e..1e5b5965 100644
--- a/manager/src/views/goods/virtual-sales/index.vue
+++ b/manager/src/views/goods/virtual-sales/index.vue
@@ -1,120 +1,160 @@
 <template>
   <div class="search">
-    <Card>
-      <Form
+    <el-card>
+      <el-form
         ref="searchForm"
         :model="searchForm"
         inline
-        :label-width="70"
+        label-width="70px"
         class="search-form"
-        @keydown.enter.native="handleSearch"
+        @keyup.enter="handleSearch"
       >
-        <Form-item label="商品名称" prop="goodsName">
-          <Input
+        <el-form-item label="商品名称" prop="goodsName">
+          <el-input
             v-model="searchForm.goodsName"
             placeholder="请输入商品名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="商品ID" prop="goodsId">
-          <Input
+        </el-form-item>
+        <el-form-item label="商品ID" prop="goodsId">
+          <el-input
             v-model="searchForm.goodsId"
             placeholder="请输入商品ID"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="SKU货号" prop="sn">
-          <Input
+        </el-form-item>
+        <el-form-item label="SKU货号" prop="sn">
+          <el-input
             v-model="searchForm.sn"
             placeholder="请输入SKU货号"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="店铺名称" prop="storeName">
-          <Input
+        </el-form-item>
+        <el-form-item label="店铺名称" prop="storeName">
+          <el-input
             v-model="searchForm.storeName"
             placeholder="请输入店铺名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Button
-          @click="handleSearch"
-          class="search-btn"
-          type="primary"
-          icon="ios-search"
-        >
-          搜索
-        </Button>
-        <Button @click="handleReset" style="margin-left: 8px">重置</Button>
-      </Form>
-    </Card>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+          <el-button style="margin-left: 8px" @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-    <Card class="mt_10">
-      <Alert show-icon>
-        支持按规格逐条设置虚拟销量，列表总销量 = 真实销量 + 虚拟销量。
-      </Alert>
+    <el-card class="mt_10">
+      <el-alert
+        type="info"
+        show-icon
+        :closable="false"
+        title="支持按规格逐条设置虚拟销量，列表总销量 = 真实销量 + 虚拟销量。"
+        style="margin-bottom: 10px"
+      />
 
       <div class="batch-operations">
-        <Button
+        <el-button
           type="primary"
           :disabled="selectedRows.length === 0"
           @click="openBatchVirtualSalesModal"
         >
           批量设置虚拟销量
-        </Button>
+        </el-button>
       </div>
 
-      <Table
-        :loading="loading"
-        :columns="columns"
-        :data="data"
+      <el-table
         ref="table"
+        v-loading="loading"
+        :data="data"
         class="mt_10"
-        sortable="custom"
-        @on-sort-change="changeSort"
-        @on-selection-change="handleSelectionChange"
+        style="width: 100%"
+        @sort-change="changeSort"
+        @selection-change="handleSelectionChange"
       >
-        <template slot="goodsSlot" slot-scope="{ row }">
-          <div class="goods-info">
-            <img
-              :src="row.thumbnail"
-              class="goods-thumbnail"
-            />
-            <div class="goods-text">
-              <div class="div-zoom">{{ row.goodsName }}</div>
-              <div class="sub-title" v-if="row.simpleSpecs">
-                规格：{{ row.simpleSpecs.trim() || "-" }}
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column prop="id" label="SKU ID" width="180" show-overflow-tooltip />
+        <el-table-column prop="goodsId" label="商品ID" width="180" show-overflow-tooltip />
+        <el-table-column label="商品信息" min-width="360">
+          <template #default="{ row }">
+            <div v-if="row" class="goods-info">
+              <img
+                v-if="row.thumbnail"
+                :src="row.thumbnail"
+                class="goods-thumbnail"
+                alt=""
+              />
+              <div class="goods-text">
+                <div class="div-zoom">{{ row.goodsName }}</div>
+                <div v-if="row.simpleSpecs" class="sub-title">
+                  规格：{{ row.simpleSpecs.trim() || "-" }}
+                </div>
               </div>
             </div>
-          </div>
-        </template>
-      </Table>
+          </template>
+        </el-table-column>
+        <el-table-column label="真实销量" width="110">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.buyCount || 0 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="虚拟销量" width="110">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.virtualSalesInput || 0 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="总销量" width="110">
+          <template #default="{ row }">
+            <span v-if="row">{{ getTotalSales(row) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="row.marketEnable === 'UPPER' ? 'success' : 'warning'">
+              {{ row.marketEnable === "UPPER" ? "上架" : "下架" }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100" align="center" fixed="right">
+          <template #default="{ row, $index }">
+            <a
+              v-if="row"
+              class="link-text"
+              :class="{ disabled: row.saving }"
+              @click="!row.saving && openVirtualSalesModal(row, $index)"
+            >
+              设置
+            </a>
+          </template>
+        </el-table-column>
+      </el-table>
 
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
 
-    <Modal
+    <el-dialog
       v-model="editModalVisible"
       :title="modalMode === 'batch' ? '批量设置虚拟销量' : '设置虚拟销量'"
-      :mask-closable="false"
-      :closable="!modalSubmitting"
+      width="480px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="!modalSubmitting"
+      :show-close="!modalSubmitting"
+      destroy-on-close
     >
       <div v-if="modalMode === 'single' && currentSku" class="virtual-sales-modal">
         <div class="sku-info-item">
@@ -129,50 +169,42 @@
           <span class="sku-info-label">SKU ID：</span>
           <span>{{ currentSku.id || "-" }}</span>
         </div>
-
-        <Form :label-width="90" class="mt_10">
-          <Form-item label="虚拟销量">
-            <InputNumber
+        <el-form label-width="90px" class="mt_10">
+          <el-form-item label="虚拟销量">
+            <el-input-number
               v-model="editForm.virtualSales"
               :min="0"
               :max="99999999"
               :precision="0"
               style="width: 200px"
             />
-          </Form-item>
-        </Form>
+          </el-form-item>
+        </el-form>
       </div>
       <div v-else-if="modalMode === 'batch'" class="virtual-sales-modal">
         <div class="sku-info-item">
           <span class="sku-info-label">已选规格：</span>
           <span>{{ selectedRows.length }} 个</span>
         </div>
-
-        <Form :label-width="90" class="mt_10">
-          <Form-item label="虚拟销量">
-            <InputNumber
+        <el-form label-width="90px" class="mt_10">
+          <el-form-item label="虚拟销量">
+            <el-input-number
               v-model="editForm.virtualSales"
               :min="0"
               :max="99999999"
               :precision="0"
               style="width: 200px"
             />
-          </Form-item>
-        </Form>
+          </el-form-item>
+        </el-form>
       </div>
-      <div slot="footer">
-        <Button @click="handleCancelVirtualSales" :disabled="modalSubmitting">
-          取消
-        </Button>
-        <Button
-          type="primary"
-          :loading="modalSubmitting"
-          @click="handleSubmitVirtualSales"
-        >
+      <template #footer>
+        <el-button :disabled="modalSubmitting" @click="handleCancelVirtualSales">取消</el-button>
+        <el-button type="primary" :loading="modalSubmitting" @click="handleSubmitVirtualSales">
           提交
-        </Button>
-      </div>
-    </Modal>
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -216,84 +248,6 @@ export default {
         sn: "",
         storeName: "",
       },
-      columns: [
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "SKU ID",
-          key: "id",
-          width: 180,
-          tooltip: true,
-        },
-        {
-          title: "商品ID",
-          key: "goodsId",
-          width: 180,
-          tooltip: true,
-        },
-        {
-          title: "商品信息",
-          key: "goodsName",
-          minWidth: 360,
-          slot: "goodsSlot",
-        },
-        {
-          title: "真实销量",
-          key: "buyCount",
-          width: 110,
-          render: (h, params) => h("span", params.row.buyCount || 0),
-        },
-        {
-          title: "虚拟销量",
-          key: "virtualSalesInput",
-          width: 110,
-          render: (h, params) => h("span", params.row.virtualSalesInput || 0),
-        },
-        {
-          title: "总销量",
-          key: "totalSalesDisplay",
-          width: 110,
-          render: (h, params) => h("span", this.getTotalSales(params.row)),
-        },
-        {
-          title: "状态",
-          key: "marketEnable",
-          width: 100,
-          render: (h, params) => {
-            const isUpper = params.row.marketEnable === "UPPER";
-            return h(
-              "Tag",
-              { props: { color: isUpper ? "green" : "volcano" } },
-              isUpper ? "上架" : "下架"
-            );
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 100,
-          align: "center",
-          render: (h, params) => {
-            return h(
-              "Button",
-              {
-                props: {
-                  type: "primary",
-                  size: "small",
-                  loading: !!params.row.saving,
-                },
-                on: {
-                  click: () => this.openVirtualSalesModal(params.row, params.index),
-                },
-              },
-              "设置"
-            );
-          },
-        },
-      ],
       data: [],
       total: 0,
     };
@@ -328,12 +282,13 @@ export default {
       };
       this.getDataList();
     },
-    changeSort(e) {
-      this.searchForm.sort = e.key;
-      this.searchForm.order = e.order;
-      if (e.order === "normal") {
+    changeSort({ prop, order }) {
+      if (!order) {
         this.searchForm.sort = "create_time";
         this.searchForm.order = "desc";
+      } else {
+        this.searchForm.sort = prop;
+        this.searchForm.order = order === "ascending" ? "asc" : "desc";
       }
       this.getDataList();
     },
@@ -394,9 +349,7 @@ export default {
       this.editModalVisible = true;
     },
     handleCancelVirtualSales() {
-      if (this.modalSubmitting) {
-        return;
-      }
+      if (this.modalSubmitting) return;
       this.resetVirtualSalesModal();
     },
     resetVirtualSalesModal() {
@@ -416,18 +369,21 @@ export default {
         this.handleBatchSubmitVirtualSales(virtualSales);
         return;
       }
-      if (!this.currentSku || this.currentIndex < 0) {
-        return;
-      }
+      if (!this.currentSku || this.currentIndex < 0) return;
+
       const currentIndex = this.currentIndex;
       const currentSkuId = this.currentSku.id;
       this.modalSubmitting = true;
-      this.$set(this.data[currentIndex], "saving", true);
+      if (this.data[currentIndex]) {
+        this.data[currentIndex].saving = true;
+      }
       updateGoodsSkuVirtualSales(currentSkuId, { virtualSales })
         .then((res) => {
           if (res && res.success) {
-            this.$set(this.data[currentIndex], "virtualSales", virtualSales);
-            this.$set(this.data[currentIndex], "virtualSalesInput", virtualSales);
+            if (this.data[currentIndex]) {
+              this.data[currentIndex].virtualSales = virtualSales;
+              this.data[currentIndex].virtualSalesInput = virtualSales;
+            }
             this.$Message.success("虚拟销量设置成功");
             this.resetVirtualSalesModal();
           } else {
@@ -439,7 +395,7 @@ export default {
         })
         .finally(() => {
           if (this.data[currentIndex]) {
-            this.$set(this.data[currentIndex], "saving", false);
+            this.data[currentIndex].saving = false;
           }
           this.modalSubmitting = false;
         });
@@ -455,9 +411,7 @@ export default {
         .then((res) => {
           if (res && res.success) {
             this.data = this.data.map((item) => {
-              if (!skuIds.includes(item.id)) {
-                return item;
-              }
+              if (!skuIds.includes(item.id)) return item;
               return {
                 ...item,
                 virtualSales,
@@ -465,9 +419,7 @@ export default {
               };
             });
             this.selectedRows = [];
-            if (this.$refs.table) {
-              this.$refs.table.selectAll(false);
-            }
+            this.$refs.table?.clearSelection();
             this.$Message.success("虚拟销量设置成功");
             this.resetVirtualSalesModal();
           } else {
@@ -517,6 +469,12 @@ export default {
   min-width: 0;
 }
 
+.div-zoom {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .batch-operations {
   margin-top: 10px;
 }
@@ -537,4 +495,8 @@ export default {
   color: #808695;
   flex-shrink: 0;
 }
+
+.mt_10 {
+  margin-top: 10px;
+}
 </style>
diff --git a/manager/src/views/home/home.scss b/manager/src/views/home/home.scss
index c4e93aef..d3968bce 100644
--- a/manager/src/views/home/home.scss
+++ b/manager/src/views/home/home.scss
@@ -10,7 +10,7 @@ h4 {
   margin: 20px 0;
   font-size: 18px;
 }
-::v-deep .ivu-icon {
+:deep(.ivu-icon){
   margin-left: 40px;
   margin-right: 40px;
 }
diff --git a/manager/src/views/home/home.vue b/manager/src/views/home/home.vue
index bbbb7c32..ca49459e 100644
--- a/manager/src/views/home/home.vue
+++ b/manager/src/views/home/home.vue
@@ -6,7 +6,7 @@
       <div class="count-list flex">
         <div class="count-item" @click="navigateTo('managerGoods')">
           <div>
-            <Icon class="icon" size="31" type="md-photos" />
+            <el-icon class="icon" :size="31"><Picture /></el-icon>
           </div>
           <div>
             <div class="counts">{{ homeData.goodsNum || 0 }}</div>
@@ -15,7 +15,7 @@
         </div>
         <div class="count-item" @click="navigateTo('memberList')">
           <div>
-            <Icon class="icon" size="31" type="md-person" />
+            <el-icon class="icon" :size="31"><User /></el-icon>
           </div>
           <div>
             <div class="counts">{{ homeData.memberNum || 0 }}</div>
@@ -24,7 +24,7 @@
         </div>
         <div class="count-item" @click="navigateTo('orderList')">
           <div>
-            <Icon class="icon" size="31" type="md-list" />
+            <el-icon class="icon" :size="31"><List /></el-icon>
           </div>
           <div>
             <div class="counts">{{ homeData.orderNum || 0 }}</div>
@@ -33,7 +33,7 @@
         </div>
         <div class="count-item" @click="navigateTo('shopList')">
           <div>
-            <Icon class="icon" size="31" type="ios-stats" />
+            <el-icon class="icon" :size="31"><DataLine /></el-icon>
           </div>
           <div>
             <div class="counts">{{ homeData.storeNum || 0 }}</div>
@@ -83,8 +83,7 @@
           <div class="flow-member">
             <div>当前在线人数</div>
             <span>
-              {{ homeData.currentNumberPeopleOnline || 0 }}
-            </span>
+              {{ homeData.currentNumberPeopleOnline || 0 }}</span>
           </div>
           <div class="flow-wrapper">
             <h4>流量概括</h4>
@@ -129,7 +128,7 @@
             <div class="today-item">
               <div>今日交易额</div>
               <span v-if="homeData.todayOrderPrice"
-                >￥{{ homeData.todayOrderPrice | unitPrice }}</span
+                >{{ $filters.unitPrice(homeData.todayOrderPrice, '￥') }}</span
               >
               <span v-else>￥0.00</span>
             </div>
@@ -176,97 +175,47 @@
     <!-- top10商品 -->
     <div class="card transform">
       <h4>热卖商品TOP10</h4>
-      <Table
-        stripe
-        :columns="tophotGoodsColumns"
-        :data="topHotGoodsData"
-      ></Table>
+      <el-table stripe :data="topHotGoodsData" style="width: 100%">
+        <el-table-column type="index" label="排名" width="100" align="center" />
+        <el-table-column prop="goodsName" label="商品名称" />
+        <el-table-column prop="price" label="价格">
+          <template #default="{ row }">
+            <span :style="{ color: $mainColor }">{{ $filters.unitPrice(row.price, '￥') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="num" label="销量" width="100" sortable />
+      </el-table>
     </div>
 
     <!-- top10店铺 -->
     <div class="card transform">
       <h4>热卖店铺TOP10</h4>
-      <Table
-        stripe
-        :columns="tophotShopsColumns"
-        :data="topHotShopsData"
-      ></Table>
+      <el-table stripe :data="topHotShopsData" style="width: 100%">
+        <el-table-column type="index" label="排名" width="100" align="center" />
+        <el-table-column prop="storeName" label="店铺名称" />
+        <el-table-column prop="price" label="价格">
+          <template #default="{ row }">
+            <span :style="{ color: $mainColor }">{{ $filters.unitPrice(row.price, '￥') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="num" label="销量" width="100" sortable />
+      </el-table>
     </div>
   </div>
 </template>
 
 <script>
+import { Picture, User, List, DataLine } from "@element-plus/icons-vue";
 import { homeStatistics, hotGoods, hotShops, getNoticePage } from "@/api/index";
 import * as API_Goods from "@/api/goods";
 import { Chart } from "@antv/g2";
 import * as API_Member from "@/api/member";
-
 export default {
   name: "home",
+  components: { Picture, User, List, DataLine },
 
   data() {
     return {
-      // 测试数据
-      test: {
-        a: "test",
-        languages: [],
-      },
-      // 测试数据结束
-      tophotShopsColumns: [
-        // 表格表头
-        {
-          type: "index",
-          width: 100,
-          title: "排名",
-          align: "center",
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-        },
-
-        {
-          title: "价格",
-          key: "price",
-
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "销量",
-          key: "num",
-          width: 100,
-          sortable: true,
-        },
-      ],
-
-      tophotGoodsColumns: [
-        {
-          type: "index",
-          width: 100,
-          title: "排名",
-          align: "center",
-        },
-        {
-          title: "商品名称",
-          key: "goodsName",
-        },
-
-        {
-          title: "价格",
-          key: "price",
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "销量",
-          key: "num",
-          width: 100,
-          sortable: true,
-        },
-      ],
       topHotGoodsData: [], //热卖商品集合
       topHotShopsData: [], //热卖店铺集合
       awaitTodoData: "", //今日待办集合
diff --git a/manager/src/views/login.vue b/manager/src/views/login.vue
index c1b78198..09ec7ca7 100644
--- a/manager/src/views/login.vue
+++ b/manager/src/views/login.vue
@@ -1,135 +1,126 @@
 <template>
   <div class="login" @click="$refs.verify.show = false">
-    <Row @keydown.enter.native="submitLogin" class="flex">
-      <Col style="width: 368px">
+    <el-row class="flex" @keyup.enter="submitLogin">
+      <el-col style="width: 368px">
         <Header />
-        <Row style="flex-direction: column">
-          <Form
+        <el-row style="flex-direction: column">
+          <el-form
             ref="usernameLoginForm"
             :model="form"
             :rules="rules"
             class="form"
           >
-            <FormItem prop="username">
-              <Input
+            <el-form-item prop="username">
+              <el-input
                 v-model="form.username"
-                prefix="ios-contact"
                 size="large"
                 clearable
                 placeholder="请输入用户名"
                 autocomplete="off"
-              />
-            </FormItem>
-            <FormItem prop="password">
-              <Input
-                type="password"
+              >
+                <template #prefix>
+                  <el-icon><User /></el-icon>
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input
                 v-model="form.password"
-                prefix="ios-lock"
+                type="password"
                 size="large"
-                password
+                show-password
                 placeholder="请输入密码"
                 autocomplete="off"
-              />
-            </FormItem>
-          </Form>
+              >
+                <template #prefix>
+                  <el-icon><Lock /></el-icon>
+                </template>
+              </el-input>
+            </el-form-item>
+          </el-form>
 
-          <Row>
-            <Button
+          <el-row>
+            <el-button
               class="login-btn"
               type="primary"
               size="large"
               :loading="loading"
+              style="width: 100%"
               @click="submitLogin"
-              long
             >
               <span v-if="!loading">{{ $t("login") }}</span>
               <span v-else>{{ $t("logining") }}</span>
-            </Button>
-          </Row>
-        </Row>
-        <!-- 拼图验证码 -->
+            </el-button>
+          </el-row>
+        </el-row>
         <verify
           ref="verify"
           class="verify-con"
           verifyType="LOGIN"
           @change="verifyChange"
-        ></verify>
+        />
         <Footer />
-      </Col>
-      <!-- <LangSwitch /> -->
-    </Row>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import { User, Lock } from "@element-plus/icons-vue";
 import { login, userInfo } from "@/api/index";
 import Cookies from "js-cookie";
 import Header from "@/views/main-parts/header";
 import Footer from "@/views/main-parts/footer";
-import LangSwitch from "@/views/main-parts/lang-switch";
 import util from "@/libs/util.js";
 import verify from "@/components/verify";
 
 export default {
   components: {
-    LangSwitch,
     Header,
     Footer,
     verify,
+    User,
+    Lock,
   },
   data() {
     return {
-      loading: false, // 加载状态
+      loading: false,
       form: {
-        // 表单数据
         username: "",
         password: "",
         mobile: "",
         code: "",
       },
       rules: {
-        // 验证规则
         username: [
-          {
-            required: true,
-            message: "账号不能为空",
-            trigger: "blur",
-          },
+          { required: true, message: "账号不能为空", trigger: "blur" },
         ],
         password: [
-          {
-            required: true,
-            message: "密码不能为空",
-            trigger: "blur",
-          },
+          { required: true, message: "密码不能为空", trigger: "blur" },
         ],
       },
     };
   },
   methods: {
     afterLogin(res) {
-      // 登录成功后处理
-      let accessToken = res.result.accessToken;
-      let refreshToken = res.result.refreshToken;
+      const accessToken = res.result.accessToken;
+      const refreshToken = res.result.refreshToken;
       this.setStore("accessToken", accessToken);
       this.setStore("refreshToken", refreshToken);
-      // 获取用户信息
       userInfo().then((res) => {
         if (res.success) {
-          // 加载菜单
           Cookies.set("userInfoManager", JSON.stringify(res.result));
           this.$store.commit("setAvatarPath", res.result.avatar);
           util.initRouter(this);
-          this.$router.push({
-            name: "home_index",
-          });
+          this.$store.commit("setOpenedList");
+          this.$store.commit("initCachePage");
+          this.$router.push({ name: "home_index" });
         } else {
           this.loading = false;
         }
       });
     },
     submitLogin() {
-      // 登录操作
       this.$refs.usernameLoginForm.validate((valid) => {
         if (valid) {
           this.$refs.verify.init();
@@ -137,12 +128,9 @@ export default {
       });
     },
     verifyChange(con) {
-      // 拼图验证码回显
       if (!con.status) return;
-
       this.loading = true;
-
-      let fd = new FormData();
+      const fd = new FormData();
       fd.append("username", this.form.username);
       fd.append("password", this.md5(this.form.password));
       login(fd)
@@ -185,20 +173,10 @@ export default {
   .login-btn {
     background: linear-gradient(135deg, $theme_color 0%, $warning_color 100%);
     height: 40px;
-    cursor: pointer;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
-    color: #fff;
-    width: 100%;
-    text-align: center;
-    transition: 0.35s;
+    border: none;
   }
   .login-btn:hover {
     opacity: 0.9;
-    border-radius: 10px;
   }
 }
 .flex {
diff --git a/manager/src/views/logistics/index.vue b/manager/src/views/logistics/index.vue
index f10d71d3..f3f9faf1 100644
--- a/manager/src/views/logistics/index.vue
+++ b/manager/src/views/logistics/index.vue
@@ -1,321 +1,249 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation padding-row">
-        <Button @click="add" type="primary">添加</Button>
-      </Row>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-      >
-        <!-- 页面展示 -->
-        <template slot="disableSlot" slot-scope="{row}">
-          <i-switch size="large"  :true-value="true" :false-value="false"  :value="row.switch" @on-change="changeSwitch(row)">
-            <span slot="open">开启</span>
-            <span slot="close">禁用</span>
-          </i-switch>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
-          :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
-          size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
-    <Modal
-      :title="modalTitle"
-      v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
-    >
-      <Form ref="form" :model="form" :label-width="120" :rules="formValidate">
-        <FormItem label="物流公司名称" prop="name">
-          <Input v-model="form.name" clearable style="width: 100%"/>
-        </FormItem>
-        <FormItem label="物流公司代码" prop="code">
-          <Input v-model="form.code" clearable style="width: 100%"/>
-        </FormItem>
-        <FormItem label="支持电子面单">
-          <i-switch   v-model="form.standBy" size="large">
-            <span slot="open">开</span>
-            <span slot="close">关</span>
-          </i-switch>
-        </FormItem>
-
-        <FormItem label="禁用状态" prop="disabled">
-
-          <i-switch true-value="OPEN" false-value="CLOSE" v-model="form.disabled" size="large">
-            <span slot="open">开启</span>
-            <span slot="close">禁用</span>
-          </i-switch>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-        >提交
-        </Button
-        >
+    <el-card>
+      <div class="operation padding-row" style="margin-bottom: 10px">
+        <el-button type="primary" @click="add">添加</el-button>
       </div>
-    </Modal>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%"
+      >
+        <el-table-column prop="name" label="物流公司名称" min-width="120" />
+        <el-table-column prop="code" label="物流公司编码" min-width="120" />
+        <el-table-column label="状态" width="150" align="center">
+          <template #default="{ row }">
+            <el-switch
+              v-if="row"
+              v-model="row.switch"
+              inline-prompt
+              active-text="开启"
+              inactive-text="禁用"
+              @change="changeSwitch(row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180" />
+        <el-table-column label="操作" width="150" align="center">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text"  @click="detail(row)">修改</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form ref="form" :model="form" :rules="formValidate" label-width="120px">
+        <el-form-item label="物流公司名称" prop="name">
+          <el-input v-model="form.name" clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="物流公司代码" prop="code">
+          <el-input v-model="form.code" clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="支持电子面单">
+          <el-switch
+            v-model="form.standBy"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+          />
+        </el-form-item>
+        <el-form-item label="禁用状态" prop="disabled">
+          <el-switch
+            v-model="form.disabled"
+            inline-prompt
+            active-value="OPEN"
+            inactive-value="CLOSE"
+            active-text="开启"
+            inactive-text="禁用"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
+          提交
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-  import {
-    getLogisticsPage,
-    updateLogistics,
-    addLogistics,
-    delLogistics,
-  } from "@/api/logistics";
+import {
+  getLogisticsPage,
+  updateLogistics,
+  addLogistics,
+  delLogistics,
+} from "@/api/logistics";
 
-  export default {
-    name: "logistics",
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        modalVisible: false, // 添加或编辑显示
-        modalTitle: "", // 添加或编辑标题
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          name: "",
-        },
-        form: {
-          // 添加或编辑表单对象初始化数据
-          name: "",
-          disabled:"CLOSE"
-        },
-        // 表单验证规则
-        formValidate: {
-          name: [
-            {
-              required: true,
-              message: "请输入物流公司名称",
-              trigger: "blur",
-            },
-          ],
-        },
-        submitLoading: false, // 添加或编辑提交状态
-        columns: [
+const defaultForm = () => ({
+  name: "",
+  code: "",
+  standBy: false,
+  disabled: "CLOSE",
+});
+
+export default {
+  name: "logistics",
+  data() {
+    return {
+      loading: true,
+      modalVisible: false,
+      modalTitle: "",
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        name: "",
+      },
+      form: defaultForm(),
+      formValidate: {
+        name: [
           {
-            title: "物流公司名称",
-            key: "name",
-            minWidth: 120,
-            sortable: false,
-          },
-          {
-            title: "物流公司编码",
-            key: "code",
-            minWidth: 120,
-            sortable: false,
-          },
-          {
-            title: "状态",
-            key: "disabled",
-            width: 150,
-            slot: "disableSlot",
-          },
-          {
-            title: "创建时间",
-            key: "createTime",
-            width: 180,
-            sortable: false,
-          },
-          {
-            title: "操作",
-            key: "action",
-            align: "center",
-            width: 150,
-            render: (h, params) => {
-              return h("div", [
-                h(
-                  "Button",
-                  {
-                    props: {
-                      type: "info",
-                      size: "small",
-                    },
-                    style: {
-                      marginRight: "5px",
-                    },
-                    on: {
-                      click: () => {
-                        this.detail(params.row);
-                      },
-                    },
-                  },
-                  "修改"
-                ),
-                h(
-                  "Button",
-                  {
-                    props: {
-                      type: "error",
-                      size: "small",
-                    },
-                    style: {
-                      marginRight: "5px",
-                    },
-                    on: {
-                      click: () => {
-                        this.remove(params.row);
-                      },
-                    },
-                  },
-                  "删除"
-                ),
-              ]);
-            },
+            required: true,
+            message: "请输入物流公司名称",
+            trigger: "blur",
           },
         ],
-        data: [], // 表单数据
-        total: 0, // 表单数据总数
-      };
+      },
+      submitLoading: false,
+      data: [],
+      total: 0,
+      id: "",
+    };
+  },
+  methods: {
+    init() {
+      this.getDataList();
     },
-    methods: {
-      // 初始化
-      init() {
-        this.getDataList();
-      },
-      // 分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      // 获取列表
-      getDataList() {
-        this.loading = true;
-
-        getLogisticsPage(this.searchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            const data = res.result.records;
-            data.forEach(e => {
-              e.switch = e.disabled === 'OPEN' ? true : false;
-              e.standBy = e.standBy == 'null' || !e.standBy ? false : true;
-            });
-            this.data = data;
-            console.log(data)
-            this.total = res.result.total;
-          }
-        });
-        this.total = this.data.length;
+    changePage() {
+      this.getDataList();
+    },
+    changePageSize() {
+      this.searchForm.pageNumber = 1;
+      this.getDataList();
+    },
+    getDataList() {
+      this.loading = true;
+      getLogisticsPage(this.searchForm).then((res) => {
         this.loading = false;
-      },
-      // switch 切换状态
-      changeSwitch (v) {
-        this.form.name = v.name;
-        this.form.code = v.code;
-        this.form.standBy = v.standBy;
+        if (res.success) {
+          const data = res.result.records;
+          data.forEach((e) => {
+            e.switch = e.disabled === "OPEN";
+            e.standBy = e.standBy == "null" || !e.standBy ? false : !!e.standBy;
+          });
+          this.data = data;
+          this.total = res.result.total;
+        }
+      });
+    },
+    changeSwitch(row) {
+      this.form.name = row.name;
+      this.form.code = row.code;
+      this.form.standBy = row.standBy;
+      this.form.disabled = row.disabled === "CLOSE" ? "OPEN" : "CLOSE";
+      updateLogistics(row.id, this.form).then((res) => {
+        if (res.success) {
+          this.$Message.success("操作成功");
+          this.getDataList();
+        } else {
+          row.switch = !row.switch;
+        }
+      });
+    },
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) return;
+        this.submitLoading = true;
 
-        this.form.disabled = v.disabled === 'CLOSE' ? 'OPEN' : 'CLOSE';
-        updateLogistics(v.id, this.form).then((res) => {
-          if (res.success) {
-            this.$Message.success("操作成功");
-            this.getDataList();
-          }
-        });
-      },
-      // 确认提交
-      handleSubmit() {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            this.submitLoading = true;
-
-            if (this.modalTitle == "添加") {
-              // 添加 避免编辑后传入id等数据 记得删除
-              delete this.form.id;
-
-
-              addLogistics(this.form).then((res) => {
-                this.submitLoading = false;
-                if (res.success) {
-                  this.$Message.success("操作成功");
-                  this.getDataList();
-                  this.modalVisible = false;
-                }
-              });
-            } else {
-              // 编辑
-              updateLogistics(this.id, this.form).then((res) => {
-                this.submitLoading = false;
-                if (res.success) {
-                  this.$Message.success("操作成功");
-                  this.getDataList();
-                  this.modalVisible = false;
-                }
-              });
+        if (this.modalTitle === "添加") {
+          const payload = { ...this.form };
+          delete payload.id;
+          addLogistics(payload).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getDataList();
+              this.modalVisible = false;
             }
-          }
-        });
-      },
-      // 添加信息
-      add() {
-        this.modalTitle = "添加";
-        this.form = {};
-        this.$refs.form.resetFields();
-
-        this.modalVisible = true;
-      },
-      // 编辑
-      detail(v) {
-        this.id = v.id;
-        this.modalTitle = "修改";
-        this.modalVisible = true;
-
-        this.form.name = v.name;
-        this.form.code = v.code;
-        console.log(v)
-        this.form.standBy = v.standBy;
-
-
-
-
-        this.form.disabled = v.disabled
-      },
-      // 删除物流公司
-      remove(v) {
-        this.$Modal.confirm({
-          title: "确认删除",
-          // 记得确认修改此处
-          content: "您确认要删除 " + v.name + " ?",
-          loading: true,
-          onOk: () => {
-            // 删除
-            delLogistics(v.id).then((res) => {
-              this.$Modal.remove();
-              if (res.success) {
-                this.$Message.success("操作成功");
-                this.getDataList();
-              }
-            });
-          },
-        });
-      },
+          });
+        } else {
+          updateLogistics(this.id, this.form).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getDataList();
+              this.modalVisible = false;
+            }
+          });
+        }
+      });
     },
-    mounted() {
-      this.init();
+    add() {
+      this.modalTitle = "添加";
+      this.form = defaultForm();
+      this.$nextTick(() => {
+        this.$refs.form?.resetFields();
+      });
+      this.modalVisible = true;
     },
-  };
+    detail(v) {
+      this.id = v.id;
+      this.modalTitle = "修改";
+      this.form = {
+        name: v.name,
+        code: v.code,
+        standBy: v.standBy == "null" || !v.standBy ? false : !!v.standBy,
+        disabled: v.disabled,
+      };
+      this.modalVisible = true;
+    },
+    remove(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除 " + v.name + " ?",
+        onOk: () => {
+          return delLogistics(v.id).then((res) => {
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
diff --git a/manager/src/views/main-parts/footer.vue b/manager/src/views/main-parts/footer.vue
index 97045a5a..89192a40 100644
--- a/manager/src/views/main-parts/footer.vue
+++ b/manager/src/views/main-parts/footer.vue
@@ -1,31 +1,24 @@
 <template>
   <div class="foot">
-    <Row type="flex" justify="space-around" class="help">
+    <el-row justify="space-around" class="help">
       <a class="item" :href="config.website" target="_blank">帮助</a>
       <a class="item" :href="config.website" target="_blank">隐私</a>
       <a class="item" :href="config.website" target="_blank">条款</a>
-    </Row>
-    <Row type="flex" justify="center" class="copyright">
+    </el-row>
+    <el-row justify="center" class="copyright">
       Copyright © {{ year }} - Present
-      <a
-        :href="config.website"
-        class="href"
-        target="_blank"
-        style="margin: 0 5px"
-        >{{ config.title }}</a
-      >
-    </Row>
+      <a :href="config.website" class="href" target="_blank" style="margin: 0 5px">{{ config.title }}</a>
+    </el-row>
   </div>
 </template>
 
 <script>
 const config = require("@/config/index");
 export default {
-  // name: "footer",
   data() {
     return {
       config,
-      year: new Date().getFullYear(), // 年
+      year: new Date().getFullYear(),
     };
   },
 };
diff --git a/manager/src/views/main-parts/header.vue b/manager/src/views/main-parts/header.vue
index afed3dde..17014820 100644
--- a/manager/src/views/main-parts/header.vue
+++ b/manager/src/views/main-parts/header.vue
@@ -1,13 +1,14 @@
 <template>
   <div>
-    <Row class="header">
+    <el-row class="header">
       <img :src="domainLogo" class="logo" width="220px" />
-    </Row>
+    </el-row>
   </div>
 </template>
 
 <script>
 import { getBaseSite } from "@/api/common.js";
+
 export default {
   data() {
     return {
@@ -22,44 +23,35 @@ export default {
         !localStorage.getItem("icontitle_expiration_time")
       ) {
         this.getSite();
+      } else if (new Date() > localStorage.getItem("icontitle_expiration_time")) {
+        this.getSite();
       } else {
-        // 如果缓存过期，则获取最新的信息
-        if (new Date() > localStorage.getItem("icontitle_expiration_time")) {
-          this.getSite();
-          return;
-        } else {
-          this.domainLogo = localStorage.getItem("icon");
-          let link =
-            document.querySelector("link[rel*='icon']") ||
-            document.createElement("link");
-          link.type = "image/x-icon";
-          link.href = localStorage.getItem("icon");
-          link.rel = "shortcut icon";
-          document.getElementsByTagName("head")[0].appendChild(link);
-          window.document.title = localStorage.getItem("title") + " - 运营后台";
-        }
+        this.domainLogo = localStorage.getItem("icon");
+        this.applyFavicon(localStorage.getItem("icon"));
+        window.document.title = localStorage.getItem("title") + " - 运营后台";
       }
     },
+    applyFavicon(href) {
+      let link =
+        document.querySelector("link[rel*='icon']") ||
+        document.createElement("link");
+      link.type = "image/x-icon";
+      link.href = href;
+      link.rel = "shortcut icon";
+      document.getElementsByTagName("head")[0].appendChild(link);
+    },
     getSite() {
-      //获取domainLogo
       getBaseSite().then((res) => {
-        const { domainLogo, domainIcon, siteName } = JSON.parse(res.result.settingValue);
+        const { domainLogo, domainIcon, siteName } = JSON.parse(
+          res.result.settingValue
+        );
         this.domainLogo = domainLogo;
-        // 过期时间
-        var expirationTime = new Date().setHours(new Date().getHours() + 1);
-        // 存放过期时间
+        const expirationTime = new Date().setHours(new Date().getHours() + 1);
         localStorage.setItem("icontitle_expiration_time", expirationTime);
-        // 存放信息
         localStorage.setItem("icon", domainLogo);
         localStorage.setItem("domainIcon", domainIcon);
         localStorage.setItem("title", siteName);
-        let link =
-          document.querySelector("link[rel*='icon']") ||
-          document.createElement("link");
-        link.type = "image/x-icon";
-        link.href = domainLogo;
-        link.rel = "shortcut icon";
-        document.getElementsByTagName("head")[0].appendChild(link);
+        this.applyFavicon(domainIcon || domainLogo);
         window.document.title = siteName + " - 运营后台";
       });
     },
diff --git a/manager/src/views/main-parts/lang-switch.vue b/manager/src/views/main-parts/lang-switch.vue
index edbe5cfa..a5ddf651 100644
--- a/manager/src/views/main-parts/lang-switch.vue
+++ b/manager/src/views/main-parts/lang-switch.vue
@@ -1,24 +1,29 @@
 <template>
   <div class="lang-icon">
-    <Dropdown @on-click="langChange">
-      <Icon type="md-globe" size="26"/>
-      <DropdownMenu slot="list">
-        <DropdownItem name="zh-CN">简体中文</DropdownItem>
-        <DropdownItem name="en-US">English</DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
+    <el-dropdown @command="langChange">
+      <el-icon :size="26"><Platform /></el-icon>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item command="zh-CN">简体中文</el-dropdown-item>
+          <el-dropdown-item command="en-US">English</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
   </div>
 </template>
 
 <script>
+import { Platform } from "@element-plus/icons-vue";
+
 export default {
   name: "langSwitch",
+  components: { Platform },
   methods: {
     langChange(v) {
       this.$i18n.locale = v;
       this.$store.commit("switchLang", v);
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/manager/src/views/main-parts/message-tip.vue b/manager/src/views/main-parts/message-tip.vue
index 560564e4..f86e709d 100644
--- a/manager/src/views/main-parts/message-tip.vue
+++ b/manager/src/views/main-parts/message-tip.vue
@@ -1,81 +1,98 @@
 <template>
   <div class="message-con">
-    <Dropdown trigger="click">
-
-      <a href="javascript:void(0)">
+    <el-dropdown trigger="click" popper-class="todo-dropdown" @command="navigateTo">
+      <a href="javascript:void(0)" class="message-link">
         {{ value > 0 ? "有" + value + "条待办事项" : "无待办事项" }}
-        <Icon v-if="value!=0" type="ios-arrow-down"></Icon>
+        <el-icon v-if="value != 0"><ArrowDown /></el-icon>
       </a>
-      <DropdownMenu v-if="value!=0" slot="list">
-        <DropdownItem v-if="res.balanceCash" @click.native="navigateTo('deposit')">
-          <Badge :count="res.balanceCash">待处理预存款提现申请 </Badge>
-        </DropdownItem>
-        <DropdownItem v-if="res.complain" @click.native="navigateTo('orderComplaint')">
-          <Badge :count="res.complain">待处理投诉审核 </Badge>
-        </DropdownItem>
-        <DropdownItem v-if="res.distributionCash" @click.native="navigateTo('distributionCash')">
-          <Badge :count="res.distributionCash">待处理分销商提现申请 </Badge>
-        </DropdownItem>
-        <DropdownItem v-if="res.goods" @click.native="navigateTo('applyGoods')">
-          <Badge :count="res.goods">待处理商品审核 </Badge>
-        </DropdownItem>
-        <DropdownItem v-if="res.refund" @click.native="navigateTo('afterSaleOrder')">
-          <Badge :count="res.refund">待处理售后申请 </Badge>
-        </DropdownItem>
-        <DropdownItem v-if="res.store" @click.native="navigateTo('shopAuth')">
-          <Badge :count="res.store">待处理店铺入驻审核 </Badge>
-        </DropdownItem>
-        <DropdownItem v-if="res.waitPayBill" @click.native="navigateTo('accountStatementBill')">
-          <Badge :count="res.waitPayBill">待与商家对账</Badge>
-        </DropdownItem>
-        <div></div>
-      </DropdownMenu>
-    </Dropdown>
+      <template #dropdown>
+        <el-dropdown-menu v-if="value != 0">
+          <el-dropdown-item v-if="res.balanceCash" command="deposit">
+            <el-badge :value="res.balanceCash">待处理预存款提现申请</el-badge>
+          </el-dropdown-item>
+          <el-dropdown-item v-if="res.complain" command="orderComplaint">
+            <el-badge :value="res.complain">待处理投诉审核</el-badge>
+          </el-dropdown-item>
+          <el-dropdown-item v-if="res.distributionCash" command="distributionCash">
+            <el-badge :value="res.distributionCash">待处理分销商提现申请</el-badge>
+          </el-dropdown-item>
+          <el-dropdown-item v-if="res.goods" command="applyGoods">
+            <el-badge :value="res.goods">待处理商品审核</el-badge>
+          </el-dropdown-item>
+          <el-dropdown-item v-if="res.refund" command="afterSaleOrder">
+            <el-badge :value="res.refund">待处理售后申请</el-badge>
+          </el-dropdown-item>
+          <el-dropdown-item v-if="res.store" command="shopAuth">
+            <el-badge :value="res.store">待处理店铺入驻审核</el-badge>
+          </el-dropdown-item>
+          <el-dropdown-item v-if="res.waitPayBill" command="accountStatementBill">
+            <el-badge :value="res.waitPayBill">待与商家对账</el-badge>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
   </div>
 </template>
 
 <script>
+import { ArrowDown } from "@element-plus/icons-vue";
+
 export default {
   name: "messageTip",
-  data() {
-    return {
-      value: 0, // 消息数量
-      empty: false, // 是否为空
-    };
-  },
+  components: { ArrowDown },
   props: {
     res: {
-      type: null,
+      type: Object,
+      default: () => ({}),
     },
   },
-  mounted() {
-    this.init();
+  computed: {
+    value() {
+      let count = 0;
+      const r = this.res || {};
+      Object.keys(r).forEach((k) => {
+        if (r[k]) count += r[k];
+      });
+      return count;
+    },
   },
   methods: {
     navigateTo(name) {
-      this.$router.push({
-        name,
-      });
-    },
-    init() {
-      Object.keys(this.res).forEach((item) => {
-        this.value = parseInt(this.value) + parseInt(this.res[item]);
-      });
+      this.$router.push({ name });
     },
   },
 };
 </script>
-<style scoped lang="scss">
-::v-deep .ivu-select-dropdown {
-  text-align: left;
-}
-.message-con {
-  margin-right: 10px;
-}
-::v-deep .ivu-dropdown-item{
-  padding: 7px 20px  !important;
-}
-::v-deep .ivu-badge-count{
-  right: -10px !important;
+
+<style scoped>
+.message-link {
+  color: inherit;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 </style>
+
+<style>
+.todo-dropdown .el-dropdown-menu__item {
+  min-width: 150px;
+  padding: 6px 36px 6px 16px;
+  line-height: 1.6;
+}
+
+.todo-dropdown .el-dropdown-menu__item + .el-dropdown-menu__item {
+  margin-top: 4px;
+}
+
+.todo-dropdown .el-badge {
+  width: 100%;
+}
+
+.todo-dropdown .el-badge__content.is-fixed {
+  right: 4px;
+  top: 8px;
+  transform: translateY(-50%) translateX(50%);
+}
+</style>
+
diff --git a/manager/src/views/main-parts/page-breadcrumb.vue b/manager/src/views/main-parts/page-breadcrumb.vue
new file mode 100644
index 00000000..99b1af8b
--- /dev/null
+++ b/manager/src/views/main-parts/page-breadcrumb.vue
@@ -0,0 +1,201 @@
+<template>
+  <el-breadcrumb separator=">" class="page-breadcrumb">
+    <el-breadcrumb-item
+      v-for="(item, idx) in items"
+      :key="idx"
+    >
+      <a
+        v-if="idx < items.length - 1 && item.target"
+        class="bc-link"
+        @click.prevent="go(item.target)"
+      >
+        {{ item.title }}
+      </a>
+      <span v-else :class="{ 'is-current': idx === items.length - 1 }">
+        {{ item.title }}
+      </span>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script>
+import { otherRouter } from "@/router/router";
+
+const stripLayout = (name) => (name || "").replace(/__layout$/, "");
+
+// 详情/二级页面归属的「列表/父页面」name 映射
+const PARENT_MAP = {
+  "member-detail": "memberList",
+  "order-detail": "orderList",
+  "after-order-detail": "afterSale",
+  "order-complaint-detail": "orderComplaint",
+  "shop-detail": "shopList",
+  "shop-operation": "shopList",
+  "bill-detail": "bill",
+  "goods-detail": "manager-goods",
+  "goods-parameter-edit": "goods-parameter",
+  "add-points-goods": "manager-points-goods",
+  "edit-points-goods": "manager-points-goods",
+  "coupon-receive": "manager-coupon",
+  "add-platform-coupon": "manager-coupon",
+  "edit-platform-coupon": "manager-coupon",
+  "add-coupon-activity": "manager-coupon-activity",
+  "edit-coupon-activity": "manager-coupon-activity",
+  "coupon-activity-info": "manager-coupon-activity",
+  "pintuan-goods": "manager-pintuan",
+  "full-discount-detail": "manager-full-discount",
+  "manager-seckill-add": "manager-seckill",
+  "add-kanJia-activity-goods": "manager-kanjia",
+  "edit-kanJia-activity-goods": "manager-kanjia",
+  "add-gift-card-cash-activity": "manager-gift-card-cash",
+  "edit-gift-card-cash-activity": "manager-gift-card-cash",
+  "gift-card-cash-records": "manager-gift-card-cash",
+  "gift-card-cash-batch-credentials": "manager-gift-card-cash",
+};
+
+const findFirstLeaf = (group) => {
+  if (!group || !Array.isArray(group.children) || !group.children.length) {
+    return null;
+  }
+  const first = group.children.find((c) => c && c.name) || group.children[0];
+  return stripLayout(first?.name) || null;
+};
+
+export default {
+  name: "pageBreadcrumb",
+  computed: {
+    items() {
+      const route = this.$route;
+      if (!route || !route.name || route.name === "home_index") {
+        return [{ title: "首页" }];
+      }
+      return this.buildChain(stripLayout(route.name));
+    },
+  },
+  methods: {
+    go(target) {
+      if (!target || !target.name) return;
+      if (this.$route.name === target.name) return;
+      this.$router.push(target);
+    },
+    findInMenu(name) {
+      const menuList = this.$store.state.app.menuList || [];
+      for (const grp of menuList) {
+        for (const child of grp.children || []) {
+          if (stripLayout(child.name) === name) {
+            return { group: grp, child };
+          }
+        }
+      }
+      return null;
+    },
+    routerEntry(name) {
+      if (Array.isArray(otherRouter.children)) {
+        return otherRouter.children.find((c) => c.name === name);
+      }
+      return null;
+    },
+    topItem() {
+      const navList = this.$store.state.app.navList || [];
+      const menuList = this.$store.state.app.menuList || [];
+      const currNavTitle = this.$store.state.app.currNavTitle;
+      const firstName =
+        this.$route.meta && this.$route.meta.firstRouterName;
+
+      let topTitle = currNavTitle;
+      if (firstName) {
+        const top = navList.find((n) => n.name === firstName);
+        if (top) topTitle = top.title;
+      }
+      if (!topTitle) return null;
+
+      let target = null;
+      if (menuList && menuList.length) {
+        const leafName = findFirstLeaf(menuList[0]);
+        if (leafName) target = { name: leafName };
+      }
+      return { title: topTitle, target };
+    },
+    buildChain(name, depth = 0) {
+      if (depth > 6) return [];
+
+      const inMenu = this.findInMenu(name);
+      if (inMenu) {
+        const list = [];
+        const top = this.topItem();
+        if (top) list.push(top);
+        const groupLeaf = findFirstLeaf(inMenu.group);
+        list.push({
+          title: inMenu.group.title,
+          target: groupLeaf ? { name: groupLeaf } : null,
+        });
+        list.push({ title: inMenu.child.title });
+        return list;
+      }
+
+      const parentName = PARENT_MAP[name];
+      const entry = this.routerEntry(name);
+      const selfTitle = entry?.title
+        ? entry.title
+        : (this.$route.meta && this.$route.meta.title
+            ? String(this.$route.meta.title).replace(/\s*-\s*.+$/, "")
+            : "");
+
+      if (parentName) {
+        const parentChain = this.buildChain(parentName, depth + 1).map(
+          (it, idx, arr) =>
+            idx === arr.length - 1
+              ? { title: it.title, target: { name: parentName } }
+              : it
+        );
+        if (selfTitle) parentChain.push({ title: selfTitle });
+        return parentChain;
+      }
+
+      const list = [];
+      const top = this.topItem();
+      if (top) list.push(top);
+      if (selfTitle) list.push({ title: selfTitle });
+      return list;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page-breadcrumb {
+  padding: 0 !important;
+  margin: 0 !important;
+  line-height: 44px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+
+  :deep(.el-breadcrumb__item) {
+    .el-breadcrumb__inner {
+      color: #606266;
+      font-weight: 400;
+    }
+
+    &:first-child {
+      margin-left: 0 !important;
+      padding-left: 0 !important;
+    }
+  }
+
+  .bc-link {
+    color: #606266;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+      color: $theme_color;
+    }
+  }
+
+  .is-current {
+    color: $theme_color;
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/manager/src/views/main-parts/shrinkable-menu/shrinkable-menu.vue b/manager/src/views/main-parts/shrinkable-menu/shrinkable-menu.vue
index de05b2a1..874e383e 100644
--- a/manager/src/views/main-parts/shrinkable-menu/shrinkable-menu.vue
+++ b/manager/src/views/main-parts/shrinkable-menu/shrinkable-menu.vue
@@ -1,27 +1,32 @@
 <template>
-  <div class="ivu-shrinkable-menu">
-    <!-- 一级菜单 -->
-    <Menu ref="sideMenu" width="80px" theme="dark"  :active-name="currNav" @on-select="selectNav">
-      <MenuItem v-for="(item, i) in navList" :key="i" :name="item.name">
-        {{item.title}}
-      </MenuItem>
-    </Menu>
-    <!-- 二级菜单 -->
-    <Menu
-      ref="childrenMenu"
-      :active-name="$route.name"
-      width="120px"
-      @on-select="changeMenu"
+  <div class="shrinkable-menu">
+    <el-menu
+      class="nav-menu-dark"
+      :default-active="currNav"
+      @select="selectNav"
     >
-      <template v-for="item in menuList">
-        <MenuGroup :title="item.title" :key="item.id" style="padding-left:0;">
-          <MenuItem :name="menu.name" v-for="menu in item.children" :key="menu.name">
-            {{menu.title}}
-          </MenuItem>
-        </MenuGroup>
-
+      <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
+        {{ item.title }}
+      </el-menu-item>
+    </el-menu>
+    <el-menu
+      :key="currNav"
+      class="sub-menu"
+      :default-active="$route.name"
+      @select="changeMenu"
+    >
+      <template v-for="item in menuList" :key="item.id">
+        <el-menu-item-group :title="item.title">
+          <el-menu-item
+            v-for="menu in item.children"
+            :key="menu.name"
+            :index="menu.name"
+          >
+            {{ menu.title }}
+          </el-menu-item>
+        </el-menu-item-group>
       </template>
-    </Menu>
+    </el-menu>
   </div>
 </template>
 
@@ -39,60 +44,80 @@ export default {
     },
     currNav() {
       return this.$store.state.app.currNav;
-    }
+    },
   },
   watch: {
-    // 监听路由变化
-    $route: {
-      handler: function (val, oldVal) {
-        if (val.meta.firstRouterName && val.meta.firstRouterName !== this.currNav) {
-          this.selectNav(val.meta.firstRouterName)
-        }
+    $route(val) {
+      if (
+        val.meta.firstRouterName &&
+        val.meta.firstRouterName !== this.currNav
+      ) {
+        this.selectNav(val.meta.firstRouterName);
       }
-    }
+    },
   },
   methods: {
-    changeMenu(name) { //二级路由点击
-      this.$router.push({
-        name: name
+    changeMenu(name) {
+      if (!name) return;
+      if (this.$router.hasRoute(name)) {
+        this.$router.push({ name });
+        return;
+      }
+      util.initRouter(this);
+      this.$nextTick(() => {
+        if (this.$router.hasRoute(name)) {
+          this.$router.push({ name });
+        } else {
+          this.$Message.warning("菜单路由未就绪，请刷新页面后重试");
+        }
       });
     },
-    selectNav(name) { // 一级路由点击事件
+    selectNav(name) {
       this.$store.commit("setCurrNav", name);
       this.setStore("currNav", name);
       util.initRouter(this);
-      this.$nextTick(()=>{
-        this.$refs.childrenMenu.updateActiveName()
-      })
     },
-  }
+  },
 };
 </script>
+
 <style lang="scss" scoped>
-.ivu-shrinkable-menu{
-    height: calc(100% - 60px);
-    width: 200px;
-    display: flex;
+.shrinkable-menu {
+  height: 100%;
+  width: 200px;
+  display: flex;
 }
 
-.ivu-btn-text:hover {
-    background-color: rgba(255,255,255,.2) !important;
+.nav-menu-dark {
+  width: 80px;
+  background-color: #191a23;
+  border-right: none;
+
+  :deep(.el-menu-item) {
+    color: rgba(255, 255, 255, 0.7);
+    justify-content: center;
+    padding: 0 8px !important;
+    text-align: center;
+    line-height: 1.3;
+    height: auto;
+    min-height: 56px;
+    white-space: normal;
+  }
+
+  :deep(.el-menu-item.is-active) {
+    background-color: #fff !important;
+    color: $theme_color !important;
+  }
 }
-.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu){
-    background-color: #fff;
-    &:hover{
-        background-color: #fff;
-    }
-}
-.ivu-menu-vertical{
+
+.sub-menu {
+  width: 120px;
   overflow-y: auto;
-}
-.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu){
-    color: $theme_color;
-}
-::v-deep.ivu-menu-vertical .ivu-menu-item-group-title {
-    height: 40px;
+  border-right: none;
+
+  :deep(.el-menu-item-group__title) {
+    padding-left: 16px;
     line-height: 40px;
-    padding-left: 20px;
+  }
 }
 </style>
diff --git a/manager/src/views/main-parts/tags-page-opened.vue b/manager/src/views/main-parts/tags-page-opened.vue
index a7edb4fe..962b3ecd 100644
--- a/manager/src/views/main-parts/tags-page-opened.vue
+++ b/manager/src/views/main-parts/tags-page-opened.vue
@@ -1,31 +1,42 @@
-
-
 <template>
-
   <div
     ref="scrollCon"
     @DOMMouseScroll="handlescroll"
     @mousewheel="handlescroll"
     class="tags-outer-scroll-con"
   >
-    <ul v-show="visible" :style="{left: contextMenuLeft + 'px', top: contextMenuTop + 'px'}" class="contextmenu">
-      <li v-for="(item, key) of actionList" @click="handleTagsOption(key)" :key="key">{{item}}</li>
+    <ul
+      v-show="visible"
+      :style="{ left: contextMenuLeft + 'px', top: contextMenuTop + 'px' }"
+      class="contextmenu"
+    >
+      <li
+        v-for="(item, key) of actionList"
+        :key="key"
+        @click="handleTagsOption(key)"
+      >
+        {{ item }}
+      </li>
     </ul>
-    <div ref="scrollBody" class="tags-inner-scroll-body" :style="{left: tagBodyLeft + 'px'}">
-      <transition-group name="taglist-moving-animation">
-        <Tag
-          type="dot"
-          v-for="item in pageTagsList"
-          ref="tagsPageOpened"
-          :key="item.name"
-          :name="item.name"
-          @on-close="closePage"
-          @click.native="linkTo(item)"
-          :closable="item.name=='home_index'?false:true"
-          :color="item.children?(item.children[0].name==currentPageName?'primary':'default'):(item.name==currentPageName?'primary':'default')"
-           @contextmenu.prevent.native="contextMenu(item, $event)"
-        >{{ itemTitle(item) }}</Tag>
-      </transition-group>
+    <div
+      ref="scrollBody"
+      class="tags-inner-scroll-body"
+      :style="{ left: tagBodyLeft + 'px' }"
+    >
+      <el-tag
+        v-for="item in pageTagsList"
+        :key="item.name"
+        :closable="item.name !== 'home_index'"
+        :type="tagType(item)"
+        :effect="isActive(item) ? 'dark' : 'plain'"
+        class="page-tag"
+        size="large"
+        @close="closePage($event, item.name)"
+        @click="linkTo(item)"
+        @contextmenu.prevent="contextMenu(item, $event)"
+      >
+        {{ itemTitle(item) }}
+      </el-tag>
     </div>
   </div>
 </template>
@@ -33,197 +44,137 @@
 <script>
 export default {
   name: "tagsPageOpened",
-  data() {
-    return {
-      currentPageName: this.$route.name, // 当前路由名称
-      tagBodyLeft: 0, // 标签左偏移量
-      visible: false, // 显示操作按钮
-      contextMenuLeft: 0, // 内容左偏移量
-      contextMenuTop: 0, // 内容上偏移量
-      actionList: {
-        others: '关闭其他',
-        clearAll: '关闭所有'
-      },
-      refsTag: [], // 所有已打开标签
-      tagsCount: 1 // 标签数量
-    };
-  },
   props: {
     pageTagsList: Array,
     beforePush: {
       type: Function,
-      default: item => {
-        return true;
-      }
-    }
-  },
-  computed: {
-    title() {
-      return this.$store.state.app.currentTitle;
+      default: () => true,
     },
-    tagsList() {
-      return this.$store.state.app.pageOpenedList;
-    }
+  },
+  data() {
+    return {
+      currentPageName: this.$route.name,
+      tagBodyLeft: 0,
+      visible: false,
+      contextMenuLeft: 0,
+      contextMenuTop: 0,
+      actionList: {
+        others: "关闭其他",
+        clearAll: "关闭所有",
+      },
+    };
   },
   methods: {
+    isActive(item) {
+      return item.children
+        ? item.children[0].name === this.currentPageName
+        : item.name === this.currentPageName;
+    },
+    tagType(item) {
+      return this.isActive(item) ? "primary" : "info";
+    },
     itemTitle(item) {
-      if (typeof item.title == "object") {
+      if (typeof item.title === "object") {
         return this.$t(item.title.i18n);
-      } else {
-        return item.title;
       }
+      return item.title;
     },
     closePage(event, name) {
       let pageOpenedList = this.$store.state.app.pageOpenedList;
       let lastPageObj = pageOpenedList[0];
-      if (this.currentPageName == name) {
-        let len = pageOpenedList.length;
+      if (this.currentPageName === name) {
+        const len = pageOpenedList.length;
         for (let i = 1; i < len; i++) {
-          if (pageOpenedList[i].name == name) {
-            if (i < len - 1) {
-              lastPageObj = pageOpenedList[i + 1];
-            } else {
-              lastPageObj = pageOpenedList[i - 1];
-            }
+          if (pageOpenedList[i].name === name) {
+            lastPageObj =
+              i < len - 1 ? pageOpenedList[i + 1] : pageOpenedList[i - 1];
             break;
           }
         }
-      } else {
-        let tagWidth = event.target.parentNode.offsetWidth;
+      } else if (event && event.target) {
+        const tagWidth = event.target.parentNode?.offsetWidth || 0;
         this.tagBodyLeft = Math.min(this.tagBodyLeft + tagWidth, 0);
       }
       this.$store.commit("removeTag", name);
       this.$store.commit("closePage", name);
       pageOpenedList = this.$store.state.app.pageOpenedList;
       localStorage.pageOpenedList = JSON.stringify(pageOpenedList);
-      if (this.currentPageName == name) {
+      if (this.currentPageName === name) {
         this.linkTo(lastPageObj);
       }
     },
     linkTo(item) {
-      if (this.$route.name == item.name) {
-        return;
-      }
-      let routerObj = {};
-      routerObj.name = item.name;
-      if (item.argu) {
-        routerObj.params = item.argu;
-      }
-      if (item.query) {
-        routerObj.query = item.query;
-      }
+      if (this.$route.name === item.name) return;
+      const routerObj = { name: item.name };
+      if (item.argu) routerObj.params = item.argu;
+      if (item.query) routerObj.query = item.query;
       if (this.beforePush(item)) {
         this.$router.push(routerObj);
       }
     },
     handlescroll(e) {
-      var type = e.type;
+      const type = e.type;
       let delta = 0;
-      if (type == "DOMMouseScroll" || type == "mousewheel") {
+      if (type === "DOMMouseScroll" || type === "mousewheel") {
         delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40;
       }
       let left = 0;
       if (delta > 0) {
         left = Math.min(0, this.tagBodyLeft + delta);
-      } else {
-        if ( this.$refs.scrollCon.offsetWidth - 100 < this.$refs.scrollBody.offsetWidth ) {
-          if ( this.tagBodyLeft <  -( this.$refs.scrollBody.offsetWidth - this.$refs.scrollCon.offsetWidth + 100 ) ) {
-            left = this.tagBodyLeft;
-          } else {
-            left = Math.max(
-              this.tagBodyLeft + delta,
-              this.$refs.scrollCon.offsetWidth -
-                this.$refs.scrollBody.offsetWidth -
-                100
-            );
-          }
+      } else if (
+        this.$refs.scrollCon.offsetWidth - 100 <
+        this.$refs.scrollBody.offsetWidth
+      ) {
+        if (
+          this.tagBodyLeft <
+          -(this.$refs.scrollBody.offsetWidth - this.$refs.scrollCon.offsetWidth + 100)
+        ) {
+          left = this.tagBodyLeft;
         } else {
-          this.tagBodyLeft = 0;
+          left = Math.max(
+            this.tagBodyLeft + delta,
+            this.$refs.scrollCon.offsetWidth -
+              this.$refs.scrollBody.offsetWidth -
+              100
+          );
         }
+      } else {
+        this.tagBodyLeft = 0;
       }
       this.tagBodyLeft = left;
     },
     handleTagsOption(type) {
-      if (type == "clearAll") {
+      if (type === "clearAll") {
         this.$store.commit("clearAllTags");
-        this.$router.push({
-          name: "home_index"
-        });
+        this.$router.push({ name: "home_index" });
       } else {
         this.$store.commit("clearOtherTags", this);
       }
       this.tagBodyLeft = 0;
     },
-    moveToView(tag) {
-      if (tag.offsetLeft < -this.tagBodyLeft) {
-        // 标签在可视区域左侧
-        this.tagBodyLeft = -tag.offsetLeft + 10;
-      } else if (
-        tag.offsetLeft + 10 > -this.tagBodyLeft &&
-        tag.offsetLeft + tag.offsetWidth <
-          -this.tagBodyLeft + this.$refs.scrollCon.offsetWidth - 100
-      ) {
-        // 标签在可视区域
-        this.tagBodyLeft = Math.min(
-          0,
-          this.$refs.scrollCon.offsetWidth -
-            100 -
-            tag.offsetWidth -
-            tag.offsetLeft -
-            20
-        );
-      } else {
-        // 标签在可视区域右侧
-        this.tagBodyLeft = -(
-          tag.offsetLeft -
-          (this.$refs.scrollCon.offsetWidth - 100 - tag.offsetWidth) +
-          20
-        );
-      }
+    contextMenu(item, e) {
+      this.visible = true;
+      const offsetLeft = this.$el.getBoundingClientRect().left;
+      this.contextMenuLeft = e.clientX - offsetLeft + 10;
+      this.contextMenuTop = e.clientY - 64;
     },
-    contextMenu (item, e) {
-      this.visible = true
-      const offsetLeft = this.$el.getBoundingClientRect().left
-      this.contextMenuLeft = e.clientX - offsetLeft + 10
-      this.contextMenuTop = e.clientY - 64
+    closeMenu() {
+      this.visible = false;
     },
-    closeMenu () {
-      this.visible = false
-    }
-  },
-  mounted() {
-    this.refsTag = this.$refs.tagsPageOpened;
-    setTimeout(() => {
-      this.refsTag.forEach((item, index) => {
-        if (this.$route.name == item.name) {
-          let tag = this.refsTag[index].$el;
-          this.moveToView(tag);
-        }
-      });
-    }, 1); // 这里不设定时器就会有偏移bug
-    this.tagsCount = this.tagsList.length;
   },
   watch: {
     $route(to) {
       this.currentPageName = to.name;
-      this.$nextTick(() => {
-        this.refsTag.forEach((item, index) => {
-          if (to.name == item.name) {
-            let tag = this.refsTag[index].$el;
-            this.moveToView(tag);
-          }
-        });
-      });
-      this.tagsCount = this.tagsList.length;
+      this.tagsCount = this.pageTagsList?.length;
     },
-    visible (value) {
+    visible(value) {
       if (value) {
-        document.body.addEventListener('click', this.closeMenu)
+        document.body.addEventListener("click", this.closeMenu);
       } else {
-        document.body.removeEventListener('click', this.closeMenu)
+        document.body.removeEventListener("click", this.closeMenu);
       }
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -237,7 +188,7 @@ export default {
   z-index: 11000;
   list-style-type: none;
   border-radius: 4px;
-  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .1);
+  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.1);
   li {
     margin: 0;
     padding: 5px 15px;
@@ -247,7 +198,25 @@ export default {
     }
   }
 }
-.ivu-tag-primary, .ivu-tag-primary.ivu-tag-dot .ivu-tag-dot-inner{
-  background: $theme_color;
+.page-tag {
+  margin-right: 8px;
+  cursor: pointer;
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 4px;
+  font-size: 13px;
+  transition: all 0.2s ease;
+
+  & + .page-tag {
+    margin-left: 0;
+  }
+
+  &:hover {
+    opacity: 0.85;
+  }
+
+  .el-tag__close {
+    margin-left: 6px;
+  }
 }
 </style>
diff --git a/manager/src/views/main.scss b/manager/src/views/main.scss
index 1aa58763..c091b3df 100644
--- a/manager/src/views/main.scss
+++ b/manager/src/views/main.scss
@@ -24,14 +24,14 @@
   }
 
   .sidebar-menu-con {
-    height: 100%;
+    height: calc(100% - 60px);
     position: fixed;
-    top: 0;
+    top: 60px;
     left: 0;
     z-index: 21;
     transition: width 0.3s; // background: rgb(73, 80, 96)
     background: #fff;
-    box-shadow: rgba(0, 21, 41, 0.35) 2px 0px 6px;
+    box-shadow: rgba(0, 21, 41, 0.12) 2px 0 6px;
   }
 
   .layout-text {
@@ -52,11 +52,11 @@
     box-sizing: border-box;
     position: fixed;
     display: block;
-    padding-left: 200px;
+    padding-left: 0;
     width: 100%;
-    height: 100px;
-    z-index: 20;
-    box-shadow: 0 2px 1px 1px rgba(100, 100, 100, 0.1);
+    height: 60px;
+    z-index: 22;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
     transition: padding 0.3s;
   }
 
@@ -81,22 +81,29 @@
   }
 
   .tags-con {
-    height: 40px;
+    height: 44px;
     z-index: -1;
-    background: #f0f0f0;
+    background: #fff;
+    border-top: 1px solid #f0f0f0;
+    border-bottom: 1px solid #f0f0f0;
 
     .tags-outer-scroll-con {
       position: relative;
       box-sizing: border-box;
-      padding-right: 120px;
+      padding-right: 12px;
       width: 100%;
       height: 100%;
+      display: flex;
+      align-items: center;
 
       .tags-inner-scroll-body {
         position: absolute;
-        padding: 2px 10px;
+        padding: 0 6px;
         overflow: visible;
         white-space: nowrap;
+        display: flex;
+        align-items: center;
+        height: 100%;
         transition: left 0.3s ease;
       }
 
@@ -119,15 +126,34 @@
     min-width: 740px;
     height: 60px;
     background: #fff;
-    box-shadow: 0 2px 1px 1px rgba(100, 100, 100, 0.1);
     position: relative;
     z-index: 11;
+    display: flex;
+    align-items: center;
 
     .navicon-con {
       margin: 6px;
       display: inline-block;
     }
 
+    .header-logo-con {
+      flex-shrink: 0;
+      width: 200px;
+      height: 60px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding-left: 12px;
+
+      img {
+        display: block;
+        max-height: 44px;
+        max-width: 100%;
+        width: auto;
+        height: auto;
+      }
+    }
+
     .header-middle-con {
       position: absolute;
       left: 0px;
@@ -146,7 +172,8 @@
       display: flex;
       align-items: center;
       padding: 0 30px;
-      justify-content: space-between;
+      justify-content: flex-end;
+      margin-left: auto;
       height: 100%;
 
 
@@ -162,9 +189,9 @@
 
 
       .message-con {
-        display: inline-block;
-
-        padding: 18px 0;
+        display: inline-flex;
+        align-items: center;
+        height: 100%;
         text-align: center;
         cursor: pointer;
 
@@ -215,15 +242,29 @@
     }
   }
 
+  .breadcrumb-bar {
+    position: fixed;
+    top: 60px;
+    left: 212px;
+    right: 0;
+    height: 44px;
+    background: #fff;
+    border-bottom: 1px solid #f0f0f0;
+    z-index: 19;
+    display: flex;
+    align-items: center;
+    padding: 0;
+  }
+
   .single-page-con {
     min-width: 740px;
     position: relative;
-    left: 220px;
+    left: 200px;
     top: 100px;
     right: 0;
     bottom: 0;
     height: calc(100% - 110px);
-    width: calc(100% - 220px);
+    width: calc(100% - 200px);
     overflow: auto;
     background-color: #f0f0f0;
     z-index: 1;
@@ -231,7 +272,7 @@
 
     .single-page {
       position: relative;
-      margin: 10px;
+      margin: 10px 12px;
     }
   }
 
@@ -247,15 +288,7 @@
 }
 
 .logo-con {
-  width: 100%;
-  height: 60px;
-  padding: 8px;
-  text-align: center;
-  border-bottom: 1px solid #eee;
-  img {
-    height: 44px;
-    width: auto;
-  }
+  display: none;
 }
 
 .menu-bar {
diff --git a/manager/src/views/member/advance/recharge.vue b/manager/src/views/member/advance/recharge.vue
index 4ac09553..028659f8 100644
--- a/manager/src/views/member/advance/recharge.vue
+++ b/manager/src/views/member/advance/recharge.vue
@@ -1,208 +1,163 @@
 <template>
   <div class="search">
-    <Card>
-      <Form
+    <el-card>
+      <el-form
         ref="searchForm"
         :model="searchForm"
         inline
-        :label-width="70"
+        label-width="70px"
         class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <Form-item label="会员名称" prop="memberName">
-          <Input
-            type="text"
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
             v-model="searchForm.memberName"
             placeholder="请输入会员名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="充值单号" prop="rechargeSn">
-          <Input
-            type="text"
+        </el-form-item>
+        <el-form-item label="充值单号" prop="rechargeSn">
+          <el-input
             v-model="searchForm.rechargeSn"
             placeholder="请输入充值单号"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="支付时间">
-          <DatePicker
+        </el-form-item>
+        <el-form-item label="支付时间">
+          <el-date-picker
             v-model="selectDate"
             type="datetimerange"
-            format="yyyy-MM-dd HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
             clearable
-            @on-change="selectDateRange"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             placeholder="选择起始时间"
-            style="width: 240px"
-          ></DatePicker>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-      </Form>
-    </Card>
-    <Card>
-      <Table
-        :loading="loading"
+            style="width: 360px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card>
+      <el-table
+        v-loading="loading"
         border
-        :columns="columns"
         :data="data"
         ref="table"
         class="mt_10"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        style="width: 100%"
+      >
+        <el-table-column prop="memberName" label="会员名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="rechargeSn" label="订单号" min-width="180" show-overflow-tooltip />
+        <el-table-column label="充值金额" width="160" sortable>
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.rechargeMoney" :color="$mainColor" unit="+" />
+          </template>
+        </el-table-column>
+        <el-table-column label="充值方式" width="120">
+          <template #default="{ row }">
+            <span v-if="row">{{ rechargeWayText(row.rechargeWay) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="支付状态" width="120">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="row.payStatus === 'PAID' ? 'success' : 'danger'">
+              {{ row.payStatus === "PAID" ? "已付款" : "未付款" }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="充值时间" width="190" />
+        <el-table-column prop="payTime" label="支付时间" width="190" />
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
-  import {
-    getUserRecharge,
-  } from "@/api/member";
-  export default {
-    name: "recharge",
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-          memberName:""
-        },
-        selectDate: null, // 选择区间时间
-        columns: [
-          {
-            title: "会员名称",
-            key: "memberName",
-            minWidth: 120,
-            tooltip: true
-          },
-          {
-            title: "订单号",
-            key: "rechargeSn",
-            minWidth: 180,
-            tooltip: true
-          },
-          {
-            title: "充值金额",
-            key: "rechargeMoney",
-            width: 160,
-            sortable: true,
-            render: (h, params) => {
-              return h("priceColorScheme", {props:{value:params.row.rechargeMoney,color:this.$mainColor,unit:"+"}} );
-            },
-          },
-          {
-            title: "充值方式",
-            key: "rechargeWay",
-            width: 120,
-            render: (h, params) => {
-              if (params.row.rechargeWay === 'ALIPAY') {
-                return h('div', [h('span', {}, '支付宝')]);
-              } else if (params.row.rechargeWay === 'WECHAT') {
-                return h('div', [h('span', {}, '微信')]);
-              } else if (params.row.rechargeWay === 'BANK_TRANSFER') {
-                return h('div', [h('span', {}, '线下转账')]);
-              } else {
-                return h('div', [h('span', {}, '')]);
-              }
-            }
-          },
-          {
-            title: "支付状态",
-            key: "payStatus",
-            align: "left",
-            width: 120,
-            sortable: false,
-            render: (h, params) => {
-              if (params.row.payStatus == "PAID") {
-                return h("Tag", {props: {color: "green",},}, "已付款");
-              } else {
-                return h("Tag", {props: {color: "red",},}, "未付款");
-              }
-            },
-          },
-          {
-            title: "充值时间",
-            key: "createTime",
-            align: "left",
-            width: 190,
-            sortable: false,
-          },
-          {
-            title: "支付时间",
-            key: "payTime",
-            align: "left",
-            width: 190,
-            sortable: false,
-          },
-        ],
-        data: [], // 表单数据
-        total: 0, // 表单数据总数
-      };
+import { getUserRecharge } from "@/api/member";
+
+export default {
+  name: "recharge",
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
+        memberName: "",
+      },
+      selectDate: null,
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    rechargeWayText(way) {
+      if (way === "ALIPAY") return "支付宝";
+      if (way === "WECHAT") return "微信";
+      if (way === "BANK_TRANSFER") return "线下转账";
+      return "";
+    },
+    init() {
+      this.getDataList();
+    },
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+    },
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getDataList();
     },
-    methods: {
-      // 初始化数据
-      init() {
-        this.getDataList();
-      },
-      // 分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-      // 时间段赋值
-      selectDateRange(v) {
-        if (v) {
-          this.searchForm.startDate = v[0];
-          this.searchForm.endDate = v[1];
-        }
-      },
-      // 获取列表数据
-      getDataList() {
-        this.loading = true;
-        getUserRecharge(this.searchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        });
-        this.total = this.data.length;
+    selectDateRange(v) {
+      if (v && v.length === 2) {
+        this.searchForm.startDate = v[0];
+        this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
+      }
+    },
+    getDataList() {
+      this.loading = true;
+      getUserRecharge(this.searchForm).then((res) => {
         this.loading = false;
-      },
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
     },
-    mounted() {
-      this.init();
-    },
-  };
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
diff --git a/manager/src/views/member/advance/walletLog.vue b/manager/src/views/member/advance/walletLog.vue
index 9b6e65ff..c1f3ef41 100644
--- a/manager/src/views/member/advance/walletLog.vue
+++ b/manager/src/views/member/advance/walletLog.vue
@@ -1,132 +1,148 @@
-
 <template>
   <div class="search">
-    <Card>
-      <Row @keydown.enter.native="handleSearch">
-        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-          <Form-item label="会员名称" prop="memberName">
-            <Input type="text" v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 240px" />
-          </Form-item>
-          <Form-item label="支付时间">
-            <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 240px"></DatePicker>
-          </Form-item>
-          <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-        </Form>
-      </Row>
-    </Card>
-    <Card>
-      <Table class="mt_10" :loading="loading" border :columns="columns" :data="data" ref="table"></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]"
-          size="small" show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
+            v-model="searchForm.memberName"
+            placeholder="请输入会员名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="支付时间">
+          <el-date-picker
+            v-model="selectDate"
+            type="datetimerange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            clearable
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择起始时间"
+            style="width: 360px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card>
+      <el-table
+        v-loading="loading"
+        border
+        :data="data"
+        ref="table"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column prop="memberName" label="会员名称" min-width="100" />
+        <el-table-column label="变动金额" width="150">
+          <template #default="{ row }">
+            <template v-if="row">
+              <priceColorScheme
+                v-if="row.money > 0"
+                :value="row.money"
+                color="green"
+              />
+              <priceColorScheme
+                v-else-if="row.money < 0"
+                :value="row.money"
+                :color="$mainColor"
+              />
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="变更时间" width="200" />
+        <el-table-column label="业务类型" width="200">
+          <template #default="{ row }">
+            <span v-if="row">{{ serviceTypeText(row.serviceType) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="detail" label="详细" min-width="300" show-overflow-tooltip />
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
 import { getUserWallet } from "@/api/member";
+
 export default {
   name: "walletLog",
   data() {
     return {
-      loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-          memberName: "",
-        },
-      selectDate: null, // 选择时间段
-      columns: [
-        // 表头
-        {
-          title: "会员名称",
-          key: "memberName",
-          minWidth: 100,
-        },
-        {
-          title: "变动金额",
-          key: "money",
-          width: 150,
-          render: (h, params) => {
-            if (params.row.money >0) {
-              return h("priceColorScheme", {props:{value:params.row.money,color:'green'}} );
-            } else if (params.row.money < 0) {
-              return h("priceColorScheme", {props:{value:params.row.money,color:this.$mainColor}} );
-            }
-          },
-        },
-
-        {
-          title: "变更时间",
-          key: "createTime",
-          width: 200,
-        },
-        {
-          title: "业务类型",
-          key: "serviceType",
-          width: 200,
-          render: (h, params) => {
-            if (params.row.serviceType == "WALLET_WITHDRAWAL") {
-              return h("div", [h("span", {}, "余额提现")]);
-            } else if (params.row.serviceType == "WALLET_PAY") {
-              return h("div", [h("span", {}, "余额支付")]);
-            } else if (params.row.serviceType == "WALLET_REFUND") {
-              return h("div", [h("span", {}, "余额退款")]);
-            } else if (params.row.serviceType == "WALLET_RECHARGE") {
-              return h("div", [h("span", {}, "余额充值")]);
-            } else {
-              return h("div", [h("span", {}, "佣金提成")]);
-            }
-          },
-        },
-        {
-          title: "详细",
-          key: "detail",
-          minWidth: 300,
-          tooltip: true,
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
+        memberName: "",
+      },
+      selectDate: null,
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
+    serviceTypeText(type) {
+      if (type === "WALLET_WITHDRAWAL") return "余额提现";
+      if (type === "WALLET_PAY") return "余额支付";
+      if (type === "WALLET_REFUND") return "余额退款";
+      if (type === "WALLET_RECHARGE") return "余额充值";
+      return "佣金提成";
+    },
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
-    // 分页 改变页数
     changePageSize(v) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 时间段赋值
     selectDateRange(v) {
-      if (v) {
+      if (v && v.length === 2) {
         this.searchForm.startDate = v[0];
         this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
       }
     },
-    // 获取列表数据
     getDataList() {
+      this.loading = true;
       getUserWallet(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
@@ -134,8 +150,6 @@ export default {
           this.total = res.result.total;
         }
       });
-      this.total = this.data.length;
-      this.loading = false;
     },
   },
   mounted() {
diff --git a/manager/src/views/member/advance/withdrawApply.vue b/manager/src/views/member/advance/withdrawApply.vue
index 36bcf667..a5781794 100644
--- a/manager/src/views/member/advance/withdrawApply.vue
+++ b/manager/src/views/member/advance/withdrawApply.vue
@@ -1,102 +1,171 @@
 <template>
   <div class="search">
-    <Card>
-      <Row @keydown.enter.native="handleSearch">
-        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-          <Form-item label="会员名称" prop="memberName">
-            <Input type="text" v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 240px" />
-          </Form-item>
-          <Form-item label="提现状态" prop="applyStatus">
-            <Select v-model="searchForm.applyStatus" clearable style="width: 240px">
-              <Option value="APPLY">申请中</Option>
-              <Option value="VIA_AUDITING">审核通过</Option>
-              <Option value="WAIT_USER_CONFIRM">用户确认</Option>
-              <Option value="FAIL_AUDITING">审核拒绝</Option>
-              <Option value="SUCCESS">提现成功</Option>
-              <Option value="ERROR">提现失败</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="申请时间">
-            <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 240px"></DatePicker>
-          </Form-item>
-          <Form-item style="margin-left: -35px" class="br">
-            <Button @click="handleSearch" type="primary" icon="ios-search">搜索
-            </Button>
-          </Form-item>
-        </Form>
-      </Row>
-    </Card>
-    <Card>
-      <Table class="mt_10" :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]" size="small"
-          show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
-    <Modal :title="modalTitle" v-model="roleModalVisible" :mask-closable="false" :width="500">
-      <Form :label-width="80">
-        <FormItem label="申请编号">
-          <span>{{showList.sn}}</span>
-        </FormItem>
-        <FormItem label="用户名称">
-          <span>{{showList.memberName}}</span>
-        </FormItem>
-        <FormItem label="申请金额">
-          <priceColorScheme :value="showList.applyMoney" :color="$mainColor"></priceColorScheme>
-        </FormItem>
-        <FormItem label="提现状态">
-          <span>{{showList.applyStatus | paramTypeFilter}}</span>
-        </FormItem>
-        <FormItem label="申请时间">
-          <span>{{showList.createTime}}</span>
-        </FormItem>
-        <FormItem label="审核备注">
-          <Input v-model="audit" type="textarea" />
-        </FormItem>
-
-      </Form>
-      <div slot="footer" v-if="showList.applyStatus == 'APPLY'">
-        <Button type="text" @click="submitRole(false)">拒绝</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitRole(true)">通过
-        </Button>
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
+            v-model="searchForm.memberName"
+            placeholder="请输入会员名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="提现状态" prop="applyStatus">
+          <el-select v-model="searchForm.applyStatus" clearable style="width: 240px">
+            <el-option label="申请中" value="APPLY" />
+            <el-option label="审核通过" value="VIA_AUDITING" />
+            <el-option label="用户确认" value="WAIT_USER_CONFIRM" />
+            <el-option label="审核拒绝" value="FAIL_AUDITING" />
+            <el-option label="提现成功" value="SUCCESS" />
+            <el-option label="提现失败" value="ERROR" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="申请时间">
+          <el-date-picker
+            v-model="selectDate"
+            type="datetimerange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            clearable
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择起始时间"
+            style="width: 360px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card>
+      <el-table
+        v-loading="loading"
+        border
+        :data="data"
+        ref="table"
+        class="mt_10"
+        style="width: 100%"
+        @sort-change="changeSort"
+        @selection-change="changeSelect"
+      >
+        <el-table-column prop="sn" label="申请编号" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="memberName" label="用户名称" min-width="120" show-overflow-tooltip />
+        <el-table-column label="申请金额" width="120">
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.applyMoney" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column label="提现状态" width="120">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="applyStatusTagType(row.applyStatus)">
+              {{ applyStatusText(row.applyStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="申请时间" width="170" sortable="custom" />
+        <el-table-column prop="inspectTime" label="审核时间" width="170" />
+        <el-table-column label="操作" width="120" align="center" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row" class="ops">
+              <a class="link-text" v-if="row.applyStatus === 'APPLY'" @click="openAudit(row)">审核</a>
+              <a class="link-text" v-else @click="openQuery(row)">查看</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
       </div>
-    </Modal>
+    </el-card>
 
-    <Modal :title="modalTitle" v-model="queryModalVisible" :mask-closable="false" :width="500">
-      <Form :label-width="80">
-        <FormItem label="申请编号：">
-          <span>{{showList.sn}}</span>
-        </FormItem>
-        <FormItem label="用户名称：">
-          <span>{{showList.memberName}}</span>
-        </FormItem>
-        <FormItem label="申请金额：">
-          <priceColorScheme :value="showList.applyMoney" :color="$mainColor"></priceColorScheme>
+    <el-dialog
+      v-model="roleModalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <el-form label-width="80px">
+        <el-form-item label="申请编号">
+          <span>{{ showList.sn }}</span>
+        </el-form-item>
+        <el-form-item label="用户名称">
+          <span>{{ showList.memberName }}</span>
+        </el-form-item>
+        <el-form-item label="申请金额">
+          <priceColorScheme :value="showList.applyMoney" :color="$mainColor" />
+        </el-form-item>
+        <el-form-item label="提现状态">
+          <span>{{ paramTypeFilter(showList.applyStatus) }}</span>
+        </el-form-item>
+        <el-form-item label="申请时间">
+          <span>{{ showList.createTime }}</span>
+        </el-form-item>
+        <el-form-item label="审核备注">
+          <el-input v-model="audit" type="textarea" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <template v-if="showList.applyStatus === 'APPLY'">
+          <el-button @click="submitRole(false)">拒绝</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="submitRole(true)">通过</el-button>
+        </template>
+      </template>
+    </el-dialog>
 
-        </FormItem>
-        <FormItem label="提现状态：">
-          <span>{{showList.applyStatus | paramTypeFilter}}</span>
-        </FormItem>
-        <FormItem label="申请时间：">
-          <span>{{showList.createTime}}</span>
-        </FormItem>
-        <FormItem label="审核时间：">
-          <span>{{showList.inspectTime}}</span>
-        </FormItem>
-        <FormItem label="审核备注：">
-          <span>{{showList.inspectRemark || '暂无备注'}}</span>
-        </FormItem>
-
-      </Form>
-      <div slot="footer" v-if="showList.applyStatus == 'APPLY'">
-        <Button type="text" @click="submitRole(false)">拒绝</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitRole(true)">通过
-        </Button>
-      </div>
-      <div slot="footer" v-else>
-        <Button type="text" @click="queryModalVisible = false">取消</Button>
-      </div>
-    </Modal>
+    <el-dialog
+      v-model="queryModalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <el-form label-width="100px">
+        <el-form-item label="申请编号：">
+          <span>{{ showList.sn }}</span>
+        </el-form-item>
+        <el-form-item label="用户名称：">
+          <span>{{ showList.memberName }}</span>
+        </el-form-item>
+        <el-form-item label="申请金额：">
+          <priceColorScheme :value="showList.applyMoney" :color="$mainColor" />
+        </el-form-item>
+        <el-form-item label="提现状态：">
+          <span>{{ paramTypeFilter(showList.applyStatus) }}</span>
+        </el-form-item>
+        <el-form-item label="申请时间：">
+          <span>{{ showList.createTime }}</span>
+        </el-form-item>
+        <el-form-item label="审核时间：">
+          <span>{{ showList.inspectTime }}</span>
+        </el-form-item>
+        <el-form-item label="审核备注：">
+          <span>{{ showList.inspectRemark || "暂无备注" }}</span>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <template v-if="showList.applyStatus === 'APPLY'">
+          <el-button @click="submitRole(false)">拒绝</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="submitRole(true)">通过</el-button>
+        </template>
+        <el-button v-else @click="queryModalVisible = false">取消</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -105,169 +174,68 @@ import { getUserWithdrawApply, withdrawApply } from "@/api/member";
 
 export default {
   name: "withdrawApply",
-  components: {},
   data() {
     return {
-      modalTitle: "", //弹出框标题
-      openSearch: true, // 显示搜索
-      openTip: true, // 显示提示
-      loading: true, // 表单加载状态
-      audit: "", // 审核备注
-      roleModalVisible: false, // 审核模态框
-      queryModalVisible: false, // 审核模态框
+      modalTitle: "",
+      loading: true,
+      audit: "",
+      roleModalVisible: false,
+      queryModalVisible: false,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
         memberName: "",
         applyStatus: "",
       },
-      selectDate: null, // 选择时间段
-      submitLoading: false, // 添加或编辑提交状态
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      showList: {}, // 可操作选项
-      columns: [
-        {
-          title: "申请编号",
-          key: "sn",
-          align: "left",
-          tooltip: true,
-        },
-        {
-          title: "用户名称",
-          key: "memberName",
-          align: "left",
-          tooltip: true,
-        },
-        {
-          title: "申请金额",
-          key: "applyMoney",
-          align: "left",
-          width: 120,
-
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.applyMoney,color:this.$mainColor}} );
-          },
-
-
-        },
-        {
-          title: "提现状态",
-          align: "left",
-          key: "applyStatus",
-          width: 120,
-          render: (h, params) => {
-            if (params.row.applyStatus == "APPLY") {
-              return h("Tag", { props: { color: "volcano" } }, "申请中");
-            } else if (params.row.applyStatus == "VIA_AUDITING") {
-              return h("Tag", { props: { color: "green" } }, "审核通过");
-            } else if (params.row.applyStatus == "WAIT_USER_CONFIRM") {
-              return h("Tag", { props: { color: "gold" } }, "用户确认");
-            } else if (params.row.applyStatus == "SUCCESS") {
-              return h("Tag", { props: { color: "blue" } }, "提现成功");
-            } else if (params.row.applyStatus == "ERROR") {
-              return h("Tag", { props: { color: "blue" } }, "提现失败");
-            } else {
-              return h("Tag", { props: { color: "red" } }, "审核拒绝");
-            }
-          }
-        },
-        {
-          title: "申请时间",
-          key: "createTime",
-          align: "left",
-          width: 170,
-        },
-        {
-          title: "审核时间",
-          key: "inspectTime",
-          align: "left",
-          width: 170,
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 120,
-          align: "center",
-          fixed: "right",
-          render: (h, params) => {
-            if (params.row.applyStatus == "APPLY") {
-              return h("div", { class: "ops" }, [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.showList = {};
-                        this.roleModalVisible = true;
-                        this.showList = params.row;
-                        this.audit = "";
-                      },
-                    },
-                  },
-                  "审核"
-                ),
-              ]);
-            } else {
-              return h("div", { class: "ops" }, [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.showList = {};
-                        this.queryModalVisible = true;
-                        this.showList = params.row;
-                        this.modalTitle = "查看";
-                      },
-                    },
-                  },
-                  "查看"
-                ),
-              ]);
-            }
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      selectDate: null,
+      submitLoading: false,
+      selectList: [],
+      selectCount: 0,
+      showList: {},
+      data: [],
+      total: 0,
     };
   },
-  filters: {
-    paramTypeFilter(val) {
-      if (val === "APPLY") {
-        return "申请中";
-      } else if (val === "VIA_AUDITING") {
-        return "审核通过(提现成功)";
-      } else if (val === "WAIT_USER_CONFIRM") {
-        return "用户确认";
-      } else if (val === "FAIL_AUDITING") {
-        return "审核拒绝";
-      } else if (val === "SUCCESS") {
-        return "提现成功";
-      } else if (val === "ERROR") {
-        return "提现失败";
-      } else {
-        return "未知状态";
-      }
-    },
-  },
   methods: {
+    paramTypeFilter(val) {
+      if (val === "APPLY") return "申请中";
+      if (val === "VIA_AUDITING") return "审核通过(提现成功)";
+      if (val === "WAIT_USER_CONFIRM") return "用户确认";
+      if (val === "FAIL_AUDITING") return "审核拒绝";
+      if (val === "SUCCESS") return "提现成功";
+      if (val === "ERROR") return "提现失败";
+      return "未知状态";
+    },
+    applyStatusText(status) {
+      if (status === "APPLY") return "申请中";
+      if (status === "VIA_AUDITING") return "审核通过";
+      if (status === "WAIT_USER_CONFIRM") return "用户确认";
+      if (status === "SUCCESS") return "提现成功";
+      if (status === "ERROR") return "提现失败";
+      return "审核拒绝";
+    },
+    applyStatusTagType(status) {
+      if (status === "APPLY") return "warning";
+      if (status === "VIA_AUDITING") return "success";
+      if (status === "WAIT_USER_CONFIRM") return "warning";
+      if (status === "SUCCESS") return "primary";
+      if (status === "ERROR") return "primary";
+      return "danger";
+    },
+    openAudit(row) {
+      this.showList = { ...row };
+      this.audit = "";
+      this.roleModalVisible = true;
+    },
+    openQuery(row) {
+      this.showList = { ...row };
+      this.modalTitle = "查看";
+      this.queryModalVisible = true;
+    },
     submitRole(res) {
       const params = {};
       params.applyId = this.showList.id;
@@ -319,33 +287,36 @@ export default {
       this.searchForm.startDate = "";
       this.searchForm.endDate = "";
       this.searchForm.memberName = "";
-      // 重新加载数据
       this.getDataList();
     },
     changeSort(e) {
-      this.searchForm.sort = e.key;
-      this.searchForm.order = e.order;
-      if (e.order === "normal") {
+      this.searchForm.sort = e.prop || e.key;
+      this.searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+      if (!e.order) {
         this.searchForm.order = "";
       }
       this.getDataList();
     },
     clearSelectAll() {
-      this.$refs.table.selectAll(false);
+      if (this.$refs.table) {
+        this.$refs.table.clearSelection();
+      }
     },
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
     },
     selectDateRange(v) {
-      if (v) {
+      if (v && v.length === 2) {
         this.searchForm.startDate = v[0];
         this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
       }
     },
     getDataList() {
       this.loading = true;
-      // 带多条件搜索参数获取表单数据 请自行修改接口
       getUserWithdrawApply(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
@@ -353,8 +324,6 @@ export default {
           this.total = res.result.total;
         }
       });
-      this.total = this.data.length;
-      this.loading = false;
     },
   },
   mounted() {
@@ -374,4 +343,3 @@ export default {
   color: #dcdee2;
 }
 </style>
-
diff --git a/manager/src/views/member/benefit/index.vue b/manager/src/views/member/benefit/index.vue
index 4b47d369..259dd5e8 100644
--- a/manager/src/views/member/benefit/index.vue
+++ b/manager/src/views/member/benefit/index.vue
@@ -1,42 +1,90 @@
 <template>
   <div class="search member-benefit">
-    <Card>
-      <Row class="operation padding-row">
-        <Button type="primary" @click="openAdd">添加权益设置</Button>
-      </Row>
-      <Table
-        :loading="loading"
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="openAdd">添加权益设置</el-button>
+      </div>
+      <el-table
+        v-loading="loading"
         stripe
-        :columns="columns"
         :data="data"
-        no-data-text="暂无数据"
+        empty-text="暂无数据"
         class="mt_10 benefit-list-table benefit-list-table--no-vertical-borders"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        style="width: 100%"
+      >
+        <el-table-column label="权益类型" width="132">
+          <template #default="{ row }">
+            <span
+              v-if="row"
+              :title="benefitTypeLabel(row.benefitType)"
+              class="benefit-list-cell-ellipsis benefit-list-cell-ellipsis--type"
+            >
+              {{ benefitTypeLabel(row.benefitType) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="权益名称" width="188">
+          <template #default="{ row }">
+            <span
+              v-if="row"
+              :title="row.benefitName || '-'"
+              class="benefit-list-cell-ellipsis benefit-list-cell-ellipsis--name"
+            >
+              {{ row.benefitName || "-" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="权益LOGO" width="116" align="center">
+          <template #default="{ row }">
+            <span v-if="row && !row.benefitLogo">-</span>
+            <div v-else-if="row" class="benefit-logo-thumb benefit-logo-thumb--table">
+              <img :src="row.benefitLogo" alt="" />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="118" align="center">
+          <template #default="{ row }">
+            <el-switch
+              v-if="row"
+              :model-value="row.benefitState === 'OPEN'"
+              inline-prompt
+              active-text="开启"
+              inactive-text="关闭"
+              :loading="!!row._benefitStateLoading"
+              @change="(checked) => onBenefitStateSwitch(row, checked)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="140">
+          <template #default="{ row }">
+            <div v-if="row" class="ops" style="display: flex; justify-content: center">
+              <a class="link-text" @click="openEdit(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 30, 50]"
+          :page-sizes="[20, 30, 50]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
 
-    <!-- 平台优惠券选择（与「添加优惠券活动」coupon-publish 相同组件） -->
-    <Modal
+    <el-dialog
       v-model="couponPickerVisible"
       title="选择优惠券"
       width="80%"
       :z-index="3000"
-      :mask-closable="false"
-      @on-ok="handleCouponPickerClose"
-      @on-cancel="handleCouponPickerClose"
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="handleCouponPickerClose"
     >
       <couponTemplate
         v-if="couponPickerVisible"
@@ -45,38 +93,41 @@
         promotionStatus="START"
         @selected="onCouponTemplateSelected"
       />
-    </Modal>
+    </el-dialog>
 
-    <Drawer
+    <el-drawer
       v-model="addFlag"
       title="添加权益设置"
-      width="1120"
-      placement="right"
+      size="1120px"
+      direction="rtl"
       :z-index="950"
-      :mask-closable="false"
-      :closable="true"
-      scrollable
-      class-name="benefit-form-drawer"
+      :close-on-click-modal="false"
+      class="benefit-form-drawer"
     >
-      <Form ref="addForm" :model="formAdd" :rules="rulesAdd" :label-width="110">
-        <FormItem label="权益类型" prop="benefitType">
-          <Select
+      <el-form ref="addForm" :model="formAdd" :rules="rulesAdd" label-width="110px">
+        <el-form-item label="权益类型" prop="benefitType">
+          <el-select
             v-model="formAdd.benefitType"
             clearable
             placeholder="请选择权益类型"
             style="width: 100%"
-            @on-change="onAddBenefitTypeChange"
+            @change="onAddBenefitTypeChange"
           >
-            <Option v-for="item in benefitTypeOptions" :key="item.value" :value="item.value">{{ item.description }}</Option>
-          </Select>
-        </FormItem>
-        <FormItem
+            <el-option
+              v-for="item in benefitTypeOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="item.description"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
           v-show="formAdd.benefitType === 'GIFT_POINT'"
           label="赠送积分"
           prop="giftPoint"
           :required="formAdd.benefitType === 'GIFT_POINT'"
         >
-          <InputNumber
+          <el-input-number
             v-model="formAdd.giftPoint"
             :min="0"
             :max="99999"
@@ -84,28 +135,54 @@
             style="width: 220px"
             placeholder="必填，范围 0-99999"
           />
-        </FormItem>
-        <FormItem
+        </el-form-item>
+        <el-form-item
           v-show="formAdd.benefitType === 'COUPON_PACKAGE'"
           label="赠送优惠券"
           prop="couponPackageRows"
           :required="formAdd.benefitType === 'COUPON_PACKAGE'"
         >
           <div>
-            <Button type="dashed" icon="ios-add" class="mb_10" @click="openCouponPicker('add')">添加优惠券</Button>
-            <Table
+            <el-button plain class="mb_10" @click="openCouponPicker('add')">添加优惠券</el-button>
+            <el-table
               border
               size="small"
-              :columns="couponPackageTableColumns"
               :data="formAdd.couponPackageRows"
-              no-data-text="请添加优惠券"
-            ></Table>
+              empty-text="请添加优惠券"
+              style="width: 100%"
+            >
+              <el-table-column prop="couponName" label="优惠券名称" min-width="100" show-overflow-tooltip />
+              <el-table-column label="有效期" min-width="100">
+                <template #default="{ row }">
+                  <span v-if="row" v-html="row.validRange || '-'" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="faceValueLabel" label="面额" min-width="100" />
+              <el-table-column label="赠送张数" width="150">
+                <template #default="{ row, $index }">
+                  <el-input-number
+                    v-if="row"
+                    :model-value="row.quantity"
+                    :min="1"
+                    :max="10"
+                    :precision="0"
+                    style="width: 100px"
+                    @change="(val) => onCouponQuantityChange('add', $index, val)"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="90" align="center">
+                <template #default="{ row, $index }">
+                  <a v-if="row" class="link-text" @click="removeCouponRow('add', $index)">删除</a>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
-        </FormItem>
-        <FormItem label="权益名称" prop="benefitName">
-          <Input v-model="formAdd.benefitName" maxlength="50" placeholder="请输入权益名称" />
-        </FormItem>
-        <FormItem label="权益LOGO" prop="benefitLogo">
+        </el-form-item>
+        <el-form-item label="权益名称" prop="benefitName">
+          <el-input v-model="formAdd.benefitName" maxlength="50" placeholder="请输入权益名称" />
+        </el-form-item>
+        <el-form-item label="权益LOGO" prop="benefitLogo">
           <div class="benefit-logo-field">
             <div v-if="formAdd.benefitLogo" class="benefit-logo-thumb">
               <img :src="formAdd.benefitLogo" alt="" />
@@ -114,57 +191,60 @@
               <upload-pic-input v-model="formAdd.benefitLogo" placeholder="请上传权益 LOGO 图片地址" style="width: 100%" />
             </div>
           </div>
-        </FormItem>
-        <FormItem label="权益介绍" prop="benefitDesc">
-          <Input v-model="formAdd.benefitDesc" type="textarea" :rows="4" maxlength="500" placeholder="请输入权益介绍" />
-        </FormItem>
-        <FormItem label="启用状态" prop="benefitState">
-          <RadioGroup v-model="formAdd.benefitState">
-            <Radio label="OPEN">开启</Radio>
-            <Radio label="CLOSE">关闭</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="排序" prop="benefitSort">
-          <InputNumber v-model="formAdd.benefitSort" :min="1" :max="9999" :precision="0" style="width: 220px" />
-        </FormItem>
-      </Form>
+        </el-form-item>
+        <el-form-item label="权益介绍" prop="benefitDesc">
+          <el-input v-model="formAdd.benefitDesc" type="textarea" :rows="4" maxlength="500" placeholder="请输入权益介绍" />
+        </el-form-item>
+        <el-form-item label="启用状态" prop="benefitState">
+          <el-radio-group v-model="formAdd.benefitState">
+            <el-radio value="OPEN">开启</el-radio>
+            <el-radio value="CLOSE">关闭</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="排序" prop="benefitSort">
+          <el-input-number v-model="formAdd.benefitSort" :min="1" :max="9999" :precision="0" style="width: 220px" />
+        </el-form-item>
+      </el-form>
       <div class="benefit-drawer-footer-btns">
-        <Button @click="addFlag = false">取消</Button>
-        <Button type="primary" :loading="submitAddLoading" @click="submitAdd">提交</Button>
+        <el-button @click="addFlag = false">取消</el-button>
+        <el-button type="primary" :loading="submitAddLoading" @click="submitAdd">提交</el-button>
       </div>
-    </Drawer>
+    </el-drawer>
 
-    <Drawer
+    <el-drawer
       v-model="editFlag"
       title="编辑权益设置"
-      width="1120"
-      placement="right"
+      size="1120px"
+      direction="rtl"
       :z-index="950"
-      :mask-closable="false"
-      :closable="true"
-      scrollable
-      class-name="benefit-form-drawer"
+      :close-on-click-modal="false"
+      class="benefit-form-drawer"
     >
-      <Form ref="editForm" :model="formEdit" :rules="rulesEdit" :label-width="110">
-        <Input v-model="formEdit.id" v-show="false" />
-        <FormItem label="权益类型" prop="benefitType">
-          <Select
+      <el-form ref="editForm" :model="formEdit" :rules="rulesEdit" label-width="110px">
+        <el-input v-model="formEdit.id" v-show="false" />
+        <el-form-item label="权益类型" prop="benefitType">
+          <el-select
             v-model="formEdit.benefitType"
             clearable
             placeholder="请选择权益类型"
             style="width: 100%"
-            @on-change="onEditBenefitTypeChange"
+            @change="onEditBenefitTypeChange"
           >
-            <Option v-for="item in benefitTypeOptions" :key="item.value" :value="item.value">{{ item.description }}</Option>
-          </Select>
-        </FormItem>
-        <FormItem
+            <el-option
+              v-for="item in benefitTypeOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="item.description"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
           v-show="formEdit.benefitType === 'GIFT_POINT'"
           label="赠送积分"
           prop="giftPoint"
           :required="formEdit.benefitType === 'GIFT_POINT'"
         >
-          <InputNumber
+          <el-input-number
             v-model="formEdit.giftPoint"
             :min="0"
             :max="99999"
@@ -172,28 +252,54 @@
             style="width: 220px"
             placeholder="必填，范围 0-99999"
           />
-        </FormItem>
-        <FormItem
+        </el-form-item>
+        <el-form-item
           v-show="formEdit.benefitType === 'COUPON_PACKAGE'"
           label="赠送优惠券"
           prop="couponPackageRows"
           :required="formEdit.benefitType === 'COUPON_PACKAGE'"
         >
           <div>
-            <Button type="dashed" icon="ios-add" class="mb_10" @click="openCouponPicker('edit')">添加优惠券</Button>
-            <Table
+            <el-button plain class="mb_10" @click="openCouponPicker('edit')">添加优惠券</el-button>
+            <el-table
               border
               size="small"
-              :columns="couponPackageTableColumnsEdit"
               :data="formEdit.couponPackageRows"
-              no-data-text="请添加优惠券"
-            ></Table>
+              empty-text="请添加优惠券"
+              style="width: 100%"
+            >
+              <el-table-column prop="couponName" label="优惠券名称" min-width="100" show-overflow-tooltip />
+              <el-table-column label="有效期" min-width="100">
+                <template #default="{ row }">
+                  <span v-if="row" v-html="row.validRange || '-'" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="faceValueLabel" label="面额" min-width="100" />
+              <el-table-column label="赠送张数" width="150">
+                <template #default="{ row, $index }">
+                  <el-input-number
+                    v-if="row"
+                    :model-value="row.quantity"
+                    :min="1"
+                    :max="10"
+                    :precision="0"
+                    style="width: 100px"
+                    @change="(val) => onCouponQuantityChange('edit', $index, val)"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="90" align="center">
+                <template #default="{ row, $index }">
+                  <a v-if="row" class="link-text" @click="removeCouponRow('edit', $index)">删除</a>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
-        </FormItem>
-        <FormItem label="权益名称" prop="benefitName">
-          <Input v-model="formEdit.benefitName" maxlength="50" placeholder="请输入权益名称" />
-        </FormItem>
-        <FormItem label="权益LOGO" prop="benefitLogo">
+        </el-form-item>
+        <el-form-item label="权益名称" prop="benefitName">
+          <el-input v-model="formEdit.benefitName" maxlength="50" placeholder="请输入权益名称" />
+        </el-form-item>
+        <el-form-item label="权益LOGO" prop="benefitLogo">
           <div class="benefit-logo-field">
             <div v-if="formEdit.benefitLogo" class="benefit-logo-thumb">
               <img :src="formEdit.benefitLogo" alt="" />
@@ -202,25 +308,25 @@
               <upload-pic-input v-model="formEdit.benefitLogo" placeholder="请上传权益 LOGO 图片地址" style="width: 100%" />
             </div>
           </div>
-        </FormItem>
-        <FormItem label="权益介绍" prop="benefitDesc">
-          <Input v-model="formEdit.benefitDesc" type="textarea" :rows="4" maxlength="500" placeholder="请输入权益介绍" />
-        </FormItem>
-        <FormItem label="启用状态" prop="benefitState">
-          <RadioGroup v-model="formEdit.benefitState">
-            <Radio label="OPEN">开启</Radio>
-            <Radio label="CLOSE">关闭</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="排序" prop="benefitSort">
-          <InputNumber v-model="formEdit.benefitSort" :min="1" :max="9999" :precision="0" style="width: 220px" />
-        </FormItem>
-      </Form>
+        </el-form-item>
+        <el-form-item label="权益介绍" prop="benefitDesc">
+          <el-input v-model="formEdit.benefitDesc" type="textarea" :rows="4" maxlength="500" placeholder="请输入权益介绍" />
+        </el-form-item>
+        <el-form-item label="启用状态" prop="benefitState">
+          <el-radio-group v-model="formEdit.benefitState">
+            <el-radio value="OPEN">开启</el-radio>
+            <el-radio value="CLOSE">关闭</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="排序" prop="benefitSort">
+          <el-input-number v-model="formEdit.benefitSort" :min="1" :max="9999" :precision="0" style="width: 220px" />
+        </el-form-item>
+      </el-form>
       <div class="benefit-drawer-footer-btns">
-        <Button @click="editFlag = false">取消</Button>
-        <Button type="primary" :loading="submitEditLoading" @click="submitEdit">提交</Button>
+        <el-button @click="editFlag = false">取消</el-button>
+        <el-button type="primary" :loading="submitEditLoading" @click="submitEdit">提交</el-button>
       </div>
-    </Drawer>
+    </el-drawer>
   </div>
 </template>
 
@@ -244,9 +350,7 @@ const buildDefaultForm = () => ({
   benefitSort: 1,
   benefitState: "OPEN",
   benefitConfig: "",
-  /** 仅 UI：赠送积分数量；提交时写入 benefitConfig */
   giftPoint: null,
-  /** 仅 UI：券礼包已选优惠券（含展示字段）；提交时写入 benefitConfig.coupons */
   couponPackageRows: [],
 });
 
@@ -265,109 +369,6 @@ export default {
         pageNumber: 1,
         pageSize: 20,
       },
-      columns: [
-        {
-          title: "权益类型",
-          key: "benefitType",
-          width: 132,
-          render: (h, params) => {
-            const v = params.row.benefitType;
-            let text = "-";
-            if (v) {
-              const opt = this.benefitTypeOptions.find((o) => o.value === v);
-              text = opt ? opt.description : v;
-            }
-            return h(
-              "span",
-              {
-                attrs: { title: text },
-                class: "benefit-list-cell-ellipsis benefit-list-cell-ellipsis--type",
-              },
-              text
-            );
-          },
-        },
-        {
-          title: "权益名称",
-          key: "benefitName",
-          width: 188,
-          render: (h, params) => {
-            const text = params.row.benefitName || "-";
-            return h(
-              "span",
-              {
-                attrs: { title: text },
-                class: "benefit-list-cell-ellipsis benefit-list-cell-ellipsis--name",
-              },
-              text
-            );
-          },
-        },
-        {
-          title: "权益LOGO",
-          key: "benefitLogo",
-          width: 116,
-          align: "center",
-          render: (h, params) => {
-            const src = params.row.benefitLogo;
-            if (!src) return h("span", "-");
-            return h(
-              "div",
-              {
-                class: "benefit-logo-thumb benefit-logo-thumb--table",
-              },
-              [
-                h("img", {
-                  attrs: { src, alt: "" },
-                }),
-              ]
-            );
-          },
-        },
-        {
-          title: "状态",
-          key: "benefitState",
-          width: 118,
-          align: "center",
-          render: (h, params) => {
-            const row = params.row;
-            return h("i-switch", {
-              props: {
-                value: row.benefitState === "OPEN",
-                size: "large",
-                loading: !!row._benefitStateLoading,
-              },
-              on: {
-                "on-change": (checked) => {
-                  this.onBenefitStateSwitch(row, checked);
-                },
-              },
-            }, [
-              h("span", { slot: "open" }, "开启"),
-              h("span", { slot: "close" }, "关闭"),
-            ]);
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 140,
-          render: (h, params) => {
-            const linkStyle = {
-              color: "#2d8cf0",
-              cursor: "pointer",
-              textDecoration: "none",
-            };
-            const sep = h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|");
-            return h("div", { style: { display: "flex", justifyContent: "center" } }, [
-              h("a", { style: linkStyle, on: { click: () => this.openEdit(params.row) } }, "编辑"),
-              sep,
-              h("a", { style: linkStyle, on: { click: () => this.remove(params.row) } }, "删除"),
-            ]);
-          },
-        },
-      ],
       data: [],
       addFlag: false,
       editFlag: false,
@@ -386,13 +387,6 @@ export default {
     rulesEdit() {
       return this.buildFormRules("edit");
     },
-    couponPackageTableColumns() {
-      return this.buildCouponPackageTableColumns("add");
-    },
-    couponPackageTableColumnsEdit() {
-      return this.buildCouponPackageTableColumns("edit");
-    },
-    /** 传给优惠券列表组件，用于勾选回显（与 coupon-publish 一致用 id） */
     couponPickerSelectedList() {
       const form = this.couponPickerWhich === "add" ? this.formAdd : this.formEdit;
       return (form.couponPackageRows || []).map((r) => ({
@@ -402,6 +396,20 @@ export default {
     },
   },
   methods: {
+    benefitTypeLabel(v) {
+      if (!v) return "-";
+      const opt = this.benefitTypeOptions.find((o) => o.value === v);
+      return opt ? opt.description : v;
+    },
+    onCouponQuantityChange(which, index, val) {
+      const formKey = which === "add" ? "formAdd" : "formEdit";
+      const refName = which === "add" ? "addForm" : "editForm";
+      this[formKey].couponPackageRows[index].quantity = val;
+      this.$nextTick(() => {
+        const ref = this.$refs[refName];
+        if (ref) ref.validateField("couponPackageRows");
+      });
+    },
     buildFormRules(which) {
       const formKey = which === "add" ? "formAdd" : "formEdit";
       return {
@@ -478,66 +486,6 @@ export default {
         validRange: this.formatCouponValidity(detail),
       };
     },
-    buildCouponPackageTableColumns(which) {
-      const formKey = which === "add" ? "formAdd" : "formEdit";
-      const linkStyle = { color: "#2d8cf0", cursor: "pointer" };
-      return [
-        { title: "优惠券名称", key: "couponName", minWidth: 100, tooltip: true },
-        {
-          title: "有效期",
-          minWidth: 100,
-          render: (h, p) =>
-            h("span", {
-              domProps: { innerHTML: p.row.validRange || "-" },
-            }),
-        },
-        { title: "面额", key: "faceValueLabel", minWidth: 100 },
-        {
-          title: "赠送张数",
-          key: "quantity",
-          width: 150,
-          render: (h, params) =>
-            h("InputNumber", {
-              props: {
-                min: 1,
-                max: 10,
-                precision: 0,
-                value: params.row.quantity,
-              },
-              style: { width: "100px" },
-              on: {
-                "on-change": (val) => {
-                  this.$set(this[formKey].couponPackageRows[params.index], "quantity", val);
-                  this.$nextTick(() => {
-                    const ref = which === "add" ? this.$refs.addForm : this.$refs.editForm;
-                    if (ref) ref.validateField("couponPackageRows");
-                  });
-                },
-              },
-            }),
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 90,
-          align: "center",
-          render: (h, params) =>
-            h(
-              "a",
-              {
-                style: linkStyle,
-                on: {
-                  click: () => {
-                    this.removeCouponRow(which, params.index);
-                  },
-                },
-              },
-              "删除"
-            ),
-        },
-      ];
-    },
-    /** 构造 benefitConfig JSON 字符串 */
     buildBenefitConfigString(slice) {
       const { benefitType, giftPoint, couponPackageRows } = slice;
       if (benefitType === GIFT_POINT) {
@@ -552,7 +500,6 @@ export default {
       }
       return "";
     },
-    /** 从详情 benefitConfig 解析赠送积分，解析失败时返回 null */
     parseGiftPointFromConfig(benefitType, benefitConfigStr) {
       if (benefitType !== GIFT_POINT || !benefitConfigStr) return null;
       try {
@@ -613,7 +560,6 @@ export default {
       }
       return [];
     },
-    /** 与添加时 formatCouponFace 一致；仅有 faceValueText 时去掉「减免」前缀 */
     normalizeCouponFaceFromDetail(item) {
       let face = this.formatCouponFace(item);
       if (face !== "-") return face;
@@ -624,7 +570,6 @@ export default {
         .replace(/^减免\s*/, "")
         .trim() || "-";
     },
-    /** 管理端详情 couponItems → 表格行（面额展示与添加一致） */
     mapCouponItemsToPackageRows(items) {
       if (!Array.isArray(items)) return [];
       return items.map((item) => {
@@ -669,7 +614,7 @@ export default {
           });
         }
       }
-      this.$set(this.formEdit, "couponPackageRows", rows);
+      this.formEdit.couponPackageRows = rows;
     },
     handleCouponPickerClose() {
       this.couponPickerVisible = false;
@@ -678,7 +623,6 @@ export default {
       this.couponPickerWhich = which;
       this.couponPickerVisible = true;
     },
-    /** 与 coupon-publish `selectedCoupon`：表格多选变更时同步到券礼包配置 */
     onCouponTemplateSelected(selectedRows) {
       const which = this.couponPickerWhich;
       const form = which === "add" ? this.formAdd : this.formEdit;
@@ -689,7 +633,7 @@ export default {
         const qty = existing ? existing.quantity : 1;
         return this.buildCouponDisplayRow(row, qty);
       });
-      this.$set(form, "couponPackageRows", rows);
+      form.couponPackageRows = rows;
       this.$nextTick(() => {
         const ref = this.$refs[refName];
         if (ref) ref.validateField("couponPackageRows");
@@ -791,7 +735,6 @@ export default {
       API_Member.getMemberBenefit(row.id).then((res) => {
         if (res && res.success && res.result) {
           const raw = res.result;
-          /** 新接口：{ benefit, couponItems }；旧接口：扁平 MemberBenefit */
           const detail = raw.benefit != null ? raw.benefit : raw;
           const couponItems = raw.couponItems;
           const bt = detail.benefitType || "";
@@ -866,19 +809,19 @@ export default {
         title: "提示",
         content: `<p>确定${text}该客户权益？</p>`,
         onOk: () => {
-          this.$set(row, "_benefitStateLoading", true);
+          row._benefitStateLoading = true;
           return API_Member.updateMemberBenefitState(row.id, nextState)
             .then((res) => {
-              this.$set(row, "_benefitStateLoading", false);
+              row._benefitStateLoading = false;
               if (res && res.success) {
                 this.$Message.success(`${text}成功`);
-                this.$set(row, "benefitState", nextState);
+                row.benefitState = nextState;
               } else {
                 this.getData();
               }
             })
             .catch(() => {
-              this.$set(row, "_benefitStateLoading", false);
+              row._benefitStateLoading = false;
             });
         },
       });
@@ -913,17 +856,20 @@ export default {
   border-top: 1px solid #e8eaec;
   text-align: right;
 }
-.benefit-drawer-footer-btns .ivu-btn + .ivu-btn {
+.benefit-drawer-footer-btns .el-button + .el-button {
   margin-left: 8px;
 }
-
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdfe6;
+}
 </style>
 
-<!--
-  权益 LOGO 缩略图：固定 100×100。
-  不使用 .member-benefit 前缀：Modal 默认 transfer 到 body，弹窗内节点不在 .member-benefit 下。
-  Table 列 render 生成的节点在子组件内，同样用非 scoped。
--->
 <style lang="scss">
 .benefit-logo-thumb {
   width: 100px;
@@ -952,7 +898,6 @@ export default {
   margin: 0 auto;
 }
 
-/* 权益列表：固定类型/名称列宽并省略过长文案（悬浮 title 可看全文） */
 .member-benefit .benefit-list-table table {
   table-layout: fixed;
 }
@@ -971,9 +916,8 @@ export default {
   max-width: 172px;
 }
 
-/* 列表不出现列与列之间的竖线（保留行间分隔） */
-.member-benefit .benefit-list-table--no-vertical-borders .ivu-table th,
-.member-benefit .benefit-list-table--no-vertical-borders .ivu-table td {
+.member-benefit .benefit-list-table--no-vertical-borders .el-table th,
+.member-benefit .benefit-list-table--no-vertical-borders .el-table td {
   border-right: none !important;
 }
 </style>
diff --git a/manager/src/views/member/grade/experience-log.vue b/manager/src/views/member/grade/experience-log.vue
index aa99a243..107f2c5c 100644
--- a/manager/src/views/member/grade/experience-log.vue
+++ b/manager/src/views/member/grade/experience-log.vue
@@ -1,57 +1,80 @@
 <template>
   <div class="search">
-    <Card>
-      <Form
+    <el-card>
+      <el-form
         ref="searchForm"
         :model="searchForm"
         inline
-        :label-width="90"
-        @keydown.enter.native="handleSearch"
-        @submit.native.prevent
+        label-width="90px"
         class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <FormItem label="客户手机号" prop="mobile">
-          <Input
+        <el-form-item label="客户手机号" prop="mobile">
+          <el-input
             v-model="searchForm.memberMobile"
             clearable
             placeholder="请输入客户手机号"
             style="width: 220px"
           />
-        </FormItem>
-        <FormItem label="规则" prop="ruleKey">
-          <Select v-model="searchForm.ruleKey" clearable filterable style="width: 220px">
-            <Option v-for="item in ruleOptions" :key="item.value" :value="item.value">
-              {{ item.label }}
-            </Option>
-          </Select>
-        </FormItem>
-        <Button type="primary" icon="ios-search" @click="handleSearch">搜索</Button>
-      </Form>
-    </Card>
+        </el-form-item>
+        <el-form-item label="规则" prop="ruleKey">
+          <el-select v-model="searchForm.ruleKey" clearable filterable style="width: 220px">
+            <el-option
+              v-for="item in ruleOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-    <Card>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        class="mt_10"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+    <el-card>
+      <el-table v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
+        <el-table-column label="客户手机号" width="140" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span v-if="row">{{ row.memberMobile || row.mobile || "-" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="规则名称" width="150" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span v-if="row">{{ row.ruleName || findRuleName(row.ruleKey) || "-" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="变化经验值" width="120">
+          <template #default="{ row }">
+            <span v-if="row">{{ formatExperienceValue(row) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="经验值限额" width="120">
+          <template #default="{ row }">
+            <span v-if="row">{{ formatMaxValue(row) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作说明" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span v-if="row">{{ row.content || row.remark || row.description || "-" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="170" />
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -86,67 +109,20 @@ export default {
         memberMobile: "",
         ruleKey: "",
       },
-      columns: [
-        {
-          title: "客户手机号",
-          key: "memberMobile",
-          width: 140,
-          tooltip: true,
-          render: (h, params) => {
-            const v = params.row.memberMobile || params.row.mobile || "-";
-            return h("span", v);
-          },
-        },
-        {
-          title: "规则名称",
-          key: "ruleName",
-          width: 150,
-          tooltip: true,
-          render: (h, params) => {
-            const text = params.row.ruleName || this.findRuleName(params.row.ruleKey) || "-";
-            return h("span", text);
-          },
-        },
-        {
-          title: "变化经验值",
-          key: "value",
-          width: 120,
-          render: (h, params) => {
-            const v =
-              params.row.value ??
-              params.row.variableExperience ??
-              params.row.experience ??
-              params.row.variableValue;
-            return h("span", v == null ? "-" : v);
-          },
-        },
-        {
-          title: "经验值限额",
-          key: "maxValue",
-          width: 120,
-          render: (h, params) => {
-            const v = params.row.maxValue ?? params.row.maxExperience ?? params.row.limitValue;
-            return h("span", v == null ? "-" : v);
-          },
-        },
-        {
-          title: "操作说明",
-          key: "content",
-          minWidth: 200,
-          tooltip: true,
-          render: (h, params) => {
-            const text = params.row.content || params.row.remark || params.row.description || "-";
-            return h("span", text);
-          },
-        },
-        { title: "创建时间", key: "createTime", width: 170 },
-      ],
     };
   },
   mounted() {
     this.init();
   },
   methods: {
+    formatExperienceValue(row) {
+      const v = row.value ?? row.variableExperience ?? row.experience ?? row.variableValue;
+      return v == null ? "-" : v;
+    },
+    formatMaxValue(row) {
+      const v = row.maxValue ?? row.maxExperience ?? row.limitValue;
+      return v == null ? "-" : v;
+    },
     findRuleName(ruleKey) {
       const hit = this.ruleOptions.find((item) => item.value === ruleKey);
       return hit ? hit.label : "";
diff --git a/manager/src/views/member/grade/experience-setting.vue b/manager/src/views/member/grade/experience-setting.vue
index 8056a776..08d9dfb5 100644
--- a/manager/src/views/member/grade/experience-setting.vue
+++ b/manager/src/views/member/grade/experience-setting.vue
@@ -1,10 +1,226 @@
 <template>
   <div class="experience-setting">
-    <Card>
-      <Form :label-width="120" label-position="right">
-        <Table :loading="loading" :columns="columns" :data="form.items" class="mt_10 experience-table"></Table>
-        <FormItem label="经验值说明" style="margin-top: 16px" class="desc-item">
-          <Input
+    <el-card>
+      <el-form label-width="120px" label-position="right">
+        <el-table
+          v-loading="loading"
+          :data="form.items"
+          class="mt_10 experience-table"
+          style="width: 100%"
+        >
+          <el-table-column label="是否开启" width="90" align="center">
+            <template #default="{ row, $index }">
+              <el-checkbox
+                v-if="row"
+                :model-value="!!form.items[$index].enabled"
+                @change="(checked) => updateRuleEnabled($index, checked)"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="ruleName" label="类型" width="160" />
+          <el-table-column label="经验值(1-100)" min-width="700">
+            <template #default="{ row, $index }">
+              <template v-if="row">
+                <div v-if="row.ruleKey === 'REGISTER'" class="rule-cell">
+                  <div class="rule-row">
+                    <span class="rule-label">获得经验值:</span>
+                    <el-input
+                      :model-value="formatInputValue(form.items[$index].value)"
+                      style="width: 120px"
+                      @input="(val) => updateRuleValue($index, val)"
+                      @blur="() => commitRuleValue($index)"
+                    />
+                  </div>
+                  <div class="rule-tip">会员注册成功后可获得经验值</div>
+                </div>
+
+                <div v-else-if="row.ruleKey === 'SHARE'" class="rule-cell">
+                  <div class="rule-row rule-row-wrap">
+                    <div class="rule-inline">
+                      <span class="rule-label">分享商品详情页获得经验值：</span>
+                      <el-input
+                        :model-value="formatInputValue(form.items[$index].value)"
+                        style="width: 120px"
+                        @input="(val) => updateRuleValue($index, val)"
+                        @blur="() => commitRuleValue($index)"
+                      />
+                    </div>
+                    <div class="rule-inline">
+                      <span class="rule-label">可获得经验值限额：</span>
+                      <el-input
+                        :model-value="formatInputValue(form.items[$index].maxValue)"
+                        style="width: 120px"
+                        @input="(val) => updateRuleMaxValue($index, val)"
+                        @blur="() => commitRuleMaxValue($index)"
+                      />
+                    </div>
+                  </div>
+                  <div class="rule-tip">会员分享商城页面可获得的经验值</div>
+                </div>
+
+                <div v-else-if="row.ruleKey === 'COMMENT'" class="rule-cell">
+                  <div class="rule-row rule-row-wrap">
+                    <span class="rule-label">对已购买商品完成提交评论获得经验值：</span>
+                    <el-input
+                      :model-value="formatInputValue(form.items[$index].value)"
+                      style="width: 120px"
+                      @input="(val) => updateRuleValue($index, val)"
+                      @blur="() => commitRuleValue($index)"
+                    />
+                  </div>
+                  <div class="rule-tip">仅针对评论字数大于30字的评论进行发放</div>
+                </div>
+
+                <div v-else-if="row.ruleKey === 'FOLLOW_STORE'" class="rule-cell">
+                  <div class="rule-row rule-row-wrap">
+                    <div class="rule-inline">
+                      <span class="rule-label">获得经验值：</span>
+                      <el-input
+                        :model-value="formatInputValue(form.items[$index].value)"
+                        style="width: 120px"
+                        @input="(val) => updateRuleValue($index, val)"
+                        @blur="() => commitRuleValue($index)"
+                      />
+                    </div>
+                    <div class="rule-inline">
+                      <span class="rule-label">可获得经验值限额：</span>
+                      <el-input
+                        :model-value="formatInputValue(form.items[$index].maxValue)"
+                        style="width: 120px"
+                        @input="(val) => updateRuleMaxValue($index, val)"
+                        @blur="() => commitRuleMaxValue($index)"
+                      />
+                    </div>
+                  </div>
+                  <div class="rule-tip">关注店铺可获得经验值，每个客户D相同店铺仅第一次关注可进行获得</div>
+                </div>
+
+                <div v-else-if="row.ruleKey === 'PROFILE'" class="rule-cell">
+                  <div class="rule-row rule-row-wrap">
+                    <span class="rule-label">获得经验值：</span>
+                    <el-input
+                      :model-value="formatInputValue(form.items[$index].value)"
+                      style="width: 120px"
+                      @input="(val) => updateRuleValue($index, val)"
+                      @blur="() => commitRuleValue($index)"
+                    />
+                  </div>
+                  <div class="rule-tip">完善个人基本信息可获得经验值，每个会员仅可获得一次</div>
+                </div>
+
+                <div v-else-if="row.ruleKey === 'BIND_WECHAT'" class="rule-cell">
+                  <div class="rule-row rule-row-wrap">
+                    <span class="rule-label">获取经验值：</span>
+                    <el-input
+                      :model-value="formatInputValue(form.items[$index].value)"
+                      style="width: 120px"
+                      @input="(val) => updateRuleValue($index, val)"
+                      @blur="() => commitRuleValue($index)"
+                    />
+                  </div>
+                  <div class="rule-tip">绑定微信成功获得经验值，每个会员仅可获得一次</div>
+                </div>
+
+                <div v-else-if="row.ruleKey === 'ADD_ADDRESS'" class="rule-cell">
+                  <div class="rule-row rule-row-wrap">
+                    <span class="rule-label">获取经验值：</span>
+                    <el-input
+                      :model-value="formatInputValue(form.items[$index].value)"
+                      style="width: 120px"
+                      @input="(val) => updateRuleValue($index, val)"
+                      @blur="() => commitRuleValue($index)"
+                    />
+                  </div>
+                  <div class="rule-tip">添加收货地址后获得经验值，每个会员仅可获得一次</div>
+                </div>
+
+                <div v-else-if="row.ruleKey === 'SHARE_REGISTER'" class="rule-cell">
+                  <div class="rule-row rule-row-wrap">
+                    <div class="rule-inline">
+                      <span class="rule-label">获取的经验值：</span>
+                      <el-input
+                        :model-value="formatInputValue(form.items[$index].value)"
+                        style="width: 120px"
+                        @input="(val) => updateRuleValue($index, val)"
+                        @blur="() => commitRuleValue($index)"
+                      />
+                    </div>
+                    <div class="rule-inline">
+                      <span class="rule-label">可获得经验值限额：</span>
+                      <el-input
+                        :model-value="formatInputValue(form.items[$index].maxValue)"
+                        style="width: 120px"
+                        @input="(val) => updateRuleMaxValue($index, val)"
+                        @blur="() => commitRuleMaxValue($index)"
+                      />
+                    </div>
+                  </div>
+                  <div class="rule-tip">仅被注册成功后才可获得相应奖励经验值</div>
+                </div>
+
+                <div v-else-if="row.ruleKey === 'SHARE_BUY'" class="rule-cell">
+                  <div class="rule-row rule-row-wrap">
+                    <div class="rule-inline">
+                      <span class="rule-label">获取的经验值：</span>
+                      <el-input
+                        :model-value="formatInputValue(form.items[$index].value)"
+                        style="width: 120px"
+                        @input="(val) => updateRuleValue($index, val)"
+                        @blur="() => commitRuleValue($index)"
+                      />
+                    </div>
+                    <div class="rule-inline">
+                      <span class="rule-label">可获得经验值限额：</span>
+                      <el-input
+                        :model-value="formatInputValue(form.items[$index].maxValue)"
+                        style="width: 120px"
+                        @input="(val) => updateRuleMaxValue($index, val)"
+                        @blur="() => commitRuleMaxValue($index)"
+                      />
+                    </div>
+                  </div>
+                  <div class="rule-tip">仅被购买成功后才可获得相应奖励经验值</div>
+                </div>
+
+                <div v-else-if="row.ruleKey === 'SIGN_IN'" class="rule-cell">
+                  <div class="rule-row rule-row-wrap">
+                    <span class="rule-label">获取的经验值：</span>
+                    <el-input
+                      :model-value="formatInputValue(form.items[$index].value)"
+                      style="width: 120px"
+                      @input="(val) => updateRuleValue($index, val)"
+                      @blur="() => commitRuleValue($index)"
+                    />
+                  </div>
+                  <div class="rule-tip">客户每日签到后可获的经验值</div>
+                </div>
+
+                <div v-else-if="row.ruleKey === 'CONSUME'" class="rule-cell">
+                  <div class="rule-row rule-row-wrap">
+                    <span class="rule-label">1元获取经验值：</span>
+                    <el-input
+                      :model-value="formatInputValue(form.items[$index].value)"
+                      style="width: 120px"
+                      @input="(val) => updateRuleValue($index, val)"
+                      @blur="() => commitRuleValue($index)"
+                    />
+                  </div>
+                  <div class="rule-tip">客户消费1元可获取经验值，向下取整</div>
+                </div>
+
+                <el-input
+                  v-else
+                  :model-value="formatInputValue(form.items[$index].value)"
+                  style="width: 120px"
+                  @input="(val) => updateRuleValue($index, val)"
+                  @blur="() => commitRuleValue($index)"
+                />
+              </template>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-form-item label="经验值说明" style="margin-top: 16px" class="desc-item">
+          <el-input
             v-model="form.description"
             type="textarea"
             :rows="4"
@@ -12,12 +228,12 @@
             show-word-limit
             placeholder="请输入经验值说明"
           />
-        </FormItem>
-        <FormItem>
-          <Button type="primary" :loading="submitLoading" @click="submit">保存</Button>
-        </FormItem>
-      </Form>
-    </Card>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :loading="submitLoading" @click="submit">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
   </div>
 </template>
 
@@ -58,340 +274,33 @@ export default {
       loading: false,
       submitLoading: false,
       form: defaultForm(),
-      columns: [
-        {
-          title: "是否开启",
-          key: "enabled",
-          width: 90,
-          align: "center",
-          render: (h, params) => {
-            return h("Checkbox", {
-              props: { value: !!this.form.items[params.index].enabled },
-              on: {
-                "on-change": (checked) => {
-                  this.updateRuleEnabled(params.index, checked);
-                },
-              },
-            });
-          },
-        },
-        {
-          title: "类型",
-          key: "ruleName",
-          width: 160,
-        },
-        {
-          title: "经验值(1-100)",
-          key: "value",
-          minWidth: 700,
-          render: (h, params) => {
-            const row = this.form.items[params.index] || {};
-            const inputNode = h("Input", {
-              style: { width: "120px" },
-              props: {
-                value: row.value == null ? "" : String(row.value),
-                number: true,
-              },
-              on: {
-                input: (val) => {
-                  this.updateRuleValue(params.index, val);
-                },
-                "on-change": (v) => {
-                  this.updateRuleValue(params.index, v);
-                },
-                "on-blur": () => {
-                  this.commitRuleValue(params.index);
-                },
-              },
-            });
-            const maxInputNode = h("Input", {
-              style: { width: "120px" },
-              props: {
-                value: row.maxValue == null ? "" : String(row.maxValue),
-                number: true,
-              },
-              on: {
-                input: (val) => {
-                  this.updateRuleMaxValue(params.index, val);
-                },
-                "on-change": (v) => {
-                  this.updateRuleMaxValue(params.index, v);
-                },
-                "on-blur": () => {
-                  this.commitRuleMaxValue(params.index);
-                },
-              },
-            });
-            if (params.row.ruleKey === "REGISTER") {
-              return h(
-                "div",
-                { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
-                [
-                  h(
-                    "div",
-                    { style: { display: "flex", alignItems: "center" } },
-                    [h("span", { style: { marginRight: "8px" } }, "获得经验值:"), inputNode]
-                  ),
-                  h(
-                    "div",
-                    { style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
-                    "会员注册成功后可获得经验值"
-                  ),
-                ]
-              );
-            }
-            if (params.row.ruleKey === "SHARE") {
-              return h(
-                "div",
-                { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
-                [
-                  h(
-                    "div",
-                    { style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
-                    [
-                      h(
-                        "div",
-                        { style: { display: "flex", alignItems: "center", marginRight: "16px" } },
-                        [h("span", { style: { marginRight: "8px" } }, "分享商品详情页获得经验值："), inputNode]
-                      ),
-                      h(
-                        "div",
-                        { style: { display: "flex", alignItems: "center" } },
-                        [h("span", { style: { marginRight: "8px" } }, "可获得经验值限额："), maxInputNode]
-                      ),
-                    ]
-                  ),
-                  h(
-                    "div",
-                    { style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
-                    "会员分享商城页面可获得的经验值"
-                  ),
-                ]
-              );
-            }
-            if (params.row.ruleKey === "COMMENT") {
-              return h(
-                "div",
-                { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
-                [
-                  h(
-                    "div",
-                    { style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
-                    [h("span", { style: { marginRight: "8px" } }, "对已购买商品完成提交评论获得经验值："), inputNode]
-                  ),
-                  h(
-                    "div",
-                    { style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
-                    "仅针对评论字数大于30字的评论进行发放"
-                  ),
-                ]
-              );
-            }
-            if (params.row.ruleKey === "FOLLOW_STORE") {
-              return h(
-                "div",
-                { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
-                [
-                  h(
-                    "div",
-                    { style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
-                    [
-                      h(
-                        "div",
-                        { style: { display: "flex", alignItems: "center", marginRight: "16px" } },
-                        [h("span", { style: { marginRight: "8px" } }, "获得经验值："), inputNode]
-                      ),
-                      h(
-                        "div",
-                        { style: { display: "flex", alignItems: "center" } },
-                        [h("span", { style: { marginRight: "8px" } }, "可获得经验值限额："), maxInputNode]
-                      ),
-                    ]
-                  ),
-                  h(
-                    "div",
-                    { style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
-                    "关注店铺可获得经验值，每个客户D相同店铺仅第一次关注可进行获得"
-                  ),
-                ]
-              );
-            }
-            if (params.row.ruleKey === "PROFILE") {
-              return h(
-                "div",
-                { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
-                [
-                  h(
-                    "div",
-                    { style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
-                    [h("span", { style: { marginRight: "8px" } }, "获得经验值："), inputNode]
-                  ),
-                  h(
-                    "div",
-                    { style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
-                    "完善个人基本信息可获得经验值，每个会员仅可获得一次"
-                  ),
-                ]
-              );
-            }
-            if (params.row.ruleKey === "BIND_WECHAT") {
-              return h(
-                "div",
-                { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
-                [
-                  h(
-                    "div",
-                    { style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
-                    [h("span", { style: { marginRight: "8px" } }, "获取经验值："), inputNode]
-                  ),
-                  h(
-                    "div",
-                    { style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
-                    "绑定微信成功获得经验值，每个会员仅可获得一次"
-                  ),
-                ]
-              );
-            }
-            if (params.row.ruleKey === "ADD_ADDRESS") {
-              return h(
-                "div",
-                { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
-                [
-                  h(
-                    "div",
-                    { style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
-                    [h("span", { style: { marginRight: "8px" } }, "获取经验值："), inputNode]
-                  ),
-                  h(
-                    "div",
-                    { style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
-                    "添加收货地址后获得经验值，每个会员仅可获得一次"
-                  ),
-                ]
-              );
-            }
-            if (params.row.ruleKey === "SHARE_REGISTER") {
-              return h(
-                "div",
-                { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
-                [
-                  h(
-                    "div",
-                    { style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
-                    [
-                      h(
-                        "div",
-                        { style: { display: "flex", alignItems: "center", marginRight: "16px" } },
-                        [h("span", { style: { marginRight: "8px" } }, "获取的经验值："), inputNode]
-                      ),
-                      h(
-                        "div",
-                        { style: { display: "flex", alignItems: "center" } },
-                        [h("span", { style: { marginRight: "8px" } }, "可获得经验值限额："), maxInputNode]
-                      ),
-                    ]
-                  ),
-                  h(
-                    "div",
-                    { style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
-                    "仅被注册成功后才可获得相应奖励经验值"
-                  ),
-                ]
-              );
-            }
-            if (params.row.ruleKey === "SHARE_BUY") {
-              return h(
-                "div",
-                { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
-                [
-                  h(
-                    "div",
-                    { style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
-                    [
-                      h(
-                        "div",
-                        { style: { display: "flex", alignItems: "center", marginRight: "16px" } },
-                        [h("span", { style: { marginRight: "8px" } }, "获取的经验值："), inputNode]
-                      ),
-                      h(
-                        "div",
-                        { style: { display: "flex", alignItems: "center" } },
-                        [h("span", { style: { marginRight: "8px" } }, "可获得经验值限额："), maxInputNode]
-                      ),
-                    ]
-                  ),
-                  h(
-                    "div",
-                    { style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
-                    "仅被购买成功后才可获得相应奖励经验值"
-                  ),
-                ]
-              );
-            }
-            if (params.row.ruleKey === "SIGN_IN") {
-              return h(
-                "div",
-                { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
-                [
-                  h(
-                    "div",
-                    { style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
-                    [h("span", { style: { marginRight: "8px" } }, "获取的经验值："), inputNode]
-                  ),
-                  h(
-                    "div",
-                    { style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
-                    "客户每日签到后可获的经验值"
-                  ),
-                ]
-              );
-            }
-            if (params.row.ruleKey === "CONSUME") {
-              return h(
-                "div",
-                { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
-                [
-                  h(
-                    "div",
-                    { style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
-                    [h("span", { style: { marginRight: "8px" } }, "1元获取经验值："), inputNode]
-                  ),
-                  h(
-                    "div",
-                    { style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
-                    "客户消费1元可获取经验值，向下取整"
-                  ),
-                ]
-              );
-            }
-            return inputNode;
-          },
-        },
-      ],
     };
   },
   mounted() {
     this.loadData();
   },
   methods: {
+    formatInputValue(v) {
+      return v == null ? "" : String(v);
+    },
     getRawInputValue(v) {
       return v && v.target ? v.target.value : v;
     },
     updateRuleEnabled(index, enabled) {
       const item = this.form.items[index] || {};
-      this.$set(this.form.items, index, {
+      this.form.items[index] = {
         ...item,
         enabled: !!enabled,
-      });
+      };
     },
     updateRuleValue(index, v) {
       const raw = this.getRawInputValue(v);
       const next = Number(raw);
       const item = this.form.items[index] || {};
-      this.$set(this.form.items, index, {
+      this.form.items[index] = {
         ...item,
         value: Number.isFinite(next) ? next : null,
-      });
+      };
     },
     commitRuleValue(index) {
       const item = this.form.items[index] || {};
@@ -402,41 +311,41 @@ export default {
         else if (next > 100) value = 100;
         else value = Math.floor(next);
       }
-      this.$set(this.form.items, index, {
+      this.form.items[index] = {
         ...item,
         value,
-      });
+      };
     },
     updateRuleMaxValue(index, v) {
       const raw = this.getRawInputValue(v);
       const item = this.form.items[index] || {};
       if (raw == null || raw === "") {
-        this.$set(this.form.items, index, {
+        this.form.items[index] = {
           ...item,
           maxValue: null,
-        });
+        };
         return;
       }
       const next = Number(raw);
-      this.$set(this.form.items, index, {
+      this.form.items[index] = {
         ...item,
         maxValue: Number.isFinite(next) ? next : null,
-      });
+      };
     },
     commitRuleMaxValue(index) {
       const item = this.form.items[index] || {};
       if (item.maxValue == null || item.maxValue === "") {
-        this.$set(this.form.items, index, {
+        this.form.items[index] = {
           ...item,
           maxValue: null,
-        });
+        };
         return;
       }
       const next = Number(item.maxValue);
-      this.$set(this.form.items, index, {
+      this.form.items[index] = {
         ...item,
         maxValue: Number.isFinite(next) && next >= 1 ? Math.floor(next) : null,
-      });
+      };
     },
     normalizeConfig(val) {
       if (!val) return {};
@@ -535,21 +444,52 @@ export default {
   padding: 2px 0;
 }
 
-::v-deep .experience-table .ivu-table th {
+.rule-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.rule-row {
+  display: flex;
+  align-items: center;
+}
+
+.rule-row-wrap {
+  flex-wrap: wrap;
+}
+
+.rule-inline {
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+}
+
+.rule-label {
+  margin-right: 8px;
+}
+
+.rule-tip {
+  margin-top: 6px;
+  color: #808695;
+  font-size: 12px;
+}
+
+:deep(.experience-table .el-table__header th) {
   background: #fafbfc;
 }
 
-::v-deep .experience-table .ivu-table td {
+:deep(.experience-table .el-table__body td) {
   padding-top: 12px;
   padding-bottom: 12px;
 }
 
-::v-deep .experience-table .ivu-table-cell {
+:deep(.experience-table .cell) {
   font-size: 13px;
   line-height: 1.7;
 }
 
-::v-deep .desc-item .ivu-form-item-label {
+:deep(.desc-item .el-form-item__label) {
   font-size: 16px;
   font-weight: 600;
 }
diff --git a/manager/src/views/member/grade/index.vue b/manager/src/views/member/grade/index.vue
index 1ac347b8..694d2105 100644
--- a/manager/src/views/member/grade/index.vue
+++ b/manager/src/views/member/grade/index.vue
@@ -1,120 +1,180 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation padding-row">
-        <Button type="primary" @click="openAdd">添加客户等级</Button>
-      </Row>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        class="mt_10"
-      ></Table>
-    </Card>
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="openAdd">添加客户等级</el-button>
+      </div>
 
-    <Modal v-model="addFlag" title="添加客户等级" width="720" :z-index="950" :mask-closable="false">
-      <Form ref="addForm" :model="formAdd" :rules="rules" :label-width="110">
-        <FormItem label="等级名称" prop="gradeName">
-          <Input v-model="formAdd.gradeName" maxlength="50" placeholder="请输入等级名称" />
-        </FormItem>
-        <FormItem label="是否默认" prop="isDefault">
-          <RadioGroup v-model="formAdd.isDefault">
-            <Radio :label="true">是</Radio>
-            <Radio :label="false">否</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="等级图标" prop="gradeImage">
-          <upload-pic-input v-model="formAdd.gradeImage"></upload-pic-input>
-        </FormItem>
-        <FormItem label="等级背景图" prop="gradeBackground">
-          <upload-pic-input v-model="formAdd.gradeBackground"></upload-pic-input>
-        </FormItem>
-        <FormItem label="字体颜色" prop="gradeFontColor">
-          <Input v-model="formAdd.gradeFontColor" maxlength="20" placeholder="如：#333333" />
-        </FormItem>
-        <FormItem label="所需经验值" prop="requiredExperience">
-          <InputNumber v-model="formAdd.requiredExperience" :min="1" :precision="0" style="width: 220px"></InputNumber>
-        </FormItem>
-        <FormItem label="等级排序" prop="gradeSort">
-          <InputNumber v-model="formAdd.gradeSort" :min="1" :max="9999" :precision="0" style="width: 220px"></InputNumber>
-        </FormItem>
-        <FormItem label="等级开关" prop="gradeState">
-          <RadioGroup v-model="formAdd.gradeState">
-            <Radio label="OPEN">开启</Radio>
-            <Radio label="CLOSE">关闭</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="关联权益" prop="benefitIds">
-          <Select
-            :value="addBenefitOrder"
+      <el-table v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
+        <el-table-column prop="gradeName" label="等级名称" width="130" show-overflow-tooltip />
+        <el-table-column label="默认等级" width="95">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="row.isDefault === true ? 'success' : 'info'">
+              {{ row.isDefault === true ? "是" : "否" }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="等级图标" width="100">
+          <template #default="{ row }">
+            <span v-if="row && !row.gradeImage">-</span>
+            <img
+              v-else-if="row"
+              :src="row.gradeImage"
+              alt="等级图标"
+              style="width: 48px; height: 48px; object-fit: contain; border: 1px solid #dcdee2; border-radius: 4px; background: #fff"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="等级背景图" width="120">
+          <template #default="{ row }">
+            <span v-if="row && !row.gradeBackground">-</span>
+            <img
+              v-else-if="row"
+              :src="row.gradeBackground"
+              alt="等级背景图"
+              style="width: 64px; height: 40px; object-fit: cover; border: 1px solid #dcdee2; border-radius: 4px; background: #fff"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="requiredExperience" label="所需经验值" width="110" />
+        <el-table-column prop="gradeSort" label="等级排序" width="95" />
+        <el-table-column label="状态" width="118" align="center">
+          <template #default="{ row }">
+            <el-switch
+              v-if="row"
+              :model-value="row.gradeState === 'OPEN'"
+              inline-prompt
+              active-text="开启"
+              inactive-text="关闭"
+              :loading="!!row._gradeStateLoading"
+              @change="(checked) => onGradeStateSwitch(row, checked)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="130" align="center">
+          <template #default="{ row }">
+            <div v-if="row" class="ops" style="display: flex; justify-content: center">
+              <a class="link-text" @click="openEdit(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog v-model="addFlag" title="添加客户等级" width="720px" :z-index="950" :close-on-click-modal="false" destroy-on-close>
+      <el-form ref="addForm" :model="formAdd" :rules="rules" label-width="110px">
+        <el-form-item label="等级名称" prop="gradeName">
+          <el-input v-model="formAdd.gradeName" maxlength="50" placeholder="请输入等级名称" />
+        </el-form-item>
+        <el-form-item label="是否默认" prop="isDefault">
+          <el-radio-group v-model="formAdd.isDefault">
+            <el-radio :value="true">是</el-radio>
+            <el-radio :value="false">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="等级图标" prop="gradeImage">
+          <upload-pic-input v-model="formAdd.gradeImage" />
+        </el-form-item>
+        <el-form-item label="等级背景图" prop="gradeBackground">
+          <upload-pic-input v-model="formAdd.gradeBackground" />
+        </el-form-item>
+        <el-form-item label="字体颜色" prop="gradeFontColor">
+          <el-input v-model="formAdd.gradeFontColor" maxlength="20" placeholder="如：#333333" />
+        </el-form-item>
+        <el-form-item label="所需经验值" prop="requiredExperience">
+          <el-input-number v-model="formAdd.requiredExperience" :min="1" :precision="0" style="width: 220px" />
+        </el-form-item>
+        <el-form-item label="等级排序" prop="gradeSort">
+          <el-input-number v-model="formAdd.gradeSort" :min="1" :max="9999" :precision="0" style="width: 220px" />
+        </el-form-item>
+        <el-form-item label="等级开关" prop="gradeState">
+          <el-radio-group v-model="formAdd.gradeState">
+            <el-radio value="OPEN">开启</el-radio>
+            <el-radio value="CLOSE">关闭</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="关联权益" prop="benefitIds">
+          <el-select
+            :model-value="addBenefitOrder"
             multiple
             filterable
             placeholder="请选择客户权益"
             style="width: 100%"
-            @on-change="onAddBenefitIdsChange"
+            @change="onAddBenefitIdsChange"
           >
-            <Option v-for="b in benefitOptions" :key="b.id" :value="String(b.id)">{{ benefitOptionLabel(b) }}</Option>
-          </Select>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button @click="addFlag = false">取消</Button>
-        <Button type="primary" :loading="submitAddLoading" @click="submitAdd">确定</Button>
-      </div>
-    </Modal>
+            <el-option
+              v-for="b in benefitOptions"
+              :key="b.id"
+              :value="String(b.id)"
+              :label="benefitOptionLabel(b)"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="addFlag = false">取消</el-button>
+        <el-button type="primary" :loading="submitAddLoading" @click="submitAdd">确定</el-button>
+      </template>
+    </el-dialog>
 
-    <Modal v-model="editFlag" title="编辑客户等级" width="720" :z-index="950" :mask-closable="false">
-      <Form ref="editForm" :model="formEdit" :rules="rules" :label-width="110">
-        <Input v-model="formEdit.id" v-show="false" />
-        <FormItem label="等级名称" prop="gradeName">
-          <Input v-model="formEdit.gradeName" maxlength="50" placeholder="请输入等级名称" />
-        </FormItem>
-        <FormItem label="是否默认" prop="isDefault">
-          <RadioGroup v-model="formEdit.isDefault">
-            <Radio :label="true">是</Radio>
-            <Radio :label="false">否</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="等级图标" prop="gradeImage">
-          <upload-pic-input v-model="formEdit.gradeImage"></upload-pic-input>
-        </FormItem>
-        <FormItem label="等级背景图" prop="gradeBackground">
-          <upload-pic-input v-model="formEdit.gradeBackground"></upload-pic-input>
-        </FormItem>
-        <FormItem label="字体颜色" prop="gradeFontColor">
-          <Input v-model="formEdit.gradeFontColor" maxlength="20" placeholder="如：#333333" />
-        </FormItem>
-        <FormItem label="所需经验值" prop="requiredExperience">
-          <InputNumber v-model="formEdit.requiredExperience" :min="1" :precision="0" style="width: 220px"></InputNumber>
-        </FormItem>
-        <FormItem label="等级排序" prop="gradeSort">
-          <InputNumber v-model="formEdit.gradeSort" :min="1" :max="9999" :precision="0" style="width: 220px"></InputNumber>
-        </FormItem>
-        <FormItem label="等级开关" prop="gradeState">
-          <RadioGroup v-model="formEdit.gradeState">
-            <Radio label="OPEN">开启</Radio>
-            <Radio label="CLOSE">关闭</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="关联权益" prop="benefitIds">
-          <Select
-            :value="editBenefitOrder"
+    <el-dialog v-model="editFlag" title="编辑客户等级" width="720px" :z-index="950" :close-on-click-modal="false" destroy-on-close>
+      <el-form ref="editForm" :model="formEdit" :rules="rules" label-width="110px">
+        <el-input v-model="formEdit.id" style="display: none" />
+        <el-form-item label="等级名称" prop="gradeName">
+          <el-input v-model="formEdit.gradeName" maxlength="50" placeholder="请输入等级名称" />
+        </el-form-item>
+        <el-form-item label="是否默认" prop="isDefault">
+          <el-radio-group v-model="formEdit.isDefault">
+            <el-radio :value="true">是</el-radio>
+            <el-radio :value="false">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="等级图标" prop="gradeImage">
+          <upload-pic-input v-model="formEdit.gradeImage" />
+        </el-form-item>
+        <el-form-item label="等级背景图" prop="gradeBackground">
+          <upload-pic-input v-model="formEdit.gradeBackground" />
+        </el-form-item>
+        <el-form-item label="字体颜色" prop="gradeFontColor">
+          <el-input v-model="formEdit.gradeFontColor" maxlength="20" placeholder="如：#333333" />
+        </el-form-item>
+        <el-form-item label="所需经验值" prop="requiredExperience">
+          <el-input-number v-model="formEdit.requiredExperience" :min="1" :precision="0" style="width: 220px" />
+        </el-form-item>
+        <el-form-item label="等级排序" prop="gradeSort">
+          <el-input-number v-model="formEdit.gradeSort" :min="1" :max="9999" :precision="0" style="width: 220px" />
+        </el-form-item>
+        <el-form-item label="等级开关" prop="gradeState">
+          <el-radio-group v-model="formEdit.gradeState">
+            <el-radio value="OPEN">开启</el-radio>
+            <el-radio value="CLOSE">关闭</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="关联权益" prop="benefitIds">
+          <el-select
+            :model-value="editBenefitOrder"
             multiple
             filterable
             placeholder="请选择客户权益"
             style="width: 100%"
-            @on-change="onEditBenefitIdsChange"
+            @change="onEditBenefitIdsChange"
           >
-            <Option v-for="b in benefitOptions" :key="b.id" :value="String(b.id)">{{ benefitOptionLabel(b) }}</Option>
-          </Select>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button @click="editFlag = false">取消</Button>
-        <Button type="primary" :loading="submitEditLoading" @click="submitEdit">确定</Button>
-      </div>
-    </Modal>
+            <el-option
+              v-for="b in benefitOptions"
+              :key="b.id"
+              :value="String(b.id)"
+              :label="benefitOptionLabel(b)"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="editFlag = false">取消</el-button>
+        <el-button type="primary" :loading="submitEditLoading" @click="submitEdit">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -135,7 +195,6 @@ const buildDefaultForm = () => ({
   benefitIds: "",
 });
 
-/** 权益多选：新勾选追加到末尾，取消勾选移除，保持已有顺序 */
 function syncOrderedBenefitIds(prevOrder, selected) {
   const sel = Array.isArray(selected) ? selected.map((id) => String(id)) : [];
   const out = [];
@@ -157,144 +216,6 @@ export default {
   data() {
     return {
       loading: true,
-      columns: [
-        {
-          title: "等级名称",
-          key: "gradeName",
-          width: 130,
-          tooltip: true,
-        },
-        {
-          title: "默认等级",
-          key: "isDefault",
-          width: 95,
-          render: (h, params) => {
-            const yes = params.row.isDefault === true;
-            return h(
-              "Tag",
-              {
-                props: {
-                  color: yes ? "success" : "default",
-                },
-              },
-              yes ? "是" : "否"
-            );
-          },
-        },
-        {
-          title: "等级图标",
-          key: "gradeImage",
-          width: 100,
-          render: (h, params) => {
-            if (!params.row.gradeImage) return h("span", "-");
-            return h("img", {
-              attrs: {
-                src: params.row.gradeImage,
-                alt: "等级图标",
-              },
-              style: {
-                width: "48px",
-                height: "48px",
-                objectFit: "contain",
-                border: "1px solid #dcdee2",
-                borderRadius: "4px",
-                background: "#fff",
-              },
-            });
-          },
-        },
-        {
-          title: "等级背景图",
-          key: "gradeBackground",
-          width: 120,
-          render: (h, params) => {
-            if (!params.row.gradeBackground) return h("span", "-");
-            return h("img", {
-              attrs: {
-                src: params.row.gradeBackground,
-                alt: "等级背景图",
-              },
-              style: {
-                width: "64px",
-                height: "40px",
-                objectFit: "cover",
-                border: "1px solid #dcdee2",
-                borderRadius: "4px",
-                background: "#fff",
-              },
-            });
-          },
-        },
-        {
-          title: "所需经验值",
-          key: "requiredExperience",
-          width: 110,
-        },
-        {
-          title: "等级排序",
-          key: "gradeSort",
-          width: 95,
-        },
-        {
-          title: "状态",
-          key: "gradeState",
-          width: 118,
-          align: "center",
-          render: (h, params) => {
-            const row = params.row;
-            return h("i-switch", {
-              props: {
-                value: row.gradeState === "OPEN",
-                size: "large",
-                loading: !!row._gradeStateLoading,
-              },
-              on: {
-                "on-change": (checked) => {
-                  this.onGradeStateSwitch(row, checked);
-                },
-              },
-            }, [
-              h("span", { slot: "open" }, "开启"),
-              h("span", { slot: "close" }, "关闭"),
-            ]);
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 130,
-          render: (h, params) => {
-            const linkStyle = {
-              color: "#2d8cf0",
-              cursor: "pointer",
-              textDecoration: "none",
-            };
-            const sep = h(
-              "span",
-              { style: { margin: "0 8px", color: "#dcdee2" } },
-              "|"
-            );
-            return h(
-              "div",
-              { class: "ops", style: { display: "flex", justifyContent: "center" } },
-              [
-                h(
-                  "a",
-                  { style: linkStyle, on: { click: () => this.openEdit(params.row) } },
-                  "编辑"
-                ),
-                sep,
-                h(
-                  "a",
-                  { style: linkStyle, on: { click: () => this.remove(params.row) } },
-                  "删除"
-                ),
-              ]
-            );
-          },
-        },
-      ],
       data: [],
       addFlag: false,
       editFlag: false,
@@ -302,7 +223,6 @@ export default {
       submitEditLoading: false,
       formAdd: buildDefaultForm(),
       formEdit: buildDefaultForm(),
-      /** 关联权益 id 顺序（与 benefitIds 一致） */
       addBenefitOrder: [],
       editBenefitOrder: [],
       benefitOptions: [],
@@ -506,19 +426,19 @@ export default {
         title: "提示",
         content: `<p>确定${text}该客户等级？</p>`,
         onOk: () => {
-          this.$set(row, "_gradeStateLoading", true);
+          row._gradeStateLoading = true;
           return API_Member.updateMemberGradeState(row.id, nextState)
             .then((res) => {
-              this.$set(row, "_gradeStateLoading", false);
+              row._gradeStateLoading = false;
               if (res && res.success) {
                 this.$Message.success(`${text}成功`);
-                this.$set(row, "gradeState", nextState);
+                row.gradeState = nextState;
               } else {
                 this.getData();
               }
             })
             .catch(() => {
-              this.$set(row, "_gradeStateLoading", false);
+              row._gradeStateLoading = false;
             });
         },
       });
@@ -545,3 +465,15 @@ export default {
   },
 };
 </script>
+<style scoped>
+.ops a {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.ops span {
+  display: inline-block;
+  margin: 0 8px;
+  color: #dcdee2;
+}
+</style>
diff --git a/manager/src/views/member/group/index.vue b/manager/src/views/member/group/index.vue
index 213b2df3..36cf060c 100644
--- a/manager/src/views/member/group/index.vue
+++ b/manager/src/views/member/group/index.vue
@@ -1,61 +1,72 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation padding-row">
-        <Button type="primary" @click="openAdd">添加分组</Button>
-      </Row>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-        class="mt_10"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="openAdd">添加分组</el-button>
+      </div>
+    </el-card>
+
+    <el-card>
+      <el-table ref="table" v-loading="loading" :data="data" border class="mt_10" style="width: 100%">
+        <el-table-column prop="groupName" label="分组名称" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="description" label="分组描述" min-width="240" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="创建时间" min-width="180" />
+        <el-table-column prop="updateTime" label="更新时间" min-width="180" />
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row" class="ops" style="display: flex; justify-content: center">
+              <a class="link-text" @click="openEdit(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
-    <Modal v-model="addFlag" title="添加分组">
-      <Form ref="addForm" :model="formAdd" :rules="rulesAdd" :label-width="90">
-        <FormItem label="分组名称" prop="groupName" style="width: 90%;">
-          <Input v-model="formAdd.groupName" maxlength="30" placeholder="请输入分组名称" />
-        </FormItem>
-        <FormItem label="分组描述" prop="description" style="width: 90%;">
-          <Input v-model="formAdd.description" maxlength="200" placeholder="请输入分组描述" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button @click="addFlag = false">取消</Button>
-        <Button type="primary" :loading="submitAddLoading" @click="submitAdd">确定</Button>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
       </div>
-    </Modal>
-    <Modal v-model="editFlag" title="编辑分组">
-      <Form ref="editForm" :model="formEdit" :rules="rulesEdit" :label-width="90">
-        <Input v-model="formEdit.id" v-show="false" />
-        <FormItem label="分组名称" prop="groupName" style="width: 90%;">
-          <Input v-model="formEdit.groupName" maxlength="30" placeholder="请输入分组名称" />
-        </FormItem>
-        <FormItem label="分组描述" prop="description" style="width: 90%;">
-          <Input v-model="formEdit.description" maxlength="200" placeholder="请输入分组描述" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button @click="editFlag = false">取消</Button>
-        <Button type="primary" :loading="submitEditLoading" @click="submitEdit">确定</Button>
-      </div>
-    </Modal>
+    </el-card>
+
+    <el-dialog v-model="addFlag" title="添加分组" width="500px" :close-on-click-modal="false" destroy-on-close>
+      <el-form ref="addForm" :model="formAdd" :rules="rulesAdd" label-width="90px">
+        <el-form-item label="分组名称" prop="groupName" style="width: 90%">
+          <el-input v-model="formAdd.groupName" maxlength="30" placeholder="请输入分组名称" />
+        </el-form-item>
+        <el-form-item label="分组描述" prop="description" style="width: 90%">
+          <el-input v-model="formAdd.description" maxlength="200" placeholder="请输入分组描述" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="addFlag = false">取消</el-button>
+        <el-button type="primary" :loading="submitAddLoading" @click="submitAdd">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="editFlag" title="编辑分组" width="500px" :close-on-click-modal="false" destroy-on-close>
+      <el-form ref="editForm" :model="formEdit" :rules="rulesEdit" label-width="90px">
+        <el-input v-model="formEdit.id" style="display: none" />
+        <el-form-item label="分组名称" prop="groupName" style="width: 90%">
+          <el-input v-model="formEdit.groupName" maxlength="30" placeholder="请输入分组名称" />
+        </el-form-item>
+        <el-form-item label="分组描述" prop="description" style="width: 90%">
+          <el-input v-model="formEdit.description" maxlength="200" placeholder="请输入分组描述" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="editFlag = false">取消</el-button>
+        <el-button type="primary" :loading="submitEditLoading" @click="submitEdit">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -71,67 +82,6 @@ export default {
         pageNumber: 1,
         pageSize: 20,
       },
-      columns: [
-        {
-          title: "分组名称",
-          key: "groupName",
-          minWidth: 160,
-          tooltip: true,
-        },
-        {
-          title: "分组描述",
-          key: "description",
-          minWidth: 240,
-          tooltip: true,
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          width: 180,
-        },
-        {
-          title: "更新时间",
-          key: "updateTime",
-          width: 180,
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 200,
-          fixed: "right",
-          render: (h, params) => {
-            const linkStyle = {
-              color: "#2d8cf0",
-              cursor: "pointer",
-              textDecoration: "none",
-            };
-            const sep = h(
-              "span",
-              { style: { margin: "0 8px", color: "#dcdee2" } },
-              "|"
-            );
-            const children = [
-              h(
-                "a",
-                { style: linkStyle, on: { click: () => this.openEdit(params.row) } },
-                "编辑"
-              ),
-              sep,
-              h(
-                "a",
-                { style: linkStyle, on: { click: () => this.remove(params.row) } },
-                "删除"
-              ),
-            ];
-            return h(
-              "div",
-              { class: "ops", style: { display: "flex", justifyContent: "center" } },
-              children
-            );
-          },
-        },
-      ],
       data: [],
       total: 0,
       addFlag: false,
@@ -148,10 +98,10 @@ export default {
         description: "",
       },
       rulesAdd: {
-        groupName: [{ required: true, message: "请输入分组名称" }],
+        groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
       },
       rulesEdit: {
-        groupName: [{ required: true, message: "请输入分组名称" }],
+        groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
       },
     };
   },
@@ -236,7 +186,7 @@ export default {
     remove(row) {
       this.$Modal.confirm({
         title: "提示",
-        content: "<p>确定删除该分组？</p>",
+        content: "确定删除该分组？",
         onOk: () => {
           API_Member.deleteMemberGroup(row.id).then((res) => {
             if (res && res.success) {
@@ -255,3 +205,16 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.ops a {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.ops span {
+  display: inline-block;
+  margin: 0 8px;
+  color: #dcdee2;
+}
+</style>
diff --git a/manager/src/views/member/list/index.vue b/manager/src/views/member/list/index.vue
index c392ef17..95152386 100644
--- a/manager/src/views/member/list/index.vue
+++ b/manager/src/views/member/list/index.vue
@@ -1,176 +1,287 @@
 <template>
   <div class="search">
-    <Card>
-      <Row @keydown.enter.native="handleSearch">
-        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-          <Form-item label="会员ID" prop="id">
-            <Input type="text" v-model="searchForm.id" placeholder="请输入会员ID" clearable style="width: 240px" />
-          </Form-item>
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="会员ID" prop="id">
+          <el-input v-model="searchForm.id" placeholder="请输入会员ID" clearable style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="会员名称" prop="username">
+          <el-input v-model="searchForm.username" placeholder="请输入会员名称" clearable style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="会员昵称" prop="nickName">
+          <el-input v-model="searchForm.nickName" placeholder="请输入会员昵称" clearable style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="联系方式" prop="mobile">
+          <el-input v-model="searchForm.mobile" placeholder="请输入会员联系方式" clearable style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="会员分组" prop="groupId">
+          <el-select v-model="searchForm.groupId" clearable filterable style="width: 240px">
+            <el-option
+              v-for="item in memberGroupList"
+              :key="item.id"
+              :value="item.id"
+              :label="item.groupName"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="会员等级" prop="gradeId">
+          <el-select v-model="searchForm.gradeId" clearable filterable style="width: 240px">
+            <el-option
+              v-for="item in memberGradeList"
+              :key="item.id"
+              :value="item.id"
+              :label="item.gradeName"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-          <Form-item label="会员名称" prop="username">
-            <Input type="text" v-model="searchForm.username" placeholder="请输入会员名称" clearable style="width: 240px" />
-          </Form-item>
-
-          <Form-item label="会员昵称" prop="nickName">
-            <Input type="text" v-model="searchForm.nickName" placeholder="请输入会员昵称" clearable style="width: 240px" />
-          </Form-item>
-
-          <Form-item label="联系方式" prop="mobile">
-            <Input type="text" v-model="searchForm.mobile" placeholder="请输入会员联系方式" clearable style="width: 240px" />
-          </Form-item>
-          <Form-item label="会员分组" prop="groupId">
-            <Select v-model="searchForm.groupId" clearable filterable style="width: 240px">
-              <Option v-for="item in memberGroupList" :value="item.id" :key="item.id">{{ item.groupName }}</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="会员等级" prop="gradeId">
-            <Select v-model="searchForm.gradeId" clearable filterable style="width: 240px">
-              <Option v-for="item in memberGradeList" :value="item.id" :key="item.id">{{ item.gradeName }}</Option>
-            </Select>
-          </Form-item>
-          <Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>
-        </Form>
-      </Row>
-      </Card>
-      <Card>
-      <Row class="operation padding-row" v-if="!selectedMember">
-        <Button @click="addMember" type="primary">添加会员</Button>
-        <Button
-          style="margin-left: 10px;"
+    <el-card>
+      <div v-if="!selectedMember" class="operation padding-row">
+        <el-button type="primary" @click="addMember">添加会员</el-button>
+        <el-button
+          style="margin-left: 10px"
           type="primary"
           :disabled="selectedRows.length === 0"
           @click="openSetMemberGroup"
-        >设定会员分组</Button>
-      </Row>
+        >设定会员分组</el-button>
+      </div>
 
-      <Table
-        :loading="loading"
-        :columns="tableColumns"
-        class="mt_10"
-        :data="data"
+      <el-table
         ref="table"
-        @on-selection-change="onSelectionChange"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
-          @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]" size="small" show-total show-elevator
-          show-sizer></Page>
-      </Row>
-    </Card>
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+        row-key="id"
+        @selection-change="onSelectionChange"
+      >
+        <el-table-column v-if="!selectedMember" type="selection" width="60" align="center" />
+        <el-table-column prop="id" label="会员ID" min-width="120" show-overflow-tooltip />
+        <el-table-column label="头像" min-width="80" align="center">
+          <template #default="{ row }">
+            <img
+              v-if="row"
+              :src="row.face || defaultPic"
+              alt="头像"
+              style="width: 30px; height: 30px; border-radius: 50%; object-fit: cover"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="username" label="会员名称" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="nickName" label="会员昵称" min-width="120" show-overflow-tooltip />
+        <el-table-column label="联系方式" min-width="130">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.mobile || "" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="注册时间" min-width="160" />
+        <el-table-column prop="lastLoginDate" label="最后登录时间" min-width="160" />
+        <el-table-column label="积分数量" min-width="120" align="left">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.point == void 0 ? "0" : row.point }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="经验值" min-width="100">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.experience == null ? "0" : row.experience }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="会员等级" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span v-if="row">{{ row.gradeName || "-" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="余额" width="120">
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.memberWallet" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row" style="display: flex; justify-content: center; align-items: center">
+              <template v-if="selectedMember">
+                <a class="link-text" @click="callback(row)">
+                  {{ row.___selected ? "已选择" : "选择" }}
+                </a>
+              </template>
+              <template v-else>
+                <a class="link-text" @click="detail(row)">查看</a>
+                <span class="op-split">|</span>
+                <el-dropdown trigger="click" @command="(cmd) => handleMoreCommand(cmd, row)">
+                  <a class="link-text">
+                    更多
+                    <el-icon style="margin-left: 4px"><ArrowDown /></el-icon>
+                  </a>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="edit">编辑会员</el-dropdown-item>
+                      <el-dropdown-item command="increaseWallet">增加余额</el-dropdown-item>
+                      <el-dropdown-item command="updatePoint">修改积分</el-dropdown-item>
+                      <el-dropdown-item command="disabled">禁用会员</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </template>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <!-- 添加用户模态框 -->
-    <Modal v-model="addFlag" title="添加会员">
-      <Form ref="addMemberForm" :model="addMemberForm" :rules="addRule" :label-width="100">
-        <FormItem label="手机号码" prop="mobile" style="width: 90%;">
-          <Input v-model="addMemberForm.mobile" maxlength="11" placeholder="请输入手机号码" />
-        </FormItem>
-        <FormItem label="会员名称" prop="username" style="width: 90%">
-          <Input v-model="addMemberForm.username" maxlength="15" placeholder="请输入会员名称" />
-        </FormItem>
-
-        <FormItem label="会员密码" prop="password" style="width: 90%">
-          <Input type="password" password v-model="addMemberForm.password" maxlength="20" placeholder="请输入会员密码" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button @click="addFlag = false">取消</Button>
-        <Button type="primary" @click="addMemberSubmit">确定</Button>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
       </div>
-    </Modal>
-    <!-- 修改模态框 -->
-    <Modal v-model="descFlag" :title="descTitle" @on-ok="handleSubmitModal" width="500">
-      <Form ref="form" :model="form" :rules="ruleValidate" :label-width="80">
+    </el-card>
 
-        <Input v-model="form.id" v-show="false"/>
+    <el-dialog v-model="addFlag" title="添加会员" width="500px" destroy-on-close>
+      <el-form ref="addMemberForm" :model="addMemberForm" :rules="addRule" label-width="100px">
+        <el-form-item label="手机号码" prop="mobile" style="width: 90%">
+          <el-input v-model="addMemberForm.mobile" maxlength="11" placeholder="请输入手机号码" />
+        </el-form-item>
+        <el-form-item label="会员名称" prop="username" style="width: 90%">
+          <el-input v-model="addMemberForm.username" maxlength="15" placeholder="请输入会员名称" />
+        </el-form-item>
+        <el-form-item label="会员密码" prop="password" style="width: 90%">
+          <el-input
+            v-model="addMemberForm.password"
+            type="password"
+            show-password
+            maxlength="20"
+            placeholder="请输入会员密码"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="addFlag = false">取消</el-button>
+        <el-button type="primary" @click="addMemberSubmit">确定</el-button>
+      </template>
+    </el-dialog>
 
-        <FormItem label="头像">
+    <el-dialog v-model="descFlag" :title="descTitle" width="500px" destroy-on-close>
+      <el-form ref="form" :model="form" :rules="ruleValidate" label-width="80px">
+        <el-input v-model="form.id" style="display: none" />
+        <el-form-item label="头像">
           <img :src="form.face || defaultPic" class="face" />
-          <Button type="text" class="upload" @click="() => {
-                this.picModelFlag = true;
-                this.$refs.ossManage.selectImage = true;
-              }">修改</Button>
-          <input type="file" style="display: none" id="file" />
-        </FormItem>
-        <FormItem label="用户名" prop="name">
-          <Input v-model="form.username" style="width: 200px" disabled />
-        </FormItem>
-        <FormItem label="用户昵称" prop="name">
-          <Input v-model="form.nickName" style="width: 200px" />
-        </FormItem>
-        <FormItem label="性别" prop="sex">
-          <RadioGroup type="button" button-style="solid" v-model="form.sex">
-            <Radio :label="1">
-              <span>男</span>
-            </Radio>
-            <Radio :label="0">
-              <span>女</span>
-            </Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="修改密码" prop="password">
-          <Input type="password" style="width: 220px" password v-model="form.newPassword" />
-        </FormItem>
-        <FormItem label="生日" prop="birthday">
-          <DatePicker type="date" format="yyyy-MM-dd" v-model="form.birthday" style="width: 220px"></DatePicker>
-        </FormItem>
-        <FormItem label="所在地" prop="mail">
-          {{ form.region || '暂无地址' }}
+          <el-button
+            type="primary"
+            link
+            class="upload"
+            @click="
+              () => {
+                picModelFlag = true;
+                $refs.ossManage.selectImage = true;
+              }
+            "
+          >修改</el-button>
+        </el-form-item>
+        <el-form-item label="用户名" prop="name">
+          <el-input v-model="form.username" style="width: 200px" disabled />
+        </el-form-item>
+        <el-form-item label="用户昵称" prop="name">
+          <el-input v-model="form.nickName" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="性别" prop="sex">
+          <el-radio-group v-model="form.sex">
+            <el-radio-button :value="1">男</el-radio-button>
+            <el-radio-button :value="0">女</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="修改密码" prop="password">
+          <el-input v-model="form.newPassword" type="password" show-password style="width: 220px" />
+        </el-form-item>
+        <el-form-item label="生日" prop="birthday">
+          <el-date-picker v-model="form.birthday" type="date" value-format="YYYY-MM-DD" style="width: 220px" />
+        </el-form-item>
+        <el-form-item label="所在地" prop="mail">
+          {{ form.region || "暂无地址" }}
+          <el-button style="margin-left: 10px" @click="$refs.map.open()">选择</el-button>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="descFlag = false">取消</el-button>
+        <el-button type="primary" @click="handleSubmitModal">确定</el-button>
+      </template>
+    </el-dialog>
 
+    <el-dialog v-model="walletIncreaseFlag" title="增加余额" width="420px" destroy-on-close>
+      <el-form ref="walletIncreaseForm" :model="walletIncreaseForm" :rules="walletIncreaseRule" label-width="90px">
+        <el-form-item label="充值金额" prop="rechargeMoney">
+          <el-input-number v-model="walletIncreaseForm.rechargeMoney" :min="0.01" :precision="2" style="width: 240px" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="walletIncreaseFlag = false">取消</el-button>
+        <el-button type="primary" :loading="walletIncreaseLoading" @click="submitWalletIncrease">确定</el-button>
+      </template>
+    </el-dialog>
 
-          <Button style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>
+    <el-dialog v-model="memberPointFlag" title="修改积分" width="420px" destroy-on-close>
+      <el-form ref="memberPointForm" :model="memberPointForm" :rules="memberPointRule" label-width="90px">
+        <el-form-item label="类型" prop="type">
+          <el-radio-group v-model="memberPointForm.type">
+            <el-radio-button value="INCREASE">增加</el-radio-button>
+            <el-radio-button value="REDUCE">减少</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="积分" prop="point">
+          <el-input-number v-model="memberPointForm.point" :min="1" :precision="0" style="width: 240px" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="memberPointFlag = false">取消</el-button>
+        <el-button type="primary" :loading="memberPointLoading" @click="submitMemberPoint">确定</el-button>
+      </template>
+    </el-dialog>
 
-        </FormItem>
-      </Form>
-    </Modal>
-    <Modal v-model="walletIncreaseFlag" title="增加余额" width="420">
-      <Form ref="walletIncreaseForm" :model="walletIncreaseForm" :rules="walletIncreaseRule" :label-width="90">
-        <FormItem label="充值金额" prop="rechargeMoney">
-          <InputNumber v-model="walletIncreaseForm.rechargeMoney" :min="0.01" :precision="2" style="width: 240px" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button @click="walletIncreaseFlag = false">取消</Button>
-        <Button type="primary" :loading="walletIncreaseLoading" @click="submitWalletIncrease">确定</Button>
-      </div>
-    </Modal>
-    <Modal v-model="memberPointFlag" title="修改积分" width="420">
-      <Form ref="memberPointForm" :model="memberPointForm" :rules="memberPointRule" :label-width="90">
-        <FormItem label="类型" prop="type">
-          <RadioGroup type="button" button-style="solid" v-model="memberPointForm.type">
-            <Radio label="INCREASE">增加</Radio>
-            <Radio label="REDUCE">减少</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="积分" prop="point">
-          <InputNumber v-model="memberPointForm.point" :min="1" :precision="0" style="width: 240px" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button @click="memberPointFlag = false">取消</Button>
-        <Button type="primary" :loading="memberPointLoading" @click="submitMemberPoint">确定</Button>
-      </div>
-    </Modal>
-    <Modal v-model="memberGroupFlag" title="设定会员分组" width="420">
-      <Form ref="memberGroupForm" :model="memberGroupForm" :rules="memberGroupRule" :label-width="90">
-        <FormItem label="会员分组" prop="groupId">
-          <Select v-model="memberGroupForm.groupId" clearable filterable style="width: 240px">
-            <Option v-for="item in memberGroupList" :value="item.id" :key="item.id">{{ item.groupName }}</Option>
-          </Select>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button @click="memberGroupFlag = false">取消</Button>
-        <Button type="primary" :loading="memberGroupLoading" @click="submitSetMemberGroup">确定</Button>
-      </div>
-    </Modal>
-    <Modal width="1200px" v-model="picModelFlag">
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-    </Modal>
-    <multipleMap ref="map" @callback="selectedRegion"/>
+    <el-dialog v-model="memberGroupFlag" title="设定会员分组" width="420px" destroy-on-close>
+      <el-form ref="memberGroupForm" :model="memberGroupForm" :rules="memberGroupRule" label-width="90px">
+        <el-form-item label="会员分组" prop="groupId">
+          <el-select v-model="memberGroupForm.groupId" clearable filterable style="width: 240px">
+            <el-option
+              v-for="item in memberGroupList"
+              :key="item.id"
+              :value="item.id"
+              :label="item.groupName"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="memberGroupFlag = false">取消</el-button>
+        <el-button type="primary" :loading="memberGroupLoading" @click="submitSetMemberGroup">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="picModelFlag" width="1200px">
+      <ossManage ref="ossManage" @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" />
+    </el-dialog>
+    <multipleMap ref="map" @callback="selectedRegion" />
   </div>
 </template>
 
 <script>
+import { ArrowDown } from "@element-plus/icons-vue";
 import multipleMap from "@/components/map/multiple-map";
 import * as API_Member from "@/api/member.js";
 import ossManage from "@/views/sys/oss-manage/ossManage";
@@ -181,38 +292,33 @@ export default {
   components: {
     multipleMap,
     ossManage,
+    ArrowDown,
   },
-  computed: {
-    tableColumns() {
-      if (this.selectedMember) return this.columns;
-      return [
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        ...this.columns,
-      ];
+  props: {
+    selectedMember: {
+      type: Boolean,
+      default: false,
+    },
+    selectedList: {
+      type: null,
+      default: () => [],
     },
   },
   data() {
     return {
-      defaultPic:require('@/assets/default.png'),
-      descTitle: "", // modal标题
-      descFlag: false, //编辑查看框
-      loading: true, // 表单加载状态
-      addFlag: false, // modal显隐控制
-
+      defaultPic: require("@/assets/default.png"),
+      descTitle: "",
+      descFlag: false,
+      loading: true,
+      addFlag: false,
       addMemberForm: {
-        // 添加用户表单
         mobile: "",
         username: "",
         password: "",
       },
       searchForm: {
-        // 请求参数
         pageNumber: 1,
-        pageSize: 20, // 页面大小
+        pageSize: 20,
         order: "desc",
         id: "",
         username: "",
@@ -220,8 +326,8 @@ export default {
         disabled: "OPEN",
         groupId: "",
       },
-      picModelFlag: false, // 选择图片
-      form: {}, // 表单数据
+      picModelFlag: false,
+      form: {},
       walletIncreaseFlag: false,
       walletIncreaseLoading: false,
       walletIncreaseForm: {
@@ -278,321 +384,36 @@ export default {
         ],
       },
       addRule: {
-        // 验证规则
         mobile: [
           { required: true, message: "请输入手机号码" },
-          {
-            pattern: RegExp.mobile,
-            message: "请输入正确的手机号",
-          },
+          { pattern: RegExp.mobile, message: "请输入正确的手机号" },
         ],
         username: [{ required: true, message: "请输入会员名称" }],
         password: [{ required: true, message: "请输入密码" }],
       },
-      ruleValidate: {}, //修改验证
-      columns: [
-        {
-          title: "会员ID",
-          key: "id",
-          minWidth: 120,  // 减少宽度
-          tooltip: true,
-        },
-        {
-          title: "头像",
-          key: "face",
-          minWidth: 80,
-          align: "center",
-          render: (h, params) => {
-            return h("img", {
-              attrs: {
-                src: params.row.face || require('@/assets/default.png'),
-                alt: "头像"
-              },
-              style: {
-                width: "30px",
-                height: "30px",
-                borderRadius: "50%",
-                objectFit: "cover"
-              }
-            });
-          }
-        },
-        {
-          title: "会员名称",
-          key: "username",
-          tooltip: true,
-          minWidth: 150,  // 减少宽度
-        },
-        {
-          title: "会员昵称",
-          key: "nickName",
-          tooltip: true,
-          minWidth: 120,  // 减少宽度
-        },
-        {
-          title: "联系方式",
-          minWidth: 130,
-          key: "mobile",
-          render: (h, params) => {
-            if (params.row.mobile == null) {
-              return h("div", [h("span", {}, "")]);
-            } else {
-              return h("div", [h("span", {}, params.row.mobile)]);
-            }
-          },
-        },
-        {
-          title: "注册时间",
-          key: "createTime",
-          minWidth: 160,  // 减少宽度
-        },
-        {
-          title: "最后登录时间",
-          key: "lastLoginDate",
-          minWidth: 160,  // 减少宽度
-        },
-
-        {
-          title: "积分数量",
-          align: "left",
-          minWidth: 120,  // 增加宽度
-          render: (h, params) => {
-            return h(
-              "div",
-              {},
-              params.row.point == void 0 ? "0" : params.row.point
-            );
-          },
-        },
-        {
-          title: "经验值",
-          key: "experience",
-          minWidth: 100,
-          render: (h, params) => {
-            return h("div", {}, params.row.experience == null ? "0" : params.row.experience);
-          },
-        },
-        {
-          title: "会员等级",
-          key: "gradeName",
-          minWidth: 120,
-          tooltip: true,
-          render: (h, params) => {
-            return h("div", {}, params.row.gradeName || "-");
-          },
-        },
-        {
-          title: "余额",
-          key: "memberWallet",
-          width: 120,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.memberWallet}} );
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          minWidth: 160,
-          fixed: "right",
-          render: (h, params) => {
-            if (this.selectedMember) {
-              return h(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    justifyContent: "center",
-                  },
-                },
-                [
-                  h(
-                    "a",
-                    {
-                      style: {
-                        color: "#2d8cf0",
-                        cursor: "pointer",
-                        textDecoration: "none",
-                      },
-                      on: {
-                        click: () => {
-                          this.callback(params.row, params.index);
-                        },
-                      },
-                    },
-                    params.row.___selected ? "已选择" : "选择"
-                  ),
-                ]
-              );
-            }
-
-            const divider = h(
-              "span",
-              {
-                style: {
-                  margin: "0 8px",
-                  color: "#dcdee2",
-                },
-              },
-              "|"
-            );
-
-            const viewLink = h(
-              "a",
-              {
-                style: {
-                  color: "#2d8cf0",
-                  cursor: "pointer",
-                  textDecoration: "none",
-                },
-                on: {
-                  click: () => {
-                    this.detail(params.row);
-                  },
-                },
-              },
-              "查看"
-            );
-
-            const moreDropdown = h(
-              "Dropdown",
-              {
-                props: {
-                  trigger: "click",
-                  transfer: true,
-                },
-                on: {
-                  "on-click": (name) => {
-                    if (name === "edit") {
-                      this.editPerm(params.row);
-                    }
-                    if (name === "disabled") {
-                      this.disabled(params.row);
-                    }
-                    if (name === "increaseWallet") {
-                      this.openWalletIncrease(params.row);
-                    }
-                    if (name === "updatePoint") {
-                      this.openMemberPoint(params.row);
-                    }
-                  },
-                },
-              },
-              [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                      display: "inline-flex",
-                      alignItems: "center",
-                    },
-                  },
-                  [
-                    h("span", "更多"),
-                    h("Icon", {
-                      props: {
-                        type: "md-arrow-dropdown",
-                      },
-                      style: {
-                        marginLeft: "4px",
-                      },
-                    }),
-                  ]
-                ),
-                h(
-                  "DropdownMenu",
-                  {
-                    slot: "list",
-                  },
-                  [
-                    h(
-                      "DropdownItem",
-                      {
-                        props: {
-                          name: "edit",
-                        },
-                      },
-                      "编辑会员"
-                    ),
-                    h(
-                      "DropdownItem",
-                      {
-                        props: {
-                          name: "increaseWallet",
-                        },
-                      },
-                      "增加余额"
-                    ),
-                    h(
-                      "DropdownItem",
-                      {
-                        props: {
-                          name: "updatePoint",
-                        },
-                      },
-                      "修改积分"
-                    ),
-                    h(
-                      "DropdownItem",
-                      {
-                        props: {
-                          name: "disabled",
-                        },
-                      },
-                      "禁用会员"
-                    ),
-                  ]
-                ),
-              ]
-            );
-
-            return h(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  justifyContent: "center",
-                },
-              },
-              [viewLink, divider, moreDropdown]
-            );
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      selectMember: [], //保存选中的用户
+      ruleValidate: {},
+      data: [],
+      total: 0,
+      selectMember: [],
     };
   },
-  props: {
-    // 是否为选中模式
-    selectedMember: {
-      type: Boolean,
-      default: false,
-    },
-    // 已选择用户数据
-    selectedList: {
-      type: null,
-      default: () => {
-        return [];
-      },
-    },
-  },
   watch: {
     selectedList: {
       handler(val) {
-        this.$set(this, "selectMember", JSON.parse(JSON.stringify(val)));
+        this.selectMember = JSON.parse(JSON.stringify(val));
         this.init(this.data);
-        // 将父级数据与当前组件数据进行匹配
       },
       deep: true,
       immediate: true,
     },
   },
   methods: {
+    handleMoreCommand(name, row) {
+      if (name === "edit") this.editPerm(row);
+      if (name === "disabled") this.disabled(row);
+      if (name === "increaseWallet") this.openWalletIncrease(row);
+      if (name === "updatePoint") this.openMemberPoint(row);
+    },
     onSelectionChange(selection) {
       this.selectedRows = selection || [];
     },
@@ -620,9 +441,7 @@ export default {
       });
     },
     clearSelection() {
-      if (this.$refs.table && this.$refs.table.clearSelection) {
-        this.$refs.table.clearSelection();
-      }
+      this.$refs.table?.clearSelection();
     },
     submitSetMemberGroup() {
       if (this.selectedRows.length === 0) {
@@ -646,84 +465,65 @@ export default {
         });
       });
     },
-    // 回调给父级
-    callback(val, index) {
-      this.selectMember.forEach(item=>{item.___selected = false})
-      this.$set(val, "___selected", !val.___selected);
-      console.log(val.___selected);
-      console.log(this.selectMember);
-      let findUser = this.selectMember.find((item) => {
-        return item.id == val.id;
+    callback(val) {
+      this.selectMember.forEach((item) => {
+        item.___selected = false;
       });
-      // 如果没有则添加
+      val.___selected = !val.___selected;
+      let findUser = this.selectMember.find((item) => item.id == val.id);
       if (!findUser) {
         this.selectMember.push(val);
       } else {
-        // 有重复数据就删除
         this.selectMember.map((item, index) => {
           if (item.id == findUser.id) {
             this.selectMember.splice(index, 1);
           }
         });
       }
-
       this.$emit("callback", val);
     },
-    // 初始化信息
     init(data) {
       data.forEach((item) => {
         if (this.selectMember.length != 0) {
           this.selectMember.forEach((member) => {
             if (member.id == item.id) {
-              this.$set(item, "___selected", true);
+              item.___selected = true;
             }
           });
         } else {
-          this.$set(item, "___selected", false);
+          item.___selected = false;
         }
       });
       this.data = data;
     },
-    // 分页 改变页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getData();
     },
-    // 分页 改变页数
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
+    changePageSize() {
       this.searchForm.pageNumber = 1;
       this.getData();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getData();
     },
-    //查看详情修改
     editPerm(val) {
       this.descTitle = `查看用户 ${val.username}`;
       this.descFlag = true;
-
       this.getMemberInfo(val.id);
     },
     addMember() {
       this.addFlag = true;
-      this.$refs.addMemberForm.resetFields();
+      this.$refs.addMemberForm?.resetFields();
     },
-    /**
-     * 查询查看会员详情
-     */
     getMemberInfo(id) {
       API_Member.getMemberInfoData(id).then((res) => {
         if (res.result) {
-          this.$set(this, "form", res.result);
+          this.form = res.result;
         }
       });
     },
-
-    //查询会员列表
     getData() {
       this.loading = true;
       if (!this.selectedMember) {
@@ -738,12 +538,10 @@ export default {
         }
       });
     },
-    // 选中的图片
     callbackSelected(val) {
       this.picModelFlag = false;
       this.form.face = val.url;
     },
-    //添加会员提交
     addMemberSubmit() {
       this.addMemberForm.password = this.md5(this.addMemberForm.password);
       this.$refs.addMemberForm.validate((valid) => {
@@ -759,28 +557,20 @@ export default {
         }
       });
     },
-
-    // 选中的地址
     selectedRegion(val) {
-      if(val.type === 'select'){
-        const paths = val.data.map(item => item.name).join(',')
-        const ids = val.data.map(item => item.id).join(',')
-
-        this.$set(this.form,'region',paths)
-        this.$set(this.form,'regionId',ids)
-
-      }
-      else{
-        this.$set(this.form,'region',val.data.addr)
-        this.$set(this.form,'regionId',val.data.addrId)
+      if (val.type === "select") {
+        const paths = val.data.map((item) => item.name).join(",");
+        const ids = val.data.map((item) => item.id).join(",");
+        this.form.region = paths;
+        this.form.regionId = ids;
+      } else {
+        this.form.region = val.data.addr;
+        this.form.regionId = val.data.addrId;
       }
     },
-    //查看会员
     detail(row) {
-      this.$options.filters.customRouterPush({ name: "member-detail", query: { id: row.id } })
+      this.$filters.customRouterPush({ name: "member-detail", query: { id: row.id } });
     },
-
-    //禁用会员
     disabled(v) {
       let params = {
         memberIds: [v.id],
@@ -794,17 +584,14 @@ export default {
             if (res.success) {
               this.$Message.success("禁用成功");
               this.getData();
-            } else {
-              // this.$Message.error(res.message);
             }
           });
         },
       });
     },
-
     openWalletIncrease(row) {
       this.walletIncreaseLoading = false;
-      this.$set(this, "walletIncreaseForm", { memberId: row.id, rechargeMoney: null });
+      this.walletIncreaseForm = { memberId: row.id, rechargeMoney: null };
       this.walletIncreaseFlag = true;
       this.$nextTick(() => {
         this.$refs.walletIncreaseForm && this.$refs.walletIncreaseForm.resetFields();
@@ -832,10 +619,9 @@ export default {
           });
       });
     },
-
     openMemberPoint(row) {
       this.memberPointLoading = false;
-      this.$set(this, "memberPointForm", { memberId: row.id, point: null, type: "INCREASE" });
+      this.memberPointForm = { memberId: row.id, point: null, type: "INCREASE" };
       this.memberPointFlag = true;
       this.$nextTick(() => {
         this.$refs.memberPointForm && this.$refs.memberPointForm.resetFields();
@@ -864,30 +650,29 @@ export default {
           });
       });
     },
-
-    // 提交修改数据
     handleSubmitModal() {
-      const { nickName, sex, username, face, newPassword,id,regionId,region } = this.form;
+      const { nickName, sex, username, face, newPassword, id, regionId, region } = this.form;
       let time = new Date(this.form.birthday);
-      let birthday = this.form.birthday=== undefined?'':
-        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
+      let birthday =
+        this.form.birthday === undefined
+          ? ""
+          : time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
       let submit = {
         regionId,
         region,
         nickName,
-
         sex,
         birthday,
         face,
-        id
+        id,
       };
-
       if (newPassword) {
         submit.password = this.md5(newPassword);
       }
       API_Member.updateMember(submit).then((res) => {
         if (res.result) {
           this.$Message.success("修改成功！");
+          this.descFlag = false;
           this.getData();
         }
       });
@@ -903,16 +688,18 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-::v-deep .ivu-table-wrapper {
-  width: 100%;
-}
-::v-deep .ivu-card {
-  width: 100%;
-}
 .face {
   width: 60px;
   height: 60px;
   border-radius: 50%;
 }
-
+.link-text {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
 </style>
diff --git a/manager/src/views/member/list/memberDetail.vue b/manager/src/views/member/list/memberDetail.vue
index c93e99ac..eca5c535 100644
--- a/manager/src/views/member/list/memberDetail.vue
+++ b/manager/src/views/member/list/memberDetail.vue
@@ -1,32 +1,35 @@
 <template>
   <div>
-    <Card style="height: 240px;padding: 12px 12px 0px">
+    <el-card style="height: 240px; padding: 12px 12px 0px">
       <div class="head-title">基本信息</div>
       <div class="detail-body">
         <div class="ant-col-md-6">
           <div class="info">
             <div class="head-info">
-              <Avatar size="large" :src="memberInfo.face"/>
+              <el-avatar :size="64" :src="memberInfo.face" />
               <div>
                 <div class="name" v-if="memberInfo.username && memberInfo.username.length > 15">
-                  {{memberInfo.username.slice(0,15)}}...
+                  {{ memberInfo.username.slice(0, 15) }}...
                 </div>
                 <div class="name" v-else>
-                  {{memberInfo.username}}
+                  {{ memberInfo.username }}
                 </div>
                 <div class="phone">
-                  {{memberInfo.mobile}}
+                  {{ memberInfo.mobile }}
                 </div>
               </div>
             </div>
             <div class="bottom-info">
-              <p>上次登录 {{memberInfo.lastLoginDate}}&nbsp;
+              <p>上次登录 {{ memberInfo.lastLoginDate }}</p>
               <p>
-                <i-switch size="large" v-model="memberInfo.disabled" :true-value="true" :false-value="false"
-                          @on-change="memberStatusChange">
-                  <span slot="open">启用</span>
-                  <span slot="close">禁用</span>
-                </i-switch>
+                <el-switch
+                  v-model="memberInfo.disabled"
+                  :active-value="true"
+                  :inactive-value="false"
+                  active-text="启用"
+                  inactive-text="禁用"
+                  @change="memberStatusChange"
+                />
               </p>
             </div>
           </div>
@@ -34,1021 +37,751 @@
         <div class="ant-col-md-6">
           <p class="item">
             <span class="label">昵称：</span>
-            <span class="info">{{memberInfo.nickName}}</span>
+            <span class="info">{{ memberInfo.nickName }}</span>
           </p>
           <p class="item">
             <span class="label">会员名称：</span>
-            <span class="info">{{memberInfo.username}}</span>
+            <span class="info">{{ memberInfo.username }}</span>
           </p>
           <p class="item">
             <span class="label">性别：</span>
-            <span v-if="memberInfo.sex===1" class="info">男</span>
+            <span v-if="memberInfo.sex === 1" class="info">男</span>
             <span v-else class="info">女</span>
           </p>
           <p class="item">
             <span class="label">生日：</span>
             <span v-if="memberInfo.birthday == null || memberInfo.birthday == 'undefined'">暂未完善</span>
-            <span v-else class="info">{{memberInfo.birthday}}</span>
+            <span v-else class="info">{{ memberInfo.birthday }}</span>
           </p>
           <p class="item">
             <span class="label">地区：</span>
-            <span v-if="memberInfo.region == null || memberInfo.region =='' || memberInfo.region === 'undefined'"
-                  class="info">暂未完善</span>
-            <span v-else class="info">{{memberInfo.region}}</span>
+            <span
+              v-if="memberInfo.region == null || memberInfo.region == '' || memberInfo.region === 'undefined'"
+              class="info"
+            >暂未完善</span>
+            <span v-else class="info">{{ memberInfo.region }}</span>
           </p>
           <p class="item">
             <span class="label">注册时间：</span>
-            <span class="info">{{memberInfo.createTime}}</span>
+            <span class="info">{{ memberInfo.createTime }}</span>
           </p>
         </div>
       </div>
-    </Card>
+    </el-card>
 
-    <Card class="mt_10">
-      <Tabs value="point" @on-click="memberInfoChange">
-        <TabPane label="TA的积分" name="point">
-          <div class="pointsTitle" style="justify-content: flex-start; text-align: left;">
-            <div style="width: 120px;">
-              <div class="points-top-title">
-                剩余积分
-              </div>
+    <el-card class="mt_10">
+      <el-tabs v-model="activeTab" @tab-change="memberInfoChange">
+        <el-tab-pane label="TA的积分" name="point">
+          <div class="pointsTitle" style="justify-content: flex-start; text-align: left">
+            <div style="width: 120px">
+              <div class="points-top-title">剩余积分</div>
               <div class="points-top-text">
-                {{memberInfo.point?memberInfo.point:0}}
+                {{ memberInfo.point ? memberInfo.point : 0 }}
               </div>
             </div>
           </div>
           <div class="point-data" style="margin-top: -5px">
-              <Table
-                :loading="loading"
-                border
-                :columns="pointsColumns"
-                :data="pointData"
-                class="mt_10"
-                ref="table"
-              >
-              </Table>
+            <el-table v-loading="loading" border :data="pointData" class="mt_10" style="width: 100%">
+              <el-table-column prop="content" label="操作内容" min-width="120" show-overflow-tooltip />
+              <el-table-column prop="createTime" label="操作时间" width="200" />
+              <el-table-column prop="beforePoint" label="之前积分" width="150" />
+              <el-table-column label="变动积分" width="150">
+                <template #default="{ row }">
+                  <priceColorScheme
+                    v-if="row"
+                    :value="row.variablePoint"
+                    :color="row.pointType == 'INCREASE' ? 'green' : $mainColor"
+                    :unit="row.pointType == 'INCREASE' ? '+' : '-'"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column prop="point" label="当前积分" width="150" />
+            </el-table>
 
-            <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
-              <Page
-                :current="pointSearchForm.pageNumber"
+            <div class="mt_10" style="display: flex; justify-content: flex-end; margin-top: 10px">
+              <el-pagination
+                v-model:current-page="pointSearchForm.pageNumber"
+                v-model:page-size="pointSearchForm.pageSize"
+                :page-sizes="[20, 50, 100]"
                 :total="pointTotal"
-                :page-size="pointSearchForm.pageSize"
-              @on-change="pointChangePage"
-              @on-page-size-change="pointChangePageSize"
-              :page-size-opts="[20, 50, 100]"
-              size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-            </Row>
+                layout="total, sizes, prev, pager, next, jumper"
+                size="small"
+                @current-change="pointChangePage"
+                @size-change="pointChangePageSize"
+              />
+            </div>
           </div>
-        </TabPane>
-        <TabPane label="TA的订单" name="order" style="min-height: 200px">
-          <Row>
-            <Form ref="searchForm" :model="orderSearchForm" inline :label-width="70" class="search-form">
-              <Form-item label="订单号" prop="orderSn">
-                <Input
-                  type="text"
-                  v-model="orderSearchForm.orderSn"
-                  placeholder="请输入订单号"
-                  clearable
-                  style="width: 200px"
-                />
-              </Form-item>
-              <Form-item label="订单状态" prop="orderStatus">
-                <Select v-model="orderSearchForm.orderStatus" placeholder="请选择" clearable style="width: 200px">
-                  <Option value="UNPAID">未付款</Option>
-                  <Option value="PAID">已付款</Option>
-                  <Option value="UNDELIVERED">待发货</Option>
-                  <Option value="DELIVERED">已发货</Option>
-                  <Option value="COMPLETED">已完成</Option>
-                  <Option value="TAKE">待核验</Option>
-                  <Option value="CANCELLED">已关闭</Option>
-                </Select>
-              </Form-item>
-              <Form-item label="支付状态" prop="payStatus">
-                <Select v-model="orderSearchForm.payStatus" placeholder="请选择" clearable style="width: 200px">
-                  <Option value="UNPAID">未付款</Option>
-                  <Option value="PAID">已付款</Option>
-                </Select>
-              </Form-item>
-              <Form-item label="订单类型" prop="orderType">
-                <Select v-model="orderSearchForm.orderType" placeholder="请选择" clearable style="width: 200px">
-                  <Option value="NORMAL">普通订单</Option>
-                  <Option value="VIRTUAL">虚拟订单</Option>
-                  <Option value="GIFT">赠品订单</Option>
-                  <Option value="PINTUAN">拼团订单</Option>
-                </Select>
-              </Form-item>
-              <Form-item label="订单来源" prop="clientType">
-                <Select v-model="orderSearchForm.clientType" placeholder="请选择" clearable style="width: 200px">
-                  <Option value="H5">移动端</Option>
-                  <Option value="PC">PC端</Option>
-                  <Option value="WECHAT_MP">小程序</Option>
-                  <Option value="APP">移动应用端</Option>
-                  <Option value="UNKNOWN">未知</Option>
-                </Select>
-              </Form-item>
-              <Form-item label="下单时间">
-                <DatePicker
-                  v-model="selectDate"
-                  type="datetimerange"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  clearable
-                  @on-change="selectDateRange"
-                  placeholder="选择起始时间"
-                  style="width: 200px"
-                ></DatePicker>
-              </Form-item>
-              <Button @click="getOrderData" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-            </Form>
-          </Row>
+        </el-tab-pane>
+
+        <el-tab-pane label="TA的订单" name="order" style="min-height: 200px">
+          <el-form ref="searchForm" :model="orderSearchForm" inline label-width="70px" class="search-form">
+            <el-form-item label="订单号" prop="orderSn">
+              <el-input
+                v-model="orderSearchForm.orderSn"
+                placeholder="请输入订单号"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item label="订单状态" prop="orderStatus">
+              <el-select v-model="orderSearchForm.orderStatus" placeholder="请选择" clearable style="width: 200px">
+                <el-option label="未付款" value="UNPAID" />
+                <el-option label="已付款" value="PAID" />
+                <el-option label="待发货" value="UNDELIVERED" />
+                <el-option label="已发货" value="DELIVERED" />
+                <el-option label="已完成" value="COMPLETED" />
+                <el-option label="待核验" value="TAKE" />
+                <el-option label="已关闭" value="CANCELLED" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="支付状态" prop="payStatus">
+              <el-select v-model="orderSearchForm.payStatus" placeholder="请选择" clearable style="width: 200px">
+                <el-option label="未付款" value="UNPAID" />
+                <el-option label="已付款" value="PAID" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="订单类型" prop="orderType">
+              <el-select v-model="orderSearchForm.orderType" placeholder="请选择" clearable style="width: 200px">
+                <el-option label="普通订单" value="NORMAL" />
+                <el-option label="虚拟订单" value="VIRTUAL" />
+                <el-option label="赠品订单" value="GIFT" />
+                <el-option label="拼团订单" value="PINTUAN" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="订单来源" prop="clientType">
+              <el-select v-model="orderSearchForm.clientType" placeholder="请选择" clearable style="width: 200px">
+                <el-option label="移动端" value="H5" />
+                <el-option label="PC端" value="PC" />
+                <el-option label="小程序" value="WECHAT_MP" />
+                <el-option label="移动应用端" value="APP" />
+                <el-option label="未知" value="UNKNOWN" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="下单时间">
+              <el-date-picker
+                v-model="selectDate"
+                type="datetimerange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                clearable
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                placeholder="选择起始时间"
+                style="width: 360px"
+                @change="selectDateRange"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" class="search-btn" @click="getOrderData">搜索</el-button>
+            </el-form-item>
+          </el-form>
+
           <div style="min-height: 180px">
-            <Table
-              :loading="loading"
-              border
-              :columns="orderColumns"
-              :data="orderData"
-              ref="table"
-              class="mt_10"
-            >
-            </Table>
+            <el-table v-loading="loading" border :data="orderData" class="mt_10" style="width: 100%">
+              <el-table-column prop="sn" label="订单编号" min-width="100" show-overflow-tooltip />
+              <el-table-column label="订单金额" width="130">
+                <template #default="{ row }">
+                  <priceColorScheme v-if="row" :value="row.flowPrice" :color="$mainColor" />
+                </template>
+              </el-table-column>
+              <el-table-column label="订单类型" width="100">
+                <template #default="{ row }">
+                  <span v-if="row">{{ orderTypeText(row.orderType) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="来源" width="80">
+                <template #default="{ row }">
+                  <span v-if="row">{{ clientTypeText(row.clientType) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="订单状态" width="95">
+                <template #default="{ row }">
+                  <span v-if="row">{{ orderStatusText(row.orderStatus) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="支付状态" width="95">
+                <template #default="{ row }">
+                  <span v-if="row">{{ payStatusText(row.payStatus) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="售后状态" width="100">
+                <template #default="{ row }">
+                  <span v-if="row">{{ groupAfterSaleStatusText(row.groupAfterSaleStatus) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="投诉状态" width="95">
+                <template #default="{ row }">
+                  <span v-if="row">{{ groupComplainStatusText(row.groupComplainStatus) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="storeName" label="购买店铺" width="120" show-overflow-tooltip />
+              <el-table-column prop="createTime" label="下单时间" width="170" />
+              <el-table-column label="操作" align="center" width="100" fixed="right">
+                <template #default="{ row }">
+                  <a v-if="row" class="link-text" @click="orderDetail(row.sn)">查看</a>
+                </template>
+              </el-table-column>
+            </el-table>
 
-            <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
-              <Page
-                :current="orderSearchForm.pageNumber"
+            <div class="mt_10" style="display: flex; justify-content: flex-end; margin-top: 10px">
+              <el-pagination
+                v-model:current-page="orderSearchForm.pageNumber"
+                v-model:page-size="orderSearchForm.pageSize"
+                :page-sizes="[20, 50, 100]"
                 :total="orderTotal"
-                :page-size="orderSearchForm.pageSize"
-              @on-change="orderChangePage"
-              @on-page-size-change="orderChangePageSize"
-              :page-size-opts="[20, 50, 100]"
-              size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-            </Row>
+                layout="total, sizes, prev, pager, next, jumper"
+                size="small"
+                @current-change="orderChangePage"
+                @size-change="orderChangePageSize"
+              />
+            </div>
           </div>
-        </TabPane>
-        <TabPane label="TA收货地址" name="address">
-          <Table
-            :loading="loading"
-            border
-            :columns="addressColumns"
-            :data="addressData"
-            ref="table"
-            class="mt_10"
-            sortable="custom"
-          >
-          </Table>
+        </el-tab-pane>
 
-          <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
-            <Page
-              :current="addressSearchForm.pageNumber"
+        <el-tab-pane label="TA收货地址" name="address">
+          <el-table v-loading="loading" border :data="addressData" class="mt_10" style="width: 100%">
+            <el-table-column prop="alias" label="地址别名" min-width="80" show-overflow-tooltip />
+            <el-table-column prop="name" label="收货人姓名" min-width="90" show-overflow-tooltip />
+            <el-table-column prop="mobile" label="收货人电话" width="125" />
+            <el-table-column prop="consigneeAddressPath" label="地址" min-width="160" show-overflow-tooltip />
+            <el-table-column prop="detail" label="详细地址" min-width="180" show-overflow-tooltip />
+            <el-table-column label="默认" width="80">
+              <template #default="{ row }">
+                <span v-if="row">{{ row.isDefault ? "是" : "否" }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <div class="mt_10" style="display: flex; justify-content: flex-end; margin-top: 10px">
+            <el-pagination
+              v-model:current-page="addressSearchForm.pageNumber"
+              v-model:page-size="addressSearchForm.pageSize"
+              :page-sizes="[20, 50, 100]"
               :total="addressTotal"
-              :page-size="addressSearchForm.pageSize"
-              @on-change="addressChangePage"
-              @on-page-size-change="addressChangePageSize"
-              :page-size-opts="[20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
               size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-          </Row>
-        </TabPane>
-        <TabPane label="TA的余额" name="wallet">
-          <div class="pointsTitle" style="justify-content: flex-start; text-align: left;">
-            <div style="min-width: 120px; margin-right:20px">
-              <div class="points-top-title">
-                余额
-              </div>
+              @current-change="addressChangePage"
+              @size-change="addressChangePageSize"
+            />
+          </div>
+        </el-tab-pane>
 
+        <el-tab-pane label="TA的余额" name="wallet">
+          <div class="pointsTitle" style="justify-content: flex-start; text-align: left">
+            <div style="min-width: 120px; margin-right: 20px">
+              <div class="points-top-title">余额</div>
               <div class="points-top-text">
-
-                <priceColorScheme :value="memberWalletInfo.memberWallet" :color="$mainColor" :customer="{'fontSize':'21px'}" >
-                </priceColorScheme>
-
+                <priceColorScheme
+                  :value="memberWalletInfo.memberWallet"
+                  :color="$mainColor"
+                  :customer="{ fontSize: '21px' }"
+                />
               </div>
             </div>
-            <div style="min-width: 120px;">
-              <div class="points-top-title">
-                冻结余额
-              </div>
+            <div style="min-width: 120px">
+              <div class="points-top-title">冻结余额</div>
               <div class="points-top-text">
-                <priceColorScheme :value="memberWalletInfo.memberFrozenWallet" :color="$mainColor" :customer="{'fontSize':'21px'}" >
-                </priceColorScheme>
-               </div>
+                <priceColorScheme
+                  :value="memberWalletInfo.memberFrozenWallet"
+                  :color="$mainColor"
+                  :customer="{ fontSize: '21px' }"
+                />
+              </div>
             </div>
           </div>
-          <Table
-            :loading="loading"
-            border
-            :columns="walletColumns"
-            :data="walletData"
-            ref="table"
-            class="mt_10"
-          >
-          </Table>
+          <el-table v-loading="loading" border :data="walletData" class="mt_10" style="width: 100%">
+            <el-table-column prop="memberName" label="会员名称" min-width="120" />
+            <el-table-column label="业务类型" width="200">
+              <template #default="{ row }">
+                <span v-if="row">{{ walletServiceTypeText(row.serviceType) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="变动金额" width="150">
+              <template #default="{ row }">
+                <template v-if="row">
+                  <priceColorScheme v-if="row.money > 0" :value="row.money" color="green" />
+                  <priceColorScheme v-else-if="row.money < 0" :value="row.money" :color="$mainColor" />
+                </template>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createTime" label="变动时间" width="170" />
+            <el-table-column prop="detail" label="变动明细" min-width="400" show-overflow-tooltip />
+          </el-table>
 
-          <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
-            <Page
-              :current="walletSearchForm.pageNumber"
+          <div class="mt_10" style="display: flex; justify-content: flex-end; margin-top: 10px">
+            <el-pagination
+              v-model:current-page="walletSearchForm.pageNumber"
+              v-model:page-size="walletSearchForm.pageSize"
+              :page-sizes="[20, 50, 100]"
               :total="walletTotal"
-              :page-size="walletSearchForm.pageSize"
-              @on-change="walletChangePage"
-              @on-page-size-change="walletChangePageSize"
-              :page-size-opts="[20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
               size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-          </Row>
-        </TabPane>
-        <TabPane label="TA的发票" name="receipt">
-          <Row>
-            <Form ref="searchForm" :model="receiptRecordSearchForm" inline :label-width="70" class="search-form">
-              <Form-item label="订单号" prop="orderSn">
-                <Input
-                  type="text"
-                  v-model="receiptRecordSearchForm.orderSn"
-                  placeholder="请输入订单号"
-                  clearable
-                  style="width: 200px"
+              @current-change="walletChangePage"
+              @size-change="walletChangePageSize"
+            />
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="TA的发票" name="receipt">
+          <el-form ref="receiptSearchForm" :model="receiptRecordSearchForm" inline label-width="70px" class="search-form">
+            <el-form-item label="订单号" prop="orderSn">
+              <el-input
+                v-model="receiptRecordSearchForm.orderSn"
+                placeholder="请输入订单号"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" class="search-btn" @click="getReceiptRecordData">搜索</el-button>
+            </el-form-item>
+          </el-form>
+          <el-table v-loading="loading" border :data="receiptRecordData" class="mt_10" style="width: 100%">
+            <el-table-column label="订单编号" width="260">
+              <template #default="{ row }">
+                <a v-if="row" class="link-text" @click="orderDetail(row.orderSn)">{{ row.orderSn }}</a>
+              </template>
+            </el-table-column>
+            <el-table-column prop="receiptTitle" label="发票抬头" min-width="130" show-overflow-tooltip />
+            <el-table-column prop="taxpayerId" label="纳税人识别号" min-width="130" show-overflow-tooltip />
+            <el-table-column label="发票金额" width="130">
+              <template #default="{ row }">
+                <priceColorScheme
+                  v-if="row"
+                  :value="row.receiptPrice == null ? 0 : row.receiptPrice"
+                  :color="$mainColor"
                 />
-              </Form-item>
-              <Button @click="getReceiptRecordData" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-            </Form>
-          </Row>
-          <Table
-            :loading="loading"
-            border
-            :columns="receiptRecordColumns"
-            :data="receiptRecordData"
-            class="mt_10"
-            ref="table"
-          >
-            <template slot="orderSnSlot" slot-scope="scope">
+              </template>
+            </el-table-column>
+            <el-table-column prop="receiptContent" label="发票内容" min-width="120" show-overflow-tooltip />
+          </el-table>
 
-              <a @click="orderDetail(scope.row.orderSn)">{{scope.row.orderSn}}</a>
-
-            </template>
-          </Table>
-
-          <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
-            <Page
-              :current="receiptRecordSearchForm.pageNumber"
+          <div class="mt_10" style="display: flex; justify-content: flex-end; margin-top: 10px">
+            <el-pagination
+              v-model:current-page="receiptRecordSearchForm.pageNumber"
+              v-model:page-size="receiptRecordSearchForm.pageSize"
+              :page-sizes="[20, 50, 100]"
               :total="receiptRecordTotal"
-              :page-size="receiptRecordSearchForm.pageSize"
-              @on-change="walletChangePage"
-              @on-page-size-change="walletChangePageSize"
-              :page-size-opts="[20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
               size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-          </Row>
-        </TabPane>
-      </Tabs>
-    </Card>
-    <Modal
-      :title="addressModalTitle"
+              @current-change="walletChangePage"
+              @size-change="walletChangePageSize"
+            />
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+
+    <el-dialog
       v-model="addressModalVisible"
-      :mask-closable="false"
-      :width="500"
+      :title="addressModalTitle"
+      width="500px"
+      :close-on-click-modal="false"
     >
-      <Form ref="addressForm" :model="addressForm" :label-width="100" :rules="addressFormValidate">
-        <FormItem label="收货人姓名" prop="name">
-          <Input v-model="addressForm.name" maxlength="8" clearable style="width: 80%"/>
-        </FormItem>
-        <FormItem label="收货人手机" prop="mobile">
-          <Input v-model="addressForm.mobile" clearable style="width: 80%" maxlength="11"/>
-        </FormItem>
-        <FormItem label="收货人地址" prop="consigneeAddressPath">
-          <span>{{ addressForm.consigneeAddressPath || '暂无地址' }}</span>
-          <Button @click="$refs.map.open()" style="margin-left: 10px;">选择</Button>
-        </FormItem>
-        <FormItem label="详细地址" prop="detail">
-          <Input v-model="addressForm.detail" maxlength="35" clearable style="width: 80%"/>
-        </FormItem>
-        <FormItem label="地址别名" prop="alias">
-          <Input v-model="addressForm.alias" clearable style="width: 80%" maxlength="8"/>
-        </FormItem>
-        <FormItem label="默认" prop="isDefault">
-          <RadioGroup type="button" button-style="solid" v-model="addressForm.isDefault">
-            <Radio :label="1">是</Radio>
-            <Radio :label="0">否</Radio>
-          </RadioGroup>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="addressModalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="addressSubmit">保存</Button>
-      </div>
-    </Modal>
+      <el-form ref="addressForm" :model="addressForm" label-width="100px" :rules="addressFormValidate">
+        <el-form-item label="收货人姓名" prop="name">
+          <el-input v-model="addressForm.name" maxlength="8" clearable style="width: 80%" />
+        </el-form-item>
+        <el-form-item label="收货人手机" prop="mobile">
+          <el-input v-model="addressForm.mobile" clearable style="width: 80%" maxlength="11" />
+        </el-form-item>
+        <el-form-item label="收货人地址" prop="consigneeAddressPath">
+          <span>{{ addressForm.consigneeAddressPath || "暂无地址" }}</span>
+          <el-button style="margin-left: 10px" @click="$refs.map.open()">选择</el-button>
+        </el-form-item>
+        <el-form-item label="详细地址" prop="detail">
+          <el-input v-model="addressForm.detail" maxlength="35" clearable style="width: 80%" />
+        </el-form-item>
+        <el-form-item label="地址别名" prop="alias">
+          <el-input v-model="addressForm.alias" clearable style="width: 80%" maxlength="8" />
+        </el-form-item>
+        <el-form-item label="默认" prop="isDefault">
+          <el-radio-group v-model="addressForm.isDefault">
+            <el-radio-button :value="1">是</el-radio-button>
+            <el-radio-button :value="0">否</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="addressModalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="addressSubmit">保存</el-button>
+      </template>
+    </el-dialog>
     <multipleMap ref="map" @callback="getAddress"></multipleMap>
   </div>
 </template>
 
 <script>
+import * as API_Member from "@/api/member.js";
+import ossManage from "@/views/sys/oss-manage/ossManage";
+import multipleMap from "@/components/map/multiple-map";
+import * as RegExp from "@/libs/RegExp.js";
+import * as API_Order from "@/api/order.js";
 
-  import * as API_Member from "@/api/member.js";
-  import ossManage from "@/views/sys/oss-manage/ossManage";
-  import multipleMap from "@/components/map/multiple-map";
-  import * as RegExp from '@/libs/RegExp.js';
-  import * as API_Order from "@/api/order.js";
-
-  export default {
-    name: "memberDetail",
-    components: {
-      ossManage,
-      multipleMap
-    },
-    data() {
-      return {
-        id: "",//会员id
-        loading: true, // 表单加载状态
-        memberInfo: {},//会员信息
-        memberWalletInfo: {},//会员预存款信息
-        addressModalTitle: "",//会员地址操作标题
-        addressModalVisible: false, //会员地址操作弹出框
-        addressForm: {
-          id: "",
-          isDefault: 0,
-          consigneeAddressPath:"",
-          consigneeAddressIdPath:""
-
-        },//会员地址操作form
-        selectDate: null, // 选择时间段
-        submitLoading: false, // 添加或编辑提交状态
-        addressFormValidate: {
-          name: [{required: true, message: "收货人姓名不能为空"}],
-          mobile: [
-            {required: true, message: '请输入收货人手机号码'},
-            {
-              pattern: RegExp.mobile,
-              message: '请输入正确的手机号'
-            }
-          ],
-          consigneeAddressPath: [{required: true, message: "收货人地址不能为空"}],
-          detail: [{required: true, message: "收货人详细地址不能为空"}],
-        },//会员地址操作表单校验
-        //历史积分表格
-        pointsColumns: [
+export default {
+  name: "memberDetail",
+  components: {
+    ossManage,
+    multipleMap,
+  },
+  data() {
+    return {
+      id: "",
+      activeTab: "point",
+      loading: true,
+      memberInfo: {},
+      memberWalletInfo: {},
+      addressModalTitle: "",
+      addressModalVisible: false,
+      addressForm: {
+        id: "",
+        isDefault: 0,
+        consigneeAddressPath: "",
+        consigneeAddressIdPath: "",
+      },
+      selectDate: null,
+      submitLoading: false,
+      addressFormValidate: {
+        name: [{ required: true, message: "收货人姓名不能为空" }],
+        mobile: [
+          { required: true, message: "请输入收货人手机号码" },
           {
-            title: "操作内容",
-            key: "content",
-            minWidth: 120,
-            tooltip: true
-          },
-          {
-            title: "操作时间",
-            key: "createTime",
-            width: 200
-          },
-          {
-            title: "之前积分",
-            key: "beforePoint",
-            width: 150,
-          },
-          {
-            title: "变动积分",
-            key: "variablePoint",
-            width: 150,
-            render: (h, params) => {
-              if (params.row.pointType == 'INCREASE') {
-                return h("priceColorScheme", {props:{value:params.row.variablePoint,color:'green',unit:"+"}} );
-              } else {
-                return h("priceColorScheme", {props:{value:params.row.variablePoint,color:this.$mainColor,unit:"-"}} );
-              }
-            }
-          },
-          {
-            title: "当前积分",
-            key: "point",
-            width: 150,
-          },
-
-        ],
-        pointData: [],//历史积分数据
-        pointTotal: 0,//历史积分总条数
-        //历史积分数据查询form
-        pointSearchForm: {
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-        },
-        orderColumns: [
-          {
-            title: "订单编号",
-            key: "sn",
-            minWidth: 100,
-            tooltip: true
-          },
-          {
-            title: "订单金额",
-            key: "flowPrice",
-            width: 130,
-            render: (h, params) => {
-              return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
-            },
-          },
-          {
-            title: "订单类型",
-            key: "orderType",
-            width: 100,
-            render: (h, params) => {
-              if (params.row.orderType == "NORMAL") {
-                return h('div', [h('span', {}, '普通订单'),]);
-              } else if (params.row.orderType == "VIRTUAL") {
-                return h('div', [h('span', {}, '虚拟订单'),]);
-              } else if (params.row.orderType == "GIFT") {
-                return h('div', [h('span', {}, '赠品订单'),]);
-              } else if (params.row.orderType == "PINTUAN") {
-                return h('div', [h('span', {}, '拼团订单'),]);
-              }
-            }
-          },
-          {
-            title: "来源",
-            key: "clientType",
-            width: 80,render: (h, params) => {
-              if (params.row.clientType == "H5") {
-                return h("div",{},"移动端");
-              }else if(params.row.clientType == "PC") {
-                return h("div",{},"PC端");
-              }else if(params.row.clientType == "WECHAT_MP") {
-                return h("div",{},"小程序端");
-              }else if(params.row.clientType == "APP") {
-                return h("div",{},"移动应用端");
-              }
-              else{
-                return h("div",{},params.row.clientType);
-              }
-            },
-          },
-          {
-            title: "订单状态",
-            key: "orderStatus",
-            width: 95,
-            render: (h, params) => {
-              if (params.row.orderStatus == "UNPAID") {
-                return h('div', [h('span', {}, '未付款'),]);
-              } else if (params.row.orderStatus == "PAID") {
-                return h('div', [h('span', {}, '已付款'),]);
-              } else if (params.row.orderStatus == "UNDELIVERED") {
-                return h('div', [h('span', {}, '待发货'),]);
-              } else if (params.row.orderStatus == "DELIVERED") {
-                return h('div', [h('span', {}, '已发货'),]);
-              } else if (params.row.orderStatus == "COMPLETED") {
-                return h('div', [h('span', {}, '已完成'),]);
-              } else if (params.row.orderStatus == "TAKE") {
-                return h('div', [h('span', {}, '待核验'),]);
-              } else if (params.row.orderStatus == "CANCELLED") {
-                return h('div', [h('span', {}, '已关闭'),]);
-              }
-            }
-          },
-          {
-            title: "支付状态",
-            key: "payStatus",
-            width: 95,
-            render: (h, params) => {
-              if (params.row.payStatus == "UNPAID") {
-                return h('div', [h('span', {}, '未付款'),]);
-              } else if (params.row.payStatus == "PAID") {
-                return h('div', [h('span', {}, '已付款'),]);
-              }
-            }
-          },
-          {
-            title: "售后状态",
-            key: "groupAfterSaleStatus",
-            width: 100,
-            render: (h, params) => {
-              if (params.row.groupAfterSaleStatus == "NEW") {
-                return h('div', [h('span', {}, '未申请'),]);
-              } else if (params.row.groupAfterSaleStatus == "NOT_APPLIED") {
-                return h('div', [h('span', {}, '未申请'),]);
-              } else if (params.row.groupAfterSaleStatus == "ALREADY_APPLIED") {
-                return h('div', [h('span', {}, '已申请'),]);
-              } else if (params.row.groupAfterSaleStatus == "EXPIRED") {
-                return h('div', [h('span', {}, '已失效'),]);
-              }
-            }
-          },
-          {
-            title: "投诉状态",
-            key: "groupComplainStatus",
-            width: 95,
-            render: (h, params) => {
-              if (params.row.groupComplainStatus == "NEW") {
-                return h('div', [h('span', {}, '未申请'),]);
-              } else if (params.row.groupComplainStatus == "NO_APPLY") {
-                return h('div', [h('span', {}, '未申请'),]);
-              } else if (params.row.groupComplainStatus == "APPLYING") {
-                return h('div', [h('span', {}, '申请中'),]);
-              } else if (params.row.groupComplainStatus == "COMPLETE") {
-                return h('div', [h('span', {}, '已完成'),]);
-              } else if (params.row.groupComplainStatus == "EXPIRED") {
-                return h('div', [h('span', {}, '已失效'),]);
-              } else if (params.row.groupComplainStatus == "CANCEL") {
-                return h('div', [h('span', {}, '取消投诉'),]);
-              }
-            }
-          },
-          {
-            title: "购买店铺",
-            key: "storeName",
-            width: 120,
-            tooltip: true
-          },
-          {
-            title: "下单时间",
-            key: "createTime",
-            width: 170,
-          },
-          {
-            title: "操作",
-            key: "action",
-            align: "center",
-            width: 100,
-            fixed: "right",
-            render: (h, params) => {
-              return h("div", {
-                style: {
-                  display: "flex",
-                  justifyContent: "center"
-                }
-              }, [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                      marginRight: "5px",
-                    },
-                    on: {
-                      click: () => {
-                        this.orderDetail(params.row.sn);
-                      },
-                    },
-                  },
-                  "查看"
-                ),
-              ]);
-            },
-          },
-
-        ],
-        orderData: [],//订单数据
-        orderTotal: 0,//订单总条数
-        //TA的订单form
-        orderSearchForm: {
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          payStatus: "",
-          orderSn: "",
-          orderType: "",
-        },
-        addressColumns: [
-          {
-            title: "地址别名",
-            key: "alias",
-            minWidth: 80,
-            tooltip: true
-          },
-          {
-            title: "收货人姓名",
-            key: "name",
-            minWidth: 90,
-            tooltip: true
-          },
-          {
-            title: "收货人电话",
-            key: "mobile",
-            width: 125,
-          },
-
-          {
-            title: "地址",
-            key: "consigneeAddressPath",
-            minWidth: 160,
-            tooltip: true
-
-          },
-          {
-            title: "详细地址",
-            key: "detail",
-            minWidth: 180,
-            tooltip: true
-          },
-          {
-            title: "默认",
-            key: "isDefault",
-            width: 80,
-            render: (h, params) => {
-              if (params.row.isDefault) {
-                return h('div', [
-                  h('span', {}, "是"),
-                ]);
-              } else {
-                return h('div', [
-                  h('span', {}, "否"),
-                ]);
-              }
-
-            }
-          },
-
-        ],
-        addressData: [],//历史积分数据
-        addressTotal: 0,//历史积分总条数
-        //TA的收货地址form
-        addressSearchForm: {
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-        },
-        //消费记录
-        walletColumns: [
-          {
-            title: "会员名称",
-            key: "memberName",
-            minWidth: 120,
-          },
-          {
-          title: "业务类型",
-          key: "serviceType",
-          width: 200,
-          render: (h, params) => {
-            if (params.row.serviceType == "WALLET_WITHDRAWAL") {
-              return h("div", [h("span", {}, "余额提现")]);
-            } else if (params.row.serviceType == "WALLET_PAY") {
-              return h("div", [h("span", {}, "余额支付")]);
-            } else if (params.row.serviceType == "WALLET_REFUND") {
-              return h("div", [h("span", {}, "余额退款")]);
-            } else if (params.row.serviceType == "WALLET_RECHARGE") {
-              return h("div", [h("span", {}, "余额充值")]);
-            } else {
-              return h("div", [h("span", {}, "佣金提成")]);
-            }
-          },
-        },
-          {
-            title: "变动金额",
-            key: "money",
-            width: 150,
-            render: (h, params) => {
-              if (params.row.money >0) {
-                return h("priceColorScheme", {props:{value:params.row.money,color:'green'}} );
-              } else if (params.row.money < 0) {
-                return h("priceColorScheme", {props:{value:params.row.money,color:this.$mainColor}} );
-              }
-            },
-          },
-          {
-            title: "变动时间",
-            key: "createTime",
-            width: 170,
-          },
-          {
-            title: "变动明细",
-            key: "detail",
-            minWidth: 400,
-            tooltip: true
+            pattern: RegExp.mobile,
+            message: "请输入正确的手机号",
           },
         ],
-        //TA的余额消费记录
-        walletSearchForm: {
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-        },
-        walletData: [],//历史积分数据
-        walletTotal: 0,//历史积分总条数
-        //TA的发票记录
-        receiptRecordSearchForm: {
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-        },
-        receiptRecordColumns: [
-          {
-            title: "订单编号",
-            key: "orderSn",
-            width: 260,
-            slot: "orderSnSlot",
-          },
-          {
-            title: "发票抬头",
-            key: "receiptTitle",
-            minWidth: 130,
-            tooltip: true
-          },
-          {
-            title: "纳税人识别号",
-            key: "taxpayerId",
-            minWidth: 130,
-            tooltip: true
-          },
-          {
-            title: "发票金额",
-            key: "receiptPrice",
-            width: 130,
-            render: (h, params) => {
-              if(params.row.receiptPrice == null){
-                return h("priceColorScheme", {props:{value:0,color:this.$mainColor}} );
-              }else{
-                return h("priceColorScheme", {props:{value:params.row.receiptPrice,color:this.$mainColor}} );
-              }
-            }
-          },
-          {
-            title: "发票内容",
-            key: "receiptContent",
-            minWidth: 120,
-            tooltip: true
-          },
-          ],
-        receiptRecordData: [],//发票记录数据
-        receiptRecordTotal: 0,//发票记录总条数
+        consigneeAddressPath: [{ required: true, message: "收货人地址不能为空" }],
+        detail: [{ required: true, message: "收货人详细地址不能为空" }],
+      },
+      pointData: [],
+      pointTotal: 0,
+      pointSearchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+      },
+      orderData: [],
+      orderTotal: 0,
+      orderSearchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        payStatus: "",
+        orderSn: "",
+        orderType: "",
+      },
+      addressData: [],
+      addressTotal: 0,
+      addressSearchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+      },
+      walletSearchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+      },
+      walletData: [],
+      walletTotal: 0,
+      receiptRecordSearchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+      },
+      receiptRecordData: [],
+      receiptRecordTotal: 0,
+    };
+  },
+  methods: {
+    orderTypeText(v) {
+      const map = {
+        NORMAL: "普通订单",
+        VIRTUAL: "虚拟订单",
+        GIFT: "赠品订单",
+        PINTUAN: "拼团订单",
       };
+      return map[v] || v || "";
     },
-    methods: {
-      init() {
-        //查询会员信息
-        this.getMemberInfo();
-        //查询会员的历史积分数据
+    clientTypeText(v) {
+      const map = {
+        H5: "移动端",
+        PC: "PC端",
+        WECHAT_MP: "小程序端",
+        APP: "移动应用端",
+      };
+      return map[v] || v || "";
+    },
+    orderStatusText(v) {
+      const map = {
+        UNPAID: "未付款",
+        PAID: "已付款",
+        UNDELIVERED: "待发货",
+        DELIVERED: "已发货",
+        COMPLETED: "已完成",
+        TAKE: "待核验",
+        CANCELLED: "已关闭",
+      };
+      return map[v] || v || "";
+    },
+    payStatusText(v) {
+      const map = {
+        UNPAID: "未付款",
+        PAID: "已付款",
+      };
+      return map[v] || v || "";
+    },
+    groupAfterSaleStatusText(v) {
+      const map = {
+        NEW: "未申请",
+        NOT_APPLIED: "未申请",
+        ALREADY_APPLIED: "已申请",
+        EXPIRED: "已失效",
+      };
+      return map[v] || v || "";
+    },
+    groupComplainStatusText(v) {
+      const map = {
+        NEW: "未申请",
+        NO_APPLY: "未申请",
+        APPLYING: "申请中",
+        COMPLETE: "已完成",
+        EXPIRED: "已失效",
+        CANCEL: "取消投诉",
+      };
+      return map[v] || v || "";
+    },
+    walletServiceTypeText(type) {
+      if (type === "WALLET_WITHDRAWAL") return "余额提现";
+      if (type === "WALLET_PAY") return "余额支付";
+      if (type === "WALLET_REFUND") return "余额退款";
+      if (type === "WALLET_RECHARGE") return "余额充值";
+      return "佣金提成";
+    },
+    init() {
+      this.getMemberInfo();
+      this.getPointData();
+    },
+    memberInfoChange(v) {
+      if (v == "point") {
         this.getPointData();
-      },
-      //会员信息tab改变事件
-      memberInfoChange(v) {
-        if (v == "point") {
-          this.getPointData();
-        }
-        if (v == "address") {
-          this.getAddressData();
-        }
-        if (v == "order") {
-          this.getOrderData();
-        }
-        if (v == "wallet") {
-          this.getMemberWalletData();
-          this.getDepositLogData();
-        }
-        if(v == "receipt"){
-          this.getReceiptRecordData();
-        }
-      },
-      //查询会员信息
-      getMemberInfo() {
-        API_Member.getMemberInfoData(this.id).then((res) => {
-          this.$set(this, "memberInfo", res.result);
-        });
-      },
-      //会员状态改变事件
-      memberStatusChange(v) {
-        let params = {
-          memberIds: [this.id],
-          disabled: v
-        }
-        API_Member.updateMemberStatus(params).then(res => {
-        });
-      },
-      //查询TA的余额disabled
-      getMemberWalletData() {
-        this.loading = true;
-        let params = {
-          memberId: this.id
-        }
-        API_Member.getMemberWallet(params).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.memberWalletInfo = res.result;
-          }
-        });
+      }
+      if (v == "address") {
+        this.getAddressData();
+      }
+      if (v == "order") {
+        this.getOrderData();
+      }
+      if (v == "wallet") {
+        this.getMemberWalletData();
+        this.getDepositLogData();
+      }
+      if (v == "receipt") {
+        this.getReceiptRecordData();
+      }
+    },
+    getMemberInfo() {
+      API_Member.getMemberInfoData(this.id).then((res) => {
+        this.memberInfo = res.result;
+      });
+    },
+    memberStatusChange(v) {
+      let params = {
+        memberIds: [this.id],
+        disabled: v,
+      };
+      API_Member.updateMemberStatus(params).then((res) => {});
+    },
+    getMemberWalletData() {
+      this.loading = true;
+      let params = {
+        memberId: this.id,
+      };
+      API_Member.getMemberWallet(params).then((res) => {
         this.loading = false;
-
-      },
-      //查询TA的余额消费记录
-      getDepositLogData(){
-        this.loading = true;
-        this.walletSearchForm.memberId = this.id
-        API_Member.getUserWallet(this.walletSearchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.walletData = res.result.records;
-            this.walletTotal = res.result.total;
-          }
-        });
-        this.loading = false;
-      },
-
-      //查询TA的发票记录
-      getReceiptRecordData(){
-        this.loading = true;
-        this.receiptRecordSearchForm.pageNumber = 1;
-        this.receiptRecordSearchForm.pageSize = 20;
-        this.receiptRecordSearchForm.memberId = this.id
-        API_Order.getReceiptPage(this.receiptRecordSearchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.receiptRecordData = res.result.records;
-            this.receiptRecordTotal = res.result.total;
-          }
-        });
-        this.loading = false;
-      },
-
-      //查询TA的订单
-      getOrderData() {
-        this.loading = true;
-        this.orderSearchForm.pageNumber = 1;
-        this.orderSearchForm.pageSize = 20;
-        this.orderSearchForm.memberId = this.id
-        API_Order.getOrderList(this.orderSearchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.orderData = res.result.records;
-            this.orderTotal = res.result.total;
-          }
-        });
-        this.loading = false;
-      },
-      //跳转到订单详情页面
-      orderDetail(v) {
-        this.$router.push({
-          name: "order-detail",
-          query: {sn: v},
-        });
-      },
-      //查询TA的历史积分数据
-      getPointData() {
-        this.loading = true;
-        this.pointSearchForm.memberId = this.id
-        API_Member.getHistoryPointData(this.pointSearchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.pointData = res.result.records;
-            this.pointTotal = res.result.total;
-          }
-        });
-        this.loading = false;
-      },
-      //新增或者修改表单提交
-      addressSubmit() {
-        this.addressForm.memberId = this.id
-        this.$refs.addressForm.validate((valid) => {
-          if (valid) {
-            this.submitLoading = true;
-            let submit = JSON.parse(JSON.stringify(this.addressForm))
-            submit.isDefault ? submit.isDefault  = true :  submit.isDefault = false
-            if (submit.id != "") {
-              //修改地址
-              API_Member.editMemberAddress(submit).then((res) => {
-                this.submitLoading = false;
-                if (res && res.success) {
-                  this.$Message.success("修改成功");
-                  this.addressModalVisible = false
-                  this.getAddressData();
-                }
-              });
-            } else {
-              //添加地址
-              API_Member.addMemberAddress(submit).then((res) => {
-                this.submitLoading = false;
-                if (res && res.success) {
-                  this.$Message.success("添加成功");
-                  this.addressModalVisible = false
-                  this.getAddressData();
-                }
-              });
-            }
-          }
-        })
-
-      },
-      //获取地址
-      getAddress(val) {
-        if (val.type === 'select') {
-          const paths = val.data.map(item => item.name).join(',')
-          const ids = val.data.map(item => item.id).join(',')
-
-          this.$set(this.addressForm,'consigneeAddressPath',paths)
-          this.$set(this.addressForm,'consigneeAddressIdPath',ids)
-
-          // 解析center 转为经纬度
-          const coord = val.data[val.data.length - 1].center.split(',')
-          this.addressForm.lat = coord[1]
-          this.addressForm.lon = coord[0]
-        }else{
-          this.$set(this.addressForm,'consigneeAddressPath', val.data.addr)
-          this.$set(this.addressForm,'consigneeAddressIdPath',val.data.addrId)
-          this.addressForm.lat = val.data.position.lat
-          this.addressForm.lon = val.data.position.lng
+        if (res.success) {
+          this.memberWalletInfo = res.result;
         }
-      },
-      //删除会员地址
-      memberAddressRemove(v) {
-        this.$Modal.confirm({
-          title: '删除',
-          content: '<p>确定要删除此收货地址？</p>',
-          onOk: () => {
-            API_Member.removeMemberAddress(v.id).then((res) => {
-              if (res.success) {
-                this.$Message.success('删除成功');
+      });
+      this.loading = false;
+    },
+    getDepositLogData() {
+      this.loading = true;
+      this.walletSearchForm.memberId = this.id;
+      API_Member.getUserWallet(this.walletSearchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.walletData = res.result.records;
+          this.walletTotal = res.result.total;
+        }
+      });
+      this.loading = false;
+    },
+    getReceiptRecordData() {
+      this.loading = true;
+      this.receiptRecordSearchForm.pageNumber = 1;
+      this.receiptRecordSearchForm.pageSize = 20;
+      this.receiptRecordSearchForm.memberId = this.id;
+      API_Order.getReceiptPage(this.receiptRecordSearchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.receiptRecordData = res.result.records;
+          this.receiptRecordTotal = res.result.total;
+        }
+      });
+      this.loading = false;
+    },
+    getOrderData() {
+      this.loading = true;
+      this.orderSearchForm.pageNumber = 1;
+      this.orderSearchForm.pageSize = 20;
+      this.orderSearchForm.memberId = this.id;
+      API_Order.getOrderList(this.orderSearchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.orderData = res.result.records;
+          this.orderTotal = res.result.total;
+        }
+      });
+      this.loading = false;
+    },
+    orderDetail(v) {
+      this.$router.push({
+        name: "order-detail",
+        query: { sn: v },
+      });
+    },
+    getPointData() {
+      this.loading = true;
+      this.pointSearchForm.memberId = this.id;
+      API_Member.getHistoryPointData(this.pointSearchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.pointData = res.result.records;
+          this.pointTotal = res.result.total;
+        }
+      });
+      this.loading = false;
+    },
+    addressSubmit() {
+      this.addressForm.memberId = this.id;
+      this.$refs.addressForm.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+          let submit = JSON.parse(JSON.stringify(this.addressForm));
+          submit.isDefault ? (submit.isDefault = true) : (submit.isDefault = false);
+          if (submit.id != "") {
+            API_Member.editMemberAddress(submit).then((res) => {
+              this.submitLoading = false;
+              if (res && res.success) {
+                this.$Message.success("修改成功");
+                this.addressModalVisible = false;
+                this.getAddressData();
+              }
+            });
+          } else {
+            API_Member.addMemberAddress(submit).then((res) => {
+              this.submitLoading = false;
+              if (res && res.success) {
+                this.$Message.success("添加成功");
+                this.addressModalVisible = false;
                 this.getAddressData();
               }
             });
           }
-        })
-      },
-      //查询TA的收货地址
-      getAddressData() {
-        this.loading = true;
-        API_Member.getMemberAddressData(this.id, this.addressSearchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.addressData = res.result.records;
-            this.addressTotal = res.result.total;
-          }
-        });
-        this.loading = false;
-      }
-      ,
-      //积分记录页数变化
-      pointChangePage(v) {
-        this.pointSearchForm.pageNumber = v;
-        this.getPointData();
-      }
-      ,
-      //积分记录页数变化
-      pointChangePageSize(v) {
-        this.pointSearchForm.pageNumber = 1;
-        this.pointSearchForm.pageSize = v;
-        this.getPointData();
-      }
-      ,
-      //会员地址记录页数变化
-      addressChangePage(v) {
-        this.addressSearchForm.pageNumber = v;
-        this.getAddressData()
-      }
-      ,
-      //会员地址记录页数变化
-      addressChangePageSize(v) {
-        this.addressSearchForm.pageNumber = 1;
-        this.addressSearchForm.pageSize = v;
-        this.getPointData();
-      },
-
-      //余额记录页数变化
-      walletChangePage(v) {
-        this.walletSearchForm.pageNumber = v;
-        this.getDepositLogData();
-      }
-      ,
-      //余额记录页数变化
-      walletChangePageSize(v) {
-        this.walletSearchForm.pageNumber = 1;
-        this.walletSearchForm.pageSize = v;
-        this.getDepositLogData();
-      },
-
-      //订单记录页数变化
-      orderChangePage(v) {
-        this.orderSearchForm.pageNumber = v;
-        this.getOrderData()
-      }
-      ,
-      //订单记录页数变化
-      orderChangePageSize(v) {
-        this.orderSearchForm.pageNumber = 1;
-        this.orderSearchForm.pageSize = v;
-        this.getOrderData();
-      },
-      // 起止时间从新赋值
-      selectDateRange(v) {
-        if (v) {
-          this.orderSearchForm.startDate = v[0];
-          this.orderSearchForm.endDate = v[1];
         }
-      },
+      });
     },
+    getAddress(val) {
+      if (val.type === "select") {
+        const paths = val.data.map((item) => item.name).join(",");
+        const ids = val.data.map((item) => item.id).join(",");
 
-    mounted() {
-      this.id = this.$route.query.id;
-      this.init();
-    }
-    ,
-  };
+        this.addressForm.consigneeAddressPath = paths;
+        this.addressForm.consigneeAddressIdPath = ids;
+
+        const coord = val.data[val.data.length - 1].center.split(",");
+        this.addressForm.lat = coord[1];
+        this.addressForm.lon = coord[0];
+      } else {
+        this.addressForm.consigneeAddressPath = val.data.addr;
+        this.addressForm.consigneeAddressIdPath = val.data.addrId;
+        this.addressForm.lat = val.data.position.lat;
+        this.addressForm.lon = val.data.position.lng;
+      }
+    },
+    memberAddressRemove(v) {
+      this.$Modal.confirm({
+        title: "删除",
+        content: "<p>确定要删除此收货地址？</p>",
+        onOk: () => {
+          API_Member.removeMemberAddress(v.id).then((res) => {
+            if (res.success) {
+              this.$Message.success("删除成功");
+              this.getAddressData();
+            }
+          });
+        },
+      });
+    },
+    getAddressData() {
+      this.loading = true;
+      API_Member.getMemberAddressData(this.id, this.addressSearchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.addressData = res.result.records;
+          this.addressTotal = res.result.total;
+        }
+      });
+      this.loading = false;
+    },
+    pointChangePage(v) {
+      this.pointSearchForm.pageNumber = v;
+      this.getPointData();
+    },
+    pointChangePageSize(v) {
+      this.pointSearchForm.pageNumber = 1;
+      this.pointSearchForm.pageSize = v;
+      this.getPointData();
+    },
+    addressChangePage(v) {
+      this.addressSearchForm.pageNumber = v;
+      this.getAddressData();
+    },
+    addressChangePageSize(v) {
+      this.addressSearchForm.pageNumber = 1;
+      this.addressSearchForm.pageSize = v;
+      this.getPointData();
+    },
+    walletChangePage(v) {
+      this.walletSearchForm.pageNumber = v;
+      this.getDepositLogData();
+    },
+    walletChangePageSize(v) {
+      this.walletSearchForm.pageNumber = 1;
+      this.walletSearchForm.pageSize = v;
+      this.getDepositLogData();
+    },
+    orderChangePage(v) {
+      this.orderSearchForm.pageNumber = v;
+      this.getOrderData();
+    },
+    orderChangePageSize(v) {
+      this.orderSearchForm.pageNumber = 1;
+      this.orderSearchForm.pageSize = v;
+      this.getOrderData();
+    },
+    selectDateRange(v) {
+      if (v) {
+        this.orderSearchForm.startDate = v[0];
+        this.orderSearchForm.endDate = v[1];
+      }
+    },
+  },
+  mounted() {
+    this.id = this.$route.query.id;
+    this.init();
+  },
+};
 </script>
 <style lang="scss" scoped>
-  @import "memberDetail.scss";
+@import "memberDetail.scss";
 </style>
diff --git a/manager/src/views/member/list/memberRecycle.vue b/manager/src/views/member/list/memberRecycle.vue
index d41a987c..54a9c74b 100644
--- a/manager/src/views/member/list/memberRecycle.vue
+++ b/manager/src/views/member/list/memberRecycle.vue
@@ -1,175 +1,173 @@
 <template>
   <div class="search">
-    <Row>
-      <Card>
-        <Row @keydown.enter.native="handleSearch">
-          <Form
-            ref="searchForm"
-            :model="searchForm"
-            inline
-            :label-width="70"
-            class="search-form"
-          >
-            <Form-item label="会员名称" prop="username">
-              <Input
-                type="text"
-                v-model="searchForm.username"
-                placeholder="请输入会员名称"
-                clearable
-                style="width: 240px"
-              />
-            </Form-item>
-
-            <Form-item label="联系方式" prop="mobile">
-              <Input
-                type="text"
-                v-model="searchForm.mobile"
-                placeholder="请输入会员联系方式"
-                clearable
-                style="width: 240px"
-              />
-            </Form-item>
-            <Button
-              @click="handleSearch"
-              class="search-btn"
-              type="primary"
-              icon="ios-search"
-              >搜索</Button
-            >
-          </Form>
-        </Row>
-      </Card>
-      <Card>
-        <Table
-          :loading="loading"
-          border
-          :columns="columns"
-          :data="data"
-          ref="table"
-          class="mt_10"
-          sortable="custom"
-        >
-        </Table>
-        <Row type="flex" justify="end" class="mt_10">
-          <Page
-            :current="searchForm.pageNumber"
-            :total="total"
-            :page-size="searchForm.pageSize"
-            @on-change="changePage"
-            @on-page-size-change="changePageSize"
-            :page-size-opts="[20, 50, 100]"
-            size="small"
-            show-total
-            show-elevator
-            show-sizer
-          ></Page>
-        </Row>
-      </Card>
-    </Row>
-
-    <!-- 修改模态框 -->
-    <Modal
-      v-model="descFlag"
-      :title="descTitle"
-      @on-ok="handleSubmitModal"
-      width="500"
-    >
-      <Form
-        ref="formValidate"
-        :model="formValidate"
-        :rules="ruleValidate"
-        :label-width="80"
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <FormItem label="头像">
+        <el-form-item label="会员名称" prop="username">
+          <el-input
+            v-model="searchForm.username"
+            placeholder="请输入会员名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="联系方式" prop="mobile">
+          <el-input
+            v-model="searchForm.mobile"
+            placeholder="请输入会员联系方式"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column prop="username" label="会员名称" min-width="150" align="left" show-overflow-tooltip />
+        <el-table-column prop="nickName" label="昵称" min-width="120" align="left" show-overflow-tooltip />
+        <el-table-column label="联系方式" min-width="130">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.mobile || "" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="注册时间" min-width="180" />
+        <el-table-column label="积分数量" min-width="120" align="left">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.point == void 0 ? "0" : row.point }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row" class="ops" style="display: flex; justify-content: center">
+              <template v-if="selectedMember">
+                <a class="link-text" @click="callback(row)">选择</a>
+                <span class="op-split">|</span>
+              </template>
+              <a class="link-text" @click="detail(row)">查看</a>
+              <template v-if="!selectedMember">
+                <span class="op-split">|</span>
+                <a class="link-text" @click="enable(row)">启用</a>
+                <span class="op-split">|</span>
+                <a class="link-text" @click="editPerm(row)">编辑</a>
+              </template>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog v-model="descFlag" :title="descTitle" width="500px" destroy-on-close>
+      <el-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-width="80px">
+        <el-form-item label="头像">
           <img :src="formValidate.face" class="face" />
-          <Button
-            type="text"
+          <el-button
+            type="primary"
+            link
             class="upload"
             @click="
               () => {
-                this.picModelFlag = true;
-                this.$refs.ossManage.selectImage = true;
+                picModelFlag = true;
+                $refs.ossManage.selectImage = true;
               }
             "
-            >修改
-          </Button>
+          >修改</el-button>
           <input type="file" style="display: none" id="file" />
-        </FormItem>
-        <FormItem label="会员名称" prop="name">
-          <Input
-            v-model="formValidate.username"
-            style="width: 200px"
-            disabled
-          />
-        </FormItem>
-        <FormItem label="用户昵称" prop="name">
-          <Input v-model="formValidate.nickName" style="width: 200px" />
-        </FormItem>
-        <FormItem label="性别" prop="sex">
-          <RadioGroup
-            type="button"
-            button-style="solid"
-            v-model="formValidate.sex"
-          >
-            <Radio :label="1">
-              <span>男</span>
-            </Radio>
-            <Radio :label="0">
-              <span>女</span>
-            </Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="修改密码" prop="password">
-          <Input
-            type="password"
-            style="width: 220px"
-            password
-            v-model="formValidate.newPassword"
-          />
-        </FormItem>
-        <FormItem label="生日" prop="birthday">
-          <DatePicker
-            type="date"
-            format="yyyy-MM-dd"
+        </el-form-item>
+        <el-form-item label="会员名称" prop="name">
+          <el-input v-model="formValidate.username" style="width: 200px" disabled />
+        </el-form-item>
+        <el-form-item label="用户昵称" prop="name">
+          <el-input v-model="formValidate.nickName" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="性别" prop="sex">
+          <el-radio-group v-model="formValidate.sex">
+            <el-radio-button :value="1">男</el-radio-button>
+            <el-radio-button :value="0">女</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="修改密码" prop="password">
+          <el-input v-model="formValidate.newPassword" type="password" show-password style="width: 220px" />
+        </el-form-item>
+        <el-form-item label="生日" prop="birthday">
+          <el-date-picker
             v-model="formValidate.birthday"
+            type="date"
+            value-format="YYYY-MM-DD"
             style="width: 220px"
-          ></DatePicker>
-        </FormItem>
-        <FormItem label="所在地" prop="mail">
-          {{ formValidate.region || '暂无地址' }}
-          <Button style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>
-        </FormItem>
-      </Form>
-    </Modal>
-    <Modal width="1200px" v-model="picModelFlag">
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-    </Modal>
+          />
+        </el-form-item>
+        <el-form-item label="所在地" prop="mail">
+          {{ formValidate.region || "暂无地址" }}
+          <el-button style="margin-left: 10px" @click="$refs.map.open()">选择</el-button>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="descFlag = false">取消</el-button>
+        <el-button type="primary" @click="handleSubmitModal">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="picModelFlag" width="1200px">
+      <ossManage
+        ref="ossManage"
+        @callback="callbackSelected"
+        :isComponent="true"
+        :initialize="picModelFlag"
+      />
+    </el-dialog>
     <multipleMap ref="map" @callback="selectedRegion" />
   </div>
 </template>
 
 <script>
-
 import * as API_Member from "@/api/member.js";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 import multipleMap from "@/components/map/multiple-map";
+
 export default {
   name: "memberRecycle",
   components: {
-
     ossManage,
-    multipleMap
+    multipleMap,
   },
   data() {
     return {
-      selectedMember: false, //是否是其他组件调用
-      descTitle: "", // modal标题
-      descFlag: false, //编辑查看框
-      openSearch: true, // 显示搜索
-      loading: true, // 表单加载状态
-
+      selectedMember: false,
+      descTitle: "",
+      descFlag: false,
+      openSearch: true,
+      loading: true,
       searchForm: {
-        // 请求参数
         pageNumber: 1,
         pageSize: 20,
         order: "desc",
@@ -177,198 +175,72 @@ export default {
         mobile: "",
         disabled: "CLOSE",
       },
-      picModelFlag: false, // 选择图片
-      formValidate: {}, // 表单数据
-      ruleValidate: {}, //修改验证
-      columns: [
-        {
-          title: "会员名称",
-          align: "left",
-          key: "username",
-          tooltip: true,
-        },
-        {
-          title: "昵称",
-          align: "left",
-          key: "nickName",
-          tooltip: true,
-        },
-        {
-          title: "联系方式",
-          width: 130,
-          key: "mobile",
-          render: (h, params) => {
-            if (params.row.mobile == null) {
-              return h("div", [h("span", {}, "")]);
-            } else {
-              return h("div", [h("span", {}, params.row.mobile)]);
-            }
-          },
-        },
-        {
-          title: "注册时间",
-          key: "createTime",
-          width: 180,
-        },
-
-        {
-          title: "积分数量",
-          align: "left",
-          width: 120,
-          render: (h, params) => {
-            return h(
-              "div",
-              {},
-              params.row.point == void 0 ? "0" : params.row.point
-            );
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 200,
-          fixed: "right",
-          render: (h, params) => {
-            const linkStyle = {
-              color: "#2d8cf0",
-              cursor: "pointer",
-              textDecoration: "none",
-            };
-            const sep = h(
-              "span",
-              { style: { margin: "0 8px", color: "#dcdee2" } },
-              "|"
-            );
-            const children = [];
-            if (this.selectedMember) {
-              children.push(
-                h(
-                  "a",
-                  { style: linkStyle, on: { click: () => this.callback(params.row) } },
-                  "选择"
-                )
-              );
-              children.push(sep);
-            }
-            children.push(
-              h(
-                "a",
-                { style: linkStyle, on: { click: () => this.detail(params.row) } },
-                "查看"
-              )
-            );
-            if (!this.selectedMember) {
-              children.push(sep);
-              children.push(
-                h(
-                  "a",
-                  { style: linkStyle, on: { click: () => this.enable(params.row) } },
-                  "启用"
-                )
-              );
-              children.push(sep);
-              children.push(
-                h(
-                  "a",
-                  { style: linkStyle, on: { click: () => this.editPerm(params.row) } },
-                  "编辑"
-                )
-              );
-            }
-            return h(
-              "div",
-              { class: "ops", style: { display: "flex", justifyContent: "center" } },
-              children
-            );
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      picModelFlag: false,
+      formValidate: {},
+      ruleValidate: {},
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 回调给父级
     callback(val) {
       this.$emit("callback", val);
     },
-    // 初始化数据
     init() {
       this.getData();
     },
-    // 分页 修改页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getData();
     },
-    // 分页 修改页数
-    changePageSize(v) {
+    changePageSize() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
       this.getData();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getData();
     },
-    //查看详情修改
     editPerm(val) {
       this.descTitle = `查看用户 ${val.username}`;
       this.descFlag = true;
-
       this.getMemberInfo(val.id);
     },
-    /**
-     * 查询查看会员详情
-     */
     getMemberInfo(id) {
       API_Member.getMemberInfoData(id).then((res) => {
         if (res.result) {
-          this.$set(this, "formValidate", res.result);
+          this.formValidate = res.result;
         }
       });
     },
-    //查询会员列表
     getData() {
+      this.loading = true;
       API_Member.getMemberListData(this.searchForm).then((res) => {
+        this.loading = false;
         if (res.success) {
-          this.loading = false;
           this.data = res.result.records;
           this.total = res.result.total;
         }
       });
     },
-    // 选中的图片
     callbackSelected(val) {
       this.picModelFlag = false;
       this.formValidate.face = val.url;
     },
-
-    // 选中的地址
     selectedRegion(val) {
-      if(val.type === 'select'){
-        const paths = val.data.map(item => item.name).join(',')
-        const ids = val.data.map(item => item.id).join(',')
-
-        this.$set(this.formValidate,'region',paths)
-        this.$set(this.formValidate,'regionId',ids)
-
-      }
-      else{
-        this.$set(this.formValidate,'region',val.data.addr)
-        this.$set(this.formValidate,'regionId',val.data.addrId)
+      if (val.type === "select") {
+        const paths = val.data.map((item) => item.name).join(",");
+        const ids = val.data.map((item) => item.id).join(",");
+        this.formValidate.region = paths;
+        this.formValidate.regionId = ids;
+      } else {
+        this.formValidate.region = val.data.addr;
+        this.formValidate.regionId = val.data.addrId;
       }
     },
-
-    //详细
     detail(row) {
-      this.$options.filters.customRouterPush({ name: "member-detail", query: { id: row.id } })
-
+      this.$filters.customRouterPush({ name: "member-detail", query: { id: row.id } });
     },
-    //启用会员
     enable(v) {
       let params = {
         memberIds: [v.id],
@@ -382,26 +254,19 @@ export default {
             if (res.success) {
               this.$Message.success("启用成功");
               this.getData();
-            } else {
-              // this.$Message.error(res.message);
             }
           });
         },
       });
     },
-
-    // 提交修改数据
     handleSubmitModal() {
-      const { nickName, sex, username, face, newPassword, id ,regionId,region} =
-        this.formValidate;
+      const { nickName, sex, username, face, newPassword, id, regionId, region } = this.formValidate;
       let time = new Date(this.formValidate.birthday);
-      let birthday =
-        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
+      let birthday = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
       let submit = {
-        regionId:regionId,
+        regionId: regionId,
         region: region,
         nickName,
-
         sex,
         birthday,
         face: face || "",
@@ -413,6 +278,7 @@ export default {
       API_Member.updateMember(submit).then((res) => {
         if (res.result) {
           this.$Message.success("修改成功！");
+          this.descFlag = false;
           this.init();
         }
       });
diff --git a/manager/src/views/member/message-manage/weChatMessageManager.vue b/manager/src/views/member/message-manage/weChatMessageManager.vue
index 599a5a04..97654483 100644
--- a/manager/src/views/member/message-manage/weChatMessageManager.vue
+++ b/manager/src/views/member/message-manage/weChatMessageManager.vue
@@ -1,98 +1,108 @@
 <template>
   <div>
-    <!--微信模板-->
-    <Modal v-model="wechatModal" width="530">
-      <p slot="header">
-        <Icon type="edit"></Icon>
-        <span>微信设置</span>
-      </p>
-      <div>
-        <Form ref="wechatFormData" :model="wechatFormData" label-position="left" :label-width="100">
-          <FormItem v-if="tab === 'WECHAT'" label="模板名称">
-            <Input v-model="wechatFormData.name" size="large" maxlength="9" disabled></Input>
-          </FormItem>
-          <FormItem v-if="tab === 'WECHAT'" label="头部信息" prop="first">
-            <Input v-model="wechatFormData.first" size="large" maxlength="50"></Input>
-          </FormItem>
-          <FormItem v-if="tab === 'WECHAT'" label="备注" prop="remark">
-            <Input class='textarea' :rows="5" :autosize="{maxRows:5,minRows: 5}" v-model="wechatFormData.remark"
-                   type="textarea" maxlength="150"/>
-          </FormItem>
-          <FormItem label="是否开启" prop="enable">
-            <i-switch v-model="wechatFormData.enable" size="large">
-              <span slot="open">开启</span>
-              <span slot="close">关闭</span>
-            </i-switch>
-          </FormItem>
-        </Form>
+    <el-dialog v-model="wechatModal" title="微信设置" width="530px">
+      <el-form ref="wechatFormData" :model="wechatFormData" label-width="100px">
+        <el-form-item v-if="tab === 'WECHAT'" label="模板名称">
+          <el-input v-model="wechatFormData.name" maxlength="9" disabled />
+        </el-form-item>
+        <el-form-item v-if="tab === 'WECHAT'" label="头部信息" prop="first">
+          <el-input v-model="wechatFormData.first" maxlength="50" />
+        </el-form-item>
+        <el-form-item v-if="tab === 'WECHAT'" label="备注" prop="remark">
+          <el-input v-model="wechatFormData.remark" type="textarea" :rows="5" maxlength="150" />
+        </el-form-item>
+        <el-form-item label="是否开启" prop="enable">
+          <el-switch v-model="wechatFormData.enable" active-text="开启" inactive-text="关闭" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button v-if="tab === 'WECHAT'" type="primary" @click="wechatFormDataEdit">保存</el-button>
+        <el-button v-else type="primary" @click="wechatMPFormDataEdit">保存</el-button>
+      </template>
+    </el-dialog>
 
-      </div>
-      <div slot="footer" style="text-align: right">
-        <Button v-if="tab === 'WECHAT'"  type="primary"  @click="wechatFormDataEdit">保存</Button>
-
-        <Button v-else  type="primary" @click="wechatMPFormDataEdit">保存</Button>
-      </div>
-    </Modal>
-
-  <Card>
-    <Tabs @on-click="tabPaneChange" v-model="tab">
-      <TabPane label="微信消息" name="WECHAT">
-        <div class="search">
-            <Row class="operation mt_10">
-              <Button @click="weChatSync" type="primary">初始化微信消息</Button>
-            </Row>
-            <Table
-              :loading="loading"
-              border
-              :columns="weChatColumns"
-              :data="weChatData"
-              ref="weChatTable"
-            ></Table>
-            <Row type="flex" justify="end" class="mt_10">
-              <Page
-                :current="weChatSearchForm.pageNumber"
+    <el-card>
+      <el-tabs v-model="tab" @tab-click="tabPaneChange">
+        <el-tab-pane label="微信消息" name="WECHAT">
+          <div class="search">
+            <div class="operation mt_10">
+              <el-button type="primary" @click="weChatSync">初始化微信消息</el-button>
+            </div>
+            <el-table v-loading="loading" border :data="weChatData" ref="weChatTable" style="width: 100%">
+              <el-table-column prop="code" label="模板编号" width="500" sortable />
+              <el-table-column label="是否开启" width="150" sortable>
+                <template #default="{ row }">
+                  <span v-if="row">{{ row.enable ? "开启" : "关闭" }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="name" label="模板名称" width="200" sortable />
+              <el-table-column prop="createTime" label="创建时间" sortable />
+              <el-table-column label="操作" width="200" align="center" fixed="right">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <a class="link-text" @click="wechatSettingAlert(row)">编辑</a>
+                    <span class="op-split">|</span>
+                    <a class="link-text" @click="delWeChat(row)">删除</a>
+                  </template>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="mt_10" style="display: flex; justify-content: flex-end">
+              <el-pagination
+                v-model:current-page="weChatSearchForm.pageNumber"
+                v-model:page-size="weChatSearchForm.pageSize"
+                :page-sizes="[20, 50, 100]"
                 :total="weChatTotal"
-                :page-size="weChatSearchForm.pageSize"
-                @on-change="changePage"
-                @on-page-size-change="changePageSize"
-                :page-size-opts="[20, 50, 100]"
+                layout="total, sizes, prev, pager, next"
                 size="small"
-              ></Page>
-            </Row>
-        </div>
-      </TabPane>
+                @current-change="changePage"
+                @size-change="changePageSize"
+              />
+            </div>
+          </div>
+        </el-tab-pane>
 
-      <TabPane label="微信小程序订阅消息" name="WECHATMP">
-        <div class="search">
-            <Row class="operation mt_10">
-              <Button @click="weChatSync('mp')" type="primary">初始化微信小程序订阅消息</Button>
-            </Row>
-            <Table
-              :loading="loading"
-              border
-              :columns="weChatColumns"
-              :data="weChatMPData"
-              sortable="custom"
-              ref="weChatMPTable"
-            ></Table>
-            <Row type="flex" justify="end" class="mt_10">
-              <Page
-                :current="weChatMPSearchForm.pageNumber"
+        <el-tab-pane label="微信小程序订阅消息" name="WECHATMP">
+          <div class="search">
+            <div class="operation mt_10">
+              <el-button type="primary" @click="weChatSync('mp')">初始化微信小程序订阅消息</el-button>
+            </div>
+            <el-table v-loading="loading" border :data="weChatMPData" ref="weChatMPTable" style="width: 100%">
+              <el-table-column prop="code" label="模板编号" width="500" sortable />
+              <el-table-column label="是否开启" width="150" sortable>
+                <template #default="{ row }">
+                  <span v-if="row">{{ row.enable ? "开启" : "关闭" }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="name" label="模板名称" width="200" sortable />
+              <el-table-column prop="createTime" label="创建时间" sortable />
+              <el-table-column label="操作" width="200" align="center" fixed="right">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <a class="link-text" @click="wechatSettingAlert(row)">编辑</a>
+                    <span class="op-split">|</span>
+                    <a class="link-text" @click="delWeChat(row)">删除</a>
+                  </template>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="mt_10" style="display: flex; justify-content: flex-end">
+              <el-pagination
+                v-model:current-page="weChatMPSearchForm.pageNumber"
+                v-model:page-size="weChatMPSearchForm.pageSize"
+                :page-sizes="[20, 50, 100]"
                 :total="weChatMPTotal"
-                :page-size="weChatMPSearchForm.pageSize"
-                @on-change="changePage"
-                @on-page-size-change="changePageSize"
-                :page-size-opts="[20, 50, 100]"
+                layout="total, sizes, prev, pager, next"
                 size="small"
-              ></Page>
-            </Row>
-        </div>
-      </TabPane>
-    </Tabs>
-     </Card>
+                @current-change="changePage"
+                @size-change="changePageSize"
+              />
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
   </div>
-
-
 </template>
 
 <script>
@@ -101,257 +111,147 @@ import {
   getWechatMessagePage,
   editWechatMessageTemplate,
   delWechatMessageTemplate,
-
   wechatMPMessageSync,
   getWechatMPMessagePage,
   editWechatMPMessageTemplate,
-  delWechatMPMessageTemplate
+  delWechatMPMessageTemplate,
 } from "@/api/setting";
 
 export default {
   title: "wechat-message-manage",
   data() {
     return {
-
-      wechatModal: false,// modal展示
-      wechatFormData: {}, // 微信数据
-      wechatMPFormData: {}, // 微信订阅消息
-      tab: "WECHAT", // tab栏分类
-      searchForm: { // 请求参数
-        type: "WECHAT"
-      },
-      loading: true, // 表单加载状态
-      id: '', // 模板id
-      //微信消息查询
-      weChatSearchForm: {
-        // 搜索框对应data对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-      },
-      weChatMPSearchForm: {
-        // 搜索框对应data对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-      },
-      weChatColumns: [
-        {
-          title: "模板编号",
-          key: "code",
-          width: 500,
-          sortable: true
-        },
-        {
-          title: "是否开启",
-          key: "enable",
-          sortable: true,
-          width: 150,
-          render: (h, params) => {
-            if (params.row.enable == true) {
-              return h('div', [
-                h('span', {}, '开启'),
-              ]);
-            } else {
-              return h('div', [
-                h('span', {}, '关闭'),
-              ]);
-            }
-          },
-        },
-        {
-          title: "模板名称",
-          key: "name",
-          width: 200,
-          sortable: true
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          sortable: true,
-          sortType: "desc",
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 200,
-          align: "center",
-          fixed: "right",
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none"
-                  },
-                  on: {
-                    click: () => {
-                      this.wechatSettingAlert(params.row);
-                    }
-                  }
-                },
-                "编辑"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none"
-                  },
-                  on: {
-                    click: () => {
-                      this.delWeChat(params.row);
-                    }
-                  }
-                },
-                "删除"
-              )
-            ]);
-          }
-        }
-      ],
-      weChatData: [], // 表单数据
-      weChatMPData: [], // 表单数据
-      weChatTotal: 0, // 表单数据总数
-      weChatMPTotal: 0, // 表单数据总数
+      wechatModal: false,
+      wechatFormData: {},
+      wechatMPFormData: {},
+      tab: "WECHAT",
+      searchForm: { type: "WECHAT" },
+      loading: true,
+      id: "",
+      weChatSearchForm: { pageNumber: 1, pageSize: 20 },
+      weChatMPSearchForm: { pageNumber: 1, pageSize: 20 },
+      weChatData: [],
+      weChatMPData: [],
+      weChatTotal: 0,
+      weChatMPTotal: 0,
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getDataList();
     },
     changePage(v) {
       this.searchForm.type = this.tab;
-      this.getDataList();
+      if (this.tab === "WECHAT") {
+        this.weChatSearchForm.pageNumber = v;
+        this.getWechatMessagePage();
+      } else {
+        this.weChatMPSearchForm.pageNumber = v;
+        this.getWechatMPMessagePage();
+      }
     },
     changePageSize(v) {
       this.searchForm.type = this.tab;
-      this.getDataList();
+      if (this.tab === "WECHAT") {
+        this.weChatSearchForm.pageSize = v;
+        this.getWechatMessagePage();
+      } else {
+        this.weChatMPSearchForm.pageSize = v;
+        this.getWechatMPMessagePage();
+      }
     },
-    //微信弹出框
     wechatSettingAlert(v) {
-      this.wechatFormData = v
-      this.id = v.id
-      this.wechatModal = true
+      this.wechatFormData = v;
+      this.id = v.id;
+      this.wechatModal = true;
     },
-
-    //同步微信消息
     weChatSync(mp) {
       this.$Modal.confirm({
         title: "提示",
-        // 记得确认修改此处
         content: "确认要初始化微信小程序消息订阅?",
         loading: true,
         onOk: () => {
-          // 同步微信消息模板
-
           if (mp === "mp") {
-            wechatMPMessageSync().then(res => {
+            wechatMPMessageSync().then((res) => {
               this.$Modal.remove();
               if (res.success) {
-                this.$Message.success('微信小程序消息订阅初始化');
+                this.$Message.success("微信小程序消息订阅初始化");
+                this.getWechatMPMessagePage();
               }
             });
           } else {
-            // 同步微信消息模板
-            wechatMessageSync().then(res => {
+            wechatMessageSync().then((res) => {
               this.$Modal.remove();
               if (res.success) {
-                this.$Message.success('微信消息模板初始化成功');
+                this.$Message.success("微信消息模板初始化成功");
+                this.getWechatMessagePage();
               }
             });
           }
+        },
+      });
+    },
+    wechatFormDataEdit() {
+      this.$refs.wechatFormData.validate((valid) => {
+        if (valid) {
+          if (!this.wechatFormData.updateTime) {
+            this.wechatFormData.updateTime = "";
+          }
+          editWechatMessageTemplate(this.id, this.wechatFormData).then((res) => {
+            if (res.message === "success") {
+              this.$Message.success("微信模板修改成功");
+              this.wechatModal = false;
+              this.getWechatMessagePage();
+            }
+          });
         }
       });
     },
-    //微信设置保存
-    wechatFormDataEdit() {
-      this.$refs['wechatFormData'].validate((valid) => {
-        if (valid) {
-          if(!this.wechatFormData.updateTime){
-            this.wechatFormData.updateTime = ''
-          }
-          editWechatMessageTemplate(this.id, this.wechatFormData).then(res => {
-            if (res.message === 'success') {
-              this.$Message.success('微信模板修改成功');
-              this.wechatModal = false;
-              this.getWechatMessagePage();
-            }
-          });
-        }
-      })
-    },
     wechatMPFormDataEdit() {
-      this.$refs['wechatFormData'].validate((valid) => {
+      this.$refs.wechatFormData.validate((valid) => {
         if (valid) {
-          editWechatMPMessageTemplate(this.id, this.wechatMPFormData).then(res => {
-            if (res.message === 'success') {
-              this.$Message.success('微信消息订阅模板修改成功');
+          editWechatMPMessageTemplate(this.id, this.wechatMPFormData).then((res) => {
+            if (res.message === "success") {
+              this.$Message.success("微信消息订阅模板修改成功");
               this.wechatModal = false;
-              this.getWechatMessagePage();
+              this.getWechatMPMessagePage();
             }
           });
         }
-      })
+      });
     },
-
-    //删除微信模消息
     delWeChat(v) {
       this.$Modal.confirm({
         title: "提示",
         content: "确定删除此模板?",
         loading: true,
         onOk: () => {
-          // 删除微信消息模板
           if (this.tab === "WECHAT") {
-            delWechatMessageTemplate(v.id).then(res => {
+            delWechatMessageTemplate(v.id).then((res) => {
               if (res.success) {
                 this.$Modal.remove();
-                this.$Message.success('微信模板删除成功');
-                this.getWechatMessagePage()
+                this.$Message.success("微信模板删除成功");
+                this.getWechatMessagePage();
               }
             });
           } else {
-            delWechatMPMessageTemplate(v.id).then(res => {
+            delWechatMPMessageTemplate(v.id).then((res) => {
               if (res.success) {
                 this.$Modal.remove();
-                this.$Message.success('微信消息订阅删除成功');
-                this.getWechatMessagePage()
+                this.$Message.success("微信消息订阅删除成功");
+                this.getWechatMPMessagePage();
               }
             });
           }
-        }
+        },
       });
-
-    },
-    selectDateRange(v) {
-      if (v) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      }
     },
     getDataList() {
-      this.loading = true;
-      getWechatMessagePage(this.searchWe).then(res => {
-        this.loading = false;
-        if (res.success) {
-          this.weChatData = res.result.records;
-          this.weChatTotal = res.result.total;
-        }
-      });
+      this.getWechatMessagePage();
     },
-    //分页获取微信消息
     getWechatMessagePage() {
-      getWechatMessagePage(this.weChatSearchForm).then(res => {
+      this.loading = true;
+      getWechatMessagePage(this.weChatSearchForm).then((res) => {
         this.loading = false;
         if (res.success) {
           this.weChatData = res.result.records;
@@ -359,9 +259,9 @@ export default {
         }
       });
     },
-    //分页获取微信小程序消息订阅
     getWechatMPMessagePage() {
-      getWechatMPMessagePage(this.weChatMPSearchForm).then(res => {
+      this.loading = true;
+      getWechatMPMessagePage(this.weChatMPSearchForm).then((res) => {
         this.loading = false;
         if (res.success) {
           this.weChatMPData = res.result.records;
@@ -369,20 +269,30 @@ export default {
         }
       });
     },
-    //tab切换事件
-    tabPaneChange(v) {
+    tabPaneChange(tab) {
+      const v = tab.paneName || this.tab;
       this.searchForm.type = v;
-      //如果是微信消息则走单独的接口
       if (v === "WECHAT") {
         this.getWechatMessagePage();
       } else if (v === "WECHATMP") {
         this.getWechatMPMessagePage();
       }
-
-    }
+    },
   },
   mounted() {
     this.init();
-  }
+  },
 };
 </script>
+<style scoped>
+.link-text {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  display: inline-block;
+  margin: 0 8px;
+  color: #dcdee2;
+}
+</style>
diff --git a/manager/src/views/member/point/point.vue b/manager/src/views/member/point/point.vue
index aed7044c..578b59e3 100644
--- a/manager/src/views/member/point/point.vue
+++ b/manager/src/views/member/point/point.vue
@@ -1,518 +1,434 @@
 <template>
   <div class="search">
-    <Card class="points-statistics-card">
-      <Row type="flex" justify="space-around" align="middle" class="points-statistics">
-        <Col :xs="24" :sm="12" class="points-statistics-item">
+    <el-card class="points-statistics-card">
+      <el-row type="flex" justify="space-around" align="middle" class="points-statistics">
+        <el-col :xs="24" :sm="12" class="points-statistics-item">
           <div class="points-statistics-title">已发放积分数</div>
           <div class="points-statistics-subtitle">历史累计发放积分数</div>
           <div class="points-statistics-value">{{ formatNumber(pointsStatistics.totalPoint) }}</div>
-        </Col>
-        <Col :xs="24" :sm="12" class="points-statistics-item">
+        </el-col>
+        <el-col :xs="24" :sm="12" class="points-statistics-item">
           <div class="points-statistics-title">未使用积分数</div>
           <div class="points-statistics-subtitle">会员账户未使用积分数</div>
           <div class="points-statistics-value">{{ formatNumber(pointsStatistics.unUsedPoint) }}</div>
-        </Col>
-      </Row>
-    </Card>
+        </el-col>
+      </el-row>
+    </el-card>
     <div class="point-tabs-wrap">
-      <Tabs v-model="activeTab" class="point-tabs">
-      <TabPane label="积分列表" name="pointList">
-        <Card class="point-content-card">
-          <Form
-            @keydown.enter.native="handleMemberSearch"
-            ref="memberSearchForm"
-            :model="memberSearchForm"
-            inline
-            :label-width="70"
-            @submit.native.prevent
-            class="search-form"
-          >
-            <Form-item label="客户名称" prop="nickName">
-              <Input
-                v-model="memberSearchForm.nickName"
-                placeholder="请输入客户名称"
-                clearable
-                style="width: 180px"
+      <el-tabs v-model="activeTab" class="point-tabs">
+        <el-tab-pane label="积分列表" name="pointList">
+          <el-card class="point-content-card">
+            <el-form
+              ref="memberSearchForm"
+              :model="memberSearchForm"
+              inline
+              label-width="70px"
+              class="search-form"
+              @keyup.enter="handleMemberSearch"
+            >
+              <el-form-item label="客户名称" prop="nickName">
+                <el-input
+                  v-model="memberSearchForm.nickName"
+                  placeholder="请输入客户名称"
+                  clearable
+                  style="width: 180px"
+                />
+              </el-form-item>
+              <el-form-item label="客户账号" prop="username">
+                <el-input
+                  v-model="memberSearchForm.username"
+                  placeholder="请输入客户账号"
+                  clearable
+                  style="width: 180px"
+                />
+              </el-form-item>
+              <el-form-item label="账号状态" prop="disabled">
+                <el-select
+                  v-model="memberSearchForm.disabled"
+                  clearable
+                  placeholder="请选择账号状态"
+                  style="width: 160px"
+                >
+                  <el-option label="启用" value="OPEN" />
+                  <el-option label="禁用" value="CLOSE" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="积分值">
+                <el-input-number
+                  v-model="memberSearchForm.minPoint"
+                  :min="0"
+                  :precision="0"
+                  placeholder="最小积分值"
+                  style="width: 140px"
+                />
+                <span class="point-range-separator">-</span>
+                <el-input-number
+                  v-model="memberSearchForm.maxPoint"
+                  :min="0"
+                  :precision="0"
+                  placeholder="最大积分值"
+                  style="width: 140px"
+                />
+              </el-form-item>
+              <el-form-item>
+                <el-button class="search-btn" type="primary" @click="handleMemberSearch">搜索</el-button>
+              </el-form-item>
+            </el-form>
+          </el-card>
+          <el-card class="point-content-card member-list-card">
+            <template #header>
+              <div class="card-title">用户列表</div>
+            </template>
+            <el-table
+              v-loading="memberLoading"
+              :data="memberData"
+              class="member-table"
+              style="width: 100%"
+            >
+              <el-table-column label="客户名称" width="180" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span v-if="row">{{ row.nickName || "-" }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="客户账号" width="180" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span v-if="row">{{ row.username || "-" }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="账号状态" width="180">
+                <template #default="{ row }">
+                  <el-tag v-if="row" :type="row.disabled === true ? 'success' : 'info'">
+                    {{ row.disabled === true ? "启用" : "禁用" }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="积分余额" width="180">
+                <template #default="{ row }">
+                  <span v-if="row">{{ row.point == null ? 0 : row.point }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="100" align="center">
+                <template #default="{ row }">
+                  <a v-if="row" class="link-text" @click="detail(row)">详情</a>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="mt_10" style="display: flex; justify-content: flex-end">
+              <el-pagination
+                v-model:current-page="memberSearchForm.pageNumber"
+                v-model:page-size="memberSearchForm.pageSize"
+                :page-sizes="[20, 50, 100]"
+                :total="memberTotal"
+                layout="total, sizes, prev, pager, next, jumper"
+                size="small"
+                @current-change="changeMemberPage"
+                @size-change="changeMemberPageSize"
               />
-            </Form-item>
-            <Form-item label="客户账号" prop="username">
-              <Input
-                v-model="memberSearchForm.username"
-                placeholder="请输入客户账号"
-                clearable
-                style="width: 180px"
+            </div>
+          </el-card>
+        </el-tab-pane>
+        <el-tab-pane label="积分增减记录" name="pointChangeRecord">
+          <el-card class="point-content-card">
+            <el-form
+              ref="searchForm"
+              :model="searchForm"
+              inline
+              label-width="70px"
+              class="search-form"
+              @keyup.enter="handleSearch"
+            >
+              <el-form-item label="会员名称" prop="username">
+                <el-input
+                  v-model="searchForm.memberName"
+                  placeholder="请输入会员名称"
+                  clearable
+                  style="width: 240px"
+                />
+              </el-form-item>
+              <el-form-item>
+                <el-button class="search-btn" type="primary" @click="handleSearch">搜索</el-button>
+              </el-form-item>
+            </el-form>
+          </el-card>
+          <el-card class="point-content-card">
+            <el-table
+              v-loading="loading"
+              border
+              :data="data"
+              ref="table"
+              class="mt_10 point-table"
+              style="width: 100%"
+            >
+              <el-table-column prop="memberName" label="会员名称" min-width="120" show-overflow-tooltip />
+              <el-table-column prop="content" label="操作内容" min-width="200" show-overflow-tooltip />
+              <el-table-column prop="beforePoint" label="之前积分" width="200" />
+              <el-table-column label="变动积分" width="200">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <priceColorScheme
+                      v-if="row.pointType === 'INCREASE'"
+                      :value="row.variablePoint"
+                      color="green"
+                      unit="+"
+                    />
+                    <priceColorScheme
+                      v-else
+                      :value="row.variablePoint"
+                      :color="$mainColor"
+                      unit="-"
+                    />
+                  </template>
+                </template>
+              </el-table-column>
+              <el-table-column prop="point" label="当前积分" width="200" />
+              <el-table-column prop="createTime" label="操作时间" width="200" />
+            </el-table>
+            <div class="mt_10" style="display: flex; justify-content: flex-end">
+              <el-pagination
+                v-model:current-page="searchForm.pageNumber"
+                v-model:page-size="searchForm.pageSize"
+                :page-sizes="[20, 50, 100]"
+                :total="total"
+                layout="total, sizes, prev, pager, next, jumper"
+                size="small"
+                @current-change="changePage"
+                @size-change="changePageSize"
               />
-            </Form-item>
-            <Form-item label="账号状态" prop="disabled">
-              <Select
-                v-model="memberSearchForm.disabled"
-                clearable
-                placeholder="请选择账号状态"
-                style="width: 160px"
-              >
-                <Option value="OPEN">启用</Option>
-                <Option value="CLOSE">禁用</Option>
-              </Select>
-            </Form-item>
-            <Form-item label="积分值">
-              <InputNumber
-                v-model="memberSearchForm.minPoint"
-                :min="0"
-                :precision="0"
-                placeholder="最小积分值"
-                style="width: 140px"
-              />
-              <span class="point-range-separator">-</span>
-              <InputNumber
-                v-model="memberSearchForm.maxPoint"
-                :min="0"
-                :precision="0"
-                placeholder="最大积分值"
-                style="width: 140px"
-              />
-            </Form-item>
-            <Button @click="handleMemberSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>
-          </Form>
-        </Card>
-        <Card class="point-content-card member-list-card">
-          <div slot="title" class="card-title">用户列表</div>
-          <Table
-            :loading="memberLoading"
-            :columns="memberColumns"
-            :data="memberData"
-            class="member-table"
-          >
-          </Table>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page
-              :current="memberSearchForm.pageNumber"
-              :total="memberTotal"
-              :page-size="memberSearchForm.pageSize"
-              @on-change="changeMemberPage"
-              @on-page-size-change="changeMemberPageSize"
-              :page-size-opts="[20, 50, 100]"
-              size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-          </Row>
-        </Card>
-      </TabPane>
-      <TabPane label="积分增减记录" name="pointChangeRecord">
-        <Card class="point-content-card">
-          <Form
-            @keydown.enter.native="handleSearch"
-            ref="searchForm"
-            :model="searchForm"
-            inline
-            :label-width="70"
-            @submit.native.prevent
-            class="search-form"
-          >
-            <Form-item label="会员名称" prop="username">
-              <Input
-                type="text"
-                v-model="searchForm.memberName"
-                placeholder="请输入会员名称"
-                clearable
-                style="width: 240px"
-              />
-            </Form-item>
-            <Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>
-          </Form>
-        </Card>
-        <Card class="point-content-card">
-          <Table
-            :loading="loading"
-            border
-            :columns="columns"
-            :data="data"
-            ref="table"
-            class="mt_10 point-table"
-          >
-          </Table>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page
-              :current="searchForm.pageNumber"
-              :total="total"
-              :page-size="searchForm.pageSize"
-              @on-change="changePage"
-              @on-page-size-change="changePageSize"
-              :page-size-opts="[20, 50, 100]"
-              size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-          </Row>
-        </Card>
-      </TabPane>
-      </Tabs>
+            </div>
+          </el-card>
+        </el-tab-pane>
+      </el-tabs>
     </div>
   </div>
 </template>
 
 <script>
+import * as API_Member from "@/api/member.js";
 
-  import * as API_Member from "@/api/member.js";
-
-  export default {
-    // 积分历史页面
-    name: "point",
-    data() {
-      return {
-        activeTab: "pointList",
-        loading: true, // 表单加载状态
-        memberLoading: false,
-        pointsStatistics: {
-          totalPoint: 0,
-          unUsedPoint: 0,
-        },
-        searchForm: { // 请求参数
-          pageNumber: 1,
-          pageSize: 20,
-        },
-        memberSearchForm: {
-          pageNumber: 1,
-          pageSize: 20,
-          nickName: "",
-          username: "",
-          disabled: "",
-          minPoint: null,
-          maxPoint: null,
-        },
-        columns: [
-          {
-            title: "会员名称",
-            key: "memberName",
-            minWidth: 120,
-            tooltip: true
-          },
-          {
-            title: "操作内容",
-            key: "content",
-            minWidth: 200,
-            tooltip: true
-          },
-
-          {
-            title: "之前积分",
-            key: "beforePoint",
-            width: 200,
-          },
-
-          {
-            title: "变动积分",
-            key: "variablePoint",
-            width: 200,
-            render: (h, params) => {
-              if (params.row.pointType == 'INCREASE') {
-                return h("priceColorScheme", {props:{value:params.row.variablePoint,color:'green',unit:"+"}} );
-              } else {
-                return h("priceColorScheme", {props:{value:params.row.variablePoint,color:this.$mainColor,unit:"-"}} );
-              }
-            }
-          },
-          {
-            title: "当前积分",
-            key: "point",
-            width: 200,
-          },
-          {
-            title: "操作时间",
-            key: "createTime",
-            width: 200
-          },
-
-        ],
-        memberColumns: [
-          {
-            title: "客户名称",
-            key: "nickName",
-            width: 180,
-            tooltip: true,
-            render: (h, params) => {
-              return h("span", params.row.nickName || "-");
-            },
-          },
-          {
-            title: "客户账号",
-            key: "username",
-            width: 180,
-            tooltip: true,
-            render: (h, params) => {
-              return h("span", params.row.username || "-");
-            },
-          },
-          {
-            title: "账号状态",
-            key: "disabled",
-            width: 180,
-            render: (h, params) => {
-              const enabled = params.row.disabled === true;
-              return h(
-                "Tag",
-                {
-                  props: {
-                    color: enabled ? "success" : "default",
-                  },
-                },
-                enabled ? "启用" : "禁用"
-              );
-            },
-          },
-          {
-            title: "积分余额",
-            key: "point",
-            width: 180,
-            render: (h, params) => {
-              const point = params.row.point == null ? 0 : params.row.point;
-              return h("span", point);
-            },
-          },
-          {
-            title: "操作",
-            key: "action",
-            width: 100,
-            align: "center",
-            render: (h, params) => {
-              return h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.detail(params.row);
-                    },
-                  },
-                },
-                "详情"
-              );
-            },
-          },
-        ],
-        data: [], // 表单数据
-        memberData: [],
-        memberTotal: 0,
-        total: 0, // 表单数据总数
-      };
+export default {
+  name: "point",
+  data() {
+    return {
+      activeTab: "pointList",
+      loading: true,
+      memberLoading: false,
+      pointsStatistics: {
+        totalPoint: 0,
+        unUsedPoint: 0,
+      },
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+      },
+      memberSearchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        nickName: "",
+        username: "",
+        disabled: "",
+        minPoint: null,
+        maxPoint: null,
+      },
+      data: [],
+      memberData: [],
+      memberTotal: 0,
+      total: 0,
+    };
+  },
+  methods: {
+    callback(val) {
+      this.$emit("callback", val);
     },
-    methods: {
-      // 回调给父级
-      callback(val) {
-        this.$emit("callback", val);
-      },
-      // 查看会员详情
-      detail(row) {
-        this.$options.filters.customRouterPush({ name: "member-detail", query: { id: row.id } });
-      },
-      // 初始化数据
-      init() {
-        this.getStatistics();
-        this.getMemberList();
-        this.getData();
-      },
-      getStatistics() {
-        API_Member.queryMemberPointsStatistics().then((res) => {
-          if (res && res.success && res.result) {
-            this.pointsStatistics = {
-              totalPoint: res.result.totalPoint || 0,
-              unUsedPoint: res.result.unUsedPoint || 0,
-            };
-          }
-        });
-      },
-      formatNumber(value) {
-        const numericValue = Number(value || 0);
-        if (!Number.isFinite(numericValue)) return "0";
-        return numericValue.toLocaleString();
-      },
-      // 分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getData();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = v;
-        this.getData();
-      },
-      // 搜索
-      handleSearch() {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 20;
-        this.getData();
-      },
-      handleMemberSearch() {
-        this.memberSearchForm.pageNumber = 1;
-        this.getMemberList();
-      },
-      changeMemberPage(v) {
-        this.memberSearchForm.pageNumber = v;
-        this.getMemberList();
-      },
-      changeMemberPageSize(v) {
-        this.memberSearchForm.pageNumber = 1;
-        this.memberSearchForm.pageSize = v;
-        this.getMemberList();
-      },
-      getMemberList() {
-        this.memberLoading = true;
-        const params = {
-          pageNumber: this.memberSearchForm.pageNumber,
-          pageSize: this.memberSearchForm.pageSize,
-          nickName: this.memberSearchForm.nickName || undefined,
-          username: this.memberSearchForm.username || undefined,
-          disabled: this.memberSearchForm.disabled || undefined,
-          minPoint: this.memberSearchForm.minPoint,
-          maxPoint: this.memberSearchForm.maxPoint,
-        };
-        API_Member.getMemberListData(params).then((res) => {
+    detail(row) {
+      this.$filters.customRouterPush({ name: "member-detail", query: { id: row.id } });
+    },
+    init() {
+      this.getStatistics();
+      this.getMemberList();
+      this.getData();
+    },
+    getStatistics() {
+      API_Member.queryMemberPointsStatistics().then((res) => {
+        if (res && res.success && res.result) {
+          this.pointsStatistics = {
+            totalPoint: res.result.totalPoint || 0,
+            unUsedPoint: res.result.unUsedPoint || 0,
+          };
+        }
+      });
+    },
+    formatNumber(value) {
+      const numericValue = Number(value || 0);
+      if (!Number.isFinite(numericValue)) return "0";
+      return numericValue.toLocaleString();
+    },
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getData();
+    },
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getData();
+    },
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 20;
+      this.getData();
+    },
+    handleMemberSearch() {
+      this.memberSearchForm.pageNumber = 1;
+      this.getMemberList();
+    },
+    changeMemberPage(v) {
+      this.memberSearchForm.pageNumber = v;
+      this.getMemberList();
+    },
+    changeMemberPageSize(v) {
+      this.memberSearchForm.pageNumber = 1;
+      this.memberSearchForm.pageSize = v;
+      this.getMemberList();
+    },
+    getMemberList() {
+      this.memberLoading = true;
+      const params = {
+        pageNumber: this.memberSearchForm.pageNumber,
+        pageSize: this.memberSearchForm.pageSize,
+        nickName: this.memberSearchForm.nickName || undefined,
+        username: this.memberSearchForm.username || undefined,
+        disabled: this.memberSearchForm.disabled || undefined,
+        minPoint: this.memberSearchForm.minPoint,
+        maxPoint: this.memberSearchForm.maxPoint,
+      };
+      API_Member.getMemberListData(params)
+        .then((res) => {
           this.memberLoading = false;
           if (res && res.success && res.result && res.result.records) {
             this.memberData = res.result.records;
             this.memberTotal = res.result.total;
           }
-        }).catch(() => {
+        })
+        .catch(() => {
           this.memberLoading = false;
         });
-      },
-      //查新积分列表
-      getData() {
-        this.loading = true;
-        API_Member.getHistoryPointData(this.searchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        });
+    },
+    getData() {
+      this.loading = true;
+      API_Member.getHistoryPointData(this.searchForm).then((res) => {
         this.loading = false;
-      },
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
     },
-    mounted() {
-      this.init();
-    },
-  };
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .points-statistics-card {
-    margin-bottom: 10px;
+.points-statistics-card {
+  margin-bottom: 10px;
+}
+
+.point-tabs-wrap {
+  padding: 12px 16px 16px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(23, 35, 61, 0.04);
+}
+
+.point-tabs {
+  :deep(.el-tabs__header) {
+    margin-bottom: 16px;
   }
 
-  .point-tabs-wrap {
-    padding: 12px 16px 16px;
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(23, 35, 61, 0.04);
+  :deep(.el-tabs__item) {
+    padding: 8px 18px;
+    color: #515a6e;
+    transition: all 0.2s ease;
   }
 
-  .point-tabs {
-    ::v-deep .ivu-tabs-bar {
-      margin-bottom: 16px;
-      border-bottom: 1px solid #f0f0f0;
-    }
-
-    ::v-deep .ivu-tabs-nav .ivu-tabs-tab {
-      padding: 8px 18px;
-      color: #515a6e;
-      background: #fff;
-      transition: all 0.2s ease;
-    }
-
-    ::v-deep .ivu-tabs-nav .ivu-tabs-tab-active {
-      color: #2d8cf0;
-      font-weight: 500;
-    }
-
-    ::v-deep .ivu-tabs-ink-bar {
-      height: 2px;
-      border-radius: 2px;
-    }
-  }
-
-  .points-statistics {
-    width: 100%;
-  }
-
-  .points-statistics-item {
-    padding: 10px 0;
-    text-align: center;
-  }
-
-  .points-statistics-title {
-    font-size: 14px;
-    color: #17233d;
-    line-height: 20px;
-  }
-
-  .points-statistics-subtitle {
-    font-size: 12px;
-    color: #808695;
-    line-height: 18px;
-    margin-top: 4px;
-  }
-
-  .points-statistics-value {
-    font-size: 18px;
-    font-weight: 600;
-    color: #fa6419;
-    line-height: 26px;
-    margin-top: 8px;
-  }
-
-  .point-table {
-    ::v-deep .ivu-table-border th,
-    ::v-deep .ivu-table-border td {
-      border-right: 0;
-    }
-  }
-
-  .point-content-card {
-    margin-bottom: 12px;
-
-    ::v-deep .ivu-card-body {
-      padding: 18px 20px;
-    }
-  }
-
-  .member-list-card {
-    ::v-deep .ivu-card-head {
-      border-bottom: 1px solid #f5f5f5;
-    }
-  }
-
-  .card-title {
-    font-size: 14px;
+  :deep(.el-tabs__item.is-active) {
+    color: #409eff;
     font-weight: 500;
-    color: #17233d;
   }
 
-  .member-table {
-    ::v-deep .ivu-table-header th {
-      background: #fafafa;
-    }
-
-    ::v-deep .ivu-tag {
-      margin-right: 0;
-    }
+  :deep(.el-tabs__active-bar) {
+    height: 2px;
+    border-radius: 2px;
   }
+}
 
-  .point-range-separator {
-    display: inline-block;
-    margin: 0 8px;
-    color: #808695;
-  }
+.points-statistics {
+  width: 100%;
+}
 
-  .face {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
+.points-statistics-item {
+  padding: 10px 0;
+  text-align: center;
+}
+
+.points-statistics-title {
+  font-size: 14px;
+  color: #17233d;
+  line-height: 20px;
+}
+
+.points-statistics-subtitle {
+  font-size: 12px;
+  color: #808695;
+  line-height: 18px;
+  margin-top: 4px;
+}
+
+.points-statistics-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: #fa6419;
+  line-height: 26px;
+  margin-top: 8px;
+}
+
+.point-content-card {
+  margin-bottom: 12px;
+}
+
+.member-list-card {
+  :deep(.el-card__header) {
+    border-bottom: 1px solid #f5f5f5;
   }
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #17233d;
+}
+
+.member-table {
+  :deep(.el-table__header th) {
+    background: #fafafa;
+  }
+}
+
+.point-range-separator {
+  display: inline-block;
+  margin: 0 8px;
+  color: #808695;
+}
+
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.face {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+}
 </style>
diff --git a/manager/src/views/order/after-order/afterSale.vue b/manager/src/views/order/after-order/afterSale.vue
index 14ba957d..fdff43a4 100644
--- a/manager/src/views/order/after-order/afterSale.vue
+++ b/manager/src/views/order/after-order/afterSale.vue
@@ -1,351 +1,197 @@
 <template>
   <div class="search">
-    <Card>
-      <Tabs value="RETURN_MONEY" @on-click="handleClickType">
-        <TabPane label="退款" name="RETURN_MONEY">
-          <Row class="operation" style="margin-bottom: 10px">
-            <Button @click="add"  type="primary" >添加</Button>
-          </Row>
-          <Table
-            :loading="loading"
-            border
-            :columns="columns"
-            :data="data"
-            ref="table"
-          ></Table>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page
-              :current="searchForm.pageNumber"
-              :total="total"
-              :page-size="searchForm.pageSize"
-              @on-change="changePage"
-              @on-page-size-change="changePageSize"
-              :page-size-opts="[20, 50, 100]"
-              size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-          </Row>
-        </TabPane>
-        <TabPane label="取消" name="CANCEL">
-          <Row class="operation" style="margin-bottom: 10px">
-            <Button @click="add" type="primary" icon="md-add">添加</Button>
-          </Row>
-          <Table
-            :loading="loading"
-            border
-            :columns="columns"
-            :data="data"
-            ref="table"
-          ></Table>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page
-              :current="searchForm.pageNumber"
-              :total="total"
-              :page-size="searchForm.pageSize"
-              @on-change="changePage"
-              @on-page-size-change="changePageSize"
-              :page-size-opts="[20, 50, 100]"
-              size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-          </Row>
-        </TabPane>
-        <TabPane label="退货" name="RETURN_GOODS">
-          <Row class="operation" style="margin-bottom: 10px">
-            <Button @click="add" type="primary" icon="md-add">添加</Button>
-          </Row>
-          <Table
-            :loading="loading"
-            border
-            :columns="columns"
-            :data="data"
-            ref="table"
-          ></Table>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page
-              :current="searchForm.pageNumber"
-              :total="total"
-              :page-size="searchForm.pageSize"
-              @on-change="changePage"
-              @on-page-size-change="changePageSize"
-              :page-size-opts="[20, 50, 100]"
-              size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-          </Row>
-        </TabPane>
-        <TabPane label="投诉" name="COMPLAIN">
-          <Row class="operation" style="margin-bottom: 10px">
-            <Button @click="add" type="primary" icon="md-add">添加</Button>
-            <Button @click="getDataList" icon="md-refresh">刷新</Button>
-          </Row>
-          <Table
-            :loading="loading"
-            border
-            :columns="columns"
-            :data="data"
-            ref="table"
-          ></Table>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page
-              :current="searchForm.pageNumber"
-              :total="total"
-              :page-size="searchForm.pageSize"
-              @on-change="changePage"
-              @on-page-size-change="changePageSize"
-              :page-size-opts="[20, 50, 100]"
-              size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-          </Row>
-        </TabPane>
-      </Tabs>
-    </Card>
-    <Modal
-      :title="modalTitle"
-      v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
-    >
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="售后原因" prop="reason">
-          <Input v-model="form.reason" maxlength="20" clearable style="width: 100%"/>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-        >提交
-        </Button
-        >
+    <el-card>
+      <el-tabs v-model="activeTab" @tab-click="onTabClick">
+        <el-tab-pane label="退款" name="RETURN_MONEY">
+          <div class="operation" style="margin-bottom: 10px">
+            <el-button type="primary" @click="add">添加</el-button>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="取消" name="CANCEL">
+          <div class="operation" style="margin-bottom: 10px">
+            <el-button type="primary" @click="add">添加</el-button>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="退货" name="RETURN_GOODS">
+          <div class="operation" style="margin-bottom: 10px">
+            <el-button type="primary" @click="add">添加</el-button>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="投诉" name="COMPLAIN">
+          <div class="operation" style="margin-bottom: 10px">
+            <el-button type="primary" @click="add">添加</el-button>
+            <el-button @click="getDataList">刷新</el-button>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+
+      <el-table v-loading="loading" border :data="data" ref="table" style="width: 100%">
+        <el-table-column prop="createBy" label="创建人" min-width="120" />
+        <el-table-column prop="reason" label="原因" min-width="400" />
+        <el-table-column prop="createTime" label="时间" min-width="100" />
+        <el-table-column label="操作" width="200" align="center">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="edit(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
       </div>
-    </Modal>
+    </el-card>
+
+    <el-dialog v-model="modalVisible" :title="modalTitle" width="500px" :close-on-click-modal="false">
+      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+        <el-form-item label="售后原因" prop="reason">
+          <el-input v-model="form.reason" maxlength="20" clearable style="width: 100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 <script>
-  import * as API_Order from "@/api/order";
+import * as API_Order from "@/api/order";
 
-  export default {
-    data() {
-      return {
-        modalVisible: false,//添加售后原因弹出框
-        modalTitle: "", //添加售后原因弹出框标题
-        loading: true, // 表单加载状态
-        submitLoading: false, // 添加或编辑提交状态
-        form: {
-          reason: ""
-        },//添加编辑表单
-        formValidate: {
-          reason: [
-            {
-              required: true,
-              message: "请输入售后原因",
-              trigger: "blur",
-            },
-          ],
-        },
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          serviceType: "RETURN_MONEY"
-        },
-        columns: [
-          {
-            title: "创建人",
-            key: "createBy",
-            minWidth: 120,
-          },
-          {
-            title: "原因",
-            key: "reason",
-            minWidth: 400,
-          },
-          {
-            title: "时间",
-            key: "createTime",
-            minWidth: 100,
-          },
-          {
-            title: "操作",
-            key: "action",
-            align: "center",
-            width: 200,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px"
-                  },
-                  on: {
-                    click: () => {
-                      this.edit(params.row);
-                    }
-                  }
-                },
-                "编辑"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none"
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    }
-                  }
-                },
-                "删除"
-              )
-            ]);
-          },
-          },
-        ],
-        data: [], // 表单数据
-        total: 0,//条数
-      };
+export default {
+  data() {
+    return {
+      activeTab: "RETURN_MONEY",
+      modalVisible: false,
+      modalTitle: "",
+      loading: true,
+      submitLoading: false,
+      form: { reason: "" },
+      formValidate: {
+        reason: [{ required: true, message: "请输入售后原因", trigger: "blur" }],
+      },
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        serviceType: "RETURN_MONEY",
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    onTabClick(tab) {
+      this.handleClickType(tab.paneName);
     },
-
-    methods: {
-      // 分页 修改页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-        this.clearSelectAll();
-      },
-      // 分页 修改页数
-      changePageSize(v) {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      //切换tab
-      handleClickType(v) {
-        this.searchForm.pageNumber = 1 // 当前页数
-        this.searchForm.pageSize = 20 // 页面大小
-        //退款
-        if (v == "RETURN_MONEY") {
-          this.searchForm.serviceType = "RETURN_MONEY"
-        }
-        //退货
-        if (v == "RETURN_GOODS") {
-          this.searchForm.serviceType = "RETURN_GOODS"
-        }
-        //取消
-        if (v == "CANCEL") {
-          this.searchForm.serviceType = "CANCEL"
-        }
-        //取消
-        if (v == "COMPLAIN") {
-          this.searchForm.serviceType = "COMPLAIN"
-        }
-        this.getDataList();
-      },
-      //获取售后原因数据
-      getDataList() {
-        this.loading = true;
-        API_Order.getAfterSaleReasonPage(this.searchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total
-          }
-        });
-        this.loading = false;
-      },
-      //添加售后原因
-      add() {
-        this.form.reason = ""
-        this.modalVisible = true
-        this.modalTitle = "添加售后原因"
-      },
-      //修改售后原因
-      edit(v) {
-   
-        this.form.reason = v.reason
-        this.form.id = v.id
-  
-        this.modalVisible = true
-        this.modalTitle = "修改售后原因"
-      },
-      //提交表单
-      handleSubmit() {
-        this.form.serviceType = this.searchForm.serviceType
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            this.submitLoading = true;
-            if (this.modalTitle == '添加售后原因') {
-              // 添加
-              delete this.form.id;
-              API_Order.addAfterSaleReason(this.form).then((res) => {
-                this.submitLoading = false;
-                if (res.success) {
-                  this.$Message.success("添加成功");
-                  this.getDataList();
-                  this.modalVisible = false;
-                }
-              });
-            } else {
-              // 编辑
-              API_Order.editAfterSaleReason(this.form.id, this.form).then((res) => {
-                this.submitLoading = false;
-                if (res.success) {
-                  this.$Message.success("修改成功");
-                  this.getDataList();
-                  this.modalVisible = false;
-                }
-              });
-            }
-          }
-        });
-      },
-      //删除售后原因
-      remove(v) {
-        this.$Modal.confirm({
-          title: "确认删除",
-          // 记得确认修改此处
-          content: "确认要删除此售后原因?",
-          loading: true,
-          onOk: () => {
-            // 删除
-            API_Order.delAfterSaleReason(v.id).then((res) => {
-              this.$Modal.remove();
-              if (res.success) {
-                this.$Message.success("售后原因已删除");
-                this.getDataList();
-              }
-            });
-          },
-        });
-      }
-
-    },
-    mounted() {
+    changePage(v) {
+      this.searchForm.pageNumber = v;
       this.getDataList();
     },
-  };
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    handleClickType(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 20;
+      this.searchForm.serviceType = v;
+      this.getDataList();
+    },
+    getDataList() {
+      this.loading = true;
+      API_Order.getAfterSaleReasonPage(this.searchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+    },
+    add() {
+      this.form.reason = "";
+      this.modalVisible = true;
+      this.modalTitle = "添加售后原因";
+    },
+    edit(v) {
+      this.form.reason = v.reason;
+      this.form.id = v.id;
+      this.modalVisible = true;
+      this.modalTitle = "修改售后原因";
+    },
+    handleSubmit() {
+      this.form.serviceType = this.searchForm.serviceType;
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+          if (this.modalTitle == "添加售后原因") {
+            delete this.form.id;
+            API_Order.addAfterSaleReason(this.form).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("添加成功");
+                this.getDataList();
+                this.modalVisible = false;
+              }
+            });
+          } else {
+            API_Order.editAfterSaleReason(this.form.id, this.form).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("修改成功");
+                this.getDataList();
+                this.modalVisible = false;
+              }
+            });
+          }
+        }
+      });
+    },
+    remove(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "确认要删除此售后原因?",
+        loading: true,
+        onOk: () => {
+          API_Order.delAfterSaleReason(v.id).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("售后原因已删除");
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+  },
+  mounted() {
+    this.getDataList();
+  },
+};
 </script>
+<style scoped>
+.link-text {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  display: inline-block;
+  margin: 0 8px;
+  color: #dcdee2;
+}
+</style>
diff --git a/manager/src/views/order/after-order/afterSaleOrder.vue b/manager/src/views/order/after-order/afterSaleOrder.vue
index 6fbc3102..7150b683 100644
--- a/manager/src/views/order/after-order/afterSaleOrder.vue
+++ b/manager/src/views/order/after-order/afterSaleOrder.vue
@@ -1,355 +1,315 @@
 <template>
   <div class="search">
-    <Card>
-      <Row @keydown.enter.native="handleSearch">
-        <Form
-          ref="searchForm"
-          :model="searchForm"
-          inline
-          :label-width="70"
-          class="search-form"
-        >
-          <Form-item label="关键字" prop="keywords" style="display: block; width: 100%;">
-            <Input
-              type="text"
-              v-model="searchForm.keywords"
-              placeholder="请输入商品名称、订单编号搜索"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <br>
-          <Form-item label="订单编号" prop="orderSn">
-            <Input
-              type="text"
-              v-model="searchForm.orderSn"
-              placeholder="请输入订单编号"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="售后单号" prop="sn">
-            <Input
-              type="text"
-              v-model="searchForm.sn"
-              placeholder="请输入售后单号"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="申请时间">
-            <DatePicker
-              v-model="selectDate"
-              type="datetimerange"
-              format="yyyy-MM-dd HH:mm:ss"
-              clearable
-              @on-change="selectDateRange"
-              placeholder="选择起始时间"
-              style="width: 240px"
-            ></DatePicker>
-          </Form-item>
-          <Form-item label="商家名称" prop="storeName">
-            <Input
-              type="text"
-              v-model="searchForm.storeName"
-              placeholder="请输入商家名称"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="会员名称" prop="memberName">
-            <Input
-              type="text"
-              v-model="searchForm.memberName"
-              placeholder="请输入会员名称"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="售后类型">
-            <Select
-              v-model="searchForm.serviceType"
-              placeholder="全部"
-              clearable
-              style="width: 240px"
-            >
-              <Option value="RETURN_MONEY">退款</Option>
-              <Option value="RETURN_GOODS">退货</Option>
-            </Select>
-          </Form-item>
-          <Button
-            @click="handleSearch"
-            type="primary"
-            icon="ios-search"
-            class="search-btn"
-            >搜索</Button
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="关键字" prop="keywords" style="display: block; width: 100%">
+          <el-input
+            v-model="searchForm.keywords"
+            placeholder="请输入商品名称、订单编号搜索"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="订单编号" prop="orderSn">
+          <el-input
+            v-model="searchForm.orderSn"
+            placeholder="请输入订单编号"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="售后单号" prop="sn">
+          <el-input
+            v-model="searchForm.sn"
+            placeholder="请输入售后单号"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="申请时间">
+          <el-date-picker
+            v-model="selectDate"
+            type="datetimerange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            clearable
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            style="width: 360px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item label="商家名称" prop="storeName">
+          <el-input
+            v-model="searchForm.storeName"
+            placeholder="请输入商家名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
+            v-model="searchForm.memberName"
+            placeholder="请输入会员名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="售后类型">
+          <el-select
+            v-model="searchForm.serviceType"
+            placeholder="全部"
+            clearable
+            style="width: 240px"
           >
-        </Form>
-      </Row>
-    </Card>
-    <Card>
+            <el-option label="退款" value="RETURN_MONEY" />
+            <el-option label="退货" value="RETURN_GOODS" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
       <div class="order-tab">
-        <Tabs v-model="currentStatus" @on-click="serviceStatusClick">
-          <TabPane v-for="item in serviceStatusWithCount" :key="item.value" :label="item.title" :name="item.value">
-          </TabPane>
-        </Tabs>
+        <el-tabs v-model="currentStatus" @tab-click="onStatusTabClick">
+          <el-tab-pane
+            v-for="item in serviceStatusWithCount"
+            :key="item.value"
+            :label="item.title"
+            :name="item.value"
+          />
+        </el-tabs>
       </div>
 
-      <Table
-        :loading="loading"
-        :columns="columns"
-        :data="data"
+      <el-table
         ref="table"
+        v-loading="loading"
+        :data="data"
         class="mt_10"
+        style="width: 100%"
       >
-        <!-- 商品栏目格式化 -->
-        <template slot="goodsSlot" slot-scope="{ row }">
-          <div style="margin-top: 5px; height: 80px; display: flex">
-            <div style="">
-              <img :src="row.goodsImage" style="width: 60px; height: 60px; margin-top: 3px; object-fit: cover; border-radius: 4px;" />
+        <el-table-column prop="sn" label="售后服务单号" min-width="140" show-overflow-tooltip />
+        <el-table-column prop="orderSn" label="订单编号" min-width="120" show-overflow-tooltip />
+        <el-table-column label="商品" min-width="300">
+          <template #default="{ row }">
+            <div v-if="row" style="margin-top: 5px; height: 80px; display: flex">
+              <div>
+                <img
+                  :src="row.goodsImage"
+                  style="width: 60px; height: 60px; margin-top: 3px; object-fit: cover; border-radius: 4px"
+                  alt=""
+                />
+              </div>
+              <div style="margin-left: 13px">
+                <div class="div-zoom">
+                  <a class="link-text" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
+                </div>
+                <div style="color: #999; font-size: 12px; margin-top: 5px">
+                  商品ID: {{ row.goodsId }}
+                </div>
+              </div>
             </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="memberId" label="会员ID" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="memberName" label="会员名称" width="140" />
+        <el-table-column prop="storeName" label="店铺名称" width="100" show-overflow-tooltip />
+        <el-table-column label="售后金额" width="110">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">
+              {{ $filters.unitPrice(row.applyRefundPrice, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="售后类型" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="serviceTypeTagType(row.serviceType)">
+              {{ serviceTypeText(row.serviceType) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="售后状态" width="180">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="serviceStatusTagType(row.serviceStatus)">
+              {{ serviceStatusText(row.serviceStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="申请时间" width="180" />
+        <el-table-column label="操作" fixed="right" align="center" width="100">
+          <template #default="{ row }">
+            <a v-if="row" class="link-text" @click="detail(row)">查看</a>
+          </template>
+        </el-table-column>
+      </el-table>
 
-            <div style="margin-left: 13px">
-              <div class="div-zoom">
-                <a @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
-              </div>
-              <div style="color: #999; font-size: 12px; margin-top: 5px;">
-                商品ID: {{ row.goodsId }}
-              </div>
-            </div>
-          </div>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
 import * as API_Order from "@/api/order";
-import vueQr from "vue-qr";
+
 export default {
-  components: {
-    "vue-qr": vueQr,
-  },
   name: "after-sale-order",
   data() {
     return {
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
         orderSn: "",
         memberName: "",
         serviceStatus: "",
         storeName: "",
         sn: "",
-        keywords: "", // 新增关键字搜索字段
+        keywords: "",
       },
-      selectDate: null, // 选择时间段
-      form: {
-        // 添加或编辑表单对象初始化数据
-        sn: "",
-        storeName: "",
-        startTime: "",
-        endTime: "",
-        billPrice: "",
-      },
-      columns: [
-        {
-          title: "售后服务单号",
-          key: "sn",
-          minWidth: 140,
-          tooltip: true,
-        },
-        {
-          title: "订单编号",
-          key: "orderSn",
-          minWidth: 120,
-          tooltip: true,
-        },
-        // 移除这个独立的商品ID列
-        // {
-        //   title: "商品ID",
-        //   key: "goodsId",
-        //   minWidth: 120,
-        //   tooltip: true,
-        // },
-        {
-          title: "商品",
-          key: "goodsName",
-          minWidth: 300,
-          tooltip: true,
-          slot: "goodsSlot",
-        },
-        {
-          title: "会员ID",
-          key: "memberId",
-          minWidth: 120,
-          tooltip: true,
-        },
-        {
-          title: "会员名称",
-          key: "memberName",
-          width: 140,
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          width: 100,
-          tooltip: true,
-        },
-        {
-          title: "售后金额",
-          key: "applyRefundPrice",
-          width: 110,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.applyRefundPrice,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "售后类型",
-          key: "serviceType",
-          width: 100,
-          render: (h, params) => {
-            if (params.row.serviceType == "RETURN_MONEY") {
-              return h("div", [h("tag", { props: { color: "blue" } }, "退款")]);
-            } else if (params.row.serviceType == "RETURN_GOODS") {
-              return h("div", [h("tag", { props: { color: "volcano" } }, "退货")]);
-            } else if (params.row.serviceType == "EXCHANGE_GOODS") {
-              return h("div", [h("tag", { props: { color: "green" } }, "换货")]);
-            }
-          },
-        },
-
-        {
-          title: "售后状态",
-          key: "serviceStatus",
-          width: 180,
-          render: (h, params) => {
-            if (params.row.serviceStatus == "APPLY") {
-              return h("div", [h("tag", { props: { color: "blue" } }, "申请中")]);
-            } else if (params.row.serviceStatus == "PASS") {
-              return h("div", [h("tag", { props: { color: "cyan" } }, "通过售后")]);
-            } else if (params.row.serviceStatus == "REFUSE") {
-              return h("div", [h("tag", { props: { color: "volcano" } }, "拒绝售后")]);
-            } else if (params.row.serviceStatus == "BUYER_RETURN") {
-              return h("div", [
-                h("tag", { props: { color: "orange" } }, "买家退货，待卖家收货"),
-              ]);
-            } else if (params.row.serviceStatus == "SELLER_CONFIRM") {
-              return h("div", [h("tag", { props: { color: "gold" } }, "卖家确认收货")]);
-            } else if (params.row.serviceStatus == "SELLER_TERMINATION") {
-              return h("div", [h("tag", { props: { color: "lime" } }, "卖家终止售后")]);
-            } else if (params.row.serviceStatus == "BUYER_CANCEL") {
-              return h("div", [h("tag", { props: { color: "purple" } }, "买家取消售后")]);
-            } else if (params.row.serviceStatus == "COMPLETE") {
-              return h("div", [h("tag", { props: { color: "green" } }, "完成售后")]);
-            } else if (params.row.serviceStatus == "WAIT_REFUND") {
-              return h("div", [h("tag", { props: { color: "geekblue" } }, "待平台退款")]);
-            }
-          },
-        },
-        {
-          title: "申请时间",
-          key: "createTime",
-          width: 180,
-        },
-        {
-          title: "操作",
-          key: "action",
-          fixed: "right",
-          align: "center",
-          width: 100,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none"
-                  },
-                  on: {
-                    click: () => {
-                      this.detail(params.row);
-                    },
-                  },
-                },
-                "查看"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      serviceStatus: [
-        {title: '全部', value: ''},
-        {title: '申请售后', value: 'APPLY'},
-        {title: '通过售后', value: 'PASS'},
-        {title: '拒绝售后', value: 'REFUSE'},
-        {title: '待收货', value: 'BUYER_RETURN'},
-        {title: '确认收货', value: 'SELLER_CONFIRM'},
-        {title: '完成售后', value: 'COMPLETE'},
-        {title: '卖家终止售后', value: 'SELLER_TERMINATION'},
-        {title: '买家取消售后', value: 'BUYER_CANCEL'}
-      ],
-      currentStatus: '',
-       afterSaleNumData: {} // 售后数量统计数据
+      selectDate: null,
+      data: [],
+      total: 0,
+      currentStatus: "",
+      afterSaleNumData: {},
     };
   },
+  computed: {
+    serviceStatusWithCount() {
+      return [
+        { title: "全部", value: "" },
+        {
+          title: `申请售后${this.afterSaleNumData.applyNum ? "(" + this.afterSaleNumData.applyNum + ")" : ""}`,
+          value: "APPLY",
+        },
+        {
+          title: `通过售后${this.afterSaleNumData.passNum ? "(" + this.afterSaleNumData.passNum + ")" : ""}`,
+          value: "PASS",
+        },
+        {
+          title: `拒绝售后${this.afterSaleNumData.refuseNum ? "(" + this.afterSaleNumData.refuseNum + ")" : ""}`,
+          value: "REFUSE",
+        },
+        {
+          title: `待收货${this.afterSaleNumData.buyerReturnNum ? "(" + this.afterSaleNumData.buyerReturnNum + ")" : ""}`,
+          value: "BUYER_RETURN",
+        },
+        {
+          title: `确认收货${this.afterSaleNumData.sellerConfirmNum ? "(" + this.afterSaleNumData.sellerConfirmNum + ")" : ""}`,
+          value: "SELLER_CONFIRM",
+        },
+        {
+          title: `完成售后${this.afterSaleNumData.completeNum ? "(" + this.afterSaleNumData.completeNum + ")" : ""}`,
+          value: "COMPLETE",
+        },
+        {
+          title: `卖家终止售后${this.afterSaleNumData.sellerTerminationNum ? "(" + this.afterSaleNumData.sellerTerminationNum + ")" : ""}`,
+          value: "SELLER_TERMINATION",
+        },
+        {
+          title: `买家取消售后${this.afterSaleNumData.buyerCancelNum ? "(" + this.afterSaleNumData.buyerCancelNum + ")" : ""}`,
+          value: "BUYER_CANCEL",
+        },
+        {
+          title: `等待平台退款${this.afterSaleNumData.waitRefundNum ? "(" + this.afterSaleNumData.waitRefundNum + ")" : ""}`,
+          value: "WAIT_REFUND",
+        },
+      ];
+    },
+  },
   methods: {
-    // 初始化数据
+    serviceTypeText(type) {
+      const map = {
+        RETURN_MONEY: "退款",
+        RETURN_GOODS: "退货",
+        EXCHANGE_GOODS: "换货",
+      };
+      return map[type] || type || "-";
+    },
+    serviceTypeTagType(type) {
+      const map = {
+        RETURN_MONEY: "primary",
+        RETURN_GOODS: "warning",
+        EXCHANGE_GOODS: "success",
+      };
+      return map[type] || "info";
+    },
+    serviceStatusText(status) {
+      const map = {
+        APPLY: "申请中",
+        PASS: "通过售后",
+        REFUSE: "拒绝售后",
+        BUYER_RETURN: "买家退货，待卖家收货",
+        SELLER_CONFIRM: "卖家确认收货",
+        SELLER_TERMINATION: "卖家终止售后",
+        BUYER_CANCEL: "买家取消售后",
+        COMPLETE: "完成售后",
+        WAIT_REFUND: "待平台退款",
+      };
+      return map[status] || status || "-";
+    },
+    serviceStatusTagType(status) {
+      const map = {
+        APPLY: "primary",
+        PASS: "info",
+        REFUSE: "warning",
+        BUYER_RETURN: "warning",
+        SELLER_CONFIRM: "",
+        SELLER_TERMINATION: "success",
+        BUYER_CANCEL: "danger",
+        COMPLETE: "success",
+        WAIT_REFUND: "primary",
+      };
+      return map[status] || "info";
+    },
     init() {
       this.getDataList();
       this.getAfterSaleNumData();
     },
-    // 分页 改变页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getDataList();
     },
-    // 分页 改变页数
-    changePageSize(v) {
+    changePageSize() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
       this.getAfterSaleNumData();
     },
-    // 开始结束时间分别赋值
     selectDateRange(v) {
       if (v) {
         this.searchForm.startDate = v[0];
         this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
       }
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
       API_Order.getAfterSaleOrderPage(this.searchForm).then((res) => {
@@ -359,32 +319,28 @@ export default {
           this.total = res.result.total;
         }
       });
-      // 获取售后状态数量
-      this.total = this.data.length;
-      this.loading = false;
     },
-    // 获取售后数量统计
-     getAfterSaleNumData() {
+    getAfterSaleNumData() {
       const { serviceStatus, ...searchParams } = this.searchForm;
-       API_Order.getAfterSaleNumVO(searchParams).then((res) => {
-         if (res.success) {
-           this.afterSaleNumData = res.result;
-         }
-       });
-     },
-    // 跳转售后详情
+      API_Order.getAfterSaleNumVO(searchParams).then((res) => {
+        if (res.success) {
+          this.afterSaleNumData = res.result;
+        }
+      });
+    },
     detail(v) {
-      let sn = v.sn;
-      this.$options.filters.customRouterPush({
+      const sn = v.sn;
+      this.$filters.customRouterPush({
         name: "after-order-detail",
         query: { sn: sn },
-      })
+      });
+    },
+    onStatusTabClick(tab) {
+      this.serviceStatusClick(tab.paneName);
     },
-    // 售后筛选
     serviceStatusClick(item) {
       this.currentStatus = item;
-      // 如果是全部（空字符串），则删除serviceStatus字段
-      if (item === 0) {
+      if (item === "" || item === undefined) {
         delete this.searchForm.serviceStatus;
       } else {
         this.searchForm.serviceStatus = item;
@@ -396,30 +352,23 @@ export default {
   mounted() {
     this.init();
   },
-  computed: {
-     // 带数量的售后状态
-     serviceStatusWithCount() {
-       return [
-         {title: '全部', value: ''},
-         {title: `申请售后${this.afterSaleNumData.applyNum ? '(' + this.afterSaleNumData.applyNum + ')' : ''}`, value: 'APPLY'},
-         {title: `通过售后${this.afterSaleNumData.passNum ? '(' + this.afterSaleNumData.passNum + ')' : ''}`, value: 'PASS'},
-         {title: `拒绝售后${this.afterSaleNumData.refuseNum ? '(' + this.afterSaleNumData.refuseNum + ')' : ''}`, value: 'REFUSE'},
-         {title: `待收货${this.afterSaleNumData.buyerReturnNum ? '(' + this.afterSaleNumData.buyerReturnNum + ')' : ''}`, value: 'BUYER_RETURN'},
-         {title: `确认收货${this.afterSaleNumData.sellerConfirmNum ? '(' + this.afterSaleNumData.sellerConfirmNum + ')' : ''}`, value: 'SELLER_CONFIRM'},
-         {title: `完成售后${this.afterSaleNumData.completeNum ? '(' + this.afterSaleNumData.completeNum + ')' : ''}`, value: 'COMPLETE'},
-         {title: `卖家终止售后${this.afterSaleNumData.sellerTerminationNum ? '(' + this.afterSaleNumData.sellerTerminationNum + ')' : ''}`, value: 'SELLER_TERMINATION'},
-         {title: `买家取消售后${this.afterSaleNumData.buyerCancelNum ? '(' + this.afterSaleNumData.buyerCancelNum + ')' : ''}`, value: 'BUYER_CANCEL'},
-         {title: `等待平台退款${this.afterSaleNumData.waitRefundNum ? '(' + this.afterSaleNumData.waitRefundNum + ')' : ''}`, value: 'WAIT_REFUND'}
-       ];
-     }
-   }
-  }
+};
 </script>
+
 <style lang="scss" scoped>
-// Tab组件样式
 .order-tab {
-  ::v-deep .ivu-tabs-tab {
+  :deep(.el-tabs__item) {
     font-size: 14px;
   }
 }
+
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.mt_10 {
+  margin-top: 10px;
+}
 </style>
diff --git a/manager/src/views/order/after-order/afterSaleOrderDetail.vue b/manager/src/views/order/after-order/afterSaleOrderDetail.vue
index eea1eb73..73f66690 100644
--- a/manager/src/views/order/after-order/afterSaleOrderDetail.vue
+++ b/manager/src/views/order/after-order/afterSaleOrderDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="search">
-    <Card>
+    <el-card>
       <div class="main-content">
         <div class="div-flow-left">
           <div class="div-form-default">
@@ -79,18 +79,10 @@
               <dt>是否同意</dt>
               <dd>
                 <div class="div-content">
-                  <RadioGroup
-                    type="button"
-                    button-style="solid"
-                    v-model="params.serviceStatus"
-                  >
-                    <Radio label="PASS">
-                      <span>同意</span>
-                    </Radio>
-                    <Radio label="REFUSE">
-                      <span>拒绝</span>
-                    </Radio>
-                  </RadioGroup>
+                  <el-radio-group v-model="params.serviceStatus">
+                    <el-radio-button value="PASS">同意</el-radio-button>
+                    <el-radio-button value="REFUSE">拒绝</el-radio-button>
+                  </el-radio-group>
                 </div>
               </dd>
             </dl>
@@ -103,13 +95,13 @@
             <dl>
               <dt>实际退款金额</dt>
               <dd>
-                <InputNumber :min="0" v-model="params.actualRefundPrice" style="width: 260px" />
+                <el-input-number :min="0" v-model="params.actualRefundPrice" style="width: 260px" />
               </dd>
             </dl>
             <dl>
               <dt>备注信息</dt>
               <dd>
-                <Input
+                <el-input
                   v-model="params.remark"
                   type="textarea"
                   maxlength="200"
@@ -122,14 +114,14 @@
             <dl>
               <dd>
                 <div style="text-align: right; width: 45%; margin-top: 10px">
-                  <Button
+                  <el-button
                     type="primary"
                     :loading="submitLoading"
                     @click="handleSubmit"
                     style="margin-left: 5px"
                   >
                     确定
-                  </Button>
+                  </el-button>
                 </div>
               </dd>
             </dl>
@@ -224,7 +216,7 @@
             <dl>
               <dt>备注信息</dt>
               <dd>
-                <Input
+                <el-input
                   v-model="refundPriceForm.remark"
                   type="textarea"
                   maxlength="200"
@@ -237,14 +229,14 @@
             <dl>
               <dt>操作</dt>
               <dd>
-                <Button
+                <el-button
                   type="primary"
                   :loading="submitLoading"
                   @click="refundPriceSubmit"
                   style="margin-left: 5px"
                 >
                   退款
-                </Button>
+                </el-button>
               </dd>
             </dl>
           </div>
@@ -283,25 +275,23 @@
             <dl>
               <dt>操作</dt>
               <dd>
-                <Button
-                  type="info"
+                <el-button
+                  type="primary"
+                  plain
                   :loading="submitLoading"
                   @click="logisticsSeller()"
                   style="margin-left: 5px"
                 >
                   查询物流
-                </Button>
+                </el-button>
               </dd>
             </dl>
           </div>
         </div>
       </div>
-    </Card>
+    </el-card>
     <!-- 查询物流 -->
-    <Modal v-model="logisticsModal" width="40">
-      <p slot="header">
-        <span>查询物流</span>
-      </p>
+    <el-dialog v-model="logisticsModal" title="查询物流" width="640px" append-to-body>
       <div class="layui-layer-wrap">
         <dl>
           <dt>售后单号：</dt>
@@ -335,10 +325,10 @@
           </ul>
         </div>
       </div>
-      <div slot="footer" style="text-align: right">
-        <Button @click="logisticsClose">取消</Button>
-      </div>
-    </Modal>
+      <template #footer>
+        <el-button @click="logisticsClose">取消</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -432,11 +422,7 @@ export default {
               " "
             );
 
-          this.$set(
-            this.params,
-            "actualRefundPrice",
-            this.afterSaleInfo.applyRefundPrice
-          );
+          this.params.actualRefundPrice = this.afterSaleInfo.applyRefundPrice;
           // 如果显示物流信息，展示商家地址
           if (this.afterSaleInfo.showDelivery) {
             API_Order.storeAddress(this.sn).then((resu) => {
diff --git a/manager/src/views/order/after-order/orderComplaint.vue b/manager/src/views/order/after-order/orderComplaint.vue
index 1a85f755..b77afb05 100644
--- a/manager/src/views/order/after-order/orderComplaint.vue
+++ b/manager/src/views/order/after-order/orderComplaint.vue
@@ -1,255 +1,212 @@
 <template>
   <div class="search">
-    <Card>
-      <Row @keydown.enter.native="handleSearch">
-        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-          <Form-item label="订单编号" prop="orderSn">
-            <Input
-              type="text"
-              v-model="searchForm.orderSn"
-              placeholder="请输入订单编号"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="会员名称" prop="memberName">
-            <Input
-              type="text"
-              v-model="searchForm.memberName"
-              placeholder="请输入会员名称"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="状态" prop="status">
-            <Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 240px">
-              <Option value="NEW">新投诉</Option>
-              <Option value="CANCEL">已撤销</Option>
-              <Option value="WAIT_APPEAL">待申诉</Option>
-              <Option value="COMMUNICATION">对话中</Option>
-              <Option value="WAIT_ARBITRATION">等待仲裁</Option>
-              <Option value="COMPLETE">已完成</Option>
-            </Select>
-          </Form-item>
-          <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-        </Form>
-      </Row>
-    </Card>
-    <Card>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-        class="mt_10"
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <template slot-scope="{row}" slot="goodsName">
-          <a class="mr_10" @click="linkTo(row.goodsId,row.skuId)">{{row.goodsName}}</a>
-          <Poptip trigger="hover" title="扫码在手机中查看" transfer>
-            <div slot="content">
-              <vue-qr :text="wapLinkTo(row.goodsId,row.skuId)"  :margin="0" colorDark="#000" colorLight="#fff" :size="150"></vue-qr>
-            </div>
-            <img src="../../../assets/qrcode.svg" style="vertical-align:bottom;" class="hover-pointer" width="20" height="20" alt="">
-          </Poptip>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        <el-form-item label="订单编号" prop="orderSn">
+          <el-input
+            v-model="searchForm.orderSn"
+            placeholder="请输入订单编号"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
+            v-model="searchForm.memberName"
+            placeholder="请输入会员名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="searchForm.status" placeholder="请选择" clearable style="width: 240px">
+            <el-option label="新投诉" value="NEW" />
+            <el-option label="已撤销" value="CANCEL" />
+            <el-option label="待申诉" value="WAIT_APPEAL" />
+            <el-option label="对话中" value="COMMUNICATION" />
+            <el-option label="等待仲裁" value="WAIT_ARBITRATION" />
+            <el-option label="已完成" value="COMPLETE" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-table v-loading="loading" border :data="data" ref="table" class="mt_10" style="width: 100%">
+        <el-table-column prop="memberName" label="会员名称" width="200" />
+        <el-table-column prop="orderSn" label="订单编号" min-width="120" show-overflow-tooltip />
+        <el-table-column label="商品名称" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
+              <el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
+                <template #reference>
+                  <img
+                    src="../../../assets/qrcode.svg"
+                    class="hover-pointer"
+                    width="20"
+                    height="20"
+                    alt="qrcode"
+                  />
+                </template>
+                <vue-qr
+                  :text="wapLinkTo(row.goodsId, row.skuId)"
+                  :margin="0"
+                  color-dark="#000"
+                  color-light="#fff"
+                  :size="150"
+                />
+              </el-popover>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column prop="complainTopic" label="投诉主题" width="120" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="投诉时间" width="180" />
+        <el-table-column label="投诉状态" width="110">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="complainStatusTagType(row.complainStatus)">
+              {{ complainStatusText(row.complainStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" align="center" fixed="right">
+          <template #default="{ row }">
+            <a v-if="row" class="link-text" @click="detail(row)">
+              {{ row.complainStatus === "COMPLETE" ? "详情" : "处理" }}
+            </a>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
-  import * as API_Order from "@/api/order";
-  import vueQr from 'vue-qr'
-  export default {
-    name: "orderComplaint",
-      components: {
-      "vue-qr":vueQr
+import * as API_Order from "@/api/order";
+import vueQr from "vue-qr";
+
+export default {
+  name: "orderComplaint",
+  components: { vueQr },
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  watch: {
+    $route() {
+      this.getDataList();
     },
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-        },
-        columns: [
-          // 表头
-          {
-            title: "会员名称",
-            key: "memberName",
-            width: 200,
-            sortable: false,
-          },
-          {
-            title: "订单编号",
-            key: "orderSn",
-            minWidth: 120,
-            tooltip: true
-
-          },
-          {
-            title: "商品名称",
-            slot: "goodsName",
-            minWidth: 170,
-            tooltip: true
-
-          },
-          {
-            title: "投诉主题",
-            width: 100,
-            key: "complainTopic",
-            tooltip: true
-          },
-          {
-            title: "投诉时间",
-            key: "createTime",
-            width: 180,
-          },
-          {
-            title: "投诉状态",
-            key: "complainStatus",
-            width: 100,
-            render: (h, params) => {
-              if (params.row.complainStatus == "NEW") {
-                return h('div', [h('tag',{props: {color: "purple"}}, '新投诉'),]);
-              } else if (params.row.complainStatus == "CANCEL") {
-                return h('div', [h('tag', {props: {color: "cyan"}}, '已撤销'),]);
-              } else if (params.row.complainStatus == "WAIT_APPEAL") {
-                return h('div', [h('tag', {props: {color: "volcano"}}, '待申诉'),]);
-              } else if (params.row.complainStatus == "COMMUNICATION") {
-                return h('div', [h('tag', {props: {color: "orange"}}, '对话中'),]);
-              }else if (params.row.complainStatus == "WAIT_ARBITRATION") {
-                return h('div', [h('tag', {props: {color: "blue"}}, '等待仲裁'),]);
-              }else if (params.row.complainStatus == "COMPLETE") {
-                return h('div', [h('tag', {props: {color: "green"}}, '已完成'),]);
-              }
-            }
-          },
-
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 150,
-          render: (h, params) => {
-              if(params.row.complainStatus === "COMPLETE"){
-                return h("div", [
-                  h(
-                    "a",
-                    {
-                      style: {
-                        color: "#2d8cf0",
-                        cursor: "pointer",
-                        textDecoration: "none",
-                      },
-                      on: {
-                        click: () => {
-                          this.detail(params.row);
-                        },
-                      },
-                    },
-                    "详情"
-                  ),
-                ]);
-              }else{
-                return h("div", [
-                  h(
-                    "a",
-                    {
-                      style: {
-                        color: "#2d8cf0",
-                        cursor: "pointer",
-                        textDecoration: "none",
-                      },
-                      on: {
-                        click: () => {
-                          this.detail(params.row);
-                        },
-                      },
-                    },
-                    "处理"
-                  ),
-                ]);
-              }
-
-            },
-          },
-
-        ],
-        data: [], // 表单数据
-        total: 0, // 表单数据总数
+  },
+  methods: {
+    complainStatusText(v) {
+      const map = {
+        NEW: "新投诉",
+        CANCEL: "已撤销",
+        WAIT_APPEAL: "待申诉",
+        COMMUNICATION: "对话中",
+        WAIT_ARBITRATION: "等待仲裁",
+        COMPLETE: "已完成",
       };
+      return map[v] || v || "-";
     },
-    watch: {
-      $route(){
-        this.getDataList();
-      }
+    complainStatusTagType(v) {
+      const map = {
+        NEW: "primary",
+        CANCEL: "info",
+        WAIT_APPEAL: "warning",
+        COMMUNICATION: "warning",
+        WAIT_ARBITRATION: "",
+        COMPLETE: "success",
+      };
+      return map[v] || "info";
     },
-    methods: {
-      // 初始化数据
-      init() {
-        this.getDataList();
-      },
-      // 分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      // 搜索
-      handleSearch() {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 20;
-        this.getDataList();
-      },
-      // 获取列表数据
-      getDataList() {
-        this.loading = true;
-        API_Order.getOrderComplain(this.searchForm).then((res) => {
+    init() {
+      this.getDataList();
+    },
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+    },
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 20;
+      this.getDataList();
+    },
+    getDataList() {
+      this.loading = true;
+      API_Order.getOrderComplain(this.searchForm)
+        .then((res) => {
           this.loading = false;
           if (res.success) {
             this.data = res.result.records;
             this.total = res.result.total;
           }
-        });
-        this.total = this.data.length;
-        this.loading = false;
-      },
-      //投诉详情
-      detail(v) {
-        let id = v.id;
-        this.$options.filters.customRouterPush({
-          name: "order-complaint-detail",
-          query: { id: id },
         })
-      },
+        .catch(() => {
+          this.loading = false;
+        });
     },
-    mounted() {
-      this.init();
+    detail(v) {
+      this.$filters.customRouterPush({
+        name: "order-complaint-detail",
+        query: { id: v.id },
+      });
     },
-  };
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
+
+<style scoped>
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.mr_10 {
+  margin-right: 10px;
+}
+.hover-pointer {
+  cursor: pointer;
+  vertical-align: bottom;
+}
+</style>
diff --git a/manager/src/views/order/after-order/orderComplaintDetail.vue b/manager/src/views/order/after-order/orderComplaintDetail.vue
index 84281dfa..852b2049 100644
--- a/manager/src/views/order/after-order/orderComplaintDetail.vue
+++ b/manager/src/views/order/after-order/orderComplaintDetail.vue
@@ -1,247 +1,250 @@
 <template>
-  <div class="search">
-    <Card>
-      <div class="main-content">
+  <div class="search" v-loading="loading">
+    <el-card>
+      <div class="main-content" v-if="complaintInfo.id">
         <div class="div-flow-left">
           <div class="div-form-default">
             <h3>投诉信息</h3>
             <dl>
               <dt>投诉商品</dt>
-              <dd>{{complaintInfo.goodsName}}</dd>
               <dd>
                 <div>
-                  <img :src="complaintInfo.goodsImage" style="height: 60px">
+                  <img :src="complaintInfo.goodsImage" style="height: 60px" alt="" />
                 </div>
-                <a>{{ complaintInfo.goodsName }}</a><br>
+                <a class="link-text">{{ complaintInfo.goodsName }}</a><br />
                 <span>{{ complaintInfo.num }}(数量)</span>
               </dd>
             </dl>
             <dl>
               <dt>投诉状态</dt>
-              <dd v-if="complaintInfo.complainStatus =='NEW'">新投诉</dd>
-              <dd v-if="complaintInfo.complainStatus =='CANCEL'">已撤销</dd>
-              <dd v-if="complaintInfo.complainStatus =='WAIT_APPEAL'">待申诉</dd>
-              <dd v-if="complaintInfo.complainStatus =='COMMUNICATION'">对话中</dd>
-              <dd v-if="complaintInfo.complainStatus =='WAIT_ARBITRATION'">等待仲裁</dd>
-              <dd v-if="complaintInfo.complainStatus =='COMPLETE'">已完成</dd>
+              <dd>{{ complainStatusText(complaintInfo.complainStatus) }}</dd>
             </dl>
             <dl>
               <dt>投诉时间</dt>
-              <dd>{{complaintInfo.createTime}}</dd>
+              <dd>{{ complaintInfo.createTime }}</dd>
             </dl>
             <dl>
               <dt>投诉主题</dt>
-              <dd>{{complaintInfo.complainTopic}}</dd>
+              <dd>{{ complaintInfo.complainTopic }}</dd>
             </dl>
             <dl>
               <dt>投诉内容</dt>
-              <dd>{{complaintInfo.content}}</dd>
+              <dd>{{ complaintInfo.content }}</dd>
             </dl>
             <dl>
               <dt>投诉凭证</dt>
-              <dd v-if="images == ''">
-                暂无投诉凭证
-              </dd>
+              <dd v-if="!images.length">暂无投诉凭证</dd>
               <dd v-else>
                 <div class="div-img" v-for="(item, index) in images" :key="index">
-                  <img class="complain-img" :src=item>
+                  <img class="complain-img" :src="item" alt="" />
                 </div>
               </dd>
             </dl>
           </div>
+
           <div class="div-form-default" v-if="complaintInfo.appealContent">
             <h3>商家申诉信息</h3>
             <dl>
               <dt>申诉时间</dt>
-              <dd>{{complaintInfo.appealTime}}</dd>
+              <dd>{{ complaintInfo.appealTime }}</dd>
             </dl>
             <dl>
               <dt>申诉内容</dt>
-              <dd>{{complaintInfo.appealContent}}</dd>
+              <dd>{{ complaintInfo.appealContent }}</dd>
             </dl>
             <dl>
               <dt>申诉凭证</dt>
-              <dd v-if="complaintInfo.appealImagesList.length == 0">
-                暂无申诉凭证
-              </dd>
+              <dd v-if="!appealImages.length">暂无申诉凭证</dd>
               <dd v-else>
-                <div class="div-img" v-for="(item, index) in complaintInfo.appealImagesList" :key="index">
-                  <img class="complain-img" :src="item">
+                <div class="div-img" v-for="(item, index) in appealImages" :key="index">
+                  <img class="complain-img" :src="item" alt="" />
+                </div>
+              </dd>
+            </dl>
+          </div>
+
+          <div class="div-form-default">
+            <h3>对话详情</h3>
+            <dl>
+              <dt>对话记录</dt>
+              <dd>
+                <div class="div-content">
+                  <p
+                    v-for="(item, index) in complaintInfo.orderComplaintCommunications || []"
+                    :key="index"
+                  >
+                    <span v-if="item.owner == 'STORE'">商家[{{ item.createTime }}]</span>
+                    <span v-else-if="item.owner == 'BUYER'">买家[{{ item.createTime }}]</span>
+                    <span v-else-if="item.owner == 'PLATFORM'">平台[{{ item.createTime }}]</span>
+                    {{ item.content }}
+                  </p>
+                </div>
+              </dd>
+            </dl>
+            <dl v-if="complaintInfo.complainStatus != 'COMPLETE'">
+              <dt>发送对话</dt>
+              <dd>
+                <el-input
+                  v-model="params.content"
+                  type="textarea"
+                  maxlength="200"
+                  :rows="4"
+                  clearable
+                  style="width: 260px"
+                />
+              </dd>
+            </dl>
+            <dl v-if="complaintInfo.complainStatus != 'COMPLETE'">
+              <dt></dt>
+              <dd>
+                <div style="text-align: right; width: 45%; margin-top: 10px">
+                  <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
+                    回复
+                  </el-button>
+                  <el-button type="primary" :loading="submitLoading" @click="returnDataList" style="margin-left: 5px">
+                    返回列表
+                  </el-button>
                 </div>
               </dd>
             </dl>
           </div>
-            <div class="div-form-default">
-              <h3>对话详情</h3>
-              <dl>
-                <dt>对话记录</dt>
-                <dd>
-                  <div class="div-content">
-                    <p v-for="(item, index) in complaintInfo.orderComplaintCommunications" :key="index">
-                      <span v-if="item.owner == 'STORE'">商家[{{ item.createTime }}]</span>
-                      <span v-if="item.owner == 'BUYER'">买家[{{ item.createTime }}]</span>
-                      <span v-if="item.owner == 'PLATFORM'">平台[{{ item.createTime }}]</span>
-                      {{ item.content }}
-                    </p>
-                  </div>
 
-                </dd>
-              </dl>
-              <dl v-if="complaintInfo.complainStatus!='COMPLETE'">
-                <dt>发送对话</dt>
-                <dd>
-                  <Input
-                    v-model="params.content"
-                    type="textarea"
-                    maxlength="200"
-                    :rows="4"
-                    clearable
-                    style="width:260px"
-                  />
-                </dd>
-              </dl>
-              <dl v-if="complaintInfo.complainStatus != 'COMPLETE'">
-                <dt></dt>
-                <dd>
-                  <div style="text-align: right;width: 45%;margin-top: 10px">
-                    <Button type="primary" :loading="submitLoading" @click="handleSubmit" style="margin-left: 5px">
-                      回复
-                    </Button>
-                    <Button type="primary" :loading="submitLoading" @click="returnDataList" style="margin-left: 5px">
-                      返回列表
-                    </Button>
-                  </div>
-                </dd>
-              </dl>
-            </div>
           <div class="div-form-default" v-if="complaintInfo.complainStatus == 'COMPLETE'">
             <h3>仲裁结果</h3>
             <dl>
               <dt>仲裁意见</dt>
-              <dd>
-                {{complaintInfo.arbitrationResult}}
-              </dd>
+              <dd>{{ complaintInfo.arbitrationResult }}</dd>
             </dl>
           </div>
+
           <div class="div-form-default" v-if="complaintInfo.complainStatus != 'COMPLETE'">
             <h3>平台仲裁</h3>
-            <dl v-if="arbitrationResultShow == true">
+            <dl v-if="arbitrationResultShow">
               <dt>仲裁</dt>
               <dd>
-                <Input v-model="arbitrationParams.arbitrationResult" type="textarea" maxlength="200" :rows="4" clearable style="width:260px" />
+                <el-input
+                  v-model="arbitrationParams.arbitrationResult"
+                  type="textarea"
+                  maxlength="200"
+                  :rows="4"
+                  clearable
+                  style="width: 260px"
+                />
               </dd>
             </dl>
             <dl>
               <dt></dt>
-              <dd style="text-align:right;display:flex; justify-content: space-between;">
-                <Button type="primary" ghost :loading="submitLoading" v-if="arbitrationResultShow == false" @click="arbitrationHandle">
+              <dd style="text-align: right; display: flex; justify-content: space-between">
+                <el-button
+                  v-if="!arbitrationResultShow"
+                  :loading="submitLoading"
+                  @click="arbitrationHandle"
+                >
                   直接仲裁结束投诉流程
-                </Button>
-                <Button :loading="submitLoading" v-if="complaintInfo.complainStatus == 'NEW'" @click="handleStoreComplaint">
+                </el-button>
+                <el-button
+                  v-if="complaintInfo.complainStatus == 'NEW'"
+                  :loading="submitLoading"
+                  @click="handleStoreComplaint"
+                >
                   交由商家申诉
-                </Button>
-                <Button type="primary" :loading="submitLoading" v-if="arbitrationResultShow == true" @click="arbitrationHandleSubmit">
+                </el-button>
+                <el-button
+                  v-if="arbitrationResultShow"
+                  type="primary"
+                  :loading="submitLoading"
+                  @click="arbitrationHandleSubmit"
+                >
                   提交仲裁
-                </Button>
+                </el-button>
               </dd>
             </dl>
           </div>
         </div>
-        <div class="div-flow-center">
 
-        </div>
+        <div class="div-flow-center"></div>
+
         <div class="div-flow-right">
           <div class="div-form-default">
             <h3>订单相关信息</h3>
             <dl>
-              <dt>
-                订单编号
-              </dt>
-              <dd>
-                {{complaintInfo.orderSn}}
-              </dd>
+              <dt>订单编号</dt>
+              <dd>{{ complaintInfo.orderSn }}</dd>
             </dl>
             <dl>
-              <dt>
-                下单时间
-              </dt>
-              <dd>
-                {{complaintInfo.createTime}}
-              </dd>
+              <dt>下单时间</dt>
+              <dd>{{ complaintInfo.createTime }}</dd>
             </dl>
             <dl>
-              <dt>
-                订单金额
-              </dt>
+              <dt>订单金额</dt>
               <dd>
-                <priceColorScheme :value="complaintInfo.orderPrice" :color="$mainColor"></priceColorScheme>
+                <span class="price-text">{{ $filters.unitPrice(complaintInfo.orderPrice, "￥") }}</span>
               </dd>
             </dl>
-
           </div>
           <div class="div-form-default">
             <h3>收件人信息</h3>
             <dl>
-              <dt>
-                收货人
-              </dt>
-              <dd>
-                {{complaintInfo.consigneeName}}
-              </dd>
+              <dt>收货人</dt>
+              <dd>{{ complaintInfo.consigneeName }}</dd>
             </dl>
             <dl>
-              <dt>
-                收货地址
-              </dt>
-              <dd>
-                {{complaintInfo.consigneeAddressPath}}
-              </dd>
+              <dt>收货地址</dt>
+              <dd>{{ complaintInfo.consigneeAddressPath }}</dd>
             </dl>
             <dl>
-              <dt>
-                收货人手机
-              </dt>
-              <dd>
-                {{complaintInfo.consigneeMobile}}
-              </dd>
+              <dt>收货人手机</dt>
+              <dd>{{ complaintInfo.consigneeMobile }}</dd>
             </dl>
           </div>
         </div>
       </div>
-    </Card>
+    </el-card>
   </div>
 </template>
 
 <script>
 import * as API_Order from "@/api/order";
 
+const emptyComplaint = () => ({
+  id: "",
+  orderComplaintCommunications: [],
+});
+
 export default {
   name: "orderComplaintDetail",
   data() {
     return {
-      id: 0, // 投诉id
-      complaintInfo: "", // 投诉信息
-      images: [], //会员申诉图片
-      appealImages: [], //商家申诉的图片
-      submitLoading: false, // 添加或编辑提交状态
-      //管理端回复内容
+      loading: false,
+      id: "",
+      complaintInfo: emptyComplaint(),
+      images: [],
+      appealImages: [],
+      submitLoading: false,
       params: {
         content: "",
         complainId: "",
       },
-      //仲裁结果
       arbitrationParams: {
         arbitrationResult: "",
       },
-      //是否显示仲裁框
       arbitrationResultShow: false,
     };
   },
   methods: {
-    // 交给商家申诉
+    complainStatusText(v) {
+      const map = {
+        NEW: "新投诉",
+        CANCEL: "已撤销",
+        WAIT_APPEAL: "待申诉",
+        COMMUNICATION: "对话中",
+        WAIT_ARBITRATION: "等待仲裁",
+        COMPLETE: "已完成",
+      };
+      return map[v] || v || "-";
+    },
     handleStoreComplaint() {
       API_Order.storeComplain({
-        complainStatus: "WAIT_APPEAL",
         complainStatus: "WAIT_APPEAL",
         complainId: this.complaintInfo.id,
       }).then((res) => {
@@ -251,73 +254,89 @@ export default {
         }
       });
     },
-    // 初始化数据
-    init() {
-      this.getDataList();
-    },
-    // 获取投诉详情
     getDetail() {
+      if (!this.id) return;
       this.loading = true;
-      API_Order.getOrderComplainDetail(this.id).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.complaintInfo = res.result;
-          this.images = (res.result.images || "").split(",");
-          this.appealImages = (res.result.appealImages || "").split(",");
-        }
-      });
+      API_Order.getOrderComplainDetail(this.id)
+        .then((res) => {
+          this.loading = false;
+          if (res.success) {
+            this.complaintInfo = res.result || emptyComplaint();
+            this.images = (res.result.images || "")
+              .split(",")
+              .map((s) => s.trim())
+              .filter(Boolean);
+            this.appealImages = (res.result.appealImages || "")
+              .split(",")
+              .map((s) => s.trim())
+              .filter(Boolean);
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
-    //返回列表
     returnDataList() {
-      this.$router.push({
-        name: "orderComplaint",
-      });
+      this.$router.push({ name: "orderComplaint" });
     },
-    //仲裁
     arbitrationHandle() {
       this.arbitrationResultShow = true;
     },
-    //仲裁结果提交
     arbitrationHandleSubmit() {
-      if (this.arbitrationParams.arbitrationResult == "") {
+      if (!this.arbitrationParams.arbitrationResult) {
         this.$Message.error("请填写仲裁内容");
         return;
       }
-      API_Order.orderComplete(this.id, this.arbitrationParams).then((res) => {
-        this.submitLoading = false;
-        if (res.success) {
-          this.$Message.success("仲裁成功");
-          this.arbitrationParams.arbitrationResult = "";
-          this.getDetail();
-        }
-      });
-      this.arbitrationResultShow = true;
+      this.submitLoading = true;
+      API_Order.orderComplete(this.id, this.arbitrationParams)
+        .then((res) => {
+          this.submitLoading = false;
+          if (res.success) {
+            this.$Message.success("仲裁成功");
+            this.arbitrationParams.arbitrationResult = "";
+            this.arbitrationResultShow = false;
+            this.getDetail();
+          }
+        })
+        .catch(() => {
+          this.submitLoading = false;
+        });
     },
-    //回复
     handleSubmit() {
-      if (this.params.content == "") {
+      if (!this.params.content) {
         this.$Message.error("请填写对话内容");
         return;
       }
+      this.submitLoading = true;
       this.params.complainId = this.id;
-      API_Order.addOrderCommunication(this.params).then((res) => {
-        this.submitLoading = false;
-        if (res.success) {
-          this.$Message.success("对话成功");
-          this.params.content = "";
-          this.getDetail();
-        }
-      });
+      API_Order.addOrderCommunication(this.params)
+        .then((res) => {
+          this.submitLoading = false;
+          if (res.success) {
+            this.$Message.success("对话成功");
+            this.params.content = "";
+            this.getDetail();
+          }
+        })
+        .catch(() => {
+          this.submitLoading = false;
+        });
     },
   },
   mounted() {
     this.id = this.$route.query.id;
     this.getDetail();
   },
+  watch: {
+    "$route.query.id"(val) {
+      this.id = val;
+      this.getDetail();
+    },
+  },
 };
 </script>
-<style lang="scss" scoped>
 
+<style lang="scss" scoped>
 .main-content {
   min-height: 600px;
   padding: 10px;
@@ -442,4 +461,14 @@ export default {
   overflow-x: auto;
   height: 150px;
 }
+
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+}
+
+.price-text {
+  color: #ff5c58;
+  font-weight: 600;
+}
 </style>
diff --git a/manager/src/views/order/flow/paymentLog.vue b/manager/src/views/order/flow/paymentLog.vue
index ff1e93ad..b91681d9 100644
--- a/manager/src/views/order/flow/paymentLog.vue
+++ b/manager/src/views/order/flow/paymentLog.vue
@@ -1,38 +1,113 @@
 <template>
   <div class="search">
-    <Card>
-      <Row @keydown.enter.native="handleSearch">
-        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-          <Form-item label="订单号" prop="sn">
-            <Input type="text" v-model="searchForm.sn" placeholder="订单/交易号" clearable style="width: 240px" />
-          </Form-item>
-          <Form-item label="付款状态" prop="orderStatus">
-            <Select v-model="searchForm.payStatus" placeholder="请选择" clearable style="width: 240px">
-              <Option value="UNPAID">未付款</Option>
-              <Option value="PAID">已付款</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="支付方式" prop="orderStatus">
-            <Select v-model="searchForm.paymentMethod" placeholder="请选择" clearable style="width: 240px">
-              <Option value="">全部</Option>
-              <Option value="WECHAT">微信</Option>
-              <Option value="ALIPAY">支付宝</Option>
-              <Option value="WALLET">余额</Option>
-              <Option value="BANK_TRANSFER">银行转账</Option>
-            </Select>
-          </Form-item>
-          
-          <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-        </Form>
-      </Row>
-    </Card>
-    <Card>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10"></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]" size="small"
-          show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="订单号" prop="sn">
+          <el-input
+            v-model="searchForm.sn"
+            placeholder="订单/交易号"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="付款状态" prop="orderStatus">
+          <el-select v-model="searchForm.payStatus" placeholder="请选择" clearable style="width: 240px">
+            <el-option label="未付款" value="UNPAID" />
+            <el-option label="已付款" value="PAID" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="支付方式" prop="orderStatus">
+          <el-select v-model="searchForm.paymentMethod" placeholder="请选择" clearable style="width: 240px">
+            <el-option label="全部" value="" />
+            <el-option label="微信" value="WECHAT" />
+            <el-option label="支付宝" value="ALIPAY" />
+            <el-option label="余额" value="WALLET" />
+            <el-option label="银行转账" value="BANK_TRANSFER" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column prop="sn" label="订单/交易编号" min-width="180" show-overflow-tooltip />
+        <el-table-column prop="storeName" label="店铺名称" min-width="100" show-overflow-tooltip />
+        <el-table-column label="支付方式" width="120" align="center">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.paymentMethod === 'WECHAT'" type="success">微信</el-tag>
+              <el-tag v-else-if="row.paymentMethod === 'ALIPAY'" type="primary">支付宝</el-tag>
+              <el-tag v-else-if="row.paymentMethod === 'WALLET'" type="info">余额支付</el-tag>
+              <el-tag v-else-if="row.paymentMethod === 'BANK_TRANSFER'" type="warning">银行转帐</el-tag>
+              <el-tag v-else>暂未付款</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="第三方流水" min-width="130">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.receivableNo || "暂无流水号" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="客户端" width="130">
+          <template #default="{ row }">
+            <span v-if="row">
+              <span v-if="row.clientType === 'WECHAT_MP' || row.clientType === '小程序'">小程序</span>
+              <span v-else-if="row.clientType === 'APP'">APP</span>
+              <span v-else-if="row.clientType === 'PC'">PC网页</span>
+              <span v-else-if="row.clientType === 'H5' || row.clientType === 'wap'">移动端</span>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="支付时间" width="200">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.paymentTime || "暂无支付时间" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="订单金额" min-width="80" fixed="right">
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.flowPrice" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column label="支付状态" width="95" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.payStatus == 'PAID'" type="success">已付款</el-tag>
+              <el-tag v-else type="danger">未付款</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -43,156 +118,42 @@ export default {
   name: "paymentLog",
   data() {
     return {
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
         sn: "",
         payStatus: "",
-        startDate: "", //订单创建时间
-        endDate: "", //订单结束时间
+        startDate: "",
+        endDate: "",
       },
-      times: [], //订单创建时间
-      columns: [
-        {
-          title: "订单/交易编号",
-          key: "sn",
-          minWidth: 180,
-          tooltip: true,
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          minWidth: 100,
-          tooltip: true,
-        },
-        {
-          title: "支付方式",
-          key: "paymentMethod",
-          width: 120,
-          align: "center",
-          render: (h, params) => {
-            if (params.row.paymentMethod === "WECHAT") {
-              return h("div", [
-                h("Tag", { props: { color: "green" } }, "微信"),
-              ]);
-            } else if (params.row.paymentMethod === "ALIPAY") {
-              return h("div", [
-                h("Tag", { props: { color: "blue" } }, "支付宝"),
-              ]);
-            } else if (params.row.paymentMethod === "WALLET") {
-              return h("div", [
-                h("Tag", { props: { color: "geekblue" } }, "余额支付"),
-              ]);
-            } else if (params.row.paymentMethod === "BANK_TRANSFER") {
-              return h("div", [
-                h("Tag", { props: { color: "orange" } }, "银行转帐"),
-              ]);
-            } else {
-              return h("div", [h("Tag", {}, "暂未付款")]);
-            }
-          },
-        },
-        {
-          title: "第三方流水",
-          key: "receivableNo",
-          minWidth: 130,
-          render: (h, params) => {
-            return h("div", [
-              h("span", {}, params.row.receivableNo || "暂无流水号"),
-            ]);
-          },
-        },
-        {
-          title: "客户端",
-          key: "clientType",
-          width: 130,
-          render: (h, params) => {
-            if (
-              params.row.clientType === "WECHAT_MP" ||
-              params.row.clientType === "小程序"
-            ) {
-              return h("div", [h("span", {}, "小程序")]);
-            } else if (params.row.clientType === "APP") {
-              return h("div", [h("span", {}, "APP")]);
-            } else if (params.row.clientType === "PC") {
-              return h("div", [h("span", {}, "PC网页")]);
-            } else if (
-              params.row.clientType === "H5" ||
-              params.row.clientType === "wap"
-            ) {
-              return h("div", [h("span", {}, "移动端")]);
-            }
-          },
-        },
-        {
-          title: "支付时间",
-          key: "paymentTime",
-          width: 200,
-          render: (h, params) => {
-            return h("div", [
-              h("span", {}, params.row.paymentTime || "暂无支付时间"),
-            ]);
-          },
-        },
-        {
-          title: "订单金额",
-          fixed: "right",
-          key: "flowPrice",
-          minWidth: 80,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "支付状态",
-          key: "payStatus",
-          width: 95,
-          fixed: "right",
-          render: (h, params) => {
-            if (params.row.payStatus == "PAID") {
-              return h("div", [h("Tag", {props:{color:'green'}}, "已付款")]);
-            } else {
-              return h("div", [h("Tag", {props:{color:'red'}}, "未付款")]);
-            }
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      times: [],
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 改变页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getDataList();
     },
-    // 改变页数
-    changePageSize(v) {
+    changePageSize() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
     changeDate(val) {
-      // 改变日期格式
       this.searchForm.startDate = val[0];
       this.searchForm.endDate = val[1];
     },
-    // 获取列表
     getDataList() {
       this.loading = true;
       API_Order.paymentLog(this.searchForm).then((res) => {
@@ -202,8 +163,6 @@ export default {
           this.total = res.result.total;
         }
       });
-      this.total = this.data.length;
-      this.loading = false;
     },
   },
   mounted() {
@@ -211,4 +170,3 @@ export default {
   },
 };
 </script>
-
diff --git a/manager/src/views/order/flow/refundLog.vue b/manager/src/views/order/flow/refundLog.vue
index d869b39a..33e4130d 100644
--- a/manager/src/views/order/flow/refundLog.vue
+++ b/manager/src/views/order/flow/refundLog.vue
@@ -1,106 +1,110 @@
 <template>
   <div class="search">
-    <Card>
-      <Row @keydown.enter.native="handleSearch">
-        <Form
-          ref="searchForm"
-          :model="searchForm"
-          inline
-          :label-width="70"
-          class="search-form"
-        >
-          <Form-item label="订单号" prop="orderSn">
-            <Input
-              type="text"
-              v-model="searchForm.orderSn"
-              placeholder="订单/交易号"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="退款状态">
-            <Select
-              v-model="searchForm.isRefund"
-              placeholder="请选择"
-              clearable
-              style="width: 240px"
-            >
-              <Option value="false">未退款</Option>
-              <Option value="true">已退款</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="退款时间">
-            <DatePicker
-              v-model="selectDate"
-              type="datetimerange"
-              format="yyyy-MM-dd"
-              clearable
-              @on-change="selectDateRange"
-              placeholder="选择起始时间"
-              style="width: 240px"
-            ></DatePicker>
-          </Form-item>
-          <Button
-            @click="handleSearch"
-            type="primary"
-            icon="ios-search"
-            class="search-btn"
-            >搜索</Button
-          >
-        </Form>
-      </Row>
-      </Card>
-    <Card>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-        class="mt_10"
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <template slot-scope="{ row, index }" slot="actions">
-
-          <Tag color="green" v-if="row.isRefund">已退款</Tag>
-          <div v-if="!row.isRefund">
-            <Tag v-if="!row.errorMessage" color="red">未退款</Tag>
-            <Tooltip v-else placement="left">
-              <Tag color="red">未退款<Icon type="md-help" /></Tag>
-              <div
-                slot="content"
-                style="white-space: normal"
-                v-if="row.paymentName == 'WECHAT'"
-              >
-                {{
-                  row.errorMessage ? JSON.parse(row.errorMessage).message : ""
-                }}
+        <el-form-item label="订单号" prop="orderSn">
+          <el-input
+            v-model="searchForm.orderSn"
+            placeholder="订单/交易号"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="退款状态">
+          <el-select
+            v-model="searchForm.isRefund"
+            placeholder="请选择"
+            clearable
+            style="width: 240px"
+          >
+            <el-option label="未退款" value="false" />
+            <el-option label="已退款" value="true" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="退款时间">
+          <el-date-picker
+            v-model="selectDate"
+            type="daterange"
+            clearable
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="width: 240px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card>
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column prop="afterSaleNo" label="售后单号" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="orderSn" label="订单号" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="paymentReceivableNo" label="第三方付款流水" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="receivableNo" label="第三方退款流水" min-width="130" show-overflow-tooltip />
+        <el-table-column label="退款金额" min-width="120">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">
+              {{ $filters.unitPrice(row.totalAmount, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="申请时间" min-width="120" show-overflow-tooltip />
+        <el-table-column label="退款状态" width="200" align="center">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.isRefund" type="success">已退款</el-tag>
+              <div v-else>
+                <el-tag v-if="!row.errorMessage" type="danger">未退款</el-tag>
+                <el-tooltip v-else placement="left">
+                  <template #content>
+                    <div
+                      v-if="row.paymentName == 'WECHAT'"
+                      style="white-space: normal"
+                    >
+                      {{ row.errorMessage ? JSON.parse(row.errorMessage).message : "" }}
+                    </div>
+                    <div
+                      v-if="row.paymentName == 'ALIPAY'"
+                      style="white-space: normal"
+                    >
+                      {{ row.errorMessage || "" }}
+                    </div>
+                  </template>
+                  <el-tag type="danger">未退款</el-tag>
+                </el-tooltip>
               </div>
-              <div
-                slot="content"
-                style="white-space: normal"
-                v-if="row.paymentName == 'ALIPAY'"
-              >
-                {{ row.errorMessage || "" }}
-              </div>
-            </Tooltip>
-          </div>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -111,102 +115,49 @@ export default {
   name: "refundLog",
   data() {
     return {
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
         orderSn: "",
         isRefund: "",
       },
-      // 退款起止时间
       selectDate: null,
-      columns: [
-        {
-          title: "售后单号",
-          key: "afterSaleNo",
-          minWidth: 150,
-          tooltip: true,
-        },
-        {
-          title: "订单号",
-          key: "orderSn",
-          minWidth: 150,
-          tooltip: true,
-        },
-        {
-          title: "第三方付款流水",
-          key: "paymentReceivableNo",
-          minWidth: 150,
-          tooltip: true,
-        },
-        {
-          title: "第三方退款流水",
-          key: "receivableNo",
-          minWidth: 130,
-          tooltip: true,
-        },
-        {
-          title: "退款金额",
-          key: "totalAmount",
-          minWidth: 120,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.totalAmount,color:this.$mainColor}} );
-          },
-
-        },
-        {
-          title: "申请时间",
-          key: "createTime",
-          minWidth: 120,
-          tooltip: true,
-        },
-        {
-          title: "退款状态",
-          key: "isRefund",
-          align:"center",
-          width: 200,
-          slot: "actions",
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
-    // 分页 改变页数
     changePageSize(v) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 起止时间从新赋值
     selectDateRange(v) {
-      if (v) {
+      if (v && v[0] && v[1]) {
         this.searchForm.startDate = v[0];
         this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
       }
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
       API_Order.refundLog(this.searchForm).then((res) => {
@@ -216,7 +167,6 @@ export default {
           this.total = res.result.total;
         }
       });
-      this.loading = false;
     },
   },
   mounted() {
diff --git a/manager/src/views/order/order/fictitiousOrderList.vue b/manager/src/views/order/order/fictitiousOrderList.vue
index ac122e76..c6a29495 100644
--- a/manager/src/views/order/order/fictitiousOrderList.vue
+++ b/manager/src/views/order/order/fictitiousOrderList.vue
@@ -1,39 +1,128 @@
 <template>
   <div class="search">
-    <Card>
-      <Row @keydown.enter.native="handleSearch">
-        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-          <Form-item label="订单号" prop="orderSn">
-            <Input type="text" v-model="searchForm.orderSn" placeholder="请输入订单号" clearable style="width: 240px" />
-          </Form-item>
-          <Form-item label="会员名称" prop="buyerName">
-            <Input type="text" v-model="searchForm.buyerName" placeholder="请输入会员名称" clearable style="width: 240px" />
-          </Form-item>
-          <Form-item label="下单时间">
-            <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable
-              @on-change="selectDateRange" placeholder="选择起始时间" style="width: 240px"></DatePicker>
-          </Form-item>
-          <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="订单号" prop="orderSn">
+          <el-input
+            v-model="searchForm.orderSn"
+            placeholder="请输入订单号"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="会员名称" prop="buyerName">
+          <el-input
+            v-model="searchForm.buyerName"
+            placeholder="请输入会员名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="下单时间">
+          <el-date-picker
+            v-model="selectDate"
+            type="datetimerange"
+            value-format="YYYY-MM-DD"
+            clearable
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择起始时间"
+            style="width: 240px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-        </Form>
-      </Row>
-    </Card>
-    <Card>
+    <el-card>
       <div class="order-tab">
-        <Tabs v-model="currentStatus" @on-click="orderStatusClick">
-          <TabPane v-for="(item,index) in orderStatus" :key="index" :label="item.title" :name="item.value">
-          </TabPane>
-        </Tabs>
+        <el-tabs v-model="currentStatus" @tab-click="onStatusTabClick">
+          <el-tab-pane
+            v-for="(item, index) in orderStatus"
+            :key="index"
+            :label="item.title"
+            :name="item.value"
+          />
+        </el-tabs>
       </div>
 
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10" sortable="custom"
-        @on-sort-change="changeSort"></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
-          @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]" size="small" show-total show-elevator
-          show-sizer></Page>
-      </Row>
-    </Card>
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+        @sort-change="changeSort"
+      >
+        <el-table-column prop="sn" label="订单号" min-width="230" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="下单时间" width="200" />
+        <el-table-column label="订单来源" width="95">
+          <template #default="{ row }">
+            <span v-if="row">
+              <span v-if="row.clientType == 'H5'">移动端</span>
+              <span v-else-if="row.clientType == 'PC'">PC端</span>
+              <span v-else-if="row.clientType == 'WECHAT_MP'">小程序端</span>
+              <span v-else-if="row.clientType == 'APP'">移动应用端</span>
+              <span v-else>{{ row.clientType }}</span>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="memberName" label="买家名称" width="130" />
+        <el-table-column label="订单金额" prop="flowPrice" min-width="120" sortable="custom">
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.flowPrice" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column label="订单状态" width="95">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.orderStatus == 'UNPAID'" type="danger">未付款</el-tag>
+              <el-tag v-else-if="row.orderStatus == 'PAID'" type="primary">已付款</el-tag>
+              <el-tag v-else-if="row.orderStatus == 'COMPLETED'" type="success">已完成</el-tag>
+              <el-tag v-else-if="row.orderStatus == 'TAKE'" type="warning">待核验</el-tag>
+              <el-tag v-else-if="row.orderStatus == 'CANCELLED'" type="info">已关闭</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" align="center">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a
+                class="link-text"
+                :class="{ disabled: row.orderStatus != 'UNPAID' }"
+                @click="row.orderStatus == 'UNPAID' && confirmPrice(row)"
+              >收款</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="detail(row)">查看</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -42,192 +131,63 @@ import * as API_Order from "@/api/order";
 
 export default {
   name: "fictitiousOrderList",
-  data () {
+  data() {
     return {
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "", // 默认排序字段
-        order: "", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "",
+        order: "",
+        startDate: "",
+        endDate: "",
         orderType: "VIRTUAL",
         orderSn: "",
         buyerName: "",
-        orderStatus: ""
+        orderStatus: "",
       },
-
-      selectDate: null, // 下单时间
-      columns: [
-        {
-          title: "订单号",
-          key: "sn",
-          minWidth: 230,
-          tooltip: true
-        },
-        {
-          title: "下单时间",
-          key: "createTime",
-          width: 200,
-        },
-        {
-          title: "订单来源",
-          key: "clientType",
-          width: 95,
-          render: (h, params) => {
-            if (params.row.clientType == "H5") {
-              return h("div", {}, "移动端");
-            } else if (params.row.clientType == "PC") {
-              return h("div", {}, "PC端");
-            } else if (params.row.clientType == "WECHAT_MP") {
-              return h("div", {}, "小程序端");
-            } else if (params.row.clientType == "APP") {
-              return h("div", {}, "移动应用端");
-            } else {
-              return h("div", {}, params.row.clientType);
-            }
-          },
-        },
-        {
-          title: "买家名称",
-          key: "memberName",
-          width: 130,
-        },
-        {
-          title: "订单金额",
-          key: "flowPrice",
-          minWidth: 120,
-          sortable: true,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
-          },
-        },
-
-        {
-          title: "订单状态",
-          key: "orderStatus",
-          width: 95,
-          render: (h, params) => {
-            if (params.row.orderStatus == "UNPAID") {
-              return h("div", [h("tag", { props: { color: "magenta" } }, "未付款")]);
-            } else if (params.row.orderStatus == "PAID") {
-              return h("div", [h("tag", { props: { color: "blue" } }, "已付款")]);
-            } else if (params.row.orderStatus == "COMPLETED") {
-              return h("div", [h("tag", { props: { color: "green" } }, "已完成")]);
-            } else if (params.row.orderStatus == "TAKE") {
-              return h("div", [h("tag", { props: { color: "volcano" } }, "待核验")]);
-            } else if (params.row.orderStatus == "CANCELLED") {
-              return h("div", [h("tag", { props: { color: "red" } }, "已关闭")]);
-            }
-          }
-        },
-
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 200,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "Button",
-
-                {
-                  props: {
-                    type: "primary",
-                    size: "small",
-                  },
-                  attrs: {
-                    disabled: params.row.orderStatus == "UNPAID" ? false : true,
-                  },
-                  style: {
-                    marginRight: "5px",
-                  },
-                  on: {
-                    click: () => {
-                      this.confirmPrice(params.row);
-                    },
-                  },
-                },
-                "收款"
-              ),
-              h(
-                "Button",
-                {
-                  props: {
-                    type: "info",
-                    size: "small",
-                  },
-                  style: {
-                    marginRight: "5px",
-                  },
-                  on: {
-                    click: () => {
-                      this.detail(params.row);
-                    },
-                  },
-                },
-                "查看"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      selectDate: null,
+      data: [],
+      total: 0,
       orderStatus: [
-        {title: '全部', value: ''},
-        {title: '未付款', value: 'UNPAID'},
-        {title: '已付款', value: 'PAID'},
-        {title: '待核验', value: 'TAKE'},
-        {title: '已完成', value: 'COMPLETED'},
-        {title: '已关闭', value: 'CANCELLED'},
+        { title: "全部", value: "" },
+        { title: "未付款", value: "UNPAID" },
+        { title: "已付款", value: "PAID" },
+        { title: "待核验", value: "TAKE" },
+        { title: "已完成", value: "COMPLETED" },
+        { title: "已关闭", value: "CANCELLED" },
       ],
-      currentStatus: ''
+      currentStatus: "",
     };
   },
   methods: {
-    // 初始化数据
-    init () {
+    init() {
       this.getDataList();
     },
-    // 分页 改变页码
-    changePage (v) {
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getDataList();
     },
-    // 分页 改变页数
-    changePageSize (v) {
+    changePageSize() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
-    handleSearch () {
+    handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 列表排序
-    changeSort (e) {
-      this.searchForm.sort = e.key;
-      this.searchForm.order = e.order;
-      if (e.order === "normal") {
-        this.searchForm.order = "";
-      }
+    changeSort(e) {
+      this.searchForm.sort = e.prop;
+      this.searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
       this.getDataList();
     },
-    // 起止时间从新赋值
-    selectDateRange (v) {
+    selectDateRange(v) {
       if (v) {
         this.searchForm.startDate = v[0];
         this.searchForm.endDate = v[1];
       }
     },
-    // 获取列表数据
-    getDataList () {
+    getDataList() {
       this.loading = true;
       API_Order.getOrderList(this.searchForm).then((res) => {
         this.loading = false;
@@ -236,55 +196,45 @@ export default {
           this.total = res.result.total;
         }
       });
-      this.total = this.data.length;
-      this.loading = false;
     },
-    //确认收款
-    confirmPrice (v) {
+    confirmPrice(v) {
       this.$Modal.confirm({
         title: "确认收款",
         content: "您确定要收款吗？",
         loading: true,
         onOk: () => {
-          API_Order.orderPay(v.sn).then(res => {
+          API_Order.orderPay(v.sn).then((res) => {
             if (res.success) {
-              this.$Message.success("收款成功")
-              this.getDataList()
+              this.$Message.success("收款成功");
+              this.getDataList();
             }
             this.$Modal.remove();
-          })
+          });
         },
       });
-
     },
-    // 订单详情
-    detail (v) {
+    detail(v) {
       let sn = v.sn;
-      this.$options.filters.customRouterPush({
+      this.$filters.customRouterPush({
         name: "order-detail",
         query: { sn: sn, orderType: v.orderType },
-      })
+      });
     },
-    // 订单筛选
-    orderStatusClick(item) {
-      this.currentStatus = item;  // 使用参数 item
-      this.searchForm.orderStatus = item;  // 使用参数 item
+    onStatusTabClick(tab) {
+      const item = tab.paneName;
+      this.currentStatus = item;
+      this.searchForm.orderStatus = item;
       this.getDataList();
     },
   },
-  mounted () {
+  mounted() {
     this.init();
   },
 };
 </script>
 
-
 <style lang="scss" scoped>
-// Tab组件样式
 .order-tab {
   margin-top: 20px;
-  ::v-deep .ivu-tabs-tab {
-    font-size: 14px;
-  }
 }
 </style>
diff --git a/manager/src/views/order/order/orderDetail.vue b/manager/src/views/order/order/orderDetail.vue
index dbf46b14..0f00915d 100644
--- a/manager/src/views/order/order/orderDetail.vue
+++ b/manager/src/views/order/order/orderDetail.vue
@@ -1,18 +1,17 @@
 <template>
   <div class="search">
     <div>
-      <Card style="height: 60px">
+      <el-card style="height: 60px">
         <div style="">
-          <Button v-if="allowOperation.editPrice" @click="modifyPrice">调整价格</Button>
-          <Button v-if="allowOperation.editConsignee" @click="editAddress" type="primary" ghost>修改收货地址</Button>
-          <Button v-if="allowOperation.cancel" @click="orderCancel" type="warning" ghost>订单取消</Button>
-          <Button v-if="orderInfo.order.orderStatus === 'UNPAID'" @click="confirmPrice" type="primary">收款</Button>
-          <Button @click="orderLog" type="info" ghost>订单日志</Button>
-          <Button @click="printOrder" type="primary" ghost style="float:right;"
-            v-if="$route.query.orderType != 'VIRTUAL'">打印发货单</Button>
+          <el-button v-if="allowOperation.editPrice" @click="modifyPrice">调整价格</el-button>
+          <el-button v-if="allowOperation.editConsignee" plain type="primary" @click="editAddress">修改收货地址</el-button>
+          <el-button v-if="allowOperation.cancel" plain type="warning" @click="orderCancel">订单取消</el-button>
+          <el-button v-if="orderInfo.order.orderStatus === 'UNPAID'" type="primary" @click="confirmPrice">收款</el-button>
+          <el-button plain @click="orderLog">订单日志</el-button>
+          <el-button v-if="$route.query.orderType != 'VIRTUAL'" plain type="primary" style="float:right;" @click="printOrder">打印发货单</el-button>
         </div>
-      </Card>
-      <Card class="mt_10 clearfix">
+      </el-card>
+      <el-card class="mt_10 clearfix">
         <div style="width: 30%; float: left; margin-left: 20px">
           <div class="div-item">
             <div class="div-item-left">订单号：</div>
@@ -21,7 +20,7 @@
           <div class="div-item">
             <div class="div-item-left">订单来源：</div>
             <div class="div-item-right">
-              {{ orderInfo.order.clientType | clientTypeWay }}
+              {{ $filters.clientTypeWay(orderInfo.order.clientType) }}
             </div>
           </div>
 
@@ -149,9 +148,12 @@
             <div class="div-item-left">发票金额：</div>
             <div class="div-item-right">
               {{
-                orderInfo.receipt && orderInfo.receipt.receiptPrice
-                ? orderInfo.receipt.receiptPrice
-                : "暂无" | unitPrice("￥")
+                $filters.unitPrice(
+                  orderInfo.receipt && orderInfo.receipt.receiptPrice
+                    ? orderInfo.receipt.receiptPrice
+                    : "暂无",
+                  "￥"
+                )
               }}
             </div>
           </div>
@@ -170,42 +172,57 @@
             </div>
           </div>
         </div>
-      </Card>
-      <Card class="mt_10">
-        <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom">
-          <!-- 商品栏目格式化 -->
-          <template slot="goodsSlot" slot-scope="{ row }">
-            <div style="margin-top: 5px; height: 80px; display: flex">
-              <div style="">
-                <img :src="row.image" style="height: 60px; margin-top: 1px; width: 60px" />
-              </div>
-
-              <div style="margin-left: 13px">
-                <div class="div-zoom">
-                  <a @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
+      </el-card>
+      <el-card class="mt_10">
+        <el-table v-loading="loading" border :data="data" ref="table" style="width: 100%">
+          <el-table-column label="商品" min-width="200">
+            <template #default="{ row }">
+              <div v-if="row" style="margin-top: 5px; height: 80px; display: flex">
+                <div>
+                  <img :src="row.image" style="height: 60px; margin-top: 1px; width: 60px" />
                 </div>
-                <span v-for="(item, key) in JSON.parse(row.specs)" :key="key">
-                  <span v-show="key != 'images'" style="font-size: 12px; color: #999999">
-                    {{ key }} : {{ item }}
-                  </span>
-                </span>
-                <Poptip trigger="hover" style="display: block" title="扫码在手机中查看" transfer>
-                  <div slot="content">
-                    <vue-qr :text="wapLinkTo(row.goodsId, row.skuId)" :margin="0" colorDark="#000" colorLight="#fff"
-                      :size="150"></vue-qr>
+                <div style="margin-left: 13px">
+                  <div class="div-zoom">
+                    <a class="link-text" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
                   </div>
-                  <img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="" />
-                </Poptip>
+                  <span v-for="(item, key) in JSON.parse(row.specs)" :key="key">
+                    <span v-show="key != 'images'" style="font-size: 12px; color: #999999">
+                      {{ key }} : {{ item }}</span>
+                  </span>
+                  <el-popover trigger="hover" title="扫码在手机中查看" width="180">
+                    <template #reference>
+                      <img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="" style="display: block" />
+                    </template>
+                    <vue-qr :text="wapLinkTo(row.goodsId, row.skuId)" :margin="0" colorDark="#000" colorLight="#fff" :size="150" />
+                  </el-popover>
+                </div>
               </div>
-            </div>
-          </template>
-        </Table>
+            </template>
+          </el-table-column>
+          <el-table-column label="优惠" min-width="100">
+            <template #default="{ row }">
+              <span v-if="row">{{ getPromotionText(row) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="单价" min-width="100">
+            <template #default="{ row }">
+              <span v-if="row">{{ $filters.unitPrice(row.unitPrice || 0, "￥") }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="num" label="数量" min-width="80" />
+          <el-table-column prop="returnGoodsNumber" label="退款数量" min-width="80" />
+          <el-table-column label="小计" min-width="100">
+            <template #default="{ row }">
+              <span v-if="row">{{ $filters.unitPrice(row.flowPrice, "￥") }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
         <div class="goods-total">
           <ul>
             <li>
               <span class="label">商品总额：</span>
               <span class="txt">{{
-                orderInfo.order.priceDetailDTO.goodsPrice | unitPrice("￥")
+                $filters.unitPrice(orderInfo.order.priceDetailDTO.goodsPrice, "￥")
               }}</span>
             </li>
             <li v-if="
@@ -214,8 +231,7 @@
             ">
               <span class="label">优惠金额：</span>
               <span class="txt">
-                {{ orderInfo.order.priceDetailDTO.discountPrice | unitPrice("￥") }}
-              </span>
+                {{ $filters.unitPrice(orderInfo.order.priceDetailDTO.discountPrice, "￥") }}</span>
             </li>
 
             <li v-if="
@@ -225,33 +241,31 @@
               <span class="label">优惠券金额：</span>
               <span class="txt">
                 <priceColorScheme :value="orderInfo.order.priceDetailDTO.couponPrice" :color="$mainColor"></priceColorScheme>
-
               </span>
             </li>
             <li
               v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">
               <div class="label">
-                <Poptip trigger="hover" placement="left" width="200">
-                  <Icon v-if="typeList.length > 0" type="ios-alert-outline" size="17" @click="getOrderPrice"
-                    color="#cc0000" />
-                  <template #content>
-                    <div class="api" style="text-align:left;">
-                      <table>
-                        <thead>
-                          <tr>
-                            <th>优惠详情：</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          <tr v-for="(item, index) in typeList" :key="index">
-                            <td>{{ item.promotionName }}：</td>
-                            <td>¥{{ item.discountPrice | unitPrice }}</td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
+                <el-popover v-if="typeList.length > 0" trigger="hover" placement="left" width="220">
+                  <template #reference>
+                    <span class="hover-pointer" style="color: #cc0000" @click="getOrderPrice">ⓘ</span>
                   </template>
-                </Poptip>
+                  <div class="api" style="text-align:left;">
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>优惠详情：</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr v-for="(item, index) in typeList" :key="index">
+                          <td>{{ item.promotionName }}：</td>
+                          <td>¥{{ $filters.unitPrice(item.discountPrice) }}</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </el-popover>
                 <span>优惠详情：</span>
               </div>
             </li>
@@ -259,22 +273,22 @@
                 <span class="label" style="color: #cc0000;font-size: 14px;" v-if="typeList.length > 0" >优惠详情：</span>
               </li> -->
             <!-- <li v-if="showPrices"  v-for="(item,index) in typeList" :key="index">
-                <span class="label" v-if="index == 1 && typeList.length > 1" style="font-size:10px !important;"><a  @click="gotoHomes" style="display: inline-block;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
-                <span class="txt" style="border-bottom: 1px dashed;font-size:10px !important;" v-if="index == 1 &&  typeList.length > 1">¥{{ item.discountPrice | unitPrice }}</span>
-                <span class="label" v-if="index == 0 &&  typeList.length > 1" style="font-size:10px !important;"><a  @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
-                <span class="txt" style="border-top: 1px dashed;font-size:10px !important;" v-if="index == 0 && typeList.length > 1">¥{{ item.discountPrice | unitPrice }}</span>
-                <span class="label" v-if="typeList.length == 1 && index == 0" style="font-size:10px !important;"><a  @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
-                <span class="txt"  v-if="typeList.length == 1 && index == 0" style="border-top: 1px dashed;border-bottom: 1px dashed;font-size:10px !important;">¥{{ item.discountPrice | unitPrice }}</span>
+                <span class="label" v-if="index == 1 && typeList.length > 1" style="font-size:10px !important;"><a  @click="gotoHomes" style="display: inline-block;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a><span class="op-split">|</span>
+                <span class="txt" style="border-bottom: 1px dashed;font-size:10px !important;" v-if="index == 1 &&  typeList.length > 1">¥{{ $filters.unitPrice(item.discountPrice) }}</span>
+                <span class="label" v-if="index == 0 &&  typeList.length > 1" style="font-size:10px !important;"><a  @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a><span class="op-split">|</span>
+                <span class="txt" style="border-top: 1px dashed;font-size:10px !important;" v-if="index == 0 && typeList.length > 1">¥{{ $filters.unitPrice(item.discountPrice) }}</span>
+                <span class="label" v-if="typeList.length == 1 && index == 0" style="font-size:10px !important;"><a  @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a><span class="op-split">|</span>
+                <span class="txt"  v-if="typeList.length == 1 && index == 0" style="border-top: 1px dashed;border-bottom: 1px dashed;font-size:10px !important;">¥{{ $filters.unitPrice(item.discountPrice) }}</span>
               </li> -->
             <li>
               <span class="label">运费：</span>
               <span class="txt">{{
-                orderInfo.order.freightPrice | unitPrice("￥")
+                $filters.unitPrice(orderInfo.order.freightPrice, "￥")
               }}</span>
             </li>
             <li v-if="orderInfo.order.priceDetailDTO.updatePrice">
               <span class="label">修改金额：</span>
-              <span class="txt theme_color">¥{{ orderInfo.order.priceDetailDTO.updatePrice | unitPrice }}</span>
+              <span class="txt theme_color">¥{{ $filters.unitPrice(orderInfo.order.priceDetailDTO.updatePrice) }}</span>
             </li>
             <li v-if="orderInfo.order.priceDetailDTO.payPoint != 0">
               <span class="label">使用积分：</span>
@@ -284,126 +298,108 @@
             </li>
             <li>
               <span class="label">应付金额：</span>
-              <span class="txt flowPrice">¥{{ orderInfo.order.priceDetailDTO.flowPrice | unitPrice }}</span>
+              <span class="txt flowPrice">¥{{ $filters.unitPrice(orderInfo.order.priceDetailDTO.flowPrice) }}</span>
             </li>
           </ul>
         </div>
-      </Card>
+      </el-card>
     </div>
 
-    <Modal v-model="modal" width="530">
-      <p slot="header">
-        <Icon type="edit"></Icon>
-        <span>修改金额</span>
-      </p>
-      <div>
-        <Form ref="modifyPriceForm" :model="modifyPriceForm" label-position="left" :label-width="70"
-          :rules="modifyPriceValidate" @submit.native.prevent>
-          <FormItem label="订单金额" prop="price">
-            <InputNumber style="width: 100px" v-model="modifyPriceForm.price" :min="0" :max="999999"></InputNumber>
-            <span class="ml_10">元</span>
-          </FormItem>
-        </Form>
-      </div>
-      <div slot="footer" style="text-align: right">
-        <Button @click="modal = false">关闭</Button>
-        <Button type="primary" @click="modifyPriceSubmit">调整</Button>
-      </div>
-    </Modal>
-    <!-- 订单取消模态框 -->
-    <Modal v-model="orderCancelModal" width="530">
-      <p slot="header">
-        <Icon type="edit"></Icon>
-        <span>订单取消</span>
-      </p>
-      <div>
-        <Form ref="orderCancelForm" :model="orderCancelForm" label-position="left" :label-width="100"
-          :rules="orderCancelValidate">
-          <FormItem label="取消原因" prop="reason">
-            <Input v-model="orderCancelForm.reason" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
-              placeholder="请输入取消原因"></Input>
-          </FormItem>
-        </Form>
-      </div>
-      <div slot="footer" style="text-align: right">
-        <Button @click="orderCancelModal = false">关闭</Button>
-        <Button type="primary" @click="orderCancelSubmit">确认</Button>
-      </div>
-    </Modal>
-    <!--收件地址弹出框-->
-    <Modal v-model="addressModal" width="530">
-      <p slot="header">
-        <Icon type="edit"></Icon>
-        <span>修改收件信息</span>
-      </p>
-      <div>
-        <Form ref="addressForm" :model="addressForm" label-position="left" :label-width="100" :rules="addressRule">
-          <FormItem label="收件人" prop="consigneeName">
-            <Input v-model="addressForm.consigneeName" size="large" maxlength="20"></Input>
-          </FormItem>
-          <FormItem label="联系方式" prop="consigneeMobile">
-            <Input v-model="addressForm.consigneeMobile" size="large" maxlength="11"></Input>
-          </FormItem>
-          <FormItem label="地址信息" prop="consigneeAddressPath">
-            {{ addr }}
-            <Button type="default" @click="$refs.map.open()">选择</Button>
-          </FormItem>
-          <FormItem label="详细地址" prop="consigneeDetail">
-            <Input v-model="addressForm.consigneeDetail" size="large" ></Input>
-          </FormItem>
-        </Form>
-      </div>
-      <div slot="footer" style="text-align: right">
-        <Button @click="addressModal = false">关闭</Button>
-        <Button type="primary" @click="editAddressSubmit">修改</Button>
-      </div>
-    </Modal>
-    <!-- 订单日志 -->
-    <Modal v-model="orderLogModal" width="60">
-      <p slot="header">
-        <span>订单日志</span>
-      </p>
-      <div class="order-log-div">
-        <Table :loading="loading" border :columns="orderLogColumns" :data="orderInfo.orderLogs" ref="table"
-          sortable="custom"></Table>
-      </div>
+    <el-dialog v-model="modal" title="修改金额" width="530px">
+      <el-form ref="modifyPriceForm" :model="modifyPriceForm" label-width="70px" :rules="modifyPriceValidate" @submit.prevent>
+        <el-form-item label="订单金额" prop="price">
+          <el-input-number v-model="modifyPriceForm.price" :min="0" :max="999999" style="width: 120px" />
+          <span class="ml_10">元</span>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modal = false">关闭</el-button>
+        <el-button type="primary" @click="modifyPriceSubmit">调整</el-button>
+      </template>
+    </el-dialog>
 
-      <div slot="footer" style="text-align: right">
-        <Button @click="handelCancel">取消</Button>
+    <el-dialog v-model="orderCancelModal" title="订单取消" width="530px">
+      <el-form ref="orderCancelForm" :model="orderCancelForm" label-width="100px" :rules="orderCancelValidate">
+        <el-form-item label="取消原因" prop="reason">
+          <el-input v-model="orderCancelForm.reason" type="textarea" :rows="3" placeholder="请输入取消原因" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="orderCancelModal = false">关闭</el-button>
+        <el-button type="primary" @click="orderCancelSubmit">确认</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="addressModal" title="修改收件信息" width="530px">
+      <el-form ref="addressForm" :model="addressForm" label-width="100px" :rules="addressRule">
+        <el-form-item label="收件人" prop="consigneeName">
+          <el-input v-model="addressForm.consigneeName" maxlength="20" />
+        </el-form-item>
+        <el-form-item label="联系方式" prop="consigneeMobile">
+          <el-input v-model="addressForm.consigneeMobile" maxlength="11" />
+        </el-form-item>
+        <el-form-item label="地址信息" prop="consigneeAddressPath">
+          {{ addr }}
+          <el-button @click="$refs.map.open()">选择</el-button>
+        </el-form-item>
+        <el-form-item label="详细地址" prop="consigneeDetail">
+          <el-input v-model="addressForm.consigneeDetail" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="addressModal = false">关闭</el-button>
+        <el-button type="primary" @click="editAddressSubmit">修改</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="orderLogModal" title="订单日志" width="60%">
+      <div class="order-log-div">
+        <el-table v-loading="loading" border :data="orderInfo.orderLogs || []" style="width: 100%">
+          <el-table-column prop="operatorName" label="操作者" min-width="120" />
+          <el-table-column prop="operatorType" label="操作类型" min-width="100" />
+          <el-table-column prop="createTime" label="时间" width="180" />
+          <el-table-column prop="message" label="日志" min-width="200" show-overflow-tooltip />
+        </el-table>
       </div>
-    </Modal>
-    <Modal v-model="printModal" width="530" @on-cancel="printCancel">
-      <p slot="header" style="line-height:26px;height:26px;">
-        <span style="float: left;">打印发货单</span>
-        <Button size="small" style="margin-right:35px;float: right;padding-bottom: 2px;"
-          @click="printHiddenInfo"><template v-if="printHiddenFlag">显示</template><template
-            v-else>隐藏</template>敏感信息</Button>
-      </p>
+      <template #footer>
+        <el-button @click="handelCancel">取消</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="printModal" width="530px" @close="printCancel">
+      <template #header>
+        <div style="line-height:26px;height:26px;">
+          <span style="float: left;">打印发货单</span>
+          <el-button size="small" style="margin-right:35px;float: right;padding-bottom: 2px;" @click="printHiddenInfo">
+            {{ printHiddenFlag ? "显示" : "隐藏" }}敏感信息
+          </el-button>
+        </div>
+      </template>
       <div style="max-height:500px;overflow-y:auto;overflow-x:hidden;">
         <div id="printInfo">
-          <Row v-if="orderInfo.order.remark !== ''">
-            <Col span="24">
+          <el-row v-if="orderInfo.order.remark !== ''">
+            <el-col :span="24">
             <p class="lineH30 f14">备注：{{ orderInfo.order.remark }}</p>
-            </Col>
-          </Row>
-          <Row>
-            <Col span="12">
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
             <p class="lineH30 f14">收件人：{{ orderInfo.order.consigneeName }}</p>
-            </Col>
-            <Col span="12" v-if="orderInfo.order.consigneeMobile">
-            <p class="lineH30 f14" v-if="printHiddenFlag">手机号：{{
+            </el-col>
+            <el-col v-if="orderInfo.order.consigneeMobile" :span="12">
+            <p v-if="printHiddenFlag" class="lineH30 f14">手机号：{{
               orderInfo.order.consigneeMobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") }}</p>
-            <p class="lineH30 f14" v-else>手机号：{{ orderInfo.order.consigneeMobile }}</p>
-            </Col>
-          </Row>
-          <Row>
-            <Col span="24">
+            <p v-else class="lineH30 f14">手机号：{{ orderInfo.order.consigneeMobile }}</p>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
             <p class="lineH30 f14">收货地址：{{ orderInfo.order.consigneeAddressPath }}{{ orderInfo.order.consigneeDetail }}
             </p>
-            </Col>
-          </Row>
-          <Row>
-            <Col span="24">
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
             <p class="printgoodtitle">商品信息</p>
             <div class="printgoodinfo">
               <div v-for="(item, index) in orderInfo.orderItems" :key="index" class="printgooditem">
@@ -412,24 +408,23 @@
                   <div class="printgoodguid">
                     <span v-for="(itemchild, keychild) in JSON.parse(item.specs)" :key="keychild">
                       <span class="printgoodguiditem" v-if="keychild != 'images'">
-                        {{ keychild }} : {{ itemchild }}
-                      </span>
+                        {{ keychild }} : {{ itemchild }}</span>
                     </span>
                   </div>
                 </div>
                 <span class="printgoodnumber">数量：{{ item.num }}</span>
               </div>
             </div>
-            </Col>
-          </Row>
+            </el-col>
+          </el-row>
         </div>
       </div>
 
-      <div slot="footer" style="text-align: right">
-        <Button @click="printModal = false">关闭</Button>
-        <Button type="primary" v-print="printInfoObj">打印发货单</Button>
-      </div>
-    </Modal>
+      <template #footer>
+        <el-button @click="printModal = false">关闭</el-button>
+        <el-button type="primary" v-print="printInfoObj">打印发货单</el-button>
+      </template>
+    </el-dialog>
 
 
     <multipleMap ref="map" @callback="selectedRegion" />
@@ -542,98 +537,7 @@ export default {
         ],
       },
 
-      columns: [
-        {
-          title: "商品",
-          key: "goodsName",
-          minWidth: 200,
-          slot: "goodsSlot",
-        },
-        {
-          title: "优惠",
-          key: "num",
-          minWidth: 100,
-          render: (h, params) => {
-            let resultText = "";
-            if (params.row.promotionType) {
-              let type = params.row.promotionType.split(",");
-              if (type.indexOf("PINTUAN") != -1) {
-                resultText += "拼团 ";
-              }
-              if (type.indexOf("SECKILL") != -1) {
-                resultText += "秒杀 ";
-              }
-              if (type.indexOf("COUPON") != -1) {
-                resultText += "优惠券 ";
-              }
-              if (type.indexOf("FULL_DISCOUNT") != -1) {
-                resultText += "满减 ";
-              }
-              if (type.indexOf("POINTS_GOODS") != -1) {
-                resultText += "积分商品 ";
-              }
-            }
-            if (resultText === "") {
-              resultText = "暂无未参与任何促销";
-            }
-            return h("div", resultText);
-          },
-        },
-        {
-          title: "单价",
-          key: "goodsPrice",
-          minWidth: 100,
-          render: (h, params) => {
-            if (!params.row.goodsPrice) {
-              return h("div", this.$options.filters.unitPrice(0, "￥"));
-            }
-            return h("div", this.$options.filters.unitPrice(params.row.unitPrice, "￥"));
-          },
-        },
-
-        {
-          title: "数量",
-          key: "num",
-          minWidth: 80,
-        },
-        {
-          title: "退款数量",
-          key: "returnGoodsNumber",
-          minWidth: 80,
-        },
-        {
-          title: "小计",
-          key: "subTotal",
-          minWidth: 100,
-          render: (h, params) => {
-            return h("div", this.$options.filters.unitPrice(params.row.flowPrice, "￥"));
-          },
-        },
-      ],
       data: [], // 表单数据
-      orderLogColumns: [
-        {
-          title: "操作者",
-          key: "operatorName",
-          minWidth: 120,
-        },
-        {
-          title: "操作类型",
-          key: "operatorType",
-          minWidth: 100,
-        },
-        {
-          title: "时间",
-          key: "createTime",
-          width: 180,
-        },
-        {
-          title: "日志",
-          key: "message",
-          tooltip: true,
-          minWidth: 200,
-        },
-      ],
     };
   },
   watch: {
@@ -642,6 +546,18 @@ export default {
     },
   },
   methods: {
+    getPromotionText(row) {
+      let resultText = "";
+      if (row && row.promotionType) {
+        const type = row.promotionType.split(",");
+        if (type.indexOf("PINTUAN") != -1) resultText += "拼团 ";
+        if (type.indexOf("SECKILL") != -1) resultText += "秒杀 ";
+        if (type.indexOf("COUPON") != -1) resultText += "优惠券 ";
+        if (type.indexOf("FULL_DISCOUNT") != -1) resultText += "满减 ";
+        if (type.indexOf("POINTS_GOODS") != -1) resultText += "积分商品 ";
+      }
+      return resultText === "" ? "暂无未参与任何促销" : resultText;
+    },
     gotoHomes () {
       return false
     },
@@ -725,12 +641,12 @@ export default {
       if(val.type === 'select'){
         const paths = val.data.map(item => item.name).join(',')
         const ids = val.data.map(item => item.id).join(',')
-        this.$set(this,'addr',paths)
-        this.$set(this,'regionId',ids)
+        this.addr = paths;
+        this.regionId = ids;
       }
       else{
-        this.$set(this,'addr',val.data.addr)
-        this.$set(this,'regionId',val.data.addrId)
+        this.addr = val.data.addr;
+        this.regionId = val.data.addrId;
       }
 
     },
diff --git a/manager/src/views/order/order/orderList.vue b/manager/src/views/order/order/orderList.vue
index dd9c4f8f..1b7fcf91 100644
--- a/manager/src/views/order/order/orderList.vue
+++ b/manager/src/views/order/order/orderList.vue
@@ -1,153 +1,143 @@
 <template>
-  <div>
-    <Card>
-      <Form
+  <div class="search">
+    <el-card>
+      <el-form
         ref="searchForm"
-        @keydown.enter.native="handleSearch"
         :model="searchForm"
         inline
-        :label-width="70"
+        label-width="70px"
         class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <Form-item label="关键字" prop="keywords" style="display: block; width: 100%;">
-          <Input
-            type="text"
+        <el-form-item label="关键字" prop="keywords" style="display: block; width: 100%">
+          <el-input
             v-model="searchForm.keywords"
             placeholder="请输入商品名称/收货人/收货人手机号/店铺名称"
             clearable
             style="width: 500px"
           />
-        </Form-item>
-        <Form-item label="订单号" prop="orderSn">
-          <Input
-            type="text"
-            v-model="searchForm.orderSn"
-            placeholder="请输入订单号"
-            clearable
-            style="width: 240px"
-          />
-        </Form-item>
-        <Form-item label="会员名称" prop="buyerName">
-          <Input
-            type="text"
-            v-model="searchForm.buyerName"
-            placeholder="请输入会员名称"
-            clearable
-            style="width: 240px"
-          />
-        </Form-item>
-        <Form-item label="商品名称" prop="goodsName">
-          <Input
-            type="text"
-            v-model="searchForm.goodsName"
-            placeholder="请输入商品名称"
-            clearable
-            style="width: 240px"
-          />
-        </Form-item>
-        <Form-item label="收货人" prop="shipName">
-          <Input
-            type="text"
-            v-model="searchForm.shipName"
-            placeholder="请输入收货人姓名"
-            clearable
-            style="width: 240px"
-          />
-        </Form-item>
-        <Form-item label="订单类型" prop="orderType">
-          <Select
-            v-model="searchForm.orderPromotionType"
-            placeholder="请选择"
-            clearable
-            style="width: 240px"
-          >
-            <Option value="NORMAL">普通订单</Option>
-            <Option value="PINTUAN">拼团订单</Option>
-            <Option value="GIFT">赠品订单</Option>
-            <Option value="POINTS">积分订单</Option>
-            <Option value="KANJIA">砍价订单</Option>
-          </Select>
-        </Form-item>
-        <Form-item label="支付方式" prop="paymentMethod">
-          <Select
-            v-model="searchForm.paymentMethod"
-            placeholder="请选择支付方式"
-            clearable
-            style="width: 240px"
-          >
-            <Option value="WECHAT">微信支付</Option>
-            <Option value="ALIPAY">支付宝</Option>
-            <Option value="WALLET">余额支付</Option>
-            <Option value="BANK_TRANSFER">线下转账</Option>
-          </Select>
-        </Form-item>
-        <Form-item label="下单时间">
-          <DatePicker
+        </el-form-item>
+        <el-form-item label="订单号" prop="orderSn">
+          <el-input v-model="searchForm.orderSn" placeholder="请输入订单号" clearable style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="会员名称" prop="buyerName">
+          <el-input v-model="searchForm.buyerName" placeholder="请输入会员名称" clearable style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="商品名称" prop="goodsName">
+          <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="收货人" prop="shipName">
+          <el-input v-model="searchForm.shipName" placeholder="请输入收货人姓名" clearable style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="订单类型" prop="orderType">
+          <el-select v-model="searchForm.orderPromotionType" placeholder="请选择" clearable style="width: 240px">
+            <el-option label="普通订单" value="NORMAL" />
+            <el-option label="拼团订单" value="PINTUAN" />
+            <el-option label="赠品订单" value="GIFT" />
+            <el-option label="积分订单" value="POINTS" />
+            <el-option label="砍价订单" value="KANJIA" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="支付方式" prop="paymentMethod">
+          <el-select v-model="searchForm.paymentMethod" placeholder="请选择支付方式" clearable style="width: 240px">
+            <el-option label="微信支付" value="WECHAT" />
+            <el-option label="支付宝" value="ALIPAY" />
+            <el-option label="余额支付" value="WALLET" />
+            <el-option label="线下转账" value="BANK_TRANSFER" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="下单时间">
+          <el-date-picker
             v-model="selectDate"
             type="datetimerange"
-            format="yyyy-MM-dd"
+            value-format="YYYY-MM-DD HH:mm:ss"
             clearable
-            @on-change="selectDateRange"
-            placeholder="选择起始时间"
-            style="width: 240px"
-          ></DatePicker>
-        </Form-item>
-        <Button
-          @click="handleSearch"
-          type="primary"
-          icon="ios-search"
-          class="search-btn"
-          >搜索</Button
-        >
-      </Form>
-    </Card>
-    <Card>
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            style="width: 360px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
       <div class="order-tab">
-        <Tabs v-model="currentStatus" @on-click="orderStatusClick">
-          <TabPane v-for="(item,index) in orderStatusWithCount" :key="index" :label="item.title" :name="item.value">
-          </TabPane>
-        </Tabs>
+        <el-tabs v-model="currentStatus" @tab-click="onStatusTabClick">
+          <el-tab-pane
+            v-for="(item, index) in orderStatusWithCount"
+            :key="index"
+            :label="item.title"
+            :name="item.value"
+          />
+        </el-tabs>
       </div>
       <div>
-        <Button @click="exportOrder" type="info" class="export">导出订单</Button>
+        <el-button type="info" class="export" @click="exportOrder">导出订单</el-button>
       </div>
-      <Table
-        :loading="loading"
-        :columns="columns"
-        :data="data"
-        ref="table"
-        sortable="custom"
-      ></Table>
 
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+      <el-table v-loading="loading" :data="data" ref="table" class="mt_10" style="width: 100%">
+        <el-table-column prop="sn" label="订单号" min-width="240" show-overflow-tooltip />
+        <el-table-column label="订单来源" width="120">
+          <template #default="{ row }">{{ clientTypeText(row.clientType) }}</template>
+        </el-table-column>
+        <el-table-column label="订单类型" width="120">
+          <template #default="{ row }">
+            <el-tag :type="orderPromotionTagType(row.orderPromotionType)">
+              {{ orderPromotionText(row.orderPromotionType) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="memberName" label="买家名称" min-width="130" show-overflow-tooltip />
+        <el-table-column prop="memberId" label="会员ID" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="storeName" label="店铺名称" min-width="150" show-overflow-tooltip />
+        <el-table-column label="订单金额" min-width="100">
+          <template #default="{ row }">
+            <span :style="{ color: $mainColor }">{{ $filters.unitPrice(row.flowPrice, '￥') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="支付方式" width="120">
+          <template #default="{ row }">{{ paymentMethodText(row.paymentMethod) }}</template>
+        </el-table-column>
+        <el-table-column label="订单状态" min-width="100">
+          <template #default="{ row }">
+            <el-tag :type="orderStatusTagType(row.orderStatus)">{{ orderStatusText(row.orderStatus) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="下单时间" width="170" />
+        <el-table-column label="操作" width="100" align="center" fixed="right">
+          <template #default="{ row }">
+            <a class="link-text" @click="detail(row)">查看</a>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
 import * as API_Order from "@/api/order";
-import JsonExcel from "vue-json-excel";
+
 export default {
   name: "orderList",
-  components: {
-    "download-excel": JsonExcel,
-  },
   data() {
     return {
-      // 表格的表头以及内容
       fields: {
         订单编号: "sn",
         下单时间: "createTime",
@@ -155,377 +145,251 @@ export default {
         支付方式: {
           field: "clientType",
           callback: (value) => {
-            if (value == "H5") {
-              return "移动端";
-            } else if (value == "PC") {
-              return "PC端";
-            } else if (value == "WECHAT_MP") {
-              return "小程序端";
-            } else if (value == "APP") {
-              return "移动应用端";
-            } else {
-              return value;
-            }
+            if (value == "H5") return "移动端";
+            if (value == "PC") return "PC端";
+            if (value == "WECHAT_MP") return "小程序端";
+            if (value == "APP") return "移动应用端";
+            return value;
           },
         },
         商品数量: "groupNum",
         付款状态: {
           field: "payStatus",
-          callback: (value) => {
-            return value == "UNPAID"
-              ? "未付款"
-              : value == "PAID"
-              ? "已付款"
-              : "";
-          },
+          callback: (value) =>
+            value == "UNPAID" ? "未付款" : value == "PAID" ? "已付款" : "",
         },
         店铺: "storeName",
       },
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
         orderType: "",
         orderSn: "",
-        keywords: "", // 新增关键字搜索字段
+        keywords: "",
         buyerName: "",
-        goodsName: "", // 新增商品名称筛选字段
-        shipName: "", // 新增收货人筛选字段
+        goodsName: "",
+        shipName: "",
         orderStatus: "",
-        paymentMethod: "", // 新增支付方式筛选字段
+        paymentMethod: "",
+        orderPromotionType: "",
       },
       selectDate: null,
-      columns: [
-        {
-          title: "订单号",
-          key: "sn",
-          minWidth: 240,
-          tooltip: true,
-        },
-        {
-          title: "订单来源",
-          key: "clientType",
-          width: 120,
-          render: (h, params) => {
-            if (params.row.clientType == "H5") {
-              return h("div", {}, "移动端");
-            } else if (params.row.clientType == "PC") {
-              return h("div", {}, "PC端");
-            } else if (params.row.clientType == "WECHAT_MP") {
-              return h("div", {}, "小程序端");
-            } else if (params.row.clientType == "APP") {
-              return h("div", {}, "移动应用端");
-            } else {
-              return h("div", {}, params.row.clientType);
-            }
-          },
-        },
-        {
-          title: "订单类型",
-          key: "orderPromotionType",
-          width: 120,
-          render: (h, params) => {
-            if (params.row.orderPromotionType == "NORMAL") {
-              return h("div", [
-                h("tag", { props: { color: "blue" } }, "普通订单"),
-              ]);
-            } else if (params.row.orderPromotionType == "PINTUAN") {
-              return h("div", [
-                h("tag", { props: { color: "volcano" } }, "拼团订单"),
-              ]);
-            } else if (params.row.orderPromotionType == "GIFT") {
-              return h("div", [
-                h("tag", { props: { color: "green" } }, "赠品订单"),
-              ]);
-            } else if (params.row.orderPromotionType == "POINTS") {
-              return h("div", [
-                h("tag", { props: { color: "geekblue" } }, "积分订单"),
-              ]);
-            } else if (params.row.orderPromotionType == "KANJIA") {
-              return h("div", [
-                h("tag", { props: { color: "pink" } }, "砍价订单"),
-              ]);
-            }
-          },
-        },
-        {
-          title: "买家名称",
-          key: "memberName",
-          minWidth: 130,
-          tooltip: true,
-        },
-        
-        {
-          title: "会员ID",
-          key: "memberId",
-          minWidth: 120,
-          tooltip: true,
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          minWidth: 150,
-          tooltip: true,
-        },
-
-        {
-          title: "订单金额",
-          key: "flowPrice",
-          minWidth: 100,
-          tooltip: true,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
-          },
-
-        },
-        {
-          title: "支付方式",
-          key: "paymentMethod",
-          width: 120,
-          render: (h, params) => {
-            if (params.row.paymentMethod == "NOT_ACTUALLY_PAID") {
-              return h("div", {}, "-");
-            } else if (params.row.paymentMethod == "WECHAT") {
-              return h("div", {}, "微信支付");
-            } else if (params.row.paymentMethod == "ALIPAY") {
-              return h("div", {}, "支付宝");
-            } else if (params.row.paymentMethod == "WALLET") {
-              return h("div", {}, "余额支付");
-            } else if (params.row.paymentMethod == "BANK_TRANSFER") {
-              return h("div", {}, "线下转账");
-            } else {
-              return h("div", {}, params.row.paymentMethod || "-");
-            }
-          },
-        },
-        {
-          title: "订单状态",
-          key: "orderStatus",
-          minWidth: 100,
-          render: (h, params) => {
-            if (params.row.orderStatus == "UNPAID") {
-              return h("div", [
-                h("tag", { props: { color: "magenta" } }, "未付款"),
-              ]);
-            } else if (params.row.orderStatus == "PAID") {
-              return h("div", [
-                h("tag", { props: { color: "blue" } }, "已付款"),
-              ]);
-            } else if (params.row.orderStatus == "UNDELIVERED") {
-              return h("div", [
-                h("tag", { props: { color: "geekblue" } }, "待发货"),
-              ]);
-            } else if (params.row.orderStatus == "STAY_PICKED_UP") {
-              return h("div", [
-                h("tag", { props: { color: "geekblue" } }, "待自提"),
-              ]);
-            } else if (params.row.orderStatus == "PARTS_DELIVERED") {
-              return h("div", [
-                h("tag", { props: { color: "cyan" } }, "部分发货"),
-              ]);
-            } else if (params.row.orderStatus == "DELIVERED") {
-              return h("div", [
-                h("tag", { props: { color: "cyan" } }, "已发货"),
-              ]);
-            } else if (params.row.orderStatus == "COMPLETED") {
-              return h("div", [
-                h("tag", { props: { color: "green" } }, "已完成"),
-              ]);
-            } else if (params.row.orderStatus == "TAKE") {
-              return h("div", [
-                h("tag", { props: { color: "volcano" } }, "待核验"),
-              ]);
-            } else if (params.row.orderStatus == "CANCELLED") {
-              return h("div", [
-                h("tag", { props: { color: "red" } }, "已关闭"),
-              ]);
-            }
-          },
-        },
-        {
-          title: "下单时间",
-          key: "createTime",
-          width: 170,
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 100,
-          render: (h, params) => {
-            return h(
-              "div",
-              { class: "ops" },
-              [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.detail(params.row);
-                      },
-                    },
-                  },
-                  "查看"
-                ),
-              ]
-            );
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      orderNumData: {}, // 新增：订单数量统计数据
-      orderStatus: [
-        {title: '全部', value: ''},
-        {title: '未付款', value: 'UNPAID'},
-        {title: '已付款', value: 'PAID'},
-        {title: '待发货', value: 'UNDELIVERED'},
-        {title: '部分发货', value: 'PARTS_DELIVERED'},
-        {title: '已发货', value: 'DELIVERED'},
-        {title: '待核验', value: 'TAKE'},
-        {title: '待自提', value: 'STAY_PICKED_UP'},
-        {title: '已完成', value: 'COMPLETED'},
-        {title: '已关闭', value: 'CANCELLED'},
-      ],
-      currentStatus: ''
+      data: [],
+      total: 0,
+      orderNumData: {},
+      currentStatus: "ALL",
     };
   },
   computed: {
-    // 新增：带数量的订单状态选项
     orderStatusWithCount() {
       return [
-        {title: '全部', value: ''},
-        {title: `未付款${this.orderNumData.waitPayNum ? '(' + this.orderNumData.waitPayNum + ')' : ''}`, value: 'UNPAID'},
-        {title: `已付款${this.orderNumData.waitDeliveryNum ? '(' + this.orderNumData.waitDeliveryNum + ')' : ''}`, value: 'PAID'},
-        {title: `待发货${this.orderNumData.waitShipNum ? '(' + this.orderNumData.waitShipNum + ')' : ''}`, value: 'UNDELIVERED'},
-        {title: `部分发货${this.orderNumData.partsDeliveredNumNum ? '(' + this.orderNumData.partsDeliveredNumNum + ')' : ''}`, value: 'PARTS_DELIVERED'},
-        {title: `待收货${this.orderNumData.deliveredNum ? '(' + this.orderNumData.deliveredNum + ')' : ''}`, value: 'DELIVERED'},
-        {title: `待核验${this.orderNumData.waitCheckNum ? '(' + this.orderNumData.waitCheckNum + ')' : ''}`, value: 'TAKE'},
-        {title: `待自提${this.orderNumData.waitSelfPickNum ? '(' + this.orderNumData.waitSelfPickNum + ')' : ''}`, value: 'STAY_PICKED_UP'},
-        {title: `已完成${this.orderNumData.finishNum ? '(' + this.orderNumData.finishNum + ')' : ''}`, value: 'COMPLETED'},
-        {title: `已关闭${this.orderNumData.closeNum ? '(' + this.orderNumData.closeNum + ')' : ''}`, value: 'CANCELLED'},
+        { title: "全部", value: "ALL" },
+        {
+          title: `未付款${this.orderNumData.waitPayNum ? "(" + this.orderNumData.waitPayNum + ")" : ""}`,
+          value: "UNPAID",
+        },
+        {
+          title: `已付款${this.orderNumData.waitDeliveryNum ? "(" + this.orderNumData.waitDeliveryNum + ")" : ""}`,
+          value: "PAID",
+        },
+        {
+          title: `待发货${this.orderNumData.waitShipNum ? "(" + this.orderNumData.waitShipNum + ")" : ""}`,
+          value: "UNDELIVERED",
+        },
+        {
+          title: `部分发货${this.orderNumData.partsDeliveredNumNum ? "(" + this.orderNumData.partsDeliveredNumNum + ")" : ""}`,
+          value: "PARTS_DELIVERED",
+        },
+        {
+          title: `待收货${this.orderNumData.deliveredNum ? "(" + this.orderNumData.deliveredNum + ")" : ""}`,
+          value: "DELIVERED",
+        },
+        {
+          title: `待核验${this.orderNumData.waitCheckNum ? "(" + this.orderNumData.waitCheckNum + ")" : ""}`,
+          value: "TAKE",
+        },
+        {
+          title: `待自提${this.orderNumData.waitSelfPickNum ? "(" + this.orderNumData.waitSelfPickNum + ")" : ""}`,
+          value: "STAY_PICKED_UP",
+        },
+        {
+          title: `已完成${this.orderNumData.finishNum ? "(" + this.orderNumData.finishNum + ")" : ""}`,
+          value: "COMPLETED",
+        },
+        {
+          title: `已关闭${this.orderNumData.closeNum ? "(" + this.orderNumData.closeNum + ")" : ""}`,
+          value: "CANCELLED",
+        },
       ];
-    }
+    },
   },
   methods: {
-    // 初始化数据
+    onStatusTabClick(tab) {
+      this.orderStatusClick(tab.paneName);
+    },
+    clientTypeText(v) {
+      const map = { H5: "移动端", PC: "PC端", WECHAT_MP: "小程序端", APP: "移动应用端" };
+      return map[v] || v || "-";
+    },
+    orderPromotionText(v) {
+      const map = {
+        NORMAL: "普通订单",
+        PINTUAN: "拼团订单",
+        GIFT: "赠品订单",
+        POINTS: "积分订单",
+        KANJIA: "砍价订单",
+      };
+      return map[v] || v || "-";
+    },
+    orderPromotionTagType(v) {
+      const map = {
+        NORMAL: "primary",
+        PINTUAN: "danger",
+        GIFT: "success",
+        POINTS: "info",
+        KANJIA: "warning",
+      };
+      return map[v] || "info";
+    },
+    paymentMethodText(v) {
+      const map = {
+        NOT_ACTUALLY_PAID: "-",
+        WECHAT: "微信支付",
+        ALIPAY: "支付宝",
+        WALLET: "余额支付",
+        BANK_TRANSFER: "线下转账",
+      };
+      return map[v] || v || "-";
+    },
+    orderStatusText(v) {
+      const map = {
+        UNPAID: "未付款",
+        PAID: "已付款",
+        UNDELIVERED: "待发货",
+        STAY_PICKED_UP: "待自提",
+        PARTS_DELIVERED: "部分发货",
+        DELIVERED: "已发货",
+        COMPLETED: "已完成",
+        TAKE: "待核验",
+        CANCELLED: "已关闭",
+      };
+      return map[v] || v || "-";
+    },
+    orderStatusTagType(v) {
+      const map = {
+        UNPAID: "danger",
+        PAID: "primary",
+        UNDELIVERED: "info",
+        STAY_PICKED_UP: "info",
+        PARTS_DELIVERED: "warning",
+        DELIVERED: "warning",
+        COMPLETED: "success",
+        TAKE: "warning",
+        CANCELLED: "danger",
+      };
+      return map[v] || "info";
+    },
     init() {
       this.getDataList();
-      this.getOrderNumData(); // 新增：获取订单数量统计
+      this.getOrderNumData();
     },
-    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
-    // 分页 改变页数
     changePageSize(v) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
-      this.getOrderNumData(); // 新增：搜索时也更新数量统计
+      this.getOrderNumData();
     },
-    // 起止时间从新赋值
     selectDateRange(v) {
-      if (v) {
+      if (v && v.length === 2) {
         this.searchForm.startDate = v[0];
         this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
       }
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
-      API_Order.getOrderList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-      this.total = this.data.length;
-      this.loading = false;
+      API_Order.getOrderList(this.searchForm)
+        .then((res) => {
+          this.loading = false;
+          if (res.success) {
+            this.data = res.result.records;
+            this.total = res.result.total;
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
-    // 跳转详情页面
     detail(v) {
-      let sn = v.sn;
-      this.$options.filters.customRouterPush({
+      this.$filters.customRouterPush({
         name: "order-detail",
-        query: { sn: sn },
-      })
-
+        query: { sn: v.sn },
+      });
     },
-    // 导出订单
     async exportOrder() {
-      if(this.searchForm.startDate==""||this.searchForm.endDate==""){
+      if (!this.searchForm.startDate || !this.searchForm.endDate) {
         this.$Message.error("必须选择时间范围，搜索后进行导出！");
-      }else{
-        API_Order.exportOrder(this.searchForm)
-          .then((res) => {
-            const blob = new Blob([res], {
-              type: "application/vnd.ms-excel;charset=utf-8",
-            });
-            //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
-            //IE10以上支持blob但是依然不支持download
-            if ("download" in document.createElement("a")) {
-              //支持a标签download的浏览器
-              const link = document.createElement("a"); //创建a标签
-              link.download = "订单列表.xlsx"; //a标签添加属性
-              link.style.display = "none";
-              link.href = URL.createObjectURL(blob);
-              document.body.appendChild(link);
-              link.click(); //执行下载
-              URL.revokeObjectURL(link.href); //释放url
-              document.body.removeChild(link); //释放标签
-            } else {
-              navigator.msSaveBlob(blob, fileName);
-            }
-          })
-          .catch((err) => {
-            console.log(err);
+        return;
+      }
+      API_Order.exportOrder(this.searchForm)
+        .then((res) => {
+          const blob = new Blob([res], {
+            type: "application/vnd.ms-excel;charset=utf-8",
           });
-      }
-
+          if ("download" in document.createElement("a")) {
+            const link = document.createElement("a");
+            link.download = "订单列表.xlsx";
+            link.style.display = "none";
+            link.href = URL.createObjectURL(blob);
+            document.body.appendChild(link);
+            link.click();
+            URL.revokeObjectURL(link.href);
+            document.body.removeChild(link);
+          } else {
+            navigator.msSaveBlob(blob, "订单列表.xlsx");
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     },
-    // 订单筛选
     orderStatusClick(name) {
-      if (name === 0) {
-        // 点击"全部"时，设置为空字符串，在getDataList中会被过滤掉
-        this.searchForm.orderStatus = '';
+      if (name === "ALL" || name === "" || name === undefined) {
+        this.searchForm.orderStatus = "";
+        this.currentStatus = "ALL";
       } else {
-        // 其他状态正常赋值
         this.searchForm.orderStatus = name;
+        this.currentStatus = name;
       }
-      this.currentStatus = name;
-     
       this.getDataList();
     },
     getOrderNumData() {
-      // 创建一个不包含orderStatus字段的搜索参数
       const { orderStatus, ...searchParams } = this.searchForm;
-      API_Order.getOrderNum(searchParams).then((res) => {
-        if (res.success) {
-          this.orderNumData = res.result;
-        }
-      }).catch((err) => {
-        console.error('获取订单数量统计失败:', err);
-      });
+      API_Order.getOrderNum(searchParams)
+        .then((res) => {
+          if (res.success) {
+            this.orderNumData = res.result;
+          }
+        })
+        .catch((err) => {
+          console.error("获取订单数量统计失败:", err);
+        });
     },
   },
   mounted() {
@@ -533,28 +397,19 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .export {
   margin: 10px 20px 10px 0;
 }
-.export-excel-wrapper {
-  display: inline;
-}
-
-// Tab组件样式
 .order-tab {
-  ::v-deep .ivu-tabs-tab {
+  :deep(.el-tabs__item) {
     font-size: 14px;
   }
 }
-.ops a {
-  color: #2d8cf0;
+.link-text {
+  color: #409eff;
   cursor: pointer;
   text-decoration: none;
 }
-.ops span {
-  display: inline-block;
-  margin: 0 8px;
-  color: #dcdee2;
-}
 </style>
diff --git a/manager/src/views/page-decoration/floorList.vue b/manager/src/views/page-decoration/floorList.vue
index e1d737ae..63f3786c 100644
--- a/manager/src/views/page-decoration/floorList.vue
+++ b/manager/src/views/page-decoration/floorList.vue
@@ -1,95 +1,84 @@
 <template>
-  <div class="wrapper">
-    <Card class="category">
-      <div
-        :class="{ active: i == selectedIndex }"
-        class="category-item"
-        v-for="(typeItem, i) in pageTypes"
-        :key="typeItem.type"
-      >
-        <div @click="clickType(typeItem.type, i)">{{ typeItem.title }}</div>
+  <div class="search">
+    <el-card shadow="never">
+      <el-tabs v-model="searchForm.pageType" class="page-type-tabs" @tab-change="handleTabChange">
+        <el-tab-pane
+          v-for="typeItem in pageTypes"
+          :key="typeItem.type"
+          :name="typeItem.type"
+          :label="typeItem.title"
+        />
+      </el-tabs>
+      <div class="operation mb_10">
+        <el-button type="primary" @click="createTemp">添加页面</el-button>
       </div>
-    </Card>
-    <Card class="content">
-      <Button type="primary" @click="createTemp">添加页面</Button>
-      <div class="list">
-        <Spin size="large" fix v-if="loading"></Spin>
-        <div class="item item-title">
-          <div>页面名称</div>
-          <div class="item-config">
-            <div>
-              <div v-if="searchForm.pageType !== 'SPECIAL'">状态</div>
-            </div>
-            <div>操作</div>
-          </div>
-        </div>
-
-        <div class="item" v-for="(item, index) in list" :key="index">
-          <div>{{ item.name || "暂无模板昵称" }}</div>
-          <div class="item-config">
-            <div>
-            <i-switch
-              v-if="searchForm.pageType !== 'SPECIAL'"
-              v-model="item.pageShow"
-              @on-change="releaseTemplate(item.id)"
-            >
-              <span slot="open">开</span>
-              <span slot="close">关</span>
-            </i-switch>
-            </div>
-            <div class="action">
-                <Button
-                  type="info"
-                  placement="right"
-                  @click="Template(item)"
-                  size="small"
-                  >编辑</Button
-                >
-                <Button
-                  type="success"
-                  placement="right"
-                  @click="decorate(item)"
-                  size="small"
-                  >装修</Button
-                >
-              <Poptip confirm title="删除此模板？" @on-ok="delTemplate(item.id)">
-                <Button type="error" size="small">删除</Button>
-              </Poptip>
-            </div>
-          </div>
-        </div>
-        <div class="no-more" v-if="list.length == 0">暂无更多模板</div>
+      <el-table v-loading="loading" :data="list" style="width: 100%">
+        <el-table-column prop="name" label="页面名称" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span v-if="row">{{ row.name || "暂无模板昵称" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="searchForm.pageType !== 'SPECIAL'"
+          label="状态"
+          width="120"
+          align="center"
+        >
+          <template #default="{ row }">
+            <el-switch
+              v-if="row"
+              v-model="row.pageShow"
+              inline-prompt
+              active-text="开"
+              inactive-text="关"
+              @change="releaseTemplate(row.id)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="Template(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="decorate(row)">装修</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="confirmDel(row.id)">删除</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :total="total"
+          :page-sizes="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          background
+          @current-change="changePageNum"
+          @size-change="changePageSize"
+        />
       </div>
-      <Page
-        show-total
-        :total="total"
-        show-sizer
-        size="small"
-        :page-size-opts="[20, 50, 100]"
-        show-elevator
-        style="float: right; overflow: hidden"
-        @on-change="changePageNum"
-        @on-page-size-change="changePageSize"
-        :page-size="searchForm.pageSize"
-      />
-    </Card>
-    <Modal
+    </el-card>
+    <el-dialog
       v-model="showModal"
       title="模板设置"
-      draggable
-      width="600"
-      :z-index="100"
-      :loading="loading"
-      :mask-closable="false"
-      @on-ok="newTemplate"
-      @on-cancel="showModal = false"
+      width="600px"
+      :close-on-click-modal="false"
+      append-to-body
+      destroy-on-close
     >
-      <Form ref="form" :model="formData" :label-width="80">
-        <FormItem label="模板名称" prop="name">
-          <Input v-model="formData.name" placeholder="请输入模板名称" />
-        </FormItem>
-      </Form>
-    </Modal>
+      <el-form ref="form" :model="formData" label-width="80px">
+        <el-form-item label="模板名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入模板名称" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showModal = false">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="newTemplate">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -99,13 +88,11 @@ export default {
   name: "floorList",
   data() {
     return {
-      showModal: false, // 添加modal的显示
-      selectedIndex: 0, // 首页还是专题选择的index
+      showModal: false,
       total: 0,
       formData: {
-        // 新建模态框的数据
-        status: false, // 模板是否开启
-        name: "", // 模板名称
+        status: false,
+        name: "",
       },
       searchForm: {
         pageNumber: 1,
@@ -115,34 +102,12 @@ export default {
         pageType: "INDEX",
         pageClientType: "PC",
       },
-      columns: [
-        // 列表展示的column
-        {
-          title: "页面名称",
-          key: "name",
-        },
-        {
-          title: "状态",
-        },
-        {
-          title: "操作",
-          key: "action",
-        },
-      ],
-
-      loading: false, // 加载状态
+      loading: false,
       pageTypes: [
-        // 那种类别的模板
-        {
-          type: "INDEX",
-          title: "首页",
-        },
-        {
-          type: "SPECIAL",
-          title: "专题",
-        },
+        { type: "INDEX", title: "首页" },
+        { type: "SPECIAL", title: "专题" },
       ],
-      list: [], // 模板列表
+      list: [],
     };
   },
   mounted() {
@@ -150,13 +115,11 @@ export default {
   },
   methods: {
     newTemplate() {
-      // 添加，编辑模板
       this.$refs.form.validate((valid) => {
         if (valid) {
           const data = this.formData;
           data.status ? (data.pageShow = "OPEN") : (data.pageShow = "CLOSE");
           delete data.status;
-          // (data.pageType = "INDEX"), (data.pageClientType = "PC");
           (data.pageType = this.searchForm.pageType),
             (data.pageClientType = "PC");
           if (data.id) {
@@ -178,29 +141,26 @@ export default {
       });
     },
 
-    clickType(type, index) {
+    handleTabChange(type) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageType = type;
-      this.selectedIndex = index;
       this.getTemplateList();
     },
 
     createTemp() {
-      // 新建表单
-      this.$refs.form.resetFields();
+      this.$refs.form?.resetFields();
+      this.formData = { status: false, name: "" };
       this.showModal = true;
     },
 
     Template(item) {
-      // 编辑表单
       item.status = item.pageShow;
-      this.formData = item;
+      this.formData = { ...item };
       this.showModal = true;
     },
 
     decorate(val) {
-      // 装修
-      const data = { id: val.id, pageShow: val.pageShow,pageType:this.searchForm.pageType }
+      const data = { id: val.id, pageShow: val.pageShow, pageType: this.searchForm.pageType };
 
       this.$router.push({
         name: "renovation",
@@ -208,28 +168,20 @@ export default {
       });
     },
 
-    // 分页 修改页码
     changePageNum(val) {
       this.searchForm.pageNumber = val;
       this.getTemplateList();
     },
-    // 分页 修改页数
     changePageSize(val) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = val;
       this.getTemplateList();
     },
     getTemplateList() {
-      //模板列表
-      // let params = {
-      //   pageNumber: 1,
-      //   pageSize: 999,
-      //   pageType: "INDEX",
-      //   pageClientType: "PC",
-      // };
+      this.loading = true;
       API_floor.getHomeList(this.searchForm).then((res) => {
+        this.loading = false;
         if (res.success) {
-          // this.total
           this.total = res.result.total;
           this.list = res.result.records;
           this.list.forEach((e) => {
@@ -244,9 +196,6 @@ export default {
     },
 
     releaseTemplate(id) {
-      console.log(id)
-      // id.pageType = 'SPECIAL'
-      //发布模板
       API_floor.releasePageHome(id).then((res) => {
         if (res.success) {
           this.$Message.success("发布模板成功");
@@ -254,7 +203,13 @@ export default {
         }
       });
     },
-    // 删除模板
+    confirmDel(id) {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "删除此模板？",
+        onOk: () => this.delTemplate(id),
+      });
+    },
     delTemplate(id) {
       API_floor.removePageHome(id).then((res) => {
         if (res.success) {
@@ -268,68 +223,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.category-item {
-  cursor: pointer;
-  padding: 4px;
-}
-.active {
-  background: #ededed;
-}
-.item-title {
-  background: #d7e7f5 !important;
-  height: 54px;
-}
-.no-more {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.wrapper {
-  background: #fff;
-  padding: 20px;
-  display: flex;
-}
-.category {
-  flex: 2;
-}
-.content {
-  flex: 8;
-}
-* {
-  margin: 5px;
-}
-.list {
-  min-height: 600px;
-  position: relative;
-}
-.item:nth-of-type(2) {
-  margin: 0 5px;
-}
-.item {
-  width: 100% !important;
-  padding: 0 4px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  > .item-config {
-
-    width: 250px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    div:nth-child(2) {
-      margin-right: 80px;
-    }
-  }
-}
-.item:nth-of-type(2n + 1) {
-  background: #f5f7fa;
-}
-.action{
-  display: flex;
-  align-items: center;
-  width: 100px;
+.page-type-tabs {
+  margin-bottom: 16px;
 }
 </style>
diff --git a/manager/src/views/page-decoration/modelForm.vue b/manager/src/views/page-decoration/modelForm.vue
index 0a2ea394..843c658f 100644
--- a/manager/src/views/page-decoration/modelForm.vue
+++ b/manager/src/views/page-decoration/modelForm.vue
@@ -1,16 +1,13 @@
 <template>
   <div class="model-form">
     <div class="model-content">
-      <!-- 头部广告，登录信息，不需要拖拽 -->
       <div
         class="top-fixed-advert"
         :style="{ backgroundColor: topAdvert.bgColor }"
       >
         <img :src="topAdvert.img" width="1200" height="80" alt="" />
         <div class="setup-box">
-          <Button size="small" @click.stop="handleModel('topAdvert')"
-            >编辑</Button
-          >
+          <el-button size="small" @click.stop="handleModel('topAdvert')">编辑</el-button>
         </div>
       </div>
       <div class="header-con">
@@ -20,16 +17,21 @@
           <li>请登录</li>
           <li>我的订单</li>
           <li>我的足迹</li>
-          <li><Icon size="18" type="ios-cart-outline"></Icon>购物车</li>
+          <li>
+            <el-icon :size="18"><ShoppingCart /></el-icon>
+            购物车
+          </li>
           <li>店铺入驻</li>
         </ul>
       </div>
       <div class="search-con">
         <img :src="require('@/assets/logo.png')" class="logo" alt="" />
         <div class="search">
-          <i-input size="large" placeholder="输入你想查找的商品">
-            <Button slot="append">搜索</Button>
-          </i-input>
+          <el-input size="large" placeholder="输入你想查找的商品">
+            <template #append>
+              <el-button>搜索</el-button>
+            </template>
+          </el-input>
         </div>
       </div>
       <div class="nav-con" v-if="$route.query.pageType !== 'SPECIAL'">
@@ -40,12 +42,9 @@
           </li>
         </ul>
         <div class="setup-box">
-          <Button size="small" @click.stop="handleModel('quickNav')"
-            >编辑</Button
-          >
+          <el-button size="small" @click.stop="handleModel('quickNav')">编辑</el-button>
         </div>
       </div>
-      <!-- 装修主体 -->
       <div>
         <draggable
           class="model-form-list"
@@ -54,120 +53,94 @@
           @end="handleMoveEnd"
           @add="handleModelAdd"
         >
-          <template v-for="(element, index) in data.list">
+          <template v-for="(element, index) in data.list" :key="element.key || index">
             <model-form-item
               v-if="element && element.key"
-              :key="element.key"
               :element="element"
               :index="index"
               :data="data"
-            ></model-form-item>
+            />
           </template>
         </draggable>
       </div>
     </div>
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="顶部广告"
-      draggable
-      width="800"
-      :z-index="100"
-      :mask-closable="false"
+      width="800px"
+      :close-on-click-modal="false"
+      append-to-body
+      destroy-on-close
     >
-      <!-- 顶部广告 -->
       <div class="modal-top-advert">
         <div>
-          <img
-            class="show-image"
-            width="600"
-            height="40"
-            :src="topAdvert.img"
-            alt
-          />
-        </div>
-        <div class="tips">
-          建议尺寸：<span>{{ topAdvert.size }}</span>
+          <img class="show-image" width="600" height="40" :src="topAdvert.img" alt />
         </div>
+        <div class="tips">建议尺寸：<span>{{ topAdvert.size }}</span></div>
         <div>
-          图片链接：<Input
+          图片链接：<el-input
             class="outsideUrl"
             v-model="topAdvert.url"
             :disabled="!!topAdvert.type && topAdvert.type !== 'link'"
             placeholder="https://"
-          /><Button size="small" type="primary" @click="handleSelectLink"
-            >选择链接</Button
-          >
+          />
+          <el-button size="small" type="primary" @click="handleSelectLink">选择链接</el-button>
         </div>
         <div>
-          选择图片：<Button size="small" type="primary" @click="handleSelectImg"
-            >选择图片</Button
-          >&nbsp;
+          选择图片：<el-button size="small" type="primary" @click="handleSelectImg">选择图片</el-button>
         </div>
-        <div>选择背景色：<ColorPicker v-model="topAdvert.bgColor" /></div>
+        <div>选择背景色：<el-color-picker v-model="topAdvert.bgColor" /></div>
       </div>
-    </Modal>
-    <Modal
+    </el-dialog>
+    <el-dialog
       v-model="showModalNav"
       title="快捷导航"
-      draggable
-      width="800"
-      :z-index="100"
-      :mask-closable="false"
+      width="800px"
+      :close-on-click-modal="false"
+      append-to-body
+      destroy-on-close
     >
-      <!-- 分类tab栏 -->
       <div class="modal-tab-bar">
-        <Button type="primary" size="small" @click="handleAddNav"
-          >添加分类</Button
-        >
+        <el-button type="primary" size="small" @click="handleAddNav">添加分类</el-button>
         <table cellspacing="0">
           <thead>
             <tr>
               <th width="250">分类名称</th>
               <th width="250">链接地址</th>
-              <!-- <th width="150">排序</th> -->
               <th width="250">操作</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="(item, index) in navList.list" :key="index">
-              <td><Input v-model="item.name" /></td>
+              <td><el-input v-model="item.name" /></td>
               <td>
-                <Input
+                <el-input
                   v-model="item.url"
                   :disabled="!item.title || item.title !== '外部链接'"
                 />
               </td>
-              <!-- <td><Input v-model="item.sort"/></td> -->
               <td>
-                <Button
-                  type="primary"
-                  size="small"
-                  @click="handleSelectLink(item, index)"
-                  >选择链接</Button
-                >&nbsp;
-                <Button type="error" size="small" @click="handleDelNav(index)"
-                  >删除</Button
-                >
+                <el-button type="primary" size="small" @click="handleSelectLink(item, index)">选择链接</el-button>
+                <el-button type="danger" size="small" @click="handleDelNav(index)">删除</el-button>
               </td>
             </tr>
           </tbody>
         </table>
       </div>
-    </Modal>
-    <!-- 选择商品。链接 -->
+    </el-dialog>
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
-    <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
         @callback="callbackSelected"
-        :isComponent="true"
+        :is-component="true"
         :initialize="picModelFlag"
         ref="ossManage"
       />
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 <script>
+import { ShoppingCart } from "@element-plus/icons-vue";
 import Draggable from "vuedraggable";
 import ModelFormItem from "./modelFormItem.vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
@@ -177,24 +150,17 @@ export default {
     Draggable,
     ModelFormItem,
     ossManage,
+    ShoppingCart,
   },
   props: ["data"],
   data() {
     return {
-      picModelFlag: false, // 选择图片模态框
-      showModal: false, // 顶部广告模态框
-      showModalNav: false, // 分类nav模态框
-      selectedNav: null, //当前已选nav
-      // 模拟搜索框下方数据
-      promotionTags: [
-        "买2免1",
-        "领200神券",
-        "199减100",
-        "母婴5折抢",
-        "充100送20",
-      ], // 热词数据
+      picModelFlag: false,
+      showModal: false,
+      showModalNav: false,
+      selectedNav: null,
+      promotionTags: ["买2免1", "领200神券", "199减100", "母婴5折抢", "充100送20"],
       topAdvert: {
-        // 头部广告图数据
         type: "topAdvert",
         img: "",
         url: "",
@@ -203,7 +169,6 @@ export default {
       },
       currentIndex: 0,
       navList: {
-        // 分类nav数据
         type: "navBar",
         list: [
           { name: "秒杀", url: "", title: "" },
@@ -226,38 +191,32 @@ export default {
   },
   methods: {
     handleSelectLink(item, index) {
-      // 调起选择链接弹窗
       if (item) this.selectedNav = item;
       this.$refs.liliDialog.open("link");
       this.currentIndex = index;
     },
-    // 已选链接
     selectedLink(val) {
-
       if (this.showModalNav) {
-        this.selectedNav.url = this.$options.filters.formatLinkType(val);
+        this.selectedNav.url = this.$filters.formatLinkType(val);
         this.selectedNav.type = val.___type === "other" && val.url === "" ? "link" : "other";
       } else {
-        this.topAdvert.url = this.$options.filters.formatLinkType(val);
+        this.topAdvert.url = this.$filters.formatLinkType(val);
         this.topAdvert.type = val.___type === "other" && val.url === "" ? "link" : "other";
       }
       this.navList.list[this.currentIndex].title = val.title;
     },
     handleDelNav(index) {
-      // 删除导航
       this.navList.list.splice(index, 1);
     },
     handleAddNav() {
-      // 添加导航
-      this.navList.list.push({ name: "", url: "", title: "" });this.$nextTick(() => {
+      this.navList.list.push({ name: "", url: "", title: "" });
+      this.$nextTick(() => {
         this.selectedNav.title = val.title;
       });
     },
-    // 拖动结束回调
     handleMoveEnd({ newIndex, oldIndex }) {
       console.log("index", newIndex, oldIndex);
     },
-    // 修改顶部广告
     handleModel(type) {
       if (type == "topAdvert") {
         this.showModal = true;
@@ -265,35 +224,27 @@ export default {
         this.showModalNav = true;
       }
     },
-    // 选择图片
     handleSelectImg() {
       this.$refs.ossManage.selectImage = true;
       this.picModelFlag = true;
     },
     callbackSelected(item) {
-      // 选择图片回调
       this.picModelFlag = false;
       this.topAdvert.img = item.url;
     },
     handleModelAdd(evt) {
-      // 拖拽，添加模块
       const newIndex = evt.newIndex;
 
-      // 为拖拽到容器的元素添加唯一 key
-      this.data.list[newIndex] = JSON.parse(
-        JSON.stringify(this.data.list[newIndex])
-      );
-      const key =
-        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-      this.$set(this.data.list, newIndex, {
+      this.data.list[newIndex] = JSON.parse(JSON.stringify(this.data.list[newIndex]));
+      const key = Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+      this.data.list[newIndex] = {
         ...this.data.list[newIndex],
         options: {
           ...this.data.list[newIndex].options,
         },
         key,
-        // 绑定键值
         model: this.data.list[newIndex].type + "_" + key,
-      });
+      };
     },
   },
 };
@@ -312,7 +263,6 @@ export default {
 .model-form-list {
   min-height: 500px;
 }
-/**  顶部广告，头部，搜索框 start */
 .top-fixed-advert {
   display: flex;
   width: 1500px;
@@ -354,7 +304,6 @@ export default {
     }
   }
 }
-/** 搜索框 */
 .search-con {
   padding-top: 15px;
   margin: 0px auto;
@@ -371,29 +320,27 @@ export default {
   .search {
     width: 460px;
     margin: 0 auto;
-    ::v-deep .ivu-input.ivu-input-large {
+    :deep(.el-input--large .el-input__wrapper) {
       border: 2px solid $theme_color;
       font-size: 12px;
       height: 34px;
-      &:focus {
-        box-shadow: none;
-      }
+      box-shadow: none;
     }
-    ::v-deep .ivu-input-group-append {
+    :deep(.el-input-group__append) {
       border: 1px solid $theme_color;
       border-left: none;
       height: 30px;
       background-color: $theme_color;
       color: #ffffff;
-      button {
+      .el-button {
         font-size: 14px;
         font-weight: 600;
         line-height: 1;
+        color: #fff;
       }
     }
   }
 }
-/** 商品分类 */
 .nav-con {
   width: 1200px;
   height: 40px;
@@ -429,7 +376,6 @@ export default {
     }
   }
 }
-/**  顶部广告，头部，搜索框 end */
 
 .top-fixed-advert,
 .nav-con {
@@ -440,14 +386,8 @@ export default {
     }
   }
 }
-/** 装修模态框 内部样式start */
 .modal-top-advert {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  > * {
-    margin-bottom: 10px;
-  }
+  align-items: start;
+  padding: 0 30px;
 }
 </style>
diff --git a/manager/src/views/page-decoration/modelFormItem.vue b/manager/src/views/page-decoration/modelFormItem.vue
index a1a3a55e..56599790 100644
--- a/manager/src/views/page-decoration/modelFormItem.vue
+++ b/manager/src/views/page-decoration/modelFormItem.vue
@@ -24,10 +24,10 @@
         />
         <div class="setup-box">
           <div>
-            <Button
+            <el-button
               size="small"
               @click.stop="handleSelectModel(element.options.list[0])"
-              >编辑</Button
+              >编辑</el-button
             >
           </div>
         </div>
@@ -43,8 +43,8 @@
             <img :src="item.img" width="230" height="190" alt="" />
             <div class="setup-box">
               <div>
-                <Button size="small" @click.stop="handleSelectModel(item)"
-                  >编辑</Button
+                <el-button size="small" @click.stop="handleSelectModel(item)"
+                  >编辑</el-button
                 >
               </div>
             </div>
@@ -78,8 +78,8 @@
             <img :src="item.img" width="190" height="210" alt="" />
             <div class="setup-box">
               <div>
-                <Button size="small" @click.stop="handleSelectModel(item)"
-                  >编辑</Button
+                <el-button size="small" @click.stop="handleSelectModel(item)"
+                  >编辑</el-button
                 >
               </div>
             </div>
@@ -94,8 +94,8 @@
             <img :src="item.img" width="240" height="105" alt="" />
             <div class="setup-box">
               <div>
-                <Button size="small" @click.stop="handleSelectModel(item)"
-                  >编辑</Button
+                <el-button size="small" @click.stop="handleSelectModel(item)"
+                  >编辑</el-button
                 >
               </div>
             </div>
@@ -150,10 +150,10 @@
         </div>
         <div class="setup-box">
           <div>
-            <Button
+            <el-button
               size="small"
               @click.stop="handleSelectModel(element.options)"
-              >编辑</Button
+              >编辑</el-button
             >
           </div>
         </div>
@@ -163,15 +163,15 @@
       <not-enough :data="element"></not-enough>
     </template>
     <div class="del-btn">
-      <Button size="small" type="error" @click="handleModelDelete">删除</Button>
+      <el-button size="small" type="danger" @click="handleModelDelete">删除</el-button>
     </div>
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="装修"
-      draggable
-      width="800"
-      :z-index="100"
-      :mask-closable="false"
+      width="800px"
+      :close-on-click-modal="false"
+      append-to-body
+      destroy-on-close
     >
       <div class="modal-top-advert">
         <div>
@@ -222,34 +222,34 @@
           建议尺寸：<span>{{ selected.size }}</span>
         </div>
         <div>
-          图片链接：<Input
+          图片链接：<el-input
             class="outsideUrl"
             v-model="selected.url"
             :disabled="!!selected.type && selected.type !== 'link'"
             placeholder="https://"
           />
-          <Button size="small" type="primary" @click="handleSelectLink"
-            >选择链接</Button
+          <el-button size="small" type="primary" @click="handleSelectLink"
+            >选择链接</el-button
           >
         </div>
         <div>
-          选择图片：<Button size="small" type="primary" @click="handleSelectImg"
-            >选择图片</Button
-          >&nbsp;
+          选择图片：<el-button size="small" type="primary" @click="handleSelectImg"
+            >选择图片</el-button
+          >
         </div>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
         @callback="callbackSelected"
-        :isComponent="true"
+        :is-component="true"
         :initialize="picModelFlag"
         ref="ossManage"
       />
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 
@@ -322,7 +322,7 @@ export default {
     },
     // 确定选择链接
     selectedLink(val) {
-      this.selected.url = this.$options.filters.formatLinkType(val);
+      this.selected.url = this.$filters.formatLinkType(val);
       this.selected.type =
         val.___type === "other" && val.url === "" ? "link" : "other";
     },
@@ -479,7 +479,7 @@ export default {
         height: inherit;
         font-size: 12px;
         font-weight: bold;
-        .ivu-icon {
+        .el-icon {
           position: absolute;
           right: 10px;
           top: 10px;
@@ -503,14 +503,14 @@ export default {
       align-items: center;
       flex-direction: column;
       justify-content: center;
-      .ivu-icon {
+      .el-icon {
         font-size: 18px;
         transition: all 0.3s ease-out;
       }
       &:hover {
         background-color: $theme_color;
         color: #fff;
-        .ivu-icon {
+        .el-icon {
           transform: rotateZ(360deg);
         }
       }
diff --git a/manager/src/views/page-decoration/modelList/carousel.vue b/manager/src/views/page-decoration/modelList/carousel.vue
index 64559175..65a9522b 100644
--- a/manager/src/views/page-decoration/modelList/carousel.vue
+++ b/manager/src/views/page-decoration/modelList/carousel.vue
@@ -5,31 +5,31 @@
       <div class="nav-side">分类占位区</div>
       <div class="nav-content setup-content">
         <!-- 轮播图 -->
-        <Carousel autoplay>
-          <CarouselItem v-for="(item, index) in data.options.list" :key="index">
+        <el-carousel autoplay height="340px">
+          <el-carousel-item v-for="(item, index) in data.options.list" :key="index">
             <div style="overflow: hidden">
               <img :src="item.img" width="790" height="340" />
             </div>
-          </CarouselItem>
-        </Carousel>
+          </el-carousel-item>
+        </el-carousel>
         <div class="setup-box">
           <div>
-            <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+            <el-button size="small" @click.stop="handleSelectModel">编辑</el-button>
           </div>
         </div>
       </div>
       <div class="nav-right">
         <div class="person-msg">
           <img :src="userInfo.face" v-if="userInfo.face" alt />
-          <Avatar icon="ios-person" class="mb_10" v-else size="80" />
+          <el-avatar class="mb_10" v-else :size="80" />
           <div>
-            Hi，{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}
+            Hi，{{ userInfo.nickName || "欢迎来到管理后台"  }}
           </div>
           <div v-if="userInfo.id">
-            <Button type="error" shape="circle">会员中心</Button>
+            <el-button type="danger" shape="circle">会员中心</el-button>
           </div>
           <div v-else>
-            <Button type="error" shape="circle">请登录</Button>
+            <el-button type="danger" shape="circle">请登录</el-button>
           </div>
         </div>
         <div class="shop-msg">
@@ -49,16 +49,16 @@
         </div>
       </div>
     </div>
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="快捷导航"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-tab-bar">
-        <Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
+        <el-button type="primary" size="small" @click="handleAdd">添加轮播</el-button>
         &nbsp;
         <span class="ml_10">图片尺寸:{{ data.size }}</span>
         <div style="color: #999" class="fz_12">点击缩略图替换图片</div>
@@ -84,47 +84,47 @@
                 />
               </td>
               <td>
-                <Input
+                <el-input
                   class="outsideUrl"
                   v-model="item.url"
                   :disabled="!!item.type && item.type !== 'link'"
                 />
               </td>
-              <!-- <td><Input v-model="item.sort"/></td> -->
+              <!-- <td><el-input v-model="item.sort"/></td> -->
               <td>
-                <Button
+                <el-button
                   type="primary"
                   size="small"
                   @click="handleSelectImg(item)"
-                  >选择图片</Button
+                  >选择图片</el-button
                 >&nbsp;
-                <Button type="info" size="small" @click="handleSelectLink(item)"
-                  >选择链接</Button
+                <el-button type="info" size="small" @click="handleSelectLink(item)"
+                  >选择链接</el-button
                 >&nbsp;
-                <Button
-                  type="error"
-                  ghost
+                <el-button
+                  type="danger"
+                  plain
                   size="small"
                   @click="handleDel(index)"
-                  >删除</Button
+                  >删除</el-button
                 >
               </td>
             </tr>
           </tbody>
         </table>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
         @callback="callbackSelected"
-        :isComponent="true"
+        :is-component="true"
         :initialize="picModelFlag"
         ref="ossManage"
       />
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 
@@ -177,7 +177,7 @@ export default {
     },
     selectedLink(val) {
       // 选择链接回调
-      this.selected.url = this.$options.filters.formatLinkType(val);
+      this.selected.url = this.$filters.formatLinkType(val);
       this.selected.type =
         val.___type === "other" && val.url === "" ? "link" : "other";
     },
@@ -251,7 +251,7 @@ export default {
       margin-top: 10px;
     }
 
-    .ivu-btn-default {
+    .el-btn-default {
       color: $theme_color;
       border-color: $theme_color;
     }
diff --git a/manager/src/views/page-decoration/modelList/carousel1.vue b/manager/src/views/page-decoration/modelList/carousel1.vue
index e03751a1..8fc54f0e 100644
--- a/manager/src/views/page-decoration/modelList/carousel1.vue
+++ b/manager/src/views/page-decoration/modelList/carousel1.vue
@@ -5,30 +5,30 @@
       <div class="nav-side">分类占位区</div>
       <div class="nav-content setup-content">
         <!-- 轮播图 -->
-        <Carousel autoplay @on-change="autoChange">
-          <CarouselItem v-for="(item, index) in data.options.list" :key="index">
+        <el-carousel autoplay @change="autoChange">
+          <el-carousel-item v-for="(item, index) in data.options.list" :key="index">
             <div style="overflow: hidden">
               <img :src="item.img" width="1200" height="470" />
             </div>
-          </CarouselItem>
-        </Carousel>
+          </el-carousel-item>
+        </el-carousel>
         <div class="setup-box">
           <div>
-            <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+            <el-button size="small" @click.stop="handleSelectModel">编辑</el-button>
           </div>
         </div>
       </div>
     </div>
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="快捷导航"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-tab-bar">
-        <Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
+        <el-button type="primary" size="small" @click="handleAdd">添加轮播</el-button>
         &nbsp;
         <span class="ml_10">图片尺寸:{{ data.size }}</span>
         <span style="color: red" class="fz_12 ml_10"
@@ -55,37 +55,37 @@
                 />
               </td>
               <td>
-                <Input
+                <el-input
                   class="outsideUrl"
                   v-model="item.url"
                   :disabled="!!item.type && item.type !== 'link'"
                 />
               </td>
               <td>
-                <Button type="info" size="small" @click="handleSelectLink(item)"
-                  >选择链接</Button
+                <el-button type="info" size="small" @click="handleSelectLink(item)"
+                  >选择链接</el-button
                 >&nbsp;
-                <ColorPicker size="small" v-model="item.bgColor" />
+                <el-color-picker size="small" v-model="item.bgColor" />
                 &nbsp;
-                <Button
-                  type="error"
-                  ghost
+                <el-button
+                  type="danger"
+                  plain
                   size="small"
                   @click="handleDel(index)"
-                  >删除</Button
+                  >删除</el-button
                 >
               </td>
             </tr>
           </tbody>
         </table>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-    </Modal>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+    </el-dialog>
   </div>
 </template>
 
@@ -138,7 +138,7 @@ export default {
     },
     selectedLink(val) {
       // 选择链接回调
-      this.selected.url = this.$options.filters.formatLinkType(val);
+      this.selected.url = this.$filters.formatLinkType(val);
       this.selected.type =
         val.___type === "other" && val.url === "" ? "link" : "other";
     },
diff --git a/manager/src/views/page-decoration/modelList/carousel2.vue b/manager/src/views/page-decoration/modelList/carousel2.vue
index bf6a2723..324e3f20 100644
--- a/manager/src/views/page-decoration/modelList/carousel2.vue
+++ b/manager/src/views/page-decoration/modelList/carousel2.vue
@@ -5,23 +5,23 @@
       <div class="nav-side">分类占位区</div>
       <div class="nav-content setup-content">
         <!-- 轮播图 -->
-        <Carousel autoplay>
-          <CarouselItem v-for="(item, index) in data.options.list" :key="index">
+        <el-carousel autoplay height="340px">
+          <el-carousel-item v-for="(item, index) in data.options.list" :key="index">
             <div style="overflow: hidden">
               <img :src="item.img" width="590" height="470" />
             </div>
-          </CarouselItem>
-        </Carousel>
+          </el-carousel-item>
+        </el-carousel>
         <div class="setup-box">
           <div>
-            <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+            <el-button size="small" @click.stop="handleSelectModel">编辑</el-button>
           </div>
         </div>
       </div>
       <div class="nav-content1 setup-content">
         <!-- 轮播图 -->
-        <Carousel autoplay :autoplay-speed="5000">
-          <CarouselItem
+        <el-carousel autoplay :autoplay-speed="5000">
+          <el-carousel-item
             v-for="(item, index) in data.options.listRight"
             :key="index"
           >
@@ -34,26 +34,26 @@
             <div>
               <img :src="item[2].img" width="190" height="150" />
             </div>
-          </CarouselItem>
-        </Carousel>
+          </el-carousel-item>
+        </el-carousel>
         <div class="setup-box">
           <div>
-            <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+            <el-button size="small" @click.stop="handleSelectModel">编辑</el-button>
           </div>
         </div>
       </div>
       <div class="nav-right">
         <div class="person-msg">
           <img :src="userInfo.face" v-if="userInfo.face" alt />
-          <Avatar icon="ios-person" class="mb_10" v-else size="80" />
+          <el-avatar class="mb_10" v-else :size="80" />
           <div>
-            Hi，{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}
+            Hi，{{ userInfo.nickName || "欢迎来到管理后台"  }}
           </div>
           <div v-if="userInfo.id">
-            <Button type="error" shape="circle">会员中心</Button>
+            <el-button type="danger" shape="circle">会员中心</el-button>
           </div>
           <div v-else>
-            <Button type="error" shape="circle">请登录</Button>
+            <el-button type="danger" shape="circle">请登录</el-button>
           </div>
         </div>
         <div class="shop-msg">
@@ -74,16 +74,16 @@
       </div>
     </div>
     <!-- 左侧轮播装修 -->
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="快捷导航"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-tab-bar">
-        <Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
+        <el-button type="primary" size="small" @click="handleAdd">添加轮播</el-button>
         &nbsp;
         <span class="ml_10">图片尺寸:{{ data.size }}</span>
         <span style="color: red" class="fz_12 ml_10">点击缩略图替换图片</span>
@@ -108,52 +108,52 @@
                 />
               </td>
               <td>
-                <Input
+                <el-input
                   class="outsideUrl"
                   v-model="item.url"
                   :disabled="!!item.type && item.type !== 'link'"
                 />
               </td>
               <td>
-                <Button type="info" size="small" @click="handleSelectLink(item)"
-                  >选择链接</Button
+                <el-button type="info" size="small" @click="handleSelectLink(item)"
+                  >选择链接</el-button
                 >&nbsp;
-                <Button
-                  type="error"
-                  ghost
+                <el-button
+                  type="danger"
+                  plain
                   size="small"
                   @click="handleDel(index)"
-                  >删除</Button
+                  >删除</el-button
                 >
               </td>
             </tr>
           </tbody>
         </table>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 右侧轮播装修 -->
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="右侧装修"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-tab-bar">
-        <Button type="primary" size="small" @click="handleAddGroup"
-          >添加组</Button
+        <el-button type="primary" size="small" @click="handleAddGroup"
+          >添加组</el-button
         >
         &nbsp;
         <span class="ml_10">图片尺寸:{{ data.size }}</span>
         <span style="color: red" class="fz_12 ml_10">点击缩略图替换图片</span>
-        <Tabs
+        <el-tabs
           type="card"
           closable
-          @on-tab-remove="handleTabRemove"
+          @tab-remove="handleTabRemove"
           class="mt_10"
         >
-          <TabPane
+          <el-tab-pane
             :label="'图片组' + (gIndex + 1)"
             v-for="(group, gIndex) in data.options.listRight"
             :key="gIndex"
@@ -179,33 +179,33 @@
                     />
                   </td>
                   <td>
-                    <Input
+                    <el-input
                       class="outsideUrl"
                       v-model="item.url"
                       :disabled="!!item.type && item.type !== 'link'"
                     />
                   </td>
                   <td>
-                    <Button
+                    <el-button
                       type="info"
                       size="small"
                       @click="handleSelectLink(item)"
-                      >选择链接</Button
+                      >选择链接</el-button
                     >
                   </td>
                 </tr>
               </tbody>
             </table>
-          </TabPane>
-        </Tabs>
+          </el-tab-pane>
+        </el-tabs>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-    </Modal>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+    </el-dialog>
   </div>
 </template>
 
@@ -270,7 +270,7 @@ export default {
     },
     selectedLink(val) {
       // 选择链接回调
-      this.selected.url = this.$options.filters.formatLinkType(val);
+      this.selected.url = this.$filters.formatLinkType(val);
       this.selected.type =
         val.___type === "other" && val.url === "" ? "link" : "other";
     },
@@ -350,7 +350,7 @@ export default {
       margin-top: 10px;
     }
 
-    .ivu-btn-default {
+    .el-btn-default {
       color: $theme_color;
       border-color: $theme_color;
     }
diff --git a/manager/src/views/page-decoration/modelList/firstPageAdvert.vue b/manager/src/views/page-decoration/modelList/firstPageAdvert.vue
index 2568df6b..cff6bbe8 100644
--- a/manager/src/views/page-decoration/modelList/firstPageAdvert.vue
+++ b/manager/src/views/page-decoration/modelList/firstPageAdvert.vue
@@ -17,20 +17,20 @@
       <img :src="item.img" width="170" height="170" alt="" />
       <div class="setup-box">
         <div>
-          <Button size="small" @click.stop="handleSelectModel(item)"
-            >编辑</Button
+          <el-button size="small" @click.stop="handleSelectModel(item)"
+            >编辑</el-button
           >
         </div>
       </div>
     </div>
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="装修"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-top-advert">
         <div>
           <img
@@ -41,29 +41,29 @@
             alt
           />
         </div>
-        <div><span>图片主标题：</span><Input v-model="selected.name" /></div>
-        <div><span>图片描述：</span><Input v-model="selected.describe" /></div>
+        <div><span>图片主标题：</span><el-input v-model="selected.name" /></div>
+        <div><span>图片描述：</span><el-input v-model="selected.describe" /></div>
         <div class="tips">
           建议尺寸：<span>{{ selected.size }}</span>
         </div>
         <div>
-          图片链接：<Input
+          图片链接：<el-input
             class="outsideUrl"
             v-model="selected.url"
             :disabled="!!selected.type && selected.type !== 'link'"
             placeholder="https://"
           />
-          <Button size="small" type="primary" @click="handleSelectLink"
-            >选择链接</Button
+          <el-button size="small" type="primary" @click="handleSelectLink"
+            >选择链接</el-button
           >
         </div>
         <div>
-          <span>渐变背景色：</span><Input v-model="selected.fromColor" />
-          <ColorPicker v-if="selected.fromColor" v-model="selected.fromColor" />
+          <span>渐变背景色：</span><el-input v-model="selected.fromColor" />
+          <el-color-picker v-if="selected.fromColor" v-model="selected.fromColor" />
         </div>
         <div>
-          <span>渐变背景色：</span><Input v-model="selected.toColor" />
-          <ColorPicker v-if="selected.toColor" v-model="selected.toColor" />
+          <span>渐变背景色：</span><el-input v-model="selected.toColor" />
+          <el-color-picker v-if="selected.toColor" v-model="selected.toColor" />
         </div>
         <div
           :style="{
@@ -72,23 +72,23 @@
           class="exhibition"
         ></div>
         <div>
-          选择图片：<Button size="small" type="primary" @click="handleSelectImg"
-            >选择图片</Button
+          选择图片：<el-button size="small" type="primary" @click="handleSelectImg"
+            >选择图片</el-button
           >&nbsp;
         </div>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
         @callback="callbackSelected"
-        :isComponent="true"
+        :is-component="true"
         :initialize="picModelFlag"
         ref="ossManage"
       />
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -121,7 +121,7 @@ export default {
     },
     // 选择链接回调
     selectedLink(val) {
-      this.selected.url = this.$options.filters.formatLinkType(val);
+      this.selected.url = this.$filters.formatLinkType(val);
       this.selected.type =
         val.___type === "other" && val.url === "" ? "link" : "other";
     },
diff --git a/manager/src/views/page-decoration/modelList/forYour.vue b/manager/src/views/page-decoration/modelList/forYour.vue
index 0c3af4b4..9a0fe59e 100644
--- a/manager/src/views/page-decoration/modelList/forYour.vue
+++ b/manager/src/views/page-decoration/modelList/forYour.vue
@@ -33,7 +33,7 @@
             <div class="hot-goods">
               <div class="hot-goods-title">{{ item.title }}</div>
               <div>
-                <div class="hot-price">￥{{ item.price | unitPrice }}</div>
+                <div class="hot-price">￥{{ $filters.unitPrice(item.price) }}</div>
               </div>
             </div>
           </div>
@@ -41,24 +41,24 @@
       </div>
       <div class="setup-box">
         <div>
-          <Button size="small" @click.stop="handleSelectModel()">编辑 </Button>
+          <el-button size="small" @click.stop="handleSelectModel()">编辑 </el-button>
         </div>
       </div>
     </div>
 
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="装修"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div>
         <div class="modal-tab-bar">
           <div>
             主标题:
-            <Input style="width: 200px" v-model="data.options.title"></Input>
+            <el-input style="width: 200px" v-model="data.options.title" />
           </div>
           <Divider>左侧商品部分</Divider>
           <div class="flex">
@@ -69,25 +69,25 @@
                 <div>推荐尺寸：{{ data.options.data.image.size }}</div>
                 <div class="link-src">
                   链接地址：
-                  <Input
+                  <el-input
                     style="width: 200px"
                     v-model="data.options.data.image.url"
                     disabled
                   />
                 </div>
-                <Button
+                <el-button
                   size="small"
                   type="primary"
                   @click="handleSelectImg('image')"
                   >选择图片
-                </Button>
-                <Button
+                </el-button>
+                <el-button
                   size="small"
                   class="ml_10"
                   type="primary"
                   @click="handleSelectLink('image')"
                   >选择链接
-                </Button>
+                </el-button>
               </div>
             </div>
           </div>
@@ -102,24 +102,24 @@
               <div class="flex">
                 <img :src="item.img" class="column-img" />
                 <div class="column-goods-list">
-                  <div><Input v-model="item.title"></Input></div>
-                  <div><Input v-model="item.desc"></Input></div>
-                  <div><Input disabled v-model="item.url"></Input></div>
+                  <div><el-input v-model="item.title" /></div>
+                  <div><el-input v-model="item.desc" /></div>
+                  <div><el-input disabled v-model="item.url" /></div>
                   <div>{{ item.size }}</div>
-                  <Button
+                  <el-button
                     size="small"
                     class="ml_10"
                     type="primary"
                     @click="handleSelectLink('list', index)"
                     >选择链接
-                  </Button>
-                  <Button
+                  </el-button>
+                  <el-button
                     size="small"
                     class="ml_10"
                     type="primary"
                     @click="handleSelectImg('list', index)"
                     >选择图片
-                  </Button>
+                  </el-button>
                 </div>
               </div>
             </div>
@@ -127,10 +127,10 @@
           <Divider>右侧商品部分</Divider>
           <div class="flex">
             <div>右侧标题 :</div>
-            <Input
+            <el-input
               style="width: 200px"
               v-model="data.options.data.hot.title"
-            ></Input>
+             />
           </div>
           <div class="flex column-list">
             <div
@@ -141,20 +141,20 @@
               <div class="flex">
                 <img :src="item.img" class="column-img" />
                 <div class="column-goods-list">
-                  <Button
+                  <el-button
                     size="small"
                     class="ml_10"
                     type="primary"
                     @click="handleSelectGoods('hot', index)"
                     >选择商品
-                  </Button>
+                  </el-button>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </Modal>
+    </el-dialog>
 
     <!-- 选择商品。链接 -->
     <liliDialog
@@ -164,14 +164,14 @@
     ></liliDialog>
 
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
         @callback="callbackSelected"
-        :isComponent="true"
+        :is-component="true"
         :initialize="picModelFlag"
         ref="ossManage"
       />
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 
@@ -242,7 +242,7 @@ export default {
       this.data.options.data.hot.list[this.goodsIndex].title = val[0].goodsName;
       this.data.options.data.hot.list[this.goodsIndex].price = val[0].price;
       this.data.options.data.hot.list[this.goodsIndex].url =
-        this.$options.filters.formatLinkType(val[0]);
+        this.$filters.formatLinkType(val[0]);
 
       console.log(val, this.selectedData, this.goodsIndex);
     },
@@ -251,12 +251,12 @@ export default {
       console.log(val,this.selectedData)
       if (this.selectedData == "image") {
         this.data.options.data.image.url =
-          this.$options.filters.formatLinkType(val);
+          this.$filters.formatLinkType(val);
       } else {
         console.log(this.data.options.data.list,this.goodsIndex)
         this.data.options.data.list[
           this.goodsIndex
-        ].url =  this.$options.filters.formatLinkType(val);
+        ].url =  this.$filters.formatLinkType(val);
       }
     },
     /*
diff --git a/manager/src/views/page-decoration/modelList/goodsAndType.vue b/manager/src/views/page-decoration/modelList/goodsAndType.vue
index 35749819..430dd80b 100644
--- a/manager/src/views/page-decoration/modelList/goodsAndType.vue
+++ b/manager/src/views/page-decoration/modelList/goodsAndType.vue
@@ -32,59 +32,57 @@
           <div class="goods-desc">{{ item.desc }}</div>
         </div>
         <div class="goods-price">
-          {{ item.price | unitPrice("￥") }}
+          {{ $filters.unitPrice(item.price, "￥") }}
         </div>
       </div>
       <div class="setup-box">
         <div>
-          <Button
+          <el-button
             size="small"
             @click.stop="handleSelectModel(data.options.list)"
-            >编辑</Button
+            >编辑</el-button
           >
         </div>
       </div>
     </div>
 
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="装修"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-tab-bar">
         <div class="tab-bar">
           标题
-          <Input style="width: 300px" v-model="data.options.title"></Input>
+          <el-input style="width: 300px" v-model="data.options.title" />
         </div>
         <div class="tab-bar" v-if="data.options.labels[tabCurrentlyIndex]">
           标签
-          <Input
+          <el-input
             style="width: 300px"
             v-model="data.options.labels[tabCurrentlyIndex].label"
-          ></Input>
+           />
         </div>
-        <Tabs
+        <el-button @click="handleTabsAdd" size="small" class="mb_10">增加</el-button>
+        <el-tabs
           type="card"
-          @on-click="handleClickTab"
-          :value="tabIndex"
-          :draggable="true"
-
+          v-model="tabIndex"
+          @tab-click="handleClickTab"
         >
-          <Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>
-          <TabPane
+          <el-tab-pane
             v-for="(tab,tabIndex) in data.options.labels"
             :key="tabIndex"
             :label="tab.label"
             :name="tab.___index + ''"
           >
             <div class="flex flex-a-c">
-              <Button class="del-btn" type="primary" @click="handleContextMenuDelete(tab,tabIndex)">删除当前标签</Button>
-              <Button class="add-goods" @click="addCurrentGoods">
+              <el-button class="del-btn" type="primary" @click="handleContextMenuDelete(tab,tabIndex)">删除当前标签</el-button>
+              <el-button class="add-goods" @click="addCurrentGoods">
                 添加商品
-              </Button>
+              </el-button>
             </div>
 
             <div
@@ -100,21 +98,21 @@
                   <div class="column-config">
                     <div>
                       标题：
-                      <Input v-model="item.title"></Input>
+                      <el-input v-model="item.title" />
                     </div>
                     <div>
                       描述：
-                      <Input v-model="item.desc"></Input>
+                      <el-input v-model="item.desc" />
                     </div>
                   </div>
-                  <Button @click="delGoods(item)">删除</Button>
+                  <el-button @click="delGoods(item)">删除</el-button>
                 </div>
               </div>
             </div>
-          </TabPane>
-        </Tabs>
+          </el-tab-pane>
+        </el-tabs>
       </div>
-    </Modal>
+    </el-dialog>
 
     <!-- 选择商品。链接 -->
     <liliDialog
@@ -222,7 +220,7 @@ export default {
     // 选择链接回调
     selectedLink(val) {
       this.selected[this.current].url =
-        this.$options.filters.formatLinkType(val);
+        this.$filters.formatLinkType(val);
       this.selected[this.current].type =
         val.___type === "other" && val.url === "" ? "link" : "other";
 
diff --git a/manager/src/views/page-decoration/modelList/mixModel.vue b/manager/src/views/page-decoration/modelList/mixModel.vue
index cb11329f..c5dfca5b 100644
--- a/manager/src/views/page-decoration/modelList/mixModel.vue
+++ b/manager/src/views/page-decoration/modelList/mixModel.vue
@@ -5,9 +5,9 @@
       <left :data="data" />
       <div class="setup-box">
         <div>
-          <Button size="small" @click.stop="handleSelectModel('left')"
+          <el-button size="small" @click.stop="handleSelectModel('left')"
             >编辑
-          </Button>
+          </el-button>
         </div>
       </div>
     </div>
@@ -16,32 +16,32 @@
       <right :data="data" />
       <div class="setup-box">
         <div>
-          <Button size="small" @click.stop="handleSelectModel('right')"
+          <el-button size="small" @click.stop="handleSelectModel('right')"
             >编辑
-          </Button>
+          </el-button>
         </div>
       </div>
     </div>
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="装修"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div v-if="current">
         <div class="modal-tab-bar">
           <div>
             当前模块 :
-            <ButtonGroup>
-              <Button :type="current.model == 'goods' ? 'primary' : 'default'"
-                >商品</Button
+            <el-button-group>
+              <el-button :type="current.model == 'goods' ? 'primary' : 'default'"
+                >商品</el-button
               >
-              <Button :type="current.model == 'brand' ? 'primary' : 'default'"
-                >品牌</Button
+              <el-button :type="current.model == 'brand' ? 'primary' : 'default'"
+                >品牌</el-button
               >
-            </ButtonGroup>
+            </el-button-group>
           </div>
 
           <div class="flex">
@@ -52,48 +52,48 @@
                 <div>推荐尺寸：{{ current.data.image.size }}</div>
                 <div class="link-src">
                   链接地址：
-                  <Input
+                  <el-input
                     style="width: 200px"
                     v-model="current.data.image.url"
                     disabled
                   />
                 </div>
-                <Button
+                <el-button
                   size="small"
                   type="primary"
                   @click="handleSelectImg('default')"
                   >选择图片
-                </Button>
-                <Button
+                </el-button>
+                <el-button
                   size="small"
                   class="ml_10"
                   type="primary"
                   @click="handleSelectLink('image')"
                   >选择链接
-                </Button>
+                </el-button>
               </div>
             </div>
           </div>
           <div class="flex" v-if="current.model == 'goods'">
             <div>标签 :</div>
-            <Input
+            <el-input
               style="width: 200px"
               type="text"
               v-model="current.data.badge.label"
             />
-            <Input
+            <el-input
               style="width: 100px; margin-left: 10px"
               disabled
               type="text"
               v-model="current.data.badge.url"
             />
-            <Button
+            <el-button
               size="small"
               class="ml_10"
               type="primary"
               @click="handleSelectLink('badge')"
               >选择链接
-            </Button>
+            </el-button>
           </div>
           <div class="flex column-list">
             <div
@@ -103,19 +103,19 @@
             >
               <div class="flex">
                 <img :src="item.img" class="column-img" />
-                <Button
+                <el-button
                   size="small"
                   class="ml_10"
                   type="primary"
                   v-if="current.model == 'goods'"
                   @click="handleSelectGoods('list', index)"
                   >选择商品
-                </Button>
+                </el-button>
                 <div>
                   <div  v-if="current.model == 'brand'" style="margin-bottom: 10px">
-                    <Input disabled v-model="item.url" />
+                    <el-input disabled v-model="item.url" />
                   </div>
-                  <Button
+                  <el-button
                     size="small"
                     class="ml_10"
                     type="primary"
@@ -123,22 +123,22 @@
                     @click="handleSelectLink('list', index)"
                   >
                     选择链接
-                  </Button>
-                  <Button
+                  </el-button>
+                  <el-button
                     size="small"
                     class="ml_10"
                     type="primary"
                     v-if="current.model == 'brand'"
                     @click="handleSelectImg('list', index)"
                     >选择图片
-                  </Button>
+                  </el-button>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </Modal>
+    </el-dialog>
 
     <!-- 选择商品。链接 -->
     <liliDialog
@@ -148,14 +148,14 @@
     ></liliDialog>
 
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
         @callback="callbackSelected"
-        :isComponent="true"
+        :is-component="true"
         :initialize="picModelFlag"
         ref="ossManage"
       />
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 
@@ -242,12 +242,12 @@ export default {
     // 选择链接回调
     selectedLink(val) {
       if (this.selectedData != "list") {
-        this.data.options[this.align].data[this.selectedData].url = this.$options.filters.formatLinkType(val);
+        this.data.options[this.align].data[this.selectedData].url = this.$filters.formatLinkType(val);
         console.log(this.data.options[this.align].data[this.selectedData])
       }
       if (this.selectedData == "list") {
          this.data.options[this.align].data[this.selectedData][this.goodsIndex]
-        .url = this.$options.filters.formatLinkType(val);
+        .url = this.$filters.formatLinkType(val);
       }
     },
     /*
diff --git a/manager/src/views/page-decoration/modelList/mixs/mix-brand.vue b/manager/src/views/page-decoration/modelList/mixs/mix-brand.vue
index 520d1cbc..43cf6ceb 100644
--- a/manager/src/views/page-decoration/modelList/mixs/mix-brand.vue
+++ b/manager/src/views/page-decoration/modelList/mixs/mix-brand.vue
@@ -6,7 +6,7 @@
     <div>
       <div class="badge-box flex">
         <div class="round">
-          <Icon type="ios-arrow-forward" />
+          <el-icon><ArrowRight /></el-icon>
         </div>
 
 
@@ -23,8 +23,10 @@
 </template>
 
 <script>
+import { ArrowRight } from "@element-plus/icons-vue";
 export default {
   name: "mix-goods",
+  components: { ArrowRight },
   data() {
     return {}
   },
diff --git a/manager/src/views/page-decoration/modelList/mixs/mix-goods.vue b/manager/src/views/page-decoration/modelList/mixs/mix-goods.vue
index f176dac8..33325a1a 100644
--- a/manager/src/views/page-decoration/modelList/mixs/mix-goods.vue
+++ b/manager/src/views/page-decoration/modelList/mixs/mix-goods.vue
@@ -16,7 +16,7 @@
               </div>
               <div class="goods-detail">
                 <div class="goods-detail-title">{{item.title}}</div>
-                <div class="goods-detail-price">{{item.price | unitPrice('¥')}}</div>
+                <div class="goods-detail-price">{{ $filters.unitPrice(item.price, '¥') }}</div>
               </div>
             </div>
           </div>
diff --git a/manager/src/views/page-decoration/modelList/newGoodsSort.vue b/manager/src/views/page-decoration/modelList/newGoodsSort.vue
index b6cedf8d..aeba123b 100644
--- a/manager/src/views/page-decoration/modelList/newGoodsSort.vue
+++ b/manager/src/views/page-decoration/modelList/newGoodsSort.vue
@@ -9,10 +9,10 @@
         <span>{{ options.left.secondTitle }} &gt;</span>
         <div class="setup-box">
           <div>
-            <Button
+            <el-button
               size="small"
               @click.stop="handleSelectModel(options.left, true)"
-              >编辑</Button
+              >编辑</el-button
             >
           </div>
         </div>
@@ -30,8 +30,8 @@
           <img :src="item.img" alt="" />
           <div class="setup-box">
             <div>
-              <Button size="small" @click.stop="handleSelectModel(item)"
-                >编辑</Button
+              <el-button size="small" @click.stop="handleSelectModel(item)"
+                >编辑</el-button
               >
             </div>
           </div>
@@ -48,10 +48,10 @@
         <span>{{ options.middle.secondTitle }} &gt;</span>
         <div class="setup-box">
           <div>
-            <Button
+            <el-button
               size="small"
               @click.stop="handleSelectModel(options.middle, true)"
-              >编辑</Button
+              >编辑</el-button
             >
           </div>
         </div>
@@ -69,8 +69,8 @@
           <img :src="item.img" alt="" />
           <div class="setup-box">
             <div>
-              <Button size="small" @click.stop="handleSelectModel(item)"
-                >编辑</Button
+              <el-button size="small" @click.stop="handleSelectModel(item)"
+                >编辑</el-button
               >
             </div>
           </div>
@@ -87,10 +87,10 @@
         <span>{{ options.right.secondTitle }} &gt;</span>
         <div class="setup-box">
           <div>
-            <Button
+            <el-button
               size="small"
               @click.stop="handleSelectModel(options.right, true)"
-              >编辑</Button
+              >编辑</el-button
             >
           </div>
         </div>
@@ -103,14 +103,14 @@
         >
           <img :src="item.img" alt="" />
           <p>{{ item.name }}</p>
-          <p>{{ item.price | unitPrice("￥") }}</p>
+          <p>{{ $filters.unitPrice(item.price, "￥") }}</p>
           <div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
             {{ index + 1 }}
           </div>
           <div class="setup-box">
             <div>
-              <Button size="small" @click.stop="handleSelectGoods(item)"
-                >编辑</Button
+              <el-button size="small" @click.stop="handleSelectGoods(item)"
+                >编辑</el-button
               >
             </div>
           </div>
@@ -118,14 +118,14 @@
       </div>
     </div>
     <!-- 装修内容 -->
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="装修"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-top-advert">
         <div>
           <img
@@ -145,66 +145,66 @@
             alt
           />
         </div>
-        <div><span>图片主标题：</span><Input v-model="selected.name" /></div>
-        <div><span>图片描述：</span><Input v-model="selected.describe" /></div>
+        <div><span>图片主标题：</span><el-input v-model="selected.name" /></div>
+        <div><span>图片描述：</span><el-input v-model="selected.describe" /></div>
         <div class="tips">
           建议尺寸：<span>{{ selected.size }}</span>
         </div>
         <div>
-          图片链接：<Input
+          图片链接：<el-input
             class="outsideUrl"
             v-model="selected.url"
             :disabled="!!selected.type && selected.type !== 'link'"
             placeholder="https://"
           />
-          <Button size="small" type="primary" @click="handleSelectLink"
-            >选择链接</Button
+          <el-button size="small" type="primary" @click="handleSelectLink"
+            >选择链接</el-button
           >
         </div>
         <div>
-          <Button size="small" type="primary" @click="handleSelectImg"
-            >选择图片</Button
+          <el-button size="small" type="primary" @click="handleSelectImg"
+            >选择图片</el-button
           >&nbsp;
 
-          <Button size="small" type="primary" @click="handleSelectGoods('')"
-            >选择商品</Button
+          <el-button size="small" type="primary" @click="handleSelectGoods('')"
+            >选择商品</el-button
           >
         </div>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 装修标题 -->
-    <Modal
+    <el-dialog
       v-model="showModal1"
       title="装修"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-top-advert">
-        <div><span>主标题：</span><Input v-model="selected.title" /></div>
-        <div><span>副标题：</span><Input v-model="selected.secondTitle" /></div>
+        <div><span>主标题：</span><el-input v-model="selected.title" /></div>
+        <div><span>副标题：</span><el-input v-model="selected.secondTitle" /></div>
         <div>
           <span
-            >副标题链接：<Input
+            >副标题链接：<el-input
               class="outsideUrl"
               v-model="selected.url"
               :disabled="!!selected.type && selected.type !== 'link'"
               placeholder="https://" /></span
-          ><Button
+          ><el-button
             size="small"
             class="ml_10"
             type="primary"
             @click="handleSelectLink"
-            >选择链接</Button
+            >选择链接</el-button
           >
         </div>
         <div>
           <span>背景色：</span
-          ><ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
+          ><el-color-picker v-if="selected.bgColor" v-model="selected.bgColor" />
         </div>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog
       ref="liliDialog"
@@ -212,14 +212,14 @@
       @selectedGoodsData="selectedGoodsData"
     ></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
         @callback="callbackSelected"
-        :isComponent="true"
+        :is-component="true"
         :initialize="picModelFlag"
         ref="ossManage"
       />
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -269,7 +269,7 @@ export default {
     },
     // 选择链接回调
     selectedLink(val) {
-      this.selected.url = this.$options.filters.formatLinkType(val);
+      this.selected.url = this.$filters.formatLinkType(val);
       this.selected.type =
         val.___type === "other" && val.url === "" ? "link" : "other";
     },
diff --git a/manager/src/views/page-decoration/modelList/notEnough.vue b/manager/src/views/page-decoration/modelList/notEnough.vue
index fc00097a..923bb434 100644
--- a/manager/src/views/page-decoration/modelList/notEnough.vue
+++ b/manager/src/views/page-decoration/modelList/notEnough.vue
@@ -7,7 +7,7 @@
             </li>
             <div class="setup-box" style="width:100px;left:1100px;">
                 <div>
-                    <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+                    <el-button size="small" @click.stop="handleSelectModel">编辑</el-button>
                 </div>
             </div>
         </ul>
@@ -16,26 +16,26 @@
                 <img :src="item.img" width="210" height="210" :alt="item.name">
                 <p>{{item.name}}</p>
                 <p>
-                    <span>{{item.price | unitPrice('￥')}}</span> 
-                    <!-- <span>{{item.price | unitPrice('￥')}}</span> -->
+                    <span>{{ $filters.unitPrice(item.price, '￥') }}</span>
+                    <!-- <span>{{ $filters.unitPrice(item.price, '￥') }}</span> -->
                 </p>
                 <div class="setup-box">
                     <div>
-                        <Button size="small" @click.stop="handleSelectGoods(item)">编辑</Button>
+                        <el-button size="small" @click.stop="handleSelectGoods(item)">编辑</el-button>
                     </div>
                 </div>
             </div>
         </div>
-        <Modal
+        <el-dialog
             v-model="showModal"
             title="装修"
-            draggable
+            
             width="800"
-            :z-index="100"
-            :mask-closable="false"
-            >
+            
+            :close-on-click-modal="false"
+             append-to-body destroy-on-close>
             <div class="modal-tab-bar">
-                <Button type="primary" size='small' @click="handleAddNav">添加分类</Button>
+                <el-button type="primary" size='small' @click="handleAddNav">添加分类</el-button>
                 <table cellspacing="0">
                     <thead>
                         <tr>
@@ -46,16 +46,16 @@
                     </thead>
                     <tbody>
                         <tr v-for="(item, index) in conData.options.navList" :key="index">
-                            <td><Input v-model="item.title" /></td>
-                            <td><Input v-model="item.desc" /></td>
+                            <td><el-input v-model="item.title" /></td>
+                            <td><el-input v-model="item.desc" /></td>
                             <td v-if="index!=0">
-                                <Button type="error" size="small" @click="handleDelNav(index)">删除</Button>
+                                <el-button type="danger" size="small" @click="handleDelNav(index)">删除</el-button>
                             </td>
                         </tr>
                     </tbody>
                 </table>
             </div>
-        </Modal>
+        </el-dialog>
         <!-- 选择商品。链接 -->
         <liliDialog
             ref="liliDialog"
diff --git a/manager/src/views/page-decoration/modelList/oneRowThreeColumns.vue b/manager/src/views/page-decoration/modelList/oneRowThreeColumns.vue
index 5aff7791..8efd635d 100644
--- a/manager/src/views/page-decoration/modelList/oneRowThreeColumns.vue
+++ b/manager/src/views/page-decoration/modelList/oneRowThreeColumns.vue
@@ -6,43 +6,43 @@
     </div>
     <div class="setup-box">
       <div>
-        <Button
+        <el-button
           size="small"
           @click.stop="handleSelectModel(data.options.list)"
-        >编辑</Button
+        >编辑</el-button
         >
       </div>
     </div>
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="装修"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-tab-bar">
         <div v-for="(item,index) in data.options.list" :key="index">
           <img :src="item.img" class="three-column-img">
           <div>推荐尺寸：{{item.size}}</div>
-          <Button
+          <el-button
             size="small"
             class="ml_10"
             type="primary"
             @click="handleSelectImg(index)"
-          >选择图片</Button
+          >选择图片</el-button
           >
-          <Button
+          <el-button
             size="small"
             class="ml_10"
             type="primary"
             @click="handleSelectLink(index)"
-          >选择链接</Button
+          >选择链接</el-button
           >
         </div>
 
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog
       ref="liliDialog"
@@ -50,14 +50,14 @@
       @selectedGoodsData="selectedGoodsData"
     ></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
         @callback="callbackSelected"
-        :isComponent="true"
+        :is-component="true"
         :initialize="picModelFlag"
         ref="ossManage"
       />
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 
@@ -104,7 +104,7 @@ export default {
     },
     // 选择链接回调
     selectedLink(val) {
-      this.selected.url = this.$options.filters.formatLinkType(val);
+      this.selected.url = this.$filters.formatLinkType(val);
       this.selected.type =
         val.___type === "other" && val.url === "" ? "link" : "other";
     },
diff --git a/manager/src/views/page-decoration/modelList/onlyGoodsModel.vue b/manager/src/views/page-decoration/modelList/onlyGoodsModel.vue
index 67b7fa74..c48eb054 100644
--- a/manager/src/views/page-decoration/modelList/onlyGoodsModel.vue
+++ b/manager/src/views/page-decoration/modelList/onlyGoodsModel.vue
@@ -17,28 +17,28 @@
       </div>
       <div class="setup-box">
         <div>
-          <Button
+          <el-button
             size="small"
             @click.stop="handleSelectModel(data.options.list)"
-          >编辑</Button
+          >编辑</el-button
           >
         </div>
       </div>
     </div>
 
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="装修"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-tab-bar">
             <div class="flex flex-a-c">
-              <Button class="add-goods" @click="addCurrentGoods">
+              <el-button class="add-goods" @click="addCurrentGoods">
                 添加商品
-              </Button>
+              </el-button>
             </div>
 
             <div
@@ -52,20 +52,20 @@
                   <div class="column-config">
                     <div>
                       标题：
-                      <Input v-model="item.title"></Input>
+                      <el-input v-model="item.title" />
                     </div>
                     <div>
                       描述：
-                      <Input v-model="item.desc"></Input>
+                      <el-input v-model="item.desc" />
                     </div>
                   </div>
-                  <Button @click="delGoods(item,index)">删除</Button>
+                  <el-button @click="delGoods(item,index)">删除</el-button>
                 </div>
               </div>
             </div>
 
       </div>
-    </Modal>
+    </el-dialog>
 
     <!-- 选择商品。链接 -->
     <liliDialog
@@ -132,7 +132,7 @@ export default {
     // 选择链接回调
     selectedLink(val) {
       this.selected[this.current].url =
-        this.$options.filters.formatLinkType(val);
+        this.$filters.formatLinkType(val);
       this.selected[this.current].type =
         val.___type === "other" && val.url === "" ? "link" : "other";
 
diff --git a/manager/src/views/page-decoration/modelList/recommend.vue b/manager/src/views/page-decoration/modelList/recommend.vue
index adbeaa6e..632cbf3f 100644
--- a/manager/src/views/page-decoration/modelList/recommend.vue
+++ b/manager/src/views/page-decoration/modelList/recommend.vue
@@ -9,8 +9,8 @@
         <span>{{ msgLeft.secondTitle }}&gt;</span>
         <div class="setup-box">
           <div>
-            <Button size="small" @click.stop="handleSelectModel(msgLeft, true)"
-              >编辑</Button
+            <el-button size="small" @click.stop="handleSelectModel(msgLeft, true)"
+              >编辑</el-button
             >
           </div>
         </div>
@@ -20,18 +20,18 @@
           <img :src="msgLeft.list[0].img" width="160" height="160" alt="" />
           <div class="margin-left">{{ msgLeft.list[0].name }}</div>
           <div class="margin-left">{{ msgLeft.list[0].describe }}</div>
-          <Button
+          <el-button
             size="small"
             :style="{ background: msgLeft.bgColor }"
             class="fz_12 view-btn"
-            >点击查看</Button
+            >点击查看</el-button
           >
           <div class="setup-box">
             <div>
-              <Button
+              <el-button
                 size="small"
                 @click.stop="handleSelectModel(msgLeft.list[0])"
-                >编辑</Button
+                >编辑</el-button
               >
             </div>
           </div>
@@ -46,8 +46,8 @@
               </div>
               <div class="setup-box">
                 <div>
-                  <Button size="small" @click.stop="handleSelectModel(item)"
-                    >编辑</Button
+                  <el-button size="small" @click.stop="handleSelectModel(item)"
+                    >编辑</el-button
                   >
                 </div>
               </div>
@@ -65,8 +65,8 @@
         <span>{{ msgRight.secondTitle }}&gt;</span>
         <div class="setup-box">
           <div>
-            <Button size="small" @click.stop="handleSelectModel(msgRight, true)"
-              >编辑</Button
+            <el-button size="small" @click.stop="handleSelectModel(msgRight, true)"
+              >编辑</el-button
             >
           </div>
         </div>
@@ -93,22 +93,22 @@
           </div>
           <div class="setup-box">
             <div>
-              <Button size="small" @click.stop="handleSelectModel(item)"
-                >编辑</Button
+              <el-button size="small" @click.stop="handleSelectModel(item)"
+                >编辑</el-button
               >
             </div>
           </div>
         </div>
       </div>
     </div>
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="装修"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-top-advert">
         <div>
           <img
@@ -136,68 +136,68 @@
             alt
           />
         </div>
-        <div><span>图片主标题：</span><Input v-model="selected.name" /></div>
-        <div><span>图片描述：</span><Input v-model="selected.describe" /></div>
+        <div><span>图片主标题：</span><el-input v-model="selected.name" /></div>
+        <div><span>图片描述：</span><el-input v-model="selected.describe" /></div>
         <div class="tips">
           建议尺寸：<span>{{ selected.size }}</span>
         </div>
         <div>
-          图片链接：<Input
+          图片链接：<el-input
             class="outsideUrl"
             v-model="selected.url"
             :disabled="!!selected.type && selected.type !== 'link'"
             placeholder="https://"
           />
-          <Button
+          <el-button
             size="small"
             class="ml_10"
             type="primary"
             @click="handleSelectLink"
-            >选择链接</Button
+            >选择链接</el-button
           >
         </div>
         <div>
-          <Button size="small" type="primary" @click="handleSelectImg"
-            >选择图片</Button
+          <el-button size="small" type="primary" @click="handleSelectImg"
+            >选择图片</el-button
           >&nbsp;
-          <Button size="small" type="primary" @click="handleSelectGoods"
-            >选择商品</Button
+          <el-button size="small" type="primary" @click="handleSelectGoods"
+            >选择商品</el-button
           >
         </div>
       </div>
-    </Modal>
-    <Modal
+    </el-dialog>
+    <el-dialog
       v-model="showModal1"
       title="装修"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-top-advert">
-        <div><span>主标题：</span><Input v-model="selected.title" /></div>
-        <div><span>副标题：</span><Input v-model="selected.secondTitle" /></div>
+        <div><span>主标题：</span><el-input v-model="selected.title" /></div>
+        <div><span>副标题：</span><el-input v-model="selected.secondTitle" /></div>
         <div>
           <span
-            >副标题链接：<Input
+            >副标题链接：<el-input
               class="outsideUrl"
               v-model="selected.url"
               :disabled="!!selected.type && selected.type !== 'link'"
               placeholder="https://" /></span
-          ><Button
+          ><el-button
             size="small"
             class="ml_10"
             type="primary"
             @click="handleSelectLink"
-            >选择链接</Button
+            >选择链接</el-button
           >
         </div>
         <div>
-          <span>背景色：</span><Input v-model="selected.bgColor" />
-          <ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
+          <span>背景色：</span><el-input v-model="selected.bgColor" />
+          <el-color-picker v-if="selected.bgColor" v-model="selected.bgColor" />
         </div>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog
       ref="liliDialog"
@@ -205,14 +205,14 @@
       @selectedGoodsData="selectedGoodsData"
     ></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
         @callback="callbackSelected"
-        :isComponent="true"
+        :is-component="true"
         :initialize="picModelFlag"
         ref="ossManage"
       />
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -257,7 +257,7 @@ export default {
     },
     // 选择链接回调
     selectedLink(val) {
-      this.selected.url = this.$options.filters.formatLinkType(val);
+      this.selected.url = this.$filters.formatLinkType(val);
       this.selected.type =
         val.___type === "other" && val.url === "" ? "link" : "other";
     },
diff --git a/manager/src/views/page-decoration/modelList/seckill-only-album.vue b/manager/src/views/page-decoration/modelList/seckill-only-album.vue
index 86658897..90d85303 100644
--- a/manager/src/views/page-decoration/modelList/seckill-only-album.vue
+++ b/manager/src/views/page-decoration/modelList/seckill-only-album.vue
@@ -25,8 +25,8 @@
             <img :src="item.img" width="140" height="140" :alt="item.name" />
             <div class="ellipsis">{{ item.name }}</div>
             <div>
-              <span>{{ item.price | unitPrice("￥") }}</span>
-              <span>{{ item.originalPrice | unitPrice("￥") }}</span>
+              <span>{{ $filters.unitPrice(item.price, "￥") }}</span>
+              <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
             </div>
           </div>
         </swiper-slide>
@@ -95,7 +95,7 @@ export default {
   mounted() {
     this.countDown(this.options.list);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     clearInterval(this.interval);
   },
   methods: {
diff --git a/manager/src/views/page-decoration/modelList/seckill.vue b/manager/src/views/page-decoration/modelList/seckill.vue
index 1c296efc..c96d81df 100644
--- a/manager/src/views/page-decoration/modelList/seckill.vue
+++ b/manager/src/views/page-decoration/modelList/seckill.vue
@@ -25,8 +25,8 @@
             <img :src="item.img" width="140" height="140" :alt="item.name" />
             <div class="ellipsis">{{ item.name }}</div>
             <div>
-              <span>{{ item.price | unitPrice("￥") }}</span>
-              <span>{{ item.originalPrice | unitPrice("￥") }}</span>
+              <span>{{ $filters.unitPrice(item.price, "￥") }}</span>
+              <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
             </div>
           </div>
         </swiper-slide>
@@ -95,7 +95,7 @@ export default {
   mounted() {
     this.countDown(this.options.list);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     clearInterval(this.interval);
   },
   methods: {
diff --git a/manager/src/views/page-decoration/renovation.vue b/manager/src/views/page-decoration/renovation.vue
index f2bbc9cb..908786c5 100644
--- a/manager/src/views/page-decoration/renovation.vue
+++ b/manager/src/views/page-decoration/renovation.vue
@@ -1,30 +1,27 @@
 <template>
   <div class="renovation">
-    <!-- 左侧模块列表 -->
     <div class="model-list">
       <div class="classification-title">基础模块</div>
       <draggable tag="ul" :list="modelData" v-bind="{group:{ name:'model', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"   >
         <li v-for="(model, index) in modelData" :key="index" class="model-item">
-          <Icon :type="model.icon" />
+          <el-icon><Picture /></el-icon>
           <span>{{model.name}}</span>
         </li>
       </draggable>
     </div>
-    <!-- 中间展示模块 -->
     <div class="show-content">
       <model-form ref="modelForm" :data="modelForm"></model-form>
     </div>
-    <!-- 操作按钮 -->
     <div class="btn-bar" :class="{'top':isHiddenBar}">
-      <Button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</Button>
-      <Button class="ml_10" @click="resetTemplate">还原模板</Button>
-      <Button class="ml_10" @click="witeLocalStore">将装修内容写入到本地</Button>
-
-      <Button class="ml_10" v-if="hasCache" @click="clearCache">清空本地装修缓存</Button>
+      <el-button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</el-button>
+      <el-button class="ml_10" @click="resetTemplate">还原模板</el-button>
+      <el-button class="ml_10" @click="witeLocalStore">将装修内容写入到本地</el-button>
+      <el-button class="ml_10" v-if="hasCache" @click="clearCache">清空本地装修缓存</el-button>
     </div>
   </div>
 </template>
 <script>
+import { Picture } from "@element-plus/icons-vue";
 import { modelData } from "./modelConfig";
 import Draggable from "vuedraggable";
 import ModelForm from "./modelForm.vue";
@@ -33,12 +30,12 @@ export default {
   components: {
     Draggable,
     ModelForm,
+    Picture,
   },
   mounted() {
     const setting = window.localStorage.getItem('admin-setting') ? JSON.parse(window.localStorage.getItem('admin-setting')) : {};
     this.isHiddenBar = setting.isUseTabsRouter
-     // 先读缓存，如果缓存有值则读缓存。
-    const cache = this.getStore('managerPCPageCache')
+     const cache = this.getStore('managerPCPageCache')
     this.hasCache = !!cache;
       if(cache){
         this.$Modal.confirm({
@@ -51,7 +48,6 @@ export default {
           if (pageData) {
             pageData = JSON.parse(pageData);
             if (pageData.list[0].type === "topAdvert") {
-              // topAdvert 为顶部广告 navList为导航栏
               this.$refs.modelForm.topAdvert = pageData.list[0];
               this.$refs.modelForm.navList = pageData.list[1];
               pageData.list.splice(0, 2);
@@ -70,9 +66,9 @@ export default {
   data() {
     return {
       hasCache:false,
-      modelData, // 可选模块数据
-      modelForm: { list: [] }, // 模板数据
-      submitLoading: false, // 提交加载状态
+      modelData,
+      modelForm: { list: [] },
+      submitLoading: false,
       isHiddenBar:true,
     };
   },
@@ -81,7 +77,6 @@ export default {
       this.setStore('managerPCPageCache', '')
       this.$Message.success('清除成功')
     },
-      // 将楼层装修的内容写入到本地缓存中
     witeLocalStore(){
       const data ={...this.modelForm}
       data.list.unshift(this.$refs.modelForm.navList);
@@ -90,10 +85,8 @@ export default {
       this.$Message.success('写入成功')
     },
     saveTemplate() {
-      // 保存模板
       this.submitTemplate(this.$route.query.pageShow ? 'OPEN' : 'CLOSE')
     },
-    // 提交模板
     submitTemplate(pageShow) {
       this.submitLoading = true
       const modelForm = JSON.parse(JSON.stringify(this.modelForm))
@@ -102,7 +95,6 @@ export default {
       const data = {
         id: this.$route.query.id,
         pageData: JSON.stringify(modelForm),
-        // 如果是专题页面永远关闭
         pageShow: this.$route.query.pageType === 'SPECIAL' ? 'CLOSE' : pageShow,
         pageClientType: 'PC',
       };
@@ -114,18 +106,15 @@ export default {
       });
     },
     resetTemplate() {
-      // 还原模板
       this.getTemplateItem(this.$route.query.id);
     },
     getTemplateItem(id) {
-      // 获取模板数据
       API_floor.getHomeData(id).then((res) => {
         if (res.success) {
           let pageData = res.result.pageData;
           if (pageData) {
             pageData = JSON.parse(pageData);
             if (pageData.list[0].type === "topAdvert") {
-              // topAdvert 为顶部广告 navList为导航栏
               this.$refs.modelForm.topAdvert = pageData.list[0];
               this.$refs.modelForm.navList = pageData.list[1];
               pageData.list.splice(0, 2);
@@ -181,11 +170,9 @@ export default {
     transition:0.15s;
     border-radius: 4px;
     &:hover {
-
       background: $theme_color;
       cursor: move;
       color: #fff;
-
     }
   }
   .ghost::after {
@@ -224,7 +211,6 @@ export default {
   padding: 10px;
   box-shadow: 1px 1px 10px #999;
   z-index: 99;
-
 }
 .top{
   top: 100px;
diff --git a/manager/src/views/page-decoration/wap/advertising.vue b/manager/src/views/page-decoration/wap/advertising.vue
index 73e56188..57398139 100644
--- a/manager/src/views/page-decoration/wap/advertising.vue
+++ b/manager/src/views/page-decoration/wap/advertising.vue
@@ -43,12 +43,12 @@
                   </div>
                 </div>
                 <div class="selectBtn">
-                  <Button
+                  <el-button
                     size="small"
                     @click="handleClickFile(item, index)"
-                    ghost
+                    plain
                     type="primary"
-                    >选择照片</Button
+                    >选择照片</el-button
                   >
                 </div>
               </div>
@@ -57,12 +57,12 @@
               <div class="decorate-view">
                 <div class="decorate-view-title">选择图片</div>
                 <div>
-                  <Button
-                    ghost
+                  <el-button
+                    plain
                     type="primary"
                     size="small"
                     @click="clickLink(item)"
-                    >选择链接</Button
+                    >选择链接</el-button
                   >
                 </div>
               </div>
@@ -70,18 +70,20 @@
               <div class="decorate-view">
                 <div class="decorate-view-title">当前页面状态</div>
                 <div>
-                  <Tag :type="result.pageShow === 'OPEN'  ? 'green' : 'red'">{{result.pageShow === 'OPEN' ? '开启' : '关闭'}}</Tag>
+                  <el-tag :type="result.pageShow === 'OPEN' ? 'success' : 'danger'">
+                    {{ result.pageShow === "OPEN" ? "开启" : "关闭" }}
+                  </el-tag>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <!-- <Button type="primary" @click="addDecorate()" ghost>添加</Button> -->
+        <!-- <el-button type="primary" @click="addDecorate()" ghost>添加</el-button> -->
         <liliDialog ref="liliDialog"    @selectedLink="selectedLink" :types="linkType"></liliDialog>
       </div>
-      <Modal width="1200px" v-model="picModelFlag">
-         <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-      </Modal>
+      <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+         <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -136,9 +138,9 @@ export default {
 
       API_Other.getOpenHomeData(pageType).then((res) => {
         this.$store.state.openStoreId = res.result.id;
-        res.result.pageData
-          ? this.$set(this, "advertising", [JSON.parse(res.result.pageData)])
-          : "";
+        if (res.result.pageData) {
+          this.advertising = [JSON.parse(res.result.pageData)];
+        }
         this.result = res.result
       });
     },
diff --git a/manager/src/views/page-decoration/wap/alertAdvertising.vue b/manager/src/views/page-decoration/wap/alertAdvertising.vue
index 64584d6d..c7658cd9 100644
--- a/manager/src/views/page-decoration/wap/alertAdvertising.vue
+++ b/manager/src/views/page-decoration/wap/alertAdvertising.vue
@@ -43,12 +43,12 @@
                   </div>
                 </div>
                 <div class="selectBtn">
-                  <Button
+                  <el-button
                     size="small"
                     @click="handleClickFile(item, index)"
-                    ghost
+                    plain
                     type="primary"
-                    >选择链接</Button
+                    >选择链接</el-button
                   >
                 </div>
               </div>
@@ -57,12 +57,12 @@
               <div class="decorate-view">
                 <div class="decorate-view-title">选择图片</div>
                 <div>
-                  <Button
-                    ghost
+                  <el-button
+                    plain
                     type="primary"
                     size="small"
                     @click="clickLink(item)"
-                    >选择链接</Button
+                    >选择链接</el-button
                   >
                 </div>
               </div>
@@ -70,7 +70,9 @@
               <div class="decorate-view">
                 <div class="decorate-view-title">当前页面状态</div>
                 <div>
-                  <Tag :type="result.pageShow === 'OPEN'  ? 'green' : 'red'">{{result.pageShow === 'OPEN' ? '开启' : '关闭'}}</Tag>
+                  <el-tag :type="result.pageShow === 'OPEN' ? 'success' : 'danger'">
+                    {{ result.pageShow === "OPEN" ? "开启" : "关闭" }}
+                  </el-tag>
                 </div>
               </div>
             </div>
@@ -82,9 +84,9 @@
           :types="linkType"
         ></liliDialog>
       </div>
-      <Modal width="1200px" v-model="picModelFlag">
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-    </Modal>
+      <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+    </el-dialog>
     </div>
   </div>
 </template>
@@ -145,9 +147,9 @@ export default {
 
       API_Other.getOpenHomeData(pageType).then((res) => {
         this.$store.state.openStoreId = res.result.id;
-        res.result.pageData
-          ? this.$set(this, "advertising", [JSON.parse(res.result.pageData)])
-          : "";
+        if (res.result.pageData) {
+          this.advertising = [JSON.parse(res.result.pageData)];
+        }
         this.result = res.result
       });
     },
diff --git a/manager/src/views/page-decoration/wap/decorate.scss b/manager/src/views/page-decoration/wap/decorate.scss
index 5eeb7a11..880adf1c 100644
--- a/manager/src/views/page-decoration/wap/decorate.scss
+++ b/manager/src/views/page-decoration/wap/decorate.scss
@@ -1,5 +1,5 @@
-::v-deep .ivu-modal-mask,
-.ivu-modal-wrap {
+:deep(.ivu-modal-mask),
+:deep(.ivu-modal-wrap) {
   z-index: 800;
 }
 
diff --git a/manager/src/views/page-decoration/wap/decorate.vue b/manager/src/views/page-decoration/wap/decorate.vue
index 7becf254..e1eb087b 100644
--- a/manager/src/views/page-decoration/wap/decorate.vue
+++ b/manager/src/views/page-decoration/wap/decorate.vue
@@ -3,10 +3,10 @@
     <div class="decorate-title">
       {{ res.name }}
 
-      <Button
+      <el-button
         style="margin-left: 20px"
         size="small"
-        ghost
+        plain
         v-if="
           res.type == 'tpl_ad_list' ||
           res.type == 'tpl_activity_list' ||
@@ -14,21 +14,25 @@
         "
         type="primary"
         @click="selectStyle()"
-        >选择风格</Button
+        >选择风格</el-button
       >
-      <Button
+      <el-button
         style="margin-left: 20px"
         size="small"
-        ghost
+        plain
         v-if="res.type == 'promotions' || res.drawerPromotions"
         type="primary"
         @click="selectPromotions()"
-        >选择促销活动</Button
+        >选择促销活动</el-button
       >
     </div>
-    <Alert type="warning" v-if="res.name == '商品分类'"
-      >装修提示
-      <template slot="desc">
+    <el-alert
+      v-if="res.name == '商品分类'"
+      type="warning"
+      title="装修提示"
+      :closable="false"
+    >
+      <template #default>
         <div style="color: red">
           如果当前装修模块不是最后一项模块且模块内容绑定为分类，则会默认展示绑定分类的100条商品信息。
         </div>
@@ -39,44 +43,44 @@
           如果当前装修内容不为分类，则会展示当前商品的静态信息。
         </div>
       </template>
-    </Alert>
+    </el-alert>
 
     <!-- 右侧显示抽屉 -->
-    <Drawer title="选择风格" :closable="false" width="400" v-model="styleFlag">
+    <el-drawer title="选择风格" :show-close="false" size="400px" v-model="styleFlag">
       <div class="drawer">
-        <div
-          class="drawer-item"
-          @click="clickDrawer(item, index)"
-          v-for="(item, index) in modelData"
-          :key="index"
-          v-if="item.drawer"
-        >
-          <img src alt />
-          <span>{{ item.name }}</span>
-        </div>
+        <template v-for="(item, index) in modelData" :key="index">
+          <div
+            v-if="item.drawer"
+            class="drawer-item"
+            @click="clickDrawer(item, index)"
+          >
+            <img src alt />
+            <span>{{ item.name }}</span>
+          </div>
+        </template>
       </div>
-    </Drawer>
+    </el-drawer>
 
     <!-- 右侧显示抽屉 -->
-    <Drawer
+    <el-drawer
       title="选择促销活动(最多只能展示两个活动)"
-      :closable="false"
-      width="400"
+      :show-close="false"
+      size="400px"
       v-model="promotionsFlag"
     >
       <div class="drawer">
-        <div
-          class="drawer-item"
-          @click="clickDrawer(item, index)"
-          v-for="(item, index) in modelData"
-          :key="index"
-          v-if="item.drawerPromotions"
-        >
-          <img src alt />
-          <span>{{ item.name }}</span>
-        </div>
+        <template v-for="(item, index) in modelData" :key="index">
+          <div
+            v-if="item.drawerPromotions"
+            class="drawer-item"
+            @click="clickDrawer(item, index)"
+          >
+            <img src alt />
+            <span>{{ item.name }}</span>
+          </div>
+        </template>
       </div>
-    </Drawer>
+    </el-drawer>
 
     <!-- 卡片集合 -->
     <div
@@ -96,32 +100,34 @@
       >
         <div class="decorate-item-title">
           <div>卡片</div>
-          <Icon
-            @click="closeDecorate(index)"
+          <el-icon
             v-if="res.close || res.type == 'promotionDetail'"
-            size="20"
+            @click="closeDecorate(index)"
+            :size="20"
             color="#e1251b"
-            type="md-close-circle"
-          />
+            class="close-icon"
+          >
+            <CircleClose />
+          </el-icon>
         </div>
 
         <div class="decorate-item-box">
+          <template v-if="item.titleWay">
           <div
             class="decorate-border"
-            v-if="item.titleWay"
             v-for="(title_item, title_index) in item.titleWay"
             :key="title_index"
           >
             <div class="decorate-view">
               <div class="decorate-view-title">标题{{ title_index + 1 }}</div>
               <div>
-                <Input v-model="title_item.title" />
+                <el-input v-model="title_item.title" />
               </div>
             </div>
             <div class="decorate-view">
               <div class="decorate-view-title">描述</div>
               <div>
-                <Input v-model="title_item.desc" />
+                <el-input v-model="title_item.desc" />
               </div>
             </div>
             <div class="decorate-view">
@@ -130,26 +136,24 @@
                 <div v-if="res.options.list[0].listWay.length != 0">
                   <!-- 绑定商品选择器回调已选择的商品 -->
 
+                  <template
+                    v-for="(bindGoods, bindGoodsIndex) in res.options.list[0].listWay"
+                    :key="bindGoodsIndex"
+                  >
                   <div
                     v-if="
                       title_item.___index == bindGoods.___index ||
                       title_item.title == bindGoods.type
                     "
-                    v-for="(bindGoods, bindGoodsIndex) in res.options.list[0]
-                      .listWay"
-                    :key="bindGoodsIndex"
                     class="title-item wes-2"
                   >
-                    <Tooltip max-width="200" placement="left">
-                      <div slot="content" class="title-tooltip">
-                        {{ bindGoods.title }}
-                      </div>
+                    <el-tooltip placement="left" :content="bindGoods.title">
                       <div class="title-goodsName">
                         {{ bindGoods.title }}
                       </div>
-                    </Tooltip>
+                    </el-tooltip>
                     <div class="title-btn">
-                      <Button
+                      <el-button
                         @click="
                           slotGoods(
                             res.options.list[0].listWay,
@@ -160,10 +164,11 @@
                         "
                         style="margin-right: 10px"
                         size="small"
-                        >上移</Button
+                        >上移</el-button
                       >
                     </div>
                   </div>
+                  </template>
                 </div>
                 <!-- 显示绑定分类 -->
                 <div v-if="title_item.bindCategory">
@@ -172,31 +177,32 @@
               </div>
 
               <div class="decorate-view-btn">
-                <Button
+                <el-button
                   @click="bindGoodsId(title_item, title_index)"
                   size="small"
-                  >选择商品</Button
+                  >选择商品</el-button
                 >
-                <Button
+                <el-button
                   @click="bindGoodsCategory(title_index)"
                   size="small"
                   style="margin-top: 20px"
-                  >选择分类</Button
+                  >选择分类</el-button
                 >
               </div>
             </div>
           </div>
+          </template>
           <div class="decorate-view" v-if="res.type == 'carousel'">
             <div class="decorate-view-title">
-              <Button
+              <el-button
                 @click="slotBanner(res, item, index, 'up')"
                 style="margin-right: 10px"
                 size="small"
-                >上移</Button
-              ><Button
+                >上移</el-button
+              ><el-button
                 @click="slotBanner(res, item, index, 'down')"
                 size="small"
-                >下移</Button
+                >下移</el-button
               >
             </div>
           </div>
@@ -212,12 +218,12 @@
               </div>
             </div>
             <div class="selectBtn">
-              <Button
+              <el-button
                 size="small"
                 @click="handleClickFile(item, index)"
-                ghost
+                plain
                 type="primary"
-                >选择照片</Button
+                >选择照片</el-button
               >
             </div>
           </div>
@@ -274,8 +280,8 @@
           >
             <div class="decorate-view-title">背景颜色</div>
             <div class="decorate-view">
-              <ColorPicker v-model="item.bk_color" />
-              <Input v-model="item.bk_color" />
+              <el-color-picker v-model="item.bk_color" />
+              <el-input v-model="item.bk_color" />
             </div>
           </div>
           <div
@@ -284,15 +290,15 @@
           >
             <div class="decorate-view-title">方向</div>
             <div class="decorate-view">
-              <Select
+              <el-select
                 style="width: 200px"
-                @on-change="changeDirection($event, item)"
+                @change="changeDirection($event, item)"
                 v-model="item.direction"
               >
                 {{ item.direction }}
-                <Option label="横向" value="horizontal"></Option>
-                <Option label="纵向" value="vertical"></Option>
-              </Select>
+                <el-option label="横向" value="horizontal"></el-option>
+                <el-option label="纵向" value="vertical"></el-option>
+              </el-select>
             </div>
           </div>
 
@@ -303,7 +309,7 @@
           >
             <div class="decorate-view-title">菜单标题</div>
             <div>
-              <Input v-model="item.title" style="width: 200px" />
+              <el-input v-model="item.title" style="width: 200px" />
             </div>
           </div>
           <div
@@ -316,8 +322,8 @@
           >
             <div class="decorate-view-title">标题颜色</div>
             <div class="decorate-view">
-              <ColorPicker v-model="item.color" />
-              <Input v-model="item.color" />
+              <el-color-picker v-model="item.color" />
+              <el-input v-model="item.color" />
             </div>
           </div>
           <!-- 填写小标题 -->
@@ -327,7 +333,7 @@
           >
             <div class="decorate-view-title">小标题</div>
             <div>
-              <Input v-model="item.title1" style="width: 200px" />
+              <el-input v-model="item.title1" style="width: 200px" />
             </div>
           </div>
           <div
@@ -336,8 +342,8 @@
           >
             <div class="decorate-view-title">小标题颜色</div>
             <div class="decorate-view">
-              <ColorPicker v-model="item.color1" />
-              <Input v-model="item.color1" />
+              <el-color-picker v-model="item.color1" />
+              <el-input v-model="item.color1" />
             </div>
           </div>
           <div
@@ -351,12 +357,10 @@
                 :key="tindex"
                 class="decorate-notice"
               >
-                <Input v-model="t.context" style="width: 200px" />
-                <Icon
-                  @click="removeNotice(tindex)"
-                  size="16"
-                  type="md-close-circle"
-                />
+                <el-input v-model="t.context" style="width: 200px" />
+                <el-icon @click="removeNotice(tindex)" :size="16" color="#e1251b">
+                  <CircleClose />
+                </el-icon>
               </div>
             </div>
           </div>
@@ -367,10 +371,10 @@
             <div class="decorate-view-title">选择模式</div>
 
             <div>
-              <RadioGroup v-model="item.model" type="button">
-                <Radio value="link" label="link">链接</Radio>
-                <Radio value="hotzone" label="hotzone">热区</Radio>
-              </RadioGroup>
+              <el-radio-group v-model="item.model">
+                <el-radio value="link">链接</el-radio>
+                <el-radio value="hotzone">热区</el-radio>
+              </el-radio-group>
             </div>
           </div>
 
@@ -421,8 +425,7 @@
                     满减
                   </span>
                   <span v-if="item.url.___promotion == 'PINTUAN'"> 拼团 </span>
-                  {{ item.url.title || item.url.goodsName }}
-                </span>
+                  {{ item.url.title || item.url.goodsName }}</span>
                 <!-- 当选择完活动之后的其他回调 -->
                 <span v-if="item.url.___type == 'pages'">
                   {{ item.url.title }}</span
@@ -430,13 +433,13 @@
               </span>
             </div>
             <div>
-              <Button
-                ghost
+              <el-button
+                plain
                 size="small"
                 type="primary"
                 @click="clickLink(item, index, res)"
               >
-                {{ item.model === "hotzone" ? "绘制热区" : "选择链接" }}</Button
+                {{ item.model === "hotzone" ? "绘制热区" : "选择链接" }}</el-button
               >
             </div>
           </div>
@@ -451,7 +454,7 @@
           >
             <div class="decorate-view-title">外部链接</div>
             <div>
-              <Input v-model="item.url.url" style="width: 200px" />
+              <el-input v-model="item.url.url" style="width: 200px" />
             </div>
           </div>
 
@@ -468,7 +471,7 @@
       </div>
     </div>
 
-    <Button
+    <el-button
       v-if="
         res.type != 'tpl_ad_list' &&
         res.type != 'tpl_activity_list' &&
@@ -477,8 +480,8 @@
       "
       type="primary"
       @click="addDecorate(res.type, res)"
-      ghost
-      >添加</Button
+      plain
+      >添加</el-button
     >
 
     <liliDialog
@@ -487,31 +490,33 @@
       @selectedGoodsData="selectedGoodsData"
     ></liliDialog>
 
-    <Modal width="800px" title="选择分类" v-model="enableSelectCategory">
+    <el-dialog width="800px" title="选择分类" v-model="enableSelectCategory" append-to-body destroy-on-close>
       <categoryTemplate
         v-if="enableSelectCategory"
         @selected="confirmCategory"
       />
-    </Modal>
+    </el-dialog>
 
     <hotzone ref="hotzone" @changeZone="changeZone"></hotzone>
 
-    <Modal width="1200px" v-model="picModelFlag">
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-    </Modal>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+    </el-dialog>
   </div>
 </template>
 <script>
+import { CircleClose } from "@element-plus/icons-vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 import { modelData } from "./config";
 import hotzone from "@/components/hotzone";
-import ways from "@/components/lili-dialog/wap.js"; // 选择链接的类型
-import categoryTemplate from "@/components/lili-dialog/template/category"; // 选择链接的类型
+import ways from "@/components/lili-dialog/wap.js";
+import categoryTemplate from "@/components/lili-dialog/template/category";
 export default {
   components: {
     ossManage,
     hotzone,
     categoryTemplate,
+    CircleClose,
   },
   data() {
     return {
@@ -592,7 +597,7 @@ export default {
         list = [...newList, ...newVal];
       }
 
-      this.$set(this.res.options.list[0], "listWay", list);
+      this.res.options.list[0]["listWay"] = list;
     },
 
     // 轮播图排序
diff --git a/manager/src/views/page-decoration/wap/index.vue b/manager/src/views/page-decoration/wap/index.vue
index 861494b3..d9887e3e 100644
--- a/manager/src/views/page-decoration/wap/index.vue
+++ b/manager/src/views/page-decoration/wap/index.vue
@@ -13,15 +13,15 @@
             ghostClass: 'ghost',
           }"
         >
+          <template v-for="(model, index) in modelData" :key="index">
           <li
-            v-for="(model, index) in modelData"
             v-if="!model.drawer && !model.drawerPromotions"
-            :key="index"
             class="model-item"
           >
             <img src alt />
             <span>{{ model.name }}</span>
           </li>
+          </template>
         </draggable>
       </div>
 
@@ -48,14 +48,15 @@
                 :is="templates[element.type]"
                 :res="element.options"
               ></component>
-              <Icon
+              <el-icon
                 v-if="selected == index"
                 @click="closeComponent(index)"
-                color="#e1251b"
-                size="25"
                 class="close"
-                type="ios-close-circle"
-              />
+                :size="25"
+                color="#e1251b"
+              >
+                <CircleClose />
+              </el-icon>
             </div>
           </draggable>
         </div>
@@ -73,6 +74,7 @@
   </div>
 </template>
 <script>
+import { CircleClose } from "@element-plus/icons-vue";
 import templates from "./template/index";
 import Draggable from "vuedraggable";
 import { modelData } from "./config";
@@ -83,6 +85,7 @@ export default {
   components: {
     Draggable,
     decorate,
+    CircleClose,
   },
   data() {
     return {
@@ -169,7 +172,7 @@ export default {
     // 点击楼层装修
     handleComponent(val, index) {
       this.selected = index;
-      this.$set(this, "decorateData", val);
+      this["decorateData"] = val;
     },
     // 右侧栏回调
     handleDrawer(val) {
@@ -223,30 +226,27 @@ export default {
             }
           });
         }
-        this.$set(this.contentData.list, newIndex, {
+        this.contentData.list[newIndex] = {
           ...val,
           options: {
             ...this.contentData.list[newIndex].options,
           },
-          // 绑定键值
           model: val.type,
-        });
+        };
       } else {
         this.decorateData = "";
 
-        this.$set(this.contentData.list, newIndex, {
+        this.contentData.list[newIndex] = {
           ...val,
           options: {
             ...val.options,
           },
-
-          // 绑定键值
           model: val.type,
-        });
+        };
         this.contentData.list = JSON.parse(
           JSON.stringify(this.contentData.list)
         );
-        this.$set(this, "decorateData", this.contentData.list[newIndex]);
+        this["decorateData"] = this.contentData.list[newIndex];
       }
     },
 
@@ -254,15 +254,13 @@ export default {
     package(val, newIndex) {
       this.contentData.list[newIndex] = "";
       val = JSON.parse(JSON.stringify(val));
-      this.$set(this.contentData.list, newIndex, {
+      this.contentData.list[newIndex] = {
         ...val,
         options: {
           ...val.options,
         },
-
-        // 绑定键值
         model: val.type,
-      });
+      };
     },
     // 拖动
     handleContentlAdd(evt) {
diff --git a/manager/src/views/page-decoration/wap/navbar.vue b/manager/src/views/page-decoration/wap/navbar.vue
index 85c33830..cfd6bb24 100644
--- a/manager/src/views/page-decoration/wap/navbar.vue
+++ b/manager/src/views/page-decoration/wap/navbar.vue
@@ -3,54 +3,56 @@
   <div class="model-title">
     <div>店铺装修</div>
     <div class="btns">
-      <Button
+      <el-button
         @click="clickBtn(item)"
         size="small"
         v-for="(item, index) in way"
         :key="index"
         :type="item.selected ? 'primary' : ''"
-      >{{ item.title }}</Button>
+      >{{ item.title }}</el-button>
     </div>
     <div class="model-title-view-btn">
       <!-- TODO 后期会补全 目前版本暂无 -->
       <!-- <Poptip placement="bottom" width="100">
-        <Button size="default" @click="creatQrCode">预览模板</Button>
-        <div slot="content" class="default-view-content">
+        <el-button size="default" @click="creatQrCode">预览模板</el-button>
+        <template #content><div class="default-view-content">
           <div>临时预览</div>
           <div ref="qrCodeUrl"></div>
         </div>
-      </Poptip>-->
-      <Button size="default" type="default" v-if="hasCache" @click="clearCache">清空本地缓存</Button>
-      <Button size="default" type="primary" @click="handleSpinShow">保存模板</Button>
+      </template></el-popconfirm>-->
+      <el-button size="default" type="default" v-if="hasCache" @click="clearCache">清空本地缓存</el-button>
+      <el-button size="default" type="primary" @click="handleSpinShow">保存模板</el-button>
 
-      <Modal
+      <el-dialog
         title="保存中"
         v-model="saveDialog"
-        :closable="true"
-        :mask-closable="false"
-        :footer-hide="true"
+        :show-close="true"
+        :close-on-click-modal="false"
+        append-to-body
+        destroy-on-close
       >
         <div v-if="progress">
           <div class="model-item">
             模板名称
-            <Input style="width: 200px" v-model="submitWay.name"/>
+            <el-input style="width: 200px" v-model="submitWay.name" />
           </div>
           <div class="model-item">
             是否立即发布
-            <i-switch v-model="submitWay.pageShow">
-              <span slot="open">开</span>
-              <span slot="close">关</span>
-            </i-switch>
+            <el-switch
+              v-model="submitWay.pageShow"
+              active-text="开"
+              inactive-text="关"
+            />
           </div>
           <div class="model-item">
             将当前装修内容写入到本地缓存中，下次进入页面时可继续使用
-            <Button type="small" @click="witeLocalStore">写入</Button>
+            <el-button type="small" @click="witeLocalStore">写入</el-button>
           </div>
 
-          <Button type="primary" @click="save()">保存</Button>
+          <el-button type="primary" @click="save()">保存</el-button>
         </div>
-        <Progress v-else :percent="num" status="active"/>
-      </Modal>
+        <el-progress v-else :percentage="num" status="success" />
+      </el-dialog>
     </div>
   </div>
 </template>
diff --git a/manager/src/views/page-decoration/wap/style.scss b/manager/src/views/page-decoration/wap/style.scss
index 600b2f31..0da9c03f 100644
--- a/manager/src/views/page-decoration/wap/style.scss
+++ b/manager/src/views/page-decoration/wap/style.scss
@@ -84,7 +84,7 @@
   text-align: center;
   font-weight: bold;
   line-height: 2;
-  ::v-deep img {
+  :deep(img){
     margin: 0 auto;
   }
 }
diff --git a/manager/src/views/page-decoration/wap/template/tpl_banner.vue b/manager/src/views/page-decoration/wap/template/tpl_banner.vue
index e45bd27a..e4b9cfe1 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_banner.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_banner.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="layout">
-    <Carousel class="carousel" v-if="res"  autoplay :autoplay-speed="5000">
-      <CarouselItem v-for="(item, index) in res.list" :key="index">
+    <el-carousel class="carousel" v-if="res" autoplay :interval="5000" height="150px">
+      <el-carousel-item v-for="(item, index) in res.list" :key="index">
         <div>
           <img class="image-mode" :src="item.img" />
         </div>
-      </CarouselItem>
-    </Carousel>
+      </el-carousel-item>
+    </el-carousel>
   </div>
 </template>
 <script>
@@ -16,7 +16,7 @@ export default {
   watch: {
     res: {
       handler(newValue, oldValue) {
-          this.$set(this,'res',newValue);
+          this['res'] = newValue;
       },
       deep: true
     }
diff --git a/manager/src/views/page-decoration/wap/template/tpl_goods.vue b/manager/src/views/page-decoration/wap/template/tpl_goods.vue
index acebc0bb..c8ae39e9 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_goods.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_goods.vue
@@ -24,13 +24,14 @@
         :key="item_index"
       >
         <div class="goods-img">
-          <Icon
-            size="20"
+          <el-icon
+            :size="20"
             color="#e1251b"
             @click="closeGoods(item, item_index)"
             class="goods-icon"
-            type="ios-close-circle"
-          />
+          >
+            <CircleClose />
+          </el-icon>
           <img :src="item.img" alt />
         </div>
         <div class="goods-desc">
@@ -38,7 +39,7 @@
             {{ item.title }}
           </div>
           <div class="goods-bottom">
-            <div class="goods-price">￥{{ item.price | unitPrice }}</div>
+            <div class="goods-price">￥{{ $filters.unitPrice(item.price) }}</div>
           </div>
         </div>
       </div>
@@ -46,7 +47,9 @@
   </div>
 </template>
 <script>
+import { CircleClose } from "@element-plus/icons-vue";
 export default {
+  components: { CircleClose },
   data() {
     return {
       selected: {
diff --git a/manager/src/views/page-decoration/wap/template/tpl_search.vue b/manager/src/views/page-decoration/wap/template/tpl_search.vue
index f190bf6a..5be127fa 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_search.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_search.vue
@@ -1,12 +1,14 @@
 <template>
     <div class="layout">
         <div class="search">
-            <Icon type="ios-search" />{{res.list[0].title}}
+            <el-icon><Search /></el-icon>{{res.list[0].title}}
         </div>
     </div>
 </template>
 <script>
+import { Search } from "@element-plus/icons-vue";
 export default {
+    components: { Search },
     props: ['res']
 }
 </script>
diff --git a/manager/src/views/page-decoration/wap/wapList.vue b/manager/src/views/page-decoration/wap/wapList.vue
index bfc559d1..b3cbb984 100644
--- a/manager/src/views/page-decoration/wap/wapList.vue
+++ b/manager/src/views/page-decoration/wap/wapList.vue
@@ -1,172 +1,127 @@
 <template>
-  <div class="wrapper">
-    <Card class="category">
-      <div
-        :class="{ active: i == selectedIndex }"
-        class="category-item"
-        v-for="(typeItem, i) in pageTypes"
-        :key="typeItem.type"
-      >
-        <div @click="clickType(typeItem.type, i)">{{ typeItem.title }}</div>
+  <div class="search">
+    <el-card shadow="never">
+      <el-tabs v-model="params.pageType" class="page-type-tabs" @tab-change="handleTabChange">
+        <el-tab-pane
+          v-for="typeItem in pageTypes"
+          :key="typeItem.type"
+          :name="typeItem.type"
+          :label="typeItem.title"
+        />
+      </el-tabs>
+      <div class="operation mb_10">
+        <el-button type="primary" @click="handleAdd()">添加页面</el-button>
       </div>
-    </Card>
-    <Card class="content">
-      <Button type="primary" @click="handleAdd()">添加页面</Button>
-      <div class="list">
-        <Spin size="large" fix v-if="loading"></Spin>
-        <div class="item item-title">
-          <div>页面名称</div>
-          <div class="item-config">
-            <div>状态</div>
-            <div>操作</div>
-          </div>
-        </div>
-
-        <div class="item" v-for="(item, index) in list" :key="index">
-          <div>{{ item.name || "暂无模板昵称" }}</div>
-          <div class="item-config">
-            <i-switch v-model="item.pageShow" @on-change="changeSwitch(item)">
-              <span slot="open">开</span>
-              <span slot="close">关</span>
-            </i-switch>
-            <Button type="info" placement="right" @click="handleEdit(item)" size="small">修改</Button>
-            <Poptip confirm title="删除此模板？" @on-ok="handleDel(item)">
-              <Button type="error" size="small">删除</Button>
-            </Poptip>
-          </div>
-        </div>
-        <div class="no-more" v-if="list.length ==0">暂无更多模板</div>
+      <el-table v-loading="loading" :data="list" style="width: 100%">
+        <el-table-column prop="name" label="页面名称" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span v-if="row">{{ row.name || "暂无模板昵称" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="120" align="center">
+          <template #default="{ row }">
+            <el-switch
+              v-if="row"
+              v-model="row.pageShow"
+              inline-prompt
+              active-text="开"
+              inactive-text="关"
+              @change="changeSwitch(row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="140" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="handleEdit(row)">修改</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="confirmDel(row)">删除</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="params.pageNumber"
+          v-model:page-size="params.pageSize"
+          :total="total"
+          :page-sizes="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          background
+          @current-change="changePageNum"
+          @size-change="changePageSize"
+        />
       </div>
-      <Page
-        :total="total"
-        size="small"
-        @on-change="changePageNum"
-        :current="params.pageNumber"
-        :page-size="params.pageSize"
-        show-sizer
-        :page-size-opts="[20, 50, 100]"
-        @on-page-size-change="changePageSize"
-      />
-    </Card>
+    </el-card>
   </div>
 </template>
 <script>
 import * as API_Other from "@/api/other.js";
 export default {
-  // components: {region},
   data() {
     return {
-      selectedIndex: 0, // 装修那个页面的下标
-      columns: [
-        // 表头
-        {
-          title: "页面名称",
-          key: "name"
-        },
-        {
-          title: "状态"
-        },
-        {
-          title: "操作",
-          key: "action"
-        }
-      ],
-
-      loading: false, // 加载状态
+      loading: false,
       pageTypes: [
-        // 装修类型
-        {
-          type: "INDEX",
-          title: "首页"
-        },
-        {
-          type: "SPECIAL",
-          title: "专题",
-        },
-        //  {
-        //   type: "ALERT",
-        //   title: "开屏广告",
-        // },
-        // {
-        //   type: "OPEN_SCREEN_ANIMATION",
-        //   title: "app开屏页面",
-        // },
+        { type: "INDEX", title: "首页" },
+        { type: "SPECIAL", title: "专题" },
       ],
       params: {
-        // 请求参数
         pageNumber: 1,
         pageSize: 20,
         sort: "createTime",
         order: "desc",
         pageType: "INDEX",
-        pageClientType: "H5"
+        pageClientType: "H5",
       },
-      total: 0, // 页面数量
-      list: [] // 总数据
+      total: 0,
+      list: [],
     };
   },
-  watch: {
-    // params: {
-    //   handler(val) {
-    //     // this.pageNumber++;
-    //     this.init();
-    //   },
-    //   deep: true,
-    // },
-  },
   mounted() {
     this.init();
   },
   methods: {
-    // 切换tab
-     clickType(val, index) {
+    handleTabChange(val) {
       if (val == "ALERT") {
         this.$router.push({
           path: "/floorList/main",
           query: { pagetype: val },
         });
         return;
-      } else if (val == "OPEN_SCREEN_ANIMATION") {
+      }
+      if (val == "OPEN_SCREEN_ANIMATION") {
         this.$router.push({
           path: "/floorList/main",
           query: { pagetype: val },
         });
         return;
-      } else {
-        this.params.pageNumber = 1;
-        this.selectedIndex = index;
-        this.params.pageType = val;
-        this.init();
       }
+      this.params.pageNumber = 1;
+      this.params.pageType = val;
+      this.init();
     },
 
-    // 分页 修改页码
-    changePageNum (val) {
+    changePageNum(val) {
       this.params.pageNumber = val;
       this.init();
     },
-    // 是否发布
     changeSwitch(item) {
       this.loading = true;
-      API_Other.releasePageHome(item.id).then(res => {
+      API_Other.releasePageHome(item.id).then((res) => {
+        this.loading = false;
         if (res.result) {
-          this.loading = false;
           this.$Message.success("发布成功");
           this.init();
         }
-
-        this.init();
-
-        this.loading = false;
       });
     },
-    // 初始化数据
     init() {
       this.loading = true;
-      API_Other.getHomeList(this.params).then(res => {
-        if (!res.result) return false;
+      API_Other.getHomeList(this.params).then((res) => {
         this.loading = false;
-        res.result.records.forEach(item => {
+        if (!res.result) return false;
+        res.result.records.forEach((item) => {
           if (item.pageShow == "OPEN") {
             item.pageShow = true;
           } else {
@@ -177,7 +132,6 @@ export default {
         this.total = res.result.total;
       });
     },
-    // 装修楼层
     handleEdit(val) {
       this.$router.push({
         path: "/floorList/main",
@@ -189,89 +143,39 @@ export default {
         },
       });
     },
-    // 添加模板
     handleAdd() {
       this.$router.push({
         path: "/floorList/main",
         query: { pagetype: this.params.pageType },
       });
     },
-    // 分页 改变页数
     changePageSize(v) {
       this.params.pageNumber = 1;
       this.params.pageSize = v;
       this.init();
     },
-    // 删除模板
+    confirmDel(row) {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "删除此模板？",
+        onOk: () => this.handleDel(row),
+      });
+    },
     handleDel(val) {
       this.loading = true;
-      API_Other.removePageHome(val.id).then(res => {
+      API_Other.removePageHome(val.id).then((res) => {
+        this.loading = false;
         if (res.result) {
-          this.loading = false;
           this.init();
           this.$Message.success("删除成功");
         }
-
-        this.loading = false;
       });
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
-.category-item {
-  cursor: pointer;
-  padding: 4px;
-}
-.active {
-  background: #ededed;
-}
-.item-title {
-  background: #d7e7f5 !important;
-  height: 54px;
-}
-.no-more {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.wrapper {
-  background: #fff;
-  padding: 20px;
-  display: flex;
-}
-.category {
-  flex: 2;
-}
-.content {
-  flex: 8;
-}
-* {
-  margin: 5px;
-}
-.list {
-  min-height: 600px;
-  position: relative;
-}
-.item:nth-of-type(2) {
-  margin: 0 5px;
-}
-.item {
-  width: 100% !important;
-  padding: 0 4px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  > .item-config {
-    width: 180px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-  }
-}
-.item:nth-of-type(2n + 1) {
-  background: #f5f7fa;
+.page-type-tabs {
+  margin-bottom: 16px;
 }
 </style>
diff --git a/manager/src/views/page/article-manage/ArticleCategory.vue b/manager/src/views/page/article-manage/ArticleCategory.vue
index 134f145d..a89baef6 100644
--- a/manager/src/views/page/article-manage/ArticleCategory.vue
+++ b/manager/src/views/page/article-manage/ArticleCategory.vue
@@ -1,164 +1,108 @@
 <template>
   <div>
-    <Card>
+    <el-card>
       <div class="operation mb_10">
-        <Button @click="addParent" type="primary" icon="md-add"
-          >添加一级分类</Button
-        >
+        <el-button type="primary" @click="addParent">添加一级分类</el-button>
       </div>
-      <tree-table
-        ref="treeTable"
-        size="default"
-        :loading="loading"
+
+      <el-table
+        v-loading="loading"
         :data="tableData"
-        :columns="columns"
-        :border="true"
-        :show-index="false"
-        :is-fold="true"
-        :expand-type="false"
-        primary-key="id"
+        row-key="id"
+        border
+        default-expand-all
+        :tree-props="{ children: 'children' }"
+        style="width: 100%"
       >
-        <template slot="action" slot-scope="scope">
-          <a
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
-            @click="edit(scope.row)"
-          >编辑</a>
-          <span style="margin:0 8px;color:#dcdee2">|</span>
-          <a
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
-            @click="remove(scope.row)"
-          >删除</a>
-          <span v-show="scope.row.level != 1" style="margin:0 8px;color:#dcdee2">|</span>
-          <a
-            v-show="scope.row.level != 1"
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-            @click="addChildren(scope.row)"
-          >添加子分类</a>
-        </template>
-      </tree-table>
-    </Card>
-    <Modal
-      :title="modalTitle"
+        <el-table-column prop="articleCategoryName" label="分类名称" min-width="200" />
+        <el-table-column prop="sort" label="排序" width="120" />
+        <el-table-column label="操作" width="320" align="center">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="edit(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+              <template v-if="row.level != 1">
+                <span class="op-split">|</span>
+                <a class="link-text" @click="addChildren(row)">添加子分类</a>
+              </template>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog
       v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
     >
-      <Form
-        ref="form"
-        :model="formAdd"
-        :label-width="100"
-        :rules="formValidate"
-      >
-        <div v-if="showParent">
-          <FormItem label="上级分类" prop="parentId">
-            {{ parentTitle }}
-            <Input
-              v-model="formAdd.parentId"
-              clearable
-              style="width: 100%; display: none"
-            />
-          </FormItem>
-        </div>
-        <FormItem label="分类名称" prop="articleCategoryName">
-          <Input
-            v-model="formAdd.articleCategoryName"
-            clearable
-            style="width: 100%"
-          />
-        </FormItem>
-        <FormItem label="排序值" prop="sort">
-          <InputNumber v-model="formAdd.sort"></InputNumber>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="Submit"
-          >提交</Button
-        >
-      </div>
-    </Modal>
+      <el-form ref="form" :model="formAdd" label-width="100px" :rules="formValidate">
+        <el-form-item v-if="showParent" label="上级分类" prop="parentId">
+          {{ parentTitle }}
+          <el-input v-model="formAdd.parentId" style="display: none" />
+        </el-form-item>
+        <el-form-item label="分类名称" prop="articleCategoryName">
+          <el-input v-model="formAdd.articleCategoryName" clearable />
+        </el-form-item>
+        <el-form-item label="排序值" prop="sort">
+          <el-input-number v-model="formAdd.sort" style="width: 100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="Submit">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
+
 <script>
-import {
-  saveArticleCategory,
-  getArticleCategory,
-  delArticleCategory,
-  updateArticleCategory,
-} from "@/api/pages";
-import TreeTable from "@/components/tree-table/Table/Table";
-import uploadPicInput from "@/components/lili/upload-pic-input";
+import { saveArticleCategory, getArticleCategory, delArticleCategory, updateArticleCategory } from "@/api/pages";
 import { regular } from "@/utils";
+
 export default {
   name: "lili-components",
-  components: {
-    TreeTable,
-    uploadPicInput,
-  },
   data() {
     return {
-      submitLoading:false,
-      loading: false, // 加载状态
-      expandLevel: 1, // 展开的层级
-      modalType: 0, // 添加或编辑标识
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
-      showParent: false, // 是否展示上级菜单
-      parentTitle: "", // 父级菜单名称
+      submitLoading: false,
+      loading: false,
+      expandLevel: 1,
+      modalType: 0,
+      modalVisible: false,
+      modalTitle: "",
+      showParent: false,
+      parentTitle: "",
       formAdd: {
-        // 添加或编辑表单对象初始化数据
         parentId: "",
         sort: 1,
         level: 0,
         articleCategoryName: "",
       },
-      // 表单验证规则
       formValidate: {
         articleCategoryName: [regular.REQUIRED],
-        sort: [regular.REQUIRED,regular.INTEGER],
+        sort: [regular.REQUIRED, regular.INTEGER],
       },
-      columns: [
-        {
-          title: "分类名称",
-          key: "articleCategoryName",
-          witt: "100px",
-        },
-        {
-          title: "排序",
-          key: "sort",
-          width: "100px",
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          headerAlign: "center",
-          width: "400px",
-          type: "template",
-          template: "action",
-        },
-      ],
-      tableData: [], // 表格数据
+      tableData: [],
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getAllList();
     },
-    // 添加子分类
     addChildren(v) {
       this.modalType = 0;
       this.modalTitle = "添加子分类";
       this.formAdd.articleCategoryName = "";
       this.parentTitle = v.articleCategoryName;
-      this.formAdd.level = eval(v.level + "+1");
+      this.formAdd.level = Number(v.level) + 1;
       this.showParent = true;
       delete this.formAdd.id;
       this.formAdd.parentId = v.id;
       this.modalVisible = true;
     },
-    // 编辑分类
     edit(v) {
       this.modalType = 1;
       this.modalTitle = "编辑";
@@ -170,68 +114,55 @@ export default {
       this.showParent = false;
       this.modalVisible = true;
     },
-    // 添加一级分类
     addParent() {
       this.modalType = 0;
       this.modalTitle = "添加一级分类";
       this.parentTitle = "顶级分类";
       this.showParent = true;
-      this.$refs.form.resetFields();
+      this.$refs.form?.resetFields();
       delete this.formAdd.id;
       this.formAdd.parentId = 0;
       this.modalVisible = true;
     },
-    // 提交
     Submit() {
       this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          if (this.modalType === 0) {
-            // 添加 避免编辑后传入id等数据 记得删除
-            delete this.formAdd.id;
-            saveArticleCategory(this.formAdd).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("添加成功");
-
-                this.formAdd = {
-                  // 添加或编辑表单对象初始化数据
-                  parentId: "",
-                  sort: 1,
-                  level: 0,
-                  articleCategoryName: "",
-                };
-              } else {
-                // this.$Message.error(res.message);
-              }
-              this.getAllList();
-              this.modalVisible = false;
-            });
-          } else {
-            // 编辑
-            updateArticleCategory(this.formAdd, this.formAdd.id).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("修改成功");
-              } else {
-                // this.$Message.error(res.message);
-              }
-              this.getAllList();
-              this.modalVisible = false;
-              this.$refs.form.resetFields();
-            });
-          }
+        if (!valid) return;
+        this.submitLoading = true;
+        if (this.modalType === 0) {
+          delete this.formAdd.id;
+          saveArticleCategory(this.formAdd).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("添加成功");
+              this.formAdd = {
+                parentId: "",
+                sort: 1,
+                level: 0,
+                articleCategoryName: "",
+              };
+            }
+            this.getAllList();
+            this.modalVisible = false;
+          });
+        } else {
+          updateArticleCategory(this.formAdd, this.formAdd.id).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("修改成功");
+            }
+            this.getAllList();
+            this.modalVisible = false;
+            this.$refs.form.resetFields();
+          });
         }
       });
     },
-    // 删除分类
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
         content: "您确认要删除 " + v.articleCategoryName + " ?",
         loading: true,
         onOk: () => {
-          // 删除
           delArticleCategory(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -242,74 +173,17 @@ export default {
         },
       });
     },
-    // 获取分类数据
-    getAllList(newval) {
+    getAllList() {
       this.loading = true;
-      getArticleCategory().then((res) => {
-        this.loading = false;
-        if (res.success) {
-          // 仅展开指定级数 默认后台已展开所有
-          let expandLevel = this.expandLevel;
-          res.result.forEach(function (e) {
-            if (expandLevel == 1) {
-              if (e.level == 0) {
-                e.expand = false;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = false;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = false;
-                      }
-                    });
-                  }
-                });
-              }
-            } else if (expandLevel == 2) {
-              if (e.level == 0) {
-                e.expand = true;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = false;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = false;
-                      }
-                    });
-                  }
-                });
-              }
-            } else if (expandLevel == 3) {
-              if (e.level == 0) {
-                e.expand = true;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = true;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = false;
-                      }
-                    });
-                  }
-                });
-              }
-            }
-          });
-          this.tableData = res.result;
-        }
-      });
+      getArticleCategory()
+        .then((res) => {
+          if (res.success) {
+            this.tableData = res.result || [];
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
   },
   mounted() {
@@ -317,10 +191,18 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
-.article {
-  font-size: 16px;
-  font-weight: 400;
-  margin: 12px 0;
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
+.mb_10 {
+  margin-bottom: 10px;
 }
 </style>
diff --git a/manager/src/views/page/article-manage/HOTWORDS_HISTORY.vue b/manager/src/views/page/article-manage/HOTWORDS_HISTORY.vue
index c9fd2aaf..15c05535 100644
--- a/manager/src/views/page/article-manage/HOTWORDS_HISTORY.vue
+++ b/manager/src/views/page/article-manage/HOTWORDS_HISTORY.vue
@@ -1,134 +1,99 @@
 <template>
-  <div class="search">
-    <Card>
-      <Row class="operation">
-        <Button @click="add()" type="primary">设置今日热词</Button>
-      </Row>
-      <Row>
-        <p>
-          <Alert type="success">
-            这里展示今日系统中搜索前一百的搜索热词，分数为热词在排序系统中的分数，分数越高，可以在用户获取热词时进行优先展示（首页商品搜索栏下方推荐位）（分数可以填写负数，会降低推荐度）
-          </Alert>
-        </p>
-      </Row>
-
-      <div class="card-list">
-        <Card v-for="words in data" class="card-item" :key="words" onclick="">
-          <p>
-            <a href="#" slot="extra" @click.prevent="add(words)">{{ words }}</a>
-          </p>
-          <p slot="extra">
-            <a @click="deleteWords(words)">
-              <Icon type="md-close"/>
-            </a>
-          </p>
-        </Card>
-      </div>
-    </Card>
-    <Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500">
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="热词" prop="keywords">
-          <Input v-model="form.keywords" clearable style="width: 100%"/>
-        </FormItem>
-        <FormItem label="分数" prop="point">
-          <Input v-model="form.point" clearable style="width: 100%"/>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-        >提交
-        </Button
-        >
-      </div>
-    </Modal>
+  <div class="search box">
+    <el-card>
+      <el-date-picker
+        v-model="params.date"
+        type="date"
+        placeholder="选择查看日期"
+        value-format="YYYY-MM-DD"
+        :disabled-date="disabledDate"
+        style="width: 200px"
+        @change="search"
+      />
+      <el-alert
+        class="mt_10"
+        type="success"
+        :closable="false"
+        show-icon
+        title="这里展示历史某一天的热词数据统计，可根据需求配置每日持久化多少条数据。"
+      />
+      <div id="container"></div>
+    </el-card>
   </div>
 </template>
 
 <script>
-import {getHotWords, setHotWords, deleteHotWords} from "@/api/index";
-
-import {regular} from "@/utils";
+import { Chart } from "@antv/g2";
+import { getHotWordsHistory } from "@/api/index";
+import { Message } from "@/utils/message";
 
 export default {
-  name: "hotWords",
-  components: {},
+  name: "HOTWORDS_HISTORY",
   data() {
     return {
-      submitLoading: false,
-      modalTitle: "",
-      loading: true, // 表单加载状态
-      modalVisible: false, //弹出框
-      form: {
-        keywords: "",
-        point: 0,
-      },
-      data: [], // 表单数据
-
-      // 表单验证规则
-      formValidate: {
-        keywords: [regular.REQUIRED, regular.VARCHAR20],
-        point: [regular.REQUIRED, regular.NUMBER],
+      params: {
+        date: "",
       },
+      hotWordsChart: null,
+      hotWordsData: [],
+      endMonth: null,
     };
   },
+  created() {
+    const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000);
+    this.params.date = this.$filters.unixToDate(Math.floor(yesterday.getTime() / 1000), "yyyy-MM-dd");
+  },
   methods: {
-    init() {
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getHotWords().then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result;
-        }
-      });
-      this.loading = false;
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          setHotWords(this.form).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-              this.modalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    //设置热词优先
-    add(words) {
-      this.modalType = 0;
-      this.modalTitle = "设置热词";
-      if (words) {
-        this.form.keywords = words;
-      } else {
-        this.form.keywords = "";
+    disabledDate(date) {
+      if (this.endMonth) {
+        const endDate = this.getDate(this.endMonth);
+        return (date && date > endDate) || date > new Date();
       }
-      this.form.point = 1;
-      this.modalVisible = true;
+      return date && date > new Date();
     },
-    deleteWords(words) {
-      this.$Modal.confirm({
-        title: "是否确定删除热词",
-        content: "<p>您确定要删除此热词吗？</p>",
-        okText: "确实",
-        cancelText: "取消",
-        onOk: () => {
-          let params = {words: words}
-          deleteHotWords(params).then((res) => {
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.getDataList();
-            }
-          });
+    getDate(monthStr) {
+      const [year, month] = monthStr.split("-");
+      return new Date(year, month, 0);
+    },
+    async search(val) {
+      if (val) {
+        this.params.date = val;
+      }
+      const res = await getHotWordsHistory(this.params);
+      if (res.success) {
+        this.hotWordsData = res.result || [];
+        if (this.hotWordsChart) {
+          this.hotWordsChart.changeData(this.hotWordsData);
+          this.hotWordsChart.render();
+        }
+        if (!this.hotWordsData.length) {
+          Message.error("暂无数据");
+        }
+      }
+    },
+    init() {
+      const chart = new Chart({
+        container: "container",
+        autoFit: true,
+        height: 500,
+        padding: [50, 20, 50, 20],
+      });
+      chart.scale("score", {
+        alias: "搜索次数",
+      });
+      chart.axis("keywords", {
+        tickLine: {
+          alignTick: false,
         },
       });
+      chart.axis("score", false);
+      chart.tooltip({
+        showMarkers: false,
+      });
+      chart.interval().position("keywords*score").color("#f59b99");
+      chart.interaction("element-active");
+      this.hotWordsChart = chart;
+      this.search();
     },
   },
   mounted() {
@@ -136,22 +101,9 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.card-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
 
-.card-item {
-  min-width: 100px;
-  margin: 20px;
-}
-</style>
-<style>
-.ivu-card-extra {
-  right: 3px;
-  top: 15px;
-  z-index: 99;
+<style lang="scss" scoped>
+.box {
+  min-height: 400px;
 }
 </style>
diff --git a/manager/src/views/page/article-manage/HOTWORDS_TODAY.vue b/manager/src/views/page/article-manage/HOTWORDS_TODAY.vue
index c9fd2aaf..d8ba1c8e 100644
--- a/manager/src/views/page/article-manage/HOTWORDS_TODAY.vue
+++ b/manager/src/views/page/article-manage/HOTWORDS_TODAY.vue
@@ -1,71 +1,69 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation">
-        <Button @click="add()" type="primary">设置今日热词</Button>
-      </Row>
-      <Row>
-        <p>
-          <Alert type="success">
-            这里展示今日系统中搜索前一百的搜索热词，分数为热词在排序系统中的分数，分数越高，可以在用户获取热词时进行优先展示（首页商品搜索栏下方推荐位）（分数可以填写负数，会降低推荐度）
-          </Alert>
-        </p>
-      </Row>
+    <el-card>
+      <div class="operation mb_10">
+        <el-button type="primary" @click="add()">设置今日热词</el-button>
+      </div>
+      <el-alert
+        type="success"
+        :closable="false"
+        show-icon
+        title="这里展示今日系统中搜索前一百的搜索热词，分数为热词在排序系统中的分数，分数越高，可以在用户获取热词时进行优先展示（首页商品搜索栏下方推荐位）（分数可以填写负数，会降低推荐度）"
+      />
 
       <div class="card-list">
-        <Card v-for="words in data" class="card-item" :key="words" onclick="">
-          <p>
-            <a href="#" slot="extra" @click.prevent="add(words)">{{ words }}</a>
-          </p>
-          <p slot="extra">
-            <a @click="deleteWords(words)">
-              <Icon type="md-close"/>
-            </a>
-          </p>
-        </Card>
+        <el-card v-for="words in data" :key="words" class="card-item" shadow="hover">
+          <div class="card-item-inner">
+            <a href="#" class="word-link" @click.prevent="add(words)">{{ words }}</a>
+            <el-icon class="close-icon" @click="deleteWords(words)"><Close /></el-icon>
+          </div>
+        </el-card>
       </div>
-    </Card>
-    <Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500">
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="热词" prop="keywords">
-          <Input v-model="form.keywords" clearable style="width: 100%"/>
-        </FormItem>
-        <FormItem label="分数" prop="point">
-          <Input v-model="form.point" clearable style="width: 100%"/>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-        >提交
-        </Button
-        >
-      </div>
-    </Modal>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+        <el-form-item label="热词" prop="keywords">
+          <el-input v-model="form.keywords" clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="分数" prop="point">
+          <el-input v-model="form.point" clearable style="width: 100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import {getHotWords, setHotWords, deleteHotWords} from "@/api/index";
-
-import {regular} from "@/utils";
+import { Close } from "@element-plus/icons-vue";
+import { getHotWords, setHotWords, deleteHotWords } from "@/api/index";
+import { regular } from "@/utils";
 
 export default {
-  name: "hotWords",
-  components: {},
+  name: "HOTWORDS_TODAY",
+  components: { Close },
   data() {
     return {
       submitLoading: false,
       modalTitle: "",
-      loading: true, // 表单加载状态
-      modalVisible: false, //弹出框
+      loading: true,
+      modalVisible: false,
       form: {
         keywords: "",
         point: 0,
       },
-      data: [], // 表单数据
-
-      // 表单验证规则
+      data: [],
       formValidate: {
         keywords: [regular.REQUIRED, regular.VARCHAR20],
         point: [regular.REQUIRED, regular.NUMBER],
@@ -84,7 +82,6 @@ export default {
           this.data = res.result;
         }
       });
-      this.loading = false;
     },
     handleSubmit() {
       this.$refs.form.validate((valid) => {
@@ -101,27 +98,20 @@ export default {
         }
       });
     },
-    //设置热词优先
     add(words) {
-      this.modalType = 0;
       this.modalTitle = "设置热词";
-      if (words) {
-        this.form.keywords = words;
-      } else {
-        this.form.keywords = "";
-      }
+      this.form.keywords = words || "";
       this.form.point = 1;
       this.modalVisible = true;
     },
     deleteWords(words) {
       this.$Modal.confirm({
         title: "是否确定删除热词",
-        content: "<p>您确定要删除此热词吗？</p>",
-        okText: "确实",
+        content: "您确定要删除此热词吗？",
+        okText: "确定",
         cancelText: "取消",
         onOk: () => {
-          let params = {words: words}
-          deleteHotWords(params).then((res) => {
+          deleteHotWords({ words }).then((res) => {
             if (res.success) {
               this.$Message.success("删除成功");
               this.getDataList();
@@ -136,22 +126,38 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .card-list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  margin-top: 16px;
 }
 
 .card-item {
   min-width: 100px;
-  margin: 20px;
-}
-</style>
-<style>
-.ivu-card-extra {
-  right: 3px;
-  top: 15px;
-  z-index: 99;
+  margin: 10px;
+}
+
+.card-item-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.word-link {
+  color: var(--el-color-primary);
+  text-decoration: none;
+}
+
+.close-icon {
+  cursor: pointer;
+  color: var(--el-text-color-secondary);
+
+  &:hover {
+    color: var(--el-color-danger);
+  }
 }
 </style>
diff --git a/manager/src/views/page/article-manage/HOTWORD_SETTING.vue b/manager/src/views/page/article-manage/HOTWORD_SETTING.vue
index f0ba95f3..e2fa8334 100644
--- a/manager/src/views/page/article-manage/HOTWORD_SETTING.vue
+++ b/manager/src/views/page/article-manage/HOTWORD_SETTING.vue
@@ -1,53 +1,91 @@
 <template>
   <div class="layout">
-    <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
-
-      <FormItem class="label-item" v-for="(point,index) in  formValidate.pointSettingItems" :key="index"
-                :label="'签到设置'+(index+1)">
-        <div class="label-item">
-
-          <InputNumber :min="1" v-model="point.day"></InputNumber>
-
-          <InputNumber :min="0" v-model="point.point"></InputNumber>
-
-          <Button ghost type="error" @click="delSign(point,index)">删除</Button>
-          <span class="ml_10">签到<span class="theme_color">{{ point.day }}</span>天，赠送<span
-            class="theme_color">{{ point.point }}</span>积分</span>
+    <el-form
+      ref="formValidate"
+      label-width="150px"
+      label-position="right"
+      :model="formValidate"
+      :rules="ruleValidate"
+    >
+      <el-form-item label="热词默认配置" prop="hotWordsSettingItems">
+        <div
+          class="item-label"
+          v-for="(item, index) in formValidate.hotWordsSettingItems"
+          :key="index"
+        >
+          <div>
+            <div class="item-keyword">
+              <div>热词：</div>
+              <el-input v-model="item.keywords" />
+            </div>
+            <div class="item-score">
+              <div>分数：</div>
+              <el-input-number :max="5" :min="0" v-model="item.score" />
+            </div>
+          </div>
+          <div>
+            <el-button type="primary" @click="formValidate.hotWordsSettingItems.splice(index, 1)">
+              删除
+            </el-button>
+          </div>
         </div>
+        <el-button @click="addSetItem">添加配置</el-button>
+      </el-form-item>
+      <el-form-item label="每日持久化热词数量" prop="saveNum">
+        <el-input-number :min="0" v-model="formValidate.saveNum" />
+      </el-form-item>
 
-      </FormItem>
-      <FormItem label="操作：">
-        <Button @click="addSign">新增签到</Button>
-      </FormItem>
       <div class="label-btns">
-        <Button type="primary" @click="submit('formValidate')">保存</Button>
+        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
       </div>
-    </Form>
+    </el-form>
   </div>
 </template>
 
 <script>
-import {setSetting} from "@/api/index";
+import { setSetting } from "@/api/index";
 
 export default {
+  props: ["res", "type"],
   data() {
     return {
-      formValidate: {}, // 表单数据
+      ruleValidate: {},
+      formValidate: {
+        saveNum: 1,
+        hotWordsSettingItems: [
+          {
+            keywords: "",
+            score: 1,
+          },
+        ],
+      },
     };
   },
-  props: ["res", "type"],
   created() {
     this.init();
   },
   methods: {
-    // 保存
-    submit(name) {
-      let that = this;
-      this.setupSetting();
+    addSetItem() {
+      if (this.formValidate.hotWordsSettingItems.length >= 5) {
+        this.$Message.error("最多5个热词项");
+      } else {
+        this.formValidate.hotWordsSettingItems.push({
+          keywords: "",
+          score: 1,
+        });
+      }
+    },
+    submit(name) {
+      this.$refs[name].validate((valid) => {
+        if (valid) {
+          this.setupSetting();
+        } else {
+          this.$Message.error("请正确填写内容!");
+        }
+      });
     },
-    // 保存设置
     setupSetting() {
-      setSetting(this.type, this.formValidate).then((res) => {
+      setSetting(this.type || "HOT_WORDS", this.formValidate).then((res) => {
         if (res.success) {
           this.$Message.success("保存成功!");
         } else {
@@ -55,52 +93,14 @@ export default {
         }
       });
     },
-    delSign(item, index) {
-      this.formValidate.pointSettingItems.splice(index, 1);
-    },
-    addSign() {
-      if (this.formValidate.pointSettingItems.length >= 5) {
-        this.$Message.error({
-          content: "最多设置5项签到设置",
-        });
-        return false;
-      }
-      this.formValidate.pointSettingItems.push({
-        point: "0",
-        day: this.formValidate.pointSettingItems.length,
-      });
-    },
-    // 实例化数据
     init() {
-      this.res = JSON.parse(this.res);
-      Object.keys(this.res).map((item) => {
-        if (item == "pointSettingItems") {
-          return false;
-        }
-        this.res[item] += "";
-      });
-
-      this.$set(this, "formValidate", {...this.res});
-
-      Object.keys(this.formValidate).forEach((item) => {
-        this.ruleValidate[item] = [
-          {
-            required: true,
-            message: "请填写必填项",
-            trigger: "blur",
-          },
-          {
-            validator: (rule, value, callback) => {
-              if (value < 0) {
-                callback(new Error("不能输入负数！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "change",
-          },
-        ];
-      });
+      if (!this.res) {
+        return;
+      }
+      const parsed = typeof this.res === "string" ? JSON.parse(this.res) : this.res;
+      if (parsed.hotWordsSettingItems) {
+        this.formValidate = { ...parsed };
+      }
     },
   },
 };
@@ -109,37 +109,27 @@ export default {
 <style lang="scss" scoped>
 @import "./style.scss";
 
-.label-item {
+.item-label {
+  border-bottom: 1px solid #ededed;
+  margin-bottom: 10px;
   display: flex;
+  align-items: center;
+  width: 500px;
+  justify-content: space-between;
+}
 
-  > .ivu-input-number {
-    width: 100px;
-    margin-right: 5px;
-  }
+.item-keyword,
+.item-score {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
 
-  > .ivu-input-number:nth-last-of-type(1) {
-    width: 150px;
-    margin-right: 5px;
-  }
-
-  > .ivu-input {
-    width: 100px;
-    margin: 0 10px;
+  > div {
+    margin-right: 20px;
   }
 }
 
-::v-deep .ivu-input {
-  width: 70px !important;
-}
-
-.ivu-input-wrapper {
-  width: 70px;
-  margin-right: 10px;
-}
-
-.label-btns {
-  ::v-deep .ivu-btn {
-    margin-right: 10px;
-  }
+.item-keyword .el-input {
+  width: 200px;
 }
 </style>
diff --git a/manager/src/views/page/article-manage/articleList.vue b/manager/src/views/page/article-manage/articleList.vue
index 851351c7..4feaf2f6 100644
--- a/manager/src/views/page/article-manage/articleList.vue
+++ b/manager/src/views/page/article-manage/articleList.vue
@@ -1,138 +1,146 @@
 <template>
   <div class="wrapper">
-    <Row>
-      <Col style="height: 100%" span="4">
-        <Card class="article-category mr_10">
-          <Tree :data="treeData" @on-select-change="handleCateChange"></Tree>
-        </Card>
-      </Col>
-      <Col span="20">
-        <Card class="article-detail">
-          <Row @keydown.enter.native="handleSearch">
-            <Form
-              ref="searchForm"
-              :model="searchForm"
-              inline
-              :label-width="70"
-              style="width: 100%"
-              class="search-form"
-            >
-              <Form-item label="文章标题" prop="title">
-                <Input
-                  type="text"
-                  v-model="searchForm.title"
-                  placeholder="请输入文章标题"
-                  clearable
-                  style="width: 200px"
+    <el-row :gutter="10">
+      <el-col :span="4" style="height: 100%">
+        <el-card class="article-category mr_10">
+          <el-tree
+            :data="treeData"
+            :props="{ label: 'title', children: 'children' }"
+            node-key="value"
+            highlight-current
+            default-expand-all
+            @node-click="handleCateChange"
+          />
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card class="article-detail">
+          <el-form
+            ref="searchForm"
+            :model="searchForm"
+            inline
+            label-width="70px"
+            style="width: 100%"
+            class="search-form"
+            @keyup.enter="handleSearch"
+          >
+            <el-form-item label="文章标题" prop="title">
+              <el-input
+                v-model="searchForm.title"
+                placeholder="请输入文章标题"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+            </el-form-item>
+          </el-form>
+
+          <div class="operation padding-row">
+            <el-button v-if="!selected" type="primary" @click="add">添加</el-button>
+          </div>
+
+          <el-table ref="table" v-loading="loading" border :data="data" style="width: 100%">
+            <el-table-column prop="articleCategoryName" label="分类名称" width="150" />
+            <el-table-column prop="title" label="文章标题" min-width="200" show-overflow-tooltip />
+            <el-table-column label="是否显示" width="100">
+              <template #default="{ row }">
+                <el-switch
+                  v-if="row"
+                  v-model="row.openStatus"
+                  inline-prompt
+                  active-text="展示"
+                  inactive-text="隐藏"
+                  @change="changeSwitch(row)"
                 />
-              </Form-item>
-              <Button
-                @click="handleSearch"
-                type="primary"
-                icon="ios-search"
-                class="search-btn"
-                >搜索</Button
-              >
-            </Form>
-          </Row>
-          <Row class="operation padding-row">
-            <Button @click="add" v-if="!selected" type="primary">添加</Button>
-          </Row>
-          <Table
-            :loading="loading"
-            border
-            :columns="columns"
-            :data="data"
-            ref="table"
-          >
-            <!-- 页面展示 -->
-            <template slot="openStatusSlot" slot-scope="scope">
-              <div></div>
-              <i-switch
-                size="large"
-                v-model="scope.row.openStatus"
-                @on-change="changeSwitch(scope.row)"
-              >
-                <span slot="open">展示</span>
-                <span slot="close">隐藏</span>
-              </i-switch>
-            </template>
-          </Table>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page
-              :current="searchForm.pageNumber"
+              </template>
+            </el-table-column>
+            <el-table-column prop="sort" label="排序" width="100" />
+            <el-table-column label="操作" width="230" align="center">
+              <template #default="{ row, $index }">
+                <template v-if="row">
+                  <a
+                    v-if="selected"
+                    class="link-text"
+                    @click="selectRow(row, $index)"
+                  >
+                    {{ selectedIndex == $index ? "已选" : "选择" }}
+                  </a>
+                  <span v-if="selected" class="op-split">|</span>
+                  <a class="link-text" @click="edit(row)">编辑</a>
+                  <span class="op-split">|</span>
+                  <a class="link-text" @click="remove(row)">删除</a>
+                </template>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <div class="mt_10" style="display: flex; justify-content: flex-end">
+            <el-pagination
+              v-model:current-page="searchForm.pageNumber"
+              v-model:page-size="searchForm.pageSize"
+              :page-sizes="[20, 50, 100]"
               :total="total"
-              :page-size="searchForm.pageSize"
-              @on-change="changePage"
-              @on-page-size-change="changePageSize"
-              :page-size-opts="[20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
               size="small"
-              show-total
-              show-elevator
-            >
-            </Page>
-          </Row>
-        </Card>
-      </Col>
-    </Row>
-    <template v-if="!selected">
-      <Modal
-        :title="modalTitle"
-        v-model="modalVisible"
-        :mask-closable="false"
-        :width="1100"
-      >
-        <Form ref="form" :model="form" :label-width="100">
-          <FormItem label="文章标题" prop="title">
-            <Input v-model="form.title" clearable style="width: 40%" />
-          </FormItem>
-          <FormItem label="文章分类" prop="categoryId">
-            <Select
-              v-model="treeValue"
-              placeholder="请选择"
-              clearable
-              style="width: 180px"
-            >
-              <Option v-if="treeValue" :value="treeValue" style="display: none"
-                >{{ treeValue }}
-              </Option>
-              <Tree
-                :data="treeDataDefault"
-                @on-select-change="handleCheckChange"
-              ></Tree>
-            </Select>
-          </FormItem>
-          <FormItem label="文章排序" prop="sort">
-            <Input
-              type="number"
-              v-model="form.sort"
-              clearable
-              style="width: 10%"
+              @current-change="changePage"
+              @size-change="changePageSize"
             />
-          </FormItem>
-          <FormItem class="form-item-view-el" label="文章内容" prop="content">
-              <tinymec
-                ref="editor"
-                openXss
-                v-model="form.content"
-                v-if="modalVisible"
-              ></tinymec>
-          </FormItem>
-          <FormItem label="是否展示" prop="openStatus">
-            <i-switch size="large" v-model="form.openStatus">
-              <span slot="open">展示</span>
-              <span slot="close">隐藏</span>
-            </i-switch>
-          </FormItem>
-        </Form>
-        <div slot="footer">
-          <Button type="text" @click="modalVisible = false">取消</Button>
-          <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-            >提交</Button
-          >
-        </div>
-      </Modal>
-    </template>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-dialog
+      v-if="!selected"
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="1100px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form ref="form" :model="form" label-width="100px">
+        <el-form-item label="文章标题" prop="title">
+          <el-input v-model="form.title" clearable style="width: 40%" />
+        </el-form-item>
+        <el-form-item label="文章分类" prop="categoryId">
+          <el-tree-select
+            v-model="form.categoryId"
+            :data="treeDataDefault"
+            :props="{ label: 'title', value: 'value', children: 'children' }"
+            placeholder="请选择"
+            clearable
+            check-strictly
+            style="width: 180px"
+            @change="handleCategoryChange"
+          />
+        </el-form-item>
+        <el-form-item label="文章排序" prop="sort">
+          <el-input v-model="form.sort" type="number" clearable style="width: 10%" />
+        </el-form-item>
+        <el-form-item class="form-item-view-el" label="文章内容" prop="content">
+          <tinymec
+            v-if="modalVisible"
+            ref="editor"
+            open-xss
+            v-model="form.content"
+          />
+        </el-form-item>
+        <el-form-item label="是否展示" prop="openStatus">
+          <el-switch
+            v-model="form.openStatus"
+            inline-prompt
+            active-text="展示"
+            inactive-text="隐藏"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -147,9 +155,10 @@ import {
   updateArticleStatus,
 } from "@/api/pages";
 import tinymec from "@/components/editor/index.vue";
+
 export default {
   components: {
-     tinymec: tinymec,
+    tinymec,
   },
   props: {
     selected: {
@@ -159,23 +168,21 @@ export default {
   },
   data() {
     return {
-      selectedIndex: 99999, // 已选下标
-      loading: true, // 表单加载状态
-      modalType: 0, // 添加或编辑标识
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
+      selectedIndex: 99999,
+      loading: true,
+      modalType: 0,
+      modalVisible: false,
+      modalTitle: "",
       treeDataDefault: [],
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          categoryId: "",
-        },
-      searchTreeValue: "", // 切换
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        categoryId: "",
+      },
+      searchTreeValue: "",
       form: {
-        // 添加或编辑表单对象初始化数据
         openStatus: false,
         title: "",
         categoryId: "",
@@ -183,111 +190,12 @@ export default {
         content: "",
         id: "",
       },
-      list: [], // 列表
-      treeValue: "", // 选择的分类
-      //树结构
+      list: [],
+      treeValue: "",
       treeData: [],
-      submitLoading: false, // 添加或编辑提交状态
-      columns: [
-        // 表头
-        {
-          title: "分类名称",
-          key: "articleCategoryName",
-          width: 150,
-        },
-        {
-          title: "文章标题",
-          key: "title",
-          minWidth: 200,
-          tooltip: true,
-        },
-        {
-          title: "是否显示",
-          key: "openStatus",
-          width: 100,
-          slot: "openStatusSlot",
-        },
-        {
-          title: "排序",
-          key: "sort",
-          width: 100,
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-
-          width: 230,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px",
-                    display: this.selected ? "" : "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.selectedIndex = params.index;
-                      this.$emit("callbacked", params.row);
-                    },
-                  },
-                },
-                this.selectedIndex == params.index ? "已选" : "选择"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px",
-                  },
-                  on: {
-                    click: () => {
-                      this.edit(params.row);
-                    },
-                  },
-                },
-                "编辑"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      submitLoading: false,
+      data: [],
+      total: 0,
     };
   },
   watch: {
@@ -305,68 +213,69 @@ export default {
     },
   },
   methods: {
-    // 初始化数据
     init() {
       this.getDataList();
       this.getAllList(0);
     },
-    // 选择分类回调
+    selectRow(row, index) {
+      this.selectedIndex = index;
+      this.$emit("callbacked", row);
+    },
     handleCateChange(data) {
-      let { value, title } = data[0];
-      this.list.push({
-        value,
-        title,
-      });
+      if (!data) return;
+      const { value, title } = data;
+      this.list.push({ value, title });
       this.searchForm.categoryId = value;
       this.searchTreeValue = title;
     },
-    //是否展示文章
     changeSwitch(v) {
-      let params = {
-        status: v.openStatus,
-      };
+      const params = { status: v.openStatus };
       updateArticleStatus(v.id, params).then((res) => {
         this.submitLoading = false;
         if (res.success) {
         }
       });
     },
-    // 文章分类的选择事件
+    handleCategoryChange(value) {
+      this.form.categoryId = value;
+      const findTitle = (nodes, id) => {
+        for (const node of nodes || []) {
+          if (node.value === id) return node.title;
+          const childTitle = findTitle(node.children, id);
+          if (childTitle) return childTitle;
+        }
+        return "";
+      };
+      this.treeValue = findTitle(this.treeDataDefault, value);
+    },
     handleCheckChange(data) {
       let value = "";
       let title = "";
       this.list = [];
-      data.forEach((item, index) => {
+      data.forEach((item) => {
         value += `${item.value},`;
         title += `${item.title},`;
       });
       value = value.substring(0, value.length - 1);
       title = title.substring(0, title.length - 1);
-      this.list.push({
-        value,
-        title,
-      });
+      this.list.push({ value, title });
       this.form.categoryId = value;
       this.treeValue = title;
     },
-    // 改变页数
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
-    // 改变页码
     changePageSize(v) {
-      this.selected.pageNumber = 1;
+      this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索列表
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 获取全部文章分类
     getAllList(parent_id) {
       this.loading = true;
       getArticleCategory(parent_id).then((res) => {
@@ -380,28 +289,25 @@ export default {
             children: [],
             id: "0",
             categoryId: 0,
+            value: "0",
           });
         }
       });
     },
-    // 文章分类格式化方法
     getTree(tree = []) {
-      let arr = [];
+      const arr = [];
       if (!!tree && tree.length !== 0) {
         tree.forEach((item) => {
-          let obj = {};
+          const obj = {};
           obj.title = item.articleCategoryName;
           obj.value = item.id;
-          obj.attr = item.articleCategoryName; // 其他你想要添加的属性
-          obj.expand = false;
-          obj.selected = false;
-          obj.children = this.getTree(item.children); // 递归调用
+          obj.attr = item.articleCategoryName;
+          obj.children = this.getTree(item.children);
           arr.push(obj);
         });
       }
       return arr;
     },
-    // 获取文章列表
     getDataList(val) {
       if (val) this.form = {};
       this.loading = true;
@@ -409,7 +315,6 @@ export default {
         this.loading = false;
         if (res.success) {
           this.total = res.result.total;
-          //为了在是否展示一列展示开关 需要改一下数据类型，最终提交再次更改
           this.data = [];
           if (res.result.records.length > 0) {
             this.data = res.result.records;
@@ -419,13 +324,11 @@ export default {
       this.total = this.data?.length;
       this.loading = false;
     },
-    // 添加文章
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
           this.submitLoading = true;
           if (this.modalType === 0) {
-            // 添加 避免编辑后传入id等数据 记得删除
             delete this.form.id;
             saveArticle(this.form).then((res) => {
               this.submitLoading = false;
@@ -436,7 +339,6 @@ export default {
               }
             });
           } else {
-            // 编辑
             updateArticle(this.form).then((res) => {
               this.submitLoading = false;
               if (res.success) {
@@ -449,30 +351,24 @@ export default {
         }
       });
     },
-    // 添加文章modal
     add() {
       this.modalType = 0;
       this.modalTitle = "添加文章";
       this.treeValue = "";
-
       this.form = {
         sort: 1,
         content: "",
       };
-      this.$refs.form.resetFields();
+      this.$refs.form?.resetFields();
       delete this.form.id;
       this.modalVisible = true;
     },
-    // 编辑文章modal
     edit(data) {
       this.modalType = 1;
       this.modalTitle = "编辑文章";
       this.treeValue = "";
-      this.form = {
-        content: "",
-      };
-      this.$refs.form.resetFields();
-
+      this.form = { content: "" };
+      this.$refs.form?.resetFields();
       seeArticle(data.id).then((res) => {
         if (res.result) {
           this.modalVisible = true;
@@ -486,14 +382,12 @@ export default {
         }
       });
     },
-    // 删除文章
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
         content: "您确认要删除么?",
         loading: true,
         onOk: () => {
-          // 删除
           delArticle(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
diff --git a/manager/src/views/page/article-manage/hotWords.vue b/manager/src/views/page/article-manage/hotWords.vue
index 450d4c39..e5d016b6 100644
--- a/manager/src/views/page/article-manage/hotWords.vue
+++ b/manager/src/views/page/article-manage/hotWords.vue
@@ -1,17 +1,22 @@
 <template>
   <div class="search">
-    <Card>
-      <Tabs @on-click="handleClickTab">
-        <TabPane
+    <el-card>
+      <el-tabs v-model="currentTemplate">
+        <el-tab-pane
           v-for="(item, index) in templatesWay"
           :key="index"
-          :name="item.template"
           :label="item.label"
+          :name="item.template"
         >
-          <components v-if="item.template == currentTemplate" :is="currentTemplate"></components>
-        </TabPane>
-      </Tabs>
-    </Card>
+          <todayHotWords v-if="item.template === 'todayHotWords' && currentTemplate === 'todayHotWords'" />
+          <historyHotWords v-if="item.template === 'historyHotWords' && currentTemplate === 'historyHotWords'" />
+          <statisticsHotWords
+            v-if="item.template === 'statisticsHotWords' && currentTemplate === 'statisticsHotWords'"
+          />
+          <setupHotWords v-if="item.template === 'setupHotWords' && currentTemplate === 'setupHotWords'" />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
   </div>
 </template>
 
@@ -20,52 +25,27 @@ import todayHotWords from "./template/todayHotWords";
 import historyHotWords from "./template/historyHotWords";
 import setupHotWords from "./template/setupHotWords";
 import statisticsHotWords from "./template/statisticsHotWords";
+
 export default {
   name: "hotWords",
   components: {
     todayHotWords,
     historyHotWords,
     setupHotWords,
-    statisticsHotWords
+    statisticsHotWords,
   },
   data() {
     return {
-      // 模版集合key value
       templatesWay: [
-        {
-          template: "todayHotWords",
-          label: "今日热词",
-        },
-        {
-          template: "historyHotWords",
-          label: "历史热词",
-        },
-        {
-          template: "statisticsHotWords",
-          label: "热词统计",
-        },
-        {
-          template: "setupHotWords",
-          label: "设置热词",
-        },
+        { template: "todayHotWords", label: "今日热词" },
+        { template: "historyHotWords", label: "历史热词" },
+        { template: "statisticsHotWords", label: "热词统计" },
+        { template: "setupHotWords", label: "设置热词" },
       ],
-      // 引入模板
-      templates: {
-        todayHotWords,
-        historyHotWords,
-        setupHotWords,
-        statisticsHotWords
-      },
-      // 当前模版
       currentTemplate: "todayHotWords",
     };
   },
-  methods: {
-    handleClickTab(val) {
-      this.currentTemplate = val;
-    },
-  },
-
 };
 </script>
+
 <style lang="scss" scoped></style>
diff --git a/manager/src/views/page/article-manage/style.scss b/manager/src/views/page/article-manage/style.scss
index bdec2e86..684d1383 100644
--- a/manager/src/views/page/article-manage/style.scss
+++ b/manager/src/views/page/article-manage/style.scss
@@ -1,4 +1,4 @@
-::v-deep .ivu-input{
+:deep(.ivu-input){
   width: 200px !important;
 }
 
@@ -16,7 +16,7 @@
   margin-right: 10px;
 }
 
-::v-deep .ivu-form-item-content {
+:deep(.ivu-form-item-content){
   margin-left: 0 !important;
   display: flex;
 }
diff --git a/manager/src/views/page/article-manage/template.js b/manager/src/views/page/article-manage/template.js
index 9b1b1084..37e83d42 100644
--- a/manager/src/views/page/article-manage/template.js
+++ b/manager/src/views/page/article-manage/template.js
@@ -1,8 +1,10 @@
+import { markRaw } from "vue";
 import HOTWORD_SETTING from "./HOTWORD_SETTING";
 import HOTWORDS_HISTORY from "./HOTWORDS_HISTORY";
 import HOTWORDS_TODAY from "./HOTWORDS_TODAY";
+
 export default {
-  HOTWORD_SETTING,
-  HOTWORDS_TODAY,
-  HOTWORDS_HISTORY
+  HOTWORD_SETTING: markRaw(HOTWORD_SETTING),
+  HOTWORDS_TODAY: markRaw(HOTWORDS_TODAY),
+  HOTWORDS_HISTORY: markRaw(HOTWORDS_HISTORY),
 };
diff --git a/manager/src/views/page/article-manage/template/historyHotWords.vue b/manager/src/views/page/article-manage/template/historyHotWords.vue
index 77d0b4d6..5d070cb5 100644
--- a/manager/src/views/page/article-manage/template/historyHotWords.vue
+++ b/manager/src/views/page/article-manage/template/historyHotWords.vue
@@ -1,25 +1,21 @@
 <template>
   <div class="box">
-    <Row class="operation">
-      <Col span="12">
-        <DatePicker
-          :options="options"
-          @on-change="search"
-          type="date"
-          placement="bottom-end"
-          placeholder="选择查看日期"
-          style="width: 200px"
-          v-model="yestDate"
-        ></DatePicker>
-      </Col>
-    </Row>
-    <Row>
-      <p>
-        <Alert type="success">
-          这里展示历史某一天的热词数据统计，可根据需求配置每日持久化多少条数据。
-        </Alert>
-      </p>
-    </Row>
+    <el-date-picker
+      v-model="params.date"
+      type="date"
+      placeholder="选择查看日期"
+      value-format="YYYY-MM-DD"
+      :disabled-date="disabledDate"
+      style="width: 200px"
+      @change="search"
+    />
+    <el-alert
+      class="mt_10"
+      type="success"
+      :closable="false"
+      show-icon
+      title="这里展示历史某一天的热词数据统计，可根据需求配置每日持久化多少条数据。"
+    />
 
     <div id="container"></div>
   </div>
@@ -28,64 +24,53 @@
 <script>
 import { Chart } from "@antv/g2";
 import { getHotWordsHistory } from "@/api/index";
-import affixTime from "@/components/affix-time";
-import { Message } from "view-design";
+import { Message } from "@/utils/message";
 
 export default {
-  components: {
-    affixTime,
-  },
   data() {
     return {
-      yestDate:new Date(new Date().getTime() - 24 * 60 * 60 * 1000).toString(),
-      yestDate:this.$options.filters.unixToDate(
-          (new Date().getTime() / 1000) - (24 * 60 * 60),
-          "yyyy年MM月dd日"
-        ),
       params: {
-        date: this.$options.filters.unixToDate(
-          (new Date().getTime() / 1000) - (24 * 60 * 60),
-          "yyyy-MM-dd"
-        ),
-      },
-      hotWordsChart: "", //图表
-      hotWordsData: [], //数据
-      options: {
-        disabledDate: (date) => {
-          if (this.endMonth) {
-            let endDate = this.getDate(this.endMonth);
-            return (date && date > endDate) || date > new Date();
-          } else {
-            return date && date > new Date();
-          }
-        },
+        date: "",
       },
+      hotWordsChart: null,
+      hotWordsData: [],
+      endMonth: null,
     };
   },
-  computed: {},
-
+  created() {
+    const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000);
+    this.params.date = this.$filters.unixToDate(Math.floor(yesterday.getTime() / 1000), "yyyy-MM-dd");
+  },
   methods: {
-    clickBreadcrumb(val) {
-      this.params = { ...this.params, ...val };
+    disabledDate(date) {
+      if (this.endMonth) {
+        const endDate = this.getDate(this.endMonth);
+        return (date && date > endDate) || date > new Date();
+      }
+      return date && date > new Date();
+    },
+    getDate(monthStr) {
+      const [year, month] = monthStr.split("-");
+      return new Date(year, month, 0);
     },
-    // 初始化图表
     async search(val) {
-      console.log(val)
-      val ? (this.params.date = val) : "";
+      if (val) {
+        this.params.date = val;
+      }
       const res = await getHotWordsHistory(this.params);
       if (res.success) {
-        this.hotWordsData = res.result;
-        this.hotWordsChart.data(this.hotWordsData);
-        this.hotWordsChart.render();
-        if (!this.hotWordsData) {
+        this.hotWordsData = res.result || [];
+        if (this.hotWordsChart) {
+          this.hotWordsChart.changeData(this.hotWordsData);
+          this.hotWordsChart.render();
+        }
+        if (!this.hotWordsData.length) {
           Message.error("暂无数据");
         }
       }
     },
-    handleClickSearch() {},
     init() {
-      let chart = this.hotWordsChart;
-      chart = new Chart({
+      const chart = new Chart({
         container: "container",
         autoFit: true,
         height: 500,
@@ -94,14 +79,12 @@ export default {
       chart.scale("score", {
         alias: "搜索次数",
       });
-
       chart.axis("keywords", {
         tickLine: {
           alignTick: false,
         },
       });
       chart.axis("score", false);
-
       chart.tooltip({
         showMarkers: false,
       });
@@ -118,12 +101,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.affix-time {
-  padding-left: 15px;
-
-}
-
-
 .box {
   min-height: 400px;
   margin-left: 50px;
diff --git a/manager/src/views/page/article-manage/template/setupHotWords.vue b/manager/src/views/page/article-manage/template/setupHotWords.vue
index 3bc15f2e..bd542271 100644
--- a/manager/src/views/page/article-manage/template/setupHotWords.vue
+++ b/manager/src/views/page/article-manage/template/setupHotWords.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="layout">
-    <Form
+    <el-form
       ref="formValidate"
-      :label-width="150"
+      label-width="150px"
       label-position="right"
       :model="formValidate"
       :rules="ruleValidate"
     >
-      <FormItem label="热词默认配置" prop="hotWordsSettingItems">
+      <el-form-item label="热词默认配置" prop="hotWordsSettingItems">
         <div
           class="item-label"
           v-for="(item, index) in formValidate.hotWordsSettingItems"
@@ -16,55 +16,55 @@
           <div>
             <div class="item-keyword">
               <div>热词：</div>
-              <Input type="text" v-model="item.keywords"> </Input>
+              <el-input v-model="item.keywords" />
             </div>
             <div class="item-score">
               <div>分数：</div>
-              <InputNumber :max="5" :min="0" v-model="item.score"></InputNumber>
+              <el-input-number :max="5" :min="0" v-model="item.score" />
             </div>
           </div>
           <div>
-            <Button type="primary" @click="formValidate.hotWordsSettingItems.splice(index,1)">删除</Button>
+            <el-button type="primary" @click="formValidate.hotWordsSettingItems.splice(index, 1)">
+              删除
+            </el-button>
           </div>
         </div>
-        <Button @click="addSetItem">添加配置</Button>
-      </FormItem>
-      <FormItem label="每日持久化热词数量" prop="saveNum">
-        <InputNumber :min="0" v-model="formValidate.saveNum" />
-      </FormItem>
+        <el-button @click="addSetItem">添加配置</el-button>
+      </el-form-item>
+      <el-form-item label="每日持久化热词数量" prop="saveNum">
+        <el-input-number :min="0" v-model="formValidate.saveNum" />
+      </el-form-item>
 
       <div class="label-btns">
-        <Button type="primary" @click="submit('formValidate')">保存</Button>
+        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
       </div>
-    </Form>
+    </el-form>
   </div>
 </template>
+
 <script>
 import { setSetting, getSetting } from "@/api/index";
 
 export default {
   data() {
     return {
-      ruleValidate: {}, // 验证规则
+      ruleValidate: {},
       formValidate: {
-        // 表单数据
-        saveNum: 1, // 每日保存数量
+        saveNum: 1,
         hotWordsSettingItems: [
           {
             keywords: "",
             score: 1,
           },
-        ], // 热词默认配置
+        ],
       },
     };
   },
-
   created() {
     this.init();
   },
   methods: {
-    // 添加热词默认配置
-    addSetItem(val) {
+    addSetItem() {
       if (this.formValidate.hotWordsSettingItems.length >= 5) {
         this.$Message.error("最多5个热词项");
       } else {
@@ -74,18 +74,15 @@ export default {
         });
       }
     },
-
     submit(name) {
-      this.$refs["formValidate"].validate(async (valid) => {
+      this.$refs[name].validate((valid) => {
         if (valid) {
           this.setupSetting();
         } else {
-          that.$Message.error("请正确填写内容!");
-          return flag;
+          this.$Message.error("请正确填写内容!");
         }
       });
     },
-    // 保存设置
     setupSetting() {
       setSetting("HOT_WORDS", this.formValidate).then((res) => {
         if (res.success) {
@@ -96,10 +93,9 @@ export default {
         this.init();
       });
     },
-    // 实例化数据
     async init() {
       const res = await getSetting("HOT_WORDS");
-      if (res.success) {
+      if (res.success && res.result) {
         this.formValidate = res.result;
       }
     },
@@ -113,23 +109,22 @@ export default {
   margin-bottom: 10px;
   display: flex;
   align-items: center;
-  width:500px;
-  justify-content:space-between;
-}
-::v-deep .ivu-input {
-  width: 100px !important;
-}
-.ivu-input-wrapper {
-  width: 300px;
-  margin-right: 10px;
+  width: 500px;
+  justify-content: space-between;
 }
+
 .item-keyword,
 .item-score {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
+
   > div {
     margin-right: 20px;
   }
 }
+
+.item-keyword .el-input {
+  width: 200px;
+}
 </style>
diff --git a/manager/src/views/page/article-manage/template/statisticsHotWords.vue b/manager/src/views/page/article-manage/template/statisticsHotWords.vue
index d1e55ce7..d8df458b 100644
--- a/manager/src/views/page/article-manage/template/statisticsHotWords.vue
+++ b/manager/src/views/page/article-manage/template/statisticsHotWords.vue
@@ -1,23 +1,23 @@
 <template>
-  <div>
-    <div class="affix-time">
-      <Affix :offset-top="100">
-        <div class="flex affix-box">
-          <affixTime :closeShop="true" @selected="clickBreadcrumb" />
-
-          <InputNumber
-            placeholder="展示前N"
-            :max="200"
-            :min="10"
-            v-model="params.top"
-          ></InputNumber>
-          <Button style="margin-left: 10px" @click="search">搜索</Button>
-        </div>
-      </Affix>
-    </div>
+  <div class="affix-time">
+    <el-affix :offset="100">
+      <div class="flex affix-box">
+        <affixTime :closeShop="true" @selected="clickBreadcrumb" />
+        <el-input-number
+          v-model="params.top"
+          placeholder="展示前N"
+          :max="200"
+          :min="10"
+        />
+        <el-button style="margin-left: 10px" @click="search">搜索</el-button>
+      </div>
+    </el-affix>
 
     <div id="container"></div>
-    <Table border :columns="columns" :data="hotWordsData"></Table>
+    <el-table border :data="hotWordsData" style="width: 100%">
+      <el-table-column prop="keywords" label="热词名称" min-width="160" />
+      <el-table-column prop="score" label="搜索次数" min-width="120" />
+    </el-table>
   </div>
 </template>
 
@@ -33,31 +33,18 @@ export default {
   data() {
     return {
       params: {
-        // 请求参数
         searchType: "LAST_SEVEN",
         year: "",
         month: "",
         top: 50,
       },
-      columns: [
-        {
-          title: "热词名称",
-          key: "keywords",
-        },
-        {
-          title: "搜索次数",
-          key: "score",
-        },
-      ],
-      hotWordsChart: "", //图表
-      hotWordsData: [], //数据
-      orderChart: "",
+      hotWordsChart: "",
+      hotWordsData: [],
     };
   },
-  computed: {},
   watch: {
     params: {
-      handler(val) {
+      handler() {
         this.search();
       },
       deep: true,
@@ -71,7 +58,6 @@ export default {
     clickBreadcrumb(val) {
       this.params = { ...this.params, ...val };
     },
-    // 初始化图表
     async search() {
       const res = await getHotWordsStatistics(this.params);
       if (res.success) {
@@ -84,11 +70,9 @@ export default {
             padding: [50, 20, 50, 20],
           });
         }
-
         this.init();
       }
     },
-    handleClickSearch() {},
     init() {
       if (this.hotWordsChart) {
         this.hotWordsChart.data(this.hotWordsData);
@@ -106,26 +90,9 @@ export default {
         this.hotWordsChart.tooltip({
           showMarkers: false,
         });
-        this.hotWordsChart
-          .interval()
-          .position("keywords*score")
-          .color("#f59b99");
+        this.hotWordsChart.interval().position("keywords*score").color("#f59b99");
         this.hotWordsChart.interaction("element-active");
 
-        // 添加文本标注
-        // this.hotWordsData.forEach((item) => {
-        //   this.hotWordsChart
-        //     .annotation()
-        //     .text({
-        //       position: [item.keywords, item.score],
-        //       content: item.score,
-        //       style: {
-        //         textAlign: "center",
-        //       },
-        //       offsetY: -30,
-        //     })
-        // });
-
         this.hotWordsChart.render();
       }
     },
diff --git a/manager/src/views/page/article-manage/template/todayHotWords.vue b/manager/src/views/page/article-manage/template/todayHotWords.vue
index 1f8802ab..646b8524 100644
--- a/manager/src/views/page/article-manage/template/todayHotWords.vue
+++ b/manager/src/views/page/article-manage/template/todayHotWords.vue
@@ -1,72 +1,67 @@
 <template>
   <div>
-    <Row class="operation">
-      <Button @click="add()" type="primary">设置今日热词</Button>
-    </Row>
-    <Row>
-      <p>
-        <Alert type="success">
-          这里展示今日系统中搜索前一百的搜索热词，分数为热词在排序系统中的分数，分数越高，可以在用户获取热词时进行优先展示（首页商品搜索栏下方推荐位）（分数可以填写负数，会降低推荐度）
-        </Alert>
-      </p>
-    </Row>
+    <div class="operation mb_10">
+      <el-button type="primary" @click="add()">设置今日热词</el-button>
+    </div>
+    <el-alert
+      type="success"
+      :closable="false"
+      show-icon
+      title="这里展示今日系统中搜索前一百的搜索热词，分数为热词在排序系统中的分数，分数越高，可以在用户获取热词时进行优先展示（首页商品搜索栏下方推荐位）（分数可以填写负数，会降低推荐度）"
+    />
 
     <div class="card-list">
-      <Card v-for="words in data" class="card-item" :key="words" onclick="">
-        <p>
-          <a href="#" slot="extra" @click.prevent="add(words)">{{ words }}</a>
-        </p>
-        <p slot="extra">
-          <a @click="deleteWords(words)">
-            <Icon type="md-close" />
-          </a>
-        </p>
-      </Card>
+      <el-card v-for="words in data" :key="words" class="card-item" shadow="hover">
+        <div class="card-item-inner">
+          <a href="#" class="word-link" @click.prevent="add(words)">{{ words }}</a>
+          <el-icon class="close-icon" @click="deleteWords(words)"><Close /></el-icon>
+        </div>
+      </el-card>
     </div>
-    <Modal
-      :title="modalTitle"
+
+    <el-dialog
       v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      append-to-body
+      destroy-on-close
     >
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="热词" prop="keywords">
-          <Input v-model="form.keywords" clearable style="width: 100%" />
-        </FormItem>
-        <FormItem label="分数" prop="point">
-          <InputNumber  v-model="form.point" clearable style="width: 100%" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-          >提交</Button
-        >
-      </div>
-    </Modal>
+      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+        <el-form-item label="热词" prop="keywords">
+          <el-input v-model="form.keywords" clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="分数" prop="point">
+          <el-input-number v-model="form.point" style="width: 100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { Close } from "@element-plus/icons-vue";
 import { getHotWords, setHotWords, deleteHotWords } from "@/api/index";
-
 import { regular } from "@/utils";
+
 export default {
-  name: "hotWords",
-  components: {},
+  name: "todayHotWords",
+  components: { Close },
   data() {
     return {
       submitLoading: false,
       modalTitle: "",
-      loading: true, // 表单加载状态
-      modalVisible: false, //弹出框
+      loading: true,
+      modalVisible: false,
       form: {
         keywords: "",
         point: 0,
       },
-      data: [], // 表单数据
-
-      // 表单验证规则
+      data: [],
       formValidate: {
         keywords: [regular.REQUIRED, regular.VARCHAR20],
         point: [regular.REQUIRED, regular.NUMBER],
@@ -77,20 +72,15 @@ export default {
     init() {
       this.getDataList();
     },
-    handleClickTab(val) {
-      console.log(val);
-    },
     getDataList() {
       this.loading = true;
       getHotWords().then((res) => {
         this.loading = false;
         if (res.success) {
           this.data = res.result;
-          this.$store.state.app.hotWords = this.data
-
+          this.$store.state.app.hotWords = this.data;
         }
       });
-      this.loading = false;
     },
     handleSubmit() {
       this.$refs.form.validate((valid) => {
@@ -107,26 +97,20 @@ export default {
         }
       });
     },
-    //设置热词优先
     add(words) {
-      this.modalType = 0;
       this.modalTitle = "设置热词";
-      if (words) {
-        this.form.keywords = words;
-      } else {
-        this.form.keywords = "";
-      }
+      this.form.keywords = words || "";
       this.form.point = 1;
       this.modalVisible = true;
     },
     deleteWords(words) {
       this.$Modal.confirm({
         title: "是否确定删除热词",
-        content: "<p>您确定要删除此热词吗？</p>",
-        okText: "确实",
+        content: "您确定要删除此热词吗？",
+        okText: "确定",
         cancelText: "取消",
         onOk: () => {
-          deleteHotWords({words}).then((res) => {
+          deleteHotWords({ words }).then((res) => {
             if (res.success) {
               this.$Message.success("删除成功");
               this.getDataList();
@@ -141,22 +125,38 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .card-list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  margin-top: 16px;
 }
 
 .card-item {
   min-width: 100px;
-  margin: 20px;
-}
-</style>
-<style>
-.ivu-card-extra {
-  right: 3px;
-  top: 15px;
-  z-index: 99;
+  margin: 10px;
+}
+
+.card-item-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.word-link {
+  color: var(--el-color-primary);
+  text-decoration: none;
+}
+
+.close-icon {
+  cursor: pointer;
+  color: var(--el-text-color-secondary);
+
+  &:hover {
+    color: var(--el-color-danger);
+  }
 }
 </style>
diff --git a/manager/src/views/page/feedback/feedback.vue b/manager/src/views/page/feedback/feedback.vue
index 8897bf1a..dccf410d 100644
--- a/manager/src/views/page/feedback/feedback.vue
+++ b/manager/src/views/page/feedback/feedback.vue
@@ -1,205 +1,148 @@
-
 <template>
   <div class="search">
-    <Card>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
+    <el-card>
+      <el-table
         ref="table"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
-          :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
-          size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
-    <!-- 修改模态框 -->
-    <Modal v-model="formValidate" title="详细信息" width="500">
-      <Form
-        ref="formValidate"
-        :model="form"
-        :label-width="80"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%"
       >
-        <FormItem label="用户名" prop="userName">
-          <span> {{form.userName}}</span>
-        </FormItem>
-        <FormItem label="手机号码" prop="mobile">
-          <span> {{form.mobile}}</span>
-        </FormItem>
-        <FormItem label="类型" prop="type">
+        <el-table-column prop="userName" label="会员名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="mobile" label="手机号码" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="context" label="反馈内容" min-width="380" show-overflow-tooltip />
+        <el-table-column label="类型" min-width="120">
+          <template #default="{ row }">
+            <span v-if="row">
+              <span v-if="row.type == 'FUNCTION'">功能建议</span>
+              <span v-else-if="row.type == 'OPTIMIZE'">优化反馈</span>
+              <span v-else-if="row.type == 'OTHER'">其他意见</span>
+              <span v-else>未知意见</span>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="170" sortable />
+        <el-table-column label="操作" width="130" align="center">
+          <template #default="{ row }">
+            <div v-if="row" class="ops">
+              <a class="link-text" @click="detail(row)">查看</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog v-model="detailVisible" title="详细信息" width="500px" destroy-on-close>
+      <el-form ref="formValidate" :model="form" label-width="80px">
+        <el-form-item label="用户名" prop="userName">
+          <span>{{ form.userName }}</span>
+        </el-form-item>
+        <el-form-item label="手机号码" prop="mobile">
+          <span>{{ form.mobile }}</span>
+        </el-form-item>
+        <el-form-item label="类型" prop="type">
           <span v-if="form.type == 'FUNCTION'">功能建议</span>
           <span v-if="form.type == 'OPTIMIZE'">优化反馈</span>
           <span v-if="form.type == 'OTHER'">其他意见</span>
-        </FormItem>
-        <FormItem label="反馈内容" prop="context">
-          <Input style="width: 85%" v-model="form.context" type="textarea" disabled :autosize="{minRows: 3,maxRows: 5}"
-          ></Input>
-        </FormItem>
-        <FormItem label="相关材料" prop="images">
-          <div v-if="form.images == null">
-            暂无
-          </div>
+        </el-form-item>
+        <el-form-item label="反馈内容" prop="context">
+          <el-input
+            v-model="form.context"
+            type="textarea"
+            disabled
+            :autosize="{ minRows: 3, maxRows: 5 }"
+            style="width: 85%"
+          />
+        </el-form-item>
+        <el-form-item label="相关材料" prop="images">
+          <div v-if="form.images == null">暂无</div>
           <div v-else>
-            <span v-for="(item, index) in this.form.images.split(',')" :key="index">
-              <Avatar shape="square" icon="ios-person" size="large" style="width: 80px;height: 90px;margin-right: 5px" :src="item"
-              />
-            </span>
+            <el-avatar
+              v-for="(item, index) in form.images.split(',')"
+              :key="index"
+              shape="square"
+              :size="80"
+              :src="item"
+              style="margin-right: 5px"
+            />
           </div>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="formValidate = false">取消</Button>
-      </div>
-    </Modal>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="detailVisible = false">取消</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-  import {
-    getMemberFeedback,
-    getMemberFeedbackDetail
-  } from "@/api/other";
+import { getMemberFeedback, getMemberFeedbackDetail } from "@/api/other";
 
-  export default {
-    name: "feedback",
-    data() {
-      return {
-        loading: true, // 加载状态
-        form: {}, // 表单数据
-        searchForm: { // 请求参数
-          pageNumber: 1,
-          pageSize: 20,
-          sort: "createTime",
-          order: "desc",
-        },
-        formValidate: false, // modal显隐
-        columns: [ // 表头
-          {
-            title: "会员名称",
-            key: "userName",
-            minWidth: 120,
-            tooltip: true
-
-          },
-          {
-            title: "手机号码",
-            key: "mobile",
-            minWidth: 120,
-            tooltip: true
-
-          },
-          {
-            title: "反馈内容",
-            key: "context",
-            minWidth: 380,
-            tooltip: true
-          },
-          {
-            title: "类型",
-            key: "type",
-            minWidth: 120,
-            render: (h, params) => {
-              if (params.row.type == "FUNCTION") {
-                return h('div', [h('span', {}, "功能建议")]);
-              } else if (params.row.type == "OPTIMIZE") {
-                return h('div', [h('span', {}, "优化反馈")]);
-              } else if (params.row.type == "OTHER") {
-                return h('div', [h('span', {}, "其他意见")]);
-              } else {
-                return h('div', [h('span', {}, "未知意见")]);
-              }
-            }
-          },
-          {
-            title: "创建时间",
-            key: "createTime",
-            width: 170,
-            sortable: true,
-          },
-          {
-            title: "操作",
-            key: "action",
-            align: "center",
-            width: 130,
-            render: (h, params) => {
-              return h("div", { class: "ops" }, [
-                h(
-                  "a",
-                  {
-                    on: {
-                      click: () => {
-                        this.detail(params.row);
-                      },
-                    },
-                  },
-                  "查看"
-                )
-              ]);
-            },
-          },
-        ],
-        data: [], // 表格数据
-        total: 0 // 数据总数
-
-      };
+export default {
+  name: "feedback",
+  data() {
+    return {
+      loading: true,
+      form: {},
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+      },
+      detailVisible: false,
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    init() {
+      this.getFeedback();
     },
-    methods: {
-      // 初始化数据
-      init() {
-        this.getFeedback();
-      },
-      // 分页 修改页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getFeedback();
-      },
-      // 分页 修改页数
-      changePageSize(v) {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = v;
-        this.getFeedback();
-      },
-      /**
-       * 查询意见反馈
-       */
-      getFeedback() {
-        this.loading = true;
-        getMemberFeedback(this.searchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        });
-      },
-      /**
-       * 投诉建议详细
-       */
-      detail(v) {
-        getMemberFeedbackDetail(v.id).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.$set(this, "form", res.result);
-            this.formValidate = true
-          }
-        });
-      }
+    changePage() {
+      this.getFeedback();
     },
-    mounted() {
-      this.init();
+    changePageSize() {
+      this.searchForm.pageNumber = 1;
+      this.getFeedback();
     },
-  };
+    getFeedback() {
+      this.loading = true;
+      getMemberFeedback(this.searchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+    },
+    detail(v) {
+      getMemberFeedbackDetail(v.id).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.form = res.result;
+          this.detailVisible = true;
+        }
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
 <style lang="scss" scoped>
 .ops a {
diff --git a/manager/src/views/personal-center/personal-center.vue b/manager/src/views/personal-center/personal-center.vue
index 2d9ee649..b068cc5f 100644
--- a/manager/src/views/personal-center/personal-center.vue
+++ b/manager/src/views/personal-center/personal-center.vue
@@ -1,41 +1,41 @@
 <template>
   <div class="own-space">
-    <Card class="own-space-new">
+    <el-card class="own-space-new">
       <div class="own-wrap">
         <div style="width:240px">
-          <Menu :active-name="activeName" theme="light" @on-select="changeMenu">
-            <MenuItem name="基本信息">基本信息</MenuItem>
-            <MenuItem name="安全设置">安全设置</MenuItem>
-          </Menu>
+          <el-menu :default-active="activeName" @select="changeMenu">
+            <el-menu-item index="基本信息">基本信息</el-menu-item>
+            <el-menu-item index="安全设置">安全设置</el-menu-item>
+          </el-menu>
         </div>
         <div style="padding: 8px 40px;width:100%">
           <div class="title">{{ currMenu }}</div>
           <div>
             <div v-show="currMenu=='基本信息'">
-              <Form ref="userForm" :model="userForm" :label-width="90" label-position="left">
-                <FormItem label="用户头像：">
+              <el-form ref="userForm" :model="userForm" label-width="90px" label-position="left">
+                <el-form-item label="用户头像：">
                   <upload-pic-thumb
                     v-model="userForm.avatar"
                     :multiple="false"
                   ></upload-pic-thumb>
-                </FormItem>
+                </el-form-item>
 
-                <FormItem label="用户名：">
+                <el-form-item label="用户名：">
                   {{ userForm.username }}
-                </FormItem>
-                <FormItem label="昵称：" prop="nickName">
-                  <Input maxlength="20" v-model="userForm.nickName" style="width: 250px"/>
-                </FormItem>
-                <FormItem>
-                  <Button
+                </el-form-item>
+                <el-form-item label="昵称：" prop="nickName">
+                  <el-input maxlength="20" v-model="userForm.nickName" style="width: 250px"/>
+                </el-form-item>
+                <el-form-item>
+                  <el-button
                     type="primary"
                     style="width: 100px;margin-right:5px"
                     :loading="saveLoading"
                     @click="saveEdit"
                   >保存
-                  </Button>
-                </FormItem>
-              </Form>
+                  </el-button>
+                </el-form-item>
+              </el-form>
             </div>
             <div v-show="currMenu=='安全设置'" class="safe">
               <div class="item">
@@ -50,7 +50,7 @@
           </div>
         </div>
       </div>
-    </Card>
+    </el-card>
 
   </div>
 </template>
@@ -112,7 +112,7 @@ export default {
         if (res.success) {
           this.$Message.success("保存成功");
           // 更新用户信息
-          Cookies.set("userInfoManager", this.userForm);
+          Cookies.set("userInfoManager", JSON.stringify(this.userForm));
           // 更新头像
           this.$store.commit("setAvatarPath", this.userForm.avatar);
           setTimeout(()=>{
@@ -131,8 +131,8 @@ export default {
 <style lang="scss" scoped>
   .own-space {
   .own-space-new {
-    .ivu-card-body {
-      padding: 16px 16px 16px 0px;
+    :deep(.el-card__body) {
+      padding: 16px 16px 16px 0;
     }
   }
 
@@ -188,7 +188,7 @@ export default {
   }
 }
 
-::v-deep .upload-list {
+:deep(.upload-list){
   img {
     width: 100%;
     height: 100%;
diff --git a/manager/src/views/privacy-content/index.vue b/manager/src/views/privacy-content/index.vue
index 64137612..1e36cfbe 100644
--- a/manager/src/views/privacy-content/index.vue
+++ b/manager/src/views/privacy-content/index.vue
@@ -1,63 +1,76 @@
 <template>
   <div class="wrapper">
-    <Row>
-      <Col span="24">
-      <Card class="article-detail">
-        <Alert>隐私协议在移动端中 设置->关于我们->对应的文章展示</Alert>
-        <Table :loading="loading" border :columns="columns" :data="data" ref="table">
-        </Table>
-      </Card>
-      </Col>
-    </Row>
-    <template v-if="!selected">
-      <Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="1100">
-        <Row>
-          <Col span="16">
-            <Form ref="form" :model="form.article" :label-width="100">
-              <FormItem label="文章标题" prop="title">
-                <Input v-model="form.article.title" clearable style="width: 40%" />
-              </FormItem>
-              <FormItem class="form-item-view-el" label="文章内容" prop="content">
+    <el-row>
+      <el-col :span="24">
+        <el-card class="article-detail">
+          <el-alert
+            title="隐私协议在移动端中 设置->关于我们->对应的文章展示"
+            type="info"
+            :closable="false"
+            show-icon
+            style="margin-bottom: 16px"
+          />
+          <el-table ref="table" v-loading="loading" border :data="data" style="width: 100%">
+            <el-table-column prop="name" label="协议名称" width="150" />
+            <el-table-column prop="type" label="协议类型" width="150" />
+            <el-table-column label="操作" width="230" align="center">
+              <template #default="{ row }">
+                <a v-if="row" class="link-text ops" @click="edit(row)">编辑</a>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
 
-                <editor
-                  ref="editor"
-                  openXss
-                  v-model="form.article.content"
-                  v-if="modalVisible"
-                ></editor>
-              </FormItem>
-            </Form>
-          </Col>
-          <Col span="8">
-            <div class="mobile-effect">
-              <div class="title">页面预览</div>
-              <div class="content">
-                <div v-html="form.article.content"></div>
-              </div>
+    <el-dialog
+      v-if="!selected"
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="1100px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-row :gutter="16">
+        <el-col :span="16">
+          <el-form ref="form" :model="form.article" label-width="100px">
+            <el-form-item label="文章标题" prop="title">
+              <el-input v-model="form.article.title" clearable style="width: 40%" />
+            </el-form-item>
+            <el-form-item class="form-item-view-el" label="文章内容" prop="content">
+              <editor
+                v-if="modalVisible"
+                ref="editor"
+                open-xss
+                v-model="form.article.content"
+              />
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="8">
+          <div class="mobile-effect">
+            <div class="title">页面预览</div>
+            <div class="content">
+              <div v-html="form.article.content"></div>
             </div>
-          </Col>
-        </Row>
-
-        <div slot="footer">
-          <Button type="text" @click="modalVisible = false">取消</Button>
-          <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
-        </div>
-      </Modal>
-    </template>
+          </div>
+        </el-col>
+      </el-row>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import {
-  getArticleCategory,
-  updatePrivacy,
-  getPrivacy,
-} from "@/api/pages";
+import { getArticleCategory, updatePrivacy, getPrivacy } from "@/api/pages";
 import tinymec from "@/components/editor/index.vue";
 
 export default {
   name: "privacy",
- components: {
+  components: {
     editor: tinymec,
   },
   props: {
@@ -68,115 +81,53 @@ export default {
   },
   data() {
     return {
-      loading: false, // 表单加载状态
-      modalVisible: false, // 添加或编辑显示
+      loading: false,
+      modalVisible: false,
       treeDataDefault: [],
-      list: [], // 列表
-      treeValue: "", // 选择的分类
-      //树结构
+      list: [],
+      treeValue: "",
       treeData: [],
-      submitLoading: false, // 添加或编辑提交状态
-      modalTitle:'',
-      currindex:'',
+      submitLoading: false,
+      modalTitle: "",
+      currindex: "",
       form: {
-        type:'',
-        article:{
+        type: "",
+        article: {
           openStatus: false,
-          title: '',
-          categoryId: '',
+          title: "",
+          categoryId: "",
           sort: 1,
-          content: '',
-          type:''
+          content: "",
+          type: "",
         },
-        id:''
+        id: "",
       },
-      columns: [
-        // 表头
-        {
-          title:"协议名称",
-          key: "name",
-          width: 150,
-        },
-        // 表头
-        {
-          title:"协议类型",
-          key: "type",
-          width: 150,
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 230,
-          render: (h, params) => {
-            return h("div", { class: "ops" }, [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.edit(params.row);
-                    },
-                  },
-                },
-                "编辑"
-              )
-            ]);
-          },
-        },
-      ],
       data: [
-        {
-          name:'店铺入驻协议',
-          type:'STORE_REGISTER'
-        },
-        {
-          name:'用户协议',
-          type:'USER_AGREEMENT'
-        },
-        {
-          name:'证照信息',
-          type:'LICENSE_INFORMATION'
-        },
-        {
-          name:'关于我们',
-          type:'ABOUT'
-        },
-        {
-          name:'隐私策略',
-          type:'PRIVACY_POLICY'
-        },
-      ], // 表单数据
+        { name: "店铺入驻协议", type: "STORE_REGISTER" },
+        { name: "用户协议", type: "USER_AGREEMENT" },
+        { name: "证照信息", type: "LICENSE_INFORMATION" },
+        { name: "关于我们", type: "ABOUT" },
+        { name: "隐私策略", type: "PRIVACY_POLICY" },
+      ],
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getAllList(0);
     },
-    // 文章分类的选择事件
     handleCheckChange(data) {
       let value = "";
       let title = "";
       this.list = [];
-      data.forEach((item, index) => {
+      data.forEach((item) => {
         value += `${item.value},`;
         title += `${item.title},`;
       });
       value = value.substring(0, value.length - 1);
       title = title.substring(0, title.length - 1);
-      this.list.push({
-        value,
-        title,
-      });
+      this.list.push({ value, title });
       this.form.article.categoryId = value;
     },
-    // 获取全部文章分类
     getAllList(parent_id) {
       this.loading = true;
       getArticleCategory(parent_id).then((res) => {
@@ -194,53 +145,45 @@ export default {
         }
       });
     },
-    // 文章分类格式化方法
     getTree(tree = []) {
-      let arr = [];
+      const arr = [];
       if (!!tree && tree.length !== 0) {
         tree.forEach((item) => {
-          let obj = {};
+          const obj = {};
           obj.title = item.articleCategoryName;
           obj.value = item.id;
-          obj.attr = item.articleCategoryName; // 其他你想要添加的属性
-          obj.expand = false;
-          obj.selected = false;
-          obj.children = this.getTree(item.children); // 递归调用
+          obj.attr = item.articleCategoryName;
+          obj.children = this.getTree(item.children);
           arr.push(obj);
         });
       }
       return arr;
     },
-    // 编辑文章modal
     edit(data) {
       this.modalType = 1;
       this.modalTitle = "编辑协议";
-      this.form.article = {
-        content:''
-      };
-      this.$refs.form.resetFields();
+      this.form.article = { content: "" };
+      this.$refs.form?.resetFields();
       this.loading = true;
       getPrivacy(data.type).then((res) => {
         this.loading = false;
-          this.modalVisible = true;
-          this.form.article.categoryId = res.result.categoryId;
-          this.form.id = res.result.id;
-          this.form.article.content =res.result.content;
-          this.form.article.title = res.result.title;
-          this.form.article.sort = res.result.sort;
-          this.form.article.openStatus = res.result.openStatus;
-          this.form.article.type = res.result.type;
-          this.form.type =  res.result.type;
+        this.modalVisible = true;
+        this.form.article.categoryId = res.result.categoryId;
+        this.form.id = res.result.id;
+        this.form.article.content = res.result.content;
+        this.form.article.title = res.result.title;
+        this.form.article.sort = res.result.sort;
+        this.form.article.openStatus = res.result.openStatus;
+        this.form.article.type = res.result.type;
+        this.form.type = res.result.type;
       });
       this.loading = false;
     },
-    // 添加文章
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
           this.submitLoading = true;
-          // 编辑
-          updatePrivacy(this.form.id,this.form.type,this.form.article).then((res) => {
+          updatePrivacy(this.form.id, this.form.type, this.form.article).then((res) => {
             this.submitLoading = false;
             if (res.success) {
               this.$Message.success("操作成功");
@@ -258,37 +201,37 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .mobile-effect {
-    box-sizing: border-box;
-    margin: 0 20px;
-    border: 2px solid #f1f2f3;
-    height: 610px;
-    .title {
-      align-items: center;
-      background: #f9f9fa;
-      border-radius: 4px 4px 0 0;
-      color: #85878a;
-      display: flex;
-      font-size: 12px;
-      height: 32px;
-      line-height: 20px;
-      padding: 0 12px;
-    }
-    .content {
-      width: 100%;
-      height: 560px;
-      padding: 0 14px;
-      overflow-y: scroll;
-    }
+.mobile-effect {
+  box-sizing: border-box;
+  margin: 0 20px;
+  border: 2px solid #f1f2f3;
+  height: 610px;
+  .title {
+    align-items: center;
+    background: #f9f9fa;
+    border-radius: 4px 4px 0 0;
+    color: #85878a;
+    display: flex;
+    font-size: 12px;
+    height: 32px;
+    line-height: 20px;
+    padding: 0 12px;
   }
-  .ops a {
-    color: #2d8cf0;
-    cursor: pointer;
-    text-decoration: none;
-  }
-  .ops span {
-    display: inline-block;
-    margin: 0 8px;
-    color: #dcdee2;
+  .content {
+    width: 100%;
+    height: 560px;
+    padding: 0 14px;
+    overflow-y: scroll;
   }
+}
+.ops a {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.ops span {
+  display: inline-block;
+  margin: 0 8px;
+  color: #dcdee2;
+}
 </style>
diff --git a/manager/src/views/promotions/coupon-activity/coupon-info.vue b/manager/src/views/promotions/coupon-activity/coupon-info.vue
index 17523d0a..b7f33eee 100644
--- a/manager/src/views/promotions/coupon-activity/coupon-info.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon-info.vue
@@ -1,56 +1,75 @@
 <template>
   <div>
     <div class="content-goods-publish">
-      <Form ref="form" :label-width="70">
+      <el-form ref="form" label-width="70px">
         <div class="base-info-item">
           <h4>优惠券活动详情</h4>
           <div class="form-item-view">
-            <FormItem label="活动名称">
+            <el-form-item label="活动名称">
               <span>{{ couponActivity.promotionName }}</span>
-            </FormItem>
-            <FormItem label="活动类型">
-              <span v-if="couponActivity.couponActivityType === 'REGISTERED'"
-                >新人发券</span
-              >
+            </el-form-item>
+            <el-form-item label="活动类型">
+              <span v-if="couponActivity.couponActivityType === 'REGISTERED'">新人发券</span>
               <span v-else-if="couponActivity.couponActivityType === 'AUTO_COUPON'">自动发券</span>
-              <spin v-else>精确发券</spin>
-            </FormItem>
-            <FormItem label="领取频率" v-if="couponActivity.couponFrequencyEnum != '' && couponActivity.couponFrequencyEnum != null && couponActivity.couponFrequencyEnum != undefined">
-              <span v-if="couponActivity.couponFrequencyEnum === 'DAY'"
-                >每日</span
-              >
+              <span v-else>精确发券</span>
+            </el-form-item>
+            <el-form-item
+              v-if="couponActivity.couponFrequencyEnum != '' && couponActivity.couponFrequencyEnum != null && couponActivity.couponFrequencyEnum != undefined"
+              label="领取频率"
+            >
+              <span v-if="couponActivity.couponFrequencyEnum === 'DAY'">每日</span>
               <span v-else-if="couponActivity.couponFrequencyEnum === 'WEEK'">每周一次</span>
               <span v-else>每月一次</span>
-            </FormItem>
-            <FormItem
-              label="活动范围"
+            </el-form-item>
+            <el-form-item
               v-if="couponActivity.couponActivityType === 'SPECIFY' || couponActivity.couponActivityType === 'AUTO_COUPON'"
+              label="活动范围"
             >
               <span v-if="couponActivity.activityScope === 'ALL'">全部会员</span>
-              <spin v-else>指定会员</spin>
-            </FormItem>
-            <FormItem label="活动时间">
+              <span v-else>指定会员</span>
+            </el-form-item>
+            <el-form-item label="活动时间">
               <span>{{ couponActivity.startTime }}～{{ couponActivity.endTime }}</span>
-            </FormItem>
-            <FormItem label="活动状态">
+            </el-form-item>
+            <el-form-item label="活动状态">
               <span v-if="couponActivity.promotionStatus === 'NEW'">未开始</span>
               <span v-if="couponActivity.promotionStatus === 'START'">已开始</span>
               <span v-if="couponActivity.promotionStatus === 'END'">已结束</span>
               <span v-if="couponActivity.promotionStatus === 'CLOSE'">已关闭</span>
-            </FormItem>
+            </el-form-item>
           </div>
           <h4>优惠券列表</h4>
-          <Table :columns="couponColumn" :data="couponData" ref="table"> </Table>
+          <el-table :data="couponData" style="width: 100%">
+            <el-table-column prop="couponName" label="优惠券名称" />
+            <el-table-column label="优惠券金额">
+              <template #default="{ row }">
+                <template v-if="row">
+                  <span v-if="row.couponType === 'DISCOUNT'">{{ row.couponDiscount }}折</span>
+                  <priceColorScheme v-else-if="row.couponType === 'PRICE'" :value="row.price" :color="$mainColor" />
+                  <span v-else>未知</span>
+                </template>
+              </template>
+            </el-table-column>
+            <el-table-column label="优惠券类型">
+              <template #default="{ row }">
+                <span v-if="row">{{ couponTypeText(row.couponType) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="num" label="赠送数量" />
+          </el-table>
           <template v-if="couponActivity.activityScopeInfo && memberData.length > 0">
             <h4 class="mt_10">会员列表列表</h4>
-            <Table :columns="memberColumn" :data="memberData"></Table>
+            <el-table :data="memberData" style="width: 100%">
+              <el-table-column prop="id" label="会员id" />
+              <el-table-column prop="nickName" label="昵称" />
+            </el-table>
           </template>
         </div>
-      </Form>
+      </el-form>
     </div>
 
     <div class="footer">
-      <Button type="primary" @click="back">返回活动列表</Button>
+      <el-button type="primary" @click="back">返回活动列表</el-button>
     </div>
   </div>
 </template>
@@ -62,61 +81,9 @@ export default {
   name: "coupon-activity-info",
   data() {
     return {
-      id: this.$route.query.id, //表单id
-      couponActivity: {}, //券活动
-      couponColumn: [
-        {
-          title: "优惠券名称",
-          key: "couponName",
-        },
-        {
-          title: "优惠券金额",
-          key: "price",
-          render: (h, params) => {
-            let text = "未知";
-            if (params.row.couponType === "DISCOUNT") {
-              text = params.row.couponDiscount + "折";
-              return h("div", [text]);
-            } else if (params.row.couponType === "PRICE") {
-              return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-
-            }else{
-              return h("div", [text]);
-            }
-
-
-
-          },
-        },
-        {
-          title: "优惠券类型",
-          key: "couponType",
-          render: (h, params) => {
-            let text = "未知";
-            if (params.row.couponType == "DISCOUNT") {
-              text = "打折";
-            } else if (params.row.couponType == "PRICE") {
-              text = "减免现金";
-            }
-            return h("div", [text]);
-          },
-        },
-        {
-          title: "赠送数量",
-          key: "num",
-        },
-      ],
+      id: this.$route.query.id,
+      couponActivity: {},
       couponData: [],
-      memberColumn: [
-        {
-          title: "会员id",
-          key: "id",
-        },
-        {
-          title: "昵称",
-          key: "nickName",
-        },
-      ],
       memberData: [],
     };
   },
@@ -124,7 +91,11 @@ export default {
     this.getCouponActivity();
   },
   methods: {
-    //获取优惠券活动
+    couponTypeText(v) {
+      if (v === "DISCOUNT") return "打折";
+      if (v === "PRICE") return "减免现金";
+      return "未知";
+    },
     getCouponActivity() {
       getCouponActivity(this.id).then((res) => {
         this.couponActivity = res.result;
@@ -141,7 +112,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/*选择商品品类*/
 .content-goods-publish {
   padding: 15px;
   margin: 0 auto;
@@ -171,13 +141,8 @@ div.base-info-item {
     align-items: flex-start;
     justify-content: space-between;
     padding-left: 40px;
-
-    .shop-category-text {
-      font-size: 12px;
-    }
   }
 }
-/** 底部步骤 */
 .footer {
   width: 88.7%;
   padding: 10px;
diff --git a/manager/src/views/promotions/coupon-activity/coupon-publish.vue b/manager/src/views/promotions/coupon-activity/coupon-publish.vue
index 02bd5fe7..6e5f8574 100644
--- a/manager/src/views/promotions/coupon-activity/coupon-publish.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon-publish.vue
@@ -1,68 +1,59 @@
 <template>
   <div>
-    <Card>
-      <Form ref="form" :model="form" :label-width="120" :rules="formRule">
+    <el-card>
+      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <h4>活动信息</h4>
           <div class="form-item-view">
-            <FormItem label="活动名称" prop="promotionName">
-              <Input
-                type="text"
+            <el-form-item label="活动名称" prop="promotionName">
+              <el-input
                 v-model="form.promotionName"
                 placeholder="请填写活动名称"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="活动时间">
-              <DatePicker
+            </el-form-item>
+            <el-form-item label="活动时间">
+              <el-date-picker
                 type="datetimerange"
-                :options="options"
+                :disabled-date="options.disabledDate"
                 v-model="rangeTime"
-                format="yyyy-MM-dd HH:mm:ss"
+                format="YYYY-MM-DD HH:mm:ss"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
                 placeholder="请选择活动时间"
                 style="width: 260px"
-              >
-              </DatePicker>
-            </FormItem>
+              />
+            </el-form-item>
 
-            <FormItem label="优惠券活动类型" prop="couponActivityType">
-              <RadioGroup
-                type="button"
-                button-style="solid"
-                v-model="form.couponActivityType"
-              >
-                <Radio label="REGISTERED">新人发券</Radio>
-                <Radio label="SPECIFY">精确发券</Radio>
-<!--                <Radio label="INVITE_NEW">邀新赠券</Radio>-->
-                <Radio label="AUTO_COUPON">自动赠券</Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem
+            <el-form-item label="优惠券活动类型" prop="couponActivityType">
+              <el-radio-group v-model="form.couponActivityType">
+                <el-radio-button value="REGISTERED">新人发券</el-radio-button>
+                <el-radio-button value="SPECIFY">精确发券</el-radio-button>
+                <el-radio-button value="AUTO_COUPON">自动赠券</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
               label="领取频率"
               v-if="form.couponActivityType === 'AUTO_COUPON'"
             >
-            <RadioGroup
-                type="button"
-                button-style="solid"
-                v-model="form.couponFrequencyEnum"
-              >
-                <Radio label="DAY">每日一次</Radio>
-                <Radio label="WEEK">每周一次</Radio>
-                <Radio label="MONTH">每月一次</Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem
+              <el-radio-group v-model="form.couponFrequencyEnum">
+                <el-radio-button value="DAY">每日一次</el-radio-button>
+                <el-radio-button value="WEEK">每周一次</el-radio-button>
+                <el-radio-button value="MONTH">每月一次</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
               label="活动范围"
               prop="activityScope"
               v-if="form.couponActivityType === 'SPECIFY'"
             >
-              <RadioGroup type="button" button-style="solid" v-model="form.activityScope">
-                <Radio label="ALL">全部会员</Radio>
-                <Radio label="DESIGNATED">指定会员</Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem
+              <el-radio-group v-model="form.activityScope">
+                <el-radio-button value="ALL">全部会员</el-radio-button>
+                <el-radio-button value="DESIGNATED">指定会员</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
               label="选择会员"
               prop="scopeType"
               v-if="
@@ -70,62 +61,79 @@
                 form.activityScope === 'DESIGNATED'
               "
             >
-              <Button type="primary" icon="ios-add" @click="addVip" ghost
-                >选择会员</Button
-              >
+              <el-button type="primary" @click="addVip" plain>选择会员</el-button>
               <div style="margin-top: 24px" v-if="form.activityScope == 'DESIGNATED'">
-                <Table border :columns="userColumns" :data="this.selectedMember"> </Table>
+                <el-table border :data="selectedMember" style="width: 100%">
+                  <el-table-column prop="nickName" label="用户名称" min-width="120" />
+                  <el-table-column label="手机号" min-width="120">
+                    <template #default="{ row }">
+                      <span v-if="row">{{ row.mobile || "暂未填写" }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="lastLoginDate" label="最后登录时间" min-width="160" />
+                  <el-table-column label="操作" width="100" align="center">
+                    <template #default="{ $index }">
+                      <a class="link-text" @click="delUser($index)">删除</a>
+                    </template>
+                  </el-table-column>
+                </el-table>
               </div>
-            </FormItem>
+            </el-form-item>
           </div>
           <h4>配置优惠券</h4>
           <div class="form-item-view">
-            <FormItem label="选择优惠券" prop="scopeType">
-              <Button type="primary" :loading="submitLoading" @click="showSelector"
-                >选择优惠券</Button
-              >
-            </FormItem>
-            <FormItem label="赠送配置" prop="scopeType">
-              <Table border :columns="columns" :data="this.selectCouponList">
-                <template slot="sendNum" slot-scope="scope">
-                  <Input
-                    type="text"
-                    v-model="form.couponActivityItems[scope.index].num"
-                    placeholder="赠送数量"
-                  />
-                  <Input
-                    type="text"
-                    v-model="form.couponActivityItems[scope.index].couponId"
-                    v-show="false"
-                  />
-                </template>
-              </Table>
-            </FormItem>
+            <el-form-item label="选择优惠券" prop="scopeType">
+              <el-button type="primary" :loading="submitLoading" @click="showSelector">选择优惠券</el-button>
+            </el-form-item>
+            <el-form-item label="赠送配置" prop="scopeType">
+              <el-table border :data="selectCouponList" style="width: 100%">
+                <el-table-column prop="couponName" label="优惠券名称" min-width="120" show-overflow-tooltip />
+                <el-table-column label="品类描述" width="120">
+                  <template #default="{ row }">
+                    <el-tag v-if="row" :type="scopeTypeTagType(row.scopeType)">
+                      {{ scopeTypeText(row.scopeType) }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="面额/折扣" min-width="120">
+                  <template #default="{ row }">
+                    <template v-if="row">
+                      <span v-if="row.price" :style="{ color: $mainColor }">
+                        {{ $filters.unitPrice(row.price, "￥") }}</span>
+                      <span v-else>{{ row.couponDiscount }}折</span>
+                    </template>
+                  </template>
+                </el-table-column>
+                <el-table-column label="赠送数量" min-width="120">
+                  <template #default="{ $index }">
+                    <el-input
+                      v-model="form.couponActivityItems[$index].num"
+                      placeholder="赠送数量"
+                    />
+                    <el-input
+                      v-model="form.couponActivityItems[$index].couponId"
+                      v-show="false"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="100" align="center">
+                  <template #default="{ $index }">
+                    <el-button type="danger" size="small" plain @click="delCoupon($index)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
 
             <div>
-              <Button type="text" @click="closeCurrentPage">返回</Button>
-              <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-                >提交</Button
-              >
+              <el-button link @click="closeCurrentPage">返回</el-button>
+              <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
             </div>
           </div>
         </div>
-      </Form>
-    </Card>
-    <Modal
-      @on-ok="
-        () => {
-          this.showCouponSelect = false;
-        }
-      "
-      @on-cancel="
-        () => {
-          this.showCouponSelect = false;
-        }
-      "
-      v-model="showCouponSelect"
-      width="80%"
-    >
+      </el-form>
+    </el-card>
+
+    <el-dialog v-model="showCouponSelect" width="80%" title="选择优惠券" destroy-on-close>
       <couponTemplate
         :checked="true"
         :selectedList="selectCouponList"
@@ -133,16 +141,16 @@
         promotionStatus="START"
         @selected="selectedCoupon"
       />
-    </Modal>
+    </el-dialog>
 
-    <Modal width="1200" v-model="checkUserList">
+    <el-dialog v-model="checkUserList" width="1200px" title="选择会员" destroy-on-close>
       <userList
         v-if="checkUserList"
         @callback="callbackSelectUser"
         :selectedList="selectedMember"
         ref="memberLayout"
       />
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 
@@ -150,7 +158,6 @@
 import couponTemplate from "@/views/promotions/coupon/coupon";
 import userList from "@/views/member/list/index";
 import { saveActivityCoupon } from "@/api/promotion";
-import { promotionsScopeTypeRender } from "@/utils/promotions";
 
 export default {
   name: "add-coupon-activity",
@@ -165,144 +172,55 @@ export default {
           return date && date.valueOf() < Date.now() - 86400000;
         },
       },
-      showCouponSelect: false, //显示优惠券选择框
-      rangeTime: "", //时间区间
-      checkUserList: false, //会员选择器
-      selectedMember: [], //选择的会员
+      showCouponSelect: false,
+      rangeTime: "",
+      checkUserList: false,
+      selectedMember: [],
       form: {
-        promotionName: "", //活动名称
-        activityScope: "ALL", //活动范围 ，默认全体发券
-        couponActivityType: "REGISTERED", //触发活动方式 默认新人赠券
-        startTime: "", //开始时间
-        endTime: "", //结束时间
-        memberDTOS: [], //指定会员范围
-        couponActivityItems: [], //优惠券列表
-        couponFrequencyEnum:"", //选择周期
+        promotionName: "",
+        activityScope: "ALL",
+        couponActivityType: "REGISTERED",
+        startTime: "",
+        endTime: "",
+        memberDTOS: [],
+        couponActivityItems: [],
+        couponFrequencyEnum: "",
       },
-      submitLoading: false, // 添加或编辑提交状态
-      selectCouponList: [], //选择的优惠券列表
+      submitLoading: false,
+      selectCouponList: [],
       formRule: {
         promotionName: [{ required: true, message: "活动名称不能为空" }],
         rangeTime: [{ required: true, message: "请选择活动有效期" }],
         description: [{ required: true, message: "请输入范围描述" }],
       },
-      // 用户表格
-      userColumns: [
-        {
-          title: "用户名称",
-          key: "nickName",
-          minWidth: 120,
-        },
-        {
-          title: "手机号",
-          key: "mobile",
-          render: (h, params) => {
-            return h("div", params.row.mobile || "暂未填写");
-          },
-        },
-        {
-          title: "最后登录时间",
-          key: "lastLoginDate",
-        },
-        {
-          title: "操作",
-          key: "action",
-          minWidth: 50,
-          align: "center",
-          render: (h, params) => {
-            return h(
-              "a",
-              {
-                style: {
-                  color: "#2d8cf0",
-                  cursor: "pointer",
-                  textDecoration: "none"
-                },
-                on: {
-                  click: () => {
-                    this.delUser(params.index);
-                  },
-                },
-              },
-              "删除"
-            );
-          },
-        },
-      ],
-      //优惠券表格
-      columns: [
-        {
-          title: "优惠券名称",
-          key: "couponName",
-          minWidth: 120,
-        },
-        {
-          title: "品类描述",
-          key: "scopeType",
-          width: 120,
-          render: (h, params) => {
-            return promotionsScopeTypeRender(h, params);
-          },
-        },
-        {
-          title: "面额/折扣",
-          key: "couponName",
-          minWidth: 120,
-          render: (h, params) => {
-            if (params.row.price) {
-              return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-
-            } else {
-              return h("div", params.row.couponDiscount + "折");
-            }
-          },
-        },
-
-        {
-          title: "赠送数量",
-          type: "template",
-          slot: "sendNum",
-          minWidth: 120,
-        },
-        {
-          title: "操作",
-          key: "action",
-          minWidth: 50,
-          align: "center",
-          render: (h, params) => {
-            return h(
-              "Button",
-              {
-                props: {
-                  size: "small",
-                  type: "error",
-                  ghost: true,
-                },
-                on: {
-                  click: () => {
-                    this.delCoupon(params.index);
-                  },
-                },
-              },
-              "删除"
-            );
-          },
-        },
-      ],
     };
   },
   methods: {
-    // 返回已选择的用户
+    scopeTypeText(type) {
+      const map = {
+        ALL: "全品类",
+        PORTION_GOODS_CATEGORY: "商品分类",
+        PORTION_SHOP_CATEGORY: "店铺分类",
+        PORTION_GOODS: "指定商品",
+      };
+      return map[type] || "未知";
+    },
+    scopeTypeTagType(type) {
+      const map = {
+        ALL: "info",
+        PORTION_GOODS_CATEGORY: "warning",
+        PORTION_SHOP_CATEGORY: "warning",
+        PORTION_GOODS: "primary",
+      };
+      return map[type] || "danger";
+    },
     callbackSelectUser(val) {
-      // 每次将返回的数据回调判断
       let findUser = this.selectedMember.find((item) => {
         return item.id === val.id;
       });
-      // 如果没有则添加
       if (!findUser) {
         this.selectedMember.push(val);
       } else {
-        // 有重复数据就删除
         this.selectedMember.map((item, index) => {
           if (item.id === findUser.id) {
             this.selectedMember.splice(index, 1);
@@ -311,13 +229,10 @@ export default {
       }
       this.reSelectMember();
     },
-
-    // 删除选择的会员
     delUser(index) {
       this.selectedMember.splice(index, 1);
       this.reSelectMember();
     },
-    //更新选择的会员
     reSelectMember() {
       this.form.memberDTOS = this.selectedMember.map((item) => {
         return {
@@ -326,19 +241,15 @@ export default {
         };
       });
     },
-    /**
-     * 返回优惠券*/
     selectedCoupon(val) {
       this.selectCouponList = val;
       this.reSelectCoupon();
     },
-    // 删除选择的优惠券
     delCoupon(index) {
       this.selectCouponList.splice(index, 1);
       this.reSelectCoupon();
     },
     reSelectCoupon() {
-      // 清空原有数据
       this.form.couponActivityItems = this.selectCouponList.map((item) => {
         return {
           num: 1,
@@ -346,30 +257,25 @@ export default {
         };
       });
     },
-    // 添加指定用户
     addVip() {
       this.checkUserList = true;
       this.$nextTick(() => {
         this.$refs.memberLayout.selectedMember = true;
       });
     },
-    //显示优惠券选择框
     showSelector() {
       this.showCouponSelect = true;
     },
-    /** 保存平台优惠券 */
     handleSubmit() {
-      if(this.form.couponFrequencyEnum !== ''){
-        console.log(this.activityScope)
-        if(this.form.activityScope == 'ALL'){
-          this.form.startTime = this.$options.filters.unixToDate(this.rangeTime[0] / 1000);
-          this.form.endTime = this.$options.filters.unixToDate(this.rangeTime[1] / 1000);
+      if (this.form.couponFrequencyEnum !== "") {
+        if (this.form.activityScope == "ALL") {
+          this.form.startTime = this.$filters.unixToDate(this.rangeTime[0] / 1000);
+          this.form.endTime = this.$filters.unixToDate(this.rangeTime[1] / 1000);
 
           this.$refs.form.validate((valid) => {
             if (valid) {
               const params = JSON.parse(JSON.stringify(this.form));
               this.submitLoading = true;
-              // 添加 避免编辑后传入id等数据 记得删除
               delete params.id;
               saveActivityCoupon(params).then((res) => {
                 this.submitLoading = false;
@@ -380,34 +286,31 @@ export default {
               });
             }
           });
-        }else {
-          this.$Message.info('自动发券只能全用户发送')
-          this.form.couponActivityType = 'SPECIFY'
-          this.form.activityScope = 'ALL'
+        } else {
+          this.$Message.info("自动发券只能全用户发送");
+          this.form.couponActivityType = "SPECIFY";
+          this.form.activityScope = "ALL";
         }
-      }else{
-      this.form.startTime = this.$options.filters.unixToDate(this.rangeTime[0] / 1000);
-      this.form.endTime = this.$options.filters.unixToDate(this.rangeTime[1] / 1000);
+      } else {
+        this.form.startTime = this.$filters.unixToDate(this.rangeTime[0] / 1000);
+        this.form.endTime = this.$filters.unixToDate(this.rangeTime[1] / 1000);
 
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          const params = JSON.parse(JSON.stringify(this.form));
-          this.submitLoading = true;
-          // 添加 避免编辑后传入id等数据 记得删除
-          delete params.id;
-          saveActivityCoupon(params).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("优惠券活动创建成功");
-              this.closeCurrentPage();
-            }
-          });
-        }
-      });
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const params = JSON.parse(JSON.stringify(this.form));
+            this.submitLoading = true;
+            delete params.id;
+            saveActivityCoupon(params).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("优惠券活动创建成功");
+                this.closeCurrentPage();
+              }
+            });
+          }
+        });
       }
-
     },
-    // 关闭当前页面
     closeCurrentPage() {
       this.$store.commit("removeTag", "add-platform-coupon");
       localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
@@ -444,4 +347,10 @@ h4 {
     margin: 0 4px;
   }
 }
+
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
 </style>
diff --git a/manager/src/views/promotions/coupon-activity/coupon.vue b/manager/src/views/promotions/coupon-activity/coupon.vue
index 649fc797..77df042a 100644
--- a/manager/src/views/promotions/coupon-activity/coupon.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon.vue
@@ -1,249 +1,208 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation padding-row">
-        <Button @click="add" type="primary">添加活动</Button>
-      </Row>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="add">添加活动</el-button>
+      </div>
+
+      <el-table
         ref="table"
-        sortable="custom"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
       >
-        <template slot-scope="{ row }" slot="action">
-          <a
-            :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
-            @click="info(row)"
-          >查看</a>
-          <span
-            v-if="(!checked && row.promotionStatus === 'START') || row.promotionStatus === 'NEW'"
-            style="margin: 0 8px; color: #dcdee2"
-          >|</span>
-          <a
-            v-if="(!checked && row.promotionStatus === 'START') || row.promotionStatus === 'NEW'"
-            :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
-            @click="remove(row)"
-          >关闭</a>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        <el-table-column prop="promotionName" label="活动名称" min-width="140" show-overflow-tooltip />
+        <el-table-column label="活动类型" min-width="120">
+          <template #default="{ row }">
+            <span v-if="row">{{ activityTypeText(row.couponActivityType) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动范围" min-width="120">
+          <template #default="{ row }">
+            <span v-if="row">{{ activityScopeText(row.activityScope) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="领取频率" min-width="120">
+          <template #default="{ row }">
+            <span v-if="row">{{ couponFrequencyText(row.couponFrequencyEnum) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动时间" min-width="160">
+          <template #default="{ row }">
+            <div v-if="row" class="activity-time" v-html="formatActivityTime(row)"></div>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" min-width="100" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
+              {{ promotionStatusText(row.promotionStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="120" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="info(row)">查看</a>
+              <template
+                v-if="(!checked && row.promotionStatus === 'START') || row.promotionStatus === 'NEW'"
+              >
+                <span class="op-split">|</span>
+                <a class="link-text" @click="remove(row)">关闭</a>
+              </template>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
 import { getCouponActivityList, closeActivity } from "@/api/promotion";
-import { promotionsStatusRender } from "@/utils/promotions";
 
 export default {
   name: "coupon-activity",
-  components: {},
-  data() {
-    return {
-      loading: true, // 表单加载状态
-      modalType: 0, // 添加或编辑标识
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-        },
-      form: {
-        // 添加或编辑表单对象初始化数据
-        promotionName: "",
-      },
-      // 表单验证规则
-      formValidate: {
-        promotionName: [{ required: true, message: "不能为空", trigger: "blur" }],
-      },
-      submitLoading: false, // 添加或编辑提交状态
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          title: "活动名称",
-          key: "promotionName",
-          minWidth: 120,
-        },
-        {
-          title: "活动类型",
-          key: "couponActivityType",
-          minWidth: 120,
-          render: (h, params) => {
-            if (params.row.couponActivityType === "REGISTERED") {
-              return h("div", ["注册赠券"]);
-            }else if(params.row.couponActivityType === 'AUTO_COUPON'){
-              return h("div", ["自动发券"]);
-            }else {
-              return h("div", ["精确发券"]);
-            }
-          },
-        },
-        {
-          title: "活动范围",
-          key: "activityScope",
-          minWidth: 120,
-          render: (h, params) => {
-            let text = "未知";
-            if (params.row.activityScope === "DESIGNATED") {
-              text = "指定会员";
-            } else {
-              text = "全部会员";
-            }
-            return h("div", [text]);
-          },
-        },
-        {
-          title: "领取频率",
-          key: "couponFrequencyEnum",
-          minWidth: 120,
-          render: (h, params) => {
-            console.log(params)
-            let text = ''
-            if (params.row.couponFrequencyEnum === "DAY") {
-              text = "每日";
-            } else if(params.row.couponFrequencyEnum === "WEEK") {
-              text = "每周";
-            } else if(params.row.couponFrequencyEnum === 'MONTH'){
-              text = '每月'
-            } else {
-              text = '/'
-            }
-            return h("div", [text]);
-          },
-        },
-        {
-          title: "活动时间",
-          minWidth: 150,
-          render: (h, params) => {
-            if (params.row.startTime && params.row.endTime) {
-              return h("div", {
-                domProps: {
-                  innerHTML: params.row.startTime + "<br/>" + params.row.endTime,
-                },
-              });
-            }else{
-              return h("div", '/');
-            }
-          },
-        },
-        {
-          title: "状态",
-          minWidth: 80,
-          key: "promotionStatus",
-          fixed: "right",
-          render: (h, params) => {
-            return promotionsStatusRender(h, params);
-          },
-        },
-        {
-          title: "操作",
-          slot: "action",
-          align: "center",
-          fixed: "right",
-          minWidth: 100,
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-    };
-  },
   props: {
-    // 是否为选中模式
     checked: {
       type: Boolean,
       default: false,
     },
   },
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+      },
+      data: [],
+      total: 0,
+      selectDate: [],
+    };
+  },
   methods: {
-    //获取数据 初始化
+    activityTypeText(type) {
+      const map = {
+        REGISTERED: "注册赠券",
+        AUTO_COUPON: "自动发券",
+      };
+      return map[type] || "精确发券";
+    },
+    activityScopeText(scope) {
+      return scope === "DESIGNATED" ? "指定会员" : "全部会员";
+    },
+    couponFrequencyText(freq) {
+      const map = {
+        DAY: "每日",
+        WEEK: "每周",
+        MONTH: "每月",
+      };
+      return map[freq] || "/";
+    },
+    formatActivityTime(row) {
+      if (row.startTime && row.endTime) {
+        return `${row.startTime}<br/>${row.endTime}`;
+      }
+      return "/";
+    },
+    promotionStatusText(status) {
+      const map = {
+        NEW: "未开始",
+        START: "已开始",
+        END: "已结束",
+        CLOSE: "已关闭",
+      };
+      return map[status] || "未知";
+    },
+    promotionStatusTagType(status) {
+      const map = {
+        NEW: "info",
+        START: "success",
+        END: "danger",
+        CLOSE: "danger",
+      };
+      return map[status] || "danger";
+    },
     init() {
       this.getDataList();
     },
-    //增加券活动
     add() {
       this.$router.push({ name: "add-coupon-activity" });
     },
-    //查看详情
     info(v) {
       this.$router.push({ name: "coupon-activity-info", query: { id: v.id } });
     },
-    // 分页 修改页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
-    // 分页 修改页数
     changePageSize(v) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    //搜索活动
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    //数据获取
     getDataList() {
       this.loading = true;
       if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = this.selectDate[0].getTime();
-        this.searchForm.endTime = this.selectDate[1].getTime();
+        this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
+        this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
       } else {
         this.searchForm.startTime = null;
         this.searchForm.endTime = null;
       }
-      getCouponActivityList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-      this.loading = false;
+      getCouponActivityList(this.searchForm)
+        .then((res) => {
+          if (res.success) {
+            this.data = res.result.records;
+            this.total = res.result.total;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
-    //跳转编辑
     edit(v) {
       this.$router.push({ name: "edit-platform-coupon", query: { id: v.id } });
     },
-    //停止活动
     remove(v) {
       this.$Modal.confirm({
         title: "确认关闭",
         content: "确认要关闭此优惠券活动么?关闭活动只能重新创建",
         loading: true,
         onOk: () => {
-          // 删除
           closeActivity(v.id)
             .then((res) => {
               if (res.success) {
                 this.$Message.success("优惠券活动已关闭");
                 this.getDataList();
-                this.$Modal.remove();
               }
+              this.$Modal.remove();
             })
-            .catch(() => {});
+            .catch(() => {
+              this.$Modal.remove();
+            });
         },
       });
     },
@@ -253,3 +212,24 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
+.activity-time {
+  line-height: 1.5;
+}
+.padding-row {
+  margin-bottom: 10px;
+}
+.mt_10 {
+  margin-top: 10px;
+}
+</style>
diff --git a/manager/src/views/promotions/coupon/coupon-publish.vue b/manager/src/views/promotions/coupon/coupon-publish.vue
index 8024cefe..4c819435 100644
--- a/manager/src/views/promotions/coupon/coupon-publish.vue
+++ b/manager/src/views/promotions/coupon/coupon-publish.vue
@@ -1,96 +1,93 @@
 <template>
   <div>
-    <Card>
-      <Form ref="form" :model="form" :label-width="120" :rules="formRule">
+    <el-card>
+      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <h4>基本信息</h4>
           <div class="form-item-view">
-            <FormItem label="活动名称" prop="promotionName">
-              <Input
+            <el-form-item label="活动名称" prop="promotionName">
+              <el-input
                 :disabled="disabled"
-                type="text"
                 v-model="form.promotionName"
                 placeholder="活动名称"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="优惠券名称" prop="couponName">
-              <Input
+            </el-form-item>
+            <el-form-item label="优惠券名称" prop="couponName">
+              <el-input
                 :disabled="disabled"
-                type="text"
                 v-model="form.couponName"
                 placeholder="优惠券名称"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="优惠券类型" prop="couponType">
-              <Select :disabled="disabled" v-model="form.couponType" style="width: 260px">
-                <Option value="DISCOUNT">打折</Option>
-                <Option value="PRICE">减免现金</Option>
-              </Select>
-            </FormItem>
-            <FormItem
+            </el-form-item>
+            <el-form-item label="优惠券类型" prop="couponType">
+              <el-select :disabled="disabled" v-model="form.couponType" style="width: 260px">
+                <el-option label="打折" value="DISCOUNT" />
+                <el-option label="减免现金" value="PRICE" />
+              </el-select>
+            </el-form-item>
+            <el-form-item
               label="折扣"
               prop="couponDiscount"
               v-if="form.couponType == 'DISCOUNT'"
             >
-              <InputNumber
+              <el-input-number
                 :disabled="disabled"
                 placeholder="折扣"
                 :max="9.9"
                 :min="0.1"
                 :step="0.1"
-                precision="1"
+                :precision="1"
                 v-model="form.couponDiscount"
-                style="width: 260px">
-              </InputNumber>
+                style="width: 260px"
+              />
               <span class="describe">请输入0-10的数字,可有一位小数</span>
-            </FormItem>
-            <FormItem label="面额" prop="price" v-if="form.couponType == 'PRICE'">
-              <Input
+            </el-form-item>
+            <el-form-item label="面额" prop="price" v-if="form.couponType == 'PRICE'">
+              <el-input
                 :disabled="disabled"
-                type="text"
                 v-model="form.price"
                 placeholder="面额"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="活动类型" prop="getType">
-              <Select :disabled="disabled" v-model="form.getType" style="width: 260px">
-                <Option value="FREE">免费领取</Option>
-                <Option value="ACTIVITY">活动赠送</Option>
-              </Select>
-            </FormItem>
+            </el-form-item>
+            <el-form-item label="活动类型" prop="getType">
+              <el-select :disabled="disabled" v-model="form.getType" style="width: 260px">
+                <el-option label="免费领取" value="FREE" />
+                <el-option label="活动赠送" value="ACTIVITY" />
+              </el-select>
+            </el-form-item>
 
-            <FormItem label="店铺承担比例" prop="storeCommission">
-              <Input
+            <el-form-item label="店铺承担比例" prop="storeCommission">
+              <el-input
                 :disabled="disabled"
                 v-model="form.storeCommission"
                 placeholder="店铺承担比例"
                 style="width: 260px"
               >
-                <span slot="append">%</span>
-              </Input>
+                <template #append>%</template>
+              </el-input>
               <span class="describe">店铺承担比例，输入0-100之间数值</span>
-            </FormItem>
-            <FormItem label="发放数量" prop="publishNum" v-if="form.getType === 'FREE'">
-              <Input
+            </el-form-item>
+            <el-form-item label="发放数量" prop="publishNum" v-if="form.getType === 'FREE'">
+              <el-input
                 :disabled="disabled"
                 v-model="form.publishNum"
                 placeholder="发放数量"
                 style="width: 260px"
               />
               <div class="tips">如果发放数量为0时,则代表不限制发放数量</div>
-            </FormItem>
-            <FormItem
+            </el-form-item>
+            <el-form-item
               label="领取数量限制"
               prop="couponLimitNum"
               v-if="form.getType === 'FREE'"
             >
-              <Input
+              <el-input
                 :disabled="disabled"
                 v-model="form.couponLimitNum"
                 placeholder="领取限制"
@@ -98,9 +95,9 @@
                 style="width: 260px"
               />
               <div class="tips">如果领取数量为0时,则代表不限制领取数量</div>
-            </FormItem>
-            <FormItem label="范围描述" prop="description">
-              <Input
+            </el-form-item>
+            <el-form-item label="范围描述" prop="description">
+              <el-input
                 :disabled="disabled"
                 v-model="form.description"
                 type="textarea"
@@ -110,42 +107,42 @@
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
+            </el-form-item>
           </div>
           <h4>使用限制</h4>
           <div class="form-item-view">
-            <FormItem label="消费门槛" prop="consumeThreshold">
-              <Input
+            <el-form-item label="消费门槛" prop="consumeThreshold">
+              <el-input
                 :disabled="disabled"
-                type="text"
                 v-model="form.consumeThreshold"
                 placeholder="消费门槛"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="有效期" prop="rangeTime">
+            </el-form-item>
+            <el-form-item label="有效期" prop="rangeTime">
               <div v-if="form.getType == 'ACTIVITY'">
-                <RadioGroup v-model="rangeTimeType">
-                  <Radio :disabled="disabled" :label="1" v-if="form.getType !== 'ACTIVITY'">起止时间</Radio>
-                  <Radio :disabled="disabled" :label="0">固定时间</Radio>
-                </RadioGroup>
+                <el-radio-group v-model="rangeTimeType">
+                  <el-radio :disabled="disabled" :value="1" v-if="form.getType !== 'ACTIVITY'">起止时间</el-radio>
+                  <el-radio :disabled="disabled" :value="0">固定时间</el-radio>
+                </el-radio-group>
               </div>
               <div v-if="rangeTimeType == 1">
-                <DatePicker
+                <el-date-picker
                   :disabled="disabled"
                   type="datetimerange"
                   v-model="form.rangeTime"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  placeholder="请选择"
-                  :options="options"
+                  format="YYYY-MM-DD HH:mm:ss"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  start-placeholder="开始时间"
+                  end-placeholder="结束时间"
+                  :disabled-date="options.disabledDate"
                   style="width: 260px"
-                >
-                </DatePicker>
+                />
               </div>
               <div class="effectiveDays" v-if="rangeTimeType == 0">
                 领取当天开始
-                <InputNumber
+                <el-input-number
                   :disabled="disabled"
                   v-model="form.effectiveDays"
                   :min="1"
@@ -154,73 +151,81 @@
                 />
                 天内有效(1-365间的整数)
               </div>
-            </FormItem>
+            </el-form-item>
 
-            <FormItem label="使用范围" prop="scopeType">
-              <RadioGroup type="button" button-style="solid" v-model="form.scopeType">
-                <Radio :disabled="disabled" label="ALL">全品类</Radio>
-                <Radio :disabled="disabled" label="PORTION_GOODS">指定商品</Radio>
-                <Radio :disabled="disabled" label="PORTION_GOODS_CATEGORY"
-                  >部分商品分类</Radio
-                >
-              </RadioGroup>
-            </FormItem>
+            <el-form-item label="使用范围" prop="scopeType">
+              <el-radio-group v-model="form.scopeType">
+                <el-radio-button :disabled="disabled" value="ALL">全品类</el-radio-button>
+                <el-radio-button :disabled="disabled" value="PORTION_GOODS">指定商品</el-radio-button>
+                <el-radio-button :disabled="disabled" value="PORTION_GOODS_CATEGORY">部分商品分类</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
 
-            <FormItem style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'">
+            <el-form-item style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'">
               <div style="display: flex; margin-bottom: 10px">
-                <Button :disabled="disabled" type="primary" @click="openSkuList"
-                  >选择商品</Button
-                >
-                <Button
+                <el-button :disabled="disabled" type="primary" @click="openSkuList">选择商品</el-button>
+                <el-button
                   :disabled="disabled"
-                  type="error"
-                  ghost
+                  type="danger"
+                  plain
                   style="margin-left: 10px"
                   @click="delSelectGoods"
-                  >批量删除</Button
-                >
+                >批量删除</el-button>
               </div>
-              <Table
+              <el-table
                 border
-                :columns="columns"
                 :data="form.promotionGoodsList"
-                @on-selection-change="changeSelect"
+                style="width: 100%"
+                @selection-change="changeSelect"
               >
-                <template slot-scope="{ row }" slot="QRCode">
-                  <img
-                    :src="row.QRCode || '../../../assets/lili.png'"
-                    width="50px"
-                    height="50px"
-                    alt=""
-                  />
-                </template>
-              </Table>
-            </FormItem>
+                <el-table-column type="selection" width="60" align="center" />
+                <el-table-column prop="goodsName" label="商品名称" min-width="120" show-overflow-tooltip />
+                <el-table-column label="商品价格" width="110">
+                  <template #default="{ row }">
+                    <span v-if="row" :style="{ color: $mainColor }">
+                      {{ $filters.unitPrice(row.price, "￥") }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="库存" width="90">
+                  <template #default="{ row }">
+                    <span v-if="row">{{ row.quantity }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="100" align="center">
+                  <template #default="{ $index }">
+                    <el-button
+                      :disabled="disabled"
+                      type="danger"
+                      size="small"
+                      plain
+                      @click="delGoods($index)"
+                    >删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
 
-            <FormItem v-if="form.scopeType == 'PORTION_GOODS_CATEGORY'">
-              <Cascader
+            <el-form-item v-if="form.scopeType == 'PORTION_GOODS_CATEGORY'">
+              <el-cascader
                 :disabled="disabled"
-                :data="goodsCategoryList"
+                :options="goodsCategoryList"
                 style="width: 260px"
                 v-model="form.scopeIdGoods"
-              ></Cascader>
-            </FormItem>
+              />
+            </el-form-item>
             <div>
-              <Button :disabled="disabled" type="text" @click="closeCurrentPage"
-                >返回</Button
-              >
-              <Button
+              <el-button :disabled="disabled" link @click="closeCurrentPage">返回</el-button>
+              <el-button
                 :disabled="disabled"
                 type="primary"
                 :loading="submitLoading"
                 @click="handleSubmit"
-                >提交</Button
-              >
+              >提交</el-button>
             </div>
           </div>
         </div>
-      </Form>
-    </Card>
+      </el-form>
+    </el-card>
     <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
   </div>
 </template>
@@ -245,17 +250,16 @@ export default {
       handler(val) {
         if (val == "FREE") {
           this.rangeTimeType = 1;
-        }else{
+        } else {
           this.rangeTimeType = 0;
         }
-        if(this.rangeTimeType == 0){
-          delete this.formRule.rangeTime
+        if (this.rangeTimeType == 0) {
+          delete this.formRule.rangeTime;
         }
       },
       deep: true,
     },
     $route(e) {
-      // 监听路由，参数变化调取接口
       this.id = e.query.id;
       if (this.id) {
         this.getCoupon();
@@ -289,32 +293,26 @@ export default {
     };
     return {
       disabled: this.$route.query.onlyView,
-      rangeTimeType: 1, // 当前时间类型
-      modalType: 0, // 是否编辑
+      rangeTimeType: 1,
+      modalType: 0,
       form: {
-        /** 店铺承担比例 */
         storeCommission: 0,
-        /** 发行数量 */
         publishNum: 0,
-        /** 运费承担者 */
         scopeType: "ALL",
-        /** 限领数量 */
         couponLimitNum: 1,
-        /** 活动类型 */
         couponType: "PRICE",
-        /** 优惠券名称 */
         couponName: "",
         promotionName: "",
         getType: "FREE",
         promotionGoodsList: [],
         scopeIdGoods: [],
         rangeDayType: "",
-        effectiveDays:1,
+        effectiveDays: 1,
       },
-      id: this.$route.query.id, // 优惠券id
-      submitLoading: false, // 添加或编辑提交状态
-      selectedGoods: [], // 已选商品列表，便于删除
-      goodsCategoryList: [], // 商品分类列表
+      id: this.$route.query.id,
+      submitLoading: false,
+      selectedGoods: [],
+      goodsCategoryList: [],
       formRule: {
         promotionName: [{ required: true, message: "活动名称不能为空" }],
         couponName: [{ required: true, message: "优惠券名称不能为空" }],
@@ -345,56 +343,6 @@ export default {
         ],
         description: [{ required: true, message: "请输入范围描述" }],
       },
-      columns: [
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "商品名称",
-          key: "goodsName",
-          minWidth: 120,
-        },
-        {
-          title: "商品价格",
-          key: "price",
-          minWidth: 40,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "库存",
-          key: "quantity",
-          minWidth: 40,
-        },
-
-        {
-          title: "操作",
-          key: "action",
-          minWidth: 50,
-          align: "center",
-          render: (h, params) => {
-            return h(
-              "Button",
-              {
-                props: {
-                  size: "small",
-                  type: "error",
-                  ghost: true,
-                },
-                on: {
-                  click: () => {
-                    this.delGoods(params.index);
-                  },
-                },
-              },
-              "删除"
-            );
-          },
-        },
-      ],
       options: {
         disabledDate(date) {
           return date && date.valueOf() < Date.now() - 86400000;
@@ -404,14 +352,12 @@ export default {
   },
   async mounted() {
     await this.getCagetoryList();
-    // 如果id不为空则查询信息
     if (this.id) {
       this.getCoupon();
       this.modalType = 1;
     }
   },
   methods: {
-    // 获取优惠券数据
     getCoupon() {
       getPlatformCoupon(this.id).then((res) => {
         let data = res.result;
@@ -429,7 +375,6 @@ export default {
                   prevCascader = prevCascader.map((key) => {
                     if (key === item.id) {
                       let result = prev.map((item) => item.id);
-
                       return [...result, item.id];
                     } else {
                       return key;
@@ -452,23 +397,19 @@ export default {
         this.form = data;
       });
     },
-    /** 保存平台优惠券 */
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
           const params = JSON.parse(JSON.stringify(this.form));
-          // 判断当前活动类型
           params.getType != "ACTIVITY" ? delete params.effectiveDays : "";
 
-          //判断当前时间类型
           if (this.rangeTimeType == 1) {
             params.rangeDayType = "FIXEDTIME";
-            params.startTime = this.$options.filters.unixToDate(
-              this.form.rangeTime[0] / 1000
-            );
-            params.endTime = this.$options.filters.unixToDate(
-              this.form.rangeTime[1] / 1000
-            );
+            const rangeTime = this.form.rangeTime;
+            const start = rangeTime[0] instanceof Date ? rangeTime[0] : new Date(rangeTime[0]);
+            const end = rangeTime[1] instanceof Date ? rangeTime[1] : new Date(rangeTime[1]);
+            params.startTime = this.$filters.unixToDate(start.getTime() / 1000);
+            params.endTime = this.$filters.unixToDate(end.getTime() / 1000);
             delete params.effectiveDays;
           } else {
             params.rangeDayType = "DYNAMICTIME";
@@ -494,7 +435,6 @@ export default {
           }
 
           if (params.scopeType == "PORTION_GOODS") {
-            //指定商品
             params.promotionGoodsList.forEach((item) => {
               scopeId.push(item.skuId);
             });
@@ -502,7 +442,6 @@ export default {
           } else if (params.scopeType == "ALL") {
             delete params.promotionGoodsList;
           } else if (params.scopeType == "PORTION_GOODS_CATEGORY") {
-            //部分商品分类
             scopeId = this.filterCategoryId(params.scopeIdGoods, []);
             params.scopeId = scopeId.toString();
             delete params.promotionGoodsList;
@@ -511,7 +450,6 @@ export default {
 
           this.submitLoading = true;
           if (this.modalType === 0) {
-            // 添加 避免编辑后传入id等数据 记得删除
             delete params.id;
 
             savePlatformCoupon(params).then((res) => {
@@ -522,7 +460,6 @@ export default {
               }
             });
           } else {
-            // 编辑
             delete params.consumeLimit;
             delete params.updateTime;
 
@@ -537,14 +474,12 @@ export default {
         }
       });
     },
-    // 关闭当前页面
     closeCurrentPage() {
       this.$store.commit("removeTag", "add-platform-coupon");
       localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
       this.$router.go(-1);
     },
     openSkuList() {
-      // 显示商品选择器
       this.$refs.skuSelect.open("goods");
       let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList));
       data.forEach((e) => {
@@ -553,11 +488,9 @@ export default {
       this.$refs.skuSelect.goodsData = data;
     },
     changeSelect(e) {
-      // 已选商品批量选择
       this.selectedGoods = e;
     },
     delSelectGoods() {
-      // 多选删除商品
       if (this.selectedGoods.length <= 0) {
         this.$Message.warning("您还未选择要删除的数据");
         return;
@@ -578,11 +511,9 @@ export default {
       });
     },
     delGoods(index) {
-      // 删除商品
       this.form.promotionGoodsList.splice(index, 1);
     },
     selectedGoodsData(item) {
-      // 回显已选商品
       let list = [];
       item.forEach((e) => {
         list.push({
@@ -603,10 +534,8 @@ export default {
       this.form.promotionGoodsList = list;
     },
     async getCagetoryList() {
-      // 获取全部商品分类
       let data = await getCategoryTree();
       this.goodsCategoryList = data.result;
-      // 过滤出可显示的值
       this.goodsCategoryList = this.goodsCategoryList.map((item) => {
         if (item.children) {
           item.children = item.children.map((child) => {
@@ -634,7 +563,6 @@ export default {
       });
     },
     filterCategoryId(list, idArr) {
-      // 递归获取分类id
       list.forEach((e) => {
         if (e instanceof Array) {
           this.filterCategoryId(e, idArr);
diff --git a/manager/src/views/promotions/coupon/coupon-receive.vue b/manager/src/views/promotions/coupon/coupon-receive.vue
index 16725315..e63661df 100644
--- a/manager/src/views/promotions/coupon/coupon-receive.vue
+++ b/manager/src/views/promotions/coupon/coupon-receive.vue
@@ -1,259 +1,191 @@
 <template>
-  
   <div class="search">
-    <Button style="margin-bottom: 10px" @click="back()">返回</Button>
-    <Card>
-      
-      <Form
-        ref="searchForm"
-        :model="searchForm"
-        inline
-        :label-width="75"
-        class="search-form mb_10"
-      >
-        <Form-item label="优惠券名称" prop="couponName">
-          <Input
-            type="text"
+    <el-button style="margin-bottom: 10px" @click="back()">返回</el-button>
+
+    <el-card>
+      <el-form ref="searchForm" :model="searchForm" inline label-width="75px" class="search-form mb_10">
+        <el-form-item label="优惠券名称" prop="couponName">
+          <el-input
             v-model="searchForm.couponName"
             placeholder="请输入优惠券名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="会员名称" prop="memberName">
-          <Input
-            type="text"
+        </el-form-item>
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
             v-model="searchForm.memberName"
             placeholder="请输入会员名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="获取方式" prop="getType">
-          <Select
-            v-model="searchForm.getType"
-            placeholder="请选择"
-            clearable
-            style="width: 240px"
-          >
-            <Option value="FREE">免费获取</Option>
-            <Option value="ACTIVITY">活动获取</Option>
-          </Select>
-        </Form-item>
-        <Form-item label="优惠券状态" prop="memberCouponStatus">
-          <Select
-            v-model="searchForm.memberCouponStatus"
-            placeholder="请选择"
-            clearable
-            style="width: 240px"
-          >
-            <Option value="NEW">已领取</Option>
-            <Option value="USED">已使用</Option>
-            <Option value="EXPIRE">已过期</Option>
-            <Option value="CLOSED">已作废</Option>
-          </Select>
-        </Form-item>
-        <Form-item label="活动时间">
-          <DatePicker
+        </el-form-item>
+        <el-form-item label="获取方式" prop="getType">
+          <el-select v-model="searchForm.getType" placeholder="请选择" clearable style="width: 240px">
+            <el-option label="免费获取" value="FREE" />
+            <el-option label="活动获取" value="ACTIVITY" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="优惠券状态" prop="memberCouponStatus">
+          <el-select v-model="searchForm.memberCouponStatus" placeholder="请选择" clearable style="width: 240px">
+            <el-option label="已领取" value="NEW" />
+            <el-option label="已使用" value="USED" />
+            <el-option label="已过期" value="EXPIRE" />
+            <el-option label="已作废" value="CLOSED" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="活动时间">
+          <el-date-picker
             v-model="selectDate"
             type="daterange"
             clearable
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
             placeholder="选择起始时间"
             style="width: 240px"
-          ></DatePicker>
-        </Form-item>
-        <Button
-          @click="handleSearch"
-          type="primary"
-          icon="ios-search"
-          class="search-btn"
-          >搜索</Button
-        >
-      </Form>
-    </Card>
-    <Card>
-      <Table
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-table
         v-if="refreshTable"
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
         ref="table"
+        v-loading="loading"
+        border
+        :data="data"
         class="mt_10"
-        @on-selection-change="changeSelect"
+        style="width: 100%"
+        @selection-change="changeSelect"
       >
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        <el-table-column prop="memberName" label="会员名称" min-width="130" fixed="left" />
+        <el-table-column prop="couponName" label="优惠券名称" min-width="100" show-overflow-tooltip />
+        <el-table-column label="发布店铺" min-width="100">
+          <template #default="{ row }">
+            <span v-if="row">{{ (row.storeName === "platform" && "平台") || row.storeName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="面额/折扣" width="100">
+          <template #default="{ row }">
+            <priceColorScheme
+              v-if="row && row.price"
+              :value="row.price"
+              :color="$mainColor"
+            />
+            <span v-else-if="row">{{ row.discount }}折</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="consumeThreshold" label="使用门槛" width="130" />
+        <el-table-column label="获取方式" width="120">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.getType === 'FREE'" type="danger">免费获取</el-tag>
+              <el-tag v-else-if="row.getType === 'ACTIVITY'" type="warning">活动获取</el-tag>
+              <el-tag v-else-if="row.getType === 'INSIDE'" type="success">内购</el-tag>
+              <el-tag v-else>未知</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="会员优惠券状态" width="130">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.memberCouponStatus == 'NEW'" type="primary">已领取</el-tag>
+              <el-tag v-else-if="row.memberCouponStatus == 'USED'" type="success">已使用</el-tag>
+              <el-tag v-else-if="row.memberCouponStatus == 'EXPIRE'" type="danger">已过期</el-tag>
+              <el-tag v-else-if="row.memberCouponStatus == 'CLOSED'" type="info">已作废</el-tag>
+              <el-tag v-else type="danger">未知</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="优惠券类型" width="120">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.couponType === 'DISCOUNT'" type="warning">打折</el-tag>
+              <el-tag v-else-if="row.couponType === 'PRICE'" type="danger">减免现金</el-tag>
+              <el-tag v-else>未知</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="品类描述" width="120">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.scopeType == 'ALL'">全品类</el-tag>
+              <el-tag v-else-if="row.scopeType == 'PORTION_GOODS_CATEGORY'" type="warning">商品分类</el-tag>
+              <el-tag v-else-if="row.scopeType == 'PORTION_SHOP_CATEGORY'" type="danger">店铺分类</el-tag>
+              <el-tag v-else-if="row.scopeType == 'PORTION_GOODS'" type="danger">指定商品</el-tag>
+              <el-tag v-else type="danger">未知</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="有效时间" width="150">
+          <template #default="{ row }">
+            <template v-if="row">
+              <span v-if="row.getType === 'ACTIVITY' && row.rangeDayType === 'DYNAMICTIME'">长期有效</span>
+              <div v-else-if="row.startTime && row.endTime">
+                {{ row.startTime }}<br />{{ row.endTime }}
+              </div>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
+
 <script>
 import { getCouponReceiveList } from "@/api/promotion";
-import {
-  memberPromotionsStatusRender,
-  promotionsScopeTypeRender,
-} from "@/utils/promotions";
 
 export default {
   name: "coupon-recevie",
-  data() {
-    return {
-      loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "create_time", // 默认排序字段
-          order: "desc", // 默认排序方式
-          getType: "", // 默认排序方式
-          couponId: this.$route.query.couponId, // 优惠券id
-        },
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          title: "会员名称",
-          key: "memberName",
-          minWidth: 130,
-          fixed: "left",
-        },
-        {
-          title: "优惠券名称",
-          key: "couponName",
-          minWidth: 100,
-          tooltip: true,
-        },
-        {
-          title: "发布店铺",
-          key: "storeName",
-          minWidth: 100,
-          render: (h, params) => {
-            return h("div", (params.row.storeName === 'platform' && "平台") || params.row.storeName);
-          },
-        },
-        {
-          title: "面额/折扣",
-          key: "price",
-          width: 100,
-          render: (h, params) => {
-            if (params.row.price) {
-
-              return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-
-            } else {
-              return h("div", params.row.discount + "折");
-            }
-          },
-        },
-
-        {
-          title: "使用门槛",
-          key: "consumeThreshold",
-          width: 130,
-        },
-        {
-          title: "获取方式",
-          width: 120,
-          key: "getType",
-          render: (h, params) => {
-            if (params.row.getType === "FREE") {
-              return h("Tag", { props: { color: "red" } }, "免费获取");
-            } else if (params.row.getType === "ACTIVITY") {
-              return h("Tag", { props: { color: "volcano" } }, "活动获取");
-            } else if (params.row.getType === "INSIDE") {
-              return h("Tag", { props: { color: "lime" } }, "内购");
-            } else {
-              return h("Tag", { props: { color: "purple" } }, "未知");
-            }
-          },
-        },
-        {
-          title: "会员优惠券状态",
-          width: 130,
-          key: "memberCouponStatus",
-          render: (h, params) => {
-            return memberPromotionsStatusRender(
-              h,
-              params.row.memberCouponStatus
-            );
-          },
-        },
-        {
-          title: "优惠券类型",
-          key: "couponType",
-          width: 120,
-          render: (h, params) => {
-            if (params.row.couponType === "DISCOUNT") {
-              return h("Tag", { props: { color: "orange" } }, "打折");
-            } else if (params.row.couponType === "PRICE") {
-              return h("Tag", { props: { color: "magenta" } }, "减免现金");
-            } else {
-              return h("Tag", { props: { color: "purple" } }, "未知");
-            }
-          },
-        },
-        {
-          title: "品类描述",
-          key: "scopeType",
-          width: 120,
-          render: (h, params) => {
-            return promotionsScopeTypeRender(h, params);
-          },
-        },
-        {
-          title: "有效时间",
-          width: 150,
-          render: (h, params) => {
-            if (
-              params?.row?.getType === "ACTIVITY" &&
-              params?.row?.rangeDayType === "DYNAMICTIME"
-            ) {
-              return h("div", "长期有效");
-            } else if (params?.row?.startTime && params?.row?.endTime) {
-              return h("div", {
-                domProps: {
-                  innerHTML:
-                    params.row.startTime + "<br/>" + params.row.endTime,
-                },
-              });
-            }
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      refreshTable: true, // 修改选中状态后刷新表格
-      selectDate: [], //选中的信息
-    };
-  },
   props: {
     promotionStatus: {
       type: String,
       default: "",
     },
   },
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "create_time",
+        order: "desc",
+        getType: "",
+        couponId: this.$route.query.couponId,
+      },
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      total: 0,
+      refreshTable: true,
+      selectDate: [],
+    };
+  },
   watch: {
     $route(e) {
-      // 监听路由，参数变化调取接口
       this.searchForm.couponId = e.query.couponId;
       if (this.couponId) {
         this.getDataList();
       } else {
-        this.$refs.form.resetFields();
+        this.$refs.searchForm?.resetFields();
       }
     },
   },
@@ -263,40 +195,29 @@ export default {
       this.$router.go(-1);
     },
     check() {
-      // 选中的优惠券
       this.$emit("selected", this.selectList);
     },
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    changePage(v) {
-      // 改变页码
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getDataList();
     },
-    changePageSize(v) {
-      // 改变页数
+    changePageSize() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
       this.getDataList();
     },
     handleSearch() {
-      // 搜索
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    /**
-     * 选择优惠券
-     */
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
       if (this.getType === "ACTIVITY") this.check();
     },
     getDataList() {
-      // 获取数据
       this.loading = true;
       if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
         this.searchForm.startTime = this.selectDate[0].getTime();
@@ -308,13 +229,10 @@ export default {
       getCouponReceiveList(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
-          console.log(res);
           this.data = res.result.records;
           this.total = res.result.total;
         }
       });
-      this.total = this.data.length;
-      this.loading = false;
     },
   },
   mounted() {
diff --git a/manager/src/views/promotions/coupon/coupon.vue b/manager/src/views/promotions/coupon/coupon.vue
index 741b8afb..f6489e95 100644
--- a/manager/src/views/promotions/coupon/coupon.vue
+++ b/manager/src/views/promotions/coupon/coupon.vue
@@ -1,273 +1,197 @@
 <template>
   <div class="search">
-    <Card>
-      <Form
+    <el-card>
+      <el-form
         ref="searchForm"
         :model="searchForm"
         inline
-        :label-width="75"
+        label-width="90px"
         class="search-form mb_10"
+        @keyup.enter="handleSearch"
       >
-        <Form-item label="优惠券名称" prop="couponName">
-          <Input
-            type="text"
+        <el-form-item label="优惠券名称" prop="couponName">
+          <el-input
             v-model="searchForm.couponName"
             placeholder="请输入优惠券名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="获取方式" prop="getType">
-          <Select
-            v-model="searchForm.getType"
-            placeholder="请选择"
-            clearable
-            style="width: 240px"
-          >
-            <Option value="FREE">免费获取</Option>
-            <Option value="ACTIVITY">活动获取</Option>
-          </Select>
-        </Form-item>
-        <Form-item label="活动状态" prop="promotionStatus">
-          <Select
+        </el-form-item>
+        <el-form-item label="获取方式" prop="getType">
+          <el-select v-model="searchForm.getType" placeholder="请选择" clearable style="width: 240px">
+            <el-option label="免费获取" value="FREE" />
+            <el-option label="活动获取" value="ACTIVITY" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="活动状态" prop="promotionStatus">
+          <el-select
             v-model="searchForm.promotionStatus"
             placeholder="请选择"
             clearable
             style="width: 240px"
           >
-            <Option value="NEW">未开始</Option>
-            <Option value="START">已开始/上架</Option>
-            <Option value="END">已结束/下架</Option>
-            <Option value="CLOSE">紧急关闭/作废</Option>
-          </Select>
-        </Form-item>
-        <Form-item label="活动时间">
-          <DatePicker
+            <el-option label="未开始" value="NEW" />
+            <el-option label="已开始/上架" value="START" />
+            <el-option label="已结束/下架" value="END" />
+            <el-option label="紧急关闭/作废" value="CLOSE" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="活动时间">
+          <el-date-picker
             v-model="selectDate"
             type="daterange"
             clearable
-            placeholder="选择起始时间"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
             style="width: 240px"
-          ></DatePicker>
-        </Form-item>
-        <Button
-          @click="handleSearch"
-          type="primary"
-          icon="ios-search"
-          class="search-btn"
-          >搜索</Button
-        >
-      </Form>
-    </Card>
-    <Card>
-      <Row class="operation padding-row" v-if="getType !== 'ACTIVITY'">
-        <Button @click="add" type="primary">添加优惠券</Button>
-        <Button @click="delAll">批量关闭</Button>
-        <Button @click="receivePage()" type="info">优惠券领取记录</Button>
-      </Row>
-      <Table
-        v-if="refreshTable"
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <div class="operation padding-row" v-if="getType !== 'ACTIVITY'">
+        <el-button type="primary" @click="add">添加优惠券</el-button>
+        <el-button @click="delAll">批量关闭</el-button>
+        <el-button type="info" @click="receivePage()">优惠券领取记录</el-button>
+      </div>
+
+      <el-table
         ref="table"
-        @on-selection-change="changeSelect"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+        row-key="id"
+        @selection-change="changeSelect"
       >
-        <template slot-scope="{ row }" slot="action">
-          <a
-            v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
-            :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
-            @click="see(row)"
-            >编辑</a>
-          <a
-            v-else
-            :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
-            @click="see(row, 'onlyView')"
-            >查看</a>
-          <span
-            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
-            style="margin: 0 8px; color: #dcdee2"
-            >|</span>
-          <a
-            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
-            :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
-            @click="close(row)"
-            >关闭</a>
-          <span style="margin: 0 8px; color: #dcdee2">|</span>
-          <a
-            :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
-            @click="receivePage(row.id)"
-            >领取记录</a>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        <el-table-column type="selection" width="52" align="center" />
+        <el-table-column prop="couponName" label="优惠券名称" min-width="180" show-overflow-tooltip />
+        <el-table-column label="面额/折扣" width="150">
+          <template #default="{ row }">
+            <span v-if="row">
+              <span v-if="row.price" :style="{ color: $mainColor }">
+                {{ $filters.unitPrice(row.price, "￥") }}</span>
+              <span v-else>{{ row.couponDiscount }}折</span>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="已领取数量/总数量" width="180">
+          <template #default="{ row }">
+            <span v-if="row">
+              {{ row.receivedNum }}/{{ row.publishNum === 0 ? "不限制" : row.publishNum }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="已被使用的数量/已领取数量" width="200">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.usedNum }}/{{ row.receivedNum }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="获取方式" width="120">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="getTypeTagType(row.getType)">{{ getTypeText(row.getType) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="优惠券类型" width="120">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="couponTypeTagType(row.couponType)">
+              {{ couponTypeText(row.couponType) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="品类描述" width="120">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="scopeTypeTagType(row.scopeType)">
+              {{ scopeTypeText(row.scopeType) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动时间" width="200">
+          <template #default="{ row }">
+            <div v-if="row" class="activity-time" v-html="formatActivityTime(row)"></div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="showStatusColumn"
+          label="状态"
+          width="100"
+          align="center"
+          fixed="right"
+        >
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
+              {{ promotionStatusText(row.promotionStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="showActionColumn"
+          label="操作"
+          width="250"
+          align="center"
+          fixed="right"
+        >
+          <template #default="{ row }">
+            <template v-if="row">
+              <a
+                v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
+                class="link-text"
+                @click="see(row)"
+              >
+                编辑
+              </a>
+              <a v-else class="link-text" @click="see(row, 'onlyView')">查看</a>
+              <span
+                v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
+                class="op-split"
+              >
+                |
+              </span>
+              <a
+                v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
+                class="link-text"
+                @click="close(row)"
+              >
+                关闭
+              </a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="receivePage(row.id)">领取记录</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
+
 <script>
 import {
   getPlatformCouponList,
   updatePlatformCouponStatus,
   deletePlatformCoupon,
 } from "@/api/promotion";
-import {
-  promotionsStatusRender,
-  promotionsScopeTypeRender,
-  promotionsCouponActivityTimeRender,
-} from "@/utils/promotions";
+import { formatPromotionCouponValidityHtml } from "@/utils/promotions";
 
 export default {
   name: "coupon",
-  data() {
-    return {
-      loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "create_time", // 默认排序字段
-          order: "desc", // 默认排序方式
-          getType: "", // 默认排序方式
-        },
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 52,
-          align: "center",
-          /* 不使用 fixed：左侧固定列与主体表格分开渲染，叠加全局 .ivu-table table{width:100%} 易在接缝处留白；勾选列无需横向钉住 */
-        },
-        {
-          title: "优惠券名称",
-          key: "couponName",
-          minWidth: 140,
-          width: 180,
-          tooltip: true,
-        },
-        {
-          title: "面额/折扣",
-          key: "price",
-          width: 150,
-          render: (h, params) => {
-            if (params.row.price) {
-              return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-
-            } else {
-              return h("div", params.row.couponDiscount + "折");
-            }
-          },
-        },
-
-        {
-          title: "已领取数量/总数量",
-          key: "publishNum",
-          width: 180,
-          render: (h, params) => {
-            return h(
-              "div",
-              params.row.receivedNum +
-                "/" +
-                (params.row.publishNum === 0 ? "不限制" : params.row.publishNum)
-            );
-          },
-        },
-
-        {
-          title: "已被使用的数量/已领取数量",
-          key: "publishNum",
-          width: 100,
-          render: (h, params) => {
-            return h("div", params.row.usedNum + "/" + params.row.receivedNum);
-          },
-        },
-        {
-          title: "获取方式",
-          width: 120,
-          key: "getType",
-          render: (h, params) => {
-            if (params.row.getType === "FREE") {
-              return h("Tag", { props: { color: "red" } }, "免费获取");
-            } else if (params.row.getType === "ACTIVITY") {
-              return h("Tag", { props: { color: "volcano" } }, "活动获取");
-            } else if (params.row.getType === "INSIDE") {
-              return h("Tag", { props: { color: "lime" } }, "内购");
-            } else if (params.row.getType === "IGAME") {
-              return h("Tag", { props: { color: "lime" } }, "游戏人生");
-            } else {
-              return h("Tag", { props: { color: "purple" } }, "未知");
-            }
-          },
-        },
-        {
-          title: "优惠券类型",
-          key: "couponType",
-          width: 150,
-          render: (h, params) => {
-            let text = "";
-            if (params.row.couponType === "DISCOUNT") {
-              return h("Tag", { props: { color: "blue" } }, "打折");
-            } else if (params.row.couponType === "PRICE") {
-              return h("Tag", { props: { color: "geekblue" } }, "减免现金");
-            } else {
-              return h("Tag", { props: { color: "purple" } }, "未知");
-            }
-          },
-        },
-        {
-          title: "品类描述",
-          key: "scopeType",
-          width: 120,
-          render: (h, params) => {
-            return promotionsScopeTypeRender(h, params);
-          },
-        },
-        {
-          title: "活动时间",
-          width: 200,
-          render: promotionsCouponActivityTimeRender,
-        },
-        {
-          title: "状态",
-          width: 100,
-          key: "promotionStatus",
-          align: "center",
-          fixed: "right",
-          render: (h, params) => {
-            return promotionsStatusRender(h, params);
-          },
-        },
-        {
-          title: "操作",
-          slot: "action",
-          align: "center",
-          fixed: "right",
-          width: 250,
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      refreshTable: true, // 修改选中状态后刷新表格
-      selectDate: [], //选中的信息
-    };
-  },
   props: {
-    //优惠券类型 查询参数
     getType: {
       type: String,
       default: "",
@@ -276,52 +200,129 @@ export default {
       type: String,
       default: "",
     },
-    //已选择优惠券
     selectedList: {
       type: Array,
-      default: () => {
-        return [];
-      },
+      default: () => [],
     },
   },
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "create_time",
+        order: "desc",
+        getType: "",
+      },
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      total: 0,
+      selectDate: [],
+      showActionColumn: true,
+      showStatusColumn: true,
+    };
+  },
   watch: {
-    $route(to, from) {
+    $route(to) {
       if (to.fullPath == "/promotions/manager-coupon") {
         this.init();
       }
     },
-    // 选中优惠券 父级传值
     selectedList: {
       handler(val) {
-        // 判断是否是父级回调给自己已选择优惠券
-        if (val.length) {
-          this.selectList = val;
-          this.data.forEach((item) => {
-            item._checked = false;
-            if (this.selectList.length) {
-              this.selectList.forEach((child) => {
-                if (item.id == child.id) {
-                  item._checked = true;
-                }
-              });
-            }
-          });
-        } else {
-          this.data.forEach((item) => {
-            item._checked = false;
-          });
-        }
-        this.refreshTable = false;
         this.$nextTick(() => {
-          this.refreshTable = true;
+          this.syncTableSelection(val);
         });
       },
       deep: true,
     },
   },
   methods: {
+    formatActivityTime(row) {
+      return formatPromotionCouponValidityHtml(row);
+    },
+    promotionStatusText(status) {
+      const map = {
+        NEW: "未开始",
+        START: "已开始",
+        END: "已结束",
+        CLOSE: "已关闭",
+      };
+      return map[status] || "未知";
+    },
+    promotionStatusTagType(status) {
+      const map = {
+        NEW: "info",
+        START: "success",
+        END: "danger",
+        CLOSE: "danger",
+      };
+      return map[status] || "danger";
+    },
+    scopeTypeText(type) {
+      const map = {
+        ALL: "全品类",
+        PORTION_GOODS_CATEGORY: "商品分类",
+        PORTION_SHOP_CATEGORY: "店铺分类",
+        PORTION_GOODS: "指定商品",
+      };
+      return map[type] || "未知";
+    },
+    scopeTypeTagType(type) {
+      const map = {
+        ALL: "info",
+        PORTION_GOODS_CATEGORY: "warning",
+        PORTION_SHOP_CATEGORY: "warning",
+        PORTION_GOODS: "primary",
+      };
+      return map[type] || "danger";
+    },
+    getTypeText(type) {
+      const map = {
+        FREE: "免费获取",
+        ACTIVITY: "活动获取",
+        INSIDE: "内购",
+        IGAME: "游戏人生",
+      };
+      return map[type] || "未知";
+    },
+    getTypeTagType(type) {
+      const map = {
+        FREE: "danger",
+        ACTIVITY: "warning",
+        INSIDE: "success",
+        IGAME: "success",
+      };
+      return map[type] || "";
+    },
+    couponTypeText(type) {
+      const map = {
+        DISCOUNT: "打折",
+        PRICE: "减免现金",
+      };
+      return map[type] || "未知";
+    },
+    couponTypeTagType(type) {
+      const map = {
+        DISCOUNT: "primary",
+        PRICE: "info",
+      };
+      return map[type] || "";
+    },
+    syncTableSelection(selected) {
+      const table = this.$refs.table;
+      if (!table) return;
+      table.clearSelection();
+      if (!selected || !selected.length) return;
+      this.data.forEach((row) => {
+        if (selected.some((item) => item.id === row.id)) {
+          table.toggleRowSelection(row, true);
+        }
+      });
+    },
     check() {
-      // 选中的优惠券
       this.$emit("selected", this.selectList);
     },
     receivePage(id) {
@@ -331,84 +332,69 @@ export default {
         this.$router.push({ name: "coupon-receive" });
       }
     },
-    // 初始化数据
     init() {
       this.getDataList();
     },
     add() {
-      // 跳转添加页面
       this.$router.push({ name: "add-platform-coupon" });
     },
-    info(v) {
-      // 查看优惠券
-      this.$router.push({ name: "platform-coupon-info", query: { id: v.id } });
-    },
     changePage(v) {
-      // 改变页码
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
     changePageSize(v) {
-      // 改变页数
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
     handleSearch() {
-      // 搜索
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
     clearSelectAll() {
-      // 清除选中状态
-      this.$refs.table.selectAll(false);
+      this.$refs.table?.clearSelection();
     },
-    /**
-     * 选择优惠券
-     */
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
       if (this.getType === "ACTIVITY") this.check();
     },
     getDataList() {
-      // 获取数据
       this.loading = true;
       if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = this.selectDate[0].getTime();
-        this.searchForm.endTime = this.selectDate[1].getTime();
+        this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
+        this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
       } else {
         this.searchForm.startTime = null;
         this.searchForm.endTime = null;
       }
-      getPlatformCouponList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          console.log(res);
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-      this.total = this.data.length;
-      this.loading = false;
+      getPlatformCouponList(this.searchForm)
+        .then((res) => {
+          if (res.success) {
+            this.data = res.result.records;
+            this.total = res.result.total;
+            this.$nextTick(() => {
+              if (this.selectedList.length) {
+                this.syncTableSelection(this.selectedList);
+              }
+            });
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
-
     see(v, only) {
-      // 跳转编辑页面
-      let data;
-      only ? (data = { onlyView: true, id: v.id }) : (data = { id: v.id });
+      const data = only ? { onlyView: true, id: v.id } : { id: v.id };
       this.$router.push({ name: "edit-platform-coupon", query: data });
     },
     close(v) {
-      // 下架优惠券
       this.$Modal.confirm({
         title: "确认关闭",
-        // 记得确认修改此处
         content: "确认要关闭此优惠券么?",
         loading: true,
         onOk: () => {
-          // 删除
           updatePlatformCouponStatus({
             couponIds: v.id,
             effectiveDays: 0,
@@ -421,20 +407,17 @@ export default {
               }
             })
             .catch(() => {
-              this.$Modal;
+              this.$Modal.remove();
             });
         },
       });
     },
     remove(v) {
-      // 下架优惠券
       this.$Modal.confirm({
         title: "确认删除",
-        // 记得确认修改此处
         content: "确认要删除此优惠券么?",
         loading: true,
         onOk: () => {
-          // 删除
           deletePlatformCoupon(v.id)
             .then((res) => {
               this.$Modal.remove();
@@ -444,13 +427,12 @@ export default {
               }
             })
             .catch(() => {
-              this.$Modal;
+              this.$Modal.remove();
             });
         },
       });
     },
     delAll() {
-      // 批量下架
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未选择要下架的优惠券");
         return;
@@ -460,16 +442,11 @@ export default {
         content: "您确认要下架所选的 " + this.selectCount + " 条数据?",
         loading: true,
         onOk: () => {
-          let ids = [];
-          this.selectList.forEach(function (e) {
-            ids.push(e.id);
-          });
-          let params = {
+          const ids = this.selectList.map((e) => e.id);
+          updatePlatformCouponStatus({
             couponIds: ids.toString(),
             promotionStatus: "CLOSE",
-          };
-          // 批量删除
-          updatePlatformCouponStatus(params).then((res) => {
+          }).then((res) => {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("下架成功");
@@ -482,16 +459,40 @@ export default {
     },
   },
   mounted() {
-    //如果作为组件方式，传入了类型值，则搜索参数附加类型
     if (this.getType) {
       this.searchForm.getType = this.getType;
-      this.columns.pop();
+      this.showActionColumn = false;
     }
     if (this.promotionStatus) {
       this.searchForm.promotionStatus = this.promotionStatus;
-      this.columns.pop();
+      this.showStatusColumn = false;
     }
     this.init();
   },
 };
 </script>
+
+<style scoped>
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
+.activity-time {
+  line-height: 1.5;
+  word-break: break-all;
+}
+.mb_10 {
+  margin-bottom: 10px;
+}
+.mt_10 {
+  margin-top: 10px;
+}
+.padding-row {
+  margin-bottom: 10px;
+}
+</style>
diff --git a/manager/src/views/promotions/full-discount/full-discount-detail.vue b/manager/src/views/promotions/full-discount/full-discount-detail.vue
index c961b6a2..6aa432fd 100644
--- a/manager/src/views/promotions/full-discount/full-discount-detail.vue
+++ b/manager/src/views/promotions/full-discount/full-discount-detail.vue
@@ -1,34 +1,34 @@
 <template>
   <div>
-    <Card>
-      <Form ref="form" :model="form" :label-width="120">
+    <el-card>
+      <el-form ref="form" :model="form" label-width="120px">
         <div class="base-info-item">
           <h4>基本信息</h4>
           <div class="form-item-view">
-            <FormItem label="活动名称" prop="promotionName">
-              <Input
-                type="text"
+            <el-form-item label="活动名称" prop="promotionName">
+              <el-input
                 v-model="form.promotionName"
                 disabled
                 placeholder="活动名称"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="活动时间" prop="rangeTime">
-              <DatePicker
+            </el-form-item>
+            <el-form-item label="活动时间" prop="rangeTime">
+              <el-date-picker
                 type="datetimerange"
                 v-model="form.rangeTime"
                 disabled
-                format="yyyy-MM-dd HH:mm:ss"
+                format="YYYY-MM-DD HH:mm:ss"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
                 placeholder="请选择"
-                :options="options"
+                :disabled-date="options.disabledDate"
                 style="width: 320px"
-              >
-              </DatePicker>
-            </FormItem>
-            <FormItem label="活动描述" prop="description">
-              <Input
+              />
+            </el-form-item>
+            <el-form-item label="活动描述" prop="description">
+              <el-input
                 v-model="form.description"
                 disabled
                 type="textarea"
@@ -36,14 +36,13 @@
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
+            </el-form-item>
           </div>
 
           <h4>优惠设置</h4>
           <div class="form-item-view">
-            <FormItem label="优惠门槛" prop="fullMoney">
-              <Input
-                type="text"
+            <el-form-item label="优惠门槛" prop="fullMoney">
+              <el-input
                 v-model="form.fullMoney"
                 disabled
                 placeholder="优惠门槛"
@@ -51,153 +50,156 @@
                 style="width: 260px"
               />
               <span class="describe">消费达到当前金额可以参与优惠</span>
-            </FormItem>
-            <FormItem label="赠送优惠券">
-              <RadioGroup
-                type="button"
-                button-style="solid"
-                v-model="form.discountType"
-              >
-                <Radio label="fullMinusFlag" disabled>减现金</Radio>
-                <Radio label="fullRateFlag" disabled>打折</Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem
+            </el-form-item>
+            <el-form-item label="赠送优惠券">
+              <el-radio-group v-model="form.discountType">
+                <el-radio-button value="fullMinusFlag" disabled>减现金</el-radio-button>
+                <el-radio-button value="fullRateFlag" disabled>打折</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
               v-if="form.discountType == 'fullMinusFlag'"
               label="优惠金额"
               prop="fullMinus"
             >
-              <Input
-                type="text"
+              <el-input
                 disabled
                 v-model="form.fullMinus"
                 placeholder="优惠金额"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem
+            </el-form-item>
+            <el-form-item
               v-if="form.discountType == 'fullRateFlag'"
               label="优惠折扣"
               prop="fullRate"
             >
-              <InputNumber
+              <el-input-number
                 placeholder="优惠折扣"
                 :max="9.9"
                 :min="0.1"
                 :step="0.1"
-                precision="1"
+                :precision="1"
                 v-model="form.fullRate"
-                style="width: 260px"/>
+                style="width: 260px"
+              />
               <span class="describe">优惠折扣为0-10之间数字，可有一位小数</span>
-            </FormItem>
-            <FormItem label="额外赠送">
-              <Checkbox v-model="form.freeFreightFlag" disabled>免邮费</Checkbox
-              >&nbsp;
-              <Checkbox v-model="form.couponFlag" disabled>送优惠券</Checkbox
-              >&nbsp;
-              <Checkbox v-model="form.giftFlag" disabled>送赠品</Checkbox>&nbsp;
-              <Checkbox v-model="form.pointFlag" disabled>送积分</Checkbox>
-            </FormItem>
-            <FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId">
-              <Select
+            </el-form-item>
+            <el-form-item label="额外赠送">
+              <el-checkbox v-model="form.freeFreightFlag" disabled>免邮费</el-checkbox>
+              <el-checkbox v-model="form.couponFlag" disabled>送优惠券</el-checkbox>
+              <el-checkbox v-model="form.giftFlag" disabled>送赠品</el-checkbox>
+              <el-checkbox v-model="form.pointFlag" disabled>送积分</el-checkbox>
+            </el-form-item>
+            <el-form-item v-if="form.couponFlag" label="赠送优惠券" prop="couponId">
+              <el-select
                 v-model="form.couponId"
                 :disabled="form.promotionStatus != 'NEW'"
                 filterable
+                remote
                 :remote-method="getCouponList"
                 placeholder="输入优惠券名称搜索"
                 :loading="couponLoading"
                 style="width: 280px"
               >
-                <Option
+                <el-option
                   v-for="item in couponList"
                   :value="item.id"
                   :key="item.id"
-                  >{{ item.couponName }}</Option
-                >
-              </Select>
-            </FormItem>
-            <FormItem v-if="form.giftFlag" label="赠品" prop="giftId">
-              <Select
+                  :label="item.couponName"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item v-if="form.giftFlag" label="赠品" prop="giftId">
+              <el-select
                 v-model="form.giftId"
                 filterable
+                remote
                 :remote-method="getGiftList"
                 placeholder="输入赠品名称搜索"
                 disabled
                 :loading="giftLoading"
                 style="width: 260px"
               >
-                <Option
+                <el-option
                   v-for="item in giftList"
                   :value="item.id"
                   :key="item.id"
-                  >{{ item.goodsName }}</Option
-                >
-              </Select>
-            </FormItem>
-            <FormItem v-if="form.pointFlag" label="赠积分" prop="point">
-              <Input
+                  :label="item.goodsName"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item v-if="form.pointFlag" label="赠积分" prop="point">
+              <el-input
                 v-model="form.point"
                 type="number"
                 disabled
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="使用范围" prop="scopeType">
-              <RadioGroup
-                type="button"
-                button-style="solid"
-                v-model="form.scopeType"
-              >
-                <Radio label="ALL" disabled>全品类</Radio>
-                <Radio label="PORTION_GOODS" disabled>指定商品</Radio>
-              </RadioGroup>
-            </FormItem>
+            </el-form-item>
+            <el-form-item label="使用范围" prop="scopeType">
+              <el-radio-group v-model="form.scopeType">
+                <el-radio-button value="ALL" disabled>全品类</el-radio-button>
+                <el-radio-button value="PORTION_GOODS" disabled>指定商品</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
 
-            <FormItem
+            <el-form-item
               style="width: 100%"
               v-if="form.scopeType == 'PORTION_GOODS'"
             >
-              <Table border :columns="columns" :data="form.promotionGoodsList">
-                <template slot-scope="{ row }" slot="goodsName">
-                  <div>
-                    <a class="mr_10" @click="linkTo(row.goodsId, row.skuId)">{{
-                      row.goodsName
-                    }}</a>
-                    <Poptip trigger="hover" title="扫码在手机中查看" transfer>
-                      <div slot="content">
+              <el-table border :data="form.promotionGoodsList" style="width: 100%">
+                <el-table-column type="selection" width="60" align="center" />
+                <el-table-column label="商品名称" min-width="120" show-overflow-tooltip>
+                  <template #default="{ row }">
+                    <template v-if="row">
+                      <a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{
+                        row.goodsName
+                      }}</a>
+                      <el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
+                        <template #reference>
+                          <img
+                            src="../../../assets/qrcode.svg"
+                            style="vertical-align: middle"
+                            class="hover-pointer"
+                            width="20"
+                            height="20"
+                            alt=""
+                          />
+                        </template>
                         <vue-qr
                           :text="wapLinkTo(row.goodsId, row.skuId)"
                           :margin="0"
-                          colorDark="#000"
-                          colorLight="#fff"
+                          color-dark="#000"
+                          color-light="#fff"
                           :size="150"
-                        ></vue-qr>
-                      </div>
-                      <img
-                        src="../../../assets/qrcode.svg"
-                        style="vertical-align: middle"
-                        class="hover-pointer"
-                        width="20"
-                        height="20"
-                        alt=""
-                      />
-                    </Poptip>
-                  </div>
-                </template>
-              </Table>
-            </FormItem>
+                        />
+                      </el-popover>
+                    </template>
+                  </template>
+                </el-table-column>
+                <el-table-column label="商品价格" width="110">
+                  <template #default="{ row }">
+                    <span v-if="row" :style="{ color: $mainColor }">
+                      {{ $filters.unitPrice(row.price, "￥") }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="库存" width="90">
+                  <template #default="{ row }">
+                    <span v-if="row">{{ row.quantity }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
 
             <div>
-              <Button
-                @click="$router.push({ name: 'promotions/full-discount' })"
-                >返回</Button
-              >
+              <el-button @click="$router.push({ name: 'promotions/full-discount' })">返回</el-button>
             </div>
           </div>
         </div>
-      </Form>
-    </Card>
+      </el-form>
+    </el-card>
   </div>
 </template>
 
@@ -213,40 +215,15 @@ export default {
   data() {
     return {
       form: {
-        // 表单
         discountType: "fullMinusFlag",
         scopeType: "ALL",
         promotionGoodsList: [],
       },
-      id: this.$route.query.id, // 活动id
-      couponList: [], // 优惠券列表
-      giftList: [], // 赠品列表
-      giftLoading: false, // 赠品加载状态
-      columns: [
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "商品名称",
-          slot: "goodsName",
-          minWidth: 120,
-        },
-        {
-          title: "商品价格",
-          key: "price",
-          minWidth: 40,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "库存",
-          key: "quantity",
-          minWidth: 40,
-        },
-      ],
+      id: this.$route.query.id,
+      couponList: [],
+      giftList: [],
+      giftLoading: false,
+      couponLoading: false,
       options: {
         disabledDate(date) {
           return date && date.valueOf() < Date.now() - 86400000;
@@ -263,7 +240,6 @@ export default {
   },
   methods: {
     getDetail() {
-      // 获取活动详情
       getFullDiscountById(this.id).then((res) => {
         let data = res.result;
         if (!data.scopeType === "ALL") {
@@ -283,7 +259,6 @@ export default {
       });
     },
     getCouponList(query) {
-      // 优惠券列表
       let params = {
         pageSize: 20,
         pageNumber: 1,
@@ -301,7 +276,6 @@ export default {
       });
     },
     getGiftList(query) {
-      // 赠品列表
       let params = {
         pageSize: 20,
         pageNumber: 1,
@@ -339,4 +313,9 @@ h4 {
   margin-left: 10px;
   color: #999;
 }
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
 </style>
diff --git a/manager/src/views/promotions/full-discount/full-discount.vue b/manager/src/views/promotions/full-discount/full-discount.vue
index 0a3c0658..cf184fb1 100644
--- a/manager/src/views/promotions/full-discount/full-discount.vue
+++ b/manager/src/views/promotions/full-discount/full-discount.vue
@@ -1,189 +1,154 @@
 <template>
-  <div class="full-cut">
-    <Card>
-      <Row>
-        <Form
-          ref="searchForm"
-          :model="searchForm"
-          inline
-          :label-width="70"
-          class="search-form"
-        >
-          <Form-item label="活动名称" prop="promotionName">
-            <Input
-              type="text"
-              v-model="searchForm.promotionName"
-              placeholder="请输入活动名称"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="活动状态" prop="promotionStatus">
-            <Select
-              v-model="searchForm.promotionStatus"
-              placeholder="请选择"
-              clearable
-              style="width: 240px"
-            >
-              <Option value="NEW">未开始</Option>
-              <Option value="START">已开始/上架</Option>
-              <Option value="END">已结束/下架</Option>
-              <Option value="CLOSE">紧急关闭/作废</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="活动时间">
-            <DatePicker
-              v-model="selectDate"
-              type="daterange"
-              clearable
-              placeholder="选择起始时间"
-              style="width: 240px"
-            >
-            </DatePicker>
-          </Form-item>
-          <Button
-            @click="handleSearch"
-            type="primary"
-            class="search-btn"
-            icon="ios-search"
-            >搜索</Button
-          >
-        </Form>
-      </Row>
-      </Card>
-    <Card>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-        class="mt_10"
-        sortable="custom"
+  <div class="search full-cut">
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <template slot-scope="{ row }" slot="applyEndTime">
-          {{ unixDate(row.applyEndTime) }}
-        </template>
-        <template slot-scope="{ row }" slot="promotionType">
-          {{ row.fullMinusFlag ? "满减" : "满折" }}
-        </template>
-        <template slot-scope="{ row }" slot="hours">
-          <Tag v-for="item in unixHours(row.hours)" :key="item">{{ item }}</Tag>
-        </template>
-        <template slot-scope="{ row }" slot="action">
-          <div>
-            <a
-              :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
-              @click="view(row)"
-            >查看</a>
-            <span
-              v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'START'"
-              style="margin: 0 8px; color: #dcdee2"
-            >|</span>
-            <a
-              v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'START'"
-              :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
-              @click="openOrClose(row)"
-            >关闭</a>
-          </div>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        <el-form-item label="活动名称" prop="promotionName">
+          <el-input
+            v-model="searchForm.promotionName"
+            placeholder="请输入活动名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="活动状态" prop="promotionStatus">
+          <el-select
+            v-model="searchForm.promotionStatus"
+            placeholder="请选择"
+            clearable
+            style="width: 240px"
+          >
+            <el-option label="未开始" value="NEW" />
+            <el-option label="已开始/上架" value="START" />
+            <el-option label="已结束/下架" value="END" />
+            <el-option label="紧急关闭/作废" value="CLOSE" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="活动时间">
+          <el-date-picker
+            v-model="selectDate"
+            type="daterange"
+            clearable
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column prop="promotionName" label="活动名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="startTime" label="开始时间" width="170" />
+        <el-table-column prop="endTime" label="结束时间" width="170" />
+        <el-table-column prop="storeName" label="店铺名称" min-width="100" show-overflow-tooltip />
+        <el-table-column label="活动类型" min-width="80">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.fullMinusFlag ? "满减" : "满折" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动状态" min-width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
+              {{ promotionStatusText(row.promotionStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="140" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="view(row)">查看</a>
+              <template v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'START'">
+                <span class="op-split">|</span>
+                <a class="link-text" @click="openOrClose(row)">关闭</a>
+              </template>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
+
 <script>
 import { getFullDiscountList, updateFullDiscount } from "@/api/promotion.js";
-import { promotionsStatusRender } from "@/utils/promotions";
 
 export default {
   data() {
     return {
       selectDate: [],
       total: 0,
-      loading: false, // 表单加载状态
-        searchForm: {
-          // 请求参数
-          pageNumber: 1,
-          pageSize: 20,
-          sort: "createTime",
-          order: "desc",
-        },
-      columns: [
-        // 表头
-        {
-          title: "活动名称",
-          key: "promotionName",
-          minWidth: 120,
-        },
-        {
-          title: "开始时间",
-          key: "startTime",
-          width: 170,
-        },
-        {
-          title: "结束时间",
-          key: "endTime",
-          width: 170,
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          minWidth: 60,
-        },
-        {
-          title: "活动类型",
-          slot: "promotionType",
-          minWidth: 60,
-        },
-        {
-          title: "活动状态",
-          key: "promotionStatus",
-          minWidth: 60,
-          render: (h, params) => {
-            return promotionsStatusRender(h, params);
-          },
-        },
-        {
-          title: "操作",
-          slot: "action",
-          align: "center",
-          width: 140,
-        },
-      ],
-      data: [], // 列表数据
+      loading: false,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+      },
+      data: [],
     };
   },
   methods: {
-    // 初始化数据
+    promotionStatusText(status) {
+      const map = {
+        NEW: "未开始",
+        START: "已开始",
+        END: "已结束",
+        CLOSE: "已关闭",
+      };
+      return map[status] || "未知";
+    },
+    promotionStatusTagType(status) {
+      const map = {
+        NEW: "info",
+        START: "success",
+        END: "danger",
+        CLOSE: "danger",
+      };
+      return map[status] || "danger";
+    },
     init() {
       this.getDataList();
     },
-    // 开启或关闭活动
     openOrClose(row) {
       let name = "开启";
-      if (row.promotionStatus === 'NEW' ||row.promotionStatus === "START") {
+      if (row.promotionStatus === "NEW" || row.promotionStatus === "START") {
         name = "关闭";
         this.$Modal.confirm({
           title: "提示",
-          // 记得确认修改此处
           content: `确认${name}此活动吗?需要一定时间才能生效，请耐心等待`,
           loading: true,
           onOk: () => {
-            // 删除
             updateFullDiscount(row.id).then((res) => {
               this.$Modal.remove();
               if (res.success) {
@@ -195,24 +160,18 @@ export default {
         });
       }
     },
-    changePage(v) {
-      // 改变页数
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getDataList();
     },
-    changePageSize(v) {
-      // 改变页码
+    changePageSize() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
       this.getDataList();
     },
     handleSearch() {
-      // 搜索
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
       if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
@@ -225,14 +184,12 @@ export default {
       getFullDiscountList(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
-          console.log(res)
           this.data = res.result.records;
           this.total = res.result.total;
         }
       });
     },
     view(row) {
-      // 查看
       this.$router.push({ name: "full-discount-detail", query: { id: row.id } });
     },
   },
@@ -241,3 +198,20 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.op-split {
+  margin: 0 8px;
+  color: #dcdfe6;
+}
+
+.mt_10 {
+  margin-top: 10px;
+}
+</style>
diff --git a/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity-add.vue b/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity-add.vue
index a5871f54..3922d397 100644
--- a/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity-add.vue
+++ b/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity-add.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <Card :loading="detailLoading">
-      <Form ref="form" :model="form" :label-width="130" :rules="onlyView ? {} : formRule">
+    <el-card v-loading="detailLoading">
+      <el-form ref="form" :model="form" label-width="130px" :rules="onlyView ? {} : formRule">
         <div class="base-info-item">
           <h4>{{ pageTitle }}</h4>
           <div class="form-item-view gift-card-activity-form">
-            <FormItem label="礼品卡名称" prop="giftCardName">
-              <Input
+            <el-form-item label="礼品卡名称" prop="giftCardName">
+              <el-input
                 v-model="form.giftCardName"
                 type="text"
                 placeholder="请输入礼品卡名称"
@@ -16,15 +16,15 @@
                 style="width: 360px"
                 :disabled="onlyView"
               />
-            </FormItem>
-            <FormItem label="礼品卡类型" prop="cardType" class="gift-card-type-form-item">
-              <RadioGroup v-model="form.cardType" class="gift-card-type-group">
-                <Radio label="CASH" :disabled="onlyView">现金卡</Radio>
-                <Radio label="PICKUP" disabled>提货卡</Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem label="面值" prop="faceValue">
-              <Input
+            </el-form-item>
+            <el-form-item label="礼品卡类型" prop="cardType" class="gift-card-type-form-item">
+              <el-radio-group v-model="form.cardType" class="gift-card-type-group">
+                <el-radio value="CASH" :disabled="onlyView">现金卡</el-radio>
+                <el-radio value="PICKUP" disabled>提货卡</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="面值" prop="faceValue">
+              <el-input
                 v-model="form.faceValue"
                 type="text"
                 placeholder="面值"
@@ -32,9 +32,9 @@
                 style="width: 200px"
                 :disabled="onlyView"
               />
-            </FormItem>
-            <FormItem label="总库存" prop="stockTotal">
-              <InputNumber
+            </el-form-item>
+            <el-form-item label="总库存" prop="stockTotal">
+              <el-input-number
                 v-model="form.stockTotal"
                 :min="1"
                 :precision="0"
@@ -42,21 +42,21 @@
                 style="width: 200px"
                 :disabled="onlyView"
               />
-            </FormItem>
-            <FormItem prop="validityType" :label-width="0" class="gift-card-validity-form-item">
+            </el-form-item>
+            <el-form-item prop="validityType" :label-width="0" class="gift-card-validity-form-item">
               <div class="gift-card-validity-outer">
                 <div class="gift-card-validity-label-col">
                   <span v-if="!onlyView" class="gift-card-validity-required">*</span>
                   <span>有效期</span>
                 </div>
                 <div class="gift-card-validity-radios">
-                  <RadioGroup v-model="form.validityType" vertical class="gift-card-validity-group">
-                    <Radio label="LONG_TERM" class="gift-card-validity-row" :disabled="onlyView"
-                      >长期有效</Radio
+                  <el-radio-group v-model="form.validityType" class="gift-card-validity-group">
+                    <el-radio value="LONG_TERM" class="gift-card-validity-row" :disabled="onlyView"
+                      >长期有效</el-radio
                     >
-                    <Radio label="AFTER_ACTIVATE_MONTHS" class="gift-card-validity-row" :disabled="onlyView">
+                    <el-radio value="AFTER_ACTIVATE_MONTHS" class="gift-card-validity-row" :disabled="onlyView">
                       <span>自激活后</span>
-                      <InputNumber
+                      <el-input-number
                         v-model="form.validMonthsAfterActivate"
                         :min="1"
                         :max="99"
@@ -66,39 +66,39 @@
                         class="gift-card-validity-input-gap"
                       />
                       <span>月内有效</span>
-                    </Radio>
-                    <Radio label="FIXED_UNTIL" class="gift-card-validity-row" :disabled="onlyView">
+                    </el-radio>
+                    <el-radio value="FIXED_UNTIL" class="gift-card-validity-row" :disabled="onlyView">
                       <span>指定有效期至</span>
-                      <DatePicker
+                      <el-date-picker
                         v-model="form.validEndTime"
                         type="datetime"
-                        format="yyyy-MM-dd HH:mm:ss"
+                        format="YYYY-MM-DD HH:mm:ss"
+                        value-format="YYYY-MM-DD HH:mm:ss"
                         placeholder="选择结束时间"
                         clearable
-                        transfer
                         :disabled="onlyView || form.validityType !== 'FIXED_UNTIL'"
                         class="gift-card-validity-date-gap"
                         style="width: 220px"
                       />
-                    </Radio>
-                  </RadioGroup>
+                    </el-radio>
+                  </el-radio-group>
                 </div>
               </div>
-            </FormItem>
+            </el-form-item>
           </div>
           <div class="foot-btn">
-            <Button style="margin-right: 8px" @click="closeCurrentPage">返回</Button>
-            <Button
+            <el-button style="margin-right: 8px" @click="closeCurrentPage">返回</el-button>
+            <el-button
               v-if="!onlyView"
               type="primary"
               :loading="submitLoading"
               @click="handleSubmit"
-              >提交</Button
+              >提交</el-button
             >
           </div>
         </div>
-      </Form>
-    </Card>
+      </el-form>
+    </el-card>
   </div>
 </template>
 
@@ -313,26 +313,22 @@ export default {
 </script>
 
 <style scoped>
-.gift-card-activity-form >>> .ivu-form-item {
+.gift-card-activity-form :deep(.el-form-item) {
   margin-bottom: 26px;
 }
-.gift-card-type-form-item >>> .ivu-form-item-label {
+.gift-card-type-form-item :deep(.el-form-item__label) {
   line-height: 32px;
   padding-top: 1px;
 }
-.gift-card-type-form-item >>> .ivu-form-item-content {
+.gift-card-type-form-item :deep(.el-form-item__content) {
   display: flex;
   align-items: center;
   min-height: 32px;
 }
-.gift-card-type-group >>> .ivu-radio-wrapper {
-  margin-right: 32px;
-  line-height: 32px;
-  display: inline-flex !important;
-  align-items: center;
-  vertical-align: middle;
+.gift-card-type-group {
+  gap: 20px;
 }
-.gift-card-validity-form-item >>> .ivu-form-item-content {
+.gift-card-validity-form-item :deep(.el-form-item__content) {
   margin-left: 0 !important;
 }
 .gift-card-validity-outer {
@@ -367,20 +363,15 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
 }
-.gift-card-type-group >>> .ivu-radio {
+.gift-card-validity-group :deep(.el-radio) {
   display: inline-flex;
   align-items: center;
   line-height: 1;
 }
-.gift-card-validity-group >>> .ivu-radio {
-  display: inline-flex;
-  align-items: center;
-  line-height: 1;
-}
-.gift-card-validity-group >>> .ivu-radio-wrapper:first-child {
+.gift-card-validity-group :deep(.el-radio:first-child) {
   margin-top: 0;
 }
-.gift-card-validity-group >>> .ivu-radio-wrapper {
+.gift-card-validity-group :deep(.el-radio) {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -388,7 +379,7 @@ export default {
   line-height: 32px;
   min-height: 32px;
 }
-.gift-card-validity-group >>> .ivu-radio-wrapper:last-child {
+.gift-card-validity-group :deep(.el-radio:last-child) {
   margin-bottom: 0;
 }
 .gift-card-validity-input-gap {
diff --git a/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity.vue b/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity.vue
index 9bad9270..8deb9046 100644
--- a/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity.vue
+++ b/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity.vue
@@ -1,90 +1,153 @@
 <template>
   <div class="search">
-    <Card>
-      <Form
+    <el-card>
+      <el-form
         ref="searchForm"
         :model="searchForm"
         inline
-        :label-width="80"
+        label-width="80px"
         class="search-form mb_10"
+        @keyup.enter="handleSearch"
       >
-        <Form-item label="礼品卡名称" prop="giftCardName">
-          <Input
+        <el-form-item label="礼品卡名称" prop="giftCardName">
+          <el-input
             v-model="searchForm.giftCardName"
-            type="text"
             placeholder="模糊搜索礼品卡名称"
             clearable
             style="width: 260px"
           />
-        </Form-item>
-        <Button type="primary" icon="ios-search" class="search-btn" @click="handleSearch"
-          >搜索</Button
-        >
-      </Form>
-    </Card>
-    <Card>
-      <Row class="operation padding-row">
-        <Button type="primary" @click="addActivity">添加礼品卡</Button>
-      </Row>
-      <Table :loading="loading" :columns="columns" :data="data" ref="table">
-        <template slot-scope="{ row }" slot="action">
-          <template v-if="canEdit(row)">
-            <a :style="linkStyle" @click.prevent="goEdit(row)">编辑</a>
-            <span :style="sepStyle">|</span>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="addActivity">添加礼品卡</el-button>
+      </div>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%"
+      >
+        <el-table-column prop="giftCardName" label="礼品卡名称" min-width="100" show-overflow-tooltip />
+        <el-table-column label="礼品卡类型" width="120">
+          <template #default="{ row }">
+            <span v-if="row">{{ cardTypeText(row.cardType) }}</span>
           </template>
-          <a :style="linkStyle" @click.prevent="goView(row)">查看</a>
-          <template v-if="canBatchCreate(row)">
-            <span :style="sepStyle">|</span>
-            <a :style="linkStyle" @click.prevent="openBatchCreate(row)">批量制卡</a>
+        </el-table-column>
+        <el-table-column label="面值" width="120" align="right">
+          <template #default="{ row }">
+            <span v-if="row">
+              <span
+                v-if="row.faceValue != null && row.faceValue !== ''"
+                :style="{ color: $mainColor }"
+              >
+                {{ $filters.unitPrice(row.faceValue, "￥") }}</span>
+              <span v-else>-</span>
+            </span>
           </template>
-          <template v-if="canBatchIssue(row)">
-            <span :style="sepStyle">|</span>
-            <a :style="linkStyle" @click.prevent="openBatchIssue(row)">批量发卡</a>
+        </el-table-column>
+        <el-table-column label="有效期" width="180">
+          <template #default="{ row }">
+            <span v-if="row">{{ formatValidity(row) }}</span>
           </template>
-          <span :style="sepStyle">|</span>
-          <a :style="linkStyle" @click.prevent="goRecords(row)">查看记录</a>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        </el-table-column>
+        <el-table-column label="总库存" width="100" align="center">
+          <template #default="{ row }">
+            <span v-if="row">{{ fmtInt(row.stockTotal) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="批量制卡数" width="110" align="center">
+          <template #default="{ row }">
+            <span v-if="row">{{ fmtInt(row.producedQuantity) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="批量发卡数" width="110" align="center">
+          <template #default="{ row }">
+            <span v-if="row">{{ fmtInt(row.issuedCardQuantity) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="剩余库存" width="100" align="center">
+          <template #default="{ row }">
+            <span v-if="row">{{ fmtInt(row.remainingStock) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="isFixedValidityExpired(row)" type="danger">已过期</el-tag>
+              <el-tag v-else type="success">正常</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="170" />
+        <el-table-column label="操作" align="right" width="380" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <template v-if="canEdit(row)">
+                <a class="link-text" @click.prevent="goEdit(row)">编辑</a>
+                <span class="op-split">|</span>
+              </template>
+              <a class="link-text" @click.prevent="goView(row)">查看</a>
+              <template v-if="canBatchCreate(row)">
+                <span class="op-split">|</span>
+                <a class="link-text" @click.prevent="openBatchCreate(row)">批量制卡</a>
+              </template>
+              <template v-if="canBatchIssue(row)">
+                <span class="op-split">|</span>
+                <a class="link-text" @click.prevent="openBatchIssue(row)">批量发卡</a>
+              </template>
+              <span class="op-split">|</span>
+              <a class="link-text" @click.prevent="goRecords(row)">查看记录</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
+          @current-change="changePage"
+          @size-change="changePageSize"
         />
-      </Row>
-    </Card>
-    <Modal
+      </div>
+    </el-card>
+
+    <el-dialog
       v-model="batchCreateVisible"
       title="批量制卡"
-      :mask-closable="false"
-      width="520"
-      @on-visible-change="onBatchCreateVisible"
+      width="520px"
+      :close-on-click-modal="false"
+      destroy-on-close
+      @closed="onBatchCreateClosed"
     >
-      <Form ref="batchForm" :model="batchForm" :rules="batchFormRule" :label-width="100">
-        <FormItem label="礼品卡名称">
+      <el-form ref="batchForm" :model="batchForm" :rules="batchFormRule" label-width="100px">
+        <el-form-item label="礼品卡名称">
           <span>{{ batchCtx.giftCardName || "-" }}</span>
-        </FormItem>
-        <FormItem label="面值">
+        </el-form-item>
+        <el-form-item label="面值">
           <template v-if="batchCtx.faceValue != null && batchCtx.faceValue !== ''">
-            <priceColorScheme
-              :value="batchCtx.faceValue"
-              :color="$mainColor"
-            ></priceColorScheme>
+            <span :style="{ color: $mainColor }">
+              {{ $filters.unitPrice(batchCtx.faceValue, "￥") }}</span>
           </template>
           <span v-else>-</span>
-        </FormItem>
-        <FormItem label="当前库存">
+        </el-form-item>
+        <el-form-item label="当前库存">
           <span>{{ fmtInt(batchCtx.headroom) }}</span>
-        </FormItem>
-        <FormItem label="制卡张数" prop="quantity">
-          <InputNumber
+        </el-form-item>
+        <el-form-item label="制卡张数" prop="quantity">
+          <el-input-number
             v-model="batchForm.quantity"
             :min="1"
             :max="batchQuantityMax"
@@ -92,9 +155,9 @@
             placeholder="请输入制卡张数"
             style="width: 220px"
           />
-        </FormItem>
-        <FormItem label="本批备注" prop="batchRemark">
-          <Input
+        </el-form-item>
+        <el-form-item label="本批备注" prop="batchRemark">
+          <el-input
             v-model="batchForm.batchRemark"
             type="textarea"
             :rows="2"
@@ -103,61 +166,62 @@
             placeholder="选填，最多64字"
             style="width: 100%"
           />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button @click="batchCreateVisible = false">取消</Button>
-        <Button type="primary" :loading="batchCreateSubmitting" @click="submitBatchCreate"
-          >确定</Button
-        >
-      </div>
-    </Modal>
-    <Modal
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="batchCreateVisible = false">取消</el-button>
+        <el-button type="primary" :loading="batchCreateSubmitting" @click="submitBatchCreate">
+          确定
+        </el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
       v-model="batchIssueVisible"
       title="批量发卡"
-      :mask-closable="false"
-      width="560"
-      @on-visible-change="onBatchIssueVisible"
+      width="560px"
+      :close-on-click-modal="false"
+      destroy-on-close
+      @closed="onBatchIssueClosed"
     >
       <div class="gcc-batch-issue-body">
-        <Form :label-width="100">
-          <FormItem label="礼品卡名称">
+        <el-form label-width="100px">
+          <el-form-item label="礼品卡名称">
             <span>{{ issueCtx.giftCardName || "-" }}</span>
-          </FormItem>
-        </Form>
-        <Alert type="info" show-icon class="mb_10">
+          </el-form-item>
+        </el-form>
+        <el-alert type="info" show-icon class="mb_10" :closable="false">
           请先下载模板，按列填写<strong>手机号</strong>、<strong>发卡数量</strong>后上传；发卡不区分制卡批次。
-        </Alert>
+        </el-alert>
         <div class="gcc-batch-issue-actions">
-          <Button
+          <el-button
             type="primary"
-            ghost
-            icon="md-download"
+            plain
             :loading="issueTemplateDownloading"
             @click="downloadIssueTemplate"
           >
             下载 Excel 模板
-          </Button>
+          </el-button>
         </div>
         <div class="gcc-batch-issue-upload">
           <span class="gcc-batch-issue-upload-label">上传已填写的 Excel</span>
-          <Upload
+          <el-upload
             :before-upload="onIssueImportBeforeUpload"
             accept=".xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
-            :show-upload-list="false"
+            :show-file-list="false"
           >
-            <Button type="dashed" icon="ios-cloud-upload-outline">选择文件</Button>
-          </Upload>
+            <el-button type="default">选择文件</el-button>
+          </el-upload>
           <span v-if="issueFileName" class="gcc-batch-issue-filename">{{ issueFileName }}</span>
         </div>
       </div>
-      <div slot="footer">
-        <Button @click="batchIssueVisible = false">取消</Button>
-        <Button type="primary" :loading="issueImportSubmitting" @click="submitIssueImport"
-          >开始发卡</Button
-        >
-      </div>
-    </Modal>
+      <template #footer>
+        <el-button @click="batchIssueVisible = false">取消</el-button>
+        <el-button type="primary" :loading="issueImportSubmitting" @click="submitIssueImport">
+          开始发卡
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -181,129 +245,8 @@ export default {
         order: "desc",
         giftCardName: "",
       },
-      columns: [
-        {
-          title: "礼品卡名称",
-          key: "giftCardName",
-          minWidth: 100,
-          tooltip: true,
-        },
-        {
-          title: "礼品卡类型",
-          key: "cardType",
-          width: 200,
-          render: (h, params) => {
-            const t = params.row.cardType;
-            const map = { CASH: "现金卡", PICKUP: "提货卡" };
-            return h("span", map[t] || t || "-");
-          },
-        },
-        {
-          title: "面值",
-          key: "faceValue",
-          width: 200,
-          align: "right",
-          render: (h, params) => {
-            const v = params.row.faceValue;
-            if (v === null || v === undefined || v === "") {
-              return h("span", "-");
-            }
-            return h("priceColorScheme", {
-              props: { value: v, color: this.$mainColor },
-            });
-          },
-        },
-        {
-          title: "有效期",
-          key: "validityType",
-          width: 200,
-          render: (h, params) => {
-            return h("span", this.formatValidity(params.row));
-          },
-        },
-        {
-          title: "总库存",
-          key: "stockTotal",
-          width: 200,
-          align: "center",
-          render: (h, params) =>
-            h("span", this.fmtInt(params.row.stockTotal)),
-        },
-        {
-          title: "批量制卡数",
-          key: "producedQuantity",
-          width: 200,
-          align: "center",
-          render: (h, params) =>
-            h("span", this.fmtInt(params.row.producedQuantity)),
-        },
-        {
-          title: "批量发卡数",
-          key: "issuedCardQuantity",
-          width: 200,
-          align: "center",
-          render: (h, params) =>
-            h("span", this.fmtInt(params.row.issuedCardQuantity)),
-        },
-        {
-          title: "剩余库存",
-          key: "remainingStock",
-          width: 200,
-          align: "center",
-          render: (h, params) =>
-            h("span", this.fmtInt(params.row.remainingStock)),
-        },
-        {
-          title: "状态",
-          key: "status",
-          width: 200,
-          render: (h, params) => {
-            if (this.isFixedValidityExpired(params.row)) {
-              return h("div", [
-                h(
-                  "Tag",
-                  {
-                    props: { color: "red" },
-                  },
-                  "已过期"
-                ),
-              ]);
-            }
-            return h("div", [
-              h(
-                "Tag",
-                {
-                  props: { color: "green" },
-                },
-                "正常"
-              ),
-            ]);
-          },
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          width: 200,
-        },
-        {
-          title: "操作",
-          slot: "action",
-          align: "right",
-          width: 380,
-        },
-      ],
       data: [],
       total: 0,
-      linkStyle: {
-        color: "#2d8cf0",
-        cursor: "pointer",
-        textDecoration: "none",
-      },
-      disabledLinkStyle: {
-        color: "#c5c8ce",
-        cursor: "not-allowed",
-      },
-      sepStyle: { margin: "0 8px", color: "#dcdee2" },
       batchCreateVisible: false,
       batchCreateSubmitting: false,
       batchCtx: {
@@ -349,6 +292,10 @@ export default {
     this.getDataList();
   },
   methods: {
+    cardTypeText(type) {
+      const map = { CASH: "现金卡", PICKUP: "提货卡" };
+      return map[type] || type || "-";
+    },
     validateBatchQuantity(rule, value, callback) {
       if (value === null || value === undefined || value === "") {
         callback(new Error("请填写制卡张数"));
@@ -376,7 +323,6 @@ export default {
       }
       return n;
     },
-    /** 固定到期类有效期且到期时间早于当前时间，列表状态展示为「已过期」 */
     isFixedValidityExpired(row) {
       if (!row || !row.validityType || row.validEndTime == null || row.validEndTime === "") {
         return false;
@@ -481,14 +427,12 @@ export default {
     canEdit(row) {
       return this.hasRemainingStock(row);
     },
-    /** 本次批量制卡允许的最大张数：以剩余库存为准 */
     getBatchCreateHeadroom(row) {
       return this.getRemainingStock(row);
     },
     canBatchCreate(row) {
       return this.hasRemainingStock(row);
     },
-    /** 可发卡余量：与制卡独立，以剩余库存为准 */
     getBatchIssuePool(row) {
       return this.getRemainingStock(row);
     },
@@ -510,11 +454,9 @@ export default {
       this.issueFileName = "";
       this.batchIssueVisible = true;
     },
-    onBatchIssueVisible(open) {
-      if (!open) {
-        this.issueFile = null;
-        this.issueFileName = "";
-      }
+    onBatchIssueClosed() {
+      this.issueFile = null;
+      this.issueFileName = "";
     },
     downloadIssueTemplate() {
       this.issueTemplateDownloading = true;
@@ -616,10 +558,8 @@ export default {
       this.batchForm.batchRemark = "";
       this.batchCreateVisible = true;
     },
-    onBatchCreateVisible(open) {
-      if (!open && this.$refs.batchForm && typeof this.$refs.batchForm.resetFields === "function") {
-        this.$refs.batchForm.resetFields();
-      }
+    onBatchCreateClosed() {
+      this.$refs.batchForm?.resetFields();
     },
     submitBatchCreate() {
       if (!this.$refs.batchForm) {
@@ -652,13 +592,11 @@ export default {
           });
       });
     },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getDataList();
     },
-    changePageSize(v) {
+    changePageSize() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
       this.getDataList();
     },
     handleSearch() {
@@ -705,8 +643,17 @@ export default {
   font-size: 14px;
 }
 .gcc-batch-issue-filename {
-  color: #2d8cf0;
+  color: #409eff;
   font-size: 13px;
   word-break: break-all;
 }
+.mb_10 {
+  margin-bottom: 10px;
+}
+.mt_10 {
+  margin-top: 10px;
+}
+.padding-row {
+  margin-bottom: 10px;
+}
 </style>
diff --git a/manager/src/views/promotions/gift-card-cash/gift-card-cash-batch-credentials.vue b/manager/src/views/promotions/gift-card-cash/gift-card-cash-batch-credentials.vue
index 8b98185e..623333d3 100644
--- a/manager/src/views/promotions/gift-card-cash/gift-card-cash-batch-credentials.vue
+++ b/manager/src/views/promotions/gift-card-cash/gift-card-cash-batch-credentials.vue
@@ -1,21 +1,20 @@
 <template>
   <div class="search gcc-batch-credentials">
-    <Card>
+    <el-card>
       <div class="gcc-records-toolbar">
-        <Button type="primary" class="gcc-records-back" @click="closePage">
-          返回
-        </Button>
+        <el-button type="primary" class="gcc-records-back" @click="closePage">返回</el-button>
       </div>
       <div v-if="giftCardName" class="gcc-records-meta mb_10">
         <strong>礼品卡：</strong>{{ giftCardName }}
       </div>
       <div class="gcc-records-meta mb_10">
         <strong>{{ batchTypeLabel }}：</strong>{{ batchIdDisplay || "—" }}
-        <span v-if="batchRemark" style="margin-left: 12px"><strong>本批备注：</strong>{{ batchRemark }}</span>
+        <span v-if="batchRemark" style="margin-left: 12px">
+          <strong>本批备注：</strong>{{ batchRemark }}</span>
       </div>
-      <Alert v-if="!activityId || !hasBatchId" type="warning">
+      <el-alert v-if="!activityId || !hasBatchId" type="warning" show-icon :closable="false">
         缺少活动或批次参数，请从{{ batchSourceLabel }}进入。
-      </Alert>
+      </el-alert>
       <template v-else>
         <div class="gcc-status-tabs">
           <span
@@ -23,78 +22,141 @@
             :key="t.key"
             :class="{ active: lifecycleTab === t.key }"
             @click="onLifecycleTab(t.key)"
-            >{{ t.label }}</span
           >
+            {{ t.label }}</span>
         </div>
-        <Form ref="searchForm" :model="searchForm" inline class="search-form mb_10 gcc-filter-form">
-          <FormItem label="卡号" prop="cardNo" :label-width="60">
-            <Input v-model="searchForm.cardNo" placeholder="请输入卡号" clearable style="width: 160px" />
-          </FormItem>
-          <FormItem :label-width="0" class="gcc-combo-item">
+        <el-form ref="searchForm" :model="searchForm" inline class="search-form mb_10 gcc-filter-form">
+          <el-form-item label="卡号" prop="cardNo" label-width="60px">
+            <el-input
+              v-model="searchForm.cardNo"
+              placeholder="请输入卡号"
+              clearable
+              style="width: 160px"
+            />
+          </el-form-item>
+          <el-form-item label-width="0" class="gcc-combo-item">
             <span class="gcc-combo-label">兑换会员</span>
-            <Select v-model="searchForm.redeemMemberField" style="width: 130px">
-              <Option value="nickName">兑换会员昵称</Option>
-              <Option value="mobile">兑换会员手机</Option>
-            </Select>
-            <Input
+            <el-select v-model="searchForm.redeemMemberField" style="width: 130px">
+              <el-option label="兑换会员昵称" value="nickName" />
+              <el-option label="兑换会员手机" value="mobile" />
+            </el-select>
+            <el-input
               v-model="searchForm.redeemMemberKeyword"
               placeholder="请输入"
               clearable
               style="width: 140px; margin-left: 4px"
             />
-          </FormItem>
-          <FormItem label="兑换时间" prop="redeemDateRange" :label-width="72">
-            <DatePicker
+          </el-form-item>
+          <el-form-item label="兑换时间" prop="redeemDateRange" label-width="72px">
+            <el-date-picker
               v-model="redeemDateRange"
               type="daterange"
               clearable
-              format="yyyy-MM-dd"
-              placeholder="开始日期"
+              value-format="YYYY-MM-DD"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
               style="width: 240px"
             />
-          </FormItem>
-          <FormItem :label-width="0" class="gcc-combo-item">
+          </el-form-item>
+          <el-form-item label-width="0" class="gcc-combo-item">
             <span class="gcc-combo-label">激活会员</span>
-            <Select v-model="searchForm.activateMemberField" style="width: 130px">
-              <Option value="nickName">激活会员昵称</Option>
-              <Option value="mobile">激活会员手机</Option>
-            </Select>
-            <Input
+            <el-select v-model="searchForm.activateMemberField" style="width: 130px">
+              <el-option label="激活会员昵称" value="nickName" />
+              <el-option label="激活会员手机" value="mobile" />
+            </el-select>
+            <el-input
               v-model="searchForm.activateMemberKeyword"
               placeholder="请输入"
               clearable
               style="width: 140px; margin-left: 4px"
             />
-          </FormItem>
-          <FormItem label="激活时间" prop="activateDateRange" :label-width="72">
-            <DatePicker
+          </el-form-item>
+          <el-form-item label="激活时间" prop="activateDateRange" label-width="72px">
+            <el-date-picker
               v-model="activateDateRange"
               type="daterange"
               clearable
-              format="yyyy-MM-dd"
-              placeholder="开始日期"
+              value-format="YYYY-MM-DD"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
               style="width: 240px"
             />
-          </FormItem>
-          <Button type="primary" icon="ios-search" class="search-btn" @click="handleSearch">搜索</Button>
-        </Form>
-        <Table :loading="loading" :columns="tableColumns" :data="data" />
-        <Row type="flex" justify="end" class="mt_10">
-          <Page
-            :current="searchForm.pageNumber"
+          </el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form>
+
+        <el-table v-if="!isIssueBatchMode" v-loading="loading" :data="data" style="width: 100%">
+          <el-table-column prop="cardNo" label="卡号" min-width="140" show-overflow-tooltip />
+          <el-table-column prop="cardSecret" label="卡密" min-width="120" show-overflow-tooltip />
+          <el-table-column label="面额" prop="faceValue" width="90" align="right">
+            <template #default="{ row }">
+              <span v-if="row">{{ formatPrice(row.faceValue) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="余额" prop="balance" width="90" align="right">
+            <template #default="{ row }">
+              <span v-if="row">{{ formatPrice(row.balance) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" prop="status" width="90" align="center">
+            <template #default="{ row }">
+              <span v-if="row">{{ formatStatus(row.status) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="memberMobile" label="会员手机" width="120" show-overflow-tooltip />
+          <el-table-column prop="memberNickName" label="会员昵称" min-width="100" show-overflow-tooltip />
+          <el-table-column prop="bindTime" label="绑定时间" width="165" />
+          <el-table-column prop="expireTime" label="到期时间" width="165" />
+          <el-table-column prop="createTime" label="创建时间" width="165" />
+        </el-table>
+        <el-table v-else v-loading="loading" :data="data" style="width: 100%">
+          <el-table-column prop="cardNo" label="卡号" min-width="140" show-overflow-tooltip />
+          <el-table-column label="发卡批次ID" min-width="160" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span v-if="row">{{ formatIssueBatchId(row) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="发卡会员" min-width="150">
+            <template #default="{ row }">
+              <span v-if="row">{{ formatIssueMember(row) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="发卡状态" width="110" align="center">
+            <template #default="{ row }">
+              <span v-if="row">{{ formatIssueStatus(row.issueStatus) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="激活会员" min-width="150">
+            <template #default="{ row }">
+              <span v-if="row">{{ formatActivationMember(row) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="激活时间" width="165">
+            <template #default="{ row }">
+              <span v-if="row">{{ formatActivationTime(row) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <span v-if="row">{{ formatStatus(row.status) }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <div class="mt_10" style="display: flex; justify-content: flex-end">
+          <el-pagination
+            v-model:current-page="searchForm.pageNumber"
+            v-model:page-size="searchForm.pageSize"
+            :page-sizes="[20, 50, 100]"
             :total="total"
-            :page-size="searchForm.pageSize"
-            :page-size-opts="[20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
             size="small"
-            show-total
-            show-elevator
-            show-sizer
-            @on-change="changePage"
-            @on-page-size-change="changePageSize"
+            @current-change="changePage"
+            @size-change="changePageSize"
           />
-        </Row>
+        </div>
       </template>
-    </Card>
+    </el-card>
   </div>
 </template>
 
@@ -173,91 +235,6 @@ export default {
     batchIdDisplay() {
       return this.isIssueBatchMode ? this.issueBatchId : this.createBatchId;
     },
-    createBatchColumns() {
-      return [
-        { title: "卡号", key: "cardNo", minWidth: 140, tooltip: true },
-        { title: "卡密", key: "cardSecret", minWidth: 120, tooltip: true },
-        { title: "面额", key: "faceValue", width: 90, align: "right" },
-        { title: "余额", key: "balance", width: 90, align: "right" },
-        {
-          title: "状态",
-          key: "status",
-          width: 90,
-          align: "center",
-          render: (h, params) => {
-            const s = params.row.status;
-            return h("span", STATUS_LABEL[s] || s || "—");
-          },
-        },
-        { title: "会员手机", key: "memberMobile", width: 120, tooltip: true },
-        { title: "会员昵称", key: "memberNickName", minWidth: 100, tooltip: true },
-        { title: "绑定时间", key: "bindTime", width: 165 },
-        { title: "到期时间", key: "expireTime", width: 165 },
-        { title: "创建时间", key: "createTime", width: 165 },
-      ];
-    },
-    issueBatchColumns() {
-      return [
-        { title: "卡号", key: "cardNo", minWidth: 140, tooltip: true },
-        {
-          title: "发卡批次ID",
-          key: "issueBatchId",
-          minWidth: 160,
-          tooltip: true,
-          render: (h, params) => {
-            const id = params.row.issueBatchId ?? this.issueBatchId;
-            return h("span", id != null && id !== "" ? String(id) : "—");
-          },
-        },
-        {
-          title: "发卡会员",
-          key: "issueMember",
-          minWidth: 150,
-          render: (h, params) => h("span", this.formatIssueMember(params.row)),
-        },
-        {
-          title: "发卡状态",
-          key: "issueStatus",
-          width: 110,
-          align: "center",
-          render: (h, params) => {
-            const s = params.row.issueStatus;
-            return h("span", ISSUE_STATUS_LABEL[s] || s || "—");
-          },
-        },
-        {
-          title: "激活会员",
-          key: "activationMember",
-          minWidth: 150,
-          render: (h, params) => h("span", this.formatActivationMember(params.row)),
-        },
-        {
-          title: "激活时间",
-          key: "activationTime",
-          width: 165,
-          render: (h, params) => {
-            const t =
-              params.row.activationTime ||
-              params.row.activateTime ||
-              params.row.bindTime;
-            return h("span", t != null && t !== "" ? String(t) : "—");
-          },
-        },
-        {
-          title: "状态",
-          key: "status",
-          width: 90,
-          align: "center",
-          render: (h, params) => {
-            const s = params.row.status;
-            return h("span", STATUS_LABEL[s] || s || "—");
-          },
-        },
-      ];
-    },
-    tableColumns() {
-      return this.isIssueBatchMode ? this.issueBatchColumns : this.createBatchColumns;
-    },
   },
   mounted() {
     this.initFromRoute();
@@ -277,6 +254,26 @@ export default {
     },
   },
   methods: {
+    formatPrice(value) {
+      if (value === null || value === undefined || value === "") {
+        return "—";
+      }
+      return this.$filters.unitPrice(value, "￥");
+    },
+    formatStatus(status) {
+      return STATUS_LABEL[status] || status || "—";
+    },
+    formatIssueStatus(status) {
+      return ISSUE_STATUS_LABEL[status] || status || "—";
+    },
+    formatIssueBatchId(row) {
+      const id = row.issueBatchId ?? this.issueBatchId;
+      return id != null && id !== "" ? String(id) : "—";
+    },
+    formatActivationTime(row) {
+      const t = row.activationTime || row.activateTime || row.bindTime;
+      return t != null && t !== "" ? String(t) : "—";
+    },
     onRouteQueryChange() {
       this.initFromRoute();
       if (this.activityId && this.hasBatchId) {
@@ -382,12 +379,10 @@ export default {
         } else {
           params.exchangeMemberNickName = kw;
         }
+      } else if (field === "mobile") {
+        params.activationMemberMobile = kw;
       } else {
-        if (field === "mobile") {
-          params.activationMemberMobile = kw;
-        } else {
-          params.activationMemberNickName = kw;
-        }
+        params.activationMemberNickName = kw;
       }
     },
     appendDateRange(params, kind, range) {
diff --git a/manager/src/views/promotions/gift-card-cash/gift-card-cash-records.vue b/manager/src/views/promotions/gift-card-cash/gift-card-cash-records.vue
index 8f7a5388..d9712d7b 100644
--- a/manager/src/views/promotions/gift-card-cash/gift-card-cash-records.vue
+++ b/manager/src/views/promotions/gift-card-cash/gift-card-cash-records.vue
@@ -1,10 +1,8 @@
 <template>
   <div class="search">
-    <Card>
+    <el-card>
       <div class="gcc-records-toolbar">
-        <Button type="primary" class="gcc-records-back" @click="closePage">
-          返回
-        </Button>
+        <el-button type="primary" class="gcc-records-back" @click="closePage">返回</el-button>
       </div>
       <div v-if="giftCardName" class="gcc-records-meta mb_10">
         <strong>礼品卡：</strong>{{ giftCardName }}
@@ -12,242 +10,343 @@
       <div v-else-if="activityId" class="gcc-records-meta mb_10">
         <strong>活动ID：</strong>{{ activityId }}
       </div>
-      <Alert v-if="!activityId" type="warning">缺少活动参数，请从礼品卡列表进入。</Alert>
-      <Tabs v-else v-model="activeTab" @on-click="onTabClick">
-        <TabPane label="制卡记录" name="createBatch">
-          <Card :bordered="false" dis-hover>
-            <Form
+      <el-alert v-if="!activityId" type="warning" show-icon :closable="false">
+        缺少活动参数，请从礼品卡列表进入。
+      </el-alert>
+      <el-tabs v-else v-model="activeTab" @tab-click="onTabClick">
+        <el-tab-pane label="制卡记录" name="createBatch">
+          <el-card shadow="never">
+            <el-form
               ref="createFilterForm"
               :model="createSearchForm"
               inline
               label-position="left"
               class="search-form mb_10 gcc-create-batch-search"
-              :label-width="100"
+              label-width="100px"
             >
-              <FormItem label="卡号" prop="cardNo">
-                <Input
-                  v-model="createSearchForm.cardNo"
-                  clearable
-                  style="width: 150px"
-                />
-              </FormItem>
-              <FormItem label="制卡批次ID" prop="createBatchId">
-                <Input
-                  v-model="createSearchForm.createBatchId"
-                  clearable
-                  style="width: 170px"
-                />
-              </FormItem>
-              <FormItem label="卡名称" prop="giftCardName">
-                <Input
-                  v-model="createSearchForm.giftCardName"
-                  clearable
-                  style="width: 160px"
-                />
-              </FormItem>
-              <FormItem label="制卡人名称" prop="createUserName">
-                <Input
-                  v-model="createSearchForm.createUserName"
-                  clearable
-                  style="width: 140px"
-                />
-              </FormItem>
-              <FormItem label="制卡时间" prop="createTimeRange">
-                <DatePicker
+              <el-form-item label="卡号" prop="cardNo">
+                <el-input v-model="createSearchForm.cardNo" clearable style="width: 150px" />
+              </el-form-item>
+              <el-form-item label="制卡批次ID" prop="createBatchId">
+                <el-input v-model="createSearchForm.createBatchId" clearable style="width: 170px" />
+              </el-form-item>
+              <el-form-item label="卡名称" prop="giftCardName">
+                <el-input v-model="createSearchForm.giftCardName" clearable style="width: 160px" />
+              </el-form-item>
+              <el-form-item label="制卡人名称" prop="createUserName">
+                <el-input v-model="createSearchForm.createUserName" clearable style="width: 140px" />
+              </el-form-item>
+              <el-form-item label="制卡时间" prop="createTimeRange">
+                <el-date-picker
                   v-model="createSearchForm.createTimeRange"
                   type="daterange"
                   clearable
-                  format="yyyy-MM-dd"
+                  value-format="YYYY-MM-DD"
                   style="width: 220px"
                 />
-              </FormItem>
-              <FormItem label="过期时间" prop="expireTimeRange">
-                <DatePicker
+              </el-form-item>
+              <el-form-item label="过期时间" prop="expireTimeRange">
+                <el-date-picker
                   v-model="createSearchForm.expireTimeRange"
                   type="daterange"
                   clearable
-                  format="yyyy-MM-dd"
+                  value-format="YYYY-MM-DD"
                   style="width: 220px"
                 />
-              </FormItem>
-              <FormItem :label-width="0">
-                <Button type="primary" icon="ios-search" class="search-btn" @click="handleCreateSearch">
-                  搜索
-                </Button>
-              </FormItem>
-            </Form>
-            <Table :loading="createLoading" :columns="createColumns" :data="createData" />
-            <Row type="flex" justify="end" class="mt_10">
-              <Page
-                :current="createSearchForm.pageNumber"
+              </el-form-item>
+              <el-form-item label-width="0">
+                <el-button type="primary" class="search-btn" @click="handleCreateSearch">搜索</el-button>
+              </el-form-item>
+            </el-form>
+            <el-table v-loading="createLoading" :data="createData" style="width: 100%">
+              <el-table-column label="制卡批次ID" min-width="100" show-overflow-tooltip align="left">
+                <template #default="{ row }">
+                  <span v-if="row">{{ formatCreateBatchId(row) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="卡号范围" min-width="160" show-overflow-tooltip align="left">
+                <template #default="{ row }">
+                  <span v-if="row">{{ formatText(row.cardNoRange) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="面值" width="150" align="left">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <priceColorScheme
+                      v-if="hasValue(row.faceValue)"
+                      :value="row.faceValue"
+                      :color="$mainColor"
+                    />
+                    <span v-else>-</span>
+                  </template>
+                </template>
+              </el-table-column>
+              <el-table-column label="礼品卡名称" width="150" show-overflow-tooltip align="left">
+                <template #default="{ row }">
+                  <span v-if="row">{{ formatGiftCardName(row.giftCardName) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="createUserName" label="制卡人" width="150" show-overflow-tooltip align="left" />
+              <el-table-column prop="createTime" label="制卡时间" width="200" align="left" />
+              <el-table-column label="制卡数量" width="200" align="left">
+                <template #default="{ row }">
+                  <span v-if="row">{{ formatQuantity(row.quantity) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="过期时间" width="200" align="left">
+                <template #default="{ row }">
+                  <span v-if="row">{{ formatExpireTime(row.expireTime) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="150" align="center" fixed="right">
+                <template #default="{ row }">
+                  <a v-if="row" class="link-text" @click="goBatchCredentials(row)">查看
+                  </a>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="mt_10" style="display: flex; justify-content: flex-end">
+              <el-pagination
+                v-model:current-page="createSearchForm.pageNumber"
+                v-model:page-size="createSearchForm.pageSize"
+                :page-sizes="[20, 50, 100]"
                 :total="createTotal"
-                :page-size="createSearchForm.pageSize"
-                :page-size-opts="[20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper"
                 size="small"
-                show-total
-                show-elevator
-                show-sizer
-                @on-change="createChangePage"
-                @on-page-size-change="createChangePageSize"
+                @current-change="createChangePage"
+                @size-change="createChangePageSize"
               />
-            </Row>
-          </Card>
-        </TabPane>
-        <TabPane label="发卡记录" name="issue">
-          <Card :bordered="false" dis-hover>
-            <Form
+            </div>
+          </el-card>
+        </el-tab-pane>
+
+        <el-tab-pane label="发卡记录" name="issue">
+          <el-card shadow="never">
+            <el-form
               ref="issueFilterForm"
               :model="issueSearchForm"
               inline
               label-position="left"
               class="search-form mb_10 gcc-create-batch-search"
-              :label-width="100"
+              label-width="100px"
             >
-              <FormItem label="卡号" prop="cardNo">
-                <Input
-                  v-model="issueSearchForm.cardNo"
-                  clearable
-                  style="width: 150px"
-                />
-              </FormItem>
-              <FormItem label="发卡批次ID" prop="issueBatchId">
-                <Input
-                  v-model="issueSearchForm.issueBatchId"
-                  clearable
-                  style="width: 170px"
-                />
-              </FormItem>
-              <FormItem label="现金卡名称" prop="giftCardName">
-                <Input
-                  v-model="issueSearchForm.giftCardName"
-                  clearable
-                  style="width: 160px"
-                />
-              </FormItem>
-              <FormItem label="发卡人名称" prop="issueUserName">
-                <Input
-                  v-model="issueSearchForm.issueUserName"
-                  clearable
-                  style="width: 140px"
-                />
-              </FormItem>
-              <FormItem label="发卡时间" prop="createTimeRange">
-                <DatePicker
+              <el-form-item label="卡号" prop="cardNo">
+                <el-input v-model="issueSearchForm.cardNo" clearable style="width: 150px" />
+              </el-form-item>
+              <el-form-item label="发卡批次ID" prop="issueBatchId">
+                <el-input v-model="issueSearchForm.issueBatchId" clearable style="width: 170px" />
+              </el-form-item>
+              <el-form-item label="现金卡名称" prop="giftCardName">
+                <el-input v-model="issueSearchForm.giftCardName" clearable style="width: 160px" />
+              </el-form-item>
+              <el-form-item label="发卡人名称" prop="issueUserName">
+                <el-input v-model="issueSearchForm.issueUserName" clearable style="width: 140px" />
+              </el-form-item>
+              <el-form-item label="发卡时间" prop="createTimeRange">
+                <el-date-picker
                   v-model="issueSearchForm.createTimeRange"
                   type="daterange"
                   clearable
-                  format="yyyy-MM-dd"
+                  value-format="YYYY-MM-DD"
                   style="width: 220px"
                 />
-              </FormItem>
-              <FormItem label="过期时间" prop="expireTimeRange">
-                <DatePicker
+              </el-form-item>
+              <el-form-item label="过期时间" prop="expireTimeRange">
+                <el-date-picker
                   v-model="issueSearchForm.expireTimeRange"
                   type="daterange"
                   clearable
-                  format="yyyy-MM-dd"
+                  value-format="YYYY-MM-DD"
                   style="width: 220px"
                 />
-              </FormItem>
-              <FormItem :label-width="0">
-                <Button type="primary" icon="ios-search" class="search-btn" @click="handleIssueSearch">
-                  搜索
-                </Button>
-              </FormItem>
-            </Form>
-            <Table :loading="issueLoading" :columns="issueColumns" :data="issueData" />
-            <Row type="flex" justify="end" class="mt_10">
-              <Page
-                :current="issueSearchForm.pageNumber"
+              </el-form-item>
+              <el-form-item label-width="0">
+                <el-button type="primary" class="search-btn" @click="handleIssueSearch">搜索</el-button>
+              </el-form-item>
+            </el-form>
+            <el-table v-loading="issueLoading" :data="issueData" style="width: 100%">
+              <el-table-column label="发卡批次ID" min-width="160" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span v-if="row">{{ formatIssueBatchId(row) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="卡号范围" min-width="160" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span v-if="row">{{ formatText(row.cardNoRange) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="面值" width="120" align="right">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <priceColorScheme
+                      v-if="hasValue(row.faceValue)"
+                      :value="row.faceValue"
+                      :color="$mainColor"
+                    />
+                    <span v-else>-</span>
+                  </template>
+                </template>
+              </el-table-column>
+              <el-table-column label="卡名称" min-width="120" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span v-if="row">{{ formatGiftCardName(row.giftCardName) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="发卡人" min-width="100" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span v-if="row">{{ formatText(row.issueUserName) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="createTime" label="发卡时间" width="170" />
+              <el-table-column label="发卡数量" width="100" align="center">
+                <template #default="{ row }">
+                  <span v-if="row">{{ formatQuantity(row.totalCards) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="过期时间" width="170">
+                <template #default="{ row }">
+                  <span v-if="row">{{ formatExpireTime(row.expireTime) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="150" align="center" fixed="right">
+                <template #default="{ row }">
+                  <a v-if="row" class="link-text" @click="goIssueBatchCredentials(row)">查看
+                  </a>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="mt_10" style="display: flex; justify-content: flex-end">
+              <el-pagination
+                v-model:current-page="issueSearchForm.pageNumber"
+                v-model:page-size="issueSearchForm.pageSize"
+                :page-sizes="[20, 50, 100]"
                 :total="issueTotal"
-                :page-size="issueSearchForm.pageSize"
-                :page-size-opts="[20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper"
                 size="small"
-                show-total
-                show-elevator
-                show-sizer
-                @on-change="issueChangePage"
-                @on-page-size-change="issueChangePageSize"
+                @current-change="issueChangePage"
+                @size-change="issueChangePageSize"
               />
-            </Row>
-          </Card>
-        </TabPane>
-        <TabPane label="使用记录" name="usage">
-          <Card :bordered="false" dis-hover>
-            <Form
+            </div>
+          </el-card>
+        </el-tab-pane>
+
+        <el-tab-pane label="使用记录" name="usage">
+          <el-card shadow="never">
+            <el-form
               ref="usageFilterForm"
               :model="usageSearchForm"
               inline
               label-position="left"
               class="search-form mb_10 gcc-create-batch-search"
-              :label-width="90"
+              label-width="90px"
             >
-              <FormItem label="订单号" prop="orderSn">
-                <Input
-                  v-model="usageSearchForm.orderSn"
-                  clearable
-                  style="width: 160px"
-                />
-              </FormItem>
-              <FormItem label="客户名称" prop="memberName">
-                <Input
-                  v-model="usageSearchForm.memberName"
-                  clearable
-                  style="width: 150px"
-                />
-              </FormItem>
-              <FormItem label="卡号" prop="cardNo">
-                <Input
-                  v-model="usageSearchForm.cardNo"
-                  clearable
-                  style="width: 150px"
-                />
-              </FormItem>
-              <FormItem label="交易时间" prop="transactionTimeRange">
-                <DatePicker
+              <el-form-item label="订单号" prop="orderSn">
+                <el-input v-model="usageSearchForm.orderSn" clearable style="width: 160px" />
+              </el-form-item>
+              <el-form-item label="客户名称" prop="memberName">
+                <el-input v-model="usageSearchForm.memberName" clearable style="width: 150px" />
+              </el-form-item>
+              <el-form-item label="卡号" prop="cardNo">
+                <el-input v-model="usageSearchForm.cardNo" clearable style="width: 150px" />
+              </el-form-item>
+              <el-form-item label="交易时间" prop="transactionTimeRange">
+                <el-date-picker
                   v-model="usageSearchForm.transactionTimeRange"
                   type="daterange"
                   clearable
-                  format="yyyy-MM-dd"
+                  value-format="YYYY-MM-DD"
                   style="width: 220px"
                 />
-              </FormItem>
-              <FormItem label="交易类型" prop="transactionType">
-                <Select
-                  v-model="usageSearchForm.transactionType"
-                  clearable
-                  style="width: 150px"
-                >
-                  <Option value="ORDER_DEDUCT">订单抵扣</Option>
-                  <Option value="ORDER_REFUND">订单退款</Option>
-                  <Option value="ORDER_CANCEL">订单取消</Option>
-                </Select>
-              </FormItem>
-              <FormItem :label-width="0">
-                <Button type="primary" icon="ios-search" class="search-btn" @click="handleUsageSearch">
-                  搜索
-                </Button>
-              </FormItem>
-            </Form>
-            <Table :loading="usageLoading" :columns="usageColumns" :data="usageData" />
-            <Row type="flex" justify="end" class="mt_10">
-              <Page
-                :current="usageSearchForm.pageNumber"
+              </el-form-item>
+              <el-form-item label="交易类型" prop="transactionType">
+                <el-select v-model="usageSearchForm.transactionType" clearable style="width: 150px">
+                  <el-option label="订单抵扣" value="ORDER_DEDUCT" />
+                  <el-option label="订单退款" value="ORDER_REFUND" />
+                  <el-option label="订单取消" value="ORDER_CANCEL" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label-width="0">
+                <el-button type="primary" class="search-btn" @click="handleUsageSearch">搜索</el-button>
+              </el-form-item>
+            </el-form>
+            <el-table v-loading="usageLoading" :data="usageData" style="width: 100%">
+              <el-table-column prop="orderSn" label="订单号" min-width="160" show-overflow-tooltip />
+              <el-table-column label="交易类型" min-width="120">
+                <template #default="{ row }">
+                  <span v-if="row">{{ formatUsageBizType(row.transactionType || row.bizType) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="cardNo" label="卡号" min-width="150" show-overflow-tooltip />
+              <el-table-column label="现金卡信息" min-width="180">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <div>{{ formatUsageGiftCardName(row) }}</div>
+                    <div class="gcc-sub-text">面额：{{ formatUsageFaceValue(row) }}</div>
+                  </template>
+                </template>
+              </el-table-column>
+              <el-table-column label="金额" width="130" align="right">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <priceColorScheme
+                      v-if="getUsageAmountDisplay(row)"
+                      :value="getUsageAmountDisplay(row).amount"
+                      :color="getUsageAmountDisplay(row).color"
+                    />
+                    <span v-else>-</span>
+                  </template>
+                </template>
+              </el-table-column>
+              <el-table-column label="余额" width="130" align="right">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <priceColorScheme
+                      v-if="hasValue(row.balanceAfter)"
+                      :value="row.balanceAfter"
+                      :color="$mainColor"
+                    />
+                    <span v-else>-</span>
+                  </template>
+                </template>
+              </el-table-column>
+              <el-table-column label="交易时间" width="170">
+                <template #default="{ row }">
+                  <span v-if="row">{{ formatTransactionTime(row) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="客户信息" min-width="150">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <div>{{ row.memberName || "-" }}</div>
+                    <div class="gcc-sub-text">{{ row.memberMobile || "-" }}</div>
+                  </template>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="100" align="center" fixed="right">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <span v-if="!row.orderSn" class="gcc-disabled-action">详情</span>
+                    <a v-else class="link-text" @click="goOrderDetail(row.orderSn)">详情</a>
+                  </template>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="mt_10" style="display: flex; justify-content: flex-end">
+              <el-pagination
+                v-model:current-page="usageSearchForm.pageNumber"
+                v-model:page-size="usageSearchForm.pageSize"
+                :page-sizes="[20, 50, 100]"
                 :total="usageTotal"
-                :page-size="usageSearchForm.pageSize"
-                :page-size-opts="[20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper"
                 size="small"
-                show-total
-                show-elevator
-                show-sizer
-                @on-change="usageChangePage"
-                @on-page-size-change="usageChangePageSize"
+                @current-change="usageChangePage"
+                @size-change="usageChangePageSize"
               />
-            </Row>
-          </Card>
-        </TabPane>
-      </Tabs>
-    </Card>
+            </div>
+          </el-card>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
   </div>
 </template>
 
@@ -311,303 +410,6 @@ export default {
       },
     };
   },
-  computed: {
-    createColumns() {
-      return [
-        {
-          title: "制卡批次ID",
-          key: "createBatchId",
-          minWidth: 100,
-          tooltip: true,
-          align: "left",
-          render: (h, p) => {
-            const id = p.row.createBatchId ?? p.row.id;
-            return h("span", id != null && id !== "" ? String(id) : "-");
-          },
-        },
-        {
-          title: "卡号范围",
-          key: "cardNoRange",
-          minWidth: 160,
-          tooltip: true,
-          align: "left",
-          render: (h, p) => {
-            const t = p.row.cardNoRange;
-            return h("span", t != null && t !== "" ? String(t) : "-");
-          },
-        },
-        {
-          title: "面值",
-          key: "faceValue",
-          width: 150,
-          align: "left",
-          render: (h, p) => {
-            const v = p.row.faceValue;
-            if (v === null || v === undefined || v === "") {
-              return h("span", "-");
-            }
-            return h("priceColorScheme", {
-              props: { value: v, color: this.$mainColor },
-            });
-          },
-        },
-        {
-          title: "礼品卡名称",
-          key: "giftCardName",
-          width: 150,
-          tooltip: true,
-          align: "left",
-          render: (h, p) => {
-            const t = p.row.giftCardName ?? this.giftCardName;
-            return h("span", t != null && t !== "" ? String(t) : "-");
-          },
-        },
-        { title: "制卡人", key: "createUserName", width: 150, tooltip: true ,align: "left"},
-        { title: "制卡时间", key: "createTime", width: 200,align: "left" },
-        {
-          title: "制卡数量",
-          key: "quantity",
-          width: 200,
-          align: "left",
-          render: (h, p) => {
-            const v = p.row.quantity;
-            if (v === null || v === undefined || v === "") {
-              return h("span", "-");
-            }
-            return h("span", String(v));
-          },
-        },
-        {
-          title: "过期时间",
-          key: "expireTime",
-          width: 200,
-          align: "left",
-          render: (h, p) => {
-            const t = p.row.expireTime;
-            return h("span", t != null && t !== "" ? String(t) : "长期有效");
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 150,
-          align: "center",
-          fixed: "right",
-          render: (h, params) => {
-            return h(
-              "Button",
-              {
-                props: { type: "primary", size: "small" },
-                on: { click: () => this.goBatchCredentials(params.row) },
-              },
-              "查看"
-            );
-          },
-        },
-      ];
-    },
-    issueColumns() {
-      return [
-        {
-          title: "发卡批次ID",
-          key: "issueBatchId",
-          minWidth: 160,
-          tooltip: true,
-          render: (h, p) => {
-            const id = p.row.issueBatchId ?? p.row.id;
-            return h("span", id != null && id !== "" ? String(id) : "-");
-          },
-        },
-        {
-          title: "卡号范围",
-          key: "cardNoRange",
-          minWidth: 160,
-          tooltip: true,
-          render: (h, p) => {
-            const t = p.row.cardNoRange;
-            return h("span", t != null && t !== "" ? String(t) : "-");
-          },
-        },
-        {
-          title: "面值",
-          key: "faceValue",
-          width: 120,
-          align: "right",
-          render: (h, p) => {
-            const v = p.row.faceValue;
-            if (v === null || v === undefined || v === "") {
-              return h("span", "-");
-            }
-            return h("priceColorScheme", {
-              props: { value: v, color: this.$mainColor },
-            });
-          },
-        },
-        {
-          title: "卡名称",
-          key: "giftCardName",
-          minWidth: 120,
-          tooltip: true,
-          render: (h, p) => {
-            const t = p.row.giftCardName ?? this.giftCardName;
-            return h("span", t != null && t !== "" ? String(t) : "-");
-          },
-        },
-        {
-          title: "发卡人",
-          key: "issueUserName",
-          minWidth: 100,
-          tooltip: true,
-          render: (h, p) => {
-            const t = p.row.issueUserName;
-            return h("span", t != null && t !== "" ? String(t) : "-");
-          },
-        },
-        { title: "发卡时间", key: "createTime", width: 170 },
-        {
-          title: "发卡数量",
-          key: "totalCards",
-          width: 100,
-          align: "center",
-          render: (h, p) => {
-            const v = p.row.totalCards;
-            if (v === null || v === undefined || v === "") {
-              return h("span", "-");
-            }
-            return h("span", String(v));
-          },
-        },
-        {
-          title: "过期时间",
-          key: "expireTime",
-          width: 170,
-          render: (h, p) => {
-            const t = p.row.expireTime;
-            return h("span", t != null && t !== "" ? String(t) : "长期有效");
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 150,
-          align: "center",
-          fixed: "right",
-          render: (h, params) => {
-            return h(
-              "Button",
-              {
-                props: { type: "primary", size: "small" },
-                on: { click: () => this.goIssueBatchCredentials(params.row) },
-              },
-              "查看"
-            );
-          },
-        },
-      ];
-    },
-    usageColumns() {
-      return [
-        { title: "订单号", key: "orderSn", minWidth: 160, tooltip: true },
-        {
-          title: "交易类型",
-          key: "transactionType",
-          minWidth: 120,
-          render: (h, p) => h("span", this.formatUsageBizType(p.row.transactionType || p.row.bizType)),
-        },
-        { title: "卡号", key: "cardNo", minWidth: 150, tooltip: true },
-        {
-          title: "现金卡信息",
-          key: "giftCardName",
-          minWidth: 180,
-          render: (h, p) => {
-            const name = p.row.giftCardName || this.giftCardName || "-";
-            const faceValue = p.row.faceValue;
-            return h("div", [
-              h("div", String(name)),
-              h(
-                "div",
-                { style: { color: "#808695", marginTop: "4px" } },
-                `面额：${faceValue != null && faceValue !== "" ? faceValue : "-"}`
-              ),
-            ]);
-          },
-        },
-        {
-          title: "金额",
-          key: "changeAmount",
-          width: 130,
-          align: "right",
-          render: (h, p) => {
-            const display = this.getUsageAmountDisplay(p.row);
-            if (!display) {
-              return h("span", "-");
-            }
-            return h("priceColorScheme", {
-              props: { value: display.amount, color: display.color },
-            });
-          },
-        },
-        {
-          title: "余额",
-          key: "balanceAfter",
-          width: 130,
-          align: "right",
-          render: (h, p) => {
-            const v = p.row.balanceAfter;
-            if (v === null || v === undefined || v === "") {
-              return h("span", "-");
-            }
-            return h("priceColorScheme", {
-              props: { value: v, color: this.$mainColor },
-            });
-          },
-        },
-        {
-          title: "交易时间",
-          key: "transactionTime",
-          width: 170,
-          render: (h, p) => {
-            const t = p.row.transactionTime || p.row.createTime;
-            return h("span", t != null && t !== "" ? String(t) : "-");
-          },
-        },
-        {
-          title: "客户信息",
-          key: "memberName",
-          minWidth: 150,
-          render: (h, p) => {
-            const name = p.row.memberName || "-";
-            const mobile = p.row.memberMobile || "-";
-            return h("div", [
-              h("div", String(name)),
-              h("div", { style: { color: "#808695", marginTop: "4px" } }, String(mobile)),
-            ]);
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 100,
-          align: "center",
-          fixed: "right",
-          render: (h, p) => {
-            const orderSn = p.row.orderSn;
-            if (!orderSn) {
-              return h("span", { style: { color: "#c5c8ce" } }, "详情");
-            }
-            return h(
-              "Button",
-              {
-                props: { type: "primary", size: "small" },
-                on: { click: () => this.goOrderDetail(orderSn) },
-              },
-              "详情"
-            );
-          },
-        },
-      ];
-    },
-  },
   mounted() {
     this.initFromRoute();
     if (this.activityId) {
@@ -631,6 +433,40 @@ export default {
     },
   },
   methods: {
+    hasValue(v) {
+      return v !== null && v !== undefined && v !== "";
+    },
+    formatText(v) {
+      return this.hasValue(v) ? String(v) : "-";
+    },
+    formatCreateBatchId(row) {
+      const id = row.createBatchId ?? row.id;
+      return this.formatText(id);
+    },
+    formatIssueBatchId(row) {
+      const id = row.issueBatchId ?? row.id;
+      return this.formatText(id);
+    },
+    formatGiftCardName(name) {
+      return this.formatText(name ?? this.giftCardName);
+    },
+    formatQuantity(v) {
+      return this.hasValue(v) ? String(v) : "-";
+    },
+    formatExpireTime(v) {
+      return this.hasValue(v) ? String(v) : "长期有效";
+    },
+    formatUsageGiftCardName(row) {
+      return row.giftCardName || this.giftCardName || "-";
+    },
+    formatUsageFaceValue(row) {
+      const faceValue = row.faceValue;
+      return this.hasValue(faceValue) ? String(faceValue) : "-";
+    },
+    formatTransactionTime(row) {
+      const t = row.transactionTime || row.createTime;
+      return this.formatText(t);
+    },
     initFromRoute() {
       this.activityId = (this.$route.query.activityId && String(this.$route.query.activityId)) || "";
       this.giftCardName = (this.$route.query.giftCardName && String(this.$route.query.giftCardName)) || "";
@@ -669,7 +505,8 @@ export default {
         query: { sn: orderSn },
       });
     },
-    onTabClick(name) {
+    onTabClick(tab) {
+      const name = tab.paneName;
       if (name === "createBatch" && this.activityId) {
         this.loadCreateBatchList();
       }
@@ -684,7 +521,6 @@ export default {
       this.createSearchForm.pageNumber = 1;
       this.loadCreateBatchList();
     },
-    /** 日期区间 → yyyy-MM-dd HH:mm:ss，供 Spring 绑定 Date */
     toApiDateTimeBoundary(val, endOfDay) {
       const dt = val instanceof Date ? val : new Date(val);
       if (Number.isNaN(dt.getTime())) {
@@ -800,12 +636,7 @@ export default {
         sort: this.issueSearchForm.sort,
         order: this.issueSearchForm.order,
       };
-      [
-        "cardNo",
-        "issueBatchId",
-        "giftCardName",
-        "issueUserName",
-      ].forEach((key) => {
+      ["cardNo", "issueBatchId", "giftCardName", "issueUserName"].forEach((key) => {
         this.appendTrimmedParam(params, key, this.issueSearchForm[key]);
       });
       this.appendDateRangeToParams(
@@ -892,12 +723,7 @@ export default {
         sort: this.usageSearchForm.sort,
         order: this.usageSearchForm.order,
       };
-      [
-        "orderSn",
-        "memberName",
-        "cardNo",
-        "transactionType",
-      ].forEach((key) => {
+      ["orderSn", "memberName", "cardNo", "transactionType"].forEach((key) => {
         this.appendTrimmedParam(params, key, this.usageSearchForm[key]);
       });
       this.appendDateRangeToParams(
@@ -942,11 +768,17 @@ export default {
   flex-wrap: wrap;
   text-align: left;
 }
-/* 与全局 .search-form > .ivu-form-item 的 margin-left:10px 对齐到表格左缘 */
-.gcc-create-batch-search.search-form > .ivu-form-item:first-of-type {
+.gcc-create-batch-search.search-form > .el-form-item:first-of-type {
   margin-left: 0 !important;
 }
-.gcc-create-batch-search.search-form ::v-deep .ivu-form-item-label {
+.gcc-create-batch-search.search-form :deep(.el-form-item__label) {
   text-align: left;
 }
+.gcc-sub-text {
+  color: #808695;
+  margin-top: 4px;
+}
+.gcc-disabled-action {
+  color: #c5c8ce;
+}
 </style>
diff --git a/manager/src/views/promotions/kanjia/kanjia-activity-add-goods.vue b/manager/src/views/promotions/kanjia/kanjia-activity-add-goods.vue
index e783a19d..18d3ad15 100644
--- a/manager/src/views/promotions/kanjia/kanjia-activity-add-goods.vue
+++ b/manager/src/views/promotions/kanjia/kanjia-activity-add-goods.vue
@@ -1,72 +1,98 @@
 <template>
   <div>
-    <Card>
-      <Form ref="form" :model="form" :label-width="120" :rules="formRule">
+    <el-card>
+      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <div class="form-item-view">
             <h4>商品信息</h4>
 
-            <FormItem label="选择商品" prop="scopeType">
-              <Button type="primary" @click="openSkuList">选择商品</Button>
-              <!-- <Button type="error" ghost style="margin-left: 10px" @click="delSelectGoods">批量删除
-              </Button> -->
-            </FormItem>
+            <el-form-item label="选择商品" prop="scopeType">
+              <el-button type="primary" @click="openSkuList">选择商品</el-button>
+            </el-form-item>
 
-            <FormItem astyle="width: 100%">
-              <Table
+            <el-form-item style="width: 100%">
+              <el-table
                 border
-                :columns="columns"
                 :data="form.promotionGoodsList"
-                @on-selection-change="changeSelect"
+                style="width: 100%"
+                @selection-change="changeSelect"
               >
-                <template slot-scope="{ row }" slot="skuId">
-                  <div>{{ row.skuId }}</div>
-                </template>
-
-                <template slot-scope="{ index }" slot="settlementPrice">
-                  <InputNumber
-                    :min="0"
-                    v-model="form.promotionGoodsList[index].settlementPrice"
-                  />
-                </template>
-                <template slot-scope="{ index }" slot="lowestPrice">
-                  <InputNumber
-                    :min="0"
-                    v-model="form.promotionGoodsList[index].lowestPrice"
-                  />
-                </template>
-                <template slot-scope="{ index }" slot="highestPrice">
-                  <InputNumber
-                    :min="0"
-                    v-model="form.promotionGoodsList[index].highestPrice"
-                  />
-                </template>
-                <template slot-scope="{ index }" slot="stock">
-                  <InputNumber :min="0" v-model="form.promotionGoodsList[index].stock" />
-                </template>
-              </Table>
-            </FormItem>
-            <FormItem label="活动时间" prop="rangeTime">
-              <DatePicker
+                <el-table-column type="selection" width="60" align="center" />
+                <el-table-column prop="goodsName" label="商品名称" min-width="100" show-overflow-tooltip />
+                <el-table-column label="商品价格" width="120">
+                  <template #default="{ row }">
+                    <span v-if="row" :style="{ color: $mainColor }">
+                      {{ $filters.unitPrice(row.price, "￥") }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="库存" width="100">
+                  <template #default="{ row }">
+                    <span v-if="row">{{ row.quantity }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="结算价格" width="130">
+                  <template #default="{ $index }">
+                    <el-input-number
+                      :min="0"
+                      v-model="form.promotionGoodsList[$index].settlementPrice"
+                      style="width: 110px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="最低砍" width="130">
+                  <template #default="{ $index }">
+                    <el-input-number
+                      :min="0"
+                      v-model="form.promotionGoodsList[$index].lowestPrice"
+                      style="width: 110px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="最高砍" width="130">
+                  <template #default="{ $index }">
+                    <el-input-number
+                      :min="0"
+                      v-model="form.promotionGoodsList[$index].highestPrice"
+                      style="width: 110px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="活动库存" width="130">
+                  <template #default="{ $index }">
+                    <el-input-number
+                      :min="0"
+                      v-model="form.promotionGoodsList[$index].stock"
+                      style="width: 110px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="100" align="center">
+                  <template #default="{ $index }">
+                    <el-button type="danger" size="small" plain @click="delGoods($index)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
+            <el-form-item label="活动时间" prop="rangeTime">
+              <el-date-picker
                 type="datetimerange"
                 v-model="form.rangeTime"
-                format="yyyy-MM-dd HH:mm:ss"
+                format="YYYY-MM-DD HH:mm:ss"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
                 placeholder="请选择"
-                :options="options"
+                :disabled-date="options.disabledDate"
                 style="width: 260px"
-              >
-              </DatePicker>
-            </FormItem>
+              />
+            </el-form-item>
             <div>
-              <Button type="text" @click="closeCurrentPage">返回</Button>
-              <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-                >提交</Button
-              >
+              <el-button link @click="closeCurrentPage">返回</el-button>
+              <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
             </div>
           </div>
         </div>
-      </Form>
-    </Card>
+      </el-form>
+    </el-card>
     <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
   </div>
 </template>
@@ -81,90 +107,19 @@ export default {
   components: {
     skuSelect,
   },
-  watch: {},
   data() {
     return {
-      modalType: 0, // 是否编辑
+      modalType: 0,
       form: {
-        promotionGoodsList: [], // 活动商品列表
+        promotionGoodsList: [],
       },
-      id: this.$route.query.id, // 砍价活动id
-      submitLoading: false, // 添加或编辑提交状态
-      selectedGoods: [], // 已选商品列表，便于删除
-      promotionGoodsList: [], // 活动商品列表
+      id: this.$route.query.id,
+      submitLoading: false,
+      selectedGoods: [],
+      promotionGoodsList: [],
       formRule: {
         rangeTime: [{ required: true, message: "请选择活动时间" }],
       },
-      columns: [
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "商品名称",
-          key: "goodsName",
-          tooltip: true,
-          minWidth: 100,
-        },
-        {
-          title: "商品价格",
-          key: "price",
-          width: 120,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "库存",
-          key: "quantity",
-          width: 100,
-        },
-        {
-          title: "结算价格",
-          slot: "settlementPrice",
-          width: 110,
-        },
-        {
-          title: "最低砍",
-          slot: "lowestPrice",
-          width: 110,
-        },
-        {
-          title: "最高砍",
-          slot: "highestPrice",
-          width: 110,
-        },
-        {
-          title: "活动库存",
-          slot: "stock",
-          width: 110,
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 100,
-          render: (h, params) => {
-            return h(
-              "Button",
-              {
-                props: {
-                  size: "small",
-                  type: "error",
-                  ghost: true,
-                },
-                on: {
-                  click: () => {
-                    this.delGoods(params.index);
-                  },
-                },
-              },
-              "删除"
-            );
-          },
-        },
-      ],
       options: {
         disabledDate(date) {
           return date && date.valueOf() < Date.now() - 86400000;
@@ -173,24 +128,12 @@ export default {
     };
   },
   async mounted() {
-    // 如果id不为空则查询信息
     if (this.id) {
       this.getCoupon();
       this.modalType = 1;
     }
   },
   methods: {
-    openSkuList() {
-      // 显示商品选择器
-      this.$refs.skuSelect.open("goods");
-      let data = JSON.parse(JSON.stringify(this.promotionGoodsList));
-      data.forEach((e) => {
-        e.id = e.skuId;
-      });
-      this.$refs.skuSelect.goodsData = data;
-    },
-
-    /** 保存砍价活动 */
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
@@ -199,37 +142,32 @@ export default {
             this.$Message.error("请选择活动时间");
             return;
           }
-          params.startTime = this.$options.filters.unixToDate(
+          params.startTime = this.$filters.unixToDate(
             this.form.rangeTime[0] / 1000
           );
-          params.endTime = this.$options.filters.unixToDate(
+          params.endTime = this.$filters.unixToDate(
             this.form.rangeTime[1] / 1000
           );
           delete params.rangeTime;
           let checkResult = true;
-          //如果添加活动的时候选择了商品 则对选择的商品参数做一些校验
           if (this.form.promotionGoodsList.length > 0) {
             this.form.promotionGoodsList.forEach((res) => {
-              //校验库存参数
               if (res.stock <= 0 || res.stock > res.quantity) {
                 checkResult = false;
                 this.$Message.error("活动库存不能为0且不能超过商品库存");
                 return;
               }
 
-              // 结算价格金额格式校验
               if (!regular.money.test(res.settlementPrice)) {
                 checkResult = false;
                 this.$Message.error("结算价格金额格式不正确");
                 return;
               }
-              // 结算价格金额格式校验
               if (res.settlementPrice < 0 || res.settlementPrice > res.price) {
                 checkResult = false;
                 this.$Message.error("结算价格金额不能为0且不能超过商品价格");
                 return;
               }
-              //最高砍价校验
               if (!regular.money.test(res.highestPrice)) {
                 checkResult = false;
                 this.$Message.error("最高可砍金额格式错误");
@@ -240,7 +178,6 @@ export default {
                 this.$Message.error("最高可砍金额不能为0且不能超过商品价格");
                 return;
               }
-              //最低砍价校验
               if (!regular.money.test(res.lowestPrice)) {
                 checkResult = false;
                 this.$Message.error("最低可砍金额格式错误");
@@ -251,7 +188,6 @@ export default {
                 this.$Message.error("最低可砍金额不能为0");
                 return;
               }
-              //校验最高最低砍价金额
               if (parseInt(res.lowestPrice) > parseInt(res.highestPrice)) {
                 checkResult = false;
                 this.$Message.error("最低砍价金额不能大于最高砍价金额");
@@ -274,14 +210,12 @@ export default {
         }
       });
     },
-    // 关闭当前页面
     closeCurrentPage() {
       this.$store.commit("removeTag", "add-kan-jia-goods");
       localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
       this.$router.go(-1);
     },
     openSkuList() {
-      // 显示商品选择器
       this.$refs.skuSelect.open("goods");
       let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList));
       data.forEach((e) => {
@@ -290,37 +224,12 @@ export default {
       this.$refs.skuSelect.goodsData = data;
     },
     changeSelect(e) {
-      // 已选商品批量选择
       this.selectedGoods = e;
     },
-    // delSelectGoods() {
-    //   // 多选删除商品
-    //   if (this.selectedGoods.length <= 0) {
-    //     this.$Message.warning("您还未选择要删除的数据");
-    //     return;
-    //   }
-    //   this.$Modal.confirm({
-    //     title: "确认删除",
-    //     content: "您确认要删除所选商品吗?",
-    //     onOk: () => {
-    //       let ids = [];
-    //       this.selectedGoods.forEach(function (e) {
-    //         ids.push(e.id);
-    //       });
-    //       this.form.promotionGoodsList = this.form.promotionGoodsList.filter(
-    //         (item) => {
-    //           return !ids.includes(item.id);
-    //         }
-    //       );
-    //     },
-    //   });
-    // },
     delGoods(index) {
-      // 删除商品
       this.form.promotionGoodsList.splice(index, 1);
     },
     selectedGoodsData(item) {
-      // 回显已选商品
       let list = [];
       item.forEach((e) => {
         list.push({
@@ -338,7 +247,6 @@ export default {
           skuId: e.id,
         });
       });
-      console.warn(list);
       this.form.promotionGoodsList = list;
     },
   },
diff --git a/manager/src/views/promotions/kanjia/kanjia-activity-edit-goods.vue b/manager/src/views/promotions/kanjia/kanjia-activity-edit-goods.vue
index 6a991e69..081ee760 100644
--- a/manager/src/views/promotions/kanjia/kanjia-activity-edit-goods.vue
+++ b/manager/src/views/promotions/kanjia/kanjia-activity-edit-goods.vue
@@ -1,29 +1,29 @@
 <template>
   <div>
-    <Card>
-      <Form ref="form" :model="form" :label-width="120" :rules="formRule">
+    <el-card>
+      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <div class="form-item-view">
             <h4>商品信息</h4>
-            <FormItem label="商品名称">
+            <el-form-item label="商品名称">
               <div>{{ form.goodsName }}</div>
-            </FormItem>
-            <FormItem label="SKU编码">
+            </el-form-item>
+            <el-form-item label="SKU编码">
               <div>{{ form.skuId }}</div>
-            </FormItem>
-            <FormItem label="店铺名称">
+            </el-form-item>
+            <el-form-item label="店铺名称">
               <div>{{ form.goodsSku.storeName }}</div>
-            </FormItem>
-            <FormItem label="商品价格">
+            </el-form-item>
+            <el-form-item label="商品价格">
               <div>
-                <priceColorScheme :value="form.goodsSku.price" :color="$mainColor"></priceColorScheme>
+                <priceColorScheme :value="form.goodsSku.price" :color="$mainColor" />
               </div>
-            </FormItem>
-            <FormItem label="商品库存">
+            </el-form-item>
+            <el-form-item label="商品库存">
               <div>{{ form.goodsSku.quantity }}</div>
-            </FormItem>
-            <FormItem label="结算价格" prop="settlementPrice">
-              <Input
+            </el-form-item>
+            <el-form-item label="结算价格" prop="settlementPrice">
+              <el-input
                 :disabled="onlyView"
                 type="number"
                 v-model="form.settlementPrice"
@@ -31,10 +31,9 @@
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-
-            <FormItem label="最低可砍" prop="lowestPrice">
-              <Input
+            </el-form-item>
+            <el-form-item label="最低可砍" prop="lowestPrice">
+              <el-input
                 :disabled="onlyView"
                 type="number"
                 v-model="form.lowestPrice"
@@ -42,9 +41,9 @@
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="最高可砍" prop="highestPrice">
-              <Input
+            </el-form-item>
+            <el-form-item label="最高可砍" prop="highestPrice">
+              <el-input
                 :disabled="onlyView"
                 type="number"
                 v-model="form.highestPrice"
@@ -52,10 +51,9 @@
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-
-            <FormItem label="活动库存" prop="stock">
-              <Input
+            </el-form-item>
+            <el-form-item label="活动库存" prop="stock">
+              <el-input
                 :disabled="onlyView"
                 type="number"
                 v-model="form.stock"
@@ -63,253 +61,195 @@
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-
-            <FormItem label="活动时间" prop="rangeTime">
-              <DatePicker
+            </el-form-item>
+            <el-form-item label="活动时间" prop="rangeTime">
+              <el-date-picker
                 :disabled="onlyView"
-                type="datetimerange"
                 v-model="form.rangeTime"
-                format="yyyy-MM-dd HH:mm:ss"
-                placeholder="请选择"
-                :options="options"
-                style="width: 300px"
-              >
-              </DatePicker>
-            </FormItem>
+                type="datetimerange"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                :disabled-date="disabledDate"
+                style="width: 360px"
+              />
+            </el-form-item>
             <div>
-              <Button type="text" @click="closeCurrentPage">返回</Button>
-              <Button type="primary" v-if="!onlyView" :loading="submitLoading" @click="handleSubmit">提交</Button>
+              <el-button link @click="closeCurrentPage">返回</el-button>
+              <el-button v-if="!onlyView" type="primary" :loading="submitLoading" @click="handleSubmit">
+                提交
+              </el-button>
             </div>
           </div>
         </div>
-      </Form>
-    </Card>
-
+      </el-form>
+    </el-card>
   </div>
 </template>
 
 <script>
-  import {
-    getKanJiaActivityGoodsById,
-    editKanJiaActivityGoods,
-  } from "@/api/promotion";
-  import {regular} from "@/utils";
+import { getKanJiaActivityGoodsById, editKanJiaActivityGoods } from "@/api/promotion";
+import { regular } from "@/utils";
 
-
-  export default {
-    name: "editKanjiaActivityGoods",
-
-    watch: {},
-    data() {
-      const checkSettlementPrice = (rule, value, callback) => {
-        if (!value && value !== 0) {
-          return callback(new Error("结算金额不能为空"));
-        } else if (!regular.money.test(value)) {
-          callback(new Error("请输入正整数或者两位小数"));
-        } else if (parseFloat(value) > 99999999) {
-          callback(new Error("结算金额设置超过上限值"));
-        } else {
-          callback();
-        }
-      };
-      const checkPurchasePrice = (rule, value, callback) => {
-        if (!value && value !== 0) {
-          return callback(new Error("最低购买金额不能为空"));
-        } else if (!regular.money.test(value)) {
-          callback(new Error("请输入正整数或者两位小数"));
-        } else if (parseFloat(value) > 99999999) {
-          callback(new Error("最低购买金额设置超过上限值"));
-        } else {
-          callback();
-        }
-      };
-      const checkLowestPrice = (rule, value, callback) => {
-        if (!value && value !== 0) {
-          return callback(new Error("最低可砍金额不能为空"));
-        } else if (!regular.money.test(value)) {
-          callback(new Error("请输入正整数或者两位小数"));
-        } else if (parseFloat(value) > 99999999) {
-          callback(new Error("最低可砍金额设置超过上限值"));
-        } else {
-          callback();
-        }
-      };
-      const checkHighestPrice = (rule, value, callback) => {
-        if (!value && value !== 0) {
-          return callback(new Error("最高可砍金额不能为空"));
-        } else if (!regular.money.test(value)) {
-          callback(new Error("请输入正整数或者两位小数"));
-        } else if (parseFloat(value) > 99999999) {
-          callback(new Error("最高可砍金额设置超过上限值"));
-        } else {
-          callback();
-        }
-      };
-      return {
-        modalType: 0, // 是否编辑
-        form: {
-          purchasePrice:0,
-          goodsSku: {},
-        },
-        id: this.$route.query.id, // 砍价活动id
-        onlyView:this.$route.query.onlyView, // 是否为只读
-        submitLoading: false, // 添加或编辑提交状态
-        formRule: {
-          settlementPrice: [
-            {required: true, message: "请输入结算金额"},
-            {validator: checkSettlementPrice},
-          ],
-
-          lowestPrice: [
-            {required: true, message: "请输入最低可砍金额"},
-            {validator: checkLowestPrice},
-          ],
-          highestPrice: [
-            {required: true, message: "请输入最高可砍金额"},
-            {validator: checkHighestPrice},
-          ],
-          rangeTime: [{required: true, message: "请选择活动时间"}],
-          stock: [{required: true, message: "请输入活动库存"}],
-        },
-        options: {
-          disabledDate(date) {
-            return date && date.valueOf() < Date.now() - 86400000;
-          },
-        },
-      };
-    },
-    async mounted() {
-      // 如果id不为空则查询信息
-      if (this.id) {
-        this.getKanJiaActivityGoods();
-        this.modalType = 1;
+export default {
+  name: "editKanjiaActivityGoods",
+  data() {
+    const checkSettlementPrice = (rule, value, callback) => {
+      if (!value && value !== 0) {
+        return callback(new Error("结算金额不能为空"));
       }
-    },
-    methods: {
-      getKanJiaActivityGoods() {
-        getKanJiaActivityGoodsById(this.id).then((res) => {
-          this.form = res.result;
-          this.form.rangeTime = [];
-          this.form.rangeTime.push(new Date(this.form.startTime), new Date(this.form.endTime));
-        });
+      if (!regular.money.test(value)) {
+        callback(new Error("请输入正整数或者两位小数"));
+      } else if (parseFloat(value) > 99999999) {
+        callback(new Error("结算金额设置超过上限值"));
+      } else {
+        callback();
+      }
+    };
+    const checkLowestPrice = (rule, value, callback) => {
+      if (!value && value !== 0) {
+        return callback(new Error("最低可砍金额不能为空"));
+      }
+      if (!regular.money.test(value)) {
+        callback(new Error("请输入正整数或者两位小数"));
+      } else if (parseFloat(value) > 99999999) {
+        callback(new Error("最低可砍金额设置超过上限值"));
+      } else {
+        callback();
+      }
+    };
+    const checkHighestPrice = (rule, value, callback) => {
+      if (!value && value !== 0) {
+        return callback(new Error("最高可砍金额不能为空"));
+      }
+      if (!regular.money.test(value)) {
+        callback(new Error("请输入正整数或者两位小数"));
+      } else if (parseFloat(value) > 99999999) {
+        callback(new Error("最高可砍金额设置超过上限值"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      modalType: 0,
+      form: {
+        purchasePrice: 0,
+        goodsSku: {},
+        rangeTime: [],
       },
-
-      /** 保存砍价活动 */
-      handleSubmit() {
-
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            const params = JSON.parse(JSON.stringify(this.form));
-            if (this.form.rangeTime[0] === '' || this.form.rangeTime[0] === '') {
-              this.$Message.error("请选择活动时间");
-              return
-            }
-            params.startTime = this.$options.filters.unixToDate(
-              this.form.rangeTime[0] / 1000
-            );
-            params.endTime = this.$options.filters.unixToDate(
-              this.form.rangeTime[1] / 1000
-            );
-            delete params.rangeTime
-            console.warn(params)
-            //校验库存参数
-            if (params.stock <= 0 || params.stock > params.goodsSku.quantity) {
-              this.$Message.error("活动库存不能为0且不能超过商品库存");
-              return
-            }
-
-            // 结算价格金额格式校验
-            if (!regular.money.test(params.settlementPrice)) {
-              this.$Message.error("结算价格金额格式不正确");
-              return
-            }
-            // 结算价格金额格式校验
-            if (params.settlementPrice < 0 || params.settlementPrice > params.price) {
-              this.$Message.error("结算价格金额不能为0且不能超过商品价格");
-              return
-            }
-            //最高砍价校验
-            if (!regular.money.test(params.highestPrice)) {
-              this.$Message.error("最高可砍金额格式错误");
-              return
-            }
-            if (params.highestPrice <= 0 || params.highestPrice > params.price) {
-              this.$Message.error("最高可砍金额不能为0且不能超过商品价格");
-              return
-            }
-
-            //最低砍价校验
-            if (!regular.money.test(params.lowestPrice)) {
-              this.$Message.error("最低可砍金额格式错误");
-              return
-            }
-            if (params.lowestPrice <= 0 || params.lowestPrice > params.price) {
-              this.$Message.error("最低可砍金额不能为0");
-              return
-            }
-            //校验最高最低砍价金额
-            if (params.lowestPrice > params.highestPrice) {
-              this.$Message.error("最低砍价金额不能大于最高砍价金额");
-              return
-            }
-
-            this.submitLoading = true;
-            // 添加 避免编辑后传入id等数据 记得删除
-            editKanJiaActivityGoods(params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("砍价活动修改成功");
-                this.closeCurrentPage();
-              }
-            });
+      id: this.$route.query.id,
+      onlyView: this.$route.query.onlyView,
+      submitLoading: false,
+      formRule: {
+        settlementPrice: [
+          { required: true, message: "请输入结算金额" },
+          { validator: checkSettlementPrice },
+        ],
+        lowestPrice: [
+          { required: true, message: "请输入最低可砍金额" },
+          { validator: checkLowestPrice },
+        ],
+        highestPrice: [
+          { required: true, message: "请输入最高可砍金额" },
+          { validator: checkHighestPrice },
+        ],
+        rangeTime: [{ required: true, message: "请选择活动时间" }],
+        stock: [{ required: true, message: "请输入活动库存" }],
+      },
+    };
+  },
+  async mounted() {
+    if (this.id) {
+      this.getKanJiaActivityGoods();
+      this.modalType = 1;
+    }
+  },
+  methods: {
+    disabledDate(date) {
+      return date && date.getTime() < Date.now() - 86400000;
+    },
+    getKanJiaActivityGoods() {
+      getKanJiaActivityGoodsById(this.id).then((res) => {
+        this.form = res.result;
+        this.form.rangeTime = [res.result.startTime, res.result.endTime];
+      });
+    },
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          const params = JSON.parse(JSON.stringify(this.form));
+          if (!this.form.rangeTime || this.form.rangeTime.length !== 2) {
+            this.$Message.error("请选择活动时间");
+            return;
           }
-        });
-      },
-      // 关闭当前页面
-      closeCurrentPage() {
-        this.$store.commit("removeTag", "add-kan-jia-goods");
-        localStorage.pageOpenedList = JSON.stringify(
-          this.$store.state.app.pageOpenedList
-        );
-        this.$router.go(-1);
-      },
+          params.startTime = this.form.rangeTime[0];
+          params.endTime = this.form.rangeTime[1];
+          delete params.rangeTime;
 
+          if (params.stock <= 0 || params.stock > params.goodsSku.quantity) {
+            this.$Message.error("活动库存不能为0且不能超过商品库存");
+            return;
+          }
+          if (!regular.money.test(params.settlementPrice)) {
+            this.$Message.error("结算价格金额格式不正确");
+            return;
+          }
+          if (params.settlementPrice < 0 || params.settlementPrice > params.price) {
+            this.$Message.error("结算价格金额不能为0且不能超过商品价格");
+            return;
+          }
+          if (!regular.money.test(params.highestPrice)) {
+            this.$Message.error("最高可砍金额格式错误");
+            return;
+          }
+          if (params.highestPrice <= 0 || params.highestPrice > params.price) {
+            this.$Message.error("最高可砍金额不能为0且不能超过商品价格");
+            return;
+          }
+          if (!regular.money.test(params.lowestPrice)) {
+            this.$Message.error("最低可砍金额格式错误");
+            return;
+          }
+          if (params.lowestPrice <= 0 || params.lowestPrice > params.price) {
+            this.$Message.error("最低可砍金额不能为0");
+            return;
+          }
+          if (params.lowestPrice > params.highestPrice) {
+            this.$Message.error("最低砍价金额不能大于最高砍价金额");
+            return;
+          }
+
+          this.submitLoading = true;
+          editKanJiaActivityGoods(params).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("砍价活动修改成功");
+              this.closeCurrentPage();
+            }
+          });
+        }
+      });
     },
-  };
+    closeCurrentPage() {
+      this.$store.commit("removeTag", "add-kan-jia-goods");
+      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
+      this.$router.go(-1);
+    },
+  },
+};
 </script>
 
-<style lang="scss" scpoed>
-  h4 {
-    margin-bottom: 10px;
-    padding: 0 10px;
-    border: 1px solid #ddd;
-    background-color: #f8f8f8;
-    font-weight: bold;
-    color: #333;
-    font-size: 14px;
-    line-height: 40px;
-    text-align: left;
-  }
-
-  .describe {
-    font-size: 12px;
-    margin-left: 10px;
-    color: #999;
-  }
-
-  .effectiveDays {
-    font-size: 12px;
-    color: #999;
-
-    > * {
-      margin: 0 4px;
-    }
-  }
-
-  .tips {
-    font-size: 12px;
-    color: #999;
-  }
+<style lang="scss" scoped>
+h4 {
+  margin-bottom: 10px;
+  padding: 0 10px;
+  border: 1px solid #ddd;
+  background-color: #f8f8f8;
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+  line-height: 40px;
+  text-align: left;
+}
 </style>
-
diff --git a/manager/src/views/promotions/kanjia/kanjia-activity-goods.vue b/manager/src/views/promotions/kanjia/kanjia-activity-goods.vue
index 4d4b752e..60cd2fc2 100644
--- a/manager/src/views/promotions/kanjia/kanjia-activity-goods.vue
+++ b/manager/src/views/promotions/kanjia/kanjia-activity-goods.vue
@@ -1,318 +1,266 @@
 <template>
   <div class="search">
-    <Card>
-      <Row>
-        <Form
-          ref="searchForm"
-          :model="searchForm"
-          inline
-          :label-width="70"
-          class="search-form"
-        >
-          <Form-item label="商品名称" prop="goodsName">
-            <Input
-              type="text"
-              v-model="searchForm.goodsName"
-              placeholder="请输入商品名称"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="活动状态" prop="promotionStatus">
-            <Select
-              v-model="searchForm.promotionStatus"
-              placeholder="请选择"
-              clearable
-              style="width: 240px"
-            >
-              <Option value="NEW">未开始</Option>
-              <Option value="START">已开始/上架</Option>
-              <Option value="END">已结束/下架</Option>
-              <Option value="CLOSE">紧急关闭/作废</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="活动时间">
-            <DatePicker
-              v-model="selectDate"
-              type="daterange"
-              clearable
-              placeholder="选择起始时间"
-              style="width: 240px"
-            >
-            </DatePicker>
-          </Form-item>
-          <Button
-            @click="handleSearch"
-            type="primary"
-            icon="ios-search"
-            class="search-btn"
-            >搜索</Button
-          >
-        </Form>
-      </Row>
-      </Card>
-    <Card>
-      <Row class="operation padding-row">
-        <Button @click="add" type="primary">添加砍价</Button>
-      </Row>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-        sortable="custom"
-        @on-sort-change="changeSort"
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <template slot-scope="{ row }" slot="goodsName">
-          <div>
-            <a class="mr_10" @click="linkTo(row.goodsId, row.skuId)">{{
-              row.goodsName
-            }}</a>
-            <Poptip trigger="hover" title="扫码在手机中查看" transfer>
-              <div slot="content">
+        <el-form-item label="商品名称" prop="goodsName">
+          <el-input
+            v-model="searchForm.goodsName"
+            placeholder="请输入商品名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="活动状态" prop="promotionStatus">
+          <el-select
+            v-model="searchForm.promotionStatus"
+            placeholder="请选择"
+            clearable
+            style="width: 240px"
+          >
+            <el-option label="未开始" value="NEW" />
+            <el-option label="已开始/上架" value="START" />
+            <el-option label="已结束/下架" value="END" />
+            <el-option label="紧急关闭/作废" value="CLOSE" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="活动时间">
+          <el-date-picker
+            v-model="selectDate"
+            type="daterange"
+            clearable
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="add">添加砍价</el-button>
+      </div>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+        @sort-change="changeSort"
+      >
+        <el-table-column label="商品名称" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
+              <el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
+                <template #reference>
+                  <img
+                    src="../../../assets/qrcode.svg"
+                    class="hover-pointer"
+                    width="20"
+                    height="20"
+                    alt="qrcode"
+                  />
+                </template>
                 <vue-qr
                   :text="wapLinkTo(row.goodsId, row.skuId)"
                   :margin="0"
-                  colorDark="#000"
-                  colorLight="#fff"
+                  color-dark="#000"
+                  color-light="#fff"
                   :size="150"
-                ></vue-qr>
-              </div>
-              <img
-                src="../../../assets/qrcode.svg"
-                style="vertical-align: middle"
-                class="hover-pointer"
-                width="20"
-                height="20"
-                alt=""
-              />
-            </Poptip>
-          </div>
-        </template>
-        <template slot-scope="{ row }" slot="startTime">
-          <div>{{ row.startTime }}</div>
-          <div>{{ row.endTime }}</div>
-        </template>
-        <template slot-scope="{ row }" slot="quantity">
-          <div>{{ row.stock }}</div>
-        </template>
-        <template slot-scope="{ row }" slot="action">
-          <a
-            v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:10px"
-            @click="edit(row)"
-            >编辑
-          </a>
-          <a
-            v-else
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:10px"
-            @click="edit(row, 'onlyView')"
-            >查看
-          </a>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="page">
-        <Page
-          :current="searchForm.pageNumber"
+                />
+              </el-popover>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="库存数量" width="100">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.stock }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stock" label="剩余活动库存" width="120" />
+        <el-table-column label="每人最低砍" min-width="110">
+          <template #default="{ row }">
+            <span v-if="row">{{ $filters.unitPrice(row.lowestPrice, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="每人最高砍" min-width="110">
+          <template #default="{ row }">
+            <span v-if="row">{{ $filters.unitPrice(row.highestPrice, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="结算价格" min-width="110">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">
+              {{ $filters.unitPrice(row.settlementPrice, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动开始时间" min-width="160">
+          <template #default="{ row }">
+            <template v-if="row">
+              <div>{{ row.startTime }}</div>
+              <div>{{ row.endTime }}</div>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
+              {{ promotionStatusText(row.promotionStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a
+                v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
+                class="link-text"
+                @click="edit(row)"
+              >
+                编辑
+              </a>
+              <a v-else class="link-text" @click="edit(row, 'onlyView')">查看</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="page mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
 import { getKanJiaGoodsList, delKanJiaGoods } from "@/api/promotion";
-import { promotionsStatusRender } from "@/utils/promotions";
 import vueQr from "vue-qr";
 
 export default {
-  name: "coupon",
-  components: {
-    "vue-qr": vueQr,
-  },
-
+  name: "kanjia-activity-goods",
+  components: { vueQr },
   data() {
     return {
-      selectDate: [], //选中的数据
-      loading: true, // 表单加载状态
-      modalType: 0, // 添加或编辑标识
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          goodsName: "",
-        },
-      form: {
-        // 添加或编辑表单对象初始化数据
+      selectDate: [],
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        goodsName: "",
+        promotionStatus: "",
       },
-      // 表单验证规则
-      formValidate: {},
-      submitLoading: false, // 添加或编辑提交状态
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        {
-          title: "商品名称",
-          slot: "goodsName",
-          minWidth: 150,
-          tooltip: true,
-        },
-        {
-          title: "库存数量",
-          slot: "quantity",
-          width: 100,
-        },
-        {
-          title: "剩余活动库存",
-          key: "stock",
-          width: 110,
-        },
-        {
-          title: "每人最低砍",
-          key: "lowestPrice",
-          minWidth: 100,
-          render: (h, params) => {
-            return h(
-              "div",
-              this.$options.filters.unitPrice(params.row.lowestPrice, "￥")
-            );
-          },
-        },
-        {
-          title: "每人最高砍",
-          key: "highestPrice",
-          minWidth: 100,
-          tooltip: true,
-          render: (h, params) => {
-            return h(
-              "div",
-              this.$options.filters.unitPrice(params.row.highestPrice, "￥")
-            );
-          },
-        },
-        {
-          title: "结算价格",
-          key: "settlementPrice",
-          minWidth: 100,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.settlementPrice,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "活动开始时间",
-          slot: "startTime",
-          minWidth: 150,
-        },
-        {
-          title: "状态",
-          key: "promotionStatus",
-          render: (h, params) => {
-            return promotionsStatusRender(h, params);
-          },
-          width: 100,
-        },
-        {
-          title: "操作",
-          slot: "action",
-          align: "center",
-          fixed: "right",
-          width: 150,
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      selectCoupon: [], //本级选中的优惠券
+      data: [],
+      total: 0,
+      selectList: [],
+      selectCoupon: [],
     };
   },
-  props: {},
   watch: {
-    $route(to, from) {
+    $route(to) {
       if (to.fullPath == "/promotions/manager-coupon") {
         this.init();
       }
     },
   },
   methods: {
+    promotionStatusText(status) {
+      const map = {
+        NEW: "未开始",
+        START: "已开始",
+        END: "已结束",
+        CLOSE: "已关闭",
+      };
+      return map[status] || "未知";
+    },
+    promotionStatusTagType(status) {
+      const map = {
+        NEW: "info",
+        START: "success",
+        END: "danger",
+        CLOSE: "danger",
+      };
+      return map[status] || "danger";
+    },
     check() {
-      // this.selectCoupon.push(this.selectList)
       this.$emit("selected", this.selectCoupon);
     },
     init() {
       this.getDataList();
     },
-    // 添加砍价活动跳转
     add() {
       this.$router.push({ name: "add-kanJia-activity-goods" });
     },
-
-    info(v) {
-      this.$router.push({ name: "platform-coupon-info", query: { id: v.id } });
-    },
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
-      // this.clearSelectAll();
     },
     changePageSize(v) {
+      this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
     handleSearch() {
-      this.searchForm.pageNumber = 0;
+      this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    changeSort(e) {
-      this.searchForm.sort = e.key;
-      this.searchForm.order = e.order;
-      if (e.order === "normal") {
-        this.searchForm.order = "";
+    changeSort({ prop, order }) {
+      if (!order) {
+        this.searchForm.sort = "createTime";
+        this.searchForm.order = "desc";
+      } else {
+        this.searchForm.sort = prop;
+        this.searchForm.order = order === "ascending" ? "asc" : "desc";
       }
       this.getDataList();
     },
-    clearSelectAll() {
-      this.$refs.table.selectAll(false);
-    },
-
     getDataList() {
       this.loading = true;
       if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = this.selectDate[0].getTime();
-        this.searchForm.endTime = this.selectDate[1].getTime();
+        this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
+        this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
       } else {
         this.searchForm.startTime = null;
         this.searchForm.endTime = null;
       }
-      // 带多条件搜索参数获取表单数据 请自行修改接口
-      getKanJiaGoodsList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-      this.total = this.data.length;
-      this.loading = false;
+      getKanJiaGoodsList(this.searchForm)
+        .then((res) => {
+          if (res.success) {
+            this.data = res.result.records;
+            this.total = res.result.total;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
     edit(v, type) {
-      let data = {
-        id: v.id,
-      };
-      type ? (data.onlyView = true) : "";
+      const data = { id: v.id };
+      if (type) data.onlyView = true;
       this.$router.push({
         name: "edit-kanJia-activity-goods",
         query: data,
@@ -324,11 +272,6 @@ export default {
         content: "确认需要删除此砍价商品",
         loading: true,
         onOk: () => {
-          let ids = [];
-          this.selectList.forEach(function (e) {
-            ids.push(e.id);
-          });
-          // 批量删除
           delKanJiaGoods(row.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -345,6 +288,19 @@ export default {
   },
 };
 </script>
-<style lang="scss">
-@import "@/styles/table-common.scss";
+
+<style lang="scss" scoped>
+.mr_10 {
+  margin-right: 10px;
+}
+.hover-pointer {
+  cursor: pointer;
+  vertical-align: middle;
+}
+.padding-row {
+  margin-bottom: 10px;
+}
+.mt_10 {
+  margin-top: 10px;
+}
 </style>
diff --git a/manager/src/views/promotions/live/live-detail.vue b/manager/src/views/promotions/live/live-detail.vue
index 20c6015d..506ad0e2 100644
--- a/manager/src/views/promotions/live/live-detail.vue
+++ b/manager/src/views/promotions/live/live-detail.vue
@@ -1,181 +1,137 @@
 <template>
   <div>
-    <Card>
-      <Form :model="liveForm" ref="liveForm" :rules="liveRulesForm" :label-width="120">
-        <FormItem label="直播标题" prop="name">
-          <Input disabled v-model="liveForm.name" style="width:460px"></Input>
+    <el-card>
+      <el-form :model="liveForm" ref="liveForm" :rules="liveRulesForm" label-width="120px">
+        <el-form-item label="直播标题" prop="name">
+          <el-input disabled v-model="liveForm.name" style="width:460px"></el-input>
           <div class="tips">直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符</div>
-        </FormItem>
-        <FormItem label="主播昵称" prop="anchorName">
-          <Input disabled v-model="liveForm.anchorName" style="width:360px"></Input>
+        </el-form-item>
+        <el-form-item label="主播昵称" prop="anchorName">
+          <el-input disabled v-model="liveForm.anchorName" style="width:360px"></el-input>
           <div class="tips">主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符</div>
-        </FormItem>
-        <FormItem label="直播时间" prop="startTime">
-
-          <DatePicker disabled format="yyyy-MM-dd HH:mm" type="datetimerange" v-model="times" @on-change="handleChangeTime" :options="optionsTime" placeholder="直播计划开始时间-直播计划结束时间" style="width: 300px">
-          </DatePicker>
+        </el-form-item>
+        <el-form-item label="直播时间" prop="startTime">
+          <el-date-picker
+            disabled
+            format="YYYY-MM-DD HH:mm"
+            type="datetimerange"
+            v-model="times"
+            @change="handleChangeTime"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="直播计划开始时间-直播计划结束时间"
+            style="width: 300px"
+          />
           <div class="tips">直播开播时间需要在当前时间的10分钟后 并且 开始时间不能在 6 个月后</div>
-        </FormItem>
+        </el-form-item>
 
-        <FormItem label="主播微信号" prop="anchorWechat">
-          <Input disabled v-model="liveForm.anchorWechat" style="width:360px" placeholder="主播微信号"></Input>
+        <el-form-item label="主播微信号" prop="anchorWechat">
+          <el-input disabled v-model="liveForm.anchorWechat" style="width:360px" placeholder="主播微信号"></el-input>
           <div class="tips">主播微信号，如果未实名认证，需要先前往“小程序直播”小程序进行<a target="_black" href="https://res.wx.qq.com/op_res/9rSix1dhHfK4rR049JL0PHJ7TpOvkuZ3mE0z7Ou_Etvjf-w1J_jVX0rZqeStLfwh">实名验证</a></div>
-        </FormItem>
+        </el-form-item>
 
-        <!-- 分享卡片 -->
-        <FormItem label="分享卡片封面" prop="feedsImg">
+        <el-form-item label="分享卡片封面" prop="feedsImg">
           <div class="upload-list" v-if="liveForm.feedsImg">
-            <template>
-              <img :src="liveForm.feedsImg">
-              <div class="upload-list-cover">
-                <Icon type="ios-eye-outline" @click.native="handleView(liveForm.feedsImg)"></Icon>
-
-              </div>
-            </template>
-
-          </div>
-          <Upload v-if="liveForm.feedsImg.length ==0" ref="upload" :show-upload-list="false" :on-success="handleFeedsImgSuccess" :default-file-list="defaultImgList" :format="['jpg','jpeg','png']"
-            :on-format-error="handleFormatError" :max-size="1024" :on-exceeded-size="handleMaxSize" type="drag" :action="action" :headers="accessToken" style="display: inline-block;width:58px;">
-            <div style="width: 58px;height:58px;line-height: 58px;">
-              <Icon type="ios-camera" size="20"></Icon>
+            <img :src="liveForm.feedsImg">
+            <div class="upload-list-cover" @click="handleView(liveForm.feedsImg)">
+              <span class="view-icon">查看</span>
             </div>
-          </Upload>
+          </div>
           <div class="tips">
             直播间分享图，图片规则：建议像素800*640，大小不超过1M；
           </div>
-        </FormItem>
-
-        <!-- 直播间背景墙 -->
-        <FormItem label="直播间背景墙" prop="coverImg">
+        </el-form-item>
 
+        <el-form-item label="直播间背景墙" prop="coverImg">
           <div class="upload-list" v-if="liveForm.coverImg">
-            <template>
-              <img :src="liveForm.coverImg">
-              <div class="upload-list-cover">
-                <Icon type="ios-eye-outline" @click.native="handleView(liveForm.coverImg)"></Icon>
-
-              </div>
-            </template>
-          </div>
-          <Upload v-if="liveForm.coverImg.length ==0" ref="upload" :show-upload-list="false" :on-success="handleCoverImgSuccess" :default-file-list="defaultImgList" :format="['jpg','jpeg','png']"
-            :on-format-error="handleFormatError" :max-size="1024" :on-exceeded-size="handleMaxSize" type="drag" :action="action" :headers="accessToken" style="display: inline-block;width:58px;">
-            <div style="width: 58px;height:58px;line-height: 58px;">
-              <Icon type="ios-camera" size="20"></Icon>
+            <img :src="liveForm.coverImg">
+            <div class="upload-list-cover" @click="handleView(liveForm.coverImg)">
+              <span class="view-icon">查看</span>
             </div>
-          </Upload>
+          </div>
           <div class="tips"> 直播间背景图，图片规则：建议像素1080*1920，大小不超过1M</div>
-        </FormItem>
-
-        <!-- 直播间背景墙 -->
-        <FormItem label="直播间分享图" prop="shareImg">
+        </el-form-item>
 
+        <el-form-item label="直播间分享图" prop="shareImg">
           <div class="upload-list" v-if="liveForm.shareImg">
-            <template>
-              <img :src="liveForm.shareImg">
-              <div class="upload-list-cover">
-                <Icon type="ios-eye-outline" @click.native="handleView(liveForm.shareImg)"></Icon>
-
-              </div>
-            </template>
-          </div>
-          <Upload v-if="liveForm.shareImg.length ==0" ref="upload" :show-upload-list="false" :on-success="handleShareImgSuccess" :default-file-list="defaultImgList" :format="['jpg','jpeg','png']"
-            :on-format-error="handleFormatError" :max-size="1024" :on-exceeded-size="handleMaxSize" type="drag" :action="action" :headers="accessToken" style="display: inline-block;width:58px;">
-            <div style="width: 58px;height:58px;line-height: 58px;">
-              <Icon type="ios-camera" size="20"></Icon>
+            <img :src="liveForm.shareImg">
+            <div class="upload-list-cover" @click="handleView(liveForm.shareImg)">
+              <span class="view-icon">查看</span>
             </div>
-          </Upload>
+          </div>
           <div class="tips"> 直播间分享图，图片规则：建议像素800*640，大小不超过1M</div>
-        </FormItem>
+        </el-form-item>
 
-        <FormItem label="商品" v-if="$route.query.id">
-          <Table class="goods-table" :columns="liveColumns" :data="liveData">
-            <template slot-scope="{ row,index }" slot="goodsName">
-              <div class="flex-goods">
-                <Badge v-if="index == 0 || index ==1" color="volcano"></Badge>
-                <img class="thumbnail" :src="row.thumbnail || row.goodsImage">
-                {{ row.goodsName || row.name }}
-              </div>
-            </template>
-            <template slot-scope="{ row }" class="price" slot="price">
-              <div>
-                <div v-if="row.priceType == 1">{{row.price | unitPrice('￥')}}</div>
-                <div v-if="row.priceType == 2">{{row.price | unitPrice('￥')}}至{{row.price2 | unitPrice('￥')}}</div>
-                <div v-if="row.priceType == 3">{{row.price | unitPrice('￥')}}<span class="original-price">{{row.price2 | unitPrice('￥')}}</span></div>
-              </div>
-            </template>
-            <template slot-scope="{ row }" slot="quantity">
-              <div>{{row.quantity}}</div>
-            </template>
-          </Table>
+        <el-form-item label="商品" v-if="$route.query.id">
+          <el-table class="goods-table" border :data="liveData" style="width: 100%">
+            <el-table-column label="商品" min-width="200">
+              <template #default="{ row, $index }">
+                <div v-if="row" class="flex-goods">
+                  <el-badge v-if="$index == 0 || $index == 1" is-dot type="danger" />
+                  <img class="thumbnail" :src="row.thumbnail || row.goodsImage">
+                  {{ row.goodsName || row.name }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="价格" min-width="160">
+              <template #default="{ row }">
+                <div v-if="row">
+                  <div v-if="row.priceType == 1">{{ $filters.unitPrice(row.price, '￥') }}</div>
+                  <div v-if="row.priceType == 2">{{ $filters.unitPrice(row.price, '￥') }}至{{ $filters.unitPrice(row.price2, '￥') }}</div>
+                  <div v-if="row.priceType == 3">
+                    {{ $filters.unitPrice(row.price, '￥') }}
+                    <span class="original-price">{{ $filters.unitPrice(row.price2, '￥') }}</span>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="库存" width="100">
+              <template #default="{ row }">
+                <span v-if="row">{{ row.quantity }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
           <div class="tips">
             直播间商品中前两个商品将自动被选为封面，伴随直播间在直播列表中显示
           </div>
-        </FormItem>
+        </el-form-item>
 
-        <FormItem>
-          <Button type="primary" @click="createLives()">保存</Button>
+        <el-form-item>
+          <el-button type="primary" @click="createLives()">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-        </FormItem>
-      </Form>
-    </Card>
-    <!-- 浏览图片 -->
-    <Modal title="查看图片" v-model="imageVisible">
+    <el-dialog v-model="imageVisible" title="查看图片" width="600px">
       <img :src="imageSrc" v-if="imageVisible" style="width: 100%">
-    </Modal>
-
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { getLiveInfo } from "@/api/promotion";
+
 export default {
   data() {
     return {
-      imageVisible: false, //查看图片的dailog
-      imageSrc: "", //查看图片的路径
+      imageVisible: false,
+      imageSrc: "",
       liveForm: {
-        name: "", //直播标题
-        anchorName: "", //主播昵称
-        anchorWechat: "", //主播微信号
-        feedsImg: "", //分享卡片封面
-        coverImg: "", //直播间背景墙
-        shareImg: "", //分享图
+        name: "",
+        anchorName: "",
+        anchorWechat: "",
+        feedsImg: "",
+        coverImg: "",
+        shareImg: "",
         startTime: "",
       },
-
-      times: [], //接收直播时间数据
-      // 直播商品表格表头
-      liveColumns: [
-        {
-          title: "商品",
-          slot: "goodsName",
-        },
-        {
-          title: "价格",
-          slot: "price",
-        },
-        {
-          title: "库存",
-          slot: "quantity",
-          width: 100,
-        },
-        {
-          title: "操作",
-          slot: "action",
-          width: 250,
-        },
-      ],
-      liveData: [], //直播商品集合
-      commodityList: "", //商品集合
+      times: [],
+      liveData: [],
+      commodityList: "",
     };
   },
   mounted() {
-    /**
-     * 如果query.id有值说明是查看详情
-     * liveStatus 可以判断当前直播状态 从而区分数据 是否是未开始、已开启、已关闭、
-     */
     if (this.$route.query.id) {
-      // 获取直播间详情
       this.getLiveDetail();
     }
     this.accessToken = {
@@ -184,48 +140,32 @@ export default {
   },
 
   methods: {
-    /**
-     * 上传图片查看图片
-     */
     handleView(src) {
       this.imageVisible = true;
       this.imageSrc = src;
     },
-    // 上传文件超过大小限制
     handleMaxSize(file) {
       this.$Notice.warning({
         title: "文件大小过大",
         desc: "所选文件大小过大, 不得超过 1M.",
       });
     },
-    /**
-     * 获取直播间详情
-     */
     async getLiveDetail() {
       let result = await getLiveInfo(this.$route.query.id);
 
-      // 将数据回调到liveform里面
       if (result.success) {
         let data = result.result;
         for (let key in data) {
           this.liveForm[key] = data[key];
         }
-        // 将选择的商品回调给表格
 
         this.liveData = data.commodityList;
         this.commodityList = data.commodityList;
 
-        // 将时间格式化
-        this.$set(
-          this.times,
-          [0],
-          this.$options.filters.unixToDate(data.startTime, "yyyy-MM-dd hh:mm")
-        );
-        this.$set(
-          this.times,
-          [1],
-          this.$options.filters.unixToDate(data.endTime, "yyyy-MM-dd hh:mm")
-        );
+        this.times = [
+          this.$filters.unixToDate(data.startTime, "yyyy-MM-dd hh:mm"),
+          this.$filters.unixToDate(data.endTime, "yyyy-MM-dd hh:mm"),
+        ];
         this.liveStatus = data.status;
       }
     },
@@ -236,7 +176,7 @@ export default {
 <style lang="scss" scoped>
 .action {
   display: flex;
-  ::v-deep .ivu-btn {
+  :deep(.el-button) {
     margin: 0 5px !important;
   }
 }
@@ -253,7 +193,6 @@ export default {
 .flex-goods {
   margin: 10px;
   display: flex;
-
   align-items: center;
   > img {
     margin-right: 10px;
@@ -297,7 +236,7 @@ export default {
 .upload-list:hover .upload-list-cover {
   display: block;
 }
-.upload-list-cover i {
+.view-icon {
   color: #fff;
   font-size: 20px;
   cursor: pointer;
diff --git a/manager/src/views/promotions/live/live.vue b/manager/src/views/promotions/live/live.vue
index 7efc21c9..fa9ce302 100644
--- a/manager/src/views/promotions/live/live.vue
+++ b/manager/src/views/promotions/live/live.vue
@@ -1,181 +1,93 @@
 <template>
   <div>
-    <Card>
-      <Tabs v-model="searchForm.status">
-        <!-- 标签栏 -->
-        <TabPane
+    <el-card>
+      <el-tabs v-model="searchForm.status">
+        <el-tab-pane
           v-for="(item, index) in tabs"
           :key="index"
           :name="item.status"
           :label="item.title"
-        >
-        </TabPane>
-      </Tabs>
-      <Table :columns="liveColumns" :data="liveData"></Table>
-      <Row type="flex" style="margin: 20px" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        />
+      </el-tabs>
+
+      <el-table :data="liveData" style="width: 100%">
+        <el-table-column prop="name" label="直播标题" />
+        <el-table-column prop="anchorName" label="主播昵称" />
+        <el-table-column label="直播开始时间">
+          <template #default="{ row }">
+            <span v-if="row">{{ $filters.unixToDate(row.startTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="直播结束时间">
+          <template #default="{ row }">
+            <span v-if="row">{{ $filters.unixToDate(row.endTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否推荐" align="center">
+          <template #default="{ row, $index }">
+            <el-switch
+              v-if="row"
+              v-model="row.recommend"
+              inline-prompt
+              active-text="是"
+              inactive-text="否"
+              @change="star(row, $index)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="直播状态">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.status == 'NEW'" type="primary">未开始</el-tag>
+              <el-tag v-else-if="row.status == 'START'" type="success">直播中</el-tag>
+              <el-tag v-else type="warning">已结束</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <a v-if="row" class="link-text" @click="getLiveDetail(row)">查看</a>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10 page" style="display: flex; justify-content: flex-end; margin: 20px 0">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePageNumber"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePageNumber"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
 import { getLiveList, whetherStar } from "@/api/promotion.js";
+
 export default {
   data() {
     return {
-      // 查询数据的总数
       total: 0,
-      // 查询的form
       searchForm: {
         pageSize: 20,
         pageNumber: 1,
         status: "NEW",
       },
-      // 直播tab选项栏
       tabs: [
-        {
-          title: "直播中",
-          status: "START",
-        },
-        {
-          title: "未开始",
-          status: "NEW",
-        },
-        {
-          title: "已结束",
-          status: "END",
-        },
+        { title: "直播中", status: "START" },
+        { title: "未开始", status: "NEW" },
+        { title: "已结束", status: "END" },
       ],
-      liveColumns: [
-        {
-          title: "直播标题",
-          key: "name",
-        },
-        {
-          title: "主播昵称",
-          key: "anchorName",
-        },
-        {
-          title: "直播开始时间",
-          key: "createTime",
-          render: (h, params) => {
-            return h("span", this.$options.filters.unixToDate(params.row.startTime));
-          },
-        },
-        {
-          title: "直播结束时间",
-          key: "endTime",
-          render: (h, params) => {
-            return h(
-              "span",
-
-              this.$options.filters.unixToDate(params.row.endTime)
-            );
-          },
-        },
-        {
-          title: "是否推荐",
-          align: "center",
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "i-switch",
-                {
-                  // 数据库0 enabled,1 disabled
-                  props: {
-                    type: "primary",
-                    size: "large",
-                    value: params.row.recommend == true,
-                  },
-                  on: {
-                    "on-change": () => {
-                      this.star(params.row, params.index);
-                    },
-                  },
-                },
-                [
-                  h("span", {
-                    slot: "open",
-                    domProps: {
-                      innerHTML: "是",
-                    },
-                  }),
-                  h("span", {
-                    slot: "close",
-                    domProps: {
-                      innerHTML: "否",
-                    },
-                  }),
-                ]
-              ),
-            ]);
-          },
-        },
-
-        {
-          title: "直播状态",
-          render: (h, params) => {
-            if (params.row.status == "NEW") {
-              return h("div", [h("tag", { props: { color: "blue" } }, "未开始")]);
-            } else if (params.row.status == "START") {
-              return h("div", [h("tag", { props: { color: "green" } }, "直播中")]);
-            } else {
-              return h("div", [h("tag", { props: { color: "volcano" } }, "已结束")]);
-            }
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          render: (h, params) => {
-            return h(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                },
-              },
-              [
-                h(
-                  "Button",
-                  {
-                    props: {
-                      type: "error",
-                      size: "small",
-                    },
-                    style: {
-                      marginRight: "5px",
-                    },
-                    on: {
-                      click: () => {
-                        this.getLiveDetail(params.row);
-                      },
-                    },
-                  },
-                  "查看"
-                ),
-              ]
-            );
-          },
-        },
-      ], //table中显示的title
-      liveData: [], //table中显示的直播数据
+      liveData: [],
     };
   },
   watch: {
-    // 直播状态
     "searchForm.status": {
       handler() {
         this.liveData = [];
@@ -188,42 +100,17 @@ export default {
     this.getStoreLives();
   },
   methods: {
-    /**
-     * 是否推荐
-     */
     async star(val, index) {
-      let switched;
-      if (this.liveData[index].recommend) {
-        this.$set(this.liveData[index], "recommend", false);
-        switched = false;
-      } else {
-        this.$set(this.liveData[index], "recommend", true);
-        switched = true;
-      }
-
+      let switched = this.liveData[index].recommend;
       await whetherStar({ id: val.id, recommend: switched });
-
       this.getStoreLives();
     },
-
-    /**
-     * 页面数据大小分页回调
-     */
-    changePageSize(val) {
-      this.searchForm.pageSize = val;
+    changePageSize() {
       this.getStoreLives();
     },
-    /**
-     * 分页回调
-     */
-    changePageNumber(val) {
-      this.searchForm.pageNumber = val;
+    changePageNumber() {
       this.getStoreLives();
     },
-
-    /**
-     * 获取店铺直播间列表
-     */
     async getStoreLives() {
       let result = await getLiveList(this.searchForm);
       if (result.success) {
@@ -231,10 +118,6 @@ export default {
         this.total = result.result.total;
       }
     },
-
-    /**
-     * 获取直播间详情
-     */
     getLiveDetail(val) {
       this.$router.push({
         path: "/live-detail",
diff --git a/manager/src/views/promotions/pintuan/pintuan-goods.vue b/manager/src/views/promotions/pintuan/pintuan-goods.vue
index 24c43ba5..19bae4cc 100644
--- a/manager/src/views/promotions/pintuan/pintuan-goods.vue
+++ b/manager/src/views/promotions/pintuan/pintuan-goods.vue
@@ -1,163 +1,133 @@
 <template>
   <div class="pintuan-goods">
-    <Card>
+    <el-card>
       <h4>活动详情</h4>
-      <Table style="margin: 10px 0" border :columns="columns" :data="data"></Table>
+      <el-table border :data="data" style="width: 100%; margin: 10px 0">
+        <el-table-column prop="promotionName" label="活动名称" min-width="120" />
+        <el-table-column prop="startTime" label="活动开始时间" min-width="120" />
+        <el-table-column prop="endTime" label="活动结束时间" min-width="120" />
+        <el-table-column prop="requiredNum" label="成团人数" min-width="90" />
+        <el-table-column prop="limitNum" label="限购数量" min-width="90" />
+        <el-table-column label="状态" min-width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
+              {{ promotionStatusText(row.promotionStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
 
       <h4>商品信息</h4>
-      <Table
-        :loading="loading"
+      <el-table
+        ref="table"
+        v-loading="loading"
         border
         class="operation"
-        :columns="goodsColumns"
         :data="goodsData"
-        ref="table"
-        sortable="custom"
+        style="width: 100%"
       >
-        <template slot-scope="{ row }" slot="goodsName">
-          <div>
-            <a class="mr_10" @click="linkTo(row.goodsId, row.skuId)">{{
-              row.goodsName
-            }}</a>
-            <Poptip trigger="hover" title="扫码在手机中查看" transfer>
-              <div slot="content">
+        <el-table-column label="商品名称" min-width="120">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
+              <el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
+                <template #reference>
+                  <img
+                    src="../../../assets/qrcode.svg"
+                    style="vertical-align: middle"
+                    class="hover-pointer"
+                    width="20"
+                    height="20"
+                    alt="qrcode"
+                  />
+                </template>
                 <vue-qr
                   :text="wapLinkTo(row.goodsId, row.skuId)"
                   :margin="0"
-                  colorDark="#000"
-                  colorLight="#fff"
+                  color-dark="#000"
+                  color-light="#fff"
                   :size="150"
-                ></vue-qr>
-              </div>
-              <img
-                src="../../../assets/qrcode.svg"
-                style="vertical-align: middle"
-                class="hover-pointer"
-                width="20"
-                height="20"
-                alt=""
-              />
-            </Poptip>
-          </div>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="page operation">
-        <Page
-          :current="searchForm.pageNumber"
+                />
+              </el-popover>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column prop="quantity" label="库存" min-width="80" />
+        <el-table-column label="拼团价格" min-width="100">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">
+              {{ $filters.unitPrice(row.price, "￥") }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="page operation mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
+
 <script>
 import { getPintuanGoodsList, getPintuanDetail } from "@/api/promotion.js";
 import vueQr from "vue-qr";
-import { promotionsStatusRender } from "@/utils/promotions";
 
 export default {
-  components: {
-    "vue-qr": vueQr,
-  },
+  components: { vueQr },
   data() {
     return {
-      loading: false, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-        },
-
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      columns: [
-        {
-          title: "活动名称",
-          key: "promotionName",
-          minWidth: 120,
-        },
-        {
-          title: "活动开始时间",
-          key: "startTime",
-          minWidth: 120,
-        },
-        {
-          title: "活动结束时间",
-          key: "endTime",
-          minWidth: 120,
-        },
-        {
-          title: "成团人数",
-          key: "requiredNum",
-        },
-        {
-          title: "限购数量",
-          key: "limitNum",
-        },
-        {
-          title: "状态",
-          key: "promotionStatus",
-          minWidth: 100,
-          render: (h, params) => {
-            return promotionsStatusRender(h, params);
-          },
-        },
-      ],
-      goodsColumns: [
-        {
-          title: "商品名称",
-          slot: "goodsName",
-          minWidth: 120,
-        },
-
-        {
-          title: "库存",
-          key: "quantity",
-          minWidth: 40,
-        },
-
-        {
-          title: "拼团价格",
-          key: "price",
-          minWidth: 50,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-          },
-        },
-      ],
-      goodsData: [], // 商品数据
+      loading: false,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+      },
+      data: [],
+      total: 0,
+      goodsData: [],
     };
   },
   methods: {
-    // 初始化数据
+    promotionStatusText(status) {
+      const map = {
+        NEW: "未开始",
+        START: "已开始",
+        END: "已结束",
+        CLOSE: "已关闭",
+      };
+      return map[status] || "未知";
+    },
+    promotionStatusTagType(status) {
+      const map = {
+        NEW: "info",
+        START: "success",
+        END: "danger",
+        CLOSE: "danger",
+      };
+      return map[status] || "danger";
+    },
     init() {
       this.getDataList();
       this.getPintuanMsg();
     },
-    // 分页 改变页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getDataList();
     },
-    // 分页 改变页数
-    changePageSize(v) {
+    changePageSize() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 获取拼团商品列表
     getDataList() {
       this.loading = true;
       this.searchForm.pintuanId = this.$route.query.id;
-
       getPintuanGoodsList(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
@@ -166,7 +136,6 @@ export default {
         }
       });
     },
-    // 获取拼团详情
     getPintuanMsg() {
       getPintuanDetail(this.$route.query.id).then((res) => {
         if (res.success) this.data.push(res.result);
@@ -178,6 +147,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 h4 {
   margin: 20px 0;
@@ -188,4 +158,22 @@ h4 {
   text-align: left;
   border-left: 3px solid red;
 }
+
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.mr_10 {
+  margin-right: 10px;
+}
+
+.hover-pointer {
+  cursor: pointer;
+}
+
+.mt_10 {
+  margin-top: 10px;
+}
 </style>
diff --git a/manager/src/views/promotions/pintuan/pintuan.vue b/manager/src/views/promotions/pintuan/pintuan.vue
index 60380554..450c3b86 100644
--- a/manager/src/views/promotions/pintuan/pintuan.vue
+++ b/manager/src/views/promotions/pintuan/pintuan.vue
@@ -1,207 +1,191 @@
 <template>
   <div class="search">
-    <Card>
-      <Form
+    <el-card>
+      <el-form
         ref="searchForm"
         :model="searchForm"
         inline
-        :label-width="70"
+        label-width="70px"
         class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <Form-item label="活动名称" prop="promotionName">
-          <Input
-            type="text"
+        <el-form-item label="活动名称" prop="promotionName">
+          <el-input
             v-model="searchForm.promotionName"
             placeholder="请输入活动名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="活动状态" prop="promotionStatus">
-          <Select
+        </el-form-item>
+        <el-form-item label="活动状态" prop="promotionStatus">
+          <el-select
             v-model="searchForm.promotionStatus"
             placeholder="请选择"
             clearable
             style="width: 240px"
           >
-            <Option value="NEW">未开始</Option>
-            <Option value="START">已开始/上架</Option>
-            <Option value="END">已结束/下架</Option>
-            <Option value="CLOSE">紧急关闭/作废</Option>
-          </Select>
-        </Form-item>
-        <Form-item label="活动时间">
-          <DatePicker
+            <el-option label="未开始" value="NEW" />
+            <el-option label="已开始/上架" value="START" />
+            <el-option label="已结束/下架" value="END" />
+            <el-option label="紧急关闭/作废" value="CLOSE" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="活动时间">
+          <el-date-picker
             v-model="selectDate"
             type="daterange"
             clearable
-            placeholder="选择起始时间"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
             style="width: 240px"
-          ></DatePicker>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
-      </Form>
-    </Card>
-    <Card>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-table
         ref="table"
+        v-loading="loading"
+        border
+        :data="data"
         class="mt_10"
+        style="width: 100%"
       >
-        <template slot-scope="{ row }" slot="action">
-          <a
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
-            @click="view(row)"
-          >查看</a>
-          <span
-            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
-            style="margin:0 8px;color:#dcdee2"
-          >|</span>
-          <a
-            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-            @click="close(row)"
-          >关闭</a>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        <el-table-column
+          prop="promotionName"
+          label="活动名称"
+          min-width="150"
+          show-overflow-tooltip
+        />
+        <el-table-column label="状态" width="110">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
+              {{ promotionStatusText(row.promotionStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="storeName" label="所属店铺" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="startTime" label="活动开始时间" width="180" />
+        <el-table-column prop="endTime" label="活动结束时间" width="180" />
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="view(row)">查看</a>
+              <template v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'">
+                <span class="op-split">|</span>
+                <a class="link-text" @click="close(row)">关闭</a>
+              </template>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
 import { getPintuanList, updatePintuanStatus } from "@/api/promotion";
-import { promotionsStatusRender } from "@/utils/promotions";
 
 export default {
   name: "pintuan",
   data() {
     return {
-      selectDate: [], //选中的数据
-      loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime",
-          order: "desc", // 默认排序方式
-        },
-      columns: [
-        // 表头
-        {
-          title: "活动名称",
-          key: "promotionName",
-          minWidth: 150,
-          tooltip: true,
-        },
-        {
-          title: "状态",
-          key: "promotionStatus",
-          width: 110,
-          render: (h, params) => {
-            return promotionsStatusRender(h, params);
-          },
-        },
-        {
-          title: "所属店铺",
-          key: "storeName",
-          minWidth: 120,
-          tooltip: true,
-        },
-
-        {
-          title: "活动开始时间",
-          key: "startTime",
-          width: 180,
-        },
-        {
-          title: "活动结束时间",
-          key: "endTime",
-          width: 180,
-        },
-
-        {
-          fixed: "right",
-          title: "操作",
-          slot: "action",
-          align: "center",
-          width: 200,
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      selectDate: [],
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        promotionName: "",
+        promotionStatus: "",
+      },
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
+    promotionStatusText(status) {
+      const map = {
+        NEW: "未开始",
+        START: "已开始",
+        END: "已结束",
+        CLOSE: "已关闭",
+      };
+      return map[status] || "未知";
+    },
+    promotionStatusTagType(status) {
+      const map = {
+        NEW: "info",
+        START: "success",
+        END: "danger",
+        CLOSE: "danger",
+      };
+      return map[status] || "danger";
+    },
     init() {
       this.getDataList();
     },
-    // 分页 修改页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
-      this.clearSelectAll();
     },
-    // 分页 修改页数
     changePageSize(v) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
-      handleSearch() {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 20;
-        this.getDataList();
-      },
-    // 获取拼团列表
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 20;
+      this.getDataList();
+    },
     getDataList() {
       this.loading = true;
       if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = this.selectDate[0].getTime();
-        this.searchForm.endTime = this.selectDate[1].getTime();
+        this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
+        this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
       } else {
         this.searchForm.startTime = null;
         this.searchForm.endTime = null;
       }
-      getPintuanList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
+      getPintuanList(this.searchForm)
+        .then((res) => {
+          if (res.success) {
+            this.data = res.result.records;
+            this.total = res.result.total;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
-    // 查看拼团商品
     view(v) {
       this.$router.push({ name: "pintuan-goods", query: { id: v.id } });
     },
-    // 关闭当前活动
     close(v) {
       this.$Modal.confirm({
         title: "确认关闭",
-        // 记得确认修改此处
         content: "您确认要关闭此拼团活动?",
         loading: true,
         onOk: () => {
-          // 删除
           updatePintuanStatus(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -218,8 +202,9 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
-.ivu-form-item {
-  margin-bottom: 0 !important;
+.mt_10 {
+  margin-top: 10px;
 }
 </style>
diff --git a/manager/src/views/promotions/points-goods-category/points-goods-category.vue b/manager/src/views/promotions/points-goods-category/points-goods-category.vue
index a4309fa8..43cb5d0b 100644
--- a/manager/src/views/promotions/points-goods-category/points-goods-category.vue
+++ b/manager/src/views/promotions/points-goods-category/points-goods-category.vue
@@ -1,77 +1,70 @@
 <template>
   <div>
-    <Card>
+    <el-card>
       <div class="operation mb_10">
-        <Button @click="addParent" type="primary" icon="md-add">添加积分商品分类</Button>
-        <Button icon="md-refresh" @click="init">刷新</Button>
+        <el-button type="primary" @click="addParent">添加积分商品分类</el-button>
+        <el-button @click="init">刷新</el-button>
       </div>
-      <tree-table
-        ref="treeTable"
-        size="default"
-        :loading="loading"
+
+      <el-table
+        v-loading="loading"
         :data="tableData"
-        :columns="columns"
-        :border="true"
-        :show-index="false"
-        :is-fold="true"
-        :expand-type="false"
-        primary-key="id"
+        row-key="id"
+        border
+        default-expand-all
+        :tree-props="{ children: 'children' }"
+        style="width: 100%"
       >
-        <template slot="action" slot-scope="scope">
-          <a
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:10px"
-            @click.native="edit(scope.row)"
-            >编辑</a>
-          <span style="margin:0 8px;color:#dcdee2">|</span>
-          <a
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-            @click.native="remove(scope.row)"
-            >删除</a>
-        </template>
-      </tree-table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        <el-table-column prop="name" label="分类名称" min-width="200" />
+        <el-table-column prop="sortOrder" label="排序值" min-width="120" />
+        <el-table-column label="操作" width="200" align="center">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="edit(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
-    <Modal
-      :title="modalTitle"
-      v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
-    >
-      <Form
-        ref="form"
-        :model="formAdd"
-        :label-width="100"
-        :rules="formValidate"
-      >
-        <FormItem label="分类名称" prop="name">
-          <Input v-model="formAdd.name" clearable style="width: 100%" />
-        </FormItem>
-        <FormItem label="排序值" prop="sortOrder">
-          <InputNumber v-model="formAdd.sortOrder" :min="0" clearable style="width: 100%" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="Submit"
-          >提交</Button
-        >
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
       </div>
-    </Modal>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form ref="form" :model="formAdd" label-width="100px" :rules="formValidate">
+        <el-form-item label="分类名称" prop="name">
+          <el-input v-model="formAdd.name" clearable />
+        </el-form-item>
+        <el-form-item label="排序值" prop="sortOrder">
+          <el-input-number v-model="formAdd.sortOrder" :min="0" style="width: 100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="Submit">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
+
 <script>
 import {
   getPointsGoodsCategoryList,
@@ -79,132 +72,90 @@ import {
   updatePointsGoodsCategory,
   deletePointsGoodsCategoryById,
 } from "@/api/promotion";
-import TreeTable from "@/components/tree-table/Table/Table";
 
 export default {
   name: "pointsGoodsCategory",
-  components: {
-    TreeTable
-  },
   data() {
     return {
-      submitLoading:false,
-      loading: false, // 加载状态
-      modalType: 0, // 添加或编辑标识
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
-      showParent: false, // 是否展示上级菜单
-      parentTitle: "", // 父级菜单名称
+      submitLoading: false,
+      loading: false,
+      modalType: 0,
+      modalVisible: false,
+      modalTitle: "",
       searchForm: {
         pageNumber: 1,
         pageSize: 20,
         sort: "sortOrder",
-        order: "asc"
+        order: "asc",
       },
       formAdd: {
-        // 添加或编辑表单对象初始化数据
         parentId: 0,
         name: "",
         deleteFlag: 0,
         level: 0,
-        sortOrder:1
+        sortOrder: 1,
       },
-      // 表单验证规则
       formValidate: {
-        name: [{ required: true, message: "商品分类名称不能为空" }],
+        name: [{ required: true, message: "商品分类名称不能为空", trigger: "blur" }],
       },
-      columns: [
-        {
-          title: "分类名称",
-          key: "name",
-          minWidth: "120px",
-        },
-        {
-          title: "排序值",
-          key: "sortOrder",
-          minWidth: "120px",
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          headerAlign: "center",
-          width: "400px",
-          type: "template",
-          template: "action",
-        },
-      ],
-      tableData: [], // 表格数据
-      total: 0
+      tableData: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getAllList();
     },
-    // 编辑分类
     edit(v) {
       this.modalType = 1;
       this.modalTitle = "编辑";
       this.formAdd.id = v.id;
       this.formAdd.name = v.name;
       this.formAdd.sortOrder = v.sortOrder;
-      this.showParent = false;
       this.modalVisible = true;
     },
-    // 添加顶级分类
     addParent() {
       this.modalType = 0;
       this.modalTitle = "添加积分商品分类";
-      this.parentTitle = "顶级分类";
-      this.showParent = true;
-      this.$refs.form.resetFields();
+      this.$refs.form?.resetFields();
       delete this.formAdd.id;
       this.formAdd.parentId = 0;
       this.modalVisible = true;
     },
-    // 提交
     Submit() {
       this.$refs.form.validate((valid) => {
-        console.log(valid);
-        if (valid) {
-          this.submitLoading = true;
-          if (this.modalType === 0) {
-            // 添加 避免编辑后传入id等数据 记得删除
-            delete this.formAdd.id;
-            addPointsGoodsCategory(this.formAdd).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("添加成功");
-                this.getAllList();
-                this.modalVisible = false;
-                this.$refs.form.resetFields();
-              }
-            });
-          } else {
-            // 编辑
-            updatePointsGoodsCategory(this.formAdd).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("修改成功");
-                this.getAllList();
-                this.modalVisible = false;
-                this.$refs.form.resetFields();
-              }
-            });
-          }
+        if (!valid) return;
+        this.submitLoading = true;
+        if (this.modalType === 0) {
+          delete this.formAdd.id;
+          addPointsGoodsCategory(this.formAdd).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("添加成功");
+              this.getAllList();
+              this.modalVisible = false;
+              this.$refs.form.resetFields();
+            }
+          });
+        } else {
+          updatePointsGoodsCategory(this.formAdd).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("修改成功");
+              this.getAllList();
+              this.modalVisible = false;
+              this.$refs.form.resetFields();
+            }
+          });
         }
       });
     },
-    // 删除
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
         content: "您确认要删除 " + v.name + " ?",
         loading: true,
         onOk: () => {
-          // 删除
           deletePointsGoodsCategoryById(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -215,27 +166,29 @@ export default {
         },
       });
     },
-    // 获取所有分类
     getAllList() {
       this.loading = true;
-      getPointsGoodsCategoryList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          const records = res.result.records || [];
-          const sortFn = (a, b) => (a.sortOrder || 0) - (b.sortOrder || 0);
-          const sortRecursively = (list = []) => {
-            list.sort(sortFn);
-            list.forEach((item) => {
-              if (Array.isArray(item.children) && item.children.length) {
-                sortRecursively(item.children);
-              }
-            });
-            return list;
-          };
-          this.tableData = sortRecursively(records);
-          this.total = res.result.total || 0;
-        }
-      });
+      getPointsGoodsCategoryList(this.searchForm)
+        .then((res) => {
+          if (res.success) {
+            const records = res.result.records || [];
+            const sortFn = (a, b) => (a.sortOrder || 0) - (b.sortOrder || 0);
+            const sortRecursively = (list = []) => {
+              list.sort(sortFn);
+              list.forEach((item) => {
+                if (Array.isArray(item.children) && item.children.length) {
+                  sortRecursively(item.children);
+                }
+              });
+              return list;
+            };
+            this.tableData = sortRecursively(records);
+            this.total = res.result.total || 0;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
     changePage(v) {
       this.searchForm.pageNumber = v;
@@ -245,14 +198,28 @@ export default {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getAllList();
-    }
+    },
   },
   mounted() {
     this.init();
   },
 };
 </script>
-<style lang="scss" scoped>
-
 
+<style scoped>
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
+.mb_10 {
+  margin-bottom: 10px;
+}
+.mt_10 {
+  margin-top: 10px;
+}
 </style>
diff --git a/manager/src/views/promotions/points-goods/points-goods-add.vue b/manager/src/views/promotions/points-goods/points-goods-add.vue
index a68158ac..73e620dc 100644
--- a/manager/src/views/promotions/points-goods/points-goods-add.vue
+++ b/manager/src/views/promotions/points-goods/points-goods-add.vue
@@ -1,100 +1,122 @@
 <template>
   <div class="wrapper">
-    <Card>
-      <Form ref="form" :model="form" :rules="formRule">
+    <el-card>
+      <el-form ref="form" :model="form" :rules="formRule" label-width="120px">
         <div class="base-info-item">
           <div class="form-item-view">
-            <FormItem astyle="width: 100%">
+            <el-form-item style="width: 100%">
               <div style="display: flex; margin-bottom: 10px">
-                <Button type="primary" @click="openSkuList">选择商品</Button>
-                <Button
-                  type="error"
-                  ghost
+                <el-button type="primary" @click="openSkuList">选择商品</el-button>
+                <el-button
+                  type="danger"
+                  plain
                   style="margin-left: 10px"
                   @click="delSelectGoods"
-                >批量删除
-                </Button
-                >
+                >批量删除</el-button>
               </div>
-              <Table
+              <el-table
                 border
                 v-if="showTable"
-                :columns="columns"
                 :data="promotionGoodsList"
-                @on-selection-change="changeSelect"
+                style="width: 100%"
+                @selection-change="changeSelect"
               >
-                <template slot-scope="{ row }" slot="skuId">
-                  <div>{{ row.skuId }}</div>
-                </template>
-
-                <template slot-scope="{ index }" slot="settlementPrice">
-                  <InputNumber
-                    :min="0"
-                    type="number"
-                    v-model="promotionGoodsList[index].settlementPrice"
-                  />
-                </template>
-
-                <template slot-scope="{ row, index }" slot="pointsGoodsCategory">
-                  <Select
-                    v-model="promotionGoodsList[index].pointsGoodsCategoryId"
-                    :transfer="true"
-                    :label-in-value="true"
-                    @on-change="
-                      (val) => {
-                        changeCategory(val, index);
-                      }
-                    "
-                  >
-                    <Option
-                      v-for="item in categoryList"
-                      :value="item.id"
-                      :key="item.id"
-                    >{{ item.name }}
-                    </Option
+                <el-table-column type="selection" width="60" align="center" />
+                <el-table-column prop="goodsName" label="商品名称" min-width="120" show-overflow-tooltip />
+                <el-table-column label="SKU编码" min-width="120">
+                  <template #default="{ row }">
+                    <span v-if="row">{{ row.skuId }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="storeName" label="店铺名称" min-width="100" show-overflow-tooltip />
+                <el-table-column label="商品价格" width="110">
+                  <template #default="{ row }">
+                    <span v-if="row" :style="{ color: $mainColor }">
+                      {{ $filters.unitPrice(row.price, "￥") }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="库存" width="90">
+                  <template #default="{ row }">
+                    <span v-if="row">{{ row.quantity }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="结算价格" min-width="130">
+                  <template #default="{ $index }">
+                    <el-input-number
+                      :min="0"
+                      v-model="promotionGoodsList[$index].settlementPrice"
+                      style="width: 110px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="分类" min-width="160">
+                  <template #default="{ $index }">
+                    <el-select
+                      v-model="promotionGoodsList[$index].pointsGoodsCategoryId"
+                      @change="(val) => changeCategory(val, $index)"
+                      style="width: 140px"
                     >
-                  </Select>
-                </template>
-                <template slot-scope="{ index }" slot="activeStock">
-                  <InputNumber
-                    :min="0"
-                    type="number"
-                    v-model="promotionGoodsList[index].activeStock"
-                  />
-                </template>
-                <template slot-scope="{ index }" slot="points">
-                  <InputNumber
-                    :min="0"
-                    type="number"
-                    v-model="promotionGoodsList[index].points"
-                  />
-                </template>
-              </Table>
-            </FormItem>
+                      <el-option
+                        v-for="item in categoryList"
+                        :value="item.id"
+                        :key="item.id"
+                        :label="item.name"
+                      />
+                    </el-select>
+                  </template>
+                </el-table-column>
+                <el-table-column label="活动库存" min-width="130">
+                  <template #default="{ $index }">
+                    <el-input-number
+                      :min="0"
+                      v-model="promotionGoodsList[$index].activeStock"
+                      style="width: 110px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="兑换积分" min-width="130">
+                  <template #default="{ $index }">
+                    <el-input-number
+                      :min="0"
+                      v-model="promotionGoodsList[$index].points"
+                      style="width: 110px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="100" align="center">
+                  <template #default="{ $index }">
+                    <el-button type="danger" size="small" plain @click="delGoods($index)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
 
-            <FormItem label="活动时间" prop="rangeTime">
-              <DatePicker type="datetimerange" v-model="form.rangeTime" format="yyyy-MM-dd HH:mm:ss"
-                          placeholder="请选择" :options="options" style="width: 260px">
-              </DatePicker>
-            </FormItem>
+            <el-form-item label="活动时间" prop="rangeTime">
+              <el-date-picker
+                type="datetimerange"
+                v-model="form.rangeTime"
+                format="YYYY-MM-DD HH:mm:ss"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                placeholder="请选择"
+                :disabled-date="options.disabledDate"
+                style="width: 260px"
+              />
+            </el-form-item>
             <div>
-              <Button type="text" @click="closeCurrentPage">返回</Button>
-              <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-              >提交
-              </Button
-              >
+              <el-button link @click="closeCurrentPage">返回</el-button>
+              <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
             </div>
           </div>
         </div>
-      </Form>
-    </Card>
+      </el-form>
+    </el-card>
     <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
   </div>
 </template>
 
 <script>
-import {addPointsGoods, getPointsGoodsCategoryList} from "@/api/promotion";
-import {regular} from "@/utils";
+import { addPointsGoods, getPointsGoodsCategoryList } from "@/api/promotion";
 import skuSelect from "@/components/lili-dialog";
 
 export default {
@@ -105,105 +127,17 @@ export default {
   data() {
     return {
       form: {
-        rangeTime: ["",""],
-        promotionGoodsList: [], // 活动商品列表
+        rangeTime: ["", ""],
+        promotionGoodsList: [],
       },
       showTable: true,
-      promotionGoodsList: [], // 活动商品列表
-      categoryList: [], // 分类列表
-      submitLoading: false, // 添加或编辑提交状态
-      selectedGoods: [], // 已选商品列表，便于删除
+      promotionGoodsList: [],
+      categoryList: [],
+      submitLoading: false,
+      selectedGoods: [],
       formRule: {
-        rangeTime: [{required: true, message: "请选择活动时间"}],
+        rangeTime: [{ required: true, message: "请选择活动时间" }],
       },
-      columns: [
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "商品名称",
-          key: "goodsName",
-          minWidth: 120,
-          render: (h, params) => {
-            return h("div", params.row.goodsName);
-          },
-        },
-        {
-          title: "SKU编码",
-          slot: "skuId",
-          minWidth: 120,
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          minWidth: 60,
-          render: (h, params) => {
-            return h("div", params.row.storeName);
-          },
-        },
-        {
-          title: "商品价格",
-          key: "price",
-          minWidth: 40,
-          render: (h, params) => {
-            return h("priceColorScheme", {props: {value: params.row.price, color: this.$mainColor}});
-          },
-        },
-        {
-          title: "库存",
-          key: "quantity",
-          minWidth: 20,
-          render: (h, params) => {
-            return h("div", params.row.quantity);
-          },
-        },
-        {
-          title: "结算价格",
-          slot: "settlementPrice",
-          minWidth: 40,
-        },
-        {
-          title: "分类",
-          slot: "pointsGoodsCategory",
-          minWidth: 60,
-        },
-        {
-          title: "活动库存",
-          slot: "activeStock",
-          minWidth: 40,
-        },
-        {
-          title: "兑换积分",
-          slot: "points",
-          minWidth: 40,
-        },
-        {
-          title: "操作",
-          key: "action",
-          minWidth: 50,
-          align: "center",
-          render: (h, params) => {
-            return h(
-              "Button",
-              {
-                props: {
-                  size: "small",
-                  type: "error",
-                  ghost: true,
-                },
-                on: {
-                  click: () => {
-                    this.delGoods(params.index);
-                  },
-                },
-              },
-              "删除"
-            );
-          },
-        },
-      ],
       options: {
         disabledDate(date) {
           return date && date.valueOf() < Date.now() - 86400000;
@@ -215,23 +149,21 @@ export default {
     await this.getCategory();
   },
   methods: {
-    // 获取商品分类
     async getCategory() {
       let res = await getPointsGoodsCategoryList();
       this.categoryList = res.result.records;
     },
-    /** 保存积分商品 */
     handleSubmit() {
-      this.form.startTime=this.form.rangeTime[0]
-      this.form.endTime=this.form.rangeTime[1]
+      this.form.startTime = this.form.rangeTime[0];
+      this.form.endTime = this.form.rangeTime[1];
       this.$refs.form.validate((valid) => {
         if (valid) {
           let params = this.promotionGoodsList;
-          const start = this.$options.filters.unixToDate(this.form.startTime / 1000);
-          const end = this.$options.filters.unixToDate(this.form.endTime / 1000);
+          const start = this.$filters.unixToDate(this.form.startTime / 1000);
+          const end = this.$filters.unixToDate(this.form.endTime / 1000);
 
           if (!params || params.length === 0) {
-            this.$Modal.warning({title: "提示", content: "请选择指定商品"});
+            this.$Modal.warning({ title: "提示", content: "请选择指定商品" });
             return;
           }
 
@@ -251,23 +183,19 @@ export default {
         }
       });
     },
-    // 关闭当前页面
     closeCurrentPage() {
       this.$store.commit("removeTag", "add-points-goods");
       localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
       this.$router.go(-1);
     },
-    // 选择分类
-    changeCategory(val, index) {
-      this.promotionGoodsList[index].pointsGoodsCategoryName = val.label;
+    changeCategory(categoryId, index) {
+      const item = this.categoryList.find((c) => c.id === categoryId);
+      this.promotionGoodsList[index].pointsGoodsCategoryName = item ? item.name : "";
     },
-    // 变更选中状态
     changeSelect(e) {
-      // 已选商品批量选择
       this.selectedGoods = e;
     },
     delSelectGoods() {
-      // 多选删除商品
       if (this.selectedGoods.length <= 0) {
         this.$Message.warning("您还未选择要删除的数据");
         return;
@@ -287,11 +215,9 @@ export default {
       });
     },
     delGoods(index) {
-      // 删除商品
       this.promotionGoodsList.splice(index, 1);
     },
     openSkuList() {
-      // 显示商品选择器
       this.$refs.skuSelect.open("goods");
       let data = JSON.parse(JSON.stringify(this.promotionGoodsList));
       data.forEach((e) => {
@@ -300,7 +226,6 @@ export default {
       this.$refs.skuSelect.goodsData = data;
     },
     selectedGoodsData(item) {
-      // 回显已选商品
       let list = [];
       item.forEach((e) => {
         const obj = {
@@ -316,7 +241,7 @@ export default {
           goodsName: e.goodsName || "",
           quantity: e.quantity || "",
           storeName: e.storeName || "",
-          price: e.price || ""
+          price: e.price || "",
         };
         list.push(obj);
       });
diff --git a/manager/src/views/promotions/points-goods/points-goods-edit.vue b/manager/src/views/promotions/points-goods/points-goods-edit.vue
index c1b47abb..314a5480 100644
--- a/manager/src/views/promotions/points-goods/points-goods-edit.vue
+++ b/manager/src/views/promotions/points-goods/points-goods-edit.vue
@@ -1,86 +1,84 @@
 <template>
   <div>
-    <Card>
-      <Form ref="form" :model="form" :label-width="120" :rules="formRule">
+    <el-card>
+      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <h4>积分商品信息</h4>
           <div class="form-item-view">
-            <FormItem label="商品名称">
+            <el-form-item label="商品名称">
               <div>{{ form.goodsSku.goodsName }}</div>
-            </FormItem>
-            <FormItem label="SKU编码">
+            </el-form-item>
+            <el-form-item label="SKU编码">
               <div>{{ form.goodsSku.id }}</div>
-            </FormItem>
-            <FormItem label="店铺名称">
+            </el-form-item>
+            <el-form-item label="店铺名称">
               <div>{{ form.goodsSku.storeName }}</div>
-            </FormItem>
-            <FormItem label="商品价格">
+            </el-form-item>
+            <el-form-item label="商品价格">
               <div>
-                <priceColorScheme :value="form.goodsSku.price" :color="$mainColor"></priceColorScheme>
+                <priceColorScheme :value="form.goodsSku.price" :color="$mainColor" />
               </div>
-            </FormItem>
-            <FormItem label="库存">
+            </el-form-item>
+            <el-form-item label="库存">
               <div>{{ form.goodsSku.quantity }}</div>
-            </FormItem>
-            <FormItem label="结算价格" prop="settlementPrice">
-              <Input
+            </el-form-item>
+            <el-form-item label="结算价格" prop="settlementPrice">
+              <el-input
                 type="number"
                 v-model="form.settlementPrice"
                 placeholder="请填写结算价格"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="分类" prop="pointsGoodsCategoryId">
-              <Select
+            </el-form-item>
+            <el-form-item label="分类" prop="pointsGoodsCategoryId">
+              <el-select
                 v-model="form.pointsGoodsCategoryId"
-                :label-in-value="true"
-                @on-change="changeCategory"
+                placeholder="请选择分类"
+                style="width: 260px"
+                @change="changeCategory"
               >
-                <Option v-for="item in categoryList" :value="item.id" :key="item.id">{{
-                  item.name
-                }}</Option>
-              </Select>
-            </FormItem>
-            <FormItem label="活动库存" prop="activeStock">
-              <Input
+                <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="活动库存" prop="activeStock">
+              <el-input
                 type="number"
                 v-model="form.activeStock"
                 placeholder="请填写活动库存"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="兑换积分" prop="points">
-              <Input
+            </el-form-item>
+            <el-form-item label="兑换积分" prop="points">
+              <el-input
                 type="number"
                 v-model="form.points"
                 placeholder="请填写兑换积分"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="活动开始时间">
-              <DatePicker
-                type="datetimerange"
+            </el-form-item>
+            <el-form-item label="活动开始时间">
+              <el-date-picker
                 v-model="form.rangeTime"
-                format="yyyy-MM-dd HH:mm:ss"
-                placeholder="请选择"
-                :options="options"
-                style="width: 260px"
-              >
-              </DatePicker>
-            </FormItem>
+                type="datetimerange"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                :disabled-date="disabledDate"
+                style="width: 360px"
+              />
+            </el-form-item>
           </div>
           <div class="footer">
-            <Button @click="closeCurrentPage" style="margin-right: 5px">返回</Button>
-            <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-              >保存</Button
-            >
+            <el-button @click="closeCurrentPage" style="margin-right: 5px">返回</el-button>
+            <el-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
           </div>
         </div>
-      </Form>
-    </Card>
+      </el-form>
+    </el-card>
   </div>
 </template>
 
@@ -95,92 +93,84 @@ export default {
   name: "editPointsGoods",
   data() {
     return {
-      pointsGoodsCategoryId:'',
-      pointsGoodsCategoryName:'',
+      pointsGoodsCategoryId: "",
+      pointsGoodsCategoryName: "",
       form: {
-
-        /** 活动名称 */
         promotionName: "",
-        /** 报名截止时间 */
         applyEndTime: "",
-        /** 活动开始时间 */
         startTime: "",
-        /** 抢购时间段 */
         seckillPeriod: [],
-        /** 申请规则 */
         seckillRule: "",
         goodsSku: {},
         promotionStatus: "NEW",
-
+        rangeTime: [],
       },
-      categoryList: [], // 分类列表
-      id: this.$route.query.id, // 活动id
-      submitLoading: false, // 添加或编辑提交状态
+      categoryList: [],
+      id: this.$route.query.id,
+      submitLoading: false,
       formRule: {
         settlementPrice: [{ required: true, message: "请填写结算价格" }],
         pointsGoodsCategoryId: [{ required: true, message: "请选择积分商品分类" }],
         points: [{ required: true, message: "请填写兑换积分" }],
         activeStock: [{ required: true, message: "请填写库存" }],
       },
-      options: {
-        disabledDate(date) {
-          return date && date.valueOf() < Date.now() - 86400000;
-        },
-      },
     };
   },
   async mounted() {
     await this.getCategory();
-    // 如果id不为空则查询信息
     if (this.id) {
       this.getData();
     }
   },
   methods: {
-    // 分类
-    changeCategory(v){
-      console.log(v);
-      this.pointsGoodsCategoryId=v.value
-      this.pointsGoodsCategoryName=v.label
+    disabledDate(date) {
+      return date && date.getTime() < Date.now() - 86400000;
+    },
+    changeCategory(id) {
+      const item = this.categoryList.find((c) => c.id === id);
+      this.pointsGoodsCategoryId = id;
+      this.pointsGoodsCategoryName = item ? item.name : "";
     },
-    // 关闭当前页面
     closeCurrentPage() {
       this.$store.commit("removeTag", "edit-points-goods");
       localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
       this.$router.go(-1);
     },
-    // 获取商品数据
     getData() {
       getPointsGoodsById(this.id).then((res) => {
         if (res.success) {
-          let data = res.result;
+          const data = res.result;
           this.form = data;
           data.rangeTime = [];
           if (data.startTime && data.endTime) {
-            data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
+            data.rangeTime = [data.startTime, data.endTime];
+          }
+          if (data.pointsGoodsCategoryId) {
+            this.changeCategory(data.pointsGoodsCategoryId);
           }
         }
       });
     },
-    // 获取分类
     async getCategory() {
-      let res = await getPointsGoodsCategoryList();
+      const res = await getPointsGoodsCategoryList();
       this.categoryList = res.result.records;
     },
-    /** 保存 */
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          const start = this.$options.filters.unixToDate(this.form.rangeTime[0] / 1000);
-          const end = this.$options.filters.unixToDate(this.form.rangeTime[1] / 1000);
-          this.form.startTime = start;
-          this.form.endTime = end;
-          this.submitLoading = true;
-          let params={
-            ...this.form,
-            pointsGoodsCategoryId: this.pointsGoodsCategoryId,
-            pointsGoodsCategoryName:this.pointsGoodsCategoryName
+          if (!this.form.rangeTime || this.form.rangeTime.length !== 2) {
+            this.$Message.error("请选择活动时间");
+            return;
           }
+          this.form.startTime = this.form.rangeTime[0];
+          this.form.endTime = this.form.rangeTime[1];
+          this.submitLoading = true;
+          const params = {
+            ...this.form,
+            pointsGoodsCategoryId: this.pointsGoodsCategoryId || this.form.pointsGoodsCategoryId,
+            pointsGoodsCategoryName:
+              this.pointsGoodsCategoryName || this.form.pointsGoodsCategoryName,
+          };
           updatePointsGoods(params).then((res) => {
             this.submitLoading = false;
             if (res.success) {
@@ -196,7 +186,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/*编辑基本信息*/
 .el-form {
   padding-bottom: 80px;
 
@@ -207,7 +196,6 @@ export default {
   }
 }
 
-/*平铺*/
 div.base-info-item > div {
   margin-left: 5%;
 }
@@ -233,129 +221,17 @@ div.base-info-item {
     align-items: flex-start;
     justify-content: space-between;
     padding-left: 80px;
-
-    .shop-category-text {
-      font-size: 12px;
-    }
-  }
-
-  .item-goods-properts-row {
-    display: flex;
-    flex-direction: row;
-    word-break: break-all;
-    white-space: normal;
-    width: 300px;
-    height: 100px;
-  }
-
-  .item-goods-properts {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 10px;
-  }
-
-  .form-item {
-    display: flex;
-    align-items: center;
-  }
-
-  /** 审核信息-拒绝原因 */
-  .auth-info {
-    color: red;
-  }
-
-  .el-form-item {
-    width: 30%;
-    min-width: 300px;
-  }
-
-  .goods-name-width {
-    width: 50%;
-    min-width: 300px;
-  }
-
-  .el-form-item__content {
-    margin-left: 120px;
-    text-align: left;
-  }
-
-  p.goods-group-manager {
-    padding-left: 7.5%;
-    text-align: left;
-    color: #999;
-    font-size: 13px;
-  }
-
-  /*teatarea*/
-  ::v-deep .el-textarea {
-    width: 150%;
-  }
-
-  .seo-text {
-    width: 150%;
   }
 }
 
-/*商品描述*/
-.goods-intro {
-  line-height: 40;
-}
-
-/** 底部步骤 */
 .footer {
   width: 100%;
   padding: 10px;
   background-color: #ffc;
   position: fixed;
-  bottom: 0px;
+  bottom: 0;
   right: 0;
   text-align: center;
   z-index: 9999;
 }
-
-/*图片上传组件第一张图设置封面*/
-.goods-images {
-  ::v-deep li.el-upload-list__item:first-child {
-    position: relative;
-  }
-
-  ::v-deep li.el-upload-list__item:first-child:after {
-    content: "封";
-    color: #fff;
-    font-weight: bold;
-    font-size: 12px;
-    position: absolute;
-    left: -15px;
-    top: -6px;
-    width: 40px;
-    height: 24px;
-    padding-top: 6px;
-    background: #13ce66;
-    text-align: center;
-    -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
-    box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
-  }
-}
-
-.el-form-item__label {
-  word-break: break-all;
-}
-
-.step-view {
-  width: 33%;
-  height: 40px;
-  font-size: 19px;
-  text-align: center;
-  display: flex;
-  background-color: #fff;
-  justify-content: center;
-  align-items: center;
-}
-
-.page {
-  margin-top: 2vh;
-  margin-bottom: 5vh;
-}
 </style>
diff --git a/manager/src/views/promotions/points-goods/points-goods.vue b/manager/src/views/promotions/points-goods/points-goods.vue
index 47926b6c..0d81c397 100644
--- a/manager/src/views/promotions/points-goods/points-goods.vue
+++ b/manager/src/views/promotions/points-goods/points-goods.vue
@@ -1,146 +1,167 @@
 <template>
   <div class="search">
-    <Card>
-      <Row>
-        <Form
-          ref="searchForm"
-          :model="searchForm"
-          inline
-          :label-width="70"
-          class="search-form"
-        >
-          <Form-item label="商品名称">
-            <Input
-              type="text"
-              v-model="searchForm.goodsName"
-              placeholder="请输入商品名称"
-              clearable
-              style="width: 240px"
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="商品名称">
+          <el-input
+            v-model="searchForm.goodsName"
+            placeholder="请输入商品名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="积分区间">
+          <el-input
+            v-model="searchForm.pointsS"
+            placeholder="请输入开始区间"
+            clearable
+            style="width: 110px"
+          />
+          <span style="margin: 0 6px">-</span>
+          <el-input
+            v-model="searchForm.pointsE"
+            placeholder="请输入结束区间"
+            clearable
+            style="width: 110px"
+          />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="searchForm.promotionStatus" clearable style="width: 240px">
+            <el-option
+              v-for="item in statusList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
             />
-          </Form-item>
-          <Form-item label="积分区间">
-            <Input
-              type="text"
-              v-model="searchForm.pointsS"
-              placeholder="请输入开始区间"
-              clearable
-              style="width: 240px"
-            />
-            -
-            <Input
-              type="text"
-              v-model="searchForm.pointsE"
-              placeholder="请输入结束区间"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="状态">
-            <Select v-model="searchForm.promotionStatus" style="width: 240px">
-              <Option v-for="item in statusList" :value="item.value" :key="item.value">{{
-                item.label
-              }}</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="SKU编码">
-            <Input
-              type="text"
-              v-model="searchForm.skuId"
-              placeholder="请输入SKU编码"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Button
-            @click="handleSearch"
-            type="primary"
-            icon="ios-search"
-            class="search-btn"
-            >搜索</Button
-          >
-        </Form>
-      </Row>
-      </Card>
-    <Card>
-      <Row class="operation padding-row">
-        <Button @click="addPointsGoods" type="primary">添加积分商品</Button>
-      </Row>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table">
-        <template slot-scope="{ row }" slot="goodsName">
-          <div>
-            <a class="mr_10" @click="linkTo(row.goodsId, row.skuId)">{{
-              row.goodsName
-            }}</a>
-            <Poptip trigger="hover" title="扫码在手机中查看" transfer>
-              <div slot="content">
+          </el-select>
+        </el-form-item>
+        <el-form-item label="SKU编码">
+          <el-input
+            v-model="searchForm.skuId"
+            placeholder="请输入SKU编码"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="addPointsGoods">添加积分商品</el-button>
+      </div>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column label="商品名称" min-width="200" fixed="left" show-overflow-tooltip>
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
+              <el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
+                <template #reference>
+                  <img
+                    src="../../../assets/qrcode.svg"
+                    class="hover-pointer"
+                    width="20"
+                    height="20"
+                    alt="qrcode"
+                  />
+                </template>
                 <vue-qr
                   :text="wapLinkTo(row.goodsId, row.skuId)"
                   :margin="0"
-                  colorDark="#000"
-                  colorLight="#fff"
+                  color-dark="#000"
+                  color-light="#fff"
                   :size="150"
-                ></vue-qr>
-              </div>
-              <img
-                src="../../../assets/qrcode.svg"
-                style="vertical-align: middle"
-                class="hover-pointer"
-                width="20"
-                height="20"
-                alt=""
-              />
-            </Poptip>
-          </div>
-        </template>
-        <template slot-scope="{ row }" slot="price">
-          <div>
-            <priceColorScheme :value="row.originalPrice" :color="$mainColor"></priceColorScheme>
-          </div>
-        </template>
-        <template slot-scope="{ row }" slot="settlementPrice">
-          <div>
-            <priceColorScheme :value="row.settlementPrice" :color="$mainColor"></priceColorScheme>
-          </div>
-        </template>
-        <template slot-scope="{ row }" slot="quantity">
-          <div>{{ row.activeStock }}</div>
-        </template>
-        <template slot-scope="{ row }" slot="startTime">
-          <div>{{ row.startTime }}</div>
-          <div>{{ row.endTime }}</div>
-        </template>
-        <template slot-scope="{ row }" slot="action">
-          <a
-            v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
-            @click="edit(row.id)"
-            >编辑</a>
-          <span
-            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
-            style="margin:0 8px;color:#dcdee2"
-            >|</span>
-          <a
-            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
-            @click="statusChanged(row.id, 'CLOSE')"
-            >关闭</a>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+                />
+              </el-popover>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="市场价" width="110">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">
+              {{ $filters.unitPrice(row.originalPrice, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="结算价" width="110">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">
+              {{ $filters.unitPrice(row.settlementPrice, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="库存数量" width="100">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.activeStock }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="activeStock" label="活动剩余库存" width="130" />
+        <el-table-column prop="points" label="兑换积分" width="100" />
+        <el-table-column prop="storeName" label="所属店铺" width="120" show-overflow-tooltip />
+        <el-table-column label="活动开始时间" min-width="160">
+          <template #default="{ row }">
+            <template v-if="row">
+              <div>{{ row.startTime }}</div>
+              <div>{{ row.endTime }}</div>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
+              {{ promotionStatusText(row.promotionStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="pointsGoodsCategoryName" label="分类" width="100" show-overflow-tooltip />
+        <el-table-column label="操作" width="150" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a
+                v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
+                class="link-text"
+                @click="edit(row.id)"
+              >
+                编辑
+              </a>
+              <template v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'">
+                <span class="op-split">|</span>
+                <a class="link-text" @click="statusChanged(row.id, 'CLOSE')">关闭</a>
+              </template>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -151,156 +172,94 @@ import {
   deletePointsGoodsStatus,
 } from "@/api/promotion";
 import vueQr from "vue-qr";
-import { promotionsStatusRender } from "@/utils/promotions";
 
 export default {
   name: "pointsGoods",
-  components: {
-    "vue-qr": vueQr,
-  },
+  components: { vueQr },
   data() {
     return {
-      loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime",
-          order: "desc", // 默认排序方式
-        },
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+      },
       statusList: [
-        // 活动状态
         { label: "未开始", value: "NEW" },
         { label: "已开始", value: "START" },
         { label: "已结束", value: "END" },
         { label: "已关闭", value: "CLOSE" },
       ],
-      columns: [
-        // 表头
-        {
-          title: "商品名称",
-          slot: "goodsName",
-          minWidth: 150,
-          fixed: "left",
-          tooltip: true,
-        },
-        {
-          title: "市场价",
-          slot: "price",
-          width: 100,
-        },
-        {
-          title: "结算价",
-          slot: "settlementPrice",
-          width: 100,
-        },
-        {
-          title: "库存数量",
-          slot: "quantity",
-          width: 100,
-        },
-        {
-          title: "活动剩余库存",
-          key: "activeStock",
-          width: 150,
-        },
-        {
-          title: "兑换积分",
-          key: "points",
-          width: 100,
-        },
-        {
-          title: "所属店铺",
-          key: "storeName",
-          width: 100,
-        },
-        {
-          title: "活动开始时间",
-          slot: "startTime",
-          minWidth: 150,
-        },
-        {
-          title: "状态",
-          key: "promotionStatus",
-          width: 100,
-          render: (h, params) => {
-            return promotionsStatusRender(h, params);
-          },
-        },
-        {
-          title: "分类",
-          key: "pointsGoodsCategoryName",
-          width: 100,
-        },
-        {
-          title: "操作",
-          slot: "action",
-          align: "center",
-          fixed: "right",
-          width: 150,
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
+    promotionStatusText(status) {
+      const map = {
+        NEW: "未开始",
+        START: "已开始",
+        END: "已结束",
+        CLOSE: "已关闭",
+      };
+      return map[status] || "未知";
+    },
+    promotionStatusTagType(status) {
+      const map = {
+        NEW: "info",
+        START: "success",
+        END: "danger",
+        CLOSE: "danger",
+      };
+      return map[status] || "danger";
+    },
     init() {
       this.getDataList();
     },
-    // 跳转添加商品页面
     addPointsGoods() {
       this.$router.push({ name: "add-points-goods" });
     },
-    // 分页 修改页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
-    // 分页 修改页数
     changePageSize(v) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
-      handleSearch() {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 20;
-        if (this.searchForm.pointsS) {
-          this.searchForm.points =
-            this.searchForm.pointsS +
-            "_" +
-            (this.searchForm.pointsE ? this.searchForm.pointsE : "");
-        }
-        this.getDataList();
-      },
-    // 获取列表数据
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 20;
+      if (this.searchForm.pointsS) {
+        this.searchForm.points =
+          this.searchForm.pointsS + "_" + (this.searchForm.pointsE ? this.searchForm.pointsE : "");
+      }
+      this.getDataList();
+    },
     getDataList() {
       this.loading = true;
-      getPointsGoodsList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
+      getPointsGoodsList(this.searchForm)
+        .then((res) => {
+          if (res.success) {
+            this.data = res.result.records;
+            this.total = res.result.total;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
-    // 编辑
     edit(id) {
-      this.$router.push({ name: "edit-points-goods", query: { id: id } });
+      this.$router.push({ name: "edit-points-goods", query: { id } });
     },
-    // 启用 停用积分商品
     statusChanged(id, status, startTime, endTime) {
       let text = "";
       let params = {};
       if (status == "START") {
         text = "开启";
-        params = {
-          startTime: startTime,
-          endTime: endTime,
-        };
+        params = { startTime, endTime };
       } else if (status == "CLOSE") {
         text = "关闭";
       }
@@ -319,14 +278,12 @@ export default {
         },
       });
     },
-    // 删除积分商品
     close(id) {
       this.$Modal.confirm({
         title: "确认删除",
         content: "您确认要删除此积分商品?",
         loading: true,
         onOk: () => {
-          // 删除
           deletePointsGoodsStatus(id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -343,3 +300,28 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.mr_10 {
+  margin-right: 10px;
+}
+.hover-pointer {
+  cursor: pointer;
+  vertical-align: middle;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
+.padding-row {
+  margin-bottom: 10px;
+}
+.mt_10 {
+  margin-top: 10px;
+}
+</style>
diff --git a/manager/src/views/promotions/seckill/seckill-add.vue b/manager/src/views/promotions/seckill/seckill-add.vue
index 45aa2052..efafa5e9 100644
--- a/manager/src/views/promotions/seckill/seckill-add.vue
+++ b/manager/src/views/promotions/seckill/seckill-add.vue
@@ -1,79 +1,75 @@
 <template>
   <div>
-    <Card>
-      <Form ref="form" :model="form" :label-width="120" :rules="formRule">
+    <el-card>
+      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <h4>基本信息</h4>
           <div class="form-item-view">
-            <FormItem label="活动名称" prop="promotionName">
-              <Input
-                type="text"
+            <el-form-item label="活动名称" prop="promotionName">
+              <el-input
                 v-model="form.promotionName"
                 placeholder="请填写活动名称"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="报名截止时间" prop="applyEndTime">
-              <DatePicker
-                type="datetime"
+            </el-form-item>
+            <el-form-item label="报名截止时间" prop="applyEndTime">
+              <el-date-picker
                 v-model="form.applyEndTime"
-                format="yyyy-MM-dd HH:mm:ss"
-                placeholder="请选择"
-                clearable
-                style="width: 200px"
-              >
-              </DatePicker>
-            </FormItem>
-            <FormItem label="活动开始时间" prop="startTime">
-              <DatePicker
                 type="datetime"
-                v-model="form.startTime"
-                format="yyyy-MM-dd"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="YYYY-MM-DD HH:mm:ss"
                 placeholder="请选择"
                 clearable
                 style="width: 200px"
-              >
-              </DatePicker>
-            </FormItem>
-            <FormItem label="抢购时间段" prop="seckillPeriod">
-              <Tag
+              />
+            </el-form-item>
+            <el-form-item label="活动开始时间" prop="startTime">
+              <el-date-picker
+                v-model="form.startTime"
+                type="date"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                placeholder="请选择"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item label="抢购时间段" prop="seckillPeriod">
+              <el-tag
                 v-for="item in form.seckillPeriod"
                 :key="item"
-                :name="item"
                 closable
-                style="marrgin-left: 10px"
-                @on-close="removePeriodTime"
-                >{{ item >= 10 ? item : "0" + item }}:00</Tag
+                class="period-tag"
+                @close="removePeriodTime(item)"
               >
-              <InputNumber
+                {{ item >= 10 ? item : "0" + item }}:00
+              </el-tag>
+              <el-input-number
+                v-if="showAddPeriod"
                 :max="23"
                 :min="0"
                 v-model="periodTime"
-                v-show="showAddPeriod"
-                @on-blur="addPeriodTime"
-              ></InputNumber>
-              <Button type="default" @click="addPeriod">添加时间段</Button>
-            </FormItem>
-            <FormItem label="申请规则" prop="seckillRule">
-              <Input
-                type="text"
+                @blur="addPeriodTime"
+              />
+              <el-button @click="addPeriod">添加时间段</el-button>
+            </el-form-item>
+            <el-form-item label="申请规则" prop="seckillRule">
+              <el-input
                 v-model="form.seckillRule"
                 placeholder="申请规则"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
+            </el-form-item>
           </div>
           <div class="foot-btn">
-            <Button @click="closeCurrentPage" style="margin-right: 5px">返回</Button>
-            <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-              >提交</Button
-            >
+            <el-button @click="closeCurrentPage" style="margin-right: 5px">返回</el-button>
+            <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
           </div>
         </div>
-      </Form>
-    </Card>
+      </el-form>
+    </el-card>
   </div>
 </template>
 
@@ -85,23 +81,17 @@ export default {
   data() {
     return {
       form: {
-        /** 活动名称 */
         promotionName: "",
-        /** 报名截止时间 */
         applyEndTime: "",
-        /** 活动开始时间 */
         startTime: "",
-        /** 抢购时间段 */
         seckillPeriod: [],
-        /** 申请规则 */
         seckillRule: "",
         promotionStatus: "NEW",
       },
-      id: this.$route.query.id, // 活动id
-      periodTime: null, // 抢购时间段
-      showAddPeriod: false, // input显隐
-      submitLoading: false, // 添加或编辑提交状态
-
+      id: this.$route.query.id,
+      periodTime: null,
+      showAddPeriod: false,
+      submitLoading: false,
       formRule: {
         promotionName: [{ required: true, message: "请填写活动名称" }],
         applyEndTime: [{ required: true, message: "请填写报名截止时间" }],
@@ -112,57 +102,38 @@ export default {
     };
   },
   mounted() {
-    // 如果id不为空则查询信息
     if (this.id) {
       this.getData();
     }
   },
   methods: {
-    // 关闭当前页面
     closeCurrentPage() {
       this.$store.commit("removeTag", "manager-seckill-add");
       localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
       this.$router.go(-1);
     },
-    // 获取详情数据
     getData() {
       seckillDetail(this.id).then((res) => {
         if (res.success) {
-          let data = res.result;
+          const data = res.result;
           data.seckillPeriod = res.result.hours.split(",");
           this.form = data;
         }
       });
     },
     addPeriod() {
-      // 添加时间段显示input
       this.addPeriodTime();
       this.showAddPeriod = true;
     },
     addPeriodTime() {
-      // 添加秒杀时间段
       this.showAddPeriod = false;
-      if (
-        this.periodTime !== null &&
-        !this.form.seckillPeriod.includes(this.periodTime)
-      ) {
+      if (this.periodTime !== null && !this.form.seckillPeriod.includes(this.periodTime)) {
         this.form.seckillPeriod.push(this.periodTime);
       }
     },
-    removePeriodTime(event, name) {
-      // 移除秒杀时间段
+    removePeriodTime(name) {
       this.form.seckillPeriod = this.form.seckillPeriod.filter((i) => i !== name);
     },
-    // // 申请截止时间格式化
-    // applyTimeChange (time) {
-    //   console.log(time);
-    //   this.form.applyEndTime = time
-    // },
-    // // 开始时间格式化
-    // startTimeChange (time) {
-    //   this.form.startTime = time
-    // },
-    /** 添加秒杀活动 */
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
@@ -172,12 +143,11 @@ export default {
           delete this.form.updateTime;
           delete this.form.endTime;
           delete this.form.seckillApplyList;
-          let params = this.form;
-          params.startTime = this.$options.filters.unixToDate(this.form.startTime / 1000);
-          params.applyEndTime = this.$options.filters.unixToDate(
-            this.form.applyEndTime / 1000
-          );
-          // 编辑
+          const params = { ...this.form };
+          const startTs = new Date(this.form.startTime).getTime();
+          const applyTs = new Date(this.form.applyEndTime).getTime();
+          params.startTime = this.$filters.unixToDate(startTs / 1000);
+          params.applyEndTime = this.$filters.unixToDate(applyTs / 1000);
           updateSeckill(params).then((res) => {
             this.submitLoading = false;
             if (res && res.success) {
@@ -204,7 +174,12 @@ h4 {
   line-height: 40px;
   text-align: left;
 }
-.ivu-form-item {
+
+.period-tag {
+  margin-right: 10px;
+}
+
+:deep(.el-form-item) {
   margin-bottom: 30px;
 }
 </style>
diff --git a/manager/src/views/promotions/seckill/seckill-goods.vue b/manager/src/views/promotions/seckill/seckill-goods.vue
index b4e34127..cc9e2cfd 100644
--- a/manager/src/views/promotions/seckill/seckill-goods.vue
+++ b/manager/src/views/promotions/seckill/seckill-goods.vue
@@ -1,246 +1,136 @@
 <template>
   <div class="seckill-goods">
-    <Card>
-      <Table border :columns="columns" :data="data">
-        <template slot-scope="{ row }" slot="applyEndTime">
-          {{ unixDate(row.applyEndTime) }}
-        </template>
-        <template slot-scope="{ row }" slot="hours">
-          <Tag v-for="item in unixHours(row.hours)" :key="item">{{ item }}</Tag>
-        </template>
-      </Table>
-      <Table
-        :loading="loading"
+    <el-card>
+      <el-table border :data="data" style="width: 100%">
+        <el-table-column prop="promotionName" label="活动名称" min-width="120" />
+        <el-table-column prop="startTime" label="活动开始时间" min-width="160" />
+        <el-table-column label="报名截止时间" min-width="160">
+          <template #default="{ row }">
+            <span v-if="row">{{ unixDate(row.applyEndTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="时间场次" min-width="160">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-for="item in unixHours(row.hours)" :key="item" class="hour-tag">{{ item }}</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动状态" min-width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="seckillStatusTagType(row.promotionStatus)">
+              {{ seckillStatusText(row.promotionStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
         border
         class="operation"
-        :columns="goodsColumns"
         :data="goodsList"
-        ref="table"
+        style="width: 100%"
       >
-        <template slot-scope="{ row }" slot="originalPrice">
-          <div>
-            <priceColorScheme :value="row.originalPrice" :color="$mainColor"></priceColorScheme>
-          </div>
-        </template>
+        <el-table-column prop="goodsName" label="商品名称" min-width="120" show-overflow-tooltip />
+        <el-table-column label="商品价格" width="110">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">
+              {{ $filters.unitPrice(row.originalPrice, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="库存" width="90">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.quantity }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动价格" width="100">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">
+              {{ $filters.unitPrice(row.price, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="storeName" label="商家名称" min-width="100" show-overflow-tooltip />
+        <el-table-column label="活动场次" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row">{{ row.timeLine + ":00" }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" align="center">
+          <template #default="{ row, $index }">
+            <a v-if="row" class="link-text" @click="delGoods($index, row)">删除</a>
+          </template>
+        </el-table-column>
+      </el-table>
 
-        <template slot-scope="{ row }" slot="quantity">
-          <div>{{ row.quantity }}</div>
-        </template>
-
-        <template slot-scope="{ row }" slot="price">
-          <div>
-            <priceColorScheme :value="row.price" :color="$mainColor"></priceColorScheme>
-          </div>
-        </template>
-
-        <template slot-scope="{ row }" slot="time">
-          <Tag>{{ row.timeLine + ":00" }}</Tag>
-        </template>
-        <template slot-scope="{ row }" slot="QRCode">
-          <img
-            v-if="row.QRCode"
-            :src="row.QRCode || '../../../assets/lili.png'"
-            width="50px"
-            height="50px"
-            alt=""
-          />
-        </template>
-        <template slot-scope="{ row, index }" slot="action">
-          <a style="color:#2d8cf0;cursor:pointer;text-decoration:none" @click="delGoods(index, row)">删除</a>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
+
 <script>
 import {
   seckillGoodsList,
   seckillDetail,
-  auditApplySeckill,
   delSeckillGoods,
 } from "@/api/promotion.js";
 
 export default {
   data() {
     return {
-      promotionStatus: "", // 活动状态
-      showModal: false, // modal显隐
-      openTip: true, // 显示提示
-      loading: false, // 表单加载状态
-      submitLoading: false, // 加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-        },
-      total: 0, // 总数
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      data: [], // 表单数据
-      columns: [
-        // 表头
-        {
-          title: "活动名称",
-          key: "promotionName",
-          minWidth: 120,
-        },
-        {
-          title: "活动开始时间",
-          key: "startTime",
-        },
-        {
-          title: "报名截止时间",
-          slot: "applyEndTime",
-        },
-        {
-          title: "时间场次",
-          slot: "hours",
-        },
-        {
-          title: "活动状态",
-          key: "promotionStatus",
-          minWidth: 80,
-          sortable: false,
-          render: (h, params) => {
-            if (params.row.promotionStatus == "NEW") {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "error",
-                    text: "新建",
-                  },
-                }),
-              ]);
-            } else if (params.row.promotionStatus == "START") {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "success",
-                    text: "开始",
-                  },
-                }),
-              ]);
-            } else if (params.row.promotionStatus == "END") {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "error",
-                    text: "结束",
-                  },
-                }),
-              ]);
-            } else if (params.row.promotionStatus == "CLOSE") {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "error",
-                    text: "废弃",
-                  },
-                }),
-              ]);
-            }
-          },
-        },
-      ],
-      goodsColumns: [
-        // 商品表单
-        {
-          title: "商品名称",
-          key: "goodsName",
-          minWidth: 120,
-          tooltip: true,
-        },
-        {
-          title: "商品价格",
-          slot: "originalPrice",
-          width: 110,
-        },
-        {
-          title: "库存",
-          slot: "quantity",
-          minWidth: 30,
-          width: 90,
-        },
-        {
-          title: "活动价格",
-          slot: "price",
-          width: 100,
-        },
-        {
-          title: "商家名称",
-          key: "storeName",
-          minWidth: 100,
-          tooltip: true,
-        },
-        {
-          title: "活动场次",
-          width: 100,
-          slot: "time",
-        },
-        // {
-        //   title: "状态",
-        //   slot: "promotionApplyStatus",
-        //   width: 90,
-        // },
-        {
-          title: "操作",
-          slot: "action",
-          width: 150,
-          align: "center",
-        },
-      ],
-      goodsList: [], // 商品列表
-      params: {
-        // 请求参数
-        seckillId: this.$route.query.id,
-        applyStatus: "PASS",
-        failReason: "",
-        ids: "",
-      },
-      rules: {
-        // 验证规则
-        failReason: [{ required: true, message: "请输入拒绝原因" }],
+      promotionStatus: "",
+      loading: false,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
       },
+      total: 0,
+      data: [],
+      goodsList: [],
     };
   },
   methods: {
-    // 初始化数据
+    seckillStatusText(status) {
+      const map = {
+        NEW: "新建",
+        START: "开始",
+        END: "结束",
+        CLOSE: "废弃",
+      };
+      return map[status] || status || "-";
+    },
+    seckillStatusTagType(status) {
+      const map = {
+        NEW: "danger",
+        START: "success",
+        END: "danger",
+        CLOSE: "danger",
+      };
+      return map[status] || "danger";
+    },
     init() {
       this.getSeckillMsg();
     },
-    // 分页 改变页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getDataList();
-      this.clearSelectAll();
     },
-    // 分页 改变页数
-    changePageSize(v) {
+    changePageSize() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 清除选中状态
-    clearSelectAll() {
-      this.$refs.table.selectAll(false);
-    },
-
     getDataList() {
-      // 获取商品详情
       this.loading = true;
       this.searchForm.seckillId = this.$route.query.id;
       seckillGoodsList(this.searchForm).then((res) => {
@@ -251,9 +141,7 @@ export default {
         }
       });
     },
-
     getSeckillMsg() {
-      // 获取活动详情
       seckillDetail(this.$route.query.id).then((res) => {
         if (res.success && res.result) {
           this.data = [];
@@ -264,7 +152,6 @@ export default {
       });
     },
     delGoods(index, row) {
-      // 删除商品
       this.$Modal.confirm({
         title: "确认删除",
         content: "您确认要删除该商品吗?删除后不可恢复",
@@ -283,12 +170,10 @@ export default {
       });
     },
     unixDate(time) {
-      // 处理报名截止时间
-      return this.$options.filters.unixToDate(new Date(time) / 1000);
+      return this.$filters.unixToDate(new Date(time) / 1000);
     },
     unixHours(item) {
-      // 处理小时场次
-      let hourArr = item.split(",");
+      const hourArr = item.split(",");
       for (let i = 0; i < hourArr.length; i++) {
         hourArr[i] += ":00";
       }
@@ -300,14 +185,24 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .operation {
   margin: 10px 0;
 }
 
-.reason {
+.hour-tag {
+  margin-right: 4px;
+  margin-bottom: 4px;
+}
+
+.link-text {
+  color: #409eff;
   cursor: pointer;
-  color: #2d8cf0;
-  font-size: 12px;
+  text-decoration: none;
+}
+
+.mt_10 {
+  margin-top: 10px;
 }
 </style>
diff --git a/manager/src/views/promotions/seckill/seckill-setup.vue b/manager/src/views/promotions/seckill/seckill-setup.vue
index bb120150..b866ef09 100644
--- a/manager/src/views/promotions/seckill/seckill-setup.vue
+++ b/manager/src/views/promotions/seckill/seckill-setup.vue
@@ -1,23 +1,37 @@
 <template>
   <div v-if="templateShow">
-    <Form :model="form" :label-width="120">
-      <FormItem label="每日场次设置">
-        <Row :gutter="16" class="row">
-          <Col class="time-item" @click.native="handleClickTime(item,index)" v-for="(item,index) in this.times" :key="index" span="3">
-          <div class="time" :class="{'active':item.check}">{{item.time}}:00</div>
-          </Col>
-        </Row>
-      </FormItem>
-      <FormItem label="秒杀规则">
-        <Input type="textarea" :autosize="{minRows: 4,}" v-model="form.seckillRule" placeholder="申请规则" clearable style="width: 360px; margin-left:10px" />
-      </FormItem>
-      <FormItem>
+    <el-form :model="form" label-width="120px">
+      <el-form-item label="每日场次设置">
+        <el-row :gutter="16" class="row">
+          <el-col
+            v-for="(item, index) in times"
+            :key="index"
+            :span="3"
+            class="time-item"
+          >
+            <div class="time" :class="{ active: item.check }" @click="handleClickTime(item, index)">
+              {{ item.time }}:00
+            </div>
+          </el-col>
+        </el-row>
+      </el-form-item>
+      <el-form-item label="秒杀规则">
+        <el-input
+          v-model="form.seckillRule"
+          type="textarea"
+          :autosize="{ minRows: 4 }"
+          placeholder="申请规则"
+          clearable
+          style="width: 360px"
+        />
+      </el-form-item>
+      <el-form-item>
         <div class="foot-btn">
-          <Button @click="closeCurrentPage" style="margin-right: 5px">返回</Button>
-          <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
+          <el-button @click="closeCurrentPage">返回</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
         </div>
-      </FormItem>
-    </Form>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
@@ -26,45 +40,29 @@ import { getSetting, setSetting } from "@/api/index";
 export default {
   data() {
     return {
-      templateShow:false, // 设置是否显示
+      templateShow: false,
       submitLoading: false,
-      times: [], //时间集合 1-24点
+      times: [],
       form: {
         seckillRule: "",
       },
     };
   },
   mounted() {
-    /**
-     * 初始化
-     */
     this.init();
   },
   methods: {
-    /**
-     * 关闭当前页面
-     */
     closeCurrentPage() {
       this.$store.commit("removeTag", "manager-seckill-add");
-      localStorage.pageOpenedList = JSON.stringify(
-        this.$store.state.app.pageOpenedList
-      );
+      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
       this.$router.go(-1);
     },
-    /**
-     * 提交秒杀信息
-     */
     async handleSubmit() {
-      let hours = this.times
-        .filter((item) => {
-          return item.check;
-        })
-        .map((item) => {
-          return item.time;
-        })
+      const hours = this.times
+        .filter((item) => item.check)
+        .map((item) => item.time)
         .join(",");
-
-      let result = await setSetting("SECKILL_SETTING", {
+      const result = await setSetting("SECKILL_SETTING", {
         seckillRule: this.form.seckillRule,
         hours,
       });
@@ -73,42 +71,30 @@ export default {
         this.init();
       }
     },
-
-    /**
-     * 初始化当前信息
-     */
     async init() {
-      let result = await getSetting("SECKILL_SETTING");
+      const result = await getSetting("SECKILL_SETTING");
       if (result.success) {
-        this.templateShow = true
+        this.templateShow = true;
         this.form.seckillRule = result.result.seckillRule;
-        this.times=[]
+        this.times = [];
         for (let i = 0; i < 24; i++) {
-          // 将数据拆出
+          let matched = false;
           if (result.result.hours) {
-            let way = result.result.hours.split(",");
+            const way = result.result.hours.split(",");
             way.forEach((hours) => {
               if (hours == i) {
-                this.times.push({
-                  time: i,
-                  check: true,
-                });
+                this.times.push({ time: i, check: true });
+                matched = true;
               }
             });
           }
-          if (!this.times[i]) {
-            this.times.push({
-              time: i,
-              check: false,
-            });
+          if (!matched) {
+            this.times.push({ time: i, check: false });
           }
         }
       }
     },
-    /**
-     * 选中时间
-     */
-    handleClickTime(val, index) {
+    handleClickTime(val) {
       val.check = !val.check;
     },
   },
@@ -121,10 +107,8 @@ export default {
 }
 .foot-btn {
   margin-left: 10px;
-}
-.time-list {
   display: flex;
-  flex-wrap: wrap;
+  gap: 8px;
 }
 .active {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
@@ -140,11 +124,10 @@ export default {
   align-items: center;
   display: flex;
   background: #f3f5f7;
-  height: 100%;
-}
-.time-item {
   height: 50px;
-  margin: 8px 0;
   font-size: 15px;
 }
+.time-item {
+  margin: 8px 0;
+}
 </style>
diff --git a/manager/src/views/promotions/seckill/seckill.vue b/manager/src/views/promotions/seckill/seckill.vue
index c91d673e..a1304d88 100644
--- a/manager/src/views/promotions/seckill/seckill.vue
+++ b/manager/src/views/promotions/seckill/seckill.vue
@@ -1,128 +1,139 @@
 <template>
-  <div class="seckill">
-    <Card>
-      <Row>
-        <Form
-          ref="searchForm"
-          :model="searchForm"
-          inline
-          :label-width="70"
-          class="search-form"
-        >
-          <Form-item label="活动名称" prop="promotionName">
-            <Input
-              type="text"
-              v-model="searchForm.promotionName"
-              placeholder="请输入活动名称"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="活动状态" prop="promotionStatus">
-            <Select
-              v-model="searchForm.promotionStatus"
-              placeholder="请选择"
-              clearable
-              style="width: 240px"
-            >
-              <Option value="NEW">未开始</Option>
-              <Option value="START">已开始/上架</Option>
-              <Option value="END">已结束/下架</Option>
-              <Option value="CLOSE">紧急关闭/作废</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="活动时间">
-            <DatePicker
-              v-model="selectDate"
-              type="daterange"
-              clearable
-              placeholder="选择起始时间"
-              style="width: 240px"
-            >
-            </DatePicker>
-          </Form-item>
-
-          <Button
-            @click="handleSearch"
-            type="primary"
-            icon="ios-search"
-            class="search-btn"
-            >搜索</Button
+  <div class="search seckill">
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="活动名称" prop="promotionName">
+          <el-input
+            v-model="searchForm.promotionName"
+            placeholder="请输入活动名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="活动状态" prop="promotionStatus">
+          <el-select
+            v-model="searchForm.promotionStatus"
+            placeholder="请选择"
+            clearable
+            style="width: 240px"
           >
-        </Form>
-      </Row>
-    </Card>
-    <Card>
-      <Tabs value="list" class="mt_10" @on-click="clickTabPane">
-        <TabPane label="秒杀活动列表" name="list">
-          <Table
-            :loading="loading"
-            border
-            :columns="columns"
-            :data="data"
+            <el-option label="未开始" value="NEW" />
+            <el-option label="已开始/上架" value="START" />
+            <el-option label="已结束/下架" value="END" />
+            <el-option label="紧急关闭/作废" value="CLOSE" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="活动时间">
+          <el-date-picker
+            v-model="selectDate"
+            type="daterange"
+            clearable
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-tabs v-model="activeTab" class="mt_10">
+        <el-tab-pane label="秒杀活动列表" name="list">
+          <el-table
             ref="table"
+            v-loading="loading"
+            border
+            :data="data"
             class="mt_10"
+            style="width: 100%"
           >
-            <template slot-scope="{ row }" slot="action">
-              <a
-                v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
-                style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
-                @click="edit(row)"
-                >编辑</a>
-              <a
-                v-else
-                style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
-                @click="manage(row)"
-                >查看</a>
-              <span
-                v-if="row.promotionStatus"
-                style="margin:0 8px;color:#dcdee2"
-                >|</span>
-              <a
-                v-if="row.promotionStatus == 'NEW'"
-                style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
-                @click="manage(row)"
-                >管理</a>
-              <span
-                v-if="row.promotionStatus == 'NEW'"
-                style="margin:0 8px;color:#dcdee2"
-                >|</span>
-              <a
-                v-if="row.promotionStatus == 'START' || row.promotionStatus == 'NEW'"
-                style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-                @click="off(row)"
-                >关闭</a>
-            </template>
-          </Table>
+            <el-table-column
+              prop="promotionName"
+              label="活动名称"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column prop="startTime" label="开始时间" width="180" />
+            <el-table-column prop="applyEndTime" label="申请截止时间" width="180" />
+            <el-table-column label="活动状态" width="110">
+              <template #default="{ row }">
+                <el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
+                  {{ promotionStatusText(row.promotionStatus) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="seckillRule"
+              label="申请规则"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column label="操作" width="250" align="center" fixed="right">
+              <template #default="{ row }">
+                <template v-if="row">
+                  <a
+                    v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
+                    class="link-text"
+                    @click="edit(row)"
+                  >
+                    编辑
+                  </a>
+                  <a v-else class="link-text" @click="manage(row)">查看</a>
+                  <span v-if="row.promotionStatus" class="op-split">|</span>
+                  <a
+                    v-if="row.promotionStatus == 'NEW'"
+                    class="link-text"
+                    @click="manage(row)"
+                  >
+                    管理
+                  </a>
+                  <span v-if="row.promotionStatus == 'NEW'" class="op-split">|</span>
+                  <a
+                    v-if="row.promotionStatus == 'START' || row.promotionStatus == 'NEW'"
+                    class="link-text"
+                    @click="off(row)"
+                  >
+                    关闭
+                  </a>
+                </template>
+              </template>
+            </el-table-column>
+          </el-table>
 
-          <Row type="flex" justify="end" class="mt_10">
-            <Page
-              style="margin: 20px 0"
-              :current="searchForm.pageNumber"
+          <div class="mt_10" style="display: flex; justify-content: flex-end">
+            <el-pagination
+              v-model:current-page="searchForm.pageNumber"
+              v-model:page-size="searchForm.pageSize"
+              :page-sizes="[20, 50, 100]"
               :total="total"
-              :page-size="searchForm.pageSize"
-              @on-change="changePage"
-              @on-page-size-change="changePageSize"
-              :page-size-opts="[20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
               size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-          </Row>
-        </TabPane>
-        <TabPane label="秒杀活动设置" name="setup">
-          <setupSeckill v-if="setupFlag"></setupSeckill>
-        </TabPane>
-      </Tabs>
-    </Card>
+              @current-change="changePage"
+              @size-change="changePageSize"
+            />
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="秒杀活动设置" name="setup" lazy>
+          <setupSeckill />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
   </div>
 </template>
 
 <script>
 import { getSeckillList, delSeckill, updateSeckillStatus } from "@/api/promotion";
 import setupSeckill from "@/views/promotions/seckill/seckill-setup";
-import { promotionsStatusRender } from "@/utils/promotions";
 
 export default {
   name: "seckill",
@@ -131,103 +142,62 @@ export default {
   },
   data() {
     return {
+      activeTab: "list",
       selectDate: [],
-      loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime",
-          order: "desc", // 默认排序方式
-        },
-      setupFlag: false, //默认不请求设置
-      columns: [
-        // 表单
-        {
-          title: "活动名称",
-          key: "promotionName",
-          minWidth: 130,
-          tooltip: true,
-        },
-
-        {
-          title: "开始时间",
-          key: "startTime",
-          width: 180,
-        },
-        {
-          title: "申请截止时间",
-          key: "applyEndTime",
-          width: 180,
-        },
-
-        {
-          title: "活动状态",
-          key: "promotionStatus",
-          width: 100,
-          render: (h, params) => {
-            return promotionsStatusRender(h, params);
-          },
-        },
-
-        {
-          title: "申请规则",
-          key: "seckillRule",
-          minWidth: 120,
-          tooltip: true,
-        },
-        {
-          title: "操作",
-          slot: "action",
-          align: "center",
-          width: 250,
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+      },
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // tab栏点击切换列表和设置
-    clickTabPane(name) {
-      if (name == "setup") {
-        this.setupFlag = true;
-      } else {
-        this.setupFlag = false;
-      }
+    promotionStatusText(status) {
+      const map = {
+        NEW: "未开始",
+        START: "已开始",
+        END: "已结束",
+        CLOSE: "已关闭",
+      };
+      return map[status] || "未知";
+    },
+    promotionStatusTagType(status) {
+      const map = {
+        NEW: "info",
+        START: "success",
+        END: "danger",
+        CLOSE: "danger",
+      };
+      return map[status] || "danger";
     },
-    // 初始化信息
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
-    // 分页 改变页数
     changePageSize(v) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
-      handleSearch() {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 20;
-        this.getDataList();
-      },
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 20;
+      this.getDataList();
+    },
     edit(v) {
-      // 编辑
       this.$router.push({ name: "manager-seckill-add", query: { id: v.id } });
     },
     manage(v) {
-      // 管理
       this.$router.push({ name: "seckill-goods", query: { id: v.id } });
     },
-
     off(v) {
-      // 下架
       this.$Modal.confirm({
         title: "提示",
         content: "您确定要下架该活动吗？",
@@ -242,7 +212,6 @@ export default {
       });
     },
     expire(v) {
-      // 作废
       this.$Modal.confirm({
         title: "提示",
         content: "您确定要作废该活动吗？",
@@ -256,24 +225,25 @@ export default {
         },
       });
     },
-    // 获取数据集合
     getDataList() {
       this.loading = true;
       if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = this.selectDate[0].getTime();
-        this.searchForm.endTime = this.selectDate[1].getTime();
+        this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
+        this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
       } else {
         this.searchForm.startTime = null;
         this.searchForm.endTime = null;
       }
-      // 带多条件搜索参数获取表单数据
-      getSeckillList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
+      getSeckillList(this.searchForm)
+        .then((res) => {
+          if (res.success) {
+            this.data = res.result.records;
+            this.total = res.result.total;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
   },
   mounted() {
@@ -281,8 +251,19 @@ export default {
   },
 };
 </script>
-<style lang="scss">
-.mr_5 {
-  margin: 0 5px;
+
+<style lang="scss" scoped>
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+  margin-right: 5px;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
+.mt_10 {
+  margin-top: 10px;
 }
 </style>
diff --git a/manager/src/views/region/index.vue b/manager/src/views/region/index.vue
index 12c6f13c..fba9b9ef 100644
--- a/manager/src/views/region/index.vue
+++ b/manager/src/views/region/index.vue
@@ -1,354 +1,126 @@
 <template>
-  <Card>
-    <Row class="operation">
-      <Button
-        @click="handleAsyncRegion"
-        :loading="asyncLoading"
-        type="primary"
-        icon="md-add"
-        >同步数据</Button
-      >
-    </Row>
-    <div class="flex">
-      <Tree
-        class="tree"
-        :data="data"
-        :load-data="loadData"
-        @on-select-change="changeTree"
-      ></Tree>
-      <div class="form">
-        <Form
-          ref="formValidate"
-          :model="formValidate"
-          :rules="ruleValidate"
-          :label-width="100"
-        >
-          <FormItem v-if="formValidate.adCode" prop="adCode" label="区域编码">
-            <Input v-model="formValidate.adCode" />
-          </FormItem>
-          <FormItem label="城市代码" prop="cityCode">
-            <Input v-model="formValidate.cityCode" />
-          </FormItem>
-          <FormItem label="行政区划级别" prop="cityCode">
-            <RadioGroup
-              type="button"
-              button-style="solid"
-              v-model="formValidate.level"
-            >
-              <Radio disabled label="country">国家</Radio>
-              <Radio disabled label="province">省份</Radio>
-              <Radio disabled label="city">市</Radio>
-              <Radio disabled label="district">区县</Radio>
-              <Radio disabled label="street">街道</Radio>
-            </RadioGroup>
-          </FormItem>
-
-          <FormItem label="经纬度" prop="center">
-            <Input v-model="formValidate.center" />
-          </FormItem>
-          <FormItem label="名称" prop="name">
-            <Input v-model="formValidate.name" />
-          </FormItem>
-          <FormItem label="排序" prop="orderNum">
-            <Input v-model="formValidate.orderNum" />
-          </FormItem>
-
-          <div class="button-list">
-            <Button type="default" @click="handleUpdate('formValidate')"
-              >修改</Button
-            >
-            <Button type="primary" ghost @click="handleInsert()">添加</Button>
-            <Button type="error" @click="handleDel('formValidate')"
-              >删除</Button
-            >
-          </div>
-        </Form>
-      </div>
+  <el-card>
+    <div class="operation mb_10">
+      <el-button type="primary" :loading="asyncLoading" @click="handleAsyncRegion">
+        同步数据
+      </el-button>
     </div>
 
-    <Modal v-model="modalFlag" title="添加" @on-ok="submit">
-      <Form ref="addValidate" :model="addValidate" :label-width="100">
-        <FormItem label="父级">
-          <Input disabled v-model="addValidate.parentName" />
-        </FormItem>
-        <FormItem prop="adCode" label="区域编码">
-          <Input v-model="addValidate.adCode" />
-        </FormItem>
-        <FormItem label="城市代码" prop="cityCode">
-          <Input v-model="addValidate.cityCode" />
-        </FormItem>
-
-        <FormItem label="经纬度" prop="center">
-          <Input v-model="addValidate.center" />
-        </FormItem>
-        <FormItem label="名称" prop="name">
-          <Input v-model="addValidate.name" />
-        </FormItem>
-        <FormItem label="排序" prop="orderNum">
-          <Input v-model="addValidate.orderNum" />
-        </FormItem>
-      </Form>
-    </Modal>
-  </Card>
+    <el-table
+      v-loading="loading"
+      :data="tableData"
+      row-key="id"
+      border
+      lazy
+      :load="loadChildren"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      style="width: 100%"
+    >
+      <el-table-column prop="name" label="地区名称" min-width="200" />
+      <el-table-column label="级别" width="100">
+        <template #default="{ row }">
+          <span v-if="row">{{ levelMap[row.level] || row.level }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="adCode" label="区域编码" min-width="120" />
+      <el-table-column label="城市代码" min-width="120">
+        <template #default="{ row }">
+          <span v-if="row">{{ row.cityCode && row.cityCode !== "null" ? row.cityCode : "" }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="center" label="经纬度" min-width="140" show-overflow-tooltip />
+      <el-table-column prop="orderNum" label="排序" width="80" />
+    </el-table>
+  </el-card>
 </template>
+
 <script>
-import {
-  getChildRegion,
-  updateRegion,
-  delRegion,
-  asyncRegion,
-  addRegion,
-} from "@/api/index";
+import { ElMessage } from "element-plus";
+import { getChildRegion, asyncRegion } from "@/api/index";
+
 export default {
   data() {
     return {
-      asyncLoading: false, // 加载状态
-      num: 10, // 更新倒计时
-      modalFlag: false, // 新增编辑标识
-      timerNum: 10, // 定时器
-      data: [], // 加载数据
-      id: 0, // id
-      addValidate: {
-        // 添加级别
-        parentName: "无父级",
-      },
-      formValidate: {
-        // 表单数据
-        adCode: "",
-        cityCode: "",
-        center: "",
-        name: "",
-        orderNum: "",
-        level: "",
-      },
-      ruleValidate: {
-        // 验证规则
-        adCode: [
-          {
-            required: true,
-            message: "区域编码不能为空",
-            trigger: "blur",
-          },
-        ],
-        center: [
-          {
-            required: true,
-            message: "经纬度不能为空",
-            trigger: "blur",
-          },
-        ],
-        name: [
-          {
-            required: true,
-            message: "名称不能为空",
-            trigger: "blur",
-          },
-        ],
+      loading: false,
+      asyncLoading: false,
+      num: 10,
+      tableData: [],
+      levelMap: {
+        country: "国家",
+        province: "省份",
+        city: "市",
+        district: "区县",
+        street: "街道",
       },
     };
   },
   mounted() {
-    this.init();
+    this.loadRoot();
   },
   methods: {
-    // 提交数据
-    submit() {
-      delete this.addValidate.children;
-      addRegion(this.addValidate).then((res) => {
-        if (res.success) {
-          this.$Message.success("添加成功!请稍后查看");
+    isLeafRegion(child, parentName = "") {
+      return (
+        child.level === "street" ||
+        child.name === "台湾省" ||
+        parentName === "香港特别行政区" ||
+        parentName === "澳门特别行政区"
+      );
+    },
+    mapRegionRow(child, parentName = "") {
+      return {
+        ...child,
+        cityCode: child.cityCode === "null" ? "" : child.cityCode,
+        hasChildren: !this.isLeafRegion(child, parentName),
+      };
+    },
+    loadRoot() {
+      this.loading = true;
+      getChildRegion(0)
+        .then((res) => {
+          this.tableData = (res.result || []).map((item) => this.mapRegionRow(item));
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    loadChildren(row, _treeNode, resolve) {
+      getChildRegion(row.id).then((res) => {
+        if (!res.result?.length) {
+          resolve([]);
+          return;
         }
+        resolve(res.result.map((child) => this.mapRegionRow(child, row.name)));
       });
     },
-
-    // 添加
-    handleInsert() {
-      if (!this.formValidate.parentId) {
-        this.$Message.error("请选择要添加的数据");
-        return false;
-      }
-      this.addValidate = JSON.parse(JSON.stringify(this.formValidate));
-
-      let level = ["country", "province", "city", "district", "street"];
-
-      let child;
-      level.forEach((item, index) => {
-        if (this.addValidate.level == item) {
-          if (index == level.length - 1) {
-            child = level[index - 1];
-          } else {
-            child = level[index + 1];
-          }
-        }
-      });
-
-      this.addValidate.level = child;
-
-      this.addValidate.parentId = this.formValidate.id;
-      this.addValidate.parentName = this.formValidate.name;
-
-      delete this.addValidate.id;
-      delete this.addValidate.createBy;
-      delete this.addValidate.createTime;
-      delete this.addValidate.updateBy;
-      delete this.addValidate.updateTime;
-      delete this.addValidate.selected;
-
-      this.addValidate.name = "";
-      this.addValidate.center = "";
-      this.modalFlag = true;
-    },
-    // 删除
-    handleDel() {
-      this.$Modal.confirm({
-        title: "确定删除？",
-        content: "删除后店铺以及用户地区绑定数据将全部错乱",
-        onOk: () => {
-          delRegion(this.formValidate.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("删除成功!,请稍后查看数据");
-            }
-          });
-        },
-      });
-    },
-
-    // 修改
-    handleUpdate(name) {
-      delete this.formValidate.createBy;
-      delete this.formValidate.createTime;
-      delete this.formValidate.updateBy;
-      delete this.formValidate.updateTime;
-      delete this.formValidate.selected;
-      this.$refs[name].validate((valid) => {
-        if (valid) {
-          this.formValidate.adCode
-            ? this.formValidate.adCode
-            : (this.formValidate.adCode = "");
-          updateRegion(this.formValidate.id, this.formValidate).then((res) => {
-            if (res.result) {
-              this.$Message.success("修改成功!,请稍后查看数据");
-            }
-          });
-        } else {
-          this.$Message.error("请选择数据");
-        }
-      });
-    },
-    // 树结构点击事件
-    changeTree(array, val) {
-      const cloneVal = JSON.parse(JSON.stringify(val))
-      cloneVal.cityCode == "null" ? (cloneVal.cityCode = "") : cloneVal.cityCode;
-      this.$set(this, "formValidate", cloneVal);
-      this.$refs.formValidate.resetFields()
-    },
-    // 异步加载数据
-    loadData(item, callback) {
-      item.loading = true;
-      // console.log(item);
-      getChildRegion(item.id).then((res) => {
-        if (res.result.length <= 0) {
-          item.loading = false;
-        } else {
-          let way = [];
-          res.result.forEach((child, index) => {
-            item.loading = false;
-            let data;
-            data = {
-              ...child,
-              title: child.name,
-              loading: false,
-              children: [],
-            };
-
-            if (
-              child.level == "street" ||
-              item.label == "香港特别行政区" ||
-              item.label == "澳门特别行政区"
-            ) {
-              data = {
-                ...child,
-                title: child.name,
-              };
-            }
-
-            way.push(data);
-          });
-          callback(way);
-        }
-      });
-    },
-    // 初始化数据
-    init() {
-      getChildRegion(this.id).then((res) => {
-        if (res.result) {
-          res.result.forEach((item) => {
-            let data;
-
-            // 台湾省做处理
-            if (item.name == "台湾省") {
-              data = {
-                ...item,
-                title: item.name,
-              };
-            } else {
-              data = {
-                ...item,
-                title: item.name,
-                loading: false,
-                children: [],
-              };
-            }
-
-            this.data.push(data);
-          });
-        }
-      });
-    },
-    // 同步数据
     handleAsyncRegion() {
       this.num = 10;
       this.$Modal.confirm({
         title: "确定更新？",
         content: "更新后店铺以及用户地区绑定数据将全部错乱",
         onOk: () => {
-          let timer;
-          let number;
-
           this.asyncLoading = true;
-
-          this.$Message.info({
-            duration: this.timerNum,
-            render: (h) => {
-              return h("span", [
-                `地区数据将在${this.num}秒后更新`,
-                h(
-                  "a",
-                  {
-                    on: {
-                      click: () => {
-                        this.$Message.destroy();
-                        this.asyncLoading = false;
-                        clearInterval(number);
-                        clearTimeout(timer);
-                      },
-                    },
-                  },
-                  "点击撤销"
-                ),
-              ]);
-            },
-          });
-
-          number = setInterval(() => {
+          let closeCountdown = null;
+          const showCountdown = () => {
+            if (closeCountdown) closeCountdown();
+            closeCountdown = ElMessage.info({
+              message: `地区数据将在 ${this.num} 秒后更新`,
+              duration: 0,
+              showClose: true,
+            });
+          };
+          showCountdown();
+          const number = setInterval(() => {
             this.num--;
+            showCountdown();
           }, 1000);
-
-          timer = setTimeout(() => {
+          setTimeout(() => {
             clearInterval(number);
-            asyncRegion().then((res) => {
+            if (closeCountdown) closeCountdown();
+            ElMessage.closeAll();
+            asyncRegion().then(() => {
               this.asyncLoading = false;
-              this.$Message.loading("地区数据正在更新中！");
+              this.$Message.success("地区数据正在更新中！");
+              this.loadRoot();
             });
           }, 10000);
         },
@@ -357,21 +129,9 @@ export default {
   },
 };
 </script>
+
 <style scoped lang="scss">
-.flex {
-  display: flex;
-  position: relative;
-}
-.tree {
-  flex: 2;
-}
-.form {
-  flex: 8;
-}
-.button-list {
-  margin-left: 80px;
-  > * {
-    margin: 0 4px;
-  }
+.operation {
+  margin-bottom: 12px;
 }
 </style>
diff --git a/manager/src/views/seller/bill/accountStatementBill.vue b/manager/src/views/seller/bill/accountStatementBill.vue
index 6730208d..17d1cb8f 100644
--- a/manager/src/views/seller/bill/accountStatementBill.vue
+++ b/manager/src/views/seller/bill/accountStatementBill.vue
@@ -1,26 +1,77 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="账单编号" prop="sn">
-          <Input type="text" v-model="searchForm.sn" placeholder="请输入账单编号" clearable style="width: 240px" />
-        </Form-item>
-        <Form-item label="出帐时间" prop="createTime">
-          <DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 240px">
-          </DatePicker>
-        </Form-item>
+    <el-card>
+      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form" @keyup.enter="handleSearch">
+        <el-form-item label="账单编号" prop="sn">
+          <el-input v-model="searchForm.sn" placeholder="请输入账单编号" clearable style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="出帐时间" prop="createTime">
+          <el-date-picker
+            v-model="selectDate"
+            type="daterange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            clearable
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            style="width: 240px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-      </Form>
-      </Card>
-    <Card>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10" @on-selection-change="changeSelect">
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]"
-          size="small" show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
+    <el-card>
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+        @selection-change="changeSelect"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column prop="sn" label="账单号" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="生成时间" width="120" />
+        <el-table-column label="结算时间段" width="200">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.startTime }}~{{ row.endTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="storeName" label="店铺名称" min-width="120" show-overflow-tooltip />
+        <el-table-column label="结算金额" width="130">
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.billPrice" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="billStatusTagType(row.billStatus)">{{ billStatusText(row.billStatus) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" align="center" fixed="right">
+          <template #default="{ row }">
+            <a v-if="row" class="link-text" @click="detail(row)">详细</a>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -29,162 +80,74 @@ import * as API_Shop from "@/api/shops";
 
 export default {
   name: "bill",
-  components: {},
   data() {
     return {
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
       },
-      selectDate: null, // 选择一个事件段
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "账单号",
-          key: "sn",
-          minWidth: 200,
-          tooltip: true,
-        },
-        {
-          title: "生成时间",
-          key: "createTime",
-          width: 120,
-        },
-        {
-          title: "结算时间段",
-          key: "startTime",
-          width: 200,
-          render: (h, params) => {
-            return h("div", params.row.startTime + "~" + params.row.endTime);
-          },
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          minWidth: 120,
-          tooltip: true,
-        },
-
-        {
-          title: "结算金额",
-          key: "billPrice",
-          width: 130,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.billPrice,color:this.$mainColor}} );
-          },
-
-        },
-        {
-          title: "状态",
-          key: "billStatus",
-          width: 100,
-          render: (h, params) => {
-            if (params.row.billStatus == "OUT") {
-              return h("Tag", {props: {color: "blue",},},"已出账");
-            } else if (params.row.billStatus == "CHECK") {
-              return h("Tag", {props: {color: "geekblue",},},"已对账");
-            } else if (params.row.billStatus == "EXAMINE") {
-              return h("Tag", {props: {color: "purple",},},"已审核");
-            } else {
-              return h("Tag", {props: {color: "green",},},"已付款");
-            }
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 120,
-          render: (h, params) => {
-            return h("div", { class: "ops" }, [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.detail(params.row);
-                    },
-                  },
-                },
-                "详细"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      selectDate: null,
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
+    billStatusText(v) {
+      const map = { OUT: "已出账", CHECK: "已对账", EXAMINE: "已审核", COMPLETE: "已付款" };
+      return map[v] || "已付款";
+    },
+    billStatusTagType(v) {
+      const map = { OUT: "primary", CHECK: "", EXAMINE: "warning", COMPLETE: "success" };
+      return map[v] || "success";
+    },
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
       this.clearSelectAll();
     },
-    // 分页 改变页数
     changePageSize(v) {
-      this.searchForm.pageNumber = 1
+      this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.getDataList();
     },
-    // 清除选中状态
     clearSelectAll() {
-      this.$refs.table.selectAll(false);
+      this.$refs.table?.clearSelection();
     },
-    // 选中回调
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
     },
-    // 起止时间从新赋值
     selectDateRange(v) {
-      if (v) {
+      if (v && v.length === 2) {
         this.searchForm.startDate = v[0];
         this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
       }
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
-
-      this.searchForm.startTime &&
-        (this.searchForm.startTime = this.$options.filters.unixToDate(
-          this.searchForm.startTime / 1000
-        ));
-      this.searchForm.endTime &&
-        (this.searchForm.endTime = this.$options.filters.unixToDate(
-          this.searchForm.endTime / 1000
-        ));
+      if (this.searchForm.startTime) {
+        this.searchForm.startTime = this.$filters.unixToDate(this.searchForm.startTime / 1000);
+      }
+      if (this.searchForm.endTime) {
+        this.searchForm.endTime = this.$filters.unixToDate(this.searchForm.endTime / 1000);
+      }
       this.searchForm.billStatus = "CHECK";
       API_Shop.getBuyBillPage(this.searchForm).then((res) => {
         this.loading = false;
@@ -193,15 +156,11 @@ export default {
           this.total = res.result.total;
         }
       });
-      this.total = this.data.length;
-      this.loading = false;
     },
-    // 详情
     detail(v) {
-      let id = v.id;
       this.$router.push({
         name: "bill-detail",
-        query: { id: id },
+        query: { id: v.id },
       });
     },
   },
@@ -211,17 +170,9 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-::v-deep .ivu-col {
-  min-height: 100vh;
-}
-.ops a {
+.link-text {
   color: #2d8cf0;
   cursor: pointer;
   text-decoration: none;
 }
-.ops span {
-  display: inline-block;
-  margin: 0 8px;
-  color: #dcdee2;
-}
 </style>
diff --git a/manager/src/views/seller/bill/bill-detail.vue b/manager/src/views/seller/bill/bill-detail.vue
index de7b713b..56bfa342 100644
--- a/manager/src/views/seller/bill/bill-detail.vue
+++ b/manager/src/views/seller/bill/bill-detail.vue
@@ -1,56 +1,297 @@
 <template>
   <div>
-    <Card>
-      <p slot="title">结算单详情</p>
+    <el-card>
+      <template #header>
+        <span>结算单详情</span>
+      </template>
       <div class="flex flex_align_item">
         <div class="procedure">
-          <div class="procedure_item" v-for="(item, index) in billStatusStep">
+          <div class="procedure_item" v-for="(item, index) in billStatusStep" :key="index">
             <div class="icon" :class="item.className">
-              <Icon type="md-checkmark" size="14" v-if="item.className==='' || bill.billStatus === 'COMPLETE'" />
-              <span v-else>{{index + 1}}</span>
+              <span v-if="item.className === '' || bill.billStatus === 'COMPLETE'">✓</span>
+              <span v-else>{{ index + 1 }}</span>
             </div>
-            <div class="text">{{item.title}}</div>
+            <div class="text">{{ item.title }}</div>
           </div>
         </div>
         <div>
-          <Button v-if="bill.billStatus == 'CHECK'" type="success" @click="pass()" style="margin-left: 10px;">付款</Button>
-          <Button type="info" @click="download()" style="margin-left: 10px;">下载账单</Button>
+          <el-button
+            v-if="bill.billStatus == 'CHECK'"
+            type="success"
+            @click="pass()"
+            style="margin-left: 10px"
+          >
+            付款
+          </el-button>
+          <el-button type="primary" @click="download()" style="margin-left: 10px">下载账单</el-button>
         </div>
       </div>
-    </Card>
-    <Card class="mt_10">
-      <p slot="title">账单详细</p>
+    </el-card>
+
+    <el-card class="mt_10">
+      <template #header>
+        <span>账单详细</span>
+      </template>
       <table>
         <tbody>
-        <tr v-for="(item,index) in data" :key="index">
-          <td>{{ item.name }}</td>
-          <td>{{ item.value }}</td>
-        </tr>
+          <tr v-for="(item, index) in data" :key="index">
+            <td>{{ item.name }}</td>
+            <td>{{ item.value }}</td>
+          </tr>
         </tbody>
       </table>
       <div>
         <h3 class="ml_10">结算详细</h3>
-        <Table :columns="billColumns" :data="billData"></Table>
+        <el-table :data="billData" border style="width: 100%">
+          <el-table-column label="结算金额" prop="billPrice" align="center" width="200" fixed="left">
+            <template #default="{ row }">
+              <span v-if="row">{{ formatPrice(row.billPrice) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="收入" align="center">
+            <el-table-column label="用户实付" prop="orderPrice" align="center" width="200">
+              <template #default="{ row }">
+                <span v-if="row">{{ formatPrice(row.orderPrice) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="平台优惠券补贴" prop="siteCouponCommission" align="center" width="200">
+              <template #default="{ row }">
+                <span v-if="row">{{ formatPrice(row.siteCouponCommission) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="积分商品补贴" prop="pointSettlementPrice" align="center" width="200">
+              <template #default="{ row }">
+                <span v-if="row">{{ formatPrice(row.pointSettlementPrice) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="砍价商品补贴" prop="kanjiaSettlementPrice" align="center" width="200">
+              <template #default="{ row }">
+                <span v-if="row">{{ formatPrice(row.kanjiaSettlementPrice) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="礼品卡补贴" prop="giftCardSubsidy" align="center" width="200">
+              <template #default="{ row }">
+                <span v-if="row">{{ formatPrice(row.giftCardSubsidy) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="分销佣金" prop="distributionCommission" align="center" width="200">
+              <template #default="{ row }">
+                <priceColorScheme
+                  v-if="row"
+                  :value="negate(row.distributionCommission)"
+                  :color="$mainColor"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="平台服务费" prop="commissionPrice" align="center" width="200">
+              <template #default="{ row }">
+                <priceColorScheme
+                  v-if="row"
+                  :value="negate(row.commissionPrice)"
+                  :color="$mainColor"
+                />
+              </template>
+            </el-table-column>
+          </el-table-column>
+          <el-table-column label="退款" align="center">
+            <el-table-column label="退款金额" prop="refundPrice" align="center" width="200">
+              <template #default="{ row }">
+                <priceColorScheme v-if="row" :value="negate(row.refundPrice)" :color="$mainColor" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="退单返还平台优惠券补贴"
+              prop="siteCouponRefundCommission"
+              align="center"
+              width="200"
+            >
+              <template #default="{ row }">
+                <priceColorScheme
+                  v-if="row"
+                  :value="negate(row.siteCouponRefundCommission)"
+                  :color="$mainColor"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="退单返还积分商品补贴"
+              prop="pointRefundSettlementPrice"
+              align="center"
+              width="200"
+            >
+              <template #default="{ row }">
+                <priceColorScheme
+                  v-if="row"
+                  :value="negate(row.pointRefundSettlementPrice)"
+                  :color="$mainColor"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="退单返还砍价商品补贴"
+              prop="kanjiaRefundSettlementPrice"
+              align="center"
+              width="200"
+            >
+              <template #default="{ row }">
+                <priceColorScheme
+                  v-if="row"
+                  :value="negate(row.kanjiaRefundSettlementPrice)"
+                  :color="$mainColor"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="礼品卡返还" prop="giftCardRefundSubsidy" align="center" width="200">
+              <template #default="{ row }">
+                <priceColorScheme
+                  v-if="row"
+                  :value="negate(row.giftCardRefundSubsidy)"
+                  :color="$mainColor"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="退单返还分销佣金"
+              prop="distributionRefundCommission"
+              align="center"
+              width="200"
+            >
+              <template #default="{ row }">
+                <span v-if="row">{{ formatPrice(row.distributionRefundCommission) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="退单返还平台服务费"
+              prop="refundCommissionPrice"
+              align="center"
+              width="200"
+            >
+              <template #default="{ row }">
+                <span v-if="row">{{ formatPrice(row.refundCommissionPrice) }}</span>
+              </template>
+            </el-table-column>
+          </el-table-column>
+        </el-table>
         <div class="bill-detail-price">
-          <div class="flex bill-item">
-          </div>
+          <div class="flex bill-item"></div>
         </div>
       </div>
-    </Card>
-    <Card class="mt_10">
-      <Tabs active-key="tab" type="card">
-        <Tab-pane label="结算单流水" name="order">
-          <Table :loading="loading" border :columns="orderColumns" :data="orderData" ref="table"></Table>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page :current="orderParam.pageNumber" :total="orderTotal" :page-size="orderParam.pageSize"
-                  @on-change="orderChangePage" @on-page-size-change="orderChangePageSize" size="small" show-total
-                  :page-size-opts="[20, 50, 100]" show-elevator show-sizer></Page>
-          </Row>
-        </Tab-pane>
-      </Tabs>
-    </Card>
+    </el-card>
+
+    <el-card class="mt_10">
+      <el-tabs v-model="activeTab" type="card">
+        <el-tab-pane label="结算单流水" name="order">
+          <el-table
+            ref="table"
+            v-loading="loading"
+            border
+            :data="orderData"
+            style="width: 100%"
+          >
+            <el-table-column label="结算信息" align="center">
+              <el-table-column label="时间" prop="createTime" />
+              <el-table-column label="订单编号" prop="orderSn" width="250" />
+              <el-table-column label="子订单号" prop="orderItemSn" width="250" />
+              <el-table-column label="类型" prop="flowType">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <el-tag v-if="isPayFlow(row)" type="primary">收款</el-tag>
+                    <el-tag v-else type="danger">退款</el-tag>
+                  </template>
+                </template>
+              </el-table-column>
+              <el-table-column label="结算金额" prop="billPrice">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <span v-if="isPayFlow(row)">{{ formatPrice(row.billPrice) }}</span>
+                    <priceColorScheme v-else :value="negate(row.billPrice)" :color="$mainColor" />
+                  </template>
+                </template>
+              </el-table-column>
+            </el-table-column>
+            <el-table-column label="收入" align="center">
+              <el-table-column label="补贴" prop="billPrice">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <span v-if="orderSubsidyDisplay(row) === '-'">-</span>
+                    <span v-else-if="isPayFlow(row)">{{ formatPrice(orderSubsidyDisplay(row)) }}</span>
+                    <priceColorScheme v-else :value="negate(orderSubsidyDisplay(row))" />
+                  </template>
+                </template>
+              </el-table-column>
+              <el-table-column label="用户实付" prop="billPrice">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <span v-if="isPayFlow(row)">{{ formatPrice(row.finalPrice) }}</span>
+                    <priceColorScheme v-else :value="negate(row.finalPrice)" />
+                  </template>
+                </template>
+              </el-table-column>
+              <el-table-column label="合计" prop="billPrice">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <span v-if="isPayFlow(row)">{{ formatPrice(row.finalPrice) }}</span>
+                    <priceColorScheme v-else :value="negate(row.finalPrice)" />
+                  </template>
+                </template>
+              </el-table-column>
+            </el-table-column>
+            <el-table-column label="支出" align="center">
+              <el-table-column label="平台服务费" prop="billPrice">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <span v-if="orderCommissionDisplay(row) === '-'">-</span>
+                    <priceColorScheme
+                      v-else-if="isPayFlow(row)"
+                      :value="negate(row.commissionPrice)"
+                    />
+                    <span v-else>{{ formatPrice(row.commissionPrice) }}</span>
+                  </template>
+                </template>
+              </el-table-column>
+              <el-table-column label="分销佣金" prop="distributionRebate">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <span v-if="orderDistributionRebateDisplay(row) === '-'">-</span>
+                    <priceColorScheme
+                      v-else-if="isPayFlow(row)"
+                      :value="negate(row.distributionRebate)"
+                    />
+                    <span v-else>{{ formatPrice(row.distributionRebate) }}</span>
+                  </template>
+                </template>
+              </el-table-column>
+              <el-table-column label="合计" prop="billPrice">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <priceColorScheme
+                      v-if="isPayFlow(row)"
+                      :value="negate(orderExpenseTotal(row))"
+                    />
+                    <span v-else>{{ formatPrice(orderExpenseTotal(row)) }}</span>
+                  </template>
+                </template>
+              </el-table-column>
+            </el-table-column>
+          </el-table>
+          <div class="mt_10" style="display: flex; justify-content: flex-end">
+            <el-pagination
+              v-model:current-page="orderParam.pageNumber"
+              v-model:page-size="orderParam.pageSize"
+              :page-sizes="[20, 50, 100]"
+              :total="orderTotal"
+              layout="total, sizes, prev, pager, next, jumper"
+              size="small"
+              @current-change="orderChangePage"
+              @size-change="orderChangePageSize"
+            />
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
   </div>
 </template>
+
 <script>
 import * as filters from "@/utils/filters";
 import * as API_Shop from "@/api/shops";
@@ -59,201 +300,8 @@ export default {
   name: "bill-detail",
   data() {
     return {
+      activeTab: "order",
       loading: false,
-      billColumns: [
-        {
-          title: '结算金额',
-          key: 'billPrice',
-          align: 'center',
-          width: 200,
-          fixed: 'left',
-          render: (h, params) => {
-            return h(
-              "div",
-              this.$options.filters.unitPrice(params.row.billPrice, "￥")
-            );
-          },
-        },
-        {
-          title: '收入',
-          key: 'pay',
-          align: 'center',
-          children: [
-            {
-              title: '用户实付',
-              key: 'orderPrice',
-              align: 'center',
-              width: 200,
-              render: (h, params) => {
-                return h(
-                  "div",
-                  this.$options.filters.unitPrice(params.row.orderPrice, "￥")
-                );
-              },
-            }, {
-              title: '平台优惠券补贴',
-              key: 'siteCouponCommission',
-              align: 'center',
-              width: 200,
-              render: (h, params) => {
-                return h(
-                  "div",
-                  this.$options.filters.unitPrice(params.row.siteCouponCommission, "￥")
-                );
-              },
-            }, {
-              title: '积分商品补贴',
-              key: 'pointSettlementPrice',
-              align: 'center',
-              width: 200,
-              render: (h, params) => {
-                return h(
-                  "div",
-                  this.$options.filters.unitPrice(params.row.pointSettlementPrice, "￥")
-                );
-              },
-            }, {
-              title: '砍价商品补贴',
-              key: 'kanjiaSettlementPrice',
-              align: 'center',
-              width: 200,
-              render: (h, params) => {
-                return h(
-                  "div",
-                  this.$options.filters.unitPrice(params.row.kanjiaSettlementPrice, "￥")
-                );
-              },
-            }, {
-              title: '礼品卡补贴',
-              key: 'giftCardSubsidy',
-              align: 'center',
-              width: 200,
-              render: (h, params) => {
-                return h(
-                  "div",
-                  this.$options.filters.unitPrice(params.row.giftCardSubsidy, "￥")
-                );
-              },
-            }, {
-              title: '分销佣金',
-              key: 'distributionCommission',
-              align: 'center',
-              width: 200,
-              render: (h, params) => {
-                return h("priceColorScheme", {
-                  props: {
-                    value: (0 - params.row.distributionCommission),
-                    color: this.$mainColor
-                  }
-                });
-              },
-            }, {
-              title: '平台服务费',
-              key: 'commissionPrice',
-              align: 'center',
-              width: 200,
-              render: (h, params) => {
-                return h("priceColorScheme", {
-                  props: {
-                    value: (0 - params.row.commissionPrice),
-                    color: this.$mainColor
-                  }
-                });
-              },
-            },
-          ]
-        },
-        {
-          title: '退款',
-          key: 'refund',
-          align: 'center',
-          children: [
-            {
-              title: '退款金额',
-              key: 'refundPrice',
-              align: 'center',
-              width: 200,
-              render: (h, params) => {
-                return h("priceColorScheme", {props: {value: (0 - params.row.refundPrice), color: this.$mainColor}});
-              },
-            }, {
-              title: '退单返还平台优惠券补贴',
-              key: 'siteCouponRefundCommission',
-              align: 'center',
-              width: 200,
-              render: (h, params) => {
-                return h("priceColorScheme", {
-                  props: {
-                    value: (0 - params.row.siteCouponRefundCommission),
-                    color: this.$mainColor
-                  }
-                });
-              },
-            }, {
-              title: '退单返还积分商品补贴',
-              key: 'pointRefundSettlementPrice',
-              align: 'center',
-              width: 200,
-              render: (h, params) => {
-                return h("priceColorScheme", {
-                  props: {
-                    value: (0 - params.row.pointRefundSettlementPrice),
-                    color: this.$mainColor
-                  }
-                });
-              },
-            }, {
-              title: '退单返还砍价商品补贴',
-              key: 'kanjiaRefundSettlementPrice',
-              align: 'center',
-              width: 200,
-              render: (h, params) => {
-                return h("priceColorScheme", {
-                  props: {
-                    value: (0 - params.row.kanjiaRefundSettlementPrice),
-                    color: this.$mainColor
-                  }
-                });
-              },
-            }, {
-              title: '礼品卡返还',
-              key: 'giftCardRefundSubsidy',
-              align: 'center',
-              width: 200,
-              render: (h, params) => {
-                return h("priceColorScheme", {
-                  props: {
-                    value: (0 - params.row.giftCardRefundSubsidy),
-                    color: this.$mainColor
-                  }
-                });
-              },
-            }, {
-              title: '退单返还分销佣金',
-              key: 'distributionRefundCommission',
-              align: 'center',
-              width: 200,
-              render: (h, params) => {
-                return h(
-                  "div",
-                  this.$options.filters.unitPrice(params.row.distributionRefundCommission, "￥")
-                );
-              },
-            }, {
-              title: '退单返还平台服务费',
-              key: 'refundCommissionPrice',
-              align: 'center',
-              width: 200,
-              render: (h, params) => {
-                return h(
-                  "div",
-                  this.$options.filters.unitPrice(params.row.refundCommissionPrice, "￥")
-                );
-              },
-            },
-          ]
-        },
-      ],
       billData: [
         {
           billPrice: 0,
@@ -270,266 +318,107 @@ export default {
           kanjiaRefundSettlementPrice: 0,
           giftCardRefundSubsidy: 0,
           distributionRefundCommission: 0,
-          refundCommissionPrice: 0
-        },
-      ],
-      columns: [
-        // 表头
-        {
-          title: "项目",
-          key: "name",
-          width: 250,
-        },
-        {
-          title: "值",
-          key: "value",
+          refundCommissionPrice: 0,
         },
       ],
       data: [
-        // 数据
-        {
-          name: "计算中",
-          value: 0,
-        },
-        {
-          name: "计算中",
-          value: 0,
-        },
-        {
-          name: "计算中",
-          value: 0,
-        },
-        {
-          name: "计算中",
-          value: 0,
-        },
-        {
-          name: "计算中",
-          value: 0,
-        },
-        {
-          name: "计算中",
-          value: 0,
-        },
-        {
-          name: "计算中",
-          value: 0,
-        },
-        {
-          name: "计算中",
-          value: 0,
-        },
-        {
-          name: "计算中",
-          value: 0,
-        },
+        { name: "计算中", value: 0 },
+        { name: "计算中", value: 0 },
+        { name: "计算中", value: 0 },
+        { name: "计算中", value: 0 },
+        { name: "计算中", value: 0 },
+        { name: "计算中", value: 0 },
+        { name: "计算中", value: 0 },
+        { name: "计算中", value: 0 },
+        { name: "计算中", value: 0 },
       ],
-      id: "", // 账单id
-      bill: {}, // 账单详情
-      orderData: [], // 订单列表
+      id: "",
+      bill: {},
+      orderData: [],
       orderParam: {
-        // 请求参数
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "id", // 默认排序字段
-        order: "desc", // 默认排序方式
-        // flowType: "PAY",
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "id",
+        order: "desc",
         startDate: null,
         endDate: null,
       },
-      orderColumns: [
-        {
-          title: '结算信息',
-          key: 'pay',
-          align: 'center',
-          children: [
-            {
-              title: "时间",
-              key: "createTime",
-            },
-            {
-              title: "订单编号",
-              key: "orderSn",
-              width: 250,
-            },
-            {
-              title: "子订单号",
-              key: "orderItemSn",
-              width: 250,
-            },
-            {
-              title: "类型",
-              key: "flowType",
-              render: (h, params) => {
-                if (params.row.flowType == "PAY") {
-                  return h("div", [
-                    h("tag", {props: {color: "blue"}}, "收款"),
-                  ]);
-                } else {
-                  return h("div", [
-                    h("tag", {props: {color: "magenta"}}, "退款"),
-                  ]);
-                }
-              }
-            },
-            {
-              title: "结算金额",
-              key: "billPrice",
-              render: (h, params) => {
-                if (params.row.flowType == "PAY") {
-                  return h("div", this.$options.filters.unitPrice(params.row.billPrice, "￥")
-                  );
-                } else {
-                  return h("priceColorScheme", {props: {value: (0 - params.row.billPrice), color: this.$mainColor}});
-                }
-              },
-            },
-          ]
-        },
-        {
-          title: '收入',
-          key: 'pay',
-          align: 'center',
-          children: [{
-            title: "补贴",
-            key: "billPrice",
-            render: (h, params) => {
-              if (params.row.pointSettlementPrice == 0) {
-                return h("div", "-");
-              } else if (params.row.flowType == "PAY") {
-                return h("div", this.$options.filters.unitPrice((params.row.pointSettlementPrice + params.row.kanjiaSettlementPrice + params.row.siteCouponCommission), "￥")
-                );
-              } else {
-                return h("priceColorScheme", {props: {value: (0 - (params.row.pointSettlementPrice + params.row.kanjiaSettlementPrice + params.row.siteCouponCommission))}});
-              }
-            },
-          },
-            {
-              title: "用户实付",
-              key: "billPrice",
-              render: (h, params) => {
-                if (params.row.flowType == "PAY") {
-                  return h("div", this.$options.filters.unitPrice(params.row.finalPrice, "￥")
-                  );
-                } else {
-                  return h("priceColorScheme", {props: {value: (0 - params.row.finalPrice)}});
-                }
-              },
-            },
-            {
-              title: "合计",
-              key: "billPrice",
-              render: (h, params) => {
-                if (params.row.flowType == "PAY") {
-                  return h("div", this.$options.filters.unitPrice(params.row.finalPrice, "￥")
-                  );
-                } else {
-                  return h("priceColorScheme", {props: {value: (0 - params.row.finalPrice)}});
-                }
-              },
-            },
-          ]
-        },
-        {
-          title: '支出',
-          key: 'pay',
-          align: 'center',
-          children: [{
-            title: "平台服务费",
-            key: "billPrice",
-            render: (h, params) => {
-              if (params.row.commissionPrice == 0) {
-                return h("div", "-");
-              } else if (params.row.flowType == "PAY") {
-                return h("priceColorScheme", {props: {value: (0 - params.row.commissionPrice)}});
-
-              } else {
-                return h("div", this.$options.filters.unitPrice(params.row.commissionPrice, "￥"));
-              }
-            },
-          },
-            {
-              title: "分销佣金",
-              key: "distributionRebate",
-              render: (h, params) => {
-                if (params.row.distributionRebate == 0) {
-                  return h("div", "-");
-                } else if (params.row.flowType == "PAY") {
-                  return h("priceColorScheme", {props: {value: (0 - params.row.distributionRebate)}});
-                } else {
-                  return h("div", this.$options.filters.unitPrice(params.row.distributionRebate, "￥"));
-                }
-              },
-            },
-            {
-              title: "合计",
-              key: "billPrice",
-              render: (h, params) => {
-                if (params.row.flowType == "PAY") {
-                  return h("priceColorScheme", {props: {value: (0 - (params.row.commissionPrice + params.row.distributionRebate))}});
-                } else {
-                  return h("div", this.$options.filters.unitPrice((params.row.commissionPrice + params.row.distributionRebate), "￥"));
-                }
-              },
-            }]
-        }
-
-      ],
-      orderTotal: 0, // 订单总数
-      refundTotal: 0, // 退款单总数
-      // 结算单状态枚举模拟数据
+      orderTotal: 0,
+      refundTotal: 0,
       billStatusList: [
-        { status: 'OUT', value: '已出账', title: '生成账单' },
-        { status: 'CHECK', value: '已对账', title: '商家对账' },
-        { status: 'PAY', value: '已付款', title: '平台付款' },
-        { status: 'COMPLETE', value: '已完成', title: '结算完成' },
+        { status: "OUT", value: "已出账", title: "生成账单" },
+        { status: "CHECK", value: "已对账", title: "商家对账" },
+        { status: "PAY", value: "已付款", title: "平台付款" },
+        { status: "COMPLETE", value: "已完成", title: "结算完成" },
       ],
-      // 结算单状态步骤
-      billStatusStep: []
+      billStatusStep: [],
     };
   },
   methods: {
-    // 结算单状态
+    formatPrice(value) {
+      return this.$filters.unitPrice(value, "￥");
+    },
+    negate(value) {
+      return 0 - value;
+    },
+    isPayFlow(row) {
+      return row.flowType === "PAY";
+    },
+    orderSubsidyTotal(row) {
+      return (
+        row.pointSettlementPrice + row.kanjiaSettlementPrice + row.siteCouponCommission
+      );
+    },
+    orderSubsidyDisplay(row) {
+      if (row.pointSettlementPrice == 0) {
+        return "-";
+      }
+      return this.orderSubsidyTotal(row);
+    },
+    orderCommissionDisplay(row) {
+      return row.commissionPrice == 0 ? "-" : row.commissionPrice;
+    },
+    orderDistributionRebateDisplay(row) {
+      return row.distributionRebate == 0 ? "-" : row.distributionRebate;
+    },
+    orderExpenseTotal(row) {
+      return row.commissionPrice + row.distributionRebate;
+    },
     getBillStatusStep() {
       this.billStatusStep = [];
-      let current = '', myCur = false, myIdx = 0;
+      let current = "";
+      let myCur = false;
+      let myIdx = 0;
       this.billStatusList.map((item, index) => {
         if (item.status === this.bill.billStatus) {
-          myCur = true; myIdx = index; current = '';
+          myCur = true;
+          myIdx = index;
+          current = "";
+        } else if (!myCur) {
+          current = "";
+        } else if (myIdx + 1 === index) {
+          current = "current";
         } else {
-          if (!myCur) {
-            current = '';
-          } else {
-            if (myIdx+1 === index) {
-              current = 'current';
-            } else {
-              current = 'future';
-            }
-          }
+          current = "future";
         }
-        let temp = { ...item, className: current };
-        this.billStatusStep.push (temp);
+        this.billStatusStep.push({ ...item, className: current });
       });
-      if (this.bill.billStatus === 'COMPLETE') {
-        this.billStatusStep[this.billStatusStep.length-1].className = 'current';
+      if (this.bill.billStatus === "COMPLETE") {
+        this.billStatusStep[this.billStatusStep.length - 1].className = "current";
       }
     },
-    //订单页数发生变化
     orderChangePage(v) {
       this.orderParam.pageNumber = v;
       this.getOrder();
     },
-    //订单每页条数变化
     orderChangePageSize(v) {
       this.orderParam.pageNumber = 1;
       this.orderParam.pageSize = v;
       this.getOrder();
     },
-    //平台审核通过（审核通过及付款)
     pass() {
       this.$Modal.confirm({
         title: "结算单付款",
-        // 记得确认修改此处
         content: "确定结算单已付款?",
         loading: true,
         onOk: () => {
@@ -542,36 +431,30 @@ export default {
           });
         },
       });
-
-
     },
-    //下载账单
     download() {
-      API_Shop.downloadBill(this.id).then((res) => {
-        const blob = new Blob([res], {
-          type: "application/vnd.ms-excel;charset=utf-8",
-        });
-        //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
-        //IE10以上支持blob但是依然不支持download
-        if ("download" in document.createElement("a")) {
-          //支持a标签download的浏览器
-          const link = document.createElement("a"); //创建a标签
-          link.download = "结算单-"+this.id+".xls"; //a标签添加属性
-          link.style.display = "none";
-          link.href = URL.createObjectURL(blob);
-          document.body.appendChild(link);
-          link.click(); //执行下载
-          URL.revokeObjectURL(link.href); //释放url
-          document.body.removeChild(link); //释放标签
-        } else {
-          navigator.msSaveBlob(blob, fileName);
-        }
-      })
+      API_Shop.downloadBill(this.id)
+        .then((res) => {
+          const blob = new Blob([res], {
+            type: "application/vnd.ms-excel;charset=utf-8",
+          });
+          if ("download" in document.createElement("a")) {
+            const link = document.createElement("a");
+            link.download = "结算单-" + this.id + ".xls";
+            link.style.display = "none";
+            link.href = URL.createObjectURL(blob);
+            document.body.appendChild(link);
+            link.click();
+            URL.revokeObjectURL(link.href);
+            document.body.removeChild(link);
+          } else {
+            navigator.msSaveBlob(blob, "结算单-" + this.id + ".xls");
+          }
+        })
         .catch((err) => {
           console.log(err);
-      });
+        });
     },
-
     init() {
       this.id = this.$route.query.id;
       this.getDetail();
@@ -580,47 +463,34 @@ export default {
       API_Shop.getBuyBillDetail(this.id).then((res) => {
         if (res.success) {
           this.bill = res.result;
-          //初始化表格
           this.initTable();
-          //初始化订单信息
           this.orderParam.startDate = this.bill.startTime;
           this.orderParam.endDate = this.bill.endTime;
           this.getOrder();
-          // 结算单状态步骤
           this.getBillStatusStep();
         }
       });
     },
-    // 账单详细
     initTable() {
-      let bill = this.bill;
-      const money = (val) =>
-        val === null || val === undefined || val === "" ? 0 : val;
+      const bill = this.bill;
+      const money = (val) => (val === null || val === undefined || val === "" ? 0 : val);
 
       this.data[0].name = "结算单状态";
       this.data[0].value = filters.unixSellerBillStatus(bill.billStatus);
-
       this.data[1].name = "结算单号";
       this.data[1].value = bill.sn;
-
       this.data[2].name = "店铺名称";
       this.data[2].value = bill.storeName;
-
       this.data[3].name = "起止日期";
       this.data[3].value = bill.startTime + "~" + bill.endTime;
-
       this.data[4].name = "银行开户名";
       this.data[4].value = bill.bankAccountName;
-
       this.data[5].name = "银行账号";
       this.data[5].value = bill.bankAccountNumber;
-
       this.data[6].name = "开户行支行名称";
       this.data[6].value = bill.bankName;
-
       this.data[7].name = "支行联行号";
       this.data[7].value = bill.bankCode;
-
       this.data[8].name = "支付时间";
       this.data[8].value = bill.payTime === null ? "未付款" : bill.payTime;
 
@@ -711,11 +581,11 @@ table {
 
   .increase-color {
     color: green;
-    margin-top: 5px
+    margin-top: 5px;
   }
 
   .theme_color {
-    margin-top: 5px
+    margin-top: 5px;
   }
 }
 
@@ -750,9 +620,6 @@ table {
       background-color: #f7f7f7;
       color: #515a6e;
     }
-    .text {
-
-    }
   }
 }
 </style>
diff --git a/manager/src/views/seller/bill/bill.vue b/manager/src/views/seller/bill/bill.vue
index 3045b075..f432a2c2 100644
--- a/manager/src/views/seller/bill/bill.vue
+++ b/manager/src/views/seller/bill/bill.vue
@@ -1,36 +1,54 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="账单编号" prop="sn">
-          <Input type="text" v-model="searchForm.sn" placeholder="请输入账单编号" clearable style="width: 240px" />
-        </Form-item>
-        <Form-item label="出帐时间" prop="createTime">
-          <DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 240px">
-          </DatePicker>
-        </Form-item>
-        <Form-item label="筛选状态">
-          <Select v-model="searchForm.billStatus" clearable style="width:240px">
-            <Option value="OUT">已出账</Option>
-            <Option value="CHECK">已对账</Option>
-            <!-- <Option value="EXAMINE">已审核</Option> -->
-            <Option value="COMPLETE">已付款</Option>
-          </Select>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-      </Form>
-      </Card>
-    <Card>
-      <Row class="operation padding-row">
+    <el-card>
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+        @selection-change="changeSelect"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column prop="sn" label="账单号" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="生成时间" width="120" />
+        <el-table-column label="结算时间段" width="200">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.startTime }}~{{ row.endTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="storeName" label="店铺名称" min-width="120" show-overflow-tooltip />
+        <el-table-column label="结算金额" width="130">
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.billPrice" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="billStatusTagType(row.billStatus)">{{ billStatusText(row.billStatus) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" align="center" fixed="right">
+          <template #default="{ row }">
+            <a v-if="row" class="link-text" @click="detail(row)">详细</a>
+          </template>
+        </el-table-column>
+      </el-table>
 
-      </Row>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-selection-change="changeSelect">
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]"
-          size="small" show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -39,152 +57,53 @@ import * as API_Shop from "@/api/shops";
 
 export default {
   name: "bill",
-  components: {},
   data() {
     return {
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
-        billStatus:"" //状态
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
       },
-      selectDate: null, // 选择一个时间段
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "账单号",
-          key: "sn",
-          minWidth: 200,
-          tooltip: true,
-        },
-        {
-          title: "生成时间",
-          key: "createTime",
-          width: 120,
-        },
-        {
-          title: "结算时间段",
-          key: "startTime",
-          width: 200,
-          render: (h, params) => {
-            return h("div", params.row.startTime + "~" + params.row.endTime);
-          },
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          minWidth: 120,
-          tooltip: true,
-        },
-
-        {
-          title: "结算金额",
-          key: "billPrice",
-          width: 130,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.billPrice,color:this.$mainColor}} );
-          },
-
-        },
-        {
-          title: "状态",
-          key: "billStatus",
-          width: 100,
-          render: (h, params) => {
-            if (params.row.billStatus == "OUT") {
-              return h("Tag", {props: {color: "blue",},},"已出账");
-            } else if (params.row.billStatus == "CHECK") {
-              return h("Tag", {props: {color: "geekblue",},},"已对账");
-            } else if (params.row.billStatus == "EXAMINE") {
-              return h("Tag", {props: {color: "purple",},},"已审核");
-            } else {
-              return h("Tag", {props: {color: "green",},},"已付款");
-            }
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 120,
-          render: (h, params) => {
-            return h("div", { class: "ops" }, [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.detail(params.row);
-                    },
-                  },
-                },
-                "详细"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      total: 0,
     };
   },
   methods: {
+    billStatusText(v) {
+      const map = { OUT: "已出账", CHECK: "已对账", EXAMINE: "已审核", COMPLETE: "已付款" };
+      return map[v] || "已付款";
+    },
+    billStatusTagType(v) {
+      const map = { OUT: "primary", CHECK: "", EXAMINE: "warning", COMPLETE: "success" };
+      return map[v] || "success";
+    },
     init() {
       this.getDataList();
     },
-    changePage(v) { // 改变页码
+    changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
-    changePageSize(v) { // 改变页数
+    changePageSize(v) {
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    handleSearch() { // 搜索
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    changeSelect(e) { // 表格选中
+    changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
     },
-    selectDateRange(v) {
-      if (v) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      }
-    },
     getDataList() {
       this.loading = true;
-
-      this.searchForm.startTime &&
-        (this.searchForm.startTime = this.$options.filters.unixToDate(
-          this.searchForm.startTime / 1000
-        ));
-      this.searchForm.endTime &&
-        (this.searchForm.endTime = this.$options.filters.unixToDate(
-          this.searchForm.endTime / 1000
-        ));
-
+      if (this.searchForm.startTime) {
+        this.searchForm.startTime = this.$filters.unixToDate(this.searchForm.startTime / 1000);
+      }
+      if (this.searchForm.endTime) {
+        this.searchForm.endTime = this.$filters.unixToDate(this.searchForm.endTime / 1000);
+      }
       API_Shop.getBuyBillPage(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
@@ -192,24 +111,19 @@ export default {
           this.total = res.result.total;
         }
       });
-      this.total = this.data.length;
-      this.loading = false;
     },
-    detail(v) { // 账单详情
-      let id = v.id;
-      this.$options.filters.customRouterPush({
+    detail(v) {
+      this.$filters.customRouterPush({
         name: "bill-detail",
-        query: { id: id },
-      })
+        query: { id: v.id },
+      });
     },
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
-        // 记得确认修改此处
         content: "您确认要删除 " + v.name + " ?",
         loading: true,
         onOk: () => {
-          // 删除
           this.deleteRequest("/bill/delByIds/" + v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -220,7 +134,7 @@ export default {
         },
       });
     },
-    delAll() { // 多选删除数据
+    delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未选择要删除的数据");
         return;
@@ -235,7 +149,6 @@ export default {
             ids += e.id + ",";
           });
           ids = ids.substring(0, ids.length - 1);
-          // 批量删除
           this.deleteRequest("/bill/delByIds/" + ids).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -252,15 +165,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.ops a {
-  color: #2d8cf0;
-  cursor: pointer;
-  text-decoration: none;
-}
-.ops span {
-  display: inline-block;
-  margin: 0 8px;
-  color: #dcdee2;
-}
-</style>
diff --git a/manager/src/views/seller/shop/shopAuditList.vue b/manager/src/views/seller/shop/shopAuditList.vue
index 90523274..7bdb17f7 100644
--- a/manager/src/views/seller/shop/shopAuditList.vue
+++ b/manager/src/views/seller/shop/shopAuditList.vue
@@ -1,205 +1,156 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="会员名称" prop="memberName">
-          <Input
-            type="text"
+    <el-card>
+      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form">
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
             v-model="searchForm.memberName"
             placeholder="请输入会员名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="店铺名称" prop="storeName">
-          <Input
-            type="text"
+        </el-form-item>
+        <el-form-item label="店铺名称" prop="storeName">
+          <el-input
             v-model="searchForm.storeName"
             placeholder="请输入店铺名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="创建时间" prop="createTime">
-          <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 240px"></DatePicker>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-      </Form>
-      </Card>
-    <Card>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10"></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]"
-              size="small" show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
+        </el-form-item>
+        <el-form-item label="创建时间" prop="createTime">
+          <el-date-picker
+            v-model="selectDate"
+            type="datetimerange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            clearable
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择起始时间"
+            style="width: 240px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column prop="storeName" label="店铺名称" min-width="120" align="left" />
+        <el-table-column prop="memberName" label="会员名称" min-width="120" align="left" />
+        <el-table-column label="店铺地址" width="300">
+          <template #default="{ row }">
+            <el-tag v-if="row">{{ row.storeAddressPath || "暂未填写" }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否自营" width="120" align="left">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="row.selfOperated ? '' : 'success'">
+              {{ row.selfOperated ? "自营" : "非自营" }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="170" align="left" />
+        <el-table-column label="操作" width="170" align="center" fixed="right">
+          <template #default="{ row }">
+            <a
+              v-if="row && row.storeDisable == 'APPLYING'"
+              class="link-text"
+              @click="edit(row)"
+            >查看</a>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
-  import {
-    getShopListData,
-  } from "@/api/shops";
-  export default {
-    name: "shop",
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-        },
-        selectDate: null, // 创建时间
-        columns: [
-          // 表头
-          {
-            title: "店铺名称",
-            key: "storeName",
-            minWidth: 120,
-            align: "left",
-          },
-          {
-            title: "会员名称",
-            key: "memberName",
-            align: "left",
-            minWidth: 120,
-          },
-          {
-            title: "店铺地址",
-            key: "storeAddressPath",
-            width: 300,
-            sortable: false,
-            render: (h, params) => {
-            return h(
-              "Tag",
-              {
+import { getShopListData } from "@/api/shops";
 
-              },
-              params.row.storeAddressPath ||  "暂未填写"
-            );
-          },
-          },
-          {
-            title: "是否自营",
-            key: "selfOperated",
-            align: "left",
-            width: 120,
-            render: (h, params) => {
-              return h(
-                "Tag",
-                {
-                  props: {
-                    color: params.row.selfOperated ? "default" : "success",
-                  },
-                },
-                params.row.selfOperated ? "自营" : "非自营"
-              );
-            },
-          },
-
-          {
-            title: "创建时间",
-            key: "createTime",
-            align: "left",
-            width: 170,
-            sortable: false,
-          },
-          {
-            title: "操作",
-            key: "action",
-            width: 170,
-            align: "center",
-            fixed: "right",
-            render: (h, params) => {
-              if (params.row.storeDisable == "APPLYING") {
-                return h(
-                    "Button",
-                    {
-                      props: {
-                        type: "info",
-                        size: "small",
-                      },
-                      style: {
-                        marginRight: "5px",
-                      },
-                      on: {
-                        click: () => {
-                          this.edit(params.row);
-                        },
-                      },
-                    },
-                    "查看"
-                  )
-              }
-            },
-          },
-        ],
-        data: [], // 表单数据
-        total: 0 // 表单数据总数
-      };
+export default {
+  name: "shop",
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
+      },
+      selectDate: null,
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    callback(val) {
+      this.$emit("callback", val);
     },
-
-    methods: {
-      // 回调给父级
-      callback(val) {
-        this.$emit("callback", val);
-      },
-      // 初始化数据
-      init() {
-        this.getDataList();
-      },
-      // 分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      // 搜索
-      handleSearch() {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 20;
-        this.getDataList();
-      },
-      // 起止时间从新赋值
-      selectDateRange(v) {
-        if (v) {
-          this.searchForm.startDate = v[0];
-          this.searchForm.endDate = v[1];
-        }
-      },
-      // 获取列表数据
-      getDataList() {
-        this.loading = true;
-        // 带多条件搜索参数获取表单数据 请自行修改接口
-        this.searchForm.storeDisable='APPLYING'
-        getShopListData(this.searchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        });
-        this.total = this.data.length;
+    init() {
+      this.getDataList();
+    },
+    changePage() {
+      this.getDataList();
+    },
+    changePageSize() {
+      this.searchForm.pageNumber = 1;
+      this.getDataList();
+    },
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 20;
+      this.getDataList();
+    },
+    selectDateRange(v) {
+      if (v) {
+        this.searchForm.startDate = v[0];
+        this.searchForm.endDate = v[1];
+      }
+    },
+    getDataList() {
+      this.loading = true;
+      this.searchForm.storeDisable = "APPLYING";
+      getShopListData(this.searchForm).then((res) => {
         this.loading = false;
-      },
-      // 查看店铺
-      edit(v) {
-        this.$router.push({ path: '/shop-operation', query: { shopId: v.id } });
-      },
-
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
     },
-    mounted() {
-      this.init();
+    edit(v) {
+      this.$router.push({ path: "/shop-operation", query: { shopId: v.id } });
     },
-  };
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
diff --git a/manager/src/views/seller/shop/shopDetail.scss b/manager/src/views/seller/shop/shopDetail.scss
index 0b9852aa..20750c09 100644
--- a/manager/src/views/seller/shop/shopDetail.scss
+++ b/manager/src/views/seller/shop/shopDetail.scss
@@ -122,3 +122,7 @@
     line-height: 16px;
   }
 }
+
+.category-tag {
+  margin: 0 8px 8px 0;
+}
diff --git a/manager/src/views/seller/shop/shopDetail.vue b/manager/src/views/seller/shop/shopDetail.vue
index 36026129..4fe7e304 100644
--- a/manager/src/views/seller/shop/shopDetail.vue
+++ b/manager/src/views/seller/shop/shopDetail.vue
@@ -1,1006 +1,951 @@
 <template>
   <div>
-    <Card style="padding: 10px 12px 0px">
+    <el-card style="padding: 10px 12px 0px">
       <div class="head-title">基本信息</div>
       <div class="detail-body">
-        <div class="ant-col-md-6" style="width: 25%;">
+        <div class="ant-col-md-6" style="width: 25%">
           <div class="info">
             <div class="head-info">
-              <Avatar size="large" :src="storeInfo.storeLogo"/>
+              <el-avatar :size="64" :src="storeInfo.storeLogo" />
               <div>
                 <div class="name" v-if="storeInfo.storeName && storeInfo.storeName.length > 15">
-                  {{storeInfo.storeName.slice(0,15)}}...
+                  {{ storeInfo.storeName.slice(0, 15) }}...
                 </div>
                 <div class="name" v-else>
-                  {{storeInfo.storeName}}
+                  {{ storeInfo.storeName }}
                 </div>
               </div>
             </div>
             <div class="bottom-info">
-              <p v-if="storeInfo.createTime">{{storeInfo.createTime}}&nbsp;开店</p>
+              <p v-if="storeInfo.createTime">{{ storeInfo.createTime }}&nbsp;开店</p>
               <p v-if="storeInfo.selfOperated == 1">
-                <Tag color="success">自营</Tag>
+                <el-tag type="success">自营</el-tag>
               </p>
               <p v-else>
-                <Tag color="error">非自营</Tag>
+                <el-tag type="danger">非自营</el-tag>
               </p>
               <p>
-                <i-switch size="large" v-model="storeInfo.storeDisable" :true-value="true" :false-value="false"
-                          @on-change="shopStatusChange">
-                  <span slot="open">启用</span>
-                  <span slot="close">禁用</span>
-                </i-switch>
+                <el-switch
+                  v-model="storeInfo.storeDisable"
+                  :active-value="true"
+                  :inactive-value="false"
+                  active-text="启用"
+                  inactive-text="禁用"
+                  @change="shopStatusChange"
+                />
               </p>
             </div>
             <div style="margin-top: 20px">
               <p class="item">
                 <span class="label">公司名称：</span>
-                <span class="info">{{storeInfo.companyName}}</span>
+                <span class="info">{{ storeInfo.companyName }}</span>
               </p>
               <p class="item">
                 <span class="label">公司电话：</span>
-                <span class="info">{{storeInfo.companyPhone}}</span>
+                <span class="info">{{ storeInfo.companyPhone }}</span>
               </p>
               <p class="item">
                 <span class="label">电子邮箱：</span>
-                <span class="info">{{storeInfo.companyEmail}}</span>
+                <span class="info">{{ storeInfo.companyEmail }}</span>
               </p>
               <p class="item">
                 <span class="label">员工总数：</span>
-                <span class="info">{{storeInfo.employeeNum}}人</span>
+                <span class="info">{{ storeInfo.employeeNum }}人</span>
               </p>
               <p class="item">
                 <span class="label">注册资金：</span>
-                <span class="info">{{storeInfo.registeredCapital}}万</span>
+                <span class="info">{{ storeInfo.registeredCapital }}万</span>
               </p>
               <p class="item">
                 <span class="label">电子邮箱：</span>
-                <span class="info">{{storeInfo.companyEmail}}</span>
+                <span class="info">{{ storeInfo.companyEmail }}</span>
               </p>
               <p class="item">
                 <span class="label">联系人姓名：</span>
-                <span class="info">{{storeInfo.linkName}}</span>
+                <span class="info">{{ storeInfo.linkName }}</span>
               </p>
               <p class="item">
                 <span class="label">联系人电话：</span>
-                <span class="info">{{storeInfo.linkPhone}}</span>
+                <span class="info">{{ storeInfo.linkPhone }}</span>
               </p>
               <p class="item">
                 <span class="label">公司地址：</span>
                 <span class="info">
-                  {{storeInfo.companyAddressPath || storeInfo.companyAddress?storeInfo.companyAddressPath + ' '+storeInfo.companyAddress:"暂未完善"}}
-                </span>
+                  {{
+                    storeInfo.companyAddressPath || storeInfo.companyAddress
+                      ? storeInfo.companyAddressPath + " " + storeInfo.companyAddress
+                      : "暂未完善"
+                  }}</span>
               </p>
             </div>
-
           </div>
         </div>
         <div class="ant-col-md-6">
           <p class="item">
             <span class="label">商家账号：</span>
-            <span class="info">{{storeInfo.memberName}}</span>
+            <span class="info">{{ storeInfo.memberName }}</span>
           </p>
           <p class="item">
             <span class="label">库存预警数：</span>
-            <span class="info">{{storeInfo.stockWarning?storeInfo.stockWarning:'0'}}</span>
+            <span class="info">{{ storeInfo.stockWarning ? storeInfo.stockWarning : "0" }}</span>
           </p>
           <p class="item">
             <span class="label">店铺所在地：</span>
             <span class="info">
               <span>
                 {{
-                (storeInfo.storeAddressPath!==null && storeInfo.storeAddressPath!=='' && storeInfo.storeAddressPath!=="null" && storeInfo.storeAddressPath!==undefined )? storeInfo.storeAddressPath: ""
-                }}
-              </span>
+                  storeInfo.storeAddressPath !== null &&
+                  storeInfo.storeAddressPath !== "" &&
+                  storeInfo.storeAddressPath !== "null" &&
+                  storeInfo.storeAddressPath !== undefined
+                    ? storeInfo.storeAddressPath
+                    : ""
+                }}</span>
               <span>
                 {{
-                (storeInfo.storeAddressDetail!==null && storeInfo.storeAddressDetail!=='' && storeInfo.storeAddressDetail!=="null" && storeInfo.storeAddressDetail!==undefined )? storeInfo.storeAddressDetail:""
-                }}
-              </span>
-              {{(storeInfo.storeAddressPath!==null && storeInfo.storeAddressPath!=='' && storeInfo.storeAddressPath!=="null" && storeInfo.storeAddressPath!==undefined) || (storeInfo.storeAddressDetail!==null && storeInfo.storeAddressDetail!=='' && storeInfo.storeAddressDetail!=="null" && storeInfo.storeAddressDetail!==undefined )?"":"暂未完善"}}
-            </span>
+                  storeInfo.storeAddressDetail !== null &&
+                  storeInfo.storeAddressDetail !== "" &&
+                  storeInfo.storeAddressDetail !== "null" &&
+                  storeInfo.storeAddressDetail !== undefined
+                    ? storeInfo.storeAddressDetail
+                    : ""
+                }}</span>
+              {{
+                (storeInfo.storeAddressPath !== null &&
+                  storeInfo.storeAddressPath !== "" &&
+                  storeInfo.storeAddressPath !== "null" &&
+                  storeInfo.storeAddressPath !== undefined) ||
+                (storeInfo.storeAddressDetail !== null &&
+                  storeInfo.storeAddressDetail !== "" &&
+                  storeInfo.storeAddressDetail !== "null" &&
+                  storeInfo.storeAddressDetail !== undefined)
+                  ? ""
+                  : "暂未完善"
+              }}</span>
           </p>
           <p class="item">
             <span class="label">退货地址：</span>
             <span class="info">
-               {{storeInfo.salesConsigneeName !== 'null' ? storeInfo.salesConsigneeName : '' || storeInfo.salesConsigneeMobile !=='null' ?storeInfo.salesConsigneeMobile:''|| storeInfo.salesConsigneeAddressPath !=='null'?storeInfo.salesConsigneeAddressPath:'' || storeInfo.salesConsigneeDetail !=='null'?storeInfo.salesConsigneeDetail:'' ?storeInfo.salesConsigneeName + storeInfo.salesConsigneeMobile +' '+ storeInfo.salesConsigneeAddressPath + storeInfo.salesConsigneeDetail:'暂未完善'}}
-
-            </span>
+              {{
+                storeInfo.salesConsigneeName !== "null"
+                  ? storeInfo.salesConsigneeName
+                  : "" || storeInfo.salesConsigneeMobile !== "null"
+                    ? storeInfo.salesConsigneeMobile
+                    : "" || storeInfo.salesConsigneeAddressPath !== "null"
+                      ? storeInfo.salesConsigneeAddressPath
+                      : "" || storeInfo.salesConsigneeDetail !== "null"
+                        ? storeInfo.salesConsigneeDetail
+                        : ""
+                          ? storeInfo.salesConsigneeName +
+                            storeInfo.salesConsigneeMobile +
+                            " " +
+                            storeInfo.salesConsigneeAddressPath +
+                            storeInfo.salesConsigneeDetail
+                          : "暂未完善"
+              }}</span>
           </p>
           <p class="item">
             <span class="label">店铺定位：</span>
-            <span class="info">{{storeInfo.storeCenter?'已定位':'未定位'}}</span>
+            <span class="info">{{ storeInfo.storeCenter ? "已定位" : "未定位" }}</span>
           </p>
           <p class="item">
             <span class="label">经营范围：</span>
             <span class="info">
-               <CheckboxGroup v-model="checkAllGroup">
-                <Checkbox disabled v-for="(item, i) in categories" :key="i + 1" :label="item.id">{{ item.name }}
-                </Checkbox>
-              </CheckboxGroup>
+              <template v-if="displayCategories.length">
+                <el-tag
+                  v-for="item in displayCategories"
+                  :key="item.id"
+                  type="info"
+                  class="category-tag"
+                >
+                  {{ item.name }}
+                </el-tag>
+              </template>
+              <span v-else>暂未完善</span>
             </span>
           </p>
           <p class="item">
             <span class="label">店铺简介：</span>
             <span class="info">
-              {{storeInfo.storeDesc?storeInfo.storeDesc:'暂未完善'}}
-            </span>
+              {{ storeInfo.storeDesc ? storeInfo.storeDesc : "暂未完善" }}</span>
           </p>
         </div>
         <div class="ant-col-md-6">
           <p class="item">
             <span class="label">法人姓名：</span>
-            <span class="info">{{storeInfo.legalName}}</span>
+            <span class="info">{{ storeInfo.legalName }}</span>
           </p>
           <p class="item">
             <span class="label">法人身份证：</span>
-            <span class="info">{{storeInfo.legalId}}</span>
+            <span class="info">{{ storeInfo.legalId }}</span>
           </p>
           <p class="item">
             <span class="label">身份证照片：</span>
             <span class="info">
-              <img style="height: 100px;width: 100px" class="mr_10" v-for="item in storeInfo.legalPhoto" :src="item" :key="item">
+              <img
+                style="height: 100px; width: 100px"
+                class="mr_10"
+                v-for="item in storeInfo.legalPhoto"
+                :src="item"
+                :key="item"
+              />
             </span>
           </p>
           <p class="item">
-
             <span class="label">营业执照号：</span>
-            <span class="info">{{storeInfo.licenseNum}}</span>
+            <span class="info">{{ storeInfo.licenseNum }}</span>
           </p>
           <p class="item">
             <span class="label">法定经营范围：</span>
-            <span class="info">{{storeInfo.scope}}</span>
+            <span class="info">{{ storeInfo.scope }}</span>
           </p>
           <p class="item">
             <span class="label">营业执照电子版：</span>
             <span class="info">
-              <img style="height: 100px;width: 100px" :src="storeInfo.licencePhoto">
+              <img style="height: 100px; width: 100px" :src="storeInfo.licencePhoto" />
             </span>
           </p>
           <p class="item">
             <span class="label">银行名称：</span>
             <span class="info">
               {{
-                  storeInfo.settlementBankAccountName == "null" ||
-                  !storeInfo.settlementBankAccountName
-                    ? ""
-                    : storeInfo.settlementBankAccountName
-                }}
-            </span>
+                storeInfo.settlementBankAccountName == "null" || !storeInfo.settlementBankAccountName
+                  ? ""
+                  : storeInfo.settlementBankAccountName
+              }}</span>
           </p>
           <p class="item">
             <span class="label">银行账号：</span>
             <span class="info">
               {{
-                  storeInfo.settlementBankAccountNum == "null" ||
-                  !storeInfo.settlementBankAccountNum
-                    ? ""
-                    : storeInfo.settlementBankAccountNum
-                }}
-            </span>
+                storeInfo.settlementBankAccountNum == "null" || !storeInfo.settlementBankAccountNum
+                  ? ""
+                  : storeInfo.settlementBankAccountNum
+              }}</span>
           </p>
           <p class="item">
             <span class="label">银行开户支行名称：</span>
             <span class="info">
               {{
-                  storeInfo.settlementBankBranchName == "null" ||
-                  !storeInfo.settlementBankBranchName
-                    ? ""
-                    : storeInfo.settlementBankBranchName
-                }}
-            </span>
+                storeInfo.settlementBankBranchName == "null" || !storeInfo.settlementBankBranchName
+                  ? ""
+                  : storeInfo.settlementBankBranchName
+              }}</span>
           </p>
           <p class="item">
             <span class="label">银行支行联行号：</span>
             <span class="info">
               {{
-                  storeInfo.settlementBankJointName == "null" ||
-                  !storeInfo.settlementBankJointName
-                    ? ""
-                    : storeInfo.settlementBankJointName
+                storeInfo.settlementBankJointName == "null" || !storeInfo.settlementBankJointName
+                  ? ""
+                  : storeInfo.settlementBankJointName
               }}</span>
           </p>
           <p class="item">
             <span class="label">结算周期：</span>
             <span class="info" v-if="storeInfo.settlementCycle">
               <template v-for="item in storeInfo.settlementCycle.split(',')">
-               <Tag
-                  :key="item"
-                  v-if="item!==''"
-                  :name="item"
-                  style="marrgin-left: 10px"
-                >{{ item }}
-                </Tag>
+                <el-tag :key="item" v-if="item !== ''" style="margin-left: 10px">{{ item }}</el-tag>
               </template>
-
             </span>
           </p>
         </div>
       </div>
-    </Card>
+    </el-card>
+
+    <el-card class="mt_10">
+      <el-tabs v-model="activeTab" @tab-change="storeInfoChange">
+        <el-tab-pane label="TA的订单" name="order" style="min-height: 200px">
+          <el-form ref="searchForm" :model="orderSearchForm" inline label-width="70px" class="search-form">
+            <el-form-item label="订单号" prop="orderSn">
+              <el-input
+                v-model="orderSearchForm.orderSn"
+                placeholder="请输入订单号"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item label="订单状态" prop="orderStatus">
+              <el-select v-model="orderSearchForm.orderStatus" placeholder="请选择" clearable style="width: 200px">
+                <el-option label="未付款" value="UNPAID" />
+                <el-option label="已付款" value="PAID" />
+                <el-option label="待发货" value="UNDELIVERED" />
+                <el-option label="已发货" value="DELIVERED" />
+                <el-option label="已完成" value="COMPLETED" />
+                <el-option label="待核验" value="TAKE" />
+                <el-option label="已关闭" value="CANCELLED" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="支付状态" prop="payStatus">
+              <el-select v-model="orderSearchForm.payStatus" placeholder="请选择" clearable style="width: 200px">
+                <el-option label="未付款" value="UNPAID" />
+                <el-option label="已付款" value="PAID" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="订单类型" prop="orderType">
+              <el-select v-model="orderSearchForm.orderType" placeholder="请选择" clearable style="width: 200px">
+                <el-option label="普通订单" value="NORMAL" />
+                <el-option label="虚拟订单" value="VIRTUAL" />
+                <el-option label="赠品订单" value="GIFT" />
+                <el-option label="拼团订单" value="PINTUAN" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="订单来源" prop="clientType">
+              <el-select v-model="orderSearchForm.clientType" placeholder="请选择" clearable style="width: 200px">
+                <el-option label="移动端" value="H5" />
+                <el-option label="PC端" value="PC" />
+                <el-option label="小程序" value="WECHAT_MP" />
+                <el-option label="移动应用端" value="APP" />
+                <el-option label="未知" value="UNKNOWN" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="下单时间">
+              <el-date-picker
+                v-model="selectDate"
+                type="datetimerange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                clearable
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                placeholder="选择起始时间"
+                style="width: 360px"
+                @change="selectDateRange"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" class="search-btn" @click="getOrderData">搜索</el-button>
+            </el-form-item>
+          </el-form>
 
-    <Card class="mt_10">
-      <Tabs value="order" @on-click="storeInfoChange">
-        <TabPane label="TA的订单" name="order" style="min-height: 200px">
-          <Row>
-            <Form ref="searchForm" :model="orderSearchForm" inline :label-width="70" class="search-form">
-              <Form-item label="订单号" prop="orderSn">
-                <Input
-                  type="text"
-                  v-model="orderSearchForm.orderSn"
-                  placeholder="请输入订单号"
-                  clearable
-                  style="width: 200px"
-                />
-              </Form-item>
-              <Form-item label="订单状态" prop="orderStatus">
-                <Select v-model="orderSearchForm.orderStatus" placeholder="请选择" clearable style="width: 200px">
-                  <Option value="UNPAID">未付款</Option>
-                  <Option value="PAID">已付款</Option>
-                  <Option value="UNDELIVERED">待发货</Option>
-                  <Option value="DELIVERED">已发货</Option>
-                  <Option value="COMPLETED">已完成</Option>
-                  <Option value="TAKE">待核验</Option>
-                  <Option value="CANCELLED">已关闭</Option>
-                </Select>
-              </Form-item>
-              <Form-item label="支付状态" prop="payStatus">
-                <Select v-model="orderSearchForm.payStatus" placeholder="请选择" clearable style="width: 200px">
-                  <Option value="UNPAID">未付款</Option>
-                  <Option value="PAID">已付款</Option>
-                </Select>
-              </Form-item>
-              <Form-item label="订单类型" prop="orderType">
-                <Select v-model="orderSearchForm.orderType" placeholder="请选择" clearable style="width: 200px">
-                  <Option value="NORMAL">普通订单</Option>
-                  <Option value="VIRTUAL">虚拟订单</Option>
-                  <Option value="GIFT">赠品订单</Option>
-                  <Option value="PINTUAN">拼团订单</Option>
-                </Select>
-              </Form-item>
-              <Form-item label="订单来源" prop="clientType">
-                <Select v-model="orderSearchForm.clientType" placeholder="请选择" clearable style="width: 200px">
-                  <Option value="H5">移动端</Option>
-                  <Option value="PC">PC端</Option>
-                  <Option value="WECHAT_MP">小程序</Option>
-                  <Option value="APP">移动应用端</Option>
-                  <Option value="UNKNOWN">未知</Option>
-                </Select>
-              </Form-item>
-              <Form-item label="下单时间">
-                <DatePicker
-                  v-model="selectDate"
-                  type="datetimerange"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  clearable
-                  @on-change="selectDateRange"
-                  placeholder="选择起始时间"
-                  style="width: 200px"
-                  transfer
-                ></DatePicker>
-              </Form-item>
-              <Button @click="getOrderData" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-            </Form>
-          </Row>
           <div style="min-height: 180px">
-            <Table
-              :loading="loading"
-              border
-              :columns="orderColumns"
-              :data="orderData"
-              ref="table"
-              class="mt_10"
-            >
-              <!-- 订单详情格式化 -->
-              <template slot="orderSlot" slot-scope="scope">
-                <a @click="$router.push({name: 'order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
-              </template>
-            </Table>
+            <el-table v-loading="loading" border :data="orderData" class="mt_10" style="width: 100%">
+              <el-table-column label="订单编号" min-width="100" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <a
+                    v-if="row"
+                    class="link-text"
+                    @click="$router.push({ name: 'order-detail', query: { sn: row.sn } })"
+                  >{{ row.sn }}</a>
+                </template>
+              </el-table-column>
+              <el-table-column label="订单金额" width="140">
+                <template #default="{ row }">
+                  <priceColorScheme v-if="row" :value="row.flowPrice" :color="$mainColor" />
+                </template>
+              </el-table-column>
+              <el-table-column label="订单类型" width="100">
+                <template #default="{ row }">
+                  <span v-if="row">{{ orderTypeText(row.orderType) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="来源" width="80">
+                <template #default="{ row }">
+                  <span v-if="row">{{ clientTypeText(row.clientType) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="订单状态" width="95">
+                <template #default="{ row }">
+                  <span v-if="row">{{ orderStatusText(row.orderStatus) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="支付状态" width="95">
+                <template #default="{ row }">
+                  <span v-if="row">{{ payStatusText(row.payStatus) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="售后状态" width="100">
+                <template #default="{ row }">
+                  <span v-if="row">{{ groupAfterSaleStatusText(row.groupAfterSaleStatus) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="投诉状态" width="95">
+                <template #default="{ row }">
+                  <span v-if="row">{{ groupComplainStatusText(row.groupComplainStatus) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="storeName" label="购买店铺" width="180" show-overflow-tooltip />
+              <el-table-column prop="createTime" label="下单时间" width="170" />
+            </el-table>
 
-            <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
-              <Page
-                :current="orderSearchForm.pageNumber"
+            <div class="mt_10" style="display: flex; justify-content: flex-end; margin-top: 10px">
+              <el-pagination
+                v-model:current-page="orderSearchForm.pageNumber"
+                v-model:page-size="orderSearchForm.pageSize"
+                :page-sizes="[20, 50, 100]"
                 :total="orderTotal"
-                :page-size="orderSearchForm.pageSize"
-                @on-change="orderChangePage"
-                @on-page-size-change="orderChangePageSize"
-                :page-size-opts="[20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper"
                 size="small"
-                show-total
-                show-elevator
-                show-sizer
-              ></Page>
-            </Row>
+                @current-change="orderChangePage"
+                @size-change="orderChangePageSize"
+              />
+            </div>
           </div>
-        </TabPane>
-        <TabPane label="TA的退货单" name="refundGoods">
-          <Row>
-            <Form ref="refundGoodsOrderSearchForm" :model="refundGoodsOrderSearchForm" inline :label-width="70"
-                  class="search-form">
-              <Form-item label="订单编号" prop="orderSn">
-                <Input
-                  type="text"
-                  v-model="refundGoodsOrderSearchForm.orderSn"
-                  placeholder="请输入订单编号"
-                  clearable
-                  style="width: 200px"
-                />
-              </Form-item>
-              <Form-item label="售后单号" prop="sn">
-                <Input
-                  type="text"
-                  v-model="refundGoodsOrderSearchForm.sn"
-                  placeholder="请输入售后单号"
-                  clearable
-                  style="width: 200px"
-                />
-              </Form-item>
-              <Form-item label="售后状态">
-                <Select v-model="refundGoodsOrderSearchForm.serviceStatus" placeholder="全部" clearable
-                        style="width: 200px">
-                  <Option value="APPLY">申请售后</Option>
-                  <Option value="PASS">通过售后</Option>
-                  <Option value="REFUSE">拒绝售后</Option>
-                  <Option value="BUYER_RETURN">买家退货，待卖家收货</Option>
-                  <Option value="SELLER_RE_DELIVERY">商家换货/补发</Option>
-                  <Option value="SELLER_CONFIRM">卖家确认收货</Option>
-                  <Option value="SELLER_TERMINATION">卖家终止售后</Option>
-                  <Option value="BUYER_CONFIRM">买家确认收货</Option>
-                  <Option value="BUYER_CANCEL">买家取消售后</Option>
-                  <Option value="COMPLETE">完成售后</Option>
-                </Select>
-              </Form-item>
-              <Form-item label="申请时间">
-                <DatePicker
-                  v-model="selectDate"
-                  type="datetimerange"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  clearable
-                  @on-change="selectRefundGoodsDateRange"
-                  placeholder="选择起始时间"
-                  style="width: 200px"
-                  transfer
-                ></DatePicker>
-              </Form-item>
-              <Form-item label="商家名称" prop="storeName">
-                <Input
-                  type="text"
-                  v-model="refundGoodsOrderSearchForm.storeName"
-                  placeholder="请输入商家名称"
-                  clearable
-                  style="width: 200px"
-                />
-              </Form-item>
-              <Form-item label="会员名称" prop="memberName">
-                <Input
-                  type="text"
-                  v-model="refundGoodsOrderSearchForm.memberName"
-                  placeholder="请输入会员名称"
-                  clearable
-                  style="width: 200px"
-                />
-              </Form-item>
-              <Button @click="getRefundGoodsOrderData" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-            </Form>
-          </Row>
-          <div style="min-height: 180px">
-            <Table
-              :loading="loading"
-              border
-              :columns="refundGoodsOrderColumns"
-              :data="refundGoodsOrderData"
-              ref="table"
-              class="mt_10"
-            >
-              <!-- 商品栏目格式化 -->
-              <template slot="goodsSlot" slot-scope="scope">
-                <div style="margin-top: 5px;height: 80px; display: flex;">
-                  <div style="">
-                    <img :src="scope.row.goodsImage" style="height: 60px;margin-top: 3px">
-                  </div>
+        </el-tab-pane>
 
-                  <div style="margin-left: 13px;margin-top: 3px;">
-                    <div class="div-zoom">
-                      <a>{{scope.row.goodsName}}</a>
+        <el-tab-pane label="TA的退货单" name="refundGoods">
+          <el-form
+            ref="refundGoodsOrderSearchForm"
+            :model="refundGoodsOrderSearchForm"
+            inline
+            label-width="70px"
+            class="search-form"
+          >
+            <el-form-item label="订单编号" prop="orderSn">
+              <el-input
+                v-model="refundGoodsOrderSearchForm.orderSn"
+                placeholder="请输入订单编号"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item label="售后单号" prop="sn">
+              <el-input
+                v-model="refundGoodsOrderSearchForm.sn"
+                placeholder="请输入售后单号"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item label="售后状态">
+              <el-select
+                v-model="refundGoodsOrderSearchForm.serviceStatus"
+                placeholder="全部"
+                clearable
+                style="width: 200px"
+              >
+                <el-option label="申请售后" value="APPLY" />
+                <el-option label="通过售后" value="PASS" />
+                <el-option label="拒绝售后" value="REFUSE" />
+                <el-option label="买家退货，待卖家收货" value="BUYER_RETURN" />
+                <el-option label="商家换货/补发" value="SELLER_RE_DELIVERY" />
+                <el-option label="卖家确认收货" value="SELLER_CONFIRM" />
+                <el-option label="卖家终止售后" value="SELLER_TERMINATION" />
+                <el-option label="买家确认收货" value="BUYER_CONFIRM" />
+                <el-option label="买家取消售后" value="BUYER_CANCEL" />
+                <el-option label="完成售后" value="COMPLETE" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="申请时间">
+              <el-date-picker
+                v-model="selectDate"
+                type="datetimerange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                clearable
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                placeholder="选择起始时间"
+                style="width: 360px"
+                @change="selectRefundGoodsDateRange"
+              />
+            </el-form-item>
+            <el-form-item label="商家名称" prop="storeName">
+              <el-input
+                v-model="refundGoodsOrderSearchForm.storeName"
+                placeholder="请输入商家名称"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item label="会员名称" prop="memberName">
+              <el-input
+                v-model="refundGoodsOrderSearchForm.memberName"
+                placeholder="请输入会员名称"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" class="search-btn" @click="getRefundGoodsOrderData">搜索</el-button>
+            </el-form-item>
+          </el-form>
+
+          <div style="min-height: 180px">
+            <el-table v-loading="loading" border :data="refundGoodsOrderData" class="mt_10" style="width: 100%">
+              <el-table-column label="售后服务单号" min-width="140">
+                <template #default="{ row }">
+                  <a
+                    v-if="row"
+                    class="link-text"
+                    @click="$router.push({ name: 'after-order-detail', query: { sn: row.sn } })"
+                  >{{ row.sn }}</a>
+                </template>
+              </el-table-column>
+              <el-table-column label="订单编号" min-width="120">
+                <template #default="{ row }">
+                  <a
+                    v-if="row"
+                    class="link-text"
+                    @click="$router.push({ name: 'order-detail', query: { sn: row.orderSn } })"
+                  >{{ row.orderSn }}</a>
+                </template>
+              </el-table-column>
+              <el-table-column label="商品" min-width="300">
+                <template #default="{ row }">
+                  <div v-if="row" style="margin-top: 5px; height: 80px; display: flex">
+                    <div>
+                      <img :src="row.goodsImage" style="height: 60px; margin-top: 3px" />
+                    </div>
+                    <div style="margin-left: 13px; margin-top: 3px">
+                      <div class="div-zoom">
+                        <a>{{ row.goodsName }}</a>
+                      </div>
                     </div>
                   </div>
-                </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="memberName" label="会员名称" width="140" />
+              <el-table-column prop="storeName" label="商家名称" min-width="100" show-overflow-tooltip />
+              <el-table-column label="售后金额" width="110">
+                <template #default="{ row }">
+                  <priceColorScheme v-if="row" :value="row.applyRefundPrice" :color="$mainColor" />
+                </template>
+              </el-table-column>
+              <el-table-column label="售后类型" width="100">
+                <template #default="{ row }">
+                  <span v-if="row">{{ serviceTypeText(row.serviceType) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="售后状态" width="110">
+                <template #default="{ row }">
+                  <span v-if="row">{{ serviceStatusText(row.serviceStatus) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="createTime" label="申请时间" min-width="145" show-overflow-tooltip />
+            </el-table>
 
-              </template>
-
-              <!-- 订单详情格式化 -->
-              <template slot="orderSlot" slot-scope="scope">
-                <a
-                  @click="$router.push({name: 'order-detail',query: {sn: scope.row.orderSn}})">{{scope.row.orderSn}}</a>
-              </template>
-
-              <!-- 售后单详情格式化 -->
-              <template slot="refundGoodsOrderSlot" slot-scope="scope">
-                <a @click="$router.push({name: 'after-order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
-              </template>
-            </Table>
-
-            <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
-              <Page
-                :current="refundGoodsOrderSearchForm.pageNumber"
+            <div class="mt_10" style="display: flex; justify-content: flex-end; margin-top: 10px">
+              <el-pagination
+                v-model:current-page="refundGoodsOrderSearchForm.pageNumber"
+                v-model:page-size="refundGoodsOrderSearchForm.pageSize"
+                :page-sizes="[20, 50, 100]"
                 :total="refundGoodsOrderTotal"
-                :page-size="refundGoodsOrderSearchForm.pageSize"
-                @on-change="refundGoodsOrderChangePage"
-                @on-page-size-change="refundGoodsOrderChangePageSize"
-                :page-size-opts="[20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper"
                 size="small"
-                show-total
-                show-elevator
-                show-sizer
-              ></Page>
-            </Row>
+                @current-change="refundGoodsOrderChangePage"
+                @size-change="refundGoodsOrderChangePageSize"
+              />
+            </div>
           </div>
-        </TabPane>
-        <TabPane label="TA的退款单" name="refund">
-          <Row>
-            <Form ref="refundOrderSearchForm" :model="refundOrderSearchForm" inline :label-width="70"
-                  class="search-form">
-              <Form-item label="订单编号" prop="orderSn">
-                <Input
-                  type="text"
-                  v-model="refundOrderSearchForm.orderSn"
-                  placeholder="请输入订单编号"
-                  clearable
-                  style="width: 200px"
-                />
-              </Form-item>
-              <Form-item label="售后单号" prop="sn">
-                <Input
-                  type="text"
-                  v-model="refundOrderSearchForm.sn"
-                  placeholder="请输入售后单号"
-                  clearable
-                  style="width: 200px"
-                />
-              </Form-item>
-              <Form-item label="售后状态">
-                <Select v-model="refundOrderSearchForm.serviceStatus" placeholder="全部" clearable
-                        style="width: 200px">
-                  <Option value="APPLY">申请售后</Option>
-                  <Option value="PASS">通过售后</Option>
-                  <Option value="REFUSE">拒绝售后</Option>
-                  <Option value="BUYER_RETURN">买家退货，待卖家收货</Option>
-                  <Option value="SELLER_RE_DELIVERY">商家换货/补发</Option>
-                  <Option value="SELLER_CONFIRM">卖家确认收货</Option>
-                  <Option value="SELLER_TERMINATION">卖家终止售后</Option>
-                  <Option value="BUYER_CONFIRM">买家确认收货</Option>
-                  <Option value="BUYER_CANCEL">买家取消售后</Option>
-                  <Option value="COMPLETE">完成售后</Option>
-                </Select>
-              </Form-item>
-              <Form-item label="申请时间">
-                <DatePicker
-                  v-model="selectDate"
-                  type="datetimerange"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  clearable
-                  @on-change="selectRefundDateRange"
-                  placeholder="选择起始时间"
-                  style="width: 200px"
-                  transfer
-                ></DatePicker>
-              </Form-item>
-              <Form-item label="商家名称" prop="storeName">
-                <Input
-                  type="text"
-                  v-model="refundOrderSearchForm.storeName"
-                  placeholder="请输入商家名称"
-                  clearable
-                  style="width: 200px"
-                />
-              </Form-item>
-              <Form-item label="会员名称" prop="memberName">
-                <Input
-                  type="text"
-                  v-model="refundOrderSearchForm.memberName"
-                  placeholder="请输入会员名称"
-                  clearable
-                  style="width: 200px"
-                />
-              </Form-item>
-              <Button @click="getRefundOrder" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-            </Form>
-          </Row>
-          <div style="min-height: 180px">
-            <Table
-              :loading="loading"
-              border
-              :columns="refundGoodsOrderColumns"
-              :data="refundOrderData"
-              ref="table"
-              class="mt_10"
-            >
-              <!-- 商品栏目格式化 -->
-              <template slot="goodsSlot" slot-scope="scope">
-                <div style="margin-top: 5px;height: 80px; display: flex;">
-                  <div style="">
-                    <img :src="scope.row.goodsImage" style="height: 60px;margin-top: 3px">
-                  </div>
+        </el-tab-pane>
 
-                  <div style="margin-left: 13px;margin-top: 3px;">
-                    <div class="div-zoom">
-                      <a>{{scope.row.goodsName}}</a>
+        <el-tab-pane label="TA的退款单" name="refund">
+          <el-form
+            ref="refundOrderSearchForm"
+            :model="refundOrderSearchForm"
+            inline
+            label-width="70px"
+            class="search-form"
+          >
+            <el-form-item label="订单编号" prop="orderSn">
+              <el-input
+                v-model="refundOrderSearchForm.orderSn"
+                placeholder="请输入订单编号"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item label="售后单号" prop="sn">
+              <el-input
+                v-model="refundOrderSearchForm.sn"
+                placeholder="请输入售后单号"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item label="售后状态">
+              <el-select
+                v-model="refundOrderSearchForm.serviceStatus"
+                placeholder="全部"
+                clearable
+                style="width: 200px"
+              >
+                <el-option label="申请售后" value="APPLY" />
+                <el-option label="通过售后" value="PASS" />
+                <el-option label="拒绝售后" value="REFUSE" />
+                <el-option label="买家退货，待卖家收货" value="BUYER_RETURN" />
+                <el-option label="商家换货/补发" value="SELLER_RE_DELIVERY" />
+                <el-option label="卖家确认收货" value="SELLER_CONFIRM" />
+                <el-option label="卖家终止售后" value="SELLER_TERMINATION" />
+                <el-option label="买家确认收货" value="BUYER_CONFIRM" />
+                <el-option label="买家取消售后" value="BUYER_CANCEL" />
+                <el-option label="完成售后" value="COMPLETE" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="申请时间">
+              <el-date-picker
+                v-model="selectDate"
+                type="datetimerange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                clearable
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                placeholder="选择起始时间"
+                style="width: 360px"
+                @change="selectRefundDateRange"
+              />
+            </el-form-item>
+            <el-form-item label="商家名称" prop="storeName">
+              <el-input
+                v-model="refundOrderSearchForm.storeName"
+                placeholder="请输入商家名称"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item label="会员名称" prop="memberName">
+              <el-input
+                v-model="refundOrderSearchForm.memberName"
+                placeholder="请输入会员名称"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" class="search-btn" @click="getRefundOrder">搜索</el-button>
+            </el-form-item>
+          </el-form>
+
+          <div style="min-height: 180px">
+            <el-table v-loading="loading" border :data="refundOrderData" class="mt_10" style="width: 100%">
+              <el-table-column label="售后服务单号" min-width="140">
+                <template #default="{ row }">
+                  <a
+                    v-if="row"
+                    class="link-text"
+                    @click="$router.push({ name: 'after-order-detail', query: { sn: row.sn } })"
+                  >{{ row.sn }}</a>
+                </template>
+              </el-table-column>
+              <el-table-column label="订单编号" min-width="120">
+                <template #default="{ row }">
+                  <a
+                    v-if="row"
+                    class="link-text"
+                    @click="$router.push({ name: 'order-detail', query: { sn: row.orderSn } })"
+                  >{{ row.orderSn }}</a>
+                </template>
+              </el-table-column>
+              <el-table-column label="商品" min-width="300">
+                <template #default="{ row }">
+                  <div v-if="row" style="margin-top: 5px; height: 80px; display: flex">
+                    <div>
+                      <img :src="row.goodsImage" style="height: 60px; margin-top: 3px" />
+                    </div>
+                    <div style="margin-left: 13px; margin-top: 3px">
+                      <div class="div-zoom">
+                        <a>{{ row.goodsName }}</a>
+                      </div>
                     </div>
                   </div>
-                </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="memberName" label="会员名称" width="140" />
+              <el-table-column prop="storeName" label="商家名称" min-width="100" show-overflow-tooltip />
+              <el-table-column label="售后金额" width="110">
+                <template #default="{ row }">
+                  <priceColorScheme v-if="row" :value="row.applyRefundPrice" :color="$mainColor" />
+                </template>
+              </el-table-column>
+              <el-table-column label="售后类型" width="100">
+                <template #default="{ row }">
+                  <span v-if="row">{{ serviceTypeText(row.serviceType) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="售后状态" width="110">
+                <template #default="{ row }">
+                  <span v-if="row">{{ serviceStatusText(row.serviceStatus) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="createTime" label="申请时间" min-width="145" show-overflow-tooltip />
+            </el-table>
 
-              </template>
-
-              <!-- 订单详情格式化 -->
-              <template slot="orderSlot" slot-scope="scope">
-                <a
-                  @click="$router.push({name: 'order-detail',query: {sn: scope.row.orderSn}})">{{scope.row.orderSn}}</a>
-              </template>
-
-              <!-- 售后单详情格式化 -->
-              <template slot="refundGoodsOrderSlot" slot-scope="scope">
-                <a @click="$router.push({name: 'after-order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
-              </template>
-            </Table>
-
-            <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
-              <Page
-                :current="refundOrderSearchForm.pageNumber"
+            <div class="mt_10" style="display: flex; justify-content: flex-end; margin-top: 10px">
+              <el-pagination
+                v-model:current-page="refundOrderSearchForm.pageNumber"
+                v-model:page-size="refundOrderSearchForm.pageSize"
+                :page-sizes="[20, 50, 100]"
                 :total="refundOrderTotal"
-                :page-size="refundOrderSearchForm.pageSize"
-                @on-change="refundOrderChangePage"
-                @on-page-size-change="refundOrderChangePageSize"
-                :page-size-opts="[20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper"
                 size="small"
-                show-total
-                show-elevator
-                show-sizer
-              ></Page>
-            </Row>
+                @current-change="refundOrderChangePage"
+                @size-change="refundOrderChangePageSize"
+              />
+            </div>
           </div>
-        </TabPane>
-      </Tabs>
-    </Card>
-
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
   </div>
 </template>
 
 <script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+import { getCategoryTree } from "@/api/goods";
+import * as API_Store from "@/api/shops.js";
+import * as API_Order from "@/api/order.js";
 
-  import ossManage from "@/views/sys/oss-manage/ossManage";
-  import * as RegExp from '@/libs/RegExp.js';
-  import {getCategoryTree} from "@/api/goods";
-  import * as API_Store from "@/api/shops.js";
-  import * as API_Order from "@/api/order.js";
-
-
-  export default {
-    name: "member",
-    components: {
-
-      ossManage,
+export default {
+  name: "member",
+  components: {
+    ossManage,
+  },
+  data() {
+    return {
+      id: "",
+      activeTab: "order",
+      categories: [],
+      loading: true,
+      storeInfo: {},
+      checkAllGroup: [],
+      selectDate: null,
+      orderData: [],
+      orderTotal: 0,
+      orderSearchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        payStatus: "",
+        orderSn: "",
+        orderType: "",
+      },
+      refundGoodsOrderData: [],
+      refundGoodsOrderTotal: 0,
+      refundGoodsOrderSearchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+      },
+      refundOrderSearchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+      },
+      refundOrderData: [],
+      refundOrderTotal: 0,
+    };
+  },
+  computed: {
+    displayCategories() {
+      if (!this.categories?.length || !this.checkAllGroup?.length) {
+        return [];
+      }
+      const selected = new Set(this.checkAllGroup.map(String));
+      return this.categories.filter(
+        (item) => item?.id != null && selected.has(String(item.id))
+      );
     },
-    data() {
-      return {
-        id: "",//店铺id
-        categories: [], //店铺静音范围
-        loading: true, // 表单加载状态
-        storeInfo: {},//店铺信息
-        checkAllGroup: [], //选中的经营分类
-        selectDate: null, // 申请时间
-
-        orderColumns: [
-          {
-            title: "订单编号",
-            key: "sn",
-            minWidth: 100,
-            tooltip: true,
-            slot: "orderSlot",
-          },
-          {
-            title: "订单金额",
-            key: "flowPrice",
-            width: 140,
-            render: (h, params) => {
-              return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
-            },
-
-          },
-          {
-            title: "订单类型",
-            key: "orderType",
-            width: 100,
-            render: (h, params) => {
-              if (params.row.orderType == "NORMAL") {
-                return h('div', [h('span', {}, '普通订单'),]);
-              } else if (params.row.orderType == "VIRTUAL") {
-                return h('div', [h('span', {}, '虚拟订单'),]);
-              } else if (params.row.orderType == "GIFT") {
-                return h('div', [h('span', {}, '赠品订单'),]);
-              } else if (params.row.orderType == "PINTUAN") {
-                return h('div', [h('span', {}, '拼团订单'),]);
-              }
-
-            }
-          },
-          {
-            title: "来源",
-            key: "clientType",
-            width: 80,
-            render: (h, params) => {
-              if (params.row.clientType == "H5") {
-                return h("div",{},"移动端");
-              }else if(params.row.clientType == "PC") {
-                return h("div",{},"PC端");
-              }else if(params.row.clientType == "WECHAT_MP") {
-                return h("div",{},"小程序端");
-              }else if(params.row.clientType == "APP") {
-                return h("div",{},"移动应用端");
-              }
-              else{
-                return h("div",{},params.row.clientType);
-              }
-            },
-          },
-          {
-            title: "订单状态",
-            key: "orderStatus",
-            width: 95,
-            render: (h, params) => {
-              if (params.row.orderStatus == "UNPAID") {
-                return h('div', [h('span', {}, '未付款'),]);
-              } else if (params.row.orderStatus == "PAID") {
-                return h('div', [h('span', {}, '已付款'),]);
-              } else if (params.row.orderStatus == "UNDELIVERED") {
-                return h('div', [h('span', {}, '待发货'),]);
-              } else if (params.row.orderStatus == "DELIVERED") {
-                return h('div', [h('span', {}, '已发货'),]);
-              } else if (params.row.orderStatus == "COMPLETED") {
-                return h('div', [h('span', {}, '已完成'),]);
-              } else if (params.row.orderStatus == "TAKE") {
-                return h('div', [h('span', {}, '待核验'),]);
-              } else if (params.row.orderStatus == "CANCELLED") {
-                return h('div', [h('span', {}, '已关闭'),]);
-              }
-            }
-          },
-          {
-            title: "支付状态",
-            key: "payStatus",
-            width: 95,
-            render: (h, params) => {
-              if (params.row.payStatus == "UNPAID") {
-                return h('div', [h('span', {}, '未付款'),]);
-              } else if (params.row.payStatus == "PAID") {
-                return h('div', [h('span', {}, '已付款'),]);
-              }
-            }
-          },
-
-          {
-            title: "售后状态",
-            key: "groupAfterSaleStatus",
-            width: 100,
-            render: (h, params) => {
-              if (params.row.groupAfterSaleStatus == "NEW") {
-                return h('div', [h('span', {}, '未申请'),]);
-              } else if (params.row.groupAfterSaleStatus == "NOT_APPLIED") {
-                return h('div', [h('span', {}, '未申请'),]);
-              } else if (params.row.groupAfterSaleStatus == "ALREADY_APPLIED") {
-                return h('div', [h('span', {}, '已申请'),]);
-              } else if (params.row.groupAfterSaleStatus == "EXPIRED") {
-                return h('div', [h('span', {}, '已失效'),]);
-              }
-            }
-          },
-          {
-            title: "投诉状态",
-            key: "groupComplainStatus",
-            width: 95,
-            render: (h, params) => {
-              if (params.row.groupComplainStatus == "NEW") {
-                return h('div', [h('span', {}, '未申请'),]);
-              } else if (params.row.groupComplainStatus == "NO_APPLY") {
-                return h('div', [h('span', {}, '未申请'),]);
-              } else if (params.row.groupComplainStatus == "APPLYING") {
-                return h('div', [h('span', {}, '申请中'),]);
-              } else if (params.row.groupComplainStatus == "COMPLETE") {
-                return h('div', [h('span', {}, '已完成'),]);
-              } else if (params.row.groupComplainStatus == "EXPIRED") {
-                return h('div', [h('span', {}, '已失效'),]);
-              } else if (params.row.groupComplainStatus == "CANCEL") {
-                return h('div', [h('span', {}, '取消投诉'),]);
-              }
-            }
-          },
-          {
-            title: "购买店铺",
-            key: "storeName",
-            width: 180,
-            tooltip: true
-          },
-          {
-            title: "下单时间",
-            key: "createTime",
-            width: 170,
-          },
-
-        ],
-        orderData: [],//订单数据
-        orderTotal: 0,//订单总条数
-        //TA的订单form
-        orderSearchForm: {
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          payStatus: "",
-          orderSn: "",
-          orderType: "",
-        },
-        refundGoodsOrderColumns: [
-          {
-            title: "售后服务单号",
-            key: "sn",
-            minWidth: 140,
-            slot: "refundGoodsOrderSlot",
-
-          },
-          {
-            title: "订单编号",
-            key: "orderSn",
-            minWidth: 120,
-            slot: "orderSlot",
-          },
-          {
-            title: "商品",
-            key: "goodsName",
-            minWidth: 300,
-            tooltip: true,
-            slot: "goodsSlot",
-          },
-          {
-            title: "会员名称",
-            key: "memberName",
-            width: 140,
-          },
-          {
-            title: "商家名称",
-            key: "storeName",
-            minWidth: 100,
-            tooltip: true
-          },
-          {
-            title: "售后金额",
-            key: "applyRefundPrice",
-            width: 110,
-            render: (h, params) => {
-              return h("priceColorScheme", {props:{value:params.row.applyRefundPrice,color:this.$mainColor}} );
-            },
-
-          },
-          {
-            title: "售后类型",
-            key: "serviceType",
-            width: 100,
-            render: (h, params) => {
-              if (params.row.serviceType == "RETURN_MONEY") {
-                return h('div', [h('span', {}, '退款'),]);
-              } else if (params.row.serviceType == "RETURN_GOODS") {
-                return h('div', [h('span', {}, '退货'),]);
-              } else if (params.row.serviceType == "EXCHANGE_GOODS") {
-                return h('div', [h('span', {}, '换货'),]);
-              }
-            }
-          },
-
-          {
-            title: "售后状态",
-            key: "serviceStatus",
-            width: 110,
-            render: (h, params) => {
-              if (params.row.serviceStatus == "APPLY") {
-                return h('div', [h('span', {}, '申请中'),]);
-              } else if (params.row.serviceStatus == "PASS") {
-                return h('div', [h('span', {}, '通过售后'),]);
-              } else if (params.row.serviceStatus == "REFUSE") {
-                return h('div', [h('span', {}, '拒绝售后'),]);
-              } else if (params.row.serviceStatus == "BUYER_RETURN") {
-                return h('div', [h('span', {}, '买家退货，待卖家收货'),]);
-              } else if (params.row.serviceStatus == "SELLER_RE_DELIVERY") {
-                return h('div', [h('span', {}, '商家换货/补发'),]);
-              } else if (params.row.serviceStatus == "SELLER_CONFIRM") {
-                return h('div', [h('span', {}, '卖家确认收货'),]);
-              } else if (params.row.serviceStatus == "SELLER_TERMINATION") {
-                return h('div', [h('span', {}, '卖家终止售后'),]);
-              } else if (params.row.serviceStatus == "BUYER_CONFIRM") {
-                return h('div', [h('span', {}, '买家确认收货'),]);
-              } else if (params.row.serviceStatus == "BUYER_CANCEL") {
-                return h('div', [h('span', {}, '买家取消售后'),]);
-              } else if (params.row.serviceStatus == "COMPLETE") {
-                return h('div', [h('span', {}, '完成售后'),]);
-              } else if (params.row.serviceStatus == "WAIT_REFUND") {
-                return h('div', [h('span', {}, '待平台退款'),]);
-              }
-            }
-          },
-          {
-            title: "申请时间",
-            key: "createTime",
-            minWidth: 145,
-            tooltip: true
-          },
-        ],
-        refundGoodsOrderData: [],//售后单数据
-        refundGoodsOrderTotal: 0,//售后单总条数
-        //TA的退货单form
-        refundGoodsOrderSearchForm: {
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-        },
-        //TA的退款单form
-        refundOrderSearchForm: {
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-        },
-        refundOrderData: [],//售后单数据
-        refundOrderTotal: 0,//售后单总条数
+  },
+  methods: {
+    orderTypeText(v) {
+      const map = {
+        NORMAL: "普通订单",
+        VIRTUAL: "虚拟订单",
+        GIFT: "赠品订单",
+        PINTUAN: "拼团订单",
       };
+      return map[v] || v || "";
     },
-    methods: {
-      init() {
-        //查店铺基本信息
-        this.getStoreInfo();
-        //查询店铺分类
-        this.getCategories();
-        //查询订单信息
+    clientTypeText(v) {
+      const map = {
+        H5: "移动端",
+        PC: "PC端",
+        WECHAT_MP: "小程序端",
+        APP: "移动应用端",
+      };
+      return map[v] || v || "";
+    },
+    orderStatusText(v) {
+      const map = {
+        UNPAID: "未付款",
+        PAID: "已付款",
+        UNDELIVERED: "待发货",
+        DELIVERED: "已发货",
+        COMPLETED: "已完成",
+        TAKE: "待核验",
+        CANCELLED: "已关闭",
+      };
+      return map[v] || v || "";
+    },
+    payStatusText(v) {
+      const map = {
+        UNPAID: "未付款",
+        PAID: "已付款",
+      };
+      return map[v] || v || "";
+    },
+    groupAfterSaleStatusText(v) {
+      const map = {
+        NEW: "未申请",
+        NOT_APPLIED: "未申请",
+        ALREADY_APPLIED: "已申请",
+        EXPIRED: "已失效",
+      };
+      return map[v] || v || "";
+    },
+    groupComplainStatusText(v) {
+      const map = {
+        NEW: "未申请",
+        NO_APPLY: "未申请",
+        APPLYING: "申请中",
+        COMPLETE: "已完成",
+        EXPIRED: "已失效",
+        CANCEL: "取消投诉",
+      };
+      return map[v] || v || "";
+    },
+    serviceTypeText(type) {
+      const map = {
+        RETURN_MONEY: "退款",
+        RETURN_GOODS: "退货",
+        EXCHANGE_GOODS: "换货",
+      };
+      return map[type] || type || "";
+    },
+    serviceStatusText(status) {
+      const map = {
+        APPLY: "申请中",
+        PASS: "通过售后",
+        REFUSE: "拒绝售后",
+        BUYER_RETURN: "买家退货，待卖家收货",
+        SELLER_RE_DELIVERY: "商家换货/补发",
+        SELLER_CONFIRM: "卖家确认收货",
+        SELLER_TERMINATION: "卖家终止售后",
+        BUYER_CONFIRM: "买家确认收货",
+        BUYER_CANCEL: "买家取消售后",
+        COMPLETE: "完成售后",
+        WAIT_REFUND: "待平台退款",
+      };
+      return map[status] || status || "";
+    },
+    init() {
+      this.getStoreInfo();
+      this.getCategories();
+      this.getOrderData();
+    },
+    storeInfoChange(v) {
+      if (v == "order") {
         this.getOrderData();
-      },
-      //会员信息tab改变事件
-      storeInfoChange(v) {
-        if (v == "order") {
-          this.getOrderData();
-        }
-        if (v == "refundGoods") {
-          this.getRefundGoodsOrderData();
-        }
-        if(v == "refund"){
-          this.getRefundOrder();
-        }
-      },
-      //查询会员信息
-      getStoreInfo() {
-        API_Store.getShopDetailData(this.id).then((res) => {
-          this.$set(this, "storeInfo", res.result);
-          //因switch开关需要用到true或者false 所以进行一次格式化
-          this.storeInfo.storeDisable = this.storeInfo.storeDisable === "OPEN" ? true : false
-          if(this.storeInfo.goodsManagementCategory != null){
-            this.checkAllGroup = this.storeInfo.goodsManagementCategory.split(",");
-          }
-          this.storeInfo.legalPhoto = this.storeInfo.legalPhoto.split(",");
-        });
-      },
-      //店铺状态改变事件
-      shopStatusChange(v) {
-        if (v) {
-          API_Store.enableBrand(this.id).then(res => {
-          });
-        } else {
-          API_Store.disableShop(this.id).then(res => {
-          });
-        }
-      },
-      //查询TA的订单
-      getOrderData() {
-        this.loading = true;
-        this.orderSearchForm.storeId = this.id
-        API_Order.getOrderList(this.orderSearchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.orderData = res.result.records;
-            this.orderTotal = res.result.total;
-          }
-        });
-        this.loading = false;
-      },
-      //查询TA的售后单
-      getRefundOrder() {
-        this.loading = true;
-        this.refundOrderSearchForm.storeId = this.id
-        this.refundOrderSearchForm.serviceType = "RETURN_MONEY"
-        API_Order.getAfterSaleOrderPage(this.refundOrderSearchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.refundOrderData = res.result.records;
-            this.refundOrderTotal = res.result.total;
-          }
-        });
-        this.loading = false;
-      },
-      //查询TA的售后单
-      getRefundGoodsOrderData() {
-        this.loading = true;
-        this.refundGoodsOrderSearchForm.storeId = this.id
-        this.refundGoodsOrderSearchForm.serviceType = "RETURN_GOODS"
-        API_Order.getAfterSaleOrderPage(this.refundGoodsOrderSearchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.refundGoodsOrderData = res.result.records;
-            this.refundGoodsOrderTotal = res.result.total;
-          }
-        });
-        this.loading = false;
-      },
-      //查询分类
-      getCategories() {
-        getCategoryTree().then((res) => {
-          if (res.success) {
-            this.categories = res.result;
-          }
-        });
-      },
-      //售后单页数变化
-      refundGoodsOrderChangePage(v) {
-        this.refundGoodsOrderSearchForm.pageNumber = v;
-        this.getRefundGoodsOrderData()
       }
-      ,
-      //售后单页数变化
-      refundGoodsOrderChangePageSize(v) {
-        this.refundGoodsOrderSearchForm.pageSize = v;
-        this.refundGoodsOrderSearchForm.pageNumber = 1;
+      if (v == "refundGoods") {
         this.getRefundGoodsOrderData();
-      },
-      //退款单页数变化
-      refundOrderChangePage(v) {
-        this.refundOrderSearchForm.pageNumber = v;
-        this.getRefundOrder()
       }
-      ,
-      //售后单页数变化
-      refundOrderChangePageSize(v) {
-        this.refundOrderSearchForm.pageSize = v;
-        this.refundOrderSearchForm.pageNumber = 1;
+      if (v == "refund") {
         this.getRefundOrder();
-      },
-      //订单记录页数变化
-      orderChangePage(v) {
-        this.orderSearchForm.pageNumber = v;
-        this.getOrderData()
       }
-      ,
-      //订单记录页数变化
-      orderChangePageSize(v) {
-        this.orderSearchForm.pageSize = v;
-        this.orderSearchForm.pageNumber = 1;
-        this.getOrderData();
-      },
-      // 起止时间格式化
-      selectDateRange(v) {
-        if (v) {
-          this.orderSearchForm.startDate = v[0];
-          this.orderSearchForm.endDate = v[1];
-        }
-      },
-      // 起止时间格式化
-      selectRefundGoodsDateRange(v) {
-        if (v) {
-          this.refundGoodsOrderSearchForm.startDate = v[0];
-          this.refundGoodsOrderSearchForm.endDate = v[1];
-        }
-      },
-      // 起止时间格式化
-      selectRefundDateRange(v) {
-        if (v) {
-          this.refundOrderSearchForm.startDate = v[0];
-          this.refundOrderSearchForm.endDate = v[1];
-        }
-      },
     },
-    mounted() {
-      this.id = this.$route.query.id;
-      this.init();
-    }
-  };
+    getStoreInfo() {
+      API_Store.getShopDetailData(this.id).then((res) => {
+        this.storeInfo = res.result;
+        this.storeInfo.storeDisable = this.storeInfo.storeDisable === "OPEN" ? true : false;
+        if (this.storeInfo.goodsManagementCategory != null) {
+          this.checkAllGroup = this.storeInfo.goodsManagementCategory
+            .split(",")
+            .filter(Boolean);
+        }
+        this.storeInfo.legalPhoto = this.storeInfo.legalPhoto.split(",");
+      });
+    },
+    shopStatusChange(v) {
+      if (v) {
+        API_Store.enableBrand(this.id).then((res) => {});
+      } else {
+        API_Store.disableShop(this.id).then((res) => {});
+      }
+    },
+    getOrderData() {
+      this.loading = true;
+      this.orderSearchForm.storeId = this.id;
+      API_Order.getOrderList(this.orderSearchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.orderData = res.result.records;
+          this.orderTotal = res.result.total;
+        }
+      });
+      this.loading = false;
+    },
+    getRefundOrder() {
+      this.loading = true;
+      this.refundOrderSearchForm.storeId = this.id;
+      this.refundOrderSearchForm.serviceType = "RETURN_MONEY";
+      API_Order.getAfterSaleOrderPage(this.refundOrderSearchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.refundOrderData = res.result.records;
+          this.refundOrderTotal = res.result.total;
+        }
+      });
+      this.loading = false;
+    },
+    getRefundGoodsOrderData() {
+      this.loading = true;
+      this.refundGoodsOrderSearchForm.storeId = this.id;
+      this.refundGoodsOrderSearchForm.serviceType = "RETURN_GOODS";
+      API_Order.getAfterSaleOrderPage(this.refundGoodsOrderSearchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.refundGoodsOrderData = res.result.records;
+          this.refundGoodsOrderTotal = res.result.total;
+        }
+      });
+      this.loading = false;
+    },
+    getCategories() {
+      getCategoryTree().then((res) => {
+        if (res.success) {
+          this.categories = res.result;
+        }
+      });
+    },
+    refundGoodsOrderChangePage(v) {
+      this.refundGoodsOrderSearchForm.pageNumber = v;
+      this.getRefundGoodsOrderData();
+    },
+    refundGoodsOrderChangePageSize(v) {
+      this.refundGoodsOrderSearchForm.pageSize = v;
+      this.refundGoodsOrderSearchForm.pageNumber = 1;
+      this.getRefundGoodsOrderData();
+    },
+    refundOrderChangePage(v) {
+      this.refundOrderSearchForm.pageNumber = v;
+      this.getRefundOrder();
+    },
+    refundOrderChangePageSize(v) {
+      this.refundOrderSearchForm.pageSize = v;
+      this.refundOrderSearchForm.pageNumber = 1;
+      this.getRefundOrder();
+    },
+    orderChangePage(v) {
+      this.orderSearchForm.pageNumber = v;
+      this.getOrderData();
+    },
+    orderChangePageSize(v) {
+      this.orderSearchForm.pageSize = v;
+      this.orderSearchForm.pageNumber = 1;
+      this.getOrderData();
+    },
+    selectDateRange(v) {
+      if (v) {
+        this.orderSearchForm.startDate = v[0];
+        this.orderSearchForm.endDate = v[1];
+      }
+    },
+    selectRefundGoodsDateRange(v) {
+      if (v) {
+        this.refundGoodsOrderSearchForm.startDate = v[0];
+        this.refundGoodsOrderSearchForm.endDate = v[1];
+      }
+    },
+    selectRefundDateRange(v) {
+      if (v) {
+        this.refundOrderSearchForm.startDate = v[0];
+        this.refundOrderSearchForm.endDate = v[1];
+      }
+    },
+  },
+  mounted() {
+    this.id = this.$route.query.id;
+    this.init();
+  },
+};
 </script>
 <style lang="scss" scoped>
-  @import "shopDetail.scss";
+@import "shopDetail.scss";
 </style>
diff --git a/manager/src/views/seller/shop/shopList.vue b/manager/src/views/seller/shop/shopList.vue
index 1c1008e6..47fc3e5e 100644
--- a/manager/src/views/seller/shop/shopList.vue
+++ b/manager/src/views/seller/shop/shopList.vue
@@ -1,364 +1,209 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="会员名称" prop="memberName">
-          <Input
-            type="text"
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
             v-model="searchForm.memberName"
             placeholder="请输入会员名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="店铺名称" prop="storeName">
-          <Input
-            type="text"
+        </el-form-item>
+        <el-form-item label="店铺名称" prop="storeName">
+          <el-input
             v-model="searchForm.storeName"
             placeholder="请输入店铺名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="店铺状态">
-          <Select v-model="searchForm.storeDisable" clearable style="width: 240px">
-            <Option value="OPEN">开启中</Option>
-            <Option value="CLOSED">已关闭</Option>
-            <!-- <Option value="APPLY">申请中</Option> -->
-            <Option value="APPLYING">审核中</Option>
-            <Option value="REFUSED">审核拒绝</Option>
-          </Select>
-        </Form-item>
-        <Form-item label="创建时间" prop="createTime">
-          <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 240px"></DatePicker>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-      </Form>
-      </Card>
-    <Card>
-      <Row class="operation padding-row">
-        <Button @click="add" type="primary">添加</Button>
-      </Row>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table"></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]"
-          size="small" show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
+        </el-form-item>
+        <el-form-item label="店铺状态">
+          <el-select v-model="searchForm.storeDisable" clearable style="width: 240px">
+            <el-option label="开启中" value="OPEN" />
+            <el-option label="已关闭" value="CLOSED" />
+            <el-option label="审核中" value="APPLYING" />
+            <el-option label="审核拒绝" value="REFUSED" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="创建时间" prop="createTime">
+          <el-date-picker
+            v-model="selectDate"
+            type="datetimerange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            clearable
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            style="width: 360px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="add">添加</el-button>
+      </div>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column prop="storeName" label="店铺名称" min-width="120" align="left" />
+        <el-table-column prop="memberName" label="会员名称" min-width="130" show-overflow-tooltip />
+        <el-table-column label="店铺地址" width="300" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-tag v-if="row" type="info">{{ row.storeAddressPath || "暂未填写" }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否自营" width="120" align="left">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.selfOperated ? "自营" : "非自营" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="店铺状态" width="130" align="left">
+          <template #default="{ row }">
+            <span v-if="row">{{ storeDisableText(row.storeDisable) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="170" align="left" />
+        <el-table-column label="操作" width="220" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <template v-if="row.storeDisable === 'APPLYING'">
+                <a class="link-text" @click="audit(row)">审核</a>
+                <span class="op-split">|</span>
+                <a class="link-text" @click="edit(row)">修改</a>
+              </template>
+              <template v-else>
+                <a v-if="selectedShop" class="link-text" @click="callback(row)">选择</a>
+                <span v-if="selectedShop" class="op-split">|</span>
+                <a class="link-text" @click="detail(row)">查看</a>
+                <span class="op-split">|</span>
+                <a class="link-text" @click="edit(row)">修改</a>
+                <template v-if="row.storeDisable === 'OPEN' || row.storeDisable === 'CLOSED'">
+                  <span class="op-split">|</span>
+                  <a v-if="row.storeDisable === 'OPEN'" class="link-text" @click="disable(row)">关闭</a>
+                  <a v-else-if="row.storeDisable === 'CLOSED'" class="link-text" @click="enable(row)">开启</a>
+                </template>
+              </template>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
-import {
-  getShopListData,
-  disableShop,
-  enableBrand,
-  shopAudit,
-} from "@/api/shops";
+import { getShopListData, disableShop, enableBrand, shopAudit } from "@/api/shops";
+
 export default {
   name: "shop",
   data() {
     return {
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
       },
-      selectDate: null, // 创建时间
-      columns: [
-        // 表头
-        {
-          title: "店铺名称",
-          key: "storeName",
-          minWidth: 120,
-          align: "left",
-        },
-        {
-          title: "会员名称",
-          key: "memberName",
-          minWidth: 130,
-          tooltip: true
-        },
-        {
-          title: "店铺地址",
-          key: "storeAddressPath",
-          width: 300,
-          tooltip: true,
-          render: (h, params) => {
-            return h(
-              "Tag",
-              {
-
-              },
-              params.row.storeAddressPath ||  "暂未填写"
-            );
-          },
-        },
-        {
-          title: "是否自营",
-          key: "selfOperated",
-          align: "left",
-          width: 120,
-          render: (h, params) => {
-            return h(
-              "Tag",
-              {
-                props: {
-                  color: params.row.selfOperated ? "volcano" : "green",
-                },
-              },
-              params.row.selfOperated  ? "自营" : "非自营"
-            );
-          },
-        },
-
-        {
-          title: "店铺状态",
-          key: "storeDisable",
-          align: "left",
-          width: 130,
-          render: (h, params) => {
-            if (params.row.storeDisable == "OPEN") {
-              return h("Tag", {props: {color: "green",},},"开启中");
-            } else if (params.row.storeDisable == "CLOSED") {
-              return h("Tag", {props: {color: "volcano",},},"已关闭");
-            } else if (params.row.storeDisable == "APPLY") {
-              return h("Tag", {props: {color: "geekblue",},},"申请中");
-            } else if (params.row.storeDisable == "APPLYING") {
-              return h("Tag", {props: {color: "purple",},},"审核中");
-            } else if (params.row.storeDisable == "REFUSED") {
-              return h("Tag", {props: {color: "red",},},"审核拒绝");
-            }
-          },
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          align: "left",
-          width: 170
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 200,
-          align: "center",
-          fixed: "right",
-          render: (h, params) => {
-            let enableOrDisable = "";
-            if (params.row.storeDisable == "OPEN") {
-              enableOrDisable = h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.disable(params.row);
-                    },
-                  },
-                },
-                "关闭"
-              );
-            } else if (params.row.storeDisable == "CLOSED") {
-              enableOrDisable = h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.enable(params.row);
-                    },
-                  },
-                },
-                "开启"
-              );
-            } else if (params.row.storeDisable == "APPLYING") {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.audit(params.row);
-                      },
-                    },
-                  },
-                  "审核"
-                ),
-                h(
-                  "span",
-                  { style: { margin: "0 8px", color: "#dcdee2" } },
-                  "|"
-                ),
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.edit(params.row);
-                      },
-                    },
-                  },
-                  "修改"
-                ),
-              ]);
-            }
-
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    display: this.selectedShop ? "inline-block" : "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.callback(params.row);
-                    },
-                  },
-                },
-                "选择"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2", display: this.selectedShop ? "inline-block" : "none" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.detail(params.row);
-                    },
-                  },
-                },
-                "查看"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.edit(params.row);
-                    },
-                  },
-                },
-                "修改"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              enableOrDisable,
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      selectedShop: false, //用于是否选择店铺
+      selectDate: null,
+      data: [],
+      total: 0,
+      selectedShop: false,
     };
   },
-
   methods: {
-    // 回调给父级
+    storeDisableText(v) {
+      const map = {
+        OPEN: "开启中",
+        CLOSED: "已关闭",
+        APPLY: "申请中",
+        APPLYING: "审核中",
+        REFUSED: "审核拒绝",
+      };
+      return map[v] || v || "-";
+    },
     callback(val) {
       this.$emit("callback", val);
     },
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
-    // 分页 改变页数
     changePageSize(v) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 起止时间分别赋值
     selectDateRange(v) {
-      if (v) {
+      if (v && v.length === 2) {
         this.searchForm.startDate = v[0];
         this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
       }
     },
-    // 获取列表数据
     getDataList() {
-      console.log(this.searchForm)
       this.loading = true;
-      // 带多条件搜索参数获取表单数据 请自行修改接口
-      getShopListData(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-      this.total = this.data.length;
-      this.loading = false;
+      getShopListData(this.searchForm)
+        .then((res) => {
+          if (res.success) {
+            this.data = res.result.records;
+            this.total = res.result.total;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
-    // 添加店铺
     add() {
-      this.$router.push({ path: '/shop-operation'});
+      this.$router.push({ path: "/shop-operation" });
     },
-    // 修改店铺
     edit(v) {
-      this.$router.push({ path: '/shop-operation', query: { shopId: v.id } });
+      this.$router.push({ path: "/shop-operation", query: { shopId: v.id } });
     },
-    // 关闭店铺
     disable(v) {
       this.$Modal.confirm({
         title: "确认关闭",
@@ -375,11 +220,9 @@ export default {
         },
       });
     },
-    //查看店铺详细
-    detail(row){
+    detail(row) {
       this.$router.push({ name: "shop-detail", query: { id: row.id } });
     },
-    // 审核店铺
     audit(v) {
       this.$Modal.confirm({
         title: "审核店铺",
@@ -407,7 +250,6 @@ export default {
         },
       });
     },
-    // 启用店铺
     enable(v) {
       this.$Modal.confirm({
         title: "确认开启",
@@ -430,3 +272,21 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
+.padding-row {
+  margin-bottom: 10px;
+}
+.mt_10 {
+  margin-top: 10px;
+}
+</style>
diff --git a/manager/src/views/seller/shop/shopOperation.vue b/manager/src/views/seller/shop/shopOperation.vue
index 4c7426fb..64613c79 100644
--- a/manager/src/views/seller/shop/shopOperation.vue
+++ b/manager/src/views/seller/shop/shopOperation.vue
@@ -1,89 +1,79 @@
 <template>
   <div>
-    <Card>
-      <Button class="mb_10" v-if="shopForm.storeDisable === 'APPLYING'" type="primary" @click="auditHandler">审核</Button>
-      <Tabs v-model="tabName" :animated="false" style="overflow: visible">
-        <Form
-          ref="shopForm"
-          :model="shopForm"
-          :label-width="130"
-          label-position="right"
-          :rules="shopValidate"
-          @on-validate="formValidate"
-        >
-          <TabPane label="基本信息" class="tab" name="base">
-            <Divider orientation="left">基本信息</Divider>
+    <el-card>
+      <el-button
+        class="mb_10"
+        v-if="shopForm.storeDisable === 'APPLYING'"
+        type="primary"
+        @click="auditHandler"
+        >审核</el-button
+      >
+      <el-form
+        ref="shopForm"
+        :model="shopForm"
+        label-width="130px"
+        label-position="right"
+        :rules="shopValidate"
+      >
+        <el-tabs v-model="tabName" style="overflow: visible">
+          <el-tab-pane label="基本信息" class="tab" name="base">
+            <el-divider content-position="left">基本信息</el-divider>
             <!-- 遮罩层  -->
             <div v-if="isRead" class="mask">只读不可修改</div>
             <div>
-              <FormItem label="会员名称" prop="memberName">
+              <el-form-item label="会员名称" prop="memberName">
                 <div class="item">
-                  <Input disabled v-model="shopForm.memberName" />
-                  <Button type="default" @click="selectMember()" v-if="!$route.query.shopId"
-                    >选择会员</Button
+                  <el-input disabled v-model="shopForm.memberName" />
+                  <el-button type="default" @click="selectMember()" v-if="!$route.query.shopId"
+                    >选择会员</el-button
                   >
                 </div>
-              </FormItem>
-              <FormItem label="店铺名称" prop="storeName">
-                <Input v-model="shopForm.storeName" clearable style="width: 350px" />
-              </FormItem>
+              </el-form-item>
+              <el-form-item label="店铺名称" prop="storeName">
+                <el-input v-model="shopForm.storeName" clearable style="width: 350px" />
+              </el-form-item>
 
-              <FormItem label="是否自营" prop="selfOperated">
-                <RadioGroup
-                  type="button"
-                  button-style="solid"
-                  v-model="shopForm.selfOperated"
+              <el-form-item label="是否自营" prop="selfOperated">
+                <el-radio-group v-model="shopForm.selfOperated">
+                  <el-radio-button value="true">自营</el-radio-button>
+                  <el-radio-button value="false">非自营</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+
+              <el-form-item label="店铺所在地" prop="storeAddressPath">
+                <span>{{ shopForm.storeAddressPath || "暂无地址" }}</span>
+                <el-button
+                  style="margin-left: 10px"
+                  type="default"
+                  @click="handleClickAddress('storeAddressPath')"
+                  >选择</el-button
                 >
-                  <Radio label="true">自营</Radio>
-                  <Radio label="false">非自营</Radio>
-                </RadioGroup>
-              </FormItem>
+              </el-form-item>
 
-              <FormItem label="店铺所在地" prop="storeAddressPath">
-                <span>{{shopForm.storeAddressPath || '暂无地址'}}</span>
-                <Button style="margin-left: 10px;" type="default" @click="handleClickAddress('storeAddressPath')">选择</Button>
-              </FormItem>
-
-              <FormItem label="店铺详细地址" prop="storeAddressDetail">
-                <Input
+              <el-form-item label="店铺详细地址" prop="storeAddressDetail">
+                <el-input
                   v-model="shopForm.storeAddressDetail"
                   clearable
                   style="width: 350px"
                 />
-              </FormItem>
+              </el-form-item>
 
-              <!-- <FormItem label="店铺定位" prop="shopCenter">
-                 <Button
-                  type="info"
-                  v-if="!shopForm.storeCenter"
-                  @click="$refs.liliMap.showMap = true"
-                  >点击获取店铺定位</Button
-                >
-                <Button type="success" v-else @click="$refs.liliMap.showMap = true"
-                  >已定位</Button
-                >
-              </FormItem> -->
-
-
-
-              <FormItem label="店铺logo" class="storeLogo">
-                <Avatar
-                  style="height: 100px; width: 100px"
+              <el-form-item label="店铺logo" class="storeLogo">
+                <el-avatar
                   v-if="shopForm.storeLogo"
                   shape="square"
-                  icon="ios-person"
-                  size="default"
+                  :size="100"
                   :src="shopForm.storeLogo"
                 />
                 <div>
-                  <Button @click="handleCLickImg('storeLogo')" type="primary"
-                    >选择图片</Button
+                  <el-button @click="handleCLickImg('storeLogo')" type="primary"
+                    >选择图片</el-button
                   >
                 </div>
-              </FormItem>
+              </el-form-item>
 
-              <FormItem label="店铺简介" prop="storeDesc" style="width: 350px">
-                <Input
+              <el-form-item label="店铺简介" prop="storeDesc" style="width: 350px">
+                <el-input
                   v-model="shopForm.storeDesc"
                   type="textarea"
                   :rows="4"
@@ -92,317 +82,314 @@
                   clearable
                   style="width: 400px"
                 />
-              </FormItem>
+              </el-form-item>
               <br />
-              <Divider orientation="left">退货收件地址</Divider>
-              <FormItem label="收件人姓名">
-                <Input
+              <el-divider content-position="left">退货收件地址</el-divider>
+              <el-form-item label="收件人姓名">
+                <el-input
                   v-model="shopForm.salesConsigneeName"
                   clearable
                   style="width: 350px"
                 />
-              </FormItem>
-              <FormItem label="收件人手机">
-                <Input
+              </el-form-item>
+              <el-form-item label="收件人手机">
+                <el-input
                   v-model="shopForm.salesConsigneeMobile"
                   clearable
                   maxlength="11"
                   style="width: 350px"
                 />
-              </FormItem>
-              <FormItem label="地址信息">
-                {{ shopForm.salesConsigneeAddressPath || '暂无地址' }}
-                <Button style="margin-left: 10px;" type="default" @click="handleClickAddress('salesConsigneeAddressPath')">选择</Button>
-              </FormItem>
-              <FormItem label="详细地址">
-                <Input
+              </el-form-item>
+              <el-form-item label="地址信息">
+                {{ shopForm.salesConsigneeAddressPath || "暂无地址" }}
+                <el-button
+                  style="margin-left: 10px"
+                  type="default"
+                  @click="handleClickAddress('salesConsigneeAddressPath')"
+                  >选择</el-button
+                >
+              </el-form-item>
+              <el-form-item label="详细地址">
+                <el-input
                   v-model="shopForm.salesConsigneeDetail"
                   clearable
                   style="width: 350px"
                 />
-              </FormItem>
-              <!-- <Divider orientation="left">腾讯云智服</Divider>
-              <FormItem label="唯一标识">
-                <Input v-model="shopForm.yzfSign" clearable style="width: 350px" />
-              </FormItem>
-              <FormItem label="小程序唯一标识">
-                <Input v-model="shopForm.yzfMpSign" clearable style="width: 350px" />
-              </FormItem>
-              <Spin fix v-if="loading"></Spin> -->
+              </el-form-item>
             </div>
-          </TabPane>
+          </el-tab-pane>
 
           <!-- 入驻信息 -->
-          <TabPane label="入驻信息" class="tab" name="entry">
+          <el-tab-pane label="入驻信息" class="tab" name="entry">
             <!-- 遮罩层  -->
             <div v-if="isRead" class="mask">只读不可修改</div>
-            <Divider orientation="left">公司信息</Divider>
-            <div>
-              <FormItem label="公司名称" prop="companyName">
-                <Input v-model="shopForm.companyName" clearable style="width: 350px" />
-              </FormItem>
+            <el-divider content-position="left">公司信息</el-divider>
+            <div v-loading="loading">
+              <el-form-item label="公司名称" prop="companyName">
+                <el-input v-model="shopForm.companyName" clearable style="width: 350px" />
+              </el-form-item>
 
-              <FormItem label="公司电话" prop="companyPhone">
-                <Input v-model="shopForm.companyPhone" clearable style="width: 350px" />
-              </FormItem>
-              <FormItem label="公司所在地" prop="companyAddressIdPath">
+              <el-form-item label="公司电话" prop="companyPhone">
+                <el-input v-model="shopForm.companyPhone" clearable style="width: 350px" />
+              </el-form-item>
+              <el-form-item label="公司所在地" prop="companyAddressIdPath">
                 <span>{{ shopForm.companyAddressPath }}</span>
-                <Button style="margin-left: 10px;" @click="handleClickAddress('companyAddressPath')">选择</Button>
-                <!-- <region
-                  style="width: 350px"
-                  @selected="selectedRegion"
-                  :addressId="address"
-                /> -->
-              </FormItem>
-              <FormItem label="公司详细地址" prop="companyAddress">
-                <Input v-model="shopForm.companyAddress" clearable style="width: 350px" />
-              </FormItem>
-              <FormItem label="员工总数" prop="employeeNum">
-                <InputNumber
+                <el-button
+                  style="margin-left: 10px"
+                  type="default"
+                  @click="handleClickAddress('companyAddressPath')"
+                  >选择</el-button
+                >
+              </el-form-item>
+              <el-form-item label="公司详细地址" prop="companyAddress">
+                <el-input v-model="shopForm.companyAddress" clearable style="width: 350px" />
+              </el-form-item>
+              <el-form-item label="员工总数" prop="employeeNum">
+                <el-input-number
                   style="width: 150px"
                   :min="1"
                   :max="9999999"
                   v-model="shopForm.employeeNum"
-                >
-                </InputNumber>
-              </FormItem>
-              <FormItem label="注册资金" prop="registeredCapital">
-                <InputNumber
+                />
+              </el-form-item>
+              <el-form-item label="注册资金" prop="registeredCapital">
+                <el-input-number
                   style="width: 150px"
                   :min="1"
                   :max="9999999"
                   v-model="shopForm.registeredCapital"
-                >
-                </InputNumber>
+                />
                 <span style="margin-left: 10px">万</span>
-              </FormItem>
-              <FormItem label="联系人姓名" prop="linkName">
-                <Input v-model="shopForm.linkName" clearable style="width: 200px" />
-              </FormItem>
-              <FormItem label="联系人手机" prop="linkPhone">
-                <Input
+              </el-form-item>
+              <el-form-item label="联系人姓名" prop="linkName">
+                <el-input v-model="shopForm.linkName" clearable style="width: 200px" />
+              </el-form-item>
+              <el-form-item label="联系人手机" prop="linkPhone">
+                <el-input
                   v-model="shopForm.linkPhone"
                   maxlength="11"
                   clearable
                   style="width: 200px"
                 />
-              </FormItem>
-              <FormItem label="电子邮箱" prop="companyEmail">
-                <Input v-model="shopForm.companyEmail" clearable style="width: 200px" />
-              </FormItem>
+              </el-form-item>
+              <el-form-item label="电子邮箱" prop="companyEmail">
+                <el-input v-model="shopForm.companyEmail" clearable style="width: 200px" />
+              </el-form-item>
 
-              <Divider orientation="left">营业执照信息</Divider>
+              <el-divider content-position="left">营业执照信息</el-divider>
 
-              <FormItem label="营业执照号" prop="licenseNum">
-                <Input v-model="shopForm.licenseNum" clearable style="width: 200px" />
-              </FormItem>
+              <el-form-item label="营业执照号" prop="licenseNum">
+                <el-input v-model="shopForm.licenseNum" clearable style="width: 200px" />
+              </el-form-item>
 
-              <FormItem label="法定经营范围" prop="scope">
-                <Input v-model="shopForm.scope" clearable style="width: 200px" />
-              </FormItem>
+              <el-form-item label="法定经营范围" prop="scope">
+                <el-input v-model="shopForm.scope" clearable style="width: 200px" />
+              </el-form-item>
 
-              <FormItem label="营业执照电子版" prop="licencePhoto">
-                <Avatar
-                  style="height: 100px; width: 100px"
+              <el-form-item label="营业执照电子版" prop="licencePhoto">
+                <el-avatar
                   v-if="shopForm.licencePhoto"
                   shape="square"
-                  icon="ios-person"
-                  size="default"
+                  :size="100"
                   :src="shopForm.licencePhoto"
                 />
                 <div>
-                  <Button @click="handleCLickImg('licencePhoto')" type="primary"
-                  >选择图片</Button
+                  <el-button @click="handleCLickImg('licencePhoto')" type="primary"
+                    >选择图片</el-button
                   >
                 </div>
-              </FormItem>
-              <Divider orientation="left">法人信息</Divider>
+              </el-form-item>
+              <el-divider content-position="left">法人信息</el-divider>
 
-              <FormItem label="法人姓名" prop="legalName">
-                <Input v-model="shopForm.legalName" clearable style="width: 200px" />
-              </FormItem>
-              <FormItem label="法人证件号" prop="legalId">
-                <Input v-model="shopForm.legalId" clearable style="width: 200px" />
-              </FormItem>
-              <FormItem label="法人身份证照片" prop="legalPhoto">
-                <Avatar
+              <el-form-item label="法人姓名" prop="legalName">
+                <el-input v-model="shopForm.legalName" clearable style="width: 200px" />
+              </el-form-item>
+              <el-form-item label="法人证件号" prop="legalId">
+                <el-input v-model="shopForm.legalId" clearable style="width: 200px" />
+              </el-form-item>
+              <el-form-item label="法人身份证照片" prop="legalPhoto">
+                <el-avatar
                   class="legal-photo"
                   shape="square"
-                  size="100"
-                  icon="md-add"
-                  @click.native="handleCLickImg('legalPhoto', 0)"
+                  :size="100"
+                  @click="handleCLickImg('legalPhoto', 0)"
                   :src="shopForm.legalPhoto[0]"
                 />
-                <Avatar
+                <el-avatar
                   class="ml_10 legal-photo"
                   shape="square"
-                  size="100"
-                  icon="md-add"
-                  @click.native="handleCLickImg('legalPhoto', 1)"
+                  :size="100"
+                  @click="handleCLickImg('legalPhoto', 1)"
                   :src="shopForm.legalPhoto[1]"
                 />
                 <span>点击图片上传身份证正反面，要求身份证清晰，四角无缺漏</span>
-              </FormItem>
+              </el-form-item>
 
-              <Divider orientation="left">结算银行信息</Divider>
-              <FormItem label="银行开户名" prop="settlementBankAccountName">
-                <Input
+              <el-divider content-position="left">结算银行信息</el-divider>
+              <el-form-item label="银行开户名" prop="settlementBankAccountName">
+                <el-input
                   v-model="shopForm.settlementBankAccountName"
                   clearable
                   style="width: 200px"
                 />
-              </FormItem>
-              <FormItem label="银行账号" prop="settlementBankAccountNum">
-                <Input
+              </el-form-item>
+              <el-form-item label="银行账号" prop="settlementBankAccountNum">
+                <el-input
                   v-model="shopForm.settlementBankAccountNum"
                   clearable
                   style="width: 200px"
                 />
-              </FormItem>
-              <FormItem label="银行支行名称" prop="settlementBankBranchName">
-                <Input
+              </el-form-item>
+              <el-form-item label="银行支行名称" prop="settlementBankBranchName">
+                <el-input
                   v-model="shopForm.settlementBankBranchName"
                   clearable
                   style="width: 200px"
                 />
-              </FormItem>
-              <FormItem label="支行联行号" prop="settlementBankJointName">
-                <Input
+              </el-form-item>
+              <el-form-item label="支行联行号" prop="settlementBankJointName">
+                <el-input
                   v-model="shopForm.settlementBankJointName"
                   clearable
                   style="width: 200px"
                 />
-              </FormItem>
-
-              <Spin fix v-if="loading"></Spin>
+              </el-form-item>
             </div>
-          </TabPane>
-          <TabPane label="经营范围" class="tab" name="category">
+          </el-tab-pane>
+          <el-tab-pane label="经营范围" class="tab" name="category">
             <!-- 遮罩层  -->
             <div v-if="isRead" class="mask">只读不可修改</div>
-            <FormItem label="经营类目" prop="goodsManagementCategory">
+            <el-form-item label="经营类目" prop="goodsManagementCategory">
               <div>
-                <Checkbox
+                <el-checkbox
+                  v-model="checkAll"
                   :indeterminate="indeterminate"
-                  :value="checkAll"
-                  @click.prevent.native="handleCheckAll"
+                  @change="handleCheckAll"
                   >全选
-                </Checkbox>
+                </el-checkbox>
               </div>
-              <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
-                <Checkbox v-for="(item, i) in categories" :key="i + 1" :label="item.id"
+              <el-checkbox-group v-model="checkAllGroup" @change="checkAllGroupChange">
+                <el-checkbox
+                  v-for="(item, i) in categories"
+                  :key="i + 1"
+                  :value="String(item.id)"
                   >{{ item.name }}
-                </Checkbox>
-              </CheckboxGroup>
-            </FormItem>
-          </TabPane>
+                </el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+          </el-tab-pane>
 
-          <!-- <TabPane label="配送信息" class="tab" name="send"> -->
-            <!-- 遮罩层  -->
-            <!-- <FormItem label="达达编码" prop="ddCode">
-              <Input
-                v-model="shopForm.ddCode"
-                maxlength="20"
-                clearable
-                style="width: 200px"
-              />
-            </FormItem> -->
-          <!-- </TabPane> -->
-
-          <TabPane label="结算信息" class="tab" name="settlement">
-            <Alert type="error"
-              >已添加<span class="theme_color">{{ settlementCycle.length }}</span
-              >个结算日，最多可添加5个结算日，当月不包含所设日期时，将会顺延到下一个结算日</Alert
-            >
-            <FormItem label="结算日期">
-              <Tag
+          <el-tab-pane label="结算信息" class="tab" name="settlement">
+            <el-alert type="error" :closable="false" show-icon>
+              已添加<span class="theme_color">{{ settlementCycle.length }}</span
+              >个结算日，最多可添加5个结算日，当月不包含所设日期时，将会顺延到下一个结算日
+            </el-alert>
+            <el-form-item label="结算日期">
+              <el-tag
                 v-for="item in settlementCycle"
                 :key="item"
-                :name="item"
                 closable
-                style="marrgin-left: 10px"
-                @on-close="removesettlementCycle"
+                style="margin-left: 10px"
+                @close="removesettlementCycle(item)"
                 >{{ item }}
-              </Tag>
-              <InputNumber
+              </el-tag>
+              <el-input-number
                 size="small"
                 :max="31"
                 :min="1"
                 v-model="day"
                 v-show="settlementShow"
-              ></InputNumber>
-              <Button
+              />
+              <el-button
                 type="default"
                 @click="addsettlementCycle"
                 size="small"
                 v-if="addSettlementBtn && settlementCycle.length < 5"
                 style="margin-left: 8px"
                 >添加结算日期
-              </Button>
-              <Button
+              </el-button>
+              <el-button
                 v-if="addSettlementConfirmBtn"
                 type="default"
                 @click="addsettlementCycleConfirm"
                 size="small"
                 style="margin-left: 8px"
                 >确认
-              </Button>
-            </FormItem>
-          </TabPane>
-        </Form>
-      </Tabs>
-      <div align="center">
-        <Button
-          type="info"
+              </el-button>
+            </el-form-item>
+          </el-tab-pane>
+        </el-tabs>
+      </el-form>
+      <div style="text-align: center">
+        <el-button
+          type="default"
           v-show="tabNameList.indexOf(tabName) > 0"
           class="mr_10"
           @click="prev"
-          >上一步</Button
+          >上一步</el-button
         >
-        <Button type="primary" v-show="tabNameList.indexOf(tabName) < tabNameList.length - 1" @click="next"
-          >下一步</Button
+        <el-button
+          type="primary"
+          v-show="tabNameList.indexOf(tabName) < tabNameList.length - 1"
+          @click="next"
+          >下一步</el-button
         >
-        <Button
+        <el-button
           type="primary"
           v-show="tabNameList.indexOf(tabName) === tabNameList.length - 1"
           @click="save"
           v-if="!isRead"
         >
           {{ shopId ? "修改" : "保存" }}
-        </Button>
+        </el-button>
       </div>
-    </Card>
+    </el-card>
 
+    <el-dialog
+      v-model="picModelFlag"
+      width="1200px"
+      append-to-body
+      destroy-on-close
+      :show-close="true"
+    >
+      <ossManage
+        @callback="callbackSelected"
+        :isComponent="true"
+        :initialize="picModelFlag"
+        ref="ossManage"
+      />
+    </el-dialog>
 
-    <Modal width="1200px" v-model="picModelFlag">
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-    </Modal>
-
-    <Modal width="1200px" v-model="memberModalFlag">
+    <el-dialog
+      v-model="memberModalFlag"
+      width="1200px"
+      append-to-body
+      destroy-on-close
+      :show-close="true"
+    >
       <memberLayout
         @callback="callbackMember"
         class="selectedMember"
         ref="memberLayout"
       />
-    </Modal>
+    </el-dialog>
 
-    <Modal v-model="auditModel" width="360">
-      <p slot="header" style="color: #f60; text-align: center">
-        <Icon type="ios-information-circle"></Icon>
-        <span>审核店铺</span>
-      </p>
+    <el-dialog v-model="auditModel" width="360px" append-to-body :show-close="true">
+      <template #header>
+        <span style="color: #f60; text-align: center; display: block">审核店铺</span>
+      </template>
       <div style="text-align: center">
         <p>您确认要审核通过该店铺</p>
       </div>
-      <div slot="footer">
-        <Button type="error" :loading="auditModalLoading" @click="audit('REFUSED')"
-          >驳回</Button
+      <template #footer>
+        <el-button type="danger" :loading="auditModalLoading" @click="audit('REFUSED')"
+          >驳回</el-button
         >
-        <Button type="info" :loading="auditModalLoading" @click="audit('PASS')"
-          >通过</Button
+        <el-button type="primary" :loading="auditModalLoading" @click="audit('PASS')"
+          >通过</el-button
         >
-      </div>
-    </Modal>
+      </template>
+    </el-dialog>
 
     <multipleMap ref="map" @callback="getAddress" />
   </div>
@@ -511,7 +498,7 @@ export default {
       settlementCycle: [], // 结算周期
       shopForm: {
         // 店铺数据
-        storeAddressPath:"",
+        storeAddressPath: "",
 
         settlementCycle: "",
         selfOperated: "false",
@@ -548,15 +535,14 @@ export default {
 
       infoResult: {}, // 店铺详情
       picIndex: "", // 存储身份证图片下标，方便赋值
-      currentAddress:"", //当前选中的地址
+      currentAddress: "", //当前选中的地址
     };
   },
   methods: {
     // 选择地址
-    handleClickAddress(val){
+    handleClickAddress(val) {
       this.currentAddress = val;
       this.$refs.map.open();
-
     },
     // 选择会员的回调
     callbackMember(val) {
@@ -588,7 +574,7 @@ export default {
       this.regionId = "";
     },
     //删除所选择的结算日
-    removesettlementCycle(event, name) {
+    removesettlementCycle(name) {
       this.settlementCycle = this.settlementCycle.filter((i) => i !== name);
     },
     //确认添加方法
@@ -615,21 +601,13 @@ export default {
     },
     // 选择公司地址
     selectedRegion(val) {
-      this.$set(this.shopForm, "companyAddressIdPath", val[0].toString());
-      this.$set(
-        this.shopForm,
-        "companyAddressPath",
-        val[1].toString().replace(/\s/g, "")
-      );
+      this.shopForm.companyAddressIdPath = val[0].toString();
+      this.shopForm.companyAddressPath = val[1].toString().replace(/\s/g, "");
     },
     // 选择退货收件地址
     selectedConsigneeRegion(val) {
-      this.$set(this.shopForm, "salesConsigneeAddressId", val[0].toString());
-      this.$set(
-        this.shopForm,
-        "salesConsigneeAddressPath",
-        val[1].toString().replace(/\s/g, "")
-      );
+      this.shopForm.salesConsigneeAddressId = val[0].toString();
+      this.shopForm.salesConsigneeAddressPath = val[1].toString().replace(/\s/g, "");
     },
     // 选择图片modal
     handleCLickImg(val, index) {
@@ -665,7 +643,6 @@ export default {
       let index = this.tabNameList.indexOf(this.tabName) - 1;
       this.tabName = this.tabNameList[index];
     },
-    formValidate(prop, status, error) {},
     // 获取店铺详情
     getShopDetail() {
       shopDetail(this.shopId).then((res) => {
@@ -698,7 +675,7 @@ export default {
         //校验经营类目
         if (this.checkAllGroup == "") {
           this.$Message.error("请选择店铺经营类目");
-          this.tabName = "cagetory";
+          this.tabName = "category";
           return;
         }
         if (valid) {
@@ -732,9 +709,9 @@ export default {
       });
     },
     // 筛选值为空的参数
-    filterFun (params) {
-      Object.entries(params).map(value => {
-        if (!value[1] || value[1] === '' || value[1] === 'null') {
+    filterFun(params) {
+      Object.entries(params).map((value) => {
+        if (!value[1] || value[1] === "" || value[1] === "null") {
           delete params[value[0]];
         }
       });
@@ -742,52 +719,43 @@ export default {
     },
     // 点击定位获取店铺地址
     getAddress(val) {
-      if (val.type === 'select') {
-        const paths = val.data.map(item => item.name).join(',')
+      if (val.type === "select") {
+        const paths = val.data.map((item) => item.name).join(",");
 
-        const ids = val.data.map(item => item.id).join(',')
+        const ids = val.data.map((item) => item.id).join(",");
 
-        if(this.currentAddress === 'storeAddressPath'){
-          this.$set(this.shopForm, "storeAddressPath", paths);
-          this.$set(this.shopForm, "storeAddressIdPath", ids);
+        if (this.currentAddress === "storeAddressPath") {
+          this.shopForm.storeAddressPath = paths;
+          this.shopForm.storeAddressIdPath = ids;
 
-          this.shopForm.center = val.data[val.data.length - 1].center
-        }else if(this.currentAddress === 'salesConsigneeAddressPath'){
-          this.$set(this.shopForm, "salesConsigneeAddressPath", paths);
-          this.$set(this.shopForm, "salesConsigneeAddressId", ids);
-        }else if(this.currentAddress === 'companyAddressPath'){
-          this.$set(this.shopForm, "companyAddressPath", paths);
-          this.$set(this.shopForm, "companyAddressIdPath", ids);
+          this.shopForm.center = val.data[val.data.length - 1].center;
+        } else if (this.currentAddress === "salesConsigneeAddressPath") {
+          this.shopForm.salesConsigneeAddressPath = paths;
+          this.shopForm.salesConsigneeAddressId = ids;
+        } else if (this.currentAddress === "companyAddressPath") {
+          this.shopForm.companyAddressPath = paths;
+          this.shopForm.companyAddressIdPath = ids;
         }
-
-
-      }
-      else{
-        if(this.currentAddress === 'storeAddressPath'){
+      } else {
+        if (this.currentAddress === "storeAddressPath") {
           this.shopForm.storeCenter = val.data.position.lng + "," + val.data.position.lat;
-          this.$set(this.shopForm, "storeAddressPath", val.data.addr);
-          this.$set(this.shopForm, "storeAddressIdPath", val.data.addrId);
-        }else if(this.currentAddress === 'salesConsigneeAddressPath'){
-          this.$set(this.shopForm, "salesConsigneeAddressPath", val.data.addr);
-          this.$set(this.shopForm, "salesConsigneeAddressId", val.data.addrId);
-        }else if(this.currentAddress === 'companyAddressPath'){
-          this.$set(this.shopForm, "companyAddressPath", val.data.addr);
-          this.$set(this.shopForm, "companyAddressIdPath", val.data.addrId);
+          this.shopForm.storeAddressPath = val.data.addr;
+          this.shopForm.storeAddressIdPath = val.data.addrId;
+        } else if (this.currentAddress === "salesConsigneeAddressPath") {
+          this.shopForm.salesConsigneeAddressPath = val.data.addr;
+          this.shopForm.salesConsigneeAddressId = val.data.addrId;
+        } else if (this.currentAddress === "companyAddressPath") {
+          this.shopForm.companyAddressPath = val.data.addr;
+          this.shopForm.companyAddressIdPath = val.data.addrId;
         }
       }
     },
     // 全部选中
-    handleCheckAll() {
-      if (this.indeterminate) {
-        this.checkAll = false;
-      } else {
-        this.checkAll = !this.checkAll;
-      }
+    handleCheckAll(checked) {
       this.indeterminate = false;
-
-      if (this.checkAll) {
-        let checkAllDate = [];
-        this.categories.forEach((i) => checkAllDate.push(i.id));
+      if (checked) {
+        const checkAllDate = [];
+        this.categories.forEach((i) => checkAllDate.push(String(i.id)));
         this.checkAllGroup = checkAllDate;
       } else {
         this.checkAllGroup = [];
@@ -862,7 +830,7 @@ export default {
   z-index: 9;
 }
 
-::v-deep .ivu-tabs-bar {
+:deep(.el-tabs__header) {
   margin: 0;
 }
 
diff --git a/manager/src/views/sensitive-words/index.vue b/manager/src/views/sensitive-words/index.vue
index 95e89524..1bcb5748 100644
--- a/manager/src/views/sensitive-words/index.vue
+++ b/manager/src/views/sensitive-words/index.vue
@@ -1,49 +1,67 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation">
-        <Button @click="add" type="primary">添加</Button>
-        <Button @click="delAll">批量删除</Button>
-      </Row>
-        <Table
-          :loading="loading"
-          border
-          :columns="columns"
-          :data="data"
-          ref="table"
-          @on-selection-change="changeSelect"
-        ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
-          :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
-          size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
-    <Modal
-      :title="modalTitle"
-      v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
-    >
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="敏感词" prop="sn">
-          <Input v-model="form.sensitiveWord" clearable style="width: 100%" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
+    <el-card>
+      <div class="operation">
+        <el-button type="primary" @click="add">添加</el-button>
+        <el-button @click="delAll">批量删除</el-button>
       </div>
-    </Modal>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%"
+        row-key="id"
+        @selection-change="changeSelect"
+      >
+        <el-table-column type="selection" width="60" align="center" />
+        <el-table-column prop="sensitiveWord" label="敏感词" min-width="120" />
+        <el-table-column prop="createTime" label="创建时间" width="200" />
+        <el-table-column prop="updateTime" label="更新时间" width="200" />
+        <el-table-column prop="createBy" label="操作人" min-width="150" />
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="detail(row)">修改</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+        <el-form-item label="敏感词" prop="sensitiveWord">
+          <el-input v-model="form.sensitiveWord" clearable style="width: 100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -52,29 +70,27 @@ import {
   getSensitiveWordsPage,
   delSensitive,
   insertSensitiveWords,
-  updateSensitiveWords
+  updateSensitiveWords,
 } from "@/api/index";
+
 export default {
   name: "sensitive-words",
   data() {
     return {
-      loading: true, // 表单加载状态
-      modalType: 0, // 添加或编辑标识
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
+      loading: true,
+      modalType: 0,
+      modalVisible: false,
+      modalTitle: "",
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
         sensitiveWord: "",
       },
       form: {
-        // 添加或编辑表单对象初始化数据
         sensitiveWord: "",
       },
-      // 表单验证规则
       formValidate: {
         sensitiveWord: [
           {
@@ -84,128 +100,40 @@ export default {
           },
         ],
       },
-      submitLoading: false, // 添加或编辑提交状态
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "敏感词",
-          key: "sensitiveWord",
-          minWidth: 120
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          width: 200
-        },
-        {
-          title: "更新时间",
-          key: "updateTime",
-          width: 200
-        },
-        {
-          title: "操作人",
-          key: "createBy",
-          minWidth: 150
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 200,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px",
-                  },
-                  on: {
-                    click: () => {
-                      this.detail(params.row);
-                    },
-                  },
-                },
-                "修改"
-              ),
-              h(
-                "span",
-                {
-                  style: {
-                    margin: "0 8px",
-                    color: "#dcdee2",
-                  },
-                },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      submitLoading: false,
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
       this.clearSelectAll();
     },
-    // 分页 改变页数
     changePageSize(v) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.getDataList();
     },
     clearSelectAll() {
-      this.$refs.table.selectAll(false);
+      this.$refs.table?.clearSelection();
     },
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
     },
-    // 获取数据
     getDataList() {
       this.loading = true;
-
       getSensitiveWordsPage(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
@@ -216,14 +144,11 @@ export default {
       this.total = this.data.length;
       this.loading = false;
     },
-    // 提交
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
           this.submitLoading = true;
-
           if (this.modalType == 0) {
-            // 添加 避免编辑后传入id等数据 记得删除
             delete this.form.id;
             insertSensitiveWords(this.form).then((res) => {
               this.submitLoading = false;
@@ -234,8 +159,7 @@ export default {
               }
             });
           } else {
-            // 编辑
-            updateSensitiveWords(this.id,this.form).then((res) => {
+            updateSensitiveWords(this.id, this.form).then((res) => {
               this.submitLoading = false;
               if (res.success) {
                 this.$Message.success("操作成功");
@@ -247,16 +171,13 @@ export default {
         }
       });
     },
-    // 添加敏感词
     add() {
       this.modalType = 0;
       this.modalTitle = "添加";
-      this.form = {}
-      this.$refs.form.resetFields();
-
+      this.form = {};
+      this.$refs.form?.resetFields();
       this.modalVisible = true;
     },
-    // 修改
     detail(v) {
       this.modalType = 1;
       this.id = v.id;
@@ -264,15 +185,12 @@ export default {
       this.modalVisible = true;
       this.form.sensitiveWord = v.sensitiveWord;
     },
-    // 删除
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
-        // 记得确认修改此处
         content: "您确认要删除 " + v.sensitiveWord + " ?",
         loading: true,
         onOk: () => {
-          // 删除
           delSensitive(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -283,7 +201,6 @@ export default {
         },
       });
     },
-    // 批量删除
     delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未选择要删除的数据");
@@ -299,7 +216,6 @@ export default {
             ids += e.id + ",";
           });
           ids = ids.substring(0, ids.length - 1);
-          // 批量删除
           delSensitive(ids).then((res) => {
             this.$Modal.remove();
             if (res.success) {
diff --git a/manager/src/views/statistics/goods.vue b/manager/src/views/statistics/goods.vue
index 9c167d7b..61dd4071 100644
--- a/manager/src/views/statistics/goods.vue
+++ b/manager/src/views/statistics/goods.vue
@@ -1,78 +1,69 @@
 <template>
   <div>
-    <Affix :offset-top="100">
-      <Card class="card fixed-bottom">
-        <affixTime :closeShop="true" @selected="clickBreadcrumb"/>
-      </Card>
-    </Affix>
-    <Card class="card">
-      <Tabs @on-click="handleClickType">
-        <TabPane label="热门商品订单数量" name="NUM">
-          <Table :columns="columns" :data="data"></Table>
-        </TabPane>
-        <TabPane label="热门商品订单金额" name="PRICE">
-          <Table :columns="columns" :data="data"></Table>
-        </TabPane>
-      </Tabs>
-
-    </Card>
+    <el-affix :offset="100">
+      <el-card class="card fixed-bottom">
+        <affixTime :closeShop="true" @selected="clickBreadcrumb" />
+      </el-card>
+    </el-affix>
+    <el-card class="card">
+      <el-tabs v-model="params.type" @tab-click="handleClickType">
+        <el-tab-pane label="热门商品订单数量" name="NUM">
+          <el-table :data="data" stripe style="width: 100%">
+            <el-table-column prop="goodsName" label="商品名称" min-width="160" />
+            <el-table-column prop="num" label="销售数量" min-width="120" />
+            <el-table-column label="销售金额" min-width="120">
+              <template #default="{ row }">
+                <priceColorScheme v-if="row" :value="row.price" :color="$mainColor" />
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="热门商品订单金额" name="PRICE">
+          <el-table :data="data" stripe style="width: 100%">
+            <el-table-column prop="goodsName" label="商品名称" min-width="160" />
+            <el-table-column prop="num" label="销售数量" min-width="120" />
+            <el-table-column label="销售金额" min-width="120">
+              <template #default="{ row }">
+                <priceColorScheme v-if="row" :value="row.price" :color="$mainColor" />
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
   </div>
 </template>
 <script>
-import memberLayout from "@/views/member/list";
 import * as API_Goods from "@/api/goods";
 import affixTime from "@/components/affix-time";
 
 export default {
   components: {
     affixTime,
-    memberLayout
   },
   data() {
     return {
-      params: { // 请求参数
+      params: {
         searchType: "LAST_SEVEN",
         year: "",
         month: "",
         shopId: "",
-        type: "NUM"
+        type: "NUM",
       },
-      columns: [ // 表头
-        {
-          title: "商品名称",
-          key: "goodsName",
-        },
-        {
-          title: "销售数量",
-          key: "num",
-        },
-        {
-          title: "销售金额",
-          key: "price",
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-          },
-
-        },
-      ],
-      data: [], // 数据
+      data: [],
     };
   },
   methods: {
-    // tab切换
-    handleClickType(name) {
-      this.params.type = name;
+    handleClickType(tab) {
+      this.params.type = tab.paneName;
       this.getData();
     },
-    // 条件删选
-    clickBreadcrumb(item, index) {
-      let callback = item;
-      let type = this.params.type;
-      this.params = {...callback};
+    clickBreadcrumb(item) {
+      const type = this.params.type;
+      this.params = { ...item };
       this.params.type = type;
       this.getData();
     },
-    // 获取数据
     getData() {
       Promise.all([API_Goods.goodsStatistics(this.params)]).then((res) => {
         if (res[0].result) {
diff --git a/manager/src/views/statistics/member.vue b/manager/src/views/statistics/member.vue
index b1b9fce4..0e2d7da3 100644
--- a/manager/src/views/statistics/member.vue
+++ b/manager/src/views/statistics/member.vue
@@ -1,26 +1,34 @@
 <template>
   <div class="wrapper">
-    <Affix :offset-top="100">
-      <Card class="card fixed-bottom">
+    <el-affix :offset="100">
+      <el-card class="card fixed-bottom">
         <affixTime :closeShop="true" @selected="clickBreadcrumb" />
-      </Card>
-    </Affix>
+      </el-card>
+    </el-affix>
 
-    <Card class="card">
+    <el-card class="card">
       <div>
-        <h4>客户增长趋势 <Button style="margin-left:10px" @click="()=>{enableShowMemberCount = !enableShowMemberCount; initMemberChart()}" size="small">{{enableShowMemberCount ? '关闭' : '显示'}}用户总人数</Button></h4>
+        <h4>
+          客户增长趋势
+          <el-button style="margin-left: 10px" size="small" @click="toggleMemberCount">
+            {{ enableShowMemberCount ? "关闭" : "显示" }}用户总人数
+          </el-button>
+        </h4>
         <div id="orderChart"></div>
       </div>
-    </Card>
+    </el-card>
 
-    <Card class="card">
+    <el-card class="card">
       <div>
         <h4>客户增长报表</h4>
-        <Table class="mt_10" stripe :columns="columns" :data="data"></Table>
-
+        <el-table class="mt_10" stripe :data="data" style="width: 100%">
+          <el-table-column prop="createDate" label="日期" min-width="120" sortable />
+          <el-table-column prop="memberCount" label="当前会员" min-width="120" />
+          <el-table-column prop="newlyAdded" label="新增会员" min-width="120" />
+          <el-table-column prop="activeQuantity" label="活跃会员" min-width="120" />
+        </el-table>
       </div>
-    </Card>
-
+    </el-card>
   </div>
 </template>
 <script>
@@ -32,101 +40,56 @@ export default {
   components: { affixTime },
   data() {
     return {
-      columns: [ // 表头
-        {
-          key: "createDate",
-          title: "日期",
-          sortable: true,
-        },
-        {
-          key: "memberCount",
-          title: "当前会员",
-        },
-        {
-          key: "newlyAdded",
-          title: "新增会员",
-        },
-        {
-          key: "activeQuantity",
-          title: "活跃会员",
-        },
-      ],
-      // 时间
-      dateList: [
-        {
-          title: "今天",
-          selected: false,
-          value: "TODAY",
-        },
-        {
-          title: "昨天",
-          selected: false,
-          value: "YESTERDAY",
-        },
-        {
-          title: "过去7天",
-          selected: true,
-          value: "LAST_SEVEN",
-        },
-        {
-          title: "过去30天",
-          selected: false,
-          value: "LAST_THIRTY",
-        },
-      ],
-      year: "", // 当前年限
-      orderChart: "", // 订单表格
-      params: { // 请求参数
+      orderChart: "",
+      params: {
         searchType: "LAST_SEVEN",
         year: "",
         month: "",
         shopId: "",
       },
-
-      data: [], // 数据
-      enableShowMemberCount:false
+      data: [],
+      enableShowMemberCount: false,
+      year: "",
     };
   },
   watch: {
     params: {
-      handler(val) {
+      handler() {
         this.init();
       },
       deep: true,
-      immediate:true,
+      immediate: true,
     },
     year(val) {
       this.params.year = new Date(val).getFullYear();
     },
   },
   methods: {
-    // 订单图
+    toggleMemberCount() {
+      this.enableShowMemberCount = !this.enableShowMemberCount;
+      this.initMemberChart();
+    },
     initMemberChart() {
-      // 默认已经加载 legend-filter 交互
-      /**
-       * 将数据分成三组来进行展示
-       */
-
-      let count = [];
-      let newly = [];
-      let actives = [];
+      const count = [];
+      const newly = [];
+      const actives = [];
 
       this.data.forEach((item) => {
-        if (this.enableShowMemberCount && (item.memberCount!="" || item.memberCount!=null)) {
+        if (this.enableShowMemberCount && (item.memberCount != "" || item.memberCount != null)) {
           count.push({
             createDate: item.createDate,
-            memberCount:item.memberCount,
+            memberCount: item.memberCount,
             title: "当前会员数量",
           });
         }
-        if (!this.enableShowMemberCount && (item.newlyAdded!="" || item.newlyAdded!=null)) {
+        if (!this.enableShowMemberCount && (item.newlyAdded != "" || item.newlyAdded != null)) {
           newly.push({
             createDate: item.createDate,
             memberCount: item.newlyAdded,
             title: "新增会员数量",
           });
         }
-        if (!this.enableShowMemberCount && (item.activeQuantity!="" || item.activeQuantity!=null)) {
+        if (!this.enableShowMemberCount && (item.activeQuantity != "" || item.activeQuantity != null)) {
           actives.push({
             createDate: item.createDate,
             memberCount: item.activeQuantity,
@@ -135,9 +98,9 @@ export default {
         }
       });
 
-      let data = [...count, ...newly, ...actives];
+      const chartData = [...count, ...newly, ...actives];
 
-      this.orderChart.data(data);
+      this.orderChart.data(chartData);
       this.orderChart.scale({
         activeQuantity: {
           range: [0, 1],
@@ -166,21 +129,15 @@ export default {
           stroke: "#fff",
           lineWidth: 1,
         });
-         this.orderChart.area().position("createDate*memberCount").color("title").shape("smooth");
-
+      this.orderChart.area().position("createDate*memberCount").color("title").shape("smooth");
 
       this.orderChart.render();
     },
-    // 条件查询
-    clickBreadcrumb(item, index) {
-      let callback = item;
-
-      console.warn(callback);
-      this.params = {...callback};
+    clickBreadcrumb(item) {
+      this.params = { ...item };
     },
-    // 初始化数据
     init() {
-      this.orderChart ? this.orderChart.clear() : ''
+      this.orderChart ? this.orderChart.clear() : "";
       API_Member.getMemberStatistics(this.params).then((res) => {
         if (res.result) {
           res.result.forEach((item) => {
@@ -202,8 +159,7 @@ export default {
     },
   },
   mounted() {
-    let data = new Date();
-    this.year = data;
+    this.year = new Date();
   },
 };
 </script>
@@ -214,4 +170,7 @@ export default {
 .card {
   margin-bottom: 10px;
 }
+.mt_10 {
+  margin-top: 10px;
+}
 </style>
diff --git a/manager/src/views/statistics/order.vue b/manager/src/views/statistics/order.vue
index 44b35532..38a7817a 100644
--- a/manager/src/views/statistics/order.vue
+++ b/manager/src/views/statistics/order.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="wrapper">
-    <Affix :offset-top="100">
-      <Card class="card fixed-bottom">
+    <el-affix :offset="100">
+      <el-card class="card fixed-bottom">
         <affixTime @selected="clickBreadcrumb" />
-      </Card>
-    </Affix>
+      </el-card>
+    </el-affix>
 
-    <Card class="card">
+    <el-card class="card">
       <div>
         <h4>交易概况</h4>
         <div class="flex">
@@ -59,7 +59,7 @@
                 <div class="card-item">
                   <div class="card-item-label">下单金额</div>
                   <div class="card-item-value">
-                    {{ overViewList.orderAmount || 0 | unitPrice("￥") }}
+                    {{ $filters.unitPrice(overViewList.orderAmount || 0, "￥") }}
                   </div>
                 </div>
                 <div class="card-item">
@@ -77,7 +77,7 @@
                 <div class="card-item">
                   <div class="card-item-label">付款金额</div>
                   <div class="card-item-value">
-                    {{ overViewList.paymentAmount || 0 | unitPrice("￥") }}
+                    {{ $filters.unitPrice(overViewList.paymentAmount || 0, "￥") }}
                   </div>
                 </div>
               </div>
@@ -91,7 +91,7 @@
                 <div class="card-item">
                   <div class="card-item-label">退单金额</div>
                   <div class="card-item-value">
-                    {{ overViewList.refundOrderPrice || 0 | unitPrice("￥") }}
+                    {{ $filters.unitPrice(overViewList.refundOrderPrice || 0, "￥") }}
                   </div>
                 </div>
               </div>
@@ -142,9 +142,9 @@
           </div>
         </div>
       </div>
-    </Card>
+    </el-card>
 
-    <Card class="card">
+    <el-card class="card">
       <div>
         <h4>交易趋势</h4>
         <div></div>
@@ -153,49 +153,108 @@
       <div>
         <div id="orderChart"></div>
       </div>
-    </Card>
+    </el-card>
 
-    <Card class="card">
-      <div>
-        <h4>订退单统计</h4>
-        <div class="breadcrumb" style="margin-bottom: 20px">
-          <RadioGroup
-            v-model="orderOrRefund"
-            type="button"
-            size="small"
-            button-style="solid"
-          >
-            <Radio :label="1">订单</Radio>
-            <Radio :label="0">退单</Radio>
-          </RadioGroup>
-        </div>
-        <div>
-          <Table stripe :columns="columns" :data="data"></Table>
-        </div>
-        <!-- (index) => {
-              refundParams.pageNumber = index;
-            } -->
-        <!-- (size) => {
-              (refundParams.pageSize = size), (refundParams.pageNumber = 1);
-            } -->
-        <Page
-          v-if="showRecords"
-          size="small"
-          @on-change="
-            pageNumberChange
-          "
-          @on-page-size-change="
-            pageSizeChange
-          "
-          class="mt_10"
-          show-total
-          show-sizer
-          show-elevator
-          :total="total"
-          :page-size-opts="[20, 50, 100]"
-        />
-      </div>
-    </Card>
+    <el-card class="card">
+      <el-tabs v-model="orderOrRefund">
+        <el-tab-pane label="订单" name="order">
+          <el-table stripe :data="data" style="width: 100%">
+            <el-table-column type="expand" width="50">
+              <template #default="{ row }">
+                <orderRow v-if="row" :res="row" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="storeName" label="商家名称" min-width="120" />
+            <el-table-column prop="memberName" label="用户名" min-width="100" />
+            <el-table-column label="订单状态" min-width="100">
+              <template #default="{ row }">
+                <span v-if="row">{{ orderStatusList[row.orderStatus] }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createTime" label="创建时间" min-width="160" />
+            <el-table-column label="支付时间" min-width="160">
+              <template #default="{ row }">
+                <span v-if="row">{{ row.paymentTime || "暂无" }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="价格" min-width="110">
+              <template #default="{ row }">
+                <span v-if="row" :style="{ color: $mainColor }">
+                  {{ $filters.unitPrice(row.flowPrice, "￥") }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="80" align="center">
+              <template #default="{ row }">
+                <a v-if="row" class="link-text" @click="goDetail(row)">查看</a>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="退单" name="refund">
+          <el-table stripe :data="data" style="width: 100%">
+            <el-table-column type="expand" width="50">
+              <template #default="{ row }">
+                <refundRow v-if="row" :res="row" />
+              </template>
+            </el-table-column>
+            <el-table-column label="商品图片" width="90" align="center">
+              <template #default="{ row }">
+                <img
+                  v-if="row && row.goodsImage"
+                  :src="row.goodsImage"
+                  style="width: 60px; vertical-align: middle"
+                  alt=""
+                />
+              </template>
+            </el-table-column>
+            <el-table-column prop="goodsName" label="商品名称" min-width="140" show-overflow-tooltip />
+            <el-table-column prop="storeName" label="商家名称" min-width="120" />
+            <el-table-column label="售后单类型" min-width="100">
+              <template #default="{ row }">
+                <span v-if="row">{{ serviceTypeList[row.serviceType] }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="售后单状态" min-width="120">
+              <template #default="{ row }">
+                <span v-if="row">{{ serviceStatusList[row.serviceStatus] }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="退款时间" min-width="160">
+              <template #default="{ row }">
+                <span v-if="row">{{ row.refundTime || "暂无" }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="申请退款金额" min-width="120">
+              <template #default="{ row }">
+                <span v-if="row" :style="{ color: $mainColor }">
+                  {{ $filters.unitPrice(row.applyRefundPrice, "￥") }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="reason" label="申请原因" min-width="120" show-overflow-tooltip />
+            <el-table-column label="实际金额" min-width="110">
+              <template #default="{ row }">
+                <span v-if="row">{{ $filters.unitPrice(row.flowPrice || 0, "￥") }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="90" align="center">
+              <template #default="{ row }">
+                <a v-if="row" class="link-text" @click="goDetail(row)">查看</a>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+      <el-pagination
+        v-if="showRecords"
+        v-model:current-page="refundParams.pageNumber"
+        v-model:page-size="refundParams.pageSize"
+        class="mt_10"
+        :total="total"
+        :page-sizes="[20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        size="small"
+      />
+    </el-card>
   </div>
 </template>
 <script>
@@ -210,7 +269,7 @@ export default {
 
   data() {
     return {
-      orderOrRefund: 1, // 订单还是退单
+      orderOrRefund: "order", // order | refund
       total: 0, // 总数
       // 订单状态
       orderStatusList: {
@@ -246,185 +305,7 @@ export default {
       },
       //
 
-      data: [], //定退单存储值
-
-      columns: [], // 定退单title
-
-      orderColumns: [
-        // 表头
-        {
-          type: "expand",
-          width: 50,
-          render: (h, params) => {
-            return h(orderRow, {
-              props: {
-                res: params.row,
-              },
-            });
-          },
-        },
-        {
-          title: "商家名称",
-          key: "storeName",
-        },
-        {
-          title: "用户名",
-          key: "memberName",
-        },
-
-        {
-          title: "订单状态",
-          key: "orderStatus",
-          render: (h, params) => {
-            return h("div", this.orderStatusList[params.row.orderStatus]);
-          },
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-        },
-
-        {
-          title: "支付时间",
-          key: "paymentTime",
-          render: (h, params) => {
-            return h("div", params.row.paymentTime || "暂无");
-          },
-        },
-        {
-          title: "价格",
-          key: "flowPrice",
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          render: (h, params) => {
-            return h(
-              'a',
-              {
-                style: {
-                  color: '#2d8cf0',
-                  cursor: 'pointer',
-                  textDecoration: 'none'
-                },
-                on: {
-                  click: () => {
-                    const { sn } = params.row
-                    this.$router.push({
-                      query: { sn },
-                      path: this.orderOrRefund == 1 ? 'order-detail' : 'after-order-detail' + '?sn=' + sn
-                    })
-                  }
-                }
-              },
-              '查看'
-            )
-          },
-        },
-      ],
-      refundColumns: [
-        // 表头
-        {
-          type: "expand",
-          width: 50,
-          render: (h, params) => {
-            return h(refundRow, {
-              props: {
-                res: params.row,
-              },
-            });
-          },
-        },
-        {
-          title: "商品图片",
-          key: "goodsImage",
-          render: (h, params) => {
-            return h("img", {
-              attrs: {
-                src: params.row.goodsImage,
-              },
-              style: {
-                width: "60px",
-                verticalAlign: "middle",
-              },
-            });
-          },
-        },
-
-        {
-          title: "商品名称",
-          key: "goodsName",
-        },
-        {
-          title: "商家名称",
-          key: "storeName",
-        },
-        {
-          title: "售后单类型",
-          key: "serviceType",
-          render: (h, params) => {
-            return h("div", this.serviceTypeList[params.row.serviceType]);
-          },
-        },
-        {
-          title: "售后单状态",
-          key: "serviceStatus",
-          render: (h, params) => {
-            return h("div", this.serviceStatusList[params.row.serviceStatus]);
-          },
-        },
-        {
-          title: "退款时间",
-          key: "refundTime",
-          render: (h, params) => {
-            return h("div", params.row.refundTime || "暂无");
-          },
-        },
-        {
-          title: "申请退款金额",
-          key: "applyRefundPrice",
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.applyRefundPrice,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "申请原因",
-          key: "reason",
-        },
-        {
-          title: "实际金额",
-          key: "flowPrice",
-          render: (h, params) => {
-            return h(
-              "div",
-              this.$options.filters.unitPrice(params.row.flowPrice?params.row.flowPrice:0, "￥")
-            );
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          render: (h, params) => {
-            return h('Button',{
-              props:{
-                size:'small'
-              },
-              on:{
-                click: () => {
-                 const { sn } = params.row
-                  this.$router.push({
-                    query: {sn},
-                    path: this.orderOrRefund == 1 ? 'order-detail' : 'after-order-detail' + '?sn='+sn
-                  })
-                }
-              }
-            },'查看')
-          },
-        },
-      ],
+      data: [],
 
       // 交易概况
       transactionList: [
@@ -515,7 +396,7 @@ export default {
     },
     orderOrRefund() {
       this.showRecords = false;
-      this.$set(this.refundParams, "pageNumber", 1);
+      this.refundParams.pageNumber = 1;
       this.getOrderList();
     },
     orderParams: {
@@ -532,13 +413,10 @@ export default {
     },
   },
   methods: {
-    pageNumberChange(val){
-      this.refundParams.pageNumber = val
-      this.getOrderList();
-    },
-    pageSizeChange(val){
-      this.refundParams.pageSize = val
-      this.getOrderList();
+    goDetail(row) {
+      const sn = row.sn;
+      const path = this.orderOrRefund === "order" ? "order-detail" : "after-order-detail";
+      this.$router.push({ path, query: { sn } });
     },
     // 订单图
     initOrderChart() {
@@ -618,7 +496,7 @@ export default {
     // 统计相关订单统计
     async getOrderList() {
       let res;
-      if (this.orderOrRefund == 1) {
+      if (this.orderOrRefund === "order") {
         // 订单
         res = await API_Goods.statisticsOrderList(this.refundParams);
       } else {
@@ -628,8 +506,6 @@ export default {
       if (res.success) {
         this.showRecords = true;
         this.data = res.result.records;
-        this.columns =
-          this.orderOrRefund == 1 ? this.orderColumns : this.refundColumns;
         this.total = res.result.total;
       }
     },
@@ -789,7 +665,7 @@ export default {
       z-index: 2;
     }
   }
-  ::v-deep .box {
+  :deep(.box){
     color: #fff;
     position: absolute;
 
@@ -866,4 +742,12 @@ h4 {
 .card {
   margin-bottom: 10px;
 }
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.mt_10 {
+  margin-top: 10px;
+}
 </style>
diff --git a/manager/src/views/statistics/order/orderDetail.vue b/manager/src/views/statistics/order/orderDetail.vue
index 36ea24cc..0adb6f18 100644
--- a/manager/src/views/statistics/order/orderDetail.vue
+++ b/manager/src/views/statistics/order/orderDetail.vue
@@ -5,7 +5,7 @@
       <div class="shop-item">
         <div class="label-item">
           <span>订单来源</span>
-          <span>{{ res.clientType | clientTypeWay }}</span>
+          <span>{{ $filters.clientTypeWay(res.clientType) }}</span>
         </div>
         <div class="label-item">
           <span>订单状态</span>
@@ -67,17 +67,15 @@
           <div class="goods-title">
             <div>{{ item.name }}</div>
             <div>{{ "x" + item.num }}</div>
-            <div class="goods-price">{{ res.flowPrice | unitPrice("￥") }}</div>
+            <div class="goods-price">{{ $filters.unitPrice(res.flowPrice, "￥") }}</div>
           </div>
         </div>
       </div>
       <div class="count-price">
         <div class="label-item">
           <span>总价格</span>
-          <span class="flowPrice">
-            <priceColorScheme :value="row.flowPrice" :color="$mainColor"></priceColorScheme>
-
-          </span>
+          <span class="flowPrice" :style="{ color: $mainColor }">
+            {{ $filters.unitPrice(res.flowPrice, "￥") }}</span>
         </div>
       </div>
     </div>
diff --git a/manager/src/views/statistics/order/refundOrder.vue b/manager/src/views/statistics/order/refundOrder.vue
index c8181fb7..d16a7db1 100644
--- a/manager/src/views/statistics/order/refundOrder.vue
+++ b/manager/src/views/statistics/order/refundOrder.vue
@@ -14,13 +14,16 @@
 
         <div class="label-item">
           <span>退款时间</span>
-          <span>{{res.refundTime ? (new Date(res.refundTime).getTime()/1000 | unixToDate) : '暂无'}}</span>
+          <span>{{
+            res.refundTime
+              ? $filters.unixToDate(new Date(res.refundTime).getTime() / 1000)
+              : "暂无"
+          }}</span>
         </div>
         <div class="label-item">
           <span>申请退款金额</span>
-          <span>
-            <priceColorScheme :value="res.applyRefundPrice" :color="$mainColor"></priceColorScheme>
-          </span>
+          <span :style="{ color: $mainColor }">
+            {{ $filters.unitPrice(res.applyRefundPrice, "￥") }}</span>
         </div>
         <div class="label-item">
           <span>商家备注</span>
@@ -56,7 +59,7 @@
           <div class="goods-title">
             <div>{{res.goodsName}}</div>
             <div>{{'x'+res.num}}</div>
-            <div class="goods-price">{{res.flowPrice |  unitPrice('￥')}}</div>
+            <div class="goods-price">{{ $filters.unitPrice(res.flowPrice, "￥") }}</div>
 
           </div>
 
@@ -65,7 +68,7 @@
       <div class="count-price">
         <div class="label-item">
           <span>实际退款金额</span>
-          <span class="flowPrice">{{res.flowPrice | unitPrice('￥')}}</span>
+          <span class="flowPrice">{{ $filters.unitPrice(res.flowPrice, "￥") }}</span>
         </div>
       </div>
     </div>
diff --git a/manager/src/views/statistics/traffic.vue b/manager/src/views/statistics/traffic.vue
index 4d133beb..21c69653 100644
--- a/manager/src/views/statistics/traffic.vue
+++ b/manager/src/views/statistics/traffic.vue
@@ -1,54 +1,43 @@
 <template>
   <div class="wrapper">
-    <Affix :offset-top="100">
-      <Card class="card fixed-bottom">
+    <el-affix :offset="100">
+      <el-card class="card fixed-bottom">
         <affixTime @selected="clickBreadcrumb" />
-
-      </Card>
-    </Affix>
-    <Card class="card">
+      </el-card>
+    </el-affix>
+    <el-card class="card">
       <div>
         <h4>流量概况</h4>
-
       </div>
       <div class="box">
         <div class="box-item">
-          <div>
-            访客数UV
-          </div>
-          <div>
-            {{uvs||0}}
-          </div>
+          <div>访客数UV</div>
+          <div>{{ uvs || 0 }}</div>
         </div>
-
         <div class="box-item">
-          <div>
-            浏览量PV
-          </div>
-          <div>
-            {{pvs||0}}
-          </div>
+          <div>浏览量PV</div>
+          <div>{{ pvs || 0 }}</div>
         </div>
-
       </div>
+    </el-card>
 
-    </Card>
-
-    <Card class="card">
+    <el-card class="card">
       <div>
         <h4>流量趋势</h4>
         <div id="orderChart"></div>
       </div>
-    </Card>
+    </el-card>
 
-    <Card class="card">
+    <el-card class="card">
       <div>
         <h4>会员流量报表</h4>
-        <Table class="table" stripe :columns="columns" :data="data"></Table>
-
+        <el-table class="table" stripe :data="data" style="width: 100%">
+          <el-table-column prop="date" label="日期" min-width="120" />
+          <el-table-column prop="pvNum" label="浏览量" min-width="120" />
+          <el-table-column prop="uvNum" label="访客数" min-width="120" />
+        </el-table>
       </div>
-    </Card>
-
+    </el-card>
   </div>
 </template>
 <script>
@@ -61,59 +50,20 @@ export default {
 
   data() {
     return {
-      uvs: 0, // 访客数
-      pvs: 0, // 浏览量
-      dateList: [
-        // 选择项
-        {
-          title: "今天",
-          selected: false,
-          value: "TODAY",
-        },
-        {
-          title: "昨天",
-          selected: false,
-          value: "YESTERDAY",
-        },
-        {
-          title: "过去7天",
-          selected: true,
-          value: "LAST_SEVEN",
-        },
-        {
-          title: "过去30天",
-          selected: false,
-          value: "LAST_THIRTY",
-        },
-      ],
-      orderChart: "", // 初始化图表
+      uvs: 0,
+      pvs: 0,
+      orderChart: "",
       params: {
-        // 请求参数
         searchType: "LAST_SEVEN",
         year: "",
         month: "",
       },
-      columns: [
-        {
-          key: "date",
-          title: "日期",
-        },
-        {
-          key: "pvNum",
-          title: "浏览量",
-        },
-        {
-          key: "uvNum",
-          title: "访客数",
-        },
-      ],
-
-      data: [], // 图表数据
+      data: [],
     };
   },
   watch: {
     params: {
-      handler(val) {
+      handler() {
         this.uvs = 0;
         this.pvs = 0;
         this.init();
@@ -122,10 +72,9 @@ export default {
     },
   },
   methods: {
-    // 订单图
     initChart() {
-      let uv = [];
-      let pv = [];
+      const uv = [];
+      const pv = [];
 
       this.data.forEach((item) => {
         uv.push({
@@ -142,9 +91,9 @@ export default {
         });
       });
 
-      let data = [...uv, ...pv];
+      const chartData = [...uv, ...pv];
 
-      this.orderChart.data(data);
+      this.orderChart.data(chartData);
       this.orderChart.scale({
         activeQuantity: {
           range: [0, 1],
@@ -173,19 +122,15 @@ export default {
           stroke: "#fff",
           lineWidth: 1,
         });
-       this.orderChart.area().position("date*pv").color("title").shape("smooth");
+      this.orderChart.area().position("date*pv").color("title").shape("smooth");
 
       this.orderChart.render();
     },
-    // 通过时间来筛选
-    clickBreadcrumb(item, index) {
-      let callback = JSON.parse(JSON.stringify(item));
-
-      this.params = callback;
+    clickBreadcrumb(item) {
+      this.params = JSON.parse(JSON.stringify(item));
     },
-    // 初始化数据
     init() {
-      this.orderChart ? this.orderChart.clear() : ''
+      this.orderChart ? this.orderChart.clear() : "";
       API_Member.getStatisticsList(this.params).then((res) => {
         if (res.result) {
           this.data = res.result;
diff --git a/manager/src/views/sys/app-version/appVersion.vue b/manager/src/views/sys/app-version/appVersion.vue
index b835fdee..ab6a41c9 100644
--- a/manager/src/views/sys/app-version/appVersion.vue
+++ b/manager/src/views/sys/app-version/appVersion.vue
@@ -1,118 +1,165 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form" @keydown.enter.native="handleSearch">
-        <Form-item label="系统类型" prop="orderSn">
-          <Select v-model="searchForm.type" placeholder="请选择系统类型" clearable style="width: 240px">
-            <Option value="IOS">苹果</Option>
-            <Option value="ANDROID">安卓</Option>
-          </Select>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
-      </Form>
-    </Card>
-    <Card>
-      <Button class="mt_10 mb_10" @click="addAppVersion" type="primary">添加</Button>
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="系统类型" prop="orderSn">
+          <el-select v-model="searchForm.type" placeholder="请选择系统类型" clearable style="width: 240px">
+            <el-option label="苹果" value="IOS" />
+            <el-option label="安卓" value="ANDROID" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"  ></Table>
+    <el-card>
+      <el-button class="mt_10 mb_10" type="primary" @click="addAppVersion">添加</el-button>
 
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]" size="small"
-          show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
+      <el-table ref="table" v-loading="loading" border :data="data" style="width: 100%">
+        <el-table-column prop="versionName" label="版本名称" min-width="100" />
+        <el-table-column prop="version" label="版本号" min-width="120" />
+        <el-table-column label="强制更新" width="100">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.forceUpdate == 0 ? "非强制" : "强制" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="类型" min-width="80">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.type == "IOS" ? "苹果" : "安卓" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="versionUpdateDate" label="更新时间" min-width="120" sortable />
+        <el-table-column label="操作" width="230" align="center" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row" class="ops">
+              <a class="link-text" @click="detail(row)">查看</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="editAppVersion(row)">修改</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="1000">
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="版本名称" prop="versionName">
-          <Input v-model="form.versionName" maxlength="15" clearable style="width: 40%" />
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
 
-        </FormItem>
-        <FormItem label="版本号" prop="version">
-          <Input v-model="form.version" maxlength="15" clearable style="width: 40%" />
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="1000px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+        <el-form-item label="版本名称" prop="versionName">
+          <el-input v-model="form.versionName" maxlength="15" clearable style="width: 40%" />
+        </el-form-item>
+        <el-form-item label="版本号" prop="version">
+          <el-input v-model="form.version" maxlength="15" clearable style="width: 40%" />
           <span class="tips">在移动端项目->manifest.json->基础配置->应用版本名称中查看</span>
-        </FormItem>
-        <FormItem label="更新时间" prop="versionUpdateDate">
-          <DatePicker v-model="form.versionUpdateDate" type="datetime" format="yyyy-MM-dd HH:mm:ss" clearable placeholder="请选择" style="width: 200px"></DatePicker>
-        </FormItem>
-        <FormItem label="强制更新">
-          <RadioGroup type="button" button-style="solid" v-model="form.forceUpdate">
-            <Radio :label="1">强制更新</Radio>
-            <Radio :label="0">非强制更新</Radio>
-          </RadioGroup>
+        </el-form-item>
+        <el-form-item label="更新时间" prop="versionUpdateDate">
+          <el-date-picker
+            v-model="form.versionUpdateDate"
+            type="datetime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            clearable
+            placeholder="请选择"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="强制更新">
+          <el-radio-group v-model="form.forceUpdate">
+            <el-radio-button :value="1">强制更新</el-radio-button>
+            <el-radio-button :value="0">非强制更新</el-radio-button>
+          </el-radio-group>
           <span class="tips" v-if="form.forceUpdate == 1">
-           强制更新即为应用中必须更新此版本。不更新则无法继续使用App
+            强制更新即为应用中必须更新此版本。不更新则无法继续使用App
           </span>
           <span class="tips" v-if="form.forceUpdate == 0">
-           非强制更新为应用中推荐更新此版本。不更新还可以继续使用
+            非强制更新为应用中推荐更新此版本。不更新还可以继续使用
           </span>
-        </FormItem>
-        <FormItem label="类型">
-          <RadioGroup type="button" button-style="solid" v-model="form.type">
-            <Radio label="IOS">苹果</Radio>
-            <Radio label="ANDROID">安卓</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="下载地址" prop="downloadUrl">
-          <Input v-model="form.downloadUrl" maxlength="100" clearable style="width: 40%" />
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-radio-group v-model="form.type">
+            <el-radio-button value="IOS">苹果</el-radio-button>
+            <el-radio-button value="ANDROID">安卓</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="下载地址" prop="downloadUrl">
+          <el-input v-model="form.downloadUrl" maxlength="100" clearable style="width: 40%" />
           <span class="tips" v-if="form.type == 'IOS'">
             AppStore中App项目下载目录。可从下载App页面点击分享，拷贝链接
           </span>
-          <span class="tips" v-else>
-            安卓该链接为应用的下载地址
-          </span>
-        </FormItem>
-        <FormItem class="form-item-view-el" label="更新内容" prop="content">
-          <Input v-model="form.content" :rows="6" maxlength="100" show-word-limit type="textarea" placeholder="Enter something..." />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="saveAppVersion">保存</Button>
-      </div>
-    </Modal>
-    <div>
-      <!-- 查看版本信息 -->
-      <Modal :title="queryModalTitle" v-model="queryModalVisible" :width="700">
-        <Form>
-          <div class="div-version">
-            <FormItem label="版本名称:">
-              {{form.versionName}}
-            </FormItem>
-          </div>
-          <div class="div-version">
-            <FormItem label="版本号:">
-              {{form.version}}
-            </FormItem>
-          </div>
+          <span class="tips" v-else>安卓该链接为应用的下载地址</span>
+        </el-form-item>
+        <el-form-item class="form-item-view-el" label="更新内容" prop="content">
+          <el-input
+            v-model="form.content"
+            :rows="6"
+            maxlength="100"
+            show-word-limit
+            type="textarea"
+            placeholder="Enter something..."
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="saveAppVersion">保存</el-button>
+      </template>
+    </el-dialog>
 
-          <FormItem label="更新时间:">
-            <div>
-              {{versionUpdateDate}}
-            </div>
-          </FormItem>
-          <FormItem label="强制更新:">
-            <span v-if="form.forceUpdate == 1">强制更新</span>
-            <span v-else>非强制更新</span>
-          </FormItem>
-          <FormItem label="类型">
-            <span v-if="form.type == 'IOS'">IOS</span>
-            <span v-else>安卓</span>
-          </FormItem>
-          <FormItem label="下载地址:">
-            {{form.downloadUrl}}
-          </FormItem>
-          <FormItem label="更新内容:">
-            <div v-html="form.content">
-
-            </div>
-          </FormItem>
-        </Form>
-        <div slot="footer">
-          <Button type="text" @click="queryModalVisible = false">取消</Button>
+    <el-dialog v-model="queryModalVisible" :title="queryModalTitle" width="700px">
+      <el-form label-width="100px">
+        <div class="div-version">
+          <el-form-item label="版本名称:">{{ form.versionName }}</el-form-item>
         </div>
-      </Modal>
-    </div>
+        <div class="div-version">
+          <el-form-item label="版本号:">{{ form.version }}</el-form-item>
+        </div>
+        <el-form-item label="更新时间:">
+          <div>{{ versionUpdateDate }}</div>
+        </el-form-item>
+        <el-form-item label="强制更新:">
+          <span v-if="form.forceUpdate == 1">强制更新</span>
+          <span v-else>非强制更新</span>
+        </el-form-item>
+        <el-form-item label="类型">
+          <span v-if="form.type == 'IOS'">IOS</span>
+          <span v-else>安卓</span>
+        </el-form-item>
+        <el-form-item label="下载地址:">{{ form.downloadUrl }}</el-form-item>
+        <el-form-item label="更新内容:">
+          <div v-html="form.content"></div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="queryModalVisible = false">取消</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -123,22 +170,20 @@ export default {
   name: "appVersion",
   data() {
     return {
-      queryModalVisible: false, // 版本信息modal
-      queryModalTitle: "查看更新信息", // modal标题
-      loading: true, // 表单加载状态
-      modalVisible: false, // 添加app版本模态框
-      modalTitle: "", // 添加app版本标题
-      modalType: 0, // 新增、编辑标识
+      queryModalVisible: false,
+      queryModalTitle: "查看更新信息",
+      loading: true,
+      modalVisible: false,
+      modalTitle: "",
+      modalType: 0,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
         type: "",
       },
       form: {
-        // 添加或编辑表单对象初始化数据
         versionName: "",
         version: "",
         forceUpdate: 1,
@@ -147,164 +192,33 @@ export default {
         content: "",
         versionUpdateDate: "",
       },
-      versionUpdateDate: "", // 更新时间
-      // 表单验证规则
+      versionUpdateDate: "",
       formValidate: {
-        version: [
-          { required: true, message: "版本号不能为空", trigger: "blur" },
-        ],
-        versionName: [
-          { required: true, message: "版本名称不能为空", trigger: "blur" },
-        ],
-        downloadUrl: [
-          { required: true, message: "下载地址不能为空", trigger: "blur" },
-        ],
+        version: [{ required: true, message: "版本号不能为空", trigger: "blur" }],
+        versionName: [{ required: true, message: "版本名称不能为空", trigger: "blur" }],
+        downloadUrl: [{ required: true, message: "下载地址不能为空", trigger: "blur" }],
         versionUpdateDate: [{ required: true, message: "更新时间不能为空" }],
       },
-      submitLoading: false, // 添加或编辑提交状态
-      columns: [
-        {
-          title: "版本名称",
-          key: "versionName",
-          minWidth: 100,
-        },
-        {
-          title: "版本号",
-          key: "version",
-          minWidth: 120,
-        },
-        {
-          title: "强制更新",
-          key: "forceUpdate",
-          width: 100,
-          render: (h, params) => {
-            return h(
-              "div",
-              {
-                props: {
-                  color: params.row.forceUpdate ? "primary" : "default",
-                },
-              },
-              params.row.forceUpdate == 0 ? "非强制" : "强制"
-            );
-          },
-        },
-        {
-          title: "类型",
-          key: "type",
-          minWidth: 80,
-          render: (h, params) => {
-            if (params.row.type == "IOS") {
-              return h("div", [h("span", {}, "苹果")]);
-            } else {
-              return h("div", [h("span", {}, "安卓")]);
-            }
-          },
-        },
-
-        {
-          title: "更新时间",
-          key: "versionUpdateDate",
-          minWidth: 120,
-          sortable: true,
-        },
-
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 230,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.detail(params.row);
-                    },
-                  },
-                },
-                "查看"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.editAppVersion(params.row);
-                    },
-                  },
-                },
-                "修改"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      submitLoading: false,
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 获取表格数据
     init() {
       this.getData();
     },
-    // 分页 修改页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getData();
     },
-    // 分页 修改页数
-    changePageSize(v) {
+    changePageSize() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
       this.getData();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.getData();
     },
-    // 获取数据
     getData() {
       this.loading = true;
       API_Setting.appVersionPage(this.searchForm).then((res) => {
@@ -314,16 +228,12 @@ export default {
           this.total = res.result.total;
         }
       });
-      this.total = this.data.length;
-      this.loading = false;
     },
-    //添加app版本信息
     addAppVersion() {
       this.modalVisible = true;
       this.modalTitle = "添加APP版本信息";
-      const versionUpdateDate = this.$options.filters.unixToDate(
-        new Date() / 1000
-      );
+      this.modalType = 0;
+      const versionUpdateDate = this.$filters.unixToDate(new Date() / 1000);
       this.form = {
         forceUpdate: 0,
         type: "IOS",
@@ -331,30 +241,25 @@ export default {
         content: " ",
       };
     },
-    //编辑app版本信息
     editAppVersion(v) {
       this.modalVisible = true;
       this.modalTitle = "修改APP版本信息";
       this.modalType = 1;
       v.forceUpdate ? (v.forceUpdate = 1) : (v.forceUpdate = 0);
       this.form = v;
-
-      console.log(this.form);
     },
-    //保存app版本信息
     saveAppVersion() {
       this.$refs.form.validate((valid) => {
         if (valid) {
           this.submitLoading = true;
-          if(JSON.stringify(this.form.versionUpdateDate).includes('T')){
-              const versionUpdateDate = this.$options.filters.unixToDate(
+          if (JSON.stringify(this.form.versionUpdateDate).includes("T")) {
+            const versionUpdateDate = this.$filters.unixToDate(
               this.form.versionUpdateDate / 1000
             );
             this.form.versionUpdateDate = versionUpdateDate;
             this.form.updateTime = versionUpdateDate;
           }
           if (this.modalType == 0) {
-            // 添加 避免编辑后传入id等数据 记得删除
             delete this.form.id;
             API_Setting.addVersion(this.form).then((res) => {
               this.submitLoading = false;
@@ -377,14 +282,12 @@ export default {
         }
       });
     },
-    // 删除app版本信息
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
         content: "您确认要删除么?",
         loading: true,
         onOk: () => {
-          // 删除
           API_Setting.deleteVersion(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -395,11 +298,9 @@ export default {
         },
       });
     },
-    // 查看
     detail(v) {
       this.queryModalVisible = true;
       this.form = JSON.parse(JSON.stringify(v));
-      //时间格式化有问题，所以另外单独给时间赋值
       this.versionUpdateDate = this.form.versionUpdateDate;
     },
   },
@@ -416,4 +317,14 @@ export default {
   margin-left: 10px;
   color: #999;
 }
+.ops a {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.ops span {
+  display: inline-block;
+  margin: 0 8px;
+  color: #dcdee2;
+}
 </style>
diff --git a/manager/src/views/sys/department-manage/departmentManage.vue b/manager/src/views/sys/department-manage/departmentManage.vue
index c5bafa04..f6d70de4 100644
--- a/manager/src/views/sys/department-manage/departmentManage.vue
+++ b/manager/src/views/sys/department-manage/departmentManage.vue
@@ -1,169 +1,108 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation">
-        <i-switch v-model="strict" size="large" style="margin-right: 5px">
-          <span slot="open">级联</span>
-          <span slot="close">单选</span>
-        </i-switch>
-        <Button @click="addRoot">添加部门</Button>
-        <Button @click="add" type="primary">添加子部门</Button>
-        <Button @click="delAll">批量删除</Button>
-        <Button @click="getParentList">刷新</Button>
-      </Row>
-      <Row type="flex" justify="start">
-        <Col :md="8" :lg="8" :xl="6">
-          <Alert show-icon>
+    <el-card>
+      <el-row class="operation">
+        <el-switch
+          v-model="strict"
+          active-text="级联"
+          inactive-text="单选"
+          style="margin-right: 5px"
+        />
+        <el-button @click="addRoot">添加部门</el-button>
+        <el-button type="primary" @click="add">添加子部门</el-button>
+        <el-button @click="delAll">批量删除</el-button>
+        <el-button @click="getParentList">刷新</el-button>
+      </el-row>
+      <el-row type="flex" justify="start">
+        <el-col :md="8" :lg="8" :xl="6">
+          <el-alert type="info" show-icon :closable="false">
             当前选择编辑：
             <span class="select-title">{{ editTitle }}</span>
-            <a class="select-clear" v-if="form.id" @click="cancelSelect"
-              >取消选择</a
-            >
-          </Alert>
-          <div class="tree-bar" :style="{ maxHeight: maxHeight }">
-            <Tree
-              ref="tree"
+            <a v-if="form.id" class="select-clear" @click="cancelSelect">取消选择</a>
+          </el-alert>
+          <div v-loading="loading" class="tree-bar" :style="{ maxHeight: maxHeight }">
+            <el-tree
+              ref="treeRef"
               :data="data"
-              :load-data="loadData"
+              lazy
+              :load="loadNode"
+              :props="treeProps"
+              node-key="id"
               show-checkbox
-              @on-check-change="changeSelect"
-              @on-select-change="selectTree"
+              highlight-current
               :check-strictly="!strict"
-            ></Tree>
-            <Spin size="large" fix v-if="loading"></Spin>
+              :current-node-key="currentNodeKey"
+              @node-click="onNodeClick"
+              @check="onCheckChange"
+            />
           </div>
-        </Col>
-        <Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
-          <Form
-            ref="form"
-            :model="form"
-            :label-width="100"
-            :rules="formValidate"
-          >
-            <!-- <FormItem label="上级部门" prop="parentTitle">
-              <div style="display: flex">
-                <Input
-                  v-model="form.parentTitle"
-                  readonly
-                  style="margin-right: 10px"
-                />
-                <Poptip
-                  transfer
-                  trigger="click"
-                  placement="right-start"
-                  title="选择上级部门"
-                  width="250"
-                >
-                  <Button icon="md-list">选择部门</Button>
-                  <div
-                    slot="content"
-                    style="position: relative; min-height: 5vh"
-                  >
-                    <Tree
-                      :data="dataEdit"
-                      :load-data="loadData"
-                      @on-select-change="selectTreeEdit"
-                    ></Tree>
-                    <Spin size="large" fix v-if="loadingEdit"></Spin>
-                  </div>
-                </Poptip>
-              </div>
-            </FormItem> -->
-            <FormItem label="部门名称" prop="title">
-              <Input v-model="form.title" />
-            </FormItem>
-            <FormItem label="选择角色">
-              <Select
-                :loading="userLoading"
-                not-found-text="暂无角色"
+        </el-col>
+        <el-col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
+          <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+            <el-form-item label="部门名称" prop="title">
+              <el-input v-model="form.title" />
+            </el-form-item>
+            <el-form-item label="选择角色">
+              <el-select
                 v-model="selectedRole"
                 multiple
+                :loading="userLoading"
+                placeholder="请选择角色"
+                style="width: 100%"
               >
-                <Option v-for="item in users" :value="item.id" :key="item.id">{{
-                  item.name
-                }}</Option>
-              </Select>
-            </FormItem>
-
-            <FormItem label="排序值" prop="sortOrder">
-              <Tooltip
-                trigger="hover"
-                placement="right"
-                content="值越小越靠前，支持小数"
-              >
-                <InputNumber
-                  :max="1000"
-                  :min="0"
-                  v-model="form.sortOrder"
-                ></InputNumber>
-              </Tooltip>
-            </FormItem>
-            <!--   <FormItem label="是否启用" prop="status">
-              <i-switch size="large" v-model="form.status" :true-value="0" :false-value="-1">
-                <span slot="open">启用</span>
-                <span slot="close">禁用</span>
-              </i-switch>
-            </FormItem> -->
-            <Form-item>
-              <Button
-                style="margin-right: 5px"
-                @click="submitEdit"
-                :loading="submitLoading"
+                <el-option
+                  v-for="item in users"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="排序值" prop="sortOrder">
+              <el-tooltip placement="right" content="值越小越靠前，支持小数">
+                <el-input-number v-model="form.sortOrder" :max="1000" :min="0" />
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item>
+              <el-button
                 type="primary"
-                >修改并保存</Button
+                style="margin-right: 5px"
+                :loading="submitLoading"
+                @click="submitEdit"
               >
-              <Button @click="handleReset">重置</Button>
-            </Form-item>
-          </Form>
-        </Col>
-      </Row>
-    </Card>
+                修改并保存
+              </el-button>
+              <el-button @click="handleReset">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </el-card>
 
-    <Modal
-      :title="modalTitle"
+    <el-dialog
       v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
     >
-      <Form
-        ref="formAdd"
-        :model="formAdd"
-        :label-width="85"
-        :rules="formValidate"
-      >
+      <el-form ref="formAdd" :model="formAdd" label-width="85px" :rules="formValidate">
         <div v-if="showParent">
-          <FormItem label="上级部门：">{{ form.title }}</FormItem>
+          <el-form-item label="上级部门：">{{ form.title }}</el-form-item>
         </div>
-        <FormItem label="部门名称" prop="title">
-          <Input v-model="formAdd.title" />
-        </FormItem>
-        <FormItem label="排序值" prop="sortOrder">
-          <Tooltip
-            trigger="hover"
-            placement="right"
-            content="值越小越靠前，支持小数"
-          >
-            <InputNumber
-              :max="1000"
-              :min="0"
-              v-model="formAdd.sortOrder"
-            ></InputNumber>
-          </Tooltip>
-        </FormItem>
-        <!--   <FormItem label="是否启用" prop="status">
-          <i-switch size="large" v-model="formAdd.status" :true-value="0" :false-value="-1">
-            <span slot="open">启用</span>
-            <span slot="close">禁用</span>
-          </i-switch>
-        </FormItem> -->
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="cancelAdd">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitAdd"
-          >提交</Button
-        >
-      </div>
-    </Modal>
+        <el-form-item label="部门名称" prop="title">
+          <el-input v-model="formAdd.title" />
+        </el-form-item>
+        <el-form-item label="排序值" prop="sortOrder">
+          <el-tooltip placement="right" content="值越小越靠前，支持小数">
+            <el-input-number v-model="formAdd.sortOrder" :max="1000" :min="0" />
+          </el-tooltip>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="cancelAdd">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitAdd">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -178,25 +117,31 @@ import {
   getRoleList,
   updateDepartmentRole,
 } from "@/api/index";
+
 export default {
   name: "department-manage",
   data() {
     return {
-      loading: true, // 加载状态
-      maxHeight: "500px", // 最大高度
-      strict: true, // 级联还是单选
-      userLoading: false, // 选择角色加载状态
-      loadingEdit: false, // 编辑加载状态
-      modalVisible: false, // modal显隐
-      selectList: [], // 已选列表
-      selectCount: 0, // 已选总数
-      showParent: false, // 展示父级
-      modalTitle: "", // modal标题
-      editTitle: "", // 编辑标题
-      selectedRole: [], //选择的角色
-      searchKey: "", // 搜索关键字
+      loading: true,
+      maxHeight: "500px",
+      strict: true,
+      userLoading: false,
+      loadingEdit: false,
+      modalVisible: false,
+      selectList: [],
+      selectCount: 0,
+      showParent: false,
+      modalTitle: "",
+      editTitle: "",
+      selectedRole: [],
+      searchKey: "",
+      currentNodeKey: null,
+      treeProps: {
+        label: "title",
+        children: "children",
+        isLeaf: "isLeaf",
+      },
       form: {
-        // 提交表单
         id: "",
         title: "",
         parentId: "",
@@ -204,10 +149,8 @@ export default {
         sortOrder: 0,
         status: 0,
       },
-
-      formAdd: {}, // 新增表单
+      formAdd: {},
       formValidate: {
-        // 验证规则
         title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
         sortOrder: [
           {
@@ -218,17 +161,16 @@ export default {
           },
         ],
       },
-      submitLoading: false, // 提交loading
-      data: [], // 部门数据
-      dataEdit: [], // 编辑时部门数据
-      users: [], // 用户
+      submitLoading: false,
+      data: [],
+      dataEdit: [],
+      users: [],
     };
   },
   methods: {
     init() {
       this.getParentList();
     },
-    // 获取部门数据
     getParentList() {
       this.loading = true;
       initDepartment().then((res) => {
@@ -238,61 +180,60 @@ export default {
         }
       });
     },
-    // 动态加载二级数据
-    loadData(item, callback) {
-      loadDepartment(item.id).then((res) => {
+    loadNode(node, resolve) {
+      const id = node.data?.id;
+      if (id === undefined || id === null) {
+        resolve([]);
+        return;
+      }
+      loadDepartment(id).then((res) => {
         this.loadingEdit = false;
         if (res.success) {
-          console.log(res.result);
-          callback(res.result);
+          resolve(res.result || []);
+        } else {
+          resolve([]);
         }
       });
     },
-
-    // 点击树
-    selectTree(v) {
-      if (v.length > 0) {
-        // 转换null为""
-        for (let attr in v[0]) {
-          if (v[0][attr] == null) {
-            v[0][attr] = "";
-          }
-        }
-        let str = JSON.stringify(v[0]);
-        let data = JSON.parse(str);
-
-        this.editTitle = data.title;
-        // 加载部门用户数据
-        this.userLoading = true;
-
-        getUserByDepartmentId(data.id).then((res) => {
-          let way = [];
-          res.result &&
-            res.result.forEach((item) => {
-              way.push(item.roleId);
-            });
-          this.$set(this, "selectedRole", way);
-          console.warn(this.selectedRole);
-        });
-
-        getRoleList({
-          pageNumber: 1,
-          pageSize: 10000,
-        }).then((res) => {
-          this.userLoading = false;
-          console.log(res);
-          if (res.success) {
-            this.users = res.result.records;
-            // 回显
-            this.form = data;
-          }
-        });
-      } else {
+    onNodeClick(data) {
+      if (!data) {
         this.cancelSelect();
+        return;
       }
-    },
+      const row = JSON.parse(JSON.stringify(data));
+      for (const attr in row) {
+        if (row[attr] == null) {
+          row[attr] = "";
+        }
+      }
+      this.editTitle = row.title;
+      this.currentNodeKey = row.id;
+      this.userLoading = true;
 
-    // 排序
+      getUserByDepartmentId(row.id).then((res) => {
+        const way = [];
+        res.result &&
+          res.result.forEach((item) => {
+            way.push(item.roleId);
+          });
+        this.selectedRole = way;
+      });
+
+      getRoleList({
+        pageNumber: 1,
+        pageSize: 10000,
+      }).then((res) => {
+        this.userLoading = false;
+        if (res.success) {
+          this.users = res.result.records;
+          this.form = row;
+        }
+      });
+    },
+    onCheckChange(_data, { checkedNodes }) {
+      this.selectList = checkedNodes;
+      this.selectCount = checkedNodes.length;
+    },
     bubbleSort(array) {
       const len = array.length;
       if (len < 2) return array;
@@ -307,42 +248,33 @@ export default {
       }
       return array;
     },
-
-    // 取消选择
     cancelSelect() {
-      let data = this.$refs.tree.getSelectedNodes()[0];
-      if (data) {
-        data.selected = false;
-      }
+      this.$refs.treeRef?.setCurrentKey(null);
+      this.currentNodeKey = null;
       this.$refs.form.resetFields();
       delete this.form.id;
       this.editTitle = "";
+      this.selectedRole = [];
     },
-    // 选择上级部门
     selectTreeEdit(v) {
       if (v.length > 0) {
-        // 转换null为""
-        for (let attr in v[0]) {
+        for (const attr in v[0]) {
           if (v[0][attr] == null) {
             v[0][attr] = "";
           }
         }
-        let str = JSON.stringify(v[0]);
-        let data = JSON.parse(str);
+        const data = JSON.parse(JSON.stringify(v[0]));
         this.form.parentId = data.id;
         this.form.parentTitle = data.title;
       }
     },
-    // 取消添加部门
     cancelAdd() {
       this.modalVisible = false;
     },
-    // 重置表单
     handleReset() {
       this.$refs.form.resetFields();
       this.form.status = 0;
     },
-    // 提交表单
     submitEdit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
@@ -350,13 +282,12 @@ export default {
             this.$Message.warning("请先点击选择要修改的部门");
             return;
           }
-          let roleWay = [];
+          const roleWay = [];
           this.selectedRole.forEach((item) => {
-            let role = {
+            roleWay.push({
               departmentId: this.form.id,
               roleId: item,
-            };
-            roleWay.push(role);
+            });
           });
 
           Promise.all([
@@ -373,7 +304,6 @@ export default {
         }
       });
     },
-    // 确认添加部门
     submitAdd() {
       this.$refs.formAdd.validate((valid) => {
         if (valid) {
@@ -389,7 +319,6 @@ export default {
         }
       });
     },
-    // 添加子部门
     add() {
       if (this.form.id == "" || this.form.id == null) {
         this.$Message.warning("请先点击选择一个部门");
@@ -397,7 +326,6 @@ export default {
       }
       this.modalTitle = "添加子部门";
       this.showParent = true;
-
       this.formAdd = {
         parentId: this.form.id,
         sortOrder: 0,
@@ -405,7 +333,6 @@ export default {
       };
       this.modalVisible = true;
     },
-    // 添加一级部门
     addRoot() {
       this.modalTitle = "添加一级部门";
       this.showParent = false;
@@ -416,13 +343,6 @@ export default {
       };
       this.modalVisible = true;
     },
-    // 选中回调
-    changeSelect(v) {
-      console.log(v);
-      this.selectCount = v.length;
-      this.selectList = v;
-    },
-    // 批量删除部门
     delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未勾选要删除的数据");
@@ -454,13 +374,13 @@ export default {
     },
   },
   mounted() {
-    // 计算高度
-    let height = document.documentElement.clientHeight;
+    const height = document.documentElement.clientHeight;
     this.maxHeight = Number(height - 287) + "px";
     this.init();
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @import "@/styles/tree-common.scss";
 </style>
diff --git a/manager/src/views/sys/log-manage/logManage.vue b/manager/src/views/sys/log-manage/logManage.vue
index 69edc7ea..cb9bac0e 100644
--- a/manager/src/views/sys/log-manage/logManage.vue
+++ b/manager/src/views/sys/log-manage/logManage.vue
@@ -1,100 +1,68 @@
 <template>
   <div class="search">
-    <Card>
-      <Form
-        ref="searchForm"
-        :model="searchForm"
-        inline
-        :label-width="70"
-        class="search-form"
-      >
-        <Form-item label="搜索日志" prop="searchKey">
-          <Input
-            type="text"
-            v-model="searchForm.searchKey"
-            placeholder="请输入搜索日志内容"
-            clearable
-            style="width: 240px"
-          />
-        </Form-item>
-        <Form-item label="操作人" prop="operatorName">
-          <Input
-            type="text"
-            v-model="searchForm.operatorName"
-            placeholder="请输入操作人"
-            clearable
-            style="width: 240px"
-          />
-        </Form-item>
-        <Form-item label="创建时间">
-          <DatePicker
-            type="daterange"
+    <el-card>
+      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form" @keyup.enter="handleSearch">
+        <el-form-item label="搜索日志" prop="searchKey">
+          <el-input v-model="searchForm.searchKey" placeholder="请输入搜索日志内容" clearable style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="操作人" prop="operatorName">
+          <el-input v-model="searchForm.operatorName" placeholder="请输入操作人" clearable style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-date-picker
             v-model="selectDate"
-            format="yyyy-MM-dd"
+            type="daterange"
+            value-format="YYYY-MM-DD"
             clearable
-            @on-change="selectDateRange"
-            placeholder="选择起始时间"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
             style="width: 240px"
-          ></DatePicker>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn"
-          >搜索</Button
-        >
-      </Form>
-      </Card>
-    <Card>
-      <Row class="operation padding-row">
-        <Button type="dashed" @click="openTip = !openTip">{{
-          openTip ? "关闭提示" : "开启提示"
-        }}</Button>
-      </Row>
-      <div v-show="openTip">
-          <Alert show-icon>
-            <span>展示详细内容</span>
-            <Icon type="ios-bulb-outline" slot="icon"></Icon>
-            <i-switch class="switch" size="large" v-model="showDev">
-              <span slot="open">开发</span>
-              <span slot="close">普通</span>
-            </i-switch>
-          </Alert>
-      </div>
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-      <Table
-        v-if="showDev"
-        :loading="loading"
+    <el-card>
+      <el-table
+        v-loading="loading"
         border
-        :columns="columns_dev"
         :data="data"
         ref="table"
-        sortable="custom"
+        style="width: 100%"
       >
-      </Table>
-      <Table
-        v-else
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-        sortable="custom"
-      >
-      </Table>
+        <el-table-column prop="name" label="操作名称" min-width="100" fixed="left" show-overflow-tooltip />
+        <el-table-column prop="customerLog" label="日志内容" min-width="120" fixed="left" show-overflow-tooltip />
+        <el-table-column prop="username" label="操作用户" width="115" />
+        <el-table-column prop="ip" label="IP" width="150" />
+        <el-table-column prop="ipInfo" label="IP信息" width="150" show-overflow-tooltip />
+        <el-table-column prop="requestUrl" label="请求路径" width="150" show-overflow-tooltip />
+        <el-table-column prop="requestType" label="请求类型" width="130" align="center" />
+        <el-table-column prop="requestParam" label="请求参数" min-width="100" show-overflow-tooltip />
+        <el-table-column prop="costTime" label="耗时-毫秒" width="140" align="center" />
+        <el-table-column label="操作时间" width="170" align="center">
+          <template #default="{ row }">
+            <span v-if="row">{{ $filters.unixToDate(row.createTime / 1000) }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
 
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-totalzx
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -105,12 +73,9 @@ export default {
   name: "log-manage",
   data() {
     return {
-      openTip: false, // 开启提示
-      loading: true, // 加载状态
-      selectDate: null, // 选择时间段
-      showDev: false, //展示进阶日志
+      loading: true,
+      selectDate: null,
       searchForm: {
-        // 请求参数
         type: 1,
         key: "",
         operatorName: "",
@@ -121,199 +86,36 @@ export default {
         sort: "createTime",
         order: "desc",
       },
-      columns: [
-        // 表头
-        {
-          title: "操作名称",
-          key: "name",
-          width: 150,
-          fixed: "left",
-          ellipsis: false,
-          tooltip: true,
-        },
-        {
-          title: "日志内容",
-          key: "customerLog",
-          minWidth: 200,
-          fixed: "left",
-          ellipsis: false,
-          tooltip: true,
-        },
-        {
-          title: "操作用户",
-          minWidth: 115,
-          key: "username",
-          width: 120,
-          tooltip: true,
-        },
-        {
-          title: "操作时间",
-          key: "createTime",
-          align: "center",
-          width: 170,
-          render:(h,params)=>{
-            return h('span',this.$options.filters.unixToDate(params.row.createTime / 1000))
-          }
-        },
-      ],
-      columns_dev: [
-        {
-          title: "操作名称",
-          key: "name",
-          minWidth: 100,
-          fixed: "left",
-          ellipsis: false,
-          tooltip: true,
-        },
-        {
-          title: "日志内容",
-          key: "customerLog",
-          minWidth: 120,
-          fixed: "left",
-          ellipsis: false,
-          tooltip: true,
-        },
-        {
-          title: "操作用户",
-          key: "username",
-          width: 115,
-        },
-        {
-          title: "IP",
-          key: "ip",
-          width: 150,
-        },
-        {
-          title: "IP信息",
-          key: "ipInfo",
-          width: 150,
-          ellipsis: false,
-          tooltip: true,
-        },
-        {
-          title: "请求路径",
-          width: 150,
-          ellipsis: false,
-          tooltip: true,
-          key: "requestUrl",
-        },
-        {
-          title: "请求类型",
-          key: "requestType",
-          width: 130,
-          align: "center",
-          filters: [
-            {
-              label: "GET",
-              value: "GET",
-            },
-            {
-              label: "POST",
-              value: "POST",
-            },
-            {
-              label: "PUT",
-              value: "PUT",
-            },
-            {
-              label: "DELETE",
-              value: "DELETE",
-            },
-          ],
-          filterMultiple: false,
-          filterMethod(value, row) {
-            if (value == "GET") {
-              return row.requestType == "GET";
-            } else if (value == "POST") {
-              return row.requestType == "POST";
-            } else if (value == "PUT") {
-              return row.requestType == "PUT";
-            } else if (value == "DELETE") {
-              return row.requestType == "DELETE";
-            }
-          },
-        },
-        {
-          title: "请求参数",
-          minWidth: 100,
-          key: "requestParam",
-          ellipsis: false,
-          tooltip: true,
-        },
-        {
-          title: "耗时-毫秒",
-          key: "costTime",
-          width: 140,
-          align: "center",
-          filters: [
-            {
-              label: "≤300毫秒",
-              value: 0,
-            },
-            {
-              label: "300毫秒<x<1000毫秒",
-              value: 0.3,
-            },
-            {
-              label: ">1000毫秒",
-              value: 1,
-            },
-          ],
-          filterMultiple: false,
-          filterMethod(value, row) {
-            if (value == 0) {
-              return row.costTime <= 300;
-            } else if (value == 0.3) {
-              return row.costTime > 300 && row.costTime < 1000;
-            } else {
-              return row.costTime > 1000;
-            }
-          },
-        },
-        {
-          title: "操作时间",
-          key: "createTime",
-          align: "center",
-          width: 170,
-          sortType: "desc",
-          render:(h,params)=>{
-            return h('span',this.$options.filters.unixToDate(params.row.createTime / 1000))
-          }
-        },
-      ],
-      data: [], // 日志数据
-      total: 0, // 数据总数
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getLogList();
     },
-    // 分页 修改页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getLogList();
     },
-    // 分页 修改页数
     changePageSize(v) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getLogList();
     },
-    // 起止时间从新赋值
     selectDateRange(v) {
-      if (v) {
+      if (v && v.length === 2) {
         this.searchForm.startDate = v[0];
         this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
       }
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.getLogList();
     },
-    // 获取日志数据
     getLogList() {
       this.loading = true;
       getLogListData(this.searchForm).then((res) => {
@@ -330,8 +132,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.switch{
-  margin-left: 20px;
-}
-</style>
diff --git a/manager/src/views/sys/menu-manage/menu.vue b/manager/src/views/sys/menu-manage/menu.vue
index cb893773..e1728b82 100644
--- a/manager/src/views/sys/menu-manage/menu.vue
+++ b/manager/src/views/sys/menu-manage/menu.vue
@@ -1,191 +1,191 @@
 <template>
   <div class="search">
-    <Card>
-      <!-- 筛选项和操作按钮 -->
-      <Row class="operation">
-        <i-switch
+    <el-card>
+      <el-row class="operation">
+        <el-switch
           v-model="strict"
           class="selectModel"
-          size="large"
+          active-text="级联"
+          inactive-text="单选"
           style="margin-right: 5px"
-        >
-          <span slot="open">级联</span>
-          <span slot="close">单选</span>
-        </i-switch>
-        <Button @click="addRootMenu">添加顶级菜单</Button>
-        <Button @click="addMenu" type="primary">添加子菜单</Button>
-        <Button @click="delAll">批量删除</Button>
-        <Dropdown @on-click="handleDropdown">
-          <Button>
+        />
+        <el-button @click="addRootMenu">添加顶级菜单</el-button>
+        <el-button type="primary" @click="addMenu">添加子菜单</el-button>
+        <el-button @click="delAll">批量删除</el-button>
+        <el-dropdown @command="handleDropdown">
+          <el-button>
             更多操作
-            <Icon type="md-arrow-dropdown"></Icon>
-          </Button>
-          <DropdownMenu slot="list">
-            <DropdownItem name="refresh">刷新</DropdownItem>
-            <DropdownItem name="expandOne">收合所有</DropdownItem>
-            <DropdownItem name="expandTwo">展开一级</DropdownItem>
-            <DropdownItem name="expandThree">展开两级</DropdownItem>
-            <DropdownItem name="expandAll">展开所有</DropdownItem>
-          </DropdownMenu>
-        </Dropdown>
-      </Row>
-      <!-- 页面主体，左侧树结构，右侧表单项 -->
-      <Row type="flex" justify="start">
-        <Col :md="8" :lg="8" :xl="6">
-          <Alert show-icon>
+            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="refresh">刷新</el-dropdown-item>
+              <el-dropdown-item command="expandOne">收合所有</el-dropdown-item>
+              <el-dropdown-item command="expandTwo">展开一级</el-dropdown-item>
+              <el-dropdown-item command="expandThree">展开两级</el-dropdown-item>
+              <el-dropdown-item command="expandAll">展开所有</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-row>
+      <el-row type="flex" justify="start">
+        <el-col :md="8" :lg="8" :xl="6">
+          <el-alert type="info" show-icon :closable="false">
             当前选择编辑：
             <span class="select-title">{{ editTitle }}</span>
             <a class="select-clear" v-if="form.id" @click="cancelEdit">取消选择</a>
-          </Alert>
-          <Input
+          </el-alert>
+          <el-input
             v-model="searchKey"
-            suffix="ios-search"
-            @on-change="search"
-            placeholder="输入菜单名搜索"
             clearable
+            placeholder="输入菜单名搜索"
+            @input="search"
+            @clear="search"
           />
-          <div class="tree-bar" :style="{ maxHeight: maxHeight }">
-            <Tree
-              ref="tree"
+          <div v-loading="loading" class="tree-bar" :style="{ maxHeight: maxHeight }">
+            <el-tree
+              :key="treeKey"
+              ref="treeRef"
               :data="data"
+              :props="treeProps"
+              node-key="id"
               show-checkbox
-              :render="renderContent"
-              @on-select-change="selectTree"
-              @on-check-change="changeSelect"
+              highlight-current
               :check-strictly="!strict"
-            ></Tree>
-            <Spin size="large" fix v-if="loading"></Spin>
+              :default-expanded-keys="expandedKeys"
+              :current-node-key="currentNodeKey"
+              @node-click="onNodeClick"
+              @check="onCheckChange"
+            >
+              <template #default="{ data: nodeData }">
+                <span class="tree-node-label">
+                  <el-icon v-if="nodeData.level == 0" class="tree-node-icon"><Menu /></el-icon>
+                  <el-icon v-else class="tree-node-icon"><List /></el-icon>
+                  <span>{{ nodeData.title }}</span>
+                </span>
+              </template>
+            </el-tree>
           </div>
-        </Col>
-        <Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
-          <Form ref="form" :model="form" :label-width="110" :rules="formValidate">
-            <FormItem label="类型" prop="type">
+        </el-col>
+        <el-col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
+          <el-form ref="form" :model="form" label-width="110px" :rules="formValidate">
+            <el-form-item label="类型" prop="type">
               <div v-show="form.level == 0">
-                <Icon
-                  type="ios-navigate-outline"
-                  size="16"
-                  style="margin-right: 5px"
-                ></Icon>
+                <el-icon :size="16" style="margin-right: 5px"><Menu /></el-icon>
                 <span>顶级菜单</span>
               </div>
               <div v-show="form.level == 1 || form.level == 2">
-                <Icon
-                  type="ios-list-box-outline"
-                  size="16"
-                  style="margin-right: 5px"
-                ></Icon>
+                <el-icon :size="16" style="margin-right: 5px"><List /></el-icon>
                 <span>页面菜单</span>
               </div>
-            </FormItem>
-            <FormItem label="菜单名称" prop="title">
-              <Input class="menu-input" v-model="form.title" />
-            </FormItem>
-            <FormItem
+            </el-form-item>
+            <el-form-item label="菜单名称" prop="title">
+              <el-input class="menu-input" v-model="form.title" />
+            </el-form-item>
+            <el-form-item
+              v-if="form.level != 0"
               label="路由地址"
               prop="path"
-              v-if="form.level != 0"
               class="block-tool"
             >
-              <Tooltip
-                placement="right"
-                content="路由地址，英文唯一，跳转页面，路径展示用 "
-              >
-                <Input class="menu-input" v-model="form.path" />
-              </Tooltip>
-            </FormItem>
-            <FormItem label="路由名称" prop="name" class="block-tool">
-              <Tooltip
-                placement="right"
-                content="路由name，需英文唯一，跳转页面用"
-                transfer
-              >
-                <Input class="menu-input" v-model="form.name" />
-              </Tooltip>
-            </FormItem>
-            <FormItem label="文件路径" prop="frontRoute" v-if="form.level != 0">
-              <Input class="menu-input" v-model="form.frontRoute" />
-            </FormItem>
-            <FormItem label="权限url" v-if="form.level != 0" class="block-tool">
-              <Tooltip placement="right" content="*号模糊匹配，逗号分割" transfer>
-                <Input class="menu-input" v-model="form.permission" type="textarea" maxlength="1000"/>
-              </Tooltip>
-            </FormItem>
-            <FormItem label="排序值" prop="sortOrder">
-              <Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
-                <InputNumber :max="1000" :min="0" v-model="form.sortOrder"></InputNumber>
-              </Tooltip>
-            </FormItem>
-            <Form-item>
-              <Button
-                style="margin-right: 5px"
-                @click="submitEdit"
-                :loading="submitLoading"
+              <el-tooltip placement="right" content="路由地址，英文唯一，跳转页面，路径展示用 ">
+                <el-input class="menu-input" v-model="form.path" />
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item label="路由名称" prop="name" class="block-tool">
+              <el-tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
+                <el-input class="menu-input" v-model="form.name" />
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item v-if="form.level != 0" label="文件路径" prop="frontRoute">
+              <el-input class="menu-input" v-model="form.frontRoute" />
+            </el-form-item>
+            <el-form-item v-if="form.level != 0" label="权限url" class="block-tool">
+              <el-tooltip placement="right" content="*号模糊匹配，逗号分割">
+                <el-input
+                  class="menu-input"
+                  v-model="form.permission"
+                  type="textarea"
+                  maxlength="1000"
+                />
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item label="排序值" prop="sortOrder">
+              <el-tooltip placement="right" content="值越小越靠前，支持小数">
+                <el-input-number v-model="form.sortOrder" :max="1000" :min="0" />
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item>
+              <el-button
                 type="primary"
-              >保存
-              </Button>
-              <Button @click="handleReset">重置</Button>
-            </Form-item>
-          </Form>
-        </Col>
-      </Row>
-    </Card>
+                style="margin-right: 5px"
+                :loading="submitLoading"
+                @click="submitEdit"
+              >
+                保存
+              </el-button>
+              <el-button @click="handleReset">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </el-card>
 
-    <Modal
-      draggable
-      :title="modalTitle"
+    <el-dialog
       v-model="menuModalVisible"
-      :mask-closable="false"
-      :width="500"
-      :styles="{ top: '30px' }"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      top="30px"
     >
-      <Form ref="formAdd" :model="formAdd" :label-width="100" :rules="formValidate">
+      <el-form ref="formAdd" :model="formAdd" label-width="100px" :rules="formValidate">
         <div v-if="showParent">
-          <FormItem label="上级节点：">{{ parentTitle }}</FormItem>
+          <el-form-item label="上级节点：">{{ parentTitle }}</el-form-item>
         </div>
-        <FormItem label="类型" prop="type">
+        <el-form-item label="类型" prop="type">
           <div v-show="formAdd.level == 0">
-            <Icon type="ios-navigate-outline" size="16" style="margin-right: 5px"></Icon>
+            <el-icon :size="16" style="margin-right: 5px"><Menu /></el-icon>
             <span>顶级菜单</span>
           </div>
           <div v-show="formAdd.level != 0">
-            <Icon type="ios-list-box-outline" size="16" style="margin-right: 5px"></Icon>
+            <el-icon :size="16" style="margin-right: 5px"><List /></el-icon>
             <span>页面菜单</span>
           </div>
-        </FormItem>
-        <FormItem label="菜单名称" prop="title">
-          <Input class="menu-input" v-model="formAdd.title" />
-        </FormItem>
-
-        <FormItem label="路由地址" prop="path" v-if="formAdd.level != 0">
-          <Input v-model="formAdd.path" />
-        </FormItem>
-        <FormItem label="路由名称" prop="name" class="block-tool">
-          <Tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
-            <Input v-model="formAdd.name" />
-          </Tooltip>
-        </FormItem>
-        <FormItem label="文件路径" prop="frontRoute" v-if="formAdd.level != 0">
-          <Input v-model="formAdd.frontRoute" />
-        </FormItem>
-        <FormItem label="权限url" v-if="formAdd.level != 0">
-          <Input v-model="formAdd.permission" type="textarea" />
+        </el-form-item>
+        <el-form-item label="菜单名称" prop="title">
+          <el-input class="menu-input" v-model="formAdd.title" />
+        </el-form-item>
+        <el-form-item v-if="formAdd.level != 0" label="路由地址" prop="path">
+          <el-input v-model="formAdd.path" />
+        </el-form-item>
+        <el-form-item label="路由名称" prop="name" class="block-tool">
+          <el-tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
+            <el-input v-model="formAdd.name" />
+          </el-tooltip>
+        </el-form-item>
+        <el-form-item v-if="formAdd.level != 0" label="文件路径" prop="frontRoute">
+          <el-input v-model="formAdd.frontRoute" />
+        </el-form-item>
+        <el-form-item v-if="formAdd.level != 0" label="权限url">
+          <el-input v-model="formAdd.permission" type="textarea" />
           <div class="desc">*号模糊匹配，逗号分割</div>
-        </FormItem>
-        <FormItem label="排序值" prop="sortOrder">
-          <Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
-            <InputNumber :max="1000" :min="0" v-model="formAdd.sortOrder"></InputNumber>
-          </Tooltip>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="menuModalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitAdd">提交</Button>
-      </div>
-    </Modal>
+        </el-form-item>
+        <el-form-item label="排序值" prop="sortOrder">
+          <el-tooltip placement="right" content="值越小越靠前，支持小数">
+            <el-input-number v-model="formAdd.sortOrder" :max="1000" :min="0" />
+          </el-tooltip>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="menuModalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitAdd">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { Menu, List, ArrowDown } from "@element-plus/icons-vue";
 import {
   getAllPermissionList,
   addPermission,
@@ -194,25 +194,36 @@ import {
   searchPermission,
 } from "@/api/index";
 import util from "@/libs/util.js";
-import Cookies from "js-cookie";
+
 export default {
   name: "menu-manage",
+  components: {
+    Menu,
+    List,
+    ArrowDown,
+  },
   data() {
     return {
-      loading: true, // 加载状态
-      strict: true, // 级联 单选
-      maxHeight: "500px", // 最大高度
-      expandLevel: 1, // 展开层级
-      menuModalVisible: false, // 添加菜单modal
-      selectList: [], // 已选列表
-      selectCount: 0, // 所选数量
-      showParent: false, // 展示父级
-      searchKey: "", // 搜索关键词
-      parentTitle: "", // 父级标题
-      editTitle: "", // 编辑标题
-      modalTitle: "", // modal标题
+      loading: true,
+      strict: true,
+      maxHeight: "500px",
+      expandLevel: 1,
+      menuModalVisible: false,
+      selectList: [],
+      selectCount: 0,
+      showParent: false,
+      searchKey: "",
+      parentTitle: "",
+      editTitle: "",
+      modalTitle: "",
+      expandedKeys: [],
+      currentNodeKey: null,
+      treeKey: 0,
+      treeProps: {
+        label: "title",
+        children: "children",
+      },
       form: {
-        // 表单数据
         id: "",
         title: "",
         name: "",
@@ -223,11 +234,8 @@ export default {
         level: 0,
         permission: "",
       },
-      formAdd: {
-        // 添加表单
-      },
+      formAdd: {},
       formValidate: {
-        // 验证规则
         title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
         name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
         path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
@@ -241,43 +249,26 @@ export default {
           },
         ],
       },
-      submitLoading: false, // 提交状态
-      data: [], // 数据
+      submitLoading: false,
+      data: [],
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getAllList();
     },
-
-    renderContent(h, { root, node, data }) {
-      // 渲染树形结构前面图标
-      let icon = "";
-      if (data.level == 0) {
-        icon = "ios-navigate";
-      } else if (data.level == 1) {
-        icon = "md-list-box";
-      } else if (data.level == 2) {
-        icon = "md-list";
-      }
-      return h("span", [
-        h("span", [
-          h("Icon", {
-            props: {
-              type: icon,
-              size: "16",
-            },
-            style: {
-              "margin-right": "8px",
-              "margin-bottom": "3px",
-            },
-          }),
-          h("span", data.title),
-        ]),
-      ]);
+    collectExpandedKeys(nodes, keys = []) {
+      if (!nodes) return keys;
+      nodes.forEach((node) => {
+        if (node.expand === true) {
+          keys.push(node.id);
+        }
+        if (node.children && node.children.length > 0) {
+          this.collectExpandedKeys(node.children, keys);
+        }
+      });
+      return keys;
     },
-    // 更多操作
     handleDropdown(name) {
       if (name == "expandOne") {
         this.expandLevel = 1;
@@ -296,14 +287,12 @@ export default {
         this.getAllList();
       }
     },
-    // 获取所有菜单
     getAllList() {
       this.loading = true;
       getAllPermissionList().then((res) => {
         this.loading = false;
         if (res.success) {
-          // 仅展开指定级数 默认后台已展开所有
-          let expandLevel = this.expandLevel;
+          const expandLevel = this.expandLevel;
           res.result.forEach(function (e) {
             if (expandLevel == 1) {
               if (e.level == 0) {
@@ -380,22 +369,25 @@ export default {
             }
           });
           this.data = res.result;
+          this.expandedKeys = this.collectExpandedKeys(res.result);
+          this.treeKey += 1;
         }
       });
     },
-    // 选择菜单
-    selectTree(v) {
-      if (v.length > 0) {
-        let str = JSON.stringify(v);
-        let menu = JSON.parse(str);
-        this.form = menu[0];
-        console.log(this.form);
-        this.editTitle = menu[0].title;
+    onNodeClick(data) {
+      if (data) {
+        const menu = JSON.parse(JSON.stringify(data));
+        this.form = menu;
+        this.editTitle = menu.title;
+        this.currentNodeKey = menu.id;
       } else {
         this.cancelEdit();
       }
     },
-    // 搜索菜单
+    onCheckChange(_data, { checkedNodes }) {
+      this.selectList = checkedNodes;
+      this.selectCount = checkedNodes.length;
+    },
     search() {
       if (this.searchKey) {
         this.loading = true;
@@ -403,28 +395,25 @@ export default {
           this.loading = false;
           if (res.success) {
             this.data = res.result;
+            this.expandedKeys = [];
+            this.treeKey += 1;
           }
         });
       } else {
         this.getAllList();
       }
     },
-    // 取消选择
     cancelEdit() {
-      let data = this.$refs.tree.getSelectedNodes()[0];
-      if (data) {
-        data.selected = false;
-      }
+      this.$refs.treeRef?.setCurrentKey(null);
+      this.currentNodeKey = null;
       this.$refs.form.resetFields();
       this.form.id = "";
       this.editTitle = "";
     },
-    // 重置表单
     handleReset() {
       this.$refs.form.resetFields();
       this.form.frontRoute = "";
     },
-    // 保存
     submitEdit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
@@ -436,7 +425,6 @@ export default {
           if (this.form.sortOrder == null) {
             this.form.sortOrder = 0;
           }
-          // 删除一些之前添加的无用字段
           delete this.form.icon;
           delete this.form.frontComponent;
           delete this.form.buttonType;
@@ -444,13 +432,11 @@ export default {
           delete this.form.selected;
           delete this.form.description;
           delete this.form.children;
-          delete this.form.children;
 
           editPermission(this.form).then((res) => {
             this.submitLoading = false;
             if (res.success) {
               this.$Message.success("编辑成功");
-              // 标记重新获取菜单数据
               this.$store.commit("setAdded", false);
               util.initRouter(this);
               this.init();
@@ -460,7 +446,6 @@ export default {
         }
       });
     },
-    // 添加
     submitAdd() {
       this.$refs.formAdd.validate((valid) => {
         if (valid) {
@@ -470,7 +455,6 @@ export default {
             this.submitLoading = false;
             if (res.success) {
               this.$Message.success("添加成功");
-              // 标记重新获取菜单数据
               this.$store.commit("setAdded", false);
               util.initRouter(this);
               this.init();
@@ -480,7 +464,6 @@ export default {
         }
       });
     },
-    // 添加子菜单
     addMenu() {
       if (!this.form.id) {
         this.$Message.warning("请先点击选择一个菜单权限节点");
@@ -500,7 +483,7 @@ export default {
         parentId: this.form.id,
         level: Number(this.form.level) + 1,
         sortOrder: 0,
-        permission: "", // 权限url
+        permission: "",
       };
       if (this.form.level == 0) {
         this.formAdd.path = "/";
@@ -508,7 +491,6 @@ export default {
       }
       this.menuModalVisible = true;
     },
-    // 添加顶级菜单
     addRootMenu() {
       this.modalTitle = "添加顶级菜单";
       this.showParent = false;
@@ -518,12 +500,6 @@ export default {
       };
       this.menuModalVisible = true;
     },
-    // 选中菜单赋值
-    changeSelect(v) {
-      this.selectCount = v.length;
-      this.selectList = v;
-    },
-    // 批量删除菜单
     delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未勾选要删除的数据");
@@ -543,7 +519,6 @@ export default {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("删除成功");
-              // 标记重新获取菜单数据
               this.$store.commit("setAdded", false);
               util.initRouter(this);
               this.selectList = [];
@@ -557,13 +532,13 @@ export default {
     },
   },
   mounted() {
-    // 计算高度
-    let height = document.documentElement.clientHeight;
+    const height = document.documentElement.clientHeight;
     this.maxHeight = Number(height - 287) + "px";
     this.init();
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @import "@/styles/tree-common.scss";
 .desc {
@@ -573,4 +548,12 @@ export default {
 .menu-input {
   width: 362px;
 }
+.tree-node-icon {
+  margin-right: 8px;
+  vertical-align: middle;
+}
+.tree-node-label {
+  display: inline-flex;
+  align-items: center;
+}
 </style>
diff --git a/manager/src/views/sys/menu-manage/menuManage.vue b/manager/src/views/sys/menu-manage/menuManage.vue
index 092b201a..dfa0cb20 100644
--- a/manager/src/views/sys/menu-manage/menuManage.vue
+++ b/manager/src/views/sys/menu-manage/menuManage.vue
@@ -1,24 +1,27 @@
 <template>
-  <Tabs value="name1">
-    <TabPane label="平台菜单" name="name1">
-      <managerMenu></managerMenu>
-
-    </TabPane>
-    <TabPane label="店铺菜单" name="name2">
-      <storeMenu></storeMenu>
-
-    </TabPane>
-  </Tabs>
+  <el-tabs v-model="activeTab">
+    <el-tab-pane label="平台菜单" name="platform">
+      <managerMenu />
+    </el-tab-pane>
+    <el-tab-pane label="店铺菜单" name="store">
+      <storeMenu />
+    </el-tab-pane>
+  </el-tabs>
 </template>
-<script>
 
+<script>
 import managerMenu from "./menu";
 import storeMenu from "./storeMenu";
 
 export default {
   components: {
-    managerMenu, storeMenu
+    managerMenu,
+    storeMenu,
   },
-
-}
+  data() {
+    return {
+      activeTab: "platform",
+    };
+  },
+};
 </script>
diff --git a/manager/src/views/sys/menu-manage/storeMenu.vue b/manager/src/views/sys/menu-manage/storeMenu.vue
index 6eeae686..72e7ba2d 100644
--- a/manager/src/views/sys/menu-manage/storeMenu.vue
+++ b/manager/src/views/sys/menu-manage/storeMenu.vue
@@ -1,191 +1,191 @@
 <template>
   <div class="search">
-    <Card>
-      <!-- 筛选项和操作按钮 -->
-      <Row class="operation">
-        <i-switch
+    <el-card>
+      <el-row class="operation">
+        <el-switch
           v-model="strict"
           class="selectModel"
-          size="large"
+          active-text="级联"
+          inactive-text="单选"
           style="margin-right: 5px"
-        >
-          <span slot="open">级联</span>
-          <span slot="close">单选</span>
-        </i-switch>
-        <Button @click="addRootMenu">添加顶级菜单</Button>
-        <Button @click="addMenu" type="primary">添加子菜单</Button>
-        <Button @click="delAll">批量删除</Button>
-        <Dropdown @on-click="handleDropdown">
-          <Button>
+        />
+        <el-button @click="addRootMenu">添加顶级菜单</el-button>
+        <el-button type="primary" @click="addMenu">添加子菜单</el-button>
+        <el-button @click="delAll">批量删除</el-button>
+        <el-dropdown @command="handleDropdown">
+          <el-button>
             更多操作
-            <Icon type="md-arrow-dropdown"></Icon>
-          </Button>
-          <DropdownMenu slot="list">
-            <DropdownItem name="refresh">刷新</DropdownItem>
-            <DropdownItem name="expandOne">收合所有</DropdownItem>
-            <DropdownItem name="expandTwo">展开一级</DropdownItem>
-            <DropdownItem name="expandThree">展开两级</DropdownItem>
-            <DropdownItem name="expandAll">展开所有</DropdownItem>
-          </DropdownMenu>
-        </Dropdown>
-      </Row>
-      <!-- 页面主体，左侧树结构，右侧表单项 -->
-      <Row type="flex" justify="start">
-        <Col :md="8" :lg="8" :xl="6">
-          <Alert show-icon>
+            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="refresh">刷新</el-dropdown-item>
+              <el-dropdown-item command="expandOne">收合所有</el-dropdown-item>
+              <el-dropdown-item command="expandTwo">展开一级</el-dropdown-item>
+              <el-dropdown-item command="expandThree">展开两级</el-dropdown-item>
+              <el-dropdown-item command="expandAll">展开所有</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-row>
+      <el-row type="flex" justify="start">
+        <el-col :md="8" :lg="8" :xl="6">
+          <el-alert type="info" show-icon :closable="false">
             当前选择编辑：
             <span class="select-title">{{ editTitle }}</span>
             <a class="select-clear" v-if="form.id" @click="cancelEdit">取消选择</a>
-          </Alert>
-          <Input
+          </el-alert>
+          <el-input
             v-model="searchKey"
-            suffix="ios-search"
-            @on-change="search"
-            placeholder="输入菜单名搜索"
             clearable
+            placeholder="输入菜单名搜索"
+            @input="search"
+            @clear="search"
           />
-          <div class="tree-bar" :style="{ maxHeight: maxHeight }">
-            <Tree
-              ref="tree"
+          <div v-loading="loading" class="tree-bar" :style="{ maxHeight: maxHeight }">
+            <el-tree
+              :key="treeKey"
+              ref="treeRef"
               :data="data"
+              :props="treeProps"
+              node-key="id"
               show-checkbox
-              :render="renderContent"
-              @on-select-change="selectTree"
-              @on-check-change="changeSelect"
+              highlight-current
               :check-strictly="!strict"
-            ></Tree>
-            <Spin size="large" fix v-if="loading"></Spin>
+              :default-expanded-keys="expandedKeys"
+              :current-node-key="currentNodeKey"
+              @node-click="onNodeClick"
+              @check="onCheckChange"
+            >
+              <template #default="{ data: nodeData }">
+                <span class="tree-node-label">
+                  <el-icon v-if="nodeData.level == 0" class="tree-node-icon"><Menu /></el-icon>
+                  <el-icon v-else class="tree-node-icon"><List /></el-icon>
+                  <span>{{ nodeData.title }}</span>
+                </span>
+              </template>
+            </el-tree>
           </div>
-        </Col>
-        <Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
-          <Form ref="form" :model="form" :label-width="110" :rules="formValidate">
-            <FormItem label="类型" prop="type">
+        </el-col>
+        <el-col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
+          <el-form ref="form" :model="form" label-width="110px" :rules="formValidate">
+            <el-form-item label="类型" prop="type">
               <div v-show="form.level == 0">
-                <Icon
-                  type="ios-navigate-outline"
-                  size="16"
-                  style="margin-right: 5px"
-                ></Icon>
+                <el-icon :size="16" style="margin-right: 5px"><Menu /></el-icon>
                 <span>顶级菜单</span>
               </div>
               <div v-show="form.level == 1 || form.level == 2">
-                <Icon
-                  type="ios-list-box-outline"
-                  size="16"
-                  style="margin-right: 5px"
-                ></Icon>
+                <el-icon :size="16" style="margin-right: 5px"><List /></el-icon>
                 <span>页面菜单</span>
               </div>
-            </FormItem>
-            <FormItem label="菜单名称" prop="title">
-              <Input class="menu-input" v-model="form.title" />
-            </FormItem>
-            <FormItem
+            </el-form-item>
+            <el-form-item label="菜单名称" prop="title">
+              <el-input class="menu-input" v-model="form.title" />
+            </el-form-item>
+            <el-form-item
+              v-if="form.level != 0"
               label="路由地址"
               prop="path"
-              v-if="form.level != 0"
               class="block-tool"
             >
-              <Tooltip
-                placement="right"
-                content="路由地址，英文唯一，跳转页面，路径展示用 "
-              >
-                <Input class="menu-input" v-model="form.path" />
-              </Tooltip>
-            </FormItem>
-            <FormItem label="路由名称" prop="name" class="block-tool">
-              <Tooltip
-                placement="right"
-                content="路由name，需英文唯一，跳转页面用"
-                transfer
-              >
-                <Input class="menu-input" v-model="form.name" />
-              </Tooltip>
-            </FormItem>
-            <FormItem label="文件路径" prop="frontRoute" v-if="form.level != 0">
-              <Input class="menu-input" v-model="form.frontRoute" />
-            </FormItem>
-            <FormItem label="权限url" v-if="form.level != 0" class="block-tool">
-              <Tooltip placement="right" content="*号模糊匹配，逗号分割" transfer>
-                <Input class="menu-input" v-model="form.permission" type="textarea" maxlength="1000" />
-              </Tooltip>
-            </FormItem>
-            <FormItem label="排序值" prop="sortOrder">
-              <Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
-                <InputNumber :max="1000" :min="0" v-model="form.sortOrder"></InputNumber>
-              </Tooltip>
-            </FormItem>
-            <Form-item>
-              <Button
-                style="margin-right: 5px"
-                @click="submitEdit"
-                :loading="submitLoading"
+              <el-tooltip placement="right" content="路由地址，英文唯一，跳转页面，路径展示用 ">
+                <el-input class="menu-input" v-model="form.path" />
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item label="路由名称" prop="name" class="block-tool">
+              <el-tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
+                <el-input class="menu-input" v-model="form.name" />
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item v-if="form.level != 0" label="文件路径" prop="frontRoute">
+              <el-input class="menu-input" v-model="form.frontRoute" />
+            </el-form-item>
+            <el-form-item v-if="form.level != 0" label="权限url" class="block-tool">
+              <el-tooltip placement="right" content="*号模糊匹配，逗号分割">
+                <el-input
+                  class="menu-input"
+                  v-model="form.permission"
+                  type="textarea"
+                  maxlength="1000"
+                />
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item label="排序值" prop="sortOrder">
+              <el-tooltip placement="right" content="值越小越靠前，支持小数">
+                <el-input-number v-model="form.sortOrder" :max="1000" :min="0" />
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item>
+              <el-button
                 type="primary"
-              >保存
-              </Button>
-              <Button @click="handleReset">重置</Button>
-            </Form-item>
-          </Form>
-        </Col>
-      </Row>
-    </Card>
+                style="margin-right: 5px"
+                :loading="submitLoading"
+                @click="submitEdit"
+              >
+                保存
+              </el-button>
+              <el-button @click="handleReset">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </el-card>
 
-    <Modal
-      draggable
-      :title="modalTitle"
+    <el-dialog
       v-model="menuModalVisible"
-      :mask-closable="false"
-      :width="500"
-      :styles="{ top: '30px' }"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      top="30px"
     >
-      <Form ref="formAdd" :model="formAdd" :label-width="100" :rules="formValidate">
+      <el-form ref="formAdd" :model="formAdd" label-width="100px" :rules="formValidate">
         <div v-if="showParent">
-          <FormItem label="上级节点：">{{ parentTitle }}</FormItem>
+          <el-form-item label="上级节点：">{{ parentTitle }}</el-form-item>
         </div>
-        <FormItem label="类型" prop="type">
+        <el-form-item label="类型" prop="type">
           <div v-show="formAdd.level == 0">
-            <Icon type="ios-navigate-outline" size="16" style="margin-right: 5px"></Icon>
+            <el-icon :size="16" style="margin-right: 5px"><Menu /></el-icon>
             <span>顶级菜单</span>
           </div>
           <div v-show="formAdd.level != 0">
-            <Icon type="ios-list-box-outline" size="16" style="margin-right: 5px"></Icon>
+            <el-icon :size="16" style="margin-right: 5px"><List /></el-icon>
             <span>页面菜单</span>
           </div>
-        </FormItem>
-        <FormItem label="菜单名称" prop="title">
-          <Input class="menu-input" v-model="formAdd.title" />
-        </FormItem>
-
-        <FormItem label="路由地址" prop="path" v-if="formAdd.level != 0">
-          <Input v-model="formAdd.path" />
-        </FormItem>
-        <FormItem label="路由名称" prop="name" class="block-tool">
-          <Tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
-            <Input v-model="formAdd.name" />
-          </Tooltip>
-        </FormItem>
-        <FormItem label="文件路径" prop="frontRoute" v-if="formAdd.level != 0">
-          <Input v-model="formAdd.frontRoute" />
-        </FormItem>
-        <FormItem label="权限url" v-if="formAdd.level != 0">
-          <Input v-model="formAdd.permission" type="textarea" />
+        </el-form-item>
+        <el-form-item label="菜单名称" prop="title">
+          <el-input class="menu-input" v-model="formAdd.title" />
+        </el-form-item>
+        <el-form-item v-if="formAdd.level != 0" label="路由地址" prop="path">
+          <el-input v-model="formAdd.path" />
+        </el-form-item>
+        <el-form-item label="路由名称" prop="name" class="block-tool">
+          <el-tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
+            <el-input v-model="formAdd.name" />
+          </el-tooltip>
+        </el-form-item>
+        <el-form-item v-if="formAdd.level != 0" label="文件路径" prop="frontRoute">
+          <el-input v-model="formAdd.frontRoute" />
+        </el-form-item>
+        <el-form-item v-if="formAdd.level != 0" label="权限url">
+          <el-input v-model="formAdd.permission" type="textarea" />
           <div class="desc">*号模糊匹配，逗号分割</div>
-        </FormItem>
-        <FormItem label="排序值" prop="sortOrder">
-          <Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
-            <InputNumber :max="1000" :min="0" v-model="formAdd.sortOrder"></InputNumber>
-          </Tooltip>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="menuModalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitAdd">提交</Button>
-      </div>
-    </Modal>
+        </el-form-item>
+        <el-form-item label="排序值" prop="sortOrder">
+          <el-tooltip placement="right" content="值越小越靠前，支持小数">
+            <el-input-number v-model="formAdd.sortOrder" :max="1000" :min="0" />
+          </el-tooltip>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="menuModalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitAdd">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { Menu, List, ArrowDown } from "@element-plus/icons-vue";
 import {
   getStoreAllPermissionList,
   addStorePermission,
@@ -194,25 +194,36 @@ import {
   searchStorePermission,
 } from "@/api/index";
 import util from "@/libs/util.js";
-import Cookies from "js-cookie";
+
 export default {
   name: "store-menu-manage",
+  components: {
+    Menu,
+    List,
+    ArrowDown,
+  },
   data() {
     return {
-      loading: true, // 加载状态
-      strict: true, // 级联 单选
-      maxHeight: "500px", // 最大高度
-      expandLevel: 1, // 展开层级
-      menuModalVisible: false, // 添加菜单modal
-      selectList: [], // 已选列表
-      selectCount: 0, // 所选数量
-      showParent: false, // 展示父级
-      searchKey: "", // 搜索关键词
-      parentTitle: "", // 父级标题
-      editTitle: "", // 编辑标题
-      modalTitle: "", // modal标题
+      loading: true,
+      strict: true,
+      maxHeight: "500px",
+      expandLevel: 1,
+      menuModalVisible: false,
+      selectList: [],
+      selectCount: 0,
+      showParent: false,
+      searchKey: "",
+      parentTitle: "",
+      editTitle: "",
+      modalTitle: "",
+      expandedKeys: [],
+      currentNodeKey: null,
+      treeKey: 0,
+      treeProps: {
+        label: "title",
+        children: "children",
+      },
       form: {
-        // 表单数据
         id: "",
         title: "",
         name: "",
@@ -223,11 +234,8 @@ export default {
         level: 0,
         permission: "",
       },
-      formAdd: {
-        // 添加表单
-      },
+      formAdd: {},
       formValidate: {
-        // 验证规则
         title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
         name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
         path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
@@ -241,43 +249,26 @@ export default {
           },
         ],
       },
-      submitLoading: false, // 提交状态
-      data: [], // 数据
+      submitLoading: false,
+      data: [],
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getAllList();
     },
-
-    renderContent(h, { root, node, data }) {
-      // 渲染树形结构前面图标
-      let icon = "";
-      if (data.level == 0) {
-        icon = "ios-navigate";
-      } else if (data.level == 1) {
-        icon = "md-list-box";
-      } else if (data.level == 2) {
-        icon = "md-list";
-      }
-      return h("span", [
-        h("span", [
-          h("Icon", {
-            props: {
-              type: icon,
-              size: "16",
-            },
-            style: {
-              "margin-right": "8px",
-              "margin-bottom": "3px",
-            },
-          }),
-          h("span", data.title),
-        ]),
-      ]);
+    collectExpandedKeys(nodes, keys = []) {
+      if (!nodes) return keys;
+      nodes.forEach((node) => {
+        if (node.expand === true) {
+          keys.push(node.id);
+        }
+        if (node.children && node.children.length > 0) {
+          this.collectExpandedKeys(node.children, keys);
+        }
+      });
+      return keys;
     },
-    // 更多操作
     handleDropdown(name) {
       if (name == "expandOne") {
         this.expandLevel = 1;
@@ -296,14 +287,12 @@ export default {
         this.getAllList();
       }
     },
-    // 获取所有菜单
     getAllList() {
       this.loading = true;
       getStoreAllPermissionList().then((res) => {
         this.loading = false;
         if (res.success) {
-          // 仅展开指定级数 默认后台已展开所有
-          let expandLevel = this.expandLevel;
+          const expandLevel = this.expandLevel;
           res.result.forEach(function (e) {
             if (expandLevel == 1) {
               if (e.level == 0) {
@@ -380,22 +369,25 @@ export default {
             }
           });
           this.data = res.result;
+          this.expandedKeys = this.collectExpandedKeys(res.result);
+          this.treeKey += 1;
         }
       });
     },
-    // 选择菜单
-    selectTree(v) {
-      if (v.length > 0) {
-        let str = JSON.stringify(v);
-        let menu = JSON.parse(str);
-        this.form = menu[0];
-        console.log(this.form);
-        this.editTitle = menu[0].title;
+    onNodeClick(data) {
+      if (data) {
+        const menu = JSON.parse(JSON.stringify(data));
+        this.form = menu;
+        this.editTitle = menu.title;
+        this.currentNodeKey = menu.id;
       } else {
         this.cancelEdit();
       }
     },
-    // 搜索菜单
+    onCheckChange(_data, { checkedNodes }) {
+      this.selectList = checkedNodes;
+      this.selectCount = checkedNodes.length;
+    },
     search() {
       if (this.searchKey) {
         this.loading = true;
@@ -403,28 +395,25 @@ export default {
           this.loading = false;
           if (res.success) {
             this.data = res.result;
+            this.expandedKeys = [];
+            this.treeKey += 1;
           }
         });
       } else {
         this.getAllList();
       }
     },
-    // 取消选择
     cancelEdit() {
-      let data = this.$refs.tree.getSelectedNodes()[0];
-      if (data) {
-        data.selected = false;
-      }
+      this.$refs.treeRef?.setCurrentKey(null);
+      this.currentNodeKey = null;
       this.$refs.form.resetFields();
       this.form.id = "";
       this.editTitle = "";
     },
-    // 重置表单
     handleReset() {
       this.$refs.form.resetFields();
       this.form.frontRoute = "";
     },
-    // 保存
     submitEdit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
@@ -436,7 +425,6 @@ export default {
           if (this.form.sortOrder == null) {
             this.form.sortOrder = 0;
           }
-          // 删除一些之前添加的无用字段
           delete this.form.icon;
           delete this.form.frontComponent;
           delete this.form.buttonType;
@@ -444,13 +432,11 @@ export default {
           delete this.form.selected;
           delete this.form.description;
           delete this.form.children;
-          delete this.form.children;
 
           editStorePermission(this.form).then((res) => {
             this.submitLoading = false;
             if (res.success) {
               this.$Message.success("编辑成功");
-              // 标记重新获取菜单数据
               this.$store.commit("setAdded", false);
               util.initRouter(this);
               this.init();
@@ -460,7 +446,6 @@ export default {
         }
       });
     },
-    // 添加
     submitAdd() {
       this.$refs.formAdd.validate((valid) => {
         if (valid) {
@@ -470,7 +455,6 @@ export default {
             this.submitLoading = false;
             if (res.success) {
               this.$Message.success("添加成功");
-              // 标记重新获取菜单数据
               this.$store.commit("setAdded", false);
               util.initRouter(this);
               this.init();
@@ -480,7 +464,6 @@ export default {
         }
       });
     },
-    // 添加子菜单
     addMenu() {
       if (!this.form.id) {
         this.$Message.warning("请先点击选择一个菜单权限节点");
@@ -500,7 +483,7 @@ export default {
         parentId: this.form.id,
         level: Number(this.form.level) + 1,
         sortOrder: 0,
-        permission: "", // 权限url
+        permission: "",
       };
       if (this.form.level == 0) {
         this.formAdd.path = "/";
@@ -508,7 +491,6 @@ export default {
       }
       this.menuModalVisible = true;
     },
-    // 添加顶级菜单
     addRootMenu() {
       this.modalTitle = "添加顶级菜单";
       this.showParent = false;
@@ -518,12 +500,6 @@ export default {
       };
       this.menuModalVisible = true;
     },
-    // 选中菜单赋值
-    changeSelect(v) {
-      this.selectCount = v.length;
-      this.selectList = v;
-    },
-    // 批量删除菜单
     delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未勾选要删除的数据");
@@ -543,7 +519,6 @@ export default {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("删除成功");
-              // 标记重新获取菜单数据
               this.$store.commit("setAdded", false);
               util.initRouter(this);
               this.selectList = [];
@@ -557,13 +532,13 @@ export default {
     },
   },
   mounted() {
-    // 计算高度
-    let height = document.documentElement.clientHeight;
+    const height = document.documentElement.clientHeight;
     this.maxHeight = Number(height - 287) + "px";
     this.init();
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @import "@/styles/tree-common.scss";
 .desc {
@@ -573,4 +548,12 @@ export default {
 .menu-input {
   width: 362px;
 }
+.tree-node-icon {
+  margin-right: 8px;
+  vertical-align: middle;
+}
+.tree-node-label {
+  display: inline-flex;
+  align-items: center;
+}
 </style>
diff --git a/manager/src/views/sys/message/noticeMessageTemplate.vue b/manager/src/views/sys/message/noticeMessageTemplate.vue
index 8f9e69ca..9be0008e 100644
--- a/manager/src/views/sys/message/noticeMessageTemplate.vue
+++ b/manager/src/views/sys/message/noticeMessageTemplate.vue
@@ -1,95 +1,127 @@
 <template>
   <div class="search">
-    <Row>
-      <Col>
-        <Card>
-          <Tabs value="MESSAGE" @on-click="paneChange">
-
-            <TabPane label="站内信列表" name="MESSAGE">
-              <Form ref="searchForm" :model="searchMessageForm" inline :label-width="70" class="search-form">
-                <Form-item label="消息标题" prop="title">
-                  <Input
-                    type="text"
+    <el-row>
+      <el-col :span="24">
+        <el-card>
+          <el-tabs v-model="activeTab" @tab-change="paneChange">
+            <el-tab-pane label="站内信列表" name="MESSAGE">
+              <el-form ref="searchForm" :model="searchMessageForm" inline label-width="70px" class="search-form">
+                <el-form-item label="消息标题" prop="title">
+                  <el-input
                     v-model="searchMessageForm.title"
                     placeholder="请输入消息标题"
                     clearable
                     style="width: 200px"
                   />
-                </Form-item>
-
-                <Form-item label="消息内容" prop="content">
-                  <Input
-                    type="text"
+                </el-form-item>
+                <el-form-item label="消息内容" prop="content">
+                  <el-input
                     v-model="searchMessageForm.content"
                     placeholder="请输入消息内容"
                     clearable
                     style="width: 200px"
                   />
-                </Form-item>
-
-                <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-
-              </Form>
-              <Row class="operation" style="margin-top: 20px">
-                <Button @click="sendMessage" type="primary">发送消息</Button>
-              </Row>
-              <Table
-                class="mr_10"
-                :loading="loading"
-                border
-                :columns="messageColumns"
-                :data="messageData"
-              ></Table>
-              <Row type="flex" justify="end" class="mt_10 mb_10 mr_10">
-                <Page
-                  :current="searchMessageForm.pageNumber"
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+                </el-form-item>
+              </el-form>
+              <div class="operation" style="margin-top: 20px">
+                <el-button type="primary" @click="sendMessage">发送消息</el-button>
+              </div>
+              <el-table v-loading="loading" border :data="messageData" class="mr_10" style="width: 100%">
+                <el-table-column prop="title" label="消息标题" min-width="150" />
+                <el-table-column prop="content" label="消息内容" min-width="350" show-overflow-tooltip />
+                <el-table-column label="发送对象" width="100">
+                  <template #default="{ row }">
+                    <span v-if="row">{{ row.messageClient === "member" ? "会员" : row.messageClient === "store" ? "商家" : "" }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="发送类型" width="100">
+                  <template #default="{ row }">
+                    <span v-if="row">
+                      {{
+                        row.messageRange === "ALL"
+                          ? "全站"
+                          : row.messageRange === "APPOINT"
+                            ? "指定商家"
+                            : row.messageRange === "MEMBER"
+                              ? "指定会员"
+                              : ""
+                      }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="createTime" label="发送时间" width="180" />
+                <el-table-column label="操作" align="center" fixed="right" width="140">
+                  <template #default="{ row }">
+                    <div v-if="row" class="ops">
+                      <a class="link-text" @click="detail(row)">详细</a>
+                      <span class="op-split">|</span>
+                      <a class="link-text" @click="delete(row.id)">删除</a>
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <div class="mt_10 mb_10 mr_10" style="display: flex; justify-content: flex-end">
+                <el-pagination
+                  v-model:current-page="searchMessageForm.pageNumber"
+                  v-model:page-size="searchMessageForm.pageSize"
                   :total="messageDataTotal"
-                  :page-size="searchMessageForm.pageSize"
-                  @on-change="messageChangePage"
-                  @on-page-size-change="messageChangePageSize"
-                  :page-size-opts="[20, 50, 100]"
+                  :page-sizes="[20, 50, 100]"
+                  layout="total, sizes, prev, pager, next, jumper"
                   size="small"
-                  show-total
-                  show-elevator
-                  show-sizer
-                ></Page>
-              </Row>
-            </TabPane>
+                  @current-change="messageChangePage"
+                  @size-change="messageChangePageSize"
+                />
+              </div>
+            </el-tab-pane>
 
-            <TabPane label="通知类站内信" name="SETTING">
-              <Table
-                :loading="loading"
-                border
-                class="mr_10"
-                :columns="noticeColumns"
-                :data="noticeData"
-              ></Table>
-              <Row type="flex" justify="end" class="mt_10 mr_10">
-                <Page
-                  :current="searchForm.pageNumber"
+            <el-tab-pane label="通知类站内信" name="SETTING">
+              <el-table v-loading="loading" border :data="noticeData" class="mr_10" style="width: 100%">
+                <el-table-column prop="noticeNode" label="通知节点" max-width="270" />
+                <el-table-column prop="noticeTitle" label="通知标题" min-width="200" />
+                <el-table-column prop="noticeContent" label="通知内容" min-width="300" />
+                <el-table-column label="状态" max-width="100">
+                  <template #default="{ row }">
+                    <el-tag v-if="row && row.noticeStatus === 'OPEN'" type="success">开启</el-tag>
+                    <el-tag v-else-if="row" type="info">关闭</el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center" fixed="right" width="140">
+                  <template #default="{ row }">
+                    <div v-if="row" class="ops">
+                      <a class="link-text" v-if="row.noticeStatus === 'OPEN'" @click="disable(row)">关闭</a>
+                      <a class="link-text" v-else @click="enable(row)">开启</a>
+                      <span class="op-split">|</span>
+                      <a class="link-text" @click="edit(row)">编辑</a>
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <div class="mt_10 mr_10" style="display: flex; justify-content: flex-end">
+                <el-pagination
+                  v-model:current-page="searchForm.pageNumber"
+                  v-model:page-size="searchForm.pageSize"
                   :total="noticeDataTotal"
-                  :page-size="searchForm.pageSize"
-                  @on-change="changePage"
-                  @on-page-size-change="changePageSize"
-                  :page-size-opts="[20, 50, 100]"
+                  :page-sizes="[20, 50, 100]"
+                  layout="total, sizes, prev, pager, next, jumper"
                   size="small"
-                  show-total
-                  show-elevator
-                  show-sizer
-                ></Page>
-              </Row>
-            </TabPane>
-          </Tabs>
+                  @current-change="changePage"
+                  @size-change="changePageSize"
+                />
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
 
-        </Card>
-      </Col>
-    </Row>
-    <!-- 站内信模板编辑 -->
-    <Modal
-      :title="modalTitle"
+    <el-dialog
       v-model="modalVisible"
-      :mask-closable="false"
-      :width="800"
+      :title="modalTitle"
+      width="800px"
+      :close-on-click-modal="false"
+      destroy-on-close
     >
       <div class="message-title">
         <p>1、左侧#{xxx}为消息变量</p>
@@ -99,914 +131,592 @@
       <div class="send-setting">
         <div class="left-show">
           <div v-for="(item, index) in form.variables" :key="index">
-            #{<span>{{item}}</span>}
+            #{<span>{{ item }}</span>}
           </div>
         </div>
         <div class="send-form">
-          <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-
-            <FormItem label="通知节点" prop="noticeNode">
-              <Input v-model="form.noticeNode" clearable type="text" style="width: 90%" maxlength="20" disabled/>
-            </FormItem>
-            <FormItem label="消息标题" prop="noticeTitle">
-              <Input v-model="form.noticeTitle" clearable type="text" style="width: 90%" maxlength="20"/>
-            </FormItem>
-            <FormItem label="消息内容" prop="noticeContent">
-              <Input v-model="form.noticeContent" clearable type="textarea" style="width: 90%" maxlength="50"
-                     :autosize="{maxRows:4,minRows: 4}" show-word-limit/>
-            </FormItem>
-          </Form>
+          <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+            <el-form-item label="通知节点" prop="noticeNode">
+              <el-input v-model="form.noticeNode" clearable maxlength="20" disabled style="width: 90%" />
+            </el-form-item>
+            <el-form-item label="消息标题" prop="noticeTitle">
+              <el-input v-model="form.noticeTitle" clearable maxlength="20" style="width: 90%" />
+            </el-form-item>
+            <el-form-item label="消息内容" prop="noticeContent">
+              <el-input
+                v-model="form.noticeContent"
+                clearable
+                type="textarea"
+                maxlength="50"
+                :rows="4"
+                show-word-limit
+                style="width: 90%"
+              />
+            </el-form-item>
+          </el-form>
         </div>
-
       </div>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit">保存</Button>
-      </div>
-    </Modal>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
+      </template>
+    </el-dialog>
 
-    <!-- 站内信发送 -->
-    <Modal
-      :title="messageModalTitle"
+    <el-dialog
       v-model="messageModalVisible"
-      :mask-closable="false"
-      :width="800"
+      :title="messageModalTitle"
+      width="800px"
+      :close-on-click-modal="false"
+      destroy-on-close
     >
-      <Form ref="messageSendForm" :model="messageSendForm" :label-width="100" :rules="messageFormValidate">
-        <FormItem label="消息标题" prop="title">
-          <Input v-model="messageSendForm.title" maxlength="15" clearable style="width: 70%"/>
-        </FormItem>
-        <FormItem label="消息内容" prop="content">
-          <Input
+      <el-form ref="messageSendForm" :model="messageSendForm" label-width="100px" :rules="messageFormValidate">
+        <el-form-item label="消息标题" prop="title">
+          <el-input v-model="messageSendForm.title" maxlength="15" clearable style="width: 70%" />
+        </el-form-item>
+        <el-form-item label="消息内容" prop="content">
+          <el-input
             v-model="messageSendForm.content"
             :rows="4"
             type="textarea"
             maxlength="200"
-            style="max-height:60vh;overflow:auto;width: 70%"
+            style="max-height: 60vh; overflow: auto; width: 70%"
           />
-        </FormItem>
-
-        <FormItem label="发送对象">
-          <RadioGroup type="button" button-style="solid" v-model="messageSendForm.messageClient"
-                      @on-change="selectObject">
-            <Radio label="member">会员</Radio>
-            <Radio label="store">商家</Radio>
-          </RadioGroup>
-        </FormItem>
-
-        <FormItem label="发送范围">
-          <RadioGroup type="button" button-style="solid" v-model="messageSendForm.messageRange" @on-change="selectShop">
-            <Radio label="ALL">全站</Radio>
-            <Radio v-if="messageSendForm.messageClient == 'store'" label="APPOINT">指定商家</Radio>
-            <Radio v-if="messageSendForm.messageClient == 'member'" label="MEMBER">指定会员</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="指定商家" v-if="shopShow">
-          <Select v-model="messageSendForm.userIds" filterable multiple style="width: 90%;"
-                  label-in-value @on-change="getName">
-            <Option v-for="item in shopList" :value="item.id" :key="item.id" :lable="item.storeName">{{ item.storeName
-              }}
-            </Option>
-          </Select>
-        </FormItem>
-        <FormItem label="选择会员" prop="scopeType"
-                  v-if="memberShow">
-          <Button type="primary" icon="ios-add" @click="addVip" ghost>选择会员</Button>
-          <div style="margin-top:24px;" v-if="messageSendForm.messageClient == 'member'">
-            <Table border :columns="userColumns" :data="selectedMember">
-            </Table>
+        </el-form-item>
+        <el-form-item label="发送对象">
+          <el-radio-group v-model="messageSendForm.messageClient" @change="selectObject">
+            <el-radio-button value="member">会员</el-radio-button>
+            <el-radio-button value="store">商家</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="发送范围">
+          <el-radio-group v-model="messageSendForm.messageRange" @change="selectShop">
+            <el-radio-button value="ALL">全站</el-radio-button>
+            <el-radio-button v-if="messageSendForm.messageClient == 'store'" value="APPOINT">指定商家</el-radio-button>
+            <el-radio-button v-if="messageSendForm.messageClient == 'member'" value="MEMBER">指定会员</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="shopShow" label="指定商家">
+          <el-select
+            v-model="messageSendForm.userIds"
+            filterable
+            multiple
+            style="width: 90%"
+            @change="onShopIdsChange"
+          >
+            <el-option v-for="item in shopList" :key="item.id" :value="item.id" :label="item.storeName" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="memberShow" label="选择会员" prop="scopeType">
+          <el-button type="primary" plain @click="addVip">选择会员</el-button>
+          <div v-if="messageSendForm.messageClient == 'member'" style="margin-top: 24px">
+            <el-table border :data="selectedMember" style="width: 100%">
+              <el-table-column prop="nickName" label="用户名称" min-width="120" />
+              <el-table-column label="手机号" min-width="120">
+                <template #default="{ row }">
+                  <span v-if="row">{{ row.mobile || "暂未填写" }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" min-width="50" align="center">
+                <template #default="{ row, $index }">
+                  <a v-if="row" class="link-text" @click="delUser($index)">删除</a>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
-        </FormItem>
-        <Modal width="1200" v-model="checkUserList">
-          <userList v-if="checkUserList" @callback="callbackSelectUser" :selectedList="selectedMember" ref="memberLayout"/>
-        </Modal>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="messageModalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="sendMessageSubmit"
-        >发送
-        </Button>
-      </div>
-    </Modal>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="messageModalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="sendMessageSubmit">发送</el-button>
+      </template>
+    </el-dialog>
 
-    <!-- 站内信发送 -->
-    <Modal
-      :title="modalTitle"
+    <el-dialog v-model="checkUserList" width="1200px" title="选择会员" destroy-on-close>
+      <userList
+        v-if="checkUserList"
+        ref="memberLayout"
+        :selectedList="selectedMember"
+        @callback="callbackSelectUser"
+      />
+    </el-dialog>
+
+    <el-dialog
       v-model="messageDetailModalVisible"
-      :mask-closable="false"
-      :width="800"
+      :title="modalTitle"
+      width="800px"
+      :close-on-click-modal="false"
+      destroy-on-close
     >
-      <Form ref="messageSendForm" :model="messageSendForm" :label-width="100" :rules="messageFormValidate">
-        <FormItem label="消息标题" prop="title">
-          <Input v-model="messageSendForm.title" maxlength="15" clearable style="width: 50%" disabled/>
-        </FormItem>
-        <FormItem label="消息内容" prop="content">
-          <Input
-            disabled
+      <el-form :model="messageSendForm" label-width="100px">
+        <el-form-item label="消息标题" prop="title">
+          <el-input v-model="messageSendForm.title" maxlength="15" clearable style="width: 50%" disabled />
+        </el-form-item>
+        <el-form-item label="消息内容" prop="content">
+          <el-input
             v-model="messageSendForm.content"
+            disabled
             :rows="4"
             type="textarea"
-            style="max-height:60vh;overflow:auto;width: 50%"
+            style="max-height: 60vh; overflow: auto; width: 50%"
           />
-        </FormItem>
-        <FormItem label="发送对象">
-          <RadioGroup type="button" button-style="solid" v-model="messageSendForm.messageClient">
-            <Radio disabled label="member">会员</Radio>
-            <Radio disabled label="store">商家</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="发送范围">
-          <RadioGroup type="button" button-style="solid" v-model="messageSendForm.messageRange">
-            <Radio disabled label="ALL">全站</Radio>
-            <Radio v-if="messageSendForm.messageClient == 'store'" disabled label="APPOINT">指定商家</Radio>
-            <Radio v-if="messageSendForm.messageClient == 'member'" disabled label="MEMBER">指定会员</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="指定商家" v-if="messageSendForm.messageClient == 'store'">
-          <Row>
-            <Table
-              :loading="loading"
-              border
-              :columns="messageDetailColumns"
-              :data="shopMessageData"
-              ref="table"
-              sortable="custom"
-              @on-sort-change="shopMessageChangeSort"
-            ></Table>
-          </Row>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page
-              :current="searchShopMessageForm.pageNumber"
+        </el-form-item>
+        <el-form-item label="发送对象">
+          <el-radio-group v-model="messageSendForm.messageClient" disabled>
+            <el-radio-button value="member">会员</el-radio-button>
+            <el-radio-button value="store">商家</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="发送范围">
+          <el-radio-group v-model="messageSendForm.messageRange" disabled>
+            <el-radio-button value="ALL">全站</el-radio-button>
+            <el-radio-button v-if="messageSendForm.messageClient == 'store'" value="APPOINT">指定商家</el-radio-button>
+            <el-radio-button v-if="messageSendForm.messageClient == 'member'" value="MEMBER">指定会员</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="messageSendForm.messageClient == 'store'" label="指定商家">
+          <el-table
+            v-loading="loading"
+            border
+            :data="shopMessageData"
+            style="width: 100%"
+            @sort-change="shopMessageChangeSort"
+          >
+            <el-table-column prop="storeId" label="店铺ID" max-width="300" />
+            <el-table-column prop="storeName" label="店铺名称" />
+            <el-table-column label="是否已读">
+              <template #default="{ row }">
+                <el-tag v-if="row && row.status === 'ALREADY_READY'" type="success">已读</el-tag>
+                <el-tag v-else-if="row && row.status === 'UN_READY'" type="info">未读</el-tag>
+                <el-tag v-else-if="row" type="info">回收站</el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="mt_10" style="display: flex; justify-content: flex-end">
+            <el-pagination
+              v-model:current-page="searchShopMessageForm.pageNumber"
+              v-model:page-size="searchShopMessageForm.pageSize"
               :total="shopMessageDataTotal"
-              :page-size="searchShopMessageForm.pageSize"
-              @on-change="shopMessageChangePage"
-              @on-page-size-change="shopMessageChangePageSize"
-              :page-size-opts="[20, 50, 100]"
+              :page-sizes="[20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
               size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-          </Row>
-        </FormItem>
-        <FormItem label="指定会员" v-if="messageSendForm.messageClient == 'member'">
-          <Row>
-            <Table
-              :loading="loading"
-              border
-              :columns="memberMessageDetailColumns"
-              :data="memberMessageData"
-              ref="table"
-              sortable="custom"
-              @on-sort-change="memberMessageChangeSort"
-            ></Table>
-          </Row>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page
-              :current="searchMemberMessageForm.pageNumber"
+              @current-change="shopMessageChangePage"
+              @size-change="shopMessageChangePageSize"
+            />
+          </div>
+        </el-form-item>
+        <el-form-item v-if="messageSendForm.messageClient == 'member'" label="指定会员">
+          <el-table
+            v-loading="loading"
+            border
+            :data="memberMessageData"
+            style="width: 100%"
+            @sort-change="memberMessageChangeSort"
+          >
+            <el-table-column prop="memberId" label="会员ID" max-width="300" />
+            <el-table-column prop="memberName" label="会员名称" />
+            <el-table-column label="是否已读" max-width="120">
+              <template #default="{ row }">
+                <el-tag v-if="row && row.status === 'ALREADY_READY'" type="success">已读</el-tag>
+                <el-tag v-else-if="row && row.status === 'UN_READY'" type="info">未读</el-tag>
+                <el-tag v-else-if="row" type="info">回收站</el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="mt_10" style="display: flex; justify-content: flex-end">
+            <el-pagination
+              v-model:current-page="searchMemberMessageForm.pageNumber"
+              v-model:page-size="searchMemberMessageForm.pageSize"
               :total="memberMessageDataTotal"
-              :page-size="searchMemberMessageForm.pageSize"
-              @on-change="memberMessageChangePage"
-              @on-page-size-change="memberMessageChangePageSize"
-              :page-size-opts="[20, 50, 100]"
+              :page-sizes="[20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
               size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-          </Row>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="messageDetailModalVisible = false">取消</Button>
-      </div>
-    </Modal>
+              @current-change="memberMessageChangePage"
+              @size-change="memberMessageChangePageSize"
+            />
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="messageDetailModalVisible = false">取消</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-  import * as API_Setting from "@/api/setting.js";
-  import * as API_Other from "@/api/other.js";
-  import * as API_Shop from "@/api/shops.js";
-  import userList from "@/views/member/list/index";
-  import { regular } from "@/utils";
-  export default {
-    name: "noticeMessageTemplate",
-    components: {
-      userList
+import * as API_Setting from "@/api/setting.js";
+import * as API_Other from "@/api/other.js";
+import * as API_Shop from "@/api/shops.js";
+import userList from "@/views/member/list/index";
+import { regular } from "@/utils";
+
+export default {
+  name: "noticeMessageTemplate",
+  components: {
+    userList,
+  },
+  data() {
+    return {
+      activeTab: "MESSAGE",
+      checkUserList: false,
+      selectedMember: [],
+      loading: true,
+      modalVisible: false,
+      modalTitle: "",
+      messageModalVisible: false,
+      messageModalTitle: "",
+      messageDetailModalVisible: false,
+      shopShow: false,
+      memberShow: false,
+      shopList: [],
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+      },
+      messageFormValidate: {
+        title: [regular.REQUIRED, regular.VARCHAR20],
+        content: [regular.REQUIRED, regular.VARCHAR255],
+      },
+      searchMessageForm: {
+        pageNumber: 1,
+        pageSize: 20,
+      },
+      searchShopMessageForm: {
+        pageNumber: 1,
+        pageSize: 20,
+      },
+      searchMemberMessageForm: {
+        pageNumber: 1,
+        pageSize: 20,
+      },
+      form: {
+        noticeNode: "",
+        noticeTitle: "",
+      },
+      messageSendForm: {
+        messageRange: "ALL",
+        messageClient: "member",
+        userIds: [],
+        userNames: [],
+      },
+      formValidate: {
+        noticeNode: [{ required: true, message: "请输入通知节点", trigger: "blur" }],
+        noticeTitle: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
+        noticeContent: [{ required: true, message: "请输通知内容", trigger: "blur" }],
+      },
+      submitLoading: false,
+      noticeData: [],
+      noticeDataTotal: 0,
+      messageData: [],
+      messageDataTotal: 0,
+      shopMessageData: [],
+      shopMessageDataTotal: 0,
+      memberMessageData: [],
+      memberMessageDataTotal: 0,
+    };
+  },
+  methods: {
+    init() {
+      this.getMessage();
     },
-    data() {
-      return {
-        checkUserList: false, //会员选择器
-        selectedMember: [], //选择的会员
-        loading: true, // 表单加载状态
-        modalVisible: false, // 添加或编辑显示
-        modalTitle: "", // 添加或编辑标题
-        messageModalVisible: false, // 发送站内信模态框
-        messageModalTitle: "", // 发送站内信标题
-        messageDetailModalVisible: false, // 添加或编辑显示
-        shopShow: false, //指定商家是否出现
-        memberShow: false, //指定会员是否出现
-        shopList: [],//店铺列表
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-        },
-        messageFormValidate: {
-          title: [
-            regular.REQUIRED,
-            regular.VARCHAR20
-          ],
-          content: [
-            regular.REQUIRED,
-            regular.VARCHAR255
-          ],
-        },
-        //管理端消息汇总
-        searchMessageForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-        },
-        //发送给店铺的消息
-        searchShopMessageForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-        },
-        //发送给会员的消息
-        searchMemberMessageForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-        },
-        form: {
-          noticeNode: "",
-          noticeTitle: ""
-        },
-        //消息发送表单
-        messageSendForm: {
-          messageRange: "ALL",
-          messageClient: "member",
-          userIds: [],
-          userNames: [],
-        },
-        // 表单验证规则
-        formValidate: {
-          noticeNode: [
-            {required: true, message: '请输入通知节点', trigger: 'blur'},
-          ],
-          noticeTitle: [
-            {required: true, message: '请输入通知标题', trigger: 'blur'},
-          ],
-          noticeContent: [
-            {required: true, message: '请输通知内容', trigger: 'blur'},
-          ],
-
-        },
-        submitLoading: false, // 添加或编辑提交状态
-        selectCount: 0, // 多选计数
-        noticeColumns: [
-          {
-            title: "通知节点",
-            key: "noticeNode",
-            maxWidth: 270,
-            sortable: false,
-          },
-          {
-            title: "通知标题",
-            key: "noticeTitle",
-            minWidth: 200,
-            sortable: false,
-          },
-          {
-            title: "通知内容",
-            key: "noticeContent",
-            minWidth: 300,
-            sortable: false,
-          },
-          {
-            title: "状态",
-            key: "noticeStatus",
-            maxWidth: 100,
-            sortType: "desc",
-            render: (h, params) => {
-              if (params.row.noticeStatus == "OPEN") {
-                return h("Badge", {props: {status: "success", text: "开启"}})
-              } else if (params.row.noticeStatus == "CLOSE") {
-                return h("Badge", {props: {status: "processing", text: "关闭"}})
-              }
+    callbackSelectUser(val) {
+      let findUser = this.selectedMember.find((item) => item.id === val.id);
+      if (!findUser) {
+        this.selectedMember.push(val);
+      } else {
+        this.selectedMember.map((item, index) => {
+          if (item.id === findUser.id) {
+            this.selectedMember.splice(index, 1);
+          }
+        });
+      }
+      this.reSelectMember();
+    },
+    delUser(index) {
+      this.selectedMember.splice(index, 1);
+      this.reSelectMember();
+    },
+    reSelectMember() {
+      this.form.memberDTOS = this.selectedMember.map((item) => ({
+        nickName: item.nickName,
+        id: item.id,
+      }));
+    },
+    getShopList() {
+      this.loading = true;
+      API_Shop.getShopList().then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.shopList = res.result;
+        }
+      });
+      this.loading = false;
+    },
+    addVip() {
+      this.checkUserList = true;
+      this.$nextTick(() => {
+        this.$refs.memberLayout.selectedMember = true;
+      });
+    },
+    paneChange(v) {
+      if (v == "SETTING") {
+        this.getNoticeMessage();
+      }
+      if (v == "MESSAGE") {
+        this.getMessage();
+      }
+    },
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getNoticeMessage();
+    },
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getNoticeMessage();
+    },
+    handleSearch() {
+      this.searchMessageForm.pageNumber = 1;
+      this.getMessage();
+    },
+    messageChangePageSize(v) {
+      this.searchMessageForm.pageSize = v;
+      this.searchMessageForm.pageNumber = 1;
+      this.getMessage();
+    },
+    messageChangePage(v) {
+      this.searchMessageForm.pageNumber = v;
+      this.getMessage();
+    },
+    memberMessageChangePageSize(v) {
+      this.searchMemberMessageForm.pageSize = v;
+      this.searchMemberMessageForm.pageNumber = 1;
+      this.messageDetail();
+    },
+    memberMessageChangePage(v) {
+      this.searchMemberMessageForm.pageNumber = v;
+      this.messageDetail();
+    },
+    memberMessageChangeSort(e) {
+      this.searchMemberMessageForm.sort = e.prop;
+      this.searchMemberMessageForm.order =
+        e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+      this.messageDetail();
+    },
+    shopMessageChangePageSize(v) {
+      this.searchShopMessageForm.pageSize = v;
+      this.messageDetail();
+    },
+    shopMessageChangePage(v) {
+      this.searchShopMessageForm.pageNumber = v;
+      this.messageDetail();
+    },
+    shopMessageChangeSort(e) {
+      this.searchShopMessageForm.sort = e.prop;
+      this.searchShopMessageForm.order =
+        e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+      this.messageDetail();
+    },
+    onShopIdsChange(ids) {
+      this.messageSendForm.userIds = ids || [];
+      this.messageSendForm.userNames = (ids || []).map((id) => {
+        const shop = this.shopList.find((s) => s.id === id);
+        return shop ? shop.storeName : "";
+      });
+    },
+    delete(id) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认删除此站内信 ?",
+        onOk: () => {
+          API_Setting.deleteMessage(id).then((res) => {
+            if (res.success) {
+              this.$Message.success("删除成功");
             }
-          },
-          {
-            title: "操作",
-            key: "action",
-            align: "center",
-            fixed: "right",
-            width: 140,
-            render: (h, params) => {
-              let enableOrDisable = "";
-              if (params.row.noticeStatus == "OPEN") {
-                enableOrDisable = h(
-                  "a",
-                  {
-                    on: {
-                      click: () => {
-                        this.disable(params.row);
-                      }
-                    }
-                  },
-                  "关闭"
-                );
-              } else {
-                enableOrDisable = h(
-                  "a",
-                  {
-                    on: {
-                      click: () => {
-                        this.enable(params.row);
-                      }
-                    }
-                  },
-                  "开启"
-                );
-              }
-              return h("div", { class: "ops" }, [
-                enableOrDisable,
-                h(
-                  "span",
-                  { style: { margin: "0 8px", color: "#dcdee2" } },
-                  "|"
-                ),
-                h(
-                  "a",
-                  {
-                    on: {
-                      click: () => {
-                        this.edit(params.row);
-                      }
-                    }
-                  },
-                  "编辑"
-                ),
-              ]);
-            }
-          },
-        ],
-        // 用户表格
-        userColumns: [
-          {
-            title: "用户名称",
-            key: "nickName",
-            minWidth: 120,
-          },
-          {
-            title: "手机号",
-            key: "mobile",
-            render: (h, params) => {
-              return h("div", params.row.mobile || "暂未填写");
-            },
-          },
-          {
-            title: "操作",
-            key: "action",
-            minWidth: 50,
-            align: "center",
-            render: (h, params) => {
-              return h("div", { class: "ops" }, [
-                h(
-                  "a",
-                  {
-                    on: {
-                      click: () => {
-                        this.delUser(params.index);
-                      },
-                    },
-                  },
-                  "删除"
-                )
-              ]);
-            },
-          },
-        ],
-        noticeData: [], // 表单数据
-        noticeDataTotal: 0, // 表单数据总数
-        messageColumns: [
-          {
-            title: "消息标题",
-            key: "title",
-            minWidth: 150,
-          },
-          {
-            title: "消息内容",
-            key: "content",
-            minWidth: 350,
-            tooltip: true
-          },
-          {
-            title: "发送对象",
-            key: "messageClient",
-            width: 100,
-            render: (h, params) => {
-              if (params.row.messageClient == "member") {
-                return h('div', [
-                  h('span', {}, '会员'),
-                ]);
-              } else if (params.row.messageClient == "store") {
-                return h('div', [
-                  h('span', {}, '商家'),
-                ]);
-              }
-            }
-          },
-          {
-            title: "发送类型",
-            key: "messageRange",
-            width: 100,
-            render: (h, params) => {
-              if (params.row.messageRange == "ALL") {
-                return h('div', [
-                  h('span', {}, '全站'),
-                ]);
-              } else if (params.row.messageRange == "APPOINT") {
-                return h('div', [
-                  h('span', {}, '指定商家'),
-                ]);
-              } else if (params.row.messageRange == "MEMBER") {
-                return h('div', [
-                  h('span', {}, '指定会员'),
-                ]);
-              }
-            }
-          },
-          {
-            title: "发送时间",
-            key: "createTime",
-            sortable: true,
-            width: 180,
-            sortable: false,
-          },
-          {
-            title: "操作",
-            key: "action",
-            align: "center",
-            fixed: "right",
-            width: 140,
-            render: (h, params) => {
-              return h("div", { class: "ops" }, [
-                h(
-                  "a",
-                  {
-                    on: {
-                      click: () => {
-                        this.detail(params.row);
-                      }
-                    }
-                  },
-                  "详细"
-                ),
-                h(
-                  "span",
-                  { style: { margin: "0 8px", color: "#dcdee2" } },
-                  "|"
-                ),
-                h(
-                  "a",
-                  {
-                    on: {
-                      click: () => {
-                        this.delete(params.row.id);
-                      }
-                    }
-                  },
-                  "删除"
-                ),
-              ]);
-            }
-          },
-        ],
-        messageData: [], // 表单数据
-        messageDataTotal: 0, // 表单数据总数
-        messageDetailColumns: [
-          {
-            title: "店铺ID",
-            key: "storeId",
-            maxWidth: 300,
-            sortable: false,
-          },
-          {
-            title: "店铺名称",
-            key: "storeName",
-            sortable: false,
-          },
-          {
-            title: "是否已读",
-            key: "status",
-            render: (h, params) => {
-              if (params.row.status == "ALREADY_READY") {
-                return h("Badge", {props: {status: "success", text: "已读"}})
-              } else if (params.row.status == "UN_READY") {
-                return h("Badge", {props: {status: "processing", text: "未读"}})
-              } else {
-                return h("Badge", {props: {status: "processing", text: "回收站"}})
-              }
-            }
-          },
-        ],
-        shopMessageData: [], // 发送给店铺的消息数据
-        shopMessageDataTotal: 0, // 发送给店铺的消息数据总数
-
-        memberMessageDetailColumns: [
-          {
-            title: "会员ID",
-            key: "memberId",
-            maxWidth: 300,
-            sortable: false,
-          },
-          {
-            title: "会员名称",
-            key: "memberName",
-            sortable: false,
-          },
-          {
-            title: "是否已读",
-            key: "status",
-            maxWidth: 120,
-            render: (h, params) => {
-              if (params.row.status == "ALREADY_READY") {
-                return h("Badge", {props: {status: "success", text: "已读"}})
-              } else if (params.row.status == "UN_READY") {
-                return h("Badge", {props: {status: "processing", text: "未读"}})
-              } else {
-                return h("Badge", {props: {status: "processing", text: "回收站"}})
-              }
-            }
-          },
-        ],
-        memberMessageData: [], // 发送给会员的消息数据
-        memberMessageDataTotal: 0, // 发送给会员的消息数据总数
+            this.getMessage();
+          });
+        },
+      });
+    },
+    sendMessage() {
+      this.messageModalVisible = true;
+      this.messageModalTitle = "发送站内信";
+      this.shopShow = false;
+      this.memberShow = false;
+      this.messageSendForm = {
+        messageRange: "ALL",
+        messageClient: "member",
+        content: "",
+        title: "",
+        userIds: [],
+        userNames: [],
       };
     },
-    methods: {
-      // 初始化数据
-      init() {
-        this.getMessage();
-      },
-      // 返回已选择的用户
-      callbackSelectUser(val) {
-        // 每次将返回的数据回调判断
-        let findUser = this.selectedMember.find((item) => {
-          return item.id === val.id;
+    sendMessageSubmit() {
+      let userIds = [];
+      let userNames = [];
+      if (this.messageSendForm.messageClient == "member" && this.messageSendForm.messageRange == "MEMBER") {
+        this.selectedMember.forEach(function (item) {
+          userIds.push(item.id);
+          userNames.push(item.username);
         });
-        // 如果没有则添加
-        if (!findUser) {
-          this.selectedMember.push(val);
-        } else {
-          // 有重复数据就删除
-          this.selectedMember.map((item, index) => {
-            if (item.id === findUser.id) {
-              this.selectedMember.splice(index, 1);
-            }
-          });
-        }
-        this.reSelectMember();
-      },
+        this.messageSendForm.userIds = userIds;
+        this.messageSendForm.userNames = userNames;
+      }
 
-      // 删除选择的会员
-      delUser(index) {
-        this.selectedMember.splice(index, 1);
-        this.reSelectMember();
-      },
-      //更新选择的会员
-      reSelectMember() {
-        this.form.memberDTOS = this.selectedMember.map((item) => {
-          return {
-            nickName: item.nickName,
-            id: item.id
-          }
-        });
-      },
-
-      //获取全部商家
-      getShopList() {
-        this.loading = true;
-        API_Shop.getShopList().then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.shopList = res.result;
-          }
-        });
-        this.loading = false;
-
-      },
-      // 添加指定用户
-      addVip() {
-        this.checkUserList = true;
-        this.$nextTick(() => {
-          this.$refs.memberLayout.selectedMember = true;
-        });
-      },
-      // tab切换
-      paneChange(v) {
-        if (v == "SETTING") {
-          this.getNoticeMessage()
-        }
-        if (v == "MESSAGE") {
-          this.getMessage()
-        }
-      },
-      // 分页 修改页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getNoticeMessage();
-      },
-      // 分页 修改页数
-      changePageSize(v) {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = v;
-        this.getNoticeMessage();
-      },
-      // 搜索
-      handleSearch() {
-        this.searchMessageForm.pageNumber = 1;
-        this.getMessage();
-      },
-
-      //消息每页条数发生变化
-      messageChangePageSize(v) {
-        this.searchMessageForm.pageSize = v;
-        this.searchMessageForm.pageNumber = 1;
-        this.getMessage();
-      },
-      //消息页数变化
-      messageChangePage(v) {
-        this.searchMessageForm.pageNumber = v;
-        this.getMessage();
-        this.clearSelectAll();
-      },
-
-      //会员消息每页条数发生变化
-      memberMessageChangePageSize(v) {
-        this.searchMemberMessageForm.pageSize = v;
-        this.searchMemberMessageForm.pageNumber = 1;
-        this.messageDetail();
-      },
-      //会员消息页数变化
-      memberMessageChangePage(v) {
-        this.searchMemberMessageForm.pageNumber = v;
-        this.messageDetail();
-        this.clearSelectAll();
-      },
-      //会员消息
-      memberMessageChangeSort(e) {
-        this.searchMemberMessageForm.sort = e.key;
-        this.searchMemberMessageForm.order = e.order;
-        this.messageDetail()
-      },
-
-      //店铺消息每页条数发生变化
-      shopMessageChangePageSize(v) {
-        this.searchShopMessageForm.pageSize = v;
-        this.messageDetail();
-      },
-      //店铺消息页数变化
-      shopMessageChangePage(v) {
-        this.searchShopMessageForm.pageNumber = v;
-        this.messageDetail();
-        this.clearSelectAll();
-      },
-      //店铺消息
-      shopMessageChangeSort(e) {
-        this.searchShopMessageForm.sort = e.key;
-        this.searchShopMessageForm.order = e.order;
-        this.messageDetail()
-      },
-      //获取发送段铺的名称
-      getName(value) {
-        this.messageSendForm.userNames = new Array()
-        value.forEach((item) => {
-          this.messageSendForm.userNames.push(item.label)
-        })
-      },
-      //删除站内信
-      delete(id) {
-        console.warn(id)
-        this.$Modal.confirm({
-          title: "确认删除",
-          // 记得确认修改此处
-          content: "您确认删除此站内信 ?",
-          loading: true,
-          onOk: () => {
-            API_Setting.deleteMessage(id).then((res) => {
-              if (res.success) {
-                this.$Message.success("删除成功");
-              }
-              this.$Modal.remove();
-              this.getMessage();
-            });
-
-
-          }
-        });
-      },
-      //管理员发送消息
-      sendMessage() {
-        this.messageModalVisible = true
-        this.messageModalTitle = "发送站内信"
-        this.shopShow = false
-        this.memberShow = false
-        this.messageSendForm =
-          {
-            messageRange: "ALL",
-            messageClient: "member",
-            content: "",
-            title: "",
-            userIds: [],
-            userNames: [],
-          }
-      },
-      //管理员发送站内信提交
-      sendMessageSubmit() {
-        let userIds = [];
-        let userNames = [];
-        console.warn(this.selectedMember)
-        if (this.messageSendForm.messageClient == 'member' && this.messageSendForm.messageRange == 'MEMBER'){
-          this.selectedMember.forEach(function(item, index) {
-            userIds.push(item.id)
-            userNames.push(item.username)
-          })
-          this.messageSendForm.userIds = userIds
-          this.messageSendForm.userNames = userNames
-        }
-
-        if (this.messageSendForm.userIds.length <= 0 && this.messageSendForm.messageRange == "APPOINT") {
-          this.$Message.error("请选择发送对象");
-          return
-        }
-        this.$refs["messageSendForm"].validate(valid => {
-          if (valid) {
-            API_Other.sendMessage(this.messageSendForm).then((res) => {
-              this.loading = false;
-              if (res.success) {
-                this.$Message.success("发送成功");
-                this.messageModalVisible = false
-                this.getMessage();
-              }
-            });
+      if (this.messageSendForm.userIds.length <= 0 && this.messageSendForm.messageRange == "APPOINT") {
+        this.$Message.error("请选择发送对象");
+        return;
+      }
+      this.$refs["messageSendForm"].validate((valid) => {
+        if (valid) {
+          API_Other.sendMessage(this.messageSendForm).then((res) => {
             this.loading = false;
-          }
-        })
-
-      },
-      //发送对象选择
-      selectObject(v) {
-        this.messageSendForm.messageRange = "ALL"
-        this.shopShow = false
-        this.memberShow =false
-      },
-      //弹出选择商家的框
-      selectShop(v) {
-        if (v == "APPOINT") {
-          this.getShopList()
-          this.shopShow = true
-          this.memberShow = false
-        }
-        if (v == "ALL") {
-          this.shopShow = false
-          this.memberShow = false
-        }
-        if (v == "MEMBER") {
-          this.shopShow = false
-          this.memberShow = true
-          this.selectedMember = []
-        }
-      },
-      //获取管理员发送列表
-      getMessage() {
-        this.loading = true;
-        API_Other.getMessagePage(this.searchMessageForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.messageData = res.result.records;
-            this.messageDataTotal = res.result.total;
-          }
-        });
-        this.loading = false;
-      },
-      // 获取通知数据
-      getNoticeMessage() {
-        this.loading = true;
-        API_Setting.getNoticeMessageData(this.searchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.noticeData = res.result.records;
-            this.noticeDataTotal = res.result.total;
-          }
-        });
-        this.loading = false;
-      },
-      //保存通知类站内信
-      handleSubmit() {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            let params = {
-              noticeContent: this.form.noticeContent,
-              noticeTitle: this.form.noticeTitle
-            }
-            API_Setting.editNoticeMessage(this.form.id, params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("修改成功");
-                this.modalVisible = false;
-                this.getNoticeMessage();
-              }
-            });
-          }
-        });
-      },
-      //消息详情
-      messageDetail() {
-        if (this.messageSendForm.messageClient == 'member') {
-          API_Other.getMemberMessage(this.searchMemberMessageForm).then((res) => {
             if (res.success) {
-              this.memberMessageData = res.result.records;
-              this.memberMessageDataTotal = res.result.total;
+              this.$Message.success("发送成功");
+              this.messageModalVisible = false;
+              this.getMessage();
             }
           });
-        } else {
-          console.warn(this.searchShopMessageForm)
-          API_Other.getShopMessage(this.searchShopMessageForm).then((res) => {
+          this.loading = false;
+        }
+      });
+    },
+    selectObject() {
+      this.messageSendForm.messageRange = "ALL";
+      this.shopShow = false;
+      this.memberShow = false;
+    },
+    selectShop(v) {
+      if (v == "APPOINT") {
+        this.getShopList();
+        this.shopShow = true;
+        this.memberShow = false;
+      }
+      if (v == "ALL") {
+        this.shopShow = false;
+        this.memberShow = false;
+      }
+      if (v == "MEMBER") {
+        this.shopShow = false;
+        this.memberShow = true;
+        this.selectedMember = [];
+      }
+    },
+    getMessage() {
+      this.loading = true;
+      API_Other.getMessagePage(this.searchMessageForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.messageData = res.result.records;
+          this.messageDataTotal = res.result.total;
+        }
+      });
+      this.loading = false;
+    },
+    getNoticeMessage() {
+      this.loading = true;
+      API_Setting.getNoticeMessageData(this.searchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.noticeData = res.result.records;
+          this.noticeDataTotal = res.result.total;
+        }
+      });
+      this.loading = false;
+    },
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          let params = {
+            noticeContent: this.form.noticeContent,
+            noticeTitle: this.form.noticeTitle,
+          };
+          API_Setting.editNoticeMessage(this.form.id, params).then((res) => {
+            this.submitLoading = false;
             if (res.success) {
-              this.shopMessageData = res.result.records;
-              this.shopMessageDataTotal = res.result.total;
+              this.$Message.success("修改成功");
+              this.modalVisible = false;
+              this.getNoticeMessage();
             }
           });
         }
-
-      },
-      //消息详情弹出框
-      detail(v) {
-        console.warn(this.searchShopMessageForm)
-        this.messageSendForm = v
-        if (this.messageSendForm.messageClient == 'member') {
-          this.searchMemberMessageForm.messageId = v.id
-        } else {
-          this.searchShopMessageForm.messageId = v.id
+      });
+    },
+    messageDetail() {
+      if (this.messageSendForm.messageClient == "member") {
+        API_Other.getMemberMessage(this.searchMemberMessageForm).then((res) => {
+          if (res.success) {
+            this.memberMessageData = res.result.records;
+            this.memberMessageDataTotal = res.result.total;
+          }
+        });
+      } else {
+        API_Other.getShopMessage(this.searchShopMessageForm).then((res) => {
+          if (res.success) {
+            this.shopMessageData = res.result.records;
+            this.shopMessageDataTotal = res.result.total;
+          }
+        });
+      }
+    },
+    detail(v) {
+      this.messageSendForm = v;
+      if (this.messageSendForm.messageClient == "member") {
+        this.searchMemberMessageForm.messageId = v.id;
+      } else {
+        this.searchShopMessageForm.messageId = v.id;
+      }
+      this.messageDetail();
+      this.messageDetailModalVisible = true;
+      this.modalTitle = "消息详情";
+    },
+    edit(v) {
+      API_Setting.getNoticeMessageDetail(v.id).then((res) => {
+        if (res.success) {
+          this.modalTitle = "编辑通知类推送";
+          this.modalVisible = true;
+          this.form = res.result;
         }
-        this.messageDetail();
-        this.messageDetailModalVisible = true;
-        this.modalTitle = "消息详情"
-      },
-      // 编辑通知
-      edit(v) {
-        API_Setting.getNoticeMessageDetail(v.id).then((res) => {
-          if (res.success) {
-            this.modalTitle = "编辑通知类推送"
-            this.modalVisible = true
-            this.form = res.result
-          }
-        });
-      },
-      //禁用站内信模板
-      disable(v) {
-        API_Setting.updateMessageStatus(v.id, "CLOSE").then((res) => {
-          if (res.success) {
-            this.$Message.success("禁用成功");
-            this.getNoticeMessage();
-          }
-        });
-      },
-      //启用站内信模板
-      enable(v) {
-        API_Setting.updateMessageStatus(v.id, "OPEN").then((res) => {
-          if (res.success) {
-            this.$Message.success("启用成功");
-            this.getNoticeMessage();
-          }
-        });
-      },
-
+      });
     },
-    mounted() {
-      this.init();
+    disable(v) {
+      API_Setting.updateMessageStatus(v.id, "CLOSE").then((res) => {
+        if (res.success) {
+          this.$Message.success("禁用成功");
+          this.getNoticeMessage();
+        }
+      });
     },
-  };
+    enable(v) {
+      API_Setting.updateMessageStatus(v.id, "OPEN").then((res) => {
+        if (res.success) {
+          this.$Message.success("启用成功");
+          this.getNoticeMessage();
+        }
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
+
 <style lang="scss">
-  @import "sms.scss";
+@import "sms.scss";
 </style>
 <style lang="scss" scoped>
-  .ops a {
-    color: #2d8cf0;
-    cursor: pointer;
-    text-decoration: none;
-  }
-  .ops span {
-    display: inline-block;
-    margin: 0 8px;
-    color: #dcdee2;
-  }
+.ops a {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.ops span {
+  display: inline-block;
+  margin: 0 8px;
+  color: #dcdfe6;
+}
 </style>
diff --git a/manager/src/views/sys/message/sms.vue b/manager/src/views/sys/message/sms.vue
index c6cd3f13..881f720f 100644
--- a/manager/src/views/sys/message/sms.vue
+++ b/manager/src/views/sys/message/sms.vue
@@ -1,496 +1,387 @@
 <template>
   <div class="search">
-      <Card>
-        <Tabs value="LIST" @on-click="paneChange">
-          <TabPane label="发送任务列表" name="LIST">
-            <Row class="operation" style="margin-bottom: 10px">
-              <Button @click="sendBatchSmsModal" type="primary">发送短信</Button>
-            </Row>
-            <Table :loading="loading" border :columns="smsColumns" :data="smsData" ref="table">
-            </Table>
-
-            <Row type="flex" justify="end" class="mt_10">
-              <Page :current="smsSearchForm.pageNumber" :total="smsTotal" :page-size="smsSearchForm.pageSize" @on-change="smsChangePage" @on-page-size-change="smsChangePageSize"
-                :page-size-opts="[20, 50, 100]" size="small" show-total show-elevator show-sizer></Page>
-            </Row>
-          </TabPane>
-          <TabPane label="短信模板" name="TEMPLATE">
-            <Row class="operation" style="margin-bottom: 10px">
-              <Button @click="addTemplate" type="primary">添加短信模板</Button>
-              <Button @click="syncTemplate" type="info">同步</Button>
-            </Row>
-            <Table :loading="loading" border :columns="templateColumns" :data="templateData" ref="table">
-            </Table>
-            <Row type="flex" justify="end" class="mt_10">
-              <Page :current="templateSearchForm.pageNumber" :total="templateTotal" :page-size="templateSearchForm.pageSize" @on-change="templateChangePage"
-                @on-page-size-change="templateChangePageSize" :page-size-opts="[20, 50, 100]" size="small" show-total show-elevator show-sizer></Page>
-            </Row>
-          </TabPane>
-          <TabPane label="短信签名" name="SIGN">
-            <Row class="operation" style="margin-bottom: 10px">
-              <Button @click="addSign" type="primary">添加短信签名</Button>
-              <Button @click="syncSign" type="info">同步</Button>
-            </Row>
-            <Table :loading="loading" border :columns="signColumns" :data="signData" ref="table">
-              <template slot="signStatus" slot-scope="scope">
-                <div v-if="scope.row.signStatus ==2 ">
-                  审核拒绝
-                  <Poptip trigger="hover" :content=scope.row.reason placement="top-start" transfer>
-                    <span style="color: #ed3f14">【原因】</span>
-                  </Poptip>
-                </div>
-                <div v-if="scope.row.signStatus ==0 ">
-                  审核中
-                </div>
-                <div v-if="scope.row.signStatus ==1 ">
-                  审核通过
-                </div>
+    <el-card>
+      <el-tabs v-model="activeTab" class="sms-tabs" @tab-change="paneChange">
+        <el-tab-pane label="发送任务列表" name="LIST">
+          <div class="operation" style="margin-bottom: 10px">
+            <el-button type="primary" @click="sendBatchSmsModal">发送短信</el-button>
+          </div>
+          <el-table v-loading="loading" border :data="smsData" style="width: 100%">
+            <el-table-column prop="smsName" label="模板名称" width="250" />
+            <el-table-column prop="signName" label="签名" width="150" />
+            <el-table-column prop="context" label="短信内容" min-width="300" show-overflow-tooltip />
+            <el-table-column prop="num" label="预计发送条数" width="140" />
+            <el-table-column label="操作" width="120" align="center" fixed="right">
+              <template #default="{ row }">
+                <a v-if="row" class="link-text" @click="detail(row)">详细</a>
               </template>
-            </Table>
-            <Row type="flex" justify="end" class="mt_10">
-              <Page :current="signSearchForm.pageNumber" :total="signTotal" :page-size="signSearchForm.pageSize" @on-change="signChangePage" @on-page-size-change="signChangePageSize"
-                :page-size-opts="[20, 50, 100]" size="small" show-total show-elevator show-sizer></Page>
-            </Row>
-          </TabPane>
-        </Tabs>
-      </Card>
-    <Modal :title="templateModalTitle" v-model="templateModalVisible" :mask-closable="false" :width="500">
-      <Form ref="templateForm" :model="templateForm" :label-width="100" :rules="templateFormValidate">
-        <FormItem label="模板名称" prop="templateName">
-          <Input v-model="templateForm.templateName" maxlength="30" clearable style="width: 90%" placeholder="请输入模板名称，不超过30字符" />
-        </FormItem>
-        <FormItem label="模板内容" prop="templateContent">
-          <Input v-model="templateForm.templateContent" clearable type="textarea" style="width: 90%" maxlength="200" :autosize="{maxRows:5,minRows: 5}" show-word-limit
-            placeholder="请输入短信内容，不超过500字符，不支持【】、★、 ※、 →、 ●等特殊符号；" />
-        </FormItem>
-        <FormItem label="申请说明" prop="remark">
-          <Input v-model="templateForm.remark" clearable type="textarea" style="width: 90%" maxlength="150" :autosize="{maxRows:4,minRows: 4}" show-word-limit
-            placeholder="请描述您的业务使用场景，不超过100字符；如：用于春节集五福" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="templateModalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="templateSubmit">提交
-        </Button>
-      </div>
-    </Modal>
-    <Modal :title="sendSmsModalTitle" v-model="sendSmsModal" :mask-closable="false" :width="900">
+            </el-table-column>
+          </el-table>
+          <div class="mt_10" style="display: flex; justify-content: flex-end">
+            <el-pagination
+              v-model:current-page="smsSearchForm.pageNumber"
+              v-model:page-size="smsSearchForm.pageSize"
+              :total="smsTotal"
+              :page-sizes="[20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
+              size="small"
+              @current-change="smsChangePage"
+              @size-change="smsChangePageSize"
+            />
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="短信模板" name="TEMPLATE">
+          <div class="operation" style="margin-bottom: 10px">
+            <el-button type="primary" @click="addTemplate">添加短信模板</el-button>
+            <el-button type="info" @click="syncTemplate">同步</el-button>
+          </div>
+          <el-table v-loading="loading" border :data="templateData" style="width: 100%">
+            <el-table-column prop="templateCode" label="模板code" min-width="120" />
+            <el-table-column prop="templateName" label="模板名称" min-width="140" />
+            <el-table-column prop="templateContent" label="模板内容" min-width="200" show-overflow-tooltip />
+            <el-table-column label="状态" width="120" align="center">
+              <template #default="{ row }">
+                <span v-if="row">{{ templateStatusText(row.templateStatus) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="200" align="center" fixed="right">
+              <template #default="{ row }">
+                <template v-if="row">
+                  <a
+                    class="link-text"
+                    :class="{ disabled: row.templateStatus != 2 }"
+                    @click="row.templateStatus == 2 && editTemplate(row)"
+                  >
+                    编辑
+                  </a>
+                  <span class="op-split">|</span>
+                  <a
+                    class="link-text"
+                    :class="{ disabled: row.templateStatus == 0 }"
+                    @click="row.templateStatus != 0 && deleteSmsTemplate(row)"
+                  >
+                    删除
+                  </a>
+                </template>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="mt_10" style="display: flex; justify-content: flex-end">
+            <el-pagination
+              v-model:current-page="templateSearchForm.pageNumber"
+              v-model:page-size="templateSearchForm.pageSize"
+              :total="templateTotal"
+              :page-sizes="[20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
+              size="small"
+              @current-change="templateChangePage"
+              @size-change="templateChangePageSize"
+            />
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="短信签名" name="SIGN">
+          <div class="operation" style="margin-bottom: 10px">
+            <el-button type="primary" @click="addSign">添加短信签名</el-button>
+            <el-button type="info" @click="syncSign">同步</el-button>
+          </div>
+          <el-table v-loading="loading" border :data="signData" style="width: 100%">
+            <el-table-column prop="signName" label="签名名称" min-width="140" />
+            <el-table-column prop="remark" label="申请说明" min-width="160" show-overflow-tooltip />
+            <el-table-column label="状态" width="160" align="center">
+              <template #default="{ row }">
+                <template v-if="row">
+                  <template v-if="row.signStatus == 2">
+                    审核拒绝
+                    <el-popover trigger="hover" :content="row.reason" placement="top-start" width="200">
+                      <template #reference>
+                        <span style="color: #ed3f14; cursor: pointer">【原因】</span>
+                      </template>
+                    </el-popover>
+                  </template>
+                  <span v-else-if="row.signStatus == 0">审核中</span>
+                  <span v-else-if="row.signStatus == 1">审核通过</span>
+                </template>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="200" align="center" fixed="right">
+              <template #default="{ row }">
+                <template v-if="row">
+                  <a
+                    class="link-text"
+                    :class="{ disabled: row.signStatus != 2 }"
+                    @click="row.signStatus == 2 && editSign(row)"
+                  >
+                    编辑
+                  </a>
+                  <span class="op-split">|</span>
+                  <a
+                    class="link-text"
+                    :class="{ disabled: row.signStatus == 0 }"
+                    @click="row.signStatus != 0 && deleteSmsSign(row)"
+                  >
+                    删除
+                  </a>
+                </template>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="mt_10" style="display: flex; justify-content: flex-end">
+            <el-pagination
+              v-model:current-page="signSearchForm.pageNumber"
+              v-model:page-size="signSearchForm.pageSize"
+              :total="signTotal"
+              :page-sizes="[20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
+              size="small"
+              @current-change="signChangePage"
+              @size-change="signChangePageSize"
+            />
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+
+    <el-dialog
+      v-model="templateModalVisible"
+      :title="templateModalTitle"
+      width="520px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form ref="templateForm" :model="templateForm" label-width="100px" :rules="templateFormValidate">
+        <el-form-item label="模板名称" prop="templateName">
+          <el-input v-model="templateForm.templateName" maxlength="30" clearable placeholder="请输入模板名称，不超过30字符" />
+        </el-form-item>
+        <el-form-item label="模板内容" prop="templateContent">
+          <el-input
+            v-model="templateForm.templateContent"
+            type="textarea"
+            maxlength="200"
+            :rows="5"
+            show-word-limit
+            placeholder="请输入短信内容"
+          />
+        </el-form-item>
+        <el-form-item label="申请说明" prop="remark">
+          <el-input
+            v-model="templateForm.remark"
+            type="textarea"
+            maxlength="150"
+            :rows="4"
+            show-word-limit
+            placeholder="请描述您的业务使用场景"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="templateModalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="templateSubmit">提交</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="sendSmsModal"
+      :title="sendSmsModalTitle"
+      width="900px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
       <div class="send-setting">
-        <div class="left-show" v-html="smsContent">
-          <div class="sms">效果预览</div>
-        </div>
+        <div class="left-show" v-html="smsContent"></div>
+        <div class="sms">效果预览</div>
         <div class="send-form">
-          <Form ref="smsForm" :model="smsForm" :label-width="100" :rules="smsFormValidate">
-            <FormItem label="短信签名" prop="signName">
-              <Select @on-change="selectSmsSign" v-model="smsForm.signName" style="width: 35%;">
-                <Option v-for="item in smsSigns" :value="item.signName" :key="item.signName">{{ item.signName }}
-                </Option>
-              </Select>
-            </FormItem>
-            <FormItem label="短信模板" prop="messageCode">
-              <Select @on-change="selectSmsTemplate" v-model="smsForm.messageCode" style="width: 35%;">
-                <Option v-for="(item,index) in smsTemplates" :key="index" :value="item.templateCode">{{
-                  item.templateName }}
-                  <input type="hidden"></input>
-                </Option>
-              </Select>
-            </FormItem>
-            <FormItem label="短信内容" prop="context">
-              <Input v-model="smsForm.context" clearable type="textarea" style="width: 90%" maxlength="50" :autosize="{maxRows:4,minRows: 4}" show-word-limit disabled />
-            </FormItem>
-            <FormItem label="接收人" prop="smsRange">
+          <el-form ref="smsForm" :model="smsForm" label-width="100px" :rules="smsFormValidate">
+            <el-form-item label="短信签名" prop="signName">
+              <el-select v-model="smsForm.signName" style="width: 35%" @change="selectSmsSign">
+                <el-option
+                  v-for="item in smsSigns"
+                  :key="item.signName"
+                  :label="item.signName"
+                  :value="item.signName"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="短信模板" prop="messageCode">
+              <el-select v-model="smsForm.messageCode" style="width: 35%" @change="selectSmsTemplate">
+                <el-option
+                  v-for="(item, index) in smsTemplates"
+                  :key="index"
+                  :label="item.templateName"
+                  :value="item.templateCode"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="短信内容" prop="context">
+              <el-input
+                v-model="smsForm.context"
+                type="textarea"
+                maxlength="50"
+                :rows="4"
+                show-word-limit
+                disabled
+              />
+            </el-form-item>
+            <el-form-item label="接收人" prop="smsRange">
               <p>
-                已选<span style="color: #f56c1d"> {{memberNum}}</span>人，预计耗费条数<span style="color: #f56c1d">{{this.smsForm.num}}条</span>
+                已选<span style="color: #f56c1d"> {{ memberNum }}</span>人，预计耗费条数<span style="color: #f56c1d">
+                  {{ smsForm.num }}条</span
+                >
               </p>
-              <RadioGroup type="button" button-style="solid" @on-change="smsRangeChange" v-model="smsForm.smsRange">
-                <Radio label="1">全部会员</Radio>
-                <Radio label="2">自定义选择</Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem>
-              <div class="choose-member" v-if="customSms">
+              <el-radio-group v-model="smsForm.smsRange" @change="smsRangeChange">
+                <el-radio value="1">全部会员</el-radio>
+                <el-radio value="2">自定义选择</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="customSms">
+              <div class="choose-member">
                 <div class="source-member">
-                  <Input suffix="ios-search" @on-enter="memberSearch" v-model="memberSearchParam.mobile" @on-blur="memberSearch" placeholder="请输入手机号码" style="width: 92%" />
-                  <div style="margin-top: 5px">
-                    <Scroll :on-reach-bottom="memberSearchEdge">
-
-                      <div dis-hover v-for="(item, index) in members" :key="index" class="scroll-card">
-                        <Button class="btns" :class="{'active':item.____selected}" @click="moveMember(index,item)" style="width: 100%;text-align: left">
-                          <span v-if="item.mobile" class="mobile">
-                            {{item.mobile}}
-                          </span>
-                          <span class="nickname">
-                            {{  item.nickName}}
-                          </span>
-                        </Button>
-
-                      </div>
-                    </Scroll>
-                  </div>
+                  <el-input
+                    v-model="memberSearchParam.mobile"
+                    placeholder="请输入手机号码"
+                    clearable
+                    @keyup.enter="memberSearch"
+                    @blur="memberSearch"
+                  >
+                    <template #append>
+                      <el-button @click="memberSearch">搜索</el-button>
+                    </template>
+                  </el-input>
+                  <el-scrollbar height="280px" class="member-scroll" @scroll="onMemberScroll">
+                    <div v-for="(item, index) in members" :key="index" class="scroll-card">
+                      <el-button
+                        class="btns"
+                        :class="{ active: item.____selected }"
+                        style="width: 100%; text-align: left"
+                        @click="moveMember(index, item)"
+                      >
+                        <span v-if="item.mobile" class="mobile">{{ item.mobile }}</span>
+                        <span class="nickname">{{ item.nickName }}</span>
+                      </el-button>
+                    </div>
+                  </el-scrollbar>
                 </div>
-                <div class="traget-member" style="overflow:auto">
-                  <div v-for="(item, index) in alreadyCheckShow" :key="index"  >
-                    <Tag class="checkbox-tag" closable @on-close="alreadyCheckClose(item,index)">{{item.mobile ||
-                      item.nickName}}
-                    </Tag>
-                  </div>
+                <div class="traget-member">
+                  <el-tag
+                    v-for="(item, index) in alreadyCheckShow"
+                    :key="index"
+                    closable
+                    class="checkbox-tag"
+                    @close="alreadyCheckClose(item, index)"
+                  >
+                    {{ item.mobile || item.nickName }}
+                  </el-tag>
                 </div>
               </div>
-            </FormItem>
-          </Form>
+            </el-form-item>
+          </el-form>
         </div>
-
       </div>
-      <div slot="footer">
-        <Button type="text" @click="sendSmsModal = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="sendSms">发送</Button>
-      </div>
-    </Modal>
+      <template #footer>
+        <el-button @click="sendSmsModal = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="sendSms">发送</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
-
 <script>
 import * as API_Setting from "@/api/setting.js";
 import * as API_Member from "@/api/member.js";
 
 export default {
   name: "sms",
-  components: {},
-
   data() {
     return {
-      loading:false,
-      customSms: false, //当选择自动发送对象 展示
-      alreadyCheck: [], //已经选中的数据
-      alreadyCheckShow: [], //已经选择的值负责显示
-      memberPage: 0, // 会员信息
-      members: [], //所有会员
-      smsTemplateContent: "", //短信模板内容
-      memberNum: 0, //会员总数
-      smsContent: "<div class='sms'>效果预览</div>", //短信内容
-      smsTemplates: [], //短信模板
-      smsSigns: [], //短信签名
-      sendSmsModal: false, //弹出发送短信模态框
-      sendSmsModalTitle: "短信发送", //发送短信模态框标题
-      modalType: 0, // 添加或编辑标识
-      templateModalVisible: false, //添加短信模板弹出框
-      templateModalTitle: "", //添加短信模板弹出框标题
-      templateForm: {}, //短信模板添加form
-      submitLoading: false, // 提交加载状态
-      signSearchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-      },
-      //短信模板查询form
-      templateSearchForm: {
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-      },
-      //会员条数查询form
-      memberSearchFrom: {
-        disabled: "OPEN", // 会员状态
-      },
-      //会员查询条件
+      activeTab: "LIST",
+      loading: false,
+      customSms: false,
+      alreadyCheck: [],
+      alreadyCheckShow: [],
+      memberPage: 0,
+      members: [],
+      smsTemplateContent: "",
+      memberNum: 0,
+      smsContent: "<div class='sms'>效果预览</div>",
+      smsTemplates: [],
+      smsSigns: [],
+      sendSmsModal: false,
+      sendSmsModalTitle: "短信发送",
+      modalType: 0,
+      templateModalVisible: false,
+      templateModalTitle: "",
+      templateForm: {},
+      submitLoading: false,
+      signSearchForm: { pageNumber: 1, pageSize: 20 },
+      templateSearchForm: { pageNumber: 1, pageSize: 20 },
+      memberSearchFrom: { disabled: "OPEN" },
       memberSearchParam: {
-        pageNumber: 1, // 当前页数
-        pageSize: 8, // 页面大小
-        disabled: "OPEN", // 会员状态
+        pageNumber: 1,
+        pageSize: 8,
+        disabled: "OPEN",
       },
-      //短信记录查询form
       smsSearchForm: {
         sort: "createTime",
         order: "desc",
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
+        pageNumber: 1,
+        pageSize: 20,
       },
-      smsForm: { // 短信模板数据
+      smsForm: {
         smsName: "",
         signName: "",
         context: "",
         smsRange: "1",
         num: 0,
         messageCode: "",
-      }, //短信发送form
-      //短信发送参数校验
+      },
       smsFormValidate: {
-        signName: [
-          {
-            required: true,
-            message: "请选择短信签名",
-            trigger: "blur",
-          },
-        ],
-        messageCode: [
-          {
-            required: true,
-            message: "请选择短信模板",
-            trigger: "blur",
-          },
-        ],
+        signName: [{ required: true, message: "请选择短信签名", trigger: "change" }],
+        messageCode: [{ required: true, message: "请选择短信模板", trigger: "change" }],
       },
       templateFormValidate: {
-        templateName: [
-          {
-            required: true,
-            message: "请输入短信模板名称",
-            trigger: "blur",
-          },
-        ],
-        templateContent: [
-          {
-            required: true,
-            message: "请输入短信模板内容",
-            trigger: "blur",
-          },
-        ],
-        remark: [
-          {
-            required: true,
-            message: "请输入短信模板申请说明",
-            trigger: "blur",
-          },
-        ],
+        templateName: [{ required: true, message: "请输入短信模板名称", trigger: "blur" }],
+        templateContent: [{ required: true, message: "请输入短信模板内容", trigger: "blur" }],
+        remark: [{ required: true, message: "请输入短信模板申请说明", trigger: "blur" }],
       },
-      smsColumns: [
-        {
-          title: "模板名称",
-          key: "smsName",
-          width: 250,
-        },
-        {
-          title: "签名",
-          width: 150,
-          key: "signName",
-        },
-        {
-          title: "短信内容",
-          minWidth: 300,
-          key: "context",
-          tooltip: true,
-        },
-        {
-          title: "预计发送条数",
-          key: "num",
-          width: 140,
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 150,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.detail(params.row);
-                    },
-                  },
-                },
-                "详细"
-              ),
-            ]);
-          },
-        },
-      ],
-      smsData: [], // 表单数据
-      smsTotal: 0, // 表单数据总数
-      templateColumns: [
-        {
-          title: "模板code",
-          key: "templateCode",
-        },
-        {
-          title: "模板名称",
-          key: "templateName",
-        },
-        {
-          title: "模板内容",
-          key: "templateContent",
-        },
-        {
-          title: "状态",
-          key: "templateStatus",
-          headerAlign: "center",
-          Width: "100px",
-          render: (h, params) => {
-            if (params.row.templateStatus == 0) {
-              return h("div", {}, "审核中");
-            } else if(params.row.templateStatus == 1){
-              return h("div", {}, "审核通过");
-            } else {
-              return h("div", {}, "审核失败");
-            }
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          fixed: "right",
-          width: 200,
-          align: "center",
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: params.row.templateStatus == 2 ? "#2d8cf0" : "#c5c8ce",
-                    cursor: params.row.templateStatus == 2 ? "pointer" : "not-allowed",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      if (params.row.templateStatus != 2) return;
-                      this.editTemplate(params.row);
-                    },
-                  },
-                },
-                "编辑"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: params.row.templateStatus == 0 ? "#c5c8ce" : "#2d8cf0",
-                    cursor: params.row.templateStatus == 0 ? "not-allowed" : "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      if (params.row.templateStatus == 0) return;
-                      this.deleteSmsTemplate(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      templateData: [], // 表单数据
-      templateTotal: 0, // 表单数据总数
-      signColumns: [
-        {
-          title: "签名名称",
-          key: "signName",
-        },
-        {
-          title: "申请说明",
-          key: "remark",
-        },
-        {
-          title: "状态",
-          key: "signStatus",
-          headerAlign: "center",
-          Width: "100px",
-          slot: "signStatus",
-        },
-        {
-          title: "操作",
-          key: "action",
-          fixed: "right",
-          width: 200,
-          align: "center",
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: params.row.signStatus == 2 ? "#2d8cf0" : "#c5c8ce",
-                    cursor: params.row.signStatus == 2 ? "pointer" : "not-allowed",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      if (params.row.signStatus != 2) return;
-                      this.editSign(params.row);
-                    },
-                  },
-                },
-                "编辑"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: params.row.signStatus == 0 ? "#c5c8ce" : "#2d8cf0",
-                    cursor: params.row.signStatus == 0 ? "not-allowed" : "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      if (params.row.signStatus == 0) return;
-                      this.deleteSmsSign(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      signData: [], // 表单数据
-      signTotal: 0, // 表单数据总数
+      smsData: [],
+      smsTotal: 0,
+      templateData: [],
+      templateTotal: 0,
+      signData: [],
+      signTotal: 0,
+      memberLoadingMore: false,
     };
   },
   methods: {
-    // 初始化数据
+    templateStatusText(status) {
+      const map = { 0: "审核中", 1: "审核通过", 2: "审核失败" };
+      return map[status] ?? map[String(status)] ?? "-";
+    },
     init() {
       this.getSms();
-      //查询会员总数
       this.getMemberNum();
     },
-    //查询会员条数
     getMemberNum() {
       API_Member.getMemberNum(this.memberSearchFrom).then((res) => {
-        this.loading = false;
         if (res.success) {
           this.memberNum = res.result;
-          this.smsForm.num = this.memberNum; //全部会员则会员数就等于条数
+          this.smsForm.num = this.memberNum;
         }
       });
     },
-    //已经选择的人取消选中
-    alreadyCheckClose(val,index) {
+    alreadyCheckClose(val, index) {
       this.alreadyCheck.splice(index, 1);
       this.alreadyCheckShow.splice(index, 1);
-      this.members.forEach((item,index)=>{
-        if(item.____selected && item.mobile == val.mobile){
-          item.____selected = false
+      this.members.forEach((item) => {
+        if (item.____selected && item.mobile == val.mobile) {
+          item.____selected = false;
         }
-      })
+      });
       this.smsForm.num--;
       this.memberNum--;
     },
-    //发送短信详细
-    detail(){
-
-    },
-    //选择接收人事件
+    detail() {},
     smsRangeChange(v) {
       this.memberNum = 0;
       this.smsForm.num = 0;
@@ -502,16 +393,16 @@ export default {
       }
       if (v == 2) {
         this.customSms = true;
+        this.members = [];
+        this.memberSearchParam.pageNumber = 1;
         this.getMembers();
       }
     },
-    //搜索会员
     memberSearch() {
       this.memberSearchParam.pageNumber = 1;
       this.members = [];
       this.getMembers();
     },
-    //移动会员
     moveMember(index, item) {
       if (!item.mobile) {
         this.$Message.error("当前用户暂无手机号绑定");
@@ -524,8 +415,7 @@ export default {
         this.smsForm.num++;
         this.memberNum++;
       } else {
-        //如果已选择数组内存在此用户则不在进行选择
-        let result = this.alreadyCheck.indexOf(item.mobile);
+        const result = this.alreadyCheck.indexOf(item.mobile);
         if (result < 0) {
           this.smsForm.num++;
           this.memberNum++;
@@ -534,36 +424,28 @@ export default {
         }
       }
     },
-    //底部滑动查询会员
-    memberSearchEdge() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          if (this.memberPage != this.memberSearchParam.pageNumber) {
-            this.memberSearchParam.pageNumber++;
-            this.getMembers();
-            resolve();
-          } else {
-            resolve();
-            return false;
-          }
-        }, 1000);
-      });
+    onMemberScroll({ scrollTop }) {
+      const wrap = document.querySelector(".member-scroll .el-scrollbar__wrap");
+      if (!wrap || this.memberLoadingMore) return;
+      const nearBottom = scrollTop + wrap.clientHeight >= wrap.scrollHeight - 20;
+      if (nearBottom && this.memberPage != this.memberSearchParam.pageNumber) {
+        this.memberLoadingMore = true;
+        this.memberSearchParam.pageNumber++;
+        this.getMembers(true);
+      }
     },
-    //分页查询会员信息
-    getMembers() {
+    getMembers(append = false) {
       API_Member.getMemberListData(this.memberSearchParam).then((res) => {
-        this.loading = false;
+        this.memberLoadingMore = false;
         if (res.success) {
           res.result.records.forEach((item) => {
             item.____selected = false;
             this.members.push(item);
           });
-
           this.memberPage = res.result.pages;
         }
       });
     },
-    //弹出发送短信模态框
     sendBatchSmsModal() {
       this.templateSearchForm.templateStatus = 1;
       API_Setting.getSmsTemplatePage(this.templateSearchForm).then((res) => {
@@ -578,11 +460,9 @@ export default {
         }
       });
       this.smsContent = "<div class='sms'>效果预览</div>";
-      //添加的时候将已经选过的手机号码置为空
       this.alreadyCheck = [];
       this.alreadyCheckShow = [];
       this.smsTemplateContent = "效果预览";
-      // this.smsTemplateContent = "";
       this.smsForm = {
         smsName: "",
         signName: "",
@@ -592,67 +472,45 @@ export default {
         messageCode: "",
       };
       this.getMemberNum();
-      this.loading = false;
       this.sendSmsModal = true;
     },
-    //pane切换事件
-    paneChange(v) {
-      if (v == "TEMPLATE") {
+    paneChange(name) {
+      if (name == "TEMPLATE") {
         this.getSmsTemplate();
       }
-      if (v == "SIGN") {
+      if (name == "SIGN") {
         this.getSmsSign();
       }
     },
-    //短信签名变化方法
     selectSmsSign(v) {
-      if (v != void 0) {
-        //给预览赋值
-        this.smsContent =
-          "<div class='sms'>【" +
-          v +
-          "】" +
-          " " +
-          this.smsTemplateContent +
-          "</div>";
+      if (v != undefined) {
+        this.smsContent = "<div class='sms'>【" + v + "】" + " " + this.smsTemplateContent + "</div>";
       } else {
-        this.smsContent =
-          "<div class='sms'>效果预览" + this.smsTemplateContent + "</div>";
+        this.smsContent = "<div class='sms'>效果预览" + this.smsTemplateContent + "</div>";
       }
     },
-    //短信模板变化方法
-    selectSmsTemplate(v) {
-      //循环短信模板 如果选择短信模板匹配则查询出当前模板的内容
+    selectSmsTemplate() {
       this.smsTemplates.forEach((e) => {
         if (this.smsForm.messageCode == e.templateCode) {
           this.smsTemplateContent = e.templateContent;
           this.smsForm.smsName = e.templateName;
         }
       });
-      if (this.smsForm.signName != "" && this.smsForm.signName != void 0) {
+      if (this.smsForm.signName) {
         this.smsContent =
-          "<div class='sms'>【" +
-          this.smsForm.signName +
-          "】" +
-          this.smsTemplateContent +
-          "</div>";
+          "<div class='sms'>【" + this.smsForm.signName + "】" + this.smsTemplateContent + "</div>";
       } else {
-        this.smsContent =
-          "<div class='sms'>" + this.smsTemplateContent + "</div>";
+        this.smsContent = "<div class='sms'>" + this.smsTemplateContent + "</div>";
       }
       this.smsForm.context = this.smsTemplateContent;
     },
-    //删除短信模板
     deleteSmsTemplate(v) {
-      let params = {
-        templateCode: v.templateCode,
-      };
       this.$Modal.confirm({
         title: "确认删除",
         content: "您确认要删除此短信模板？",
         loading: true,
         onOk: () => {
-          API_Setting.deleteSmsTemplatePage(params).then((res) => {
+          API_Setting.deleteSmsTemplatePage({ templateCode: v.templateCode }).then((res) => {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("删除成功");
@@ -662,40 +520,34 @@ export default {
         },
       });
     },
-    //发送短信
     sendSms() {
       this.$refs.smsForm.validate((valid) => {
-        const mobile = this.alreadyCheck;
-        this.smsForm.mobile = mobile;
-        if (valid) {
-          API_Setting.sendSms(this.smsForm).then((res) => {
-            if (res.success) {
-              this.$Message.success("发送成功");
-              this.getSms();
-              this.sendSmsModal = false;
-            }
-          });
-        }
+        if (!valid) return;
+        this.smsForm.mobile = this.alreadyCheck;
+        API_Setting.sendSms(this.smsForm).then((res) => {
+          if (res.success) {
+            this.$Message.success("发送成功");
+            this.getSms();
+            this.sendSmsModal = false;
+          }
+        });
       });
     },
-    //添加短信签名
     addSign() {
       this.$router.push({ name: "add-sms-sign" });
     },
-    //新增短信模板
     addTemplate() {
       this.templateModalVisible = true;
       this.templateModalTitle = "添加短信模板";
       this.templateForm = {};
+      this.modalType = 0;
     },
-    //修改短信模板
     editTemplate(v) {
       this.templateModalVisible = true;
       this.templateModalTitle = "修改短信模板";
-      this.templateForm = v;
+      this.templateForm = { ...v };
       this.modalType = 1;
     },
-    //同步签名
     syncSign() {
       this.loading = true;
       API_Setting.syncSign().then((res) => {
@@ -705,46 +557,29 @@ export default {
           this.getSmsSign();
         }
       });
-      this.loading = false;
     },
-    //短信模板添加提交
     templateSubmit() {
       this.$refs.templateForm.validate((valid) => {
-        if (valid) {
-          this.loading = true;
-          if (this.modalType == 0) {
-            API_Setting.addSmsTemplatePage(this.templateForm)
-              .then((res) => {
-                this.loading = false;
-                if (res.success) {
-                  this.$Message.success("添加成功");
-                  this.loading = false;
-                  this.templateModalVisible = false;
-                  this.getSmsTemplate();
-                }
-              })
-              .catch(() => {
-                this.loading = false;
-              });
-          } else {
-            API_Setting.editSmsTemplatePage(this.templateForm)
-              .then((res) => {
-                this.loading = false;
-                if (res.success) {
-                  this.$Message.success("修改成功");
-                  this.loading = false;
-                  this.templateModalVisible = false;
-                  this.getSmsTemplate();
-                }
-              })
-              .catch(() => {
-                this.loading = false;
-              });
-          }
-        }
+        if (!valid) return;
+        this.submitLoading = true;
+        const req =
+          this.modalType == 0
+            ? API_Setting.addSmsTemplatePage(this.templateForm)
+            : API_Setting.editSmsTemplatePage(this.templateForm);
+        req
+          .then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success(this.modalType == 0 ? "添加成功" : "修改成功");
+              this.templateModalVisible = false;
+              this.getSmsTemplate();
+            }
+          })
+          .catch(() => {
+            this.submitLoading = false;
+          });
       });
     },
-    //删除短信签名
     deleteSmsSign(v) {
       this.$Modal.confirm({
         title: "确认删除",
@@ -755,13 +590,12 @@ export default {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("删除成功");
-              this.getSmsTemplate();
+              this.getSmsSign();
             }
           });
         },
       });
     },
-    //短信模板同步
     syncTemplate() {
       this.loading = true;
       API_Setting.syncTemplate().then((res) => {
@@ -771,100 +605,106 @@ export default {
           this.getSmsTemplate();
         }
       });
-      this.loading = false;
     },
-    //短信记录页数变化
     smsChangePage(v) {
       this.smsSearchForm.pageNumber = v;
       this.getSms();
     },
-    //短信记录页数变化
     smsChangePageSize(v) {
       this.smsSearchForm.pageNumber = 1;
       this.smsSearchForm.pageSize = v;
       this.getSms();
     },
-    //短信模板页数变化
     templateChangePage(v) {
       this.templateSearchForm.pageNumber = v;
       this.getSmsTemplate();
     },
-    //短信模板页数变化
     templateChangePageSize(v) {
-      this.templateSearchForm.pageNumber =1;
+      this.templateSearchForm.pageNumber = 1;
       this.templateSearchForm.pageSize = v;
       this.getSmsTemplate();
     },
-    //分页获取短信模板数据
     getSmsTemplate() {
       this.loading = true;
-      API_Setting.getSmsTemplatePage(this.templateSearchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.templateData = res.result.records;
-          this.templateTotal = res.result.total;
-        }
-      });
-      this.loading = false;
+      API_Setting.getSmsTemplatePage(this.templateSearchForm)
+        .then((res) => {
+          if (res.success) {
+            this.templateData = res.result.records;
+            this.templateTotal = res.result.total;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
-    //分页获取短信记录数据
     getSms() {
       this.loading = true;
-      API_Setting.getSmsPage(this.smsSearchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.smsData = res.result.records;
-          this.smsTotal = res.result.total;
-        }
-      });
-      this.loading = false;
+      API_Setting.getSmsPage(this.smsSearchForm)
+        .then((res) => {
+          if (res.success) {
+            this.smsData = res.result.records;
+            this.smsTotal = res.result.total;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
-    //短信模板页数变化
     signChangePage(v) {
       this.signSearchForm.pageNumber = v;
       this.getSmsSign();
     },
-    //短信模板页数变化
     signChangePageSize(v) {
       this.signSearchForm.pageNumber = 1;
       this.signSearchForm.pageSize = v;
       this.getSmsSign();
     },
-    //修改短信签名
     editSign(v) {
       this.$router.push({ name: "add-sms-sign", query: { id: v.id } });
     },
-    //分页获取短信签名数据
     getSmsSign() {
       this.loading = true;
-      API_Setting.getSmsSignPage(this.signSearchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.signData = res.result.records;
-          this.signTotal = res.result.total;
-        }
-      });
-      this.loading = false;
+      API_Setting.getSmsSignPage(this.signSearchForm)
+        .then((res) => {
+          if (res.success) {
+            this.signData = res.result.records;
+            this.signTotal = res.result.total;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
   },
   mounted() {
     this.init();
-  }
+  },
 };
 </script>
 
 <style lang="scss">
 @import "sms.scss";
 
-.split {
-  height: 200px;
-  border: 1px solid #dcdee2;
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+  &.disabled {
+    color: #c5c8ce;
+    cursor: not-allowed;
+  }
 }
-
-.split-pane {
-  padding: 10px;
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
 }
-.ivu-tabs{
-   min-height: 500px;
+.mt_10 {
+  margin-top: 10px;
+}
+.sms-tabs {
+  min-height: 500px;
+}
+.checkbox-tag {
+  margin: 4px;
 }
 </style>
diff --git a/manager/src/views/sys/message/smsSign.vue b/manager/src/views/sys/message/smsSign.vue
index 8225fa4d..b78e945a 100644
--- a/manager/src/views/sys/message/smsSign.vue
+++ b/manager/src/views/sys/message/smsSign.vue
@@ -1,181 +1,179 @@
 <template>
-  <Card>
-    <div style="margin-top: 0px">
-      <div class="sign-name">
-        {{id ? '修改签名' : '新增签名'}}
-      </div>
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="签名" prop="signName">
-          <Input v-model="form.signName" maxlength="12" clearable style="width: 28%"
-                 placeholder="仅限2-12个字符，建议使用App应用名称或是网站名/公司名"/>
-        </FormItem>
-        <FormItem label="签名来源" prop="signSource">
-          <Select v-model="form.signSource" placeholder="请选择签名来源" style="width: 28%">
-            <Option :value="0">企事业单位的全称或简称</Option>
-            <Option :value="1">工信部备案网站的全称或简称</Option>
-            <Option :value="2">App应用的全称或简称</Option>
-            <Option :value="3">公众号或小程序的全称或简称</Option>
-            <Option :value="4">电商平台店铺名的全称或简称</Option>
-            <Option :value="5">商标名的全称或简称</Option>
-          </Select>
-        </FormItem>
+  <el-card>
+    <div style="margin-top: 0">
+      <div class="sign-name">{{ id ? "修改签名" : "新增签名" }}</div>
+      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+        <el-form-item label="签名" prop="signName">
+          <el-input
+            v-model="form.signName"
+            maxlength="12"
+            clearable
+            style="width: 28%"
+            placeholder="仅限2-12个字符，建议使用App应用名称或是网站名/公司名"
+          />
+        </el-form-item>
+        <el-form-item label="签名来源" prop="signSource">
+          <el-select v-model="form.signSource" placeholder="请选择签名来源" style="width: 28%">
+            <el-option label="企事业单位的全称或简称" :value="0" />
+            <el-option label="工信部备案网站的全称或简称" :value="1" />
+            <el-option label="App应用的全称或简称" :value="2" />
+            <el-option label="公众号或小程序的全称或简称" :value="3" />
+            <el-option label="电商平台店铺名的全称或简称" :value="4" />
+            <el-option label="商标名的全称或简称" :value="5" />
+          </el-select>
+        </el-form-item>
         <div class="div-remark div-remark-first">
           签名来源选择工信部备案网站的全称或简称时，请在说明中添加网站域名，加快审核速度；
         </div>
         <div class="div-remark div-remark-bottom">
           如果选择APP应用的全称或简称或公众号或小程序的全称或简称，则网站、APP、小程序或公众号必须已上线；
         </div>
-        <FormItem label="证明文件">
+        <el-form-item label="证明文件">
           <div style="float: left">
-            <upload-pic-thumb
-              v-model="form.businessLicense"
-              :multiple="false"
-              :max-size="2048"
-            >
-            </upload-pic-thumb>
+            <upload-pic-thumb v-model="form.businessLicense" :multiple="false" :max-size="2048" />
           </div>
-          <div style="float: left;margin-left: 20px">
-            <upload-pic-thumb
-              v-model="form.license"
-              :max-size="2048"
-              :multiple="false"
-            ></upload-pic-thumb>
+          <div style="float: left; margin-left: 20px">
+            <upload-pic-thumb v-model="form.license" :max-size="2048" :multiple="false" />
           </div>
-        </FormItem>
+        </el-form-item>
         <div class="div-remark div-remark-first">
           第一张为营业执照，第二张为授权委托书，请上传签名归属方的企事业单位的企业营业执照、组织机构代码证、税务登记证三证合一的证件及授权委托书
         </div>
-        <div class="div-remark div-remark-bottom">
-          支持jpg、png、gif、jpeg格式的图片，每张图片不大于2MB
-        </div>
-        <FormItem label="申请说明" prop="remark">
-          <Input v-model="form.remark" clearable type="textarea" style="width: 50%" maxlength="100"
-            :autosize="{maxRows:4,minRows: 4}" show-word-limit
-            placeholder="请描述您的业务使用场景，不超过100字符；如：验证码、双十一大促营销"/>
-        </FormItem>
-      </Form>
+        <div class="div-remark div-remark-bottom">支持jpg、png、gif、jpeg格式的图片，每张图片不大于2MB</div>
+        <el-form-item label="申请说明" prop="remark">
+          <el-input
+            v-model="form.remark"
+            clearable
+            type="textarea"
+            style="width: 50%"
+            maxlength="100"
+            :autosize="{ maxRows: 4, minRows: 4 }"
+            show-word-limit
+            placeholder="请描述您的业务使用场景，不超过100字符；如：验证码、双十一大促营销"
+          />
+        </el-form-item>
+      </el-form>
       <div class="footer">
-        <Button type="primary" :loading="submitLoading" @click="addSignSubmit">提交</Button>
+        <el-button type="primary" :loading="submitLoading" @click="addSignSubmit">提交</el-button>
       </div>
     </div>
-  </Card>
+  </el-card>
 </template>
 
 <script>
-  import * as API_Setting from "@/api/setting.js";
-  import uploadPicThumb from "@/components/lili/upload-pic-thumb";
+import * as API_Setting from "@/api/setting.js";
+import uploadPicThumb from "@/components/lili/upload-pic-thumb";
 
-  export default {
-    name: "smsSign",
-    components: {
-      uploadPicThumb
-    },
-    data() {
-      return {
-        id: 0, // 签名id
-        form: { // 表单
-          signName: "",
-          businessLicense: "",
-          license: "",
-        },
-        loading: false, // 加载状态
-        formValidate: { // 验证规则
-          signName: [{required: true, message: "签名名称不能为空", trigger: "blur"}],
-          remark: [{required: true, message: "申请说明不能为空", trigger: "blur"}],
-          businessLicense: [{required: true, message: " ", trigger: "blur"}],
-        },
-        submitLoading: false //提交加载状态
-      }
-
-    },
-    methods: {
-      // 初始化数据
-      init() {
-        this.id = this.$route.query.id;
-        if (this.id != undefined) {
-          this.getSmsSignDetail();
-        }
+export default {
+  name: "smsSign",
+  components: {
+    uploadPicThumb,
+  },
+  data() {
+    return {
+      id: 0,
+      form: {
+        signName: "",
+        businessLicense: "",
+        license: "",
+        signSource: "",
+        remark: "",
       },
-      //添加短信模板
-      addSignSubmit() {
-        //校验证件信息
-        if (this.form.businessLicense == "" || this.form.license == "") {
-          this.$Message.error("请完善证件信息");
-          return
-        }
-        //校验签名来源
-        if (this.form.signSource == "") {
-          this.$Message.error("请选择签名来源");
-          return
-        }
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            this.loading = true;
-            //新增
-            if (this.id == undefined) {
-              API_Setting.addSmsSign(this.form).then(res => {
-                this.loading = false;
-                if (res.success) {
-                  this.$Message.success('添加成功');
-                  this.$router.back()
-                }
-              }).catch(() => {
-                this.loading = false;
-              });
-            } else {
-              API_Setting.editSmsSign(this.form).then(res => {
-                this.loading = false;
-                if (res.success) {
-                  this.$Message.success('修改成功');
-                  this.$router.back()
-                }
-              }).catch(() => {
-                this.loading = false;
-              });
-            }
-
-          }
-        })
+      loading: false,
+      formValidate: {
+        signName: [{ required: true, message: "签名名称不能为空", trigger: "blur" }],
+        remark: [{ required: true, message: "申请说明不能为空", trigger: "blur" }],
+        businessLicense: [{ required: true, message: " ", trigger: "blur" }],
       },
-      //查询短信签名详细
-      getSmsSignDetail() {
-        API_Setting.smsSignDetail(this.id).then(res => {
-          this.loading = false;
-          if (res.success) {
-            this.form = res.result
-          }
-        })
+      submitLoading: false,
+    };
+  },
+  methods: {
+    init() {
+      this.id = this.$route.query.id;
+      if (this.id != undefined) {
+        this.getSmsSignDetail();
       }
     },
-    mounted() {
-      this.init();
+    addSignSubmit() {
+      if (this.form.businessLicense == "" || this.form.license == "") {
+        this.$Message.error("请完善证件信息");
+        return;
+      }
+      if (this.form.signSource === "" || this.form.signSource === null || this.form.signSource === undefined) {
+        this.$Message.error("请选择签名来源");
+        return;
+      }
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          if (this.id == undefined) {
+            API_Setting.addSmsSign(this.form)
+              .then((res) => {
+                this.loading = false;
+                if (res.success) {
+                  this.$Message.success("添加成功");
+                  this.$router.back();
+                }
+              })
+              .catch(() => {
+                this.loading = false;
+              });
+          } else {
+            API_Setting.editSmsSign(this.form)
+              .then((res) => {
+                this.loading = false;
+                if (res.success) {
+                  this.$Message.success("修改成功");
+                  this.$router.back();
+                }
+              })
+              .catch(() => {
+                this.loading = false;
+              });
+          }
+        }
+      });
     },
-  };
+    getSmsSignDetail() {
+      API_Setting.smsSignDetail(this.id).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.form = res.result;
+        }
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
+
 <style lang="scss" scoped>
-   .sign-name {
-    margin-top: 5px;
-    margin-left: 20px;
-    font-size: 16px;
-    margin-bottom: 30px;
-    color: #333;
-  }
+.sign-name {
+  margin-top: 5px;
+  margin-left: 20px;
+  font-size: 16px;
+  margin-bottom: 30px;
+  color: #333;
+}
 
-  .div-remark {
-    margin-left: 100px;
-    margin-bottom: 2px;
-    color: #999;
-  }
+.div-remark {
+  margin-left: 100px;
+  margin-bottom: 2px;
+  color: #999;
+}
 
-  .div-remark-first {
-    margin-top: -17px;
-  }
+.div-remark-first {
+  margin-top: -17px;
+}
 
-  .div-remark-bottom {
-    margin-bottom: 8px;
-  }
+.div-remark-bottom {
+  margin-bottom: 8px;
+}
 
-  .footer {
-    margin-left: 100px;
-  }
+.footer {
+  margin-left: 100px;
+}
 </style>
diff --git a/manager/src/views/sys/oss-manage/ossManage.vue b/manager/src/views/sys/oss-manage/ossManage.vue
index 26def2b6..5acbe31a 100644
--- a/manager/src/views/sys/oss-manage/ossManage.vue
+++ b/manager/src/views/sys/oss-manage/ossManage.vue
@@ -23,7 +23,7 @@
   flex: 11;
 }
 
-.ivu-card {
+.el-card {
   width: 100%;
 }
 
@@ -45,134 +45,174 @@
   margin-bottom: 16px;
 }
 
+.oss-tree-node {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-right: 8px;
+}
+
+.oss-tree-more {
+  cursor: pointer;
+  color: #909399;
+  padding: 0 4px;
+}
+
 </style>
 <template>
   <div class="search">
-    <Card class="tabs-card">
-      <Tabs v-model="activeRoleTab" @on-click="handleRoleTabChange">
-        <TabPane label="管理员" name="MANAGER"></TabPane>
-        <TabPane label="商家" name="STORE"></TabPane>
-        <TabPane label="用户" name="MEMBER"></TabPane>
-        <TabPane label="客服" name="CUSTOMER"></TabPane>
-      </Tabs>
-    </Card>
-    <Row>
-      <Card>
+    <el-card class="tabs-card">
+      <el-tabs v-model="activeRoleTab" @tab-change="handleRoleTabChange">
+        <el-tab-pane label="管理员" name="MANAGER" />
+        <el-tab-pane label="商家" name="STORE" />
+        <el-tab-pane label="用户" name="MEMBER" />
+        <el-tab-pane label="客服" name="CUSTOMER" />
+      </el-tabs>
+    </el-card>
+    <el-row>
+      <el-card>
         <div>
           <div class="operation">
-            <Row @keydown.enter.native="handleSearch">
-              <Form
+            <el-row @keyup.enter="handleSearch">
+              <el-form
                 ref="searchForm"
-                :label-width="85"
+                label-width="85px"
                 :model="searchForm"
                 class="search-form"
                 inline
               >
-                <Form-item label="上传时间">
-                  <DatePicker
+                <el-form-item label="上传时间">
+                  <el-date-picker
                     v-model="selectDate"
                     clearable
-                    format="yyyy-MM-dd"
-                    placeholder="选择起始时间"
+                    value-format="YYYY-MM-DD"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
                     style="width: 240px"
                     type="daterange"
-                    @on-change="selectDateRange"
-                  ></DatePicker>
-                </Form-item>
-                <Button
-                  class="search-btn"
-                  icon="ios-search"
-                  type="primary"
-                  @click="handleSearch"
-                >搜索
-                </Button>
-              </Form>
-            </Row>
+                    @change="selectDateRange"
+                  />
+                </el-form-item>
+                <el-form-item>
+                  <el-button class="search-btn" type="primary" @click="handleSearch">搜索</el-button>
+                </el-form-item>
+              </el-form>
+            </el-row>
           </div>
-          <Row class="oss-manage-box">
-            <Col v-if="canShowGroups" :span="isComponent?5:4">
+          <el-row class="oss-manage-box">
+            <el-col v-if="canShowGroups" :span="isComponent ? 5 : 4">
               <div class="file-list">
                 <div class="article-category mr_10">
-                  <Tree :data="treeData" :render="renderContent" @on-select-change.self="handleCateChange"
-                        class="demo-tree-render"></Tree>
-                  <div class="group-row flex" v-if="!isComponent">
-                    <Button @click="handleClickAddGroup">添加分组</Button>
+                  <el-tree
+                    :data="treeData"
+                    node-key="value"
+                    :props="{ label: 'title', children: 'children' }"
+                    highlight-current
+                    class="demo-tree-render"
+                    @node-click="handleTreeNodeClick"
+                  >
+                    <template #default="{ data }">
+                      <span v-if="data" class="oss-tree-node">
+                        <span>{{ data.title }}</span>
+                        <el-dropdown
+                          v-if="data.value !== '0' && !isComponent"
+                          trigger="click"
+                          @command="(cmd) => onTreeDropdownCommand(cmd, data)"
+                        >
+                          <span class="oss-tree-more" @click.stop>···</span>
+                          <template #dropdown>
+                            <el-dropdown-menu>
+                              <el-dropdown-item command="edit">编辑</el-dropdown-item>
+                              <el-dropdown-item command="delete">删除</el-dropdown-item>
+                            </el-dropdown-menu>
+                          </template>
+                        </el-dropdown>
+                      </span>
+                    </template>
+                  </el-tree>
+                  <div v-if="!isComponent" class="group-row flex">
+                    <el-button @click="handleClickAddGroup">添加分组</el-button>
                   </div>
                 </div>
               </div>
-            </Col>
-            <Col :span="canShowGroups ? (isComponent ? 19 : 20) : 24">
+            </el-col>
+            <el-col :span="canShowGroups ? (isComponent ? 19 : 20) : 24">
               <div class="pic-list">
                 <div>
-                  <div class="oss-operation padding-row" style="display: flex;flex-direction: row-reverse;">
+                  <div class="oss-operation padding-row" style="display: flex; flex-direction: row-reverse">
                     <div>
-                      <Upload
+                      <el-upload
                         v-if="canUploadImages"
                         ref="up"
                         :action="commonUrl + '/common/common/upload/file'"
                         :data="uploadData"
                         :headers="accessToken"
                         :before-upload="beforeUpload"
-                        :max-size="20480"
                         :on-error="handleError"
-                        :on-exceeded-size="handleMaxSize"
                         :on-success="handleSuccess"
-                        :show-upload-list="false"
+                        :show-file-list="false"
                         multiple
                         style="display: inline-block"
                       >
-                        <Button>上传图片</Button>
-                      </Upload>
-                      <Button v-if="!isComponent && showType == 'list'" @click="removeAll">批量删除</Button>
+                        <el-button>上传图片</el-button>
+                      </el-upload>
+                      <el-button v-if="!isComponent && showType == 'list'" @click="removeAll">批量删除</el-button>
                     </div>
                   </div>
                 </div>
                 <div>
-                  <CheckboxGroup v-model="selectedOss" @on-change="selectOssChange">
+                  <el-checkbox-group v-model="selectedOss" @change="selectOssChange">
                     <div class="img-box">
                       <div v-for="(item, index) in data" :key="index" class="img-item">
-                        <Checkbox :label="item.id+','+item.url" class="check-box">
-                          <template>
-                            <div class="card" @mouseenter.active="onMouseOver(item, index)"
-                                 @mouseleave.active="onMouseOut(item, index)">
-                              <!--<div class="custom-checkbox-card-mask"><div class="custom-checkbox-card-mask-dot"/></div>-->
-                              <img :src="item.url" alt=""/>
-                              <div v-if="item.isShowPreview" class="preview">
-                                <div @click.prevent="download(item)">
-                                  <Tooltip content="下载">
-                                    <Icon type="md-cloud-download" size="18"/>
-                                  </Tooltip>
-                                </div>
-                                <div @click.prevent="remove(item)">
-                                  <Tooltip content="删除">
-                                    <Icon type="md-trash" size="18"/>
-                                  </Tooltip>
-                                </div>
-                                <div @click.prevent="showPic(item)">
-                                  <Tooltip content="预览">
-                                    <Icon type="ios-eye" size="22"/>
-                                  </Tooltip>
-                                </div>
+                        <el-checkbox :value="item.id + ',' + item.url" class="check-box">
+                          <div
+                            class="card"
+                            @mouseenter="onMouseOver(item, index)"
+                            @mouseleave="onMouseOut(item, index)"
+                          >
+                            <img :src="item.url" alt="" />
+                            <div v-if="item.isShowPreview" class="preview">
+                              <div @click.prevent="download(item)">
+                                <el-tooltip content="下载" placement="top">
+                                  <el-icon :size="18"><Download /></el-icon>
+                                </el-tooltip>
+                              </div>
+                              <div @click.prevent="remove(item)">
+                                <el-tooltip content="删除" placement="top">
+                                  <el-icon :size="18"><Delete /></el-icon>
+                                </el-tooltip>
+                              </div>
+                              <div @click.prevent="showPic(item)">
+                                <el-tooltip content="预览" placement="top">
+                                  <el-icon :size="22"><View /></el-icon>
+                                </el-tooltip>
                               </div>
                             </div>
-                          </template>
-                        </Checkbox>
+                          </div>
+                        </el-checkbox>
                         <div>
-                          <Tooltip :content="item.name" placement="bottom">
+                          <el-tooltip :content="item.name" placement="bottom">
                             <div class="text">{{ item.name }}</div>
-                          </Tooltip>
+                          </el-tooltip>
                         </div>
                       </div>
                     </div>
-                  </CheckboxGroup>
+                  </el-checkbox-group>
                 </div>
                 <div class="page-box">
-                  <Page :total="total" :page-size="searchForm.pageSize" show-elevator @on-change="pageChange"
-                        size="small"/>
+                  <el-pagination
+                    v-model:current-page="searchForm.pageNumber"
+                    v-model:page-size="searchForm.pageSize"
+                    :total="total"
+                    layout="prev, pager, next, jumper"
+                    size="small"
+                    @current-change="pageChange"
+                  />
                 </div>
               </div>
-            </Col>
-          </Row>
+            </el-col>
+          </el-row>
 
 
           <!--<div class="oss-operation padding-row">-->
@@ -334,97 +374,89 @@
         <!--@on-page-size-change="changePageSize"-->
         <!--&gt;</Page>-->
         <!--</Row>-->
-      </Card>
-    </Row>
-    <Modal
+      </el-card>
+    </el-row>
+    <el-dialog
       v-model="modalVisible"
-      :mask-closable="false"
+      :close-on-click-modal="false"
       :title="modalTitle"
-      :width="500"
+      width="500px"
+      destroy-on-close
     >
-      <Form ref="form" :label-width="95" :model="form" :rules="formValidate">
-        <FormItem label="原文件名" prop="name">
-          <Input v-model="form.name"/>
-        </FormItem>
-        <FormItem label="存储文件名" prop="fileKey">
-          <Input v-model="form.fileKey" disabled/>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="handleCancel">取消</Button>
-        <Button :loading="submitLoading" type="primary" @click="handleSubmit"
-        >提交
-        </Button>
-      </div>
-    </Modal>
+      <el-form ref="form" label-width="95px" :model="form" :rules="formValidate">
+        <el-form-item label="原文件名" prop="name">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="存储文件名" prop="fileKey">
+          <el-input v-model="form.fileKey" disabled />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button :loading="submitLoading" type="primary" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
 
-    <Modal v-model="picVisible" :title="picTitle" draggable>
+    <el-dialog v-model="picVisible" :title="picTitle" width="600px">
       <img
         :src="file.url"
         alt="无效的图片链接"
         style="width: 100%; margin: 0 auto; display: block"
       />
-      <div slot="footer">
-        <span
-        >文件类型：{{ file.fileType }} 文件大小：{{ file.msize }} 创建时间：{{
-            file.createTime
-          }}</span
-        >
-      </div>
-    </Modal>
+      <template #footer>
+        <span>文件类型：{{ file.fileType }} 文件大小：{{ file.msize }} 创建时间：{{ file.createTime }}</span>
+      </template>
+    </el-dialog>
 
-    <Modal
+    <el-dialog
       v-model="videoVisible"
       :title="videoTitle"
-      :width="800"
-      draggable
-      @on-cancel="closeVideo"
+      width="800px"
+      destroy-on-close
+      @close="closeVideo"
     >
       <div id="dplayer"></div>
-      <div slot="footer">
-        <span
-        >文件类型：{{ file.fileType }} 文件大小：{{ file.msize }} 创建时间：{{
-            file.createTime
-          }}</span
-        >
-      </div>
-    </Modal>
+      <template #footer>
+        <span>文件类型：{{ file.fileType }} 文件大小：{{ file.msize }} 创建时间：{{ file.createTime }}</span>
+      </template>
+    </el-dialog>
 
-    <!-- 添加分组修改分组编辑框 -->
-    <Modal
+    <el-dialog
       v-model="enableGroup"
       :title="insertOrUpdate === 'insert' ? '添加分组' : '修改分组'"
-      :loading="groupLoading"
-      @on-ok="submitAddGroup"
-      footer-hide
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
     >
-      <Form
+      <el-form
         ref="formValidate"
-        :label-width="80"
+        label-width="80px"
         :model="groupFormValidate"
         :rules="groupRuleValidate"
       >
-        <FormItem label="所在分组" prop="id">
-          <Cascader
+        <el-form-item label="所在分组" prop="id">
+          <el-cascader
             v-model="defaultValue"
-            :data="treeData"
-            change-on-select
-            @on-change="treeDataChange"
-          ></Cascader>
-        </FormItem>
-        <FormItem label="分组名称" prop="directoryName">
-          <Input v-model="groupFormValidate.directoryName"/>
-        </FormItem>
-      </Form>
+            :options="treeData"
+            :props="{ value: 'value', label: 'label', children: 'children', checkStrictly: true }"
+            style="width: 100%"
+            @change="treeDataChange"
+          />
+        </el-form-item>
+        <el-form-item label="分组名称" prop="directoryName">
+          <el-input v-model="groupFormValidate.directoryName" />
+        </el-form-item>
+      </el-form>
       <div class="modal-footer">
-        <Button @click="enableGroup = false">取消</Button>
-        <Button type="primary" @click="submitAddGroup">确定</Button>
+        <el-button @click="enableGroup = false">取消</el-button>
+        <el-button type="primary" :loading="groupLoading" @click="submitAddGroup">确定</el-button>
       </div>
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { Delete, Download, View } from "@element-plus/icons-vue";
 import {
   addFileDirectory,
   deleteFile,
@@ -442,6 +474,7 @@ const config = require("@/config/index");
 let dp;
 export default {
   name: "oss-manage",
+  components: { Delete, Download, View },
   props: {
     isComponent: {
       default: false,
@@ -954,19 +987,37 @@ export default {
   },
 
   methods: {
-    beforeUpload() {
+    beforeUpload(file) {
       if (!this.canUploadImages) {
         this.$Message.warning("仅管理员模块支持上传图片");
         return false;
       }
+      const maxSize = 20480 * 1024;
+      if (file && file.size > maxSize) {
+        this.handleMaxSize(file);
+        return false;
+      }
       return true;
     },
+    handleTreeNodeClick(data) {
+      if (data) {
+        this.handleCateChange([data]);
+      }
+    },
+    onTreeDropdownCommand(cmd, data) {
+      this.selectedGroupData = data;
+      if (cmd === "edit") {
+        this.handleContextMenuEdit(null, null, data);
+      } else if (cmd === "delete") {
+        this.handleContextMenuDelete();
+      }
+    },
     onMouseOver(item, index) {
-      this.$set(this.data[index], 'isShowPreview', true);
+      this.data[index].isShowPreview = true;
       this.$forceUpdate();
     },
     onMouseOut(item, index) {
-      this.$set(this.data[index], 'isShowPreview', false);
+      this.data[index].isShowPreview = false;
     },
     handleRoleTabChange(name) {
       this.activeRoleTab = name;
@@ -977,7 +1028,7 @@ export default {
       this.defaultValue = [];
       this.groupFormValidate.id = [];
       this.groupFormValidate.level = 0;
-      this.$set(this, "selectedOss", []);
+      this.selectedOss = [];
       this.updateTreeDataByRole();
       this.getDataList();
     },
@@ -1024,7 +1075,7 @@ export default {
     },
     // 页码改变时回调
     pageChange(value) {
-      this.$set(this, 'selectedOss', []);
+      this.selectedOss = [];
       this.searchForm.pageNumber = value;
       this.getDataList();
     },
@@ -1109,15 +1160,26 @@ export default {
         },
       });
     },
-    treeDataChange(value, selectedData) {
+    treeDataChange(value) {
       if (value && value.length) {
-        if (value[value.length - 1] == '0') {
+        this.groupFormValidate.id = value;
+        if (value[value.length - 1] == "0") {
           this.groupFormValidate.level = 0;
         } else {
-          this.groupFormValidate.level = Number(selectedData[selectedData.length - 1].level) + 1;
+          const node = this.findTreeNodeByValue(this.treeData, value[value.length - 1]);
+          this.groupFormValidate.level = node ? Number(node.level) + 1 : 0;
         }
       }
     },
+    findTreeNodeByValue(nodes, value) {
+      if (!nodes || !nodes.length) return null;
+      for (const node of nodes) {
+        if (String(node.value) === String(value)) return node;
+        const found = this.findTreeNodeByValue(node.children, value);
+        if (found) return found;
+      }
+      return null;
+    },
     // 保存/修改分组
     async submitAddGroup() {
       this.$refs["formValidate"].validate(async (valid) => {
@@ -1220,7 +1282,7 @@ export default {
         }
         this.searchForm.userEnums = type || this.activeRoleTab;
         this.getDataList();
-        this.$set(this, 'selectedOss', []);
+        this.selectedOss = [];
       }
     },
     /**
@@ -1287,9 +1349,12 @@ export default {
     },
     // 起止时间从新赋值
     selectDateRange(v) {
-      if (v) {
+      if (v && v.length === 2) {
         this.searchForm.startDate = v[0];
         this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
       }
     },
     // 改变查看方式
@@ -1341,11 +1406,8 @@ export default {
       this.handleSearch();
     },
     // 上传文件超过大小限制
-    handleMaxSize(file) {
-      this.$Notice.warning({
-        title: "文件大小过大",
-        desc: "所选文件大小过大, 不得超过 1M.",
-      });
+    handleMaxSize() {
+      this.$Message.warning("所选文件大小过大，不得超过 20MB");
     },
     // 上传成功回调
     handleSuccess(res, file) {
@@ -1397,7 +1459,7 @@ export default {
           deleteFile(ids).then((res) => {
             this.$Modal.remove();
             if (res.success) {
-              this.$set(this, 'selectedOss', []);
+              this.selectedOss = [];
               // this.clearSelectAll();
               this.init();
               this.$Message.success("批量删除文件成功");
diff --git a/manager/src/views/sys/role-manage/roleManage.vue b/manager/src/views/sys/role-manage/roleManage.vue
index 47e049b0..03a2b1ce 100644
--- a/manager/src/views/sys/role-manage/roleManage.vue
+++ b/manager/src/views/sys/role-manage/roleManage.vue
@@ -1,76 +1,141 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation">
-        <Button @click="addRole" type="primary">添加角色</Button>
-        <Button @click="delAll">批量删除</Button>
-      </Row>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="pageNumber" :total="total" :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]" size="small" show-total
-          show-elevator show-sizer></Page>
-      </Row>
-    </Card>
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="addRole">添加角色</el-button>
+        <el-button @click="delAll">批量删除</el-button>
+      </div>
 
-    <!-- 编辑 -->
-    <Modal :title="modalTitle" v-model="roleModalVisible" :mask-closable="false" :width="500">
-      <Form ref="roleForm" :model="roleForm" :label-width="80" :rules="roleFormValidate">
-        <FormItem label="角色名称" prop="name">
-          <Input v-model="roleForm.name" />
-        </FormItem>
-        <FormItem label="备注" prop="description">
-          <Input v-model="roleForm.description" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="roleModalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitRole">提交
-        </Button>
-      </div>
-    </Modal>
-    <!-- 菜单权限 -->
-    <Modal :title="modalTitle" v-model="permModalVisible" :mask-closable="false" :width="500" :styles="{ top: '30px' }" class="permModal">
-      <div style="position: relative">
-        <Tree ref="tree" :data="permData" show-checkbox :render="renderContent">
-        </Tree>
-        <Spin size="large" fix v-if="treeLoading"></Spin>
-      </div>
-      <div slot="footer">
-        <Button type="text" @click="permModalVisible = false">取消</Button>
-        <Select v-model="openLevel" @on-change="changeOpen" style="width: 110px; text-align: left; margin-right: 10px">
-          <Option value="0">展开所有</Option>
-          <Option value="1">收合所有</Option>
-          <Option value="2">仅展开一级</Option>
-          <Option value="3">仅展开两级</Option>
-        </Select>
-        <Button type="primary" :loading="submitPermLoading" @click="submitPermEdit()">编辑
-        </Button>
-      </div>
-    </Modal>
-   
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%"
+        row-key="id"
+        @selection-change="changeSelect"
+        @sort-change="changeSort"
+      >
+        <el-table-column type="selection" width="60" align="center" />
+        <el-table-column prop="name" label="角色名称" min-width="150" />
+        <el-table-column prop="description" label="备注" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="创建时间" width="170" sortable="custom" />
+        <el-table-column prop="updateTime" label="更新时间" width="170" sortable="custom" />
+        <el-table-column prop="createBy" label="最后操作人" width="150" />
+        <el-table-column label="操作" width="230" align="center" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row" class="ops">
+              <a class="link-text" @click="editPerm(row)">菜单权限</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="edit(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <!-- 保存权限弹出选择权限 -->
-    <Modal width="800" v-model="selectIsSuperModel" title="选择菜单权限" :loading="superModelLoading" @on-ok="saveRole">
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="pageNumber"
+          v-model:page-size="pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog
+      v-model="roleModalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form ref="roleForm" :model="roleForm" label-width="80px" :rules="roleFormValidate">
+        <el-form-item label="角色名称" prop="name">
+          <el-input v-model="roleForm.name" />
+        </el-form-item>
+        <el-form-item label="备注" prop="description">
+          <el-input v-model="roleForm.description" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="roleModalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitRole">提交</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="permModalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      class="permModal"
+      top="30px"
+    >
+      <div v-loading="treeLoading" style="position: relative; max-height: 560px; overflow: auto">
+        <el-tree
+          ref="permTree"
+          :key="permTreeKey"
+          :data="permData"
+          :props="{ label: 'title', children: 'children', disabled: 'disabled' }"
+          node-key="id"
+          show-checkbox
+          :default-expand-all="openLevel === '0'"
+          :default-expanded-keys="permExpandedKeys"
+          :default-checked-keys="permCheckedKeys"
+        >
+          <template #default="{ data }">
+            <span>{{ data.title }}</span>
+            <el-tag
+              v-if="data.isSuper == 1 || data.isSuper == 0"
+              :type="data.isSuper == 1 ? 'danger' : 'info'"
+              size="small"
+              style="margin-left: 10px"
+            >
+              {{ data.isSuper == 1 ? "操作权限" : "查看权限" }}
+            </el-tag>
+          </template>
+        </el-tree>
+      </div>
+      <template #footer>
+        <el-button @click="permModalVisible = false">取消</el-button>
+        <el-select v-model="openLevel" style="width: 110px; margin-right: 10px" @change="changeOpen">
+          <el-option value="0" label="展开所有" />
+          <el-option value="1" label="收合所有" />
+          <el-option value="2" label="仅展开一级" />
+          <el-option value="3" label="仅展开两级" />
+        </el-select>
+        <el-button type="primary" :loading="submitPermLoading" @click="submitPermEdit()">编辑</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="selectIsSuperModel" title="选择菜单权限" width="800px">
       <div class="btns">
-        <Button type="primary" @click="setRole()" class="btn-item">一键选中·数据权限</Button>
-        <Button class="btn-item" @click="setRole('onlyView')">一键选中·查看权限</Button>
+        <el-button type="primary" class="btn-item" @click="setRole()">一键选中·数据权限</el-button>
+        <el-button class="btn-item" @click="setRole('onlyView')">一键选中·查看权限</el-button>
       </div>
       <div class="role-list">
         <div class="role-item" v-for="(item, index) in saveRoleWay" :key="index">
           <div class="title">{{ item.title }}</div>
           <div class="content">
-            <RadioGroup type="button" button-style="solid" v-model="item.isSuper">
-              <Radio :label="1">
-                <span>操作数据权限</span>
-              </Radio>
-              <Radio :label="0">
-                <span>查看权限</span>
-              </Radio>
-            </RadioGroup>
+            <el-radio-group v-model="item.isSuper">
+              <el-radio-button :value="1">操作数据权限</el-radio-button>
+              <el-radio-button :value="0">查看权限</el-radio-button>
+            </el-radio-group>
           </div>
         </div>
       </div>
-    </Modal>
+      <template #footer>
+        <el-button @click="selectIsSuperModel = false">取消</el-button>
+        <el-button type="primary" :loading="superModelLoading" @click="saveRole">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -86,258 +151,74 @@ import {
   saveRoleMenu,
 } from "@/api/index";
 import util from "@/libs/util.js";
+
 export default {
   name: "role-manage",
   data() {
     return {
-      superModelLoading: false, //保存权限弹出选择权限保存
-      selectIsSuperModel: false, //保存权限弹出选择权限
-      rolePermsWay: [], //查询角色权限集合
-      openLevel: "0", // 展开的级别
-      loading: true, // 加载状态
-      treeLoading: true, // 树加载
-      depTreeLoading: true, // 部门树加载
-      submitPermLoading: false, // 权限提交加载
-      submitDepLoading: false, // 部门提交加载
-      sortColumn: "", // 排序
-      sortType: "desc", // 排序类型
-      modalType: 0, // 0 添加 1 编辑
-      roleModalVisible: false, // 角色modal
-      permModalVisible: false, // 菜单权限modal
-      depModalVisible: false, // 部门modal
-      modalTitle: "", // modal标题
+      superModelLoading: false,
+      selectIsSuperModel: false,
+      rolePermsWay: [],
+      openLevel: "0",
+      loading: true,
+      treeLoading: true,
+      depTreeLoading: true,
+      submitPermLoading: false,
+      submitDepLoading: false,
+      sortColumn: "",
+      sortType: "desc",
+      modalType: 0,
+      roleModalVisible: false,
+      permModalVisible: false,
+      depModalVisible: false,
+      modalTitle: "",
       roleForm: {
-        // 角色表单
         name: "",
         description: "",
       },
       roleFormValidate: {
-        // 验证规则
-        name: [
-          { required: true, message: "角色名称不能为空", trigger: "blur" },
-        ],
+        name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
       },
-      submitLoading: false, // 提交loading
-      selectList: [], // 已选列表
-      selectCount: 0, // 已选总数
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "角色名称",
-          key: "name",
-          minWidth: 150,
-        },
-        {
-          title: "备注",
-          key: "description",
-          minWidth: 150,
-          tooltip: true,
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          width: 170,
-          sortable: true,
-          sortType: "desc",
-        },
-        {
-          title: "更新时间",
-          key: "updateTime",
-          width: 170,
-          sortable: true,
-        },
-        {
-          title: "最后操作人",
-          key: "createBy",
-          width: 150,
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 230,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px",
-                  },
-                  on: {
-                    click: () => {
-                      this.editPerm(params.row);
-                    },
-                  },
-                },
-                "菜单权限"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px",
-                  },
-                  on: {
-                    click: () => {
-                      this.edit(params.row);
-                    },
-                  },
-                },
-                "编辑"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 角色数据
-      pageNumber: 1, // 页数
-      pageSize: 20, // 每页数量
-      total: 0, // 总数
-      permData: [], // 菜单权限数据
-      editRolePermId: "", // 编辑权限id
-      selectAllFlag: false, // 全选标识
-      depData: [], // 部门数据
-      dataType: 0, // 数据类型
-      editDepartments: [], // 编辑部门
-
-      saveRoleWay: [], //用户保存用户点击的菜单
+      submitLoading: false,
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      pageNumber: 1,
+      pageSize: 20,
+      total: 0,
+      permData: [],
+      editRolePermId: "",
+      selectAllFlag: false,
+      depData: [],
+      dataType: 0,
+      editDepartments: [],
+      saveRoleWay: [],
+      permTreeKey: 0,
+      permCheckedKeys: [],
+      permExpandedKeys: [],
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getRoleList();
-      // 获取所有菜单权限树
       this.getPermList();
     },
-    // 渲染部门前icon
-    renderContent(h, { root, node, data }) {
-      let icon = "";
-      if (data.level == 0) {
-        icon = "ios-navigate";
-      } else if (data.level == 1) {
-        icon = "md-list-box";
-      } else if (data.level == 2) {
-        icon = "md-list";
-      } else if (data.level == 3) {
-        icon = "md-radio-button-on";
-      } else {
-        icon = "md-radio-button-off";
-      }
-      return h(
-        "span",
-        {
-          style: {
-            display: "inline-block",
-            cursor: "pointer",
-          },
-        },
-        [
-          h("span", [
-            h("Icon", {
-              props: {
-                type: icon,
-                size: "16",
-              },
-              style: {
-                "margin-right": "8px",
-                "margin-bottom": "3px",
-              },
-            }),
-            h("span", data.title),
-            h(
-              "Tag",
-              {
-                props: {
-                  color:
-                    data.isSuper == 1
-                      ? "red"
-                      : data.isSuper == 0
-                      ? "default"
-                      : "default",
-                },
-                style: {
-                  "margin-left": "10px",
-                  display:
-                    data.isSuper == 1 || data.isSuper == 0
-                      ? "inline-block"
-                      : "none",
-                },
-              },
-              data.isSuper == 1
-                ? "操作权限"
-                : data.isSuper == 0
-                ? "查看权限"
-                : ""
-            ),
-          ]),
-        ]
-      );
-    },
-    // 分页 修改页码
-    changePage(v) {
-      this.pageNumber = v;
+    changePage() {
       this.getRoleList();
       this.clearSelectAll();
     },
-    // 分页 修改页数
-    changePageSize(v) {
+    changePageSize() {
       this.pageNumber = 1;
-      this.pageSize = v;
       this.getRoleList();
     },
-    // 变更排序方式
     changeSort(e) {
-      this.sortColumn = e.key;
-      this.sortType = e.order;
-      if (e.order == "normal") {
+      this.sortColumn = e.prop;
+      this.sortType = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+      if (!e.order) {
         this.sortType = "";
       }
       this.getRoleList();
     },
-
-    /**
-     * 设置权限
-     */
     setRole(val) {
       let enable;
       val == "onlyView" ? (enable = 0) : (enable = 1);
@@ -345,17 +226,13 @@ export default {
         item.isSuper = enable;
       });
     },
-
-    /**
-     * 查询所有角色
-     */
     getRoleList() {
       this.loading = true;
       let params = {
         pageNumber: this.pageNumber,
         pageSize: this.pageSize,
         sort: this.sortColumn,
-        order: this.sort,
+        order: this.sortType,
       };
       getRoleList(params).then((res) => {
         this.loading = false;
@@ -365,22 +242,16 @@ export default {
         }
       });
     },
-
-    /**
-     * 查询菜单
-     */
     getPermList() {
       this.treeLoading = true;
       getAllPermissionList().then((res) => {
         if (res.success) {
           this.deleteDisableNode(res.result);
           this.permData = res.result;
-          this.treeLoading = false;
         }
         this.treeLoading = false;
       });
     },
-    // 递归标记禁用节点
     deleteDisableNode(permData) {
       let that = this;
       permData.forEach(function (e) {
@@ -393,14 +264,11 @@ export default {
         }
       });
     },
-    // 提交
     submitRole() {
       this.$refs.roleForm.validate((valid) => {
         if (valid) {
           if (this.modalType == 0) {
-            // 添加
             this.submitLoading = true;
-
             addRole(this.roleForm).then((res) => {
               this.submitLoading = false;
               if (res.success) {
@@ -412,7 +280,6 @@ export default {
           } else {
             this.submitLoading = true;
             this.roleForm.roleId = this.roleForm.id;
-
             editRole(this.roleForm).then((res) => {
               this.submitLoading = false;
               if (res.success) {
@@ -425,23 +292,17 @@ export default {
         }
       });
     },
-
-    /**
-     * 点击添加按钮
-     */
     addRole() {
       this.modalType = 0;
       this.modalTitle = "添加角色";
-      this.$refs.roleForm.resetFields();
+      this.$refs.roleForm?.resetFields();
       delete this.roleForm.id;
       this.roleModalVisible = true;
     },
-    // 编辑
     edit(v) {
       this.modalType = 1;
       this.modalTitle = "编辑角色";
-      this.$refs.roleForm.resetFields();
-      // 转换null为""
+      this.$refs.roleForm?.resetFields();
       for (let attr in v) {
         if (v[attr] == null) {
           v[attr] = "";
@@ -452,7 +313,6 @@ export default {
       this.roleForm = roleInfo;
       this.roleModalVisible = true;
     },
-    // 删除
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
@@ -469,16 +329,13 @@ export default {
         },
       });
     },
-    // 清除选中
     clearSelectAll() {
-      this.$refs.table.selectAll(false);
+      this.$refs.table?.clearSelection();
     },
-    // 选中回调
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
     },
-    // 批量删除
     delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未选择要删除的数据");
@@ -505,13 +362,7 @@ export default {
         },
       });
     },
-
-    // 菜单权限
     async editPerm(v) {
-
-      /**
-       * 点击菜单权限每次将赋值的isSuper数据给清空掉
-       */
       this.permData.map((item) => {
         item.children.length != 0
           ? item.children.map((child) => {
@@ -532,98 +383,79 @@ export default {
       }
       this.editRolePermId = v.id;
       this.modalTitle = "分配 " + v.name + " 的菜单权限";
-      // 匹配勾选
       let rolePerms;
-      // 当前角色的菜单权限
       let res = await selectRoleMenu(v.id);
       if (res.result) {
         rolePerms = res.result;
         this.rolePermsWay = res.result;
       }
-      // 递归判断子节点是否可以选中
-      this.checkPermTree(this.permData, rolePerms);
+      this.permCheckedKeys = this.collectCheckedKeys(this.permData, rolePerms);
+      this.permExpandedKeys = this.computeExpandedKeys(this.openLevel);
+      this.permTreeKey += 1;
       this.permModalVisible = true;
     },
-    // 递归判断子节点
-    checkPermTree(permData, rolePerms) {
-      let that = this;
-
-      permData.forEach((p) => {
-        if (that.hasPerm(p, rolePerms) && p.status != -1) {
-          if (p.children && p.children.length === 0) {
-            this.$set(p, "checked", true);
+    collectCheckedKeys(permData, rolePerms) {
+      const keys = [];
+      const walk = (nodes) => {
+        nodes.forEach((p) => {
+          if (this.hasPerm(p, rolePerms) && p.status != -1) {
+            if (p.children && p.children.length === 0) {
+              keys.push(p.id);
+            }
           }
-        } else {
-          this.$set(p, "checked", false);
-        }
-        if (p.children && p.children.length > 0) {
-          that.checkPermTree(p.children, rolePerms);
-        }
-      });
+          if (p.children && p.children.length > 0) {
+            walk(p.children);
+          }
+        });
+      };
+      walk(permData);
+      return keys;
     },
-    // 判断角色拥有的权限节点勾选
     hasPerm(p, rolePerms) {
       if (!rolePerms) return false;
       let flag = false;
       for (let i = 0; i < rolePerms.length; i++) {
         if (p.id == rolePerms[i].menuId) {
-          this.$set(p, "isSuper", rolePerms[i].isSuper);
+          p.isSuper = rolePerms[i].isSuper;
           flag = true;
           break;
         }
       }
-      if (flag) {
-        return true;
-      }
-      return false;
+      return flag;
     },
-    // 递归全选节点
-    selectedTreeAll(permData, select) {
-      let that = this;
-      permData.forEach(function (e) {
-        e.checked = select;
-        if (e.children && e.children.length > 0) {
-          that.selectedTreeAll(e.children, select);
-        }
-      });
-    },
-    /**分配菜单权限 */
     submitPermEdit() {
       this.saveRoleWay = [];
-      this.selectIsSuperModel = true; //打开选择权限
-      let selectedNodes = this.$refs.tree.getCheckedAndIndeterminateNodes();
+      this.selectIsSuperModel = true;
+      const tree = this.$refs.permTree;
+      const selectedNodes = [
+        ...tree.getCheckedNodes(false, true),
+      ];
       let way = [];
       selectedNodes.forEach((e) => {
-       console.log(e)
         let perm = {
           title: e.title,
-          isSuper: e.isSuper ? e.isSuper = 1 : e.isSuper = 0 || 0,
+          isSuper: e.isSuper ? (e.isSuper = 1) : (e.isSuper = 0) || 0,
           menuId: e.id,
           roleId: this.editRolePermId,
         };
         way.push(perm);
-        this.$set(this,'saveRoleWay',way)
-     
+        this.saveRoleWay = way;
       });
-      console.log(this.saveRoleWay)
     },
-
-    /**保存权限 */
     saveRole() {
       this.superModelLoading = true;
       saveRoleMenu(this.editRolePermId, this.saveRoleWay).then((res) => {
         this.superModelLoading = false;
         if (res.success) {
           this.$Message.success("操作成功");
-          // 标记重新获取菜单数据
           this.$store.commit("setAdded", false);
           util.initRouter(this);
           this.getRoleList();
           this.permModalVisible = false;
+          this.selectIsSuperModel = false;
         }
       });
     },
-    // 加载数据
     loadData(item, callback) {
       loadDepartment(item.id, { openDataFilter: false }).then((res) => {
         if (res.success) {
@@ -642,80 +474,30 @@ export default {
         }
       });
     },
-    // 判断展开子节点
-    expandCheckDep(v) {
-      this.checkDepTree(v.children, this.editDepartments);
-    },
-    // 判断子节点
-    checkDepTree(depData, roleDepIds) {
-      let that = this;
-      depData.forEach(function (p) {
-        if (that.hasDepPerm(p, roleDepIds)) {
-          p.checked = true;
-        } else {
-          p.checked = false;
-        }
-      });
-    },
-    // 树结构展开层级
-    changeOpen(v) {
-      if (v == "0") {
-        this.permData.forEach((e) => {
-          e.expand = true;
-          if (e.children && e.children.length > 0) {
-            e.children.forEach((c) => {
-              c.expand = true;
-              if (c.children && c.children.length > 0) {
-                c.children.forEach(function (b) {
-                  b.expand = true;
-                });
-              }
-            });
-          }
-        });
-      } else if (v == "1") {
-        this.permData.forEach((e) => {
-          e.expand = false;
-          if (e.children && e.children.length > 0) {
-            e.children.forEach((c) => {
-              c.expand = false;
-              if (c.children && c.children.length > 0) {
-                c.children.forEach(function (b) {
-                  b.expand = false;
-                });
-              }
-            });
-          }
-        });
-      } else if (v == "2") {
-        this.permData.forEach((e) => {
-          e.expand = true;
-          if (e.children && e.children.length > 0) {
-            e.children.forEach((c) => {
-              c.expand = false;
-              if (c.children && c.children.length > 0) {
-                c.children.forEach(function (b) {
-                  b.expand = false;
-                });
-              }
-            });
-          }
-        });
-      } else if (v == "3") {
-        this.permData.forEach((e) => {
-          e.expand = true;
-          if (e.children && e.children.length > 0) {
-            e.children.forEach((c) => {
-              c.expand = true;
-              if (c.children && c.children.length > 0) {
-                c.children.forEach(function (b) {
-                  b.expand = false;
-                });
-              }
-            });
+    computeExpandedKeys(level) {
+      const keys = [];
+      const walk = (nodes, depth) => {
+        nodes.forEach((n) => {
+          if (level === "0") {
+            keys.push(n.id);
+          } else if (level === "2" && depth < 1) {
+            keys.push(n.id);
+          } else if (level === "3" && depth < 2) {
+            keys.push(n.id);
+          }
+          if (n.children && n.children.length) {
+            walk(n.children, depth + 1);
           }
         });
+      };
+      if (level !== "1") {
+        walk(this.permData, 0);
       }
+      return keys;
+    },
+    changeOpen(v) {
+      this.permExpandedKeys = this.computeExpandedKeys(v);
+      this.permTreeKey += 1;
     },
   },
   mounted() {
@@ -751,18 +533,15 @@ export default {
 .btn-item {
   margin-right: 20px;
 }
-.permModal {
-  .ivu-modal-body {
-    max-height: 560px;
-    overflow: auto;
-  }
+.ops a {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
 }
-
-.depModal {
-  .ivu-modal-body {
-    max-height: 500px;
-    overflow: auto;
-  }
+.ops span {
+  display: inline-block;
+  margin: 0 8px;
+  color: #dcdee2;
 }
 .tips {
   font-size: 12px;
diff --git a/manager/src/views/sys/setting-manage/authLogin/CONNECT_SETTING.vue b/manager/src/views/sys/setting-manage/authLogin/CONNECT_SETTING.vue
index eb143e9a..1faec0dd 100644
--- a/manager/src/views/sys/setting-manage/authLogin/CONNECT_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/authLogin/CONNECT_SETTING.vue
@@ -1,37 +1,35 @@
 <template>
-
   <div class="layout">
     <div class="row">
       <div class="col">
-        <Card :padding="0">
-            <Divider orientation="left">登录设置</Divider>
-            <div class="form-list">
-              <Form
-                ref="formValidate"
-                label-width="120"
-                label-position="right"
-                :model="formValidate"
-                :rules="ruleValidate"
-              >
-                <FormItem  label="买家PC端域名" prop="pc">
-                  <Input  v-model="formValidate.pc" class="w200" />
-                </FormItem>
-                <FormItem label="买家WAP端域名" prop="wap">
-                  <Input  v-model="formValidate.wap" class="w200" />
-                </FormItem>
-                <FormItem label="登录回调域名" prop="callbackUrl">
-                  <Input maxlength="300" v-model="formValidate.callbackUrl"  class="w200" />
-                </FormItem>
-                <FormItem label="操作" >
-                  <Button @click="setupSetting">保存设置</Button>
-                </FormItem>
-              </Form>
-            </div>
-        </Card>
+        <el-card shadow="never" :body-style="{ padding: '0 16px' }">
+          <el-divider content-position="left">登录设置</el-divider>
+          <div class="form-list">
+            <el-form
+              ref="formValidate"
+              label-width="120px"
+              label-position="right"
+              :model="formValidate"
+              :rules="ruleValidate"
+            >
+              <el-form-item label="买家PC端域名" prop="pc">
+                <el-input v-model="formValidate.pc" class="w200" />
+              </el-form-item>
+              <el-form-item label="买家WAP端域名" prop="wap">
+                <el-input v-model="formValidate.wap" class="w200" />
+              </el-form-item>
+              <el-form-item label="登录回调域名" prop="callbackUrl">
+                <el-input maxlength="300" v-model="formValidate.callbackUrl" class="w200" />
+              </el-form-item>
+              <el-form-item label="操作">
+                <el-button @click="setupSetting">保存设置</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
       </div>
     </div>
   </div>
-
 </template>
 <script>
 import { setSetting } from "@/api/index";
@@ -40,12 +38,12 @@ import { handleSubmit } from "../setting/validate";
 export default {
   data() {
     return {
-      ruleValidate: {}, // 验证规则
+      ruleValidate: {},
       formValidate: {
-        pc:"",
-        wap:"",
-        callbackUrl:""
-      } // 表单数据
+        pc: "",
+        wap: "",
+        callbackUrl: "",
+      },
     };
   },
   props: ["res", "type"],
@@ -54,12 +52,11 @@ export default {
   },
   methods: {
     submit(name) {
-      let that = this;
+      const that = this;
       if (handleSubmit(that, name)) {
         this.setupSetting();
       }
     },
-    // 保存设置
     setupSetting() {
       setSetting(this.type, this.formValidate).then((res) => {
         if (res.success) {
@@ -69,11 +66,9 @@ export default {
         }
       });
     },
-    // 实例化数据
     init() {
       this.res = JSON.parse(this.res);
-
-      this.$set(this, "formValidate", { ...this.res });
+      this.formValidate = { ...this.res };
       Object.keys(this.formValidate).forEach((item) => {
         if (item.indexOf("pId") < 0) {
           this.ruleValidate[item] = [
@@ -97,10 +92,8 @@ export default {
   display: flex;
 }
 
-
-.form-list{
-  padding:  16px;
-
+.form-list {
+  padding: 16px;
 }
 .pay-title {
   text-align: center;
@@ -123,14 +116,8 @@ export default {
   margin-right: 10px;
   display: flex;
   margin-bottom: 20px;
-  ::v-deep .ivu-card-body {
-    padding: 0 16px !important;
-  }
 }
 
-.label-item {
-  display: flex;
-}
 .label-item {
   display: flex;
   align-items: center;
@@ -144,12 +131,8 @@ export default {
   align-items: center;
   flex-direction: column;
 }
-.ivu-form-item {
+.el-form-item {
   display: flex;
-
   align-items: center;
 }
-.ivu-row {
-  width: 100%;
-}
 </style>
diff --git a/manager/src/views/sys/setting-manage/authLogin/QQ_CONNECT.vue b/manager/src/views/sys/setting-manage/authLogin/QQ_CONNECT.vue
index 234584c8..66099272 100644
--- a/manager/src/views/sys/setting-manage/authLogin/QQ_CONNECT.vue
+++ b/manager/src/views/sys/setting-manage/authLogin/QQ_CONNECT.vue
@@ -1,52 +1,45 @@
 <template>
-
   <div class="layout">
-
-    <div class="row" v-if="client == item.client" v-for="(item,index) in  formValidate" :key="index">
+    <div class="row" v-for="(item, index) in formValidate" :key="index">
       <div class="col">
-        <Card :padding="0">
-          <!-- app -->
-          <div class="icon-item" v-if="item.clientType== 'APP'">
-            <img class="icon" src="../../../../assets/setting/app.svg" alt="" srcset="">
+        <el-card shadow="never" :body-style="{ padding: '0 16px' }">
+          <div class="icon-item" v-if="item.clientType == 'APP'">
+            <img class="icon" src="../../../../assets/setting/app.svg" alt="" />
           </div>
-          <div class="icon-item" v-if="item.clientType== 'PC'">
-            <!-- pc -->
-            <img class="icon" src="../../../../assets/setting/pc.svg" alt="" srcset="">
+          <div class="icon-item" v-if="item.clientType == 'PC'">
+            <img class="icon" src="../../../../assets/setting/pc.svg" alt="" />
           </div>
-          <div class="icon-item" v-if="item.clientType== 'WECHAT_MP'">
-            <!-- 小程序 -->
-            <img class="icon" src="../../../../assets/setting/wechat_mp.svg" alt="" srcset="">
+          <div class="icon-item" v-if="item.clientType == 'WECHAT_MP'">
+            <img class="icon" src="../../../../assets/setting/wechat_mp.svg" alt="" />
           </div>
-          <div class="icon-item" v-if=" item.clientType== 'H5'">
-            <!-- h5 -->
-            <img class="icon" src="../../../../assets/setting/h5.svg" alt="" srcset="">
+          <div class="icon-item" v-if="item.clientType == 'H5'">
+            <img class="icon" src="../../../../assets/setting/h5.svg" alt="" />
           </div>
-          <div class='pay-title'> {{way[item.clientType]}}</div>
+          <div class="pay-title">{{ way[item.clientType] }}</div>
           <div>
-
-            <Divider orientation="left">登录设置</Divider>
+            <el-divider content-position="left">登录设置</el-divider>
             <div class="pay-list">
-              <Form style="width:100%;" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
-                <FormItem label="appId" prop="appId">
-                  <Input @on-enter="setupSetting" class="label-appkey" v-model="item.appId" />
-                </FormItem>
-                <FormItem label="appKey" prop="appKey">
-                  <Input @on-enter="setupSetting" v-model="item.appKey" />
-                </FormItem>
-
-              </Form>
-              <Button @click="setupSetting">保存设置</Button>
+              <el-form
+                style="width: 100%"
+                ref="formValidate"
+                :model="formValidate"
+                :rules="ruleValidate"
+                label-width="80px"
+              >
+                <el-form-item label="appId" prop="appId">
+                  <el-input @keyup.enter="setupSetting" class="label-appkey" v-model="item.appId" />
+                </el-form-item>
+                <el-form-item label="appKey" prop="appKey">
+                  <el-input @keyup.enter="setupSetting" v-model="item.appKey" />
+                </el-form-item>
+              </el-form>
+              <el-button @click="setupSetting">保存设置</el-button>
             </div>
-
           </div>
-
-        </Card>
+        </el-card>
       </div>
-
     </div>
-
   </div>
-
 </template>
 <script>
 import { setSetting } from "@/api/index";
@@ -54,14 +47,14 @@ import { handleSubmit } from "../setting/validate";
 export default {
   data() {
     return {
-      ruleValidate: {}, // 验证规则
-      way: { // 类型
+      ruleValidate: {},
+      way: {
         APP: "移动应用端",
         H5: "移动端",
         WECHAT_MP: "小程序端",
         PC: "PC端",
       },
-      formValidate: {} // 表单数据
+      formValidate: {},
     };
   },
   props: ["res", "type"],
@@ -70,30 +63,24 @@ export default {
   },
   methods: {
     submit(name) {
-      let that = this;
+      const that = this;
       if (handleSubmit(that, name)) {
         this.setupSetting();
       }
     },
-    // 保存
     setupSetting() {
-      this.$Spin.show();
-      setTimeout(() => {
-        this.$Spin.hide();
-        setSetting(this.type, {
-          qqConnectSettingItemList: this.formValidate,
-        }).then((res) => {
-          if (res.success) {
-            this.$Message.success("保存成功!");
-            this.$Modal.remove();
-          } else {
-            this.$Message.error("保存失败!");
-            this.$Modal.remove();
-          }
-        });
-      }, 3000);
+      setSetting(this.type, {
+        qqConnectSettingItemList: this.formValidate,
+      }).then((res) => {
+        if (res.success) {
+          this.$Message.success("保存成功!");
+          this.$Modal.remove();
+        } else {
+          this.$Message.error("保存失败!");
+          this.$Modal.remove();
+        }
+      });
     },
-    // 实例化数据
     async init() {
       this.formValidate = JSON.parse(this.res).qqConnectSettingItemList;
       Object.keys(this.formValidate).forEach((item) => {
@@ -133,14 +120,8 @@ export default {
   margin-right: 20px;
   display: flex;
   margin-bottom: 20px;
-  ::v-deep .ivu-card-body {
-    padding: 0 16px !important;
-  }
 }
 
-.label-item {
-  display: flex;
-}
 .label-item {
   display: flex;
   align-items: center;
@@ -151,7 +132,7 @@ export default {
   padding-bottom: 10px;
   flex-direction: column;
   align-items: center;
-  ::v-deep .ivu-btn {
+  :deep(.el-button){
     width: 100px;
   }
 }
@@ -163,14 +144,10 @@ export default {
   align-items: center;
   flex-direction: column;
 }
-.ivu-form-item {
+.el-form-item {
   display: flex;
-
   align-items: center;
 }
-.ivu-row {
-  width: 100%;
-}
 .icon {
   width: 100px;
   height: 100px;
diff --git a/manager/src/views/sys/setting-manage/authLogin/WECHAT_CONNECT.vue b/manager/src/views/sys/setting-manage/authLogin/WECHAT_CONNECT.vue
index 329c85ee..2edf1a94 100644
--- a/manager/src/views/sys/setting-manage/authLogin/WECHAT_CONNECT.vue
+++ b/manager/src/views/sys/setting-manage/authLogin/WECHAT_CONNECT.vue
@@ -1,50 +1,45 @@
 <template>
-
   <div class="layout">
-
-    <div class="row" v-if="client ==item.client" v-for="(item,index) in  formValidate" :key="index">
+    <div class="row" v-for="(item, index) in formValidate" :key="index">
       <div class="col">
-        <Card :padding="0">
-          <!-- app -->
-          <div class="icon-item" v-if="item.clientType== 'APP'">
-            <img class="icon" src="../../../../assets/setting/app.svg" alt="" srcset="">
+        <el-card shadow="never" :body-style="{ padding: '0 16px' }">
+          <div class="icon-item" v-if="item.clientType == 'APP'">
+            <img class="icon" src="../../../../assets/setting/app.svg" alt="" />
           </div>
-          <div class="icon-item" v-if="item.clientType== 'PC'">
-            <!-- pc -->
-            <img class="icon" src="../../../../assets/setting/pc.svg" alt="" srcset="">
+          <div class="icon-item" v-if="item.clientType == 'PC'">
+            <img class="icon" src="../../../../assets/setting/pc.svg" alt="" />
           </div>
-          <div class="icon-item" v-if="item.clientType== 'WECHAT_MP'">
-            <!-- 小程序 -->
-            <img class="icon" src="../../../../assets/setting/wechat_mp.svg" alt="" srcset="">
+          <div class="icon-item" v-if="item.clientType == 'WECHAT_MP'">
+            <img class="icon" src="../../../../assets/setting/wechat_mp.svg" alt="" />
           </div>
-          <div class="icon-item" v-if=" item.clientType== 'H5'">
-            <!-- h5 -->
-            <img class="icon" src="../../../../assets/setting/h5.svg" alt="" srcset="">
+          <div class="icon-item" v-if="item.clientType == 'H5'">
+            <img class="icon" src="../../../../assets/setting/h5.svg" alt="" />
           </div>
-          <div class='pay-title'> {{way[item.clientType]}}</div>
+          <div class="pay-title">{{ way[item.clientType] }}</div>
           <div>
-
-            <Divider orientation="left">登录设置</Divider>
+            <el-divider content-position="left">登录设置</el-divider>
             <div class="pay-list">
-              <Form style="width:100%;" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
-                <FormItem label="appId" prop="appId">
-                  <Input @on-enter="setupSetting" class="label-appkey" v-model="item.appId" />
-                </FormItem>
-                <FormItem label="appSecret" prop="appSecret">
-                  <Input @on-enter="setupSetting" v-model="item.appSecret" />
-                </FormItem>
-              </Form>
-                 <Button @click="setupSetting">保存设置</Button>
+              <el-form
+                style="width: 100%"
+                ref="formValidate"
+                :model="formValidate"
+                :rules="ruleValidate"
+                label-width="100px"
+              >
+                <el-form-item label="appId" prop="appId">
+                  <el-input @keyup.enter="setupSetting" class="label-appkey" v-model="item.appId" />
+                </el-form-item>
+                <el-form-item label="appSecret" prop="appSecret">
+                  <el-input @keyup.enter="setupSetting" v-model="item.appSecret" />
+                </el-form-item>
+              </el-form>
+              <el-button @click="setupSetting">保存设置</el-button>
             </div>
           </div>
-
-        </Card>
+        </el-card>
       </div>
-
     </div>
-
   </div>
-
 </template>
 <script>
 import { setSetting } from "@/api/index";
@@ -53,14 +48,14 @@ import { handleSubmit } from "../setting/validate";
 export default {
   data() {
     return {
-      ruleValidate: {}, // 验证规则
-      way: { // 类型
+      ruleValidate: {},
+      way: {
         APP: "APP",
         H5: "手机网页（微商城）",
         WECHAT_MP: "微信小程序",
         PC: "WEB网页",
       },
-      formValidate: {} // 表单数据
+      formValidate: {},
     };
   },
   props: ["res", "type"],
@@ -69,30 +64,24 @@ export default {
   },
   methods: {
     submit(name) {
-      let that = this;
+      const that = this;
       if (handleSubmit(that, name)) {
         this.setupSetting();
       }
     },
-    // 保存设置
     setupSetting() {
-      this.$Spin.show();
-      setTimeout(() => {
-             this.$Spin.hide();
-        setSetting(this.type, {
-          wechatConnectSettingItems: this.formValidate,
-        }).then((res) => {
-          if (res.success) {
-            this.$Message.success("保存成功!");
-            this.$Modal.remove();
-          } else {
-            this.$Message.error("保存失败!");
-            this.$Modal.remove();
-          }
-        });
-      }, 3000);
+      setSetting(this.type, {
+        wechatConnectSettingItems: this.formValidate,
+      }).then((res) => {
+        if (res.success) {
+          this.$Message.success("保存成功!");
+          this.$Modal.remove();
+        } else {
+          this.$Message.error("保存失败!");
+          this.$Modal.remove();
+        }
+      });
     },
-    // 实例化数据
     async init() {
       this.formValidate = JSON.parse(this.res).wechatConnectSettingItems;
       Object.keys(this.formValidate).forEach((item) => {
@@ -132,14 +121,8 @@ export default {
   margin-right: 20px;
   display: flex;
   margin-bottom: 20px;
-  ::v-deep .ivu-card-body {
-    padding: 0 16px !important;
-  }
 }
 
-.label-item {
-  display: flex;
-}
 .label-item {
   display: flex;
   align-items: center;
@@ -150,7 +133,7 @@ export default {
   padding-bottom: 10px;
   flex-direction: column;
   align-items: center;
-  ::v-deep .ivu-btn {
+  :deep(.el-button){
     width: 100px;
   }
 }
@@ -162,14 +145,10 @@ export default {
   align-items: center;
   flex-direction: column;
 }
-.ivu-form-item {
+.el-form-item {
   display: flex;
-
   align-items: center;
 }
-.ivu-row {
-  width: 100%;
-}
 .icon {
   width: 100px;
   height: 100px;
diff --git a/manager/src/views/sys/setting-manage/pay/ALIPAY_PAYMENT.vue b/manager/src/views/sys/setting-manage/pay/ALIPAY_PAYMENT.vue
index d882f6d6..bd0d0059 100644
--- a/manager/src/views/sys/setting-manage/pay/ALIPAY_PAYMENT.vue
+++ b/manager/src/views/sys/setting-manage/pay/ALIPAY_PAYMENT.vue
@@ -1,29 +1,29 @@
 <template>
   <div class="layout">
-    <Form ref="formValidate" :label-width="160" label-position="right" :model="formValidate" :rules="ruleValidate">
-      <FormItem label="appId" prop="appId">
-        <Input maxlength="300" class="w200" v-model="formValidate.appId" />
-      </FormItem>
-      <FormItem label="certPath" prop="certPath">
-        <Input maxlength="300"  v-model="formValidate.certPath" />
-      </FormItem>
-      <FormItem label="alipayPublicCertPath" prop="alipayPublicCertPath">
-        <Input maxlength="300" v-model="formValidate.alipayPublicCertPath" />
-      </FormItem>
-      <FormItem label="privateKey" class="label-item" prop="privateKey">
-        <Input maxlength="3000" v-model="formValidate.privateKey" />
-      </FormItem>
-      <FormItem label="rootCertPath" prop="rootCertPath">
-        <Input maxlength="300" v-model="formValidate.rootCertPath" />
-      </FormItem>
-      <FormItem label="支付回调域名" prop="callbackUrl">
-        <Input maxlength="300" v-model="formValidate.callbackUrl" />
-      </FormItem>
+    <el-form ref="formValidate" label-width="160px" label-position="right" :model="formValidate" :rules="ruleValidate">
+      <el-form-item label="appId" prop="appId">
+        <el-input maxlength="300" class="w200" v-model="formValidate.appId" />
+      </el-form-item>
+      <el-form-item label="certPath" prop="certPath">
+        <el-input maxlength="300"  v-model="formValidate.certPath" />
+      </el-form-item>
+      <el-form-item label="alipayPublicCertPath" prop="alipayPublicCertPath">
+        <el-input maxlength="300" v-model="formValidate.alipayPublicCertPath" />
+      </el-form-item>
+      <el-form-item label="privateKey" class="label-item" prop="privateKey">
+        <el-input maxlength="3000" v-model="formValidate.privateKey" />
+      </el-form-item>
+      <el-form-item label="rootCertPath" prop="rootCertPath">
+        <el-input maxlength="300" v-model="formValidate.rootCertPath" />
+      </el-form-item>
+      <el-form-item label="支付回调域名" prop="callbackUrl">
+        <el-input maxlength="300" v-model="formValidate.callbackUrl" />
+      </el-form-item>
       <div class="label-btns">
-        <Button type="primary" @click="submit('formValidate')">保存</Button>
+        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
 
       </div>
-    </Form>
+    </el-form>
   </div>
 </template>
 <script>
@@ -68,7 +68,7 @@ export default {
     init() {
       this.res = JSON.parse(this.res);
 
-      this.$set(this, "formValidate", { ...this.res });
+      this.formValidate = { ...this.res };
       Object.keys(this.formValidate).forEach((item) => {
         this.ruleValidate[item] = [
           {
@@ -90,16 +90,16 @@ export default {
   display: flex;
 }
 .w200 {
-  ::v-deep .ivu-input {
+  :deep(.el-input){
     width: 250px !important;
     margin: 0 10px;
   }
 }
-::v-deep .ivu-input {
+:deep(.el-input){
   width: 450px !important;
   margin: 0 10px;
 }
-.ivu-input-wrapper {
+.el-input {
   width: 450px;
   margin-right: 10px;
 }
diff --git a/manager/src/views/sys/setting-manage/pay/PAYMENT_SUPPORT.vue b/manager/src/views/sys/setting-manage/pay/PAYMENT_SUPPORT.vue
index f2975208..dd03af74 100644
--- a/manager/src/views/sys/setting-manage/pay/PAYMENT_SUPPORT.vue
+++ b/manager/src/views/sys/setting-manage/pay/PAYMENT_SUPPORT.vue
@@ -1,53 +1,39 @@
 <template>
   <div class="layout">
-    <div class="row" v-for="(client,clientIndex) in supportForm.clients" :key="clientIndex">
-
-      <div class="col" v-if="client ==item.client" v-for="(item,index) in  formValidate" :key="index">
-        <Card :padding="0">
-          <div>
-
-            <!-- app -->
-            <div class="icon-item" v-if="client ==item.client &&item.client== 'APP'">
-              <img class="icon" src="../../../../assets/setting/app.svg" alt="" srcset="">
-            </div>
-            <div class="icon-item" v-if="  client ==item.client &&  item.client== 'PC'">
-              <!-- pc -->
-              <img class="icon" src="../../../../assets/setting/pc.svg" alt="" srcset="">
-
-            </div>
-            <div class="icon-item" v-if="  client ==item.client &&  item.client== 'WECHAT_MP'">
-              <!-- 小程序 -->
-
-              <img class="icon" src="../../../../assets/setting/wechat_mp.svg" alt="" srcset="">
-            </div>
-
-            <div class="icon-item" v-if=" client ==item.client &&  item.client== 'H5'">
-              <!-- h5 -->
-
-              <img class="icon" src="../../../../assets/setting/h5.svg" alt="" srcset="">
-            </div>
-            <div class='pay-title' v-if=" client ==item.client "> {{way[item.client]}}</div>
-
-            <div v-if=" client ==item.client ">
-              <Divider orientation="left">支付设置</Divider>
-
-              <div class="pay-list">
-                <CheckboxGroup @on-change="handleChangePayType" v-model="item.supports">
-
-                  <Checkbox v-for="(support,i)  in supportForm.payments" :key="i" :label="support">
-
-                    {{payWay[support] || support}}
-
-                  </Checkbox>
-                </CheckboxGroup>
-              </div>
-            </div>
-
+    <div class="row" v-for="(item, index) in formValidate" :key="index">
+      <div class="col">
+        <el-card shadow="never" :body-style="{ padding: '0 16px' }">
+          <div class="icon-item" v-if="item.client == 'APP'">
+            <img class="icon" src="../../../../assets/setting/app.svg" alt="" />
           </div>
-        </Card>
+          <div class="icon-item" v-if="item.client == 'PC'">
+            <img class="icon" src="../../../../assets/setting/pc.svg" alt="" />
+          </div>
+          <div class="icon-item" v-if="item.client == 'WECHAT_MP'">
+            <img class="icon" src="../../../../assets/setting/wechat_mp.svg" alt="" />
+          </div>
+          <div class="icon-item" v-if="item.client == 'H5'">
+            <img class="icon" src="../../../../assets/setting/h5.svg" alt="" />
+          </div>
+          <div class="pay-title">{{ way[item.client] }}</div>
 
+          <div>
+            <el-divider content-position="left">支付设置</el-divider>
+
+            <div class="pay-list">
+              <el-checkbox-group v-model="item.supports" @change="handleChangePayType">
+                <el-checkbox
+                  v-for="(support, i) in supportForm.payments"
+                  :key="i"
+                  :value="support"
+                >
+                  {{ payWay[support] || support }}
+                </el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+        </el-card>
       </div>
-
     </div>
   </div>
 </template>
@@ -58,21 +44,20 @@ import { getPaymentSupportForm } from "@/api/setting";
 export default {
   data() {
     return {
-      ruleValidate: {}, // 验证规则
-      way: { // 类型
+      ruleValidate: {},
+      way: {
         APP: "移动应用端",
         H5: "移动端",
         WECHAT_MP: "小程序端",
         PC: "PC端",
       },
-      formValidate: {}, // 表单数据
-      // key obj
-      payWay: { // 支付方式
+      formValidate: {},
+      payWay: {
         ALIPAY: "支付宝支付",
         WECHAT: "微信支付",
         WALLET: "余额支付",
       },
-      supportForm: "", // 支持的支付方式
+      supportForm: "",
       checkSupport: {},
     };
   },
@@ -82,12 +67,11 @@ export default {
   },
   methods: {
     submit(name) {
-      let that = this;
+      const that = this;
       if (handleSubmit(that, name)) {
         this.setupSetting();
       }
     },
-    // 修改支付设置
     handleChangePayType(val) {
       this.$Modal.confirm({
         title: "修改支付设置",
@@ -101,31 +85,25 @@ export default {
         },
       });
     },
-    // 保存设置
     setupSetting() {
-      setSetting(this.type, { paymentSupportItems: this.formValidate }).then(
-        (res) => {
-          if (res.success) {
-            this.checkSupport =  JSON.parse(JSON.stringify(this.formValidate));
-            this.$Message.success("保存成功!");
-            this.$Modal.remove();
-          } else {
-            this.$Message.error("保存失败!");
-            this.$Modal.remove();
-          }
+      setSetting(this.type, { paymentSupportItems: this.formValidate }).then((res) => {
+        if (res.success) {
+          this.checkSupport = JSON.parse(JSON.stringify(this.formValidate));
+          this.$Message.success("保存成功!");
+          this.$Modal.remove();
+        } else {
+          this.$Message.error("保存失败!");
+          this.$Modal.remove();
         }
-      );
+      });
     },
-    // 实例化数据
     async init() {
       this.formValidate = JSON.parse(this.res).paymentSupportItems;
-      this.checkSupport =  JSON.parse(JSON.stringify(this.formValidate));
+      this.checkSupport = JSON.parse(JSON.stringify(this.formValidate));
       console.log(this.formValidate);
 
       await getPaymentSupportForm().then((res) => {
-        // res.result.payments = ["H5", "PC"];
         this.supportForm = res.result;
-
       });
     },
   },
@@ -151,14 +129,8 @@ export default {
   margin-right: 20px;
   display: flex;
   margin-bottom: 20px;
-  ::v-deep .ivu-card-body {
-    padding: 0 16px !important;
-  }
 }
 
-.label-item {
-  display: flex;
-}
 .label-item {
   display: flex;
   align-items: center;
@@ -176,14 +148,10 @@ export default {
   align-items: center;
   flex-direction: column;
 }
-.ivu-form-item {
+.el-form-item {
   display: flex;
-
   align-items: center;
 }
-.ivu-row {
-  width: 100%;
-}
 .icon {
   width: 100px;
   height: 100px;
diff --git a/manager/src/views/sys/setting-manage/pay/WECHAT_PAYMENT.vue b/manager/src/views/sys/setting-manage/pay/WECHAT_PAYMENT.vue
index 49359073..27ce7310 100644
--- a/manager/src/views/sys/setting-manage/pay/WECHAT_PAYMENT.vue
+++ b/manager/src/views/sys/setting-manage/pay/WECHAT_PAYMENT.vue
@@ -1,60 +1,60 @@
 <template>
   <div class="layout">
-    <Form
+    <el-form
       ref="formValidate"
-      :label-width="150"
+      label-width="150px"
       label-position="right"
       :model="formValidate"
       :rules="ruleValidate"
     >
-      <FormItem label="JSAPI支付应用ID" prop="jsapiAppId">
-        <Input maxlength="300" class="w200" v-model="formValidate.jsapiAppId" />
-      </FormItem>
-      <FormItem label="Native支付应用ID" prop="nativeAppId">
-        <Input maxlength="300" class="w200" v-model="formValidate.nativeAppId" />
-      </FormItem>
-      <FormItem label="小程序支付应用id" prop="mpAppId">
-        <Input maxlength="300" class="w200" v-model="formValidate.mpAppId" />
-      </FormItem>
-      <FormItem label="H5支付应用ID" prop="h5AppId">
-        <Input maxlength="300" class="w200" v-model="formValidate.h5AppId" />
-      </FormItem>
-      <FormItem label="APP支付应用ID" prop="appAppId">
-        <Input maxlength="300" class="w200" v-model="formValidate.appAppId" />
-      </FormItem>
-      <FormItem label="商户号" prop="mchId">
-        <Input maxlength="300" class="w200" v-model="formValidate.mchId" />
-      </FormItem>
-      <FormItem label="APIv3密钥" prop="apiKey3">
-        <Input maxlength="300" v-model="formValidate.apiKey3" />
-      </FormItem>
-      <FormItem label="API证书-证书序列号" prop="serialNumber">
-        <Input maxlength="300" v-model="formValidate.serialNumber" />
-      </FormItem>
-      <FormItem class="form-item-view-el" label="apiclient_key" prop="apiclient_key">
-        <Input v-model="formValidate.apiclientKey" :rows="6" maxlength="2500" show-word-limit type="textarea" placeholder="Enter something..." />
-      </FormItem>
-      <FormItem label="加签方式" prop="publicType">
-        <RadioGroup type="button" button-style="solid" v-model="formValidate.publicType" @change="handlePublicTypeChange">
-          <Radio label="CERT">平台证书</Radio>
-          <Radio label="KEY">微信支付公钥</Radio>
-        </RadioGroup>
+      <el-form-item label="JSAPI支付应用ID" prop="jsapiAppId">
+        <el-input maxlength="300" class="w200" v-model="formValidate.jsapiAppId" />
+      </el-form-item>
+      <el-form-item label="Native支付应用ID" prop="nativeAppId">
+        <el-input maxlength="300" class="w200" v-model="formValidate.nativeAppId" />
+      </el-form-item>
+      <el-form-item label="小程序支付应用id" prop="mpAppId">
+        <el-input maxlength="300" class="w200" v-model="formValidate.mpAppId" />
+      </el-form-item>
+      <el-form-item label="H5支付应用ID" prop="h5AppId">
+        <el-input maxlength="300" class="w200" v-model="formValidate.h5AppId" />
+      </el-form-item>
+      <el-form-item label="APP支付应用ID" prop="appAppId">
+        <el-input maxlength="300" class="w200" v-model="formValidate.appAppId" />
+      </el-form-item>
+      <el-form-item label="商户号" prop="mchId">
+        <el-input maxlength="300" class="w200" v-model="formValidate.mchId" />
+      </el-form-item>
+      <el-form-item label="APIv3密钥" prop="apiKey3">
+        <el-input maxlength="300" v-model="formValidate.apiKey3" />
+      </el-form-item>
+      <el-form-item label="API证书-证书序列号" prop="serialNumber">
+        <el-input maxlength="300" v-model="formValidate.serialNumber" />
+      </el-form-item>
+      <el-form-item class="form-item-view-el" label="apiclient_key" prop="apiclient_key">
+        <el-input v-model="formValidate.apiclientKey" :rows="6" maxlength="2500" show-word-limit type="textarea" placeholder="Enter something..." />
+      </el-form-item>
+      <el-form-item label="加签方式" prop="publicType">
+        <el-radio-group v-model="formValidate.publicType" @change="handlePublicTypeChange">
+          <el-radio-button value="CERT">平台证书</el-radio-button>
+          <el-radio-button value="KEY">微信支付公钥</el-radio-button>
+        </el-radio-group>
         <span class="desc">商户接收APIv3的请求应答、回调时验签使用，以下两种方式只能使用一种</span>
-      </FormItem>
+      </el-form-item>
       <!-- 当加签方式选择“KEY”时展示 -->
-      <FormItem v-if="formValidate.publicType === 'KEY'" label="公钥证书ID" prop="publicId">
-        <Input maxlength="300" v-model="formValidate.publicId" />
-      </FormItem>
-      <FormItem v-if="formValidate.publicType === 'KEY'" class="form-item-view-el" label="公钥证书" prop="publicKey">
-        <Input v-model="formValidate.publicKey" :rows="6" maxlength="2500" show-word-limit type="textarea" placeholder="Enter something..." />
-      </FormItem>
-      <FormItem label="支付回调域名" prop="callbackUrl">
-        <Input maxlength="300" v-model="formValidate.callbackUrl" />
-      </FormItem>
+      <el-form-item v-if="formValidate.publicType === 'KEY'" label="公钥证书ID" prop="publicId">
+        <el-input maxlength="300" v-model="formValidate.publicId" />
+      </el-form-item>
+      <el-form-item v-if="formValidate.publicType === 'KEY'" class="form-item-view-el" label="公钥证书" prop="publicKey">
+        <el-input v-model="formValidate.publicKey" :rows="6" maxlength="2500" show-word-limit type="textarea" placeholder="Enter something..." />
+      </el-form-item>
+      <el-form-item label="支付回调域名" prop="callbackUrl">
+        <el-input maxlength="300" v-model="formValidate.callbackUrl" />
+      </el-form-item>
       <div class="label-btns">
-        <Button type="primary" @click="submit('formValidate')">保存</Button>
+        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
       </div>
-    </Form>
+    </el-form>
   </div>
 </template>
 <script>
@@ -93,7 +93,7 @@ export default {
     init() {
       this.res = JSON.parse(this.res);
 
-      this.$set(this, "formValidate", { ...this.res });
+      this.formValidate = { ...this.res };
       Object.keys(this.formValidate).forEach((item) => {
         if (item.indexOf("pId") < 0) {
           this.ruleValidate[item] = [
@@ -118,18 +118,18 @@ export default {
 }
 
 .w200 {
-  ::v-deep .ivu-input {
+  :deep(.el-input){
     width: 250px !important;
     margin: 0 10px;
   }
 }
 
-::v-deep .ivu-input {
+:deep(.el-input){
   width: 450px !important;
   margin: 0 10px;
 }
 
-.ivu-input-wrapper {
+.el-input {
   width: 450px;
   margin-right: 10px;
 }
diff --git a/manager/src/views/sys/setting-manage/platformSetting.vue b/manager/src/views/sys/setting-manage/platformSetting.vue
index a58f422d..5eb2f851 100644
--- a/manager/src/views/sys/setting-manage/platformSetting.vue
+++ b/manager/src/views/sys/setting-manage/platformSetting.vue
@@ -1,580 +1,562 @@
 <template>
   <div>
-    <Card>
-      <Tabs v-model="tabName" :animated="false" style="overflow: visible">
-        <TabPane label="基础设置" name="base">
-          <div style="display:flex;position:relative">
-            <Form
+    <el-card>
+      <el-tabs v-model="tabName" style="overflow: visible">
+        <el-tab-pane label="基础设置" name="base">
+          <div v-loading="loading" style="display:flex;position:relative">
+            <el-form
               ref="baseForm"
               :model="base"
-              :label-width="140"
+              label-width="140px"
               label-position="right"
               :rules="baseValidate"
             >
-              <FormItem label="网站名称" prop="siteName">
-                <Input type="text" v-model="base.siteName" placeholder="请输入网站名称" style="width: 350px"/>
-              </FormItem>
-              <FormItem label="ICP证书号" prop="icp">
-                <Input type="text" v-model="base.icp" placeholder="请输入ICP证书号"
-                       style="width: 350px"/>
-              </FormItem>
-              <FormItem label="Logo" prop="logo">
-                <upload-pic-input v-model="base.logo" style="width: 350px"></upload-pic-input>
-              </FormItem>
-              <FormItem label="商家中心Logo" prop="sellerLogo">
-                <upload-pic-input v-model="base.sellerLogo" style="width: 350px"></upload-pic-input>
-              </FormItem>
-              <FormItem>
-                <Button type="primary" style="width: 100px;margin-right:5px" :loading="saveLoading"
-                        @click="saveBase">保存
-                </Button>
-              </FormItem>
-            </Form>
-            <Spin fix v-if="loading"></Spin>
+              <el-form-item label="网站名称" prop="siteName">
+                <el-input v-model="base.siteName" placeholder="请输入网站名称" style="width: 350px" />
+              </el-form-item>
+              <el-form-item label="ICP证书号" prop="icp">
+                <el-input v-model="base.icp" placeholder="请输入ICP证书号" style="width: 350px" />
+              </el-form-item>
+              <el-form-item label="Logo" prop="logo">
+                <upload-pic-input v-model="base.logo" style="width: 350px" />
+              </el-form-item>
+              <el-form-item label="商家中心Logo" prop="sellerLogo">
+                <upload-pic-input v-model="base.sellerLogo" style="width: 350px" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" style="width: 100px;margin-right:5px" :loading="saveLoading" @click="saveBase">
+                  保存
+                </el-button>
+              </el-form-item>
+            </el-form>
           </div>
-        </TabPane>
-        <TabPane label="积分设置" name="point">
-          <div style="display:flex;position:relative">
-            <Form
-                    ref="pointForm"
-                    :model="point"
-                    :label-width="140"
-                    label-position="right"
-                    :rules="pointValidate"
+        </el-tab-pane>
+        <el-tab-pane label="积分设置" name="point">
+          <div v-loading="loading" style="display:flex;position:relative">
+            <el-form
+              ref="pointForm"
+              :model="point"
+              label-width="140px"
+              label-position="right"
+              :rules="pointValidate"
             >
-              <FormItem label="注册" prop="register">
-                <Input type="text" v-model="point.register" placeholder="请输入注册赠送积分"
-                       style="width: 350px"/>
-              </FormItem>
-              <FormItem label="登陆" prop="login">
-                <Input type="text" v-model="point.login" placeholder="请输入登陆赠送积分"
-                       style="width: 350px"/>
-              </FormItem>
-              <FormItem label="消费一元" prop="money">
-                <Input type="text" v-model="point.money" placeholder="请输入积分"
-                       style="width: 350px"/>
-              </FormItem>
-              <FormItem>
-                <Button type="primary" style="width: 100px;margin-right:5px" :loading="saveLoading"
-                        @click="savePoint">保存
-                </Button>
-              </FormItem>
-            </Form>
-            <Spin fix v-if="loading"></Spin>
+              <el-form-item label="注册" prop="register">
+                <el-input v-model="point.register" placeholder="请输入注册赠送积分" style="width: 350px" />
+              </el-form-item>
+              <el-form-item label="登陆" prop="login">
+                <el-input v-model="point.login" placeholder="请输入登陆赠送积分" style="width: 350px" />
+              </el-form-item>
+              <el-form-item label="消费一元" prop="money">
+                <el-input v-model="point.money" placeholder="请输入积分" style="width: 350px" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" style="width: 100px;margin-right:5px" :loading="saveLoading" @click="savePoint">
+                  保存
+                </el-button>
+              </el-form-item>
+            </el-form>
           </div>
-        </TabPane>
-        <TabPane label="订单设置" name="order">
-          <div style="display:flex;position:relative">
-            <Form
-                    ref="orderForm"
-                    :model="order"
-                    :label-width="140"
-                    label-position="right"
-                    :rules="orderValidate"
+        </el-tab-pane>
+        <el-tab-pane label="订单设置" name="order">
+          <div v-loading="loading" style="display:flex;position:relative">
+            <el-form
+              ref="orderForm"
+              :model="order"
+              label-width="140px"
+              label-position="right"
+              :rules="orderValidate"
             >
-              <FormItem label="自动取消 分钟" prop="autoCancel">
-                <Input type="text" v-model="order.autoCancel" placeholder="请输入自动取消分钟"
-                       style="width: 350px"/>
-              </FormItem>
-              <FormItem label="自动收货 天" prop="autoReceive">
-                <Input type="text" v-model="order.autoReceive" placeholder="请输入自动收货天数"
-                       style="width: 350px"/>
-              </FormItem>
-              <FormItem label="自动收货 天" prop="autoComplete">
-                <Input type="text" v-model="order.autoComplete" placeholder="请输入自动完成天数"
-                       style="width: 350px"/>
-              </FormItem>
-              <FormItem>
-                <Button type="primary" style="width: 100px;margin-right:5px" :loading="saveLoading"
-                        @click="saveOrder">保存
-                </Button>
-              </FormItem>
-            </Form>
-            <Spin fix v-if="loading"></Spin>
+              <el-form-item label="自动取消 分钟" prop="autoCancel">
+                <el-input v-model="order.autoCancel" placeholder="请输入自动取消分钟" style="width: 350px" />
+              </el-form-item>
+              <el-form-item label="自动收货 天" prop="autoReceive">
+                <el-input v-model="order.autoReceive" placeholder="请输入自动收货天数" style="width: 350px" />
+              </el-form-item>
+              <el-form-item label="自动收货 天" prop="autoComplete">
+                <el-input v-model="order.autoComplete" placeholder="请输入自动完成天数" style="width: 350px" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" style="width: 100px;margin-right:5px" :loading="saveLoading" @click="saveOrder">
+                  保存
+                </el-button>
+              </el-form-item>
+            </el-form>
           </div>
-        </TabPane>
-        <TabPane label="商品设置" name="goods">
-          <div style="display:flex;position:relative">
-            <Form
-                    ref="goodsForm"
-                    :model="goods"
-                    :label-width="140"
-                    label-position="right"
-                    :rules="goodsValidate"
+        </el-tab-pane>
+        <el-tab-pane label="商品设置" name="goods">
+          <div v-loading="loading" style="display:flex;position:relative">
+            <el-form
+              ref="goodsForm"
+              :model="goods"
+              label-width="140px"
+              label-position="right"
+              :rules="goodsValidate"
             >
-              <FormItem label="是否开启商品审核" prop="goodsCheck">
-                <RadioGroup type="button" button-style="solid" v-model="goods.goodsCheck">
-                  <Radio label="OPEN">开启</Radio>
-                  <Radio label="CLOSE">关闭</Radio>
-                </RadioGroup>
-              </FormItem>
-              <FormItem label="商品页面小图宽度" prop="smallPictureWidth">
-                <Input type="text" v-model="goods.smallPictureWidth" placeholder="商品页面小图宽度"
-                       style="width: 350px"/>
-              </FormItem>
-              <FormItem label="商品页面小图高度" prop="smallPictureHeight">
-                <Input type="text" v-model="goods.smallPictureHeight" placeholder="商品页面小图高度"
-                       style="width: 350px"/>
-              </FormItem>
-              <FormItem label="缩略图宽度" prop="abbreviationPictureWidth">
-                <Input type="text" v-model="goods.abbreviationPictureWidth" placeholder="缩略图宽度"
-                       style="width: 350px"/>
-              </FormItem>
-              <FormItem label="缩略图高度" prop="abbreviationPictureHeight">
-                <Input type="text" v-model="goods.abbreviationPictureHeight" placeholder="缩略图高度"
-                       style="width: 350px"/>
-              </FormItem>
-              <FormItem label="原图宽" prop="originalPictureWidth">
-                <Input type="text" v-model="goods.originalPictureWidth" placeholder="原图宽"
-                       style="width: 350px"/>
-              </FormItem>
-              <FormItem label="原图高" prop="originalPictureHeight">
-                <Input type="text" v-model="goods.originalPictureHeight" placeholder="原图高"
-                       style="width: 350px"/>
-              </FormItem>
-              <FormItem>
-                <Button type="primary" style="width: 100px;margin-right:5px" :loading="saveLoading"
-                        @click="saveGoods">保存
-                </Button>
-              </FormItem>
-            </Form>
-            <Spin fix v-if="loading"></Spin>
+              <el-form-item label="是否开启商品审核" prop="goodsCheck">
+                <el-radio-group v-model="goods.goodsCheck">
+                  <el-radio-button value="OPEN">开启</el-radio-button>
+                  <el-radio-button value="CLOSE">关闭</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="商品页面小图宽度" prop="smallPictureWidth">
+                <el-input v-model="goods.smallPictureWidth" placeholder="商品页面小图宽度" style="width: 350px" />
+              </el-form-item>
+              <el-form-item label="商品页面小图高度" prop="smallPictureHeight">
+                <el-input v-model="goods.smallPictureHeight" placeholder="商品页面小图高度" style="width: 350px" />
+              </el-form-item>
+              <el-form-item label="缩略图宽度" prop="abbreviationPictureWidth">
+                <el-input v-model="goods.abbreviationPictureWidth" placeholder="缩略图宽度" style="width: 350px" />
+              </el-form-item>
+              <el-form-item label="缩略图高度" prop="abbreviationPictureHeight">
+                <el-input v-model="goods.abbreviationPictureHeight" placeholder="缩略图高度" style="width: 350px" />
+              </el-form-item>
+              <el-form-item label="原图宽" prop="originalPictureWidth">
+                 <el-input v-model="goods.originalPictureWidth" placeholder="原图宽" style="width: 350px" />
+              </el-form-item>
+              <el-form-item label="原图高" prop="originalPictureHeight">
+                <el-input v-model="goods.originalPictureHeight" placeholder="原图高" style="width: 350px" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" style="width: 100px;margin-right:5px" :loading="saveLoading" @click="saveGoods">
+                  保存
+                </el-button>
+              </el-form-item>
+            </el-form>
           </div>
-        </TabPane>
-      </Tabs>
-    </Card>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
   </div>
 </template>
 
 <script>
-  import {
-    getParams,
-    editParams
-  } from "@/api/platform.js";
+import { getParams, editParams } from "@/api/platform.js";
+import uploadPicInput from "@/components/lili/upload-pic-input";
+import { regular } from "@/utils";
 
-  import uploadPicInput from "@/components/lili/upload-pic-input";
-
-  import {regular} from '@/utils'
-
-  export default {
-    name: "setting-manage",
-    components: {
-      uploadPicInput
+export default {
+  name: "setting-manage",
+  components: {
+    uploadPicInput,
+  },
+  data() {
+    return {
+      tabName: "base",
+      loading: false,
+      saveLoading: false,
+      base: {
+        siteName: "",
+        icp: "",
+        logo: "",
+        sellerLogo: "",
+      },
+      point: {
+        register: "",
+        login: "",
+        money: "",
+      },
+      order: {
+        autoCancel: "",
+        autoReceive: "",
+        autoComplete: "",
+      },
+      goods: {
+        goodsCheck: "OPEN",
+        smallPictureWidth: "",
+        smallPictureHeight: "",
+        abbreviationPictureWidth: "",
+        abbreviationPictureHeight: "",
+        originalPictureWidth: "",
+        originalPictureHeight: "",
+      },
+      baseValidate: {
+        siteName: [{ required: true, message: "不能为空", trigger: "blur" }],
+        icp: [{ required: true, message: "不能为空", trigger: "blur" }],
+        logo: [{ required: true, message: "不能为空", trigger: "blur" }],
+        sellerLogo: [{ required: true, message: "不能为空", trigger: "blur" }],
+      },
+      pointValidate: {
+        register: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!regular.integer.test(value)) {
+                callback(new Error("请输入正整数，且不为零！"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        login: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!regular.integer.test(value)) {
+                callback(new Error("请输入正整数，且不为零！"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        money: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!regular.integer.test(value)) {
+                callback(new Error("请输入正整数，且不为零！"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+      },
+      orderValidate: {
+        autoCancel: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!regular.integer.test(value)) {
+                callback(new Error("请输入正整数，且不为零！"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        autoReceive: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!regular.integer.test(value)) {
+                callback(new Error("请输入正整数，且不为零！"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        autoComplete: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!regular.integer.test(value)) {
+                callback(new Error("请输入正整数，且不为零！"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+      },
+      goodsValidate: {
+        smallPictureWidth: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!regular.integer.test(value)) {
+                callback(new Error("请输入正整数，且不为零！"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        smallPictureHeight: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!regular.integer.test(value)) {
+                callback(new Error("请输入正整数，且不为零！"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        abbreviationPictureWidth: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!regular.integer.test(value)) {
+                callback(new Error("请输入正整数，且不为零！"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        abbreviationPictureHeight: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!regular.integer.test(value)) {
+                callback(new Error("请输入正整数，且不为零！"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        originalPictureWidth: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!regular.integer.test(value)) {
+                callback(new Error("请输入正整数，且不为零！"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        originalPictureHeight: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!regular.integer.test(value)) {
+                callback(new Error("请输入正整数，且不为零！"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    init() {
+      this.initBase();
+      this.initPoint();
+      this.initOrder();
+      this.initGoods();
+      this.initWechat();
+      this.initQQ();
+      this.initWeibo();
+      this.initAlipay();
     },
-    data() {
-      return {
-        tabName: "base", // tab栏名字
-        loading: false, // 表单加载状态
-        saveLoading: false, // 保存加载状态
-        base: { // 基本设置
-          siteName: "",
-          icp: "",
-          logo: "",
-          sellerLogo: "",
-        },
-        point: { // 积分设置
-          register: "",
-          login: "",
-          money: ""
-        },
-        order: { // 订单设置
-          autoCancel: "",
-          autoReceive: "",
-          autoComplete: ""
-        },
-        goods: { // 商品设置
-          goodsCheck: "OPEN",
-          smallPictureWidth: "",
-          smallPictureHeight: "",
-          abbreviationPictureWidth: "",
-          abbreviationPictureHeight: "",
-          originalPictureWidth: "",
-          originalPictureHeight: ""
-        },
-        baseValidate: {
-          // 表单验证规则
-          siteName: [{required: true, message: "不能为空", trigger: "blur"}],
-          icp: [{required: true, message: "不能为空", trigger: "blur"}],
-          logo: [{required: true, message: "不能为空", trigger: "blur"}],
-          sellerLogo: [{required: true, message: "不能为空", trigger: "blur"}]
-        },
-        pointValidate: {
-          // 表单验证规则
-          register: [{
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error('请输入正整数，且不为零！'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'blur'
-          }],
-          login: [{
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error('请输入正整数，且不为零！'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'blur'
-          }],
-          money: [
-            {
-              required: true,
-              validator: (rule, value, callback) => {
-                if (!regular.integer.test(value)) {
-                  callback(new Error('请输入正整数，且不为零！'))
-                } else {
-                  callback()
-                }
-              },
-              trigger: 'blur'
-            }]
-        },
-        orderValidate: {
-          // 表单验证规则
-          autoCancel: [{
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error('请输入正整数，且不为零！'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'blur'
-          }],
-          autoReceive: [{
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error('请输入正整数，且不为零！'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'blur'
-          }],
-          autoComplete: [{
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error('请输入正整数，且不为零！'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'blur'
-          }]
-        },
-        goodsValidate: {
-          smallPictureWidth: [{
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error('请输入正整数，且不为零！'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'blur'
-          }],
-          smallPictureHeight: [{
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error('请输入正整数，且不为零！'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'blur'
-          }],
-          abbreviationPictureWidth: [{
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error('请输入正整数，且不为零！'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'blur'
-          }],
-          abbreviationPictureHeight: [{
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error('请输入正整数，且不为零！'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'blur'
-          }],
-          originalPictureWidth: [{
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error('请输入正整数，且不为零！'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'blur'
-          }],
-          originalPictureHeight: [{
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error('请输入正整数，且不为零！'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'blur'
-          }]
+    initBase() {
+      this.loading = true;
+      getParams("base").then((res) => {
+        if (res.success) {
+          this.loading = false;
+          if (res.result) {
+            this.base = res.result;
+          }
         }
-      };
+      });
     },
-    methods: {
-      init() {
-        this.initBase();
-        this.initPoint();
-        this.initOrder();
-        this.initGoods();
-        this.initWechat();
-        this.initQQ();
-        this.initWeibo();
-        this.initAlipay();
-      },
-      // 基础配置
-      initBase() {
-        this.loading = true;
-        getParams('base').then(res => {
-          if (res.success) {
-            this.loading = false;
-            if (res.result) {
-              this.base = res.result
-            }
+    initPoint() {
+      this.loading = true;
+      getParams("point").then((res) => {
+        if (res.success) {
+          this.loading = false;
+          if (res.result) {
+            this.point = res.result;
           }
-        });
-      },
-      // 积分设置
-      initPoint() {
-        this.loading = true;
-        getParams('point').then(res => {
-          if (res.success) {
-            this.loading = false;
-            if (res.result) {
-              this.point = res.result
-            }
-          }
-        });
-      },
-      // 订单设置
-      initOrder() {
-        this.loading = true;
-        getParams('order').then(res => {
-          if (res.success) {
-            this.loading = false;
-            if (res.result) {
-              this.order = res.result
-            }
-          }
-        });
-      },
-      // 商品设置
-      initGoods() {
-        this.loading = true;
-        getParams('goods').then(res => {
-          if (res.success) {
-            this.loading = false;
-            if (res.result) {
-              this.goods = res.result
-            }
-          }
-        });
-      },
-      //
-      initWeibo() {
-        this.loading = true;
-        getParams('weibo').then(res => {
-          if (res.success) {
-            this.loading = false;
-            if (res.result) {
-              this.weibo = res.result
-            }
-          }
-        });
-      },
-      // 微信设置
-      initWechat() {
-        this.loading = true;
-        getParams('wechat').then(res => {
-          if (res.success) {
-            this.loading = false;
-            if (res.result) {
-              this.wechat = res.result
-            }
-          }
-        });
-      },
-      initQQ() {
-        this.loading = true;
-        getParams('qq').then(res => {
-          if (res.success) {
-            this.loading = false;
-            if (res.result) {
-              this.qq = res.result
-            }
-          }
-        });
-      },
-      // 阿里配置
-      initAlipay() {
-        this.loading = true;
-        getParams('alipay').then(res => {
-          if (res.success) {
-            this.loading = false;
-            if (res.result) {
-              this.alipay = res.result
-            }
-          }
-        });
-      },
-      // 保存基础配置
-      saveBase() {
-        this.$refs.baseForm.validate(valid => {
-          if (valid) {
-            this.saveLoading = true;
-            this.base.id = 'base'
-            editParams(this.base, 'base').then(res => {
-              this.saveLoading = false;
-              if (res.success) {
-                this.$Message.success("保存成功");
-              }
-            });
-          }
-        });
-      },
-      // 保存积分配置
-      savePoint() {
-        this.$refs.pointForm.validate(valid => {
-          if (valid) {
-            this.saveLoading = true;
-            this.point.id = 'point'
-            editParams(this.point, 'point').then(res => {
-              this.saveLoading = false;
-              if (res.success) {
-                this.$Message.success("保存成功");
-              }
-            });
-          }
-        });
-      },
-      // 保存订单配置
-      saveOrder() {
-        this.$refs.orderForm.validate(valid => {
-          if (valid) {
-            this.saveLoading = true;
-            this.order.id = 'order'
-            editParams(this.order, 'order').then(res => {
-              this.saveLoading = false;
-              if (res.success) {
-                this.$Message.success("保存成功");
-              }
-            });
-          }
-        });
-      },
-      // 保存商品设置
-      saveGoods() {
-        this.$refs.goodsForm.validate(valid => {
-          if (valid) {
-            this.saveLoading = true;
-            this.goods.id = 'goods'
-            editParams(this.goods, 'goods').then(res => {
-              this.saveLoading = false;
-              if (res.success) {
-                this.$Message.success("保存成功");
-              }
-            });
-          }
-        });
-      },
-      // 保存微信设置
-      saveWechat() {
-        this.$refs.wechatForm.validate(valid => {
-          if (valid) {
-            this.saveLoading = true;
-            this.wechat.id = 'wechat'
-            editParams(this.wechat, 'wechat').then(res => {
-              this.saveLoading = false;
-              if (res.success) {
-                this.$Message.success("保存成功");
-              }
-            });
-          }
-        });
-      },
-      // 保存qq设置
-      saveQQ() {
-        this.$refs.qqForm.validate(valid => {
-          if (valid) {
-            this.saveLoading = true;
-            this.qq.id = 'qq'
-            editParams(this.qq, 'qq').then(res => {
-              this.saveLoading = false;
-              if (res.success) {
-                this.$Message.success("保存成功");
-              }
-            });
-          }
-        });
-      },
-      // 保存微博设置
-      saveWeibo() {
-        this.$refs.wechatForm.validate(valid => {
-          if (valid) {
-            this.saveLoading = true;
-            this.weibo.id = 'weibo'
-            editParams(this.weibo, 'weibo').then(res => {
-              this.saveLoading = false;
-              if (res.success) {
-                this.$Message.success("保存成功");
-              }
-            });
-          }
-        });
-      },
-      // 保存支付宝设置
-      saveAlipay() {
-        this.$refs.alipayForm.validate(valid => {
-          if (valid) {
-            this.saveLoading = true;
-            this.alipay.id = 'alipay'
-            editParams(this.alipay, 'alipay').then(res => {
-              this.saveLoading = false;
-              if (res.success) {
-                this.$Message.success("保存成功");
-              }
-            });
-          }
-        });
-      }
+        }
+      });
     },
-    mounted() {
-      let name = this.$route.query.name;
-      if (name) {
-        this.tabName = name;
-      }
-      this.init();
+    initOrder() {
+      this.loading = true;
+      getParams("order").then((res) => {
+        if (res.success) {
+          this.loading = false;
+          if (res.result) {
+            this.order = res.result;
+          }
+        }
+      });
+    },
+    initGoods() {
+      this.loading = true;
+      getParams("goods").then((res) => {
+        if (res.success) {
+          this.loading = false;
+          if (res.result) {
+            this.goods = res.result;
+          }
+        }
+      });
+    },
+    initWeibo() {
+      this.loading = true;
+      getParams("weibo").then((res) => {
+        if (res.success) {
+          this.loading = false;
+          if (res.result) {
+            this.weibo = res.result;
+          }
+        }
+      });
+    },
+    initWechat() {
+      this.loading = true;
+      getParams("wechat").then((res) => {
+        if (res.success) {
+          this.loading = false;
+          if (res.result) {
+            this.wechat = res.result;
+          }
+        }
+      });
+    },
+    initQQ() {
+      this.loading = true;
+      getParams("qq").then((res) => {
+        if (res.success) {
+          this.loading = false;
+          if (res.result) {
+            this.qq = res.result;
+          }
+        }
+      });
+    },
+    initAlipay() {
+      this.loading = true;
+      getParams("alipay").then((res) => {
+        if (res.success) {
+          this.loading = false;
+          if (res.result) {
+            this.alipay = res.result;
+          }
+        }
+      });
+    },
+    saveBase() {
+      this.$refs.baseForm.validate((valid) => {
+        if (valid) {
+          this.saveLoading = true;
+          this.base.id = "base";
+          editParams(this.base, "base").then((res) => {
+            this.saveLoading = false;
+            if (res.success) {
+              this.$Message.success("保存成功");
+            }
+          });
+        }
+      });
+    },
+    savePoint() {
+      this.$refs.pointForm.validate((valid) => {
+        if (valid) {
+          this.saveLoading = true;
+          this.point.id = "point";
+          editParams(this.point, "point").then((res) => {
+            this.saveLoading = false;
+            if (res.success) {
+              this.$Message.success("保存成功");
+            }
+          });
+        }
+      });
+    },
+    saveOrder() {
+      this.$refs.orderForm.validate((valid) => {
+        if (valid) {
+          this.saveLoading = true;
+          this.order.id = "order";
+          editParams(this.order, "order").then((res) => {
+            this.saveLoading = false;
+            if (res.success) {
+              this.$Message.success("保存成功");
+            }
+          });
+        }
+      });
+    },
+    saveGoods() {
+      this.$refs.goodsForm.validate((valid) => {
+        if (valid) {
+          this.saveLoading = true;
+          this.goods.id = "goods";
+          editParams(this.goods, "goods").then((res) => {
+            this.saveLoading = false;
+            if (res.success) {
+              this.$Message.success("保存成功");
+            }
+          });
+        }
+      });
+    },
+    saveWechat() {
+      this.$refs.wechatForm.validate((valid) => {
+        if (valid) {
+          this.saveLoading = true;
+          this.wechat.id = "wechat";
+          editParams(this.wechat, "wechat").then((res) => {
+            this.saveLoading = false;
+            if (res.success) {
+              this.$Message.success("保存成功");
+            }
+          });
+        }
+      });
+    },
+    saveQQ() {
+      this.$refs.qqForm.validate((valid) => {
+        if (valid) {
+          this.saveLoading = true;
+          this.qq.id = "qq";
+          editParams(this.qq, "qq").then((res) => {
+            this.saveLoading = false;
+            if (res.success) {
+              this.$Message.success("保存成功");
+            }
+          });
+        }
+      });
+    },
+    saveWeibo() {
+      this.$refs.wechatForm.validate((valid) => {
+        if (valid) {
+          this.saveLoading = true;
+          this.weibo.id = "weibo";
+          editParams(this.weibo, "weibo").then((res) => {
+            this.saveLoading = false;
+            if (res.success) {
+              this.$Message.success("保存成功");
+            }
+          });
+        }
+      });
+    },
+    saveAlipay() {
+      this.$refs.alipayForm.validate((valid) => {
+        if (valid) {
+          this.saveLoading = true;
+          this.alipay.id = "alipay";
+          editParams(this.alipay, "alipay").then((res) => {
+            this.saveLoading = false;
+            if (res.success) {
+              this.$Message.success("保存成功");
+            }
+          });
+        }
+      });
+    },
+  },
+  mounted() {
+    const name = this.$route.query.name;
+    if (name) {
+      this.tabName = name;
     }
-  };
-
+    this.init();
+  },
+};
 </script>
diff --git a/manager/src/views/sys/setting-manage/setting/BASE_SETTING.vue b/manager/src/views/sys/setting-manage/setting/BASE_SETTING.vue
index fd3c551e..fe3b5a98 100644
--- a/manager/src/views/sys/setting-manage/setting/BASE_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/BASE_SETTING.vue
@@ -1,83 +1,81 @@
 <template>
   <div class="layout">
-    <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
-
-      <FormItem label="站点名称" prop="siteName">
-        <Input style="width:200px;" v-model="formValidate.siteName" />
+    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+      <el-form-item label="站点名称" prop="siteName">
+        <el-input style="width:200px;" v-model="formValidate.siteName" />
         <span class="desc">配置买家端站点名称</span>
-      </FormItem>
-      <FormItem label="icp" prop="icp">
+      </el-form-item>
+      <el-form-item label="icp" prop="icp">
+        <el-input v-model="formValidate.icp" />
+      </el-form-item>
 
-        <Input v-model="formValidate.icp" />
-      </FormItem>
-
-      <FormItem label="后台Logo" prop="domainLogo">
+      <el-form-item label="后台Logo" prop="domainLogo">
         <div class="label-item-upload">
-
           <img v-if="formValidate.domainLogo" class="img" :src="formValidate.domainLogo" />
-          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="">
-          <Button @click="onClickImg('domainLogo')">选择图片</Button>
-           <span class="desc">后台管理左上角logo展示 	17∶6</span>
+          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
+          <el-button @click="onClickImg('domainLogo')">选择图片</el-button>
+          <span class="desc">后台管理左上角logo展示 	17∶6</span>
         </div>
-      </FormItem>
-      <FormItem label="后台Icon" prop="domainIcon">
+      </el-form-item>
+      <el-form-item label="后台Icon" prop="domainIcon">
         <div class="label-item-upload">
-
           <img v-if="formValidate.domainIcon" class="img" :src="formValidate.domainIcon" />
-          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="">
-          <Button @click="onClickImg('domainIcon')">选择图片</Button>
-            <span class="desc">后台管理网站icon展示 	1∶1</span>
+          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
+          <el-button @click="onClickImg('domainIcon')">选择图片</el-button>
+          <span class="desc">后台管理网站icon展示 	1∶1</span>
         </div>
-      </FormItem>
-      <FormItem label="买家端Logo" prop="buyerSideLogo">
+      </el-form-item>
+      <el-form-item label="买家端Logo" prop="buyerSideLogo">
         <div class="label-item-upload">
           <img v-if="formValidate.buyerSideLogo" class="img" :src="formValidate.buyerSideLogo" />
-          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="">
-          <Button @click="onClickImg('buyerSideLogo')">选择图片</Button>
-           <span class="desc">买家端logo展示 	17∶6</span>
+          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
+          <el-button @click="onClickImg('buyerSideLogo')">选择图片</el-button>
+          <span class="desc">买家端logo展示 	17∶6</span>
         </div>
-      </FormItem>
-      <FormItem label="买家端Icon" prop="buyerSideIcon">
+      </el-form-item>
+      <el-form-item label="买家端Icon" prop="buyerSideIcon">
         <div class="label-item-upload">
           <img v-if="formValidate.buyerSideIcon" class="img" :src="formValidate.buyerSideIcon" />
-          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="">
-          <Button @click="onClickImg('buyerSideIcon')">选择图片</Button>
-            <span class="desc">买家端网站icon展示 	1∶1</span>
+          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
+          <el-button @click="onClickImg('buyerSideIcon')">选择图片</el-button>
+          <span class="desc">买家端网站icon展示 	1∶1</span>
         </div>
-      </FormItem>
-      <FormItem label="商家端Logo" prop="storeSideLogo">
+      </el-form-item>
+      <el-form-item label="商家端Logo" prop="storeSideLogo">
         <div class="label-item-upload">
           <img v-if="formValidate.storeSideLogo" class="img" :src="formValidate.storeSideLogo" />
-          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="">
-          <Button @click="onClickImg('storeSideLogo')">选择图片</Button>
+          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
+          <el-button @click="onClickImg('storeSideLogo')">选择图片</el-button>
           <span class="desc">商家端logo展示 	17∶6</span>
         </div>
-      </FormItem>
-      <FormItem label="商家端Icon" prop="storeSideIcon">
+      </el-form-item>
+      <el-form-item label="商家端Icon" prop="storeSideIcon">
         <div class="label-item-upload">
           <img v-if="formValidate.storeSideIcon" class="img" :src="formValidate.storeSideIcon" />
-          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="">
-          <Button @click="onClickImg('storeSideIcon')">选择图片</Button>
-           <span class="desc">商家端icon展示 	1∶1</span>
+          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
+          <el-button @click="onClickImg('storeSideIcon')">选择图片</el-button>
+          <span class="desc">商家端icon展示 	1∶1</span>
         </div>
-      </FormItem>
+      </el-form-item>
 
-      <FormItem label="站点地址" prop="staticPageAddress">
-        <Input  style="width:200px;" v-model="formValidate.staticPageAddress" />
-
-      </FormItem>
-      <FormItem label="wap站点地址" prop="staticPageWapAddress">
-        <Input v-model="formValidate.staticPageWapAddress" />
-      </FormItem>
+      <el-form-item label="站点地址" prop="staticPageAddress">
+        <el-input style="width:200px;" v-model="formValidate.staticPageAddress" />
+      </el-form-item>
+      <el-form-item label="wap站点地址" prop="staticPageWapAddress">
+        <el-input v-model="formValidate.staticPageWapAddress" />
+      </el-form-item>
       <div class="label-btns">
-        <Button type="primary" @click="submit('formValidate')">保存</Button>
-
+        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
       </div>
-    </Form>
-    <Modal width="1200px" v-model="picModelFlag">
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-    </Modal>
-
+    </el-form>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close :show-close="true">
+      <ossManage
+        @callback="callbackSelected"
+        :isComponent="true"
+        :initialize="picModelFlag"
+        ref="ossManage"
+      />
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -87,21 +85,20 @@ import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
   title: "基础设置",
   props: {
-    res:{
-      type:null,
-      default:""
+    res: {
+      type: null,
+      default: "",
     },
-    type:''
+    type: "",
   },
   components: {
     ossManage,
   },
   data() {
     return {
-      handleSubmit, // 验证规则
-
-      picModelFlag: false, // 预览图片显隐
-      formValidate: { // 表单数据
+      handleSubmit,
+      picModelFlag: false,
+      formValidate: {
         buyerSideLogo: "",
         domainLogo: "",
         icp: "",
@@ -110,33 +107,34 @@ export default {
         staticPageAddress: "",
         staticPageWapAddress: "",
       },
-      selected: "", // 已选数据
-      ruleValidate: {}, // 验证规则
-      result:""
+      selected: "",
+      ruleValidate: {},
+      result: "",
     };
   },
   created() {
     this.init();
   },
   methods: {
-    // 点击图片
     onClickImg(item) {
       this.selected = item;
-      this.$refs.ossManage.selectImage = true;
       this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
     },
     submit(name) {
-      let that = this;
+      const that = this;
       if (handleSubmit(that, name)) {
         this.setupSetting();
       }
     },
-    // 选择回显
     callbackSelected(val) {
       this.picModelFlag = false;
       this.formValidate[this.selected] = val.url;
     },
-    // 保存设置
     setupSetting() {
       setSetting(this.type, this.formValidate).then((res) => {
         if (res.success) {
@@ -149,10 +147,9 @@ export default {
         }
       });
     },
-    /**添加必填项 */
     init() {
       this.result = JSON.parse(this.res);
-      this.$set(this, "formValidate", { ...this.result });
+      this.formValidate = { ...this.result };
       Object.keys(this.result).forEach((item) => {
         this.ruleValidate[item] = [
           {
@@ -170,7 +167,7 @@ export default {
 @import "./style.scss";
 .label-item {
   display: flex;
-  > .ivu-input {
+  > .el-input {
     width: 200px;
     margin: 0 10px;
   }
diff --git a/manager/src/views/sys/setting-manage/setting/GOODS_SETTING.vue b/manager/src/views/sys/setting-manage/setting/GOODS_SETTING.vue
index 5f0ad9d6..07e679cf 100644
--- a/manager/src/views/sys/setting-manage/setting/GOODS_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/GOODS_SETTING.vue
@@ -1,72 +1,68 @@
 <template>
   <div class="layout">
-    <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
-      <FormItem label="商品审核" prop="goodsCheck">
-        <RadioGroup type="button" button-style="solid" v-model="formValidate.goodsCheck">
-          <Radio label="true">开启</Radio>
-          <Radio label="false">关闭</Radio>
-
-        </RadioGroup>
-         <span class="desc">商品审核关闭后，商家添加商品则无需审核直接上架</span>
-      </FormItem>
+    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+      <el-form-item label="商品审核" prop="goodsCheck">
+        <el-radio-group v-model="formValidate.goodsCheck">
+          <el-radio-button value="true">开启</el-radio-button>
+          <el-radio-button value="false">关闭</el-radio-button>
+        </el-radio-group>
+        <span class="desc">商品审核关闭后，商家添加商品则无需审核直接上架</span>
+      </el-form-item>
       <div class="label-item">
-        <FormItem class="label-item" label="缩略图宽" prop="abbreviationPictureWidth">
-          <Input type="number" v-model="formValidate.abbreviationPictureWidth">
-          <span slot="prepend">宽</span>
-          <span slot="append">px</span>
-          </Input>
-
-        </FormItem>
-        <FormItem class="label-item" label="缩略图高" prop="abbreviationPictureHeight">
-          <Input type="number" v-model="formValidate.abbreviationPictureHeight">
-          <span slot="prepend">高</span>
-          <span slot="append">px</span>
-          </Input>
-        </FormItem>
+        <el-form-item class="label-item" label="缩略图宽" prop="abbreviationPictureWidth">
+          <el-input type="number" v-model="formValidate.abbreviationPictureWidth">
+            <template #prepend>宽</template>
+            <template #append>px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item class="label-item" label="缩略图高" prop="abbreviationPictureHeight">
+          <el-input type="number" v-model="formValidate.abbreviationPictureHeight">
+            <template #prepend>高</template>
+            <template #append>px</template>
+          </el-input>
+        </el-form-item>
       </div>
       <div class="label-item">
-        <FormItem label="小图宽" prop="smallPictureWidth">
-          <Input type="number" v-model="formValidate.smallPictureWidth">
-          <span slot="prepend">宽</span>
-          <span slot="append">px</span>
-          </Input>
-
-        </FormItem>
-        <FormItem label="小图高" class="label-item" prop="smallPictureHeight">
-          <Input type="number" v-model="formValidate.smallPictureHeight">
-          <span slot="prepend">高</span>
-          <span slot="append">px</span>
-          </Input>
-        </FormItem>
+        <el-form-item label="小图宽" prop="smallPictureWidth">
+          <el-input type="number" v-model="formValidate.smallPictureWidth">
+            <template #prepend>宽</template>
+            <template #append>px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="小图高" class="label-item" prop="smallPictureHeight">
+          <el-input type="number" v-model="formValidate.smallPictureHeight">
+            <template #prepend>高</template>
+            <template #append>px</template>
+          </el-input>
+        </el-form-item>
       </div>
       <div class="label-item">
-        <FormItem class="label-item" label="原图宽高" prop="originalPictureWidth">
-          <Input type="number" v-model="formValidate.originalPictureWidth">
-          <span slot="prepend">宽</span>
-          <span slot="append">px</span>
-          </Input>
-
-        </FormItem>
-        <FormItem class="label-item" label="原图宽高" prop="originalPictureHeight">
-          <Input type="number" v-model="formValidate.originalPictureHeight">
-          <span slot="prepend">高</span>
-          <span slot="append">px</span>
-          </Input>
-        </FormItem>
+        <el-form-item class="label-item" label="原图宽高" prop="originalPictureWidth">
+          <el-input type="number" v-model="formValidate.originalPictureWidth">
+            <template #prepend>宽</template>
+            <template #append>px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item class="label-item" label="原图宽高" prop="originalPictureHeight">
+          <el-input type="number" v-model="formValidate.originalPictureHeight">
+            <template #prepend>高</template>
+            <template #append>px</template>
+          </el-input>
+        </el-form-item>
       </div>
-     <div class="label-btns">
-        <Button type="primary" @click="submit('formValidate')">保存</Button>
+      <div class="label-btns">
+        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
         <div class="es-buttons">
-          <Button type="success" @click="createIndex()">重新生成所有商品索引</Button>
-          <Button type="info" @click="deleteDownGoods()">删除ES中下架的商品</Button>
-          <Button type="warning" @click="generateCache()">生成所有商品的缓存</Button>
-          <Button type="error" @click="deleteNotExistIndex()">删除不存在的索引</Button>
+          <el-button type="success" @click="createIndex()">重新生成所有商品索引</el-button>
+          <el-button type="info" @click="deleteDownGoods()">删除ES中下架的商品</el-button>
+          <el-button type="warning" @click="generateCache()">生成所有商品的缓存</el-button>
+          <el-button type="danger" @click="deleteNotExistIndex()">删除不存在的索引</el-button>
         </div>
         <div class="progress-item" v-if="showProgress">
-          <i-progress :percent="progressVal"></i-progress>
+          <el-progress :percentage="progressVal" />
         </div>
       </div>
-    </Form>
+    </el-form>
   </div>
 </template>
 <script>
@@ -77,7 +73,6 @@ export default {
   data() {
     return {
       formValidate: {
-        // 表单数据
         goodsCheck: 1,
         smallPictureHeight: "0",
         smallPictureWidth: "0",
@@ -89,22 +84,20 @@ export default {
       progressVal: 0,
       showProgress: false,
       intervalProgress: null,
-      ruleValidate: {}, // 验证规则
-      result:""
+      ruleValidate: {},
+      result: "",
     };
   },
   created() {
     this.init();
   },
   methods: {
-    //保存
     submit(name) {
-      let that = this;
+      const that = this;
       if (handleSubmit(that, name)) {
         this.setupSetting();
       }
     },
-    //重新生成所有商品索引
     createIndex() {
       createIndex().then((res) => {
         if (res.success) {
@@ -113,15 +106,13 @@ export default {
           setTimeout(() => {
             this.intervalProgress = setInterval(() => {
               getProgress().then((resp) => {
-                let progressResult = resp.result;
+                const progressResult = resp.result;
                 if (progressResult != null && progressResult.flag === 0) {
                   clearInterval(this.intervalProgress);
                   this.showProgress = false;
                   this.$Message.success("生成成功!");
                 } else {
-                  this.progressVal = Math.floor(
-                    (progressResult.processed / progressResult.total) * 100
-                  );
+                  this.progressVal = Math.floor((progressResult.processed / progressResult.total) * 100);
                 }
               });
             }, 1000);
@@ -130,22 +121,19 @@ export default {
           this.showProgress = true;
           this.intervalProgress = setInterval(() => {
             getProgress().then((resp) => {
-              let progressResult = resp.result;
+              const progressResult = resp.result;
               if (progressResult != null && progressResult.flag === 0) {
                 clearInterval(this.intervalProgress);
                 this.showProgress = false;
                 this.$Message.success("生成成功!");
               } else {
-                this.progressVal = Math.floor(
-                  (progressResult.processed / progressResult.total) * 100
-                );
+                this.progressVal = Math.floor((progressResult.processed / progressResult.total) * 100);
               }
             });
           }, 1000);
         }
       });
     },
-    //删除ES中下架的商品
     deleteDownGoods() {
       deleteGoodsDown().then((res) => {
         if (res.success) {
@@ -155,7 +143,6 @@ export default {
         }
       });
     },
-    //生成所有商品的缓存
     generateCache() {
       generateGoodsCache().then((res) => {
         if (res.success) {
@@ -165,7 +152,6 @@ export default {
         }
       });
     },
-    //删除不存在的索引
     deleteNotExistIndex() {
       delSkuIndex().then((res) => {
         if (res.success) {
@@ -175,7 +161,6 @@ export default {
         }
       });
     },
-    // 保存设置
     setupSetting() {
       setSetting(this.type, this.formValidate).then((res) => {
         if (res.success) {
@@ -185,15 +170,12 @@ export default {
         }
       });
     },
-
-    // 实例化数据
     init() {
       this.result = JSON.parse(this.res);
-
       Object.keys(this.result).map((item) => {
         this.result[item] += "";
       });
-      this.$set(this, "formValidate", { ...this.result });
+      this.formValidate = { ...this.result };
       Object.keys(this.formValidate).forEach((item) => {
         this.ruleValidate[item] = [
           {
@@ -223,7 +205,7 @@ export default {
 .label-item {
   display: flex;
 }
-::v-deep .ivu-input {
+:deep(.el-input){
   width: 100px !important;
 }
 </style>
diff --git a/manager/src/views/sys/setting-manage/setting/IM_SETTING.vue b/manager/src/views/sys/setting-manage/setting/IM_SETTING.vue
index dba17c86..6b9ae09c 100644
--- a/manager/src/views/sys/setting-manage/setting/IM_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/IM_SETTING.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="layout">
-    <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
-      <FormItem label="云IM地址" prop="httpUrl">
-        <Input v-model="formValidate.httpUrl"/>
+    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+      <el-form-item label="云IM地址" prop="httpUrl">
+        <el-input v-model="formValidate.httpUrl"/>
         <span class="desc">配置买家端联系客服以及商家端登录客服跳转的路径</span>
-      </FormItem>
+      </el-form-item>
 
       <div class="label-btns">
-        <Button type="primary" @click="submit('formValidate')">保存</Button>
+        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
       </div>
-    </Form>
+    </el-form>
   </div>
 </template>
 <script>
@@ -52,7 +52,7 @@ export default {
     init() {
       this.result = JSON.parse(this.res);
 
-      this.$set(this, "formValidate", {...this.result});
+      this.formValidate = { ...this.result };
       Object.keys(this.formValidate).forEach((item) => {
         this.ruleValidate[item] = [
           {
@@ -74,12 +74,12 @@ export default {
   display: flex;
 }
 
-::v-deep .ivu-input {
+:deep(.el-input){
   width: 300px !important;
   margin: 0 10px;
 }
 
-.ivu-input-wrapper {
+.el-input {
   width: 300px;
   margin-right: 10px;
 }
diff --git a/manager/src/views/sys/setting-manage/setting/LOGISTICS_SETTING.vue b/manager/src/views/sys/setting-manage/setting/LOGISTICS_SETTING.vue
index 40dea111..eb9cdfc3 100644
--- a/manager/src/views/sys/setting-manage/setting/LOGISTICS_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/LOGISTICS_SETTING.vue
@@ -1,51 +1,50 @@
 <template>
   <div class="layout">
-    <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
-      <FormItem label="平台 " prop="endPoint">
-        <RadioGroup v-model="formValidate.type" type="button">
-          <Radio label="KDNIAO">快递鸟</Radio>
-          <Radio label="KUAIDI100">快递100</Radio>
-          <Radio label="SHUNFENG">顺丰</Radio>
-        </RadioGroup>
-      </FormItem>
-      <FormItem v-if="formValidate.type === 'KDNIAO'" label="快递鸟 商户ID" prop="kdniaoEbusinessID">
-        <Input v-model="formValidate.kdniaoEbusinessID" />
-      </FormItem>
-      <FormItem v-if="formValidate.type === 'KDNIAO'" label="快递鸟 AppKey" prop="kdniaoAppKey">
-        <Input class="label-appkey" v-model="formValidate.kdniaoAppKey" />
-      </FormItem>
-      <FormItem v-if="formValidate.type === 'KDNIAO'" label="快递鸟 requestType" prop="requestType">
-        <Input class="label-appkey" v-model="formValidate.requestType" />
-      </FormItem>
+    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+      <el-form-item label="平台 " prop="endPoint">
+        <el-radio-group v-model="formValidate.type">
+          <el-radio-button value="KDNIAO">快递鸟</el-radio-button>
+          <el-radio-button value="KUAIDI100">快递100</el-radio-button>
+          <el-radio-button value="SHUNFENG">顺丰</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type === 'KDNIAO'" label="快递鸟 商户ID" prop="kdniaoEbusinessID">
+        <el-input v-model="formValidate.kdniaoEbusinessID" />
+      </el-form-item>
+      <el-form-item v-if="formValidate.type === 'KDNIAO'" label="快递鸟 AppKey" prop="kdniaoAppKey">
+        <el-input class="label-appkey" v-model="formValidate.kdniaoAppKey" />
+      </el-form-item>
+      <el-form-item v-if="formValidate.type === 'KDNIAO'" label="快递鸟 requestType" prop="requestType">
+        <el-input class="label-appkey" v-model="formValidate.requestType" />
+      </el-form-item>
 
-      <FormItem v-if="formValidate.type === 'KUAIDI100'" label="快递100 授权码" prop="kuaidi100Customer">
-        <Input class="label-appkey" v-model="formValidate.kuaidi100Customer" />
-      </FormItem>
-      <FormItem v-if="formValidate.type === 'KUAIDI100'" label="快递100 Key" prop="kuaidi100Key">
-        <Input class="label-appkey" v-model="formValidate.kuaidi100Key" />
-      </FormItem>
-      <div v-if="formValidate.type === 'SHUNFENG'">
-        <FormItem label="顾客编码" prop="clientCode">
-          <Input v-model="formValidate.clientCode" />
-        </FormItem>
-        <FormItem label="校验码" prop="checkWord">
-          <Input v-model="formValidate.checkWord" />
-        </FormItem>
-        <FormItem label="请求地址" prop="callUrl">
-          <Input class="label-appkey" v-model="formValidate.callUrl" />
-        </FormItem>
-
-        <FormItem label="打印模板" prop="templateCode">
-          <Input class="label-appkey" v-model="formValidate.templateCode" />
-        </FormItem>
-        <FormItem label="月结号" prop="monthlyCardNo">
-          <Input class="label-appkey" v-model="formValidate.monthlyCardNo" />
-        </FormItem>
-      </div>
+      <el-form-item v-if="formValidate.type === 'KUAIDI100'" label="快递100 授权码" prop="kuaidi100Customer">
+        <el-input class="label-appkey" v-model="formValidate.kuaidi100Customer" />
+      </el-form-item>
+      <el-form-item v-if="formValidate.type === 'KUAIDI100'" label="快递100 Key" prop="kuaidi100Key">
+        <el-input class="label-appkey" v-model="formValidate.kuaidi100Key" />
+      </el-form-item>
+      <template v-if="formValidate.type === 'SHUNFENG'">
+        <el-form-item label="顾客编码" prop="clientCode">
+          <el-input v-model="formValidate.clientCode" />
+        </el-form-item>
+        <el-form-item label="校验码" prop="checkWord">
+          <el-input v-model="formValidate.checkWord" />
+        </el-form-item>
+        <el-form-item label="请求地址" prop="callUrl">
+          <el-input class="label-appkey" v-model="formValidate.callUrl" />
+        </el-form-item>
+        <el-form-item label="打印模板" prop="templateCode">
+          <el-input class="label-appkey" v-model="formValidate.templateCode" />
+        </el-form-item>
+        <el-form-item label="月结号" prop="monthlyCardNo">
+          <el-input class="label-appkey" v-model="formValidate.monthlyCardNo" />
+        </el-form-item>
+      </template>
       <div class="label-btns">
-        <Button type="primary" @click="submit('formValidate')">保存</Button>
+        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
       </div>
-    </Form>
+    </el-form>
   </div>
 </template>
 <script>
@@ -54,31 +53,29 @@ import { handleSubmit } from "./validate";
 export default {
   data() {
     return {
-      ruleValidate: {}, // 验证规则
-      result:"",
-      formValidate: {   // 表单数据
+      ruleValidate: {},
+      result: "",
+      formValidate: {
         type: "",
         kdniaoEbusinessID: "",
         kdniaoAppKey: "",
-        requestType:"",
+        requestType: "",
         kuaidi100Customer: "",
         kuaidi100Key: "",
       },
     };
   },
-  props: ["res", 'type'],
+  props: ["res", "type"],
   created() {
     this.init();
   },
   methods: {
-    // 验证
     submit(name) {
-      let that = this;
+      const that = this;
       if (handleSubmit(that, name)) {
-        this.setupSetting()
+        this.setupSetting();
       }
     },
-    // 保存设置
     setupSetting() {
       setSetting(this.type, this.formValidate).then((res) => {
         if (res.success) {
@@ -88,10 +85,9 @@ export default {
         }
       });
     },
-    // 实例化数据
     init() {
       this.result = JSON.parse(this.res);
-      this.$set(this, "formValidate", { ...this.result });
+      this.formValidate = { ...this.result };
       Object.keys(this.formValidate).forEach((item) => {
         this.ruleValidate[item] = [
           {
@@ -113,12 +109,13 @@ export default {
   display: flex;
 }
 
-::v-deep .ivu-input {
+:deep(.el-input){
   width: 300px !important;
   margin: 0 10px;
 }
 
-.ivu-input-wrapper {
+.el-input {
   width: 300px;
   margin-right: 10px;
-}</style>
+}
+</style>
diff --git a/manager/src/views/sys/setting-manage/setting/ORDER_SETTING.vue b/manager/src/views/sys/setting-manage/setting/ORDER_SETTING.vue
index 20ab670a..c9d1f459 100644
--- a/manager/src/views/sys/setting-manage/setting/ORDER_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/ORDER_SETTING.vue
@@ -1,45 +1,43 @@
 <template>
   <div class="layout">
-    <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
-
-      <FormItem label="订单自动取消" prop="autoCancel">
-        <Input type='number' v-model="formValidate.autoCancel">
-        <span slot="append">分</span>
-        </Input>
+    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+      <el-form-item label="订单自动取消" prop="autoCancel">
+        <el-input type="number" v-model="formValidate.autoCancel">
+          <template #append>分</template>
+        </el-input>
         <span class="desc">发起订单后，多少分钟未操作取消订单</span>
-      </FormItem>
+      </el-form-item>
 
-      <FormItem label="订单自动收货" class="label-item" prop="autoReceive">
-        <Input type='number' v-model="formValidate.autoReceive">
-        <span slot="append">天</span>
-        </Input>
+      <el-form-item label="订单自动收货" class="label-item" prop="autoReceive">
+        <el-input type="number" v-model="formValidate.autoReceive">
+          <template #append>天</template>
+        </el-input>
         <span class="desc">发货后多少天自动完成收货</span>
-      </FormItem>
+      </el-form-item>
 
-      <FormItem label="自动好评" prop="autoEvaluation">
-        <Input type='number' v-model="formValidate.autoEvaluation">
-        <span slot="append">天</span>
-        </Input>
+      <el-form-item label="自动好评" prop="autoEvaluation">
+        <el-input type="number" v-model="formValidate.autoEvaluation">
+          <template #append>天</template>
+        </el-input>
         <span class="desc">订单发货后，多少天后自动好评</span>
-      </FormItem>
-      <FormItem label="已完成订单允许退单" prop="closeAfterSale">
-        <Input type='number' v-model="formValidate.closeAfterSale">
-        <span slot="append">天</span>
-        </Input>
+      </el-form-item>
+      <el-form-item label="已完成订单允许退单" prop="closeAfterSale">
+        <el-input type="number" v-model="formValidate.closeAfterSale">
+          <template #append>天</template>
+        </el-input>
         <span class="desc">订单完成后，多少天内允许退单，如果天数为0,则完成订单当天可以退单，之后就不再允许。</span>
-      </FormItem>
-      <FormItem label="已完成订单允许投诉" prop="closeComplaint">
-        <Input type='number' v-model="formValidate.closeComplaint">
-        <span slot="append">天</span>
-        </Input>
+      </el-form-item>
+      <el-form-item label="已完成订单允许投诉" prop="closeComplaint">
+        <el-input type="number" v-model="formValidate.closeComplaint">
+          <template #append>天</template>
+        </el-input>
         <span class="desc">订单完成后，多少天内允许投诉，如果天数为0,则不允许投诉</span>
-      </FormItem>
+      </el-form-item>
 
       <div class="label-btns">
-        <Button type="primary" @click="submit('formValidate')">保存</Button>
-
+        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
       </div>
-    </Form>
+    </el-form>
   </div>
 </template>
 <script>
@@ -48,15 +46,15 @@ import { handleSubmit } from "./validate";
 export default {
   data() {
     return {
-      ruleValidate: {}, // 验证规则
-      formValidate: { // 表单数据
+      ruleValidate: {},
+      formValidate: {
         autoCancel: "",
         autoEvaluation: "",
         autoReceive: "",
         closeAfterSale: "",
-        closeComplaint: ""
+        closeComplaint: "",
       },
-      result: ""
+      result: "",
     };
   },
   props: ["res", "type"],
@@ -64,14 +62,12 @@ export default {
     this.init();
   },
   methods: {
-    // 保存
     submit(name) {
-      let that = this;
+      const that = this;
       if (handleSubmit(that, name)) {
         this.setupSetting();
       }
     },
-    // 保存设置
     setupSetting() {
       setSetting(this.type, this.formValidate).then((res) => {
         if (res.success) {
@@ -81,13 +77,12 @@ export default {
         }
       });
     },
-    // 实例化数据
     init() {
       this.result = JSON.parse(this.res);
       Object.keys(this.result).map((item) => {
         this.result[item] += "";
       });
-      this.$set(this, "formValidate", { ...this.result });
+      this.formValidate = { ...this.result };
       Object.keys(this.formValidate).forEach((item) => {
         this.ruleValidate[item] = [
           {
@@ -119,12 +114,12 @@ export default {
   display: flex;
 }
 
-.ivu-input-wrapper {
+.el-input {
   width: 100px;
   margin-right: 10px;
 }
 
-::v-deep .ivu-input {
+:deep(.el-input){
   width: 100px !important;
 }
 
diff --git a/manager/src/views/sys/setting-manage/setting/OSS_SETTING.vue b/manager/src/views/sys/setting-manage/setting/OSS_SETTING.vue
index b3a102c2..fcd4bfc7 100644
--- a/manager/src/views/sys/setting-manage/setting/OSS_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/OSS_SETTING.vue
@@ -1,84 +1,84 @@
 <template>
   <div class="layout">
-    <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
+    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
 
-      <FormItem label="平台" >
-        <RadioGroup v-model="formValidate.type" type="button">
-          <Radio label="ALI_OSS">阿里OSS</Radio>
-          <Radio label="MINIO">MINIO</Radio>
-          <Radio label="HUAWEI_OBS">华为云OBS</Radio>
-          <Radio label="TENCENT_COS">腾讯云COS</Radio>
-        </RadioGroup>
-      </FormItem>
+      <el-form-item label="平台" >
+        <el-radio-group v-model="formValidate.type">
+          <el-radio-button value="ALI_OSS">阿里OSS</el-radio-button>
+          <el-radio-button value="MINIO">MINIO</el-radio-button>
+          <el-radio-button value="HUAWEI_OBS">华为云OBS</el-radio-button>
+          <el-radio-button value="TENCENT_COS">腾讯云COS</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
       <!--      阿里云存储-->
-      <FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSEndPoint" label="节点" prop="aliyunOSSEndPoint">
-        <Input v-model="formValidate.aliyunOSSEndPoint"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSBucketName" label="储存空间" class="label-item" prop="aliyunOSSBucketName">
-        <Input v-model="formValidate.aliyunOSSBucketName"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSAccessKeyId" label="密钥id" prop="aliyunOSSAccessKeyId">
-        <Input v-model="formValidate.aliyunOSSAccessKeyId"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSAccessKeySecret" label="密钥" prop="aliyunOSSAccessKeySecret">
-        <Input v-model="formValidate.aliyunOSSAccessKeySecret"/>
-      </FormItem>
+      <el-form-item v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSEndPoint" label="节点" prop="aliyunOSSEndPoint">
+        <el-input v-model="formValidate.aliyunOSSEndPoint"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSBucketName" label="储存空间" class="label-item" prop="aliyunOSSBucketName">
+        <el-input v-model="formValidate.aliyunOSSBucketName"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSAccessKeyId" label="密钥id" prop="aliyunOSSAccessKeyId">
+        <el-input v-model="formValidate.aliyunOSSAccessKeyId"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSAccessKeySecret" label="密钥" prop="aliyunOSSAccessKeySecret">
+        <el-input v-model="formValidate.aliyunOSSAccessKeySecret"/>
+      </el-form-item>
 
 
       <!--      MINIO存储-->
 
-      <FormItem v-if="formValidate.type==='MINIO'" label="访问地址" key="m_frontUrl" prop="m_frontUrl">
-        <Input v-model="formValidate.m_frontUrl"/>
+      <el-form-item v-if="formValidate.type==='MINIO'" label="访问地址" key="m_frontUrl" prop="m_frontUrl">
+        <el-input v-model="formValidate.m_frontUrl"/>
         <span class="desc">配置MINIO nginx前端访问转发地址，一般为完整域名，例如：https://minio.pickmall.cn</span>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='MINIO'" label="endpoint" key="m_endpoint" prop="m_endpoint">
-        <Input v-model="formValidate.m_endpoint"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='MINIO'" label="accessKey" key="m_accessKey" class="label-item" prop="m_accessKey">
-        <Input v-model="formValidate.m_accessKey"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='MINIO'" label="secretKey" key="m_secretKey" prop="m_secretKey">
-        <Input v-model="formValidate.m_secretKey"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='MINIO'" label="bucketName" key="m_bucketName" prop="m_bucketName">
-        <Input v-model="formValidate.m_bucketName"/>
-      </FormItem>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='MINIO'" label="endpoint" key="m_endpoint" prop="m_endpoint">
+        <el-input v-model="formValidate.m_endpoint"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='MINIO'" label="accessKey" key="m_accessKey" class="label-item" prop="m_accessKey">
+        <el-input v-model="formValidate.m_accessKey"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='MINIO'" label="secretKey" key="m_secretKey" prop="m_secretKey">
+        <el-input v-model="formValidate.m_secretKey"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='MINIO'" label="bucketName" key="m_bucketName" prop="m_bucketName">
+        <el-input v-model="formValidate.m_bucketName"/>
+      </el-form-item>
 
 
       <!--      华为云存储-->
-      <FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="发起者的Access Key" key="huaweicloudOBSAccessKey" prop="huaweicloudOBSAccessKey">
-        <Input v-model="formValidate.huaweicloudOBSAccessKey"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="密钥" class="label-item" key="huaweicloudOBSSecretKey" prop="huaweicloudOBSSecretKey">
-        <Input v-model="formValidate.huaweicloudOBSSecretKey"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="节点" key="huaweicloudOBSEndPoint" prop="huaweicloudOBSEndPoint">
-        <Input v-model="formValidate.huaweicloudOBSEndPoint"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="桶" key="huaweicloudOBSBucketName" prop="huaweicloudOBSBucketName">
-        <Input v-model="formValidate.huaweicloudOBSBucketName"/>
-      </FormItem>
+      <el-form-item v-if="formValidate.type==='HUAWEI_OBS'" label="发起者的Access Key" key="huaweicloudOBSAccessKey" prop="huaweicloudOBSAccessKey">
+        <el-input v-model="formValidate.huaweicloudOBSAccessKey"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='HUAWEI_OBS'" label="密钥" class="label-item" key="huaweicloudOBSSecretKey" prop="huaweicloudOBSSecretKey">
+        <el-input v-model="formValidate.huaweicloudOBSSecretKey"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='HUAWEI_OBS'" label="节点" key="huaweicloudOBSEndPoint" prop="huaweicloudOBSEndPoint">
+        <el-input v-model="formValidate.huaweicloudOBSEndPoint"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='HUAWEI_OBS'" label="桶" key="huaweicloudOBSBucketName" prop="huaweicloudOBSBucketName">
+        <el-input v-model="formValidate.huaweicloudOBSBucketName"/>
+      </el-form-item>
 
       <!--      腾讯云存储-->
-      <FormItem v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretId" key="tencentCOSSecretId" prop="tencentCOSSecretId">
-        <Input v-model="formValidate.tencentCOSSecretId"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretKey" key="tencentCOSSecretKey" class="label-item" prop="tencentCOSSecretKey">
-        <Input v-model="formValidate.tencentCOSSecretKey"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='TENCENT_COS'" label="bucket的地域" key="tencentCOSRegion" prop="tencentCOSRegion">
-        <Input v-model="formValidate.tencentCOSRegion"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='TENCENT_COS'" label="bucket" key="tencentCOSBucket" prop="tencentCOSBucket">
-        <Input v-model="formValidate.tencentCOSBucket"/>
-      </FormItem>
+      <el-form-item v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretId" key="tencentCOSSecretId" prop="tencentCOSSecretId">
+        <el-input v-model="formValidate.tencentCOSSecretId"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretKey" key="tencentCOSSecretKey" class="label-item" prop="tencentCOSSecretKey">
+        <el-input v-model="formValidate.tencentCOSSecretKey"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='TENCENT_COS'" label="bucket的地域" key="tencentCOSRegion" prop="tencentCOSRegion">
+        <el-input v-model="formValidate.tencentCOSRegion"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='TENCENT_COS'" label="bucket" key="tencentCOSBucket" prop="tencentCOSBucket">
+        <el-input v-model="formValidate.tencentCOSBucket"/>
+      </el-form-item>
 
 
       <div class="label-btns">
-        <Button type="primary" @click="submit('formValidate')">保存</Button>
+        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
 
       </div>
-    </Form>
+    </el-form>
   </div>
 </template>
 <script>
@@ -139,7 +139,7 @@ export default {
     init() {
       this.result = JSON.parse(this.res);
 
-      this.$set(this, "formValidate", {...this.result});
+      this.formValidate = { ...this.result };
       Object.keys(this.formValidate).forEach((item) => {
         this.ruleValidate[item] = [
           {
@@ -161,12 +161,12 @@ export default {
   display: flex;
 }
 
-::v-deep .ivu-input {
+:deep(.el-input){
   width: 300px !important;
   margin: 0 10px;
 }
 
-.ivu-input-wrapper {
+.el-input {
   width: 300px;
   margin-right: 10px;
 }
diff --git a/manager/src/views/sys/setting-manage/setting/POINT_SETTING.vue b/manager/src/views/sys/setting-manage/setting/POINT_SETTING.vue
index e2e42c5d..f4492cca 100644
--- a/manager/src/views/sys/setting-manage/setting/POINT_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/POINT_SETTING.vue
@@ -1,79 +1,65 @@
 <template>
   <div class="layout">
-    <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
-      <FormItem label="消费1元赠送积分" prop="consumer">
-        <Input type="number" v-model="formValidate.consumer">
-          <span slot="append">积分</span>
-        </Input>
+    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+      <el-form-item label="消费1元赠送积分" prop="consumer">
+        <el-input type="number" v-model="formValidate.consumer">
+          <template #append>积分</template>
+        </el-input>
+      </el-form-item>
 
-      </FormItem>
-      <!-- <FormItem label="积分抵扣付款" prop="money">
-        <Input type="number" v-model="formValidate.money">
-          <span slot="prepend">积分</span>
-          <span slot="append"> = 1 人民币</span>
-        </Input>
+      <el-form-item label="注册账号" prop="register">
+        <el-input type="number" v-model="formValidate.register">
+          <template #append>积分</template>
+        </el-input>
+      </el-form-item>
 
-      </FormItem> -->
+      <el-form-item label="每日签到积分" prop="signIn">
+        <el-input type="number" v-model="formValidate.signIn">
+          <template #append>积分</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="订单评价赠送积分" prop="comment">
+        <el-input type="number" v-model="formValidate.comment">
+          <template #append>积分</template>
+        </el-input>
+      </el-form-item>
 
-      <FormItem label="注册账号" prop="register">
-        <Input type="number" v-model="formValidate.register">
-          <span slot="append">积分</span>
-        </Input>
-      </FormItem>
-      <!-- <FormItem label="登录" class="label-item" prop="login">
-        <Input type="number" v-model="formValidate.login">
-
-        <span slot="append">积分</span>
-        </Input>
-
-      </FormItem> -->
-
-      <FormItem label="每日签到积分" prop="signIn">
-        <Input type="number" v-model="formValidate.signIn">
-          <span slot="append">积分</span>
-        </Input>
-
-      </FormItem>
-      <FormItem label="订单评价赠送积分" prop="comment">
-        <Input type="number" v-model="formValidate.comment">
-          <span slot="append">积分</span>
-        </Input>
-
-      </FormItem>
-
-      <FormItem class="label-item" v-for="(point,index) in  formValidate.pointSettingItems" :key="index"
-                :label="'签到设置'+(index+1)">
+      <el-form-item
+        class="label-item"
+        v-for="(point, index) in formValidate.pointSettingItems"
+        :key="index"
+        :label="'签到设置' + (index + 1)"
+      >
         <div class="label-item">
-
-          <InputNumber :min="1" v-model="point.day"></InputNumber>
-
-          <InputNumber :min="0" v-model="point.point"></InputNumber>
-
-          <Button ghost type="error" @click="delSign(point,index)">删除</Button>
-          <span class="ml_10">签到<span class="theme_color">{{ point.day }}</span>天，赠送<span
-            class="theme_color">{{ point.point }}</span>积分</span>
+          <el-input-number :min="1" v-model="point.day" />
+          <el-input-number :min="0" v-model="point.point" />
+          <el-button plain type="danger" @click="delSign(point, index)">删除</el-button>
+          <span class="ml_10"
+            >签到<span class="theme_color">{{ point.day }}</span
+            >天，赠送<span class="theme_color">{{ point.point }}</span
+            >积分</span
+          >
         </div>
-
-      </FormItem>
-      <FormItem label="操作：">
-        <Button @click="addSign">新增签到</Button>
-      </FormItem>
+      </el-form-item>
+      <el-form-item label="操作：">
+        <el-button @click="addSign">新增签到</el-button>
+      </el-form-item>
       <div class="label-btns">
-        <Button type="primary" @click="submit('formValidate')">保存</Button>
+        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
       </div>
-    </Form>
+    </el-form>
   </div>
 </template>
 
 <script>
-import {setSetting} from "@/api/index";
-import {handleSubmit} from "./validate";
+import { setSetting } from "@/api/index";
+import { handleSubmit } from "./validate";
 
 export default {
   data() {
     return {
-      ruleValidate: {}, // 验证规则
-      formValidate: {}, // 表单数据
+      ruleValidate: {},
+      formValidate: {},
       result: "",
     };
   },
@@ -82,14 +68,12 @@ export default {
     this.init();
   },
   methods: {
-    // 保存
     submit(name) {
-      let that = this;
+      const that = this;
       if (handleSubmit(that, name)) {
         this.setupSetting();
       }
     },
-    // 保存设置
     setupSetting() {
       setSetting(this.type, this.formValidate).then((res) => {
         if (res.success) {
@@ -114,7 +98,6 @@ export default {
         day: this.formValidate.pointSettingItems.length,
       });
     },
-    // 实例化数据
     init() {
       this.result = JSON.parse(this.res);
       Object.keys(this.result).map((item) => {
@@ -124,7 +107,7 @@ export default {
         this.result[item] += "";
       });
 
-      this.$set(this, "formValidate", {...this.result});
+      this.formValidate = { ...this.result };
 
       Object.keys(this.formValidate).forEach((item) => {
         this.ruleValidate[item] = [
@@ -156,33 +139,33 @@ export default {
 .label-item {
   display: flex;
 
-  > .ivu-input-number {
+  > .el-input-number {
     width: 100px;
     margin-right: 5px;
   }
 
-  > .ivu-input-number:nth-last-of-type(1) {
+  > .el-input-number:nth-last-of-type(1) {
     width: 150px;
     margin-right: 5px;
   }
 
-  > .ivu-input {
+  > .el-input {
     width: 100px;
     margin: 0 10px;
   }
 }
 
-::v-deep .ivu-input {
+:deep(.el-input){
   width: 70px !important;
 }
 
-.ivu-input-wrapper {
+.el-input {
   width: 70px;
   margin-right: 10px;
 }
 
 .label-btns {
-  ::v-deep .ivu-btn {
+  :deep(.el-button){
     margin-right: 10px;
   }
 }
diff --git a/manager/src/views/sys/setting-manage/setting/SMS_SETTING.vue b/manager/src/views/sys/setting-manage/setting/SMS_SETTING.vue
index b40099c4..b6677c5c 100644
--- a/manager/src/views/sys/setting-manage/setting/SMS_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/SMS_SETTING.vue
@@ -1,80 +1,80 @@
 <template>
   <div class="layout">
-    <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
-      <FormItem label="是否测试模式" prop="isTestModel">
-        <RadioGroup type="button" button-style="solid" v-model="formValidate.isTestModel">
-          <Radio label="true">开启</Radio>
-          <Radio label="false">关闭</Radio>
-        </RadioGroup>
+    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+      <el-form-item label="是否测试模式" prop="isTestModel">
+        <el-radio-group v-model="formValidate.isTestModel">
+          <el-radio-button value="true">开启</el-radio-button>
+          <el-radio-button value="false">关闭</el-radio-button>
+        </el-radio-group>
         <span class="desc">测试模式则不实际发送短信，短信验证码为：111111</span>
-      </FormItem>
-      <FormItem label="登录短信模板CODE" prop="loginTemplateCode">
-        <Input v-model="formValidate.loginTemplateCode"/>
-      </FormItem>
-      <FormItem label="注册短信模板CODE" prop="registerTemplateCode">
-        <Input v-model="formValidate.registerTemplateCode"/>
-      </FormItem>
-      <FormItem label="找回密码短信模板CODE" prop="findPasswordTemplateCode">
-        <Input v-model="formValidate.findPasswordTemplateCode"/>
-      </FormItem>
-      <FormItem label="设置密码短信模板CODE" prop="walletPasswordTemplateCode">
-        <Input v-model="formValidate.walletPasswordTemplateCode"/>
-      </FormItem>
-      <FormItem label="支付密码短信模板CODE" prop="payPasswordTemplateCode">
-        <Input v-model="formValidate.payPasswordTemplateCode"/>
-      </FormItem>
+      </el-form-item>
+      <el-form-item label="登录短信模板CODE" prop="loginTemplateCode">
+        <el-input v-model="formValidate.loginTemplateCode"/>
+      </el-form-item>
+      <el-form-item label="注册短信模板CODE" prop="registerTemplateCode">
+        <el-input v-model="formValidate.registerTemplateCode"/>
+      </el-form-item>
+      <el-form-item label="找回密码短信模板CODE" prop="findPasswordTemplateCode">
+        <el-input v-model="formValidate.findPasswordTemplateCode"/>
+      </el-form-item>
+      <el-form-item label="设置密码短信模板CODE" prop="walletPasswordTemplateCode">
+        <el-input v-model="formValidate.walletPasswordTemplateCode"/>
+      </el-form-item>
+      <el-form-item label="支付密码短信模板CODE" prop="payPasswordTemplateCode">
+        <el-input v-model="formValidate.payPasswordTemplateCode"/>
+      </el-form-item>
 
-      <FormItem label="平台" prop="endPoint">
-        <RadioGroup v-model="formValidate.type" type="button">
-          <Radio label="ALI">阿里云</Radio>
-          <Radio label="HUAWEI">华为云</Radio>
-          <Radio label="TENCENT">腾讯云</Radio>
-        </RadioGroup>
-      </FormItem>
+      <el-form-item label="平台" prop="endPoint">
+        <el-radio-group v-model="formValidate.type">
+          <el-radio-button value="ALI">阿里云</el-radio-button>
+          <el-radio-button value="HUAWEI">华为云</el-radio-button>
+          <el-radio-button value="TENCENT">腾讯云</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
       <!--      阿里云-->
-      <FormItem v-if="formValidate.type==='ALI'" label="accessKeyId" prop="accessKeyId">
-        <Input v-model="formValidate.accessKeyId"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='ALI'" label="accessSecret" prop="accessSecret">
-        <Input v-model="formValidate.accessSecret"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='ALI'" label="短信签名" prop="signName">
-        <Input v-model="formValidate.signName"/>
-      </FormItem>
+      <el-form-item v-if="formValidate.type==='ALI'" label="accessKeyId" prop="accessKeyId">
+        <el-input v-model="formValidate.accessKeyId"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='ALI'" label="accessSecret" prop="accessSecret">
+        <el-input v-model="formValidate.accessSecret"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='ALI'" label="短信签名" prop="signName">
+        <el-input v-model="formValidate.signName"/>
+      </el-form-item>
 
       <!--      华为云-->
-      <FormItem v-if="formValidate.type==='HUAWEI'" label="APP_Key" prop="huaweiAppKey">
-        <Input v-model="formValidate.huaweiAppKey"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='HUAWEI'" label="APP_Secret" prop="huaweiAppSecret">
-        <Input v-model="formValidate.huaweiAppSecret"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='HUAWEI'" label="短信签名通道号" prop="huaweiSender">
-        <Input v-model="formValidate.huaweiSender"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='HUAWEI'" label="短信签名" prop="huaweiSignature">
-        <Input v-model="formValidate.huaweiSignature"/>
-      </FormItem>
+      <el-form-item v-if="formValidate.type==='HUAWEI'" label="APP_Key" prop="huaweiAppKey">
+        <el-input v-model="formValidate.huaweiAppKey"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='HUAWEI'" label="APP_Secret" prop="huaweiAppSecret">
+        <el-input v-model="formValidate.huaweiAppSecret"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='HUAWEI'" label="短信签名通道号" prop="huaweiSender">
+        <el-input v-model="formValidate.huaweiSender"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='HUAWEI'" label="短信签名" prop="huaweiSignature">
+        <el-input v-model="formValidate.huaweiSignature"/>
+      </el-form-item>
 
       <!--      腾讯云-->
-      <FormItem v-if="formValidate.type==='TENCENT'" label="用户的 SecretId" prop="tencentSecretId">
-        <Input v-model="formValidate.tencentSecretId"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='TENCENT'" label="用户的 SecretKey" prop="tencentSecretKey">
-        <Input v-model="formValidate.tencentSecretKey"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='TENCENT'" label="短信应用ID" prop="tencentSdkAppId">
-        <Input v-model="formValidate.tencentSdkAppId"/>
-      </FormItem>
-      <FormItem v-if="formValidate.type==='TENCENT'" label="短信签名" prop="tencentSignName">
-        <Input v-model="formValidate.tencentSignName"/>
-      </FormItem>
+      <el-form-item v-if="formValidate.type==='TENCENT'" label="用户的 SecretId" prop="tencentSecretId">
+        <el-input v-model="formValidate.tencentSecretId"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='TENCENT'" label="用户的 SecretKey" prop="tencentSecretKey">
+        <el-input v-model="formValidate.tencentSecretKey"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='TENCENT'" label="短信应用ID" prop="tencentSdkAppId">
+        <el-input v-model="formValidate.tencentSdkAppId"/>
+      </el-form-item>
+      <el-form-item v-if="formValidate.type==='TENCENT'" label="短信签名" prop="tencentSignName">
+        <el-input v-model="formValidate.tencentSignName"/>
+      </el-form-item>
 
       <div class="label-btns">
-        <Button type="primary" @click="submit('formValidate')">保存</Button>
+        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
 
       </div>
-    </Form>
+    </el-form>
   </div>
 </template>
 <script>
@@ -138,7 +138,7 @@ export default {
         this.result[item] += "";
       });
 
-      this.$set(this, "formValidate", {...this.result});
+      this.formValidate = { ...this.result };
       Object.keys(this.formValidate).forEach((item) => {
         this.ruleValidate[item] = [
           {
@@ -160,12 +160,12 @@ export default {
   display: flex;
 }
 
-::v-deep .ivu-input {
+:deep(.el-input){
   width: 300px !important;
   margin: 0 10px;
 }
 
-.ivu-input-wrapper {
+.el-input {
   width: 300px;
   margin-right: 10px;
 }
diff --git a/manager/src/views/sys/setting-manage/setting/WITHDRAWAL_SETTING.vue b/manager/src/views/sys/setting-manage/setting/WITHDRAWAL_SETTING.vue
index e674292c..7206b01f 100644
--- a/manager/src/views/sys/setting-manage/setting/WITHDRAWAL_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/WITHDRAWAL_SETTING.vue
@@ -1,32 +1,29 @@
 <template>
   <div class="layout">
+    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+      <el-form-item label="提现审核是否开启">
+        <el-switch v-model="formValidate.apply" active-text="开" inactive-text="关" />
+      </el-form-item>
 
-    <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
-      <FormItem label="提现审核是否开启">
-        <i-switch v-model="formValidate.apply" style="margin-top:7px;"><span slot="open">开</span>
-          <span slot="close">关</span>
-        </i-switch>
-      </FormItem>
+      <el-form-item label="最低提现金额" prop="minPrice">
+        ￥<el-input class="label-appkey" v-model="formValidate.minPrice" />
+      </el-form-item>
 
-      <FormItem  label="最低提现金额" prop="minPrice">
-        ￥<Input class="label-appkey" v-model="formValidate.minPrice" />
-      </FormItem>
+      <el-form-item label="提现方式" prop="type">
+        <el-radio-group v-model="formValidate.type">
+          <el-radio value="WECHAT">微信</el-radio>
+          <el-radio value="ALI">支付宝</el-radio>
+        </el-radio-group>
+      </el-form-item>
 
-      <FormItem label="提现方式" prop="type">
-        <RadioGroup v-model="formValidate.type">
-          <Radio label="WECHAT">微信</Radio>
-          <Radio label="ALI">支付宝</Radio>
-        </RadioGroup>
-      </FormItem>
-
-      <FormItem label="微信提现应用ID" prop="wechatAppId">
-        <Input class="label-appkey" v-model="formValidate.wechatAppId" />
-      </FormItem>
+      <el-form-item label="微信提现应用ID" prop="wechatAppId">
+        <el-input class="label-appkey" v-model="formValidate.wechatAppId" />
+      </el-form-item>
 
       <div class="label-btns">
-        <Button type="primary" @click="submit('formValidate')">保存</Button>
+        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
       </div>
-    </Form>
+    </el-form>
   </div>
 </template>
 <script>
@@ -35,11 +32,10 @@ import { handleSubmit } from "./validate";
 export default {
   data() {
     return {
-      result:"",
-      ruleValidate: {}, // 验证规则
-      formValidate: {},// 表单数据
-
-      switchTitle: "提现审核是否开启", // 切换title
+      result: "",
+      ruleValidate: {},
+      formValidate: {},
+      switchTitle: "提现审核是否开启",
     };
   },
   created() {
@@ -47,16 +43,13 @@ export default {
   },
   props: ["res", "type"],
   methods: {
-    // 保存
     submit(name) {
-      let that = this;
-       if( handleSubmit(that, name )){
-        this.setupSetting()
+      const that = this;
+      if (handleSubmit(that, name)) {
+        this.setupSetting();
       }
     },
-    // 保存设置
     setupSetting() {
-
       setSetting(this.type, this.formValidate).then((res) => {
         if (res.success) {
           this.$Message.success("保存成功!");
@@ -65,13 +58,12 @@ export default {
         }
       });
     },
-    // 实例化数据
     init() {
       this.result = JSON.parse(this.res);
       Object.keys(this.result).map((item) => {
         this.result[item] += "";
       });
-      this.$set(this, "formValidate", { ...this.result });
+      this.formValidate = { ...this.result };
       Object.keys(this.formValidate).forEach((item) => {
         this.ruleValidate[item] = [
           {
@@ -98,7 +90,7 @@ export default {
 
 <style lang="scss" scoped>
 @import "./style.scss";
-::v-deep .ivu-form-item-content{
+:deep(.el-form-item__content){
   align-items: center;
   padding-bottom: 5px;
 }
diff --git a/manager/src/views/sys/setting-manage/setting/style.scss b/manager/src/views/sys/setting-manage/setting/style.scss
index 06e3f2bd..03eebf24 100644
--- a/manager/src/views/sys/setting-manage/setting/style.scss
+++ b/manager/src/views/sys/setting-manage/setting/style.scss
@@ -1,4 +1,4 @@
-::v-deep .ivu-input{
+:deep(.el-input){
   width: 200px !important;
 }
 
@@ -15,16 +15,16 @@
   margin-left: 10px;
 }
 
-::v-deep .label-btns > .ivu-btn{
+:deep(.label-btns > .el-button){
   margin-right: 10px;
 }
 
-::v-deep .es-buttons .ivu-btn{
+:deep(.es-buttons .el-button){
   margin-right: 10px;
   margin-bottom: 10px;
 }
 
-.ivu-form-item{
+.el-form-item{
   padding: 10px 0;
 }
 
@@ -34,12 +34,12 @@
   font-size: 12px;
 }
 
-.ivu-input-wrapper {
+.el-input {
   width: 150px;
   margin-right: 10px;
 }
 
-::v-deep .ivu-form-item-content {
+:deep(.el-form-item__content){
   margin-left: 0 !important;
   display: flex;
 }
diff --git a/manager/src/views/sys/setting-manage/settingManage.vue b/manager/src/views/sys/setting-manage/settingManage.vue
index 2c5907f9..9195940a 100644
--- a/manager/src/views/sys/setting-manage/settingManage.vue
+++ b/manager/src/views/sys/setting-manage/settingManage.vue
@@ -1,16 +1,25 @@
 
 <template>
-  <Card v-if="show">
-    <Tabs v-model="selected" @on-click="clickTab">
-      <TabPane :label="tabItem.name" :name="tabItem.type" v-for="(tabItem, tabIndex) in tabWay" :key="tabIndex">
-        <component v-if="settingData" :res="settingData" :type="selected"
-                   :is="templateSetting[tabItem.type]"></component>
-      </TabPane>
-    </Tabs>
-  </Card>
+  <el-card v-if="show">
+    <el-tabs v-model="selected" @tab-change="clickTab">
+      <el-tab-pane
+        v-for="(tabItem, tabIndex) in tabWay"
+        :key="tabIndex"
+        :label="tabItem.name"
+        :name="tabItem.type"
+      >
+        <component
+          v-if="settingData"
+          :is="templateSetting[tabItem.type]"
+          :res="settingData"
+          :type="selected"
+        />
+      </el-tab-pane>
+    </el-tabs>
+  </el-card>
 </template>
 <script>
-import {getSetting} from "@/api/index.js";
+import { getSetting } from "@/api/index.js";
 import templateSetting from "./template";
 
 export default {
@@ -37,7 +46,7 @@ export default {
           name: "订单配置",
         },
         //积分设置
-        {type: "POINT_SETTING", name: "积分设置"},
+        { type: "POINT_SETTING", name: "积分设置" },
         {
           type: "WITHDRAWAL_SETTING",
           name: "提现设置",
@@ -65,19 +74,19 @@ export default {
       ],
       authLogin: [
         // 登录设置
-        {type: "CONNECT_SETTING", name: "登录设置"},
+        { type: "CONNECT_SETTING", name: "登录设置" },
         // 微信设置
-        {type: "WECHAT_CONNECT", name: "微信设置"},
+        { type: "WECHAT_CONNECT", name: "微信设置" },
         // QQ设置
-        {type: "QQ_CONNECT", name: "QQ设置"},
+        { type: "QQ_CONNECT", name: "QQ设置" },
       ],
       pay: [
         //支付宝支付设置
-        {type: "PAYMENT_SUPPORT", name: "支付开启/关闭"},
+        { type: "PAYMENT_SUPPORT", name: "支付开启/关闭" },
         //支付宝支付设置
-        {type: "ALIPAY_PAYMENT", name: "支付宝支付设置"},
+        { type: "ALIPAY_PAYMENT", name: "支付宝支付设置" },
         //微信支付设置
-        {type: "WECHAT_PAYMENT", name: "微信支付设置"},
+        { type: "WECHAT_PAYMENT", name: "微信支付设置" },
       ],
       tabWay: [], // tab数据
     };
diff --git a/manager/src/views/sys/setting-manage/smsSettingManage.vue b/manager/src/views/sys/setting-manage/smsSettingManage.vue
index b7081ccd..b5dfa85b 100644
--- a/manager/src/views/sys/setting-manage/smsSettingManage.vue
+++ b/manager/src/views/sys/setting-manage/smsSettingManage.vue
@@ -1,154 +1,141 @@
 
 <template>
-  <Card class="card">
-
+  <el-card class="card">
     <div class="cardBox">
       <div class="methodItem">
-        <img src="../../../assets/aliyun.png" height="172" width="440"/>
-        <h4>阿里云短信</h4></div>
+        <img src="../../../assets/aliyun.png" height="172" width="440" />
+        <h4>阿里云短信</h4>
+      </div>
       <div class="bar">
-        <div class="status" style="color: rgb(53, 189, 129);">已启用</div>
+        <div class="status" style="color: rgb(53, 189, 129)">已启用</div>
         <div><a class="links">编辑</a></div>
       </div>
     </div>
-    <!-- 阿里云的短信参数 -->
-    <Modal
-      :title="modalTitle"
-      v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
-    >
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="accessKeyId" prop="addressName">
-          <Input v-model="form.accessKeyId" clearable style="width: 100%"/>
-        </FormItem>
-        <FormItem label="accessSecret" prop="accessSecret">
-          <Input v-model="form.accessSecret" clearable style="width: 100%"/>
-        </FormItem>
-        <FormItem label="signName" prop="signName">
-          <Input v-model="form.signName" clearable style="width: 100%"/>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="saveSetting"
-        >提交
-        </Button
-        >
-      </div>
-    </Modal>
-
-  </Card>
+    <el-dialog v-model="modalVisible" :title="modalTitle" width="500px" :close-on-click-modal="false">
+      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+        <el-form-item label="accessKeyId" prop="addressName">
+          <el-input v-model="form.accessKeyId" clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="accessSecret" prop="accessSecret">
+          <el-input v-model="form.accessSecret" clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="signName" prop="signName">
+          <el-input v-model="form.signName" clearable style="width: 100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="saveSetting">提交</el-button>
+      </template>
+    </el-dialog>
+  </el-card>
 </template>
 <script>
-  import {getSetting, setSetting} from "@/api/index.js";
-  import template from "./template";
-  export default {
-    name: "smsSettingManage",
-    components: {
-      template
-    },
+import { getSetting, setSetting } from "@/api/index.js";
+import template from "./template";
+export default {
+  name: "smsSettingManage",
+  components: {
+    template,
+  },
 
-    data() {
-      return {
-        submitLoading: false, // 提交状态
-        template, // 模板
-        selected: "", // 已选数据
-        settingData: "", // 设置数据
-        modalTitle: '设置', // modal标题
-        modalVisible: false, // modal显隐
-        form: {}, // 表单数据
-      }
+  data() {
+    return {
+      submitLoading: false,
+      template,
+      selected: "",
+      settingData: "",
+      modalTitle: "设置",
+      modalVisible: false,
+      form: {},
+    };
+  },
+  methods: {
+    init() {
+      settingInfo("SMS_SETTING");
     },
-    methods: {
-      // 初始化数据
-      init() {
-        settingInfo("SMS_SETTING")
-      },
-      // 保存设置
-      saveSetting() {
-        setSetting("SMS_SETTING", this.form).then((res) => {
-          if (res.success) {
-            this.$Message.success("保存成功!");
-          } else {
-            this.$Message.error("保存失败!");
-          }
-          this.modalVisible = false
-        });
-      },
-      // 查看
-      settingInfo(v) {
-        alert()
-        this.selected = v
-        getSetting(v).then((res) => {
-          if (res.result) {
-            console.log(res)
-            this.modalVisible = true
-            this.form = res
-          }
-        });
-      }
+    saveSetting() {
+      setSetting("SMS_SETTING", this.form).then((res) => {
+        if (res.success) {
+          this.$Message.success("保存成功!");
+        } else {
+          this.$Message.error("保存失败!");
+        }
+        this.modalVisible = false;
+      });
     },
-    mounted() {
-      this.init();
+    settingInfo(v) {
+      alert();
+      this.selected = v;
+      getSetting(v).then((res) => {
+        if (res.result) {
+          console.log(res);
+          this.modalVisible = true;
+          this.form = res;
+        }
+      });
     },
-  };
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
 <style lang="scss">
-  .card {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-  }
-  .cardBox {
-    display: inline-block;
-    border-radius: 2px;
-    line-height: 1.5;
-    margin-right: 20px;
-    width: 300px;
-    border: 1px solid #eee;
-    padding: 10px;
-  }
+.card {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+}
+.cardBox {
+  display: inline-block;
+  border-radius: 2px;
+  line-height: 1.5;
+  margin-right: 20px;
+  width: 300px;
+  border: 1px solid #eee;
+  padding: 10px;
+}
 
-  .methodItem {
-    width: 100%;
-    border: 1px solid #f5f5f5;
-    text-align: center;
-    padding: 20px 0;
-  }
+.methodItem {
+  width: 100%;
+  border: 1px solid #f5f5f5;
+  text-align: center;
+  padding: 20px 0;
+}
 
-  methodItem img {
-    width: 220px;
-    height: 86px;
-  }
+methodItem img {
+  width: 220px;
+  height: 86px;
+}
 
-  methodItem h4 {
-    font-size: 14px;
-    color: #333;
-    margin-top: 5px;
-  }
+methodItem h4 {
+  font-size: 14px;
+  color: #333;
+  margin-top: 5px;
+}
 
-  .methodItem img {
-    width: 220px;
-    height: 86px;
-  }
+.methodItem img {
+  width: 220px;
+  height: 86px;
+}
 
-  .bar {
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    -webkit-align-items: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    padding: 10px 8px 0;
-  }
+.bar {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 10px 8px 0;
+}
 </style>
diff --git a/manager/src/views/sys/setting-manage/template.js b/manager/src/views/sys/setting-manage/template.js
index 9366f170..706737da 100644
--- a/manager/src/views/sys/setting-manage/template.js
+++ b/manager/src/views/sys/setting-manage/template.js
@@ -1,3 +1,4 @@
+import { markRaw } from "vue";
 import BASE_SETTING from "./setting/BASE_SETTING";
 import GOODS_SETTING from "./setting/GOODS_SETTING";
 import ORDER_SETTING from "./setting/ORDER_SETTING";
@@ -15,19 +16,19 @@ import QQ_CONNECT from "./authLogin/QQ_CONNECT";
 import CONNECT_SETTING from "./authLogin/CONNECT_SETTING";
 
 export default {
-  BASE_SETTING,
-  GOODS_SETTING,
-  ORDER_SETTING,
-  POINT_SETTING,
-  LOGISTICS_SETTING,
-  OSS_SETTING,
-  SMS_SETTING,
-  IM_SETTING,
-  WITHDRAWAL_SETTING,
-  PAYMENT_SUPPORT,
-  WECHAT_PAYMENT,
-  ALIPAY_PAYMENT,
-  WECHAT_CONNECT,
-  CONNECT_SETTING,
-  QQ_CONNECT
+  BASE_SETTING: markRaw(BASE_SETTING),
+  GOODS_SETTING: markRaw(GOODS_SETTING),
+  ORDER_SETTING: markRaw(ORDER_SETTING),
+  POINT_SETTING: markRaw(POINT_SETTING),
+  LOGISTICS_SETTING: markRaw(LOGISTICS_SETTING),
+  OSS_SETTING: markRaw(OSS_SETTING),
+  SMS_SETTING: markRaw(SMS_SETTING),
+  IM_SETTING: markRaw(IM_SETTING),
+  WITHDRAWAL_SETTING: markRaw(WITHDRAWAL_SETTING),
+  PAYMENT_SUPPORT: markRaw(PAYMENT_SUPPORT),
+  WECHAT_PAYMENT: markRaw(WECHAT_PAYMENT),
+  ALIPAY_PAYMENT: markRaw(ALIPAY_PAYMENT),
+  WECHAT_CONNECT: markRaw(WECHAT_CONNECT),
+  CONNECT_SETTING: markRaw(CONNECT_SETTING),
+  QQ_CONNECT: markRaw(QQ_CONNECT),
 };
diff --git a/manager/src/views/sys/slider/slider.vue b/manager/src/views/sys/slider/slider.vue
index 62970d12..10e1baa1 100644
--- a/manager/src/views/sys/slider/slider.vue
+++ b/manager/src/views/sys/slider/slider.vue
@@ -1,137 +1,128 @@
 <template>
   <div class="search">
-    <Card>
-      <Tabs value="RESOURCE" @on-click="handleClickType">
-        <TabPane label="图片源" name="RESOURCE">
-          <Row class="operation" style="margin-bottom: 10px">
-            <Button @click="add" type="primary">添加</Button>
-          </Row>
-          <Table
-            :loading="loading"
-            border
-            :columns="columns"
-            :data="data"
-            ref="table"
-            sortable="custom"
-          >
-            <!-- 商品栏目格式化 -->
-            <template slot="imageSlot" slot-scope="scope">
-              <div style="">
-                <img
-                  :src="scope.row.resource"
-                  style="height: 60px; margin-top: 1px; width: 90px"
-                />
-              </div>
+    <el-card>
+      <el-tabs v-model="searchForm.type" @tab-click="handleClickType">
+        <el-tab-pane label="图片源" name="RESOURCE">
+          <div class="operation" style="margin-bottom: 10px">
+            <el-button type="primary" @click="add">添加</el-button>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="滑块源" name="SLIDER">
+          <div class="operation" style="margin-bottom: 10px">
+            <el-button type="primary" @click="add">添加</el-button>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%"
+      >
+        <el-table-column prop="name" label="名称" min-width="80" />
+        <el-table-column label="图片" width="150" align="center">
+          <template #default="{ row }">
+            <img
+              v-if="row && row.resource"
+              :src="row.resource"
+              :style="{
+                height: '60px',
+                marginTop: '1px',
+                width: searchForm.type === 'RESOURCE' ? '90px' : '60px',
+              }"
+              alt=""
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="createBy" label="创建人" min-width="80" />
+        <el-table-column prop="createTime" label="创建时间" min-width="120" />
+        <el-table-column prop="updateBy" label="最后修改人" min-width="80" />
+        <el-table-column prop="updateTime" label="更新时间" min-width="120" />
+        <el-table-column label="操作" width="200" align="center">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="edit(row)">编辑</a>
+              <span class="op-split">|</span>|<span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
             </template>
-          </Table>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page
-              :current="searchForm.pageNumber"
-              :total="total"
-              :page-size="searchForm.pageSize"
-              @on-change="changePage"
-              @on-page-size-change="changePageSize"
-              :page-size-opts="[20, 50, 100]"
-              size="small"
-              show-total
-              show-elevator
-              show-sizer
-            >
-            </Page>
-          </Row>
-        </TabPane>
-        <TabPane label="滑块源" name="SLIDER">
-          <Row class="operation" style="margin-bottom: 10px">
-            <Button @click="add" type="primary" icon="md-add">添加</Button>
-          </Row>
-          <Table
-            :loading="loading"
-            border
-            :columns="columns"
-            :data="data"
-            ref="table"
-            sortable="custom"
-          >
-            <!-- 商品栏目格式化 -->
-            <template slot="imageSlot" slot-scope="scope">
-              <div style="">
-                <img
-                  :src="scope.row.resource"
-                  style="height: 60px; margin-top: 1px; width: 60px"
-                />
-              </div>
-            </template>
-          </Table>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page
-              :current="searchForm.pageNumber"
-              :total="total"
-              :page-size="searchForm.pageSize"
-              @on-change="changePage"
-              @on-page-size-change="changePageSize"
-              :page-size-opts="[20, 50, 100]"
-              size="small"
-              show-total
-              show-elevator
-              show-sizer
-            ></Page>
-          </Row>
-        </TabPane>
-      </Tabs>
-    </Card>
-    <Modal
-      :title="modalTitle"
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog
       v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
     >
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="名称" prop="name">
-          <Input
+      <el-form ref="form" :model="form" :rules="formValidate" label-width="100px">
+        <el-form-item label="名称" prop="name">
+          <el-input
             v-model="form.name"
             maxlength="20"
             clearable
             style="width: 100%"
           />
-        </FormItem>
-        <FormItem label="图片" prop="resource">
-          <upload-pic-input v-model="form.resource" style="width: 100%"></upload-pic-input>
-        </FormItem>
-        <FormItem label="类型" prop="type">
-          <radio-group v-model="form.type" type="button">
-            <radio label="RESOURCE">图片源</radio>
-            <radio label="SLIDER">滑块源</radio>
-          </radio-group>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-          >提交
-        </Button>
-      </div>
-    </Modal>
+        </el-form-item>
+        <el-form-item label="图片" prop="resource">
+          <upload-pic-input v-model="form.resource" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="类型" prop="type">
+          <el-radio-group v-model="form.type">
+            <el-radio-button value="RESOURCE">图片源</el-radio-button>
+            <el-radio-button value="SLIDER">滑块源</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
+          提交
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
+
 <script>
 import * as API_Setting from "@/api/setting";
 import uploadPicInput from "@/components/lili/upload-pic-input";
+
+const defaultForm = () => ({
+  name: "",
+  resource: "",
+  type: "RESOURCE",
+});
+
 export default {
   components: {
-    uploadPicInput
+    uploadPicInput,
   },
   data() {
     return {
-      modalVisible: false, //添加验证码源弹出框
-      modalTitle: "", //添加验证码源弹出框标题
-      loading: true, // 表单加载状态
-      modalType: 0, // 添加或编辑标识
-      submitLoading: false, // 添加或编辑提交状态
-      form: {
-        name: "",
-        resource: "",
-        type: "RESOURCE",
-      }, //添加编辑表单
+      modalVisible: false,
+      modalTitle: "",
+      loading: true,
+      modalType: 0,
+      submitLoading: false,
+      form: defaultForm(),
       formValidate: {
         name: [
           {
@@ -149,127 +140,30 @@ export default {
         ],
       },
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
         type: "RESOURCE",
       },
-      columns: [
-        {
-          title: "名称",
-          key: "name",
-          minWidth: 80,
-        },
-        {
-          title: "图片",
-          key: "resource",
-          width: 150,
-          slot: "imageSlot",
-        },
-        {
-          title: "创建人",
-          key: "createBy",
-          minWidth: 80,
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          minWidth: 120,
-        },
-        {
-          title: "最后修改人",
-          key: "updateBy",
-          minWidth: 80,
-        },
-        {
-          title: "更新时间",
-          key: "updateTime",
-          minWidth: 120,
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 200,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px",
-                  },
-                  on: {
-                    click: () => {
-                      this.edit(params.row);
-                    },
-                  },
-                },
-                "编辑"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, //条数
+      data: [],
+      total: 0,
     };
   },
-
   methods: {
-    // 分页 改变页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getDataList();
-      this.clearSelectAll();
     },
-    // 分页 改变页数
-    changePageSize(v) {
+    changePageSize() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
       this.getDataList();
     },
-    //切换tab
-    handleClickType(v) {
-      this.searchForm.pageNumber = 1; // 当前页数
-      this.searchForm.pageSize = 20; // 页面大小
-      //图片源
-      if (v == "RESOURCE") {
-        this.searchForm.type = "RESOURCE";
-      }
-      //滑块源
-      if (v == "SLIDER") {
-        this.searchForm.type = "SLIDER";
-      }
+    handleClickType(tab) {
+      this.searchForm.type = tab.paneName;
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    //获取验证码源数据
     getDataList() {
       this.loading = true;
       API_Setting.verificationPage(this.searchForm).then((res) => {
@@ -279,71 +173,62 @@ export default {
           this.total = res.result.total;
         }
       });
-      this.loading = false;
     },
-    //添加验证码源
     add() {
-      this.$refs.form.resetFields()
+      this.form = defaultForm();
       this.form.type = this.searchForm.type;
-      this.modalVisible = true;
       this.modalType = 0;
       this.modalTitle = "添加验证码源";
+      this.modalVisible = true;
+      this.$nextTick(() => {
+        this.$refs.form?.resetFields();
+      });
     },
-    //修改验证码源
     edit(v) {
-      this.form.name = v.name;
-      this.form.id = v.id;
-      this.form.resource = v.resource;
-      this.form.type = v.type;
-
+      this.form = {
+        id: v.id,
+        name: v.name,
+        resource: v.resource,
+        type: v.type,
+      };
       this.modalType = 1;
       this.modalVisible = true;
       this.modalTitle = "修改验证码源";
     },
-    //提交表单
     handleSubmit() {
       this.form.type = this.searchForm.type;
       this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          if (this.modalType == 0) {
-            // 添加
-            delete this.form.id;
-            API_Setting.addVerification(this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("添加成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
-          } else {
-            // 编辑
-            API_Setting.editVerification(this.form.id, this.form).then(
-              (res) => {
-                this.submitLoading = false;
-                if (res.success) {
-                  this.$Message.success("修改成功");
-                  this.getDataList();
-                  this.modalVisible = false;
-                }
-              }
-            );
-          }
+        if (!valid) return;
+        this.submitLoading = true;
+        if (this.modalType === 0) {
+          const payload = { ...this.form };
+          delete payload.id;
+          API_Setting.addVerification(payload).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("添加成功");
+              this.getDataList();
+              this.modalVisible = false;
+            }
+          });
+        } else {
+          API_Setting.editVerification(this.form.id, this.form).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("修改成功");
+              this.getDataList();
+              this.modalVisible = false;
+            }
+          });
         }
       });
     },
-    //删除验证码源
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
-        // 记得确认修改此处
         content: "确认要删除此验证码源?",
-        loading: true,
         onOk: () => {
-          // 删除
-          API_Setting.delVerification(v.id).then((res) => {
-            this.$Modal.remove();
+          return API_Setting.delVerification(v.id).then((res) => {
             if (res.success) {
               this.$Message.success("验证码源已删除");
               this.getDataList();
@@ -358,3 +243,14 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.mt_10 {
+  margin-top: 10px;
+}
+</style>
diff --git a/manager/src/views/sys/user-manage/userManage.vue b/manager/src/views/sys/user-manage/userManage.vue
index b49b9d8c..c87b28f0 100644
--- a/manager/src/views/sys/user-manage/userManage.vue
+++ b/manager/src/views/sys/user-manage/userManage.vue
@@ -1,105 +1,136 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="用户名">
-          <Input
-            type="text"
+    <el-card>
+      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form">
+        <el-form-item label="用户名">
+          <el-input
             v-model="searchForm.username"
             placeholder="请输入用户名"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="联系方式">
-          <Input
-            type="text"
+        </el-form-item>
+        <el-form-item label="联系方式">
+          <el-input
             v-model="searchForm.mobile"
             placeholder="请输入联系方式"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="部门">
-          <department-choose @on-change="handleSelectDep" style="width: 240px;" ref="dep"></department-choose>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-      </Form>
-      </Card>
-    <Card>
-      <Row class="operation padding-row">
-        <Button @click="add" type="primary">添加</Button>
-        <Button @click="delAll">批量删除</Button>
-        <Button @click="resetPass">重置密码</Button>
-      </Row>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        sortable="custom"
-        @on-sort-change="changeSort"
-        @on-selection-change="showSelect"
-        ref="table"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
-          :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20,50,100]"
-          size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+        </el-form-item>
+        <el-form-item label="部门">
+          <department-choose @on-change="handleSelectDep" style="width: 240px" ref="dep" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-    <Modal
-      :title="modalTitle"
-      v-model="userModalVisible"
-      :mask-closable="false"
-      :width="500"
-      :styles="{top: '30px'}"
-    >
-      <Form ref="form" :model="form" :label-width="70" :rules="formValidate">
-        <FormItem label="用户名" prop="username">
-          <Input v-model="form.username" autocomplete="off"/>
-        </FormItem>
-        <FormItem label="昵称" prop="username">
-          <Input v-model="form.nickName" autocomplete="off"/>
-        </FormItem>
-        <FormItem label="密码" prop="password" v-if="modalType==0" :error="errorPass">
-          <Input type="password" password v-model="form.password" autocomplete="off"/>
-        </FormItem>
-        <FormItem label="邮箱" prop="email">
-          <Input v-model="form.email"/>
-        </FormItem>
-        <FormItem label="手机号" prop="mobile">
-          <Input v-model="form.mobile"/>
-        </FormItem>
-        <Form-item label="头像" prop="avatar">
-          <upload-pic-input v-model="form.avatar"></upload-pic-input>
-        </Form-item>
-        <Form-item label="所属部门">
-          <department-tree-choose @on-change="handleSelectDepTree" ref="depTree"></department-tree-choose>
-        </Form-item>
-        <FormItem label="角色" prop="roles">
-          <Select v-model="form.roles" multiple>
-            <Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
-
-            </Option>
-          </Select>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="userModalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitUser">提交</Button>
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="add">添加</el-button>
+        <el-button @click="delAll">批量删除</el-button>
+        <el-button @click="resetPass">重置密码</el-button>
       </div>
-    </Modal>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%"
+        row-key="id"
+        @sort-change="changeSort"
+        @selection-change="showSelect"
+      >
+        <el-table-column type="selection" width="60" align="center" fixed="left" />
+        <el-table-column prop="username" label="用户名" min-width="120" sortable="custom" fixed="left" />
+        <el-table-column label="头像" width="80" align="center">
+          <template #default="{ row }">
+            <el-avatar v-if="row" :src="row.avatar" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="mobile" label="手机" width="125" />
+        <el-table-column prop="email" label="邮箱" min-width="180" sortable="custom" />
+        <el-table-column label="状态" width="110" align="center">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.status == true" type="success">启用</el-tag>
+              <el-tag v-else-if="row.status == false" type="danger">禁用</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" sortable="custom" width="180" />
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row" class="ops">
+              <a class="link-text" @click="edit(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" v-if="row.status == true" @click="disable(row)">禁用</a>
+              <a class="link-text" v-else @click="enable(row)">启用</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog
+      v-model="userModalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      top="30px"
+      destroy-on-close
+    >
+      <el-form ref="form" :model="form" label-width="70px" :rules="formValidate">
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="form.username" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="昵称" prop="username">
+          <el-input v-model="form.nickName" autocomplete="off" />
+        </el-form-item>
+        <el-form-item v-if="modalType == 0" label="密码" prop="password" :error="errorPass">
+          <el-input v-model="form.password" type="password" show-password autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="form.email" />
+        </el-form-item>
+        <el-form-item label="手机号" prop="mobile">
+          <el-input v-model="form.mobile" />
+        </el-form-item>
+        <el-form-item label="头像" prop="avatar">
+          <upload-pic-input v-model="form.avatar" />
+        </el-form-item>
+        <el-form-item label="所属部门">
+          <department-tree-choose @on-change="handleSelectDepTree" ref="depTree" />
+        </el-form-item>
+        <el-form-item label="角色" prop="roles">
+          <el-select v-model="form.roles" multiple style="width: 100%">
+            <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="userModalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitUser">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -111,9 +142,9 @@ import {
   editOtherUser,
   enableUser,
   deleteUser,
-  resetPassword
+  resetPassword,
 } from "@/api/index";
-import {validateMobile} from "@/libs/validate";
+import { validateMobile } from "@/libs/validate";
 import departmentChoose from "@/components/lili/department-choose";
 import departmentTreeChoose from "@/components/lili/department-tree-choose";
 import uploadPicInput from "@/components/lili/upload-pic-input";
@@ -127,239 +158,53 @@ export default {
   },
   data() {
     return {
-      loading: true, // 加载状态
-      selectCount: 0, // 已选数量
-      selectList: [], // 已选数据列表
-      searchForm: { // 请求参数
+      loading: true,
+      selectCount: 0,
+      selectList: [],
+      searchForm: {
         username: "",
         departmentId: "",
         mobile: "",
         pageNumber: 1,
         pageSize: 20,
         sort: "createTime",
-        order: "desc"
+        order: "desc",
       },
-      modalType: 0, // 新增编辑标识
-      userModalVisible: false, // 用户modal显隐
-      modalTitle: "", // modal标题
-      form: { // 表单
+      modalType: 0,
+      userModalVisible: false,
+      modalTitle: "",
+      form: {
         username: "",
         mobile: "",
         email: "",
         sex: "",
         roles: [],
         departmentId: 0,
-        departmentTitle: ""
+        departmentTitle: "",
       },
-      roleList: [], // 角色列表
-      errorPass: "", // 错误提示
-      formValidate: { // 验证规则
-        username: [
-          {required: true, message: "用户名不能为空", trigger: "blur"}
-        ],
-        password: [
-          {required: true, message: "密码不能为空", trigger: "blur"}
-        ],
+      roleList: [],
+      errorPass: "",
+      formValidate: {
+        username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+        password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
         mobile: [
-          {required: true, message: "手机号不能为空", trigger: "blur"},
-          {validator: validateMobile, trigger: "blur"}
+          { required: true, message: "手机号不能为空", trigger: "blur" },
+          { validator: validateMobile, trigger: "blur" },
         ],
         email: [
-          {required: true, message: "请输入邮箱地址"},
-          {type: "email", message: "邮箱格式不正确"}
-        ]
+          { required: true, message: "请输入邮箱地址" },
+          { type: "email", message: "邮箱格式不正确" },
+        ],
       },
-      submitLoading: false, // 提交状态
-      columns: [ // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-          fixed: "left"
-        },
-        {
-          title: "用户名",
-          key: "username",
-          minWidth: 120,
-          sortable: true,
-          fixed: "left"
-        },
-        {
-          title: "头像",
-          key: "avatar",
-          width: 80,
-          align: "center",
-          render: (h, params) => {
-            return h("Avatar", {
-              props: {
-                src: params.row.avatar
-              }
-            });
-          }
-        },
-        {
-          title: "手机",
-          key: "mobile",
-          width: 125
-        },
-        {
-          title: "邮箱",
-          key: "email",
-          minWidth: 180,
-          sortable: true
-        },
-        {
-          title: "状态",
-          key: "status",
-          align: "center",
-          width: 110,
-          render: (h, params) => {
-            if (params.row.status == true) {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "success",
-                    text: "启用"
-                  }
-                })
-              ]);
-            } else if (params.row.status == false) {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "error",
-                    text: "禁用"
-                  }
-                })
-              ]);
-            }
-          },
-          filters: [
-            {
-              label: "启用",
-              value: true
-            },
-            {
-              label: "禁用",
-              value: false
-            }
-          ],
-          filterMultiple: false,
-          filterMethod(value, row) {
-            return row.status == value;
-          }
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          sortable: true,
-          sortType: "desc",
-          width: 180
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 200,
-          align: "center",
-          fixed: "right",
-          render: (h, params) => {
-            let enableOrDisable = "";
-            if (params.row.status == true) {
-              enableOrDisable = h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px"
-                  },
-                  on: {
-                    click: () => {
-                      this.disable(params.row);
-                    }
-                  }
-                },
-                "禁用"
-              );
-            } else {
-              enableOrDisable = h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px"
-                  },
-                  on: {
-                    click: () => {
-                      this.enable(params.row);
-                    }
-                  }
-                },
-                "启用"
-              );
-            }
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px"
-                  },
-                  on: {
-                    click: () => {
-                      this.edit(params.row);
-                    }
-                  }
-                },
-                "编辑"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              enableOrDisable,
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none"
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    }
-                  }
-                },
-                "删除"
-              )
-            ]);
-          }
-        }
-      ],
-      data: [], // 用户数据
-      total: 0, // 总数
+      submitLoading: false,
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getUserList();
     },
-    // 选择部门回调
     handleSelectDepTree(v) {
       if (v) {
         this.form.departmentId = v.departmentId;
@@ -369,26 +214,20 @@ export default {
         this.form.departmentTitle = "";
       }
     },
-    // 搜索项部门选择
     handleSelectDep(v) {
       this.searchForm.departmentId = v;
     },
-    // 分页 修改页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getUserList();
       this.clearSelectAll();
     },
-    // 分页 修改页数
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
+    changePageSize() {
       this.searchForm.pageNumber = 1;
       this.getUserList();
     },
     getUserList() {
-      // 多条件搜索用户列表
       this.loading = true;
-      getUserListData(this.searchForm).then(res => {
+      getUserListData(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
           this.data = res.result.records;
@@ -396,41 +235,37 @@ export default {
         }
       });
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getUserList();
     },
-    // 排序
     changeSort(e) {
-      this.searchForm.sort = e.key;
-      this.searchForm.order = e.order;
-      if (e.order == "normal") {
+      this.searchForm.sort = e.prop;
+      this.searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+      if (!e.order) {
         this.searchForm.order = "";
       }
       this.getUserList();
     },
-    // 获取角色列表
     getRoleList() {
       let params = {
-        pageSize: 100
-      }
-      getAllRoleList(params).then(res => {
+        pageSize: 100,
+      };
+      getAllRoleList(params).then((res) => {
         if (res.success) {
           this.roleList = res.result.records;
         }
       });
     },
-    // 重置密码
     resetPass() {
-      if(this.selectCount==0) {this.$Message.warning('请选中数据后重试!'); return}
+      if (this.selectCount == 0) {
+        this.$Message.warning("请选中数据后重试!");
+        return;
+      }
       this.$Modal.confirm({
         title: "确认重置",
-        content:
-          "您确认要重置所选的 " +
-          this.selectCount +
-          " 条用户数据密码为【123456】?",
+        content: "您确认要重置所选的 " + this.selectCount + " 条用户数据密码为【123456】?",
         loading: true,
         onOk: () => {
           let ids = "";
@@ -438,7 +273,7 @@ export default {
             ids += e.id + ",";
           });
           ids = ids.substring(0, ids.length - 1);
-          resetPassword(ids).then(res => {
+          resetPassword(ids).then((res) => {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("操作成功");
@@ -446,16 +281,14 @@ export default {
               this.getUserList();
             }
           });
-        }
+        },
       });
     },
-    // 确认提交
     submitUser() {
-      this.$refs.form.validate(valid => {
+      this.$refs.form.validate((valid) => {
         if (valid) {
           if (this.modalType == 0) {
-            // 添加用户 避免编辑后传入id
-            const params = JSON.parse(JSON.stringify(this.form))
+            const params = JSON.parse(JSON.stringify(this.form));
             delete params.id;
             delete params.status;
             if (params.password == "" || params.password == undefined) {
@@ -466,10 +299,9 @@ export default {
               this.errorPass = "密码长度不得少于6位";
               return;
             }
-            //todo
-            params.password = this.md5(params.password)
+            params.password = this.md5(params.password);
             this.submitLoading = true;
-            addUser(params).then(res => {
+            addUser(params).then((res) => {
               this.submitLoading = false;
               if (res.success) {
                 this.$Message.success("操作成功");
@@ -478,9 +310,8 @@ export default {
               }
             });
           } else {
-            // 编辑
             this.submitLoading = true;
-            editOtherUser(this.form).then(res => {
+            editOtherUser(this.form).then((res) => {
               this.submitLoading = false;
               if (res.success) {
                 this.$Message.success("操作成功");
@@ -492,30 +323,27 @@ export default {
         }
       });
     },
-    // 添加用户
     add() {
       this.modalType = 0;
       this.modalTitle = "添加用户";
-      this.$refs.form.resetFields();
-      this.form = { // 表单
+      this.$refs.form?.resetFields();
+      this.form = {
         username: "",
         mobile: "",
         email: "",
         sex: "",
         roles: [],
         departmentId: 0,
-        departmentTitle: ""
-      },
+        departmentTitle: "",
+      };
       this.$refs.depTree.setData("", "");
       this.userModalVisible = true;
     },
-    // 编辑用户
     edit(v) {
       this.form = JSON.parse(JSON.stringify(v));
       this.modalType = 1;
       this.modalTitle = "编辑用户";
-      this.$refs.form.resetFields();
-      // 转换null为""
+      this.$refs.form?.resetFields();
       for (let attr in this.form) {
         if (this.form[attr] == null) {
           this.form[attr] = "";
@@ -531,74 +359,64 @@ export default {
       this.form.roles = selectRolesId;
       this.userModalVisible = true;
     },
-    // 启用
     enable(v) {
-      let params = {
-        status: true
-      }
+      let params = { status: true };
       this.$Modal.confirm({
         title: "确认启用",
         content: "您确认要启用用户 " + v.username + " ?",
         loading: true,
         onOk: () => {
-          enableUser(v.id, params).then(res => {
+          enableUser(v.id, params).then((res) => {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("操作成功");
               this.getUserList();
             }
           });
-        }
+        },
       });
     },
-    // 禁用
     disable(v) {
-      let params = {
-        status: false
-      }
+      let params = { status: false };
       this.$Modal.confirm({
         title: "确认禁用",
         content: "您确认要禁用用户 " + v.username + " ?",
         loading: true,
         onOk: () => {
-          enableUser(v.id, params).then(res => {
+          enableUser(v.id, params).then((res) => {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("操作成功");
               this.getUserList();
             }
           });
-        }
+        },
       });
     },
-    // 删除用户
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
         content: "您确认要删除用户 " + v.username + " ?",
         loading: true,
         onOk: () => {
-          deleteUser(v.id).then(res => {
+          deleteUser(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("删除成功");
               this.getUserList();
             }
           });
-        }
+        },
       });
     },
-    // 选中状态
     showSelect(e) {
       this.exportData = e;
       this.selectList = e;
       this.selectCount = e.length;
     },
-    // 清除选中状态
     clearSelectAll() {
-      this.$refs.table.selectAll(false);
+      this.$refs.table?.clearSelection();
     },
-    // 批量删除
     delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未选择要删除的数据");
@@ -614,7 +432,7 @@ export default {
             ids += e.id + ",";
           });
           ids = ids.substring(0, ids.length - 1);
-          deleteUser(ids).then(res => {
+          deleteUser(ids).then((res) => {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("删除成功");
@@ -622,13 +440,25 @@ export default {
               this.getUserList();
             }
           });
-        }
+        },
       });
-    }
+    },
   },
   mounted() {
     this.init();
     this.getRoleList();
-  }
+  },
 };
 </script>
+<style scoped>
+.ops a {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.ops span {
+  display: inline-block;
+  margin: 0 8px;
+  color: #dcdee2;
+}
+</style>
diff --git a/manager/src/views/wx-channel/components/WxChannelsCategoryTab.vue b/manager/src/views/wx-channel/components/WxChannelsCategoryTab.vue
index 0c1d0bbe..b71bc435 100644
--- a/manager/src/views/wx-channel/components/WxChannelsCategoryTab.vue
+++ b/manager/src/views/wx-channel/components/WxChannelsCategoryTab.vue
@@ -1,19 +1,33 @@
 <template>
   <div class="wx-channel-category">
     <div class="toolbar">
-      <i-switch v-model="forceRefresh" size="large">
-        <span slot="open">强刷</span>
-        <span slot="close">缓存</span>
-      </i-switch>
-      <Button
-        type="primary"
-        @click="loadThirdCategories"
-        :loading="loading"
-        style="margin-left: 10px"
-        >刷新</Button
-      >
+      <el-switch v-model="forceRefresh" active-text="强刷" inactive-text="缓存" />
+      <el-button type="primary" :loading="loading" style="margin-left: 10px" @click="loadThirdCategories">
+        刷新
+      </el-button>
     </div>
-    <Table border :loading="loading" :columns="columns" :data="data"></Table>
+    <el-table v-loading="loading" border :data="data" style="width: 100%">
+      <el-table-column prop="firstCatName" label="一级类目" min-width="150" show-overflow-tooltip />
+      <el-table-column prop="secondCatName" label="二级类目" min-width="150" show-overflow-tooltip />
+      <el-table-column prop="thirdCatName" label="三级类目" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="thirdCatId" label="三级类目ID" width="120" />
+      <el-table-column prop="qualification" label="类目资质" min-width="220" show-overflow-tooltip />
+      <el-table-column label="类目资质类型" width="120">
+        <template #default="{ row }">
+          <el-tag v-if="row" :type="qualificationTagType(row.qualificationType)">
+            {{ qualificationLabel(row.qualificationType) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="productQualification" label="商品资质" min-width="220" show-overflow-tooltip />
+      <el-table-column label="商品资质类型" width="120">
+        <template #default="{ row }">
+          <el-tag v-if="row" :type="qualificationTagType(row.productQualificationType)">
+            {{ qualificationLabel(row.productQualificationType) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
@@ -27,48 +41,21 @@ export default {
       forceRefresh: false,
       loading: false,
       data: [],
-      columns: [
-        { title: "一级类目", key: "firstCatName", minWidth: 150, tooltip: true },
-        { title: "二级类目", key: "secondCatName", minWidth: 150, tooltip: true },
-        { title: "三级类目", key: "thirdCatName", minWidth: 200, tooltip: true },
-        { title: "三级类目ID", key: "thirdCatId", width: 120 },
-        { title: "类目资质", key: "qualification", minWidth: 220, tooltip: true },
-        {
-          title: "类目资质类型",
-          key: "qualificationType",
-          width: 120,
-          render: (h, params) => {
-            const val = params.row.qualificationType;
-            const map = { 0: "不需要", 1: "必填", 2: "选填" };
-            return h(
-              "Tag",
-              { props: { color: val === 1 ? "red" : val === 2 ? "orange" : "green" } },
-              map[val] || "-"
-            );
-          },
-        },
-        { title: "商品资质", key: "productQualification", minWidth: 220, tooltip: true },
-        {
-          title: "商品资质类型",
-          key: "productQualificationType",
-          width: 120,
-          render: (h, params) => {
-            const val = params.row.productQualificationType;
-            const map = { 0: "不需要", 1: "必填", 2: "选填" };
-            return h(
-              "Tag",
-              { props: { color: val === 1 ? "red" : val === 2 ? "orange" : "green" } },
-              map[val] || "-"
-            );
-          },
-        },
-      ],
     };
   },
   mounted() {
     this.loadThirdCategories();
   },
   methods: {
+    qualificationLabel(val) {
+      const map = { 0: "不需要", 1: "必填", 2: "选填" };
+      return map[val] || "-";
+    },
+    qualificationTagType(val) {
+      if (val === 1) return "danger";
+      if (val === 2) return "warning";
+      return "success";
+    },
     loadThirdCategories() {
       this.loading = true;
       getWxChannelsThirdCategory({ forceRefresh: !!this.forceRefresh })
diff --git a/manager/src/views/wx-channel/components/WxChannelsGoodsTab.vue b/manager/src/views/wx-channel/components/WxChannelsGoodsTab.vue
index 55a238a7..e4bde9ea 100644
--- a/manager/src/views/wx-channel/components/WxChannelsGoodsTab.vue
+++ b/manager/src/views/wx-channel/components/WxChannelsGoodsTab.vue
@@ -1,46 +1,60 @@
 <template>
   <div class="wx-channel-goods">
-    <Row>
-      <Form :model="searchForm" inline :label-width="70" class="search-form">
-        <FormItem label="商品名称" prop="goodsName">
-          <Input
-            v-model="searchForm.goodsName"
-            placeholder="请输入商品名称"
-            clearable
-            style="width: 220px"
-          />
-        </FormItem>
-        <FormItem label="状态" prop="status">
-          <Select v-model="searchForm.status" clearable style="width: 180px" placeholder="全部">
-            <Option v-for="item in statusList" :key="item.value" :value="item.value">{{ item.label }}</Option>
-          </Select>
-        </FormItem>
-        <Button
-          @click="handleSearch"
-          type="primary"
-          icon="ios-search"
-          class="search-btn"
-          :loading="loading"
-          >搜索</Button
-        >
-      </Form>
-    </Row>
+    <el-form :model="searchForm" inline label-width="70px" class="search-form">
+      <el-form-item label="商品名称" prop="goodsName">
+        <el-input
+          v-model="searchForm.goodsName"
+          placeholder="请输入商品名称"
+          clearable
+          style="width: 220px"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="searchForm.status" clearable style="width: 180px" placeholder="全部">
+          <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" class="search-btn" :loading="loading" @click="handleSearch">搜索</el-button>
+      </el-form-item>
+    </el-form>
 
-    <Table :loading="loading" border :columns="columns" :data="data" class="mt_10"></Table>
-    <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
-      <Page
-        :current="searchForm.pageNumber"
+    <el-table v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
+      <el-table-column label="商品图片" width="90" align="center">
+        <template #default="{ row }">
+          <img
+            v-if="row"
+            :src="row.goodsImage || ''"
+            alt="加载图片失败"
+            style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="goodsName" label="商品名称" min-width="220" show-overflow-tooltip />
+      <el-table-column prop="storeName" label="店铺" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="categoryName" label="分类" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="costPrice" label="销售价" width="100" />
+      <el-table-column prop="channelPrice" label="视频号价" width="100" />
+      <el-table-column prop="stock" label="库存" width="90" />
+      <el-table-column label="状态" width="110">
+        <template #default="{ row }">
+          <el-tag v-if="row" :type="statusTagType(row.status)">{{ statusLabel(row.status) }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="mt_10" style="display: flex; justify-content: flex-end">
+      <el-pagination
+        v-model:current-page="searchForm.pageNumber"
+        v-model:page-size="searchForm.pageSize"
+        :page-sizes="[20, 50, 100]"
         :total="total"
-        :page-size="searchForm.pageSize"
-        @on-change="changePage"
-        @on-page-size-change="changePageSize"
-        :page-size-opts="[20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
         size="small"
-        show-total
-        show-elevator
-        show-sizer
-      ></Page>
-    </Row>
+        @current-change="changePage"
+        @size-change="changePageSize"
+      />
+    </div>
   </div>
 </template>
 
@@ -65,52 +79,20 @@ export default {
         pageNumber: 1,
         pageSize: 20,
       },
-      columns: [
-        {
-          title: "商品图片",
-          key: "goodsImage",
-          width: 90,
-          align: "center",
-          render: (h, params) => {
-            return h("img", {
-              attrs: { src: params.row.goodsImage || "", alt: "加载图片失败" },
-              style: {
-                width: "50px",
-                height: "50px",
-                objectFit: "cover",
-                borderRadius: "4px",
-              },
-            });
-          },
-        },
-        { title: "商品名称", key: "goodsName", minWidth: 220, tooltip: true },
-        { title: "店铺", key: "storeName", minWidth: 160, tooltip: true },
-        { title: "分类", key: "categoryName", minWidth: 160, tooltip: true },
-        { title: "销售价", key: "costPrice", width: 100 },
-        { title: "视频号价", key: "channelPrice", width: 100 },
-        { title: "库存", key: "stock", width: 90 },
-        {
-          title: "状态",
-          key: "status",
-          width: 110,
-          render: (h, params) => {
-            const val = params.row.status;
-            const map = {
-              APPROVED: { label: "已通过", color: "green" },
-              PENDING: { label: "审核中", color: "orange" },
-              REJECTED: { label: "已拒绝", color: "red" },
-            };
-            const item = map[val] || { label: val || "-", color: "default" };
-            return h("Tag", { props: { color: item.color } }, item.label);
-          },
-        },
-      ],
     };
   },
   mounted() {
     this.loadPage();
   },
   methods: {
+    statusLabel(val) {
+      const map = { APPROVED: "已通过", PENDING: "审核中", REJECTED: "已拒绝" };
+      return map[val] || val || "-";
+    },
+    statusTagType(val) {
+      const map = { APPROVED: "success", PENDING: "warning", REJECTED: "danger" };
+      return map[val] || "info";
+    },
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.loadPage();
diff --git a/manager/src/views/wx-channel/components/WxChannelsOrderTab.vue b/manager/src/views/wx-channel/components/WxChannelsOrderTab.vue
index 2cb61089..e64768cb 100644
--- a/manager/src/views/wx-channel/components/WxChannelsOrderTab.vue
+++ b/manager/src/views/wx-channel/components/WxChannelsOrderTab.vue
@@ -1,61 +1,72 @@
 <template>
   <div class="wx-channel-order">
-    <Row>
-      <Form :model="searchForm" inline :label-width="70" class="search-form">
-        <FormItem label="订单编号" prop="channelOrderSn">
-          <Input
-            v-model="searchForm.channelOrderSn"
-            placeholder="视频号订单编号"
-            clearable
-            style="width: 220px"
-          />
-        </FormItem>
-        <FormItem label="会员昵称" prop="memberNickName">
-          <Input v-model="searchForm.memberNickName" placeholder="请输入会员昵称" clearable style="width: 180px" />
-        </FormItem>
-        <FormItem label="商品名称" prop="goodsName">
-          <Input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
-        </FormItem>
-        <FormItem label="状态" prop="status">
-          <Input v-model="searchForm.status" placeholder="订单状态" clearable style="width: 140px" />
-        </FormItem>
-        <FormItem label="场景" prop="scene">
-          <Select v-model="searchForm.scene" clearable style="width: 140px" placeholder="全部">
-            <Option v-for="item in sceneList" :key="item.value" :value="item.value">{{ item.label }}</Option>
-          </Select>
-        </FormItem>
-        <FormItem label="下单时间">
-          <DatePicker
-            type="daterange"
-            v-model="selectDate"
-            format="yyyy-MM-dd"
-            clearable
-            @on-change="selectDateRange"
-            placeholder="选择起始时间"
-            style="width: 240px"
-          ></DatePicker>
-        </FormItem>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn" :loading="loading"
-          >搜索</Button
-        >
-      </Form>
-    </Row>
+    <el-form :model="searchForm" inline label-width="70px" class="search-form">
+      <el-form-item label="订单编号" prop="channelOrderSn">
+        <el-input v-model="searchForm.channelOrderSn" placeholder="视频号订单编号" clearable style="width: 220px" />
+      </el-form-item>
+      <el-form-item label="会员昵称" prop="memberNickName">
+        <el-input v-model="searchForm.memberNickName" placeholder="请输入会员昵称" clearable style="width: 180px" />
+      </el-form-item>
+      <el-form-item label="商品名称" prop="goodsName">
+        <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-input v-model="searchForm.status" placeholder="订单状态" clearable style="width: 140px" />
+      </el-form-item>
+      <el-form-item label="场景" prop="scene">
+        <el-select v-model="searchForm.scene" clearable style="width: 140px" placeholder="全部">
+          <el-option v-for="item in sceneList" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="下单时间">
+        <el-date-picker
+          v-model="selectDate"
+          type="daterange"
+          value-format="YYYY-MM-DD"
+          clearable
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 240px"
+          @change="selectDateRange"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" class="search-btn" :loading="loading" @click="handleSearch">搜索</el-button>
+      </el-form-item>
+    </el-form>
 
-    <Table :loading="loading" border :columns="columns" :data="data" class="mt_10"></Table>
-    <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
-      <Page
-        :current="searchForm.pageNumber"
+    <el-table v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
+      <el-table-column prop="channelOrderSn" label="视频号订单编号" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="orderSn" label="平台订单编号" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="memberNickName" label="会员昵称" min-width="140" show-overflow-tooltip />
+      <el-table-column prop="amount" label="订单金额" width="110" />
+      <el-table-column label="订单状态" width="130">
+        <template #default="{ row }">
+          <el-tag v-if="row && row.status" type="primary">{{ row.status }}</el-tag>
+          <span v-else-if="row">-</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="channelName" label="带货视频号" min-width="160" show-overflow-tooltip />
+      <el-table-column label="下单场景" width="110">
+        <template #default="{ row }">
+          <el-tag v-if="row" :type="sceneTagType(row.scene)">{{ sceneLabel(row.scene) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建时间" min-width="160" show-overflow-tooltip />
+    </el-table>
+
+    <div class="mt_10" style="display: flex; justify-content: flex-end">
+      <el-pagination
+        v-model:current-page="searchForm.pageNumber"
+        v-model:page-size="searchForm.pageSize"
+        :page-sizes="[20, 50, 100]"
         :total="total"
-        :page-size="searchForm.pageSize"
-        @on-change="changePage"
-        @on-page-size-change="changePageSize"
-        :page-size-opts="[20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
         size="small"
-        show-total
-        show-elevator
-        show-sizer
-      ></Page>
-    </Row>
+        @current-change="changePage"
+        @size-change="changePageSize"
+      />
+    </div>
   </div>
 </template>
 
@@ -85,54 +96,28 @@ export default {
         pageNumber: 1,
         pageSize: 20,
       },
-      columns: [
-        { title: "视频号订单编号", key: "channelOrderSn", minWidth: 200, tooltip: true },
-        { title: "平台订单编号", key: "orderSn", minWidth: 200, tooltip: true },
-        { title: "会员昵称", key: "memberNickName", minWidth: 140, tooltip: true },
-        { title: "订单金额", key: "amount", width: 110 },
-        {
-          title: "订单状态",
-          key: "status",
-          width: 130,
-          render: (h, params) => {
-            const val = params.row.status;
-            if (!val) return h("span", "-");
-            return h("Tag", { props: { color: "blue" } }, val);
-          },
-        },
-        { title: "带货视频号", key: "channelName", minWidth: 160, tooltip: true },
-        {
-          title: "下单场景",
-          key: "scene",
-          width: 110,
-          render: (h, params) => {
-            const val = params.row.scene;
-            const map = {
-              LIVE: { label: "直播", color: "orange" },
-              WINDOW: { label: "橱窗", color: "purple" },
-            };
-            const item = map[val] || { label: val || "-", color: "default" };
-            return h("Tag", { props: { color: item.color } }, item.label);
-          },
-        },
-        { title: "创建时间", key: "createTime", minWidth: 160, tooltip: true },
-      ],
     };
   },
   mounted() {
     this.loadPage();
   },
   methods: {
+    sceneLabel(val) {
+      const map = { LIVE: "直播", WINDOW: "橱窗" };
+      return map[val] || val || "-";
+    },
+    sceneTagType(val) {
+      const map = { LIVE: "warning", WINDOW: "" };
+      return map[val] || "info";
+    },
     selectDateRange(v) {
       if (!v || v.length !== 2) {
         this.searchForm.startTime = null;
         this.searchForm.endTime = null;
         return;
       }
-      const startStr = v[0];
-      const endStr = v[1];
-      const start = startStr ? new Date(`${startStr}T00:00:00`).getTime() : null;
-      const end = endStr ? new Date(`${endStr}T23:59:59`).getTime() : null;
+      const start = v[0] ? new Date(`${v[0]}T00:00:00`).getTime() : null;
+      const end = v[1] ? new Date(`${v[1]}T23:59:59`).getTime() : null;
       this.searchForm.startTime = Number.isFinite(start) ? start : null;
       this.searchForm.endTime = Number.isFinite(end) ? end : null;
     },
diff --git a/manager/src/views/wx-channel/components/WxChannelsOverviewTab.vue b/manager/src/views/wx-channel/components/WxChannelsOverviewTab.vue
index 6f20a658..7e86136d 100644
--- a/manager/src/views/wx-channel/components/WxChannelsOverviewTab.vue
+++ b/manager/src/views/wx-channel/components/WxChannelsOverviewTab.vue
@@ -1,76 +1,76 @@
 <template>
-  <div class="wx-channel-overview">
-    <Row>
-      <Form :model="searchForm" inline :label-width="70" class="search-form">
-        <FormItem label="统计时间">
-          <DatePicker
-            type="daterange"
-            v-model="selectDate"
-            format="yyyy-MM-dd"
-            clearable
-            @on-change="selectDateRange"
-            placeholder="选择起始时间"
-            style="width: 240px"
-          ></DatePicker>
-        </FormItem>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn" :loading="loading"
-          >查询</Button
-        >
-      </Form>
-    </Row>
+  <div v-loading="loading" class="wx-channel-overview">
+    <el-form :model="searchForm" inline label-width="70px" class="search-form">
+      <el-form-item label="统计时间">
+        <el-date-picker
+          v-model="selectDate"
+          type="daterange"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
+          clearable
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 240px"
+          @change="selectDateRange"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" class="search-btn" :loading="loading" @click="handleSearch">查询</el-button>
+      </el-form-item>
+    </el-form>
 
-    <Row :gutter="16" style="margin-top: 12px">
-      <Col :xs="24" :sm="12" :md="8">
-        <Card dis-hover>
+    <el-row :gutter="16" style="margin-top: 12px">
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card shadow="never">
           <div class="overview-card">
             <div class="label">视频号总销售额</div>
             <div class="value">{{ summary.totalSales || 0 }}</div>
           </div>
-        </Card>
-      </Col>
-      <Col :xs="24" :sm="12" :md="8">
-        <Card dis-hover>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card shadow="never">
           <div class="overview-card">
             <div class="label">直播间销售额</div>
             <div class="value">{{ summary.liveSales || 0 }}</div>
           </div>
-        </Card>
-      </Col>
-      <Col :xs="24" :sm="12" :md="8">
-        <Card dis-hover>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card shadow="never">
           <div class="overview-card">
             <div class="label">橱窗销售额</div>
             <div class="value">{{ summary.windowSales || 0 }}</div>
           </div>
-        </Card>
-      </Col>
-    </Row>
-    <Row :gutter="16" style="margin-top: 16px">
-      <Col :xs="24" :sm="12" :md="8">
-        <Card dis-hover>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="16" style="margin-top: 16px">
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card shadow="never">
           <div class="overview-card">
             <div class="label">视频号退款总金额</div>
             <div class="value">{{ summary.totalRefund || 0 }}</div>
           </div>
-        </Card>
-      </Col>
-      <Col :xs="24" :sm="12" :md="8">
-        <Card dis-hover>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card shadow="never">
           <div class="overview-card">
             <div class="label">直播间退款金额</div>
             <div class="value">{{ summary.liveRefund || 0 }}</div>
           </div>
-        </Card>
-      </Col>
-      <Col :xs="24" :sm="12" :md="8">
-        <Card dis-hover>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card shadow="never">
           <div class="overview-card">
             <div class="label">橱窗退款金额</div>
             <div class="value">{{ summary.windowRefund || 0 }}</div>
           </div>
-        </Card>
-      </Col>
-    </Row>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -107,8 +107,7 @@ export default {
         this.searchForm.endTime = null;
         return;
       }
-      const startStr = v[0];
-      const endStr = v[1];
+      const [startStr, endStr] = v;
       const start = startStr ? new Date(`${startStr}T00:00:00`).getTime() : null;
       const end = endStr ? new Date(`${endStr}T23:59:59`).getTime() : null;
       this.searchForm.startTime = Number.isFinite(start) ? start : null;
diff --git a/manager/src/views/wx-channel/components/WxChannelsRefundTab.vue b/manager/src/views/wx-channel/components/WxChannelsRefundTab.vue
index 5d7d9c9a..e9ad2c0a 100644
--- a/manager/src/views/wx-channel/components/WxChannelsRefundTab.vue
+++ b/manager/src/views/wx-channel/components/WxChannelsRefundTab.vue
@@ -1,69 +1,74 @@
 <template>
   <div class="wx-channel-refund">
-    <Row>
-      <Form :model="searchForm" inline :label-width="70" class="search-form">
-        <FormItem label="退单编号" prop="channelRefundSn">
-          <Input
-            v-model="searchForm.channelRefundSn"
-            placeholder="视频号退单编号"
-            clearable
-            style="width: 220px"
-          />
-        </FormItem>
-        <FormItem label="订单编号" prop="channelOrderSn">
-          <Input
-            v-model="searchForm.channelOrderSn"
-            placeholder="视频号订单编号"
-            clearable
-            style="width: 220px"
-          />
-        </FormItem>
-        <FormItem label="会员昵称" prop="memberNickName">
-          <Input v-model="searchForm.memberNickName" placeholder="请输入会员昵称" clearable style="width: 180px" />
-        </FormItem>
-        <FormItem label="商品名称" prop="goodsName">
-          <Input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
-        </FormItem>
-        <FormItem label="状态" prop="status">
-          <Input v-model="searchForm.status" placeholder="退单状态" clearable style="width: 140px" />
-        </FormItem>
-        <FormItem label="场景" prop="scene">
-          <Select v-model="searchForm.scene" clearable style="width: 140px" placeholder="全部">
-            <Option v-for="item in sceneList" :key="item.value" :value="item.value">{{ item.label }}</Option>
-          </Select>
-        </FormItem>
-        <FormItem label="时间">
-          <DatePicker
-            type="daterange"
-            v-model="selectDate"
-            format="yyyy-MM-dd"
-            clearable
-            @on-change="selectDateRange"
-            placeholder="选择起始时间"
-            style="width: 240px"
-          ></DatePicker>
-        </FormItem>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn" :loading="loading"
-          >搜索</Button
-        >
-      </Form>
-    </Row>
+    <el-form :model="searchForm" inline label-width="70px" class="search-form">
+      <el-form-item label="退单编号" prop="channelRefundSn">
+        <el-input v-model="searchForm.channelRefundSn" placeholder="视频号退单编号" clearable style="width: 220px" />
+      </el-form-item>
+      <el-form-item label="订单编号" prop="channelOrderSn">
+        <el-input v-model="searchForm.channelOrderSn" placeholder="视频号订单编号" clearable style="width: 220px" />
+      </el-form-item>
+      <el-form-item label="会员昵称" prop="memberNickName">
+        <el-input v-model="searchForm.memberNickName" placeholder="请输入会员昵称" clearable style="width: 180px" />
+      </el-form-item>
+      <el-form-item label="商品名称" prop="goodsName">
+        <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-input v-model="searchForm.status" placeholder="退单状态" clearable style="width: 140px" />
+      </el-form-item>
+      <el-form-item label="场景" prop="scene">
+        <el-select v-model="searchForm.scene" clearable style="width: 140px" placeholder="全部">
+          <el-option v-for="item in sceneList" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="时间">
+        <el-date-picker
+          v-model="selectDate"
+          type="daterange"
+          value-format="YYYY-MM-DD"
+          clearable
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 240px"
+          @change="selectDateRange"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" class="search-btn" :loading="loading" @click="handleSearch">搜索</el-button>
+      </el-form-item>
+    </el-form>
 
-    <Table :loading="loading" border :columns="columns" :data="data" class="mt_10"></Table>
-    <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
-      <Page
-        :current="searchForm.pageNumber"
+    <el-table v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
+      <el-table-column prop="channelRefundSn" label="视频号退单编号" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="channelOrderSn" label="视频号订单编号" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="memberNickName" label="会员昵称" min-width="140" show-overflow-tooltip />
+      <el-table-column prop="amount" label="退款金额" width="110" />
+      <el-table-column label="退单状态" width="130">
+        <template #default="{ row }">
+          <el-tag v-if="row && row.status" type="primary">{{ row.status }}</el-tag>
+          <span v-else-if="row">-</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="下单场景" width="110">
+        <template #default="{ row }">
+          <el-tag v-if="row" :type="sceneTagType(row.scene)">{{ sceneLabel(row.scene) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建时间" min-width="160" show-overflow-tooltip />
+    </el-table>
+
+    <div class="mt_10" style="display: flex; justify-content: flex-end">
+      <el-pagination
+        v-model:current-page="searchForm.pageNumber"
+        v-model:page-size="searchForm.pageSize"
+        :page-sizes="[20, 50, 100]"
         :total="total"
-        :page-size="searchForm.pageSize"
-        @on-change="changePage"
-        @on-page-size-change="changePageSize"
-        :page-size-opts="[20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
         size="small"
-        show-total
-        show-elevator
-        show-sizer
-      ></Page>
-    </Row>
+        @current-change="changePage"
+        @size-change="changePageSize"
+      />
+    </div>
   </div>
 </template>
 
@@ -94,53 +99,28 @@ export default {
         pageNumber: 1,
         pageSize: 20,
       },
-      columns: [
-        { title: "视频号退单编号", key: "channelRefundSn", minWidth: 200, tooltip: true },
-        { title: "视频号订单编号", key: "channelOrderSn", minWidth: 200, tooltip: true },
-        { title: "会员昵称", key: "memberNickName", minWidth: 140, tooltip: true },
-        { title: "退款金额", key: "amount", width: 110 },
-        {
-          title: "退单状态",
-          key: "status",
-          width: 130,
-          render: (h, params) => {
-            const val = params.row.status;
-            if (!val) return h("span", "-");
-            return h("Tag", { props: { color: "blue" } }, val);
-          },
-        },
-        {
-          title: "下单场景",
-          key: "scene",
-          width: 110,
-          render: (h, params) => {
-            const val = params.row.scene;
-            const map = {
-              LIVE: { label: "直播", color: "orange" },
-              WINDOW: { label: "橱窗", color: "purple" },
-            };
-            const item = map[val] || { label: val || "-", color: "default" };
-            return h("Tag", { props: { color: item.color } }, item.label);
-          },
-        },
-        { title: "创建时间", key: "createTime", minWidth: 160, tooltip: true },
-      ],
     };
   },
   mounted() {
     this.loadPage();
   },
   methods: {
+    sceneLabel(val) {
+      const map = { LIVE: "直播", WINDOW: "橱窗" };
+      return map[val] || val || "-";
+    },
+    sceneTagType(val) {
+      const map = { LIVE: "warning", WINDOW: "" };
+      return map[val] || "info";
+    },
     selectDateRange(v) {
       if (!v || v.length !== 2) {
         this.searchForm.startTime = null;
         this.searchForm.endTime = null;
         return;
       }
-      const startStr = v[0];
-      const endStr = v[1];
-      const start = startStr ? new Date(`${startStr}T00:00:00`).getTime() : null;
-      const end = endStr ? new Date(`${endStr}T23:59:59`).getTime() : null;
+      const start = v[0] ? new Date(`${v[0]}T00:00:00`).getTime() : null;
+      const end = v[1] ? new Date(`${v[1]}T23:59:59`).getTime() : null;
       this.searchForm.startTime = Number.isFinite(start) ? start : null;
       this.searchForm.endTime = Number.isFinite(end) ? end : null;
     },
diff --git a/manager/src/views/wx-channel/components/WxChannelsSettingTab.vue b/manager/src/views/wx-channel/components/WxChannelsSettingTab.vue
index 55c048b5..048b43f7 100644
--- a/manager/src/views/wx-channel/components/WxChannelsSettingTab.vue
+++ b/manager/src/views/wx-channel/components/WxChannelsSettingTab.vue
@@ -1,31 +1,30 @@
 <template>
-  <div class="wx-channel-setting">
-    <Form :label-width="160" label-position="right" :model="configObject">
-      <FormItem label="AppId">
-        <Input v-model="configObject.appId" style="width: 360px" />
-      </FormItem>
-      <FormItem label="AppSecret">
-        <Input v-model="configObject.appSecret" style="width: 360px" />
-      </FormItem>
-      <FormItem label="接口基础地址">
-        <Input
+  <div v-loading="loading" class="wx-channel-setting">
+    <el-form label-width="160px" label-position="right" :model="configObject">
+      <el-form-item label="AppId">
+        <el-input v-model="configObject.appId" style="width: 360px" />
+      </el-form-item>
+      <el-form-item label="AppSecret">
+        <el-input v-model="configObject.appSecret" style="width: 360px" />
+      </el-form-item>
+      <el-form-item label="接口基础地址">
+        <el-input
           v-model="configObject.apiBase"
           style="width: 360px"
           placeholder="https://api.weixin.qq.com/minishop"
         />
-      </FormItem>
-      <FormItem label="Token地址">
-        <Input
+      </el-form-item>
+      <el-form-item label="Token地址">
+        <el-input
           v-model="configObject.tokenUrl"
           style="width: 360px"
           placeholder="https://api.weixin.qq.com/cgi-bin/token"
         />
-      </FormItem>
+      </el-form-item>
       <div class="actions">
-        <Button type="primary" @click="submit" :loading="submitLoading">保存</Button>
+        <el-button type="primary" :loading="submitLoading" @click="submit">保存</el-button>
       </div>
-    </Form>
-    <Spin size="large" fix v-if="loading"></Spin>
+    </el-form>
   </div>
 </template>
 
@@ -79,8 +78,8 @@ export default {
       getSetting("WX_CHANNELS")
         .then((res) => {
           if (res && res.success) {
-            const base = this.normalizeConfig(res.result);
-            this.configObject = this.pickConfigFields(base);
+            const raw = this.normalizeConfig(res.result);
+            this.configObject = this.pickConfigFields(raw);
           }
         })
         .finally(() => {
@@ -88,12 +87,14 @@ export default {
         });
     },
     submit() {
-      const payload = { ...this.configObject };
       this.submitLoading = true;
-      setSetting("WX_CHANNELS", payload)
+      setSetting("WX_CHANNELS", this.configObject)
         .then((res) => {
           if (res && res.success) {
             this.$Message.success("保存成功");
+            this.reloadConfig();
+          } else {
+            this.$Message.error("保存失败");
           }
         })
         .finally(() => {
@@ -107,8 +108,5 @@ export default {
 <style scoped lang="scss">
 .actions {
   margin-left: 160px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
 }
 </style>
diff --git a/manager/src/views/wx-channel/wxChannel.vue b/manager/src/views/wx-channel/wxChannel.vue
index 0db97fec..f10211f3 100644
--- a/manager/src/views/wx-channel/wxChannel.vue
+++ b/manager/src/views/wx-channel/wxChannel.vue
@@ -1,26 +1,26 @@
 <template>
-  <Card>
-    <Tabs v-model="selectedTab">
-      <TabPane label="视频号概括" name="WX_CHANNELS_OVERVIEW">
+  <el-card>
+    <el-tabs v-model="selectedTab">
+      <el-tab-pane label="视频号概括" name="WX_CHANNELS_OVERVIEW">
         <WxChannelsOverviewTab v-if="selectedTab === 'WX_CHANNELS_OVERVIEW'" />
-      </TabPane>
-      <TabPane label="视频号订单" name="WX_CHANNELS_ORDER">
+      </el-tab-pane>
+      <el-tab-pane label="视频号订单" name="WX_CHANNELS_ORDER">
         <WxChannelsOrderTab v-if="selectedTab === 'WX_CHANNELS_ORDER'" />
-      </TabPane>
-      <TabPane label="视频号退单" name="WX_CHANNELS_REFUND">
+      </el-tab-pane>
+      <el-tab-pane label="视频号退单" name="WX_CHANNELS_REFUND">
         <WxChannelsRefundTab v-if="selectedTab === 'WX_CHANNELS_REFUND'" />
-      </TabPane>
-      <TabPane label="视频号商品" name="WX_CHANNELS_GOODS">
+      </el-tab-pane>
+      <el-tab-pane label="视频号商品" name="WX_CHANNELS_GOODS">
         <WxChannelsGoodsTab v-if="selectedTab === 'WX_CHANNELS_GOODS'" />
-      </TabPane>
-      <TabPane label="视频号分类列表" name="WX_CHANNELS_CATEGORY">
+      </el-tab-pane>
+      <el-tab-pane label="视频号分类列表" name="WX_CHANNELS_CATEGORY">
         <WxChannelsCategoryTab v-if="selectedTab === 'WX_CHANNELS_CATEGORY'" />
-      </TabPane>
-      <TabPane label="视频号设置" name="WX_CHANNELS">
+      </el-tab-pane>
+      <el-tab-pane label="视频号设置" name="WX_CHANNELS">
         <WxChannelsSettingTab v-if="selectedTab === 'WX_CHANNELS'" />
-      </TabPane>
-    </Tabs>
-  </Card>
+      </el-tab-pane>
+    </el-tabs>
+  </el-card>
 </template>
 
 <script>
diff --git a/manager/vue.config.js b/manager/vue.config.js
index 7b4da29a..66f198c9 100644
--- a/manager/vue.config.js
+++ b/manager/vue.config.js
@@ -1,102 +1,46 @@
 const path = require("path");
-const configs = require('./src/config')
+const configs = require("./src/config");
 const CompressionPlugin = require("compression-webpack-plugin");
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
-const resolve = dir => {
-  return path.join(__dirname, dir);
-};
-/**
- * 在项目开发的时候将生产环境以及开发环境进行判断
- * 将生产环境中的路径用cdn来进行优化处理
- * 将开发环境中替换为本地的内容，方便处理bug以及开启vueDev
- * 我们可以根据环境变量进行相应的处理，只有在产品的时候，才让插件去自动注入相应的资源文件到html页面
- */
-const enableProduction = process.env.NODE_ENV === "production"; // 是否生产环境
 
+const resolve = (dir) => path.join(__dirname, dir);
 
-let externals = {
-  vue: "Vue",
-  axios: "axios",
-  "vue-router": "VueRouter",
-  vuex: "Vuex",
-  "view-design": "iview",
-  "vue-lazyload": "VueLazyload",
-  "js-cookie": "Cookies",
-  "sockjs-client": "SockJS",
-  "@antv/g2": "G2",
-};
+const enableProduction = process.env.NODE_ENV === "production";
 
-// 使用CDN的内容
-let cdn = {
-  css: ["https://cdn.pickmall.cn/cdn/iview.css"],
-  js: [
-    // vue must at first!
-    "https://cdn.pickmall.cn/cdn/vue.min.js",
-    "https://cdn.pickmall.cn/cdn/vuex.min.js",
-    "https://cdn.pickmall.cn/cdn/vue-router.min.js",
-    "https://cdn.pickmall.cn/cdn/axios.min.js",
-    "https://cdn.pickmall.cn/cdn/iview.min.js",
-    "https://cdn.pickmall.cn/cdn/vue-lazyload.min.js",
-    "https://cdn.pickmall.cn/cdn/js.cookie.min.js",
-    "https://cdn.pickmall.cn/cdn/sockjs.min.js",
-    "https://gw.alipayobjects.com/os/lib/antv/g2/4.1.24/dist/g2.min.js"
-  ]
-};
-
-// 删除注释
-let jsPlugin = [
-  new UglifyJsPlugin({
-    uglifyOptions: {
-      // 删除注释
-      output: {
-        comments: false
-      },
-      compress: {
-        drop_console: true, // 删除所有调式带有console的
-        drop_debugger: true,
-        pure_funcs: ["console.log"] // 删除console.log
-      }
-    }
-  })
-];
-
-// 判断是否需要加载CDN，线上删除注释
-
-cdn =  enableProduction && configs.enableCDN  ? cdn : { css: [], js: [] };
-externals = enableProduction && configs.enableCDN  ? externals : {};
-jsPlugin = enableProduction ? jsPlugin : [];
 module.exports = {
   css: {
     loaderOptions: {
-      // 向 CSS 相关的 loader 传递选项
       less: {
         lessOptions: {
-          javascriptEnabled: true
-        }
-      }
-    }
+          javascriptEnabled: true,
+        },
+      },
+      scss: {
+        sassOptions: {
+          silenceDeprecations: ["legacy-js-api", "import"],
+        },
+      },
+      sass: {
+        sassOptions: {
+          silenceDeprecations: ["legacy-js-api", "import"],
+        },
+      },
+    },
   },
   devServer: {
-    port: configs.port
+    port: configs.port,
   },
-
-  // 打包时不生成.map文件 避免看到源码
   productionSourceMap: false,
-
-  // 部署优化
   configureWebpack: {
-    // 使用CDN
-    externals: externals,
-    // GZIP压缩
-    plugins: [
-      new CompressionPlugin({
-        test: /\.js$|\.html$|\.css/, // 匹配文件
-        threshold: 10240 // 对超过10k文件压缩
-      })
-    ],
+    plugins: enableProduction
+      ? [
+          new CompressionPlugin({
+            test: /\.js$|\.html$|\.css/,
+            threshold: 10240,
+          }),
+        ]
+      : [],
     optimization: {
       runtimeChunk: "single",
-      minimizer: jsPlugin,
       splitChunks: {
         chunks: "all",
         maxInitialRequests: Infinity,
@@ -105,33 +49,28 @@ module.exports = {
           vendor: {
             test: /[\\/]node_modules[\\/]/,
             name(module) {
-              // get the name. E.g. node_modules/packageName/not/this/part.js
-              // or node_modules/packageName
-              const packageName = module.context.match(
+              const match = module.context && module.context.match(
                 /[\\/]node_modules[\\/](.*?)([\\/]|$)/
-              )[1];
-              // npm package names are URL-safe, but some servers don't like @ symbols
+              );
+              const packageName = match ? match[1] : "vendor";
               return `npm.${packageName.replace("@", "")}`;
-            }
-          }
-        }
-      }
-    }
+            },
+          },
+        },
+      },
+    },
   },
-  // 将cdn的资源挂载到插件上
   chainWebpack(config) {
-    //  @ 对应 src目录
     config.resolve.alias.set("@", resolve("src"));
-    config.plugin("html").tap(args => {
-      args[0].cdn = cdn;
+    config.plugin("html").tap((args) => {
+      args[0].cdn = { css: [], js: [] };
       return args;
     });
   },
-
   pluginOptions: {
     "style-resources-loader": {
       preProcessor: "scss",
-      patterns: [path.resolve(__dirname, "./src/styles/common.scss")]
-    }
-  }
+      patterns: [path.resolve(__dirname, "./src/styles/common.scss")],
+    },
+  },
 };