From 832fda813bed4906f6fc8d592dfe56a65e0f23b4 Mon Sep 17 00:00:00 2001
From: lifenlong <pikachu1995@126.com>
Date: Fri, 5 Jun 2026 17:49:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=87=E7=BA=A7Vue3=EF=BC=8CiView=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2ElementPlus=20-=20=E5=88=A0=E9=99=A4babel=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E3=80=81=E6=9B=B4=E6=96=B0=E4=BE=9D=E8=B5=96=E4=B8=8E?=
 =?UTF-8?q?=E5=85=A5=E5=8F=A3=E5=88=9D=E5=A7=8B=E5=8C=96=20-=20=E5=85=A8?=
 =?UTF-8?q?=E9=87=8F=E6=9B=BF=E6=8D=A2UI=E7=BB=84=E4=BB=B6=E3=80=81?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=80=82=E9=85=8D=EF=BC=8C=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB=E6=96=87=E6=A1=A3=E4=B8=8E=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?/=E8=BF=87=E6=BB=A4=E5=99=A8=E8=87=AA=E5=8A=A8=E5=8C=96?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E8=84=9A=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 buyer/.babelrc                                |   12 -
 buyer/MIGRATION-VUE3.md                       |   39 +
 buyer/package.json                            |   41 +-
 buyer/public/index.html                       |   10 +-
 buyer/scripts/fix-broken-tags.js              |   54 +
 buyer/scripts/fix-dialog-slots.js             |   52 +
 buyer/scripts/fix-duplicate-size.js           |   26 +
 buyer/scripts/fix-el-icon-click.js            |   28 +
 buyer/scripts/fix-filters.js                  |   77 +
 buyer/scripts/fix-runtime-compat.js           |   55 +
 buyer/scripts/fix-slots.js                    |   54 +
 buyer/scripts/fix-span-tags.js                |   46 +
 buyer/scripts/fix-stray-templates.js          |   55 +
 buyer/scripts/migrate-iview-to-element.js     |  227 ++
 buyer/scripts/replace-icon.js                 |  149 +
 buyer/scripts/replace-page.js                 |   63 +
 buyer/src/assets/styles/element.scss          |   35 +
 buyer/src/assets/styles/theme.less            |   10 +-
 buyer/src/components/Search.vue               |   24 +-
 buyer/src/components/addressManage/index.vue  |   66 +-
 buyer/src/components/advertising/FixedTop.vue |    4 +-
 buyer/src/components/card/index.vue           |  228 +-
 buyer/src/components/drawer/Drawer.vue        |   20 +-
 buyer/src/components/drawer/Main.vue          |   18 +-
 buyer/src/components/drawer/README.md         |   54 +-
 buyer/src/components/global.js                |   69 +-
 .../src/components/goodsDetail/Promotion.vue  |    4 +-
 .../src/components/goodsDetail/ShowGoods.vue  |  110 +-
 .../goodsDetail/ShowGoodsDetail.vue           |   82 +-
 buyer/src/components/header/Header.vue        |   25 +-
 buyer/src/components/header/hoverSearch.vue   |   11 +-
 .../components/indexDecorate/ModelForm.vue    |    3 +-
 .../indexDecorate/ModelFormItem.vue           |    3 +-
 .../indexDecorate/modelList/Carousel.vue      |   12 +-
 .../indexDecorate/modelList/Carousel1.vue     |   12 +-
 .../indexDecorate/modelList/Carousel2.vue     |   29 +-
 .../indexDecorate/modelList/NewGoodsSort.vue  |   11 +-
 .../indexDecorate/modelList/NotEnough.vue     |    6 +-
 .../indexDecorate/modelList/Recommend.vue     |    7 +-
 .../indexDecorate/modelList/Seckill.vue       |  244 +-
 .../indexDecorate/modelList/forYour.vue       |    6 +-
 .../indexDecorate/modelList/goodsAndType.vue  |    2 +-
 .../modelList/mixs/mix-brand.vue              |    5 +-
 .../modelList/mixs/mix-goods.vue              |    2 +-
 .../indexDecorate/modelList/setup-box.scss    |   62 +
 buyer/src/components/invoiceModal/index.vue   |  141 +-
 buyer/src/components/map/index.vue            |    8 +-
 buyer/src/components/map/multiple-map.vue     |   17 +-
 buyer/src/components/map/region.vue           |    6 +-
 buyer/src/components/nav/CateNav.vue          |   13 +-
 buyer/src/components/nav/GoodsClassNav.vue    |   78 +-
 buyer/src/components/verify/index.vue         |    8 +-
 buyer/src/main.js                             |   78 +-
 buyer/src/pages/Cart.vue                      |   98 +-
 buyer/src/pages/CouponCenter.vue              |   30 +-
 buyer/src/pages/ForgetPassword.vue            |   85 +-
 buyer/src/pages/GoodsDetail.vue               |   27 +-
 buyer/src/pages/GoodsList.vue                 |   53 +-
 buyer/src/pages/Index.vue                     |   27 +-
 buyer/src/pages/Login.vue                     |   96 +-
 buyer/src/pages/Merchant.vue                  |   55 +-
 buyer/src/pages/SignUp.vue                    |   79 +-
 buyer/src/pages/article/index.vue             |  105 +-
 .../pages/home/memberCenter/AccountSafe.vue   |   92 +-
 .../pages/home/memberCenter/CommentList.vue   |   53 +-
 .../home/memberCenter/ComplainDetail.vue      |   22 +-
 .../pages/home/memberCenter/ComplainList.vue  |   53 +-
 .../pages/home/memberCenter/Distribution.vue  |  385 ++-
 .../src/pages/home/memberCenter/Favorites.vue |   16 +-
 .../pages/home/memberCenter/MemberGrade.vue   |  121 +-
 .../src/pages/home/memberCenter/ModifyPwd.vue |   96 +-
 buyer/src/pages/home/memberCenter/Point.vue   |   52 +-
 buyer/src/pages/home/memberCenter/Profile.vue |   52 +-
 .../home/memberCenter/evaluation/AddEval.vue  |   40 +-
 .../memberCenter/evaluation/EvalDetail.vue    |   31 +-
 .../home/memberCenter/memberMsg/MsgList.vue   |  160 +-
 .../src/pages/home/orderCenter/AddAddress.vue |   56 +-
 .../src/pages/home/orderCenter/AfterSale.vue  |   87 +-
 .../home/orderCenter/AfterSaleDetail.vue      |   69 +-
 .../pages/home/orderCenter/ApplyAfterSale.vue |  125 +-
 buyer/src/pages/home/orderCenter/Complain.vue |   30 +-
 .../src/pages/home/orderCenter/MyAddress.vue  |   13 +-
 buyer/src/pages/home/orderCenter/MyOrder.vue  |   78 +-
 .../pages/home/orderCenter/OrderDetail.vue    |  131 +-
 buyer/src/pages/home/userCenter/Coupons.vue   |   21 +-
 .../pages/home/userCenter/MoneyManagement.vue |  399 +--
 .../src/pages/home/userCenter/MyGiftCards.vue |   61 +-
 buyer/src/pages/home/userCenter/MyTracks.vue  |   19 +-
 buyer/src/pages/payment/Pay.vue               |   97 +-
 buyer/src/pages/payment/PayDone.vue           |    6 +-
 buyer/src/pages/payment/PayMent.vue           |   59 +-
 buyer/src/pages/payment/ThirdPay.vue          |   11 +-
 .../src/pages/promotion/PointGoodsDetail.vue  |   25 +-
 buyer/src/pages/promotion/PointMall.vue       |   18 +-
 buyer/src/pages/promotion/seckill.vue         |   30 +-
 buyer/src/pages/shopEntry/FirstApply.vue      |  154 +-
 buyer/src/pages/shopEntry/SecondApply.vue     |   40 +-
 buyer/src/pages/shopEntry/ShopEntry.vue       |   32 +-
 buyer/src/pages/shopEntry/ThirdApply.vue      |   96 +-
 buyer/src/pages/user/Home.vue                 |   78 +-
 buyer/src/plugins/element.js                  |   11 +
 buyer/src/plugins/request.js                  |  214 +-
 buyer/src/router/index.js                     |  238 +-
 buyer/src/utils/iconMap.js                    |   83 +
 buyer/src/utils/message.js                    |   71 +
 buyer/src/vuex/store.js                       |   30 +-
 buyer/vue.config.js                           |  138 +-
 im/babel.config.js                            |   25 +-
 im/package.json                               |   40 +-
 im/scripts/fix-deep.js                        |   21 +
 im/src/App.vue                                |    5 +-
 im/src/assets/css/global.less                 |   42 +-
 im/src/assets/css/page/contacts.less          |    2 +-
 im/src/assets/css/page/login-auth.less        |    2 +-
 im/src/assets/css/talk/talk-records.less      |    2 +-
 im/src/components/chat/TalkCodeBlock.vue      |   21 +-
 im/src/components/chat/TalkForwardRecord.vue  |    2 +-
 im/src/components/chat/TalkSearchRecord.vue   |    2 +-
 .../chat/messaege/FriendApplyMessage.vue      |    2 +-
 .../components/chat/messaege/ImageMessage.vue |   10 +-
 im/src/components/chat/panel/OtherLink.vue    |   15 +-
 im/src/components/chat/panel/TalkPanel.vue    |    7 +-
 .../chat/panel/template/footPrint.vue         |   19 +-
 .../chat/panel/template/goodsLink.vue         |    8 +-
 .../chat/panel/template/storeDetail.vue       |    6 -
 im/src/components/editor/MeEditor.vue         |   25 +-
 im/src/components/editor/MeEditorEmoticon.vue |    2 +-
 .../components/editor/MeEditorFileManage.vue  |   10 +-
 .../components/editor/MeEditorImageView.vue   |    6 +-
 im/src/components/editor/MeEditorRecorder.vue |    2 +-
 im/src/components/editor/MeEditorVote.vue     |   17 +-
 im/src/components/notify/NewMessageNotify.vue |    6 +-
 im/src/components/svg-icon/index.vue          |    2 +-
 im/src/components/user/UserSearch.vue         |    2 +-
 .../user/user-card/UserCardDetail.vue         |   26 +-
 im/src/components/user/user-card/index.js     |   59 +-
 im/src/core/directives.js                     |   98 +-
 im/src/core/global-component.js               |   44 +-
 im/src/core/icons.js                          |   39 +-
 im/src/core/lazy-use.js                       |   88 -
 im/src/icons/index.js                         |   15 +-
 im/src/im-server/event/base.js                |    6 +-
 im/src/im-server/event/talk.js                |   28 +-
 im/src/im-server/socket-instance.js           |    4 +-
 im/src/main.js                                |  137 +-
 im/src/mixins/main-mixin.js                   |    2 +-
 im/src/plugins/contextmenu.js                 |  110 +
 im/src/plugins/element.js                     |   10 +
 im/src/plugins/ws-socket.js                   |   12 +-
 im/src/router/index.js                        |   70 +-
 im/src/store/index.js                         |   31 +-
 im/src/store/modules/emoticon.js              |    8 +-
 im/src/store/modules/talk.js                  |    4 +-
 im/src/utils/app-bridge.js                    |   37 +
 im/src/utils/message.js                       |   11 +
 im/src/utils/request.js                       |   10 +-
 im/src/views/message/index.vue                |   17 +-
 im/src/views/other/404.vue                    |    2 +-
 im/vue.config.js                              |   42 +-
 .../page-decoration/modelList/forYour.vue     |    6 +-
 .../src/views/page-decoration/wap/index.vue   |    2 +-
 seller/MIGRATION-VUE3.md                      |   40 +
 seller/babel.config.js                        |   11 +-
 seller/package.json                           |   51 +-
 seller/public/index.html                      |    2 +-
 seller/scripts/copy-manager-migrations.js     |  132 +
 seller/scripts/migrate-iview-to-element.js    |  229 ++
 seller/src/App.vue                            |   29 +-
 seller/src/assets/align-text-center.png       |  Bin 0 -> 270 bytes
 seller/src/assets/align-text-left.png         |  Bin 0 -> 266 bytes
 seller/src/assets/align-text-right.png        |  Bin 0 -> 271 bytes
 seller/src/components/lili/set-password.vue   |  140 +
 seller/src/components/price-color-scheme.vue  |   58 +
 seller/src/libs/axios.js                      |    6 +-
 seller/src/libs/util.js                       |  552 ++--
 seller/src/main.js                            |  140 +-
 seller/src/plugins/element.js                 |   11 +
 seller/src/router/index.js                    |   77 +-
 seller/src/store/index.js                     |   41 +-
 seller/src/store/modules/app.js               |  108 +-
 seller/src/styles/common.scss                 |    6 +
 seller/src/styles/element.scss                |   95 +
 seller/src/styles/table-common.scss           |   15 +-
 seller/src/styles/theme.less                  |    9 +-
 seller/src/utils/message.js                   |   74 +
 seller/src/utils/print.js                     |   26 +
 seller/src/views/ForgetPassword.vue           |  376 ++-
 seller/src/views/Main.vue                     |  234 +-
 .../views/change-password/change-password.vue |  191 +-
 .../views/distribution/distributionGoods.vue  |  423 ++-
 .../views/distribution/distributionOrder.vue  |  402 ++-
 seller/src/views/error-page/403.vue           |   42 +-
 seller/src/views/error-page/404.vue           |  156 +-
 seller/src/views/error-page/500.vue           |  179 +-
 .../src/views/goods/goods-manage/category.vue |  525 ++--
 .../views/goods/goods-seller/addGoods.scss    |   25 +-
 .../goods/goods-seller/alertQuantity.vue      |  734 ++---
 .../views/goods/goods-seller/draftGoods.vue   |  239 +-
 seller/src/views/goods/goods-seller/goods.vue | 1676 +++++-------
 .../goods/goods-seller/goodsOperation.vue     |   10 +-
 .../goods-seller/goodsOperationFirst.vue      |   12 +-
 .../goods/goods-seller/goodsOperationSec.vue  |  660 +++--
 seller/src/views/home/home.scss               |    4 +-
 seller/src/views/home/home.vue                |  199 +-
 .../src/views/lili-components/affix-time.vue  |  191 +-
 .../views/lili-components/editor/index.vue    |    2 +-
 .../lili-components/editor/upload-image.vue   |  256 +-
 .../views/lili-components/multiple-region.vue |  209 +-
 seller/src/views/lili-dialog/goods-dialog.vue |  198 +-
 seller/src/views/lili-dialog/index.vue        |   96 +-
 seller/src/views/lili-dialog/link-dialog.vue  |   65 +-
 seller/src/views/lili-dialog/style.scss       |  184 +-
 .../views/lili-dialog/template/category.vue   |    1 +
 .../src/views/lili-dialog/template/index.js   |   23 +-
 .../src/views/lili-dialog/template/other.vue  |  186 +-
 .../src/views/lili-dialog/template/pages.vue  |    9 +-
 .../src/views/lili-dialog/template/shops.vue  |   94 +-
 seller/src/views/lili-dialog/wap.js           |   54 +-
 seller/src/views/login.vue                    |  345 +--
 .../views/main-components/config-drawer.vue   |   53 +-
 seller/src/views/main-components/footer.vue   |   11 +-
 .../src/views/main-components/fullscreen.vue  |   85 +-
 seller/src/views/main-components/header.vue   |   56 +-
 .../src/views/main-components/message-tip.vue |   33 +-
 .../shrinkable-menu/shrinkable-menu.vue       |  128 +-
 .../shrinkable-menu/styles/menu.scss          |   19 +-
 .../main-components/tags-page-opened.vue      |  298 +-
 seller/src/views/member/memberComment.vue     |  370 ++-
 seller/src/views/message/message.vue          |  522 ++--
 .../my-components/lili/circle-loading.vue     |   20 +-
 .../my-components/lili/department-choose.vue  |   56 +-
 .../lili/department-tree-choose.vue           |  145 +-
 .../views/my-components/lili/set-password.vue |  157 +-
 .../my-components/lili/upload-pic-input.vue   |  243 +-
 .../my-components/lili/upload-pic-thumb.vue   |  306 +--
 seller/src/views/my-components/map/index.vue  |   63 +-
 .../views/my-components/map/multiple-map.vue  |  117 +-
 .../tree-table/Checkbox/Checkbox.vue          |    2 +-
 .../my-components/tree-table/Table/Table.vue  |    9 +-
 .../tree-table/Table/TableBody.js             |   68 +-
 .../tree-table/Table/utils/scrollBarWidth.js  |   22 +-
 .../src/views/my-components/verify/index.vue  |  160 +-
 .../order/after-order/orderComplaint.vue      |  424 ++-
 .../after-order/orderComplaintDetail.vue      |  508 ++--
 .../order/after-order/returnGoodsOrder.vue    |  693 ++---
 .../order/after-order/returnMoneyOrder.vue    |  463 ++--
 .../after-order/reurnGoodsOrderDetail.vue     |  850 +++---
 .../views/order/order/exportOrderDeliver.vue  |  118 +-
 seller/src/views/order/order/orderDetail.vue  | 1606 ++++-------
 seller/src/views/order/order/orderList.vue    |  763 +++---
 .../views/order/order/virtualOrderList.vue    |  389 ++-
 .../views/order/receiptManager/receipt.vue    |  458 ++--
 .../views/promotion/coupon/coupon-publish.vue |  519 ++--
 .../views/promotion/coupon/coupon-receive.vue |  341 +--
 seller/src/views/promotion/coupon/coupon.vue  |  701 +++--
 .../full-discount/full-discount-add.vue       |  555 ++--
 .../promotion/full-discount/full-discount.vue |  406 ++-
 seller/src/views/promotion/live/addLive.vue   |  620 ++---
 seller/src/views/promotion/live/live.vue      |  229 +-
 seller/src/views/promotion/live/liveGoods.vue |  541 ++--
 .../views/promotion/pintuan/pintuan-edit.vue  |  316 ++-
 .../views/promotion/pintuan/pintuan-goods.vue |  421 +--
 .../src/views/promotion/pintuan/pintuan.vue   |  408 +--
 .../views/promotion/seckill/seckill-goods.vue |  488 +---
 .../views/promotion/seckill/seckill-setup.vue |  133 +
 .../src/views/promotion/seckill/seckill.vue   |  394 +--
 .../views/shop/bill/accountStatementBill.vue  |  374 ++-
 seller/src/views/shop/bill/billDetail.vue     |  976 +++----
 seller/src/views/shop/bill/storeBill.vue      |  351 +--
 seller/src/views/shop/floorList.vue           |  292 +-
 .../views/shop/hotzone/components/Zone.vue    |   43 +-
 seller/src/views/shop/hotzone/index.vue       |   41 +-
 seller/src/views/shop/modelForm.vue           |  233 +-
 seller/src/views/shop/modelFormItem.vue       |  122 +-
 seller/src/views/shop/modelList/carousel.vue  |  138 +-
 seller/src/views/shop/modelList/carousel1.vue |  107 +-
 seller/src/views/shop/modelList/carousel2.vue |  199 +-
 .../views/shop/modelList/firstPageAdvert.vue  |  330 ++-
 seller/src/views/shop/modelList/forYour.vue   |  445 +++
 .../src/views/shop/modelList/goodsAndType.vue |  365 +++
 seller/src/views/shop/modelList/mixModel.vue  |  326 +++
 .../views/shop/modelList/mixs/mix-brand.vue   |  133 +
 .../views/shop/modelList/mixs/mix-goods.vue   |  124 +
 .../src/views/shop/modelList/newGoodsSort.vue |  745 ++---
 seller/src/views/shop/modelList/notEnough.vue |   44 +-
 .../shop/modelList/oneRowThreeColumns.vue     |  155 ++
 .../views/shop/modelList/onlyGoodsModel.vue   |  280 ++
 seller/src/views/shop/modelList/recommend.vue |  110 +-
 .../shop/modelList/seckill-only-album.vue     |  291 ++
 seller/src/views/shop/modelList/seckill.vue   |    6 +-
 seller/src/views/shop/ossManage.vue           | 2391 +++++++++--------
 seller/src/views/shop/ossManages.vue          | 2292 +++++++++-------
 seller/src/views/shop/renovation.vue          |   76 +-
 seller/src/views/shop/ship/logistics.vue      |  325 +--
 seller/src/views/shop/ship/shipTemplate.vue   |   95 +-
 seller/src/views/shop/shopAddress.vue         |  499 ++--
 seller/src/views/shop/shopSetting.vue         |  201 +-
 .../views/shop/system/clerk/clerkManage.vue   |  486 ++--
 .../department/storeDepartmentManage.vue      |  390 ++-
 .../shop/system/role/storeRoleManage.vue      |  676 ++---
 seller/src/views/shop/wap/advertising.vue     |   97 +-
 .../src/views/shop/wap/alertAdvertising.vue   |   91 +-
 seller/src/views/shop/wap/decorate.scss       |    2 +-
 seller/src/views/shop/wap/decorate.vue        |  590 +++-
 seller/src/views/shop/wap/index.vue           |  140 +-
 seller/src/views/shop/wap/main.vue            |   18 +-
 seller/src/views/shop/wap/navbar.vue          |  181 +-
 seller/src/views/shop/wap/style.scss          |    2 +-
 .../views/shop/wap/template/tpl_banner.vue    |   10 +-
 .../views/shop/wap/template/tpl_flex_one.vue  |    1 -
 .../src/views/shop/wap/template/tpl_goods.vue |   15 +-
 .../src/views/shop/wap/template/tpl_menu.vue  |   57 +-
 .../views/shop/wap/template/tpl_search.vue    |    4 +-
 .../src/views/shop/wap/template/tpl_title.vue |   29 +-
 seller/src/views/shop/wap/wapList.vue         |  246 +-
 seller/src/views/statistics/goods.vue         |  124 +-
 seller/src/views/statistics/order.vue         |  463 ++--
 .../views/statistics/order/orderDetail.vue    |   80 +-
 .../views/statistics/order/refundOrder.vue    |   49 +-
 seller/src/views/statistics/traffic.vue       |  142 +-
 seller/src/views/sys/oss-manage/ossManage.vue |  781 ++++--
 seller/vue.config.js                          |  154 +-
 322 files changed, 25693 insertions(+), 24453 deletions(-)
 delete mode 100644 buyer/.babelrc
 create mode 100644 buyer/MIGRATION-VUE3.md
 create mode 100644 buyer/scripts/fix-broken-tags.js
 create mode 100644 buyer/scripts/fix-dialog-slots.js
 create mode 100644 buyer/scripts/fix-duplicate-size.js
 create mode 100644 buyer/scripts/fix-el-icon-click.js
 create mode 100644 buyer/scripts/fix-filters.js
 create mode 100644 buyer/scripts/fix-runtime-compat.js
 create mode 100644 buyer/scripts/fix-slots.js
 create mode 100644 buyer/scripts/fix-span-tags.js
 create mode 100644 buyer/scripts/fix-stray-templates.js
 create mode 100644 buyer/scripts/migrate-iview-to-element.js
 create mode 100644 buyer/scripts/replace-icon.js
 create mode 100644 buyer/scripts/replace-page.js
 create mode 100644 buyer/src/assets/styles/element.scss
 create mode 100644 buyer/src/components/indexDecorate/modelList/setup-box.scss
 create mode 100644 buyer/src/plugins/element.js
 create mode 100644 buyer/src/utils/iconMap.js
 create mode 100644 buyer/src/utils/message.js
 create mode 100644 im/scripts/fix-deep.js
 delete mode 100644 im/src/core/lazy-use.js
 create mode 100644 im/src/plugins/contextmenu.js
 create mode 100644 im/src/plugins/element.js
 create mode 100644 im/src/utils/app-bridge.js
 create mode 100644 im/src/utils/message.js
 create mode 100644 seller/MIGRATION-VUE3.md
 create mode 100644 seller/scripts/copy-manager-migrations.js
 create mode 100644 seller/scripts/migrate-iview-to-element.js
 create mode 100644 seller/src/assets/align-text-center.png
 create mode 100644 seller/src/assets/align-text-left.png
 create mode 100644 seller/src/assets/align-text-right.png
 create mode 100644 seller/src/components/lili/set-password.vue
 create mode 100644 seller/src/components/price-color-scheme.vue
 create mode 100644 seller/src/plugins/element.js
 create mode 100644 seller/src/styles/element.scss
 create mode 100644 seller/src/utils/message.js
 create mode 100644 seller/src/utils/print.js
 create mode 100644 seller/src/views/promotion/seckill/seckill-setup.vue
 create mode 100644 seller/src/views/shop/modelList/forYour.vue
 create mode 100644 seller/src/views/shop/modelList/goodsAndType.vue
 create mode 100644 seller/src/views/shop/modelList/mixModel.vue
 create mode 100644 seller/src/views/shop/modelList/mixs/mix-brand.vue
 create mode 100644 seller/src/views/shop/modelList/mixs/mix-goods.vue
 create mode 100644 seller/src/views/shop/modelList/oneRowThreeColumns.vue
 create mode 100644 seller/src/views/shop/modelList/onlyGoodsModel.vue
 create mode 100644 seller/src/views/shop/modelList/seckill-only-album.vue

diff --git a/buyer/.babelrc b/buyer/.babelrc
deleted file mode 100644
index 3a280ba3..00000000
--- a/buyer/.babelrc
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-      }
-    }],
-    "stage-2"
-  ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
-}
diff --git a/buyer/MIGRATION-VUE3.md b/buyer/MIGRATION-VUE3.md
new file mode 100644
index 00000000..566e1b4a
--- /dev/null
+++ b/buyer/MIGRATION-VUE3.md
@@ -0,0 +1,39 @@
+# Buyer 买家端 Vue 3 迁移说明
+
+## 技术栈
+
+- Vue 3 + Vue Router 4 + Vuex 4
+- Element Plus（替代 view-design / iView）
+- 保留 `$Message` / `$Modal` / `$Notice` 兼容层（`src/utils/message.js`）
+
+## 启动
+
+```bash
+cd buyer
+yarn install
+yarn dev    # 默认端口 10000
+yarn build
+```
+
+## 迁移要点
+
+1. **入口** `src/main.js` 使用 `createApp`，全局过滤器改为 `$filters`
+2. **路由** `src/router/index.js` 使用 `createRouter` + 动态 `import()`
+3. **请求** `src/plugins/request.js` 使用 Element Plus `ElLoading`
+4. **iView 组件已全部替换**：轮播 `el-carousel`、下拉 `el-dropdown`、侧栏 `el-menu`、头像 `el-avatar` 等
+5. **图标映射** `src/utils/iconMap.js` — 动态图标（如侧边栏菜单）通过 `resolveIcon()` 使用
+6. **自定义字体图标** `icomoon` 保留为 `<i class="icomoon icon-*">`（购物车步骤条、钱包等）
+7. **首页装修** `indexDecorate/modelList` 保留买家端展示逻辑（非 manager 编辑版）
+8. **特殊替换**
+   - `vue-piczoom` → `el-image` 预览
+   - `mv-count-down` → 内置倒计时
+   - 秒杀轮播 → 横向滚动列表
+
+## 批量脚本
+
+- `scripts/migrate-iview-to-element.js` — iView → Element 模板替换
+- `scripts/fix-filters.js` — Vue 2 过滤器语法修复
+- `scripts/replace-page.js` — `<Page>` → `el-pagination`
+- `scripts/replace-icon.js` — 静态 `<Icon type>` → `el-icon`
+- `scripts/fix-el-icon-click.js` — 修复 `@click` 绑定
+- `scripts/fix-broken-tags.js` — 闭合标签修复
diff --git a/buyer/package.json b/buyer/package.json
index 66dd7dba..918cee50 100644
--- a/buyer/package.json
+++ b/buyer/package.json
@@ -8,35 +8,37 @@
     "dev": "vue-cli-service serve"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=16"
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "0.0.7",
-    "axios": "^0.19.2",
+    "@element-plus/icons-vue": "^2.3.1",
+    "axios": "^0.21.1",
+    "core-js": "^3.36.0",
     "dplayer": "^1.27.1",
+    "element-plus": "^2.6.3",
     "js-cookie": "^2.2.1",
-    "less": "^2.7.0",
-    "less-loader": "^5.0.0",
-    "mv-count-down": "^0.1.15",
-    "sass": "^1.63.6",
-    "postcss-loader": "^4.3.0",
+    "nprogress": "^0.2.0",
     "psl": "^1.8.0",
     "qs": "^6.9.4",
+    "sass": "^1.63.6",
+    "sass-loader": "^10.4.1",
+    "swiper": "^5.4.5",
     "uuid": "^8.3.2",
-    "view-design": "^4.3.2",
-    "vue": "^2.6.11",
-    "vue-awesome-swiper": "^3.1.3",
-    "vue-piczoom": "^1.0.6",
-    "vue-qr": "^2.3.0",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vue": "^3.4.21",
+    "vue-awesome-swiper": "^4.1.1",
+    "vue-qr": "^5.0.3",
+    "vue-router": "^4.3.0",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vue/cli-service": "~4.5.0",
-    "compression-webpack-plugin": "^5.0.0",
-    "sass-loader": "^10.4.1",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "vue-template-compiler": "^2.6.11"
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/compiler-sfc": "^3.4.21",
+    "compression-webpack-plugin": "^10.0.0",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.4",
+    "webpack": "^5.95.0"
   },
   "browserslist": [
     "> 1%",
@@ -45,7 +47,6 @@
   ],
   "resolutions": {
     "minimatch": "^3.1.2",
-    "node-sass": "npm:sass@^1.63.6",
     "@achrinza/node-ipc": "9.2.2"
   }
 }
diff --git a/buyer/public/index.html b/buyer/public/index.html
index 3aad3f9f..1a632be6 100644
--- a/buyer/public/index.html
+++ b/buyer/public/index.html
@@ -7,20 +7,12 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>logo.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
-      <link rel="stylesheet" href="<%=css%>" />
-      <% } %>
   </head>
   <body>
-    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
-      <script src="<%=js%>"></script>
-      <% } %>
-      <script src="/config.js"></script>
+    <script src="/config.js"></script>
     <noscript>
-
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/buyer/scripts/fix-broken-tags.js b/buyer/scripts/fix-broken-tags.js
new file mode 100644
index 00000000..01a4e6f7
--- /dev/null
+++ b/buyer/scripts/fix-broken-tags.js
@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function fix(content) {
+  let c = content;
+  c = c.replace(/<\/Button>/g, "</el-button>");
+  c = c.replace(/<\/Button\b/g, "</el-button");
+  c = c.replace(/<\/Input>/g, "</el-input>");
+  c = c.replace(/<\/Input\b/g, "</el-input");
+  c = c.replace(/<\/Option>/g, "</el-option>");
+  c = c.replace(/<\/Option\b/g, "</el-option");
+  c = c.replace(/<\/Checkbox>/g, "</el-checkbox>");
+  c = c.replace(/<\/Checkbox\b/g, "</el-checkbox");
+  c = c.replace(/<\/Select>/g, "</el-select>");
+  c = c.replace(/<\/Select\b/g, "</el-select");
+  c = c.replace(/<\/Form>/g, "</el-form>");
+  c = c.replace(/<\/Modal>/g, "</el-dialog>");
+  c = c.replace(/@click\.native/g, "@click");
+  c = c.replace(/@on-search/g, "@keyup.enter");
+  c = c.replace(/\bsearch\b(?=\s+enter-button)/g, "");
+  c = c.replace(/\benter-button\b/g, "");
+  c = c.replace(/<BreadcrumbItem/g, "<el-breadcrumb-item");
+  c = c.replace(/<\/BreadcrumbItem>/g, "</el-breadcrumb-item>");
+  c = c.replace(/<Breadcrumb/g, "<el-breadcrumb");
+  c = c.replace(/<\/Breadcrumb>/g, "</el-breadcrumb>");
+  c = c.replace(/type="error"/g, 'type="danger"');
+  c = c.replace(/<i-col/g, "<div");
+  c = c.replace(/<\/i-col>/g, "</div>");
+  c = c.replace(/\{\{([^}|]+)\s*\|\s*secrecyMobile\s*\}\}/g, "{{ $filters.secrecyMobile($1) }}");
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(path.join(ROOT, "src"))) {
+  const original = fs.readFileSync(file, "utf8");
+  const fixed = fix(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+  }
+}
+console.log(`Fixed tags in ${count} files`);
diff --git a/buyer/scripts/fix-dialog-slots.js b/buyer/scripts/fix-dialog-slots.js
new file mode 100644
index 00000000..07b61055
--- /dev/null
+++ b/buyer/scripts/fix-dialog-slots.js
@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function fix(content) {
+  let c = content;
+
+  c = c.replace(/<p #header>/g, "<template #header><p>");
+  c = c.replace(
+    /(<template #header><p>[\s\S]*?<\/p>)(\s*<div)/g,
+    "$1</template>$2"
+  );
+
+  c = c.replace(
+    /<template #footer><div([^>]*)>([\s\S]*?)<\/div><\/template><\/el-dialog>/g,
+    "<template #footer><div$1>$2</div></template>\n    </el-dialog>"
+  );
+
+  c = c.replace(
+    /<template #default\s*>([\s\S]*?)<\/template\s*>/g,
+    (match, inner) => {
+      if (match.includes("el-alert")) {
+        return `<template #title>${inner}</template>`;
+      }
+      return match;
+    }
+  );
+
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(path.join(ROOT, "src"))) {
+  const original = fs.readFileSync(file, "utf8");
+  const fixed = fix(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+  }
+}
+console.log(`Fixed dialog slots in ${count} files`);
diff --git a/buyer/scripts/fix-duplicate-size.js b/buyer/scripts/fix-duplicate-size.js
new file mode 100644
index 00000000..4b8f2b88
--- /dev/null
+++ b/buyer/scripts/fix-duplicate-size.js
@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..", "src");
+
+function walk(dir, files = []) {
+  for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+    const f = path.join(dir, e.name);
+    if (e.isDirectory()) walk(f, files);
+    else if (e.name.endsWith(".vue")) files.push(f);
+  }
+  return files;
+}
+
+let n = 0;
+for (const file of walk(ROOT)) {
+  let c = fs.readFileSync(file, "utf8");
+  const next = c.replace(/:size="(\d+)"\s+:size="\1"/g, ':size="$1"');
+  if (next !== c) {
+    fs.writeFileSync(file, next);
+    n++;
+    console.log(path.relative(ROOT, file));
+  }
+}
+console.log(`Fixed duplicate :size in ${n} files`);
diff --git a/buyer/scripts/fix-el-icon-click.js b/buyer/scripts/fix-el-icon-click.js
new file mode 100644
index 00000000..1d89a78e
--- /dev/null
+++ b/buyer/scripts/fix-el-icon-click.js
@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..", "src");
+
+function walk(dir, files = []) {
+  for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+    const f = path.join(dir, e.name);
+    if (e.isDirectory()) walk(f, files);
+    else if (e.name.endsWith(".vue")) files.push(f);
+  }
+  return files;
+}
+
+let n = 0;
+for (const file of walk(ROOT)) {
+  let c = fs.readFileSync(file, "utf8");
+  const next = c
+    .replace(/<el-icon([^>]*?):click=/g, "<el-icon$1@click=")
+    .replace(/:class="refresh"/g, 'class="refresh"')
+    .replace(/:size="20" @click="show = false" :size="20"/g, ':size="20" @click="show = false"');
+  if (next !== c) {
+    fs.writeFileSync(file, next);
+    n++;
+  }
+}
+console.log(`Fixed el-icon click in ${n} files`);
diff --git a/buyer/scripts/fix-filters.js b/buyer/scripts/fix-filters.js
new file mode 100644
index 00000000..e73db3ab
--- /dev/null
+++ b/buyer/scripts/fix-filters.js
@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function fixFilters(content) {
+  let c = content;
+
+  // Fix broken: {{ expr {{ $filters.unitPrice(args) }}
+  c = c.replace(
+    /\{\{\s*([^}{]+?)\s*\{\{\s*\$filters\.unitPrice\(([^)]*)\)\s*\}\}/g,
+    "{{ $filters.unitPrice($1, $2) }}"
+  );
+
+  // Fix: {{ expr | unitPrice }} or {{ expr | unitPrice('￥') }}
+  c = c.replace(
+    /\{\{\s*([^}|]+?)\s*\|\s*unitPrice(?:\(([^)]*)\))?\s*\}\}/g,
+    (_, expr, args) => {
+      const e = expr.trim();
+      return args !== undefined
+        ? `{{ $filters.unitPrice(${e}, ${args}) }}`
+        : `{{ $filters.unitPrice(${e}) }}`;
+    }
+  );
+
+  // Fix inline without braces: expr | unitPrice("￥")
+  c = c.replace(
+    /(?<!\{\{)\s*([a-zA-Z0-9_.?()[\]'"\s]+?)\s*\|\s*unitPrice\(([^)]*)\)/g,
+    (match, expr, args) => {
+      if (match.includes("{{")) return match;
+      return `{{ $filters.unitPrice(${expr.trim()}, ${args}) }}`;
+    }
+  );
+
+  // Fix inline without args: expr | unitPrice
+  c = c.replace(
+    /(?<!\{\{)\s*([a-zA-Z0-9_.?()[\]'"\s]+?)\s*\|\s*unitPrice(?!\()/g,
+    (match, expr) => {
+      if (match.includes("{{") || match.includes("$filters")) return match;
+      return `{{ $filters.unitPrice(${expr.trim()}) }}`;
+    }
+  );
+
+  // Fix unixToDate filter
+  c = c.replace(
+    /\{\{\s*([^}|]+?)\s*\|\s*unixToDate(?:\(([^)]*)\))?\s*\}\}/g,
+    (_, expr, args) => {
+      const e = expr.trim();
+      return args !== undefined
+        ? `{{ $filters.unixToDate(${e}, ${args}) }}`
+        : `{{ $filters.unixToDate(${e}) }}`;
+    }
+  );
+
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(path.join(ROOT, "src"))) {
+  const original = fs.readFileSync(file, "utf8");
+  const fixed = fixFilters(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+  }
+}
+console.log(`Fixed filters in ${count} files`);
diff --git a/buyer/scripts/fix-runtime-compat.js b/buyer/scripts/fix-runtime-compat.js
new file mode 100644
index 00000000..27994935
--- /dev/null
+++ b/buyer/scripts/fix-runtime-compat.js
@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function fix(content) {
+  let c = content;
+
+  c = c.replace(/<el-pagination\b/g, "<Page");
+  c = c.replace(/<\/el-pagination>/g, "</Page>");
+
+  c = c.replace(
+    /<Icon([^>]*)\s+#prepend\s*>\s*<\/Icon>/g,
+    "<template #prepend><Icon$1></Icon></template>"
+  );
+  c = c.replace(
+    /<Icon([^>]*)\s+#prepend\s*>\s*<\/Icon>/g,
+    "<template #prepend><Icon$1></Icon></template>"
+  );
+  c = c.replace(
+    /<template #prepend><Icon([^>]*)\s*\/>/g,
+    "<template #prepend><Icon$1></Icon></template>"
+  );
+
+  c = c.replace(/@keyup\.enter\.native/g, "@keyup.enter");
+  c = c.replace(/slot="append"/g, "#append");
+  c = c.replace(/(<div[^>]*)\s+#append/g, "<template #append>$1");
+
+  c = c.replace(/(<el-button[^>]*)\slong/g, '$1 style="width:100%"');
+  c = c.replace(/@on-select/g, "@select");
+  c = c.replace(/@on-click/g, "@click");
+
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(path.join(ROOT, "src"))) {
+  const original = fs.readFileSync(file, "utf8");
+  const fixed = fix(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+  }
+}
+console.log(`Runtime compat fixes in ${count} files`);
diff --git a/buyer/scripts/fix-slots.js b/buyer/scripts/fix-slots.js
new file mode 100644
index 00000000..d572a7c4
--- /dev/null
+++ b/buyer/scripts/fix-slots.js
@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function fix(content) {
+  let c = content;
+
+  c = c.replace(
+    /<template #default="(\{[^"]+\})" #([a-zA-Z0-9_-]+)>/g,
+    '<template #$2="$1">'
+  );
+
+  c = c.replace(
+    /<div([^>]*) #footer([^>]*)>/g,
+    '<template #footer><div$1$2>'
+  );
+  c = c.replace(/<\/div>\s*(?=<\/el-dialog>)/g, "</div></template>");
+
+  c = c.replace(/<span #append>/g, "<template #append><span>");
+  c = c.replace(/<\/span><\/el-input/g, "</span></template></el-input");
+  c = c.replace(/><span #append>/g, "><template #append><span>");
+
+  c = c.replace(/<el-button #append/g, "<template #append><el-button");
+  c = c.replace(
+    /<\/el-button>(\s*<\/el-input>)/g,
+    "</el-button></template>$1"
+  );
+
+  c = c.replace(/<template #desc\b/g, "<template #default");
+
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(path.join(ROOT, "src"))) {
+  const original = fs.readFileSync(file, "utf8");
+  const fixed = fix(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+  }
+}
+console.log(`Fixed slots in ${count} files`);
diff --git a/buyer/scripts/fix-span-tags.js b/buyer/scripts/fix-span-tags.js
new file mode 100644
index 00000000..bd2df87d
--- /dev/null
+++ b/buyer/scripts/fix-span-tags.js
@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function fix(content) {
+  let c = content;
+  c = c.replace(/<\/span\s*\n\s*>/g, "</span>");
+  c = c.replace(/<\/span\s+>/g, "</span>");
+  c = c.replace(/<i-input/g, "<el-input");
+  c = c.replace(/<\/i-input>/g, "</el-input>");
+  c = c.replace(
+    /<Icon([^>]*)\s+#prepend\s*\/>/g,
+    "<template #prepend><Icon$1 /></template>"
+  );
+  c = c.replace(
+    /<template #append><el-button([^>]*)>([\s\S]*?)<\/el-button>\s*<\/i-input>/g,
+    "<template #append><el-button$1>$2</el-button></template></el-input>"
+  );
+  c = c.replace(
+    /<template #append><el-button([^>]*)>([\s\S]*?)<\/el-button>\s*<\/el-input>/g,
+    "<template #append><el-button$1>$2</el-button></template></el-input>"
+  );
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(path.join(ROOT, "src"))) {
+  const original = fs.readFileSync(file, "utf8");
+  const fixed = fix(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+  }
+}
+console.log(`Fixed span/input tags in ${count} files`);
diff --git a/buyer/scripts/fix-stray-templates.js b/buyer/scripts/fix-stray-templates.js
new file mode 100644
index 00000000..060ceb98
--- /dev/null
+++ b/buyer/scripts/fix-stray-templates.js
@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function fix(content) {
+  let c = content;
+
+  c = c.replace(
+    /(<div[^>]*)\s+#content>/g,
+    "<template #content><div$1>"
+  );
+  c = c.replace(
+    /(<\/el-tooltip>)/g,
+    (match, _m, offset, str) => {
+      return match;
+    }
+  );
+
+  c = c.replace(
+    /(<div style="white-space:[^"]*"[^>]*>[\s\S]*?<\/div>)(\s*<\/el-tooltip>)/g,
+    "$1</template>$2"
+  );
+
+  c = c.replace(/<\/div><\/template><\/el-dialog>/g, (m, offset, str) => {
+    const before = str.slice(Math.max(0, offset - 200), offset);
+    if (before.includes("#footer")) return m;
+    return "</div></el-dialog>";
+  });
+
+  c = c.replace(/<i(\s[^>]*)\/>/g, "<i$1></i>");
+
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(path.join(ROOT, "src"))) {
+  const original = fs.readFileSync(file, "utf8");
+  const fixed = fix(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+  }
+}
+console.log(`Fixed stray templates in ${count} files`);
diff --git a/buyer/scripts/migrate-iview-to-element.js b/buyer/scripts/migrate-iview-to-element.js
new file mode 100644
index 00000000..f8e6a793
--- /dev/null
+++ b/buyer/scripts/migrate-iview-to-element.js
@@ -0,0 +1,227 @@
+#!/usr/bin/env node
+/**
+ * Migrate buyer Vue files from iView to Element Plus.
+ * Usage: node scripts/migrate-iview-to-element.js
+ */
+const fs = require("fs");
+const path = require("path");
+
+const BUYER_ROOT = path.join(__dirname, "..");
+const MANAGER_ROOT = path.join(__dirname, "../../manager");
+
+const MODEL_LIST = [
+  ["Carousel.vue", "carousel.vue"],
+  ["Carousel1.vue", "carousel1.vue"],
+  ["Carousel2.vue", "carousel2.vue"],
+  ["FirstPageAdvert.vue", "firstPageAdvert.vue"],
+  ["NewGoodsSort.vue", "newGoodsSort.vue"],
+  ["NotEnough.vue", "notEnough.vue"],
+  ["Recommend.vue", "recommend.vue"],
+  ["Seckill.vue", "seckill.vue"],
+  ["forYour.vue", "forYour.vue"],
+  ["goodsAndType.vue", "goodsAndType.vue"],
+  ["mixModel.vue", "mixModel.vue"],
+  ["oneRowThreeColumns.vue", "oneRowThreeColumns.vue"],
+  ["onlyGoodsModel.vue", "onlyGoodsModel.vue"],
+  ["mixs/mix-brand.vue", "mixs/mix-brand.vue"],
+  ["mixs/mix-goods.vue", "mixs/mix-goods.vue"],
+];
+
+const DECORATE_COPY_MAP = [
+  [
+    "src/components/indexDecorate/ModelForm.vue",
+    "src/views/page-decoration/modelForm.vue",
+  ],
+  [
+    "src/components/indexDecorate/ModelFormItem.vue",
+    "src/views/page-decoration/modelFormItem.vue",
+  ],
+];
+
+MODEL_LIST.forEach(([buyerName, managerName]) => {
+  DECORATE_COPY_MAP.push([
+    `src/components/indexDecorate/modelList/${buyerName}`,
+    `src/views/page-decoration/modelList/${managerName}`,
+  ]);
+});
+
+const TARGET_DIRS = ["src/pages", "src/components"];
+
+function adaptBuyerContent(content) {
+  return content
+    .replace(/@\/views\/page-decoration\//g, "@/components/indexDecorate/")
+    .replace(/admin-setting/g, "buyer-setting")
+    .replace(/adminPCPageCache/g, "buyerPCPageCache")
+    .replace(/getStore\('adminPCPageCache'\)/g, "getStore('buyerPCPageCache')")
+    .replace(/setStore\('adminPCPageCache'/g, "setStore('buyerPCPageCache'");
+}
+
+function applyScriptTransforms(content) {
+  let c = content;
+  c = c.replace(/\$options\.filters\./g, "$filters.");
+  c = c.replace(/\|\s*unitPrice\(/g, "{{ $filters.unitPrice(");
+  c = c.replace(/\|\s*unixToDate\(/g, "{{ $filters.unixToDate(");
+  c = c.replace(/\bbeforeDestroy\b/g, "beforeUnmount");
+  c = c.replace(/this\.\$set\(([^,]+),\s*([^,]+),\s*([^)]+)\)/g, "$1[$2] = $3");
+  c = c.replace(/::v-deep/g, ":deep");
+  c = c.replace(/\/deep\//g, ":deep");
+  c = c.replace(/@on-change/g, "@change");
+  c = c.replace(/@on-click/g, "@click");
+  c = c.replace(/@on-ok/g, "@ok");
+  c = c.replace(/@on-cancel/g, "@cancel");
+  c = c.replace(/@on-clear/g, "@clear");
+  c = c.replace(/@on-open-change/g, "@visible-change");
+  c = c.replace(/@on-page-size-change/g, "@size-change");
+  c = c.replace(/@on-select/g, "@select");
+  c = c.replace(/@keydown\.enter\.native/g, "@keyup.enter");
+  c = c.replace(/slot-scope="([^"]+)"/g, '#default="$1"');
+  c = c.replace(/slot="([^"]+)"/g, '#$1');
+  c = c.replace(/from ['"]view-design['"]/g, 'from "@/utils/message"');
+  c = c.replace(/import\s*\{([^}]*)\}\s*from\s*['"]view-design['"]/g, 'import {$1} from "@/utils/message"');
+  return c;
+}
+
+function applyTemplateTransforms(content) {
+  let c = content;
+  const replacements = [
+    [/<\/?Card>/g, (m) => m.replace("Card", "el-card")],
+    [/<Form-item/g, "<el-form-item"],
+    [/<\/Form-item>/g, "</el-form-item>"],
+    [/<FormItem/g, "<el-form-item"],
+    [/<\/FormItem>/g, "</el-form-item>"],
+    [/<Form(\s|>)/g, "<el-form$1"],
+    [/<\/Form>/g, "</el-form>"],
+    [/<InputNumber/g, "<el-input-number"],
+    [/<\/InputNumber>/g, "</el-input-number>"],
+    [/<Input(\s|>)/g, "<el-input$1"],
+    [/<\/Input>/g, "</el-input>"],
+    [/<Button(\s|>)/g, "<el-button$1"],
+    [/<\/Button>/g, "</el-button>"],
+    [/<Select(\s|>)/g, "<el-select$1"],
+    [/<\/Select>/g, "</el-select>"],
+    [/<Option(\s)/g, "<el-option "],
+    [/<\/Option>/g, "</el-option>"],
+    [/<DatePicker/g, "<el-date-picker"],
+    [/<\/DatePicker>/g, "</el-date-picker>"],
+    [/<TimePicker/g, "<el-time-picker"],
+    [/<\/TimePicker>/g, "</el-time-picker>"],
+    [/<Modal/g, "<el-dialog"],
+    [/<\/Modal>/g, "</el-dialog>"],
+    [/<Page(\s)/g, "<el-pagination "],
+    [/<\/Page>/g, "</el-pagination>"],
+    [/<Tabs(\s|>)/g, "<el-tabs$1"],
+    [/<\/Tabs>/g, "</el-tabs>"],
+    [/<TabPane/g, "<el-tab-pane"],
+    [/<\/TabPane>/g, "</el-tab-pane>"],
+    [/<Row(\s|>)/g, "<div$1"],
+    [/<\/Row>/g, "</div>"],
+    [/<Col(\s|>)/g, "<div$1"],
+    [/<\/Col>/g, "</div>"],
+    [/<Tag(\s|>)/g, "<el-tag$1"],
+    [/<\/Tag>/g, "</el-tag>"],
+    [/<Switch(\s|>)/g, "<el-switch$1"],
+    [/<\/Switch>/g, "</el-switch>"],
+    [/<RadioGroup/g, "<el-radio-group"],
+    [/<\/RadioGroup>/g, "</el-radio-group>"],
+    [/<Radio(\s)/g, "<el-radio "],
+    [/<\/Radio>/g, "</el-radio>"],
+    [/<CheckboxGroup/g, "<el-checkbox-group"],
+    [/<\/CheckboxGroup>/g, "</el-checkbox-group>"],
+    [/<Checkbox/g, "<el-checkbox"],
+    [/<\/Checkbox>/g, "</el-checkbox>"],
+    [/<Poptip/g, "<el-popover"],
+    [/<\/Poptip>/g, "</el-popover>"],
+    [/<Tooltip/g, "<el-tooltip"],
+    [/<\/Tooltip>/g, "</el-tooltip>"],
+    [/<Drawer/g, "<el-drawer"],
+    [/<\/Drawer>/g, "</el-drawer>"],
+    [/<Alert/g, "<el-alert"],
+    [/<\/Alert>/g, "</el-alert>"],
+    [/<Badge/g, "<el-badge"],
+    [/<\/Badge>/g, "</el-badge>"],
+    [/<Divider/g, "<el-divider"],
+    [/<\/Divider>/g, "</el-divider>"],
+    [/<Rate/g, "<el-rate"],
+    [/<\/Rate>/g, "</el-rate>"],
+    [/<Steps/g, "<el-steps"],
+    [/<\/Steps>/g, "</el-steps>"],
+    [/<Step(\s)/g, "<el-step "],
+    [/<\/Step>/g, "</el-step>"],
+    [/<Upload/g, "<el-upload"],
+    [/<\/Upload>/g, "</el-upload>"],
+    [/<Cascader/g, "<el-cascader"],
+    [/<\/Cascader>/g, "</el-cascader>"],
+    [/<Affix/g, "<el-affix"],
+    [/<\/Affix>/g, "</el-affix>"],
+    [/<Spin/g, "<el-skeleton"],
+    [/<\/Spin>/g, "</el-skeleton>"],
+    [/:label-width="(\d+)"/g, 'label-width="$1px"'],
+    [/:mask-closable="false"/g, ':close-on-click-modal="false"'],
+    [/:width="(\d+)"/g, 'width="$1"'],
+    [/type="primary"/g, 'type="primary"'],
+  ];
+  for (const [pattern, replacement] of replacements) {
+    c = c.replace(pattern, replacement);
+  }
+  return c;
+}
+
+function walkDir(dir, files = []) {
+  if (!fs.existsSync(dir)) return files;
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      walkDir(full, files);
+    } else if (entry.name.endsWith(".vue")) {
+      files.push(full);
+    }
+  }
+  return files;
+}
+
+const copied = [];
+const transformed = [];
+const skipped = [];
+
+for (const [buyerRel, managerRel] of DECORATE_COPY_MAP) {
+  const managerPath = path.join(MANAGER_ROOT, managerRel);
+  const buyerPath = path.join(BUYER_ROOT, buyerRel);
+  if (!fs.existsSync(managerPath)) {
+    skipped.push({ file: buyerRel, reason: "manager counterpart missing" });
+    continue;
+  }
+  let content = fs.readFileSync(managerPath, "utf8");
+  content = adaptBuyerContent(content);
+  fs.mkdirSync(path.dirname(buyerPath), { recursive: true });
+  fs.writeFileSync(buyerPath, content);
+  copied.push(buyerRel);
+}
+
+const copiedSet = new Set(copied);
+for (const dir of TARGET_DIRS) {
+  const absDir = path.join(BUYER_ROOT, dir);
+  for (const filePath of walkDir(absDir)) {
+    const rel = path.relative(BUYER_ROOT, filePath).replace(/\\/g, "/");
+    if (copiedSet.has(rel)) continue;
+
+    let content = fs.readFileSync(filePath, "utf8");
+    const hasIView =
+      /<(Card|Form|Form-item|FormItem|Table|Button|Modal|Page|Tabs|TabPane|Input|Select|Option|DatePicker|Row|Poptip|Drawer|Upload|Checkbox|Radio|Switch|Tag|Alert|Rate|Steps|Step|Spin|Affix|TimePicker|Cascader|Divider|Badge|InputNumber)\b/.test(
+        content
+      );
+    if (!hasIView) {
+      skipped.push({ file: rel, reason: "no iView components" });
+      continue;
+    }
+
+    content = applyTemplateTransforms(content);
+    content = applyScriptTransforms(content);
+    fs.writeFileSync(filePath, content);
+    transformed.push(rel);
+  }
+}
+
+console.log("=== Buyer Migration Summary ===");
+console.log(`Copied from manager: ${copied.length}`);
+console.log(`Script-transformed: ${transformed.length}`);
+console.log(`Skipped: ${skipped.length}`);
diff --git a/buyer/scripts/replace-icon.js b/buyer/scripts/replace-icon.js
new file mode 100644
index 00000000..d6d7d490
--- /dev/null
+++ b/buyer/scripts/replace-icon.js
@@ -0,0 +1,149 @@
+#!/usr/bin/env node
+/**
+ * 将静态 <Icon type="..." /> 替换为 <el-icon><Xxx /></el-icon>
+ * 动态 :type / custom 属性保留，由人工或 resolveIcon 处理。
+ */
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..", "src");
+
+const TYPE_TO_COMPONENT = {
+  "md-checkmark": "Check",
+  "md-close": "Close",
+  "md-trash": "Delete",
+  "md-add": "Plus",
+  "md-arrow-dropdown": "ArrowDown",
+  "md-arrow-dropup": "ArrowUp",
+  "md-person": "User",
+  "md-lock": "Lock",
+  "md-phone-portrait": "Iphone",
+  "md-key": "Key",
+  "md-link": "Link",
+  "md-refresh": "Refresh",
+  "md-qr-scanner": "Iphone",
+  "ios-arrow-down": "ArrowDown",
+  "ios-arrow-up": "ArrowUp",
+  "ios-arrow-forward": "ArrowRight",
+  "ios-arrow-back": "ArrowLeft",
+  "ios-arrow-round-down": "ArrowDown",
+  "ios-arrow-round-forward": "ArrowRight",
+  "ios-cart-outline": "ShoppingCart",
+  "ios-camera": "Camera",
+  "ios-eye-outline": "View",
+  "ios-trash-outline": "Delete",
+  "ios-alert-outline": "Warning",
+  "ios-help-circle-outline": "Help",
+  "ios-add-circle-outline": "Plus",
+  "ios-information-circle": "InfoFilled",
+  "ios-search": "Search",
+  "ios-text-outline": "Document",
+  "ios-alarm-outline": "AlarmClock",
+  "ios-heart": "StarFilled",
+  "md-close-circle": "CircleClose",
+  edit: "Edit",
+  "trash-a": "Delete",
+  location: "Location",
+};
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory() && entry.name !== "compat") walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function parseAttrs(attrStr) {
+  const attrs = {};
+  const re = /(?::([\w-]+)|@([\w-]+)|([\w-]+))=(?:"([^"]*)"|'([^']*)')|(?::([\w-]+)|@([\w-]+)|([\w-]+))(?=\s|\/|>)/g;
+  let m;
+  while ((m = re.exec(attrStr)) !== null) {
+    const name = m[1] || m[2] || m[3] || m[6] || m[7] || m[8];
+    const value = m[4] ?? m[5] ?? true;
+    attrs[name] = value;
+  }
+  return attrs;
+}
+
+function attrsToString(attrs, exclude = []) {
+  return Object.entries(attrs)
+    .filter(([k]) => !exclude.includes(k))
+    .map(([k, v]) => {
+      if (v === true) return k;
+      if (k.startsWith("@")) return `${k}="${v}"`;
+      return `:${k}="${v}"`;
+    })
+    .join(" ");
+}
+
+function transform(content, filePath) {
+  if (filePath.includes("/compat/")) return content;
+  let c = content;
+  const used = new Set();
+
+  c = c.replace(/<Icon\b([^>]*?)\/>/g, (match, attrStr) => {
+    if (/\bcustom=/.test(attrStr) || /:type=/.test(attrStr)) return match;
+    const attrs = parseAttrs(attrStr);
+    const type = attrs.type;
+    if (!type || !TYPE_TO_COMPONENT[type]) return match;
+    const comp = TYPE_TO_COMPONENT[type];
+    used.add(comp);
+    const rest = attrsToString(attrs, ["type"]);
+    const size = attrs.size ? ` :size="${attrs.size}"` : "";
+    const open = rest ? `<el-icon ${rest}${size}>` : `<el-icon${size}>`;
+    return `${open}<${comp} /></el-icon>`;
+  });
+
+  c = c.replace(/<Icon\b([^>]*?)><\/Icon>/g, (match, attrStr) => {
+    if (/\bcustom=/.test(attrStr) || /:type=/.test(attrStr)) return match;
+    const attrs = parseAttrs(attrStr);
+    const type = attrs.type;
+    if (!type || !TYPE_TO_COMPONENT[type]) return match;
+    const comp = TYPE_TO_COMPONENT[type];
+    used.add(comp);
+    const rest = attrsToString(attrs, ["type"]);
+    const size = attrs.size ? ` :size="${attrs.size}"` : "";
+    const open = rest ? `<el-icon ${rest}${size}>` : `<el-icon${size}>`;
+    return `${open}<${comp} /></el-icon>`;
+  });
+
+  if (used.size && !c.includes("@element-plus/icons-vue")) {
+    const imports = [...used].sort().join(", ");
+    c = c.replace(
+      /(<script[^>]*>\s*\n)/,
+      `$1import { ${imports} } from '@element-plus/icons-vue';\n`
+    );
+    c = c.replace(/export default \{/, (m) => {
+      if (/components:\s*\{/.test(c)) {
+        return m;
+      }
+      return `${m}\n  components: { ${imports} },`;
+    });
+    if (/components:\s*\{/.test(c) && !c.includes(`${[...used][0]},`)) {
+      c = c.replace(/components:\s*\{([^}]*)\}/, (m, inner) => {
+        const existing = inner.trim();
+        const add = [...used].filter((n) => !inner.includes(n)).join(", ");
+        if (!add) return m;
+        const merged = existing ? `${existing}, ${add}` : add;
+        return `components: { ${merged} }`;
+      });
+    }
+  }
+
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(ROOT)) {
+  const original = fs.readFileSync(file, "utf8");
+  if (!/<Icon\b/.test(original)) continue;
+  const fixed = transform(original, file);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+    console.log(path.relative(ROOT, file));
+  }
+}
+console.log(`Icon replacements in ${count} files`);
diff --git a/buyer/scripts/replace-page.js b/buyer/scripts/replace-page.js
new file mode 100644
index 00000000..05c3998d
--- /dev/null
+++ b/buyer/scripts/replace-page.js
@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+/**
+ * 将全局 <Page> 封装替换为原生 el-pagination
+ */
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..", "src");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function transformPage(content) {
+  return content.replace(
+    /<Page\b([^>]*?)(\/>|>(\s*)<\/Page>)/gs,
+    (match, attrs, close) => {
+      let a = attrs;
+      const hasTotal = /\bshow-total\b/.test(a);
+      const hasSizer = /\bshow-sizer\b/.test(a);
+      const hasElevator = /\bshow-elevator\b/.test(a);
+
+      a = a.replace(/\s+show-total\b/g, "");
+      a = a.replace(/\s+show-sizer\b/g, "");
+      a = a.replace(/\s+show-elevator\b/g, "");
+      a = a.replace(/:current=/g, ":current-page=");
+      a = a.replace(/:page-size-opts=/g, ":page-sizes=");
+      a = a.replace(/@change=/g, "@current-change=");
+      a = a.replace(/\ssize="small"/g, " small");
+
+      const layoutParts = [];
+      if (hasTotal) layoutParts.push("total");
+      if (hasSizer) layoutParts.push("sizes");
+      layoutParts.push("prev", "pager", "next");
+      if (hasElevator) layoutParts.push("jumper");
+
+      const layoutAttr = ` layout="${layoutParts.join(", ")}"`;
+
+      if (close.startsWith("/>")) {
+        return `<el-pagination${a}${layoutAttr} />`;
+      }
+      return `<el-pagination${a}${layoutAttr}></el-pagination>`;
+    }
+  );
+}
+
+let count = 0;
+for (const file of walkDir(ROOT)) {
+  const original = fs.readFileSync(file, "utf8");
+  if (!/<Page\b/.test(original)) continue;
+  const fixed = transformPage(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+    console.log(path.relative(ROOT, file));
+  }
+}
+console.log(`Page → el-pagination in ${count} files`);
diff --git a/buyer/src/assets/styles/element.scss b/buyer/src/assets/styles/element.scss
new file mode 100644
index 00000000..44b19fcb
--- /dev/null
+++ b/buyer/src/assets/styles/element.scss
@@ -0,0 +1,35 @@
+:root {
+  --el-color-primary: #ff5c58;
+  --el-color-success: #68cabe;
+  --el-color-warning: #fa6419;
+  --el-color-danger: #ff3c2a;
+  --el-font-size-base: 14px;
+}
+
+.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;
+  }
+}
+
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    color: #66b1ff;
+  }
+}
+
+.op-split {
+  margin: 0 8px;
+  color: #dcdfe6;
+}
diff --git a/buyer/src/assets/styles/theme.less b/buyer/src/assets/styles/theme.less
index bcc46c6a..cd23e150 100644
--- a/buyer/src/assets/styles/theme.less
+++ b/buyer/src/assets/styles/theme.less
@@ -1,6 +1,4 @@
-@import "~view-design/src/styles/index.less";
-// iview 自定义样式
-
+// Element Plus 主题变量（原 view-design less 已移除）
 @primary-color: #ff5c58;
 @info-color: #fa6419;
 @success-color: #68cabe;
@@ -11,9 +9,7 @@
 @table-td-highlight-bg: #ededed;
 @font-size-base: 12px;
 
-.ivu-drawer,
-.drawer,
-.ivu-drawer-wrap {
+.el-drawer,
+.drawer {
   z-index: 2600 !important;
 }
-
diff --git a/buyer/src/components/Search.vue b/buyer/src/components/Search.vue
index 3e7e73bd..1b9cffe6 100644
--- a/buyer/src/components/Search.vue
+++ b/buyer/src/components/Search.vue
@@ -9,18 +9,20 @@
         @click="$router.push('/')"
       />
       <div :class="{'small-search-box':useClass == 'fixed-show'}" class="search-box">
-        <i-input
+        <el-input
           v-model="searchData"
           size="large"
           class="search "
           placeholder="输入你想查找的商品"
-          @keyup.enter.native="search"
+          @keyup.enter="search"
         >
 
-          <div class="search-icon" slot="append" @click="search">
-            <Icon type="ios-search" size="21"/>
-          </div>
-        </i-input>
+          <template #append>
+            <div class="search-icon" @click="search">
+              <el-icon :size="21"><SearchIcon /></el-icon>
+            </div>
+          </template>
+        </el-input>
         <template v-if="showTag">
           <div class="only-store" v-if="storeId" @click="research()">
             切换为{{!onlyStore ? '店铺内' : '平台'}}搜索
@@ -46,9 +48,11 @@
 <script>
 import storage from '@/plugins/storage.js'
 import {hotWords} from '@/api/goods.js'
+import { Search as SearchIcon } from '@element-plus/icons-vue'
 
 export default {
   name: 'search',
+  components: { SearchIcon },
   props: {
     showTag: { // 是否展示搜索栏下方热门搜索
       type: Boolean,
@@ -173,7 +177,7 @@ export default {
   border-radius: 18.9px;
 
 
-  ::v-deep .ivu-input.ivu-input-large {
+  :deep(.el-input--large .el-input__wrapper) {
     border: 1.4px solid $theme_color;
     box-sizing: border-box;
     border-radius: 19.6px;
@@ -183,12 +187,10 @@ export default {
     font-weight: normal;
     height: 37.8px;
     color: #999;
-    &:focus {
-      box-shadow: none;
-    }
+    box-shadow: none;
   }
 
-  ::v-deep .ivu-input-group-append {
+  :deep(.el-input-group__append) {
     border-radius: 19.6px !important;
     cursor: pointer;
     box-sizing: border-box;
diff --git a/buyer/src/components/addressManage/index.vue b/buyer/src/components/addressManage/index.vue
index 380de001..c6350255 100644
--- a/buyer/src/components/addressManage/index.vue
+++ b/buyer/src/components/addressManage/index.vue
@@ -1,44 +1,44 @@
 <template>
   <div>
-    <Modal v-model="showAddr" width="800" title="收件人地址">
-      <Form
+    <el-dialog v-model="showAddr" width="800" title="收件人地址">
+      <el-form
         :model="formData"
         ref="form"
         label-position="left"
-        :label-width="100"
+        label-width="100px"
         :rules="ruleInline"
       >
-        <FormItem label="收件人" prop="name">
-          <i-input v-model="formData.name" style="width: 600px"></i-input>
-        </FormItem>
-        <FormItem label="收件地区" prop="address">
+        <el-form-item label="收件人" prop="name">
+          <el-input v-model="formData.name" style="width: 600px"></el-input>
+        </el-form-item>
+        <el-form-item label="收件地区" prop="address">
           {{ formData.address || '暂无地址' }}
-          <Button type="primary" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</Button>
-        </FormItem>
-        <FormItem label="详细地址" prop="detail">
-          <i-input v-model="formData.detail" style="width: 600px"></i-input>
-        </FormItem>
-        <FormItem label="手机号码" prop="mobile">
-          <i-input v-model="formData.mobile" style="width: 600px"></i-input>
-        </FormItem>
-        <FormItem label="地址别名">
-          <i-input
+          <el-button type="primary" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</el-button>
+        </el-form-item>
+        <el-form-item label="详细地址" prop="detail">
+          <el-input v-model="formData.detail" style="width: 600px"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号码" prop="mobile">
+          <el-input v-model="formData.mobile" style="width: 600px"></el-input>
+        </el-form-item>
+        <el-form-item label="地址别名">
+          <el-input
             v-model="formData.alias"
             length
             :maxlength="4"
             placeholder="请输入地址别名，例如公司"
             style="width: 600px"
-          ></i-input>
-        </FormItem>
-        <FormItem label="默认地址">
-          <i-switch v-model="formData.isDefault" />
-        </FormItem>
-      </Form>
-      <div class="mt_20" slot="footer">
-        <Button @click="hide">取消</Button>
-        <Button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</Button>
-      </div>
-    </Modal>
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="默认地址">
+          <el-switch v-model="formData.isDefault" />
+        </el-form-item>
+      </el-form>
+      <template #footer><div class="mt_20">
+        <el-button @click="hide">取消</el-button>
+        <el-button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</el-button>
+      </div></template>
+    </el-dialog>
     <multipleMap ref="map" @callback="getAddress"></multipleMap>
   </div>
 </template>
@@ -130,15 +130,15 @@ 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.formData,'address',paths)
-        this.$set(this.formData,'consigneeAddressIdPath',ids)
+        this.formData['address'] = paths
+        this.formData['consigneeAddressIdPath'] = ids
         const coord = val.data[val.data.length - 1].center.split(',')
         this.formData.lat = coord[1]
         this.formData.lon = coord[0]
       }else{
-        this.$set(this.formData, "address", val.data.addr);
-        this.$set(this.formData, "consigneeAddressIdPath", val.data.addrId);
-        this.$set(this.formData, "detail", val.data.address);
+        this.formData["address"] = val.data.addr;
+        this.formData["consigneeAddressIdPath"] = val.data.addrId;
+        this.formData["detail"] = val.data.address;
         this.formData.lat = val.data.position.lat;
         this.formData.lon = val.data.position.lng;
       }
diff --git a/buyer/src/components/advertising/FixedTop.vue b/buyer/src/components/advertising/FixedTop.vue
index 2c9b012b..1d080c03 100644
--- a/buyer/src/components/advertising/FixedTop.vue
+++ b/buyer/src/components/advertising/FixedTop.vue
@@ -2,11 +2,13 @@
   <!-- 头部广告 -->
   <div class="advertising" v-if="show" :style="{'background-color': data.bgColor}">
     <img :src="data.img" class="hover-pointer" @click="linkTo(data.url)"/>
-    <Icon type="md-close-circle" size="20" @click="show = false" />
+    <el-icon :size="20" @click="show = false"><CircleClose /></el-icon>
   </div>
 </template>
 <script>
+import { CircleClose } from '@element-plus/icons-vue';
 export default {
+  components: { CircleClose },
   props: {
     data: { // 传入的广告信息
       type: Object,
diff --git a/buyer/src/components/card/index.vue b/buyer/src/components/card/index.vue
index 9aca6831..c5228c69 100644
--- a/buyer/src/components/card/index.vue
+++ b/buyer/src/components/card/index.vue
@@ -1,148 +1,140 @@
 <template>
-  <Card class="_Card" :bordered="false" :dis-hover="true">
-    <div slot="title" class="cardTitle">
-      <span :style="{fontSize:`${_Size}px`}">{{_Title}}</span>
-
-      <div v-if="_Tabs" class="cardTabs">
-        <div @click="tabsChange(index)" :class="{active:(isActive==index)}" class="cardTabsItem" :style="{fontSize:`${_Size-2}px`}" v-for="(item,index) in _Tabs"
-             :key="index">
-          {{item}}
+  <el-card class="_Card" shadow="never">
+    <template #header>
+      <div class="card-header">
+        <div class="cardTitle">
+          <span :style="{ fontSize: `${_Size}px` }">{{ _Title }}</span>
+          <div v-if="_Tabs" class="cardTabs">
+            <div
+              @click="tabsChange(index)"
+              :class="{ active: isActive == index }"
+              class="cardTabsItem"
+              :style="{ fontSize: `${_Size - 2}px` }"
+              v-for="(item, index) in _Tabs"
+              :key="index"
+            >
+              {{ item }}
+            </div>
+          </div>
+        </div>
+        <div class="cardExtra" v-if="_More" @click="callBack()">
+          {{ _More }}
         </div>
       </div>
-    </div>
-    <div slot="extra" class="cardExtra" v-if="_More" @click="callBack()">
-      {{_More}}
-    </div>
-    <div>
-
-    </div>
-  </Card>
+    </template>
+    <slot />
+  </el-card>
 </template>
 
 <script>
 export default {
-  name: 'index',
-  props:
-    {
-      _Tabs: { // 可点击的tab栏
-        type: null,
-        default: ''
-      },
-      // 头部
-      _Title: { // 标题
-        type: null,
-        default: '卡片头部'
-      },
-      // 右侧更多
-      _More: {
-        type: null,
-        default: false
-      },
-      _Size: { // 文字大小
-        type: Number,
-        default: 16
-      },
-      // 点击更多触发跳转
-      _Src: {
-        type: null,
-        default: function (val) {
-          if (this._More) {
-            return val;
-          } else {
-            return false;
-          }
-        }
-      }
+  name: "index",
+  props: {
+    _Tabs: {
+      type: null,
+      default: "",
     },
-  data () {
+    _Title: {
+      type: null,
+      default: "卡片头部",
+    },
+    _More: {
+      type: null,
+      default: false,
+    },
+    _Size: {
+      type: Number,
+      default: 16,
+    },
+    _Src: {
+      type: null,
+      default: null,
+    },
+  },
+  data() {
     return {
-      isActive: 0 // 已激活tab栏下标
+      isActive: 0,
     };
   },
   methods: {
-    // 点击右侧的回调
-    callBack () {
-      let _this = this;
-      if (this._Src !== '' || this._Src != null) {
-        this.$router.push({
-          path: _this._Src
-        });
+    callBack() {
+      if (this._Src) {
+        this.$router.push({ path: this._Src });
       }
     },
-    // 点击tab的回调
-    tabsChange (index) {
-    //  处理并返回index
+    tabsChange(index) {
       this.isActive = index;
-      this.$emit('_Change', index);
-    }
-  }
+      this.$emit("_Change", index);
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
-  .cardTitle {
-    display: flex;
-    cursor: pointer;
-  }
-  .active{
-    color: $theme_color;
-    position: relative;
-    &::before{
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 3px;
-      bottom: 0;
-      left: 0;
-      background: $theme_color;
-    }
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.cardTitle {
+  display: flex;
+  cursor: pointer;
+}
+.active {
+  color: $theme_color;
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 3px;
+    bottom: 0;
+    left: 0;
+    background: $theme_color;
   }
+}
 
-  .cardTabs {
-    display: flex;
+.cardTabs {
+  display: flex;
+  padding: 0 12px;
+
+  > .cardTabsItem {
     padding: 0 12px;
-
-    > .cardTabsItem {
-      padding: 0 12px;
-
-    }
-
-    > .cardTabsItem:hover {
-
-      color: $theme_color;
-    }
   }
 
-  ::v-deep .ivu-card, .ivu-card-head, ._Card {
-    margin-bottom: 20px;
-    @include white_background_color();
-  }
-
-  ::v-deep .ivu-card-head {
-    position: relative;
-    padding: 0 14px;
-    height: 50px;
-    line-height: 50px;
-
-    &::before {
-      content: '';
-      width: 3px;
-      height: 50%;
-      top: 25%;
-      background: $theme_color;
-      position: absolute;
-      left: 0;
-    }
-  }
-
-  .cardExtra {
+  > .cardTabsItem:hover {
     color: $theme_color;
-    cursor: pointer;
   }
+}
 
-  ::v-deep .ivu-card-body {
-    padding: 0 !important;
-    display: none;
+:deep(._Card) {
+  margin-bottom: 20px;
+  @include white_background_color();
+}
+
+:deep(._Card .el-card__header) {
+  position: relative;
+  padding: 0 14px;
+  height: 50px;
+  line-height: 50px;
+
+  &::before {
+    content: "";
+    width: 3px;
+    height: 50%;
+    top: 25%;
+    background: $theme_color;
+    position: absolute;
+    left: 0;
   }
+}
 
+.cardExtra {
+  color: $theme_color;
+  cursor: pointer;
+}
+
+:deep(._Card .el-card__body) {
+  padding: 0 !important;
+}
 </style>
diff --git a/buyer/src/components/drawer/Drawer.vue b/buyer/src/components/drawer/Drawer.vue
index 01ef155d..67545500 100644
--- a/buyer/src/components/drawer/Drawer.vue
+++ b/buyer/src/components/drawer/Drawer.vue
@@ -8,12 +8,12 @@
           </div>
           <div>
             <p class="hover-color" @click="linkTo(`/goodsDetail?skuId=${goods.goodsSku.id}&goodsId=${goods.goodsSku.goodsId}`)">{{goods.goodsSku.goodsName}}</p>
-            <p class="price">{{goods.goodsSku.price | unitPrice('￥')}}<span>&nbsp; x{{goods.num}}</span></p>
+            <p class="price">{{ $filters.unitPrice(goods.goodsSku.price, '￥') }}<span>&nbsp; x{{goods.num}}</span></p>
           </div>
           <span class="del hover-color" @click="delGoods(goods.goodsSku.id)">删除</span>
         </li>
       </ul>
-      <Button size="large" class="mt_10" type="primary" @click="linkTo('/cart')" long>去购物车结算</Button>
+      <el-button size="large" class="mt_10" type="primary" @click="linkTo('/cart')" style="width:100%">去购物车结算</el-button>
     </div>
 
     <div v-else-if="title === '我的订单'" class="order-con">
@@ -26,10 +26,10 @@
               v-for="(img,imgIndex) in order.orderItems"
               :key="imgIndex" width="40" height="40" alt="">
           </div>
-          <div class="order-handle"><span>{{ order.flowPrice | unitPrice("￥") }}</span><span class="hover-color" @click="linkTo(`home/OrderDetail?sn=${order.sn}`)">查看订单</span></div>
+          <div class="order-handle"><span>{{ $filters.unitPrice(order.flowPrice, "￥") }}</span><span class="hover-color" @click="linkTo(`home/OrderDetail?sn=${order.sn}`)">查看订单</span></div>
         </li>
       </ul>
-      <Button type="primary" @click="linkTo('/home/MyOrder')" long>查看全部订单</Button>
+      <el-button type="primary" @click="linkTo('/home/MyOrder')" style="width:100%">查看全部订单</el-button>
     </div>
 
     <div v-else-if="title === '优惠券'" class="coupon-con">
@@ -37,7 +37,7 @@
           <li v-for="(coupon, index) in couponList" class="coupon-item" :key="index">
             <div class="c-left">
               <div>
-                <span v-if="coupon.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{coupon.price | unitPrice}}</span></span>
+                <span v-if="coupon.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{ $filters.unitPrice(coupon.price) }}</span></span>
                 <span v-if="coupon.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{coupon.couponDiscount}}</span>折</span>
                 <span class="describe">满{{coupon.consumeThreshold}}元可用</span>
               </div>
@@ -56,7 +56,7 @@
         <li v-for="(track,trackIndex) in tracksList" :key="trackIndex">
           <img :src="track.thumbnail" :alt="track.thumbnail" @click="linkTo(`/goodsDetail?skuId=${track.id}&goodsId=${track.goodsId}`)" width="100" height="100">
           <div @click="addToCart(track.id)">加入购物车</div>
-          <p class="global_color">{{track.price | unitPrice('￥')}}</p>
+          <p class="global_color">{{ $filters.unitPrice(track.price, '￥') }}</p>
         </li>
       </ul>
       <div class="hover-color" style="text-align:center;" @click="linkTo('/home/MyTracks')">查看更多>></div>
@@ -67,22 +67,24 @@
           <img :src="collect.image" :alt="collect.image" @click="linkTo(`/goodsDetail?skuId=${collect.skuId}&goodsId=${collect.goodsId}`)" width="100" height="100">
           <div @click="addToCart(collect.skuId)">加入购物车</div>
           <span class="del-icon" @click.stop="cancelCollect(collect.skuId)">
-            <Icon type="md-trash" />
+            <el-icon><Delete /></el-icon>
           </span>
-          <p class="global_color">{{collect.price | unitPrice('￥')}}</p>
+          <p class="global_color">{{ $filters.unitPrice(collect.price, '￥') }}</p>
         </li>
       </ul>
       <div class="hover-color" style="text-align:center;" @click="linkTo('/home/Favorites')">查看更多>></div>
     </div>
-    <Spin v-if="loading" fix></Spin>
+    <el-skeleton v-if="loading" fix></el-skeleton>
   </div>
 </template>
 
 <script>
+import { Delete } from '@element-plus/icons-vue';
 import {cartGoodsAll, delCartGoods, addCartGoods, cartCount} from '@/api/cart.js'
 import { getOrderList } from '@/api/order';
 import {couponList, receiveCoupon, tracksList, collectList, cancelCollect} from '@/api/member.js'
 export default {
+  components: { Delete },
   name: 'Drawer',
   props: {
     title: {
diff --git a/buyer/src/components/drawer/Main.vue b/buyer/src/components/drawer/Main.vue
index 2e0b6644..571ce61f 100644
--- a/buyer/src/components/drawer/Main.vue
+++ b/buyer/src/components/drawer/Main.vue
@@ -3,20 +3,20 @@
     <div class="wrapper" :style="{right:handleDrawer ? '300px' : '0px'}">
 
       <div class="barItem" @mouseenter="showCartNum(item)" @click="clickBar(item)" v-for="(item,index) in resetConfig.menuList" :key="index">
-        <Tooltip placement="left" :content="item.title">
-          <Icon size="20" :type="item.icon"/>
+        <el-tooltip placement="left" :content="item.title">
+          <el-icon :size="20"><component :is="resolveIcon(item.icon)" /></el-icon>
           <p class="barTitle" v-if="item.titleShow"> {{item.title}}</p>
           <div class="circle" v-if="item.title === '购物车'">
             {{cartNum < 100 ? cartNum : 99}}
           </div>
-        </Tooltip>
+        </el-tooltip>
       </div>
 
     </div>
-    <Drawer width="300" class="popup" :title="drawerData.title" :mask="resetConfig.mask" :closable="resetConfig.closable"
+    <el-drawer width="300" class="popup" :title="drawerData.title" :mask="resetConfig.mask" :closable="resetConfig.closable"
       v-model="handleDrawer">
       <drawerPage :title="drawerData.title" />
-    </Drawer>
+    </el-drawer>
   </div>
 </template>
 
@@ -25,6 +25,7 @@ import Storage from '@/plugins/storage.js';
 import Configuration from './config';
 import drawerPage from './Drawer'
 import {cartCount} from '@/api/cart.js'
+import { resolveIcon } from '@/utils/iconMap'
 export default {
   name: 'Main',
   data () {
@@ -46,6 +47,7 @@ export default {
     }
   },
   methods: {
+    resolveIcon,
     showCartNum (item) { // 获取购物车数量
       if (this.userInfo && item.title === '购物车') {
         this.getCartList()
@@ -147,11 +149,11 @@ export default {
     justify-content: center;
     flex-direction: column;
   }
-  ::v-deep.popup .ivu-drawer-body{
-    padding: 0!important;
+  :deep(.popup .el-drawer__body) {
+    padding: 0 !important;
     background-color: #eee;
   }
-  ::v-deep.popup .ivu-drawer-wrap{
+  :deep(.popup) {
     z-index: 3001;
   }
 </style>
diff --git a/buyer/src/components/drawer/README.md b/buyer/src/components/drawer/README.md
index 830d7c94..b0c59b11 100644
--- a/buyer/src/components/drawer/README.md
+++ b/buyer/src/components/drawer/README.md
@@ -1,42 +1,30 @@
 # 右侧侧边栏组件
-> 本组件依赖于iview的组件基础上进行封装
->项目结构
->* Main  -- 组件用于挂在右侧的横栏
->* drawer -- 右侧横栏的内容
->* config -- 用于设置大小
 
+基于 Element Plus `el-drawer` 封装的右侧悬浮栏。
 
-#### config设置
-```
+## 项目结构
+
+- `Main.vue` — 挂载右侧横栏的容器
+- `Drawer.vue` — 横栏展开后的内容面板
+- `config.js` — 尺寸与菜单配置
+
+## config 设置
+
+```js
 /**
-menuList // 组件的menu
-display //是否显示此menu
-badge //显示徽标数
-titleShow //是否显示title
-*/
-
-//实例代码
- width : 50, //bar的大小
- menuList:[
-   {
-      icon
-   }
- ]
-
-
+ * menuList  菜单项列表
+ * display   是否显示该项
+ * badge     徽标数字
+ * titleShow 是否显示标题
+ */
+width: 50,
+menuList: [{ icon: '...' }]
 ```
 
+## 功能模块
 
+账户信息、购物车、我的订单、优惠券、我的资产、我的足迹、我的收藏、邮箱订阅
 
-> 账户信息
-> 购物车
-> 我的订单
-> 优惠券
-> 我的资产
-> 我的足迹
-> 我的收藏
-> 邮箱订阅
+## 使用
 
-
-## 如何使用
-1.
+在页面中注册全局组件 `<drawer />` 即可（已在 `global.js` 中注册）。
diff --git a/buyer/src/components/global.js b/buyer/src/components/global.js
index 34a6e40a..f959b418 100644
--- a/buyer/src/components/global.js
+++ b/buyer/src/components/global.js
@@ -1,54 +1,19 @@
-// 全局组件配置
+import empty from "./empty/Main.vue";
+import drawer from "./drawer/Main.vue";
+import Header from "@/components/header/Header.vue";
+import FixedTopPage from "@/components/advertising/FixedTop.vue";
+import Footer from "@/components/footer/Footer.vue";
+import Search from "@/components/Search.vue";
+import card from "@/components/card/index.vue";
+import cateNav from "@/components/nav/CateNav.vue";
 
-import empty from './empty/Main' // 空状态组件
-import drawer from './drawer/Main' // 右侧bar
-import Header from '@/components/header/Header'; // 头部组件
-import FixedTopPage from '@/components/advertising/FixedTop'; // 顶部广告
-import Footer from '@/components/footer/Footer'; // 底部栏
-import Search from '@/components/Search' // 搜索框
-import card from '@/components/card' // 个人中心 卡片
-import cateNav from '@/components/nav/CateNav' // 个人中心 卡片
-
-empty.install = function (Vue) {
-  Vue.component('empty', empty);
-};
-
-drawer.install = function (Vue) {
-  Vue.component('drawer', drawer);
-};
-
-Header.install = function (Vue) {
-  Vue.component('BaseHeader', Header);
-};
-
-FixedTopPage.install = function (Vue) {
-  Vue.component('FixedTopPage', FixedTopPage);
-};
-
-Footer.install = function (Vue) {
-  Vue.component('BaseFooter', Footer);
-};
-
-Search.install = function (Vue) {
-  Vue.component('Search', Search);
-};
-
-card.install = function (Vue) {
-  Vue.component('card', card)
-}
-
-cateNav.install = function (Vue) {
-  Vue.component('cateNav', cateNav)
-}
-
-// 引用本js中所有的组件
-export function InstallAll (Vue) {
-  Vue.use(empty)
-  Vue.use(drawer)
-  Vue.use(Header)
-  Vue.use(FixedTopPage)
-  Vue.use(Footer)
-  Vue.use(Search)
-  Vue.use(card)
-  Vue.use(cateNav)
+export function registerGlobalComponents(app) {
+  app.component("empty", empty);
+  app.component("drawer", drawer);
+  app.component("BaseHeader", Header);
+  app.component("FixedTopPage", FixedTopPage);
+  app.component("BaseFooter", Footer);
+  app.component("Search", Search);
+  app.component("card", card);
+  app.component("cateNav", cateNav);
 }
diff --git a/buyer/src/components/goodsDetail/Promotion.vue b/buyer/src/components/goodsDetail/Promotion.vue
index be6b08b4..9051263e 100644
--- a/buyer/src/components/goodsDetail/Promotion.vue
+++ b/buyer/src/components/goodsDetail/Promotion.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="wrapper" v-if="type === 'goodsDetail'">
-      <div class="wr-l"><Icon size="23" type="ios-alarm-outline" /> 秒杀活动</div>
+      <div class="wr-l"><el-icon :size="23"><AlarmClock /></el-icon> 秒杀活动</div>
       <div class="count-down" v-if="end === ''">
       <p>倒计时：</p><span>{{ hours }}</span><span>{{ minutes }}</span><span>{{ seconds }}</span>
       </div>
@@ -14,7 +14,9 @@
   </div>
 </template>
 <script>
+import { AlarmClock } from '@element-plus/icons-vue';
 export default {
+  components: { AlarmClock },
   props: {
     time: { // 传入的初始时间
       default: 1718977559428
diff --git a/buyer/src/components/goodsDetail/ShowGoods.vue b/buyer/src/components/goodsDetail/ShowGoods.vue
index 5145fbf6..d15f4d59 100644
--- a/buyer/src/components/goodsDetail/ShowGoods.vue
+++ b/buyer/src/components/goodsDetail/ShowGoods.vue
@@ -6,7 +6,12 @@
         <!-- 大图、放大镜 -->
         <!-- <div  id="dplayer"></div> -->
         <div class="item-detail-big-img" v-if="imgList[imgIndex]">
-          <pic-zoom :url="imgList[imgIndex].url || imgList[imgIndex]" :scale="2"></pic-zoom>
+          <el-image
+            :src="currentImg"
+            :preview-src-list="previewList"
+            fit="contain"
+            style="width: 100%; height: 400px"
+          />
         </div>
 
         <!-- <div  id="dplayer"></div> -->
@@ -24,11 +29,7 @@
 
         <div class="goodsConfig mt_10">
           <span @click="collect"
-            ><Icon
-              type="ios-heart"
-              :color="isCollected ? '#ed3f14' : '#666'"
-            />{{ isCollected ? "已收藏" : "收藏" }}</span
-          >
+            ><el-icon :color="isCollected ? '#ed3f14' : '#666'"><StarFilled /></el-icon>{{ isCollected ? "已收藏" : "收藏" }}</span>
         </div>
       </div>
       <!-- 右侧商品信息、活动信息、操作展示 -->
@@ -36,18 +37,18 @@
         <div class="item-detail-title">
           <p>
             {{ skuDetail.goodsName }}
-            <Tag
+            <el-tag
               v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'"
               style="margin-top:10px;rgb(153, 149, 149);"
             >
               实物商品
-            </Tag>
-            <Tag
+            </el-tag>
+            <el-tag
               v-else-if="skuDetail.goodsType == 'VIRTUAL_GOODS'"
               style="margin-top:10px;rgb(153, 149, 149);"
             >
               虚拟商品
-            </Tag>
+            </el-tag>
           </p>
         </div>
         <div class="sell-point">
@@ -68,14 +69,9 @@
             >
               <p>
                 <span class="item-price-title" v-if="promotionMap['SECKILL']"
-                  >秒 &nbsp;杀&nbsp;价</span
-                >
-                <span class="item-price">{{
-                  skuDetail.promotionPrice | unitPrice("￥")
-                }}</span>
-                <span class="item-price-old">{{
-                  skuDetail.price | unitPrice("￥")
-                }}</span>
+                  >秒 &nbsp;杀&nbsp;价</span>
+                <span class="item-price">{{ $filters.unitPrice(skuDetail.promotionPrice, "￥") }}</span>
+                <span class="item-price-old">{{ $filters.unitPrice(skuDetail.price, "￥") }}</span>
               </p>
             </div>
             <!-- 商品原价 -->
@@ -92,7 +88,7 @@
                     :key="index"
                     class="item-price item-num"
                   >
-                    {{ item | unitPrice("￥") }}
+                    {{ $filters.unitPrice(item, "￥") }}
                   </div>
                 </div>
                 <div class="flex">
@@ -110,11 +106,8 @@
               <!-- 普通价格 -->
               <div v-else>
                 <span class="item-price-title"
-                  >价 &nbsp;&nbsp;&nbsp;&nbsp;格</span
-                >
-                <span class="item-price">{{
-                  skuDetail.price | unitPrice("￥")
-                }}</span>
+                  >价 &nbsp;&nbsp;&nbsp;&nbsp;格</span>
+                <span class="item-price">{{ $filters.unitPrice(skuDetail.price, "￥") }}</span>
               </div>
             </div>
             <!-- 优惠券展示 -->
@@ -129,13 +122,11 @@
                     @click="receiveCoupon(item.id)"
                   >
                     <span v-if="item.couponType == 'PRICE'"
-                      >满{{ item.consumeThreshold }}减{{ item.price }}</span
-                    >
+                      >满{{ item.consumeThreshold }}减{{ item.price }}</span>
                     <span v-if="item.couponType == 'DISCOUNT'"
                       >满{{ item.consumeThreshold }}打{{
                         item.couponDiscount
-                      }}折</span
-                    >
+                      }}折</span>
                   </span>
                 </span>
 
@@ -149,13 +140,11 @@
                         @click="receiveCoupon(item.id)"
                       >
                         <span v-if="item.couponType == 'PRICE'"
-                          >满{{ item.consumeThreshold }}减{{ item.price }}</span
-                        >
+                          >满{{ item.consumeThreshold }}减{{ item.price }}</span>
                         <span v-if="item.couponType == 'DISCOUNT'"
                           >满{{ item.consumeThreshold }}打{{
                             item.couponDiscount
-                          }}折</span
-                        >
+                          }}折</span>
                       </span>
                     </div>
                   </div>
@@ -165,16 +154,14 @@
             <div class="item-price-row" v-if="promotionMap['FULL_DISCOUNT']">
               <p>
                 <span class="item-price-title"
-                  >促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span
-                >
+                  >促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                 <span class="item-promotion">满减</span>
                 <span
                   class="item-desc-pintuan"
                   v-if="promotionMap['FULL_DISCOUNT'].fullMinus"
                   >满{{ promotionMap["FULL_DISCOUNT"].fullMoney }}元，立减现金{{
                     promotionMap["FULL_DISCOUNT"].fullMinus
-                  }}元</span
-                >
+                  }}元</span>
                 <span
                   class="item-desc-pintuan"
                   v-if="
@@ -183,8 +170,7 @@
                   "
                   >满{{ promotionMap["FULL_DISCOUNT"].fullMoney }}元，立享{{
                     promotionMap["FULL_DISCOUNT"].fullRate
-                  }}折</span
-                >
+                  }}折</span>
               </p>
             </div>
           </div>
@@ -193,8 +179,7 @@
               <p>累计评价</p>
               <p>
                 <span class="item-remarks-num"
-                  >{{ skuDetail.commentNum || 0 }} 条</span
-                >
+                  >{{ skuDetail.commentNum || 0 }} 条</span>
               </p>
             </div>
           </div>
@@ -236,14 +221,14 @@
               <p>数量</p>
             </div>
             <div class="item-select-row">
-              <InputNumber
+              <el-input-number
                 :min="1"
                 :max="skuDetail.quantity"
                 :disabled="skuDetail.quantity === 0"
                 v-model="count"
                 :precision="0.1"
-                @on-blur="changeCount"
-              ></InputNumber>
+                @blur="changeCount"
+              ></el-input-number>
               <span class="inventory"> 库存{{ skuDetail.quantity }}</span>
             </div>
           </div>
@@ -264,12 +249,12 @@
             class="add-buy-car"
             v-if="$route.query.way === 'POINT' && skuDetail.authFlag === 'PASS'"
           >
-            <Button
-              type="error"
+            <el-button
+              type="danger"
               :loading="loading"
               :disabled="skuDetail.quantity === 0"
               @click="pointPay"
-              >积分购买</Button
+              >积分购买</el-button
             >
           </div>
           <div
@@ -277,37 +262,37 @@
             v-if="$route.query.way !== 'POINT' && skuDetail.authFlag === 'PASS'"
           >
 
-           <Button
-              type="error"
+           <el-button
+              type="danger"
               v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'"
               :loading="loading"
               :disabled="skuDetail.quantity === 0"
               @click="addShoppingCartBtn"
-              >加入购物车</Button
+              >加入购物车</el-button
             >
-            <Button
+            <el-button
               type="warning"
               :loading="loading1"
               :disabled="skuDetail.quantity === 0"
               @click="buyNow"
-              >立即购买</Button
+              >立即购买</el-button
             >
-            <Tooltip content="观看视频" v-if="skuDetail.goodsVideo">
+            <el-tooltip content="观看视频" v-if="skuDetail.goodsVideo">
               <img class="view-video" @click="showGoodsVideo = true" :src="require('@/assets/iconfont/play.svg')" alt="">
-            </Tooltip>
+            </el-tooltip>
           </div>
         </div>
       </div>
-      <Modal title="浏览视频" v-model="showGoodsVideo">
-        <div id="dplayer"></div>
-      </Modal>
+      <el-dialog title="浏览视频" v-model="showGoodsVideo">
+          <div id="dplayer"></div>
+        </el-dialog>
     </div>
   </div>
 </template>
 
 <script>
+import { StarFilled } from '@element-plus/icons-vue';
 import Promotion from "./Promotion.vue";
-import PicZoom from "vue-piczoom"; // 图片放大
 import DPlayer from "dplayer";
 import {
   collectGoods,
@@ -371,8 +356,15 @@ export default {
       isCollected: false, // 是否收藏
     };
   },
-  components: { PicZoom, Promotion },
+  components: { Promotion, StarFilled },
   computed: {
+    currentImg() {
+      const item = this.imgList[this.imgIndex];
+      return item ? item.url || item : "";
+    },
+    previewList() {
+      return this.imgList.map((item) => item.url || item);
+    },
     wholesalePrice(key) {
       return this.wholesaleList.length
         ? this.wholesaleList.map((item) => {
@@ -417,7 +409,7 @@ export default {
     },
     select(index, value) {
       // 选择规格
-      this.$set(this.currentSelceted, index, value);
+      this.currentSelceted[index] = value;
       let selectedSkuId = this.goodsSpecList.find((i) => {
         let matched = true;
         let specValues = i.specValues.filter((j) => j.specName !== "images");
diff --git a/buyer/src/components/goodsDetail/ShowGoodsDetail.vue b/buyer/src/components/goodsDetail/ShowGoodsDetail.vue
index 1a172247..4c80a20f 100644
--- a/buyer/src/components/goodsDetail/ShowGoodsDetail.vue
+++ b/buyer/src/components/goodsDetail/ShowGoodsDetail.vue
@@ -3,21 +3,23 @@
     <div class="item-intro-show">
       <div class="item-intro-detail" ref="itemIntroDetail">
         <div class="item-intro-nav item-tabs">
-          <Tabs :animated="false" @on-click="tabClick">
-            <TabPane label="商品介绍">
+          <el-tabs v-model="activeDetailTab" @tab-click="(tab) => tabClick(tab.paneName)">
+            <el-tab-pane label="商品介绍" name="intro">
               <div class="item-intro-img" ref="itemIntroGoods">
                 <div class="item-intro" v-html="skuDetail.intro" v-if="skuDetail.intro"></div>
                 <div v-else style="margin:20px;">暂无商品介绍</div>
               </div>
-            </TabPane>
-            <TabPane label="商品评价">
+            </el-tab-pane>
+            <el-tab-pane label="商品评价" name="comment">
               <div class="remarks-container" ref="itemGoodsComment">
                 <div class="remarks-analyse-box">
                   <div class="remarks-analyse-goods">
-                    <i-circle :percent="skuDetail.grade" stroke-color="#5cb85c">
-                      <span class="remarks-analyse-num">{{skuDetail.grade}}%</span>
-                      <p class="remarks-analyse-title">好评率</p>
-                    </i-circle>
+                    <el-progress type="circle" :percentage="Number(skuDetail.grade) || 0" color="#5cb85c" :width="120">
+                      <template #default>
+                        <span class="remarks-analyse-num">{{ skuDetail.grade }}%</span>
+                        <p class="remarks-analyse-title">好评率</p>
+                      </template>
+                    </el-progress>
                   </div>
                 </div>
                 <div class="remarks-bar">
@@ -31,12 +33,12 @@
                 </div>
                 <div class="remarks-box" v-for="(item,index) in commentList" :key="index" v-else>
                   <div class="remarks-user">
-                    <Avatar :src="item.memberProfile" />
-                    <span class="remarks-user-name">{{item.memberName | secrecyMobile}}</span>
+                    <el-avatar :src="item.memberProfile" :size="40" />
+                    <span class="remarks-user-name">{{ $filters.secrecyMobile(item.memberName ) }}</span>
                   </div>
                   <div class="remarks-content-box">
                     <p>
-                      <Rate disabled :value="Number(item.descriptionScore)" allow-half class="remarks-star"></Rate>
+                      <el-rate disabled :value="Number(item.descriptionScore)" allow-half class="remarks-star"></el-rate>
                     </p>
                     <p class="remarks-content">{{item.content}}</p>
                     <div class="comment-img" v-if="item.images">
@@ -50,8 +52,8 @@
 
                     <div class="preview-img"  v-if="item.previewImg"  @click.prevent="hidePreviewImg(item)">
                       <div>
-                        <span @click.stop="rotatePreviewImg(0, item)"><Icon type="md-refresh" />左转</span>
-                        <span @click.stop="rotatePreviewImg(1, item)"><Icon type="md-refresh" />右转</span>
+                        <span @click.stop="rotatePreviewImg(0, item)"><el-icon><Refresh /></el-icon>左转</span>
+                        <span @click.stop="rotatePreviewImg(1, item)"><el-icon><Refresh /></el-icon>右转</span>
                       </div>
                       <img :src="item.previewImg" :style="{transform:`rotate(${item.deg}deg)`}" width="198" alt="">
                     </div>
@@ -78,15 +80,15 @@
                   </div>
                 </div>
                 <div class="remarks-page">
-                  <Page :total="commentTotal" size="small"
-                    @on-change="changePageNum"
-                    @on-page-size-change="changePageSize"
+                  <el-pagination :total="commentTotal" small
+                    @current-change="changePageNum"
+                    @size-change="changePageSize"
                     :page-size="commentParams.pageSize"
-                    ></Page>
+                     layout="prev, pager, next"></el-pagination>
                 </div>
               </div>
-            </TabPane>
-            <TabPane label="商品参数">
+            </el-tab-pane>
+            <el-tab-pane label="商品参数">
               <template v-if="goodsParamsList.length">
                 <div class="item-param-container">
                   <div class="item-param-box" v-for="param in goodsParamsList" :key="param.paramId || param.paramName">
@@ -96,8 +98,8 @@
                 </div>
               </template>
               <div v-else>暂无商品参数</div>
-            </TabPane>
-          </Tabs>
+            </el-tab-pane>
+          </el-tabs>
         </div>
       </div>
     </div>
@@ -105,8 +107,10 @@
 </template>
 
 <script>
+import { Refresh } from '@element-plus/icons-vue';
 import { goodsComment, goodsCommentNum } from '@/api/member.js';
 export default {
+  components: { Refresh },
   name: 'ShowGoodsDetail',
   props: {
     detail: { // 商品详情
@@ -116,6 +120,7 @@ export default {
   },
   data () {
     return {
+      activeDetailTab: "intro",
       commentList: [], // 评论列表
       commentParams: { // 评论传参
         pageNumber: 1,
@@ -187,12 +192,12 @@ export default {
       });
     },
     viewByGrade (grade) { // 好中差评切换
-      this.$set(this.commentParams, 'grade', grade);
+      this.commentParams['grade'] = grade;
       this.commentParams.pageNumber = 1;
       this.getList();
     },
     tabClick (name) { // 商品详情和评价之间的tab切换
-      if (name === 0) {
+      if (name === "intro") {
         this.$nextTick(() => {
           this.changeHeight('itemIntroGoods')
         });
@@ -203,13 +208,13 @@ export default {
       }
     },
     previewImg (img, item) { // 预览图片
-      this.$set(item, 'previewImg', img);
+      item['previewImg'] = img;
       this.$nextTick(() => {
         this.changeHeight('itemGoodsComment')
       });
     },
     hidePreviewImg (item) { // 隐藏预览图片
-      this.$set(item, 'previewImg', '');
+      item['previewImg'] = '';
       this.$nextTick(() => {
         this.changeHeight('itemGoodsComment')
       });
@@ -217,15 +222,15 @@ export default {
     rotatePreviewImg (type, item) { // 图片旋转
       if (type) {
         if (item.deg) {
-          this.$set(item, 'deg', item.deg + 90);
+          item['deg'] = item.deg + 90;
         } else {
-          this.$set(item, 'deg', 90);
+          item['deg'] = 90;
         }
       } else {
         if (item.deg) {
-          this.$set(item, 'deg', item.deg - 90);
+          item['deg'] = item.deg - 90;
         } else {
-          this.$set(item, 'deg', -90);
+          item['deg'] = -90;
         }
       }
     },
@@ -347,7 +352,7 @@ export default {
 .item-intro-img {
   width: 100%;
   min-height: 300px;
-  ::v-deep img{
+  :deep img{
     margin:0 auto;
   }
 }
@@ -461,7 +466,7 @@ export default {
         border-radius: 4px;
         cursor: pointer;
       }
-      span:nth-child(1) .ivu-icon {
+      span:nth-child(1) .el-icon {
         transform: rotateY(180deg);
       }
     }
@@ -487,24 +492,23 @@ export default {
   justify-content:flex-end;
 }
 /***************商品详情介绍和推荐侧边栏结束***************/
-/* 改变便签页样式 */
-.ivu-tabs-ink-bar {
+/* 改变标签页样式 */
+:deep(.el-tabs__active-bar) {
   background-color: $theme_color !important;
 }
-::v-deep.ivu-tabs-bar{
+:deep(.el-tabs__header) {
   border: none;
 }
-.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab{
+.item-tabs > .el-tabs > .el-tabs__header .el-tabs__item {
   border-radius: 0px;
   color: #999;
   height: 38px;
-  // background: #F7F7F7;
 }
-.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab-active{
+.item-tabs > .el-tabs > .el-tabs__header .el-tabs__item.is-active {
   color: #fff;
   background-color: $theme_color;
 }
-.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab-active:before{
+.item-tabs > .el-tabs > .el-tabs__header .el-tabs__item.is-active:before {
   content: '';
   display: block;
   width: 100%;
@@ -515,7 +519,7 @@ export default {
   top: 0;
   left: 0;
 }
-.ivu-rate-star-full:before, .ivu-rate-star-half .ivu-rate-star-content:before {
+:deep(.el-rate__icon) {
   color: $theme_color;
 }
 table{
diff --git a/buyer/src/components/header/Header.vue b/buyer/src/components/header/Header.vue
index 0561aad2..5780793a 100644
--- a/buyer/src/components/header/Header.vue
+++ b/buyer/src/components/header/Header.vue
@@ -23,10 +23,9 @@
         <li v-show="!!userInfo.username">
           <div class="username-p">
             <div>
-              <Avatar class="person-icon" :src="userInfo.face" icon="person" size="small"/>
-              <span class="username">{{
-                  userInfo.nickName ? userInfo.nickName : userInfo.username | secrecyMobile
-                }}</span>
+              <el-avatar class="person-icon" :src="userInfo.face" :size="24" />
+              <span class="username">{{ $filters.secrecyMobile(
+                  userInfo.nickName ? userInfo.nickName : userInfo.username ) }}</span>
             </div>
             <transition name='fade'>
               <ul class="drop-items">
@@ -42,16 +41,16 @@
         <li @click="goUserCenter('/home/MyTracks')"><span class="nav-item">我的足迹</span></li>
         <li @click="goUserCenter('/home/MsgList')"><span class="nav-item">我的消息</span></li>
         <li v-if="$route.name !== 'Cart'" style="position:relative;">
-          <Dropdown placement="bottom-start">
+          <el-dropdown placement="bottom-start" trigger="hover">
             <router-link to="/cart" target="_blank">
               <span class="nav-item" @mouseenter="getCartList">
-                <Icon size="18" type="ios-cart-outline"></Icon>
+                <el-icon :size="18"><ShoppingCart /></el-icon>
                 购物车（{{ cartNum < 100 ? cartNum : '99' }}）
               </span>
             </router-link>
-            <DropdownMenu slot="list">
+            <template #dropdown>
               <div class="shopping-cart-null" style="width:200px" v-show="shoppingCart.length <= 0">
-                <Icon type="ios-cart-outline" class="cart-null-icon"></Icon>
+                <el-icon class="cart-null-icon"><ShoppingCart /></el-icon>
                 <span>你的购物车没有宝贝哦</span>
                 <span>赶快去添加商品吧~</span>
               </div>
@@ -68,18 +67,16 @@
                       <div>
                         数量:
                         <span class="shopping-cart-text">{{ item.num }}</span>
-
                       </div>
                       <div class="shopping-price">
-                        {{ item.purchasePrice | unitPrice('￥') }}
+                        {{ $filters.unitPrice(item.purchasePrice, '￥') }}
                       </div>
                     </div>
                   </div>
                 </div>
-
               </div>
-            </DropdownMenu>
-          </Dropdown>
+            </template>
+          </el-dropdown>
         </li>
         <li>
           <span class="nav-item" @click="shopEntry">店铺入驻</span>
@@ -91,12 +88,14 @@
 </template>
 
 <script>
+import { ShoppingCart } from '@element-plus/icons-vue';
 import storage from '@/plugins/storage.js';
 import {cartGoodsAll} from '@/api/cart.js';
 import {logout} from '@/api/account.js';
 
 
 export default {
+  components: { ShoppingCart },
   name: 'M-Header',
   created() {
     if (storage.getItem('userInfo')) {
diff --git a/buyer/src/components/header/hoverSearch.vue b/buyer/src/components/header/hoverSearch.vue
index d0904fc4..ad71c662 100644
--- a/buyer/src/components/header/hoverSearch.vue
+++ b/buyer/src/components/header/hoverSearch.vue
@@ -12,12 +12,9 @@
         useClass="fixed-show"
       ></Search>
       <div class="flex flex-a-c cart">
-        <Icon
-          type="ios-cart-outline"
-          @click="goCartList"
-          class="cart-icon"
-          @mouseenter.native="getCartList"
-        />
+        <span @mouseenter="getCartList">
+          <el-icon class="cart-icon" :size="20" @click="goCartList"><ShoppingCart /></el-icon>
+        </span>
         <i class="cart-badge">{{ cartNum < 100 ? cartNum : "99" }}</i>
       </div>
     </div>
@@ -27,7 +24,9 @@
 <script>
 import { cartCount } from "@/api/cart.js";
 import storage from "@/plugins/storage.js";
+import { ShoppingCart } from "@element-plus/icons-vue";
 export default {
+  components: { ShoppingCart },
   data() {
     return {
       userInfo: {}, // 用户信息
diff --git a/buyer/src/components/indexDecorate/ModelForm.vue b/buyer/src/components/indexDecorate/ModelForm.vue
index 28df54be..dcf10abe 100644
--- a/buyer/src/components/indexDecorate/ModelForm.vue
+++ b/buyer/src/components/indexDecorate/ModelForm.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="model-form">
     <div class="model-content">
-      <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"
diff --git a/buyer/src/components/indexDecorate/ModelFormItem.vue b/buyer/src/components/indexDecorate/ModelFormItem.vue
index b454ecdb..93f83a1b 100644
--- a/buyer/src/components/indexDecorate/ModelFormItem.vue
+++ b/buyer/src/components/indexDecorate/ModelFormItem.vue
@@ -29,12 +29,11 @@
         />
       </div>
       <ul class="advert-list width_1200_auto">
-        <template v-for="(item, index) in element.options.list">
+        <template v-for="(item, index) in element.options.list" :key="index">
           <li
             v-if="index !== 0"
             @click="linkTo(item.url)"
             class="hover-pointer"
-            :key="index"
           >
             <img :src="item.img" width="230" height="190" alt="" />
           </li>
diff --git a/buyer/src/components/indexDecorate/modelList/Carousel.vue b/buyer/src/components/indexDecorate/modelList/Carousel.vue
index bad6be08..119bfc28 100644
--- a/buyer/src/components/indexDecorate/modelList/Carousel.vue
+++ b/buyer/src/components/indexDecorate/modelList/Carousel.vue
@@ -6,17 +6,17 @@
       <div class="nav-content">
         <!-- 轮播图 -->
 <!--        autoplay autoplay-speed="10000"-->
-        <Carousel :height="333.9" autoplay :autoplay-speed="5000">
-          <CarouselItem  v-for="(item, index) in data.options.list" :key="index">
-            <div class="swiper-img" >
+        <el-carousel height="334px" :interval="5000">
+          <el-carousel-item v-for="(item, index) in data.options.list" :key="index">
+            <div class="swiper-img">
               <img
                 :src="item.img"
                 @click="linkTo(item.url)"
                 class="hover-pointer"
               />
             </div>
-          </CarouselItem>
-        </Carousel>
+          </el-carousel-item>
+        </el-carousel>
       </div>
       <div class="nav-right">
         <div class="person-msg">
@@ -24,7 +24,7 @@
             <img class="user-face" :src="userInfo.face || defaultAvatar"  alt />
             <div class="welcome">
               Hi, {{
-                userInfo.nickName || `欢迎来到${config.title}` | secrecyMobile
+                $filters.secrecyMobile(userInfo.nickName || `欢迎来到${config.title}`)
               }}
             </div>
           </div>
diff --git a/buyer/src/components/indexDecorate/modelList/Carousel1.vue b/buyer/src/components/indexDecorate/modelList/Carousel1.vue
index 59715aad..e634d2b8 100644
--- a/buyer/src/components/indexDecorate/modelList/Carousel1.vue
+++ b/buyer/src/components/indexDecorate/modelList/Carousel1.vue
@@ -5,13 +5,13 @@
       <div class="nav-side"></div>
       <div class="nav-content">
         <!-- 轮播图 -->
-        <Carousel autoplay @on-change="autoChange">
-          <CarouselItem v-for="(item, index) in data.options.list" :key="index" >
+        <el-carousel height="470px" :interval="5000" @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>
     </div>
   </div>
@@ -34,8 +34,8 @@ export default {
   },
   methods: {
     // 自动切换时改变背景色
-    autoChange (oVal, val) {
-      this.bgColor = this.data.options.list[val].bgColor
+    autoChange (index) {
+      this.bgColor = this.data.options.list[index].bgColor
     }
   }
 };
diff --git a/buyer/src/components/indexDecorate/modelList/Carousel2.vue b/buyer/src/components/indexDecorate/modelList/Carousel2.vue
index d9710003..915162fc 100644
--- a/buyer/src/components/indexDecorate/modelList/Carousel2.vue
+++ b/buyer/src/components/indexDecorate/modelList/Carousel2.vue
@@ -5,18 +5,17 @@
       <div class="nav-side"></div>
       <div class="nav-content">
         <!-- 轮播图 -->
-        <Carousel autoplay>
-          <CarouselItem v-for="(item, index) in data.options.list" :key="index">
+        <el-carousel height="470px" :interval="5000">
+          <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>
       <div class="nav-content1">
-        <!-- 轮播图 -->
-        <Carousel autoplay :autoplay-speed="5000">
-          <CarouselItem v-for="(item, index) in data.options.listRight" :key="index">
+        <el-carousel height="470px" :interval="5000">
+          <el-carousel-item v-for="(item, index) in data.options.listRight" :key="index">
             <div class="mb_10">
               <img :src="item[0].img" width="190" height="150" />
             </div>
@@ -26,19 +25,19 @@
             <div>
               <img :src="item[2].img" width="190" height="150" />
             </div>
-          </CarouselItem>
-        </Carousel>
+          </el-carousel-item>
+        </el-carousel>
       </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" />
-          <div>Hi，{{ userInfo.nickName || `欢迎来到${config.title}` | secrecyMobile }}</div>
+          <el-avatar v-else :size="80" class="mb_10"><el-icon><User /></el-icon></el-avatar>
+          <div>Hi，{{ $filters.secrecyMobile(userInfo.nickName || `欢迎来到${config.title}`) }}</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">
@@ -60,7 +59,9 @@
 
 import {articleList} from '@/api/common.js'
 import storage from '@/plugins/storage';
+import { User } from '@element-plus/icons-vue';
 export default {
+  components: { User },
   name: 'modelCarousel2',
   props: ['data'],
   data () {
@@ -163,7 +164,7 @@ export default {
       margin-top: 10px;
     }
 
-    .ivu-btn-default {
+    .el-button--default {
       color: $theme_color;
       border-color: $theme_color;
     }
diff --git a/buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue b/buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue
index ef609df7..6581d269 100644
--- a/buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue
+++ b/buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue
@@ -4,8 +4,7 @@
       <div class="top-header" :style="{ background: options.left.bgColor }">
         <span>{{ options.left.title }}</span>
         <span @click="linkTo(options.left.url)" class="hover-pointer"
-          >{{ options.left.secondTitle }} &gt;</span
-        >
+          >{{ options.left.secondTitle }} &gt;</span>
       </div>
       <div class="content">
         <div
@@ -27,8 +26,7 @@
       <div class="top-header" :style="{ background: options.middle.bgColor }">
         <span>{{ options.middle.title }}</span>
         <span class="hover-pointer" @click="linkTo(options.middle.url)"
-          >{{ options.middle.secondTitle }} &gt;</span
-        >
+          >{{ options.middle.secondTitle }} &gt;</span>
       </div>
       <div class="content">
         <div
@@ -50,8 +48,7 @@
       <div class="top-header" :style="{ background: options.right.bgColor }">
         <span>{{ options.right.title }}</span>
         <span @click="linkTo(options.right.url)" class="hover-pointer"
-          >{{ options.right.secondTitle }} &gt;</span
-        >
+          >{{ options.right.secondTitle }} &gt;</span>
       </div>
       <div class="content">
         <div
@@ -62,7 +59,7 @@
         >
           <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>
diff --git a/buyer/src/components/indexDecorate/modelList/NotEnough.vue b/buyer/src/components/indexDecorate/modelList/NotEnough.vue
index 7157ea72..2eaf6fff 100644
--- a/buyer/src/components/indexDecorate/modelList/NotEnough.vue
+++ b/buyer/src/components/indexDecorate/modelList/NotEnough.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="not-enough" ref="obtain" id="demo">
-    <Affix :offset-top="62" @on-change="change">
+    <el-affix :offset-top="62" @change="change">
       <ul class="nav-bar" v-show="topSearchShow">
         <li
           v-for="(item, index) in conData.options.navList"
@@ -12,7 +12,7 @@
           <p @click="gotoDemo">{{ item.desc }}</p>
         </li>
       </ul>
-    </Affix>
+    </el-affix>
     <div class="content" v-if="showContent">
       <div
         v-for="(item, index) in conData.options.list[currentIndex]"
@@ -23,7 +23,7 @@
         <img :src="item.img" width="210" height="210" :alt="item.name" />
         <p>{{ item.name }}</p>
         <p>
-          <span>{{ Number(item.price) | unitPrice("￥") }}</span>
+          <span>{{ $filters.unitPrice(Number(item.price), "￥") }}</span>
         </p>
       </div>
     </div>
diff --git a/buyer/src/components/indexDecorate/modelList/Recommend.vue b/buyer/src/components/indexDecorate/modelList/Recommend.vue
index 41862ff2..19191309 100644
--- a/buyer/src/components/indexDecorate/modelList/Recommend.vue
+++ b/buyer/src/components/indexDecorate/modelList/Recommend.vue
@@ -10,12 +10,12 @@
           <img class="hover-pointer"  @click="linkTo(msgLeft.list[0].url)" :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 }"
             @click="linkTo(msgLeft.list[0].url)"
             class="fz_12 view-btn"
-            >点击查看</Button
+            >点击查看</el-button
           >
         </div>
         <div>
@@ -36,8 +36,7 @@
       <div class="head-recommend" :style="{ background: msgRight.bgColor }">
         <span>{{ msgRight.title }}</span>
         <span @click="linkTo(msgRight.url)" class="hover-pointer"
-          >{{ msgRight.secondTitle }}&gt;</span
-        >
+          >{{ msgRight.secondTitle }}&gt;</span>
       </div>
       <div class="content-right">
         <div
diff --git a/buyer/src/components/indexDecorate/modelList/Seckill.vue b/buyer/src/components/indexDecorate/modelList/Seckill.vue
index 407a42d1..1c0a21dd 100644
--- a/buyer/src/components/indexDecorate/modelList/Seckill.vue
+++ b/buyer/src/components/indexDecorate/modelList/Seckill.vue
@@ -12,155 +12,105 @@
       </div>
       <div class="act-status" v-else>未开始</div>
     </div>
-    <swiper :options="swiperOption" ref="mySwiper">
-      <swiper-slide v-for="(item,index) in goodsList" :key="index">
-        <div class="content hover-pointer"  @click.stop="goToSeckill">
-          <img :src="item.goodsImage" width="140" height="140" :alt="item.goodsName">
-          <div class="ellipsis">{{item.goodsName}}</div>
-          <div>
-            <span>{{ item.price | unitPrice('￥') }}</span>
-            <span>{{ item.originalPrice | unitPrice('￥') }}</span>
-          </div>
+    <div class="goods-scroll">
+      <div
+        v-for="(item, index) in goodsList"
+        :key="index"
+        class="content hover-pointer"
+        @click.stop="goToSeckill"
+      >
+        <img :src="item.goodsImage" width="140" height="140" :alt="item.goodsName" />
+        <div class="ellipsis">{{ item.goodsName }}</div>
+        <div>
+          <span>{{ $filters.unitPrice(item.price, "￥") }}</span>
+          <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
         </div>
-      </swiper-slide>
-      <div class="swiper-button-prev" slot="button-prev">
-        <Icon type="ios-arrow-back" />
       </div>
-      <div class="swiper-button-next" slot="button-next">
-        <Icon type="ios-arrow-forward" />
-      </div>
-    </swiper>
+    </div>
   </div>
 </template>
 <script>
-// 引入插件
-import { swiper, swiperSlide } from 'vue-awesome-swiper';
-import 'swiper/dist/css/swiper.css';
 export default {
-  components: {
-    swiper,
-    swiperSlide
-  },
   props: {
-    data: Object
+    data: Object,
   },
-  data () {
+  data() {
     return {
-      list: [], // 秒杀时段列表
-      goodsList: [], // 商品列表
-      actStatus: 0, // 0 未开始  1 进行中
-      actName: '限时秒杀', // 活动名称
-      currIndex: 0, // 当前时间段的下标
-      currHour: '00', // 当前秒杀场
-      diffSeconds: 0, // 倒计时秒数
-      hours: 0, // 小时
-      minutes: 0, // 分钟
-      seconds: 0, // 秒
-      interval: null, // 定时器
-      swiperOption: { // 轮播图参数
-
-        slidesPerView: 5,
-        // 设置点击箭头
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev'
-        }
-      }
+      list: [],
+      goodsList: [],
+      actStatus: 0,
+      actName: "限时秒杀",
+      currIndex: 0,
+      currHour: "00",
+      diffSeconds: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+      interval: null,
     };
   },
   watch: {
-    currIndex (val) {
-      clearInterval(this.interval)
-      this.interval = null
-      this.countDown(val)
-      this.goodsList = this.list[val].seckillGoodsList
+    currIndex(val) {
+      clearInterval(this.interval);
+      this.interval = null;
+      this.countDown(val);
+      this.goodsList = this.list[val].seckillGoodsList;
     },
-    diffSeconds (val) {
+    diffSeconds(val) {
       const hours = Math.floor(val / 3600);
-      // 当前秒数 / 60，向下取整
-      // 获取到所有分钟数 3600 / 60 = 60分钟
-      // 对60取模，超过小时数的分钟数
       const minutes = Math.floor(val / 60) % 60;
-      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
       const seconds = val % 60;
-      this.hours = filteTime(hours)
-      this.minutes = filteTime(minutes)
-      this.seconds = filteTime(seconds)
+      this.hours = filteTime(hours);
+      this.minutes = filteTime(minutes);
+      this.seconds = filteTime(seconds);
       if (val <= 0) {
-        clearInterval(this.interval)
-        this.interval = null
+        clearInterval(this.interval);
+        this.interval = null;
       }
-      function filteTime (time) {
-        if (time < 10) {
-          return '0' + time
-        } else {
-          return time
-        }
+      function filteTime(time) {
+        return time < 10 ? "0" + time : time;
       }
-    }
+    },
   },
-  computed: {
-    swiper () { // 轮播组件
-      return this.$refs.mySwiper.swiper;
-    }
-  },
-  beforeDestroy () {
-    // 销毁前清除定时器
+  beforeUnmount() {
     clearInterval(this.interval);
   },
-  mounted () {
-    this.getListByDay()
+  mounted() {
+    this.getListByDay();
   },
   methods: {
-    goToSeckill () { // 跳转秒杀页面
-      let routeUrl = this.$router.resolve({
-        path: '/seckill'
-      });
-      window.open(routeUrl.href, '_blank');
+    goToSeckill() {
+      const routeUrl = this.$router.resolve({ path: "/seckill" });
+      window.open(routeUrl.href, "_blank");
     },
-    countDown (currIndex) { // 倒计时
-      // 0点时间戳
-      let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
-      let currTime = new Date().getTime()
+    countDown(currIndex) {
+      const zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+      const currTime = new Date().getTime();
       let actTime = 0;
-      let nowHour = new Date().getHours(); // 当前小时数
-      if (this.list[currIndex].timeLine > nowHour) { // 活动未开始
+      const nowHour = new Date().getHours();
+      if (this.list[currIndex].timeLine > nowHour) {
         this.actStatus = 0;
-        actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000
-      } else if (this.list[currIndex].timeLine <= nowHour) { // 活动进行中
+        actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000;
+      } else if (this.list[currIndex].timeLine <= nowHour) {
         this.actStatus = 1;
-        if (currIndex === this.list.length - 1) { // 如果是最后一个活动，直到24点结束
-          actTime = zeroTime + 24 * 3600 * 1000
+        if (currIndex === this.list.length - 1) {
+          actTime = zeroTime + 24 * 3600 * 1000;
         } else {
-          actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000
+          actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000;
         }
       }
-      this.currHour = this.list[this.currIndex].timeLine
-      this.diffSeconds = Math.floor((actTime - currTime) / 1000)
+      this.currHour = this.list[this.currIndex].timeLine;
+      this.diffSeconds = Math.floor((actTime - currTime) / 1000);
       this.interval = setInterval(() => {
-        this.diffSeconds--
-      }, 1000)
+        this.diffSeconds--;
+      }, 1000);
     },
-    getListByDay () { // 当天秒杀活动
-      // const list = [
-      //   {
-      //     timeLine: 18,
-      //     seckillGoodsList: [
-      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
-      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
-      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
-      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
-      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
-      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12}
-      //     ]
-      //   }
-      // ]
-      this.list = this.data.options.list
-      this.goodsList = this.list[0].seckillGoodsList
-      console.log( this.goodsList)
-      this.countDown(this.currIndex)
-    }
-  }
+    getListByDay() {
+      this.list = this.data.options.list;
+      this.goodsList = this.list[0].seckillGoodsList;
+      this.countDown(this.currIndex);
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -174,15 +124,13 @@ export default {
     width: 190px;
     height: 100%;
     color: #fff;
-    background-image: url("../../../assets/images/seckillBg.png");
-
+    background: linear-gradient(180deg, #ff5c58 0%, #e84a46 100%);
     .title {
       width: 100%;
       text-align: center;
       font-size: 28px;
       margin-top: 31px;
     }
-
     .hour {
       margin-top: 90px;
       text-align: center;
@@ -190,7 +138,6 @@ export default {
         font-size: 18px;
       }
     }
-
     .count-down {
       margin: 10px 0 0 30px;
       > span {
@@ -219,15 +166,21 @@ export default {
         content: "";
       }
     }
-
     .act-status {
       margin: 10px 0 0 65px;
       font-size: 20px;
     }
   }
-
+  .goods-scroll {
+    height: 260px;
+    flex: 1;
+    margin-left: 10px;
+    background-color: #fff;
+    display: flex;
+    overflow-x: auto;
+  }
   .content {
-    width: 200px;
+    min-width: 200px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -262,26 +215,12 @@ export default {
       line-height: 24px;
       display: flex;
       text-align: center;
-
       span:nth-child(1) {
         color: #fff;
         font-size: 16px;
         width: 92px;
         background-color: $theme_color;
-        position: relative;
-        &::before {
-          content: " ";
-          width: 0;
-          height: 0;
-          border-color: transparent white transparent transparent;
-          border-style: solid;
-          border-width: 24px 8px 0 0;
-          position: absolute;
-          top: 0;
-          left: 84px;
-        }
       }
-
       span:nth-child(2) {
         color: #999;
         width: 66px;
@@ -290,35 +229,4 @@ export default {
     }
   }
 }
-.swiper-container {
-  height: 260px;
-  width: 1000px;
-  margin-left: 10px;
-  background-color: #fff;
-}
-.swiper-button-prev, .swiper-button-next {
-  background: #ccc;
-  width: 25px;
-  height: 35px;
-  font-size: 16px;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.swiper-button-prev:hover, .swiper-button-next:hover {
-  background: #aaa;
-}
-.swiper-button-prev {
-  left: 0;
-  border-bottom-right-radius: 18px;
-  border-top-right-radius: 18px;
-  padding-right: 5px;
-}
-.swiper-button-next {
-  right: 0;
-  border-top-left-radius: 18px;
-  border-bottom-left-radius: 18px;
-  padding-left: 5px;
-}
 </style>
diff --git a/buyer/src/components/indexDecorate/modelList/forYour.vue b/buyer/src/components/indexDecorate/modelList/forYour.vue
index 7f4c938c..f9d07218 100644
--- a/buyer/src/components/indexDecorate/modelList/forYour.vue
+++ b/buyer/src/components/indexDecorate/modelList/forYour.vue
@@ -34,7 +34,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>
@@ -84,10 +84,10 @@ export default {
     border-top: 1.4px solid #e2e2e2;
   }
   &:hover {
-    ::v-deep .goods-name {
+    :deep .goods-name {
       color: $theme_color;
     }
-    ::v-deep .goods-desc {
+    :deep .goods-desc {
       color: $theme_color;
     }
   }
diff --git a/buyer/src/components/indexDecorate/modelList/goodsAndType.vue b/buyer/src/components/indexDecorate/modelList/goodsAndType.vue
index 4931dbf5..55b15872 100644
--- a/buyer/src/components/indexDecorate/modelList/goodsAndType.vue
+++ b/buyer/src/components/indexDecorate/modelList/goodsAndType.vue
@@ -33,7 +33,7 @@
           <div class="goods-desc">{{ item.desc }}</div>
         </div>
         <div class="goods-price">
-          {{ item.price | unitPrice("￥") }}
+          {{ $filters.unitPrice(item.price, "￥") }}
         </div>
         <!-- 查看 -->
         <div class="white-shadow">
diff --git a/buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue b/buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
index db94c2a5..40b915f5 100644
--- a/buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
+++ b/buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
@@ -6,7 +6,7 @@
     <div class="right-side">
       <div class="badge-box flex">
         <div class="round">
-          <Icon type="ios-arrow-forward" />
+          <el-icon><ArrowRight /></el-icon>
         </div>
 
 
@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import { ArrowRight } from '@element-plus/icons-vue';
 export default {
   name: "mix-goods",
   data() {
@@ -34,7 +35,7 @@ export default {
       default: {}
     }
   },
-  components: {},
+  components: { ArrowRight },
   mounted() {
 
   },
diff --git a/buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue b/buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
index bd3b14b8..9d0d56a7 100644
--- a/buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
+++ b/buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
@@ -17,7 +17,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/buyer/src/components/indexDecorate/modelList/setup-box.scss b/buyer/src/components/indexDecorate/modelList/setup-box.scss
new file mode 100644
index 00000000..7f4c7bde
--- /dev/null
+++ b/buyer/src/components/indexDecorate/modelList/setup-box.scss
@@ -0,0 +1,62 @@
+.setup-content{
+    position: relative;
+    &:hover{
+        .setup-box{
+            display: block;
+        }
+    }
+}
+
+.setup-box{
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, .2);
+    z-index: 99;
+    width: 100%;
+    height: 100%;
+    .el-button{
+        float: right;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+}
+
+.modal-tab-bar{
+    margin-left: 20px;
+    table{
+        margin-top: 10px;
+        display:inline-block;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        max-height: 400px !important;
+        overflow: hidden auto;
+    }
+    thead{
+        background-color: #eee;
+        th{
+            padding: 5px 0;
+        }
+    }
+    td{
+       padding: 10px;
+       text-align: center;
+    }
+    tbody>tr:hover{
+        background-color: aliceblue;
+    }
+}
+
+.modal-top-advert{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    >*{
+        margin-bottom: 10px;
+    }
+    .el-input{
+        width: 200px;
+    }
+}
\ No newline at end of file
diff --git a/buyer/src/components/invoiceModal/index.vue b/buyer/src/components/invoiceModal/index.vue
index 698b7bd1..9fdc0df1 100644
--- a/buyer/src/components/invoiceModal/index.vue
+++ b/buyer/src/components/invoiceModal/index.vue
@@ -1,90 +1,89 @@
 <template>
   <div class="invoice-modal">
-    <Modal v-model="invoiceAvailable" width="640" footer-hide>
-      <p slot="header">
+    <el-dialog v-model="invoiceAvailable" width="640" footer-hide>
+      <template #header><p>
         <span>发票信息</span>
-      </p>
+      </p></template>
       <div class="nav-content">
-        <Form :model="invoiceForm" ref="form" label-position="left" :rules="formRules" :label-width="118">
-          <FormItem label="发票类型">
-            <RadioGroup v-model="invoice" type="button" button-style="solid" @on-change="onInvoiceKindChange">
-              <Radio :label="1">电子普通发票</Radio>
-              <Radio :label="2">增值税专用发票</Radio>
-            </RadioGroup>
-          </FormItem>
+        <el-form :model="invoiceForm" ref="form" label-position="left" :rules="formRules" label-width="118px">
+          <el-form-item label="发票类型">
+            <el-radio-group v-model="invoice" type="button" button-style="solid" @change="onInvoiceKindChange">
+              <el-radio :label="1">电子普通发票</el-radio>
+              <el-radio :label="2">增值税专用发票</el-radio>
+            </el-radio-group>
+          </el-form-item>
 
           <!-- 电子普通发票 -->
           <div v-if="invoice === 1" key="invoice-normal">
-            <FormItem label="发票抬头">
-              <RadioGroup v-model="type" type="button" button-style="solid" @on-change="onHeaderTypeChange">
-                <Radio :label="1">个人</Radio>
-                <Radio :label="2">单位</Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem :label="type === 1 ? '个人名称' : '单位名称'" :prop="type === 1 ? 'personalName' : 'companyName'">
-              <i-input v-if="type === 1" v-model="invoiceForm.personalName"></i-input>
-              <i-input v-else v-model="invoiceForm.companyName"></i-input>
-            </FormItem>
+            <el-form-item label="发票抬头">
+              <el-radio-group v-model="type" type="button" button-style="solid" @change="onHeaderTypeChange">
+                <el-radio :label="1">个人</el-radio>
+                <el-radio :label="2">单位</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item :label="type === 1 ? '个人名称' : '单位名称'" :prop="type === 1 ? 'personalName' : 'companyName'">
+              <el-input v-if="type === 1" v-model="invoiceForm.personalName"></el-input>
+              <el-input v-else v-model="invoiceForm.companyName"></el-input>
+            </el-form-item>
 
-            <FormItem label="纳税人识别号" v-if="type === 2" prop="taxpayerId">
-              <i-input v-model="invoiceForm.taxpayerId"></i-input>
-            </FormItem>
-            <FormItem label="发票内容">
-              <RadioGroup v-model="invoiceForm.receiptContent" type="button" button-style="solid">
-                <Radio label="商品明细">商品明细</Radio>
-                <Radio label="商品类别">商品类别</Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem label="收票人手机" prop="receiptPhone">
-              <i-input v-model="invoiceForm.receiptPhone"></i-input>
-            </FormItem>
-            <FormItem label="收票人邮箱" prop="receiptEmail">
-              <i-input v-model="invoiceForm.receiptEmail" placeholder="可选"></i-input>
-            </FormItem>
+            <el-form-item label="纳税人识别号" v-if="type === 2" prop="taxpayerId">
+              <el-input v-model="invoiceForm.taxpayerId"></el-input>
+            </el-form-item>
+            <el-form-item label="发票内容">
+              <el-radio-group v-model="invoiceForm.receiptContent" type="button" button-style="solid">
+                <el-radio label="商品明细">商品明细</el-radio>
+                <el-radio label="商品类别">商品类别</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="收票人手机" prop="receiptPhone">
+              <el-input v-model="invoiceForm.receiptPhone"></el-input>
+            </el-form-item>
+            <el-form-item label="收票人邮箱" prop="receiptEmail">
+              <el-input v-model="invoiceForm.receiptEmail" placeholder="可选"></el-input>
+            </el-form-item>
           </div>
 
           <!-- 增值税专用发票（固定为单位） -->
           <div v-else key="invoice-vat">
-            <FormItem label="发票抬头">
+            <el-form-item label="发票抬头">
               <span class="inv-title-fixed">单位</span>
-            </FormItem>
-            <FormItem label="单位名称" prop="companyName">
-              <i-input v-model="invoiceForm.companyName" placeholder="与营业执照一致"></i-input>
-            </FormItem>
-            <FormItem label="纳税人识别号" prop="taxpayerId">
-              <i-input v-model="invoiceForm.taxpayerId"></i-input>
-            </FormItem>
-            <FormItem label="单位地址" prop="companyAddress">
-              <i-input v-model="invoiceForm.companyAddress" placeholder="注册地址"></i-input>
-            </FormItem>
-            <FormItem label="单位电话" prop="companyPhone">
-              <i-input v-model="invoiceForm.companyPhone" placeholder="固话或手机"></i-input>
-            </FormItem>
-            <FormItem label="开户银行" prop="bankName">
-              <i-input v-model="invoiceForm.bankName"></i-input>
-            </FormItem>
-            <FormItem label="银行账号" prop="bankAccount">
-              <i-input v-model="invoiceForm.bankAccount"></i-input>
-            </FormItem>
-            <FormItem label="发票内容">
-              <RadioGroup v-model="invoiceForm.receiptContent" type="button" button-style="solid">
-                <Radio label="商品明细">商品明细</Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem label="收票人手机" prop="receiptPhone">
-              <i-input v-model="invoiceForm.receiptPhone"></i-input>
-            </FormItem>
-            <FormItem label="收票人邮箱" prop="receiptEmail">
-              <i-input v-model="invoiceForm.receiptEmail" placeholder="可选"></i-input>
-            </FormItem>
+            </el-form-item>
+            <el-form-item label="单位名称" prop="companyName">
+              <el-input v-model="invoiceForm.companyName" placeholder="与营业执照一致"></el-input>
+            </el-form-item>
+            <el-form-item label="纳税人识别号" prop="taxpayerId">
+              <el-input v-model="invoiceForm.taxpayerId"></el-input>
+            </el-form-item>
+            <el-form-item label="单位地址" prop="companyAddress">
+              <el-input v-model="invoiceForm.companyAddress" placeholder="注册地址"></el-input>
+            </el-form-item>
+            <el-form-item label="单位电话" prop="companyPhone">
+              <el-input v-model="invoiceForm.companyPhone" placeholder="固话或手机"></el-input>
+            </el-form-item>
+            <el-form-item label="开户银行" prop="bankName">
+              <el-input v-model="invoiceForm.bankName"></el-input>
+            </el-form-item>
+            <el-form-item label="银行账号" prop="bankAccount">
+              <el-input v-model="invoiceForm.bankAccount"></el-input>
+            </el-form-item>
+            <el-form-item label="发票内容">
+              <el-radio-group v-model="invoiceForm.receiptContent" type="button" button-style="solid">
+                <el-radio label="商品明细">商品明细</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="收票人手机" prop="receiptPhone">
+              <el-input v-model="invoiceForm.receiptPhone"></el-input>
+            </el-form-item>
+            <el-form-item label="收票人邮箱" prop="receiptEmail">
+              <el-input v-model="invoiceForm.receiptEmail" placeholder="可选"></el-input>
+            </el-form-item>
           </div>
-        </Form>
+        </el-form>
         <div style="text-align: center">
-          <Button type="primary" :loading="loading" @click="submit">保存发票信息</Button>
-          <Button type="default" @click="invoiceAvailable = false">取消</Button>
+          <el-button type="primary" :loading="loading" @click="submit">保存发票信息</el-button>
+          <el-button type="default" @click="invoiceAvailable = false">取消</el-button>
         </div>
-      </div>
-    </Modal>
+      </div></el-dialog>
   </div>
 </template>
 <script>
diff --git a/buyer/src/components/map/index.vue b/buyer/src/components/map/index.vue
index 36092c4e..3aa55583 100644
--- a/buyer/src/components/map/index.vue
+++ b/buyer/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 placeholder="输入关键字搜索" id="input-map" v-model="mapSearch" />
       <ul>
         <li v-for="(tip, index) in tips" :key="index" @click="selectAddr(tip.location)">
           <p>{{ tip.name }}</p>
@@ -13,11 +13,9 @@
         </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>
 </template>
 <script>
diff --git a/buyer/src/components/map/multiple-map.vue b/buyer/src/components/map/multiple-map.vue
index 89153cfa..6a4f9eeb 100644
--- a/buyer/src/components/map/multiple-map.vue
+++ b/buyer/src/components/map/multiple-map.vue
@@ -1,9 +1,9 @@
 <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 width="800" footer-hide v-model="enableMap">
+    <el-radio-group @change="changeMap" v-model="mapDefault" type="button">
+      <el-radio label="select">级联选择</el-radio>
+      <el-radio label="map" v-if="aMapSwitch">高德地图</el-radio>
+    </el-radio-group>
     <div>
       <div v-if="mapDefault === 'select'">
         <div class="selector">
@@ -18,15 +18,12 @@
 
         </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>
+    </div></el-dialog>
 </template>
 
 <script>
diff --git a/buyer/src/components/map/region.vue b/buyer/src/components/map/region.vue
index f55f07a7..047fe39a 100644
--- a/buyer/src/components/map/region.vue
+++ b/buyer/src/components/map/region.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <Cascader
+    <el-cascader
       :data="data"
       :load-data="loadData"
       v-model="addr"
-      @on-change="change"
+      @change="change"
       style="width: 300px"
-    ></Cascader>
+    ></el-cascader>
   </div>
 </template>
 <script>
diff --git a/buyer/src/components/nav/CateNav.vue b/buyer/src/components/nav/CateNav.vue
index 7c1ffa37..8c27de38 100644
--- a/buyer/src/components/nav/CateNav.vue
+++ b/buyer/src/components/nav/CateNav.vue
@@ -49,8 +49,7 @@
                 @click="goGoodsList(second.id, second.parentId)"
                 class="nav-side-item"
                 v-if="secIndex < 2"
-                >{{ second.name }}</span
-              >
+                >{{ second.name }}</span>
             </span>
           </li>
         </ul>
@@ -69,8 +68,7 @@
               @click="goGoodsList(item.id,item.parentId)"
               v-if="index < 8"
               :key="index"
-              >{{ item.name }}<Icon type="ios-arrow-forward"
-            /></span>
+              >{{ item.name }}<el-icon><ArrowRight /></el-icon></span>
           </template>
         </div>
         <ul>
@@ -83,7 +81,7 @@
               class="detail-item-title"
               @click="goGoodsList(items.id, items.parentId)"
             >
-              {{ items.name }} <Icon type="ios-arrow-forward" />
+              {{ items.name }} <el-icon><ArrowRight /></el-icon>
               <span class="glyphicon glyphicon-menu-right"></span>
             </span>
             <div>
@@ -92,8 +90,7 @@
                 @click="goGoodsList(item.id, items.id, items.parentId)"
                 :key="subIndex"
                 class="detail-item"
-                >{{ item.name }}</span
-              >
+                >{{ item.name }}</span>
             </div>
           </li>
         </ul>
@@ -105,7 +102,9 @@
 <script>
 import { getCategory } from "@/api/goods";
 import storage from "@/plugins/storage.js";
+import { ArrowRight } from "@element-plus/icons-vue";
 export default {
+  components: { ArrowRight },
   name: "GoodsListNav",
   props: {
     showAlways: {
diff --git a/buyer/src/components/nav/GoodsClassNav.vue b/buyer/src/components/nav/GoodsClassNav.vue
index eaefdfe1..4b4bf7a4 100644
--- a/buyer/src/components/nav/GoodsClassNav.vue
+++ b/buyer/src/components/nav/GoodsClassNav.vue
@@ -5,32 +5,32 @@
       <template v-if="$route.query.categoryId">
         <!-- 头部展示筛选信息 -->
         <div @click="cateClick(tabBar,1)">{{ tabBar.name }}</div>
-        <Icon type="ios-arrow-forward" />
+        <el-icon><ArrowRight /></el-icon>
 
         <div class="bar" v-if="tabBar.first">
-          {{ tabBar.first.name }} <Icon type="ios-arrow-down" />
+          {{ tabBar.first.name }} <el-icon><ArrowDown /></el-icon>
           <ul>
             <li v-for="item in tabBar.children" :key="item.id"  @click="cateClick(item,2)">
               {{ item.name }}
             </li>
           </ul>
         </div>
-        <Icon type="ios-arrow-forward" v-if="tabBar.first" />
+        <el-icon :v-if="tabBar.first"><ArrowRight /></el-icon>
 
         <div class="bar" v-if="tabBar.second">
-          {{ tabBar.second.name }} <Icon type="ios-arrow-down" />
+          {{ tabBar.second.name }} <el-icon><ArrowDown /></el-icon>
           <ul>
             <li v-for="item in tabBar.first.children" :key="item.id"  @click="cateClick(item,3)">
               {{ item.name }}
             </li>
           </ul>
         </div>
-        <Icon type="ios-arrow-forward" v-if="tabBar.second" />
+        <el-icon :v-if="tabBar.second"><ArrowRight /></el-icon>
       </template>
       <!-- 无商品分类，展示搜索结果 -->
       <template v-else>
         <div style="font-size:14px">全部结果</div>
-        <Icon type="ios-arrow-forward" />
+        <el-icon><ArrowRight /></el-icon>
         <div style="font-weight:bold;" class="mr_10">“{{params.keyword}}”</div>
       </template>
       <!-- 所选分类 -->
@@ -41,7 +41,7 @@
         :key="index"
         :title="item.name"
       >
-        <span>{{ item.type }}：</span><span>{{ item.name }}</span><Icon type="md-close" />
+        <span>{{ item.type }}：</span><span>{{ item.name }}</span><el-icon><Close /></el-icon>
       </a>
     </div>
 
@@ -66,7 +66,7 @@
                 v-show="multSelected.includes(item.name)"
               >
                 <div></div>
-                <Icon type="md-checkmark" />
+                <el-icon><Check /></el-icon>
               </div>
             </li>
           </ul>
@@ -74,21 +74,19 @@
           <div class="btn" v-show="multiple !== 0">
             <span @click="moreBrand(0)"
               >{{ tagsContent[0].more ? "收起" : "更多"
-              }}<Icon
-                :type="tagsContent[0].more ? 'ios-arrow-up' : 'ios-arrow-down'"
-            /></span>
-            <span @click="multSelectBrand(0)"><Icon type="md-add" />多选</span>
+              }}<el-icon><ArrowUp v-if="tagsContent[0].more" /><ArrowDown v-else /></el-icon></span>
+            <span @click="multSelectBrand(0)"><el-icon><Plus /></el-icon>多选</span>
           </div>
 
           <div class="multBtn" v-show="multiple === 0">
-            <Button
+            <el-button
               type="primary"
               size="small"
               :disabled="!multSelected.length"
               @click="sure(0)"
-              >确定</Button
+              >确定</el-button
             >
-            <Button size="small" @click="cancel">取消</Button>
+            <el-button size="small" @click="cancel">取消</el-button>
           </div>
         </div>
       </div>
@@ -115,40 +113,38 @@
               </li>
             </ul>
 
-            <CheckboxGroup
+            <el-checkbox-group
               :class="{ 'show-more': tag.more }"
               class="list"
               v-model="multSelected"
               v-show="multiple === tagIndex"
             >
-              <Checkbox
+              <el-checkbox
                 class="item"
                 :label="item"
                 v-for="(item, index) in tag.values"
                 :key="index"
-                >{{ item }}</Checkbox
+                >{{ item }}</el-checkbox
               >
-            </CheckboxGroup>
+            </el-checkbox-group>
 
             <div class="btn" v-show="multiple !== tagIndex">
               <span @click="moreBrand(tagIndex)" v-show="tag.values.length > 9"
                 >{{ tag.more ? "收起" : "更多"
-                }}<Icon :type="tag.more ? 'ios-arrow-up' : 'ios-arrow-down'"
-              /></span>
+                }}<el-icon><ArrowUp v-if="tag.more" /><ArrowDown v-else /></el-icon></span>
               <span @click="multSelectBrand(tagIndex)"
-                ><Icon type="md-add" />多选</span
-              >
+                ><el-icon><Plus /></el-icon>多选</span>
             </div>
 
             <div class="multBtn" v-show="multiple === tagIndex">
-              <Button
+              <el-button
                 type="primary"
                 size="small"
                 :disabled="!multSelected.length"
                 @click="sure(tagIndex)"
-                >确定</Button
+                >确定</el-button
               >
-              <Button size="small" @click="cancel">取消</Button>
+              <el-button size="small" @click="cancel">取消</el-button>
             </div>
           </div>
         </div>
@@ -161,8 +157,10 @@
 </template>
 
 <script>
+import { ArrowDown, ArrowRight, ArrowUp, Check, Close, Plus } from '@element-plus/icons-vue';
 import * as APIGoods from '@/api/goods';
 export default {
+  components: { ArrowDown, ArrowRight, ArrowUp, Check, Close, Plus },
   name: 'GoodsClassNav',
   data () {
     return {
@@ -250,13 +248,13 @@ export default {
         const first = this.tabBar.children.filter(e => {
           return e.id === arr[1]
         })[0]
-        this.$set(this.tabBar, 'first', first)
+        this.tabBar['first'] = first
       }
       if (arr.length > 2) {
         const second = this.tabBar.first.children.filter(e => {
           return e.id === arr[2]
         })[0]
-        this.$set(this.tabBar, 'second', second)
+        this.tabBar['second'] = second
       }
     },
     cateClick (item, index) { // 点选分类
@@ -329,11 +327,11 @@ export default {
     moreBrand (index) {
       // 更多按钮
       const flag = !this.tagsContent[index].more
-      this.$set(this.tagsContent[index], 'more', flag)
+      this.tagsContent[index]['more'] = flag
     },
     multSelectBrand (index) {
       // 多选按钮
-      this.$set(this.tagsContent[index], 'more', true)
+      this.tagsContent[index]['more'] = true
       this.multiple = index;
     },
     sure (index) {
@@ -376,8 +374,8 @@ export default {
           this.tagsContent[0].values = data.brands;
           this.tagsContent = this.tagsContent.concat(data.paramOptions);
           this.tagsContent.forEach((item) => {
-            this.$set(item, 'show', true)
-            this.$set(item, 'more', false)
+            item['show'] = true
+            item['more'] = false
           });
         }
       });
@@ -437,7 +435,7 @@ export default {
       ul {
         display: block;
       }
-      .ivu-icon {
+      .el-icon {
         transform: rotate(180deg);
       }
     }
@@ -493,7 +491,7 @@ export default {
     &:hover {
       border-color: $theme_color;
       background-color: #fff;
-      .ivu-icon {
+      .el-icon {
         color: #fff;
         background-color: $theme_color;
       }
@@ -503,7 +501,7 @@ export default {
       color: $theme_color;
     }
 
-    .ivu-icon {
+    .el-icon {
       position: absolute;
       right: 0;
       top: 0;
@@ -589,7 +587,7 @@ export default {
             border-top: 20px solid transparent;
             border-right: 20px solid $theme_color;
           }
-          .ivu-icon {
+          .el-icon {
             font-size: 12px;
             position: absolute;
             bottom: 0;
@@ -630,10 +628,10 @@ export default {
     .multBtn {
       text-align: center;
       margin-top: 10px;
-      .ivu-btn {
+      .el-button {
         font-size: 12px !important;
       }
-      .ivu-btn:last-child {
+      .el-button:last-child {
         margin-left: 10px;
       }
     }
@@ -708,10 +706,10 @@ export default {
       text-align: center;
       margin-top: 10px;
       margin-bottom: 10px;
-      .ivu-btn {
+      .el-button {
         font-size: 12px !important;
       }
-      .ivu-btn:last-child {
+      .el-button:last-child {
         margin-left: 10px;
       }
     }
diff --git a/buyer/src/components/verify/index.vue b/buyer/src/components/verify/index.vue
index 2cbb8824..2dfb6b02 100644
--- a/buyer/src/components/verify/index.vue
+++ b/buyer/src/components/verify/index.vue
@@ -3,20 +3,22 @@
     <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" />
+      <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" />
+        <el-icon><ArrowRight /></el-icon>
       </span>
       <span class="text">{{verifyText}}</span>
     </div>
   </div>
 </template>
 <script>
+import { Refresh, ArrowRight } from '@element-plus/icons-vue';
 import { getVerifyImg, postVerifyImg } from './verify.js';
 export default {
+  components: { Refresh, ArrowRight },
   props: {
     // 传入数据，判断是登录、注册、修改密码
     verifyType: {
@@ -174,7 +176,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    .ivu-icon {
+    .el-icon {
       font-size: 20px;
     }
   }
diff --git a/buyer/src/main.js b/buyer/src/main.js
index 24d8e867..07620d18 100644
--- a/buyer/src/main.js
+++ b/buyer/src/main.js
@@ -1,70 +1,52 @@
-import Vue from "vue";
-import App from "./App";
-import router from "./router";
-import ViewUI from "view-design";
+import { createApp } from "vue";
+import "core-js/stable";
 import "./assets/styles/theme.less";
-// import './assets/iconfont/iconfont.css';
-import * as filters from "./plugins/filters";
+import App from "./App.vue";
+import { router } from "./router/index";
 import store from "@/vuex/store";
+import { setupElementPlus } from "@/plugins/element";
+import { setupLegacyMessage } from "@/utils/message";
+import { registerGlobalComponents } from "@/components/global.js";
+import * as filters from "./plugins/filters";
 import storage from "@/plugins/storage";
-// 全局引入封装组件
-import {InstallAll} from "@/components/global.js";
 
-const {aMapSecurityJsCode, title, inputMaxLength} = require("@/config");
+const { aMapSecurityJsCode, inputMaxLength } = require("@/config");
 
-const copyViewUi = {...ViewUI}
-copyViewUi.Input.props.maxlength.default = inputMaxLength // 挂载最大输入值
-Vue.use(copyViewUi);
-
-
-Vue.use(InstallAll);
-Vue.config.productionTip = false;
-
-Object.keys(filters).forEach((key) => {
-  Vue.filter(key, filters[key]);
-});
-
-// 高德安全密钥
 if (aMapSecurityJsCode) {
   window._AMapSecurityConfig = {
     securityJsCode: aMapSecurityJsCode,
   };
 }
 
-router.beforeEach((to, from, next) => {
-  ViewUI.LoadingBar.start();
-  window.document.title = to.meta.title === undefined ? title : to.meta.title;
-  next();
-});
+const app = createApp(App);
 
-router.afterEach((route) => {
-  ViewUI.LoadingBar.finish();
-});
+setupElementPlus(app);
+setupLegacyMessage(app);
+registerGlobalComponents(app);
 
-Vue.prototype.linkTo = function (url) {
+app.use(router);
+app.use(store);
+
+app.config.globalProperties.$filters = filters;
+app.config.globalProperties.Cookies = storage;
+app.config.globalProperties.$inputMaxLength = inputMaxLength;
+
+app.config.globalProperties.linkTo = function (url) {
   if (url.substr(0, 1) === "/") {
-    // 非外部链接，没有origin，只有路由地址
-    if (router.mode === "hash") {
-      window.open(location.origin + "/#" + url, "_blank");
-    } else {
-      window.open(location.origin + url, "_blank");
-    }
+    window.open(location.origin + url, "_blank");
   } else {
-    // 外部链接，完整的url地址
     window.open(url, "_blank");
   }
 };
-// 联系客服
-Vue.prototype.connectCs = function (
+
+app.config.globalProperties.connectCs = function (
   sign = "37ef9b97807d03c6741298ed4eb5b536d2d238e08a3c00fb01fe48f03a569974c99ad767e72c04b3165ef29aca2c488b505fe4ca"
 ) {
-  const url = "https://yzf.qq.com/xv/web/static/chat/index.html?sign=" + sign;
+  const url =
+    "https://yzf.qq.com/xv/web/static/chat/index.html?sign=" + sign;
   window.open(url, "_blank");
 };
-Vue.prototype.Cookies = storage;
-/* eslint-disable no-new */
-new Vue({
-  router,
-  store,
-  render: (h) => h(App),
-}).$mount("#app");
+
+router.isReady().then(() => {
+  app.mount("#app");
+});
diff --git a/buyer/src/pages/Cart.vue b/buyer/src/pages/Cart.vue
index f79282c2..e45528da 100644
--- a/buyer/src/pages/Cart.vue
+++ b/buyer/src/pages/Cart.vue
@@ -6,27 +6,20 @@
       <div>
         <router-link to="/"><img :src="$store.state.logoImg" /></router-link>
         <div>
-          购物车(<span>{{ goodsTotal }}</span
-          >)
+          购物车(<span>{{ goodsTotal }}</span>)
         </div>
       </div>
 
     </div>
-    <Divider />
+    <el-divider />
     <!-- 购物车主体 -->
     <div class="cart-content width_1200 center">
       <div class="available-area">
         <div class="cart-steps">
           <span :class="stepIndex == 0 ? 'active' : ''">1.我的购物车</span>
-          <Icon
-            :class="stepIndex == 0 ? 'active-arrow' : ''"
-            custom="icomoon icon-next"
-          ></Icon>
+          <i class="icomoon icon-next" :class="stepIndex == 0 ? 'active-arrow' : ''"></i>
           <span :class="stepIndex == 1 ? 'active' : ''">2.填写订单信息</span>
-          <Icon
-            :class="stepIndex == 1 ? 'active-arrow' : ''"
-            custom="icomoon icon-next"
-          ></Icon>
+          <i class="icomoon icon-next" :class="stepIndex == 1 ? 'active-arrow' : ''"></i>
           <span :class="stepIndex == 2 ? 'active' : ''">3.成功提交订单</span>
         </div>
       </div>
@@ -34,10 +27,10 @@
       <div class="cart-goods">
         <div class="cart-goods-title">
           <div class="width_60">
-            <Checkbox
+            <el-checkbox
               v-model="allChecked"
-              @on-change="changeChecked(allChecked, 'all')"
-              >全选</Checkbox
+              @change="changeChecked(allChecked, 'all')"
+              >全选</el-checkbox
             >
           </div>
           <div class="goods-title">商品</div>
@@ -58,10 +51,10 @@
         >
           <div class="shop-name">
             <div>
-              <Checkbox
+              <el-checkbox
                 v-model="shop.checked"
-                @on-change="changeChecked(shop.checked, 'shop', shop.storeId)"
-              ></Checkbox>
+                @change="changeChecked(shop.checked, 'shop', shop.storeId)"
+              ></el-checkbox>
               <span class="go-shop-page" @click="goShopPage(shop.storeId)">{{
                 shop.storeName
               }}</span>
@@ -80,34 +73,32 @@
                   :key="index"
                 >
                   <span v-if="item.couponType === 'PRICE'"
-                    >￥{{ item.price }}</span
-                  >
+                    >￥{{ item.price }}</span>
                   <span v-if="item.couponType === 'DISCOUNT'"
-                    >{{ item.couponDiscount }}折</span
-                  >
+                    >{{ item.couponDiscount }}折</span>
                   <span>满{{ item.consumeThreshold }}元可用</span>
-                  <Button
+                  <el-button
                     class="coupon-btn"
                     size="small"
                     type="primary"
                     @click="receiveShopCoupon(item)"
                     :disabled="item.disabled"
-                    >{{ item.disabled ? "已领取" : "领取" }}</Button
+                    >{{ item.disabled ? "已领取" : "领取" }}</el-button
                   >
                 </div>
               </div>
             </span>
             <div class="promotion-notice">{{ shop.promotionNotice }}</div>
           </div>
-          <template v-for="(goods, goodsIndex) in shop.skuList">
-            <div class="goods-item" :key="goodsIndex">
+          <template v-for="(goods, goodsIndex) in shop.skuList" :key="goods.goodsSku?.id || goodsIndex">
+            <div class="goods-item">
               <div class="width_60">
-                <Checkbox
+                <el-checkbox
                   v-model="goods.checked"
-                  @on-change="
+                  @change="
                     changeChecked(goods.checked, 'goods', goods.goodsSku.id)
                   "
-                ></Checkbox>
+                ></el-checkbox>
               </div>
               <div
                 class="goods-title"
@@ -125,13 +116,13 @@
                   <p>
                     {{ goods.goodsSku.goodsName }}
                   </p>
-                  <p><Tag
+                  <p><el-tag
                     v-if="goods.goodsSku.salesModel === 'WHOLESALE'"
                     class="goods-show-tag"
                     color="purple"
                   >
                     批发商品
-                  </Tag></p>
+                  </el-tag></p>
                   <template
                     v-for="(promotion, promotionIndex) in goods.promotions"
                   >
@@ -165,43 +156,43 @@
                 </div>
               </div>
               <div class="width_150">
-                {{ goods.purchasePrice | unitPrice("￥") }}
+                {{ $filters.unitPrice(goods.purchasePrice, "￥") }}
               </div>
               <div class="width_100">
-                <InputNumber
+                <el-input-number
                   :min="1"
                   size="small"
                   v-model="goods.num"
-                  @on-change="changeNum(goods.num, goods.goodsSku.id)"
-                ></InputNumber>
+                  @change="changeNum(goods.num, goods.goodsSku.id)"
+                ></el-input-number>
                 <div class="fontsize_12">
                   {{ goods.goodsSku.quantity > 0 ? "有货" : "无货" }}
                 </div>
               </div>
               <div class="width_150">
-                {{ goods.subTotal | unitPrice("￥") }}
+                {{ $filters.unitPrice(goods.subTotal, "￥") }}
               </div>
               <div class="width_100">
-                <Button
+                <el-button
                   v-if="!goods.errorMessage"
                   size="small"
                   type="primary"
                   @click="delGoods(goods.goodsSku.id)"
-                  >删除</Button
+                  >删除</el-button
                 >
-                <Button
+                <el-button
                   v-if="!goods.errorMessage"
                   size="small"
                   type="info"
                   @click="collectGoods(goods.goodsSku.id)"
                   style="margin-left: 10px"
-                  >收藏</Button
+                  >收藏</el-button
                 >
               </div>
               <div class="error-goods" v-if="goods.errorMessage">
                 <div style="margin-top: 20px">{{ goods.errorMessage }}</div>
-                <Button type="primary" @click="delGoods(goods.goodsSku.id)"
-                  >删除</Button
+                <el-button type="primary" @click="delGoods(goods.goodsSku.id)"
+                  >删除</el-button
                 >
               </div>
             </div>
@@ -211,10 +202,10 @@
         <div class="cart-goods-footer">
           <div>
             <div class="width_60">
-              <Checkbox
+              <el-checkbox
                 v-model="allChecked"
-                @on-change="changeChecked(allChecked, 'all')"
-                >全选</Checkbox
+                @change="changeChecked(allChecked, 'all')"
+                >全选</el-checkbox
               >
             </div>
             <div class="width_100 handle-btn" @click="delGoods()">
@@ -227,23 +218,20 @@
           </div>
           <div>
             <div class="selected-count">
-              已选择<span>{{ checkedNum }}</span
-              >件商品
+              已选择<span>{{ checkedNum }}</span>件商品
             </div>
             <div class="ml_20 save-price">
-              已节省<span>{{
-                priceDetailDTO.discountPrice | unitPrice("￥")
-              }}</span>
+              已节省<span>{{ $filters.unitPrice(priceDetailDTO.discountPrice, "￥") }}</span>
             </div>
             <div class="ml_20 total-price">
               总价（不含运费）:
-              <div>{{ priceDetailDTO.flowPrice | unitPrice("￥") }}</div>
+              <div>{{ $filters.unitPrice(priceDetailDTO.flowPrice, "￥") }}</div>
             </div>
             <div class="pay ml_20" @click="pay">去结算</div>
           </div>
         </div>
       </div>
-      <Spin size="large" fix v-if="loading"></Spin>
+      <el-skeleton size="large" fix v-if="loading"></el-skeleton>
     </div>
     <BaseFooter class="footer"></BaseFooter>
   </div>
@@ -400,7 +388,7 @@ export default {
     async receiveShopCoupon(item) {
       let res = await APIMember.receiveCoupon(item.id);
       if (res.success) {
-        this.$set(item, "disabled", true);
+        item["disabled"] = true;
         this.$Message.success("领取成功");
       } else {
         this.$Message.error(res.message);
@@ -500,7 +488,7 @@ export default {
     padding: 0 15px;
   }
 
-  .ivu-icon {
+  .el-icon {
     @include content_color($light_content_color);
     font-size: 20px;
     margin: 0 15px;
@@ -743,7 +731,7 @@ export default {
   width: 1200px;
   margin: 0 auto;
 }
-.ivu-divider {
+.el-divider {
   background: $theme_color;
   height: 2px;
 }
@@ -781,7 +769,7 @@ export default {
 }
 </style>
 <style>
-.ivu-input-number-input {
+.el-input-number .el-input__inner {
   text-align: center;
 }
 
diff --git a/buyer/src/pages/CouponCenter.vue b/buyer/src/pages/CouponCenter.vue
index 959e0329..0d2572bc 100644
--- a/buyer/src/pages/CouponCenter.vue
+++ b/buyer/src/pages/CouponCenter.vue
@@ -8,11 +8,9 @@
             <img src="../assets/images/logo.png" width="120" alt="" />
           </router-link>
           <p>领券中心</p>
-          <Input
-            search
+          <el-input
             style="width: 400px"
-            @on-search="search"
-            enter-button="搜索"
+            @keyup.enter="search"
             placeholder="搜索优惠券"
           />
         </div>
@@ -27,19 +25,13 @@
                 <span
                   v-if="item.couponType === 'PRICE'"
                   class="fontsize_12 global_color"
-                  >￥<span class="price">{{
-                    item.price | unitPrice
-                  }}</span></span
-                >
+                  >￥<span class="price">{{ $filters.unitPrice(item.price) }}</span></span>
                 <span
                   v-if="item.couponType === 'DISCOUNT'"
                   class="fontsize_12 global_color"
-                  ><span class="price">{{ item.couponDiscount }}</span
-                  >折</span
-                >
+                  ><span class="price">{{ item.couponDiscount }}</span>折</span>
                 <span class="describe"
-                  >满{{ item.consumeThreshold }}元可用</span
-                >
+                  >满{{ item.consumeThreshold }}元可用</span>
               </div>
               <p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
               <p>有效期：{{ item.endTime }}</p>
@@ -50,16 +42,12 @@
             <i class="circle-bottom"></i>
           </li>
         </ul>
-        <Page
-          :total="total"
-          @on-change="changePageNum"
+        <el-pagination           :total="total"
+          @current-change="changePageNum"
           class="pageration"
-          @on-page-size-change="changePageSize"
+          @size-change="changePageSize"
           :page-size="params.pageSize"
-          show-total
-          show-sizer
-        >
-        </Page>
+         layout="total, sizes, prev, pager, next"></el-pagination>
       </div>
     </div>
     <BaseFooter></BaseFooter>
diff --git a/buyer/src/pages/ForgetPassword.vue b/buyer/src/pages/ForgetPassword.vue
index 99ba0154..9edded6a 100644
--- a/buyer/src/pages/ForgetPassword.vue
+++ b/buyer/src/pages/ForgetPassword.vue
@@ -11,76 +11,72 @@
     </div>
     <div class="login-container">
         <!-- 验证手机号 -->
-        <Form
+        <el-form
           ref="formFirst"
           :model="formFirst"
           :rules="ruleInline"
           style="width:300px;"
           v-show="step === 0"
         >
-          <FormItem prop="mobile">
-            <i-input
+          <el-form-item prop="mobile">
+            <el-input
               type="text"
               v-model="formFirst.mobile"
               clearable
               placeholder="手机号"
             >
-              <Icon type="md-phone-portrait" slot="prepend"></Icon>
-            </i-input>
-          </FormItem>
-          <FormItem prop="code">
-            <i-input
+              <template #prepend><el-icon><Iphone /></el-icon></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="code">
+            <el-input
               type="text"
               v-model="formFirst.code"
               clearable
               placeholder="手机验证码"
             >
-              <Icon
-                type="ios-text-outline"
-                style="font-weight: bold"
-                slot="prepend"
-              />
-              <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
-            </i-input>
-          </FormItem>
-          <FormItem>
-            <Button @click="verifyBtnClick" long :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</Button>
-          </FormItem>
-          <FormItem>
-            <Button type="error" @click="next" :loading="loading" long>下一步</Button>
-          </FormItem>
-        </Form>
-        <Form
+              <template #prepend><el-icon style="font-weight: bold"><Document /></el-icon></template>
+              <template #append><el-button @click="sendCode">{{ codeMsg }}</el-button></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="verifyBtnClick" style="width:100%" :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="danger" @click="next" :loading="loading" style="width:100%">下一步</el-button>
+          </el-form-item>
+        </el-form>
+        <el-form
           ref="form"
           :model="form"
           :rules="ruleInline"
           style="width:300px;"
           v-show="step === 1"
         >
-          <FormItem prop="password">
-            <i-input
+          <el-form-item prop="password">
+            <el-input
               type="password"
               v-model="form.password"
               clearable
               placeholder="请输入至少六位密码"
             >
-              <Icon type="md-lock" slot="prepend"></Icon>
-            </i-input>
-          </FormItem>
-          <FormItem prop="password">
-            <i-input
+              <template #prepend><el-icon><Lock /></el-icon></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
               type="password"
               v-model="form.oncePasd"
               clearable
               placeholder="请再次输入密码"
             >
-              <Icon type="md-lock" slot="prepend"></Icon>
-            </i-input>
-          </FormItem>
-          <FormItem>
-            <Button type="error" size="large" @click="handleSubmit" :loading="loading1" long>提交</Button>
-          </FormItem>
-        </Form>
+              <template #prepend><el-icon><Lock /></el-icon></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="danger" size="large" @click="handleSubmit" :loading="loading1" style="width:100%">提交</el-button>
+          </el-form-item>
+        </el-form>
         <!-- 拼图验证码 -->
         <Verify
           ref="verify"
@@ -91,18 +87,18 @@
         <div class="login-btn"><a @click="$router.push('login')">前往登录</a></div>
     </div>
     <div class="foot">
-      <Row type="flex" justify="space-around" class="help">
+      <div type="flex" justify="space-around" class="help">
         <a class="item" href="https://pickmall.cn/" target="_blank">帮助</a>
         <a class="item" href="https://pickmall.cn/" target="_blank">隐私</a>
         <a class="item" href="https://pickmall.cn/" target="_blank">条款</a>
-      </Row>
-      <Row type="flex" justify="center" class="copyright">
+      </div>
+      <div type="flex" justify="center" class="copyright">
         Copyright © {{year}} - Present
         <a href="https://pickmall.cn/" target="_blank" style="margin: 0 5px"
           >{{config.title}}</a
         >
         版权所有
-      </Row>
+      </div>
     </div>
   </div>
 </template>
@@ -114,9 +110,10 @@ import { md5 } from '@/plugins/md5.js';
 import * as apiLogin from '@/api/login.js';
 import { sendSms } from '@/api/common.js';
 import Verify from '@/components/verify';
+import { Lock, Iphone, Document } from '@element-plus/icons-vue';
 export default {
   name: 'ForgetPassword',
-  components: { Verify },
+  components: { Verify, Lock, Iphone, Document },
   data () {
     return {
       config:require('@/config'),
@@ -294,7 +291,7 @@ export default {
 
 .other-login {
   margin: 0 auto;
-  .ivu-icon {
+  .el-icon {
     font-size: 24px;
   }
 }
diff --git a/buyer/src/pages/GoodsDetail.vue b/buyer/src/pages/GoodsDetail.vue
index 17d70b3e..d16a7cdd 100644
--- a/buyer/src/pages/GoodsDetail.vue
+++ b/buyer/src/pages/GoodsDetail.vue
@@ -4,12 +4,12 @@
     <Search></Search>
     <div class="shop-item-path">
       <div class="shop-nav-container">
-        <Breadcrumb>
-          <BreadcrumbItem to="/">首页</BreadcrumbItem>
-          <BreadcrumbItem v-for="(item, index) in categoryBar" :to="goGoodsList(index)" target="_blank" :key="index">
+        <el-breadcrumb>
+          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
+          <el-breadcrumb-item v-for="(item, index) in categoryBar" :to="goGoodsList(index)" target="_blank" :key="index">
             {{ item.name }}
-          </BreadcrumbItem>
-        </Breadcrumb>
+          </el-breadcrumb-item>
+        </el-breadcrumb>
         <div class="store-collect" v-if="!takeDownSale">
           <span class="mr_10" v-if="goodsMsg.data">
             <router-link :to="'Merchant?id=' + goodsMsg.data.storeId">{{
@@ -17,7 +17,7 @@
             }}</router-link>
           </span>
           <span @click="collect">
-            <Icon type="ios-heart" :color="storeCollected ? '#ed3f14' : '#666'" />
+            <el-icon :color="storeCollected ? '#ed3f14' : '#666'"><StarFilled /></el-icon>
             {{ storeCollected? "已收藏店铺": "收藏店铺" }}
           </span>
           <span class="ml_10" @click="IMService(goodsMsg.data.storeId,goodsMsg.data.goodsId,goodsMsg.data.id)">联系客服</span>
@@ -32,16 +32,17 @@
 
     <empty _Title='当前商品已下架' v-if="takeDownSale">
       <div class="sale-btn">
-        <Button size="small" class="mr_10" @click="target('/')">返回首页</Button>
-        <Button size="small" @click="target('goodsList')">返回商品列表</Button>
+        <el-button size="small" class="mr_10" @click="target('/')">返回首页</el-button>
+        <el-button size="small" @click="target('goodsList')">返回商品列表</el-button>
       </div>
     </empty>
-    <Spin size="large" fix v-if="isLoading"></Spin>
+    <el-skeleton size="large" fix v-if="isLoading"></el-skeleton>
     <BaseFooter></BaseFooter>
   </div>
 </template>
 
 <script>
+import { StarFilled } from '@element-plus/icons-vue';
 import Search from "@/components/Search";
 
 import ShowGoods from "@/components/goodsDetail/ShowGoods";
@@ -129,7 +130,7 @@ export default {
               });
             });
             this.categoryBar = cateArr;
-            this.$set(this, "goodsMsg", res.result);
+            this["goodsMsg"] = res.result;
             if (!this.goodsMsg.data.intro) {
               this.goodsMsg.data.intro = ''
             }
@@ -191,12 +192,10 @@ export default {
     },
   },
   watch: {},
-  components: {
-    Search,
+  components: { Search,
     ShowGoods,
     ShowGoodsDetail,
-    empty
-  },
+    empty, StarFilled },
 };
 </script>
 <style scoped lang="scss">
diff --git a/buyer/src/pages/GoodsList.vue b/buyer/src/pages/GoodsList.vue
index c49b6a5e..d16460ea 100644
--- a/buyer/src/pages/GoodsList.vue
+++ b/buyer/src/pages/GoodsList.vue
@@ -20,21 +20,14 @@
                 @click="orderBy(item.en, index)"
               >
                 <span :class="{ 'goods-list-tool-active': index === sortIndex }"
-                  >{{ item.title }}<Icon type="ios-arrow-round-down"
-                /></span>
+                  >{{ item.title }}<el-icon><ArrowDown /></el-icon></span>
               </li>
               <li @click="orderBy('price', 5, 'up')" class="price-sort">
                 <span :class="{ 'goods-list-tool-active': 5 === sortIndex }">
                   价格
                   <div>
-                    <Icon
-                      type="md-arrow-dropup"
-                      :class="{ 'price-color': sortPriceIndex == 'desc' }"
-                    />
-                    <Icon
-                      type="md-arrow-dropdown"
-                      :class="{ 'price-color': sortPriceIndex == 'asc' }"
-                    />
+                    <el-icon :class="{ 'price-color': sortPriceIndex == 'desc' }"><ArrowUp /></el-icon>
+                    <el-icon :class="{ 'price-color': sortPriceIndex == 'asc' }"><ArrowDown /></el-icon>
                   </div>
                 </span>
               </li>
@@ -55,24 +48,21 @@
               </div>
               <div class="goods-show-price">
                 <span>
-                  <span class="seckill-price text-danger">{{
-                    item.price | unitPrice("￥")
-                  }}</span>
+                  <span class="seckill-price text-danger">{{ $filters.unitPrice(item.price, "￥") }}</span>
                 </span>
               </div>
               <div class="goods-show-detail">
-                <Tag
+                <el-tag
                   v-if="item.salesModel === 'WHOLESALE'"
                   class="goods-show-tag"
                   color="purple"
                 >
                   批发
-                </Tag>
+                </el-tag>
                 <span>{{ item.goodsName }}</span>
               </div>
               <div class="goods-show-num">
-                已有<span>{{ item.commentNum || 0 }}</span
-                >人评价
+                已有<span>{{ item.commentNum || 0 }}</span>人评价
               </div>
               <div class="goods-show-seller">
                 <span class="text-bottom" style="color: #e4393c">{{
@@ -81,49 +71,48 @@
               </div>
 
               <div class="goods-show-right">
-                <Tag
+                <el-tag
                   class="goods-show-tag"
                   color="red"
                   v-if="item.selfOperated"
                 >
                   自营
-                </Tag>
-                <Tag
+                </el-tag>
+                <el-tag
                   class="goods-show-tag"
                   color="blue"
                   v-if="item.goodsType === 'VIRTUAL_GOODS'"
                 >
                   虚拟
-                </Tag>
-                <Tag
+                </el-tag>
+                <el-tag
                   class="goods-show-tag"
                   color="blue"
                   v-else-if="item.goodsType === 'PHYSICAL_GOODS'"
                 >
                   实物
-                </Tag>
+                </el-tag>
               </div>
             </div>
           </div>
         </div>
       </div>
       <div class="goods-page">
-        <Page
-          show-total
-          show-sizer
-          @on-change="changePageNum"
-          @on-page-size-change="changePageSize"
+        <el-pagination
+          @current-change="changePageNum"
+          @size-change="changePageSize"
           :total="total"
           :page-size="params.pageSize"
-        ></Page>
+         layout="total, sizes, prev, pager, next"></el-pagination>
       </div>
     </div>
-    <Spin size="large" fix v-if="loading"></Spin>
+    <el-skeleton size="large" fix v-if="loading"></el-skeleton>
     <BaseFooter></BaseFooter>
   </div>
 </template>
 
 <script>
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
 import GoodsClassNav from "@/components/nav/GoodsClassNav";
 import * as apiGoods from "@/api/goods";
 export default {
@@ -347,7 +336,7 @@ export default {
     }
     span > div {
       display: inline-block;
-      .ivu-icon {
+      .el-icon {
         font-size: 12px;
         position: absolute;
         &:nth-child(1) {
@@ -379,7 +368,7 @@ export default {
   text-decoration: none;
   z-index: 1;
 }
-.goods-list-tool .ivu-icon {
+.goods-list-tool .el-icon {
   font-weight: bold;
   font-size: 16px;
 }
diff --git a/buyer/src/pages/Index.vue b/buyer/src/pages/Index.vue
index 5207c62d..4ff1c48d 100644
--- a/buyer/src/pages/Index.vue
+++ b/buyer/src/pages/Index.vue
@@ -1,27 +1,25 @@
 <template>
   <div class="container">
-    <Modal v-model="showCpmodel" width="350">
+    <el-dialog v-model="showCpmodel" width="350">
             <template #header>
                 <p style="color:black;text-align:left">
-                    <!-- <Icon type="ios-information-circle"></Icon> -->
+                    <!-- <el-icon><InfoFilled /></el-icon> -->
                     <span>活动优惠券</span>
                 </p>
             </template>
-              <template>
-                  <Scroll :on-reach-bottom="handleReachBottom">
-                      <Card dis-hover v-for="(item, index) in autoCoupList" :key="index" style="margin: 10px 15px">
-                            <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color" style="font-size: 15px;">￥<span class="price">{{item.price | unitPrice}}</span></span>
+              <div class="coupon-scroll" @scroll="handleReachBottom">
+                      <el-card shadow="never" v-for="(item, index) in autoCoupList" :key="index" style="margin: 10px 15px">
+                            <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color" style="font-size: 15px;">￥<span class="price">{{ $filters.unitPrice(item.price) }}</span></span>
                             <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color" style="font-size: 15px;"><span class="price">{{item.discount}}</span>折</span>
                             <span class="describe" style="font-size: 15px;margin-left: 5px;">满{{item.consumeThreshold}}元可用</span>
                             <p style="font-size: 10px;">使用范围：{{useScope(item.scopeType, item.storeName)}}</p>
                             <p style="font-size: 10px;">有效期：{{item.endTime}}</p>
-                      </Card>
-                  </Scroll>
-              </template>
+                      </el-card>
+              </div>
             <template #footer>
-                <Button type="error" @click="showCpmodel=false">确定</Button>
+                <el-button type="danger" @click="showCpmodel=false">确定</el-button>
             </template>
-        </Modal>
+        </el-dialog>
 
     <!-- 固定头部 -->
     <hover-search class="hover-search" :class="{show: topSearchShow}"></hover-search>
@@ -43,6 +41,7 @@
 </template>
 
 <script>
+import { InfoFilled } from '@element-plus/icons-vue';
 import Search from '@/components/Search';
 import ModelForm from '@/components/indexDecorate/ModelForm';
 import HoverSearch from '@/components/header/hoverSearch';
@@ -196,12 +195,10 @@ export default {
       }
     }
   },
-  components: {
-    Search,
+  components: { Search,
     ModelForm,
     HoverSearch,
-    fixedBar
-  }
+    fixedBar, InfoFilled }
 };
 </script>
 
diff --git a/buyer/src/pages/Login.vue b/buyer/src/pages/Login.vue
index 5b120474..83ae11e8 100644
--- a/buyer/src/pages/Login.vue
+++ b/buyer/src/pages/Login.vue
@@ -10,13 +10,13 @@
     <!-- 登录主体 包含轮播图 登录模块 -->
     <div class="login-container">
       <!-- 轮播 -->
-      <Carousel loop :autoplay-speed="5000" class="login-carousel" arrow="never">
-        <CarouselItem>
+      <el-carousel :interval="5000" arrow="never" class="login-carousel" height="550px">
+        <el-carousel-item>
           <div class="demo-carousel" @click='$refs.verify.show = false'>
             <img src="https://lili-system.oss-cn-beijing.aliyuncs.com/background.jpg" />
           </div>
-        </CarouselItem>
-      </Carousel>
+        </el-carousel-item>
+      </el-carousel>
       <!-- 登录模块 -->
       <div class="form-box" @click='$refs.verify.show = false'>
         <div class="account-number">
@@ -34,7 +34,7 @@
               <span>
                 二维码已失效
               </span>
-              <Button size='small' @click="createPCLoginSession">刷新二维码</Button>
+              <el-button size='small' @click="createPCLoginSession">刷新二维码</el-button>
             </div>
             <vue-qr
               :text="qrCode"
@@ -69,45 +69,45 @@
         <div>
           <div v-show="!scannerCodeLoginFLag">
           <!-- 账号密码登录 -->
-          <Form ref="formInline" :model="formData" :rules="ruleInline" v-show="type === true"
+          <el-form ref="formInline" :model="formData" :rules="ruleInline" v-show="type === true"
                 @click.self='$refs.verify.show = false'>
-            <FormItem prop="username">
-              <i-input type="text" v-model="formData.username" clearable placeholder="用户名">
-                <Icon type="md-person" slot="prepend"></Icon>
-              </i-input>
-            </FormItem>
-            <FormItem prop="password">
-              <i-input type="password" v-model="formData.password" clearable placeholder="密码">
-                <Icon type="md-lock" slot="prepend"></Icon>
-              </i-input>
-            </FormItem>
-            <FormItem>
-              <Button type="error" @click.stop="handleSubmit('formInline')" long>登录</Button>
-            </FormItem>
-          </Form>
+            <el-form-item prop="username">
+              <el-input type="text" v-model="formData.username" clearable placeholder="用户名">
+                <template #prepend><el-icon><User /></el-icon></template>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input type="password" v-model="formData.password" clearable placeholder="密码">
+                <template #prepend><el-icon><Lock /></el-icon></template>
+              </el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="danger" @click.stop="handleSubmit('formInline')" style="width:100%">登录</el-button>
+            </el-form-item>
+          </el-form>
           <!-- 验证码登录 -->
-          <Form ref="formSms" :model="formSms" :rules="ruleInline" v-show="type === false"
+          <el-form ref="formSms" :model="formSms" :rules="ruleInline" v-show="type === false"
                 @click.self='$refs.verify.show = false'>
-            <FormItem prop="mobile">
-              <i-input type="text" v-model="formSms.mobile" clearable placeholder="手机号">
-                <Icon type="md-lock" slot="prepend"></Icon>
-              </i-input>
-            </FormItem>
-            <FormItem prop="code">
-              <i-input type="text" v-model="formSms.code" placeholder="手机验证码">
-                <Icon type="ios-text-outline" style="font-weight: bold" slot="prepend"/>
-                <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
-              </i-input>
-            </FormItem>
-            <FormItem>
-              <Button @click.stop="verifyBtnClick" long
+            <el-form-item prop="mobile">
+              <el-input type="text" v-model="formSms.mobile" clearable placeholder="手机号">
+                <template #prepend><el-icon><Lock /></el-icon></template>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="code">
+              <el-input type="text" v-model="formSms.code" placeholder="手机验证码">
+                <template #prepend><el-icon style="font-weight: bold"><Document /></el-icon></template>
+                <template #append><el-button @click="sendCode">{{ codeMsg }}</el-button></template>
+              </el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button @click.stop="verifyBtnClick" style="width:100%"
                       :type="verifyStatus?'success':'default'">{{ verifyStatus ? '验证通过' : '点击完成安全验证' }}
-              </Button>
-            </FormItem>
-            <FormItem>
-              <Button type="error" @click="handleSubmit('formSms')" long>登录</Button>
-            </FormItem>
-          </Form>
+              </el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="danger" @click="handleSubmit('formSms')" style="width:100%">登录</el-button>
+            </el-form-item>
+          </el-form>
         </div>
           <div class="other">
             <div class="other-login">
@@ -138,16 +138,16 @@
       <verify ref="verify" class="verify-con" verifyType="LOGIN" @change="verifyChange"></verify>
     </div>
     <div class="foot">
-      <Row type="flex" justify="space-around" class="help">
+      <div type="flex" justify="space-around" class="help">
         <router-link to="/article" class="item" target="_blank">帮助</router-link>
         <router-link to="/article?id=1371779927900160000" class="item" target="_blank">隐私</router-link>
         <router-link to="/article?id=1371992704333905920" class="item" target="_blank">条款</router-link>
-      </Row>
-      <Row type="flex" justify="center" class="copyright">
+      </div>
+      <div type="flex" justify="center" class="copyright">
         Copyright © {{year}} - Present
         <a href="https://pickmall.cn" target="_blank" style="margin: 0 5px">{{config.title}}</a>
         版权所有
-      </Row>
+      </div>
     </div>
   </div>
 </template>
@@ -162,12 +162,16 @@ import { webLogin, loginCallback,sCLogin,getSCLoginCode} from "@/api/login.js";
 import storage from "@/plugins/storage.js";
 import verify from "@/components/verify";
 import vueQr from "vue-qr";
+import { User, Lock, Document } from "@element-plus/icons-vue";
 
 export default {
   name: "Login",
   components: {
     verify,
-    vueQr
+    vueQr,
+    User,
+    Lock,
+    Document,
   },
   data() {
     return {
@@ -413,7 +417,7 @@ export default {
       });
     },
   },
-  destroyed() {
+  beforeUnmount() {
     this.clearQRLoginInfo();
   },
   mounted() {
diff --git a/buyer/src/pages/Merchant.vue b/buyer/src/pages/Merchant.vue
index 1a676d82..102649c3 100644
--- a/buyer/src/pages/Merchant.vue
+++ b/buyer/src/pages/Merchant.vue
@@ -10,12 +10,10 @@
         <p :alt="storeMsg.storeDesc" class="ellipsis" v-html="storeMsg.storeDesc"></p>
       </div>
       <div>
-        <span class="hover-pointer" @click="collect"><Icon :color="storeCollected ? '#ed3f14' : '#fff'"
-                                                           type="ios-heart"/>{{
+        <span class="hover-pointer" @click="collect"><el-icon :color="storeCollected ? '#ed3f14' : '#fff'"><StarFilled /></el-icon>{{
             storeCollected ? '已收藏店铺' : '收藏店铺'
           }}</span>
-        <span class="hover-pointer ml_10" style="width:80px" @click="IMService(storeMsg.storeId,null,null)"><Icon
-          custom="icomoon icon-customer-service"/>联系客服</span>
+        <span class="hover-pointer ml_10" style="width:80px" @click="IMService(storeMsg.storeId,null,null)"><i class="icomoon icon-customer-service"></i>联系客服</span>
       </div>
     </div>
     <div class="store-category">
@@ -27,22 +25,21 @@
           首页
         </li>
         <li v-for="(cate, index) in cateList" :key="index" class="cate-item">
-          <Dropdown v-if="cate.children.length">
+          <el-dropdown v-if="cate.children.length" trigger="hover">
             <div @click.self="searchByCate(cate)">
               {{ cate.labelName }}
-              <Icon type="ios-arrow-down"></Icon>
+              <el-icon><ArrowDown /></el-icon>
             </div>
-            <DropdownMenu slot="list">
-              <DropdownItem
-                v-for="sec in cate.children"
-                :key="sec.id"
-                :name="sec.id"
-                @click.native="searchByCate(sec)"
-              >{{ sec.labelName }}
-              </DropdownItem
-              >
-            </DropdownMenu>
-          </Dropdown>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
+                  v-for="sec in cate.children"
+                  :key="sec.id"
+                  @click="searchByCate(sec)"
+                >{{ sec.labelName }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
           <span v-else @click.self="searchByCate(cate)">{{
               cate.labelName
             }}</span>
@@ -74,28 +71,23 @@
           </div>
           <div class="goods-show-price">
             <span>
-              <span class="seckill-price text-danger">{{
-                  item.price | unitPrice("￥")
-                }}</span>
+              <span class="seckill-price text-danger">{{ $filters.unitPrice(item.price, "￥") }}</span>
             </span>
           </div>
           <div class="goods-show-detail">
             <span>{{ item.goodsName }}</span>
           </div>
           <div class="goods-show-num">
-            已有<span>{{ item.commentNum || 0 }}</span
-          >人评价
+            已有<span>{{ item.commentNum || 0 }}</span>人评价
           </div>
         </div>
       </div>
       <div class="goods-page">
-        <Page
-          :page-size="params.pageSize"
+        <el-pagination           :page-size="params.pageSize"
           :total="total"
-          show-sizer
-          @on-change="changePageNum"
-          @on-page-size-change="changePageSize"
-        ></Page>
+          @current-change="changePageNum"
+          @size-change="changePageSize"
+         layout="sizes, prev, pager, next"></el-pagination>
       </div>
 
     </div>
@@ -107,6 +99,7 @@
 
 <script>
 
+import { ArrowDown, StarFilled } from '@element-plus/icons-vue';
 import {getCateById, getDetailById} from "@/api/shopentry";
 import {cancelStoreCollect, collectStore} from "@/api/member";
 import {goodsList} from "@/api/goods";
@@ -119,11 +112,7 @@ import imTalk from '@/components/mixes/talkIm'
 
 export default {
   name: "Merchant",
-  components: {
-    Search,
-    ModelForm,
-    HoverSearch,
-  },
+  components: { Search, ModelForm, HoverSearch, StarFilled, ArrowDown },
   mixins: [imTalk],
   data() {
     return {
diff --git a/buyer/src/pages/SignUp.vue b/buyer/src/pages/SignUp.vue
index ae5c3fa5..a564b2e2 100644
--- a/buyer/src/pages/SignUp.vue
+++ b/buyer/src/pages/SignUp.vue
@@ -11,67 +11,63 @@
     </div>
     <div class="login-container">
         <!-- 注册 -->
-        <Form
+        <el-form
           ref="formRegist"
           :model="formRegist"
           :rules="ruleInline"
           style="width:300px;"
         >
-          <FormItem prop="username">
-            <i-input
+          <el-form-item prop="username">
+            <el-input
               type="text"
               v-model="formRegist.username"
               clearable
               placeholder="用户名"
             >
-              <Icon type="md-person" slot="prepend"></Icon>
-            </i-input>
-          </FormItem>
-          <FormItem prop="password">
-            <i-input
+              <template #prepend><el-icon><User /></el-icon></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
               type="password"
               v-model="formRegist.password"
               clearable
               placeholder="请输入大于6位密码"
             >
-              <Icon type="md-lock" slot="prepend"> </Icon>
-            </i-input>
-          </FormItem>
-          <FormItem prop="mobilePhone">
-            <i-input
+              <template #prepend><el-icon><Lock /></el-icon></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="mobilePhone">
+            <el-input
               type="text"
               v-model="formRegist.mobilePhone"
               clearable
               placeholder="手机号"
             >
-              <Icon type="md-phone-portrait" slot="prepend"></Icon>
-            </i-input>
-          </FormItem>
-          <FormItem prop="code">
-            <i-input
+              <template #prepend><el-icon><Iphone /></el-icon></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="code">
+            <el-input
               type="text"
               v-model="formRegist.code"
               clearable
               placeholder="手机验证码"
             >
-              <Icon
-                type="ios-text-outline"
-                style="font-weight: bold"
-                slot="prepend"
-              />
-              <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
-            </i-input>
-          </FormItem>
-          <FormItem>
-            <Button @click="verifyBtnClick" long :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</Button>
-          </FormItem>
-          <FormItem>
-            <Button type="error" size="large" @click="handleRegist" long
-              >注册</Button
+              <template #prepend><el-icon style="font-weight: bold"><Document /></el-icon></template>
+              <template #append><el-button @click="sendCode">{{ codeMsg }}</el-button></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="verifyBtnClick" style="width:100%" :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="danger" size="large" @click="handleRegist" style="width:100%"
+              >注册</el-button
             >
-          </FormItem>
-          <FormItem><span class="color999 ml_20">点击注册，表示您同意《<router-link to="/article?id=1371992704333905920" target="_blank">商城用户协议</router-link>》</span></FormItem>
-        </Form>
+          </el-form-item>
+          <el-form-item><span class="color999 ml_20">点击注册，表示您同意《<router-link to="/article?id=1371992704333905920" target="_blank">商城用户协议</router-link>》</span></el-form-item>
+        </el-form>
         <!-- 拼图验证码 -->
         <Verify
           ref="verify"
@@ -82,16 +78,16 @@
         <div class="login-btn">已有账号？<a @click="$router.push('login')">立即登录</a></div>
     </div>
     <div class="foot">
-      <Row type="flex" justify="space-around" class="help">
+      <div type="flex" justify="space-around" class="help">
         <router-link to="/article" class="item" target="_blank">帮助</router-link>
         <router-link to="/article?id=1371779927900160000" class="item" target="_blank">隐私</router-link>
         <router-link to="/article?id=1371992704333905920" class="item" target="_blank">条款</router-link>
-      </Row>
-      <Row type="flex" justify="center" class="copyright">
+      </div>
+      <div type="flex" justify="center" class="copyright">
         Copyright © {{year}} - Present
         <a href="https://pickmall.cn" target="_blank" style="margin: 0 5px">{{config.title}}</a>
         版权所有
-      </Row>
+      </div>
     </div>
   </div>
 </template>
@@ -103,9 +99,10 @@ import { md5 } from '@/plugins/md5.js';
 import * as apiLogin from '@/api/login.js';
 import { sendSms } from '@/api/common.js';
 import Verify from '@/components/verify';
+import { User, Lock, Iphone, Document } from '@element-plus/icons-vue';
 export default {
   name: 'SignUp',
-  components: { Verify },
+  components: { Verify, User, Lock, Iphone, Document },
   data () {
     return {
       config:require('@/config'),
@@ -254,7 +251,7 @@ export default {
 
 .other-login {
   margin: 0 auto;
-  .ivu-icon {
+  .el-icon {
     font-size: 24px;
   }
 }
diff --git a/buyer/src/pages/article/index.vue b/buyer/src/pages/article/index.vue
index bcb8ff71..d9feafe5 100644
--- a/buyer/src/pages/article/index.vue
+++ b/buyer/src/pages/article/index.vue
@@ -5,86 +5,81 @@
 
     <div class="title-bg"><p>文章帮助中心</p></div>
     <div class="container width_1200">
-      <Layout class="layoutAll">
-        <Sider class="side-bar" ref="side" :collapsed-width="78">
+      <div class="layoutAll">
+        <el-aside class="side-bar" width="200px">
           <div class="article-cate">文章分类列表</div>
-          <Menu
+          <el-menu
             class="side-menu"
-            theme="light"
-            width="auto"
-            ref='menu'
-            :active-name="activeName"
-            :open-names="openName"
-            @on-select="onSelect"
+            :key="menuKey"
+            :default-active="String(activeName)"
+            :default-openeds="openName"
+            @select="onSelect"
           >
-            <!-- 循环导航栏  -->
-            <Submenu
-              v-show="menu.children"
+            <el-sub-menu
               v-for="(menu, index) in list"
+              v-show="menu.children"
               :key="index"
-              :name="menu.articleCategoryName"
+              :index="menu.articleCategoryName"
             >
-              <template slot="title">
+              <template #title>
                 <span>{{ menu.articleCategoryName }}</span>
               </template>
-              <MenuItem
+              <el-menu-item
                 v-for="(chlidren, i) in menu.children"
                 :key="i"
-                :name="chlidren.id"
-                >{{ chlidren.articleCategoryName }}</MenuItem
-              >
-            </Submenu>
-          </Menu>
-        </Sider>
-        <Layout class="layout ml_10">
-          <Content class="content">
-            <ul class="article-list" v-show="showList">
-              <li v-for="(article, index) in articleList" :key="index" @click="getDetail(article.id)">
-                {{article.title}}
-              </li>
-            </ul>
-            <transition mode="out-in">
-              <div v-show="!showList">
-                <a class="back-btn" @click="showList = true">&lt;返回上一级</a>
-                <h2 class="mt_10 mb_10">{{detail.title}}</h2>
-                <div class="mt_10 mb_10" v-html="detail.content"></div>
-              </div>
-            </transition>
-          </Content>
-        </Layout>
-      </Layout>
+                :index="String(chlidren.id)"
+              >{{ chlidren.articleCategoryName }}</el-menu-item>
+            </el-sub-menu>
+          </el-menu>
+        </el-aside>
+        <el-main class="content ml_10">
+          <ul class="article-list" v-show="showList">
+            <li v-for="(article, index) in articleList" :key="index" @click="getDetail(article.id)">
+              {{ article.title }}
+            </li>
+          </ul>
+          <transition mode="out-in">
+            <div v-show="!showList">
+              <a class="back-btn" @click="showList = true">&lt;返回上一级</a>
+              <h2 class="mt_10 mb_10">{{ detail.title }}</h2>
+              <div class="mt_10 mb_10" v-html="detail.content"></div>
+            </div>
+          </transition>
+        </el-main>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import {articleCateList, articleDetail, articleList} from '@/api/common.js'
+import { articleCateList, articleDetail, articleList } from '@/api/common.js'
+
 export default {
-  name: 'Home',
+  name: 'ArticleIndex',
   data () {
     return {
-      list: [], // 分类列表
-      detail: '', // 文章详情
-      articleList: [], // 分类下的文章列表
-      activeName: '1347456734864367616', // 左侧激活项
-      openName: [], // 展开的名称
-      params: { // 请求参数
+      list: [],
+      detail: '',
+      articleList: [],
+      activeName: '1347456734864367616',
+      openName: [],
+      menuKey: 0,
+      params: {
         pageNumber: 1,
         pageSize: 100,
         categoryId: '',
         sort: 'sort'
       },
-      showList: true // 展示文章列表
+      showList: true
     };
   },
   methods: {
-    // 每次点击左侧bar的callback
     onSelect (id) {
       this.getList(id)
       this.detail = ''
       this.showList = true
     },
-    getCateList () { // 文章分类列表
+    getCateList () {
       articleCateList().then(res => {
         if (res.success) {
           this.list = res.result
@@ -105,15 +100,12 @@ export default {
             this.activeName = this.list[0].children[0].id
             this.openName.push(this.list[0].articleCategoryName)
           }
-          this.$nextTick(() => {
-            this.$refs.menu.updateOpened()
-            this.$refs.menu.updateActiveName()
-          })
+          this.menuKey++
           this.getList(this.activeName)
         }
       })
     },
-    getList (id) { // 文章列表
+    getList (id) {
       this.params.categoryId = id
       articleList(this.params).then(res => {
         if (res.success) {
@@ -121,7 +113,7 @@ export default {
         }
       })
     },
-    async getDetail (id) { // 文章详情
+    async getDetail (id) {
       await articleDetail(id).then(res => {
         if (res.success) {
           this.detail = res.result
@@ -162,6 +154,7 @@ export default {
 }
 
 .layoutAll {
+  display: flex;
   min-height: 1200px;
   @include background_color($light_background_color);
 }
@@ -177,7 +170,6 @@ export default {
 
 .layout-footer-center {
   padding: 0px 15px;
-
   padding-bottom: 15px;
   text-align: center;
 }
@@ -191,7 +183,6 @@ export default {
     height: 100px;
     line-height: 100px;
     color: #fff;
-    line-height: 100px;
     margin: 0 auto;
     padding-left: 10px;
   }
diff --git a/buyer/src/pages/home/memberCenter/AccountSafe.vue b/buyer/src/pages/home/memberCenter/AccountSafe.vue
index c2d23a26..dcb024de 100644
--- a/buyer/src/pages/home/memberCenter/AccountSafe.vue
+++ b/buyer/src/pages/home/memberCenter/AccountSafe.vue
@@ -3,87 +3,89 @@
     <card _Title="账户安全"/>
     <div class="safeList">
       <!-- 密码 -->
-      <Row class="safeItem">
-        <Col :span="2">
-          <Icon size="40" type="md-key"/>
-        </Col>
-        <Col :span="16">
+      <div class="safeItem">
+        <div :span="2">
+          <el-icon :size="40"><Key /></el-icon>
+        </div>
+        <div :span="16">
           <div class="setDivItem">登录密码</div>
           <div class="setDivItem theme">互联网账号存在被盗风险，建议您定期更改密码以保护账户安全。</div>
-        </Col>
-        <Col :span="4">
-          <Button @click="modifyPwd">修改密码</Button>
-        </Col>
-      </Row>
+        </div>
+        <div :span="4">
+          <el-button @click="modifyPwd">修改密码</el-button>
+        </div>
+      </div>
 
-      <Row class="safeItem">
-        <Col :span="2">
-          <Icon size="40" type="md-link" />
-        </Col>
-        <Col :span="16">
+      <div class="safeItem">
+        <div :span="2">
+          <el-icon :size="40"><Link /></el-icon>
+        </div>
+        <div :span="16">
           <div class="setDivItem">第三方账户绑定</div>
           <div class="setDivItem theme">绑定后可使用第三方账号快捷登录。</div>
           <div class="connectList">
             <div class="connectRow">
               <div class="connectRowLeft">
                 <span class="connectName">{{ wechatConnect.label }}</span>
-                <Tag v-if="isBound(wechatConnect.type)" color="success">已绑定</Tag>
-                <Tag v-else>未绑定</Tag>
+                <el-tag v-if="isBound(wechatConnect.type)" color="success">已绑定</el-tag>
+                <el-tag v-else>未绑定</el-tag>
               </div>
             </div>
-            <Spin size="large" fix v-if="connectLoading"></Spin>
+            <el-skeleton size="large" fix v-if="connectLoading"></el-skeleton>
           </div>
-        </Col>
-        <Col :span="4">
-          <Button v-if="!isBound(wechatConnect.type)" type="primary" @click="openBindModal(wechatConnect)">绑定</Button>
-          <Button v-else @click="confirmUnbind(wechatConnect)">解绑</Button>
-        </Col>
-      </Row>
+        </div>
+        <div :span="4">
+          <el-button v-if="!isBound(wechatConnect.type)" type="primary" @click="openBindModal(wechatConnect)">绑定</el-button>
+          <el-button v-else @click="confirmUnbind(wechatConnect)">解绑</el-button>
+        </div>
+      </div>
     </div>
 
-    <Modal
+    <el-dialog
       v-model="bindModalVisible"
       title="绑定第三方账户"
-      :mask-closable="false"
+      :close-on-click-modal="false"
       :footer-hide="bindForm.type === 'WECHAT'"
       :ok-text="bindModalOkText"
       :loading="bindSubmitLoading"
-      @on-ok="submitBind"
-      @on-cancel="resetBindForm"
+      @ok="submitBind"
+      @cancel="resetBindForm"
     >
-      <Form :label-width="110">
-        <FormItem label="类型">
-          <Input v-model="bindForm.typeLabel" disabled />
-        </FormItem>
+      <el-form label-width="110px">
+        <el-form-item label="类型">
+          <el-input v-model="bindForm.typeLabel" disabled />
+        </el-form-item>
 
-        <FormItem v-if="bindForm.type === 'WECHAT'" label="公众号二维码">
+        <el-form-item v-if="bindForm.type === 'WECHAT'" label="公众号二维码">
           <div class="wechatQrBox">
             <div class="wechatQrImgBox">
-              <Spin fix v-if="qrCodeLoading"></Spin>
+              <el-skeleton fix v-if="qrCodeLoading"></el-skeleton>
               <img v-if="qrCodeSrc" class="wechatQrImg" :src="qrCodeSrc" alt="微信公众号二维码" />
               <div v-else class="wechatQrEmpty">二维码获取失败，请刷新重试</div>
             </div>
             <div class="wechatQrActions">
-              <Button @click="fetchWechatQrCode">刷新二维码</Button>
-              <Button type="primary" @click="submitBind">我已完成绑定</Button>
+              <el-button @click="fetchWechatQrCode">刷新二维码</el-button>
+              <el-button type="primary" @click="submitBind">我已完成绑定</el-button>
             </div>
             <div class="wechatQrTip">请使用微信扫码关注/授权，完成后点击“我已完成绑定”检测绑定状态</div>
           </div>
-        </FormItem>
+        </el-form-item>
 
-        <FormItem v-if="bindForm.type !== 'WECHAT'" label="OpenID/UnionID">
-          <Input v-model="bindForm.unionID" placeholder="请输入 OpenID/UnionID" />
-        </FormItem>
-      </Form>
-    </Modal>
+        <el-form-item v-if="bindForm.type !== 'WECHAT'" label="OpenID/UnionID">
+          <el-input v-model="bindForm.unionID" placeholder="请输入 OpenID/UnionID" />
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { Key, Link } from '@element-plus/icons-vue';
 // import { getPwdStatus } from '@/api/account';
 import storage from '@/plugins/storage'
 import { bindThirdAccount, getThirdAccountBindList, getWechatH5QrCode, unbindThirdAccount } from '@/api/login.js'
 export default {
+  components: { Key, Link },
   name: 'AccountSafe',
   data () {
     return {
@@ -264,7 +266,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  ::v-deep .ivu-col-span-2, .ivu-col-span-4 {
+  .safeItem > div:first-child,
+  .safeItem > div:last-child {
     text-align: center;
     color: $theme_color;
   }
@@ -281,9 +284,8 @@ export default {
     border-bottom: 1px solid $border_color;
     padding: 16px 0;
 
-    ::v-deep .ivu-col {
+    > div {
       padding: 8px 0;
-
     }
   }
 
diff --git a/buyer/src/pages/home/memberCenter/CommentList.vue b/buyer/src/pages/home/memberCenter/CommentList.vue
index 49aff9a3..c5cf12a3 100644
--- a/buyer/src/pages/home/memberCenter/CommentList.vue
+++ b/buyer/src/pages/home/memberCenter/CommentList.vue
@@ -4,12 +4,12 @@
 
     <div class="order">
       <div class="order-title">
-        <Row class="order-row title">
-          <i-col span="12">订单详情</i-col>
-          <i-col span="4">收货人</i-col>
-          <i-col span="4">评价</i-col>
-          <i-col span="6"></i-col>
-        </Row>
+        <div class="order-row title">
+          <div span="12">订单详情</div>
+          <div span="4">收货人</div>
+          <div span="4">评价</div>
+          <div span="6"></div>
+        </div>
       </div>
       <empty v-if="list.length === 0" />
 
@@ -20,40 +20,39 @@
             <span class="color999 ml_10">{{item.createTime}}</span>
             <span class="hover-pointer fontsize_12 eval-detail" @click="evaluateDetail(item.id)">评价详情</span>
           </div>
-          <Row class="order-item-view">
-            <i-col span="12" class="item-view-name">
+          <div class="order-item-view">
+            <div span="12" class="item-view-name">
               <div class="order-img hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
                 <img :src="item.goodsImage" alt="" />
               </div>
               <div class="order-name hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
                 {{item.goodsName}}
               </div>
-            </i-col>
-            <i-col span="4">{{item.createBy | secrecyMobile}}</i-col>
-            <i-col span="4">
+            </div>
+            <div span="4">{{ $filters.secrecyMobile(item.createBy ) }}</div>
+            <div span="4">
               {{item.grade==='GOOD'?'好评' : item.grade === 'WORSE'?'差评' : '中评'}}
-            </i-col>
-            <i-col span="4">
-              <Tooltip transfer>
+            </div>
+            <div span="4">
+              <el-tooltip>
                   <div class="content">{{item.content}}</div>
-                  <div style="white-space: normal;word-break:break-all" slot="content">
-                    {{item.content}}
-                  </div>
-              </Tooltip>
-            </i-col>
-          </Row>
+                  <template #content>
+                    <div style="white-space: normal;word-break:break-all">
+                      {{item.content}}
+                    </div>
+                  </template>
+              </el-tooltip>
+            </div>
+          </div>
         </div>
       </div>
-      <Spin v-if="loading"></Spin>
+      <el-skeleton v-if="loading"></el-skeleton>
     </div>
     <!-- 分页 -->
     <div class="page-size">
-      <Page :total="total" @on-change="changePageNum"
-        @on-page-size-change="changePageSize"
-        :page-size="params.pageSize"
-        show-total
-        show-sizer>
-      </Page>
+      <el-pagination :total="total" @current-change="changePageNum"
+        @size-change="changePageSize"
+        :page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
     </div>
   </div>
 </template>
diff --git a/buyer/src/pages/home/memberCenter/ComplainDetail.vue b/buyer/src/pages/home/memberCenter/ComplainDetail.vue
index 58270e62..a1a5377d 100644
--- a/buyer/src/pages/home/memberCenter/ComplainDetail.vue
+++ b/buyer/src/pages/home/memberCenter/ComplainDetail.vue
@@ -9,7 +9,7 @@
       </p>
     </div>
 
-    <Alert class="l_title" show-icon type="warning">我的申诉信息</Alert>
+    <el-alert class="l_title" show-icon type="warning">我的申诉信息</el-alert>
     <table cellspacing="0" cellpadding='0' border="1">
       <tr>
         <td>投诉商品</td>
@@ -31,7 +31,7 @@
               <div class="demo-upload-list" v-for="(img, index) in detail.images.split(',')" :key="index">
                 <img :src="img">
                 <div class="demo-upload-list-cover">
-                  <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
+                  <el-icon @click="handleView(img)"><View /></el-icon>
                 </div>
               </div>
             </template>
@@ -41,7 +41,7 @@
       </tr>
     </table>
 
-    <Alert class="l_title" show-icon type="warning">商家申诉信息</Alert>
+    <el-alert class="l_title" show-icon type="warning">商家申诉信息</el-alert>
     <table cellspacing="0" cellpadding='0' border="1">
       <tr>
         <td>申诉时间</td>
@@ -60,7 +60,7 @@
               <div class="demo-upload-list" v-for="(img, index) in detail.appealImages.split(',')" :key="index">
                 <img :src="img">
                 <div class="demo-upload-list-cover">
-                  <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
+                  <el-icon @click="handleView(img)"><View /></el-icon>
                 </div>
               </div>
             </template>
@@ -70,7 +70,7 @@
       </tr>
     </table>
 
-    <Alert class="l_title" show-icon type="warning">平台仲裁</Alert>
+    <el-alert class="l_title" show-icon type="warning">平台仲裁</el-alert>
     <table cellspacing="0" cellpadding='0' border="1">
       <tr>
         <td>仲裁意见</td>
@@ -78,7 +78,7 @@
       </tr>
     </table>
 
-    <Alert class="l_title" show-icon type="warning">对话详情</Alert>
+    <el-alert class="l_title" show-icon type="warning">对话详情</el-alert>
     <div class="speak-way" v-if="detail.orderComplaintCommunications && detail.orderComplaintCommunications.length">
       <div
         class="speak-msg seller"
@@ -108,22 +108,24 @@
       <tr>
         <td></td>
         <td>
-          <Button type="primary"  :loading="submitLoading" @click="handleSubmit" style="margin-left: 5px">
+          <el-button type="primary"  :loading="submitLoading" @click="handleSubmit" style="margin-left: 5px">
             回复
-          </Button>
+          </el-button>
         </td>
       </tr>
     </table>
 
-    <Modal title="View Image" v-model="visible">
+    <el-dialog title="View Image" v-model="visible">
       <img :src="previewImage" v-if="visible" style="width: 100%">
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 <script>
+import { View } from '@element-plus/icons-vue';
 import {getComplainDetail} from '@/api/member.js';
 import {communication} from '@/api/order';
 export default {
+  components: { View },
   data () {
     return {
       detail: {}, // 评价详情
diff --git a/buyer/src/pages/home/memberCenter/ComplainList.vue b/buyer/src/pages/home/memberCenter/ComplainList.vue
index 5e442efb..770e2bd6 100644
--- a/buyer/src/pages/home/memberCenter/ComplainList.vue
+++ b/buyer/src/pages/home/memberCenter/ComplainList.vue
@@ -4,12 +4,12 @@
 
     <div class="order">
       <div class="order-title">
-        <Row class="order-row title">
-          <i-col span="12">商品信息</i-col>
-          <i-col span="4">投诉状态</i-col>
-          <i-col span="4">投诉主题</i-col>
-          <i-col span="6"></i-col>
-        </Row>
+        <div class="order-row title">
+          <div span="12">商品信息</div>
+          <div span="4">投诉状态</div>
+          <div span="4">投诉主题</div>
+          <div span="6"></div>
+        </div>
       </div>
       <empty v-if="list.length === 0" />
 
@@ -21,40 +21,39 @@
             <span class="hover-pointer fontsize_12 eval-detail" @click="goDetail(item.id)">投诉详情</span>
             <span class="hover-pointer fontsize_12 eval-detail" style="right: 90px" v-if="item.complainStatus === 'APPLYING' || item.complainStatus === 'NEW'" @click="cancel(item.id)">取消投诉</span>
           </div>
-          <Row class="order-item-view">
-            <i-col span="12" class="item-view-name">
+          <div class="order-item-view">
+            <div span="12" class="item-view-name">
               <div class="order-img hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
                 <img :src="item.goodsImage" alt="" />
               </div>
               <div class="order-name hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
                 {{item.goodsName}}
               </div>
-            </i-col>
-            <i-col span="4">{{statusLabel[item.complainStatus]}}</i-col>
-            <i-col span="4">
+            </div>
+            <div span="4">{{statusLabel[item.complainStatus]}}</div>
+            <div span="4">
               <div class="content">{{item.complainTopic}}</div>
-            </i-col>
-            <i-col span="4">
-              <Tooltip >
+            </div>
+            <div span="4">
+              <el-tooltip>
                 <div class="content">{{item.content}}</div>
-                <div style="white-space: normal;" slot="content">
-                  {{item.content}}
-                </div>
-              </Tooltip>
-            </i-col>
-          </Row>
+                <template #content>
+                  <div style="white-space: normal;">
+                    {{item.content}}
+                  </div>
+                </template>
+              </el-tooltip>
+            </div>
+          </div>
         </div>
       </div>
-      <Spin v-if="loading"></Spin>
+      <el-skeleton v-if="loading"></el-skeleton>
     </div>
     <!-- 分页 -->
     <div class="page-size">
-      <Page :total="total" @on-change="changePageNum"
-        @on-page-size-change="changePageSize"
-        :page-size="params.pageSize"
-        show-total
-        show-sizer>
-      </Page>
+      <el-pagination :total="total" @current-change="changePageNum"
+        @size-change="changePageSize"
+        :page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
     </div>
   </div>
 </template>
diff --git a/buyer/src/pages/home/memberCenter/Distribution.vue b/buyer/src/pages/home/memberCenter/Distribution.vue
index 864c603e..8a382796 100644
--- a/buyer/src/pages/home/memberCenter/Distribution.vue
+++ b/buyer/src/pages/home/memberCenter/Distribution.vue
@@ -4,39 +4,38 @@
     <!-- 分销申请 -->
 
     <div v-if="status === 0">
-      <Alert type="warning">分销商申请</Alert>
-      <Form ref="form" :model="applyForm" :rules="rules">
-        <FormItem label="姓名" prop="name">
-          <Input v-model="applyForm.name"></Input>
-        </FormItem>
-        <FormItem label="身份证号" prop="idNumber">
-          <Input v-model="applyForm.idNumber"></Input>
-        </FormItem>
-        <FormItem label="银行开户行" prop="settlementBankBranchName">
-          <Input v-model="applyForm.settlementBankBranchName"></Input>
-        </FormItem>
-        <FormItem label="银行开户名" prop="settlementBankAccountName">
-          <Input v-model="applyForm.settlementBankAccountName"></Input>
-        </FormItem>
-        <FormItem label="银行账号" prop="settlementBankAccountNum">
-          <Input v-model="applyForm.settlementBankAccountNum"></Input>
-        </FormItem>
+      <el-alert type="warning">分销商申请</el-alert>
+      <el-form ref="form" :model="applyForm" :rules="rules">
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="applyForm.name"></el-input>
+        </el-form-item>
+        <el-form-item label="身份证号" prop="idNumber">
+          <el-input v-model="applyForm.idNumber"></el-input>
+        </el-form-item>
+        <el-form-item label="银行开户行" prop="settlementBankBranchName">
+          <el-input v-model="applyForm.settlementBankBranchName"></el-input>
+        </el-form-item>
+        <el-form-item label="银行开户名" prop="settlementBankAccountName">
+          <el-input v-model="applyForm.settlementBankAccountName"></el-input>
+        </el-form-item>
+        <el-form-item label="银行账号" prop="settlementBankAccountNum">
+          <el-input v-model="applyForm.settlementBankAccountNum"></el-input>
+        </el-form-item>
 
-        <FormItem>
-          <Button type="primary" :loading="applyLoading" @click="apply"
-          >提交申请</Button
+        <el-form-item>
+          <el-button type="primary" :loading="applyLoading" @click="apply"
+          >提交申请</el-button
           >
-        </FormItem>
-      </Form>
+        </el-form-item>
+      </el-form>
     </div>
     <!-- 分销审核 -->
     <div v-if="status === 1">
-      <Alert type="success">
-        您提交的信息正在审核
-        <template slot="desc"
-        >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
-        >
-      </Alert>
+      <el-alert
+        type="success"
+        title="您提交的信息正在审核"
+        description="提交认证申请后，工作人员将在三个工作日进行核对完成审核"
+      />
     </div>
     <!-- 分销提现、商品、订单 -->
     <div v-if="status === 2">
@@ -54,211 +53,173 @@
         <div class="mb_20 account-price">
           <span class="subTips">可提现金额：</span>
           <span class="fontsize_48 global_color"
-          >￥{{ result.canRebate | unitPrice }}</span
-          >
+          >￥{{ $filters.unitPrice(result.canRebate) }}</span>
           <span class="subTips">冻结金额：</span>
-          <span class="">￥{{ result.commissionFrozen | unitPrice }}</span>
+          <span class="">￥{{ $filters.unitPrice(result.commissionFrozen) }}</span>
           <span class="subTips">返利总金额：</span>
-          <span class="">￥{{ result.rebateTotal | unitPrice }}</span>
-          <Button
+          <span class="">￥{{ $filters.unitPrice(result.rebateTotal) }}</span>
+          <el-button
             type="primary"
             size="small"
             class="ml_20"
             @click="withdrawApplyModal = true"
-          >申请提现</Button
+          >申请提现</el-button
           >
         </div>
       </div>
-      <Tabs :value="tabName" @on-click="tabPaneChange">
-        <TabPane label="已选商品" name="goodsChecked">
-          <Table stripe :columns="goodsColumns" :data="goodsData.records">
-            <template slot-scope="{ row }" slot="name">
-              <div
-                class="goods-msg"
-                @click="
-                  linkTo(
-                    `/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}`
-                  )
-                "
-              >
-                <img
-                  style="vertical-align: top"
-                  :src="row.thumbnail"
-                  width="60"
-                  height="60"
-                  alt=""
-                />&nbsp; {{ row.goodsName }}
-              </div>
-            </template>
-            <template slot-scope="{ row }" slot="price">
-              <span> ￥{{ row.price | unitPrice }}</span>
-            </template>
-            <template slot-scope="{ row }" slot="commission">
-              <span> ￥{{ row.commission | unitPrice }}</span>
-            </template>
-            <template slot-scope="{ row }" slot="action">
-              <Button
-                type="success"
-                size="small"
-                style="margin-right: 5px"
-                @click="fenxiao(row)"
-              >分销商品</Button
-              >
-              <Button
-                type="error"
-                size="small"
-                @click="selectGoods(row.id, false)"
-              >取消选择</Button
-              >
-            </template>
-          </Table>
+      <el-tabs v-model="tabName" @tab-click="(tab) => tabPaneChange(tab.paneName)">
+        <el-tab-pane label="已选商品" name="goodsChecked">
+          <el-table stripe :data="goodsData.records || []">
+            <el-table-column label="商品名称" width="400">
+              <template #default="{ row }">
+                <div
+                  class="goods-msg"
+                  @click="linkTo(`/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}`)"
+                >
+                  <img style="vertical-align: top" :src="row.thumbnail" width="60" height="60" alt="" />
+                  &nbsp; {{ row.goodsName }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="商品价格">
+              <template #default="{ row }">
+                <span> ￥{{ $filters.unitPrice(row.price) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="佣金">
+              <template #default="{ row }">
+                <span> ￥{{ $filters.unitPrice(row.commission) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" min-width="120">
+              <template #default="{ row }">
+                <el-button type="success" size="small" style="margin-right: 5px" @click="fenxiao(row)">分销商品</el-button>
+                <el-button type="danger" size="small" @click="selectGoods(row.id, false)">取消选择</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
           <div class="page-size">
-            <Page
-              :current="params.pageNumber"
+            <el-pagination               :current-page="params.pageNumber"
               :total="goodsData.total"
               :page-size="params.pageSize"
-              @on-change="changePage"
-              size="small"
-              show-total
-              show-elevator
-            ></Page>
+              @current-change="changePage"
+              small
+             layout="total, prev, pager, next, jumper"></el-pagination>
           </div>
-        </TabPane>
-        <TabPane label="未选商品" name="goodsUncheck">
-          <Table stripe :columns="goodsColumns" :data="goodsData.records">
-            <template slot-scope="{ row }" slot="name">
-              <div
-                class="goods-msg"
-                @click="
-                  linkTo(
-                    `/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}`
-                  )
-                "
-              >
-                <img
-                  style="vertical-align: top"
-                  :src="row.thumbnail"
-                  width="60"
-                  height="60"
-                  alt=""
-                />&nbsp; {{ row.goodsName }}
-              </div>
-            </template>
-            <template slot-scope="{ row }" slot="price">
-              <span> ￥{{ row.price | unitPrice }}</span>
-            </template>
-            <template slot-scope="{ row }" slot="commission">
-              <span> ￥{{ row.commission | unitPrice }}</span>
-            </template>
-            <template slot-scope="{ row }" slot="action">
-              <Button
-                type="primary"
-                size="small"
-                style="margin-right: 5px"
-                @click="selectGoods(row.id, true)"
-              >选择商品</Button
-              >
-            </template>
-          </Table>
+        </el-tab-pane>
+        <el-tab-pane label="未选商品" name="goodsUncheck">
+          <el-table stripe :data="goodsData.records || []">
+            <el-table-column label="商品名称" width="400">
+              <template #default="{ row }">
+                <div
+                  class="goods-msg"
+                  @click="linkTo(`/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}`)"
+                >
+                  <img style="vertical-align: top" :src="row.thumbnail" width="60" height="60" alt="" />
+                  &nbsp; {{ row.goodsName }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="商品价格">
+              <template #default="{ row }">
+                <span> ￥{{ $filters.unitPrice(row.price) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="佣金">
+              <template #default="{ row }">
+                <span> ￥{{ $filters.unitPrice(row.commission) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" min-width="120">
+              <template #default="{ row }">
+                <el-button type="primary" size="small" style="margin-right: 5px" @click="selectGoods(row.id, true)">选择商品</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
           <div class="page-size">
-            <Page
-              :current="params.pageNumber"
+            <el-pagination               :current-page="params.pageNumber"
               :total="goodsData.total"
               :page-size="params.pageSize"
-              @on-change="changePage"
-              size="small"
-              show-total
-              show-elevator
-            ></Page>
+              @current-change="changePage"
+              small
+             layout="total, prev, pager, next, jumper"></el-pagination>
           </div>
-        </TabPane>
-        <TabPane label="提现记录" name="log">
-          <Table stripe :columns="logColumns" :data="logData.records">
-            <template slot-scope="{ row }" slot="sn">
-              <span>{{ row.sn }}</span>
-            </template>
-            <template slot-scope="{ row }" slot="time">
-              <span>{{ row.createTime }}</span>
-            </template>
-            <template slot-scope="{ row }" slot="price">
-              <span
-                v-if="row.distributionCashStatus == 'VIA_AUDITING'"
-                style="color: green"
-              >
-                +￥{{ row.price | unitPrice }}</span
-              >
-              <span v-else style="color: red">
-                -￥{{ row.price | unitPrice }}</span
-              >
-            </template>
-            <template slot-scope="{ row }" slot="status">
-              <span>
-                {{
-                  row.distributionCashStatus == "APPLY"
-                    ? "待处理"
-                    : row.distributionCashStatus == "VIA_AUDITING"
-                      ? "通过"
-                      : "拒绝"
-                }}</span
-              >
-            </template>
-          </Table>
+        </el-tab-pane>
+        <el-tab-pane label="提现记录" name="log">
+          <el-table stripe :data="logData.records || []">
+            <el-table-column prop="sn" label="编号" />
+            <el-table-column prop="createTime" label="申请时间" />
+            <el-table-column label="提现金额">
+              <template #default="{ row }">
+                <span v-if="row.distributionCashStatus == 'VIA_AUDITING'" style="color: green">
+                  +￥{{ $filters.unitPrice(row.price) }}
+                </span>
+                <span v-else style="color: red">
+                  -￥{{ $filters.unitPrice(row.price) }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="提现状态">
+              <template #default="{ row }">
+                <span>
+                  {{
+                    row.distributionCashStatus == "APPLY"
+                      ? "待处理"
+                      : row.distributionCashStatus == "VIA_AUDITING"
+                        ? "通过"
+                        : "拒绝"
+                  }}
+                </span>
+              </template>
+            </el-table-column>
+          </el-table>
           <div class="page-size">
-            <Page
-              :current="logParams.pageNumber"
+            <el-pagination               :current-page="logParams.pageNumber"
               :total="logData.total"
               :page-size="logParams.pageSize"
-              @on-change="changePageLog"
-              size="small"
-              show-total
-              show-elevator
-            ></Page>
+              @current-change="changePageLog"
+              small
+             layout="total, prev, pager, next, jumper"></el-pagination>
           </div>
-        </TabPane>
-      </Tabs>
+        </el-tab-pane>
+      </el-tabs>
     </div>
     <!-- 未开放 -->
     <div v-if="status === 3">
-      <Alert type="error">
-        分销功能暂未开启
-        <template slot="desc"
-        >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
-        >
-      </Alert>
+      <el-alert type="danger" title="分销功能暂未开启" />
     </div>
     <!-- 分销资格被清退 -->
     <div v-if="status === 4">
-      <Alert type="error">
+      <el-alert type="danger">
         您的分销资格已被清退。请联系管理员或进行申诉
 
-        <Button style="margin-left: 50px;" type="warning" @click="repaying">申诉</Button>
-      </Alert>
+        <el-button style="margin-left: 50px;" type="warning" @click="repaying">申诉</el-button>
+      </el-alert>
     </div>
     <!-- 分销申诉审核 -->
     <div v-if="status === 5">
-      <Alert type="success">
-        您提交的申诉正在审核
-        <template slot="desc"
-        >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
-        >
-      </Alert>
+      <el-alert
+        type="success"
+        title="您提交的申诉正在审核"
+        description="提交认证申请后，工作人员将在三个工作日进行核对完成审核"
+      />
     </div>
-    <Modal v-model="withdrawApplyModal" width="530">
-      <p slot="header">
-        <Icon type="edit"></Icon>
+    <el-dialog v-model="withdrawApplyModal" width="530">
+      <template #header><p>
+        <el-icon><Edit /></el-icon>
         <span>提现金额</span>
-      </p>
+      </p></template>
       <div>
-        <Input v-model="withdrawPrice" size="large" number maxlength="9"
-        ><span slot="append">元</span></Input
+        <el-input v-model="withdrawPrice" size="large" number maxlength="9"
+        ><template #append><span>元</span></template></el-input
         >
       </div>
-      <div slot="footer" style="text-align: center">
-        <Button type="primary" size="large" @click="withdraw">提现</Button>
-      </div>
-    </Modal>
-    <Modal v-model="qrcodeShow" title="分销商品" width="800">
-      <Alert type="warning"> 下载二维码或者复制链接分享商品 </Alert>
+      <template #footer><div style="text-align: center">
+        <el-button type="primary" size="large" @click="withdraw">提现</el-button>
+      </div></template>
+    </el-dialog>
+    <el-dialog v-model="qrcodeShow" title="分销商品" width="800">
+      <el-alert type="warning"> 下载二维码或者复制链接分享商品 </el-alert>
       <div class="qrcode">
         <div style="width: 150px; height: 150px; border: 1px solid #eee">
           <vue-qr
@@ -270,8 +231,8 @@
             :size="150"
           ></vue-qr>
           <div class="qrcode-platform">PC端</div>
-          <Button class="download-btn" type="success" @click="downloadQrcode"
-          >下载二维码</Button
+          <el-button class="download-btn" type="success" @click="downloadQrcode"
+          >下载二维码</el-button
           >
         </div>
         <div style="width: 150px; height: 150px; border: 1px solid #eee">
@@ -284,20 +245,20 @@
             :size="150"
           ></vue-qr>
           <div class="qrcode-platform">移动应用端</div>
-          <Button class="download-btn" type="success" @click="downloadQrcodeH5"
-          >下载二维码</Button
+          <el-button class="download-btn" type="success" @click="downloadQrcodeH5"
+          >下载二维码</el-button
           >
         </div>
       </div>
 
       <div class="mt_10" style="margin-top: 100px;">
-        商品链接：<Input style="width: 600px" v-model="qrcode"></Input>
-      </div>
-    </Modal>
+        商品链接：<el-input style="width: 600px" v-model="qrcode"></el-input>
+      </div></el-dialog>
   </div>
 </template>
 
 <script>
+import { Edit } from '@element-plus/icons-vue';
 import {
   distribution,
   applyDistribution,
@@ -311,7 +272,7 @@ import { checkBankno } from "@/plugins/Foundation";
 import vueQr from "vue-qr";
 export default {
   name: "Distribution",
-  components: { vueQr },
+  components: { vueQr, Edit },
   data() {
     return {
       config:require('@/config'),
@@ -358,20 +319,6 @@ export default {
       withdrawPrice: 0, // 提现金额
       goodsData: {}, // 商品数据
       logData: {}, // 日志数据
-      goodsColumns: [
-        // 商品表头
-        { title: "商品名称", slot: "name", width: 400 },
-        { title: "商品价格", slot: "price" },
-        { title: "佣金", slot: "commission" },
-        { title: "操作", slot: "action", minWidth: 120 },
-      ],
-      logColumns: [
-        // 日志表头
-        { title: "编号", slot: "sn" },
-        { title: "申请时间", slot: "time" },
-        { title: "提现金额", slot: "price" },
-        { title: "提现状态", slot: "status" },
-      ],
       params: {
         // 商品请求参数
         pageNumber: 1,
@@ -584,7 +531,7 @@ export default {
   margin-left: 25px;
   margin-top: 5px
 }
-::v-deep .ivu-alert-message {
+:deep(.el-alert__content) {
   p {
     margin: 4px 0;
   }
diff --git a/buyer/src/pages/home/memberCenter/Favorites.vue b/buyer/src/pages/home/memberCenter/Favorites.vue
index ccddf03a..e03616e9 100644
--- a/buyer/src/pages/home/memberCenter/Favorites.vue
+++ b/buyer/src/pages/home/memberCenter/Favorites.vue
@@ -17,22 +17,22 @@
           </div>
           <div v-else class="goodsTitle  hover-pointer" @click="buynow(item.skuId, item.goodsId,item.id)" >
             {{ item.storeName }}
-            <Tag color="error" class="operated" v-if="item.selfOperated">商家自营</Tag>
+            <el-tag color="error" class="operated" v-if="item.selfOperated">商家自营</el-tag>
           </div>
           <div class="goodsPrice">
-            <span v-if="params.type === 'GOODS'">{{ item.price | unitPrice('￥') }}</span>
+            <span v-if="params.type === 'GOODS'">{{ $filters.unitPrice(item.price, '￥') }}</span>
 
           </div>
           <div class="goodsBuy">
-            <Button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)"
-              v-if="params.type === 'GOODS'">立即购买</Button>
-            <Button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</Button>
-            <Button size="small" v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</Button>
-            <Button size="small" v-if="params.type === 'STORE'" @click="cancelStore(item.id)">取消收藏</Button>
+            <el-button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)"
+              v-if="params.type === 'GOODS'">立即购买</el-button>
+            <el-button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</el-button>
+            <el-button size="small" v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</el-button>
+            <el-button size="small" v-if="params.type === 'STORE'" @click="cancelStore(item.id)">取消收藏</el-button>
           </div>
         </div>
       </div>
-      <Spin size="large" fix v-if="spinShow"></Spin>
+      <el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
     </div>
     <empty v-else />
   </div>
diff --git a/buyer/src/pages/home/memberCenter/MemberGrade.vue b/buyer/src/pages/home/memberCenter/MemberGrade.vue
index 13c94807..ca2dfe6b 100644
--- a/buyer/src/pages/home/memberCenter/MemberGrade.vue
+++ b/buyer/src/pages/home/memberCenter/MemberGrade.vue
@@ -9,7 +9,7 @@
             <div class="gradeNameRow">
               <span class="gradeNameText">{{ currentGrade.gradeName || '暂无等级' }}</span>
               <span v-if="currentGradeBenefits.length" class="benefitTagsInline">
-                <Tag v-for="b in currentGradeBenefits" :key="b.id" class="benefitTag" color="blue">{{ b.benefitName || '-' }}</Tag>
+                <el-tag v-for="b in currentGradeBenefits" :key="b.id" class="benefitTag" color="blue">{{ b.benefitName || '-' }}</el-tag>
               </span>
             </div>
             <div class="gradeExp">
@@ -24,54 +24,58 @@
       </div>
     </div>
 
-    <Tabs value="rules">
-      <TabPane label="获取经验值方式" name="rules">
-        <Table :columns="ruleColumns" :data="ruleList" :loading="rulesLoading">
-          <template slot-scope="{ row }" slot="ruleItem">
-            <div class="ruleItem">
-              <div class="ruleTop">
-                <div class="ruleName">
-                  <span>{{ row.ruleName || row.ruleKey || '-' }}</span>
+    <el-tabs value="rules">
+      <el-tab-pane label="获取经验值方式" name="rules">
+        <el-table v-loading="rulesLoading" :data="ruleList">
+          <el-table-column label="获取方式" min-width="720">
+            <template #default="{ row }">
+              <div class="ruleItem">
+                <div class="ruleTop">
+                  <div class="ruleName">
+                    <span>{{ row.ruleName || row.ruleKey || '-' }}</span>
+                  </div>
+                  <el-tag v-if="row.completed === true" color="success">已完成</el-tag>
+                  <el-tag v-else color="default">未完成</el-tag>
+                </div>
+                <div class="ruleDesc">{{ getRuleDesc(row.ruleKey) }}</div>
+                <div class="ruleMeta">
+                  <span class="metaItem">单次获得：<b>+{{ row.value == null ? 0 : row.value }}</b></span>
+                  <span v-if="row.maxValue != null && Number(row.maxValue) > 0" class="metaItem">限额：<b>{{ row.maxValue }}</b></span>
+                  <span class="metaItem">已获得：<b>{{ row.gainedExperience == null ? 0 : row.gainedExperience }}</b></span>
                 </div>
-                <Tag v-if="row.completed === true" color="success">已完成</Tag>
-                <Tag v-else color="default">未完成</Tag>
               </div>
-              <div class="ruleDesc">{{ getRuleDesc(row.ruleKey) }}</div>
-              <div class="ruleMeta">
-                <span class="metaItem">单次获得：<b>+{{ row.value == null ? 0 : row.value }}</b></span>
-                <span v-if="row.maxValue != null && Number(row.maxValue) > 0" class="metaItem">限额：<b>{{ row.maxValue }}</b></span>
-                <span class="metaItem">已获得：<b>{{ row.gainedExperience == null ? 0 : row.gainedExperience }}</b></span>
-              </div>
-            </div>
-          </template>
-        </Table>
+            </template>
+          </el-table-column>
+        </el-table>
         <div class="rulesDesc" v-if="rulesDescription">{{ rulesDescription }}</div>
-      </TabPane>
-      <TabPane label="经验值记录" name="logs">
-        <Table :columns="logColumns" :data="experienceLogs.records || []" :loading="logLoading">
-          <template slot-scope="{ row }" slot="rule">
-            <span>{{ getRuleName(row.ruleKey) }}</span>
-          </template>
-          <template slot-scope="{ row }" slot="delta">
-            <div :style="{color: getLogDeltaColor(row)}">
-              <span v-if="getLogDeltaSign(row) === '+'">+</span>{{ getLogDeltaAbsValue(row) }}
-            </div>
-          </template>
-        </Table>
-        <Page
-          style="float:right;margin-top:10px"
-          :current="params.pageNumber"
+      </el-tab-pane>
+      <el-tab-pane label="经验值记录" name="logs">
+        <el-table v-loading="logLoading" :data="experienceLogs.records || []">
+          <el-table-column prop="createTime" label="时间" align="center" min-width="160" />
+          <el-table-column label="规则" align="center" min-width="160">
+            <template #default="{ row }">
+              <span>{{ getRuleName(row.ruleKey) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="变动值" align="center" min-width="120">
+            <template #default="{ row }">
+              <div :style="{ color: getLogDeltaColor(row) }">
+                <span v-if="getLogDeltaSign(row) === '+'">+</span>{{ getLogDeltaAbsValue(row) }}
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination           style="float:right;margin-top:10px"
+          :current-page="params.pageNumber"
           :total="experienceLogs.total || 0"
           :page-size="params.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[10, 20, 50]"
-          size="small"
-          show-total
-          show-elevator
-        ></Page>
-      </TabPane>
-    </Tabs>
+          @current-change="changePage"
+          @size-change="changePageSize"
+          :page-sizes="[10, 20, 50]"
+          small
+         layout="total, prev, pager, next, jumper"></el-pagination>
+      </el-tab-pane>
+    </el-tabs>
 
   </div>
 
@@ -100,34 +104,7 @@ export default {
         pageNumber: 1,
         pageSize: 10
       },
-      experienceLogs: {},
-      ruleColumns: [
-        {
-          title: '获取方式',
-          slot: 'ruleItem',
-          minWidth: 720
-        }
-      ],
-      logColumns: [
-        {
-          title: '时间',
-          key: 'createTime',
-          align: 'center',
-          minWidth: 160
-        },
-        {
-          title: '规则',
-          slot: 'rule',
-          align: 'center',
-          minWidth: 160
-        },
-        {
-          title: '变动值',
-          slot: 'delta',
-          align: 'center',
-          minWidth: 120
-        }
-      ]
+      experienceLogs: {}
     }
   },
   computed: {
diff --git a/buyer/src/pages/home/memberCenter/ModifyPwd.vue b/buyer/src/pages/home/memberCenter/ModifyPwd.vue
index 5a7fdbf6..83d6fa44 100644
--- a/buyer/src/pages/home/memberCenter/ModifyPwd.vue
+++ b/buyer/src/pages/home/memberCenter/ModifyPwd.vue
@@ -2,77 +2,78 @@
   <div class="wrapper">
     <card _Title="账户安全"/>
     <!--  手机号验证  -->
-    <Form ref="formData" :model="formData" label-position="left" :label-width="100" :rules="ruleInLines"
+    <el-form ref="formData" :model="formData" label-position="left" label-width="100px" :rules="ruleInLines"
           v-if="(status == 2 || status == 3) && !showPwd">
-      <FormItem label="手机号">
+      <el-form-item label="手机号">
         <div class="phone">1234567890</div>
-      </FormItem>
-      <FormItem label="图片验证码" prop="picture" style="width: 350px">
-        <i-input v-model="formData.picture" size="large" maxlength="4"></i-input>
-      </FormItem>
-      <FormItem label="短信验证码" prop="msg">
-        <i-input v-model="formData.msg" size="large" maxlength="6" style="width: 250px">
-          <span slot="append">输入验证码</span>
-        </i-input>
-      </FormItem>
-    </Form>
-    <div slot="footer" v-if="(status == 2 || status == 3) && !showPwd" style="text-align: center;width: 50%">
-      <Button type="primary" class="ml_10" @click="submitRegister">下一步</Button>
+      </el-form-item>
+      <el-form-item label="图片验证码" prop="picture" style="width: 350px">
+        <el-input v-model="formData.picture" size="large" maxlength="4"></el-input>
+      </el-form-item>
+      <el-form-item label="短信验证码" prop="msg">
+        <el-input v-model="formData.msg" size="large" maxlength="6" style="width: 250px">
+          <template #append><span>输入验证码</span></template>
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <div v-if="(status == 2 || status == 3) && !showPwd" style="text-align: center;width: 50%">
+      <el-button type="primary" class="ml_10" @click="submitRegister">下一步</el-button>
     </div>
 
     <!--  修改  -->
-    <Form ref="formRegister" :model="formRegister" :rules="ruleInline" :label-width="80" v-if="status == 1 && !showPwd">
-      <FormItem label="旧密码" prop="password">
-        <i-input type="password" v-model="formRegister.password" clearable size="large" placeholder="请输入旧密码"
+    <el-form ref="formRegister" :model="formRegister" :rules="ruleInline" label-width="80px" v-if="status == 1 && !showPwd">
+      <el-form-item label="旧密码" prop="password">
+        <el-input type="password" v-model="formRegister.password" clearable size="large" placeholder="请输入旧密码"
                  style="width: 300px"
                  maxlength="12">
-          <Icon type="md-lock" slot="prepend"></Icon>
-        </i-input>
-      </FormItem>
-      <FormItem label="新密码" prop="newPassword">
-        <i-input type="password" v-model="formRegister.newPassword" clearable size="large" placeholder="请输入新密码"
+          <template #prepend><el-icon><Lock /></el-icon></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="新密码" prop="newPassword">
+        <el-input type="password" v-model="formRegister.newPassword" clearable size="large" placeholder="请输入新密码"
                  style="width: 300px"
                  maxlength="12">
-          <Icon type="md-lock" slot="prepend"></Icon>
-        </i-input>
-      </FormItem>
-      <FormItem label="确认密码" prop="againPassword">
-        <i-input type="password" v-model="formRegister.againPassword" clearable size="large" placeholder="请输入确认密码"
+          <template #prepend><el-icon><Lock /></el-icon></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="againPassword">
+        <el-input type="password" v-model="formRegister.againPassword" clearable size="large" placeholder="请输入确认密码"
                  style="width: 300px"
                  maxlength="12">
-          <Icon type="md-lock" slot="prepend"></Icon>
-        </i-input>
-      </FormItem>
+          <template #prepend><el-icon><Lock /></el-icon></template>
+        </el-input>
+      </el-form-item>
 
-    </Form>
-    <div slot="footer" v-if="status == 1 && !showPwd" style="width: 50%;text-align: center">
-      <Button type="primary" class="ml_10" @click="handleRegist">修改</Button>
+    </el-form>
+    <div v-if="status == 1 && !showPwd" style="width: 50%;text-align: center">
+      <el-button type="primary" class="ml_10" @click="handleRegist">修改</el-button>
     </div>
     <!-- 设置&修改的第二种情况   -->
-    <Form ref="formDataUpdate" :model="formDataUpdate" label-position="left" :label-width="100" :rules="ruleIn"
+    <el-form ref="formDataUpdate" :model="formDataUpdate" label-position="left" label-width="100px" :rules="ruleIn"
           v-if="showPwd">
-      <FormItem label="新密码" prop="newPassword">
-        <i-input type="password" v-model="formDataUpdate.newPassword" clearable size="large" placeholder="请输入新密码"
+      <el-form-item label="新密码" prop="newPassword">
+        <el-input type="password" v-model="formDataUpdate.newPassword" clearable size="large" placeholder="请输入新密码"
                  style="width: 300px"
                  maxlength="12">
-          <Icon type="md-lock" slot="prepend"></Icon>
-        </i-input>
-      </FormItem>
-      <FormItem label="确认密码" prop="againPassword">
-        <i-input type="password" v-model="formDataUpdate.againPassword" clearable size="large" placeholder="请输入确认密码"
+          <template #prepend><el-icon><Lock /></el-icon></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="againPassword">
+        <el-input type="password" v-model="formDataUpdate.againPassword" clearable size="large" placeholder="请输入确认密码"
                  style="width: 300px"
                  maxlength="12">
-          <Icon type="md-lock" slot="prepend"></Icon>
-        </i-input>
-      </FormItem>
-    </Form>
-    <div slot="footer" v-if="showPwd" style="text-align: center;width: 50%">
-      <Button type="primary" class="ml_10" @click="setPassword">设置</Button>
+          <template #prepend><el-icon><Lock /></el-icon></template>
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <div v-if="showPwd" style="text-align: center;width: 50%">
+      <el-button type="primary" class="ml_10" @click="setPassword">设置</el-button>
     </div>
   </div>
 </template>
 
 <script>
+import { Lock } from '@element-plus/icons-vue';
 import {
   setPwd,
   editPwd
@@ -80,6 +81,7 @@ import {
 import {md5} from '@/plugins/md5.js'
 
 export default {
+  components: { Lock },
   name: 'modifyPwd',
   data () {
     return {
diff --git a/buyer/src/pages/home/memberCenter/Point.vue b/buyer/src/pages/home/memberCenter/Point.vue
index 523ff19e..154c725e 100644
--- a/buyer/src/pages/home/memberCenter/Point.vue
+++ b/buyer/src/pages/home/memberCenter/Point.vue
@@ -6,26 +6,27 @@
       <span>累计获得：<span>{{ pointObj.totalPoint || 0 }}</span></span>
     </div>
     <h3>积分日志</h3>
-    <Table :columns="logColumns" :data="logData.records">
-      <template slot-scope="{ row }" slot="point">
-        <div :style="{color:row.pointType === 'INCREASE' ? 'green' : 'red'}">
-          <span v-if="row.pointType === 'INCREASE'">+</span>{{ row.variablePoint }}
-        </div>
-      </template>
-    </Table>
+    <el-table :data="logData.records || []">
+      <el-table-column prop="content" label="日志内容" align="center" />
+      <el-table-column prop="createTime" label="时间" align="center" />
+      <el-table-column label="积分明细" align="center">
+        <template #default="{ row }">
+          <div :style="{ color: row.pointType === 'INCREASE' ? 'green' : 'red' }">
+            <span v-if="row.pointType === 'INCREASE'">+</span>{{ row.variablePoint }}
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
     <!-- 分页 -->
-    <Page
-      style="float:right;margin-top:10px"
-      :current="params.pageNumber"
+    <el-pagination       style="float:right;margin-top:10px"
+      :current-page="params.pageNumber"
       :total="logData.total"
       :page-size="params.pageSize"
-      @on-change="changePage"
-      @on-page-size-change="changePageSize"
-      :page-size-opts="[10, 20, 50]"
-      size="small"
-      show-total
-      show-elevator
-    ></Page>
+      @current-change="changePage"
+      @size-change="changePageSize"
+      :page-sizes="[10, 20, 50]"
+      small
+     layout="total, prev, pager, next, jumper"></el-pagination>
   </div>
 </template>
 <script>
@@ -42,23 +43,6 @@ export default {
         pageNumber: 1,
         pageSize: 10
       },
-      logColumns: [ // table展示数据
-        {
-          title: '日志内容',
-          key: 'content',
-          align: 'center'
-        },
-        {
-          title: '时间',
-          key: 'createTime',
-          align: 'center'
-        },
-        {
-          title: '积分明细',
-          slot: 'point',
-          align: 'center'
-        }
-      ]
     }
   },
   mounted () {
diff --git a/buyer/src/pages/home/memberCenter/Profile.vue b/buyer/src/pages/home/memberCenter/Profile.vue
index 0d258ebb..c30e1f90 100644
--- a/buyer/src/pages/home/memberCenter/Profile.vue
+++ b/buyer/src/pages/home/memberCenter/Profile.vue
@@ -1,38 +1,38 @@
 <template>
   <div class="wrapper">
     <card _Title="用户信息" />
-    <Form :model="formItem" :rules="rules" ref="form" :label-width="80">
-      <FormItem label="头像">
-        <Avatar v-if="formItem.face" :src="formItem.face" size="80"/>
-        <Avatar v-else icon="ios-person" size="80"/>
-        <Upload
+    <el-form :model="formItem" :rules="rules" ref="form" label-width="80px">
+      <el-form-item label="头像">
+        <el-avatar v-if="formItem.face" :src="formItem.face" :size="80" />
+        <el-avatar v-else :size="80"><el-icon><User /></el-icon></el-avatar>
+        <el-upload
           :show-upload-list="false"
           :on-success="handleSuccess"
           :format="['jpg','jpeg','png']"
           :action="action"
           :headers="accessToken"
           >
-          <Button class="mt_10">上传头像</Button>
-        </Upload>
-      </FormItem>
-      <FormItem label="昵称" prop="nickName">
-        <Input class="wrapper-user-name" style="width:187px" v-model="formItem.nickName" placeholder="" />
-      </FormItem>
+          <el-button class="mt_10">上传头像</el-button>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickName">
+        <el-input class="wrapper-user-name" style="width:187px" v-model="formItem.nickName" placeholder="" />
+      </el-form-item>
 
-      <FormItem label="生日">
-        <DatePicker type="date" placeholder="选择您的生日" v-model="formItem.birthday"></DatePicker>
-      </FormItem>
-      <FormItem label="性别">
-        <RadioGroup v-model="formItem.sex" type="button" button-style="solid">
-          <Radio :label="1">男</Radio>
-          <Radio :label="0">女</Radio>
-        </RadioGroup>
-      </FormItem>
-      <FormItem>
-        <Button type="primary" @click="save">确认修改</Button>
+      <el-form-item label="生日">
+        <el-date-picker type="date" placeholder="选择您的生日" v-model="formItem.birthday"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="性别">
+        <el-radio-group v-model="formItem.sex" type="button" button-style="solid">
+          <el-radio :label="1">男</el-radio>
+          <el-radio :label="0">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="save">确认修改</el-button>
 
-      </FormItem>
-    </Form>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
@@ -40,7 +40,9 @@
 import { editMemberInfo } from '@/api/account.js';
 import { commonUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage.js';
+import { User } from '@element-plus/icons-vue';
 export default {
+  components: { User },
   name: 'Profile',
   data () {
     return {
@@ -103,7 +105,7 @@ export default {
       })
     },
     handleSuccess (res, file) { // 上传成功
-      this.$set(this.formItem, 'face', res.result)
+      this.formItem['face'] = res.result
     },
   }
 
diff --git a/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue b/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
index 62abab45..4a691439 100644
--- a/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
+++ b/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
@@ -11,9 +11,9 @@
     <div class="delivery-rate">
       <div class="fontsize_16">物流服务评价：</div>
       <div class="color999">
-        <span>物流评价：<Rate v-model="form.deliveryScore" /></span>
-        <span>服务评价：<Rate v-model="form.serviceScore" /></span>
-        <span>描述评价：<Rate v-model="form.descriptionScore" /></span>
+        <span>物流评价：<el-rate v-model="form.deliveryScore" /></span>
+        <span>服务评价：<el-rate v-model="form.serviceScore" /></span>
+        <span>描述评价：<el-rate v-model="form.descriptionScore" /></span>
       </div>
     </div>
     <!-- 添加订单评价  左侧商品详情  右侧评价框 -->
@@ -22,28 +22,28 @@
         <div class="goods-con">
           <img :src="orderGoods.image" class="hover-pointer" alt="" width="100" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">
           <p class="hover-pointer color999" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">{{orderGoods.goodsName}}</p>
-          <p>{{orderGoods.goodsPrice | unitPrice('￥')}}</p>
+          <p>{{ $filters.unitPrice(orderGoods.goodsPrice, '￥') }}</p>
         </div>
 
         <div class="eval-con">
           <div>
             <span class="color999">商品评价：</span>
-            <RadioGroup style="margin-bottom:5px;color:#999" v-model="orderGoods.grade" type="button" button-style="solid">
-              <Radio label="GOOD">好评</Radio>
-              <Radio label="MODERATE">中评</Radio>
-              <Radio label="WORSE">差评</Radio>
-            </RadioGroup>
-            <Input type="textarea" maxlength="500" show-word-limit :rows="4" v-model="orderGoods.content" />
+            <el-radio-group style="margin-bottom:5px;color:#999" v-model="orderGoods.grade" type="button" button-style="solid">
+              <el-radio label="GOOD">好评</el-radio>
+              <el-radio label="MODERATE">中评</el-radio>
+              <el-radio label="WORSE">差评</el-radio>
+            </el-radio-group>
+            <el-input type="textarea" maxlength="500" show-word-limit :rows="4" v-model="orderGoods.content" />
           </div>
           <div style="display:flex;align-items:center;">
             <div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
               <img :src="img">
               <div class="demo-upload-list-cover">
-                  <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
-                  <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
+                  <el-icon @click="handleView(img)"><View /></el-icon>
+                  <el-icon @click="handleRemove(index)"><Delete /></el-icon>
               </div>
             </div>
-            <Upload
+            <el-upload
                 :show-upload-list="false"
                 :on-success="handleSuccess"
                 :before-upload="handleBeforeUpload"
@@ -52,25 +52,27 @@
                 :headers="accessToken"
                 style="display: inline-block;width:58px;">
                 <div class="hover-pointer icon-upload" style="">
-                  <Icon type="ios-camera" size="20"></Icon>
+                  <el-icon :size="20"><Camera /></el-icon>
                 </div>
-            </Upload>
+            </el-upload>
           </div>
         </div>
       </li>
     </ul>
-    <Button type="primary" class="mt_10" :loading="loading" @click="save">发表</Button>
-    <Modal title="View Image" v-model="visible">
+    <el-button type="primary" class="mt_10" :loading="loading" @click="save">发表</el-button>
+    <el-dialog title="View Image" v-model="visible">
         <img :src="previewImage" v-if="visible" style="width: 100%">
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 <script>
+import { Camera, Delete, View } from '@element-plus/icons-vue';
 import { orderDetail } from '@/api/order.js';
 import { addEvaluation } from '@/api/member.js';
 import { commonUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage';
 export default {
+  components: { Camera, Delete, View },
   data () {
     return {
       order: {}, // 订单详情
@@ -92,7 +94,7 @@ export default {
       orderDetail(this.$route.query.sn).then(res => {
         this.order = res.result
         this.orderGoods = res.result.orderItems[this.$route.query.index]
-        this.$set(this.orderGoods, 'grade', 'GOOD')
+        this.orderGoods['grade'] = 'GOOD'
         this.orderGoods.uploadList = []
       })
     },
diff --git a/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue b/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
index c1328647..87b01408 100644
--- a/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
+++ b/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
@@ -3,8 +3,7 @@
     <div class="title">
       <card _Title="评价详情" :_Size="16"></card>
       <p>
-        <span class="color999">创建人：</span
-        ><span>{{ orderGoods.createBy | secrecyMobile }}</span>
+        <span class="color999">创建人：</span><span>{{ $filters.secrecyMobile( orderGoods.createBy ) }}</span>
         <span class="color999 ml_20">{{ orderGoods.createTime }}</span>
       </p>
     </div>
@@ -12,10 +11,10 @@
     <div class="delivery-rate">
       <div class="fontsize_16">物流服务评价：</div>
       <div class="color999">
-        <span>物流评价：<Rate disabled :value="Number(orderGoods.deliveryScore)" /></span>
-        <span>服务评价：<Rate disabled :value="Number(orderGoods.serviceScore)" /></span>
+        <span>物流评价：<el-rate disabled :value="Number(orderGoods.deliveryScore)" /></span>
+        <span>服务评价：<el-rate disabled :value="Number(orderGoods.serviceScore)" /></span>
         <span
-          >服务评价：<Rate disabled :value="Number(orderGoods.descriptionScore)"
+          >服务评价：<el-rate disabled :value="Number(orderGoods.descriptionScore)"
         /></span>
       </div>
     </div>
@@ -41,17 +40,17 @@
         <div class="eval-con">
           <div>
             <span class="color999">商品评价：</span>
-            <RadioGroup
+            <el-radio-group
               style="margin-bottom: 5px; color: #999"
               v-model="orderGoods.grade"
               type="button"
               button-style="solid"
             >
-              <Radio label="GOOD" disabled>好评</Radio>
-              <Radio label="MODERATE" disabled>中评</Radio>
-              <Radio label="WORSE" disabled>差评</Radio>
-            </RadioGroup>
-            <Input
+              <el-radio label="GOOD" disabled>好评</el-radio>
+              <el-radio label="MODERATE" disabled>中评</el-radio>
+              <el-radio label="WORSE" disabled>差评</el-radio>
+            </el-radio-group>
+            <el-input
               type="textarea"
               maxlength="500"
               readonly
@@ -64,7 +63,7 @@
             <template v-if="orderGoods.images">
               <div class="demo-upload-list" v-for="(img, index) in orderGoods.images.split(',')" :key="index">
                 <img :src="img" />
-                <div class="demo-upload-list-cover"><Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon></div>
+                <div class="demo-upload-list-cover"><el-icon @click="handleView(img)"><View /></el-icon></div>
               </div>
             </template>
           </div>
@@ -75,7 +74,7 @@
               <template v-if="orderGoods.replyImage">
                 <div class="demo-upload-list" v-for="(img, index) in orderGoods.replyImage.split(',')" :key="index">
                   <img :src="img" />
-                  <div class="demo-upload-list-cover"><Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon></div>
+                  <div class="demo-upload-list-cover"><el-icon @click="handleView(img)"><View /></el-icon></div>
                 </div>
               </template>
             </div>
@@ -84,14 +83,16 @@
         </div>
       </li>
     </ul>
-    <Modal title="View Image" v-model="visible">
+    <el-dialog title="View Image" v-model="visible">
       <img :src="previewImage" v-if="visible" style="width: 100%" />
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 <script>
+import { View } from '@element-plus/icons-vue';
 import { evaluationDetail } from "@/api/member.js";
 export default {
+  components: { View },
   data() {
     return {
       order: {}, // 订单详情
diff --git a/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue b/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
index 0b82af7f..12d79ec4 100644
--- a/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
+++ b/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
@@ -2,21 +2,39 @@
   <div class="msg-list">
     <card _Title="我的消息" :_Tabs="status" :_Size="16"  @_Change="statusChange"/>
 
-    <Table v-if="params.status != 'ALREADY_REMOVE' " :columns="messageColumns" :data="messageData.records"></Table>
-    <Table v-if="params.status == 'ALREADY_REMOVE' " :columns="messageDelColumns" :data="messageData.records"></Table>
-    <!-- 分页 -->
-    <Page
+    <el-table v-if="params.status != 'ALREADY_REMOVE'" :data="messageData.records || []">
+      <el-table-column prop="title" label="消息标题" align="left" show-overflow-tooltip />
+      <el-table-column prop="content" label="消息内容" align="left" show-overflow-tooltip />
+      <el-table-column prop="createTime" label="发送时间" align="left" width="240" />
+      <el-table-column label="操作" align="center" fixed="right" width="150">
+        <template #default="{ row }">
+          <el-button
+            v-if="row.status === 'UN_READY'"
+            type="primary"
+            size="small"
+            style="margin-right: 5px"
+            @click="setRead(row.id)"
+          >已读</el-button>
+          <el-button type="danger" size="small" @click="removeMessage(row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-table v-else :data="messageData.records || []">
+      <el-table-column prop="title" label="消息标题" align="left" show-overflow-tooltip />
+      <el-table-column prop="content" label="消息内容" align="left" show-overflow-tooltip />
+      <el-table-column prop="createTime" label="发送时间" align="left" width="240" />
+    </el-table>
+    <el-pagination
       style="float:right;margin-top:10px"
-      :current="params.pageNumber"
+      :current-page="params.pageNumber"
       :total="messageData.total"
       :page-size="params.pageSize"
-      @on-change="changePage"
-      @on-page-size-change="changePageSize"
-      :page-size-opts="[10, 20, 50]"
-      size="small"
-      show-total
-      show-elevator
-    ></Page>
+      @current-change="changePage"
+      @size-change="changePageSize"
+      :page-sizes="[10, 20, 50]"
+      small
+      layout="total, prev, pager, next, jumper"
+    />
   </div>
 </template>
 <script>
@@ -24,146 +42,37 @@ import {memberMsgList, readMemberMsg, delMemberMsg} from '@/api/member.js'
 export default {
   data() {
     return {
-      messageData: {}, // 消息数据
+      messageData: {},
       status: ['未读', '已读', '回收站'],
-      params: { // 请求参数
+      params: {
         pageNumber: 1,
         pageSize: 10,
         status: 'UN_READY'
       },
-      messageDelColumns: [ // table展示数据
-        {
-          title: '消息标题',
-          key: 'title',
-          align: 'left',
-          tooltip: true,
-        },
-        {
-          title: '消息内容',
-          key: 'content',
-          align: 'left',
-          tooltip: true
-        },
-        {
-          title: '发送时间',
-          key: 'createTime',
-          align: 'left',
-          width: 240
-        },
-      ],
-      messageColumns: [ // table展示数据
-        {
-          title: '消息标题',
-          key: 'title',
-          align: 'left',
-          tooltip: true,
-        },
-        {
-          title: '消息内容',
-          key: 'content',
-          align: 'left',
-          tooltip: true
-        },
-        {
-          title: '发送时间',
-          key: 'createTime',
-          align: 'left',
-          width: 240
-        },
-        {
-          title: '操作',
-          key: 'action',
-          align: 'center',
-          fixed: 'right',
-          width: 150,
-          render: (h, params) => {
-            if (params.row.status === 'UN_READY') {
-              return h('div', [
-                h(
-                  'Button',
-                  {
-                    props: {
-                      type: 'info',
-                      size: 'small'
-                    },
-                    style: {
-                      marginRight: '5px'
-                    },
-                    on: {
-                      click: () => {
-                        this.setRead(params.row.id);
-                      }
-                    }
-                  },
-                  '已读'
-                ), h(
-                  'Button',
-                  {
-                    props: {
-                      size: 'small',
-                      type: 'error'
-                    },
-                    on: {
-                      click: () => {
-                        this.removeMessage(params.row.id);
-                      }
-                    }
-                  },
-                  '删除'
-                )
-              ]);
-            } else if (params.row.status === 'ALREADY_READY') {
-              return h('div', [
-                h(
-                  'Button',
-                  {
-                    props: {
-                      size: 'small',
-                      type: 'error'
-                    },
-                    on: {
-                      click: () => {
-                        this.removeMessage(params.row.id);
-                      }
-                    }
-                  },
-                  '删除'
-                )
-              ]);
-            } else {
-
-            }
-          }
-        }
-      ]
     }
   },
   methods: {
-    // 消息状态发生变化
     statusChange (index) {
       if (index === 0) { this.params.status = 'UN_READY' }
       if (index === 1) { this.params.status = 'ALREADY_READY' }
       if (index === 2) { this.params.status = 'ALREADY_REMOVE' }
       this.getList()
     },
-    // 修改页码
     changePage (v) {
       this.params.pageNumber = v;
       this.getList();
     },
-    // 修改页数
     changePageSize (v) {
       this.params.pageSize = v;
       this.getList();
     },
-    getList () { // 获取消息列表
+    getList () {
       memberMsgList(this.params).then(res => {
         if (res.success) {
           this.messageData = res.result;
         }
       })
     },
-    // 设置消息已读
     setRead (id) {
       readMemberMsg(id).then(res => {
         if (res.success) {
@@ -171,15 +80,12 @@ export default {
         }
       })
     },
-    // 消息放入回收站
     removeMessage (id) {
       this.$Modal.confirm({
         title: '确认删除',
-        // 记得确认修改此处
         content: '确认要删除此消息?',
         loading: true,
         onOk: () => {
-          // 删除
           delMemberMsg(id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
diff --git a/buyer/src/pages/home/orderCenter/AddAddress.vue b/buyer/src/pages/home/orderCenter/AddAddress.vue
index 74736db6..a735b9c2 100644
--- a/buyer/src/pages/home/orderCenter/AddAddress.vue
+++ b/buyer/src/pages/home/orderCenter/AddAddress.vue
@@ -2,33 +2,33 @@
   <div>
     <card _Title="收货地址" />
     <div class="add-box">
-      <Form :model="formData" ref="form" label-position="left" :label-width="100" :rules="ruleInline">
-        <FormItem label="收件人" prop="name">
-          <i-input v-model="formData.name" placeholder="请输入收件人姓名" style="width: 600px"></i-input>
-        </FormItem>
-        <FormItem label="收件地区" prop="address">
+      <el-form :model="formData" ref="form" label-position="left" label-width="100px" :rules="ruleInline">
+        <el-form-item label="收件人" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入收件人姓名" style="width: 600px"></el-input>
+        </el-form-item>
+        <el-form-item label="收件地区" prop="address">
           <span>{{ formData.address || '暂无地址' }}</span>
 
-          <Button type="default" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</Button>
-        </FormItem>
-        <FormItem label="详细地址" prop="detail">
-          <i-input v-model="formData.detail" placeholder="请输入详细地址" style="width: 600px"></i-input>
-        </FormItem>
-        <FormItem label="手机号码" prop="mobile">
-          <i-input v-model="formData.mobile" placeholder="请输入收件人手机号" style="width: 600px"></i-input>
-        </FormItem>
-        <FormItem label="地址别名">
-          <i-input v-model="formData.alias" length :maxlength="4" placeholder="请输入地址别名，例如公司" style="width: 600px">
-          </i-input>
-        </FormItem>
-        <FormItem label="默认地址">
-          <i-switch v-model="formData.isDefault" />
-        </FormItem>
-      </Form>
+          <el-button type="default" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</el-button>
+        </el-form-item>
+        <el-form-item label="详细地址" prop="detail">
+          <el-input v-model="formData.detail" placeholder="请输入详细地址" style="width: 600px"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号码" prop="mobile">
+          <el-input v-model="formData.mobile" placeholder="请输入收件人手机号" style="width: 600px"></el-input>
+        </el-form-item>
+        <el-form-item label="地址别名">
+          <el-input v-model="formData.alias" length :maxlength="4" placeholder="请输入地址别名，例如公司" style="width: 600px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="默认地址">
+          <el-switch v-model="formData.isDefault" />
+        </el-form-item>
+      </el-form>
     </div>
     <div class="mt_20">
-      <Button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</Button>
-      <Button @click="$router.back()">返回</Button>
+      <el-button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</el-button>
+      <el-button @click="$router.back()">返回</el-button>
     </div>
 
     <multipleMap  ref="map" @callback="getAddress" />
@@ -124,15 +124,15 @@ 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.formData,'address',paths)
-        this.$set(this.formData,'consigneeAddressIdPath',ids)
+        this.formData['address'] = paths
+        this.formData['consigneeAddressIdPath'] = ids
         const coord = val.data[val.data.length - 1].center.split(',')
         this.formData.lat = coord[1]
         this.formData.lon = coord[0]
       }else{
-        this.$set(this.formData, "address", val.data.addr);
-        this.$set(this.formData, "consigneeAddressIdPath", val.data.addrId);
-        this.$set(this.formData, "detail", val.data.address);
+        this.formData["address"] = val.data.addr;
+        this.formData["consigneeAddressIdPath"] = val.data.addrId;
+        this.formData["detail"] = val.data.address;
         this.formData.lat = val.data.position.lat;
         this.formData.lon = val.data.position.lng;
       }
diff --git a/buyer/src/pages/home/orderCenter/AfterSale.vue b/buyer/src/pages/home/orderCenter/AfterSale.vue
index 04f085a6..4281a7cc 100644
--- a/buyer/src/pages/home/orderCenter/AfterSale.vue
+++ b/buyer/src/pages/home/orderCenter/AfterSale.vue
@@ -5,12 +5,12 @@
     <!-- 搜索 筛选 -->
     <div class="mb_20 box">
       <div class="global_float_right">
-        <Input
+        <el-input
           class="width_300"
-          search
-          enter-button
+          
+          
           v-model="params.keywords"
-          @on-search="getList"
+          @keyup.enter="getList"
           placeholder="请输入订单号搜索"
         />
       </div>
@@ -18,18 +18,18 @@
     <!-- 列表 -->
     <empty v-if="orderList.length === 0"/>
     <div class="order-content" v-else>
-      <template v-for="(order, onderIndex) in orderList">
-        <div class="order-list" :key="onderIndex">
+      <template v-for="(order, onderIndex) in orderList" :key="order.sn || onderIndex">
+        <div class="order-list">
           <div class="order-header">
             <div>
               <div v-if="order.serviceStatus">{{ filterOrderStatus(order.serviceStatus) }}</div>
               <div>
                 售后单号：{{ order.sn }} &nbsp; &nbsp; &nbsp;{{ order.createTime }}
-                &nbsp; &nbsp;{{ order.memberName | secrecyMobile }}
+                &nbsp; &nbsp;{{ $filters.secrecyMobile( order.memberName ) }}
               </div>
             </div>
             <div>
-              <span>申请退款金额：<span class="global_color">{{ order.applyRefundPrice | unitPrice("￥") }}</span></span>
+              <span>申请退款金额：<span class="global_color">{{ $filters.unitPrice(order.applyRefundPrice, "￥") }}</span></span>
             </div>
           </div>
           <div class="order-body">
@@ -47,33 +47,31 @@
             </div>
             <div>
               <!-- 订单基础操作 -->
-              <Button @click="goDetail(order.sn)" type="info" size="small">售后详情</Button>
-              <Button @click="openModal(order)"
+              <el-button @click="goDetail(order.sn)" type="info" size="small">售后详情</el-button>
+              <el-button @click="openModal(order)"
                       v-if="order.serviceStatus == 'PASS' &&
                 order.serviceType != 'RETURN_MONEY'"
                       type="warning" size="small">提交物流
-              </Button>
-              <Button @click="cancel(order.sn)" type="error" v-if="order.afterSaleAllowOperationVO.cancel" size="small">
+              </el-button>
+              <el-button @click="cancel(order.sn)" type="danger" v-if="order.afterSaleAllowOperationVO.cancel" size="small">
                 取消售后
-              </Button>
+              </el-button>
             </div>
           </div>
         </div>
       </template>
-      <Spin size="large" fix v-if="spinShow"></Spin>
+      <el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
     </div>
     <!-- 分页 -->
     <div class="page-size">
-      <Page :total="total" @on-change="changePageNum"
-            @on-page-size-change="changePageSize"
-            :page-size="params.pageSize"
-            show-sizer>
-      </Page>
+      <el-pagination :total="total" @current-change="changePageNum"
+            @size-change="changePageSize"
+            :page-size="params.pageSize" layout="sizes, prev, pager, next"></el-pagination>
     </div>
-    <Modal v-model="logisticsShow" width="530">
-      <p slot="header">
+    <el-dialog v-model="logisticsShow" width="530">
+      <template #header><p>
         <span>提交物流信息</span>
-      </p>
+      </p></template>
       <div>
         <div class="goods-list modal-goods">
           <img @click="goodsDetail(singleOrder.skuId, singleOrder.goodsId)" class="hover-color"
@@ -84,31 +82,30 @@
             </div>
             <div class="mt_10">
               <span class="global_color"
-              >{{ singleOrder.flowPrice | unitPrice("￥") }} </span
-              >x {{ singleOrder.num }}
+              >{{ $filters.unitPrice(singleOrder.flowPrice, "￥") }} </span>x {{ singleOrder.num }}
             </div>
           </div>
         </div>
-        <Form ref="form" :model="form" label-position="left" :label-width="100" :rules="rules">
-          <FormItem label="物流公司" prop="logisticsId">
-            <Select v-model="form.logisticsId" placeholder="请选择物流公司">
-              <Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
-            </Select>
-          </FormItem>
-          <FormItem label="物流单号" prop="logisticsNo">
-            <Input v-model="form.logisticsNo" placeholder="请填写物流单号"></Input>
-          </FormItem>
-          <FormItem label="发货时间" prop="mDeliverTime">
-            <DatePicker type="date" style="width:100%" v-model="form.mDeliverTime" @on-change="changeTime"
-                        format="yyyy-MM-dd" placeholder="选择发货时间"></DatePicker>
-          </FormItem>
-        </Form>
+        <el-form ref="form" :model="form" label-position="left" label-width="100px" :rules="rules">
+          <el-form-item label="物流公司" prop="logisticsId">
+            <el-select v-model="form.logisticsId" placeholder="请选择物流公司">
+              <el-option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="物流单号" prop="logisticsNo">
+            <el-input v-model="form.logisticsNo" placeholder="请填写物流单号"></el-input>
+          </el-form-item>
+          <el-form-item label="发货时间" prop="mDeliverTime">
+            <el-date-picker type="date" style="width:100%" v-model="form.mDeliverTime" @change="changeTime"
+                        format="yyyy-MM-dd" placeholder="选择发货时间"></el-date-picker>
+          </el-form-item>
+        </el-form>
       </div>
-      <div slot="footer" style="text-align: right">
-        <Button @click="logisticsShow = false">关闭</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitDelivery">提交</Button>
-      </div>
-    </Modal>
+      <template #footer><div style="text-align: right">
+        <el-button @click="logisticsShow = false">关闭</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitDelivery">提交</el-button>
+      </div></template>
+    </el-dialog>
   </div>
 </template>
 
@@ -324,7 +321,7 @@ export default {
         }
       }
 
-      .ivu-icon {
+      .el-icon {
         color: #ff8f23;
         cursor: pointer;
 
@@ -337,7 +334,7 @@ export default {
     > div:nth-child(3) {
       width: 100px;
 
-      .ivu-btn {
+      .el-button {
         margin-bottom: 10px;
       }
     }
diff --git a/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue b/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
index ffd9359a..b3f48292 100644
--- a/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
+++ b/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
@@ -2,12 +2,12 @@
   <div class="order-detail">
     <card _Title="售后详情" :_Size="16"></card>
     <!-- 操作按钮 -->
-    <Card class="mb_10" v-if="(afterSale.serviceStatus == 'PASS' &&
+    <el-card class="mb_10" shadow="never" v-if="(afterSale.serviceStatus == 'PASS' &&
           afterSale.serviceType != 'RETURN_MONEY') || (afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel)">
-      <Button type="success" @click="openModal" v-if="afterSale.serviceStatus == 'PASS' &&
-          afterSale.serviceType != 'RETURN_MONEY'" size="small">提交物流</Button>&nbsp;
-      <Button type="error" @click="cancel(afterSale.sn)" v-if="afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel" size="small">取消售后</Button>
-    </Card>
+      <el-button type="success" @click="openModal" v-if="afterSale.serviceStatus == 'PASS' &&
+          afterSale.serviceType != 'RETURN_MONEY'" size="small">提交物流</el-button>&nbsp;
+      <el-button type="danger" @click="cancel(afterSale.sn)" v-if="afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel" size="small">取消售后</el-button>
+    </el-card>
     <div class="order-card">
       <h3>{{afterSale.serviceName}}</h3>
       <p class="global_color fontsize_18">{{ afterSale.orderStatusValue }}</p>
@@ -25,14 +25,13 @@
     </div>
     <div class="order-card">
       <h3>售后进程</h3>
-      <Steps class="progress" :current="logList.length" direction="vertical">
-        <Step
-          :content="'操作人：'+ log.operatorName + '   ' + log.createTime"
+      <el-steps class="progress" :current="logList.length" direction="vertical">
+        <el-step           :content="'操作人：'+ log.operatorName + '   ' + log.createTime"
           :title="log.message"
           v-for="(log, index) in logList"
           :key="index"
-        ></Step>
-      </Steps>
+        ></el-step>
+      </el-steps>
     </div>
     <div class="order-card">
       <h3 class="mb_10">服务单信息</h3>
@@ -41,10 +40,10 @@
           <td>退款方式</td><td>{{afterSale.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'}}</td>
         </tr>
         <tr>
-          <td>申请退款金额</td><td>{{afterSale.applyRefundPrice | unitPrice('￥')}}</td>
+          <td>申请退款金额</td><td>{{ $filters.unitPrice(afterSale.applyRefundPrice, '￥') }}</td>
         </tr>
         <tr v-if="afterSale.actualRefundPrice">
-          <td>实际退款金额</td><td>{{afterSale.actualRefundPrice | unitPrice('￥')}}</td>
+          <td>实际退款金额</td><td>{{ $filters.unitPrice(afterSale.actualRefundPrice, '￥') }}</td>
         </tr>
         <template v-if="afterSale.refundWay === 'OFFLINE'">
           <tr>
@@ -74,30 +73,30 @@
         <img :src="img" width="200" height="200" @click="perviewImg(img)" class="hover-pointer" alt="">
       </div>
     </div>
-    <Modal v-model="logisticsShow" width="530">
-      <p slot="header">
+    <el-dialog v-model="logisticsShow" width="530">
+      <template #header><p>
         <span>提交物流信息</span>
-      </p>
+      </p></template>
       <div>
-        <Form ref="form" :model="form" label-position="left" :label-width="100" :rules="rules">
-          <FormItem label="物流公司" prop="logisticsId">
-            <Select v-model="form.logisticsId" placeholder="请选择物流公司">
-              <Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
-            </Select>
-          </FormItem>
-          <FormItem label="物流单号" prop="logisticsNo">
-            <Input v-model="form.logisticsNo" placeholder="请填写物流单号"></Input>
-          </FormItem>
-          <FormItem label="发货时间" prop="mDeliverTime">
-            <DatePicker type="date" style="width:100%" v-model="form.mDeliverTime" @on-change="changeTime" format="yyyy-MM-dd" placeholder="选择发货时间"></DatePicker>
-          </FormItem>
-        </Form>
+        <el-form ref="form" :model="form" label-position="left" label-width="100px" :rules="rules">
+          <el-form-item label="物流公司" prop="logisticsId">
+            <el-select v-model="form.logisticsId" placeholder="请选择物流公司">
+              <el-option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="物流单号" prop="logisticsNo">
+            <el-input v-model="form.logisticsNo" placeholder="请填写物流单号"></el-input>
+          </el-form-item>
+          <el-form-item label="发货时间" prop="mDeliverTime">
+            <el-date-picker type="date" style="width:100%" v-model="form.mDeliverTime" @change="changeTime" format="yyyy-MM-dd" placeholder="选择发货时间"></el-date-picker>
+          </el-form-item>
+        </el-form>
       </div>
-      <div slot="footer" style="text-align: right">
-        <Button @click="logisticsShow = false">关闭</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitDelivery">提交</Button>
-      </div>
-    </Modal>
+      <template #footer><div style="text-align: right">
+        <el-button @click="logisticsShow = false">关闭</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitDelivery">提交</el-button>
+      </div></template>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -139,7 +138,7 @@ export default {
           if (pattern3.test(this.afterSale.reason)) {
             this.getReason(this.afterSale.serviceType)
           } else {
-            this.$set(this.afterSale, 'reasonName', this.afterSale.reason)
+            this.afterSale['reasonName'] = this.afterSale.reason
           }
         }
       })
@@ -150,7 +149,7 @@ export default {
           this.reasonList = res.result
           this.reasonList.forEach(e => {
             if (e.id === this.afterSale.reason) {
-              this.$set(this.afterSale, 'reasonName', e.reason)
+              this.afterSale['reasonName'] = e.reason
             }
           })
         }
diff --git a/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue b/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
index 7dc84ccb..27c8e079 100644
--- a/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
+++ b/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
@@ -1,49 +1,51 @@
 <template>
   <div class="apply-after-sale">
     <card _Title="申请售后"></card>
-    <Table
-      border
-      :columns="columns"
-      :data="goodsData"
-    >
-    <template slot-scope="{ row }" slot="goodsName">
-      <div style="padding:5px;display:flex;">
-        <img :src="row.image" style="vertical-align: top;" width="60" height="60" alt=""> <span class="ml_10">{{row.goodsName}}</span>
-      </div>
-    </template>
-    <template slot-scope="{ row }" slot="goodsPrice">
-      <div>{{row.applyRefundPrice | unitPrice('￥')}}</div>
-    </template>
-    </Table>
+    <el-table :data="goodsData" border>
+      <el-table-column label="商品名称">
+        <template #default="{ row }">
+          <div style="padding:5px;display:flex;">
+            <img :src="row.image" style="vertical-align: top;" width="60" height="60" alt="">
+            <span class="ml_10">{{ row.goodsName }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="价格">
+        <template #default="{ row }">
+          <div>{{ $filters.unitPrice(row.applyRefundPrice, '￥') }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="num" label="购买数量" />
+    </el-table>
     <div>
-      <Form :model="form" ref="form" class="mt_10" :rules="rules" :label-width="80">
-        <FormItem label="售后类别">
-          <RadioGroup v-model="form.serviceType" @on-change="changeReason" type="button" button-style="solid">
-            <Radio v-if="info.returnGoods" label="RETURN_GOODS">退货</Radio>
-            <Radio v-if="info.returnMoney" label="RETURN_MONEY">退款</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="提交数量" prop="num">
-          <Input type="number" v-model="form.num" style="width:260px" />
-        </FormItem>
-        <FormItem label="提交原因" prop="reason">
-          <Select v-model="form.reason" style="width:260px">
-            <Option v-for="item in reasonList" :value="item.id" :key="item.id">{{ item.reason }}</Option>
-          </Select>
-        </FormItem>
-        <FormItem label="问题描述" prop="problemDesc">
-          <Input type="textarea" :rows="4" maxlength="500" style="width:260px" show-word-limit v-model="form.problemDesc" />
-        </FormItem>
-        <FormItem label="图片信息">
+      <el-form :model="form" ref="form" class="mt_10" :rules="rules" label-width="80px">
+        <el-form-item label="售后类别">
+          <el-radio-group v-model="form.serviceType" @change="changeReason" type="button" button-style="solid">
+            <el-radio v-if="info.returnGoods" label="RETURN_GOODS">退货</el-radio>
+            <el-radio v-if="info.returnMoney" label="RETURN_MONEY">退款</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="提交数量" prop="num">
+          <el-input type="number" v-model="form.num" style="width:260px" />
+        </el-form-item>
+        <el-form-item label="提交原因" prop="reason">
+          <el-select v-model="form.reason" style="width:260px">
+            <el-option v-for="item in reasonList" :value="item.id" :key="item.id">{{ item.reason }}</el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="问题描述" prop="problemDesc">
+          <el-input type="textarea" :rows="4" maxlength="500" style="width:260px" show-word-limit v-model="form.problemDesc" />
+        </el-form-item>
+        <el-form-item label="图片信息">
           <div style="display:flex;align-items:center;">
             <div class="demo-upload-list" v-for="(img, index) in uploadList" :key="index">
               <img :src="img">
               <div class="demo-upload-list-cover">
-                  <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
-                  <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
+                  <el-icon @click="handleView(img)"><View /></el-icon>
+                  <el-icon @click="handleRemove(index)"><Delete /></el-icon>
               </div>
             </div>
-            <Upload
+            <el-upload
                 :show-upload-list="false"
                 :on-success="handleSuccess"
                 :before-upload="handleBeforeUpload"
@@ -52,44 +54,46 @@
                 :headers="accessToken"
                 style="display: inline-block;width:58px;">
                 <div class="hover-pointer icon-upload" style="">
-                  <Icon type="md-add" size="20"></Icon>
+                  <el-icon :size="20"><Plus /></el-icon>
                 </div>
-            </Upload>
+            </el-upload>
           </div>
-        </FormItem>
-        <FormItem label="退款方式">
+        </el-form-item>
+        <el-form-item label="退款方式">
           <div>{{info.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'}}</div>
-        </FormItem>
+        </el-form-item>
         <template v-if="info.accountType === 'BANK_TRANSFER' && info.applyRefundPrice != 0">
-          <FormItem label="开户行" prop="bankDepositName">
-            <Input v-model="form.bankDepositName" type="text" placeholder="请输入银行开户行" style="width:260px" />
-          </FormItem>
-          <FormItem label="开户名" prop="bankAccountName">
-            <Input v-model="form.bankAccountName" type="text" placeholder="请输入银行开户名" style="width:260px" />
-          </FormItem>
-          <FormItem label="银行账号" prop="bankAccountNumber">
-            <Input v-model="form.bankAccountNumber" type="text" placeholder="请输入银行账号" style="width:260px" />
-          </FormItem>
+          <el-form-item label="开户行" prop="bankDepositName">
+            <el-input v-model="form.bankDepositName" type="text" placeholder="请输入银行开户行" style="width:260px" />
+          </el-form-item>
+          <el-form-item label="开户名" prop="bankAccountName">
+            <el-input v-model="form.bankAccountName" type="text" placeholder="请输入银行开户名" style="width:260px" />
+          </el-form-item>
+          <el-form-item label="银行账号" prop="bankAccountNumber">
+            <el-input v-model="form.bankAccountNumber" type="text" placeholder="请输入银行账号" style="width:260px" />
+          </el-form-item>
         </template>
-        <FormItem label="返回方式" v-if="form.serviceType === 'RETURN_GOODS'">
+        <el-form-item label="返回方式" v-if="form.serviceType === 'RETURN_GOODS'">
           <div>快递至第三方卖家</div>
-        </FormItem>
-        <FormItem>
-          <Button type="primary" @click="apply">提交申请</Button>
-        </FormItem>
-      </Form>
-      <Modal title="View Image" v-model="visible">
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="apply">提交申请</el-button>
+        </el-form-item>
+      </el-form>
+      <el-dialog title="View Image" v-model="visible">
         <img :src="previewImage" v-if="visible" style="width: 100%">
-      </Modal>
+      </el-dialog>
     </div>
   </div>
 </template>
 <script>
+import { Delete, Plus, View } from '@element-plus/icons-vue';
 import { afterSaleReason, afterSaleInfo, applyAfterSale } from '@/api/member.js'
 import { commonUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage';
 import * as RegExp from '@/plugins/RegExp'
 export default {
+  components: { Delete, Plus, View },
   data () {
     const checkNum = (rule, value, callback) => {
       if (value === '') {
@@ -104,11 +108,6 @@ export default {
       }
     };
     return {
-      columns: [ // 表格表头
-        {title: '商品名称', slot: 'goodsName'},
-        {title: '价格', slot: 'goodsPrice'},
-        {title: '购买数量', key: 'num'}
-      ],
       goodsData: [], // 商品数据
       reasonList: [], // 售后原因列表
       info: {}, // 售后信息
diff --git a/buyer/src/pages/home/orderCenter/Complain.vue b/buyer/src/pages/home/orderCenter/Complain.vue
index 4bc4ccb4..613ef663 100644
--- a/buyer/src/pages/home/orderCenter/Complain.vue
+++ b/buyer/src/pages/home/orderCenter/Complain.vue
@@ -12,26 +12,26 @@
       <div class="goods-con">
         <img :src="orderGoods.image" class="hover-pointer" alt="" width="100" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">
         <p class="hover-pointer color999" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">{{orderGoods.goodsName}}</p>
-        <p>{{orderGoods.goodsPrice | unitPrice('￥')}}</p>
+        <p>{{ $filters.unitPrice(orderGoods.goodsPrice, '￥') }}</p>
       </div>
 
       <div class="eval-con">
         <div>
           <span class="color999">投诉主题：</span>
-          <Select v-model="form.complainTopic" style="width:260px;margin-bottom:10px">
-            <Option v-for="item in reasonList" :value="item.reason" :key="item.id">{{ item.reason }}</Option>
-          </Select>
-          <Input type="textarea" maxlength="500" show-word-limit :rows="4" placeholder="请输入投诉内容" v-model="form.content" />
+          <el-select v-model="form.complainTopic" style="width:260px;margin-bottom:10px">
+            <el-option v-for="item in reasonList" :value="item.reason" :key="item.id">{{ item.reason }}</el-option>
+          </el-select>
+          <el-input type="textarea" maxlength="500" show-word-limit :rows="4" placeholder="请输入投诉内容" v-model="form.content" />
         </div>
         <div style="display:flex;align-items:center;">
           <div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
             <img :src="img">
             <div class="demo-upload-list-cover">
-                <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
-                <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
+                <el-icon @click="handleView(img)"><View /></el-icon>
+                <el-icon @click="handleRemove(index)"><Delete /></el-icon>
             </div>
           </div>
-          <Upload
+          <el-upload
               :show-upload-list="false"
               :on-success="handleSuccess"
               :before-upload="handleBeforeUpload"
@@ -40,25 +40,27 @@
               :headers="accessToken"
               style="display: inline-block;width:58px;">
               <div class="hover-pointer icon-upload" style="">
-                <Icon type="ios-camera" size="20"></Icon>
+                <el-icon :size="20"><Camera /></el-icon>
               </div>
-          </Upload>
+          </el-upload>
           <div class="describe">上传投诉凭证，最多5张</div>
         </div>
       </div>
     </div>
-    <Button type="primary" class="mt_10" :loading="loading" @click="save">提交</Button>
-    <Modal title="View Image" v-model="visible">
+    <el-button type="primary" class="mt_10" :loading="loading" @click="save">提交</el-button>
+    <el-dialog title="View Image" v-model="visible">
         <img :src="previewImage" v-if="visible" style="width: 100%">
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 <script>
+import { Camera, Delete, View } from '@element-plus/icons-vue';
 import { orderDetail } from '@/api/order.js';
 import { afterSaleReason, handleComplain } from '@/api/member.js';
 import { commonUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage';
 export default {
+  components: { Camera, Delete, View },
   data () {
     return {
       order: {}, // 订单详情
@@ -85,7 +87,7 @@ export default {
       afterSaleReason('COMPLAIN').then(res => {
         if (res.success) {
           this.reasonList = res.result
-          this.$set(this.form, 'complainTopic', res.result[0].reason)
+          this.form['complainTopic'] = res.result[0].reason
           this.$forceUpdate()
         }
       })
diff --git a/buyer/src/pages/home/orderCenter/MyAddress.vue b/buyer/src/pages/home/orderCenter/MyAddress.vue
index 6361b118..485efc2b 100644
--- a/buyer/src/pages/home/orderCenter/MyAddress.vue
+++ b/buyer/src/pages/home/orderCenter/MyAddress.vue
@@ -5,12 +5,12 @@
       <div class="address-header">
         <span>
           {{ item.name }}
-          <Tag class="ml_10" v-if="item.isDefault" color="red">默认地址</Tag>
-          <Tag class="ml_10" v-if="item.alias" color="warning">{{item.alias}}</Tag>
+          <el-tag class="ml_10" v-if="item.isDefault" color="red">默认地址</el-tag>
+          <el-tag class="ml_10" v-if="item.alias" color="warning">{{item.alias}}</el-tag>
         </span>
         <div class="address-action">
-          <span @click="edit(item.id)"><Icon type="edit"></Icon>修改</span>
-          <span @click="del(item.id)"><Icon type="trash-a"></Icon>删除</span>
+          <span @click="edit(item.id)"><el-icon><Edit /></el-icon>修改</span>
+          <span @click="del(item.id)"><el-icon><Delete /></el-icon>删除</span>
         </div>
       </div>
       <div class="address-content">
@@ -18,8 +18,7 @@
           <span class="address-content-title"> 收 货 人 :</span> {{ item.name }}
         </p>
         <p>
-          <span class="address-content-title">收货地区:</span
-          >{{ item.consigneeAddressPath | unitAddress }}
+          <span class="address-content-title">收货地区:</span>{{ $filters.unitAddress(item.consigneeAddressPath) }}
         </p>
         <p>
           <span class="address-content-title">详细地址:</span> {{ item.detail }}
@@ -33,10 +32,12 @@
 </template>
 
 <script>
+import { Delete, Edit } from '@element-plus/icons-vue';
 import card from '@/components/card';
 import { memberAddress, delMemberAddress } from '@/api/address.js';
 
 export default {
+  components: { Delete, Edit },
   name: 'MyAddress',
 
   data () {
diff --git a/buyer/src/pages/home/orderCenter/MyOrder.vue b/buyer/src/pages/home/orderCenter/MyOrder.vue
index 633432e4..c58fa31f 100644
--- a/buyer/src/pages/home/orderCenter/MyOrder.vue
+++ b/buyer/src/pages/home/orderCenter/MyOrder.vue
@@ -6,12 +6,12 @@
     <!-- 搜索 筛选 -->
     <div class="mb_24 box" v-if="!homePage">
       <div class="global_float_right" >
-        <Input
+        <el-input
           class="width_300"
-          search
-          enter-button
+          
+          
           v-model="params.keywords"
-          @on-search="getList"
+          @keyup.enter="getList"
           placeholder="请输入订单号搜索"
         />
       </div>
@@ -32,8 +32,8 @@
             </div>
           </div>
           <div>
-            <Button v-if="order.orderStatus === 'COMPLETED'" @click="delOrder(order.sn)" class="del-btn mr_10 fontsize_16" style="margin-top:-5px;" type="text" icon="ios-trash-outline" size="small"></Button>
-            <span>{{ order.flowPrice | unitPrice("￥") }}</span>
+            <el-button v-if="order.orderStatus === 'COMPLETED'" @click="delOrder(order.sn)" class="del-btn mr_10 fontsize_16" style="margin-top:-5px;" type="text" icon="ios-trash-outline" size="small"></el-button>
+            <span>{{ $filters.unitPrice(order.flowPrice, "￥") }}</span>
           </div>
         </div>
         <div class="order-body">
@@ -51,11 +51,11 @@
               <div>
                 <div class="hover-color" @click="goodsDetail(goods.skuId, goods.goodsId)">{{ goods.name }}</div>
                 <div class="mt_10">
-                  <span class="global_color">{{ goods.goodsPrice | unitPrice("￥") }} </span>x {{ goods.num }}
+                  <span class="global_color">{{ $filters.unitPrice(goods.goodsPrice, "￥") }} </span>x {{ goods.num }}
                   <span style="margin-left: 10px;color: #ff9900;">{{refundPriceList(goods.isRefund)}}</span>
                 </div>
-                <Button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" type="success" class="fontsize_12" style="position:relative;top:-22px;left:190px;margin-right:10px">评价</Button>
-                <Button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" type="warning" class="fontsize_12" size="small" style="position:relative;top:-22px;left:190px">投诉</Button>
+                <el-button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" type="success" class="fontsize_12" style="position:relative;top:-22px;left:190px;margin-right:10px">评价</el-button>
+                <el-button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" type="warning" class="fontsize_12" size="small" style="position:relative;top:-22px;left:190px">投诉</el-button>
               </div>
             </div>
           </div>
@@ -64,47 +64,41 @@
           </div>
           <div>
             <!-- 订单基础操作 -->
-            <Button @click="orderDetail(order.sn)" type="info" size="small">订单详情</Button>
-            <Button @click="handleCancelOrder(order.sn)" type="error" v-if="order.allowOperationVO.cancel" size="small">取消订单</Button>
-            <Button @click="goPay(order.sn)" size="small" type="success" v-if="order.allowOperationVO.pay">去支付</Button>
-            <Button @click="received(order.sn)" size="small" type="warning" v-if="order.allowOperationVO.rog">确认收货</Button>
+            <el-button @click="orderDetail(order.sn)" type="info" size="small">订单详情</el-button>
+            <el-button @click="handleCancelOrder(order.sn)" type="danger" v-if="order.allowOperationVO.cancel" size="small">取消订单</el-button>
+            <el-button @click="goPay(order.sn)" size="small" type="success" v-if="order.allowOperationVO.pay">去支付</el-button>
+            <el-button @click="received(order.sn)" size="small" type="warning" v-if="order.allowOperationVO.rog">确认收货</el-button>
             <!-- 售后 -->
-            <Button v-if="order.groupAfterSaleStatus && (order.groupAfterSaleStatus.includes('NOT_APPLIED')|| order.groupAfterSaleStatus.includes('PART_AFTER_SALE'))"
-                    @click="applyAfterSale(order.orderItems)" size="small">申请售后</Button>
+            <el-button v-if="order.groupAfterSaleStatus && (order.groupAfterSaleStatus.includes('NOT_APPLIED')|| order.groupAfterSaleStatus.includes('PART_AFTER_SALE'))"
+                    @click="applyAfterSale(order.orderItems)" size="small">申请售后</el-button>
           </div>
         </div>
       </div>
-      <Spin size="large" fix v-if="spinShow"></Spin>
+      <el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
     </div>
     <!-- 分页 -->
     <div class="page-size" v-if="!homePage">
-      <Page :total="total" @on-change="changePageNum"
-        @on-page-size-change="changePageSize"
-        :page-size="params.pageSize"
-        show-total
-        show-sizer>
-      </Page>
+      <el-pagination :total="total" @current-change="changePageNum"
+        @size-change="changePageSize"
+        :page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
     </div>
     <!-- 选择售后商品 -->
-    <Modal v-model="afterSaleModal" title="请选择申请售后的商品">
+    <el-dialog v-model="afterSaleModal" title="请选择申请售后的商品">
       <div>
-        <Table
-          border
-          :columns="afterSaleColumns"
-          :data="afterSaleArr"
-          @on-row-click="afterSaleSelect"
-        >
-        </Table>
+        <el-table :data="afterSaleArr" border @row-click="afterSaleSelect">
+          <el-table-column prop="name" label="商品名称" />
+          <el-table-column prop="goodsPrice" label="价格" />
+        </el-table>
       </div>
-      <div slot="footer"></div>
-    </Modal>
-    <Modal v-model="cancelAvail" title="请选择取消订单原因" @on-ok="sureCancel" @on-cancel="cancelAvail = false">
-      <RadioGroup v-model="cancelParams.reason" vertical type="button" button-style="solid">
-        <Radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
+      <template #footer><div></div></template>
+    </el-dialog>
+    <el-dialog v-model="cancelAvail" title="请选择取消订单原因" @ok="sureCancel" @cancel="cancelAvail = false">
+      <el-radio-group v-model="cancelParams.reason" vertical type="button" button-style="solid">
+        <el-radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
            {{item.reason}}
-        </Radio>
-      </RadioGroup>
-    </Modal>
+        </el-radio>
+      </el-radio-group>
+    </el-dialog>
   </div>
 </template>
 
@@ -140,10 +134,6 @@ export default {
       total: 0, // 数据总数
       spinShow: false, // 加载状态
       afterSaleModal: false, // 选择售后商品模态框
-      afterSaleColumns: [ // 售后商品表头
-        {title: '商品名称', key: 'name'},
-        {title: '价格', key: 'goodsPrice'}
-      ],
       afterSaleArr: [], // 售后商品列表
       cancelAvail: false, // 取消订单modal控制
       cancelReason: [] // 取消订单原因
@@ -374,7 +364,7 @@ export default {
           color: $theme_color;
         }
       }
-      .ivu-icon {
+      .el-icon {
         color: #ff8f23;
         cursor: pointer;
         &:hover {
@@ -385,7 +375,7 @@ export default {
 
     > div:nth-child(3) {
       width: 100px;
-      .ivu-btn {
+      .el-button {
         margin-bottom: 10px;
       }
     }
diff --git a/buyer/src/pages/home/orderCenter/OrderDetail.vue b/buyer/src/pages/home/orderCenter/OrderDetail.vue
index 65eb36de..8dcdb022 100644
--- a/buyer/src/pages/home/orderCenter/OrderDetail.vue
+++ b/buyer/src/pages/home/orderCenter/OrderDetail.vue
@@ -1,37 +1,35 @@
 <template>
   <div class="order-detail" v-if="order.order">
     <card _Title="订单详情" :_Size="16"></card>
-    <Card
+    <el-card
       class="mb_10"
+      shadow="never"
       v-if="
         order.allowOperationVO.pay ||
         order.allowOperationVO.rog ||
         order.allowOperationVO.cancel
       "
     >
-      <Button
+      <el-button
         type="success"
         @click="goPay(order.order.sn)"
         size="small"
         v-if="order.allowOperationVO.pay"
-        >去支付</Button
-      >
-      <Button
+        >去支付</el-button>
+      <el-button
         type="info"
         @click="received(order.order.sn)"
         size="small"
         v-if="order.allowOperationVO.rog"
-        >确认收货</Button
-      >
-      <Button
-        type="error"
+        >确认收货</el-button>
+      <el-button
+        type="danger"
         @click="handleCancelOrder(order.order.sn)"
         v-if="order.allowOperationVO.cancel"
         size="small"
-        >取消订单</Button
-      >
-      <Button v-if="order.allowOperationVO.showLogistics || orderPackage.length > 0 || logistics" type="info" @click="logisticsList()" size="small">查看物流</Button>
-    </Card>
+        >取消订单</el-button>
+      <el-button v-if="order.allowOperationVO.showLogistics || orderPackage.length > 0 || logistics" type="info" @click="logisticsList()" size="small">查看物流</el-button>
+    </el-card>
     <p class="verificationCode" v-if="order.order.verificationCode">
       核验码：<span>{{ order.order.verificationCode }}</span>
     </p>
@@ -41,25 +39,24 @@
       <div style="color: #999" class="operation-time">
         操作时间：{{ order.order.updateTime || order.order.createTime }}
       </div>
-      <Steps
+      <el-steps
         class="progress"
         :current="progressList.length"
         direction="vertical"
       >
-        <Step
-          :title="progress.message"
+        <el-step           :title="progress.message"
           :content="progress.createTime"
           v-for="(progress, index) in progressList"
           :key="index"
-        ></Step>
-      </Steps>
+        ></el-step>
+      </el-steps>
     </div>
     <div class="order-card" v-if="order.order.deliveryMethod === 'LOGISTICS' && order.order.orderType !== 'VIRTUAL'">
       <h3>收货人信息</h3>
       <p>收货人：{{ order.order.consigneeName }}</p>
-      <p>手机号码：{{ order.order.consigneeMobile | secrecyMobile }}</p>
+      <p>手机号码：{{ $filters.secrecyMobile( order.order.consigneeMobile ) }}</p>
       <p>
-        收货地址：{{ order.order.consigneeAddressPath | unitAddress }}
+        收货地址：{{ $filters.unitAddress(order.order.consigneeAddressPath) }}
         {{ order.order.consigneeDetail }}
       </p>
     </div>
@@ -128,9 +125,9 @@
           收票人邮箱：{{ order.receipt.receiptEmail }}
         </p>
         <div v-if="Number(order.receipt.receiptStatus) === 1" class="receipt-action">
-          <Button size="small" type="primary" ghost @click="viewReceiptInvoice(order.receipt)">
+          <el-button size="small" type="primary" ghost @click="viewReceiptInvoice(order.receipt)">
             查看发票
-          </Button>
+          </el-button>
         </div>
       </template>
       <div v-else style="color: #999; margin-left: 5px">未开发票</div>
@@ -171,13 +168,13 @@
               </div>
             </td>
             <td>{{ goods.id }}</td>
-            <td>{{ goods.goodsPrice | unitPrice("￥") }}</td>
+            <td>{{ $filters.unitPrice(goods.goodsPrice, "￥") }}</td>
             <td>{{ goods.num }}</td>
             <td>{{refundPriceList(goods.isRefund)}}</td>
-            <td>{{ goods.refundPrice | unitPrice("￥") }}</td>
-            <td>{{ (goods.goodsPrice * goods.num) | unitPrice("￥") }}</td>
+            <td>{{ $filters.unitPrice(goods.refundPrice, "￥") }}</td>
+            <td>{{ $filters.unitPrice((goods.goodsPrice * goods.num), "￥") }}</td>
             <td>
-              <Button
+              <el-button
                 v-if="
                   goods.afterSaleStatus.includes('NOT_APPLIED') ||
                   goods.afterSaleStatus.includes('PART_AFTER_SALE')
@@ -186,23 +183,23 @@
                 type="info"
                 size="small"
                 class="mb_5"
-                >申请售后</Button
+                >申请售后</el-button
               >
-              <Button
+              <el-button
                 v-if="goods.commentStatus == 'UNFINISHED'"
                 @click="comment(order.order.sn, goodsIndex)"
                 size="small"
                 type="success"
                 class="fontsize_12 mb_5"
-                >评价</Button
+                >评价</el-button
               >
-              <Button
+              <el-button
                 v-if="goods.complainStatus == 'NO_APPLY'"
                 @click="complain(order.order.sn, goodsIndex)"
                 type="warning"
                 class="fontsize_12"
                 size="small"
-                >投诉</Button
+                >投诉</el-button
               >
             </td>
           </tr>
@@ -214,68 +211,52 @@
           <span>商品件数：</span><span>{{ order.order.goodsNum }}件</span>
         </div>
         <div>
-          <span>商品总价：</span
-          ><span>{{ order.order.goodsPrice | unitPrice("￥") }}</span
-          ><br />
+          <span>商品总价：</span><span>{{ $filters.unitPrice(order.order.goodsPrice, "￥") }}</span><br />
         </div>
         <div v-if="order.order.orderType !== 'VIRTUAL'">
-          <span>运费：</span
-          ><span>+{{ order.order.freightPrice | unitPrice("￥") }}</span
-          ><br />
+          <span>运费：</span><span>+{{ $filters.unitPrice(order.order.freightPrice, "￥") }}</span><br />
         </div>
         <div v-if="order.order.priceDetailDTO.couponPrice">
-          <span>优惠券：</span
-          ><span
-            >-{{
-              order.order.priceDetailDTO.couponPrice || 0 | unitPrice("￥")
-            }}</span
-          >
+          <span>优惠券：</span><span
+            >-{{ $filters.unitPrice(order.order.priceDetailDTO.couponPrice || 0, "￥") }}</span>
         </div>
         <div v-if="order.order.priceDetailDTO.giftCardPrice">
-          <span>礼品卡抵扣：</span
-          ><span
-            >-{{
-              order.order.priceDetailDTO.giftCardPrice || 0 | unitPrice("￥")
-            }}</span
-          >
+          <span>礼品卡抵扣：</span><span
+            >-{{ $filters.unitPrice(order.order.priceDetailDTO.giftCardPrice || 0, "￥") }}</span>
         </div>
         <div v-if="order.order.discountPrice">
-          <span>活动优惠：</span
-          ><span>-{{ order.order.discountPrice | unitPrice("￥") }}</span>
+          <span>活动优惠：</span><span>-{{ $filters.unitPrice(order.order.discountPrice, "￥") }}</span>
         </div>
         <div v-if="order.order.priceDetailDTO.updatePrice">
-          <span>修改价格：</span
-          ><span>{{ order.order.priceDetailDTO.updatePrice | unitPrice("￥") }}</span>
+          <span>修改价格：</span><span>{{ $filters.unitPrice(order.order.priceDetailDTO.updatePrice, "￥") }}</span>
         </div>
         <div>
           <span>应付金额：</span>
-          <span class="actrual-price">{{
-            order.order.flowPrice | unitPrice("￥")
-          }}</span>
+          <span class="actrual-price">{{ $filters.unitPrice(order.order.flowPrice, "￥") }}</span>
         </div>
       </div>
     </div>
-    <Modal
+    <el-dialog
       v-model="cancelAvail"
       title="请选择取消订单原因"
-      @on-ok="sureCancel"
-      @on-cancel="cancelAvail = false"
+      @ok="sureCancel"
+      @cancel="cancelAvail = false"
     >
-      <RadioGroup
+      <el-radio-group
         v-model="cancelParams.reason"
         vertical
         type="button"
         button-style="solid"
       >
-        <Radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
+        <el-radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
           {{ item.reason }}
-        </Radio>
-      </RadioGroup>
-    </Modal>
+        </el-radio>
+      </el-radio-group>
+    </el-dialog>
 
     <!--查询物流-->
-    <Modal v-model="logisticsModal" width="40">
-      <p slot="header"><span>查询物流</span></p>
+    <el-dialog v-model="logisticsModal" width="40">
+      <template #header><p><span>查询物流</span></p></template>
       <div class="layui-layer-wrap">
         <dl>
           <dt>订单号：</dt>
@@ -331,10 +312,10 @@
           </div>
         </div>
       </div>
-      <div slot="footer" style="text-align: right">
-        <Button @click="logisticsModal = false">取消</Button>
-      </div>
-    </Modal>
+      <template #footer><div style="text-align: right">
+        <el-button @click="logisticsModal = false">取消</el-button>
+      </div></template>
+    </el-dialog>
 
   </div>
 </template>
@@ -455,7 +436,7 @@ export default {
           if (receiptId) {
             const receiptRes = await receiptDetail(receiptId);
             if (receiptRes && receiptRes.success && receiptRes.result) {
-              this.$set(this.order, "receipt", receiptRes.result);
+              this.order["receipt"] = receiptRes.result;
             }
           }
           this.progressList = res.result.orderLogs;
@@ -592,7 +573,7 @@ export default {
       color: $theme_color;
     }
   }
-  .ivu-icon {
+  .el-icon {
     color: #ff8f23;
     cursor: pointer;
     &:hover {
@@ -698,15 +679,15 @@ table {
 .layui-layer-wrap > .div-express-log {
   max-height: 300px;
 }
-::v-deep .layui-layer-wrap > .div-express-log::-webkit-scrollbar{
+:deep .layui-layer-wrap > .div-express-log::-webkit-scrollbar{
   width: 1px;
   height: 5px;
 }
-::v-deep .layui-layer-wrap > .div-express-log::-webkit-scrollbar-thumb{
+:deep .layui-layer-wrap > .div-express-log::-webkit-scrollbar-thumb{
   border-radius: 1em;
   background-color: rgba(50,50,50,.3);
 }
-::v-deep .layui-layer-wrap > .div-express-log::-webkit-scrollbar-track{
+:deep .layui-layer-wrap > .div-express-log::-webkit-scrollbar-track{
   border-radius: 1em;
   background-color: rgba(50,50,50,.1);
 }
diff --git a/buyer/src/pages/home/userCenter/Coupons.vue b/buyer/src/pages/home/userCenter/Coupons.vue
index 8da1314d..97031ca6 100644
--- a/buyer/src/pages/home/userCenter/Coupons.vue
+++ b/buyer/src/pages/home/userCenter/Coupons.vue
@@ -9,14 +9,11 @@
             <span
               v-if="item.couponType === 'PRICE'"
               class="fontsize_12 global_color"
-              >￥<span class="price">{{ item.price | unitPrice }}</span></span
-            >
+              >￥<span class="price">{{ $filters.unitPrice(item.price) }}</span></span>
             <span
               v-if="item.couponType === 'DISCOUNT'"
               class="fontsize_12 global_color"
-              ><span class="price">{{ item.discount }}</span
-              >折</span
-            >
+              ><span class="price">{{ item.discount }}</span>折</span>
             <span class="describe">满{{ item.consumeThreshold }}元可用</span>
           </div>
           <p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
@@ -33,17 +30,13 @@
         <i class="circle-bottom"></i>
       </li>
     </ul>
-    <Page
-      :total="total"
-      @on-change="changePageNum"
+    <el-pagination       :total="total"
+      @current-change="changePageNum"
       class="pageration"
-      @on-page-size-change="changePageSize"
+      @size-change="changePageSize"
       :page-size="params.pageSize"
-      show-total
-      show-sizer
-    >
-    </Page>
-    <Spin v-if="loading" fix></Spin>
+     layout="total, sizes, prev, pager, next"></el-pagination>
+    <el-skeleton v-if="loading" fix></el-skeleton>
   </div>
 </template>
 
diff --git a/buyer/src/pages/home/userCenter/MoneyManagement.vue b/buyer/src/pages/home/userCenter/MoneyManagement.vue
index 647b44cc..4e5282ea 100644
--- a/buyer/src/pages/home/userCenter/MoneyManagement.vue
+++ b/buyer/src/pages/home/userCenter/MoneyManagement.vue
@@ -5,164 +5,202 @@
     <div class="box">
       <div class="mb_20 account-price">
         <span class="subTips">账户余额：</span>
-        <span class="global_color mr_10" style="font-size:26px">￥{{ memberDeposit | unitPrice }}</span>
+        <span class="global_color mr_10" style="font-size:26px">￥{{ $filters.unitPrice(memberDeposit) }}</span>
         <span class="subTips">冻结金额：</span>
-        <span class="">￥{{ frozenDeposit | unitPrice }}</span>
+        <span class="">￥{{ $filters.unitPrice(frozenDeposit) }}</span>
       </div>
       <div class="account-btns">
-        <Button type="primary" @click="recharge">在线充值</Button>
-        <Button @click="withdrawalApply">申请提现</Button>
+        <el-button type="primary" @click="recharge">在线充值</el-button>
+        <el-button @click="withdrawalApply">申请提现</el-button>
       </div>
     </div>
-    <Modal v-model="modal" width="530">
-      <p slot="header">
-        <Icon type="edit"></Icon>
+    <el-dialog v-model="modal" width="530">
+      <template #header><p>
+        <el-icon><Edit /></el-icon>
         <span>充值金额</span>
-      </p>
+      </p></template>
       <div>
-        <Form
+        <el-form
           ref="formData"
-          :label-width="100"
+          label-width="100px"
           :model="formData"
           :rules="formValidate"
           label-position="left"
         >
-          <FormItem label="充值金额" prop="price">
-            <Input v-model="formData.price" maxlength="9" number size="large"
-            ><span slot="append">元</span></Input>
-          </FormItem>
-        </Form>
+          <el-form-item label="充值金额" prop="price">
+            <el-input v-model="formData.price" maxlength="9" number size="large"
+            ><template #append><span>元</span></template></el-input>
+          </el-form-item>
+        </el-form>
       </div>
-      <div slot="footer" style="text-align: center">
-        <Button size="large" type="success" @click="rechargePrice">充值</Button>
-      </div>
-    </Modal>
+      <template #footer><div style="text-align: center">
+        <el-button size="large" type="success" @click="rechargePrice">充值</el-button>
+      </div></template>
+    </el-dialog>
     <!-- 提现申请 -->
-    <Modal v-model="withdrawApplyModal" width="530">
-      <p slot="header">
-        <Icon type="edit"></Icon>
+    <el-dialog v-model="withdrawApplyModal" width="530">
+      <template #header><p>
+        <el-icon><Edit /></el-icon>
         <span>提现金额</span>
-      </p>
+      </p></template>
       <div>
-        <Form
+        <el-form
           ref="withdrawApplyFormData"
-          :label-width="120"
+          label-width="120px"
           :model="withdrawApplyFormData"
           :rules="withdrawApplyFormValidate"
         >
-          <FormItem label="提现类型" prop="type">
-            <Select v-model="withdrawApplyFormData.type" disabled>
-              <Option value="ALI">支付宝</Option>
-              <Option value="WECHAT">微信</Option>
-            </Select>
-          </FormItem>
-          <FormItem label="提现金额" prop="price">
-            <Input
+          <el-form-item label="提现类型" prop="type">
+            <el-select v-model="withdrawApplyFormData.type" disabled>
+              <el-option value="ALI">支付宝</el-option>
+              <el-option value="WECHAT">微信</el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="提现金额" prop="price">
+            <el-input
               v-model="withdrawApplyFormData.price"
               maxlength="9"
               number
               size="large"
-            ><span slot="append">元</span></Input>
+            ><template #append><span>元</span></template></el-input>
             <span style="color: red">最低提现金额 {{ withdrawApplyFormData.minPrice }}元</span>
-          </FormItem>
-          <FormItem v-if="withdrawApplyFormData.type === 'ALI'" label="真实姓名" prop="realName">
-            <Input
+          </el-form-item>
+          <el-form-item v-if="withdrawApplyFormData.type === 'ALI'" label="真实姓名" prop="realName">
+            <el-input
               v-model="withdrawApplyFormData.realName"
               maxlength="9"
               number
               size="large"
-            ></Input>
-          </FormItem>
-          <FormItem v-if="withdrawApplyFormData.type === 'ALI'" label="第三方登录账号" prop="connectNumber">
-            <Input
+            ></el-input>
+          </el-form-item>
+          <el-form-item v-if="withdrawApplyFormData.type === 'ALI'" label="第三方登录账号" prop="connectNumber">
+            <el-input
               v-model="withdrawApplyFormData.connectNumber"
               maxlength="9"
               number
               size="large"
-            ></Input>
-          </FormItem>
-        </Form>
+            ></el-input>
+          </el-form-item>
+        </el-form>
       </div>
-      <div slot="footer" style="text-align: center">
-        <Button size="large" type="success" @click="withdrawal">提现</Button>
-      </div>
-    </Modal>
+      <template #footer><div style="text-align: center">
+        <el-button size="large" type="success" @click="withdrawal">提现</el-button>
+      </div></template>
+    </el-dialog>
     <!-- 余额日志 -->
-    <Tabs value="log" @on-click="tabPaneChange">
-      <TabPane label="余额日志" name="log">
-        <Table :columns="logColumns" :data="logColumnsData.records"></Table>
+    <el-tabs v-model="activeWalletTab" @tab-click="(tab) => tabPaneChange(tab.paneName)">
+      <el-tab-pane label="余额日志" name="log">
+        <el-table :data="logColumnsData.records || []">
+          <el-table-column prop="createTime" label="时间" width="190" />
+          <el-table-column label="金额" width="180">
+            <template #default="{ row }">
+              <span v-if="row.money > 0" style="color: green">{{ $filters.unitPrice(row.money, '+ ¥') }}</span>
+              <span v-else-if="row.money < 0" style="color: red">{{ $filters.unitPrice(0 - row.money, '- ¥') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="detail" label="变动日志" />
+        </el-table>
         <!-- 分页 -->
         <div class="page-size">
-          <Page
-            :current="walletForm.pageNumber"
+          <el-pagination             :current-page="walletForm.pageNumber"
             :page-size="walletForm.pageSize"
-            :page-size-opts="[10, 20, 50]"
+            :page-sizes="[10, 20, 50]"
             :total="logColumnsData.total"
-            show-sizer
-            show-total
-            size="small"
-            transfer
-            @on-change="changePage"
-            @on-page-size-change="changePageSize"
-          ></Page>
+            small
+            @current-change="changePage"
+            @size-change="changePageSize"
+           layout="total, sizes, prev, pager, next"></el-pagination>
         </div>
-      </TabPane>
+      </el-tab-pane>
       <!-- 充值记录 -->
-      <TabPane label="充值记录" name="recharge">
-        <Table
-          :columns="rechargeListColumns"
-          :data="rechargeListData.records"
-        ></Table>
+      <el-tab-pane label="充值记录" name="recharge">
+        <el-table :data="rechargeListData.records || []">
+          <el-table-column prop="createTime" label="充值时间" width="168" />
+          <el-table-column prop="rechargeSn" label="支付单号" width="200" />
+          <el-table-column label="充值金额">
+            <template #default="{ row }">
+              <span v-if="row.payStatus === 'PAID'" style="color: green">{{ $filters.unitPrice(row.rechargeMoney, '+ ¥') }}</span>
+              <span v-else>{{ $filters.unitPrice(row.rechargeMoney, '¥') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="支付状态">
+            <template #default="{ row }">
+              <span v-if="row.payStatus === 'PAID'">已付款</span>
+              <span v-else-if="row.payStatus === 'UNPAID'">未付款</span>
+              <span v-else-if="row.payStatus === 'CANCEL'">已取消</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="支付方式">
+            <template #default="{ row }">
+              <span v-if="row.rechargeWay === 'ALIPAY'">支付宝</span>
+              <span v-else-if="row.rechargeWay === 'WECHAT'">微信</span>
+              <span v-else-if="row.rechargeWay === 'BANK_TRANSFER'">线下转账</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="payTime" label="支付时间" width="180" />
+        </el-table>
         <!-- 分页 -->
         <div class="page-size">
-          <Page
-            :current="rechargeForm.pageNumber"
+          <el-pagination             :current-page="rechargeForm.pageNumber"
             :page-size="rechargeForm.pageSize"
-            :page-size-opts="[10, 20, 50]"
+            :page-sizes="[10, 20, 50]"
             :total="rechargeListData.total"
-            show-sizer
-            show-total
-            size="small"
-            transfer
-            @on-change="rechargeChangePage"
-            @on-page-size-change="rechargeChangePageSize"
-          ></Page>
+            small
+            @current-change="rechargeChangePage"
+            @size-change="rechargeChangePageSize"
+           layout="total, sizes, prev, pager, next"></el-pagination>
         </div>
-      </TabPane>
+      </el-tab-pane>
 
-      <TabPane label="提现记录" name="withdrawApply">
-        <Table
-          :columns="withdrawApplyColumns"
-          :data="withdrawApplyColumnsListData.records"
-        ></Table>
+      <el-tab-pane label="提现记录" name="withdrawApply">
+        <el-table :data="withdrawApplyColumnsListData.records || []">
+          <el-table-column prop="createTime" label="申请时间" width="168" />
+          <el-table-column prop="sn" label="提现单号" width="200" />
+          <el-table-column label="提现金额" width="110">
+            <template #default="{ row }">
+              <span v-if="row.applyStatus === 'VIA_AUDITING'" style="color: green">{{ $filters.unitPrice(row.applyMoney, '+ ¥') }}</span>
+              <span v-else>{{ $filters.unitPrice(row.applyMoney, '¥') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="提现状态" width="95">
+            <template #default="{ row }">
+              <span v-if="row.applyStatus === 'APPLY'">申请中</span>
+              <span v-else-if="row.applyStatus === 'VIA_AUDITING'">审核通过</span>
+              <span v-else-if="row.applyStatus === 'SUCCESS'">提现成功</span>
+              <span v-else-if="row.applyStatus === 'ERROR'">提现失败</span>
+              <span v-else>审核拒绝</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="inspectTime" label="审核时间" width="168" />
+          <el-table-column prop="inspectRemark" label="审核备注" show-overflow-tooltip />
+        </el-table>
         <!-- 分页 -->
         <div class="page-size">
-          <Page
-            :current="withdrawApplyForm.pageNumber"
+          <el-pagination             :current-page="withdrawApplyForm.pageNumber"
             :page-size="withdrawApplyForm.pageSize"
-            :page-size-opts="[10, 20, 50]"
+            :page-sizes="[10, 20, 50]"
             :total="withdrawApplyColumnsListData.total"
-            show-sizer
-            show-total
-            size="small"
-            transfer
-            @on-change="withdrawChangePage"
-            @on-page-size-change="withdrawChangePageSize"
-          ></Page>
+            small
+            @current-change="withdrawChangePage"
+            @size-change="withdrawChangePageSize"
+           layout="total, sizes, prev, pager, next"></el-pagination>
         </div>
-      </TabPane>
-    </Tabs>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
 import {getDepositLog, getMembersWallet, getRecharge, getWithdrawApply, recharge, withdrawalApply} from '@/api/member';
 import {withdrawalSettingVO} from "@/api/pay";
+import { Edit } from '@element-plus/icons-vue';
 
 export default {
   name: 'MoneyManagement',
+  components: { Edit },
   data() {
     return {
+      activeWalletTab: "log",
       frozenDeposit: 0, // 冻结余额
       memberDeposit: 0, // 余额
 
@@ -225,172 +263,9 @@ export default {
           }
         ]
       },
-      // 余额日志
-      logColumns: [
-        {
-          title: '时间',
-          width: 190,
-          key: 'createTime'
-        },
-        {
-          title: '金额',
-          key: 'money',
-          width: 180,
-          render: (h, params) => {
-            if (params.row.money > 0) {
-              return h('div', [
-                h(
-                  'span',
-                  {
-                    style: {
-                      color: 'green'
-                    }
-                  },
-                  this.$options.filters.unitPrice(params.row.money, '+ ¥')
-                )
-              ]);
-            } else if (params.row.money < 0) {
-              return h('div', [
-                h(
-                  'span',
-                  {
-                    style: {
-                      color: 'red'
-                    }
-                  },
-                  this.$options.filters.unitPrice(0 - params.row.money, '- ¥')
-                )
-              ]);
-            }
-          }
-        },
-        {
-          title: '变动日志',
-          key: 'detail'
-        }
-      ],
-      logColumnsData: {}, // 余额日志
-      // 充值记录
-      rechargeListColumns: [
-        {
-          title: '充值时间',
-          key: 'createTime',
-          width: 168
-        },
-        {
-          title: '支付单号',
-          key: 'rechargeSn',
-          width: 200
-        },
-        {
-          title: '充值金额',
-          key: 'rechargeMoney',
-          render: (h, params) => {
-            if (params.row.payStatus === 'PAID') {
-              return h('div', [h('span', {
-                style: {
-                  color: 'green'
-                }
-              }, this.$options.filters.unitPrice(params.row.rechargeMoney, '+ ¥'))]);
-            } else {
-              return h('div', [h('span', this.$options.filters.unitPrice(params.row.rechargeMoney, '¥'))]);
-            }
-          }
-        },
-        {
-          title: '支付状态',
-          key: 'payStatus',
-          render: (h, params) => {
-            if (params.row.payStatus === 'PAID') {
-              return h('div', [h('span', {}, '已付款')]);
-            } else if (params.row.payStatus === 'UNPAID') {
-              return h('div', [h('span', {}, '未付款')]);
-            } else if (params.row.payStatus === 'CANCEL') {
-              return h('div', [h('span', {}, '已取消')]);
-            }
-          }
-        },
-        {
-          title: '支付方式',
-          key: 'rechargeWay',
-          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: 'payTime',
-          width: 180
-        }
-      ],
-      rechargeListData: {}, // 充值记录数据
-      // 提现记录
-      withdrawApplyColumns: [
-        {
-          title: '申请时间',
-          key: 'createTime',
-          width: 168
-        },
-        {
-          title: '提现单号',
-          key: 'sn',
-          width: 200
-        },
-        {
-          title: '提现金额',
-          key: 'applyMoney',
-          width: 110,
-          render: (h, params) => {
-            if (params.row.applyStatus === 'VIA_AUDITING') {
-              return h('div', [h('span', {
-                style: {
-                  color: 'green'
-                }
-              }, this.$options.filters.unitPrice(params.row.applyMoney, '+ ¥'))]);
-            } else {
-              return h('div', [h('span', this.$options.filters.unitPrice(params.row.applyMoney, '¥'))]);
-            }
-          }
-        },
-        {
-          title: '提现状态',
-          key: 'applyStatus',
-          width: 95,
-          render: (h, params) => {
-            if (params.row.applyStatus === 'APPLY') {
-              return h('div', [h('span', {}, '申请中')]);
-            } else if (params.row.applyStatus === 'VIA_AUDITING') {
-              return h('div', [h('span', {}, '审核通过')]);
-            } else if (params.row.applyStatus === 'SUCCESS') {
-              return h('div', [h('span', {}, '提现成功')]);
-            } else if (params.row.applyStatus === 'ERROR') {
-              return h('div', [h('span', {}, '提现失败')]);
-            } else {
-              return h('div', [h('span', {}, '审核拒绝')]);
-            }
-          }
-        },
-        {
-          title: '审核时间',
-          key: 'inspectTime',
-          width: 168
-        },
-        {
-          title: '审核备注',
-          key: 'inspectRemark',
-          tooltip: true
-
-        }
-      ],
-      withdrawApplyColumnsListData: {} // 提现记录
+      logColumnsData: {},
+      rechargeListData: {},
+      withdrawApplyColumnsListData: {}
     };
   },
   mounted() {
@@ -548,7 +423,7 @@ export default {
   margin: 10px 0;
 }
 
-.ivu-btn {
+.el-button {
   margin: 0 4px;
 }
 
diff --git a/buyer/src/pages/home/userCenter/MyGiftCards.vue b/buyer/src/pages/home/userCenter/MyGiftCards.vue
index ad8d447e..61ecc631 100644
--- a/buyer/src/pages/home/userCenter/MyGiftCards.vue
+++ b/buyer/src/pages/home/userCenter/MyGiftCards.vue
@@ -4,33 +4,33 @@
 
     <div class="bind-section mb_20">
       <div class="section-title">兑换礼品卡</div>
-      <Form ref="bindForm" :model="bindForm" :rules="bindRules" inline class="bind-form">
-        <FormItem label="卡号" prop="cardNo" :label-width="60">
-          <Input v-model="bindForm.cardNo" placeholder="请输入卡号" maxlength="64" style="width: 220px" />
-        </FormItem>
-        <FormItem label="兑换码" prop="cardSecret" :label-width="70">
-          <Input
+      <el-form ref="bindForm" :model="bindForm" :rules="bindRules" inline class="bind-form">
+        <el-form-item label="卡号" prop="cardNo" label-width="60px">
+          <el-input v-model="bindForm.cardNo" placeholder="请输入卡号" maxlength="64" style="width: 220px" />
+        </el-form-item>
+        <el-form-item label="兑换码" prop="cardSecret" label-width="70px">
+          <el-input
             v-model="bindForm.cardSecret"
             type="password"
             placeholder="请输入兑换码（卡密）"
             maxlength="128"
             style="width: 220px"
           />
-        </FormItem>
-        <FormItem :label-width="0">
-          <Button type="primary" :loading="bindSubmitting" @click="submitBind">兑换</Button>
-        </FormItem>
-      </Form>
+        </el-form-item>
+        <el-form-item label-width="0px">
+          <el-button type="primary" :loading="bindSubmitting" @click="submitBind">兑换</el-button>
+        </el-form-item>
+      </el-form>
     </div>
 
-    <Tabs v-model="statusTab" class="status-tabs mb_16" @on-click="onStatusTab">
-      <TabPane label="可用" name="AVAILABLE" />
-      <TabPane label="不可用" name="UNAVAILABLE" />
-      <TabPane label="待激活" name="PENDING_ACTIVATION" />
-    </Tabs>
+    <el-tabs v-model="statusTab" class="status-tabs mb_16" @tab-click="(tab) => onStatusTab(tab.paneName)">
+      <el-tab-pane label="可用" name="AVAILABLE" />
+      <el-tab-pane label="不可用" name="UNAVAILABLE" />
+      <el-tab-pane label="待激活" name="PENDING_ACTIVATION" />
+    </el-tabs>
 
     <div class="card-list-wrap">
-      <Spin v-if="loading" fix />
+      <el-skeleton v-if="loading" fix />
       <template v-if="!loading">
         <empty v-if="list.length === 0" />
         <div v-else class="gift-card-grid">
@@ -51,7 +51,7 @@
             </div>
             <div class="gcc-card-body">
               <div class="gcc-row">
-                当前余额：<span class="gcc-strong" v-if="item.balance != null">￥{{ item.balance | unitPrice }}</span><span class="gcc-strong" v-else>—</span>
+                当前余额：<span class="gcc-strong" v-if="item.balance != null">￥{{ $filters.unitPrice(item.balance) }}</span><span class="gcc-strong" v-else>—</span>
               </div>
               
               <button
@@ -73,28 +73,23 @@
     </div>
 
     <div class="page-size">
-      <Page
-        :current="params.pageNumber"
+      <el-pagination         :current-page="params.pageNumber"
         :page-size="params.pageSize"
-        :page-size-opts="[10, 20, 50]"
+        :page-sizes="[10, 20, 50]"
         :total="total"
-        show-sizer
-        show-total
-        size="small"
-        transfer
-        @on-change="changePage"
-        @on-page-size-change="changePageSize"
-      />
+        small
+        @current-change="changePage"
+        @size-change="changePageSize"
+       layout="total, sizes, prev, pager, next" />
     </div>
 
-    <Modal v-model="noticeModal" title="使用须知" footer-hide width="520">
+    <el-dialog v-model="noticeModal" title="使用须知" footer-hide width="520">
       <p class="gcc-notice-text">
         请在有效期内使用本礼品卡；消费时将优先使用卡内余额。具体使用范围以活动规则为准。如有疑问请联系客服。
       </p>
       <div class="gcc-notice-footer">
-        <Button type="primary" @click="noticeModal = false">我知道了</Button>
-      </div>
-    </Modal>
+        <el-button type="primary" @click="noticeModal = false">我知道了</el-button>
+      </div></el-dialog>
   </div>
 </template>
 
@@ -314,7 +309,7 @@ export default {
     gap: 4px 8px;
   }
   .status-tabs {
-    ::v-deep .ivu-tabs-bar {
+    :deep(.el-tabs__header) {
       margin-bottom: 0;
     }
   }
diff --git a/buyer/src/pages/home/userCenter/MyTracks.vue b/buyer/src/pages/home/userCenter/MyTracks.vue
index a75d69fa..02b86245 100644
--- a/buyer/src/pages/home/userCenter/MyTracks.vue
+++ b/buyer/src/pages/home/userCenter/MyTracks.vue
@@ -2,7 +2,7 @@
   <div class="wrapper">
     <!-- 卡片组件 -->
     <card _Title="我的足迹" :_Size="16"></card>
-    <Button class="del-btn" @click="clearAll" type="primary">删除全部</Button>
+    <el-button class="del-btn" @click="clearAll" type="primary">删除全部</el-button>
     <!-- 订单列表 -->
     <empty v-if="list.length === 0" />
     <ul class="track-list" v-else>
@@ -13,29 +13,28 @@
       >
         <img :src="item.thumbnail" :alt="item.thumbnail" width="200" height="200" />
         <p class="ellipsis">{{ item.goodsName }}</p>
-        <p>{{ item.price | unitPrice("￥") }}</p>
+        <p>{{ $filters.unitPrice(item.price, "￥") }}</p>
         <span class="del-icon" @click.stop="clearById(item.goodsId)">
-          <Icon type="md-trash" />
+          <el-icon><Delete /></el-icon>
         </span>
       </li>
     </ul>
     <!-- 分页 -->
     <div class="page-size">
-      <Page
-        :total="total"
-        @on-change="changePageNum"
-        @on-page-size-change="changePageSize"
+      <el-pagination         :total="total"
+        @current-change="changePageNum"
+        @size-change="changePageSize"
         :page-size="params.pageSize"
-        show-sizer
-      >
-      </Page>
+       layout="sizes, prev, pager, next"></el-pagination>
     </div>
   </div>
 </template>
 
 <script>
+import { Delete } from '@element-plus/icons-vue';
 import { tracksList, clearTracks, clearTracksById } from "@/api/member";
 export default {
+  components: { Delete },
   name: "MyTrack",
   data() {
     return {
diff --git a/buyer/src/pages/payment/Pay.vue b/buyer/src/pages/payment/Pay.vue
index 0ca28643..d0116288 100644
--- a/buyer/src/pages/payment/Pay.vue
+++ b/buyer/src/pages/payment/Pay.vue
@@ -9,13 +9,13 @@
       </div>
       <div class="cart-steps">
         <span :class="stepIndex == 1 ? 'active' : ''">1.我的购物车</span>
-        <Icon :class="stepIndex == 1 ? 'active-arrow' : ''" custom="icomoon icon-next"></Icon>
+        <i class="icomoon icon-next" :class="stepIndex == 1 ? 'active-arrow' : ''"></i>
         <span :class="stepIndex == 1 ? 'active' : ''">2.填写订单信息</span>
-        <Icon :class="stepIndex == 1 ? 'active-arrow' : ''" custom="icomoon icon-next"></Icon>
+        <i class="icomoon icon-next" :class="stepIndex == 1 ? 'active-arrow' : ''"></i>
         <span :class="stepIndex == 2 ? 'active' : ''">3.成功提交订单</span>
       </div>
     </div>
-    <Divider />
+    <el-divider />
     <div class="content width_1200">
       <!-- 收货地址 -->
       <div class="address" v-if="selectedDeliverMethod === 'LOGISTICS' && goodsType !== 'VIRTUAL_GOODS'">
@@ -30,13 +30,13 @@
             :key="index">
             <div>
               <span>{{ item.name }}</span>
-              <Tag class="ml_10" v-if="item.isDefault" color="red">默认</Tag>
-              <Tag class="ml_10" v-if="item.alias" color="warning">{{ item.alias }}
-              </Tag>
+              <el-tag class="ml_10" v-if="item.isDefault" color="red">默认</el-tag>
+              <el-tag class="ml_10" v-if="item.alias" color="warning">{{ item.alias }}
+              </el-tag>
             </div>
             <div>{{ item.mobile }}</div>
             <div>
-              {{ item.consigneeAddressPath | unitAddress }} {{ item.detail }}
+              {{ $filters.unitAddress(item.consigneeAddressPath) }} {{ item.detail }}
             </div>
             <div class="edit-btn" v-show="showEditBtn === index">
               <span @click.stop="editAddress(item.id)">修改</span>
@@ -44,18 +44,18 @@
             </div>
             <div class="corner-icon" v-show="selectedAddress.id === item.id">
               <div></div>
-              <Icon type="md-checkmark" />
+              <el-icon><Check /></el-icon>
             </div>
           </div>
           <div class="add-address" @click="editAddress('')">
-            <Icon type="ios-add-circle-outline" />
+            <el-icon><Plus /></el-icon>
             <div>添加新地址</div>
           </div>
         </div>
         <div class="more-addr" @click="moreAddr = !moreAddr" v-if="addressList.length > 3">
           {{ moreAddr ? "收起地址" : "更多地址" }}
-          <Icon v-show="!moreAddr" type="md-arrow-dropdown" />
-          <Icon v-show="moreAddr" type="md-arrow-dropup" />
+          <el-icon :v-show="!moreAddr"><ArrowDown /></el-icon>
+          <el-icon :v-show="moreAddr"><ArrowUp /></el-icon>
         </div>
       </div>
 
@@ -73,18 +73,18 @@
             </div>
             <div>{{ item.mobile }}</div>
             <div>
-              {{ item.address | unitAddress }} {{ item.detail }}
+              {{ $filters.unitAddress(item.address) }} {{ item.detail }}
             </div>
             <div class="corner-icon" v-show="selectedStoreAddress.id === item.id">
               <div></div>
-              <Icon type="md-checkmark" />
+              <el-icon><Check /></el-icon>
             </div>
           </div>
         </div>
         <div class="more-addr" @click="storeMoreAddr = !storeMoreAddr" v-if="addressList.length > 3">
           {{ storeMoreAddr ? "收起地址" : "更多地址" }}
-          <Icon v-show="!storeMoreAddr" type="md-arrow-dropdown" />
-          <Icon v-show="storeMoreAddr" type="md-arrow-dropup" />
+          <el-icon :v-show="!storeMoreAddr"><ArrowDown /></el-icon>
+          <el-icon :v-show="storeMoreAddr"><ArrowUp /></el-icon>
         </div>
       </div>
       <div>
@@ -102,7 +102,7 @@
             <div>{{ item.label }}</div>
             <div class="corner-icon" v-show="selectedDeliverMethod === item.value">
               <div></div>
-              <Icon type="md-checkmark" />
+              <el-icon><Check /></el-icon>
             </div>
           </div>
         </div>
@@ -132,18 +132,14 @@
                       goods.goodsSku.goodsName
                   }}</span>
                 </span>
-                <span class="goods-price">{{
-                    goods.purchasePrice | unitPrice("￥")
-                }}</span>
+                <span class="goods-price">{{ $filters.unitPrice(goods.purchasePrice, "￥") }}</span>
                 <span>x{{ goods.num }}</span>
                 <span>{{ goods.goodsSku.quantity > 0 ? "有货" : "无货" }}</span>
-                <span class="goods-price">{{
-                    goods.subTotal | unitPrice("￥")
-                }}</span>
+                <span class="goods-price">{{ $filters.unitPrice(goods.subTotal, "￥") }}</span>
               </div>
             </div>
             <div class="order-mark">
-              <Input type="textarea" maxlength="60" v-model="shop.remark" show-word-limit placeholder="订单备注" />
+              <el-input type="textarea" maxlength="60" v-model="shop.remark" show-word-limit placeholder="订单备注" />
               <span style="font-size: 12px; color: #999">提示：请勿填写有关支付、收货、发票方面的信息</span>
             </div>
           </div>
@@ -153,7 +149,7 @@
       <div class="invoice">
         <div class="card-head mt_20 mb_20">
           <span class="relative">发票信息<span class="inv-tips">
-              <Icon type="ios-alert-outline" />开企业抬头发票须填写纳税人识别号，以免影响报销
+              <el-icon><Warning /></el-icon>开企业抬头发票须填写纳税人识别号，以免影响报销
             </span></span>
         </div>
         <div class="inovice-content">
@@ -175,9 +171,7 @@
           <li v-for="(item, index) in couponList" class="coupon-item" :key="index">
             <div class="c-left">
               <div>
-                <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{
-                    item.price | unitPrice
-                }}</span></span>
+                <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{ $filters.unitPrice(item.price) }}</span></span>
                 <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{
                     item.discount
                 }}</span>折</span>
@@ -201,12 +195,11 @@
           <div class="pay-gcc-title">
             使用礼品卡
             <span class="pay-gcc-deduct">
-              (已抵扣 <span class="pay-gcc-deduct-num">{{ giftCardDeductAmount | unitPrice("¥") }}</span
-              >)
+              (已抵扣 <span class="pay-gcc-deduct-num">{{ $filters.unitPrice(giftCardDeductAmount, "¥") }}</span>)
             </span>
           </div>
           <a href="javascript:void(0)" class="pay-gcc-help" @click.prevent="giftCardNoticeModal = true">
-            使用说明 <Icon type="ios-help-circle-outline" />
+            使用说明 <el-icon><Help /></el-icon>
           </a>
         </div>
         <div class="pay-gcc-body">
@@ -234,14 +227,14 @@
                         </div>
                       </div>
                       <div class="pay-gcc-balance-row">
-                        <span class="pay-gcc-amt">¥{{ item.balance != null ? (item.balance | unitPrice) : "0.00" }}</span>
+                        <span class="pay-gcc-amt">¥{{ item.balance != null ? $filters.unitPrice(item.balance) : "0.00" }}</span>
                         <span class="pay-gcc-bal-label">余额</span>
                       </div>
                       <div class="pay-gcc-no">{{ item.cardNo }}</div>
                     </div>
                   </div>
                   <div v-if="isGiftCardSelected(item)" class="pay-gcc-corner">
-                    <Icon type="md-checkmark" />
+                    <el-icon><Check /></el-icon>
                   </div>
                 </div>
               </div>
@@ -252,28 +245,26 @@
       <!-- 订单价格 -->
       <div class="order-price">
         <div>
-          <span>{{ totalNum }}件商品，总商品金额：</span><span>{{ priceDetailDTO.goodsPrice | unitPrice("￥") }}</span>
+          <span>{{ totalNum }}件商品，总商品金额：</span><span>{{ $filters.unitPrice(priceDetailDTO.goodsPrice, "￥") }}</span>
         </div>
         <div v-if="priceDetailDTO.freightPrice > 0">
-          <span>运费：</span><span>{{ priceDetailDTO.freightPrice | unitPrice("￥") }}</span>
+          <span>运费：</span><span>{{ $filters.unitPrice(priceDetailDTO.freightPrice, "￥") }}</span>
         </div>
         <div v-if="priceDetailDTO.discountPrice > 0">
-          <span>优惠金额：</span><span>-{{ priceDetailDTO.discountPrice | unitPrice("￥") }}</span>
+          <span>优惠金额：</span><span>-{{ $filters.unitPrice(priceDetailDTO.discountPrice, "￥") }}</span>
         </div>
         <div v-if="priceDetailDTO.couponPrice > 0">
-          <span>优惠券金额：</span><span>-{{ priceDetailDTO.couponPrice | unitPrice("￥") }}</span>
+          <span>优惠券金额：</span><span>-{{ $filters.unitPrice(priceDetailDTO.couponPrice, "￥") }}</span>
         </div>
         <div v-if="giftCardDeductAmount > 0">
-          <span>礼品卡抵扣：</span><span>-{{ giftCardDeductAmount | unitPrice("￥") }}</span>
+          <span>礼品卡抵扣：</span><span>-{{ $filters.unitPrice(giftCardDeductAmount, "￥") }}</span>
         </div>
 
         <div v-if="$route.query.way === 'POINTS'">
           <span>应付积分：</span><span class="actrual-price">{{ priceDetailDTO.payPoint }}</span>
         </div>
         <div v-else>
-          <span>应付金额：</span><span class="actrual-price">{{
-              priceDetailDTO.flowPrice | unitPrice("￥")
-          }}</span>
+          <span>应付金额：</span><span class="actrual-price">{{ $filters.unitPrice(priceDetailDTO.flowPrice, "￥") }}</span>
         </div>
       </div>
     </div>
@@ -281,7 +272,7 @@
     <div class="order-footer width_1200">
       <div class="pay ml_20" @click="pay">提交订单</div>
       <div class="pay-address" v-if="addressList.length && selectedDeliverMethod === 'LOGISTICS'">
-        配送至：{{ selectedAddress.consigneeAddressPath | unitAddress }}
+        配送至：{{ $filters.unitAddress(selectedAddress.consigneeAddressPath) }}
         {{ selectedAddress.detail }}&nbsp;&nbsp;收货人：{{
             selectedAddress.name
         }}&nbsp;&nbsp;{{ selectedAddress.mobile }}
@@ -295,18 +286,18 @@
     <invoice-modal ref="invModal" :invoiceData="invoiceData" @change="getInvMsg" />
     <!-- 选择地址模态框 -->
     <address-manage ref="address" :id="addrId" @change="addrChange"></address-manage>
-    <Modal v-model="giftCardNoticeModal" title="礼品卡使用说明" footer-hide width="520">
+    <el-dialog v-model="giftCardNoticeModal" title="礼品卡使用说明" footer-hide width="520">
       <p class="pay-gcc-notice-p">
         请在礼品卡有效期内使用；结算时勾选礼品卡即可按规则抵扣订单金额，可与优惠券等活动叠加规则以平台说明为准。放弃勾选或取消抵扣将恢复对应余额。
       </p>
       <div class="pay-gcc-notice-foot">
-        <Button type="primary" @click="giftCardNoticeModal = false">我知道了</Button>
-      </div>
-    </Modal>
+        <el-button type="primary" @click="giftCardNoticeModal = false">我知道了</el-button>
+      </div></el-dialog>
   </div>
 </template>
 
 <script>
+import { ArrowDown, ArrowUp, Check, Help, Plus, Warning } from '@element-plus/icons-vue';
 import invoiceModal from "@/components/invoiceModal";
 import addressManage from "@/components/addressManage";
 import { memberAddress, delMemberAddress } from "@/api/address";
@@ -928,7 +919,7 @@ export default {
     padding: 0 15px;
   }
 
-  .ivu-icon {
+  .el-icon {
     @include content_color($light_content_color);
     font-size: 20px;
     margin: 0 15px;
@@ -1008,7 +999,7 @@ export default {
         border-right: 20px solid $theme_color;
       }
 
-      .ivu-icon {
+      .el-icon {
         font-size: 12px;
         position: absolute;
         bottom: 0;
@@ -1045,7 +1036,7 @@ export default {
     justify-content: center;
     flex-direction: column;
 
-    .ivu-icon {
+    .el-icon {
       font-size: 24px;
     }
 
@@ -1091,7 +1082,7 @@ export default {
         border-right: 20px solid $theme_color;
       }
 
-      .ivu-icon {
+      .el-icon {
         font-size: 12px;
         position: absolute;
         bottom: 0;
@@ -1115,7 +1106,7 @@ export default {
   >span:nth-child(1) {
     font-weight: bold;
 
-    .ivu-icon {
+    .el-icon {
       color: #ff8f23;
 
       &:hover {
@@ -1232,7 +1223,7 @@ export default {
       left: -9px;
     }
 
-    .ivu-icon {
+    .el-icon {
       color: #ff8f23;
       margin-right: 3px;
       font-size: 16px;
@@ -1333,7 +1324,7 @@ export default {
   }
 }
 
-.ivu-divider {
+.el-divider {
   background: $theme_color;
   height: 2px;
 }
@@ -1551,7 +1542,7 @@ export default {
   background: #e54d42;
   transform: rotate(45deg);
 }
-.pay-gcc-corner .ivu-icon {
+.pay-gcc-corner .el-icon {
   position: absolute;
   right: 3px;
   bottom: 3px;
diff --git a/buyer/src/pages/payment/PayDone.vue b/buyer/src/pages/payment/PayDone.vue
index 9485c9a8..a0f8e1db 100644
--- a/buyer/src/pages/payment/PayDone.vue
+++ b/buyer/src/pages/payment/PayDone.vue
@@ -5,9 +5,9 @@
       <img src="../../assets/images/pay-success.png">
     </div>
     <div class="pay-btn">
-      <Button type="primary" @click="$router.push('/')">继续逛逛</Button>
-      <Button type="info" v-if="$route.query.orderType ==='RECHARGE'" @click="$router.push('/home/MoneyManagement')">查看余额</Button>
-      <Button type="info" v-else @click="$router.push('/home/myOrder')">查看订单</Button>
+      <el-button type="primary" @click="$router.push('/')">继续逛逛</el-button>
+      <el-button type="info" v-if="$route.query.orderType ==='RECHARGE'" @click="$router.push('/home/MoneyManagement')">查看余额</el-button>
+      <el-button type="info" v-else @click="$router.push('/home/myOrder')">查看订单</el-button>
     </div>
   </div>
 </template>
diff --git a/buyer/src/pages/payment/PayMent.vue b/buyer/src/pages/payment/PayMent.vue
index 50dceca1..5187340f 100644
--- a/buyer/src/pages/payment/PayMent.vue
+++ b/buyer/src/pages/payment/PayMent.vue
@@ -6,19 +6,11 @@
         <div class="left-tips">订单提交成功，请尽快付款！</div>
         <div class="left-tips-time">请您尽快完成支付，否则订单会被自动取消</div>
         <div class="left-tips-count-down">
-          <mv-count-down :startTime="startTime" class="count-down"
-            :endTime="endTime"
-            :endText="endText"
-            :dayTxt="'天'"
-            :hourTxt="'小时'"
-            :minutesTxt="'分钟'"
-            :secondsTxt="'秒'"
-            :isStart="isStart"></mv-count-down>
-
+          <span class="count-down">{{ countdownText }}</span>
         </div>
       </div>
       <div class="head-right">
-        <div>应付金额 <span class="price">{{ payDetail.price | unitPrice }}</span>元</div>
+        <div>应付金额 <span class="price">{{ $filters.unitPrice(payDetail.price) }}</span>元</div>
       </div>
     </div>
     <div class="wrapper-box">
@@ -35,9 +27,9 @@
         <span>微信</span>
       </div>
       <div v-if="support.includes('WALLET') && $route.query.orderType !== 'RECHARGE'" class="-box-item" @click="handlePay('WALLET')">
-        <Icon custom="icomoon icon-wallet" size="60"/>
+        <i class="icomoon icon-wallet" style="font-size: 60px"></i>
         <span>余额支付</span>
-        <span>当前剩余({{ walletValue | unitPrice('￥') }})</span>
+        <span>当前剩余({{ $filters.unitPrice(walletValue, '￥') }})</span>
       </div>
     </div>
     <BaseFooter></BaseFooter>
@@ -46,25 +38,34 @@
 <script>
 
 import {tradeDetail, pay} from '@/api/pay.js';
-import MvCountDown from 'mv-count-down'
-import {Message} from 'view-design';
+import { Message } from '@/utils/message';
 
 export default {
-  components: {
-    MvCountDown
-  },
   data () {
     return {
-      payDetail: {}, // 支付详情
-      support: [], // 支持配送方式
-      walletValue: 0, // 当前余额
-      qrcode: '', // 支付二维码
-      startTime: new Date().getTime(), // 开始时间（时间戳）
-      endTime: 0, // 完成的时间（时间戳）
-      endText: '订单已超时取消', // 倒计时完成的提示文本
-      isStart: false // 控制倒计时开始的时机（异步请求完成开启）
+      payDetail: {},
+      support: [],
+      walletValue: 0,
+      qrcode: '',
+      endTime: 0,
+      endText: '订单已超时取消',
+      isStart: false,
+      now: Date.now(),
+      countdownTimer: null,
     };
   },
+  computed: {
+    countdownText () {
+      if (!this.isStart || !this.endTime) return '';
+      const diff = this.endTime - this.now;
+      if (diff <= 0) return this.endText;
+      const days = Math.floor(diff / 86400000);
+      const hours = Math.floor((diff % 86400000) / 3600000);
+      const minutes = Math.floor((diff % 3600000) / 60000);
+      const seconds = Math.floor((diff % 60000) / 1000);
+      return `${days}天${hours}小时${minutes}分钟${seconds}秒`;
+    },
+  },
   methods: {
     // 获取订单详情
     getTradeDetail () {
@@ -118,7 +119,13 @@ export default {
   },
   mounted () {
     this.getTradeDetail();
-  }
+    this.countdownTimer = setInterval(() => {
+      this.now = Date.now();
+    }, 1000);
+  },
+  beforeUnmount () {
+    if (this.countdownTimer) clearInterval(this.countdownTimer);
+  },
 };
 </script>
 <style scoped lang="scss">
diff --git a/buyer/src/pages/payment/ThirdPay.vue b/buyer/src/pages/payment/ThirdPay.vue
index 651474ac..472d5c80 100644
--- a/buyer/src/pages/payment/ThirdPay.vue
+++ b/buyer/src/pages/payment/ThirdPay.vue
@@ -7,7 +7,7 @@
         <div class="left-tips-time">请您尽快完成支付，否则订单会被自动取消</div>
       </div>
       <div class="head-right">
-        <div>应付金额 <span class="price">{{$route.query.price | unitPrice}}</span>元</div>
+        <div>应付金额 <span class="price">{{ $filters.unitPrice($route.query.price) }}</span>元</div>
       </div>
     </div>
     <div class="content">
@@ -17,14 +17,14 @@
           <vue-qr :text="qrcode" :margin="0" colorDark="#000" colorLight="#fff" :size="200"></vue-qr>
         </div>
         <div class="intro">
-          <Icon type="md-qr-scanner" /> 请使用{{params.paymentMethod === 'ALIPAY' ? '支付宝' : '微信'}}扫码付款
+          <el-icon><Iphone /></el-icon> 请使用{{params.paymentMethod === 'ALIPAY' ? '支付宝' : '微信'}}扫码付款
         </div>
       </div>
       <div class="btn-div">
         <p class="mb_10">支付成功后自动跳转，如未跳转请点击按钮手动跳转。。。</p>
         <div>
-          <Button @click="handlePay">重新支付</Button>
-          <Button type="success" @click="$router.push('/payDone')">支付成功</Button>
+          <el-button @click="handlePay">重新支付</el-button>
+          <el-button type="success" @click="$router.push('/payDone')">支付成功</el-button>
         </div>
       </div>
       <a @click="$router.back()">选择其他支付方式></a>
@@ -33,10 +33,11 @@
   </div>
 </template>
 <script>
+import { Iphone } from '@element-plus/icons-vue';
 import vueQr from 'vue-qr';
 import { payCallback, pay } from '@/api/pay.js';
 export default {
-  components: { vueQr },
+  components: { vueQr, Iphone },
   data () {
     return {
       qrcode: '', // 二维码
diff --git a/buyer/src/pages/promotion/PointGoodsDetail.vue b/buyer/src/pages/promotion/PointGoodsDetail.vue
index c175939b..43d86f34 100644
--- a/buyer/src/pages/promotion/PointGoodsDetail.vue
+++ b/buyer/src/pages/promotion/PointGoodsDetail.vue
@@ -4,10 +4,10 @@
     <Search style="border-bottom:2px solid red;"></Search>
     <!-- <drawer></drawer> -->
     <div class="base-width cate-container">
-      <Breadcrumb>
-        <BreadcrumbItem to="/">首页</BreadcrumbItem>
-        <BreadcrumbItem>{{goodsMsg.pointsGoodsCategoryName}}</BreadcrumbItem>
-      </Breadcrumb>
+      <el-breadcrumb>
+        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>{{goodsMsg.pointsGoodsCategoryName}}</el-breadcrumb-item>
+      </el-breadcrumb>
     </div>
     <!-- 商品信息展示 -->
     <div class="item-detail-show">
@@ -15,7 +15,13 @@
       <div class="item-detail-left">
         <!-- 大图、放大镜 -->
         <div class="item-detail-big-img">
-          <pic-zoom v-if="goodsSku.thumbnail" :url="goodsSku.thumbnail" :scale="2"></pic-zoom>
+          <el-image
+            v-if="goodsSku.thumbnail"
+            :src="goodsSku.thumbnail"
+            :preview-src-list="[goodsSku.thumbnail]"
+            fit="contain"
+            style="width: 100%; height: 400px"
+          />
         </div>
         <div class="item-detail-img-row">
           <div class="item-detail-img-small">
@@ -49,7 +55,7 @@
               <p>数量</p>
             </div>
             <div class="item-select-row">
-              <InputNumber :min="1" :disabled="goodsSku.quantity === 0" v-model="count"></InputNumber>
+              <el-input-number :min="1" :disabled="goodsSku.quantity === 0" v-model="count"></el-input-number>
               <span class="inventory"> 库存{{goodsSku.quantity}}</span>
             </div>
           </div>
@@ -62,7 +68,7 @@
             </div>
           </div>
           <div class="add-buy-car">
-            <Button type="error" :loading="loading" :disabled="goodsSku.quantity === 0" @click="pointBuy">积分购买</Button>
+            <el-button type="danger" :loading="loading" :disabled="goodsSku.quantity === 0" @click="pointBuy">积分购买</el-button>
           </div>
         </div>
       </div>
@@ -73,14 +79,13 @@
       <div v-html="goodsSku.intro" class="mt_10 ml_10" v-if="goodsSku.intro"></div>
       <div v-else style="margin:20px;">暂无商品介绍</div>
     </div>
-    <Spin size="large" fix v-if="isLoading"></Spin>
+    <el-skeleton size="large" fix v-if="isLoading"></el-skeleton>
     <BaseFooter></BaseFooter>
   </div>
 </template>
 
 <script>
 import Search from '@/components/Search';
-import PicZoom from 'vue-piczoom';
 import { addCartGoods } from '@/api/cart.js';
 import { pointGoodsDetail } from '@/api/promotion';
 export default {
@@ -157,7 +162,7 @@ export default {
     }
   },
   components: {
-    Search, PicZoom
+    Search,
   }
 };
 </script>
diff --git a/buyer/src/pages/promotion/PointMall.vue b/buyer/src/pages/promotion/PointMall.vue
index 1e4f1ec1..bbc14e0b 100644
--- a/buyer/src/pages/promotion/PointMall.vue
+++ b/buyer/src/pages/promotion/PointMall.vue
@@ -4,9 +4,9 @@
     <Search></Search>
     <cateNav></cateNav>
     <h3 class="promotion-decorate">积分商品</h3>
-    <Select @on-select="selectCate" size="small" class="cate-select-con" v-model="cateId">
-      <Option v-for="(cate, index) in cateList" :value="cate.id" :key="index">{{cate.name}}</Option>
-    </Select>
+    <el-select @select="selectCate" size="small" class="cate-select-con" v-model="cateId">
+      <el-option v-for="(cate, index) in cateList" :value="cate.id" :key="index">{{cate.name}}</el-option>
+    </el-select>
     <!-- 列表 -->
     <div class="goods-list">
       <empty v-if="goodsList.length === 0" />
@@ -29,8 +29,7 @@
           <span>{{ item.goodsSku.goodsName }}</span>
         </div>
         <div class="goods-show-num">
-          已有<span>{{ item.commentNum || 0 }}</span
-          >人评价
+          已有<span>{{ item.commentNum || 0 }}</span>人评价
         </div>
         <div class="goods-show-seller">
           <span>{{ item.storeName }}</span>
@@ -38,12 +37,9 @@
       </div>
     </div>
     <div class="page-size">
-      <Page :total="total" @on-change="changePageNum"
-        @on-page-size-change="changePageSize"
-        :page-size="params.pageSize"
-        show-total
-        show-sizer>
-      </Page>
+      <el-pagination :total="total" @current-change="changePageNum"
+        @size-change="changePageSize"
+        :page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
     </div>
     <BaseFooter></BaseFooter>
   </div>
diff --git a/buyer/src/pages/promotion/seckill.vue b/buyer/src/pages/promotion/seckill.vue
index a80b84d4..8eba59b7 100644
--- a/buyer/src/pages/promotion/seckill.vue
+++ b/buyer/src/pages/promotion/seckill.vue
@@ -32,12 +32,8 @@
         </div>
         <div class="goods-show-price">
           <span>
-            <span class="seckill-price text-danger">{{
-              item.price | unitPrice("￥")
-            }}</span>
-            <span style="color: #999; text-decoration: line-through">{{
-              item.originalPrice | unitPrice("￥")
-            }}</span>
+            <span class="seckill-price text-danger">{{ $filters.unitPrice(item.price, "￥") }}</span>
+            <span style="color: #999; text-decoration: line-through">{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
           </span>
         </div>
         <div class="goods-show-detail" style="margin-bottom: 20px">
@@ -59,12 +55,15 @@
                 (item.salesNum / (item.quantity)) * 100
               )
               : 100) + "%"
-          }}</span><Progress hide-info stroke-color="#df0021" style="width: 110px" class="ml_10" :percent="item.quantity && item.quantity > 0
-      ? Math.ceil(
-        (item.salesNum / (item.quantity)) * 100
-      )
-      : 100
-    " />
+          }}</span><el-progress
+            :show-text="false"
+            color="#df0021"
+            style="width: 110px"
+            class="ml_10"
+            :percentage="item.quantity && item.quantity > 0
+              ? Math.ceil((item.salesNum / item.quantity) * 100)
+              : 100"
+          />
         </div>
         <div class="goods-show-seller">
           <span>{{ item.storeName }}</span>
@@ -88,8 +87,7 @@ export default {
       nowHour: new Date().getHours(), // 当前小时数
     };
   },
-  beforeDestroy () {
-    // 销毁前清除定时器
+  beforeUnmount () {
     clearInterval(this.interval);
   },
   watch: {
@@ -265,7 +263,7 @@ export default {
   justify-content: center;
 }
 
-.ivu-progress-success .ivu-progress-bg {
-  background-color: #111fff;
+.el-progress-bar__inner {
+  background-color: #df0021;
 }
 </style>
diff --git a/buyer/src/pages/shopEntry/FirstApply.vue b/buyer/src/pages/shopEntry/FirstApply.vue
index e06dc089..33e12ba0 100644
--- a/buyer/src/pages/shopEntry/FirstApply.vue
+++ b/buyer/src/pages/shopEntry/FirstApply.vue
@@ -1,79 +1,78 @@
 <template>
   <div class="company-msg">
-    <Form ref="firstForm" :model="form" :rules="rules" :label-width="140">
+    <el-form ref="firstForm" :model="form" :rules="rules" label-width="140px">
       <h4>基础信息</h4>
-      <FormItem prop="companyName" label="公司名称">
-        <Input
+      <el-form-item prop="companyName" label="公司名称">
+        <el-input
           type="text"
           v-model="form.companyName"
           placeholder="请填写公司信息"
         />
-      </FormItem>
-      <FormItem prop="companyAddressIdPath" label="公司所在地">
+      </el-form-item>
+      <el-form-item prop="companyAddressIdPath" label="公司所在地">
         <span>{{ form.companyAddressPath || '暂无地址' }}</span>
-        <Button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>
-      </FormItem>
-      <FormItem prop="companyAddress" label="公司详细地址">
-        <Input
+        <el-button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</el-button>
+      </el-form-item>
+      <el-form-item prop="companyAddress" label="公司详细地址">
+        <el-input
           type="text"
           v-model="form.companyAddress"
           placeholder="请填写公司详细信息"
         />
-      </FormItem>
-      <FormItem prop="employeeNum" label="员工总数">
-        <Input
+      </el-form-item>
+      <el-form-item prop="employeeNum" label="员工总数">
+        <el-input
           type="text"
           v-model="form.employeeNum"
           placeholder="请填写公司员工总数"
-          ><span slot="append">人</span>
-          </Input>
-      </FormItem>
-      <FormItem prop="companyPhone" label="公司电话">
-        <Input
+          ><template #append><span>人</span></template></el-input>
+      </el-form-item>
+      <el-form-item prop="companyPhone" label="公司电话">
+        <el-input
           type="text"
           v-model="form.companyPhone"
           placeholder="请填写公司电话"
-          ></Input>
-      </FormItem>
-      <FormItem prop="registeredCapital" label="注册资金">
-        <Input
+          ></el-input>
+      </el-form-item>
+      <el-form-item prop="registeredCapital" label="注册资金">
+        <el-input
           type="text"
           v-model="form.registeredCapital"
           placeholder="请填写注册资金"
-          ><span slot="append">万元</span></Input>
-      </FormItem>
-      <FormItem prop="linkName" label="联系人姓名">
-        <Input
+          ><template #append><span>万元</span></template></el-input>
+      </el-form-item>
+      <el-form-item prop="linkName" label="联系人姓名">
+        <el-input
           type="text"
           v-model="form.linkName"
           placeholder="请填写联系人姓名"
         />
-      </FormItem>
-      <FormItem prop="linkPhone" label="联系人电话">
-        <Input
+      </el-form-item>
+      <el-form-item prop="linkPhone" label="联系人电话">
+        <el-input
           type="text"
           v-model="form.linkPhone"
           placeholder="请填写联系人电话"
         />
-      </FormItem>
-      <FormItem prop="companyEmail" label="电子邮箱">
-        <Input
+      </el-form-item>
+      <el-form-item prop="companyEmail" label="电子邮箱">
+        <el-input
           type="text"
           v-model="form.companyEmail"
           placeholder="请填写电子邮箱"
         />
-      </FormItem>
+      </el-form-item>
 
       <h4>营业执照信息</h4>
-      <FormItem prop="licenseNum" label="营业执照号">
-        <Input
+      <el-form-item prop="licenseNum" label="营业执照号">
+        <el-input
           type="text"
           v-model="form.licenseNum"
           placeholder="请填写营业执照号"
         />
-      </FormItem>
-      <FormItem prop="scope" label="法定经营范围">
-        <Input
+      </el-form-item>
+      <el-form-item prop="scope" label="法定经营范围">
+        <el-input
           type="textarea"
           v-model="form.scope"
           maxlength="200"
@@ -81,9 +80,9 @@
           :rows="4"
           placeholder="请输入营业执照所示经营范围"
         />
-      </FormItem>
-      <FormItem prop="licencePhoto" label="营业执照电子版">
-        <Upload
+      </el-form-item>
+      <el-form-item prop="licencePhoto" label="营业执照电子版">
+        <el-upload
           ref="uploadLicence"
           :show-upload-list="false"
           :on-success="handleSuccess"
@@ -97,8 +96,8 @@
           :action="action"
           :headers="accessToken"
         >
-          <Button type="info" :loading="uploadLoading">证照上传</Button>
-        </Upload>
+          <el-button type="info" :loading="uploadLoading">证照上传</el-button>
+        </el-upload>
         <div class="describe">
           请压缩图片在2M以内，格式为gif，jpg，png，并确保文字清晰，以免上传或审核失败
         </div>
@@ -109,36 +108,30 @@
         >
           <img :src="item" width="100" alt="" />
           <div class="cover">
-            <Icon
-              type="ios-eye-outline"
-              @click.native="handleView(item)"
-            ></Icon>
-            <Icon
-              type="ios-trash-outline"
-              @click.native="handleRemove(index, 'licencePhoto')"
-            ></Icon>
+            <el-icon @click="handleView(item)"><View /></el-icon>
+            <el-icon @click="handleRemove(index, 'licencePhoto')"><Delete /></el-icon>
           </div>
         </div>
-      </FormItem>
+      </el-form-item>
 
       <h4>法人信息</h4>
-      <FormItem prop="legalName" label="法人姓名">
-        <Input
+      <el-form-item prop="legalName" label="法人姓名">
+        <el-input
           type="text"
           v-model="form.legalName"
           maxlength="20"
           placeholder="请输入法人姓名"
         />
-      </FormItem>
-      <FormItem prop="legalId" label="法人证件号">
-        <Input
+      </el-form-item>
+      <el-form-item prop="legalId" label="法人证件号">
+        <el-input
           type="text"
           v-model="form.legalId"
           placeholder="请输入法人证件号"
         />
-      </FormItem>
-      <FormItem prop="legalPhoto" label="法人证件电子版">
-        <Upload
+      </el-form-item>
+      <el-form-item prop="legalPhoto" label="法人证件电子版">
+        <el-upload
           ref="uploadLegal"
           :show-upload-list="false"
           :on-success="handleSuccess1"
@@ -152,8 +145,8 @@
           :action="action"
           :headers="accessToken"
         >
-          <Button type="info" :loading="uploadLoading1">证照上传</Button>
-        </Upload>
+          <el-button type="info" :loading="uploadLoading1">证照上传</el-button>
+        </el-upload>
         <div class="describe">
           请压缩图片在2M以内，身份证正反面两张照片，确保图片清晰无缺角
         </div>
@@ -164,38 +157,33 @@
         >
           <img :src="item" width="100" alt="" />
           <div class="cover">
-            <Icon
-              type="ios-eye-outline"
-              @click.native="handleView(item)"
-            ></Icon>
-            <Icon
-              type="ios-trash-outline"
-              @click.native="handleRemove(index, 'legalPhoto')"
-            ></Icon>
+            <el-icon @click="handleView(item)"><View /></el-icon>
+            <el-icon @click="handleRemove(index, 'legalPhoto')"><Delete /></el-icon>
           </div>
         </div>
-      </FormItem>
-      <FormItem>
-        <Button type="primary" :loading="loading" @click="next"
-          >填写财务资质信息</Button
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :loading="loading" @click="next"
+          >填写财务资质信息</el-button
         >
-      </FormItem>
-    </Form>
-    <Modal title="View Image" v-model="visible">
+      </el-form-item>
+    </el-form>
+    <el-dialog title="View Image" v-model="visible">
       <img :src="previewPicture" v-if="visible" style="width: 100%" />
-    </Modal>
+    </el-dialog>
 
     <multipleMap ref="map" @callback="getAddress" />
   </div>
 </template>
 <script>
+import { Delete, View } from '@element-plus/icons-vue';
 import { applyFirst } from '@/api/shopentry';
 import * as RegExp from '@/plugins/RegExp.js';
 import multipleMap from "@/components/map/multiple-map";
 import storage from '@/plugins/storage';
 import { commonUrl } from '@/plugins/request.js';
 export default {
-  components: { multipleMap },
+  components: { multipleMap, View, Delete },
   props: {
     content: {
       default: {},
@@ -262,11 +250,11 @@ 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.form, 'companyAddressIdPath', ids)
-        this.$set(this.form, 'companyAddressPath', paths)
+        this.form['companyAddressIdPath'] = ids
+        this.form['companyAddressPath'] = paths
       }else{
-        this.$set(this.form, 'companyAddressIdPath', val.data.addrId)
-        this.$set(this.form, 'companyAddressPath', val.data.addr)
+        this.form['companyAddressIdPath'] = val.data.addrId
+        this.form['companyAddressPath'] = val.data.addr
       }
     },
 
@@ -376,7 +364,7 @@ h4 {
   line-height: 40px;
   text-align: left;
 }
-.ivu-input-wrapper {
+.el-input {
   width: 300px;
 }
 .img-list {
diff --git a/buyer/src/pages/shopEntry/SecondApply.vue b/buyer/src/pages/shopEntry/SecondApply.vue
index 5015266c..aa4bdb5e 100644
--- a/buyer/src/pages/shopEntry/SecondApply.vue
+++ b/buyer/src/pages/shopEntry/SecondApply.vue
@@ -1,43 +1,43 @@
 <template>
   <div class="photo-msg">
-    <Form ref="secondForm" :model="form" :rules="rules" :label-width="140">
+    <el-form ref="secondForm" :model="form" :rules="rules" label-width="140px">
       <h4>基础信息</h4>
-      <FormItem prop="settlementBankAccountName" label="银行开户名">
-        <Input
+      <el-form-item prop="settlementBankAccountName" label="银行开户名">
+        <el-input
           type="text"
           v-model="form.settlementBankAccountName"
           placeholder="请填写银行开户名称"
         />
-      </FormItem>
-      <FormItem prop="settlementBankAccountNum" label="银行账号">
-        <Input
+      </el-form-item>
+      <el-form-item prop="settlementBankAccountNum" label="银行账号">
+        <el-input
           type="text"
           v-model="form.settlementBankAccountNum"
           placeholder="请填写银行账号"
         />
-      </FormItem>
-      <FormItem prop="settlementBankBranchName" label="开户银行支行名称">
-        <Input
+      </el-form-item>
+      <el-form-item prop="settlementBankBranchName" label="开户银行支行名称">
+        <el-input
           type="text"
           v-model="form.settlementBankBranchName"
           placeholder="请填写开户银行支行名称"
         />
-      </FormItem>
-      <FormItem prop="settlementBankJointName" label="支行联行号">
-        <Input
+      </el-form-item>
+      <el-form-item prop="settlementBankJointName" label="支行联行号">
+        <el-input
           type="text"
           v-model="form.settlementBankJointName"
           placeholder="请填写支行联行号"
         />
-      </FormItem>
+      </el-form-item>
 
-      <FormItem>
-        <Button @click="$emit('change', 0)">返回</Button>
-        <Button type="primary" :loading="loading" @click="next"
-          >填写其他信息</Button
+      <el-form-item>
+        <el-button @click="$emit('change', 0)">返回</el-button>
+        <el-button type="primary" :loading="loading" @click="next"
+          >填写其他信息</el-button
         >
-      </FormItem>
-    </Form>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 <script>
@@ -110,7 +110,7 @@ h4 {
   line-height: 40px;
   text-align: left;
 }
-.ivu-input-wrapper {
+.el-input {
   width: 300px;
 }
 </style>
diff --git a/buyer/src/pages/shopEntry/ShopEntry.vue b/buyer/src/pages/shopEntry/ShopEntry.vue
index 5d215fb6..3cfbd159 100644
--- a/buyer/src/pages/shopEntry/ShopEntry.vue
+++ b/buyer/src/pages/shopEntry/ShopEntry.vue
@@ -3,12 +3,12 @@
     <div style="height: 20px"></div>
     <div class="content">
       <h1>店铺入驻</h1>
-      <Steps :current="currentIndex" class="margin">
-        <Step title="企业资质信息"></Step>
-        <Step title="财务资质信息"></Step>
-        <Step title="其他信息"></Step>
-        <Step title="提交审核"></Step>
-      </Steps>
+      <el-steps :current="currentIndex" class="margin">
+        <el-step title="企业资质信息"></el-step>
+        <el-step title="财务资质信息"></el-step>
+        <el-step title="其他信息"></el-step>
+        <el-step title="提交审核"></el-step>
+      </el-steps>
       <first-apply v-if="currentIndex == 0 && dataReview" :content="firstData" @change="nextPage"></first-apply>
 
       <second-apply v-if="currentIndex == 1 && dataReview" :content="secondData" @change="nextPage"></second-apply>
@@ -21,24 +21,24 @@
         <span v-if="storeDisable == 'CLOSED'">店铺已关闭，重申请联系管理员</span>
         <span v-if="storeDisable == 'REFUSED'">审核未通过,请修改资质信息，如有疑问请联系管理员</span>
       </div>
-      <Button v-if="currentIndex === 3" @click="$router.push('/')">返回</Button>
+      <el-button v-if="currentIndex === 3" @click="$router.push('/')">返回</el-button>
       &nbsp;
-      <Button type="primary" @click='currentIndex = 0'
-        v-if="storeDisable === 'REFUSED' && currentIndex === 3">重新申请</Button>
+      <el-button type="primary" @click='currentIndex = 0'
+        v-if="storeDisable === 'REFUSED' && currentIndex === 3">重新申请</el-button>
     </div>
 
-    <Modal title="店铺入驻协议" v-model="showAgreement" width="1200" :closable="false" :mask-closable="false">
+    <el-dialog title="店铺入驻协议" v-model="showAgreement" width="1200" :closable="false" :close-on-click-modal="false">
       <Scroll :on-reach-bottom="handleReachBottom">
         <div class="agreeent-con" v-html="agreementCon"></div>
       </Scroll>
 
-      <div slot="footer" style="text-align: center">
+      <template #footer><div style="text-align: center">
         <p>
-          <Checkbox v-model="checked">我已同意以上协议</Checkbox>
+          <el-checkbox v-model="checked">我已同意以上协议</el-checkbox>
         </p>
-        <Button type="primary" :disabled="!checked" class="margin" @click="showAgreement = false">同意协议填写资质信息</Button>
-      </div>
-    </Modal>
+        <el-button type="primary" :disabled="!checked" class="margin" @click="showAgreement = false">同意协议填写资质信息</el-button>
+      </div></template>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -182,7 +182,7 @@ export default {
 }
 .agreeent-con {
   max-height: 500px;
-  ::v-deep img{
+  :deep img{
     max-width: 100%;
 
   }
diff --git a/buyer/src/pages/shopEntry/ThirdApply.vue b/buyer/src/pages/shopEntry/ThirdApply.vue
index b88f6a60..9b9c7839 100644
--- a/buyer/src/pages/shopEntry/ThirdApply.vue
+++ b/buyer/src/pages/shopEntry/ThirdApply.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="person-msg">
-    <Form ref="thirdForm" :model="form" :rules="rules" :label-width="140">
+    <el-form ref="thirdForm" :model="form" :rules="rules" label-width="140px">
       <h4>基础信息</h4>
-      <FormItem prop="storeName" label="店铺名称">
-        <Input
+      <el-form-item prop="storeName" label="店铺名称">
+        <el-input
           type="text"
           v-model="form.storeName"
           placeholder="请填写店铺名称"
         />
-      </FormItem>
+      </el-form-item>
 
-      <FormItem prop="storeLogo" label="店铺logo">
-        <Upload
+      <el-form-item prop="storeLogo" label="店铺logo">
+        <el-upload
           ref="uploadLogo"
           :show-upload-list="false"
           :on-success="handleSuccess"
@@ -25,8 +25,8 @@
           :action="action"
           :headers="accessToken"
         >
-          <Button type="info" :loading="uploadLoading">上传logo</Button>
-        </Upload>
+          <el-button type="info" :loading="uploadLoading">上传logo</el-button>
+        </el-upload>
         <div class="describe">请压缩图片在2M以内，格式为gif，jpg，png</div>
         <div
           class="img-list"
@@ -35,45 +35,38 @@
         >
           <img :src="item" width="100" height="" alt="" />
           <div class="cover">
-            <Icon
-              type="ios-eye-outline"
-              @click.native="handleView(item)"
-            ></Icon>
-            <Icon
-              type="ios-trash-outline"
-              @click.native="handleRemove(index, 'storeLogo')"
-            ></Icon>
+            <el-icon @click="handleView(item)"><View /></el-icon>
+            <el-icon @click="handleRemove(index, 'storeLogo')"><Delete /></el-icon>
           </div>
         </div>
-      </FormItem>
-      <FormItem prop="goodsManagementCategory" label="店铺经营类目">
-        <Select
+      </el-form-item>
+      <el-form-item prop="goodsManagementCategory" label="店铺经营类目">
+        <el-select
           v-model="form.goodsManagementCategory"
           multiple
           style="width: 300px"
         >
-          <Option
-            v-for="item in categoryList"
+          <el-option             v-for="item in categoryList"
             :value="item.id"
             :key="item.id"
-            >{{ item.name }}</Option
+            >{{ item.name }}</el-option
           >
-        </Select>
-      </FormItem>
+        </el-select>
+      </el-form-item>
 
-      <FormItem prop="storeAddressIdPath" label="店铺所在地">
+      <el-form-item prop="storeAddressIdPath" label="店铺所在地">
         <span>{{ form.storeAddressPath || '暂无地址' }}</span>
-        <Button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>
-      </FormItem>
-      <FormItem prop="storeAddressDetail" label="店铺详细地址">
-        <Input
+        <el-button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</el-button>
+      </el-form-item>
+      <el-form-item prop="storeAddressDetail" label="店铺详细地址">
+        <el-input
           type="text"
           v-model="form.storeAddressDetail"
           placeholder="请填写店铺详细地址"
         />
-      </FormItem>
-      <FormItem prop="storeDesc" label="店铺简介">
-        <Input
+      </el-form-item>
+      <el-form-item prop="storeDesc" label="店铺简介">
+        <el-input
           type="textarea"
           v-model="form.storeDesc"
           maxlength="200"
@@ -81,22 +74,23 @@
           :rows="4"
           placeholder="请输入店铺简介"
         />
-      </FormItem>
+      </el-form-item>
 
-      <FormItem>
-        <Button @click="$emit('change', 1)">返回</Button>
-        <Button type="primary" :loading="loading" @click="next"
-          >提交平台审核</Button
+      <el-form-item>
+        <el-button @click="$emit('change', 1)">返回</el-button>
+        <el-button type="primary" :loading="loading" @click="next"
+          >提交平台审核</el-button
         >
-      </FormItem>
-    </Form>
-    <Modal title="View Image" v-model="visible">
+      </el-form-item>
+    </el-form>
+    <el-dialog title="View Image" v-model="visible">
       <img :src="previewPicture" v-if="visible" style="width: 100%" />
-    </Modal>
+    </el-dialog>
     <multipleMap ref="map" @callback="getAddress" />
   </div>
 </template>
 <script>
+import { Delete, View } from '@element-plus/icons-vue';
 import { applyThird } from '@/api/shopentry';
 import { getCategory } from '@/api/goods';
 
@@ -114,7 +108,7 @@ export default {
       type: Object
     }
   },
-  components: { multipleMap },
+  components: { multipleMap, View, Delete },
   data () {
     return {
       loading: false, // 加载状态
@@ -211,17 +205,15 @@ 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.form, "storeAddressPath", paths);
-        this.$set(this.form, "storeAddressIdPath", ids);
+        this.form["storeAddressPath"] = paths;
+        this.form["storeAddressIdPath"] = ids;
         this.form.storeCenter = val.data[val.data.length - 1].center
       }else{
-        this.$set(this.form, "storeAddressPath", val.data.addr);
-        this.$set(this.form, "storeAddressIdPath", val.data.addrId);
-        this.$set(
-          this.form,
-          'storeCenter',
-          val.data.position.lng + ',' + val.data.position.lat
-        );
+        this.form["storeAddressPath"] = val.data.addr;
+        this.form["storeAddressIdPath"] = val.data.addrId;
+        
+          this.form['storeCenter'] = val.data.position.lng + ',' + val.data.position.lat
+        ;
       }
     },
     // 获取商品分类
@@ -264,7 +256,7 @@ h4 {
   line-height: 40px;
   text-align: left;
 }
-.ivu-input-wrapper {
+.el-input {
   width: 300px;
 }
 .img-list {
diff --git a/buyer/src/pages/user/Home.vue b/buyer/src/pages/user/Home.vue
index 4ff905f9..ba7c3d3e 100644
--- a/buyer/src/pages/user/Home.vue
+++ b/buyer/src/pages/user/Home.vue
@@ -3,15 +3,13 @@
     <BaseHeader></BaseHeader>
 
     <div class="container width_1200">
-      <Layout class="layoutAll">
-        <Sider class="side-bar" ref="side" :collapsed-width="78">
-          <Menu
+      <div class="layoutAll">
+        <el-aside class="side-bar" width="200px">
+          <el-menu
             class="side-menu"
-            theme="light"
-            width="auto"
-            :active-name="$route.name"
-            :open-names="['订单中心', '会员中心']"
-            @on-select="onSelect"
+            :default-active="$route.name"
+            :default-openeds="['订单中心', '会员中心']"
+            @select="onSelect"
           >
             <div class="user-icon">
               <div class="user-img">
@@ -21,68 +19,60 @@
                   v-if="userInfo.face"
                   alt
                 />
-                <Avatar icon="ios-person" class="mb_10" v-else size="96" />
+                <el-avatar v-else :size="96" class="mb_10"><el-icon><User /></el-icon></el-avatar>
               </div>
               <p>{{ userInfo.nickName }}</p>
             </div>
 
-            <!--   循环导航栏       -->
-            <Submenu
-              v-for="(menu, index) in menuList"
-              :key="index"
-              :name="menu.title"
-            >
-              <template slot="title" v-if="menu.display">
-                <Icon type="location"></Icon>
-                <span>{{ menu.title }}</span>
-              </template>
-              <MenuItem
-                v-for="(chlidren, i) in menu.menus"
-                :key="i"
-                :name="chlidren.path"
-                >{{ chlidren.title }}</MenuItem
-              >
-            </Submenu>
-          </Menu>
-        </Sider>
-        <Layout class="layout ml_10">
-          <Content class="content">
-            <transition mode="out-in">
-              <router-view></router-view>
-            </transition>
-          </Content>
-        </Layout>
-      </Layout>
+            <template v-for="(menu, index) in menuList" :key="index">
+              <el-sub-menu v-if="menu.display" :index="menu.title">
+                <template #title>
+                  <el-icon><Location /></el-icon>
+                  <span>{{ menu.title }}</span>
+                </template>
+                <el-menu-item
+                  v-for="(chlidren, i) in menu.menus"
+                  :key="i"
+                  :index="chlidren.path"
+                >{{ chlidren.title }}</el-menu-item>
+              </el-sub-menu>
+            </template>
+          </el-menu>
+        </el-aside>
+        <el-main class="content ml_10">
+          <transition mode="out-in">
+            <router-view></router-view>
+          </transition>
+        </el-main>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { Location, User } from '@element-plus/icons-vue';
 import menuList from "./menu";
 import Storage from "@/plugins/storage.js";
 
 export default {
+  components: { Location, User },
   name: "Home",
   data() {
     return {
-      menuList, // 会员中心左侧列表
+      menuList,
     };
   },
   computed: {
     userInfo() {
-      // 用户信息
       if (Storage.getItem("userInfo")) {
         return JSON.parse(Storage.getItem("userInfo"));
-      } else {
-        return {};
       }
+      return {};
     },
   },
-
   methods: {
-    // 每次点击左侧bar的callback
     onSelect(name) {
-      this.$router.push({ name: name });
+      this.$router.push({ name });
     },
   },
 };
@@ -110,6 +100,7 @@ export default {
 }
 
 .layoutAll {
+  display: flex;
   min-height: 1200px;
   @include background_color($light_background_color);
 }
@@ -141,7 +132,6 @@ export default {
 
 .layout-footer-center {
   padding: 0px 15px;
-
   padding-bottom: 15px;
   text-align: center;
 }
diff --git a/buyer/src/plugins/element.js b/buyer/src/plugins/element.js
new file mode 100644
index 00000000..a167a64e
--- /dev/null
+++ b/buyer/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 "@/assets/styles/element.scss";
+
+export function setupElementPlus(app) {
+  app.use(ElementPlus, {
+    locale: zhCn,
+    size: "default",
+  });
+}
diff --git a/buyer/src/plugins/request.js b/buyer/src/plugins/request.js
index 0fe57a84..898cfdc1 100644
--- a/buyer/src/plugins/request.js
+++ b/buyer/src/plugins/request.js
@@ -1,234 +1,214 @@
-import axios from 'axios';
-import https from 'https';
-import { Message, Spin, Modal } from 'view-design';
-import Storage from './storage';
-import router from '../router/index.js';
-import store from '../vuex/store';
-import { handleRefreshToken } from '@/api/index';
-import { v4 as uuidv4} from 'uuid';
+import axios from "axios";
+import { ElLoading } from "element-plus";
+import { Message, Modal } from "@/utils/message";
+import Storage from "./storage";
+import { router } from "../router/index.js";
+import store from "../vuex/store";
+import { handleRefreshToken } from "@/api/index";
+import { v4 as uuidv4 } from "uuid";
+
+const qs = require("qs");
 
-const qs = require('qs');
-// api地址
 export const buyerUrl =
-  process.env.NODE_ENV === 'development'
+  process.env.NODE_ENV === "development"
     ? BASE.API_DEV.buyer
     : BASE.API_PROD.buyer;
 export const commonUrl =
-  process.env.NODE_ENV === 'development'
+  process.env.NODE_ENV === "development"
     ? BASE.API_DEV.common
     : BASE.API_PROD.common;
 export const managerUrl =
-  process.env.NODE_ENV === 'development'
+  process.env.NODE_ENV === "development"
     ? BASE.API_DEV.manager
     : BASE.API_PROD.manager;
 export const sellerUrl =
-  process.env.NODE_ENV === 'development'
+  process.env.NODE_ENV === "development"
     ? BASE.API_DEV.seller
     : BASE.API_PROD.seller;
-// 创建axios实例
-var isRefreshToken = 0;
+
+let isRefreshToken = 0;
 const refreshToken = getTokenDebounce();
+
 const service = axios.create({
-  timeout: 10000, // 请求超时时间
-  baseURL: buyerUrl, // API
-  httpsAgent: new https.Agent({
-    rejectUnauthorized: false
-  }),
-  paramsSerializer: params =>
+  timeout: 10000,
+  baseURL: buyerUrl,
+  paramsSerializer: (params) =>
     qs.stringify(params, {
-      arrayFormat: 'repeat'
-    })
+      arrayFormat: "repeat",
+    }),
 });
 
-// request拦截器
 service.interceptors.request.use(
-  config => {
+  (config) => {
     const { loading } = config;
-    // 如果是put/post请求，用qs.stringify序列化参数
-    const isPutPost = config.method === 'put' || config.method === 'post';
-    const isJson = config.headers['Content-Type'] === 'application/json';
-    const isFile = config.headers['Content-Type'] === 'multipart/form-data';
+    const isPutPost = config.method === "put" || config.method === "post";
+    const isJson = config.headers["Content-Type"] === "application/json";
+    const isFile = config.headers["Content-Type"] === "multipart/form-data";
     if (isPutPost && isJson) {
       config.data = JSON.stringify(config.data);
     }
     if (isPutPost && !isFile && !isJson) {
       config.data = qs.stringify(config.data, {
-        arrayFormat: 'repeat'
+        arrayFormat: "repeat",
       });
     }
-    /** 配置全屏加载 */
-    if (process.client && loading !== false) {
-      config.loading = Spin.show();
+
+    if (typeof window !== "undefined" && loading !== false) {
+      config.loading = ElLoading.service({ fullscreen: true });
     }
 
-    let uuid = Storage.getItem('uuid');
+    let uuid = Storage.getItem("uuid");
     if (!uuid) {
       uuid = uuidv4();
-      Storage.setItem('uuid', uuid);
+      Storage.setItem("uuid", uuid);
     }
-    config.headers['uuid'] = uuid;
+    config.headers["uuid"] = uuid;
 
-    // 获取访问Token
-    let accessToken = Storage.getItem('accessToken');
+    const accessToken = Storage.getItem("accessToken");
     if (accessToken && config.needToken) {
-      config.headers['accessToken'] = accessToken;
-      // 解析当前token时间
-      let jwtData = JSON.parse(
-        decodeURIComponent(escape(window.atob(accessToken.split('.')[1].replace(/-/g, '+').replace(/_/g, '/'))))
+      config.headers["accessToken"] = accessToken;
+      const jwtData = JSON.parse(
+        decodeURIComponent(
+          escape(
+            window
+              .atob(accessToken.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"))
+          )
+        )
       );
       if (jwtData.exp < Math.round(new Date() / 1000)) {
-        refresh(config)
+        refresh(config);
       }
     }
 
     return config;
   },
-  error => {
-    Promise.reject(error);
-  }
+  (error) => Promise.reject(error)
 );
 
 async function refresh(error) {
   const getTokenRes = await refreshToken();
-  if (getTokenRes === 'success') {
-    // 刷新token
+  if (getTokenRes === "success") {
     if (isRefreshToken === 1) {
-      error.response.config.headers.accessToken = Storage.getItem(
-        'accessToken'
-      );
+      error.response.config.headers.accessToken = Storage.getItem("accessToken");
       return service(error.response.config);
-    } else {
-      router.go(0);
     }
+    router.go(0);
   } else {
-    Storage.removeItem('accessToken');
-    Storage.removeItem('refreshToken');
-    Storage.removeItem('userInfo');
-    Storage.setItem('cartNum', 0);
-    store.commit('SET_CARTNUM', 0);
+    Storage.removeItem("accessToken");
+    Storage.removeItem("refreshToken");
+    Storage.removeItem("userInfo");
+    Storage.setItem("cartNum", 0);
+    store.commit("SET_CARTNUM", 0);
+    const currentRoute = router.currentRoute.value;
     Modal.confirm({
-      title: '请登录',
-      content: '<p>请登录后执行此操作</p>',
-      okText: '立即登录',
-      cancelText: '继续浏览',
+      title: "请登录",
+      content: "请登录后执行此操作",
+      okText: "立即登录",
+      cancelText: "继续浏览",
       onOk: () => {
         router.push({
-          path: '/login',
+          path: "/login",
           query: {
-            rePath: router.history.current.path,
-            query: JSON.stringify(router.history.current.query)
-          }
+            rePath: currentRoute.path,
+            query: JSON.stringify(currentRoute.query),
+          },
         });
       },
       onCancel: () => {
-        // router.go(0)
         router.push("/");
         Modal.remove();
-      }
+      },
     });
   }
 }
 
-// respone拦截器
 service.interceptors.response.use(
-  async response => {
+  async (response) => {
     await closeLoading(response);
-
     return response.data;
   },
-  async error => {
-    if (process.server) return Promise.reject(error);
+  async (error) => {
+    if (typeof window === "undefined") return Promise.reject(error);
     await closeLoading(error);
     const errorResponse = error.response || {};
     const errorData = errorResponse.data || {};
 
-    if (errorResponse.status === 401 || errorResponse.status === 403 || error.response.data.code === 20004) {
+    if (
+      errorResponse.status === 401 ||
+      errorResponse.status === 403 ||
+      error.response?.data?.code === 20004
+    ) {
       isRefreshToken++;
-
       if (isRefreshToken === 1) {
-        refresh(error)
+        refresh(error);
         isRefreshToken = 0;
       }
     } else if (errorResponse.status === 404) {
-      // 避免刷新token时也提示报错信息
-    } else {
-      if (error.message) {
-        let _message =
-          error.code === 'ECONNABORTED'
-            ? '连接超时，请稍候再试！'
-            : '网络错误，请稍后再试！';
-        Message.error(errorData.message || _message);
-      }
+      // skip
+    } else if (error.message) {
+      const _message =
+        error.code === "ECONNABORTED"
+          ? "连接超时，请稍候再试！"
+          : "网络错误，请稍后再试！";
+      Message.error(errorData.message || _message);
     }
     return Promise.reject(errorData);
   }
 );
 
-/**
- * 关闭全局加载
- * @param target
- */
-const closeLoading = target => {
+const closeLoading = (target) => {
   if (!target.config || !target.config.loading) return true;
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     setTimeout(() => {
-      target.config.loading.hide();
+      target.config.loading.close();
       resolve();
     }, 200);
   });
 };
 
 export const Method = {
-  GET: 'get',
-  POST: 'post',
-  PUT: 'put',
-  DELETE: 'delete'
+  GET: "get",
+  POST: "post",
+  PUT: "put",
+  DELETE: "delete",
 };
 
-export default function request (options) {
+export default function request(options) {
   return service(options);
 }
-// 防抖闭包来一波
-function getTokenDebounce () {
+
+function getTokenDebounce() {
   let lock = false;
   let success = false;
   return function () {
     if (!lock) {
       lock = true;
-      let oldRefreshToken = Storage.getItem('refreshToken');
+      const oldRefreshToken = Storage.getItem("refreshToken");
       handleRefreshToken(oldRefreshToken)
-        .then(res => {
+        .then((res) => {
           if (res.success) {
-            let { accessToken, refreshToken } = res.result;
-            Storage.setItem('accessToken', accessToken);
-            Storage.setItem('refreshToken', refreshToken);
-
+            const { accessToken, refreshToken: newRefreshToken } = res.result;
+            Storage.setItem("accessToken", accessToken);
+            Storage.setItem("refreshToken", newRefreshToken);
             success = true;
             lock = false;
           } else {
             success = false;
             lock = false;
-            // router.push('/login')
           }
         })
-        .catch(err => {
-          console.log(err);
+        .catch(() => {
           success = false;
           lock = false;
         });
     }
-    return new Promise(resolve => {
-      // 一直看lock,直到请求失败或者成功
+    return new Promise((resolve) => {
       const timer = setInterval(() => {
         if (!lock) {
           clearInterval(timer);
-          if (success) {
-            resolve('success');
-          } else {
-            resolve('fail');
-          }
+          resolve(success ? "success" : "fail");
         }
-      }, 500); // 轮询时间间隔
+      }, 500);
     });
   };
 }
diff --git a/buyer/src/router/index.js b/buyer/src/router/index.js
index 0cc27969..3df9bbb2 100644
--- a/buyer/src/router/index.js
+++ b/buyer/src/router/index.js
@@ -1,180 +1,126 @@
-import Vue from "vue";
-import Router from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
 import Index from "@/pages/Index";
-const Login = (resolve) => require(["@/pages/Login"], resolve);
-const SignUp = (resolve) => require(["@/pages/SignUp"], resolve);
-const ForgetPassword = (resolve) =>
-  require(["@/pages/ForgetPassword"], resolve);
-const GoodsList = (resolve) => require(["@/pages/GoodsList"], resolve);
-const GoodsDetail = (resolve) => require(["@/pages/GoodsDetail"], resolve);
-const PointGoodsDetail = (resolve) =>
-  require(["@/pages/promotion/PointGoodsDetail"], resolve);
-const ShoppingCart = (resolve) => require(["@/pages/ShoppingCart"], resolve);
-const Cart = (resolve) => require(["@/pages/Cart"], resolve);
-const Pay = (resolve) => require(["@/pages/payment/Pay"], resolve);
-const PayDone = (resolve) => require(["@/pages/payment/PayDone"], resolve);
-const PayMent = (resolve) => require(["@/pages/payment/PayMent"], resolve);
-const ThirdPay = (resolve) => require(["@/pages/payment/ThirdPay"], resolve);
-const Coupon = (resolve) => require(["@/pages/CouponCenter"], resolve);
-const seckill = (resolve) => require(["@/pages/promotion/seckill"], resolve);
-const article = (resolve) => require(["@/pages/article/index"], resolve);
-const articleDetail = (resolve) => require(["@/pages/article/detail"], resolve);
-const PointMall = (resolve) =>
-  require(["@/pages/promotion/PointMall"], resolve);
 
-/*
- * 会员中心
- * 订单列表
- */
-const MyOrder = (resolve) =>
-  require([`@/pages/home/orderCenter/MyOrder`], resolve);
-const OrderDetail = (resolve) =>
-  require([`@/pages/home/orderCenter/OrderDetail`], resolve);
-const MyAddress = (resolve) =>
-  require(["@/pages/home/orderCenter/MyAddress"], resolve);
-const AddAddress = (resolve) =>
-  require(["@/pages/home/orderCenter/AddAddress"], resolve);
-const Complain = (resolve) =>
-  require(["@/pages/home/orderCenter/Complain"], resolve);
-const AfterSale = (resolve) =>
-  require(["@/pages/home/orderCenter/AfterSale"], resolve);
-const AfterSaleDetail = (resolve) =>
-  require(["@/pages/home/orderCenter/AfterSaleDetail"], resolve);
-const ApplyAfterSale = (resolve) =>
-  require(["@/pages/home/orderCenter/ApplyAfterSale"], resolve);
+const Login = () => import("@/pages/Login");
+const SignUp = () => import("@/pages/SignUp");
+const ForgetPassword = () => import("@/pages/ForgetPassword");
+const GoodsList = () => import("@/pages/GoodsList");
+const GoodsDetail = () => import("@/pages/GoodsDetail");
+const PointGoodsDetail = () => import("@/pages/promotion/PointGoodsDetail");
+const ShoppingCart = () => import("@/pages/ShoppingCart");
+const Cart = () => import("@/pages/Cart");
+const Pay = () => import("@/pages/payment/Pay");
+const PayDone = () => import("@/pages/payment/PayDone");
+const PayMent = () => import("@/pages/payment/PayMent");
+const ThirdPay = () => import("@/pages/payment/ThirdPay");
+const Coupon = () => import("@/pages/CouponCenter");
+const seckill = () => import("@/pages/promotion/seckill");
+const article = () => import("@/pages/article/index");
+const articleDetail = () => import("@/pages/article/detail");
+const PointMall = () => import("@/pages/promotion/PointMall");
 
-/*
- * 会员中心
- */
-const Profile = (resolve) =>
-  require(["@/pages/home/memberCenter/Profile"], resolve);
-const AccountSafe = (resolve) =>
-  require(["@/pages/home/memberCenter/AccountSafe"], resolve);
-const ModifyPwd = (resolve) =>
-  require(["@/pages/home/memberCenter/ModifyPwd"], resolve);
-const Favorites = (resolve) =>
-  require(["@/pages/home/memberCenter/Favorites"], resolve);
-const Distribution = (resolve) =>
-  require(["@/pages/home/memberCenter/Distribution"], resolve);
-const CommentList = (resolve) =>
-  require(["@/pages/home/memberCenter/CommentList"], resolve); // 评价列表
-const AddEval = (resolve) =>
-  require(["@/pages/home/memberCenter/evaluation/AddEval"], resolve); // 添加评价
-const EvalDetail = (resolve) =>
-  require(["@/pages/home/memberCenter/evaluation/EvalDetail"], resolve);
-const ComplainList = (resolve) =>
-  require(["@/pages/home/memberCenter/ComplainList"], resolve);
-const ComplainDetail = (resolve) =>
-  require(["@/pages/home/memberCenter/ComplainDetail"], resolve);
-const Point = (resolve) =>
-  require(["@/pages/home/memberCenter/Point"], resolve);
-const MemberGrade = (resolve) =>
-  require(["@/pages/home/memberCenter/MemberGrade"], resolve);
-const MsgList = (resolve) =>
-  require(["@/pages/home/memberCenter/memberMsg/MsgList"], resolve);
-const MsgDetail = (resolve) =>
-  require(["@/pages/home/memberCenter/memberMsg/MsgDetail"], resolve);
+const MyOrder = () => import("@/pages/home/orderCenter/MyOrder");
+const OrderDetail = () => import("@/pages/home/orderCenter/OrderDetail");
+const MyAddress = () => import("@/pages/home/orderCenter/MyAddress");
+const AddAddress = () => import("@/pages/home/orderCenter/AddAddress");
+const Complain = () => import("@/pages/home/orderCenter/Complain");
+const AfterSale = () => import("@/pages/home/orderCenter/AfterSale");
+const AfterSaleDetail = () => import("@/pages/home/orderCenter/AfterSaleDetail");
+const ApplyAfterSale = () => import("@/pages/home/orderCenter/ApplyAfterSale");
 
-/*
- * 会员中心（我的优惠券、我的余额等）
- */
-const Coupons = (resolve) =>
-  require(["@/pages/home/userCenter/Coupons"], resolve);
-const MyTracks = (resolve) =>
-  require(["@/pages/home/userCenter/MyTracks"], resolve);
-const MoneyManagement = (resolve) =>
-  require(["@/pages/home/userCenter/MoneyManagement"], resolve);
-const MyGiftCards = (resolve) =>
-  require(["@/pages/home/userCenter/MyGiftCards"], resolve);
+const Profile = () => import("@/pages/home/memberCenter/Profile");
+const AccountSafe = () => import("@/pages/home/memberCenter/AccountSafe");
+const ModifyPwd = () => import("@/pages/home/memberCenter/ModifyPwd");
+const Favorites = () => import("@/pages/home/memberCenter/Favorites");
+const Distribution = () => import("@/pages/home/memberCenter/Distribution");
+const CommentList = () => import("@/pages/home/memberCenter/CommentList");
+const AddEval = () => import("@/pages/home/memberCenter/evaluation/AddEval");
+const EvalDetail = () => import("@/pages/home/memberCenter/evaluation/EvalDetail");
+const ComplainList = () => import("@/pages/home/memberCenter/ComplainList");
+const ComplainDetail = () => import("@/pages/home/memberCenter/ComplainDetail");
+const Point = () => import("@/pages/home/memberCenter/Point");
+const MemberGrade = () => import("@/pages/home/memberCenter/MemberGrade");
+const MsgList = () => import("@/pages/home/memberCenter/memberMsg/MsgList");
+const MsgDetail = () => import("@/pages/home/memberCenter/memberMsg/MsgDetail");
 
-const Home = (resolve) => require(["@/pages/user/Home"], resolve);
+const Coupons = () => import("@/pages/home/userCenter/Coupons");
+const MyTracks = () => import("@/pages/home/userCenter/MyTracks");
+const MoneyManagement = () => import("@/pages/home/userCenter/MoneyManagement");
+const MyGiftCards = () => import("@/pages/home/userCenter/MyGiftCards");
 
-const Merchant = (resolve) => require(["@/pages/Merchant"], resolve);
-const UserMain = (resolve) => require(["@/pages/home/Main"], resolve);
-const topic = (resolve) => require(["@/pages/Topic"], resolve);
-/**
- * 店铺入驻
- */
-const ShopEntry = (resolve) =>
-  require(["@/pages/shopEntry/ShopEntry"], resolve);
+const Home = () => import("@/pages/user/Home");
+const Merchant = () => import("@/pages/Merchant");
+const UserMain = () => import("@/pages/home/Main");
+const topic = () => import("@/pages/Topic");
+const ShopEntry = () => import("@/pages/shopEntry/ShopEntry");
 
-Vue.use(Router);
+const { title } = require("@/config");
 
-/**
- * 解决重复点击菜单会控制台报错bug
- */
- const routerPush = Router.prototype.push
- Router.prototype.push = function push(location) {
-   return routerPush.call(this, location).catch(error=> error)
- }
+NProgress.configure({ showSpinner: false });
 
-export default new Router({
-  mode: "history",
+export const router = createRouter({
+  history: createWebHistory(),
   routes: [
     {
-      path: "/", // 首页
+      path: "/",
       name: "Index",
       component: Index,
     },
     {
-      path: "/topic", // 首页
+      path: "/topic",
       name: "topic",
       component: topic,
     },
     {
-      path: "/login", // 登陆
+      path: "/login",
       name: "login",
       component: Login,
-      meta: {
-        title: "登录",
-      },
+      meta: { title: "登录" },
     },
     {
-      path: "/SignUp", // 注册
+      path: "/SignUp",
       name: "SignUp",
       component: SignUp,
-      meta: {
-        title: "注册",
-      },
+      meta: { title: "注册" },
     },
     {
-      path: "/forgetPassword", // 忘记密码
+      path: "/forgetPassword",
       name: "forgetPassword",
       component: ForgetPassword,
-      meta: {
-        title: "忘记密码",
-      },
+      meta: { title: "忘记密码" },
     },
     {
-      path: "/goodsList", // 商品列表
+      path: "/goodsList",
       name: "GoodsList",
       component: GoodsList,
     },
     {
-      path: "/goodsDetail", // 商品详情
+      path: "/goodsDetail",
       name: "GoodsDetail",
       component: GoodsDetail,
       meta: { title: "商品详情" },
     },
     {
-      path: "/pointGoodsDetail", // 商品详情
+      path: "/pointGoodsDetail",
       name: "PointGoodsDetail",
       component: PointGoodsDetail,
       meta: { title: "积分商品" },
     },
     {
-      path: "/shoppingCart", // 头部购物车
+      path: "/shoppingCart",
       name: "ShoppingCart",
       component: ShoppingCart,
     },
     {
-      path: "/cart", // 购物车
+      path: "/cart",
       name: "Cart",
       component: Cart,
       meta: { title: "购物车" },
     },
     {
-      path: "/pay", // 支付页面
+      path: "/pay",
       name: "Pay",
       component: Pay,
       meta: { title: "订单结算" },
@@ -191,66 +137,54 @@ export default new Router({
       meta: { title: "积分商城" },
     },
     {
-      path: "/qrpay", // 三方支付
+      path: "/qrpay",
       name: "qrpay",
       component: ThirdPay,
     },
     {
-      path: "/payDone", // 支付成功页面
+      path: "/payDone",
       name: "PayDone",
       component: PayDone,
     },
     {
-      path: "/article", // 文章页面
+      path: "/article",
       name: "article",
       component: article,
-      meta: {
-        title: "帮助中心",
-      },
+      meta: { title: "帮助中心" },
     },
     {
-      path: "/article/detail", // 文章页面
+      path: "/article/detail",
       name: "articleDetail",
       component: articleDetail,
-      meta: {
-        title: "帮助中心",
-      },
+      meta: { title: "帮助中心" },
     },
     {
       path: "/shopEntry",
       name: "shopEntry",
       component: ShopEntry,
-      meta: {
-        title: "店铺入驻",
-      },
+      meta: { title: "店铺入驻" },
     },
     {
       path: "/coupon",
       name: "coupon",
       component: Coupon,
-      meta: {
-        title: "领券中心",
-      },
+      meta: { title: "领券中心" },
     },
     {
       path: "/seckill",
       name: "seckill",
       component: seckill,
-      meta: {
-        title: "限时秒杀",
-      },
+      meta: { title: "限时秒杀" },
     },
     {
-      path: "/home", // 主页
+      path: "/home",
       component: Home,
       children: [
         {
           path: "/",
           name: "Home",
           component: UserMain,
-          meta: {
-            title: "会员中心",
-          },
+          meta: { title: "会员中心" },
         },
         {
           path: "MyTracks",
@@ -411,3 +345,15 @@ export default new Router({
     },
   ],
 });
+
+router.beforeEach((to, from, next) => {
+  NProgress.start();
+  window.document.title = to.meta.title === undefined ? title : to.meta.title;
+  next();
+});
+
+router.afterEach(() => {
+  NProgress.done();
+});
+
+export default router;
diff --git a/buyer/src/utils/iconMap.js b/buyer/src/utils/iconMap.js
new file mode 100644
index 00000000..fd240098
--- /dev/null
+++ b/buyer/src/utils/iconMap.js
@@ -0,0 +1,83 @@
+import {
+  Check,
+  Close,
+  Delete,
+  Plus,
+  ArrowDown,
+  ArrowUp,
+  ArrowRight,
+  ArrowLeft,
+  ShoppingCart,
+  Camera,
+  View,
+  Warning,
+  Help,
+  Edit,
+  InfoFilled,
+  User,
+  Lock,
+  Iphone,
+  Search,
+  Document,
+  Refresh,
+  Link,
+  Key,
+  AlarmClock,
+  Location,
+  Star,
+  StarFilled,
+  CircleClose,
+  ShoppingCartFull,
+  Tickets,
+  PriceTag,
+  Money,
+} from "@element-plus/icons-vue";
+
+/** 旧 iView type 字符串 → Element Plus 图标组件 */
+export const ICON_MAP = {
+  "md-checkmark": Check,
+  "md-close": Close,
+  "md-trash": Delete,
+  "md-add": Plus,
+  "md-arrow-dropdown": ArrowDown,
+  "md-arrow-dropup": ArrowUp,
+  "md-person": User,
+  "md-lock": Lock,
+  "md-phone-portrait": Iphone,
+  "md-key": Key,
+  "md-link": Link,
+  "md-refresh": Refresh,
+  "ios-arrow-down": ArrowDown,
+  "ios-arrow-up": ArrowUp,
+  "ios-arrow-forward": ArrowRight,
+  "ios-arrow-back": ArrowLeft,
+  "ios-arrow-round-down": ArrowDown,
+  "ios-arrow-round-forward": ArrowRight,
+  "ios-cart-outline": ShoppingCart,
+  "ios-camera": Camera,
+  "ios-eye-outline": View,
+  "ios-trash-outline": Delete,
+  "ios-alert-outline": Warning,
+  "ios-help-circle-outline": Help,
+  "ios-add-circle-outline": Plus,
+  "ios-information-circle": InfoFilled,
+  "ios-search": Search,
+  "ios-text-outline": Document,
+  "ios-alarm-outline": AlarmClock,
+  "md-qr-scanner": Iphone,
+  edit: Edit,
+  "trash-a": Delete,
+  location: Location,
+  "ios-heart": StarFilled,
+  "md-close-circle": CircleClose,
+  "ios-cart": ShoppingCartFull,
+  "md-clipboard": Tickets,
+  "md-pricetag": PriceTag,
+  "logo-usd": Money,
+  "ios-eye": View,
+  "md-star": Star,
+};
+
+export function resolveIcon(type) {
+  return ICON_MAP[type] || InfoFilled;
+}
diff --git a/buyer/src/utils/message.js b/buyer/src/utils/message.js
new file mode 100644
index 00000000..e50eb54d
--- /dev/null
+++ b/buyer/src/utils/message.js
@@ -0,0 +1,71 @@
+import { ElMessage, ElMessageBox } from "element-plus";
+
+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/buyer/src/vuex/store.js b/buyer/src/vuex/store.js
index e1e374bd..934fc6e2 100644
--- a/buyer/src/vuex/store.js
+++ b/buyer/src/vuex/store.js
@@ -1,22 +1,20 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import * as actions from './actions';
-import * as mutations from './mutations';
-import * as getters from './getters';
-import storage from '@/plugins/storage.js'
+import { createStore } from "vuex";
+import * as actions from "./actions";
+import * as mutations from "./mutations";
+import * as getters from "./getters";
+import storage from "@/plugins/storage.js";
 
-Vue.use(Vuex);
-
-export default new Vuex.Store({
+export default createStore({
   state: {
-    navList: [], // 首页快捷导航
-    cartNum: storage.getItem('cartNum') || 0,
-    logoImg: storage.getItem('logoImg') || require('@/assets/images/logo2.png'),
-    siteName:storage.getItem('siteName')|| 'lilishop',
-    hotWordsList: storage.getItem('hotWordsList'),
-    category: JSON.parse(localStorage.getItem('category'))
+    navList: [],
+    cartNum: storage.getItem("cartNum") || 0,
+    logoImg:
+      storage.getItem("logoImg") || require("@/assets/images/logo2.png"),
+    siteName: storage.getItem("siteName") || "lilishop",
+    hotWordsList: storage.getItem("hotWordsList"),
+    category: JSON.parse(localStorage.getItem("category")),
   },
   getters,
   actions,
-  mutations
+  mutations,
 });
diff --git a/buyer/vue.config.js b/buyer/vue.config.js
index 6e480cf2..b70b8113 100644
--- a/buyer/vue.config.js
+++ b/buyer/vue.config.js
@@ -1,109 +1,49 @@
 const path = require("path");
+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);
-};
-const configs = require('./src/config')
-/**
- * 在项目开发的时候将生产环境以及开发环境进行判断
- * 将生产环境中的路径用cdn来进行优化处理
- * 将开发环境中替换为本地的内容，方便处理bug以及开启vueDev
- * 我们可以根据环境变量进行相应的处理，只有在产品的时候，才让插件去自动注入相应的资源文件到html页面
- */
-const enableProduction = process.env.NODE_ENV === "production"; // 是否生产环境
 
-
-let externals = {
-  vue: "Vue",
-  axios: "axios",
-  "vue-router": "VueRouter",
-  vuex: "Vuex",
-  "view-design": "iview",
-  "js-cookie": "Cookies"
-};
-
-// 使用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/axios0.19.2.js",
-    "https://cdn.pickmall.cn/cdn/iview.min.js",
-    "https://cdn.pickmall.cn/cdn/js.cookie.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 : [];
+const resolve = (dir) => path.join(__dirname, dir);
+const enableProduction = process.env.NODE_ENV === "production";
 
 module.exports = {
-  // 输出文件目录，当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除
   outputDir: "dist",
-  // 放置生成的静态资源 (js、css、img、fonts) 的目录。
   assetsDir: "static",
-
   css: {
-    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
     sourceMap: false,
-
     loaderOptions: {
       sass: {
-        additionalData: `@import "@/assets/styles/global.scss";` //全局加载scss
+        additionalData: `@import "@/assets/styles/global.scss";`,
+        sassOptions: {
+          silenceDeprecations: ["legacy-js-api", "import"],
+        },
+      },
+      scss: {
+        additionalData: `@import "@/assets/styles/global.scss";`,
+        sassOptions: {
+          silenceDeprecations: ["legacy-js-api", "import"],
+        },
       },
-      // 向 CSS 相关的 loader 传递选项
       less: {
         lessOptions: {
-          javascriptEnabled: true
-        }
-      }
-    }
+          javascriptEnabled: true,
+        },
+      },
+    },
   },
   devServer: {
-    port: configs.port
+    port: configs.port,
   },
-
-  // 打包时不生成.map文件 避免看到源码
   productionSourceMap: false,
-
-  // 部署优化
   configureWebpack: {
-    performance: {
-      maxEntrypointSize: 10000000,
-      maxAssetSize: 30000000
-    },
-    externals,
-
-    // GZIP压缩
-    plugins: [
-      new CompressionPlugin({
-        test: /\.js$|\.html$|\.css/, // 匹配文件
-        threshold: 10240 // 对超过10k文件压缩
-      })
-    ],
+    plugins: enableProduction
+      ? [
+          new CompressionPlugin({
+            test: /\.js$|\.html$|\.css/,
+            threshold: 10240,
+          }),
+        ]
+      : [],
     optimization: {
-      minimizer: jsPlugin,
       runtimeChunk: "single",
       splitChunks: {
         chunks: "all",
@@ -113,25 +53,23 @@ module.exports = {
           vendor: {
             test: /[\\/]node_modules[\\/]/,
             name(module) {
-              const packageName = module.context.match(
-                /[\\/]node_modules[\\/](.*?)([\\/]|$)/
-              )[1];
+              const match =
+                module.context &&
+                module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/);
+              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: [] };
       args[0].title = configs.title;
       return args;
     });
-  }
+  },
 };
diff --git a/im/babel.config.js b/im/babel.config.js
index 74f3c443..bf4102ee 100644
--- a/im/babel.config.js
+++ b/im/babel.config.js
@@ -1,19 +1,10 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ],
+  presets: ["@vue/cli-plugin-babel/preset"],
   plugins: [
-    [
-      "import",
-      {
-        "libraryName": "element-ui",
-        "styleLibraryName": "theme-chalk"
-      }
-    ],
     [
       "prismjs",
       {
-        "languages": [
+        languages: [
           "html",
           "css",
           "less",
@@ -42,10 +33,10 @@ module.exports = {
           "yml",
           "md",
           "erlang",
-          "ini"
+          "ini",
         ],
-        "theme": "okaidia"
-      }
-    ]
-  ]
-}
\ No newline at end of file
+        theme: "okaidia",
+      },
+    ],
+  ],
+};
diff --git a/im/package.json b/im/package.json
index 5755ad7e..8bc65c5a 100644
--- a/im/package.json
+++ b/im/package.json
@@ -8,43 +8,43 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
+  "engines": {
+    "node": ">=16"
+  },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "axios": "^0.21.4",
     "babel-plugin-prismjs": "^2.0.1",
-    "core-js": "^3.6.5",
-    "element-ui": "^2.14.1",
+    "core-js": "^3.36.0",
+    "element-plus": "^2.6.3",
     "js-audio-recorder": "^1.0.6",
     "js-base64": "^2.5.1",
-    "mavon-editor": "^2.10.4",
     "nprogress": "^0.2.0",
     "prismjs": "^1.29.0",
+    "qs": "^6.9.4",
     "svg-sprite-loader": "^5.0.0",
-    "vue": "^2.6.11",
-    "vue-contextmenujs": "^1.3.13",
-    "vue-cropper": "^0.5.5",
-    "vue-prism-editor": "^0.5.1",
-    "vue-router": "^3.4.9",
-    "vue-virtual-scroller": "^1.1.2",
-    "vuex": "^3.5.1"
+    "vue": "^3.4.21",
+    "vue-cropper": "^1.1.1",
+    "vue-prism-editor": "2.0.0-alpha.2",
+    "vue-router": "^4.3.0",
+    "vue-virtual-scroller": "^3.0.4",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
+    "@vue/compiler-sfc": "^3.4.21",
     "babel-eslint": "^10.1.0",
-    "babel-plugin-import": "^1.13.1",
-    "compression-webpack-plugin": "^5.0.0",
+    "compression-webpack-plugin": "^10.0.0",
     "eslint": "^8.28.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "less": "^3.0.4",
-    "less-loader": "^5.0.0",
+    "eslint-plugin-vue": "^9.22.0",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.4",
     "postcss": "^8.4.20",
     "style-resources-loader": "^1.4.1",
     "vue-cli-plugin-style-resources-loader": "^0.1.4",
-    "vue-svg-component-runtime": "^1.0.1",
-    "vue-svg-icon-loader": "^2.1.1",
-    "vue-template-compiler": "^2.6.11",
-    "webpack": "^5.75.0"
+    "webpack": "^5.95.0"
   },
   "eslintConfig": {
     "root": true,
@@ -52,7 +52,7 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "eslint:recommended"
     ],
     "parserOptions": {
diff --git a/im/scripts/fix-deep.js b/im/scripts/fix-deep.js
new file mode 100644
index 00000000..45f7d08e
--- /dev/null
+++ b/im/scripts/fix-deep.js
@@ -0,0 +1,21 @@
+const fs = require("fs");
+const path = require("path");
+
+function walk(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walk(full, files);
+    else if (/\.(vue|less)$/.test(entry.name)) files.push(full);
+  }
+  return files;
+}
+
+const root = path.join(__dirname, "../src");
+for (const file of walk(root)) {
+  let content = fs.readFileSync(file, "utf8");
+  const next = content.replace(/\/deep\/\s*([^\{]+)\{/g, ":deep($1) {");
+  if (next !== content) {
+    fs.writeFileSync(file, next);
+    console.log("fixed:", file);
+  }
+}
diff --git a/im/src/App.vue b/im/src/App.vue
index 172d870b..78ad1dc2 100644
--- a/im/src/App.vue
+++ b/im/src/App.vue
@@ -4,6 +4,8 @@
   </div>
 </template>
 <script>
+import { setRefreshView } from "@/utils/app-bridge";
+
 export default {
   name: 'App',
   data () {
@@ -35,10 +37,11 @@ export default {
   },
 
   mounted () {
+    setRefreshView(this.refreshView.bind(this));
     window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
     window.addEventListener('unload', e => this.unloadHandler(e))
   },
-  destroyed () {
+  beforeUnmount () {
     window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
     window.removeEventListener('unload', e => this.unloadHandler(e))
   },
diff --git a/im/src/assets/css/global.less b/im/src/assets/css/global.less
index 4c5db740..2166ef80 100644
--- a/im/src/assets/css/global.less
+++ b/im/src/assets/css/global.less
@@ -173,7 +173,7 @@
     }
 
     .main {
-      /deep/.el-input__inner {
+      :deep(.el-input__inner ) {
         border-radius: 1px !important;
       }
 
@@ -238,4 +238,44 @@
 
 .flex-10 {
   flex: 10;
+}
+
+.im-contextmenu {
+  padding: 4px 0;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.im-contextmenu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  font-size: 13px;
+  color: #606266;
+  cursor: pointer;
+  white-space: nowrap;
+
+  &:hover {
+    background: #f5f7fa;
+    color: #409eff;
+  }
+
+  &.is-disabled {
+    color: #c0c4cc;
+    cursor: not-allowed;
+
+    &:hover {
+      background: transparent;
+      color: #c0c4cc;
+    }
+  }
+}
+
+.im-contextmenu-divider {
+  height: 1px;
+  margin: 4px 0;
+  background: #ebeef5;
 }
\ No newline at end of file
diff --git a/im/src/assets/css/page/contacts.less b/im/src/assets/css/page/contacts.less
index 8b158ca1..3a3ec77f 100644
--- a/im/src/assets/css/page/contacts.less
+++ b/im/src/assets/css/page/contacts.less
@@ -16,7 +16,7 @@
       flex-shrink: 0;
       height: 40px;
 
-      /deep/.el-input .el-input__inner {
+      :deep(.el-input .el-input__inner ) {
         border-radius: 20px;
         width: 170px;
       }
diff --git a/im/src/assets/css/page/login-auth.less b/im/src/assets/css/page/login-auth.less
index 075dcf2c..c6c0a0fc 100644
--- a/im/src/assets/css/page/login-auth.less
+++ b/im/src/assets/css/page/login-auth.less
@@ -1,4 +1,4 @@
-/deep/.el-input__inner {
+:deep(.el-input__inner ) {
   border-radius: 1px !important;
 }
 
diff --git a/im/src/assets/css/talk/talk-records.less b/im/src/assets/css/talk/talk-records.less
index c852598a..60146355 100644
--- a/im/src/assets/css/talk/talk-records.less
+++ b/im/src/assets/css/talk/talk-records.less
@@ -43,7 +43,7 @@
       }
     }
 
-    /deep/.text-message {
+    :deep(.text-message ) {
       border-radius: 0;
     }
   }
diff --git a/im/src/components/chat/TalkCodeBlock.vue b/im/src/components/chat/TalkCodeBlock.vue
index 44340101..3bbfc9f5 100644
--- a/im/src/components/chat/TalkCodeBlock.vue
+++ b/im/src/components/chat/TalkCodeBlock.vue
@@ -43,14 +43,9 @@
   </div>
 </template>
 <script>
-import PrismEditor from "vue-prism-editor";
-import "vue-prism-editor/dist/VuePrismEditor.css";
+import { PrismEditor } from "vue-prism-editor";
+import "vue-prism-editor/dist/prismeditor.min.css";
 import "prismjs/themes/prism-okaidia.css";
-import Vue from "vue";
-import { Select, Option } from "element-ui";
-Vue.use(Select);
-Vue.use(Option);
-
 export default {
   name: "TalkCodeBlock",
   components: {
@@ -284,29 +279,29 @@ export default {
   max-width: 100%;
 }
 
-/deep/ .el-input__inner {
+:deep(.el-input__inner ) {
   border-radius: 0;
   width: 130px;
 }
 
-/deep/ pre {
+:deep(pre ) {
   border-radius: 0;
 }
 
-/deep/ .prism-editor-wrapper pre::-webkit-scrollbar {
+:deep(.prism-editor-wrapper pre::-webkit-scrollbar ) {
   background-color: #272822;
 }
 
-/deep/ .prism-editor-wrapper pre::-webkit-scrollbar-thumb {
+:deep(.prism-editor-wrapper pre::-webkit-scrollbar-thumb ) {
   background-color: #41413f;
   cursor: pointer;
 }
 
-/deep/ .prism-editor-wrapper::-webkit-scrollbar {
+:deep(.prism-editor-wrapper::-webkit-scrollbar ) {
   background-color: #272822;
 }
 
-/deep/ .prism-editor-wrapper::-webkit-scrollbar-thumb {
+:deep(.prism-editor-wrapper::-webkit-scrollbar-thumb ) {
   background-color: rgb(114, 112, 112);
   cursor: pointer;
 }
diff --git a/im/src/components/chat/TalkForwardRecord.vue b/im/src/components/chat/TalkForwardRecord.vue
index 276ea90f..d1dd10d8 100644
--- a/im/src/components/chat/TalkForwardRecord.vue
+++ b/im/src/components/chat/TalkForwardRecord.vue
@@ -131,7 +131,7 @@ export default {
   height: 600px;
 }
 
-/deep/.el-scrollbar__wrap {
+:deep(.el-scrollbar__wrap ) {
   overflow-x: hidden;
 }
 
diff --git a/im/src/components/chat/TalkSearchRecord.vue b/im/src/components/chat/TalkSearchRecord.vue
index 98cc487b..0f4764af 100644
--- a/im/src/components/chat/TalkSearchRecord.vue
+++ b/im/src/components/chat/TalkSearchRecord.vue
@@ -397,7 +397,7 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-/deep/.el-scrollbar__wrap {
+:deep(.el-scrollbar__wrap ) {
   overflow-x: hidden;
 }
 
diff --git a/im/src/components/chat/messaege/FriendApplyMessage.vue b/im/src/components/chat/messaege/FriendApplyMessage.vue
index 5df0dc4f..4e2c83a8 100644
--- a/im/src/components/chat/messaege/FriendApplyMessage.vue
+++ b/im/src/components/chat/messaege/FriendApplyMessage.vue
@@ -125,7 +125,7 @@ export default {
     justify-content: center;
     box-sizing: border-box;
 
-    /deep/.el-divider {
+    :deep(.el-divider ) {
       background: white;
     }
 
diff --git a/im/src/components/chat/messaege/ImageMessage.vue b/im/src/components/chat/messaege/ImageMessage.vue
index 309e07d1..779f860e 100644
--- a/im/src/components/chat/messaege/ImageMessage.vue
+++ b/im/src/components/chat/messaege/ImageMessage.vue
@@ -7,8 +7,12 @@
       :style="getImgStyle(src)"
       :preview-src-list="[src]"
     >
-      <div slot="error" class="image-slot">图片加载失败...</div>
-      <div slot="placeholder" class="image-slot">图片加载中...</div>
+      <template #error>
+        <div class="image-slot">图片加载失败...</div>
+      </template>
+      <template #placeholder>
+        <div class="image-slot">图片加载中...</div>
+      </template>
     </el-image>
   </div>
 </template>
@@ -31,7 +35,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .image-message {
-  /deep/.el-image {
+  :deep(.el-image) {
     border-radius: 5px;
     cursor: pointer;
     background: #f1efef;
diff --git a/im/src/components/chat/panel/OtherLink.vue b/im/src/components/chat/panel/OtherLink.vue
index 9ed46317..6b1e909b 100644
--- a/im/src/components/chat/panel/OtherLink.vue
+++ b/im/src/components/chat/panel/OtherLink.vue
@@ -17,7 +17,6 @@
 </template>
 
 <script>
-import { Tabs, TabPane } from 'element-ui'
 import { ServeGetStoreDetail, ServeGetUserDetail, ServeGetFootPrint, ServeGetOrderPrint, ServeGetGoodsDetail, ServeStoreGetFootPrint,ServeStoreGetOrderPrint } from '@/api/user'
 import StoreDetail from "@/components/chat/panel/template/storeDetail.vue";
 import FootPrint from "@/components/chat/panel/template/footPrint.vue";
@@ -26,8 +25,6 @@ import SocketInstance from "@/im-server/socket-instance";
 import { mapState, mapGetters } from "vuex";
 export default {
   components: {
-    "el-tabs": Tabs,
-    "el-tab-pane": TabPane,
     StoreDetail,
     FootPrint,
     GoodsLink
@@ -271,27 +268,27 @@ export default {
 </script>
 
 <style scoped lang="less">
-// /deep/ .el-tabs__nav.is-top {
+// :deep(.el-tabs__nav.is-top ) {
 // }
 
-/deep/ .el-tabs__nav {
+:deep(.el-tabs__nav ) {
   height: 60px;
   line-height: 60px;
 }
 
-/deep/ .el-tab-pane {
+:deep(.el-tab-pane ) {
   // margin-left: 12px;
 }
-/deep/.el-tabs__nav-scroll{
+:deep(.el-tabs__nav-scroll) {
   min-width: 362px;
 }
-/deep/ .el-tabs__item{
+:deep(.el-tabs__item) {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-/deep/ .el-tabs__header{
+:deep(.el-tabs__header) {
   margin-bottom: 0;
 }
 </style>
diff --git a/im/src/components/chat/panel/TalkPanel.vue b/im/src/components/chat/panel/TalkPanel.vue
index 18f5c537..c44f409d 100644
--- a/im/src/components/chat/panel/TalkPanel.vue
+++ b/im/src/components/chat/panel/TalkPanel.vue
@@ -89,7 +89,7 @@
                           </el-tooltip>
                         </div>
                         <div class="price">
-                          <span>{{ item.text.price | unitPrice('￥') }}</span>
+                          <span>{{ $filters.unitPrice(item.text.price, '￥') }}</span>
                         </div>
                       </div>
                     </div>
@@ -111,14 +111,14 @@
                         <div>
                           <span class="orderGoodsName">{{ order.name }}</span>
                           <div class="goods-item-price">
-                           <span>{{ order.goodsPrice | unitPrice('￥') }}</span>
+                           <span>{{ $filters.unitPrice(order.goodsPrice, '￥') }}</span>
                           </div> 
                         </div>
                       </div>
                       <div class="shared-goods">
                       <div class="orderGoodsTime">{{ item.text.paymentTime }}</div>
                       <span class="orderFlowPrice">
-                        订单金额：<span>{{ item.text.flowPrice | unitPrice('￥') }}</span>
+                        订单金额：<span>{{ $filters.unitPrice(item.text.flowPrice, '￥') }}</span>
                       </span> 
                       <div class="order-status">
                         <el-tag 
@@ -205,7 +205,6 @@ import PanelToolbar from "./PanelToolbar";
 import SocketInstance from "@/im-server/socket-instance";
 import { SvgMentionDown } from "@/core/icons";
 import { formatTime, parseTime, copyTextToClipboard } from "@/utils/functions";
-import { unitPrice } from '@/plugins/filters';
 
 import {
   ServeTalkRecords,
diff --git a/im/src/components/chat/panel/template/footPrint.vue b/im/src/components/chat/panel/template/footPrint.vue
index 799ff90d..5245c1f4 100644
--- a/im/src/components/chat/panel/template/footPrint.vue
+++ b/im/src/components/chat/panel/template/footPrint.vue
@@ -14,7 +14,7 @@
                   <a class="goods_name">{{ item.goodsName }}</a>
                   <div style="display: flex;">
                     <div style="margin-top: 20px;">
-                      <span class='goods-price'>{{ item.price | unitPrice("￥") }}</span>
+                      <span class='goods-price'>{{ $filters.unitPrice(item.price, "￥") }}</span>
                       <div class="goods_store_button">
                        
                       </div>
@@ -42,7 +42,7 @@
                   <div class="order-items" v-for="(order,orderIndex) in item.orderItems" :key="orderIndex">
                       <img :src="order.image" alt="">
                       <span class="order-goods-name" @click="linkToOrders(item.sn)"> {{ order.name }}</span>
-                      <span class="price">{{order.goodsPrice | unitPrice("￥")}}</span>
+                      <span class="price">{{ $filters.unitPrice(order.goodsPrice, "￥") }}</span>
                   </div>
                   <!-- <img  :src="item.groupImages" alt=""> -->
                  
@@ -77,14 +77,9 @@
 </template>
 
 <script>
-import { Tag, button, Tabs, TabPane, InfiniteScroll } from 'element-ui'
 import { mapState, mapGetters } from "vuex";
-import { unitPrice } from '@/plugins/filters';
 
 export default {
-  directives: {
-    "infinite-scroll": InfiniteScroll,
-  },
   data () {
     return {
       noMoreList:{
@@ -310,7 +305,7 @@ export default {
   font-size:12px;
 }
 
-/deep/ .el-tabs__header {
+:deep(.el-tabs__header ) {
   position: absolute;
   width: 362px;
   height: 50px;
@@ -318,7 +313,7 @@ export default {
   z-index: 2;
   background: #ffffff;
 }
-/deep/ .el-tabs__nav.is-top {
+:deep(.el-tabs__nav.is-top ) {
   height: 50px;
 }
 
@@ -328,10 +323,10 @@ export default {
   align-items: center;
 }
 
-/deep/.el-tabs__content {
+:deep(.el-tabs__content ) {
   margin-top: 50px;
 }
-/deep/ .el-tabs{
+:deep(.el-tabs) {
   width: 100%;
 }
 
@@ -390,7 +385,7 @@ export default {
 //   height: calc(100vh - 110px);
 //   overflow-y: auto; 
 // }
-// /deep/.el-tab-pane {
+// :deep(.el-tab-pane ) {
 //   height: calc(100vh - 110px);
 //   overflow-y: auto;
 // }
diff --git a/im/src/components/chat/panel/template/goodsLink.vue b/im/src/components/chat/panel/template/goodsLink.vue
index 3a11402f..e6f03c54 100644
--- a/im/src/components/chat/panel/template/goodsLink.vue
+++ b/im/src/components/chat/panel/template/goodsLink.vue
@@ -8,7 +8,7 @@
       <div style="margin-left: 13px">
         <a @click="linkToGoods(goodsDetail.goodsId, goodsDetail.id)"> {{ goodsDetail.goodsName }} </a>
         <div>
-          <span style="color: red;">{{ goodsDetail.price | unitPrice('￥') }}</span>
+          <span style="color: red;">{{ $filters.unitPrice(goodsDetail.price, '￥') }}</span>
         </div>
         <div v-if="hide">
           <el-button class="store-button" type="danger" v-if="btnHide == 1 && toUser.storeFlag" size="mini"
@@ -20,7 +20,6 @@
 </template>
 
 <script>
-import { Tag, button } from 'element-ui'
 import { mapState, mapGetters } from "vuex";
 import SocketInstance from "@/im-server/socket-instance";
 export default {
@@ -42,11 +41,6 @@ export default {
     console.log(this.goodsDetail)
     this.btnHide = localStorage.getItem('btnHide')
   },
-  components: {
-    "el-tag": Tag,
-    "el-button": button,
-    Storage
-  },
   methods: {
     toGoods () {
       alert("toGoods")
diff --git a/im/src/components/chat/panel/template/storeDetail.vue b/im/src/components/chat/panel/template/storeDetail.vue
index 9c2fb7f7..946fcacd 100644
--- a/im/src/components/chat/panel/template/storeDetail.vue
+++ b/im/src/components/chat/panel/template/storeDetail.vue
@@ -35,7 +35,6 @@
 </template>
 
 <script>
-import { Tag, button, rate } from 'element-ui'
 export default {
   data () {
     return {
@@ -43,11 +42,6 @@ export default {
       colors: ['#99A9BF', '#F7BA2A', '#FF9900']
     }
   },
-  components: {
-    "el-tag": Tag,
-    "el-button": button,
-    "el-rate": rate
-  },
   methods: {
   },
   props: {
diff --git a/im/src/components/editor/MeEditor.vue b/im/src/components/editor/MeEditor.vue
index 0c301fed..79b8b1d0 100644
--- a/im/src/components/editor/MeEditor.vue
+++ b/im/src/components/editor/MeEditor.vue
@@ -3,10 +3,16 @@
     <el-container class="editor-container">
       <el-header class="no-padding toolbar" height="35px">
         <ul>
-          <li v-popover:popoverEmoticon>
-            <i class="iconfont icon-icon_im_face" style="font-size: 15px" />
-            <p class="tip-title">表情符号</p>
-          </li>
+          <el-popover ref="popoverEmoticon" placement="top-start" trigger="click" width="300"
+            popper-class="no-padding el-popover-em">
+            <template #reference>
+              <li>
+                <i class="iconfont icon-icon_im_face" style="font-size: 15px" />
+                <p class="tip-title">表情符号</p>
+              </li>
+            </template>
+            <MeEditorEmoticon ref="editorEmoticon" @selected="selecteEmoticon" />
+          </el-popover>
           <!-- <li @click="codeBlock.isShow = true">
             <i class="iconfont icon-daima" />
             <p class="tip-title">代码片段</p>
@@ -59,11 +65,6 @@
           <!--          </p>-->
         </ul>
 
-        <el-popover ref="popoverEmoticon" placement="top-start" trigger="click" width="300"
-          popper-class="no-padding el-popover-em">
-          <MeEditorEmoticon ref="editorEmoticon" @selected="selecteEmoticon" />
-        </el-popover>
-
         <form enctype="multipart/form-data" style="display: none" ref="fileFrom">
           <input type="file" ref="restFile" accept="image/*" @change="uploadImageChange" />
           <input type="file" ref="restFile2" @change="uploadFileChange" />
@@ -76,7 +77,7 @@
     </el-container>
 
     <!-- 图片查看器 -->
-    <MeEditorImageView ref="imageViewer" v-model="imageViewer.isShow" :file="imageViewer.file"
+    <MeEditorImageView ref="imageViewer" v-model:show="imageViewer.isShow" :file="imageViewer.file"
       @confirm="confirmUploadImage" />
 
     <MeEditorRecorder v-if="recorder" @close="recorder = false" />
@@ -86,7 +87,7 @@
       @confirm="confirmCodeBlock" />
 
     <!-- 文件上传管理器 -->
-    <MeEditorFileManage ref="filesManager" v-model="filesManager.isShow" />
+    <MeEditorFileManage ref="filesManager" v-model:show="filesManager.isShow" />
 
     <MeEditorVote v-if="vote.isShow" @close="
       () => {
@@ -335,7 +336,7 @@ export default {
         });
       }
 
-      this.$refs.popoverEmoticon.doClose();
+      this.$refs.popoverEmoticon.hide();
     },
   },
 };
diff --git a/im/src/components/editor/MeEditorEmoticon.vue b/im/src/components/editor/MeEditorEmoticon.vue
index d5614241..f04c3fb5 100644
--- a/im/src/components/editor/MeEditorEmoticon.vue
+++ b/im/src/components/editor/MeEditorEmoticon.vue
@@ -332,7 +332,7 @@ export default {
   }
 }
 
-/deep/ .el-image {
+:deep(.el-image ) {
   width: 100%;
   height: 100%;
   transition: ease-in 0.3s;
diff --git a/im/src/components/editor/MeEditorFileManage.vue b/im/src/components/editor/MeEditorFileManage.vue
index 65b89846..6a72afb7 100644
--- a/im/src/components/editor/MeEditorFileManage.vue
+++ b/im/src/components/editor/MeEditorFileManage.vue
@@ -78,21 +78,14 @@
 </template>
 
 <script>
-import Vue from 'vue'
 import { SvgNotData } from '@/core/icons'
-import { Progress } from 'element-ui'
-Vue.use(Progress)
-
 import { ServeFindFileSplitInfo, ServeFileSubareaUpload } from '@/api/upload'
 import { formatSize, getFileExt, parseTime } from '@/utils/functions'
 import { ServeSendTalkFile } from '@/api/chat'
 
 export default {
   name: 'MeEditorFileManage',
-  model: {
-    prop: 'show',
-    event: 'close',
-  },
+  emits: ['close', 'update:show'],
   props: {
     show: Boolean,
   },
@@ -141,6 +134,7 @@ export default {
   },
   methods: {
     closeBox() {
+      this.$emit('update:show', false)
       this.$emit('close', false)
     },
 
diff --git a/im/src/components/editor/MeEditorImageView.vue b/im/src/components/editor/MeEditorImageView.vue
index cad37b14..d00c790f 100644
--- a/im/src/components/editor/MeEditorImageView.vue
+++ b/im/src/components/editor/MeEditorImageView.vue
@@ -33,10 +33,7 @@
 <script>
 export default {
   name: 'MeEditorImageView',
-  model: {
-    prop: 'show',
-    event: 'close',
-  },
+  emits: ['close', 'update:show', 'confirm'],
   props: {
     show: Boolean,
     file: File,
@@ -60,6 +57,7 @@ export default {
         return false
       }
 
+      this.$emit('update:show', false)
       this.$emit('close', false)
     },
     loadFile(file) {
diff --git a/im/src/components/editor/MeEditorRecorder.vue b/im/src/components/editor/MeEditorRecorder.vue
index 3e2c79ec..779b5492 100644
--- a/im/src/components/editor/MeEditorRecorder.vue
+++ b/im/src/components/editor/MeEditorRecorder.vue
@@ -188,7 +188,7 @@ export default {
       return `${hour}:${minute}:${seconds}`
     },
   },
-  destroyed() {
+  beforeUnmount() {
     if (this.recorder) {
       this.destroyRecorder()
     }
diff --git a/im/src/components/editor/MeEditorVote.vue b/im/src/components/editor/MeEditorVote.vue
index 7819fa7d..4e6bb8f8 100644
--- a/im/src/components/editor/MeEditorVote.vue
+++ b/im/src/components/editor/MeEditorVote.vue
@@ -37,11 +37,12 @@
                 placeholder="请输入选项内容"
                 :maxlength="120"
               >
-                <span
-                  slot="prefix"
-                  style="margin-left:7px;"
-                  v-text="String.fromCharCode(65 + index)"
-                />
+                <template #prefix>
+                  <span
+                    style="margin-left:7px;"
+                    v-text="String.fromCharCode(65 + index)"
+                  />
+                </template>
               </el-input>
             </div>
             <div class="rbox">
@@ -154,7 +155,7 @@ export default {
         return false
       }
 
-      this.$delete(this.options, index)
+      this.options.splice(index, 1)
     },
   },
 }
@@ -184,7 +185,7 @@ export default {
       .lbox {
         width: 100%;
 
-        /deep/.el-input__prefix {
+        :deep(.el-input__prefix ) {
           height: 36px;
           line-height: 36px;
         }
@@ -220,7 +221,7 @@ export default {
   }
 }
 
-/deep/.el-radio__input.is-checked + .el-radio__label {
+:deep(.el-radio__input.is-checked + .el-radio__label ) {
   color: #606266;
 }
 </style>
diff --git a/im/src/components/notify/NewMessageNotify.vue b/im/src/components/notify/NewMessageNotify.vue
index 6bb63a6a..29eade88 100644
--- a/im/src/components/notify/NewMessageNotify.vue
+++ b/im/src/components/notify/NewMessageNotify.vue
@@ -9,7 +9,7 @@
         <p class="title">
           {{ talk_type == 1 ? '私信消息通知' : '群聊消息通知' }}
         </p>
-        <p class="time"><i class="el-icon-time" /> {{ datetime | format }}</p>
+        <p class="time"><i class="el-icon-time" /> {{ formatTime(datetime) }}</p>
       </div>
       <div class="xbody">
         <p>@{{ nickname }}</p>
@@ -50,8 +50,8 @@ export default {
   data() {
     return {}
   },
-  filters: {
-    format(datetime) {
+  methods: {
+    formatTime(datetime) {
       datetime = datetime || new Date()
       return parseTime(datetime, '{m}/{d} {h}:{i} 分')
     },
diff --git a/im/src/components/svg-icon/index.vue b/im/src/components/svg-icon/index.vue
index 7ba6cfdc..2411c740 100644
--- a/im/src/components/svg-icon/index.vue
+++ b/im/src/components/svg-icon/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
+  <svg :class="svgClass" aria-hidden="true" v-bind="$attrs">
     <use :xlink:href="iconName" />
   </svg>
 </template>
diff --git a/im/src/components/user/UserSearch.vue b/im/src/components/user/UserSearch.vue
index 97bfcab2..35fba1b0 100644
--- a/im/src/components/user/UserSearch.vue
+++ b/im/src/components/user/UserSearch.vue
@@ -16,7 +16,7 @@
             prefix-icon="el-icon-search"
             placeholder="请输入对方手机号(精确查找)"
             clearable
-            @keyup.enter.native="onSubmit"
+            @keyup.enter="onSubmit"
             @input="error = false"
           />
           <p v-show="error" class="error">
diff --git a/im/src/components/user/user-card/UserCardDetail.vue b/im/src/components/user/user-card/UserCardDetail.vue
index 93ed30c7..afa67f5a 100644
--- a/im/src/components/user/user-card/UserCardDetail.vue
+++ b/im/src/components/user/user-card/UserCardDetail.vue
@@ -31,7 +31,7 @@
         <div class="card-rows no-select">
           <div class="card-row">
             <label>手机</label>
-            <span>{{ detail.mobile | mobile }}</span>
+            <span>{{ formatMobile(detail.mobile) }}</span>
           </div>
           <div class="card-row">
             <label>昵称</label>
@@ -39,7 +39,7 @@
           </div>
           <div class="card-row">
             <label>性别</label>
-            <span>{{ detail.gender | gender }}</span>
+            <span>{{ formatGender(detail.gender) }}</span>
           </div>
           <div v-show="detail.friend_status == 2" class="card-row">
             <label>备注</label>
@@ -134,18 +134,6 @@ export default {
       default: 0,
     },
   },
-  filters: {
-    gender(value) {
-      let arr = ["未知", "男", "女"];
-      return arr[value] || "未知";
-    },
-    // 手机号格式化
-    mobile(value) {
-      return (
-        value.substr(0, 3) + " " + value.substr(3, 4) + " " + value.substr(7, 4)
-      );
-    },
-  },
   data() {
     return {
       detail: {
@@ -179,6 +167,16 @@ export default {
     // this.loadUserDetail();
   },
   methods: {
+    formatGender(value) {
+      const arr = ["未知", "男", "女"];
+      return arr[value] || "未知";
+    },
+    formatMobile(value) {
+      if (!value) return "";
+      return (
+        value.substr(0, 3) + " " + value.substr(3, 4) + " " + value.substr(7, 4)
+      );
+    },
     close() {
       if (this.contacts) return false;
 
diff --git a/im/src/components/user/user-card/index.js b/im/src/components/user/user-card/index.js
index 578b394c..347b0dd1 100644
--- a/im/src/components/user/user-card/index.js
+++ b/im/src/components/user/user-card/index.js
@@ -1,33 +1,40 @@
-import UserCardDetail from './UserCardDetail'
+import { createApp, h } from "vue";
+import UserCardDetail from "./UserCardDetail";
+import router from "@/router";
+import store from "@/store";
+import { setupElementPlus } from "@/plugins/element";
+import { setupLegacyMessage } from "@/utils/message";
+import { registerDirectives } from "@/core/directives";
 
 export default {
-  install(Vue) {
+  install(app) {
     function user(user_id, options) {
-      let _vm = this
-      const el = new Vue({
-        router: _vm.$router,
-        store: _vm.$store,
-        render(h) {
-          return h(UserCardDetail, {
-            on: {
-              close: () => {
-                el.$destroy()
-                document.body.removeChild(el.$el)
-              },
-              changeRemark: data => {
-                options.editRemarkCallbak && options.editRemarkCallbak(data)
-              },
-            },
-            props: {
-              user_id,
-            },
-          })
-        },
-      }).$mount()
+      const container = document.createElement("div");
+      document.body.appendChild(container);
 
-      document.body.appendChild(el.$el)
+      const cardApp = createApp({
+        render() {
+          return h(UserCardDetail, {
+            user_id,
+            onClose: () => {
+              cardApp.unmount();
+              document.body.removeChild(container);
+            },
+            onChangeRemark: (data) => {
+              options.editRemarkCallbak && options.editRemarkCallbak(data);
+            },
+          });
+        },
+      });
+
+      setupElementPlus(cardApp);
+      setupLegacyMessage(cardApp);
+      registerDirectives(cardApp);
+      cardApp.use(router);
+      cardApp.use(store);
+      cardApp.mount(container);
     }
 
-    Vue.prototype.$user = user
+    app.config.globalProperties.$user = user;
   },
-}
+};
diff --git a/im/src/core/directives.js b/im/src/core/directives.js
index a1162a0e..0a7c7de8 100644
--- a/im/src/core/directives.js
+++ b/im/src/core/directives.js
@@ -1,49 +1,57 @@
-import Vue from 'vue'
-import Clickoutside from 'element-ui/src/utils/clickoutside'
+function onClickOutside(el, binding) {
+  const handler = (e) => {
+    if (!el.contains(e.target)) {
+      binding.value(e);
+    }
+  };
+  el.__clickOutsideHandler__ = handler;
+  document.addEventListener("click", handler);
+}
 
-// 自定义聚焦指令
-Vue.directive('focus', {
-  inserted(el) {
-    el.focus()
-  },
-})
+function offClickOutside(el) {
+  if (el.__clickOutsideHandler__) {
+    document.removeEventListener("click", el.__clickOutsideHandler__);
+    delete el.__clickOutsideHandler__;
+  }
+}
 
-// 自定义粘贴指令
-Vue.directive('paste', {
-  bind(el, binding, vnode) {
-    el.addEventListener('paste', function(event) {
-      //这里直接监听元素的粘贴事件
-      binding.value(event)
-    })
-  },
-})
+export function registerDirectives(app) {
+  app.directive("focus", {
+    mounted(el) {
+      el.focus();
+    },
+  });
 
-// 自定义拖拽指令
-Vue.directive('drag', {
-  bind(el, binding, vnode) {
-    // 因为拖拽还包括拖动时的经过事件，离开事件，和进入事件，放下事件，
-    // 浏览器对于拖拽的默认事件的处理是打开拖进来的资源，
-    // 所以要先对这三个事件进行默认事件的禁止
-    el.addEventListener('dragenter', function(event) {
-      event.stopPropagation()
-      event.preventDefault()
-    })
-    el.addEventListener('dragover', function(event) {
-      event.stopPropagation()
-      event.preventDefault()
-    })
-    el.addEventListener('dragleave', function(event) {
-      event.stopPropagation()
-      event.preventDefault()
-    })
-    el.addEventListener('drop', function(event) {
-      // 这里阻止默认事件，并绑定事件的对象，用来在组件上返回事件对象
-      event.stopPropagation()
-      event.preventDefault()
-      binding.value(event)
-    })
-  },
-})
+  app.directive("paste", {
+    mounted(el, binding) {
+      el.addEventListener("paste", (event) => {
+        binding.value(event);
+      });
+    },
+  });
 
-// 点击其他地方隐藏指令
-Vue.directive('outside', Clickoutside)
+  app.directive("drag", {
+    mounted(el, binding) {
+      const stop = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+      };
+      el.addEventListener("dragenter", stop);
+      el.addEventListener("dragover", stop);
+      el.addEventListener("dragleave", stop);
+      el.addEventListener("drop", (event) => {
+        stop(event);
+        binding.value(event);
+      });
+    },
+  });
+
+  app.directive("outside", {
+    mounted(el, binding) {
+      onClickOutside(el, binding);
+    },
+    unmounted(el) {
+      offClickOutside(el);
+    },
+  });
+}
diff --git a/im/src/core/global-component.js b/im/src/core/global-component.js
index d4166261..11cf62a2 100644
--- a/im/src/core/global-component.js
+++ b/im/src/core/global-component.js
@@ -1,4 +1,3 @@
-import Vue from "vue";
 import {
   AudioMessage,
   CodeMessage,
@@ -16,22 +15,29 @@ import {
   VoteMessage,
   LoginMessage,
 } from "@/components/chat/messaege";
-
-Vue.component(AudioMessage.name, AudioMessage);
-Vue.component(CodeMessage.name, CodeMessage);
-Vue.component(ForwardMessage.name, ForwardMessage);
-Vue.component(ImageMessage.name, ImageMessage);
-Vue.component(TextMessage.name, TextMessage);
-Vue.component(VideoMessage.name, VideoMessage);
-Vue.component(VoiceMessage.name, VoiceMessage);
-Vue.component(SystemTextMessage.name, SystemTextMessage);
-Vue.component(FileMessage.name, FileMessage);
-Vue.component(InviteMessage.name, InviteMessage);
-Vue.component(RevokeMessage.name, RevokeMessage);
-Vue.component(VisitCardMessage.name, VisitCardMessage);
-Vue.component(ReplyMessage.name, ReplyMessage);
-Vue.component(VoteMessage.name, VoteMessage);
-Vue.component(LoginMessage.name, LoginMessage);
-
 import UserCard from "@/components/user/user-card/index";
-Vue.use(UserCard);
+
+const messageComponents = [
+  AudioMessage,
+  CodeMessage,
+  ForwardMessage,
+  ImageMessage,
+  TextMessage,
+  VideoMessage,
+  VoiceMessage,
+  SystemTextMessage,
+  FileMessage,
+  InviteMessage,
+  RevokeMessage,
+  VisitCardMessage,
+  ReplyMessage,
+  VoteMessage,
+  LoginMessage,
+];
+
+export function registerGlobalComponents(app) {
+  messageComponents.forEach((component) => {
+    app.component(component.name, component);
+  });
+  app.use(UserCard);
+}
diff --git a/im/src/core/icons.js b/im/src/core/icons.js
index dfe7eceb..9ac874c8 100644
--- a/im/src/core/icons.js
+++ b/im/src/core/icons.js
@@ -1,22 +1,21 @@
-/**
- * Custom icon list
- * All icons are loaded here for easy management
- *
- * 自定义图标加载表
- * 所有图标均从这里加载，方便管理
- */
-import SvgMentionDown from '@/icons/svg/mention-down.svg?inline' // path to your '*.svg?inline' file.
-import SvgNotFount from '@/icons/svg/not-fount.svg?inline' // path to your '*.svg?inline' file.
-import SvgNote from '@/icons/svg/note.svg?inline' // path to your '*.svg?inline' file.
-import SvgNoteBook from '@/icons/svg/note-book.svg?inline' // path to your '*.svg?inline' file.
-import SvgNotData from '@/icons/svg/not-data.svg?inline' // path to your '*.svg?inline' file.
-import SvgZhuangFa from '@/icons/svg/zhuangfa.svg?inline' // path to your '*.svg?inline' file.
+import { h } from "vue";
 
-export {
-  SvgMentionDown,
-  SvgNotFount,
-  SvgNote,
-  SvgNoteBook,
-  SvgNotData,
-  SvgZhuangFa,
+function createSvgIcon(name) {
+  return {
+    name: `SvgIcon_${name}`,
+    inheritAttrs: false,
+    render() {
+      return h("svg-icon", {
+        iconClass: name,
+        ...this.$attrs,
+      });
+    },
+  };
 }
+
+export const SvgMentionDown = createSvgIcon("mention-down");
+export const SvgNotFount = createSvgIcon("not-fount");
+export const SvgNote = createSvgIcon("note");
+export const SvgNoteBook = createSvgIcon("note-book");
+export const SvgNotData = createSvgIcon("not-data");
+export const SvgZhuangFa = createSvgIcon("zhuangfa");
diff --git a/im/src/core/lazy-use.js b/im/src/core/lazy-use.js
deleted file mode 100644
index 38ea74d0..00000000
--- a/im/src/core/lazy-use.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import Vue from 'vue'
-import 'element-ui/lib/theme-chalk/index.css'
-
-import {
-  Notification,
-  Popover,
-  Switch,
-  Dropdown,
-  DropdownMenu,
-  DropdownItem,
-  Message,
-  Container,
-  Header,
-  Aside,
-  Main,
-  Footer,
-  Menu,
-  Submenu,
-  MenuItem,
-  MenuItemGroup,
-  Button,
-  Image,
-  Loading,
-  Row,
-  Col,
-  MessageBox,
-  Form,
-  FormItem,
-  Input,
-  Divider,
-  Link,
-  Tooltip,
-  Autocomplete,
-  Scrollbar,
-  Avatar,
-  Radio,
-  RadioGroup,
-  Progress,
-  Dialog,
-  Checkbox,
-  Tag
-} from 'element-ui'
-
-Vue.use(Popover)
-Vue.use(Switch)
-Vue.use(Dropdown)
-Vue.use(DropdownMenu)
-Vue.use(DropdownItem)
-Vue.use(Container)
-Vue.use(Header)
-Vue.use(Aside)
-Vue.use(Main)
-Vue.use(Footer)
-Vue.use(Menu)
-Vue.use(Submenu)
-Vue.use(MenuItem)
-Vue.use(MenuItemGroup)
-Vue.use(Button)
-Vue.use(Image)
-Vue.use(Row)
-Vue.use(Col)
-Vue.use(Input)
-Vue.use(Form)
-Vue.use(FormItem)
-Vue.use(Divider)
-Vue.use(Link)
-Vue.use(Tooltip)
-Vue.use(Autocomplete)
-Vue.use(Scrollbar)
-Vue.use(Avatar)
-Vue.use(Radio)
-Vue.use(Checkbox)
-Vue.use(RadioGroup)
-Vue.use(Progress)
-Vue.use(Dialog)
-Vue.use(Tag)
-Vue.use(Loading.directive)
-
-Vue.prototype.$notify = Notification
-Vue.prototype.$message = Message
-Vue.prototype.$confirm = MessageBox.confirm
-Vue.prototype.$prompt = MessageBox.prompt
-Vue.prototype.$alert = MessageBox.alert
-
-import Contextmenu from 'vue-contextmenujs'
-Vue.use(Contextmenu)
-
-
diff --git a/im/src/icons/index.js b/im/src/icons/index.js
index 75da57f0..d315b013 100644
--- a/im/src/icons/index.js
+++ b/im/src/icons/index.js
@@ -1,9 +1,10 @@
-import Vue from 'vue';
-import SvgIcon from '@/components/svg-icon'; // svg component
+import SvgIcon from "@/components/svg-icon";
 
-// register globally
-Vue.component('svg-icon', SvgIcon);
+export function registerIcons(app) {
+  app.component("svg-icon", SvgIcon);
 
-const req = require.context('./svg', false, /\.svg$/);
-const requireAll = requireContext => requireContext.keys().map(requireContext);
-requireAll(req);
+  const req = require.context("./svg", false, /\.svg$/);
+  const requireAll = (requireContext) =>
+    requireContext.keys().map(requireContext);
+  requireAll(req);
+}
diff --git a/im/src/im-server/event/base.js b/im/src/im-server/event/base.js
index cf9f0dc4..43f12d5b 100644
--- a/im/src/im-server/event/base.js
+++ b/im/src/im-server/event/base.js
@@ -1,13 +1,13 @@
 import store from "@/store";
 import router from "@/router";
-import { Notification } from "element-ui";
+import { ElNotification } from "element-plus";
 
 class Base {
   /**
    * 初始化
    */
   constructor() {
-    this.$notify = Notification;
+    this.$notify = ElNotification;
   }
 
   getStoreInstance() {
@@ -54,7 +54,7 @@ class Base {
    * 判断用户是否打开对话页
    */
   isTalkPage() {
-    let path = router.currentRoute.path;
+    let path = router.currentRoute.value.path;
     return !(path != "/message" && path != "/");
   }
 }
diff --git a/im/src/im-server/event/talk.js b/im/src/im-server/event/talk.js
index 52d487d9..bf8b9832 100644
--- a/im/src/im-server/event/talk.js
+++ b/im/src/im-server/event/talk.js
@@ -1,7 +1,6 @@
 import Base from "./base";
-import Vue from "vue";
-import router from "@/router";
-import vm from "@/main";
+import { nextTick } from "vue";
+import { getAppBridge } from "@/utils/app-bridge";
 import NewMessageNotify from "@/components/notify/NewMessageNotify";
 import { ServeClearTalkUnreadNum, ServeCreateTalkList } from "@/api/chat";
 import { formatTalkItem, findTalkIndex, toTalk } from "@/utils/talk";
@@ -46,11 +45,11 @@ class Talk extends Base {
     this.resource = resource;
 
     // 判断发送者消息是否在当前用户列表中 
-    if (this.sender_id && !vm.$store.state.talks.items.find(item => {
+    const bridge = getAppBridge();
+    if (this.sender_id && !bridge.$store.state.talks.items.find(item => {
       return item.userId == this.sender_id
     })) {
-      // 没有当前用户，未在当前列表 进行重新加载
-      vm.loadUserSetting('update')
+      bridge.loadUserSetting('update')
     }
   }
 
@@ -147,15 +146,14 @@ class Talk extends Base {
       receiver_id = this.sender_id;
     }
 
+    const bridge = getAppBridge();
     this.$notify({
-      message: vm.$createElement(NewMessageNotify, {
-        props: {
-          avatar,
-          talk_type,
-          nickname,
-          content: this.getTalkText(),
-          datetime: this.resource.created_at,
-        },
+      message: bridge.$createElement(NewMessageNotify, {
+        avatar,
+        talk_type,
+        nickname,
+        content: this.getTalkText(),
+        datetime: this.resource.created_at,
       }),
       customClass: "im-notify",
       duration: 3000,
@@ -211,7 +209,7 @@ class Talk extends Base {
       record.userId == this.getAccountId() ||
       record.fromUser == this.getAccountId()
     ) {
-      Vue.nextTick(() => {
+      nextTick(() => {
         el.scrollTop = el.scrollHeight;
       });
     } else {
diff --git a/im/src/im-server/socket-instance.js b/im/src/im-server/socket-instance.js
index bd7ce4a3..6128329b 100644
--- a/im/src/im-server/socket-instance.js
+++ b/im/src/im-server/socket-instance.js
@@ -2,7 +2,7 @@ import store from "@/store";
 import config from "@/config/config";
 import WsSocket from "@/plugins/ws-socket";
 import { getToken } from "@/utils/auth";
-import { Notification } from "element-ui";
+import { ElNotification } from "element-plus";
 
 // 引入消息处理类
 import KeyboardEvent from "@/im-server/event/keyboard";
@@ -86,7 +86,7 @@ class SocketInstance {
     });
 
     this.socket.on("event_error", (data) => {
-      Notification({
+      ElNotification({
         title: "友情提示",
         message: data.message,
         type: "warning",
diff --git a/im/src/main.js b/im/src/main.js
index 872f3c2e..4a6bb30d 100644
--- a/im/src/main.js
+++ b/im/src/main.js
@@ -1,82 +1,65 @@
-import 'core-js/stable'
-import 'regenerator-runtime/runtime'
+import "core-js/stable";
 
-// 引入 Vue 和应用程序组件
-import Vue from 'vue'
-import App from '@/App'
-
-// 引入 store 和 router
-import store from '@/store'
-import router from '@/router'
-
-// 引入自定义的 mixin
-import MainMixin from './mixins/main-mixin'
-
-// 引入全局组件
-import face from '@/components/face'
-import faceNull from '@/components/face-null'
-
-// 引入配置文件和其他核心模块
+import { createApp } from "vue";
+import App from "@/App.vue";
+import store from "@/store";
+import router from "@/router";
+import MainMixin from "./mixins/main-mixin";
+import face from "@/components/face";
+import faceNull from "@/components/face-null";
 import config from "@/config/config";
-import './core/lazy-use'
-import './core/global-component'
-import './core/filter'
-import './core/directives'
-
-// 引入权限控制和图标库
-import '@/permission'
-import '@/icons'
-
-// 引入自定义过滤器，并注册为全局过滤器
+import { setupElementPlus } from "@/plugins/element";
+import { setupLegacyMessage } from "@/utils/message";
+import { registerDirectives } from "./core/directives";
+import { registerGlobalComponents } from "./core/global-component";
+import { registerIcons } from "@/icons";
 import * as filters from "./plugins/filters";
-Object.keys(filters).forEach((key) => {
-  Vue.filter(key, filters[key]);
+
+import VueVirtualScroller from "vue-virtual-scroller";
+import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
+
+import { setupContextmenu } from "@/plugins/contextmenu";
+import "@/permission";
+import "@/assets/css/global.less";
+
+const app = createApp(App);
+
+setupElementPlus(app);
+setupLegacyMessage(app);
+registerDirectives(app);
+registerGlobalComponents(app);
+registerIcons(app);
+
+app.use(store);
+app.use(router);
+setupContextmenu(app);
+app.use(VueVirtualScroller);
+app.mixin(MainMixin);
+
+app.component("face", face);
+app.component("face-null", faceNull);
+app.component("RecycleScroller", VueVirtualScroller.RecycleScroller);
+
+app.config.globalProperties.$filters = filters;
+app.config.globalProperties.linkToGoods = function (goodsId, skuId) {
+  window.open(
+    `${config.PC_URL}goodsDetail?skuId=${skuId}&goodsId=${goodsId}`,
+    "_blank"
+  );
+};
+app.config.globalProperties.linkToStore = function (storeId) {
+  window.open(`${config.PC_URL}/Merchant?id=${storeId}`, "_blank");
+};
+app.config.globalProperties.linkToOrders = function (sn) {
+  if (localStorage.getItem("storeFlag") == "false") {
+    window.open(`${config.PC_STORE}order-detail?sn=${sn}`, "_blank");
+  } else {
+    window.open(`${config.PC_URL}home/OrderDetail?sn=${sn}`, "_blank");
+  }
+};
+
+router.isReady().then(() => {
+  app.mount("#app");
 });
 
-
-import VueVirtualScroller from 'vue-virtual-scroller'
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-Vue.component('RecycleScroller', VueVirtualScroller.RecycleScroller)
-
-// 引入自定义全局css
-import '@/assets/css/global.less'
-
-// 关闭生产提示
-Vue.config.productionTip = false
-
-// 注册全局 mixin
-Vue.mixin(MainMixin) 
-Vue.component('face', face)
-Vue.component('face-null', faceNull)
-
-
-// 添加自定义原型方法
-Vue.prototype.linkToGoods = function (goodsId, skuId) {  // 跳转买家端商品
-  if (localStorage.getItem('storeFlag') == 'false') {
-    window.open(`${config.PC_URL}goodsDetail?skuId=${skuId}&goodsId=${goodsId}`, '_blank')
-  } else {
-    window.open(`${config.PC_URL}goodsDetail?skuId=${skuId}&goodsId=${goodsId}`, '_blank')
-  }
-};
-Vue.prototype.linkToStore = function (storeId) {  // 跳转商家端商品
-  console.log(`${config.PC_URL}/Merchant?id=${storeId}`)
-  window.open(`${config.PC_URL}/Merchant?id=${storeId}`, '_blank')
-};
-// 订单跳转商家订单页面
-Vue.prototype.linkToOrders = function (sn) {
-  if (localStorage.getItem('storeFlag') == 'false') {
-    // 商家
-    window.open(`${config.PC_STORE}order-detail?sn=${sn}`, '_blank')
-  } else {
-    // 用户
-    window.open(`${config.PC_URL}home/OrderDetail?sn=${sn}`, '_blank')
-  }
-};
-
-const Instance = new Vue({
-  router,
-  store,
-  mixins: [MainMixin],
-  render: h => h(App),
-}).$mount('#app')
-export default Instance
+export default app;
diff --git a/im/src/mixins/main-mixin.js b/im/src/mixins/main-mixin.js
index 5e2f3aba..12b4295b 100644
--- a/im/src/mixins/main-mixin.js
+++ b/im/src/mixins/main-mixin.js
@@ -119,7 +119,7 @@ export default {
 
 
     reload() {
-      this.$root.$children[0].refreshView();
+      import("@/utils/app-bridge").then(({ refreshView }) => refreshView());
     },
   },
 };
diff --git a/im/src/plugins/contextmenu.js b/im/src/plugins/contextmenu.js
new file mode 100644
index 00000000..22f823cf
--- /dev/null
+++ b/im/src/plugins/contextmenu.js
@@ -0,0 +1,110 @@
+import { createApp, h, onMounted, onUnmounted } from "vue";
+
+let activeMenu = null;
+
+function destroyMenu() {
+  if (!activeMenu) return;
+  activeMenu.app.unmount();
+  if (activeMenu.el?.parentNode) {
+    activeMenu.el.parentNode.removeChild(activeMenu.el);
+  }
+  activeMenu = null;
+}
+
+function normalizeOptions(options) {
+  if (Array.isArray(options)) {
+    return { items: options };
+  }
+  return options || { items: [] };
+}
+
+function showContextmenu(options) {
+  destroyMenu();
+
+  const {
+    items = [],
+    event,
+    x = 0,
+    y = 0,
+    customClass = "",
+    zIndex = 3000,
+    minWidth = 120,
+  } = normalizeOptions(options);
+
+  const left = event?.clientX ?? x;
+  const top = event?.clientY ?? y;
+  const el = document.createElement("div");
+  document.body.appendChild(el);
+
+  const app = createApp({
+    setup() {
+      const close = () => destroyMenu();
+
+      onMounted(() => {
+        document.addEventListener("click", close);
+        document.addEventListener("contextmenu", close);
+        document.addEventListener("wheel", close, { passive: true });
+      });
+
+      onUnmounted(() => {
+        document.removeEventListener("click", close);
+        document.removeEventListener("contextmenu", close);
+        document.removeEventListener("wheel", close);
+      });
+
+      return () =>
+        h(
+          "div",
+          {
+            class: ["im-contextmenu", customClass].filter(Boolean),
+            style: {
+              position: "fixed",
+              left: `${left}px`,
+              top: `${top}px`,
+              zIndex,
+              minWidth: `${minWidth}px`,
+            },
+            onContextmenu: (e) => e.preventDefault(),
+          },
+          items.flatMap((item, index) => {
+            const nodes = [];
+            if (item.divided && index > 0) {
+              nodes.push(h("div", { class: "im-contextmenu-divider" }));
+            }
+            nodes.push(renderMenuItem(item, close));
+            return nodes;
+          })
+        );
+    },
+  });
+
+  activeMenu = { app, el };
+  app.mount(el);
+}
+
+function renderMenuItem(item, close) {
+  return h(
+    "div",
+    {
+      class: [
+        "im-contextmenu-item",
+        item.customClass,
+        item.disabled ? "is-disabled" : "",
+      ].filter(Boolean),
+      onClick: (e) => {
+        e.stopPropagation();
+        if (item.disabled) return;
+        item.onClick?.();
+        close();
+      },
+    },
+    [
+      item.icon ? h("i", { class: item.icon }) : null,
+      h("span", item.label),
+    ]
+  );
+}
+
+export function setupContextmenu(app) {
+  app.config.globalProperties.$contextmenu = showContextmenu;
+}
diff --git a/im/src/plugins/element.js b/im/src/plugins/element.js
new file mode 100644
index 00000000..89d3759b
--- /dev/null
+++ b/im/src/plugins/element.js
@@ -0,0 +1,10 @@
+import ElementPlus from "element-plus";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+import "element-plus/dist/index.css";
+
+export function setupElementPlus(app) {
+  app.use(ElementPlus, {
+    locale: zhCn,
+    size: "default",
+  });
+}
diff --git a/im/src/plugins/ws-socket.js b/im/src/plugins/ws-socket.js
index 21ecd690..9b70a0b4 100644
--- a/im/src/plugins/ws-socket.js
+++ b/im/src/plugins/ws-socket.js
@@ -1,4 +1,4 @@
-import { Notification, MessageBox  } from "element-ui";
+import { ElNotification, ElMessageBox } from "element-plus";
 let wsSignIn; // ws 是否是掉线状态
 import store from "@/store";
 class WsSocket {
@@ -84,7 +84,7 @@ class WsSocket {
       store.commit('SET_WS_STATUS',true);
       wsSignIn.close();
 
-      Notification({
+      ElNotification({
         title: "成功",
         message: "重连成功",
         type: "success",
@@ -125,7 +125,7 @@ class WsSocket {
      * 长时间挂载页面中并且重连次数为空的时候进行提示
      */
     if (this.config.reconnect.number == 0) {
-      MessageBox("当前对话链接已失效，请从关闭重新进入。", "提示", {
+      ElMessageBox("当前对话链接已失效，请从关闭重新进入。", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         closeOnPressEscape: false,
@@ -134,7 +134,7 @@ class WsSocket {
       })
         .then(() => {
           window.close();
-          Notification({
+          ElNotification({
             title: "对话链接已失效提示",
             message: "请手动关闭当前页面",
             type: "error",
@@ -142,7 +142,7 @@ class WsSocket {
           });
         })
         .catch(() => {
-          Notification({
+          ElNotification({
             title: "对话链接已失效提示",
             message: "请手动关闭当前页面",
             type: "error",
@@ -152,7 +152,7 @@ class WsSocket {
       return false;
     }
     // 掉线重连提示
-    wsSignIn = Notification({
+    wsSignIn = ElNotification({
       title: "掉线重连接提示",
       message: `网络连接已断开，正在尝试重新连接......`,
       type: "error",
diff --git a/im/src/router/index.js b/im/src/router/index.js
index 930be40b..5cda87a8 100644
--- a/im/src/router/index.js
+++ b/im/src/router/index.js
@@ -1,44 +1,38 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-
-Vue.use(Router)
-
-const RouteView = {
-    name: 'RouteView',
-    render: h => h('router-view'),
-}
+import { createRouter, createWebHistory } from "vue-router";
 
 const routes = [
-    {
-        path: '/',
-        name: 'home',
-        component: () => import('@/views/message/index'),
-        meta: {
-            title: '',
-            needLogin: true,
-        },
+  {
+    path: "/",
+    name: "home",
+    component: () => import("@/views/message/index"),
+    meta: {
+      title: "",
+      needLogin: true,
     },
-    {
-        path: '/message',
-        name: 'message',
-        component: () => import('@/views/message/index'),
-        meta: {
-            title: '消息通知',
-            needLogin: true,
-        },
+  },
+  {
+    path: "/message",
+    name: "message",
+    component: () => import("@/views/message/index"),
+    meta: {
+      title: "消息通知",
+      needLogin: true,
     },
-    {
-        path: '*',
-        name: '404 NotFound',
-        component: () => import('@/views/other/404'),
-        meta: {
-            title: '404 NotFound',
-            needLogin: false,
-        },
+  },
+  {
+    path: "/:pathMatch(.*)*",
+    name: "404 NotFound",
+    component: () => import("@/views/other/404"),
+    meta: {
+      title: "404 NotFound",
+      needLogin: false,
     },
-]
+  },
+];
 
-export default new Router({
-    routes,
-    mode: 'history',
-})
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;
diff --git a/im/src/store/index.js b/im/src/store/index.js
index b4995740..f3cda89e 100644
--- a/im/src/store/index.js
+++ b/im/src/store/index.js
@@ -1,21 +1,18 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { createStore } from "vuex";
 
-import user from './modules/user'
-import talks from './modules/talk'
-import notify from './modules/notify'
-import settings from './modules/settings'
-import emoticon from './modules/emoticon'
-import dialogue from './modules/dialogue'
-import note from './modules/note'
+import user from "./modules/user";
+import talks from "./modules/talk";
+import notify from "./modules/notify";
+import settings from "./modules/settings";
+import emoticon from "./modules/emoticon";
+import dialogue from "./modules/dialogue";
+import note from "./modules/note";
 
-import state from './state'
-import getters from './getters'
-import mutations from './mutations'
+import state from "./state";
+import getters from "./getters";
+import mutations from "./mutations";
 
-Vue.use(Vuex)
-
-const store = new Vuex.Store({
+const store = createStore({
   modules: {
     user,
     notify,
@@ -28,6 +25,6 @@ const store = new Vuex.Store({
   state,
   getters,
   mutations,
-})
+});
 
-export default store
+export default store;
diff --git a/im/src/store/modules/emoticon.js b/im/src/store/modules/emoticon.js
index f4a841fc..f8868f91 100644
--- a/im/src/store/modules/emoticon.js
+++ b/im/src/store/modules/emoticon.js
@@ -2,7 +2,7 @@ import { ServeFindUserEmoticon, ServeUploadEmoticon } from "@/api/emoticon";
 
 import { ServeCollectEmoticon } from "@/api/chat";
 
-import { Notification } from "element-ui";
+import { ElNotification } from "element-plus";
 
 export default {
   state: {
@@ -36,7 +36,7 @@ export default {
       })
         .then((res) => {
           if (res.code == 200) {
-            Notification({
+            ElNotification({
               title: "收藏提示",
               message: "表情包收藏成功...",
               type: "success",
@@ -46,7 +46,7 @@ export default {
           }
         })
         .catch(() => {
-          Notification({
+          ElNotification({
             title: "收藏提示",
             message: "表情包收藏失败...",
             type: "warning",
@@ -65,7 +65,7 @@ export default {
           }
         })
         .catch(() => {
-          Notification({
+          ElNotification({
             message: "网络异常请稍后再试...",
             type: "error",
             duration: 3000,
diff --git a/im/src/store/modules/talk.js b/im/src/store/modules/talk.js
index e7770c6f..b46153fa 100644
--- a/im/src/store/modules/talk.js
+++ b/im/src/store/modules/talk.js
@@ -1,8 +1,6 @@
 import { getSort, getMutipSort } from "@/utils/functions";
 import { formatTalkItem } from "@/utils/talk";
 import { ServeGetTalkList } from "@/api/chat";
-import store from '@/store/index.js'
-import Vue from 'vue'
 const Talk = {
   state: {
     // 用户对话列表
@@ -40,7 +38,7 @@ const Talk = {
    
     // 设置对话列表
     SET_TALK_ITEMS (state, resource) {
-      Vue.set(state, 'items', resource.items)
+      state.items = resource.items;
     },
 
     // 更新对话节点
diff --git a/im/src/utils/app-bridge.js b/im/src/utils/app-bridge.js
new file mode 100644
index 00000000..726dc364
--- /dev/null
+++ b/im/src/utils/app-bridge.js
@@ -0,0 +1,37 @@
+import { h } from "vue";
+import store from "@/store";
+import router from "@/router";
+import MainMixin from "@/mixins/main-mixin";
+
+let refreshViewFn = null;
+
+const mixinCtx = {
+  get $store() {
+    return store;
+  },
+  get $router() {
+    return router;
+  },
+  get $route() {
+    return router.currentRoute.value;
+  },
+};
+
+export function setRefreshView(fn) {
+  refreshViewFn = fn;
+}
+
+export function refreshView() {
+  refreshViewFn?.();
+}
+
+export function getAppBridge() {
+  return {
+    $store: store,
+    $router: router,
+    $route: router.currentRoute.value,
+    $createElement: h,
+    loadUserSetting: MainMixin.methods.loadUserSetting.bind(mixinCtx),
+    refreshView,
+  };
+}
diff --git a/im/src/utils/message.js b/im/src/utils/message.js
new file mode 100644
index 00000000..0accdec9
--- /dev/null
+++ b/im/src/utils/message.js
@@ -0,0 +1,11 @@
+import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
+
+export { ElNotification, ElMessage, ElMessageBox };
+
+export function setupLegacyMessage(app) {
+  app.config.globalProperties.$message = ElMessage;
+  app.config.globalProperties.$notify = ElNotification;
+  app.config.globalProperties.$confirm = ElMessageBox.confirm;
+  app.config.globalProperties.$prompt = ElMessageBox.prompt;
+  app.config.globalProperties.$alert = ElMessageBox.alert;
+}
diff --git a/im/src/utils/request.js b/im/src/utils/request.js
index eedb8d92..0ea22677 100644
--- a/im/src/utils/request.js
+++ b/im/src/utils/request.js
@@ -2,7 +2,7 @@ import axios from "axios";
 import config from "@/config/config";
 import { getToken, removeAll } from "@/utils/auth";
 
-import { Notification, MessageBox } from "element-ui";
+import { ElNotification, ElMessageBox } from "element-plus";
 import qs from "qs";
 
 // 创建 axios 实例
@@ -33,7 +33,7 @@ const errorHandler = (error) => {
       /**
        * 403提示将重新从商家移动端进入当前页面
        */
-      MessageBox("当前登录已失效，请从关闭重新进入。", "提示", {
+      ElMessageBox("当前登录已失效，请从关闭重新进入。", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         closeOnPressEscape: false,
@@ -43,7 +43,7 @@ const errorHandler = (error) => {
         .then(() => {
           isRefreshing = true
           window.close();
-          Notification({
+          ElNotification({
             title:"登录失效提示",
             message: "请手动关闭当前页面",
             type:"error",
@@ -53,7 +53,7 @@ const errorHandler = (error) => {
         })
         .catch(() => {
           isRefreshing = true
-          Notification({
+          ElNotification({
             title:"登录失效提示",
             message: "请手动关闭当前页面",
             type:"error",
@@ -63,7 +63,7 @@ const errorHandler = (error) => {
         isRefreshing = false
       }
     } else if(error.response.status == 400){
-      Notification({
+      ElNotification({
         message: error.response.data.message,
         position: "top-right",
         type:"error",
diff --git a/im/src/views/message/index.vue b/im/src/views/message/index.vue
index a2cdc7e9..5bc39888 100644
--- a/im/src/views/message/index.vue
+++ b/im/src/views/message/index.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="wrapper">
     <MainLayout :idx="0" ref="mainLayout">
-      <el-container slot="container" class="full-height">
+      <template #container>
+      <el-container class="full-height">
         <!-- 左侧侧边栏 -->
         <el-aside width="320px" class="aside-box">
           <el-container class="full-height" direction="vertical">
             <!-- 搜索栏 -->
             <el-header height="60px" class="header">
-              <div class="user-login" v-popover:usercard>
+              <div class="user-login">
                 <div class="user-box">
                   <face :text="face" :name="name" class="user-face"></face>
                 </div>
@@ -142,6 +143,7 @@
           <!-- <OtherLink :toUser="toUser" :goodsParams="goodsParams" :id="id" class="flex-4"/> -->
         </el-main>
       </el-container>
+      </template>
     </MainLayout>
 
     <!-- 用户查询组件 -->
@@ -149,8 +151,6 @@
   </div>
 </template>
 <script>
-import { RecycleScroller } from 'vue-virtual-scroller'
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import { mapGetters, mapState } from "vuex";
 import MainLayout from "@/views/layout/MainLayout";
 import WelcomeModule from "@/components/layout/WelcomeModule";
@@ -179,7 +179,6 @@ export default {
     UserSearch,
     OtherLink,
     WelcomeModule,
-    RecycleScroller
   },
   data () {
     return {
@@ -247,7 +246,7 @@ export default {
   },
   watch: {
     talkItems (val) {
-      val ? this.$set(this, "userTalkItem", val) : "";
+      if (val) this.userTalkItem = val;
     },
     // 搜索用户的时候 根据当前用户表进行模糊搜索
     input (val, oldVal) {
@@ -312,7 +311,7 @@ export default {
   mounted () {
     this.scrollEvent();
   },
-  destroyed () {
+  beforeUnmount () {
     document.title = title;
     clearInterval(this.interval);
     this.clearTalk();
@@ -665,7 +664,7 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-/deep/ .el-scrollbar__wrap {
+:deep(.el-scrollbar__wrap ) {
   overflow-x: hidden;
 }
 .user-status{
@@ -689,7 +688,7 @@ export default {
       flex-shrink: 0;
       height: 40px;
 
-      /deep/ .el-input .el-input__inner {
+      :deep(.el-input .el-input__inner ) {
         border-radius: 20px;
       }
     }
diff --git a/im/src/views/other/404.vue b/im/src/views/other/404.vue
index 01daddfd..d8aa49b2 100644
--- a/im/src/views/other/404.vue
+++ b/im/src/views/other/404.vue
@@ -39,7 +39,7 @@ export default {
       }
     }, 1000)
   },
-  destroyed() {
+  beforeUnmount() {
     clearInterval(this.setInterval)
   },
   methods: {
diff --git a/im/vue.config.js b/im/vue.config.js
index 129c00df..4e91e9d6 100644
--- a/im/vue.config.js
+++ b/im/vue.config.js
@@ -9,17 +9,6 @@ function resolve(dir) {
   return path.join(__dirname, dir)
 }
 
-const assetsCDN = {
-  externals: {
-    vue: 'Vue',
-
-  },
-  css: [],
-  js: [
-    'https://cdn.pickmall.cn/cdn/vue.min.js',
-  ],
-}
-
 // vue.config.js
 const vueConfig = {
   // 公共路径(必须有的)
@@ -57,37 +46,24 @@ const vueConfig = {
       }),
     ],
 
-    // if prod, add externals
-    externals: isProd ? assetsCDN.externals : {},
   },
 
   chainWebpack: config => {
     config.resolve.alias.set('@', resolve('src'))
 
-    const svgRule = config.module.rule('svg')
-    svgRule.uses.clear()
-    svgRule
-      .oneOf('inline')
-      .resourceQuery(/inline/)
-      .use('vue-svg-icon-loader')
-      .loader('vue-svg-icon-loader')
+    config.module.rule('svg').exclude.add(resolve('src/icons/svg')).end()
+
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/icons/svg'))
       .end()
-      .end()
-      .oneOf('external')
-      .use('file-loader')
-      .loader('file-loader')
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
       .options({
-        name: 'assets/[name].[hash:8].[ext]',
+        symbolId: 'icon-[name]',
       })
 
-    // if prod is on
-    // assets require on cdn
-    if (isProd) {
-      config.plugin('html').tap(args => {
-        args[0].cdn = assetsCDN
-        return args
-      })
-    }
   },
   pluginOptions: {
     'style-resources-loader': {
diff --git a/manager/src/views/page-decoration/modelList/forYour.vue b/manager/src/views/page-decoration/modelList/forYour.vue
index 9a0fe59e..928b5a70 100644
--- a/manager/src/views/page-decoration/modelList/forYour.vue
+++ b/manager/src/views/page-decoration/modelList/forYour.vue
@@ -60,7 +60,7 @@
             主标题:
             <el-input style="width: 200px" v-model="data.options.title" />
           </div>
-          <Divider>左侧商品部分</Divider>
+          <el-divider content-position="left">左侧商品部分</el-divider>
           <div class="flex">
             <div>图片 :</div>
             <div>
@@ -92,7 +92,7 @@
             </div>
           </div>
 
-          <Divider>中间商品部分</Divider>
+          <el-divider content-position="left">中间商品部分</el-divider>
           <div class="flex column-list">
             <div
               v-for="(item, index) in data.options.data.list"
@@ -124,7 +124,7 @@
               </div>
             </div>
           </div>
-          <Divider>右侧商品部分</Divider>
+          <el-divider content-position="left">右侧商品部分</el-divider>
           <div class="flex">
             <div>右侧标题 :</div>
             <el-input
diff --git a/manager/src/views/page-decoration/wap/index.vue b/manager/src/views/page-decoration/wap/index.vue
index d9887e3e..fa1e5703 100644
--- a/manager/src/views/page-decoration/wap/index.vue
+++ b/manager/src/views/page-decoration/wap/index.vue
@@ -44,7 +44,7 @@
               <component
                 class="component"
                 :class="{ active: selected == index }"
-                @click.native="handleComponent(element, index)"
+                @click="handleComponent(element, index)"
                 :is="templates[element.type]"
                 :res="element.options"
               ></component>
diff --git a/seller/MIGRATION-VUE3.md b/seller/MIGRATION-VUE3.md
new file mode 100644
index 00000000..c320f666
--- /dev/null
+++ b/seller/MIGRATION-VUE3.md
@@ -0,0 +1,40 @@
+# seller Vue 3 + Element Plus 迁移说明
+
+## 已完成
+
+- 依赖升级：`vue@3`、`vue-router@4`、`vuex@4`、`element-plus`、`vue-lazyload@3`
+- 入口：`src/main.js`（`createApp`）
+- 路由、动态路由、全局 `$Message` / `$Modal` / `$Notice`、`$filters`
+- 移除 `view-design`，`axios` 已改用 `@/utils/message`
+- 页面装修模块从 manager 同步（`shop/wap`、`shop/modelList` 等）
+- 订单、促销、分销、统计等业务页从 manager 迁移并适配商家 API
+- `yarn run build` 编译通过
+
+## 本地运行
+
+```bash
+cd seller
+yarn install
+yarn run dev
+```
+
+Node **16+**，包管理统一 **yarn**。商家后台默认端口见 `src/config/index.js`（10002）。
+
+## 本轮补充（样式 / 商品发布）
+
+- `goodsOperation.vue`：`el-steps` 步骤条
+- `goodsOperationFirst.vue` / `goodsOperationSec.vue`：去除 iView 图标、`ButtonGroup`
+- `shop/hotzone/index.vue`：`el-dialog` 热区弹窗
+- `common.scss` / `table-common.scss`：列表页双 Card 间距、`el-form-item` 对齐
+- `addGoods.scss` / `home.scss` 等：`:deep()` 语法修复
+
+## 可选后续
+
+- 业务代码中仍可使用 `this.$Message` / `this.$Modal`（兼容层映射到 Element Plus）
+- 样式文件中残留的 `.ivu-*` 类名可逐步清理
+- 商品发布三步流程建议上线前重点回归测试
+
+## 迁移脚本
+
+- `scripts/migrate-iview-to-element.js` — 从 manager 复制装修模板 + 批量替换
+- `scripts/copy-manager-migrations.js` — 从 manager 复制已迁移业务页
diff --git a/seller/babel.config.js b/seller/babel.config.js
index 2ea5d05b..162a3ea9 100644
--- a/seller/babel.config.js
+++ b/seller/babel.config.js
@@ -1,10 +1,3 @@
 module.exports = {
-  presets: [
-    [
-      '@vue/app',
-      {
-        useBuiltIns: 'entry'
-      }
-    ]
-  ]
-}
+  presets: ["@vue/cli-plugin-babel/preset"],
+};
diff --git a/seller/package.json b/seller/package.json
index ab3cf288..92f0a173 100644
--- a/seller/package.json
+++ b/seller/package.json
@@ -5,7 +5,7 @@
   "description": "lilishop-ui",
   "author": "lili-platform",
   "engines": {
-    "node": ">=14"
+    "node": ">=16"
   },
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -15,47 +15,46 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "0.0.7",
     "@antv/g2": "^4.1.14",
+    "@element-plus/icons-vue": "^2.3.1",
     "axios": "^0.21.1",
+    "core-js": "^3.36.0",
     "dplayer": "^1.27.1",
+    "element-plus": "^2.6.3",
     "js-cookie": "^2.2.1",
-    "sass": "^1.63.6",
+    "nprogress": "^0.2.0",
     "price-color": "^1.0.2",
-    "s": "^1.0.0",
+    "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.6.1",
-    "vue": "^2.6.10",
+    "vue": "^3.4.21",
     "vue-awesome-swiper": "^4.1.1",
     "vue-json-excel": "^0.3.0",
-    "vue-lazyload": "^1.3.3",
-    "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-lazyload": "^3.0.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",
-    "view-design": "^4.6.1",
-    "vue-cli-plugin-style-resources-loader": "^0.1.4",
-    "vue-template-compiler": "^2.6.10"
+    "@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",
+    "webpack": "^5.95.0"
   },
   "resolutions": {
     "minimatch": "^3.1.2",
-    "node-sass": "npm:sass@^1.63.6",
     "@achrinza/node-ipc": "9.2.2"
   }
 }
diff --git a/seller/public/index.html b/seller/public/index.html
index 270037ee..4ff65d21 100644
--- a/seller/public/index.html
+++ b/seller/public/index.html
@@ -72,7 +72,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  doesn't work properly without JavaScript
diff --git a/seller/scripts/copy-manager-migrations.js b/seller/scripts/copy-manager-migrations.js
new file mode 100644
index 00000000..7e1c7bcc
--- /dev/null
+++ b/seller/scripts/copy-manager-migrations.js
@@ -0,0 +1,132 @@
+#!/usr/bin/env node
+/**
+ * Copy migrated manager Vue files to seller, preserving seller API imports where they differ.
+ */
+const fs = require("fs");
+const path = require("path");
+
+const SELLER = path.join(__dirname, "..");
+const MANAGER = path.join(__dirname, "../../manager");
+
+const FILE_MAP = [
+  ["src/views/distribution/distributionOrder.vue", "src/views/distribution/distributionOrder.vue"],
+  ["src/views/distribution/distributionGoods.vue", "src/views/distribution/distributionGoods.vue"],
+  ["src/views/statistics/order.vue", "src/views/statistics/order.vue"],
+  ["src/views/statistics/goods.vue", "src/views/statistics/goods.vue"],
+  ["src/views/statistics/traffic.vue", "src/views/statistics/traffic.vue"],
+  ["src/views/statistics/order/orderDetail.vue", "src/views/statistics/order/orderDetail.vue"],
+  ["src/views/statistics/order/refundOrder.vue", "src/views/statistics/order/refundOrder.vue"],
+  ["src/views/promotion/coupon/coupon.vue", "src/views/promotions/coupon/coupon.vue"],
+  ["src/views/promotion/coupon/coupon-publish.vue", "src/views/promotions/coupon/coupon-publish.vue"],
+  ["src/views/promotion/coupon/coupon-receive.vue", "src/views/promotions/coupon/coupon-receive.vue"],
+  ["src/views/promotion/full-discount/full-discount.vue", "src/views/promotions/full-discount/full-discount.vue"],
+  ["src/views/promotion/full-discount/full-discount-add.vue", "src/views/promotions/full-discount/full-discount-detail.vue"],
+  ["src/views/promotion/pintuan/pintuan.vue", "src/views/promotions/pintuan/pintuan.vue"],
+  ["src/views/promotion/pintuan/pintuan-goods.vue", "src/views/promotions/pintuan/pintuan-goods.vue"],
+  ["src/views/promotion/pintuan/pintuan-edit.vue", "src/views/promotions/pintuan/pintuan-goods.vue"],
+  ["src/views/promotion/seckill/seckill.vue", "src/views/promotions/seckill/seckill.vue"],
+  ["src/views/promotion/seckill/seckill-goods.vue", "src/views/promotions/seckill/seckill-goods.vue"],
+  ["src/views/promotion/live/live.vue", "src/views/promotions/live/live.vue"],
+  ["src/views/promotion/live/liveGoods.vue", "src/views/promotions/live/live-detail.vue"],
+  ["src/views/goods/goods-seller/goods.vue", "src/views/goods/goods-info/goods.vue"],
+  ["src/views/goods/goods-manage/category.vue", "src/views/goods/goods-manage/category.vue"],
+  ["src/views/sys/oss-manage/ossManage.vue", "src/views/sys/oss-manage/ossManage.vue"],
+  ["src/views/order/order/orderList.vue", "src/views/order/order/orderList.vue"],
+  ["src/views/order/order/orderDetail.vue", "src/views/order/order/orderDetail.vue"],
+  ["src/views/order/order/virtualOrderList.vue", "src/views/order/order/fictitiousOrderList.vue"],
+  ["src/views/order/after-order/orderComplaint.vue", "src/views/order/after-order/orderComplaint.vue"],
+  ["src/views/order/after-order/orderComplaintDetail.vue", "src/views/order/after-order/orderComplaintDetail.vue"],
+  ["src/views/order/after-order/returnGoodsOrder.vue", "src/views/order/after-order/afterSaleOrder.vue"],
+  ["src/views/order/after-order/returnMoneyOrder.vue", "src/views/order/after-order/afterSale.vue"],
+  ["src/views/order/after-order/reurnGoodsOrderDetail.vue", "src/views/order/after-order/afterSaleOrderDetail.vue"],
+  ["src/views/shop/ossManage.vue", "src/views/sys/oss-manage/ossManage.vue"],
+];
+
+function extractImports(content) {
+  const imports = [];
+  const re = /^import\s+.+from\s+["']@\/api\/[^"']+["'];?\s*$/gm;
+  let m;
+  while ((m = re.exec(content)) !== null) imports.push(m[0]);
+  return imports;
+}
+
+function adaptForSeller(content, sellerRel, sellerOriginal) {
+  let c = content;
+
+  // Restore seller API imports from original file
+  if (sellerOriginal) {
+    const sellerImports = extractImports(sellerOriginal);
+    const managerImports = extractImports(content);
+    for (const mi of managerImports) {
+      const apiPath = mi.match(/from\s+["'](@\/api\/[^"']+)["']/);
+      if (!apiPath) continue;
+      const sellerMatch = sellerImports.find((si) => si.includes(apiPath[1]) || si.includes(path.basename(apiPath[1])));
+      if (sellerMatch && sellerMatch !== mi) {
+        c = c.replace(mi, sellerMatch);
+      }
+    }
+    // Also restore seller-specific import paths that differ
+    sellerImports.forEach((si) => {
+      const from = si.match(/from\s+["']([^"']+)["']/);
+      if (from && from[1].includes("@/api/")) {
+        const apiName = from[1].split("/").pop();
+        const managerImport = managerImports.find((mi) => mi.includes(apiName));
+        if (!managerImport) {
+          // seller-only import - append if missing
+          if (!c.includes(si)) {
+            const scriptIdx = c.indexOf("<script>");
+            if (scriptIdx >= 0) {
+              const insertAt = c.indexOf("\n", scriptIdx) + 1;
+              c = c.slice(0, insertAt) + si + "\n" + c.slice(insertAt);
+            }
+          }
+        }
+      }
+    });
+  }
+
+  // Seller path adjustments
+  c = c.replace(/@\/views\/page-decoration\//g, "@/views/shop/");
+  c = c.replace(/@\/components\/affix-time/g, "@/views/lili-components/affix-time");
+  c = c.replace(/admin-setting/g, "seller-setting");
+  c = c.replace(/adminPCPageCache/g, "sellerPCPageCache");
+  c = c.replace(/userInfoManager/g, "userInfoSeller");
+  c = c.replace(/JSON\.parse\(Cookies\.get\("userInfoManager"\)\)/g, 'JSON.parse(Cookies.get("userInfoSeller"))');
+
+  // ossManage seller variant - hide role tabs, use STORE only
+  if (sellerRel.includes("shop/ossManage.vue")) {
+    c = c.replace(/<el-tab-pane label="管理员" name="MANAGER" \/>[\s\S]*?<el-tab-pane label="客服" name="CUSTOMER" \/>/,
+      '<el-tab-pane label="商家" name="STORE" />');
+    c = c.replace(/activeRoleTab: "MANAGER"/, 'activeRoleTab: "STORE"');
+  }
+
+  return c;
+}
+
+const copied = [];
+const missing = [];
+const skipped = [];
+
+for (const [sellerRel, managerRel] of FILE_MAP) {
+  const managerPath = path.join(MANAGER, managerRel);
+  const sellerPath = path.join(SELLER, sellerRel);
+
+  if (!fs.existsSync(managerPath)) {
+    missing.push({ seller: sellerRel, manager: managerRel });
+    continue;
+  }
+
+  const sellerOriginal = fs.existsSync(sellerPath) ? fs.readFileSync(sellerPath, "utf8") : null;
+  let content = fs.readFileSync(managerPath, "utf8");
+  content = adaptForSeller(content, sellerRel, sellerOriginal);
+
+  fs.mkdirSync(path.dirname(sellerPath), { recursive: true });
+  fs.writeFileSync(sellerPath, content);
+  copied.push(sellerRel);
+}
+
+console.log(`Copied ${copied.length} files from manager`);
+if (missing.length) {
+  console.log("Missing manager files:");
+  missing.forEach((m) => console.log(`  ${m.seller} <- ${m.manager}`));
+}
diff --git a/seller/scripts/migrate-iview-to-element.js b/seller/scripts/migrate-iview-to-element.js
new file mode 100644
index 00000000..95adbe5c
--- /dev/null
+++ b/seller/scripts/migrate-iview-to-element.js
@@ -0,0 +1,229 @@
+#!/usr/bin/env node
+/**
+ * Migrate seller Vue files from iView to Element Plus.
+ * Usage: node scripts/migrate-iview-to-element.js
+ */
+const fs = require("fs");
+const path = require("path");
+
+const SELLER_ROOT = path.join(__dirname, "..");
+const MANAGER_ROOT = path.join(__dirname, "../../manager");
+
+const SHOP_COPY_MAP = [
+  ["src/views/shop/modelForm.vue", "src/views/page-decoration/modelForm.vue"],
+  ["src/views/shop/modelFormItem.vue", "src/views/page-decoration/modelFormItem.vue"],
+  ["src/views/shop/renovation.vue", "src/views/page-decoration/renovation.vue"],
+  ["src/views/shop/floorList.vue", "src/views/page-decoration/floorList.vue"],
+  ["src/views/shop/wap/index.vue", "src/views/page-decoration/wap/index.vue"],
+  ["src/views/shop/wap/main.vue", "src/views/page-decoration/wap/main.vue"],
+  ["src/views/shop/wap/decorate.vue", "src/views/page-decoration/wap/decorate.vue"],
+  ["src/views/shop/wap/navbar.vue", "src/views/page-decoration/wap/navbar.vue"],
+  ["src/views/shop/wap/wapList.vue", "src/views/page-decoration/wap/wapList.vue"],
+  ["src/views/shop/wap/advertising.vue", "src/views/page-decoration/wap/advertising.vue"],
+  ["src/views/shop/wap/alertAdvertising.vue", "src/views/page-decoration/wap/alertAdvertising.vue"],
+];
+
+const WAP_TEMPLATES = [
+  "tpl_banner.vue", "tpl_flex_five.vue", "tpl_flex_four.vue", "tpl_flex_one.vue",
+  "tpl_flex_three.vue", "tpl_flex_two.vue", "tpl_goods.vue", "tpl_group.vue",
+  "tpl_integral.vue", "tpl_join_group.vue", "tpl_left_one_right_two.vue",
+  "tpl_left_two_right_one.vue", "tpl_menu.vue", "tpl_search.vue", "tpl_spike.vue",
+  "tpl_text_picture.vue", "tpl_title.vue", "tpl_top_one_bottom_two.vue",
+  "tpl_top_two_bottom_one.vue", "tpl_view_list.vue",
+];
+
+const MODEL_LIST = [
+  "carousel.vue", "carousel1.vue", "carousel2.vue", "firstPageAdvert.vue",
+  "newGoodsSort.vue", "notEnough.vue", "recommend.vue", "seckill.vue",
+];
+
+WAP_TEMPLATES.forEach((f) => {
+  SHOP_COPY_MAP.push([
+    `src/views/shop/wap/template/${f}`,
+    `src/views/page-decoration/wap/template/${f}`,
+  ]);
+});
+
+MODEL_LIST.forEach((f) => {
+  SHOP_COPY_MAP.push([
+    `src/views/shop/modelList/${f}`,
+    `src/views/page-decoration/modelList/${f}`,
+  ]);
+});
+
+const TARGET_DIRS = [
+  "src/views/order",
+  "src/views/distribution",
+  "src/views/statistics",
+  "src/views/promotion",
+  "src/views/goods",
+  "src/views/shop",
+  "src/views/sys",
+  "src/views/member",
+  "src/views/message",
+];
+
+function adaptSellerContent(content, sellerRelPath) {
+  let c = content;
+
+  // Seller-specific API/path adjustments for copied decoration files
+  if (sellerRelPath.includes("shop/")) {
+    c = c.replace(/@\/views\/page-decoration\//g, "@/views/shop/");
+    c = c.replace(/admin-setting/g, "seller-setting");
+    c = c.replace(/adminPCPageCache/g, "sellerPCPageCache");
+    c = c.replace(/getStore\('adminPCPageCache'\)/g, "getStore('sellerPCPageCache')");
+    c = c.replace(/setStore\('adminPCPageCache'/g, "setStore('sellerPCPageCache'");
+    c = c.replace(/@\/api\/other\.js/g, "@/api/other.js");
+  }
+
+  return c;
+}
+
+function applyScriptTransforms(content) {
+  let c = content;
+  c = c.replace(/\$options\.filters\./g, "$filters.");
+  c = c.replace(/\bbeforeDestroy\b/g, "beforeUnmount");
+  c = c.replace(/this\.\$set\(([^,]+),\s*([^,]+),\s*([^)]+)\)/g, "$1[$2] = $3");
+  c = c.replace(/::v-deep/g, ":deep");
+  c = c.replace(/\/deep\//g, ":deep");
+  c = c.replace(/@on-change/g, "@change");
+  c = c.replace(/@on-click/g, "@click");
+  c = c.replace(/@on-ok/g, "@ok");
+  c = c.replace(/@on-cancel/g, "@cancel");
+  c = c.replace(/@on-clear/g, "@clear");
+  c = c.replace(/@on-open-change/g, "@visible-change");
+  c = c.replace(/@on-page-size-change/g, "@size-change");
+  c = c.replace(/@keydown\.enter\.native/g, "@keyup.enter");
+  c = c.replace(/slot-scope="([^"]+)"/g, '#default="$1"');
+  c = c.replace(/slot="([^"]+)"/g, '#$1');
+  c = c.replace(/\|\s*unitPrice\(/g, "{{ $filters.unitPrice(");
+  return c;
+}
+
+function applyTemplateTransforms(content) {
+  let c = content;
+  const replacements = [
+    [/<\/?Card>/g, (m) => m.replace("Card", "el-card")],
+    [/<Form-item/g, "<el-form-item"],
+    [/<\/Form-item>/g, "</el-form-item>"],
+    [/<FormItem/g, "<el-form-item"],
+    [/<\/FormItem>/g, "</el-form-item>"],
+    [/<Form(\s|>)/g, "<el-form$1"],
+    [/<\/Form>/g, "</el-form>"],
+    [/<Input(\s|>)/g, "<el-input$1"],
+    [/<\/Input>/g, "</el-input>"],
+    [/<Button(\s|>)/g, "<el-button$1"],
+    [/<\/Button>/g, "</el-button>"],
+    [/<Select(\s|>)/g, "<el-select$1"],
+    [/<\/Select>/g, "</el-select>"],
+    [/<Option(\s)/g, "<el-option "],
+    [/<\/Option>/g, "</el-option>"],
+    [/<DatePicker/g, "<el-date-picker"],
+    [/<\/DatePicker>/g, "</el-date-picker>"],
+    [/<Modal/g, "<el-dialog"],
+    [/<\/Modal>/g, "</el-dialog>"],
+    [/<Page(\s)/g, "<el-pagination "],
+    [/<\/Page>/g, "</el-pagination>"],
+    [/<Tabs(\s|>)/g, "<el-tabs$1"],
+    [/<\/Tabs>/g, "</el-tabs>"],
+    [/<TabPane/g, "<el-tab-pane"],
+    [/<\/TabPane>/g, "</el-tab-pane>"],
+    [/<Row(\s|>)/g, "<div$1"],
+    [/<\/Row>/g, "</div>"],
+    [/<Col(\s|>)/g, "<div$1"],
+    [/<\/Col>/g, "</div>"],
+    [/<Tag(\s|>)/g, "<el-tag$1"],
+    [/<\/Tag>/g, "</el-tag>"],
+    [/<Switch(\s|>)/g, "<el-switch$1"],
+    [/<\/Switch>/g, "</el-switch>"],
+    [/<RadioGroup/g, "<el-radio-group"],
+    [/<\/RadioGroup>/g, "</el-radio-group>"],
+    [/<Radio(\s)/g, "<el-radio "],
+    [/<\/Radio>/g, "</el-radio>"],
+    [/<Checkbox/g, "<el-checkbox"],
+    [/<\/Checkbox>/g, "</el-checkbox>"],
+    [/<Poptip/g, "<el-popover"],
+    [/<\/Poptip>/g, "</el-popover>"],
+    [/<Tooltip/g, "<el-tooltip"],
+    [/<\/Tooltip>/g, "</el-tooltip>"],
+    [/:label-width="(\d+)"/g, 'label-width="$1px"'],
+    [/:mask-closable="false"/g, ':close-on-click-modal="false"'],
+    [/:width="(\d+)"/g, 'width="$1"'],
+    [/\bv-model="modalVisible"/g, 'v-model="modalVisible"'],
+  ];
+  for (const [pattern, replacement] of replacements) {
+    c = c.replace(pattern, replacement);
+  }
+  return c;
+}
+
+function walkDir(dir, files = []) {
+  if (!fs.existsSync(dir)) return files;
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      walkDir(full, files);
+    } else if (entry.name.endsWith(".vue") && entry.name !== "readme.vue") {
+      files.push(full);
+    }
+  }
+  return files;
+}
+
+const copied = [];
+const transformed = [];
+const skipped = [];
+
+// Copy decoration files from manager
+for (const [sellerRel, managerRel] of SHOP_COPY_MAP) {
+  const managerPath = path.join(MANAGER_ROOT, managerRel);
+  const sellerPath = path.join(SELLER_ROOT, sellerRel);
+  if (!fs.existsSync(managerPath)) {
+    skipped.push({ file: sellerRel, reason: "manager counterpart missing" });
+    continue;
+  }
+  let content = fs.readFileSync(managerPath, "utf8");
+  content = adaptSellerContent(content, sellerRel);
+  fs.mkdirSync(path.dirname(sellerPath), { recursive: true });
+  fs.writeFileSync(sellerPath, content);
+  copied.push(sellerRel);
+}
+
+// Transform remaining target files (skip already copied)
+const copiedSet = new Set(copied);
+for (const dir of TARGET_DIRS) {
+  const absDir = path.join(SELLER_ROOT, dir);
+  for (const filePath of walkDir(absDir)) {
+    const rel = path.relative(SELLER_ROOT, filePath).replace(/\\/g, "/");
+    if (copiedSet.has(rel)) continue;
+
+    let content = fs.readFileSync(filePath, "utf8");
+    const original = content;
+
+    // Skip if already fully migrated (has el-table and no iView Table)
+    const hasIView =
+      /<(Card|Form|Form-item|FormItem|Table|Button|Modal|Page|Tabs|TabPane|Input|Select|Option|DatePicker|Row|Poptip)\b/.test(
+        content
+      );
+    if (!hasIView) {
+      skipped.push({ file: rel, reason: "already migrated or no iView" });
+      continue;
+    }
+
+    content = applyTemplateTransforms(content);
+    content = applyScriptTransforms(content);
+    fs.writeFileSync(filePath, content);
+    transformed.push(rel);
+  }
+}
+
+console.log("=== Migration Summary ===");
+console.log(`Copied from manager: ${copied.length}`);
+console.log(`Script-transformed: ${transformed.length}`);
+console.log(`Skipped: ${skipped.length}`);
+console.log("\nCopied files:");
+copied.forEach((f) => console.log("  " + f));
+console.log("\nTransformed files:");
+transformed.forEach((f) => console.log("  " + f));
+console.log("\nSkipped:");
+skipped.forEach(({ file, reason }) => console.log(`  ${file}: ${reason}`));
diff --git a/seller/src/App.vue b/seller/src/App.vue
index c339a6b7..b58e73c8 100644
--- a/seller/src/App.vue
+++ b/seller/src/App.vue
@@ -1,23 +1,37 @@
 <template>
   <div id="main" class="app-main">
-    <router-view></router-view>
+    <router-view />
   </div>
 </template>
 
 <script>
+import Cookies from "js-cookie";
+import util from "@/libs/util";
 
 export default {
-
-
+  name: "App",
+  mounted() {
+    const loggedIn =
+      this.getStore("accessToken") || Cookies.get("userInfoSeller");
+    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: 14px;
 }
 
 .app-main {
@@ -33,14 +47,7 @@ body {
   margin-right: 5px;
 }
 
-.ivu-btn-text:focus {
-  box-shadow: none !important;
-}
-
-.ivu-tag {
-  cursor: pointer;
-}
-.tox-notifications-container{
+.tox-notifications-container {
   display: none !important;
 }
 </style>
diff --git a/seller/src/assets/align-text-center.png b/seller/src/assets/align-text-center.png
new file mode 100644
index 0000000000000000000000000000000000000000..a38eb53433e4fb33c970a1ae1eb5133acb61ae61
GIT binary patch
literal 270
zcmeAS@N?(olHy`uVBq!ia0vp^Mj*_=1|;R|J2nC-wj^(N7l!{JxM1({$v~0Ao-U3d
z8I5meMspo95O7_uba!%TZPeZ6Z_Qqv7jfiBIdaUqnvdtFXM$gwO@a!;4b!<x+Lw4<
z$`M+;M6qb~v%Covnt75F4aMdfcZV&zzT4=k&bK^~&sJuBDW(F2%!1}%!tdnIwei25
z-yXRewxp^(YV*u4g-34RdTKtsj(+pn*u#}+c65%hsN)gde^GfKt{1_y2^20?F*<r<
zyVsH?@1B*{ZZG(6ZtGomwxdLGvx%$hBT1o^-%J>Cdc@EET`D{I{pZ&}?=X0}`njxg
HN@xNA{j+Q_

literal 0
HcmV?d00001

diff --git a/seller/src/assets/align-text-left.png b/seller/src/assets/align-text-left.png
new file mode 100644
index 0000000000000000000000000000000000000000..993028dc4c724d1f004cf5095a15908cab61460e
GIT binary patch
literal 266
zcmeAS@N?(olHy`uVBq!ia0vp^Mj*_=1|;R|J2nC-wj^(N7l!{JxM1({$v~0)o-U3d
z8I5mmI&vK{5NLh4+~a+U?fkI!nbp0!W<Juo5UEmY@}FICHrq4P6b=`r3tJs8xnEMs
zG?m=EL^JF5+uVSP%sobq&mv0B>#WMTQlDOS`_gXBYo)m{9;PgX#ol%IU)_n>#J%h8
z#4q!+o|;%Y37ET=tkrtH=C<s@?5l19=6AN<xv=$)z!BbZUGoxMbC$xxv8Q=~$nnmU
zCLP26wOltJ3KqY5nS1GD|GcFi&#*`;o%yEm%3z<M(pMYa2Pt)8-pkebF3EfYdWFH$
L)z4*}Q$iB})gErl

literal 0
HcmV?d00001

diff --git a/seller/src/assets/align-text-right.png b/seller/src/assets/align-text-right.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6a4531ee2cb628f9f744b33e71818c5e3778393
GIT binary patch
literal 271
zcmeAS@N?(olHy`uVBq!ia0vp^Mj*_=1|;R|J2nC-wj^(N7l!{JxM1({$v}}Ko-U3d
z8I5mm268nU2(VmO*-^gAHh%TJ;Jt3YH$Mtb2rscdQYr8$IpO$(4FV1>d25*s7$X>K
zJdZIYY`AsDt?7{WV`0usHx{L*Ts&I!#`^KLrRl+IR(t9_G2%M3%yx&~>pwPo<nPtF
z->KK~Hnm=)kkdC$u-`b(>~2)L*WR0}ZVIv{E{^N&t<p8)I^?!jO!{k7jz|lL`)cbA
z4UXAC6Rtk9TP@H&{p`Z!+Zq4Yf6?hJSMf+s+~ywGW*FUZ;q#V`kZ0^m&n#Ep*<ii}
P=pP18S3j3^P6<r_VX1Ie

literal 0
HcmV?d00001

diff --git a/seller/src/components/lili/set-password.vue b/seller/src/components/lili/set-password.vue
new file mode 100644
index 00000000..ac57ea25
--- /dev/null
+++ b/seller/src/components/lili/set-password.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="set-password">
+    <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"
+        />
+      </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>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "setPassword",
+  props: {
+    modelValue: String,
+    value: String,
+    size: String,
+    placeholder: {
+      type: String,
+      default: "请输入密码，长度为6-20个字符",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    maxlength: {
+      type: Number,
+      default: 20,
+    },
+  },
+  emits: ["update:modelValue", "input", "on-change"],
+  data() {
+    return {
+      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) {
+      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++;
+      this.grade = grade;
+      return grade;
+    },
+    strengthChange() {
+      if (!this.currentValue) {
+        this.tipStyle = "password-tip-none";
+        this.strength = "无";
+        this.strengthValue = 0;
+        return;
+      }
+      const grade = this.checkStrengthValue(this.currentValue);
+      if (grade <= 1) {
+        this.progressStatus = "exception";
+        this.tipStyle = "password-tip-weak";
+        this.strength = "弱";
+        this.strengthValue = 33;
+      } else if (grade >= 2 && grade <= 4) {
+        this.progressStatus = "";
+        this.tipStyle = "password-tip-middle";
+        this.strength = "中";
+        this.strengthValue = 66;
+      } else {
+        this.progressStatus = "success";
+        this.tipStyle = "password-tip-strong";
+        this.strength = "强";
+        this.strengthValue = 100;
+      }
+    },
+    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 ?? "";
+      this.strengthChange();
+      this.$emit("on-change", this.currentValue, this.grade, this.strength);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.password-tip-none {
+  padding: 1vh 0;
+}
+.password-tip-weak .words {
+  color: #ed3f14;
+}
+.password-tip-middle .words {
+  color: #2d8cf0;
+}
+.password-tip-strong .words {
+  color: #52c41a;
+}
+</style>
diff --git a/seller/src/components/price-color-scheme.vue b/seller/src/components/price-color-scheme.vue
new file mode 100644
index 00000000..e30d1524
--- /dev/null
+++ b/seller/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/seller/src/libs/axios.js b/seller/src/libs/axios.js
index a61bcf61..10359758 100644
--- a/seller/src/libs/axios.js
+++ b/seller/src/libs/axios.js
@@ -1,7 +1,7 @@
 import axios from "axios";
 import { getStore, setStore } from "./storage";
 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';
@@ -25,8 +25,8 @@ const service = axios.create({
 });
 axios.defaults.timeout = 100000
 const recordCurrentPath = () => {
-   return router.history.current.fullPath
-}
+  return router.currentRoute.value.fullPath;
+};
 // 跳转登录页
 const redirectLogin = () => {
   router.push({path:'/login',query:{redirect: recordCurrentPath()}});
diff --git a/seller/src/libs/util.js b/seller/src/libs/util.js
index 62c905d7..f4d4a4af 100644
--- a/seller/src/libs/util.js
+++ b/seller/src/libs/util.js
@@ -1,13 +1,127 @@
-import lazyLoading from './lazyLoading.js';
+import { getCurrentPermissionList } from "@/api/index";
+import lazyLoading from "./lazyLoading.js";
+import { router } from "@/router/index";
 import Cookies from "js-cookie";
 
-import { result } from './routerJson.js';
-import { getCurrentPermissionList } from "@/api/index";
+const config = require("@/config/index");
 
-const config = require('@/config/index')
+let util = {};
 
-let util = {
+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;
+};
+
+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(() => {});
+    }
+  }
+};
+
+util.bootstrapDynamicRoutesFromCache = function () {
+  if (!Cookies.get("userInfoSeller")) {
+    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) {
@@ -15,186 +129,8 @@ util.title = function (title) {
   window.document.title = title;
 };
 
-util.millsToTime = function (mills) {
-  if (!mills) {
-    return "";
-  }
-  let s = mills / 1000;
-  if (s < 60) {
-    return s.toFixed(0) + " 秒"
-  }
-  let m = s / 60;
-  if (m < 60) {
-    return m.toFixed(0) + " 分钟"
-  }
-  let h = m / 60;
-  if (h < 24) {
-    return h.toFixed(0) + " 小时"
-  }
-  let d = h / 24;
-  if (d < 30) {
-    return d.toFixed(0) + " 天"
-  }
-  let month = d / 30
-  if (month < 12) {
-    return month.toFixed(0) + " 个月"
-  }
-  let year = month / 12
-  return year.toFixed(0) + " 年"
-
-};
-
-util.inOf = function (arr, targetArr) {
-  let res = true;
-  arr.forEach(item => {
-    if (targetArr.indexOf(item) < 0) {
-      res = false;
-    }
-  });
-  return res;
-};
-
 util.oneOf = function (ele, targetArr) {
-  if (targetArr.indexOf(ele) >= 0) {
-    return true;
-  } else {
-    return false;
-  }
-};
-
-util.getRouterObjByName = function (routers, name) {
-  if (!name || !routers || !routers.length) {
-    return null;
-  }
-  let routerObj = null;
-  for (let item of routers) {
-    if (item.name == name) {
-      return item;
-    }
-    routerObj = util.getRouterObjByName(item.children, name);
-    if (routerObj) {
-      return routerObj;
-    }
-  }
-  return null;
-};
-
-util.handleTitle = function (vm, item) {
-  if (typeof item.title == 'object') {
-    return item.title;
-  } else {
-    return item.title;
-  }
-};
-
-util.setCurrentPath = function (vm, name) {
-  let title = '';
-  let isOtherRouter = false;
-  vm.$store.state.app.routers.forEach(item => {
-    if (item.children.length == 1) {
-      if (item.children[0].name == name) {
-        title = util.handleTitle(vm, item);
-        if (item.name == 'otherRouter') {
-          isOtherRouter = true;
-        }
-      }
-    } else {
-      item.children.forEach(child => {
-        if (child.name == name) {
-          title = util.handleTitle(vm, child);
-          if (item.name == 'otherRouter') {
-            isOtherRouter = true;
-          }
-        }
-      });
-    }
-  });
-  let currentPathArr = [];
-  if (name == 'home_index') {
-    currentPathArr = [
-      {
-        title: util.handleTitle(vm, util.getRouterObjByName(vm.$store.state.app.routers, 'home_index')),
-        path: '',
-        name: 'home_index'
-      }
-    ];
-  } else if ((name.indexOf('_index') >= 0 || isOtherRouter) && name !== 'home_index') {
-    currentPathArr = [
-      {
-        title: util.handleTitle(vm, util.getRouterObjByName(vm.$store.state.app.routers, 'home_index')),
-        path: '/home',
-        name: 'home_index'
-      },
-      {
-        title: title,
-        path: '',
-        name: name
-      }
-    ];
-  } else {
-    let currentPathObj = vm.$store.state.app.routers.filter(item => {
-      if (item.children.length <= 1) {
-        return item.children[0].name == name;
-      } else {
-        let i = 0;
-        let childArr = item.children;
-        let len = childArr.length;
-        while (i < len) {
-          if (childArr[i].name == name) {
-            return true;
-          }
-          i++;
-        }
-        return false;
-      }
-    })[0];
-    if (currentPathObj.children.length <= 1 && currentPathObj.name == 'home') {
-      currentPathArr = [
-        {
-          title: '首页',
-          path: '',
-          name: 'home_index'
-        }
-      ];
-    } else if (currentPathObj.children.length <= 1 && currentPathObj.name !== 'home') {
-      currentPathArr = [
-        {
-          title: '首页',
-          path: '/home',
-          name: 'home_index'
-        },
-        {
-          title: currentPathObj.title,
-          path: '',
-          name: name
-        }
-      ];
-    } else {
-      let childObj = currentPathObj.children.filter((child) => {
-        return child.name == name;
-      })[0];
-      currentPathArr = [
-        {
-          title: '首页',
-          path: '/home',
-          name: 'home_index'
-        },
-        {
-          title: currentPathObj.title,
-          path: '',
-          name: currentPathObj.name
-        },
-        {
-          title: childObj.title,
-          path: currentPathObj.path + '/' + childObj.path,
-          name: name
-        }
-      ];
-    }
-  }
-  vm.$store.commit('setCurrentPath', currentPathArr);
-
-  return currentPathArr;
+  return targetArr.indexOf(ele) >= 0;
 };
 
 util.openNewPage = function (vm, name, argu, query) {
@@ -206,11 +142,11 @@ util.openNewPage = function (vm, name, argu, query) {
   let i = 0;
   let tagHasOpened = false;
   while (i < openedPageLen) {
-    if (name == storeOpenedList[i].name) { // 页面已经打开
-      vm.$store.commit('storeOpenedList', {
+    if (name == storeOpenedList[i].name) {
+      vm.$store.commit("storeOpenedList", {
         index: i,
         argu: argu,
-        query: query
+        query: query,
       });
       tagHasOpened = true;
       break;
@@ -221,23 +157,18 @@ util.openNewPage = function (vm, name, argu, query) {
     let tag = vm.$store.state.app.tagsList.filter((item) => {
       if (item.children) {
         return name == item.children[0].name;
-      } else {
-        return name == item.name;
       }
+      return name == item.name;
     });
     tag = tag[0];
     if (tag) {
       tag = tag.children ? tag.children[0] : tag;
-      if (argu) {
-        tag.argu = argu;
-      }
-      if (query) {
-        tag.query = query;
-      }
-      vm.$store.commit('increateTag', tag);
+      if (argu) tag.argu = argu;
+      if (query) tag.query = query;
+      vm.$store.commit("increateTag", tag);
     }
   }
-  vm.$store.commit('setCurrentPageName', name);
+  vm.$store.commit("setCurrentPageName", name);
 };
 
 util.toDefaultPage = function (routers, name, route, next) {
@@ -245,9 +176,13 @@ util.toDefaultPage = function (routers, name, route, next) {
   let i = 0;
   let notHandle = true;
   while (i < len) {
-    if (routers[i].name == name && routers[i].children && routers[i].redirect == undefined) {
+    if (
+      routers[i].name == name &&
+      routers[i].children &&
+      routers[i].redirect == undefined
+    ) {
       route.replace({
-        name: routers[i].children[0].name
+        name: routers[i].children[0].name,
       });
       notHandle = false;
       next();
@@ -260,172 +195,110 @@ util.toDefaultPage = function (routers, name, route, next) {
   }
 };
 
-// 将Csv文件解析为二维数组
-export const getArrayFromFile = (file) => {
-  let nameSplit = file.name.split('.')
-  let format = nameSplit[nameSplit.length - 1]
-  return new Promise((resolve, reject) => {
-    let reader = new FileReader()
-    reader.readAsText(file) // 以文本格式读取
-    let arr = []
-    reader.onload = function (evt) {
-      let data = evt.target.result // 读到的数据
-      let pasteData = data.trim()
-      arr = pasteData.split((/[\n\u0085\u2028\u2029]|\r\n?/g)).map(row => {
-        return row.split('\t')
-      }).map(item => {
-        return item[0].split(',')
-      })
-      if (format == 'csv') resolve(arr)
-      else reject(new Error('[Format Error]:不是Csv文件'))
-    }
-  })
-}
-
-// 将二维数组转为表格数据
-export const getTableDataFromArray = (array) => {
-  let columns = []
-  let tableData = []
-  if (array.length > 1) {
-    let titles = array.shift()
-    columns = titles.map(item => {
-      return {
-        title: item,
-        key: item
-      }
-    })
-    tableData = array.map(item => {
-      let res = {}
-      item.forEach((col, i) => {
-        res[titles[i]] = col
-      })
-      return res
-    })
-  }
-  return {
-    columns,
-    tableData
-  }
-}
-
-util.initRouter = function (vm) { // 初始化路由
+util.initRouter = function (vm) {
   const constRoutes = [];
-  const otherRoutes = [];
-
-  // 404路由需要和动态路由一起加载
-  const otherRouter = [{
-    path: '/*',
-    name: 'error-404',
-    meta: {
-      title: '404-页面不存在'
-    },
-    component: 'error-page/404'
-  }];
-  // 判断用户是否登录
-  let userInfo = Cookies.get('userInfoSeller')
+  let userInfo = Cookies.get("userInfoSeller");
   if (!userInfo) {
-    // 未登录
     return;
   }
+  if (!vm.$store.state.app.added) {
+    getCurrentPermissionList().then((res) => {
+      if (!res.success) return false;
+      let menuData = res.result;
 
-
-  // 加载菜单
-
-  getCurrentPermissionList().then(res => {
-    if (!res.success) return false;
-    let menuData = res.result;
-    // 格式化数据，设置 空children 为 null
-    for (let i = 0; i < menuData.length; i++) {
-      let t = menuData[i].children
-      for (let k = 0; k < t.length; k++) {
-        let tt = t[k].children;
-        for (let z = 0; z < tt.length; z++) {
-          tt[z].children = null
-          // 给所有三级路由添加字段，显示一级菜单name，方便点击页签时的选中筛选
-          tt[z].firstRouterName = menuData[i].name
+      for (let i = 0; i < menuData.length; i++) {
+        let t = menuData[i].children;
+        for (let k = 0; k < t.length; k++) {
+          let tt = t[k].children;
+          for (let z = 0; z < tt.length; z++) {
+            tt[z].children = null;
+            tt[z].firstRouterName = menuData[i].name;
+          }
         }
       }
-    }
-    if (!menuData) {
+
+      if (!menuData) {
+        return;
+      }
+      util.initAllMenuData(constRoutes, menuData);
+      util.registerDynamicRoutes(menuData);
+      vm.$store.commit(
+        "updateAppRouter",
+        constRoutes.filter((item) => item.children && item.children.length > 0)
+      );
+      util.initMenuData(vm, menuData);
+      window.localStorage.setItem("menuData", JSON.stringify(menuData));
+      vm.$store.commit("setAdded", true);
+      if (vm.$store.state.app.refMenu) {
+        vm.$nextTick(() => {
+          vm.$store.state.app.refMenu.updateActiveName();
+        });
+      }
+    });
+  } else {
+    let data = window.localStorage.getItem("menuData");
+    if (!data) {
+      vm.$store.commit("setAdded", false);
       return;
     }
-    util.initAllMenuData(constRoutes, menuData);
-    util.initRouterNode(otherRoutes, otherRouter);
-    // 添加所有主界面路由
-    vm.$store.commit('updateAppRouter', constRoutes.filter(item => item.children.length > 0));
-    // 添加全局路由
-    vm.$store.commit('updateDefaultRouter', otherRoutes);
-    // 添加菜单路由
+    let menuData = JSON.parse(data);
+    util.registerDynamicRoutes(menuData);
     util.initMenuData(vm, menuData);
-    // 缓存数据 修改加载标识
-    window.localStorage.setItem('menuData', JSON.stringify(menuData));
-    vm.$store.commit('setAdded', true);
-    if(vm.$store.state.app.refMenu){
-      vm.$nextTick(()=>{
+    if (vm.$store.state.app.refMenu) {
+      vm.$nextTick(() => {
         vm.$store.state.app.refMenu.updateActiveName();
       });
     }
-  })
-
+  }
 };
 
-// 添加所有顶部导航栏下的菜单路由
 util.initAllMenuData = function (constRoutes, data) {
-
   let allMenuData = [];
-  data.forEach(e => {
+  data.forEach((e) => {
     if (e.level == 0) {
-      e.children.forEach(item => {
+      e.children.forEach((item) => {
         allMenuData.push(item);
-      })
+      });
     }
-  })
+  });
   util.initRouterNode(constRoutes, allMenuData);
-}
+};
 
-// 生成菜单格式数据
 util.initMenuData = function (vm, data) {
   const menuRoutes = [];
   let menuData = data;
-  // 顶部菜单
   let navList = [];
-  menuData.forEach(e => {
-    let nav = {
-      name: e.name,
-      title: e.title,
-    }
-    navList.push(nav);
-  })
+  menuData.forEach((e) => {
+    navList.push({ name: e.name, title: e.title });
+  });
   if (navList.length < 1) {
     return;
   }
-  // 存入vuex
-  vm.$store.commit('setNavList', navList);
-  let currNav = window.localStorage.getItem('currNav')
+  vm.$store.commit("setNavList", navList);
+  let currNav = window.localStorage.getItem("currNav");
   if (currNav) {
-    // 读取缓存title
-    for (var item of navList) {
+    for (let item of navList) {
       if (item.name == currNav) {
-        vm.$store.commit('setCurrNavTitle', item.title);
+        vm.$store.commit("setCurrNavTitle", item.title);
         break;
       }
     }
   } else {
-    // 默认第一个
     currNav = navList[0].name;
-    vm.$store.commit('setCurrNavTitle', navList[0].title);
+    vm.$store.commit("setCurrNavTitle", navList[0].title);
   }
-  vm.$store.commit('setCurrNav', currNav);
-  for (var item of menuData) {
+  vm.$store.commit("setCurrNav", currNav);
+  for (let item of menuData) {
     if (item.name == currNav) {
-      // 过滤
       menuData = item.children;
       break;
     }
   }
   util.initRouterNode(menuRoutes, menuData);
-  // 刷新界面菜单
-  vm.$store.commit('updateMenulist', menuRoutes.filter(item => item.children.length > 0));
+  vm.$store.commit(
+    "updateMenulist",
+    menuRoutes.filter((item) => item.children.length > 0)
+  );
 
   let tagsList = [];
   vm.$store.state.app.routers.map((item) => {
@@ -435,24 +308,35 @@ util.initMenuData = function (vm, data) {
       tagsList.push(...item.children);
     }
   });
-  vm.$store.commit('setTagsList', tagsList);
+  vm.$store.commit("setTagsList", tagsList);
 };
 
-// 生成路由节点
-util.initRouterNode = function (routers, data) {  // data为所有子菜单数据
+util.initRouterNode = function (routers, data) {
+  for (let item of data) {
+    const menu = Object.assign({}, item);
+    const hasChildren = item.children && item.children.length > 0;
 
-  for (var item of data) {
-    let menu = Object.assign({}, item);
-    menu.component = lazyLoading(menu.frontRoute);
-    if (item.children && item.children.length > 0) {
+    if (hasChildren) {
       menu.children = [];
+      if (menu.name) {
+        menu.name = `${menu.name}__layout`;
+      }
       util.initRouterNode(menu.children, item.children);
+      if (menu.frontRoute) {
+        menu.component = lazyLoading(menu.frontRoute);
+      } else {
+        delete menu.component;
+      }
+    } else if (menu.frontRoute) {
+      menu.component = lazyLoading(menu.frontRoute);
     }
-    let meta = {};
-    // 给页面添加标题
-    meta.title = menu.title ? menu.title + " - " + config.title + "商家后台" : null;
-    meta.firstRouterName = item.firstRouterName
-    meta.keepAlive = menu.keepAlive ? true : false
+
+    const meta = {};
+    meta.title = menu.title
+      ? menu.title + " - " + config.title + "商家后台"
+      : null;
+    meta.firstRouterName = item.firstRouterName;
+    meta.keepAlive = menu.keepAlive ? true : false;
     menu.meta = meta;
 
     routers.push(menu);
diff --git a/seller/src/main.js b/seller/src/main.js
index b33493ff..902615fd 100644
--- a/seller/src/main.js
+++ b/seller/src/main.js
@@ -1,122 +1,84 @@
-import Vue from "vue";
-import ViewUI from "view-design";
-import "./styles/theme.less";
-
+import { createApp } from "vue";
 import "core-js/stable";
-import vueQr from "vue-qr";
-
-import liliDialog from '@/views/lili-dialog'
-import App from "./App";
-import {router} from "./router/index";
+import "./styles/theme.less";
+import App from "./App.vue";
+import { router } from "./router/index";
 import store from "./store";
+import { setupElementPlus } from "@/plugins/element";
+import { setupLegacyMessage } from "@/utils/message";
+import liliDialog from "@/views/lili-dialog";
+import PriceColorScheme from "@/components/price-color-scheme.vue";
+import { install as installVueQr } from "vue-qr";
+import VueLazyload from "vue-lazyload";
 import {
   getRequest,
   postRequest,
   putRequest,
   deleteRequest,
   importRequest,
-  uploadFileRequest
+  uploadFileRequest,
 } from "@/libs/axios";
-import {setStore, getStore, removeStore} from "@/libs/storage";
-
-
+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 VueLazyload from "vue-lazyload";
+const { aMapSecurityJsCode, mainColor } = require("@/config");
 
-import * as filters from "@/utils/filters"; // global filter
-
-import {md5} from "@/utils/md5.js";
-
-const {aMapSecurityJsCode, inputMaxLength,mainColor} = require("@/config");
-// 打印
-import Print from 'vue-print-nb';
-
-Vue.use(Print);
-// 高德安全密钥
 if (aMapSecurityJsCode) {
   window._AMapSecurityConfig = {
     securityJsCode: aMapSecurityJsCode,
   };
 }
-Vue.config.devtools = true;
-Vue.config.productionTip = false;
-Vue.use(VueLazyload, {
+
+const PC_URL = BASE.PC_URL;
+const WAP_URL = BASE.WAP_URL;
+
+util.bootstrapDynamicRoutesFromCache();
+
+const app = createApp(App);
+
+setupElementPlus(app);
+setupLegacyMessage(app);
+installVueQr(app);
+
+app.use(VueLazyload, {
   error: require("./assets/img-error.png"),
-  loading: require("./assets/loading2.gif")
+  loading: require("./assets/loading2.gif"),
 });
 
-// 引入价格格式化组件
-import priceColorScheme from 'price-color'
-Vue.use(priceColorScheme);
+app.use(router);
+app.use(store);
 
-const copyViewUi = {...ViewUI}
-copyViewUi.Input.props.maxlength.default = inputMaxLength // 挂载最大输入值
-Vue.use(copyViewUi);
+app.component("liliDialog", liliDialog);
+app.component("priceColorScheme", PriceColorScheme);
 
-Vue.component('liliDialog', liliDialog)
+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;
 
-Vue.component('liliDialog', liliDialog)
-Vue.component("vue-qr", vueQr); //此处将vue-qr添加为全局组件
-
-// 挂载全局使用的方法
-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;
-const PC_URL = BASE.PC_URL; // 跳转买家端地址 pc端
-const WAP_URL = BASE.WAP_URL; // 跳转买家端地址 wap端
-Vue.prototype.linkTo = function (goodsId, skuId) {
-  // 跳转买家端商品
+app.config.globalProperties.linkTo = function (goodsId, skuId) {
   window.open(
     `${PC_URL}/goodsDetail?skuId=${skuId}&goodsId=${goodsId}`,
     "_blank"
   );
 };
-Vue.prototype.wapLinkTo = function (goodsId, skuId) {
-  // app端二维码
+
+app.config.globalProperties.wapLinkTo = function (goodsId, skuId) {
   return `${WAP_URL}/pages/product/goods?id=${skuId}&goodsId=${goodsId}`;
 };
 
-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]);
+router.isReady().then(() => {
+  app.mount("#app");
 });
 
-
-
-
-
-
-
-/* eslint-disable no-new */
-new Vue({
-  el: "#app",
-  router,
-  store,
-  render: h => h(App),
-  data: {
-    currentPageName: ""
-  },
-  mounted() {
-    // 初始化菜单
-    util.initRouter(this);
-
-    this.currentPageName = this.$route.name;
-    // 显示打开的页面的列表
-    this.$store.commit("setOpenedList");
-    this.$store.commit("initCachepage");
-  }
-});
+export { app, util };
diff --git a/seller/src/plugins/element.js b/seller/src/plugins/element.js
new file mode 100644
index 00000000..572763a6
--- /dev/null
+++ b/seller/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/seller/src/router/index.js b/seller/src/router/index.js
index 7ab1a445..f53a6e11 100644
--- a/seller/src/router/index.js
+++ b/seller/src/router/index.js
@@ -1,59 +1,50 @@
-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("userInfoSeller");
 
-  if (!Cookies.get('userInfoSeller') && name !== 'login') {
-    if (name === 'forgetPassword') {
-      console.log(name)
+  if (!hasToken && name !== "login") {
+    if (name === "forgetPassword") {
       Util.toDefaultPage([...routers], name, router, next);
-    } else {
-      // 判断是否已经登录且前往的页面不是登录页
-      next({
-        name: 'login'
-      });
+      return;
     }
-  } else if (Cookies.get('userInfoSeller') && name === 'login') {
-    // 判断是否已经登录且前往的是登录页
-    Util.title();
-    next({
-      name: 'home_index'
-    });
-  } else {
-    Util.toDefaultPage([...routers], name, router, next);
+    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/seller/src/store/index.js b/seller/src/store/index.js
index 67d963ab..779cf67a 100644
--- a/seller/src/store/index.js
+++ b/seller/src/store/index.js
@@ -1,30 +1,19 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
+import { createStore } from "vuex";
+import app from "./modules/app";
+import setting from "./modules/setting";
+import user from "./modules/user";
+import dict from "./modules/dict";
 
-import app from './modules/app';
-import setting from './modules/setting';
-import user from './modules/user';
-import dict from './modules/dict';
-
-Vue.use(Vuex);
-
-const store = new Vuex.Store({
-    state: {
-        // 状态
-
-    },
-    mutations: {
-        // 改变方法
-    },
-    actions: {
-
-    },
-    modules: {
-        app,
-        user,
-        setting,
-        dict
-    }
+const store = createStore({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {
+    app,
+    user,
+    setting,
+    dict,
+  },
 });
 
 export default store;
diff --git a/seller/src/store/modules/app.js b/seller/src/store/modules/app.js
index ab987e70..fe8f55ed 100644
--- a/seller/src/store/modules/app.js
+++ b/seller/src/store/modules/app.js
@@ -1,61 +1,52 @@
-import { otherRouter } from '@/router/router';
-import { router } from '@/router/index';
-import Util from '@/libs/util';
-import Vue from 'vue';
+import { otherRouter } from "@/router/router";
+import Util from "@/libs/util";
 
 const app = {
   state: {
     shipTemplates: "",
-    regions: [], //此处是在地区选择器时赋值一次
-    styleStore: "", //移动端楼层装修中选择风格存储
-    loading: false, // 全局加载动画
-    added: false, // 加载路由标识
-    navList: [], // 顶部菜单
-    currNav: "", // 当前顶部菜单name
-    currNavTitle: "", // 当前顶部菜单标题
-    cachePage: [], // 缓存的页面
-    lang: '',
+    regions: [],
+    styleStore: "",
+    loading: false,
+    added: false,
+    navList: [],
+    currNav: "",
+    currNavTitle: "",
+    cachePage: [],
+    lang: "",
     isFullScreen: false,
-    openedSubmenuArr: [], // 要展开的菜单数组
-    menuTheme: 'dark', // 主题
-    themeColor: '',
-    storeOpenedList: [{
-      title: '首页',
-      path: '',
-      name: 'home_index'
-    }],
-    currentPageName: '',
+    openedSubmenuArr: [],
+    menuTheme: "dark",
+    themeColor: "",
+    storeOpenedList: [
+      {
+        title: "首页",
+        path: "",
+        name: "home_index",
+      },
+    ],
+    currentPageName: "",
     currentPath: [
       {
-        title: '首页',
-        path: '',
-        name: 'home_index'
-      }
+        title: "首页",
+        path: "",
+        name: "home_index",
+      },
     ],
-    // 面包屑数组 左侧菜单
     menuList: [],
-    routers: [
-      otherRouter
-    ],
+    routers: [otherRouter],
     tagsList: [...otherRouter.children],
     messageCount: 0,
-    // 在这里定义你不想要缓存的页面的name属性值(参见路由配置router.js)
-    dontCache: ['test', 'test'],
-    refMenu:""
+    dontCache: ["test", "test"],
+    refMenu: "",
   },
   mutations: {
-    childrenMenu(state,v){
-      state.refMenu = v
+    childrenMenu(state, v) {
+      state.refMenu = v;
     },
-    // 动态添加主界面路由，需要缓存
     updateAppRouter(state, routes) {
       state.routers.push(...routes);
-      router.addRoutes(routes);
-    },
-    // 动态添加全局路由404、500等页面，不需要缓存
-    updateDefaultRouter(state, routes) {
-      router.addRoutes(routes);
     },
+    updateDefaultRouter() {},
     setLoading(state, v) {
       state.loading = v;
     },
@@ -78,15 +69,7 @@ const app = {
       state.menuList = routes;
     },
     addOpenSubmenu(state, name) {
-      let hasThisName = false;
-      let isEmpty = false;
-      if (name.length == 0) {
-        isEmpty = true;
-      }
-      if (state.openedSubmenuArr.indexOf(name) > -1) {
-        hasThisName = true;
-      }
-      if (!hasThisName && !isEmpty) {
+      if (name.length && state.openedSubmenuArr.indexOf(name) === -1) {
         state.openedSubmenuArr.push(name);
       }
     },
@@ -112,19 +95,15 @@ const app = {
     },
     storeOpenedList(state, get) {
       let openedPage = state.storeOpenedList[get.index];
-      if (get.argu) {
-        openedPage.argu = get.argu;
-      }
-      if (get.query) {
-        openedPage.query = get.query;
-      }
+      if (get.argu) openedPage.argu = get.argu;
+      if (get.query) openedPage.query = get.query;
       state.storeOpenedList.splice(get.index, 1, openedPage);
       localStorage.storeOpenedList = JSON.stringify(state.storeOpenedList);
     },
     clearAllTags(state) {
       state.storeOpenedList.splice(1);
       state.cachePage.length = 0;
-      localStorage.cachePage = '';
+      localStorage.cachePage = "";
       localStorage.storeOpenedList = JSON.stringify(state.storeOpenedList);
     },
     clearOtherTags(state, vm) {
@@ -141,15 +120,14 @@ const app = {
         state.storeOpenedList.splice(currentIndex + 1);
         state.storeOpenedList.splice(1, currentIndex - 1);
       }
-      let newCachepage = state.cachePage.filter(item => {
-        return item == currentName;
-      });
-      state.cachePage = newCachepage;
+      state.cachePage = state.cachePage.filter((item) => item == currentName);
       localStorage.cachePage = JSON.stringify(state.cachePage);
       localStorage.storeOpenedList = JSON.stringify(state.storeOpenedList);
     },
     setOpenedList(state) {
-      state.storeOpenedList = localStorage.storeOpenedList ? JSON.parse(localStorage.storeOpenedList) : [otherRouter.children[0]];
+      state.storeOpenedList = localStorage.storeOpenedList
+        ? JSON.parse(localStorage.storeOpenedList)
+        : [otherRouter.children[0]];
     },
     setCurrentPath(state, pathArr) {
       state.currentPath = pathArr;
@@ -163,7 +141,6 @@ const app = {
     switchLang(state, lang) {
       state.lang = lang;
       localStorage.lang = lang;
-      Vue.config.lang = lang;
     },
     clearOpenedSubmenu(state) {
       state.openedSubmenuArr.length = 0;
@@ -171,7 +148,6 @@ const app = {
     setMessageCount(state, count) {
       state.messageCount = count;
     },
-    // 新增页签
     increateTag(state, tagObj) {
       if (!Util.oneOf(tagObj.name, state.dontCache)) {
         state.cachePage.push(tagObj.name);
@@ -179,8 +155,8 @@ const app = {
       }
       state.storeOpenedList.push(tagObj);
       localStorage.storeOpenedList = JSON.stringify(state.storeOpenedList);
-    }
-  }
+    },
+  },
 };
 
 export default app;
diff --git a/seller/src/styles/common.scss b/seller/src/styles/common.scss
index 242b3ed3..fea9e906 100644
--- a/seller/src/styles/common.scss
+++ b/seller/src/styles/common.scss
@@ -133,3 +133,9 @@ $theme_color: #F31947;
   color: $theme_color !important;
 }
 $bg_color: #f1f6fa;
+
+@import "./table-common.scss";
+
+.el-table table {
+  width: 100% !important;
+}
diff --git a/seller/src/styles/element.scss b/seller/src/styles/element.scss
new file mode 100644
index 00000000..d34ca6fd
--- /dev/null
+++ b/seller/src/styles/element.scss
@@ -0,0 +1,95 @@
+/* Element Plus 主题覆盖（对齐原 iView 主色） */
+:root {
+  --el-color-primary: #f31947;
+  --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: #f31947;
+  --el-button-border-color: #f31947;
+  --el-button-hover-bg-color: #ff4d6d;
+  --el-button-hover-border-color: #ff4d6d;
+}
+
+.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/seller/src/styles/table-common.scss b/seller/src/styles/table-common.scss
index efaf5984..4f670ed8 100644
--- a/seller/src/styles/table-common.scss
+++ b/seller/src/styles/table-common.scss
@@ -16,17 +16,20 @@
   width: 100% !important;
   display: flex;
   align-items: center;
-  // background-color: #f0f0f0;
   border-radius: 0.4em;
   flex-wrap: wrap;
-  > .ivu-form-item {
+
+  > .ivu-form-item,
+  > .el-form-item {
     margin: 8px 10px !important;
   }
 }
+
 .padding-row {
   margin-top: 15px;
   margin-bottom: 15px;
 }
+
 .search-btn {
   margin-left: 20px;
 }
@@ -38,7 +41,11 @@
   overflow: hidden;
 }
 
-// 为Card组件之间增加间距
+.search > .el-card + .el-card {
+  margin-top: 10px;
+}
+
+// 兼容遗留 iView
 .ivu-card + .ivu-card {
   margin-top: 10px;
-}
\ No newline at end of file
+}
diff --git a/seller/src/styles/theme.less b/seller/src/styles/theme.less
index 472f74b8..1df5270e 100644
--- a/seller/src/styles/theme.less
+++ b/seller/src/styles/theme.less
@@ -1,6 +1,4 @@
-@import "~view-design/src/styles/index.less";
-// iview 自定义样式
-
+// Element Plus 主题变量（原 view-design less 已移除）
 @primary-color: #F31947;
 @info-color: #fa6419;
 @success-color: #68cabe;
@@ -10,3 +8,8 @@
 @table-td-hover-bg: #ededed;
 @table-td-highlight-bg: #ededed;
 @font-size-base: 12px;
+
+.el-drawer,
+.drawer {
+  z-index: 2600 !important;
+}
diff --git a/seller/src/utils/message.js b/seller/src/utils/message.js
new file mode 100644
index 00000000..6b29d2cb
--- /dev/null
+++ b/seller/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/seller/src/utils/print.js b/seller/src/utils/print.js
new file mode 100644
index 00000000..b87dafd1
--- /dev/null
+++ b/seller/src/utils/print.js
@@ -0,0 +1,26 @@
+/**
+ * 打印指定 DOM 区域（替代 vue-print-nb）
+ */
+export function printElement(elementId, title = "打印") {
+  const el = document.getElementById(elementId);
+  if (!el) {
+    console.warn(`[print] element #${elementId} not found`);
+    return;
+  }
+  const iframe = document.createElement("iframe");
+  iframe.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0";
+  document.body.appendChild(iframe);
+  const doc = iframe.contentWindow.document;
+  doc.open();
+  doc.write(
+    `<!DOCTYPE html><html><head><title>${title}</title><style>
+      body{font-family:Arial,sans-serif;padding:12px;color:#333}
+      table{width:100%;border-collapse:collapse}
+      td,th{border:1px solid #ddd;padding:6px}
+    </style></head><body>${el.innerHTML}</body></html>`
+  );
+  doc.close();
+  iframe.contentWindow.focus();
+  iframe.contentWindow.print();
+  setTimeout(() => document.body.removeChild(iframe), 1000);
+}
diff --git a/seller/src/views/ForgetPassword.vue b/seller/src/views/ForgetPassword.vue
index 915563be..cd4447e0 100644
--- a/seller/src/views/ForgetPassword.vue
+++ b/seller/src/views/ForgetPassword.vue
@@ -1,222 +1,240 @@
 <template>
-  <div class="forget-password" @click='$refs.verify.show = false'>
-    <div style="height:50px;"></div>
-    <!-- 顶部logo -->
+  <div class="forget-password" @click="$refs.verify.show = false">
+    <div style="height: 50px"></div>
     <div class="logo-box">
-      <img
-        :src="$store.state.logoImg" width='150'
-        @click="$router.push('/')"
-      />
+      <img :src="$store.state.logoImg" width="150" @click="$router.push('/')" />
       <div>修改密码</div>
     </div>
     <div class="login-container">
-        <!-- 验证手机号 -->
-        <Form
-          ref="formFirst"
-          :model="formFirst"
-          :rules="ruleInline"
-          style="width:300px;"
-          v-show="step === 0"
-        >
-          <FormItem prop="mobile">
-            <i-input
-              type="text"
-              v-model="formFirst.mobile"
-              clearable
-              placeholder="手机号"
-            >
-              <Icon type="md-phone-portrait" slot="prepend"></Icon>
-            </i-input>
-          </FormItem>
-          <FormItem prop="code">
-            <i-input
-              type="text"
-              v-model="formFirst.code"
-              clearable
-              placeholder="手机验证码"
-            >
-              <Icon
-                type="ios-text-outline"
-                style="font-weight: bold"
-                slot="prepend"
-              />
-              <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
-            </i-input>
-          </FormItem>
-          <FormItem>
-            <Button @click="verifyBtnClick" long :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</Button>
-          </FormItem>
-          <FormItem>
-            <Button type="error" @click="next" :loading="loading" long>下一步</Button>
-          </FormItem>
-        </Form>
-        <Form
-          ref="form"
-          :model="form"
-          :rules="ruleInline"
-          style="width:300px;"
-          v-show="step === 1"
-        >
-          <FormItem prop="password">
-            <i-input
-              type="password"
-              v-model="form.password"
-              clearable
-              placeholder="请输入至少六位密码"
-            >
-              <Icon type="md-lock" slot="prepend"></Icon>
-            </i-input>
-          </FormItem>
-          <FormItem prop="password">
-            <i-input
-              type="password"
-              v-model="form.oncePasd"
-              clearable
-              placeholder="请再次输入密码"
-            >
-              <Icon type="md-lock" slot="prepend"></Icon>
-            </i-input>
-          </FormItem>
-          <FormItem>
-            <Button type="error" size="large" @click="handleSubmit" :loading="loading1" long>提交</Button>
-          </FormItem>
-        </Form>
-        <!-- 拼图验证码 -->
-        <verify
-          ref="verify"
-          class="verify-con"
-          :verifyType="verifyType"
-          @change="verifyChange"
-        ></verify>
-        <div class="login-btn"><a @click="$router.push('login')">前往登录</a></div>
+      <el-form
+        ref="formFirst"
+        :model="formFirst"
+        :rules="ruleInline"
+        style="width: 300px"
+        v-show="step === 0"
+      >
+        <el-form-item prop="mobile">
+          <el-input v-model="formFirst.mobile" clearable placeholder="手机号">
+            <template #prepend>
+              <el-icon><Iphone /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="code">
+          <el-input v-model="formFirst.code" clearable placeholder="手机验证码">
+            <template #prepend>
+              <el-icon><Message /></el-icon>
+            </template>
+            <template #append>
+              <el-button @click="sendCode">{{ codeMsg }}</el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            style="width: 100%"
+            :type="verifyStatus ? 'success' : 'default'"
+            @click="verifyBtnClick"
+          >
+            {{ verifyStatus ? "验证通过" : "点击完成安全验证" }}
+          </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="danger" style="width: 100%" :loading="loading" @click="next">
+            下一步
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="ruleInline"
+        style="width: 300px"
+        v-show="step === 1"
+      >
+        <el-form-item prop="password">
+          <el-input
+            v-model="form.password"
+            type="password"
+            show-password
+            clearable
+            placeholder="请输入至少六位密码"
+          >
+            <template #prepend>
+              <el-icon><Lock /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="oncePasd">
+          <el-input
+            v-model="form.oncePasd"
+            type="password"
+            show-password
+            clearable
+            placeholder="请再次输入密码"
+          >
+            <template #prepend>
+              <el-icon><Lock /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="danger"
+            size="large"
+            style="width: 100%"
+            :loading="loading1"
+            @click="handleSubmit"
+          >
+            提交
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <verify
+        ref="verify"
+        class="verify-con"
+        :verifyType="verifyType"
+        @change="verifyChange"
+      />
+      <div class="login-btn"><a @click="$router.push('login')">前往登录</a></div>
     </div>
     <div class="foot">
-      <Row type="flex" justify="space-around" class="help">
+      <el-row justify="space-around" class="help">
         <a class="item" href="https://pickmall.cn/" target="_blank">帮助</a>
         <a class="item" href="https://pickmall.cn/" target="_blank">隐私</a>
         <a class="item" href="https://pickmall.cn/" target="_blank">条款</a>
-      </Row>
-      <Row type="flex" justify="center" class="copyright">
-        Copyright © {{year}} - Present
-        <a href="https://pickmall.cn/" target="_blank" style="margin: 0 5px"
-          >{{config.title}}</a
-        >
+      </el-row>
+      <el-row justify="center" class="copyright">
+        Copyright © {{ year }} - Present
+        <a href="https://pickmall.cn/" target="_blank" style="margin: 0 5px">{{
+          config.title
+        }}</a>
         版权所有
-      </Row>
+      </el-row>
     </div>
   </div>
 </template>
 
 <script>
-
-import * as RegExp from '@/utils/regular.js';
-import * as apiLogin from '@/api/index.js';
-import { sendSms } from '@/api/common.js';
+import { Iphone, Message, Lock } from "@element-plus/icons-vue";
+import * as RegExp from "@/utils/regular.js";
+import * as apiLogin from "@/api/index.js";
+import { sendSms } from "@/api/common.js";
 import verify from "@/views/my-components/verify";
+
 export default {
-  name: 'ForgetPassword',
-  components: { verify },
-  data () {
+  name: "ForgetPassword",
+  components: { verify, Iphone, Message, Lock },
+  data() {
     return {
-      config:require('@/config'),
-      loading: false, // 加载状态
-      loading1: false, // 第二步加载状态
-      formFirst: { // 手机验证码表单
-        // 注册表单
-        mobile: '',
-        code: ''
+      config: require("@/config"),
+      loading: false,
+      loading1: false,
+      formFirst: {
+        mobile: "",
+        code: "",
       },
-      form: { // 密码
-        password: '',
-        oncePasd: ''
+      form: {
+        password: "",
+        oncePasd: "",
       },
-      year: new Date().getFullYear(), // 当前年份
-      step: 0, // 步骤
+      year: new Date().getFullYear(),
+      step: 0,
       ruleInline: {
-        // 验证规则
         mobile: [
-          { required: true, message: '请输入手机号码' },
+          { required: true, message: "请输入手机号码" },
           {
             pattern: RegExp.mobile,
-            trigger: 'blur',
-            message: '请输入正确的手机号'
-          }
+            trigger: "blur",
+            message: "请输入正确的手机号",
+          },
+        ],
+        code: [{ required: true, message: "请输入手机验证码" }],
+        password: [
+          { required: true, message: "密码不能为空" },
+          { pattern: RegExp.password, message: "密码不能少于6位" },
         ],
-        code: [{ required: true, message: '请输入手机验证码' }],
-        password: [{required: true, message: '密码不能为空'}, {pattern: RegExp.password, message: '密码不能少于6位'}]
       },
-      verifyStatus: false, // 图片验证状态
-      verifyType: 'FIND_USER', // 图片验证类型
-      codeMsg: '发送验证码', // 验证码文字
-      interval: '', // 定时器
-      time: 60 // 倒计时时间
+      verifyStatus: false,
+      verifyType: "FIND_USER",
+      codeMsg: "发送验证码",
+      interval: "",
+      time: 60,
     };
   },
   methods: {
-    // 提交短信验证码，修改密码
-    next () {
+    next() {
       this.$refs.formFirst.validate((valid) => {
         if (valid) {
           this.loading = true;
-          let data = JSON.parse(JSON.stringify(this.formFirst));
-          apiLogin.validateCode(data).then((res) => {
-            this.loading = false;
-            if (res.success) {
-            //   this.$Message.success('');
-              this.step = 1;
-            } else {
-              this.$Message.warning(res.message);
-            }
-          }).catch(() => { this.loading = false; });
-        } else {}
+          const data = JSON.parse(JSON.stringify(this.formFirst));
+          apiLogin
+            .validateCode(data)
+            .then((res) => {
+              this.loading = false;
+              if (res.success) {
+                this.step = 1;
+              } else {
+                this.$Message.warning(res.message);
+              }
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        }
       });
     },
-    handleSubmit () { // 提交密码
-      this.$refs.form.validate(valid => {
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
         if (valid) {
-          let params = JSON.parse(JSON.stringify(this.form));
+          const params = JSON.parse(JSON.stringify(this.form));
           if (params.password !== params.oncePasd) {
-            this.$Message.warning('两次输入密码不一致');
+            this.$Message.warning("两次输入密码不一致");
             return;
-          };
+          }
           params.mobile = this.formFirst.mobile;
           params.password = this.md5(params.password);
           delete params.oncePasd;
           this.loading1 = true;
 
-          apiLogin.forgetAndModify(params).then(res => {
-            this.loading1 = false;
-            if (res.success) {
-              this.$Message.success('修改密码成功');
-              this.$router.push('login');
-            }
-          }).catch(() => { this.loading = false; });
-        };
+          apiLogin
+            .forgetAndModify(params)
+            .then((res) => {
+              this.loading1 = false;
+              if (res.success) {
+                this.$Message.success("修改密码成功");
+                this.$router.push("login");
+              }
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        }
       });
     },
-    sendCode () { // 发送验证码
+    sendCode() {
       if (this.time === 60) {
-        if (this.formFirst.mobile === '') {
-          this.$Message.warning('请先填写手机号');
+        if (this.formFirst.mobile === "") {
+          this.$Message.warning("请先填写手机号");
           return;
         }
         if (!this.verifyStatus) {
-          this.$Message.warning('请先完成安全验证');
+          this.$Message.warning("请先完成安全验证");
           return;
         }
-        let params = {
+        const params = {
           mobile: this.formFirst.mobile,
-          verificationEnums: 'FIND_USER'
+          verificationEnums: "FIND_USER",
         };
-        sendSms(params).then(res => {
+        sendSms(params).then((res) => {
           if (res.success) {
-            this.$Message.success('验证码发送成功');
-            let that = this;
+            this.$Message.success("验证码发送成功");
+            const that = this;
             this.interval = setInterval(() => {
               that.time--;
               if (that.time === 0) {
                 that.time = 60;
-                that.codeMsg = '重新发送';
+                that.codeMsg = "重新发送";
                 that.verifyStatus = false;
                 clearInterval(that.interval);
               } else {
@@ -229,28 +247,26 @@ export default {
         });
       }
     },
-    verifyChange (con) { // 验证通过
+    verifyChange(con) {
       if (!con.status) return;
       this.$refs.verify.show = false;
       this.verifyStatus = true;
     },
-    verifyBtnClick () {
+    verifyBtnClick() {
       if (!this.verifyStatus) {
         this.$refs.verify.init();
       }
-    }
+    },
   },
-  mounted () {
-    document.querySelector('.forget-password').style.height = window.innerHeight + 'px'
+  mounted() {
+    document.querySelector(".forget-password").style.height = window.innerHeight + "px";
     this.$refs.formFirst.resetFields();
   },
-  watch: {
-  }
 };
 </script>
 
 <style scoped lang="scss">
-.forget-password{
+.forget-password {
   min-height: 700px;
 }
 .logo-box {
@@ -276,38 +292,20 @@ export default {
   width: 600px;
   background-color: #fff;
   padding: 20px 150px;
-  .login-btn{
+  .login-btn {
     position: absolute;
     right: 20px;
     top: -45px;
   }
 }
 
-.verify-con{
+.verify-con {
   position: absolute;
   left: 140px;
   top: -30px;
   z-index: 10;
 }
 
-.other-login {
-  margin: 0 auto;
-  .ivu-icon {
-    font-size: 24px;
-  }
-}
-.regist {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: -10px;
-  span {
-    margin-left: 10px;
-    &:hover {
-      cursor: pointer;
-      color: $theme_color;
-    }
-  }
-}
 .foot {
   position: fixed;
   bottom: 4vh;
diff --git a/seller/src/views/Main.vue b/seller/src/views/Main.vue
index 13d42126..ad5deca5 100644
--- a/seller/src/views/Main.vue
+++ b/seller/src/views/Main.vue
@@ -1,4 +1,4 @@
-<style lang="scss" scoped>
+<style lang="scss">
 @import "./main.scss";
 </style>
 
@@ -8,177 +8,155 @@
       <div class="logo-con">
         <img :src="storeSideLogo" 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">
-        <div
-          class="header-avator-con"
-        >
-          <!-- 左侧栏 -->
-          <div>
-
-          </div>
-          <!-- 用户头像 -->
+        <div class="header-avator-con">
+          <div></div>
           <div class="user-dropdown-menu-con">
-            <Row
+            <el-row
               type="flex"
               justify="end"
               align="middle"
               class="user-dropdown-innercon"
             >
               <ul class="nav-list">
-                <li class="nav-item " @click="im">
-                  <Tooltip content="联系客服">
-                    <Button type="info" size="small" :loading='load' icon="md-chatbubbles">客服</Button>
-                  </Tooltip>
+                <li class="nav-item" @click="im">
+                  <el-tooltip content="联系客服" placement="bottom">
+                    <el-button type="info" size="small" :loading="load">
+                      <el-icon><ChatDotRound /></el-icon>
+                      客服
+                    </el-button>
+                  </el-tooltip>
                 </li>
-                <li class="nav-item " @click="handleClickSetting">
-                  <Tooltip content="设置">
-                    <Icon size="16" type="md-settings" />
-                  </Tooltip>
+                <li class="nav-item" @click="handleClickSetting">
+                  <el-tooltip content="设置" placement="bottom">
+                    <el-icon :size="16"><Setting /></el-icon>
+                  </el-tooltip>
                 </li>
               </ul>
-              <Dropdown
-                transfer
-                trigger="hover"
-                @on-click="handleClickUserDropdown"
-              >
+              <el-dropdown trigger="hover" @command="handleClickUserDropdown">
                 <div class="dropList">
-
-                  <Avatar
-                    icon="ios-person"
+                  <el-avatar
+                    :size="32"
                     :src="userInfo.storeLogo"
                     style="background: #fff; margin-left: 10px"
-                  ></Avatar>
+                  >
+                    <el-icon><UserFilled /></el-icon>
+                  </el-avatar>
                 </div>
-                <DropdownMenu slot="list">
-                  <DropdownItem name="changePass">修改密码</DropdownItem>
-                  <DropdownItem name="loginOut" divided>退出</DropdownItem>
-                </DropdownMenu>
-              </Dropdown>
-            </Row>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item command="changePass">修改密码</el-dropdown-item>
+                    <el-dropdown-item divided command="loginOut">退出</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </el-row>
           </div>
         </div>
       </div>
-      <!-- 已打开的页面标签 -->
       <div class="tags-con" v-if="setting.isUseTabsRouter">
-        <tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>
+        <tags-page-opened :pageTagsList="pageTagsList" />
       </div>
     </div>
-    <div class="single-page-con" :style="{ 'top': setting.isUseTabsRouter ? '100px' : '60px', height: setting.isUseTabsRouter ? 'calc(100% - 110px)' : 'calc(100% - 70px)' }">
+    <div
+      class="single-page-con"
+      :style="{
+        top: setting.isUseTabsRouter ? '100px' : '60px',
+        height: setting.isUseTabsRouter ? 'calc(100% - 110px)' : 'calc(100% - 70px)',
+      }"
+    >
       <div class="single-page">
-        <!-- <keep-alive :include="cachePage"> -->
-        <!-- </keep-alive> -->
-        <keep-alive>
-          <router-view v-if="$route.meta.keepAlive"></router-view>
-        </keep-alive>
-        <router-view v-if="!$route.meta.keepAlive"></router-view>
+        <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"/>
+    <configDrawer ref="config" />
   </div>
 </template>
 
 <script>
+import { ChatDotRound, Setting, UserFilled } from "@element-plus/icons-vue";
 import shrinkableMenu from "./main-components/shrinkable-menu/shrinkable-menu.vue";
 import tagsPageOpened from "./main-components/tags-page-opened.vue";
 import circleLoading from "@/views/my-components/lili/circle-loading.vue";
 import configDrawer from "@/views/main-components/config-drawer.vue";
-
 import Cookies from "js-cookie";
 import util from "@/libs/util.js";
 import { logout } from "@/api/index";
 import { getIMDetail } from "@/api/common";
 import { userMsg } from "@/api/index";
+
 const config = require("@/config/index.js");
+
 export default {
   components: {
+    ChatDotRound,
+    Setting,
+    UserFilled,
     shrinkableMenu,
     tagsPageOpened,
     circleLoading,
-    configDrawer
+    configDrawer,
   },
   data() {
     return {
       config,
-      sliceNum: 5, // 展示nav数量
-      userInfo: {}, // 用户信息
-
-      storeSideLogo: "", //logo图片
-      IMLink: "", // IM链接
-      load: false, // 加载IM状态
+      sliceNum: 5,
+      userInfo: {},
+      storeSideLogo: "",
+      IMLink: "",
+      load: false,
     };
   },
   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.storeOpenedList; // 打开的页面的页面对象
-    },
-    cachePage() {
-      return this.$store.state.app.cachePage;
+      return this.$store.state.app.storeOpenedList;
     },
     lang() {
       return this.$store.state.app.lang;
     },
-    mesCount() {
-      return 0;
-    },
   },
   methods: {
     handleClickSetting() {
       this.$refs.config.open();
     },
-    
-    /**
-     * 点击登录im的时候需要去判断一下当前店铺信息是否失效
-     * 失效的话重新请求刷新token保证最新的token去访问im
-     */
-    async im () {
-       // 获取访问Token
-       let accessToken = this.getStore("accessToken");
-       this.load = true
-       await this.getIMDetailMethods();
-       const userInfo = await userMsg();
-       this.load = false
-       if (userInfo.success && this.IMLink) {
-         window.open(`${this.IMLink}?token=` + accessToken);
-       }
-       else{
-         this.$Message.error("请登录后再联系客服");
-       }
-     },
-
-    // 获取im信息
-     async getIMDetailMethods () {
-       let res = await getIMDetail();
-       if (res.success) {
-         this.IMLink = res.result;
-       }
-     },
-    
-    // 初始化方法
+    async im() {
+      const accessToken = this.getStore("accessToken");
+      this.load = true;
+      await this.getIMDetailMethods();
+      const userInfo = await userMsg();
+      this.load = false;
+      if (userInfo.success && this.IMLink) {
+        window.open(`${this.IMLink}?token=` + accessToken);
+      } else {
+        this.$Message.error("请登录后再联系客服");
+      }
+    },
+    async getIMDetailMethods() {
+      const res = await getIMDetail();
+      if (res.success) {
+        this.IMLink = res.result;
+      }
+    },
     init() {
-      // 菜单
-      let pathArr = util.setCurrentPath(this, this.$route.name);
+      const pathArr = util.setCurrentPath(this, this.$route.name);
       if (pathArr.length >= 2) {
         this.$store.commit("addOpenSubmenu", pathArr[1].name);
       }
       this.storeSideLogo = localStorage.getItem("sellerlogoImg");
       window.document.title = localStorage.getItem("sellersiteName");
-      //动态获取icon
-      let link =
+      const link =
         document.querySelector("link[rel*='icon']") ||
         document.createElement("link");
       link.type = "image/x-icon";
@@ -186,47 +164,33 @@ export default {
       link.rel = "shortcut icon";
       document.getElementsByTagName("head")[0].appendChild(link);
 
-      let userInfo = JSON.parse(Cookies.get("userInfoSeller"));
+      const userInfo = JSON.parse(Cookies.get("userInfoSeller"));
       this.userInfo = userInfo;
       this.checkTag(this.$route.name);
 
-      let currWidth = document.body.clientWidth;
+      const currWidth = document.body.clientWidth;
       if (currWidth <= 1200) {
         this.sliceNum = 2;
       }
     },
-    // 用户头像下拉
     handleClickUserDropdown(name) {
-      if (name == "ownSpace") {
-        util.openNewPage(this, "personal-enter");
-        this.$router.push({
-          name: "personal-enter",
-        });
-      } else if (name == "changePass") {
+      if (name === "changePass") {
         util.openNewPage(this, "change_pass");
-        this.$router.push({
-          name: "change_pass",
-        });
-      } else if (name == "loginOut") {
-        logout().then(res => {
+        this.$router.push({ name: "change_pass" });
+      } else if (name === "loginOut") {
+        logout().then(() => {
           Cookies.set("accessToken", "");
           this.$store.commit("logout", this);
           this.$store.commit("clearOpenedSubmenu");
           this.setStore("accessToken", "");
           this.setStore("refreshToken", "");
           this.$router.push({ path: "/login" });
-        })
+        });
       }
     },
-    // 快捷页签选中状态
     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,
@@ -235,21 +199,16 @@ 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;
     },
   },
   watch: {
     $route(to) {
       this.$store.commit("setCurrentPageName", to.name);
-      let pathArr = util.setCurrentPath(this, to.name);
+      const pathArr = util.setCurrentPath(this, to.name);
       if (pathArr.length > 2) {
         this.$store.commit("addOpenSubmenu", pathArr[1].name);
       }
@@ -257,20 +216,19 @@ export default {
       localStorage.currentPageName = to.name;
     },
     lang() {
-      util.setCurrentPath(this, this.$route.name); // 在切换语言时用于刷新面包屑
+      util.setCurrentPath(this, this.$route.name);
     },
   },
+  created() {
+    this.$store.commit("setOpenedList");
+  },
   mounted() {
     this.init();
-    let that = this;
     this.resize();
-    window.addEventListener("resize", function () {
-      that.resize();
-    });
+    window.addEventListener("resize", this.resize);
   },
-  created() {
-    // 显示打开的页面的列表
-    this.$store.commit("setOpenedList");
+  beforeUnmount() {
+    window.removeEventListener("resize", this.resize);
   },
 };
 </script>
diff --git a/seller/src/views/change-password/change-password.vue b/seller/src/views/change-password/change-password.vue
index 98c8799d..24ca7f69 100644
--- a/seller/src/views/change-password/change-password.vue
+++ b/seller/src/views/change-password/change-password.vue
@@ -1,47 +1,55 @@
 <template>
   <div>
-    <Card class="change-pass">
-      <p slot="title"><Icon type="key"></Icon>修改密码</p>
-      <div>
-        <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.oldPass" placeholder="请输入现在使用的密码"></Input>
-          </FormItem>
-          <FormItem label="新密码" prop="newPassword">
-            <SetPassword style="width:350px;" v-model="editPasswordForm.newPassword" @on-change="changeInputPass" />
-          </FormItem>
-          <FormItem label="确认新密码" prop="rePass">
-            <Input type="password" v-model="editPasswordForm.rePass" placeholder="请再次输入新密码"></Input>
-          </FormItem>
-          <FormItem>
-            <Button
-              type="primary"
-              style="width: 100px;margin-right:5px"
-              :loading="savePassLoading"
-              @click="editPassword"
-            >保存</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="oldPass">
+          <el-input
+            v-model="editPasswordForm.oldPass"
+            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="rePass">
+          <el-input
+            v-model="editPasswordForm.rePass"
+            type="password"
+            show-password
+            placeholder="请再次输入新密码"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :loading="savePassLoading" @click="editPassword">
+            保存
+          </el-button>
+          <el-button @click="cancelEditPass">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
   </div>
 </template>
 
 <script>
-import SetPassword from "@/views/my-components/lili/set-password";
+import SetPassword from "@/components/lili/set-password";
 import { changePass } from "@/api/index";
+import { ElMessageBox } from "element-plus";
+
 export default {
   name: "change_pass",
   components: {
-    SetPassword
+    SetPassword,
   },
   data() {
     const valideRePassword = (rule, value, callback) => {
@@ -52,106 +60,67 @@ export default {
       }
     };
     return {
-      savePassLoading: false, // 保存loading
-      editPasswordForm: { // 修改密码表单 
-        oldPass: "", // 旧密码
-        newPassword: "", // 新密码
-        rePass: "" // 从新输入新密码
+      savePassLoading: false,
+      editPasswordForm: {
+        oldPass: "",
+        newPassword: "",
+        rePass: "",
       },
-      strength: "", // 密码强度
-      // 验证规则
+      strength: "",
       passwordValidate: {
-        oldPass: [
-          {
-            required: true,
-            message: "请输入原密码",
-            trigger: "blur"
-          }
-        ],
+        oldPass: [{ 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" },
         ],
         rePass: [
-          {
-            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;
     },
-    // 修改密码
     editPassword() {
-      let params = {
+      const params = {
         password: this.md5(this.editPasswordForm.oldPass),
-        newPassword: this.md5(this.editPasswordForm.newPassword)
+        newPassword: this.md5(this.editPasswordForm.newPassword),
       };
-      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.$store.commit("clearOpenedSubmenu");
-                  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.$store.commit("clearOpenedSubmenu");
+                this.$router.push({ name: "login" });
+              },
+            });
+          }
+        });
       });
     },
-    // 取消修改密码
     cancelEditPass() {
       this.$store.commit("removeTag", "change_pass");
       localStorage.storeOpenedList = JSON.stringify(
         this.$store.state.app.storeOpenedList
       );
-      let lastPageName = "";
-      let length = this.$store.state.app.storeOpenedList.length;
-      if (length > 1) {
-        lastPageName = this.$store.state.app.storeOpenedList[length - 1].name;
-      } else {
-        lastPageName = this.$store.state.app.storeOpenedList[0].name;
-      }
-      this.$router.push({
-        name: lastPageName
-      });
-    }
-  }
+      const list = this.$store.state.app.storeOpenedList;
+      const lastPageName = list.length > 1 ? list[list.length - 1].name : list[0].name;
+      this.$router.push({ name: lastPageName });
+    },
+  },
 };
 </script>
+
 <style lang="scss" scoped>
 .change-pass {
   &-btn-box {
diff --git a/seller/src/views/distribution/distributionGoods.vue b/seller/src/views/distribution/distributionGoods.vue
index f4990787..cf067931 100644
--- a/seller/src/views/distribution/distributionGoods.vue
+++ b/seller/src/views/distribution/distributionGoods.vue
@@ -1,291 +1,238 @@
 <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="goodsName">
-            <Input type="text" v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 240px"/>
-          </Form-item>
-          <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
-        </Form>
-      </Row>
-      </Card>
-    <Card>
-      <Row class="operation padding-row">
-        <Button @click="add" type="primary">添加</Button>
-      </Row>
-      <Table class="mt_10" :loading="loading" border :columns="columns" :data="data" ref="table" >
-        <!-- 商品栏目格式化 -->
-        <template slot="goodsSlot" slot-scope="{row}">
-          <div style="margin-top: 5px;height: 70px; display: flex;">
-            <div style="">
-              <img :src="row.thumbnail" style="height: 60px;margin-top: 3px;width: 60px">
-            </div>
+  <div>
+    <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>
 
-            <div style="margin-left: 13px;">
-              <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>
-                </div>
-                <img src="../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="">
-              </Poptip>
-            </div>
-          </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="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
-    <liliDialog
-      ref="liliDialog"
-      @selectedGoodsData="selectedGoodsData"
-    ></liliDialog>
-    <Modal
-      :title="modalTitle"
-      v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
-    >
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="分销佣金" prop="commission">
-          <Input v-model="form.commission" 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" style="margin: 10px 0">
+        <el-button type="primary" @click="delAll">批量下架</el-button>
       </div>
-    </Modal>
+
+      <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>
+              <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 {
-        getDistributionGoods,
-        distributionGoodsCancel,
-        distributionGoodsCheck
-    } from "@/api/distribution";
-import liliDialog from "../lili-dialog/index";
+import { delDistributionGoods, getDistributionGoods } from "@/api/distribution";
+import vueQr from "vue-qr";
 
-import {getShopListData} from '@/api/shops'
 export default {
   name: "distributionGoods",
-  components: {
-    liliDialog
-  },
+  components: { vueQr },
   data() {
     return {
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
-      submitLoading: false, // 添加或编辑提交状态
-      shopList:[], // 店铺列表
-      loading: true, // 表单加载状态
-      searchForm: { // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
       },
-      selectList: [], // 多选数据
-      form:{
-        commission : 1 // 分销金额
-      },
-      skuId:0, // 当前分销商品的skuId
-      formValidate: {
-        commission: [
-          { required: true, message: '请输入大于1小于9999的合法分销金额'},
-          {
-            pattern:  /^[1-9]\d{0,3}(\.\d{1,2})?$/,
-            message: "请输入大于1小于9999的合法分销金额",
-            trigger: "change"
-          }],
-      },
-      columns: [ // 表格表头
-        {
-          title: "商品名称",
-          key: "goodsName",
-          minWidth: 250,
-          slot: "goodsSlot",
-        },
-        {
-          title: "商品价格",
-          key: "price",
-          width: 130,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-          }
-        },
-        {
-          title: "库存",
-          key: "quantity",
-          width: 100
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          minWidth: 120,
-        },
-        {
-            title: "佣金金额",
-            key: "commission",
-            width: 120,
-            render: (h, params) => {
-                if(params.row.commission !=null){
-                  return h("div", this.$options.filters.unitPrice(params.row.commission,'￥'));
-                }else{
-                  return h("div", this.$options.filters.unitPrice(0,'￥'));
-                }
-            }
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 150,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          }
-        }
-      ],
-      data: [], // 表单数据
-      total: 0 // 表单数据总数
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    init() { // 初始化数据
+    init() {
       this.getDataList();
     },
-    // 选择商品回调
-    selectedGoodsData(v){
-      this.modalVisible = true
-      this.form.commission = 1
-      this.modalTitle = "保存分销商品"
-      this.skuId = v[0].id
-    },
-    // 添加商品modal
-    add(){
-      this.$refs.liliDialog.flag = true;
-      this.$refs.liliDialog.goodsFlag = true;
-      this.$refs.liliDialog.singleGoods();
-    },
-    // 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
-      this.$refs.table.selectAll(false);
+      this.clearSelectAll();
     },
-    // 添加商品
-    handleSubmit(){
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          distributionGoodsCheck(this.skuId,this.form).then(res => {
-            if(res.message === 'success') {
-              this.$Message.success("添加成功");
-            }
-            this.modalVisible = false
-            this.getDataList()
-          });
-        }
-      })
-    },
-    // 改变页数
     changePageSize(v) {
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
+      this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 获取商品列表
+    clearSelectAll() {
+      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: "您确认要删除此分销商品么?",
+        title: "确认下架",
+        content: "您确认要下架么?",
         loading: true,
         onOk: () => {
-          // 删除
-          distributionGoodsCancel(v.id).then(res => {
+          delDistributionGoods(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
-              this.$Message.success("删除成功");
+              this.$Message.success("下架成功");
               this.getDataList();
             }
           });
-        }
+        },
       });
     },
-    // 获取店铺列表 搜索项用
-    getShopList (val) {
-      const params = {
-        pageNumber:1,
-        pageSize:10,
-        storeName:''
+    delAll() {
+      if (this.selectCount <= 0) {
+        this.$Message.warning("您还未选择要下架的数据");
+        return;
       }
-      if (val) {
-        params.storeName = val;
-      } else {
-        params.storeName = ''
-      }
-
-      getShopListData(params).then(res => {
-        this.shopList = res.result.records
-      })
+      this.$Modal.confirm({
+        title: "确认下架",
+        content: "您确认要下架所选的 " + this.selectCount + " 条数据?",
+        loading: true,
+        onOk: () => {
+          const ids = this.selectList.map((item) => item.id);
+          delDistributionGoods(ids.toString()).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("下架成功");
+              this.clearSelectAll();
+              this.getDataList();
+            }
+          });
+        },
+      });
     },
-    searchChange(val){
-      this.getShopList(val)
-    }
   },
   mounted() {
     this.init();
-  }
+  },
 };
 </script>
+
 <style lang="scss" scoped>
-  @import "@/styles/table-common.scss";
-  .search-form{
-    width: 100%;
-  }
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.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/seller/src/views/distribution/distributionOrder.vue b/seller/src/views/distribution/distributionOrder.vue
index 934c924f..54c21f76 100644
--- a/seller/src/views/distribution/distributionOrder.vue
+++ b/seller/src/views/distribution/distributionOrder.vue
@@ -1,173 +1,281 @@
 <template>
-  <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70"  @keydown.enter.native="handleSearch" 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="订单时间">
-          <DatePicker type="daterange" v-model="timeRange" format="yyyy-MM-dd" placeholder="选择时间" style="width: 240px"></DatePicker>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
-      </Form>
-    </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="[10,20,50]" size="small"
-          show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
+  <div>
+    <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="distributionName">
+          <el-input
+            v-model="searchForm.distributionName"
+            placeholder="请输入分销商名称"
+            clearable
+            style="width: 240px"
+          />
+        </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>
+                <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>
+          </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";
 
 export default {
   name: "distributionOrder",
-  components: {},
+  components: { vueQr },
   data() {
     return {
-      timeRange: [], // 范围时间
-      orderStatusList, // 订单状态列表
-      distributionId: this.$route.query.id, // 分销id
-      loading: true, // 表单加载状态
+      timeRange: [],
+      orderStatusList,
+      shopList: [],
+      distributionId: this.$route.query.id,
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort:"create_time",
-        order:"desc"
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "create_time",
+        order: "desc",
       },
-      columns: [
-        {
-          title: "订单编号",
-          key: "orderSn",
-          minWidth: 120,
-          tooltip: true,
-        },
-
-
-        {
-          title: "商品名称",
-          key: "goodsName",
-          minWidth: 120,
-          tooltip: true,
-        },
-        {
-          title: "状态",
-          key: "distributionOrderStatus",
-          width: 100,
-          sortable: false,
-          render: (h, params) => {
-            if (params.row.distributionOrderStatus == "NO_COMPLETED") {
-              return h("Tag", { props: { color: "orange" } }, "未完成");
-            } else if (params.row.distributionOrderStatus == "COMPLETE") {
-              return h("Tag", { props: { color: "green" } }, "完成");
-            } else if (params.row.distributionOrderStatus == "REFUND") {
-              return h("Tag", { props: { color: "red" } }, "退款");
-            } else {
-              return h("Tag", { props: { color: "orange" } }, "未完成");
-            }
-
-          },
-        },
-
-        {
-          title: "佣金金额",
-          key: "rebate",
-          width: 120,
-          sortable: false,
-          render: (h, params) => {
-            if (params.row.rebate == null) {
-              return h("div", this.$options.filters.unitPrice(0, "￥"));
-            } else {
-              return h(
-                "div",
-                this.$options.filters.unitPrice(params.row.rebate, "￥")
-              );
-            }
-          },
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          width: 180,
-          sortable: false,
-        },
-        {
-          title: "解冻日期（T+1）",
-          key: "settleCycle",
-          width: 180,
-          sortable: false,
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      data: [],
+      total: 0,
     };
   },
-  methods: {
-    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 = 10;
-      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;
-      this.loading = false;
-    },
-  },
-  mounted() {
-    this.init();
-  },
   watch: {
     $route(e) {
       this.distributionId = e.query.id ? e.query.id : undefined;
       this.getDataList();
     },
   },
+  methods: {
+    init() {
+      this.getDataList();
+      this.getShopList();
+    },
+    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;
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+    },
+    getShopList(val) {
+      const params = {
+        pageNumber: 1,
+        pageSize: 20,
+        storeName: val || "",
+      };
+      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 "未完成";
+    },
+    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" >
-@import "@/styles/table-common.scss";
-</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/seller/src/views/error-page/403.vue b/seller/src/views/error-page/403.vue
index 044a03ab..dc816f3e 100644
--- a/seller/src/views/error-page/403.vue
+++ b/seller/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>
@@ -33,6 +32,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @keyframes error403animation {
   0% {
@@ -82,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;
@@ -98,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 {
@@ -125,4 +112,3 @@ export default {
   }
 }
 </style>
-
diff --git a/seller/src/views/error-page/404.vue b/seller/src/views/error-page/404.vue
index eaa451ff..7b34d24b 100644
--- a/seller/src/views/error-page/404.vue
+++ b/seller/src/views/error-page/404.vue
@@ -1,91 +1,95 @@
-
 <template>
-    <div class="error404">
-        <div class="error404-body-con">
-            <Card>
-                <div class="error404-body-con-title">4<span><Icon type="ios-navigate-outline"></Icon></span>4</div>
-                <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>
-                </div>
-            </Card>
+  <div class="error404">
+    <div class="error404-body-con">
+      <el-card>
+        <div class="error404-body-con-title">
+          4<span>🧭</span>4
         </div>
+        <p class="error404-body-con-message">YOU&nbsp;&nbsp;LOOK&nbsp;&nbsp;LOST</p>
+        <div class="error404-btn-con">
+          <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>
+      </el-card>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'Error404',
-    methods: {
-        backPage () {
-            this.$router.go(-1);
-        },
-        goHome () {
-            this.$router.push({
-                name: 'home_index'
-            });
-        }
-    }
+  name: "Error404",
+  methods: {
+    backPage() {
+      this.$router.go(-1);
+    },
+    goHome() {
+      this.$router.push({
+        name: "home_index",
+      });
+    },
+  },
 };
 </script>
+
 <style lang="scss" scoped>
-   @keyframes error404animation {
-    0% {
-        transform: rotateZ(0deg);
-    }
-    20% {
-        transform: rotateZ(-60deg);
-    }
-    40% {
-        transform: rotateZ(-10deg);
-    }
-    60% {
-        transform: rotateZ(50deg);
-    }
-    80% {
-        transform: rotateZ(-20deg);
-    }
-    100% {
-        transform: rotateZ(0deg);
-    }
+@keyframes error404animation {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  20% {
+    transform: rotateZ(-60deg);
+  }
+  40% {
+    transform: rotateZ(-10deg);
+  }
+  60% {
+    transform: rotateZ(50deg);
+  }
+  80% {
+    transform: rotateZ(-20deg);
+  }
+  100% {
+    transform: rotateZ(0deg);
+  }
 }
-.error404{
-    &-body-con{
-        width: 700px;
-        height: 500px;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%,-50%);
-        &-title{
-            text-align: center;
-            font-size: 240px;
-            font-weight: 700;
-            color: #2d8cf0;
-            height: 260px;
-            line-height: 260px;
-            margin-top: 40px;
-            span{
-                display: inline-block;
-                color: #19be6b;
-                font-size: 230px;
-                animation: error404animation 3s ease 0s infinite alternate;
-            }
-        }
-        &-message{
-            display: block;
-            text-align: center;
-            font-size: 30px;
-            font-weight: 500;
-            letter-spacing: 12px;
-            color: #dddde2;
-        }
+.error404 {
+  &-body-con {
+    width: 700px;
+    height: 500px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    &-title {
+      text-align: center;
+      font-size: 240px;
+      font-weight: 700;
+      color: #2d8cf0;
+      height: 260px;
+      line-height: 260px;
+      margin-top: 40px;
+      span {
+        display: inline-block;
+        color: #19be6b;
+        font-size: 120px;
+        animation: error404animation 3s ease 0s infinite alternate;
+      }
     }
-    &-btn-con{
-        text-align: center;
-        padding: 20px 0;
-        margin-bottom: 40px;
+    &-message {
+      display: block;
+      text-align: center;
+      font-size: 30px;
+      font-weight: 500;
+      letter-spacing: 12px;
+      color: #dddde2;
     }
+  }
+  &-btn-con {
+    text-align: center;
+    padding: 20px 0;
+    margin-bottom: 40px;
+  }
 }
 </style>
diff --git a/seller/src/views/error-page/500.vue b/seller/src/views/error-page/500.vue
index f947f0b5..0d9769e7 100644
--- a/seller/src/views/error-page/500.vue
+++ b/seller/src/views/error-page/500.vue
@@ -1,107 +1,102 @@
-
-
 <template>
-    <div class="error500">
-        <div class="error500-body-con">
-            <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>
-                </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>
-                </div>
-            </Card>
+  <div class="error500">
+    <div class="error500-body-con">
+      <el-card>
+        <div class="error500-body-con-title">
+          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">
+          <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>
+      </el-card>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'Error500',
-    methods: {
-        backPage () {
-            this.$router.go(-1);
-        },
-        goHome () {
-            this.$router.push({
-                name: 'home_index'
-            });
-        }
-    }
+  name: "Error500",
+  methods: {
+    backPage() {
+      this.$router.go(-1);
+    },
+    goHome() {
+      this.$router.push({
+        name: "home_index",
+      });
+    },
+  },
 };
 </script>
+
 <style lang="scss" scoped>
-   @keyframes error500animation {
-    0% {
-        transform: rotateZ(0deg);
-    }
-    20% {
-        transform: rotateZ(-10deg);
-    }
-    40% {
-        transform: rotateZ(5deg);
-    }
-    60% {
-        transform: rotateZ(-5deg);
-    }
-    80% {
-        transform: rotateZ(10deg);
-    }
-    100% {
-        transform: rotateZ(0deg);
-    }
+@keyframes error500animation {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  20% {
+    transform: rotateZ(-10deg);
+  }
+  40% {
+    transform: rotateZ(5deg);
+  }
+  60% {
+    transform: rotateZ(-5deg);
+  }
+  80% {
+    transform: rotateZ(10deg);
+  }
+  100% {
+    transform: rotateZ(0deg);
+  }
 }
-.error500{
-    &-body-con{
-        width: 700px;
-        height: 500px;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%,-50%);
-        &-title{
-            text-align: center;
-            font-size: 240px;
-            font-weight: 700;
-            color: #2d8cf0;
-            height: 260px;
-            line-height: 260px;
-            margin-top: 40px;
-            .error500-0-span{
-                display: inline-block;
-                position: relative;
-                width: 170px;
-                height: 170px;
-                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;
-                }
-            }
-        }
-        &-message{
-            display: block;
-            text-align: center;
-            font-size: 30px;
-            font-weight: 500;
-            letter-spacing: 4px;
-            color: #dddde2;
-        }
+.error500 {
+  &-body-con {
+    width: 700px;
+    height: 500px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    &-title {
+      text-align: center;
+      font-size: 240px;
+      font-weight: 700;
+      color: #2d8cf0;
+      height: 260px;
+      line-height: 260px;
+      margin-top: 40px;
+      .error500-0-span {
+        display: inline-block;
+        position: relative;
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        border: 20px solid #ed3f14;
+        color: #ed3f14;
+        margin-right: 10px;
+        font-size: 60px;
+        line-height: 80px;
+        animation: error500animation 3s ease 0s infinite alternate;
+      }
     }
-    &-btn-con{
-        text-align: center;
-        padding: 20px 0;
-        margin-bottom: 40px;
+    &-message {
+      display: block;
+      text-align: center;
+      font-size: 30px;
+      font-weight: 500;
+      letter-spacing: 4px;
+      color: #dddde2;
     }
+  }
+  &-btn-con {
+    text-align: center;
+    padding: 20px 0;
+    margin-bottom: 40px;
+  }
 }
 </style>
diff --git a/seller/src/views/goods/goods-manage/category.vue b/seller/src/views/goods/goods-manage/category.vue
index 323c66de..c0ee1ba5 100644
--- a/seller/src/views/goods/goods-manage/category.vue
+++ b/seller/src/views/goods/goods-manage/category.vue
@@ -1,251 +1,456 @@
 <template>
   <div>
-    <Card>
-      <div class="operation">
-        <Button @click="addParent">添加一级分类</Button>
-        <Button @click="refresh">刷新列表</Button>
+    <el-card>
+      <div class="mb_10">
+        <el-button type="primary" @click="addParent">添加一级分类</el-button>
       </div>
-      <tree-table
-        ref="treeTable"
-        size="small"
-        :loading="loading"
+
+      <el-table
+        v-loading="loading"
+        class="table"
         :data="tableData"
+        row-key="id"
+        border
+        :tree-props="{ children: 'children' }"
+        style="width: 100%"
+      >
+        <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 } : {}"
+            >
+              {{ 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>
 
-        :columns="columns"
-        :border="true"
-        :show-index="false"
-        :is-fold="true"
-        :expand-type="false"
-        primary-key="id">
-        <template slot="action" slot-scope="scope">
-          <a @click="edit(scope.row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">编辑</a>
-          <span style="margin:0 8px;color:#dcdee2">|</span>
-          <a v-show="scope.row.level != 1" @click="addChildren(scope.row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">添加子分类</a>
-          <span style="margin:0 8px;color:#dcdee2">|</span>
-          <a @click="remove(scope.row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">删除</a>
+      <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>
-      </tree-table>
+      </el-dialog>
 
-      <Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="500">
-        <Form ref="formAdd" :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="labelName">
-            <Input v-model="formAdd.labelName" maxlength="12" clearable style="width:100%"/>
-          </FormItem>
-          <FormItem label="排序值" prop="sortOrder" style="width:345px">
-            <InputNumber v-model="formAdd.sortOrder" :min="1"></InputNumber>
-          </FormItem>
-        </Form>
-        <div slot="footer">
-          <Button type="text" @click="modalVisible=false">取消</Button>
-          <Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
-        </div>
-      </Modal>
-    </Card>
+      <el-dialog
+        v-model="modalBrandVisible"
+        :title="modalBrandTitle"
+        width="500px"
+        :close-on-click-modal="false"
+      >
+        <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>
+
+      <el-dialog
+        v-model="modalSpecVisible"
+        :title="modalSpecTitle"
+        width="500px"
+        :close-on-click-modal="false"
+      >
+        <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"
+              :key="item.id"
+              :label="item.specName"
+              :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 * as API_Goods from "@/api/goods";
 
-import TreeTable from "@/views/my-components/tree-table/Table/Table";
-
+import {
+  delCategory,
+  disableCategory,
+  getBrandListData,
+  getCategoryBrandListData,
+  getCategorySpecListData,
+  getCategoryTree,
+  getSpecificationList,
+  insertCategory,
+  saveCategoryBrand,
+  saveCategorySpec,
+  updateCategory,
+} from "@/api/goods";
+import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
 import { regular } from "@/utils";
-import {VARCHAR20} from "../../../utils/regular";
 
 export default {
-  name: "store-category",
+  name: "goods-category",
   components: {
-    TreeTable
+    uploadPicInput,
   },
   data() {
     return {
-      submitLoading: false, // 提交loading
-      loading: false, //表格加载的loading
-      modalType: 0, // 添加或编辑标识
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
-      showParent: false, // 是否展示上级菜单
-      parentTitle: "", // 父级菜单名称
-      formAdd: { // 添加或编辑表单对象初始化数据
+      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: "",
-        labelName: "",
-        sortOrder: 1,
+        name: "",
+        image: "",
+        sortOrder: 0,
+        deleteFlag: false,
+        commissionRate: 0,
         level: 0,
       },
-      // 表单验证规则
-      formValidate: {
-        labelName: [
-          regular.REQUIRED,
-          regular.VARCHAR20
-        ],
-        sortOrder: [
-          regular.REQUIRED,
-          regular.INTEGER
-        ],
+      brandForm: {
+        categoryBrands: [],
       },
-      columns: [
-        {
-          title: "分类名称",
-          key: "labelName",
-          align: "left",
-          minWidth: "120px",
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "left",
-          headerAlign: "center",
-          width: "280px",
-          type: "template",
-          template: "action",
-        }
-      ],
-      // 表格数据
-      tableData: []
+      brandWay: [],
+      specForm: {
+        categorySpecs: [],
+      },
+      formValidate: {
+        commissionRate: [regular.REQUIRED, regular.INTEGER],
+        name: [regular.REQUIRED, regular.VARCHAR20],
+        sortOrder: [regular.REQUIRED, regular.INTEGER],
+      },
+      tableData: [],
     };
   },
   methods: {
-    // 初始化数据
+    normalizeCategoryTree(list) {
+      if (!Array.isArray(list) || list.length === 0) return;
+      list.forEach((item) => {
+        if (!item || typeof item !== "object") return;
+        if (item.deleteFlag === 0) item.deleteFlag = false;
+        else if (item.deleteFlag === 1) item.deleteFlag = true;
+        else item.deleteFlag = !!item.deleteFlag;
+        if (Array.isArray(item.children) && item.children.length) {
+          this.normalizeCategoryTree(item.children);
+        }
+      });
+    },
+    onStatusSwitchChange(row, nextDeleteFlag) {
+      const previousDeleteFlag = !nextDeleteFlag;
+      const isClosing = nextDeleteFlag === true;
+      this.$Modal.confirm({
+        title: isClosing ? "确认关闭" : "确认开启",
+        content: `您是否要${isClosing ? "关闭" : "开启"}当前分类 ${row.name} 及其子分类?`,
+        loading: true,
+        okText: "是",
+        cancelText: "否",
+        onOk: () => {
+          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();
+      this.getBrandList();
+      this.getSpecList();
     },
-    // 刷新列表
-    refresh() {
-      this.loading = true;
-      let that = this;
-      setTimeout(function () {
-        that.init();
-        that.$Message.success("刷新成功");
-        that.loading = false;
-      }, 500);
+    getBrandList() {
+      getBrandListData().then((res) => {
+        this.brandWay = res;
+      });
+    },
+    getSpecList() {
+      getSpecificationList().then((res) => {
+        if (res.length != 0) {
+          this.specifications = res.result;
+        }
+      });
+    },
+    brandOperation(v) {
+      getCategoryBrandListData(v.id).then((res) => {
+        this.categoryId = v.id;
+        this.modalBrandTitle = "品牌关联";
+        this.brandForm.categoryBrands = res.result.map((item) => item.id);
+        this.modalBrandVisible = true;
+      });
+    },
+    specOperation(v) {
+      getCategorySpecListData(v.id).then((res) => {
+        this.categoryId = v.id;
+        this.modalSpecTitle = "规格关联";
+        this.specForm.categorySpecs = res.map((item) => item.id);
+        this.modalSpecVisible = true;
+      });
+    },
+    saveCategorySpec() {
+      saveCategorySpec(this.categoryId, this.specForm).then((res) => {
+        this.submitLoading = false;
+        if (res.success) {
+          this.$Message.success("操作成功");
+          this.modalSpecVisible = false;
+        }
+      });
+    },
+    saveCategoryBrand() {
+      saveCategoryBrand(this.categoryId, this.brandForm).then((res) => {
+        this.submitLoading = false;
+        if (res.success) {
+          this.$Message.success("操作成功");
+          this.modalBrandVisible = false;
+        }
+      });
     },
-    //添加子分类
     addChildren(v) {
       this.modalType = 0;
       this.modalTitle = "添加子分类";
-      this.parentTitle = v.labelName;
-      this.formAdd.level = eval(v.level + "+1");
-      this.formAdd.labelName = "";
+      this.parentTitle = v.name;
+      this.formAdd.level = Number(v.level) + 1;
+      this.formAdd.commissionRate = v.commissionRate;
       this.showParent = true;
       delete this.formAdd.id;
-      this.formAdd.parentId = v.id || 0;
+      this.formAdd.parentId = v.id;
       this.modalVisible = true;
     },
-    // 编辑分类
     edit(v) {
       this.modalType = 1;
       this.modalTitle = "编辑";
       this.formAdd.id = v.id;
-      this.formAdd.labelName = v.labelName;
+      this.formAdd.name = v.name;
       this.formAdd.level = v.level;
-      this.formAdd.parentId = v.parentId || 0;
+      this.formAdd.parentId = v.parentId;
       this.formAdd.sortOrder = v.sortOrder;
+      this.formAdd.commissionRate = v.commissionRate;
+      this.formAdd.deleteFlag = v.deleteFlag;
+      this.formAdd.image = v.image;
       this.showParent = false;
       this.modalVisible = true;
     },
-    //添加一级分类
     addParent() {
       this.modalType = 0;
-      this.formAdd.labelName = "";
       this.modalTitle = "添加一级分类";
       this.parentTitle = "顶级分类";
       this.showParent = true;
+      this.$refs.form?.resetFields();
       delete this.formAdd.id;
       this.formAdd.parentId = 0;
-      this.formAdd.sortOrder = 1;
       this.formAdd.level = 0;
       this.modalVisible = true;
-
     },
-    //提交编辑和添加
-    submit() {
-      this.$refs.formAdd.validate(valid => {
-        if (valid) {
-          this.submitLoading = true;
-          if (this.modalType === 0) {
-            // 添加 避免编辑后传入id等数据 记得删除
-            delete this.formAdd.id;
-            API_Goods.addShopGoodsLabel(this.formAdd).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("添加成功");
-                this.getAllList(0);
-                this.modalVisible = false;
-              }
-            });
-          } else {
-            // 编辑
-            API_Goods.editShopGoodsLabel(this.formAdd).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("修改成功");
-                this.getAllList(0);
-                this.modalVisible = false;
-              }
-            });
-          }
+    Submit() {
+      this.$refs.form.validate((valid) => {
+        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.labelName + " ?",
+        content: "您确认要删除 " + v.name + " ?",
         loading: true,
         onOk: () => {
-          // 删除
-          API_Goods.delCategdelShopGoodsLabel(v.id).then(res => {
+          delCategory(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("操作成功");
               this.getAllList();
             }
           });
-        }
+        },
       });
     },
-    // 获取分类
     getAllList() {
       this.loading = true;
-      API_Goods.getShopGoodsLabelList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          res.result.forEach(firstCate => {
-            if (firstCate.children && firstCate.children.length) {
-              firstCate.children.forEach(secondCate => {
-                secondCate.parentId = firstCate.id
-              })
+      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: "确认启用",
+        content: "您是否要启用当前分类 " + v.name + " 及其子分类?",
+        loading: true,
+        okText: "是",
+        cancelText: "否",
+        onOk: () => {
+          disableCategory(v.id, { enableOperations: 0 }).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getAllList();
             }
           });
-          this.tableData = res.result;
-        }
+        },
+        onCancel: () => {
+          this.getAllList();
+        },
+      });
+    },
+    disable(v) {
+      this.$Modal.confirm({
+        title: "确认禁用",
+        content: "您是否要禁用当前分类 " + v.name + " 及其子分类?",
+        loading: true,
+        okText: "是",
+        cancelText: "否",
+        onOk: () => {
+          disableCategory(v.id, { enableOperations: true }).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getAllList();
+            }
+          });
+        },
+        onCancel: () => {
+          this.getAllList();
+        },
       });
     },
   },
   mounted() {
     this.init();
-  }
+  },
 };
 </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;
 }
-.operation {
+.mb_10 {
   margin-bottom: 10px;
 }
 </style>
diff --git a/seller/src/views/goods/goods-seller/addGoods.scss b/seller/src/views/goods/goods-seller/addGoods.scss
index 3ae1231c..e8212a02 100644
--- a/seller/src/views/goods/goods-seller/addGoods.scss
+++ b/seller/src/views/goods/goods-seller/addGoods.scss
@@ -85,7 +85,7 @@
     flex-wrap: wrap !important;
   }
 
-  ::v-deep .sku-item-content-val {
+  :deep(.sku-item-content-val) {
     margin-right: 20px;
   }
 }
@@ -215,7 +215,7 @@ div.base-info-item {
   }
 
   /*teatarea*/
-  ::v-deep .el-textarea {
+  :deep(.el-textarea) {
     width: 150%;
   }
 
@@ -226,7 +226,7 @@ div.base-info-item {
 
 /*折叠面板*/
 .el-collapse-item {
-  ::v-deep .el-collapse-item__header {
+  :deep(.el-collapse-item__header) {
     text-align: left;
     background-color: #f8f8f8;
     padding: 0 10px;
@@ -240,7 +240,7 @@ div.base-info-item {
     width: 25%;
   }
 
-  ::v-deep .el-form-item__content {
+  :deep(.el-form-item__content) {
     margin-left: 120px;
     text-align: left;
   }
@@ -251,7 +251,7 @@ div.base-info-item {
     color: #999;
   }
 
-  ::v-deep .el-collapse-item__content {
+  :deep(.el-collapse-item__content) {
     padding: 10px 0;
     text-align: left;
   }
@@ -279,6 +279,11 @@ div.base-info-item {
 }
 
 /** 底部步骤 */
+.footer-btns {
+  display: flex;
+  gap: 10px;
+}
+
 .footer {
   width: 100%;
   margin-top: 20px;
@@ -296,11 +301,11 @@ div.base-info-item {
 
 /*图片上传组件第一张图设置封面*/
 .goods-images {
-  ::v-deep li.el-upload-list__item:first-child {
+  :deep(li.el-upload-list__item:first-child) {
     position: relative;
   }
 
-  ::v-deep li.el-upload-list__item:first-child:after {
+  :deep(li.el-upload-list__item:first-child:after) {
     content: "封";
     color: #fff;
     font-weight: bold;
@@ -394,7 +399,7 @@ div.base-info-item {
 }
 
 .required {
-  ::v-deep .ivu-form-item-label::before {
+  :deep(.el-form-item__label::before) {
     content: "*";
     display: inline-block;
     margin-right: 4px;
@@ -483,7 +488,7 @@ div.base-info-item {
   justify-content: center;
   align-items: center;
 
-  ::v-deep img {
+  :deep(img) {
     margin-right: 20px;
     width: 100px;
     margin-left: 10px;
@@ -491,7 +496,7 @@ div.base-info-item {
 
 
 
-  ::v-deep p {
+  :deep(p) {
     color: #999;
     font-size: 14px;
     margin-top: 10px;
diff --git a/seller/src/views/goods/goods-seller/alertQuantity.vue b/seller/src/views/goods/goods-seller/alertQuantity.vue
index 753d4331..f2c267c4 100644
--- a/seller/src/views/goods/goods-seller/alertQuantity.vue
+++ b/seller/src/views/goods/goods-seller/alertQuantity.vue
@@ -1,185 +1,187 @@
 <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="goodsName">
-            <Input
-              type="text"
-              v-model="searchForm.goodsName"
-              placeholder="请输入商品名称"
-              clearable
-              style="width: 200px"
-            />
-          </Form-item>
-          <Form-item label="商品编号" prop="goodsId">
-            <Input
-              type="text"
-              v-model="searchForm.goodsId"
-              placeholder="请输入商品编号"
-              clearable
-              style="width: 200px"
-            />
-          </Form-item>
-          <Form-item label="状态" prop="status">
-            <Select
-              v-model="searchForm.marketEnable"
-              placeholder="请选择"
-              clearable
-              style="width: 200px"
-            >
-              <Option value="DOWN">下架</Option>
-              <Option value="UPPER">上架</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="商品分类" prop="category">
-            <Cascader
+    <el-card>
+      <div @keyup.enter="handleSearch">
+        <el-form ref="searchForm" :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: 200px" />
+          </el-form-item>
+          <el-form-item label="商品编号" prop="goodsId">
+            <el-input v-model="searchForm.goodsId" placeholder="请输入商品编号" clearable style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="searchForm.marketEnable" placeholder="请选择" clearable style="width: 200px">
+              <el-option label="下架" value="DOWN" />
+              <el-option label="上架" value="UPPER" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="商品分类" prop="category">
+            <el-cascader
               v-model="category"
+              :options="categoryList"
               placeholder="请选择商品分类"
-              style="width: 200px"
-              :data="categoryList"
-            ></Cascader>
-          </Form-item>
-          <Form-item label="货号" prop="id">
-            <Input
-              type="text"
-              v-model="searchForm.skuSn"
-              placeholder="请输入货号"
               clearable
               style="width: 200px"
             />
-          </Form-item>
-          <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
-          <Button @click="handleReset" class="search-btn">重置</Button>
-        </Form>
-      </Row>
-      <Tabs @on-click="switchTabs" value="updateStock" v-model="stockType">
-        <TabPane label="商品库存管理" name="stockManage">
-          <Row class="operation padding-row">
-            <Button @click="exportStock" type="primary" class="export">批量导出</Button>
-            <Button @click="openImportStock" class="export">批量导入</Button>
-          </Row>
-          <Table
-            class="mt_10"
-            border
-            :loading="loading"
-            :columns="stockManageColumns"
-            :data="stockAllData"
-            ref="table"
-          >
-            <template slot="goodsSlot" slot-scope="{ row }">
-              <div style="margin-top: 5px; height: 90px; display: flex">
-                <div style="">
-                  <img :src="row.thumbnail" style="height: 80px; margin-top: 3px; width: 70px"/>
-                </div>
-                <div style="margin-left: 13px;margin-top: 5px;">
-                  <div class="div-zoom" style="color: black;">
-                    {{ row.goodsName }}
-                  </div>
-                  <div class="div-zoom" style="margin-top: 5px;">
-                    ID: {{ row.goodsId }}
-                  </div>
-                </div>
-              </div>
-            </template>
-            <template slot="skuSlot" slot-scope="{ row }">
-              <div style="margin-top: 5px; height: 90px; display: flex">
-                <div style="margin-left: 13px;margin-top: 5px;">
-                  <div class="div-zoom" style="color: black;">
-                    {{ row.simpleSpecs }}
-                  </div>
-                  <div class="div-zoom" style="margin-top: 5px;">
-                    ID: {{ row.id }}
-                  </div>
-                </div>
-              </div>
-            </template>
-          </Table>
-        </TabPane>
-        <TabPane label="预警商品" name="warnList">
-          <Table
-            class="mt_10"
-            border
-            :loading="loading"
-            :columns="columns"
-            :data="warnData"
-            ref="table"
-          >
-          </Table>
-        </TabPane>
-        <TabPane label="设置预警" name="warnSetting">
-          <Table
-            class="mt_10"
-            border
-            :loading="loading"
-            :columns="settingColumns"
-            :data="skuAllData"
-            ref="table"
-          >
-            <template slot="alertQuantitySlot" slot-scope="{ row }">
-              <Input type="number" v-model="row.alertQuantity" clearable placeholder="请输入预警库存"
-                     @on-blur="updateWarnStock(row)" @on-change="checkVal(row)"/>
-            </template>
-          </Table>
-        </TabPane>
-      </Tabs>
-      <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]"
-          size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
-
-    <Modal
-      title="更新库存"
-      v-model="updateStockModalVisible"
-      :mask-closable="false"
-      :width="610"
-    >
-      <Table
-        class="mt_10"
-        :columns="updateStockColumns"
-        :data="stockList"
-        border
-      ></Table>
-      <div slot="footer">
-        <Button type="text" @click="updateStockModalVisible = false">取消</Button>
-        <Button type="primary" @click="updateStock">更新</Button>
+          </el-form-item>
+          <el-form-item label="货号" prop="id">
+            <el-input v-model="searchForm.skuSn" placeholder="请输入货号" clearable style="width: 200px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+            <el-button class="search-btn" @click="handleReset">重置</el-button>
+          </el-form-item>
+        </el-form>
       </div>
-    </Modal>
 
-    <Modal title="导入商品信息" v-model="importModal" :mask-closable="false">
-      <div style="text-align: center">
-        <Upload :before-upload="handleUpload" name="files"
-                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
-                multiple type="drag" :action="action" :headers="accessToken">
+      <el-tabs v-model="stockType" @tab-click="switchTabs">
+        <el-tab-pane label="商品库存管理" name="stockManage">
+          <div class="operation padding-row">
+            <el-button type="primary" class="export" @click="exportStock">批量导出</el-button>
+            <el-button class="export" @click="openImportStock">批量导入</el-button>
+          </div>
+          <el-table ref="table" v-loading="loading" border :data="stockAllData" class="mt_10" style="width: 100%">
+            <el-table-column label="商品信息" min-width="400">
+              <template #default="{ row }">
+                <div style="margin-top: 5px; height: 90px; display: flex">
+                  <img :src="row.thumbnail" style="height: 80px; margin-top: 3px; width: 70px" alt="" />
+                  <div style="margin-left: 13px; margin-top: 5px">
+                    <div class="div-zoom" style="color: black">{{ row.goodsName }}</div>
+                    <div class="div-zoom" style="margin-top: 5px">ID: {{ row.goodsId }}</div>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="SKU信息" min-width="400">
+              <template #default="{ row }">
+                <div style="margin-top: 5px">
+                  <div class="div-zoom" style="color: black">{{ row.simpleSpecs }}</div>
+                  <div class="div-zoom" style="margin-top: 5px">ID: {{ row.id }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="上架状态" width="130">
+              <template #default="{ row }">
+                <el-tag :type="row.marketEnable === 'DOWN' ? 'danger' : 'success'">
+                  {{ row.marketEnable === "DOWN" ? "下架" : "上架" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="审核状态" width="120">
+              <template #default="{ row }">
+                <el-tag
+                  :type="
+                    row.authFlag === 'PASS' ? 'success' : row.authFlag === 'TOBEAUDITED' ? 'warning' : 'danger'
+                  "
+                >
+                  {{
+                    row.authFlag === "PASS" ? "通过" : row.authFlag === "TOBEAUDITED" ? "待审核" : "审核拒绝"
+                  }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="库存" min-width="120">
+              <template #default="{ row }">{{ row.quantity || 0 }}</template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+
+        <el-tab-pane label="预警商品" name="warnList">
+          <el-table v-loading="loading" border :data="warnData" class="mt_10" style="width: 100%">
+            <el-table-column prop="goodsName" label="商品名称" min-width="400" show-overflow-tooltip />
+            <el-table-column label="库存" min-width="120">
+              <template #default="{ row }">{{ row.quantity || 0 }}</template>
+            </el-table-column>
+            <el-table-column label="预警值" min-width="120">
+              <template #default="{ row }">{{ row.alertQuantity || 0 }}</template>
+            </el-table-column>
+            <el-table-column label="操作" width="120" align="center" fixed="right">
+              <template #default="{ row }">
+                <a class="link-text" @click="openUpdataStockModal(row)">库存</a>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+
+        <el-tab-pane label="设置预警" name="warnSetting">
+          <el-table v-loading="loading" border :data="skuAllData" class="mt_10" style="width: 100%">
+            <el-table-column prop="goodsName" label="商品名称" />
+            <el-table-column label="库存" width="200">
+              <template #default="{ row }">{{ row.quantity || 0 }}</template>
+            </el-table-column>
+            <el-table-column label="预警值" width="200">
+              <template #default="{ row }">
+                <el-input
+                  v-model="row.alertQuantity"
+                  type="number"
+                  clearable
+                  placeholder="请输入预警库存"
+                  @blur="updateWarnStock(row)"
+                  @change="checkVal(row)"
+                />
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+
+      <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]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog v-model="updateStockModalVisible" title="更新库存" width="610px" :close-on-click-modal="false">
+      <el-table :data="stockList" border class="mt_10" style="width: 100%">
+        <el-table-column label="sku规格" min-width="120">
+          <template #default="{ row }">{{ row.simpleSpecs }}</template>
+        </el-table-column>
+        <el-table-column label="审核状态" width="130">
+          <template #default="{ row }">
+            <el-tag
+              :type="
+                row.authFlag === 'PASS' ? 'success' : row.authFlag === 'TOBEAUDITED' ? 'primary' : 'danger'
+              "
+            >
+              {{
+                row.authFlag === "TOBEAUDITED" ? "待审核" : row.authFlag === "PASS" ? "通过" : "审核拒绝"
+              }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" align="center">
+          <template #default="{ row }">
+            <el-input-number v-model="row.quantity" :min="0" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <template #footer>
+        <el-button @click="updateStockModalVisible = false">取消</el-button>
+        <el-button type="primary" @click="updateStock">更新</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="importModal" title="导入商品信息" :close-on-click-modal="false">
+      <div v-loading="spinShow" style="text-align: center">
+        <el-upload drag :before-upload="handleUpload" :show-file-list="false" accept=".xlsx,.xls">
           <div style="padding: 50px 0">
-            <Icon type="ios-cloud-upload" size="102" style="color: #3399ff"></Icon>
+            <div style="font-size: 48px; color: #3399ff">↑</div>
             <h2>选择或拖拽文件上传</h2>
           </div>
-          <Spin fix v-if="spinShow"></Spin>
-        </Upload>
+        </el-upload>
       </div>
-      <div slot="footer">
-        <Button type="text" @click="importModal = false">确定</Button>
-      </div>
-    </Modal>
+      <template #footer>
+        <el-button type="primary" @click="importModal = false">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -191,7 +193,7 @@ import {
   importStockExcel,
   queryExportStock,
   updateGoodsAlertStocks,
-  updateGoodsSkuStocks
+  updateGoodsSkuStocks,
 } from "@/api/goods";
 
 export default {
@@ -199,227 +201,44 @@ export default {
   data() {
     return {
       importModal: false,
-      id: "", //要操作的id
-      loading: true, // 表单加载状态
-      updateStockModalVisible: false, // 更新库存模态框显隐
-      stockAllUpdate: undefined, // 更新库存数量
-      stockType: 'stockManage',
+      spinShow: false,
+      loading: true,
+      updateStockModalVisible: false,
+      stockType: "stockManage",
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "create_time", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "create_time",
+        order: "desc",
       },
-      checkFlag: false, //检测成功标志
-      // 表单验证规则
-      formValidate: {},
-      //修改库存的数据
+      checkFlag: false,
       stockList: [],
-      stockManageColumns: [
-        {
-          title: "商品信息",
-          key: "goodsName",
-          midwidth: 400,
-          slot: "goodsSlot",
-        }, {
-          title: "SKU信息",
-          key: "simpleSpecs",
-          midwidth: 400,
-          tooltip: true,
-          slot: "skuSlot",
-        }, {
-          title: "上架状态",
-          key: "marketEnable",
-          width: 130,
-          sortable: false,
-          render: (h, params) => {
-            if (params.row.marketEnable == "DOWN") {
-              return h("Tag", {props: {color: "red"}}, "下架");
-            } else if (params.row.marketEnable == "UPPER") {
-              return h("Tag", {props: {color: "green"}}, "上架");
-            }
-          },
-        }, {
-          title: "审核状态",
-          key: "authFlag",
-          width: 120,
-          render: (h, params) => {
-            if (params.row.authFlag == "PASS") {
-              return h("Tag", {props: {color: "green"}}, "通过");
-            } else if (params.row.authFlag == "TOBEAUDITED") {
-              return h("Tag", {props: {color: "volcano"}}, "待审核");
-            } else if (params.row.authFlag == "REFUSE") {
-              return h("Tag", {props: {color: "red"}}, "审核拒绝");
-            }
-          },
-        }, {
-          title: "库存",
-          key: "quantity",
-          midwidth: 280,
-          render: (h, params) => {
-            if (params.row.quantity) {
-              return h("div", params.row.quantity);
-            } else {
-              return h("div", 0);
-            }
-          },
-        },],
-      //列表名称
-      columns: [
-        {
-          title: "商品名称",
-          key: "goodsName",
-          midwidth: 400,
-          tooltip: true,
-        },
-        {
-          title: "库存",
-          key: "quantity",
-          midwidth: 280,
-          render: (h, params) => {
-            if (params.row.quantity) {
-              return h("div", params.row.quantity);
-            } else {
-              return h("div", 0);
-            }
-          },
-        },
-        {
-          title: "预警值",
-          key: "alertQuantity",
-          midwidth: 280,
-          render: (h, params) => {
-            if (params.row.alertQuantity) {
-              return h("div", params.row.alertQuantity);
-            } else {
-              return h("div", 0);
-            }
-          },
-        },
-        {
-          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.openUpdataStockModal(params.row);
-                    },
-                  },
-                },
-                "库存"
-              ),
-            ]);
-          },
-        },
-      ],
-      settingColumns: [
-        {
-          title: "商品名称",
-          key: "goodsName",
-        },
-        {
-          title: "库存",
-          key: "quantity",
-          width: 400,
-          render: (h, params) => {
-            if (params.row.quantity) {
-              return h("div", params.row.quantity);
-            } else {
-              return h("div", 0);
-            }
-          },
-        },
-        {
-          title: "预警值",
-          key: "alertQuantity",
-          width: 400,
-          slot: 'alertQuantitySlot',
-        },
-      ],
-      updateStockColumns: [
-        {
-          title: "sku规格",
-          key: "sn",
-          minWidth: 120,
-          render: (h, params) => {
-            return h("div", {}, params.row.simpleSpecs);
-          },
-        },
-        {
-          title: "审核状态",
-          key: "authFlag",
-          width: 130,
-          render: (h, params) => {
-            if (params.row.authFlag == "TOBEAUDITED") {
-              return h("Tag", {props: {color: "blue"}}, "待审核");
-            } 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: "action",
-          align: "center",
-          width: 200,
-          render: (h, params) => {
-            let vm = this;
-            return h("InputNumber", {
-              props: {
-                value: params.row.quantity,
-              },
-              on: {
-                "on-change": (event) => {
-                  vm.stockList[params.index].quantity = event;
-                },
-              },
-            });
-          },
-        },
-      ],
-      warnData: [], // 表单数据
-      skuAllData: [], //SKU数据
-      stockAllData: [],//SKU库存数据
-      total: 0, //sku数据总数
-      categoryList: [], //分类列表
-      category: '', //选中分类
+      warnData: [],
+      skuAllData: [],
+      stockAllData: [],
+      total: 0,
+      categoryList: [],
+      category: [],
       selectedSku: {},
+      file: null,
     };
   },
   methods: {
     init() {
-      // 初始化数据
       this.getDataList();
       this.deepGroup();
     },
     openUpdataStockModal(row) {
-      this.stockList = []
+      this.stockList = [];
       this.selectedSku = JSON.parse(JSON.stringify(row));
       this.stockList.push(this.selectedSku);
       this.updateStockModalVisible = true;
     },
-    // 更新库存
     updateStock() {
-      let updateStockList = this.stockList.map((i) => {
-        let j = {skuId: i.id, quantity: i.quantity};
-        return j;
-      });
+      const updateStockList = this.stockList.map((i) => ({
+        skuId: i.id,
+        quantity: i.quantity,
+      }));
       updateGoodsSkuStocks(updateStockList).then((res) => {
         if (res.success) {
           this.updateStockModalVisible = false;
@@ -428,192 +247,144 @@ export default {
         }
       });
     },
-    //修改预警值
     updateWarnStock(row) {
       if (this.checkFlag) {
-        let submit = {skuId: row.id, alertQuantity: row.alertQuantity}
-        updateGoodsAlertStocks(submit).then(res => {
+        updateGoodsAlertStocks({ skuId: row.id, alertQuantity: row.alertQuantity }).then((res) => {
           if (res.success) {
-            this.$Message.success('更新成功')
+            this.$Message.success("更新成功");
           }
-        })
+        });
       }
     },
-    //检测输入值是否正确
     checkVal(row) {
       if (
         !/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(row.alertQuantity) ||
         parseInt(row.alertQuantity) < 0 ||
         parseInt(row.alertQuantity) > 99999999
       ) {
-        // 校验未通过 进行提示
-        this.$Message.error("请输入0~99999999之间的数字值")
-        row.alertQuantity = 0
+        this.$Message.error("请输入0~99999999之间的数字值");
+        row.alertQuantity = 0;
         this.checkFlag = false;
         return;
       }
       this.checkFlag = true;
     },
-    //切换分页
     switchTabs() {
       this.handleReset();
       this.getDataList();
     },
-    // 改变页数
     changePageSize(v) {
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    //改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
-      this.clearSelectAll();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
-      this.searchForm.categoryPath = this.category ? this.category.join(",") : null;
+      this.searchForm.categoryPath = this.category?.length ? this.category.join(",") : null;
       this.getDataList();
     },
-    // 重置搜索条件
     handleReset() {
-      this.searchForm = {};
+      this.searchForm = {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "create_time",
+        order: "desc",
+      };
       this.category = [];
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
-      // 重新加载数据
       this.getDataList();
     },
-    // 获取商品列表数据
     getDataList() {
       this.loading = true;
-      // 带多条件搜索参数获取表单数据
-      if (this.stockType == 'warnList') {
-        //调用预警库存
-        getGoodsListDataByStockSeller(this.searchForm).then(res => {
+      if (this.stockType === "warnList") {
+        getGoodsListDataByStockSeller(this.searchForm).then((res) => {
           if (res.success) {
-            this.warnData = res.result.records
-            this.total = res.result.total
-            this.loading = false;
+            this.warnData = res.result.records;
+            this.total = res.result.total;
           }
-        })
-      } else if (this.stockType == 'warnSetting') {
-        //调用获取全部sku
-        getGoodsSkuListDataSeller(this.searchForm).then(res => {
+          this.loading = false;
+        });
+      } else if (this.stockType === "warnSetting") {
+        getGoodsSkuListDataSeller(this.searchForm).then((res) => {
           if (res.success) {
-            this.skuAllData = res.result.records
-            this.total = res.result.total
-            this.loading = false;
+            this.skuAllData = res.result.records;
+            this.total = res.result.total;
           }
-        })
-      } else if (this.stockType == 'stockManage') {
-        //调用获取全部sku
-        getGoodsSkuListDataSeller(this.searchForm).then(res => {
+          this.loading = false;
+        });
+      } else {
+        getGoodsSkuListDataSeller(this.searchForm).then((res) => {
           if (res.success) {
-            this.stockAllData = res.result.records
-            this.total = res.result.total
-            this.loading = false;
+            this.stockAllData = res.result.records;
+            this.total = res.result.total;
           }
-        })
+          this.loading = false;
+        });
       }
     },
-    //组织分类树
     deepGroup() {
-      getGoodsCategoryAll().then(res => {
+      getGoodsCategoryAll().then((res) => {
         if (res.success) {
-          res.result.forEach((item) => {
-            let childWay = []; //第二级
-            // 第二层
-            if (item.children) {
-              item.children.forEach((child) => {
-                // // 第三层
-                if (child.children) {
-                  child.children.forEach((grandson, index, arr) => {
-                    arr[index] = {
-                      value: grandson.id,
-                      label: grandson.name,
-                      children: "",
-                    };
-                  });
-                }
-                let children = {
-                  value: child.id,
-                  label: child.name,
-                  children: child.children,
-                };
-                childWay.push(children);
-              });
-            }
-            // 第一层
-            let way = {
-              value: item.id,
-              label: item.name,
-              children: childWay,
-            };
-            this.categoryList.push(way);
-          });
+          this.categoryList = res.result.map((item) => ({
+            value: item.id,
+            label: item.name,
+            children: (item.children || []).map((child) => ({
+              value: child.id,
+              label: child.name,
+              children: (child.children || []).map((grandson) => ({
+                value: grandson.id,
+                label: grandson.name,
+              })),
+            })),
+          }));
         }
-      })
+      });
     },
-    // 导出订单
     async exportStock() {
-      let randomNumber = '';
+      let randomNumber = "";
       for (let i = 0; i < 10; i++) {
         randomNumber += Math.floor(Math.random() * 10);
       }
-      ;
       queryExportStock(this.searchForm)
         .then((res) => {
-          const blob = new Blob([res], {
-            type: "application/vnd.ms-excel;charset=utf-8",
-          });
-          //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
-          //IE10以上支持blob但是依然不支持download
+          const blob = new Blob([res], { type: "application/vnd.ms-excel;charset=utf-8" });
           if ("download" in document.createElement("a")) {
-            //支持a标签download的浏览器
-            const link = document.createElement("a"); //创建a标签
-            link.download = randomNumber + ".xlsx"; //a标签添加属性
+            const link = document.createElement("a");
+            link.download = randomNumber + ".xlsx";
             link.style.display = "none";
             link.href = URL.createObjectURL(blob);
             document.body.appendChild(link);
-            link.click(); //执行下载
-            URL.revokeObjectURL(link.href); //释放url
-            document.body.removeChild(link); //释放标签
+            link.click();
+            URL.revokeObjectURL(link.href);
+            document.body.removeChild(link);
           } else {
-            navigator.msSaveBlob(blob, fileName);
+            navigator.msSaveBlob(blob, randomNumber + ".xlsx");
           }
         })
-        .catch((err) => {
-          console.log(err);
-        });
+        .catch((err) => console.log(err));
     },
     openImportStock() {
       this.importModal = true;
     },
-    // 上传数据
     handleUpload(file) {
       this.file = file;
       this.upload();
       return false;
     },
-    /**
-     * 上传文件
-     */
     upload() {
-      let fd = new FormData();
+      const fd = new FormData();
       fd.append("files", this.file);
       this.spinShow = true;
-
-      importStockExcel(fd).then(res => {
+      importStockExcel(fd).then((res) => {
+        this.spinShow = false;
         if (res.success) {
-          this.spinShow = false;
           this.$Message.success("导入成功");
           this.importModal = false;
           this.getDataList();
         }
-      })
+      });
     },
   },
   mounted() {
@@ -623,4 +394,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import "@/styles/table-common.scss";
+.link-text {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
 </style>
diff --git a/seller/src/views/goods/goods-seller/draftGoods.vue b/seller/src/views/goods/goods-seller/draftGoods.vue
index d0c84591..bcb6a34a 100644
--- a/seller/src/views/goods/goods-seller/draftGoods.vue
+++ b/seller/src/views/goods/goods-seller/draftGoods.vue
@@ -1,174 +1,104 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form mb_10"
-        @keydown.enter.native="handleSearch">
-        <Form-item label="商品名称" prop="goodsName">
-          <Input type="text" v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 240px" />
-        </Form-item>
-        <Form-item label="商品编号" prop="id">
-          <Input
-            type="text"
-            v-model="searchForm.id"
-            placeholder="商品编号"
-            clearable
-            style="width: 200px"
-          />
-        </Form-item>
-        <Form-item style="margin-left: -35px" class="br">
-          <Button @click="handleSearch" type="primary" icon="ios-search"
-            >搜索</Button
-          >
-          <Button @click="handleReset">重置</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="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
-          @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" 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 mb_10"
+        @keyup.enter="handleSearch"
+      >
+        <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="id">
+          <el-input v-model="searchForm.id" placeholder="商品编号" clearable style="width: 200px" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="handleReset">重置</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="id" label="编号" min-width="120" />
+        <el-table-column label="商品原图" width="120" align="center">
+          <template #default="{ row }">
+            <img
+              :src="row.original"
+              alt="加载图片失败"
+              style="cursor: pointer; width: 80px; height: 60px; margin: 10px 0; object-fit: contain"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="goodsName" label="商品名称" min-width="120" show-overflow-tooltip />
+        <el-table-column label="商品价格" width="120">
+          <template #default="{ row }">
+            <priceColorScheme :value="row.price || 0" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" min-width="120" />
+        <el-table-column label="操作" align="center" width="150">
+          <template #default="{ row }">
+            <a class="link-text" @click="editGoods(row)">编辑</a>
+            <span class="op-split">|</span>
+            <a class="link-text" @click="removeDraft(row.id)">删除</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="[10, 20, 50]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
 import { getDraftGoodsListData, deleteDraftGoods } from "@/api/goods";
+
 export default {
   name: "goods",
-  components: {},
   data() {
     return {
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "create_time", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "create_time",
+        order: "desc",
         saveType: "TEMPLATE",
       },
-      columns: [
-        // 表头
-        {
-          title: "编号",
-          key: "id",
-          minWidth: 120,
-        },
-        {
-          title: "商品原图",
-          key: "original",
-          width: 120,
-          align: "center",
-          render: (h, params) => {
-            return h("img", {
-              attrs: {
-                src: params.row.original,
-                alt: "加载图片失败",
-              },
-              style: {
-                cursor: "pointer",
-                width: "80px",
-                height: "60px",
-                margin: "10px 0",
-                "object-fit": "contain",
-              },
-            });
-          },
-        },
-        {
-          title: "商品名称",
-          key: "goodsName",
-          minWidth: 120,
-        },
-        {
-          title: "商品价格",
-          key: "price",
-          width: 120,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price || 0,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          minWidth: 120,
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 150,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px",
-                  },
-                  on: {
-                    click: () => {
-                      this.editGoods(params.row);
-                    },
-                  },
-                },
-                "编辑"
-              ),
-              h(
-                "span",
-                {
-                  style: { margin: "0 8px", color: "#dcdee2" },
-                },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.removeDraft(params.row.id);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      data: [],
+      total: 0,
     };
   },
   methods: {
     init() {
-      // 初始化数据
       this.getDataList();
     },
-    // 编辑模板
     editGoods(v) {
       this.$router.push({
         name: "goods-template-operation-edit",
         query: { draftId: v.id },
       });
     },
-    // 删除模板
     removeDraft(id) {
-      let showType = "模版";
       this.$Modal.confirm({
         title: "确认审核",
-        content: "您确认要删除id为 " + id + " 的" + showType + "吗?",
+        content: "您确认要删除id为 " + id + " 的模版吗?",
         loading: true,
         onOk: () => {
           deleteDraftGoods(id).then((res) => {
@@ -181,34 +111,25 @@ export default {
         },
       });
     },
-    // 改变页数
-    changePage(v) {
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getDataList();
     },
-    // 改变页码
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
+    changePageSize() {
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 10;
       this.getDataList();
     },
-    // 重置
     handleReset() {
       this.$refs.searchForm.resetFields();
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 10;
-      // 重新加载数据
       this.getDataList();
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
-      // 带多条件搜索参数获取表单数据
       getDraftGoodsListData(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
@@ -222,11 +143,21 @@ export default {
     this.init();
   },
   watch: {
-    $route(to, from) {
+    $route() {
       this.init();
     },
   },
 };
 </script>
+
 <style lang="scss" scoped>
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
 </style>
diff --git a/seller/src/views/goods/goods-seller/goods.vue b/seller/src/views/goods/goods-seller/goods.vue
index de20ea93..a637870f 100644
--- a/seller/src/views/goods/goods-seller/goods.vue
+++ b/seller/src/views/goods/goods-seller/goods.vue
@@ -1,781 +1,403 @@
 <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="goodsName">
-            <Input
-              type="text"
-              v-model="searchForm.goodsName"
-              placeholder="请输入商品名称"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="状态" prop="status">
-            <Select
-              v-model="searchForm.marketEnable"
-              placeholder="请选择"
-              clearable
-              style="width: 240px"
-            >
-              <Option value="DOWN">下架</Option>
-              <Option value="UPPER">上架</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="销售模式" prop="status">
-            <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
-              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="sn">
-            <Input
-              type="text"
-              v-model="searchForm.id"
-              placeholder="商品编号"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
-          <Button @click="handleReset" class="search-btn">重置</Button>
-        </Form>
-      </Row>
-    </Card>
-    <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>
-      </div>
-
-      <Row class="operation padding-row">
-        <Button @click="addGoods" type="info">添加商品</Button>
-        <Button @click="openImportGoods" >导入商品</Button>
-        <Dropdown @on-click="handleDropdown">
-          <Button>
-            批量修改
-            <Icon type="ios-arrow-down"></Icon>
-          </Button>
-          <DropdownMenu slot="list">
-            <DropdownItem name="uppers">批量上架</DropdownItem>
-            <DropdownItem name="lowers">批量下架</DropdownItem>
-            <DropdownItem name="scheduleMarket">批量定时上下架</DropdownItem>
-            <DropdownItem name="batchShipTemplate">批量设置物流模板</DropdownItem>
-            <DropdownItem name="deleteAll">批量删除</DropdownItem>
-          </DropdownMenu>
-        </Dropdown>
-      </Row>
-
-      <Table
-        class="mt_10"
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-        @on-selection-change="changeSelect"
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <!-- 商品栏目格式化 -->
-        <template slot="goodsSlot" slot-scope="{ row }">
-          <div style=" height: 60px; display: flex">
-            <div style="">
-              <img
-                :src="row.original"
-                style="height: 50px; margin-top: 3px; width: 50px"
-              />
-            </div>
-
-            <div style="margin-left: 13px">
-              <div class="div-zoom">
-                <a @click="linkTo(row.id, row.skuId)">{{ row.goodsName }}</a>
-              </div>
-              
-            </div>
-          </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>
-
-    <Modal
-      title="更新库存"
-      v-model="updateStockModalVisible"
-      :mask-closable="false"
-      :width="610"
-    >
-      <Tabs value="updateStock" v-model="updateStockType">
-        <TabPane label="手动规格更新" name="updateStock">
-          <Table
-            class="mt_10"
-            :columns="updateStockColumns"
-            :data="stockList"
-            border
-          ></Table>
-        </TabPane>
-        
-      </Tabs>
-
-      <div slot="footer">
-        <Button type="text" @click="updateStockModalVisible = false">取消</Button>
-        <Button type="primary" @click="updateStock">更新</Button>
-      </div>
-    </Modal>
-
-    <!-- 批量设置物流模板 -->
-    <Modal
-      title="批量设置物流模板"
-      v-model="shipTemplateModal"
-      :mask-closable="false"
-      :width="500"
-    >
-      <Form ref="shipTemplateForm" :model="shipTemplateForm" :label-width="120">
-        <FormItem class="form-item-view-el" label="物流模板" prop="templateId">
-          <Select v-model="shipTemplateForm.templateId" style="width: 200px">
-            <Option v-for="item in logisticsTemplate" :value="item.id" :key="item.id"
-              >{{ item.name }}
-            </Option>
-          </Select>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="shipTemplateModal = false">取消</Button>
-        <Button type="primary" @click="saveShipTemplate">更新</Button>
-      </div>
-    </Modal>
-
-    <Modal
-      title="批量定时上下架"
-      v-model="scheduleMarketModal"
-      :mask-closable="false"
-      :width="520"
-    >
-      <Form
-        ref="scheduleMarketFormRef"
-        :model="scheduleMarketForm"
-        :label-width="120"
-      >
-        <FormItem label="状态" prop="status">
-          <Select v-model="scheduleMarketForm.status" style="width: 200px">
-            <Option value="UPPER">上架</Option>
-            <Option value="DOWN">下架</Option>
-          </Select>
-        </FormItem>
-        <FormItem label="触发时间" prop="triggerTime">
-          <DatePicker
-            v-model="scheduleMarketForm.triggerTime"
-            type="datetime"
-            format="yyyy-MM-dd HH:mm:ss"
-            :options="scheduleMarketDatePickerOptions"
-            :time-picker-options="scheduleMarketTimePickerOptions"
-            @on-change="handleScheduleMarketTimeChange"
+        <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="id">
+          <el-input
+            v-model="searchForm.id"
+            placeholder="请输入商品编号"
+            clearable
+            style="width: 240px"
+          />
+        </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="salesModel">
+          <el-select
+            v-model="searchForm.salesModel"
             placeholder="请选择"
             clearable
             style="width: 240px"
-          ></DatePicker>
-        </FormItem>
-        <FormItem label="原因" prop="reason">
-          <Input
-            v-model="scheduleMarketForm.reason"
-            type="textarea"
-            :rows="3"
-            placeholder="可选"
+          >
+            <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"
+          >
+            <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"
+          >
+            <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>
+
+    <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"
           />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="scheduleMarketModal = false">取消</Button>
-        <Button
+        </el-tabs>
+      </div>
+
+      <div class="batch-operations" style="margin: 10px 0">
+        <el-button
           type="primary"
-          :loading="scheduleMarketLoading"
-          @click="submitScheduleMarket"
-        >确定</Button>
+          :disabled="selectedRows.length === 0"
+          style="margin-right: 10px"
+          @click="openSetGoodsGroup"
+        >
+          批量设置分组
+        </el-button>
+        <el-button
+          type="success"
+          :disabled="selectedRows.length === 0"
+          style="margin-right: 10px"
+          @click="batchUpper"
+        >
+          批量上架
+        </el-button>
+        <el-button
+          type="warning"
+          :disabled="selectedRows.length === 0"
+          style="margin-right: 10px"
+          @click="batchLower"
+        >
+          批量下架
+        </el-button>
+        <el-button
+          v-if="currentStatus === 'TOBEAUDITED'"
+          type="primary"
+          :disabled="selectedRows.length === 0"
+          @click="batchAudit"
+        >
+          批量审核
+        </el-button>
       </div>
-    </Modal>
-    <Modal title="导入商品信息" v-model="importModal" :mask-closable="false">
-      <div style="text-align: center">
-        <Upload :before-upload="handleUpload" name="files" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
-                multiple type="drag" :action="action" :headers="accessToken">
-          <div style="padding: 50px 0">
-            <Icon type="ios-cloud-upload" size="102" style="color: #3399ff"></Icon>
-            <h2>选择或拖拽文件上传</h2>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        :data="data"
+        class="mt_10"
+        row-key="id"
+        @selection-change="onSelectionChange"
+      >
+        <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"
+            />
+          </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>
+
+      <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="下架操作" 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"
+      title="批量商品审核"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <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>
-          <Spin fix v-if="spinShow"></Spin>
-        </Upload>
-        <Button @click="exportGoods" type="text" style="color: red">下载导入模板</Button>
-      </div>
-      <div slot="footer">
-        <Button type="text" @click="importModal = false">确定</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>
 
 <script>
-import {
-  getGoodsListDataSeller,
-  getGoodsSkuListDataSeller,
-  updateGoodsSkuStocks,
-  upGoods,
-  lowGoods,
-  deleteGoods,
-  batchShipTemplate,
-  downLoadGoods,
-  getGoodsNumerData,
-  scheduleGoodsMarket
-} from "@/api/goods";
-import { baseUrl } from "@/libs/axios.js";
 import * as API_Shop from "@/api/shops";
 
-import {uploadGoodsExcel} from "../../../api/goods";
-
+import {
+  getGoodsListData,
+  getGoodsNumerData,
+  upGoods,
+  lowGoods,
+  authGoods,
+  getGoodsGroupByPage,
+  addGoodsGroupItems
+} from "@/api/goods";
 export default {
   name: "goods",
   data() {
     return {
-      spinShow:false,
-      accessToken: {}, // 验证token
-      importModal: false,
-      action: baseUrl + "/goods/import/import", // 上传接口
       id: "", //要操作的id
       loading: true, // 表单加载状态
-      shipTemplateForm: {}, // 物流模板
-      shipTemplateModal: false, // 物流模板是否显示
-      logisticsTemplate: [], // 物流列表
-      updateStockModalVisible: false, // 更新库存模态框显隐
-      stockAllUpdate: undefined, // 更新库存数量
-      scheduleMarketModal: false,
-      scheduleMarketLoading: false,
-      scheduleMarketForm: {
-        status: "UPPER",
-        triggerTime: null,
-        reason: ""
-      },
-      selectList: [], // 选中的商品列表
-      selectCount: 0, // 选中的商品数量
+      modalVisible: false, // 添加或编辑显示
       searchForm: {
         // 搜索框初始化对象
         pageNumber: 1, // 当前页数
         pageSize: 20, // 页面大小
         sort: "create_time", // 默认排序字段
         order: "desc", // 默认排序方式
+        groupId: "",
       },
-      stockList: [], // 库存列表
-      form: {
-        // 添加或编辑表单对象初始化数据
-        goodsName: "",
-        sn: "",
-        marketEnable: "",
-        price: "",
-        sellerName: "",
+      underForm: {
+        // 下架原因
+        reason: "",
       },
-      columns: [
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-         {
-          title: "商品ID",
-          key: "id",
-          width: 180,
-          tooltip: true,
-        },
-        {
-          title: "商品",
-          key: "goodsName",
-          minWidth: 200,
-          slot: "goodsSlot",
-        },
-        {
-          title: "销售模式",
-          key: "salesModel",
-          width: 150,
-          render: (h, params) => {
-            if (params.row.salesModel === "RETAIL") {
-              return h("div", [h("Tag", { props: { color: "blue" } }, "零售")]);
-            } else if (params.row.salesModel === "WHOLESALE") {
-              return h("div", [h("Tag", { props: { color: "green" } }, "批发")]);
-            }
-          },
-        },
-        {
-          title: "商品类型",
-          key: "goodsType",
-          width: 150,
-          render: (h, params) => {
-            if (params.row.goodsType === "PHYSICAL_GOODS") {
-              return h("div", [h("Tag", { props: { color: "blue" } }, "实物")]);
-            } else if (params.row.goodsType === "VIRTUAL_GOODS") {
-              return h("div", [h("Tag", { props: { color: "green" } }, "虚拟")]);
-            }
-          },
-        },
-        {
-          title: "价格",
-          key: "price",
-          width: 150,
-          render: (h, params) => {
-            return h("div", "￥" + params.row.price);
-          },
-        },
-        {
-          title: "销量",
-          key: "buyCount",
-          width: 150,
-          render: (h, params) => {
-            return h("span", params.row.buyCount || 0);
-          },
-        },
-        {
-          title: "库存",
-          key: "quantity",
-          width: 150,
-          render: (h, params) => {
-            return h("span", params.row.quantity || 0);
-          },
-        },
-        {
-          title: "审核状态",
-          key: "authFlag",
-          width: 150,
-          render: (h, params) => {
-            if (params.row.authFlag === "TOBEAUDITED") {
-              return h("Tag", { props: { color: "gold" } }, "待审核");
-            } 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: "marketEnable",
-          width: 150,
-          render: (h, params) => {
-            if (params.row.marketEnable === "UPPER") {
-              return h("Tag", { props: { color: "green" } }, "上架");
-            } else if (params.row.marketEnable === "DOWN") {
-              return h("Tag", { props: { color: "red" } }, "下架");
-            }
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 200,
-          render: (h, params) => {
-            if (params.row.marketEnable == "DOWN") {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none"
-                    },
-                    on: {
-                      click: () => {
-                        this.editGoods(params.row);
-                      },
-                    },
-                  },
-                  "编辑"
-                ),
-                h("span", {
-                  style: {
-                    margin: "0 8px",
-                    color: "#dcdee2"
-                  }
-                }, "|"),
-                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.copyGoods(params.row);
-                      },
-                    },
-                  },
-                  "复制"
-                ),
-              ]);
-            } else {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none"
-                    },
-                    on: {
-                      click: () => {
-                        this.editGoods(params.row);
-                      },
-                    },
-                  },
-                  "编辑"
-                ),
-                h("span", {
-                  style: {
-                    margin: "0 8px",
-                    color: "#dcdee2"
-                  }
-                }, "|"),
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none"
-                    },
-                    on: {
-                      click: () => {
-                        this.getStockDetail(params.row.id);
-                      },
-                    },
-                  },
-                  "库存"
-                ),
-                h("span", {
-                  style: {
-                    margin: "0 8px",
-                    color: "#dcdee2"
-                  }
-                }, "|"),
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none"
-                    },
-                    on: {
-                      click: () => {
-                        this.lower(params.row);
-                      },
-                    },
-                  },
-                  "下架"
-                ),
-                h("span", {
-                  style: {
-                    margin: "0 8px",
-                    color: "#dcdee2"
-                  }
-                }, "|"),
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none"
-                    },
-                    on: {
-                      click: () => {
-                        this.copyGoods(params.row);
-                      },
-                    },
-                  },
-                  "复制"
-                ),
-              ]);
-            }
-          },
-        },
-      ],
-      updateStockColumns: [
-        {
-          title: "sku规格",
-          key: "sn",
-          minWidth: 120,
-          render: (h, params) => {
-            return h("div", {}, params.row.simpleSpecs);
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 200,
-          render: (h, params) => {
-            let vm = this;
-            return h("InputNumber", {
-              props: {
-                value: params.row.quantity,
-              },
-              on: {
-                "on-change": (event) => {
-                  vm.stockList[params.index].quantity = event;
-                },
-              },
-            });
-          },
-        },
-      ],
+      goodsAuditForm: {
+        // 商品审核表单
+        auth_flag: 1,
+      },
+      auditModalVisible: false, // 审核弹框显示状态
+      currentAuditGoods: null, // 当前审核的商品
+      submitLoading: false, // 添加或编辑提交状态
       data: [], // 表单数据
       total: 0, // 表单数据总数
-      updateStockType: 'updateStock',  // 更新库存状态
+      currentStatus: "ALL",
       goodsNumerData: {},
-      currentStatus: '',
+      selectedRows: [], // 选中的行数据
+      selectAll: false, // 全选状态
+      batchAuditModalVisible: false, // 批量审核弹框显示状态
+      batchAuditForm: {
+        auth_flag: 1,
+        reason: ''
+      },
+      goodsGroupFlag: false,
+      goodsGroupLoading: false,
+      goodsGroupList: [],
+      goodsGroupForm: {
+        groupId: ""
+      },
+      goodsGroupRule: {
+        groupId: [{ required: true, message: "请选择商品分组", trigger: "change" }]
+      }
     };
   },
   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'},
         {title: `审核未通过${this.goodsNumerData.refuseGoodsNum ? '(' + this.goodsNumerData.refuseGoodsNum + ')' : ''}`, value: 'REFUSE'}
       ];
-    },
-    scheduleMarketDatePickerOptions() {
-      const todayStart = new Date();
-      todayStart.setHours(0, 0, 0, 0);
-      const todayStartMs = todayStart.getTime();
-      return {
-        disabledDate(date) {
-          if (!date) return false;
-          return date.getTime() < todayStartMs;
-        }
-      };
-    },
-    scheduleMarketTimePickerOptions() {
-      const now = new Date();
-      const selected = this.scheduleMarketForm && this.scheduleMarketForm.triggerTime
-        ? (this.scheduleMarketForm.triggerTime instanceof Date
-          ? this.scheduleMarketForm.triggerTime
-          : new Date(this.scheduleMarketForm.triggerTime))
-        : null;
-
-      const isToday = selected
-        ? selected.getFullYear() === now.getFullYear() &&
-          selected.getMonth() === now.getMonth() &&
-          selected.getDate() === now.getDate()
-        : true;
-
-      if (!isToday) {
-        return {};
-      }
-
-      const nowH = now.getHours();
-      const nowM = now.getMinutes();
-      const nowS = now.getSeconds();
-
-      return {
-        disabledHours: () => Array.from({ length: nowH }, (_, i) => i),
-        disabledMinutes: (hour) => (hour === nowH ? Array.from({ length: nowM }, (_, i) => i) : []),
-        disabledSeconds: (hour, minute) =>
-          hour === nowH && minute === nowM ? Array.from({ length: nowS + 1 }, (_, i) => i) : []
-      };
     }
   },
   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();
       this.getNumberData();
+      this.loadGoodsGroupList();
     },
-    // 添加商品
-    addGoods() {
-      this.$router.push({ name: "goods-operation" });
-    },
-    // 编辑商品
-    editGoods(v) {
-      this.$router.push({ name: "goods-operation-edit", query: { id: v.id } });
-    },
-    // 复制商品
-    copyGoods(v) {
-      this.$router.push({ name: "goods-operation", query: { copyId: v.id } });
-    },
-
-    //批量操作
-    handleDropdown(v) {
-      //批量上架
-      if (v == "uppers") {
-        this.uppers();
-      }
-      //批量下架
-      if (v == "lowers") {
-        this.lowers();
-      }
-      //批量定时上下架
-      if (v == "scheduleMarket") {
-        this.openScheduleMarketModal();
-      }
-      //批量删除商品
-      if (v == "deleteAll") {
-        this.deleteAll();
-      }
-      //批量设置物流模板
-      if (v == "batchShipTemplate") {
-        this.batchShipTemplate();
-      }
-    },
-    // 获取库存详情
-    getStockDetail(id) {
-      getGoodsSkuListDataSeller({ goodsId: id, pageSize: 1000 }).then((res) => {
-        if (res.success) {
-          this.updateStockModalVisible = true;
-          this.updateStockType = 'updateStock';
-          this.stockAllUpdate = undefined;
-          this.stockList = res.result.records;
-        }
-      });
-    },
-    // 上传数据
-    handleUpload(file) {
-      this.file = file;
-      this.upload();
-      return false;
-    },
-    /**
-     * 上传文件
-     */
-    async upload() {
-      let fd = new FormData();
-      fd.append("files", this.file);
-      this.spinShow = true
-      let res = await uploadGoodsExcel(fd);
-      this.spinShow = false
-      if (res.success) {
-        this.$Message.success("导入成功")
-        this.init();
-      }
-    },
-    openImportGoods(){
-      this.importModal = true
-    },
-    async exportGoods(){
-      downLoadGoods()
-        .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 = "商品批量导入模板.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);
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-    // 更新库存
-    updateStock () {
-      if (this.updateStockType === 'updateStock' || this.updateStockType === 'stockAll') {
-        // updateStock 手动规格更新，stockAll 批量规格更新
-        let updateStockList = this.stockList.map((i) => {
-          let j = { skuId: i.id, quantity: i.quantity };
-          if (this.stockAllUpdate) {
-            j.quantity = this.stockAllUpdate;
-          }
-          return j;
-        });
-        updateGoodsSkuStocks(updateStockList).then((res) => {
-          if (res.success) {
-            this.updateStockModalVisible = false;
-            this.$Message.success("更新库存成功");
-            this.getDataList();
-          }
-        });
-      }
-
-    },
-    // 改变页码
+    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
-      this.clearSelectAll();
     },
-    // 改变页数
+    // 分页 改变页数
     changePageSize(v) {
       this.searchForm.pageSize = v;
       this.getDataList();
@@ -787,145 +409,10 @@ export default {
       this.getDataList();
       this.getNumberData();
     },
-    // 重置搜索条件
-    handleReset() {
-      this.searchForm = {};
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      // 重新加载数据
-      this.getDataList();
-      this.getNumberData();
-    },
-    // 清除多选
-    clearSelectAll() {
-      this.$refs.table.selectAll(false);
-    },
-    // 添加选中项
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-    },
-    //保存物流模板信息
-    saveShipTemplate() {
-      this.$Modal.confirm({
-        title: "确认设置物流模板",
-        content: "您确认要设置所选的 " + this.selectCount + " 个商品的物流模板?",
-        loading: true,
-        onOk: () => {
-          let ids = [];
-          this.selectList.forEach(function (e) {
-            ids.push(e.id);
-          });
-          // 批量设置物流模板
-          batchShipTemplate(this.shipTemplateForm).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("物流模板设置成功");
-              this.clearSelectAll();
-              this.getDataList();
-            }
-            this.shipTemplateModal = false;
-          });
-        },
-      });
-    },
-    //批量设置物流模板
-    batchShipTemplate() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要设置物流模板的商品");
-        return;
-      }
-      this.getShipTempList();
-      let data = [];
-      this.selectList.forEach(function (e) {
-        data.push(e.id);
-      });
-      this.shipTemplateForm.goodsId = data;
-      this.shipTemplateModal = true;
-    },
-    openScheduleMarketModal() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要定时上下架的商品");
-        return;
-      }
-      this.scheduleMarketForm = {
-        status: "UPPER",
-        triggerTime: null,
-        reason: ""
-      };
-      this.scheduleMarketModal = true;
-    },
-    handleScheduleMarketTimeChange() {
-      if (!this.scheduleMarketForm || !this.scheduleMarketForm.triggerTime) return;
-      const selected =
-        this.scheduleMarketForm.triggerTime instanceof Date
-          ? this.scheduleMarketForm.triggerTime
-          : new Date(this.scheduleMarketForm.triggerTime);
-
-      const selectedMs = selected.getTime();
-      if (!Number.isFinite(selectedMs)) return;
-      if (selectedMs <= Date.now()) {
-        this.$Message.warning("触发时间只能选择当前时间之后");
-        this.scheduleMarketForm.triggerTime = new Date(Date.now() + 60 * 1000);
-      }
-    },
-    submitScheduleMarket() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要定时上下架的商品");
-        return;
-      }
-      if (!this.scheduleMarketForm.status) {
-        this.$Message.warning("请选择状态");
-        return;
-      }
-      if (!this.scheduleMarketForm.triggerTime) {
-        this.$Message.warning("请选择触发时间");
-        return;
-      }
-
-      const triggerTime =
-        this.scheduleMarketForm.triggerTime instanceof Date
-          ? this.scheduleMarketForm.triggerTime.getTime()
-          : new Date(this.scheduleMarketForm.triggerTime).getTime();
-
-      if (!Number.isFinite(triggerTime)) {
-        this.$Message.error("触发时间格式不正确");
-        return;
-      }
-      if (triggerTime <= Date.now()) {
-        this.$Message.warning("触发时间需大于当前时间");
-        return;
-      }
-
-      const goodsIds = this.selectList.map((i) => i.id);
-
-      const payload = {
-        goodsIds,
-        status: this.scheduleMarketForm.status,
-        triggerTime,
-        reason: this.scheduleMarketForm.reason || undefined
-      };
-
-      this.scheduleMarketLoading = true;
-      scheduleGoodsMarket(payload)
-        .then((res) => {
-          if (res && res.success) {
-            this.$Message.success("设置成功");
-            this.scheduleMarketModal = false;
-            this.clearSelectAll();
-            this.getDataList();
-            this.getNumberData();
-          }
-        })
-        .finally(() => {
-          this.scheduleMarketLoading = false;
-        });
-    },
-    // 获取商品列表数据
+    // 获取数据
     getDataList() {
       this.loading = true;
-      // 带多条件搜索参数获取表单数据
-      getGoodsListDataSeller(this.searchForm).then((res) => {
+      getGoodsListData(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
           this.data = res.result.records;
@@ -933,143 +420,6 @@ export default {
         }
       });
     },
-    // 获取物流模板
-    getShipTempList() {
-      API_Shop.getShipTemplate().then((res) => {
-        if (res.success) {
-          this.logisticsTemplate = res.result;
-        }
-      });
-    },
-    //下架商品
-    lower(v) {
-      this.$Modal.confirm({
-        title: "确认下架",
-        content: "您确认要下架 " + v.goodsName + " ?",
-        loading: true,
-        onOk: () => {
-          let params = {
-            goodsId: v.id,
-          };
-          lowGoods(params).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("下架成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-    //批量下架
-    lowers() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要下架的商品");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认下架",
-        content: "您确认要下架所选的 " + this.selectCount + " 个商品?",
-        loading: true,
-        onOk: () => {
-          let ids = [];
-          this.selectList.forEach(function (e) {
-            ids.push(e.id);
-          });
-          let params = {
-            goodsId: ids.toString(),
-          };
-          // 批量下架
-          lowGoods(params).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("下架成功");
-              this.clearSelectAll();
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-    //批量删除商品
-    deleteAll() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要删除的商品");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除所选的 " + this.selectCount + " 个商品?",
-        loading: true,
-        onOk: () => {
-          let ids = [];
-          this.selectList.forEach(function (e) {
-            ids.push(e.id);
-          });
-          let params = {
-            goodsId: ids.toString(),
-          };
-          // 批量删除
-          deleteGoods(params).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.clearSelectAll();
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-    //批量上架
-    uppers(v) {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要上架的商品");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认上架",
-        content: "您确认要上架所选的 " + this.selectCount + " 个商品?",
-        loading: true,
-        onOk: () => {
-          let ids = [];
-          this.selectList.forEach(function (e) {
-            ids.push(e.id);
-          });
-          let params = {
-            goodsId: ids.toString(),
-          };
-          // 批量上架
-          upGoods(params).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("上架成功");
-              this.clearSelectAll();
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-    upper(v) {
-      this.$Modal.confirm({
-        title: "确认上架",
-        content: "您确认要上架 " + v.goodsName + " ?",
-        loading: true,
-        onOk: () => {
-          let params = {
-            goodsId: v.id,
-          };
-          upGoods(params).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("上架成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
     getNumberData() {
       // 创建一个不包含goodsStatus字段的搜索参数
       const { goodsStatus, ...searchParams } = this.searchForm;
@@ -1079,38 +429,332 @@ export default {
         }
       })
     },
-    // 商品状态筛选
-    goodsStatusClick(item) {
-      // 根据选择的状态设置搜索条件
-      if (item === 0) {
-        // 全部：清除状态筛选
-        delete this.searchForm.goodsStatus;
+    // 编辑
+    edit(v) {
+      this.id = v.id;
+      if (v.underMessage) {
+        this.underForm.reason = v.underMessage;
       } else {
-        // 其他状态正常赋值
-        this.searchForm.goodsStatus = item;
+        this.underForm.reason = "";
+      }
+      this.modalVisible = true;
+    },
+    // 下架
+    lower() {
+      let params = {
+        goodsId: this.id,
+        reason:this.underForm.reason
+      };
+      lowGoods(params).then((res) => {
+        this.$Modal.remove();
+        if (res.success) {
+          this.$Message.success("操作成功");
+          this.modalVisible = false;
+          this.getDataList();
+          this.getNumberData(); // 添加这行
+        }
+      });
+    },
+    // 上架
+    upper(v) {
+      this.$Modal.confirm({
+        title: "确认上架",
+        content: "您确认要上架 " + v.goodsName + " ?",
+        loading: true,
+        onOk: () => {
+           let params = {
+            goodsId: v.id
+          };
+          upGoods(params).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("上架成功");
+              this.getDataList();
+              this.getNumberData(); // 添加这行
+            }
+          });
+        },
+      });
+    },
+
+    //查看商品详情
+    showDetail(v) {
+      this.$filters.customRouterPush({
+        name: "goods-detail",
+        query: { id: v.id },
+      });
+    },
+
+    // 商品状态筛选
+    goodsStatusClick(name) {
+      if (name === "ALL" || name === "" || name === undefined || name === null) {
+        delete this.searchForm.goodsStatus;
+        this.currentStatus = "ALL";
+      } else {
+        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) {
+      // 审核商品
+      let examine = "通过";
+      this.goodsAuditForm.authFlag = "PASS";
+      if (authFlag != 1) {
+        examine = "拒绝";
+        this.goodsAuditForm.authFlag = "REFUSE";
+      }
+
+      this.$Modal.confirm({
+        title: "确认审核",
+        content: "您确认要审核" + examine + " " + v.goodsName + " ?",
+        loading: true,
+        onOk: () => {
+          this.goodsAuditForm.goodsIds=v.id;
+          let formData = new FormData();
+          formData.append('goodsIds', v.id);
+          formData.append('authFlag', this.goodsAuditForm.authFlag);
+
+          authGoods(formData).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("审核成功");
+              this.getDataList();
+              this.getNumberData();
+            }
+          });
+        },
+      });
+    },
+
+    // 打开审核弹框
+    openAuditModal(goods) {
+      this.currentAuditGoods = goods;
+      this.goodsAuditForm.auth_flag = 1;
+      this.goodsAuditForm.reason = '';
+      this.auditModalVisible = true;
+    },
+
+    // 确认审核（二次确认）
+    confirmAudit() {
+      const auditText = this.goodsAuditForm.auth_flag === 1 ? '通过' : '拒绝';
+      this.$Modal.confirm({
+        title: '确认审核',
+        content: `您确认要审核${auditText} "${this.currentAuditGoods.goodsName}" 吗？`,
+        loading: true,
+        onOk: () => {
+          this.submitAudit();
+        },
+      });
+    },
+
+    // 提交审核
+    submitAudit() {
+      let formData = new FormData();
+      formData.append('goodsIds', this.currentAuditGoods.id);
+      formData.append('authFlag', this.goodsAuditForm.auth_flag === 1 ? 'PASS' : 'REFUSE');
+      authGoods(formData).then((res) => {
+        this.$Modal.remove();
+        if (res.success) {
+          this.$Message.success('审核成功');
+          this.auditModalVisible = false;
+          this.getDataList();
+          this.getNumberData();
+        }
+      });
+    },
+
+    onSelectionChange(selection) {
+      this.selectedRows = selection;
+    },
+
+    // 批量上架
+    batchUpper() {
+      if (this.selectedRows.length === 0) {
+        this.$Message.warning('请先选择要上架的商品');
+        return;
+      }
+
+      const goodsNames = this.selectedRows.map(item => item.goodsName).join('、');
+      this.$Modal.confirm({
+        title: '确认批量上架',
+        content: `您确认要上架以下商品吗？\n${goodsNames}`,
+        loading: true,
+        onOk: () => {
+          // 提取所有选中商品的ID
+          const goodsIds = this.selectedRows.map(item => item.id);
+          const params = {
+            goodsId: goodsIds // 传递ID数组
+          };
+
+          upGoods(params).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success('批量上架成功');
+              this.selectedRows = [];
+              this.selectAll = false;
+              this.getDataList();
+              this.getNumberData();
+            }
+          }).catch(() => {
+            this.$Modal.remove();
+          });
+        }
+      });
+    },
+
+    // 批量下架
+    batchLower() {
+      if (this.selectedRows.length === 0) {
+        this.$Message.warning('请先选择要下架的商品');
+        return;
+      }
+
+      const goodsNames = this.selectedRows.map(item => item.goodsName).join('、');
+      this.$Modal.confirm({
+        title: '确认批量下架',
+        content: `您确认要下架以下商品吗？\n${goodsNames}`,
+        loading: true,
+        onOk: () => {
+          // 提取所有选中商品的ID
+          const goodsIds = this.selectedRows.map(item => item.id);
+          const params = {
+            goodsId: goodsIds, // 传递ID数组
+            reason: '批量下架操作' // 可以设置默认下架原因
+          };
+
+          lowGoods(params).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success('批量下架成功');
+              this.selectedRows = [];
+              this.selectAll = false;
+              this.getDataList();
+              this.getNumberData();
+            }
+          }).catch(() => {
+            this.$Modal.remove();
+          });
+        }
+      });
+    },
+
+    // 批量审核
+    batchAudit() {
+      if (this.selectedRows.length === 0) {
+        this.$Message.warning('请先选择要审核的商品');
+        return;
+      }
+
+      // 重置批量审核表单
+      this.batchAuditForm = {
+        auth_flag: 1,
+        reason: ''
+      };
+      this.batchAuditModalVisible = true;
+    },
+
+    // 提交批量审核
+    submitBatchAudit() {
+      if (this.selectedRows.length === 0) {
+        this.$Message.warning('请先选择要审核的商品');
+        return;
+      }
+
+      // 如果是拒绝审核，必须填写原因
+      if (this.batchAuditForm.auth_flag === 2 && !this.batchAuditForm.reason.trim()) {
+        this.$Message.warning('审核拒绝时必须填写拒绝原因');
+        return;
+      }
+
+      const actionText = this.batchAuditForm.auth_flag === 1 ? '通过' : '拒绝';
+      const goodsNames = this.selectedRows.map(item => item.goodsName).join('、');
+
+      this.$Modal.confirm({
+        title: `确认批量审核${actionText}`,
+        content: `您确认要${actionText}以下商品的审核吗？\n${goodsNames}`,
+        loading: true,
+        onOk: () => {
+          // 提取所有选中商品的ID
+          const goodsIds = this.selectedRows.map(item => item.id);
+
+          let formData = new FormData();
+          formData.append('goodsId', goodsIds);
+          formData.append('authFlag', this.batchAuditForm.auth_flag === 1 ? 'PASS' : 'REFUSE');
+          formData.append('reason', this.batchAuditForm.reason || '');
+
+          // 修正：直接调用authGoods，不传递'batch'参数
+          authGoods(formData).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success(`批量审核${actionText}成功`);
+              this.selectedRows = [];
+              this.selectAll = false;
+              this.batchAuditModalVisible = false;
+              this.getDataList();
+              this.getNumberData();
+            }
+          }).catch(() => {
+            this.$Modal.remove();
+          });
+        }
+      });
+    },
+    loadGoodsGroupList() {
+      getGoodsGroupByPage({ pageNumber: 1, pageSize: 1000 }).then((res) => {
+        if (res && res.success && res.result) {
+          this.goodsGroupList = res.result.records || [];
+        }
+      });
+    },
+    openSetGoodsGroup() {
+      if (this.selectedRows.length === 0) {
+        this.$Message.warning("请先选择商品");
+        return;
+      }
+      this.goodsGroupFlag = true;
+      this.goodsGroupLoading = false;
+      this.goodsGroupForm = { groupId: "" };
+      this.$nextTick(() => {
+        if (this.$refs.goodsGroupForm) this.$refs.goodsGroupForm.resetFields();
+      });
+      this.loadGoodsGroupList();
+    },
+    submitSetGoodsGroup() {
+      this.$refs.goodsGroupForm.validate((valid) => {
+        if (!valid) return;
+        const goodsIds = this.selectedRows.map((item) => item.id);
+        this.goodsGroupLoading = true;
+        addGoodsGroupItems(this.goodsGroupForm.groupId, goodsIds).then((res) => {
+          this.goodsGroupLoading = false;
+          if (res && res.success) {
+            this.$Message.success("设置成功");
+            this.goodsGroupFlag = false;
+            this.selectedRows = [];
+            this.selectAll = false;
+            this.clearTableSelection();
+            this.getDataList();
+          } else if (res && res.message) {
+            this.$Message.error(res.message);
+          }
+        }).catch(() => {
+          this.goodsGroupLoading = false;
+          this.$Message.error("设置失败，请检查权限或后端接口");
+        });
+      });
+    }
   },
   mounted() {
     this.init();
-    this.accessToken.accessToken = this.getStore("accessToken");
   },
 };
 </script>
 <style lang="scss" scoped>
-@import "@/styles/table-common.scss";
 // Tab组件样式
 .goods-tab {
-  ::v-deep .ivu-tabs-tab {
+  :deep(.el-tabs__item) {
     font-size: 14px;
   }
 }
diff --git a/seller/src/views/goods/goods-seller/goodsOperation.vue b/seller/src/views/goods/goods-seller/goodsOperation.vue
index f74aca11..df7a6bb0 100644
--- a/seller/src/views/goods/goods-seller/goodsOperation.vue
+++ b/seller/src/views/goods/goods-seller/goodsOperation.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="goods-operation">
     <div class="step-list">
-      <steps :current="activestep" style="height:60px;margin-top: 10px">
-        <step title="选择商品品类"/>
-        <step title="填写商品详情"/>
-        <step title="商品发布成功"/>
-      </steps>
+      <el-steps :active="activestep" align-center style="height: 60px; margin-top: 10px">
+        <el-step title="选择商品品类" />
+        <el-step title="填写商品详情" />
+        <el-step title="商品发布成功" />
+      </el-steps>
     </div>
     <!-- 第一步 选择分类 -->
     <first-step ref='first' v-show="activestep === 0" @change="getFirstData"></first-step>
diff --git a/seller/src/views/goods/goods-seller/goodsOperationFirst.vue b/seller/src/views/goods/goods-seller/goodsOperationFirst.vue
index 98e08db9..3c851cb4 100644
--- a/seller/src/views/goods/goods-seller/goodsOperationFirst.vue
+++ b/seller/src/views/goods/goods-seller/goodsOperationFirst.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- 选择商品类型 -->
-    <Modal v-model="selectGoodsType" width="550" :closable="false">
+    <el-dialog v-model="selectGoodsType" width="550px" :show-close="false">
       <div class="goods-type-list">
         <div
           class="goods-type-item"
@@ -17,7 +17,7 @@
           </div>
         </div>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 商品分类 -->
     <div class="content-goods-publish">
       <div class="goods-category">
@@ -63,10 +63,10 @@
     </div>
     <!-- 底部按钮 -->
     <div class="footer">
-      <ButtonGroup>
-        <Button type="primary" @click="selectGoodsType = true">商品类型</Button>
-        <Button type="primary" @click="next">下一步</Button>
-      </ButtonGroup>
+      <div class="footer-btns">
+        <el-button type="primary" @click="selectGoodsType = true">商品类型</el-button>
+        <el-button type="primary" @click="next">下一步</el-button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/seller/src/views/goods/goods-seller/goodsOperationSec.vue b/seller/src/views/goods/goods-seller/goodsOperationSec.vue
index de1bf0ec..c8ed37d7 100644
--- a/seller/src/views/goods/goods-seller/goodsOperationSec.vue
+++ b/seller/src/views/goods/goods-seller/goodsOperationSec.vue
@@ -1,115 +1,124 @@
 <template>
   <div>
-    <Modal v-model="visible" title="预览图片">
+    <el-dialog v-model="visible" title="预览图片">
       <img v-if="visible" :src="previewPicture" style="width: 100%">
-    </Modal>
+    </el-dialog>
     <div class="content-goods-publish">
-      <Form ref="baseInfoForm" :label-width="120" :model="baseInfoForm" :rules="baseInfoFormRule">
+      <el-form ref="baseInfoForm" label-width="120px" :model="baseInfoForm" :rules="baseInfoFormRule">
         <div class="base-info-item">
           <h4>基本信息</h4>
           <div class="form-item-view">
-            <FormItem label="商品分类">
+            <el-form-item label="商品分类">
               <span class="goods-category-name">{{
                 this.baseInfoForm.categoryName[0]
                 }}</span>
               <span> &gt; {{ this.baseInfoForm.categoryName[1] }}</span>
               <span> &gt; {{ this.baseInfoForm.categoryName[2] }}</span>
-            </FormItem>
-            <FormItem label="商品名称" prop="goodsName">
-              <Input v-model="baseInfoForm.goodsName" clearable placeholder="商品名称" style="width: 260px" type="text" />
-            </FormItem>
+            </el-form-item>
+            <el-form-item label="商品名称" prop="goodsName">
+              <el-input v-model="baseInfoForm.goodsName" clearable placeholder="商品名称" style="width: 260px" type="text" />
+            </el-form-item>
 
-            <FormItem label="商品价格" prop="price">
-              <Input v-model="baseInfoForm.price" clearable placeholder="商品价格" style="width: 260px" type="text" />
-            </FormItem>
-            <FormItem label="商品卖点" prop="sellingPoint">
-              <Input v-model="baseInfoForm.sellingPoint" :rows="4" style="width: 260px" type="textarea" />
-            </FormItem>
-            <FormItem label="商品品牌" prop="brandId">
-              <Select v-model="baseInfoForm.brandId" filterable style="width: 200px">
-                <Option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></Option>
-              </Select>
-              <Button class="refresh-icon" icon="md-refresh" shape="circle" type="text"
-                @click="refresh('brand')"></Button>
-            </FormItem>
+            <el-form-item label="商品价格" prop="price">
+              <el-input v-model="baseInfoForm.price" clearable placeholder="商品价格" style="width: 260px" type="text" />
+            </el-form-item>
+            <el-form-item label="商品卖点" prop="sellingPoint">
+              <el-input v-model="baseInfoForm.sellingPoint" :rows="4" style="width: 260px" type="textarea" />
+            </el-form-item>
+            <el-form-item label="商品品牌" prop="brandId">
+              <el-select v-model="baseInfoForm.brandId" filterable style="width: 200px">
+                <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+              <el-button class="refresh-icon" circle link @click="refresh('brand')">
+                <el-icon><Refresh /></el-icon>
+              </el-button>
+            </el-form-item>
              
-              <FormItem class="form-item-view-el" label="计量单位" prop="goodsUnit">
-              <Select v-model="baseInfoForm.goodsUnit" style="width: 100px">
-                <Option v-for="(item, index) in goodsUnitList" :key="index" :value="item">{{ item }}
-                </Option>
-              </Select>
-              <Button class="refresh-icon" icon="md-refresh" shape="circle" type="text"
-                @click="refresh('goodsUnit')"></Button>
-            </FormItem>
-            <FormItem class="form-item-view-el" label="销售模式" prop="salesModel">
-              <RadioGroup v-if="baseInfoForm.goodsType != 'VIRTUAL_GOODS'" v-model="baseInfoForm.salesModel"
-                button-style="solid" type="button" @on-change="handleSalesModeChange">
-                <Radio label="RETAIL" title="零售型">零售型</Radio>
-                <Radio label="WHOLESALE" title="批发型">批发型</Radio>
-              </RadioGroup>
-              <RadioGroup v-else v-model="baseInfoForm.salesModel" button-style="solid" type="button">
-                <Radio label="RETAIL" title="零售型">
-                  <span>虚拟型</span>
-                </Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem v-if="baseInfoForm.salesModel == 'WHOLESALE'" class="form-item-view-el" label="销售规则"
+              <el-form-item class="form-item-view-el" label="计量单位" prop="goodsUnit">
+              <el-select v-model="baseInfoForm.goodsUnit" style="width: 100px">
+                <el-option v-for="(item, index) in goodsUnitList" :key="index" :label="item" :value="item" />
+              </el-select>
+              <el-button class="refresh-icon" circle link @click="refresh('goodsUnit')">
+                <el-icon><Refresh /></el-icon>
+              </el-button>
+            </el-form-item>
+            <el-form-item class="form-item-view-el" label="销售模式" prop="salesModel">
+              <el-radio-group
+                v-if="baseInfoForm.goodsType != 'VIRTUAL_GOODS'"
+                v-model="baseInfoForm.salesModel"
+                @change="handleSalesModeChange"
+              >
+                <el-radio-button value="RETAIL">零售型</el-radio-button>
+                <el-radio-button value="WHOLESALE">批发型</el-radio-button>
+              </el-radio-group>
+              <el-radio-group v-else v-model="baseInfoForm.salesModel">
+                <el-radio-button value="RETAIL">虚拟型</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="baseInfoForm.salesModel == 'WHOLESALE'" class="form-item-view-el" label="销售规则"
               prop="wholesaleRule">
               <div class="form-item-view-wholesale">
                 <div>
-                  <Table :columns="wholesaleColumns" :data="wholesaleData" border>
-                    <template slot="wholesaleNum" slot-scope="{ row, index }">
-                      <div>
-                        <Input v-model="wholesaleData[index].num" min="1" number type="number"
-                          @on-blur="checkWholesaleNum(index)">
-                        <span slot="append">{{
-                          baseInfoForm.goodsUnit || ""
-                          }}</span>
-                        </Input>
-                      </div>
-                    </template>
-                    <template slot="wholesalePrice" slot-scope="{ row, index }">
-                      <div style="
-                          display: flex;
-                          justify-content: space-between;
-                          align-items: center;
-                        ">
-                        <Input v-model="wholesaleData[index].price" min="1" number style="width: 190px" type="number"
-                          @on-blur="checkWholesalePrice(index)">
-                        <span slot="append">元</span>
-                        </Input>
-                        <Button v-if="index > 0" size="small" style="margin-left: 5px" type="error"
-                          @click="handleDeleteWholesaleData(index)">删除
-                        </Button>
-                      </div>
-                    </template>
-                  </Table>
+                  <el-table :data="wholesaleData" border style="width: 100%">
+                    <el-table-column label="购买数量" align="center">
+                      <template #default="{ $index }">
+                        <el-input v-model="wholesaleData[$index].num" type="number" @blur="checkWholesaleNum($index)">
+                          <template #append>{{ baseInfoForm.goodsUnit || "" }}</template>
+                        </el-input>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="商品单价" align="center" width="280">
+                      <template #default="{ $index }">
+                        <div style="display: flex; justify-content: space-between; align-items: center">
+                          <el-input
+                            v-model="wholesaleData[$index].price"
+                            type="number"
+                            style="width: 190px"
+                            @blur="checkWholesalePrice($index)"
+                          >
+                            <template #append>元</template>
+                          </el-input>
+                          <el-button
+                            v-if="$index > 0"
+                            size="small"
+                            style="margin-left: 5px"
+                            type="danger"
+                            @click="handleDeleteWholesaleData($index)"
+                          >
+                            删除
+                          </el-button>
+                        </div>
+                      </template>
+                    </el-table-column>
+                  </el-table>
 
-                  <Button v-if="wholesaleData.length < 3" icon="md-add" style="margin-top: 10px"
-                    @click="handleAddWholesaleData()">
+                  <el-button v-if="wholesaleData.length < 3" style="margin-top: 10px" @click="handleAddWholesaleData()">
+                    <el-icon><Plus /></el-icon>
                     添加价格区间
-                  </Button>
+                  </el-button>
                 </div>
                 <div class="form-item-view-wholesale-preview">
-                  <Table :columns="wholesalePreviewColumns" :data="wholesaleData" border></Table>
+                  <el-table :data="wholesaleData" border style="width: 100%">
+                    <el-table-column label="销售规则" width="300">
+                      <template #default="{ row }">
+                        当商品购买数量 ≥{{ row.num }} 时，售价为 ￥{{ row.price }}/{{ baseInfoForm.goodsUnit }}
+                      </template>
+                    </el-table-column>
+                  </el-table>
                 </div>
               </div>
-            </FormItem>
-            <FormItem class="form-item-view-el" label="商品发布" prop="release">
-                <RadioGroup v-model="baseInfoForm.release" button-style="solid" type="button">
-                  <Radio :label="1" title="上架">
-                    <span>上架</span>
-                  </Radio>
-                  <Radio :label="0" title="下架">
-                    <span>下架</span>
-                  </Radio>
-                </RadioGroup>
-              </FormItem>
+            </el-form-item>
+            <el-form-item class="form-item-view-el" label="商品发布" prop="release">
+                <el-radio-group v-model="baseInfoForm.release">
+                  <el-radio-button :value="1">上架</el-radio-button>
+                  <el-radio-button :value="0">下架</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
           </div>
 
           <h4>商品规格及图片</h4>
           <div class="form-item-view">
-            <FormItem class="form-item-view-el required" label="主图" prop="goodsGalleryFiles">
+            <el-form-item class="form-item-view-el required" label="主图" prop="goodsGalleryFiles">
               <div style="display: flex; flex-wrap: wrap;">
                 <vuedraggable :animation="200" :list="baseInfoForm.goodsGalleryFiles">
                   <div v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index"
@@ -118,8 +127,8 @@
                       <img :src="item" />
                       <div class="demo-upload-list-cover">
                         <div>
-                          <Icon size="30" type="md-search" @click.native="handleViewGoodsPicture(item)"></Icon>
-                          <Icon size="30" type="md-trash" @click.native="handleRemoveGoodsPicture(item)"></Icon>
+                          <el-button link type="primary" @click="handleViewGoodsPicture(item)">预览</el-button>
+                          <el-button link type="danger" @click="handleRemoveGoodsPicture(item)">删除</el-button>
                         </div>
                       </div>
                     </template>
@@ -140,85 +149,96 @@
                 <!--</Upload>-->
               </div>
               <div style="width: 100%;display: flex;justify-content: start;margin-top: 10px;">
-                <Button @click="handleCLickImg('goodsGalleryFiles')" type="primary">上传图片</Button>
+                <el-button @click="handleCLickImg('goodsGalleryFiles')" type="primary">上传图片</el-button>
               </div>
-              <Modal v-model="goodsPictureVisible" title="View Image">
+              <el-dialog v-model="goodsPictureVisible" title="View Image">
                 <img v-if="goodsPictureVisible" :src="previewGoodsPicture" style="width: 100%" />
-              </Modal>
-            </FormItem>
-            <FormItem>
+              </el-dialog>
+            </el-form-item>
+            <el-form-item>
               <div style="color: grey">主图仅支持png，jpg，jpeg格式，宽高至少600*600px，大小2M内，可拖拽调整主图顺序</div>
-            </FormItem>
-            <FormItem class="form-item-view-el" label="主图视频" prop="goodsVideo">
+            </el-form-item>
+            <el-form-item class="form-item-view-el" label="主图视频" prop="goodsVideo">
               <div class="goods-video">
                 <div v-if="baseInfoForm.goodsVideo">
                   <div>
                     <video :src="baseInfoForm.goodsVideo" class="video" controls style="max-width: 300px;" />
                   </div>
                 </div>
-                <Upload ref="upload" :action="uploadFileUrl" :format="['avi', 'wmv', 'mpeg', 'mp4', 'mov']"
-                  :headers="{ ...accessToken }" :max-size="10240" :on-error="() => { loadingVideo = false }"
-                  :on-exceeded-size="handleVideoMaxSize" :on-format-error="handleFormatError"
-                  :on-progress="() => { loadingVideo = true }" :on-success="handleSuccessGoodsVideo"
-                  :show-upload-list="false" multiple style="margin-left: 10px" type="drag">
-                  <Button :loading="loadingVideo" icon="ios-cloud-upload-outline" type="text">
-                    <span v-if="!loadingVideo">
-                      {{ baseInfoForm.goodsVideo ? "已" : "" }}上传视频
-                    </span>
-                    <span v-else>
-                      正在上传...
-                    </span>
-                  </Button>
-                </Upload>
+                <el-upload
+                  :action="uploadFileUrl"
+                  :headers="{ ...accessToken }"
+                  accept=".avi,.wmv,.mpeg,.mp4,.mov"
+                  :show-file-list="false"
+                  :before-upload="beforeVideoUpload"
+                  :on-success="handleSuccessGoodsVideo"
+                  :on-error="() => { loadingVideo = false }"
+                  style="margin-left: 10px; display: inline-block"
+                >
+                  <el-button :loading="loadingVideo" type="primary" link>
+                    {{ loadingVideo ? "正在上传..." : `${baseInfoForm.goodsVideo ? "已" : ""}上传视频` }}
+                  </el-button>
+                </el-upload>
               </div>
-            </FormItem>
+            </el-form-item>
             <div class="layout" style="width: 100%">
-              <Collapse v-model="open_panel">
-                <Panel name="1">
-                  自定义规格项
-                  <div slot="content">
-                    <Form>
+              <el-collapse v-model="open_panel">
+                <el-collapse-item title="自定义规格项" name="1">
+                    <div>
                       <div v-for="(item, $index) in skuInfo" :key="$index" class="sku-item-content">
-                        <Card :bordered="true" class="ivu-card-body">
-                          <a slot="extra" style="margin-left: 6px">
-                            <Icon size="20" type="md-trash" @click="handleCloseSkuItem($index, item)"></Icon>
-                          </a>
+                        <el-card class="ivu-card-body">
+                          <template #header>
+                            <el-button link type="danger" @click="handleCloseSkuItem($index, item)">删除规格项</el-button>
+                          </template>
                           <div>
                             <div style="display: flex;margin-bottom: 10px;font-weight: bold">规格项</div>
-                            <FormItem class="sku-item-content-val flex" label="">
+                            <el-form-item class="sku-item-content-val flex" label="">
 
                               <div>
-                                <AutoComplete v-model="item.name" :filter-method="filterMethod" :maxlength="30"
-                                  placeholder="请输入规格项名称" style="width: 150px" @on-focus="changeSkuItem(item.name)"
-                                  @on-change="editSkuItem(item.name, $index, item)">
-                                </AutoComplete>
+                                <el-autocomplete
+                                  v-model="item.name"
+                                  :fetch-suggestions="(q, cb) => cb([])"
+                                  maxlength="30"
+                                  placeholder="请输入规格项名称"
+                                  style="width: 150px"
+                                  @focus="changeSkuItem(item.name)"
+                                  @change="editSkuItem(item.name, $index, item)"
+                                />
 
-                                <iSwitch v-if="$index === 0" style="margin-left: 10px" size="small"
-                                  @on-change="changeSkuOpenImage" v-model="openImage" /><span v-if="$index === 0"
-                                  style="margin-left: 5px">添加规格图片</span>
+                                <el-switch
+                                  v-if="$index === 0"
+                                  v-model="openImage"
+                                  style="margin-left: 10px"
+                                  @change="changeSkuOpenImage"
+                                />
+                                <span v-if="$index === 0" style="margin-left: 5px">添加规格图片</span>
                               </div>
-                            </FormItem>
+                            </el-form-item>
 
                           </div>
                           <div class="sku-val">
                             <div style="margin-bottom: 10px;font-weight: bold;display: flex">规格值 (输入完成后，鼠标点击其他地方后生效)</div>
-                            <Form :model="item" class="flex">
+                            <el-form :model="item" class="flex">
                               <!--规格值文本列表-->
-                              <FormItem v-for="(val, index) in item.spec_values" :key="index"
+                              <el-form-item v-for="(val, index) in item.spec_values" :key="index"
                                 class="sku-item-content-val flex" label="" style="line-height: 32px;">
                                 <div style="display: flex; justify-content: center; align-items: center;">
 
 
-                                  <AutoComplete ref="input" v-model="val.value" :disabled="containsSameSkuItem"
-                                    :filter-method="filterMethod" :maxlength="30" placeholder="请输入规格值"
-                                    style="width: 180px" @on-focus="changeSkuVals(val, item.name)"
-                                    @on-blur="checkSkuVal(val, $index, item)"
-                                    @on-change="skuValueChange(val, index, item)">
-                                  </AutoComplete>
-                                  <a style="margin-left: 6px" >
-                                    <Icon size="15" type="md-trash" @click="handleCloseSkuValue(val, index, item)">
-                                    </Icon>
-                                  </a>
+                                  <el-autocomplete
+                                    v-model="val.value"
+                                    :disabled="containsSameSkuItem"
+                                    :fetch-suggestions="(q, cb) => cb([])"
+                                    maxlength="30"
+                                    placeholder="请输入规格值"
+                                    style="width: 180px"
+                                    @focus="changeSkuVals(val, item.name)"
+                                    @blur="checkSkuVal(val, $index, item)"
+                                    @change="skuValueChange(val, index, item)"
+                                  />
+                                  <el-button link type="danger" style="margin-left: 6px" @click="handleCloseSkuValue(val, index, item)">
+                                    <el-icon><Delete /></el-icon>
+                                  </el-button>
                                 </div>
 
                                   <!-- 内联错误提示 -->
@@ -231,205 +251,251 @@
                                         <img :src="img" style="width: 180px;height: 140px" />
                                         <div class="sku-upload-list-cover">
                                           <div style="margin-top: 50px">
-                                            <Icon size="25" type="md-search" @click="handleView(img)"></Icon>
-                                            <Icon size="25" type="md-trash" @click="handleRemove(val.images, __index)">
-                                            </Icon>
+                                            <el-icon :size="25" style="cursor:pointer;margin-right:8px" @click="handleView(img)"><ZoomIn /></el-icon>
+                                            <el-icon :size="25" style="cursor:pointer" @click="handleRemove(val.images, __index)"><Delete /></el-icon>
                                           </div>
                                         </div>
                                       </template>
                                     </div>
                                   </vuedraggable>
-                                  <Upload ref="uploadSku" :action="uploadFileUrl" v-if="val.images < 1"
-                                    :before-upload="handleBeforeUpload" :format="['jpg', 'jpeg', 'png', 'webp']"
-                                    :headers="{ ...accessToken }" :max-size="2048" :on-error="() => { $Spin.hide(); }"
-                                    :on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError"
-                                    :on-progress="() => { $Spin.show(); }" :on-success="(res, file) => {
-                                      handleSuccess(res, file, val.images)
-                                    }" :show-upload-list="false" style="width: 180px;height: 140px;margin-right: 10px"
-                                    type="drag">
-                                    <div>
-                                      <Icon size="136" type="ios-camera"></Icon>
-                                    </div>
-                                  </Upload>
+                                  <el-upload
+                                    v-if="val.images.length < 1"
+                                    :action="uploadFileUrl"
+                                    :before-upload="handleBeforeUpload"
+                                    :headers="{ ...accessToken }"
+                                    :on-error="() => {}"
+                                    :on-exceeded-size="handleMaxSize"
+                                    :on-success="(res, file) => handleSuccess(res, file, val.images)"
+                                    :show-file-list="false"
+                                    accept=".jpg,.jpeg,.png,.webp"
+                                    drag
+                                    style="width: 180px;height: 140px;margin-right: 10px"
+                                  >
+                                    <el-icon :size="40"><Camera /></el-icon>
+                                  </el-upload>
                                 </div>
-                              </FormItem>
+                              </el-form-item>
 
-                              <FormItem
+                              <el-form-item
                                 v-if="item.spec_values.length < 10 && item.spec_values.length >= 1 && item.spec_values[0].value !== ''"
                                 class="sku-item-content-val flex" label="" style="line-height: 32px;">
-                                <AutoComplete ref="input" v-model="newSkuValues[$index]" :disabled="containsSameSkuItem"
-                                  :filter-method="filterMethod" :maxlength="30" placeholder="自定义规格值"
-                                  style="width: 180px" @on-blur="addSpec($index, item)"
-                                  v-on:keyup.native.enter="addSpec($index, item)">
-                                </AutoComplete>
-                              </FormItem>
-                            </Form>
+                                <el-autocomplete
+                                  v-model="newSkuValues[$index]"
+                                  :disabled="containsSameSkuItem"
+                                  :fetch-suggestions="(q, cb) => cb([])"
+                                  maxlength="30"
+                                  placeholder="自定义规格值"
+                                  style="width: 180px"
+                                  @blur="addSpec($index, item)"
+                                  @keyup.enter="addSpec($index, item)"
+                                />
+                              </el-form-item>
+                            </el-form>
                           </div>
-                        </Card>
+                        </el-card>
                       </div>
-                    </Form>
                     <div style="display: flex">
-                      <Button class="add-sku-btn" type="primary" @click="addSkuItem">添加规格项
-                      </Button>
+                      <el-button class="add-sku-btn" type="primary" @click="addSkuItem">添加规格项
+                      </el-button>
                     </div>
-                    &nbsp;
-                    <!--                    <Button class="add-sku-btn" size="small" type="warning" @click="handleClearSku">清空规格项-->
-                    <!--                    </Button>-->
-                  </div>
-                </Panel>
-                <Panel name="2">
-                  规格详细
-                  <div slot="content">
+                    </div>
+                </el-collapse-item>
+                <el-collapse-item title="规格详细" name="2">
                     <div v-if="needToloadSku" class="topinfo" @click="handleLoadingSkuData">点击加载sku数据</div>
-                    <div slot="content" :class="needToloadSku ? 'mask' : ''">
-                      <Table :columns="skuTableColumn" :data="skuTableData" class="mt_10" style="
-                          width: 100%;
-                          .ivu-table-overflowX {
-                            overflow-x: hidden;
-                          }
-                        ">
-                        <template slot="sn" slot-scope="{ row }">
-                          <Input v-model="row.sn" clearable placeholder="请输入货号"
-                            @on-change="updateSkuTable(row, 'sn')" />
-                        </template>
-                        <div v-if="baseInfoForm.goodsType !== 'VIRTUAL_GOODS'" slot="weight" slot-scope="{ row }">
-                          <Input v-model="row.weight" clearable placeholder="请输入重量"
-                            @on-change="updateSkuTable(row, 'weight')">
-                          <span slot="append">kg</span>
-                          </Input>
-                        </div>
-                        <template slot="quantity" slot-scope="{ row }">
-                          <Input v-model="row.quantity" clearable placeholder="请输入库存"
-                            @on-change="updateSkuTable(row, 'quantity')">
-                          <span slot="append">{{
-                            baseInfoForm.goodsUnit || ""
-                            }}</span>
-                          </Input>
-                        </template>
-                        <template slot="cost" slot-scope="{ row }">
-                          <Input v-model="row.cost" clearable placeholder="请输入成本价"
-                            @on-change="updateSkuTable(row, 'cost')">
-                          <span slot="append">元</span>
-                          </Input>
-                        </template>
-                        <template slot="price" slot-scope="{ row }">
-                          <Input v-model="row.price" clearable placeholder="请输入价格"
-                            @on-change="updateSkuTable(row, 'price')">
-                          <span slot="append">元</span>
-                          </Input>
-                        </template>
-                        <template slot="wholePrice0" slot-scope="{ row }">
-                          <Input v-if="wholesaleData[0]" v-model="wholesaleData[0].price" clearable disabled>
-                          <span slot="append">元</span>
-                          </Input>
-                        </template>
-                        <template slot="wholePrice1" slot-scope="{ row }">
-                          <Input v-if="wholesaleData[1]" v-model="wholesaleData[1].price" clearable disabled>
-                          <span slot="append">元</span>
-                          </Input>
-                        </template>
-                        <template slot="wholePrice2" slot-scope="{ row }">
-                          <Input v-if="wholesaleData[2]" v-model="wholesaleData[2].price" clearable disabled>
-                          <span slot="append">元</span>
-                          </Input>
-                        </template>
-                      </Table>
+                    <div :class="needToloadSku ? 'mask' : ''">
+                      <el-table :data="skuTableData" border class="mt_10" style="width: 100%">
+                        <el-table-column
+                          v-for="(col, colIndex) in skuTableColumn"
+                          :key="colIndex"
+                          :label="col.title"
+                          :prop="col.key"
+                          min-width="120"
+                        >
+                          <template #default="{ row }">
+                            <span v-if="col.key && !col.slot">{{ row[col.key] }}</span>
+                            <el-input
+                              v-else-if="col.slot === 'sn'"
+                              v-model="row.sn"
+                              clearable
+                              placeholder="请输入货号"
+                              @change="updateSkuTable(row, 'sn')"
+                            />
+                            <el-input
+                              v-else-if="col.slot === 'weight' && baseInfoForm.goodsType !== 'VIRTUAL_GOODS'"
+                              v-model="row.weight"
+                              clearable
+                              placeholder="请输入重量"
+                              @change="updateSkuTable(row, 'weight')"
+                            >
+                              <template #append>kg</template>
+                            </el-input>
+                            <el-input
+                              v-else-if="col.slot === 'quantity'"
+                              v-model="row.quantity"
+                              clearable
+                              placeholder="请输入库存"
+                              @change="updateSkuTable(row, 'quantity')"
+                            >
+                              <template #append>{{ baseInfoForm.goodsUnit || "" }}</template>
+                            </el-input>
+                            <el-input
+                              v-else-if="col.slot === 'cost'"
+                              v-model="row.cost"
+                              clearable
+                              placeholder="请输入成本价"
+                              @change="updateSkuTable(row, 'cost')"
+                            >
+                              <template #append>元</template>
+                            </el-input>
+                            <el-input
+                              v-else-if="col.slot === 'price'"
+                              v-model="row.price"
+                              clearable
+                              placeholder="请输入价格"
+                              @change="updateSkuTable(row, 'price')"
+                            >
+                              <template #append>元</template>
+                            </el-input>
+                            <el-input
+                              v-else-if="col.slot === 'wholePrice0' && wholesaleData[0]"
+                              v-model="wholesaleData[0].price"
+                              disabled
+                            >
+                              <template #append>元</template>
+                            </el-input>
+                            <el-input
+                              v-else-if="col.slot === 'wholePrice1' && wholesaleData[1]"
+                              v-model="wholesaleData[1].price"
+                              disabled
+                            >
+                              <template #append>元</template>
+                            </el-input>
+                            <el-input
+                              v-else-if="col.slot === 'wholePrice2' && wholesaleData[2]"
+                              v-model="wholesaleData[2].price"
+                              disabled
+                            >
+                              <template #append>元</template>
+                            </el-input>
+                          </template>
+                        </el-table-column>
+                      </el-table>
                     </div>
-                  </div>
-                </Panel>
-              </Collapse>
+                </el-collapse-item>
+              </el-collapse>
             </div>
           </div>
           <h4 v-if="showContent">规格描述内容</h4>
           <div v-if="showContent" class="form-item-view">
             <div>
-              <FormItem :label="contentImage" class="form-item-view-el">
+              <el-form-item :label="contentImage" class="form-item-view-el">
                 <!-- {{item.url}} -->
                 <div v-for="(item, index) in listImages.images" :key="index" style="width:100%;display:flex;">
                   <img :src="item.url" style="width:100px;flex:1;margin-top:10px;cursor:pointer;"
                     @click="handleView(item.url)" />
                 </div>
-              </FormItem>
+              </el-form-item>
             </div>
           </div>
           <h4>商品详情描述</h4>
           <div class="form-item-view">
             <div class="tree-bar">
-              <FormItem class="form-item-view-el" label="店内分类" prop="shopCategory">
-                <Tree ref="tree" :check-strictly="false" :data="shopCategory" show-checkbox style="text-align: left"
-                  @on-select-change="selectTree" @on-check-change="changeSelect"></Tree>
-              </FormItem>
+              <el-form-item class="form-item-view-el" label="店内分类" prop="shopCategory">
+                <el-tree
+                  ref="tree"
+                  :data="shopCategory"
+                  show-checkbox
+                  node-key="id"
+                  :props="{ label: 'title', children: 'children' }"
+                  style="text-align: left"
+                  @node-click="(data) => selectTree([data])"
+                  @check="(_, ctx) => changeSelect(ctx.checkedNodes)"
+                />
+              </el-form-item>
             </div>
-            <FormItem class="form-item-view-el" label="PC商品描述" prop="intro" style="width: 100%">
+            <el-form-item class="form-item-view-el" label="PC商品描述" prop="intro" style="width: 100%">
               <editor ref="editor" v-model="baseInfoForm.intro" height="800px" openXss></editor>
               <div class="promise-intro-btn">
-                <Button type="primary" @click="promiseIntroEditor">将PC商品描述同步到移动端描述
-                </Button>
+                <el-button type="primary" @click="promiseIntroEditor">将PC商品描述同步到移动端描述
+                </el-button>
               </div>
-            </FormItem>
+            </el-form-item>
 
-            <FormItem class="form-item-view-el" label="移动端描述" prop="skuList" style="width: 100%">
+            <el-form-item class="form-item-view-el" label="移动端描述" prop="skuList" style="width: 100%">
               <editor ref="introEditor" v-model="baseInfoForm.mobileIntro" height="800px" openXss></editor>
-            </FormItem>
+            </el-form-item>
           </div>
           <div v-if="baseInfoForm.goodsType != 'VIRTUAL_GOODS'">
             <h4>商品物流信息</h4>
             <div class="form-item-view">
-              <FormItem class="form-item-view-el" label="物流模板" prop="templateId">
-                <Select v-model="baseInfoForm.templateId" style="width: 200px">
-                  <Option v-for="item in logisticsTemplate" :key="item.id" :value="item.id">{{ item.name }}
-                  </Option>
-                </Select>
-                <Button class="refresh-icon" icon="md-refresh" shape="circle" type="text"
-                  @click="refresh('template')"></Button>
-              </FormItem>
-              <FormItem v-if="baseInfoForm.salesModel == 'WHOLESALE'" class="form-item-view-el" label="商品重量"
+              <el-form-item class="form-item-view-el" label="物流模板" prop="templateId">
+                <el-select v-model="baseInfoForm.templateId" style="width: 200px">
+                  <el-option v-for="item in logisticsTemplate" :key="item.id" :label="item.name" :value="item.id" />
+                </el-select>
+                <el-button class="refresh-icon" circle link @click="refresh('template')">
+                  <el-icon><Refresh /></el-icon>
+                </el-button>
+              </el-form-item>
+              <el-form-item v-if="baseInfoForm.salesModel == 'WHOLESALE'" class="form-item-view-el" label="商品重量"
                 prop="weight">
-                <Input v-model="baseInfoForm.weight" placeholder="请输入商品重量">
-                <span slot="append">kg</span></Input>
-              </FormItem>
+                <el-input v-model="baseInfoForm.weight" placeholder="请输入商品重量">
+                  <template #append>kg</template>
+                </el-input>
+              </el-form-item>
             </div>
           </div>
           <h4>参数信息</h4>
           <div class="form-item-view">
-            <FormItem v-for="(paramsItem, paramsIndex) in goodsParams" :key="paramsItem.id || paramsIndex"
+            <el-form-item v-for="(paramsItem, paramsIndex) in goodsParams" :key="paramsItem.id || paramsIndex"
               :label="`${paramsItem.paramName}：`"
               :prop="`goodsParams.${paramsIndex}.paramValue`"
               :rules="paramsItem.required ? { required: true, message: `${paramsItem.paramName}不能为空`, trigger: 'change' } : {}">
-              <Select v-model="baseInfoForm.goodsParams[paramsIndex].paramValue" clearable placeholder="请选择" style="width: 200px"
-                @on-change="(val) => selectParams(paramsItem, val, paramsIndex)">
-                <Option v-for="option in getParamOptions(paramsItem.options)" :key="option" :label="option"
-                  :value="option">
-                </Option>
-              </Select>
-            </FormItem>
+              <el-select v-model="baseInfoForm.goodsParams[paramsIndex].paramValue" clearable placeholder="请选择" style="width: 200px"
+                @change="(val) => selectParams(paramsItem, val, paramsIndex)">
+                <el-option
+                  v-for="option in getParamOptions(paramsItem.options)"
+                  :key="option"
+                  :label="option"
+                  :value="option"
+                />
+              </el-select>
+            </el-form-item>
           </div>
         </div>
-      </Form>
+      </el-form>
     </div>
     <!-- 底部按钮 -->
     <div class="footer">
-      <ButtonGroup>
-        <Button type="primary" @click="pre">上一步</Button>
-        <Button :loading="submitLoading" type="primary" @click="save">
+      <div class="footer-btns">
+        <el-button type="primary" @click="pre">上一步</el-button>
+        <el-button :loading="submitLoading" type="primary" @click="save">
           {{ this.$route.query.id ? "保存" : "保存商品" }}
-        </Button>
-      </ButtonGroup>
+        </el-button>
+      </div>
     </div>
 
-    <Modal v-model="showGoodsVideo" title="查看视频">
+    <el-dialog v-model="showGoodsVideo" title="查看视频">
       <div id="dplayer">
 
       </div>
-    </Modal>
+    </el-dialog>
 
-    <!--<Modal width="1200px" v-model="picModelFlag">-->
+    <!--<el-dialog width="1200px" v-model="picModelFlag">-->
     <!--<ossManage @callback="callbackSelected" ref="ossManage" />-->
-    <!--</Modal>-->
-    <Modal v-model="picModelFlag" width="1200px" @on-ok="confirmUrls">
-      <ossManage ref="ossManage" :isComponent="true" :initialize="picModelFlag" @callback="callbackSelected"
-        @selected="(list) => { selectedImage = list }" />
-    </Modal>
+    <!--</el-dialog>-->
+    <el-dialog v-model="picModelFlag" width="1200px" title="选择图片" append-to-body destroy-on-close>
+      <ossManage
+        ref="ossManage"
+        :isComponent="true"
+        :initialize="picModelFlag"
+        @callback="callbackSelected"
+        @selected="(list) => { selectedImage = list }"
+      />
+      <template #footer>
+        <el-button @click="picModelFlag = false">取消</el-button>
+        <el-button type="primary" @click="confirmUrls">确定</el-button>
+      </template>
+    </el-dialog>
 
   </div>
 </template>
@@ -437,6 +503,7 @@
 import * as API_GOODS from "@/api/goods";
 import * as API_Shop from "@/api/shops";
 import cloneObj from "@/utils/index";
+import { Camera, Delete, Plus, Refresh, ZoomIn } from "@element-plus/icons-vue";
 import vuedraggable from "vuedraggable";
 import tinymec from "@/views/lili-components/editor/index.vue";
 
@@ -450,9 +517,14 @@ import ossManage from "@/views/shop/ossManages";
 export default {
   name: "goodsOperationSec",
   components: {
+    Camera,
+    Delete,
+    Plus,
+    Refresh,
+    ZoomIn,
     editor: tinymec,
     vuedraggable,
-    ossManage
+    ossManage,
   },
   props: {
     firstData: {
@@ -745,21 +817,21 @@ export default {
     },
     selectParams(params, value, paramsIndex) {
       if (!Array.isArray(this.baseInfoForm.goodsParamsDTOList)) {
-        this.$set(this.baseInfoForm, "goodsParamsDTOList", []);
+        this.baseInfoForm.goodsParamsDTOList = [];
       }
       
       // 确保baseInfoForm.goodsParams存在
       if (!Array.isArray(this.baseInfoForm.goodsParams)) {
-        this.$set(this.baseInfoForm, "goodsParams", []);
+        this.baseInfoForm.goodsParams = [];
       }
       
       // 确保对应索引的参数项存在
       if (!this.baseInfoForm.goodsParams[paramsIndex]) {
-        this.$set(this.baseInfoForm.goodsParams, paramsIndex, {});
+        this.baseInfoForm.goodsParams[paramsIndex] = {};
       }
       
       // 更新baseInfoForm中的值用于验证
-      this.$set(this.baseInfoForm.goodsParams[paramsIndex], 'paramValue', value || '');
+      this.baseInfoForm.goodsParams[paramsIndex].paramValue = value || '';
       
       const list = this.baseInfoForm.goodsParamsDTOList;
       const paramId = params && params.id ? String(params.id) : "";
@@ -770,7 +842,7 @@ export default {
           list.splice(index, 1);
         }
         // 清空表单项的值
-        this.$set(params, 'paramValue', '');
+        params.paramValue = '';
         return;
       }
       const newItem = {
@@ -783,13 +855,13 @@ export default {
       };
 
       if (index >= 0) {
-        this.$set(list, index, newItem);
+        list[index] = newItem;
       } else {
         list.push(newItem);
       }
 
       // 同步更新表单项的值
-      this.$set(params, 'paramValue', value);
+      params.paramValue = value;
     },
     // 编辑sku图片
     editSkuPicture(row) {
@@ -844,7 +916,6 @@ export default {
     },
     // sku图片上传成功
     handleSuccess(res, file, images) {
-      this.$Spin.hide();
       if (file.response) {
         file.url = file.response.result;
         if (images) {
@@ -942,7 +1013,6 @@ export default {
     },
     // 商品图片上传成功
     handleSuccessGoodsPicture(res, file) {
-      this.$Spin.hide();
       if (file.response) {
         file.url = file.response.result;
         this.baseInfoForm.goodsGalleryFiles.push(file.url);
@@ -1263,11 +1333,11 @@ export default {
             .sort((a, b) => Number(a.sort || 0) - Number(b.sort || 0));
 
           // 初始化baseInfoForm.goodsParams用于表单验证
-          this.$set(this.baseInfoForm, 'goodsParams', []);
+          this.baseInfoForm.goodsParams = [];
           this.goodsParams.forEach((param, index) => {
-            this.$set(this.baseInfoForm.goodsParams, index, {
+            this.baseInfoForm.goodsParams[index] = {
               paramValue: param.paramValue || ''
-            });
+            };
           });
 
           // 确保表单验证能正确初始化
@@ -1297,8 +1367,7 @@ export default {
         this.$Message.error("规格项不能为空！");
         return;
       }
-      // 写入对象，下标，具体对象
-      this.$set(this.skuInfo, this.skuInfo.length, {
+      this.skuInfo.push({
         spec_values: [{ name: "", value: "", images: [] }],
         name: "",
       });
@@ -1420,7 +1489,7 @@ export default {
     checkSkuVal(val, groupIndex, spec) {
       if (val.value === "") {
         // 内联错误提示，不使用弹窗
-        this.$set(val, '_error', '规格值不能为空！');
+        val._error = '规格值不能为空！';
 
         // 如果规格项和规格名称存在，从表格数据中移除包含该空规格值的行
         if (spec && spec.name && this.skuInfo[groupIndex]) {
@@ -1568,7 +1637,7 @@ export default {
         } else {
           itemValue.images = this.baseInfoForm.goodsGalleryFiles
         }
-        this.$set(item.spec_values, item.spec_values.length, itemValue);
+        item.spec_values.push(itemValue);
 
         // 生成新的规格组合
         const newCombinations = this.generateSkuCombinations(this.skuInfo);
@@ -1952,7 +2021,8 @@ export default {
       this.$nextTick(() => {
         this.skuTableData[index][item] = row[item];
       });
-      // this.$set(this.skuTableData,[index][item],row[item])
+      // // migrated
+(this.skuTableData,[index][item],row[item])
     },
     // 店内分类选择
     selectTree(v) {
diff --git a/seller/src/views/home/home.scss b/seller/src/views/home/home.scss
index 69d82189..43cc0311 100644
--- a/seller/src/views/home/home.scss
+++ b/seller/src/views/home/home.scss
@@ -11,7 +11,7 @@ h4 {
   margin: 20px 0;
   font-size: 18px;
 }
-::v-deep .ivu-icon {
+:deep(.el-icon) {
   margin-right: 10px;
 }
 .rate-box {
@@ -82,7 +82,7 @@ h4 {
   font-weight: bold;
   width: 286px;
   display: flex;
-  ::v-deep span {
+  :deep(span) {
     color: $theme_color;
     font-size: 18px;
   }
diff --git a/seller/src/views/home/home.vue b/seller/src/views/home/home.vue
index 3a56961e..b11b4821 100644
--- a/seller/src/views/home/home.vue
+++ b/seller/src/views/home/home.vue
@@ -1,58 +1,72 @@
 <template>
   <div>
-
-    <Modal v-model="noticeFlage" :title="noticesDetail.title">
-      <div v-if="noticesDetail" class="noticesDetail" v-html="noticesDetail.content">
-
-      </div>
-    </Modal>
+    <el-dialog v-model="noticeFlage" :title="noticesDetail.title">
+      <div v-if="noticesDetail" class="noticesDetail" v-html="noticesDetail.content"></div>
+    </el-dialog>
     <div class="box flex">
       <div class="box-left">
         <div class="card shop flex">
           <div>
-            <h4>Hi,<span style="margin-left:5px;">{{ userData.nickName }}</span></h4>
-            <img class="shop-logo" :src="userData.storeLogo || require('@/assets/logo1.png')" alt="">
+            <h4>Hi,<span style="margin-left: 5px">{{ userData.nickName }}</span></h4>
+            <img
+              class="shop-logo"
+              :src="userData.storeLogo || require('@/assets/logo1.png')"
+              alt=""
+            />
           </div>
           <div class="shop-box">
             <div class="box-item">
-              <div>店铺名称：{{ userData.storeName || '暂无' }}</div>
+              <div>店铺名称：{{ userData.storeName || "暂无" }}</div>
             </div>
             <div class="box-item">
-              <div>店铺状态：{{ userData.storeDisable == 'OPEN' ? '开启中' : '关闭' }}</div>
+              <div>店铺状态：{{ userData.storeDisable == "OPEN" ? "开启中" : "关闭" }}</div>
             </div>
             <div class="box-item" @click="im()">
-              <Button type="info" :loading='load'>点击登录客服</Button>
+              <el-button type="info" :loading="load">点击登录客服</el-button>
             </div>
           </div>
 
           <div class="rate-box">
             <div>
-              <i-circle :size="120" stroke-color="#fecb89" :trail-width="4" :stroke-width="5"
-                :percent="(userData.serviceScore * 20)" stroke-linecap="square">
-                <div class="demo-Circle-custom">
-
+              <el-progress
+                type="circle"
+                :width="120"
+                :stroke-width="5"
+                :percentage="userData.serviceScore * 20"
+                color="#fecb89"
+              >
+                <template #default>
                   <p class="bold">{{ userData.serviceScore }}分</p>
-                </div>
-              </i-circle>
+                </template>
+              </el-progress>
               <h5>服务得分</h5>
             </div>
             <div>
-              <i-circle :size="120" stroke-color="#a7c5eb" :trail-width="4" :stroke-width="5"
-                :percent="(userData.deliveryScore * 20)" stroke-linecap="square">
-                <div>
-
+              <el-progress
+                type="circle"
+                :width="120"
+                :stroke-width="5"
+                :percentage="userData.deliveryScore * 20"
+                color="#a7c5eb"
+              >
+                <template #default>
                   <p class="bold">{{ userData.deliveryScore }}分</p>
-                </div>
-              </i-circle>
+                </template>
+              </el-progress>
               <h5>交货得分</h5>
             </div>
             <div>
-              <i-circle :size="120" stroke-color="#848ccf" :trail-width="4" :stroke-width="5"
-                :percent="(userData.descriptionScore * 20)" stroke-linecap="square">
-                <div>
+              <el-progress
+                type="circle"
+                :width="120"
+                :stroke-width="5"
+                :percentage="userData.descriptionScore * 20"
+                color="#848ccf"
+              >
+                <template #default>
                   <p class="bold">{{ userData.descriptionScore }}分</p>
-                </div>
-              </i-circle>
+                </template>
+              </el-progress>
               <h5>评价得分</h5>
             </div>
           </div>
@@ -66,9 +80,7 @@
                 <span>{{ homeData.unPaidOrder || 0 }}</span>
                 <div>待付款</div>
               </div>
-              <div class="detail-title">
-                交易前
-              </div>
+              <div class="detail-title">交易前</div>
             </div>
 
             <div class="detail-item" @click="navigateTo('orderList')">
@@ -80,9 +92,7 @@
                 <span>{{ homeData.deliveredOrder || 0 }}</span>
                 <div>待收货</div>
               </div>
-              <div class="detail-title">
-                交易中
-              </div>
+              <div class="detail-title">交易中</div>
             </div>
             <div class="detail-item">
               <div @click="navigateTo('returnMoneyOrder')">
@@ -97,21 +107,16 @@
                 <span>{{ homeData.memberEvaluation || 0 }}</span>
                 <div>待评价</div>
               </div>
-              <div class="detail-title">
-                交易后
-              </div>
+              <div class="detail-title">交易后</div>
             </div>
             <div class="detail-item" @click="navigateTo('orderComplaint')">
               <div>
                 <span>{{ homeData.complaint || 0 }}</span>
                 <div>待处理</div>
               </div>
-
-              <div class="detail-title">
-                投诉
-              </div>
+              <div class="detail-title">投诉</div>
             </div>
-            <div class="detail-item" >
+            <div class="detail-item">
               <div @click="navigateTo('alert-goods-quantity')">
                 <span>{{ homeData.alertQuantityNum || 0 }}</span>
                 <div>库存预警</div>
@@ -120,9 +125,7 @@
                 <span>{{ homeData.waitAuth || 0 }}</span>
                 <div>审核中</div>
               </div>
-              <div class="detail-title">
-                商品
-              </div>
+              <div class="detail-title">商品</div>
             </div>
 
             <div class="detail-item">
@@ -134,15 +137,11 @@
                 <span>{{ homeData.waitPayBill || 0 }}</span>
                 <div>等待对账</div>
               </div>
-              <div class="detail-title">
-                其他
-              </div>
+              <div class="detail-title">其他</div>
             </div>
-
           </div>
         </div>
       </div>
-      <!-- 公告 -->
       <div class="card box-right">
         <h4>平台公告</h4>
         <div>
@@ -153,49 +152,46 @@
       </div>
     </div>
 
-    <div class="card ">
+    <div class="card">
       <h4>统计数据</h4>
       <div class="count-list flex">
         <div class="count-item" @click="navigateTo('goods')">
           <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>
             <div>上架商品数量</div>
           </div>
-
         </div>
         <div class="count-item" @click="navigateTo('orderStatistics')">
           <div>
-            <Icon class="icon" size="31" type="ios-card" />
+            <el-icon class="icon" :size="31"><CreditCard /></el-icon>
           </div>
           <div>
-            <div class="counts">{{ homeData.orderPrice || 0 | unitPrice('￥') }}</div>
+            <div class="counts">
+              {{ $filters.unitPrice(homeData.orderPrice || 0, "￥") }}
+            </div>
             <div>今日订单总额</div>
           </div>
-
         </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>
             <div>今日订单数量</div>
           </div>
-
         </div>
         <div class="count-item" @click="navigateTo('trafficStatistics')">
           <div>
-            <Icon class="icon" size="31" type="md-person" />
+            <el-icon class="icon" :size="31"><User /></el-icon>
           </div>
           <div>
             <div class="counts">{{ homeData.storeUV || 0 }}</div>
             <div>今日访客数量</div>
           </div>
-
         </div>
       </div>
     </div>
@@ -203,99 +199,90 @@
 </template>
 
 <script>
+import { Picture, CreditCard, List, User } from "@element-plus/icons-vue";
 import { getSellerHomeData, getHomeNotice } from "@/api/index";
-import { getIMDetail } from "@/api/common"
+import { getIMDetail } from "@/api/common";
 import { seeArticle } from "@/api/pages";
 import Cookies from "js-cookie";
 import { userMsg } from "@/api/index";
+
 export default {
   name: "home",
-  data () {
+  components: {
+    Picture,
+    CreditCard,
+    List,
+    User,
+  },
+  data() {
     return {
-      noticeFlage: false, // 控制平台公告显隐
-
-      homeData: {}, // 首页数据
-      userData: "", // 店铺信息
-      notices: "", // 平台公告列表
-      noticesDetail: { // 平台公告详情
+      noticeFlage: false,
+      homeData: {},
+      userData: "",
+      notices: "",
+      noticesDetail: {
         title: "",
       },
       IMLink: "",
-      load:false, //加载Im
+      load: false,
     };
   },
-
   methods: {
-    // 跳转页面
-    navigateTo (name) {
-      this.$router.push({
-        name,
-      });
+    navigateTo(name) {
+      this.$router.push({ name });
     },
-    // 初始化数据
-    async init () {
-      let userInfo = JSON.parse(Cookies.get("userInfoSeller"));
-
+    async init() {
+      const userInfo = JSON.parse(Cookies.get("userInfoSeller"));
       this.userData = userInfo;
 
-      let res = await getHomeNotice();
+      const res = await getHomeNotice();
       if (res.success) {
         this.notices = res.result.records;
       }
     },
-    // 跳转文章页
-    async clickLinkNotices (val) {
-      let res = await seeArticle(val.id);
+    async clickLinkNotices(val) {
+      const res = await seeArticle(val.id);
       if (res.success) {
         this.noticesDetail = res.result;
         this.noticeFlage = true;
       }
     },
-
-    /**
-     * 点击登录im的时候需要去判断一下当前店铺信息是否失效
-     * 失效的话重新请求刷新token保证最新的token去访问im
-     */
-    async im () {
-      // 获取访问Token
-      let accessToken = this.getStore("accessToken");
-      this.load = true
+    async im() {
+      const accessToken = this.getStore("accessToken");
+      this.load = true;
       await this.getIMDetailMethods();
       const userInfo = await userMsg();
-      this.load = false
+      this.load = false;
       if (userInfo.success && this.IMLink) {
         window.open(`${this.IMLink}?token=` + accessToken);
-      }
-      else{
+      } else {
         this.$Message.error("请登录后再联系客服");
       }
     },
-
-    // 获取im信息
-    async getIMDetailMethods () {
-      let res = await getIMDetail();
+    async getIMDetailMethods() {
+      const res = await getIMDetail();
       if (res.success) {
         this.IMLink = res.result;
       }
     },
-    // 获取首页数据
-    async getHomeData () {
-      let res = await getSellerHomeData();
+    async getHomeData() {
+      const res = await getSellerHomeData();
       if (res.success) {
         this.homeData = res.result;
       }
     },
   },
-  mounted () {
+  mounted() {
     this.init();
     this.getHomeData();
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @import "./home.scss";
-.noticesDetail{
-  ::v-deep img{
+.noticesDetail {
+  :deep(img) {
     max-width: 100%;
     max-height: 200px;
   }
diff --git a/seller/src/views/lili-components/affix-time.vue b/seller/src/views/lili-components/affix-time.vue
index 77fd73ae..6df6b9d9 100644
--- a/seller/src/views/lili-components/affix-time.vue
+++ b/seller/src/views/lili-components/affix-time.vue
@@ -1,89 +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="年月查询"
-          style="width:200px;margin-left:10px;">
-          <Option v-for="(item, index) in dates" :value="item.year + '-' + item.month" :key="index">{{
-            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 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: 10,
+        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() {
@@ -91,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;
@@ -150,54 +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;
   }
@@ -208,8 +171,6 @@ export default {
   position: relative;
 }
 
-.date-picker {}
-
 .active:before {
   content: "";
   position: absolute;
diff --git a/seller/src/views/lili-components/editor/index.vue b/seller/src/views/lili-components/editor/index.vue
index a28d64e9..bf7a32e1 100644
--- a/seller/src/views/lili-components/editor/index.vue
+++ b/seller/src/views/lili-components/editor/index.vue
@@ -123,7 +123,7 @@ export default {
   deactivated() {
     this.destroyTinymce();
   },
-  destroyed() {
+  unmounted() {
     this.destroyTinymce();
   },
 };
diff --git a/seller/src/views/lili-components/editor/upload-image.vue b/seller/src/views/lili-components/editor/upload-image.vue
index 44ee38f7..88094d38 100644
--- a/seller/src/views/lili-components/editor/upload-image.vue
+++ b/seller/src/views/lili-components/editor/upload-image.vue
@@ -1,86 +1,112 @@
 <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/shop/ossManage";
+
 export default {
   name: "upload-image",
   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 = {
@@ -88,71 +114,78 @@ 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() {
+      if (this.selectedImage.length) {
+        this.selectedImage.forEach((element) => {
+          this.images.push({ url: element.url });
+        });
+      }
+      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;
@@ -165,47 +198,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/seller/src/views/lili-components/multiple-region.vue b/seller/src/views/lili-components/multiple-region.vue
index d3f36f5e..68a346f4 100644
--- a/seller/src/views/lili-components/multiple-region.vue
+++ b/seller/src/views/lili-components/multiple-region.vue
@@ -1,57 +1,66 @@
 <template>
-  <Modal :mask-closable="false" :value="switched" v-model="switched" title="选择地址" @on-ok="submit" @on-cancel="cancel">
-    <div class="flex">
-      <Spin size="large" fix v-if="spinShow"></Spin>
-      <Tree ref="tree" class="tree" :data="data" expand-node show-checkbox multiple></Tree>
+  <el-dialog
+    v-model="switched"
+    title="选择地址"
+    width="600px"
+    :close-on-click-modal="false"
+    destroy-on-close
+    @close="cancel"
+  >
+    <div v-loading="spinShow" class="flex">
+      <el-tree
+        ref="tree"
+        class="tree"
+        :data="data"
+        :props="treeProps"
+        node-key="id"
+        show-checkbox
+        default-expand-all
+      />
     </div>
-  </Modal>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="submit">确定</el-button>
+    </template>
+  </el-dialog>
 </template>
 <script>
 import { getAllCity } from "@/api/index";
 export default {
   data() {
     return {
-      switched: false, // 控制模态框显隐
-      spinShow: false, // 加载loading
-      data: [], // 地区数据
-      selectedWay: [], // 选择的地区
-      callBackData: "", // 打开组件的回显数据
+      switched: false,
+      spinShow: false,
+      data: [],
+      selectedWay: [],
+      callBackData: "",
+      treeProps: {
+        label: "title",
+        children: "children",
+      },
     };
   },
   mounted() {
     this.init();
   },
   methods: {
-    clear() {  // 引用该组件的父组件会调用
+    clear() {
       this.data = [];
       this.selectedWay = [];
       this.init();
     },
-    /**
-     * 关闭
-     */
     cancel() {
       this.switched = false;
-
-      // 关闭的时候所有数据设置成disabled为true
       this.data.forEach((item) => {
-        this.$set(item, "disabled", false);
+        item.disabled = false;
         item.children.forEach((child) => {
-          this.$set(child, "disabled", false);
+          child.disabled = false;
         });
       });
     },
-
-    /**
-     * 打开地图选择器
-     * @param {val} 回调的数据
-     * @param {index} 当前操作的运费模板的索引
-     */
     open(val, index) {
       if (val) {
-        //已选中的地址
         let checkedData = this.$store.state.shipTemplate;
-
         let checkData = [];
         let disabledData = checkedData.filter((item, i) => {
           if (i != index) {
@@ -60,140 +69,127 @@ export default {
             checkData.push(item);
           }
         });
-        // 选中
         checkData.forEach((check) => {
-          // 循环出已经选中的地址id
           check.areaId.split(",").forEach((ids) => {
             this.data.forEach((item) => {
-              // 如果当前省份下市区全部选中则选中该省份
               if (check.selectedAll) {
                 check.area.split(",").forEach((area) => {
                   if (area == item.name) {
-                    this.$set(item, "checked", true);
+                    item.checked = true;
                   }
                 });
               }
-
-              // 将市区继续循环
-              item.children.forEach((child, childIndex) => {
-                // 判断当前市区是否是已选中状态
+              item.children.forEach((child) => {
                 if (item.checked) {
-                  this.$set(child, "checked", true);
+                  child.checked = true;
                 }
                 if (child.id == ids) {
-                  this.$set(child, "checked", true);
+                  child.checked = true;
                 }
               });
             });
           });
         });
-
-        // 禁用
         disabledData.forEach((dis) => {
-          // 循环出已经选中的地址id
           dis.areaId.split(",").forEach((ids) => {
-            // 循环出省份
             this.data.forEach((item) => {
-              // 如果当前省份下市区全部选中则禁用该省份
               if (dis.selectedAll) {
                 dis.area.split(",").forEach((area) => {
                   if (area == item.name) {
-                    this.$set(item, "disabled", true);
+                    item.disabled = true;
                   }
                 });
               }
-              // 将市区继续循环
-              item.children.forEach((child, childIndex) => {
-                // 判断当前市区是否是已禁用状态
+              item.children.forEach((child) => {
                 if (item.disabled) {
-                  this.$set(child, "disabled", true);
-                } else {
-                  if (child.id == ids) {
-                    this.$set(child, "disabled", true);
-                  }
+                  child.disabled = true;
+                } else if (child.id == ids) {
+                  child.disabled = true;
                 }
               });
             });
           });
         });
+        this.syncTreeCheckedKeys();
       }
-      this.switched ? (this.switched = true) : (this.switched = true);
+      this.switched = true;
+    },
+    syncTreeCheckedKeys() {
+      this.$nextTick(() => {
+        const keys = [];
+        this.data.forEach((item) => {
+          if (item.checked) {
+            keys.push(item.id);
+          }
+          item.children.forEach((child) => {
+            if (child.checked) {
+              keys.push(child.id);
+            }
+          });
+        });
+        if (this.$refs.tree) {
+          this.$refs.tree.setCheckedKeys(keys);
+        }
+      });
     },
-
-    /**
-     * 提交并筛选出省市
-     */
     submit() {
-      // 筛选出省市
-      let list = this.$refs.tree.getCheckedAndIndeterminateNodes();
+      const checkedNodes = this.$refs.tree.getCheckedNodes(false, true);
+      const halfCheckedNodes = this.$refs.tree.getHalfCheckedNodes();
+      let list = [...checkedNodes, ...halfCheckedNodes];
 
       let sort = [];
-      list.forEach((item, i) => {
+      list.forEach((item) => {
         item.selectedList = [];
         item.selectedAll = false;
-        // 筛选出当前的省份
         if (item.level == "province" && !item.disabled) {
-          sort.push({
-            ...item,
-          });
+          sort.push({ ...item });
         }
-
-        // 筛选出当前选中的市
-        sort.forEach((sortItem, sortIndex) => {
-          if (
-            item.level != "province" &&
-            sortItem.id == item.parentId &&
-            !item.disabled
-          ) {
-            sortItem.selectedList.push({
-              ...item,
-            });
+        sort.forEach((sortItem) => {
+          if (item.level != "province" && sortItem.id == item.parentId && !item.disabled) {
+            sortItem.selectedList.push({ ...item });
           }
         });
       });
 
-      // 判断如果当前省是否全选
       this.data.forEach((whether) => {
         sort.forEach((item) => {
-          // 如果当前省匹配
           if (
             item.id == whether.id &&
             item.selectedList.length == whether.children.length
           ) {
-            // 给一个全选子级的标识符
             item.selectedList.forEach((child) => {
-              this.$set(child, "selectedAll", true);
+              child.selectedAll = true;
             });
-            this.$set(item, "selectedAll", true);
+            item.selectedAll = true;
           }
         });
       });
 
       this.$emit("selected", sort);
-
       this.cancel();
     },
-    // 初始化地区数据
     init() {
-      getAllCity().then((res) => {
-        if (res.result) {
-          res.result.forEach((item) => {
-            item.children.forEach((child) => {
-              child.title = child.name;
+      this.spinShow = true;
+      getAllCity()
+        .then((res) => {
+          if (res.result) {
+            this.data = [];
+            res.result.forEach((item) => {
+              item.children.forEach((child) => {
+                child.title = child.name;
+              });
+              this.data.push({
+                title: item.name,
+                ...item,
+              });
+              this.selectedWay.push({ name: item.name, id: item.id });
             });
-
-            let data = {
-              title: item.name,
-
-              ...item,
-            };
-            this.data.push(data);
-
-            this.selectedWay.push({ name: data.title, id: data.id });
-          });
-          this.$store.state.regions = this.data;
-        }
-      });
+            this.$store.state.regions = this.data;
+          }
+        })
+        .finally(() => {
+          this.spinShow = false;
+        });
     },
   },
 };
@@ -202,21 +198,14 @@ export default {
 .flex {
   display: flex;
   position: relative;
+  min-height: 400px;
 }
 .tree {
-  flex: 2;
+  flex: 1;
+  width: 100%;
 }
-.form {
-  flex: 8;
-}
-.button-list {
-  margin-left: 80px;
-  > * {
-    margin: 0 4px;
-  }
-}
-::v-deep .ivu-modal-body {
-  height: 400px !important;
+:deep(.el-dialog__body) {
+  max-height: 450px;
   overflow: auto;
 }
 </style>
diff --git a/seller/src/views/lili-dialog/goods-dialog.vue b/seller/src/views/lili-dialog/goods-dialog.vue
index e7c27f0c..1bba28cc 100755
--- a/seller/src/views/lili-dialog/goods-dialog.vue
+++ b/seller/src/views/lili-dialog/goods-dialog.vue
@@ -4,37 +4,68 @@
       <div class="query-wrapper">
         <div class="query-item">
           <div>搜索范围</div>
-          <Input placeholder="商品名称" @on-clear="goodsData=[]; goodsParams.goodsName=''; goodsParams.pageNumber = 1;  getQueryGoodsList()" @on-enter="()=>{goodsData=[]; goodsParams.pageNumber = 1; getQueryGoodsList();}" clearable style="width: 150px"
-            v-model="goodsParams.goodsName" />
+          <el-input
+            v-model="goodsParams.goodsName"
+            placeholder="商品名称"
+            clearable
+            style="width: 150px"
+            @clear="onSearchGoods"
+            @keyup.enter="onSearchGoods"
+          />
         </div>
         <div class="query-item">
-          <Cascader v-model="category" placeholder="请选择商品分类" style="width: 150px" :data="cateList"></Cascader>
+          <el-cascader
+            v-model="category"
+            :options="skuList"
+            placeholder="请选择商品分类"
+            style="width: 250px"
+            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 >
-        <Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="[3,3]">
-
-          <div class="wap-content-item" :class="{ active: item.selected }" @click="checkedGoods(item, index)" v-for="(item, index) in goodsData" :key="index">
+      <div>
+        <div class="wap-content-list">
+          <div
+            class="wap-content-item"
+            :class="{ active: item.selected }"
+            @click="checkedGoods(item, index)"
+            v-for="(item, index) in goodsData"
+            :key="index"
+          >
             <div>
               <img :src="item.thumbnail" alt="" />
             </div>
             <div class="wap-content-desc">
               <div class="wap-content-desc-title">{{ item.goodsName }}</div>
-              <div class="wap-sku">{{ item.goodsUnit }}</div>
-              <div class="wap-sku"><Tag :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>
-        </Scroll>
-
+        </div>
+        <el-pagination
+          v-model:current-page="goodsParams.pageNumber"
+          class="pageration"
+          :total="total"
+          :page-size="goodsParams.pageSize"
+          layout="total, prev, pager, next"
+          size="small"
+          @current-change="changePageSize"
+        />
       </div>
     </div>
   </div>
@@ -45,33 +76,29 @@ export default {
   props: {
     selectedWay: {
       type: Array,
-      default: () => {
-        return [];
-      },
+      default: () => [],
     },
   },
   data() {
     return {
-      type: "multiple", //单选或者多选 single  multiple
-
-      cateList: [], // 商品分类列表
-      total: "", // 商品总数
+      type: "multiple",
+      skuList: [],
+      total: 0,
       goodsParams: {
-        // 请求商品列表参数
         pageNumber: 1,
-        pageSize: 18,
+        pageSize: 15,
         order: "desc",
         goodsName: "",
         sn: "",
         categoryPath: "",
         marketEnable: "UPPER",
         authFlag: "PASS",
-        sort:"createTime"
+        sort: "createTime",
       },
-      category: [], // 选中的商品分类
-      goodsData: [], // 商品列表
-      empty: false, // 是否空数据
-      loading: false, // 商品加载loading
+      category: [],
+      goodsData: [],
+      empty: false,
+      loading: false,
     };
   },
   watch: {
@@ -79,16 +106,17 @@ export default {
       this.goodsParams.categoryPath = val[2];
     },
     selectedWay: {
-      handler(val) {
+      handler() {
         this.$emit("selected", this.selectedWay);
       },
       deep: true,
       immediate: true,
     },
     "goodsParams.categoryPath": {
-      handler: function () {
+      handler() {
         this.goodsData = [];
-        (this.goodsParams.pageNumber = 0), this.getQueryGoodsList();
+        this.goodsParams.pageNumber = 1;
+        this.getQueryGoodsList();
       },
       deep: true,
     },
@@ -97,106 +125,82 @@ export default {
     this.init();
   },
   methods: {
-    handleReachBottom() {
-      // 页面触底触发加载
-      setTimeout(() => {
-        if (
-          this.goodsParams.pageNumber * this.goodsParams.pageSize <=
-          this.total
-        ) {
-          this.goodsParams.pageNumber++;
-          this.getQueryGoodsList();
-        }
-      }, 1500);
+    onSearchGoods() {
+      this.goodsData = [];
+      this.goodsParams.pageNumber = 1;
+      this.getQueryGoodsList();
+    },
+    changePageSize(v) {
+      this.goodsParams.pageNumber = v;
+      this.getQueryGoodsList();
     },
     getQueryGoodsList() {
-      // 根据商品分类筛选商品
-      API_Goods.getGoodsSkuData(this.goodsParams).then((res) => {
-        this.initGoods(res);
-      });
+      this.loading = true;
+      API_Goods.getGoodsSkuData(this.goodsParams)
+        .then((res) => {
+          this.initGoods(res);
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
-
     initGoods(res) {
-      // 获取商品列表
       if (res.result.records.length != 0) {
-        let data = res.result.records;
-        data.forEach((item) => {
+        res.result.records.forEach((item) => {
           item.selected = false;
-          item.___type = "goods"; //设置为goods让pc wap知道标识
-
+          item.___type = "goods";
           this.selectedWay.forEach((e) => {
-            if (e.id === item.id) {
+            if (e.id && e.id === item.id) {
               item.selected = true;
             }
           });
         });
-        /**
-         * 解决数据请求中，滚动栏会一直上下跳动
-         */
         this.total = res.result.total;
-        this.goodsData.push(...res.result.records);
+        this.goodsData = res.result.records;
+        this.empty = false;
       } else {
+        this.goodsData = [];
         this.empty = true;
       }
     },
-
-    // 查询商品
     init() {
-      Promise.all([
-        API_Goods.getGoodsSkuData(this.goodsParams),
-        API_Goods.getGoodsCategoryAll(0),
-      ]).then((res) => {
-        // 商品
-        this.initGoods(res[0]);
-
-        // 分类
-        if (res[1].result) {
-          this.deepGroup(res[1].result);
+      API_Goods.getGoodsSkuData(this.goodsParams).then((res) => {
+        this.initGoods(res);
+      });
+      API_Goods.getGoodsCategoryAll(0).then((res) => {
+        if (res.result) {
+          this.deepGroup(res.result);
         }
       });
     },
-
     deepGroup(val) {
       val.forEach((item) => {
-        let childWay = []; //第二级
-        // 第二层
+        let childWay = [];
         if (item.children) {
           item.children.forEach((child) => {
-            // // 第三层
             if (child.children) {
               child.children.forEach((grandson, index, arr) => {
                 arr[index] = {
                   value: grandson.id,
                   label: grandson.name,
-                  children: "",
                 };
               });
             }
-            let children = {
+            childWay.push({
               value: child.id,
               label: child.name,
               children: child.children,
-            };
-            childWay.push(children);
+            });
           });
         }
-
-        // 第一层
-        let way = {
+        this.skuList.push({
           value: item.id,
           label: item.name,
           children: childWay,
-        };
-
-        this.cateList.push(way);
+        });
       });
     },
-
-    /**
-     * 点击商品
-     */
-    checkedGoods(val, index) {
-      // 如果单选的话
+    checkedGoods(val) {
       if (this.type != "multiple") {
         this.goodsData.forEach((item) => {
           item.selected = false;
@@ -204,10 +208,8 @@ export default {
         this.selectedWay = [];
         val.selected = true;
         this.selectedWay.push(val);
-
         return false;
       }
-
       if (val.selected == false) {
         val.selected = true;
         this.selectedWay.push(val);
@@ -239,17 +241,27 @@ export default {
   padding: 0;
 }
 .wap-content-list {
+  display: flex;
   position: relative;
+  flex-wrap: wrap;
+  height: 340px;
 }
 .wap-content-item {
   width: 210px;
   margin: 10px 7px;
   padding: 6px 0;
 }
-
 .active {
   background: url("../../assets/selected.png") no-repeat;
   background-position: right;
   background-size: 10%;
 }
+.loading-mask {
+  position: absolute;
+  inset: 0;
+}
+.pageration {
+  margin-top: 12px;
+  justify-content: flex-end;
+}
 </style>
diff --git a/seller/src/views/lili-dialog/index.vue b/seller/src/views/lili-dialog/index.vue
index c2966eb1..06c6b90b 100755
--- a/seller/src/views/lili-dialog/index.vue
+++ b/seller/src/views/lili-dialog/index.vue
@@ -1,26 +1,40 @@
 <template>
-  <Modal
-    :title="title"
-    :styles="{ top: '120px' }"
-    width="750"
-    @on-cancel="clickClose"
-    @on-ok="clickOK"
+  <el-dialog
     v-model="flag"
-    :mask-closable="false"
-    scrollable
+    width="1160px"
+    top="120px"
+    :z-index="10000"
+    :close-on-click-modal="false"
+    append-to-body
+    destroy-on-close
+    @close="clickClose"
   >
-    <goodsDialog
-      @selected="(val) => {goodsData = val;}"
-      :selectedWay='goodsData'
-      ref="goodsDialog"
-      v-if="goodsFlag"
-    />
-    <linkDialog
-      @selectedLink="(val) => {linkData = val;}"
-      v-else
-      class="linkDialog"
-    />
-  </Modal>
+    <template v-if="flag">
+      <goodsDialog
+        @selected="
+          (val) => {
+            goodsData = val;
+          }
+        "
+        v-if="goodsFlag"
+        ref="goodsDialog"
+        :selectedWay="goodsData"
+      />
+      <linkDialog
+        @selectedLink="
+          (val) => {
+            linkData = val;
+          }
+        "
+        v-else
+        class="linkDialog"
+      />
+    </template>
+    <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";
@@ -32,31 +46,29 @@ export default {
   },
   data() {
     return {
-      title: "选择", // 模态框标题
-      goodsFlag: false, // 是否商品选择器
-      goodsData: [], //选择的商品
-      linkData: "", //选择的链接
-      flag: false, // 控制模态框显隐
+      goodsFlag: false,
+      goodsData: [],
+      linkData: "",
+      flag: false,
     };
   },
   methods: {
-    // 关闭弹窗
+    clearGoodsSelected() {
+      this.goodsData = [];
+    },
     clickClose() {
       this.$emit("closeFlag", false);
       this.goodsFlag = false;
     },
-
-    // 单选商品
-    singleGoods(){
+    singleGoods() {
       var timer = setInterval(() => {
         if (this.$refs.goodsDialog) {
-
           this.$refs.goodsDialog.type = "single";
-         clearInterval(timer);
+          clearInterval(timer);
         }
       }, 100);
     },
-    clickOK() { // 确定按钮回调，
+    clickOK() {
       if (this.goodsFlag) {
         this.$emit("selectedGoodsData", this.goodsData);
       } else {
@@ -64,27 +76,25 @@ export default {
       }
       this.clickClose();
     },
-    open (type) { // 父组件通过ref调用，打开商品选择器
+    open(type, mutiple) {
       this.flag = true;
-      if(type == 'goods'){
+      if (type == "goods") {
         this.goodsFlag = true;
+        if (mutiple) {
+          this.singleGoods();
+        }
       } else {
-        this.goodsFlag = false
+        this.goodsFlag = false;
       }
-
     },
-    close(){ // 关闭组件
+    close() {
       this.flag = false;
-    }
+    },
   },
 };
 </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/seller/src/views/lili-dialog/link-dialog.vue b/seller/src/views/lili-dialog/link-dialog.vue
index 572d67a8..9a083cae 100755
--- a/seller/src/views/lili-dialog/link-dialog.vue
+++ b/seller/src/views/lili-dialog/link-dialog.vue
@@ -1,17 +1,23 @@
 <template>
   <div class="wrapper">
-
-    <Tabs :value="wap[0].title" class="tabs">
-
-      <TabPane :label="item.title" :name="item.title" @click="clickTag(item, i)" v-for="(item, i) in wap" :key="i">
-        <component ref="lili-component" :is="templateWay[item.name]" @selected="
-          (val) => {
-            changed = val;
-          }
-        " />
-      </TabPane>
-    </Tabs>
-
+    <el-tabs v-model="activeTab" class="tabs">
+      <el-tab-pane
+        :label="item.title"
+        :name="item.title"
+        v-for="(item, i) in wap"
+        :key="i"
+      >
+        <component
+          ref="lili-component"
+          :is="templateWay[item.name]"
+          @selected="
+            (val) => {
+              changed = val;
+            }
+          "
+        />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 <script>
@@ -22,33 +28,38 @@ export default {
   components: {
     goodsDialog,
   },
+  setup() {
+    return { templateWay };
+  },
   data() {
     return {
-      templateWay, // 模板数据
-      changed: "", // 变更模板
-      selected: 0, // 已选数据
-      selectedLink: "", //选中的链接
-      wap  // tab标签
+      changed: "",
+      selected: 0,
+      selectedLink: "",
+      wap,
+      activeTab: wap[0]?.title || "",
     };
   },
   watch: {
     changed: {
       handler(val) {
-        this.$emit("selectedLink", val[0]); //因为是单选，所以直接返回第一个
+        this.$emit("selectedLink", val[0]);
       },
       deep: true,
     },
   },
   mounted() {
     this.$nextTick(() => {
-      this.$refs["lili-component"][0].type = "single"; //商品页面设置成为单选
+      if (this.$refs["lili-component"]?.[0]) {
+        this.$refs["lili-component"][0].type = "single";
+      }
     });
-
     this.wap.forEach((item) => {
-      item.selected = false;
+      if (item) {
+        item.selected = false;
+      }
     });
   },
-  methods: {},
 };
 </script>
 <style scoped lang="scss">
@@ -63,14 +74,8 @@ export default {
 .tabs {
   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/seller/src/views/lili-dialog/style.scss b/seller/src/views/lili-dialog/style.scss
index c1dac8d9..35d4f11d 100755
--- a/seller/src/views/lili-dialog/style.scss
+++ b/seller/src/views/lili-dialog/style.scss
@@ -1,101 +1,101 @@
 .wrapper {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    .wap-list {
-        flex: 2;
-        text-align: center;
-        overflow-y: auto;
-        height: 100%;
-    }
-    > .wap-list,
-    .wap-content {
-        padding: 8px;
-    }
-    .wap-content {
-        flex: 8;
-    }
-}
-.wap-sku {
-    font-size: 12px;
-    color: #999;
-    overflow: hidden;
+  width: 100%;
+  height: 100%;
+  display: flex;
 
-    text-overflow: ellipsis;
-
-    white-space: nowrap;
-}
-.query-wrapper {
-    display: flex;
-    margin: 8px 0;
-    > .query-item {
-        display: flex;
-        align-items: center;
-        > * {
-            margin: 0 4px;
-        }
-    }
-}
-::v-deep .ivu-scroll-container {
-    width: 100% !important;
-    height: 400px !important;
-}
-::v-deep .ivu-scroll-content {
-    /* */
-    display: flex;
-    flex-wrap: wrap;
-}
-.wap-content-list {
+  .wap-list {
+    flex: 2;
+    text-align: center;
     overflow-y: auto;
-}
-.wap-item {
-    padding: 10px 0;
-    cursor: pointer;
-}
-.wap-item:hover {
-    background: #ededed;
-}
-.active{
-    background: #ededed;
-}
-.active {
-    border: 1px solid #ededed;
-}
-.wap-content-item {
-    cursor: pointer;
+    height: 100%;
+  }
 
+  > .wap-list,
+  .wap-content {
+    flex: 8;
+  }
+}
+
+.wap-sku {
+  font-size: 12px;
+  color: #999;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.query-wrapper {
+  display: flex;
+  margin: 8px 0;
+
+  > .query-item {
     display: flex;
-    height: 100px;
-    padding: 2px;
-    overflow: hidden;
     align-items: center;
-    margin: 10px;
-    ::v-deep img {
-        width: 60px;
-        height: 60px;
-        text-align: center;
-    }
-    .wap-content-desc {
-        width: 180px;
-        padding: 8px;
-        > .wap-content-desc-title {
-            display: -webkit-box;
-            font-size: 12px;
-            color: #666;
 
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            -webkit-line-clamp: 2;
-        }
-        > .wap-content-desc-bottom {
-            font-size: 12px;
-            padding: 4px 0;
-            color: #999;
-            display: flex;
-            justify-content: space-between;
-            > div:nth-of-type(1) {
-                color: $theme_color;
-            }
-        }
+    > * {
+      margin: 0 4px;
     }
+  }
+}
+
+.wap-content-list {
+  overflow-y: auto;
+}
+
+.wap-item {
+  padding: 10px 0;
+  cursor: pointer;
+}
+
+.wap-item:hover {
+  background: #ededed;
+}
+
+.pageration {
+  text-align: right;
+  padding-right: 20px;
+}
+
+.wap-content-item {
+  cursor: pointer;
+  display: flex;
+  height: 90px;
+  padding: 2px;
+  overflow: hidden;
+  align-items: center;
+  margin: 10px;
+
+  :deep(img) {
+    width: 60px;
+    height: 60px;
+    text-align: center;
+  }
+
+  .wap-content-desc {
+    width: 180px;
+    padding: 8px;
+
+    > .wap-content-desc-title {
+      display: -webkit-box;
+      font-size: 12px;
+      color: #666;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+    }
+
+    > .wap-content-desc-bottom {
+      font-size: 12px;
+      padding: 4px 0;
+      color: #999;
+      display: flex;
+      justify-content: space-between;
+
+      > div:nth-of-type(1) {
+        color: $theme_color;
+      }
+    }
+  }
 }
diff --git a/seller/src/views/lili-dialog/template/category.vue b/seller/src/views/lili-dialog/template/category.vue
index 0c2f0eed..c2cd0837 100644
--- a/seller/src/views/lili-dialog/template/category.vue
+++ b/seller/src/views/lili-dialog/template/category.vue
@@ -117,5 +117,6 @@ export default {
 }
 .wrapper {
   overflow: hidden;
+  display: flex;
 }
 </style>
diff --git a/seller/src/views/lili-dialog/template/index.js b/seller/src/views/lili-dialog/template/index.js
index 6afe1fff..92796028 100644
--- a/seller/src/views/lili-dialog/template/index.js
+++ b/seller/src/views/lili-dialog/template/index.js
@@ -1,15 +1,12 @@
+import { markRaw } from "vue";
+import category from "./category.vue";
+import pages from "./pages.vue";
+import goods from "../goods-dialog.vue";
+import other from "./other.vue";
 
-import category from './category.vue'
-import shops from './shops.vue'
-
-import pages from './pages.vue'
-import goods from '../goods-dialog.vue'
-import other from './other.vue'
 export default {
-  // pages,
-
-  // shops,
-  category,
-  goods,
-  other,
-}
+  category: markRaw(category),
+  goods: markRaw(goods),
+  other: markRaw(other),
+  pages: markRaw(pages),
+};
diff --git a/seller/src/views/lili-dialog/template/other.vue b/seller/src/views/lili-dialog/template/other.vue
index c1e1c411..b6071722 100644
--- a/seller/src/views/lili-dialog/template/other.vue
+++ b/seller/src/views/lili-dialog/template/other.vue
@@ -1,116 +1,108 @@
 <template>
   <div>
-    <Row :gutter="30">
-      <Col span="6" 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)">
-          <Icon size="24" :type="item.icon" />
-          <p>{{item.title}}</p>
-        </div>
-      </Col>
-      <!-- 外部链接，只有pc端跳转 -->
-      <Col span="6" v-if="$route.name === 'renovation'">
-        <div class="card" :class="{'active':selectedIndex == linkList.length}" @click="handleLink(linkItem,linkList.length)">
-          <Poptip v-model="linkVisible">
-              <Icon size="24" :type="linkItem.icon" />
-              <p>{{linkItem.title}}</p>
-              <div slot="title">链接地址</div>
-              <div slot="content">
-                  <Input type="text" @keyup="handleLink(linkItem,linkList.length)" v-model="linkItem.url" placeholder="https://"></Input>
+    <el-row :gutter="30">
+      <template v-for="(item, index) in linkList" :key="index">
+        <el-col v-if="showLinkItem(item)" :span="6">
+          <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="6">
+        <div
+          class="card"
+          :class="{ active: selectedIndex == linkList.length }"
+          @click="handleLink(linkItem, linkList.length)"
+        >
+          <el-popover v-model:visible="linkPopoverVisible" trigger="click" placement="top" :width="280">
+            <template #reference>
+              <div class="link-card-inner">
+                <el-icon :size="24">
+                  <component :is="linkItem.icon" />
+                </el-icon>
+                <p>{{ linkItem.title }}</p>
               </div>
-          </Poptip>
-
+            </template>
+            <div>
+              <div style="margin-bottom: 8px">链接地址</div>
+              <el-input
+                v-model="linkItem.url"
+                placeholder="https://"
+                @keyup.enter="handleLink(linkItem, linkList.length)"
+              />
+            </div>
+          </el-popover>
         </div>
-      </Col>
-    </Row>
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script>
+import { markRaw } from "vue";
+import {
+  House,
+  ShoppingCart,
+  Star,
+  Document,
+  User,
+  Promotion,
+  PriceTag,
+  Sunny,
+  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",
-        },
-
+      linkList: [
+        { 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(Share), ___type: "kanjia" },
+        { title: "积分商城", icon: markRaw(ShoppingBag), ___type: "point" },
       ],
       linkItem: {
         title: "外部链接",
-        icon: "ios-link",
+        icon: markRaw(Link),
         ___type: "link",
-        url: ''
+        url: "",
       },
-      linkVisible: false, // 是否显示外部链接
-      selectedIndex: 9999999, // 已选index
+      linkVisible: false,
+      linkPopoverVisible: false,
+      selectedIndex: 9999999,
     };
   },
   methods: {
+    showLinkItem(item) {
+      return (
+        (item.title !== "拼团频道" && item.title !== "签到") ||
+        this.$route.name !== "renovation"
+      );
+    },
     handleLink(val, index) {
-      val = {...val,___type:'other'}
+      val = { ...val, ___type: "other" };
       this.selectedIndex = index;
       if (index === this.linkList.length) {
-        this.linkVisible = true
+        this.linkPopoverVisible = true;
       } else {
-        this.linkVisible = false
+        this.linkPopoverVisible = false;
       }
-      this.$emit("selected",[val])
+      this.$emit("selected", [val]);
     },
   },
 };
@@ -127,13 +119,19 @@ export default {
   text-align: center;
   transition: 0.35s;
   cursor: pointer;
-  ::v-deep p {
+  border: 1px solid #ededed;
+  :deep(p) {
     margin: 10px 0;
   }
-  border: 1px solid #ededed;
 }
-.card:hover{
-   background: #ededed;
+.link-card-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.card:hover {
+  background: #ededed;
 }
 .active {
   background: #ededed;
diff --git a/seller/src/views/lili-dialog/template/pages.vue b/seller/src/views/lili-dialog/template/pages.vue
index dd2908e0..8e380737 100644
--- a/seller/src/views/lili-dialog/template/pages.vue
+++ b/seller/src/views/lili-dialog/template/pages.vue
@@ -33,13 +33,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-::v-deep .ivu-card-body {
+:deep(.el-card__body) {
   height: 414px;
   overflow: auto;
 }
-.ivu-table-wrapper ivu-table-wrapper-with-border {
-  height: 300px !important;
-}
 .list {
   margin: 0 1.5%;
   height: 400px;
@@ -69,11 +66,11 @@ export default {
   height: 416px;
   overflow: hidden;
 }
-::v-deep .ivu-table {
+:deep(.el-table) {
   height: 300px !important;
   overflow: auto;
 }
-::v-deep .ivu-card-body {
+:deep(.el-card__body) {
   padding: 0;
   height: auto;
 }
diff --git a/seller/src/views/lili-dialog/template/shops.vue b/seller/src/views/lili-dialog/template/shops.vue
index fae0ad50..09d976ab 100644
--- a/seller/src/views/lili-dialog/template/shops.vue
+++ b/seller/src/views/lili-dialog/template/shops.vue
@@ -4,29 +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>
-        <Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="23">
-          <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>
-        </Scroll>
+        </div>
+        <el-pagination
+          class="pageration"
+          size="small"
+          layout="total, prev, pager, next, jumper"
+          :total="total"
+          :page-size="params.pageSize"
+          :current-page="params.pageNumber"
+          @current-change="changePageSize"
+        />
       </div>
     </div>
   </div>
@@ -36,45 +61,39 @@ import { getShopListData } from "@/api/shops.js";
 export default {
   data() {
     return {
-      loading: false, // 加载状态
-      total: "", // 总数
-      params: { // 请求参数
+      loading: false,
+      total: 0,
+      params: {
         pageNumber: 1,
-        pageSize: 10,
+        pageSize: 12,
         storeDisable: "OPEN",
         storeName: "",
       },
-      shopsData: [], // 店铺数据
-      selected: 9999999999, //设置一个不可能选中的index
+      shopsData: [],
+      selected: 9999999999,
     };
   },
-  watch: {},
-
   created() {
     this.init();
   },
   methods: {
-    handleReachBottom() {
-      setTimeout(() => {
-        if (this.params.pageNumber * this.params.pageSize <= this.total) {
-          this.params.pageNumber++;
-          this.init();
-        }
-      }, 1500);
+    resetSearch() {
+      this.shopsData = [];
+      this.params.pageNumber = 1;
+      this.init();
+    },
+    changePageSize(v) {
+      this.params.pageNumber = v;
+      this.init();
     },
     init() {
       this.loading = true;
       getShopListData(this.params).then((res) => {
         if (res.success) {
-          /**
-           * 解决数据请求中，滚动栏会一直上下跳动
-           */
           this.total = res.result.total;
-
-          this.shopsData.push(...res.result.records);
-
-          this.loading = false;
+          this.shopsData = res.result.records;
         }
+        this.loading = false;
       });
     },
     clickShop(val, i) {
@@ -95,16 +114,21 @@ export default {
   color: #999;
 }
 .wap-content-list {
+  display: flex;
   flex-wrap: wrap;
+  height: 340px;
+  min-height: 120px;
 }
 .shop-logo {
   object-fit: cover;
 }
-.wap-content-item {
-}
 .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/seller/src/views/lili-dialog/wap.js b/seller/src/views/lili-dialog/wap.js
index e87fd6f6..ec9985f0 100644
--- a/seller/src/views/lili-dialog/wap.js
+++ b/seller/src/views/lili-dialog/wap.js
@@ -5,36 +5,34 @@ export default [
     openGoods: true,
     name: "goods"
   },
-  // {
-  //   title: "分类",
-  //   url: "1",
-  //   name: "category"
-  // },
-
-  // {
-  //   title: "活动",
-  //   url: "3",
-  //   name: "marketing"
-  // },
-  // {
-  //   title: "页面",
-  //   url: "3",
-  //   name: "pages"
-  // },
-
-  // {
-  //   title: "活动",
-  //   url: "3",
-  //   name: "marketing"
-  // },
-  // {
-  //   title: "页面",
-  //   url: "3",
-  //   name: "pages"
-  // },
+  {
+    title: "分类",
+    url: "1",
+    name: "category"
+  },
+  {
+    title: "店铺",
+    url: "2",
+    name: "shops"
+  },
+  {
+    title: "活动",
+    url: "3",
+    name: "marketing"
+  },
+  {
+    title: "文章",
+    url: "3",
+    name: "pages"
+  },
+  {
+    title: "专题",
+    url: "4",
+    name: "special"
+  },
   {
     title: "其他",
     url: "3",
     name: "other"
-  }
+  },
 ];
diff --git a/seller/src/views/login.vue b/seller/src/views/login.vue
index 62dfc6d5..37895842 100644
--- a/seller/src/views/login.vue
+++ b/seller/src/views/login.vue
@@ -1,65 +1,112 @@
 <template>
   <div class="login" @click="$refs.verify.show = false">
-    <Row type="flex" @keydown.enter.native="submitLogin">
-      <Col style="width: 368px">
-      <Header />
-      <Row style="flex-direction: column">
-        <Tabs v-model="loginType">
-          <Tab-pane label="账号密码登录" name="passwordLogin">
-            <!--账号密码登录-->
-            <Form ref="usernameLoginForm" :model="form" :rules="rules" class="form">
-              <FormItem prop="username">
-                <Input v-model="form.username" prefix="ios-contact" clearable placeholder="请输入用户名"
-                  autocomplete="off" />
-              </FormItem>
-              <FormItem prop="password">
-                <Input type="password" v-model="form.password" prefix="ios-lock" password
-                  placeholder="请输入密码" autocomplete="off" />
-              </FormItem>
-            </Form>
-            <div class="register">
-              <a @click="$router.push('forgetPassword')">忘记密码</a>
-            </div>
-          </Tab-pane>
-          <Tab-pane label="验证码登录" name="mobileLogin">
-            <!-- 验证码登录 -->
-            <Form ref="formSms" :model="formSms" :rules="ruleInline" @click.self='$refs.verify.show = false'>
-              <FormItem prop="mobile">
-                <i-input type="text" maxlength="11" v-model="formSms.mobile" clearable placeholder="手机号">
-                  <Icon type="md-lock" slot="prepend"></Icon>
-                </i-input>
-              </FormItem>
-              <FormItem prop="code">
-                <i-input type="text" v-model="formSms.code" placeholder="手机验证码">
-                  <Icon type="ios-text-outline" style="font-weight: bold" slot="prepend" />
-                  <Button slot="append" @click="sendCode" :loading="sendCodeLoading">{{ codeMsg }}</Button>
-                </i-input>
-              </FormItem>
-              <FormItem>
-                <!-- <Button @click.stop="verifyBtnClick" long :type="verifyStatus ? 'success' : 'default'">{{ verifyStatus ?
-                  '验证通过' :
-                  '点击完成安全验证' }}
-                </Button> -->
-              </FormItem>
-            </Form>
-          </Tab-pane>
-        </Tabs>
-        <Row>
-          <div class="login-btn" type="primary" size="large" :loading="loading" @click="submitLogin" long>
-            <span v-if="!loading">登录</span>
-            <span v-else>登录中</span>
-          </div>
-        </Row>
-      </Row>
-      <Footer />
-      <!-- 拼图验证码 -->
-      <verify ref="verify" class="verify-con" verifyType="LOGIN" @change="verifyChange"></verify>
-      </Col>
-    </Row>
+    <el-row class="flex" @keyup.enter="submitLogin">
+      <el-col style="width: 368px">
+        <Header />
+        <el-row style="flex-direction: column">
+          <el-tabs v-model="loginType">
+            <el-tab-pane label="账号密码登录" name="passwordLogin">
+              <el-form
+                ref="usernameLoginForm"
+                :model="form"
+                :rules="rules"
+                class="form"
+              >
+                <el-form-item prop="username">
+                  <el-input
+                    v-model="form.username"
+                    size="large"
+                    clearable
+                    placeholder="请输入用户名"
+                    autocomplete="off"
+                  >
+                    <template #prefix>
+                      <el-icon><User /></el-icon>
+                    </template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item prop="password">
+                  <el-input
+                    v-model="form.password"
+                    type="password"
+                    size="large"
+                    show-password
+                    placeholder="请输入密码"
+                    autocomplete="off"
+                  >
+                    <template #prefix>
+                      <el-icon><Lock /></el-icon>
+                    </template>
+                  </el-input>
+                </el-form-item>
+              </el-form>
+              <div class="register">
+                <a @click="$router.push('forgetPassword')">忘记密码</a>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="验证码登录" name="mobileLogin">
+              <el-form
+                ref="formSms"
+                :model="formSms"
+                :rules="ruleInline"
+                @click.self="$refs.verify.show = false"
+              >
+                <el-form-item prop="mobile">
+                  <el-input
+                    v-model="formSms.mobile"
+                    maxlength="11"
+                    clearable
+                    placeholder="手机号"
+                  >
+                    <template #prepend>
+                      <el-icon><Iphone /></el-icon>
+                    </template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item prop="code">
+                  <el-input v-model="formSms.code" placeholder="手机验证码">
+                    <template #prepend>
+                      <el-icon><Message /></el-icon>
+                    </template>
+                    <template #append>
+                      <el-button @click="sendCode" :loading="sendCodeLoading">
+                        {{ codeMsg }}
+                      </el-button>
+                    </template>
+                  </el-input>
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+          </el-tabs>
+          <el-row>
+            <el-button
+              class="login-btn"
+              type="primary"
+              size="large"
+              :loading="loading"
+              style="width: 100%"
+              @click="submitLogin"
+            >
+              <span v-if="!loading">登录</span>
+              <span v-else>登录中</span>
+            </el-button>
+          </el-row>
+        </el-row>
+        <verify
+          ref="verify"
+          class="verify-con"
+          verifyType="LOGIN"
+          @change="verifyChange"
+        />
+        <Footer />
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import { User, Lock, Iphone, Message } from "@element-plus/icons-vue";
+import * as RegExp from "@/utils/regular.js";
 import { sendSms } from "@/api/common.js";
 import { login, storeSmsLogin, userMsg } from "@/api/index";
 import util from "@/libs/util.js";
@@ -67,55 +114,40 @@ import Footer from "@/views/main-components/footer";
 import Header from "@/views/main-components/header";
 import verify from "@/views/my-components/verify";
 import Cookies from "js-cookie";
+
 export default {
   components: {
     Header,
     Footer,
     verify,
+    User,
+    Lock,
+    Iphone,
+    Message,
   },
   data() {
     return {
-      saveLogin: true, // 保存登录状态
-      sendCodeLoading:false,
-      loading: false, // 加载状态
-      verifyStatus: false, // 是否图片验证通过
-      time: 60, // 倒计时
-      loginType: 'passwordLogin', //登陆类型
+      saveLogin: true,
+      sendCodeLoading: false,
+      loading: false,
+      verifyStatus: false,
+      time: 60,
+      loginType: "passwordLogin",
       form: {
-        // 表单数据
         username: "",
         password: "",
         mobile: "",
         code: "",
       },
       formSms: {
-        mobile: '',
-        code: '',
+        mobile: "",
+        code: "",
       },
       rules: {
-        // 验证规则
-        username: [
-          {
-            required: true,
-            message: "账号不能为空",
-            trigger: "blur",
-          },
-        ],
-        password: [
-          {
-            required: true,
-            message: "密码不能为空",
-            trigger: "blur",
-          },
-        ],
+        username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
+        password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
       },
       ruleInline: {
-        // 验证规则
-        username: [{ required: true, message: "请输入用户名" }],
-        password: [
-          { required: true, message: "请输入密码" },
-          { type: "string", min: 6, message: "密码不能少于6位" },
-        ],
         mobile: [
           { required: true, message: "请输入手机号码" },
           {
@@ -125,28 +157,22 @@ export default {
         ],
         code: [{ required: true, message: "请输入手机验证码" }],
       },
-      codeMsg: "发送验证码", // 验证码文字
+      codeMsg: "发送验证码",
     };
   },
   created() {
     window.localStorage.setItem("menuData", "");
   },
-
   methods: {
     afterLogin(res) {
-      let accessToken = res.result.accessToken;
+      const accessToken = res.result.accessToken;
       this.setStore("accessToken", accessToken);
       this.setStore("refreshToken", res.result.refreshToken);
 
-      // 获取用户信息
       userMsg().then((res) => {
         if (res.success) {
-          // location.reload();
-          // this.$router.go(0);
-
           this.setStore("saveLogin", this.saveLogin);
           if (this.saveLogin) {
-            // 保存7天
             Cookies.set("userInfoSeller", JSON.stringify(res.result), {
               expires: 7,
             });
@@ -158,18 +184,14 @@ export default {
           this.$store.commit("setAvatarPath", res.result.storeLogo);
 
           const redirectRouter = this.$route.query.redirect;
-          // 加载菜单
-          const push = {
+          this.$router.push({
             path: redirectRouter || "/home",
-          }
-
-          this.$router.push(push);
+          });
         } else {
           this.loading = false;
         }
       });
     },
-    // 发送手机验证码
     sendCode() {
       if (this.formSms.mobile === "") {
         this.$Message.warning("请先填写手机号");
@@ -177,73 +199,71 @@ export default {
       }
       if (!this.verifyStatus) {
         this.$refs.verify.init();
-        return
+        return;
       }
       if (this.time === 60) {
-        this.sendCodeLoading = true
-        let params = {
+        this.sendCodeLoading = true;
+        const params = {
           mobile: this.formSms.mobile,
           verificationEnums: "LOGIN",
         };
-        sendSms(params).then((res) => {
-
-          if (res.success) {
-            this.$Message.success("验证码发送成功");
-            let that = this;
-            this.interval = setInterval(() => {
-              // this.sendCodeLoading = false
-              that.time--;
-              if (that.time === 0) {
-                this.sendCodeLoading = false
-                that.time = 60;
-                that.codeMsg = "重新发送";
-                that.verifyStatus = false;
-                clearInterval(that.interval);
-              } else {
-                that.codeMsg = that.time;
-              }
-            }, 1000);
-          } else {
-            this.$Message.warning(res.message);
-          }
-        }).catch(() => {
-          this.sendCodeLoading = false
-        });
+        sendSms(params)
+          .then((res) => {
+            if (res.success) {
+              this.$Message.success("验证码发送成功");
+              const that = this;
+              this.interval = setInterval(() => {
+                that.time--;
+                if (that.time === 0) {
+                  this.sendCodeLoading = false;
+                  that.time = 60;
+                  that.codeMsg = "重新发送";
+                  that.verifyStatus = false;
+                  clearInterval(that.interval);
+                } else {
+                  that.codeMsg = that.time;
+                }
+              }, 1000);
+            } else {
+              this.$Message.warning(res.message);
+            }
+          })
+          .catch(() => {
+            this.sendCodeLoading = false;
+          });
       }
     },
     submitLogin() {
-      // 登录提交
-      if (this.loginType == 'passwordLogin') {
+      if (this.loginType === "passwordLogin") {
         this.$refs.usernameLoginForm.validate((valid) => {
           if (valid) {
             this.$refs.verify.init();
           }
         });
-      } else if (this.loginType == 'mobileLogin') {
-        this.$refs['formSms'].validate((valid) => {
+      } else if (this.loginType === "mobileLogin") {
+        this.$refs.formSms.validate((valid) => {
           if (valid) {
             this.loading = true;
-
-            storeSmsLogin(this.formSms).then(res => {
-              this.loading = false;
-
-              if (res.success) {
-                this.afterLogin(res)
-              }
-            }).catch(() => {
-              this.loading = false;
-            })
+            storeSmsLogin(this.formSms)
+              .then((res) => {
+                this.loading = false;
+                if (res.success) {
+                  this.afterLogin(res);
+                }
+              })
+              .catch(() => {
+                this.loading = false;
+              });
           }
-        })
+        });
       }
     },
     verifyChange(con) {
-      // 拼图验证码回显
       if (!con.status) return;
 
-      if (this.loginType == 'passwordLogin') {
+      if (this.loginType === "passwordLogin") {
         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)
@@ -258,22 +278,15 @@ export default {
           });
       } else {
         this.verifyStatus = true;
-
-        this.sendCode()
+        this.sendCode();
       }
 
       this.$refs.verify.show = false;
     },
-
-    // 开启滑块验证
-    verifyBtnClick() {
-      if (!this.verifyStatus) {
-        this.$refs.verify.init();
-      }
-    },
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .login {
   height: 100%;
@@ -299,22 +312,24 @@ 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;
   }
 
+  .register {
+    text-align: right;
+    margin-bottom: 12px;
+    a {
+      color: $theme_color;
+      cursor: pointer;
+    }
+  }
+}
+
+.flex {
+  justify-content: center;
 }
 </style>
diff --git a/seller/src/views/main-components/config-drawer.vue b/seller/src/views/main-components/config-drawer.vue
index cc350556..be5b77d6 100644
--- a/seller/src/views/main-components/config-drawer.vue
+++ b/seller/src/views/main-components/config-drawer.vue
@@ -1,64 +1,55 @@
 <template>
   <div>
-    <Drawer width="300px" title="页面配置"  v-model="drawer">
-      <!-- 内容 -->
-      <h3>
-        内容设置
-      </h3>
+    <el-drawer v-model="drawer" title="页面配置" size="300px">
+      <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>
+          <el-tooltip
+            placement="bottom-end"
+            content="关闭之后部分页面点击'查看''详情'等按钮将跳到新页面展示"
+          >
+            <div>多标签Tab页内嵌模式</div>
+          </el-tooltip>
         </div>
-        <i-switch v-model="setting.isUseTabsRouter"></i-switch>
+        <el-switch v-model="setting.isUseTabsRouter" />
       </div>
-    </Drawer>
+    </el-drawer>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from "vuex";
+
 export default {
   name: "configDrawer",
   data() {
     return {
       drawer: false,
-
     };
   },
   computed: {
     ...mapState({
-      setting: state => {
-        return state.setting.setting
-      }
-    })
+      setting: (state) => state.setting.setting,
+    }),
   },
   watch: {
     setting: {
       handler(val) {
-        this.setStore('setting', val)
-        this.$store.commit('updateSetting', val);
+        this.setStore("setting", val);
+        this.$store.commit("updateSetting", val);
       },
-      deep: true
-    }
-  },
-  mounted() {
+      deep: true,
+    },
   },
   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>
diff --git a/seller/src/views/main-components/footer.vue b/seller/src/views/main-components/footer.vue
index 97045a5a..acd3b2e4 100644
--- a/seller/src/views/main-components/footer.vue
+++ b/seller/src/views/main-components/footer.vue
@@ -1,11 +1,11 @@
 <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"
@@ -14,18 +14,17 @@
         style="margin: 0 5px"
         >{{ config.title }}</a
       >
-    </Row>
+    </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/seller/src/views/main-components/fullscreen.vue b/seller/src/views/main-components/fullscreen.vue
index 63c3a1dd..ba0014df 100644
--- a/seller/src/views/main-components/fullscreen.vue
+++ b/seller/src/views/main-components/fullscreen.vue
@@ -1,29 +1,40 @@
 <template>
-    <div @click="handleChange" v-if="showFullScreenBtn" class="full-screen-btn-con">
-        <Tooltip :content="value ? '退出全屏' : '全屏'" placement="bottom">
-            <Icon :type="value ? 'ios-contract' : 'ios-expand'" :size="24"></Icon>
-        </Tooltip>
-    </div>
+  <div v-if="showFullScreenBtn" @click="handleChange" class="full-screen-btn-con">
+    <el-tooltip :content="modelValue ? '退出全屏' : '全屏'" placement="bottom">
+      <el-icon :size="24">
+        <ScaleToOriginal v-if="modelValue" />
+        <FullScreen v-else />
+      </el-icon>
+    </el-tooltip>
+  </div>
 </template>
 
 <script>
+import { FullScreen, ScaleToOriginal } from "@element-plus/icons-vue";
+
 export default {
   name: "fullScreen",
+  components: { FullScreen, ScaleToOriginal },
   props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
     value: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
+  emits: ["update:modelValue", "input", "on-change"],
   computed: {
     showFullScreenBtn() {
       return window.navigator.userAgent.indexOf("MSIE") < 0;
-    }
+    },
   },
   methods: {
     handleFullscreen() {
-      let main = document.body;
-      if (this.value) {
+      const main = document.body;
+      if (this.modelValue) {
         if (document.exitFullscreen) {
           document.exitFullscreen();
         } else if (document.mozCancelFullScreen) {
@@ -47,34 +58,44 @@ export default {
     },
     handleChange() {
       this.handleFullscreen();
-    }
+    },
+    emitFullscreenState(isFullscreen) {
+      this.$emit("update:modelValue", isFullscreen);
+      this.$emit("input", isFullscreen);
+      this.$emit("on-change", isFullscreen);
+    },
+    onFullscreenChange() {
+      const isFullscreen = !!(
+        document.fullscreenElement ||
+        document.mozFullScreenElement ||
+        document.webkitFullscreenElement ||
+        document.fullScreen ||
+        document.mozFullScreen ||
+        document.webkitIsFullScreen
+      );
+      this.emitFullscreenState(isFullscreen);
+    },
   },
   created() {
-    let isFullscreen =
+    const isFullscreen = !!(
       document.fullscreenElement ||
       document.mozFullScreenElement ||
       document.webkitFullscreenElement ||
       document.fullScreen ||
       document.mozFullScreen ||
-      document.webkitIsFullScreen;
-    isFullscreen = !!isFullscreen;
-    document.addEventListener("fullscreenchange", () => {
-      this.$emit("input", !this.value);
-      this.$emit("on-change", !this.value);
-    });
-    document.addEventListener("mozfullscreenchange", () => {
-      this.$emit("input", !this.value);
-      this.$emit("on-change", !this.value);
-    });
-    document.addEventListener("webkitfullscreenchange", () => {
-      this.$emit("input", !this.value);
-      this.$emit("on-change", !this.value);
-    });
-    document.addEventListener("msfullscreenchange", () => {
-      this.$emit("input", !this.value);
-      this.$emit("on-change", !this.value);
-    });
-    this.$emit("input", isFullscreen);
-  }
+      document.webkitIsFullScreen
+    );
+    this.emitFullscreenState(isFullscreen);
+    document.addEventListener("fullscreenchange", this.onFullscreenChange);
+    document.addEventListener("mozfullscreenchange", this.onFullscreenChange);
+    document.addEventListener("webkitfullscreenchange", this.onFullscreenChange);
+    document.addEventListener("msfullscreenchange", this.onFullscreenChange);
+  },
+  beforeUnmount() {
+    document.removeEventListener("fullscreenchange", this.onFullscreenChange);
+    document.removeEventListener("mozfullscreenchange", this.onFullscreenChange);
+    document.removeEventListener("webkitfullscreenchange", this.onFullscreenChange);
+    document.removeEventListener("msfullscreenchange", this.onFullscreenChange);
+  },
 };
 </script>
diff --git a/seller/src/views/main-components/header.vue b/seller/src/views/main-components/header.vue
index 3a8a18d1..e931d795 100644
--- a/seller/src/views/main-components/header.vue
+++ b/seller/src/views/main-components/header.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
-    <Row class="header">
+    <el-row class="header">
       <img class="logo" :src="storeSideLogo" />
-    </Row>
+    </el-row>
   </div>
 </template>
 
 <script>
 import { getBaseSite } from "@/api/common.js";
+
 export default {
-  // name: "header",
   data() {
     return {
       storeSideLogo: require("@/assets/logo.png"),
@@ -24,53 +24,39 @@ export default {
         !localStorage.getItem("seller_expiration_time")
       ) {
         this.getSite();
+      } else if (new Date() > localStorage.getItem("seller_expiration_time")) {
+        this.getSite();
       } else {
-        // 如果缓存过期，则获取最新的信息
-        if (new Date() > localStorage.getItem("seller_expiration_time")) {
-          this.getSite();
-          return;
-        } else {
-          this.storeSideLogo = localStorage.getItem("sellerlogoImg");
-          window.document.title = localStorage.getItem("sellersiteName");
-          //动态获取icon
-          let link =
-            document.querySelector("link[rel*='icon']") ||
-            document.createElement("link");
-          link.type = "image/x-icon";
-          link.href = localStorage.getItem("sellerIconImg");
-          link.rel = "shortcut icon";
-          document.getElementsByTagName("head")[0].appendChild(link);
-        }
+        this.storeSideLogo = localStorage.getItem("sellerlogoImg");
+        window.document.title = localStorage.getItem("sellersiteName");
+        this.applyFavicon(localStorage.getItem("sellerIconImg"));
       }
     },
+    applyFavicon(href) {
+      const 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() {
-      //获取基本站点信息
       getBaseSite().then((res) => {
         if (res.success && res.result.settingValue) {
-          let data = JSON.parse(res.result.settingValue);
-          // 过期时间
-          var expirationTime = new Date().setHours(new Date().getHours() + 1);
-          // 存放过期时间
+          const data = JSON.parse(res.result.settingValue);
+          const expirationTime = new Date().setHours(new Date().getHours() + 1);
           localStorage.setItem("seller_expiration_time", expirationTime);
-          // 存放信息
           localStorage.setItem("sellersiteName", data.siteName);
           localStorage.setItem("sellerlogoImg", data.storeSideLogo);
           localStorage.setItem("sellerIconImg", data.storeSideIcon);
-          console.log(data, "datadadada");
+          this.storeSideLogo = data.storeSideLogo;
           window.document.title = data.siteName;
-          //动态获取icon
-          let link =
-            document.querySelector("link[rel*='icon']") ||
-            document.createElement("link");
-          link.type = "image/x-icon";
-          link.href = data.storeSideIcon;
-          link.rel = "shortcut icon";
-          document.getElementsByTagName("head")[0].appendChild(link);
+          this.applyFavicon(data.storeSideIcon);
         }
       });
     },
   },
-
   mounted() {
     this.init();
   },
diff --git a/seller/src/views/main-components/message-tip.vue b/seller/src/views/main-components/message-tip.vue
index 2f5ede49..44f77baa 100644
--- a/seller/src/views/main-components/message-tip.vue
+++ b/seller/src/views/main-components/message-tip.vue
@@ -1,34 +1,41 @@
 <template>
   <div @click="showMessage" class="message-con">
-    <Tooltip :always="value>0" :content="value > 0 ? '有' + value + message : '无未读消息'" placement="bottom">
-      <Badge :count="value" dot>
-        <Icon type="md-notifications" :size="22" />
-      </Badge>
-    </Tooltip>
+    <el-tooltip
+      :visible="value > 0 ? undefined : false"
+      :content="value > 0 ? '有' + value + message : '无未读消息'"
+      placement="bottom"
+    >
+      <el-badge :value="value" :hidden="value <= 0" is-dot>
+        <el-icon :size="22"><Bell /></el-icon>
+      </el-badge>
+    </el-tooltip>
   </div>
 </template>
 
 <script>
+import { Bell } from "@element-plus/icons-vue";
 import util from "@/libs/util.js";
+
 export default {
   name: "messageTip",
+  components: { Bell },
   props: {
-    value: { // 未读消息数量
+    value: {
       type: Number,
-      default: 0
+      default: 0,
     },
-    message:{ // 消息展示内容
+    message: {
       type: String,
-      default: ""
-    }
+      default: "",
+    },
   },
   methods: {
     showMessage() {
       util.openNewPage(this, "message_index");
       this.$router.push({
-        name: "message_index"
+        name: "message_index",
       });
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/seller/src/views/main-components/shrinkable-menu/shrinkable-menu.vue b/seller/src/views/main-components/shrinkable-menu/shrinkable-menu.vue
index 1d60fb0a..4d962c7b 100644
--- a/seller/src/views/main-components/shrinkable-menu/shrinkable-menu.vue
+++ b/seller/src/views/main-components/shrinkable-menu/shrinkable-menu.vue
@@ -1,79 +1,117 @@
-<style lang="scss" scoped>
-@import "./styles/menu.scss";
-</style>
 <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="100px"
-      @on-select="changeMenu"
+  <div class="shrinkable-menu">
+    <el-menu
+      ref="sideMenu"
+      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
+      ref="childrenMenu"
+      :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>
 
 <script>
 import util from "@/libs/util.js";
+
 export default {
   name: "shrinkableMenu",
   computed: {
-
-    // 二级菜单列表
     menuList() {
       return this.$store.state.app.menuList;
     },
-    // 一级菜单
     navList() {
       return this.$store.state.app.navList;
     },
-    // 当前一级菜单
     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;
+      this.$router.push({ name });
     },
-    selectNav(name) { // 一级路由点击
-      this.$store.commit("childrenMenu",this.$refs.childrenMenu)
+    selectNav(name) {
+      this.$store.commit("childrenMenu", this.$refs.childrenMenu);
       this.$store.commit("setCurrNav", name);
       this.setStore("currNav", name);
       util.initRouter(this);
     },
-  }
+  },
 };
 </script>
+
 <style lang="scss" scoped>
-.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;
+.shrinkable-menu {
+  height: calc(100% - 60px);
+  width: 180px;
+  display: flex;
+}
+
+.nav-menu-dark {
+  width: 80px;
+  background-color: #191a23;
+  border-right: none;
+  overflow-y: auto;
+
+  :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;
+  }
+}
+
+.sub-menu {
+  width: 100px;
+  overflow-y: auto;
+  border-right: none;
+
+  :deep(.el-menu-item-group__title) {
+    height: 40px;
+    line-height: 40px;
+    padding-left: 20px;
+  }
 }
 </style>
diff --git a/seller/src/views/main-components/shrinkable-menu/styles/menu.scss b/seller/src/views/main-components/shrinkable-menu/styles/menu.scss
index c01f328d..06285774 100644
--- a/seller/src/views/main-components/shrinkable-menu/styles/menu.scss
+++ b/seller/src/views/main-components/shrinkable-menu/styles/menu.scss
@@ -1,25 +1,10 @@
-.ivu-shrinkable-menu{
+.shrinkable-menu {
   height: calc(100% - 60px);
   width: 180px;
   display: flex;
 }
 
-.ivu-btn-text:hover {
-  background-color: rgba(255,255,255,.2) !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{
-  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: #ed3f14;
-}
-::v-deep .ivu-menu-vertical .ivu-menu-item-group-title{
+:deep(.el-menu-item-group__title) {
   height: 40px;
   line-height: 40px;
   padding-left: 20px;
diff --git a/seller/src/views/main-components/tags-page-opened.vue b/seller/src/views/main-components/tags-page-opened.vue
index baa31e0e..454097e6 100644
--- a/seller/src/views/main-components/tags-page-opened.vue
+++ b/seller/src/views/main-components/tags-page-opened.vue
@@ -1,33 +1,42 @@
-<style lang="scss" scoped>
-@import "../main.scss";
-</style>
-
 <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>
@@ -35,218 +44,149 @@
 <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;
-      }
-    }
+      default: () => true,
+    },
+  },
+  data() {
+    return {
+      currentPageName: this.$route.name,
+      tagBodyLeft: 0,
+      visible: false,
+      contextMenuLeft: 0,
+      contextMenuTop: 0,
+      actionList: {
+        others: "关闭其他",
+        clearAll: "关闭所有",
+      },
+    };
   },
   computed: {
-    title() {
-      return this.$store.state.app.currentTitle;
-    },
     tagsList() {
       return this.$store.state.app.storeOpenedList;
-    }
+    },
   },
   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") {
-        return item.title;
-      } else {
+      if (typeof item.title === "object") {
         return item.title;
       }
+      return item.title;
     },
-    // 关闭页面
     closePage(event, name) {
       let storeOpenedList = this.$store.state.app.storeOpenedList;
       let lastPageObj = storeOpenedList[0];
-      if (this.currentPageName == name) {
-        let len = storeOpenedList.length;
+      if (this.currentPageName === name) {
+        const len = storeOpenedList.length;
         for (let i = 1; i < len; i++) {
-          if (storeOpenedList[i].name == name) {
-            if (i < len - 1) {
-              lastPageObj = storeOpenedList[i + 1];
-            } else {
-              lastPageObj = storeOpenedList[i - 1];
-            }
+          if (storeOpenedList[i].name === name) {
+            lastPageObj =
+              i < len - 1 ? storeOpenedList[i + 1] : storeOpenedList[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);
       storeOpenedList = this.$store.state.app.storeOpenedList;
       localStorage.storeOpenedList = JSON.stringify(storeOpenedList);
-      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 {
+      } else if (
+        this.$refs.scrollCon.offsetWidth - 100 <
+        this.$refs.scrollBody.offsetWidth
+      ) {
         if (
-          this.$refs.scrollCon.offsetWidth - 100 <
-          this.$refs.scrollBody.offsetWidth
+          this.tagBodyLeft <
+          -(this.$refs.scrollBody.offsetWidth - this.$refs.scrollCon.offsetWidth + 100)
         ) {
-          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
-            );
-          }
+          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;
     },
-    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);
       }
-    }
-  }
+    },
+  },
+  beforeUnmount() {
+    document.body.removeEventListener("click", this.closeMenu);
+  },
 };
 </script>
-<style lang="scss" scoped>
+
+<style lang="scss">
+@import "@/views/main.scss";
 .contextmenu {
   position: absolute;
   margin: 0;
@@ -255,21 +195,35 @@ export default {
   z-index: 11000;
   list-style-type: none;
   border-radius: 4px;
-   box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
   li {
     margin: 0;
     padding: 5px 15px;
     cursor: pointer;
     &:hover {
-      background: rgba($color: $theme_color, $alpha: .1);
+      background: rgba($color: $theme_color, $alpha: 0.1);
     }
   }
 }
+.page-tag {
+  margin-right: 8px;
+  cursor: pointer;
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 4px;
+  font-size: 13px;
+  transition: all 0.2s ease;
 
-.ivu-tag-primary{
-  ::v-deep .ivu-tag-dot-inner{
-    background: $theme_color !important;
+  & + .page-tag {
+    margin-left: 0;
+  }
+
+  &:hover {
+    opacity: 0.85;
+  }
+
+  .el-tag__close {
+    margin-left: 6px;
   }
 }
-
 </style>
diff --git a/seller/src/views/member/memberComment.vue b/seller/src/views/member/memberComment.vue
index 981134fd..24bf5906 100644
--- a/seller/src/views/member/memberComment.vue
+++ b/seller/src/views/member/memberComment.vue
@@ -1,64 +1,128 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" @keydown.enter.native="handleSearch" inline :label-width="70" class="search-form">
-        <Form-item label="会员名称" prop="memberName">
-          <Input type="text" v-model="searchForm.memberName" clearable placeholder="请输入会员名称" style="width: 240px" />
-        </Form-item>
-        <Form-item label="商品名称" prop="goodsName">
-          <Input type="text" v-model="searchForm.goodsName" clearable placeholder="请输入商品名" style="width: 240px" />
-        </Form-item>
-        <Form-item label="评价" prop="orderStatus">
-          <Select v-model="searchForm.grade" placeholder="请选择" clearable style="width: 240px">
-            <Option value="GOOD">好评</Option>
-            <Option value="MODERATE">中评</Option>
-            <Option value="WORSE">差评</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>
-        <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
-        <Button @click="handleReset" 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="[10, 20, 50]" 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="评价内容">
-          <span v-if="!content">暂无评价</span>
-          <span v-else>
-            <div>
-              <Input v-model="content" type="textarea" maxlength="200" disabled :rows="4" clearable style="width:90%" />
-            </div>
-          </span>
-        </FormItem>
-        <FormItem label="评价图片" style="padding-top: 10px" v-if="detailInfo.haveImage == 1">
-          <upload-pic-thumb v-model="image" :disable="true" :remove="false" :isView="true"></upload-pic-thumb>
-        </FormItem>
-        <FormItem label="回复内容" prop="reply">
-          <Input v-if="replyStatus == false" v-model="form.reply" type="textarea" maxlength="200" :rows="4" clearable style="width:90%" />
-          <span v-else>
-            <Input v-model="form.reply" type="textarea" maxlength="200" disabled :rows="4" clearable style="width:90%" />
-          </span>
-        </FormItem>
-        <FormItem label="回复图片" prop="replyImage" style="padding-top: 18px" v-if="detailInfo.haveReplyImage == 1 || replyStatus == false">
-          <upload-pic-thumb v-if="replyStatus == false" v-model="form.replyImage" :limit="5"></upload-pic-thumb>
-          <upload-pic-thumb v-else v-model="form.replyImage" :disable="true" :remove="false"></upload-pic-thumb>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button v-if="replyStatus == false" type="primary" :loading="submitLoading" @click="handleSubmit">回复
-        </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" clearable placeholder="请输入会员名称" style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="商品名称" prop="goodsName">
+          <el-input v-model="searchForm.goodsName" clearable placeholder="请输入商品名" style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="评价" prop="grade">
+          <el-select v-model="searchForm.grade" placeholder="请选择" clearable style="width: 240px">
+            <el-option label="好评" value="GOOD" />
+            <el-option label="中评" value="MODERATE" />
+            <el-option label="差评" value="WORSE" />
+          </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="结束时间"
+            style="width: 360px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+          <el-button class="search-btn" @click="handleReset">重置</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="150" show-overflow-tooltip />
+        <el-table-column prop="goodsName" label="商品名称" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="content" label="评价内容" min-width="300" show-overflow-tooltip />
+        <el-table-column label="评价" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row.grade === 'GOOD'" type="success">好评</el-tag>
+            <el-tag v-else-if="row.grade === 'MODERATE'" type="warning">中评</el-tag>
+            <el-tag v-else type="danger">差评</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row.status === 'OPEN'" type="success">展示</el-tag>
+            <el-tag v-else type="danger">隐藏</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="回复状态" width="110">
+          <template #default="{ row }">
+            <el-tag v-if="row.replyStatus" type="success">已回复</el-tag>
+            <el-tag v-else type="primary">未回复</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建日期" width="170" />
+        <el-table-column label="操作" align="center" fixed="right" width="100">
+          <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="[10, 20, 50]"
+          :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="评价内容">
+          <span v-if="!content">暂无评价</span>
+          <el-input v-else v-model="content" type="textarea" maxlength="200" disabled :rows="4" style="width: 90%" />
+        </el-form-item>
+        <el-form-item v-if="detailInfo.haveImage == 1" label="评价图片" style="padding-top: 10px">
+          <upload-pic-thumb v-model="image" :disable="true" :remove="false" :isView="true" />
+        </el-form-item>
+        <el-form-item label="回复内容" prop="reply">
+          <el-input
+            v-if="!replyStatus"
+            v-model="form.reply"
+            type="textarea"
+            maxlength="200"
+            :rows="4"
+            clearable
+            style="width: 90%"
+          />
+          <el-input v-else v-model="form.reply" type="textarea" maxlength="200" disabled :rows="4" style="width: 90%" />
+        </el-form-item>
+        <el-form-item
+          v-if="detailInfo.haveReplyImage == 1 || !replyStatus"
+          label="回复图片"
+          prop="replyImage"
+          style="padding-top: 18px"
+        >
+          <upload-pic-thumb v-if="!replyStatus" v-model="form.replyImage" :limit="5" />
+          <upload-pic-thumb v-else v-model="form.replyImage" :disable="true" :remove="false" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button v-if="!replyStatus" type="primary" :loading="submitLoading" @click="handleSubmit">回复</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -68,175 +132,74 @@ import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
 
 export default {
   name: "memberComment",
-  components: {
-    uploadPicThumb,
-  },
+  components: { uploadPicThumb },
   data() {
     return {
-      detailInfo: {}, // 详情信息
-      image: [], //评价图片
-      replyStatus: false, //回复状态
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
-      loading: true, // 表单加载状态
-      content: "", //评价内容
+      detailInfo: {},
+      image: [],
+      replyStatus: false,
+      modalVisible: false,
+      modalTitle: "",
+      loading: true,
+      content: "",
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-        startTime: "", // 起始时间
-        endTime: "", // 终止时间
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc",
+        startTime: "",
+        endTime: "",
       },
       selectDate: null,
       form: {
         replyImage: [],
         reply: "",
       },
-      // 表单验证规则
       formValidate: {
         reply: [{ required: true, message: "请输入回复内容", trigger: "blur" }],
       },
-      submitLoading: false, // 添加或编辑提交状态
-      columns: [
-        // 表头
-        {
-          title: "会员名称",
-          key: "memberName",
-          minWidth: 150,
-          tooltip: true,
-        },
-        {
-          title: "商品名称",
-          key: "goodsName",
-          minWidth: 150,
-          tooltip: true,
-        },
-        {
-          title: "评价内容",
-          key: "content",
-          minWidth: 300,
-          tooltip: true,
-        },
-        {
-          title: "评价",
-          key: "grade",
-          width: 100,
-          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: "status",
-          width: 100,
-          render: (h, params) => {
-            if (params.row.status === "OPEN") {
-              return h("Tag", { props: { color: "green" } }, "展示");
-            } else {
-              return h("Tag", { props: { color: "red" } }, "隐藏");
-            }
-          },
-        },
-        {
-          title: "回复状态",
-          key: "replyStatus",
-          width: 110,
-          render: (h, params) => {
-            if (params.row.replyStatus) {
-              return h("Tag", { props: { color: "green" } }, "已回复");
-            } else {
-              return h("Tag", { props: { color: "blue" } }, "未回复");
-            }
-          },
-        },
-
-        {
-          title: "创建日期",
-          key: "createTime",
-          width: 170,
-        },
-
-        {
-          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);
-                    },
-                  },
-                },
-                "详细"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      submitLoading: false,
+      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 = 10;
       this.getDataList();
     },
-    // 重置
     handleReset() {
-      this.searchForm = {};
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
+      this.searchForm = {
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc",
+        startTime: "",
+        endTime: "",
+      };
+      this.selectDate = null;
       this.getDataList();
     },
-    // 清除选中状态
-    clearSelectAll() {
-      this.$refs.table.selectAll(false);
-    },
-    // 选择日期回调
     selectDateRange(v) {
-      if (v) {
+      if (v && v.length === 2) {
         this.searchForm.startTime = v[0];
         this.searchForm.endTime = v[1];
+      } else {
+        this.searchForm.startTime = "";
+        this.searchForm.endTime = "";
       }
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
       API_Member.getMemberReview(this.searchForm).then((res) => {
@@ -247,7 +210,6 @@ export default {
         }
       });
     },
-    //回复
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
@@ -262,26 +224,19 @@ export default {
         }
       });
     },
-    // 获取详情
     detail(v) {
       this.form.replyImage = [];
       this.loading = true;
       API_Member.getMemberInfoReview(v.id).then((res) => {
         this.loading = false;
         if (res.success) {
-          //赋值
           this.form.id = res.result.id;
           this.content = res.result.content;
           this.form.reply = res.result.reply;
           this.replyStatus = res.result.replyStatus;
-          if (res.result.images) {
-            this.image = (res.result.images || "").split(",");
-          }
-          if (res.result.replyImage) {
-            this.form.replyImage = (res.result.replyImage || "").split(",");
-          }
+          this.image = res.result.images ? (res.result.images || "").split(",") : [];
+          this.form.replyImage = res.result.replyImage ? (res.result.replyImage || "").split(",") : [];
           this.detailInfo = res.result;
-          //弹出框
           this.modalVisible = true;
           this.modalTitle = "详细";
         }
@@ -293,7 +248,12 @@ export default {
   },
 };
 </script>
+
 <style lang="scss">
-// 建议引入通用样式 可删除下面样式代码
 @import "@/styles/table-common.scss";
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
 </style>
diff --git a/seller/src/views/message/message.vue b/seller/src/views/message/message.vue
index 92592bd0..0004ce5b 100644
--- a/seller/src/views/message/message.vue
+++ b/seller/src/views/message/message.vue
@@ -1,81 +1,102 @@
-
 <template>
   <div class="message-main-con">
     <div class="message-mainlist-con">
       <div>
-        <Button @click="setCurrentMesType('unread')" size="large" long type="text">
+        <el-button size="large" text style="width: 100%" @click="setCurrentMesType('unread')">
           <div class="mes-wrap">
             <transition name="mes-current-type-btn">
-              <Icon v-show="currentMessageType == 'unread'" type="md-checkmark"></Icon>
+              <el-icon v-show="currentMessageType == 'unread'"><Check /></el-icon>
             </transition>
             <span class="mes-type-btn-text">未读消息</span>
-            <Badge
-              class="message-count-badge-outer"
-              class-name="message-count-badge-red"
-              :count="unReadCount"
-            ></Badge>
+            <el-badge :value="unReadCount" class="message-count-badge-outer" />
           </div>
-        </Button>
+        </el-button>
       </div>
       <div>
-        <Button @click="setCurrentMesType('read')" size="large" long type="text">
+        <el-button size="large" text style="width: 100%" @click="setCurrentMesType('read')">
           <div class="mes-wrap">
             <transition name="mes-current-type-btn">
-              <Icon v-show="currentMessageType == 'read'" type="md-checkmark"></Icon>
+              <el-icon v-show="currentMessageType == 'read'"><Check /></el-icon>
             </transition>
             <span class="mes-type-btn-text">已读消息</span>
           </div>
-        </Button>
+        </el-button>
       </div>
       <div>
-        <Button @click="setCurrentMesType('recycleBin')" size="large" long type="text">
+        <el-button size="large" text style="width: 100%" @click="setCurrentMesType('recycleBin')">
           <div class="mes-wrap">
             <transition name="mes-current-type-btn">
-              <Icon v-show="currentMessageType == 'recycleBin'" type="md-checkmark"></Icon>
+              <el-icon v-show="currentMessageType == 'recycleBin'"><Check /></el-icon>
             </transition>
             <span class="mes-type-btn-text">回收站</span>
           </div>
-        </Button>
+        </el-button>
       </div>
     </div>
     <div class="message-content-con">
       <transition name="view-message">
         <div v-if="showMesTitleList" class="message-title-list-con">
-          <Table
-            class="mt_10"
+          <el-table
             ref="messageList"
-            :loading="loading"
-            :columns="mesTitleColumns"
+            v-loading="loading"
+            class="mt_10"
             :data="currentMesList"
-            :no-data-text="noDataText"
-          ></Table>
-          <Page
-            :current="params.pageNumber"
-            :total="total"
-            :page-size="params.pageSize"
-            @on-change="changePage"
-            @on-page-size-change="changePageSize"
-            :page-size-opts="[5,10]"
-            size="small"
-            show-total
-            show-elevator
-            show-sizer
-            class="page-fix"
-          ></Page>
+            :empty-text="noDataText"
+            style="width: 100%"
+          >
+            <el-table-column label=" " min-width="300">
+              <template #default="{ row }">
+                <a class="link-text mes-title-link" @click="openMessage(row)">{{ row.title }}</a>
+              </template>
+            </el-table-column>
+            <el-table-column label=" " width="190" align="center">
+              <template #default="{ row }">
+                <el-icon style="margin-right: 5px; vertical-align: middle"><Clock /></el-icon>
+                <span>{{ row.createTime }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label=" " width="210" align="center">
+              <template #default="{ row }">
+                <template v-if="currentMessageType == 'unread'">
+                  <a class="link-text" @click="markAsRead(row)">标为已读</a>
+                </template>
+                <template v-else-if="currentMessageType == 'read'">
+                  <a class="link-text" @click="deleteMes(row)">删除</a>
+                </template>
+                <template v-else>
+                  <a class="link-text" @click="restoreMes(row)">还原</a>
+                  <span class="op-split">|</span>
+                  <a class="link-text" @click="deleteReal(row)">彻底删除</a>
+                </template>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="page-fix mt_10" style="display: flex; justify-content: flex-end">
+            <el-pagination
+              v-model:current-page="params.pageNumber"
+              v-model:page-size="params.pageSize"
+              :page-sizes="[5, 10]"
+              :total="total"
+              layout="total, sizes, prev, pager, next, jumper"
+              size="small"
+              @current-change="changePage"
+              @size-change="changePageSize"
+            />
+          </div>
         </div>
       </transition>
       <transition name="back-message-list">
         <div v-if="!showMesTitleList" class="message-view-content-con">
           <div class="message-content-top-bar">
             <span class="mes-back-btn-con">
-              <Button type="text" @click="backMesTitleList">
-                <Icon type="ios-arrow-back"></Icon>&nbsp;&nbsp;返回
-              </Button>
+              <el-button type="primary" link @click="backMesTitleList">
+                <el-icon><ArrowLeft /></el-icon>&nbsp;&nbsp;返回
+              </el-button>
             </span>
             <h3 class="mes-title">{{ mes.title }}</h3>
           </div>
           <p class="mes-time-con">
-            <Icon type="android-time"></Icon>
+            <el-icon><Clock /></el-icon>
             &nbsp;&nbsp;{{ mes.time }}
           </p>
           <div class="message-content-body">
@@ -88,308 +109,145 @@
 </template>
 
 <script>
-  import * as API_Index from "@/api/index";
+import { Check, Clock, ArrowLeft } from "@element-plus/icons-vue";
+import * as API_Index from "@/api/index";
 
-  export default {
-    name: "message_index",
-    data() {
-      const markAsReadBtn = (h, params) => {
-        return h(
-          "a",
-          {
-            style: {
-              color: "#2d8cf0",
-              cursor: "pointer",
-              textDecoration: "none",
-            },
-            on: {
-              click: () => {
-                let v = params.row;
-                this.loading = true;
-                API_Index.read(v.id).then(res => {
-                  this.loading = false;
-                  if (res.success) {
-                    this.getAll();
-                  }
-                });
-              },
-            },
-          },
-          "标为已读"
-        );
-      };
-      const deleteMesBtn = (h, params) => {
-        return h(
-          "a",
-          {
-            style: {
-              color: "#2d8cf0",
-              cursor: "pointer",
-              textDecoration: "none",
-            },
-            on: {
-              click: () => {
-                let v = params.row;
-                this.loading = true;
-                API_Index.deleteMessage(v.id).then(res => {
-                  this.loading = false;
-                  if (res.success) {
-                    this.refreshMessage();
-                  }
-                });
-              },
-            },
-          },
-          "删除"
-        );
-      };
-      const restoreBtn = (h, params) => {
-        return h(
-          "a",
-          {
-            style: {
-              color: "#2d8cf0",
-              cursor: "pointer",
-              textDecoration: "none",
-            },
-            on: {
-              click: () => {
-                let v = params.row;
-                API_Index.reductionMessage(v.id).then(res => {
-                  this.loading = false;
-                  if (res.success) {
-                    this.refreshMessage();
-                  }
-                });
-              },
-            },
-          },
-          "还原"
-        );
-      };
-      const deleteRealBtn = (h, params) => {
-        return h(
-          "a",
-          {
-            style: {
-              color: "#2d8cf0",
-              cursor: "pointer",
-              textDecoration: "none",
-            },
-            on: {
-              click: () => {
-                let v = params.row;
-                this.loading = true;
-                API_Index.clearMessage(v.id).then(res => {
-                  this.loading = false;
-                  if (res.success) {
-                    this.refreshMessage();
-                  }
-                });
-              },
-            },
-          },
-          "彻底删除"
-        );
-      };
-      return {
-        loading: true, // 列表加载的loading
-        params: { // 请求消息列表参数
-          status: "UN_READY",
-          pageNumber: 1, // 当前页数
-          pageSize: 10, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc" // 默认排序方式
-        },
-        total: 0, // 消息列表总数
-        totalUnread: 0, // 未读总数
-        totalRead: 0, // 已读总数
-        totalRemove: 0, // 回收站消息数
-        currentMesList: [], // 当前状态消息
-        unreadMesList: [], // 未读消息
-        hasReadMesList: [], // 已读消息
-        recyclebinList: [], // 回收站消息
-        currentMessageType: "unread", // 当前列表消息状态
-        showMesTitleList: true, // 是否展示消息状态列表
-        unReadCount: 0, // 未读消息数量
-        hasReadCount: 0, // 已读消息数量
-        recycleBinCount: 0, // 回收站消息数量
-        noDataText: "暂无未读消息",
-        mes: { // 展示消息详情
-          title: "",
-          time: "",
-          content: ""
-        },
-        mesTitleColumns: [ // 表格表头
-
-          {
-            title: " ",
-            key: "title",
-            align: "left",
-            ellipsis: true,
-            render: (h, params) => {
-              return h("span", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      margin: "0 30px 0 0"
-                    },
-                    on: {
-                      click: () => {
-                        this.showMesTitleList = false;
-                        this.mes.title = params.row.title;
-                        this.mes.time = params.row.createTime;
-                        this.getContent(params.row);
-                      }
-                    }
-                  },
-                  params.row.title
-                )
-              ]);
-            }
-          },
-          {
-            title: " ",
-            key: "time",
-            align: "center",
-            width: 190,
-            render: (h, params) => {
-              return h("span", [
-                h("Icon", {
-                  props: {
-                    type: "md-time",
-                    size: 16
-                  },
-                  style: {
-                    margin: "0 5px 3px 0"
-                  }
-                }),
-                h("span", params.row.createTime)
-              ]);
-            }
-          },
-          {
-            title: " ",
-            key: "asread",
-            align: "center",
-            width: 210,
-            render: (h, params) => {
-              if (this.currentMessageType == "unread") {
-                return h("div", [markAsReadBtn(h, params)]);
-              } else if (this.currentMessageType == "read") {
-                return h("div", [deleteMesBtn(h, params)]);
-              } else {
-                return h("div", [
-                  restoreBtn(h, params),
-                  h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
-                  deleteRealBtn(h, params)
-                ]);
-              }
-            }
-          }
-        ]
-      };
+export default {
+  name: "message_index",
+  components: { Check, Clock, ArrowLeft },
+  data() {
+    return {
+      loading: true,
+      params: {
+        status: "UN_READY",
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc",
+      },
+      total: 0,
+      currentMesList: [],
+      currentMessageType: "unread",
+      showMesTitleList: true,
+      unReadCount: 0,
+      noDataText: "暂无未读消息",
+      mes: {
+        title: "",
+        time: "",
+        content: "",
+      },
+    };
+  },
+  methods: {
+    changePage() {
+      this.refreshMessage();
     },
-    methods: {
-      // 改变页数
-      changePage(v) {
-        this.params.pageNumber = v;
-        this.refreshMessage();
-      },
-      // 改变页码
-      changePageSize(v) {
-        this.params.pageSize = v;
-        this.refreshMessage();
-      },
-      // 刷新消息
-      refreshMessage() {
-        let status = "UN_READY";
-        let type = this.currentMessageType;
-        if (type == "unread") {
-          status = "UN_READY";
-        } else if (type == "read") {
-          status = "ALREADY_READY";
-        } else {
-          status = "ALREADY_REMOVE";
+    changePageSize() {
+      this.refreshMessage();
+    },
+    refreshMessage() {
+      let status = "UN_READY";
+      const type = this.currentMessageType;
+      if (type == "unread") status = "UN_READY";
+      else if (type == "read") status = "ALREADY_READY";
+      else status = "ALREADY_REMOVE";
+      this.params.status = status;
+      this.loading = true;
+      API_Index.getMessageSendData(this.params).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.currentMesList = res.result.records;
+          this.total = res.result.total;
         }
-        this.params.status = status;
-        this.loading = true;
-        API_Index.getMessageSendData(this.params).then(res => {
-          this.loading = false;
-          if (res.success) {
-            this.currentMesList = res.result.records;
-            this.total = res.result.total;
-          }
-        });
-      },
-      //获取全部数据
-      getAll() {
-        API_Index.getAllMessage(this.params).then(res => {
-          this.loading = false;
-          if (res.success) {
-            //未读消息
-            this.unReadCount = res.result.UN_READY.total;
-            this.currentMesList = res.result.UN_READY.records;
-            //已读消息
-            this.hasReadCount = res.result.ALREADY_READY.total;
-            //回收站
-            this.recycleBinCount = res.result.ALREADY_REMOVE.total;
-          }
-        });
-      },
-      // 删除消息
-      deleteMessage(id) {
-        API_Index.deleteMessage(id).then(res => {
-          if (res.success) {
-            this.$Message.success("删除成功");
-          }
-        });
-      },
-      backMesTitleList() {
+      });
+    },
+    getAll() {
+      API_Index.getAllMessage(this.params).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.unReadCount = res.result.UN_READY.total;
+          this.currentMesList = res.result.UN_READY.records;
+        }
+      });
+    },
+    backMesTitleList() {
+      this.showMesTitleList = true;
+    },
+    setCurrentMesType(type) {
+      if (this.currentMessageType !== type) {
         this.showMesTitleList = true;
-      },
-      // 设置当前消息分类
-      setCurrentMesType(type) {
-        if (this.currentMessageType !== type) {
-          this.showMesTitleList = true;
-        }
-        this.currentMessageType = type;
-        if (type == "unread") {
-          this.noDataText = "暂无未读消息";
-        } else if (type == "read") {
-          this.noDataText = "暂无已读消息";
-        } else {
-          this.noDataText = "回收站无消息";
-        }
-        this.params.pageNumber = 1;
-        this.refreshMessage();
-      },
-      getContent(v) {
-        this.mes.content = v.content;
-
-        API_Index.read(v.id).then(res => {
-          this.loading = false;
-          if (res.success) {
-            this.getAll()();
-          }
-        });
       }
+      this.currentMessageType = type;
+      if (type == "unread") this.noDataText = "暂无未读消息";
+      else if (type == "read") this.noDataText = "暂无已读消息";
+      else this.noDataText = "回收站无消息";
+      this.params.pageNumber = 1;
+      this.refreshMessage();
     },
-    mounted() {
-      this.getAll();
+    openMessage(row) {
+      this.showMesTitleList = false;
+      this.mes.title = row.title;
+      this.mes.time = row.createTime;
+      this.getContent(row);
     },
-    watch: {
-      // 监听路由变化通过id获取数据
-      $route(to, from) {
-        if (to.name == "message_index") {
-          this.getAll();
-        }
-      }
-    }
-  };
+    markAsRead(v) {
+      this.loading = true;
+      API_Index.read(v.id).then((res) => {
+        this.loading = false;
+        if (res.success) this.getAll();
+      });
+    },
+    deleteMes(v) {
+      this.loading = true;
+      API_Index.deleteMessage(v.id).then((res) => {
+        this.loading = false;
+        if (res.success) this.refreshMessage();
+      });
+    },
+    restoreMes(v) {
+      API_Index.reductionMessage(v.id).then((res) => {
+        this.loading = false;
+        if (res.success) this.refreshMessage();
+      });
+    },
+    deleteReal(v) {
+      this.loading = true;
+      API_Index.clearMessage(v.id).then((res) => {
+        this.loading = false;
+        if (res.success) this.refreshMessage();
+      });
+    },
+    getContent(v) {
+      this.mes.content = v.content;
+      API_Index.read(v.id).then((res) => {
+        this.loading = false;
+        if (res.success) this.getAll();
+      });
+    },
+  },
+  mounted() {
+    this.getAll();
+  },
+  watch: {
+    $route(to) {
+      if (to.name == "message_index") this.getAll();
+    },
+  },
+};
 </script>
+
 <style lang="scss" scoped>
 @import "./message.scss";
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
+.mes-title-link {
+  margin-right: 30px;
+}
 </style>
-
diff --git a/seller/src/views/my-components/lili/circle-loading.vue b/seller/src/views/my-components/lili/circle-loading.vue
index 594ef07a..d2d3675f 100644
--- a/seller/src/views/my-components/lili/circle-loading.vue
+++ b/seller/src/views/my-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/seller/src/views/my-components/lili/department-choose.vue b/seller/src/views/my-components/lili/department-choose.vue
index 412e4d73..d104f910 100644
--- a/seller/src/views/my-components/lili/department-choose.vue
+++ b/seller/src/views/my-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/seller/src/views/my-components/lili/department-tree-choose.vue b/seller/src/views/my-components/lili/department-tree-choose.vue
index 34200c70..2e987bfe 100644
--- a/seller/src/views/my-components/lili/department-tree-choose.vue
+++ b/seller/src/views/my-components/lili/department-tree-choose.vue
@@ -1,112 +1,123 @@
 <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, searchDepartment } 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: [], // 部门列表
-      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.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.depLoading = true;
-        searchDepartment({title: this.searchKey}).then(res => {
-          this.depLoading = false;
-          if (res.success) {
-            res.result.forEach(function (e) {
-              if (e.status == -1) {
-                e.title = "[已禁用] " + e.title;
-                e.disabled = true;
-              }
-            });
-            this.dataDep = res.result;
-          }
-        });
+        searchDepartment({ title: this.searchKey })
+          .then((res) => {
+            if (res.success) {
+              res.result.forEach((e) => {
+                if (e.status == -1) {
+                  e.title = "[已禁用] " + e.title;
+                  e.disabled = true;
+                }
+              });
+              this.dataDep = res.result;
+            }
+          })
+          .finally(() => {
+            this.depLoading = false;
+          });
       } else {
-        this.initDepartmentData();
+        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 = "";
@@ -118,7 +129,6 @@ export default {
       }
       this.$emit("on-clear");
     },
-    // 设置数据 回显用
     setData(ids, title) {
       this.departmentTitle = title;
       if (this.multiple) {
@@ -127,11 +137,11 @@ export default {
         this.departmentId = [];
         this.departmentId.push(ids);
       }
-    }
+    },
   },
   created() {
     this.initDepartmentData();
-  }
+  },
 };
 </script>
 
@@ -151,9 +161,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/seller/src/views/my-components/lili/set-password.vue b/seller/src/views/my-components/lili/set-password.vue
index b3e6b3a9..ac57ea25 100644
--- a/seller/src/views/my-components/lili/set-password.vue
+++ b/seller/src/views/my-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,58 +33,56 @@
 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;
     },
-    // 强度验证方法
     strengthChange() {
       if (!this.currentValue) {
         this.tipStyle = "password-tip-none";
@@ -91,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;
@@ -109,61 +108,33 @@ export default {
         this.strengthValue = 100;
       }
     },
-    // 输入框change事件
-    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/seller/src/views/my-components/lili/upload-pic-input.vue b/seller/src/views/my-components/lili/upload-pic-input.vue
index 72f67705..9906bce0 100644
--- a/seller/src/views/my-components/lili/upload-pic-input.vue
+++ b/seller/src/views/my-components/lili/upload-pic-input.vue
@@ -1,173 +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="width: 100%;margin: 0 auto;display: block;" />
-              <a @click="viewImage=true" style="margin-top:5px;text-align:right;display:block">查看大图</a>
-            </div>
-          </Poptip>
-      </Input>
-      
-      <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"
-      >
-        <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'}" draggable>
-      <img :src="currentValue" 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="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 "@/libs/axios";
+import ossManage from "@/views/shop/ossManages";
+
 export default {
   name: "uploadPicInput",
-  props: {
-    value: String,
-    size: String,
-    placeholder: { // input提示信息
-      type: String,
-      default: "图片链接"
-    },
-    showInput: { // 显示图片链接
-      type: Boolean,
-      default: true
-    },
-    disabled: { // 是否不可选中
-      type: Boolean,
-      default: false
-    },
-    readonly: { // 是否只读
-      type: Boolean,
-      default: false
-    },
-    maxlength: Number, // 最大长度
-    icon: { // 上传按钮图标
-      type: String,
-      default: "ios-cloud-upload-outline"
-    }
+  components: {
+    ossManage,
+    View,
   },
+  props: {
+    modelValue: String,
+    value: String,
+    size: {
+      default: "default",
+      type: String,
+    },
+    placeholder: {
+      type: String,
+      default: "图片链接",
+    },
+    showInput: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    maxlength: Number,
+  },
+  emits: ["update:modelValue", "input", "on-change"],
   data() {
     return {
-      accessToken: {}, // 验证token
-      currentValue: this.value, // 当前值
-      loading: false, // 加载状态
-      viewImage: false, // 是否预览图片
-      uploadFileUrl: uploadFile // 上传路径
+      accessToken: {},
+      currentValue: this.modelValue ?? this.value ?? "",
+      viewImage: false,
+      uploadFileUrl: uploadFile,
+      picModalFlag: false,
+      selectedFormBtnName: "",
+      picIndex: "",
     };
   },
   methods: {
-    // 初始化
+    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.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("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/seller/src/views/my-components/lili/upload-pic-thumb.vue b/seller/src/views/my-components/lili/upload-pic-thumb.vue
index b17e030c..17767580 100644
--- a/seller/src/views/my-components/lili/upload-pic-thumb.vue
+++ b/seller/src/views/my-components/lili/upload-pic-thumb.vue
@@ -3,144 +3,152 @@
     <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'">
-            <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 v-if="remove" type="ios-trash-outline" @click="handleRemove(item)"></Icon>
+              <el-icon class="action-icon" @click="handleView(item.url)"><View /></el-icon>
+              <el-icon v-if="remove" 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>
-      <div style="display: inline-block; width: 60px; height: 60px;border: 1px dashed #dcdee2;border-radius: 4px;line-height: 60px;text-align: center;"
-           @click="handleCLickImg('uploadList')">
-          <Icon size="20" type="md-camera"></Icon>
+      <div
+        v-if="!isView"
+        class="upload-trigger-box"
+        @click="handleCLickImg('uploadList')"
+      >
+        <el-icon :size="20"><Camera /></el-icon>
       </div>
-      <!--<Upload-->
-        <!--:disabled="disable"-->
-        <!--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;"-->
-        <!--v-if="!isView"-->
-      <!--&gt;-->
-        <!--<div style="width: 58px;height:58px;line-height: 58px;">-->
-          <!--<Icon type="md-camera" size="20"></Icon>-->
-        <!--</div>-->
-      <!--</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>
 
-    <Modal width="1200px" v-model="picModelFlag" @on-ok="confirmUrls">
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" @selected="(list)=>{ selectedImage = list}" ref="ossManage" />
-    </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>
+
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage
+        ref="ossManage"
+        :is-component="true"
+        :initialize="picModelFlag"
+        @callback="callbackSelected"
+        @selected="(list) => { selectedImage = list }"
+      />
+      <template #footer>
+        <el-button @click="picModelFlag = false">取消</el-button>
+        <el-button type="primary" @click="confirmUrls">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { Camera, Delete, View } from "@element-plus/icons-vue";
 import { uploadFile } from "@/libs/axios";
 import vuedraggable from "vuedraggable";
 import ossManage from "@/views/shop/ossManages";
+
 export default {
   name: "uploadPicThumb",
   components: {
     vuedraggable,
-    ossManage
+    ossManage,
+    Camera,
+    Delete,
+    View,
   },
   props: {
-    value: { // 默认值
-      type:null
-    },
-    draggable: { // 是否可拖拽改变位置
+    modelValue: { type: null },
+    value: { type: null },
+    draggable: {
       type: Boolean,
-      default: true
+      default: true,
     },
-    multiple: { // 多选
+    multiple: {
       type: Boolean,
-      default: true
+      default: true,
     },
-    disable:{ // 禁止上传
+    disable: {
       type: Boolean,
-      default: false
+      default: false,
     },
-    remove:{ // 移除图片
+    remove: {
       type: Boolean,
-      default: true
+      default: true,
     },
-    limit: { // 上传总数限制
+    limit: {
       type: Number,
-      default: 10
+      default: 10,
     },
-    isView: { // 显示上传按钮
+    isView: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
+  emits: ["update:modelValue", "input", "on-change", "uploadchange"],
   data() {
     return {
-      accessToken: {}, // 验证token
-      uploadFileUrl: uploadFile, // 上传文件
-      uploadList: [], // 上传文件列表
-      viewImage: false, // 是否预览图片
-      imgUrl: "", // 图片地址
-      picModelFlag: false, // 图片选择器
-      selectedFormBtnName: "", // 点击图片绑定form
+      accessToken: {},
+      uploadFileUrl: uploadFile,
+      uploadList: [],
+      viewImage: false,
+      imgUrl: "",
+      picModelFlag: false,
+      selectedFormBtnName: "",
       selectedImage: [],
     };
   },
+  computed: {
+    bindValue() {
+      return this.modelValue !== undefined ? this.modelValue : this.value;
+    },
+  },
   methods: {
-    // 选择图片modal
-    handleCLickImg(val, index) {
+    handleCLickImg(val) {
       this.$refs.ossManage.selectImage = true;
       this.picModelFlag = true;
       this.selectedFormBtnName = val;
     },
-    // 图片选择后回调
     callbackSelected(val) {
       this.picModelFlag = false;
-      if (!this.multiple && this.uploadList && this.uploadList.length > 0) {
-        // 删除第一张
+      if (!this.multiple && this.uploadList.length > 0) {
         this.uploadList.splice(0, 1);
       }
-      this.uploadList.push(val);
-      // 返回组件值
+      this.uploadList.push({ ...val, status: "finished" });
       this.returnValue();
     },
-    confirmUrls(){
-
+    confirmUrls() {
+      if (this.selectedImage.length) {
+        this.selectedImage.forEach((element) => {
+          this.uploadList.push({ url: element.url, status: "finished" });
+        });
+      }
+      this.picModelFlag = false;
+      this.returnValue();
     },
     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) {
@@ -148,79 +156,28 @@ export default {
       this.viewImage = true;
     },
     handleRemove(file) {
-      const uploadList = this.uploadList;
-      this.uploadList.splice(uploadList.indexOf(file), 1);
+      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) {
-      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() {
-      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;
@@ -228,62 +185,53 @@ export default {
         if (!v) {
           return;
         }
-        this.uploadList = [];
-        let item = {
-          url: v,
-          status: "finished"
-        };
-        this.uploadList.push(item);
-        this.$emit("on-change", v);
-      } else if (typeof v == "object") {
-        // 多张
+        this.uploadList = [{ url: v, status: "finished" }];
+        this.$emit("uploadchange", v);
+        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 = {
-              url: e,
-              status: "finished"
-            };
-            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 {
-  display: inline-flex;
+  display: inline-block;
   width: 60px;
   height: 60px;
   text-align: center;
@@ -300,6 +248,7 @@ export default {
 .upload-list img {
   width: 100%;
   height: 100%;
+  object-fit: cover;
 }
 .upload-list-cover {
   display: none;
@@ -309,15 +258,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;
@@ -326,5 +277,14 @@ export default {
   opacity: 0.5;
   background: #c8ebfb;
 }
+.upload-trigger-box {
+  display: inline-block;
+  width: 58px;
+  height: 58px;
+  border: 1px dashed #dcdfe6;
+  border-radius: 4px;
+  line-height: 58px;
+  text-align: center;
+  cursor: pointer;
+}
 </style>
-
diff --git a/seller/src/views/my-components/map/index.vue b/seller/src/views/my-components/map/index.vue
index fa3425b7..4838c570 100644
--- a/seller/src/views/my-components/map/index.vue
+++ b/seller/src/views/my-components/map/index.vue
@@ -1,11 +1,10 @@
 <template>
   <div class="map">
-
     <div class="address">{{ addrContent.address }}</div>
     <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,42 +12,39 @@
         </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>
 </template>
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { getRegion } from "@/api/common.js";
 
-const config = require('@/config/index')
+const config = require("@/config/index");
 export default {
   name: "map",
   data() {
     return {
       config,
-      showMap: false, // 地图显隐
-      mapSearch: "", // 地图搜索
-      map: null, // 初始化地图
-      autoComplete: null, // 初始化搜索方法
-      geocoder: null, // 初始化地理、坐标转化
-      positionPicker: null, // 地图拖拽选点
-      tips: [], //搜索关键字列表
-      addrContent: {}, // 回显地址信息
-      loading: false, // 加载状态
+      showMap: false,
+      mapSearch: "",
+      map: null,
+      autoComplete: null,
+      geocoder: null,
+      positionPicker: null,
+      tips: [],
+      addrContent: {},
+      loading: false,
     };
   },
   watch: {
-    mapSearch: function (val) {
+    mapSearch(val) {
       this.searchOfMap(val);
     },
   },
   methods: {
     ok() {
-
       if (this.addrContent && this.addrContent.regeocode) {
         const params = {
           cityCode: this.addrContent.regeocode.addressComponent.citycode,
@@ -59,30 +55,27 @@ export default {
             this.addrContent.addr = res.result.name.replace(/,/g, " ");
             this.addrContent.addrId = res.result.id;
             this.loading = false;
-
             this.$emit("getAddress", this.addrContent);
           }
         });
       } else {
-        this.$Message.error('未获取到坐标信息！请查看高德API配置是否正确')
+        this.$Message.error("未获取到坐标信息！请查看高德API配置是否正确");
       }
-
     },
     init() {
       AMapLoader.load({
-        key: this.config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        key: this.config.aMapKey,
+        version: "",
         plugins: [
           "AMap.ToolBar",
           "AMap.Autocomplete",
           "AMap.PlaceSearch",
           "AMap.Geolocation",
           "AMap.Geocoder",
-        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        ],
         AMapUI: {
-          // 是否加载 AMapUI，缺省不加载
-          version: "1.1", // AMapUI 缺省 1.1
-          plugins: ["misc/PositionPicker"], // 需要加载的 AMapUI ui插件
+          version: "1.1",
+          plugins: ["misc/PositionPicker"],
         },
       })
         .then((AMap) => {
@@ -95,36 +88,26 @@ export default {
           that.map.addControl(new AMap.PlaceSearch());
           that.map.addControl(new AMap.Geocoder());
 
-          // 实例化Autocomplete
           let autoOptions = {
             city: "全国",
           };
-          that.autoComplete = new AMap.Autocomplete(autoOptions); // 搜索
+          that.autoComplete = new AMap.Autocomplete(autoOptions);
           that.geocoder = new AMap.Geocoder(autoOptions);
 
           that.positionPicker = new AMapUI.PositionPicker({
-            // 拖拽选点
             mode: "dragMap",
             map: that.map,
           });
           that.positionPicker.start();
-          /**
-           *
-           * 所有回显数据，都在positionResult里面
-           * 需要字段可以查找
-           *
-           */
           that.positionPicker.on("success", function (positionResult) {
             that.addrContent = positionResult;
           });
         })
-        .catch((e) => { });
+        .catch(() => {});
     },
     searchOfMap(val) {
-      // 地图搜索
       let that = this;
       this.autoComplete.search(val, function (status, result) {
-        // 搜索成功时，result即是对应的匹配数据
         if (status == "complete" && result.info == "OK") {
           that.tips = result.tips;
         } else {
@@ -133,7 +116,6 @@ export default {
       });
     },
     selectAddr(location) {
-      // 选择坐标
       if (!location) {
         this.$Message.warning("请选择正确点位");
         return false;
@@ -182,7 +164,6 @@ export default {
 
 .address {
   margin-bottom: 10px;
-  // color: $theme_color;
   font-weight: bold;
 }
 
diff --git a/seller/src/views/my-components/map/multiple-map.vue b/seller/src/views/my-components/map/multiple-map.vue
index c0969efb..c5de2889 100644
--- a/seller/src/views/my-components/map/multiple-map.vue
+++ b/seller/src/views/my-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 "@/views/my-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/seller/src/views/my-components/tree-table/Checkbox/Checkbox.vue b/seller/src/views/my-components/tree-table/Checkbox/Checkbox.vue
index df87b2f1..749743ca 100644
--- a/seller/src/views/my-components/tree-table/Checkbox/Checkbox.vue
+++ b/seller/src/views/my-components/tree-table/Checkbox/Checkbox.vue
@@ -55,4 +55,4 @@
   };
 </script>
 
-<style lang="less" src="./Checkbox.less"></style>
+<style lang="less" scoped src="./Checkbox.less"></style>
diff --git a/seller/src/views/my-components/tree-table/Table/Table.vue b/seller/src/views/my-components/tree-table/Table/Table.vue
index 2f6c4b6b..8fd408e0 100644
--- a/seller/src/views/my-components/tree-table/Table/Table.vue
+++ b/seller/src/views/my-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/seller/src/views/my-components/tree-table/Table/TableBody.js b/seller/src/views/my-components/tree-table/Table/TableBody.js
index 99cf9e3e..f2b7b187 100644
--- a/seller/src/views/my-components/tree-table/Table/TableBody.js
+++ b/seller/src/views/my-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;
     },
   },
@@ -110,15 +116,6 @@ export default {
     },
   },
   render() {
-    // key
-    // function getKey(row, rowIndex) {
-    //   const rowKey = this.table.rowKey;
-    //   if (rowKey) {
-    //     return rowKey.call(null, row, rowIndex);
-    //   }
-    //   return rowIndex;
-    // }
-
     // style
     function getStyle(type, row, rowIndex, column, columnIndex) {
       const certainType = this.validateType(type, ['cell', 'row'], 'getStyle');
@@ -185,8 +182,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>;
@@ -219,13 +229,16 @@ export default {
               }
             }
           }
-          // res = <Checkbox
-          //   indeterminate={indeterminate}
-          //   value={allCheck}
-          //   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;
       }
@@ -253,9 +266,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 '';
     }
@@ -263,11 +279,6 @@ export default {
     // Template
     return (
       <table cellspacing="0" cellpadding="0" border="0" class={`${this.prefixCls}__body`}>
-        {/* <colgroup>
-          {this.table.tableColumns.map(column =>
-            <col width={column.computedWidth || column.minWidth || column.width}></col>)
-          }
-        </colgroup> */}
         <tbody>
           {  this.table.bodyData.length > 0
             ? this.table.bodyData.map((row, rowIndex) =>
@@ -304,10 +315,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/seller/src/views/my-components/tree-table/Table/utils/scrollBarWidth.js b/seller/src/views/my-components/tree-table/Table/utils/scrollBarWidth.js
index 9bd201d4..9b8b2f78 100644
--- a/seller/src/views/my-components/tree-table/Table/utils/scrollBarWidth.js
+++ b/seller/src/views/my-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/seller/src/views/my-components/verify/index.vue b/seller/src/views/my-components/verify/index.vue
index 2cbb8824..2e4f1fcf 100644
--- a/seller/src/views/my-components/verify/index.vue
+++ b/seller/src/views/my-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/seller/src/views/order/after-order/orderComplaint.vue b/seller/src/views/order/after-order/orderComplaint.vue
index c2f1234e..b77afb05 100644
--- a/seller/src/views/order/after-order/orderComplaint.vue
+++ b/seller/src/views/order/after-order/orderComplaint.vue
@@ -1,258 +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="memberName">
-            <Input
-              type="text"
-              v-model="searchForm.memberName"
-              clearable
-              placeholder="请输入会员名称"
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="订单号" prop="orderSn">
-            <Input
-              type="text"
-              v-model="searchForm.orderSn"
-              clearable
-              placeholder="请输入订单号"
-              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" class="search-btn">搜索</Button>
-          <Button @click="handleReset" class="search-btn">重置</Button>
-        </Form>
-      </Row>
-      </Card>
-    <Card>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        class="mt_10"
-        ref="table"
+    <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_Member from "@/api/member";
-  import * as API_Order from "@/api/order";
-  import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
+import * as API_Order from "@/api/order";
+import vueQr from "vue-qr";
 
-  export default {
-    name: "orderComplaint",
-    components: {
-      uploadPicThumb
+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",
-            sortable: false,
-          },
-          {
-            title: "订单编号",
-            key: "orderSn",
-          },
-          {
-            title: "商品名称",
-            slot: "goodsName",
-          },
-          {
-            title: "投诉主题",
-            key: "complainTopic",
-          },
-          {
-            title: "投诉时间",
-            key: "createTime",
-          },
-          {
-            title: "投诉状态",
-            key: "complainStatus",
-            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: 200,
-            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 || "-";
     },
-    methods: {
-      // 初始化数据
-      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();
-      },
-      // 重置
-      handleReset() {
-        this.searchForm = {}
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 20;
-        this.getDataList();
-      },
-      // 获取数据
-      getDataList() {
-        this.loading = true;
-        API_Order.getComplainPage(this.searchForm).then((res) => {
+    complainStatusTagType(v) {
+      const map = {
+        NEW: "primary",
+        CANCEL: "info",
+        WAIT_APPEAL: "warning",
+        COMMUNICATION: "warning",
+        WAIT_ARBITRATION: "",
+        COMPLETE: "success",
+      };
+      return map[v] || "info";
+    },
+    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 },
+      });
     },
-    // 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
-    beforeRouteLeave(to, from, next) {
-      from.meta.keepAlive = false
-      next()
-    }
-  };
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
-<style lang="scss">
-  // 建议引入通用样式 可删除下面样式代码
-  @import "@/styles/table-common.scss";
+
+<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/seller/src/views/order/after-order/orderComplaintDetail.vue b/seller/src/views/order/after-order/orderComplaintDetail.vue
index 4e4e3425..5b3c662b 100644
--- a/seller/src/views/order/after-order/orderComplaintDetail.vue
+++ b/seller/src/views/order/after-order/orderComplaintDetail.vue
@@ -1,7 +1,7 @@
 <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>
@@ -9,20 +9,15 @@
               <dt>投诉商品</dt>
               <dd>
                 <div>
-                  <img :src="complaintInfo.goodsImage" style="height: 60px">
+                  <img :src="complaintInfo.goodsImage" style="height: 60px" alt="" />
                 </div>
-                <a>{{ complaintInfo.goodsName }}</a><br>
-                <span>￥{{ complaintInfo.goodsPrice | unitPrice }} * {{ complaintInfo.num }}(数量)</span>
+                <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>
@@ -38,17 +33,16 @@
             </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.complainStatus !== 'WAIT_APPEAL'">
+
+          <div class="div-form-default" v-if="complaintInfo.appealContent">
             <h3>商家申诉信息</h3>
             <dl>
               <dt>申诉时间</dt>
@@ -60,368 +54,288 @@
             </dl>
             <dl>
               <dt>申诉凭证</dt>
-              <dd v-if="appealImages == ''">
-                暂无申诉凭证
-              </dd>
+              <dd v-if="!appealImages.length">暂无申诉凭证</dd>
               <dd v-else>
                 <div class="div-img" v-for="(item, index) in appealImages" :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.complainStatus === 'WAIT_APPEAL'">
-            <h3>商家申诉</h3>
-            <dl>
-              <dt>申诉内容</dt>
-              <dd>
-                <Input v-model="appeal.appealContent" type="textarea" maxlength="200" :rows="4" clearable style="width:260px" />
-              </dd>
-            </dl>
-            <dl>
-              <dt>申诉凭证</dt>
-              <dd>
-                <div class="complain-upload-list" :key="index" v-for="(item,index) in appeal.appealImages">
-                  <template v-if="item.status === 'finished'">
-                    <img class="complain-img" :src="item.url">
-                    <div class="complain-upload-list-cover">
-                      <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
-                      <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
-                    </div>
-                  </template>
-                  <template v-else>
-                    <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
-                  </template>
-                </div>
-                <Upload ref="upload" :show-upload-list="false" :on-format-error="handleFormatError" :action="uploadFileUrl" :headers="accessToken" :on-success="handleSuccessGoodsPicture"
-                  :format="['jpg','jpeg','png']" :max-size="1024" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" multiple type="drag"
-                  style="display: inline-block;width:58px;">
-                  <div style="width: 58px;height:58px;line-height: 58px;">
-                    <Icon type="ios-camera" size="20"></Icon>
-                  </div>
-                </Upload>
-                <Modal title="View Image" v-model="visible">
-                  <img :src="imgName" v-if="visible" style="width: 100%">
-                </Modal>
-              </dd>
-            </dl>
-            <dl>
-              <dt></dt>
-              <dd>
-                <Button type="primary" :loading="submitLoading" @click="appealSubmit()" style="margin-left: 5px">
-                  提交申诉
-                </Button>
-              </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>
+                  <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'">
+            <dl v-if="complaintInfo.complainStatus != 'COMPLETE'">
               <dt>发送对话</dt>
               <dd>
-                <Input v-model="params.content" type="textarea" maxlength="200" :rows="4" clearable style="width:260px" />
+                <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" v-if="complaintInfo.complainStatus == 'COMPLETE'">
+            <h3>仲裁结果</h3>
+            <dl>
+              <dt>仲裁意见</dt>
+              <dd>{{ complaintInfo.arbitrationResult }}</dd>
+            </dl>
+          </div>
+
+          <div class="div-form-default" v-if="complaintInfo.complainStatus != 'COMPLETE'">
+            <h3>平台仲裁</h3>
+            <dl v-if="arbitrationResultShow">
+              <dt>仲裁</dt>
+              <dd>
+                <el-input
+                  v-model="arbitrationParams.arbitrationResult"
+                  type="textarea"
+                  maxlength="200"
+                  :rows="4"
+                  clearable
+                  style="width: 260px"
+                />
               </dd>
             </dl>
             <dl>
               <dt></dt>
-              <dd v-if="complaintInfo.complainStatus != 'COMPLETE'">
-                <div style="text-align: right;width: 45%;margin-top: 10px">
-                  <Button type="primary" :loading="submitLoading" @click="handleSubmit" style="margin-left: 5px">
-                    回复
-                  </Button>
-                  <Button type="default" :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 style="text-align: right; display: flex; justify-content: space-between">
+                <el-button
+                  v-if="!arbitrationResultShow"
+                  :loading="submitLoading"
+                  @click="arbitrationHandle"
+                >
+                  直接仲裁结束投诉流程
+                </el-button>
+                <el-button
+                  v-if="complaintInfo.complainStatus == 'NEW'"
+                  :loading="submitLoading"
+                  @click="handleStoreComplaint"
+                >
+                  交由商家申诉
+                </el-button>
+                <el-button
+                  v-if="arbitrationResultShow"
+                  type="primary"
+                  :loading="submitLoading"
+                  @click="arbitrationHandleSubmit"
+                >
+                  提交仲裁
+                </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.orderTime }}
-              </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";
-import { uploadFile } from "@/libs/axios";
+const emptyComplaint = () => ({
+  id: "",
+  orderComplaintCommunications: [],
+});
+
 export default {
-  name: "orderComplaint",
+  name: "orderComplaintDetail",
   data() {
     return {
-      //展示图片层
-      visible: false,
-      //上传图片路径
-      uploadFileUrl: uploadFile,
-      accessToken: "", // 验证token
-      id: 0, // 投诉单id
-      complaintInfo: "", // 投诉信息
-      images: [], //会员申诉图片
-      appealImages: [], //商家申诉的图片
-      applyAppealImages: [], //商家申诉表单填写的图片
-      submitLoading: false, // 添加或编辑提交状态
-      //商家回复内容
+      loading: false,
+      id: "",
+      complaintInfo: emptyComplaint(),
+      images: [],
+      appealImages: [],
+      submitLoading: false,
       params: {
         content: "",
         complainId: "",
       },
-      //投诉
-      appeal: {
-        orderComplaintId: "",
-        appealContent: "",
-        appealImages: [],
+      arbitrationParams: {
+        arbitrationResult: "",
       },
+      arbitrationResultShow: false,
     };
   },
-  watch: {
-    $route() {
-      this.getDetail();
-    },
-  },
   methods: {
-    // 预览图片
-    handleView(name) {
-      this.imgName = name;
-      this.visible = true;
+    complainStatusText(v) {
+      const map = {
+        NEW: "新投诉",
+        CANCEL: "已撤销",
+        WAIT_APPEAL: "待申诉",
+        COMMUNICATION: "对话中",
+        WAIT_ARBITRATION: "等待仲裁",
+        COMPLETE: "已完成",
+      };
+      return map[v] || v || "-";
     },
-    // 移除回复图片
-    handleRemove(file) {
-      this.appeal.appealImages = this.appeal.appealImages.filter(
-        (i) =>  i.url !== file.url
-      );
-    },
-    // 上传成功回调
-    handleSuccessGoodsPicture(res, file) {
-      if (file.response) {
-        file.url = file.response.result;
-
-        this.appeal.appealImages.push(file);
-      }
-    },
-    // 上传之前钩子
-    handleBeforeUpload() {
-      const check =
-        this.images.images !== undefined && this.images.images.length > 5;
-      if (check) {
-        this.$Notice.warning({
-          title: "Up to five pictures can be uploaded.",
-        });
-      }
-      return !check;
-    },
-    // 上传格式错误
-    handleFormatError(file) {
-      this.$Notice.warning({
-        title: "图片格式不正确",
-        desc:
-          "File format of " +
-          file.name +
-          " is incorrect, please select jpg or png.",
-      });
-    },
-    // 上传大小限制
-    handleMaxSize(file) {
-      this.$Notice.warning({
-        title: "超过文件大小限制",
-        desc: "图片不能超过1mb",
-      });
-    },
-    // 获取详情
-    getDetail() {
-      this.loading = true;
-      API_Order.getComplainDetail(this.id).then((res) => {
-        this.loading = false;
+    handleStoreComplaint() {
+      API_Order.storeComplain({
+        complainStatus: "WAIT_APPEAL",
+        complainId: this.complaintInfo.id,
+      }).then((res) => {
         if (res.success) {
-          this.complaintInfo = res.result;
-          this.images = (res.result.images || "").split(",");
-          this.appealImages = (res.result.appealImages || "").split(",");
+          this.$Message.success("操作成功");
+          this.getDetail();
         }
       });
     },
-    //返回列表
-    returnDataList() {
-      this.$router.push({
-        name: "orderComplaint",
-      });
+    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 || 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" });
+    },
+    arbitrationHandle() {
+      this.arbitrationResultShow = true;
+    },
+    arbitrationHandleSubmit() {
+      if (!this.arbitrationParams.arbitrationResult) {
+        this.$Message.error("请填写仲裁内容");
+        return;
+      }
+      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.addOrderComplaint(this.params).then((res) => {
-        this.submitLoading = false;
-        if (res.success) {
-          this.$Message.success("对话成功");
-          this.params.content = "";
-          this.getDetail();
-        }
-      });
-    },
-    //申诉
-    appealSubmit() {
-
-      if (this.appeal.appealContent === "") {
-        this.$Message.error("请填写内容");
-        return;
-      }
-      this.appeal.appealImages = this.appeal.appealImages.map(item=> item.url)
-      this.appeal.orderComplaintId = this.id;
-      API_Order.appeal(this.appeal).then((res) => {
-        this.submitLoading = false;
-        if (res.success) {
-          this.$Message.success("申诉成功");
-          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 () {
+  mounted() {
     this.id = this.$route.query.id;
     this.getDetail();
-    this.accessToken = {
-      accessToken: this.getStore("accessToken"),
-    };
   },
-  // 如果是从详情页返回列表页，修改列表页keepAlive为true，确保不刷新页面
-  beforeRouteLeave(to, from, next){
-    if(to.name === 'orderComplaint') {
-      to.meta.keepAlive = true
-    }
-    next()
-  }
+  watch: {
+    "$route.query.id"(val) {
+      this.id = val;
+      this.getDetail();
+    },
+  },
 };
 </script>
+
 <style lang="scss" scoped>
-::v-deep .ivu-col {
-  width: 100% !important;
-}
-
-.complain-upload-list {
-  display: inline-block;
-  width: 60px;
-  height: 60px;
-  text-align: center;
-  line-height: 60px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  overflow: hidden;
-  background: #fff;
-  position: relative;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-  margin-right: 4px;
-}
-.complain-upload-list img {
-  width: 100%;
-  height: 100%;
-}
-.complain-upload-list-cover {
-  display: none;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(0, 0, 0, 0.6);
-}
-.complain-upload-list:hover .complain-upload-list-cover {
-  display: block;
-}
-.complain-upload-list-cover i {
-  color: #fff;
-  font-size: 20px;
-  cursor: pointer;
-  margin: 0 2px;
-}
-
 .main-content {
   min-height: 600px;
   padding: 10px;
@@ -546,4 +460,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/seller/src/views/order/after-order/returnGoodsOrder.vue b/seller/src/views/order/after-order/returnGoodsOrder.vue
index ea1d5b1c..7150b683 100644
--- a/seller/src/views/order/after-order/returnGoodsOrder.vue
+++ b/seller/src/views/order/after-order/returnGoodsOrder.vue
@@ -1,369 +1,374 @@
 <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="goodsName">
-            <Input
-              type="text"
-              v-model="searchForm.goodsName"
-              clearable
-              placeholder="请输入商品名称"
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="会员名称" prop="memberName">
-            <Input
-              type="text"
-              v-model="searchForm.memberName"
-              clearable
-              placeholder="请输入会员名称"
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="订单编号" prop="orderSn">
-            <Input
-              type="text"
-              v-model="searchForm.orderSn"
-              clearable
-              placeholder="请输入订单编号"
-              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" class="search-btn">搜索</Button>
-          <Button @click="handleReset" class="search-btn">重置</Button>
-        </Form>
-      </Row>
-      </Card>
-    <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"/>
-        </Tabs>
-      </div>
-      <Table
-        :loading="loading"
-        class="mt_10"
-        :columns="columns"
-        :data="data"
-        ref="table"
+    <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"
+          >
+            <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>
 
-        <!-- 商品栏目格式化 -->
-        <template slot="goodsSlot" slot-scope="{row}">
-          <div style="margin-top: 5px;height: 60px; display: flex;">
-            <div style="">
-              <img :src="row.goodsImage" style="height: 50px;margin-top: 3px">
-            </div>
+    <el-card>
+      <div class="order-tab">
+        <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>
 
-            <div style="margin-left: 13px;">
-              <div class="div-zoom">
-                <a @click="linkTo(row.goodsId,row.skuId)">{{row.goodsName}}</a>
+      <el-table
+        ref="table"
+        v-loading="loading"
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <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>
-          </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>
 
-        </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 * as API_Order from "@/api/order";
 
-  export default {
-    name: "returnGoodsOrder",
-    components: {},
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-          // serviceType:"RETURN_GOODS",
-          orderSn:"",
-          memberName:"",
-          goodsName:""
+export default {
+  name: "after-sale-order",
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
+        orderSn: "",
+        memberName: "",
+        serviceStatus: "",
+        storeName: "",
+        sn: "",
+        keywords: "",
+      },
+      selectDate: null,
+      data: [],
+      total: 0,
+      currentStatus: "",
+      afterSaleNumData: {},
+    };
+  },
+  computed: {
+    serviceStatusWithCount() {
+      return [
+        { title: "全部", value: "" },
+        {
+          title: `申请售后${this.afterSaleNumData.applyNum ? "(" + this.afterSaleNumData.applyNum + ")" : ""}`,
+          value: "APPLY",
         },
-        selectDate: null,
-        columns: [
-
-          {
-            title: "售后单号",
-            key: "sn",
-            minWidth: 150,
-          },
-          {
-            title: "订单号",
-            key: "orderSn",
-            minWidth: 150,
-          },
-
-          {
-            title: "商品",
-            key: "sn",
-            minWidth: 200,
-            slot: "goodsSlot",
-
-          },
-          {
-            title: "申请退款金额",
-            key: "applyRefundPrice",
-            width: 130,
-            render: (h, params) => {
-              return h("priceColorScheme", {props:{value:params.row.applyRefundPrice,color:this.$mainColor}} );
-            },
-
-          },
-          {
-            title: "会员名称",
-            key: "memberName",
-            minWidth: 120,
-          },
-          {
-            title: "会员ID",
-            key: "memberId",
-            minWidth: 120,
-          },
-          {
-            title: "状态",
-            align: "center",
-            key: "serviceStatus",
-            width: 200,
-            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: 170
-          },
-          {
-            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);
-                      },
-                    },
-                  },
-                  "查看"
-                ),
-              ]);
-            },
-          },
-        ],
-        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'},
-          {title: '等待平台退款', value: 'WAIT_REFUND'}
-        ],
-        currentStatus: '',
-        afterSaleNumData: {} // 售后数量统计数据
+        {
+          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 || "-";
     },
-    methods: {
-      // 初始化数据
-      init() {
-        this.getDataList();
-        this.getAfterSaleNumData();
-      },
-      // 改变页码
-      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();
-        this.getAfterSaleNumData();
-      },
-      // 重置
-      handleReset() {
-        const defaultForm = {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-          // serviceType:"RETURN_GOODS",
-          orderSn:"",
-          memberName:"",
-          goodsName:""
-        }
-        this.searchForm = defaultForm;
-        this.selectDate = ''
-        this.getDataList();
-        this.getAfterSaleNumData();
-      },
-      // 范围时间选择格式化
-      selectDateRange(v) {
-        if (v) {
-          this.searchForm.startDate = v[0];
-          this.searchForm.endDate = v[1];
-        }
-      },
-      // 获取列表数据
-      getDataList() {
-        this.loading = true;
-        API_Order.afterSaleOrderPage(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;
-      },
-      // 获取售后数量统计
-      getAfterSaleNumData() {
-        const { serviceStatus, ...searchParams } = this.searchForm;
-        API_Order.getAfterSaleNumVO(searchParams).then((res) => {
-          if (res.success) {
-            this.afterSaleNumData = res.result;
-          }
-        });
-      },
-      // 退货订单详情
-      detail(v) {
-        let sn = v.sn;
-        this.$options.filters.customRouterPush({
-          name: "return-goods-order-detail",
-          query: { sn: sn },
-        })
-
-      },
-      // 售后筛选
-      serviceStatusClick(item) {
-        this.currentStatus = item;
-        // 如果是全部（空字符串），则删除serviceStatus字段
-        if (item === 0) {
-          delete this.searchForm.serviceStatus;
-        } else {
-          this.searchForm.serviceStatus = item;
-        }
-        this.getDataList();
-        this.getAfterSaleNumData();
-      },
+    serviceTypeTagType(type) {
+      const map = {
+        RETURN_MONEY: "primary",
+        RETURN_GOODS: "warning",
+        EXCHANGE_GOODS: "success",
+      };
+      return map[type] || "info";
     },
-    mounted () {
-      this.init();
+    serviceStatusText(status) {
+      const map = {
+        APPLY: "申请中",
+        PASS: "通过售后",
+        REFUSE: "拒绝售后",
+        BUYER_RETURN: "买家退货，待卖家收货",
+        SELLER_CONFIRM: "卖家确认收货",
+        SELLER_TERMINATION: "卖家终止售后",
+        BUYER_CANCEL: "买家取消售后",
+        COMPLETE: "完成售后",
+        WAIT_REFUND: "待平台退款",
+      };
+      return map[status] || status || "-";
     },
-    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'}
-        ];
+    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() {
+      this.getDataList();
+    },
+    changePageSize() {
+      this.searchForm.pageNumber = 1;
+      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 = "";
       }
     },
-    // 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
-    beforeRouteLeave(to, from, next) {
-      from.meta.keepAlive = false
-      next()
-    }
-  };
+    getDataList() {
+      this.loading = true;
+      API_Order.getAfterSaleOrderPage(this.searchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+    },
+    getAfterSaleNumData() {
+      const { serviceStatus, ...searchParams } = this.searchForm;
+      API_Order.getAfterSaleNumVO(searchParams).then((res) => {
+        if (res.success) {
+          this.afterSaleNumData = res.result;
+        }
+      });
+    },
+    detail(v) {
+      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;
+      if (item === "" || item === undefined) {
+        delete this.searchForm.serviceStatus;
+      } else {
+        this.searchForm.serviceStatus = item;
+      }
+      this.getDataList();
+      this.getAfterSaleNumData();
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
-<style lang="scss">
-  // 建议引入通用样式 可删除下面样式代码
-   @import "@/styles/table-common.scss";
-   // Tab组件样式
-  .order-tab {
-    ::v-deep .ivu-tabs-tab {
-      font-size: 14px;
-    }
+
+<style lang="scss" scoped>
+.order-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/seller/src/views/order/after-order/returnMoneyOrder.vue b/seller/src/views/order/after-order/returnMoneyOrder.vue
index c5aced1d..fdff43a4 100644
--- a/seller/src/views/order/after-order/returnMoneyOrder.vue
+++ b/seller/src/views/order/after-order/returnMoneyOrder.vue
@@ -1,298 +1,197 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="商品" prop="goodsName">
-          <Input
-            type="text"
-            v-model="searchForm.goodsName"
-            clearable
-            placeholder="请输入商品名称"
-            style="width: 240px"
-          />
-        </Form-item>
-        <Form-item label="会员名称" prop="memberName">
-          <Input
-            type="text"
-            v-model="searchForm.memberName"
-            clearable
-            placeholder="请输入会员名称"
-            style="width: 240px"
-          />
-        </Form-item>
-        <Form-item label="订单编号" prop="orderSn">
-          <Input
-            type="text"
-            v-model="searchForm.orderSn"
-            clearable
-            placeholder="请输入订单编号"
-            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" class="search-btn">搜索</Button>
-        <Button @click="handleReset" class="search-btn">重置</Button>
-      </Form>
-    </Card>
-        <Card>
-      <Table
-        :loading="loading"
-        border
-        class="mt_10"
-        :columns="columns"
-        :data="data"
-
-        ref="table"
-      >
-
-        <!-- 商品栏目格式化 -->
-        <template slot="goodsSlot" slot-scope="{row}">
-          <div style="margin-top: 5px;height: 90px; display: flex;">
-            <div style="">
-              <img :src="row.goodsImage" style="height: 80px;margin-top: 3px">
-            </div>
-
-            <div style="margin-left: 13px;">
-              <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>
-                </div>
-                <img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="">
-              </Poptip>
-            </div>
+    <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>
 
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+      <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"
-          :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>
+
+    <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 {
-    name: "returnMoneyOrder",
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-          serviceType:"RETURN_MONEY",
-          orderSn:"",
-          memberName:"",
-          goodsName:""
-        },
-        selectDate: null,
-        submitLoading: false, // 添加或编辑提交状态
-        columns: [
-          // 表头
-          {
-            title: "退款编号",
-            key: "sn",
-            minWidth: 150,
-          },
-          {
-            title: "订单号",
-            key: "orderSn",
-            minWidth: 150,
-          },
-
-          {
-            title: "商品",
-            key: "sn",
-            minWidth: 250,
-            sortable: false,
-            slot: "goodsSlot",
-          },
-          {
-            title: "申请退款金额",
-            key: "applyRefundPrice",
-            width: 130,
-            render: (h, params) => {
-              return h("priceColorScheme", {props:{value:params.row.applyRefundPrice,color:this.$mainColor}} );
-            },
-
-          },
-          {
-            title: "会员",
-            key: "memberName",
-            minWidth: 130,
-            tooltip: true
-          },
-          {
-            title: "申请时间",
-            key: "createTime",
-            width: 170
-          },
-          {
-            title: "售后状态",
-            key: "serviceStatus",
-            minWidth: 120,
-            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_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: "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);
-                      },
-                    },
-                  },
-                  "查看"
-                ),
-              ]);
-            },
-          },
-        ],
-        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: {
-      // 初始化数据
-      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();
-      },
-      // 重置
-      handleReset() {
-        this.searchForm = {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-          serviceType:"RETURN_MONEY",
-          orderSn:"",
-          memberName:"",
-          goodsName:""
-        }
-        this.selectDate = ''
-
-        this.getDataList();
-      },
-      // 范围时间重新赋值
-      selectDateRange(v) {
-        if (v) {
-          this.searchForm.startDate = v[0];
-          this.searchForm.endDate = v[1];
-        }
-      },
-      // 获取列表数据
-      getDataList() {
-        this.loading = true;
-        API_Order.afterSaleOrderPage(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(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;
-      },
-      // 退款订单详情
-      detail(v) {
-        let sn = v.sn;
-        this.$options.filters.customRouterPush({
-          name: "return-goods-order-detail",
-          query: { sn: sn },
-        })
-
-      },
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
     },
-    mounted() {
-      this.init();
+    add() {
+      this.form.reason = "";
+      this.modalVisible = true;
+      this.modalTitle = "添加售后原因";
     },
-    // 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
-    beforeRouteLeave(to, from, next) {
-      from.meta.keepAlive = false
-      next()
-    }
-  };
+    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 lang="scss">
-  // 建议引入通用样式 可删除下面样式代码
-   @import "@/styles/table-common.scss";
+<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/seller/src/views/order/after-order/reurnGoodsOrderDetail.vue b/seller/src/views/order/after-order/reurnGoodsOrderDetail.vue
index 299f305e..73f66690 100644
--- a/seller/src/views/order/after-order/reurnGoodsOrderDetail.vue
+++ b/seller/src/views/order/after-order/reurnGoodsOrderDetail.vue
@@ -1,314 +1,297 @@
 <template>
   <div class="search">
-    <Row>
-      <Col>
-      <Card>
-        <div class="main-content">
-          <div class="div-flow-left">
-            <div class="div-form-default">
-              <h3>售后申请</h3>
-              <dl>
-                <dt>售后商品</dt>
-                <dd>
-                  <div>
-                    <img :src="afterSaleInfo.goodsImage" style="height: 60px">
-                  </div>
-                  <a>{{ afterSaleInfo.goodsName }}</a><br>
-                  <span>{{ afterSaleInfo.num }}(数量)</span>
-                </dd>
+    <el-card>
+      <div class="main-content">
+        <div class="div-flow-left">
+          <div class="div-form-default">
+            <h3>退货申请</h3>
+            <dl>
+              <dt>退货商品</dt>
+              <dd>
+                <div>
+                  <img :src="afterSaleInfo.goodsImage" style="height: 60px">
+                </div>
+                <a @click="linkTo(afterSaleInfo.goodsId, afterSaleInfo.skuId)">{{ afterSaleInfo.goodsName }}
+                </a><br>
 
-              </dl>
+                <span>{{ afterSaleInfo.num }}(数量)</span>
 
-              <dl>
-                <dt>退货退款编号</dt>
-                <dd>{{ afterSaleInfo.sn }}</dd>
-              </dl>
-              <dl>
-                <dt>售后状态</dt>
-                <dd>{{ filterStatus(afterSaleInfo.serviceStatus) }}</dd>
-              </dl>
-              <dl>
-                <dt>退货退款原因</dt>
-                <dd>{{ afterSaleInfo.reason }}</dd>
-              </dl>
-              <dl>
-                <dt>申请退款金额</dt>
-                <dd>
-                  <priceColorScheme :value="afterSaleInfo.applyRefundPrice" :color="$mainColor" />
-                </dd>
-              </dl>
-              <dl v-if="afterSaleInfo.actualRefundPrice">
-                <dt>实际退款金额</dt>
-                <dd>{{ afterSaleInfo.actualRefundPrice | unitPrice('￥') }}</dd>
-              </dl>
-              <dl v-if="afterSaleInfo.refundPoint">
-                <dt>退还积分</dt>
-                <dd>{{ afterSaleInfo.refundPoint }}</dd>
-              </dl>
-              <dl>
-                <dt>退货数量</dt>
-                <dd>{{ afterSaleInfo.num }}</dd>
-              </dl>
-              <dl>
-                <dt>问题描述</dt>
-                <dd>{{ afterSaleInfo.problemDesc }}</dd>
-              </dl>
-              <dl>
-                <dt>凭证</dt>
-                <dd v-if="afterSaleImage == ''">
-                  暂无凭证
-                </dd>
-                <dd v-else>
-                  <div class="div-img" @click="()=>{picFile=item; picVisible = true}" v-for="(item, index) in afterSaleImage" :key="index">
-                    <img class="complain-img" :src="item">
-
-                  </div>
-
-                  <Modal footer-hide mask-closable v-model="picVisible">
-                    <img :src="picFile" alt="无效的图片链接" style="width: 100%; margin: 0 auto; display: block" />
-                  </Modal>
-
-                </dd>
-              </dl>
-            </div>
-
-            <div class="div-form-default" v-if="afterSaleInfo.serviceStatus=='APPLY'">
-              <h3>商家处理意见</h3>
-              <dl>
-                <dt>商家</dt>
-                <dd>
-                  <div class="div-content">
-                    {{ afterSaleInfo.storeName }}
-                  </div>
-
-                </dd>
-              </dl>
-              <dl>
-                <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>
-                  </div>
-
-                </dd>
-              </dl>
-
-              <dl>
-                <dt>申请退款金额</dt>
-                <dd>
-                  <priceColorScheme :value="afterSaleInfo.applyRefundPrice" :color="$mainColor" />
-                </dd>
-              </dl>
-              <dl v-if="params.serviceStatus == 'PASS'">
-                <dt>实际退款金额</dt>
-                <dd>
-                  <InputNumber :min="0" v-model="params.actualRefundPrice" style="width:260px" />
-                </dd>
-              </dl>
-              <dl>
-                <dt>备注信息</dt>
-                <dd>
-                  <Input v-model="params.remark" type="textarea" maxlength="200" :rows="4" clearable style="width:260px" />
-                </dd>
-              </dl>
-              <dl>
-                <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>
-                  </div>
-                </dd>
-              </dl>
-            </div>
-            <div class="div-form-default" v-if="afterSaleInfo.serviceStatus !='APPLY'">
-              <h3>商家处理</h3>
-              <dl>
-                <dt>商家</dt>
-                <dd>
-                  <div class="div-content">
-                    {{ afterSaleInfo.storeName }}
-                  </div>
-
-                </dd>
-              </dl>
-              <dl>
-                <dt>审核结果</dt>
-                <dd>
-                  <div class="div-content">
-                    <span v-if="params.serviceStatus=='PASS'">
-                      审核通过
-                    </span>
-                    <span v-else>
-                      审核拒绝
-                    </span>
-                  </div>
-
-                </dd>
-              </dl>
-              <dl>
-                <dt>备注信息</dt>
-                <dd>
-                  {{ afterSaleInfo.auditRemark }}
-                </dd>
-              </dl>
-            </div>
+              </dd>
+            </dl>
+            <dl>
+              <dt>售后状态</dt>
+              <dd>{{ afterSaleInfo.serviceName }}</dd>
+            </dl>
+            <dl>
+              <dt>退货退款编号</dt>
+              <dd>{{ afterSaleInfo.sn }}</dd>
+            </dl>
+            <dl>
+              <dt>退货退款原因</dt>
+              <dd>{{ afterSaleInfo.reason }}</dd>
+            </dl>
+            <dl>
+              <dt>申请退款金额</dt>
+              <dd>
+                <priceColorScheme :value="afterSaleInfo.applyRefundPrice" :color="$mainColor"></priceColorScheme>
+              </dd>
+            </dl>
+            <dl v-if="afterSaleInfo.actualRefundPrice">
+              <dt>实际退款金额</dt>
+              <dd>
+                <priceColorScheme :value="afterSaleInfo.actualRefundPrice" :color="$mainColor"></priceColorScheme>
+              </dd>
+            </dl>
+            <dl v-if="afterSaleInfo.refundPoint">
+              <dt>退还积分</dt>
+              <dd>{{ afterSaleInfo.refundPoint }}</dd>
+            </dl>
+            <dl>
+              <dt>退货数量</dt>
+              <dd>{{ afterSaleInfo.num }}</dd>
+            </dl>
+            <dl>
+              <dt>问题描述</dt>
+              <dd>{{ afterSaleInfo.problemDesc }}</dd>
+            </dl>
+            <dl>
+              <dt>凭证</dt>
+              <dd v-if="afterSaleImage == ''">暂无凭证</dd>
+              <dd v-else>
+                <div class="div-img" v-for="(item, index) in afterSaleImage" :key="index">
+                  <img class="complain-img" :src="item" />
+                </div>
+              </dd>
+            </dl>
           </div>
-          <div class="div-flow-center">
 
+          <div class="div-form-default" v-if="afterSaleInfo.serviceStatus == 'APPLY'">
+            <h3>处理意见</h3>
+            <dl>
+              <dt>商家</dt>
+              <dd>
+                <div class="div-content">
+                  {{ afterSaleInfo.storeName }}
+                </div>
+              </dd>
+            </dl>
+            <dl>
+              <dt>是否同意</dt>
+              <dd>
+                <div class="div-content">
+                  <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>
+            <dl>
+              <dt>申请退款金额</dt>
+              <dd>
+                <priceColorScheme :value="afterSaleInfo.applyRefundPrice" :color="$mainColor"></priceColorScheme>
+              </dd>
+            </dl>
+            <dl>
+              <dt>实际退款金额</dt>
+              <dd>
+                <el-input-number :min="0" v-model="params.actualRefundPrice" style="width: 260px" />
+              </dd>
+            </dl>
+            <dl>
+              <dt>备注信息</dt>
+              <dd>
+                <el-input
+                  v-model="params.remark"
+                  type="textarea"
+                  maxlength="200"
+                  :rows="4"
+                  clearable
+                  style="width: 260px"
+                />
+              </dd>
+            </dl>
+            <dl>
+              <dd>
+                <div style="text-align: right; width: 45%; margin-top: 10px">
+                  <el-button
+                    type="primary"
+                    :loading="submitLoading"
+                    @click="handleSubmit"
+                    style="margin-left: 5px"
+                  >
+                    确定
+                  </el-button>
+                </div>
+              </dd>
+            </dl>
           </div>
-          <div class="div-flow-right">
-            <div class="div-form-default">
-              <h3>订单相关信息</h3>
-              <dl>
-                <dt>
-                  订单编号
-                </dt>
-                <dd>
-                  {{ afterSaleInfo.orderSn }}
-                </dd>
-              </dl>
-              <dl v-if="afterSaleInfo.bankDepositName">
-                <dt>银行开户行</dt>
-                <dd>
-                  {{afterSaleInfo.bankDepositName}}
-                </dd>
-              </dl>
-              <dl v-if="afterSaleInfo.bankAccountName">
-                <dt>银行开户名</dt>
-                <dd>
-                  {{afterSaleInfo.bankAccountName}}
-                </dd>
-              </dl>
-              <dl v-if="afterSaleInfo.bankAccountNumber">
-                <dt>银行卡号</dt>
-                <dd>
-                  {{afterSaleInfo.bankAccountNumber}}
-                </dd>
-              </dl>
-
-            </div>
-            <div class="div-form-default" v-if="afterSaleInfo.serviceStatus =='BUYER_RETURN' || afterSaleInfo.serviceStatus =='COMPLETE' &&  afterSaleInfo.serviceType !='RETURN_MONEY'">
-              <h3>回寄物流信息</h3>
-              <dl>
-                <dt>
-                  物流公司
-                </dt>
-                <dd>
-                  {{ afterSaleInfo.mlogisticsName }}
-                </dd>
-              </dl>
-              <dl>
-                <dt>
-                  物流单号
-                </dt>
-                <dd>
-                  {{ afterSaleInfo.mlogisticsNo }}
-                </dd>
-              </dl>
-              <dl>
-                <dt>操作</dt>
-                <dd>
-                  <Button type="info" :loading="submitLoading" @click="sellerConfirmSubmit('PASS')" style="margin-left: 5px" v-if="afterSaleInfo.afterSaleAllowOperationVO.rog">
-                    确认收货
-                  </Button>
-                  <Button type="primary" :loading="submitLoading" @click="sellerConfirmSubmit('REFUSE')" style="margin-left: 5px" v-if="afterSaleInfo.afterSaleAllowOperationVO.rog">
-                    拒收
-                  </Button>
-                  <Button type="default" :loading="submitLoading" @click="logisticsBuyer()" style="margin-left: 5px">
-                    查询物流
-                  </Button>
-                </dd>
-              </dl>
-
-            </div>
-            <div class="div-form-default" v-if="afterSaleInfo.afterSaleAllowOperationVO.return_goods && afterSaleInfo.serviceType == 'EXCHANGE_GOODS'">
-              <h3>换货</h3>
-              <dl>
-                <dt>
-                  换货
-                </dt>
-                <dd>
-                  <Button type="primary" :loading="submitLoading" @click="exchangeGoods" style="margin-left: 5px">
-                    发货
-                  </Button>
-                </dd>
-              </dl>
-            </div>
-            <div class="div-form-default" v-if=" afterSaleInfo.serviceType == 'EXCHANGE_GOODS' && afterSaleInfo.serviceStatus =='SELLER_RE_DELIVERY'">
-              <h3>物流信息</h3>
-              <dl>
-                <dt>
-                  物流公司
-                </dt>
-                <dd>
-                  {{ afterSaleInfo.slogisticsName }}
-                </dd>
-              </dl>
-              <dl>
-                <dt>
-                  物流单号
-                </dt>
-                <dd>
-                  {{ afterSaleInfo.slogisticsNo }}
-                </dd>
-              </dl>
-              <dl>
-                <dt>操作</dt>
-                <dd>
-                  <Button type="primary" :loading="submitLoading" @click="logisticsSeller()" style="margin-left: 5px">
-                    查询物流
-                  </Button>
-                </dd>
-              </dl>
-
-            </div>
+          <div class="div-form-default" v-if="afterSaleInfo.serviceStatus != 'APPLY'">
+            <h3>商家处理</h3>
+            <dl>
+              <dt>商家</dt>
+              <dd>
+                <div class="div-content">
+                  {{ afterSaleInfo.storeName }}
+                </div>
+              </dd>
+            </dl>
+            <!-- <dl>
+              <dt>审核结果</dt>
+              <dd>
+                <div class="div-content">
+                  <span v-if="params.serviceStatus=='PASS'">
+                    审核通过
+                  </span>
+                  <span v-else>
+                    审核拒绝
+                  </span>
+                </div>
 
+              </dd>
+            </dl> -->
+            <dl>
+              <dt>备注信息</dt>
+              <dd>
+                {{ afterSaleInfo.auditRemark || "暂无备注信息" }}
+              </dd>
+            </dl>
+          </div>
+        </div>
+        <div class="div-flow-center"></div>
+        <div class="div-flow-right">
+          <div class="div-form-default">
+            <h3>订单相关信息</h3>
+            <dl>
+              <dt>订单编号</dt>
+              <dd>
+                {{ afterSaleInfo.orderSn }}
+              </dd>
+            </dl>
+            <dl v-if="afterSaleInfo.bankDepositName">
+              <dt>银行开户行</dt>
+              <dd>
+                {{ afterSaleInfo.bankDepositName }}
+              </dd>
+            </dl>
+            <dl v-if="afterSaleInfo.bankAccountName">
+              <dt>银行开户名</dt>
+              <dd>
+                {{ afterSaleInfo.bankAccountName }}
+              </dd>
+            </dl>
+            <dl v-if="afterSaleInfo.bankAccountNumber">
+              <dt>银行卡号</dt>
+              <dd>
+                {{ afterSaleInfo.bankAccountNumber }}
+              </dd>
+            </dl>
+          </div>
+          <div
+            class="div-form-default"
+            v-if="
+              afterSaleInfo.afterSaleAllowOperationVO &&
+              afterSaleInfo.afterSaleAllowOperationVO.refund
+            "
+          >
+            <h3>平台退款</h3>
+            <dl>
+              <dt>银行开户行</dt>
+              <dd>
+                {{ afterSaleInfo.bankDepositName }}
+              </dd>
+            </dl>
+            <dl>
+              <dt>银行开户名</dt>
+              <dd>
+                {{ afterSaleInfo.bankAccountName }}
+              </dd>
+            </dl>
+            <dl>
+              <dt>银行卡号</dt>
+              <dd>
+                {{ afterSaleInfo.bankAccountNumber }}
+              </dd>
+            </dl>
+            <dl>
+              <dt>备注信息</dt>
+              <dd>
+                <el-input
+                  v-model="refundPriceForm.remark"
+                  type="textarea"
+                  maxlength="200"
+                  :rows="4"
+                  clearable
+                  style="width: 260px"
+                />
+              </dd>
+            </dl>
+            <dl>
+              <dt>操作</dt>
+              <dd>
+                <el-button
+                  type="primary"
+                  :loading="submitLoading"
+                  @click="refundPriceSubmit"
+                  style="margin-left: 5px"
+                >
+                  退款
+                </el-button>
+              </dd>
+            </dl>
+          </div>
+          <div
+            class="div-form-default"
+            v-if="
+              afterSaleInfo.showDelivery && afterSaleInfo.serviceType === 'RETURN_GOODS'
+            "
+          >
+            <h3>物流信息</h3>
+            <dl>
+              <dt>收货商家</dt>
+              <dd>{{ afterSaleInfo.storeName }}</dd>
+            </dl>
+            <dl>
+              <dt>收货商家手机</dt>
+              <dd>{{ storeMsg.salesConsigneeMobile }}</dd>
+            </dl>
+            <dl>
+              <dt>收货地址</dt>
+              <dd>
+                {{ storeMsg.salesConsigneeAddressPath }}
+                {{ storeMsg.salesConsigneeDetail }}
+              </dd>
+            </dl>
+            <dl>
+              <dt>物流公司</dt>
+              <dd>{{ afterSaleInfo.mlogisticsName }}</dd>
+            </dl>
+            <dl>
+              <dt>物流单号</dt>
+              <dd>
+                {{ afterSaleInfo.mlogisticsNo }}
+              </dd>
+            </dl>
+            <dl>
+              <dt>操作</dt>
+              <dd>
+                <el-button
+                  type="primary"
+                  plain
+                  :loading="submitLoading"
+                  @click="logisticsSeller()"
+                  style="margin-left: 5px"
+                >
+                  查询物流
+                </el-button>
+              </dd>
+            </dl>
           </div>
         </div>
-
-      </Card>
-      </Col>
-    </Row>
-    <!-- 订单发货 -->
-    <Modal v-model="modalVisible" width="500px">
-      <p slot="header">
-        <span>订单发货</span>
-      </p>
-      <div>
-        <Form ref="form" :model="form" :label-width="90" :rules="formValidate" style="position:relative">
-          <FormItem label="物流公司" prop="logisticsId">
-            <Select v-model="form.logisticsId" placeholder="请选择" style="width:250px">
-              <Option v-for="(item, i) in checkedLogistics" :key="i" :value="item.id">{{ item.name }}
-              </Option>
-            </Select>
-          </FormItem>
-          <FormItem label="物流单号" prop="logisticsNo">
-            <Input v-model="form.logisticsNo" style="width:250px" />
-          </FormItem>
-        </Form>
-
       </div>
-
-      <div slot="footer" style="text-align: right">
-        <Button size="large" @click="modalVisible = false">取消</Button>
-        <Button type="success" size="large" @click="orderDeliverySubmit">发货</Button>
-
-      </div>
-    </Modal>
+    </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>
@@ -319,92 +302,101 @@
         <dl>
           <dt>物流公司：</dt>
           <dd>
-            <div class="text-box">{{ logisticsInfo.shipper }}</div>
+            <div class="text-box">{{ afterSaleInfo.mlogisticsName }}</div>
           </dd>
         </dl>
         <dl>
           <dt>物流单号：</dt>
           <dd>
-            <div nctype="ordersSn" class="text-box">{{ logisticsInfo.logisticCode }}</div>
+            <div class="text-box">{{ afterSaleInfo.mlogisticsNo }}</div>
           </dd>
         </dl>
         <div class="div-express-log">
           <ul class="express-log">
-            <li v-for="(item,index) in logisticsInfo.traces" :key="index">
-              <span class="time">{{ item.AcceptTime }}</span>
-              <span class="detail">{{ item.AcceptStation }}</span>
-            </li>
+            <template v-if="Object.keys(logisticsInfo).length">
+              <li v-for="(item, index) in logisticsInfo.traces" :key="index">
+                <span class="time">{{ item.AcceptTime }}</span>
+                <span class="detail">{{ item.AcceptStation }}</span>
+              </li>
+            </template>
+            <template v-else>
+              <li style="text-align: center">暂无物流信息</li>
+            </template>
           </ul>
         </div>
-
       </div>
-
-      <div slot="footer" style="text-align: right">
-        <Button @click="logisticsModal = false">取消</Button>
-      </div>
-    </Modal>
+      <template #footer>
+        <el-button @click="logisticsClose">取消</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import * as API_Order from "@/api/order";
-import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
-
+import vueQr from "vue-qr";
 export default {
-  name: "orderComplaint",
   components: {
-    uploadPicThumb,
+    "vue-qr": vueQr,
   },
+  name: "orderDetail",
   data() {
     return {
-      picFile: "", // 预览图片地址
-      picVisible: false, // 预览图片
       sn: "", // 订单号
       logisticsModal: false, //查询物流模态框
+
       logisticsInfo: {}, //物流信息
-      form: {
-        // 物流信息
-        logisticsNo: "",
-        logisticsId: "",
-      }, //换货发货form
-      formValidate: {
-        logisticsNo: [
-          { required: true, message: "发货单号不能为空", trigger: "change" },
-        ],
-        logisticsId: [
-          { required: true, message: "请选择物流公司", trigger: "blur" },
-        ],
-      },
-      modalVisible: false, // 添加或编辑显示
-      afterSaleInfo: {
-        // 售后信息
-        afterSaleAllowOperationVO: {
-          return_goods: false,
-        },
-      },
+      afterSaleInfo: {}, // 售后信息
       afterSaleImage: [], //会员申诉图片
-      appealImages: [], //商家申诉的图片
       submitLoading: false, // 添加或编辑提交状态
-      checkedLogistics: [], //选中的物流公司集合
+      storeMsg: {}, // 商家地址信息
       //商家处理意见
       params: {
         serviceStatus: "PASS",
         remark: "",
-        actualRefundPrice: 0,
       },
-      // 售后状态
-      afterSaleStatus: [
-        { status: "APPLY", label: "申请中" },
-        { status: "PASS", label: "通过售后" },
-        { status: "REFUSE", label: "拒绝售后" },
-        { status: "BUYER_RETURN", label: "买家退货，待卖家收货" },
-        { status: "SELLER_RE_DELIVERY", label: "商家换货" },
-        { status: "SELLER_CONFIRM", label: "卖家确认收货" },
-        { status: "SELLER_TERMINATION", label: "卖家终止售后" },
-        { status: "BUYER_CONFIRM", label: "买家确认收货" },
-        { status: "BUYER_CANCEL", label: "买家取消售后" },
-        { status: "WAIT_REFUND", label: "待平台退款" },
-        { status: "COMPLETE", label: "完成售后" },
+      //平台退款
+      refundPriceForm: {
+        remark: "",
+      },
+      afterSaleStatusList: [
+        // 售后状态列表
+        {
+          name: "申请中",
+          status: "APPLY",
+        },
+        {
+          name: "通过售后",
+          status: "PASS",
+        },
+        {
+          name: "拒绝售后",
+          status: "REFUSE",
+        },
+        {
+          name: "买家退货，待卖家收货",
+          status: "BUYER_RETURN",
+        },
+        {
+          name: "卖家确认收货",
+          status: "SELLER_CONFIRM",
+        },
+        {
+          name: "卖家终止售后",
+          status: "SELLER_TERMINATION",
+        },
+        {
+          name: "买家取消售后",
+          status: "BUYER_CANCEL",
+        },
+        {
+          name: "完成售后",
+          status: "COMPLETE",
+        },
+        {
+          name: "待平台退款",
+          status: "WAIT_REFUND",
+        },
       ],
     };
   },
@@ -412,46 +404,56 @@ export default {
     // 获取售后详情
     getDetail() {
       this.loading = true;
-      API_Order.afterSaleOrderDetail(this.sn).then((res) => {
+      API_Order.getAfterSaleOrderDetail(this.sn).then((res) => {
         this.loading = false;
         if (res.success) {
           this.afterSaleInfo = res.result;
+          this.afterSaleInfo.showDelivery = this.showDelivery(
+            this.afterSaleInfo.serviceStatus
+          );
+          this.afterSaleInfo.serviceName = this.filterOrderStatus(
+            this.afterSaleInfo.serviceStatus
+          );
           this.afterSaleImage = (res.result.afterSaleImage || "").split(",");
-          this.params.actualRefundPrice = res.result.applyRefundPrice;
-        }
-      });
-    },
-    //换货弹出框
-    exchangeGoods() {
-      API_Order.getLogisticsChecked().then((res) => {
-        if (res.success) {
-          this.checkedLogistics = res.result;
-          this.modalVisible = true;
-          this.getDetail();
-        }
-      });
-    },
-    //商家确认收货
-    sellerConfirmSubmit(type) {
-      let title = "确认收货";
-      let content = "请确认已经收到退货货物?";
-      let message = "收货成功";
-      if (type !== "PASS") {
-        title = "确认拒收";
-        content = "确认拒收此货物？";
-        message = "拒收成功";
-        this.params.serviceStatus = "REFUSE";
-      }
+          //退货地址去掉逗号
+          if (this.afterSaleInfo.mconsigneeAddressPath)
+            this.afterSaleInfo.mconsigneeAddressPath = this.afterSaleInfo.mconsigneeAddressPath.replaceAll(
+              ",",
+              " "
+            );
 
+          this.params.actualRefundPrice = this.afterSaleInfo.applyRefundPrice;
+          // 如果显示物流信息，展示商家地址
+          if (this.afterSaleInfo.showDelivery) {
+            API_Order.storeAddress(this.sn).then((resu) => {
+              if (resu.success) {
+                const obj = resu.result;
+                obj.salesConsigneeAddressPath = obj.salesConsigneeAddressPath.replaceAll(
+                  ",",
+                  ""
+                );
+                this.storeMsg = obj;
+              }
+            });
+          }
+        }
+      });
+    },
+    //平台退款
+    refundPriceSubmit() {
+      if (this.refundPriceForm.remark == "") {
+        this.$Message.error("请输入退款备注");
+        return;
+      }
       this.$Modal.confirm({
-        title: title,
-        content: content,
+        title: "确认退款",
+        content: "请确认退款？",
         loading: true,
         onOk: () => {
-          API_Order.afterSaleSellerConfirm(this.sn, this.params).then((res) => {
+          API_Order.refundPrice(this.sn, this.refundPriceForm).then((res) => {
             this.$Modal.remove();
             if (res.success) {
-              this.$Message.success(message);
+              this.$Message.success("收款成功");
               this.getDetail();
             }
           });
@@ -460,15 +462,6 @@ export default {
     },
     //查询物流
     logisticsSeller() {
-      this.logisticsModal = true;
-      API_Order.getSellerDeliveryTraces(this.sn).then((res) => {
-        if (res.success && res.result != null) {
-          this.logisticsInfo = res.result;
-        }
-      });
-    },
-    //查询物流
-    logisticsBuyer() {
       this.logisticsModal = true;
       API_Order.getAfterSaleTraces(this.sn).then((res) => {
         if (res.success && res.result != null) {
@@ -476,27 +469,18 @@ export default {
         }
       });
     },
-
-    //换货发货
-    orderDeliverySubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          API_Order.afterSaleSellerDelivery(this.sn, this.form).then((res) => {
-            if (res.success) {
-              this.$Message.success("订单发货成功");
-              this.modalVisible = false;
-              this.getDataDetail();
-            }
-          });
-        }
-      });
+    //关闭物流弹出框
+    logisticsClose() {
+      this.logisticsModal = false;
     },
     //回复
     handleSubmit() {
-      this.submitLoading = true;
       if (this.params.remark == "") {
         this.$Message.error("请输入备注信息");
-        this.submitLoading = false;
+        return;
+      }
+      if (this.params.actualRefundPrice == "") {
+        this.$Message.error("请输入退款金额");
         return;
       }
       API_Order.afterSaleSellerReview(this.sn, this.params).then((res) => {
@@ -507,39 +491,36 @@ export default {
           this.getDetail();
         }
       });
-       this.submitLoading = false;
     },
-    // 返回售后状态中文描述
-    filterStatus(status) {
-      let label = '';
-      for (let i = 0; i < this.afterSaleStatus.length; i++) {
-        const obj = this.afterSaleStatus[i];
-        if (obj.status === status) {
-          label = obj.label;
-          break;
+    filterOrderStatus(status) {
+      // 获取订单状态中文
+      const ob = this.afterSaleStatusList.filter((e) => {
+        return e.status === status;
+      });
+      return ob.length > 0 ? ob[0].name : status;
+    },
+    // 根据订单状态判断是否显示物流信息
+    showDelivery(status) {
+      let flag = false;
+      this.afterSaleStatusList.forEach((e, index) => {
+        // 订单为买家退货，待卖家收货之后的状态，并且不是买家取消售后，展示物流信息
+        if (e.status === status && index >= 3 && index !== 6) {
+          flag = true;
         }
-      }
-      return label;
+      });
+      return flag;
     },
   },
   mounted() {
     this.sn = this.$route.query.sn;
     this.getDetail();
   },
-  // 如果是从详情页返回列表页，修改列表页keepAlive为true，确保不刷新页面
-  beforeRouteLeave(to, from, next){
-    if(to.name === 'returnGoodsOrder' || to.name === 'returnMoneyOrder') {
-      to.meta.keepAlive = true
-    }
-    next()
-  }
 };
 </script>
-<style lang="scss" scoped>
-.ivu-row {
-  display: block !important;
+<style lang="scss">
+.ivu-col {
+  width: 100% !important;
 }
-
 .main-content {
   min-height: 600px;
   padding: 10px;
@@ -573,7 +554,6 @@ export default {
       display: flex;
 
       dt {
-        display: inline-block;
         flex: 2;
         vertical-align: top;
         text-align: right;
@@ -584,8 +564,6 @@ export default {
 
       dd {
         flex: 10;
-        display: inline-block;
-
         padding: 15px 0 15px 1%;
         margin: 0;
         border-left: 1px solid #f0f0f0;
@@ -698,10 +676,10 @@ dl dt {
       margin: 0;
       border-bottom: dotted 1px #e6e6e6;
       overflow: hidden;
-
+      display: flex;
       dt {
         display: inline-block;
-        width: 13%;
+        flex: 2;
         vertical-align: top;
         text-align: right;
         padding: 15px 1% 15px 0;
@@ -711,7 +689,7 @@ dl dt {
 
       dd {
         display: inline-block;
-        width: 84%;
+        flex: 10;
         padding: 15px 0 15px 1%;
         margin: 0;
         border-left: 1px solid #f0f0f0;
diff --git a/seller/src/views/order/order/exportOrderDeliver.vue b/seller/src/views/order/order/exportOrderDeliver.vue
index ff8e5fa1..91c270ba 100644
--- a/seller/src/views/order/order/exportOrderDeliver.vue
+++ b/seller/src/views/order/order/exportOrderDeliver.vue
@@ -1,60 +1,62 @@
 <template>
-  <Card>
+  <el-card>
     <div class="step-list">
-      <div class="step-item" @click="handleCheckStep(item)" :class="{'active':item.checked}" v-for="(item,index) in stepList" :key="index">
-        <img class="img" :src="item.img" alt="">
+      <div
+        v-for="(item, index) in stepList"
+        :key="index"
+        class="step-item"
+        :class="{ active: item.checked }"
+        @click="handleCheckStep(item)"
+      >
+        <img class="img" :src="item.img" alt="" />
         <div>
-          <h2>{{item.title}}</h2>
+          <h2>{{ item.title }}</h2>
         </div>
       </div>
     </div>
 
-    <div v-for="(item,index) in stepList" :key="index">
-      <!-- 下载 -->
-      <div v-if="item.checked && index ==0" class="tpl">
-
-        <Button @click="downLoad">下载导入模板</Button>
+    <div v-for="(item, index) in stepList" :key="'step-' + index">
+      <div v-if="item.checked && index === 0" class="tpl">
+        <el-button @click="downLoad">下载导入模板</el-button>
       </div>
-      <!-- 上传 -->
-      <div v-if="item.checked && index ==1" class="tpl">
-        <Upload :before-upload="handleUpload" name="files" style="width:50%; height:400px;" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
-          multiple type="drag" :action="action" :headers="accessToken">
-          <div style="padding: 50px 0">
-            <Icon type="ios-cloud-upload" size="102" style="color: #3399ff"></Icon>
-            <h2>选择或拖拽文件上传</h2>
-          </div>
-        </Upload>
+      <div v-if="item.checked && index === 1" class="tpl">
+        <el-upload
+          drag
+          name="files"
+          style="width: 50%; height: 400px"
+          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+          :action="action"
+          :headers="accessToken"
+          :before-upload="handleUpload"
+          :show-file-list="false"
+        >
+          <el-icon :size="102" style="color: #3399ff"><UploadFilled /></el-icon>
+          <h2>选择或拖拽文件上传</h2>
+        </el-upload>
       </div>
-      <!-- 上传 -->
-      <div v-if="item.checked && index ==2" class="tpl success">
-
+      <div v-if="item.checked && index === 2" class="tpl success">
         <h1>发货完成</h1>
-
         <div>
-          <Button class="btn" @click="close">关闭页面</Button>
-          <Button class="btn" type="primary" @click="navigationToGoodsOrder">商品订单</Button>
+          <el-button class="btn" @click="close">关闭页面</el-button>
+          <el-button class="btn" type="primary" @click="navigationToGoodsOrder">商品订单</el-button>
         </div>
       </div>
-
     </div>
-
-  </Card>
+  </el-card>
 </template>
 
 <script>
-import JsonExcel from "vue-json-excel";
+import { UploadFilled } from "@element-plus/icons-vue";
 import { downLoadDeliverExcel, uploadDeliverExcel } from "@/api/order.js";
 import { baseUrl } from "@/libs/axios.js";
+
 export default {
-  components: {
-    "download-excel": JsonExcel,
-  },
+  components: { UploadFilled },
   data() {
     return {
       file: "",
-      action: baseUrl + "/order/order/batchDeliver", // 上传接口
-      accessToken: {}, // 验证token
-      // 步骤集合
+      action: baseUrl + "/order/order/batchDeliver",
+      accessToken: {},
       stepList: [
         {
           img: require("@/assets/download.png"),
@@ -78,75 +80,55 @@ export default {
     this.accessToken.accessToken = this.getStore("accessToken");
   },
   methods: {
-    // 点击选择步骤
     handleCheckStep(val) {
-      if (val.title.search("3") == -1) {
-        this.stepList.map((item) => {
+      if (val.title.search("3") === -1) {
+        this.stepList.forEach((item) => {
           item.checked = false;
         });
         val.checked = true;
       }
     },
-    // 上传数据
     handleUpload(file) {
       this.file = file;
       this.upload();
       return false;
     },
-    // 跳转订单列表
     navigationToGoodsOrder() {
-      this.$router.push({
-        path: "/order/orderList",
-      });
+      this.$router.push({ path: "/order/orderList" });
     },
-    // 关闭页面
     close() {
       this.$store.commit("removeTag", "export-order-deliver");
-      localStorage.storeOpenedList = JSON.stringify(
-        this.$store.state.app.storeOpenedList
-      );
+      localStorage.storeOpenedList = JSON.stringify(this.$store.state.app.storeOpenedList);
       this.$router.go(-1);
     },
-
-    /**
-     * 上传文件
-     */
     async upload() {
-      let fd = new FormData();
+      const fd = new FormData();
       fd.append("files", this.file);
-      let res = await uploadDeliverExcel(fd);
+      const res = await uploadDeliverExcel(fd);
       if (res.success) {
-        this.stepList.map((item) => {
+        this.stepList.forEach((item) => {
           item.checked = false;
         });
-
         this.stepList[2].checked = true;
       }
     },
-
-    /**
-     * 下载excel
-     */
     downLoad() {
       downLoadDeliverExcel()
         .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 = "批量发货导入模板.xls"; //a标签添加属性
+            const link = document.createElement("a");
+            link.download = "批量发货导入模板.xls";
             link.style.display = "none";
             link.href = URL.createObjectURL(blob);
             document.body.appendChild(link);
-            link.click(); //执行下载
-            URL.revokeObjectURL(link.href); //释放url
-            document.body.removeChild(link); //释放标签
+            link.click();
+            URL.revokeObjectURL(link.href);
+            document.body.removeChild(link);
           } else {
-            navigator.msSaveBlob(blob, fileName);
+            navigator.msSaveBlob(blob, "批量发货导入模板.xls");
           }
         })
         .catch((err) => {
@@ -201,7 +183,7 @@ img {
     font-size: 28px;
     margin: 10px;
   }
-  ::v-deep .btn {
+  :deep(.btn) {
     margin: 10px;
   }
 }
diff --git a/seller/src/views/order/order/orderDetail.vue b/seller/src/views/order/order/orderDetail.vue
index 677895b9..34b0de38 100644
--- a/seller/src/views/order/order/orderDetail.vue
+++ b/seller/src/views/order/order/orderDetail.vue
@@ -1,210 +1,255 @@
 <template>
   <div class="search">
-    <Card style="height: 60px">
-      <div>
-        <Button v-if="allowOperation.editPrice" @click="modifyPrice" type="primary">调整价格</Button>
-        <Button v-if="allowOperation.editConsignee" @click="editAddress" type="primary">修改收货地址</Button>
-        <Button v-if="allowOperation.showLogistics || orderPackage.length > 0" @click="checkLogistics" type="primary">查看物流</Button>
-        <Button @click="orderLogModal = true" type="primary">订单日志</Button>
-        <Button @click="printOrder" type="primary" ghost style="float:right;">打印发货单</Button>
-        <Button v-if="allowOperation.take" @click="orderTake" type="primary">订单核销</Button>
-        <!-- <Button v-if="allowOperation.ship" @click="orderDeliver" type="primary">发货</Button> -->
-
-        <Button v-if="allowOperation.ship" @click="groupShip" type="primary">分包裹发货</Button>
-
-        <Button @click="sfPrint" type="primary" ghost
-          v-if="allowOperation.showLogistics && logisticsType == 'SHUNFENG'">下载面单</Button>
-        <Button @click="toPrint" type="primary" ghost
-          v-if="allowOperation.ship && logisticsType != 'SHUNFENG'">打印电子面单</Button>
-        <Button @click="modifyRemark" type="primary">添加备注</Button>
-      </div>
-    </Card>
-
-    <Card class="mt_10">
-      <Row>
-        <Col span="12">
-        <div class="div-item">
-          <div class="div-item-left">订单号：</div>
-          <div class="div-item-right">{{ orderInfo.order.sn }}</div>
+    <div>
+      <el-card style="height: 60px">
+        <div style="">
+          <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>
-        <div class="div-item">
-          <div class="div-item-left">订单来源：</div>
-          <div class="div-item-right">
-            {{ orderInfo.order.clientType | clientTypeWay }}
-          </div>
-        </div>
-        <div class="div-item">
-            <div class="div-item-left">订单备注：</div>
-            <div class="div-item-right">{{ orderInfo.order.sellerRemark }}</div>
-          </div>
-        <div class="div-item">
-          <div class="div-item-left">订单状态：</div>
-          <div class="div-item-right">
-            {{ orderInfo.orderStatusValue }}
-          </div>
-        </div>
-
-        <div class="div-item">
-          <div class="div-item-left">下单时间：</div>
-          <div class="div-item-right">
-            {{ orderInfo.order.createTime }}
-          </div>
-        </div>
-        <div class="div-item" v-if="orderInfo.order.needReceipt == false">
-          <div class="div-item-left">发票信息：</div>
-          <div class="div-item-right">暂无发票信息</div>
-        </div>
-        <template v-if="orderInfo.order.needReceipt == true && orderInfo.receipt">
+      </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>
+            <div class="div-item-right">{{ orderInfo.order.sn }}</div>
+          </div>
+          <div class="div-item">
+            <div class="div-item-left">订单来源：</div>
+            <div class="div-item-right">
+              {{ $filters.clientTypeWay(orderInfo.order.clientType) }}
+            </div>
+          </div>
+
+          <div class="div-item">
+            <div class="div-item-left">订单状态：</div>
+            <div class="div-item-right">
+              {{ orderInfo.orderStatusValue }}
+            </div>
+          </div>
+
+          <div class="div-item">
+            <div class="div-item-left">下单时间：</div>
+            <div class="div-item-right">
+              {{ orderInfo.order.createTime }}
+            </div>
+          </div>
+        </div>
+        <div style="width: 30%; float: left; margin-left: 20px">
+          <div class="div-item" v-if="orderInfo.order.needReceipt == false">
+            <div class="div-item-left">发票信息：</div>
+            <div class="div-item-right">暂无发票信息</div>
+          </div>
+
+          <div class="div-item" v-if="orderInfo.order.needReceipt == true">
             <div class="div-item-left">发票抬头：</div>
             <div class="div-item-right">
               {{
-                orderInfo.receipt.receiptTitle
-                ? orderInfo.receipt.receiptTitle
-                : "暂无"
+                orderInfo.receipt && orderInfo.receipt.receiptTitle ? orderInfo.receipt.receiptTitle : "暂无"
               }}
             </div>
           </div>
 
-          <div class="div-item" v-if="orderInfo.receipt.taxpayerId">
+          <div class="div-item"
+            v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId">
             <div class="div-item-left">发票税号：</div>
             <div class="div-item-right">
-              {{
-                orderInfo.receipt.taxpayerId
-                ? orderInfo.receipt.taxpayerId
-                : "暂无"
-              }}
+              {{ orderInfo.receipt && orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : "暂无" }}
             </div>
           </div>
 
-          <div class="div-item">
+          <div class="div-item" v-if="orderInfo.order.needReceipt == true">
             <div class="div-item-left">发票内容：</div>
             <div class="div-item-right">
               {{
-                orderInfo.receipt.receiptContent
+                orderInfo.receipt && orderInfo.receipt.receiptContent
                 ? orderInfo.receipt.receiptContent
                 : "暂无"
               }}
             </div>
           </div>
 
-          <div class="div-item">
+          <div class="div-item" v-if="orderInfo.order.needReceipt == true">
             <div class="div-item-left">发票金额：</div>
             <div class="div-item-right">
-              <span v-if="orderInfo.receipt.receiptPrice">￥</span>{{
-                orderInfo.receipt.receiptPrice
-                ? orderInfo.receipt.receiptPrice
-                : "暂无" | unitPrice
+
+              <priceColorScheme  v-if="orderInfo.receipt && orderInfo.receipt.receiptPrice" :value="orderInfo.receipt.receiptPrice" :color="$mainColor"></priceColorScheme>
+              <span v-else>暂无</span>
+
+            </div>
+          </div>
+
+          <div class="div-item" v-if="orderInfo.order.needReceipt == true">
+            <div class="div-item-left">是否开票：</div>
+            <div class="div-item-right">
+              {{ orderInfo.receipt ? (orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开") : "空" }}
+            </div>
+          </div>
+        </div>
+        <div style="width: 36%; float: left">
+          <div class="div-item">
+            <div class="div-item-left">收货信息：</div>
+            <div class="div-item-right">
+              {{ orderInfo.order.consigneeName }}
+              {{ orderInfo.order.consigneeMobile }}
+              {{ orderInfo.order.consigneeAddressPath }}
+              {{ orderInfo.order.consigneeDetail }}
+            </div>
+          </div>
+          <div class="div-item">
+            <div class="div-item-left">支付方式：</div>
+            <div class="div-item-right">
+              {{ orderInfo.paymentMethodValue }}
+            </div>
+          </div>
+
+          <div class="div-item">
+            <div class="div-item-left">买家留言：</div>
+            <div class="div-item-right">{{ orderInfo.order.remark }}</div>
+          </div>
+
+          <!-- <div class="div-item" v-if="orderInfo.order.needReceipt == false">
+            <div class="div-item-left">发票信息：</div>
+            <div class="div-item-right">暂无发票信息</div>
+          </div> -->
+
+          <!-- <div class="div-item" v-if="orderInfo.order.needReceipt == true">
+            <div class="div-item-left">发票抬头：</div>
+            <div class="div-item-right">
+              {{
+                orderInfo.receipt && orderInfo.receipt.receiptTitle ? orderInfo.receipt.receiptTitle : "暂无"
               }}
             </div>
           </div>
 
-          <div class="div-item">
+          <div class="div-item"
+            v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId">
+            <div class="div-item-left">发票税号：</div>
+            <div class="div-item-right">
+              {{ orderInfo.receipt && orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : "暂无" }}
+            </div>
+          </div>
+
+          <div class="div-item" v-if="orderInfo.order.needReceipt == true">
+            <div class="div-item-left">发票内容：</div>
+            <div class="div-item-right">
+              {{
+                orderInfo.receipt && orderInfo.receipt.receiptContent
+                ? orderInfo.receipt.receiptContent
+                : "暂无"
+              }}
+            </div>
+          </div>
+
+          <div class="div-item" v-if="orderInfo.order.needReceipt == true">
+            <div class="div-item-left">发票金额：</div>
+            <div class="div-item-right">
+              {{
+                $filters.unitPrice(
+                  orderInfo.receipt && orderInfo.receipt.receiptPrice
+                    ? orderInfo.receipt.receiptPrice
+                    : "暂无",
+                  "￥"
+                )
+              }}
+            </div>
+          </div>
+
+          <div class="div-item" v-if="orderInfo.order.needReceipt == true">
             <div class="div-item-left">是否开票：</div>
             <div class="div-item-right">
-              {{ orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开" }}
+              {{ orderInfo.receipt ? (orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开") : "空" }}
+            </div>
+          </div> -->
+
+          <div class="div-item" v-if="$route.query.orderType != 'VIRTUAL'">
+            <div class="div-item-left">配送方式：</div>
+            <div class="div-item-right">
+              {{ orderInfo.deliveryMethodValue }}
             </div>
           </div>
-        </template>
-        </Col>
-        <Col span="12">
-        <div class="div-item" v-if="orderInfo.order.deliveryMethod != 'SELF_PICK_UP'">
-          <div class="div-item-left">收货信息：</div>
-          <div class="div-item-right">
-            {{ orderInfo.order.consigneeName }}
-            {{ orderInfo.order.consigneeMobile }}
-            {{ orderInfo.order.consigneeAddressPath }}
-            {{ orderInfo.order.consigneeDetail }}
-          </div>
         </div>
-        <div class="div-item" v-if="orderInfo.order.deliveryMethod == 'SELF_PICK_UP'">
-          <div class="div-item-left">自提信息：</div>
-          <div class="div-item-right">
-            {{ orderInfo.order.storeAddressPath }}
-            {{ orderInfo.order.storeAddressMobile }}
-          </div>
-        </div>
-        <div class="div-item">
-          <div class="div-item-left">支付方式：</div>
-          <div class="div-item-right">
-            {{ orderInfo.paymentMethodValue }}
-          </div>
-        </div>
-
-        <div class="div-item">
-          <div class="div-item-left">买家留言：</div>
-          <div class="div-item-right">{{ orderInfo.order.remark }}</div>
-        </div>
-
-        <div class="div-item" v-if="orderInfo.order.orderType != 'VIRTUAL'">
-          <div class="div-item-left">配送方式：</div>
-          <div class="div-item-right">
-            {{
-              orderInfo.deliveryMethodValue
-              ? orderInfo.deliveryMethodValue
-              : "暂无配送方式"
-            }}
-          </div>
-        </div>
-        </Col>
-      </Row>
-    </Card>
-
-    <Card class="mt_10">
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table">
-        <!-- 商品栏目格式化 -->
-        <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>
-              </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>
+      </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>
-                <img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="" />
-              </Poptip>
-            </div>
-          </div>
-        </template>
-      </Table>
-      <div class="goods-total">
-        <ul>
-          <li>
-            <span class="label">商品总额：</span>
-            <span class="txt">{{
-              orderInfo.order.priceDetailDTO.goodsPrice | unitPrice("￥")
-            }}</span>
-          </li>
-          <li v-if="orderInfo.order.priceDetailDTO.discountPrice && orderInfo.order.priceDetailDTO.discountPrice > 0">
-            <span class="label">优惠金额：</span>
-            <span class="txt"> {{ orderInfo.order.priceDetailDTO.discountPrice | unitPrice('￥') }} </span>
-          </li>
+                <div style="margin-left: 13px">
+                  <div class="div-zoom">
+                    <a class="link-text" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
+                  </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>
+                  <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>
+            </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">{{
+                $filters.unitPrice(orderInfo.order.priceDetailDTO.goodsPrice, "￥")
+              }}</span>
+            </li>
+            <li v-if="
+              orderInfo.order.priceDetailDTO.discountPrice &&
+              orderInfo.order.priceDetailDTO.discountPrice > 0
+            ">
+              <span class="label">优惠金额：</span>
+              <span class="txt">
+                {{ $filters.unitPrice(orderInfo.order.priceDetailDTO.discountPrice, "￥") }}</span>
+            </li>
 
-          <li v-if="orderInfo.order.priceDetailDTO.couponPrice && orderInfo.order.priceDetailDTO.couponPrice > 0">
-            <span class="label">优惠券金额：</span>
-            <span class="txt"> {{ orderInfo.order.priceDetailDTO.couponPrice | unitPrice('￥') }} </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>
+            <li v-if="
+              orderInfo.order.priceDetailDTO.couponPrice &&
+              orderInfo.order.priceDetailDTO.couponPrice > 0
+            ">
+              <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">
+                <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>
                   <div class="api" style="text-align:left;">
                     <table>
                       <thead>
@@ -215,291 +260,146 @@
                       <tbody>
                         <tr v-for="(item, index) in typeList" :key="index">
                           <td>{{ item.promotionName }}：</td>
-                          <td>¥{{ item.discountPrice | unitPrice }}</td>
+                          <td>¥{{ $filters.unitPrice(item.discountPrice) }}</td>
                         </tr>
                       </tbody>
                     </table>
                   </div>
-                </template>
-              </Poptip>
-              <span>优惠详情：</span>
-            </div>
-          </li>
-          <li>
-            <span class="label">运费：</span>
-            <span class="txt">{{
-              orderInfo.order.freightPrice | unitPrice("￥")
-            }}</span>
-          </li>
-          <li v-if="orderInfo.order.priceDetailDTO.updatePrice">
-            <span class="label">修改金额：</span>
-            <span class="txt theme_color">¥{{ orderInfo.order.priceDetailDTO.updatePrice | unitPrice }}</span>
-          </li>
-          <!-- <li v-if="showPrices"  v-for="(item,index) in typeList" :key="index" >
-            <hr style="border:1px dashed black;">
-              <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>
-            </li> -->
-          <li v-if="orderInfo.order.priceDetailDTO.payPoint != 0">
-            <span class="label">使用积分：</span>
-            <span class="txt">{{
-              orderInfo.order.priceDetailDTO.payPoint
-            }}</span>
-          </li>
-          <li>
-            <span class="label">应付金额：</span>
-            <span class="txt flowPrice">¥{{ orderInfo.order.flowPrice | unitPrice }}</span>
-            <!-- <template v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">
-                <Space style="height:20px;float: right;text-align: center;margin-left:30px;margin-right:53px;">
-                      <Button type="primary" ghost size="small" @click="getOrderPrice()">优惠详情</Button>
-                </Space>
-            </template> -->
-          </li>
-        </ul>
-      </div>
-    </Card>
-    <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="100"
-          :rules="modifyPriceValidate">
-          <FormItem label="订单金额" prop="orderPrice">
-            <InputNumber style="width: 100%" v-model="modifyPriceForm.orderPrice" size="large" :min="0.01" :max="99999">
-              <span slot="append">元</span>
-            </InputNumber>
-          </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="sellerRemarkModal" width="530">
-      <p slot="header">
-        <Icon type="edit"></Icon>
-        <span>编辑备注</span>
-      </p>
-      <div>
-        <Form ref="modifyRemarkForm" :model="modifyRemarkForm" label-position="left" :label-width="100">
-          <FormItem label="订单备注" prop="sellerRemark">
-            <Input v-model="modifyRemarkForm.sellerRemark" size="large" maxlength="20"></Input>
-          </FormItem>
-        </Form>
-      </div>
-      <div slot="footer" style="text-align: right">
-        <Button @click="sellerRemarkModal = false">关闭</Button>
-        <Button type="primary" @click="modifyRemarkSubmit">确认</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">
-            <span>{{ addressForm.consigneeAddressPath }}</span>
-            <Button  size="small" type="default" @click="$refs.map.open()"
-              style="margin-left: 8px">修改
-            </Button>
+                </el-popover>
+                <span>优惠详情：</span>
+              </div>
+            </li>
+            <!-- <li v-if="showPrices">
+                <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 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">{{
+                $filters.unitPrice(orderInfo.order.freightPrice, "￥")
+              }}</span>
+            </li>
+            <li v-if="orderInfo.order.priceDetailDTO.updatePrice">
+              <span class="label">修改金额：</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>
+              <span class="txt flowPrice">{{
+                orderInfo.order.priceDetailDTO.payPoint
+              }}</span>
+            </li>
+            <li>
+              <span class="label">应付金额：</span>
+              <span class="txt flowPrice">¥{{ $filters.unitPrice(orderInfo.order.priceDetailDTO.flowPrice) }}</span>
+            </li>
+          </ul>
+        </div>
+      </el-card>
+    </div>
 
-          </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="orderTakeModal" width="530">
-      <p slot="header">
-        <Icon type="edit"></Icon>
-        <span>订单核销</span>
-      </p>
-      <div>
-        <Form ref="orderTakeForm" :model="orderTakeForm" label-position="left" :label-width="100"
-          :rules="orderTakeValidate">
-          <FormItem label="核销码" prop="qrCode">
-            <Input v-model="orderTakeForm.qrCode" size="large" maxlength="10"></Input>
-          </FormItem>
-        </Form>
-      </div>
-      <div slot="footer" style="text-align: right">
-        <Button @click="orderTakeModal = false">关闭</Button>
-        <Button type="primary" @click="orderTakeSubmit">核销</Button>
-      </div>
-    </Modal>
-    <!-- 订单日志 -->
-    <Modal v-model="orderLogModal" width="60">
-      <p slot="header">
-        <span>订单日志</span>
-      </p>
+    <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>
+
+    <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">
-        <Table :loading="loading" border :columns="orderLogColumns" :data="orderLogData" ref="table"></Table>
+        <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>
+      <template #footer>
+        <el-button @click="handelCancel">取消</el-button>
+      </template>
+    </el-dialog>
 
-      <div slot="footer" style="text-align: right">
-        <Button @click="orderLogModal = false">取消</Button>
-      </div>
-    </Modal>
-
-    <!-- 查询物流 -->
-    <Modal v-model="logisticsModal" width="40">
-      <p slot="header">
-        <span>查询物流</span>
-      </p>
-      <div class="layui-layer-wrap">
-        <dl>
-          <dt>订单号：</dt>
-          <dd>
-            <div class="text-box">{{ sn }}</div>
-          </dd>
-        </dl>
-      </div>
-      <div v-if="packageTraceList.length > 0" v-for="(packageItem, packageIndex) in packageTraceList" :key="packageIndex">
-        <div class="layui-layer-wrap">
-          <dl>
-            <dt>物流公司：</dt>
-            <dd><div class="text-box">{{ packageItem.logisticsName }}</div></dd>
-          </dl>
-          <dl>
-            <dt>快递单号：</dt>
-            <dd><div nctype="ordersSn" class="text-box">{{ packageItem.logisticsNo }}</div></dd>
-          </dl>
-          <div class="div-express-log">
-            <ul class="express-log express-log-name">
-              <li v-for="(item, index) in packageItem.orderPackageItemList" :key="index">
-                <span class="time" style="width: 50%;"><span>商品名称：</span><span>{{ item.goodsName }}</span></span>
-                <span class="time" style="width: 30%;"><span>发货时间：</span><span>{{ item.logisticsTime }}</span></span>
-                <span class="time" style="width: 20%;"><span>发货数量：</span><span>{{ item.deliverNumber }}</span></span>
-              </li>
-            </ul>
-          </div>
-          <div class="div-express-log">
-            <ul class="express-log" v-if="packageItem.traces && packageItem.traces.traces">
-              <li v-for="(item, index) in packageItem.traces.traces" :key="index">
-                <span class="time">{{ item.AcceptTime || item.acceptTime }}</span>
-                <span class="detail">{{ item.AcceptStation || item.remark }}</span>
-              </li>
-            </ul>
-            <ul class="express-log" v-else><li>暂无物流信息</li></ul>
-          </div>
+    <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>
-      </div>
-      <div v-if = "packageTraceList.length == 0 && logisticsInfo">
-        <div class="layui-layer-wrap">
-          <dl>
-            <dt>物流公司：</dt>
-            <dd><div class="text-box">{{ logisticsInfo.shipper }}</div></dd>
-          </dl>
-          <dl>
-            <dt>快递单号：</dt>
-            <dd><div nctype="ordersSn" class="text-box">{{ logisticsInfo.logisticCode }}</div></dd>
-          </dl>
-          <div class="div-express-log">
-            <ul class="express-log" v-if="logisticsInfo && logisticsInfo.traces">
-              <li v-for="(item, index) in logisticsInfo.traces" :key="index">
-                <span class="time">{{ item.AcceptTime }}</span>
-                <span class="detail">{{ item.AcceptStation }}</span>
-              </li>
-            </ul>
-            <ul class="express-log" v-else><li>暂无物流信息</li></ul>
-          </div>
-        </div>
-      </div>
-      <div slot="footer" style="text-align: right">
-        <Button @click="logisticsModal = false">取消</Button>
-      </div>
-    </Modal>
-
-
-    <!-- 订单发货 -->
-    <Modal v-model="orderDeliverModal" width="500px">
-      <p slot="header">
-        <span>订单发货</span>
-      </p>
-      <div>
-        <Form :model="faceSheetForm" ref="faceSheetForm" v-if="facesheetFlag" :rules="faceSheetFormValidate">
-          <FormItem label="物流公司" prop="logisticsId" style="position: relative" :label-width="90">
-            <Select v-model="faceSheetForm.logisticsId" placeholder="请选择" style="width: 250px">
-              <Option v-for="(item, i) in checkedLogistics" :key="i" :value="item.logisticsId">{{ item.name }}
-              </Option>
-            </Select>
-          </FormItem>
-        </Form>
-        <Form v-else ref="orderDeliveryForm" :model="orderDeliveryForm" :label-width="90"
-          :rules="orderDeliverFormValidate" style="position: relative">
-          <FormItem label="物流公司" prop="logisticsId">
-            <Select v-model="orderDeliveryForm.logisticsId" placeholder="请选择" style="width: 250px">
-              <Option v-for="(item, i) in checkedLogistics" :key="i" :value="item.logisticsId">{{ item.name }}
-              </Option>
-            </Select>
-          </FormItem>
-          <!-- v-if="showOrder" -->
-          <FormItem label="物流单号" prop="logisticsNo">
-            <Input v-model="orderDeliveryForm.logisticsNo" style="width: 250px" />
-          </FormItem>
-        </Form>
-      </div>
-
-      <div slot="footer" style="text-align: right">
-        <Button @click="orderDeliverModal = false">关闭</Button>
-        <Button type="primary" @click="orderDeliverySubmit">发货</Button>
-      </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>
       <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">
@@ -508,158 +408,80 @@
                   <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>
-    <!--订单分包裹发货-->
-    <Modal v-model="groupShipModal" :loading="shipLoading" title="分包裹发快递" width="1000">
-      <div>
-        <Form ref="groupOrderDeliveryForm" :model="groupOrderDeliveryForm" :label-width="90" :rules="groupOrderDeliverFormValidate" style="position: relative">
-          <FormItem label="物流公司" prop="logisticsId">
-            <Select v-model="groupOrderDeliveryForm.logisticsId" placeholder="请选择" style="width: 250px">
-              <Option v-for="(item, i) in checkedLogistics" :key="i" :value="item.logisticsId">{{ item.name }}
-              </Option>
-            </Select>
-          </FormItem>
-          <FormItem label="物流单号" prop="logisticsNo">
-            <Input v-model="groupOrderDeliveryForm.logisticsNo" style="width: 250px" />
-          </FormItem>
-        </Form>
-      </div>
-      <Table @on-select="selectGroupShipGoodsMethods" @on-selection-change="selectGroupShipGoodsMethods"
-             @on-select-all="selectGroupShipGoodsMethods" :data="data" :columns="groupShipColumns" border>
-        <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>
+      <template #footer>
+        <el-button @click="printModal = false">关闭</el-button>
+        <el-button type="primary" @click="handlePrintInvoice">打印发货单</el-button>
+      </template>
+    </el-dialog>
 
-            <div style="margin-left: 13px">
-              <div class="div-zoom">
-                <a @click="linkTo(row.goodsId, row.skuId)">{{
-                  row.goodsName
-                  }}</a>
-              </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>
-                <img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="" />
-              </Poptip>
-            </div>
-          </div>
-        </template>
-        <template slot="numSlot" slot-scope="{ row, index }">
-          <InputNumber v-model="row.canNum" :disabled="!selectGroupShipGoods.find(item=>item.id === row.id)"
-                       :max="row.___num - row.deliverNumber - row.returnNum" :min="0"
-                       @on-change="changeNum($event,index)"></InputNumber>
-        </template>
-      </Table>
-      <div slot="footer">
-        <Button type="default" @click="groupShipModal = false">取消</Button>
-        <Button type="primary" @click="confirmShipGroupGoods">确定</Button>
-      </div>
-    </Modal>
 
-    <multipleMap ref="map" @callback="getAddress"></multipleMap>
+    <multipleMap ref="map" @callback="selectedRegion" />
   </div>
 </template>
 
 <script>
-import * as API_Order from "@/api/order";
 import * as API_Logistics from "@/api/logistics";
+import * as API_Order from "@/api/order";
 import * as RegExp from "@/libs/RegExp.js";
 
 import multipleMap from "@/views/my-components/map/multiple-map";
-
-
+import vueQr from "vue-qr";
+import { printElement } from "@/utils/print";
 export default {
-  name: "orderDetail",
+  name: "orderList",
   components: {
+
     multipleMap,
+    "vue-qr": vueQr,
   },
   data () {
     return {
-      loading:false,
       typeList: [],
       showPrices: false,
       printHiddenFlag: false,//隐藏信息
-      printInfoObj: {
-        id: "printInfo",//要打印的id名 无#号
-        popTitle: '&nbsp;',//页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
-        extraHead: '',//头部文字 默认空
-      },
-      submitLoading: false, // 添加或编辑提交状态
-      logisticsType: 'KUAIDINIAO', //物流类型
+      loading: false, //加载表格
 
-      someJSONdata: '',
-      faceSheetForm: {
-        logisticsId: '',
-      },
-      faceSheetFormValidate: {
-        logisticsId: [
-          { required: true, message: "请选择物流公司" },
-        ],
-      },
-      facesheetFlag: false, //电子面单标识
+      addr: "", //地区
+
+
+      orderLogInfo: [], //订单日志数据
       orderLogModal: false, //弹出调整价格框
-      logisticsModal: false, //弹出查询物流框
-      orderDeliverModal: false, //订单发货弹出框
-      orderTakeModal: false, //订单核销弹出框
       checkedLogistics: [], //选中的物流公司集合
       allowOperation: {}, //订单可才做选项
-      logisticsInfo: {
-        shipper: "",
-      }, //物流信息
       sn: "", //订单编号
       orderInfo: {
-        // 订单信息
         order: {
           priceDetailDTO: {},
         },
       },
       modal: false, //弹出调整价格框
-      printModal: false,//弹出打印发货单
-      sellerRemarkModal: false,//弹出编辑订单备注
+      searchForm: {
+        pageNumber: 1, // 当前页数
+        pageSize: 100, // 页面大小
+        orderSn: "", //订单sn
+      },
       //调整价格表单
       modifyPriceForm: {
-        orderPrice: 0,
+        price: 0,
       },
-      //修改订单备注表单
-      modifyRemarkForm: {
-        sellerRemark: 0,
-      },
-      //订单核销表单
-      orderTakeForm: {
-        qrCode: "",
-      },
-      //验证要调整的订单金额
-      orderTakeValidate: {
-        qrCode: [
-          { required: true, message: "订单核销码不能为空", trigger: "blur" },
-        ],
+      //订单取消表单
+      orderCancelForm: {
+        reason: "",
       },
+      //弹出订单取消框
+      orderCancelModal: false,
       //订单发货
       orderDeliveryForm: {
         logisticsNo: "", //发货单号
@@ -667,16 +489,22 @@ export default {
       },
       //验证要调整的订单金额
       modifyPriceValidate: {
-        orderPrice: [
-          { required: true, message: "请输入大于等于0或小于99999的合法金额" },
+        reason: [
+          { required: true, message: "请输入大于0小于99999的合法金额" },
           {
-            pattern: /^\d+(\.(([1-9])|(0[1-9])|([\d^0]\d)))?$/,
+            pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
             message: "请输入大于0小于9999的合法金额",
             trigger: "change",
           },
         ],
       },
+
+      //验证取消订单原因
+      orderCancelValidate: {
+        reason: [{ required: true, message: "取消原因不能为空", trigger: "blur" }],
+      },
       addressModal: false, //弹出修改收件信息框
+      printModal: false,
       //收件地址表单
       addressForm: {
         consigneeName: "",
@@ -686,9 +514,8 @@ export default {
         consigneeAddressIdPath: "",
       },
       orderDeliverFormValidate: {
-        logisticsNo: [
-          { required: true, message: "发货单号不能为空", trigger: "change" },
-        ]
+        logisticsNo: [{ required: true, message: "发货单号不能为空", trigger: "change" }],
+        logisticsId: [{ required: true, message: "请选择物流公司", trigger: "blur" }],
       },
       addressRule: {
         consigneeName: [
@@ -707,263 +534,47 @@ export default {
         ],
       },
 
-      columns: [
-        {
-          title: "商品",
-          key: "goodsName",
-          minWidth: 400,
-          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: "unitPrice",
-          minWidth: 100,
-          render: (h, params) => {
-            if (!params.row.unitPrice) {
-              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: "subTotal",
-          minWidth: 100,
-          render: (h, params) => {
-            return h(
-              "div",
-              this.$options.filters.unitPrice(params.row.flowPrice, "￥")
-            );
-          },
-        },
-      ],
-      data: [], // 商品表单数据
-      orderLogColumns: [
-        // 表头
-        {
-          title: "时间",
-          key: "createTime",
-          minWidth: 120,
-        },
-        {
-          title: "操作者",
-          key: "operatorName",
-          minWidth: 120,
-        },
-        {
-          title: "操作类型",
-          key: "operatorType",
-          minWidth: 120,
-        },
-        {
-          title: "日志",
-          key: "message",
-          minWidth: 200,
-        },
-      ],
-      // 订单日志数据
-      orderLogData: [],
-
-      // 分包裹发货
-      groupShipModal: false,
-      shipLoading: true,
-      groupOrderDeliveryForm: {
-        logisticsNo: "", //发货单号
-        logisticsId: "", //物流公司
-      },
-      groupOrderDeliverFormValidate: {
-        logisticsNo: [{ required: true, message: "发货单号不能为空", trigger: "change" },],
-        logisticsId: [{ required: true, message: "请选择物流公司", trigger: "blur" },],
-      },
-      // 选择要发货的商品
-      selectGroupShipGoods: [],
-      groupShipColumns: [
-        {type: "selection", width: 60, align: "center",},
-        {title: "商品", key: "goodsName", width: 300, slot: "goodsSlot",},
-        {
-          title: "单价",
-          key: "unitPrice",
-          slot: "priceSlot",
-          width: 100,
-          render: (h, params) => {
-            if (!params.row.unitPrice) {
-              return h("div", this.$options.filters.unitPrice(0, "￥"));
-            }
-            return h("div", this.$options.filters.unitPrice(params.row.unitPrice, "￥"));
-          },
-        },
-        {title: "数量", key: "num", slot: "numSlot", width: 120,},
-        {
-          title: "已发包裹",
-          key: "deliverNumber",
-          render: (h, params) => {
-            return h("div", params.row.deliverNumber ? params.row.deliverNumber : 0);
-          },
-        },
-        {
-          title: "小计",
-          key: "subTotal",
-          width: 120,
-          render: (h, params) => {
-            return h("div", this.$options.filters.unitPrice(params.row.subTotal, "￥"));
-          },
-        },
-      ],
-      orderPackage: [],
-      packageTraceList: []
+      data: [], // 表单数据
     };
   },
+  watch: {
+    $route (to, from) {
+      this.$router.go(0);
+    },
+  },
   methods: {
-    // 选中
-    selectGroupShipGoodsMethods (selected) {
-      this.selectGroupShipGoods = selected;
-    },
-    // 分包裹发货
-    groupShip () {
-      this.groupShipModal = true;
-      this.getLogisticsList();
-    },
-    // 分页获取物流公司
-    getLogisticsList () {
-      API_Order.getLogisticsChecked().then((res) => {
-        if (res.success) {
-          this.checkedLogistics = res.result;
-        }
-      });
-    },
-    changeNum(number, index) {
-      const current = this.data[index]
-      if (this.selectGroupShipGoods.length) {
-        this.selectGroupShipGoods.forEach(item => {
-          if (item.skuId === current.skuId) {
-            item.canNum = number
-          }
-        })
+    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;
     },
-    // 分包裹发货
-    confirmShipGroupGoods () {
-      this.$refs.groupOrderDeliveryForm.validate(async (valid) => {
-        if (valid) {
-          if (this.selectGroupShipGoods.length) {
-            let submit = {
-              ...this.groupOrderDeliveryForm,
-              orderSn: this.sn,
-              partDeliveryDTOList: this.selectGroupShipGoods.map((item) => {
-                return {
-                  orderItemId: item.id,
-                  deliveryNum: item.canNum ? item.canNum : item.num,
-                };
-              }),
-            };
-            const res = await API_Order.partDelivery(this.sn, submit);
+    gotoHomes () {
+      return false
+    },
+
+    //确认收款
+    confirmPrice () {
+      this.$Modal.confirm({
+        title: "提示",
+        content:
+          "<p>您确定要收款吗？线下收款涉及库存变更，需异步进行，等待约一分钟刷新列表查看</p>",
+        onOk: () => {
+          API_Order.orderPay(this.sn).then((res) => {
             if (res.success) {
-              this.$Message.success("发货成功!");
-              this.shipLoading = false;
-              this.getDataDetail();
-              this.getOrderPackage();
-              this.groupShipModal = false;
-              this.groupOrderDeliveryForm = []
+              this.$Message.success("收款成功");
+              this.getDataList();
             } else {
-              this.shipLoading = false;
-              this.groupShipModal = true;
+              // this.$Message.error(res.message);
             }
-          } else {
-            this.shipLoading = false;
-            this.groupShipModal = true;
-            this.$Message.error("请选择要发货的商品");
-          }
-        } else {
-          this.shipLoading = false;
-        }
-      });
-    },
-
-    // 回调地址信息
-    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)
-      }
-      else{
-          this.$set(this.addressForm, 'consigneeAddressPath', val.data.addr)
-          this.$set(this.addressForm, 'consigneeAddressIdPath', val.data.addrId)
-      }
-    },
-
-    //弹出订单核销框
-    orderTake () {
-      this.orderTakeForm.qrCode = this.orderInfo.order.verificationCode;
-      this.orderTakeModal = true;
-    },
-    //打印发货单
-    printOrder () {
-      this.printModal = true;
-    },
-    printHiddenInfo () {
-      this.printHiddenFlag = !this.printHiddenFlag;
-    },
-    printCancel () {
-      // this.printHiddenFlag = false;
-    },
-    //订单核销提交
-    orderTakeSubmit () {
-      this.$refs.orderTakeForm.validate((valid) => {
-        if (valid) {
-          API_Order.orderTake(this.sn, this.orderTakeForm.qrCode).then(
-            (res) => {
-              if (res.success) {
-                this.$Message.success("订单核销成功");
-                this.orderTakeModal = false;
-                this.getDataDetail();
-              }
-            }
-          );
-        }
+          });
+        },
       });
     },
     getOrderPrice () {
@@ -982,358 +593,173 @@ export default {
           }
         }
       }
-
+      console.log(this.typeList)
       if (this.typeList.length >= 3) {
-
+        console.log(123123)
         this.getContentPrice()
       }
     },
-    //获取订单详细信息
-    getDataDetail () {
+    // 获取订单详情
+    getDataList () {
       this.loading = true;
-      API_Order.getOrderDetail(this.sn).then((res) => {
+      API_Order.orderDetail(this.sn).then((res) => {
         this.loading = false;
         if (res.success) {
           this.orderInfo = res.result;
           this.allowOperation = res.result.allowOperationVO;
-          if (res.result.orderItems.length) {
-            this.data = res.result.orderItems.map((item) => {
-              return {
-                ...item,
-                ___num: item.num,
-                _disabled: item.deliverNumber >= item.num,
-                canNum: item.num - item.deliverNumber
-              };
-            });
-          }
-          this.orderLogData = res.result.orderLogs;
+          this.data = res.result.orderItems;
           this.typeList = JSON.parse(JSON.stringify(res.result.order.priceDetailDTO.discountPriceDetail));
           this.getContentPrice()
           this.getOrderPrice()
         }
       });
     },
-    toPrint () {
-      this.facesheetFlag = true;
-      API_Logistics.getCheckedOn().then(res => {
-        if (res.success) {
-          this.checkedLogistics = res.result;
-          this.orderDeliverModal = true;
-        }
-      });
-    },
-    // 修改订单金额
     modifyPrice () {
       //默认要修改的金额为订单总金额
-      this.modifyPriceForm.orderPrice = this.orderInfo.order.flowPrice;
+      this.modifyPriceForm.price = this.orderInfo.order.flowPrice;
       this.modal = true;
     },
     //修改订单金额提交
     modifyPriceSubmit () {
       this.$refs.modifyPriceForm.validate((valid) => {
         if (valid) {
-          API_Order.modifyOrderPrice(this.sn, this.modifyPriceForm).then(
-            (res) => {
-              if (res.success) {
-                this.$Message.success("修改订单金额成功");
-                this.modal = false;
-                this.getDataDetail();
-              }
+          API_Order.updateOrderPrice(this.sn, this.modifyPriceForm).then((res) => {
+            if (res.success) {
+              this.$Message.success("修改订单金额成功");
+              this.modal = false;
+              this.getDataList();
             }
-          );
+          });
         }
       });
     },
-    modifyRemark () {
-      this.modifyRemarkForm.sellerRemark = this.orderInfo.order.sellerRemark;
-      this.sellerRemarkModal = true;
-    },
-    //修改订单备注提交
-    modifyRemarkSubmit () {
-      this.$refs.modifyRemarkForm.validate((valid) => {
-        if (valid) {
-          API_Order.modifyOrderRemark(this.sn, this.modifyRemarkForm).then(
-            (res) => {
-              if (res.success) {
-                this.$Message.success("编辑订单备注成功");
-                this.sellerRemarkModal = false;
-                this.getDataDetail();
-              }
-            }
-          );
-        }
-      });
-    },
-    getOrderPackage() {
-      API_Order.getPackage(this.sn).then(res => {
-        if (res.success) {
-          this.orderPackage = res.result;
-          console.log('this.orderPackage',this.orderPackage);
-        }
-      })
-    },
-    //查询物流
-    checkLogistics () {
-      this.logisticsModal = true;
-      if (this.orderPackage.length > 0) {
-        this.logisticsList();
-      } else {
-        this.logistics();
+    // 选中的地址
+    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.addr = paths;
+        this.regionId = ids;
       }
-    },
-    logisticsList () {
-      this.logisticsModal = true;
-      API_Order.getPackage(this.sn).then((res) => {
-        if (res.success && res.result != null) {
-          this.packageTraceList = res.result;
-        }
-      });
-    },
-    logistics () {
-      this.logisticsModal = true;
-      API_Order.getTraces(this.sn).then((res) => {
-        if (res.success && res.result != null) {
-          this.logisticsInfo = res.result;
-        }
-      });
-    },
-    //订单发货
-    orderDeliver () {
-      this.facesheetFlag = false
-      if (this.logisticsType == 'SHUNFENG') {
-        this.$Modal.confirm({
-          title: "确认发货",
-          content: "您确认使用顺丰发货 " + this.sn + " 订单?",
-          loading: true,
-          onOk: () => {
-            API_Order.orderShunFengDelivery(this.sn).then((res) => {
-              if (res.success) {
-                this.$Modal.remove();
-                this.$Message.success("订单发货成功");
-                this.getDataDetail()
-              }
-            })
-          }
-        })
-      } else {
-        API_Order.getLogisticsChecked().then((res) => {
-          if (res.success) {
-            this.checkedLogistics = res.result;
-            this.orderDeliverModal = true;
-          }
-        });
+      else{
+        this.addr = val.data.addr;
+        this.regionId = val.data.addrId;
       }
-    },
-    //顺丰打印面单
-    sfPrint () {
-      API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then(res => {
-        if (res.success) {
-          let headers = {
-            'X-Auth-token': res.result.token
-          }
-          API_Logistics.getShunFengFaceSheet(res.result.url, headers).then(res => {
-            const blob = new Blob([res], {
-              type: "application/pdf;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.orderInfo.order.sn + ".pdf"; //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);
+    },
+    //订单取消
+    orderCancel () {
+      this.orderCancelModal = true;
+    },
+    //订单取消提交
+    orderCancelSubmit () {
+      this.$refs.orderCancelForm.validate((valid) => {
+        if (valid) {
+          API_Order.orderCancel(this.sn, this.orderCancelForm).then((res) => {
+            if (res.success) {
+              this.$Message.success("取消成功");
+              this.getDataList();
             }
-          })
+            this.orderCancelModal = false;
+          });
         }
-      })
+      });
     },
-    toPrints () {
-      if (this.faceSheetForm.logisticsId != null && this.faceSheetForm.logisticsId != '') {
-        this.orderDeliverModal = false;
-      }
+    //订单日志
+    orderLog () {
+      this.orderLogModal = true;
     },
-    //订单发货提交
-    orderDeliverySubmit () {
-      if (this.facesheetFlag) {
-        this.$refs['faceSheetForm'].validate((valid) => {
-          if (valid) {
-            API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then(res => {
-              if (res.success && res.result.printTemplate) {
-                this.someJSONdata = res.result.printTemplate;
-                this.toPrints();
-              }else{
-                this.$Message.success("电子面单发货失败！");
-              }
-            })
-          }
-        })
-      } else {
-        console.log("this.orderDeliveryForm",this.orderDeliveryForm)
-        this.$refs['orderDeliveryForm'].validate((valid) => {
-          if (valid) {
-            API_Order.orderDelivery(this.sn, this.orderDeliveryForm).then(
-              (res) => {
-                if (res.success) {
-                  this.$Message.success("订单发货成功");
-                  this.orderDeliverModal = false;
-                  this.getDataDetail();
-                }
-              }
-            );
-          }
-        });
-      }
+    //订单日志取消
+    handelCancel () {
+      this.orderLogModal = false;
+    },
+    //打印发货单
+    printOrder () {
+      this.printModal = true;
+    },
+    printHiddenInfo () {
+      this.printHiddenFlag = !this.printHiddenFlag;
+    },
+    printCancel () {
+      // this.printHiddenFlag = false;
+    },
+    handlePrintInvoice() {
+      printElement("printInfo", "发货单");
     },
     //弹出修改收货地址框
     editAddress () {
       this.addressModal = true;
+      this.addr = this.orderInfo.order.consigneeAddressPath;
+      this.regionId = this.orderInfo.order.consigneeAddressIdPath;
       this.addressForm.consigneeName = this.orderInfo.order.consigneeName;
       this.addressForm.consigneeMobile = this.orderInfo.order.consigneeMobile;
       this.addressForm.consigneeDetail = this.orderInfo.order.consigneeDetail;
-      this.addressForm.consigneeAddressPath =
-        this.orderInfo.order.consigneeAddressPath;
-      this.addressForm.consigneeAddressIdPath =
-        this.orderInfo.order.consigneeAddressIdPath;
+      this.addressForm.consigneeAddressPath = this.orderInfo.order.consigneeAddressPath;
+      this.addressForm.consigneeAddressIdPath = this.orderInfo.order.consigneeAddressIdPath;
     },
     //修改收货地址
     editAddressSubmit () {
+      if (this.regionId == "") {
+        this.$Message.error("请选择地址");
+        return;
+      }
+      this.addressForm.consigneeAddressPath = this.addr;
+      this.addressForm.consigneeAddressIdPath = this.regionId;
       this.$refs.addressForm.validate((valid) => {
         if (valid) {
-          API_Order.editOrderConsignee(this.sn, this.addressForm).then(
-            (res) => {
-              if (res.success) {
-                this.$Message.success("收货地址修改成功");
-                this.addressModal = false;
-                this.getDataDetail();
-              }
+          API_Order.editOrderConsignee(this.sn, this.addressForm).then((res) => {
+            if (res.success) {
+              this.$Message.success("收货地址修改成功");
+              this.addressModal = false;
+              this.getDataList();
             }
-          );
+          });
         }
       });
     },
-
-    getLogisticsSetting () {
-      API_Logistics.getLogisticsSetting().then(res => {
-        if (res.success) {
-          this.logisticsType = res.result;
-        }
-      })
-    },
-
   },
   mounted () {
     this.sn = this.$route.query.sn;
-    this.getDataDetail();
-    this.getLogisticsSetting();
-    this.getOrderPackage();
+    this.getDataList();
   },
-  // 如果是从详情页返回列表页，修改列表页keepAlive为true，确保不刷新页面
-  beforeRouteLeave (to, from, next) {
-    if (to.name === 'orderList' || to.name === 'virtualOrderList') {
-      to.meta.keepAlive = true
-    }
-    next()
-  }
 };
 </script>
-<style lang="scss" scoped>
-// 建议引入通用样式 可删除下面样式代码
-// @import "@/styles/table-common.scss";
+<style lang="scss">
 .lineH30 {
   line-height: 30px;
 }
 
 .order-log-div {
   line-height: 30px;
-  height: 500px;
   overflow-y: scroll;
 }
 
-dl dt {
-  width: 100px;
-  text-align: right;
+.flex-card {
+  display: flex;
+  height: 600px;
 }
 
-.div-express-log {
-  max-height: 300px;
-  border: solid 1px #e7e7e7;
-  background: #fafafa;
-  overflow-y: auto;
-  overflow-x: auto;
+.card-item {
+  margin: 5px 0;
 }
 
-.express-log {
-  /*margin: 5px -10px 5px 5px;*/
-  padding: 10px;
-  list-style-type: none;
-
-  .time {
-    width: 30%;
-    display: inline-block;
-    float: left;
-  }
-
-  .detail {
-    width: 60%;
-    margin-left: 30px;
-    display: inline-block;
-  }
-
-  li {
-    line-height: 30px;
-  }
+.flex-card-left {
+  flex: 4;
+  //background: #f8f8f8;
 }
 
-.express-log-name {
-  li {
-    display: flex;
-    span  {
-      display: flex;
-    }
-  }
+.flex-card-right {
+  flex: 6;
 }
 
-.layui-layer-wrap {
-  dl {
-    border-top: solid 1px #f5f5f5;
-    margin-top: -1px;
-    overflow: hidden;
-
-    dt {
-      font-size: 14px;
-      line-height: 28px;
-      display: inline-block;
-      padding: 8px 1% 8px 0;
-      color: #999;
-    }
-
-    dd {
-      font-size: 14px;
-      line-height: 28px;
-      display: inline-block;
-      padding: 8px 0 8px 8px;
-      border-left: solid 1px #f5f5f5;
-
-      .text-box {
-        line-height: 40px;
-        color: #333;
-        word-break: break-all;
-      }
-    }
-  }
-}
-
-
 .search {
+  .operation {
+    margin-bottom: 2vh;
+  }
 
+  .select-clear {
+    margin-left: 10px;
+  }
 
   .div-item {
     line-height: 35px;
@@ -1349,6 +775,15 @@ dl dt {
     }
   }
 
+  .div-status-right {
+    margin-top: 20px;
+    margin-left: 30px;
+    font-size: 20px;
+  }
+
+  .page {
+    margin-top: 2vh;
+  }
 
   button {
     margin-left: 5px;
@@ -1364,7 +799,10 @@ dl dt {
       display: block;
       float: right;
       list-style-type: none;
-      line-height: 25px;
+
+      li {
+        text-align: -webkit-match-parent;
+      }
     }
 
     .label {
@@ -1376,23 +814,19 @@ dl dt {
 
     .txt {
       float: left;
-      width: 130px;
       font-size: 14px;
+      width: 130px;
       text-align: right;
       font-family: verdana;
     }
 
     .flowPrice {
-      color: $theme_color;
+      color: #cc0000;
       font-size: 22px;
     }
   }
 }
 
-.theme_color {
-  color: $theme_color;
-}
-
 .f14 {
   font-size: 14px;
   color: #333;
diff --git a/seller/src/views/order/order/orderList.vue b/seller/src/views/order/order/orderList.vue
index 110fcc79..2ff90a8f 100644
--- a/seller/src/views/order/order/orderList.vue
+++ b/seller/src/views/order/order/orderList.vue
@@ -1,543 +1,414 @@
 <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="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"
-            clearable
-            placeholder="请输入订单编号"
-            style="width: 240px"
-          />
-        </Form-item>
-        <Form-item label="会员名称" prop="buyerName">
-          <Input
-            type="text"
-            v-model="searchForm.buyerName"
-            clearable
-            placeholder="请输入会员名称"
-            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="下单时间">
-          <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" class="search-btn"
-          >搜索</Button
-        >
-        <Button @click="handleReset" 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 class="export">
-        <Button type="primary" class="mr_10" @click="expressOrderDeliver">批量发货</Button>
-        <Button @click="exportOrder" type="info" class="export">导出订单</Button>
-        <Poptip @keydown.enter.native="orderVerification" placement="bottom-start" width="400">
-          <Button class="export">
-            核验订单
-          </Button>
-          <div class="api" slot="content">
-            <h2>核验码</h2>
-            <div style="margin:10px 0;">
-              <Input v-model="orderCode" style="width:300px; margin-right:10px;" />
-              <Button style="primary" @click="orderVerification">核验</Button>
-            </div>
-          </div>
-        </Poptip>
+      <div>
+        <el-button type="info" class="export" @click="exportOrder">导出订单</el-button>
       </div>
-      <Table
-        :loading="loading"
-        :columns="columns"
-        :data="data"
-        ref="table"
-      ></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";
-import Cookies from "js-cookie";
-import {verificationCode} from "@/api/order";
 export default {
   name: "orderList",
-  components: {
-    "download-excel": JsonExcel,
-  },
   data() {
     return {
-      loading: true, // 表单加载状态
+      fields: {
+        订单编号: "sn",
+        下单时间: "createTime",
+        客户名称: "memberName",
+        支付方式: {
+          field: "clientType",
+          callback: (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) =>
+            value == "UNPAID" ? "未付款" : value == "PAID" ? "已付款" : "",
+        },
+        店铺: "storeName",
+      },
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "", // 默认排序字段
-        order: "", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
+        orderType: "",
         orderSn: "",
+        keywords: "",
         buyerName: "",
+        goodsName: "",
+        shipName: "",
         orderStatus: "",
-        orderType: "NORMAL",
+        paymentMethod: "",
+        orderPromotionType: "",
       },
       selectDate: null,
-      columns: [
-        {
-          title: "订单号",
-          key: "sn",
-          minWidth: 200,
-          tooltip: true,
-          render: (h, params) => {
-            if (params.row.sellerRemark) {
-              return h("div", {}, params.row.sellerRemark + " ("+params.row.sn+")");
-            } else {
-              return h("div", {}, params.row.sn);
-            }
-          },
-        },
-        {
-          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", {}, "APP端");
-            } 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: "flowPrice",
-          minWidth: 100,
-          tooltip: true,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
-          },
-        },
-
-        {
-          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: "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: "createTime",
-          width: 170,
-        },
-        {
-          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);
-                    },
-                  },
-                },
-                "查看"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      orderNumData: {}, // 新增：订单数量统计数据
-      excelColumns: {
-        // 导出excel的参数
-        编号: "index",
-        订单号: "sn",
-        收货人: "consigneeName",
-        收货人联系电话: "consigneeMobile",
-        收货地址: "consigneeAddress",
-        商品名称: "goodsName",
-        商品价格: "goodsPrice",
-        订单金额: "flowPrice",
-        商品数量: "num",
-        店铺名称: "storeName",
-        创建时间: "createTime",
-      },
-      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: {
-    /**
-     * 核验订单
-     */
-    async orderVerification() {
-      let result = await verificationCode(this.orderCode);
-
-      if (result.success) {
-        this.$router.push({
-          name: "order-detail",
-          query: { sn: result.result.sn || this.orderCode },
-        });
-      }
+    onStatusTabClick(tab) {
+      this.orderStatusClick(tab.paneName);
     },
-    /**
-     * 批量发货
-     */
-    expressOrderDeliver() {
-      this.$router.push({
-        path: "/export-order-deliver",
-      });
+    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();
     },
-    // 重置
-    handleReset() {
-      this.searchForm = {};
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.selectDate = null;
-      this.searchForm.startDate = "";
-      this.searchForm.endDate = "";
-      this.searchForm.orderType = "NORMAL",
-      // 重新加载数据
-      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;
-      API_Order.getOrderList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
+      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) {
+      this.$filters.customRouterPush({
+        name: "order-detail",
+        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);
+        });
     },
-    // 查看订单详情
-    detail(v) {
-      let sn = v.sn;
-      this.$options.filters.customRouterPush({
-        name: "order-detail",
-        query: { sn: sn },
-      })
-
-    },
-    // 订单筛选
     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() {
     this.init();
   },
-  // 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
-  beforeRouteLeave(to, from, next) {
-    from.meta.keepAlive = false;
-    next();
-  },
-  
 };
 </script>
-<style lang="scss">
-// 建议引入通用样式 可删除下面样式代码
-@import "@/styles/table-common.scss";
+
+<style lang="scss" scoped>
 .export {
   margin: 10px 20px 10px 0;
 }
-// Tab组件样式
 .order-tab {
-  ::v-deep .ivu-tabs-tab {
+  :deep(.el-tabs__item) {
     font-size: 14px;
   }
 }
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
 </style>
diff --git a/seller/src/views/order/order/virtualOrderList.vue b/seller/src/views/order/order/virtualOrderList.vue
index 1df579d5..1a5a6d06 100644
--- a/seller/src/views/order/order/virtualOrderList.vue
+++ b/seller/src/views/order/order/virtualOrderList.vue
@@ -1,245 +1,191 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="订单编号" prop="orderSn">
-          <Input type="text" v-model="searchForm.orderSn" clearable placeholder="请输入订单编号" style="width: 240px" />
-        </Form-item>
-        <Form-item label="会员名称" prop="buyerName">
-          <Input type="text" v-model="searchForm.buyerName" clearable placeholder="请输入会员名称" style="width: 240px" />
-        </Form-item>
-        <Form-item label="订单状态" prop="orderStatus">
-          <Select v-model="searchForm.orderStatus" placeholder="请选择" clearable style="width: 240px">
-            <Option value="UNPAID">未付款</Option>
-            <Option value="PAID">已付款</Option>
-            <Option value="COMPLETED">已完成</Option>
-            <Option value="TAKE">待核验</Option>
-            <Option value="CANCELLED">已取消</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" class="search-btn">搜索</Button>
-        <Button @click="handleReset" class="search-btn">重置</Button>
-      </Form>
-      </Card>
-    <Card>
-      <div>
-        <Poptip @keydown.enter.native="orderVerification" placement="bottom-start" width="400">
-          <Button class="export">
-            核验订单
-          </Button>
-          <div class="api" slot="content">
-            <h2>核验码</h2>
-            <div style="margin:10px 0;">
-              <Input v-model="orderCode" style="width:300px; margin-right:10px;" />
-              <Button style="primary" @click="orderVerification">核验</Button>
-            </div>
-          </div>
-        </Poptip>
+    <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>
 
+    <el-card>
+      <div class="order-tab">
+        <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 class="mt_10" :loading="loading" border :columns="columns" :data="data" ref="table" 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>
 
 <script>
 import * as API_Order from "@/api/order";
-import { verificationCode } from "@/api/order";
 export default {
-  name: "virtualOrderList",
+  name: "fictitiousOrderList",
   data() {
     return {
-      orderCode: "", // 核验码
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "",
+        order: "",
+        startDate: "",
+        endDate: "",
+        orderType: "VIRTUAL",
         orderSn: "",
         buyerName: "",
         orderStatus: "",
-        orderType: "VIRTUAL",
       },
       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: "memberName",
-          minWidth: 130,
-          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: "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 == "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,
-          sortable: true,
-          sortType: "desc",
-        },
-
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 100,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px",
-                  },
-                  on: {
-                    click: () => {
-                      this.detail(params.row);
-                    },
-                  },
-                },
-                "查看"
-              ),
-            ]);
-          },
-        },
+      data: [],
+      total: 0,
+      orderStatus: [
+        { title: "全部", value: "" },
+        { title: "未付款", value: "UNPAID" },
+        { title: "已付款", value: "PAID" },
+        { title: "待核验", value: "TAKE" },
+        { title: "已完成", value: "COMPLETED" },
+        { title: "已关闭", value: "CANCELLED" },
       ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      currentStatus: "",
     };
   },
   methods: {
-    /**
-     * 核验订单
-     */
-    async orderVerification() {
-      let result = await verificationCode(this.orderCode);
-
-      if (result.success) {
-        this.$router.push({
-          name: "order-detail",
-          query: { sn: result.result.sn || this.orderCode },
-        });
-      }
-    },
-    // 初始化数据
     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 = 10;
+      this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 重置
-    handleReset() {
-      this.searchForm = {};
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
-      this.searchForm.orderType = "VIRTUAL";
-      this.selectDate = null;
-      this.searchForm.startDate = "";
-      this.searchForm.endDate = "";
-      // 重新加载数据
-      this.getDataList();
-    },
-    // 表格排序
     changeSort(e) {
-      this.searchForm.sort = e.key;
-      this.searchForm.order = e.order;
-      if (e.order === "normal") {
-        this.searchForm.order = "";
-      }
+      this.searchForm.sort = e.prop;
+      this.searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
       this.getDataList();
     },
-    // 时间段重新赋值
     selectDateRange(v) {
       if (v) {
         this.searchForm.startDate = v[0];
         this.searchForm.endDate = v[1];
       }
     },
-    // 获取商品列表
     getDataList() {
       this.loading = true;
       API_Order.getOrderList(this.searchForm).then((res) => {
@@ -250,29 +196,44 @@ export default {
         }
       });
     },
-    // 跳转详情
+    confirmPrice(v) {
+      this.$Modal.confirm({
+        title: "确认收款",
+        content: "您确定要收款吗？",
+        loading: true,
+        onOk: () => {
+          API_Order.orderPay(v.sn).then((res) => {
+            if (res.success) {
+              this.$Message.success("收款成功");
+              this.getDataList();
+            }
+            this.$Modal.remove();
+          });
+        },
+      });
+    },
     detail(v) {
       let sn = v.sn;
-      this.$options.filters.customRouterPush({
+      this.$filters.customRouterPush({
         name: "order-detail",
-        query: { sn: sn },
-      })
+        query: { sn: sn, orderType: v.orderType },
+      });
+    },
+    onStatusTabClick(tab) {
+      const item = tab.paneName;
+      this.currentStatus = item;
+      this.searchForm.orderStatus = item;
+      this.getDataList();
     },
   },
   mounted() {
     this.init();
   },
-  // 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
-  beforeRouteLeave(to, from, next) {
-    from.meta.keepAlive = false
-    next()
-  }
 };
 </script>
-<style lang="scss">
-// 建议引入通用样式 可删除下面样式代码
-@import "@/styles/table-common.scss";
-.export {
-  margin: 10px 20px 10px 0;
+
+<style lang="scss" scoped>
+.order-tab {
+  margin-top: 20px;
 }
 </style>
diff --git a/seller/src/views/order/receiptManager/receipt.vue b/seller/src/views/order/receiptManager/receipt.vue
index 0ac57127..dca4f7db 100644
--- a/seller/src/views/order/receiptManager/receipt.vue
+++ b/seller/src/views/order/receiptManager/receipt.vue
@@ -1,52 +1,95 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="订单编号" prop="orderSn">
-          <Input type="text" v-model="searchForm.orderSn" clearable placeholder="请输入订单编号" style="width: 240px" />
-        </Form-item>
-        <Form-item label="会员名称" prop="memberName">
-          <Input type="text" v-model="searchForm.memberName" clearable placeholder="请输入会员名称" style="width: 240px" />
-        </Form-item>
-        <Form-item label="发票抬头" prop="receiptTitle">
-          <Input type="text" v-model="searchForm.receiptTitle" clearable placeholder="请输入发票抬头" style="width: 240px" />
-        </Form-item>
-        <Form-item label="状态" prop="receiptStatus">
-          <Select v-model="searchForm.receiptStatus" placeholder="请选择" clearable style="width: 240px">
-            <Option :value="0">未开票</Option>
-            <Option :value="1">已开票</Option>
-          </Select>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
-        <Button @click="handleReset" class="search-btn">重置</Button>
-      </Form>
-      </Card>
+    <el-card>
+      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form">
+        <el-form-item label="订单编号" prop="orderSn">
+          <el-input v-model="searchForm.orderSn" clearable placeholder="请输入订单编号" style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input v-model="searchForm.memberName" clearable placeholder="请输入会员名称" style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="发票抬头" prop="receiptTitle">
+          <el-input v-model="searchForm.receiptTitle" clearable placeholder="请输入发票抬头" style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="状态" prop="receiptStatus">
+          <el-select v-model="searchForm.receiptStatus" placeholder="请选择" clearable style="width: 240px">
+            <el-option label="未开票" :value="0" />
+            <el-option label="已开票" :value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+          <el-button class="search-btn" @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-    <Card>
-      <div class="receipt-tip">
-          订单状态为已发货/已完成可开票
+    <el-card>
+      <div class="receipt-tip">订单状态为已发货/已完成可开票</div>
+      <el-table ref="table" v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
+        <el-table-column label="订单号" min-width="120">
+          <template #default="{ row }">
+            <a class="link-text" @click="$router.push({ name: 'order-detail', query: { sn: row.orderSn } })">
+              {{ row.orderSn }}
+            </a>
+          </template>
+        </el-table-column>
+        <el-table-column prop="memberName" label="会员名称" min-width="90" show-overflow-tooltip />
+        <el-table-column label="发票抬头" min-width="90" show-overflow-tooltip>
+          <template #default="{ row }">{{ row.receiptTitle || "暂未填写" }}</template>
+        </el-table-column>
+        <el-table-column label="纳税人识别号" min-width="100" show-overflow-tooltip>
+          <template #default="{ row }">{{ row.taxpayerId || "暂未填写" }}</template>
+        </el-table-column>
+        <el-table-column label="发票内容" min-width="90" show-overflow-tooltip>
+          <template #default="{ row }">{{ row.receiptContent || "暂未填写" }}</template>
+        </el-table-column>
+        <el-table-column label="发票金额" width="150">
+          <template #default="{ row }">
+            <priceColorScheme :value="row.receiptPrice" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column label="发票状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="Number(row.receiptStatus) === 0 ? 'warning' : 'success'">
+              {{ Number(row.receiptStatus) === 0 ? "未开票" : "已开票" }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="订单状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="orderStatusTagType(row.orderStatus)">{{ orderStatusText(row.orderStatus) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <a class="link-text" style="margin-right: 12px" @click="openReceiptModal(row, 'detail')">详情</a>
+            <a
+              class="link-text"
+              :class="{ disabled: !canInvoicing(row) }"
+              @click="canInvoicing(row) && openReceiptModal(row, 'invoicing')"
+            >
+              开票
+            </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="[10, 20, 50]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
       </div>
-      <Table class="mt_10" :loading="loading" border :columns="columns" :data="data" ref="table">
-        <!-- 订单详情格式化 -->
-        <template slot="orderSlot" slot-scope="scope">
-          <a @click="$router.push({name: 'order-detail',query: {sn: scope.row.orderSn}})">{{scope.row.orderSn}}</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="[10, 20, 50]" size="small"
-          show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
-    <Modal
-      v-model="receiptModalVisible"
-      title="发票信息"
-      :mask-closable="false"
-      width="680"
-    >
-      <div v-if="receiptDetailLoading" class="receipt-modal-loading">
-        <Spin size="large" />
-      </div>
-      <div v-else class="receipt-modal-content">
+    </el-card>
+
+    <el-dialog v-model="receiptModalVisible" title="发票信息" :close-on-click-modal="false" width="680px">
+      <div v-loading="receiptDetailLoading" class="receipt-modal-content">
         <div v-if="hasValue(currentReceipt.orderSn)" class="receipt-item">
           <span class="receipt-label">订单号：</span>
           <span class="receipt-value">{{ currentReceipt.orderSn }}</span>
@@ -110,39 +153,31 @@
         <div v-if="hasValue(getInvoiceAddress(currentReceipt))" class="receipt-item">
           <span class="receipt-label">发票附件：</span>
           <span class="receipt-value">
-            <a @click="viewInvoiceFile(getInvoiceAddress(currentReceipt))">查看附件</a>
+            <a class="link-text" @click="viewInvoiceFile(getInvoiceAddress(currentReceipt))">查看附件</a>
           </span>
         </div>
       </div>
-      <div slot="footer">
+      <template #footer>
         <template v-if="receiptModalMode === 'invoicing'">
-          <Upload
+          <el-upload
             :action="uploadFileUrl"
             :data="receiptUploadData"
             :headers="{ ...accessToken }"
-            :format="['jpg', 'jpeg', 'png', 'pdf']"
-            :max-size="10240"
+            :accept="'.jpg,.jpeg,.png,.pdf'"
+            :show-file-list="false"
             :on-success="handleInvoiceUploadSuccess"
             :on-error="handleInvoiceUploadError"
-            :on-format-error="handleInvoiceFormatError"
-            :on-exceeded-size="handleInvoiceMaxSize"
-            :show-upload-list="false"
+            :before-upload="beforeInvoiceUpload"
             style="display: inline-block; margin-right: 8px"
           >
-            <Button :disabled="receiptDetailLoading">上传发票</Button>
-          </Upload>
-          <Button @click="receiptModalVisible = false">取消</Button>
-          <Button
-            type="primary"
-            :loading="invoiceSubmitting"
-            @click="submitInvoicing"
-          >
-            确认开票
-          </Button>
+            <el-button :disabled="receiptDetailLoading">上传发票</el-button>
+          </el-upload>
+          <el-button @click="receiptModalVisible = false">取消</el-button>
+          <el-button type="primary" :loading="invoiceSubmitting" @click="submitInvoicing">确认开票</el-button>
         </template>
-        <Button v-else @click="receiptModalVisible = false">关闭</Button>
-      </div>
-    </Modal>
+        <el-button v-else @click="receiptModalVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -154,178 +189,61 @@ export default {
   name: "receipt",
   data() {
     return {
-      loading: true, // 表单加载状态
+      loading: true,
       receiptModalVisible: false,
       receiptDetailLoading: false,
       invoiceSubmitting: false,
       receiptModalMode: "detail",
       uploadFileUrl: uploadFile,
       accessToken: {},
-      receiptUploadData: {
-        directoryPath: "receipt"
-      },
+      receiptUploadData: { directoryPath: "receipt" },
       currentReceipt: {},
       selectedReceiptRow: null,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-        receiptStatus: "", // 发票状态
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc",
+        receiptStatus: "",
       },
-      columns: [
-        {
-          title: "订单号",
-          key: "orderSn",
-          minWidth: 120,
-          slot: "orderSlot",
-        },
-        {
-          title: "会员名称",
-          key: "memberName",
-          minWidth: 90,
-          tooltip: true,
-        },
-
-        {
-          title: "发票抬头",
-          key: "receiptTitle",
-          minWidth: 90,
-          tooltip: true,
-          render: (h, params) => {
-            return h("div", params.row.receiptTitle || "暂未填写");
-          },
-        },
-        {
-          title: "纳税人识别号",
-          key: "taxpayerId",
-          minWidth: 100,
-          tooltip: true,
-          render: (h, params) => {
-            return h("div", params.row.taxpayerId || "暂未填写");
-          },
-        },
-        {
-          title: "发票内容",
-          key: "receiptContent",
-          minWidth: 90,
-          tooltip: true,
-          render: (h, params) => {
-            return h("div", params.row.receiptContent || "暂未填写");
-          },
-        },
-        {
-          title: "发票金额",
-          key: "billPrice",
-          width: 150,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.receiptPrice,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "发票状态",
-          key: "receiptStatus",
-          width: 100,
-          tooltip: true,
-          render: (h, params) => {
-            if (Number(params.row.receiptStatus) === 0) {
-              return h("div", [
-                h("tag", { props: { color: "volcano" } }, "未开票"),
-              ]);
-            } else {
-              return h("div", [
-                h("tag", { props: { color: "green" } }, "已开票"),
-              ]);
-            }
-          },
-        },
-        {
-          title: "订单状态",
-          key: "orderStatus",
-          width: 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 == "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: "action",
-          align: "center",
-          fixed: 'right',
-          width: 200,
-          render: (h, params) => {
-            const disabled = !this.canInvoicing(params.row);
-            const detailStyle = { color: "#2d8cf0", cursor: "pointer", textDecoration: "none", marginRight: "12px" };
-            const style = disabled
-              ? { color: "#c5c8ce", cursor: "not-allowed", textDecoration: "none" }
-              : { color: "#2d8cf0", cursor: "pointer", textDecoration: "none" };
-            const on = disabled ? {} : { click: () => { this.openReceiptModal(params.row, "invoicing"); } };
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: detailStyle,
-                  on: { click: () => { this.openReceiptModal(params.row, "detail"); } },
-                },
-                "详情"
-              ),
-              h(
-                "a",
-                {
-                  style,
-                  on,
-                },
-                "开票"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      data: [],
+      total: 0,
     };
   },
   methods: {
+    orderStatusText(status) {
+      const map = {
+        UNPAID: "未付款",
+        PAID: "已付款",
+        UNDELIVERED: "待发货",
+        DELIVERED: "已发货",
+        COMPLETED: "已完成",
+        TAKE: "待核验",
+        CANCELLED: "已取消",
+      };
+      return map[status] || status;
+    },
+    orderStatusTagType(status) {
+      const map = {
+        UNPAID: "danger",
+        PAID: "primary",
+        UNDELIVERED: "",
+        DELIVERED: "info",
+        COMPLETED: "success",
+        TAKE: "warning",
+        CANCELLED: "danger",
+      };
+      return map[status] || "";
+    },
     canInvoicing(row) {
       if (!row) return false;
-      const orderStatus = row.orderStatus;
-      const receiptStatus = Number(row.receiptStatus);
-      return (orderStatus === "COMPLETED" || orderStatus === "DELIVERED") && receiptStatus === 0;
+      return (
+        (row.orderStatus === "COMPLETED" || row.orderStatus === "DELIVERED") &&
+        Number(row.receiptStatus) === 0
+      );
     },
     initUploadAccessToken() {
-      this.accessToken = {
-        accessToken: this.getStore("accessToken")
-      };
+      this.accessToken = { accessToken: this.getStore("accessToken") };
     },
     hasValue(value) {
       if (value === null || value === undefined) return false;
@@ -334,11 +252,6 @@ export default {
     hasPrice(value) {
       return value !== null && value !== undefined && value !== "";
     },
-    formatValue(value) {
-      if (value === null || value === undefined) return "暂无";
-      const text = String(value).trim();
-      return text ? text : "暂无";
-    },
     formatPrice(value) {
       if (value === null || value === undefined || value === "") return "暂无";
       return `￥${value}`;
@@ -354,26 +267,6 @@ export default {
       if (receiptType === "电子普通发票" || receiptType === "增值税专用发票") return receiptType;
       return this.isVatSpecialReceipt(receipt) ? "增值税专用发票" : "电子普通发票";
     },
-    formatReceiptHeaderType(receipt) {
-      if (!receipt) return "暂无";
-      if (this.isVatSpecialReceipt(receipt)) return "单位";
-      if (receipt.companyName) return "单位";
-      if (receipt.personalName) return "个人";
-      const receiptTitle = receipt.receiptTitle != null ? String(receipt.receiptTitle).trim() : "";
-      if (receiptTitle === "单位" || receiptTitle === "个人") return receiptTitle;
-      return receipt.taxpayerId ? "单位" : "个人";
-    },
-    getReceiptTitleLabel(receipt) {
-      return this.formatReceiptHeaderType(receipt) === "单位" ? "单位名称" : "个人名称";
-    },
-    getReceiptTitleName(receipt) {
-      if (!receipt) return "";
-      if (receipt.companyName) return receipt.companyName;
-      if (receipt.personalName) return receipt.personalName;
-      const receiptTitle = receipt.receiptTitle != null ? String(receipt.receiptTitle).trim() : "";
-      if (receiptTitle === "单位" || receiptTitle === "个人") return "";
-      return receiptTitle;
-    },
     getInvoiceAddress(receipt) {
       if (!receipt) return "";
       return receipt.invoiceAddress || receipt.invoiceFileUrl || "";
@@ -382,11 +275,24 @@ export default {
       const invoiceAddress = this.getInvoiceAddress(this.currentReceipt);
       return invoiceAddress ? { invoiceAddress } : {};
     },
+    beforeInvoiceUpload(file) {
+      const allowed = ["image/jpeg", "image/jpg", "image/png", "application/pdf"];
+      const okType = allowed.includes(file.type) || /\.(jpg|jpeg|png|pdf)$/i.test(file.name);
+      if (!okType) {
+        this.$Message.warning("请上传 jpg、jpeg、png 或 pdf 格式文件");
+        return false;
+      }
+      if (file.size / 1024 / 1024 > 10) {
+        this.$Message.warning("发票附件不能超过 10MB");
+        return false;
+      }
+      return true;
+    },
     handleInvoiceUploadSuccess(res) {
       if (res && res.success && res.result) {
-        this.$set(this.currentReceipt, "invoiceAddress", res.result);
+        this.currentReceipt.invoiceAddress = res.result;
         if (this.selectedReceiptRow) {
-          this.$set(this.selectedReceiptRow, "invoiceAddress", res.result);
+          this.selectedReceiptRow.invoiceAddress = res.result;
         }
         this.$Message.success("发票上传成功");
       } else {
@@ -396,57 +302,35 @@ export default {
     handleInvoiceUploadError() {
       this.$Message.error("发票上传失败");
     },
-    handleInvoiceFormatError() {
-      this.$Notice.warning({
-        title: "文件格式不正确",
-        desc: "请上传 jpg、jpeg、png 或 pdf 格式文件"
-      });
-    },
-    handleInvoiceMaxSize() {
-      this.$Notice.warning({
-        title: "超过文件大小限制",
-        desc: "发票附件不能超过 10MB"
-      });
-    },
     viewInvoiceFile(url) {
       if (!url) return;
       window.open(url, "_blank");
     },
-    // 初始化数据
     init() {
       this.getData();
     },
-    // 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getData();
     },
-    // 改变页数
     changePageSize(v) {
       this.searchForm.pageSize = v;
       this.getData();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
       this.getData();
     },
-    // 重置搜索条件
     handleReset() {
-      this.searchForm = {};
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
+      this.searchForm = {
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc",
+        receiptStatus: "",
+      };
       this.getData();
     },
-    // 时间段从新赋值
-    selectDateRange(v) {
-      if (v) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      }
-    },
-    // 获取数据
     getData() {
       this.loading = true;
       API_Order.getReceiptPage(this.searchForm).then((res) => {
@@ -456,8 +340,6 @@ export default {
           this.total = res.result.total;
         }
       });
-      this.total = this.data.length;
-      this.loading = false;
     },
     async openReceiptModal(row, mode = "detail") {
       if (!row) return;
@@ -512,16 +394,8 @@ export default {
 };
 </script>
 <style lang="scss">
-// 建议引入通用样式 可删除下面样式代码
 @import "@/styles/table-common.scss";
 
-.receipt-modal-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 240px;
-}
-
 .receipt-modal-content {
   max-height: 460px;
   overflow-y: auto;
@@ -554,4 +428,14 @@ export default {
   color: #17233d;
   word-break: break-all;
 }
+
+.link-text {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.link-text.disabled {
+  color: #c5c8ce;
+  cursor: not-allowed;
+}
 </style>
diff --git a/seller/src/views/promotion/coupon/coupon-publish.vue b/seller/src/views/promotion/coupon/coupon-publish.vue
index 37cb4ced..3eff8d67 100644
--- a/seller/src/views/promotion/coupon/coupon-publish.vue
+++ b/seller/src/views/promotion/coupon/coupon-publish.vue
@@ -1,166 +1,103 @@
 <template>
-  <div class="wrapper">
-    <Card>
-      <Form ref="form" :model="form" :label-width="120" :rules="formRule">
+  <div>
+    <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 label="折扣" prop="discount" v-if="form.couponType == 'DISCOUNT'">
-              <InputNumber
+            </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'"
+            >
+              <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"/>
+                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="发放数量" v-if="form.getType == 'FREE'" prop="publishNum">
-              <Input
+            <el-form-item label="店铺承担比例" prop="storeCommission">
+              <el-input
+                :disabled="disabled"
+                v-model="form.storeCommission"
+                placeholder="店铺承担比例"
+                style="width: 260px"
+              >
+                <template #append>%</template>
+              </el-input>
+              <span class="describe">店铺承担比例，输入0-100之间数值</span>
+            </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"
               />
-              <span class="tips ml_10">如果发放数量为0时,则代表不限制发放数量</span>
-            </FormItem>
-          </div>
-          <h4>使用限制</h4>
-          <div class="form-item-view">
-            <FormItem label="消费门槛" prop="consumeThreshold">
-              <Input
-                :disabled="disabled"
-                type="text"
-                v-model="form.consumeThreshold"
-                placeholder="消费门槛"
-                clearable
-                style="width: 260px"
-              />
-            </FormItem>
-            <FormItem
-              label="领取限制"
-              v-if="form.getType == 'FREE'"
+              <div class="tips">如果发放数量为0时,则代表不限制发放数量</div>
+            </el-form-item>
+            <el-form-item
+              label="领取数量限制"
               prop="couponLimitNum"
+              v-if="form.getType === 'FREE'"
             >
-              <Input
+              <el-input
                 :disabled="disabled"
                 v-model="form.couponLimitNum"
                 placeholder="领取限制"
                 clearable
                 style="width: 260px"
               />
-              <span class="tips ml_10">如果领取限制为0时,则代表不限制领取数量</span>
-            </FormItem>
-            <FormItem label="有效期" prop="rangeTime">
-              <DatePicker
-                :disabled="disabled"
-                type="datetimerange"
-                v-model="form.rangeTime"
-                format="yyyy-MM-dd HH:mm:ss"
-                placeholder="请选择"
-                :options="options"
-                style="width: 260px"
-              >
-              </DatePicker>
-            </FormItem>
-            <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>
-
-            <FormItem 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
-                  :disabled="disabled"
-                  type="error"
-                  ghost
-                  style="margin-left: 10px"
-                  @click="delSelectGoods"
-                  >批量删除</Button
-                >
-              </div>
-              <Table
-                class="mt_10"
-                :disabled="disabled"
-                border
-                :columns="columns"
-                :data="form.promotionGoodsList"
-                @on-selection-change="changeSelect"
-              >
-                <template slot-scope="{ row }" slot="QRCode">
-                  <img
-                    :src="row.QRCode || '../../../assets/lili.png'"
-                    width="50px"
-                    height="50px"
-                    alt=""
-                  />
-                </template>
-              </Table>
-            </FormItem>
-
-            <FormItem v-if="form.scopeType == 'PORTION_GOODS_CATEGORY'">
-              <Cascader
-                :disabled="disabled"
-                @on-change="getGoodsCategory"
-                :data="goodsCategoryList"
-                style="width: 300px"
-                v-model="form.scopeIdGoods"
-              ></Cascader>
-            </FormItem>
-
-            <FormItem label="范围描述" prop="description">
-              <Input
+              <div class="tips">如果领取数量为0时,则代表不限制领取数量</div>
+            </el-form-item>
+            <el-form-item label="范围描述" prop="description">
+              <el-input
                 :disabled="disabled"
                 v-model="form.description"
                 type="textarea"
@@ -170,40 +107,168 @@
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <div>
-              <Button
+            </el-form-item>
+          </div>
+          <h4>使用限制</h4>
+          <div class="form-item-view">
+            <el-form-item label="消费门槛" prop="consumeThreshold">
+              <el-input
                 :disabled="disabled"
-                type="text"
-                @click="$router.push({ name: 'coupon' })"
-                >返回</Button
+                v-model="form.consumeThreshold"
+                placeholder="消费门槛"
+                clearable
+                style="width: 260px"
+              />
+            </el-form-item>
+            <el-form-item label="有效期" prop="rangeTime">
+              <div v-if="form.getType == 'ACTIVITY'">
+                <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">
+                <el-date-picker
+                  :disabled="disabled"
+                  type="datetimerange"
+                  v-model="form.rangeTime"
+                  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"
+                />
+              </div>
+              <div class="effectiveDays" v-if="rangeTimeType == 0">
+                领取当天开始
+                <el-input-number
+                  :disabled="disabled"
+                  v-model="form.effectiveDays"
+                  :min="1"
+                  style="width: 100px"
+                  :max="365"
+                />
+                天内有效(1-365间的整数)
+              </div>
+            </el-form-item>
+
+            <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>
+
+            <el-form-item style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'">
+              <div style="display: flex; margin-bottom: 10px">
+                <el-button :disabled="disabled" type="primary" @click="openSkuList">选择商品</el-button>
+                <el-button
+                  :disabled="disabled"
+                  type="danger"
+                  plain
+                  style="margin-left: 10px"
+                  @click="delSelectGoods"
+                >批量删除</el-button>
+              </div>
+              <el-table
+                border
+                :data="form.promotionGoodsList"
+                style="width: 100%"
+                @selection-change="changeSelect"
               >
-              <Button
+                <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>
+
+            <el-form-item v-if="form.scopeType == 'PORTION_GOODS_CATEGORY'">
+              <el-cascader
+                :disabled="disabled"
+                :options="goodsCategoryList"
+                style="width: 260px"
+                v-model="form.scopeIdGoods"
+              />
+            </el-form-item>
+            <div>
+              <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>
 
 <script>
 import { saveShopCoupon, getShopCoupon, editShopCoupon } from "@/api/promotion";
+import {
+  savePlatformCoupon,
+  getPlatformCoupon,
+  editPlatformCoupon,
+} from "@/api/promotion";
 import { getGoodsCategoryAll } from "@/api/goods";
 import { regular } from "@/utils";
 import skuSelect from "@/views/lili-dialog";
+
 export default {
-  name: "addCoupon",
+  name: "edit-platform-coupon",
   components: {
     skuSelect,
   },
+  watch: {
+    "form.getType": {
+      handler(val) {
+        if (val == "FREE") {
+          this.rangeTimeType = 1;
+        } else {
+          this.rangeTimeType = 0;
+        }
+        if (this.rangeTimeType == 0) {
+          delete this.formRule.rangeTime;
+        }
+      },
+      deep: true,
+    },
+    $route(e) {
+      this.id = e.query.id;
+      if (this.id) {
+        this.getCoupon();
+      } else {
+        this.$refs.form.resetFields();
+      }
+    },
+  },
   data() {
     const checkPrice = (rule, value, callback) => {
       if (!value && value !== 0) {
@@ -227,41 +292,37 @@ export default {
         callback();
       }
     };
-
     return {
-      modalType: 0, // 判断是新增还是编辑优惠券 0 新增  1 编辑
       disabled: this.$route.query.onlyView,
+      rangeTimeType: 1,
+      modalType: 0,
       form: {
-        /** 店铺承担比例 */
-        sellerCommission: 0,
-        /** 发行数量 */
-        publishNum: 1,
-        /** 运费承担者 */
+        storeCommission: 0,
+        publishNum: 0,
         scopeType: "ALL",
-        /** 限领数量 */
         couponLimitNum: 1,
-        /** 活动类型 */
         couponType: "PRICE",
-        /** 优惠券名称 */
         couponName: "",
+        promotionName: "",
         getType: "FREE",
         promotionGoodsList: [],
         scopeIdGoods: [],
-        rangeDayType: "FIXEDTIME",
+        rangeDayType: "",
+        effectiveDays: 1,
       },
       id: this.$route.query.id,
-      submitLoading: false, // 添加或编辑提交状态
-      selectedGoods: [], // 已选商品列表，便于删除
-      goodsCategoryList: [], // 商品分类列表
+      submitLoading: false,
+      selectedGoods: [],
+      goodsCategoryList: [],
       formRule: {
         promotionName: [{ required: true, message: "活动名称不能为空" }],
         couponName: [{ required: true, message: "优惠券名称不能为空" }],
         price: [{ required: true, message: "请输入面额" }, { validator: checkPrice }],
+        rangeTime: [{ required: true, message: "请选择优惠券有效期" }],
         consumeThreshold: [
           { required: true, message: "请输入消费门槛" },
           { validator: checkWeight },
         ],
-        rangeTime: [{ required: true, message: "请选择优惠券有效期" }],
         couponDiscount: [
           { required: true, message: "请输入折扣" },
           {
@@ -269,7 +330,7 @@ export default {
             message: "请输入0-10的数字,可有一位小数",
           },
         ],
-        sellerCommission: [
+        storeCommission: [
           { required: true, message: "请输入店铺承担比例" },
           { pattern: regular.rate, message: "请输入0-100的正整数" },
         ],
@@ -278,65 +339,11 @@ export default {
           { pattern: regular.Integer, message: "请输入正整数" },
         ],
         couponLimitNum: [
-          { required: true, message: "请输入领取限制" },
+          { required: true, message: "领取限制不能为空" },
           { pattern: regular.Integer, message: "请输入正整数" },
         ],
         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) => {
-            if (this.disabled) {
-              return h("div");
-            }
-            return h(
-              "a",
-              {
-                style: {
-                  color: "#2d8cf0",
-                  cursor: "pointer",
-                  textDecoration: "none",
-                },
-                on: {
-                  click: () => {
-                    this.delGoods(params.index);
-                  },
-                },
-              },
-              "删除"
-            );
-          },
-        },
-      ],
-      // 时间选择器可选范围
       options: {
         disabledDate(date) {
           return date && date.valueOf() < Date.now() - 86400000;
@@ -346,18 +353,17 @@ export default {
   },
   async mounted() {
     await this.getCagetoryList();
-    // 如果id不为空则查询信息
     if (this.id) {
       this.getCoupon();
       this.modalType = 1;
     }
   },
   methods: {
-    // 获取回显数据
     getCoupon() {
-      getShopCoupon(this.id).then((res) => {
+      getPlatformCoupon(this.id).then((res) => {
         let data = res.result;
         if (!data.promotionGoodsList) data.promotionGoodsList = [];
+        this.rangeTimeType = data.rangeDayType === "DYNAMICTIME" ? 0 : 1;
         if (data.scopeType == "PORTION_GOODS_CATEGORY") {
           let prevCascader = data.scopeId.split(",");
           function next(params, prev) {
@@ -381,6 +387,7 @@ export default {
               }
             }
           }
+
           next(this.goodsCategoryList, []);
           data.scopeIdGoods = prevCascader;
         }
@@ -391,23 +398,27 @@ export default {
         this.form = data;
       });
     },
-    /** 保存优惠券 */
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
           const params = JSON.parse(JSON.stringify(this.form));
-          params.startTime = this.$options.filters.unixToDate(
-            this.form.rangeTime[0] / 1000
-          );
-          params.endTime = this.$options.filters.unixToDate(
-            this.form.rangeTime[1] / 1000
-          );
-          if (params.getType == "ACTIVITY") {
-            params.couponLimitNum = 0;
-            params.publishNum = 0;
+          params.getType != "ACTIVITY" ? delete params.effectiveDays : "";
+
+          if (this.rangeTimeType == 1) {
+            params.rangeDayType = "FIXEDTIME";
+            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";
+            delete params.rangeTime;
           }
-          delete params.rangeTime;
+
           let scopeId = [];
+
           if (
             params.scopeType == "PORTION_GOODS" &&
             (!params.promotionGoodsList || params.promotionGoodsList.length == 0)
@@ -425,7 +436,6 @@ export default {
           }
 
           if (params.scopeType == "PORTION_GOODS") {
-            //指定商品
             params.promotionGoodsList.forEach((item) => {
               scopeId.push(item.skuId);
             });
@@ -433,7 +443,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;
@@ -442,9 +451,9 @@ export default {
 
           this.submitLoading = true;
           if (this.modalType === 0) {
-            // 添加 避免编辑后传入id等数据 记得删除
             delete params.id;
-            saveShopCoupon(params).then((res) => {
+
+            savePlatformCoupon(params).then((res) => {
               this.submitLoading = false;
               if (res.success) {
                 this.$Message.success("优惠券发送成功");
@@ -452,11 +461,10 @@ export default {
               }
             });
           } else {
-            // 编辑
             delete params.consumeLimit;
             delete params.updateTime;
 
-            editShopCoupon(params).then((res) => {
+            editPlatformCoupon(params).then((res) => {
               this.submitLoading = false;
               if (res.success) {
                 this.$Message.success("优惠券修改成功");
@@ -467,18 +475,12 @@ export default {
         }
       });
     },
-    // 关闭当前页面
     closeCurrentPage() {
-      this.$store.commit("removeTag", "add-coupon");
-      localStorage.storeOpenedList = JSON.stringify(
-        this.$store.state.app.storeOpenedList
-      );
-      this.$router.push({
-        name: "coupon",
-      });
+      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) => {
@@ -487,11 +489,9 @@ export default {
       this.$refs.skuSelect.goodsData = data;
     },
     changeSelect(e) {
-      // 已选商品批量选择
       this.selectedGoods = e;
     },
     delSelectGoods() {
-      // 多选删除商品
       if (this.selectedGoods.length <= 0) {
         this.$Message.warning("您还未选择要删除的数据");
         return;
@@ -502,20 +502,19 @@ export default {
         onOk: () => {
           let ids = [];
           this.selectedGoods.forEach(function (e) {
-            ids.push(e.id);
+            ids.push(e.skuId);
           });
+
           this.form.promotionGoodsList = this.form.promotionGoodsList.filter((item) => {
-            return !ids.includes(item.id);
+            return !ids.includes(item.skuId);
           });
         },
       });
     },
     delGoods(index) {
-      // 删除商品
       this.form.promotionGoodsList.splice(index, 1);
     },
     selectedGoodsData(item) {
-      // 回显已选商品
       let list = [];
       item.forEach((e) => {
         list.push({
@@ -524,22 +523,20 @@ export default {
           originalPrice: e.price,
           quantity: e.quantity,
           storeId: e.storeId,
-          sellerName: e.sellerName,
+          storeName: e.storeName,
           skuId: e.id,
+          categoryPath: e.categoryPath,
+          thumbnail: e.small,
+          goodsType: e.goodsType,
+          goodsId: e.goodsId,
+          originPrice: e.price,
         });
       });
       this.form.promotionGoodsList = list;
     },
-    getGoodsCategory(e) {
-      // 获取级联选择器商品分类id
-    },
-
     async getCagetoryList() {
-      // 获取全部商品分类
-      let data = await getGoodsCategoryAll();
-      this.goodsCategoryList = this.filterCategory(data.result);
-      // 过滤出可显示的值
-
+      let data = await getCategoryTree();
+      this.goodsCategoryList = data.result;
       this.goodsCategoryList = this.goodsCategoryList.map((item) => {
         if (item.children) {
           item.children = item.children.map((child) => {
@@ -566,19 +563,7 @@ export default {
         return { value: item.id, label: item.name, children: item.children };
       });
     },
-    filterCategory(list) {
-      // 递归删除空children
-      list.forEach((item) => {
-        if (item.children.length == 0) {
-          delete item.children;
-        } else {
-          this.filterCategory(item.children);
-        }
-      });
-      return list;
-    },
     filterCategoryId(list, idArr) {
-      // 递归获取分类id
       list.forEach((e) => {
         if (e instanceof Array) {
           this.filterCategoryId(e, idArr);
@@ -604,16 +589,20 @@ h4 {
   line-height: 40px;
   text-align: left;
 }
+
 .describe {
   font-size: 12px;
   margin-left: 10px;
   color: #999;
 }
-.ivu-form-item {
-  margin-bottom: 24px !important;
-}
-.wrapper {
-  min-height: 1000px;
+
+.effectiveDays {
+  font-size: 12px;
+  color: #999;
+
+  > * {
+    margin: 0 4px;
+  }
 }
 .tips {
   font-size: 12px;
diff --git a/seller/src/views/promotion/coupon/coupon-receive.vue b/seller/src/views/promotion/coupon/coupon-receive.vue
index 203dac57..1abb6fc2 100644
--- a/seller/src/views/promotion/coupon/coupon-receive.vue
+++ b/seller/src/views/promotion/coupon/coupon-receive.vue
@@ -1,219 +1,190 @@
 <template>
   <div class="search">
-    <Card>
-      <Button style="margin-bottom: 10px" @click="back()">返回</Button>
-      <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="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="[10, 20, 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>
   </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: 10, // 页面大小
-        sort: "create_time", // 默认排序字段
-        order: "desc", // 默认排序方式
-        getType: "", // 默认排序方式
-        couponId: this.$route.query.couponId, // 优惠券id
-      },
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          title: "会员名称",
-          key: "memberName",
-          fixed: "left",
-        },
-        {
-          title: "优惠券名称",
-          key: "couponName",
-          minWidth: 100,
-          tooltip: true,
-        },
-        {
-          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: 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();
       }
     },
   },
@@ -223,40 +194,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 = 10;
+      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();
@@ -268,13 +228,10 @@ export default {
       getCouponReceiveList(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;
     },
   },
   mounted() {
diff --git a/seller/src/views/promotion/coupon/coupon.vue b/seller/src/views/promotion/coupon/coupon.vue
index d7cbb4ec..bbd58a01 100644
--- a/seller/src/views/promotion/coupon/coupon.vue
+++ b/seller/src/views/promotion/coupon/coupon.vue
@@ -1,249 +1,330 @@
 <template>
   <div class="search">
-    <Card>
-      <Row>
-        <Form
-          ref="searchForm"
-          :model="searchForm"
-          inline
-          :label-width="100"
-          class="search-form"
-        >
-          <Form-item label="优惠券名称">
-            <Input
-              type="text"
-              v-model="searchForm.couponName"
-              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
-          >
-          <Button @click="handleReset" class="search-btn">重置</Button>
-        </Form>
-      </Row>
-      </Card>
-    <Card>
-      <Row class="operator padding-row">
-        <Button @click="add" type="primary">添加</Button>
-        <Button @click="delAll" class="ml_10">批量关闭</Button>
-        <Button @click="receivePage()" class="ml_10" type="info">优惠券领取记录</Button>
-      </Row>
-      <Table
-        class="mt_10"
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-        @on-selection-change="changeSelect"
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="90px"
+        class="search-form mb_10"
+        @keyup.enter="handleSearch"
       >
-        <template slot-scope="{ row }" slot="action">
-          <a
-            v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'CLOSE'"
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-            @click="see(row)"
-          >编辑</a>
-          <a
-            v-else
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-            @click="see(row, 'only')"
-          >查看</a>
-          <span 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="remove(row)"
-          >关闭</a>
-          <span
-            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
-            style="margin: 0 8px; color: #dcdee2"
-          >|</span>
-          <a
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-            @click="receivePage(row.id)"
-          >领取记录</a>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        <el-form-item label="优惠券名称" prop="couponName">
+          <el-input
+            v-model="searchForm.couponName"
+            placeholder="请输入优惠券名称"
+            clearable
+            style="width: 240px"
+          />
+        </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"
+          >
+            <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" 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"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+        row-key="id"
+        @selection-change="changeSelect"
+      >
+        <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="[10, 20, 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>
   </div>
 </template>
 
 <script>
 import { getShopCouponList, updateCouponStatus } from "@/api/promotion";
 import {
-  promotionsStatusRender,
-  promotionsScopeTypeRender,
-} from "@/utils/promotions";
+  getPlatformCouponList,
+  updatePlatformCouponStatus,
+  deletePlatformCoupon,
+} from "@/api/promotion";
+import { formatPromotionCouponValidityHtml } from "@/utils/promotions";
 
 export default {
   name: "coupon",
+  props: {
+    getType: {
+      type: String,
+      default: "",
+    },
+    promotionStatus: {
+      type: String,
+      default: "",
+    },
+    selectedList: {
+      type: Array,
+      default: () => [],
+    },
+  },
   data() {
     return {
-      selectDate: [],
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "startTime", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "create_time",
+        order: "desc",
+        getType: "",
       },
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-          fixed: "left",
-        },
-        {
-          title: "优惠券名称",
-          key: "couponName",
-          tooltip: true,
-        },
-        {
-          title: "面额/折扣",
-          key: "price",
-          width: 100,
-          render: (h, params) => {
-            if (params.row.couponType === "PRICE") {
-              return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-            } else if(params.row.couponType === "DISCOUNT") {
-              return h("div", (params.row.couponDiscount || 0) + "折");
-            }else{
-              return h("div", "未知");
-            }
-          },
-        },
-
-        {
-          title: "已领取数量/总数量",
-          key: "publishNum",
-          render: (h, params) => {
-            return h(
-              "div",
-              params.row.receivedNum +
-                "/" +
-                (params.row.publishNum === 0 ? "不限制" : params.row.publishNum)
-            );
-          },
-        },
-        {
-          title: "已被使用的数量/已领取数量",
-          key: "publishNum",
-          render: (h, params) => {
-            return h("div", params.row.usedNum + "/" + params.row.receivedNum);
-          },
-        },
-        {
-          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: "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,
-                },
-              });
-            }
-          },
-        },
-        {
-          title: "状态",
-          width: 100,
-          key: "promotionStatus",
-          fixed: "right",
-          render: (h, params) => {
-            return promotionsStatusRender(h, params);
-          },
-        },
-        {
-          title: "操作",
-          slot: "action",
-          align: "center",
-          fixed: "right",
-          maxWidth: 240,
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      total: 0,
+      selectDate: [],
+      showActionColumn: true,
+      showStatusColumn: true,
     };
   },
+  watch: {
+    $route(to) {
+      if (to.fullPath == "/promotions/manager-coupon") {
+        this.init();
+      }
+    },
+    selectedList: {
+      handler(val) {
+        this.$nextTick(() => {
+          this.syncTableSelection(val);
+        });
+      },
+      deep: true,
+    },
+  },
   methods: {
-    init() {
-      this.getDataList();
+    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) {
       if (id) {
@@ -252,116 +333,121 @@ export default {
         this.$router.push({ name: "coupon-receive" });
       }
     },
+    init() {
+      this.getDataList();
+    },
     add() {
-      this.$router.push({ name: "add-coupon" });
-    },
-    /** 跳转至领取详情页面 */
-    receiveInfo(v) {
-      this.$router.push({ name: "member-receive-coupon", query: { id: v.id } });
-    },
-    info(v) {
-      this.$router.push({ name: "platform-coupon-info", query: { id: v.id } });
+      this.$router.push({ name: "add-platform-coupon" });
     },
     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();
-    },
-    handleReset() {
-      this.searchForm = {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "startTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-      };
-      this.selectDate = "";
+      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;
       }
-      getShopCouponList(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;
+      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 });
-      this.$router.push({ name: "add-coupon", query: data });
+      const data = only ? { onlyView: true, id: v.id } : { id: v.id };
+      this.$router.push({ name: "edit-platform-coupon", query: data });
     },
-    // 下架优惠券
-    remove(v) {
+    close(v) {
       this.$Modal.confirm({
-        title: "确认下架",
-        content: "确认要下架此优惠券么?",
+        title: "确认关闭",
+        content: "确认要关闭此优惠券么?",
         loading: true,
         onOk: () => {
-          this.loading = false;
-          let params = {
+          updatePlatformCouponStatus({
             couponIds: v.id,
-          };
-          updateCouponStatus(params).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("下架成功");
-              this.clearSelectAll();
-              this.getDataList();
-            }
-          });
+            effectiveDays: 0,
+          })
+            .then((res) => {
+              this.$Modal.remove();
+              if (res.success) {
+                this.$Message.success("优惠券已关闭");
+                this.getDataList();
+              }
+            })
+            .catch(() => {
+              this.$Modal.remove();
+            });
+        },
+      });
+    },
+    remove(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "确认要删除此优惠券么?",
+        loading: true,
+        onOk: () => {
+          deletePlatformCoupon(v.id)
+            .then((res) => {
+              this.$Modal.remove();
+              if (res.success) {
+                this.$Message.success("优惠券已删除");
+                this.getDataList();
+              }
+            })
+            .catch(() => {
+              this.$Modal.remove();
+            });
         },
       });
     },
-
-    // 批量下架
     delAll() {
       if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要关闭的优惠券");
+        this.$Message.warning("您还未选择要下架的优惠券");
         return;
       }
       this.$Modal.confirm({
-        title: "确认关闭",
-        content: "您确认要关闭所选的 " + this.selectCount + " 条数据?",
+        title: "确认下架",
+        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(),
-          };
-          updateCouponStatus(params).then((res) => {
+            promotionStatus: "CLOSE",
+          }).then((res) => {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("下架成功");
@@ -374,13 +460,40 @@ export default {
     },
   },
   mounted() {
+    if (this.getType) {
+      this.searchForm.getType = this.getType;
+      this.showActionColumn = false;
+    }
+    if (this.promotionStatus) {
+      this.searchForm.promotionStatus = this.promotionStatus;
+      this.showStatusColumn = false;
+    }
     this.init();
   },
 };
 </script>
-<style lang="scss" scoped>
-@import "@/styles/table-common.scss";
-.search-form {
-  width: 100% !important;
+
+<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/seller/src/views/promotion/full-discount/full-discount-add.vue b/seller/src/views/promotion/full-discount/full-discount-add.vue
index eca7ea1b..9574f3d9 100644
--- a/seller/src/views/promotion/full-discount/full-discount-add.vue
+++ b/seller/src/views/promotion/full-discount/full-discount-add.vue
@@ -1,276 +1,255 @@
 <template>
   <div>
-    <Card>
-      <Form ref="form" :model="form" :label-width="120" :rules="formRule">
+    <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" v-model="form.promotionName" :disabled="form.promotionStatus != 'NEW'" placeholder="活动名称"
-                clearable style="width: 280px" />
-            </FormItem>
-            <FormItem label="活动时间" prop="rangeTime">
-              <DatePicker type="datetimerange" v-model="form.rangeTime" :disabled="form.promotionStatus != 'NEW'"
-                format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" :options="options" style="width: 280px">
-              </DatePicker>
-            </FormItem>
-            <FormItem label="活动描述" prop="description">
-              <Input v-model="form.description" :disabled="form.promotionStatus != 'NEW'" type="textarea" :rows="4"
-                clearable style="width: 280px" />
-            </FormItem>
+            <el-form-item label="活动名称" prop="promotionName">
+              <el-input
+                v-model="form.promotionName"
+                disabled
+                placeholder="活动名称"
+                clearable
+                style="width: 260px"
+              />
+            </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"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                placeholder="请选择"
+                :disabled-date="options.disabledDate"
+                style="width: 320px"
+              />
+            </el-form-item>
+            <el-form-item label="活动描述" prop="description">
+              <el-input
+                v-model="form.description"
+                disabled
+                type="textarea"
+                :rows="4"
+                clearable
+                style="width: 260px"
+              />
+            </el-form-item>
           </div>
 
           <h4>优惠设置</h4>
           <div class="form-item-view">
-            <FormItem label="优惠门槛" prop="fullMoney">
-              <Input type="text" v-model="form.fullMoney" :disabled="form.promotionStatus != 'NEW'" placeholder="优惠门槛"
-                clearable style="width: 280px" />
+            <el-form-item label="优惠门槛" prop="fullMoney">
+              <el-input
+                v-model="form.fullMoney"
+                disabled
+                placeholder="优惠门槛"
+                clearable
+                style="width: 260px"
+              />
               <span class="describe">消费达到当前金额可以参与优惠</span>
-            </FormItem>
-            <FormItem label="优惠方式">
-              <RadioGroup type="button" button-style="solid" v-model="form.discountType">
-                <Radio :disabled="form.promotionStatus != 'NEW'" label="fullMinusFlag">减现金</Radio>
-                <Radio :disabled="form.promotionStatus != 'NEW'" label="fullRateFlag">打折</Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem v-if="form.discountType == 'fullMinusFlag'" label="优惠金额" prop="fullMinus">
-              <Input :disabled="form.promotionStatus != 'NEW'" type="text" v-model="form.fullMinus" placeholder="优惠金额"
-                clearable style="width: 280px" />
-            </FormItem>
-            <FormItem v-if="form.discountType == 'fullRateFlag'" label="优惠折扣" prop="fullRate">
-              <InputNumber :disabled="form.promotionStatus != 'NEW'"
+            </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"
+            >
+              <el-input
+                disabled
+                v-model="form.fullMinus"
+                placeholder="优惠金额"
+                clearable
+                style="width: 260px"
+              />
+            </el-form-item>
+            <el-form-item
+              v-if="form.discountType == 'fullRateFlag'"
+              label="优惠折扣"
+              prop="fullRate"
+            >
+              <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 :disabled="form.promotionStatus != 'NEW'" v-model="form.freeFreightFlag">免邮费</Checkbox>
-              <Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.couponFlag">送优惠券</Checkbox>
-              <Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.giftFlag">送赠品</Checkbox>
-              <Checkbox :disabled="form.promotionStatus != 'NEW'" v-if="Cookies.get('userInfoSeller') &&
-                JSON.parse(Cookies.get('userInfoSeller')).selfOperated
-                " v-model="form.pointFlag">送积分</Checkbox>
-            </FormItem>
-            <FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId">
-              <Select v-model="form.couponId" :disabled="form.promotionStatus != 'NEW'" filterable
-                :remote-method="getCouponList" placeholder="输入优惠券名称搜索" :loading="couponLoading" style="width: 280px">
-                <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 :disabled="form.promotionStatus != 'NEW'" v-model="form.giftId" filterable
-                :remote-method="getGiftList" placeholder="输入赠品名称搜索" :loading="giftLoading" style="width: 280px">
-                <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">
-              <InputNumber :min="0" :disabled="form.promotionStatus != 'NEW'" v-model="form.point" type="number"
-                style="width: 280px" />
-            </FormItem>
-            <FormItem label="使用范围" prop="scopeType">
-              <RadioGroup type="button" button-style="solid" v-model="form.scopeType">
-                <Radio :disabled="form.promotionStatus != 'NEW'" label="ALL">全品类</Radio>
-                <Radio :disabled="form.promotionStatus != 'NEW'" label="PORTION_GOODS">指定商品</Radio>
-              </RadioGroup>
-            </FormItem>
+            </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"
+              >
+                <el-option
+                  v-for="item in couponList"
+                  :value="item.id"
+                  :key="item.id"
+                  :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"
+              >
+                <el-option
+                  v-for="item in giftList"
+                  :value="item.id"
+                  :key="item.id"
+                  :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"
+              />
+            </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 style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'">
-              <div style="display: flex; margin-bottom: 10px" v-if="form.promotionStatus == 'NEW'">
-                <Button type="primary" @click="openSkuList">选择商品</Button>
-                <Button type="error" ghost style="margin-left: 10px" @click="delSelectGoods">批量删除</Button>
-              </div>
-              <Table border :columns="columns" :data="form.promotionGoodsList" @on-selection-change="changeSelect">
-                <template slot-scope="{ row }" slot="QRCode">
-                  <img :src="row.QRCode || '../../../assets/lili.png'" width="50px" height="50px" alt="" />
-                </template>
-                <template slot-scope="{ index }" slot="action">
-                  <a
-                    v-if="form.promotionStatus == 'NEW' || !id"
-                    style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-                    @click="delGoods(index)"
-                  >删除</a>
-                </template>
-              </Table>
-            </FormItem>
+            <el-form-item
+              style="width: 100%"
+              v-if="form.scopeType == 'PORTION_GOODS'"
+            >
+              <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"
+                          color-dark="#000"
+                          color-light="#fff"
+                          :size="150"
+                        />
+                      </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 type="text" @click="closeCurrentPage">返回</Button>
-              <Button type="primary" :disabled="form.promotionStatus != 'NEW' && !!id" :loading="submitLoading"
-                @click="handleSubmit">提交</Button>
+              <el-button @click="$router.push({ name: 'promotions/full-discount' })">返回</el-button>
             </div>
           </div>
         </div>
-      </Form>
-    </Card>
-    <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
+      </el-form>
+    </el-card>
   </div>
 </template>
 
 <script>
-import {
-  getShopCouponList,
-  getFullDiscountById,
-  newFullDiscount,
-  editFullDiscount,
-} from "@/api/promotion";
+import { getPlatformCouponList, getFullDiscountById } from "@/api/promotion";
 import { getGoodsSkuListDataSeller } from "@/api/goods";
-import { regular } from "@/utils";
-import skuSelect from "@/views/lili-dialog";
-import Cookies from "js-cookie";
+import vueQr from "vue-qr";
 export default {
-  name: "full-discount-add",
+  name: "add-full-discount",
   components: {
-    skuSelect,
+    "vue-qr": vueQr,
   },
-  data () {
-    const checkPrice = (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 checkWeight = (rule, value, callback) => {
-      if (!value && typeof value !== "number") {
-        callback(new Error("优惠门槛不能为空"));
-      } else if (!regular.money.test(value)) {
-        callback(new Error("请输入正整数或者两位小数"));
-      } else if (parseFloat(value) > 99999999) {
-        callback(new Error("优惠门槛设置超过上限值"));
-      } else {
-        callback();
-      }
-    };
+  data() {
     return {
-      Cookies,
       form: {
-        // 活动表单
         discountType: "fullMinusFlag",
         scopeType: "ALL",
         promotionGoodsList: [],
-        promotionStatus: "NEW",
       },
-      id: this.$route.query.id, // 活动id
-      submitLoading: false, // 添加或编辑提交状态
-      selectedGoods: [], // 已选商品列表，便于删除
-      formRule: {
-        // 验证规则
-        promotionName: [{ required: true, message: "活动名称不能为空" }],
-        rangeTime: [{ required: true, message: "请选择活动时间" }],
-        description: [{ required: true, message: "请填写活动描述" }],
-        price: [
-          { required: true, message: "请输入面额" },
-          { validator: checkPrice },
-        ],
-        consumptionLimit: [{ required: true, validator: checkWeight }],
-        fullMoney: [{ required: true, validator: checkWeight }],
-        fullMinus: [
-          { required: true, message: "请填写优惠金额" },
-          { pattern: regular.money, message: "请输入正确金额" },
-        ],
-        fullRate: [
-          { required: true, message: "请填写优惠折扣" },
-          {
-            pattern: regular.discount,
-            message: "请输入0-10的数字,可有一位小数",
-          },
-        ],
-        couponId: [{ required: true, message: "请选择优惠券" }],
-        giftId: [{ required: true, message: "请选择赠品" }],
-        point: [{ required: true, message: "请填写积分" }],
-      },
-      couponList: [], // 店铺优惠券列表
-      giftList: [], // 赠品列表
-      giftLoading: false, // 请求赠品状态
-      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: "操作",
-          slot: "action",
-          minWidth: 50,
-        },
-      ],
+      id: this.$route.query.id,
+      couponList: [],
+      giftList: [],
+      giftLoading: false,
+      couponLoading: false,
       options: {
-        disabledDate (date) {
+        disabledDate(date) {
           return date && date.valueOf() < Date.now() - 86400000;
         },
       },
     };
   },
-  async mounted () {
+  async mounted() {
     if (this.id) {
       this.getDetail();
-      this.columns.shift()
-      this.columns.pop()
     }
-    await this.getCouponList();
-    await this.getGiftList();
+    this.getCouponList();
+    this.getGiftList();
   },
   methods: {
-    // 关闭当前页面
-    closeCurrentPage () {
-      this.$store.commit("removeTag", "full-cut-detail");
-      localStorage.storeOpenedList = JSON.stringify(
-        this.$store.state.app.storeOpenedList
-      );
-      this.$router.go(-1);
-    },
-    openSkuList () {
-      // 显示商品选择器
-      this.$refs.skuSelect.open("goods");
-      let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList));
-      data.forEach((e) => {
-        e.id = e.skuId;
-      });
-      this.$refs.skuSelect.goodsData = data;
-    },
-    getDetail () {
-      // 获取活动详情
+    getDetail() {
       getFullDiscountById(this.id).then((res) => {
-
         let data = res.result;
-        if (data.scopeType === "ALL") {
+        if (!data.scopeType === "ALL") {
           data.promotionGoodsList = [];
         }
         if (data.fullMinusFlag) {
           data.discountType = "fullMinusFlag";
           delete data.fullMinusFlag;
         } else {
-          data.discountType = "fullRateFlag";
+          data.discountType = "fullMinusFlag";
           delete data.fullRateFlag;
         }
         data.rangeTime = [];
@@ -279,142 +258,26 @@ export default {
         this.form = data;
       });
     },
-    /** 保存 */
-    handleSubmit () {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          const params = JSON.parse(JSON.stringify(this.form));
-          const strat = this.$options.filters.unixToDate(
-            this.form.rangeTime[0] / 1000
-          );
-          const end = this.$options.filters.unixToDate(
-            this.form.rangeTime[1] / 1000
-          );
-          params.startTime = strat;
-          params.endTime = end;
-
-          if (
-            params.scopeType == "PORTION_GOODS" &&
-            (!params.promotionGoodsList ||
-              params.promotionGoodsList.length == 0)
-          ) {
-            this.$Modal.warning({ title: "提示", content: "请选择指定商品" });
-            return;
-          }
-          if (params.scopeType == "ALL") {
-            delete params.promotionGoodsList;
-            params.number = -1;
-          } else {
-            let scopeId = [];
-            params.number = 1;
-            params.promotionGoodsList.forEach((e) => {
-              e.startTime = params.startTime;
-              e.endTime = params.endTime;
-              scopeId.push(e.skuId);
-            });
-            params.scopeId = scopeId.toString();
-          }
-          if (params.discountType == "fullMinusFlag") {
-            params.fullMinusFlag = true;
-          } else {
-            params.fullRateFlag = true;
-          }
-          delete params.rangeTime;
-          this.submitLoading = true;
-          if (!this.id) {
-            // 添加 避免编辑后传入id等数据 记得删除
-            delete params.id;
-            newFullDiscount(params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("添加活动成功");
-                this.closeCurrentPage();
-              }
-            });
-          } else {
-            // 编辑
-            delete params.updateTime;
-
-            editFullDiscount(params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("编辑活动成功");
-                this.closeCurrentPage();
-              }
-            });
-          }
-        }
-      });
-    },
-
-    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({
-          goodsName: e.goodsName,
-          price: e.price,
-          quantity: e.quantity,
-          storeId: e.storeId,
-          goodsId:e.goodsId,
-          storeName: e.storeName,
-          thumbnail: e.thumbnail,
-          skuId: e.id,
-        });
-      });
-      this.form.promotionGoodsList = list;
-    },
-    getCouponList (query) {
-      // 优惠券列表
+    getCouponList(query) {
       let params = {
-        pageSize: 10,
-        pageNumber: 0,
+        pageSize: 20,
+        pageNumber: 1,
         getType: "ACTIVITY",
+        storeId: "",
         couponName: query,
         promotionStatus: "START",
       };
       this.couponLoading = true;
-      getShopCouponList(params).then((res) => {
+      getPlatformCouponList(params).then((res) => {
         this.couponLoading = false;
         if (res.success) {
           this.couponList = res.result.records;
         }
       });
     },
-    getGiftList (query) {
-      // 赠品列表
+    getGiftList(query) {
       let params = {
-        pageSize: 10,
+        pageSize: 20,
         pageNumber: 1,
         id: query === this.form.giftId ? this.form.giftId : null,
         goodsName: query === this.form.giftId ? null : query,
@@ -422,7 +285,7 @@ export default {
         authFlag: "PASS"
       };
       this.giftLoading = true;
-      getGoodsSkuListDataSeller(params).then((res) => {
+      getGoodsSkuData(params).then((res) => {
         this.giftLoading = false;
         if (res.success) {
           this.giftList = res.result.records;
@@ -445,14 +308,14 @@ h4 {
   line-height: 40px;
   text-align: left;
 }
-
 .describe {
   font-size: 12px;
   margin-left: 10px;
   color: #999;
 }
-
-.ivu-form-item {
-  margin-bottom: 24px !important;
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
 }
 </style>
diff --git a/seller/src/views/promotion/full-discount/full-discount.vue b/seller/src/views/promotion/full-discount/full-discount.vue
index 8faf3759..cf184fb1 100644
--- a/seller/src/views/promotion/full-discount/full-discount.vue
+++ b/seller/src/views/promotion/full-discount/full-discount.vue
@@ -1,218 +1,154 @@
 <template>
-  <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="活动名称">
-          <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>
-        <Form-item>
-          <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
-          <Button @click="handleReset" class="ml_10">重置</Button>
-        </Form-item>
-      </Form>
-    </Card>
-    <Card>  
-      <Row class="operation">
-        <Button type="primary" @click="newAct">新增</Button>
-      </Row>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table">
-        <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 v-if="row.promotionStatus == 'NEW'" @click="edit(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">编辑</a>
-            <a v-else @click="edit(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">查看</a>
-            <span v-if="row.promotionStatus === 'START' || row.promotionStatus === 'CLOSE'" style="margin:0 8px;color:#dcdee2">|</span>
-            <a v-if="row.promotionStatus === 'START'" @click="openOrClose(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">关闭</a>
-            <a v-if="row.promotionStatus === 'CLOSE'" @click="openOrClose(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">开启</a>
-          </div>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="page operation">
-        <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="search full-cut">
+    <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"
+          >
+            <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"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
+
 <script>
-import {
-  getFullDiscountList,
-  delFullDiscount,
-  updateFullDiscount,
-} from "@/api/promotion.js";
+import { getFullDiscountList, updateFullDiscount } from "@/api/promotion.js";
+
 export default {
-  name: "full-cut",
-  data () {
+  data() {
     return {
-      total: 0,
       selectDate: [],
-      loading: false, // 表单加载状态
+      total: 0,
+      loading: false,
       searchForm: {
-        // 列表请求参数
         pageNumber: 1,
         pageSize: 20,
-        sort: "startTime",
+        sort: "createTime",
         order: "desc",
       },
-      columns: [
-        {
-          title: "活动名称",
-          key: "promotionName",
-          minWidth: 120,
-        },
-        {
-          title: "开始时间",
-          key: "startTime",
-          minWidth: 60,
-        },
-        {
-          title: "结束时间",
-          key: "endTime",
-          minWidth: 60,
-        },
-        {
-          title: "活动类型",
-          slot: "promotionType",
-          width: 100,
-        },
-        {
-          title: "活动状态",
-          key: "promotionStatus",
-          width: 100,
-          render: (h, params) => {
-            let text = "未知",
-              color = "default";
-            if (params.row.promotionStatus == "NEW") {
-              text = "未开始";
-              color = "default";
-            } else if (params.row.promotionStatus == "START") {
-              text = "已开始";
-              color = "green";
-            } else if (params.row.promotionStatus == "END") {
-              text = "已结束";
-              color = "blue";
-            } else if (params.row.promotionStatus == "CLOSE") {
-              text = "已关闭";
-              color = "red";
-            }
-            return h("div", [
-              h(
-                "Tag",
-                {
-                  props: {
-                    color: color,
-                  },
-                },
-                text
-              ),
-            ]);
-          },
-        },
-        {
-          title: "操作",
-          slot: "action",
-          align: "center",
-          width: 200,
-        },
-      ],
-      data: [], // 表格数据
+      data: [],
     };
   },
   methods: {
-    // 改变页码
-    newAct () {
-      this.$router.push({ name: "full-discount-detail" });
-    },
-    // 初始化数据
-    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 = 10;
-      this.getDataList();
-    },
-    // 重置
-    handleReset () {
-      this.selectDate = "";
-      this.searchForm = {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "startTime", // 默认排序字段
-        order: "desc", // 默认排序方式
+    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();
     },
-    //  编辑
-    edit (row) {
-      this.$router.push({ name: "full-discount-detail", query: { id: row.id } });
-    },
-    // 删除
-    del (row) {
-      this.$Modal.confirm({
-        title: "提示",
-        // 记得确认修改此处
-        content: "确认删除此活动吗?",
-        loading: true,
-        onOk: () => {
-          // 删除
-          delFullDiscount(row.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-    // 开启或关闭活动
-    openOrClose (row) {
+    openOrClose(row) {
       let name = "开启";
-      let status = "START";
-      if (row.promotionStatus === "START") {
+      if (row.promotionStatus === "NEW" || row.promotionStatus === "START") {
         name = "关闭";
-        status = "CLOSE";
         this.$Modal.confirm({
           title: "提示",
-          // 记得确认修改此处
           content: `确认${name}此活动吗?需要一定时间才能生效，请耐心等待`,
           loading: true,
           onOk: () => {
-            // 删除
             updateFullDiscount(row.id).then((res) => {
               this.$Modal.remove();
               if (res.success) {
@@ -222,57 +158,21 @@ export default {
             });
           },
         });
-      } else {
-        let sTime = new Date();
-        sTime.setMinutes(sTime.getMinutes() + 10);
-        let eTime = new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1);
-        this.openStartTime = sTime.getTime();
-        this.openEndTime = eTime.getTime();
-        this.$Modal.confirm({
-          title: "确认开启(默认为当前时间的十分钟之后)",
-          content: "您确认要开启此拼团活动?",
-          onOk: () => {
-            let params = {
-              startTime: this.openStartTime,
-              endTime: this.openEndTime,
-            };
-            updateFullDiscount(row.id, params).then((res) => {
-              this.$Modal.remove();
-              if (res.success) {
-                this.$Message.success("开启活动成功");
-                this.getDataList();
-              }
-            });
-          },
-          render: (h) => {
-            return h("div", [
-              h("DatePicker", {
-                props: {
-                  type: "datetimerange",
-                  placeholder: "请选择开始时间和结束时间",
-                  value: [sTime, eTime],
-                },
-                style: {
-                  width: "350px",
-                },
-                on: {
-                  input: (val) => {
-                    if (val[0]) {
-                      this.openStartTime = val[0].getTime();
-                    }
-                    if (val[1]) {
-                      this.openEndTime = val[1].getTime();
-                    }
-                  },
-                },
-              }),
-            ]);
-          },
-        });
       }
     },
-    // 获取列表数据
-    getDataList () {
+    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;
       if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
         this.searchForm.startTime = this.selectDate[0].getTime();
@@ -289,21 +189,29 @@ export default {
         }
       });
     },
+    view(row) {
+      this.$router.push({ name: "full-discount-detail", query: { id: row.id } });
+    },
   },
-  mounted () {
+  mounted() {
     this.init();
   },
-  // 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
-  beforeRouteLeave (to, from, next) {
-    from.meta.keepAlive = false;
-    next();
-  },
 };
 </script>
-<style lang="scss" scoped>
-@import "@/styles/table-common.scss";
 
-.operation {
-  margin: 10px 0;
+<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/seller/src/views/promotion/live/addLive.vue b/seller/src/views/promotion/live/addLive.vue
index e995edac..a8adbcdb 100644
--- a/seller/src/views/promotion/live/addLive.vue
+++ b/seller/src/views/promotion/live/addLive.vue
@@ -1,194 +1,142 @@
 <template>
   <div>
-    <Card style="position: relative">
-      <Spin size="large" fix v-if="spinShow"></Spin>
-      <Alert type="warning">
-        <template slot="desc">
-          为了方便在创建直播间时从选择商品，请尽量提前提审直播商品
-        </template>
-      </Alert>
+    <el-card v-loading="spinShow" style="position: relative">
+      <el-alert type="warning" show-icon :closable="false" style="margin-bottom: 16px">
+        为了方便在创建直播间时从选择商品，请尽量提前提审直播商品
+      </el-alert>
 
-      <Form :model="liveForm" ref="liveForm" :rules="liveRulesForm" :label-width="120">
-        <FormItem label="直播标题" prop="name">
-          <Input
+      <el-form ref="liveForm" :model="liveForm" :rules="liveRulesForm" label-width="120px">
+        <el-form-item label="直播标题" prop="name">
+          <el-input :disabled="liveStatus != 'NEW'" v-model="liveForm.name" style="width: 460px" />
+          <div class="tips">直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符</div>
+        </el-form-item>
+        <el-form-item label="主播昵称" prop="anchorName">
+          <el-input :disabled="liveStatus != 'NEW'" v-model="liveForm.anchorName" style="width: 360px" />
+          <div class="tips">主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符</div>
+        </el-form-item>
+        <el-form-item label="直播时间" prop="startTime">
+          <el-date-picker
             :disabled="liveStatus != 'NEW'"
-            v-model="liveForm.name"
-            style="width: 460px"
-          ></Input>
-          <div class="tips">
-            直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符
-          </div>
-        </FormItem>
-        <FormItem label="主播昵称" prop="anchorName">
-          <Input
-            :disabled="liveStatus != 'NEW'"
-            v-model="liveForm.anchorName"
-            style="width: 360px"
-          ></Input>
-          <div class="tips">
-            主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符
-          </div>
-        </FormItem>
-        <FormItem label="直播时间" prop="startTime">
-          <DatePicker
-            :disabled="liveStatus != 'NEW'"
-            format="yyyy-MM-dd HH:mm"
-            type="datetimerange"
             v-model="times"
-            @on-change="handleChangeTime"
-            :options="optionsTime"
-            placeholder="直播计划开始时间-直播计划结束时间"
-            style="width: 300px"
-          >
-          </DatePicker>
+            type="datetimerange"
+            value-format="YYYY-MM-DD HH:mm"
+            :disabled-date="disabledDate"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            style="width: 360px"
+            @change="handleChangeTime"
+          />
           <div class="tips">
             直播开播时间需要在当前时间的10分钟后并且,开始时间不能在6个月后,直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时）
           </div>
-        </FormItem>
-
-        <FormItem label="主播微信号" prop="anchorWechat">
-          <Input
+        </el-form-item>
+        <el-form-item label="主播微信号" prop="anchorWechat">
+          <el-input
             :disabled="liveStatus != 'NEW'"
             v-model="liveForm.anchorWechat"
             style="width: 360px"
             placeholder="主播微信号"
-          ></Input>
+          />
           <div class="tips">
-            主播微信号，如果未实名认证，需要先前往“小程序直播”小程序进行<a
-              target="_black"
+            主播微信号，如果未实名认证，需要先前往“小程序直播”小程序进行
+            <a
+              target="_blank"
               href="https://res.wx.qq.com/op_res/9rSix1dhHfK4rR049JL0PHJ7TpOvkuZ3mE0z7Ou_Etvjf-w1J_jVX0rZqeStLfwh"
-              >实名验证</a
-            >
+            >实名验证</a>
           </div>
-        </FormItem>
-
-        <!-- 分享卡片 -->
-        <FormItem label="分享卡片封面" prop="feedsImg">
-          <upload-pic-thumb v-model="liveForm.feedsImg" :multiple="false"></upload-pic-thumb>
+        </el-form-item>
+        <el-form-item label="分享卡片封面" prop="feedsImg">
+          <upload-pic-thumb v-model="liveForm.feedsImg" :multiple="false" />
           <div class="tips">直播间分享图，图片规则：建议像素800*640，大小不超过1M；</div>
-        </FormItem>
-
-        <!-- 直播间背景墙 -->
-        <FormItem label="直播间背景墙" prop="coverImg">
-          <upload-pic-thumb v-model="liveForm.coverImg" :multiple="false"></upload-pic-thumb>
+        </el-form-item>
+        <el-form-item label="直播间背景墙" prop="coverImg">
+          <upload-pic-thumb v-model="liveForm.coverImg" :multiple="false" />
           <div class="tips">直播间背景图，图片规则：建议像素1080*1920，大小不超过1M</div>
-        </FormItem>
-
-        <!-- 直播间背景墙 -->
-        <FormItem label="直播间分享图" prop="shareImg">
-          <upload-pic-thumb v-model="liveForm.shareImg" :multiple="false"></upload-pic-thumb>
+        </el-form-item>
+        <el-form-item label="直播间分享图" prop="shareImg">
+          <upload-pic-thumb v-model="liveForm.shareImg" :multiple="false" />
           <div class="tips">直播间分享图，图片规则：建议像素800*640，大小不超过1M</div>
-        </FormItem>
+        </el-form-item>
 
-        <FormItem label="商品" v-if="$route.query.id">
-          <Button
-            type="primary"
-            ghost
-            @click="liveGoodsVisible = true"
-            :disabled="liveStatus != 'NEW'"
-            icon="md-add"
-            >添加商品</Button
-          >
-          <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>
+        <el-form-item v-if="$route.query.id" label="商品">
+          <el-button type="primary" plain :disabled="liveStatus != 'NEW'" @click="liveGoodsVisible = true">
+            添加商品
+          </el-button>
+          <el-table class="goods-table" :data="liveData" style="width: 100%">
+            <el-table-column label="商品" min-width="200">
+              <template #default="{ row, $index }">
+                <div class="flex-goods">
+                  <el-badge v-if="$index === 0 || $index === 1" value=" " type="danger" />
+                  <img class="thumbnail" :src="row.thumbnail || row.goodsImage" alt="" />
+                  {{ row.goodsName || row.name }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="价格" min-width="150">
+              <template #default="{ row }">
+                <div v-if="row.priceType == 1">{{ $filters.unitPrice(row.price, "￥") }}</div>
                 <div v-if="row.priceType == 2">
-                  {{ row.price | unitPrice("￥") }}至{{ row.price2 | unitPrice("￥") }}
+                  {{ $filters.unitPrice(row.price, "￥") }}至{{ $filters.unitPrice(row.price2, "￥") }}
                 </div>
                 <div v-if="row.priceType == 3">
-                  {{ row.price2 | unitPrice("￥")
-                  }}<span class="original-price">{{ row.price | unitPrice("￥") }}</span>
+                  {{ $filters.unitPrice(row.price2, "￥") }}
+                  <span class="original-price">{{ $filters.unitPrice(row.price, "￥") }}</span>
                 </div>
-              </div>
-            </template>
-            <template slot-scope="{ row }" slot="quantity">
-              <div>{{ row.quantity }}</div>
-            </template>
-            <template slot-scope="{ row, index }" slot="action">
-              <div class="action">
-                <a
-                  v-if="liveStatus == 'NEW'"
-                  style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-                  @click="deleteGoods(row, index)"
-                >删除</a>
-                <span v-if="liveStatus == 'NEW'" style="margin:0 8px;color:#dcdee2">|</span>
-                <a
-                  v-if="liveStatus == 'NEW'"
-                  style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-                  @click="onMove(row.id, 1)"
-                >上移</a>
-                <span v-if="liveStatus == 'NEW'" style="margin:0 8px;color:#dcdee2">|</span>
-                <a
-                  v-if="liveStatus == 'NEW'"
-                  style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-                  @click="onMove(row.id, 0)"
-                >下移</a>
-              </div>
-            </template>
-          </Table>
-          <div class="tips">
-            直播间商品中前两个商品将自动被选为封面，伴随直播间在直播列表中显示
-          </div>
-        </FormItem>
+              </template>
+            </el-table-column>
+            <el-table-column label="库存" width="100">
+              <template #default="{ row }">{{ row.quantity }}</template>
+            </el-table-column>
+            <el-table-column label="操作" width="250">
+              <template #default="{ row, $index }">
+                <div class="action">
+                  <template v-if="liveStatus == 'NEW'">
+                    <a class="link-text" @click="deleteGoods(row, $index)">删除</a>
+                    <span class="op-split">|</span>
+                    <a class="link-text" @click="onMove(row.id, 1)">上移</a>
+                    <span class="op-split">|</span>
+                    <a class="link-text" @click="onMove(row.id, 0)">下移</a>
+                  </template>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="tips">直播间商品中前两个商品将自动被选为封面，伴随直播间在直播列表中显示</div>
+        </el-form-item>
 
-        <FormItem>
-          <Button type="primary" v-if="liveStatus == 'NEW'" @click="createLives()"
-            >保存</Button
-          >
-        </FormItem>
-      </Form>
-    </Card>
-    <!-- 浏览图片 -->
-    <Modal title="查看图片" v-model="imageVisible">
-      <img :src="imageSrc" v-if="imageVisible" style="width: 100%" />
-    </Modal>
+        <el-form-item>
+          <el-button v-if="liveStatus == 'NEW'" type="primary" @click="createLives">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-    <Modal width="800" v-model="liveGoodsVisible" footer-hide>
-      <liveGoods @selectedGoods="callBackData" reviewed />
-    </Modal>
+    <el-dialog v-model="imageVisible" title="查看图片" width="600px">
+      <img v-if="imageVisible" :src="imageSrc" style="width: 100%" alt="" />
+    </el-dialog>
+
+    <el-dialog v-model="liveGoodsVisible" width="800px" :show-footer="false">
+      <liveGoods reviewed @selectedGoods="callBackData" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { uploadFile } from "@/libs/axios";
 import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
-import {
-  addLive,
-  addLiveGoods,
-  editLive,
-  getLiveInfo,
-  delRoomLiveGoods,
-} from "@/api/promotion";
+import { addLive, addLiveGoods, editLive, getLiveInfo, delRoomLiveGoods } from "@/api/promotion";
 import liveGoods from "./liveGoods";
+
 export default {
-  components: {
-    liveGoods,
-    uploadPicThumb,
-  },
+  components: { liveGoods, uploadPicThumb },
   data() {
     return {
-      spinShow: false, // loading加载
-      liveGoodsVisible: false, //选择商品
-      imageVisible: false, //查看图片的dailog
-      imageSrc: "", //查看图片的路径
-      action: uploadFile, // 上传地址
-      accessToken: {}, // 验证token
-      liveStatus: "NEW", //当前直播状态
-      // 不能选择今天以前的时间
-      optionsTime: {
-        disabledDate(date) {
-          return date && date.valueOf() < Date.now() - 86400000;
-        },
-      },
-      // 直播间数据上传规则
+      spinShow: false,
+      liveGoodsVisible: false,
+      imageVisible: false,
+      imageSrc: "",
+      action: uploadFile,
+      accessToken: {},
+      liveStatus: "NEW",
       liveRulesForm: {
         name: [
           { required: true, message: "请输入直播标题", trigger: "blur" },
@@ -199,129 +147,72 @@ export default {
           { max: 15, min: 2, message: "主播昵称最短2个汉字，最长15个汉字" },
         ],
         anchorWechat: [{ required: true, message: "请输入主播微信号", trigger: "blur" }],
-        startTime: [
-          {
-            required: true,
-            message: "请正确输入开始时间以及结束时间",
-          },
-        ],
+        startTime: [{ required: true, message: "请正确输入开始时间以及结束时间" }],
         feedsImg: [{ required: true, message: "分享卡片封面不能为空", trigger: "blur" }],
         coverImg: [{ required: true, message: "直播间背景墙不能为空", trigger: "blur" }],
         shareImg: [{ required: true, message: "直播间分享图不能为空", trigger: "blur" }],
       },
       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: [], //直播商品集合
+      times: [],
+      liveData: [],
     };
   },
   mounted() {
-
-    /**
-     * 如果query.id有值说明是查看详情
-     * liveStatus 可以判断当前直播状态 从而区分数据 是否是未开始、已开启、已关闭、
-     */
     if (this.$route.query.id) {
-      // 获取直播间详情
       this.getLiveDetail();
     }
-    this.accessToken = {
-      accessToken: this.getStore("accessToken"),
-    };
+    this.accessToken = { accessToken: this.getStore("accessToken") };
   },
   methods: {
-    /**
-     * 删除直播间商品
-     */
+    disabledDate(date) {
+      return date && date.valueOf() < Date.now() - 86400000;
+    },
     async deleteGoods(val, index) {
-      this.$Spin.show();
-      let res = await delRoomLiveGoods(this.liveForm.roomId, val.liveGoodsId);
+      this.spinShow = true;
+      const res = await delRoomLiveGoods(this.liveForm.roomId, val.liveGoodsId);
       if (res.success) {
         this.$Message.success("删除成功!");
         this.liveData.splice(index, 1);
-        this.$Spin.hide();
-      } else {
-        this.$Spin.hide();
       }
+      this.spinShow = false;
     },
-    /**
-     * 获取直播间详情
-     */
     async getLiveDetail() {
-      let result = await getLiveInfo(this.$route.query.id);
-
-      // 将数据回调到liveform里面
+      const result = await getLiveInfo(this.$route.query.id);
       if (result.success) {
-        console.log(result);
-        let data = result.result;
-        for (let key in data) {
+        const data = result.result;
+        for (const key in data) {
           this.liveForm[key] = data[key];
         }
-        // 将选择的商品回调给表格
-
         this.liveData = 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;
       }
     },
-    /**
-     * 上下移动功能
-     * dir 1为上 0为下
-     */
     onMove(code, dir) {
-      let moveComm = (curIndex, nextIndex) => {
-        let arr = this.liveData;
+      const moveComm = (curIndex, nextIndex) => {
+        const arr = this.liveData;
         arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0];
         return arr;
       };
       this.liveData.some((val, index) => {
         if (val.id === code) {
           if (dir === 1 && index === 0) {
-            this.$message.Warning("已在顶部！");
+            this.$Message.warning("已在顶部！");
           } else if (dir === 0 && index === this.liveData.length - 1) {
-            this.$message.Warning("已在底部！");
+            this.$Message.warning("已在底部！");
           } else {
-            let nextIndex = dir === 1 ? index - 1 : index + 1;
+            const nextIndex = dir === 1 ? index - 1 : index + 1;
             this.liveData = moveComm(index, nextIndex);
           }
           return true;
@@ -329,13 +220,9 @@ export default {
         return false;
       });
     },
-    /**
-     * 回调的商品选择数据
-     */
     callBackData(way) {
-      console.log(way);
       this.liveGoodsVisible = false;
-      this.$Spin.show();
+      this.spinShow = true;
       addLiveGoods({
         roomId: this.$route.query.roomId,
         liveGoodsId: way.liveGoodsId,
@@ -343,179 +230,53 @@ export default {
       }).then((res) => {
         if (res.success) {
           this.liveData.push(way);
-          this.$Spin.hide();
-          console.log(this.liveData);
-        } else {
-          this.$Spin.hide();
         }
+        this.spinShow = false;
       });
     },
-
-    /**
-     * 上传图片查看图片
-     */
-    handleView(src) {
-      this.imageVisible = true;
-      this.imageSrc = src;
-    },
-
-    /**
-     * 删除上传的图片
-     */
-    handleRemove(type) {
-      if (this.liveStatus == "NEW") {
-        this.liveForm[type] = "";
-      } else {
-        this.$Message.error("当前状态禁止修改删除!");
-      }
-    },
-    /**
-     * 直播间背景图上传成功回调
-     */
-    handleCoverImgSuccess(res) {
-      this.liveForm.coverImg = res.result;
-    },
-    /**
-     * 直播间分享图上传成功回调
-     */
-    handleShareImgSuccess(res) {
-      console.log(res);
-      this.liveForm.shareImg = res.result;
-    },
-
-    /**
-     * 分享卡片封面上传成功回调
-     */
-    handleFeedsImgSuccess(res) {
-      this.liveForm.feedsImg = res.result;
-    },
-
-    /**
-     * 直播间背景图
-     */
-    handleCoverImgSuccess(res) {
-      this.liveForm.coverImg = res.result;
-    },
-
     tipsDateError() {
-      this.$Message.error({
-        content:
-          "直播开播时间需要在当前时间的10分钟后并且,开始时间不能在6个月后,直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时）",
-        duration: 5,
-      });
+      this.$Message.error(
+        "直播开播时间需要在当前时间的10分钟后并且,开始时间不能在6个月后,直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时）"
+      );
     },
-
-    /**
-     * 选择时间后的回调
-     */
     handleChangeTime(daterange) {
-      /**
-       * 直播开播时间需要在当前时间的10分钟后
-       * 此处设置默认为15分钟方便调整
-       */
-      let siteTime = new Date().getTime() / 1000;
-      let selectTime = new Date(daterange[0]).getTime() / 1000;
-      let currentTime = this.$options.filters.unixToDate(siteTime);
-      /**
-       * 开播时间和结束时间间隔不得短于30分钟，不得超过24小时
-       * 判断用户设置的结束时间
-       */
-      let endTime = new Date(daterange[1]).getTime() / 1000;
+      if (!daterange || daterange.length !== 2) return;
+      const siteTime = new Date().getTime() / 1000;
+      const selectTime = new Date(daterange[0]).getTime() / 1000;
+      const endTime = new Date(daterange[1]).getTime() / 1000;
       if (selectTime <= siteTime + 15 * 60) {
         this.tipsDateError();
-        return false;
-      } else if (selectTime + 30 * 60 >= endTime) {
-        // 不能小于30分钟
-
-        this.tipsDateError();
-        return false;
-      } else if (selectTime + 24 * 60 * 60 <= endTime) {
-        // 不能超过24小时
-
-        this.tipsDateError();
-        return false;
-      } else if (
-        // 不能超过6个月
-        siteTime >=
-        new Date().getTime() + 6 * 31 * 24 * 3600 * 1000 + 86400000
-      ) {
-        this.tipsDateError();
-        return false;
-      } else {
-        this.$set(this.times, [0], currentTime);
-        this.times[1] = daterange[1];
-
-        // this.times = daterange;
-        this.$set(this.liveForm, "startTime", new Date(daterange[0]).getTime() / 1000);
-        this.$set(this.liveForm, "endTime", new Date(daterange[1]).getTime() / 1000);
+        return;
       }
-    },
-
-    /**
-     * 对图片错误进行回调
-     */
-    handleFormatError(file) {
-      this.$Notice.warning({
-        title: "请上传正确的图片格式！",
-        desc: file.name + " 格式不为 jpg or png.",
-      });
-    },
-
-    /**
-     * 对图片的大小进行处理回调
-     */
-    handleMaxSize(file) {
-      this.$Notice.warning({
-        title: "图片超过限制大小！",
-        desc: "图片超过规定限制大小，请重新上传",
-      });
-    },
-
-    /**
-     * 限制只能上传一张图片
-     */
-    handleBeforeUpload(type) {
-      const check = this.liveForm[type].length < 1;
-      if (!check) {
-        this.$Notice.warning({
-          title: "最多上传一张图片",
-        });
+      if (selectTime + 30 * 60 >= endTime || selectTime + 24 * 60 * 60 <= endTime) {
+        this.tipsDateError();
+        return;
       }
-      return check;
+      this.liveForm.startTime = selectTime;
+      this.liveForm.endTime = endTime;
     },
-
-    /**
-     * 添加直播间 /broadcast/studio/edit
-     */
     createLives() {
-      this.$refs["liveForm"].validate((valid) => {
-        if (valid) {
-          // 需判断当前是否是添加商品
-          if (this.$route.query.id) {
-            this.spinShow = true;
-            this.liveForm.commodityList = JSON.stringify(this.liveForm.commodityList);
-            delete this.liveForm.updateTime;
-            // 将当前直播间修改
-            editLive(this.liveForm).then((res) => {
-              if (res.success) {
-                this.$Message.success("修改成功!");
-
-                this.$router.push({ path: "/promotion/live" });
-              }
-              this.spinShow = false;
-            });
-          } else {
-            // 此处为创建直播
-            this.spinShow = true;
-            addLive(this.liveForm).then((res) => {
-              if (res.success) {
-                this.$Message.success("添加成功!");
-
-                this.$router.push({ path: "/live" });
-              }
-              this.spinShow = false;
-            });
-          }
+      this.$refs.liveForm.validate((valid) => {
+        if (!valid) return;
+        this.spinShow = true;
+        if (this.$route.query.id) {
+          this.liveForm.commodityList = JSON.stringify(this.liveForm.commodityList);
+          delete this.liveForm.updateTime;
+          editLive(this.liveForm).then((res) => {
+            if (res.success) {
+              this.$Message.success("修改成功!");
+              this.$router.push({ path: "/promotion/live" });
+            }
+            this.spinShow = false;
+          });
+        } else {
+          addLive(this.liveForm).then((res) => {
+            if (res.success) {
+              this.$Message.success("添加成功!");
+              this.$router.push({ path: "/live" });
+            }
+            this.spinShow = false;
+          });
         }
       });
     },
@@ -526,9 +287,6 @@ export default {
 <style lang="scss" scoped>
 .action {
   display: flex;
-  ::v-deep .ivu-btn {
-    margin: 0 5px !important;
-  }
 }
 .original-price {
   margin-left: 10px;
@@ -543,7 +301,6 @@ export default {
 .flex-goods {
   margin: 10px;
   display: flex;
-
   align-items: center;
   > img {
     margin-right: 10px;
@@ -557,40 +314,13 @@ export default {
   width: 1000px;
   margin: 10px 0;
 }
-.upload-list {
-  display: inline-block;
-  width: 60px;
-  height: 60px;
-  text-align: center;
-  line-height: 60px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  overflow: hidden;
-  background: #fff;
-  position: relative;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-  margin-right: 4px;
-}
-.upload-list img {
-  width: 100%;
-  height: 100%;
-}
-.upload-list-cover {
-  display: none;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(0, 0, 0, 0.6);
-}
-.upload-list:hover .upload-list-cover {
-  display: block;
-}
-.upload-list-cover i {
-  color: #fff;
-  font-size: 20px;
+.link-text {
+  color: #409eff;
   cursor: pointer;
-  margin: 0 2px;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
 }
 </style>
diff --git a/seller/src/views/promotion/live/live.vue b/seller/src/views/promotion/live/live.vue
index 10bd7aa4..d545bc97 100644
--- a/seller/src/views/promotion/live/live.vue
+++ b/seller/src/views/promotion/live/live.vue
@@ -1,38 +1,69 @@
 <template>
   <div>
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
+    <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"
+        />
+      </el-tabs>
 
-        <Form-item label="直播状态" prop="promotionStatus">
-          <Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 240px">
-            <Option value="NEW">未开始</Option>
-            <Option value="START">直播中</Option>
-            <Option value="END">已结束</Option>
+      <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>
 
-          </Select>
-        </Form-item>
-
-        <Button @click="handleSearch" type="primary" class="search-btn" icon="ios-search">搜索</Button>
-      </Form>
-      </Card>
-    <Card>
-      <div class="btns">
-        <Button @click="createLive()" type="primary">创建直播</Button>
+      <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"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePageNumber"
+          @size-change="changePageSize"
+        />
       </div>
-      <Tabs v-model="searchForm.status">
-        <!-- 标签栏 -->
-        <TabPane 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" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePageNumber" @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>
 </template>
 
@@ -41,108 +72,18 @@ import { getLiveList } 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: "直播状态",
-          render: (h, params) => {
-            return h(
-              "span",
-              params.row.status == "NEW"
-                ? "未开始"
-                : params.row.status == "START"
-                ? "直播中"
-                : "已结束"
-            );
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          render: (h, params) => {
-            return h(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                },
-              },
-              [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.getLiveDetail(params.row);
-                      },
-                    },
-                  },
-                  "查看/添加商品"
-                ),
-              ]
-            );
-          },
-        },
-      ], //table中显示的title
-      liveData: [], //table中显示的直播数据
+      liveData: [],
     };
   },
   watch: {
@@ -158,33 +99,17 @@ export default {
     this.getStoreLives();
   },
   methods: {
-    /**
-     * 搜索直播间状态
-     */
-    handleSearch() {
+    async star(val, index) {
+      let switched = this.liveData[index].recommend;
+      await whetherStar({ id: val.id, recommend: switched });
       this.getStoreLives();
     },
-
-    /**
-     * 页面数据大小分页回调
-     */
-    changePageSize(val) {
-      console.log(val)
-      this.searchForm.pageSize = val;
+    changePageSize() {
       this.getStoreLives();
     },
-    /**
-     * 分页回调
-     */
-    changePageNumber(val) {
-      console.log(val)
-      this.searchForm.pageNumber = val;
+    changePageNumber() {
       this.getStoreLives();
     },
-
-    /**
-     * 获取店铺直播间列表
-     */
     async getStoreLives() {
       let result = await getLiveList(this.searchForm);
       if (result.success) {
@@ -192,29 +117,17 @@ export default {
         this.total = result.result.total;
       }
     },
-
-    /**
-     * 获取直播间详情
-     */
     getLiveDetail(val) {
       this.$router.push({
-        path: "/add-live",
+        path: "/live-detail",
         query: { ...val, liveStatus: this.searchForm.status },
       });
     },
-    /**
-     * 创建直播
-     */
-    createLive() {
-      this.$router.push({ path: "/add-live" });
-    },
-
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import "@/styles/table-common.scss";
 .btns {
   margin-bottom: 10px;
   margin-top: 10px;
diff --git a/seller/src/views/promotion/live/liveGoods.vue b/seller/src/views/promotion/live/liveGoods.vue
index 1bc5b22c..538132ca 100644
--- a/seller/src/views/promotion/live/liveGoods.vue
+++ b/seller/src/views/promotion/live/liveGoods.vue
@@ -1,393 +1,244 @@
 <template>
-  <div class="wrapper">
-    <Card>
-      <Form ref="searchForm" :model="params" inline :label-width="100" class="search-form">
-        <Form-item label="商品名称">
-          <Input type="text" v-model="params.name" placeholder="请输入商品名称" clearable style="width: 240px" />
-        </Form-item>
+  <div>
+    <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>
+        </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>
+        </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>
+        </el-form-item>
 
-        <Button @click="getLiveGoodsMethods('clear')" type="primary" class="search-btn" icon="ios-search">搜索</Button>
-      </Form>
-      </Card>
-    <Card>
-      <h4 v-if="!reviewed">
-        由于直播商品需经过小程序直播平台的审核，你需要在此先提审商品，为了不影响直播间选取商品，请提前1天提审商品；
-      </h4>
+        <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>
+        </el-form-item>
 
-      <div>
-        <Tabs v-model="params.auditStatus">
-          <TabPane v-for="(item,index) in liveTabWay" :key="index" :label="item.label" :name="item.type+''">
-          </TabPane>
-        </Tabs>
-      </div>
-
-      <Button v-if="!reviewed" type="primary" style="margin-bottom:10px;" @click="addNewLiveGoods" icon="md-add">选择商品</Button>
-      <Button type="primary" v-if="params.auditStatus == 0" ghost style="margin:0 0 10px 10px" @click="getLiveGoodsMethods('clear')">更新状态</Button>
-      <div style="position:relative">
-        <Spin size="large" fix v-if="tableLoading">
-        </Spin>
-        <Table class="mt_10" disabled-hover :columns="liveGoodsColumns" :data="liveGoodsData">
-
-          <template slot-scope="{ row }" slot="goodsName">
-            <div class="flex-goods">
-              <img class="thumbnail" :src="row.thumbnail || row.goodsImage">
-              {{ row.goodsName || row.name }}
+        <el-form-item label="分享卡片封面" prop="feedsImg">
+          <div class="upload-list" v-if="liveForm.feedsImg">
+            <img :src="liveForm.feedsImg">
+            <div class="upload-list-cover" @click="handleView(liveForm.feedsImg)">
+              <span class="view-icon">查看</span>
             </div>
-          </template>
-          <template slot-scope="{ row ,index }" class="price" slot="price">
-            <!-- 如果为新增商品显示 -->
+          </div>
+          <div class="tips">
+            直播间分享图，图片规则：建议像素800*640，大小不超过1M；
+          </div>
+        </el-form-item>
 
-            <RadioGroup v-if="params.auditStatus == 99" @on-change="changeRadio(row,'priceType')" v-model="row.priceType">
-              <div class="price-item">
-                <Radio :label="1">一口价:</Radio>
-                <InputNumber :min="0.1" v-if="liveGoodsData[index].priceType == 1" style="width:100px" v-model="liveGoodsData[index].price"></InputNumber>
-              </div>
-              <div class="price-item">
-                <Radio :label="2">区间价:</Radio> <span v-if="liveGoodsData[index].priceType == 2">
-                  <InputNumber :min="0.1" style="width:100px" v-model="liveGoodsData[index].price" />至
-                  <InputNumber :min="0.1" style="width:100px" v-model="liveGoodsData[index].price2" />
-                </span>
-              </div>
-              <div class="price-item">
-                <Radio :label="3">折扣价:</Radio> <span v-if="liveGoodsData[index].priceType == 3">原价<InputNumber :min="0.1" style="width:100px" v-model="liveGoodsData[index].price"></InputNumber>现价
-                  <InputNumber :min="0.1" style="width:100px" v-model="liveGoodsData[index].price2" />
-                </span>
-              </div>
-            </RadioGroup>
-            <div v-else>
-              <div v-if="row.priceType == 1"><priceColorScheme :value="row.price" :color="$mainColor" /></div>
-              <div class="flex" v-if="row.priceType == 2"><priceColorScheme :value="row.price" :color="$mainColor" />至<priceColorScheme :value="row.price2" :color="$mainColor" /></div>
-              <div class="flex" v-if="row.priceType == 3"><priceColorScheme :value="row.price2" :color="$mainColor" /><span class="original-price">{{row.price | unitPrice('￥')}}</span></div>
+        <el-form-item label="直播间背景墙" prop="coverImg">
+          <div class="upload-list" v-if="liveForm.coverImg">
+            <img :src="liveForm.coverImg">
+            <div class="upload-list-cover" @click="handleView(liveForm.coverImg)">
+              <span class="view-icon">查看</span>
             </div>
+          </div>
+          <div class="tips"> 直播间背景图，图片规则：建议像素1080*1920，大小不超过1M</div>
+        </el-form-item>
 
-          </template>
+        <el-form-item label="直播间分享图" prop="shareImg">
+          <div class="upload-list" v-if="liveForm.shareImg">
+            <img :src="liveForm.shareImg">
+            <div class="upload-list-cover" @click="handleView(liveForm.shareImg)">
+              <span class="view-icon">查看</span>
+            </div>
+          </div>
+          <div class="tips"> 直播间分享图，图片规则：建议像素800*640，大小不超过1M</div>
+        </el-form-item>
 
-          <template slot-scope="{ row ,index }" slot="action">
-            <a v-if="params.auditStatus == 99" @click="liveGoodsData.splice(index,1)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">删除</a>
-            <span v-if="params.auditStatus == 99 || (params.auditStatus != 99 && !reviewed) || reviewed" style="margin:0 8px;color:#dcdee2">|</span>
-            <a v-if="params.auditStatus != 99 && !reviewed" @click="$router.push({path:'/goods-operation-edit',query:{id:row.goodsId}})" style="color:#2d8cf0;cursor:pointer;text-decoration:none">查看</a>
-            <span v-if="reviewed" style="margin:0 8px;color:#dcdee2">|</span>
-            <a v-if="reviewed" @click="selectedLiveGoods(row,index)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">{{row.___selected ? '已':''}}选择</a>
-          </template>
-        </Table>
-        <div class="flex">
-          <Page size="small" :total="goodsTotal" @on-change="changePageNumber" class="pageration" @on-page-size-change="changePageSize" :page-size="params.pageSize" show-total show-elevator
-            show-sizer>
-          </Page>
+        <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>
+        </el-form-item>
 
-        </div>
-      </div>
-    </Card>
-    <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
-    <div v-if="params.auditStatus == 99" class="submit">
-      <Button type="primary" :loading="saveGoodsLoading" @click="saveLiveGoods">保存商品</Button>
-    </div>
+        <el-form-item>
+          <el-button type="primary" @click="createLives()">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-dialog v-model="imageVisible" title="查看图片" width="600px">
+      <img :src="imageSrc" v-if="imageVisible" style="width: 100%">
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import skuSelect from "@/views/lili-dialog"; //选择商品组件
 import { addLiveStoreGoods, getLiveGoods } from "@/api/promotion.js";
 export default {
-  components: {
-    skuSelect,
-  },
   data() {
     return {
-      goodsTotal: 0, //商品总数
-      saveGoodsLoading: false, //保存商品加载
-      tableLoading: false, //表格是否加载
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-        auditStatus: 2, //商品状态
+      imageVisible: false,
+      imageSrc: "",
+      liveForm: {
+        name: "",
+        anchorName: "",
+        anchorWechat: "",
+        feedsImg: "",
+        coverImg: "",
+        shareImg: "",
+        startTime: "",
       },
-      // 商品审核状态
-      liveTabWay: [
-        {
-          label: "待提审",
-          type: 0,
-        },
-        {
-          label: "已审核",
-          type: 2,
-        },
-
-        {
-          label: "审核中",
-          type: 1,
-        },
-
-        {
-          label: "审核未通过",
-          type: 3,
-        },
-      ],
-
-      // 商品表格columns
-      liveGoodsColumns: [
-        {
-          title: "商品",
-          slot: "goodsName",
-        },
-        {
-          title: "价格",
-          slot: "price",
-        },
-        {
-          title: "库存",
-          key: "quantity",
-          width: 100,
-        },
-
-        {
-          title: "操作",
-          slot: "action",
-          width: 100,
-        },
-      ],
-      // 表格商品详情
-      liveGoodsData: [],
-      // 已选商品
-      selectedGoods: [],
+      times: [],
+      liveData: [],
+      commodityList: "",
     };
   },
-  props: {
-    // 是否是已审核，此处为组件模式时使用。去除添加等功能 只保留查询以及新增选择回调数据
-    reviewed: {
-      type: Boolean,
-      default: false,
-    },
-    // 初始化信息，此处为组件模式时使用。父级将数据传输到此方法上
-    init: {
-      type: null,
-      default: "",
-    },
-  },
-  watch: {
-    //此处为组件模式时使用 监听此处为开启则需要删除tab上面的数据只显示已审核
-    reviewed: {
-      handler(val) {
-        if (val) {
-          this.liveTabWay = this.liveTabWay.filter((item) => {
-            return item.label == "已审核";
-          });
-        }
-      },
-      immediate: true,
-    },
-    //此处为组件模式时使用 监听父级给传值
-    init: {
-      handler(val) {
-        if (val) {
-          this.$nextTick(() => {
-            // 将当前父级返回的数据和当前数据进行匹配
-            this.selectedGoods = val;
-            this.liveGoodsData.forEach((item, index) => {
-              val.forEach((callback) => {
-                if (item.id == callback.id) {
-                  this.$set(this.liveGoodsData[index], "___selected", true);
-                  // this.selectedGoods.push(item);
-                }
-              });
-            });
-          });
-        }
-      },
-      immediate: true,
-    },
-    // 监听如果次数变化说明用户再点击tab
-    "params.auditStatus": {
-      handler(val) {
-        this.liveGoodsData = [];
-        if (val != 99) {
-          this.params.pageNumber = 1;
-          this.getLiveGoodsMethods();
-        }
-      },
-      immediate: true,
-    },
+  mounted() {
+    if (this.$route.query.id) {
+      this.getLiveDetail();
+    }
+    this.accessToken = {
+      accessToken: this.getStore("accessToken"),
+    };
   },
+
   methods: {
-    /**
-     * 回调参数补充
-     */
-    selectedLiveGoods(val, index) {
-      this.$emit("selectedGoods", val);
+    handleView(src) {
+      this.imageVisible = true;
+      this.imageSrc = src;
     },
-    /**
-     * 解决radio数据不回显问题
-     */
-    changeRadio(val) {
-      this.$set(this.liveGoodsData[val._index], "priceType", val.priceType);
-    },
-    /**
-     * 页面数据大小分页回调
-     */
-    changePageSize(val) {
-      this.params.pageSize = val;
-      this.getLiveGoodsMethods("clear");
-    },
-    /**
-     * 分页回调
-     */
-    changePageNumber(val) {
-      this.params.pageNumber = val;
-      this.getLiveGoodsMethods("clear");
-    },
-    /**
-     * 清除新增的tab
-     */
-    clearNewLiveTab() {
-      this.liveTabWay.map((item, index) => {
-        return item.type == 99 && this.liveTabWay.splice(index, 1);
+    handleMaxSize(file) {
+      this.$Notice.warning({
+        title: "文件大小过大",
+        desc: "所选文件大小过大, 不得超过 1M.",
       });
     },
+    async getLiveDetail() {
+      let result = await getLiveInfo(this.$route.query.id);
 
-    /**
-     * 查询商品
-     */
-    async getLiveGoodsMethods(type) {
-      this.tableLoading = true;
-
-      let result = await getLiveGoods(this.params);
       if (result.success) {
-        // 将表格数据清除
-        if (type == "clear") {
-          this.liveGoodsData = [];
+        let data = result.result;
+        for (let key in data) {
+          this.liveForm[key] = data[key];
         }
-        this.liveGoodsData.push(...result.result.records);
-        this.goodsTotal = result.result.total;
+
+        this.liveData = data.commodityList;
+        this.commodityList = data.commodityList;
+
+        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;
       }
-      this.tableLoading = false;
-    },
-
-    /**
-     * 保存直播商品
-     */
-    async saveLiveGoods() {
-      this.saveGoodsLoading = true;
-      let submit = this.liveGoodsData.map((element) => {
-
-        return {
-          goodsId: element.goodsId, //商品id
-          goodsImage: element.small, //商品图片  最大为 300 * 300
-          name: element.goodsName, //商品昵称
-          price: parseInt(element.price), //商品价格
-          quantity: element.quantity, //库存
-          price2: element.price2 ? parseInt(element.price2) : "", //商品价格
-          priceType: element.priceType, // priceType  Number  是  价格类型，1：一口价（只需要传入price，price2不传） 2：价格区间（price字段为左边界，price2字段为右边界，price和price2必传） 3：显示折扣价（price字段为原价，price2字段为现价， price和price2必传）
-          skuId: element.id,
-          url: `pages/product/goods?id=${element.id}&goodsId=${element.goodsId}`, //小程序地址
-        };
-      });
-
-      let result = await addLiveStoreGoods(submit);
-      if (result.success) {
-        this.$Message.success({
-          content: `添加成功！`,
-        });
-
-        this.params.auditStatus = 0;
-      }
-      this.saveGoodsLoading = false;
-    },
-
-    /**
-     * 商品选择器回调的商品信息
-     */
-    selectedGoodsData(goods) {
-      goods.map((item) => {
-        return (item.priceType = 1);
-      });
-
-      this.liveGoodsData.push(...goods);
-    },
-
-    /**
-     * 新增商品
-     */
-    addNewLiveGoods() {
-      this.clearNewLiveTab();
-      this.liveTabWay.push({
-        type: 99,
-        label: "新增商品",
-      });
-      this.$set(this, "liveGoodsData", []);
-      this.params.auditStatus = 99;
-      this.$refs.skuSelect.open("goods");
-      this.$refs.skuSelect.goodsData = JSON.parse(
-        JSON.stringify(this.liveGoodsData)
-      );
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import "@/styles/table-common.scss";
-.search-form {
-  margin-bottom: 10px;
-}
-.flex {
+.action {
   display: flex;
-  justify-content: flex-end;
-  margin: 20px 0;
-}
-.wrapper {
-  position: relative;
-}
-.thumbnail {
-  width: 100px;
-  height: 100px;
-  border-radius: 0.4em;
-}
-.flex-goods {
-  margin: 10px;
-  display: flex;
-
-  align-items: center;
-  > img {
-    margin-right: 10px;
+  :deep(.el-button) {
+    margin: 0 5px !important;
   }
 }
-.price-item {
-  margin: 15px 5px;
-  > * {
-    margin: 5px;
-  }
-}
-.submit {
-  box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.1);
-  height: 60px;
-  background: #fff;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 .original-price {
   margin-left: 10px;
   color: #999;
   text-decoration: line-through;
 }
-
-h4 {
-  margin-bottom: 10px;
-  padding: 0 10px;
-  border: 1px solid #ddd;
-  background-color: #f8f8f8;
-  color: #333;
-  font-size: 12px;
-  line-height: 40px;
-  text-align: left;
+.thumbnail {
+  width: 50px;
+  height: 50px;
+  border-radius: 0.4em;
 }
-.flex{
+.flex-goods {
+  margin: 10px;
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  > img {
+    margin-right: 10px;
+  }
+}
+.tips {
+  color: #999;
+  font-size: 12px;
+}
+.goods-table {
+  width: 1000px;
+  margin: 10px 0;
+}
+.upload-list {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  position: relative;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  margin-right: 4px;
+}
+.upload-list img {
+  width: 100%;
+  height: 100%;
+}
+.upload-list-cover {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+.upload-list:hover .upload-list-cover {
+  display: block;
+}
+.view-icon {
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+  margin: 0 2px;
 }
 </style>
diff --git a/seller/src/views/promotion/pintuan/pintuan-edit.vue b/seller/src/views/promotion/pintuan/pintuan-edit.vue
index 33074755..19bae4cc 100644
--- a/seller/src/views/promotion/pintuan/pintuan-edit.vue
+++ b/seller/src/views/promotion/pintuan/pintuan-edit.vue
@@ -1,187 +1,179 @@
 <template>
-  <div class="new-pintuan">
-    <Card>
-      <Form ref="form" :model="form" :label-width="130" :rules="formValidate">
-        <FormItem label="活动名称" prop="promotionName" :label-width="130">
-          <Input v-model="form.promotionName" clearable style="width: 260px" maxlength="25" />
-          <div style="color: #cccccc">
-            活动名称将显示在对人拼团活动列表中，方便商家管理使用，最多输入25个字符
-          </div>
-        </FormItem>
-        <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>
+  <div class="pintuan-goods">
+    <el-card>
+      <h4>活动详情</h4>
+      <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>
 
-        <FormItem label="参团人数" prop="requiredNum" :label-width="130">
-          <Input v-model="form.requiredNum" style="width: 260px" max="8">
-          <span slot="append">人</span>
-          </Input>
-          <span style="color: #cccccc">参团人数不少于2人，不得超过10人。</span>
-        </FormItem>
-        <FormItem label="限购数量" prop="limitNum" :label-width="130">
-          <Input v-model="form.limitNum" type="number" style="width: 260px">
-          <span slot="append">件/人</span>
-          </Input>
-          <span style="color: #cccccc">如果设置为0则视为不限制购买数量</span>
-        </FormItem>
-        <FormItem label="虚拟成团" prop="fictitious">
-          <RadioGroup type="button" button-style="solid" v-model="form.fictitious">
-            <Radio title="开启" :label="1">
-              <span>开启</span>
-            </Radio>
-            <Radio title="关闭" :label="0">
-              <span>关闭</span>
-            </Radio>
-          </RadioGroup>
-          <br />
-          <span style="color: #cccccc">开启虚拟成团后，24小时人数未满的团，系统将会模拟匿名买家凑满人数，使该团成团；您只需要对已付款参团的真实买家发货；建议合理开启以提高成团率</span>
-        </FormItem>
-        <FormItem label="拼团规则" prop="pintuanRule">
-          <Input v-model="form.pintuanRule" type="textarea" :rows="4" clearable maxlength="255" style="width: 260px" />
-          <br />
-          <span style="color: #cccccc">拼团规则描述不能为空且不能大于255个字，会在WAP拼团详情页面显示</span>
-        </FormItem>
-      </Form>
-      <div>
-        <Button type="text" @click="closeCurrentPage">返回</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
+      <h4>商品信息</h4>
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        class="operation"
+        :data="goodsData"
+        style="width: 100%"
+      >
+        <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"
+                  color-dark="#000"
+                  color-light="#fff"
+                  :size="150"
+                />
+              </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"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
       </div>
-    </Card>
+    </el-card>
   </div>
 </template>
+
 <script>
-import { savePintuan, editPintuan, getPintuanDetail } from "@/api/promotion";
+import { getPintuanGoodsList, getPintuanDetail } from "@/api/promotion.js";
+import vueQr from "vue-qr";
+
 export default {
+  components: { vueQr },
   data() {
     return {
-      id: this.$route.query.id, // 拼团id
-      form: {
-        // 添加或编辑表单对象初始化数据
-        promotionName: "",
-        promotionTitle: "",
-        pintuanRule: "",
-        requiredNum: "",
-        fictitious: 0,
-        limitNum: "",
-        startTime: "",
-        endTime: "",
-      },
-      // 表单验证规则
-      formValidate: {
-        promotionName: [{ required: true, message: "活动名称不能为空" }],
-        requiredNum: [
-          { required: true, message: "参团人数不能为空" },
-          {
-            pattern: /^([2-9]|10)?$/,
-            message: "参团人数不合法",
-          },
-        ],
-        limitNum: [
-          { required: true, message: "限购数不能为空" },
-          {
-            pattern: /^(0|[1-9]\d?|100)$/,
-            message: "限购数不合法",
-          },
-        ],
-        rangeTime: [{ required: true, message: "请选择活动时间" }],
-      },
-      submitLoading: false, // 添加或编辑提交状态
-      options: {
-        // 不可选取时间
-        disabledDate(date) {
-          return date && date.valueOf() < Date.now() - 86400000;
-        },
+      loading: false,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
       },
+      data: [],
+      total: 0,
+      goodsData: [],
     };
   },
-  mounted() {
-    if (this.id) {
-      this.getDetail();
-    }
-  },
-
   methods: {
-    // 关闭当前页面
-    closeCurrentPage() {
-      this.$store.commit("removeTag", "new-pintuan");
-      localStorage.storeOpenedList = JSON.stringify(
-        this.$store.state.app.storeOpenedList
-      );
-      this.$router.go(-1);
+    promotionStatusText(status) {
+      const map = {
+        NEW: "未开始",
+        START: "已开始",
+        END: "已结束",
+        CLOSE: "已关闭",
+      };
+      return map[status] || "未知";
     },
-    // 提交活动
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          let params = JSON.parse(JSON.stringify(this.form));
-          params.fictitious
-            ? (params.fictitious = true)
-            : (params.fictitious = false);
-          params.startTime = this.$options.filters.unixToDate(
-            this.form.rangeTime[0] / 1000
-          );
-
-          params.endTime = this.$options.filters.unixToDate(
-            this.form.rangeTime[1] / 1000
-          );
-          if (params.startTime === "" || params.endTime === "") {
-            this.$Message.error("活动时间不能为空");
-            this.submitLoading = false;
-            return;
-          }
-          if (params.startTime < new Date()) {
-            this.$Message.error("拼团活动开始时间不能小于当前时间");
-            this.submitLoading = false;
-            return;
-          }
-
-          delete params.rangeTime;
-          if (!this.id) {
-            // 添加 避免编辑后传入id等数据 记得删除
-            delete params.id;
-            savePintuan(params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("拼团活动发布成功");
-                this.closeCurrentPage();
-              }
-            });
-          } else {
-            // 编辑
-            if (params.promotionGoodsList == "")
-              delete params.promotionGoodsList;
-            editPintuan(params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("操作成功");
-                this.closeCurrentPage();
-              }
-            });
-          }
+    promotionStatusTagType(status) {
+      const map = {
+        NEW: "info",
+        START: "success",
+        END: "danger",
+        CLOSE: "danger",
+      };
+      return map[status] || "danger";
+    },
+    init() {
+      this.getDataList();
+      this.getPintuanMsg();
+    },
+    changePage() {
+      this.getDataList();
+    },
+    changePageSize() {
+      this.searchForm.pageNumber = 1;
+      this.getDataList();
+    },
+    getDataList() {
+      this.loading = true;
+      this.searchForm.pintuanId = this.$route.query.id;
+      getPintuanGoodsList(this.searchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.goodsData = res.result.records;
+          this.total = res.result.total;
         }
       });
     },
-    // 获取详情
-    getDetail() {
-      getPintuanDetail(this.id).then((res) => {
-        if (res.success) {
-          const data = res.result;
-          data.rangeTime = [];
-          data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
-          this.form = data;
-          // 此处将值转换为 1 true ，0 false 不然ivew radio组件会报错
-          this.form.fictitious ? this.$set(this.form, "fictitious", 1)  : this.$set(this.form, "fictitious", 0);
-
-       }
+    getPintuanMsg() {
+      getPintuanDetail(this.$route.query.id).then((res) => {
+        if (res.success) this.data.push(res.result);
       });
     },
   },
+  mounted() {
+    this.init();
+  },
 };
 </script>
+
 <style lang="scss" scoped>
-::v-deep .ivu-form-item {
-  padding: 18px 10px !important;
+h4 {
+  margin: 20px 0;
+  padding: 0 10px;
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+  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/seller/src/views/promotion/pintuan/pintuan-goods.vue b/seller/src/views/promotion/pintuan/pintuan-goods.vue
index eac1b762..00b91b84 100644
--- a/seller/src/views/promotion/pintuan/pintuan-goods.vue
+++ b/seller/src/views/promotion/pintuan/pintuan-goods.vue
@@ -1,262 +1,133 @@
 <template>
   <div class="pintuan-goods">
-    <Card>
-      <Table style="margin: 10px 0" border :columns="columns" :data="data"></Table>
+    <el-card>
+      <h4>活动详情</h4>
+      <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>
 
-      <Row class="operation" v-if="status == 'manager'">
-        <Button type="primary" @click="openSkuList">选择商品</Button>
-        <Button @click="delAll">批量删除</Button>
-        <Button @click="getDataList" icon="md-refresh">刷新</Button>
-        <Button type="dashed" @click="openTip = !openTip">{{
-          openTip ? "关闭提示" : "开启提示"
-        }}</Button>
-      </Row>
-      <Row v-show="openTip" v-if="status == 'manager'">
-        <Alert show-icon>
-          已选择 <span>{{ selectCount }}</span> 项
-          <a class="select-clear" @click="clearSelectAll">清空</a>
-        </Alert>
-      </Row>
-      <h3 class="act-goods">活动商品</h3>
-      <Table
-        class="mt_10"
-        :loading="loading"
-        border
-        :columns="goodsColumns"
-        :data="goodsData"
+      <h4>商品信息</h4>
+      <el-table
         ref="table"
-        @on-selection-change="changeSelect"
+        v-loading="loading"
+        border
+        class="operation"
+        :data="goodsData"
+        style="width: 100%"
       >
-        <template slot-scope="{ row, index }" slot="price">
-          <Input
-            v-model="row.price"
-            :disabled="status === 'view'"
-            @input="goodsData[index].price = row.price"
-          />
-        </template>
-        <template slot-scope="{ index }" slot="action">
-          <a
-            v-if="status === 'manager'"
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-            @click="delGoods(index)"
-          >删除</a>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="page operation">
-        <Page
-          :current="searchForm.pageNumber"
-          :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[10, 20, 50]"
-          size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-      <Row class="operation">
-        <Button @click="closeCurrentPage">返回</Button>
-        <Button
-          v-if="status == 'manager'"
-          type="primary"
-          :loading="submitLoading"
-          @click="save"
-          >保存</Button
-        >
-      </Row>
-    </Card>
+        <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"
+                  color-dark="#000"
+                  color-light="#fff"
+                  :size="150"
+                />
+              </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>
 
-    <sku-select
-      ref="skuSelect"
-      :goodsData="goodsData"
-      @selectedGoodsData="selectedGoodsData"
-    ></sku-select>
+      <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"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
+
 <script>
 import { getPintuanGoodsList, getPintuanDetail, editPintuan } from "@/api/promotion.js";
-import skuSelect from "@/views/lili-dialog";
+import vueQr from "vue-qr";
+
 export default {
-  components: {
-    skuSelect,
-  },
+  components: { vueQr },
   data() {
     return {
-      openTip: true, // 显示提示
-      loading: false, // 表单加载状态
+      loading: false,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
+        pageNumber: 1,
+        pageSize: 20,
       },
-
-      submitLoading: false, // 添加或编辑提交状态
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      status: this.$route.query.status, // 查看还是修改
-      columns: [
-        // 活动详情表头
-        {
-          title: "活动名称",
-          key: "promotionName",
-          minWidth: 120,
-        },
-        {
-          title: "活动开始时间",
-          key: "startTime",
-          minWidth: 120,
-        },
-        {
-          title: "活动结束时间",
-          key: "endTime",
-          minWidth: 120,
-        },
-        {
-          title: "状态",
-          key: "promotionStatus",
-          minWidth: 100,
-          render: (h, params) => {
-            let text = "未知",
-              color = "";
-            if (params.row.promotionStatus == "NEW") {
-              text = "未开始";
-              color = "default";
-            } else if (params.row.promotionStatus == "START") {
-              text = "已开始";
-              color = "green";
-            } else if (params.row.promotionStatus == "END") {
-              text = "已结束";
-              color = "blue";
-            } else if (params.row.promotionStatus == "CLOSE") {
-              text = "已关闭";
-              color = "red";
-            }
-            return h("div", [h("Tag", { props: { color: color } }, text)]);
-          },
-        },
-      ],
-      goodsColumns: [
-        // 活动商品表头
-        { type: "selection", width: 60, align: "center" },
-        {
-          title: "商品名称",
-          key: "goodsName",
-          minWidth: 120,
-        },
-        {
-          title: "库存",
-          key: "quantity",
-          minWidth: 40,
-        },
-        {
-          title: "拼团价格",
-          key: "price",
-          slot: "price",
-          minWidth: 50,
-        },
-        {
-          title: "操作",
-          slot: "action",
-          minWidth: 50,
-          align: "center",
-        },
-      ],
-      goodsData: [], // 商品列表
+      data: [],
+      total: 0,
+      goodsData: [],
     };
   },
   methods: {
-    // 关闭当前页面
-    closeCurrentPage() {
-      this.$store.commit("removeTag", "pintuan-goods");
-      localStorage.storeOpenedList = JSON.stringify(
-        this.$store.state.app.storeOpenedList
-      );
-      this.$router.go(-1);
+    promotionStatusText(status) {
+      const map = {
+        NEW: "未开始",
+        START: "已开始",
+        END: "已结束",
+        CLOSE: "已关闭",
+      };
+      return map[status] || "未知";
     },
-    // 保存商品
-    save() {
-      if (this.goodsData.length == 0) {
-        this.$Modal.warning({ title: "提示", content: "请选择活动商品" });
-        return;
-      }
-      for (let i = 0; i < this.goodsData.length; i++) {
-        let data = this.goodsData[i];
-        if (!data.price) {
-          this.$Modal.warning({
-            title: "提示",
-            content: `请填写【${data.goodsName}】的价格`,
-          });
-          return;
-        }
-      }
-      this.goodsData.forEach((item) => {
-        item.promotionId = this.data[0].id;
-        item.startTime = this.data[0].startTime;
-        item.endTime = this.data[0].endTime;
-      });
-      this.data[0].promotionGoodsList = this.goodsData;
-      this.submitLoading = true;
-      editPintuan(this.data[0]).then((res) => {
-        this.submitLoading = false;
-        if (res.success) {
-          this.$Message.success("修改拼团商品成功");
-          this.closeCurrentPage();
-        }
-      });
+    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;
-      this.getDataList();
-      this.clearSelectAll();
-    },
-
-    changePageSize(v) {
-      // 分页 改变每页数
-      this.searchForm.pageSize = v;
+    changePage() {
       this.getDataList();
     },
-
-    handleSearch() {
-      // 搜索
+    changePageSize() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
       this.getDataList();
     },
-
-    handleReset() {
-      // 重置
-      this.searchForm.pageNumber = 1;
-      this.searchForm.promotionName = "";
-      this.selectDate = null;
-      this.getDataList();
-    },
-
-    clearSelectAll() {
-      // 清空所有已选项
-      this.$refs.table.selectAll(false);
-    },
-    changeSelect(e) {
-      // 获取选择数据
-      this.selectList = e;
-      this.selectCount = e.length;
-    },
-
     getDataList() {
-      // 获取商品列表
       this.loading = true;
       this.searchForm.pintuanId = this.$route.query.id;
-
       getPintuanGoodsList(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
@@ -266,87 +137,43 @@ export default {
       });
     },
     getPintuanMsg() {
-      // 获取拼团详情
       getPintuanDetail(this.$route.query.id).then((res) => {
         if (res.success) this.data.push(res.result);
       });
     },
-    delGoods(index) {
-      // 删除商品
-      this.goodsData.splice(index, 1);
-      this.selectCount = 0;
-    },
-    delAll() {
-      // 批量删除商品
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要删除的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
-        onOk: () => {
-          let ids = [];
-          this.selectList.forEach(function (e) {
-            ids.push(e.skuId);
-          });
-          this.goodsData = this.goodsData.filter((item) => {
-            return !ids.includes(item.skuId);
-          });
-          this.selectCount = 0;
-        },
-      });
-    },
-    selectedGoodsData(item) {
-      // 选择商品
-      console.log(item);
-      let list = [];
-      item.forEach((e) => {
-        list.push({
-          goodsName: e.goodsName,
-          price: e.price,
-          originalPrice: e.price,
-          quantity: e.quantity,
-          storeId: e.storeId,
-          sellerName: e.sellerName,
-          thumbnail: e.thumbnail,
-          skuId: e.id,
-          categoryPath: e.categoryPath,
-          goodsId: e.goodsId,
-          goodsType: e.goodsType,
-        });
-      });
-      this.goodsData = list;
-    },
-    openSkuList() {
-      // 显示商品选择器
-      this.$refs.skuSelect.open("goods");
-      let data = JSON.parse(JSON.stringify(this.goodsData));
-      data.forEach((e) => {
-        e.id = e.skuId;
-      });
-      this.$refs.skuSelect.goodsData = data;
-    },
   },
   mounted() {
     this.init();
   },
 };
 </script>
+
 <style lang="scss" scoped>
-.operation {
-  margin-bottom: 10px;
-}
-.act-goods {
+h4 {
   margin: 20px 0;
-  font-size: 15px;
-  &::before {
-    content: "|";
-    color: $theme_color;
-    display: inline-block;
-    font-weight: bold;
-    font-size: 16px;
-    margin-right: 5px;
-  }
+  padding: 0 10px;
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+  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/seller/src/views/promotion/pintuan/pintuan.vue b/seller/src/views/promotion/pintuan/pintuan.vue
index cdb97195..5edded95 100644
--- a/seller/src/views/promotion/pintuan/pintuan.vue
+++ b/seller/src/views/promotion/pintuan/pintuan.vue
@@ -1,90 +1,102 @@
 <template>
-  <div class="pintuan">
-    <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
+  <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="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"
           >
-          <Button @click="handleReset" class="search-btn">重置</Button>
-        </Form>
-      </Row>
-      </Card>
-    <Card>
-      <Row class="operation padding-row">
-        <Button @click="newAct" type="primary">添加</Button>
-      </Row>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table">
-        <template slot-scope="{ row }" slot="action">
-          <div class="row">
-            <a v-if="row.promotionStatus == 'NEW'" @click="edit(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">编辑</a>
-            <span v-if="row.promotionStatus == 'NEW'" style="margin:0 8px;color:#dcdee2">|</span>
-            <a v-if="row.promotionStatus == 'NEW'" @click="manage(row, 'manager')" style="color:#2d8cf0;cursor:pointer;text-decoration:none">管理</a>
-            <span v-if="row.promotionStatus !== 'NEW' && row.promotionStatus !== 'CLOSE'" style="margin:0 8px;color:#dcdee2">|</span>
-            <a v-if="row.promotionStatus !== 'NEW' && row.promotionStatus !== 'CLOSE'" @click="manage(row, 'view')" style="color:#2d8cf0;cursor:pointer;text-decoration:none">查看</a>
-            <span v-if="row.promotionStatus == 'CLOSE'" style="margin:0 8px;color:#dcdee2">|</span>
-            <a v-if="row.promotionStatus == 'CLOSE'" @click="open(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">开启</a>
-            <span v-if="row.promotionStatus == 'START'" style="margin:0 8px;color:#dcdee2">|</span>
-            <a v-if="row.promotionStatus == 'START'" @click="close(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">关闭</a>
-          </div>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber + 1"
+            <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="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="[10, 20, 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>
   </div>
 </template>
 
@@ -94,210 +106,86 @@ export default {
   name: "pintuan",
   data() {
     return {
-      loading: true, // 表单加载状态
+      selectDate: [],
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 0, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "startTime", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        promotionName: "",
+        promotionStatus: "",
       },
-      selectDate: null, // 选择的时间
-      columns: [
-        {
-          title: "活动名称",
-          key: "promotionName",
-          minWidth: 120,
-        },
-        {
-          title: "活动开始时间",
-          key: "startTime",
-        },
-        {
-          title: "活动结束时间",
-          key: "endTime",
-        },
-        {
-          title: "状态",
-          key: "promotionStatus",
-          width: 100,
-          render: (h, params) => {
-            let text = "未知",
-              color = "default";
-            if (params.row.promotionStatus == "NEW") {
-              text = "未开始";
-              color = "default";
-            } else if (params.row.promotionStatus == "START") {
-              text = "已开始";
-              color = "green";
-            } else if (params.row.promotionStatus == "END") {
-              text = "已结束";
-              color = "blue";
-            } else if (params.row.promotionStatus == "CLOSE") {
-              text = "已关闭";
-              color = "red";
-            }
-            return h("div", [h("Tag", { props: { color: color } }, text)]);
-          },
-        },
-        {
-          title: "操作",
-          slot: "action",
-          align: "center",
-          width: 250,
-        },
-      ],
-      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();
     },
-    // 改变页码
     changePage(v) {
-      this.searchForm.pageNumber = v - 1;
+      this.searchForm.pageNumber = v;
       this.getDataList();
     },
-    // 改变页数
     changePageSize(v) {
+      this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
-      this.searchForm.pageNumber = 0;
-      this.searchForm.pageSize = 10;
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 重置
-    handleReset() {
-      this.searchForm = {
-        // 搜索框初始化对象
-        pageNumber: 0, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "startTime",
-        order: "desc", // 默认排序方式
-      };
-      this.selectDate = "";
-
-      this.getDataList();
-    },
-    // 时间段分别赋值
-    selectDateRange(v) {
-      if (v) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      }
-    },
-    // 获取列表数据
     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;
+        });
     },
-    // 新建拼团
-    newAct() {
-      this.$router.push({ name: "pintuan-edit" });
+    view(v) {
+      this.$router.push({ name: "pintuan-goods", query: { id: v.id } });
     },
-    // 编辑拼团
-    edit(v) {
-      this.$router.push({ name: "pintuan-edit", query: { id: v.id } });
-    },
-    // 管理拼团商品
-    manage(v, status) {
-      this.$options.filters.customRouterPush({name: "pintuan-goods", query: { id: v.id, status: status }}  )
-
-    },
-    // 手动开启拼团活动
-    open(v) {
-      let sTime = new Date();
-      sTime.setMinutes(sTime.getMinutes() + 10);
-      let eTime = new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1);
-      this.openStartTime = sTime.getTime();
-      this.openEndTime = eTime.getTime();
-      this.$Modal.confirm({
-        title: "确认开启(默认为当前时间的十分钟之后)",
-        content: "您确认要开启此拼团活动?",
-        onOk: () => {
-          let params = {
-            startTime: this.openStartTime,
-            endTime: this.openEndTime,
-          };
-          editPintuanStatus(v.id, params).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("开启活动成功");
-              this.getDataList();
-            }
-          });
-        },
-        render: (h) => {
-          return h("div", [
-            h("DatePicker", {
-              props: {
-                type: "datetimerange",
-                placeholder: "请选择开始时间和结束时间",
-                value: [sTime, eTime],
-              },
-              style: {
-                width: "350px",
-              },
-              on: {
-                input: (val) => {
-                  if (val[0]) {
-                    this.openStartTime = val[0].getTime();
-                  }
-                  if (val[1]) {
-                    this.openEndTime = val[1].getTime();
-                  }
-                },
-              },
-            }),
-          ]);
-        },
-      });
-    },
-    // 关闭拼团活动
     close(v) {
       this.$Modal.confirm({
         title: "确认关闭",
         content: "您确认要关闭此拼团活动?",
         loading: true,
         onOk: () => {
-          editPintuanStatus(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("关闭活动成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-    // 删除拼团活动
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除此拼团活动?",
-        loading: true,
-        onOk: () => {
-          // 删除
-          deletePintuan(v.id).then((res) => {
+          updatePintuanStatus(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("操作成功");
@@ -311,17 +199,11 @@ export default {
   mounted() {
     this.init();
   },
-  // 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
-  beforeRouteLeave(to, from, next) {
-    from.meta.keepAlive = false;
-    next();
-  },
 };
 </script>
-<style lang="scss">
-@import "@/styles/table-common.scss";
-.row Button {
-  margin-right: 4px;
 
+<style lang="scss" scoped>
+.mt_10 {
+  margin-top: 10px;
 }
 </style>
diff --git a/seller/src/views/promotion/seckill/seckill-goods.vue b/seller/src/views/promotion/seckill/seckill-goods.vue
index f3c437fd..cc9e2cfd 100644
--- a/seller/src/views/promotion/seckill/seckill-goods.vue
+++ b/seller/src/views/promotion/seckill/seckill-goods.vue
@@ -1,298 +1,147 @@
 <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>
+    <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>
 
-      <Row class="operation">
-        <template v-if="promotionStatus == 'NEW'">
-          <Button type="primary" @click="openSkuList">选择商品</Button>
-          <!-- <Button @click="delAll">批量删除</Button> -->
-        </template>
-      </Row>
-      <Row class="operation">
-        <Tabs type="card" v-model="tabCurrent">
-          <TabPane
-            v-for="(tab, tabIndex) in goodsList"
-            :key="tabIndex"
-            :label="tab.hour"
-            :name="tabIndex + ''"
-          >
-            <Table
-              :loading="loading"
-              border
-              :columns="goodsColumns"
-              v-if="tabIndex == tabCurrent"
-              :data="tab.list"
-              :ref="'table' + tabIndex"
-              @on-selection-change="changeSelect"
-            >
-              <template slot-scope="{ row }" slot="originalPrice">
-                <div>{{ row.originalPrice | unitPrice("￥") }}</div>
-              </template>
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        class="operation"
+        :data="goodsList"
+        style="width: 100%"
+      >
+        <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, index }" slot="quantity">
-                <InputNumber
-                  :min="0"
-                  v-model="row.quantity"
-                  :disabled="row.promotionApplyStatus == 'PASS'"
-                  @input="goodsList[tabIndex].list[index].quantity = row.quantity"
-                />
-              </template>
-
-              <template slot-scope="{ row, index }" slot="price">
-                <InputNumber
-                  :min="0"
-                  style="width: 100%"
-                  v-model="row.price"
-                  :disabled="row.promotionApplyStatus == 'PASS'"
-                  @input="goodsList[tabIndex].list[index].price = row.price"
-                />
-              </template>
-
-              <template slot-scope="{ row }" slot="promotionApplyStatus">
-                <Badge
-                  status="success"
-                  v-if="row.promotionApplyStatus == 'PASS'"
-                  :text="promotionApplyStatus(row.promotionApplyStatus)"
-                />
-                <Badge
-                  status="blue"
-                  v-if="row.promotionApplyStatus == 'APPLY'"
-                  :text="promotionApplyStatus(row.promotionApplyStatus)"
-                />
-                <Badge
-                  status="error"
-                  v-if="row.promotionApplyStatus == 'REFUSE'"
-                  :text="promotionApplyStatus(row.promotionApplyStatus)"
-                />
-                <span
-                  v-if="row.promotionApplyStatus == 'REFUSE'"
-                  @click="showReason(row.failReason)"
-                  class="reason"
-                  >（拒绝原因）</span
-                >
-                <Badge
-                  status="error"
-                  v-if="row.promotionApplyStatus == ''"
-                  :text="promotionApplyStatus(row.promotionApplyStatus)"
-                />
-              </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
-                  v-if="promotionStatus === 'NEW'"
-                  style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-                  @click="delGoods(index, row)"
-                >删除</a>
-              </template>
-            </Table>
-          </TabPane>
-        </Tabs>
-      </Row>
-
-      <Row class="operation">
-        <Button @click="closeCurrentPage">返回</Button>
-        <Button
-          type="primary"
-          :loading="submitLoading"
-          v-if="promotionStatus === 'NEW'"
-          @click="save"
-          >提交
-        </Button>
-      </Row>
-    </Card>
-
-    <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
+      <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 {
   seckillGoodsList,
   seckillDetail,
-  setSeckillGoods,
   delSeckillGoods,
 } from "@/api/promotion.js";
-import skuSelect from "@/views/lili-dialog";
 
 export default {
-  components: {
-    skuSelect,
-  },
-  watch: {
-    tabCurrent(val) {
-      this.tabIndex = val;
-    },
-  },
   data() {
     return {
-      tabCurrent: 0,
-      promotionStatus: "", // 活动状态
-      loading: false, // 表单加载状态
+      promotionStatus: "",
+      loading: false,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 0, // 当前页数
-        pageSize: 1000, // 页面大小
+        pageNumber: 1,
+        pageSize: 20,
       },
-      tabIndex: 0, // 选择商品的下标
-      submitLoading: false, // 添加或编辑提交状态
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      data: [{}], // 表单数据
-      columns: [
-        {
-          title: "活动名称",
-          key: "promotionName",
-          minWidth: 120,
-        },
-        {
-          title: "活动开始时间",
-          key: "startTime",
-        },
-        {
-          title: "报名截止时间",
-          slot: "applyEndTime",
-        },
-        {
-          title: "时间场次",
-          slot: "hours",
-        },
-      ],
-      goodsColumns: [
-        {
-          title: "商品名称",
-          key: "goodsName",
-          minWidth: 120,
-        },
-        {
-          title: "商品价格",
-          slot: "originalPrice",
-          minWidth: 50,
-        },
-        {
-          title: "库存",
-          slot: "quantity",
-          minWidth: 40,
-        },
-        {
-          title: "活动价格",
-          slot: "price",
-          minWidth: 50,
-        },
-        {
-          title: "状态",
-          slot: "promotionApplyStatus",
-          minWidth: 30,
-        },
-        {
-          title: "操作",
-          slot: "action",
-          minWidth: 50,
-        },
-      ],
-      goodsList: [], // 商品列表
-      defaultGoodsList: [], //默认查询秒杀的商品
+      total: 0,
+      data: [],
+      goodsList: [],
     };
   },
   methods: {
-    // 关闭当前页面
-    closeCurrentPage() {
-      this.$store.commit("removeTag", "seckill-goods");
-      localStorage.storeOpenedList = JSON.stringify(
-        this.$store.state.app.storeOpenedList
-      );
-      this.$router.go(-1);
-    },
-    // 提交秒杀商品
-    save() {
-      let list = JSON.parse(JSON.stringify(this.goodsList));
-      let params = {
-        seckillId: this.$route.query.id,
-        applyVos: [],
+    seckillStatusText(status) {
+      const map = {
+        NEW: "新建",
+        START: "开始",
+        END: "结束",
+        CLOSE: "废弃",
       };
-
-      list.forEach((e, index) => {
-        e.list.forEach((i) => {
-          // if(e.id) delete e.id
-          params.applyVos.push(i);
-        });
-      });
-      this.submitLoading = true;
-
-      console.log(list);
-
-      setSeckillGoods(params).then((res) => {
-        this.submitLoading = false;
-        if (res && res.success) {
-          this.$Message.success("提交活动商品成功");
-          this.closeCurrentPage();
-        }
-      });
+      return map[status] || status || "-";
+    },
+    seckillStatusTagType(status) {
+      const map = {
+        NEW: "danger",
+        START: "success",
+        END: "danger",
+        CLOSE: "danger",
+      };
+      return map[status] || "danger";
     },
-    // 初始化数据
     init() {
       this.getSeckillMsg();
     },
-    // 清除选中状态
-    clearSelectAll() {
-      this.$refs.table.selectAll(false);
+    changePage() {
+      this.getDataList();
     },
-    // 获取选择数据
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
+    changePageSize() {
+      this.searchForm.pageNumber = 1;
+      this.getDataList();
     },
-
     getDataList() {
-      // 获取商品详情
       this.loading = true;
       this.searchForm.seckillId = this.$route.query.id;
-      // 处理过的时间 为‘1:00’
-      let hours = this.unixHours(this.data[0].hours);
-      hours.forEach((e) => {
-        this.goodsList.push({
-          hour: e,
-          list: [],
-        });
-      });
       seckillGoodsList(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success && res.result) {
-          let data = res.result.records;
-          // 未处理时间 为'1'
-          let noFilterhours = this.data[0].hours.split(",");
-          if (data.length) {
-            noFilterhours.forEach((e, index) => {
-              data.forEach((i) => {
-                if (i.timeLine == e) {
-                  this.goodsList[index].list.push(i);
-                }
-              });
-            });
-
-            this.defaultGoodsList = this.goodsList[this.tabIndex].list;
-          }
+          this.goodsList = res.result.records;
+          this.total = res.result.total;
         }
       });
     },
-
     getSeckillMsg() {
-      // 获取活动详情
       seckillDetail(this.$route.query.id).then((res) => {
         if (res.success && res.result) {
           this.data = [];
@@ -303,116 +152,57 @@ export default {
       });
     },
     delGoods(index, row) {
-      // 删除商品
-      if (row.promotionApplyStatus === "PASS") {
-        const params = {
-          seckillId: row.seckillId,
-          id: row.id,
-        };
-        delSeckillGoods(params).then((res) => {
-          if (res.success) {
-            this.goodsList[this.tabIndex].list.splice(index, 1);
-            this.$Message.success("删除成功！");
-          }
-        });
-      } else {
-        this.goodsList[this.tabIndex].list.splice(index, 1);
-        this.$Message.success("删除成功！");
-      }
-    },
-    selectedGoodsData(callback) {
-      let way = [];
-      let data = JSON.parse(JSON.stringify(callback));
-
-      data.forEach((e) => {
-        way.push({
-          goodsName: e.goodsName,
-          price: e.price,
-          originalPrice: e.price,
-          promotionApplyStatus: e.promotionApplyStatus || "",
-          quantity: e.quantity,
-          seckillId: this.$route.query.id,
-          storeId: e.storeId,
-          storeName: e.storeName,
-          skuId: e.id,
-          timeLine: this.data[0].hours.split(",")[this.tabIndex],
-        });
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除该商品吗?删除后不可恢复",
+        onOk: () => {
+          const params = {
+            seckillId: row.seckillId,
+            id: row.id,
+          };
+          delSeckillGoods(params).then((res) => {
+            if (res.success) {
+              this.goodsList.splice(index, 1);
+              this.$Message.success("删除成功！");
+            }
+          });
+        },
       });
-
-      this.$set(this.goodsList[this.tabIndex], "list", [
-        ...way,
-        // ...this.defaultGoodsList,
-      ]);
-      // this.$nextTick(() => {
-      //   this.$forceUpdate();
-      // });
-    },
-    openSkuList() {
-      // 显示商品选择器
-
-      this.$refs.skuSelect.open("goods");
-      let data = this.goodsList[this.tabIndex].list;
-      data.forEach((e) => {
-        e.id = e.skuId;
-      });
-      this.$refs.skuSelect.goodsData = data;
     },
     unixDate(time) {
-      // 处理报名截止时间
-      return this.$options.filters.unixToDate(new Date(time) / 1000);
+      return this.$filters.unixToDate(new Date(time) / 1000);
     },
     unixHours(item) {
-      if (item) {
-        // 处理小时场次
-        let hourArr = item.split(",");
-        for (let i = 0; i < hourArr.length; i++) {
-          hourArr[i] += ":00";
-        }
-        return hourArr;
+      const hourArr = item.split(",");
+      for (let i = 0; i < hourArr.length; i++) {
+        hourArr[i] += ":00";
       }
-      return [];
-    },
-    // 格式化申请状态
-    promotionApplyStatus(key) {
-      switch (key) {
-        case "APPLY":
-          return "申请";
-        case "PASS":
-          return "通过";
-        case "REFUSE":
-          return "拒绝";
-        default:
-          return "未申请";
-      }
-    },
-    // 展示审核拒绝原因
-    showReason(reason) {
-      this.$Modal.info({
-        title: "拒绝原因",
-        content: reason,
-      });
+      return hourArr;
     },
   },
   mounted() {
     this.init();
   },
-  // 如果是从详情页返回列表页，修改列表页keepAlive为true，确保不刷新页面
-  beforeRouteLeave(to, from, next) {
-    if (to.name === "seckill") {
-      to.meta.keepAlive = true;
-    }
-    next();
-  },
 };
 </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/seller/src/views/promotion/seckill/seckill-setup.vue b/seller/src/views/promotion/seckill/seckill-setup.vue
new file mode 100644
index 00000000..b866ef09
--- /dev/null
+++ b/seller/src/views/promotion/seckill/seckill-setup.vue
@@ -0,0 +1,133 @@
+<template>
+  <div v-if="templateShow">
+    <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">
+          <el-button @click="closeCurrentPage">返回</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getSetting, setSetting } from "@/api/index";
+export default {
+  data() {
+    return {
+      templateShow: false,
+      submitLoading: false,
+      times: [],
+      form: {
+        seckillRule: "",
+      },
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    closeCurrentPage() {
+      this.$store.commit("removeTag", "manager-seckill-add");
+      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
+      this.$router.go(-1);
+    },
+    async handleSubmit() {
+      const hours = this.times
+        .filter((item) => item.check)
+        .map((item) => item.time)
+        .join(",");
+      const result = await setSetting("SECKILL_SETTING", {
+        seckillRule: this.form.seckillRule,
+        hours,
+      });
+      if (result.success) {
+        this.$Message.success("设置成功!");
+        this.init();
+      }
+    },
+    async init() {
+      const result = await getSetting("SECKILL_SETTING");
+      if (result.success) {
+        this.templateShow = true;
+        this.form.seckillRule = result.result.seckillRule;
+        this.times = [];
+        for (let i = 0; i < 24; i++) {
+          let matched = false;
+          if (result.result.hours) {
+            const way = result.result.hours.split(",");
+            way.forEach((hours) => {
+              if (hours == i) {
+                this.times.push({ time: i, check: true });
+                matched = true;
+              }
+            });
+          }
+          if (!matched) {
+            this.times.push({ time: i, check: false });
+          }
+        }
+      }
+    },
+    handleClickTime(val) {
+      val.check = !val.check;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.row {
+  width: 50%;
+}
+.foot-btn {
+  margin-left: 10px;
+  display: flex;
+  gap: 8px;
+}
+.active {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  color: #fff;
+  background: $theme_color !important;
+}
+.time {
+  width: 100%;
+  cursor: pointer;
+  transition: 0.35s;
+  border-radius: 0.8em;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  background: #f3f5f7;
+  height: 50px;
+  font-size: 15px;
+}
+.time-item {
+  margin: 8px 0;
+}
+</style>
diff --git a/seller/src/views/promotion/seckill/seckill.vue b/seller/src/views/promotion/seckill/seckill.vue
index 5e1c5ff2..ac506e8e 100644
--- a/seller/src/views/promotion/seckill/seckill.vue
+++ b/seller/src/views/promotion/seckill/seckill.vue
@@ -1,207 +1,269 @@
 <template>
-  <div class="seckill">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="活动名称" prop="goodsName">
-          <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">搜索</Button>
-        <Button @click="handleReset" class="ml_10">重置</Button>
-      </Form>
-      </Card>
-          <Card>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10">
-        <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>
-        <template slot-scope="{ row }" slot="action">
-          <a v-if="row.promotionStatus === 'NEW'" @click="manage(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">管理</a>
-          <a v-else @click="manage(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">查看</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="[10, 20, 50]" size="small" show-total show-elevator
-          show-sizer></Page>
-      </Row>
-    </Card>
+  <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"
+          >
+            <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%"
+          >
+            <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>
+
+          <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-tab-pane>
+        <el-tab-pane label="秒杀活动设置" name="setup" lazy>
+          <setupSeckill />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
   </div>
 </template>
 
 <script>
 import { seckillList } from "@/api/promotion";
+import setupSeckill from "@/views/promotion/seckill/seckill-setup";
+
 export default {
   name: "seckill",
-  components: {},
-  data () {
+  components: {
+    setupSeckill,
+  },
+  data() {
     return {
+      activeTab: "list",
       selectDate: [],
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "startTime",
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
       },
-      columns: [
-        {
-          title: "活动名称",
-          key: "promotionName",
-          minWidth: 120,
-        },
-        {
-          title: "活动开始时间",
-          key: "startTime",
-        },
-        {
-          title: "报名截止时间",
-          slot: "applyEndTime",
-        },
-        {
-          title: "时间场次",
-          slot: "hours",
-        },
-        {
-          title: "状态",
-          key: "promotionStatus",
-          width: 100,
-          render: (h, params) => {
-            let text = "未知",
-              color = "default";
-            if (params.row.promotionStatus == "NEW") {
-              text = "未开始";
-              color = "geekblue";
-            } else if (params.row.promotionStatus == "START") {
-              text = "已开始";
-              color = "green";
-            } else if (params.row.promotionStatus == "END") {
-              text = "已结束";
-              color = "volcano";
-            } else if (params.row.promotionStatus == "CLOSE") {
-              text = "已关闭";
-              color = "red";
-            }
-            return h("div", [
-              h(
-                "Tag",
-                {
-                  props: {
-                    color: color,
-                  },
-                },
-                text
-              ),
-            ]);
-          },
-        },
-        {
-          title: "操作",
-          slot: "action",
-          align: "center",
-          width: 100,
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
-    init () {
+    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) {
+    changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
-    // 分页 改变页数
-    changePageSize (v) {
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
-    handleSearch () {
+    handleSearch() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
+      this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 重置
-    handleReset () {
-      this.searchForm = {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "startTime",
-        order: "desc", // 默认排序方式
-      };
-      this.selectDate = "";
-      this.getDataList();
+    edit(v) {
+      this.$router.push({ name: "manager-seckill-add", query: { id: v.id } });
     },
-    // 管理
-    manage (row) {
-      this.$router.push({ name: "seckill-goods", query: { id: row.id } });
+    manage(v) {
+      this.$router.push({ name: "seckill-goods", query: { id: v.id } });
     },
-    // 获取列表数据
-    getDataList () {
+    off(v) {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "您确定要下架该活动吗？",
+        onOk: () => {
+          updateSeckillStatus(v.id).then((res) => {
+            if (res.success) {
+              this.$Message.success("下架成功");
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+    expire(v) {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "您确定要作废该活动吗？",
+        onOk: () => {
+          delSeckill(v.id).then((res) => {
+            if (res.success) {
+              this.$Message.success("作废成功");
+              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;
       }
-      // 带多条件搜索参数获取表单数据
-      seckillList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    unixDate (time) {
-      // 处理报名截止时间
-      return this.$options.filters.unixToDate(new Date(time) / 1000);
-    },
-    unixHours (item) {
-      // 处理小时场次
-      let hourArr = item.split(",");
-      for (let i = 0; i < hourArr.length; i++) {
-        hourArr[i] += ":00";
-      }
-      return hourArr;
+      getSeckillList(this.searchForm)
+        .then((res) => {
+          if (res.success) {
+            this.data = res.result.records;
+            this.total = res.result.total;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
   },
-  mounted () {
+  mounted() {
     this.init();
   },
-  // 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
-  beforeRouteLeave (to, from, next) {
-    from.meta.keepAlive = false
-    next()
-  }
 };
 </script>
-<style lang="scss"  scoped>
-@import "@/styles/table-common.scss";
+
+<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/seller/src/views/shop/bill/accountStatementBill.vue b/seller/src/views/shop/bill/accountStatementBill.vue
index 11f6c182..c8f60ed5 100644
--- a/seller/src/views/shop/bill/accountStatementBill.vue
+++ b/seller/src/views/shop/bill/accountStatementBill.vue
@@ -1,230 +1,180 @@
 <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="startDay">
-            <DatePicker
-              type="date"
-              v-model="searchForm.startDate"
-              format="yyyy-MM-dd HH:mm:ss"
-              placeholder="请选择"
-              clearable
-              style="width: 240px"
-            ></DatePicker>
-          </Form-item>
-          <Form-item label="结束时间" prop="endDate">
-            <DatePicker
-              type="date"
-              v-model="searchForm.endDate"
-              format="yyyy-MM-dd HH:mm:ss"
-              di
-              placeholder="请选择"
-              clearable
-              style="width: 240px"
-            ></DatePicker>
-          </Form-item>
-          <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
-          <Button @click="handleReset" class="search-btn">重置</Button>
-        </Form>
-      </Row>
-      </Card>
-    <Card>
-      <Table
-        :loading="loading"
-        border
-        class="mt_10"
-        :columns="columns"
-        :data="data"
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="开始时间" prop="startDate">
+          <el-date-picker
+            v-model="searchForm.startDate"
+            type="date"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endDate">
+          <el-date-picker
+            v-model="searchForm.endDate"
+            type="date"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+          <el-button class="search-btn" @click="handleReset">重置</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="sn" label="账单号" min-width="250" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="生成时间" min-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 label="结算金额" min-width="100">
+          <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"
-          :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_Shop from "@/api/shops";
+import * as API_Shop from "@/api/shops";
 
-  export default {
-    name: "accountStatementBill",
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-        },
-        columns: [
-          {
-            title: "账单号",
-            key: "sn",
-            minWidth: 250,
-            tooltip: true
-          },
-          {
-            title: "生成时间",
-            key: "createTime",
-            minWidth: 120,
-          },
-          {
-            title: "结算时间段",
-            key: "startTime",
-            width: 200,
-            tooltip: true,
-            render: (h, params) => {
-              return h('div', params.row.startTime +"~"+params.row.endTime)
-            }
-          },
-          {
-            title: "结算金额",
-            key: "billPrice",
-            minWidth: 100,
-            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: 200,
-            render: (h, params) => {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.detail(params.row);
-                      },
-                    },
-                  },
-                  "查看"
-                ),
-              ]);
-            },
-          },
-        ],
-        data: [], // 表单数据
-        total: 0, // 表单数据总数
+export default {
+  name: "accountStatementBill",
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
+      },
+      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();
+    },
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.getDataList();
+    },
+    handleReset() {
+      this.searchForm = {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
       };
+      this.getDataList();
     },
-    methods: {
-      // 初始化数据
-      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 = 10;
-        this.getDataList();
-      },
-      // 重置
-      handleReset() {
-        this.searchForm = {}
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 10;
-        this.getDataList();
-      },
-      // 获取列表数据
-      getDataList() {
-        this.loading = true;
-        this.searchForm.billStatus = "OUT"
-        API_Shop.getBillPage(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;
+    getDataList() {
+      this.loading = true;
+      this.searchForm.billStatus = "OUT";
+      API_Shop.getBillPage(this.searchForm).then((res) => {
         this.loading = false;
-      },
-      // 查看详情
-      detail(v) {
-        let id = v.id;
-        this.$router.push({
-          name: "bill-detail",
-          query: { id: id },
-        });
-
-      },
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
     },
-    mounted() {
-      this.init();
+    detail(v) {
+      this.$router.push({
+        name: "bill-detail",
+        query: { id: v.id },
+      });
     },
-    // 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
-    beforeRouteLeave(to, from, next) {
-      from.meta.keepAlive = false
-      next()
-    }
-  };
+  },
+  mounted() {
+    this.init();
+  },
+  beforeRouteLeave(to, from, next) {
+    from.meta.keepAlive = false;
+    next();
+  },
+};
 </script>
 <style lang="scss" scoped>
-  // 建议引入通用样式 可删除下面样式代码
-   @import "@/styles/table-common.scss";
-   ::v-deep .ivu-col{
-     min-height: 100vh;
-   }
+@import "@/styles/table-common.scss";
+.link-text {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
 </style>
diff --git a/seller/src/views/shop/bill/billDetail.vue b/seller/src/views/shop/bill/billDetail.vue
index 28a05e11..1ff75f29 100644
--- a/seller/src/views/shop/bill/billDetail.vue
+++ b/seller/src/views/shop/bill/billDetail.vue
@@ -1,60 +1,297 @@
 <template>
-  <div class="bill-detail">
-
-    <Card>
-      <p slot="title">结算单详情</p>
+  <div>
+    <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 type="info" @click="download()" style="margin-left: 10px;">下载账单</Button>
-          <Button v-if="bill.billStatus == 'OUT'" @click="reconciliation()" type="success" style="margin-left: 10px;">对账</Button>
+          <el-button
+            v-if="bill.billStatus == 'OUT'"
+            type="success"
+            @click="reconciliation()"
+            style="margin-left: 10px"
+          >
+            对账
+          </el-button>
+          <el-button type="primary" @click="download()" style="margin-left: 10px">下载账单</el-button>
         </div>
-
       </div>
+    </el-card>
 
-    </Card>
-
-    <Card class="mt_10">
-      <p slot="title">账单详细</p>
+    <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
-                  show-elevator></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";
@@ -63,152 +300,8 @@ export default {
   name: "bill-detail",
   data() {
     return {
-      loading: true,
-      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: '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: '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, "￥")
-                );
-              },
-            },
-          ]
-        },
-      ],
+      activeTab: "order",
+      loading: false,
       billData: [
         {
           billPrice: 0,
@@ -216,262 +309,116 @@ export default {
           siteCouponCommission: 0,
           pointSettlementPrice: 0,
           kanjiaSettlementPrice: 0,
+          giftCardSubsidy: 0,
           distributionCommission: 0,
           commissionPrice: 0,
           refundPrice: 0,
           siteCouponRefundCommission: 0,
           pointRefundSettlementPrice: 0,
           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 },
       ],
-      id: "", // 账单id
-      bill: {}, // 商家信息
+      id: "",
+      bill: {},
+      orderData: [],
       orderParam: {
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "id", // 默认排序字段
-        order: "desc", // 默认排序方式
-
+        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: "subsidy",
-            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: "finalPrice",
-              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: "total",
-              render: (h, params) => {
-                if(params.row.flowType == "PAY"){
-                  return h("div", this.$options.filters.unitPrice((params.row.finalPrice+(params.row.pointSettlementPrice+params.row.kanjiaSettlementPrice+params.row.siteCouponCommission)), "￥")
-                  );
-                }else{
-                  return h("priceColorScheme", {props: {value: (0-(params.row.finalPrice+(params.row.pointSettlementPrice+params.row.kanjiaSettlementPrice+params.row.siteCouponCommission)))}});
-                }
-              },
-            },
-          ]
-        },
-        {
-          title: '支出',
-          key: 'pay',
-          align: 'center',
-          children: [{
-            title: "平台服务费",
-            key: "commissionPrice",
-            render: (h, params) => {
-              if (params.row.commissionPrice == 0) {
-                return h("div", "-");
-              }else if(params.row.flowType == "PAY"){
-                return h("div", this.$options.filters.unitPrice(params.row.commissionPrice, "￥")
-                );
-              }else{
-                return h("priceColorScheme", {props: {value: (0-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("div", this.$options.filters.unitPrice(params.row.distributionRebate, "￥")
-                  );
-                }else{
-                  return h("priceColorScheme", {props: {value: (0-params.row.distributionRebate)}});
-                }
-              },
-            },
-            {
-              title: "合计",
-              key: "billPrice",
-              render: (h, params) => {
-                if(params.row.flowType == "PAY"){
-                  return h("div", this.$options.filters.unitPrice((params.row.commissionPrice+params.row.distributionRebate), "￥")
-                  );
-                }else{
-                  return h("priceColorScheme", {props: {value: (0-(params.row.commissionPrice+params.row.distributionRebate))}});
-                }
-              },
-            }]
-        }
-
-      ],
-      orderData: [], // 订单列表
-      orderTotal: 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: [],
     };
   },
-  watch: {
-    "$route.query.id": function (val) {
-      this.id = val;
-      this.getBill();
-    },
-  },
   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();
+    },
     reconciliation() {
       this.$Modal.confirm({
         title: "确认核对结算单",
-        // 记得确认修改此处
         content: "您确认要核对此结算单么?",
         loading: true,
         onOk: () => {
@@ -485,124 +432,108 @@ export default {
         },
       });
     },
-
+    download() {
+      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.getBill();
+      this.getDetail();
     },
-    //订单列表部分
-    orderChangePage(v) {
-      this.orderParam.pageNumber = v;
-      this.getOrderList();
-    },
-    orderChangePageSize(v) {
-      this.orderParam.pageSize = v;
-      this.getOrderList();
-    },
-    getOrderList() {
-      API_Shop.getSellerFlow(this.id, this.orderParam).then((res) => {
+    getDetail() {
+      API_Shop.getBillDetail(this.id).then((res) => {
+        if (res.success) {
+          this.bill = res.result;
+          this.initTable();
+          this.getOrder();
+          this.getBillStatusStep();
+        }
+      });
+    },
+    initTable() {
+      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;
+
+      this.billData[0].billPrice = money(this.bill.billPrice);
+      this.billData[0].orderPrice = money(this.bill.orderPrice);
+      this.billData[0].siteCouponCommission = money(this.bill.siteCouponCommission);
+      this.billData[0].pointSettlementPrice = money(this.bill.pointSettlementPrice);
+      this.billData[0].kanjiaSettlementPrice = money(this.bill.kanjiaSettlementPrice);
+      this.billData[0].giftCardSubsidy = money(this.bill.giftCardSubsidy);
+      this.billData[0].distributionCommission = money(this.bill.distributionCommission);
+      this.billData[0].commissionPrice = money(this.bill.commissionPrice);
+      this.billData[0].refundPrice = money(this.bill.refundPrice);
+      this.billData[0].siteCouponRefundCommission = money(this.bill.siteCouponRefundCommission);
+      this.billData[0].pointRefundSettlementPrice = money(this.bill.pointRefundSettlementPrice);
+      this.billData[0].kanjiaRefundSettlementPrice = money(this.bill.kanjiaRefundSettlementPrice);
+      this.billData[0].giftCardRefundSubsidy = money(this.bill.giftCardRefundSubsidy);
+      this.billData[0].distributionRefundCommission = money(this.bill.distributionRefundCommission);
+      this.billData[0].refundCommissionPrice = money(this.bill.refundCommissionPrice);
+    },
+    getOrder() {
+      this.loading = true;
+      API_Shop.getSellerFlow(this.id, this.orderParam).then((res) => {
+        this.loading = false;
         if (res.success) {
-          this.loading = false;
           this.orderData = res.result.records;
           this.orderTotal = res.result.total;
         }
       });
     },
-    //获取结算单详细
-    getBill() {
-      API_Shop.getBillDetail(this.id).then((res) => {
-        if (res.success) {
-          this.bill = res.result;
-          //初始化表格
-          this.initTable();
-          //初始化订单信息
-          this.getOrderList();
-          // 结算单状态步骤
-          this.getBillStatusStep();
-        }
-      });
-    },
-    // 账单详细
-    initTable() {
-      let bill = this.bill;
-
-      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.billData[0].billPrice = this.bill.billPrice;
-      this.billData[0].orderPrice = this.bill.orderPrice;
-      this.billData[0].siteCouponCommission = this.bill.siteCouponCommission;
-      this.billData[0].pointSettlementPrice = this.bill.pointSettlementPrice;
-      this.billData[0].kanjiaSettlementPrice = this.bill.kanjiaSettlementPrice;
-      this.billData[0].distributionCommission = this.bill.distributionCommission;
-      this.billData[0].commissionPrice = this.bill.commissionPrice;
-      this.billData[0].refundPrice = this.bill.refundPrice;
-      this.billData[0].siteCouponRefundCommission = this.bill.siteCouponRefundCommission;
-      this.billData[0].pointRefundSettlementPrice = this.bill.pointRefundSettlementPrice;
-      this.billData[0].kanjiaRefundSettlementPrice = this.bill.kanjiaRefundSettlementPrice;
-      this.billData[0].distributionRefundCommission = this.bill.distributionRefundCommission;
-      this.billData[0].refundCommissionPrice = this.bill.refundCommissionPrice;
-    },
-    //下载账单
-    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);
-        }
-      })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
   },
   mounted() {
     this.init();
   },
-  // 如果是从详情页返回列表页，修改列表页keepAlive为true，确保不刷新页面
+  watch: {
+    "$route.query.id"(val) {
+      this.id = val;
+      this.getDetail();
+    },
+  },
   beforeRouteLeave(to, from, next) {
     if (to.name === "accountStatementBill" || to.name === "storeBill") {
       to.meta.keepAlive = true;
     }
     next();
   },
-
-
 };
 </script>
 
@@ -617,10 +548,6 @@ export default {
   }
 }
 
-.page {
-  margin-top: 10px;
-}
-
 .tips-status {
   padding: 10px;
   font-size: 14px;
@@ -637,9 +564,10 @@ export default {
 
 table {
   font-size: 14px;
-  margin-left: 20px;
+  margin-left: 40px;
 
   tr {
+    font-size: 12px;
     height: 40px;
     padding: 10px;
 
@@ -650,35 +578,28 @@ table {
 }
 
 .bill-detail-price {
-  width: 1200px;
-  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
   padding: 10px;
 
-  ::v-deep span {
+  > span {
     font-size: 14px;
     text-align: center;
     width: 200px;
-    margin-bottom: 10px;
-  }
-
-  .theme_color {
-    color: $theme_color;
+    margin-bottom: 20px;
   }
 
   .increase-color {
     color: green;
+    margin-top: 5px;
   }
 
-  div {
-
-    margin: 20px 0;
+  .theme_color {
+    margin-top: 5px;
   }
 }
 
-.bill-item {
-  justify-content: flex-start;
-}
-
 .procedure {
   display: flex;
   align-items: center;
@@ -710,9 +631,6 @@ table {
       background-color: #f7f7f7;
       color: #515a6e;
     }
-    .text {
-
-    }
   }
 }
 </style>
diff --git a/seller/src/views/shop/bill/storeBill.vue b/seller/src/views/shop/bill/storeBill.vue
index 045cb94a..371b84df 100644
--- a/seller/src/views/shop/bill/storeBill.vue
+++ b/seller/src/views/shop/bill/storeBill.vue
@@ -1,231 +1,170 @@
 <template>
   <div class="store-bill">
-    <Card>
-      <Form ref="searchForm"
+    <el-card>
+      <el-form
+        ref="searchForm"
         :model="searchForm"
         inline
-        :label-width="70" class="search-form" @keydown.enter.native="handleSearch"
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <Form-item label="开始时间" prop="startDay">
-          <DatePicker
-            type="date"
+        <el-form-item label="开始时间" prop="startDate">
+          <el-date-picker
             v-model="searchForm.startDate"
-            format="yyyy-MM-dd HH:mm:ss"
-            placeholder="请选择"
-            clearable
-            style="width: 240px"
-          ></DatePicker>
-        </Form-item>
-        <Form-item label="结束时间" prop="endDate">
-          <DatePicker
             type="date"
-            v-model="searchForm.endDate"
-            format="yyyy-MM-dd HH:mm:ss"
-            di
+            value-format="YYYY-MM-DD HH:mm:ss"
             placeholder="请选择"
             clearable
             style="width: 240px"
-          ></DatePicker>
-        </Form-item>
-        <Form-item label="状态" prop="orderStatus">
-          <Select v-model="searchForm.billStatus" placeholder="请选择" clearable style="width: 240px">
-            <Option value="OUT">已出账</Option>
-            <Option value="CHECK">已对账</Option>
-            <Option value="COMPLETE">已完成</Option>
-          </Select>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
-        <Button @click="handleReset" 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"
+          />
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endDate">
+          <el-date-picker
+            v-model="searchForm.endDate"
+            type="date"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="billStatus">
+          <el-select v-model="searchForm.billStatus" placeholder="请选择" clearable style="width: 240px">
+            <el-option label="已出账" value="OUT" />
+            <el-option label="已对账" value="CHECK" />
+            <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-button class="search-btn" @click="handleReset">重置</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="sn" label="账单号" min-width="250" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="生成时间" min-width="120" />
+        <el-table-column label="结算时间段" width="200" show-overflow-tooltip>
+          <template #default="{ row }">{{ row.startTime }}~{{ row.endTime }}</template>
+        </el-table-column>
+        <el-table-column label="结算金额" min-width="100">
+          <template #default="{ row }">
+            <priceColorScheme :value="row.billPrice" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row.billStatus === 'OUT'" type="primary">已出账</el-tag>
+            <el-tag v-else-if="row.billStatus === 'CHECK'" type="info">已对账</el-tag>
+            <el-tag v-else-if="row.billStatus === 'EXAMINE'" type="warning">已审核</el-tag>
+            <el-tag v-else type="success">已付款</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" fixed="right" width="100">
+          <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="[10, 20, 50]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[10, 20, 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>
   </div>
 </template>
 
 <script>
-  import * as API_Shop from "@/api/shops";
+import * as API_Shop from "@/api/shops";
 
-  export default {
-    name: "storeBill",
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 10, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-        },
-        columns: [
-          {
-            title: "账单号",
-            key: "sn",
-            minWidth: 250,
-            tooltip: true
-          },
-          {
-            title: "生成时间",
-            key: "createTime",
-            minWidth: 120,
-          },
-          {
-            title: "结算时间段",
-            key: "startTime",
-            width: 200,
-            tooltip: true,
-            render: (h, params) => {
-              return h('div', params.row.startTime +"~"+params.row.endTime)
-            }
-          },
-          {
-            title: "结算金额",
-            key: "billPrice",
-            minWidth: 100,
-            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: 200,
-            render: (h, params) => {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.detail(params.row);
-                      },
-                    },
-                  },
-                  "查看"
-                ),
-              ]);
-            },
-          },
-        ],
-        data: [], // 表单数据
-        total: 0, // 表单数据总数
+export default {
+  name: "storeBill",
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    init() {
+      this.getDataList();
+    },
+    changePage() {
+      this.getDataList();
+    },
+    changePageSize() {
+      this.searchForm.pageNumber = 1;
+      this.getDataList();
+    },
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 10;
+      this.getDataList();
+    },
+    handleReset() {
+      this.searchForm = {
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
       };
+      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 = 10;
-        this.getDataList();
-      },
-      // 重置
-      handleReset() {
-        this.searchForm = {}
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 10;
-        this.getDataList();
-      },
-      // 获取列表数据
-      getDataList() {
-        this.loading = true;
-        API_Shop.getBillPage(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;
+    getDataList() {
+      this.loading = true;
+      API_Shop.getBillPage(this.searchForm).then((res) => {
         this.loading = false;
-      },
-      // 跳转结算详情
-      detail(v) {
-        let id = v.id;
-        this.$options.filters.customRouterPush({
-          name: "bill-detail",
-          query: { id: id },
-        })
-      },
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
     },
-    mounted () {
-      this.init();
+    detail(v) {
+      this.$filters.customRouterPush({
+        name: "bill-detail",
+        query: { id: v.id },
+      });
     },
-    // 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
-    beforeRouteLeave(to, from, next) {
-      from.meta.keepAlive = false
-      next()
-    }
-  };
+  },
+  mounted() {
+    this.init();
+  },
+  beforeRouteLeave(to, from, next) {
+    from.meta.keepAlive = false;
+    next();
+  },
+};
 </script>
-<style lang="scss" scoped>
-  // 建议引入通用样式 可删除下面样式代码
-   @import "@/styles/table-common.scss";
 
+<style lang="scss" scoped>
+@import "@/styles/table-common.scss";
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
 </style>
diff --git a/seller/src/views/shop/floorList.vue b/seller/src/views/shop/floorList.vue
index 855602e4..63f3786c 100644
--- a/seller/src/views/shop/floorList.vue
+++ b/seller/src/views/shop/floorList.vue
@@ -1,83 +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>
-            <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="releaseTemplate(item.id)"
-            >
-              <span slot="open">开</span>
-              <span slot="close">关</span>
-            </i-switch>
-            <a
-              style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-              @click="Template(item)"
-            >编辑</a>
-            <span style="margin: 0 8px; color: #dcdee2">|</span>
-            <a
-              style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-              @click="decorate(item)"
-            >装修</a>
-            <span style="margin: 0 8px; color: #dcdee2">|</span>
-            <Poptip confirm title="删除此模板？" @on-ok="delTemplate(item.id)">
-              <a style="color:#2d8cf0;cursor:pointer;text-decoration:none">删除</a>
-            </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
+          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
-        :page-size-opts="[10, 20, 50]"
-        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>
 
@@ -87,49 +88,26 @@ 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,
-        pageSize: 10,
+        pageSize: 20,
         sort: "createTime",
         order: "desc",
+        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() {
@@ -137,13 +115,13 @@ 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 = "STORE"), (data.pageClientType = "PC");
+          (data.pageType = this.searchForm.pageType),
+            (data.pageClientType = "PC");
           if (data.id) {
             API_floor.updateHome(data.id, data).then((res) => {
               this.$Message.success("编辑模板成功");
@@ -163,49 +141,47 @@ export default {
       });
     },
 
+    handleTabChange(type) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageType = type;
+      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 };
+
       this.$router.push({
         name: "renovation",
-        query: { id: val.id, pageShow: val.pageShow },
+        query: data,
       });
     },
 
-    // 分页 修改页码
     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) => {
@@ -220,7 +196,6 @@ export default {
     },
 
     releaseTemplate(id) {
-      //发布模板
       API_floor.releasePageHome(id).then((res) => {
         if (res.success) {
           this.$Message.success("发布模板成功");
@@ -228,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) {
@@ -242,62 +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;
+.page-type-tabs {
+  margin-bottom: 16px;
 }
 </style>
diff --git a/seller/src/views/shop/hotzone/components/Zone.vue b/seller/src/views/shop/hotzone/components/Zone.vue
index bbf32657..4b50e5f0 100644
--- a/seller/src/views/shop/hotzone/components/Zone.vue
+++ b/seller/src/views/shop/hotzone/components/Zone.vue
@@ -51,44 +51,41 @@
       <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"
+      :close-on-click-modal="false"
+      append-to-body
+      @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 v-model="zoneForm.img"></el-input>
+            <el-button size="small" type="primary" @click="handleSelectImg"
+              >选择图片</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
+          </el-form-item> -->
+          <el-form-item label="跳转链接：">
+            <el-input type="textarea" v-if="zoneForm.type === 'other' && zoneForm.title === '外部链接'" v-model="zoneForm.link" ></el-input>
+            <el-button size="small" type="primary" @click="handleSelectLink"
+              >选择链接</el-button
             >
-          </FormItem>
-        </Form>
+          </el-form-item>
+        </el-form>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+    <el-dialog width="1200px" v-model="picModelFlag" :show-footer="false">
       <ossManage @callback="callbackSelected" :isComponent="true"  :initialize="picModelFlag" ref="ossManage"/>
-    </Modal>
+    </el-dialog>
   </li>
 </template>
 
@@ -175,7 +172,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);
     },
diff --git a/seller/src/views/shop/hotzone/index.vue b/seller/src/views/shop/hotzone/index.vue
index 53c0c7e7..ec80cb11 100644
--- a/seller/src/views/shop/hotzone/index.vue
+++ b/seller/src/views/shop/hotzone/index.vue
@@ -1,23 +1,27 @@
 <template>
-  <Modal
-    :styles="{ top: '120px' }"
-    width="800"
-    @on-cancel="clickClose"
-    @on-ok="clickOK"
+  <el-dialog
     v-model="flag"
-    :mask-closable="false"
     title="绘制热区"
-    scrollable
+    width="800px"
+    top="8vh"
+    :close-on-click-modal="false"
+    append-to-body
+    destroy-on-close
+    @close="clickClose"
   >
     <template v-if="flag">
       <hotzone
         ref="hotzone"
-        @change="changeHotzone"
         :zonesInit="res.zoneInfo"
         :image="res.img"
-      ></hotzone>
+        @change="changeHotzone"
+      />
     </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";
@@ -28,28 +32,24 @@ export default {
   },
   data() {
     return {
-      flag: false, // modal显隐
+      flag: false,
     };
   },
   props: ["res"],
-  mounted() {},
   methods: {
     changeHotzone(info) {
       this.$emit("changeZone", info);
     },
-    // 关闭弹窗
     clickClose() {
+      this.flag = false;
       this.$emit("closeFlag", false);
     },
-    // 点击确认
     clickOK() {
       this.clickClose();
     },
-    // 打开组件方法
-    open(type, mutiple) {
+    open() {
       this.flag = true;
     },
-    // 关闭组件
     close() {
       this.flag = false;
     },
@@ -57,13 +57,8 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-::v-deep .ivu-modal {
+:deep(.el-dialog__body) {
   overflow: hidden;
-  height: 650px !important;
-}
-::v-deep .ivu-modal-body {
-  width: 100%;
   height: 500px;
-  overflow: hidden;
 }
 </style>
diff --git a/seller/src/views/shop/modelForm.vue b/seller/src/views/shop/modelForm.vue
index 0bf69342..843c658f 100644
--- a/seller/src/views/shop/modelForm.vue
+++ b/seller/src/views/shop/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="" /> -->
+        <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,20 +17,24 @@
           <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 class="soubenStore" slot="append">搜本店</Button>
-            <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">
+      <div class="nav-con" v-if="$route.query.pageType !== 'SPECIAL'">
         <div class="all-categories">全部商品分类</div>
         <ul class="nav-item">
           <li v-for="(item, index) in navList.list" :key="index">
@@ -41,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>
       <div>
         <draggable
           class="model-form-list"
@@ -55,149 +53,129 @@
           @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
+          <img class="show-image" width="600" height="40" :src="topAdvert.img" alt />
+        </div>
+        <div class="tips">建议尺寸：<span>{{ topAdvert.size }}</span></div>
+        <div>
+          图片链接：<el-input
+            class="outsideUrl"
+            v-model="topAdvert.url"
+            :disabled="!!topAdvert.type && topAdvert.type !== 'link'"
+            placeholder="https://"
           />
-        </div>
-        <div class="tips">
-          建议尺寸：<span>{{ topAdvert.size }}</span>
+          <el-button size="small" type="primary" @click="handleSelectLink">选择链接</el-button>
         </div>
         <div>
-          图片链接：<span>{{ topAdvert.url }}</span
-          ><Button size="small" type="primary" @click="handleSelectLink"
-            >选择链接</Button
-          >
+          选择图片：<el-button size="small" type="primary" @click="handleSelectImg">选择图片</el-button>
         </div>
-        <div>
-          选择图片：<Button size="small" type="primary" @click="handleSelectImg"
-            >选择图片</Button
-          >&nbsp;
-        </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><Input v-model="item.url" disabled /></td>
-              <!-- <td><Input v-model="item.sort"/></td> -->
+              <td><el-input v-model="item.name" /></td>
               <td>
-                <Button
-                  type="primary"
-                  size="small"
-                  @click="handleSelectLink(item, index)"
-                  >选择链接</Button
-                >&nbsp;
-                <Button type="error" size="small" @click="handleDelNav(index)"
-                  >删除</Button
-                >
+                <el-input
+                  v-model="item.url"
+                  :disabled="!item.title || item.title !== '外部链接'"
+                />
+              </td>
+              <td>
+                <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>
-      <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 { ShoppingCart } from "@element-plus/icons-vue";
 import Draggable from "vuedraggable";
 import ModelFormItem from "./modelFormItem.vue";
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
   name: "modelForm",
   components: {
     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: "",
         bgColor: "#de000d",
         size: "1200*80",
       },
+      currentIndex: 0,
       navList: {
-        // 分类nav数据
         type: "navBar",
         list: [
-          { name: "秒杀", url: "" },
-          { name: "闪购", url: "" },
-          { name: "优惠券", url: "" },
-          { name: "拍卖", url: "" },
-          { name: "服装城", url: "" },
+          { name: "秒杀", url: "", title: "" },
+          { name: "闪购", url: "", title: "" },
+          { name: "优惠券", url: "", title: "" },
+          { name: "拍卖", url: "", title: "" },
+          { name: "服装城", url: "", title: "" },
         ],
       },
     };
@@ -213,33 +191,32 @@ export default {
   },
   methods: {
     handleSelectLink(item, index) {
-      // 调起选择链接弹窗
       if (item) this.selectedNav = item;
       this.$refs.liliDialog.open("link");
+      this.currentIndex = index;
     },
-    // 已选链接
     selectedLink(val) {
-      console.log(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: "" });
-      console.log(this.navList.list);
+      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;
@@ -247,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,
-      });
+      };
     },
   },
 };
@@ -294,7 +263,6 @@ export default {
 .model-form-list {
   min-height: 500px;
 }
-/**  顶部广告，头部，搜索框 start */
 .top-fixed-advert {
   display: flex;
   width: 1500px;
@@ -336,7 +304,6 @@ export default {
     }
   }
 }
-/** 搜索框 */
 .search-con {
   padding-top: 15px;
   margin: 0px auto;
@@ -353,34 +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;
       }
     }
-    .soubenStore {
-      font-size: 14px;
-      font-weight: 600;
-      background-color: #f90;
-    }
   }
 }
-/** 商品分类 */
 .nav-con {
   width: 1200px;
   height: 40px;
@@ -416,7 +376,6 @@ export default {
     }
   }
 }
-/**  顶部广告，头部，搜索框 end */
 
 .top-fixed-advert,
 .nav-con {
@@ -427,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/seller/src/views/shop/modelFormItem.vue b/seller/src/views/shop/modelFormItem.vue
index 0f1b3343..56599790 100644
--- a/seller/src/views/shop/modelFormItem.vue
+++ b/seller/src/views/shop/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>
@@ -56,6 +56,10 @@
     <template v-if="element.type == 'seckill'">
       <seckill :data="element"></seckill>
     </template>
+    <!-- 限时秒杀 待完善 -->
+    <template v-if="element.type == 'seckill-only-album'">
+      <seckill-only-album :data="element"></seckill-only-album>
+    </template>
     <!-- 折扣广告 -->
     <template v-if="element.type == 'discountAdvert'">
       <div
@@ -74,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>
@@ -90,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>
@@ -111,6 +115,26 @@
     <template v-if="element.type == 'firstAdvert'">
       <first-page-advert :data="element"></first-page-advert>
     </template>
+    <!-- 商品模块 -->
+    <template v-if="element.type == 'goodsType'">
+      <goodsType :data="element" class="mb_20 width_1200_auto"></goodsType>
+    </template>
+    <!-- 商品模块2 -->
+    <template v-if="element.type == 'onlyGoodsModel'">
+      <onlyGoodsModel :data="element" class="mb_20 width_1200_auto"></onlyGoodsModel>
+    </template>
+    <!-- 混合模块 -->
+    <template v-if="element.type == 'mixModel'">
+      <mixModel :data="element" class="mb_20 width_1200_auto"></mixModel>
+    </template>
+    <!-- 为你推荐 -->
+    <template v-if="element.type == 'forYour'">
+      <forYour :data="element" class="mb_20 width_1200_auto"></forYour>
+    </template>
+    <!-- 一行三列 -->
+    <template v-if="element.type == 'oneRowThreeColumns'">
+      <oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
+    </template>
     <!-- 横幅广告 -->
     <template v-if="element.type == 'bannerAdvert'">
       <div class="horizontal-advert setup-content">
@@ -126,10 +150,10 @@
         </div>
         <div class="setup-box">
           <div>
-            <Button
+            <el-button
               size="small"
               @click.stop="handleSelectModel(element.options)"
-              >编辑</Button
+              >编辑</el-button
             >
           </div>
         </div>
@@ -139,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>
@@ -198,41 +222,55 @@
           建议尺寸：<span>{{ selected.size }}</span>
         </div>
         <div>
-          图片链接：<span>{{ selected.url }}</span>
-          <Button size="small" type="primary" @click="handleSelectLink"
-            >选择链接</Button
+          图片链接：<el-input
+            class="outsideUrl"
+            v-model="selected.url"
+            :disabled="!!selected.type && selected.type !== 'link'"
+            placeholder="https://"
+          />
+          <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>
+    <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>
 
 <script>
 import ModelCarousel from "./modelList/carousel.vue";
-import ModelCarousel1 from './modelList/carousel1.vue';
-import ModelCarousel2 from './modelList/carousel2.vue';
+import ModelCarousel1 from "./modelList/carousel1.vue";
+import ModelCarousel2 from "./modelList/carousel2.vue";
 import FirstPageAdvert from "./modelList/firstPageAdvert.vue";
 import NewGoodsSort from "./modelList/newGoodsSort.vue";
 import Recommend from "./modelList/recommend.vue";
 import NotEnough from "./modelList/notEnough.vue";
 import Seckill from "./modelList/seckill.vue";
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManages";
+import goodsType from "./modelList/goodsAndType.vue";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 
+import mixModel from "./modelList/mixModel.vue";
+import forYour from "./modelList/forYour.vue";
+import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
+
+import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
+import seckillOnlyAlbum from "./modelList/seckill-only-album.vue";
 export default {
   name: "modelFormItem",
   props: ["element", "select", "index", "data"],
@@ -245,7 +283,13 @@ export default {
     FirstPageAdvert,
     NotEnough,
     Seckill,
+    goodsType,
     ossManage,
+    oneRowThreeColumns,
+    "seckill-only-album":seckillOnlyAlbum,
+    onlyGoodsModel,
+    mixModel,
+    forYour
   },
   data() {
     return {
@@ -278,9 +322,11 @@ 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";
     },
-    
+
     handleSelectImg() {
       // 选择图片
       this.$refs.ossManage.selectImage = true;
@@ -433,7 +479,7 @@ export default {
         height: inherit;
         font-size: 12px;
         font-weight: bold;
-        .ivu-icon {
+        .el-icon {
           position: absolute;
           right: 10px;
           top: 10px;
@@ -457,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/seller/src/views/shop/modelList/carousel.vue b/seller/src/views/shop/modelList/carousel.vue
index cfa2873b..74f34264 100644
--- a/seller/src/views/shop/modelList/carousel.vue
+++ b/seller/src/views/shop/modelList/carousel.vue
@@ -5,55 +5,60 @@
       <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" />
-          <div>Hi，{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}</div>
+          <el-avatar class="mb_10" v-else :size="80" />
+          <div>
+            Hi，{{ userInfo.nickName || "欢迎来到管理后台"  }}
+          </div>
           <div v-if="userInfo.id">
-            <Button type="error" shape="circle">会员中心</Button>
+            <el-button type="danger" circle>会员中心</el-button>
           </div>
           <div v-else>
-            <Button type="error" shape="circle">请登录</Button>
+            <el-button type="danger" circle>请登录</el-button>
           </div>
         </div>
         <div class="shop-msg">
           <div>
             <span>常见问题</span>
             <ul class="article-list">
-              <li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
-                {{article.title}}
+              <li
+                class="ellipsis"
+                :alt="article.title"
+                v-for="(article, index) in articleList"
+                :key="index"
+              >
+                {{ article.title }}
               </li>
             </ul>
           </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>
         <div style="color: #999" class="fz_12">点击缩略图替换图片</div>
@@ -78,87 +83,91 @@
                   alt=""
                 />
               </td>
-              <td><Input v-model="item.url" disabled /></td>
-              <!-- <td><Input v-model="item.sort"/></td> -->
               <td>
-                <Button
-                    type="primary"
-                    size="small"
-                    @click="handleSelectImg(item)"
-                    >选择图片</Button
-                >&nbsp;
-                <Button
-                  type="info"
+                <el-input
+                  class="outsideUrl"
+                  v-model="item.url"
+                  :disabled="!!item.type && item.type !== 'link'"
+                />
+              </td>
+              <!-- <td><el-input v-model="item.sort"/></td> -->
+              <td>
+                <el-button
+                  type="primary"
                   size="small"
-                  @click="handleSelectLink(item)"
-                  >选择链接</Button
+                  @click="handleSelectImg(item)"
+                  >选择图片</el-button
                 >&nbsp;
-                <Button
-                  type="error"
-                  ghost
+                <el-button type="info" size="small" @click="handleSelectLink(item)"
+                  >选择链接</el-button
+                >&nbsp;
+                <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>
+    <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>
 
 <script>
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManages";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
   name: "modelCarousel",
   props: ["data"],
   components: {
-    ossManage
+    ossManage,
   },
   data() {
     return {
       showModal: false, // modal显隐
       selected: null, // 已选数据
       picModelFlag: false, // 选择图片modal
-      userInfo:{},
-      articleList:[
-        {title:'促销计算规则'},
-        {title:'商家申请开店'},
-        {title:'商家账号注册'},
-        {title:'促销计算规则'}
-      ]
+      userInfo: {},
+      articleList: [
+        { title: "促销计算规则" },
+        { title: "商家申请开店" },
+        { title: "商家账号注册" },
+        { title: "促销计算规则" },
+      ],
     };
   },
 
   methods: {
-    handleSelectModel () {
+    handleSelectModel() {
       // 编辑模块
       this.showModal = true;
     },
     // 添加轮播图
-    handleAdd () {
-      this.data.options.list.push({ img: "", url: "" });
+    handleAdd() {
+      this.data.options.list.push({ img: "", url: "", type: "" });
       this.$forceUpdate();
     },
-    handleSelectLink (item) {
+    handleSelectLink(item) {
       // 选择链接
-      this.$refs.liliDialog.open('link')
+      this.$refs.liliDialog.open("link");
       this.selected = item;
     },
-    callbackSelected (item) { // 选择图片回调
+    callbackSelected(item) {
+      // 选择图片回调
       this.picModelFlag = false;
       this.selected.img = item.url;
     },
@@ -166,10 +175,11 @@ export default {
       // 删除图片
       this.data.options.list.splice(index, 1);
     },
-    selectedLink(val) { // 选择链接回调
-      console.log(val);
-      this.selected.url = this.$options.filters.formatLinkType(val);
-      console.log(this.selected.url);
+    selectedLink(val) {
+      // 选择链接回调
+      this.selected.url = this.$filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
     },
     // 选择图片
     handleSelectImg(item) {
@@ -241,7 +251,7 @@ export default {
       margin-top: 10px;
     }
 
-    .ivu-btn-default {
+    .el-btn-default {
       color: $theme_color;
       border-color: $theme_color;
     }
diff --git a/seller/src/views/shop/modelList/carousel1.vue b/seller/src/views/shop/modelList/carousel1.vue
index 6feba2b7..8fc54f0e 100644
--- a/seller/src/views/shop/modelList/carousel1.vue
+++ b/seller/src/views/shop/modelList/carousel1.vue
@@ -1,39 +1,39 @@
 <template>
-  <div class="model-carousel1" :style="{background: bgColor}">
+  <div class="model-carousel1" :style="{ background: bgColor }">
     <div class="nav-body clearfix">
       <!-- 侧边导航 -->
       <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">点击缩略图替换图片、点击颜色选择器选择背景色</span>
+        <span style="color: red" class="fz_12 ml_10"
+          >点击缩略图替换图片、点击颜色选择器选择背景色</span
+        >
         <table cellspacing="0">
           <thead>
             <tr>
@@ -54,82 +54,81 @@
                   alt=""
                 />
               </td>
-              <td><Input v-model="item.url" disabled /></td>
               <td>
-                <Button
-                  type="info"
-                  size="small"
-                  @click="handleSelectLink(item)"
-                  >选择链接</Button
+                <el-input
+                  class="outsideUrl"
+                  v-model="item.url"
+                  :disabled="!!item.type && item.type !== 'link'"
+                />
+              </td>
+              <td>
+                <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>
+    <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>
 
 <script>
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManages";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
   name: "modelCarousel",
   props: ["data"],
   components: {
-    ossManage
+    ossManage,
   },
   data() {
     return {
       showModal: false, // modal显隐
       selected: null, // 已选数据
       picModelFlag: false, // 选择图片modal
-      bgColor:'#fff'  // 轮播背景色
+      bgColor: "#fff", // 轮播背景色
     };
   },
-  mounted () {
-    this.bgColor = this.data.options.list[0].bgColor
+  mounted() {
+    this.bgColor = this.data.options.list[0].bgColor;
   },
   methods: {
-    handleSelectModel () {
+    handleSelectModel() {
       // 编辑模块
       this.showModal = true;
     },
     // 自动切换时改变背景色
-    autoChange (oVal,val) {
-      this.bgColor = this.data.options.list[val].bgColor
+    autoChange(oVal, val) {
+      this.bgColor = this.data.options.list[val].bgColor;
     },
     // 添加轮播图片和链接
-    handleAdd () {
-      this.data.options.list.push({ img: "", url: "", bgColor: '#fff' });
+    handleAdd() {
+      this.data.options.list.push({ img: "", url: "", bgColor: "#fff" });
       this.$forceUpdate();
     },
     // 打开选择链接modal
-    handleSelectLink (item) {
-      this.$refs.liliDialog.open('link')
+    handleSelectLink(item) {
+      this.$refs.liliDialog.open("link");
       this.selected = item;
     },
-    callbackSelected (item) { // 选择图片回调
+    callbackSelected(item) {
+      // 选择图片回调
       this.picModelFlag = false;
       this.selected.img = item.url;
     },
@@ -137,15 +136,18 @@ export default {
     handleDel(index) {
       this.data.options.list.splice(index, 1);
     },
-    selectedLink(val) { // 选择链接回调
-      this.selected.url = this.$options.filters.formatLinkType(val);
+    selectedLink(val) {
+      // 选择链接回调
+      this.selected.url = this.$filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
     },
     // 打开选择图片modal
     handleSelectImg(item) {
       this.selected = item;
       this.$refs.ossManage.selectImage = true;
       this.picModelFlag = true;
-    }
+    },
   },
 };
 </script>
@@ -164,14 +166,13 @@ export default {
   width: 1200px;
   height: 470px;
   margin: 0px auto;
-  
 }
 .nav-side {
   height: 100%;
   width: 200px;
   padding: 0px;
   color: #fff;
-  background-color:rgba(0,0,0,.5);
+  background-color: rgba(0, 0, 0, 0.5);
   line-height: 470px;
   text-align: center;
   position: absolute;
diff --git a/seller/src/views/shop/modelList/carousel2.vue b/seller/src/views/shop/modelList/carousel2.vue
index 7a553f9a..63f0ae32 100644
--- a/seller/src/views/shop/modelList/carousel2.vue
+++ b/seller/src/views/shop/modelList/carousel2.vue
@@ -5,23 +5,26 @@
       <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 v-for="(item, index) in data.options.listRight" :key="index">
+        <el-carousel autoplay :autoplay-speed="5000">
+          <el-carousel-item
+            v-for="(item, index) in data.options.listRight"
+            :key="index"
+          >
             <div class="mb_10">
               <img :src="item[0].img" width="190" height="150" />
             </div>
@@ -31,49 +34,56 @@
             <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" />
-          <div>Hi，{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}</div>
+          <el-avatar class="mb_10" v-else :size="80" />
+          <div>
+            Hi，{{ userInfo.nickName || "欢迎来到管理后台"  }}
+          </div>
           <div v-if="userInfo.id">
-            <Button type="error" shape="circle">会员中心</Button>
+            <el-button type="danger" circle>会员中心</el-button>
           </div>
           <div v-else>
-            <Button type="error" shape="circle">请登录</Button>
+            <el-button type="danger" circle>请登录</el-button>
           </div>
         </div>
         <div class="shop-msg">
           <div>
             <span>常见问题</span>
             <ul class="article-list">
-              <li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
-                {{article.title}}
+              <li
+                class="ellipsis"
+                :alt="article.title"
+                v-for="(article, index) in articleList"
+                :key="index"
+              >
+                {{ article.title }}
               </li>
             </ul>
           </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-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>
@@ -97,42 +107,57 @@
                   alt=""
                 />
               </td>
-              <td><Input v-model="item.url" disabled /></td>
               <td>
-                <Button
-                  type="info"
-                  size="small"
-                  @click="handleSelectLink(item)"
-                  >选择链接</Button>&nbsp;
-                <Button
-                  type="error"
-                  ghost
+                <el-input
+                  class="outsideUrl"
+                  v-model="item.url"
+                  :disabled="!!item.type && item.type !== 'link'"
+                />
+              </td>
+              <td>
+                <el-button type="info" size="small" @click="handleSelectLink(item)"
+                  >选择链接</el-button
+                >&nbsp;
+                <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 type="card" closable @on-tab-remove="handleTabRemove" class="mt_10">
-          <TabPane :label="'图片组'+(gIndex+1)" v-for="(group, gIndex) in data.options.listRight" :key="gIndex">
+        <el-tabs
+          type="card"
+          closable
+          @tab-remove="handleTabRemove"
+          class="mt_10"
+        >
+          <el-tab-pane
+            :label="'图片组' + (gIndex + 1)"
+            v-for="(group, gIndex) in data.options.listRight"
+            :key="gIndex"
+          >
             <table cellspacing="0">
               <thead>
                 <tr>
@@ -153,85 +178,89 @@
                       alt=""
                     />
                   </td>
-                  <td><Input v-model="item.url" disabled /></td>
                   <td>
-                    <Button
+                    <el-input
+                      class="outsideUrl"
+                      v-model="item.url"
+                      :disabled="!!item.type && item.type !== 'link'"
+                    />
+                  </td>
+                  <td>
+                    <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>
+    <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>
 
 <script>
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
   name: "modelCarousel",
   props: ["data"],
   components: {
-    ossManage
+    ossManage,
   },
   data() {
     return {
       showModal: false, // modal显隐
       selected: null, // 已选数据
       picModelFlag: false, // 选择图片modal
-      userInfo:{},
-      articleList:[
-        {title:'促销计算规则'},
-        {title:'商家申请开店'},
-        {title:'商家账号注册'},
-        {title:'促销计算规则'}
-      ]
+      userInfo: {},
+      articleList: [
+        { title: "促销计算规则" },
+        { title: "商家申请开店" },
+        { title: "商家账号注册" },
+        { title: "促销计算规则" },
+      ],
     };
   },
 
   methods: {
-    handleSelectModel () {
+    handleSelectModel() {
       // 编辑模块
       this.showModal = true;
     },
     // 添加轮播
-    handleAdd () {
+    handleAdd() {
       this.data.options.list.push({ img: "", url: "" });
       this.$forceUpdate();
     },
     // 添加图片组
-    handleAddGroup () {
+    handleAddGroup() {
       this.data.options.listRight.push([
-        {img:'',url:''},
-        {img:'',url:''},
-        {img:'',url:''}
-      ])
+        { img: "", url: "" },
+        { img: "", url: "" },
+        { img: "", url: "" },
+      ]);
     },
     // 删除图片组
-    handleTabRemove  (index) {
-      this.data.options.listRight.splice(index, 1)
+    handleTabRemove(index) {
+      this.data.options.listRight.splice(index, 1);
     },
     // 打开图片链接
-    handleSelectLink (item) {
-      this.$refs.liliDialog.open('link')
+    handleSelectLink(item) {
+      this.$refs.liliDialog.open("link");
       this.selected = item;
     },
-    callbackSelected (item) { // 选择图片回调
+    callbackSelected(item) {
+      // 选择图片回调
       this.picModelFlag = false;
       this.selected.img = item.url;
     },
@@ -239,10 +268,11 @@ export default {
     handleDel(index) {
       this.data.options.list.splice(index, 1);
     },
-    selectedLink(val) { // 选择链接回调
-      console.log(val);
-      this.selected.url = this.$options.filters.formatLinkType(val);
-      console.log(this.selected.url);
+    selectedLink(val) {
+      // 选择链接回调
+      this.selected.url = this.$filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
     },
     // 打开选择图片modal
     handleSelectImg(item) {
@@ -293,7 +323,8 @@ export default {
 }
 
 /*导航内容*/
-.nav-content,.nav-content1 {
+.nav-content,
+.nav-content1 {
   width: 590px;
   height: 470px;
   overflow: hidden;
@@ -301,7 +332,7 @@ export default {
   position: relative;
   margin-left: 10px;
 }
-.nav-content1{
+.nav-content1 {
   width: 190px;
 }
 .nav-right {
@@ -319,7 +350,7 @@ export default {
       margin-top: 10px;
     }
 
-    .ivu-btn-default {
+    .el-btn-default {
       color: $theme_color;
       border-color: $theme_color;
     }
diff --git a/seller/src/views/shop/modelList/firstPageAdvert.vue b/seller/src/views/shop/modelList/firstPageAdvert.vue
index f9d77c2b..cff6bbe8 100644
--- a/seller/src/views/shop/modelList/firstPageAdvert.vue
+++ b/seller/src/views/shop/modelList/firstPageAdvert.vue
@@ -1,163 +1,199 @@
 <template>
-    <div class="first-page-advert">
-        <div class="item setup-content" :style="{backgroundImage:`linear-gradient(to right, ${item.fromColor}, ${item.toColor})`}" v-for="(item, index) in options.list" :key="index">
-            <div>
-                <span class="line top-line"></span>
-                <p>{{item.name}}</p>
-                <span class="line btm-line"></span>
-                <p>{{item.describe}}</p>
-            </div>
-            <img :src="item.img" width="170" height="170" alt="">
-            <div class="setup-box">
-                <div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
-            </div>
+  <div class="first-page-advert">
+    <div
+      class="item setup-content"
+      :style="{
+        backgroundImage: `linear-gradient(to right, ${item.fromColor}, ${item.toColor})`,
+      }"
+      v-for="(item, index) in options.list"
+      :key="index"
+    >
+      <div>
+        <span class="line top-line"></span>
+        <p>{{ item.name }}</p>
+        <span class="line btm-line"></span>
+        <p>{{ item.describe }}</p>
+      </div>
+      <img :src="item.img" width="170" height="170" alt="" />
+      <div class="setup-box">
+        <div>
+          <el-button size="small" @click.stop="handleSelectModel(item)"
+            >编辑</el-button
+          >
         </div>
-        <Modal
-            v-model="showModal"
-            title="装修"
-            draggable
-            width="800"
-            :z-index="100"
-            :mask-closable="false"
-
-
-            >
-            <div class="modal-top-advert">
-                <div>
-                    <img class="show-image" width="170" height="170"  :src="selected.img" alt />
-                </div>
-                <div>
-                    <span>图片主标题：</span><Input v-model="selected.name" />
-                </div>
-                <div>
-                    <span>图片描述：</span><Input v-model="selected.describe" />
-                </div>
-                <div class="tips">
-                    建议尺寸：<span>{{ selected.size }}</span>
-                </div>
-                <div>
-                    图片链接：<span>{{ selected.url }}</span> <Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
-                </div>
-                <div>
-                    <span>渐变背景色：</span><Input v-model="selected.fromColor" /> <ColorPicker 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" />
-                </div>
-                <div :style="{backgroundImage:`linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`}" class="exhibition"></div>
-                <div>
-                    选择图片：<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>&nbsp;
-                </div>
-            </div>
-        </Modal>
-        <!-- 选择商品。链接 -->
-        <liliDialog
-            ref="liliDialog"
-            @selectedLink="selectedLink"
-
-        ></liliDialog>
-        <!-- 选择图片 -->
-        <Modal width="1200px" v-model="picModelFlag" footer-hide>
-            <ossManage @callback="callbackSelected" :isComponent="true"  :initialize="picModelFlag" ref="ossManage" />
-        </Modal>
+      </div>
     </div>
+    <el-dialog
+      v-model="showModal"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div class="modal-top-advert">
+        <div>
+          <img
+            class="show-image"
+            width="170"
+            height="170"
+            :src="selected.img"
+            alt
+          />
+        </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>
+          图片链接：<el-input
+            class="outsideUrl"
+            v-model="selected.url"
+            :disabled="!!selected.type && selected.type !== 'link'"
+            placeholder="https://"
+          />
+          <el-button size="small" type="primary" @click="handleSelectLink"
+            >选择链接</el-button
+          >
+        </div>
+        <div>
+          <span>渐变背景色：</span><el-input v-model="selected.fromColor" />
+          <el-color-picker v-if="selected.fromColor" v-model="selected.fromColor" />
+        </div>
+        <div>
+          <span>渐变背景色：</span><el-input v-model="selected.toColor" />
+          <el-color-picker v-if="selected.toColor" v-model="selected.toColor" />
+        </div>
+        <div
+          :style="{
+            backgroundImage: `linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`,
+          }"
+          class="exhibition"
+        ></div>
+        <div>
+          选择图片：<el-button size="small" type="primary" @click="handleSelectImg"
+            >选择图片</el-button
+          >&nbsp;
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 选择商品。链接 -->
+    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
+    <!-- 选择图片 -->
+    <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 ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
-    props:{
-        data: {
-            type: Object,
-            default: null
-        }
+  props: {
+    data: {
+      type: Object,
+      default: null,
     },
-    components: {ossManage},
-    data() {
-        return {
-            options: this.data.options, // 当前类型数据
-            showModal: false, // modal显隐
-            selected: {}, // 已选数据
-            picModelFlag: false // 图片选择器
-        }
+  },
+  components: { ossManage },
+  data() {
+    return {
+      options: this.data.options, // 当前类型数据
+      showModal: false, // modal显隐
+      selected: {}, // 已选数据
+      picModelFlag: false, // 图片选择器
+    };
+  },
+  methods: {
+    // 打开装修modal
+    handleSelectModel(item, type) {
+      this.selected = item;
+      this.showModal = true;
     },
-    methods:{
-        // 打开装修modal
-        handleSelectModel (item,type) {
-            this.selected = item;
-            this.showModal = true
-        },
-        handleSelectLink(item,index) { // 调起选择链接弹窗
-            this.$refs.liliDialog.open('link')
-        },
-        // 选择链接回调
-        selectedLink(val) {
-            this.selected.url = this.$options.filters.formatLinkType(val);;
-        },
-        handleSelectImg(){ // 选择图片
-            this.$refs.ossManage.selectImage = true;
-            this.picModelFlag = true;
-        },
-        // 选择图片回调
-        callbackSelected (val) {
-            this.picModelFlag = false;
-            this.selected.img = val.url;
-        }
-    }
-}
+    handleSelectLink(item, index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      this.selected.url = this.$filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
+    },
+    handleSelectImg() {
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+    // 选择图片回调
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.selected.img = val.url;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-@import './setup-box.scss';
-.first-page-advert{
+@import "./setup-box.scss";
+.first-page-advert {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  // margin-top: -10px;
+  .item {
+    width: 393px;
+    height: 170px;
+    margin-top: 10px;
     display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    // margin-top: -10px;
-    .item{
-        width: 393px;
-        height: 170px;
-        margin-top: 10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        img{margin-left: 20px;}
-
-        &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3){margin-top: 0;}
-
-        p:nth-of-type(1){
-            margin: 3px 0;
-            font-size: 18px;
-            color: #fff;
-        }
-        p:nth-of-type(2){
-            margin-top: 3px;
-            color: #fff;
-        }
-
-    }
-    .line{
-        position: relative;
-        display: block;
-        height: 2px;
-        background: url('../../../assets/festival_icon.png');
-        z-index: 1;
-    }
-    .top-line{
-        width: 78px;
-        background-position: -1px -3px;
-    }
-    .btm-line{
-        background-position: 0 -11px;
-        width: 154px;
+    align-items: center;
+    justify-content: center;
+    img {
+      margin-left: 20px;
     }
 
+    &:nth-of-type(1),
+    &:nth-of-type(2),
+    &:nth-of-type(3) {
+      margin-top: 0;
+    }
+
+    p:nth-of-type(1) {
+      margin: 3px 0;
+      font-size: 18px;
+      color: #fff;
+    }
+    p:nth-of-type(2) {
+      margin-top: 3px;
+      color: #fff;
+    }
+  }
+  .line {
+    position: relative;
+    display: block;
+    height: 2px;
+    background: url(../../../assets/festival_icon.png);
+    z-index: 1;
+  }
+  .top-line {
+    width: 78px;
+    background-position: -1px -3px;
+  }
+  .btm-line {
+    background-position: 0 -11px;
+    width: 154px;
+  }
 }
-.modal-top-advert{
-    align-items: start;
-    padding: 0 30px;
-    .exhibition{
-        width: 300px;
-        height: 50px;
-    }
+.modal-top-advert {
+  align-items: start;
+  padding: 0 30px;
+  .exhibition {
+    width: 300px;
+    height: 50px;
+  }
 }
 </style>
diff --git a/seller/src/views/shop/modelList/forYour.vue b/seller/src/views/shop/modelList/forYour.vue
new file mode 100644
index 00000000..928b5a70
--- /dev/null
+++ b/seller/src/views/shop/modelList/forYour.vue
@@ -0,0 +1,445 @@
+<template>
+  <div class="model" v-if="data">
+    <div class="for-your">{{ data.options.title }}</div>
+
+    <div class="flex card">
+      <div class="left">
+        <img :src="data.options.data.image.src" alt="" />
+      </div>
+      <div class="right flex">
+        <!-- 商品区 -->
+        <div class="goods-list">
+          <div
+            class="goods-item"
+            :key="index"
+            v-for="(item, index) in data.options.data.list"
+          >
+            <div>
+              <div class="goods-name">{{ item.title }}</div>
+              <div class="goods-desc">{{ item.desc }}</div>
+            </div>
+            <img class="goods-img" :src="item.img" alt="" />
+          </div>
+        </div>
+        <!-- 热卖区 -->
+        <div class="hot-list">
+          <div class="hot-title">{{ data.options.data.hot.title }}</div>
+          <div
+            class="hot-item flex flex-a-c"
+            v-for="(item, index) in data.options.data.hot.list"
+            :key="index"
+          >
+            <img :src="item.img" alt="" />
+            <div class="hot-goods">
+              <div class="hot-goods-title">{{ item.title }}</div>
+              <div>
+                <div class="hot-price">￥{{ $filters.unitPrice(item.price) }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="setup-box">
+        <div>
+          <el-button size="small" @click.stop="handleSelectModel()">编辑 </el-button>
+        </div>
+      </div>
+    </div>
+
+    <el-dialog
+      v-model="showModal"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div>
+        <div class="modal-tab-bar">
+          <div>
+            主标题:
+            <el-input style="width: 200px" v-model="data.options.title" />
+          </div>
+          <el-divider content-position="left">左侧商品部分</el-divider>
+          <div class="flex">
+            <div>图片 :</div>
+            <div>
+              <img class="image" :src="data.options.data.image.src" alt="" />
+              <div>
+                <div>推荐尺寸：{{ data.options.data.image.size }}</div>
+                <div class="link-src">
+                  链接地址：
+                  <el-input
+                    style="width: 200px"
+                    v-model="data.options.data.image.url"
+                    disabled
+                  />
+                </div>
+                <el-button
+                  size="small"
+                  type="primary"
+                  @click="handleSelectImg('image')"
+                  >选择图片
+                </el-button>
+                <el-button
+                  size="small"
+                  class="ml_10"
+                  type="primary"
+                  @click="handleSelectLink('image')"
+                  >选择链接
+                </el-button>
+              </div>
+            </div>
+          </div>
+
+          <el-divider content-position="left">中间商品部分</el-divider>
+          <div class="flex column-list">
+            <div
+              v-for="(item, index) in data.options.data.list"
+              :key="index"
+              class="draggable"
+            >
+              <div class="flex">
+                <img :src="item.img" class="column-img" />
+                <div class="column-goods-list">
+                  <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>
+                  <el-button
+                    size="small"
+                    class="ml_10"
+                    type="primary"
+                    @click="handleSelectLink('list', index)"
+                    >选择链接
+                  </el-button>
+                  <el-button
+                    size="small"
+                    class="ml_10"
+                    type="primary"
+                    @click="handleSelectImg('list', index)"
+                    >选择图片
+                  </el-button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <el-divider content-position="left">右侧商品部分</el-divider>
+          <div class="flex">
+            <div>右侧标题 :</div>
+            <el-input
+              style="width: 200px"
+              v-model="data.options.data.hot.title"
+             />
+          </div>
+          <div class="flex column-list">
+            <div
+              v-for="(item, index) in data.options.data.hot.list"
+              :key="index"
+              class="draggable"
+            >
+              <div class="flex">
+                <img :src="item.img" class="column-img" />
+                <div class="column-goods-list">
+                  <el-button
+                    size="small"
+                    class="ml_10"
+                    type="primary"
+                    @click="handleSelectGoods('hot', index)"
+                    >选择商品
+                  </el-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+
+    <!-- 选择图片 -->
+    <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 ossManage from "@/views/sys/oss-manage/ossManage.vue";
+
+export default {
+  name: "forYour",
+  data() {
+    return {
+      showModal: false,
+
+      picModelFlag: false,
+      selectedData: "", //选中的数据
+      goodsIndex: 0, // 商品索引
+      align: "",
+      defaultCallbackImageType: "",
+      current: "",
+    };
+  },
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
+  },
+  components: {
+    ossManage,
+  },
+  mounted() {
+   },
+  methods: {
+    handleSelectImg(type, index) {
+      this.defaultCallbackImageType = type;
+      this.goodsIndex = index;
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+
+    handleSelectGoods(val, index) {
+      this.$refs.liliDialog.open("goods");
+      this.$refs.liliDialog.singleGoods();
+      this.selectedData = val;
+      this.goodsIndex = index;
+    },
+    handleSelectLink(val, index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+      this.selectedData = val;
+
+      this.goodsIndex = index;
+    },
+    // 回显图片
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      if (this.defaultCallbackImageType == "image") {
+        this.data.options.data.image.src = val.url;
+      } else {
+        this.data.options.data[this.defaultCallbackImageType][
+          this.goodsIndex
+        ].img = val.url;
+      }
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      this.data.options.data.hot.list[this.goodsIndex].img = val[0].thumbnail;
+      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.$filters.formatLinkType(val[0]);
+
+      console.log(val, this.selectedData, this.goodsIndex);
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      console.log(val,this.selectedData)
+      if (this.selectedData == "image") {
+        this.data.options.data.image.url =
+          this.$filters.formatLinkType(val);
+      } else {
+        console.log(this.data.options.data.list,this.goodsIndex)
+        this.data.options.data.list[
+          this.goodsIndex
+        ].url =  this.$filters.formatLinkType(val);
+      }
+    },
+    /*
+     * 点击不同模块进行编辑
+     * 判断也很简单，就是第一个第二个模块进行判断
+     *
+     * */
+    handleSelectModel() {
+      this.showModal = true;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.goods-list {
+  display: flex;
+  width: 558px;
+  flex-wrap: wrap;
+}
+.goods-item {
+  width: 278px;
+  height: 277px;
+  text-align: center;
+  box-sizing: border-box;
+  border-right: 1.4px solid #e2e2e2;
+  &:nth-of-type(3) {
+    border-top: 1.4px solid #e2e2e2;
+  }
+  &:nth-of-type(4) {
+    border-top: 1.4px solid #e2e2e2;
+  }
+}
+.active {
+  color: #f31947;
+}
+
+.goods-name {
+  margin-top: 23px;
+  font-size: 25px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #333333;
+}
+.goods-img {
+  width: 190px;
+  height: 156px;
+  border-radius: 10px;
+  margin-top: 19px;
+}
+.goods-desc {
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 17px;
+  text-align: center;
+  margin-top: 11px;
+  letter-spacing: 0px;
+
+  color: #333333;
+}
+.for-your {
+  font-size: 35px;
+  font-weight: normal;
+  line-height: 42px;
+  text-align: center;
+  letter-spacing: 0px;
+  margin-bottom: 32px;
+
+  color: #333333;
+}
+.column-goods-list {
+  > div {
+    margin: 10px;
+  }
+}
+.link-src {
+  margin: 10px 0;
+}
+
+.card,
+.right-card {
+  opacity: 1;
+  background: #ffffff;
+
+  position: relative;
+
+  &:hover {
+    .setup-box {
+      display: block;
+    }
+  }
+}
+
+.column-img {
+  width: 100px;
+  height: 100px;
+}
+
+.column-list {
+  flex-wrap: wrap;
+
+  > div {
+    width: 50%;
+  }
+}
+
+.image {
+  max-width: 100px;
+}
+
+.modal-tab-bar {
+  > .flex {
+    align-items: center;
+    margin: 10px 0;
+  }
+}
+
+.draggable {
+  margin: 10px 0;
+  > .flex {
+    align-items: center;
+  }
+}
+.left {
+  width: 346px;
+  height: 554px;
+  border-radius: 9.8px 0px 0px 9.8px;
+  > img {
+    max-width: 100%;
+    height: 100%;
+  }
+}
+.right {
+  width: 839px;
+  height: 554px;
+  border-radius: 0px 9.8px 9.8px 0px;
+}
+.hot-list {
+  width: 279px;
+}
+.hot-title {
+  margin-left: 25px;
+  line-height: 63px;
+  font-size: 17px;
+  font-weight: normal;
+
+  letter-spacing: 0px;
+  color: #333333;
+  height: 63px;
+}
+.hot-item {
+  box-sizing: border-box;
+  border-top: 1.4px solid #e2e2e2;
+  height: 122px;
+  padding-left: 14px;
+  align-items: center;
+  > img {
+    width: 76.3px;
+    height: 77.7px;
+  }
+}
+.hot-goods {
+  margin-left: 14px;
+}
+.hot-goods-title {
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 16px;
+  letter-spacing: 0px;
+
+  color: #333333;
+}
+.hot-price {
+  margin-top: 10.3px;
+  font-size: 24px;
+  font-weight: normal;
+  line-height: 29px;
+  letter-spacing: 0px;
+
+  color: #f31947;
+}
+</style>
diff --git a/seller/src/views/shop/modelList/goodsAndType.vue b/seller/src/views/shop/modelList/goodsAndType.vue
new file mode 100644
index 00000000..430dd80b
--- /dev/null
+++ b/seller/src/views/shop/modelList/goodsAndType.vue
@@ -0,0 +1,365 @@
+<template>
+  <div class="goods-type-wrapper">
+    <div class="flex goods-type-line">
+      <div class="goods-type-title">{{ data.options.title }}</div>
+      <div class="flex goods-type-labels">
+        <div
+          @click="tabCurrentlyIndex = index"
+          :class="{ active: tabCurrentlyIndex === index }"
+          class="goods-type-item"
+          v-for="(item, index) in data.options.labels"
+          :key="index"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 商品部分 -->
+    <div class="goods-list flex">
+      <div
+        class="goods-list-item"
+        v-for="(item, index) in data.options.list.filter((subset) => {
+          return subset.___index == tabCurrentlyIndex;
+        })"
+        :key="index"
+      >
+        <div class="goods-img">
+          <img :src="item.img" />
+        </div>
+        <div>
+          <div class="goods-name wes-2">{{ item.title }}</div>
+          <div class="goods-desc">{{ item.desc }}</div>
+        </div>
+        <div class="goods-price">
+          {{ $filters.unitPrice(item.price, "￥") }}
+        </div>
+      </div>
+      <div class="setup-box">
+        <div>
+          <el-button
+            size="small"
+            @click.stop="handleSelectModel(data.options.list)"
+            >编辑</el-button
+          >
+        </div>
+      </div>
+    </div>
+
+    <el-dialog
+      v-model="showModal"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div class="modal-tab-bar">
+        <div class="tab-bar">
+          标题
+          <el-input style="width: 300px" v-model="data.options.title" />
+        </div>
+        <div class="tab-bar" v-if="data.options.labels[tabCurrentlyIndex]">
+          标签
+          <el-input
+            style="width: 300px"
+            v-model="data.options.labels[tabCurrentlyIndex].label"
+           />
+        </div>
+        <el-button @click="handleTabsAdd" size="small" class="mb_10">增加</el-button>
+        <el-tabs
+          type="card"
+          v-model="tabIndex"
+          @tab-click="handleClickTab"
+        >
+          <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">
+              <el-button class="del-btn" type="primary" @click="handleContextMenuDelete(tab,tabIndex)">删除当前标签</el-button>
+              <el-button class="add-goods" @click="addCurrentGoods">
+                添加商品
+              </el-button>
+            </div>
+
+            <div
+              v-for="(item, index) in data.options.list.filter((subset) => {
+                return subset.___index == tabCurrentlyIndex;
+              })"
+              :key="index"
+              class="draggable"
+            >
+              <div class="flex">
+                <img :src="item.img" class="column-img" />
+                <div class="flex column-goods-config">
+                  <div class="column-config">
+                    <div>
+                      标题：
+                      <el-input v-model="item.title" />
+                    </div>
+                    <div>
+                      描述：
+                      <el-input v-model="item.desc" />
+                    </div>
+                  </div>
+                  <el-button @click="delGoods(item)">删除</el-button>
+                </div>
+              </div>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-dialog>
+
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "goods",
+
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    return {
+      tabIndex:0,
+      current: 0,
+      showModal: false,
+      selected: {}, // 已选数据
+      picModelFlag: false,
+      tabCurrentlyIndex: 0, // 选项卡索引
+    };
+  },
+  mounted(){
+    this.tabIndex = this.data.options.labels[0].___index
+  },
+  methods: {
+    /**
+     * 算出最大的index 然后索引叠加
+     */
+    handleTabsAdd() {
+      let findAllIndex = this.data.options.labels.map((item) => {
+        return item.___index;
+      });
+      let max = Math.max.apply(null, findAllIndex);
+
+      this.data.options.labels.push({
+        label: "标签" + (max + 1),
+        ___index: max + 1,
+      });
+    },
+    // 删除标签
+    handleContextMenuDelete(item,index) {
+      // 删除标签下关联的商品
+      this.data.options.list.forEach((lab,currently)=>{
+        if(lab.___index == item.___index){
+           this.data.options.list.splice(currently,1)
+        }
+      })
+      // 删除当前标签
+      this.data.options.labels.splice(index,1)
+    },
+    // 删除商品
+    delGoods(val) {
+      this.data.options.list.forEach((item, i) => {
+        if (
+          item.title == val.title &&
+          item.___index == this.tabCurrentlyIndex
+        ) {
+          this.data.options.list.splice(i, 1);
+        }
+      });
+    },
+    // 切换选项卡
+    handleClickTab(name) {
+      console.log(name)
+      this.tabCurrentlyIndex = name;
+    },
+    // 添加当前选项卡中的商品
+    addCurrentGoods() {
+
+      this.$refs.liliDialog.clearGoodsSelected();
+      this.$refs.liliDialog.open("goods");
+    },
+    // 编辑模块
+    handleSelectModel(item) {
+      console.log(item);
+      this.selected = item;
+      this.showModal = true;
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      if (val.length) {
+        val.forEach((item) => {
+          const pushGoodsDetail = {
+            img: item.thumbnail,
+            price: item.price,
+            title: item.goodsName,
+            desc: "",
+            url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
+            ___index: this.tabCurrentlyIndex,
+          };
+          this.data.options.list.push(pushGoodsDetail);
+        });
+      }
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      this.selected[this.current].url =
+        this.$filters.formatLinkType(val);
+      this.selected[this.current].type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
+
+      console.log(this.selected[this.current]);
+    },
+    handleSelectLink(index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+      this.current = index;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.goods-type-wrapper {
+  position: relative;
+}
+.del-btn{
+  margin-left:10px;
+}
+.tab-bar {
+  margin-bottom: 20px;
+}
+.draggable {
+  padding: 10px;
+  border-bottom: 1px solid #ededed;
+  transition: 0.35s;
+
+  &:hover {
+    background-color: #ededed;
+  }
+}
+.column-config {
+  margin-left: 10px;
+  > * {
+    margin: 4px;
+  }
+}
+.column-img {
+  width: 100px;
+  height: 100px;
+}
+.add-goods {
+  margin-left: 20px;
+  margin-bottom: 10px;
+}
+.goods-list {
+  position: relative;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  &:hover {
+    > .setup-box {
+      display: block;
+    }
+  }
+}
+.column-goods-config {
+  flex: 2;
+  align-items: center;
+  justify-content: space-between;
+}
+.goods-list-item {
+  margin-bottom: 14.3px;
+  width: 287px;
+  height: 343.7px;
+  border-radius: 9.8px;
+  opacity: 1;
+  cursor: pointer;
+  background: #ffffff;
+  transition: 0.35s;
+  box-shadow: 0px 1px 13px 0px #e5e5e5;
+  &:hover {
+    box-shadow: 0px 1px 14px 0px #c5c5c5;
+  }
+}
+.goods-img {
+  text-align: center;
+  > img {
+    width: auto;
+    max-height: 183px;
+  }
+}
+.goods-name {
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 22px;
+  text-align: center;
+  letter-spacing: 0px;
+  width: 200px;
+  margin: 0 auto 12.4px auto;
+  color: #333333;
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-desc {
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 17px;
+  text-align: center;
+  letter-spacing: 0px;
+  margin-bottom: 12.4px;
+  color: #666666;
+
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-price {
+  font-size: 25.2px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #f31947;
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-type-line {
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+}
+.goods-type-title {
+  font-size: 31px;
+  font-weight: normal;
+  line-height: 37px;
+  letter-spacing: 0px;
+
+  color: #333333;
+}
+.active {
+  color: #f31947;
+}
+.goods-type-labels {
+  font-size: 21px;
+  font-weight: normal;
+  line-height: 25px;
+  letter-spacing: 0px;
+}
+.goods-type-item {
+  margin-left: 28px;
+}
+</style>
diff --git a/seller/src/views/shop/modelList/mixModel.vue b/seller/src/views/shop/modelList/mixModel.vue
new file mode 100644
index 00000000..c5dfca5b
--- /dev/null
+++ b/seller/src/views/shop/modelList/mixModel.vue
@@ -0,0 +1,326 @@
+<template>
+  <div class="mix-model">
+    <!-- 左侧 -->
+    <div class="left-card">
+      <left :data="data" />
+      <div class="setup-box">
+        <div>
+          <el-button size="small" @click.stop="handleSelectModel('left')"
+            >编辑
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 右侧 -->
+    <div class="right-card">
+      <right :data="data" />
+      <div class="setup-box">
+        <div>
+          <el-button size="small" @click.stop="handleSelectModel('right')"
+            >编辑
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      v-model="showModal"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div v-if="current">
+        <div class="modal-tab-bar">
+          <div>
+            当前模块 :
+            <el-button-group>
+              <el-button :type="current.model == 'goods' ? 'primary' : 'default'"
+                >商品</el-button
+              >
+              <el-button :type="current.model == 'brand' ? 'primary' : 'default'"
+                >品牌</el-button
+              >
+            </el-button-group>
+          </div>
+
+          <div class="flex">
+            <div>图片 :</div>
+            <div>
+              <img class="image" :src="current.data.image.src" alt="" />
+              <div>
+                <div>推荐尺寸：{{ current.data.image.size }}</div>
+                <div class="link-src">
+                  链接地址：
+                  <el-input
+                    style="width: 200px"
+                    v-model="current.data.image.url"
+                    disabled
+                  />
+                </div>
+                <el-button
+                  size="small"
+                  type="primary"
+                  @click="handleSelectImg('default')"
+                  >选择图片
+                </el-button>
+                <el-button
+                  size="small"
+                  class="ml_10"
+                  type="primary"
+                  @click="handleSelectLink('image')"
+                  >选择链接
+                </el-button>
+              </div>
+            </div>
+          </div>
+          <div class="flex" v-if="current.model == 'goods'">
+            <div>标签 :</div>
+            <el-input
+              style="width: 200px"
+              type="text"
+              v-model="current.data.badge.label"
+            />
+            <el-input
+              style="width: 100px; margin-left: 10px"
+              disabled
+              type="text"
+              v-model="current.data.badge.url"
+            />
+            <el-button
+              size="small"
+              class="ml_10"
+              type="primary"
+              @click="handleSelectLink('badge')"
+              >选择链接
+            </el-button>
+          </div>
+          <div class="flex column-list">
+            <div
+              v-for="(item, index) in current.data.list"
+              :key="index"
+              class="draggable"
+            >
+              <div class="flex">
+                <img :src="item.img" class="column-img" />
+                <el-button
+                  size="small"
+                  class="ml_10"
+                  type="primary"
+                  v-if="current.model == 'goods'"
+                  @click="handleSelectGoods('list', index)"
+                  >选择商品
+                </el-button>
+                <div>
+                  <div  v-if="current.model == 'brand'" style="margin-bottom: 10px">
+                    <el-input disabled v-model="item.url" />
+                  </div>
+                  <el-button
+                    size="small"
+                    class="ml_10"
+                    type="primary"
+                    v-if="current.model == 'brand'"
+                    @click="handleSelectLink('list', index)"
+                  >
+                    选择链接
+                  </el-button>
+                  <el-button
+                    size="small"
+                    class="ml_10"
+                    type="primary"
+                    v-if="current.model == 'brand'"
+                    @click="handleSelectImg('list', index)"
+                    >选择图片
+                  </el-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+
+    <!-- 选择图片 -->
+    <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 left from "./mixs/mix-goods";
+import right from "./mixs/mix-brand";
+import ossManage from "@/views/sys/oss-manage/ossManage.vue";
+
+export default {
+  name: "mixModel",
+  data() {
+    return {
+      showModal: false,
+      current: "", //当前选择的模块
+      picModelFlag: false,
+      selectedData: "", //选中的数据
+      goodsIndex: 0, // 商品索引
+      align: "",
+      defaultCallbackImageType: "",
+    };
+  },
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
+  },
+  components: {
+    left,
+    right,
+    ossManage,
+  },
+  mounted() {},
+  methods: {
+    handleSelectImg(type, index) {
+      this.defaultCallbackImageType = type;
+      this.goodsIndex = index;
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+
+    handleSelectGoods(val, index) {
+      this.$refs.liliDialog.open("goods");
+      this.$refs.liliDialog.singleGoods();
+      this.selectedData = val;
+      this.goodsIndex = index;
+    },
+    handleSelectLink(val, index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+      this.selectedData = val;
+      this.goodsIndex = index;
+    },
+    // 回显图片
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      if (this.defaultCallbackImageType == "default") {
+        console.log(this.current.data.image);
+        this.current.data.image.src = val.url;
+      } else {
+        console.log(this.goodsIndex, this.data.options[this.align].data.list);
+        this.data.options[this.align].data.list[this.goodsIndex].img = val.url;
+
+        // this.data.options[this.align].data[this.selectedData][this.goodsIndex].url = val.img
+      }
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      console.log(val);
+      this.$nextTick(() => {
+        this.data.options[this.align].data.list[this.goodsIndex].img =
+          val[0].thumbnail;
+        this.data.options[this.align].data.list[this.goodsIndex].title =
+          val[0].goodsName;
+        this.data.options[this.align].data.list[this.goodsIndex].price =
+          val[0].price;
+        this.data.options[this.align].data.list[this.goodsIndex].url =
+          val[0].url;
+      });
+      console.log(this.data.options[this.align].data.list[this.goodsIndex]);
+      this.$forceUpdate();
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      if (this.selectedData != "list") {
+        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.$filters.formatLinkType(val);
+      }
+    },
+    /*
+     * 点击不同模块进行编辑
+     * 判断也很简单，就是第一个第二个模块进行判断
+     *
+     * */
+    handleSelectModel(align) {
+      this.align = align;
+      this.current = this.data.options[align];
+      console.log(this.data.options[align]);
+      this.showModal = true;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+
+.link-src {
+  margin: 10px 0;
+}
+
+.mix-model {
+  display: flex;
+  justify-content: space-between;
+}
+
+.left-card,
+.right-card {
+  width: 584px;
+  height: 344px;
+  border-radius: 10px;
+  opacity: 1;
+  background: #ffffff;
+  box-shadow: 0px 1px 13px 0px #e5e5e5;
+  position: relative;
+
+  &:hover {
+    .setup-box {
+      display: block;
+    }
+  }
+}
+
+.column-img {
+  width: 100px;
+  height: 100px;
+}
+
+.column-list {
+  flex-wrap: wrap;
+
+  > div {
+    width: 50%;
+  }
+}
+
+.image {
+  max-width: 100px;
+}
+
+.modal-tab-bar {
+  > .flex {
+    align-items: center;
+    margin: 10px 0;
+  }
+}
+
+.draggable {
+  > .flex {
+    align-items: center;
+  }
+}
+</style>
diff --git a/seller/src/views/shop/modelList/mixs/mix-brand.vue b/seller/src/views/shop/modelList/mixs/mix-brand.vue
new file mode 100644
index 00000000..43cf6ceb
--- /dev/null
+++ b/seller/src/views/shop/modelList/mixs/mix-brand.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="flex" v-if="data.options.right.model == 'brand'">
+    <div class="left-side" >
+      <img :src="data.options.right.data.image.src" alt="">
+    </div>
+    <div>
+      <div class="badge-box flex">
+        <div class="round">
+          <el-icon><ArrowRight /></el-icon>
+        </div>
+
+
+      </div>
+      <div class="flex goods-list">
+        <div class="goods-item flex" :key="index" v-for="(item,index) in data.options.right.data.list">
+          <div class="goods-thumbnail">
+            <img :src="item.img" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ArrowRight } from "@element-plus/icons-vue";
+export default {
+  name: "mix-goods",
+  components: { ArrowRight },
+  data() {
+    return {}
+  },
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  components: {},
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.goods-detail{
+
+}
+.goods-detail-title{
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 16px;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #333333;
+}
+.goods-detail-price{
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 17px;
+  letter-spacing: 0px;
+  color: #F31947;
+  margin-top: 8px;
+  margin-bottom:10px;
+}
+.goods-thumbnail{
+  margin-left: 7px;
+  display: flex;
+  align-items: center;
+  >img{
+    width:90px;
+    height: 90px;
+  }
+}
+.badge-box{
+  margin-top: 33px;
+  justify-content:right;
+  >.round{
+    width: 17.5px;
+    height: 17.5px;
+    opacity: 1;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 17.5px;
+    border: 0.7px solid #333333;
+    margin-right: 17.5px;
+  }
+}
+.goods-list{
+  flex-wrap: wrap;
+  justify-content:space-between;
+  padding: 0 16px;
+}
+.goods-item{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width:50%;
+  height: 85px;
+  border-radius: 9.8px;
+  opacity: 1;
+  transition: .35s;
+  background: #FFFFFF;
+  margin-bottom:9px;
+
+
+}
+.left-side {
+  >img{
+    width: 254px;
+    height: 344px;
+    border-radius: 9.8px 0px 0px 9.8px;
+    opacity: 1;
+  }
+}
+.badge {
+  width: 50px;
+  height: 27px;
+  line-height:27px;
+  border-radius: 13.3px 0px 0px 13.3px;
+  opacity: 1;
+  background: #F31947;
+  font-size: 12.6px;
+  font-weight: normal;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #FFFFFF;
+  margin-top: 26px;
+  margin-bottom:17px;
+}
+</style>
diff --git a/seller/src/views/shop/modelList/mixs/mix-goods.vue b/seller/src/views/shop/modelList/mixs/mix-goods.vue
new file mode 100644
index 00000000..33325a1a
--- /dev/null
+++ b/seller/src/views/shop/modelList/mixs/mix-goods.vue
@@ -0,0 +1,124 @@
+<template>
+    <div class="flex" v-if="data.options.left.model == 'goods'">
+      <div class="left-side" >
+        <img :src="data.options.left.data.image.src" alt="">
+      </div>
+      <div>
+          <div class="badge-box flex">
+            <div class="badge">
+              {{data.options.left.data.badge.label}}
+            </div>
+          </div>
+          <div class="flex goods-list">
+            <div class="goods-item flex" :key="index" v-for="(item,index) in data.options.left.data.list">
+              <div class="goods-thumbnail">
+                <img :src="item.img" alt="">
+              </div>
+              <div class="goods-detail">
+                <div class="goods-detail-title">{{item.title}}</div>
+                <div class="goods-detail-price">{{ $filters.unitPrice(item.price, '¥') }}</div>
+              </div>
+            </div>
+          </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "mix-goods",
+  data() {
+    return {}
+  },
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  components: {},
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.goods-detail{
+
+}
+.goods-detail-title{
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 16px;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #333333;
+}
+.goods-detail-price{
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 17px;
+  letter-spacing: 0px;
+  color: #F31947;
+  margin-top: 8px;
+  margin-bottom:10px;
+}
+.goods-thumbnail{
+  margin-left: 7px;
+  display: flex;
+  align-items: center;
+  >img{
+    width:90px;
+    height: 90px;
+  }
+}
+.badge-box{
+
+  justify-content:right;
+}
+.goods-list{
+  flex-wrap: wrap;
+  justify-content:space-between;
+  padding: 0 16px;
+}
+.goods-item{
+  display: flex;
+  align-items: center;
+  width: 173.6px;
+  height: 119px;
+  border-radius: 9.8px;
+  opacity: 1;
+  transition: .35s;
+  background: #FFFFFF;
+  margin-bottom:9px;
+  &:hover{
+    box-shadow: 0px 1px 6px 0px #E5E5E5;
+  }
+
+}
+.left-side {
+  >img{
+    border-radius: 10px 0px 0px 10px;
+    display: block;
+    width: 196.7px;
+    height: 343.7px;
+  }
+}
+.badge {
+  width: 50px;
+  height: 27px;
+  line-height:27px;
+  border-radius: 13.3px 0px 0px 13.3px;
+  opacity: 1;
+  background: #F31947;
+  font-size: 12.6px;
+  font-weight: normal;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #FFFFFF;
+  margin-top: 26px;
+  margin-bottom:17px;
+}
+</style>
diff --git a/seller/src/views/shop/modelList/newGoodsSort.vue b/seller/src/views/shop/modelList/newGoodsSort.vue
index 5cdc74be..aeba123b 100644
--- a/seller/src/views/shop/modelList/newGoodsSort.vue
+++ b/seller/src/views/shop/modelList/newGoodsSort.vue
@@ -1,340 +1,447 @@
 <template>
-    <div class="new-goods">
-
-        <div class="left">
-            <div class="top-header setup-content" :style="{background:options.left.bgColor}">
-                <span>{{options.left.title}}</span>
-                <span>{{options.left.secondTitle}} &gt;</span>
-                <div class="setup-box">
-                    <div><Button size="small" @click.stop="handleSelectModel(options.left,true)">编辑</Button></div>
-                </div>
-            </div>
-            <div class="content">
-                <div class="con-item setup-content" v-for="(item, index) in options.left.list" :key="index">
-                    <div>
-                        <p>{{item.name}}</p>
-                        <p class="describe">{{item.describe}}</p>
-                    </div>
-                    <img :src="item.img" alt="">
-                    <div class="setup-box">
-                        <div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="middle">
-            <div class="top-header setup-content" :style="{background:options.middle.bgColor}">
-                <span>{{options.middle.title}}</span>
-                <span>{{options.middle.secondTitle}} &gt;</span>
-                <div class="setup-box">
-                    <div><Button size="small" @click.stop="handleSelectModel(options.middle,true)">编辑</Button></div>
-                </div>
-            </div>
-            <div class="content">
-                <div class="con-item setup-content" v-for="(item, index) in options.middle.list" :key="index">
-                    <div>
-                        <p>{{item.name}}</p>
-                        <p class="describe">{{item.describe}}</p>
-                    </div>
-                    <img :src="item.img" alt="">
-                    <div class="setup-box">
-                        <div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="right">
-            <div class="top-header setup-content" :style="{background:options.right.bgColor}">
-                <span>{{options.right.title}}</span>
-                <span>{{options.right.secondTitle}} &gt;</span>
-                <div class="setup-box">
-                    <div><Button size="small" @click.stop="handleSelectModel(options.right,true)">编辑</Button></div>
-                </div>
-            </div>
-            <div class="content">
-                <div class="setup-content" v-for="(item, index) in options.right.list" :key="index">
-                    <img :src="item.img" alt="">
-                    <p>{{item.name}}</p>
-                    <p>{{item.price | unitPrice('￥')}}</p>
-                    <div class="jiaobiao" :class="'jiaobiao'+(index+1)">{{index+1}}</div>
-                    <div class="setup-box">
-                        <div><Button size="small" @click.stop="handleSelectGoods(item)">编辑</Button></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- 装修内容 -->
-        <Modal
-            v-model="showModal"
-            title="装修"
-            draggable
-            width="800"
-            :z-index="100"
-            :mask-closable="false"
-
-
+  <div class="new-goods">
+    <div class="left">
+      <div
+        class="top-header setup-content"
+        :style="{ background: options.left.bgColor }"
+      >
+        <span>{{ options.left.title }}</span>
+        <span>{{ options.left.secondTitle }} &gt;</span>
+        <div class="setup-box">
+          <div>
+            <el-button
+              size="small"
+              @click.stop="handleSelectModel(options.left, true)"
+              >编辑</el-button
             >
-            <div class="modal-top-advert">
-                <div>
-                    <img class="show-image" width="160" height="160" v-if="selected.size && selected.size.indexOf('160*160')>=0" :src="selected.img" alt />
-                    <img class="show-image" width="80" height="80" v-if="selected.size && selected.size.indexOf('90*90')>=0" :src="selected.img" alt />
-                </div>
-                <div>
-                    <span>图片主标题：</span><Input v-model="selected.name" />
-                </div>
-                <div>
-                    <span>图片描述：</span><Input v-model="selected.describe" />
-                </div>
-                <div class="tips">
-                    建议尺寸：<span>{{ selected.size }}</span>
-                </div>
-                <div>
-                    图片链接：<span>{{ selected.url }}</span> <Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
-                </div>
-                <div>
-                    <Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>&nbsp;
-
-                    <Button size="small" type="primary" @click="handleSelectGoods('')">选择商品</Button>
-                </div>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div
+          class="con-item setup-content"
+          v-for="(item, index) in options.left.list"
+          :key="index"
+        >
+          <div>
+            <p>{{ item.name }}</p>
+            <p class="describe">{{ item.describe }}</p>
+          </div>
+          <img :src="item.img" alt="" />
+          <div class="setup-box">
+            <div>
+              <el-button size="small" @click.stop="handleSelectModel(item)"
+                >编辑</el-button
+              >
             </div>
-        </Modal>
-        <!-- 装修标题 -->
-        <Modal
-            v-model="showModal1"
-            title="装修"
-            draggable
-            width="800"
-            :z-index="100"
-            :mask-closable="false"
-
-
-            >
-            <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>副标题链接：{{selected.url}}</span><Button size="small" class="ml_10" type="primary" @click="handleSelectLink">选择链接</Button>
-                </div>
-                <div>
-                    <span>背景色：</span><ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
-                </div>
-            </div>
-        </Modal>
-        <!-- 选择商品。链接 -->
-        <liliDialog
-            ref="liliDialog"
-            @selectedLink="selectedLink"
-            @selectedGoodsData="selectedGoodsData"
-        ></liliDialog>
-        <!-- 选择图片 -->
-        <Modal width="1200px" v-model="picModelFlag" footer-hide>
-            <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-        </Modal>
+          </div>
+        </div>
+      </div>
     </div>
+
+    <div class="middle">
+      <div
+        class="top-header setup-content"
+        :style="{ background: options.middle.bgColor }"
+      >
+        <span>{{ options.middle.title }}</span>
+        <span>{{ options.middle.secondTitle }} &gt;</span>
+        <div class="setup-box">
+          <div>
+            <el-button
+              size="small"
+              @click.stop="handleSelectModel(options.middle, true)"
+              >编辑</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div
+          class="con-item setup-content"
+          v-for="(item, index) in options.middle.list"
+          :key="index"
+        >
+          <div>
+            <p>{{ item.name }}</p>
+            <p class="describe">{{ item.describe }}</p>
+          </div>
+          <img :src="item.img" alt="" />
+          <div class="setup-box">
+            <div>
+              <el-button size="small" @click.stop="handleSelectModel(item)"
+                >编辑</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="right">
+      <div
+        class="top-header setup-content"
+        :style="{ background: options.right.bgColor }"
+      >
+        <span>{{ options.right.title }}</span>
+        <span>{{ options.right.secondTitle }} &gt;</span>
+        <div class="setup-box">
+          <div>
+            <el-button
+              size="small"
+              @click.stop="handleSelectModel(options.right, true)"
+              >编辑</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div
+          class="setup-content"
+          v-for="(item, index) in options.right.list"
+          :key="index"
+        >
+          <img :src="item.img" alt="" />
+          <p>{{ item.name }}</p>
+          <p>{{ $filters.unitPrice(item.price, "￥") }}</p>
+          <div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
+            {{ index + 1 }}
+          </div>
+          <div class="setup-box">
+            <div>
+              <el-button size="small" @click.stop="handleSelectGoods(item)"
+                >编辑</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 装修内容 -->
+    <el-dialog
+      v-model="showModal"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div class="modal-top-advert">
+        <div>
+          <img
+            class="show-image"
+            width="160"
+            height="160"
+            v-if="selected.size && selected.size.indexOf('160*160') >= 0"
+            :src="selected.img"
+            alt
+          />
+          <img
+            class="show-image"
+            width="80"
+            height="80"
+            v-if="selected.size && selected.size.indexOf('90*90') >= 0"
+            :src="selected.img"
+            alt
+          />
+        </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>
+          图片链接：<el-input
+            class="outsideUrl"
+            v-model="selected.url"
+            :disabled="!!selected.type && selected.type !== 'link'"
+            placeholder="https://"
+          />
+          <el-button size="small" type="primary" @click="handleSelectLink"
+            >选择链接</el-button
+          >
+        </div>
+        <div>
+          <el-button size="small" type="primary" @click="handleSelectImg"
+            >选择图片</el-button
+          >&nbsp;
+
+          <el-button size="small" type="primary" @click="handleSelectGoods('')"
+            >选择商品</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 装修标题 -->
+    <el-dialog
+      v-model="showModal1"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div class="modal-top-advert">
+        <div><span>主标题：</span><el-input v-model="selected.title" /></div>
+        <div><span>副标题：</span><el-input v-model="selected.secondTitle" /></div>
+        <div>
+          <span
+            >副标题链接：<el-input
+              class="outsideUrl"
+              v-model="selected.url"
+              :disabled="!!selected.type && selected.type !== 'link'"
+              placeholder="https://" /></span
+          ><el-button
+            size="small"
+            class="ml_10"
+            type="primary"
+            @click="handleSelectLink"
+            >选择链接</el-button
+          >
+        </div>
+        <div>
+          <span>背景色：</span
+          ><el-color-picker v-if="selected.bgColor" v-model="selected.bgColor" />
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+    <!-- 选择图片 -->
+    <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 ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManages";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
-    props:{
-        data:{
-            type:Object,
-            default:null
-        }
+  props: {
+    data: {
+      type: Object,
+      default: null,
     },
-    components:{
-      ossManage
+  },
+  components: {
+    ossManage,
+  },
+  data() {
+    return {
+      options: this.data.options, // 当前数据
+      showModal: false, // modal显隐
+      showModal1: false, // modal显隐
+      selected: {}, // 已选数据
+      picModelFlag: false, // 选择图片modal
+    };
+  },
+  methods: {
+    // 装修modal
+    handleSelectModel(item, type) {
+      this.selected = item;
+      console.warn(item);
+      if (type) {
+        this.showModal1 = true;
+      } else {
+        this.showModal = true;
+      }
     },
-    data() {
-        return {
-            options:this.data.options, // 当前数据
-            showModal:false, // modal显隐
-            showModal1:false, // modal显隐
-            selected: {}, // 已选数据
-            picModelFlag: false // 选择图片modal
-        }
+    handleSelectLink() {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
     },
-    methods:{
-        // 装修modal
-        handleSelectModel (item, type) {
-            this.selected = item;
-            console.warn(item);
-            if(type){
-                this.showModal1 = true
-            } else {
-                this.showModal = true
-            }
-
-        },
-        handleSelectLink() { // 调起选择链接弹窗
-            this.$refs.liliDialog.open('link')
-        },
-        handleSelectGoods(item) { // 调起选择商品
-            console.warn(item);
-            if (item) this.selected = item;
-            this.$refs.liliDialog.open('goods', 'single')
-            setTimeout(() => {
-                this.$refs.liliDialog.goodsData = [this.selected]
-            }, 500);
-        },
-        // 选择链接回调
-        selectedLink (val) {
-            this.selected.url = this.$options.filters.formatLinkType(val);
-        },
-        // 选择商品回调
-        selectedGoodsData (val) {
-            console.log(val);
-            let goods = val[0]
-            console.log(this.selected);
-            this.selected.img = goods.thumbnail
-            this.selected.price = goods.price
-            this.selected.name = goods.goodsName
-            this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`
-        },
-        handleSelectImg(){ // 选择图片
-            this.$refs.ossManage.selectImage = true;
-            this.picModelFlag = true;
-        },
-        // 选择图片回显
-        callbackSelected (val) {
-            this.picModelFlag = false;
-            this.selected.img = val.url;
-        }
-    }
-}
+    handleSelectGoods(item) {
+      // 调起选择商品
+      console.warn(item);
+      if (item) this.selected = item;
+      this.$refs.liliDialog.open("goods", "single");
+      setTimeout(() => {
+        this.$refs.liliDialog.goodsData = [this.selected];
+      }, 500);
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      this.selected.url = this.$filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      let goods = val[0];
+      console.log(this.selected);
+      this.selected.img = goods.thumbnail;
+      this.selected.price = goods.price;
+      this.selected.name = goods.goodsName;
+      this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+    },
+    handleSelectImg() {
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+    // 选择图片回显
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.selected.img = val.url;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-@import './setup-box.scss';
-.new-goods{
+@import "./setup-box.scss";
+.new-goods {
+  display: flex;
+  justify-content: space-between;
+  > div {
+    width: 393px;
+    height: 440px;
+  }
+
+  .left > .content {
+    > div:nth-child(1) {
+      height: 240px;
+      flex-direction: column;
+      border: 1px solid #eee;
+      border-top: none;
+      border-left: none;
+      justify-content: space-between;
+      img {
+        width: 160px;
+        height: 160px;
+      }
+      .describe {
+        margin-top: 10px;
+      }
+    }
+    > div:nth-child(2) {
+      border-right: 1px solid #eee;
+    }
+    > div:nth-child(3),
+    > div:nth-child(4) {
+      border-bottom: 1px solid #eee;
+    }
+  }
+
+  .middle > .content {
+    > div {
+      border-style: solid;
+      border-color: #eee;
+      border-width: 0;
+      border-bottom-width: 1px;
+    }
+    > div:nth-child(1),
+    > div:nth-child(2),
+    > div:nth-child(3) {
+      border-right-width: 1px;
+    }
+    > div:nth-child(6),
+    > div:nth-child(3) {
+      border-bottom-width: 0;
+    }
+  }
+
+  .right > .content {
     display: flex;
-    justify-content: space-between;
-    >div{
-        width: 393px;
-        height: 440px;
-    }
-
-    .left>.content{
-        >div:nth-child(1){
-            height: 240px;
-            flex-direction: column;
-            border: 1px solid #eee;
-            border-top: none;
-            border-left: none;
-            justify-content: space-between;
-            img{
-                width: 160px;
-                height: 160px;
-            }
-            .describe{margin-top: 10px;}
-        }
-        >div:nth-child(2){border-right: 1px solid #eee;}
-        >div:nth-child(3),>div:nth-child(4){border-bottom: 1px solid #eee;}
-    }
-
-    .middle>.content{
-        >div{
-            border-style:solid;
-            border-color: #eee;
-            border-width: 0;
-            border-bottom-width: 1px;
-        }
-        >div:nth-child(1),>div:nth-child(2),>div:nth-child(3){border-right-width: 1px;}
-        >div:nth-child(6), >div:nth-child(3){border-bottom-width: 0;}
-    }
-
-    .right>.content{
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: row;
-        font-size: 12px;
-        >div{
-            position: relative;
-            width: 120px;
-            padding: 5px 10px 0 10px;
-            img{
-                width: 100px;
-                height: 100px;
-            }
-            border-bottom: 1px solid #eee;
-            :nth-child(2){
-                height: 38px;
-                overflow: hidden;
-            }
-            :nth-child(3){
-                color: $theme_color;
-                margin-top: 5px;
-            }
-            .jiaobiao{
-                position: absolute;
-                width: 23px;
-                height: 23px;
-                top: 10px;
-                right: 16px;
-                background: url('../../../assets/festival_icon.png');
-                color: #FFF;
-                text-align: center;
-            }
-            .jiaobiao1,.jiaobiao4{
-                background-position: -2px -30px;
-            }
-            .jiaobiao2,.jiaobiao5{
-                background-position: -31px -30px;
-            }
-            .jiaobiao3,.jiaobiao6{
-                background-position: -60px -30px;
-            }
-        }
-        >div:nth-child(4),>div:nth-child(5),>div:nth-child(6){border: none;}
-    }
-
-    .top-header{
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        height: 50px;
-        padding: 0 10px;
-        background: #c43d7e;
+    flex-wrap: wrap;
+    flex-direction: row;
+    font-size: 12px;
+    > div {
+      position: relative;
+      width: 120px;
+      padding: 5px 10px 0 10px;
+      img {
+        width: 100px;
+        height: 100px;
+      }
+      border-bottom: 1px solid #eee;
+      :nth-child(2) {
+        height: 38px;
+        overflow: hidden;
+      }
+      :nth-child(3) {
+        color: $theme_color;
+        margin-top: 5px;
+      }
+      .jiaobiao {
+        position: absolute;
+        width: 23px;
+        height: 23px;
+        top: 10px;
+        right: 16px;
+        background: url("../../../assets/festival_icon.png");
         color: #fff;
-        span:nth-child(1){
-            font-size: 20px;
-        }
-        span:nth-child(2){
-            font-size: 12px;
-        }
+        text-align: center;
+      }
+      .jiaobiao1,
+      .jiaobiao4 {
+        background-position: -2px -30px;
+      }
+      .jiaobiao2,
+      .jiaobiao5 {
+        background-position: -31px -30px;
+      }
+      .jiaobiao3,
+      .jiaobiao6 {
+        background-position: -60px -30px;
+      }
     }
-    .content{
-        padding: 10px 12px 0;
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column;
-        height: 370px;
+    > div:nth-child(4),
+    > div:nth-child(5),
+    > div:nth-child(6) {
+      border: none;
     }
-    .con-item{
-        width: 185px;
-        height: 120px;
-        display: flex;
-        padding-left: 10px;
-        padding-top: 10px;
-        img{
-            width: 90px;
-            height: 90px;
-            margin-top: 10px;
-        }
+  }
+
+  .top-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+    padding: 0 10px;
+    background: #c43d7e;
+    color: #fff;
+    span:nth-child(1) {
+      font-size: 20px;
     }
-    .describe{
-        color: #999;
-        font-size: 12px;
-        margin-top: 15px;
+    span:nth-child(2) {
+      font-size: 12px;
     }
+  }
+  .content {
+    padding: 10px 12px 0;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    height: 370px;
+  }
+  .con-item {
+    width: 185px;
+    height: 120px;
+    display: flex;
+    padding-left: 10px;
+    padding-top: 10px;
+    img {
+      width: 90px;
+      height: 90px;
+      margin-top: 10px;
+    }
+  }
+  .describe {
+    color: #999;
+    font-size: 12px;
+    margin-top: 15px;
+  }
 }
-.modal-top-advert{
-    align-items: start;
-    padding: 0 30px;
+.modal-top-advert {
+  align-items: start;
+  padding: 0 30px;
 }
 </style>
diff --git a/seller/src/views/shop/modelList/notEnough.vue b/seller/src/views/shop/modelList/notEnough.vue
index 21356467..923bb434 100644
--- a/seller/src/views/shop/modelList/notEnough.vue
+++ b/seller/src/views/shop/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"
@@ -100,10 +100,10 @@ export default {
         },
         handleSelectGoods(item) { // 调起选择商品弹窗
             if(item) this.selected = item;
-            this.$refs.liliDialog.flag = true;
-            this.$refs.liliDialog.goodsFlag = true;
-            this.$refs.liliDialog.singleGoods();
-
+            this.$refs.liliDialog.open('goods', 'single')
+            setTimeout(() => {
+                this.$refs.liliDialog.goodsData = [this.selected]
+            }, 500);
         },
         // 选择商品回调
         selectedGoodsData(val){
@@ -175,16 +175,16 @@ export default {
             cursor: pointer;
         }
         border-right: 1px solid #eee;
-
+        
     }
     li:last-of-type{
         border: none;
     }
-
+   
     .curr{
         p:nth-child(1){
             background-color: $theme_color;
-
+            
             color: #fff;
         }
         p:nth-child(2){
@@ -223,4 +223,4 @@ export default {
         }
     }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/seller/src/views/shop/modelList/oneRowThreeColumns.vue b/seller/src/views/shop/modelList/oneRowThreeColumns.vue
new file mode 100644
index 00000000..8efd635d
--- /dev/null
+++ b/seller/src/views/shop/modelList/oneRowThreeColumns.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="line flex flex-j-sb">
+    <div class="column" v-for="(item,index) in data.options.list" :key="index">
+      <div v-if="!item.img" class="placeholder">占位符</div>
+      <img v-else :src="item.img" class="three-column-img">
+    </div>
+    <div class="setup-box">
+      <div>
+        <el-button
+          size="small"
+          @click.stop="handleSelectModel(data.options.list)"
+        >编辑</el-button
+        >
+      </div>
+    </div>
+    <el-dialog
+      v-model="showModal"
+      title="装修"
+      
+      width="800"
+      
+      :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>
+          <el-button
+            size="small"
+            class="ml_10"
+            type="primary"
+            @click="handleSelectImg(index)"
+          >选择图片</el-button
+          >
+          <el-button
+            size="small"
+            class="ml_10"
+            type="primary"
+            @click="handleSelectLink(index)"
+          >选择链接</el-button
+          >
+        </div>
+
+      </div>
+    </el-dialog>
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+    <!-- 选择图片 -->
+    <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 ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+  name: "oneRowThreeColumns",
+  components:{ossManage},
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  data () {
+    return {
+      showModal:false,
+      selected: {}, // 已选数据
+      picModelFlag:false,
+      current:0,
+    };
+  },
+  methods: {
+    // 回显图片
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.selected[this.current].img = val.url;
+      console.log(this.selected)
+    },
+    // 编辑模块
+    handleSelectModel(item) {
+      this.selected = item;
+      this.showModal = true;
+
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      console.log(val);
+      let goods = val[0];
+      this.selected.img = goods.thumbnail;
+      this.selected.price = goods.price;
+      this.selected.name = goods.goodsName;
+      this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      this.selected.url = this.$filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
+    },
+    handleSelectLink(index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+      this.current = index;
+    },
+    handleSelectImg(index){
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+      this.current = index;
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.three-column-img{
+  width:385px;
+  height: 165px
+}
+.line:hover{
+  >.setup-box{
+    display: block;
+  }
+}
+.placeholder{
+  background: #666;
+  width: 100%;
+  height: 100%;
+}
+.line{
+  position: relative;
+  justify-content: space-between;
+}
+.column{
+  width: 385px;
+  height: 165px;
+
+  >img{
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/seller/src/views/shop/modelList/onlyGoodsModel.vue b/seller/src/views/shop/modelList/onlyGoodsModel.vue
new file mode 100644
index 00000000..c48eb054
--- /dev/null
+++ b/seller/src/views/shop/modelList/onlyGoodsModel.vue
@@ -0,0 +1,280 @@
+<template>
+  <div class="goods-type-wrapper">
+    <!-- 商品部分 -->
+    <div class="goods-list flex">
+      <div
+        class="goods-list-item"
+        v-for="(item, index) in data.options.list"
+        :key="index"
+      >
+        <div>
+          <div class="goods-name wes-2">{{ item.title }}</div>
+          <div class="goods-desc">{{ item.desc }}</div>
+        </div>
+        <div class="goods-img">
+          <img :src="item.img" />
+        </div>
+      </div>
+      <div class="setup-box">
+        <div>
+          <el-button
+            size="small"
+            @click.stop="handleSelectModel(data.options.list)"
+          >编辑</el-button
+          >
+        </div>
+      </div>
+    </div>
+
+    <el-dialog
+      v-model="showModal"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div class="modal-tab-bar">
+            <div class="flex flex-a-c">
+              <el-button class="add-goods" @click="addCurrentGoods">
+                添加商品
+              </el-button>
+            </div>
+
+            <div
+              v-for="(item, index) in data.options.list"
+              :key="index"
+              class="draggable"
+            >
+              <div class="flex">
+                <img :src="item.img" class="column-img" />
+                <div class="flex column-goods-config">
+                  <div class="column-config">
+                    <div>
+                      标题：
+                      <el-input v-model="item.title" />
+                    </div>
+                    <div>
+                      描述：
+                      <el-input v-model="item.desc" />
+                    </div>
+                  </div>
+                  <el-button @click="delGoods(item,index)">删除</el-button>
+                </div>
+              </div>
+            </div>
+
+      </div>
+    </el-dialog>
+
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "onlyGoodsList",
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    return {
+      flag:false,
+      tabIndex:0,
+      current: 0,
+      showModal: false,
+      selected: {}, // 已选数据
+      picModelFlag: false,
+    };
+  },
+  mounted(){
+
+  },
+  methods: {
+    // 删除商品
+    delGoods(val,i) {
+      this.data.options.list.splice(i, 1);
+    },
+    // 添加当前选项卡中的商品
+    addCurrentGoods() {
+      this.$refs.liliDialog.open("goods");
+    },
+    // 编辑模块
+    handleSelectModel(item) {
+      console.log(item);
+      this.selected = item;
+      this.showModal = true;
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      if (val.length) {
+        val.forEach((item) => {
+          const pushGoodsDetail = {
+            img: item.thumbnail,
+            price: item.price,
+            title: item.goodsName,
+            desc: "",
+            url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
+          };
+          this.data.options.list.push(pushGoodsDetail);
+        });
+      }
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      this.selected[this.current].url =
+        this.$filters.formatLinkType(val);
+      this.selected[this.current].type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
+
+      console.log(this.selected[this.current]);
+    },
+    handleSelectLink(index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+      this.current = index;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.goods-type-wrapper {
+  position: relative;
+}
+.del-btn{
+  margin-left:10px;
+}
+.tab-bar {
+  margin-bottom: 20px;
+}
+.draggable {
+  padding: 10px;
+  border-bottom: 1px solid #ededed;
+  transition: 0.35s;
+
+  &:hover {
+    background-color: #ededed;
+  }
+}
+.column-config {
+  margin-left: 10px;
+  > * {
+    margin: 4px;
+  }
+}
+.column-img {
+  width: 100px;
+  height: 100px;
+}
+.add-goods {
+  margin-left: 20px;
+  margin-bottom: 10px;
+}
+.goods-list {
+  position: relative;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  &:hover {
+    > .setup-box {
+      display: block;
+    }
+  }
+}
+.column-goods-config {
+  flex: 2;
+  align-items: center;
+  justify-content: space-between;
+}
+.goods-list-item {
+  padding-top: 34.8px;
+  margin-bottom: 14.3px;
+  width: 287px;
+  height: 343.7px;
+  border-radius: 9.8px;
+  opacity: 1;
+  cursor: pointer;
+  background: #ffffff;
+  transition: 0.35s;
+  box-shadow: 0px 1px 13px 0px #e5e5e5;
+  &:hover {
+    box-shadow: 0px 1px 14px 0px #c5c5c5;
+  }
+}
+.goods-img {
+  text-align: center;
+  > img {
+    width: auto;
+    max-height: 183px;
+  }
+}
+.goods-name {
+  margin-bottom: 11.9px;
+  font-size: 25px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #333333;
+
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-desc {
+  margin-bottom: 30px;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 19px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #666666;
+
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-price {
+  font-size: 25.2px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #f31947;
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-type-line {
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+}
+.goods-type-title {
+  font-size: 31px;
+  font-weight: normal;
+  line-height: 37px;
+  letter-spacing: 0px;
+
+  color: #333333;
+}
+.active {
+  color: #f31947;
+}
+.goods-type-labels {
+  font-size: 21px;
+  font-weight: normal;
+  line-height: 25px;
+  letter-spacing: 0px;
+}
+.goods-type-item {
+  margin-left: 28px;
+}
+</style>
diff --git a/seller/src/views/shop/modelList/recommend.vue b/seller/src/views/shop/modelList/recommend.vue
index 542314ef..632cbf3f 100644
--- a/seller/src/views/shop/modelList/recommend.vue
+++ b/seller/src/views/shop/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,24 +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
@@ -138,60 +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>
-          图片链接：<span>{{ selected.url }}</span>
-          <Button
+          图片链接：<el-input
+            class="outsideUrl"
+            v-model="selected.url"
+            :disabled="!!selected.type && selected.type !== 'link'"
+            placeholder="https://"
+          />
+          <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>副标题链接：{{ selected.url }}</span
-          ><Button
+          <span
+            >副标题链接：<el-input
+              class="outsideUrl"
+              v-model="selected.url"
+              :disabled="!!selected.type && selected.type !== 'link'"
+              placeholder="https://" /></span
+          ><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"
@@ -199,14 +205,18 @@
       @selectedGoodsData="selectedGoodsData"
     ></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>
 <script>
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManages";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
   props: {
     data: {
@@ -243,11 +253,13 @@ export default {
     },
     handleSelectGoods(item) {
       // 调起选择商品
-      this.$refs.liliDialog.open('goods', 'single')
+      this.$refs.liliDialog.open("goods", "single");
     },
     // 选择链接回调
     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";
     },
     // 选择商品回调
     selectedGoodsData(val) {
diff --git a/seller/src/views/shop/modelList/seckill-only-album.vue b/seller/src/views/shop/modelList/seckill-only-album.vue
new file mode 100644
index 00000000..90d85303
--- /dev/null
+++ b/seller/src/views/shop/modelList/seckill-only-album.vue
@@ -0,0 +1,291 @@
+<template>
+  <div class="seckill">
+    <div class="desc">秒杀商品需要在促销活动中添加商品，有商品时才会在首页展示</div>
+    <div class="aside">
+      <div class="title">{{ actName }}</div>
+      <div class="hour">
+        <span>{{ currHour }}:00</span>点场 倒计时
+      </div>
+      <div class="count-down" v-if="actStatus === 1">
+        <span>{{ hours }}</span
+        ><span>{{ minutes }}</span
+      ><span>{{ seconds }}</span>
+      </div>
+      <div class="act-status" v-else>
+        {{ actStatus == 0 ? "未开始" : "已结束" }}
+      </div>
+    </div>
+    <div class="section">
+      <swiper ref="mySwiper" :options="swiperOptions">
+        <swiper-slide
+          v-for="(item, index) in options.list[0].goodsList"
+          :key="index"
+        >
+          <div class="content">
+            <img :src="item.img" width="140" height="140" :alt="item.name" />
+            <div class="ellipsis">{{ item.name }}</div>
+            <div>
+              <span>{{ $filters.unitPrice(item.price, "￥") }}</span>
+              <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+  </div>
+</template>
+<script>
+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
+import "swiper/swiper-bundle.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  directives: {
+    swiper: directive,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      options: this.data.options, // 当前数据
+      actStatus: 0, // 0 未开始  1 进行中   2 已结束
+      actName: "限时秒杀",
+      currHour: "00", // 当前秒杀场
+      diffSeconds: 0, // 倒地时
+      hours: "00", // 小时
+      minutes: "00", // 分钟
+      seconds: "00", // 秒
+      interval: undefined, // 定时器
+      swiperOptions: {
+        // 轮播图参数
+        slidesPerView: 5,
+        autoplay: true,
+        loop: true,
+      },
+    };
+  },
+  watch: {
+    diffSeconds(val) {
+      const hours = Math.floor(val / 3600);
+      // 当前秒数 / 60，向下取整
+      // 获取到所有分钟数 3600 / 60 = 60分钟
+      // 对60取模，超过小时数的分钟数
+      const minutes = Math.floor(val / 60) % 60;
+      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
+      const seconds = val % 60;
+      this.hours = hours < 10 ? "0" + hours : hours;
+      this.minutes = minutes < 10 ? "0" + minutes : minutes;
+      this.seconds = seconds < 10 ? "0" + seconds : seconds;
+
+      if (val === 0) {
+        clearInterval(this.interval);
+        this.hours = 0;
+        this.minutes = 0;
+        this.seconds = 0;
+        this.countDown(this.options.list);
+      }
+    },
+  },
+  mounted() {
+    this.countDown(this.options.list);
+  },
+  beforeUnmount() {
+    clearInterval(this.interval);
+  },
+  methods: {
+    // 倒计时
+    countDown(list) {
+      /**
+       * 默认倒计时两小时
+       * 如果没有开始，则显示未开始
+       * 进行中显示倒计时
+       * 今天的秒杀结束则显示已结束
+       */
+      let nowHour = new Date().getHours();
+      if (nowHour < Number(list[0].time)) {
+        // 活动未开始
+        this.currHour = list[0].time;
+        this.actStatus = 0;
+      } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
+        // 活动已结束
+        this.actStatus = 2;
+        this.currHour = list[list.length - 1].time;
+      } else {
+        // 活动进行中
+        this.actStatus = 1;
+        for (let i = 0; i < list.length; i++) {
+          if (nowHour == Number(list[i].time)) {
+            this.currHour = list[i].time;
+          }
+          if (
+            nowHour > Number(list[i].time) &&
+            nowHour < Number(list[i].time + 2)
+          ) {
+            this.currHour = list[i].time;
+          }
+        }
+        // 当前0点时间戳
+        let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+        // 活动倒计时
+        this.diffSeconds = Math.floor(
+          (zeroTime +
+            3600 * 1000 * (this.currHour + 2) -
+            new Date().getTime()) /
+          1000
+        );
+        const that = this;
+        this.interval = setInterval(() => {
+          this.diffSeconds--;
+        }, 1000);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.seckill {
+  width: 100%;
+  height: 260px;
+  display: flex;
+  position: relative;
+  .desc{
+    position: absolute;
+    color: $theme_color;
+    left: 200px;
+    top: 5px;
+  }
+  .aside {
+    overflow: hidden;
+    width: 190px;
+    height: 100%;
+    color: #fff;
+    background-image: url("../../../assets/seckillBg.png");
+
+    .title {
+      width: 100%;
+      text-align: center;
+      font-size: 28px;
+      margin-top: 31px;
+    }
+
+    .hour {
+      margin-top: 90px;
+      text-align: center;
+      span {
+        font-size: 18px;
+      }
+    }
+
+    .count-down {
+      margin: 10px 0 0 30px;
+      > span {
+        position: relative;
+        float: left;
+        width: 30px;
+        height: 30px;
+        text-align: center;
+        background-color: #2f3430;
+        margin-right: 20px;
+        color: white;
+        font-size: 20px;
+        &::after {
+          content: ":";
+          display: block;
+          position: absolute;
+          right: -20px;
+          font-weight: bolder;
+          font-size: 18px;
+          width: 20px;
+          height: 100%;
+          top: 0;
+        }
+      }
+      > span:last-child::after {
+        content: "";
+      }
+    }
+
+    .act-status {
+      margin: 10px 0 0 65px;
+      font-size: 20px;
+    }
+  }
+
+  .section {
+    width: 1000px;
+    // background: #efefef;
+    .swiper-slide {
+      height: 260px;
+      .content {
+        width: 200px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        position: relative;
+        &::after {
+          content: "";
+          display: block;
+          position: absolute;
+          top: 50%;
+          right: 0;
+          width: 1px;
+          height: 200px;
+          transform: translateY(-50%);
+          background: linear-gradient(180deg, white, #eeeeee, white);
+        }
+        img {
+          margin-top: 30px;
+        }
+        > div {
+          width: 160px;
+          margin-top: 10px;
+          font-size: 12px;
+          position: relative;
+        }
+        > div:nth-of-type(1):hover {
+          color: $theme_color;
+          cursor: pointer;
+        }
+        > div:nth-of-type(2) {
+          border: 1px solid $theme_color;
+          line-height: 24px;
+          display: flex;
+          text-align: center;
+
+          span:nth-child(1) {
+            color: #fff;
+            font-size: 16px;
+            width: 92px;
+            background-color: $theme_color;
+            position: relative;
+            &::before {
+              content: " ";
+              width: 0;
+              height: 0;
+              border-color: transparent white transparent transparent;
+              border-style: solid;
+              border-width: 24px 8px 0 0;
+              position: absolute;
+              top: 0;
+              left: 84px;
+            }
+          }
+
+          span:nth-child(2) {
+            color: #999;
+            width: 66px;
+            text-decoration: line-through;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/seller/src/views/shop/modelList/seckill.vue b/seller/src/views/shop/modelList/seckill.vue
index 1c296efc..c96d81df 100644
--- a/seller/src/views/shop/modelList/seckill.vue
+++ b/seller/src/views/shop/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/seller/src/views/shop/ossManage.vue b/seller/src/views/shop/ossManage.vue
index 16ac50f2..12f544fd 100644
--- a/seller/src/views/shop/ossManage.vue
+++ b/seller/src/views/shop/ossManage.vue
@@ -1,155 +1,215 @@
 <style lang="scss">
-  // 建议引入通用样式 可删除下面样式代码
-  @import "@/styles/table-common.scss";
-  @import "./ossManage.scss";
-  .group-row {
-    padding-top: 10px;
-    border-top: 1px solid #ededed;
-    margin-top: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    > * {
-      margin-right: 10px;
-    }
+@import "./ossManage.scss";
+
+.group-row {
+  padding-top: 10px;
+  border-top: 1px solid #ededed;
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > * {
+    margin-right: 10px;
   }
-  .article-category {
-    flex: 2;
-    min-width: 200px;
-  }
-  .table {
-    flex: 11;
-  }
-  .ivu-card {
-    width: 100%;
-  }
-  .modal-footer {
-    text-align: center;
-    > * {
-      margin: 0 10px;
-    }
+}
+
+.article-category {
+  flex: 2;
+  min-width: 200px;
+}
+
+.table {
+  flex: 11;
+}
+
+.el-card {
+  width: 100%;
+}
+
+.modal-footer {
+  text-align: center;
+
+  > * {
+    margin: 0 10px;
   }
+}
+
+.tab-empty {
+  padding: 48px 0;
+  color: #999;
+  text-align: center;
+}
+
+.tabs-card {
+  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">
-    <Row>
-      <Card>
-        <div class="operation">
-          <Row @keydown.enter.native="handleSearch">
-            <Form
-              ref="searchForm"
-              :label-width="85"
-              :model="searchForm"
-              class="search-form"
-              inline
-            >
-              <Form-item label="上传时间">
-                <DatePicker
-                  v-model="selectDate"
-                  clearable
-                  format="yyyy-MM-dd"
-                  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>
-          </div>
-        </Card>
-        <Card>
+    <el-card class="tabs-card">
+      <el-tabs v-model="activeRoleTab" @tab-change="handleRoleTabChange">
+        <el-tab-pane label="商家" name="STORE" />
+      </el-tabs>
+    </el-card>
+    <el-row>
+      <el-card>
+        <div>
           <div class="operation">
-          <Row class="oss-manage-box">
-            <Col :span="isComponent?5:4">
+            <el-row @keyup.enter="handleSearch">
+              <el-form
+                ref="searchForm"
+                label-width="85px"
+                :model="searchForm"
+                class="search-form"
+                inline
+              >
+                <el-form-item label="上传时间">
+                  <el-date-picker
+                    v-model="selectDate"
+                    clearable
+                    value-format="YYYY-MM-DD"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    style="width: 240px"
+                    type="daterange"
+                    @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>
+          <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="isComponent?19:20">
+            </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="{
-                  directoryPath: searchForm.fileDirectoryId,
-                }"
+                        :data="uploadData"
                         :headers="accessToken"
-                        :max-size="20480"
+                        :before-upload="beforeUpload"
                         :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>
-                      <Dropdown @on-click="handleDropdown" v-if="!isComponent">
-                        <Button>
-                          更多操作
-                          <Icon type="md-arrow-dropdown"/>
-                        </Button>
-                        <DropdownMenu slot="list">
-                          <DropdownItem name="refresh">刷新</DropdownItem>
-                          <DropdownItem v-show="showType == 'list'" name="removeAll"
-                          >批量删除
-                          </DropdownItem>
-                        </DropdownMenu>
-                      </Dropdown>
+                        <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">
-                            <div class="text">{{item.name}}</div>
-                          </Tooltip>
+                          <el-tooltip :content="item.name" placement="bottom">
+                            <div class="text">{{ item.name }}</div>
+                          </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">-->
@@ -311,597 +371,721 @@
         <!--@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
-            v-model="groupFormValidate.id"
-            :data="treeData"
-            change-on-select
-            @on-change="treeDataChange"
-          ></Cascader>
-        </FormItem>
-        <FormItem label="分组名称" prop="directoryName">
-          <Input v-model="groupFormValidate.directoryName"/>
-        </FormItem>
-      </Form>
+        <el-form-item label="所在分组" prop="id">
+          <el-cascader
+            v-model="defaultValue"
+            :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 {
-    addFileDirectory,
-    deleteFile,
-    delFileDirectory,
-    getFileDirectory,
-    getFileListData,
-    renameFile,
-    updateFileDirectory,
-  } from "@/api/index";
-  import DPlayer from "dplayer";
-  import { commonUrl } from "@/libs/axios";
+import { Delete, Download, View } from "@element-plus/icons-vue";
+import {
+  addFileDirectory,
+  deleteFile,
+  delFileDirectory,
+  getFileDirectory,
+  getFileListData,
+  renameFile,
+  updateFileDirectory,
+} from "@/api/index";
+import DPlayer from "dplayer";
+import {commonUrl} from "@/libs/axios";
 
-  const config = require("@/config/index");
+const config = require("@/config/index");
 
-  let dp;
-  export default {
-    name: "oss-manage",
-    props: {
-      isComponent: {
-        default: false,
-        type: Boolean,
+let dp;
+export default {
+  name: "oss-manage",
+  components: { Delete, Download, View },
+  props: {
+    isComponent: {
+      default: false,
+      type: Boolean,
+    },
+    choose: {
+      type: String,
+      default: ""
+    },
+    initialize: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      commonUrl, // 上传文件路径
+      config, // api地址
+      fileDirectoryId: "",
+      groupFormValidate: {
+        id: [],
+        level: 0,
+        directoryName: "",
       },
-      choose: {
-        type: String,
-        default: ""
+      defaultValue: [], // 默认分组id
+      groupRuleValidate: {
+        directoryName: [
+          {
+            required: true,
+            message: "请输入分组名称",
+            trigger: "blur",
+          },
+        ],
+        id: [
+          {
+            required: true,
+            message: "请选择分组",
+            trigger: "blur",
+            type: "array",
+          },
+        ],
+      },
+      enableGroup: false, // 是否展示分组
+      selectImage: false, //是否是选择
+      accessToken: {}, // 上传token鉴权
+      loading: false, // 表单加载状态
+      fileType: "all", // 文件类型
+      showType: "list", // 展示类型
+      modalVisible: false, // 添加或编辑显示
+      uploadVisible: false, // 上传展示
+      videoVisible: false, // 文件modal
+      picVisible: false, // 图片modal
+      picTitle: "", // 图片title
+      videoTitle: "", // 视频title
+      modalTitle: "", // 添加或编辑标题
+      activeRoleTab: "STORE",
+      searchForm: {
+        // 搜索框对应data对象
+        name: "",
+        fileKey: "",
+        fileType: "",
+        userEnums: "MANAGER",
+        pageNumber: 1, // 当前页数
+        pageSize: 20, // 页面大小
+        sort: "createTime", // 默认排序字段
+        order: "desc", // 默认排序方式
+        startDate: "", // 起始时间
+        endDate: "", // 终止时间
+      },
+      selectDate: null, // 选择日期绑定modal
+      oldKey: "", // 请求参数
+      form: {
+        // 表单
+        name: "",
+        fileKey: "",
+      },
+      file: {}, // 文件数据
+      // 表单验证规则
+      formValidate: {
+        name: [{required: true, message: "不能为空", trigger: "blur"}],
+        fileKey: [{required: true, message: "不能为空", trigger: "blur"}],
+      },
+      submitLoading: false, // 添加或编辑提交状态
+      selectList: [], // 多选数据
+      selectCount: 0, // 多选计数
+      totalSize: "", // 文件大小统计
+      columns: [
+        // 表头
+        {
+          type: "selection",
+          width: 60,
+          align: "center",
+        },
+        {
+          title: "缩略图(点击预览)",
+          key: "url",
+          width: 300,
+          align: "center",
+          render: (h, params) => {
+            if (params.row.fileType.includes("image") > 0) {
+              return h("img", {
+                attrs: {
+                  src: params.row.url || "",
+                  alt: "加载图片失败",
+                },
+                style: {
+                  cursor: "pointer",
+                  width: "80px",
+                  height: "60px",
+                  margin: "10px 0",
+                  "object-fit": "contain",
+                },
+                on: {
+                  click: () => {
+                    this.showPic(params.row);
+                  },
+                },
+              });
+            } else if (params.row.fileType.includes("video") > 0) {
+              // 如果视频文件大小超过5MB不予加载video
+              if (params.row.fileSize < 1024 * 1024 * 5) {
+                return h(
+                  "video",
+                  {
+                    style: {
+                      cursor: "pointer",
+                      width: "80px",
+                      height: "60px",
+                      margin: "10px 0",
+                      "object-fit": "contain",
+                    },
+                    on: {
+                      click: () => {
+                        this.showVideo(params.row);
+                      },
+                    },
+                  },
+                  [
+                    h("source", {
+                      attrs: {
+                        src: params.row.url,
+                      },
+                    }),
+                  ]
+                );
+              } else {
+                return h("img", {
+                  attrs: {
+                    src: require("@/assets/play.png"),
+                  },
+                  style: {
+                    cursor: "pointer",
+                    width: "80px",
+                    height: "60px",
+                    margin: "10px 0",
+                    "object-fit": "contain",
+                  },
+                  on: {
+                    click: () => {
+                      this.showVideo(params.row);
+                    },
+                  },
+                });
+              }
+            } else {
+              return h("span", "非多媒体类型");
+            }
+          },
+        },
+        {
+          title: "文件类型",
+          key: "fileType",
+          width: 115,
+          className: this.selectImage == true ? "none" : "",
+        },
+        {
+          title: "文件大小",
+          key: "fileSize",
+          width: 115,
+          sortable: true,
+          className: this.selectImage == true ? "none" : "",
+          render: (h, params) => {
+            let m =
+              ((params.row.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+            return h("span", m);
+          },
+        },
+        {
+          title: "上传者",
+          key: "createBy",
+          width: 200,
+          render: (h, params) => {
+            let m = "";
+            if (params.row.userEnums == "MANAGER") {
+              m = "[管理员]";
+            } else if (params.row.userEnums == "STORE") {
+              m = "[商家]";
+            } else if (params.row.userEnums == "CUSTOMER") {
+              m = "[客服]";
+            } else {
+              m = "[用户]";
+            }
+            m += params.row.createBy;
+            return h("span", m);
+          },
+        },
+        {
+          title: "操作",
+          key: "action",
+          align: "center",
+          fixed: "right",
+          // width: 300,
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "a",
+                {
+                  style: {
+                    color: "#2d8cf0",
+                    cursor: "pointer",
+                    textDecoration: "none",
+                    marginRight: "5px",
+                    display: this.selectImage === true ? "inline-block" : "none",
+                  },
+                  on: {
+                    click: () => {
+                      this.selectedParams(params.row);
+                    },
+                  },
+                },
+                "选择"
+              ),
+              h(
+                "span",
+                {
+                  style: {
+                    margin: "0 8px",
+                    color: "#dcdee2",
+                    display: this.selectImage === true ? "inline-block" : "none",
+                  },
+                },
+                "|"
+              ),
+              h(
+                "a",
+                {
+                  style: {
+                    color: "#2d8cf0",
+                    cursor: "pointer",
+                    textDecoration: "none",
+                    marginRight: "5px",
+                    display: this.selectImage == true ? "none" : "inline-block",
+                  },
+                  on: {
+                    click: () => {
+                      this.download(params.row);
+                    },
+                  },
+                },
+                "下载"
+              ),
+              h(
+                "span",
+                {
+                  style: {
+                    margin: "0 8px",
+                    color: "#dcdee2",
+                    display: this.selectImage == true ? "none" : "inline-block",
+                  },
+                },
+                "|"
+              ),
+              h(
+                "a",
+                {
+                  style: {
+                    color: "#2d8cf0",
+                    cursor: "pointer",
+                    textDecoration: "none",
+                    display: this.selectImage == true ? "none" : "inline-block",
+                  },
+                  on: {
+                    click: () => {
+                      this.remove(params.row);
+                    },
+                  },
+                },
+                "删除"
+              ),
+            ]);
+          },
+        },
+      ],
+      viewColumns: [
+        {
+          title: "缩略图(点击预览)",
+          key: "url",
+          // width: 150,
+          align: "center",
+          render: (h, params) => {
+            if (params.row.fileType.includes("image") > 0) {
+              return h("img", {
+                attrs: {
+                  src: params.row.url || "",
+                  alt: "加载图片失败",
+                },
+                style: {
+                  cursor: "pointer",
+                  width: "80px",
+                  height: "60px",
+                  margin: "10px 0",
+                  "object-fit": "contain",
+                },
+                on: {
+                  click: () => {
+                    this.showPic(params.row);
+                  },
+                },
+              });
+            } else if (params.row.fileType.includes("video") > 0) {
+              // 如果视频文件大小超过5MB不予加载video
+              if (params.row.fileSize < 1024 * 1024 * 5) {
+                return h(
+                  "video",
+                  {
+                    style: {
+                      cursor: "pointer",
+                      width: "80px",
+                      height: "60px",
+                      margin: "10px 0",
+                      "object-fit": "contain",
+                    },
+                    on: {
+                      click: () => {
+                        this.showVideo(params.row);
+                      },
+                    },
+                  },
+                  [
+                    h("source", {
+                      attrs: {
+                        src: params.row.url,
+                      },
+                    }),
+                  ]
+                );
+              } else {
+                return h("img", {
+                  attrs: {
+                    src: require("@/assets/play.png"),
+                  },
+                  style: {
+                    cursor: "pointer",
+                    width: "80px",
+                    height: "60px",
+                    margin: "10px 0",
+                    "object-fit": "contain",
+                  },
+                  on: {
+                    click: () => {
+                      this.showVideo(params.row);
+                    },
+                  },
+                });
+              }
+            } else {
+              return h("span", "非多媒体类型");
+            }
+          },
+        },
+        {
+          title: "上传者",
+          key: "createBy",
+          width: 120,
+          sortable: true,
+          render: (h, params) => {
+            let m = "";
+            if (params.row.userEnums == "MANAGER") {
+              m = "[管理员]";
+            } else if (params.row.userEnums == "STORE") {
+              m = "[商家]";
+            } else if (params.row.userEnums == "CUSTOMER") {
+              m = "[客服]";
+            } else {
+              m = "[用户]";
+            }
+            m += params.row.createBy;
+            return h("span", m);
+          },
+        },
+        {
+          title: "操作",
+          key: "action",
+          align: "center",
+          fixed: "right",
+          width: 300,
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "default",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                    display:
+                      this.selectImage === true ? "inline-block" : "none",
+                  },
+                  on: {
+                    click: () => {
+                      this.selectedParams(params.row);
+                    },
+                  },
+                },
+                "选择"
+              )
+            ]);
+          },
+        },
+      ],
+      data: [], // 表单数据
+      total: 0, // 表单数据总数
+      pageSizeOpts: [5, 10, 20], // 页码展示项
+      list: [], // 列表
+      //树结构
+      treeData: [],
+      treeDataDefault: [],
+      selectedGroupData: "",
+      insertOrUpdate: "insert",
+      groupLoading: false,
+      // 图片列表
+      selectedOss: [],
+      myData: [
+        {
+          title: 'parent 1',
+          expand: true,
+          render: (h, {root, node, data}) => {
+            return h('span', {style: {display: 'inline-block', width: '100%'}}, [
+              h('span', [h("Icon", {type: 'ios-folder-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
+              h('span', {style: {display: 'inline-block', float: 'right', marginRight: '32px'}},
+                [h("Button", {
+                  ...this.buttonProps,
+                  icon: 'ios-add',
+                  type: 'primary',
+                  style: {width: '64px'},
+                  onClick: () => {
+                    this.append(data)
+                  }
+                })
+                ])
+            ]);
+          },
+          children: [
+            {
+              title: 'child 1-1',
+              expand: true,
+              children: [{title: 'leaf 1-1-1', expand: true}, {title: 'leaf 1-1-2', expand: true}]
+            },
+            {
+              title: 'child 1-2',
+              expand: true,
+              children: [{title: 'leaf 1-2-1', expand: true}, {title: 'leaf 1-2-1', expand: true}]
+            }
+          ]
+        }
+      ],
+      buttonProps: {type: 'default', size: 'small',},
+    };
+  },
+  watch: {
+    selectImage(val) {
+      if (val && !this.data.length) this.init();
+    },
+    choose(val) {
+      if (val) this.selectImage = val
+    },
+    selectedOss(val) {
+      if (val && val.length) {
+        this.$emit("callback", {url: val[val.length - 1].split(',')[1]});
       }
     },
-    data() {
+    // 初始化监听 是否清空所选图片
+    initialize(val) {
+      if (val && this.isComponent) {
+        this.selectedOss = [];
+      }
+    },
+    defaultValue(val) {
+      if (val) {
+        this.groupFormValidate.parentId = val;
+      }
+    },
+  },
+  computed: {
+    canShowGroups() {
+      return this.activeRoleTab === "MANAGER";
+    },
+    canUploadImages() {
+      return this.activeRoleTab === "MANAGER";
+    },
+    uploadData() {
       return {
-        commonUrl, // 上传文件路径
-        config, // api地址
-        fileDirectoryId: "",
-        groupFormValidate: {
-          id: [],
-          level: 0,
-          directoryName: "",
-        },
-        groupRuleValidate: {
-          directoryName: [
-            {
-              required: true,
-              message: "请输入分组名称",
-              trigger: "blur",
-            },
-          ],
-          id: [
-            {
-              required: true,
-              message: "请选择分组",
-              trigger: "blur",
-              type: "array",
-            },
-          ],
-        },
-        enableGroup: false, // 是否展示分组
-        selectImage: false, //是否是选择
-        accessToken: {}, // 上传token鉴权
-        loading: false, // 表单加载状态
-        fileType: "all", // 文件类型
-        showType: "list", // 展示类型
-        modalVisible: false, // 添加或编辑显示
-        uploadVisible: false, // 上传展示
-        videoVisible: false, // 文件modal
-        picVisible: false, // 图片modal
-        picTitle: "", // 图片title
-        videoTitle: "", // 视频title
-        modalTitle: "", // 添加或编辑标题
-        searchForm: {
-          // 搜索框对应data对象
-          name: "",
-          fileKey: "",
-          fileType: "",
-          pageNumber: 1, // 当前页数
-          pageSize: 27, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-        },
-        selectDate: null, // 选择日期绑定modal
-        oldKey: "", // 请求参数
-        form: {
-          // 表单
-          name: "",
-          fileKey: "",
-        },
-        file: {}, // 文件数据
-        // 表单验证规则
-        formValidate: {
-          name: [{required: true, message: "不能为空", trigger: "blur"}],
-          fileKey: [{required: true, message: "不能为空", trigger: "blur"}],
-        },
-        submitLoading: false, // 添加或编辑提交状态
-        selectList: [], // 多选数据
-        selectCount: 0, // 多选计数
-        totalSize: "", // 文件大小统计
-        columns: [
-          // 表头
-          {
-            type: "selection",
-            width: 60,
-            align: "center",
-          },
-          {
-            title: "缩略图(点击预览)",
-            key: "url",
-            width: 300,
-            align: "center",
-            render: (h, params) => {
-              if (params.row.fileType.includes("image") > 0) {
-                return h("img", {
-                  attrs: {
-                    src: params.row.url || "",
-                    alt: "加载图片失败",
-                  },
-                  style: {
-                    cursor: "pointer",
-                    width: "80px",
-                    height: "60px",
-                    margin: "10px 0",
-                    "object-fit": "contain",
-                  },
-                  on: {
-                    click: () => {
-                      this.showPic(params.row);
-                    },
-                  },
-                });
-              } else if (params.row.fileType.includes("video") > 0) {
-                // 如果视频文件大小超过5MB不予加载video
-                if (params.row.fileSize < 1024 * 1024 * 5) {
-                  return h(
-                    "video",
-                    {
-                      style: {
-                        cursor: "pointer",
-                        width: "80px",
-                        height: "60px",
-                        margin: "10px 0",
-                        "object-fit": "contain",
-                      },
-                      on: {
-                        click: () => {
-                          this.showVideo(params.row);
-                        },
-                      },
-                    },
-                    [
-                      h("source", {
-                        attrs: {
-                          src: params.row.url,
-                        },
-                      }),
-                    ]
-                  );
-                } else {
-                  return h("img", {
-                    attrs: {
-                      src: require("@/assets/play.png"),
-                    },
-                    style: {
-                      cursor: "pointer",
-                      width: "80px",
-                      height: "60px",
-                      margin: "10px 0",
-                      "object-fit": "contain",
-                    },
-                    on: {
-                      click: () => {
-                        this.showVideo(params.row);
-                      },
-                    },
-                  });
-                }
-              } else {
-                return h("span", "非多媒体类型");
-              }
-            },
-          },
-          {
-            title: "文件类型",
-            key: "fileType",
-            width: 115,
-            className: this.selectImage == true ? "none" : "",
-          },
-          {
-            title: "文件大小",
-            key: "fileSize",
-            width: 115,
-            sortable: true,
-            className: this.selectImage == true ? "none" : "",
-            render: (h, params) => {
-              let m =
-                ((params.row.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-              return h("span", m);
-            },
-          },
-          {
-            title: "上传者",
-            key: "createBy",
-            width: 200,
-            render: (h, params) => {
-              let m = "";
-              if (params.row.userEnums == "MANAGER") {
-                m = "[管理员]";
-              } else if (params.row.userEnums == "STORE") {
-                m = "[店铺]";
-              } else {
-                m = "[会员]";
-              }
-              m += params.row.createBy;
-              return h("span", m);
-            },
-          },
-          {
-            title: "操作",
-            key: "action",
-            align: "center",
-            fixed: "right",
-            // width: 300,
-            render: (h, params) => {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                      marginRight: "5px",
-                      display: this.selectImage === true ? "inline-block" : "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.selectedParams(params.row);
-                      },
-                    },
-                  },
-                  "选择"
-                ),
-                h(
-                  "span",
-                  {
-                    style: {
-                      margin: "0 8px",
-                      color: "#dcdee2",
-                      display: this.selectImage === true ? "inline-block" : "none",
-                    },
-                  },
-                  "|"
-                ),
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                      marginRight: "5px",
-                      display: this.selectImage == true ? "none" : "inline-block",
-                    },
-                    on: {
-                      click: () => {
-                        this.download(params.row);
-                      },
-                    },
-                  },
-                  "下载"
-                ),
-                h(
-                  "span",
-                  {
-                    style: {
-                      margin: "0 8px",
-                      color: "#dcdee2",
-                      display: this.selectImage == true ? "none" : "inline-block",
-                    },
-                  },
-                  "|"
-                ),
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                      display: this.selectImage == true ? "none" : "inline-block",
-                    },
-                    on: {
-                      click: () => {
-                        this.remove(params.row);
-                      },
-                    },
-                  },
-                  "删除"
-                ),
-              ]);
-            },
-          },
-        ],
-        viewColumns: [
-          {
-            title: "缩略图(点击预览)",
-            key: "url",
-            // width: 150,
-            align: "center",
-            render: (h, params) => {
-              if (params.row.fileType.includes("image") > 0) {
-                return h("img", {
-                  attrs: {
-                    src: params.row.url || "",
-                    alt: "加载图片失败",
-                  },
-                  style: {
-                    cursor: "pointer",
-                    width: "80px",
-                    height: "60px",
-                    margin: "10px 0",
-                    "object-fit": "contain",
-                  },
-                  on: {
-                    click: () => {
-                      this.showPic(params.row);
-                    },
-                  },
-                });
-              } else if (params.row.fileType.includes("video") > 0) {
-                // 如果视频文件大小超过5MB不予加载video
-                if (params.row.fileSize < 1024 * 1024 * 5) {
-                  return h(
-                    "video",
-                    {
-                      style: {
-                        cursor: "pointer",
-                        width: "80px",
-                        height: "60px",
-                        margin: "10px 0",
-                        "object-fit": "contain",
-                      },
-                      on: {
-                        click: () => {
-                          this.showVideo(params.row);
-                        },
-                      },
-                    },
-                    [
-                      h("source", {
-                        attrs: {
-                          src: params.row.url,
-                        },
-                      }),
-                    ]
-                  );
-                } else {
-                  return h("img", {
-                    attrs: {
-                      src: require("@/assets/play.png"),
-                    },
-                    style: {
-                      cursor: "pointer",
-                      width: "80px",
-                      height: "60px",
-                      margin: "10px 0",
-                      "object-fit": "contain",
-                    },
-                    on: {
-                      click: () => {
-                        this.showVideo(params.row);
-                      },
-                    },
-                  });
-                }
-              } else {
-                return h("span", "非多媒体类型");
-              }
-            },
-          },
-          {
-            title: "上传者",
-            key: "createBy",
-            width: 120,
-            sortable: true,
-            render: (h, params) => {
-              let m = "";
-              if (params.row.userEnums == "MANAGER") {
-                m = "[管理员]";
-              } else if (params.row.userEnums == "STORE") {
-                m = "[店铺]";
-              } else {
-                m = "[会员]";
-              }
-              m += params.row.createBy;
-              return h("span", m);
-            },
-          },
-          {
-            title: "操作",
-            key: "action",
-            align: "center",
-            fixed: "right",
-            width: 300,
-            render: (h, params) => {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                      marginRight: "5px",
-                      display: this.selectImage === true ? "inline-block" : "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.selectedParams(params.row);
-                      },
-                    },
-                  },
-                  "选择"
-                )
-              ]);
-            },
-          },
-        ],
-        data: [], // 表单数据
-        total: 0, // 表单数据总数
-        pageSizeOpts: [5, 10, 20], // 页码展示项
-        list: [], // 列表
-        //树结构
-        treeData: [],
-        treeDataDefault: [],
-        selectedGroupData: "",
-        insertOrUpdate: "insert",
-        groupLoading: false,
-        // 图片列表
-        selectedOss: [],
-        myData: [
-          {
-            title: 'parent 1',
-            expand: true,
-            render: (h, { root, node, data }) => {
-              return h('span', {style: {display: 'inline-block', width: '100%'}}, [
-                h('span', [h("Icon", {type: 'ios-folder-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
-                h('span', {style: {display: 'inline-block', float: 'right', marginRight: '32px'}},
-                  [h("Button", {...this.buttonProps, icon: 'ios-add', type: 'primary', style: {width: '64px'}, onClick: () => { this.append(data) }})
-                  ])
-              ]);
-            },
-            children: [
-              {title: 'child 1-1', expand: true, children: [{title: 'leaf 1-1-1', expand: true}, {title: 'leaf 1-1-2', expand: true}]},
-              {title: 'child 1-2', expand: true, children: [{title: 'leaf 1-2-1', expand: true}, {title: 'leaf 1-2-1', expand: true}]}
-            ]
-          }
-        ],
-        buttonProps: {type: 'default', size: 'small',},
+        directoryPath: this.searchForm.fileDirectoryId,
+        userEnums: this.activeRoleTab,
+        directoryType: this.activeRoleTab,
       };
     },
-    watch: {
-      selectImage(val) {
-        if (val && !this.data.length) this.init();
-      },
-      choose(val) {
-        if (val) this.selectImage = val
-      },
-      selectedOss(val) {
-        if (val && val.length > 0 && val[val.length-1].split(',')[1]) {
-          this.$emit("callback", {url: val[val.length-1].split(',')[1]});
-        }
+  },
+
+  methods: {
+    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]);
       }
     },
-
-    methods: {
-      onMouseOver(item, index) {
-        this.$set(this.data[index], 'isShowPreview', true);
-        this.$forceUpdate();
-      },
-      onMouseOut(item, index) {
-        this.$set(this.data[index], 'isShowPreview', false);
-      },
-      // 复选框值改变时触发
-      selectOssChange(e) {
-        if (e) {
-          this.selectList = e.map(item => {return { id: item.split(',')[0]}});
-          this.selectCount = e.length;
-          // let size = 0;
-          // e.forEach((item) => {size += item.fileSize * 1.0;});
-          // this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-          this.$emit("selected", e);
+    onTreeDropdownCommand(cmd, data) {
+      this.selectedGroupData = data;
+      if (cmd === "edit") {
+        this.handleContextMenuEdit(null, null, data);
+      } else if (cmd === "delete") {
+        this.handleContextMenuDelete();
+      }
+    },
+    onMouseOver(item, index) {
+      this.data[index].isShowPreview = true;
+      this.$forceUpdate();
+    },
+    onMouseOut(item, index) {
+      this.data[index].isShowPreview = false;
+    },
+    handleRoleTabChange(name) {
+      this.activeRoleTab = name;
+      this.searchForm.pageNumber = 1;
+      this.searchForm.userEnums = name;
+      delete this.searchForm.fileDirectoryId;
+      this.selectedGroupData = "";
+      this.defaultValue = [];
+      this.groupFormValidate.id = [];
+      this.groupFormValidate.level = 0;
+      this.selectedOss = [];
+      this.updateTreeDataByRole();
+      this.getDataList();
+    },
+    updateTreeDataByRole() {
+      const currentTree = this.filterTreeByRole(this.treeDataDefault, this.activeRoleTab);
+      this.treeData = [
+        {
+          title: "全部图片",
+          label: "全部分类",
+          value: "0",
+          type: this.activeRoleTab,
+          level: 0,
+          children: currentTree,
+          id: "0",
+          categoryId: 0,
+        },
+      ];
+    },
+    filterTreeByRole(tree = [], role) {
+      if (!tree || !tree.length) return [];
+      return tree.reduce((arr, item) => {
+        const children = this.filterTreeByRole(item.children || [], role);
+        if (item.type === role || children.length) {
+          arr.push({
+            ...item,
+            children,
+          });
         }
-      },
-      // 页码改变时回调
-      pageChange(value) {
-        this.$set(this, 'selectedOss', []);
-        this.searchForm.pageNumber = value;
-        this.getDataList();
-      },
-      // 自定义tree节点显示内容和交互
-      renderContent (h, { root, node, data }) {
+        return arr;
+      }, []);
+    },
+    // 复选框值改变时触发
+    selectOssChange(e) {
+      if (e) {
+        this.selectList = e.map(item => {
+          return {id: item.split(',')[0]}
+        });
+        this.selectCount = e.length;
+        // let size = 0;
+        // e.forEach((item) => {size += item.fileSize * 1.0;});
+        // this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+        this.$emit("selected", e);
+      }
+    },
+    // 页码改变时回调
+    pageChange(value) {
+      this.selectedOss = [];
+      this.searchForm.pageNumber = value;
+      this.getDataList();
+    },
+    // 自定义tree节点显示内容和交互
+    renderContent(h, {root, node, data}) {
+      if (data.value === '0') {
+        return h('span', {style: {display: 'inline-block', width: '100%'}},
+          [
+            h('span', [h("Icon", {type: 'ios-paper-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
+            h('span', {style: {display: 'inline-block', float: 'right', marginRight: '10px'}}, [])
+          ]
+        );
+      } else {
         return h('span', {style: {display: 'inline-block', width: '100%'}},
           [
             h('span', [h("Icon", {type: 'ios-paper-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
@@ -909,444 +1093,459 @@
               [
                 h("Dropdown", {style: {marginLeft: "4px"}},
                   [
-                    h("Icon", {props: {type: 'ios-more', size: "20",}, style: {display: 'inline-block'}, on:{click: () => {}}}),
-                    h("DropdownMenu", {slot: "list"
+                    h("Icon", {
+                      props: {type: 'ios-more', size: "20",},
+                      style: {display: 'inline-block'},
+                      on: {
+                        click: () => {
+                        }
+                      }
+                    }),
+                    h("DropdownMenu", {
+                      slot: "list"
                     }, [
-                      h("DropdownItem", { nativeOn:{click: () => {this.handleContextMenuEdit()}} }, "编辑"),
-                      h("DropdownItem", { nativeOn:{click: () => {this.handleContextMenuDelete()}} }, "删除"),
+                      h("DropdownItem", {
+                        nativeOn: {
+                          click: () => {
+                            this.handleContextMenuEdit(root, node, data)
+                          }
+                        }
+                      }, "编辑"),
+                      h("DropdownItem", {
+                        nativeOn: {
+                          click: () => {
+                            this.handleContextMenuDelete()
+                          }
+                        }
+                      }, "删除"),
                     ])
                   ]),
               ])
-          ]);
-      },
-
-
-
-
-      handleContextMenu(val) {
-        console.log('handleContextMenu', val);
-        this.selectedGroupData = val;
-      },
-      // 编辑分组
-      handleContextMenuEdit(val) {
-        this.insertOrUpdate = "update";
-
-        this.enableGroup = true;
-        // this.groupFormValidate = this.selectedGroupData;
-
-        this.groupFormValidate.directoryName = this.selectedGroupData.title;
-        this.groupFormValidate.id = [this.selectedGroupData.value];
-        this.groupFormValidate.level = this.selectedGroupData.level;
-
-        this.groupFormValidate.parentId = this.selectedGroupData.parentId;
-      },
-      // 删除分组
-      async handleContextMenuDelete(val) {
-        this.$Modal.confirm({
-          title: "提示",
-          content: "是否删除该分组",
-          onOk: async () => {
-            const res = await delFileDirectory(this.selectedGroupData.value);
-            if (res.success) {
-              this.$Message.success("删除成功!");
-              this.getDataList();
-              this.getAllList();
-            }
-          },
-        });
-      },
-      treeDataChange(value, selectedData) {
-        if (value && value.length) {
-          if (value[value.length -1] == '0') {
-            this.groupFormValidate.level = 0;
-          } else {
-            this.groupFormValidate.level = Number(selectedData[selectedData.length -1].level) + 1;
-          }
-        }
-      },
-      // 保存/修改分组
-      async submitAddGroup() {
-        this.$refs["formValidate"].validate(async (valid) => {
-          if (valid) {
-            let res
-            const params = { ...this.groupFormValidate };
-
-            if (this.insertOrUpdate === "insert") {
-              // params.directoryType = this.selectedGroupData.directoryType
-              params.parentId = params.id[params.id.length - 1];
-              // params.type = this.selectedGroupData.type
-              delete params.id;
-              res = await addFileDirectory(params);
-            } else {
-              params.id = params.id[params.id.length - 1];
-              res = await updateFileDirectory(params);
-            }
-
-            if (res.success) {
-              this.$Message.success("操作成功!");
-              this.enableGroup = false;
-              this.getAllList();
-            }
-            this.$Modal.remove();
-          } else {
-            this.$Message.error("请填写完整信息!");
-          }
-        });
-      },
-      // 添加/修改分组
-      handleClickAddGroup() {
-        this.insertOrUpdate = "insert";
-        if (this.selectedGroupData) {
-          this.groupFormValidate.id = [this.selectedGroupData.value];
-        } else {
-          this.groupFormValidate.id = ["0"];
-        }
-        this.enableGroup = true;
-        this.groupFormValidate.directoryName = "";
-      },
-      copyFileUrl(row) {
-        const textArea = document.createElement("textarea");
-        textArea.value = row.url;
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-        try {
-          document.execCommand("copy");
-          this.$Message.success("复制成功");
-        } catch (err) {
-          console.error("Unable to copy to clipboard", err);
-        }
-        document.body.removeChild(textArea);
-      },
-
-      // 获取全部文件目录
-      getAllList(parent_id) {
-        this.loading = true;
-        getFileDirectory(parent_id).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.treeData = this.getTree(res.result);
-            this.treeDataDefault = this.getTree(res.result);
-            this.treeData.unshift({
-              title: "全部图片",
-              label: "全部分类",
-              value: "0",
-              level: 0,
-              children: [],
-              id: "0",
-              categoryId: 0,
-            });
-          }
-        });
-      },
-      // 文件目录分类格式化方法
-      getTree(tree = []) {
-        let arr = [];
-        if (!!tree && tree.length !== 0) {
-          tree.forEach((item) => {
-            let obj = {};
-            obj.title = item.directoryName;
-            obj.value = item.id; // 拥有者id
-            obj.type = item.directoryType; // 用户类型
-            obj.label = item.directoryName;
-            obj.level = item.level;
-            obj.expand = false;
-            obj.selected = false;
-            obj.contextmenu = false;
-            obj.parentId = item.parentId;
-            obj.children = this.getTree(item.children); // 递归调用
-            arr.push(obj);
-          });
-        }
-        return arr;
-      },
-
-      // 选择分类回调
-      handleCateChange(data) {
-        if (data && data.length > 0) {
-          this.selectedGroupData = data[0];
-          let {value, type, level} = data[0];
-          this.list.push({value, type, level});
-          this.searchForm.fileDirectoryId = value;
-          if (value === "0" || value === 0) {
-            delete this.searchForm.fileDirectoryId;
-            this.groupFormValidate.level = 0;
-          } else {
-            this.groupFormValidate.level = Number(level) + 1;
-          }
-          this.searchForm.userEnums = type;
-          this.getDataList();
-          this.$set(this, 'selectedOss', []);
-        }
-      },
-      /**
-       * 选择
-       */
-      selectedParams(val) {
-        this.$emit("callback", val);
-      },
-      // 更多操作
-      handleDropdown(name) {
-        if (name === "refresh") {
-          this.getDataList('refresh');
-        } else if (name === "removeAll") {
-          this.removeAll();
-        }
-      },
-      // 初始化数据
-      init() {
-        this.accessToken = {
-          accessToken: this.getStore("accessToken"),
-        };
-        this.getDataList();
-        this.getAllList();
-      },
-      // 查看大图
-      showPic(v) {
-        this.file = v;
-        this.file.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-
-        this.picTitle = v.name + "(" + v.fileKey + ")";
-        this.picVisible = true;
-      },
-      // 查看视频
-      showVideo(v) {
-        dp = new DPlayer({
-          container: document.getElementById("dplayer"),
-          screenshot: true,
-          video: {
-            url: v.url,
-          },
-        });
-        this.file = v;
-        this.file.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-        this.videoTitle = v.name + "(" + v.fileKey + ")";
-        this.videoVisible = true;
-      },
-      // 关闭视频
-      closeVideo() {
-        dp.destroy();
-      },
-      // 分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-        this.clearSelectAll();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      // 排序
-      changeSort(e) {
-        this.searchForm.sort = e.key;
-        this.searchForm.order = e.order;
-        if (e.order == "normal") {
-          this.searchForm.order = "";
-        }
-        this.getDataList();
-      },
-      // 起止时间从新赋值
-      selectDateRange(v) {
-        if (v) {
-          this.searchForm.startDate = v[0];
-          this.searchForm.endDate = v[1];
-        }
-      },
-      // 改变查看方式
-      changeShowType() {
-        this.searchForm.pageNumber = 1;
-        if (this.showType == "list") {
-          this.searchForm.pageSize = 10;
-        } else {
-          this.searchForm.pageSize = 12;
-        }
-        this.getDataList();
-      },
-      // 获取列表数据
-      getDataList(type = null) {
-        if (this.showType == "list") {
-          this.pageSizeOpts = [10, 20, 50];
-        } else {
-          this.pageSizeOpts = [12, 24, 48];
-        }
-        this.loading = true;
-        getFileListData(this.searchForm).then((res) => {
-          this.loading = false;
-
-          this.data = res.result.records;
-          this.total = res.result.total;
-          if (type === 'refresh') {
-            this.$Message.success('刷新成功！');
-          }
-        });
-      },
-      // 搜索
-      handleSearch() {
-        this.searchForm.title = this.searchForm.name;
-        this.searchForm.pageNumber = 1;
-        if (this.showType == "list") {
-          this.searchForm.pageSize = 5;
-        } else {
-          this.searchForm.pageSize = 12;
-        }
-        this.getDataList();
-      },
-      // 文件类型筛选
-      changeFileType() {
-        let name = this.fileType;
-        if (name == "all") {
-          this.searchForm.fileType = "";
-        } else if (name == "pic") {
-          this.searchForm.fileType = "image";
-        } else if (name == "video") {
-          this.searchForm.fileType = "video";
-        }
-        this.handleSearch();
-      },
-      // 上传文件超过大小限制
-      handleMaxSize(file) {
-        this.$Notice.warning({
-          title: "文件大小过大",
-          desc: "所选文件大小过大, 不得超过 1M.",
-        });
-      },
-      // 上传成功回调
-      handleSuccess(res, file) {
-        if (res.success) {
-          this.$Message.success("上传文件 " + file.name + " 成功");
-          this.getDataList();
-        } else {
-          this.$Message.error(res.message);
-        }
-      },
-      // 上传失败回调
-      handleError(error, file, fileList) {
-        this.$Message.error(error.toString());
-      },
-      // 清空上传文件
-      clearFiles() {
-        this.$refs.up.clearFiles();
-      },
-      // 取消修改文件名
-      handleCancel() {
-        this.modalVisible = false;
-      },
-      // 下载文件
-      download(v) {
-        window.open(
-          v.url + "?attname=&response-content-type=application/octet-stream"
+          ]
         );
-      },
-      // 批量删除文件
-      removeAll() {
-        if (this.selectCount <= 0) {
-          this.$Message.warning("您还未选择要删除的数据");
-          return;
-        }
-        this.$Modal.confirm({
-          title: "确认删除",
-          content: "您确认要删除所选的 " + this.selectCount + " 个文件?",
-          loading: true,
-          onOk: () => {
-            let ids = "";
-            this.selectList.forEach(function (e) {ids += e.id + ",";});
-            ids = ids.substring(0, ids.length - 1);
-            deleteFile(ids).then((res) => {
-              this.$Modal.remove();
-              if (res.success) {
-                this.$set(this, 'selectedOss', []);
-                // this.clearSelectAll();
-                this.init();
-                this.$Message.success("批量删除文件成功");
-              }
-            })
-              .catch((err) => {
-                console.log("失败", err);
-              });
-          },
-        });
-      },
-      // 单个删除文件
-      remove(v) {
-        this.$Modal.confirm({
-          title: "确认删除",
-          content: "您确认要删除文件 " + v.name + " ?",
-          loading: true,
-          onOk: () => {
-            deleteFile(v.id).then((res) => {
-              this.$Modal.remove();
-              if (res.success) {
-                this.$Message.success("删除文件 " + v.name + " 成功");
-                this.getDataList();
-              }
-            })
-          },
-        });
-      },
-      // 提交修改文件名
-      handleSubmit() {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            this.submitLoading = true;
-            let params = {
-              id: this.form.id,
-              key: this.oldKey,
-              newKey: this.form.fileKey,
-              newName: this.form.name,
-            };
-            renameFile(params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("操作成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
-          }
-        });
-      },
-      // 修改文件名modal
-      rename(v) {
-        this.modalTitle = "编辑文件名";
-        // 转换null为""
-        for (let attr in v) {
-          if (v[attr] == null) {
-            v[attr] = "";
-          }
-        }
-        let str = JSON.stringify(v);
-        let data = JSON.parse(str);
-        this.form = data;
-        this.oldKey = data.fileKey;
-        this.modalVisible = true;
-      },
-      // 清除选中状态
-      clearSelectAll() {
-        this.$refs.table.selectAll(false);
-        this.totalSize = "";
-      },
-      // 选中回调
-      changeSelect(e) {
-        this.selectList = e;
-        this.selectCount = e.length;
-        let size = 0;
-        e.forEach((item) => {
-          size += item.fileSize * 1.0;
-        });
-        this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-        this.$emit("selected", e)
-      },
+      }
+
     },
-    mounted() {
-      if (!this.isComponent) {
-        // 是组件的话，初始化不调用接口
-        this.init();
-      } else {
-        this.searchForm.pageSize =18; // 页面大小
+
+
+    handleContextMenu(val) {
+      console.log('handleContextMenu', val);
+      this.selectedGroupData = val;
+    },
+    // 编辑分组
+    handleContextMenuEdit(root, node, data) {
+      this.insertOrUpdate = "update";
+      this.enableGroup = true;
+      this.groupFormValidate.directoryName = data.label;
+      this.groupFormValidate.id = [data.value];
+      this.groupFormValidate.level = data.level;
+      this.groupFormValidate.parentId = data.parentId;
+      this.defaultValue = [data.parentId];
+    },
+    // 删除分组
+    async handleContextMenuDelete(val) {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "是否删除该分组",
+        onOk: async () => {
+          const res = await delFileDirectory(this.selectedGroupData.value);
+          if (res.success) {
+            this.$Message.success("删除成功!");
+            this.getDataList();
+            this.getAllList();
+          }
+        },
+      });
+    },
+    treeDataChange(value) {
+      if (value && value.length) {
+        this.groupFormValidate.id = value;
+        if (value[value.length - 1] == "0") {
+          this.groupFormValidate.level = 0;
+        } else {
+          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) => {
+        if (valid) {
+          let res
+          const params = {...this.groupFormValidate};
+          params.directoryType = (this.selectedGroupData && this.selectedGroupData.type) || this.activeRoleTab;
+          if (this.insertOrUpdate === "insert") {
+            params.parentId = params.id[params.id.length - 1];
+            delete params.id;
+            res = await addFileDirectory(params);
+          } else {
+            params.id = params.id[params.id.length - 1];
+            params.parentId = params.parentId[params.parentId.length - 1];
+            res = await updateFileDirectory(params);
+          }
+
+          if (res.success) {
+            this.$Message.success("操作成功!");
+            this.enableGroup = false;
+            this.getAllList();
+          }
+          this.$Modal.remove();
+        } else {
+          this.$Message.error("请填写完整信息!");
+        }
+      });
+    },
+    // 添加/修改分组
+    handleClickAddGroup() {
+      this.insertOrUpdate = "insert";
+      if (this.selectedGroupData) {
+        this.groupFormValidate.id = [this.selectedGroupData.value];
+      } else {
+        this.groupFormValidate.id = ["0"];
+      }
+      this.enableGroup = true;
+      this.groupFormValidate.directoryName = "";
+    },
+    copyFileUrl(row) {
+      const textArea = document.createElement("textarea");
+      textArea.value = row.url;
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      try {
+        document.execCommand("copy");
+        this.$Message.success("复制成功");
+      } catch (err) {
+        console.error("Unable to copy to clipboard", err);
+      }
+      document.body.removeChild(textArea);
+    },
+
+    // 获取全部文件目录
+    getAllList(parent_id) {
+      this.loading = true;
+      getFileDirectory(parent_id).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.treeDataDefault = this.getTree(res.result);
+          this.updateTreeDataByRole();
+        }
+      });
+    },
+    // 文件目录分类格式化方法
+    getTree(tree = []) {
+      let arr = [];
+      if (!!tree && tree.length !== 0) {
+        tree.forEach((item) => {
+          let obj = {};
+          obj.title = item.directoryName;
+          obj.value = item.id; // 拥有者id
+          obj.type = item.directoryType; // 用户类型
+          obj.label = item.directoryName;
+          obj.level = item.level;
+          obj.expand = false;
+          obj.selected = false;
+          obj.contextmenu = false;
+          obj.parentId = item.parentId;
+          obj.children = this.getTree(item.children); // 递归调用
+          arr.push(obj);
+        });
+      }
+      return arr;
+    },
+
+    // 选择分类回调
+    handleCateChange(data) {
+      if (data) {
+        this.selectedGroupData = data[0];
+        let {value, type, level} = data[0];
+        this.list.push({value, type, level});
+        this.searchForm.fileDirectoryId = value;
+        if (value === "0" || value === 0) {
+          delete this.searchForm.fileDirectoryId;
+          this.groupFormValidate.level = 0;
+        } else {
+          this.groupFormValidate.level = Number(level) + 1;
+        }
+        this.searchForm.userEnums = type || this.activeRoleTab;
+        this.getDataList();
+        this.selectedOss = [];
+      }
+    },
+    /**
+     * 选择
+     */
+    selectedParams(val) {
+      this.$emit("callback", val);
+    },
+    // 初始化数据
+    init() {
+      this.accessToken = {
+        accessToken: this.getStore("accessToken"),
+      };
+      this.searchForm.userEnums = this.activeRoleTab;
+      this.getDataList();
+      this.getAllList();
+    },
+    // 查看大图
+    showPic(v) {
+      this.file = v;
+      this.file.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+
+      this.picTitle = v.name + "(" + v.fileKey + ")";
+      this.picVisible = true;
+    },
+    // 查看视频
+    showVideo(v) {
+      dp = new DPlayer({
+        container: document.getElementById("dplayer"),
+        screenshot: true,
+        video: {
+          url: v.url,
+        },
+      });
+      this.file = v;
+      this.file.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+      this.videoTitle = v.name + "(" + v.fileKey + ")";
+      this.videoVisible = true;
+    },
+    // 关闭视频
+    closeVideo() {
+      dp.destroy();
+    },
+    // 分页 改变页码
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+      this.clearSelectAll();
+    },
+    // 分页 改变页数
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    // 排序
+    changeSort(e) {
+      this.searchForm.sort = e.key;
+      this.searchForm.order = e.order;
+      if (e.order == "normal") {
+        this.searchForm.order = "";
+      }
+      this.getDataList();
+    },
+    // 起止时间从新赋值
+    selectDateRange(v) {
+      if (v && v.length === 2) {
+        this.searchForm.startDate = v[0];
+        this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
+      }
+    },
+    // 改变查看方式
+    changeShowType() {
+      this.searchForm.pageNumber = 1;
+      if (this.showType == "list") {
+        this.searchForm.pageSize = 20;
+      } else {
+        this.searchForm.pageSize = 12;
+      }
+      this.getDataList();
+    },
+    // 获取列表数据
+    getDataList(type = null) {
+      if (this.showType == "list") {
+        this.pageSizeOpts = [10, 20, 50];
+      } else {
+        this.pageSizeOpts = [12, 24, 48];
+      }
+      this.loading = true;
+      getFileListData(this.searchForm).then((res) => {
+        this.loading = false;
+
+        this.data = res.result.records;
+        this.total = res.result.total;
+      });
+    },
+    // 搜索
+    handleSearch() {
+      this.searchForm.title = this.searchForm.name;
+      this.searchForm.pageNumber = 1;
+      if (this.showType == "list") {
+        this.searchForm.pageSize = 20;
+      } else {
+        this.searchForm.pageSize = 12;
+      }
+      this.getDataList();
+    },
+    // 文件类型筛选
+    changeFileType() {
+      let name = this.fileType;
+      if (name == "all") {
+        this.searchForm.fileType = "";
+      } else if (name == "pic") {
+        this.searchForm.fileType = "image";
+      } else if (name == "video") {
+        this.searchForm.fileType = "video";
+      }
+      this.handleSearch();
+    },
+    // 上传文件超过大小限制
+    handleMaxSize() {
+      this.$Message.warning("所选文件大小过大，不得超过 20MB");
+    },
+    // 上传成功回调
+    handleSuccess(res, file) {
+      if (!this.canUploadImages) {
+        this.$Message.warning("仅管理员模块支持上传图片");
+        return;
+      }
+      if (res.success) {
+        this.$Message.success("上传文件 " + file.name + " 成功");
+        this.getDataList();
+      } else {
+        this.$Message.error(res.message);
+      }
+    },
+    // 上传失败回调
+    handleError(error, file, fileList) {
+      this.$Message.error(error.toString());
+    },
+    // 清空上传文件
+    clearFiles() {
+      this.$refs.up.clearFiles();
+    },
+    // 取消修改文件名
+    handleCancel() {
+      this.modalVisible = false;
+    },
+    // 下载文件
+    download(v) {
+      window.open(
+        v.url + "?attname=&response-content-type=application/octet-stream"
+      );
+    },
+    // 批量删除文件
+    removeAll() {
+      if (this.selectCount <= 0) {
+        this.$Message.warning("您还未选择要删除的数据");
+        return;
+      }
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除所选的 " + this.selectCount + " 个文件?",
+        loading: true,
+        onOk: () => {
+          let ids = "";
+          this.selectList.forEach(function (e) {
+            ids += e.id + ",";
+          });
+          ids = ids.substring(0, ids.length - 1);
+          deleteFile(ids).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.selectedOss = [];
+              // this.clearSelectAll();
+              this.init();
+              this.$Message.success("批量删除文件成功");
+            }
+          })
+            .catch((err) => {
+              console.log("失败", err);
+            });
+        },
+      });
+    },
+    // 单个删除文件
+    remove(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除文件 " + v.name + " ?",
+        loading: true,
+        onOk: () => {
+          deleteFile(v.id).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除文件 " + v.name + " 成功");
+              this.getDataList();
+            }
+          })
+        },
+      });
+    },
+    // 提交修改文件名
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+          let params = {
+            id: this.form.id,
+            key: this.oldKey,
+            newKey: this.form.fileKey,
+            newName: this.form.name,
+          };
+          renameFile(params).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getDataList();
+              this.modalVisible = false;
+            }
+          });
+        }
+      });
+    },
+    // 修改文件名modal
+    rename(v) {
+      this.modalTitle = "编辑文件名";
+      // 转换null为""
+      for (let attr in v) {
+        if (v[attr] == null) {
+          v[attr] = "";
+        }
+      }
+      let str = JSON.stringify(v);
+      let data = JSON.parse(str);
+      this.form = data;
+      this.oldKey = data.fileKey;
+      this.modalVisible = true;
+    },
+    // 清除选中状态
+    clearSelectAll() {
+      this.$refs.table.selectAll(false);
+      this.totalSize = "";
+    },
+    // 选中回调
+    changeSelect(e) {
+      this.selectList = e;
+      this.selectCount = e.length;
+      let size = 0;
+      e.forEach((item) => {
+        size += item.fileSize * 1.0;
+      });
+      this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+      this.$emit("selected", e)
+    },
+  },
+  mounted() {
+    if (!this.isComponent) {
+      // 是组件的话，初始化不调用接口
+      this.init();
+    } else {
+      this.searchForm.pageSize = 18; // 页面大小
+    }
+  },
+};
 </script>
diff --git a/seller/src/views/shop/ossManages.vue b/seller/src/views/shop/ossManages.vue
index 3aab58bc..d92ed4af 100644
--- a/seller/src/views/shop/ossManages.vue
+++ b/seller/src/views/shop/ossManages.vue
@@ -1,361 +1,601 @@
 <style lang="scss">
-  // 建议引入通用样式 可删除下面样式代码
-  @import "@/styles/table-common.scss";
-  @import "./ossManage.scss";
+@import "./ossManage.scss";
+
+.group-row {
+  padding-top: 10px;
+  border-top: 1px solid #ededed;
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > * {
+    margin-right: 10px;
+  }
+}
+
+.article-category {
+  flex: 2;
+  min-width: 200px;
+}
+
+.table {
+  flex: 11;
+}
+
+.el-card {
+  width: 100%;
+}
+
+.modal-footer {
+  text-align: center;
+
+  > * {
+    margin: 0 10px;
+  }
+}
+
+.tab-empty {
+  padding: 48px 0;
+  color: #999;
+  text-align: center;
+}
+
+.tabs-card {
+  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">
-    <Row>
-      <Card>
-        <div class="operation">
-          <Row @keydown.enter.native="handleSearch">
-            <Form ref="searchForm" :label-width="85" :model="searchForm" class="search-form" inline>
-              <Form-item label="上传时间">
-                <DatePicker v-model="selectDate" clearable format="yyyy-MM-dd" placeholder="选择起始时间" style="width: 200px" type="daterange" @on-change="selectDateRange"></DatePicker>
-              </Form-item>
-              <Button class="search-btn" icon="ios-search" type="primary" @click="handleSearch">搜索
-              </Button>
-            </Form>
-          </Row>
-
-          <Row class="oss-manage-box">
-            <Col :span="isComponent?5:4">
+    <el-card class="tabs-card">
+      <el-tabs v-model="activeRoleTab" @tab-change="handleRoleTabChange">
+        <el-tab-pane label="商家" name="STORE" />
+      </el-tabs>
+    </el-card>
+    <el-row>
+      <el-card>
+        <div>
+          <div class="operation">
+            <el-row @keyup.enter="handleSearch">
+              <el-form
+                ref="searchForm"
+                label-width="85px"
+                :model="searchForm"
+                class="search-form"
+                inline
+              >
+                <el-form-item label="上传时间">
+                  <el-date-picker
+                    v-model="selectDate"
+                    clearable
+                    value-format="YYYY-MM-DD"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    style="width: 240px"
+                    type="daterange"
+                    @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>
+          <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="isComponent?19:20">
+            </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="{
-                  directoryPath: searchForm.fileDirectoryId,
-                }"
+                        :data="uploadData"
                         :headers="accessToken"
-                        :max-size="20480"
+                        :before-upload="beforeUpload"
                         :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>
-                      <Dropdown @on-click="handleDropdown" v-if="!isComponent">
-                        <Button>
-                          更多操作
-                          <Icon type="md-arrow-dropdown"/>
-                        </Button>
-                        <DropdownMenu slot="list">
-                          <DropdownItem name="refresh">刷新</DropdownItem>
-                          <DropdownItem v-show="showType == 'list'" name="removeAll"
-                          >批量删除
-                          </DropdownItem>
-                        </DropdownMenu>
-                      </Dropdown>
+                        <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">
-                            <div class="text" @click="copyFileUrl(item)">{{item.name}}</div>
-                          </Tooltip>
+                          <el-tooltip :content="item.name" placement="bottom">
+                            <div class="text">{{ item.name }}</div>
+                          </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">-->
+          <!--<div>-->
+          <!--<Upload-->
+          <!--ref="up"-->
+          <!--:action="commonUrl + '/common/common/upload/file'"-->
+          <!--:data="{-->
+          <!--directoryPath: searchForm.fileDirectoryId,-->
+          <!--}"-->
+          <!--:headers="accessToken"-->
+          <!--:max-size="20480"-->
+          <!--:on-error="handleError"-->
+          <!--:on-exceeded-size="handleMaxSize"-->
+          <!--:on-success="handleSuccess"-->
+          <!--:show-upload-list="false"-->
+          <!--multiple-->
+          <!--style="display: inline-block"-->
+          <!--&gt;-->
+          <!--<el-button>上传图片</el-button>-->
+          <!--</Upload>-->
+          <!--<Dropdown @click="handleDropdown" v-if="!isComponent">-->
+          <!--<el-button>-->
+          <!--更多操作-->
+          <!--<Icon type="md-arrow-dropdown"/>-->
+          <!--</el-button>-->
+          <!--<DropdownMenu #list>-->
+          <!--<DropdownItem name="refresh">刷新</DropdownItem>-->
+          <!--<DropdownItem v-show="showType == 'list'" name="removeAll"-->
+          <!--&gt;批量删除-->
+          <!--</DropdownItem>-->
+          <!--</DropdownMenu>-->
+          <!--</Dropdown>-->
+          <!--</div>-->
+          <!--</div>-->
         </div>
 
-      </Card>
-    </Row>
-    <Modal
-      v-model="modalVisible"
-      :mask-closable="false"
-      :title="modalTitle"
-      :width="500"
-    >
-      <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>
+        <!--<Alert show-icon v-if="!isComponent">-->
+        <!--已选择-->
+        <!--<span>{{ selectCount }}</span> 项-->
+        <!--<a class="select-clear" @click="clearSelectAll">清空</a>-->
+        <!--<span v-if="selectCount > 0" style="margin-left: 15px"-->
+        <!--&gt;共计 {{ totalSize }} 存储量</span-->
+        <!--&gt;-->
+        <!--</Alert>-->
 
-    <Modal v-model="picVisible" :title="picTitle" draggable>
+        <!--<div v-show="showType === 'list'" >-->
+        <!--<div class="flex">-->
+        <!--<div class="article-category mr_10">-->
+        <!--<Tree-->
+        <!--:data="treeData"-->
+        <!--@on-contextmenu="handleContextMenu"-->
+        <!--@on-select-change="handleCateChange"-->
+        <!--&gt;-->
+        <!--<template #contextMenu v-if="!isComponent">-->
+        <!--<DropdownItem @click.native="handleContextMenuEdit"-->
+        <!--&gt;编辑-->
+        <!--</DropdownItem-->
+        <!--&gt;-->
+        <!--<DropdownItem-->
+        <!--style="color: #ed4014"-->
+        <!--@click.native="handleContextMenuDelete"-->
+        <!--&gt;删除-->
+        <!--</DropdownItem-->
+        <!--&gt;-->
+        <!--</template>-->
+        <!--</Tree>-->
+        <!--<Alert v-if="!isComponent">鼠标右键编辑/删除分组</Alert>-->
+        <!--<div class="group-row flex" v-if="!isComponent">-->
+        <!--<el-button @click="handleClickAddGroup">添加分组</el-button>-->
+        <!--</div>-->
+        <!--</div>-->
+
+        <!--<Table-->
+        <!--ref="table"-->
+        <!--:columns="isComponent ? viewColumns : columns"-->
+        <!--:data="data"-->
+        <!--:loading="loading"-->
+        <!--border-->
+        <!--class="table"-->
+        <!--sortable="custom"-->
+        <!--@on-sort-change="changeSort"-->
+        <!--@on-selection-change="changeSelect"-->
+        <!--&gt;-->
+        <!--<template #fileKey #default="{ row }">-->
+        <!--<a @click="copyFileUrl(row)">{{ row.fileKey }}</a>-->
+        <!--</template>-->
+        <!--</Table>-->
+        <!--</div>-->
+        <!--</div>-->
+
+        <!--<div v-show="showType === 'thumb'">-->
+        <!--<div class="oss-wrapper">-->
+        <!--<Card v-for="(item, i) in data" :key="i" class="oss-card">-->
+        <!--<div class="content">-->
+        <!--<img-->
+        <!--v-if="item.fileType.indexOf('image') >= 0"-->
+        <!--:src="item.url"-->
+        <!--class="img"-->
+        <!--@click="showPic(item)"-->
+        <!--/>-->
+        <!--<div-->
+        <!--v-else-if="item.fileType.indexOf('video') >= 0"-->
+        <!--class="video"-->
+        <!--@click="showVideo(item)"-->
+        <!--&gt;-->
+        <!--&lt;!&ndash; 文件小于5MB显示video &ndash;&gt;-->
+        <!--<video v-if="item.fileSize < 1024 * 1024 * 5" class="cover">-->
+        <!--<source :src="item.url"/>-->
+        <!--</video>-->
+        <!--<img class="play" src="@/assets/play.png"/>-->
+        <!--</div>-->
+        <!--<div v-else class="other">-->
+        <!--<div class="name">{{ item.name }}</div>-->
+        <!--<div class="key">{{ item.fileKey }}</div>-->
+        <!--<div class="info">-->
+        <!--文件类型：{{ item.fileType }} 文件大小：{{-->
+        <!--((item.fileSize * 1.0) / (1024 * 1024)).toFixed(2)-->
+        <!--}}-->
+        <!--MB 创建时间：{{ item.createTime }}-->
+        <!--</div>-->
+        <!--</div>-->
+        <!--<div class="actions">-->
+        <!--<div class="btn">-->
+        <!--<el-tooltip content="下载" placement="top">-->
+        <!--<Icon-->
+        <!--size="16"-->
+        <!--type="md-download"-->
+        <!--@click="download(item)"-->
+        <!--/>-->
+        <!--</el-tooltip>-->
+        <!--</div>-->
+        <!--<div class="btn">-->
+        <!--<el-tooltip content="重命名" placement="top">-->
+        <!--<Icon size="16" type="md-create" @click="rename(item)"/>-->
+        <!--</el-tooltip>-->
+        <!--</div>-->
+        <!--<div class="btn-no">-->
+        <!--<el-tooltip content="删除" placement="top">-->
+        <!--<Icon size="16" type="md-trash" @click="remove(item)"/>-->
+        <!--</el-tooltip>-->
+        <!--</div>-->
+        <!--</div>-->
+        <!--</div>-->
+        <!--</el-card>-->
+        <!--</div>-->
+        <!--</div>-->
+        <!--<div class="mt_10" justify="end" type="flex">-->
+        <!--<Page-->
+        <!--:current="searchForm.pageNumber"-->
+        <!--:page-size="searchForm.pageSize"-->
+        <!--:page-size-opts="pageSizeOpts"-->
+        <!--:total="total"-->
+        <!--show-elevator-->
+        <!--show-sizer-->
+        <!--show-total-->
+        <!--size="small"-->
+        <!--@change="changePage"-->
+        <!--@size-change="changePageSize"-->
+        <!--&gt;</el-pagination>-->
+        <!--</div>-->
+      </el-card>
+    </el-row>
+    <el-dialog
+      v-model="modalVisible"
+      :close-on-click-modal="false"
+      :title="modalTitle"
+      width="500px"
+      destroy-on-close
+    >
+      <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>
+
+    <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
-            v-model="groupFormValidate.id"
-            :data="treeData"
-            change-on-select
-            @on-change="treeDataChange"
-          ></Cascader>
-        </FormItem>
-        <FormItem label="分组名称" prop="directoryName">
-          <Input v-model="groupFormValidate.directoryName"/>
-        </FormItem>
-      </Form>
+        <el-form-item label="所在分组" prop="id">
+          <el-cascader
+            v-model="defaultValue"
+            :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 {
-    addFileDirectory,
-    deleteFile,
-    delFileDirectory,
-    getFileDirectory,
-    getFileListData,
-    renameFile,
-    updateFileDirectory,
-  } from "@/api/index";
-  import DPlayer from "dplayer";
-  import { commonUrl } from "@/libs/axios";
+import { Delete, Download, View } from "@element-plus/icons-vue";
+import {
+  addFileDirectory,
+  deleteFile,
+  delFileDirectory,
+  getFileDirectory,
+  getFileListData,
+  renameFile,
+  updateFileDirectory,
+} from "@/api/index";
+import DPlayer from "dplayer";
+import {commonUrl} from "@/libs/axios";
 
-  const config = require("@/config/index");
+const config = require("@/config/index");
 
-  let dp;
-  export default {
-    name: "oss-manage",
-    props: {
-      isComponent: {
-        default: false,
-        type: Boolean,
-      },
-      choose: {
-        type: String,
-        default: ""
-      },
-      initialize: {
-        type: Boolean,
-        default: false,
-      },
+let dp;
+export default {
+  name: "oss-manage",
+  components: { Delete, Download, View },
+  props: {
+    isComponent: {
+      default: false,
+      type: Boolean,
     },
-    data() {
-      return {
-        commonUrl, // 上传文件路径
-        config, // api地址
-        fileDirectoryId: "",
-        groupFormValidate: {
-          id: [],
-          level: 0,
-          directoryName: "",
-        },
-        groupRuleValidate: {
-          directoryName: [
-            {
-              required: true,
-              message: "请输入分组名称",
-              trigger: "blur",
-            },
-          ],
-          id: [
-            {
-              required: true,
-              message: "请选择分组",
-              trigger: "blur",
-              type: "array",
-            },
-          ],
-        },
-        enableGroup: false, // 是否展示分组
-        selectImage: false, //是否是选择
-        accessToken: {}, // 上传token鉴权
-        loading: false, // 表单加载状态
-        fileType: "all", // 文件类型
-        showType: "list", // 展示类型
-        modalVisible: false, // 添加或编辑显示
-        uploadVisible: false, // 上传展示
-        videoVisible: false, // 文件modal
-        picVisible: false, // 图片modal
-        picTitle: "", // 图片title
-        videoTitle: "", // 视频title
-        modalTitle: "", // 添加或编辑标题
-        searchForm: {
-          // 搜索框对应data对象
-          name: "",
-          fileKey: "",
-          fileType: "",
-          pageNumber: 1, // 当前页数
-          pageSize: 27, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-        },
-        selectDate: null, // 选择日期绑定modal
-        oldKey: "", // 请求参数
-        form: {
-          // 表单
-          name: "",
-          fileKey: "",
-        },
-        file: {}, // 文件数据
-        // 表单验证规则
-        formValidate: {
-          name: [{required: true, message: "不能为空", trigger: "blur"}],
-          fileKey: [{required: true, message: "不能为空", trigger: "blur"}],
-        },
-        submitLoading: false, // 添加或编辑提交状态
-        selectList: [], // 多选数据
-        selectCount: 0, // 多选计数
-        totalSize: "", // 文件大小统计
-        columns: [
-          // 表头
+    choose: {
+      type: String,
+      default: ""
+    },
+    initialize: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      commonUrl, // 上传文件路径
+      config, // api地址
+      fileDirectoryId: "",
+      groupFormValidate: {
+        id: [],
+        level: 0,
+        directoryName: "",
+      },
+      defaultValue: [], // 默认分组id
+      groupRuleValidate: {
+        directoryName: [
           {
-            type: "selection",
-            width: 60,
-            align: "center",
+            required: true,
+            message: "请输入分组名称",
+            trigger: "blur",
           },
+        ],
+        id: [
           {
-            title: "缩略图(点击预览)",
-            key: "url",
-            width: 300,
-            align: "center",
-            render: (h, params) => {
-              if (params.row.fileType.includes("image") > 0) {
-                return h("img", {
-                  attrs: {
-                    src: params.row.url || "",
-                    alt: "加载图片失败",
+            required: true,
+            message: "请选择分组",
+            trigger: "blur",
+            type: "array",
+          },
+        ],
+      },
+      enableGroup: false, // 是否展示分组
+      selectImage: false, //是否是选择
+      accessToken: {}, // 上传token鉴权
+      loading: false, // 表单加载状态
+      fileType: "all", // 文件类型
+      showType: "list", // 展示类型
+      modalVisible: false, // 添加或编辑显示
+      uploadVisible: false, // 上传展示
+      videoVisible: false, // 文件modal
+      picVisible: false, // 图片modal
+      picTitle: "", // 图片title
+      videoTitle: "", // 视频title
+      modalTitle: "", // 添加或编辑标题
+      activeRoleTab: "STORE",
+      searchForm: {
+        // 搜索框对应data对象
+        name: "",
+        fileKey: "",
+        fileType: "",
+        userEnums: "MANAGER",
+        pageNumber: 1, // 当前页数
+        pageSize: 20, // 页面大小
+        sort: "createTime", // 默认排序字段
+        order: "desc", // 默认排序方式
+        startDate: "", // 起始时间
+        endDate: "", // 终止时间
+      },
+      selectDate: null, // 选择日期绑定modal
+      oldKey: "", // 请求参数
+      form: {
+        // 表单
+        name: "",
+        fileKey: "",
+      },
+      file: {}, // 文件数据
+      // 表单验证规则
+      formValidate: {
+        name: [{required: true, message: "不能为空", trigger: "blur"}],
+        fileKey: [{required: true, message: "不能为空", trigger: "blur"}],
+      },
+      submitLoading: false, // 添加或编辑提交状态
+      selectList: [], // 多选数据
+      selectCount: 0, // 多选计数
+      totalSize: "", // 文件大小统计
+      columns: [
+        // 表头
+        {
+          type: "selection",
+          width: 60,
+          align: "center",
+        },
+        {
+          title: "缩略图(点击预览)",
+          key: "url",
+          width: 300,
+          align: "center",
+          render: (h, params) => {
+            if (params.row.fileType.includes("image") > 0) {
+              return h("img", {
+                attrs: {
+                  src: params.row.url || "",
+                  alt: "加载图片失败",
+                },
+                style: {
+                  cursor: "pointer",
+                  width: "80px",
+                  height: "60px",
+                  margin: "10px 0",
+                  "object-fit": "contain",
+                },
+                on: {
+                  click: () => {
+                    this.showPic(params.row);
                   },
-                  style: {
-                    cursor: "pointer",
-                    width: "80px",
-                    height: "60px",
-                    margin: "10px 0",
-                    "object-fit": "contain",
-                  },
-                  on: {
-                    click: () => {
-                      this.showPic(params.row);
-                    },
-                  },
-                });
-              } else if (params.row.fileType.includes("video") > 0) {
-                // 如果视频文件大小超过5MB不予加载video
-                if (params.row.fileSize < 1024 * 1024 * 5) {
-                  return h(
-                    "video",
-                    {
-                      style: {
-                        cursor: "pointer",
-                        width: "80px",
-                        height: "60px",
-                        margin: "10px 0",
-                        "object-fit": "contain",
-                      },
-                      on: {
-                        click: () => {
-                          this.showVideo(params.row);
-                        },
-                      },
-                    },
-                    [
-                      h("source", {
-                        attrs: {
-                          src: params.row.url,
-                        },
-                      }),
-                    ]
-                  );
-                } else {
-                  return h("img", {
-                    attrs: {
-                      src: require("@/assets/play.png"),
-                    },
+                },
+              });
+            } else if (params.row.fileType.includes("video") > 0) {
+              // 如果视频文件大小超过5MB不予加载video
+              if (params.row.fileSize < 1024 * 1024 * 5) {
+                return h(
+                  "video",
+                  {
                     style: {
                       cursor: "pointer",
                       width: "80px",
@@ -368,54 +608,82 @@
                         this.showVideo(params.row);
                       },
                     },
-                  });
-                }
+                  },
+                  [
+                    h("source", {
+                      attrs: {
+                        src: params.row.url,
+                      },
+                    }),
+                  ]
+                );
               } else {
-                return h("span", "非多媒体类型");
+                return h("img", {
+                  attrs: {
+                    src: require("@/assets/play.png"),
+                  },
+                  style: {
+                    cursor: "pointer",
+                    width: "80px",
+                    height: "60px",
+                    margin: "10px 0",
+                    "object-fit": "contain",
+                  },
+                  on: {
+                    click: () => {
+                      this.showVideo(params.row);
+                    },
+                  },
+                });
               }
-            },
+            } else {
+              return h("span", "非多媒体类型");
+            }
           },
-          {
-            title: "文件类型",
-            key: "fileType",
-            width: 115,
-            className: this.selectImage == true ? "none" : "",
+        },
+        {
+          title: "文件类型",
+          key: "fileType",
+          width: 115,
+          className: this.selectImage == true ? "none" : "",
+        },
+        {
+          title: "文件大小",
+          key: "fileSize",
+          width: 115,
+          sortable: true,
+          className: this.selectImage == true ? "none" : "",
+          render: (h, params) => {
+            let m =
+              ((params.row.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+            return h("span", m);
           },
-          {
-            title: "文件大小",
-            key: "fileSize",
-            width: 115,
-            sortable: true,
-            className: this.selectImage == true ? "none" : "",
-            render: (h, params) => {
-              let m =
-                ((params.row.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-              return h("span", m);
-            },
+        },
+        {
+          title: "上传者",
+          key: "createBy",
+          width: 200,
+          render: (h, params) => {
+            let m = "";
+            if (params.row.userEnums == "MANAGER") {
+              m = "[管理员]";
+            } else if (params.row.userEnums == "STORE") {
+              m = "[商家]";
+            } else if (params.row.userEnums == "CUSTOMER") {
+              m = "[客服]";
+            } else {
+              m = "[用户]";
+            }
+            m += params.row.createBy;
+            return h("span", m);
           },
-          {
-            title: "上传者",
-            key: "createBy",
-            width: 200,
-            render: (h, params) => {
-              let m = "";
-              if (params.row.userEnums == "MANAGER") {
-                m = "[管理员]";
-              } else if (params.row.userEnums == "STORE") {
-                m = "[店铺]";
-              } else {
-                m = "[会员]";
-              }
-              m += params.row.createBy;
-              return h("span", m);
-            },
-          },
-          {
-            title: "操作",
-            key: "action",
-            align: "center",
-            fixed: "right",
-            // width: 300,
+        },
+        {
+          title: "操作",
+          key: "action",
+          align: "center",
+          fixed: "right",
+          // width: 300,
           render: (h, params) => {
             return h("div", [
               h(
@@ -495,66 +763,40 @@
               ),
             ]);
           },
-          },
-        ],
-        viewColumns: [
-          {
-            title: "缩略图(点击预览)",
-            key: "url",
-            // width: 150,
-            align: "center",
-            render: (h, params) => {
-              if (params.row.fileType.includes("image") > 0) {
-                return h("img", {
-                  attrs: {
-                    src: params.row.url || "",
-                    alt: "加载图片失败",
+        },
+      ],
+      viewColumns: [
+        {
+          title: "缩略图(点击预览)",
+          key: "url",
+          // width: 150,
+          align: "center",
+          render: (h, params) => {
+            if (params.row.fileType.includes("image") > 0) {
+              return h("img", {
+                attrs: {
+                  src: params.row.url || "",
+                  alt: "加载图片失败",
+                },
+                style: {
+                  cursor: "pointer",
+                  width: "80px",
+                  height: "60px",
+                  margin: "10px 0",
+                  "object-fit": "contain",
+                },
+                on: {
+                  click: () => {
+                    this.showPic(params.row);
                   },
-                  style: {
-                    cursor: "pointer",
-                    width: "80px",
-                    height: "60px",
-                    margin: "10px 0",
-                    "object-fit": "contain",
-                  },
-                  on: {
-                    click: () => {
-                      this.showPic(params.row);
-                    },
-                  },
-                });
-              } else if (params.row.fileType.includes("video") > 0) {
-                // 如果视频文件大小超过5MB不予加载video
-                if (params.row.fileSize < 1024 * 1024 * 5) {
-                  return h(
-                    "video",
-                    {
-                      style: {
-                        cursor: "pointer",
-                        width: "80px",
-                        height: "60px",
-                        margin: "10px 0",
-                        "object-fit": "contain",
-                      },
-                      on: {
-                        click: () => {
-                          this.showVideo(params.row);
-                        },
-                      },
-                    },
-                    [
-                      h("source", {
-                        attrs: {
-                          src: params.row.url,
-                        },
-                      }),
-                    ]
-                  );
-                } else {
-                  return h("img", {
-                    attrs: {
-                      src: require("@/assets/play.png"),
-                    },
+                },
+              });
+            } else if (params.row.fileType.includes("video") > 0) {
+              // 如果视频文件大小超过5MB不予加载video
+              if (params.row.fileSize < 1024 * 1024 * 5) {
+                return h(
+                  "video",
+                  {
                     style: {
                       cursor: "pointer",
                       width: "80px",
@@ -567,142 +809,283 @@
                         this.showVideo(params.row);
                       },
                     },
-                  });
-                }
-              } else {
-                return h("span", "非多媒体类型");
-              }
-            },
-          },
-          {
-            title: "上传者",
-            key: "createBy",
-            width: 120,
-            sortable: true,
-            render: (h, params) => {
-              let m = "";
-              if (params.row.userEnums == "MANAGER") {
-                m = "[管理员]";
-              } else if (params.row.userEnums == "STORE") {
-                m = "[店铺]";
-              } else {
-                m = "[会员]";
-              }
-              m += params.row.createBy;
-              return h("span", m);
-            },
-          },
-          {
-            title: "操作",
-            key: "action",
-            align: "center",
-            fixed: "right",
-            width: 300,
-            render: (h, params) => {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                      marginRight: "5px",
-                      display:
-                        this.selectImage === true ? "inline-block" : "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.selectedParams(params.row);
+                  },
+                  [
+                    h("source", {
+                      attrs: {
+                        src: params.row.url,
                       },
+                    }),
+                  ]
+                );
+              } else {
+                return h("img", {
+                  attrs: {
+                    src: require("@/assets/play.png"),
+                  },
+                  style: {
+                    cursor: "pointer",
+                    width: "80px",
+                    height: "60px",
+                    margin: "10px 0",
+                    "object-fit": "contain",
+                  },
+                  on: {
+                    click: () => {
+                      this.showVideo(params.row);
                     },
                   },
-                  "选择"
-                )
-              ]);
-            },
+                });
+              }
+            } else {
+              return h("span", "非多媒体类型");
+            }
           },
-        ],
-        data: [], // 表单数据
-        total: 0, // 表单数据总数
-        pageSizeOpts: [5, 10, 20], // 页码展示项
-        list: [], // 列表
-        //树结构
-        treeData: [],
-        treeDataDefault: [],
-        selectedGroupData: "",
-        insertOrUpdate: "insert",
-        groupLoading: false,
-        // 图片列表
-        selectedOss: [],
-        myData: [
-          {
-            title: 'parent 1',
-            expand: true,
-            render: (h, { root, node, data }) => {
-              return h('span', {style: {display: 'inline-block', width: '100%'}}, [
-                h('span', [h("Icon", {type: 'ios-folder-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
-                h('span', {style: {display: 'inline-block', float: 'right', marginRight: '32px'}},
-                  [h("Button", {...this.buttonProps, icon: 'ios-add', type: 'primary', style: {width: '64px'}, onClick: () => { this.append(data) }})
-                  ])
-              ]);
+        },
+        {
+          title: "上传者",
+          key: "createBy",
+          width: 120,
+          sortable: true,
+          render: (h, params) => {
+            let m = "";
+            if (params.row.userEnums == "MANAGER") {
+              m = "[管理员]";
+            } else if (params.row.userEnums == "STORE") {
+              m = "[商家]";
+            } else if (params.row.userEnums == "CUSTOMER") {
+              m = "[客服]";
+            } else {
+              m = "[用户]";
+            }
+            m += params.row.createBy;
+            return h("span", m);
+          },
+        },
+        {
+          title: "操作",
+          key: "action",
+          align: "center",
+          fixed: "right",
+          width: 300,
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "default",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                    display:
+                      this.selectImage === true ? "inline-block" : "none",
+                  },
+                  on: {
+                    click: () => {
+                      this.selectedParams(params.row);
+                    },
+                  },
+                },
+                "选择"
+              )
+            ]);
+          },
+        },
+      ],
+      data: [], // 表单数据
+      total: 0, // 表单数据总数
+      pageSizeOpts: [5, 10, 20], // 页码展示项
+      list: [], // 列表
+      //树结构
+      treeData: [],
+      treeDataDefault: [],
+      selectedGroupData: "",
+      insertOrUpdate: "insert",
+      groupLoading: false,
+      // 图片列表
+      selectedOss: [],
+      myData: [
+        {
+          title: 'parent 1',
+          expand: true,
+          render: (h, {root, node, data}) => {
+            return h('span', {style: {display: 'inline-block', width: '100%'}}, [
+              h('span', [h("Icon", {type: 'ios-folder-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
+              h('span', {style: {display: 'inline-block', float: 'right', marginRight: '32px'}},
+                [h("Button", {
+                  ...this.buttonProps,
+                  icon: 'ios-add',
+                  type: 'primary',
+                  style: {width: '64px'},
+                  onClick: () => {
+                    this.append(data)
+                  }
+                })
+                ])
+            ]);
+          },
+          children: [
+            {
+              title: 'child 1-1',
+              expand: true,
+              children: [{title: 'leaf 1-1-1', expand: true}, {title: 'leaf 1-1-2', expand: true}]
             },
-            children: [
-              {title: 'child 1-1', expand: true, children: [{title: 'leaf 1-1-1', expand: true}, {title: 'leaf 1-1-2', expand: true}]},
-              {title: 'child 1-2', expand: true, children: [{title: 'leaf 1-2-1', expand: true}, {title: 'leaf 1-2-1', expand: true}]}
-            ]
-          }
-        ],
-        buttonProps: {type: 'default', size: 'small',},
-      };
+            {
+              title: 'child 1-2',
+              expand: true,
+              children: [{title: 'leaf 1-2-1', expand: true}, {title: 'leaf 1-2-1', expand: true}]
+            }
+          ]
+        }
+      ],
+      buttonProps: {type: 'default', size: 'small',},
+    };
+  },
+  watch: {
+    selectImage(val) {
+      if (val && !this.data.length) this.init();
     },
-    watch: {
-      selectImage(val) {
-        if (val && !this.data.length) this.init();
-      },
-      choose(val) {
-        if (val) this.selectImage = val
-      },
-      selectedOss(val) {
-        if (val && val.length) {
-          this.$emit("callback", {url: val[val.length-1].split(',')[1]});
-        }
-      },
-      // 初始化监听 是否清空所选图片
-      initialize(val) {
-        if (val && this.isComponent) {
-          this.selectedOss = [];
-        }
+    choose(val) {
+      if (val) this.selectImage = val
+    },
+    selectedOss(val) {
+      if (val && val.length) {
+        this.$emit("callback", {url: val[val.length - 1].split(',')[1]});
       }
     },
+    // 初始化监听 是否清空所选图片
+    initialize(val) {
+      if (val && this.isComponent) {
+        this.selectedOss = [];
+      }
+    },
+    defaultValue(val) {
+      if (val) {
+        this.groupFormValidate.parentId = val;
+      }
+    },
+  },
+  computed: {
+    canShowGroups() {
+      return this.activeRoleTab === "MANAGER";
+    },
+    canUploadImages() {
+      return this.activeRoleTab === "MANAGER";
+    },
+    uploadData() {
+      return {
+        directoryPath: this.searchForm.fileDirectoryId,
+        userEnums: this.activeRoleTab,
+        directoryType: this.activeRoleTab,
+      };
+    },
+  },
 
-    methods: {
-      onMouseOver(item, index) {
-        this.$set(this.data[index], 'isShowPreview', true);
-        this.$forceUpdate();
-      },
-      onMouseOut(item, index) {
-        this.$set(this.data[index], 'isShowPreview', false);
-      },
-      // 复选框值改变时触发
-      selectOssChange(e) {
-        if (e) {
-          this.selectList = e.map(item => {return { id: item.split(',')[0]}});
-          this.selectCount = e.length;
-          // let size = 0;
-          // e.forEach((item) => {size += item.fileSize * 1.0;});
-          // this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-          this.$emit("selected", e);
+  methods: {
+    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.data[index].isShowPreview = true;
+      this.$forceUpdate();
+    },
+    onMouseOut(item, index) {
+      this.data[index].isShowPreview = false;
+    },
+    handleRoleTabChange(name) {
+      this.activeRoleTab = name;
+      this.searchForm.pageNumber = 1;
+      this.searchForm.userEnums = name;
+      delete this.searchForm.fileDirectoryId;
+      this.selectedGroupData = "";
+      this.defaultValue = [];
+      this.groupFormValidate.id = [];
+      this.groupFormValidate.level = 0;
+      this.selectedOss = [];
+      this.updateTreeDataByRole();
+      this.getDataList();
+    },
+    updateTreeDataByRole() {
+      const currentTree = this.filterTreeByRole(this.treeDataDefault, this.activeRoleTab);
+      this.treeData = [
+        {
+          title: "全部图片",
+          label: "全部分类",
+          value: "0",
+          type: this.activeRoleTab,
+          level: 0,
+          children: currentTree,
+          id: "0",
+          categoryId: 0,
+        },
+      ];
+    },
+    filterTreeByRole(tree = [], role) {
+      if (!tree || !tree.length) return [];
+      return tree.reduce((arr, item) => {
+        const children = this.filterTreeByRole(item.children || [], role);
+        if (item.type === role || children.length) {
+          arr.push({
+            ...item,
+            children,
+          });
         }
-      },
-      // 页码改变时回调
-      pageChange(value) {
-        this.$set(this, 'selectedOss', []);
-        this.searchForm.pageNumber = value;
-        this.getDataList();
-      },
-      // 自定义tree节点显示内容和交互
-      renderContent (h, { root, node, data }) {
+        return arr;
+      }, []);
+    },
+    // 复选框值改变时触发
+    selectOssChange(e) {
+      if (e) {
+        this.selectList = e.map(item => {
+          return {id: item.split(',')[0]}
+        });
+        this.selectCount = e.length;
+        // let size = 0;
+        // e.forEach((item) => {size += item.fileSize * 1.0;});
+        // this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+        this.$emit("selected", e);
+      }
+    },
+    // 页码改变时回调
+    pageChange(value) {
+      this.selectedOss = [];
+      this.searchForm.pageNumber = value;
+      this.getDataList();
+    },
+    // 自定义tree节点显示内容和交互
+    renderContent(h, {root, node, data}) {
+      if (data.value === '0') {
+        return h('span', {style: {display: 'inline-block', width: '100%'}},
+          [
+            h('span', [h("Icon", {type: 'ios-paper-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
+            h('span', {style: {display: 'inline-block', float: 'right', marginRight: '10px'}}, [])
+          ]
+        );
+      } else {
         return h('span', {style: {display: 'inline-block', width: '100%'}},
           [
             h('span', [h("Icon", {type: 'ios-paper-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
@@ -710,444 +1093,459 @@
               [
                 h("Dropdown", {style: {marginLeft: "4px"}},
                   [
-                    h("Icon", {props: {type: 'ios-more', size: "20",}, style: {display: 'inline-block'}, on:{click: () => {}}}),
-                    h("DropdownMenu", {slot: "list"
+                    h("Icon", {
+                      props: {type: 'ios-more', size: "20",},
+                      style: {display: 'inline-block'},
+                      on: {
+                        click: () => {
+                        }
+                      }
+                    }),
+                    h("DropdownMenu", {
+                      slot: "list"
                     }, [
-                      h("DropdownItem", { nativeOn:{click: () => {this.handleContextMenuEdit()}} }, "编辑"),
-                      h("DropdownItem", { nativeOn:{click: () => {this.handleContextMenuDelete()}} }, "删除"),
+                      h("DropdownItem", {
+                        nativeOn: {
+                          click: () => {
+                            this.handleContextMenuEdit(root, node, data)
+                          }
+                        }
+                      }, "编辑"),
+                      h("DropdownItem", {
+                        nativeOn: {
+                          click: () => {
+                            this.handleContextMenuDelete()
+                          }
+                        }
+                      }, "删除"),
                     ])
                   ]),
               ])
-          ]);
-      },
-
-
-
-
-      handleContextMenu(val) {
-        console.log('handleContextMenu', val);
-        this.selectedGroupData = val;
-      },
-      // 编辑分组
-      handleContextMenuEdit(val) {
-        this.insertOrUpdate = "update";
-
-        this.enableGroup = true;
-        // this.groupFormValidate = this.selectedGroupData;
-
-        this.groupFormValidate.directoryName = this.selectedGroupData.title;
-        this.groupFormValidate.id = [this.selectedGroupData.value];
-        this.groupFormValidate.level = this.selectedGroupData.level;
-
-        this.groupFormValidate.parentId = this.selectedGroupData.parentId;
-      },
-      // 删除分组
-      async handleContextMenuDelete(val) {
-        this.$Modal.confirm({
-          title: "提示",
-          content: "是否删除该分组",
-          onOk: async () => {
-            const res = await delFileDirectory(this.selectedGroupData.value);
-            if (res.success) {
-              this.$Message.success("删除成功!");
-              this.getDataList();
-              this.getAllList();
-            }
-          },
-        });
-      },
-      treeDataChange(value, selectedData) {
-        if (value && value.length) {
-          if (value[value.length -1] == '0') {
-            this.groupFormValidate.level = 0;
-          } else {
-            this.groupFormValidate.level = Number(selectedData[selectedData.length -1].level) + 1;
-          }
-        }
-      },
-      // 保存/修改分组
-      async submitAddGroup() {
-        this.$refs["formValidate"].validate(async (valid) => {
-          if (valid) {
-            let res
-            const params = { ...this.groupFormValidate };
-
-            if (this.insertOrUpdate === "insert") {
-              // params.directoryType = this.selectedGroupData.directoryType
-              params.parentId = params.id[params.id.length - 1];
-              // params.type = this.selectedGroupData.type
-              delete params.id;
-              res = await addFileDirectory(params);
-            } else {
-              params.id = params.id[params.id.length - 1];
-              res = await updateFileDirectory(params);
-            }
-
-            if (res.success) {
-              this.$Message.success("操作成功!");
-              this.enableGroup = false;
-              this.getAllList();
-            }
-            this.$Modal.remove();
-          } else {
-            this.$Message.error("请填写完整信息!");
-          }
-        });
-      },
-      // 添加/修改分组
-      handleClickAddGroup() {
-        this.insertOrUpdate = "insert";
-        if (this.selectedGroupData) {
-          this.groupFormValidate.id = [this.selectedGroupData.value];
-        } else {
-          this.groupFormValidate.id = ["0"];
-        }
-        this.enableGroup = true;
-        this.groupFormValidate.directoryName = "";
-      },
-      copyFileUrl(row) {
-        const textArea = document.createElement("textarea");
-        textArea.value = row.url;
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-        try {
-          document.execCommand("copy");
-          this.$Message.success("复制成功");
-        } catch (err) {
-          console.error("Unable to copy to clipboard", err);
-        }
-        document.body.removeChild(textArea);
-      },
-
-      // 获取全部文件目录
-      getAllList(parent_id) {
-        this.loading = true;
-        getFileDirectory(parent_id).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.treeData = this.getTree(res.result);
-            this.treeDataDefault = this.getTree(res.result);
-            this.treeData.unshift({
-              title: "全部图片",
-              label: "全部分类",
-              value: "0",
-              level: 0,
-              children: [],
-              id: "0",
-              categoryId: 0,
-            });
-          }
-        });
-      },
-      // 文件目录分类格式化方法
-      getTree(tree = []) {
-        let arr = [];
-        if (!!tree && tree.length !== 0) {
-          tree.forEach((item) => {
-            let obj = {};
-            obj.title = item.directoryName;
-            obj.value = item.id; // 拥有者id
-            obj.type = item.directoryType; // 用户类型
-            obj.label = item.directoryName;
-            obj.level = item.level;
-            obj.expand = false;
-            obj.selected = false;
-            obj.contextmenu = false;
-            obj.parentId = item.parentId;
-            obj.children = this.getTree(item.children); // 递归调用
-            arr.push(obj);
-          });
-        }
-        return arr;
-      },
-
-      // 选择分类回调
-      handleCateChange(data) {
-        if (data) {
-          this.selectedGroupData = data[0];
-          let {value, type, level} = data[0];
-          this.list.push({value, type, level});
-          this.searchForm.fileDirectoryId = value;
-          if (value === "0" || value === 0) {
-            delete this.searchForm.fileDirectoryId;
-            this.groupFormValidate.level = 0;
-          } else {
-            this.groupFormValidate.level = Number(level) + 1;
-          }
-          this.searchForm.userEnums = type;
-          this.getDataList();
-          this.$set(this, 'selectedOss', []);
-        }
-      },
-      /**
-       * 选择
-       */
-      selectedParams(val) {
-        this.$emit("callback", val);
-      },
-      // 更多操作
-      handleDropdown(name) {
-        if (name === "refresh") {
-          this.getDataList('refresh');
-        } else if (name === "removeAll") {
-          this.removeAll();
-        }
-      },
-      // 初始化数据
-      init() {
-        this.accessToken = {
-          accessToken: this.getStore("accessToken"),
-        };
-        this.getDataList();
-        this.getAllList();
-      },
-      // 查看大图
-      showPic(v) {
-        this.file = v;
-        this.file.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-
-        this.picTitle = v.name + "(" + v.fileKey + ")";
-        this.picVisible = true;
-      },
-      // 查看视频
-      showVideo(v) {
-        dp = new DPlayer({
-          container: document.getElementById("dplayer"),
-          screenshot: true,
-          video: {
-            url: v.url,
-          },
-        });
-        this.file = v;
-        this.file.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-        this.videoTitle = v.name + "(" + v.fileKey + ")";
-        this.videoVisible = true;
-      },
-      // 关闭视频
-      closeVideo() {
-        dp.destroy();
-      },
-      // 分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-        this.clearSelectAll();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      // 排序
-      changeSort(e) {
-        this.searchForm.sort = e.key;
-        this.searchForm.order = e.order;
-        if (e.order == "normal") {
-          this.searchForm.order = "";
-        }
-        this.getDataList();
-      },
-      // 起止时间从新赋值
-      selectDateRange(v) {
-        if (v) {
-          this.searchForm.startDate = v[0];
-          this.searchForm.endDate = v[1];
-        }
-      },
-      // 改变查看方式
-      changeShowType() {
-        this.searchForm.pageNumber = 1;
-        if (this.showType == "list") {
-          this.searchForm.pageSize = 10;
-        } else {
-          this.searchForm.pageSize = 12;
-        }
-        this.getDataList();
-      },
-      // 获取列表数据
-      getDataList(type = null) {
-        if (this.showType == "list") {
-          this.pageSizeOpts = [10, 20, 50];
-        } else {
-          this.pageSizeOpts = [12, 24, 48];
-        }
-        this.loading = true;
-        getFileListData(this.searchForm).then((res) => {
-          this.loading = false;
-
-          this.data = res.result.records;
-          this.total = res.result.total;
-          if (type === 'refresh') {
-            this.$Message.success('刷新成功！');
-          }
-        });
-      },
-      // 搜索
-      handleSearch() {
-        this.searchForm.title = this.searchForm.name;
-        this.searchForm.pageNumber = 1;
-        if (this.showType == "list") {
-          this.searchForm.pageSize = 5;
-        } else {
-          this.searchForm.pageSize = 12;
-        }
-        this.getDataList();
-      },
-      // 文件类型筛选
-      changeFileType() {
-        let name = this.fileType;
-        if (name == "all") {
-          this.searchForm.fileType = "";
-        } else if (name == "pic") {
-          this.searchForm.fileType = "image";
-        } else if (name == "video") {
-          this.searchForm.fileType = "video";
-        }
-        this.handleSearch();
-      },
-      // 上传文件超过大小限制
-      handleMaxSize(file) {
-        this.$Notice.warning({
-          title: "文件大小过大",
-          desc: "所选文件大小过大, 不得超过 1M.",
-        });
-      },
-      // 上传成功回调
-      handleSuccess(res, file) {
-        if (res.success) {
-          this.$Message.success("上传文件 " + file.name + " 成功");
-          this.getDataList();
-        } else {
-          this.$Message.error(res.message);
-        }
-      },
-      // 上传失败回调
-      handleError(error, file, fileList) {
-        this.$Message.error(error.toString());
-      },
-      // 清空上传文件
-      clearFiles() {
-        this.$refs.up.clearFiles();
-      },
-      // 取消修改文件名
-      handleCancel() {
-        this.modalVisible = false;
-      },
-      // 下载文件
-      download(v) {
-        window.open(
-          v.url + "?attname=&response-content-type=application/octet-stream"
+          ]
         );
-      },
-      // 批量删除文件
-      removeAll() {
-        if (this.selectCount <= 0) {
-          this.$Message.warning("您还未选择要删除的数据");
-          return;
-        }
-        this.$Modal.confirm({
-          title: "确认删除",
-          content: "您确认要删除所选的 " + this.selectCount + " 个文件?",
-          loading: true,
-          onOk: () => {
-            let ids = "";
-            this.selectList.forEach(function (e) {ids += e.id + ",";});
-            ids = ids.substring(0, ids.length - 1);
-            deleteFile(ids).then((res) => {
-              this.$Modal.remove();
-              if (res.success) {
-                this.$set(this, 'selectedOss', []);
-                // this.clearSelectAll();
-                this.init();
-                this.$Message.success("批量删除文件成功");
-              }
-            })
-              .catch((err) => {
-                console.log("失败", err);
-              });
-          },
-        });
-      },
-      // 单个删除文件
-      remove(v) {
-        this.$Modal.confirm({
-          title: "确认删除",
-          content: "您确认要删除文件 " + v.name + " ?",
-          loading: true,
-          onOk: () => {
-            deleteFile(v.id).then((res) => {
-              this.$Modal.remove();
-              if (res.success) {
-                this.$Message.success("删除文件 " + v.name + " 成功");
-                this.getDataList();
-              }
-            })
-          },
-        });
-      },
-      // 提交修改文件名
-      handleSubmit() {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            this.submitLoading = true;
-            let params = {
-              id: this.form.id,
-              key: this.oldKey,
-              newKey: this.form.fileKey,
-              newName: this.form.name,
-            };
-            renameFile(params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("操作成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
-          }
-        });
-      },
-      // 修改文件名modal
-      rename(v) {
-        this.modalTitle = "编辑文件名";
-        // 转换null为""
-        for (let attr in v) {
-          if (v[attr] == null) {
-            v[attr] = "";
-          }
-        }
-        let str = JSON.stringify(v);
-        let data = JSON.parse(str);
-        this.form = data;
-        this.oldKey = data.fileKey;
-        this.modalVisible = true;
-      },
-      // 清除选中状态
-      clearSelectAll() {
-        this.$refs.table.selectAll(false);
-        this.totalSize = "";
-      },
-      // 选中回调
-      changeSelect(e) {
-        this.selectList = e;
-        this.selectCount = e.length;
-        let size = 0;
-        e.forEach((item) => {
-          size += item.fileSize * 1.0;
-        });
-        this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-        this.$emit("selected", e)
-      },
+      }
+
     },
-    mounted() {
-      if (!this.isComponent) {
-        // 是组件的话，初始化不调用接口
-        this.init();
-      } else {
-        this.searchForm.pageSize =18; // 页面大小
+
+
+    handleContextMenu(val) {
+      console.log('handleContextMenu', val);
+      this.selectedGroupData = val;
+    },
+    // 编辑分组
+    handleContextMenuEdit(root, node, data) {
+      this.insertOrUpdate = "update";
+      this.enableGroup = true;
+      this.groupFormValidate.directoryName = data.label;
+      this.groupFormValidate.id = [data.value];
+      this.groupFormValidate.level = data.level;
+      this.groupFormValidate.parentId = data.parentId;
+      this.defaultValue = [data.parentId];
+    },
+    // 删除分组
+    async handleContextMenuDelete(val) {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "是否删除该分组",
+        onOk: async () => {
+          const res = await delFileDirectory(this.selectedGroupData.value);
+          if (res.success) {
+            this.$Message.success("删除成功!");
+            this.getDataList();
+            this.getAllList();
+          }
+        },
+      });
+    },
+    treeDataChange(value) {
+      if (value && value.length) {
+        this.groupFormValidate.id = value;
+        if (value[value.length - 1] == "0") {
+          this.groupFormValidate.level = 0;
+        } else {
+          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) => {
+        if (valid) {
+          let res
+          const params = {...this.groupFormValidate};
+          params.directoryType = (this.selectedGroupData && this.selectedGroupData.type) || this.activeRoleTab;
+          if (this.insertOrUpdate === "insert") {
+            params.parentId = params.id[params.id.length - 1];
+            delete params.id;
+            res = await addFileDirectory(params);
+          } else {
+            params.id = params.id[params.id.length - 1];
+            params.parentId = params.parentId[params.parentId.length - 1];
+            res = await updateFileDirectory(params);
+          }
+
+          if (res.success) {
+            this.$Message.success("操作成功!");
+            this.enableGroup = false;
+            this.getAllList();
+          }
+          this.$Modal.remove();
+        } else {
+          this.$Message.error("请填写完整信息!");
+        }
+      });
+    },
+    // 添加/修改分组
+    handleClickAddGroup() {
+      this.insertOrUpdate = "insert";
+      if (this.selectedGroupData) {
+        this.groupFormValidate.id = [this.selectedGroupData.value];
+      } else {
+        this.groupFormValidate.id = ["0"];
+      }
+      this.enableGroup = true;
+      this.groupFormValidate.directoryName = "";
+    },
+    copyFileUrl(row) {
+      const textArea = document.createElement("textarea");
+      textArea.value = row.url;
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      try {
+        document.execCommand("copy");
+        this.$Message.success("复制成功");
+      } catch (err) {
+        console.error("Unable to copy to clipboard", err);
+      }
+      document.body.removeChild(textArea);
+    },
+
+    // 获取全部文件目录
+    getAllList(parent_id) {
+      this.loading = true;
+      getFileDirectory(parent_id).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.treeDataDefault = this.getTree(res.result);
+          this.updateTreeDataByRole();
+        }
+      });
+    },
+    // 文件目录分类格式化方法
+    getTree(tree = []) {
+      let arr = [];
+      if (!!tree && tree.length !== 0) {
+        tree.forEach((item) => {
+          let obj = {};
+          obj.title = item.directoryName;
+          obj.value = item.id; // 拥有者id
+          obj.type = item.directoryType; // 用户类型
+          obj.label = item.directoryName;
+          obj.level = item.level;
+          obj.expand = false;
+          obj.selected = false;
+          obj.contextmenu = false;
+          obj.parentId = item.parentId;
+          obj.children = this.getTree(item.children); // 递归调用
+          arr.push(obj);
+        });
+      }
+      return arr;
+    },
+
+    // 选择分类回调
+    handleCateChange(data) {
+      if (data) {
+        this.selectedGroupData = data[0];
+        let {value, type, level} = data[0];
+        this.list.push({value, type, level});
+        this.searchForm.fileDirectoryId = value;
+        if (value === "0" || value === 0) {
+          delete this.searchForm.fileDirectoryId;
+          this.groupFormValidate.level = 0;
+        } else {
+          this.groupFormValidate.level = Number(level) + 1;
+        }
+        this.searchForm.userEnums = type || this.activeRoleTab;
+        this.getDataList();
+        this.selectedOss = [];
+      }
+    },
+    /**
+     * 选择
+     */
+    selectedParams(val) {
+      this.$emit("callback", val);
+    },
+    // 初始化数据
+    init() {
+      this.accessToken = {
+        accessToken: this.getStore("accessToken"),
+      };
+      this.searchForm.userEnums = this.activeRoleTab;
+      this.getDataList();
+      this.getAllList();
+    },
+    // 查看大图
+    showPic(v) {
+      this.file = v;
+      this.file.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+
+      this.picTitle = v.name + "(" + v.fileKey + ")";
+      this.picVisible = true;
+    },
+    // 查看视频
+    showVideo(v) {
+      dp = new DPlayer({
+        container: document.getElementById("dplayer"),
+        screenshot: true,
+        video: {
+          url: v.url,
+        },
+      });
+      this.file = v;
+      this.file.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+      this.videoTitle = v.name + "(" + v.fileKey + ")";
+      this.videoVisible = true;
+    },
+    // 关闭视频
+    closeVideo() {
+      dp.destroy();
+    },
+    // 分页 改变页码
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+      this.clearSelectAll();
+    },
+    // 分页 改变页数
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    // 排序
+    changeSort(e) {
+      this.searchForm.sort = e.key;
+      this.searchForm.order = e.order;
+      if (e.order == "normal") {
+        this.searchForm.order = "";
+      }
+      this.getDataList();
+    },
+    // 起止时间从新赋值
+    selectDateRange(v) {
+      if (v && v.length === 2) {
+        this.searchForm.startDate = v[0];
+        this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
+      }
+    },
+    // 改变查看方式
+    changeShowType() {
+      this.searchForm.pageNumber = 1;
+      if (this.showType == "list") {
+        this.searchForm.pageSize = 20;
+      } else {
+        this.searchForm.pageSize = 12;
+      }
+      this.getDataList();
+    },
+    // 获取列表数据
+    getDataList(type = null) {
+      if (this.showType == "list") {
+        this.pageSizeOpts = [10, 20, 50];
+      } else {
+        this.pageSizeOpts = [12, 24, 48];
+      }
+      this.loading = true;
+      getFileListData(this.searchForm).then((res) => {
+        this.loading = false;
+
+        this.data = res.result.records;
+        this.total = res.result.total;
+      });
+    },
+    // 搜索
+    handleSearch() {
+      this.searchForm.title = this.searchForm.name;
+      this.searchForm.pageNumber = 1;
+      if (this.showType == "list") {
+        this.searchForm.pageSize = 20;
+      } else {
+        this.searchForm.pageSize = 12;
+      }
+      this.getDataList();
+    },
+    // 文件类型筛选
+    changeFileType() {
+      let name = this.fileType;
+      if (name == "all") {
+        this.searchForm.fileType = "";
+      } else if (name == "pic") {
+        this.searchForm.fileType = "image";
+      } else if (name == "video") {
+        this.searchForm.fileType = "video";
+      }
+      this.handleSearch();
+    },
+    // 上传文件超过大小限制
+    handleMaxSize() {
+      this.$Message.warning("所选文件大小过大，不得超过 20MB");
+    },
+    // 上传成功回调
+    handleSuccess(res, file) {
+      if (!this.canUploadImages) {
+        this.$Message.warning("仅管理员模块支持上传图片");
+        return;
+      }
+      if (res.success) {
+        this.$Message.success("上传文件 " + file.name + " 成功");
+        this.getDataList();
+      } else {
+        this.$Message.error(res.message);
+      }
+    },
+    // 上传失败回调
+    handleError(error, file, fileList) {
+      this.$Message.error(error.toString());
+    },
+    // 清空上传文件
+    clearFiles() {
+      this.$refs.up.clearFiles();
+    },
+    // 取消修改文件名
+    handleCancel() {
+      this.modalVisible = false;
+    },
+    // 下载文件
+    download(v) {
+      window.open(
+        v.url + "?attname=&response-content-type=application/octet-stream"
+      );
+    },
+    // 批量删除文件
+    removeAll() {
+      if (this.selectCount <= 0) {
+        this.$Message.warning("您还未选择要删除的数据");
+        return;
+      }
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除所选的 " + this.selectCount + " 个文件?",
+        loading: true,
+        onOk: () => {
+          let ids = "";
+          this.selectList.forEach(function (e) {
+            ids += e.id + ",";
+          });
+          ids = ids.substring(0, ids.length - 1);
+          deleteFile(ids).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.selectedOss = [];
+              // this.clearSelectAll();
+              this.init();
+              this.$Message.success("批量删除文件成功");
+            }
+          })
+            .catch((err) => {
+              console.log("失败", err);
+            });
+        },
+      });
+    },
+    // 单个删除文件
+    remove(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除文件 " + v.name + " ?",
+        loading: true,
+        onOk: () => {
+          deleteFile(v.id).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除文件 " + v.name + " 成功");
+              this.getDataList();
+            }
+          })
+        },
+      });
+    },
+    // 提交修改文件名
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+          let params = {
+            id: this.form.id,
+            key: this.oldKey,
+            newKey: this.form.fileKey,
+            newName: this.form.name,
+          };
+          renameFile(params).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getDataList();
+              this.modalVisible = false;
+            }
+          });
+        }
+      });
+    },
+    // 修改文件名modal
+    rename(v) {
+      this.modalTitle = "编辑文件名";
+      // 转换null为""
+      for (let attr in v) {
+        if (v[attr] == null) {
+          v[attr] = "";
+        }
+      }
+      let str = JSON.stringify(v);
+      let data = JSON.parse(str);
+      this.form = data;
+      this.oldKey = data.fileKey;
+      this.modalVisible = true;
+    },
+    // 清除选中状态
+    clearSelectAll() {
+      this.$refs.table.selectAll(false);
+      this.totalSize = "";
+    },
+    // 选中回调
+    changeSelect(e) {
+      this.selectList = e;
+      this.selectCount = e.length;
+      let size = 0;
+      e.forEach((item) => {
+        size += item.fileSize * 1.0;
+      });
+      this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+      this.$emit("selected", e)
+    },
+  },
+  mounted() {
+    if (!this.isComponent) {
+      // 是组件的话，初始化不调用接口
+      this.init();
+    } else {
+      this.searchForm.pageSize = 18; // 页面大小
+    }
+  },
+};
 </script>
diff --git a/seller/src/views/shop/renovation.vue b/seller/src/views/shop/renovation.vue
index 0a267633..2924dc48 100644
--- a/seller/src/views/shop/renovation.vue
+++ b/seller/src/views/shop/renovation.vue
@@ -1,39 +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',
-        }"
-      >
+      <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" />
-          <span>{{ model.name }}</span>
+          <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";
@@ -42,12 +30,12 @@ export default {
   components: {
     Draggable,
     ModelForm,
+    Picture,
   },
   mounted() {
-    const setting = window.localStorage.getItem('admin-setting') ? JSON.parse(window.localStorage.getItem('admin-setting')) : {};
+    const setting = window.localStorage.getItem('seller-setting') ? JSON.parse(window.localStorage.getItem('seller-setting')) : {};
     this.isHiddenBar = setting.isUseTabsRouter
-      // 先读缓存，如果缓存有值则读缓存。
-    const cache = this.getStore('sellerPCPageCache')
+     const cache = this.getStore('managerPCPageCache')
     this.hasCache = !!cache;
       if(cache){
         this.$Modal.confirm({
@@ -60,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);
@@ -79,60 +66,55 @@ export default {
   data() {
     return {
       hasCache:false,
-      modelData, // 可选模块数据
-      modelForm: { list: [] }, // 模板数据
-      submitLoading: false, // 提交加载状态
+      modelData,
+      modelForm: { list: [] },
+      submitLoading: false,
       isHiddenBar:true,
     };
   },
   methods: {
     clearCache(){
-      this.setStore('sellerPCPageCache', '')
+      this.setStore('managerPCPageCache', '')
       this.$Message.success('清除成功')
     },
-      // 将楼层装修的内容写入到本地缓存中
     witeLocalStore(){
       const data ={...this.modelForm}
       data.list.unshift(this.$refs.modelForm.navList);
       data.list.unshift(this.$refs.modelForm.topAdvert);
-      this.setStore('sellerPCPageCache', data)
+      this.setStore('managerPCPageCache', data)
       this.$Message.success('写入成功')
     },
     saveTemplate() {
-      // 保存模板
-      this.submitTemplate(this.$route.query.pageShow ? "OPEN" : "CLOSE");
+      this.submitTemplate(this.$route.query.pageShow ? 'OPEN' : 'CLOSE')
     },
-    // 提交模板
     submitTemplate(pageShow) {
-      this.submitLoading = true;
-      const modelForm = JSON.parse(JSON.stringify(this.modelForm));
+      this.submitLoading = true
+      const modelForm = JSON.parse(JSON.stringify(this.modelForm))
       modelForm.list.unshift(this.$refs.modelForm.navList);
       modelForm.list.unshift(this.$refs.modelForm.topAdvert);
       const data = {
         id: this.$route.query.id,
         pageData: JSON.stringify(modelForm),
-        pageShow,
+        pageShow: this.$route.query.pageType === 'SPECIAL' ? 'CLOSE' : pageShow,
+        pageClientType: 'PC',
       };
       API_floor.updateHome(this.$route.query.id, data).then((res) => {
-        this.submitLoading = false;
+        this.submitLoading = false
         if (res.success) {
           this.$Message.success("保存模板成功");
         }
       });
     },
     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);
@@ -163,8 +145,9 @@ export default {
   display: flex;
 }
 .model-list {
-  width: 120px;
-  height: auto;
+  width: 130px;
+  height: 620px;
+  overflow-y: auto;
   padding: 10px;
   background: #fff;
   margin-top: 60px;
@@ -177,17 +160,19 @@ export default {
     line-height: 30px;
   }
   .model-item {
-    width: 100px;
+    width: 110px;
     height: 30px;
     background: #eee;
     margin-top: 10px;
     line-height: 30px;
     text-align: center;
     color: #999;
+    transition:0.15s;
+    border-radius: 4px;
     &:hover {
-      border: 1px dashed #409eff;
-      color: #409eff;
+      background: $theme_color;
       cursor: move;
+      color: #fff;
     }
   }
   .ghost::after {
@@ -226,7 +211,6 @@ export default {
   padding: 10px;
   box-shadow: 1px 1px 10px #999;
   z-index: 99;
-  top: 100px;
 }
 .top{
   top: 100px;
diff --git a/seller/src/views/shop/ship/logistics.vue b/seller/src/views/shop/ship/logistics.vue
index 01502085..86383fe5 100644
--- a/seller/src/views/shop/ship/logistics.vue
+++ b/seller/src/views/shop/ship/logistics.vue
@@ -1,54 +1,81 @@
 <template>
   <div class="logistics">
-    <Card>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table"></Table>
-    </Card>
-    <Modal v-model="openModal" :title="openModalTitle" @on-ok="submit" @on-cancel="cancelModal" :width="700">
-      <h3 style="color: #ff3c2a; margin-bottom: 10px">是否需要电子面单</h3>
+    <el-card>
+      <el-table v-loading="loading" border :data="data" ref="table" style="width: 100%">
+        <el-table-column prop="name" label="物流公司" min-width="120" />
+        <el-table-column label="状态" min-width="120">
+          <template #default="{ row }">
+            <el-tag v-if="!row.selected" type="danger">关闭</el-tag>
+            <el-tag v-else type="success">开启</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="200">
+          <template #default="{ row }">
+            <template v-if="!row.selected">
+              <a class="link-text" @click="open(row)">开启</a>
+            </template>
+            <template v-else>
+              <a class="link-text" @click="close(row)">关闭</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="getFaceSheetInfo(row)">修改</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
 
-      <ButtonGroup style="margin-bottom: 10px;">
-        <Button :type="faceSheetForm.faceSheetFlag ? 'primary' : 'default'"
-          @click="faceSheetForm.faceSheetFlag = true">需要</Button>
-        <Button :type="!faceSheetForm.faceSheetFlag ? 'primary' : 'default'"
-          @click="faceSheetForm.faceSheetFlag = false">不需要</Button>
-      </ButtonGroup>
-      <Card v-if="openText" class="modalStyle">
+    <el-dialog v-model="openModal" :title="openModalTitle" width="700px" :close-on-click-modal="false">
+      <h3 style="color: #ff3c2a; margin-bottom: 10px">是否需要电子面单</h3>
+      <el-button-group style="margin-bottom: 10px">
+        <el-button :type="faceSheetForm.faceSheetFlag ? 'primary' : 'default'" @click="faceSheetForm.faceSheetFlag = true">
+          需要
+        </el-button>
+        <el-button :type="!faceSheetForm.faceSheetFlag ? 'primary' : 'default'" @click="faceSheetForm.faceSheetFlag = false">
+          不需要
+        </el-button>
+      </el-button-group>
+
+      <el-card v-if="openText" class="modalStyle">
         <h3 style="color: #ff3c2a; margin-bottom: 10px">请输入详细信息</h3>
-        <Form ref="formValidate" :label-width="250" label-position="right" :model="faceSheetForm" :rules="ruleValidate">
-          <FormItem label="电子面单客户账户/月结账号/客户代码" prop="customerName">
-            <Input v-model="faceSheetForm.customerName" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="客户密码/电子面单密码" prop="customerPwd">
-            <Input v-model="faceSheetForm.customerPwd" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="电子面单密钥" prop="monthCode">
-            <Input v-model="faceSheetForm.monthCode" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="归属网点/网点编码/电子面单承载编号" prop="sendSite">
-            <Input v-model="faceSheetForm.sendSite" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="收件快递员" prop="sendStaff">
-            <Input v-model="faceSheetForm.sendStaff" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="支付方式" prop="payType">
-            <Select v-model="faceSheetForm.payType" class="faceSheetInput">
-              <Option value="1">现付</Option>
-              <Option value="2">到付</Option>
-              <Option value="3">月结</Option>
-              <Option value="4">第三方支付(仅SF支持)</Option>
-            </Select>
-          </FormItem>
-          <FormItem label="快递类型" prop="expType">
-            <Input v-model="faceSheetForm.expType" type="text" class="faceSheetInput" />
-          </FormItem>
-          <div style="width:100%;text-align:center;">
+        <el-form ref="formValidate" label-width="250px" label-position="right" :model="faceSheetForm" :rules="ruleValidate">
+          <el-form-item label="电子面单客户账户/月结账号/客户代码" prop="customerName">
+            <el-input v-model="faceSheetForm.customerName" class="faceSheetInput" />
+          </el-form-item>
+          <el-form-item label="客户密码/电子面单密码" prop="customerPwd">
+            <el-input v-model="faceSheetForm.customerPwd" class="faceSheetInput" />
+          </el-form-item>
+          <el-form-item label="电子面单密钥" prop="monthCode">
+            <el-input v-model="faceSheetForm.monthCode" class="faceSheetInput" />
+          </el-form-item>
+          <el-form-item label="归属网点/网点编码/电子面单承载编号" prop="sendSite">
+            <el-input v-model="faceSheetForm.sendSite" class="faceSheetInput" />
+          </el-form-item>
+          <el-form-item label="收件快递员" prop="sendStaff">
+            <el-input v-model="faceSheetForm.sendStaff" class="faceSheetInput" />
+          </el-form-item>
+          <el-form-item label="支付方式" prop="payType">
+            <el-select v-model="faceSheetForm.payType" class="faceSheetInput">
+              <el-option label="现付" value="1" />
+              <el-option label="到付" value="2" />
+              <el-option label="月结" value="3" />
+              <el-option label="第三方支付(仅SF支持)" value="4" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="快递类型" prop="expType">
+            <el-input v-model="faceSheetForm.expType" class="faceSheetInput" />
+          </el-form-item>
+          <div style="width: 100%; text-align: center">
             <a style="padding-right: 20px" @click="frontDownload('use')">使用说明</a>
             <a @click="frontDownload('type')">快递类型</a>
           </div>
-        </Form>
-      </Card>
-      <br />
-    </Modal>
+        </el-form>
+      </el-card>
+
+      <template #footer>
+        <el-button @click="openModal = false">取消</el-button>
+        <el-button type="primary" @click="submit">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -61,148 +88,39 @@ export default {
     return {
       row: {},
       openModal: false,
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-      },
-      openModalTitle: '开启信息',
-      ruleValidate: {
-        // customerName: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
-        // payType: [{ required: true, message: "请填写必填项" ,trigger: "change" }],
-        // expType: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
-        // customerPwd: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
-        // monthCode: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
-        // sendSite: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
-        // sendStaff: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
-
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc",
       },
+      openModalTitle: "开启信息",
+      ruleValidate: {},
       faceSheetForm: {
         faceSheetFlag: false,
         customerName: "",
-        payType: '1',
-        expType: '1',
+        payType: "1",
+        expType: "1",
         customerPwd: "",
         monthCode: "",
         sendSite: "",
         sendStaff: "",
       },
-      columns: [
-        {
-          title: "物流公司",
-          key: "name",
-          minWidth: 120,
-          sortable: false,
-        },
-        {
-          title: "状态",
-          key: "selected",
-          minWidth: 120,
-          sortable: true,
-          render: (h, params) => {
-            if (!params.row.selected) {
-              return h("div", [h("tag", { props: { color: "volcano" } }, "关闭")]);
-            } else {
-              return h("div", [h("tag", { props: { color: "green" } }, "开启")]);
-            }
-          }
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 200,
-          render: (h, params) => {
-            if (!params.row.selected) {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.open(params.row);
-                      },
-                    },
-                  },
-                  "开启"
-                ),
-              ]);
-            } else {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.close(params.row);
-                      },
-                    },
-                  },
-                  "关闭"
-                ),
-                h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.getFaceSheetInfo(params.row);
-                      },
-                    },
-                  },
-                  "修改"
-                ),
-              ]);
-            }
-
-          },
-        },
-      ],
-      data: [], // 表单数据
+      data: [],
       openText: false,
+      logisticsId: "",
     };
   },
   watch: {
-    'faceSheetForm.faceSheetFlag'(val) {
-      this.openText = val ? true : false
-      console.log(this.openText )
-    }
+    "faceSheetForm.faceSheetFlag"(val) {
+      this.openText = !!val;
+    },
   },
   methods: {
-    //获取状态
-    getfaceSheetFlag(e) {
-      console.log(e);
-      if (e === true) {
-        console.log("打开");
-        this.openText = true;
-      } else {
-        console.log("关闭");
-        this.openText = false;
-      }
-    },
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 获取数据
     getDataList() {
       this.loading = true;
       API_Shop.getLogistics().then((res) => {
@@ -211,38 +129,22 @@ export default {
           this.data = res.result;
         }
       });
-      this.loading = false;
     },
-    cancelModal() {
-      this.faceSheetFlag = false;
-      this.faceSheetForm.faceSheetFlag = false;
-    },
-    // 开启
     open(v) {
       this.row = v;
       this.openModal = true;
-      this.searchForm.faceSheetFlag = "false"; //开弹框 等于v
-      if (this.searchForm.faceSheetFlag == "true") {
-        this.openText = true;
-      } else {
-        this.openText = false;
-      }
+      this.openModalTitle = "开启信息";
+      this.openText = false;
+      this.faceSheetForm.faceSheetFlag = false;
     },
-    //修改
     getFaceSheetInfo(v) {
       this.row = v;
       this.logisticsId = v.logisticsId;
-      this.openModalTitle = '修改信息';
+      this.openModalTitle = "修改信息";
       API_Shop.getIsCheck(this.logisticsId).then((res) => {
         if (res.success) {
-          // this.searchForm = res.result.recordes;
-          this.faceSheetForm.faceSheetFlag = res.result.faceSheetFlag; //开弹框 等于v
-          if (this.faceSheetForm.faceSheetFlag === true) {
-            this.openText = true;
-          } else {
-            this.faceSheetForm.faceSheetFlag = false
-            this.openText = false;
-          }
+          this.faceSheetForm.faceSheetFlag = res.result.faceSheetFlag;
+          this.openText = !!this.faceSheetForm.faceSheetFlag;
           this.faceSheetForm.customerName = res.result.customerName;
           this.faceSheetForm.customerPwd = res.result.customerPwd;
           this.faceSheetForm.monthCode = res.result.monthCode;
@@ -255,29 +157,23 @@ export default {
       this.openModal = true;
     },
     frontDownload(val) {
-      var a = document.createElement("a"); //创建一个<a></a>标签
-      //根据点击按钮来下载不同文件
-      if (val === 'use') {
-        a.href = "static/instructions.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
-        a.download = "使用说明.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
-      } else if (val === 'type') {
-        a.href = "static/logisticsType.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
-        a.download = "快递类型.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
+      const a = document.createElement("a");
+      if (val === "use") {
+        a.href = "static/instructions.xlsx";
+        a.download = "使用说明.xlsx";
+      } else if (val === "type") {
+        a.href = "static/logisticsType.xlsx";
+        a.download = "快递类型.xlsx";
       }
-      a.style.display = "none"; // 障眼法藏起来a标签
-      document.body.appendChild(a); // 将a标签追加到文档对象中
-      a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
-      a.remove(); // 一次性的，用完就删除a标签
+      a.style.display = "none";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
     },
-
     submit() {
       if (!this.row.selected) {
-        API_Shop.logisticsChecked(
-          this.row.logisticsId,
-          this.faceSheetForm
-        ).then((res) => {
+        API_Shop.logisticsChecked(this.row.logisticsId, this.faceSheetForm).then((res) => {
           this.openModal = false;
-          this.$Modal.remove();
           if (res.success) {
             this.$Message.success("物流公司开启成功");
             this.init();
@@ -287,12 +183,12 @@ export default {
         API_Shop.editChecked(this.logisticsId, this.faceSheetForm).then((res) => {
           if (res.success) {
             this.$Message.success("修改成功");
+            this.openModal = false;
             this.init();
           }
         });
       }
     },
-    // 关闭
     close(v) {
       this.$Modal.confirm({
         title: "确认关闭",
@@ -306,9 +202,9 @@ export default {
               this.init();
             }
           });
-        }
+        },
       });
-    }
+    },
   },
   mounted() {
     this.init();
@@ -320,4 +216,13 @@ export default {
 .faceSheetInput {
   width: 300px;
 }
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
 </style>
diff --git a/seller/src/views/shop/ship/shipTemplate.vue b/seller/src/views/shop/ship/shipTemplate.vue
index b9450ebe..22a376ec 100644
--- a/seller/src/views/shop/ship/shipTemplate.vue
+++ b/seller/src/views/shop/ship/shipTemplate.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="search">
-    <Card>
-      <Row>
-        <Button @click="refresh">刷新</Button>
-        <Button @click="add" type="primary">添加</Button>
-      </Row>
-      <Tabs @on-click="handleClickType" v-model="currentTab" style="margin-top: 10px">
-        <TabPane label="运费模板" name="INFO">
+    <el-card>
+      <el-row>
+        <el-button @click="refresh">刷新</el-button>
+        <el-button @click="add" type="primary">添加</el-button>
+      </el-row>
+      <el-tabs @click="handleClickType" v-model="currentTab" style="margin-top: 10px">
+        <el-tab-pane label="运费模板" name="INFO">
           <table class="ncsc-default-table order m-b-30" :key="index" v-for="(item,index) in shipInfo">
             <tbody>
               <tr>
@@ -15,7 +15,7 @@
               <tr>
                 <th colspan="20">
                   <span class="temp-name">{{item.name}}</span>
-                  <Tag v-if="item.pricingMethod==='FREE'" class="baoyou" color="warning">包邮</Tag>
+                  <el-tag v-if="item.pricingMethod==='FREE'" class="baoyou" color="warning">包邮</el-tag>
                   <span class="fr m-r-5">
                     <time style="margin-right: 20px" title="最后编辑时间">
                       <i class="icon-time"></i>{{item.updateTime}}
@@ -48,34 +48,34 @@
                     {{children.firstCompany}}
                   </td>
                   <td>
-                    <span class="yuan">￥</span><span class="integer">{{children.firstPrice | unitPrice}}</span>
+                    <span class="yuan">￥</span><span class="integer">{{ $filters.unitPrice(children.firstPrice) }}</span>
                   </td>
                   <td>
                     {{children.continuedCompany}}
                   </td>
                   <td class="bdr">
-                    <span class="yuan">￥</span><span class="integer">{{children.continuedPrice | unitPrice}}</span>
+                    <span class="yuan">￥</span><span class="integer">{{ $filters.unitPrice(children.continuedPrice) }}</span>
                   </td>
                 </tr>
               </template>
             </tbody>
           </table>
-        </TabPane>
-        <TabPane v-if="csTab" :label="title" :name="operation">
-          <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-            <FormItem label="模板名称" prop="name">
-              <Input v-model="form.name" maxlength="10" clearable style="width: 20%" />
-            </FormItem>
-            <FormItem label="计价方式" prop="pricingMethod">
-              <RadioGroup type="button" button-style="solid" v-model="form.pricingMethod">
-                <Radio label="WEIGHT">按重量</Radio>
-                <Radio label="NUM">按件数</Radio>
-                <Radio label="FREE">包邮</Radio>
-              </RadioGroup>
-            </FormItem>
+        </el-tab-pane>
+        <el-tab-pane v-if="csTab" :label="title" :name="operation">
+          <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+            <el-form-item label="模板名称" prop="name">
+              <el-input v-model="form.name" maxlength="10" clearable style="width: 20%" />
+            </el-form-item>
+            <el-form-item label="计价方式" prop="pricingMethod">
+              <el-radio-group v-model="form.pricingMethod">
+                <el-radio-button value="WEIGHT">按重量</el-radio-button>
+                <el-radio-button value="NUM">按件数</el-radio-button>
+                <el-radio-button value="FREE">包邮</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
 
-            <FormItem label="详细设置" v-if="form.pricingMethod !== 'FREE'">
-              <Alert type="warning" >点击右侧修改按钮编辑数据</Alert>
+            <el-form-item label="详细设置" v-if="form.pricingMethod !== 'FREE'">
+              <el-alert type="warning" title="点击右侧修改按钮编辑数据" :closable="false" />
               <div class="ncsu-trans-type" data-delivery="TRANSTYPE">
                 <div class="entity">
                   <div class="tbl-except">
@@ -103,21 +103,16 @@
                           </td>
                           <td></td>
                           <td>
-                            <InputNumber class="text w40" type="text" v-model="item.firstCompany" :max="999" :min="0" :step="0.1" clearable/>
+                            <el-input-number class="text w40" v-model="item.firstCompany" :max="999" :min="0" :step="0.1" />
                           </td>
                           <td>
-                            <InputNumber class="text w60" type="text" v-model="item.firstPrice" :max="999999" :min="0" clearable  :formatter="value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
-            :parser="value => value.replace(/\¥\s?|(,*)/g, '')">
-                            </InputNumber>
+                            <el-input-number class="text w60" v-model="item.firstPrice" :max="999999" :min="0" />
                           </td>
                           <td>
-                            <InputNumber class="text w40" type="text" v-model="item.continuedCompany" :max="999" :min="0" :step="0.1"
-                              />
+                            <el-input-number class="text w40" v-model="item.continuedCompany" :max="999" :min="0" :step="0.1" />
                           </td>
                           <td>
-                            <InputNumber class="text w60" type="text" v-model="item.continuedPrice" :max="999999" :min="0" clearable  :formatter="value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
-            :parser="value => value.replace(/\¥\s?|(,*)/g, '')">
-                            </InputNumber>
+                            <el-input-number class="text w60" v-model="item.continuedPrice" :max="999999" :min="0" />
                           </td>
                           <td class="nscs-table-handle">
                             <a
@@ -136,31 +131,25 @@
                   <div class="tbl-attach p-5">
                     <div class="div-error" v-if="saveError">
                       <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
-                      <Icon type="ios-information-circle-outline" />
                       指定地区城市为空或指定错误
-                      <!-- <Icon type="ios-information-circle-outline" />
-                      首费应输入正确的金额
-                      <Icon type="ios-information-circle-outline" />
-                      续费应输入正确的金额 -->
-                      <Icon type="ios-information-circle-outline" />
                       首(续)件(重)费应输入大于0的整数
                     </div>
 
                   </div>
                 </div>
               </div>
-            </FormItem>
-            <Form-item>
-              <Button @click="addShipTemplateChildren(index)" v-if="form.pricingMethod !== 'FREE'"
-                icon="ios-create-outline">为指定城市设置运费模板
-              </Button>
-              <Button @click="handleSubmit" type="primary" style="margin-right:5px">保存
-              </Button>
-            </Form-item>
-          </Form>
-        </TabPane>
-      </Tabs>
-    </Card>
+            </el-form-item>
+            <el-form-item>
+              <el-button v-if="form.pricingMethod !== 'FREE'" @click="addShipTemplateChildren(index)">
+                为指定城市设置运费模板
+              </el-button>
+              <el-button @click="handleSubmit" type="primary" style="margin-right:5px">保存
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
     <multiple-region ref="region" @selected="handleSelect">
 
     </multiple-region>
@@ -288,7 +277,7 @@ export default {
           child.area.split(",").forEach((area) => {
             if (addr.name == area) {
               addr.selectedAll = true;
-              this.$set(child, "selectedAll", true);
+              child.selectedAll = true;
             }
           });
         });
diff --git a/seller/src/views/shop/shopAddress.vue b/seller/src/views/shop/shopAddress.vue
index 1f104cc7..4fe45a5f 100644
--- a/seller/src/views/shop/shopAddress.vue
+++ b/seller/src/views/shop/shopAddress.vue
@@ -1,327 +1,214 @@
 <template>
   <div class="self-address">
-    <Card>
-      <Button @click="add" type="primary">添加</Button>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
+    <el-card>
+      <el-button type="primary" @click="add">添加</el-button>
+      <el-table
         ref="table"
-        style="margin-top:10px"
-      ></Table>
-      <Row type="flex" justify="end" style="margin-top:10px;">
-        <Page
-          :current="searchForm.pageNumber"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%; margin-top: 10px"
+      >
+        <el-table-column prop="addressName" label="自提点名称" min-width="120" />
+        <el-table-column prop="address" label="详细地址" min-width="280" />
+        <el-table-column prop="createTime" label="创建时间" min-width="120" sortable />
+        <el-table-column label="操作" width="200" align="center">
+          <template #default="{ row }">
+            <a class="link-text" @click="edit(row)">修改</a>
+            <span class="op-split">|</span>
+            <a class="link-text" @click="deleteSubmit(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="[10, 20, 50]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[10, 20, 50]"
+          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="form" :label-width="100" :rules="formValidate">
-        <FormItem label="名称" prop="addressName">
-          <Input v-model="form.addressName" clearable style="width: 90%"/>
-        </FormItem>
-        <FormItem label="详细地址" prop="address">
-          <span>{{ form.address || '暂无地址' }}</span>
-          <Button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择地址</Button>
-        </FormItem>
-        <FormItem label="联系电话" prop="mobile">
-          <Input v-model="form.mobile" clearable style="width: 90%" maxlength="11"/>
-        </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>
-    <multipleMap ref="map" @callback="getAddress"></multipleMap>
+    </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="addressName">
+          <el-input v-model="form.addressName" clearable style="width: 90%" />
+        </el-form-item>
+        <el-form-item label="详细地址" prop="address">
+          <span>{{ form.address || "暂无地址" }}</span>
+          <el-button style="margin-left: 10px" @click="$refs.map.open()">选择地址</el-button>
+        </el-form-item>
+        <el-form-item label="联系电话" prop="mobile">
+          <el-input v-model="form.mobile" clearable style="width: 90%" maxlength="11" />
+        </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>
+    <multipleMap ref="map" @callback="getAddress" />
   </div>
 </template>
 
 <script>
-  import * as API_Shop from "@/api/shops";
-  import { validateMobile } from "@/libs/validate";
+import * as API_Shop from "@/api/shops";
+import { validateMobile } from "@/libs/validate";
+import multipleMap from "@/views/my-components/map/multiple-map";
 
-  import multipleMap from "@/views/my-components/map/multiple-map";
-
-
-  export default {
-    name: "shopAddress",
-    components: {
-      multipleMap
-    },
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        modalType: 0, // 添加或编辑标识
-        modalVisible: false, // 添加或编辑显示
-        modalTitle: "", // 添加或编辑标题
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 10, // 页面大小
-        },
-        form: {
-          // 添加或编辑表单对象初始化数据
-          addressName: "",
-          center: "",
-          address:"",//详细地址
-          mobile:"",//手机号码
-        },
-
-        // 表单验证规则
-        formValidate: {
-          addressName: [
-            {
-              required: true,
-              message: "请输入地址名称",
-              trigger: "blur",
-            },
-          ],
-          longitude: [
-            {
-              required: true,
-              message: "请输入地址经度",
-              trigger: "blur",
-            },
-          ],
-          latitude: [
-            {
-              required: true,
-              message: "请输入地址纬度",
-              trigger: "blur",
-            },
-          ],
-          mobile: [
-            {
-              required: true,
-              message: "请输入联系电话号",
-              trigger: "blur",
-            },
-            { validator: validateMobile,
-              trigger: "blur"
-            }
-          ],
-          address: [
-            {
-              required: true,
-              message: " ",
-              trigger: "blur",
-            },
-          ],
-        },
-        submitLoading: false, // 添加或编辑提交状态
-        columns: [
-          // 表头
-          {
-            title: "自提点名称",
-            key: "addressName",
-            minWidth: 120,
-            sortable: false,
-          },
-          {
-            title: "详细地址",
-            key: "address",
-            minWidth: 280
-          },
-          {
-            title: "创建时间",
-            key: "createTime",
-            minWidth: 120,
-            sortable: true,
-          },
-          {
-            title: "操作",
-            key: "action",
-            align: "center",
-            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.deleteSubmit(params.row);
-                      },
-                    },
-                  },
-                  "删除"
-                ),
-              ]);
-            },
-          },
+export default {
+  name: "shopAddress",
+  components: { multipleMap },
+  data() {
+    return {
+      loading: true,
+      modalType: 0,
+      modalVisible: false,
+      modalTitle: "",
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 10,
+      },
+      form: {
+        addressName: "",
+        center: "",
+        address: "",
+        mobile: "",
+      },
+      formValidate: {
+        addressName: [{ required: true, message: "请输入地址名称", trigger: "blur" }],
+        longitude: [{ required: true, message: "请输入地址经度", trigger: "blur" }],
+        latitude: [{ required: true, message: "请输入地址纬度", trigger: "blur" }],
+        mobile: [
+          { required: true, message: "请输入联系电话号", trigger: "blur" },
+          { validator: validateMobile, trigger: "blur" },
         ],
-        data: [], // 表单数据
-        total: 0, // 表单数据总数
-      };
+        address: [{ required: true, message: " ", trigger: "blur" }],
+      },
+      submitLoading: false,
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    init() {
+      this.getDataList();
     },
-    methods: {
-      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 = 10;
-        this.getDataList();
-      },
-      // 重置
-      handleReset() {
-        this.$refs.searchForm.resetFields();
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 10;
-        this.getDataList();
-      },
-      //获取地址
-      getAddress(val){
-        if(val.type === 'select'){
-          const paths = val.data.map(item => item.name).join(',')
-          this.$set(this.form, 'address', paths)
-
-          this.form.center = val.data[val.data.length - 1].center
-        }
-        else{
-            this.$set(this.form, 'address', val.data.addr)
-            this.form.address = val.data.address
-            this.form.center = val.data.position.lng + "," + val.data.position.lat
-        }
-
-      },
-      // 获取数据
-      getDataList() {
-        this.loading = true;
-        API_Shop.getShopAddress(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(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+    },
+    changePageSize(v) {
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    getAddress(val) {
+      if (val.type === "select") {
+        const paths = val.data.map((item) => item.name).join(",");
+        this.form.address = paths;
+        this.form.center = val.data[val.data.length - 1].center;
+      } else {
+        this.form.address = val.data.addr;
+        this.form.address = val.data.address;
+        this.form.center = val.data.position.lng + "," + val.data.position.lat;
+      }
+    },
+    getDataList() {
+      this.loading = true;
+      API_Shop.getShopAddress(this.searchForm).then((res) => {
         this.loading = false;
-      },
-      //添加弹出框
-      add() {
-        this.$refs.form.resetFields()
-        this.modalVisible = true
-        this.modalTitle = "添加自提地址"
-      },
-      //修改弹出框
-      edit(v) {
-        this.modalType = 1
-        this.modalVisible = true
-        this.modalTitle = "修改自提地址"
-        this.form.id = v.id
-        this.form.address = v.address
-        this.form.addressName = v.addressName
-        this.form.mobile = v.mobile
-        this.form.center = v.center
-        this.form.longitude = v.center.split(',')[0]
-        this.form.latitude = v.center.split(',')[1]
-      },
-
-      //保存或者编辑
-      handleSubmit() {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            this.submitLoading = true;
-            if (this.modalType == 0) {
-              // 添加
-              delete this.form.id;
-              API_Shop.addShopAddress(this.form).then((res) => {
-                this.submitLoading = false;
-                if (res.success) {
-                  this.$Message.success("添加成功");
-                  this.getDataList();
-                  this.modalVisible = false;
-                }
-              });
-            } else {
-              // 编辑
-              API_Shop.editShopAddress(this.form.id, this.form).then((res) => {
-                this.submitLoading = false;
-                if (res.success) {
-                  this.$Message.success("修改成功");
-                  this.getDataList();
-                  this.modalVisible = false;
-                }
-              });
-            }
-          }
-        });
-      },
-      //删除
-      deleteSubmit(v){
-        this.$Modal.confirm({
-          title: "确认删除",
-          // 记得确认修改此处
-          content: "确认删除自提地址么？",
-          loading: true,
-          onOk: () => {
-            API_Shop.deleteShopAddress(v.id).then((res) => {
-              this.$Modal.remove();
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+    },
+    add() {
+      this.modalType = 0;
+      this.$refs.form.resetFields();
+      this.modalVisible = true;
+      this.modalTitle = "添加自提地址";
+    },
+    edit(v) {
+      this.modalType = 1;
+      this.modalVisible = true;
+      this.modalTitle = "修改自提地址";
+      this.form.id = v.id;
+      this.form.address = v.address;
+      this.form.addressName = v.addressName;
+      this.form.mobile = v.mobile;
+      this.form.center = v.center;
+      this.form.longitude = v.center.split(",")[0];
+      this.form.latitude = v.center.split(",")[1];
+    },
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+          if (this.modalType == 0) {
+            const params = { ...this.form };
+            delete params.id;
+            API_Shop.addShopAddress(params).then((res) => {
+              this.submitLoading = false;
               if (res.success) {
-                this.$Message.success("此自自提地址已删除");
-                this.init();
+                this.$Message.success("添加成功");
+                this.getDataList();
+                this.modalVisible = false;
+              }
+            });
+          } else {
+            API_Shop.editShopAddress(this.form.id, this.form).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("修改成功");
+                this.getDataList();
+                this.modalVisible = false;
               }
             });
           }
-        });
-      }
+        }
+      });
     },
-    mounted() {
-      this.init();
+    deleteSubmit(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "确认删除自提地址么？",
+        loading: true,
+        onOk: () => {
+          API_Shop.deleteShopAddress(v.id).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("此自自提地址已删除");
+              this.init();
+            }
+          });
+        },
+      });
     },
-  };
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
-
+<style scoped>
+.link-text {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
+</style>
diff --git a/seller/src/views/shop/shopSetting.vue b/seller/src/views/shop/shopSetting.vue
index f432fd04..0fd01579 100644
--- a/seller/src/views/shop/shopSetting.vue
+++ b/seller/src/views/shop/shopSetting.vue
@@ -1,134 +1,133 @@
 <template>
   <div class="search">
-    <Card style="margin-left: 10px">
-      <Tabs v-model="type" @on-click="handleClickType">
-        <TabPane label="基本信息" name="INFO">
-          <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-            <FormItem label="店铺名称">
-              <Input v-model="storeName" disabled clearable style="width: 20%" />
-            </FormItem>
-            <FormItem label="店铺地址" prop="storeAddressPath">
+    <el-card style="margin-left: 10px">
+      <el-tabs v-model="type" @click="handleClickType">
+        <el-tab-pane label="基本信息" name="INFO">
+          <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+            <el-form-item label="店铺名称">
+              <el-input v-model="storeName" disabled clearable style="width: 20%" />
+            </el-form-item>
+            <el-form-item label="店铺地址" prop="storeAddressPath">
               <span>{{ form.storeAddressPath }}</span>
-              <Button style="margin-left: 10px;" @click="handleChangeAddress('storeAddress')">选择</Button>
-            </FormItem>
-            <FormItem label="详细地址" prop="shopAddressDetail">
-              <Input v-model="form.storeAddressDetail" clearable style="width: 20%" maxlength="50" />
-            </FormItem>
-            <FormItem label="店铺LOGO">
+              <el-button style="margin-left: 10px;" @click="handleChangeAddress('storeAddress')">选择</el-button>
+            </el-form-item>
+            <el-form-item label="详细地址" prop="shopAddressDetail">
+              <el-input v-model="form.storeAddressDetail" clearable style="width: 20%" maxlength="50" />
+            </el-form-item>
+            <el-form-item label="店铺LOGO">
               <upload-pic-thumb v-model="form.storeLogo" :multiple="false"></upload-pic-thumb>
-            </FormItem>
-            <FormItem label="店铺简介" prop="content" class="wangEditor">
-              <Input type="textarea" :rows="8" v-model="form.storeDesc" style="width: 30%"></Input>
-            </FormItem>
-            <FormItem label="店铺楼层" prop="content" class="wangEditor">
-              <i-switch v-model="form.pageShow" @on-change="pageShow"></i-switch>
+            </el-form-item>
+            <el-form-item label="店铺简介" prop="content" class="wangEditor">
+              <el-input type="textarea" :rows="8" v-model="form.storeDesc" style="width: 30%"></el-input>
+            </el-form-item>
+            <el-form-item label="店铺楼层" prop="content" class="wangEditor">
+              <el-switch v-model="form.pageShow" @change="pageShow" />
               <span class="desc">店铺楼层装修是否开启，开启后移动端PC端将会自动展示装修的内容</span>
-            </FormItem>
-            <FormItem label="开启自提" prop="content" class="wangEditor">
-              <i-switch v-model="form.selfPickFlag" @on-change="changeSelfPickFlag"></i-switch>
+            </el-form-item>
+            <el-form-item label="开启自提" prop="content" class="wangEditor">
+              <el-switch v-model="form.selfPickFlag" @change="changeSelfPickFlag" />
               <span class="desc">店铺是否开启自提功能</span>
-            </FormItem>
-            <Form-item>
-              <Button @click="handleSubmit" :loading="submitLoading" type="primary" style="margin-right: 5px">修改
-              </Button>
-            </Form-item>
-          </Form>
-        </TabPane>
-        <TabPane label="发货地址">
-          <Form ref="addressGoods" :model="addressGoods" :label-width="100" :rules="addressGoodsValidate">
-            <FormItem label="发货人姓名" prop="salesConsignorName">
-              <Input v-model="addressGoods.salesConsignorName" maxlength="11" clearable style="width: 20%">
-              </Input>
-            </FormItem>
-            <FormItem label="发货人手机号" prop="salesConsignorMobile">
-              <Input v-model="addressGoods.salesConsignorMobile" maxlength="11" clearable style="width: 20%">
-              </Input>
-            </FormItem>
-            <FormItem label="地址" prop="salesConsignorAddressId">
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleSubmit" :loading="submitLoading" type="primary" style="margin-right: 5px">修改
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="发货地址">
+          <el-form ref="addressGoods" :model="addressGoods" label-width="100px" :rules="addressGoodsValidate">
+            <el-form-item label="发货人姓名" prop="salesConsignorName">
+              <el-input v-model="addressGoods.salesConsignorName" maxlength="11" clearable style="width: 20%">
+              </el-input>
+            </el-form-item>
+            <el-form-item label="发货人手机号" prop="salesConsignorMobile">
+              <el-input v-model="addressGoods.salesConsignorMobile" maxlength="11" clearable style="width: 20%">
+              </el-input>
+            </el-form-item>
+            <el-form-item label="地址" prop="salesConsignorAddressId">
               <span>{{ addressGoods.salesConsignorAddressPath }}</span>
-              <Button style="margin-left: 10px;" @click="handleChangeAddress('addressGoods')">选择</Button>
-            </FormItem>
-            <!-- <FormItem label="地址名称" prop="salesConsignorAddressPath">
-              <Input
+              <el-button style="margin-left: 10px;" @click="handleChangeAddress('addressGoods')">选择</el-button>
+            </el-form-item>
+            <!-- <el-form-item label="地址名称" prop="salesConsignorAddressPath">
+              <el-input
                 v-model="addressGoods.salesConsignorAddressPath"
                 clearable
                 style="width: 20%"
               >
-              </Input>
-            </FormItem> -->
-            <FormItem label="详细地址" prop="salesConsignorDetail">
-              <Input v-model="addressGoods.salesConsignorDetail" clearable style="width: 20%">
-              </Input>
-            </FormItem>
-            <Button @click="setAddressGoods" type="primary" style="margin-left: 8px">确认
-            </Button>
-          </Form>
-        </TabPane>
-        <TabPane label="退货地址" name="REFUND_GOODS_ADDRESS">
-          <Form ref="addressForm" :model="addressForm" :label-width="100" :rules="afterFormValidate">
-            <FormItem label="收货人" prop="salesConsigneeName">
-              <Input v-model="addressForm.salesConsigneeName" maxlength="11" clearable style="width: 20%" />
-            </FormItem>
-            <FormItem label="收货人电话" prop="salesConsigneeMobile">
-              <Input v-model="addressForm.salesConsigneeMobile" maxlength="11" style="width: 20%" />
-            </FormItem>
-            <FormItem label="售后地址">
+              </el-input>
+            </el-form-item> -->
+            <el-form-item label="详细地址" prop="salesConsignorDetail">
+              <el-input v-model="addressGoods.salesConsignorDetail" clearable style="width: 20%">
+              </el-input>
+            </el-form-item>
+            <el-button @click="setAddressGoods" type="primary" style="margin-left: 8px">确认
+            </el-button>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="退货地址" name="REFUND_GOODS_ADDRESS">
+          <el-form ref="addressForm" :model="addressForm" label-width="100px" :rules="afterFormValidate">
+            <el-form-item label="收货人" prop="salesConsigneeName">
+              <el-input v-model="addressForm.salesConsigneeName" maxlength="11" clearable style="width: 20%" />
+            </el-form-item>
+            <el-form-item label="收货人电话" prop="salesConsigneeMobile">
+              <el-input v-model="addressForm.salesConsigneeMobile" maxlength="11" style="width: 20%" />
+            </el-form-item>
+            <el-form-item label="售后地址">
               <span>{{ addressForm.salesConsigneeAddressPath }}</span>
-              <Button style="margin-left: 10px;" @click="handleChangeAddress('salesConsigneeAddressPath')">选择</Button>
-            </FormItem>
-            <FormItem label="详细地址" prop="salesConsigneeDetail">
-              <Input v-model="addressForm.salesConsigneeDetail" clearable style="width: 20%" maxlength="50" />
-            </FormItem>
+              <el-button style="margin-left: 10px;" @click="handleChangeAddress('salesConsigneeAddressPath')">选择</el-button>
+            </el-form-item>
+            <el-form-item label="详细地址" prop="salesConsigneeDetail">
+              <el-input v-model="addressForm.salesConsigneeDetail" clearable style="width: 20%" maxlength="50" />
+            </el-form-item>
 
-            <Form-item>
-              <Button @click="afterHandleSubmit" :loading="submitLoading" type="primary" style="margin-right: 5px">修改
-              </Button>
-            </Form-item>
-          </Form>
-        </TabPane>
-        <TabPane label="库存预警" name="STOCK_WARNING">
-          <Form ref="stockWarningForm" :model="stockWarningForm" :label-width="100" :rules="stockWarningFormValidate">
-            <FormItem label="预警数" prop="stockWarning">
-              <InputNumber :min="0" :max="99999" v-model="stockWarningForm.stockWarning" type="number" maxlength="6"
-                clearable style="width: 20%" />
-            </FormItem>
+            <el-form-item>
+              <el-button @click="afterHandleSubmit" :loading="submitLoading" type="primary" style="margin-right: 5px">修改
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="库存预警" name="STOCK_WARNING">
+          <el-form ref="stockWarningForm" :model="stockWarningForm" label-width="100px" :rules="stockWarningFormValidate">
+            <el-form-item label="预警数" prop="stockWarning">
+              <el-input-number :min="0" :max="99999" v-model="stockWarningForm.stockWarning" style="width: 20%" />
+            </el-form-item>
 
-            <Form-item>
-              <Button @click="stockWarningHandleSubmit" :loading="submitLoading" type="primary"
+            <el-form-item>
+              <el-button @click="stockWarningHandleSubmit" :loading="submitLoading" type="primary"
                 style="margin-right: 5px">修改
-              </Button>
-            </Form-item>
-          </Form>
-        </TabPane>
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
         <!-- Udesk 坐席功能 后续维护 -->
-        <!-- <TabPane label="客服设置" name="UDESK">
-          <Form
+        <!-- <el-tab-pane label="客服设置" name="UDESK">
+          <el-form
             ref="udeskForm"
             :model="udeskForm"
-            :label-width="100"
+            label-width="100px"
             :rules="udeskFormValidate"
           >
-            <FormItem label="坐席id" prop="merchantEuid">
-              <Input
+            <el-form-item label="坐席id" prop="merchantEuid">
+              <el-input
                 v-model="udeskForm.merchantEuid"
                 maxlength="30"
                 clearable
                 style="width: 20%"
               />
-            </FormItem>
-            <Form-item>
-              <Button
+            </el-form-item>
+            <el-form-item>
+              <el-button
                 @click="merchantSubmit"
                 :loading="submitLoading"
                 type="primary"
                 style="margin-right: 5px"
                 >修改
-              </Button>
-            </Form-item>
-          </Form>
-        </TabPane> -->
-      </Tabs>
-    </Card>
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane> -->
+      </el-tabs>
+    </el-card>
 
     <multipleMap ref="map" @callback="callbackAddress" />
   </div>
diff --git a/seller/src/views/shop/system/clerk/clerkManage.vue b/seller/src/views/shop/system/clerk/clerkManage.vue
index e507c897..08e63fd8 100644
--- a/seller/src/views/shop/system/clerk/clerkManage.vue
+++ b/seller/src/views/shop/system/clerk/clerkManage.vue
@@ -1,158 +1,177 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="店员名称">
-          <Input
+    <el-card>
+      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form">
+        <el-form-item label="店员名称">
+          <el-input
             type="text"
             v-model="searchForm.clerkName"
             placeholder="请输入店员名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="联系方式">
-          <Input
+        </el-form-item>
+        <el-form-item label="联系方式">
+          <el-input
             type="text"
             v-model="searchForm.mobile"
             placeholder="请输入联系方式"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="部门">
-          <department-choose @on-change="handleSelectDep" style="width: 150px;" 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>
+        </el-form-item>
+        <el-form-item label="部门">
+          <department-choose @change="handleSelectDep" style="width: 150px;" ref="dep"></department-choose>
+        </el-form-item>
+        <el-button type="primary" class="search-btn" @click="handleSearch">
+          <el-icon><Search /></el-icon>
+          搜索
+        </el-button>
+      </el-form>
+      </el-card>
+        <el-card>
+      <div class="operation padding-row">
+        <el-button @click="add" type="primary">添加</el-button>
+        <el-button @click="delAll">批量删除</el-button>
+        <el-button @click="resetPass">重置密码</el-button>
+      </div>
       <br>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        sortable="custom"
-        @on-sort-change="changeSort"
-        @on-selection-change="showSelect"
+      <el-table
         ref="table"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%"
+        @selection-change="showSelect"
+        @sort-change="changeSort"
+      >
+        <el-table-column type="selection" width="60" align="center" fixed="left" />
+        <el-table-column prop="clerkName" label="店员名称" min-width="100" sortable="custom" fixed="left" />
+        <el-table-column prop="mobile" label="手机号码" min-width="100" fixed="left" />
+        <el-table-column label="店主" width="130" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.shopkeeper ? 'success' : 'danger'">{{ row.shopkeeper ? "是" : "否" }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="超级管理员" width="130" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.isSuper ? 'success' : 'danger'">{{ row.isSuper ? "是" : "否" }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="130" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.status ? 'success' : 'danger'">{{ row.status ? "启用" : "禁用" }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180" sortable="custom" />
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <a class="link-text" @click="edit(row)">编辑</a>
+            <span class="op-split">|</span>
+            <a class="link-text" @click="row.status ? disable(row) : enable(row)">
+              {{ row.status ? "禁用" : "启用" }}
+            </a>
+            <span class="op-split">|</span>
+            <a 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="[10, 20, 50]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[10,20,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>
 
-    <Modal
+    <el-dialog
       :title="modalTitle"
       v-model="userEditModalVisible"
-      :mask-closable="false"
-      :width="500"
-      :styles="{top: '30px'}"
+      :close-on-click-modal="false"
+      width="500px"
+      top="30px"
     >
-      <Form ref="form" :model="editForm" :label-width="80" :rules="formValidate">
-        <FormItem label="手机号">
-          <Input v-model="mobile" disabled/>
-        </FormItem>
-        <FormItem label="店员名称">
-          <Input v-model="clerkName" disabled/>
-        </FormItem>
-        <FormItem label="超级管理员" prop="isSuper">
-          <RadioGroup type="button" button-style="solid" v-model="editForm.isSuper">
-            <Radio :label="1">
-              <span>是</span>
-            </Radio>
-            <Radio :label="0">
-              <span>否</span>
-            </Radio>
-          </RadioGroup>
-        </FormItem>
+      <el-form ref="form" :model="editForm" label-width="80px" :rules="formValidate">
+        <el-form-item label="手机号">
+          <el-input v-model="mobile" disabled/>
+        </el-form-item>
+        <el-form-item label="店员名称">
+          <el-input v-model="clerkName" disabled/>
+        </el-form-item>
+        <el-form-item label="超级管理员" prop="isSuper">
+          <el-radio-group v-model="editForm.isSuper">
+            <el-radio-button value="1">是</el-radio-button>
+            <el-radio-button value="0">否</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
 
-        <FormItem label="角色" prop="roles" v-if="editForm.isSuper == 0">
-          <Select v-model="editForm.roles" multiple>
-            <Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
+        <el-form-item label="角色" prop="roles" v-if="editForm.isSuper == 0">
+          <el-select v-model="editForm.roles" multiple>
+            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属部门">
+          <department-tree-choose @change="handleEditSelectDepTree" ref="depTree"></department-tree-choose>
+        </el-form-item>
 
-            </Option>
-          </Select>
-        </FormItem>
-        <Form-item label="所属部门">
-          <department-tree-choose @on-change="handleEditSelectDepTree" ref="depTree"></department-tree-choose>
-        </Form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="userEditModalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="updateSubmit">提交</el-button>
+      </template>
+    </el-dialog>
 
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="userEditModalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="updateSubmit">提交</Button>
-      </div>
-    </Modal>
-
-    <Modal
+    <el-dialog
       :title="modalTitle"
       v-model="userModalVisible"
-      :mask-closable="false"
-      :width="500"
-      :styles="{top: '30px'}"
+      :close-on-click-modal="false"
+      width="500px"
+      top="30px"
     >
-      <Form ref="form" :model="form" :label-width="80" :rules="formValidate">
-        <FormItem label="手机号" prop="mobile">
-          <Input placeholder="请输入要添加的会员手机号码" maxlength="11" style="width: 75%" v-model="form.mobile"
-                 autocomplete="off" @on-change="checkClerks"/>
-          &nbsp;<Button v-if="!memberCheck" @click="checkClerk">校验</Button>
-          <Button v-if="memberCheck" @click="checkAgainClerk">重新校验</Button>
-        </FormItem>
-        <FormItem v-if="newMember" label="用户名" prop="username">
-          <Input v-model="form.username" autocomplete="off"/>
-        </FormItem>
-        <FormItem v-if="oldMember" label="用户名" prop="username">
-          <Input v-model="form.username" autocomplete="off" disabled/>
-        </FormItem>
+      <el-form ref="form" :model="form" label-width="80px" :rules="formValidate">
+        <el-form-item label="手机号" prop="mobile">
+          <el-input placeholder="请输入要添加的会员手机号码" maxlength="11" style="width: 75%" v-model="form.mobile"
+                 autocomplete="off" @change="checkClerks"/>
+          &nbsp;<el-button v-if="!memberCheck" @click="checkClerk">校验</el-button>
+          <el-button v-if="memberCheck" @click="checkAgainClerk">重新校验</el-button>
+        </el-form-item>
+        <el-form-item v-if="newMember" label="用户名" prop="username">
+          <el-input v-model="form.username" autocomplete="off"/>
+        </el-form-item>
+        <el-form-item v-if="oldMember" label="用户名" prop="username">
+          <el-input v-model="form.username" autocomplete="off" disabled/>
+        </el-form-item>
 
-        <FormItem label="密码" prop="password" v-if="newMember" :error="errorPass">
-          <Input type="password" password v-model="form.password" autocomplete="off"/>
-        </FormItem>
-        <FormItem label="超级管理员" prop="isSuper" v-if="newMember || oldMember">
-          <RadioGroup type="button" button-style="solid" v-model="form.isSuper">
-            <Radio :label="1">
-              <span>是</span>
-            </Radio>
-            <Radio :label="0">
-              <span>否</span>
-            </Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="角色" prop="roles" v-if="(oldMember || newMember) && form.isSuper == 0">
-          <Select v-model="form.roles" multiple>
-            <Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
+        <el-form-item label="密码" prop="password" v-if="newMember" :error="errorPass">
+          <el-input v-model="form.password" type="password" show-password autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="超级管理员" prop="isSuper" v-if="newMember || oldMember">
+          <el-radio-group v-model="form.isSuper">
+            <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="roles" v-if="(oldMember || newMember) && form.isSuper == 0">
+          <el-select v-model="form.roles" multiple>
+            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属部门" v-if="oldMember || newMember">
+          <department-tree-choose @change="handleSelectDepTree" ref="depTree"></department-tree-choose>
+        </el-form-item>
+      </el-form>
 
-            </Option>
-          </Select>
-        </FormItem>
-        <Form-item label="所属部门" v-if="oldMember || newMember">
-          <department-tree-choose @on-change="handleSelectDepTree" ref="depTree"></department-tree-choose>
-        </Form-item>
-      </Form>
-
-      <div slot="footer">
-        <Button type="text" @click="userModalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitUser">提交</Button>
-      </div>
-    </Modal>
+      <template #footer>
+        <el-button @click="userModalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitUser">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -169,6 +188,7 @@ import {
   getClerk
 } from "@/api/index";
 import {validateMobile} from "@/libs/validate";
+import { Search } from "@element-plus/icons-vue";
 import departmentChoose from "@/views/my-components/lili/department-choose";
 import departmentTreeChoose from "@/views/my-components/lili/department-tree-choose";
 import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
@@ -176,6 +196,7 @@ import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
 export default {
   name: "clerk-manage",
   components: {
+    Search,
     departmentChoose,
     departmentTreeChoose,
     uploadPicInput,
@@ -235,211 +256,6 @@ export default {
         ]
       },
       submitLoading: false, // 提交状态
-      columns: [ // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-          fixed: "left"
-        },
-        {
-          title: "店员名称",
-          key: "clerkName",
-          minWidth: 100,
-          sortable: true,
-          fixed: "left"
-        },
-        {
-          title: "手机号码",
-          key: "mobile",
-          minWidth: 100,
-          fixed: "left"
-        },
-        {
-          title: "店主",
-          key: "status",
-          align: "center",
-          width: 130,
-          render: (h, params) => {
-            if (params.row.shopkeeper == true) {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "success",
-                    text: "是"
-                  }
-                })
-              ]);
-            } else if (params.row.shopkeeper == false) {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "error",
-                    text: "否"
-                  }
-                })
-              ]);
-            }
-          },
-        },
-        {
-          title: "超级管理员",
-          key: "status",
-          align: "center",
-          width: 130,
-          render: (h, params) => {
-            if (params.row.isSuper == true) {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "success",
-                    text: "是"
-                  }
-                })
-              ]);
-            } else if (params.row.isSuper == false) {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "error",
-                    text: "否"
-                  }
-                })
-              ]);
-            }
-          },
-        },
-        {
-          title: "状态",
-          key: "status",
-          align: "center",
-          width: 130,
-          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",
-                  },
-                  on: {
-                    click: () => {
-                      this.disable(params.row);
-                    },
-                  },
-                },
-                "禁用"
-              );
-            } else {
-              enableOrDisable = h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.enable(params.row);
-                    },
-                  },
-                },
-                "启用"
-              );
-            }
-            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" } }, "|"),
-              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, // 总数
     };
@@ -539,11 +355,9 @@ export default {
     },
     // 排序
     changeSort(e) {
-      this.searchForm.sort = e.key;
-      this.searchForm.order = e.order;
-      if (e.order == "normal") {
-        this.searchForm.order = "";
-      }
+      this.searchForm.sort = e.prop;
+      this.searchForm.order =
+        e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
       this.getUserList();
     },
     // 获取角色列表
@@ -743,7 +557,7 @@ export default {
     },
     // 清除选中状态
     clearSelectAll() {
-      this.$refs.table.selectAll(false);
+      this.$refs.table?.clearSelection();
     },
     // 批量删除
     delAll() {
diff --git a/seller/src/views/shop/system/department/storeDepartmentManage.vue b/seller/src/views/shop/system/department/storeDepartmentManage.vue
index eaac4d5d..56e61241 100644
--- a/seller/src/views/shop/system/department/storeDepartmentManage.vue
+++ b/seller/src/views/shop/system/department/storeDepartmentManage.vue
@@ -1,129 +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="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>
-            <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>
-      </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>
 
@@ -138,24 +117,31 @@ import {
   getRoleList,
   updateDepartmentRole,
 } from "@/api/index";
+
 export default {
   name: "store-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: "", // 搜索关键字
-      form: { // 提交表单
+      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: "",
@@ -163,9 +149,8 @@ export default {
         sortOrder: 0,
         status: 0,
       },
-
-      formAdd: {}, // 新增表单
-      formValidate: { // 验证规则
+      formAdd: {},
+      formValidate: {
         title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
         sortOrder: [
           {
@@ -176,113 +161,120 @@ export default {
           },
         ],
       },
-      submitLoading: false, // 提交loading
-      data: [], // 部门数据
-      dataEdit: [], // 编辑时部门数据
-      users: [], // 用户
+      submitLoading: false,
+      data: [],
+      dataEdit: [],
+      users: [],
     };
   },
   methods: {
     init() {
       this.getParentList();
     },
-    // 获取部门数据
     getParentList() {
       this.loading = true;
       initDepartment().then((res) => {
         this.loading = false;
         if (res.success) {
-          this.data = res.result;
+          this.data = this.bubbleSort(res.result);
         }
       });
     },
-    // 动态加载二级数据
-    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) {
-
-          callback(res.result);
+          resolve(res.result || []);
+        } else {
+          resolve([]);
         }
       });
     },
+    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;
 
-    // 点击树
-    selectTree(v) {
-      if (v.length > 0) {
-        // 转换null为""
-        for (let attr in v[0]) {
-          if (v[0][attr] == null) {
-            v[0][attr] = "";
+      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;
+      for (let i = 0; i < len; i++) {
+        for (let j = 0; j < i; j++) {
+          if (array[j].sortOrder > array[i].sortOrder) {
+            const temp = array[j];
+            array[j] = array[i];
+            array[i] = temp;
           }
         }
-        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)
-
-        });
-
-        getRoleList({
-          pageNumber: 1,
-          pageSize: 10000,
-        }).then((res) => {
-          this.userLoading = false;
-          if (res.success) {
-            this.users = res.result.records;
-            // 回显
-            this.form = data;
-          }
-        });
-      } else {
-        this.cancelSelect();
       }
+      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) {
@@ -290,20 +282,18 @@ 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([
             editDepartment(this.form.id, this.form),
-            updateDepartmentRole(this.form.id, roleWay)
+            updateDepartmentRole(this.form.id, roleWay),
           ]).then((res) => {
-
             this.submitLoading = false;
             if (res[0].success) {
               this.$Message.success("编辑成功");
@@ -314,7 +304,6 @@ export default {
         }
       });
     },
-    // 确认添加部门
     submitAdd() {
       this.$refs.formAdd.validate((valid) => {
         if (valid) {
@@ -330,7 +319,6 @@ export default {
         }
       });
     },
-    // 添加子部门
     add() {
       if (this.form.id == "" || this.form.id == null) {
         this.$Message.warning("请先点击选择一个部门");
@@ -338,7 +326,6 @@ export default {
       }
       this.modalTitle = "添加子部门";
       this.showParent = true;
-
       this.formAdd = {
         parentId: this.form.id,
         sortOrder: 0,
@@ -346,7 +333,6 @@ export default {
       };
       this.modalVisible = true;
     },
-    // 添加一级部门
     addRoot() {
       this.modalTitle = "添加一级部门";
       this.showParent = false;
@@ -357,13 +343,6 @@ export default {
       };
       this.modalVisible = true;
     },
-    // 选中回调
-    changeSelect(v) {
-
-      this.selectCount = v.length;
-      this.selectList = v;
-    },
-    // 批量删除部门
     delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未勾选要删除的数据");
@@ -395,14 +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/seller/src/views/shop/system/role/storeRoleManage.vue b/seller/src/views/shop/system/role/storeRoleManage.vue
index 02e1e1df..03a2b1ce 100644
--- a/seller/src/views/shop/system/role/storeRoleManage.vue
+++ b/seller/src/views/shop/system/role/storeRoleManage.vue
@@ -1,77 +1,141 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation">
-        <Button @click="addRole" type="primary">添加角色</Button>
-        <Button @click="delAll">批量删除</Button>
-      </Row>
-      <br>
-      <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="[10, 20, 50]" size="small" show-total
-              show-elevator show-sizer></Page>
-      </Row>
-    </Card>
-
-    <!-- 编辑 -->
-    <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>
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="addRole">添加角色</el-button>
+        <el-button @click="delAll">批量删除</el-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>
 
@@ -87,248 +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",
-                  },
-                  on: {
-                    click: () => {
-                      this.editPerm(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" } }, "|"),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 角色数据
-      pageNumber: 1, // 页数
-      pageSize: 10, // 每页数量
-      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);
@@ -336,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;
@@ -356,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) {
@@ -384,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) {
@@ -403,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) {
@@ -416,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] = "";
@@ -443,7 +313,6 @@ export default {
       this.roleForm = roleInfo;
       this.roleModalVisible = true;
     },
-    // 删除
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
@@ -460,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("您还未选择要删除的数据");
@@ -496,23 +362,17 @@ export default {
         },
       });
     },
-
-    // 菜单权限
     async editPerm(v) {
-
-      /**
-       * 点击菜单权限每次将赋值的isSuper数据给清空掉
-       */
       this.permData.map((item) => {
         item.children.length != 0
           ? item.children.map((child) => {
-            child.children.length != 0
-              ? child.children.map((kid) => {
-                delete kid.isSuper;
-              })
-              : "";
-            delete child.isSuper;
-          })
+              child.children.length != 0
+                ? child.children.map((kid) => {
+                    delete kid.isSuper;
+                  })
+                : "";
+              delete child.isSuper;
+            })
           : "";
         delete item.isSuper;
       });
@@ -523,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) => {
-
         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;
       });
-
     },
-
-    /**保存权限 */
     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) {
@@ -633,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() {
@@ -742,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/seller/src/views/shop/wap/advertising.vue b/seller/src/views/shop/wap/advertising.vue
index 70257cc8..57398139 100644
--- a/seller/src/views/shop/wap/advertising.vue
+++ b/seller/src/views/shop/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,30 +57,47 @@
               <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>
+
+              <div class="decorate-view">
+                <div class="decorate-view-title">当前页面状态</div>
+                <div>
+                  <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> -->
-        <liliDialog ref="liliDialog" :types="linkType"></liliDialog>
+        <!-- <el-button type="primary" @click="addDecorate()" ghost>添加</el-button> -->
+        <liliDialog ref="liliDialog"    @selectedLink="selectedLink" :types="linkType"></liliDialog>
       </div>
+      <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>
 <script>
-
+import ossManage from "@/views/sys/oss-manage/ossManage";
+import * as API_Other from "@/api/other.js";
 export default {
+   components: {
+    ossManage,
+  },
   data() {
     return {
-
+      result:"",
+      picModelFlag: false, //图片选择器
       type: "full", // 是否全屏
 
       //全屏广告
@@ -91,31 +108,61 @@ export default {
           size: "750*1624",
         },
       ],
-
+      selectedLinks: {},
       linkType: "", // 选择类型
     };
+  },
+   watch: {
+    advertising: {
+      handler(val) {
+        this.$store.state.openStyleStore = val;
+        console.log(
+          "this.$store.state.openStyleStore",
+          this.$store.state.openStyleStore
+        );
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.openPage();
   },
   methods: {
+    openPage() {
+      const alertType = this.$route.query.pagetype;
+      const pageType = {
+        INDEX: "INDEX",
+        ALERT: "OPEN_SCREEN_PAGE",
+        OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
+      }[alertType ? alertType : "INDEX"];
+
+      API_Other.getOpenHomeData(pageType).then((res) => {
+        this.$store.state.openStoreId = res.result.id;
+        if (res.result.pageData) {
+          this.advertising = [JSON.parse(res.result.pageData)];
+        }
+        this.result = res.result
+      });
+    },
     // 点击链接
     clickLink(item) {
       this.$refs.liliDialog.open('link')
     },
-    //点击图片解析成base64
-    changeFile(item, index) {
-      const file = document.getElementById("files" + index).files[0];
-      if (file == void 0) return false;
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      this.$nextTick((res) => {
-        reader.onload = (e) => {
-          item.img = e.target.result;
-        };
-      });
+    // 回调选择的链接
+    selectedLink(val) {
+      this.selectedLinks.url = val;
+
+      this.advertising[0].config = val;
     },
     // 点击选择照片
-    handleClickFile(item, index) {
-      document.getElementById("files" + index).click();
-    },
+    handleClickFile() {
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    }, // 图片选择器回显
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.advertising[0].img = val.url;
+    }
   },
 };
 </script>
diff --git a/seller/src/views/shop/wap/alertAdvertising.vue b/seller/src/views/shop/wap/alertAdvertising.vue
index cddee110..c7658cd9 100644
--- a/seller/src/views/shop/wap/alertAdvertising.vue
+++ b/seller/src/views/shop/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,27 +57,50 @@
               <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>
+
+              <div class="decorate-view">
+                <div class="decorate-view-title">当前页面状态</div>
+                <div>
+                  <el-tag :type="result.pageShow === 'OPEN' ? 'success' : 'danger'">
+                    {{ result.pageShow === "OPEN" ? "开启" : "关闭" }}
+                  </el-tag>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <liliDialog ref="liliDialog" :types="linkType"></liliDialog>
+        <liliDialog
+          ref="liliDialog"
+          @selectedLink="selectedLink"
+          :types="linkType"
+        ></liliDialog>
       </div>
+      <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>
 <script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+import * as API_Other from "@/api/other.js";
 export default {
+   components: {
+    ossManage,
+  },
   data() {
     return {
+      result:"",
+      picModelFlag: false, //图片选择器
       type: "full", // 展示方式
       //全屏广告
       advertising: [
@@ -88,9 +111,58 @@ export default {
         },
       ],
       linkType: "", // 选择类型
+      selectedLinks: {},
     };
   },
+
+  watch: {
+    advertising: {
+      handler(val) {
+        this.$store.state.openStyleStore = val;
+        console.log(
+          "this.$store.state.openStyleStore",
+          this.$store.state.openStyleStore
+        );
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.openPage();
+  },
   methods: {
+    // 回调选择的链接
+    selectedLink(val) {
+      this.selectedLinks.url = val;
+
+      this.advertising[0].config = val;
+    },
+    openPage() {
+      const alertType = this.$route.query.pagetype;
+      const pageType = {
+        INDEX: "INDEX",
+        ALERT: "OPEN_SCREEN_PAGE",
+        OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
+      }[alertType ? alertType : "INDEX"];
+
+      API_Other.getOpenHomeData(pageType).then((res) => {
+        this.$store.state.openStoreId = res.result.id;
+        if (res.result.pageData) {
+          this.advertising = [JSON.parse(res.result.pageData)];
+        }
+        this.result = res.result
+      });
+    },
+    // 图片选择器回显
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.advertising[0].img = val.url;
+    },
+    // 点击选择图片
+    handleClickFile(item, index) {
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
     // 点击链接
     clickLink(item) {
       this.$refs.liliDialog.open('link')
@@ -107,10 +179,7 @@ export default {
         };
       });
     },
-    // 点击选择照片
-    handleClickFile(item, index) {
-      document.getElementById("files" + index).click();
-    },
+
   },
 };
 </script>
diff --git a/seller/src/views/shop/wap/decorate.scss b/seller/src/views/shop/wap/decorate.scss
index 0d0b04a8..12ba030e 100644
--- a/seller/src/views/shop/wap/decorate.scss
+++ b/seller/src/views/shop/wap/decorate.scss
@@ -1,5 +1,5 @@
 
-::v-deep .ivu-modal-mask,::v-deep .ivu-modal-wrap{
+:deep(.el-overlay) {
   z-index: 800;
 }
 .decorate-view-link{
diff --git a/seller/src/views/shop/wap/decorate.vue b/seller/src/views/shop/wap/decorate.vue
index 9f300a2f..49984c4c 100644
--- a/seller/src/views/shop/wap/decorate.vue
+++ b/seller/src/views/shop/wap/decorate.vue
@@ -2,131 +2,379 @@
   <div class="decorate">
     <div class="decorate-title">
       {{ res.name }}
-      <Button
+
+      <el-button
         style="margin-left: 20px"
         size="small"
-        ghost
-        v-if="res.type == 'tpl_ad_list' || res.type == 'tpl_activity_list' || res.drawer"
+        plain
+        v-if="
+          res.type == 'tpl_ad_list' ||
+          res.type == 'tpl_activity_list' ||
+          res.drawer
+        "
         type="primary"
         @click="selectStyle()"
-        >选择风格</Button
+        >选择风格</el-button
+      >
+      <el-button
+        style="margin-left: 20px"
+        size="small"
+        plain
+        v-if="res.type == 'promotions' || res.drawerPromotions"
+        type="primary"
+        @click="selectPromotions()"
+        >选择促销活动</el-button
       >
     </div>
+    <el-alert
+      v-if="res.name == '商品分类'"
+      type="warning"
+      title="装修提示"
+      :closable="false"
+    >
+      <template #default>
+        <div style="color: red">
+          如果当前装修模块不是最后一项模块且模块内容绑定为分类，则会默认展示绑定分类的100条商品信息。
+        </div>
+        <div style="color: red">
+          如果当前装修模块是最后一项模块且模块内容绑定为分类，则会默认会根据绑定分类触底加载商品信息。
+        </div>
+        <div style="color: red">
+          如果当前装修内容不为分类，则会展示当前商品的静态信息。
+        </div>
+      </template>
+    </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>
+
+    <!-- 右侧显示抽屉 -->
+    <el-drawer
+      title="选择促销活动(最多只能展示两个活动)"
+      :show-close="false"
+      size="400px"
+      v-model="promotionsFlag"
+    >
+      <div class="drawer">
+        <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>
+    </el-drawer>
 
     <!-- 卡片集合 -->
     <div
       class="decorate-list"
-      v-if="(res.type != 'tpl_ad_list' && res.type != 'tpl_activity_list') || res.drawer"
+      v-if="
+        (res.type != 'tpl_ad_list' &&
+          res.type != 'tpl_activity_list' &&
+          res.type != 'promotions') ||
+        res.drawer ||
+        res.drawerPromotions
+      "
     >
-      <div class="decorate-item" v-for="(item, index) in res.options.list" :key="index">
+      <div
+        class="decorate-item"
+        v-for="(item, index) in res.options.list"
+        :key="index"
+      >
         <div class="decorate-item-title">
           <div>卡片</div>
-          <Icon
+          <el-icon
+            v-if="res.close || res.type == 'promotionDetail'"
             @click="closeDecorate(index)"
-            v-if="res.close"
-            size="20"
+            :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">
-              <div class="decorate-view-title">绑定商品</div>
-              <div
-                class="decorate-view-link"
-                v-if="res.options.list[0].listWay.length != 0"
-              >
-                <!-- 绑定商品选择器回调已选择的商品 -->
-                <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"
-                >
-                  {{ bindGoods.title }},
+              <div class="decorate-view-title">绑定</div>
+              <div class="decorate-view-link">
+                <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
+                    "
+                    class="title-item wes-2"
+                  >
+                    <el-tooltip placement="left" :content="bindGoods.title">
+                      <div class="title-goodsName">
+                        {{ bindGoods.title }}
+                      </div>
+                    </el-tooltip>
+                    <div class="title-btn">
+                      <el-button
+                        @click="
+                          slotGoods(
+                            res.options.list[0].listWay,
+                            title_item.___index,
+                            bindGoods,
+                            'up'
+                          )
+                        "
+                        style="margin-right: 10px"
+                        size="small"
+                        >上移</el-button
+                      >
+                    </div>
+                  </div>
+                  </template>
+                </div>
+                <!-- 显示绑定分类 -->
+                <div v-if="title_item.bindCategory">
+                  绑定分类为：{{ title_item.bindCategory.name }}
                 </div>
               </div>
-              <div>
-                <Button @click="bindGoodsId(title_item)" size="small" ghost type="primary"
-                  >选择商品</Button
+
+              <div class="decorate-view-btn">
+                <el-button
+                  @click="bindGoodsId(title_item, title_index)"
+                  size="small"
+                  >选择商品</el-button
+                >
+                <el-button
+                  @click="bindGoodsCategory(title_index)"
+                  size="small"
+                  style="margin-top: 20px"
+                  >选择分类</el-button
                 >
               </div>
             </div>
           </div>
+          </template>
+          <div class="decorate-view" v-if="res.type == 'carousel'">
+            <div class="decorate-view-title">
+              <el-button
+                @click="slotBanner(res, item, index, 'up')"
+                style="margin-right: 10px"
+                size="small"
+                >上移</el-button
+              ><el-button
+                @click="slotBanner(res, item, index, 'down')"
+                size="small"
+                >下移</el-button
+              >
+            </div>
+          </div>
           <!-- 选择照片 -->
           <div class="decorate-view" v-if="!res.notImg">
             <div class="decorate-view-title">选择照片</div>
             <div>
               <img class="show-image" :src="item.img" alt />
 
-              <div class="tips">
+              <div class="tips" v-if="!res.onlyImg">
                 建议尺寸
                 <span>{{ item.size }}</span>
               </div>
             </div>
             <div class="selectBtn">
-              <Button
+              <el-button
                 size="small"
                 @click="handleClickFile(item, index)"
-                ghost
+                plain
                 type="primary"
-                >选择照片</Button
+                >选择照片</el-button
               >
             </div>
           </div>
-          <!-- 填写标题 -->
-          <div class="decorate-view" v-if="item.title != void 0 && !res.notTitle">
-            <div class="decorate-view-title">菜单标题</div>
-            <div>
-              <Input v-model="item.title" style="width: 200px" />
+          <div
+            class="decorate-view"
+            v-if="item.title != void 0 && !res.notTitle && res.type == 'title'"
+          >
+            <div class="decorate-view-title">文字对齐方式</div>
+            <div class="card-box">
+              <div
+                class="card"
+                :class="{ active: textAlign == 'left' }"
+                @click="changeTextAlign('left')"
+              >
+                <img
+                  :src="require('@/assets/align-text-left.png')"
+                  class="align-text"
+                  alt=""
+                />
+              </div>
+              <div
+                class="card"
+                :class="{ active: textAlign == 'center' }"
+                @click="changeTextAlign('center')"
+              >
+                <img
+                  :src="require('@/assets/align-text-center.png')"
+                  class="align-text"
+                  alt=""
+                />
+              </div>
+              <!-- <div
+                class="card"
+                :class="{ active: textAlign == 'right' }"
+                @click="changeTextAlign('right')"
+              >
+                <img
+                  :src="require('@/assets/align-text-right.png')"
+                  class="align-text"
+                  alt=""
+                />
+              </div> -->
             </div>
           </div>
+          <div
+            class="decorate-view"
+            v-if="
+              item.title != void 0 &&
+              !res.notTitle &&
+              (res.type == 'title' ||
+                res.type == 'notice' ||
+                res.type == 'promotionDetail')
+            "
+          >
+            <div class="decorate-view-title">背景颜色</div>
+            <div class="decorate-view">
+              <el-color-picker v-model="item.bk_color" />
+              <el-input v-model="item.bk_color" />
+            </div>
+          </div>
+          <div
+            class="decorate-view"
+            v-if="item.title != void 0 && !res.notTitle && res.type == 'notice'"
+          >
+            <div class="decorate-view-title">方向</div>
+            <div class="decorate-view">
+              <el-select
+                style="width: 200px"
+                @change="changeDirection($event, item)"
+                v-model="item.direction"
+              >
+                {{ item.direction }}
+                <el-option label="横向" value="horizontal"></el-option>
+                <el-option label="纵向" value="vertical"></el-option>
+              </el-select>
+            </div>
+          </div>
+
+          <!-- 填写标题 -->
+          <div
+            class="decorate-view"
+            v-if="item.title != void 0 && !res.notTitle && res.type != 'notice'"
+          >
+            <div class="decorate-view-title">菜单标题</div>
+            <div>
+              <el-input v-model="item.title" style="width: 200px" />
+            </div>
+          </div>
+          <div
+            class="decorate-view"
+            v-if="
+              item.title != void 0 &&
+              !res.notTitle &&
+              (res.type == 'title' || res.type == 'notice')
+            "
+          >
+            <div class="decorate-view-title">标题颜色</div>
+            <div class="decorate-view">
+              <el-color-picker v-model="item.color" />
+              <el-input v-model="item.color" />
+            </div>
+          </div>
+          <!-- 填写小标题 -->
+          <div
+            class="decorate-view"
+            v-if="item.title1 != void 0 && !res.notTitle"
+          >
+            <div class="decorate-view-title">小标题</div>
+            <div>
+              <el-input v-model="item.title1" style="width: 200px" />
+            </div>
+          </div>
+          <div
+            class="decorate-view"
+            v-if="item.title1 != void 0 && !res.notTitle"
+          >
+            <div class="decorate-view-title">小标题颜色</div>
+            <div class="decorate-view">
+              <el-color-picker v-model="item.color1" />
+              <el-input v-model="item.color1" />
+            </div>
+          </div>
+          <div
+            class="decorate-view"
+            v-if="res.type === 'notice' && !res.notTitle"
+          >
+            <div class="decorate-view-title">公告内容</div>
+            <div>
+              <div
+                v-for="(t, tindex) in item.title"
+                :key="tindex"
+                class="decorate-notice"
+              >
+                <el-input v-model="t.context" style="width: 200px" />
+                <el-icon @click="removeNotice(tindex)" :size="16" color="#e1251b">
+                  <CircleClose />
+                </el-icon>
+              </div>
+            </div>
+          </div>
+
+          <!-- 填写链接 -->
 
           <div class="decorate-view" v-if="res.onlyImg">
             <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>
 
@@ -139,7 +387,7 @@
               已选链接：
 
               <span>
-                <!-- {{
+                {{
                   ways.find((e) => {
                     return item.url.___type == e.name;
                   })
@@ -169,10 +417,6 @@
                 <span v-if="item.url.___type == 'other'">
                   {{ item.url.title }}</span
                 >
-                <!-- 当选择完链接之后的其他回调 -->
-                <span v-if="item.url.___type == 'brand'">
-                  {{ item.url.name }}</span
-                >
 
                 <!-- 当选择完活动之后的其他回调 -->
                 <span v-if="item.url.___type == 'marketing'">
@@ -181,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
@@ -190,28 +433,55 @@
               </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>
           <!-- 链接地址-->
+          <div
+            class="decorate-view"
+            v-if="
+              item.url &&
+              item.url.url !== undefined &&
+              item.url.___type == 'other'
+            "
+          >
+            <div class="decorate-view-title">外部链接</div>
+            <div>
+              <el-input v-model="item.url.url" style="width: 200px" />
+            </div>
+          </div>
 
+          <p
+            v-if="
+              item.url &&
+              item.url.url !== undefined &&
+              item.url.___type == 'other'
+            "
+          >
+            (如非同域名下，则在小程序与公众号中无效)
+          </p>
         </div>
       </div>
     </div>
 
-    <Button
-      v-if="res.type != 'tpl_ad_list' && res.type != 'tpl_activity_list' && !res.notAdd"
+    <el-button
+      v-if="
+        res.type != 'tpl_ad_list' &&
+        res.type != 'tpl_activity_list' &&
+        !res.notAdd &&
+        res.direction != 'horizontal'
+      "
       type="primary"
-      @click="addDecorate()"
-      ghost
-      >添加</Button
+      @click="addDecorate(res.type, res)"
+      plain
+      >添加</el-button
     >
 
     <liliDialog
@@ -219,22 +489,34 @@
       @selectedLink="selectedLink"
       @selectedGoodsData="selectedGoodsData"
     ></liliDialog>
+
+    <el-dialog width="800px" title="选择分类" v-model="enableSelectCategory" append-to-body destroy-on-close>
+      <categoryTemplate
+        v-if="enableSelectCategory"
+        @selected="confirmCategory"
+      />
+    </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 ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManages";
-import hotzone from "@/views/shop/hotzone";
+import { CircleClose } from "@element-plus/icons-vue";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 import { modelData } from "./config";
-import ways from "@/views/lili-dialog/wap.js"; // 选择链接的类型
+import hotzone from "@/views/shop/hotzone";
+import ways from "@/views/lili-dialog/wap.js";
+import categoryTemplate from "@/views/lili-dialog/template/category";
 export default {
   components: {
     ossManage,
     hotzone,
+    categoryTemplate,
+    CircleClose,
   },
   data() {
     return {
@@ -242,11 +524,17 @@ export default {
       picModelFlag: false, //图片选择器
       linkType: "goods", // dialog弹窗口类型
       styleFlag: false, //广告魔方开关
+      textAlign: this.res.options.list[0]
+        ? this.res.options.list[0].textAlign
+        : "center", //文字对齐方式
+      promotionsFlag: false, //广告魔方开关
       selectedLinkIndex: "", //选择链接的索引
       modelData, // 装修数据
       selectedGoods: "", // 已选商品
       selectedLinks: "", // 已选链接
       modelList: "", // 装修列表
+      enableSelectCategory: false, //商品是否绑定分类
+      goodsSelectedIndex: 0, //绑定商品分类的索引
     };
   },
   watch: {
@@ -257,14 +545,106 @@ export default {
   },
   props: ["res"],
   methods: {
+    // 选择分类
+    confirmCategory(val) {
+      let data = {
+        ...this.res.options.list[0].titleWay[this.goodsSelectedIndex],
+      };
+      let callback = {
+        id: val[0].id,
+        name: val[0].name,
+        categoryIdWay: val[0].id,
+      };
+      data = {
+        ...data,
+        bindCategory: callback,
+      };
+      this.res.options.list[0].listWay =
+        this.res.options.list[0].listWay.filter((item) => {
+          return item.___index != this.goodsSelectedIndex;
+        });
+      this.res.options.list[0].titleWay[this.goodsSelectedIndex] = data;
+
+      console.log(this.res.options.list[0]);
+    },
+    // 商品排序
+    slotGoods(list, key, val) {
+      const newVal = [];
+      let newValIndex = 0;
+      // 给当前点击的商品分组
+      list.forEach((item, index) => {
+        if (item.___index == key) {
+          newVal.push(item);
+        }
+      });
+      // 获得当前点击商品的索引
+      newVal.forEach((item, index) => {
+        if (item.id == val.id) {
+          newValIndex = index;
+        }
+      });
+      // 进行商品排序
+      this.upData(newVal, newValIndex);
+      if (list.length == newVal.length) {
+        list = newVal;
+      } else {
+        let newList;
+        newVal.forEach((item, index) => {
+          newList = list.filter((child) => {
+            return child.id != item.id && child.___index != key;
+          });
+        });
+        list = [...newList, ...newVal];
+      }
+
+      this.res.options.list[0]["listWay"] = list;
+    },
+
+    // 轮播图排序
+    slotBanner(val, key, index, down) {
+      console.log(val);
+      if (down == "down") {
+        this.downData(val.options.list, index);
+      } else {
+        this.upData(val.options.list, index);
+      }
+    },
+    upData(arr, index) {
+      let newArr = [];
+      if (arr.length > 1 && index !== 0) {
+        newArr = this.swapItems(arr, index, index - 1);
+      }
+      return newArr;
+    },
+    swapItems(arr, index1, index2) {
+      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
+      return arr;
+    },
+    downData(arr, index) {
+      let newArr = [];
+      if (arr.length > 1 && index !== arr.length - 1) {
+        newArr = this.swapItems(arr, index, index + 1);
+      }
+      return newArr;
+    },
+    // 改变横纵切换title内容
+    changeDirection(val, data) {
+      if (val == "horizontal") {
+        const props = { ...data };
+        data.title = [];
+        data.title.push(props.title[0]);
+      }
+    },
     // 选择风格
     selectStyle() {
       this.styleFlag = !this.styleFlag;
     },
+    selectPromotions() {
+      this.promotionsFlag = !this.promotionsFlag;
+    },
     // 回调选择的链接
     selectedLink(val) {
       this.selectedLinks.zoneInfo = [];
-      // 需删除图片中 intro 和 mobileIntro 可能存在转义符导致json出错问题
       delete val.selected;
       delete val.intro;
       delete val.mobileIntro;
@@ -285,15 +665,23 @@ export default {
           ...item,
         };
       });
-
       this.res.options.list[0].listWay.push(...data);
+      // 清除已经绑定的分类
+      this.res.options.list[0].titleWay[this.goodsSelectedIndex].bindCategory =
+        "";
       this.linkType = "";
     },
     // 绑定商品
-    bindGoodsId(val) {
+    bindGoodsId(val, index) {
       this.selectedGoods = val;
+      this.goodsSelectedIndex = index;
       this.liliDialogFlag(true);
     },
+    // 绑定分类
+    bindGoodsCategory(index, key) {
+      this.enableSelectCategory = true;
+      this.goodsSelectedIndex = index;
+    },
     // 点击抽屉
     clickDrawer(item, index) {
       this.$emit("handleDrawer", item);
@@ -301,10 +689,15 @@ export default {
     },
     // 打开图片选择器
     liliDialogFlag(flag) {
+      this.$refs.liliDialog.clearGoodsSelected();
       this.$refs.liliDialog.goodsFlag = flag;
       this.$refs.liliDialog.flag = true;
     },
 
+    changeTextAlign(val) {
+      this.res.options.list[0].textAlign = val;
+      this.textAlign = val;
+    },
     // 点击链接赋值一个唯一值，并将当前选择的模块赋值
     clickLink(val, index, oval) {
       this.selectedLinks = val;
@@ -337,15 +730,35 @@ export default {
       });
     },
     //添加设置
-    addDecorate() {
+    addDecorate(type, data) {
+      if (type === "notice") {
+        if (data.options.list[0].direction == "vertical") {
+          this.res.options.list[0].title.push({
+            content: "",
+          });
+        } else {
+          this.$Message.error("仅纵向支持多添加");
+        }
+      } else {
+        let way = {
+          img: "https://picsum.photos/id/264/200/200",
+          title: "标题",
+          link: "",
+          url: "",
+          size: this.res.options.list[0] ? this.res.options.list[0].size : "",
+          model: "link",
+        };
+        this.res.options.list.push(way);
+      }
+    },
+    addHotPoint() {
       let way = {
         img: "https://picsum.photos/id/264/200/200",
-        title: "标题",
+        text: "标题",
         link: "",
         url: "",
-        size: this.res.options.list[0]?.size,
       };
-      this.res.options.list.push(way);
+      this.res.options.list[0].points.push(way);
     },
     // 图片选择器回显
     callbackSelected(val) {
@@ -358,6 +771,11 @@ export default {
       this.selectedGoods = item;
       this.picModelFlag = true;
     },
+    removeNotice(index) {
+      this.$nextTick(() => {
+        this.res.options.list[0].title.splice(index, 1);
+      });
+    },
     // 关闭
     closeDecorate(index) {
       this.$nextTick(() => {
diff --git a/seller/src/views/shop/wap/index.vue b/seller/src/views/shop/wap/index.vue
index d850b51b..fa1e5703 100644
--- a/seller/src/views/shop/wap/index.vue
+++ b/seller/src/views/shop/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"
-            :key="index"
+            v-if="!model.drawer && !model.drawerPromotions"
             class="model-item"
           >
             <img src alt />
             <span>{{ model.name }}</span>
           </li>
+          </template>
         </draggable>
       </div>
 
@@ -44,18 +44,19 @@
               <component
                 class="component"
                 :class="{ active: selected == index }"
-                @click.native="handleComponent(element, index)"
+                @click="handleComponent(element, index)"
                 :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,15 +74,18 @@
   </div>
 </template>
 <script>
+import { CircleClose } from "@element-plus/icons-vue";
 import templates from "./template/index";
 import Draggable from "vuedraggable";
 import { modelData } from "./config";
 import decorate from "./decorate";
-import * as API_Other from '@/api/other'
+import * as API_Other from "@/api/other";
+import * as API_Promotions from "@/api/promotion";
 export default {
   components: {
     Draggable,
     decorate,
+    CircleClose,
   },
   data() {
     return {
@@ -89,10 +93,12 @@ export default {
       modelData, // 装修模型
       qrcode: "", // 二维码
       selected: 0, // 已选下标
-      contentData: { // 总数据
+      contentData: {
+        // 总数据
         list: [],
       },
       decorateData: "", // 装修数据
+      decoratePromotionsData: "", // 装修数据
     };
   },
   watch: {
@@ -108,16 +114,10 @@ export default {
   },
 
   methods: {
-
-    enableBindGoodsShow(){
-
-    },
-
-
     // 初始化数据
     init() {
-       // 先读缓存，如果缓存有值则读缓存。
-       const cache = this.getStore('sellerMobilePageCache')
+      // 先读缓存，如果缓存有值则读缓存。
+      const cache = this.getStore('managerMobilePageCache')
         if(cache){
           this.$Modal.confirm({
           title: '提示',
@@ -132,12 +132,13 @@ export default {
 
         }
       if (!this.$route.query.id) return false;
-      API_Other.getHomeData(this.$route.query.id).then(res=>{
-        this.contentData = JSON.parse(res.result.pageData)
 
+      API_Other.getHomeData(this.$route.query.id).then((res) => {
+        this.contentData = JSON.parse(res.result.pageData);
+
+        this.handleComponent(this.contentData.list[0], 0);
+      });
 
-         this.handleComponent( this.contentData.list[0], 0)
-      })
     },
 
     // 中间组件拖动，右侧数据绑定不变
@@ -151,7 +152,6 @@ export default {
       this.$nextTick(() => {
         this.decorateData = "";
 
-
         // 如果当前楼层不为一
         if (this.contentData.list.length > 1) {
           // 如果当前最底层 给下一层赋值
@@ -171,44 +171,96 @@ export default {
 
     // 点击楼层装修
     handleComponent(val, index) {
-
       this.selected = index;
-      this.$set(this, "decorateData", val);
+      this["decorateData"] = val;
     },
     // 右侧栏回调
     handleDrawer(val) {
-
       let newIndex = this.selected;
+      if (val.promotionsType) {
+        if (this.contentData.list[newIndex].options.list.length >= 2) {
+          this.$Message.error("最多只能展示两个活动");
+          return;
+        }
+        if (val.promotionsType === "LIVE") {
+          API_Promotions.getLiveList({
+            status: "START",
+            pageSize: 1,
+          }).then((res) => {
+            if (res.success && res.result.size > 0) {
+              API_Promotions.getLiveInfo(res.result.records[0].id).then(
+                (res) => {
+                  if (res.success) {
+                    this.contentData.list[newIndex].options.list.push({
+                      type: val.promotionsType,
+                      title: val.name,
+                      title1: val.subName,
+                      color1: val.subColor,
+                      bk_color: val.subBkColor,
+                      data: res.result.commodityList
+                        ? res.result.commodityList.splice(0, 2)
+                        : [],
+                    });
+                  }
+                }
+              );
+            }
+          });
+        } else {
+          API_Promotions.getAllPromotion().then((res) => {
+            let exist = this.contentData.list[newIndex].options.list.find(
+              (i) => i.type === val.promotionsType
+            );
 
-      this.decorateData = "";
+            if (res.success && !exist) {
+              this.contentData.list[newIndex].options.list.push({
+                data: res.result[val.promotionsType]
+                  ? res.result[val.promotionsType].splice(0, 2)
+                  : [],
+                type: val.promotionsType,
+                title1: val.subName,
+                color1: val.subColor,
+                bk_color: val.subBkColor,
+                title: val.name,
+              });
+            }
+          });
+        }
+        this.contentData.list[newIndex] = {
+          ...val,
+          options: {
+            ...this.contentData.list[newIndex].options,
+          },
+          model: val.type,
+        };
+      } else {
+        this.decorateData = "";
 
-      this.$set(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.contentData.list[newIndex] = {
+          ...val,
+          options: {
+            ...val.options,
+          },
+          model: val.type,
+        };
+        this.contentData.list = JSON.parse(
+          JSON.stringify(this.contentData.list)
+        );
+        this["decorateData"] = this.contentData.list[newIndex];
+      }
     },
 
     // 封装拖拽参数
     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/seller/src/views/shop/wap/main.vue b/seller/src/views/shop/wap/main.vue
index 62bd675e..9b3ea637 100644
--- a/seller/src/views/shop/wap/main.vue
+++ b/seller/src/views/shop/wap/main.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="box">
     <!-- 顶部栏 -->
-    <navbar @selected="selected" />
+    <navbar @selected="selected" :pagetype="pagetype" />
 
     <component :is="layout[name]"></component>
   </div>
@@ -11,16 +11,28 @@ import layout from "./index";
 import navbar from "./navbar";
 export default {
   components: {
-    navbar,
+    navbar
   },
+
   data() {
     return {
       layout, // 装修模块
       name: "index", // 装修的页面
+      pagetype: "INDEX",
     };
   },
+  mounted() {
+    if (this.$route.query.pagetype == "ALERT") {
+      this.name = "alertAdvertising";
+    }
+    if (this.$route.query.pagetype == "OPEN_SCREEN_ANIMATION") {
+      this.name = "advertising";
+    }
+    this.pagetype = this.$route.query.pagetype;
+  },
   methods: {
-    selected(val) { // 顶部栏点击切换
+    selected(val) {
+      // 顶部栏点击切换
       this.name = val;
     }
   }
diff --git a/seller/src/views/shop/wap/navbar.vue b/seller/src/views/shop/wap/navbar.vue
index 67a768d3..cfd6bb24 100644
--- a/seller/src/views/shop/wap/navbar.vue
+++ b/seller/src/views/shop/wap/navbar.vue
@@ -3,55 +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>
@@ -59,6 +60,7 @@
 import * as API_Other from "@/api/other.js";
 
 export default {
+  props: ["pagetype"],
   data() {
     return {
       hasCache:false, // 是否有缓存
@@ -72,40 +74,57 @@ export default {
           name: "index",
           selected: true,
         },
-        // {
-        //   title: "全屏广告",
-        //   name: "advertising",
-        //   selected: false,
-        // },
-        // {
-        //   title: "弹窗广告",
-        //   name: "alertAdvertising",
-        //   selected: false,
-        // },
+        {
+          title: "全屏广告",
+          name: "advertising",
+          selected: false,
+        },
+        {
+          title: "弹窗广告",
+          name: "ALERT",
+          selected: false,
+        },
       ],
 
       submitWay: {
         // 表单信息
         pageShow: this.$route.query.type || false,
         name: this.$route.query.name || "模板名称",
-        pageClientType: "H5",
-      },
+        pageClientType: "H5"
+      }
     };
   },
-  watch: {},
+  watch: {
+    pagetype: {
+      handler(val) {
+        this.way.length = 0;
+        if (val == "INDEX") {
+          this.way.push({ title: "首页", name: "index", selected: true });
+        } else if (val == "SPECIAL") {
+          this.way.push({ title: "专题", name: "special", selected: true });
+        } else if (val == "ALERT") {
+          this.way.push({ title: "开屏广告", name: "alert", selected: true });
+        }else if (val == "OPEN_SCREEN_ANIMATION") {
+          this.way.push({ title: "app开屏页面", name: "OPEN_SCREEN_ANIMATION", selected: true });
+        }
+      },
+      immediate: true,
+    },
+  },
   mounted() {
-    this.hasCache = this.getStore('sellerMobilePageCache') ? true : false;
+    this.hasCache = this.getStore('managerMobilePageCache') ? true : false;
   },
   methods: {
     clearCache(){
-      this.setStore('sellerMobilePageCache','');
+      this.setStore('managerMobilePageCache','');
       this.$Message.success('清空成功')
     },
     // 将楼层装修的内容写入到本地缓存中
     witeLocalStore(){
-      this.setStore('sellerMobilePageCache', this.$store.state.styleStore)
+      this.setStore('managerMobilePageCache', this.$store.state.styleStore)
       this.$Message.success('写入成功')
     },
+
     clickBtn(val) {
       this.way.forEach((item, index) => {
         item.selected = false;
@@ -123,7 +142,10 @@ export default {
 
     // 填写是否发布，模板名称之后保存
     save() {
-      if (this.$store.state.styleStore == void 0) {
+       if (
+        this.$store.state.styleStore == void 0 &&
+        (this.$route.query.pagetype && this.$route.query.pagetype != 'ALERT' &&  this.$route.query.pagetype != 'OPEN_SCREEN_ANIMATION')
+      ) {
         this.$Message.error("请装修楼层");
         return false;
       }
@@ -133,21 +155,76 @@ export default {
         : (this.submitWay.pageShow = "CLOSE");
 
       this.submitWay.pageData = JSON.stringify(this.$store.state.styleStore);
-      this.submitWay.pageType = "STORE";
+      this.submitWay.pageType = "INDEX";
+      this.submitWay.pageType =  this.$route.query.pagetype ||  "INDEX";
+      // this.submitWay.pageType = this.pagetype;
 
-      this.$route.query.id ? this.update() : this.submit(this.submitWay);
+      if (this.$route.query.pagetype == 'ALERT' || this.$route.query.pagetype == 'OPEN_SCREEN_ANIMATION') {
+        this.update(this.submitWay);
+      } else {
+        this.$route.query.id ? this.updateHome() : this.submit(this.submitWay);
+      }
+
+      // this.$route.query.id ? this.update() : this.submit(this.submitWay);
     },
 
     // 更新
-    update() {
+    updateHome() {
       this.progress = false;
       API_Other.updateHome(this.$route.query.id, {
         pageData: JSON.stringify(this.$store.state.styleStore),
         name: this.submitWay.name,
         pageShow: this.submitWay.pageShow,
-        pageType: "STORE",
+        pageType: this.submitWay.pageType,
         pageClientType: "H5",
       })
+        .then(res => {
+          this.num = 50;
+          if (res.success) {
+            this.num = 80;
+            /**制作保存成功动画¸ */
+            setTimeout(() => {
+              this.saveDialog = false;
+              this.$Message.success("修改成功");
+              this.goBack();
+            }, 1000);
+          } else {
+            this.saveDialog = false;
+            this.$Message.error("修改失败，请稍后重试");
+          }
+          console.log(res);
+        })
+        .catch(error => {});
+    },
+
+
+    // 更新
+    update(submitWay) {
+      console.log(this.$store.state.openStyleStore[0], "123123123");
+      if (this.$store.state.openStyleStore == void 0) {
+        this.$Message.error("请装修楼层!");
+        return false;
+      }
+      this.progress = false;
+
+      let id = this.$route.query.id;
+      const pagetype = this.$route.query.pagetype;
+      console.log(this.$store.state.openStyleStore, submitWay);
+      const pageType = {
+        INDEX: "INDEX",
+        ALERT: "OPEN_SCREEN_PAGE",
+        OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
+      }[pagetype ? pagetype : "INDEX"];
+
+      if (pagetype) {
+        submitWay.pageData = JSON.stringify(
+          this.$store.state.openStyleStore[0]
+        );
+        submitWay.pageType = pageType;
+        id = this.$store.state.openStoreId;
+      }
+
+      API_Other.updateHome(id, submitWay)
         .then((res) => {
           this.num = 50;
           if (res.success) {
@@ -156,18 +233,21 @@ export default {
             setTimeout(() => {
               this.saveDialog = false;
               this.$Message.success("修改成功");
-              this.goback();
+              this.goBack();
             }, 1000);
           } else {
             this.saveDialog = false;
             this.$Message.error("修改失败，请稍后重试");
           }
+          console.log(res);
         })
         .catch((error) => {});
     },
 
+
+
     // 返回查询数据页面
-    goback() {
+    goBack() {
       this.$router.go(-1);
     },
 
@@ -175,7 +255,7 @@ export default {
     submit(submitWay) {
       this.progress = false;
       API_Other.setHomeSetup(submitWay)
-        .then((res) => {
+        .then(res => {
           this.num = 50;
           if (res.success) {
             this.num = 80;
@@ -183,17 +263,18 @@ export default {
             setTimeout(() => {
               this.saveDialog = false;
               this.$Message.success("保存成功");
-              this.goback();
+              this.goBack();
             }, 1000);
           } else {
             this.progress = true;
             this.saveDialog = false;
             this.$Message.error("保存失败，请稍后重试");
           }
+          console.log(res);
         })
-        .catch((error) => {});
-    },
-  },
+        .catch(error => {});
+    }
+  }
 };
 </script>
 <style scoped lang="scss">
diff --git a/seller/src/views/shop/wap/style.scss b/seller/src/views/shop/wap/style.scss
index 600b2f31..4b4fe187 100644
--- a/seller/src/views/shop/wap/style.scss
+++ b/seller/src/views/shop/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/seller/src/views/shop/wap/template/tpl_banner.vue b/seller/src/views/shop/wap/template/tpl_banner.vue
index e45bd27a..e4b9cfe1 100644
--- a/seller/src/views/shop/wap/template/tpl_banner.vue
+++ b/seller/src/views/shop/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/seller/src/views/shop/wap/template/tpl_flex_one.vue b/seller/src/views/shop/wap/template/tpl_flex_one.vue
index 87a23274..a53fcc41 100644
--- a/seller/src/views/shop/wap/template/tpl_flex_one.vue
+++ b/seller/src/views/shop/wap/template/tpl_flex_one.vue
@@ -15,7 +15,6 @@ export default {
 .flex-one{
     width: 100%;
     display: block;
-    height: 110px;
     overflow: hidden;
     >img{
         width: 100%;
diff --git a/seller/src/views/shop/wap/template/tpl_goods.vue b/seller/src/views/shop/wap/template/tpl_goods.vue
index 1bb3566f..c8ae39e9 100644
--- a/seller/src/views/shop/wap/template/tpl_goods.vue
+++ b/seller/src/views/shop/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: {
@@ -98,7 +101,7 @@ export default {
   padding: 10px;
   transition: 0.35s;
   display: flex;
-  cursor: pointer;
+  // cursor: pointer;
   > .goods-item-title {
     flex: 1;
     text-align: center;
diff --git a/seller/src/views/shop/wap/template/tpl_menu.vue b/seller/src/views/shop/wap/template/tpl_menu.vue
index 7fd1357c..1e942c32 100644
--- a/seller/src/views/shop/wap/template/tpl_menu.vue
+++ b/seller/src/views/shop/wap/template/tpl_menu.vue
@@ -1,38 +1,39 @@
 <template>
-    <div class="layout">
-        <div class="menu-list">
-            <div class="menu-item" v-for="(item,index) in res.list" :key="index">
-                <div>
-                    <img class="menu-img" :src="item.img" alt="">
-                </div>
-                <div class="menu-title">{{item.title}}</div>
-            </div>
+  <div class="layout">
+    <div class="menu-list">
+      <div class="menu-item" v-for="(item, index) in res.list" :key="index">
+        <div>
+          <img class="menu-img" :src="item.img" alt="" />
         </div>
+        <div class="menu-title">{{ item.title }}</div>
+      </div>
     </div>
+  </div>
 </template>
 <script>
 export default {
-    props:['res']
-}
+  props: ["res"],
+};
 </script>
 <style lang="scss" scoped>
-   @import "./tpl.scss";
-   .menu-list{
-       display: flex;
-       align-items: center;
-       flex-wrap: wrap;
+@import "./tpl.scss";
+.menu-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
 
-       >.menu-item{
-           text-align: center;
-           width: 20%;
-           margin:10px 0;
-       }
-   }
-   .menu-img{
-       width: 44px;
-       height: 44px;
-   }
-   .menu-title{
-       font-size: 12px;
-   }
+  > .menu-item {
+    text-align: center;
+    width: 20%;
+    margin: 10px 0;
+  }
+}
+.menu-img {
+  width: 44px;
+  height: 44px;
+}
+.menu-title {
+  font-size: 12px;
+}
 </style>
diff --git a/seller/src/views/shop/wap/template/tpl_search.vue b/seller/src/views/shop/wap/template/tpl_search.vue
index f190bf6a..5be127fa 100644
--- a/seller/src/views/shop/wap/template/tpl_search.vue
+++ b/seller/src/views/shop/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/seller/src/views/shop/wap/template/tpl_title.vue b/seller/src/views/shop/wap/template/tpl_title.vue
index 5fce25ff..7286f2ce 100644
--- a/seller/src/views/shop/wap/template/tpl_title.vue
+++ b/seller/src/views/shop/wap/template/tpl_title.vue
@@ -1,9 +1,26 @@
 <template>
-  <div class="layout">
-    <div class="background">
+  <div class="layout" :style="{ textAlign: res.list[0].textAlign }">
+    <div class="background" :style="{ backgroundColor: res.list[0].bk_color }">
       <div class="title" :style="{ color: res.list[0].color }">
         {{ res.list[0].title }}
       </div>
+      <div
+        style="
+          position: absolute;
+          right: 10px;
+          top: 2px;
+          color: #fff;
+          line-height: 42px;
+          font-size: 10px;
+        "
+      >
+        <a
+          :href="res.list[0].url"
+          :style="{ color: res.list[0].color1 }"
+          style="text-decoration: none"
+          >{{ res.list[0].title1 }}</a
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -11,13 +28,14 @@
 <script>
 export default {
   title: "标题栏",
-  props: ["res"]
+  props: ["res"],
 };
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
 .background {
-  background: url("../../../../assets/title.png") no-repeat;
+  background-color: rgb(255, 87, 62);
+  /*background: url("../../../../assets/title.png") no-repeat;*/
   position: absolute;
   z-index: 2;
   width: 100%;
@@ -37,7 +55,8 @@ export default {
 }
 .title {
   line-height: 42px;
-  font-size: 15px;
+  font-size: 18px;
   font-weight: bold;
+  margin-left: 4px;
 }
 </style>
diff --git a/seller/src/views/shop/wap/wapList.vue b/seller/src/views/shop/wap/wapList.vue
index 2923ba32..b3cbb984 100644
--- a/seller/src/views/shop/wap/wapList.vue
+++ b/seller/src/views/shop/wap/wapList.vue
@@ -1,119 +1,126 @@
 <template>
-  <div class="wrapper">
-
-    <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>
-            <a
-              style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-              @click="handleEdit(item)"
-            >修改</a>
-            <span style="margin: 0 8px; color: #dcdee2">|</span>
-            <Poptip confirm title="删除此模板？" @on-ok="handleDel(item)" >
-              <a style="color:#2d8cf0;cursor:pointer;text-decoration:none">删除</a>
-            </Poptip>
-          </div>
-        </div>
-        <div class="no-more" v-if="list.length ==0">暂无更多模板</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>
-      <Page :total="total" size="small" @on-change="(val) => {params.pageNumber = val; } " :current="params.pageNumber" :page-size="params.pageSize" show-sizer  :page-size-opts="[20, 50, 100]" @on-page-size-change="changePageSize"/>
-
-    </Card>
-
+      <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>
+    </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,
+      pageTypes: [
+        { type: "INDEX", title: "首页" },
+        { type: "SPECIAL", title: "专题" },
       ],
-
-      loading: false, // 加载状态
-
-      params: { // 请求参数
+      params: {
         pageNumber: 1,
         pageSize: 20,
         sort: "createTime",
         order: "desc",
-        pageType: "STORE",
+        pageType: "INDEX",
         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) {
-      this.params.pageNumber = 1
-      this.selectedIndex = index
+    handleTabChange(val) {
+      if (val == "ALERT") {
+        this.$router.push({
+          path: "/floorList/main",
+          query: { pagetype: val },
+        });
+        return;
+      }
+      if (val == "OPEN_SCREEN_ANIMATION") {
+        this.$router.push({
+          path: "/floorList/main",
+          query: { pagetype: val },
+        });
+        return;
+      }
+      this.params.pageNumber = 1;
       this.params.pageType = val;
+      this.init();
+    },
+
+    changePageNum(val) {
+      this.params.pageNumber = val;
+      this.init();
     },
-    // 是否发布
     changeSwitch(item) {
       this.loading = true;
       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;
         this.loading = false;
+        if (!res.result) return false;
         res.result.records.forEach((item) => {
           if (item.pageShow == "OPEN") {
             item.pageShow = true;
@@ -125,95 +132,50 @@ export default {
         this.total = res.result.total;
       });
     },
-    // 装修楼层
     handleEdit(val) {
       this.$router.push({
         path: "/floorList/main",
-        query: { id: val.id, name: val.name, type: val.pageShow },
+        query: {
+          id: val.id,
+          name: val.name,
+          type: val.pageShow,
+          pagetype: this.params.pageType,
+        },
       });
     },
-    // 添加模板
     handleAdd() {
       this.$router.push({
         path: "/floorList/main",
+        query: { pagetype: this.params.pageType },
       });
     },
-     // 分页 改变页数
-     changePageSize(v) {
+    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) => {
+        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/seller/src/views/statistics/goods.vue b/seller/src/views/statistics/goods.vue
index 6652574e..f6ead9f3 100644
--- a/seller/src/views/statistics/goods.vue
+++ b/seller/src/views/statistics/goods.vue
@@ -1,79 +1,69 @@
 <template>
   <div>
-
-      <Card class="card fixed-bottom">
-        <affixTime :closeShop="true" @selected="clickBreadcrumb"/>
-      </Card>
-
-    <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 affixTime from "@/views/lili-components/affix-time";
 import * as API_Goods from "@/api/goods";
-import Cookies from "js-cookie";
+import affixTime from "@/views/lili-components/affix-time";
 
 export default {
-  components: { affixTime },
+  components: {
+    affixTime,
+  },
   data() {
     return {
-      setting:"",
-      params: { // 请求参数
+      params: {
         searchType: "LAST_SEVEN",
         year: "",
         month: "",
-        storeId: JSON.parse(Cookies.get("userInfoSeller")).id || '',
-        type: "NUM"
+        shopId: "",
+        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: [],
     };
-  },
-  computed:{
-
   },
   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) {
@@ -88,11 +78,29 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.fixed-bottom{
-  position:sticky;
-  z-index: 999;
-  top: 0;
+.page-col {
+  text-align: right;
+  margin: 10px 0;
 }
+
+.order-col {
+  display: flex;
+
+  > div {
+    margin-right: 8px;
+    padding: 16px;
+    font-size: 15px;
+  }
+}
+
+.order-list {
+  display: flex;
+}
+
+.tips {
+  margin: 0 8px;
+}
+
 .card {
   margin-bottom: 10px;
 }
diff --git a/seller/src/views/statistics/order.vue b/seller/src/views/statistics/order.vue
index e4cdfda2..ba144f93 100644
--- a/seller/src/views/statistics/order.vue
+++ b/seller/src/views/statistics/order.vue
@@ -1,75 +1,99 @@
 <template>
-
   <div class="wrapper">
-      <Card class="card fixed-bottom">
+    <el-affix :offset="100">
+      <el-card class="card fixed-bottom">
         <affixTime @selected="clickBreadcrumb" />
-      </Card>
+      </el-card>
+    </el-affix>
 
-    <Card class="card">
+    <el-card class="card">
       <div>
         <h4>交易概况</h4>
         <div class="flex">
           <div class="transactionList">
-            <div class="transaction-item" v-for="(item,index) in transactionList" :key="index">
-              <h4>{{item.label}}</h4>
-              <div class="transaction-card" v-if="item.label=='转换'">
-
+            <div
+              class="transaction-item"
+              v-for="(item, index) in transactionList"
+              :key="index"
+            >
+              <h4>{{ item.label }}</h4>
+              <div class="transaction-card" v-if="item.label == '转换'">
                 <div class="card-item">
                   <div class="card-item-label">访客数UV</div>
-                  <div class="card-item-value">{{overViewList.uvNum || 0}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.uvNum || 0 }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">下单转化率</div>
-                  <div class="card-item-value">{{overViewList.orderConversionRate || '0%'}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.orderConversionRate || "0%" }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">付款转化率</div>
-                  <div class="card-item-value">{{overViewList.paymentsConversionRate ||'0%'}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.paymentsConversionRate || "0%" }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">全店转化率</div>
-                  <div class="card-item-value">{{overViewList.overallConversionRate || '0%'}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.overallConversionRate || "0%" }}
+                  </div>
                 </div>
-
               </div>
-              <div class="transaction-card" v-if="item.label=='订单'">
+              <div class="transaction-card" v-if="item.label == '订单'">
                 <div class="card-item">
                   <div class="card-item-label">下单笔数</div>
-                  <div class="card-item-value">{{overViewList.orderNum || 0}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.orderNum || 0 }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">下单人数</div>
-                  <div class="card-item-value">{{overViewList.orderMemberNum || 0}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.orderMemberNum || 0 }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">下单金额</div>
-                  <div class="card-item-value">{{overViewList.orderAmount || 0 | unitPrice('￥')}}</div>
+                  <div class="card-item-value">
+                    {{ $filters.unitPrice(overViewList.orderAmount || 0, "￥") }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">付款笔数</div>
-                  <div class="card-item-value">{{overViewList.paymentOrderNum  || 0}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.paymentOrderNum || 0 }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">付款人数</div>
-                  <div class="card-item-value">{{overViewList.paymentsNum || 0}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.paymentsNum || 0 }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">付款金额</div>
-                  <div class="card-item-value">{{ overViewList.paymentAmount || 0 | unitPrice('￥')}}</div>
+                  <div class="card-item-value">
+                    {{ $filters.unitPrice(overViewList.paymentAmount || 0, "￥") }}
+                  </div>
                 </div>
-
               </div>
-              <div class="transaction-card" v-if="item.label=='退单'">
-
+              <div class="transaction-card" v-if="item.label == '退单'">
                 <div class="card-item">
                   <div class="card-item-label">退单笔数</div>
-                  <div class="card-item-value">{{overViewList.refundOrderNum || 0}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.refundOrderNum || 0 }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">退单金额</div>
-                  <div class="card-item-value">{{overViewList.refundOrderPrice || 0 | unitPrice('￥')}}</div>
+                  <div class="card-item-value">
+                    {{ $filters.unitPrice(overViewList.refundOrderPrice || 0, "￥") }}
+                  </div>
                 </div>
-
               </div>
             </div>
           </div>
@@ -79,107 +103,181 @@
               <div class="block">
                 <div class="box">
                   <span>访客数</span>
-                  <span>{{overViewList.uvNum  || 0}}</span>
+                  <span>{{ overViewList.uvNum || 0 }}</span>
                 </div>
               </div>
               <!-- 中 -->
               <div class="block">
                 <div class="box">
                   <span>下单笔数</span>
-                  <span>{{overViewList.orderNum  || 0}}</span>
+                  <span>{{ overViewList.orderNum || 0 }}</span>
                 </div>
               </div>
               <!-- 下 -->
               <div class="block">
                 <div class="box">
                   <span>付款笔数</span>
-                  <span>{{overViewList.paymentOrderNum  || 0 }}</span>
+                  <span>{{ overViewList.paymentOrderNum || 0 }}</span>
                 </div>
               </div>
 
               <!-- 线 -->
-              <div class="rightBorder">
-
-              </div>
-              <div class="leftTopBorder">
-
-              </div>
-              <div class="leftBottomBorder">
-
-              </div>
+              <div class="rightBorder"></div>
+              <div class="leftTopBorder"></div>
+              <div class="leftBottomBorder"></div>
               <!--数据 -->
               <div class="leftTopTips">
-                <div>下单转化率 </div>
-                <div>{{overViewList.orderConversionRate  || '0%' }}</div>
+                <div>下单转化率</div>
+                <div>{{ overViewList.orderConversionRate || "0%" }}</div>
               </div>
               <div class="leftBottomTips">
                 <div>付款转化率</div>
-                <div>{{overViewList.paymentsConversionRate  || '0%'}}</div>
+                <div>{{ overViewList.paymentsConversionRate || "0%" }}</div>
               </div>
               <div class="rightTips">
                 <div>整体转换率</div>
-                <div>{{overViewList.overallConversionRate  || '0%'}}</div>
+                <div>{{ overViewList.overallConversionRate || "0%" }}</div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </Card>
+    </el-card>
 
-    <Card class="card">
+    <el-card class="card">
       <div>
         <h4>交易趋势</h4>
-        <div>
-
-        </div>
+        <div></div>
       </div>
 
       <div>
-
         <div id="orderChart"></div>
-
       </div>
-    </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>
-        <Page @on-change="pageNumberChange" @on-page-size-change="pageSizeChange" class="mt_10" show-total show-elevator :total="total" />
-      </div>
-    </Card>
+    </el-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>
 import * as API_Goods from "@/api/goods";
 import { Chart } from "@antv/g2";
-
 import orderRow from "./order/orderDetail";
 import refundRow from "./order/refundOrder";
 import affixTime from "@/views/lili-components/affix-time";
-import Cookies from "js-cookie";
+
 export default {
   components: { orderRow, refundRow, affixTime },
 
   data() {
     return {
-      orderOrRefund: 1, // 订单还是退单
-      total:0, // 订单总数
+      orderOrRefund: "order", // order | refund
+      total: 0, // 总数
       // 订单状态
       orderStatusList: {
         UNDELIVERED: "待发货",
         UNPAID: "未付款",
         PAID: "已付款",
         DELIVERED: "已发货",
-        CANCELLED: "已取消",
+        CANCELLED: "已关闭",
         COMPLETED: "已完成",
         TAKE: "已完成",
       },
@@ -192,7 +290,7 @@ export default {
         RETURN_MONEY: "退款",
       },
       serviceStatusList: {
-        // 服务类型
+        // 服务状态
         APPLY: "申请售后",
         PASS: "通过售后",
         REFUSE: "拒绝售后",
@@ -207,140 +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}} );
-          },
-        },
-      ],
-      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: "sellerName",
-        },
-        {
-          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, "￥")
-            );
-          },
-        },
-      ],
+      data: [],
 
       // 交易概况
       transactionList: [
@@ -387,37 +352,35 @@ export default {
           value: "LAST_THIRTY",
         },
       ],
-
       // 订单传参
       orderParams: {
         searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
         year: "",
-        storeId: JSON.parse(Cookies.get("userInfoSeller")).id || "",
+        shopId: "",
         memberId: "",
       },
       // 订单概念
       overViewParams: {
         month: "",
         searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
-        storeId: JSON.parse(Cookies.get("userInfoSeller")).id || "",
+        storeId: "",
         year: "",
       },
       defaultParams: {
         month: "",
         searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
-        storeId: JSON.parse(Cookies.get("userInfoSeller")).id || "",
+        storeId: "",
         year: "",
       },
-
-      refundIndex: 0, // 当前退单下标详情
       // 退单订单
       refundParams: {
         pageNumber: 1,
         pageSize: 20,
         searchType: "LAST_SEVEN",
-        storeId: JSON.parse(Cookies.get("userInfoSeller")).id || "",
+        storeId: "",
         year: "",
       },
+      showRecords:false,
 
       //
       //
@@ -425,16 +388,17 @@ export default {
   },
   watch: {
     refundParams: {
-      handler() {
-        if (this.refundIndex == 1) {
-          this.getOrderRefundList();
-        } else {
-          this.getOrderList();
-        }
+      handler(val) {
+        this.getOrderList();
       },
       deep: true,
       immediate: true,
     },
+    orderOrRefund() {
+      this.showRecords = false;
+      this.refundParams.pageNumber = 1;
+      this.getOrderList();
+    },
     orderParams: {
       handler() {
         this.initOrderChartList();
@@ -447,25 +411,12 @@ export default {
       },
       deep: true,
     },
-    orderOrRefund: {
-      // 订单还是退单
-      handler(val) {
-        if (val == 1) {
-          this.getOrderList();
-        } else {
-          this.getOrderRefundList();
-        }
-      },
-    },
   },
   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() {
@@ -500,16 +451,20 @@ export default {
           stroke: "#fff",
           lineWidth: 1,
         });
+         this.orderChart.area().position("createTime*price").color("title").shape("smooth");
+
       this.orderChart.render();
     },
-    // 时间筛选
+
     clickBreadcrumb(item, index) {
       let callback = JSON.parse(JSON.stringify(item));
-
+      console.log("callback",callback)
       this.orderParams = callback;
 
       this.overViewParams = callback;
       this.refundParams = callback;
+      this.refundParams.pageNumber = 1
+      this.refundParams.pageSize = 20
     },
 
     // 实例化订单概览
@@ -540,20 +495,17 @@ export default {
     },
     // 统计相关订单统计
     async getOrderList() {
-      const res = await API_Goods.statisticsOrderList(this.refundParams);
-      if (res.success) {
-        this.data = res.result.records;
-        this.columns = this.orderColumns;
-        this.total = res.result.total;
+      let res;
+      if (this.orderOrRefund === "order") {
+        // 订单
+        res = await API_Goods.statisticsOrderList(this.refundParams);
+      } else {
+        // 退单
+        res = await API_Goods.statisticsOrderRefundList(this.refundParams);
       }
-    },
-
-    //  统计相关退单统计
-    async getOrderRefundList() {
-      const res = await API_Goods.statisticsOrderRefundList(this.refundParams);
       if (res.success) {
+        this.showRecords = true;
         this.data = res.result.records;
-        this.columns = this.refundColumns;
         this.total = res.result.total;
       }
     },
@@ -573,11 +525,6 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.fixed-bottom{
-  position:sticky;
-  z-index: 999;
-  top: 0;
-}
 .active {
   color: $theme_color;
   position: relative;
@@ -718,7 +665,7 @@ export default {
       z-index: 2;
     }
   }
-  ::v-deep .box {
+  :deep(.box){
     color: #fff;
     position: absolute;
 
@@ -795,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/seller/src/views/statistics/order/orderDetail.vue b/seller/src/views/statistics/order/orderDetail.vue
index b8a17740..0adb6f18 100644
--- a/seller/src/views/statistics/order/orderDetail.vue
+++ b/seller/src/views/statistics/order/orderDetail.vue
@@ -1,70 +1,81 @@
 <template>
-  <div>
+  <div class="wrapper">
     <div class="shop">
       <h3>订单详情</h3>
       <div class="shop-item">
         <div class="label-item">
           <span>订单来源</span>
-          <span>{{res.clientType}}</span>
+          <span>{{ $filters.clientTypeWay(res.clientType) }}</span>
         </div>
         <div class="label-item">
           <span>订单状态</span>
-          <span>{{orderStatusList[res.orderStatus]}}</span>
+          <span>{{ orderStatusList[res.orderStatus] }}</span>
         </div>
         <div class="label-item">
           <span>付款状态</span>
-          <span>{{res.payStatus == "UNPAID"
-                ? "未付款"
-                : res.payStatus == "PAID"
-                ? "已付款"
-                : ""}}</span>
+          <span>{{
+            res.payStatus == "UNPAID"
+              ? "未付款"
+              : res.payStatus == "PAID"
+              ? "已付款"
+              : ""
+          }}</span>
         </div>
         <div class="label-item">
           <span>支付时间</span>
-          <span>{{res.paymentTime || '暂无'}}</span>
+          <span>{{ res.paymentTime || "暂无" }}</span>
         </div>
         <div class="label-item">
           <span>支付方式</span>
-          <span>{{res.paymentMethod == "ONLINE" ? "在线支付" : ""
-            }}{{ res.paymentMethod == "ALIPAY" ? "支付宝" : res.paymentMethod == "BANK_TRANSFER" ? "银行卡" : "" || '暂无'}}</span>
+          <span
+            >{{ res.paymentMethod == "ONLINE" ? "在线支付" : ""
+            }}{{
+              res.paymentMethod == "ALIPAY"
+                ? "支付宝"
+                : res.paymentMethod == "BANK_TRANSFER"
+                ? "银行卡"
+                : "" || "暂无"
+            }}</span
+          >
         </div>
-
       </div>
       <div class="shop-item">
         <div class="label-item">
           <span>用户名</span>
-          <span>{{res.memberName}}</span>
+          <span>{{ res.memberName }}</span>
         </div>
         <div class="label-item">
           <span>店铺名称</span>
-          <span>{{res.storeName}}</span>
+          <span>{{ res.storeName }}</span>
         </div>
         <div class="label-item">
           <span>创建时间</span>
-          <span>{{res.createTime}}</span>
+          <span>{{ res.createTime }}</span>
         </div>
-
       </div>
       <h3>商品详情</h3>
       <div class="shop-item">
-
-        <div class="goods-item" v-for="(item,index) in res.orderItems" :key="index">
+        <div
+          class="goods-item"
+          @click="handleClickGoods(item.goodsId)"
+          v-for="(item, index) in res.orderItems"
+          :key="index"
+        >
           <div class="goods-img">
-            <img class="img" :src="item.image" alt="">
+            <img class="img" :src="item.image" alt="" />
           </div>
           <div class="goods-title">
-            <div>{{item.name}}</div>
-            <div>{{'x'+item.num}}</div>
-            <div class="goods-price">{{res.flowPrice |  unitPrice('￥')}}</div>
-
+            <div>{{ item.name }}</div>
+            <div>{{ "x" + item.num }}</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">{{res.flowPrice |  unitPrice('￥')}}</span>
+          <span class="flowPrice" :style="{ color: $mainColor }">
+            {{ $filters.unitPrice(res.flowPrice, "￥") }}</span>
         </div>
       </div>
     </div>
@@ -75,17 +86,26 @@ export default {
   data() {
     return {
       orderStatusList: {
+        // 订单状态
         UNDELIVERED: "待发货",
         UNPAID: "未付款",
         PAID: "已付款",
         DELIVERED: "已发货",
-        CANCELLED: "已取消",
+        CANCELLED: "已关闭",
         COMPLETED: "已完成",
         TAKE: "已完成",
       },
     };
   },
   props: ["res"],
+  methods: {
+    handleClickGoods(id) {
+      this.$router.push({
+        query: { id },
+        path: "/goods/goods-info/goodsDetail",
+      });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -110,6 +130,7 @@ h3 {
   display: flex;
   width: 100%;
   margin: 16px;
+  cursor: pointer;
 }
 .count-price {
   display: flex;
@@ -135,13 +156,14 @@ h3 {
 }
 .label-item {
   margin: 10px 0;
-  width: 20%;
+  width: 33%;
   padding: 8px;
   align-items: center;
   font-weight: bold;
   display: flex;
-  > span {
-    padding: 8px;
+  > span:nth-child(1) {
+    width: 70px;
+    color: #999;
   }
 }
 </style>
diff --git a/seller/src/views/statistics/order/refundOrder.vue b/seller/src/views/statistics/order/refundOrder.vue
index 116c0441..d16a7db1 100644
--- a/seller/src/views/statistics/order/refundOrder.vue
+++ b/seller/src/views/statistics/order/refundOrder.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="wrapper">
     <div class="shop">
       <h3>售后详情</h3>
       <div class="shop-item">
@@ -14,13 +14,16 @@
 
         <div class="label-item">
           <span>退款时间</span>
-          <span>{{res.refundTime || '暂无'}}</span>
+          <span>{{
+            res.refundTime
+              ? $filters.unixToDate(new Date(res.refundTime).getTime() / 1000)
+              : "暂无"
+          }}</span>
         </div>
         <div class="label-item">
           <span>申请退款金额</span>
-          <span>
-            <priceColorScheme :value="afterSaleInfo.applyRefundPrice" :color="$mainColor" />
-          </span>
+          <span :style="{ color: $mainColor }">
+            {{ $filters.unitPrice(res.applyRefundPrice, "￥") }}</span>
         </div>
         <div class="label-item">
           <span>商家备注</span>
@@ -39,25 +42,24 @@
         </div>
         <div class="label-item">
           <span>店铺名称</span>
-          <span>{{res.sellerName}}</span>
+          <span>{{res.storeName}}</span>
         </div>
         <div class="label-item">
           <span>创建时间</span>
           <span>{{res.createTime}}</span>
         </div>
-
       </div>
       <h3>商品详情</h3>
       <div class="shop-item">
 
-        <div class="goods-item">
+        <div  @click="handleClickGoods(res.goodsId)" class="goods-item">
           <div class="goods-img">
             <img class="img" :src="res.goodsImage" alt="">
           </div>
           <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>
 
@@ -66,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>
@@ -77,12 +79,12 @@
 export default {
   data() {
     return {
-      orderStatusList: {
+      orderStatusList: { // 订单状态
         UNDELIVERED: "待发货",
         UNPAID: "未付款",
         PAID: "已付款",
         DELIVERED: "已发货",
-        CANCELLED: "已取消",
+        CANCELLED: "已关闭",
         COMPLETED: "已完成",
         TAKE: "已完成",
       },
@@ -109,16 +111,23 @@ export default {
     };
   },
   props: ["res"],
+  methods: {
+    handleClickGoods(id) {
+      this.$router.push({
+        query: { id },
+        path: "/goods/goods-info/goodsDetail",
+      });
+    },
+  }
 };
 </script>
 <style lang="scss" scoped>
 .shop {
-  padding: 10px 0;
+  padding: 5px 0;
   background: #fff;
 }
 .shop-item {
   display: flex;
-
   flex-wrap: wrap;
 }
 h3 {
@@ -133,6 +142,7 @@ h3 {
   display: flex;
   width: 100%;
   margin: 16px;
+  cursor: pointer;
 }
 .count-price {
   display: flex;
@@ -157,13 +167,18 @@ h3 {
 }
 .label-item {
   margin: 10px 0;
-  width: 20%;
+  width: 33%;
   padding: 8px;
   align-items: center;
   font-weight: bold;
   display: flex;
-  > span {
-    padding: 8px;
+  > span:nth-child(1) {
+    width: 90px;
+    color: #999;
+  }
+  > span:nth-child(2){
+    text-align: left;
+    white-space: wrap;
   }
 }
 </style>
diff --git a/seller/src/views/statistics/traffic.vue b/seller/src/views/statistics/traffic.vue
index fc050b8d..9361e241 100644
--- a/seller/src/views/statistics/traffic.vue
+++ b/seller/src/views/statistics/traffic.vue
@@ -1,118 +1,69 @@
 <template>
-  <div>
-      <Card class="card fixed-bottom">
+  <div class="wrapper">
+    <el-affix :offset="100">
+      <el-card class="card fixed-bottom">
         <affixTime @selected="clickBreadcrumb" />
-      </Card>
-    <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>
+        <h4>会员流量报表</h4>
+        <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>
 import affixTime from "@/views/lili-components/affix-time";
 import * as API_Member from "@/api/member";
 import { Chart } from "@antv/g2";
-import Cookies from "js-cookie";
+
 export default {
   components: { affixTime },
 
   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: "",
-        storeId: JSON.parse(Cookies.get("userInfoSeller")).id || "",
       },
-      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();
@@ -121,15 +72,9 @@ export default {
     },
   },
   methods: {
-    // 订单图
     initChart() {
-      // 默认已经加载 legend-filter 交互
-      /**
-       * 将数据分成三组来进行展示
-       */
-
-      let uv = [];
-      let pv = [];
+      const uv = [];
+      const pv = [];
 
       this.data.forEach((item) => {
         uv.push({
@@ -146,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],
@@ -177,24 +122,21 @@ export default {
           stroke: "#fff",
           lineWidth: 1,
         });
+      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;
           res.result.forEach((item) => {
-            this.uvs += parseInt(item.uvNum);
-            this.pvs += parseInt(item.pvNum);
+            this.uvs += item.uvNum;
+            this.pvs += item.pvNum;
           });
 
           if (!this.orderChart) {
@@ -216,24 +158,14 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.fixed-bottom{
-  position:sticky;
-  z-index: 999;
-  top: 0;
-}
 .table {
   margin-top: 10px;
 }
-.wrapper {
-  padding-bottom: 200px;
-}
 .box-item {
   display: flex;
-
   flex-direction: column;
   width: 25%;
   font-weight: bold;
-  // align-items: center;
   justify-content: center;
   > div {
     margin: 4px;
diff --git a/seller/src/views/sys/oss-manage/ossManage.vue b/seller/src/views/sys/oss-manage/ossManage.vue
index aaaf9ac1..5acbe31a 100644
--- a/seller/src/views/sys/oss-manage/ossManage.vue
+++ b/seller/src/views/sys/oss-manage/ossManage.vue
@@ -1,5 +1,6 @@
 <style lang="scss">
 @import "./ossManage.scss";
+
 .group-row {
   padding-top: 10px;
   border-top: 1px solid #ededed;
@@ -7,245 +8,455 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
   > * {
     margin-right: 10px;
   }
 }
+
 .article-category {
   flex: 2;
   min-width: 200px;
 }
+
 .table {
   flex: 11;
 }
-.ivu-card {
+
+.el-card {
   width: 100%;
 }
+
 .modal-footer {
   text-align: center;
+
   > * {
     margin: 0 10px;
   }
 }
 
+.tab-empty {
+  padding: 48px 0;
+  color: #999;
+  text-align: center;
+}
+
+.tabs-card {
+  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">
-    <Row>
-      <Card>
-        <div class="operation">
-          <Row @keydown.enter.native="handleSearch">
-            <Form
-              ref="searchForm"
-              :label-width="85"
-              :model="searchForm"
-              class="search-form"
-              inline
-            >
-              <Form-item label="上传时间">
-                <DatePicker
-                  v-model="selectDate"
-                  clearable
-                  format="yyyy-MM-dd"
-                  placeholder="选择起始时间"
-                  style="width: 240px"
-                  type="daterange"
-                  @on-change="selectDateRange"
-                ></DatePicker>
-              </Form-item>
-              <Form-item label="上传人" prop="ownerName">
-                <Input
-                  type="text"
-                  v-model="searchForm.ownerName"
-                  placeholder="图片拥有者名称"
-                  clearable
-                  style="width: 240px"
-                />
-              </Form-item>
-              <Button
-                class="search-btn"
-                icon="ios-search"
-                type="primary"
-                @click="handleSearch"
-              >搜索
-              </Button>
-            </Form>
-          </Row>
-        </div>
-      </Card><Card>
-        <div class="operation">
-          <Row class="oss-manage-box">
-            <Col :span="isComponent?5:4">
+    <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">
+            <el-row @keyup.enter="handleSearch">
+              <el-form
+                ref="searchForm"
+                label-width="85px"
+                :model="searchForm"
+                class="search-form"
+                inline
+              >
+                <el-form-item label="上传时间">
+                  <el-date-picker
+                    v-model="selectDate"
+                    clearable
+                    value-format="YYYY-MM-DD"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    style="width: 240px"
+                    type="daterange"
+                    @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>
+          <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="isComponent?19:20">
+            </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="{
-                  directoryPath: searchForm.fileDirectoryId,
-                }"
+                        :data="uploadData"
                         :headers="accessToken"
-                        :max-size="20480"
+                        :before-upload="beforeUpload"
                         :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>
-                      <Dropdown @on-click="handleDropdown" v-if="!isComponent">
-                        <Button>
-                          更多操作
-                          <Icon type="md-arrow-dropdown"/>
-                        </Button>
-                        <DropdownMenu slot="list">
-                          <DropdownItem name="refresh">刷新</DropdownItem>
-                          <DropdownItem v-show="showType == 'list'" name="removeAll"
-                          >批量删除
-                          </DropdownItem>
-                        </DropdownMenu>
-                      </Dropdown>
+                        <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">
-                            <div class="text">{{item.name}}</div>
-                          </Tooltip>
+                          <el-tooltip :content="item.name" placement="bottom">
+                            <div class="text">{{ item.name }}</div>
+                          </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>
-        </div>
-      </Card>
-    </Row>
-    <Modal
-      v-model="modalVisible"
-      :mask-closable="false"
-      :title="modalTitle"
-      :width="500"
-    >
-      <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-col>
+          </el-row>
 
-    <Modal v-model="picVisible" :title="picTitle" draggable>
+
+          <!--<div class="oss-operation padding-row">-->
+          <!--<div>-->
+          <!--<Upload-->
+          <!--ref="up"-->
+          <!--:action="commonUrl + '/common/common/upload/file'"-->
+          <!--:data="{-->
+          <!--directoryPath: searchForm.fileDirectoryId,-->
+          <!--}"-->
+          <!--:headers="accessToken"-->
+          <!--:max-size="20480"-->
+          <!--:on-error="handleError"-->
+          <!--:on-exceeded-size="handleMaxSize"-->
+          <!--:on-success="handleSuccess"-->
+          <!--:show-upload-list="false"-->
+          <!--multiple-->
+          <!--style="display: inline-block"-->
+          <!--&gt;-->
+          <!--<Button>上传图片</Button>-->
+          <!--</Upload>-->
+          <!--<Dropdown @on-click="handleDropdown" v-if="!isComponent">-->
+          <!--<Button>-->
+          <!--更多操作-->
+          <!--<Icon type="md-arrow-dropdown"/>-->
+          <!--</Button>-->
+          <!--<DropdownMenu slot="list">-->
+          <!--<DropdownItem name="refresh">刷新</DropdownItem>-->
+          <!--<DropdownItem v-show="showType == 'list'" name="removeAll"-->
+          <!--&gt;批量删除-->
+          <!--</DropdownItem>-->
+          <!--</DropdownMenu>-->
+          <!--</Dropdown>-->
+          <!--</div>-->
+          <!--</div>-->
+        </div>
+
+        <!--<Alert show-icon v-if="!isComponent">-->
+        <!--已选择-->
+        <!--<span>{{ selectCount }}</span> 项-->
+        <!--<a class="select-clear" @click="clearSelectAll">清空</a>-->
+        <!--<span v-if="selectCount > 0" style="margin-left: 15px"-->
+        <!--&gt;共计 {{ totalSize }} 存储量</span-->
+        <!--&gt;-->
+        <!--</Alert>-->
+
+        <!--<div v-show="showType === 'list'" >-->
+        <!--<div class="flex">-->
+        <!--<div class="article-category mr_10">-->
+        <!--<Tree-->
+        <!--:data="treeData"-->
+        <!--@on-contextmenu="handleContextMenu"-->
+        <!--@on-select-change="handleCateChange"-->
+        <!--&gt;-->
+        <!--<template slot="contextMenu" v-if="!isComponent">-->
+        <!--<DropdownItem @click.native="handleContextMenuEdit"-->
+        <!--&gt;编辑-->
+        <!--</DropdownItem-->
+        <!--&gt;-->
+        <!--<DropdownItem-->
+        <!--style="color: #ed4014"-->
+        <!--@click.native="handleContextMenuDelete"-->
+        <!--&gt;删除-->
+        <!--</DropdownItem-->
+        <!--&gt;-->
+        <!--</template>-->
+        <!--</Tree>-->
+        <!--<Alert v-if="!isComponent">鼠标右键编辑/删除分组</Alert>-->
+        <!--<div class="group-row flex" v-if="!isComponent">-->
+        <!--<Button @click="handleClickAddGroup">添加分组</Button>-->
+        <!--</div>-->
+        <!--</div>-->
+
+        <!--<Table-->
+        <!--ref="table"-->
+        <!--:columns="isComponent ? viewColumns : columns"-->
+        <!--:data="data"-->
+        <!--:loading="loading"-->
+        <!--border-->
+        <!--class="table"-->
+        <!--sortable="custom"-->
+        <!--@on-sort-change="changeSort"-->
+        <!--@on-selection-change="changeSelect"-->
+        <!--&gt;-->
+        <!--<template slot="fileKey" slot-scope="{ row }">-->
+        <!--<a @click="copyFileUrl(row)">{{ row.fileKey }}</a>-->
+        <!--</template>-->
+        <!--</Table>-->
+        <!--</div>-->
+        <!--</div>-->
+
+        <!--<div v-show="showType === 'thumb'">-->
+        <!--<div class="oss-wrapper">-->
+        <!--<Card v-for="(item, i) in data" :key="i" class="oss-card">-->
+        <!--<div class="content">-->
+        <!--<img-->
+        <!--v-if="item.fileType.indexOf('image') >= 0"-->
+        <!--:src="item.url"-->
+        <!--class="img"-->
+        <!--@click="showPic(item)"-->
+        <!--/>-->
+        <!--<div-->
+        <!--v-else-if="item.fileType.indexOf('video') >= 0"-->
+        <!--class="video"-->
+        <!--@click="showVideo(item)"-->
+        <!--&gt;-->
+        <!--&lt;!&ndash; 文件小于5MB显示video &ndash;&gt;-->
+        <!--<video v-if="item.fileSize < 1024 * 1024 * 5" class="cover">-->
+        <!--<source :src="item.url"/>-->
+        <!--</video>-->
+        <!--<img class="play" src="@/assets/play.png"/>-->
+        <!--</div>-->
+        <!--<div v-else class="other">-->
+        <!--<div class="name">{{ item.name }}</div>-->
+        <!--<div class="key">{{ item.fileKey }}</div>-->
+        <!--<div class="info">-->
+        <!--文件类型：{{ item.fileType }} 文件大小：{{-->
+        <!--((item.fileSize * 1.0) / (1024 * 1024)).toFixed(2)-->
+        <!--}}-->
+        <!--MB 创建时间：{{ item.createTime }}-->
+        <!--</div>-->
+        <!--</div>-->
+        <!--<div class="actions">-->
+        <!--<div class="btn">-->
+        <!--<Tooltip content="下载" placement="top">-->
+        <!--<Icon-->
+        <!--size="16"-->
+        <!--type="md-download"-->
+        <!--@click="download(item)"-->
+        <!--/>-->
+        <!--</Tooltip>-->
+        <!--</div>-->
+        <!--<div class="btn">-->
+        <!--<Tooltip content="重命名" placement="top">-->
+        <!--<Icon size="16" type="md-create" @click="rename(item)"/>-->
+        <!--</Tooltip>-->
+        <!--</div>-->
+        <!--<div class="btn-no">-->
+        <!--<Tooltip content="删除" placement="top">-->
+        <!--<Icon size="16" type="md-trash" @click="remove(item)"/>-->
+        <!--</Tooltip>-->
+        <!--</div>-->
+        <!--</div>-->
+        <!--</div>-->
+        <!--</Card>-->
+        <!--</div>-->
+        <!--</div>-->
+        <!--<Row class="mt_10" justify="end" type="flex">-->
+        <!--<Page-->
+        <!--:current="searchForm.pageNumber"-->
+        <!--:page-size="searchForm.pageSize"-->
+        <!--:page-size-opts="pageSizeOpts"-->
+        <!--:total="total"-->
+        <!--show-elevator-->
+        <!--show-sizer-->
+        <!--show-total-->
+        <!--size="small"-->
+        <!--@on-change="changePage"-->
+        <!--@on-page-size-change="changePageSize"-->
+        <!--&gt;</Page>-->
+        <!--</Row>-->
+      </el-card>
+    </el-row>
+    <el-dialog
+      v-model="modalVisible"
+      :close-on-click-modal="false"
+      :title="modalTitle"
+      width="500px"
+      destroy-on-close
+    >
+      <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>
+
+    <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,
@@ -256,13 +467,14 @@ import {
   updateFileDirectory,
 } from "@/api/index";
 import DPlayer from "dplayer";
-import { commonUrl } from "@/libs/axios";
+import {commonUrl} from "@/libs/axios";
 
 const config = require("@/config/index");
 
 let dp;
 export default {
   name: "oss-manage",
+  components: { Delete, Download, View },
   props: {
     isComponent: {
       default: false,
@@ -318,12 +530,13 @@ export default {
       picTitle: "", // 图片title
       videoTitle: "", // 视频title
       modalTitle: "", // 添加或编辑标题
+      activeRoleTab: "MANAGER",
       searchForm: {
         // 搜索框对应data对象
         name: "",
         fileKey: "",
         fileType: "",
-        ownerName: "",
+        userEnums: "MANAGER",
         pageNumber: 1, // 当前页数
         pageSize: 20, // 页面大小
         sort: "createTime", // 默认排序字段
@@ -458,9 +671,11 @@ export default {
             if (params.row.userEnums == "MANAGER") {
               m = "[管理员]";
             } else if (params.row.userEnums == "STORE") {
-              m = "[店铺]";
+              m = "[商家]";
+            } else if (params.row.userEnums == "CUSTOMER") {
+              m = "[客服]";
             } else {
-              m = "[会员]";
+              m = "[用户]";
             }
             m += params.row.createBy;
             return h("span", m);
@@ -640,9 +855,11 @@ export default {
             if (params.row.userEnums == "MANAGER") {
               m = "[管理员]";
             } else if (params.row.userEnums == "STORE") {
-              m = "[店铺]";
+              m = "[商家]";
+            } else if (params.row.userEnums == "CUSTOMER") {
+              m = "[客服]";
             } else {
-              m = "[会员]";
+              m = "[用户]";
             }
             m += params.row.createBy;
             return h("span", m);
@@ -657,14 +874,16 @@ export default {
           render: (h, params) => {
             return h("div", [
               h(
-                "a",
+                "Button",
                 {
+                  props: {
+                    type: "default",
+                    size: "small",
+                  },
                   style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
                     marginRight: "5px",
-                    display: this.selectImage === true ? "inline-block" : "none",
+                    display:
+                      this.selectImage === true ? "inline-block" : "none",
                   },
                   on: {
                     click: () => {
@@ -673,7 +892,7 @@ export default {
                   },
                 },
                 "选择"
-              ),
+              )
             ]);
           },
         },
@@ -694,17 +913,33 @@ export default {
         {
           title: 'parent 1',
           expand: true,
-          render: (h, { root, node, data }) => {
+          render: (h, {root, node, data}) => {
             return h('span', {style: {display: 'inline-block', width: '100%'}}, [
               h('span', [h("Icon", {type: 'ios-folder-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
               h('span', {style: {display: 'inline-block', float: 'right', marginRight: '32px'}},
-                [h("Button", {...this.buttonProps, icon: 'ios-add', type: 'primary', style: {width: '64px'}, onClick: () => { this.append(data) }})
+                [h("Button", {
+                  ...this.buttonProps,
+                  icon: 'ios-add',
+                  type: 'primary',
+                  style: {width: '64px'},
+                  onClick: () => {
+                    this.append(data)
+                  }
+                })
                 ])
             ]);
           },
           children: [
-            {title: 'child 1-1', expand: true, children: [{title: 'leaf 1-1-1', expand: true}, {title: 'leaf 1-1-2', expand: true}]},
-            {title: 'child 1-2', expand: true, children: [{title: 'leaf 1-2-1', expand: true}, {title: 'leaf 1-2-1', expand: true}]}
+            {
+              title: 'child 1-1',
+              expand: true,
+              children: [{title: 'leaf 1-1-1', expand: true}, {title: 'leaf 1-1-2', expand: true}]
+            },
+            {
+              title: 'child 1-2',
+              expand: true,
+              children: [{title: 'leaf 1-2-1', expand: true}, {title: 'leaf 1-2-1', expand: true}]
+            }
           ]
         }
       ],
@@ -720,7 +955,7 @@ export default {
     },
     selectedOss(val) {
       if (val && val.length) {
-        this.$emit("callback", {url: val[val.length-1].split(',')[1]});
+        this.$emit("callback", {url: val[val.length - 1].split(',')[1]});
       }
     },
     // 初始化监听 是否清空所选图片
@@ -735,19 +970,102 @@ export default {
       }
     },
   },
+  computed: {
+    canShowGroups() {
+      return this.activeRoleTab === "MANAGER";
+    },
+    canUploadImages() {
+      return this.activeRoleTab === "MANAGER";
+    },
+    uploadData() {
+      return {
+        directoryPath: this.searchForm.fileDirectoryId,
+        userEnums: this.activeRoleTab,
+        directoryType: this.activeRoleTab,
+      };
+    },
+  },
 
   methods: {
+    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;
+      this.searchForm.pageNumber = 1;
+      this.searchForm.userEnums = name;
+      delete this.searchForm.fileDirectoryId;
+      this.selectedGroupData = "";
+      this.defaultValue = [];
+      this.groupFormValidate.id = [];
+      this.groupFormValidate.level = 0;
+      this.selectedOss = [];
+      this.updateTreeDataByRole();
+      this.getDataList();
+    },
+    updateTreeDataByRole() {
+      const currentTree = this.filterTreeByRole(this.treeDataDefault, this.activeRoleTab);
+      this.treeData = [
+        {
+          title: "全部图片",
+          label: "全部分类",
+          value: "0",
+          type: this.activeRoleTab,
+          level: 0,
+          children: currentTree,
+          id: "0",
+          categoryId: 0,
+        },
+      ];
+    },
+    filterTreeByRole(tree = [], role) {
+      if (!tree || !tree.length) return [];
+      return tree.reduce((arr, item) => {
+        const children = this.filterTreeByRole(item.children || [], role);
+        if (item.type === role || children.length) {
+          arr.push({
+            ...item,
+            children,
+          });
+        }
+        return arr;
+      }, []);
     },
     // 复选框值改变时触发
     selectOssChange(e) {
       if (e) {
-        this.selectList = e.map(item => {return { id: item.split(',')[0]}});
+        this.selectList = e.map(item => {
+          return {id: item.split(',')[0]}
+        });
         this.selectCount = e.length;
         // let size = 0;
         // e.forEach((item) => {size += item.fileSize * 1.0;});
@@ -757,12 +1075,12 @@ export default {
     },
     // 页码改变时回调
     pageChange(value) {
-      this.$set(this, 'selectedOss', []);
+      this.selectedOss = [];
       this.searchForm.pageNumber = value;
       this.getDataList();
     },
     // 自定义tree节点显示内容和交互
-    renderContent (h, { root, node, data }) {
+    renderContent(h, {root, node, data}) {
       if (data.value === '0') {
         return h('span', {style: {display: 'inline-block', width: '100%'}},
           [
@@ -778,11 +1096,31 @@ export default {
               [
                 h("Dropdown", {style: {marginLeft: "4px"}},
                   [
-                    h("Icon", {props: {type: 'ios-more', size: "20",}, style: {display: 'inline-block'}, on:{click: () => {}}}),
-                    h("DropdownMenu", {slot: "list"
+                    h("Icon", {
+                      props: {type: 'ios-more', size: "20",},
+                      style: {display: 'inline-block'},
+                      on: {
+                        click: () => {
+                        }
+                      }
+                    }),
+                    h("DropdownMenu", {
+                      slot: "list"
                     }, [
-                      h("DropdownItem", { nativeOn:{click: () => {this.handleContextMenuEdit(root, node, data)}} }, "编辑"),
-                      h("DropdownItem", { nativeOn:{click: () => {this.handleContextMenuDelete(data)}} }, "删除"),
+                      h("DropdownItem", {
+                        nativeOn: {
+                          click: () => {
+                            this.handleContextMenuEdit(root, node, data)
+                          }
+                        }
+                      }, "编辑"),
+                      h("DropdownItem", {
+                        nativeOn: {
+                          click: () => {
+                            this.handleContextMenuDelete()
+                          }
+                        }
+                      }, "删除"),
                     ])
                   ]),
               ])
@@ -793,8 +1131,6 @@ export default {
     },
 
 
-
-
     handleContextMenu(val) {
       console.log('handleContextMenu', val);
       this.selectedGroupData = val;
@@ -815,7 +1151,7 @@ export default {
         title: "提示",
         content: "是否删除该分组",
         onOk: async () => {
-          const res = await delFileDirectory([val.value]);
+          const res = await delFileDirectory(this.selectedGroupData.value);
           if (res.success) {
             this.$Message.success("删除成功!");
             this.getDataList();
@@ -824,21 +1160,33 @@ 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) => {
         if (valid) {
           let res
-          const params = { ...this.groupFormValidate };
+          const params = {...this.groupFormValidate};
+          params.directoryType = (this.selectedGroupData && this.selectedGroupData.type) || this.activeRoleTab;
           if (this.insertOrUpdate === "insert") {
             params.parentId = params.id[params.id.length - 1];
             delete params.id;
@@ -892,17 +1240,8 @@ export default {
       getFileDirectory(parent_id).then((res) => {
         this.loading = false;
         if (res.success) {
-          this.treeData = this.getTree(res.result);
           this.treeDataDefault = this.getTree(res.result);
-          this.treeData.unshift({
-            title: "全部图片",
-            label: "全部分类",
-            value: "0",
-            level: 0,
-            children: [],
-            id: "0",
-            categoryId: 0,
-          });
+          this.updateTreeDataByRole();
         }
       });
     },
@@ -941,9 +1280,9 @@ export default {
         } else {
           this.groupFormValidate.level = Number(level) + 1;
         }
-        this.searchForm.userEnums = type;
+        this.searchForm.userEnums = type || this.activeRoleTab;
         this.getDataList();
-        this.$set(this, 'selectedOss', []);
+        this.selectedOss = [];
       }
     },
     /**
@@ -952,19 +1291,12 @@ export default {
     selectedParams(val) {
       this.$emit("callback", val);
     },
-    // 更多操作
-    handleDropdown(name) {
-      if (name === "refresh") {
-        this.getDataList('refresh');
-      } else if (name === "removeAll") {
-        this.removeAll();
-      }
-    },
     // 初始化数据
     init() {
       this.accessToken = {
         accessToken: this.getStore("accessToken"),
       };
+      this.searchForm.userEnums = this.activeRoleTab;
       this.getDataList();
       this.getAllList();
     },
@@ -1017,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 = "";
       }
     },
     // 改变查看方式
@@ -1045,9 +1380,6 @@ export default {
 
         this.data = res.result.records;
         this.total = res.result.total;
-        if (type === 'refresh') {
-          this.$Message.success('刷新成功！');
-        }
       });
     },
     // 搜索
@@ -1074,14 +1406,15 @@ export default {
       this.handleSearch();
     },
     // 上传文件超过大小限制
-    handleMaxSize(file) {
-      this.$Notice.warning({
-        title: "文件大小过大",
-        desc: "所选文件大小过大, 不得超过 1M.",
-      });
+    handleMaxSize() {
+      this.$Message.warning("所选文件大小过大，不得超过 20MB");
     },
     // 上传成功回调
     handleSuccess(res, file) {
+      if (!this.canUploadImages) {
+        this.$Message.warning("仅管理员模块支持上传图片");
+        return;
+      }
       if (res.success) {
         this.$Message.success("上传文件 " + file.name + " 成功");
         this.getDataList();
@@ -1119,12 +1452,14 @@ export default {
         loading: true,
         onOk: () => {
           let ids = "";
-          this.selectList.forEach(function (e) {ids += e.id + ",";});
+          this.selectList.forEach(function (e) {
+            ids += e.id + ",";
+          });
           ids = ids.substring(0, ids.length - 1);
           deleteFile(ids).then((res) => {
             this.$Modal.remove();
             if (res.success) {
-              this.$set(this, 'selectedOss', []);
+              this.selectedOss = [];
               // this.clearSelectAll();
               this.init();
               this.$Message.success("批量删除文件成功");
@@ -1212,7 +1547,7 @@ export default {
       // 是组件的话，初始化不调用接口
       this.init();
     } else {
-      this.searchForm.pageSize =18; // 页面大小
+      this.searchForm.pageSize = 18; // 页面大小
     }
   },
 };
diff --git a/seller/vue.config.js b/seller/vue.config.js
index 968234be..eb39840d 100644
--- a/seller/vue.config.js
+++ b/seller/vue.config.js
@@ -1,107 +1,48 @@
 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 enableProduction = false // 统一取消cdn加载 目前cdn链接的https请求挂了
 
-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 resolve = (dir) => path.join(__dirname, dir);
 
-// 使用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 : [];
+const enableProduction = process.env.NODE_ENV === "production";
 
 module.exports = {
-  // 输出文件目录，当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除
-  outputDir:'dist',
-  // 放置生成的静态资源 (js、css、img、fonts) 的目录。
-  assetsDir:'static',
-
+  outputDir: "dist",
+  assetsDir: "static",
   css: {
-    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
-    sourceMap:false,
+    sourceMap: false,
     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: {
-    externals,
-
-    // GZIP压缩
-    plugins: [
-      new CompressionPlugin({
-        test: /\.js$|\.html$|\.css/, // 匹配文件
-        threshold: 10240 // 对超过10k文件压缩
-      })
-    ],
+    plugins: enableProduction
+      ? [
+          new CompressionPlugin({
+            test: /\.js$|\.html$|\.css/,
+            threshold: 10240,
+          }),
+        ]
+      : [],
     optimization: {
-      minimizer: jsPlugin,
       runtimeChunk: "single",
       splitChunks: {
         chunks: "all",
@@ -111,30 +52,33 @@ module.exports = {
           vendor: {
             test: /[\\/]node_modules[\\/]/,
             name(module) {
-              const packageName = module.context.match(
-                /[\\/]node_modules[\\/](.*?)([\\/]|$)/
-              )[1];
+              const match =
+                module.context &&
+                module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/);
+              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.resolve.alias
+      .set("@", resolve("src"))
+      .set("@/components/lili", resolve("src/views/my-components/lili"))
+      .set("@/components/map", resolve("src/views/my-components/map"))
+      .set("@/components/lili-dialog", resolve("src/views/lili-dialog"))
+      .set("@/components/hotzone", resolve("src/views/shop/hotzone"));
+    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")],
+    },
+  },
 };