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> <template>
<!-- 退货退款模块 --> <!-- 退货退款模块 -->
<view > <view>
<view v-if="status > 0"> <view v-if="status > 0">
<salesStatus <salesStatus :topLabel="topLabel" :topTitle="topTitle" :status="status"></salesStatus>
:topLabel="topLabel"
:topTitle="topTitle"
:status="status"
></salesStatus>
</view> </view>
<view class="refund_content"> <view class="refund_content">
<view class="content_card"> <view class="content_card">
@@ -37,58 +33,48 @@
</view> </view>
</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="card_list">
<view class="list_left">邮寄地址</view> <view class="list_left">邮寄地址</view>
<view>{{ product.address || "--" }}</view> <view>{{ product.address || "--" }}</view>
</view> </view>
<view class="card_list" > <view class="card_list">
<view class="list_left">卖家信息</view> <view class="list_left">卖家信息</view>
<view>{{ `${product.name} ${product.phone}`}}</view> <view>{{ `${product.name} ${product.phone}` }}</view>
</view> </view>
<view class="card_list" @click="onSelectExpress"> <view class="card_list" @click="onSelectExpress">
<view class="list_left">请选择快递名称</view> <view class="list_left">请选择快递名称</view>
<view>{{ product.expressName || "请选择快递公司" }}</view> <view>{{ product.expressName || "请选择快递公司" }}</view>
</view> </view>
<view class="card_list"> <view class="card_list">
<view class="list_left">填快递单号</view> <view class="list_left">填快递单号</view>
<input <input class="input-express" type="text" :disabled="status != 2" placeholder="请填写快递单号"
class="input-express" v-model="product.expressNo" />
type="text"
:disabled="status != 2"
placeholder="请填写快递单号"
v-model="product.expressNo"
/>
</view> </view>
</view> </view>
<view <view v-if="buttonLabel" :class="[
v-if="buttonLabel" 'bottom_box',
:class="[ {
'bottom_box', bottom_box_disabled:
{ status == 2 && (!product.expressNo || !product.expressName),
bottom_box_disabled: },
status == 2 && (!product.expressNo || !product.expressName), { bottom_box_quash: status == 1 || status == 3 },
}, ]">
{ bottom_box_quash: status == 1 || status == 3 },
]"
>
<view class="button operate_but_2" @click="submit"> <view class="button operate_but_2" @click="submit">
{{ buttonLabel }}</view {{ buttonLabel }}</view>
>
</view> </view>
</view> </view>
<up-toast ref="uToastRef"></up-toast> <up-toast ref="uToastRef"></up-toast>
<up-picker <up-picker :show="expressShow" :columns="[expressList]" keyName="name" valueName="id" itemHeight="34"
:show="expressShow" @confirm="onExpressConfirm" @cancel="expressShow = false" @close="expressShow = false"></up-picker>
:columns="[expressList]"
keyName="name"
valueName="id"
itemHeight="34"
@confirm="onExpressConfirm"
@cancel="expressShow = false"
@close="expressShow = false"
></up-picker>
</view> </view>
</template> </template>
<script> <script>
@@ -264,6 +250,10 @@ export default {
// 售后中--卖家已收货，退款成功 // 售后中--卖家已收货，退款成功
if (this.product.status == 7) { if (this.product.status == 7) {
return 5; return 5;
}
// 退款
if (this.product.status == 8) {
return 6;
} }
}, },
/* 根据订单状态按钮显示不同文案 */ /* 根据订单状态按钮显示不同文案 */
@@ -280,6 +270,8 @@ export default {
return "重新发起"; return "重新发起";
} else if (this.status == 5) { } else if (this.status == 5) {
return "我知道了"; return "我知道了";
} else if (this.status == 8) {
return "确定退货/退款";
} }
}, },
/* 根据订单状态显示不label */ /* 根据订单状态显示不label */
@@ -294,6 +286,8 @@ export default {
return "您发起的退货/退款申请，未通过"; return "您发起的退货/退款申请，未通过";
} else if (this.status == 5) { } else if (this.status == 5) {
return "您发起的退货/退款申请，已处理完成"; return "您发起的退货/退款申请，已处理完成";
} else if (this.status == 6) {
return "您发起的退货/退款申请，未通过";
} }
}, },
/* 根据订单状态显示不title */ /* 根据订单状态显示不title */
@@ -308,16 +302,16 @@ export default {
return "退款申请失败"; return "退款申请失败";
} else if (this.status == 5) { } else if (this.status == 5) {
return "退款成功"; return "退款成功";
} else if (this.status == 6) {
return "退款申请失败";
} }
}, },
/* 计算地址 */ /* 计算地址 */
address() { address() {
return `${this.product.provinceName || ""}${this.product.cityName || ""}${ return `${this.product.provinceName || ""}${this.product.cityName || ""}${this.product.areaName || ""
this.product.areaName || "" }${this.product.address || ""} ${this.product.name || ""} ${this.product.phone || ""
}${this.product.address || ""} ${this.product.name || ""} ${ }`;
this.product.phone || ""
}`;
}, },
RETURN_REASON_OBJ() { RETURN_REASON_OBJ() {
return RETURN_REASON; return RETURN_REASON;
@@ -326,18 +320,19 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.refund_content { .refund_content {
width: 100%; width: 100%;
padding: 0 32rpx; padding: 0 32rpx;
box-sizing: border-box; box-sizing: border-box;
overflow-y: scroll; overflow-y: scroll;
// .card_list_box { // .card_list_box {
// padding-bottom: 88rpx; // padding-bottom: 88rpx;
// } // }
.content_card { .content_card {
display: flex; display: flex;
margin-bottom: 48rpx; margin-bottom: 48rpx;
.card_img { .card_img {
width: 156rpx; width: 156rpx;
height: 156rpx; height: 156rpx;
@@ -403,6 +398,7 @@ export default {
.list_left { .list_left {
color: #666; color: #666;
} }
.input-express { .input-express {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -412,26 +408,35 @@ export default {
font-size: 28rpx; font-size: 28rpx;
} }
} }
.bottom_box { .bottom_box {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; /* 补充 left:0，确保容器从左侧开始 */ left: 0;
right: 0; /* 补充 right:0，让容器宽度自适应屏幕/弹窗 */ /* 补充 left:0，确保容器从左侧开始 */
right: 0;
/* 补充 right:0，让容器宽度自适应屏幕/弹窗 */
text-align: center; text-align: center;
background: #ffffff; background: #ffffff;
padding: 0 48rpx 28rpx; /* 增加内边距，避免按钮贴边 */ padding: 0 48rpx 28rpx;
z-index: 10; /* 确保整个底部区域在内容上方 */ /* 增加内边距，避免按钮贴边 */
z-index: 10;
/* 确保整个底部区域在内容上方 */
.button { .button {
width: 100%; /* 直接用 100%，利用父容器的 padding 控制边距 */ width: 100%;
/* 直接用 100%，利用父容器的 padding 控制边距 */
height: 88rpx; height: 88rpx;
background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%); background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
color: #ffffff; color: #ffffff;
line-height: 88rpx; line-height: 88rpx;
text-align: center; text-align: center;
border-radius: 8rpx; border-radius: 8rpx;
margin-top: 28rpx; /* 只保留顶部 margin，底部由父容器 padding 控制 */ margin-top: 28rpx;
/* 只保留顶部 margin，底部由父容器 padding 控制 */
/* 移除 margin 左右值，改用父容器 padding 控制边距 */ /* 移除 margin 左右值，改用父容器 padding 控制边距 */
} }
&.bottom_box_quash { &.bottom_box_quash {
.button { .button {
background: #ffffff; background: #ffffff;
@@ -439,6 +444,7 @@ export default {
border: 1rpx solid #b164fb; border: 1rpx solid #b164fb;
} }
} }
&.bottom_box_disabled { &.bottom_box_disabled {
.button { .button {
background: #e8ebf6; background: #e8ebf6;
pages/mine_package/mine_order/components/salesStatus.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<!-- 退货退款进度icon --> <!-- 退货退款进度icon -->
<view class="status_box"> <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_name">{{ topTitle }}</view>
<view class="status_tip">{{ topLabel }}</view> <view class="status_tip">{{ topLabel }}</view>
<view class="line"></view> <view class="line"></view>
pages/mine_package/mine_order/mine_order.vue
+25 -18
View File
@@ -7,8 +7,8 @@
</view> </view>
<view class="order_type_title"> <view class="order_type_title">
<view :class="form.type === item.id <view :class="form.type === item.id
? 'order_type_title_item order_type_title_item_sel' ? 'order_type_title_item order_type_title_item_sel'
: 'order_type_title_item' : 'order_type_title_item'
" v-for="(item, index) in orderTypeList" @click="checkType(item)" :key="index"> " v-for="(item, index) in orderTypeList" @click="checkType(item)" :key="index">
{{ item.title }} {{ item.title }}
</view> </view>
@@ -88,9 +88,12 @@
<view class="content_item_yd_msg">(快递动态跟进请复制单号至[快递100官网] 查询)</view> <view class="content_item_yd_msg">(快递动态跟进请复制单号至[快递100官网] 查询)</view>
<view>共{{ item.buyNum }}件,合计￥{{ item.sumAmount }}</view> <view>共{{ item.buyNum }}件,合计￥{{ item.sumAmount }}</view>
</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.buyNum }}件,合计数字积分{{ item.buyDeductionValue }}
<view class="collect_msg" v-if="!item.buyDeductionValue">运费:￥{{ item.postage }},商品总价:￥{{item.sumAmount}}</view> +￥{{ 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.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="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_1" v-if="item.status === ORDER_TYPE.UNSHIPPED" @click="checkCancel(true)">取消订单</view> -->
<view class="operate_comm operate_but_2" v-if=" <view class="operate_comm operate_but_2" v-if="
@@ -175,7 +178,7 @@
<!-- 申请售后 --> <!-- 申请售后 -->
<up-popup v-model:show="afterShow" class="after-sales-popup" :customStyle="{ <up-popup v-model:show="afterShow" class="after-sales-popup" :customStyle="{
height: '1300rpx', // maxHeight: '80%',
overflow: 'scroll', overflow: 'scroll',
position: 'relative', position: 'relative',
paddingBottom: '80rpx', paddingBottom: '80rpx',
@@ -329,7 +332,7 @@ export default {
}, },
data() { data() {
return { return {
salesServer: 1, //为1展示申请售后 2:选择退货原因 3.退货退款申请 salesServer: 1, //为1展示申请售后 2:选择退货原因 3.退货退款申请,4.退款申请失败
orderTypeList: [ orderTypeList: [
{ {
id: MINE_ORDER_TYPE.UNPAID, id: MINE_ORDER_TYPE.UNPAID,
@@ -410,7 +413,11 @@ export default {
}); });
}, },
onNextRefund() { onNextRefund() {
// 退款申请失败
this.salesServer = 2; this.salesServer = 2;
if (this.aftterSalesProduct.status == 8) {
this.salesServer = 4;
}
this.aftterSalesProduct = { this.aftterSalesProduct = {
...this.aftterSalesProduct, ...this.aftterSalesProduct,
@@ -447,16 +454,16 @@ export default {
}, },
// 售后订单详情 // 售后订单详情
async onAfterSaleDetail(item) { async onAfterSaleDetail(item) {
if (item.status === 8) { // if (item.status === 8) {
this.$refs.uToastRef.show({ // this.$refs.uToastRef.show({
type: "success", // type: "success",
message: "订单已作废", // message: "订单已作废",
}); // });
return; // return;
} // }
const { bizcode, data } = await afterSaleDetail({ id: item.afterId }); const { bizcode, data } = await afterSaleDetail({ id: item.afterId });
if (bizcode == 100) { if (bizcode == 100) {
this.aftterSalesProduct = { ...data, ...{ afterId: item.afterId } }; this.aftterSalesProduct = { ...data, ...{ afterId: item.afterId, status: item.status } };
this.salesServer = 2; this.salesServer = 2;
this.afterShow = true; this.afterShow = true;
} }
@@ -493,7 +500,7 @@ export default {
}, },
async againDeleteOrder() { async againDeleteOrder() {
let params; 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 = { params = {
orderId: this.deleteInfo.id, orderId: this.deleteInfo.id,
type: 1 type: 1
@@ -506,7 +513,7 @@ export default {
} }
} }
console.log("删除-1", params); console.log("删除-1", params);
if(!params.orderId){ if (!params.orderId) {
return; return;
} }
const res = await deleteOrderQuery(params); const res = await deleteOrderQuery(params);
@@ -858,7 +865,7 @@ export default {
} }
.after-sales-popup { .after-sales-popup {
height: 400px !important; max-height: 80% !important;
.after-sales-title { .after-sales-title {
font-size: 28rpx; font-size: 28rpx;