feat: 优化商品详情与购物车功能

- 更新 ShowGoods.vue 和 ShowGoodsDetail.vue 中的按钮样式，统一使用 goods-action-btn 类。 - 在 Cart.vue 中实现商品收藏状态的同步与处理，优化收藏功能的用户体验。 - 调整 GoodsDetail.vue 中的店铺收藏按钮样式，提升视觉一致性。 - 在多个评价组件中引入主题色，增强评分组件的视觉效果。
2026-08-07 03:15:01 +08:00 · 2026-07-09 17:58:01 +08:00
parent ecf11ae2d2
commit c355194aba
15 changed files with 222 additions and 52 deletions
--- a/buyer/src/pages/Cart.vue
+++ b/buyer/src/pages/Cart.vue
@@ -186,8 +186,9 @@
                  <el-button
                    size="small"
                    class="cart-collect-btn"
-                    @click="collectGoods(goods.goodsSku.id)"
-                    >收藏</el-button
+                    :class="{ 'is-collected': goods.isCollected }"
+                    @click="handleCollect(goods)"
+                    >{{ goods.isCollected ? "已收藏" : "收藏" }}</el-button
                  >
                </div>
              </div>
@@ -288,16 +289,69 @@ export default {
      });
      window.open(routeUrl.href, "_blank");
    },
