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>
@@ -265,6 +251,10 @@ export default {
if (this.product.status == 7) {
return 5;
}
// 退款
if (this.product.status == 8) {
return 6;
}
},
/* 根据订单状态按钮显示不同文案 */
buttonLabel() {
@@ -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;
pages/mine_package/mine_order/components/salesStatus.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<!-- 退货退款进度icon -->
<view class="status_box">
<image class="status_img" :src="`https://static.tbmall.xin/static/mine-purse/icon_arrow_black_${status == 4 ? 2 : status == 5 ? 3 : 1}.png`"></image>
<image class="status_img" :src="`https://static.tbmall.xin/static/mine-purse/icon_arrow_black_${(status == 4 || status == 6) ? 2 :status == 5 ? 3 : 1}.png`"></image>
<view class="status_name">{{ topTitle }}</view>
<view class="status_tip">{{ topLabel }}</view>
<view class="line"></view>
pages/mine_package/mine_order/mine_order.vue
+25 -18
View File
@@ -7,8 +7,8 @@
</view>
<view class="order_type_title">
<view :class="form.type === item.id
? 'order_type_title_item order_type_title_item_sel'
: 'order_type_title_item'
? 'order_type_title_item order_type_title_item_sel'
: 'order_type_title_item'
" v-for="(item, index) in orderTypeList" @click="checkType(item)" :key="index">
{{ item.title }}
</view>
@@ -88,9 +88,12 @@
<view class="content_item_yd_msg">(快递动态跟进请复制单号至[快递100官网] 查询)</view>
<view>共{{ item.buyNum }}件,合计￥{{ item.sumAmount }}</view>
</view> -->
<view class="collect_msg" v-if="item.buyDeductionValue">共{{ item.buyNum }}件,合计数字积分{{item.buyDeductionValue}} +￥{{item.sumAmount}}</view>
<view class="collect_msg" v-if="!item.buyDeductionValue">运费:￥{{ item.postage }},商品总价:￥{{item.sumAmount}}</view>
<view class="collect_msg" v-if="!item.buyDeductionValue">共{{ item.buyNum }}件,合计￥{{ item.sumAmount + item.postage }}</view>
<view class="collect_msg" v-if="item.buyDeductionValue">共{{ item.buyNum }}件,合计数字积分{{ item.buyDeductionValue }}
+￥{{ item.sumAmount }}</view>
<view class="collect_msg" v-if="!item.buyDeductionValue">运费:￥{{ item.postage }},商品总价:￥{{ item.sumAmount }}
</view>
<view class="collect_msg" v-if="!item.buyDeductionValue">共{{ item.buyNum }}件,合计￥{{ item.sumAmount +
item.postage }}</view>
<view class="collect_operate">
<!-- <view class="operate_comm operate_but_1" v-if="item.status === ORDER_TYPE.UNSHIPPED" @click="checkCancel(true)">取消订单</view> -->
<view class="operate_comm operate_but_2" v-if="
@@ -175,7 +178,7 @@
<!-- 申请售后 -->
<up-popup v-model:show="afterShow" class="after-sales-popup" :customStyle="{
height: '1300rpx',
// maxHeight: '80%',
overflow: 'scroll',
position: 'relative',
paddingBottom: '80rpx',
@@ -329,7 +332,7 @@ export default {
},
data() {
return {
salesServer: 1, //为1展示申请售后 2:选择退货原因 3.退货退款申请
salesServer: 1, //为1展示申请售后 2:选择退货原因 3.退货退款申请,4.退款申请失败
orderTypeList: [
{
id: MINE_ORDER_TYPE.UNPAID,
@@ -410,7 +413,11 @@ export default {
});
},
onNextRefund() {
// 退款申请失败
this.salesServer = 2;
if (this.aftterSalesProduct.status == 8) {
this.salesServer = 4;
}
this.aftterSalesProduct = {
...this.aftterSalesProduct,
@@ -447,16 +454,16 @@ export default {
},
// 售后订单详情
async onAfterSaleDetail(item) {
if (item.status === 8) {
this.$refs.uToastRef.show({
type: "success",
message: "订单已作废",
});
return;
}
// if (item.status === 8) {
// this.$refs.uToastRef.show({
// type: "success",
// message: "订单已作废",
// });
// return;
// }
const { bizcode, data } = await afterSaleDetail({ id: item.afterId });
if (bizcode == 100) {
this.aftterSalesProduct = { ...data, ...{ afterId: item.afterId } };
this.aftterSalesProduct = { ...data, ...{ afterId: item.afterId, status: item.status } };
this.salesServer = 2;
this.afterShow = true;
}
@@ -493,7 +500,7 @@ export default {
},
async againDeleteOrder() {
let params;
if (this.form.type === 4 && (this.deleteInfo.status === 4 || this.deleteInfo.status === 5 || this.deleteInfo.status === 6 || this.deleteInfo.status === 7)) {
if (this.form.type === 4 && (this.deleteInfo.status === 4 || this.deleteInfo.status === 5 || this.deleteInfo.status === 6 || this.deleteInfo.status === 7)) {
params = {
orderId: this.deleteInfo.id,
type: 1
@@ -506,7 +513,7 @@ export default {
}
}
console.log("删除-1", params);
if(!params.orderId){
if (!params.orderId) {
return;
}
const res = await deleteOrderQuery(params);
@@ -858,7 +865,7 @@ export default {
}
.after-sales-popup {
height: 400px !important;
max-height: 80% !important;
.after-sales-title {
font-size: 28rpx;