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.
349 lines
8.8 KiB
349 lines
8.8 KiB
<template>
|
|
<div class="processRefunds">
|
|
<!-- 判断退款状态 -->
|
|
<div>
|
|
<div class="processRefunds_txt" v-if="stepActive == 1">
|
|
<p class="t1">
|
|
{{refundData.refund_status_name}}
|
|
<span>
|
|
<!-- <span> </span>还剩下1天23时21分 -->
|
|
</span>
|
|
</p>
|
|
<p class="t2">卖家同意或超时未处理，将自动退款</p>
|
|
</div>
|
|
<div class="processRefunds_txt" v-if="stepActive == 2 && !iSfailed">
|
|
<p class="t3">
|
|
退款失败
|
|
<span>
|
|
<span> </span>
|
|
{{refundData.refund_status_name
|
|
}}
|
|
</span>
|
|
</p>
|
|
<p class="t2">
|
|
拒绝原因：
|
|
<span>{{refundData.refund_refuse_reason}}</span>
|
|
</p>
|
|
</div>
|
|
<div class="processRefunds_txt" v-if="stepActive == 2 && iSfailed">
|
|
<p class="t1">
|
|
商家已同意
|
|
<span>
|
|
<!-- <span> </span>还剩下1天23时21分 -->
|
|
</span>
|
|
</p>
|
|
<p class="t2">
|
|
<!-- 卖家已同意退款，请按下方地址尽快完成退货 -->
|
|
<span></span>
|
|
</p>
|
|
</div>
|
|
<div class="processRefunds_txt" v-if="stepActive == 3 && !iSrefund">
|
|
<p class="t1">退款中</p>
|
|
<p class="t2">退款正在处理中</p>
|
|
</div>
|
|
<div class="processRefunds_txt" v-if="stepActive == 3 && iSrefund">
|
|
<!-- <p class="t1">{{refundData.refund_status_name}}</p> -->
|
|
<p class="t1">退款成功</p>
|
|
<p class="t4">
|
|
退款总金额：
|
|
<span>¥{{refundData.real_goods_money}}</span>
|
|
</p>
|
|
</div>
|
|
<!-- 商品信息 -->
|
|
<div class="commodityBox">
|
|
<img :src="imgUrl+refundData.sku_image" alt />
|
|
<div class="commoditytxt">
|
|
<p>{{refundData.goods_name}}</p>
|
|
<p>
|
|
<!-- <span>商品编号：a0001</span> -->
|
|
<span> </span>
|
|
<!-- <span>规格：10g/袋</span> -->
|
|
</p>
|
|
<!-- <p>产地：北京</p> -->
|
|
<p style="color: #ff2828">￥{{refundData.real_goods_money}}</p>
|
|
</div>
|
|
</div>
|
|
<!-- 商品退款退货运单信息 -->
|
|
<div class="refoundOrder">
|
|
<h4>退款信息</h4>
|
|
<div class="refoundOrder_item">
|
|
<div>退款编号</div>
|
|
<div>{{refundData.refund_no}}</div>
|
|
</div>
|
|
<div class="refoundOrder_item">
|
|
<div>申请时间</div>
|
|
<div>{{ $dayjs(refundData.refund_action_time*1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
|
|
</div>
|
|
<div class="refoundOrder_item" v-if="refundData.refund_fee">
|
|
<div>退款金额</div>
|
|
<div>¥{{refundData.refund_fee}}</div>
|
|
</div>
|
|
<div class="refoundOrder_item">
|
|
<div>退款原因</div>
|
|
<div>{{refundData.refund_reason}}</div>
|
|
</div>
|
|
<!-- <div class="refoundOrder_item_img" >
|
|
<div>上传图片</div>
|
|
<div>
|
|
<img src alt />
|
|
<img src alt />
|
|
<img src alt />
|
|
<img src alt />
|
|
</div>
|
|
</div>-->
|
|
|
|
<div class="refoundOrder_item_address" v-if="stepActive == 2 && iSfailed">
|
|
<h4>退货地址</h4>
|
|
<div class="txt">
|
|
<div>罗爱拉 13456987568</div>
|
|
<div>福建省厦门市集美区李冰大道500号</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="refoundOrder_item_logistics" v-if="stepActive == 3 && !iSrefund">
|
|
<h4>物流信息</h4>
|
|
<div class="txt">
|
|
<div>
|
|
物流公司：
|
|
<span>顺丰公司</span>
|
|
</div>
|
|
<div>
|
|
物流单号：
|
|
<span>2837447782721</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Setting from "~/setting";
|
|
export default {
|
|
props: ["stepActive", "iSfailed", "iSrefund", "orderData"],
|
|
data() {
|
|
return {
|
|
imgUrl: Setting.uplodBaseURL,
|
|
order_goods_ids: [],
|
|
refundData: {}
|
|
};
|
|
},
|
|
watch: {
|
|
stepActive(n, o) {}
|
|
},
|
|
created() {
|
|
this.order_goods_ids = this.orderData.order_goods.map(item => {
|
|
return item.order_goods_id;
|
|
});
|
|
this.getRefundData();
|
|
console.log(this.stepActive, this.iSfailed, this.iSrefund);
|
|
},
|
|
methods: {
|
|
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(res.data);
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.processRefunds {
|
|
.processRefunds_txt {
|
|
.t1,
|
|
.t2,
|
|
.t3 {
|
|
height: 25px;
|
|
line-height: 25px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.t1 {
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
|
|
span {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #ff2828;
|
|
}
|
|
}
|
|
.t2 {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
}
|
|
.t3 {
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
span {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.t4 {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
span {
|
|
color: #ff2828;
|
|
}
|
|
}
|
|
}
|
|
.commodityBox {
|
|
margin-top: 30px;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
.refoundOrder {
|
|
h4 {
|
|
height: 22px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160000;
|
|
line-height: 22px;
|
|
}
|
|
.refoundOrder_item {
|
|
display: flex;
|
|
margin-top: 15px;
|
|
div:first-child {
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
line-height: 20px;
|
|
margin-right: 60px;
|
|
}
|
|
div:last-child {
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 20px;
|
|
display: flex;
|
|
}
|
|
}
|
|
.refoundOrder_item_img {
|
|
display: flex;
|
|
div:first-child {
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
line-height: 20px;
|
|
margin-right: 60px;
|
|
}
|
|
div:last-child {
|
|
height: 60px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 20px;
|
|
display: flex;
|
|
margin-top: 15px;
|
|
img {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
.refoundOrder_item_address {
|
|
padding: 20px 0;
|
|
display: flex;
|
|
h4 {
|
|
height: 22px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #585858;
|
|
line-height: 22px;
|
|
margin-right: 60px;
|
|
}
|
|
.txt {
|
|
div:first-child {
|
|
height: 22px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
line-height: 22px;
|
|
margin-bottom: 10px;
|
|
}
|
|
div:last-child {
|
|
color: #999999;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
.refoundOrder_item_logistics {
|
|
padding: 20px 0;
|
|
display: flex;
|
|
h4 {
|
|
height: 22px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #585858;
|
|
line-height: 22px;
|
|
margin-right: 60px;
|
|
}
|
|
.txt {
|
|
div {
|
|
height: 22px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
line-height: 22px;
|
|
margin-bottom: 10px;
|
|
span {
|
|
color: #222;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|