charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat：优化售后

Browse Source
This commit is contained in:
charles
2026-07-23 16:52:28 +08:00
parent bf7970dae4
commit df7cdce7cb
2 changed files with 58 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/mine_package/mine_order/after-sales/refund-popu.vue
+54 -56
View File
@@ -1,10 +1,10 @@
<template>
<!-- 退货退款模块 -->
<view>
<view v-if="status > 0">
<view class="refund_box">
<view v-if="status > 0" class="refund_header">
<salesStatus :topLabel="topLabel" :topTitle="topTitle" :status="status"></salesStatus>
</view>
<view class="refund_content">
<scroll-view scroll-y class="refund_content">
<view class="content_card">
<image :src="product.items[0].mainGraph" class="card_img"></image>
<view class="card_info">
@@ -60,17 +60,18 @@
v-model="product.expressNo" />
</view>
</view>
<view v-if="buttonLabel" :class="[
'bottom_box',
{
bottom_box_disabled:
status == 2 && (!product.expressNo || !product.expressName),
},
{ bottom_box_quash: status == 1 || status == 3 },
]">
<view class="button operate_but_2" @click="submit">
{{ buttonLabel }}</view>
</view>
</scroll-view>
<view v-if="buttonLabel" :class="[
'bottom_box',
{
bottom_box_disabled:
status == 2 && (!product.expressNo || !product.expressName),
},
{ bottom_box_quash: status == 1 || status == 3 },
]">
<view class="button operate_but_2" @click="submit">
{{ buttonLabel }}</view>
</view>
<up-toast ref="uToastRef"></up-toast>
@@ -321,15 +322,22 @@ export default {
};
</script>
<style lang="scss" scoped>
.refund_box {
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.refund_header {
flex-shrink: 0;
}
.refund_content {
width: 100%;
padding: 0 32rpx;
height: 52vh;
padding: 0 32rpx 30rpx;
box-sizing: border-box;
overflow-y: scroll;
// .card_list_box {
// padding-bottom: 88rpx;
// }
.content_card {
display: flex;
margin-bottom: 48rpx;
@@ -410,49 +418,39 @@ export default {
font-size: 28rpx;
}
}
}
.bottom_box {
position: fixed;
bottom: 0;
left: 0;
/* 补充 left:0，确保容器从左侧开始 */
right: 0;
/* 补充 right:0，让容器宽度自适应屏幕/弹窗 */
.bottom_box {
flex-shrink: 0;
text-align: center;
background: #ffffff;
padding: 16rpx 32rpx calc(28rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
.button {
width: 100%;
height: 88rpx;
background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
color: #ffffff;
line-height: 88rpx;
text-align: center;
background: #ffffff;
padding: 0 48rpx 28rpx;
/* 增加内边距，避免按钮贴边 */
z-index: 10;
border-radius: 8rpx;
}
/* 确保整个底部区域在内容上方 */
&.bottom_box_quash {
.button {
width: 100%;
/* 直接用 100%，利用父容器的 padding 控制边距 */
height: 88rpx;
background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
color: #ffffff;
line-height: 88rpx;
text-align: center;
border-radius: 8rpx;
margin-top: 28rpx;
/* 只保留顶部 margin，底部由父容器 padding 控制 */
/* 移除 margin 左右值，改用父容器 padding 控制边距 */
background: #ffffff;
color: #b164fb;
border: 1rpx solid #b164fb;
}
}
&.bottom_box_quash {
.button {
background: #ffffff;
color: #b164fb;
border: 1rpx solid #b164fb;
}
}
&.bottom_box_disabled {
.button {
background: #e8ebf6;
color: #cbced9;
border: 1rpx solid #e7ebf6;
}
&.bottom_box_disabled {
.button {
background: #e8ebf6;
color: #cbced9;
border: 1rpx solid #e7ebf6;
}
}
}