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

- 更新 ShowGoods.vue 和 ShowGoodsDetail.vue 中的按钮样式,统一使用 goods-action-btn 类。
- 在 Cart.vue 中实现商品收藏状态的同步与处理,优化收藏功能的用户体验。
- 调整 GoodsDetail.vue 中的店铺收藏按钮样式,提升视觉一致性。
- 在多个评价组件中引入主题色,增强评分组件的视觉效果。
This commit is contained in:
田香琪
2026-07-09 17:58:01 +08:00
parent ecf11ae2d2
commit c355194aba
15 changed files with 222 additions and 52 deletions

View File

@@ -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;