feat: 增强组件功能与样式优化

- 在多个组件中添加了新的属性和方法以提升功能性，如在卡片组件中引入 _ActiveTab 属性以管理活动标签。 - 优化了商品详情和商户页面的收藏逻辑，确保在未登录状态下引导用户登录。 - 更新了轮播组件的路由解析逻辑，增强了用户体验。 - 改进了投诉列表和收藏列表的样式，提升了响应式布局和可读性。 - 在全局配置中添加了对开发环境的错误处理，提升了调试体验。
2026-08-06 10:57:26 +08:00 · 2026-06-25 16:52:46 +08:00
parent 1b2e980fb6
commit ec948b5496
86 changed files with 1741 additions and 1050 deletions
--- a/buyer/src/components/card/index.vue
+++ b/buyer/src/components/card/index.vue
@@ -50,12 +50,21 @@ export default {
      type: null,
      default: null,
    },
+    _ActiveTab: {
+      type: Number,
+      default: 0,
+    },
  },
  data() {
    return {
-      isActive: 0,
+      isActive: this._ActiveTab,
    };
  },
+  watch: {
+    _ActiveTab(val) {
+      this.isActive = val;
+    },
+  },
  methods: {
    callBack() {
      if (this._Src) {
--- a/buyer/src/components/indexDecorate/modelList/Carousel.vue
+++ b/buyer/src/components/indexDecorate/modelList/Carousel.vue
@@ -173,11 +173,30 @@ export default {
    carouselItemKey(item, index) {
      return item?.img || item?.url || `slide-${index}`;
    },
+    resolveRoute(pathStr) {
+      if (!pathStr) return { path: "/" };
+      const [path, search] = pathStr.split("?");
+      if (!search) return { path };
+      return {
+        path,
+        query: Object.fromEntries(new URLSearchParams(search)),
+      };
+    },
    // 快捷跳转中心
    entryControl(val) {
-      console.log("val",val)
-      let url = this.$router.resolve(val.path);
-      window.open(url.href, '_blank');
+      const location = this.resolveRoute(val.path);
+      if (location.path.startsWith("/home/") && !storage.getItem("userInfo")) {
+        this.$router.push({
+          path: "/login",
+          query: {
+            rePath: location.path,
+            query: JSON.stringify(location.query || {}),
+          },
+        });
+        return;
+      }
+      const url = this.$router.resolve(location);
+      window.open(url.href, "_blank");
    },
  },
  mounted() {
--- a/buyer/src/pages/GoodsDetail.vue
+++ b/buyer/src/pages/GoodsDetail.vue
@@ -10,7 +10,7 @@
            {{ item.name }}
          </el-breadcrumb-item>
        </el-breadcrumb>
-        <div class="store-collect" v-if="!takeDownSale">
+        <div class="store-collect" v-if="!takeDownSale && goodsMsg.data">
          <span class="mr_10" v-if="goodsMsg.data">
            <router-link :to="'Merchant?id=' + goodsMsg.data.storeId">{{
              goodsMsg.data.storeName
@@ -176,14 +176,23 @@ export default {
    },
    async collect () {
      // 收藏店铺
+      const storeId = this.goodsMsg.data && this.goodsMsg.data.storeId;
+      if (!storeId) {
+        return;
+      }
+      if (!this.Cookies.getItem("userInfo")) {
+        this.$Message.warning("请先登录");
+        this.$router.push("/login");
+        return;
+      }
      if (this.storeCollected) {
-        let cancel = await cancelStoreCollect("STORE", this.goodsMsg.data.storeId);
+        let cancel = await cancelStoreCollect("STORE", storeId);
        if (cancel.success) {
          this.$Message.success("已取消收藏");
          this.storeCollected = false;
        }
      } else {
-        let collect = await collectStore("STORE", this.goodsMsg.data.storeId);
+        let collect = await collectStore("STORE", storeId);
        if (collect.code === 200) {
          this.storeCollected = true;
          this.$Message.success("收藏店铺成功,可以前往个人中心我的收藏查看");
--- a/buyer/src/pages/Merchant.vue
+++ b/buyer/src/pages/Merchant.vue
@@ -285,14 +285,23 @@ export default {
    },
    async collect() {
      // 收藏店铺
+      const storeId = this.storeMsg && this.storeMsg.storeId;
+      if (!storeId) {
+        return;
+      }
+      if (!this.Cookies.getItem("userInfo")) {
+        this.$Message.warning("请先登录");
+        this.$router.push("/login");
+        return;
+      }
      if (this.storeCollected) {
-        let cancel = await cancelStoreCollect("STORE", this.storeMsg.storeId);
+        let cancel = await cancelStoreCollect("STORE", storeId);
        if (cancel.success) {
          this.$Message.success("已取消收藏");
          this.storeCollected = false;
        }
      } else {
-        let collect = await collectStore("STORE", this.storeMsg.storeId);
+        let collect = await collectStore("STORE", storeId);
        if (collect.code === 200) {
          this.storeCollected = true;
          this.$Message.success("收藏店铺成功,可以前往个人中心我的收藏查看");
--- a/buyer/src/pages/home/memberCenter/ComplainList.vue
+++ b/buyer/src/pages/home/memberCenter/ComplainList.vue
@@ -5,10 +5,10 @@
    <div class="order">
      <div class="order-title">
        <div class="order-row title">
-          <div span="12">商品信息</div>
-          <div span="4">投诉状态</div>
-          <div span="4">投诉主题</div>
-          <div span="6"></div>
+          <div class="col-12">商品信息</div>
+          <div class="col-4">投诉状态</div>
+          <div class="col-4">投诉主题</div>
+          <div class="col-4">投诉内容</div>
        </div>
      </div>
      <empty v-if="list.length === 0" />
@@ -22,7 +22,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="12" class="item-view-name">
+            <div class="col-12 item-view-name">
              <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">{{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>
@@ -111,7 +111,7 @@ export default {
          clearComplain(id).then((res) => {
            if (res.success) {
              this.$Message.success('取消投诉成功');
-              this.getCartList();
+              this.getList();
            }
          });
        },
@@ -159,8 +159,34 @@ export default {
  font-size: 13px;
  position: relative;
 }
+.order-row,
 .order-item-view {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  width: 100%;
+  box-sizing: border-box;
  padding: 10px 20px;
+
+  .col-12,
+  .col-4 {
+    box-sizing: border-box;
+    padding: 0 8px;
+  }
+
+  .col-12 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+
+  .col-4 {
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+  }
+}
+
+.order-item-view {
+  align-items: flex-start;
 }
 .order-item {
  text-align: center;
@@ -168,14 +194,16 @@ export default {
  margin: 10px 0;
 }
 .order-row {
-  padding: 10px 0;
  text-align: center;
 }
 .content {
  color: #999;
  max-height: 60px;
  overflow: hidden;
-  word-wrap: break-word;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
 }

 .eval-detail {
--- a/buyer/src/pages/home/memberCenter/Favorites.vue
+++ b/buyer/src/pages/home/memberCenter/Favorites.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="wrapper">
-    <card _Title="近期收藏" :_Tabs="favoriteWay" @_Change="change" :_Size="16" v-if="!homePage" />
-    <card _Title="近期收藏" :_Size="16" :_Tabs="favoriteWay" @_Change="change" _More="全部收藏" _Src="/home/Favorites" v-else>
+    <card _Title="近期收藏" :_Tabs="favoriteWay" :_ActiveTab="activeTabIndex" @_Change="change" :_Size="16" v-if="!homePage" />
+    <card _Title="近期收藏" :_Size="16" :_Tabs="favoriteWay" :_ActiveTab="activeTabIndex" @_Change="change" _More="全部收藏" _Src="/home/Favorites" v-else>
    </card>
    <div v-if="list.length">
      <div v-for="(item, index) in list" :key="index">
@@ -61,20 +61,42 @@ export default {
      spinShow: false // 加载状态
    };
  },
+  computed: {
+    activeTabIndex() {
+      return this.params.type === 'STORE' ? 1 : 0;
+    },
+  },

  methods: {
-    getList() { // 获取收藏列表
+    loadFavorites() {
+      if (this.params.type === 'STORE') {
+        this.getStoreList();
+      } else {
+        this.getList();
+      }
+    },
+    getList() { // 获取商品收藏列表
      this.spinShow = true
      collectList(this.params).then(res => {
+        if (res.success && res.result) {
+          this.list = res.result.records || [];
+        }
+      }).catch(() => {
+        this.list = [];
+      }).finally(() => {
        this.spinShow = false
-        if (res.success) this.list = res.result.records;
      })
    },
-    getStoreList() { // 获取收藏列表
+    getStoreList() { // 获取店铺收藏列表
      this.spinShow = true
      storeCollectList(this.params).then(res => {
+        if (res.success && res.result) {
+          this.list = res.result.records || [];
+        }
+      }).catch(() => {
+        this.list = [];
+      }).finally(() => {
        this.spinShow = false
-        if (res.success) this.list = res.result.records;
      })
    },
    change(index) { // tab栏切换
@@ -137,8 +159,7 @@ export default {
  },
  mounted() {
    if (this.homePage) this.params.pageSize = 5;
-    this.getList()
-
+    this.loadFavorites();
  }
 };
 </script>