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-20 22:25:12 +08:00
parent 82a8043578
commit 8c66197177
3 changed files with 85 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/mine_package/mine_order/after-sales/refund-popu.vue
+59 -53
View File
@@ -1,12 +1,8 @@
<template>
<!-- 退货退款模块 -->
<view >
<view>
<view v-if="status > 0">
<salesStatus
:topLabel="topLabel"
:topTitle="topTitle"
:status="status"
></salesStatus>
<salesStatus :topLabel="topLabel" :topTitle="topTitle" :status="status"></salesStatus>
</view>
<view class="refund_content">
<view class="content_card">
@@ -37,58 +33,48 @@
</view>
</view>
<view v-if="status > 1">
<view class="card_list" v-if="product.status == 8">
<view class="list_left">未通过原因</view>
<view>
{{ product.auditRemark || "--" }}
</view>
</view>
<view v-if="status > 1 && status != 6 && status != 5">
<view class="card_list">
<view class="list_left">邮寄地址</view>
<view>{{ product.address || "--" }}</view>
</view>
<view class="card_list" >
<view class="list_left">卖家信息</view>
<view>{{ `${product.name} ${product.phone}`}}</view>
</view>
<view class="card_list">
<view class="list_left">卖家信息</view>
<view>{{ `${product.name} ${product.phone}` }}</view>
</view>
<view class="card_list" @click="onSelectExpress">
<view class="list_left">请选择快递名称</view>
<view>{{ product.expressName || "请选择快递公司" }}</view>
</view>
<view class="card_list">
<view class="list_left">填快递单号</view>
<input
class="input-express"
type="text"
:disabled="status != 2"
placeholder="请填写快递单号"
v-model="product.expressNo"
/>
<input class="input-express" type="text" :disabled="status != 2" placeholder="请填写快递单号"
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 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
>
{{ buttonLabel }}</view>
</view>
</view>
<up-toast ref="uToastRef"></up-toast>
<up-picker
:show="expressShow"
:columns="[expressList]"
keyName="name"
valueName="id"
itemHeight="34"
@confirm="onExpressConfirm"
@cancel="expressShow = false"
@close="expressShow = false"
></up-picker>
<up-picker :show="expressShow" :columns="[expressList]" keyName="name" valueName="id" itemHeight="34"
@confirm="onExpressConfirm" @cancel="expressShow = false" @close="expressShow = false"></up-picker>
</view>
</template>
<script>
@@ -264,6 +250,10 @@ export default {
// 售后中--卖家已收货，退款成功
if (this.product.status == 7) {
return 5;
}
// 退款
if (this.product.status == 8) {
return 6;
}
},
/* 根据订单状态按钮显示不同文案 */
@@ -280,6 +270,8 @@ export default {
return "重新发起";
} else if (this.status == 5) {
return "我知道了";
} else if (this.status == 8) {
return "确定退货/退款";
}
},
/* 根据订单状态显示不label */
@@ -294,6 +286,8 @@ export default {
return "您发起的退货/退款申请，未通过";
} else if (this.status == 5) {
return "您发起的退货/退款申请，已处理完成";
} else if (this.status == 6) {
return "您发起的退货/退款申请，未通过";
}
},
/* 根据订单状态显示不title */
@@ -308,16 +302,16 @@ export default {
return "退款申请失败";
} else if (this.status == 5) {
return "退款成功";
} else if (this.status == 6) {
return "退款申请失败";
}
},
/* 计算地址 */
address() {
return `${this.product.provinceName || ""}${this.product.cityName || ""}${
this.product.areaName || ""
}${this.product.address || ""} ${this.product.name || ""} ${
this.product.phone || ""
}`;
return `${this.product.provinceName || ""}${this.product.cityName || ""}${this.product.areaName || ""
}${this.product.address || ""} ${this.product.name || ""} ${this.product.phone || ""
}`;
},
RETURN_REASON_OBJ() {
return RETURN_REASON;
@@ -326,18 +320,19 @@ export default {
};
</script>
<style lang="scss" scoped>
.refund_content {
width: 100%;
padding: 0 32rpx;
box-sizing: border-box;
overflow-y: scroll;
// .card_list_box {
// padding-bottom: 88rpx;
// }
.content_card {
display: flex;
margin-bottom: 48rpx;
.card_img {
width: 156rpx;
height: 156rpx;
@@ -403,6 +398,7 @@ export default {
.list_left {
color: #666;
}
.input-express {
display: flex;
align-items: center;
@@ -412,26 +408,35 @@ export default {
font-size: 28rpx;
}
}
.bottom_box {
position: fixed;
bottom: 0;
left: 0; /* 补充 left:0，确保容器从左侧开始 */
right: 0; /* 补充 right:0，让容器宽度自适应屏幕/弹窗 */
left: 0;
/* 补充 left:0，确保容器从左侧开始 */
right: 0;
/* 补充 right:0，让容器宽度自适应屏幕/弹窗 */
text-align: center;
background: #ffffff;
padding: 0 48rpx 28rpx; /* 增加内边距，避免按钮贴边 */
z-index: 10; /* 确保整个底部区域在内容上方 */
padding: 0 48rpx 28rpx;
/* 增加内边距，避免按钮贴边 */
z-index: 10;
/* 确保整个底部区域在内容上方 */
.button {
width: 100%; /* 直接用 100%，利用父容器的 padding 控制边距 */
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-top: 28rpx;
/* 只保留顶部 margin，底部由父容器 padding 控制 */
/* 移除 margin 左右值，改用父容器 padding 控制边距 */
}
&.bottom_box_quash {
.button {
background: #ffffff;
@@ -439,6 +444,7 @@ export default {
border: 1rpx solid #b164fb;
}
}
&.bottom_box_disabled {
.button {
background: #e8ebf6;