feat: 更新 API 请求参数与组件样式优化

- 在 account.js 和 member.js 中添加 loading 和 skipMessage 参数,提升 API 调用的用户体验。
- 在 ShowGoods.vue 中优化商品详情展示样式,增强可读性和交互性。
- 在 Cart.vue 中重构购物车商品列表结构,提升布局一致性。
- 在多个页面中修复了提示信息的内容,确保用户操作的清晰反馈。
This commit is contained in:
田香琪
2026-07-06 16:33:21 +08:00
parent e13ca6281d
commit 297bdd95dd
28 changed files with 689 additions and 259 deletions

View File

@@ -37,26 +37,30 @@
<div>
<el-input type="textarea" maxlength="500" show-word-limit :rows="4" v-model="orderGoods.content" />
</div>
<div style="display:flex;align-items:center;">
<div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
<img :src="img">
<div class="demo-upload-list-cover">
<div class="upload-section">
<div class="upload-row">
<div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
<img :src="img">
<div class="demo-upload-list-cover">
<el-icon @click="handleView(img)"><View /></el-icon>
<el-icon @click="handleRemove(index)"><Delete /></el-icon>
</div>
</div>
</div>
<el-upload
:show-upload-list="false"
<el-upload
class="upload-trigger"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="handleBeforeUpload"
:format="['jpg','jpeg','png']"
:action="action"
:headers="accessToken"
style="display: inline-block;width:58px;">
<div class="hover-pointer icon-upload" style="">
>
<div class="hover-pointer icon-upload">
<el-icon :size="20"><Camera /></el-icon>
</div>
</el-upload>
</el-upload>
</div>
<div class="describe">上传评价图片最多9张</div>
</div>
</div>
</li>
@@ -165,7 +169,7 @@ export default {
this.$forceUpdate()
},
handleBeforeUpload () { // 上传之前钩子
const check = this.orderGoods.uploadList.length < 10;
const check = this.orderGoods.uploadList.length < 9;
if (!check) {
this.$Notice.warning({
title: '最多可以上传九张图片'
@@ -237,7 +241,7 @@ export default {
}
.demo-upload-list{
display: inline-block;
display: block;
width: 60px;
height: 60px;
text-align: center;
@@ -248,8 +252,7 @@ export default {
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
margin-right: 4px;
margin-top: 10px;
flex-shrink: 0;
}
.demo-upload-list img{
width: 100%;
@@ -274,17 +277,47 @@ export default {
margin: 0 2px;
}
.icon-upload {
width: 58px;
height:58px;
line-height: 58px;
text-align:center;
display: inline-block;
border:1px dashed #999;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #999;
border-radius: 4px;
margin-top: 10px;
box-sizing: border-box;
&:hover{
cursor: pointer;
border-color: $theme_color;
}
}
.upload-section {
margin-top: 10px;
}
.upload-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.upload-trigger {
display: inline-flex;
align-items: center;
flex-shrink: 0;
:deep(.el-upload) {
display: inline-flex;
align-items: center;
}
}
.describe {
font-size: 12px;
color: #999;
margin-top: 8px;
}
</style>