fix(cart): 调整错误提示展示并优化已下架商品遮罩样式

简化 Cart.vue 中错误文案展示,移除多余 margin
优化 error-goods 样式:使用 inset 定位,并通过 box-sizing 管理 padding,改善布局与响应表现
This commit is contained in:
田香琪
2026-07-17 17:35:42 +08:00
parent 59c98d1289
commit d172a1c9b8
3 changed files with 58 additions and 28 deletions

View File

@@ -193,7 +193,7 @@
</div> </div>
</div> </div>
<div class="error-goods" v-if="goods.errorMessage"> <div class="error-goods" v-if="goods.errorMessage">
<div style="margin-top: 20px">{{ goods.errorMessage }}</div> <div>{{ goods.errorMessage }}</div>
<el-button type="primary" @click="delGoods(goods.goodsSku.id)" <el-button type="primary" @click="delGoods(goods.goodsSku.id)"
>删除</el-button >删除</el-button
> >
@@ -785,20 +785,18 @@ export default {
outline-color: $theme_color; outline-color: $theme_color;
} }
} }
}
.error-goods { .error-goods {
position: absolute; position: absolute;
width: 100%; inset: 0;
height: 100%;
margin-left: -20px;
background-color: rgba($color: #999, $alpha: 0.5); background-color: rgba($color: #999, $alpha: 0.5);
z-index: 10; z-index: 10;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-left: 150px; padding: 0 30px 0 150px;
box-sizing: border-box;
color: #000; color: #000;
padding-right: 30px; }
} }
} }
&-footer { &-footer {

View File

@@ -93,6 +93,7 @@ export default {
{ type: "WECHAT_PAYMENT", name: "微信支付设置" }, { type: "WECHAT_PAYMENT", name: "微信支付设置" },
], ],
tabWay: [], // tab数据 tabWay: [], // tab数据
settingRequestSeq: 0,
}; };
}, },
@@ -115,28 +116,59 @@ export default {
this.selected = name; this.selected = name;
this.getSettingData(name); this.getSettingData(name);
}, },
resolveTabWay() {
const tabMap = {
setting: this.setting,
authLogin: this.authLogin,
pay: this.pay,
};
this.tabWay = tabMap[this.$route.name] || [];
},
normalizeSettingResult(res) {
if (!res || res.result == null) {
return {};
}
const raw = res.result;
if (typeof raw === "string") {
try {
return JSON.parse(raw);
} catch (e) {
return {};
}
}
if (typeof raw === "object") {
return raw;
}
return {};
},
/** /**
* 进入页面请求第一个配置 * 进入页面请求第一个配置
*/ */
getSettingData(name) { getSettingData(name) {
this.settingData = ""; this.settingData = "";
Object.keys(this).forEach((item) => { this.resolveTabWay();
if (this.$route.name == item) {
this.tabWay = this[item];
}
});
// 点击页面给每项第一个数据赋值
if (!name) { if (!name) {
if (!this.tabWay.length) {
return;
}
name = this.tabWay[0].type; name = this.tabWay[0].type;
this.selected = name; this.selected = name;
} }
getSetting(name).then((res) => { const requestId = ++this.settingRequestSeq;
if (res.result) { getSetting(name)
this.settingData = JSON.stringify(res.result); .then((res) => {
} else { if (requestId !== this.settingRequestSeq) {
this.settingData = "{}"; return;
} }
this.settingData = JSON.stringify(this.normalizeSettingResult(res));
})
.catch(() => {
if (requestId !== this.settingRequestSeq) {
return;
}
this.settingData = "{}";
}); });
}, },
}, },