-    // 收藏商品
-    collectGoods(id) {
+    // 同步购物车商品收藏状态
+    async syncCartCollectionStatus() {
+      if (!this.Cookies.getItem("userInfo") || !this.cartList.length) return;
+      const skuIds = [];
+      this.cartList.forEach((shop) => {
+        (shop.skuList || []).forEach((goods) => {
+          goods.isCollected = false;
+          if (goods.goodsSku && goods.goodsSku.id) {
+            skuIds.push(goods.goodsSku.id);
+          }
+        });
+      });
+      const uniqueSkuIds = [...new Set(skuIds)];
+      await Promise.all(
+        uniqueSkuIds.map(async (skuId) => {
+          try {
+            const res = await APIMember.isCollection("GOODS", skuId);
+            if (res.success && res.result) {
+              this.cartList.forEach((shop) => {
+                (shop.skuList || []).forEach((goods) => {
+                  if (goods.goodsSku && goods.goodsSku.id === skuId) {
+                    goods.isCollected = true;
+                  }
+                });
+              });
+            }
+          } catch (e) {
+            // 单个查询失败不影响其他商品
+          }
+        })
+      );
+      this.$forceUpdate();
+    },
+    // 收藏 / 取消收藏商品
+    handleCollect(goods) {
+      const skuId = goods.goodsSku && goods.goodsSku.id;
+      if (!skuId) return;
+      if (goods.isCollected) {
+        Modal.confirm({
+          title: "取消收藏",
+          content: "确定取消收藏该商品吗？",
+          onOk: () => {
+            return APIMember.cancelCollect("GOODS", skuId).then((res) => {
+              if (res.success) {
+                goods.isCollected = false;
+                Message.success("取消收藏成功");
+                this.$forceUpdate();
+              }
+            });
+          },
+          onCancel: () => {},
+        });
+        return;
+      }
      Modal.confirm({
        title: "收藏",
        content: "商品收藏后可在个人中心我的收藏查看",
        onOk: () => {
-          APIMember.collectGoods("GOODS", id).then((res) => {
+          return APIMember.collectGoods("GOODS", skuId).then((res) => {
            if (res.success) {
+              goods.isCollected = true;
              Message.success("收藏商品成功");
-              this.getCartList();
+              this.$forceUpdate();
            }
          });
        },
@@ -425,6 +479,7 @@ export default {
          }
          this.$forceUpdate();
          this.allChecked = allChecked;
+          this.syncCartCollectionStatus();
        }
      } catch (error) {
        this.loading = false;
@@ -878,6 +933,18 @@ export default {
    border-color: #e55a15 !important;
    color: #fff !important;
  }
+
+  &.is-collected {
+    background-color: $theme_color !important;
+    border-color: $theme_color !important;
+
+    &:hover,
+    &:focus {
+      background-color: $theme_color !important;
+      border-color: $theme_color !important;
+      opacity: 0.9;
+    }
+  }
 }
 </style>
 <style>
--- a/buyer/src/pages/GoodsDetail.vue
+++ b/buyer/src/pages/GoodsDetail.vue
@@ -17,8 +17,12 @@
              :to="{ path: '/merchant', query: { id: goodsMsg.data.storeId } }"
            >{{ goodsMsg.data.storeName }}</router-link>
          </span>
-          <span class="store-collect-btn" @click="collect">
-            <el-icon :color="storeCollected ? '#ffc107' : '#666'"><StarFilled /></el-icon>
+          <span
+            class="store-collect-btn"
+            :class="{ 'is-collected': storeCollected }"
+            @click="collect"
+          >
+            <el-icon class="store-collect-icon"><StarFilled /></el-icon>
            {{ storeCollected? "已收藏店铺": "收藏店铺" }}
          </span>
          <span class="ml_10 contact-service-btn" @click="IMService(goodsMsg.data.storeId,goodsMsg.data.goodsId,goodsMsg.data.id)">联系客服</span>
@@ -247,6 +251,17 @@ export default {
      cursor: pointer;
    }

+    .store-collect-btn {
+      .store-collect-icon {
+        color: #666;
+        vertical-align: middle;
+      }
+
+      &.is-collected .store-collect-icon {
+        color: $theme_color;
+      }
+    }
+
    .store-name-link {
      color: $theme_color;
      text-decoration: none;
--- a/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
+++ b/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
@@ -11,9 +11,9 @@
    <div class="delivery-rate">
      <div class="fontsize_16">物流服务评价：</div>
      <div class="color999 rate-list">
-        <span class="rate-item">物流评价：<el-rate v-model="form.deliveryScore" /></span>
-        <span class="rate-item">服务评价：<el-rate v-model="form.serviceScore" /></span>
-        <span class="rate-item">描述评价：<el-rate v-model="form.descriptionScore" /></span>
+        <span class="rate-item">物流评价：<el-rate v-model="form.deliveryScore" :colors="rateThemeColors" class="theme-rate" /></span>
+        <span class="rate-item">服务评价：<el-rate v-model="form.serviceScore" :colors="rateThemeColors" class="theme-rate" /></span>
+        <span class="rate-item">描述评价：<el-rate v-model="form.descriptionScore" :colors="rateThemeColors" class="theme-rate" /></span>
      </div>
    </div>
    <!-- 添加订单评价  左侧商品详情  右侧评价框 -->
@@ -96,7 +96,9 @@ export default {
      action: commonUrl + '/common/common/upload/file', // 上传地址
      accessToken: {}, // 验证token
      previewImage: '', // 预览图片地址
-      loading: false // 提交加载状态
+      loading: false, // 提交加载状态
+      // el-rate SVG 通过 colors 写入 fill-color，跟随平台主题色
+      rateThemeColors: ['var(--theme-color)', 'var(--theme-color)', 'var(--theme-color)']
    }
  },
  methods: {
@@ -208,6 +210,13 @@ export default {
  display: inline-flex;
  align-items: center;
 }
+.rate-list :deep(.theme-rate.el-rate) {
+  --el-rate-fill-color: #{$theme_color};
+  --el-rate-disabled-fill-color: #{$theme_color};
+}
+:deep(.theme-rate .el-rate__icon.is-active) {
+  color: $theme_color !important;
+}
 .goods-eval li{
  display: flex;
  border-bottom: 1px solid #eee;
--- a/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
+++ b/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
@@ -11,9 +11,9 @@
    <div class="delivery-rate">
      <div class="fontsize_16">物流服务评价：</div>
      <div class="color999 delivery-rate-items">
-        <span>物流评价：<el-rate disabled :model-value="Number(orderGoods.deliveryScore) || 0" /></span>
-        <span>服务评价：<el-rate disabled :model-value="Number(orderGoods.serviceScore) || 0" /></span>
-        <span>描述评价：<el-rate disabled :model-value="Number(orderGoods.descriptionScore) || 0" /></span>
+        <span>物流评价：<el-rate disabled :model-value="Number(orderGoods.deliveryScore) || 0" :colors="rateThemeColors" class="theme-rate" /></span>
+        <span>服务评价：<el-rate disabled :model-value="Number(orderGoods.serviceScore) || 0" :colors="rateThemeColors" class="theme-rate" /></span>
+        <span>描述评价：<el-rate disabled :model-value="Number(orderGoods.descriptionScore) || 0" :colors="rateThemeColors" class="theme-rate" /></span>
      </div>
    </div>
    <!-- 添加订单评价  左侧商品详情  右侧评价框 -->
@@ -99,6 +99,8 @@ export default {
      visible: false, // 图片预览
      previewImage: "", // 预览图片链接
      loading: false, // 加载状态
+      // el-rate SVG 通过 colors 写入 fill-color，跟随平台主题色
+      rateThemeColors: ["var(--theme-color)", "var(--theme-color)", "var(--theme-color)"],
    };
  },
  methods: {
@@ -147,13 +149,13 @@ export default {
  gap: 16px;
 }

-.delivery-rate-items :deep(.el-rate) {
-  --el-rate-fill-color: #ffb400;
-  --el-rate-disabled-fill-color: #ffb400;
+.delivery-rate-items :deep(.theme-rate.el-rate) {
+  --el-rate-fill-color: #{$theme_color};
+  --el-rate-disabled-fill-color: #{$theme_color};
 }

-:deep(.el-rate__icon.is-active) {
-  color: #ffb400;
+:deep(.theme-rate .el-rate__icon.is-active) {
+  color: $theme_color !important;
 }
 .goods-eval li {
  display: flex;
--- a/buyer/src/pages/home/orderCenter/Complain.vue
+++ b/buyer/src/pages/home/orderCenter/Complain.vue
@@ -102,6 +102,10 @@ export default {
      })
    },
    save () { // 提交投诉信息
+      if (!this.form.content || !String(this.form.content).trim()) {
+        Message.warning('投诉内容不能为空')
+        return
+      }
      let params = {
        goodsId: this.orderGoods.goodsId,
        complainTopic: this.form.complainTopic,