You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
438 lines
12 KiB
438 lines
12 KiB
<template>
|
|
<div class="refund wrapper_1200">
|
|
<div class="crumbs">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item :to="{ path: '/order' }">我的订单</el-breadcrumb-item>
|
|
<el-breadcrumb-item>{{ titleType }}</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
|
|
<div class="refund_Box">
|
|
<el-steps :active="stepActive" finish-status="success">
|
|
<el-step
|
|
:title="stepItem.stepTitle"
|
|
v-for="(stepItem, stepIndex) in stepList"
|
|
:key="stepIndex"
|
|
></el-step>
|
|
</el-steps>
|
|
|
|
<ApplyRefund v-if="stepActive == 0" :orderData.sync="orderData" ref="applyRefund" />
|
|
<ProcessRefunds
|
|
v-if="!stepActive == 0"
|
|
ref="processRefunds"
|
|
:stepActive.sync="stepActive"
|
|
:iSfailed.sync="iSfailed"
|
|
:iSrefund.sync="iSrefund"
|
|
:orderData.sync="orderData"
|
|
:orderGoodsData.sync="order_goods_data"
|
|
/>
|
|
|
|
<el-button class="refundBtn" type="primary" @click="next(0)" v-show="stepActive == 0">提交</el-button>
|
|
<el-button class="refundBtn" type="primary" @click="next(1)" v-show="stepActive == 1">撤销申请</el-button>
|
|
<el-button
|
|
class="refundBtn"
|
|
type="primary"
|
|
@click="next(2)"
|
|
v-show="stepActive == 2 && iSfailed == false && ![5,6].includes(order_goods_data.refund_status)"
|
|
>撤销申请</el-button>
|
|
<!-- <el-button-->
|
|
<!-- class="refundBtn"-->
|
|
<!-- type="primary"-->
|
|
<!-- @click="showWaybill()"-->
|
|
<!-- v-if="isWaybill"-->
|
|
<!-- v-show="stepActive == 2 && iSfailed == true"-->
|
|
<!-- >填写快递运单号</el-button>-->
|
|
<el-button
|
|
class="refundBtn"
|
|
type="primary"
|
|
@click="showWaybill()"
|
|
v-show="stepActive == 2 && iSfailed == true"
|
|
>填写快递运单号</el-button>
|
|
</div>
|
|
|
|
<DialogSlot
|
|
:dialogSlotShow.sync="waybillDialog"
|
|
@done="reload"
|
|
:tipsText="'填写快递单号'"
|
|
@clickConfirm="clickConfirm"
|
|
>
|
|
<template v-slot:contentSlot>
|
|
<el-form ref="waybillForm" :model="waybillForm" label-width="80px">
|
|
<el-form-item label="物流公司">
|
|
<el-input v-model="waybillForm.refund_delivery_name" size="small"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="物流单号">
|
|
<el-input v-model="waybillForm.refund_delivery_no" size="small"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="物流说明">
|
|
<el-input v-model="waybillForm.refund_delivery_remark" size="small"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
</DialogSlot>
|
|
<Dialog
|
|
ref="revokedialog"
|
|
:contentText="contentText"
|
|
@clickConfirm="cancelRefund"
|
|
:cancelText="'返回'"
|
|
></Dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import ApplyRefund from "./applyRefund.vue";
|
|
import ProcessRefunds from "./processRefunds.vue";
|
|
export default {
|
|
components: { ApplyRefund, ProcessRefunds },
|
|
auth: false,
|
|
data() {
|
|
return {
|
|
// 进度条状态
|
|
stepActive: 0,
|
|
// 是否完成退款
|
|
iSrefund: undefined,
|
|
// 商家是否同意退款
|
|
iSfailed: undefined,
|
|
refundForm: {
|
|
region: "",
|
|
num: 8000,
|
|
desc: "",
|
|
license: ""
|
|
},
|
|
contentText: "",
|
|
titleType: "申请退款",
|
|
stepList: [
|
|
{
|
|
stepTitle: "申请退款",
|
|
stepId: "1"
|
|
},
|
|
{
|
|
stepTitle: "卖家处理退款申请",
|
|
stepId: "2"
|
|
},
|
|
{
|
|
stepTitle: "退款成功",
|
|
stepId: "3"
|
|
}
|
|
],
|
|
refundRules: {
|
|
region: [{ required: true, message: "请输入活动名称", trigger: "blur" }]
|
|
},
|
|
// 运单号弹出框
|
|
isWaybill: false,
|
|
waybillDialog: false,
|
|
|
|
order_goods_ids:[],
|
|
order_goods_data:'',//需要售后的商品订单表信息
|
|
refundData: {},//要退款的商品数据
|
|
//卖家退货运单需要填写的表单
|
|
waybillForm: {
|
|
refund_delivery_name: "",//物流公司
|
|
refund_delivery_no: "",//物流单号
|
|
refund_delivery_remark: "",//物流说明
|
|
},
|
|
|
|
orderData: {},
|
|
ids: [],
|
|
refundStatus: undefined
|
|
};
|
|
},
|
|
watch: {
|
|
stepActive(n, o) {
|
|
// console.log(n, o);
|
|
}
|
|
},
|
|
created() {
|
|
this.orderData = {};
|
|
this.iSrefund = undefined;
|
|
this.iSfailed = undefined;
|
|
this.stepActive = 0;
|
|
|
|
this.order_goods_data = this.$route.query.row;//需要售后的商品订单表信息
|
|
if (this.$route.query.row.refund_status == 0) {
|
|
this.orderData = this.$route.query.row;
|
|
} else {
|
|
let status = this.$route.query.row.refund_status;
|
|
this.getRefundOrder(this.$route.query.row.order_id, status);
|
|
// console.log(
|
|
// this.stepActive,
|
|
// this.iSfailed,
|
|
// this.iSrefund,
|
|
// status,
|
|
// 111111
|
|
// );
|
|
}
|
|
},
|
|
mounted() {
|
|
this.stepType();
|
|
},
|
|
methods: {
|
|
getRefundOrder(id, status) {
|
|
let obj = {
|
|
order_id: id
|
|
};
|
|
this.$axios
|
|
.post(`/order/detail`, obj)
|
|
.then(res => {
|
|
this.orderData = res.data;
|
|
console.log(status, `status`);
|
|
console.log(this.orderData, `this.orderData`);
|
|
|
|
this.order_goods_ids = this.orderData.order_goods.map(item => {
|
|
return item.order_goods_id;
|
|
});
|
|
|
|
this.getRefundData()
|
|
|
|
// refund_status 1申请退款 2已确认 3已完成 4等待买家发货 5等待卖家发货 6卖家确认收货 -1卖家拒绝退款 -2卖家关闭退款
|
|
switch (status) {
|
|
case -1:
|
|
this.stepActive = 2;
|
|
this.iSfailed = false;
|
|
this.iSrefund = false;
|
|
break;
|
|
case 1: //等待商家同意
|
|
this.stepActive = 1;
|
|
this.iSrefund = undefined;
|
|
this.iSfailed = undefined;
|
|
break;
|
|
case 2:
|
|
this.stepActive = 2;
|
|
this.iSfailed = true;
|
|
break;
|
|
case 3:
|
|
this.stepActive = 3;
|
|
this.iSrefund = true;
|
|
break;
|
|
case 4://4等待买家发货
|
|
this.stepActive = 2;
|
|
this.iSfailed = true;
|
|
break;
|
|
case 5://5等待卖家发货
|
|
this.stepActive = 2;
|
|
this.iSfailed = false;
|
|
break;
|
|
case 6://6卖家确认收货
|
|
this.stepActive = 2;
|
|
this.iSfailed = false;
|
|
break;
|
|
|
|
// default:
|
|
// this.stepActive = 0;
|
|
// break;
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
next(i) {
|
|
// 提交退款申请
|
|
if (i == 0) {
|
|
let { refundtype, refund_reason, refund_remark } = {
|
|
...this.$refs.applyRefund.refundForm
|
|
};
|
|
let ids = [];
|
|
ids = this.orderData.order_goods.map(item => {
|
|
return item.order_goods_id;
|
|
});
|
|
|
|
let obj = {
|
|
order_goods_ids: ids.toString(),
|
|
refund_type: refundtype,
|
|
refund_reason: refund_reason,
|
|
refund_remark: refund_remark
|
|
};
|
|
this.$axios
|
|
.post(`/orderrefund/refund`, obj)
|
|
.then(res => {
|
|
this.$message({
|
|
message: res.message,
|
|
type: "success"
|
|
});
|
|
this.$router.push(`/order`);
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
}
|
|
// 撤销申请
|
|
else if (i == 1 || i == 2) {
|
|
this.$refs.revokedialog.dialogShow = true;
|
|
this.contentText = "确定要撤销退款申请吗？";
|
|
}
|
|
},
|
|
stepType() {
|
|
if (this.stepActive == 0) {
|
|
this.titleType = "申请退款";
|
|
} else if (this.stepActive == 1) {
|
|
this.titleType = "卖家处理退款申请";
|
|
} else if (this.stepActive == 2) {
|
|
this.titleType = "退款成功";
|
|
}
|
|
},
|
|
reload(e) {
|
|
console.log(e, "0000");
|
|
},
|
|
// 显示运单号弹出框
|
|
showWaybill() {
|
|
this.waybillDialog = true;
|
|
},
|
|
|
|
//获取要退货的商品信息
|
|
getRefundData() {
|
|
// 多个退款数据查询
|
|
// if (this.orderData.order_goods.length > 1) {
|
|
let obj = {
|
|
order_goods_id: this.order_goods_ids.toString()
|
|
};
|
|
this.$axios
|
|
.post(`/orderrefund/detail`, obj)
|
|
.then(res => {
|
|
this.refundData = res.data;
|
|
//console.log('qq3',res.data);
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
|
|
// 运单号弹出框确认按钮点击事件
|
|
clickConfirm() {
|
|
let obj = {
|
|
order_goods_id: this.$route.query.row.order_goods_id,
|
|
refund_delivery_name: this.waybillForm.refund_delivery_name,
|
|
refund_delivery_no: this.waybillForm.refund_delivery_no,
|
|
refund_delivery_remark:this.waybillForm.refund_delivery_remark,
|
|
};
|
|
|
|
//验证必填参数
|
|
if (!obj.refund_delivery_name){
|
|
this.$message.error("请填写物流公司名称");
|
|
return;
|
|
}
|
|
if (!obj.refund_delivery_no){
|
|
this.$message.error("请填写物流单号");
|
|
return;
|
|
}
|
|
//发送请求
|
|
this.$axios
|
|
.post(`/orderrefund/delivery`, obj)
|
|
.then(res => {
|
|
console.log('qq2',res)
|
|
if(res.code == 0){
|
|
this.$message.success(res.message);
|
|
}else{
|
|
this.$message.error(res.message);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
|
|
|
|
this.waybillDialog = false;
|
|
|
|
},
|
|
//撤销退款申请
|
|
cancelRefund() {
|
|
console.log();
|
|
let obj = {
|
|
order_goods_id: this.$route.query.row.order_goods_id.toString()
|
|
};
|
|
this.$axios
|
|
.post(`/orderrefund/cancel`, obj)
|
|
.then(res => {
|
|
console.log(res);
|
|
this.$message({
|
|
message: res.message,
|
|
type: "success"
|
|
});
|
|
this.$router.push({ path: "/order" });
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.refund {
|
|
.crumbs {
|
|
margin: 20px 0;
|
|
}
|
|
.refund_Box {
|
|
width: 1200px;
|
|
min-height: 580px;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
padding: 30px 30px 0 37px;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
|
|
/deep/ .el-steps {
|
|
margin-bottom: 25px;
|
|
.el-step__head.is-success {
|
|
color: var(--themeColor);
|
|
border-color: var(--themeColor);
|
|
}
|
|
.el-step__title.is-success {
|
|
color: #222222;
|
|
}
|
|
}
|
|
.refundForm {
|
|
width: 600px;
|
|
/deep/ .el-form-item {
|
|
.refundIpt {
|
|
.el-input__inner {
|
|
color: #ff3838;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.commodityBox {
|
|
display: flex;
|
|
img {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.commoditytxt {
|
|
p {
|
|
line-height: 30px;
|
|
text-align: left;
|
|
margin-left: 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
p:first-child {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
.upload_BOX {
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 4px;
|
|
border: 1px solid #dddddd;
|
|
text-align: center;
|
|
.upload {
|
|
margin: 10px auto;
|
|
color: #ccc;
|
|
img {
|
|
margin: auto;
|
|
width: 22px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
.refundBtn {
|
|
position: absolute;
|
|
right: 30px;
|
|
bottom: 40px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|