code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-09-22 04:42:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 更新 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
Download Patch File Download Diff File Expand all files Collapse all files

17
buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
View File

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

18
buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
View File

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

4
buyer/src/pages/home/orderCenter/Complain.vue
View File

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