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

- 将多个组件中的 require 替换为 import，提升代码一致性。 - 更新消息提示方式，使用统一的 Message 和 Modal 组件，增强用户体验。 - 调整部分组件的样式和逻辑，确保界面一致性与可读性。
2026-08-06 10:57:26 +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/components/addressManage/index.vue
+++ b/buyer/src/components/addressManage/index.vue
@@ -44,6 +44,7 @@
 </template>

 <script>
+import { Message } from "@/utils/message";
 import multipleMap from "@/components/map/multiple-map";
 import {
  newMemberAddress,
@@ -96,7 +97,7 @@ export default {
            editMemberAddress(params).then((res) => {
              this.loading = false;
              if (res.success) {
-                this.$Message.success('编辑地址成功');
+                Message.success('编辑地址成功');
                this.$emit('change', true);
                this.hide();
              }
@@ -105,7 +106,7 @@ export default {
            newMemberAddress(params).then((res) => {
              this.loading = false;
              if (res.success) {
-                this.$Message.success('新增地址成功');
+                Message.success('新增地址成功');
                this.$emit('change', true);
                this.hide();
              }
--- a/buyer/src/components/drawer/Drawer.vue
+++ b/buyer/src/components/drawer/Drawer.vue
@@ -79,6 +79,7 @@
 </template>

 <script>
+import { Message, Modal } from "@/utils/message";
 import { Delete } from '@element-plus/icons-vue';
 import {cartGoodsAll, delCartGoods, addCartGoods, cartCount} from '@/api/cart.js'
 import { getOrderList } from '@/api/order';
@@ -165,14 +166,14 @@ export default {
    delGoods (id) {
      delCartGoods({ skuIds: id }).then((res) => {
        if (res.success) {
-          this.$Message.success('删除成功');
+          Message.success('删除成功');
          this.getCartList();
          cartCount().then(res => {
            this.$store.commit('SET_CARTNUM', res.result)
            this.Cookies.setItem('cartNum', res.result)
          })
        } else {
-          this.$Message.error(res.message);
+          Message.error(res.message);
        }
      });
    },
@@ -183,7 +184,7 @@ export default {
    receive (item) { // 领取优惠券
      receiveCoupon(item.id).then(res => {
        if (res.success) {
-          this.$Modal.confirm({
+          Modal.confirm({
            title: '领取优惠券',
            content: '<p>优惠券领取成功，可到我的优惠券页面查看</p>',
            okText: '我的优惠券',
@@ -232,9 +233,9 @@ export default {
      addCartGoods(params).then(res => {
        this.loading = false;
        if (res.success) {
-          this.$Message.success('商品已成功添加到购物车')
+          Message.success('商品已成功添加到购物车')
        } else {
-          this.$Message.warning(res.message);
+          Message.warning(res.message);
        }
      }).catch(() => { this.loading = false });
    },
@@ -280,7 +281,7 @@ export default {
    cancelCollect (id) { // 取消商品收藏
      cancelCollect('GOODS', id).then(res => {
        if (res.success) {
-          this.$Message.success('取消收藏成功')
+          Message.success('取消收藏成功')
          this.getCollectList();
        }
      })
--- a/buyer/src/components/drawer/Main.vue
+++ b/buyer/src/components/drawer/Main.vue
@@ -13,7 +13,7 @@
      </div>

    </div>
-    <el-drawer width="300" class="popup" :title="drawerData.title" :mask="resetConfig.mask" :closable="resetConfig.closable"
+    <el-drawer width="300" class="popup" :title="drawerData.title" :modal="resetConfig.mask" :show-close="resetConfig.closable"
      v-model="handleDrawer">
      <drawerPage :title="drawerData.title" />
    </el-drawer>
@@ -21,6 +21,7 @@
 </template>

 <script>
+import { Modal } from "@/utils/message";
 import Storage from '@/plugins/storage.js';
 import Configuration from './config';
 import drawerPage from './Drawer'
@@ -55,7 +56,7 @@ export default {
    },
    clickBar (val) { // tabbar点击操作
      if (!this.userInfo) {
-        this.$Modal.confirm({
+        Modal.confirm({
          title: '请登录',
          content: '请登录后执行此操作',
          okText: '立即登录',
--- a/buyer/src/components/fixed/index.vue
+++ b/buyer/src/components/fixed/index.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="shadow-box">
        <div class="shadow-item flex flex-a-c flex-j-c" v-for="(item,index) in iconList" @click="handleClickIcon(item)" :key="index">
-          <img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
+          <img class="icon" :src="getIconUrl(item.icon)">
          <div class="shadow-label">{{item.label}}</div>
          <div class="line" v-if="iconList.length-1 !=index"></div>
        </div>
@@ -9,6 +9,8 @@
 </template>

 <script>
+import { getIconUrl } from "@/assets/iconfont/iconMap";
+
 export default {
  name: "fixed-index",
  data(){
@@ -58,6 +60,7 @@ export default {

  },
  methods:{
+    getIconUrl,
    scrollToTop() {
      const c = document.documentElement.scrollTop || document.body.scrollTop;
      if (c > 0) {
--- a/buyer/src/components/footer/Footer.vue
+++ b/buyer/src/components/footer/Footer.vue
@@ -69,12 +69,13 @@
 </template>

 <script>
+import config from '@/config';

 export default {
  name: "Footer",
  data() {
    return {
-      config:require('@/config'),
+      config,
      guideArr: [
        // 导航链接
        ["购物指南", "购物流程", "会员介绍", "生活旅行", "常见问题"],
--- a/buyer/src/components/goodsDetail/ShowGoods.vue
+++ b/buyer/src/components/goodsDetail/ShowGoods.vue
@@ -120,7 +120,7 @@
            </div>
            <!-- 优惠券展示 -->
            <div class="item-price-coupon-row" v-if="promotionMap['COUPON'].length">
-              <p class="Ellipsis">
+              <div class="Ellipsis">
                <span class="item-price-title">优 惠 券</span>
                <span>
                  <span
@@ -156,7 +156,7 @@
                      </span>
                    </div>
                  </div>
-              </p>
+              </div>
            </div>
            <!-- 满减展示 -->
            <div class="item-price-row" v-if="promotionMap['FULL_DISCOUNT']">
@@ -238,7 +238,7 @@
                  :precision="0"
                  @blur="changeCount"
                ></el-input-number>
-                <span class="inventory">&nbsp&nbsp库存{{ skuDetail.quantity }}</span>
+                <span class="inventory">&nbsp;&nbsp;库存{{ skuDetail.quantity }}</span>
              </div>
            </div>
          </div>
@@ -293,7 +293,7 @@
                  >立即购买</el-button
                >
                <el-tooltip content="观看视频" v-if="skuDetail.goodsVideo">
-                  <img class="view-video" @click="showGoodsVideo = true" :src="require('@/assets/iconfont/play.svg')" alt="">
+                  <img class="view-video" @click="showGoodsVideo = true" :src="playIcon" alt="">
                </el-tooltip>
              </div>
            </div>
@@ -308,6 +308,7 @@
 </template>

 <script>
+import { Message } from "@/utils/message";
 import { StarFilled } from '@element-plus/icons-vue';
 import Promotion from "./Promotion.vue";
 import DPlayer from "dplayer";
@@ -318,6 +319,7 @@ import {
  cancelCollect,
 } from "@/api/member.js";
 import { addCartGoods } from "@/api/cart.js";
+import playIcon from "@/assets/iconfont/play.svg";

 export default {
  name: "ShowGoods",
@@ -348,6 +350,7 @@ export default {
  },
  data() {
    return {
+      playIcon,
      showGoodsVideo:false,
      goodsVideo:"",
      wholesaleList: [],
@@ -440,7 +443,7 @@ export default {
    changeCount(val) {
      if (this.wholesaleList && this.wholesaleList.length > 0) {
        if (this.count <= this.wholesaleList[0].num) {
-          this.$Message.warning("批发商品购买数量不能小于起批数量");
+          Message.warning("批发商品购买数量不能小于起批数量");
          this.count = this.wholesaleList[0].num;
        }
      }
@@ -480,10 +483,16 @@ export default {
          if (res.success) {
            this.$router.push({
              path: "/shoppingCart",
-              query: { detail: this.skuDetail, count: this.count },
+              query: {
+                skuId: this.skuDetail.id,
+                goodsId: this.skuDetail.goodsId,
+                thumbnail: this.skuDetail.thumbnail,
+                goodsName: this.skuDetail.goodsName,
+                count: this.count,
+              },
            });
          } else {
-            this.$Message.warning(res.message);
+            Message.warning(res.message);
          }
        })
        .catch(() => {
@@ -511,7 +520,7 @@ export default {
              query: { way: params.cartType },
            });
          } else {
-            this.$Message.warning(res.message);
+            Message.warning(res.message);
          }
        })
        .catch(() => {
@@ -523,14 +532,14 @@ export default {
      if (this.isCollected) {
        let cancel = await cancelCollect("GOODS", this.skuDetail.id);
        if (cancel.success) {
-          this.$Message.success("取消收藏成功");
+          Message.success("取消收藏成功");
          this.isCollected = false;
        }
      } else {
        let collect = await collectGoods("GOODS", this.skuDetail.id);
        if (collect.code === 200) {
          this.isCollected = true;
-          this.$Message.success("收藏商品成功,可以前往个人中心我的收藏查看");
+          Message.success("收藏商品成功,可以前往个人中心我的收藏查看");
        }
      }
    },
@@ -586,9 +595,9 @@ export default {
      // 领取优惠券
      receiveCoupon(id).then((res) => {
        if (res.success) {
-          this.$Message.success("优惠券领取成功");
+          Message.success("优惠券领取成功");
        } else {
-          this.$Message.warning(res.message);
+          Message.warning(res.message);
        }
      });
    },
--- a/buyer/src/components/goodsDetail/ShowGoodsDetail.vue
+++ b/buyer/src/components/goodsDetail/ShowGoodsDetail.vue
@@ -85,10 +85,10 @@
                  </div>
                </div>
                <div class="remarks-page">
-                  <el-pagination :total="commentTotal" small
+                  <el-pagination v-model:current-page="commentParams.pageNumber" v-model:page-size="commentParams.pageSize"
+                    :total="commentTotal" small
                    @current-change="changePageNum"
                    @size-change="changePageSize"
-                    :page-size="commentParams.pageSize"
                     layout="prev, pager, next"></el-pagination>
                </div>
              </div>
@@ -368,7 +368,7 @@ export default {
  box-sizing: border-box;
  padding: 0 30px;
  min-height: 300px;
-  :deep img{
+  :deep(img){
    margin:0 auto;
  }
 }
--- a/buyer/src/components/header/Header.vue
+++ b/buyer/src/components/header/Header.vue
@@ -91,11 +91,12 @@
 </template>

 <script>
+import { Modal } from "@/utils/message";
 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';
-
+import config from '@/config';

 export default {
  components: { ShoppingCart },
@@ -108,7 +109,7 @@ export default {

  data() {
    return {
-      config: require('@/config'),
+      config,
      userInfo: {}, // 用户信息
      shoppingCart: [], // 购物车
      cartLoading: false,
@@ -150,7 +151,7 @@ export default {
      if (this.userInfo.username) {
        this.$router.push({path: path});
      } else {
-        this.$Modal.confirm({
+        Modal.confirm({
          title: '请登录',
          content: '请登录后执行此操作',
          okText: '立即登录',
--- a/buyer/src/components/indexDecorate/ModelFormItem.vue
+++ b/buyer/src/components/indexDecorate/ModelFormItem.vue
@@ -49,8 +49,7 @@
        <div
          class="discountAdvert"
          :style="{
-            backgroundImage:
-              'url(' + require('@/assets/images/decorate.png') + ')',
+            backgroundImage: 'url(' + decorateImg + ')',
          }"
        >
          <div>
@@ -153,7 +152,7 @@ import goodsAndType from "./modelList/goodsAndType.vue";
 import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
 import mixModel from "./modelList/mixModel.vue";
 import forYour from "./modelList/forYour.vue";
-
+import decorateImg from "@/assets/images/decorate.png";

 export default {
  name: "modelFormItem",
@@ -175,6 +174,7 @@ export default {
  },
  data() {
    return {
+      decorateImg,
      showModal: false, // 控制模态框显隐
      selected: {}, // 已选数据
    };
--- a/buyer/src/components/indexDecorate/modelList/Carousel.vue
+++ b/buyer/src/components/indexDecorate/modelList/Carousel.vue
@@ -51,18 +51,14 @@
            </div> -->
          </div>
          <div v-else class="flex flex-a-c ">
-            <div class="btns" @click="$router.push('login')" shape="circle"
-            >登录</div
-            >
-            <div class="btns sign-up" @click="$router.push('signUp')" shape="circle"
-            >注册</div
-            >
+            <div class="btns" @click="$router.push('login')">登录</div>
+            <div class="btns sign-up" @click="$router.push('signUp')">注册</div>
          </div>

          <div class="gray-line"></div>
          <div class="icon-list flex flex-j-sb" >
            <div class="icon-item" @click="entryControl(item)" :key="index" v-for="(item, index) in entranceList">
-              <img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
+              <img class="icon" :src="getIconUrl(item.icon)">
              <div>
                {{ item.label }}
              </div>
@@ -70,7 +66,7 @@
          </div>
          <div class="icon-list flex flex-j-sb" >
            <div class="icon-item" :key="index"  @click="entryControl(item)" v-for="(item, index) in appendList">
-              <img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
+              <img class="icon" :src="getIconUrl(item.icon)">
              <div>
                {{ item.label }}
              </div>
@@ -89,6 +85,9 @@
 <script>

 import storage from "@/plugins/storage";
+import config from "@/config";
+import defaultAvatar from "@/assets/images/default.png";
+import { getIconUrl } from "@/assets/iconfont/iconMap";
 export default {
  name: "modelCarousel",
  props: ["data"],
@@ -102,8 +101,8 @@ export default {
  },
  data() {
    return {
-      config: require("@/config"),
-      defaultAvatar: require("@/assets/images/default.png"),
+      config,
+      defaultAvatar,
      userInfo: {}, // 用户信息
      entranceList: [
        {
@@ -170,6 +169,7 @@ export default {
    };
  },
  methods: {
+    getIconUrl,
    carouselItemKey(item, index) {
      return item?.img || item?.url || `slide-${index}`;
    },
--- a/buyer/src/components/indexDecorate/modelList/Carousel2.vue
+++ b/buyer/src/components/indexDecorate/modelList/Carousel2.vue
@@ -34,10 +34,10 @@
          <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">
-            <el-button type="danger" shape="circle">会员中心</el-button>
+            <el-button type="danger">会员中心</el-button>
          </div>
          <div v-else>
-            <el-button type="danger" shape="circle">请登录</el-button>
+            <el-button type="danger">请登录</el-button>
          </div>
        </div>
        <div class="shop-msg">
@@ -60,13 +60,14 @@
 import {articleList} from '@/api/common.js'
 import storage from '@/plugins/storage';
 import { User } from '@element-plus/icons-vue';
+import config from '@/config';
 export default {
  components: { User },
  name: 'modelCarousel2',
  props: ['data'],
  data () {
    return {
-      config:require('@/config'),
+      config,
      userInfo: {}, // 用户信息
      articleList: [], // 常见问题
      params: { // 请求常见问题参数
--- a/buyer/src/components/invoiceModal/index.vue
+++ b/buyer/src/components/invoiceModal/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="invoice-modal">
-    <el-dialog v-model="invoiceAvailable" width="640" footer-hide>
+    <el-dialog v-model="invoiceAvailable" width="640">
      <template #header><p>
        <span>发票信息</span>
      </p></template>
--- a/buyer/src/components/map/index.vue
+++ b/buyer/src/components/map/index.vue
@@ -19,10 +19,11 @@
  </div>
 </template>
 <script>
+import { Message } from "@/utils/message";
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { handleRegion } from "@/api/address.js";
+import config from "@/config/index";

-const config = require('@/config/index')
 export default {
  name: "map",
  data() {
@@ -62,7 +63,7 @@ export default {
          }
        });
      } else {
-        this.$Message.error('未获取到坐标信息！请查看高德API配置是否正确')
+        Message.error('未获取到坐标信息！请查看高德API配置是否正确')
      }

    },
@@ -133,7 +134,7 @@ export default {
    selectAddr(location) {
      // 选择坐标
      if (!location) {
-        this.$Message.warning("请选择正确点位");
+        Message.warning("请选择正确点位");
        return false;
      }
      const lnglat = [location.lng, location.lat];
--- a/buyer/src/components/map/multiple-map.vue
+++ b/buyer/src/components/map/multiple-map.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog width="800" footer-hide v-model="enableMap">
+  <el-dialog width="800" 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>
@@ -27,6 +27,7 @@
 </template>

 <script>
+import { Message } from "@/utils/message";
 import { aMapSwitch } from '@/config/index'
 import mapping from "@/components/map/index.vue";
 import * as API_Setup from "@/api/common.js";
@@ -101,7 +102,7 @@ export default {
    // 选择完成
    finished() {
      if(!this.chiosend[0]){
-        this.$Message.error("请选择地址")
+        Message.error("请选择地址")
        return
      }
      const params = this.chiosend.filter((item) => item!=="" && item.value !== "");
--- a/buyer/src/components/mixes/talkIm.vue
+++ b/buyer/src/components/mixes/talkIm.vue
@@ -3,6 +3,7 @@
 </template>

 <script>
+import { Message } from "@/utils/message";
 import { getIMDetail } from "@/api/common";
 import Storage from "@/plugins/storage";
 import { getMemberMsg } from "@/api/login";
@@ -34,7 +35,7 @@ export default {
        }

      } else {
-        this.$Message.error("请登录后再联系客服");
+        Message.error("请登录后再联系客服");
        return;
      }
    },
--- a/buyer/src/components/nav/CateNav.vue
+++ b/buyer/src/components/nav/CateNav.vue
@@ -167,7 +167,7 @@ export default {
        return;
      }
      this.cateList = JSON.parse(localStorage.getItem("category"));
-      // this.$Message.info(cateList)
+      // Message.info(cateList)
      }
    },
    getCate() {
--- a/buyer/src/components/verify/index.vue
+++ b/buyer/src/components/verify/index.vue
@@ -15,6 +15,7 @@
  </div>
 </template>
 <script>
+import { Message } from "@/utils/message";
 import { Refresh, ArrowRight } from '@element-plus/icons-vue';
 import { getVerifyImg, postVerifyImg } from './verify.js';
 export default {
@@ -110,7 +111,7 @@ export default {
          this.data = res.result;
          this.show = true;
        } else {
-          this.$Message.warning('请求失败请重试！')
+          Message.warning('请求失败请重试！')
        }
      });
    }