mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 19:07:25 +08:00
feat: 更新 API 请求参数与组件样式优化
- 在 account.js 和 member.js 中添加 loading 和 skipMessage 参数,提升 API 调用的用户体验。 - 在 ShowGoods.vue 中优化商品详情展示样式,增强可读性和交互性。 - 在 Cart.vue 中重构购物车商品列表结构,提升布局一致性。 - 在多个页面中修复了提示信息的内容,确保用户操作的清晰反馈。
This commit is contained in:
@@ -28,28 +28,36 @@
|
||||
</div>
|
||||
|
||||
<div class="goodsConfig mt_10">
|
||||
<span @click="collect"
|
||||
><el-icon :color="isCollected ? '#ed3f14' : '#666'"><StarFilled /></el-icon>{{ isCollected ? "已收藏" : "收藏" }}</span>
|
||||
<span
|
||||
class="collect-btn"
|
||||
:class="{ 'is-collected': isCollected }"
|
||||
@click="collect"
|
||||
>
|
||||
<el-icon class="collect-icon"><StarFilled /></el-icon>
|
||||
<span class="collect-text">{{ isCollected ? '已收藏' : '收藏' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧商品信息、活动信息、操作展示 -->
|
||||
<div class="item-detail-right">
|
||||
<div class="item-detail-title">
|
||||
<p>
|
||||
{{ skuDetail.goodsName }}
|
||||
<div class="item-detail-title-row">
|
||||
<span class="item-detail-name">{{ skuDetail.goodsName }}</span>
|
||||
<el-tag
|
||||
v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'"
|
||||
style="margin-top:10px;rgb(153, 149, 149);"
|
||||
class="goods-type-tag"
|
||||
size="small"
|
||||
>
|
||||
实物商品
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-else-if="skuDetail.goodsType == 'VIRTUAL_GOODS'"
|
||||
style="margin-top:10px;rgb(153, 149, 149);"
|
||||
class="goods-type-tag"
|
||||
size="small"
|
||||
>
|
||||
虚拟商品
|
||||
</el-tag>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sell-point">
|
||||
{{ skuDetail.sellingPoint }}
|
||||
@@ -224,13 +232,13 @@
|
||||
<div class="item-select-row">
|
||||
<el-input-number
|
||||
:min="1"
|
||||
:max="skuDetail.quantity"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
:max="quantityMax"
|
||||
:disabled="isOutOfStock"
|
||||
v-model="count"
|
||||
:precision="0.1"
|
||||
:precision="0"
|
||||
@blur="changeCount"
|
||||
></el-input-number>
|
||||
<span class="inventory"> 库存{{ skuDetail.quantity }}</span>
|
||||
<span class="inventory">  库存{{ skuDetail.quantity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -325,9 +333,7 @@ export default {
|
||||
handler(val) {
|
||||
this.skuDetail = val.data;
|
||||
this.wholesaleList = val.wholesaleList;
|
||||
if (this.wholesaleList && this.wholesaleList.length > 0) {
|
||||
this.count = this.wholesaleList[0].num;
|
||||
}
|
||||
this.syncCountWithQuantity();
|
||||
this.promotion();
|
||||
this.swiperGoodsImg();
|
||||
},
|
||||
@@ -388,6 +394,13 @@ export default {
|
||||
})
|
||||
: [];
|
||||
},
|
||||
quantityMax() {
|
||||
const qty = Number(this.skuDetail.quantity) || 0;
|
||||
return qty > 0 ? qty : 1;
|
||||
},
|
||||
isOutOfStock() {
|
||||
return (Number(this.skuDetail.quantity) || 0) <= 0;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 初始化video
|
||||
@@ -408,6 +421,22 @@ export default {
|
||||
},
|
||||
|
||||
|
||||
syncCountWithQuantity() {
|
||||
const qty = Number(this.skuDetail.quantity) || 0;
|
||||
if (qty <= 0) {
|
||||
this.count = 1;
|
||||
return;
|
||||
}
|
||||
if (this.wholesaleList && this.wholesaleList.length > 0) {
|
||||
this.count = Math.min(Math.max(this.wholesaleList[0].num, 1), qty);
|
||||
return;
|
||||
}
|
||||
if (this.count > qty) {
|
||||
this.count = qty;
|
||||
} else if (this.count < 1) {
|
||||
this.count = 1;
|
||||
}
|
||||
},
|
||||
changeCount(val) {
|
||||
if (this.wholesaleList && this.wholesaleList.length > 0) {
|
||||
if (this.count <= this.wholesaleList[0].num) {
|
||||
@@ -688,11 +717,23 @@ export default {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.item-detail-title p {
|
||||
.item-detail-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.item-detail-name {
|
||||
@include content_color($light_content_color);
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
padding: 8px 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.goods-type-tag {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-detail-express {
|
||||
@@ -941,13 +982,32 @@ export default {
|
||||
.goodsConfig {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> span {
|
||||
|
||||
.collect-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding-right: 10px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $theme_color;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
|
||||
&.is-collected {
|
||||
.collect-icon {
|
||||
color: #ffc107;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collect-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.collect-text {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
.sell-point {
|
||||
font-size: 12px;
|
||||
|
||||
@@ -338,7 +338,7 @@ export default {
|
||||
font-weight: bolder;
|
||||
}
|
||||
.item-intro-detail{
|
||||
margin: 0 30px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.item-intro-nav{
|
||||
@@ -365,6 +365,8 @@ export default {
|
||||
}
|
||||
.item-intro-img {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30px;
|
||||
min-height: 300px;
|
||||
:deep img{
|
||||
margin:0 auto;
|
||||
@@ -377,6 +379,8 @@ export default {
|
||||
.item-param-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30px;
|
||||
}
|
||||
.item-param-box {
|
||||
padding: 5px;
|
||||
@@ -400,6 +404,10 @@ export default {
|
||||
color: #666666;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
.remarks-container {
|
||||
box-sizing: border-box;
|
||||
padding: 0 30px;
|
||||
}
|
||||
.remarks-analyse-box {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
@@ -507,31 +515,36 @@ export default {
|
||||
}
|
||||
/***************商品详情介绍和推荐侧边栏结束***************/
|
||||
/* 改变标签页样式 */
|
||||
:deep(.el-tabs__active-bar) {
|
||||
background-color: $theme_color !important;
|
||||
}
|
||||
:deep(.el-tabs__header) {
|
||||
border: none;
|
||||
}
|
||||
.item-tabs > .el-tabs > .el-tabs__header .el-tabs__item {
|
||||
border-radius: 0px;
|
||||
color: #999;
|
||||
height: 38px;
|
||||
}
|
||||
.item-tabs > .el-tabs > .el-tabs__header .el-tabs__item.is-active {
|
||||
color: #fff;
|
||||
background-color: $theme_color;
|
||||
}
|
||||
.item-tabs > .el-tabs > .el-tabs__header .el-tabs__item.is-active:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
color: #fff;
|
||||
background: #F7F7F7;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.item-tabs {
|
||||
:deep(.el-tabs__header) {
|
||||
border: none;
|
||||
margin: 0;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__active-bar) {
|
||||
background-color: $theme_color !important;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
border-radius: 0;
|
||||
color: #999;
|
||||
height: 38px;
|
||||
padding: 0 20px;
|
||||
|
||||
&:hover {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav) {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item.is-active) {
|
||||
color: $theme_color !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
:deep(.el-rate__icon) {
|
||||
color: $theme_color;
|
||||
|
||||
Reference in New Issue
Block a user