fix: 更新 API 请求参数格式及优化组件样式

- 将 addEvaluation API 的参数从 params 修改为 data,以符合标准请求格式
- 在多个组件中调整样式,提升响应式布局和用户体验
- 优化商品详情页的倒计时显示,增强视觉效果
- 更新购物车操作按钮样式,提升一致性和可用性
This commit is contained in:
田香琪
2026-06-23 14:13:25 +08:00
parent 8a60e23214
commit 1b2e980fb6
26 changed files with 481 additions and 401 deletions

View File

@@ -37,7 +37,7 @@
<div class="width_150">单价</div>
<div class="width_100">数量</div>
<div class="width_150">小计</div>
<div class="width_100">操作</div>
<div class="cart-ops-col">操作</div>
</div>
<div v-if="cartList.length === 0" class="cart-empty">
<p>购物车空空如也</p>
@@ -172,22 +172,21 @@
<div class="width_150">
{{ $filters.unitPrice(goods.subTotal, "¥") }}
</div>
<div class="width_100">
<el-button
v-if="!goods.errorMessage"
size="small"
type="primary"
@click="delGoods(goods.goodsSku.id)"
>删除</el-button
>
<el-button
v-if="!goods.errorMessage"
size="small"
type="info"
@click="collectGoods(goods.goodsSku.id)"
style="margin-left: 10px"
>收藏</el-button
>
<div class="cart-ops-col">
<div v-if="!goods.errorMessage" class="cart-ops">
<el-button
size="small"
class="cart-del-btn"
@click="delGoods(goods.goodsSku.id)"
>删除</el-button
>
<el-button
size="small"
class="cart-collect-btn"
@click="collectGoods(goods.goodsSku.id)"
>收藏</el-button
>
</div>
</div>
<div class="error-goods" v-if="goods.errorMessage">
<div style="margin-top: 20px">{{ goods.errorMessage }}</div>
@@ -767,6 +766,48 @@ export default {
display: flex;
align-items: center;
}
.cart-ops-col {
width: 130px;
min-width: 130px;
flex-shrink: 0;
}
.cart-ops {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: nowrap;
}
.cart-del-btn {
background-color: #ff7d79 !important;
border-color: #ff7d79 !important;
color: #fff !important;
margin: 0 !important;
&:hover,
&:focus {
background-color: #ff6b66 !important;
border-color: #ff6b66 !important;
color: #fff !important;
}
}
.cart-collect-btn {
background-color: #fa6419 !important;
border-color: #fa6419 !important;
color: #fff !important;
margin: 0 !important;
&:hover,
&:focus {
background-color: #e55a15 !important;
border-color: #e55a15 !important;
color: #fff !important;
}
}
</style>
<style>
.el-input-number .el-input__inner {

View File

@@ -28,10 +28,10 @@
<div class="eval-con">
<div>
<span class="color999">商品评价</span>
<el-radio-group style="margin-bottom:5px;color:#999" v-model="orderGoods.grade" type="button" button-style="solid">
<el-radio label="GOOD">好评</el-radio>
<el-radio label="MODERATE">中评</el-radio>
<el-radio label="WORSE">差评</el-radio>
<el-radio-group v-model="orderGoods.grade">
<el-radio-button value="GOOD">好评</el-radio-button>
<el-radio-button value="MODERATE">中评</el-radio-button>
<el-radio-button value="WORSE">差评</el-radio-button>
</el-radio-group>
<el-input type="textarea" maxlength="500" show-word-limit :rows="4" v-model="orderGoods.content" />
</div>
@@ -106,6 +106,12 @@ export default {
if (!this.form.descriptionScore) {
this.$Message.warning('描述评价不能为空')
return false;
}
if (!this.orderGoods.content || !String(this.orderGoods.content).trim()) {
this.$Message.warning('评论内容不能为空')
return false;
}
this.loading = true;
@@ -118,17 +124,20 @@ export default {
serviceScore: this.form.serviceScore,
deliveryScore: this.form.deliveryScore,
grade: goods.grade,
content: goods.content || '',
images: goods.uploadList.toString()
content: goods.content.trim(),
images: goods.uploadList.length ? goods.uploadList.join(',') : ''
}
addEvaluation(params).then(res => {
this.loading = false
if (res.success) {
this.$Message.success('评价成功')
this.$router.push('/home/CommentList')
} else {
this.$Message.error(res.message || '评价失败,请稍后重试')
}
}).catch(() => {
}).catch((err) => {
this.loading = false;
this.$Message.error(err?.message || '评价失败,请稍后重试')
})
},
goGoodsDetail (skuId, goodsId) { // 跳转商品详情

View File

@@ -29,8 +29,13 @@
<el-input type="number" v-model="form.num" style="width:260px" />
</el-form-item>
<el-form-item label="提交原因" prop="reason">
<el-select v-model="form.reason" style="width:260px">
<el-option v-for="item in reasonList" :value="item.id" :key="item.id">{{ item.reason }}</el-option>
<el-select v-model="form.reason" style="width:260px" placeholder="请选择提交原因">
<el-option
v-for="item in reasonList"
:key="item.id"
:label="item.reason"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="问题描述" prop="problemDesc">

View File

@@ -5,7 +5,7 @@
<div class="address-header">
<span>
{{ item.name }}
<el-tag class="ml_10" v-if="item.isDefault" color="red">默认地址</el-tag>
<el-tag class="ml_10 default-address-tag" v-if="item.isDefault">默认地址</el-tag>
<el-tag class="ml_10" v-if="item.alias" color="warning">{{item.alias}}</el-tag>
</span>
<div class="address-action">
@@ -121,6 +121,12 @@ export default {
cursor: pointer;
}
.default-address-tag {
background-color: #fff3f2 !important;
border: 1px solid $theme_color !important;
color: $theme_color !important;
}
#map-container {
width: 500px;
height: 300px;

View File

@@ -11,7 +11,7 @@
:key="index"
@click="goodsDetail(item.id, item.goodsId)"
>
<img :src="item.thumbnail" :alt="item.thumbnail" width="200" height="200" />
<img :src="item.thumbnail" :alt="item.goodsName" />
<p class="ellipsis">{{ item.goodsName }}</p>
<p>{{ $filters.unitPrice(item.price, "¥") }}</p>
<span class="del-icon" @click.stop="clearById(item.goodsId)">
@@ -132,15 +132,27 @@ export default {
}
.track-list {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 0 15px;
box-sizing: border-box;
li {
width: 200px;
width: 100%;
min-width: 0;
overflow: hidden;
margin-left: 15px;
margin-bottom: 10px;
border: 1px solid #eee;
position: relative;
box-sizing: border-box;
img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
display: block;
}
&:hover {
cursor: pointer;
box-shadow: 1px 1px 3px #999;

View File

@@ -23,7 +23,8 @@
</template>
</ul>
<!-- 秒杀商品列表 -->
<div class="goods-list">
<div class="seckill-goods-wrap">
<div class="goods-list">
<empty v-if="goodsList.length === 0" />
<div v-else class="goods-show-info1" v-for="(item, index) in goodsList" :key="index"
@click="goGoodsDetail(item.skuId, item.goodsId)">
@@ -69,6 +70,7 @@
<span>{{ item.storeName }}</span>
</div>
</div>
</div>
</div>
<BaseFooter />
</div>
@@ -199,10 +201,12 @@ export default {
.time-line {
width: 1200px;
max-width: 1200px;
height: 60px;
margin: 0 auto;
background-color: #fff;
display: flex;
box-sizing: border-box;
li {
padding: 0 30px;
@@ -242,15 +246,29 @@ export default {
}
}
.seckill-goods-wrap {
width: 1200px;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
.goods-list {
width: 100%;
margin: 0;
column-gap: 10px;
}
}
.goods-show-info1 {
width: 290px;
width: calc(25% - 8px);
min-width: 0;
padding: 6px;
margin: 10px 0px;
margin-left: 8px;
margin: 10px 0;
position: relative;
border: 1px solid #fff;
cursor: pointer;
background-color: #fff;
box-sizing: border-box;
}
.goods-show-info1:hover {
@@ -261,6 +279,22 @@ export default {
.goods-show-img {
display: flex;
justify-content: center;
img {
width: 100%;
max-width: 200px;
height: auto;
aspect-ratio: 1;
object-fit: cover;
}
}
.goods-show-num1 {
display: flex;
align-items: center;
font-size: 12px;
margin-bottom: 6px;
color: #666;
}
.el-progress-bar__inner {