refactor: 统一组件导入与消息提示方式

- 将多个组件中的 require 替换为 import，提升代码一致性。 - 更新消息提示方式，使用统一的 Message 和 Modal 组件，增强用户体验。 - 调整部分组件的样式和逻辑，确保界面一致性与可读性。
2026-08-07 03:15:01 +08:00 · 2026-07-08 18:36:06 +08:00
parent f6ddcf4f99
commit 106e059d1a
63 changed files with 429 additions and 314 deletions
--- a/buyer/src/pages/Cart.vue
+++ b/buyer/src/pages/Cart.vue
@@ -242,6 +242,7 @@
 </template>

 <script>
+import { Message, Modal } from "@/utils/message";
 import Promotion from "@/components/goodsDetail/Promotion";
 import Search from "@/components/Search";
 import * as APICart from "@/api/cart";
@@ -289,13 +290,13 @@ export default {
    },
    // 收藏商品
    collectGoods(id) {
-      this.$Modal.confirm({
+      Modal.confirm({
        title: "收藏",
        content: "商品收藏后可在个人中心我的收藏查看",
        onOk: () => {
          APIMember.collectGoods("GOODS", id).then((res) => {
            if (res.success) {
-              this.$Message.success("收藏商品成功");
+              Message.success("收藏商品成功");
              this.getCartList();
            }
          });
@@ -318,16 +319,16 @@ export default {
      } else {
        idArr.push(id);
      }
-      this.$Modal.confirm({
+      Modal.confirm({
        title: "删除",
        content: "确定要删除该商品吗？",
        onOk: () => {
          APICart.delCartGoods({ skuIds: idArr.toString() }).then((res) => {
            if (res.success) {
-              this.$Message.success("删除成功");
+              Message.success("删除成功");
              this.getCartList();
            } else {
-              this.$Message.error(res.message);
+              Message.error(res.message);
            }
          });
        },
@@ -335,16 +336,16 @@ export default {
    },
    // 清空购物车
    clearCart() {
-      this.$Modal.confirm({
+      Modal.confirm({
        title: "提示",
        content: "确定要清空购物车吗？清空后不可恢复",
        onOk: () => {
          APICart.clearCart().then((res) => {
            if (res.success) {
-              this.$Message.success("清空购物车成功");
+              Message.success("清空购物车成功");
              this.getCartList();
            } else {
-              this.$Message.error(res.message);
+              Message.error(res.message);
            }
          });
        },
@@ -355,7 +356,7 @@ export default {
      if (this.checkedNum) {
        this.$router.push({ path: "/pay", query: { way: "CART" } });
      } else {
-        this.$Message.warning("请至少选择一件商品");
+        Message.warning("请至少选择一件商品");
      }
    },
    // 展示优惠券
@@ -393,9 +394,9 @@ export default {
      let res = await APIMember.receiveCoupon(item.id);
      if (res.success) {
        item["disabled"] = true;
-        this.$Message.success("领取成功");
+        Message.success("领取成功");
      } else {
-        this.$Message.error(res.message);
+        Message.error(res.message);
      }
    },
    // 购物车列表
--- a/buyer/src/pages/CouponCenter.vue
+++ b/buyer/src/pages/CouponCenter.vue
@@ -43,11 +43,12 @@
            <i class="circle-bottom"></i>
          </li>
        </ul>
-        <el-pagination           :total="total"
+        <el-pagination           v-model:current-page="params.pageNumber"
+          v-model:page-size="params.pageSize"
+          :total="total"
          @current-change="changePageNum"
          class="pageration"
          @size-change="changePageSize"
-          :page-size="params.pageSize"
         layout="total, sizes, prev, pager, next"></el-pagination>
      </div>
    </div>
@@ -55,6 +56,7 @@
  </div>
 </template>
 <script>
+import { Modal } from "@/utils/message";
 import { couponList, receiveCoupon } from "@/api/member.js";
 export default {
  data() {
@@ -116,7 +118,7 @@ export default {
      receiveCoupon(item.id)
        .then((res) => {
          if (!res || !res.success) return;
-          this.$Modal.confirm({
+          Modal.confirm({
            title: "领取优惠券",
            content: "优惠券领取成功，可到我的优惠券页面查看",
            okText: "我的优惠券",
--- a/buyer/src/pages/ForgetPassword.vue
+++ b/buyer/src/pages/ForgetPassword.vue
@@ -105,18 +105,20 @@

 <script>

+import { Message } from "@/utils/message";
 import * as RegExp from '@/plugins/RegExp.js';
 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';
+import config from '@/config';
 export default {
  name: 'ForgetPassword',
  components: { Verify, Lock, Iphone, Document },
  data () {
    return {
-      config:require('@/config'),
+      config,
      loading: false, // 加载状态
      loading1: false, // 第二步加载状态
      formFirst: { // 手机验证码表单
@@ -163,10 +165,10 @@ export default {
          apiLogin.validateCode(data).then((res) => {
            this.loading = false;
            if (res.success) {
-            //   this.$Message.success('');
+            //   Message.success('');
              this.step = 1;
            } else {
-              this.$Message.warning(res.message);
+              Message.warning(res.message);
            }
          }).catch(() => { this.loading = false; });
        } else {}
@@ -177,7 +179,7 @@ export default {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form));
          if (params.password !== params.oncePasd) {
-            this.$Message.warning('两次输入密码不一致');
+            Message.warning('两次输入密码不一致');
            return;
          };
          params.mobile = this.formFirst.mobile;
@@ -189,7 +191,7 @@ export default {
            this.loading1 = false;
            console.log(res);
            if (res.success) {
-              this.$Message.success('修改密码成功');
+              Message.success('修改密码成功');
              this.$router.push('login');
            }
          }).catch(() => { this.loading = false; });
@@ -199,11 +201,11 @@ export default {
    sendCode () { // 发送验证码
      if (this.time === 60) {
        if (this.formFirst.mobile === '') {
-          this.$Message.warning('请先填写手机号');
+          Message.warning('请先填写手机号');
          return;
        }
        if (!this.verifyStatus) {
-          this.$Message.warning('请先完成安全验证');
+          Message.warning('请先完成安全验证');
          return;
        }
        let params = {
@@ -212,7 +214,7 @@ export default {
        };
        sendSms(params).then(res => {
          if (res.success) {
-            this.$Message.success('验证码发送成功');
+            Message.success('验证码发送成功');
            let that = this;
            this.interval = setInterval(() => {
              that.time--;
@@ -226,7 +228,7 @@ export default {
              }
            }, 1000);
          } else {
-            this.$Message.warning(res.message);
+            Message.warning(res.message);
          }
        });
      }
--- a/buyer/src/pages/GoodsDetail.vue
+++ b/buyer/src/pages/GoodsDetail.vue
@@ -43,6 +43,7 @@
 </template>

 <script>
+import { Message } from "@/utils/message";
 import { StarFilled } from '@element-plus/icons-vue';
 import Search from "@/components/Search";

@@ -154,7 +155,7 @@ export default {
              });
            }
          } else {
-            this.$Message.error(res.message);
+            Message.error(res.message);
            this.isLoading = false
          }
        })
@@ -182,21 +183,21 @@ export default {
        return;
      }
      if (!this.Cookies.getItem("userInfo")) {
-        this.$Message.warning("请先登录");
+        Message.warning("请先登录");
        this.$router.push("/login");
        return;
      }
      if (this.storeCollected) {
        let cancel = await cancelStoreCollect("STORE", storeId);
        if (cancel.success) {
-          this.$Message.success("已取消收藏");
+          Message.success("已取消收藏");
          this.storeCollected = false;
        }
      } else {
        let collect = await collectStore("STORE", storeId);
        if (collect.code === 200) {
          this.storeCollected = true;
-          this.$Message.success("收藏店铺成功,可以前往个人中心我的收藏查看");
+          Message.success("收藏店铺成功,可以前往个人中心我的收藏查看");
        }
      }
    },
--- a/buyer/src/pages/GoodsList.vue
+++ b/buyer/src/pages/GoodsList.vue
@@ -99,10 +99,11 @@
      </div>
      <div class="goods-page">
        <el-pagination
+          v-model:current-page="params.pageNumber"
+          v-model:page-size="params.pageSize"
          @current-change="changePageNum"
          @size-change="changePageSize"
          :total="total"
-          :page-size="params.pageSize"
          layout="total, prev, pager, next, sizes"
        ></el-pagination>
      </div>
@@ -113,6 +114,7 @@
 </template>

 <script>
+import { Message } from "@/utils/message";
 import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
 import GoodsClassNav from "@/components/nav/GoodsClassNav";
 import * as apiGoods from "@/api/goods";
@@ -201,7 +203,7 @@ export default {
    },
    goShopPage(id) {
      if (!id) {
-        this.$Message.warning("店铺信息不存在");
+        Message.warning("店铺信息不存在");
        return;
      }
      const routeUrl = this.$router.resolve({
--- a/buyer/src/pages/Login.vue
+++ b/buyer/src/pages/Login.vue
@@ -154,6 +154,7 @@

 <script>

+import { Message, Spin } from "@/utils/message";
 import * as RegExp from "@/plugins/RegExp.js";
 import { md5 } from "@/plugins/md5.js";
 import * as apiLogin from "@/api/login.js";
@@ -163,6 +164,7 @@ 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";
+import config from "@/config";

 export default {
  name: "Login",
@@ -182,7 +184,7 @@ export default {
      scannerCodeLoginFLag: false,
      scannerCodeLoginStatus: 0,
      qrCodeTimer:null,
-      config: require('@/config'),
+      config,
      type: true, // true 账号登录  false 验证码登录
      formData: {
        // 登录表单
@@ -239,7 +241,7 @@ export default {
            apiLogin.smsLogin(data).then((res) => {
              this.hideVerify();
              if (res.success) {
-                this.$Message.success("登录成功");
+                Message.success("登录成功");
                storage.setItem("accessToken", res.result.accessToken);
                storage.setItem("refreshToken", res.result.refreshToken);
                storage.setItem('getTimes',0)
@@ -258,7 +260,7 @@ export default {
                  }
                });
              } else {
-                this.$Message.error(res.message);
+                Message.error(res.message);
              }
            });
          }
@@ -269,11 +271,11 @@ export default {
    sendCode() {
      if (this.time === 60) {
        if (this.formSms.mobile === "") {
-          this.$Message.warning("请先填写手机号");
+          Message.warning("请先填写手机号");
          return;
        }
        if (!this.verifyStatus) {
-          this.$Message.warning("请先完成安全验证");
+          Message.warning("请先完成安全验证");
          return;
        }
        let params = {
@@ -282,7 +284,7 @@ export default {
        };
        sendSms(params).then((res) => {
          if (res.success) {
-            this.$Message.success("验证码发送成功");
+            Message.success("验证码发送成功");
            let that = this;
            this.interval = setInterval(() => {
              that.time--;
@@ -296,7 +298,7 @@ export default {
              }
            }, 1000);
          } else {
-            this.$Message.warning(res.message);
+            Message.warning(res.message);
          }
        });
      }
@@ -310,19 +312,19 @@ export default {
        let data = JSON.parse(JSON.stringify(this.formData));
        data.password = md5(data.password);
        this.hideVerify();
-        this.$Spin.show();
+        Spin.show();
        apiLogin
          .login(data)
          .then((res) => {
            if (res.success) {
              this.loginSuccess(res.result.accessToken,res.result.refreshToken);
            } else {
-              this.$Spin.hide();
-              this.$Message.error(res.message);
+              Spin.hide();
+              Message.error(res.message);
            }
          })
          .catch(() => {
-            this.$Spin.hide();
+            Spin.hide();
          });
      } else {
        this.verifyStatus = true;
@@ -340,11 +342,11 @@ export default {
      webLogin(type);
    },
    loginSuccess(accessToken,refreshToken){
-      this.$Message.success("登录成功");
+      Message.success("登录成功");
      storage.setItem("accessToken", accessToken);
      storage.setItem("refreshToken", refreshToken);
      apiLogin.getMemberMsg().then((res) => {
-        this.$Spin.hide();
+        Spin.hide();
        if (res.success) {
          storage.setItem("userInfo", res.result);
          let query = this.$route.query;
--- a/buyer/src/pages/Merchant.vue
+++ b/buyer/src/pages/Merchant.vue
@@ -100,7 +100,8 @@
        </div>
      </div>
      <div class="goods-page">
-        <el-pagination           :page-size="params.pageSize"
+        <el-pagination           v-model:current-page="params.pageNumber"
+          v-model:page-size="params.pageSize"
          :total="total"
          @current-change="changePageNum"
          @size-change="changePageSize"
@@ -116,6 +117,7 @@

 <script>

+import { Message } from "@/utils/message";
 import { ArrowDown, StarFilled } from '@element-plus/icons-vue';
 import {getCateById, getDetailById} from "@/api/shopentry";
 import {
@@ -247,7 +249,7 @@ export default {
    getStoreMsg() {
      const storeId = this.$route.query.id;
      if (!storeId) {
-        this.$Message.warning("店铺不存在");
+        Message.warning("店铺不存在");
        return;
      }
      getDetailById(storeId)
@@ -330,7 +332,7 @@ export default {
        return;
      }
      if (!this.Cookies.getItem("userInfo")) {
-        this.$Message.warning("请先登录");
+        Message.warning("请先登录");
        this.$router.push("/login");
        return;
      }
@@ -338,14 +340,14 @@ export default {
        if (this.storeCollected) {
          const cancel = await cancelStoreCollect("STORE", storeId);
          if (cancel.success) {
-            this.$Message.success("已取消收藏");
+            Message.success("已取消收藏");
            this.storeCollected = false;
          }
        } else {
          const collect = await collectStore("STORE", storeId);
          if (collect.success || collect.code === 200) {
            this.storeCollected = true;
-            this.$Message.success(
+            Message.success(
              "收藏店铺成功,可以前往个人中心我的收藏查看"
            );
          }
--- a/buyer/src/pages/ShoppingCart.vue
+++ b/buyer/src/pages/ShoppingCart.vue
@@ -13,7 +13,7 @@
          </div>
          <div class="add-info-box-row">
            <div class="add-info-img">
-              <img :src="this.detail.thumbnail" alt="">
+              <img :src="detail.thumbnail" alt="">
            </div>
            <div class="add-info-intro">
              <p>{{detail.goodsName}}</p>
@@ -24,7 +24,7 @@
        <div class="car-btn-group">
          <div></div>
          <div class="car-btn-row">
-            <router-link :to="`/goodsDetail?skuId=${detail.id}&goodsId=${detail.goodsId}`">
+            <router-link :to="{ path: '/goodsDetail', query: { skuId: detail.skuId, goodsId: detail.goodsId } }">
              <button class="btn-car hover-pointer btn-car-to-detail">查看商品详情</button>
            </router-link>
            <router-link to="/cart">
@@ -51,8 +51,13 @@ export default {
    };
  },
  mounted () {
-    let detail = this.$route.query.detail;
-    if (detail) this.detail = detail;
+    const { skuId, goodsId, thumbnail, goodsName } = this.$route.query;
+    this.detail = {
+      skuId,
+      goodsId,
+      thumbnail,
+      goodsName
+    };
  }
 };
 </script>
--- a/buyer/src/pages/SignUp.vue
+++ b/buyer/src/pages/SignUp.vue
@@ -94,18 +94,20 @@

 <script>

+import { Message } from "@/utils/message";
 import * as RegExp from '@/plugins/RegExp.js';
 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';
+import config from '@/config';
 export default {
  name: 'SignUp',
  components: { Verify, User, Lock, Iphone, Document },
  data () {
    return {
-      config:require('@/config'),
+      config,
      year: new Date().getFullYear(),
      formRegist: {
        // 注册表单
@@ -152,10 +154,10 @@ export default {
        data.password = md5(data.password);
        apiLogin.regist(data).then((res) => {
          if (res.success) {
-            this.$Message.success('注册成功!');
+            Message.success('注册成功!');
            this.$router.push('login');
          } else {
-            this.$Message.warning(res.message || '注册失败');
+            Message.warning(res.message || '注册失败');
          }
        }).catch(() => {});
      }).catch(() => {});
@@ -164,11 +166,11 @@ export default {
    sendCode () {
      if (this.time === 60) {
        if (this.formRegist.mobilePhone === '') {
-          this.$Message.warning('请先填写手机号');
+          Message.warning('请先填写手机号');
          return;
        }
        if (!this.verifyStatus) {
-          this.$Message.warning('请先完成安全验证');
+          Message.warning('请先完成安全验证');
          return;
        }
        let params = {
@@ -177,7 +179,7 @@ export default {
        };
        sendSms(params).then(res => {
          if (res.success) {
-            this.$Message.success('验证码发送成功');
+            Message.success('验证码发送成功');
            let that = this;
            this.interval = setInterval(() => {
              that.time--;
@@ -191,7 +193,7 @@ export default {
              }
            }, 1000);
          } else {
-            this.$Message.warning(res.message || '验证码发送失败');
+            Message.warning(res.message || '验证码发送失败');
          }
        }).catch(() => {});
      }
--- a/buyer/src/pages/article/detail.vue
+++ b/buyer/src/pages/article/detail.vue
@@ -12,7 +12,7 @@

 <script>
 import { articleDetail } from "@/api/common.js";
-const config = require("@/config/index");
+import config from "@/config/index";
 export default {
  data() {
    return {
--- a/buyer/src/pages/home/memberCenter/AccountSafe.vue
+++ b/buyer/src/pages/home/memberCenter/AccountSafe.vue
@@ -48,11 +48,7 @@
      v-model="bindModalVisible"
      title="绑定第三方账户"
      :close-on-click-modal="false"
-      :footer-hide="bindForm.type === 'WECHAT'"
-      :ok-text="bindModalOkText"
-      :loading="bindSubmitLoading"
-      @ok="submitBind"
-      @cancel="resetBindForm"
+      @closed="resetBindForm"
    >
      <el-form label-width="110px">
        <el-form-item label="类型">
@@ -67,8 +63,8 @@
              <div v-else class="wechatQrEmpty">二维码获取失败，请刷新重试</div>
            </div>
            <div class="wechatQrActions">
-              <el-button @click="fetchWechatQrCode">刷新二维码</el-button>
-              <el-button type="primary" @click="submitBind">我已完成绑定</el-button>
+              <el-button :loading="qrCodeLoading" @click="fetchWechatQrCode">刷新二维码</el-button>
+              <el-button type="primary" :loading="bindSubmitLoading" @click="submitBind">我已完成绑定</el-button>
            </div>
            <div class="wechatQrTip">请使用微信扫码关注/授权，完成后点击“我已完成绑定”检测绑定状态</div>
          </div>
@@ -78,11 +74,19 @@
          <el-input v-model="bindForm.unionID" placeholder="请输入 OpenID/UnionID" />
        </el-form-item>
      </el-form>
+
+      <template v-if="bindForm.type !== 'WECHAT'" #footer>
+        <el-button @click="bindModalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="bindSubmitLoading" @click="submitBind">
+          {{ bindModalOkText }}
+        </el-button>
+      </template>
    </el-dialog>
  </div>
 </template>

 <script>
+import { Message, Modal } from "@/utils/message";
 import { Key, Link } from '@element-plus/icons-vue';
 // import { getPwdStatus } from '@/api/account';
 import storage from '@/plugins/storage'
@@ -186,7 +190,7 @@ export default {
      const userId = userInfo && userInfo.id ? String(userInfo.id) : ''
      if (!userId) {
        this.qrCodeBase64 = ''
-        this.$Message.error('未获取到当前用户ID，请重新登录后重试')
+        Message.error('未获取到当前用户ID，请重新登录后重试')
        return
      }
      this.qrCodeLoading = true
@@ -197,7 +201,7 @@ export default {
            return
          }
          this.qrCodeBase64 = ''
-          this.$Message.error((res && res.message) || '二维码获取失败')
+          Message.error((res && res.message) || '二维码获取失败')
        })
        .catch(() => {
          this.qrCodeBase64 = ''
@@ -213,12 +217,12 @@ export default {
        this.refreshConnectBinds()
          .then(() => {
            if (this.isBound(this.bindForm.type)) {
-              this.$Message.success('绑定成功')
+              Message.success('绑定成功')
              this.bindModalVisible = false
              this.resetBindForm()
              return
            }
-            this.$Message.warning('暂未检测到绑定，请扫码后重试')
+            Message.warning('暂未检测到绑定，请扫码后重试')
            this.$nextTick(() => {
              this.bindModalVisible = true
            })
@@ -229,11 +233,11 @@ export default {
        return
      }
      if (!this.bindForm.type) {
-        this.$Message.error('绑定类型不能为空')
+        Message.error('绑定类型不能为空')
        return
      }
      if (!this.bindForm.unionID) {
-        this.$Message.error('OpenID/UnionID 不能为空')
+        Message.error('OpenID/UnionID 不能为空')
        this.$nextTick(() => {
          this.bindModalVisible = true
        })
@@ -243,7 +247,7 @@ export default {
      this.bindSubmitLoading = true
      bindThirdAccount({ unionID: this.bindForm.unionID, type: this.bindForm.type })
        .then(() => {
-          this.$Message.success('绑定成功')
+          Message.success('绑定成功')
          this.bindModalVisible = false
          this.resetBindForm()
          this.refreshConnectBinds()
@@ -253,12 +257,12 @@ export default {
        })
    },
    confirmUnbind (item) {
-      this.$Modal.confirm({
+      Modal.confirm({
        title: '解绑确认',
        content: `<p>确定解绑 ${item.label} 吗？</p>`,
        onOk: () => {
          unbindThirdAccount({ type: item.type }).then(() => {
-            this.$Message.success('解绑成功')
+            Message.success('解绑成功')
            this.refreshConnectBinds()
          })
        }
--- a/buyer/src/pages/home/memberCenter/CommentList.vue
+++ b/buyer/src/pages/home/memberCenter/CommentList.vue
@@ -5,11 +5,11 @@
    <div class="order">
      <div class="order-title">
        <div class="order-row title">
-          <div span="10" class="order-detail-title">订单详情</div>
-          <div span="4">收货人</div>
-          <div span="4">评价等级</div>
-          <div span="4">评价内容</div>
-          <div span="2"></div>
+          <div class="order-detail-title col-10">订单详情</div>
+          <div class="col-4">收货人</div>
+          <div class="col-4">评价等级</div>
+          <div class="col-4">评价内容</div>
+          <div class="col-2"></div>
        </div>
      </div>
      <empty v-if="list.length === 0" />
@@ -22,7 +22,7 @@
            <span class="hover-pointer fontsize_12 eval-detail" @click="evaluateDetail(item.id)">评价详情</span>
          </div>
          <div class="order-item-view">
-            <div span="10" class="item-view-name">
+            <div class="item-view-name col-10">
              <div class="order-img hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
                <img :src="item.goodsImage" alt="" />
              </div>
@@ -30,11 +30,11 @@
                {{item.goodsName}}
              </div>
            </div>
-            <div span="4">{{ $filters.secrecyMobile(item.createBy ) }}</div>
-            <div span="4">
+            <div class="col-4">{{ $filters.secrecyMobile(item.createBy ) }}</div>
+            <div class="col-4">
              {{item.grade==='GOOD'?'好评' : item.grade === 'WORSE'?'差评' : '中评'}}
            </div>
-            <div span="4">
+            <div class="col-4">
              <el-tooltip>
                  <div class="content">{{item.content}}</div>
                  <template #content>
@@ -44,7 +44,7 @@
                  </template>
              </el-tooltip>
            </div>
-            <div span="2"></div>
+            <div class="col-2"></div>
          </div>
        </div>
      </div>
@@ -52,9 +52,9 @@
    </div>
    <!-- 分页 -->
    <div class="page-size">
-      <el-pagination :total="total" @current-change="changePageNum"
-        @size-change="changePageSize"
-        :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+      <el-pagination v-model:current-page="params.pageNumber" v-model:page-size="params.pageSize"
+        :total="total" @current-change="changePageNum"
+        @size-change="changePageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    </UserCenterLayout>
  </div>
@@ -151,32 +151,32 @@ export default {
  display: flex;
  align-items: center;

-  > [span] {
+  > [class*='col-'] {
    box-sizing: border-box;
    padding: 0 8px;
  }

-  > [span='12'] {
+  > .col-12 {
    flex: 0 0 50%;
    max-width: 50%;
  }

-  > [span='10'] {
+  > .col-10 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

-  > [span='4'] {
+  > .col-4 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

-  > [span='2'] {
+  > .col-2 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

-  > [span='6'] {
+  > .col-6 {
    flex: 0 0 25%;
    max-width: 25%;
  }
--- a/buyer/src/pages/home/memberCenter/ComplainDetail.vue
+++ b/buyer/src/pages/home/memberCenter/ComplainDetail.vue
@@ -122,6 +122,7 @@
  </div>
 </template>
 <script>
+import { Message } from "@/utils/message";
 import { View } from '@element-plus/icons-vue';
 import {getComplainDetail} from '@/api/member.js';
 import {communication} from '@/api/order';
@@ -170,7 +171,7 @@ export default {
    // 回复消息
    handleSubmit () {
      if (this.params.content === '') {
-        this.$Message.error('请填写对话内容');
+        Message.error('请填写对话内容');
        return;
      }
      this.submitLoading = true;
@@ -178,7 +179,7 @@ export default {
      communication(this.params).then((res) => {
        this.submitLoading = false;
        if (res.success) {
-          this.$Message.success('对话成功');
+          Message.success('对话成功');
          this.params.content = '';
          this.getDetail();
        }
--- a/buyer/src/pages/home/memberCenter/ComplainList.vue
+++ b/buyer/src/pages/home/memberCenter/ComplainList.vue
@@ -5,11 +5,11 @@
    <div class="order">
      <div class="order-title">
        <div class="order-row title">
-          <div span="10" class="order-detail-title">商品信息</div>
-          <div span="4">投诉状态</div>
-          <div span="4">投诉主题</div>
-          <div span="4">投诉内容</div>
-          <div span="2"></div>
+          <div class="order-detail-title col-10">商品信息</div>
+          <div class="col-4">投诉状态</div>
+          <div class="col-4">投诉主题</div>
+          <div class="col-4">投诉内容</div>
+          <div class="col-2"></div>
        </div>
      </div>
      <empty v-if="list.length === 0" />
@@ -23,7 +23,7 @@
            <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>
          <div class="order-item-view">
-            <div span="10" class="item-view-name">
+            <div class="item-view-name col-10">
              <div class="order-img hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
                <img :src="item.goodsImage" alt="" />
              </div>
@@ -31,11 +31,11 @@
                {{item.goodsName}}
              </div>
            </div>
-            <div span="4">{{statusLabel[item.complainStatus]}}</div>
-            <div span="4">
+            <div class="col-4">{{statusLabel[item.complainStatus]}}</div>
+            <div class="col-4">
              <div class="content">{{item.complainTopic}}</div>
            </div>
-            <div span="4">
+            <div class="col-4">
              <el-tooltip>
                <div class="content">{{item.content}}</div>
                <template #content>
@@ -45,7 +45,7 @@
                </template>
              </el-tooltip>
            </div>
-            <div span="2"></div>
+            <div class="col-2"></div>
          </div>
        </div>
      </div>
@@ -53,15 +53,16 @@
    </div>
    <!-- 分页 -->
    <div class="page-size">
-      <el-pagination :total="total" @current-change="changePageNum"
-        @size-change="changePageSize"
-        :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+      <el-pagination v-model:current-page="params.pageNumber" v-model:page-size="params.pageSize"
+        :total="total" @current-change="changePageNum"
+        @size-change="changePageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    </UserCenterLayout>
  </div>
 </template>

 <script>
+import { Message, Modal } from "@/utils/message";
 import {complainList, clearComplain} from '@/api/member.js';
 export default {
  name: 'ComplainList',
@@ -107,13 +108,13 @@ export default {
      this.getList()
    },
    cancel (id) { // 取消投诉
-      this.$Modal.confirm({
+      Modal.confirm({
        title: '取消投诉',
        content: '确定取消投诉吗？',
        onOk: () => {
          clearComplain(id).then((res) => {
            if (res.success) {
-              this.$Message.success('取消投诉成功');
+              Message.success('取消投诉成功');
              this.getList();
            }
          });
@@ -167,22 +168,22 @@ export default {
  display: flex;
  align-items: center;

-  > [span] {
+  > [class*='col-'] {
    box-sizing: border-box;
    padding: 0 8px;
  }

-  > [span='10'] {
+  > .col-10 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

-  > [span='4'] {
+  > .col-4 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

-  > [span='2'] {
+  > .col-2 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
--- a/buyer/src/pages/home/memberCenter/Distribution.vue
+++ b/buyer/src/pages/home/memberCenter/Distribution.vue
@@ -99,11 +99,13 @@
            </el-table-column>
          </el-table>
          <div class="page-size">
-            <el-pagination               :current-page="params.pageNumber"
+            <el-pagination               v-model:current-page="params.pageNumber"
              :total="goodsData.total"
-              :page-size="params.pageSize"
+              v-model:page-size="params.pageSize"
+              :page-sizes="[10, 20, 50]"
              @current-change="changePage"
-             layout="total, prev, pager, next, jumper"></el-pagination>
+              @size-change="changePageSize"
+             layout="total, sizes, prev, pager, next, jumper"></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="未选商品" name="goodsUncheck">
@@ -136,11 +138,13 @@
            </el-table-column>
          </el-table>
          <div class="page-size">
-            <el-pagination               :current-page="params.pageNumber"
+            <el-pagination               v-model:current-page="params.pageNumber"
              :total="goodsData.total"
-              :page-size="params.pageSize"
+              v-model:page-size="params.pageSize"
+              :page-sizes="[10, 20, 50]"
              @current-change="changePage"
-             layout="total, prev, pager, next, jumper"></el-pagination>
+              @size-change="changePageSize"
+             layout="total, sizes, prev, pager, next, jumper"></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="提现记录" name="log">
@@ -172,11 +176,13 @@
            </el-table-column>
          </el-table>
          <div class="page-size">
-            <el-pagination               :current-page="logParams.pageNumber"
+            <el-pagination               v-model:current-page="logParams.pageNumber"
              :total="logData.total"
-              :page-size="logParams.pageSize"
+              v-model:page-size="logParams.pageSize"
+              :page-sizes="[10, 20, 50]"
              @current-change="changePageLog"
-             layout="total, prev, pager, next, jumper"></el-pagination>
+              @size-change="changePageSizeLog"
+             layout="total, sizes, prev, pager, next, jumper"></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
@@ -256,6 +262,7 @@
 </template>

 <script>
+import { Message } from "@/utils/message";
 import { Edit } from '@element-plus/icons-vue';
 import {
  distribution,
@@ -268,12 +275,13 @@ import {
 import { IDCard } from "@/plugins/RegExp.js";
 import { checkBankno } from "@/plugins/Foundation";
 import vueQr from "vue-qr";
+import config from "@/config";
 export default {
  name: "Distribution",
  components: { vueQr, Edit },
  data() {
    return {
-      config:require('@/config'),
+      config,
      status: 0, // 申请状态，0为未申请 1 申请中 2 申请完成 3 功能暂未开启
      applyForm: {}, // 申请表单
      rules: {
@@ -320,18 +328,18 @@ export default {
      params: {
        // 商品请求参数
        pageNumber: 1,
-        pageSize: 20,
+        pageSize: 10,
        checked: true,
      },
      orderParams: {
        // 订单商品请求参数
        pageNumber: 1,
-        pageSize: 20,
+        pageSize: 10,
      },
      logParams: {
        // 日志参数
        pageNumber: 1,
-        pageSize: 20,
+        pageSize: 10,
        sort: "createTime",
        order: "desc",
      },
@@ -355,7 +363,7 @@ export default {
          applyDistribution(this.applyForm).then((res) => {
            this.applyLoading = false;
            if (res.success) {
-              this.$Message.success("申请已提交，请等待管理员审核");
+              Message.success("申请已提交，请等待管理员审核");
              this.status = 1;
            }
          });
@@ -377,21 +385,21 @@ export default {
    withdraw() {
      const price = Number(this.withdrawPrice);
      if (!price || price < 1) {
-        this.$Message.error('提现金额单次最少提现金额为1元');
+        Message.error('提现金额单次最少提现金额为1元');
        return;
      }
      distCash({ price: this.withdrawPrice }).then((res) => {
        if (res.success) {
          this.withdrawApplyModal = false;
          this.withdrawPrice = 0;
-          this.$Message.success('申请已提交，请等待审核');
+          Message.success('申请已提交，请等待审核');
          this.distribution();
          this.getLog();
        } else {
-          this.$Message.error(this.normalizeWithdrawError(res.message));
+          Message.error(this.normalizeWithdrawError(res.message));
        }
      }).catch((err) => {
-        this.$Message.error(this.normalizeWithdrawError(err?.message || err?.data?.message));
+        Message.error(this.normalizeWithdrawError(err?.message || err?.data?.message));
      });
    },
    qrcodeData(data64) {
@@ -437,11 +445,23 @@ export default {
      this.params.pageNumber = val;
      this.getGoodsData();
    },
+    changePageSize(val) {
+      // 修改每页条数
+      this.params.pageNumber = 1;
+      this.params.pageSize = val;
+      this.getGoodsData();
+    },
    changePageLog(val) {
      // 修改页码 日志
      this.logParams.pageNumber = val;
      this.getLog();
    },
+    changePageSizeLog(val) {
+      // 修改每页条数 日志
+      this.logParams.pageNumber = 1;
+      this.logParams.pageSize = val;
+      this.getLog();
+    },
    selectGoods(id, checked) {
      // 选择商品
      let params = {
@@ -450,7 +470,7 @@ export default {
      };
      selectDistGoods(params).then((res) => {
        if (res.success) {
-          this.$Message.success("操作成功！");
+          Message.success("操作成功！");
          this.getGoodsData();
        }
      });
@@ -479,7 +499,7 @@ export default {
      applyDistribution().then((res) => {
        this.applyLoading = false;
        if (res.success) {
-          this.$Message.success("申诉已提交，请等待管理员审核");
+          Message.success("申诉已提交，请等待管理员审核");
          // this.status = 1;
        }
      });
--- a/buyer/src/pages/home/memberCenter/Favorites.vue
+++ b/buyer/src/pages/home/memberCenter/Favorites.vue
@@ -79,6 +79,7 @@
 </template>

 <script>
+import { Modal } from "@/utils/message";
 import { collectList, cancelCollect, storeCollectList, cancelStoreCollect } from '@/api/member.js'
 export default {
  name: 'Favorites',
@@ -145,7 +146,7 @@ export default {
    },
    cancel(id) { // 取消收藏
      let typeName = this.params.type === 'GOODS' ? '商品' : '店铺'
-      this.$Modal.confirm({
+      Modal.confirm({
        title: '取消收藏',
        content: `确定取消收藏该${typeName}吗？`,
        onOk: () => {
@@ -159,7 +160,7 @@ export default {
    },
    cancelStore(id) { // 取消收藏
      let typeName = this.params.type === 'GOODS' ? '商品' : '店铺'
-      this.$Modal.confirm({
+      Modal.confirm({
        title: '取消收藏',
        content: `确定取消收藏该${typeName}吗？`,
        onOk: () => {
--- a/buyer/src/pages/home/memberCenter/MemberGrade.vue
+++ b/buyer/src/pages/home/memberCenter/MemberGrade.vue
@@ -67,9 +67,9 @@
        </el-table>
        <div class="grade-pagination">
          <el-pagination
-            :current-page="params.pageNumber"
+            v-model:current-page="params.pageNumber"
+            v-model:page-size="params.pageSize"
            :total="experienceLogs.total || 0"
-            :page-size="params.pageSize"
            @current-change="changePage"
            @size-change="changePageSize"
            :page-sizes="[10, 20, 50]"
--- a/buyer/src/pages/home/memberCenter/ModifyPwd.vue
+++ b/buyer/src/pages/home/memberCenter/ModifyPwd.vue
@@ -74,6 +74,7 @@
 </template>

 <script>
+import { Message } from "@/utils/message";
 import { Lock } from '@element-plus/icons-vue';
 import {
  setPwd,
@@ -152,7 +153,7 @@ export default {
        if (valid) {
          const {newPassword, againPassword, password} = this.formRegister
          if (newPassword !== againPassword) {
-            this.$Message.error({
+            Message.error({
              content: '新密码和确认密码不一致'
            });
            return
@@ -162,13 +163,13 @@ export default {
          params.password = md5(password)
          editPwd(params).then(res => {
            if (res.success && res.result) {
-              this.$Message.success('修改密码成功');
+              Message.success('修改密码成功');
              this.$router.push('/home')
            } else {
-              this.$Message.error(this.normalizePwdError(res.message));
+              Message.error(this.normalizePwdError(res.message));
            }
          }).catch((err) => {
-            this.$Message.error(this.normalizePwdError(err?.message || err?.data?.message));
+            Message.error(this.normalizePwdError(err?.message || err?.data?.message));
          });
        }
      })
@@ -187,13 +188,13 @@ export default {
        if (valid) {
          const {newPassword, againPassword} = this.formDataUpdate
          if (newPassword === '') {
-            this.$Message.error({
+            Message.error({
              content: '请输入密码'
            });
            return
          }
          if (newPassword !== againPassword) {
-            this.$Message.error({
+            Message.error({
              content: '新密码和确认密码不一致'
            });
            return
@@ -202,7 +203,7 @@ export default {
          params.password = md5(newPassword)
          setPwd(params).then(res => {
            if (res.message === 'success' && res.result) {
-              this.$Message.success('支付密码设置成功');
+              Message.success('支付密码设置成功');
              this.$router.push('/home')
            }
          });
--- a/buyer/src/pages/home/memberCenter/Point.vue
+++ b/buyer/src/pages/home/memberCenter/Point.vue
@@ -20,9 +20,9 @@
    <!-- 分页 -->
    <div class="point-pagination">
      <el-pagination
-        :current-page="params.pageNumber"
+        v-model:current-page="params.pageNumber"
+        v-model:page-size="params.pageSize"
        :total="logData.total"
-        :page-size="params.pageSize"
        @current-change="changePage"
        @size-change="changePageSize"
        :page-sizes="[10, 20, 50]"
--- a/buyer/src/pages/home/memberCenter/Profile.vue
+++ b/buyer/src/pages/home/memberCenter/Profile.vue
@@ -45,6 +45,7 @@
 </template>

 <script>
+import { Message } from "@/utils/message";
 import { editMemberInfo } from '@/api/account.js';
 import { commonUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage.js';
@@ -104,7 +105,7 @@ export default {
          }
          editMemberInfo(params).then(res => {
            if (res.success) {
-              this.$Message.success('修改个人资料成功')
+              Message.success('修改个人资料成功')
              storage.setItem('userInfo', res.result)
              this.$router.go(0)
            }
--- a/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
+++ b/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
@@ -75,6 +75,7 @@
  </div>
 </template>
 <script>
+import { Message, Notice } from "@/utils/message";
 import { Camera, Delete, View } from '@element-plus/icons-vue';
 import { orderDetail } from '@/api/order.js';
 import { addEvaluation } from '@/api/member.js';
@@ -109,17 +110,17 @@ export default {
    },
    save () { // 保存评价
      if (!this.form.serviceScore || !this.form.deliveryScore) {
-        this.$Message.warning('物流服务评价不能为空')
+        Message.warning('物流服务评价不能为空')
        return false;
      }

      if (!this.form.descriptionScore) {
-        this.$Message.warning('描述评价不能为空')
+        Message.warning('描述评价不能为空')
        return false;
      }

      if (!this.orderGoods.content || !String(this.orderGoods.content).trim()) {
-        this.$Message.warning('评论内容不能为空')
+        Message.warning('评论内容不能为空')
        return false;
      }

@@ -139,14 +140,14 @@ export default {
      addEvaluation(params).then(res => {
        this.loading = false
        if (res.success) {
-          this.$Message.success('评价成功')
+          Message.success('评价成功')
          this.$router.push('/home/CommentList')
        } else {
-          this.$Message.error(res.message || '评价失败，请稍后重试')
+          Message.error(res.message || '评价失败，请稍后重试')
        }
      }).catch((err) => {
        this.loading = false;
-        this.$Message.error(err?.message || '评价失败，请稍后重试')
+        Message.error(err?.message || '评价失败，请稍后重试')
      })
    },
    goGoodsDetail (skuId, goodsId) { // 跳转商品详情
@@ -171,7 +172,7 @@ export default {
    handleBeforeUpload () { // 上传之前钩子
      const check = this.orderGoods.uploadList.length < 9;
      if (!check) {
-        this.$Notice.warning({
+        Notice.warning({
          title: '最多可以上传九张图片'
        });
        return check;
--- a/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
+++ b/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
@@ -31,9 +31,9 @@
      </el-table>
      <div class="msg-pagination">
        <el-pagination
-          :current-page="params.pageNumber"
+          v-model:current-page="params.pageNumber"
+          v-model:page-size="params.pageSize"
          :total="messageData.total"
-          :page-size="params.pageSize"
          @current-change="changePage"
          @size-change="changePageSize"
          :page-sizes="[10, 20, 50]"
@@ -44,6 +44,7 @@
  </div>
 </template>
 <script>
+import { Message, Modal } from "@/utils/message";
 import {memberMsgList, readMemberMsg, delMemberMsg} from '@/api/member.js'
 export default {
  data() {
@@ -94,19 +95,17 @@ export default {
      })
    },
    removeMessage (id) {
-      this.$Modal.confirm({
+      Modal.confirm({
        title: '确认删除',
        content: '确认要删除此消息?',
        loading: true,
-        onOk: () => {
+        onOk: () =>
          delMemberMsg(id).then((res) => {
-            this.$Modal.remove();
            if (res.success) {
-              this.$Message.success('消息已成功放入回收站');
+              Message.success('消息已成功放入回收站');
              this.getList();
            }
-          });
-        },
+          }),
      });
    }
  },
--- a/buyer/src/pages/home/orderCenter/AfterSale.vue
+++ b/buyer/src/pages/home/orderCenter/AfterSale.vue
@@ -70,9 +70,9 @@
    </div>
    <!-- 分页 -->
    <div class="page-size">
-      <el-pagination :total="total" @current-change="changePageNum"
-            @size-change="changePageSize"
-            :page-size="params.pageSize" layout="sizes, prev, pager, next, jumper"></el-pagination>
+      <el-pagination v-model:current-page="params.pageNumber" v-model:page-size="params.pageSize"
+        :total="total" @current-change="changePageNum"
+            @size-change="changePageSize" layout="sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    </UserCenterLayout>
    <el-dialog v-model="logisticsShow" width="530">
@@ -123,6 +123,7 @@
 </template>

 <script>
+import { Message, Modal } from "@/utils/message";
 import {afterSaleList, cancelAfterSale} from '@/api/member.js';
 import {afterSaleDelivery, getLogisticsCompany} from '@/api/order.js';
 import {afterSaleStatusList} from '../enumeration.js'
@@ -171,13 +172,13 @@ export default {
      })
    },
    cancel(sn) { // 取消售后申请
-      this.$Modal.confirm({
+      Modal.confirm({
        title: '取消',
        content: '确定取消此次售后申请吗？',
        onOk: () => {
          cancelAfterSale(sn).then(res => {
            if (res.success) {
-              this.$Message.success('取消售后申请成功')
+              Message.success('取消售后申请成功')
              this.getList()
            }
          })
@@ -244,7 +245,7 @@ export default {
        afterSaleDelivery(this.form).then(res => {
          if (res.success) {
            this.logisticsShow = false;
-            this.$Message.success('提交成功');
+            Message.success('提交成功');
            this.getList();
          }
          this.submitLoading = false;
--- a/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
+++ b/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
@@ -114,6 +114,7 @@
  </div>
 </template>
 <script>
+import { Message, Modal } from "@/utils/message";
 import { afterSaleDetail, afterSaleLog, afterSaleReason, cancelAfterSale } from '@/api/member.js';
 import { afterSaleDelivery, getLogisticsCompany } from '@/api/order.js';
 import { afterSaleStatusList } from '../enumeration.js'
@@ -182,13 +183,13 @@ export default {
      window.open(img, '_blank')
    },
    cancel (sn) { // 取消售后申请
-      this.$Modal.confirm({
+      Modal.confirm({
        title: '取消',
        content: '<p>确定取消此次售后申请吗？</p>',
        onOk: () => {
          cancelAfterSale(sn).then(res => {
            if (res.success) {
-              this.$Message.success('取消售后申请成功')
+              Message.success('取消售后申请成功')
              this.getDetail()
            }
          })
@@ -210,7 +211,7 @@ export default {
      afterSaleDelivery(this.form).then(res => {
        if (res.success) {
          this.logisticsShow = false;
-          this.$Message.success('提交成功')
+          Message.success('提交成功')
          this.getDetail()
        }
        this.submitLoading = false
--- a/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
+++ b/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
@@ -102,6 +102,7 @@
  </div>
 </template>
 <script>
+import { Message, Notice } from "@/utils/message";
 import { Camera, Delete, View } from '@element-plus/icons-vue';
 import { afterSaleReason, afterSaleInfo, applyAfterSale } from '@/api/member.js'
 import { commonUrl } from '@/plugins/request.js';
@@ -186,7 +187,7 @@ export default {
          params.reason = this.reasonList.find(item => item.id == params.reason).reason
          applyAfterSale(params).then(res => {
            if (res.success) {
-              this.$Message.success('售后申请提交成功，请到售后订单查看！')
+              Message.success('售后申请提交成功，请到售后订单查看！')
              this.$router.push({name: 'AfterSale'})
            }
          })
@@ -208,7 +209,7 @@ export default {
    handleBeforeUpload () { // 上传之前钩子函数
      const check = this.uploadList.length < 6;
      if (!check) {
-        this.$Notice.warning({
+        Notice.warning({
          title: '最多可以上传5张图片'
        });
        return check;
--- a/buyer/src/pages/home/orderCenter/Complain.vue
+++ b/buyer/src/pages/home/orderCenter/Complain.vue
@@ -62,6 +62,7 @@
  </div>
 </template>
 <script>
+import { Message, Notice } from "@/utils/message";
 import { Camera, Delete, View } from '@element-plus/icons-vue';
 import { orderDetail } from '@/api/order.js';
 import { afterSaleReason, handleComplain } from '@/api/member.js';
@@ -111,7 +112,7 @@ export default {
      }
      handleComplain(params).then(res => {
        if (res.success) {
-          this.$Message.success('投诉申请已提交，感谢您的反馈')
+          Message.success('投诉申请已提交，感谢您的反馈')
          this.$router.push({name: 'ComplainList'})
        }
      })
@@ -138,7 +139,7 @@ export default {
    handleBeforeUpload () { // 上传之前钩子函数
      const check = this.orderGoods.uploadList.length < 6;
      if (!check) {
-        this.$Notice.warning({
+        Notice.warning({
          title: '最多可以上传五张图片'
        });
        return check;
--- a/buyer/src/pages/home/orderCenter/MyAddress.vue
+++ b/buyer/src/pages/home/orderCenter/MyAddress.vue
@@ -36,6 +36,7 @@
 </template>

 <script>
+import { Message, Modal } from "@/utils/message";
 import { Delete, Edit } from '@element-plus/icons-vue';
 import { memberAddress, delMemberAddress } from '@/api/address.js';

@@ -58,19 +59,19 @@ export default {
    },
    del (id) {
      // 删除地址
-      this.$Modal.confirm({
+      Modal.confirm({
        title: '提示',
        content: '你确定删除这个收货地址',
        onOk: () => {
          delMemberAddress(id).then((res) => {
            if (res.success) {
-              this.$Message.success('删除成功');
+              Message.success('删除成功');
              this.getAddrList();
            }
          });
        },
        onCancel: () => {
-          this.$Message.info('取消删除');
+          Message.info('取消删除');
        }
      });
    },
--- a/buyer/src/pages/home/orderCenter/MyOrder.vue
+++ b/buyer/src/pages/home/orderCenter/MyOrder.vue
@@ -83,9 +83,9 @@

      <!-- 分页 -->
      <div class="page-size">
-        <el-pagination :total="total" @current-change="changePageNum"
-          @size-change="changePageSize"
-          :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+        <el-pagination v-model:current-page="params.pageNumber" v-model:page-size="params.pageSize"
+          :total="total" @current-change="changePageNum"
+          @size-change="changePageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
    </UserCenterLayout>

@@ -176,6 +176,7 @@
 </template>

 <script>
+import { Message, Modal } from "@/utils/message";
 import { getOrderList, sureReceived, cancelOrder, delOrder } from '@/api/order';
 import { afterSaleReason } from '@/api/member';
 import { orderStatusList } from '../enumeration.js'
@@ -276,7 +277,7 @@ export default {
    received (sn) { // 确认收货
      sureReceived(sn).then(res => {
        if (res.success) {
-          this.$Message.success('确认收货成功')
+          Message.success('确认收货成功')
          this.getList()
        }
      })
@@ -309,13 +310,13 @@ export default {
      this.$router.push({name: 'Complain', query: {sn, index: goodsIndex}})
    },
    delOrder (sn) { // 删除订单
-      this.$Modal.confirm({
+      Modal.confirm({
        title: '删除订单',
        content: '<p>确认删除当前订单吗？</p>',
        onOk: () => {
          delOrder(sn).then(res => {
            if (res.success) {
-              this.$Message.success('删除成功');
+              Message.success('删除成功');
              this.getList()
            }
          })
@@ -360,7 +361,7 @@ export default {
    sureCancel () { // 确定取消
      cancelOrder(this.cancelParams).then(res => {
        if (res.success) {
-          this.$Message.success('取消订单成功')
+          Message.success('取消订单成功')
          this.getList()
          this.cancelAvail = false
        }
--- a/buyer/src/pages/home/orderCenter/OrderDetail.vue
+++ b/buyer/src/pages/home/orderCenter/OrderDetail.vue
@@ -264,7 +264,8 @@
          <dd><div class="text-box">{{ order.order.sn }}</div></dd>
        </dl>
      </div>
-      <div v-if="orderPackage.length > 0" v-for="(packageItem, packageIndex) in orderPackage" :key="packageIndex">
+      <template v-if="orderPackage.length > 0">
+      <div v-for="(packageItem, packageIndex) in orderPackage" :key="packageIndex">
        <div class="layui-layer-wrap">
          <dl><dt>物流公司：</dt>
            <dd><div class="text-box">{{ packageItem.logisticsName }}</div></dd>
@@ -292,6 +293,7 @@
          </div>
        </div>
      </div>
+      </template>
      <div v-if = "orderPackage.length == 0 && logistics">
        <div class="layui-layer-wrap">
          <dl>
@@ -322,6 +324,7 @@
  </div>
 </template>
 <script>
+import { Message } from "@/utils/message";
 import {
  orderDetail,
  getTraces,
@@ -390,7 +393,7 @@ export default {
    viewReceiptInvoice (receipt) {
      const invoiceAddress = this.getInvoiceAddress(receipt);
      if (!invoiceAddress) {
-        this.$Message.warning("暂无发票附件");
+        Message.warning("暂无发票附件");
        return;
      }
      window.open(invoiceAddress, "_blank");
@@ -477,7 +480,7 @@ export default {
      // 确认收货
      sureReceived(sn).then((res) => {
        if (res.success) {
-          this.$Message.success("确认收货成功");
+          Message.success("确认收货成功");
          this.getDetail();
        }
      });
@@ -519,7 +522,7 @@ export default {
      // 确定取消
      cancelOrder(this.cancelParams).then((res) => {
        if (res.success) {
-          this.$Message.success("取消订单成功");
+          Message.success("取消订单成功");
          this.getDetail();
          this.cancelAvail = false;
        }
@@ -695,15 +698,15 @@ table {
 .layui-layer-wrap > .div-express-log {
  max-height: 300px;
 }
-:deep .layui-layer-wrap > .div-express-log::-webkit-scrollbar{
+:deep(.layui-layer-wrap > .div-express-log::-webkit-scrollbar){
  width: 1px;
  height: 5px;
 }
-: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);
 }
-: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);
 }
@@ -727,7 +730,6 @@ table {

  .time {
    width: 30%;
-    display: inline-block;
    float: left;
  }

--- a/buyer/src/pages/home/userCenter/Coupons.vue
+++ b/buyer/src/pages/home/userCenter/Coupons.vue
@@ -37,10 +37,11 @@
      </ul>
      <div class="pageration">
        <el-pagination
+          v-model:current-page="params.pageNumber"
+          v-model:page-size="params.pageSize"
          :total="total"
          @current-change="changePageNum"
          @size-change="changePageSize"
-          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
--- a/buyer/src/pages/home/userCenter/MoneyManagement.vue
+++ b/buyer/src/pages/home/userCenter/MoneyManagement.vue
@@ -102,8 +102,8 @@
        </el-table>
        <!-- 分页 -->
        <div class="page-size">
-          <el-pagination             :current-page="walletForm.pageNumber"
-            :page-size="walletForm.pageSize"
+          <el-pagination             v-model:current-page="walletForm.pageNumber"
+            v-model:page-size="walletForm.pageSize"
            :page-sizes="[10, 20, 50]"
            :total="logColumnsData.total"
            @current-change="changePage"
@@ -140,8 +140,8 @@
        </el-table>
        <!-- 分页 -->
        <div class="page-size">
-          <el-pagination             :current-page="rechargeForm.pageNumber"
-            :page-size="rechargeForm.pageSize"
+          <el-pagination             v-model:current-page="rechargeForm.pageNumber"
+            v-model:page-size="rechargeForm.pageSize"
            :page-sizes="[10, 20, 50]"
            :total="rechargeListData.total"
            @current-change="rechargeChangePage"
@@ -174,8 +174,8 @@
        </el-table>
        <!-- 分页 -->
        <div class="page-size">
-          <el-pagination             :current-page="withdrawApplyForm.pageNumber"
-            :page-size="withdrawApplyForm.pageSize"
+          <el-pagination             v-model:current-page="withdrawApplyForm.pageNumber"
+            v-model:page-size="withdrawApplyForm.pageSize"
            :page-sizes="[10, 20, 50]"
            :total="withdrawApplyColumnsListData.total"
            @current-change="withdrawChangePage"
@@ -189,6 +189,7 @@
 </template>

 <script>
+import { Message } from "@/utils/message";
 import {getDepositLog, getMembersWallet, getRecharge, getWithdrawApply, recharge, withdrawalApply} from '@/api/member';
 import {withdrawalSettingVO} from "@/api/pay";
 import { Edit } from '@element-plus/icons-vue';
@@ -398,7 +399,7 @@ export default {
        if (valid) {
          withdrawalApply(this.withdrawApplyFormData).then((res) => {
            if (res && res.success) {
-              this.$Message.success('提现申请成功，关注提现状态');
+              Message.success('提现申请成功，关注提现状态');
              this.withdrawApplyModal = false;
              this.init(); // 余额查询
              this.getWithdrawApplyData(); // 提现记录
--- a/buyer/src/pages/home/userCenter/MyGiftCards.vue
+++ b/buyer/src/pages/home/userCenter/MyGiftCards.vue
@@ -73,8 +73,8 @@
    </div>

    <div class="page-size">
-      <el-pagination         :current-page="params.pageNumber"
-        :page-size="params.pageSize"
+      <el-pagination         v-model:current-page="params.pageNumber"
+        v-model:page-size="params.pageSize"
        :page-sizes="[10, 20, 50]"
        :total="total"
        @current-change="changePage"
@@ -82,7 +82,7 @@
       layout="total, sizes, prev, pager, next, jumper" />
    </div>

-    <el-dialog v-model="noticeModal" title="使用须知" footer-hide width="520">
+    <el-dialog v-model="noticeModal" title="使用须知" width="520">
      <p class="gcc-notice-text">
        请在有效期内使用本礼品卡；消费时将优先使用卡内余额。具体使用范围以活动规则为准。如有疑问请联系客服。
      </p>
@@ -94,6 +94,7 @@
 </template>

 <script>
+import { Message } from "@/utils/message";
 import {
  getGiftCardCashMemberCardPage,
  bindGiftCardCashMemberCard,
@@ -231,7 +232,7 @@ export default {
          .then((res) => {
            this.bindSubmitting = false;
            if (res.success) {
-              this.$Message.success(res.message || "兑换成功");
+              Message.success(res.message || "兑换成功");
              this.resetBindForm();
              this.params.pageNumber = 1;
              this.getList();
@@ -249,14 +250,14 @@ export default {
      if (this.statusTab === "PENDING_ACTIVATION") {
        const memberCardId = this.resolveMemberCardId(item);
        if (!memberCardId) {
-          this.$Message.error("卡片信息异常，无法激活");
+          Message.error("卡片信息异常，无法激活");
          return;
        }
        this.activatingId = memberCardId;
        activateGiftCardCashMemberCard(memberCardId)
          .then((res) => {
            if (res.success) {
-              this.$Message.success(res.message || "激活成功");
+              Message.success(res.message || "激活成功");
              this.getList();
            }
          })
--- a/buyer/src/pages/home/userCenter/MyTracks.vue
+++ b/buyer/src/pages/home/userCenter/MyTracks.vue
@@ -23,9 +23,9 @@
    <!-- 分页 -->
    <div class="page-size">
      <el-pagination
+        v-model:current-page="params.pageNumber"
+        v-model:page-size="params.pageSize"
        :total="total"
-        :current-page="params.pageNumber"
-        :page-size="params.pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        layout="sizes, prev, pager, next, jumper"
        @current-change="changePageNum"
@@ -37,6 +37,7 @@
 </template>

 <script>
+import { Message, Modal } from "@/utils/message";
 import { Delete } from '@element-plus/icons-vue';
 import { tracksList, clearTracks, clearTracksById } from "@/api/member";
 export default {
@@ -77,13 +78,13 @@ export default {
    },
    clearAll() {
      // 清除全部足迹
-      this.$Modal.confirm({
+      Modal.confirm({
        title: "删除",
        content: "<p>确定要删除全部足迹吗？</p>",
        onOk: () => {
          clearTracks().then((res) => {
            if (res.success) {
-              this.$Message.success("删除成功");
+              Message.success("删除成功");
              this.getList();
            }
          });
@@ -95,7 +96,7 @@ export default {
      // 清除全部足迹
      clearTracksById(id).then((res) => {
        if (res.success) {
-          this.$Message.success("删除成功");
+          Message.success("删除成功");
          this.getList();
        }
      });
--- a/buyer/src/pages/payment/Pay.vue
+++ b/buyer/src/pages/payment/Pay.vue
@@ -299,7 +299,7 @@
    <invoice-modal ref="invModal" :invoiceData="invoiceData" @change="getInvMsg" />
    <!-- 选择地址模态框 -->
    <address-manage ref="address" :id="addrId" @change="addrChange"></address-manage>
-    <el-dialog v-model="giftCardNoticeModal" title="礼品卡使用说明" footer-hide width="520">
+    <el-dialog v-model="giftCardNoticeModal" title="礼品卡使用说明" width="520">
      <p class="pay-gcc-notice-p">
        请在礼品卡有效期内使用；结算时勾选礼品卡即可按规则抵扣订单金额，可与优惠券等活动叠加规则以平台说明为准。放弃勾选或取消抵扣将恢复对应余额。
      </p>
@@ -310,6 +310,7 @@
 </template>

 <script>
+import { Message, Modal, Spin } from "@/utils/message";
 import { ArrowDown, ArrowUp, Check, Help, Plus, Warning } from '@element-plus/icons-vue';
 import invoiceModal from "@/components/invoiceModal";
 import addressManage from "@/components/addressManage";
@@ -487,17 +488,17 @@ export default {
    },
    getGoodsDetail() {
      // 订单商品详情
-      this.$Spin.show();
+      Spin.show();
      cartGoodsPay({ way: this.$route.query.way })
        .then((res) => {
-          this.$Spin.hide();
+          Spin.hide();
          if (res.success) {
            if (
              !res.result.checkedSkuList ||
              res.result.checkedSkuList.length === 0
            ) {
              if (res.result.skuList && res.result.skuList[0]) {
-                this.$Modal.warning({
+                Modal.warning({
                  title: "购物车存在无效商品！",
                  content:
                    "[" +
@@ -545,7 +546,7 @@ export default {
                title = e.errorMessage;
                content.push(e.goodsSku.goodsName);
              });
-              this.$Modal.warning({
+              Modal.warning({
                title: "以下商品超出配送区域" || title,
                content: content.toString(),
              });
@@ -587,7 +588,7 @@ export default {
          }
        })
        .catch(() => {
-          this.$Spin.hide();
+          Spin.hide();
        });
    },
    syncGiftCardSelectionFromCart(result) {
@@ -727,7 +728,7 @@ export default {
      };
      selectAddr(params).then((res) => {
        if (res.success) {
-          this.$Message.success("选择配送方式成功");
+          Message.success("选择配送方式成功");
          this.selectMethod = item;
          this.getGoodsDetail();
        }
@@ -739,7 +740,7 @@ export default {
      // 选择自提地址
      setStoreAddressId(item.id,this.$route.query.way).then((res) => {
        if (res.success) {
-          this.$Message.success("选择自提地址成功");
+          Message.success("选择自提地址成功");
          this.selectedStoreAddress = item;
          this.getGoodsDetail();
        }
@@ -768,13 +769,13 @@ export default {
    },
    delAddress(item) {
      // 删除地址
-      this.$Modal.confirm({
+      Modal.confirm({
        title: "提示",
        content: "你确定删除这个收货地址",
        onOk: () => {
          delMemberAddress(item.id).then((res) => {
            if (res.success) {
-              this.$Message.success("删除成功");
+              Message.success("删除成功");
              this.getAddress();
            }
          });
@@ -839,10 +840,10 @@ export default {

      if (!params.remark.length) delete params.remark;

-      this.$Spin.show();
+      Spin.show();
      createTrade(params)
        .then((res) => {
-          this.$Spin.hide();
+          Spin.hide();
          if (res.success) {
            if (params.way === "POINTS") {
              // 积分支付不需要跳转支付页面
@@ -856,7 +857,7 @@ export default {
          }
        })
        .catch(() => {
-          this.$Spin.hide();
+          Spin.hide();
        });
    },
    // 优惠券可用范围
--- a/buyer/src/pages/payment/PayMent.vue
+++ b/buyer/src/pages/payment/PayMent.vue
@@ -38,7 +38,7 @@
 <script>

 import {tradeDetail, pay} from '@/api/pay.js';
-import { Message } from '@/utils/message';
+import { Message, Modal } from "@/utils/message";

 export default {
  data () {
@@ -98,16 +98,16 @@ export default {
      params.paymentClient = 'NATIVE';
      params.price = this.payDetail.price;
      if (way === 'WALLET') {
-        this.$Modal.confirm({
+        Modal.confirm({
          title: '支付确认',
          content: '确认使用余额支付吗？',
          onOk: () => {
            pay(params).then(res => {
              if (res.success) {
-                this.$Message.success(res.message)
+                Message.success(res.message)
                this.$router.push('/payDone');
              } else {
-                this.$Message.warning(res.message)
+                Message.warning(res.message)
              }
            })
          }
--- a/buyer/src/pages/payment/ThirdPay.vue
+++ b/buyer/src/pages/payment/ThirdPay.vue
@@ -33,6 +33,7 @@
  </div>
 </template>
 <script>
+import { Message } from "@/utils/message";
 import { Iphone } from '@element-plus/icons-vue';
 import vueQr from 'vue-qr';
 import { payCallback, pay } from '@/api/pay.js';
@@ -56,7 +57,7 @@ export default {
          this.num = 0;
          this.interval = setInterval(this.callback, 5000);
        } else {
-          this.$Message.error(res.message)
+          Message.error(res.message)
        }
      });
    },
--- a/buyer/src/pages/promotion/PointGoodsDetail.vue
+++ b/buyer/src/pages/promotion/PointGoodsDetail.vue
@@ -85,6 +85,7 @@
 </template>

 <script>
+import { Message } from "@/utils/message";
 import Search from '@/components/Search';
 import { addCartGoods } from '@/api/cart.js';
 import { pointGoodsDetail } from '@/api/promotion';
@@ -121,7 +122,7 @@ export default {
          this.goodsMsg = res.result;
          this.goodsSku = res.result.goodsSku
        } else {
-          this.$Message.error(res.message)
+          Message.error(res.message)
          this.$router.push('/')
        }
      }).catch(() => {
@@ -140,7 +141,7 @@ export default {
        if (res.success) {
          this.$router.push({path: '/pay', query: {way: params.cartType}});
        } else {
-          this.$Message.warning(res.message);
+          Message.warning(res.message);
        }
      }).catch(() => {
        this.loading = false;
--- a/buyer/src/pages/promotion/PointMall.vue
+++ b/buyer/src/pages/promotion/PointMall.vue
@@ -37,9 +37,9 @@
      </div>
    </div>
    <div class="page-size">
-      <el-pagination :total="total" @current-change="changePageNum"
-        @size-change="changePageSize"
-        :page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
+      <el-pagination v-model:current-page="params.pageNumber" v-model:page-size="params.pageSize"
+        :total="total" @current-change="changePageNum"
+        @size-change="changePageSize" layout="total, sizes, prev, pager, next"></el-pagination>
    </div>
    <BaseFooter></BaseFooter>
  </div>
--- a/buyer/src/pages/shopEntry/FirstApply.vue
+++ b/buyer/src/pages/shopEntry/FirstApply.vue
@@ -191,6 +191,7 @@
  </div>
 </template>
 <script>
+import { Message, Notice } from "@/utils/message";
 import { Delete, View } from '@element-plus/icons-vue';
 import { applyFirst } from '@/api/shopentry';
 import * as RegExp from '@/plugins/RegExp.js';
@@ -320,7 +321,7 @@ export default {
    beforeUpload (file) {
      this.uploadLoading = true;
      if (this.form.licencePhoto.length >= 1) {
-        this.$Message.warning('最多上传一张图片')
+        Message.warning('最多上传一张图片')
        this.uploadLoading = false;
        return false;
      }
@@ -330,7 +331,7 @@ export default {
    beforeUpload1 (file) {
      this.uploadLoading1 = true;
      if (this.form.legalPhoto.length >= 2) {
-        this.$Message.warning('最多上传两张图片')
+        Message.warning('最多上传两张图片')
        this.uploadLoading1 = false;
        return false;
      }
@@ -343,13 +344,13 @@ export default {
      if (!isAllowedType) {
        this.uploadLoading = false;
        this.uploadLoading1 = false;
-        this.$Message.warning('上传文件格式不正确');
+        Message.warning('上传文件格式不正确');
        return false;
      }
      if (!isLt2M) {
        this.uploadLoading = false;
        this.uploadLoading1 = false;
-        this.$Message.warning('文件大小不能超过2M');
+        Message.warning('文件大小不能超过2M');
        return false;
      }
      return true;
@@ -373,7 +374,7 @@ export default {
    handleFormatError (file) {
      this.uploadLoading = false;
      this.uploadLoading1 = false;
-      this.$Notice.warning({
+      Notice.warning({
        title: 'The file format is incorrect',
        desc: '上传文件格式不正确'
      });
@@ -382,7 +383,7 @@ export default {
    handleMaxSize (file) {
      this.uploadLoading = false;
      this.uploadLoading1 = false;
-      this.$Notice.warning({
+      Notice.warning({
        title: 'Exceeding file size limit',
        desc: '文件大小不能超过2M'
      });
--- a/buyer/src/pages/shopEntry/ShopEntry.vue
+++ b/buyer/src/pages/shopEntry/ShopEntry.vue
@@ -42,7 +42,7 @@
        v-if="storeDisable === 'REFUSED' && currentIndex === 3">重新申请</el-button>
    </div>

-    <el-dialog title="店铺入驻协议" v-model="showAgreement" width="1200" :closable="false" :close-on-click-modal="false">
+    <el-dialog title="店铺入驻协议" v-model="showAgreement" width="1200" :show-close="false" :close-on-click-modal="false">
      <div class="agreement-scroll">
        <div class="agreeent-con" v-html="agreementCon"></div>
      </div>
@@ -211,7 +211,7 @@ export default {
 }
 .agreeent-con {
  max-height: 500px;
-  :deep img{
+  :deep(img){
    max-width: 100%;

  }
--- a/buyer/src/pages/shopEntry/ThirdApply.vue
+++ b/buyer/src/pages/shopEntry/ThirdApply.vue
@@ -93,6 +93,7 @@
  </div>
 </template>
 <script>
+import { Message } from "@/utils/message";
 import { Delete, View } from '@element-plus/icons-vue';
 import { applyThird } from '@/api/shopentry';
 import { getCategory } from '@/api/goods';
@@ -153,7 +154,6 @@ export default {
            .then((res) => {
              this.loading = false;
              if (res.success) this.$emit('change', 3);
-              this.$parent.getData('next');
            })
            .catch(() => {
              this.loading = false;
@@ -167,7 +167,7 @@ export default {
    beforeUpload (file) {
      this.uploadLoading = true;
      if (this.form.storeLogo.length >= 1) {
-        this.$Message.warning('最多上传一张图片')
+        Message.warning('最多上传一张图片')
        this.uploadLoading = false;
        return false;
      }
@@ -179,12 +179,12 @@ export default {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isAllowedType) {
        this.uploadLoading = false;
-        this.$Message.warning('上传文件格式不正确');
+        Message.warning('上传文件格式不正确');
        return false;
      }
      if (!isLt2M) {
        this.uploadLoading = false;
-        this.$Message.warning('文件大小不能超过2M');
+        Message.warning('文件大小不能超过2M');
        return false;
      }
      return true;