389 lines
11 KiB
Vue
389 lines
11 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="content-top">
|
||
<!-- <view class="back-img">
|
||
<view class="back-img-c">
|
||
<view class="back-img-t">退款单状态</view>
|
||
<view class="back-img-b">{{status_name}} {{refund_name}} {{reship_name}}...</view>
|
||
</view>
|
||
</view> -->
|
||
<view class='cell-group margin-cell-group'>
|
||
<view class='cell-item add-title-item'>
|
||
<view class='cell-item-bd'>
|
||
<view class="cell-bd-view black-text">
|
||
<text class="cell-bd-text color-3">退款单状态</text>
|
||
</view>
|
||
<view class="cell-bd-view">
|
||
<text class="cell-bd-text color-9">{{status_name}} {{refund_name}} {{reship_name}}...</text>
|
||
</view>
|
||
<view class="cell-bd-view">
|
||
<!-- <text class="cell-bd-text">下单时间：{{ orderInfo.ctime }}</text> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class='cell-group margin-cell-group'>
|
||
<view class='cell-item'>
|
||
<view class='cell-item-hd'><view class='cell-hd-title'>售后类型</view></view>
|
||
<view class='cell-item-ft'><view class="cell-ft-p">{{type_name}}</view></view>
|
||
</view>
|
||
<view class='cell-item'>
|
||
<view class='cell-item-hd'><view class='cell-hd-title'>退款金额</view></view>
|
||
<view class='cell-item-ft'><view class="cell-ft-p red-price">{{refund}}元</view></view>
|
||
</view>
|
||
</view>
|
||
<view class='cell-group margin-cell-group' v-if="images.length > 0">
|
||
<view class='cell-item right-img'><view class='cell-item-hd'><view class='cell-hd-title'>图片凭证</view></view></view>
|
||
<view class="">
|
||
<view class="evaluate-c-b">
|
||
<view class="goods-img-item" v-for="(item, key) in images" :key="key">
|
||
<image :src="item.url" mode="aspectFit" @click="clickImg(item.url)"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class='cell-group margin-cell-group'>
|
||
<view class='cell-item right-img'>
|
||
<view class='cell-item-hd'>
|
||
<view class='cell-hd-title'>问题描述</view>
|
||
</view>
|
||
</view>
|
||
<view class="cell-textarea">
|
||
<text v-if="reason">{{reason}}</text>
|
||
<text v-else>暂无描述</text>
|
||
</view>
|
||
</view>
|
||
<view class='cell-group margin-cell-group' v-show="status == 2 && reship_status == 1">
|
||
<view class='cell-item right-img'>
|
||
<view class='cell-item-hd'>
|
||
<view class='cell-hd-title'>退货邮寄信息</view>
|
||
</view>
|
||
</view>
|
||
<view class='cell-item'>
|
||
<view class='cell-item-hd'>
|
||
<view class='cell-hd-title'>收件人</view>
|
||
</view>
|
||
<view class='cell-item-bd'>
|
||
<input class='cell-bd-input' type="text" disabled="false" :value="reship_info.reship_name" />
|
||
</view>
|
||
</view>
|
||
<view class='cell-item'>
|
||
<view class='cell-item-hd'>
|
||
<view class='cell-hd-title'>联系方式</view>
|
||
</view>
|
||
<view class='cell-item-bd'>
|
||
<input class='cell-bd-input' type="text" disabled="false" :value="reship_info.reship_mobile" />
|
||
</view>
|
||
</view>
|
||
<view class='cell-item'>
|
||
<view class='cell-item-hd'>
|
||
<view class='cell-hd-title'>邮寄地址</view>
|
||
</view>
|
||
<view class='cell-item-bd'>
|
||
<input class='cell-bd-input' type="text" disabled="false" :value="reship_info.reship_area + reship_info.reship_address" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class='cell-group margin-cell-group' v-show="status == 2 && reship_status == 1">
|
||
<view class='cell-item'>
|
||
<view class='cell-item-hd'>
|
||
<view class='cell-hd-title'>快递公司</view>
|
||
</view>
|
||
<view class='cell-item-bd'>
|
||
<input class='cell-bd-input' type="text" v-model="logi_code" placeholder="请填写快递公司名称"/>
|
||
</view>
|
||
</view>
|
||
<view class='cell-item'>
|
||
<view class='cell-item-hd'>
|
||
<view class='cell-hd-title'>物流单号</view>
|
||
</view>
|
||
<view class='cell-item-bd'>
|
||
<input class='cell-bd-input' type="text" v-model="logi_no" placeholder="请填写物流单号" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class='cell-group margin-cell-group' v-show="status == 2 && reship_status > 1">
|
||
<view class='cell-item'>
|
||
<view class='cell-item-hd'>
|
||
<view class='cell-hd-title'>快递公司</view>
|
||
</view>
|
||
<view class='cell-item-bd'>
|
||
<input class='cell-bd-input' type="text" disabled="false" :value="logi_code"/>
|
||
</view>
|
||
</view>
|
||
<view class='cell-item'>
|
||
<view class='cell-item-hd'>
|
||
<view class='cell-hd-title'>物流单号</view>
|
||
</view>
|
||
<view class='cell-item-bd'>
|
||
<input class='cell-bd-input' type="text" disabled="false" :value="logi_no"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="button-bottom" v-show="status == 2 && reship_status == 1">
|
||
<button class="btn btn-b" @click="submitBtn" :disabled='submitStatus' :loading='submitStatus'>提交</button>
|
||
</view>
|
||
<view class="button-bottom" v-show="(order_status == 1 && status == 3) || (order_status == 1 && status == 2 && refund_status != 1 && refund_status != 0) || (order_status == 1 && status == 2 && reship_status == 3)">
|
||
<button class="btn btn-b" @click="repeat">再次申请售后</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
delivers: ["请选择物流公司","顺丰", "中通", "圆通","韵达"],
|
||
deliverIndex: 0,
|
||
type_name:'', //售后类型显示
|
||
refund:0, //退款金额
|
||
images:[], //图片
|
||
reason: '暂无', //问题描述
|
||
ttype:1, //售后类型
|
||
status:1, //售后单状态
|
||
status_name: '审核中', //售后单状态文字描述
|
||
reship_status:0, //退货单状态
|
||
reship_name:'',
|
||
refund_status:0, //退款单状态
|
||
refund_name:'',
|
||
reship_info:[], //退货单明细,如果售后单未审核呢，那么显示的是售后单明细，如果售后单审核通过了，显示退款单明细
|
||
items:[], //退货明细
|
||
mark:"暂无", //拒绝原因
|
||
logi_no:'', //回填物流信息
|
||
logi_code:'', //物流公司
|
||
reship_id:'',
|
||
mode: 'aspectFill',
|
||
order_id: '', //订单号
|
||
order_status: '', //订单状态
|
||
submitStatus: false
|
||
}
|
||
},
|
||
methods: {
|
||
//提交按钮
|
||
submitBtn() {
|
||
this.submitStatus = true;
|
||
if (this.logino == '') {
|
||
this.$common.errorToShow('请输入退货快递信息');
|
||
this.submitStatus = false;
|
||
return false;
|
||
}
|
||
let data = {
|
||
logi_no: this.logi_no,
|
||
logi_code:this.logi_code,
|
||
reship_id: this.reship_id,
|
||
};
|
||
this.$api.sendShip(data, res => {
|
||
if (res.status) {
|
||
this.$common.successToShow('提交成功', ress => {
|
||
this.submitStatus = false;
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
});
|
||
} else {
|
||
this.$common.errorToShow(res.msg);
|
||
this.submitStatus = false;
|
||
}
|
||
});
|
||
},
|
||
repeat() {
|
||
this.$common.navigateTo('../after_sale/index?order_id='+this.order_id);
|
||
},
|
||
// 图片点击放大
|
||
clickImg (img) {
|
||
// 预览图片
|
||
uni.previewImage({
|
||
urls: img.split()
|
||
});
|
||
}
|
||
},
|
||
//页面加载
|
||
onLoad(options) {
|
||
let data = {
|
||
aftersales_id: options.aftersales_id
|
||
}
|
||
this.$api.afterSalesInfo(data, res => {
|
||
if(res.status){
|
||
let info = res.data.info;
|
||
if (info.type == 1){
|
||
this.ttype = 1;
|
||
this.type_name = '仅退款';
|
||
}else{
|
||
this.ttype = 2;
|
||
this.type_name = '退款退货';
|
||
}
|
||
this.refund = info.refund;
|
||
this.images = info.images;
|
||
this.reason = info.reason;
|
||
this.reship_info = res.data.reship;
|
||
this.order_id = info.order_id;
|
||
this.order_status = info.order_status;
|
||
if(info.mark){
|
||
this.mark = info.mark;
|
||
}
|
||
if(info.status == 1){
|
||
this.status = 1;
|
||
this.status_name = '审核中';
|
||
}else if(info.status == 2){
|
||
this.status = 2;
|
||
this.status_name = '申请通过';
|
||
//退款单状态
|
||
if (info.bill_refund) {
|
||
if (info.bill_refund.status == 1) {
|
||
this.refund_status = 1;
|
||
this.refund_name = '退款中';
|
||
} else if (info.bill_refund.status == 2) {
|
||
this.refund_status = 2;
|
||
this.refund_name = '退款成功';
|
||
}
|
||
}
|
||
|
||
//退货单状态
|
||
if(info.bill_reship){
|
||
this.reship_id = info.bill_reship.reship_id
|
||
if(info.bill_reship.status == 1) {
|
||
this.reship_status = 1;
|
||
this.reship_name = '待发退货';
|
||
} else if (info.bill_reship.status == 2) {
|
||
this.reship_status = 2;
|
||
this.reship_name = '待收退货';
|
||
this.logi_no = info.bill_reship.logi_no;
|
||
this.logi_code = info.bill_reship.logi_code;
|
||
} else {
|
||
this.reship_status = 3;
|
||
this.reship_name = '已收退货';
|
||
this.logi_no = info.bill_reship.logi_no;
|
||
this.logi_code = info.bill_reship.logi_code;
|
||
}
|
||
}
|
||
}else{
|
||
this.status = 3;
|
||
this.status_name = '申请驳回';
|
||
}
|
||
//售后单明细,如果有退货单明细，就用退货单明细，否则就用售后单明细
|
||
// if(info.bill_reship.items){
|
||
// page.data.items = info.bill_reship.items;
|
||
// }else{
|
||
// page.data.items = info.items;
|
||
// }
|
||
} else {
|
||
this.$common.errorToShow(res.msg);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.back-img{
|
||
width: 100%;
|
||
height: 200upx;
|
||
position: relative;
|
||
background-color: #FF7159;
|
||
}
|
||
.back-img image{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
}
|
||
.back-img-c{
|
||
width: 100%;
|
||
height: 100%;
|
||
color: #fff;
|
||
position: relative;
|
||
z-index: 99;
|
||
padding: 50upx;
|
||
}
|
||
.back-img-t{
|
||
font-size: 32upx;
|
||
}
|
||
.back-img-b{
|
||
font-size: 24upx;
|
||
}
|
||
.list-goods-name{
|
||
width: 100% !important;
|
||
}
|
||
.invoice-type .uni-list-cell{
|
||
display: inline-block;
|
||
font-size: 26upx;
|
||
color: #333;
|
||
position: relative;
|
||
margin-left: 50upx;
|
||
}
|
||
.invoice-type .uni-list-cell>view{
|
||
display: inline-block;
|
||
}
|
||
.invoice-type-icon{
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.invoice-type-c{
|
||
margin-left: 50upx;
|
||
line-height: 2;
|
||
}
|
||
.cell-item-ft .cell-bd-input{
|
||
text-align: right;
|
||
width: 500upx;
|
||
font-size: 28upx;
|
||
}
|
||
.cell-item-bd .cell-bd-input{
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.right-img{
|
||
border-bottom: 0;
|
||
}
|
||
.cell-textarea{
|
||
padding: 0 26upx 20upx;
|
||
font-size: 26upx;
|
||
color: #333;
|
||
word-wrap: break-word;
|
||
}
|
||
.evaluate-c-b{
|
||
overflow: hidden;
|
||
padding: 0 20upx;
|
||
}
|
||
.upload-img{
|
||
width: 146upx;
|
||
height: 146upx;
|
||
margin: 14upx;
|
||
text-align: center;
|
||
color: #999999;
|
||
font-size: 22upx;
|
||
border: 2upx solid #E1E1E1;
|
||
border-radius: 4upx;
|
||
display: inline-block;
|
||
float: left;
|
||
padding: 24upx 0;
|
||
}
|
||
.goods-img-item{
|
||
width: 174upx;
|
||
height: 174upx;
|
||
padding: 14upx;
|
||
float: left;
|
||
position: relative;
|
||
}
|
||
.goods-img-item:nth-child(4n){
|
||
margin-right: 0;
|
||
}
|
||
.goods-img-item image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.del{
|
||
width: 30upx !important;
|
||
height: 30upx !important;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 999;
|
||
}
|
||
.black-text .cell-bd-text{
|
||
font-size: 28upx;
|
||
}
|
||
</style>
|